/* =====================================================================
   Lara von Waldenfels · Theaterpädagogik — Award One-Pager
   Designsprache: LvW-Design-System (Skill). Statisch, datenschutzkonform:
   Fonts self-hosted, Icons inline, WebGL/GSAP self-hosted, keine Dritt-Dienste.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Schriften (lokal — kein Google-Fonts-Aufruf)                     */
/* ------------------------------------------------------------------ */
@font-face { font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/nunito-400.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/nunito-600.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/nunito-700.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('../assets/fonts/nunito-800.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/hanken-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/hanken-grotesk-700.woff2') format('woff2'); }

/* ------------------------------------------------------------------ */
/* 2. Design-Tokens (aus dem Skill)                                    */
/* ------------------------------------------------------------------ */
:root {
  --cream-50:#FDF8F0; --cream-100:#FBF3E7; --cream-200:#F4E8D6; --cream-300:#EBDBC3;
  --navy-950:#0B1A38; --navy-900:#12244A; --navy-800:#1B315E; --navy-700:#223C74;
  --navy-600:#2E4E93; --navy-400:#6E7EB4; --navy-200:#B9C2DC; --navy-100:#E2E7F1;
  --ink-900:#172341; --ink-800:#29344F; --ink-600:#566076; --ink-400:#8B93A6;
  --rose-100:#F7DEE6; --rose-300:#E39AAF; --rose-500:#C0445F; --rose-600:#A6344F; --rose-700:#892842;
  --plum-100:#EDDFEA; --plum-400:#B58AAC; --plum-500:#955A82; --plum-700:#653A57;
  --lavender-100:#E6E5F4; --lavender-400:#9A93CE; --lavender-500:#7C77C0; --lavender-700:#4E4A86;

  --bg-page:var(--cream-100); --bg-raised:var(--cream-50); --bg-sunken:var(--cream-200);
  --surface-card:var(--cream-50); --surface-invert:var(--navy-950);
  --text-heading:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--ink-600); --text-faint:var(--ink-400);
  --border-soft:var(--cream-300); --border-strong:var(--navy-900);
  --brand:var(--rose-500); --brand-hover:var(--rose-600); --brand-ink:var(--rose-700);
  --accent-plum:var(--plum-500); --accent-lavender:var(--lavender-500);

  --font-display:'Nunito','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  --text-xs:.78rem; --text-sm:.9rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem;
  --text-4xl:4rem; --text-5xl:5.25rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-heavy:800;
  --tracking-tight:-.02em; --tracking-caps:.14em;

  --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(44,29,21,.06),0 2px 6px rgba(44,29,21,.05);
  --shadow-md:0 4px 10px rgba(44,29,21,.08),0 10px 24px rgba(44,29,21,.07);
  --shadow-lg:0 12px 28px rgba(44,29,21,.12),0 24px 60px rgba(44,29,21,.10);
  --shadow-xl:0 28px 60px rgba(44,29,21,.16),0 60px 120px rgba(44,29,21,.12);
  --shadow-brand:0 8px 22px rgba(192,68,95,.22);
  --ease-warm:cubic-bezier(.34,1.28,.64,1); --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms; --dur-base:220ms;
  --container:1180px;
}

/* ------------------------------------------------------------------ */
/* 3. Basis                                                            */
/* ------------------------------------------------------------------ */
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; scroll-padding-top:92px;}
/* Wenn Lenis läuft, steuert JS das Scrollen – natives smooth aus */
html.lenis{scroll-behavior:auto;}
body{
  margin:0; background:var(--bg-page); color:var(--text-body);
  font:var(--weight-regular) var(--text-base)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* zarte, warme Papier-Lichtstimmung im Grund */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(192,68,95,.10), transparent 60%),
    radial-gradient(900px 700px at 10% 8%, rgba(124,119,192,.10), transparent 60%),
    radial-gradient(1000px 900px at 50% 118%, rgba(149,90,130,.10), transparent 60%);
}
h1,h2,h3,h4{text-wrap:balance;}
img{max-width:100%; display:block;}
a{color:var(--navy-700);}
::selection{background:var(--rose-300); color:var(--navy-950);}
:focus-visible{outline:3px solid var(--rose-500); outline-offset:2px; border-radius:6px;}

.container{max-width:var(--container); margin:0 auto; padding-left:28px; padding-right:28px;}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font:var(--weight-bold) var(--text-xs)/1 var(--font-body);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--brand-ink); margin:0;
}
.kicker::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px; opacity:.7;}
.kicker--plum{color:var(--plum-500);}
.kicker--lavender{color:var(--lavender-700);}
.kicker--on-dark{color:var(--rose-300);}

.icon{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon svg{width:1em; height:1em; display:block;}

/* ------------------------------------------------------------------ */
/* 4. Scroll-Fortschritt + Spotlight-Cursor                            */
/* ------------------------------------------------------------------ */
.progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--rose-500),var(--plum-500) 55%,var(--lavender-500));}

.cursor-glow{position:fixed; top:0; left:0; width:520px; height:520px; z-index:0; pointer-events:none;
  margin:-260px 0 0 -260px; border-radius:50%; opacity:0; transition:opacity .5s var(--ease-out);
  background:radial-gradient(circle, rgba(192,68,95,.16), rgba(124,119,192,.10) 42%, transparent 68%);}
.has-fine-pointer .cursor-glow{opacity:1;}

/* ------------------------------------------------------------------ */
/* 5. Buttons                                                          */
/* ------------------------------------------------------------------ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border:1.5px solid transparent; border-radius:var(--radius-pill);
  font:var(--weight-semibold) var(--text-base)/1 var(--font-body); letter-spacing:.01em;
  cursor:pointer; text-decoration:none; white-space:nowrap; color:var(--ink-900);
  transition:transform var(--dur-fast) var(--ease-warm), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base);
}
.btn .icon{font-size:20px;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:scale(.97);}
.btn--primary{background:var(--brand); color:var(--cream-50); box-shadow:var(--shadow-brand);}
.btn--primary:hover{background:var(--brand-hover); box-shadow:0 12px 30px rgba(192,68,95,.32);}
.btn--navy{background:var(--navy-800); color:var(--cream-50); box-shadow:var(--shadow-sm);}
.btn--navy:hover{background:var(--navy-900);}
.btn--outline{background:transparent; color:var(--ink-900); border:2px solid var(--ink-900);}
.btn--outline:hover{background:var(--cream-200);}
.btn--ghost{background:rgba(255,255,255,.08); color:var(--cream-50); border:1.5px solid rgba(255,255,255,.28); backdrop-filter:blur(4px);}
.btn--ghost:hover{background:rgba(255,255,255,.16);}
.btn--sm{padding:9px 17px; border-radius:var(--radius-md); font-size:var(--text-sm); gap:6px;}
.btn--lg{padding:17px 36px; font-size:var(--text-md); gap:10px;}
.btn--lg .icon{font-size:22px;}
.btn--full{display:flex; width:100%;}
.btn__arrow{transition:transform var(--dur-base) var(--ease-warm);}
.btn:hover .btn__arrow{transform:translateX(4px);}

/* ------------------------------------------------------------------ */
/* 6. Tags                                                             */
/* ------------------------------------------------------------------ */
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 15px;
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-body); border-radius:var(--radius-pill); white-space:nowrap;}
.tag--sm{padding:3px 10px; font-size:var(--text-xs);}
.tag--rose{background:var(--rose-100); color:var(--rose-700);}
.tag--plum{background:var(--plum-100); color:var(--plum-700);}
.tag--lavender{background:var(--lavender-100); color:var(--lavender-700);}
.tag--navy{background:var(--navy-100); color:var(--navy-700);}

/* ------------------------------------------------------------------ */
/* 7. Kopfzeile / Navigation                                          */
/* ------------------------------------------------------------------ */
.site-header{position:fixed; top:0; left:0; right:0; z-index:40;
  transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
  background:transparent; border-bottom:1.5px solid transparent;}
.site-header.is-solid{background:rgba(251,243,231,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--border-soft); box-shadow:0 4px 20px rgba(44,29,21,.05);}
.site-header__inner{max-width:var(--container); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; background:none; border:none; cursor:pointer; padding:0;}
.brand__plate{background:#fff; border-radius:var(--radius-md); padding:4px; box-shadow:var(--shadow-sm); display:flex;}
.brand__plate img{width:42px; height:42px; object-fit:contain; border-radius:8px;}
.brand__name{display:block; font:var(--weight-bold) var(--text-md)/1 var(--font-display); color:var(--navy-800);}
.brand__sub{display:block; margin-top:3px; font:var(--weight-semibold) var(--text-xs)/1 var(--font-body); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted);}

.site-nav{display:flex; align-items:center; gap:4px;}
.site-nav a{padding:9px 15px; border-radius:var(--radius-pill); text-decoration:none;
  font:var(--weight-medium) var(--text-sm)/1 var(--font-body); color:var(--text-muted);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);}
.site-nav a:hover{color:var(--navy-800); background:var(--cream-200);}
.site-nav a.is-active{background:var(--cream-200); color:var(--navy-800); font-weight:var(--weight-bold);}
.site-nav .btn{margin-left:8px;}
/* Button in der Navigation: immer weiße Schrift auf Rose (überschreibt Link-Farben) */
.site-nav a.btn--primary, .site-nav a.btn--primary.is-active{background:var(--brand); color:var(--cream-50);}
.site-nav a.btn--primary:hover{background:var(--brand-hover); color:var(--cream-50);}

.nav-toggle{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer;}
.nav-toggle span{width:24px; height:2.5px; background:var(--navy-800); border-radius:2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ------------------------------------------------------------------ */
/* 8. Intro — Leinen-Vorhang (Foto-Textur) öffnet sich                 */
/* ------------------------------------------------------------------ */
.intro{position:fixed; inset:0; z-index:80; display:none; overflow:hidden; pointer-events:none; background:var(--cream-100);}
html.js .intro{display:block;}
.intro__panel{position:absolute; top:0; bottom:0; width:50.5%; will-change:transform;
  background-image:url('../assets/img/curtain.jpg'); background-size:200% 100%; background-repeat:no-repeat;}
.intro__panel--left{left:-0.5%; background-position:0% 50%;}
.intro__panel--right{right:-0.5%; background-position:100% 50%;}
/* weiche Schattenkante an der Naht (auf dunklem Navy-Stoff) */
.intro__panel--left::after, .intro__panel--right::after{content:""; position:absolute; top:0; bottom:0; width:40px;}
.intro__panel--left::after{right:0; background:linear-gradient(270deg, rgba(0,0,0,.35), transparent);}
.intro__panel--right::after{left:0; background:linear-gradient(90deg, rgba(0,0,0,.35), transparent);}
/* EIN großes Logo mittig auf der Naht — es teilt sich beim Öffnen mit dem Vorhang */
.intro__crest{position:absolute; top:50%; width:290px; height:580px; margin-top:-290px;
  background:#fff; box-shadow:0 34px 90px rgba(0,0,0,.4); overflow:hidden; display:block; z-index:2;}
.intro__panel--left .intro__crest{right:0; border-radius:72px 0 0 72px;}
.intro__panel--right .intro__crest{left:0; border-radius:0 72px 72px 0;}
.intro__crest img{position:absolute; top:50%; transform:translateY(-50%); width:500px; height:500px; max-width:none; object-fit:contain;}
.intro__panel--left .intro__crest img{left:40px;}
.intro__panel--right .intro__crest img{right:40px;}
/* Sicherheitsnetz: Intro verschwindet auch dann, falls das Skript ausfällt */
html.js .intro{animation:introSafety .4s linear 3.6s forwards;}
@keyframes introSafety{to{opacity:0; visibility:hidden; pointer-events:none;}}

/* ------------------------------------------------------------------ */
/* 9. Hero                                                             */
/* ------------------------------------------------------------------ */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:120px 0 80px;}
/* Bild bewusst nach rechts versetzt: Lara bleibt rechts vom Text, links übernimmt der Schleier */
.hero__bg{position:absolute; top:0; bottom:0; left:10%; z-index:0; width:100%; height:100%; object-fit:cover; object-position:0% 46%; will-change:transform;}
.hero__veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(251,243,231,.97) 0%, rgba(251,243,231,.9) 26%, rgba(251,243,231,.5) 44%, rgba(251,243,231,.08) 60%, rgba(251,243,231,0) 72%),
    linear-gradient(180deg, rgba(251,243,231,.35), rgba(251,243,231,0) 20%, rgba(251,243,231,0) 68%, rgba(251,243,231,.6));}
.hero__inner{position:relative; z-index:3; max-width:var(--container); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:minmax(0,520px); align-items:center; width:100%;}
.hero__copy{max-width:520px;}

.hero__eyebrow{margin-bottom:20px;}
.hero__title{font-family:var(--font-display); font-weight:var(--weight-heavy);
  font-size:clamp(2.7rem, 3.4vw + 1.6rem, 4.7rem); line-height:1.03; letter-spacing:var(--tracking-tight);
  color:var(--navy-900); margin:0;}
.hero__title .line{display:block; overflow:hidden;}
.hero__title .w{display:inline-block; will-change:transform;}
.hero__title .accent{color:var(--rose-500);}
.hero__lead{font:var(--weight-regular) var(--text-lg)/1.6 var(--font-body); color:var(--ink-800); max-width:46ch; margin:24px 0 0;}
.hero__actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero__tags{display:flex; gap:9px; margin-top:30px; flex-wrap:wrap;}

/* Badge über dem Hero-Foto */
.hero__badge{position:absolute; z-index:3; bottom:40px; right:36px; background:#fff; border-radius:var(--radius-lg);
  padding:14px 18px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:12px; max-width:240px;}
.hero__badge .icon{font-size:26px; color:var(--rose-500);}
.hero__badge span{font:var(--weight-semibold) var(--text-sm)/1.35 var(--font-body); color:var(--navy-800);}

.hero__scroll{position:absolute; z-index:3; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-body); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--text-muted);}
.hero__scroll .mouse{width:24px; height:38px; border:2px solid var(--navy-400); border-radius:14px; position:relative;}
.hero__scroll .mouse::after{content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px;
  background:var(--rose-500); border-radius:2px; animation:scrollDot 1.6s var(--ease-out) infinite;}
@keyframes scrollDot{0%{opacity:0; transform:translateY(-4px);}40%{opacity:1;}80%{opacity:0; transform:translateY(9px);}100%{opacity:0;}}

/* ------------------------------------------------------------------ */
/* 10. Sektionen                                                       */
/* ------------------------------------------------------------------ */
.section{position:relative; padding:104px 0; background:var(--bg-page);}
.section--sunken{background:var(--bg-sunken);}
.section--dark{background:var(--navy-950); color:var(--navy-200);}
.section__head{max-width:60ch; margin:0 0 52px;}
.section__head--center{margin-left:auto; margin-right:auto; text-align:center;}
.section__head--center .kicker{justify-content:center;}
.section__title{font:var(--weight-heavy) clamp(2rem,2.4vw + 1.2rem,3rem)/1.1 var(--font-display); color:var(--navy-900); margin:14px 0 0; letter-spacing:var(--tracking-tight);}
.section--dark .section__title{color:var(--cream-50);}
.section__intro{font:var(--weight-regular) var(--text-md)/1.68 var(--font-body); color:var(--text-muted); margin:18px 0 0;}
.section--dark .section__intro{color:var(--navy-200);}

/* ------------------------------------------------------------------ */
/* 11. Karten / Benefits / Angebot                                    */
/* ------------------------------------------------------------------ */
.grid{display:grid; gap:22px;}
.grid--benefits{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--offers{grid-template-columns:repeat(2, minmax(0,1fr));} /* 2×2-Kacheln */

.card{position:relative; background:var(--surface-card); border:1.5px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-warm), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);}
.card--raised{border:none; box-shadow:var(--shadow-md);}
.card--lift:hover{box-shadow:var(--shadow-lg); border-color:var(--rose-300);}

/* 3D-Tilt-Karten */
.tilt{transform-style:preserve-3d; will-change:transform;}
.tilt > *{transform:translateZ(0.01px);}

.icon-tile{width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; transform:translateZ(40px);}
.icon-tile .icon{font-size:28px;}
.icon-tile--rose{background:var(--rose-100); color:var(--rose-700);}
.icon-tile--plum{background:var(--plum-100); color:var(--plum-700);}
.icon-tile--navy{background:var(--navy-100); color:var(--navy-700);}
.icon-tile--lavender{background:var(--lavender-100); color:var(--lavender-700);}

.feature{display:flex; flex-direction:column; gap:13px;}
.feature h3{font:var(--weight-bold) var(--text-xl)/1.2 var(--font-display); color:var(--navy-900); margin:4px 0 0;}
.feature p{font:var(--weight-regular) var(--text-base)/1.62 var(--font-body); color:var(--text-muted); margin:0;}
.feature em{font-style:italic; color:var(--rose-600);}

.offer{display:flex; flex-direction:column; gap:15px;}
.offer h3{font:var(--weight-bold) var(--text-xl)/1.2 var(--font-display); color:var(--navy-900); margin:0;}
.offer p{font:var(--weight-regular) var(--text-base)/1.62 var(--font-body); color:var(--text-muted); margin:0;}
.offer .tag{align-self:flex-start;}
.offer__list{margin:2px 0 0; padding:0; list-style:none; display:grid; gap:9px;}
.offer__list li{position:relative; padding-left:26px; font:var(--weight-regular) var(--text-sm)/1.5 var(--font-body); color:var(--text-muted);}
.offer__list li::before{content:""; position:absolute; left:5px; top:8px; width:8px; height:8px; border-radius:50%; background:var(--rose-300);}
.offer__link{display:inline-flex; align-items:center; gap:7px; margin-top:auto; background:none; border:none; padding:0; cursor:pointer; text-decoration:none;
  color:var(--brand-ink); font:var(--weight-bold) var(--text-sm)/1 var(--font-body);}
.offer__link .icon{font-size:16px; transition:transform var(--dur-base) var(--ease-warm);}
.offer__link:hover .icon{transform:translateX(4px);}

/* Coming-soon-Modul (Ferientheater) */
.offer--soon{background:linear-gradient(160deg,var(--lavender-100),var(--cream-50)); border-color:var(--lavender-400);}
.soon-badge{display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:6px 14px; border-radius:var(--radius-pill); background:#fff; box-shadow:var(--shadow-sm);
  font:var(--weight-bold) var(--text-xs)/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--lavender-700);}
.soon-badge .dot{width:9px; height:9px; border-radius:50%; background:var(--lavender-500); position:relative;}
.soon-badge .dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--lavender-500); animation:pulse 1.8s var(--ease-out) infinite;}
@keyframes pulse{0%{transform:scale(1); opacity:.6;}100%{transform:scale(2.6); opacity:0;}}
.offer__note{font:var(--weight-medium) var(--text-sm)/1.5 var(--font-body); color:var(--plum-700); margin:0;}

/* ------------------------------------------------------------------ */
/* 12. Akt-Break (Parallax-Bild)                                       */
/* ------------------------------------------------------------------ */
.act-break{position:relative; min-height:60vh; display:flex; align-items:center; overflow:hidden; background:var(--navy-950);}
.act-break__bg{position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform;}
.act-break__scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,26,56,.82), rgba(11,26,56,.35) 60%, rgba(11,26,56,.55));}
.act-break__inner{position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:64px 28px;}
.act-break__quote{font:var(--weight-heavy) clamp(1.8rem,3vw + 1rem,3.1rem)/1.18 var(--font-display); color:var(--cream-50); max-width:20ch; margin:14px 0 0; letter-spacing:var(--tracking-tight);}
.act-break__quote em{font-style:normal; color:var(--rose-300);}

/* ------------------------------------------------------------------ */
/* 13. "So arbeite ich" (Haltung)                                      */
/* ------------------------------------------------------------------ */
.approach{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.approach__visual{position:relative; aspect-ratio:1/1; border-radius:var(--radius-xl); overflow:hidden;
  background:linear-gradient(150deg,var(--plum-400),var(--navy-800)); box-shadow:var(--shadow-lg);}
.approach__visual img{width:100%; height:100%; object-fit:cover;}
.approach__visual .photo__label{position:absolute; left:16px; bottom:14px; color:#fff; opacity:.85;
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-body); letter-spacing:.04em;}
.principles{display:grid; gap:18px; margin:8px 0 0; padding:0; list-style:none;}
.principle{display:flex; gap:18px; align-items:flex-start;}
.principle__num{flex-shrink:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:var(--weight-heavy) var(--text-md)/1 var(--font-display); color:#fff; background:var(--rose-500); box-shadow:var(--shadow-brand);}
.principle:nth-child(2) .principle__num{background:var(--plum-500);}
.principle:nth-child(3) .principle__num{background:var(--lavender-500);}
.principle h3{font:var(--weight-bold) var(--text-lg)/1.25 var(--font-display); color:var(--navy-900); margin:6px 0 4px;}
.principle p{font:var(--weight-regular) var(--text-base)/1.6 var(--font-body); color:var(--text-muted); margin:0;}

/* ------------------------------------------------------------------ */
/* 14. Über mich                                                       */
/* ------------------------------------------------------------------ */
.about{display:grid; grid-template-columns:.82fr 1.18fr; gap:52px; align-items:start;}
.about__figure{position:relative;}
.about__ring{position:absolute; inset:-22px; z-index:0; pointer-events:none;}
.about__ring circle{fill:none; stroke:var(--rose-300); stroke-width:2; stroke-dasharray:6 10; opacity:.8;}
.photo{position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.photo img{width:100%; height:100%; object-fit:cover;}
.about__photo img{object-position:50% 22%;}
.photo .icon{font-size:46px; opacity:.85;}
.photo__label{position:absolute; left:14px; bottom:12px; font:var(--weight-semibold) var(--text-xs)/1 var(--font-body); letter-spacing:.04em; opacity:.9;}
.photo--rose{background:linear-gradient(150deg,#E39AAF,#C0445F); color:#fff;}
.photo--plum{background:linear-gradient(150deg,#B58AAC,#955A82); color:#fff;}
.photo--navy{background:linear-gradient(150deg,#3A5AA0,#12244A); color:#cdd6ec;}
.photo--lavender{background:linear-gradient(150deg,#B3ACE0,#7C77C0); color:#fff;}
.photo--framed{border:6px solid #fff; box-shadow:var(--shadow-xl);}
.about__photo{position:relative; z-index:1; aspect-ratio:4/5;}
.about__lead{font:var(--weight-semibold) var(--text-lg)/1.55 var(--font-body); color:var(--text-body); margin:0 0 16px;}
.about__text{font:var(--weight-regular) var(--text-md)/1.66 var(--font-body); color:var(--text-muted); margin:0 0 26px;}

.quali{margin:26px 0 0; padding:0; list-style:none; display:grid; gap:13px;}
.quali li{display:flex; gap:13px; align-items:flex-start; font:var(--weight-regular) var(--text-base)/1.55 var(--font-body); color:var(--text-muted);}
.quali .icon{font-size:20px; color:var(--rose-500); margin-top:3px;}
.quali strong{color:var(--navy-900); font-weight:var(--weight-bold);}

/* ------------------------------------------------------------------ */
/* 15. CTA-Band (Finale)                                               */
/* ------------------------------------------------------------------ */
.cta-band{position:relative; background:var(--surface-invert); padding:104px 0; overflow:hidden;}
.cta-band__glow{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 440px at 30% 120%, rgba(192,68,95,.34), transparent 62%),
    radial-gradient(560px 420px at 78% -10%, rgba(124,119,192,.28), transparent 60%);}
.cta-band__inner{position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 28px; text-align:center;}
.cta-band h2{font:var(--weight-heavy) clamp(2.2rem,3vw + 1.2rem,3.6rem)/1.05 var(--font-display); color:var(--cream-50); margin:0 0 16px; letter-spacing:var(--tracking-tight);}
.cta-band p{font:var(--weight-regular) var(--text-md)/1.62 var(--font-body); color:var(--navy-200); margin:0 auto 30px; max-width:46ch;}

/* ------------------------------------------------------------------ */
/* 16. Kontakt                                                         */
/* ------------------------------------------------------------------ */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start;}
.form{display:grid; gap:18px;}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:grid; gap:6px;}
.field > label{font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-body); color:var(--navy-800);}
.field .optional{font-weight:var(--weight-regular); color:var(--text-faint);}
.field input, .field select, .field textarea{width:100%; padding:13px 15px; background:var(--cream-50); color:var(--ink-900);
  border:1.5px solid var(--border-soft); border-radius:var(--radius-md);
  font:var(--weight-regular) var(--text-base)/1.4 var(--font-body); transition:border-color var(--dur-base), box-shadow var(--dur-base);}
.field textarea{resize:vertical; min-height:130px;}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-400);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--rose-500); box-shadow:0 0 0 3px var(--rose-100);}
.field--check{grid-template-columns:auto 1fr; align-items:start; gap:11px;}
.field--check input{width:18px; height:18px; margin-top:3px; accent-color:var(--rose-500);}
.field--check label{font:var(--weight-regular) var(--text-sm)/1.5 var(--font-body); color:var(--text-muted);}
.form-note{font:var(--weight-medium) var(--text-sm)/1.5 var(--font-body); margin:0;}
.form-note.is-error{color:var(--rose-600);}
.form-note.is-ok{color:#4C8A5A;}
.form-success{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:28px 0;}
.form-success__badge{width:66px; height:66px; border-radius:50%; background:var(--rose-100); display:flex; align-items:center; justify-content:center;}
.form-success__badge .icon{font-size:32px; color:var(--rose-600);}
.form-success h3{font:var(--weight-bold) var(--text-xl)/1.2 var(--font-display); color:var(--navy-900); margin:0;}
.form-success p{font:var(--weight-regular) var(--text-md)/1.6 var(--font-body); color:var(--text-muted); margin:0; max-width:38ch;}

.aside{display:grid; gap:16px;}
.callout{display:flex; gap:14px; padding:var(--space-5); border-radius:var(--radius-md); border-left:4px solid;}
.callout--navy{background:var(--navy-100); border-color:var(--navy-600);}
.callout--plum{background:var(--plum-100); border-color:var(--plum-500);}
.callout__ico{display:flex; flex-shrink:0; margin-top:2px;}
.callout--plum .callout__ico{color:var(--plum-700); font-size:20px;}
.callout__title{font:var(--weight-bold) var(--text-md)/1.3 var(--font-display); color:var(--ink-900); margin-bottom:4px;}
.callout__body{font:var(--weight-regular) var(--text-base)/1.6 var(--font-body); color:var(--ink-800);}
.callout__body a{color:inherit;}
.contact-lines{display:grid; gap:11px; margin-top:6px;}
.contact-lines a, .contact-lines span{display:flex; align-items:center; gap:11px; color:var(--ink-800); text-decoration:none; font-size:var(--text-base);}
.contact-lines .icon{font-size:18px; color:var(--navy-700);}
.contact-lines a:hover{color:var(--rose-600);}

/* ------------------------------------------------------------------ */
/* 17. Fußzeile                                                        */
/* ------------------------------------------------------------------ */
.site-footer{background:var(--navy-950); color:var(--navy-200); padding:56px 0 34px;}
.site-footer__inner{max-width:var(--container); margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.site-footer__brand{max-width:340px;}
.site-footer__logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.site-footer__logo .brand__plate{border-radius:10px;}
.site-footer__logo .brand__plate img{width:36px; height:36px; border-radius:6px;}
.site-footer__logo span{font:var(--weight-bold) var(--text-md)/1.1 var(--font-display); color:var(--cream-50);}
.site-footer__brand p{font:var(--weight-regular) var(--text-sm)/1.55 var(--font-body); color:var(--navy-400); margin:0;}
.site-footer__cols{display:flex; gap:56px; flex-wrap:wrap;}
.site-footer__col h4{font:var(--weight-bold) var(--text-xs)/1 var(--font-body); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--navy-400); margin:0 0 14px;}
.site-footer__col a, .site-footer__col span{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--navy-200); font:var(--weight-regular) var(--text-sm)/1.6 var(--font-body); margin-bottom:9px;}
.site-footer__col a:hover{color:var(--cream-50);}
.site-footer__col .icon{font-size:16px;}
.site-footer__bottom{max-width:var(--container); margin:30px auto 0; padding:20px 28px 0;
  border-top:1px solid var(--navy-800); font:var(--weight-regular) var(--text-sm)/1.5 var(--font-body); color:var(--navy-400);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.site-footer__bottom a{color:var(--navy-200); text-decoration:none; margin-left:16px;}
.site-footer__bottom a:hover{color:var(--cream-50);}

/* ------------------------------------------------------------------ */
/* 18. Rechtstexte                                                     */
/* ------------------------------------------------------------------ */
.legal{padding:120px 0 80px;}
.legal .container{max-width:760px;}
.legal h1{font:var(--weight-heavy) var(--text-3xl)/1.1 var(--font-display); color:var(--navy-900); margin:0 0 8px;}
.legal h2{font:var(--weight-bold) var(--text-lg)/1.3 var(--font-display); color:var(--navy-800); margin:32px 0 6px;}
.legal p, .legal li{font:var(--weight-regular) var(--text-base)/1.7 var(--font-body); color:var(--text-body);}
.legal a{color:var(--rose-600);}
.legal ul{padding-left:20px;}
.legal-back{display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:var(--navy-700); text-decoration:none; font-weight:var(--weight-semibold);}

/* ------------------------------------------------------------------ */
/* 19. Reveal-Animationen                                              */
/* ------------------------------------------------------------------ */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.is-visible{opacity:1; transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;} .reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;} .reveal[data-delay="4"]{transition-delay:.32s;}
.reveal[data-delay="5"]{transition-delay:.40s;}

.todo{background:#FFF3BF; border:1px dashed #D6A700; color:#6b5300; border-radius:var(--radius-sm);
  padding:10px 14px; font:var(--weight-medium) var(--text-sm)/1.5 var(--font-body);}

/* ------------------------------------------------------------------ */
/* 20. Responsiv                                                       */
/* ------------------------------------------------------------------ */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr; gap:36px;}
  /* Mobil: kräftigerer Schleier für Lesbarkeit auf dem Foto */
  .hero__veil{background:
    linear-gradient(90deg, rgba(251,243,231,.93), rgba(251,243,231,.82) 55%, rgba(251,243,231,.55)),
    linear-gradient(180deg, rgba(251,243,231,.4), rgba(251,243,231,0) 26%, rgba(251,243,231,0) 66%, rgba(251,243,231,.65));}
  .approach{grid-template-columns:1fr; gap:34px;}
  .about{grid-template-columns:1fr; gap:34px;}
  .about__photo{max-width:360px;}
  .contact{grid-template-columns:1fr; gap:30px;}
}
@media (max-width:760px){
  .section{padding:76px 0;}
  .hero{padding:110px 0 70px;}
  .grid--offers{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .site-footer__inner{gap:28px;}
  .nav-toggle{display:flex;}
  .site-nav{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px;
    background:var(--cream-50); border-bottom:1.5px solid var(--border-soft); padding:12px 20px 20px; box-shadow:var(--shadow-md); display:none;}
  .site-nav.is-open{display:flex;}
  .site-nav a{padding:12px 14px; border-radius:var(--radius-md);}
  .site-nav .btn{margin:8px 0 0; width:100%;}
  .hero__badge{display:none;}
}
@media (max-width:760px){
  .intro__crest{width:160px; height:320px; margin-top:-160px;}
  .intro__panel--left .intro__crest{border-radius:44px 0 0 44px;}
  .intro__panel--right .intro__crest{border-radius:0 44px 44px 0;}
  .intro__crest img{width:276px; height:276px;}
  .intro__panel--left .intro__crest img{left:22px;}
  .intro__panel--right .intro__crest img{right:22px;}
}
@media (max-width:420px){
  .container, .hero__inner, .site-header__inner{padding-left:20px; padding-right:20px;}
}

/* ------------------------------------------------------------------ */
/* 21. Reduzierte Bewegung — alles sofort sichtbar, ruhig             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .btn:hover{transform:none;}
  .hero__scroll .mouse::after, .soon-badge .dot::after{animation:none;}
  .intro{display:none !important;}
}