/* SONORA — shared design system + chrome for inner pages.
   Mirror of the inline <style> in ../index.html (single source of truth).
   Inner pages link this + page.css and inject header/footer/FAB via chrome.js.
   Differences vs. index.html: Sonora loaded from woff2 (not base64), and the
   header logo is always visible (inner pages have no hero brand lockup). */
  /* Eigene Marken-Schrift SONORA (nur für den Wortmark / Brand-Titel) */
  @font-face{
    font-family:'Sonora';
    src:url('../fonts/Sonora-Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  :root{
    --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --ink:#0b0907;
    --dark:#11100d;
    --dark-2:#1a1713;
    --dark-3:#221e19;
    --line:#2e2822;
    --line-2:#3a332b;
    --paper:#f3ead9;
    --paper-d:#c4bba7;
    --mute:#7c746a;
    --mute-2:#9c9386;
    --gold: oklch(0.83 0.13 85);
    --gold-d: oklch(0.62 0.11 80);
    --gold-soft: oklch(0.82 0.13 85 / .14);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth}
  html,body{background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:15px; line-height:1.55; font-feature-settings:"ss01","ss02"}
  ::selection{background:var(--gold); color:#2a1f0e}

  a{color:inherit; text-decoration:none}
  img, svg{display:block; max-width:100%}

  /* ===================== GLOBAL ===================== */
  .eyebrow{font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:10px}
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--gold); display:inline-block}
  .dspl{font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal; letter-spacing:-.05em; line-height:.92}
  .mono{font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2)}
  .ital{font-style:normal; color:var(--gold); font-weight:400}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    padding:15px 22px; border:1px solid var(--paper); color:var(--paper);
    background:transparent; cursor:pointer; transition: all .25s ease;
  }
  .btn:hover{background:var(--paper); color:var(--dark)}
  .btn--gold{background:var(--gold); border-color:var(--gold); color:#241a08}
  .btn--gold:hover{background:var(--paper); border-color:var(--paper); color:var(--dark)}
  .btn--ghost{border-color:var(--mute)}
  .btn--ghost:hover{border-color:var(--paper); background:transparent; color:var(--paper)}
  .btn .arrow{transition:transform .25s ease}
  .btn:hover .arrow{transform:translateX(4px)}

  .container{max-width:1360px; margin:0 auto; padding:0 56px}

  /* ===================== HEADER ===================== */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 56px; display:flex; align-items:center; justify-content:space-between;
    transition: all .3s ease;
  }
  header.site.stuck{
    background:rgba(11,9,7,.86); backdrop-filter: blur(14px);
    border-bottom:1px solid var(--line); padding:16px 56px;
  }
  /* Logo lockup (per Design System site.css). Two lines, all Fraunces:
     mark upright 600 + sub italic 500. */
  .logo{
    display:flex; flex-direction:column; gap:0; line-height:1; color:var(--paper);
  }
  .logo .mark{
    font-family:'Sonora','Fraunces',serif; font-style:normal; font-weight:400;
    font-size:32px; letter-spacing:-.025em; line-height:1;
    color:var(--paper);
  }
  .logo .sub{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:11.5px; letter-spacing:.164em; line-height:1; text-transform:uppercase;
    color:var(--paper-d);
    /* Lockup-Lab-Werte: Versalien, per Sperrung exakt auf SONORA-Breite gespreizt */
    margin-top:1.5px;
  }
  /* Header-Logo immer sichtbar (zweizeiliges Lockup: SONORA + Creative Studio). */

  nav.site{display:flex; gap:30px; align-items:center}
  nav.site a{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-d); transition:color .2s}
  nav.site a:hover{color:var(--gold)}
  nav.site .cta{padding:9px 16px; border:1px solid var(--gold); color:var(--gold)}
  nav.site .cta:hover{background:var(--gold); color:#241a08}
  .lang-pick{position:relative; margin-right:6px}
  .lang-pick .lang-trigger{
    background:transparent; border:1px solid var(--line-2); color:var(--paper);
    font-family:var(--sans); font-size:10px; letter-spacing:.18em;
    padding:7px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  }
  .lang-pick .lang-trigger b{color:var(--paper); font-weight:500}
  .lang-pick .lang-trigger .chev{font-size:9px; color:var(--mute-2); transition:transform .2s}
  .lang-pick.open .lang-trigger{border-color:var(--gold); color:var(--gold)}
  .lang-pick.open .lang-trigger .chev{transform:rotate(180deg); color:var(--gold)}
  .lang-pick .lang-menu{
    position:absolute; top:calc(100% + 8px); right:0;
    list-style:none; margin:0; padding:6px; min-width:180px;
    background:var(--dark-2); border:1px solid var(--line-2);
    box-shadow:0 18px 48px rgba(0,0,0,.6);
    display:none; z-index:50;
  }
  .lang-pick.open .lang-menu{display:block}
  .lang-pick .lang-menu li{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; cursor:pointer;
    font-family:var(--sans); font-size:10px; letter-spacing:.18em; color:var(--mute-2);
  }
  .lang-pick .lang-menu li b{color:var(--paper); font-weight:500; min-width:22px}
  .lang-pick .lang-menu li span{font-family:var(--sans); font-size:13px; letter-spacing:0; color:var(--paper-d); text-transform:none}
  .lang-pick .lang-menu li:hover{background:var(--dark-3); color:var(--paper)}
  .lang-pick .lang-menu li.on{color:var(--gold)}
  .lang-pick .lang-menu li.on b{color:var(--gold)}

  /* ===== Angebot-Dropdown (Desktop: Hover/Fokus · Mobile: inline-Link) ===== */
  .nav-drop{position:relative; display:inline-flex; align-items:center}
  .nav-drop > .nav-drop-trigger{display:inline-flex; align-items:center; gap:6px}
  .nav-drop > .nav-drop-trigger .chev{font-size:9px; color:var(--mute-2); transition:transform .2s}
  .nav-drop:hover > .nav-drop-trigger .chev,
  .nav-drop:focus-within > .nav-drop-trigger .chev{transform:rotate(180deg); color:var(--gold)}
  .nav-drop::after{content:''; position:absolute; left:0; right:0; top:100%; height:16px}
  .nav-drop-menu{
    position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; min-width:200px; padding:6px;
    background:var(--dark-2); border:1px solid var(--line-2);
    box-shadow:0 18px 48px rgba(0,0,0,.6);
    opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:60;
  }
  .nav-drop:hover > .nav-drop-menu,
  .nav-drop:focus-within > .nav-drop-menu{opacity:1; visibility:visible}
  .nav-drop-menu a{
    padding:11px 14px; font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--paper-d); white-space:nowrap; transition:background .2s, color .2s;
  }
  .nav-drop-menu a:hover{background:var(--dark-3); color:var(--gold)}
  @media (max-width:960px){
    .nav-drop::after{display:none}
    .nav-drop-menu{display:none}
    .nav-drop > .nav-drop-trigger .chev{display:none}
  }

  /* hero brand block — SONORA wordmark + mono tagline above H1. */
  .hero .hero-brand{margin-bottom:0; display:flex; flex-direction:column; gap:0; align-items:flex-start}
  /* großer Marken-Schriftzug im Hero (Visitenkarten-Look): „Creative Studio“ neben „SONORA“ */
  .hero .hero-brand .hb-lockup{display:flex; flex-direction:column; align-items:flex-start; gap:0}
  .hero .hero-brand .hb-name{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:clamp(54px, 7vw, 104px); line-height:.82; letter-spacing:-.06em;
    color:var(--paper); margin-left:-0.045em;
  }
  .hero .hero-brand .hb-tagline{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:clamp(16px, 1.9vw, 26px); line-height:.98; letter-spacing:-.025em;
    color:var(--paper); margin-top:6px;
  }
  .hero .hero-brand .hb-sub{
    font-family:var(--sans);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-2);
    line-height:1; margin-top:20px;
  }
  .hero .hero-brand .hb-sub b{color:var(--paper); font-weight:500}

  /* services heading 2-line treatment */
  .sec-head .left .sub-head{
    margin-top:14px; font-family:var(--sans);
    font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2);
  }

  /* testimonial avatars: photo placeholders with initials */
  .tst cite .avatar{
    width:40px; height:40px; font-size:14px;
    background-image:
      radial-gradient(circle at 30% 30%, rgba(217,172,94,.4), transparent 60%),
      linear-gradient(135deg, var(--dark-3), #2a2218);
    background-color:var(--dark-2);
  }
  .tst cite .avatar.av-m{background-image: radial-gradient(circle at 30% 30%, rgba(217,172,94,.45), transparent 55%), linear-gradient(140deg, #3a2a18, #1a130b)}
  .tst cite .avatar.av-k{background-image: radial-gradient(circle at 35% 25%, rgba(200,160,120,.4), transparent 60%), linear-gradient(140deg, #2e2218, #14100b)}
  .tst cite .avatar.av-d{background-image: radial-gradient(circle at 30% 30%, rgba(180,140,90,.4), transparent 60%), linear-gradient(140deg, #261b10, #100c08)}
  .tst cite .who{display:flex; flex-direction:column; gap:3px}
  .tst cite .who b{color:var(--paper); font-weight:500; letter-spacing:.14em}
  .tst cite .who span{color:var(--mute); font-size:9px; letter-spacing:.16em}

  /* ===================== HERO ===================== */
  .hero{
    position:relative; min-height:100vh; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:118px 56px 84px;
  }
  .hero .hero-top{flex:0 0 auto}
  .hero .hero-main{flex:0 0 auto}
  /* slow light sweep across hero */
  .hero .sweep{
    position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; mix-blend-mode:screen;
  }
  .hero .sweep::before{
    content:''; position:absolute; top:-20%; bottom:-20%; width:30%; left:-30%;
    background: linear-gradient(100deg,
      transparent 0%,
      rgba(244,236,221,0) 30%,
      rgba(217,178,96,.06) 50%,
      rgba(244,236,221,0) 70%,
      transparent 100%);
    transform: skewX(-12deg);
    animation: sweep 22s ease-in-out infinite;
  }
  @keyframes sweep{
    0%, 100% { left:-30%; opacity:0 }
    20%      { opacity:1 }
    60%      { opacity:1 }
    80%      { left:130%; opacity:0 }
  }
  @media (prefers-reduced-motion: reduce){ .hero .sweep::before{ animation:none; opacity:0 } }

  .hero .bg{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(120% 80% at 80% 20%, rgba(188,148,70,.22), transparent 55%),
      radial-gradient(100% 70% at 10% 100%, rgba(60,45,30,.6), transparent 60%),
      linear-gradient(180deg, #0b0907 0%, #14100c 100%);
  }
  /* echtes Studio-Foto: Fallback + poster hinter dem Hero-Video */
  .hero .photo{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(90% 72% at 72% 26%, rgba(217,172,94,.20), transparent 60%),
      url("pic/Hero-section/hero-studio.jpg") center/cover no-repeat;
    filter:contrast(1.08) brightness(1.06) saturate(1.07);
  }
  /* echte Hero-Video-Ebene — liegt über dem Foto, unter Film/Sweep/Overlay/Grain */
  .hero .hero-video{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    filter:contrast(1.08) brightness(1.06) saturate(1.07);
    pointer-events:none;
  }
  /* reduced-motion: kein Video-Loop → statisches Studio-Foto bleibt sichtbar */
  @media (prefers-reduced-motion: reduce){ .hero .hero-video{ display:none } }
  /* SVG film-strip placeholder "video" texture */
  .hero .film{
    position:absolute; inset:0; z-index:1; opacity:.18;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(244,236,221,.02) 0 1px, transparent 1px 6px
      ),
      repeating-linear-gradient(
        0deg,
        rgba(244,236,221,.015) 0 1px, transparent 1px 8px
      );
    mix-blend-mode:screen;
  }
  .hero .stage-svg{
    position:absolute; inset:0; z-index:1; opacity:1; pointer-events:none;
    display:none; /* synthetische Bühne aus, solange echtes Foto im Hintergrund */
  }
  .hero .overlay{
    position:absolute; inset:0; z-index:2;
    background:
      linear-gradient(180deg, rgba(11,9,7,.42) 0%, rgba(11,9,7,.12) 42%, rgba(11,9,7,.7) 100%),
      linear-gradient(90deg, rgba(11,9,7,.62) 0%, rgba(11,9,7,.1) 52%, rgba(11,9,7,0) 70%);
  }
  .hero .grain{
    position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.24; mix-blend-mode:overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.7  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  .hero .container{position:relative; z-index:4; max-width:1360px; margin:0 auto; padding:0 56px; width:100%}
  .hero h1{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size: clamp(44px, 8.5vw, 116px);
    line-height:.96; letter-spacing:-.07em;
    max-width: 13ch;
  }
  .hero h1 .gold{color:var(--gold)}
  .hero h1 .solid{font-style:normal; font-weight:500}
  .hero p.lead{
    margin-top:34px; max-width:52ch; color:var(--paper-d);
    font-size:clamp(16px, 1.25vw, 19px); line-height:1.55;
  }
  .hero .cta-row{display:flex; gap:14px; margin-top:42px; flex-wrap:wrap}
  .hero .fineprint{
    margin-top:34px; font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
    display:flex; gap:28px; flex-wrap:wrap;
  }
  .hero .fineprint span{display:inline-flex; gap:8px; align-items:center}
  .hero .fineprint span::before{content:'◆'; color:var(--gold); font-size:8px}

  .hero .meta-row{
    position:absolute; bottom:48px; left:0; right:0; z-index:4;
    padding:0 56px; display:flex; justify-content:space-between; align-items:end; gap:40px;
    font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
  }
  .hero .meta-row .scroll{display:inline-flex; align-items:center; gap:12px}
  .hero .meta-row .scroll::after{content:''; width:50px; height:1px; background:linear-gradient(90deg, var(--mute), transparent)}
  .hero .meta-row .side{text-align:right; line-height:1.6}
  .hero .meta-row .side b{color:var(--gold); font-weight:500}
  .hero .marque-line{
    position:absolute; bottom:120px; left:-20px; z-index:4;
    display:flex; gap:28px; font-family:var(--sans); font-style:normal; font-weight:400;
    font-size:13px; color:var(--mute-2); letter-spacing:.04em; white-space:nowrap;
    animation: drift 40s linear infinite;
    opacity:.6;
  }
  .hero .marque-line b{color:var(--gold); font-weight:400}
  @keyframes drift{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ===================== SECTION COMMON ===================== */
  section{position:relative; padding:120px 0; border-top:1px solid var(--line)}
  section.tight{padding:80px 0}
  section h2{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:clamp(36px, 4.5vw, 70px); line-height:.98; letter-spacing:-.055em;
  }
  section h2 .gold{color:var(--gold)}
  section h2 .solid{font-style:normal; font-weight:500}
  .sec-head{
    display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:56px;
  }
  .sec-head .left{max-width:680px}
  .sec-head .left .eyebrow{margin-bottom:20px}
  .sec-head .link{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:10px; padding-bottom:4px; border-bottom:1px solid var(--gold)}

  /* ===================== PROMISE ===================== */
  .promise{display:grid; grid-template-columns: .75fr 1.25fr; gap:80px}
  .promise h2{max-width:10ch}
  .promise p{color:var(--paper-d); font-size:17px; line-height:1.6; max-width:58ch}
  .promise p + p{margin-top:16px}
  .stats{
    margin-top:60px; padding-top:40px; border-top:1px solid var(--line);
    display:grid; grid-template-columns: repeat(4, 1fr); gap:32px;
  }
  .stat{border-left:1px solid var(--line-2); padding:4px 0 4px 20px}
  .stat big{
    font-family:'Sonora','Fraunces',serif; letter-spacing:-.045em; font-weight:400; font-size:54px;
    color:var(--gold); line-height:.95; letter-spacing:0; display:block;
  }
  .stat span{
    display:block; margin-top:14px;
    font-family:var(--sans); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--mute-2);
  }

  /* ===================== SERVICES ===================== */
  .svcs{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    border-top:1px solid var(--line); border-left:1px solid var(--line);
  }
  .svcs::-webkit-scrollbar{display:none}
  .svc{
    flex:0 0 25%; scroll-snap-align:start;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:36px 32px 32px; position:relative;
    min-height:440px; display:flex; flex-direction:column; gap:22px;
    transition: background .3s ease;
  }
  .svc:hover{background:var(--dark-2)}
  /* services carousel controls */
  .sec-head .actions{display:flex; align-items:center; gap:26px}
  .svc-nav{display:flex; gap:10px}
  .svc-arrow{
    width:46px; height:46px; flex:none; border-radius:50%;
    border:1px solid var(--line-2); background:transparent; color:var(--paper);
    font-family:var(--sans); font-size:15px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .svc-arrow:hover{background:var(--paper); color:var(--dark); border-color:var(--paper)}
  .svc-arrow[disabled]{opacity:.28; cursor:default}
  .svc-arrow[disabled]:hover{background:transparent; color:var(--paper); border-color:var(--line-2)}
  .svc .media{
    aspect-ratio: 3/4; position:relative; overflow:hidden;
    background:var(--dark-3);
  }
  .svc .media svg, .svc .media img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .8s ease}
  .svc:hover .media svg, .svc:hover .media img{transform:scale(1.04)}
  .svc .media::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(11,9,7,.0) 58%, rgba(11,9,7,.5) 100%);
    pointer-events:none;
  }
  .svc .num{
    position:absolute; top:16px; right:16px; z-index:2;
    font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:10px; letter-spacing:.2em;
    color:var(--paper); background:rgba(11,9,7,.6); padding:4px 8px; border:1px solid var(--line-2);
  }
  .svc h3{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:26px; line-height:1; margin:0; letter-spacing:-.025em;
  }
  .svc p{color:var(--mute-2); font-size:14px; margin:0; max-width:30ch}
  .svc .more{
    margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  }
  .svc .more .arr{transition:transform .25s ease}
  .svc:hover .more .arr{transform:translateX(4px)}

  /* ===================== STUDIO PARALLAX ===================== */
  .studio{
    position:relative; display:grid; grid-template-columns: 1fr 1fr;
    min-height:720px; padding:0; overflow:hidden;
  }
  .studio .img{position:relative; overflow:hidden; min-height:560px; background:var(--dark-3)}
  .studio .img .studio-scene{
    position:absolute; inset:0; width:100%; height:100%;
    transition:opacity 1s ease;
  }
  .studio .img .studio-scene svg{width:100%; height:100%; display:block}
  .studio .img::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,9,7,.0) 50%, rgba(11,9,7,.55) 100%);
    pointer-events:none; z-index:2;
  }
  .studio .img-badge{
    position:absolute; left:32px; bottom:32px; z-index:3;
    font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper);
    background:rgba(11,9,7,.6); padding:8px 12px; border:1px solid var(--line-2); backdrop-filter:blur(8px);
  }
  .studio .txt{
    padding:100px 72px; display:flex; flex-direction:column; justify-content:center; gap:28px;
    background:var(--dark);
  }
  .studio h2{max-width:12ch}
  .studio p{color:var(--paper-d); max-width:50ch; font-size:17px}
  .studio .dots{display:flex; gap:10px; align-items:center; margin-top:10px}
  .studio .dots .d{width:34px; height:2px; background:var(--line-2); transition:background .2s; cursor:pointer}
  .studio .dots .d.on{background:var(--gold)}
  .studio .dots .cnt{margin-left:14px; font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.14em; color:var(--mute-2)}
  .studio .btns{display:flex; gap:12px; margin-top:14px}

  /* ===================== LANGUAGE BAND ===================== */
  .lang-band{padding:96px 0; border-top:1px solid var(--line); position:relative; overflow:hidden}
  .lang-grid{display:grid; grid-template-columns: 1fr 1.2fr; gap:72px; align-items:center}
  .lang-grid h2{max-width:12ch}
  .lang-grid p{color:var(--paper-d); font-size:17px; max-width:44ch; margin-top:24px}
  .langs{
    display:flex; flex-direction:column; gap:10px;
    font-family:var(--sans); font-weight:300;
  }
  .langs .lang-line{display:flex; align-items:center; gap:18px}
  .langs span.main{
    color:var(--paper); font-style:normal; font-weight:300; letter-spacing:-.015em;
    font-size:clamp(30px, 3.4vw, 48px); line-height:1.05; transition:color .3s ease;
  }
  .langs span.code{
    font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.2em;
    text-transform:uppercase; color:var(--gold); border:1px solid var(--line-2);
    border-radius:2px; padding:5px 9px; line-height:1;
  }
  .langs .lang-line:hover span.main{color:var(--gold)}

  /* ===================== TESTIMONIALS ===================== */
  /* let the heading run full width so "Was Schüler:innen sagen." stays on one line (wraps only on mobile) */
  #stimmen .sec-head .left{max-width:none}
  .tests{
    display:grid; grid-template-columns: repeat(3, 1fr);
    border-top:1px solid var(--line); border-left:1px solid var(--line);
  }
  .tst{
    padding:38px 34px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:space-between; gap:26px;
    position:relative; min-height:264px;
  }
  .tst .quote{
    position:absolute; top:24px; right:28px;
    font-family:'Fraunces',serif; font-weight:300; font-size:58px; color:var(--gold-d); line-height:1; opacity:.3;
  }
  .tst blockquote{
    font-family:'Fraunces',serif; font-weight:400; font-style:italic;
    font-size:20px; line-height:1.45; color:var(--paper); max-width:34ch;
  }
  /* reserve the top-right corner so the first line never runs under the quote mark */
  .tst blockquote::before{content:''; float:right; width:40px; height:26px}
  .tst cite{
    font-style:normal;
    font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
    display:flex; align-items:center; gap:13px;
    border-top:1px solid var(--line); padding-top:20px;
  }
  .tst cite .avatar{
    border-radius:50%; border:1px solid var(--line-2);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--sans); font-style:normal; color:var(--paper); font-weight:600;
  }

  /* ===================== PROBE ===================== */
  .probe{
    padding:140px 0; text-align:center; border-top:1px solid var(--line);
    background:
      radial-gradient(60% 50% at 50% 0%, rgba(188,148,70,.15), transparent 70%),
      radial-gradient(40% 30% at 50% 100%, rgba(188,148,70,.1), transparent 70%);
    position:relative;
  }
  .probe::before{content:''; position:absolute; top:40px; left:50%; transform:translateX(-50%); width:50px; height:1px; background:var(--gold)}
  .probe .eyebrow{margin-bottom:32px; justify-content:center}
  .probe h2{
    font-size:clamp(54px, 7.5vw, 120px); max-width:18ch; margin:0 auto 28px;
  }
  .probe p{color:var(--paper-d); max-width:56ch; margin:0 auto 40px; font-size:17px}
  .probe .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
  .probe .fineprint{
    margin-top:44px; font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
    display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
  }
  .probe .fineprint span{display:inline-flex; gap:8px; align-items:center}
  .probe .fineprint span::before{content:'◆'; color:var(--gold); font-size:8px}

  /* ===================== CONTACT ===================== */
  .contact{padding-block:120px; display:grid; grid-template-columns: 1fr 1fr; gap:80px}
  .contact h2{margin-bottom:24px; max-width:14ch}
  .contact p{color:var(--paper-d); max-width:46ch; font-size:17px; margin-bottom:28px}
  .contact .info{
    border-top:1px solid var(--line); padding-top:24px; display:grid; gap:16px;
    font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--paper-d); line-height:1.6;
  }
  .contact .info .row{display:grid; grid-template-columns: 100px 1fr; gap:20px; padding-bottom:14px; border-bottom:1px solid var(--line)}
  .contact .info .row:last-child{border-bottom:0; padding-bottom:0}
  .contact .info .row .lbl{color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:10px}
  .form{display:flex; flex-direction:column; gap:0}
  .form .field{
    border:0; border-bottom:1px solid var(--line); padding:22px 0 18px;
    display:flex; flex-direction:column; gap:10px;
    transition:border-color .25s ease;
  }
  .form .field label{
    font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
  }
  .form .field input, .form .field textarea{
    background:transparent; border:0; outline:0; color:var(--paper);
    font-family:var(--sans); font-style:normal; font-weight:400; font-size:20px;
    padding:4px 0; resize:none;
  }
  .form .field input::placeholder, .form .field textarea::placeholder{color:var(--mute)}
  .form .field textarea{min-height:80px; line-height:1.4}
  .form .submit{display:flex; justify-content:flex-end; margin-top:24px}

  /* ===================== FOOTER ===================== */
  footer{padding:80px 0 40px; border-top:1px solid var(--line); background:var(--dark)}
  .foot-top{display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:56px; margin-bottom:64px}
  /* Footer logo lockup (per Design System site.css). Same wordmark+sub stack as
     the header, just bigger. Both lines in Fraunces — no Plex Mono caps here. */
  .foot-logo .big{
    display:flex; flex-direction:column; gap:0; line-height:1; margin-bottom:18px;
  }
  .foot-logo .big .mark{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:52px; letter-spacing:-.025em; line-height:1;
    color:var(--paper);
  }
  .foot-logo .big .sub{
    font-family:'Sonora','Fraunces',serif; font-weight:400; font-style:normal;
    font-size:24px; letter-spacing:-.005em; line-height:1;
    color:var(--paper);
    margin-top:2px;
  }
  .foot-logo p{color:var(--mute-2); max-width:32ch; font-size:14px; line-height:1.6}
  .foot-col h5{
    font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
  }
  .foot-col ul{list-style:none; display:flex; flex-direction:column; gap:10px; font-family:var(--sans); font-size:12px; color:var(--paper-d); letter-spacing:.04em}
  .foot-col ul a:hover{color:var(--gold)}
  .foot-bottom{
    border-top:1px solid var(--line); padding-top:28px;
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); gap:20px; flex-wrap:wrap;
  }
  .foot-social{display:flex; gap:18px}
  .foot-social a:hover{color:var(--gold)}
  .foot-legal{display:flex; gap:18px}

  /* ===================== WHATSAPP FAB ===================== */
  .wa{
    position:fixed; right:28px; bottom:28px; z-index:150;
    width:60px; height:60px; border-radius:50%;
    background:var(--gold); color:#241a08; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(188,148,70,.4);
    animation: pulse 2.4s ease-in-out infinite;
    transition: transform .2s ease;
  }
  .wa:hover{transform:scale(1.06)}
  .wa svg{width:28px; height:28px}
  @keyframes pulse{
    0%,100%{box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(188,148,70,.35)}
    50%{box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 14px rgba(188,148,70,0)}
  }

  /* subtle entry */
  .fade-up{opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease}
  .fade-up.in{opacity:1; transform:none}

  /* ===================== FOCUS / A11Y ===================== */
  :focus{outline:none}
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px;
    border-radius:1px;
  }
  .form .field:focus-within{ border-bottom-color:var(--gold) }
  .form .field:focus-within label{ color:var(--gold) }
  .form .field input:not(:placeholder-shown):invalid,
  .form .field textarea:not(:placeholder-shown):invalid{ color:#e8a685 }
  .form .field input:not(:placeholder-shown):invalid + .err,
  .form .field textarea:not(:placeholder-shown):invalid ~ .err{ display:block }
  .form .field .err{
    display:none; font-family:var(--sans); font-size:9px; letter-spacing:.18em;
    text-transform:uppercase; color:#e8a685; margin-top:6px;
  }
  .btn:active{ transform:translateY(1px) }
  .btn[disabled]{ opacity:.45; pointer-events:none }

  /* ===================== BURGER (mobile) ===================== */
  .burger{ display:none; background:transparent; border:0; cursor:pointer; padding:10px; z-index:110 }
  .burger span{
    display:block; width:24px; height:1.5px; background:var(--paper); margin:5px 0;
    transition: transform .25s ease, opacity .25s ease, background .2s ease;
  }
  .burger.on span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); background:var(--gold) }
  .burger.on span:nth-child(2){ opacity:0 }
  .burger.on span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); background:var(--gold) }

  /* current page indicator in nav */
  nav.site a.on{ color:var(--gold); position:relative }
  nav.site a.on::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px;
    height:1px; background:var(--gold);
  }

  /* ===================== COOKIE BANNER ===================== */
  .sonora-cookie{
    position:fixed; left:18px; right:18px; bottom:18px; z-index:160;
    background:rgba(11,9,7,.96); border:1px solid var(--line-2);
    backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0,0,0,.6);
    transform: translateY(20px); opacity:0;
    transition: transform .35s ease, opacity .35s ease;
    max-width: 1200px; margin: 0 auto;
  }
  .sonora-cookie.in{ transform:translateY(0); opacity:1 }
  .sonora-cookie .ck-inner{ display:grid; grid-template-columns:1fr auto; gap:32px; padding:24px 28px; align-items:center }
  .sonora-cookie .ck-eye{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:8px }
  .sonora-cookie h4{ font-family:'Sonora','Fraunces',serif; letter-spacing:-.025em; font-style:normal; font-weight:400; font-size:22px; color:var(--paper); line-height:1.2; margin-bottom:6px }
  .sonora-cookie p{ font-size:13px; color:var(--paper-d); line-height:1.55; max-width:72ch }
  .sonora-cookie p a{ color:var(--gold); border-bottom:1px solid rgba(188,148,70,.4) }
  .sonora-cookie .ck-btns{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
  .sonora-cookie .ck-btn{
    font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    padding:13px 22px; cursor:pointer; background:transparent;
    border:1px solid var(--line-2); color:var(--paper); transition:all .2s ease;
  }
  .sonora-cookie .ck-btn:hover{ border-color:var(--paper) }
  .sonora-cookie .ck-btn.ck-all{ background:var(--gold); color:#241a08; border-color:var(--gold) }
  .sonora-cookie .ck-btn.ck-all:hover{ background:var(--paper); border-color:var(--paper); color:#0b0907 }
  @media (max-width:760px){
    .svc-nav{display:none}
    .sonora-cookie .ck-inner{ grid-template-columns:1fr; gap:18px; padding:20px 22px }
    .sonora-cookie .ck-btns{ width:100%; justify-content:flex-end }
    .sonora-cookie .ck-btn{ padding:11px 16px; font-size:10px }
  }

  @media (max-width:960px){
    .container{padding:0 24px}
    header.site{padding:14px 24px}
    header.site.stuck{padding:12px 24px}
    .burger{display:block}
    nav.site{
      position:fixed; top:0; left:0; right:0; bottom:0;
      background:rgba(11,9,7,.97); backdrop-filter:blur(14px);
      flex-direction:column; align-items:flex-start; justify-content:center; gap:18px;
      padding:80px 32px 32px; z-index:90;
      opacity:0; pointer-events:none; transition:opacity .25s ease;
    }
    header.site.nav-open nav.site{opacity:1; pointer-events:auto}
    nav.site a{font-size:18px; letter-spacing:.04em; font-family:var(--sans); font-style:normal; font-weight:500; text-transform:none; color:var(--paper)}
    nav.site a.on{color:var(--gold)}
    nav.site a.on::after{display:none}
    nav.site .cta{padding:14px 22px; font-size:11px; font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase; font-style:normal; align-self:flex-start; margin-top:14px}
    .lang-pick{align-self:flex-start; margin-top:18px}
    .logo .mark{font-size:26px}
    .logo .sub{font-size:9.34px; margin-top:1.2px}
    .promise{grid-template-columns:1fr; gap:40px}
    .stats{grid-template-columns:repeat(2,1fr); gap:20px}
    .stat big{font-size:48px}
    .svc{flex-basis:clamp(240px,46%,360px); padding:24px 20px; min-height:380px}
    .studio{grid-template-columns:1fr}
    .studio .txt{padding:60px 28px}
    .lang-grid{grid-template-columns:1fr; gap:40px}
    .tests{grid-template-columns:1fr}
    .tst{padding:32px 24px; min-height:260px}
    .contact{grid-template-columns:1fr; gap:40px; padding-block:80px}
    .probe{padding:96px 0}
    .lang-band{padding:72px 0}
    .foot-top{grid-template-columns:1fr 1fr; gap:32px}
    .hero{padding:118px 24px 72px}
    .hero .container{padding:0}
    .hero .meta-row{padding:0 24px; flex-direction:column; align-items:start; gap:18px; bottom:24px}
    .hero .marque-line{display:none}
    section{padding:80px 0}
    .sec-head{flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:36px}
    .wa{right:18px; bottom:18px; width:52px; height:52px}
    .wa svg{width:24px; height:24px}
  }
  @media (max-width:560px){
    .svc{flex-basis:82%}
    .stats{grid-template-columns:1fr 1fr; gap:16px}
    .foot-top{grid-template-columns:1fr; gap:28px}
    .foot-bottom{flex-direction:column; align-items:flex-start; gap:14px}
    .foot-legal{flex-wrap:wrap}
  }

  /* ===================== INNER-PAGE HELPERS (not on Startseite) ===================== */
  /* striped fill for empty media blocks */
  .stripe-fill{
    background:
      repeating-linear-gradient(135deg, rgba(244,236,221,.05) 0 2px, transparent 2px 14px),
      linear-gradient(135deg, #1f1b16, #13110e);
  }
  /* photo placeholder (used until real photos land) */
  .photo-ph{
    position:absolute; inset:0; width:100%; height:100%;
    background:
      radial-gradient(60% 55% at 50% 35%, rgba(217,172,94,.32), transparent 65%),
      linear-gradient(140deg, #221912 0%, #11100d 60%, #0a0806 100%);
    overflow:hidden;
  }
  .photo-ph::before{
    content:''; position:absolute; inset:0;
    background:
      repeating-linear-gradient(45deg, rgba(244,236,221,.025) 0 2px, transparent 2px 18px);
    mix-blend-mode:overlay;
  }
  .photo-ph::after{
    content:''; position:absolute; left:50%; top:50%;
    width:54px; height:54px; transform:translate(-50%, -50%);
    border:1px solid rgba(217,172,94,.35); border-radius:50%;
    box-shadow: 0 0 24px rgba(217,172,94,.18) inset;
  }
  .photo-ph.tile{ position:relative }