/* =========================================================
   cre-ai.de — VAULT v3 „Dark Gallery"
   Durchgängig dunkle Bühne. Ein Akzent pro Section (Licht,
   nicht Fläche). Strenge Typo-Disziplin: Fraunces nur für
   Headlines in Creme, max. ein kursives Akzentwort.
   Generative Sigil-Canvases pro Themenfeld 01–05.
   Text-Inhalte 1:1, Layout editorial statt Kästchen.
   ========================================================= */

/* ---- Fonts (self-hosted, latin subset) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/Fraunces-var-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/Fraunces-Italic-var-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-var-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 92%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  /* ===== Tokens — hier alles drehen =====
     Aug 2026: zurück auf das bestehende Cream-Farbkonzept der Marke
     (BG #F7F1E8, Pink/Lime/Violet). Die Token-NAMEN bleiben aus der
     Noir-Phase erhalten (--ink = Bühne, --cream = Primärtext), damit die
     ~600 Verwendungen unangetastet bleiben — die Semantik ist jetzt nur
     invertiert: --ink ist hell, --cream ist dunkel. */
  --ink:      #F7F1E8;                  /* Bühne: Cream */
  --ink-2:    #FBF7F0;                  /* Sektions-Wechselton, Paper */
  --ink-3:    #EFE6D8;                  /* Formfelder, Flächen auf Cream */

  --mint:     #FF4FA3;                  /* Pink — AI-Akzent (Hero, Services) */
  --lila:     #6C63FF;                  /* Violet — Contact */
  --blau:     #5A50E0;                  /* Violet, dunkler als Lila — Advisory (auf Cream lesbar) */
  --peach:    #D7FF3F;                  /* Lime — Story */
  --amber:    #FFD23F;                  /* warmes Gelb — Lab */
  /* Band unter der Kopfzeile, gleiche Werte in style.css halten */
  --band-1: #FF4FA3;  --band-2: #D7FF3F;  --band-3: #FFD23F;  --band-4: #6C63FF;  --band-5: #241A8F;

  --cream:      #1F1F1F;                /* Headlines, Primärtext (near-black) */
  --body-text:  rgba(31,31,31,.78);     /* Fließtext */
  --soft-text:  rgba(31,31,31,.68);     /* Nebentext, Captions (.68 statt .55: auf Cream sonst nur 3.6:1) */
  --hair:       rgba(31,31,31,.13);     /* Haarlinien */

  --sec-accent: var(--mint);            /* wird pro Section überschrieben */
  /* Lesbare Variante des Section-Akzents für SCHRIFT. Bei hellen Akzenten
     (Lime/Amber auf Cream = 1.2:1) fällt sie auf near-black zurück, die
     bunte Farbe bleibt für Dots, Linien, Partikel und Highlight-Flächen. */
  --sec-accent-ink: var(--sec-accent);

  --ff-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --ff-body:    "Jost", "Jost Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw:   1200px;
  --pad-x:  clamp(22px, 5vw, 72px);
  --gap:    clamp(80px, 13vh, 180px);

  --radius: 2px;
  --t-fast: .28s cubic-bezier(.2,.65,.25,1);
  --t-med:  .6s  cubic-bezier(.2,.65,.25,1);
  --t-slow: 1s   cubic-bezier(.2,.65,.25,1);
}

/* Sektions-Akzente */
.hero          { --sec-accent: var(--mint); }
.sec--story    { --sec-accent: var(--peach); --sec-accent-ink: var(--cream); }
.sec--services { --sec-accent: var(--mint); }
.sec--advisory { --sec-accent: var(--blau); }
.sec--lab      { --sec-accent: var(--amber); --sec-accent-ink: var(--cream); }
.sec--contact  { --sec-accent: var(--lila); }

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--body-text);
  font-family: var(--ff-body);
  font-size: 17.9px;
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* dekorative Glow-Blobs (.sec__stage::before) sollen nicht horizontal scrollen */
}
img,svg,canvas { display: block; max-width: 100%; }

/* Layer-Reihenfolge (unten → oben):
   Body-BG · Milchglas (.stage-glass) · Partikel (#motion-stage) · Content/Text.
   So formieren sich die Partikel SICHTBAR über dem Milchglas, aber unter dem Text. */
.stage-glass {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* Dark-Theme-Relikt entschleiert: die Weiß-Layer legten auf Cream einen
     blassen Schleier über die ganze Seite. Nur der sanfte Blur bleibt. */
  background: radial-gradient(1200px 820px at 50% 26%, rgba(255,255,255,.18), transparent 70%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
/* Persistente Motion-Bühne: EIN fixed Canvas ÜBER dem Milchglas, unter dem Content */
#motion-stage {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
main, .site-footer { position: relative; z-index: 2; }
a { color: inherit; }
::selection { background: var(--mint); color: var(--ink); }

.skip-link {
  position: absolute; left: 8px; top: 8px;
  background: var(--cream); color: var(--ink);
  padding: 10px 14px; border-radius: var(--radius);
  transform: translateY(-200%); transition: transform var(--t-fast);
  z-index: 999; font-size: .9rem;
}
.skip-link:focus { transform: translateY(0); }

/* ======================= TYPO-SYSTEM =======================
   Feste Skala. Fraunces = Headlines, immer Creme.
   Akzentwörter: einheitlich kursiv in der Section-Akzentfarbe. */
h1,h2,h3,h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .004em;
  margin: 0;
  color: var(--cream);
  text-wrap: balance;
}
.h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .4em; }
.h3 { font-size: 1.45rem; margin: 0 0 16px; }
.h3 + .h3, p + .h3 { margin-top: 40px; }
.story__text .h3:nth-of-type(2) { margin-top: 44px; }

.lede, .section-lede {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: 58ch;
  color: var(--body-text);
  font-weight: 300;
}
.section-lede { margin-top: 1.1rem; color: var(--soft-text); }

.kicker {
  font-family: var(--ff-body);
  font-size: .78rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sec-accent);
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.5rem;
}
.kicker .dot,
.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; background: var(--sec-accent); }
/* Alt-Klassen aus i18n-Strings neutralisieren — keine Extra-Farben */
.dot--pink, .dot--lime, .dot--violet { background: var(--sec-accent); }

/* DAS Kernstück gegen „zu wild": alle Akzent-Klassen aus den
   i18n-Texten fallen auf EIN Verhalten zurück — kursiv, Section-Farbe. */
.accent,
.accent--pink, .accent--violet, .accent--lime {
  font-style: italic;
  font-weight: 400;
  color: var(--sec-accent);
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: normal;
}
/* Helle Akzente (Lime, Amber) sind auf Cream als SCHRIFTFARBE unlesbar
   (Kontrast ~1.2:1). In der Marke wirken sie ohnehin als HIGHLIGHT hinter
   near-black Text ("KI in the Front" im Referenz-Screenshot), nicht als
   Textfarbe. Pink/Violet bleiben normale Akzentschrift. */
.sec--story .accent, .sec--story .accent--pink, .sec--story .accent--violet, .sec--story .accent--lime,
.sec--lab   .accent, .sec--lab   .accent--pink, .sec--lab   .accent--violet, .sec--lab   .accent--lime {
  color: var(--cream);
  background: var(--sec-accent);
  padding: 0 .18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sec--story .kicker, .sec--lab .kicker { color: var(--cream); }

strong { font-weight: 500; color: var(--cream); }

/* ======================= HEADER / NAV ======================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: background var(--t-med), border-color var(--t-med), padding var(--t-med);
}
.site-header.is-scrolled {
  /* 29.09.2026, Sophy: "der Scroll schiebt sich in den Header". Bei .9 blieb
     der Inhalt durch die Kopfzeile sichtbar, besonders grosse Ueberschriften.
     Jetzt deckend; der Blur bleibt fuer die Kante darunter. */
  background: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hair);
  padding-top: 12px; padding-bottom: 12px;
}
/* Mehrfarbige Streifen-Leiste unter dem Header (Sophy: wie LinkedIn-Banner),
   dauerhaft sichtbar — Header ist fixed, ::after hängt direkt an der Unterkante. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 5px;
  background: linear-gradient(90deg,
    var(--band-1) 0 20%,
    var(--band-2) 20% 40%,
    var(--band-3) 40% 60%,
    var(--band-4) 60% 80%,
    var(--band-5) 80% 100%);   /* 29.09.: deutlich dunkler als --lila, vorher kaum unterscheidbar */
}
/* Wortmarke ist eine Raster-Grafik (Chiroto-Desktop-Lizenz: kein Font-
   Embedding, nur "rasterized form" — s. nicht-deployen/fonts/LICENSES.md). */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;  flex-shrink: 0; }
.brand__img { height: 30px; width: auto; display: block; }
.brand__mark { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--cream);
  border: 1px solid var(--hair); cursor: pointer;
  font-family: var(--ff-body); font-weight: 500; font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--radius);
  min-height: 40px;
  margin-left: auto; margin-right: 12px; flex-shrink: 0;
  opacity: .8;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}
.lang-toggle:hover { opacity: 1; border-color: rgba(31,31,31,.4); }
.lang-toggle .lang-on { color: var(--mint); }
.lang-toggle .lang-sep { opacity: .4; margin: 0 5px; }
@media (min-width: 1160px) { .lang-toggle { margin-left: 0; margin-right: 0; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; padding: 10px; cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--cream); transition: transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.primary-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--ink-2);
  max-height: 0; overflow-y: auto; overflow-x: hidden; transition: max-height var(--t-med);
}
.primary-nav[data-open="true"] { max-height: calc(100vh - 70px); }
.primary-nav > ul { list-style: none; margin: 0; padding: 14px var(--pad-x) 28px; display: flex; flex-direction: column; gap: 2px; }
.primary-nav > ul > li > a,
.primary-nav .sub-toggle {
  display: block; padding: 13px 0; text-decoration: none; font-weight: 400; font-size: 1.11rem;
  color: var(--cream); border-bottom: 1px solid var(--hair);
}
.primary-nav a.nav-cta { color: var(--mint); font-weight: 500; }

/* Umbruchpunkt der Hauptnavigation: 1160px. Muss mit css/style.css
   uebereinstimmen (dort steht die ausfuehrliche Begruendung). Die Startseite
   lag frueher bei 900px, die Unterseiten bei 1080 — dazwischen wechselte
   die Navigation beim Seitenwechsel ihr Aussehen.
   Drei Breakpoints tragen die Kopfzeile: .lang-toggle oben, diese
   Hauptnavigation und das Subnav-Panel weiter unten. Immer alle drei
   zugleich aendern, und dieselben drei in style.css mit. */
@media (min-width: 1160px) {
  .nav-toggle { display: none; }
  .primary-nav { position: static; max-height: none; overflow: visible; background: transparent; }
  .primary-nav > ul { flex-direction: row; gap: 30px; padding: 0; align-items: center; }
  /* siehe style.css: kein Umbruch innerhalb eines Punktes */
  .primary-nav > ul > li,
  .primary-nav > ul > li > a,
  .primary-nav .sub-toggle { white-space: nowrap; }
  .primary-nav > ul > li > a,
  .primary-nav .sub-toggle { border: 0; padding: 6px 0; position: relative; font-size: 1rem; color: rgba(31,31,31,.85); }
  .primary-nav > ul > li > a:hover { color: var(--cream); }
  .primary-nav > ul > li > a::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 1.5px; background: var(--mint);
    transition: width var(--t-fast);
  }
  .primary-nav > ul > li > a:hover::after, .primary-nav > ul > li > a:focus-visible::after { width: 100%; }
  .primary-nav a.nav-cta {
    border: 1px solid rgba(31,31,31,.35); padding: 8px 18px; border-radius: var(--radius); color: var(--cream);
  }
  .primary-nav a.nav-cta::after { display: none; }
  .primary-nav a.nav-cta:hover { background: var(--mint); color: var(--ink); border-color: var(--mint); }
}

/* Projects dropdown */
.has-sub { position: relative; }
.has-sub > a { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.has-sub > a .caret { display: inline-block; transition: transform var(--t-fast); font-size: .7em; }
.has-sub[data-open="true"] > a .caret { transform: rotate(180deg); }
/* 29.09.: enger, siehe style.css */
.subnav { list-style: none; padding: 4px 0 8px; margin: 0; display: none; }
.has-sub[data-open="true"] .subnav { display: grid; gap: 2px; }
.subnav a { padding: 6px 0 6px 18px !important; font-size: 1rem; line-height: 1.3; border-bottom: 0 !important; color: var(--soft-text); text-decoration: none; }
.subnav a:hover { color: var(--mint); }
.subnav__name { display: block; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.subnav__claim { display: block; font-weight: 400; font-size: .8rem; opacity: .6; margin-top: 0; text-decoration: none; }
@media (min-width: 1160px) {
  .has-sub::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 16px; }
  .subnav {
    /* rechtsbündig am Trigger: "Projekte" sitzt am rechten Rand, links
       verankert ragte das 290px-Panel bei ~900-1000px aus dem Viewport. */
    position: absolute; top: calc(100% + 14px); right: -18px; left: auto;
    background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--radius); padding: 8px;
    min-width: 290px;
    transform: translateY(-6px); opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
    display: grid !important; gap: 0;
  }
  /* 29.09.: kein :hover mehr — das Aufklappen steuert js/main.js mit
     Nachlauf, sonst schliesst das Panel, sobald der Zeiger den Reiter
     verlaesst, und die Unterpunkte sind kaum zu treffen. */
  .has-sub[data-open="true"] .subnav,
  .has-sub:focus-within .subnav { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .subnav { padding: 6px; }
  .subnav a { color: rgba(31,31,31,.85); padding: 7px 12px !important; border-radius: var(--radius); }
  .subnav a:hover { background: rgba(31,31,31,.07); color: var(--mint); }
}

/* Laserkatze-Chip in der Nav */
.brand-laserkatze {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  border: 1px solid rgba(31,31,31,.3); padding: 7px 15px !important; border-radius: var(--radius);
  color: var(--cream) !important; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.brand-laserkatze:hover { background: var(--amber); color: var(--ink) !important; border-color: var(--amber); }

/* ======================= BUTTONS (flach) ======================= */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 14px 26px; border-radius: var(--radius);
  font-family: var(--ff-body); font-weight: 500; font-size: 1rem; letter-spacing: .04em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* Auf Cream trägt Pink near-black Text (5.9:1); Cream-auf-Pink wären 2.7:1. */
.btn--primary { background: var(--mint); color: var(--cream); }
.btn--primary:hover { background: var(--cream); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(31,31,31,.35); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(31,31,31,.06); }
.btn--lime { background: var(--mint); color: var(--ink); }
.btn--lime:hover { background: var(--cream); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sec-accent, var(--mint)); outline-offset: 3px; border-radius: var(--radius);
}

/* ======================= HERO ======================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(120px, 18vh, 200px) var(--pad-x) clamp(80px, 12vh, 140px);
  overflow: hidden;
}
/* Hero-Anker: hier verdichtet sich die Formation der Motion-Bühne */
.hero__stage {
  position: absolute;
  right: 3vw; top: 16%;
  width: min(44vw, 680px); height: 62%;
  pointer-events: none;
}
@media (max-width: 900px) { .hero__stage { right: 0; width: 70vw; top: 40%; height: 50%; opacity: .8; } }
.hero__inner { position: relative; z-index: 2; max-width: 780px; width: 100%; margin: 0 auto; }
.hero__eyebrow {
  font-family: var(--ff-body);
  font-size: .82rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 32px; color: var(--soft-text);
}
.hero__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  line-height: 1.05; letter-spacing: .004em;
  margin: 0 0 32px; color: var(--cream);
}
.hero__title .line { display: block; opacity: 0; transform: translateY(18px); animation: lineIn 1s cubic-bezier(.2,.65,.25,1) forwards; }
.hero__title .line:nth-child(1) { animation-delay: .1s; }
.hero__title .line:nth-child(2) { animation-delay: .28s; }
.hero__title .line:nth-child(3) { animation-delay: .46s; }
.hero__title .line--small {
  font-size: .4em; font-style: italic; font-weight: 300;
  color: var(--soft-text); margin-top: .6em; line-height: 1.45; letter-spacing: .01em;
}
@keyframes lineIn { to { opacity: 1; transform: translateY(0); } }

.hero__lead {
  font-size: clamp(1rem, 1.35vw, 1.1rem); max-width: 56ch;
  margin: 0 0 40px; line-height: 1.72; color: var(--body-text); font-weight: 300;
}
.hero__lead a { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(32,255,202,.35); }
.hero__lead a:hover { border-bottom-color: var(--mint); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; color: var(--soft-text);
}
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* ======================= SECTION-SYSTEM ======================= */
.sec {
  padding: var(--gap) 0;
  border-top: 1px solid var(--hair);
}
/* Nicht mehr opak — sonst verdeckt die Section-Fläche die Partikel dahinter.
   Leichter Ton-Wechsel bleibt, Formation bleibt sichtbar. */
.sec--services, .sec--lab { background: rgba(255,255,255,.55); }

.sec__head {
  max-width: var(--maxw); margin: 0 auto clamp(40px, 6vh, 80px);
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1fr; gap: 36px; align-items: end;
}
@media (min-width: 900px) {
  .sec__head { grid-template-columns: 1fr minmax(260px, 340px); gap: 64px; }
}
.sec__head-text { max-width: 720px; }

/* Sigil-Bühne: generatives Symbol + dezenter Akzent-Glow */
.sec__stage {
  position: relative;
  width: 100%; max-width: 340px;
  aspect-ratio: 4 / 3;
  justify-self: start;
}
@media (min-width: 900px) { .sec__stage { justify-self: end; } }
.sec__stage::before {
  content: ""; position: absolute; inset: -18%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sec-accent) 12%, transparent), transparent 72%);
  pointer-events: none;
}
.sigil { position: relative; width: 100%; height: 100%; }

.sec__body { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

/* ======================= STORY ======================= */
.story__grid { display: grid; gap: clamp(44px, 6vw, 88px); grid-template-columns: 1fr; }
@media (min-width: 980px) { .story__grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.story__text p { margin: 0 0 1.2em; max-width: 62ch; }

.strengths { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 13px; }
.strengths li { padding-left: 28px; position: relative; color: var(--body-text); }
.strengths li::before { content: ""; position: absolute; left: 0; top: .74em; width: 14px; height: 1px; background: var(--sec-accent-ink); }
.strengths li span { font-weight: 500; color: var(--cream); }

/* TÜV-Rheinland-Prüfsiegel — Trust-Kachel, Siegel unverändert (TÜV-Vorgabe) */
.tuv-seal {
  display: inline-block; margin: 30px 0 0;
  max-width: 300px; width: 100%;
  border-radius: 10px; overflow: hidden;
  outline: 1px solid rgba(31,31,31,.25); outline-offset: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tuv-seal:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
.tuv-seal:focus-visible { outline: 2px solid var(--sec-accent); outline-offset: 2px; }
.tuv-seal img { display: block; width: 100%; height: auto; }

/* ======================= INTERLUDES (statt Kästen) ======================= */
.interlude {
  max-width: 760px;
  margin: clamp(64px, 10vh, 120px) auto 0;
  padding: clamp(40px, 6vh, 64px) var(--pad-x) 0;
  border-top: 1px solid var(--hair);
  text-align: center;
}
.interlude__kicker {
  font-size: .76rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sec-accent-ink); margin: 0 0 18px;
}
.interlude__intro {
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: 1.21rem; color: var(--soft-text); margin: 0 0 10px;
}
.interlude__line {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1; letter-spacing: .004em;
  color: var(--cream); margin: 0 0 14px;
  white-space: nowrap;            /* DELFINÖWIN / Towanda bleiben ein Wort */
}
/* word-pop-Teile als ein Wort zusammenhalten (DELFIN + ÖWIN), Baseline bündig */
.interlude__line .word-pop,
.interlude__line .word-pop--alt,
.interlude__line .towanda__word { display: inline-block; vertical-align: baseline; }
.interlude__line .word-pop--alt,
.interlude__line .towanda__word { font-style: italic; color: var(--sec-accent-ink); }
/* Helle Akzente tragen kein Wort — dort wird die Farbe zur Highlight-Fläche. */
.sec--story .interlude__line .word-pop--alt,
.sec--story .interlude__line .towanda__word,
.sec--lab   .interlude__line .word-pop--alt,
.sec--lab   .interlude__line .towanda__word {
  background: var(--sec-accent); padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Italic-Teil braucht minimal Luft zum Roman-Teil, sonst kollidieren die Glyphen */
.interlude__line .word-pop--alt { margin-left: .04em; }
.interlude__sub {
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: 1.11rem; color: var(--soft-text); margin: 0 0 22px;
}
.interlude__body {
  max-width: 58ch; margin: 0 auto;
  font-size: 1.03rem; line-height: 1.75; color: var(--body-text); text-align: left;
}
.interlude__body em { font-style: italic; color: var(--cream); }

/* Split-Interlude: Text links, Motion-Slot rechts — Formation steht
   SEITLICH vom Text, nie dahinter (Fun Fact / Ausrufezeichen) */
.interlude--split { max-width: var(--maxw); text-align: left; }
.interlude--split .interlude__body { margin: 0; }
.motion-slot { min-height: 320px; }
@media (min-width: 900px) {
  .interlude--split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .interlude--split .motion-slot { min-height: 420px; }
}
/* Portrait als Bild — nur auf dem Handy sichtbar, am Schreibtisch uebernimmt
   die Partikelbuehne. aspect-ratio + object-fit halten es rund und unverzerrt. */
.story__foto {
  display: block;
  width: min(340px, 82%); height: auto; aspect-ratio: 1; margin: 8px auto 0;
  object-fit: contain;
}
/* Der Slot fuer die Partikel-Silhouette entfaellt in Kapitel 01 komplett —
   ohne Formation braeuchte er nur leeren Platz. */
.story__side .motion-slot { display: none; }
@media (max-width: 899px) { .story__foto { width: min(280px, 70%); } }

@media (max-width: 899px) {
  /* 29.09.2026, Sophy: "auf dem Handy muessen die Animationen zwischen die
     Textbloecke, nicht freischwebend in den Texten — zu wild und unruhig."
     Vorher waren die Slots auf 0 gesetzt; die Formation hatte damit keinen
     Platz und wurde vom Anker-Code mitten in den Viewport geklemmt, also
     hinter den Text. Jetzt bekommt jede Szene ein eigenes, leeres Band. */
  .interlude--split .motion-slot { min-height: clamp(240px, 40vh, 360px); height: auto; }
  .sec__stage {
    max-width: none; aspect-ratio: auto;
    min-height: clamp(240px, 40vh, 360px);
    margin: 4px 0 8px;
  }

}


/* Towanda: offener Rahmenkontext — zwei Balken links/rechts.
   Auf Cream near-black statt Lime (Lime = 1,2:1, unsichtbar). */
.interlude--towanda {
  position: relative;
  padding-left: clamp(28px, 5vw, 44px);
  padding-right: clamp(28px, 5vw, 44px);
}
.interlude--towanda::before,
.interlude--towanda::after {
  content: ""; position: absolute; top: 10%; bottom: 10%; width: 3px;
  background: var(--cream); border-radius: 2px; opacity: .75;
}
.interlude--towanda::before { left: 0; }
.interlude--towanda::after { right: 0; }

/* ======================= ANGEBOTE — Kästchen mit Icons =======================
   Dezente Kästchen: 1px Haarlinie, transparent, KEINE Schatten.
   Icon (Inline-SVG, Section-Akzent) + Folio-Nummer oben rechts. */
.folio-list {
  list-style: none; margin: 0 auto; padding: 0 var(--pad-x);
  max-width: var(--maxw);
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .folio-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .folio-list { grid-template-columns: repeat(3, 1fr); }
  .folio-item:nth-child(1) { grid-column: span 2; }
}
.folio-item {
  position: relative;
  border: 1px solid var(--hair);
  /* Karten sichtbar machen (Sophy: "Kästchen kommen nicht zur Geltung"):
     Paper-BG + weicher Schatten + 10px Radius — Mischung aus Vault (2px,
     flächenlos) und Original-Live-Karten (14px, Paper). */
  border-radius: 10px;
  padding: clamp(24px, 3vw, 34px);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  background: var(--ink-2);
  box-shadow: 0 2px 14px rgba(31,31,31,.07);
}
.folio-item:hover {
  border-color: color-mix(in srgb, var(--sec-accent) 55%, transparent);
  box-shadow: 0 4px 20px rgba(31,31,31,.11);
}
.folio {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: 1.21rem; line-height: 1;
  color: var(--soft-text);
}
.svc-ico {
  color: var(--sec-accent);
  margin-bottom: 18px;
}
.svc-ico svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.folio-item__body h3 { font-size: 1.45rem; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.folio-item__body p { margin: 0 0 14px; max-width: 64ch; }
.badge {
  font-family: var(--ff-body); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sec-accent); border: 1px solid color-mix(in srgb, var(--sec-accent) 45%, transparent);
  padding: 4px 10px; border-radius: var(--radius);
}

/* Tags & Workshops: schlichte Zeilen statt Chips */
.tags { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .91rem; color: var(--soft-text); }
.tags li { display: inline; }
.tags li + li::before { content: "·"; margin: 0 10px; color: var(--sec-accent); opacity: .7; }
.workshops { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; font-size: 1rem; color: var(--body-text); }
.workshops .ws-num { color: var(--sec-accent); margin-right: 8px; }
.folio-note { font-size: .95rem; color: var(--soft-text); margin: 18px 0 0 !important; }
.folio-note a { color: var(--sec-accent); font-weight: 500; text-decoration: none; }
.folio-note a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ======================= BERATUNG ======================= */
.adv__grid { display: grid; gap: clamp(44px, 6vw, 80px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .adv__grid { grid-template-columns: 1.35fr 1fr; } }
.adv__grid p { margin: 0 0 1.2em; max-width: 62ch; }
.adv-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; color: var(--body-text); }
.adv-list li { padding-left: 28px; position: relative; }
.adv-list li::before { content: ""; position: absolute; left: 0; top: .74em; width: 14px; height: 1px; background: var(--sec-accent); }

.adv__cta { border-top: 1px solid var(--hair); padding-top: 28px; }
.cta-eyebrow {
  font-size: .76rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sec-accent); margin: 0 0 14px;
}
.cta-text { margin: 0 0 26px; color: var(--body-text); }

/* Lokaler Reichweiten-Block (SEO/GEO Region Aachen) */
.local-reach { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--hair); padding-top: clamp(28px, 4vw, 44px); }
.local-reach .h3 { margin-bottom: 14px; }
.local-reach p { max-width: 62ch; color: var(--body-text); margin: 0; }
.local-reach strong { color: var(--cream); font-weight: 500; }

/* ======================= LASERKATZE ======================= */
.lab__grid { display: grid; gap: clamp(44px, 6vw, 88px); grid-template-columns: 1fr; }
@media (min-width: 980px) { .lab__grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.lab__text p { margin: 0 0 1.2em; max-width: 62ch; }
.lab__cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.link-strong { color: var(--sec-accent-ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sec-accent) 40%, transparent); }
.link-strong:hover { border-bottom-color: var(--sec-accent); }

.lab-rows { list-style: none; padding: 0; margin: 0; }
.lab-rows li { padding: 26px 0; border-top: 1px solid var(--hair); }
.lab-rows li:last-child { border-bottom: 1px solid var(--hair); }
.lab-rows h3 { font-size: 1.2rem; margin: 0 0 8px; }
.lab-rows p { margin: 0; font-size: 1rem; color: var(--soft-text); max-width: 48ch; }

/* Lab heading stack (Typo-Detail im H2) */
.lab-h-stack { display: flex; flex-direction: column; gap: .12em; line-height: 1.05; }
.lab-h-stack .lab-h__colon { color: var(--sec-accent); }
.lab-h-stack .lab-h__line { display: block; font-size: .5em; font-style: italic; font-weight: 300; padding-left: 1.2em; color: var(--soft-text); line-height: 1.25; }
.lab-h-stack .lab-h__dash { display: inline-block; color: var(--sec-accent); font-style: normal; margin-right: .35em; }
.lab-h-stack .lab-h__comma { color: var(--sec-accent); font-style: normal; }

/* ======================= KONTAKT ======================= */
.contact__grid { display: grid; gap: clamp(44px, 6vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }

.contact-form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: .95rem; color: var(--cream); letter-spacing: .02em; }
.field input, .field textarea {
  font: inherit; font-weight: 300; padding: 13px 15px;
  border: 1px solid var(--hair); background: var(--ink-3);
  border-radius: var(--radius); color: var(--cream);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.field input:focus, .field textarea:focus { border-color: var(--sec-accent); background: #fff; outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--amber); }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .89rem; color: var(--soft-text); margin: 0; }
.form-note a { color: var(--sec-accent); }
.form-status { font-weight: 500; margin: 0; min-height: 1.2em; }
.form-status[data-state="ok"]  { color: var(--mint); }
.form-status[data-state="err"] { color: var(--cream); background: var(--amber); padding: 0 .3em; }

.contact-side { border-top: 1px solid var(--hair); padding-top: 28px; display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .contact-side { border-top: 0; padding-top: 0; border-left: 1px solid var(--hair); padding-left: clamp(28px, 4vw, 56px); } }
.contact-eyebrow {
  font-size: .76rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sec-accent); margin: 0;
}
.contact-mail {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--cream); text-decoration: none; word-break: break-all;
}
.contact-mail:hover { color: var(--sec-accent); }
.contact-phone { margin: 10px 0 0; display: grid; gap: 2px; }
.contact-phone a {
  color: var(--body-text); text-decoration: none;
  font-size: 1.05rem; letter-spacing: .02em;
  min-height: 44px; display: inline-flex; align-items: center;
}
.contact-phone a:hover { color: var(--sec-accent); }
.contact-phone__note { font-size: .82rem; color: var(--soft-text); line-height: 1.5; }
/* Visitenkarte (kontakt.vcf) — dieselbe Datei, auf die NFC-Chip und QR-Code zeigen */
.contact-vcard {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 14px;
  padding: 9px 16px; border: 1px solid rgba(31,31,31,.35); border-radius: var(--radius);
  color: var(--cream); text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.contact-vcard::before { content: "+"; font-weight: 700; color: var(--sec-accent); }
.contact-vcard:hover { background: var(--sec-accent); color: var(--ink); border-color: var(--sec-accent); }
.contact-vcard:hover::before { color: var(--ink); }
.contact-where { margin: 18px 0 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft-text); }
.socials { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.socials a {
  color: var(--body-text); text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center;
  transition: color var(--t-fast);
}
.socials a:hover { color: var(--cream); }
.socials a::after { content: "→"; color: var(--sec-accent); transition: transform var(--t-fast); }
.socials a:hover::after { transform: translateX(6px); }

/* ======================= FOOTER ======================= */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--hair); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vh, 90px) var(--pad-x); display: grid; gap: 28px; }
.footer__claim {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 2rem); margin: 0; line-height: 1.3; color: var(--cream);
}
.footer__claim em,
.footer__claim .accent,
.footer__claim .accent--pink, .footer__claim .accent--violet, .footer__claim .accent--lime {
  font-style: italic; color: var(--cream); background: none; padding: 0;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { text-decoration: none; color: var(--soft-text); border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); padding-bottom: 2px; }
.footer-links a:hover { color: var(--cream); border-bottom-color: var(--mint); }
.footer__copy { color: var(--soft-text); font-size: .89rem; margin: 0; }

/* ======================= REVEAL ======================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ======================= STORY-SIDE (Motion-Slot) =======================
   Kein statisches Foto mehr — das runde Portrait erscheint ausschließlich
   als Canvas-Overlay über der geformten Partikel-Silhouette (Kapitel 01). */
.story__side { min-height: 320px; }
.story__side .motion-slot { min-height: 320px; height: 100%; }
@media (min-width: 980px) { .story__side .motion-slot { min-height: 420px; } }

/* ======================= LEGAL ======================= */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(120px, 16vh, 180px) var(--pad-x) 90px; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 26px; }
.legal h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.legal h3 { font-family: var(--ff-body); font-size: 1.11rem; font-weight: 500; margin: 24px 0 8px; }
.legal p, .legal li { line-height: 1.78; color: var(--body-text); }
.legal ul { padding-left: 22px; }
.legal a { color: var(--mint); }
.legal .back { display: inline-block; margin-bottom: 32px; text-decoration: none; color: var(--soft-text); }
.legal .back:hover { color: var(--mint); }

@media (max-width: 480px) {
  body { font-size: 16.8px; }
}

/* ======================= RUHIGE ANSICHT =======================
   29.09.2026: ein Schalter in der Kopfzeile legt die BEWEGUNG still —
   Partikelbuehne aus, keine Dauerschleifen, keine Einblendungen beim
   Scrollen. Fuer schwache Geraete, langsame Verbindungen und alle, die es
   ruhiger moegen. Die Wahl bleibt im Browser gespeichert.

   WICHTIG, Lehre vom selben Tag (Sophy: "der Knopf beinhaltet auch diverse
   Texte"): Die erste Fassung schaltete mit `body.ruhig *` pauschal JEDE
   Animation ab. Elemente, die bei opacity 0 starten und sich erst per
   Animation einblenden — allen voran `.hero__title .line` — blieben damit
   unsichtbar. Die Ueberschrift der Startseite verschwand.
   Deshalb hier zweigeteilt:
     1. Dauerschleifen und Deko werden gestoppt,
     2. alles, was sich einblenden WOLLTE, wird sofort sichtbar gesetzt.
   Wer eine neue Animation baut, die bei opacity 0 startet, traegt sie in
   Block 2 nach. */

/* 1. Bewegung aus */
body.ruhig #motion-stage,
body.ruhig .stage-glass,
body.ruhig .fleck,
body.ruhig .hero-kinetic .kinetic-paths { display: none !important; }
body.ruhig .btn::after,
body.ruhig .project-cta::after,
body.ruhig .brand-laserkatze::before,
body.ruhig .workflow-svg .blob,
body.ruhig .workflow-svg .nodes,
body.ruhig .workflow-svg .node,
body.ruhig .workflow-svg .pulse-core,
body.ruhig .hero-kinetic .rotor__token,
body.ruhig .delfinoewin path,
body.ruhig [class*="marquee"],
body.ruhig [class*="ticker"] { animation: none !important; }
body.ruhig { scroll-behavior: auto !important; }

/* 2. Was sich einblenden wollte, ist sofort da */
body.ruhig .reveal,
body.ruhig .hero__title .line,
body.ruhig .workflow-svg .node,
body.ruhig .workflow-svg .pulse-core {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Bewegungsschalter in der Kopfzeile (29.09.2026, Sophy: "muss nach oben,
   im Footer macht er keinen Sinn"). Bewusst nur ein Zeichen breit: die
   Kopfzeile hat einen gemessenen Umbruchpunkt, ein Wort mehr haette ihn
   verschoben. Was der Klick tut, steht im title und im aria-label. */
.ruhig-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; min-height: 40px; flex-shrink: 0;
  margin-left: auto; margin-right: 8px;
  background: transparent; color: var(--cream);
  border: 1px solid var(--hair); border-radius: 2px;
  font-size: .95rem; line-height: 1; cursor: pointer;
  opacity: .8; transition: opacity var(--t-fast), border-color var(--t-fast);
}
.ruhig-toggle:hover { opacity: 1; border-color: rgba(31,31,31,.4); }
.ruhig-toggle[aria-pressed="true"] { border-color: var(--mint); color: var(--mint); opacity: 1; }
/* Der Sprachschalter hatte bisher margin-left:auto — diese Rolle uebernimmt
   jetzt der Bewegungsschalter links davon. */
.site-header .lang-toggle { margin-left: 0; }

/* --- Kopfzeile: Reihenfolge am Schreibtisch --------------------------------
   29.09.2026, Sophy: "der Bewegungsknopf links von Kontakt, DE/EN rechts von
   Kontakt, alles rueckt weiter nach links".
   Beide Knoepfe stehen deshalb ZWEIMAL im Quelltext: einmal frei in der
   Kopfzeile (fuer das Handy, wo die Navigation im Burger steckt und beide
   sonst unerreichbar waeren) und einmal als Listenpunkt links und rechts von
   "Kontakt" (fuer den Schreibtisch). Sichtbar ist immer nur eine Fassung.
   Beide tragen dieselben Klassen, deshalb greift die bestehende Logik in
   js/main.js und js/i18n.js unveraendert auf beide zu. */
.nav-extra { display: none; }
@media (min-width: 1160px) {
  .nav-extra { display: flex; align-items: center; }
  /* Die frei stehenden Fassungen verschwinden, sobald die Navigation
     ausgeklappt ist — sonst stuenden sie doppelt in der Zeile. */
  .site-header > .ruhig-toggle,
  .site-header > .lang-toggle { display: none; }
  /* In der Liste braucht keiner der beiden eigene Aussenabstaende: den
     Abstand macht der gap der Navigationsliste. */
  .nav-extra .ruhig-toggle,
  .nav-extra .lang-toggle { margin: 0; }
  /* Der Dreier Bewegung/Kontakt/Sprache gehoert enger zusammen als die
     uebrigen Punkte, sonst zerfaellt die rechte Seite der Kopfzeile.
     Vor dem Dreier bleibt der volle Abstand (30px) als Trennung, INNERHALB
     sind es 18px. Deshalb nur die beiden hinteren Glieder einziehen. */
  .nav-extra--motion + li { margin-left: -12px; }
  .nav-extra--lang { margin-left: -12px; }
}

/* --- Handy: "Kontakt speichern" direkt unter der Kopfzeile ----------------
   29.09.2026, Sophy: Wer am Netzwerkabend die Seite aufruft, soll die
   Visitenkarte sofort sichern koennen, ohne erst bis zum Kontaktbereich zu
   scrollen. Am Schreibtisch ausgeblendet — dort steht derselbe Knopf unten
   im Kontaktbereich, und oben ist die Kopfzeile ohnehin voll. */
.vcard-leiste { display: none; }
@media (max-width: 899px) {
  .vcard-leiste {
    display: flex; justify-content: flex-start;
    /* Die Kopfzeile der Startseite ist fixed und liegt ueber dem Inhalt.
       Ohne diesen Abstand schoebe sich der Knopf unter das Logo. 81px ist
       die gemessene Hoehe samt Farbband; wer an der Kopfzeile schraubt,
       misst hier nach. */
    padding: calc(81px + 14px) var(--pad-x) 0;
    position: relative; z-index: 3;
  }
  /* Der Hero bringt oben rund 146px eigenen Abstand mit, gedacht fuer die
     freie Flaeche unter der Kopfzeile. Mit der Leiste davor steht beides
     hintereinander und reisst ein Loch. */
  .vcard-leiste + main .hero { padding-top: 18px; }
  .vcard-leiste__knopf {
    display: inline-flex; align-items: center; gap: .45em;
    padding: 9px 16px; border-radius: 2px;
    background: var(--mint); color: var(--ink);
    font-family: "Jost", "Jost Fallback", system-ui, sans-serif;
    font-weight: 500; font-size: .92rem; letter-spacing: .04em;
    text-decoration: none;
  }
  .vcard-leiste__knopf::before { content: "+"; font-weight: 700; }
}