/* ==========================================================================
   EXPO OUTLINE — Landingpage
   --------------------------------------------------------------------------
     01  Fonts
     02  Design-Tokens (:root)        <- einzige Quelle für Farben/Größen
     03  Reset & Base
     04  Layout-Primitive            (.section / .rand / Glow / Reveal)
     05  Glas & Haarlinien           (.glass / .hairline — Systembausteine)
     06  Typografie                  (.eyebrow, .label-row, .h2, .lead)
     07  Buttons
     08  Komponenten                 (Nav, Marquee, Accordion, Karte)
     09  Sektionen 1–11
     10  Responsive                  (Tablet ≤1080 / Mobil ≤720 / klein ≤460)

   Jeder Selektor kommt genau einmal vor. Werte nur über Tokens.
   Unterseiten (archive/*.html) laden zusätzlich styles-subpages.css.
   ========================================================================== */

/* ==========================================================================
   01 · FONTS — Red Hat Display, selbst gehostet (variabel 300–900)
   ========================================================================== */
@font-face{
  font-family:'Red Hat Display';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('assets/fonts/rhd-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Red Hat Display';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('assets/fonts/rhd-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020;
}

/* ==========================================================================
   02 · DESIGN-TOKENS
   ========================================================================== */
:root{

  /* --- 02.1 Markenpalette ----------------------------------------------
     Verbindlich. Entspricht den Figma-Variablen:
       green #1 → --deep · #2 green → --forest · #3 green → --mint
     Bewusste Abweichung: Figma "#4 bg" ist #f4f3eb, wir nutzen #F8FFF9. */
  --cream:#F8FFF9;      /* helle Bänder, Text auf Glas                */
  --mint:#5FE3A1;       /* helle Grün-Akzente auf dunklem Grund       */
  --forest:#16A56A;     /* Primärgrün: Buttons, Icons, Punkte         */
  --deep:#004B29;       /* dunkles Grün: Text und Linien auf Hell     */
  --darkest:#0B1410;    /* Seitenhintergrund                          */

  /* --- 02.2 Neutrale ----------------------------------------------------
     Keine Palette-Entsprechung, deshalb eigene Tokens.
     --shade ist Figmas Variable "dark" (#040805) und die Basis des Glases. */
  --shade:#040805;
  --surface-dark:#141D17;
  --surface-dark-soft:#0E1712;
  /* Kartenfläche auf hellem Band: NICHT reinweiß. Reinweiß ist neutral und
     wirkt gegen das grünliche --cream kalt. Deshalb aus dem Cream abgeleitet,
     einen Hauch tiefer als das Band. */
  --surface-light:color-mix(in srgb, var(--cream) 97%, var(--deep));

  /* Weiß mit Alpha — Textstufen auf dunklem Grund.
     Kontrast bewusst höher als in V1: Fließtext .88 statt .72. */
  --on-dark:#FFFFFF;
  --on-dark-92:rgb(255 255 255 / .92);
  --on-dark-88:rgb(255 255 255 / .88);
  --on-dark-80:rgb(255 255 255 / .80);
  --on-dark-70:rgb(255 255 255 / .70);
  --on-dark-45:rgb(255 255 255 / .45);
  --on-dark-30:rgb(255 255 255 / .30);
  --on-dark-14:rgb(255 255 255 / .14);

  /* Dunkelgrün mit Alpha — Textstufen auf hellem Band.
     Ersetzt die alten mittelgrauen Töne (#5E6960) vollständig. */
  --on-light-82:color-mix(in srgb, var(--deep) 82%, transparent);
  --on-light-70:color-mix(in srgb, var(--deep) 70%, transparent);

  /* --- 02.3 Grün mit Alpha (Glow, Marker, Hover) ------------------------ */
  --forest-50:color-mix(in srgb, var(--forest) 50%, transparent);
  --forest-24:color-mix(in srgb, var(--forest) 24%, transparent);
  --forest-22:color-mix(in srgb, var(--forest) 22%, transparent);
  --forest-16:color-mix(in srgb, var(--forest) 16%, transparent);
  --forest-14:color-mix(in srgb, var(--forest) 14%, transparent);
  --forest-12:color-mix(in srgb, var(--forest) 12%, transparent);
  --forest-hover:color-mix(in srgb, var(--forest) 84%, #000);
  /* Leichter Verlauf für Buttons: oben links heller, unten rechts satt. */
  --grad-green:linear-gradient(135deg,
    color-mix(in srgb, var(--mint) 52%, var(--forest)) 0%,
    var(--forest) 62%,
    color-mix(in srgb, var(--forest) 88%, #000) 100%);
  /* Leichtere Variante für Icon-Chips — bewusst anders als der Button. */
  --grad-green-soft:linear-gradient(160deg,
    color-mix(in srgb, var(--mint) 74%, var(--forest)) 0%,
    var(--forest) 88%);
  --grad-green-hover:linear-gradient(135deg,
    color-mix(in srgb, var(--mint) 68%, var(--forest)) 0%,
    var(--forest) 58%,
    color-mix(in srgb, var(--forest) 94%, #000) 100%);
  --mint-28:color-mix(in srgb, var(--mint) 28%, transparent);

  /* --- 02.4 GLAS ---------------------------------------------------------
     Der Tint macht die Lesbarkeit, nicht der Blur. --glass-bg deshalb
     IMMER mitsetzen, nie nur backdrop-filter. Text auf Glas: --cream.
     Vorbild: das Panel in den Leistungs-Karten, Radius aus der Figma-Pille. */
  --glass-bg:color-mix(in srgb, var(--shade) 60%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--shade) 74%, transparent);
  --glass-blur:14px;
  --glass-border:rgb(255 255 255 / .12);   /* Figma "Kasten" = #ffffff26 */
  --glass-frost:rgb(255 255 255 / .01);  /* Frost-Variante: Weiss 1% + Blur */
  --glass-nav-light:color-mix(in srgb, var(--cream) 82%, transparent);  /* helle Nav über dem Hero */
  --glass-radius:var(--radius-base);
  --glass-radius-lg:calc(var(--radius-base) * 1.6);
  /* Glas auf hellem Band — 1:1 aus der Figma-Feature-Karte */
  --glass-light-bg:color-mix(in srgb, var(--deep) 5%, transparent);
  --glass-light-border:color-mix(in srgb, var(--deep) 54%, transparent);
  --glass-light-blur:6px;

  /* --- 02.5 HAARLINIEN --------------------------------------------------
     Immer 1px, immer niedrige Deckkraft, nie als kräftige Border.
     NIE auf einer hell/dunkel-Sektionskante (siehe 02.8). */
  --hairline:rgb(255 255 255 / .10);
  --hairline-mint:color-mix(in srgb, var(--mint) 25%, transparent);
  --hairline-light:color-mix(in srgb, var(--deep) 14%, transparent);

  /* --- 02.6 Bild-Abdunklungen ------------------------------------------- */
  --scrim:#0A140F;
  --scrim-deep:#060B08;

  /* --- 02.7 TYPE-SCALE --------------------------------------------------
     Verbindlich — Figma zieht nach. Größen in px, Zeilenhöhen als
     Verhältnis (entspricht dem 4px-Raster bei maximaler Schriftgröße).
     Display-Rollen skalieren per clamp() mit dem Viewport.

       Rolle        max   lh (4px-Raster)  weight  letter-spacing
       display      44    48  = 1.09       800     -.02em
       h2           34    40  = 1.18       800     -.02em
       h3           26    32  = 1.23       700     -.01em
       h4           20    28  = 1.40       700     -.005em
       h5           18    24  = 1.33       700      0
       statement    30    40  = 1.33       600     -.01em
       lead         19    30  = 1.58       500      0
       body         17    26  = 1.53       500      0
       meta         15    22  = 1.47       500      0
       label        12    16  = 1.33       700      .05em  (Figma: 0.6px)
       button       16    20  = 1.25       700      0                    */
  --fs-display:clamp(32px, 1.46vw + 26.4px, 44px);
  --fs-h2:clamp(26px, .98vw + 22.3px, 34px);
  --fs-h3:clamp(22px, .49vw + 20.2px, 26px);
  --fs-h4:20px;
  --fs-h5:18px;
  --fs-statement:clamp(22px, .98vw + 18.3px, 30px);
  --fs-lead:19px;
  --fs-body:17px;
  --fs-meta:15px;
  --fs-label:12px;
  --fs-button:16px;

  --lh-display:1.09;
  --lh-h2:1.18;
  --lh-h3:1.23;
  --lh-h4:1.4;
  --lh-h5:1.33;
  --lh-statement:1.33;
  --lh-lead:1.58;
  --lh-body:1.53;
  --lh-meta:1.47;
  --lh-label:1.33;
  --lh-button:1.25;

  --fw-body:500;        /* Fließtext eine Stufe kräftiger als vorher (400) */
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;
  --fw-black:800;

  --ls-display:-.02em;
  --ls-h3:-.01em;
  --ls-h4:-.005em;
  --ls-label:.05em;

  /* --- 02.8 Spacing-Scale — durchgehend 4px-Raster --------------------- */
  --sp-4:4px;    --sp-8:8px;    --sp-10:10px;  --sp-12:12px;  --sp-16:16px;  --sp-20:20px;
  --sp-24:24px;  --sp-28:28px;  --sp-32:32px;  --sp-36:36px;  --sp-40:40px;
  --sp-44:44px;  --sp-48:48px;  --sp-52:52px;  --sp-56:56px;  --sp-60:60px;
  --sp-64:64px;  --sp-72:72px;  --sp-80:80px;  --sp-88:88px;  --sp-96:96px;

  /* Sektions-Rhythmus (Evermind: 80 / 120 / 160) */
  --sec-pad:clamp(56px, 6vw, 104px);
  --sec-pad-sm:clamp(40px, 4.4vw, 76px);

  /* KANTE hell/dunkel.
     Der Übergang ist eine harte, gerade Kante über die volle Breite —
     kein Gradient, keine Überblendung, keine Linie auf der Kante.
     Getragen wird er allein vom Leerraum: die Sektion vor der Kante läuft
     unten in --sec-edge aus, die Sektion danach beginnt oben mit demselben
     Wert, bevor Content einsetzt. Deutlich mehr als --sec-pad. */
  --sec-edge:clamp(88px, 10vw, 176px);

  /* --- 02.9 Layout ------------------------------------------------------
     Sektionen sind full-bleed. Die Breitenbegrenzung macht ausschließlich
     der .rand: Inhalt max. 1240px, dazu links/rechts --gutter Luft.
     Kein Body-Padding, kein Rahmen. */
  --rand-max:1240px;
  --rand-max-nav:1337px;   /* Nav-Pille 1:1 aus Figma */
  --gutter:clamp(20px, 5vw, 100px);
  /* Hero füllt den Viewport (Evermind-Prinzip), mindestens aber 760px —
     auf einem MacBook ergibt das rund 900px. */
  --hero-h:max(100svh, 760px);
  --nav-h:59px;            /* Nav-Pille 1:1 aus Figma */
  --nav-h-compact:50px;    /* zusammengezogen beim Scrollen */
  --nav-max-compact:940px;
  --nav-top:16px;
  --footer-inset:44px;

  /* --- 02.10 Radien ------------------------------------------------------
     EINE Stellschraube für die ganze Seite: --radius-base. Alle anderen
     Radien leiten sich daraus ab. Umschalten über das Attribut
     data-radius am <html>: "0" | "5" | "10" | "15".
       0  = alles kantig, auch die Pillen-Buttons
       10 = aktueller Stand, entspricht der Nav-Pille aus Figma
     --r-full bleibt fest bei 50 %, damit Avatare rund bleiben. */
  --radius-base:10px;
  --r-6:calc(var(--radius-base) * .6);
  --r-10:var(--radius-base);
  --r-12:calc(var(--radius-base) * 1.2);
  --r-14:calc(var(--radius-base) * 1.4);
  --r-16:calc(var(--radius-base) * 1.6);
  --r-pill:calc(var(--radius-base) * 99);
  --r-full:50%;

  /* --- 02.11 Bewegung --------------------------------------------------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-expand:cubic-bezier(.22,.61,.36,1);
  --t-fast:.2s;
  --t-mid:.35s;
  --t-slow:.5s;
}

/* Radius-Stufen. Standard ist 10px; das Attribut am <html> überschreibt. */
html[data-radius="0"] {--radius-base:0px}
html[data-radius="5"] {--radius-base:5px}
html[data-radius="10"]{--radius-base:10px}
html[data-radius="15"]{--radius-base:15px}

/* ==========================================================================
   03 · RESET & BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Red Hat Display',system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-body);
  background:var(--darkest);
  color:var(--on-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit}
::selection{background:var(--forest);color:var(--on-dark)}
/* Sprungziele nicht unter die fixierte Nav schieben */
[id]{scroll-margin-top:calc(var(--nav-h) + var(--nav-top) + var(--sp-24))}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* ==========================================================================
   04 · LAYOUT-PRIMITIVE
   ========================================================================== */
.section{
  display:flex;flex-direction:row;
  align-items:flex-start;justify-content:center;
  width:100%;position:relative;
}
.rand{
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-start;
  width:100%;
  max-width:calc(var(--rand-max) + 2 * var(--gutter));
  padding-inline:var(--gutter);
  margin-inline:auto;
  position:relative;
}
/* Inhalt-Container: Block, damit inline-Elemente ihre Zeilenbox behalten.
   Flex/Grid nur dort, wo das Layout es braucht. */
.home-section-1-inhalt,.home-section-2-inhalt,.home-section-3-inhalt,
.home-section-4-inhalt,.home-section-5-inhalt,.home-section-6-inhalt,
.home-section-7-inhalt,.home-section-8-inhalt,.home-section-9-inhalt,
.home-section-12-inhalt{display:block;width:100%}
.home-section-2-inhalt,.home-section-4-inhalt,
.home-section-6-inhalt,.home-section-9-inhalt{text-align:center}

.glow{position:absolute;border-radius:var(--r-full);filter:blur(90px);pointer-events:none;z-index:0}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.08)}}

.reveal  {opacity:0;transform:translateY(34px)}
.reveal-l{opacity:0;transform:translateX(-40px)}
.reveal-r{opacity:0;transform:translateX(40px)}
.reveal-s{opacity:0;transform:scale(.94)}
.reveal,.reveal-l,.reveal-r{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-s{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in,.reveal-l.in,.reveal-r.in,.reveal-s.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   05 · GLAS & HAARLINIEN — Systembausteine
   --------------------------------------------------------------------------
   .glass        dunkles Glas auf Foto/dunklem Grund, Text --cream
   .glass--light helles Glas auf Cream-Band, Text --deep (Figma-Feature-Karte)
   .hairline     1px-Linie in drei Kontexten: hell / mint / auf Cream
   ========================================================================== */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(115%);
          backdrop-filter:blur(var(--glass-blur)) saturate(115%);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  color:var(--cream);
}
.glass--strong{background:var(--glass-bg-strong)}
.glass--lg{border-radius:var(--glass-radius-lg)}
.glass--pill{border-radius:var(--r-pill)}
.glass--frost{
  background:var(--glass-frost);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(115%);
          backdrop-filter:blur(var(--glass-blur)) saturate(115%);
  color:var(--cream);
}
.glass--light{
  background:var(--glass-light-bg);
  -webkit-backdrop-filter:blur(var(--glass-light-blur));
          backdrop-filter:blur(var(--glass-light-blur));
  border:1px solid var(--glass-light-border);
  color:var(--deep);
}

.hairline{display:block;width:100%;height:0;border:0;border-top:1px solid var(--hairline)}
.hairline--mint {border-top-color:var(--hairline-mint)}
.hairline--light{border-top-color:var(--hairline-light)}
/* senkrechter Spalten-Trenner */
.hairline-v{width:0;align-self:stretch;border:0;border-left:1px solid var(--hairline)}
.hairline-v--light{border-left-color:var(--hairline-light)}

/* ==========================================================================
   06 · TYPOGRAFIE
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-12);
  font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--deep);
}
/* Der Punkt pulsiert minimal — bewusst langsam und dezent, damit er
   Aufmerksamkeit lenkt ohne zu flackern. */
.eyebrow .dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--forest);
  flex:none;animation:dotPulse 3.6s var(--ease) infinite}
@keyframes dotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.62;transform:scale(.93)}
}
@media(prefers-reduced-motion:reduce){
  .eyebrow .dot{animation:none}
}
.eyebrow--mint  {color:var(--mint)}
.eyebrow--hero  {color:var(--on-dark)}
.eyebrow--light {color:var(--on-dark-92)}
.eyebrow--muted {color:var(--on-dark-80)}
.eyebrow--cta   {color:var(--mint)}
.eyebrow--cta .dot{background:var(--mint)}

/* Haarlinie unter dem Section-Label */
.label-row{display:block;width:100%;padding-bottom:var(--sp-20);
  border-bottom:1px solid var(--hairline);margin-bottom:var(--sp-32)}
.label-row--light{border-bottom-color:var(--hairline-light)}
.label-row--center{text-align:center}

.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);
  letter-spacing:var(--ls-display);font-weight:var(--fw-black)}
.h2--light{color:var(--on-dark)}
.h2--deep {color:var(--deep)}
.h2--mint {color:var(--mint)}

.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:var(--fw-medium)}
.lead--light{color:var(--on-dark-88)}
.lead--dark {color:var(--on-light-82)}

/* ==========================================================================
   07 · BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-12);
  font-family:inherit;font-size:var(--fs-button);line-height:var(--lh-button);
  font-weight:var(--fw-bold);text-transform:none;
  padding:var(--sp-16) var(--sp-28);border:none;border-radius:var(--radius-base);
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),
             box-shadow var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn-primary{background:var(--grad-green);color:var(--on-dark)}
.btn-primary:hover{background:var(--grad-green-hover);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--on-dark);border:1.5px solid var(--on-dark-45)}
.btn-outline:hover{background:var(--on-dark);color:var(--darkest);
  border-color:var(--on-dark);transform:translateY(-2px)}
.btn-ghost-green{background:transparent;color:var(--mint);
  border:1.5px solid var(--forest);padding:var(--sp-12) var(--sp-24);font-weight:var(--fw-semi)}
.btn-ghost-green:hover{background:var(--forest);color:var(--on-dark);transform:translateY(-2px)}
.btn-ghost-green--on-light{color:var(--deep)}
.btn-ghost-green--on-light:hover{background:var(--forest);color:var(--on-dark)}
.btn-nav{padding:var(--sp-12) var(--sp-20);font-size:var(--fs-meta)}
/* Zweitbutton auf Foto: Glas statt Outline — deutlich besser lesbar */
.btn-glass{background:var(--glass-bg-strong);color:var(--cream);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.btn-glass:hover{background:var(--shade);transform:translateY(-2px)}

/* ==========================================================================
   08 · KOMPONENTEN
   ========================================================================== */

/* ---- 08.1 Navigation — fixiert, schwebende Glas-Pille ------------------ */
.topbar{
  position:fixed;top:var(--nav-top);left:0;right:0;z-index:100;
  padding-inline:clamp(16px, 3.5vw, 51px);
  pointer-events:none;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:var(--rand-max-nav);min-height:var(--nav-h);
  margin-inline:auto;padding:0 var(--sp-8) 0 var(--sp-24);
  box-shadow:0 10px 40px -18px rgb(0 0 0 / .28);
  pointer-events:auto;
  transition:background var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid);
}
/* Über dem Hero hell (Evermind-Prinzip), ab dem ersten Scrollen dunkles Glas */
.nav{background:var(--glass-nav-light);border-color:rgb(255 255 255 / .55)}
.nav{position:relative}
.nav .logo{height:28px;width:auto}
.nav-links a{color:var(--deep)}
.nav-links a:hover,.nav-links a.current{color:var(--forest)}
.nav .btn-nav{background:var(--grad-green);color:var(--on-dark);
  border-radius:var(--radius-base);padding:var(--sp-12) var(--sp-24)}
.nav .btn-nav:hover{background:var(--grad-green-hover)}
.nav-burger{border-color:color-mix(in srgb, var(--deep) 22%, transparent);color:var(--deep)}

/* Beim Scrollen zieht die Pille zusammen und bleibt hell (Evermind-Prinzip).
   Kein Farbwechsel — nur Breite, Höhe und Abstände werden kompakter. */
.nav{transition:background var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid),
  max-width .3s var(--ease),min-height .3s var(--ease),padding .3s var(--ease)}
.topbar.is-scrolled .nav{max-width:var(--nav-max-compact);min-height:var(--nav-h-compact);
  padding-left:var(--sp-20);box-shadow:0 8px 30px -14px rgb(0 0 0 / .32)}
.topbar.is-scrolled .nav-links{gap:var(--sp-24)}
.topbar.is-scrolled .nav .logo{height:24px}
.topbar.is-scrolled .nav .btn-nav{padding:var(--sp-8) var(--sp-20)}

/* Hover (oder Tastaturfokus) fährt die zusammengezogene Pille wieder auf
   volle Größe aus. */
.nav .logo{transition:height .3s var(--ease)}
.nav-links{transition:gap .3s var(--ease)}
.nav .btn-nav{transition:padding .3s var(--ease),background var(--t-fast)}
.topbar.is-scrolled .nav:hover,
.topbar.is-scrolled .nav:focus-within{
  max-width:var(--rand-max-nav);min-height:var(--nav-h);padding-left:var(--sp-24);
  box-shadow:0 12px 44px -18px rgb(0 0 0 / .4)}
.topbar.is-scrolled .nav:hover .nav-links,
.topbar.is-scrolled .nav:focus-within .nav-links{gap:var(--sp-32)}
.topbar.is-scrolled .nav:hover .logo,
.topbar.is-scrolled .nav:focus-within .logo{height:28px}
.topbar.is-scrolled .nav:hover .btn-nav,
.topbar.is-scrolled .nav:focus-within .btn-nav{padding:var(--sp-12) var(--sp-24)}
.nav-links{display:flex;align-items:center;gap:var(--sp-32);
  font-size:var(--fs-meta);font-weight:var(--fw-medium)}
.nav-links li{position:relative}
.nav-links a{display:inline-flex;align-items:center;gap:var(--sp-4);transition:color .15s}
.nav-links svg{opacity:.7}

/* Burger — nur unter 1080px sichtbar (siehe Abschnitt 10) */
.nav-burger{
  display:none;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--glass-border);border-radius:var(--r-6);
  color:var(--cream);
}
.nav-burger span{display:block;width:18px;height:1.5px;background:currentColor;
  border-radius:2px;transition:transform var(--t-mid) var(--ease),opacity var(--t-fast)}
.nav-burger span+span{margin-top:4px}
.nav.is-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.is-open .nav-burger span:nth-child(2){opacity:0}
.nav.is-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Ausklapp-Panel im Mobilmenü */
.nav-panel{
  position:absolute;top:calc(100% + var(--sp-8));left:0;right:0;z-index:99;
  display:none;flex-direction:column;gap:var(--sp-4);padding:var(--sp-16);
}
.nav.is-open .nav-panel{display:flex}
.nav-panel a{display:block;padding:var(--sp-12) var(--sp-16);border-radius:var(--r-6);
  font-size:var(--fs-h5);font-weight:var(--fw-medium);color:var(--cream)}
.nav-panel a:hover{background:var(--forest-16);color:var(--mint)}
.nav-panel .btn{margin-top:var(--sp-8)}

/* ---- Dropdown im Menü --------------------------------------------------
   Bewusst schlicht: nur die Unterpunkte, keine Spalten, keine Beschreibungen.
   Bewegung minimal — 4px und 160ms. */
.nav-links .has-drop>a svg{transition:transform .16s var(--ease)}
.nav-links .has-drop.open>a{color:var(--forest)}
.nav-links .has-drop.open>a svg{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:-12px;margin-top:var(--sp-12);z-index:60;
  display:flex;flex-direction:column;gap:2px;min-width:212px;padding:var(--sp-8);
  background:color-mix(in srgb, var(--cream) 97%, transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgb(255 255 255 / .55);border-radius:var(--radius-base);
  box-shadow:0 18px 44px -22px rgb(0 0 0 / .28);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-drop.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{padding:var(--sp-10) var(--sp-12);border-radius:var(--r-6);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-medium);
  color:var(--deep);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.dropdown a:hover{background:color-mix(in srgb, var(--forest) 10%, transparent);
  color:var(--forest)}

/* Kopfbereich der Unterseiten (partials.js injiziert die Nav) */
.site-header{position:relative;z-index:50;padding-top:calc(var(--nav-h) + var(--sp-40))}

/* ---- 08.2 Logo-Marquee ------------------------------------------------- */
.marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(64px, 7.5vw, 128px);
  width:max-content;animation:marquee 28s linear infinite}
.marquee-track img{height:28px;width:auto;flex:none;opacity:.9}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- 08.3 Accordion (.eo-acc) ----------------------------------------
   Trennung ausschließlich über Haarlinien, kein Item-Abstand.
   Höhe animiert über grid-template-rows 0fr→1fr. */
.eo-acc{width:100%;margin-top:var(--sp-24)}
.eo-ac-item{border-top:1px solid var(--hairline-light)}
.eo-acc .eo-ac-item:last-child{border-bottom:1px solid var(--hairline-light)}
.eo-ac-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-28);
  width:100%;padding:var(--sp-24) 2px;background:none;border:0;cursor:pointer;text-align:left}
.eo-ac-title{font-size:var(--fs-h5);line-height:var(--lh-h5);
  font-weight:var(--fw-semi);color:var(--deep);transition:color .3s var(--ease)}
.eo-ac-item:hover .eo-ac-title,
.eo-ac-item.open .eo-ac-title{color:var(--forest)}
.eo-ac-toggle{display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;color:var(--on-light-70);
  transition:transform .45s cubic-bezier(.33,1,.68,1),color .3s var(--ease)}
.eo-ac-item:hover .eo-ac-toggle{color:var(--deep)}
.eo-ac-item.open .eo-ac-toggle{transform:rotate(180deg);color:var(--forest)}
.eo-ac-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--ease)}
.eo-ac-item.open .eo-ac-body{grid-template-rows:1fr}
.eo-ac-inner{overflow:hidden;min-height:0}
.eo-ac-text{margin:0;padding:0 var(--sp-44) var(--sp-28) 2px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--on-light-82);
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s ease .05s,transform .45s var(--ease) .05s}
.eo-ac-item.open .eo-ac-text{opacity:1;transform:none}
/* Variante mit Icons — Phase 2 der Arbeitsweise, ohne Trennlinien */
.eo-acc.with-icons .eo-ac-item{border:0}
.eo-acc.with-icons .eo-ac-head{gap:var(--sp-16);padding:var(--sp-16) 2px}
.eo-acc.with-icons .eo-ac-title{flex:1}
.eo-acc.with-icons .eo-ac-text{padding-left:var(--sp-60)}
.eo-ac-ico{display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--r-full);
  background:var(--grad-green-soft);color:var(--deep)}

/* ---- 08.4 Karte auf dunklem Grund ------------------------------------- */
.about-card{position:relative;overflow:hidden;border-radius:var(--glass-radius-lg)}
.about-card .glow{width:300px;height:220px;background:var(--forest-50)}
.about-card>*:not(.glow){position:relative;z-index:2}

/* ==========================================================================
   09 · SEKTIONEN
   Sektionsfolge und Kanten:
     1 Hero        dunkel
     2 Intro       dunkel
     3 Leistungen  dunkel
     4 Kunden      dunkel   ── KANTE ──
     5 Warum       hell
     6 Arbeitsweise hell    ── KANTE ──
     7 Über uns    dunkel   ── KANTE ──
     8 Referenzen  hell     ── KANTE ──
     9 Stimmen     dunkel   ── KANTE ──
    10 FAQ         hell     ── KANTE ──
    11 CTA/Footer  dunkel
   An jeder Kante: --sec-edge oben und unten, keine Linie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   09.1 · SECTION 1 — HERO
   Full-bleed Foto. Der Textblock liegt auf Glas, damit Headline und
   Subtext über dem Bild sicher lesbar sind.
   -------------------------------------------------------------------------- */
.home-section-1{min-height:760px;min-height:var(--hero-h);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;
  background:url('assets/img/neu/hero.jpg') center/cover no-repeat;
  animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.home-section-1::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--scrim) 14%,transparent) 0%,
    transparent 26%,
    color-mix(in srgb,var(--scrim) 30%,transparent) 58%,
    color-mix(in srgb,var(--scrim) 66%,transparent) 100%)}
/* Kein grüner Glow im Hero — er soll hell und freundlich bleiben. */
.home-section-1>.rand{min-height:760px;min-height:var(--hero-h);
  justify-content:flex-end;z-index:3}
.home-section-1-inhalt{padding:calc(var(--nav-h) + var(--sp-72)) 0 var(--sp-56)}

/* Der Hero-Text steht direkt auf dem Foto — kein Glas-Panel.
   Eine Haarlinie über die volle Inhaltsbreite trennt ihn vom Bild. */
.hero-rule{margin-bottom:var(--sp-36);border-top-color:rgb(255 255 255 / .28)}
.hero-badge{margin-bottom:var(--sp-24)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-48)}
.hero-title{max-width:560px;font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:var(--fw-black);letter-spacing:var(--ls-display);color:var(--cream)}
.hero-right{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-24);max-width:430px}
.hero-sub{font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:var(--fw-body);color:var(--cream)}
.hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12)}
/* dunkle Pille mit Ansprechpartner-Avatar (Evermind: „Book a call") */
.btn-person{display:inline-flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-8) var(--sp-20) var(--sp-8) var(--sp-8);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-bold);
  color:var(--cream);background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:var(--radius-base);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast)}
.btn-person img{width:32px;height:32px;flex:none;border-radius:var(--r-full);object-fit:cover}
.btn-person:hover{background:var(--shade);transform:translateY(-2px)}
.hero-badge,.hero-title,.hero-right{animation:heroUp .9s var(--ease-out) both}
.hero-title{animation-delay:.08s}
.hero-right{animation-delay:.16s}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   09.2 · SECTION 2 — INTRO / STATEMENT
   Zentriertes Statement, Linien-Grafik links im Anschnitt,
   darunter die Ansprechpartner-Karte auf Glas.
   -------------------------------------------------------------------------- */
.home-section-2{padding:var(--sec-pad) 0;overflow:hidden}
/* Die Welle (lines.svg) als wiederverwendbares Deko-Element.
   Immer z-index 0, immer pointer-events:none, nie über Inhalt. */
.deco-lines{position:absolute;z-index:0;height:auto;pointer-events:none;
  width:clamp(160px, 22vw, 340px)}
.deco-lines--l{left:0}
.deco-lines--r{right:0;transform:scaleX(-1)}
.deco-lines--mid{top:50%;translate:0 -50%}
.deco-lines--top{top:0}
.deco-lines--bottom{bottom:0}
.deco-lines--soft{opacity:.45}
.deco-lines--faint{opacity:.28}

.intro-lines{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:0;
  width:clamp(180px, 24vw, 340px);height:auto;opacity:.9;pointer-events:none}
.home-section-2 .rand{z-index:1}
.home-section-2-inhalt>.eyebrow{margin-bottom:var(--sp-24)}
.intro-text{max-width:860px;margin:0 auto;
  font-size:var(--fs-statement);line-height:var(--lh-statement);
  font-weight:var(--fw-semi);letter-spacing:-.01em;color:var(--cream)}
.intro-text .g{color:var(--mint)}
/* Ansprechpartner-Karte */
.kayser{display:inline-flex;align-items:center;gap:var(--sp-16);
  margin-top:var(--sp-48);padding:var(--sp-12) var(--sp-24) var(--sp-12) var(--sp-12);
  text-align:left}
.kayser img{width:56px;height:56px;flex:none;border-radius:var(--r-full);
  object-fit:cover;border:1px solid var(--glass-border)}
.kayser .who{display:flex;flex-direction:column}
.kayser .name{font-size:var(--fs-h5);line-height:var(--lh-h5);
  font-weight:var(--fw-bold);color:var(--mint)}
.kayser .role{font-size:var(--fs-meta);line-height:var(--lh-meta);
  font-weight:var(--fw-medium);color:var(--cream)}

/* --------------------------------------------------------------------------
   09.3 · SECTION 3 — LEISTUNGEN („Was wir tun")
   Zwei Bildkarten, die beim Hover per flex-grow aufklappen. Tag und Titel
   sitzen auf einem Glas-Panel — Vorbild des Glas-Systems.
   -------------------------------------------------------------------------- */
.home-section-3{padding:var(--sec-pad-sm) 0 var(--sec-pad)}
.home-section-3 .h2{margin-bottom:var(--sp-36)}

.cards2{display:flex;gap:var(--sp-16);width:100%}
.lcard{position:relative;flex:1 1 0;min-width:0;
  height:clamp(340px, 30vw, 440px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;
  border-radius:var(--r-12);border:1px solid var(--glass-border);
  transition:flex-grow .6s var(--ease-expand);will-change:flex-grow}
.cards2:hover .lcard{flex-grow:.72}
.cards2 .lcard:hover{flex-grow:1.9}
.lcard-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transition:transform .8s var(--ease-expand)}
.lcard:hover .lcard-bg{transform:scale(1.05)}
.lcard-bg--messebau{background-image:url('assets/img/neu/card-messebau.jpg')}
.lcard-bg--events  {background-image:url('assets/img/neu/card-events.jpg')}
.lcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--scrim) 30%,transparent),
    transparent 45%,
    color-mix(in srgb,var(--scrim) 45%,transparent))}
.lcard>*:not(.lcard-bg){position:relative;z-index:2}
/* Frost-Band über die volle Kartenbreite, Haarlinie schliesst es unten ab */
.lcard-panel{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-12);width:100%;padding:var(--sp-24) var(--sp-28) var(--sp-20);
  border-radius:var(--r-12) var(--r-12) 0 0}
.lcard-panel .hairline{margin-top:var(--sp-4)}
.lcard .tag{display:inline-flex;align-items:center;gap:var(--sp-12);
  font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream)}
.lcard .tag .dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--mint);
  animation:dotPulse 3.6s var(--ease) infinite}
.lcard h3{font-size:var(--fs-h3);line-height:var(--lh-h3);
  font-weight:var(--fw-black);letter-spacing:var(--ls-h3);color:var(--cream)}
.lcard .arrow{position:absolute;right:var(--sp-24);bottom:var(--sp-24);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--r-full);
  background:transparent;border:1px solid var(--glass-border);
  transition:transform .3s,background .3s,border-color .3s}
.lcard .arrow svg{stroke:var(--cream)}
.lcard:hover .arrow{background:var(--cream);border-color:var(--cream);transform:translate(3px,-3px)}
.lcard:hover .arrow svg{stroke:var(--darkest)}

/* --------------------------------------------------------------------------
   09.4 · SECTION 4 — KUNDEN (Logo-Marquee)
   Letzte dunkle Sektion vor der Kante -> unten --sec-edge, keine Linie unten.
   -------------------------------------------------------------------------- */
.home-section-4{padding:var(--sec-pad) 0 var(--sec-edge);
  border-top:1px solid var(--hairline)}
.home-section-4-inhalt>.eyebrow{margin-bottom:var(--sp-56)}

/* --------------------------------------------------------------------------
   09.5 · SECTION 5 — WARUM EXPO OUTLINE (helles Band)
   Erste helle Sektion nach der Kante -> oben --sec-edge.
   Kopf · drei Benefit-Karten auf hellem Glas · Galerie-Mosaik.
   -------------------------------------------------------------------------- */
.home-section-5{background:var(--cream);color:var(--deep);
  padding:var(--sec-edge) 0 var(--sec-pad);overflow:hidden}
.home-section-5 .glow{width:520px;height:420px;right:-120px;top:80px;background:var(--forest-12)}
.home-section-5 .rand{z-index:1}

/* Kopfzeile: links Label + H2, rechts Lead. Auch in Section 8 verwendet. */
.band-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sp-64);margin-bottom:var(--sp-56)}
.band-head .h2{max-width:640px}
.band-head .lead{max-width:440px}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16)}
/* Schlicht gehalten: weisse Fläche, feine Haarlinie, kein Grün-Tint.
   Oben eine Zeile aus Icon und kleinem Marker, darunter Titel und Text. */
.fcard{padding:var(--sp-28);border-radius:var(--r-10);
  background:var(--surface-light);border:1px solid var(--hairline-light);
  transition:border-color .25s,transform .25s}
.fcard:hover{border-color:color-mix(in srgb, var(--deep) 28%, transparent);
  transform:translateY(-3px)}
.fcard-top{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:var(--sp-32)}
.fcard .ico{width:32px;height:32px;color:var(--forest)}
.fcard-mark{width:7px;height:7px;flex:none;margin-top:var(--sp-4);
  border-radius:var(--r-full);background:var(--forest);opacity:.55}
.fcard h4{margin-bottom:var(--sp-12);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-h4);color:var(--deep)}
.fcard p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--on-light-82)}

.einblick{width:100%;padding-top:var(--sp-80);text-align:center}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;
  gap:var(--sp-16);width:100%}
.g-cell{position:relative;overflow:hidden;padding:0;cursor:zoom-in;
  border:0;border-radius:var(--r-12);background:none}
.g-cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.g-cell:hover img{transform:scale(1.06)}
.g-cell::after{content:"";position:absolute;inset:0;
  background:color-mix(in srgb,var(--scrim) 0%,transparent);transition:background var(--t-fast)}
.g-cell:hover::after{background:color-mix(in srgb,var(--scrim) 18%,transparent)}
.g-big{grid-column:span 2;grid-row:span 2}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:var(--sp-40);
  background:color-mix(in srgb,var(--shade) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb.is-open{display:flex}
.lb-img{max-width:min(1240px,100%);max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-12);box-shadow:0 40px 120px -40px rgb(0 0 0 / .8)}
.lb-cap{position:absolute;left:0;right:0;bottom:var(--sp-32);text-align:center;
  font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--cream)}
.lb-count{color:var(--on-dark-70)}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;cursor:pointer;color:var(--cream);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  border-radius:var(--r-full);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  transition:background var(--t-fast),transform var(--t-fast)}
.lb-btn:hover{background:var(--shade);transform:scale(1.06)}
.lb-prev{left:var(--sp-24)}
.lb-next{right:var(--sp-24)}
.lb-close{top:var(--sp-24);right:var(--sp-24)}
.gallery-foot{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-32);width:100%;margin-top:var(--sp-32);
  padding-top:var(--sp-32);border-top:1px solid var(--hairline-light)}
.gallery-foot p{max-width:640px;font-size:var(--fs-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-medium);color:var(--deep);text-align:left}

/* --------------------------------------------------------------------------
   09.6 · SECTION 6 — ARBEITSWEISE (helles Band)
   Letzte helle Sektion vor der Kante -> unten --sec-edge.
   Zwei Phasen als 2-Spalter, dazwischen eine Verbindungs-Haarlinie.
   -------------------------------------------------------------------------- */
.home-section-6{background:var(--cream);color:var(--deep);
  padding:var(--sec-pad) 0 var(--sec-edge);overflow:hidden}
.home-section-6 .glow{width:640px;height:360px;right:-160px;top:200px;background:var(--forest-12)}
.home-section-6 .rand{z-index:1}
.home-section-6 .h2{max-width:720px;margin:0 auto var(--sp-52)}

/* align-items:start, damit das Bild beim Aufklappen eines Accordion-Punkts
   nicht neu zentriert wird und die Sektion springt. */
.phase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 4.4vw, 70px);
  align-items:start;width:100%;text-align:left}
.phase-img{width:100%;height:clamp(320px, 34vw, 520px);object-fit:cover;border-radius:var(--r-16)}
.phase-info>.eyebrow{margin-bottom:var(--sp-24)}
.phase-info h3{margin-bottom:var(--sp-20);font-size:var(--fs-h3);line-height:var(--lh-h3);
  font-weight:var(--fw-black);letter-spacing:var(--ls-h3);color:var(--deep)}
.phase-intro{padding-top:var(--sp-20);border-top:1px solid var(--hairline-light);
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--on-light-82)}
/* Verbindungslinie zwischen den Prozess-Schritten */
.phase-connector{display:block;width:0;height:var(--sp-72);margin:var(--sp-40) auto;
  border:0;border-left:1px solid var(--hairline-mint)}
.sublist{margin-top:var(--sp-16)}
.subrow{display:flex;gap:var(--sp-16);align-items:flex-start;padding:var(--sp-20) 0;
  border-top:1px solid var(--hairline-light)}
.subrow:last-child{border-bottom:1px solid var(--hairline-light)}
.subrow h5{margin-bottom:var(--sp-4);font-size:var(--fs-h5);line-height:var(--lh-h5);
  font-weight:var(--fw-bold);color:var(--deep)}
.subrow p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--on-light-82)}
.mini-ico{display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--r-full);
  background:var(--grad-green-soft);color:var(--deep)}
.phase-cta{margin-top:var(--sp-32)}

/* --------------------------------------------------------------------------
   09.7 · SECTION 7 — ÜBER UNS (dunkel)
   Kanten oben und unten -> beidseitig --sec-edge.
   -------------------------------------------------------------------------- */
.home-section-7{background:var(--darkest);padding:var(--sec-edge) 0;overflow:hidden}
.home-section-7::before{content:"";position:absolute;width:640px;height:460px;
  left:-160px;top:60px;border-radius:var(--r-full);background:var(--forest-22);
  filter:blur(90px);pointer-events:none;z-index:0;animation:float1 20s ease-in-out infinite}
.home-section-7 .rand{z-index:1}

.uber-top{display:flex;justify-content:space-between;gap:var(--sp-64);margin-bottom:var(--sp-48)}
.uber-top .h2{max-width:560px}
.uber-top .lead{max-width:470px}
.uber-grid{display:grid;grid-template-columns:360px 1fr;gap:var(--sp-20)}

.card-erfahrung{display:flex;flex-direction:column;justify-content:space-between;
  min-height:272px;padding:var(--sp-32)}
.card-erfahrung .glow{left:-60px;top:-40px}
.erf-top{display:flex;align-items:center;gap:var(--sp-16)}
.erf-icon{display:flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:var(--r-12);color:var(--mint);
  background:var(--forest-14);border:1px solid var(--mint-28)}
.erf-badge{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream)}
.erf-body h4{margin-bottom:var(--sp-12);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-bold);color:var(--mint)}
.erf-body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--cream)}

.card-team{display:flex;flex-direction:column;justify-content:space-between;
  min-height:272px;padding:var(--sp-28) var(--sp-32)}
.card-team .glow{right:-40px;top:-40px}
.card-team h4{margin-bottom:var(--sp-20);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-bold);color:var(--mint)}
/* Vier Disziplinen auf Haarlinien — kein Foto, keine Avatar-Collage.
   Platzhalter, bis ein echtes Teambild vorliegt. */
.team-roles{display:flex;flex-direction:column;width:100%;margin-bottom:var(--sp-20)}
.team-role{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-16);
  padding:var(--sp-12) 0;border-top:1px solid var(--hairline)}
.team-role:last-child{border-bottom:1px solid var(--hairline)}
.team-role .tr-name{font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--cream)}
.team-role .tr-num{font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);color:var(--mint)}
.card-team p{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--cream)}
.card-team a{color:var(--mint)}

.standort-card{position:relative;grid-row:span 2;min-height:566px;overflow:hidden;
  border-radius:var(--glass-radius-lg);background:url('assets/img/standort.jpg') center/cover}
.standort-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--scrim) 50%,transparent),
    transparent 40%,
    color-mix(in srgb,var(--scrim) 45%,transparent))}
.standort-card .top{position:absolute;top:var(--sp-32);left:var(--sp-24);right:var(--sp-24);
  z-index:2;text-align:center}
.standort-card .pin{display:inline-flex;align-items:center;gap:var(--sp-8);
  margin-bottom:var(--sp-12);font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--cream)}
.standort-card .top h4{font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-black);color:var(--cream)}
.standort-card .badge{position:absolute;left:var(--sp-20);bottom:var(--sp-20);z-index:2;
  display:flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-8) var(--sp-20) var(--sp-8) var(--sp-8);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-semi)}
.standort-card .badge img{width:28px;height:28px;border-radius:var(--r-full)}

.card-full{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-24);
  align-items:center;min-height:280px;padding:var(--sp-32)}
.card-full .glow{right:-40px;bottom:-40px}
.card-full h4{margin-bottom:var(--sp-12);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-bold);color:var(--mint)}
.card-full p{margin-bottom:var(--sp-24);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--cream)}
.card-full .node-diagram{width:100%;max-width:100%}

.uber-bottom{grid-column:2;display:grid;grid-template-columns:300px 1fr;gap:var(--sp-20)}
.card-quali{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:290px;padding:var(--sp-28);text-align:center}
.card-quali .glow{left:-40px;top:20px}
.card-quali h4{margin-bottom:var(--sp-12);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-bold);color:var(--mint)}
.card-quali img{width:128px;margin:var(--sp-4) 0 var(--sp-16)}
.card-quali p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--cream)}

.card-facts{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-32)}
.card-facts .glow{left:-60px;bottom:-40px}
.card-facts h4{margin-bottom:var(--sp-24);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-bold);color:var(--mint)}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-24)}
.fact{display:flex;flex-direction:column;padding-top:var(--sp-12);
  border-top:1px solid var(--hairline)}
.fact .fn{font-size:var(--fs-h2);line-height:1;font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);color:var(--on-dark)}
.fact .fl{margin-top:var(--sp-8);font-size:var(--fs-meta);line-height:var(--lh-meta);
  color:var(--cream)}

.uber-link{width:100%;margin-top:var(--sp-40);padding-top:var(--sp-32);
  border-top:1px solid var(--hairline);text-align:center}
.uber-link a{font-size:var(--fs-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-medium);color:var(--mint);
  border-bottom:1px solid var(--hairline-mint);padding-bottom:var(--sp-4)}
.uber-link a:hover{border-bottom-color:var(--mint)}

/* --------------------------------------------------------------------------
   09.8 · SECTION 8 — REFERENZEN (helles Band)
   Kanten oben und unten. Filter links, Case-Karten rechts, dazwischen ein
   Spalten-Trenner. Jede Karte hat ihren eigenen CTA — kein Block-CTA.
   -------------------------------------------------------------------------- */
.home-section-8{background:var(--cream);color:var(--deep);
  padding:var(--sec-edge) 0;overflow:hidden}
.home-section-8 .rand{z-index:1}
.home-section-8 .band-head{margin-bottom:var(--sp-24)}
.home-section-8 .band-head .h2{max-width:520px}
.home-section-8 .ref-head .h2{max-width:560px}

/* Kopfzeile der Referenzen: Headline links, Textfilter rechts auf der
   Grundlinie. Aktiver Filter mit Mint-Unterstrich. */
.ref-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sp-40);margin-bottom:var(--sp-48)}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-28);padding-bottom:var(--sp-4)}
.filter{position:relative;padding:0 0 var(--sp-8);
  font-family:inherit;font-size:var(--fs-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-medium);color:var(--on-light-70);
  background:none;border:0;cursor:pointer;transition:color var(--t-fast)}
.filter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease)}
.filter:hover{color:var(--deep)}
.filter.active{color:var(--deep);font-weight:var(--fw-semi)}
.filter.active::after{transform:scaleX(1)}

.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-48) var(--sp-32);width:100%}
/* Editorial-Karte: Bild oben, darunter Kunde als Label und grosse Headline.
   Kein Panel, kein Rahmen — die Karte lebt vom Bild und vom Weissraum. */
.story{display:flex;flex-direction:column;gap:var(--sp-16)}
.story .simg{position:relative;height:clamp(240px, 26vw, 360px);
  overflow:hidden;border-radius:var(--r-10)}
.sbg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .7s var(--ease-out)}
.story:hover .sbg{transform:scale(1.04)}
.sbg--asus        {background-image:url('assets/img/neu/proj-1.jpg')}
.sbg--ubisoft     {background-image:url('assets/img/neu/proj-2.jpg')}
.sbg--party       {background-image:url('assets/img/neu/proj-3.jpg')}
.sbg--logitech    {background-image:url('assets/img/neu/proj-4.jpg')}
.sbg--paulmitchell{background-image:url('assets/img/neu/proj-5.jpg')}
.sbg--emma        {background-image:url('assets/img/neu/proj-6.jpg')}
.story .scat{display:inline-flex;align-items:center;gap:var(--sp-12);
  font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-light-70)}
.story .scat::before{content:"";width:8px;height:8px;flex:none;
  border-radius:var(--r-full);background:var(--mint)}
.story h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
  font-weight:var(--fw-bold);color:var(--deep)}
/* CTA unter dem Raster: breite Zeile — Titel links, Erläuterung mittig,
   runder Pfeil rechts. Keine Trennlinie, nur Weissraum darüber. */
.ref-foot{width:100%;margin-top:var(--sp-56)}
/* Keine eigene Fläche — die Zeile sitzt im Band und wird nur von einer
   Haarlinie oben gefasst. Zurückhaltend, Apple-Prinzip. */
.ref-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--sp-32);width:100%;padding:var(--sp-28) 0 var(--sp-4);
  border-top:1px solid var(--hairline-light);
  transition:border-color var(--t-fast)}
.ref-cta:hover{border-top-color:color-mix(in srgb, var(--deep) 34%, transparent)}
.ref-cta-title{font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);font-weight:var(--fw-bold);color:var(--deep)}
.ref-cta-text{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--on-light-70)}
.ref-cta-arrow{display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--r-full);
  background:transparent;border:1px solid var(--hairline-light);color:var(--deep);
  transition:transform var(--t-fast),background var(--t-fast),
             border-color var(--t-fast),color var(--t-fast)}
.ref-cta:hover .ref-cta-arrow{background:var(--grad-green);border-color:transparent;
  color:var(--on-dark);transform:translateX(3px)}

.read-case{display:inline-flex;align-items:center;gap:var(--sp-8);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-semi);
  color:var(--on-light-70);transition:color var(--t-fast),gap var(--t-fast)}
.story:hover .read-case{color:var(--forest);gap:var(--sp-12)}

/* --------------------------------------------------------------------------
   09.9 · SECTION 9 — AUSZEICHNUNGEN + KUNDENSTIMMEN (dunkel)
   Kanten oben und unten -> beidseitig --sec-edge, keine Linie oben.
   -------------------------------------------------------------------------- */
.home-section-9{background:var(--darkest);padding:var(--sec-edge) 0;overflow:hidden}
.home-section-9::before{content:"";position:absolute;width:640px;height:460px;
  left:-160px;top:60px;border-radius:var(--r-full);background:var(--forest-22);
  filter:blur(90px);pointer-events:none;z-index:0;animation:float1 20s ease-in-out infinite}
.home-section-9 .glow{width:700px;height:400px;left:-160px;top:120px;background:var(--forest-12)}
.home-section-9 .rand{z-index:1}

/* Sichtbarer Platzhalter-Hinweis. Kommt raus, sobald echte Kundenstimmen
   freigegeben sind. */
.placeholder-note{display:inline-flex;align-items:center;gap:var(--sp-12);
  margin-bottom:var(--sp-24);padding:var(--sp-8) var(--sp-20);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-semi);
  color:var(--mint);border:1px dashed var(--mint-28);border-radius:var(--r-pill)}
.placeholder-note::before{content:"";width:8px;height:8px;flex:none;
  border-radius:var(--r-full);background:var(--mint)}
.tcard--placeholder .tn,.tcard--placeholder .tr,
.tcard--placeholder .quote,.tcard--placeholder .comp{color:var(--on-dark-70)}
.tcard--placeholder .av{filter:grayscale(1) contrast(.85);opacity:.5}

.awards{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp-40);
  padding-bottom:var(--sp-56);margin-bottom:var(--sp-56);
  border-bottom:1px solid var(--hairline)}
.award{display:flex;align-items:center;gap:var(--sp-16);
  font-size:var(--fs-meta);line-height:var(--lh-meta);
  font-weight:var(--fw-semi);color:var(--cream)}
.award .kranz{height:72px;width:auto;flex:none}
.award .kranz.l{transform:scaleX(-1)}
.award-txt{white-space:nowrap}

.home-section-9-inhalt>.eyebrow{margin-bottom:var(--sp-24)}
.home-section-9 .h2{max-width:720px;margin:0 auto var(--sp-24)}
.rating{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-16);
  margin-bottom:var(--sp-48);padding:var(--sp-8) var(--sp-20);
  font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--cream)}
.rating .stars{color:var(--mint);letter-spacing:2px}
.rating .g{color:var(--mint);font-weight:var(--fw-bold)}
.rating .divider{width:1px;height:16px;background:var(--hairline)}

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-20);
  width:100%;text-align:left}
.tcard{display:flex;flex-direction:column;padding:var(--sp-24);
  border-radius:var(--r-14);transition:transform .25s}
.tcard:hover{transform:translateY(-5px)}
.thead{display:flex;align-items:center;gap:var(--sp-12);margin-bottom:var(--sp-20);
  padding-bottom:var(--sp-16);border-bottom:1px solid var(--hairline)}
.thead .av{width:44px;height:44px;flex:none;border-radius:var(--r-full);object-fit:cover}
.thead .tn{font-size:var(--fs-meta);line-height:var(--lh-meta);
  font-weight:var(--fw-bold);color:var(--cream)}
.thead .tr{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--on-dark-70)}
.tag2{margin-left:auto;flex:none;padding:var(--sp-4) var(--sp-12);border-radius:var(--r-pill);
  font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  background:var(--on-dark-14);color:var(--cream)}
.tag2--green{background:var(--grad-green);color:var(--on-dark)}
.quote{margin-bottom:var(--sp-20);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--cream)}
.quote .hl{padding:1px 4px;border-radius:var(--sp-4);
  background:var(--forest-24);color:var(--on-dark)}
.tfoot{display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:var(--sp-16);border-top:1px solid var(--hairline)}
.tfoot img{height:20px;width:auto;max-width:110px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.75}
.tfoot .comp{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--on-dark-70)}

/* --------------------------------------------------------------------------
   09.10 · SECTION 10 — FAQ (helles Band)
   Kanten oben und unten. Links Text, senkrechte Haarlinie, rechts Accordion.
   -------------------------------------------------------------------------- */
.home-section-10{background:var(--cream);color:var(--deep);padding:var(--sec-edge) 0}
.home-section-10-inhalt{display:grid;grid-template-columns:1fr 1px 1fr;
  gap:var(--sp-56);align-items:start;width:100%}
.faq-left .h2{margin-bottom:var(--sp-20)}
.faq-left p{margin-bottom:var(--sp-32);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--on-light-82)}
.faq-list{margin-top:0}


/* --------------------------------------------------------------------------
   09.11 · SECTION 11 — ANSPRECHPARTNER-CTA (dunkel)
   Links Aussage, rechts die Ansprechpartner-Karte auf Glas. Erste dunkle
   Sektion nach der FAQ-Kante -> oben --sec-edge. Topografische Linien links.
   -------------------------------------------------------------------------- */
.home-section-11{background:var(--darkest);padding:var(--sec-edge) 0 var(--sec-pad);
  overflow:hidden}
.cta-lines{position:absolute;left:0;bottom:0;z-index:0;
  width:clamp(160px, 20vw, 300px);height:auto;opacity:.55;pointer-events:none}
/* Auf hellen Bändern ist die Welle nur ganz zart sichtbar */
.home-section-5 .deco-lines,.home-section-8 .deco-lines{opacity:.5;filter:saturate(.7)}
.home-section-11 .rand{z-index:1}
.partner-grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px, 5vw, 88px);align-items:start;width:100%}
.partner-text .h2{max-width:620px;margin-bottom:var(--sp-32)}
.partner-text p{max-width:620px;margin-bottom:var(--sp-20);
  font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--cream)}
.partner-text p:last-child{margin-bottom:0}

.contact-card{padding:var(--sp-32)}
.cc-head{display:flex;align-items:center;gap:var(--sp-16);margin-bottom:var(--sp-24)}
.cc-head img{width:56px;height:56px;flex:none;border-radius:var(--r-full);
  object-fit:cover;border:1px solid var(--glass-border)}
.cc-name{font-size:var(--fs-h5);line-height:var(--lh-h5);
  font-weight:var(--fw-bold);color:var(--cream)}
.cc-role{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--on-dark-70)}
.cc-quote{margin-bottom:var(--sp-24);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--cream)}
.contact-card .hairline{margin-bottom:var(--sp-24)}
.cc-link{display:block;margin-bottom:var(--sp-12);font-size:var(--fs-body);
  font-weight:var(--fw-semi);color:var(--mint)}
.cc-link:hover{text-decoration:underline}
.cc-btn{margin-top:var(--sp-20)}
/* Buttons folgen dem Radius-Wert direkt: bei 5 sind es 5px, bei 10 zehn.
   Nur dekoratives Beiwerk (Badges, Tags, Bewertungszeile) bleibt Pille. */
.btn--pill{border-radius:var(--radius-base)}

/* --------------------------------------------------------------------------
   09.12 · SECTION 12 — CTA über Foto + Footer auf Glas
   Erste dunkle Sektion nach der Kante -> oben --sec-edge.
   -------------------------------------------------------------------------- */
.home-section-12{flex-direction:column;align-items:stretch}
/* Grosszuegige Flaeche, damit das Foto nicht hart beschnitten wirkt. */
.cta{position:relative;width:100%;min-height:clamp(760px, 88vh, 1040px);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:url('assets/img/neu/cta.jpg') center/cover}
/* Zwei Scrims: senkrecht für die Grundtiefe, waagerecht für die Textspalte
   links. Ohne den zweiten war die grüne Headline auf dem Moos nicht lesbar. */
.cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--scrim-deep) 78%,transparent),
    color-mix(in srgb,var(--scrim-deep) 66%,transparent) 30%,
    color-mix(in srgb,var(--scrim-deep) 96%,transparent))}
.cta::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--scrim-deep) 76%,transparent) 0%,
    color-mix(in srgb,var(--scrim-deep) 46%,transparent) 38%,
    transparent 68%)}
.cta-inner{position:relative;z-index:3;display:flex;justify-content:center;
  padding:var(--sec-edge) 0 var(--sp-64)}
.home-section-12-inhalt>.eyebrow{margin-bottom:var(--sp-20)}
.cta .h2{max-width:640px;margin-bottom:var(--sp-32)}
.cta-btns{display:flex;flex-wrap:wrap;gap:var(--sp-16)}

.footer{position:relative;z-index:4;
  width:calc(100% - 2 * var(--footer-inset));
  margin:auto auto var(--footer-inset);
  padding:var(--sp-40) clamp(24px, 3.5vw, 56px);
  border-radius:var(--glass-radius-lg)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-40);
  padding-bottom:var(--sp-32);border-bottom:1px solid var(--hairline)}
.flogo{height:28px;margin-bottom:var(--sp-20)}
.fdesc{max-width:400px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--cream)}
.footer-col h5{margin-bottom:var(--sp-16);font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--mint)}
.footer-col a{display:block;width:fit-content;margin-bottom:var(--sp-12);
  font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--cream);transition:color .15s}
.footer-col a:hover{color:var(--mint)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-24);padding-top:var(--sp-24)}
.footer-bot .addr{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--cream)}
.footer-bot .legal{display:flex;flex-wrap:wrap;gap:var(--sp-20);
  font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--cream)}
.footer-bot .legal a:hover{color:var(--mint)}
.footer-bot .legal span{color:var(--on-dark-30)}
.footer-bot .social{display:flex;gap:var(--sp-8)}
.footer-bot .social a{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-full);
  background:var(--grad-green);color:var(--on-dark);transition:var(--t-fast)}
.footer-bot .social a:hover{background:var(--grad-green-hover);transform:translateY(-2px)}

/* ==========================================================================
   10 · RESPONSIVE
   Desktop > 1080px · Tablet ≤1080px · Mobil ≤720px · klein ≤460px
   ========================================================================== */

/* ---- Tablet ------------------------------------------------------------ */
@media (max-width:1080px){
  .nav-links,.nav>.btn{display:none}
  .nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .nav{padding-right:var(--sp-12)}

  .band-head{flex-direction:column;align-items:flex-start;gap:var(--sp-24)}
  .band-head .h2,.band-head .lead{max-width:none}
  .uber-top{flex-direction:column;gap:var(--sp-24)}
  .uber-top .h2,.uber-top .lead{max-width:none}

  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}

  .uber-grid{grid-template-columns:1fr}
  .standort-card{grid-row:auto;min-height:360px}
  .card-full,.uber-bottom{grid-column:auto}
  .uber-bottom{grid-template-columns:1fr 1fr}

  .ref-head{flex-direction:column;align-items:flex-start;gap:var(--sp-24)}
  .filters{gap:var(--sp-20)}

  .home-section-10-inhalt{grid-template-columns:1fr;gap:var(--sp-40)}
  .home-section-10-inhalt>.hairline-v{display:none}

  .partner-grid{grid-template-columns:1fr;gap:var(--sp-40)}
  .partner-text .h2,.partner-text p{max-width:none}

  .footer-top{grid-template-columns:1fr 1fr;gap:var(--sp-32)}
  .fdesc{max-width:none}
}

/* ---- Mobil ------------------------------------------------------------- */
@media (max-width:720px){
  :root{--footer-inset:16px}

  .hero-panel{max-width:none;padding:var(--sp-24)}
  .hero-row{flex-direction:column;align-items:flex-start;gap:var(--sp-28)}
  .hero-title,.hero-right{max-width:none}
  .hero-right{width:100%}

  .intro-lines{display:none}
  .kayser{width:100%}

  .cards2{flex-direction:column}
  .lcard{height:300px}
  .cards2:hover .lcard,.cards2 .lcard:hover{flex-grow:1}
  .lcard-panel{max-width:none}

  .feature-grid{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .uber-bottom{grid-template-columns:1fr}

  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:var(--sp-12)}
  .g-big{grid-column:span 2;grid-row:span 2}
  .lb{padding:var(--sp-16)}
  .lb-prev{left:var(--sp-8)}
  .lb-next{right:var(--sp-8)}
  .gallery-foot{flex-direction:column;align-items:flex-start;gap:var(--sp-20)}

  .phase{grid-template-columns:1fr;gap:var(--sp-28)}
  .phase-img{order:-1;height:260px}

  .card-full{grid-template-columns:1fr}
  .card-full .node-diagram{max-width:340px;margin-inline:auto}

  .proj-grid{grid-template-columns:1fr}

  .awards{gap:var(--sp-24)}
  .award .kranz{height:52px}

  .cta-lines{display:none}
  .contact-card{padding:var(--sp-24)}
  .footer{padding:var(--sp-28) var(--sp-20)}
  .footer-top{grid-template-columns:1fr;gap:var(--sp-28)}
  .footer-bot{flex-direction:column;align-items:flex-start;gap:var(--sp-20)}
  .eo-ac-text{padding-right:0}
}

/* ---- klein ------------------------------------------------------------- */
@media (max-width:460px){
  .gallery{grid-template-columns:1fr;grid-auto-rows:180px}
  .g-big{grid-column:auto;grid-row:auto}
  .cta-btns .btn{width:100%}
  .award-txt{white-space:normal}
  .awards{flex-direction:column;align-items:center}
  .rating{flex-wrap:wrap;justify-content:flex-start}
}

/* ==========================================================================
   11 · RADIUS-REGLER — nur für die Abstimmung
   Gehört zusammen mit radius-tool.js. Vor dem Livegang beides entfernen.
   ========================================================================== */
.radius-tool{position:fixed;right:var(--sp-20);bottom:var(--sp-20);z-index:200;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-12)}
.rt-toggle{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;cursor:pointer;color:var(--cream);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  border-radius:var(--r-full);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 10px 30px -12px rgb(0 0 0 / .5);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast)}
.rt-toggle:hover{background:var(--shade);transform:translateY(-2px)}
.radius-tool.is-open .rt-toggle svg{transform:rotate(60deg)}
.rt-toggle svg{transition:transform var(--t-mid) var(--ease)}
.rt-panel{order:-1;width:232px;padding:var(--sp-20)}
.rt-head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--sp-16);font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--cream)}
.rt-val{color:var(--mint)}
.rt-presets{display:flex;gap:var(--sp-8);margin-bottom:var(--sp-16)}
.rt-preset{flex:1;padding:var(--sp-8) 0;cursor:pointer;font-family:inherit;
  font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--cream);
  background:transparent;border:1px solid var(--glass-border);border-radius:var(--r-6);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.rt-preset:hover{border-color:var(--mint)}
.rt-preset.is-active{background:var(--grad-green);border-color:transparent;color:var(--on-dark)}
.rt-range{width:100%;height:20px;cursor:pointer;background:transparent;
  -webkit-appearance:none;appearance:none}
.rt-range::-webkit-slider-runnable-track{height:2px;background:var(--glass-border)}
.rt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;border:0;border-radius:var(--r-full);
  background:var(--mint)}
.rt-range::-moz-range-track{height:2px;background:var(--glass-border)}
.rt-range::-moz-range-thumb{width:14px;height:14px;border:0;
  border-radius:var(--r-full);background:var(--mint)}
.rt-note{margin-top:var(--sp-12);font-size:var(--fs-label);line-height:var(--lh-label);
  color:var(--on-dark-70)}
@media (max-width:720px){.radius-tool{right:var(--sp-12);bottom:var(--sp-12)}}