/* =====================================================================
   NOPO MEDIA — styles.css
   Vanilla CSS, ohne Framework/Build. WordPress-übertragbar:
   pro Sektion ein klar abgegrenzter Block mit Kommentar-Header.
   Reihenfolge: 1) Design-System (Tokens)  2) Reset  3) Basis  4) Sektionen
   ===================================================================== */


/* =====================================================================
   1 — DESIGN-SYSTEM · CI-Tokens
   ===================================================================== */
:root{
  /* Markenfarben (CI) */
  --midnight:#171717;
  --cloud:#ffffff;
  --flash:#e6fa6f;
  --fog:#8a8a8a;
  --pulse:#ff385c;

  /* Semantik — hell ist Default, Cloud ist dominant */
  --bg:var(--cloud);
  --text:var(--midnight);
  --text-muted:var(--fog);
  --accent:var(--flash);        /* einziger Standard-Akzent */
  --accent-alt:var(--pulse);    /* nur Alternative, NIE zusätzlich */

  /* Schrift — eine Familie: Proxima Nova; Montserrat nur Preview-Fallback */
  --font-display:"Proxima Nova","Montserrat",system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:"Proxima Nova","Montserrat",system-ui,-apple-system,Segoe UI,sans-serif;

  /* Type-Scale (fluid) */
  --fs-200:.8125rem;
  --fs-300:.9375rem;
  --fs-400:1rem;
  --fs-500:1.125rem;
  --fs-600:clamp(1.25rem,2.4vw,1.5rem);
  --fs-700:clamp(1.6rem,4vw,2.25rem);
  --fs-800:clamp(2.2rem,7vw,4rem);
  --fs-900:clamp(3rem,11vw,7.5rem);

  /* Einheitliche Überschriften-Skala (gilt seitenübergreifend, Desktop + Mobil).
     EINE Quelle der Wahrheit, statt pro Sektion handjustierter Clamps → alle
     gleichrangigen Überschriften sind exakt gleich groß.
       --fs-h1  Seiten-/Hero-Titel (darf am größten sein)
       --fs-h2  Sektionstitel — ÜBERALL identisch
       --fs-h3  Karten-/Listen-/Formular-Titel
       --fs-h4  Namen, FAQ-Fragen, kleine Labels
     Fließtext bleibt einheitlich über --fs-500 (Lead/Prosa) bzw. --fs-400 (Body). */
  --fs-h1:clamp(2.4rem,7vw,5rem);
  --fs-h2:clamp(1.9rem,4.2vw,3rem);
  --fs-h3:clamp(1.4rem,2.4vw,2rem);
  --fs-h4:clamp(1.1rem,1.6vw,1.35rem);

  /* Spacing (8pt-Rhythmus) */
  --sp-1:.25rem;  --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;

  /* Layout */
  --container-max:1440px;
  --gutter:clamp(1.25rem,4vw,4rem);
  /* Größerer Gutter für die Inhaltssektionen. Ursprünglich nur LINKS gedacht (Inhalt
     rechts neben der fixen Wortmarke freistellen, „Logo geht über nichts"); inzwischen
     auf Auftraggeber-Wunsch SYMMETRISCH verwendet (links==rechts) → ausgewogeneres Bild.
     Wert weiterhin nach der Logo-Freistellung links bemessen (~145px breite Wortmarke auf
     Desktop). Opt-in pro Sektion (s. unten), NICHT global; auf Mobil dezent (~24–45px). */
  --gutter-left:clamp(1.5rem,12vw,10.5rem);
  --header-inset:clamp(1rem,2.4vw,2rem);

  /* Capsule-Maße (global, damit Wortmarke sich daran ausrichtet) */
  --cap-h:52px;
  --cap-w:134px;

  /* Radii */
  --radius-pill:999px;
  --radius-lg:26px;
  --radius-md:16px;

  /* Elevation */
  --shadow-capsule:0 22px 60px -18px rgba(23,23,23,.5), 0 8px 20px -10px rgba(23,23,23,.32);

  /* Motion */
  --ease-capsule:cubic-bezier(.16,1,.3,1);   /* expo-out, „buttrig" */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.42,.5,1);   /* leichter Overshoot fürs „Aufploppen" */
  --ease-expand:cubic-bezier(.22,1,.36,1);   /* Öffnen: smoother, sauberer Auslauf (easeOutQuint) */
  --ease-collapse:cubic-bezier(.4,0,.2,1);   /* Schließen: weicher Stopp zurück in die Pille */
  --dur-fast:.22s; --dur-mid:.44s; --dur-slow:.6s;
  --dur-open:.66s; --dur-close:.5s;

  /* z-index-Skala */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-header:1000;
  --z-launcher:1500;        /* Anfrage-Launcher: über dem Header, unter Modal/Preloader */
  --z-overlay:2000;
  --z-modal:3000;           /* Anfrage-Drawer: über allem außer Custom-Cursor */
  --z-cursor:2147483647;   /* Custom-Cursor: Max z-index → über Preloader UND CookieYes-Banner (99999999). OneTap klemmt auf denselben Max-Wert → dort native Maus (s. cookie-consent.css). */
}


/* =====================================================================
   2 — RESET
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  /* Tap-Feedback bewusst neutral: der graue WebKit-Default-Kasten beim Antippen
     passt nicht zur Marke (besonders sichtbar auf den hellen Cloud-Flächen).
     Die Elemente haben eigene :hover/:active-/Open-Zustände → transparent. */
  -webkit-tap-highlight-color:transparent;
}
/* Kein 300 ms-Tap-Delay / kein Doppel-Tap-Zoom auf interaktiven Elementen */
a,button,label,summary,[role="button"],.btn{touch-action:manipulation;}

/* Kein horizontaler Scroll: schneidet jeden seitlichen Überlauf ab (z. B. das
   Cursor-folgende Service-Reveal-Bild, das am rechten Rand kurz hinausragen kann).
   BEWUSST `clip` statt `hidden`: `overflow-x:hidden` würde html/body zum
   Scroll-Container machen (overflow-y → auto) und kann `position:sticky` brechen —
   das gepinnte Hero-Video ist die Seiten-Signature. `clip` schneidet nur ab,
   ohne Scroll-Container → Sticky & vertikaler Scroll bleiben unberührt. */
html,body{overflow-x:clip;}
body{
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-400);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,picture{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul[class]{list-style:none;padding:0;}

/* Sichtbarer Tastatur-Fokus (hell) */
:focus-visible{outline:2px solid var(--midnight);outline-offset:3px;border-radius:3px;}


/* =====================================================================
   3 — BASIS · Typografie & Layout
   ===================================================================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  font-stretch:expanded;        /* Proxima Nova Wide; Montserrat-Fallback ignoriert das */
  text-transform:lowercase;     /* Brand-Stil: Headlines klein */
  letter-spacing:-.02em;
  line-height:.96;
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* Home-Seite: die Inhaltssektionen bekommen den größeren Gutter SYMMETRISCH (links==rechts,
   beide = --gutter-left) → links genug Luft, dass der Inhalt rechts neben der fixen Wortmarke
   beginnt, rechts gleich viel → ausgewogenes Bild (Auftraggeber-Wunsch). Opt-in pro Sektion:
   – Hero-TEXT + Projekt-ÜBERSCHRIFT sind dabei: ihr Container trägt nur den Text bzw.
     Kicker+Titel — das Fullscreen-Medium ist getrennt (Hero-Video = eigene Sektion;
     Projekt-Grid liegt AUSSERHALB des Containers) → bleibt full-bleed.
   – CTA dabei: macht die Card schmaler + symmetrisch (s. data-dark-section-Hinweis im HTML:
     da die Card jetzt eingerückt ist, liegt das Logo über dem hellen Grund → bleibt Midnight).
   – Certs dabei: zusätzlich `.certs__grid{justify-content:flex-start}` (s. u.) → Badges
     linksbündig direkt unter der Überschrift statt zentriert.
   – Ausgenommen bleibt nur Customers (komplett zentriertes Logo-Band).
   Der geteilte Footer wird bewusst auf ALLEN Seiten mitgezogen (gleiche Wortmarke/Optik).
   Unterseiten-Container (außer Footer) sind unberührt. */
.hero > .container,
.services_module > .container,
.projects > .container,
.about > .container,
.certs > .container,
.faq > .container,
.cta > .container,
.site-footer > .container{
  padding-inline:var(--gutter-left);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* =====================================================================
   PRELOADER — dreiphasiger Fullscreen-Ladescreen
   Drei Logos exakt übereinander (Cross-Fade über .active), Phasenfarben
   am Container (.is-phase-1/2/3), weiche Transitions für Hintergrund &
   Logo-Opacity. Bei 100 % blendet .fade-out die ganze Schicht aus.
   Sichtbar NUR mit JS (html.js) → ohne JS kein blockierender Overlay.
   ===================================================================== */
#preloader{display:none;}

/* `.js #preloader` (NICHT `html.js #preloader`) — bewusst OHNE Element-Selektor,
   damit die Spezifität exakt der von `#preloader.is-phase-N` / `#preloader.fade-out`
   entspricht und die Zustands-Regeln per Quellreihenfolge gewinnen (Phasenfarben
   + Fade-out). Mit `html` davor würde diese Basisregel sie überstimmen. */
.js #preloader{
  /* Phasenfarben (--pl-bg/--pl-fg) kommen aus .is-phase-1/2/3. */
  --ease-pl:cubic-bezier(.65,0,.35,1);   /* easeInOutCubic — sanfter Crossfade */
  --dur-phase:.9s;                        /* langsamer = smootherer Phasenwechsel */
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);        /* über allem (Header/Hero) */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--pl-bg,#f5f5f7);
  color:var(--pl-fg,#111111);
  opacity:1;
  visibility:visible;
  /* weicher Phasen-Crossfade (BG/Text) + finales Ausblenden (opacity) */
  transition:background-color var(--dur-phase) var(--ease-pl),
             color var(--dur-phase) var(--ease-pl),
             opacity .6s var(--ease-out),
             visibility 0s linear 0s;
}

/* Phasen-Hintergrund + Zählerfarbe */
#preloader.is-phase-1{--pl-bg:#f5f5f7;--pl-fg:#111111;}
#preloader.is-phase-2{--pl-bg:#111111;--pl-fg:#ffffff;}
#preloader.is-phase-3{--pl-bg:#000000;--pl-fg:#ffffff;}

/* Logo-Bühne: die drei Icons liegen exakt übereinander */
.preloader__stage{
  position:relative;
  width:clamp(96px,22vw,180px);
  aspect-ratio:1/1;
}
.preloader__logo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:scale(.96);
  transition:opacity var(--dur-phase) var(--ease-pl), transform var(--dur-phase) var(--ease-pl);
  will-change:opacity,transform;
}
.preloader__logo.active{
  opacity:1;
  transform:scale(1);
}

/* Prozentanzeige unten LINKS, groß, in der Headline-Typo (Proxima Nova Wide
   Black, lowercase, tight) — wie die Hero-Headline, am Seiten-Gutter verankert. */
.preloader__percent{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(1.25rem,5vh,2.75rem);
  display:flex;
  align-items:flex-end;
  font-family:var(--font-display);
  font-weight:900;
  font-stretch:expanded;            /* Proxima Nova Wide; Montserrat-Fallback ignoriert das */
  text-transform:lowercase;
  letter-spacing:-.03em;
  line-height:.82;
  font-variant-numeric:tabular-nums;  /* Ziffern springen beim Hochzählen nicht */
  font-size:clamp(4rem,13vw,9rem);    /* deutlich größer als zuvor */
  color:inherit;
  transition:color var(--dur-phase) var(--ease-pl);
}
.preloader__num{display:inline-block;}
/* „%" kleiner, in CI-Gelb (Flash) als Marken-Signal — führt das Punkt-/Flash-
   Akzentsystem der Seite fort. Bleibt über alle Phasen Flash (kein Phasenwechsel). */
.preloader__sign{
  font-size:.4em;
  margin-left:.08em;
  margin-bottom:.14em;
  color:var(--accent);                /* Flash #e6fa6f */
}

/* Ausblenden, sobald geladen */
#preloader.fade-out{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .6s var(--ease-out),
             visibility 0s linear .6s;   /* erst nach dem Fade entfernen */
}

/* Scroll-Sperre, solange der Preloader läuft (wird per JS am <html> gesetzt) */
html.preloader-active,
html.preloader-active body{overflow:hidden;}

/* Quality-Floor: reduzierte Bewegung → harte, sofortige Phasenwechsel */
@media (prefers-reduced-motion:reduce){
  .js #preloader,
  .preloader__logo,
  .preloader__percent,
  #preloader.fade-out{transition-duration:.001s;}
  .preloader__logo{transform:none;}
  .preloader__logo.active{transform:none;}
}


/* =====================================================================
   SEKTION 1 — HEADER / CAPSULE MENU
   Schwebende Wortmarke (links) + dunkle Pillen-Kapsel (rechts), die
   nach unten zu einem großen Menü-Container expandiert.
   Zustand: Default = geschlossen · .is-open = offen (JS togglet die Klasse)
   ===================================================================== */

/* --- Header-Schale: zwei schwebende Objekte, kein Balken --------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--z-header);
  display:flex;
  align-items:flex-start;            /* oben verankert, damit offenes Menü nicht recentriert */
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--header-inset);
  pointer-events:none;               /* Klicks fallen auf die Seite durch … */
}
.site-header > *{pointer-events:auto;} /* … nur die Objekte selbst sind klickbar */

/* --- Wortmarke nopo. -------------------------------------------------- */
.brand{
  display:flex;align-items:center;
  height:var(--cap-h);               /* vertikal auf Pillen-Mitte ausgerichtet */
  font-family:var(--font-display);
  font-weight:900;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:-.03em;
  font-size:clamp(1.45rem,3.2vw,1.95rem);
  line-height:1;
  color:var(--midnight);
}
/* Hinweis: mix-blend-mode:difference auf der Wortmarke wurde verworfen — im fixen
   Header (eigene Compositing-Gruppe) blendet es gegen einen leeren Hintergrund,
   wodurch Weiß auf Weiß unsichtbar wird. Stattdessen schaltet die Wortmarken-
   Farbe wie zuvor adaptiv um (Midnight auf Hell, Cloud auf Dunkel) — gesteuert
   über .over-media (Hero-Video) und .over-dark (dunkle Sektionen) im JS. */
.brand-dot{                          /* der Punkt ist Pflicht und trägt den Flash-Akzent */
  color:var(--flash);
  margin-left:.02em;
  font-size:1.05em;
}

/* --- Die Kapsel ------------------------------------------------------- */
.capsule{
  --cap-open-w:min(90vw,380px);
  --cap-open-h:min(78svh,460px);

  position:relative;
  display:flex;flex-direction:column;
  width:var(--cap-w);
  height:var(--cap-h);
  background:var(--midnight);
  color:var(--cloud);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-capsule);
  overflow:hidden;
  transform-origin:top right;
  /* Schließen (Default-Zustand) */
  transition:
    width  var(--dur-close) var(--ease-collapse),
    height var(--dur-close) var(--ease-collapse),
    border-radius var(--dur-close) var(--ease-collapse);
  will-change:width,height;
}
.capsule.is-open{
  width:var(--cap-open-w);
  height:var(--cap-open-h);
  border-radius:var(--radius-lg);
  /* Öffnen — eigene, smoothere Kurve & etwas mehr Zeit */
  transition:
    width  var(--dur-open) var(--ease-expand),
    height var(--dur-open) var(--ease-expand),
    border-radius var(--dur-open) var(--ease-expand);
}

/* Heller Fokus innerhalb der dunklen Kapsel */
.capsule a:focus-visible,
.capsule button:focus-visible{outline:2px solid var(--flash);outline-offset:3px;}
/* Bei Touch/Maus keinen Ring auf den Nav-Items: setState() fokussiert beim
   Öffnen den ersten Link programmatisch — ohne diese Unterdrückung erschiene
   dort ein gelber Rahmen. Bei echter Tastatur-Nav bleibt der Ring sichtbar. */
.capsule.using-pointer a:focus-visible,
.capsule.using-pointer button:focus-visible{outline:none;}

/* --- Trigger-Zeile (zwei Buttons) ------------------------------------- */
.capsule-trigger{
  position:relative;flex:0 0 auto;
  height:var(--cap-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .55rem 0 1.35rem;
}

/* Menu-Button: Status-Punkt + „menu" in Einzelbuchstaben */
.capsule-menu-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  height:100%;color:var(--cloud);
  font-family:var(--font-display);
  font-weight:700;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.08em;
  font-size:.95rem;
}
.capsule-status{                     /* einziger Flash-Akzent im geschlossenen Zustand */
  width:7px;height:7px;border-radius:50%;
  background:var(--flash);flex:0 0 auto;
}
.capsule-label{display:inline-flex;}
.capsule-label span{
  display:inline-block;
  transition:transform var(--dur-fast) var(--ease-out);
}
/* Buchstaben-Welle beim Hover (gestaffelt) */
@media (hover:hover){
  .capsule-menu-btn:hover .capsule-label span{transform:translateY(-3px);}
  .capsule-menu-btn:hover .capsule-label span:nth-child(2){transition-delay:.04s;}
  .capsule-menu-btn:hover .capsule-label span:nth-child(3){transition-delay:.08s;}
  .capsule-menu-btn:hover .capsule-label span:nth-child(4){transition-delay:.12s;}
}

/* Close-Button (SVG-Kreuz) — im geschlossenen Zustand versteckt */
.capsule-close-btn{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  color:var(--cloud);
  opacity:0;transform:scale(.5) rotate(-60deg);pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             background var(--dur-fast) ease;
}
.capsule-close-btn svg{width:18px;height:18px;}
.capsule.is-open .capsule-close-btn{
  opacity:1;transform:none;pointer-events:auto;transition-delay:.14s;
}
.capsule-close-btn:hover{background:rgba(255,255,255,.09);}

/* --- Panel (Links + Footer), wird im geschlossenen Zustand weggeclippt - */
.capsule-panel{
  flex:1 1 auto;
  display:flex;flex-direction:column;
  padding:.25rem 1.35rem 1.5rem;
  overflow-x:hidden;             /* fängt den kurzen x-Versatz des Reveals ab */
  overflow-y:auto;               /* nur Notfall auf sehr kurzen Screens … */
  scrollbar-width:none;          /* … aber ohne sichtbare Scrollbar (Firefox) */
  -ms-overflow-style:none;
}
.capsule-panel::-webkit-scrollbar{width:0;height:0;}  /* WebKit/Blink */

/* Menü-Links: groß, klein geschrieben, gestaffelt einfadend */
.capsule-links{
  display:flex;flex-direction:column;
  margin-top:var(--sp-3);
}
.capsule-links a{
  display:inline-flex;align-items:baseline;gap:.06em;
  width:max-content;max-width:100%;   /* Hover-/Klickfläche = nur der Text + Punkt */
  padding:.18em 0;
  font-family:var(--font-display);
  font-weight:900;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:-.02em;
  font-size:clamp(1.7rem,5.4vw,2.35rem);
  line-height:1.18;color:var(--cloud);
  /* geschlossener Ausgangszustand (per Briefing) */
  opacity:0;transform:translate(20px,-20px);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
/* Reveal gestaffelt — Hover-Farbe (color) bewusst OHNE Delay (sonst „versetzt") */
.capsule.is-open .capsule-links a{
  opacity:1;transform:translate(0,0);
  transition-delay:calc(.14s + var(--i,0) * .07s),
                   calc(.14s + var(--i,0) * .07s),
                   0s;
}
.lnk-text{display:inline-block;}
/* CI-Punkt statt Pfeil: erscheint beim Hover und echot die Wortmarke nopo. */
.lnk-dot{
  align-self:baseline;
  width:.26em;height:.26em;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
  opacity:0;transform:scale(.2);transform-origin:center 70%;
  transition:opacity var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-back);
}
/* Punkt erscheint bei Tastatur-Fokus ODER auf der AKTIVEN Seite (aria-current).
   Hover bewusst nur für echte Zeiger (Maus) — sonst bleibt der Hover-Punkt auf
   Touch „kleben" und sähe wie eine Dauer-Markierung aus (z. B. services). */
.capsule:not(.using-pointer) .capsule-links a:focus-visible .lnk-dot,
.capsule-links a[aria-current="page"] .lnk-dot{opacity:1;transform:none;}
@media (hover:hover) and (pointer:fine){
  .capsule-links a:hover .lnk-dot{opacity:1;transform:none;}
}

/* Footer im Menü — ploppt zuletzt elegant auf */
.capsule-foot{
  margin-top:auto;padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:var(--sp-4);
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-back);
}
.capsule.is-open .capsule-foot{
  opacity:1;transform:none;
  transition-delay:calc(.14s + 4 * .07s + .05s);     /* nach dem letzten Link */
}
/* E-Mail + Telefon: identische Größe & Schrift (Auftraggeber-Wunsch) */
.capsule-email,
.capsule-phone{
  position:relative;align-self:flex-start;
  font-size:var(--fs-300);color:var(--cloud);letter-spacing:.01em;
}
.capsule-email::after,
.capsule-phone::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:var(--flash);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.capsule-email:hover::after,
.capsule-email:focus-visible::after,
.capsule-phone:hover::after,
.capsule-phone:focus-visible::after{transform:scaleX(1);}
/* E-Mail und Telefon als ein Kontaktblock enger zusammen (statt voller foot-gap) */
.capsule-email + .capsule-phone{margin-top:-.6rem;}
.capsule-socials{display:flex;gap:var(--sp-2);}
.capsule-socials a{
  display:grid;place-items:center;width:44px;height:44px;   /* Touch-Target */
  color:var(--fog);
  transition:color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
.capsule-socials a:hover,
.capsule-socials a:focus-visible{color:var(--cloud);transform:translateY(-2px);}
.capsule-socials svg{width:19px;height:19px;}

/* --- Auftritt beim Laden (dezent) ------------------------------------- */
@keyframes nopo-rise{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.brand{animation:nopo-rise .7s var(--ease-out) both .08s;}
.capsule{animation:nopo-rise .7s var(--ease-out) both .2s;}

/* --- Progressive Enhancement: ohne JS bleibt das Menü offen lesbar ---- */
html:not(.js) .capsule{width:var(--cap-open-w);height:auto;border-radius:var(--radius-lg);animation:none;}
html:not(.js) .capsule-links a,
html:not(.js) .capsule-foot{opacity:1;transform:none;}
html:not(.js) .capsule-close-btn{display:none;}


/* =====================================================================
   SEKTION 2 — HERO  (A: Vollbild-Video · B: Hero)
   Stage = Pin-Track. Das Video ist gepinnt (sticky) und faded beim Scrollen
   aus; der helle Hero (höherer z-index, opakes Cloud) gleitet darüber.
   Signature: der choreografierte Übergang + der Flash-Punkt, der zuletzt landet.
   ===================================================================== */
.hero-stage{position:relative;}

/* --- A · Vollbild-Video: gepinnt, Scroll-Fade via JS (opacity/scale) --- */
.hero-video{
  position:sticky;top:0;
  height:100svh;
  z-index:var(--z-base);
  background:var(--midnight);     /* Basis HINTER dem Video — kein Overlay davor */
  will-change:opacity,transform;
}
.hero-video__frame{position:absolute;inset:0;overflow:hidden;background:var(--midnight);}
/* Selbst-gehostetes <video>: füllt den Viewport formatfüllend, ohne Verzerrung */
.hero-video__media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  border:0;pointer-events:none;
  transition:opacity .45s var(--ease-out);
}
/* Safari/macOS-Fix: das <video> wird in ein eigenes GPU-Overlay-Layer gehoben,
   das im allerersten Frame kurz ÜBER dem Preloader aufblitzen kann. Solange der
   Preloader läuft, bleibt das Video daher verborgen und blendet erst beim
   Ausblenden des Preloaders sanft ein. `preloader-active` wird synchron im <head>
   gesetzt (greift ab dem ersten Paint) → kein Flash-Fenster. Nur Seiten MIT
   Preloader (= Startseite) tragen die Klasse; about.html etc. bleiben unberührt. */
html.preloader-active .hero-video__media{opacity:0;transition:none;}

/* --- B · Hero: hell, editorial; gleitet über das Video ---------------- */
.hero{
  position:relative;z-index:var(--z-raised);
  background:var(--cloud);        /* opak → deckt das gepinnte Video beim Hochgleiten */
  min-height:64svh;               /* war 100svh — Leerraum ÜBER der H1 deutlich verkleinert (Auftraggeber-Wunsch); ≥ Fade-Distanz (60% vh), Video faded weiter ~in place. Gleiche bewährte Methode wie .au-hero. */
  display:flex;flex-direction:column;
  overflow:hidden;                /* fängt die Reveal-Translate der Headline ab */
}
.hero__inner{
  flex:1 1 auto;
  display:grid;
  align-content:end;              /* Inhalt unten verankert → kein zentrierter Blob */
  gap:clamp(.65rem,1.4vw,1rem);   /* H1 ↔ Band enger (Auftraggeber-Wunsch: Abstand war zu groß) */
  padding-block:clamp(2.5rem,5vh,3.75rem) clamp(5rem,12vh,8.5rem);   /* oben knapp (Abstand über H1 verkleinert, verhindert Headline-Clip bei content-getriebener Höhe), unten weiter großzügig */
}

.hero__title{
  /* Größe so gedeckelt, dass jede H1-Zeile auf EINER Zeile bleibt (zweireihig):
     längste Zeile „Dein Rundum-sorglos-Paket" braucht bei 5.25rem ~1122px, die
     Textspalte misst aber nur ~1104px → wrappte in eine 3. Zeile. Cap auf 4.85rem
     + vw leicht reduziert lässt ~6% Luft (auch für Proxima Nova statt Montserrat). */
  font-size:clamp(1.9rem,4.9vw,4.85rem);
  line-height:.94;letter-spacing:-.02em;   /* lowercase nach CI (erbt text-transform aus der h1-Basisregel) */
  color:var(--text);
  text-wrap:balance;                        /* falls eine Zeile doch umbricht: ausgewogen statt hängend */
}
/* Zeilenweise Masken-Reveal: Ascender/Descender brauchen Luft, sonst clippt
   das overflow:hidden — Padding gibt sie frei, neg. Margin zieht den Satz zusammen. */
.hero__line{
  display:block;overflow:hidden;
  padding:.08em 0 .16em;margin-bottom:-.14em;
}
.hero__line:last-child{margin-bottom:0;}
.hero__line-in{display:block;will-change:transform;}
.hero__dot{color:var(--accent);display:inline-block;}  /* der einzige Dauer-Flash im Hero */

/* Unteres Band: Subline links, Aktionen rechts (mobil gestapelt) ------- */
.hero__band{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(.25rem,.8vh,.5rem);   /* zusätzlicher Abstand zum H1 reduziert */
}
.hero__copy{max-width:min(58ch,100%);}
.hero__lead{font-size:var(--fs-500);line-height:1.6;color:var(--text);}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.75rem,2vw,1.25rem);flex-shrink:0;
  /* Etwas höher ins Band gehoben: das Band ist `align-items:end`, ohne Margin
     säßen die Buttons exakt auf der Grundlinie des Lead-Absatzes und wirkten
     „untergegangen". Auf Mobil (Band bricht um) wieder zurückgesetzt. */
  margin-bottom:clamp(.5rem,2.4vh,1.5rem);}

/* --- Button (shared · auch Sektion 9) -------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.95em 1.5em;border-radius:var(--radius-pill);
  background:var(--midnight);color:var(--cloud);
  font-family:var(--font-display);font-weight:700;font-stretch:expanded;
  text-transform:none;letter-spacing:0;font-size:var(--fs-400);
  line-height:1;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
.btn__dot{                        /* Flash als Handlungs-Signal, echot nopo. */
  width:.5em;height:.5em;border-radius:50%;background:var(--accent);flex:0 0 auto;
  transition:transform var(--dur-fast) var(--ease-back);
}
.btn--primary:hover,.btn--primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(23,23,23,.55);
}
.btn--primary:hover .btn__dot,.btn--primary:focus-visible .btn__dot{transform:scale(1.55);}

/* Sekundär-Button „Unsere Projekte" — Ghost/Outline, füllt sich beim Hover */
.btn--ghost{
  background:transparent;color:var(--midnight);
  box-shadow:inset 0 0 0 1.5px rgba(23,23,23,.28);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:var(--accent);color:var(--midnight);   /* Flash-Akzent statt Schwarz (CI-Kombi Midnight-auf-Flash) */
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px var(--accent),0 16px 30px -14px rgba(23,23,23,.35);
}

/* --- Entrance: EINE kuratierte Bewegung beim Hero-Eintritt ------------ */
.hero__band{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.hero__line-in{
  transform:translateY(120%);
  transition:transform var(--dur-slow) var(--ease-expand);
}
.hero__dot{
  opacity:0;transform:scale(.2);
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);
}
.hero.is-in .hero__line:nth-child(1) .hero__line-in{transform:none;transition-delay:.12s;}
.hero.is-in .hero__line:nth-child(2) .hero__line-in{transform:none;transition-delay:.26s;}
.hero.is-in .hero__band{opacity:1;transform:none;transition-delay:.48s;}
.hero.is-in .hero__dot{opacity:1;transform:none;transition-delay:.66s;}      /* landet zuletzt */

/* --- Header über dem dunklen Video lesbar halten (additiv, ändert die
       Sektion-1-Mechanik nicht) ------------------------------------- */
.site-header .brand{transition:color var(--dur-mid) var(--ease-out);}
.site-header.over-media .brand{color:var(--cloud);}

/* Fallbacks: ohne JS / reduced-motion → Hero sofort sichtbar ---------- */
html:not(.js) .hero__band,
html:not(.js) .hero__line-in,
html:not(.js) .hero__dot{opacity:1;transform:none;}

/* Mobil: die beiden Hero-Buttons passen nebeneinander nicht in die schmale
   Spalte (zusammen ~369px). `.hero__actions` trägt fürs Desktop-Layout
   `flex-shrink:0` (Button-Gruppe rechts neben dem Lead, soll nicht schrumpfen)
   → auf schmalen Screens ragt die Gruppe sonst über den Rand und der zweite
   Button wird vom globalen `overflow-x:clip` abgeschnitten. Hier darf die
   Gruppe schrumpfen + umbrechen; die Buttons wachsen dann auf die volle Breite
   (sauberes gestapeltes Mobile-CTA-Muster). */
@media (max-width:640px){
  .hero__actions{flex-shrink:1;max-width:100%;margin-bottom:0;}
  .hero__actions .btn{flex:1 1 auto;justify-content:center;}
}


/* =====================================================================
   SEKTION 4 — KUNDENLOGOS / REFERENZEN
   Zentriertes Midnight-Band. Die Kundenlogos kommen WEISS/transparent (500×500)
   → bewusst auf Midnight gezeigt (Auftraggeber-Wunsch), nativ weiß ohne Filter:
   dezent über opacity, Hover → volles Weiß + Lift. Logik der React-Referenz
   (tailark/customers-section) auf Vanilla übersetzt; Entrance = gestaffeltes
   blur+rise (Reveal-Vokabular der Seite, KEINE neue Signature — die bleibt der
   Flash-Punkt-Handoff im Hero, s. MEMORY §5).
   ===================================================================== */
/* Reveal-Stage (Auftraggeber-Wunsch): §4 pinnt, §5 scrollt opak darüber →
   die Kundenlogos verschwinden beim Scrollen unter der Leistungs-Sektion.
   isolation:isolate hält die z-Reihenfolge (Kunden 1 < Leistungen 2) lokal;
   die sticky-Bindung von §4 läuft über diesen Container (sauber begrenzt). */
.reveal-stage{
  position:relative;isolation:isolate;
  background:var(--midnight);   /* Midnight HINTER §4+§5: schließt die Subpixel-Naht beim Sticky-Overlap (§4 unten ↔ §5 oben). Sonst blitzt an der gerundeten Naht der weiße Body (1px-Strich am unteren Logo-Rand) durch. */
}

.customers{
  position:sticky;top:0;z-index:1;   /* pinnt → §5 (z-index:2) gleitet darüber */
  background:var(--midnight);
  color:var(--cloud);
  padding-block:clamp(5rem,12vh,8.5rem) clamp(4.5rem,11vh,9rem);   /* oben Innenabstand, unten max. Luft vor der überdeckenden §5 (Auftraggeber-Wunsch: „nach unten größer"). Floor 4.5rem hält kurze Viewports im Sticky-Budget (3. Reihe sichtbar), oben wächst es auf taller Screens. */
  text-align:center;          /* zentriertes Band (Auftraggeber-Wunsch) */
}

/* Kicker: dezenter Label, zentriert + Flash-Punkt (echot das Punkt-System) */
.customers__kicker{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
}
.customers__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}

/* Überschrift unter dem Kicker (lowercase Wide Black + Flash-Schlusspunkt) */
.customers__title{
  margin-top:clamp(.75rem,2vh,1.1rem);
  max-width:22ch;margin-inline:auto;
  font-size:var(--fs-h2);
  line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--cloud);
}
.customers__title-dot{color:var(--accent);}   /* Flash-Schlusspunkt (roter Faden der Seite) */

/* Logo-Grid: zentrierter Cluster mit EINHEITLICHEM Abstand (Zeile = Spalte).
   Spalten = inhaltsbreit (kein 1fr-Stretch) → gleiche Lücken in beide Richtungen. */
.customers__grid{
  margin:clamp(2.75rem,5vh,4rem) auto 0;   /* Abstand Überschrift ↔ Logos; zentrierter Cluster */
  display:grid;
  grid-template-columns:repeat(2,auto);
  justify-content:center;
  /* §4 ist sticky und wird von §5 überdeckt → alles unter 100vh bleibt unter dem Fold.
     Mit 3 Reihen muss die Sektion in den Viewport passen, sonst ist die unterste Reihe
     unsichtbar. Spalten bleiben luftig, Reihen mit moderatem Abstand (in den Viewport-Budget). */
  column-gap:clamp(4rem,8vw,7rem);
  row-gap:clamp(3.25rem,3.8vw,4rem);
  align-items:center;
}
@media (min-width:640px){
  .customers__grid{grid-template-columns:repeat(4,auto);}
}
.customers__item{display:flex;align-items:center;justify-content:center;}

/* Mobil (≤640px): Sticky-Cover ABSCHALTEN. Bei 2 Spalten sind die 12 Logos
   6 Reihen hoch → die Sektion ist höher als der Viewport. Da §4 sticky pinnt
   und §5 (opak) darüber gleitet, würden die unteren Reihen überdeckt, BEVOR
   man sie zu Gesicht bekommt (alles unter der ersten ~100vh bleibt verborgen).
   Auf Mobil scrollt §4 deshalb normal mit (position:relative) → alle 12 Logos
   sind sichtbar. Der gewollte Sticky-Cover bleibt ab 640px (4 Spalten = 3
   Reihen, passt in den Viewport — dafür wurde er getuned). */
@media (max-width:640px){
  .customers{position:relative;}
}

/* Logo = klickbarer Link zur Kundenwebsite (öffnet im neuen Tab). Der Link
   trägt die Klickfläche; der Hover-Lift/-Opacity bleibt auf dem Logo (s. u.). */
.customers__link{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;
  border-radius:6px;   /* Fokusring-Form (CI: kein Radius >6px) */
}
.customers__link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:8px;
}

/* Weiße Logos auf Midnight: nativ weiß (kein Filter), dezent über opacity.
   Quellen sind randlos getrimmt (echte Seitenverhältnisse, sehr breit bis hochkant)
   → über eine gemeinsame Box (max-Höhe + max-Breite) auf gleiche optische Wirkung
   gebracht, statt fester Quadrat-Höhe. */
.customers__logo{
  width:auto;height:auto;
  max-height:clamp(42px,5.6vw,58px);     /* 20% kleiner (Auftraggeber-Wunsch) */
  max-width:clamp(120px,15.2vw,168px);
  object-fit:contain;
  opacity:.72;                 /* dezent: Weiß auf Midnight → ruhiges Grau */
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
@media (hover:hover){
  .customers__item:hover .customers__logo{opacity:1;transform:translateY(-3px);}
}

/* --- Entrance: gestaffeltes blur+rise beim Eintritt (.is-in via JS) ---- */
.customers__item{
  opacity:0;transform:translateY(12px);filter:blur(12px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             filter var(--dur-slow) var(--ease-out);
}
.customers.is-in .customers__item{
  opacity:1;transform:none;filter:none;
  transition-delay:calc(.05s + var(--i,0) * .06s);   /* staggerChildren ≈ .06 */
}

/* Fallbacks: ohne JS → sofort sichtbar (sonst bliebe opacity:0) */
html:not(.js) .customers__item{opacity:1;transform:none;filter:none;}


/* =====================================================================
   SEKTION 5 — LEISTUNGEN / Hover-Accordion
   Dunkle Sektion (Midnight), editorial linksbündig. Sechs gestackte Cards mit
   konsistentem Radius (kleiner Gap, keine Icons/Nummern/Trennlinien). Geschlossen:
   Midnight, Name zentriert. Geöffnet (Desktop = Hover/Fokus, Touch = Klick):
   Gradient Midnight→Flash, Name gleitet nach links oben, Beschreibung blendet
   darunter ein. Höhe smooth via grid-template-rows 0fr→1fr (Muster der FAQ).
   Bleibt opak (z-index:2) → gleitet beim Scrollen über das sticky §4 (Reveal-Stage).
   ===================================================================== */
.services_module{
  position:relative;z-index:2;   /* opak → gleitet beim Scrollen über das sticky §4 (Reveal-Stage) */
  background:var(--midnight);
  color:var(--cloud);
  padding-block:clamp(5rem,11vh,8.5rem);
}

/* Kicker: dezenter Label + Flash-Punkt (wie §4, aber linksbündig) */
.services__kicker{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
}
.services__kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}

/* Überschrift unter dem Kicker (lowercase Wide Black + Flash-Schlusspunkt) */
.services__title{
  margin-top:clamp(.75rem,2vh,1.1rem);
  margin-bottom:clamp(2rem,5vh,3.25rem);
  max-width:18ch;
  font-size:var(--fs-h2);
  line-height:1.0;letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--cloud);
}
.services__title-dot{color:var(--accent);}   /* Flash-Schlusspunkt (roter Faden der Seite) */

/* Accordion-Container: gestackte Cards, kleiner Gap */
.svc-accordion{
  display:flex;
  flex-direction:column;
  gap:clamp(.5rem,1vw,.85rem);
}

/* Eine Card — geschlossen: Midnight mit feinem Rand + Schatten (hebt sich vom
   Midnight-Grund ab), Inhalt linksbündig. Container = <div>, der CTA darin ist
   ein echter Link/Button (kein verschachteltes <button>). */
.svc-card{
  --svc-pad-y:clamp(1.3rem,2.6vw,1.9rem);
  --svc-pad-x:clamp(1.4rem,3vw,2.2rem);
  --svc-name-fs:clamp(1.45rem,4vw,2.85rem);
  --svc-close-ease:cubic-bezier(.22,1,.36,1);  /* OUT (Schließen) — smoother Auslauf, so gewünscht */
  --svc-in-ease:cubic-bezier(.4,0,.2,1);       /* IN (Öffnen) — sanfter Start statt abrupt */
  --svc-ease:var(--svc-close-ease);            /* aktiv genutzte Kurve; im offenen Zustand → in-ease */
  --svc-open-dur:.55s;
  position:relative;
  isolation:isolate;                /* eigener Stacking-Context für ::after/::before/Inhalt */
  display:flex;
  flex-direction:column;
  align-items:flex-start;           /* linksbündig */
  justify-content:center;
  text-align:left;
  width:100%;
  min-height:clamp(5.5rem,10vh,7.25rem);
  padding:var(--svc-pad-y) var(--svc-pad-x);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);        /* Rand: hebt die Card vom Grund ab */
  background:var(--midnight);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.7);   /* dezenter Schatten */
  cursor:pointer;
  overflow:hidden;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}

/* Aktiver Hintergrund als eigene Ebene → Farbverlauf Flash→Midnight (CI „gelb
   zu schwarz", dezent: dunkelt erst zur unteren-rechten Ecke). Über OPACITY
   eingeblendet, weil background-image selbst nicht transitionierbar ist. */
.svc-card::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,var(--flash) 0%,var(--flash) 52%,var(--midnight) 128%);
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity var(--svc-open-dur) var(--svc-ease);
}

/* Inhalt über die ::after-Verlaufsebene heben */
.svc-card__name,
.svc-card__body,
.svc-card__cta{position:relative;z-index:1;}

/* Name — linksbündig; Cloud auf Midnight → Midnight auf dem Flash-Verlauf */
.svc-card__name{
  margin:0;
  max-width:100%;
  font-family:var(--font-display);
  font-weight:900;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:-.02em;line-height:1.05;
  font-size:var(--svc-name-fs);
  color:var(--cloud);
  transition:color var(--svc-open-dur) var(--svc-ease);
}

/* Beschreibung — klappt smooth nach unten auf (max-height + overflow hidden),
   linksbündig; Breite begrenzt → kollidiert nicht mit dem rechten CTA-Button. */
.svc-card__body{
  width:100%;
  max-height:0;
  overflow:hidden;
  transition:max-height var(--svc-open-dur) var(--svc-ease);
}
.svc-card__body-inner{
  display:block;   /* <span> → Block, sonst liefert scrollHeight 0 → --svc-open-h bleibt ungesetzt (Text klemmt auf den 16rem-Fallback) */
  padding-top:clamp(.7rem,1.5vw,1.05rem);
}
.svc-card__desc{
  display:block;                              /* <span> → Block, sonst greift max-width nicht */
  margin:0;
  max-width:min(68ch,calc(100% - 13rem));     /* rechte Grenze: Editorial-Maß bzw. vor dem CTA-Pill */
  font-size:clamp(.95rem,1.4vw,1.1rem);
  line-height:1.5;
  color:var(--midnight);   /* dunkel auf dem hellen Flash-Bereich */
}

/* CTA „projekt anfragen" → rechts, vertikal mittig; erscheint beim Aufklappen.
   Der Wrapper positioniert + blendet ein; das Pill-Aussehen liefert .btn.btn--light
   (Cloud-Pill + Flash-Punkt, identisch zur §9-„Projekt anfragen"). Der Hover-Lift
   des Pills liegt am .btn selbst → konfliktfrei zum translateY(-50%) des Wrappers. */
.svc-card__cta{
  position:absolute;
  right:var(--svc-pad-x);top:50%;
  transform:translateY(-50%) translateX(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--svc-open-dur) var(--svc-ease),
             transform var(--svc-open-dur) var(--svc-ease);
}
.svc-card__cta .btn{font-size:clamp(.9rem,1.1vw,1.05rem);}   /* etwas kompakter als der große §9-Button */
.svc-card__cta .btn:focus-visible{outline:2px solid var(--midnight);outline-offset:3px;}

/* --- Aktiver Zustand: Verlauf ein, Name dunkel, Body auf, CTA ein. Öffnet per
       Touch-Klick (.is-open) ODER Tastatur-Fokus des CTA (:focus-within); Desktop-
       Hover s. Media-Query. Öffnen nutzt die sanftere in-ease (kein abrupter Start). */
.svc-card.is-open,
.svc-card:focus-within{--svc-ease:var(--svc-in-ease);}
.svc-card.is-open::after,
.svc-card:focus-within::after{opacity:1;}
.svc-card.is-open .svc-card__name,
.svc-card:focus-within .svc-card__name{color:var(--midnight);}
.svc-card.is-open .svc-card__body,
.svc-card:focus-within .svc-card__body{max-height:var(--svc-open-h,16rem);}
.svc-card.is-open .svc-card__cta,
.svc-card:focus-within .svc-card__cta{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;}

@media (hover:hover) and (pointer:fine){
  .svc-card:hover{--svc-ease:var(--svc-in-ease);border-color:rgba(255,255,255,.18);}
  .svc-card:hover::after{opacity:1;}
  .svc-card:hover .svc-card__name{color:var(--midnight);}
  .svc-card:hover .svc-card__body{max-height:var(--svc-open-h,16rem);}
  .svc-card:hover .svc-card__cta{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;}
}

/* Mobile: rechts kein Platz für den Pill → CTA in den NORMALEN FLUSS unter den
   Text (statt absolut), Beschreibung volle Breite. Der CTA kollabiert mit dem
   Auf-/Zuklappen (max-height), braucht geschlossen also keinen Platz. So verdeckt
   der Button die Beschreibung NIE — unabhängig von der gemessenen Aufklapphöhe. */
@media (max-width:600px){
  .svc-card__desc{max-width:100%;}
  .svc-card__body-inner{padding-bottom:0;}
  .svc-card__cta{
    position:static;
    inset:auto;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:none;
    pointer-events:none;
    transition:max-height var(--svc-open-dur) var(--svc-ease),
               opacity var(--svc-open-dur) var(--svc-ease),
               margin-top var(--svc-open-dur) var(--svc-ease);
  }
  .svc-card.is-open .svc-card__cta,
  .svc-card:focus-within .svc-card__cta{
    max-height:5rem;
    margin-top:1.1rem;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* --- Entrance: gestaffeltes Rise+Fade (.is-in via scroll-animations.js).
       Überschreibt nur die transition-delays (Reihenfolge: opacity, transform,
       border-color, box-shadow). */
.services_module.is-in .svc-card{
  opacity:1;transform:translateY(0);
  transition-delay:calc(.05s + var(--i,0) * .08s),
                   calc(.05s + var(--i,0) * .08s),
                   0s,0s;
}

/* reduced-motion: keine Übergänge / kein Beam-Lauf (bleibt nutzbar) */
@media (prefers-reduced-motion:reduce){
  .svc-card,.svc-card__name,.svc-card__body,.svc-card__cta,
  .svc-card::after{transition:none;}
}

/* Fallback: ohne JS feuert die IO nicht → Cards sofort sichtbar (sonst opacity:0). */
html:not(.js) .svc-card{opacity:1;transform:none;}


/* =====================================================================
   SEKTION 6 — USE CASES / PROJEKTE
   Hell gerahmt (Cloud-Header im Container), darunter ein full-bleed 3×3-Grid
   (randlose Kacheln, edge-to-edge — We-Are-Royale-Look auf NOPO übersetzt).
   Hover: Medium zoomt, Scrim vertieft, Titel gleitet unten-links rein + Flash-
   Punkt (führt das Punkt-System fort). Touch/mobil: Info dauerhaft sichtbar.
   .project__media = Platzhalter-Gradient → später durch echtes Bild ersetzen.
   ===================================================================== */
.projects{
  position:relative;z-index:var(--z-raised);   /* eigene Ebene nach der Reveal-Stage */
  background:var(--midnight);                    /* dunkel (Auftraggeber-Wunsch) */
  color:var(--cloud);
  padding-block:clamp(4rem,9vh,7rem) 0;   /* Header oben, Grid randlos bis Sektionsende */
}

/* Kicker (Muster wie §4/§5, linksbündig) */
.projects__kicker{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
}
.projects__kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}

/* Überschrift unter dem Kicker (lowercase Wide Black + Flash-Schlusspunkt) */
.projects__title{
  margin-top:clamp(.75rem,2vh,1.1rem);
  max-width:20ch;
  font-size:var(--fs-h2);
  line-height:1.0;letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--cloud);   /* hell auf dunklem Hintergrund (Auftraggeber-Wunsch) */
}
.projects__title-dot{color:var(--accent);}   /* Flash-Schlusspunkt (roter Faden der Seite) */

/* Full-bleed Grid: randlos, gleich große Kacheln */
.projects__grid{
  margin-top:clamp(2.75rem,5.5vh,4.25rem);   /* Abstand Überschrift ↔ Kacheln leicht erhöht (Auftraggeber-Wunsch) */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
@media (max-width:1024px){
  .projects__grid{grid-template-columns:repeat(2,1fr);}
  /* CTA-Kachel füllt die letzte Zeile als Band, damit kein halber Solo-Slot bleibt.
     Spezifität > .project, damit aspect-ratio die quadratische Basisregel schlägt. */
  .projects__grid .project--cta{grid-column:1 / -1;aspect-ratio:16 / 6;}
}
/* Handyansicht (Auftraggeber-Wunsch): Kacheln leicht hochkant (≈4:5) statt
   quadratisch; Titel/Beschreibung bleiben verborgen → nur das Firmenlogo.
   Höhere Spezifität (.projects__grid …) schlägt die spätere quadratische
   Basisregel; :not(.project--cta) lässt die CTA-Band-Kachel unangetastet. */
@media (max-width:640px){
  .projects__grid .project:not(.project--cta){aspect-ratio:4 / 5;}
  /* 9 Kacheln im 2-Spalten-Raster lassen die letzte (günther witt) solo links
     stehen → rechts ein leerer Halbslot (wirkt wie ein Layout-Fehler). Die
     letzte Kachel überspannt deshalb beide Spalten als vollbreite Abschluss-
     Kachel (Querformat 16/10, gleiche Höhe wie eine Kleinkachel-Reihe). Logo +
     Scrim + Tap-Info funktionieren unverändert. */
  .projects__grid .project:last-child{grid-column:1 / -1;aspect-ratio:16 / 10;}
}

/* Eine Kachel */
.project{
  position:relative;
  aspect-ratio:4 / 5;   /* höhere (Hochformat-)Kacheln; Grid bleibt randlos full-bleed */
  overflow:hidden;
  background:var(--midnight);
  isolation:isolate;
}

/* Platzhalter-Medium (später <img>/background-image). Leichte Varianz pro Kachel,
   damit die 9 Platzhalter nicht identisch wirken. */
.project__media{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#222 0%,#101010 100%);   /* Fallback hinter dem Bild */
  transition:transform var(--dur-slow) var(--ease-out);
}
/* Echtes Projektbild füllt die Kachel (1:1-Quellen, Kacheln 1:1 → kein Beschnitt).
   Zoomt beim Hover mit (Eltern-.project__media bekommt das transform). */
.project__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Hover-Video: liegt innerhalb von .project__media über Foto + Schleier (z-index:1),
   füllt die Kachel deckend, zoomt mit dem Eltern-.project__media. Standard verborgen;
   erscheint + spielt erst beim Hover (JS startet/pausiert, preload=none → lädt erst dann).
   Bottom-Scrim (.project::after, z im .project-Kontext darüber) sichert den Titel. */
.project__video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease-out);
  pointer-events:none;
}
/* Konstanter Midnight-Schleier über dem Foto → das weiße Logo liest sich auf
   jedem Bild (echot §4: weiße Logos auf Midnight). CTA-Kachel ausgenommen. */
.project:not(.project--cta) .project__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,23,.40),rgba(23,23,23,.56));
}

/* Firmenlogo mittig, weiß, leicht durchsichtig, mit Apple-Spiegelung -------- */
.project__logo{
  position:absolute;z-index:2;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(54%,230px);
  max-height:38%;
  object-fit:contain;
  opacity:.9;                       /* „leicht durchsichtig" */
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));
  pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.project:nth-child(2) .project__media{background:linear-gradient(120deg,#1c1c1c,#0e0e0e);}
.project:nth-child(3) .project__media{background:linear-gradient(150deg,#262626,#141414);}
.project:nth-child(4) .project__media{background:linear-gradient(110deg,#1a1a1a,#0d0d0d);}
.project:nth-child(5) .project__media{background:linear-gradient(160deg,#242424,#121212);}
.project:nth-child(6) .project__media{background:linear-gradient(130deg,#1e1e1e,#0f0f0f);}
.project:nth-child(7) .project__media{background:linear-gradient(140deg,#282828,#151515);}
.project:nth-child(8) .project__media{background:linear-gradient(125deg,#1b1b1b,#0e0e0e);}
.project--cta .project__media{background:linear-gradient(135deg,#171717,#0b0b0b);}

/* Bottom-Scrim für den Hover-Titel. Standard aus (nur Logo sichtbar); erscheint
   beim Hover. CTA-Kachel zeigt ihren Text dauerhaft → Scrim dort sichtbar. */
.project::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.2) 40%,transparent 68%);
  opacity:0;transition:opacity var(--dur-mid) var(--ease-out);
}
.project--cta::after{opacity:.72;}

/* Info unten-links (echot die Hero-Verankerung). Standardmäßig verborgen
   (nur das Logo zeigt sich), erst beim Hover sichtbar — CTA-Kachel ausgenommen. */
.project__info{
  position:absolute;z-index:3;left:0;bottom:0;width:100%;
  padding:clamp(1rem,2vw,1.6rem);
  display:flex;flex-direction:column;gap:.45rem;
  color:var(--cloud);
}
.project:not(.project--cta) .project__info{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.project__cat{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.06em;
  font-size:var(--fs-200);color:rgba(255,255,255,.78);
}
.project__cat-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.project__title{
  font-size:var(--fs-h3);
  line-height:1.04;color:var(--cloud);
}
.project__dot{color:var(--accent);}   /* Flash-Punkt der CTA-Kachel (immer sichtbar) */

/* CTA-Kachel: ganze Fläche verlinkt nach #kontakt */
.project__link{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;
}
.project--cta:hover .project__media{transform:scale(1.05);}

/* Basis = „gezeigt"-Zustand (Touch / kein Hover / kein JS sehen alles).
   Hover-fähige Geräte: Titel + Flash-Punkt erst verborgen, beim Hover rein. */
@media (hover:hover) and (pointer:fine){
  /* Standard = nur das weiße Firmenlogo (mit Schleier). Beim Hover gleitet das
     Logo weg, das Foto zoomt, Scrim + Info (Kategorie + Titel + Flash-Punkt)
     erscheinen unten-links. Die CTA-Kachel ist ausgenommen (immer sichtbar). */
  .project:not(.project--cta):hover .project__logo,
  .project:not(.project--cta):focus-within .project__logo{
    opacity:0;transform:translate(-50%,-50%) scale(.96);
  }
  .project:not(.project--cta):hover .project__info,
  .project:not(.project--cta):focus-within .project__info{opacity:1;transform:none;}
  .project:hover .project__media{transform:scale(1.05);}
  /* Hover-Video einblenden (Start/Stop übernimmt script.js) */
  .project:not(.project--cta):hover .project__video,
  .project:not(.project--cta):focus-within .project__video{opacity:1;}
  .project:not(.project--cta):hover::after,
  .project:not(.project--cta):focus-within::after{opacity:1;}
}

/* Touch (kein Hover): angetippte Kachel = aktiver Zustand — spiegelt 1:1 den
   Hover (Logo weg, Foto zoomt, Scrim + Info + Video an). JS togglet .is-active
   nur auf Touch-Geräten; höhere Spezifität als die Basis-Versteckt-Regeln. */
.project.is-active:not(.project--cta) .project__logo{
  opacity:0;transform:translate(-50%,-50%) scale(.96);
}
.project.is-active:not(.project--cta) .project__info{opacity:1;transform:none;}
.project.is-active .project__media{transform:scale(1.05);}
.project.is-active:not(.project--cta) .project__video{opacity:1;}
.project.is-active:not(.project--cta)::after{opacity:1;}

/* Heller Fokus auf der dunklen CTA-Kachel */
.project__link:focus-visible{outline:2px solid var(--flash);outline-offset:-4px;border-radius:4px;}

/* Entrance: gestaffeltes Rise+Fade beim Eintritt (.is-in via JS) — Reveal-Vokabular der Seite */
.project{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.projects.is-in .project{
  opacity:1;transform:none;
  transition-delay:calc(.04s + var(--i,0) * .05s);
}
/* Fallback: ohne JS → sofort sichtbar */
html:not(.js) .project{opacity:1;transform:none;}

/* Reduced-Motion: kein Hover-Video (looped = Bewegung) → ganz aus, statisches Foto bleibt */
@media (prefers-reduced-motion: reduce){
  .project__video{display:none;}
}


/* =====================================================================
   SEKTION 7 — ÜBER UNS / ANSPRECHPARTNER
   Helle Sektion (Cloud dominant), editorial Zwei-Spalten: links Text
   (Kicker + lowercase-Wide-Black-Headline + Lead + Ghost-CTA), rechts die zwei
   Gründer als dunkle Karten. Akzent = Flash (kein Blau — Aqua ist veraltet).
   Flash-Punkt am Headline-Ende führt das Punkt-System fort (statische Wiederholung,
   keine 2. Signature). Kontakt-Icons = Mini-Ghost-Buttons (Flash-Fill beim Hover).
   ===================================================================== */
.about{
  background:var(--cloud);
  color:var(--text);
  padding-block:clamp(4.5rem,11vh,8rem);
}
.about__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:center;
}
@media (min-width:980px){
  .about__inner{grid-template-columns:0.95fr 1.05fr;align-items:center;}
}

/* --- Links: Text ----------------------------------------------------- */
.about__kicker{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
  margin-bottom:clamp(1.25rem,3vh,1.75rem);
}
.about__kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.about__title{
  /* Größe folgt jetzt dem einheitlichen Sektionstitel-Token (--fs-h2). Der Umbruch
     ist über die <span class="about__line">-Blöcke fest gesetzt (Komma-Umbruch);
     text-wrap:balance verteilt eine ggf. längere zweite Zeile sauber. */
  font-size:var(--fs-h2);
  line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--text);
}
.about__line{display:block;}
.about__dot{color:var(--accent);}   /* Flash-Schlusspunkt (roter Faden der Seite) */
.about__lead{
  margin-top:clamp(1.25rem,3vh,1.75rem);
  max-width:52ch;
  font-size:var(--fs-500);line-height:1.6;color:var(--text);
}
.about__intro .btn{margin-top:clamp(1.5rem,3.5vh,2.25rem);}

/* --- Rechts: die zwei Gründer ---------------------------------------- */
.about__team{
  display:grid;
  grid-template-columns:1fr 1fr;   /* die beiden als Paar, auch mobil */
  gap:clamp(1rem,2.4vw,1.75rem);
}
.founder{
  background:var(--cloud);
  border:1px solid rgba(23,23,23,.08);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(23,23,23,.35);
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
.founder__photo{
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:var(--midnight);   /* Fotos sind auf Schwarz → nahtlos */
}
.founder__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 22%;   /* Gesicht oben-mittig im Bild halten */
  transition:transform var(--dur-slow) var(--ease-out);
}
.founder__meta{
  padding:clamp(.9rem,1.6vw,1.35rem);
  display:flex;flex-direction:column;gap:.4rem;
}
/* Eigennamen bewusst NICHT lowercase (Ausnahme von der h-Basisregel) */
.founder__name{
  font-family:var(--font-display);
  font-weight:900;font-stretch:expanded;
  text-transform:none;letter-spacing:-.01em;
  font-size:var(--fs-h4);line-height:1.05;
  color:var(--text);
}
.founder__role{
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:none;letter-spacing:.02em;   /* Satzschreibung: „Geschäftsführer & IT" */
  font-size:var(--fs-200);color:var(--text-muted);
}
.founder__links{display:flex;gap:.5rem;margin-top:.45rem;}
.founder__links a{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--radius-pill);
  color:var(--text);
  box-shadow:inset 0 0 0 1.5px rgba(23,23,23,.16);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.founder__links a:hover,
.founder__links a:focus-visible{
  background:var(--accent);color:var(--midnight);   /* CI-Kombi Midnight-auf-Flash, wie Ghost-Button */
  box-shadow:inset 0 0 0 1.5px var(--accent);
  transform:translateY(-2px);
}
.founder__links svg{width:18px;height:18px;}

/* Karten-Hover: dezenter Lift + Foto-Zoom */
@media (hover:hover){
  .founder:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(23,23,23,.42);}
  .founder:hover .founder__photo img{transform:scale(1.04);}
}

/* --- Entrance: gestaffeltes Rise+Fade (.is-in via JS) ----------------- */
.about__intro,
.founder{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.about.is-in .about__intro{opacity:1;transform:none;transition-delay:.05s;}
.about.is-in .founder{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .1s);}
/* Fallback ohne JS → sofort sichtbar */
html:not(.js) .about__intro,
html:not(.js) .founder{opacity:1;transform:none;}


/* =====================================================================
   SEKTION 8 — ZERTIFIKATE
   Helle, dezente Sektion (Cloud dominant, viel Weißraum). Nachweise in
   einheitlich hohen, gerahmten Karten (Karten-Vokabular aus §7). Idee:
   „schwarz auf weiß" = belegt statt behauptet (CI-Ton). Flash NUR im Kicker;
   reale Badges dezent (opacity) → Hover voll + Lift (echot §4-Logos);
   Platzhalter = gestrichelter Rahmen + HOHLER Fog-Ring (leerer Slot) statt
   gefülltem Flash-Punkt → eigene Stelle im Punkt-System der Seite.
   ===================================================================== */
.certs{
  background:var(--cloud);
  color:var(--text);
  padding-block:clamp(4.5rem,11vh,8rem);
}

/* Kicker (Muster wie §5/§6/§7, linksbündig) + Flash-Punkt */
.certs__kicker{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
}
.certs__kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}

/* Überschrift unter dem Kicker (lowercase Wide Black + Flash-Schlusspunkt) */
.certs__title{
  margin-top:clamp(.75rem,2vh,1.1rem);
  max-width:20ch;
  font-size:var(--fs-h2);
  line-height:1.0;letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--text);
}
.certs__title-dot{color:var(--accent);}   /* Flash-Schlusspunkt (roter Faden der Seite) */

/* Raster: gleich breite Karten (kein Shrink-Mismatch → alle Badges exakt gleich groß),
   LINKSBÜNDIG direkt unter der Überschrift (Auftraggeber-Wunsch: nicht mehr zentriert).
   Badges brechen ab Platzmangel um und bleiben dabei linksbündig (justify-content:flex-start). */
.certs__grid{
  margin-top:clamp(2rem,5vh,3.25rem);
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:clamp(1rem,2.2vw,1.75rem);
}

/* Eine Badge-Karte: gerahmt, einheitliche Höhe rein via aspect-ratio, viel
   Innenraum. position:relative = Bezug für das absolut platzierte Badge. */
.cert__frame{
  position:relative;
  display:grid;place-items:center;   /* zentriert den Platzhalter-Text */
  aspect-ratio:4 / 3;
  background:var(--cloud);
  border:1px solid rgba(23,23,23,.08);
  border-radius:var(--radius-md);
  box-shadow:0 18px 40px -30px rgba(23,23,23,.3);
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
/* Badge: absolut im Rahmen (inset:0 + 100%) → liegt AUSSERHALB des Grid-Flows
   und kann die Karten-Höhe nie verändern → einheitliche Höhe garantiert
   (unabhängig vom Seitenverhältnis des Badges). object-fit:contain zeigt es
   vollständig, das padding gibt den Innen-Weißraum. Dezent (opacity) → Hover
   voll (echot §4). */
.cert__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  padding:clamp(.35rem,1.1vw,.7rem);  /* Badges füllen die Karten stärker (Auftraggeber-Wunsch) */
  object-fit:contain;object-position:center;
  opacity:.9;
  transition:opacity var(--dur-mid) var(--ease-out);
}
@media (hover:hover){
  .cert:not(.cert--empty):hover .cert__frame{
    transform:translateY(-4px);
    box-shadow:0 26px 50px -30px rgba(23,23,23,.4);
  }
  .cert:not(.cert--empty):hover .cert__img{opacity:1;}
}

/* --- Entrance: gestaffeltes Rise+Fade (.is-in via JS) — Reveal-Vokabular der Seite */
.cert{
  /* feste, gleiche Breite (kein Grow/Shrink) → alle Karten identisch groß,
     egal ob 3 in einer Reihe oder umgebrochen; max-width 100% gegen Überlauf
     auf sehr schmalen Screens. */
  flex:0 0 clamp(200px,22vw,224px);
  max-width:100%;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.certs.is-in .cert{
  opacity:1;transform:none;
  transition-delay:calc(.05s + var(--i,0) * .07s);
}
/* Fallback: ohne JS → sofort sichtbar */
html:not(.js) .cert{opacity:1;transform:none;}

/* Mobil: Badges zentriert in der Mitte (Auftraggeber-Wunsch) statt linksbündig. */
@media (max-width:600px){
  .certs__grid{justify-content:center;}
}


/* =====================================================================
   SEKTION 8.5 — FAQ / AKKORDEON
   Helle, dezente Sektion (Cloud dominant). Karten-Vokabular der Seite (§7/§8).
   Creative-Tie-in: beim Öffnen gleitet ein Flash-Punkt vor die Frage + Text
   rückt ein (echot §5-Hover & §1-Link-Punkte), das „+" dreht zum „×". Reveal
   smooth via grid-template-rows 0fr→1fr (+ Inhalt-Fade). Flash bewusst nur als
   Signal (Kicker-/Titel-Punkt + Open-Punkt) — keine Fläche.
   ===================================================================== */
.faq{
  background:var(--cloud);
  color:var(--text);
  padding-block:clamp(4.5rem,11vh,8rem);
}
.faq__inner{
  max-width:62rem;                 /* schmälere, gut lesbare Spalte, zentriert */
}

/* Intro: linksbündig (einheitlich mit allen Sektionstiteln), Kicker + lowercase-Wide-Black-Headline */
.faq__head{
  text-align:left;
  margin-bottom:clamp(2.25rem,5vh,3.5rem);
}
.faq__kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
}
.faq__kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.faq__title{
  margin-top:clamp(.75rem,2vh,1.1rem);
  font-size:var(--fs-h2);
  line-height:.98;letter-spacing:-.02em;
  color:var(--text);
}
.faq__title-dot{color:var(--accent);}   /* Flash-Schlusspunkt (roter Faden der Seite) */

/* Liste: gestapelte Karten mit gleichmäßigem Abstand */
.faq__list{
  display:flex;flex-direction:column;
  gap:clamp(.75rem,1.6vw,1.1rem);
}

/* Eine Karte (Vokabular aus §7/§8) */
.faq__item{
  position:relative;
  background:var(--cloud);
  border:1px solid rgba(23,23,23,.08);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 34px -28px rgba(23,23,23,.28);
  overflow:hidden;
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}

/* Hover-Rand als „Strahl aus zwei Richtungen" in NOPO-Gelb (Auftraggeber-Wunsch).
   Eine conic-gradient mit ZWEI Flash-Bögen (180° versetzt) liegt als Rahmen-Ring
   (Padding + Mask = nur der Rand) auf der Karte und rotiert beim Hover → zwei
   Lichtpunkte jagen aus zwei Richtungen um die Kachel. @property animiert den
   Winkel smooth; ohne Support bleibt der Rand statisch (zwei Flash-Glints). */
@property --beam-angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.faq__item::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.5px;                    /* Randstärke des Strahls */
  background:conic-gradient(from var(--beam-angle),
    transparent 0deg, var(--accent) 24deg, transparent 64deg,
    transparent 180deg, var(--accent) 204deg, transparent 244deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease-out);
  pointer-events:none;
}
@keyframes faq-beam{ to{ --beam-angle:360deg; } }
.faq__item.is-open{
  border-color:rgba(23,23,23,.14);
  box-shadow:0 22px 46px -28px rgba(23,23,23,.34);
}

/* Frage = Heading + Button (volle Klick-/Tastaturfläche) */
.faq__q{margin:0;}
.faq__trigger{
  width:100%;
  display:flex;align-items:center;
  gap:0;
  text-align:left;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.25rem,2.6vw,2rem);
  color:var(--text);
  cursor:pointer;
}
/* Flash-Punkt im linken Gutter: 0 Breite/unsichtbar bis offen → dann ploppt er
   ein und schiebt die Frage leicht nach rechts (echot §5). */
.faq__dot{
  width:0;height:.5rem;border-radius:999px;
  background:var(--accent);flex:0 0 auto;
  opacity:0;transform:scale(.4);
  transition:width var(--dur-mid) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out),
             margin var(--dur-mid) var(--ease-out),
             transform var(--dur-fast) var(--ease-back);
}
.faq__item.is-open .faq__dot{
  width:.5rem;opacity:1;transform:none;margin-right:.7rem;
}
.faq__q-text{
  flex:1 1 auto;
  font-family:var(--font-display);
  font-weight:900;font-stretch:expanded;
  text-transform:none;letter-spacing:-.01em;   /* Fragen NORMAL geschrieben (Auftraggeber-Wunsch), nicht lowercase */
  font-size:var(--fs-h4);
  line-height:1.18;
  color:var(--text);
}

/* „+" → „×": zwei Balken, beim Öffnen dreht der ganze Marker 135° */
.faq__icon{
  position:relative;flex:0 0 auto;
  width:22px;height:22px;
  margin-left:clamp(1rem,2.4vw,1.75rem);
  transition:transform var(--dur-mid) var(--ease-out);
}
.faq__icon::before,
.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--text);border-radius:2px;
}
.faq__icon::before{width:2px;height:18px;transform:translate(-50%,-50%);}   /* senkrecht */
.faq__icon::after{width:18px;height:2px;transform:translate(-50%,-50%);}    /* waagerecht */
.faq__item.is-open .faq__icon{transform:rotate(135deg);}

/* Hover (dezent): Karte hebt den Rahmen leicht an, der Marker färbt zum Akzent-
   nahen Midnight … bewusst kein Flash auf Hover (Flash = nur Open-Signal). */
@media (hover:hover){
  .faq__item:hover{border-color:rgba(23,23,23,.18);}
  .faq__item:hover::before{opacity:1;animation:faq-beam 3s linear infinite;}
  .faq__trigger:hover .faq__icon{transform:scale(1.08);}
  .faq__item.is-open .faq__trigger:hover .faq__icon{transform:rotate(135deg) scale(1.08);}
}

/* Antwort: smooth über grid-template-rows 0fr → 1fr */
.faq__answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-mid) var(--ease-out);
}
.faq__item.is-open .faq__answer{grid-template-rows:1fr;}
.faq__answer-inner{
  overflow:hidden;min-height:0;
  opacity:0;
  padding-inline:clamp(1.25rem,2.6vw,2rem);   /* horizontaler Innenabstand am Container → p & Listen bündig */
  transition:opacity var(--dur-mid) var(--ease-out);
}
.faq__item.is-open .faq__answer-inner{opacity:1;transition-delay:.08s;}

/* Antwort-Inhalt — vertikaler Abstand via first/last child, damit der
   grid-rows-Collapse weiter sauber auf 0 geht */
.faq__answer-inner > :first-child{padding-top:.25rem;}
.faq__answer-inner > :last-child{padding-bottom:clamp(1.25rem,2.6vw,1.75rem);}
.faq__answer p{
  font-size:var(--fs-500);line-height:1.65;color:var(--text);   /* Prosa einheitlich wie Leads/Rechtstexte */
  max-width:64ch;
}
.faq__answer p + *{margin-top:.9rem;}
.faq__answer strong{font-weight:700;}
/* Listen: Text leicht zum Absatz eingerückt, Marker sitzt IM Einzug (ragt nicht
   weit nach links raus). KEIN display:flex (das versetzt die Marker). ul.../ol...
   = Spezifität (0,1,1) → schlägt den ul[class]-Reset. */
ul.faq__bullets,
ol.faq__steps{
  max-width:64ch;
  margin:0;
  padding-left:1.4em;            /* Marker liegt in diesem Einzug, bündig zum Absatz */
  list-style-position:outside;
}
ul.faq__bullets{list-style:disc;}
ol.faq__steps{list-style:decimal;}
.faq__bullets li,
.faq__steps li{
  font-size:var(--fs-500);       /* gleich wie die Antwort-Absätze */
  line-height:1.55;color:var(--text);
  padding-left:.35em;            /* kleiner Abstand Marker → Text */
}
.faq__bullets li + li,
.faq__steps li + li{margin-top:.55rem;}
.faq__bullets li::marker,
.faq__steps li::marker{color:var(--text-muted);}

/* Heller Fokus (auf Cloud) */
.faq__trigger:focus-visible{outline:2px solid var(--midnight);outline-offset:-3px;border-radius:var(--radius-md);}

/* --- Entrance: gestaffeltes Rise+Fade (.is-in via JS) ---------------- */
.faq__head,
.faq__item{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
.faq.is-in .faq__head{opacity:1;transform:none;transition-delay:.05s;}
.faq.is-in .faq__item{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .07s);}

/* Fallbacks: ohne JS → sofort sichtbar UND Antworten offen lesbar */
html:not(.js) .faq__head,
html:not(.js) .faq__item{opacity:1;transform:none;}
html:not(.js) .faq__answer{grid-template-rows:1fr;}
html:not(.js) .faq__answer-inner{opacity:1;}
html:not(.js) .faq__icon{display:none;}


/* =====================================================================
   SEKTION 9 — CTA / KONTAKT
   Midnight-Card auf heller Seite (Vibe `cta-vorlage.webp`). Inhalt links-
   editorial (wie Hero), helle Pill. Der bunte Verlauf der Vorlage → EIN
   atmosphärischer Flash-Glow unten-rechts (kein Marken-Verlauf, Flash bleibt
   Signal). Diese Sektion ist `id="kontakt"` (Ziel aller „anfragen"-Buttons).
   ===================================================================== */
.cta{
  background:var(--cloud);
  color:var(--text);
  padding-block:clamp(4rem,10vh,7.5rem);
}
.cta__card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:clamp(22px,3vw,36px);
  padding:clamp(2.75rem,6.5vw,5.5rem) clamp(2.25rem,6vw,5rem);
  min-height:clamp(21rem,42vw,33rem);            /* etwas höher (Auftraggeber-Wunsch) */
  color:var(--cloud);
  /* Basis Midnight + EIN atmosphärischer Flash-Glow (unten-rechts, wie der
     Bloom der Vorlage) — Flash als Stimmung, nicht als Fläche auf der Marke. */
  background:
    radial-gradient(115% 135% at 100% 118%, rgba(230,250,111,.22), rgba(230,250,111,.06) 32%, transparent 58%),
    linear-gradient(135deg,#1c1c1c 0%,#101010 55%,#0b0b0b 100%);
  /* Inhalt links-editorial, Button rechts DANEBEN — vertikal mittig zum Text
     (Auftraggeber-Wunsch). Unter 760px stapelt die Card (Button unter den Text). */
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1.75rem,5vw,3.5rem);
}
@media (max-width:760px){
  .cta__card{
    flex-direction:column;
    align-items:center;        /* Inhalt mittig (Auftraggeber-Wunsch Mobil) */
    justify-content:center;
    text-align:center;
    gap:clamp(1.75rem,4vw,2.5rem);
  }
  .cta__kicker{justify-content:center;}
  .cta__lead{margin-inline:auto;}
}
/* Spotlight-Hover: weicher Flash-Schein folgt dem Cursor (JS setzt --mx/--my).
   Liegt über dem statischen Glow, unter dem Inhalt (z-index:1). Nur mit echtem
   Zeiger sichtbar; per overflow:hidden auf die Card-Rundung beschnitten. */
.cta__card::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),
            rgba(230,250,111,.18), rgba(230,250,111,.06) 40%, transparent 72%);
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease-out);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .cta__card:hover::before{opacity:1;}
}
.cta__content{
  position:relative;z-index:1;
  max-width:54ch;
}
.cta__kicker{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:rgba(255,255,255,.62);
}
.cta__kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.cta__title{
  margin-top:clamp(1rem,2.5vh,1.5rem);
  font-size:var(--fs-h2);
  line-height:.98;letter-spacing:-.02em;
  color:var(--cloud);
}
.cta__dot{color:var(--accent);}   /* Flash-Schlusspunkt (Signature) */
.cta__lead{
  margin-top:clamp(1rem,2.5vh,1.5rem);
  max-width:48ch;
  font-size:var(--fs-500);line-height:1.6;
  color:rgba(255,255,255,.78);
}
.cta__actions{
  position:relative;z-index:1;
  flex:0 0 auto;              /* Button-Spalte rechts, schrumpft nicht */
  display:flex;flex-direction:column;align-items:center;
  /* vertikal mittig zum Text via .cta__card align-items:center (Default-align-self) */
}
/* Button größer & proportional zur großen Card (em-basiertes Padding/Dot
   skaliert mit font-size mit; zusätzlich chunkigeres Padding für mehr Präsenz). */
.cta__actions .btn{
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  padding:1.05em 1.9em;
}
/* Gestapelt (Card wird eng) → Button unter den Text, mittig zentriert */
@media (max-width:760px){
  .cta__actions{align-self:center;}
}

/* Heller Fokus auf der dunklen Card */
.cta__card a:focus-visible{outline:2px solid var(--flash);outline-offset:3px;border-radius:6px;}

/* Light-Pill = invertierter Hero-Primary: Cloud auf Midnight + Flash-Punkt */
.btn--light{background:var(--cloud);color:var(--midnight);}
.btn--light:hover,
.btn--light:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -16px rgba(0,0,0,.6);
}
.btn--light:hover .btn__dot,
.btn--light:focus-visible .btn__dot{transform:scale(1.55);}

/* Header-Kontrast über dunklen Sektionen (§4 Midnight-Band + §9 CTA):
   Wortmarke schaltet auf Cloud, solange eine [data-dark-section] unter dem
   Header liegt (konfliktfrei neben .over-media überm Hero-Video; JS togglet). */
.site-header.over-dark .brand{color:var(--cloud);}

/* --- Entrance: Card fadet/steigt beim Eintritt (.is-in via JS) ------- */
.cta__card{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.cta.is-in .cta__card{opacity:1;transform:none;}
html:not(.js) .cta__card{opacity:1;transform:none;}


/* =====================================================================
   SEKTION 10 — FOOTER (glowing footer)
   Midnight-Basis als Fuß der Seite. Der „Glow" der Referenz = EIN dezenter,
   atmosphärischer Flash-Schein, der vom Wortmarken-Punkt ausgeht (kein
   Marken-Verlauf, Pulse nie zusätzlich). Oben-links die Wortmarke `nopo.` als
   Brand-Logo (mit Flash-Punkt) + Socials, rechts die Link-Spalten; der Flash-
   Punkt landet zuletzt (schließt die Signature). data-dark-section → Header-
   Wortmarke wird Cloud.
   ===================================================================== */
.site-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;                 /* Glow sauber beschnitten (kein H-Overflow) */
  background:linear-gradient(180deg,#141414 0%,#0c0c0c 100%);
  color:var(--cloud);
  padding-block:clamp(4rem,9vh,7rem) clamp(2rem,4vh,3rem);
}
/* Atmosphärischer Flash-Schein — geht von oben-links aus (dort sitzt der
   Wortmarken-Punkt) und „glüht" hinter dem Logo. Sehr dezent (Flash = Signal). */
.footer__glow{
  position:absolute;z-index:-1;
  left:-6%;top:-14%;
  width:min(70vw,620px);aspect-ratio:1/1;
  background:radial-gradient(circle at center,
            rgba(230,250,111,.13), rgba(230,250,111,.045) 42%, transparent 70%);
  pointer-events:none;
}

/* --- Funktionsspalten ------------------------------------------------- */
.footer__cols{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.25rem,5vw,3.5rem);
}
@media (min-width:560px){
  .footer__cols{grid-template-columns:1fr 1fr;}
  .footer__col--lead{grid-column:1 / -1;}
}
@media (min-width:920px){
  .footer__cols{grid-template-columns:1.7fr 1fr 1fr;}
  .footer__col--lead{grid-column:auto;}
}

.footer__socials{display:flex;gap:var(--sp-2);margin-top:clamp(1.25rem,3vw,1.75rem);margin-left:-10px;}
.footer__socials a{
  display:grid;place-items:center;width:44px;height:44px;   /* Touch-Target */
  color:var(--fog);                                          /* Fog→Cloud, KEIN Flash (wie §1; Flash bleibt Signal) */
  transition:color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
.footer__socials a:hover,
.footer__socials a:focus-visible{color:var(--cloud);transform:translateY(-2px);}
.footer__socials svg{width:20px;height:20px;}

.footer__heading{
  /* kleiner Label-Kicker, KEIN Display-Headline (überschreibt die globale h2-Regel) */
  font-family:var(--font-display);
  font-weight:500;font-stretch:normal;
  text-transform:lowercase;letter-spacing:.04em;line-height:1;
  font-size:var(--fs-300);color:var(--fog);
  margin-bottom:clamp(1rem,2.2vw,1.4rem);
}
.footer__links{display:flex;flex-direction:column;gap:.7rem;}
.footer__links a{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-size:var(--fs-400);color:rgba(255,255,255,.72);
  transition:color var(--dur-fast) var(--ease-out);
}
/* Flash-Punkt im linken Gutter beim Hover — echot §5/§8.5 (das Punkt-System) */
.footer__links a::before{
  content:"";flex:0 0 auto;
  width:0;height:.42em;border-radius:50%;
  background:var(--accent);opacity:0;
  transition:width var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out),
             margin-right var(--dur-fast) var(--ease-out);
}
.footer__links a:hover,
.footer__links a:focus-visible{color:var(--cloud);}
.footer__links a:hover::before,
.footer__links a:focus-visible::before{width:.42em;opacity:1;margin-right:.5em;}

/* --- Wortmarke `nopo.` als Brand-Logo (oben-links) ------------------- */
.footer__wordmark{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:900;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.5rem,6vw,3.75rem);
  color:var(--cloud);
}
.footer__dot{
  display:inline-block;
  color:var(--accent);
  /* der Punkt „glüht" — Flash als Schein, nicht als Fläche auf der Marke */
  text-shadow:0 0 .14em rgba(230,250,111,.55), 0 0 .42em rgba(230,250,111,.32);
}

/* --- Basiszeile ------------------------------------------------------- */
.footer__base{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  justify-content:space-between;align-items:center;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  padding-top:clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-200);color:rgba(255,255,255,.5);
}

/* Heller Fokus auf dunklem Grund */
.site-footer a:focus-visible{outline:2px solid var(--flash);outline-offset:3px;border-radius:6px;}

/* --- Entrance: Spalten staffeln (Wortmarke reitet mit ihrer Spalte), der
       Punkt landet ZULETZT (echot die Hero-Signature „der Punkt zuletzt"). -- */
.footer__col{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0)*.1s);
}
.footer__dot{
  opacity:0;transform:scale(.2);
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-back);
}
.site-footer.is-in .footer__col{opacity:1;transform:none;}
.site-footer.is-in .footer__dot{opacity:1;transform:none;transition-delay:.55s;}   /* zuletzt */

/* Fallback: ohne JS / reduced-motion → sofort sichtbar */
html:not(.js) .footer__col,
html:not(.js) .footer__dot{opacity:1;transform:none;}


/* =====================================================================
   GLOBAL — CUSTOM CURSOR (Flash-Punkt)
   Minimalistischer Punkt in CI-Gelb (Flash), folgt dem Zeiger (Position via
   JS-transform, s. script.js). Führt das Punkt-System der Seite fort
   („der Punkt als Hauptdarsteller"). Über interaktiven Elementen wächst er
   zum hohlen Flash-Ring (Klasse .is-active aus dem JS). Der native Zeiger wird
   NUR ausgeblendet, wenn das JS den Cursor auf einem echten Zeiger-Gerät
   aktiviert hat (html.has-cursor) → Touch/ohne JS behalten den nativen Cursor
   (Progressive Enhancement, wie html.js sonst auf der Seite).
   ===================================================================== */
html.has-cursor,
html.has-cursor *{cursor:none;}

.cursor{
  position:fixed;
  top:0;left:0;
  z-index:var(--z-cursor);
  pointer-events:none;            /* nie klick-/hover-blockierend */
  opacity:0;                      /* erst sichtbar, wenn JS die 1. Position kennt */
  will-change:transform;
  transition:opacity .25s var(--ease-out);
}
html.has-cursor .cursor.is-visible{opacity:1;}

/* Der eigentliche Punkt — zentriert auf den vom JS bewegten Ankerpunkt. */
.cursor::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:16px;height:16px;
  margin:-8px 0 0 -8px;           /* zentriert: halbe Größe */
  border-radius:50%;
  background:var(--accent);       /* Flash #e6fa6f (Brand-Gelb) */
  box-shadow:0 0 0 1px rgba(23,23,23,.16);   /* dezenter Ring → sichtbar auf Cloud */
  transition:width var(--dur-fast) var(--ease-out),
             height var(--dur-fast) var(--ease-out),
             margin var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}

/* Hover über interaktive Elemente (a, button, …): Punkt wächst zum hohlen
   Flash-Ring, der das Element „einrahmt" — Flash bleibt Flash (kein difference). */
.cursor.is-active::after{
  width:40px;height:40px;
  margin:-20px 0 0 -20px;
  background-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--accent);
}


/* =====================================================================
   GLOBAL — ANFRAGE / CHAT (Launcher + Drawer-Formular)
   Rechts an die Seite geklemmter Launcher: Midnight-Anfrage-Symbol auf gelber
   Flash-Raute (rotierte, gerundete Quadrat-Fläche; Icon bleibt aufrecht). Klick
   öffnet ein Drawer-Formular von rechts (Overlay + Panel). Brand-Vokabular:
   lowercase-Wide-Black-Titel + Flash-Punkt, Karten-Hairlines, Flash als Signal.
   ===================================================================== */

/* --- Launcher: gelbe Raute mit Send-Symbol, unten rechts -------------- */
.inquiry-launcher{
  position:fixed;
  right:clamp(1rem,2.5vw,2.25rem);
  bottom:clamp(1rem,3vh,2.25rem);
  z-index:var(--z-launcher);
  width:clamp(82px,8.5vw,96px);     /* ~15% kleiner (Auftraggeber-Wunsch) */
  height:clamp(82px,8.5vw,96px);
  display:grid;place-items:center;
  color:var(--midnight);
  /* Erscheint erst beim Scrollen (JS togglet .is-revealed) */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.85);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-back),
             visibility 0s linear var(--dur-mid);
}
.inquiry-launcher.is-revealed{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-back),
             visibility 0s linear 0s;
}
/* Gelbe Raute = rotiertes, gerundetes Quadrat (Brand-Raute) */
.inquiry-launcher__diamond{
  position:absolute;
  width:72%;height:72%;left:14%;top:14%;
  background:var(--accent);
  border-radius:18px;
  transform:rotate(45deg);
  box-shadow:0 16px 34px -14px rgba(23,23,23,.5), 0 4px 12px -6px rgba(23,23,23,.4);
}
/* Send-Message-Symbol (Papierflieger) aufrecht mittig in der Raute */
.inquiry-launcher__icon{
  position:relative;
  width:clamp(22px,2.3vw,27px);height:auto;
  color:var(--midnight);
}
/* Hover/Fokus: pulsiert + wird etwas größer (sonst nichts) */
@keyframes inquiry-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}
@media (hover:hover) and (pointer:fine){
  .inquiry-launcher.is-revealed:hover,
  .inquiry-launcher.is-revealed:focus-visible{animation:inquiry-pulse 1.1s var(--ease-out) infinite;}
}
.inquiry-launcher:focus-visible{outline:none;}

/* --- Drawer (Overlay + Panel) --------------------------------------- */
.inquiry[hidden]{display:none;}
.inquiry{
  position:fixed;inset:0;z-index:var(--z-modal);
}
.inquiry__overlay{
  position:absolute;inset:0;
  background:rgba(15,15,15,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease-out);
}
.inquiry.is-open .inquiry__overlay{opacity:1;}

.inquiry__panel{
  position:absolute;top:0;right:0;
  height:100%;
  width:min(94vw,460px);
  background:var(--cloud);
  color:var(--text);
  box-shadow:-30px 0 80px -30px rgba(23,23,23,.5);
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,4vw,2.5rem);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-expand);
}
.inquiry.is-open .inquiry__panel{transform:none;}

/* Kopf: Kicker + lowercase-Wide-Black-Titel + Flash-Punkt + Close */
.inquiry__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(1.25rem,3vh,1.75rem);
}
.inquiry__kicker{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.04em;
  font-size:var(--fs-300);color:var(--text-muted);
}
.inquiry__kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.inquiry__title{
  margin-top:.4rem;
  font-size:var(--fs-h3);
  line-height:1.0;letter-spacing:-.02em;color:var(--text);
}
.inquiry__title-dot{color:var(--accent);}
.inquiry__close{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--radius-pill);
  color:var(--text);
  box-shadow:inset 0 0 0 1.5px rgba(23,23,23,.16);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.inquiry__close svg{width:18px;height:18px;}
.inquiry__close:hover,
.inquiry__close:focus-visible{
  background:var(--accent);color:var(--midnight);
  box-shadow:inset 0 0 0 1.5px var(--accent);transform:rotate(90deg);
}

/* --- Formular -------------------------------------------------------- */
.inquiry__form{display:flex;flex-direction:column;gap:clamp(.9rem,2vh,1.2rem);}
.inquiry__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
@media (max-width:380px){.inquiry__row{grid-template-columns:1fr;}}
.inquiry__field{display:flex;flex-direction:column;gap:.4rem;border:0;padding:0;margin:0;min-width:0;}
.inquiry__field label,
.inquiry__choice legend{
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.02em;
  font-size:var(--fs-200);color:var(--text-muted);
  padding:0;
}
.inquiry__field input,
.inquiry__field select,
.inquiry__field textarea{
  width:100%;
  font-family:var(--font-body);font-size:var(--fs-400);
  color:var(--text);background:var(--cloud);
  border:1px solid rgba(23,23,23,.16);
  border-radius:var(--radius-md);
  padding:.7em .85em;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.inquiry__field textarea{resize:vertical;min-height:5.5rem;line-height:1.5;}
.inquiry__field input:focus,
.inquiry__field select:focus,
.inquiry__field textarea:focus{
  outline:none;
  border-color:var(--midnight);
  box-shadow:0 0 0 3px rgba(230,250,111,.45);   /* Flash-Fokusring */
}

/* Segmented Control: Mail / Anruf / Meeting */
.inquiry__segments{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.inquiry__segment{position:relative;cursor:pointer;}
.inquiry__segment input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.inquiry__segment span{
  display:flex;align-items:center;justify-content:center;
  padding:.6em .5em;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-stretch:expanded;
  font-size:var(--fs-300);text-transform:none;
  border:1px solid rgba(23,23,23,.16);color:var(--text);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.inquiry__segment input:checked + span{
  background:var(--midnight);color:var(--cloud);border-color:var(--midnight);
}
.inquiry__segment input:focus-visible + span{box-shadow:0 0 0 3px rgba(230,250,111,.55);}
@media (hover:hover){
  .inquiry__segment:hover span{border-color:var(--midnight);}
}

.inquiry__when[hidden]{display:none;}
.inquiry__submit{margin-top:.4rem;align-self:flex-start;}
.inquiry__note{font-size:var(--fs-200);color:var(--text-muted);}
.inquiry__note.is-error{color:var(--pulse);}

/* --- Contact Form 7: erzeugtes Markup auf das Bespoke-Design mappen ---------
   Nur im WordPress-Theme aktiv (statische Seite hat keine .wpcf7-Elemente).
   CF7 umschließt jedes Feld mit <span.wpcf7-form-control-wrap> und liefert die
   Radios als <span.wpcf7-list-item>. Hier nur Struktur-Angleich, damit das
   bestehende .inquiry__*-Styling 1:1 greift. */
.inquiry__form .wpcf7-form-control-wrap{display:block;width:100%;}
/* Segmented Control (reply): CF7-Radio-DOM wie .inquiry__segment behandeln */
.inquiry__choice .wpcf7-radio{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.inquiry__choice .wpcf7-list-item{position:relative;margin:0;}
.inquiry__choice .wpcf7-list-item > label{display:block;margin:0;cursor:pointer;}
.inquiry__choice .wpcf7-list-item input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.inquiry__choice .wpcf7-list-item-label{
  display:flex;align-items:center;justify-content:center;
  padding:.6em .5em;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-stretch:expanded;
  font-size:var(--fs-300);text-transform:none;
  border:1px solid rgba(23,23,23,.16);color:var(--text);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.inquiry__choice input:checked + .wpcf7-list-item-label{
  background:var(--midnight);color:var(--cloud);border-color:var(--midnight);
}
.inquiry__choice input:focus-visible + .wpcf7-list-item-label{box-shadow:0 0 0 3px rgba(230,250,111,.55);}
@media (hover:hover){
  .inquiry__choice .wpcf7-list-item:hover .wpcf7-list-item-label{border-color:var(--midnight);}
}
/* Validierungs-Hinweise + Response-Output an die Brand angleichen */
.inquiry__form .wpcf7-spinner{margin:.6rem auto 0 .4rem;}
.inquiry__form .wpcf7-not-valid-tip{color:var(--pulse);font-family:var(--font-body);font-size:var(--fs-200);}
.inquiry__form .wpcf7-not-valid{border-color:var(--pulse)!important;}
.inquiry__form .wpcf7-response-output{
  margin:.6rem 0 0;padding:.6em .85em;border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--fs-200);line-height:1.5;
  border:1px solid rgba(23,23,23,.16);color:var(--text-muted);
}
.inquiry__form .wpcf7-form.invalid .wpcf7-response-output,
.inquiry__form .wpcf7-form.unaccepted .wpcf7-response-output{border-color:var(--pulse);color:var(--pulse);}
.inquiry__form .wpcf7-form.sent .wpcf7-response-output{border-color:var(--midnight);color:var(--text);}

/* --- CF7-Overlay: Lade-Status + animierte Erfolgs-Bestätigung ---------------
   EINHEITLICH über das Formular gelegt (Drawer UND Kontaktseite), per JS ins
   Sichtfeld gescrollt. Sofort beim Absenden ein Spinner, bei Erfolg der Haken. */
.inquiry__form{position:relative;}
.inquiry__sent{
  position:absolute;inset:0;z-index:6;border-radius:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:1.5rem;
  background:var(--cloud);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.inquiry__sent.is-visible{opacity:1;transform:none;}
.inquiry__sent-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(23,23,23,.16);border-top-color:var(--midnight);
  animation:inq-spin .7s linear infinite;
}
@keyframes inq-spin{to{transform:rotate(360deg);}}
.inquiry__sent-check{width:58px;height:58px;margin-bottom:.25rem;}
.inquiry__sent-check svg{width:100%;height:100%;display:block;overflow:visible;}
.inquiry__sent-check circle{
  fill:none;stroke:var(--flash);stroke-width:3;
  stroke-dasharray:151;stroke-dashoffset:151;
  transform:rotate(-90deg);transform-origin:50% 50%;
}
.inquiry__sent-check path{
  fill:none;stroke:var(--midnight);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
}
.inquiry__sent.is-done .inquiry__sent-check circle{animation:inq-sent-circle .42s var(--ease-out) forwards;}
.inquiry__sent.is-done .inquiry__sent-check path{animation:inq-sent-check .26s .34s var(--ease-out) forwards;}
@keyframes inq-sent-circle{to{stroke-dashoffset:0;}}
@keyframes inq-sent-check{to{stroke-dashoffset:0;}}
.inquiry__sent-title{
  margin:.1rem 0 0;
  font-family:var(--font-display);font-weight:800;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:-.01em;line-height:1;
  font-size:var(--fs-h3);color:var(--text);
}
.inquiry__sent-text{margin:0;font-size:var(--fs-300);color:var(--text-muted);}
@media (prefers-reduced-motion:reduce){
  .inquiry__sent{transition:opacity .15s linear;transform:none;}
  .inquiry__sent-spinner{animation-duration:1.2s;}
  .inquiry__sent-check circle,.inquiry__sent-check path{animation:none;stroke-dashoffset:0;}
}

/* Scroll-Sperre, solange der Drawer offen ist (per JS am <html>) */
html.inquiry-open,html.inquiry-open body{overflow:hidden;}


/* =====================================================================
   BREADCRUMBS — Service-/Leistungsseiten (Navigation dort eingeschränkt)
   Klarer Pfad oben (im Hero) + unten (heller Streifen vor dem Footer).
   CI: lowercase Wide, Fog-Pfad, „›"-Trenner, aktiver Eintrag trägt den
   Flash-Schlusspunkt wie die Headlines (echot „der Punkt als Hauptdarsteller").
   ===================================================================== */
.breadcrumb{
  font-family:var(--font-display);
  font-weight:500;font-stretch:expanded;
  text-transform:lowercase;letter-spacing:.02em;
  font-size:var(--fs-300);
}
.breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.3rem .55rem;
  margin:0;padding:0;list-style:none;
}
.breadcrumb__item{display:inline-flex;align-items:center;gap:.3rem .55rem;}
/* Trenner zwischen den Stationen */
.breadcrumb__item + .breadcrumb__item::before{
  content:"\203A";                 /* › */
  color:var(--fog);font-weight:700;
}
.breadcrumb a{
  color:var(--fog);text-decoration:none;
  transition:color .2s var(--ease-out,ease);
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible{color:var(--text);}
.breadcrumb__current{color:var(--text);}
.breadcrumb__dot{color:var(--accent);}   /* Flash-Schlusspunkt am aktiven Eintrag — wie die Seitentitel */

/* --- Variante im Hero: oben, unter dem Header, über dem dunklen Foto --- */
.breadcrumb--hero{
  position:absolute;left:0;right:0;
  top:calc(var(--header-inset) + var(--cap-h) + clamp(.6rem,1.8vw,1rem));
  z-index:2;
  padding-inline:var(--gutter-left);
}
.breadcrumb--hero a{color:rgba(255,255,255,.72);}
.breadcrumb--hero a:hover,
.breadcrumb--hero a:focus-visible{color:var(--cloud);}
.breadcrumb--hero .breadcrumb__current{color:var(--cloud);}
.breadcrumb--hero .breadcrumb__item + .breadcrumb__item::before{color:rgba(255,255,255,.5);}

/* --- Variante unten: schmaler heller Streifen vor dem Footer --- */
.breadcrumb--foot{
  background:var(--cloud);
  border-top:1px solid rgba(23,23,23,.08);
  padding-block:clamp(1.15rem,2.8vw,1.75rem);
  padding-inline:var(--gutter-left);
}


/* =====================================================================
   GLOBAL — MOBILE-FEINSCHLIFF (2026-06-17)
   Reine Mobil-/additive Korrekturen — die freigegebene Desktop-/Tablet-Optik
   (ab 641px) bleibt unangetastet. Quelle: Mobile-Audit + Web-Interface-
   Guidelines (Safe-Area, Overscroll, Tap-Verhalten s. Reset).
   ===================================================================== */

/* (1) GUTTER auf Mobil zurücknehmen. `--gutter-left` ist für die Desktop-
   Wortmarken-Freistellung auf clamp(1.5rem,12vw,10.5rem) bemessen — bei 375px
   ergibt 12vw aber 45px PRO SEITE (= 90px ≈ 24% der Breite), die Home-Inhalts-
   sektionen (Hero/Services/Projects/About/Certs/FAQ/CTA + der geteilte Footer)
   wirken dadurch eingeengt (nur ~285px Textspalte). Auf Mobil ist die
   Wortmarke klein und der Inhalt sitzt vertikal ohnehin unter dem Header →
   die große Freistellung ist unnötig. Token-Override gibt die Breite zurück
   (≈20–36px, im Rhythmus des normalen --gutter); greift überall, wo
   --gutter-left genutzt wird. */
@media (max-width:640px){
  :root{--gutter-left:clamp(1.25rem,6vw,2.25rem);}
}

/* (2) SAFE-AREA: fixe Elemente von Notch / Home-Indicator freihalten
   (Guideline „full-bleed needs env(safe-area-inset-*)"). Header oben/seitlich,
   Anfrage-Launcher unten/rechts — `max()` hält die bisherigen Mindestabstände,
   addiert aber den Geräte-Inset, wo nötig (v. a. Landscape-Notch + iOS-Home-Bar). */
.site-header{
  padding-top:max(var(--header-inset),env(safe-area-inset-top));
  padding-right:max(var(--header-inset),env(safe-area-inset-right));
  padding-left:max(var(--header-inset),env(safe-area-inset-left));
}
.inquiry-launcher{
  right:max(clamp(1rem,2.5vw,2.25rem),env(safe-area-inset-right));
  bottom:max(clamp(1rem,3vh,2.25rem),env(safe-area-inset-bottom));
}

/* (3) OVERSCROLL eindämmen: in Drawer & ausgeklapptem Menü kein Scroll-Chaining
   auf die (gesperrte) Seite dahinter (Guideline „overscroll-behavior:contain in
   modals/drawers/sheets"). */
.inquiry__panel,
.capsule-panel{overscroll-behavior:contain;}


/* =====================================================================
   GLOBAL — Reduced Motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}