/* ============================================================================
   T.A.R. GmbH — Design System v1.0
   Entwurf für das Website-Redesign. Alle Farben sind aus der Logo-Markenfarbe
   #00B09D abgeleitet und auf WCAG-2.2-Kontrast geprüft (Werte in Kommentaren).
   Keine externen Ressourcen — DSGVO-konform und offline lauffähig.
   ========================================================================== */

/* --- 1. Design Tokens --------------------------------------------------- */
:root {
  /* Teal — Markenfarbe des Logos ist teal-500 */
  --teal-50:  #E8FBF7;
  --teal-100: #C9F5EE;
  --teal-200: #93EADD;
  --teal-300: #54D8C7;
  --teal-400: #1FC1AF;
  --teal-500: #00B09D; /* MARKE. Nur Fläche/Grafik — auf Weiß nur 2,73:1 */
  --teal-600: #00907F; /* 3,97:1 — große Schrift & UI-Ränder */
  --teal-700: #007366; /* 5,76:1 — Textfarbe & Links auf Weiß */
  --teal-800: #0A5B52;
  --teal-900: #0D4A44;
  --teal-950: #022B28;

  /* Slate — neutrale Achse, minimal ins Teal gekippt für Farbharmonie */
  --slate-50:  #F6F8F8;
  --slate-100: #ECEFF0;
  --slate-200: #DCE1E3;
  --slate-300: #B9C2C5;
  --slate-400: #8B989C;
  --slate-500: #69777C; /* 4,64:1 */
  --slate-600: #4F5D62;
  --slate-700: #3C484C; /* 9,44:1 */
  --slate-800: #283235;
  --slate-900: #182124;
  --slate-950: #0B1416; /* 18,65:1 */

  --signal:      #E8552B; /* Sparsamer Warn-/Notfallakzent (24-h-Stillstand) */
  --signal-soft: #FDF0EC;

  /* Semantische Zuweisung */
  --ink:          var(--slate-950);
  --body:         var(--slate-700);
  --muted:        var(--slate-500);
  --line:         var(--slate-200);
  --line-strong:  var(--slate-300);
  --surface:      #FFFFFF;
  --surface-2:    var(--slate-50);
  --surface-3:    var(--slate-100);
  --surface-dark: var(--slate-950);

  /* Typografie — Inter/Segoe UI Variable; produktiv self-hosted, nie via CDN */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", "Segoe UI Variable Display",
                  "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

  --fs-display: clamp(2.4rem, 1.35rem + 3.4vw, 4.5rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 1.85vw, 2.875rem);
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 0.99rem + 0.42vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-kicker:  0.75rem;

  /* Raster & Rhythmus */
  --maxw: 1240px;
  --maxw-narrow: 760px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --r-xs: 4px;  --r-sm: 8px;  --r: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --r-pill: 999px;

  /* Schatten — zurückhaltend, dafür mehrschichtig */
  --sh-sm: 0 1px 2px rgba(11,20,22,.05), 0 1px 3px rgba(11,20,22,.04);
  --sh:    0 2px 4px rgba(11,20,22,.04), 0 8px 20px -6px rgba(11,20,22,.09);
  --sh-lg: 0 4px 8px rgba(11,20,22,.04), 0 24px 48px -12px rgba(11,20,22,.16);
  --sh-teal: 0 10px 30px -10px rgba(0,176,157,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .55s;
}

/* --- 2. Reset & Grundlagen ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  font-weight: 680;
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.012em; line-height: 1.28; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--teal-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible {
  outline: 3px solid var(--teal-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --- 3. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--surface-2); }
.section--dark { background: var(--surface-dark); color: var(--slate-300); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.grid { display: grid; gap: clamp(1.25rem, .8rem + 1.4vw, 2rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0,1fr)); } /* Personenkarten in einer Reihe (25.08.2026) */
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1100px) { .g-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .g-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .g-5 { grid-template-columns: 1fr; } }

/* --- 4. Typo-Bausteine -------------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-kicker); font-weight: 640;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 1.15rem;
}
.kicker::before {
  content: ""; width: 26px; height: 2px; background: var(--teal-500); flex: none;
}
.section--dark .kicker { color: var(--teal-300); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--slate-600); }
.section--dark .lead { color: var(--slate-300); }
.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
h1 + .lead, h2 + .lead, h3 + .lead { margin-top: 1.15rem; }
.num {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--teal-700); font-weight: 600;
}

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 640;
  letter-spacing: -.005em;
  padding: .92rem 1.6rem; border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .2s var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Primär: Markenfarbe als Fläche mit dunkler Schrift = 6,84:1.
   So bleibt das Teal in voller Sättigung sichtbar und ist trotzdem barrierefrei. */
.btn--primary { background: var(--teal-500); color: var(--ink); box-shadow: var(--sh-teal); }
.btn--primary:hover { background: var(--teal-400); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--slate-50); }
/* Auf allen dunklen Flächen muss der sekundäre Button hell laufen */
.section--dark .btn--ghost,
.hero .btn--ghost,
.subhero .btn--ghost,
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.subhero .btn--ghost:hover,
.cta-band .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.btn--sm { padding: .62rem 1.1rem; font-size: var(--fs-xs); }
.btn__arrow { transition: transform .35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 620; font-size: var(--fs-sm); color: var(--teal-700);
  text-decoration: none;
}
.link-arrow svg { transition: transform .35s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow:hover { text-decoration: underline; }

/* --- 6. Header ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck { border-color: var(--line); box-shadow: var(--sh-sm); }
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 78px;
}
.header__logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex: none; }
.header__logo img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  position: relative; padding: .55rem .85rem; border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: 560; color: var(--slate-700);
  text-decoration: none; transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--slate-50); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 640; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 2px; background: var(--teal-500); border-radius: 2px;
}
.header__cta { display: flex; align-items: center; gap: .9rem; flex: none; }
.header__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 620; color: var(--ink); text-decoration: none;
}
.header__phone svg { color: var(--teal-600); }
.burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--ink); }
.burger__close { display: none; }
.header.is-open .burger__open { display: none; }
.header.is-open .burger__close { display: block; }
@media (max-width: 1080px) {
  .nav, .header__phone { display: none; }
  .burger { display: block; }

  /* Ausklappmenü: erscheint unter der Kopfzeile, .header ist sticky =
     positioniertes Element und damit der Bezugsrahmen für die Panels. */
  .header.is-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: var(--sh-lg); padding: .5rem clamp(1.25rem, 0.6rem + 2.6vw, 3rem) 1rem;
  }
  .header.is-open .nav a {
    padding: .85rem .2rem; border-radius: 0; border-bottom: 1px solid var(--line);
    font-size: var(--fs-body);
  }
  .header.is-open .nav a[aria-current="page"]::after { display: none; }
  .header.is-open .nav a[aria-current="page"] { color: var(--teal-700); }
  .header.is-open .header__phone {
    display: inline-flex; position: absolute; top: 100%; left: 0; right: 0;
    transform: translateY(100%);
    background: var(--surface-2); border-top: 1px solid var(--line);
    padding: 1rem clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
    justify-content: center;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .header .nav { animation: navIn .25s var(--ease-out); }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Notfall-Band über dem Header */
.topbar {
  background: var(--slate-950); color: var(--slate-300);
  font-size: var(--fs-xs); letter-spacing: .01em;
}
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 40px; }
.topbar__left { display: flex; align-items: center; gap: .55rem; }
.topbar a { color: #fff; text-decoration: none; font-weight: 620; }
.topbar a:hover { text-decoration: underline; }
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-400); flex: none;
  box-shadow: 0 0 0 0 rgba(31,193,175,.7); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,193,175,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(31,193,175,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,193,175,0); }
}
.topbar__meta { display: flex; gap: 1.4rem; }
@media (max-width: 780px) { .topbar__meta { display: none; } }

/* --- 7. Hero ------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background: var(--slate-950);
  color: var(--slate-300);
  padding-block: clamp(4.5rem, 2rem + 9vw, 8.5rem) clamp(4rem, 2rem + 7vw, 7rem);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* Hero-Foto: echtes Anlagenmotiv, farblich auf die Marke gezogen */
/* Seit 25.08.2026 liegt das Foto als <picture>/<img> im HTML (WebP, Preload-Scanner,
   fetchpriority=high) statt als CSS-Hintergrund; .hero__photo ist nur noch der Container. */
.hero__photo {
  position: absolute; inset: 0;
  /* Das Motiv ist von Haus aus kühl-blau; der Filter zieht es Richtung Teal
     und nimmt etwas Sättigung heraus, damit die Marke die lauteste Farbe bleibt.
     Bewusst KEINE Abdunklung mehr im Filter — das übernimmt allein der Scrim,
     und zwar nur dort, wo tatsächlich Text liegt. */
  filter: saturate(.9) contrast(1.04) hue-rotate(-6deg);
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; /* Ausschnitt wie bisher */
}
.hero__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(0,176,157,.20), transparent 56%),
    radial-gradient(90% 80% at 8% 92%, rgba(0,115,102,.22), transparent 60%);
  mix-blend-mode: screen;
}
/* Der Scrim sichert die Textlesbarkeit: links deckend, rechts weitgehend offen,
   damit das Motiv sichtbar bleibt. Weiß auf rgba(11,20,22,.90) über einem
   dunklen Nachtmotiv liegt weit über 7:1. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,20,22,.92) 0%, rgba(11,20,22,.78) 34%,
                    rgba(11,20,22,.34) 64%, rgba(11,20,22,.10) 100%),
    linear-gradient(to top, rgba(11,20,22,.55) 0%, transparent 34%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: end;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } }
.hero h1 {
  font-size: var(--fs-display); color: #fff; letter-spacing: -.033em;
  line-height: 1.02; font-weight: 700; margin-bottom: 1.5rem;
}
.hero h1 em { font-style: normal; color: var(--teal-300); }
/* Lange Hero-Überschrift (Kundentext 27.08.2026, sechs Wörter mehr als der Entwurf):
   eine Stufe kleiner als --fs-display, damit sie auf dem Desktop bei vier Zeilen bleibt. */
.hero h1.hero__title--lang { font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.7rem); max-width: 22ch; }
.hero__lead { font-size: var(--fs-lead); color: var(--slate-300); max-width: 54ch; margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3rem; }
.hero__kicker { color: var(--teal-300); }
.hero__kicker::before { background: var(--teal-400); }

/* Kennzahlen-Leiste im Hero */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r); overflow: hidden; }
.stat { background: rgba(11,20,22,.72); padding: 1.35rem 1.25rem; }
.stat__val {
  font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.03em;
}
.stat__val span { color: var(--teal-400); }
.stat__lbl { font-size: var(--fs-xs); color: var(--slate-400); margin-top: .5rem; line-height: 1.4; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Hero-Anfragekarte */
.quickform {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 1rem + 1.5vw, 2.2rem);
  backdrop-filter: blur(10px);
}
.quickform h2 { font-size: 1.28rem; color: #fff; margin-bottom: .55rem; }
.quickform p { font-size: var(--fs-sm); color: var(--slate-400); margin-bottom: 1.5rem; }
.field { margin-bottom: .9rem; }
.field label {
  display: block; font-size: var(--fs-xs); font-weight: 620;
  color: var(--slate-300); margin-bottom: .4rem; letter-spacing: .01em;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; font: inherit; font-size: var(--fs-sm);
  color: #fff; background: rgba(11,20,22,.55);
  border: 1.5px solid rgba(255,255,255,.22); border-radius: var(--r-sm);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field select { appearance: none; background-image: none; }
.field select option { background: var(--slate-900); color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); } /* Kontrast AA (Audit 25.08.2026) */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-400); background: rgba(11,20,22,.8); /* Kontrast AA (Audit 25.08.2026) */
}
.quickform .btn { width: 100%; }
.quickform__note { font-size: var(--fs-xs); color: rgba(255,255,255,.86); text-shadow: 0 1px 10px rgba(11,20,22,.9); margin-top: .9rem; text-align: center; } /* Kontrast AA (Audit 25.08.2026) */
/* .quickform p (oben) ist spezifischer und würde Farbe und Schatten überschreiben — deshalb gezielt: */
.quickform p.quickform__note { color: rgba(255,255,255,.86); text-shadow: 0 1px 10px rgba(11,20,22,.9); }

/* Logo-Leiste — echte Kundenlogos, auf eine Tonalität gebracht.
   Die Logos kommen in acht verschiedenen Hausfarben. Damit die Leiste ruhig
   bleibt und keine fremde Marke lauter ist als T.A.R., laufen alle als weiße
   Silhouette; erst beim Überfahren wird eine einzelne wieder voll sichtbar. */
.logobar { background: var(--slate-900); padding-block: 2.5rem; }
.logobar__inner { display: grid; gap: 1.75rem; }
.logobar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.logobar__label { font-size: var(--fs-xs); color: var(--slate-400); letter-spacing: .12em; text-transform: uppercase; font-weight: 620; } /* Kontrast AA (Audit 25.08.2026) */
.logobar__note { font-size: var(--fs-xs); color: var(--slate-600); }
/* Die acht Logos haben Seitenverhältnisse von 2,7 bis 9,1. Bei gleicher Höhe
   wirkt ein breites Logo doppelt so groß wie ein kompaktes. Deshalb wird nicht
   die Höhe angeglichen, sondern die optische Fläche: Höhe ~ 1/√Seitenverhältnis.
   Der Faktor steht als --f am jeweiligen Bild. */
.logobar { --logo-h: clamp(20px, 15px + 1.05vw, 30px); }
.logobar__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 1.4vw, 2.4rem) clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
  align-items: center; justify-items: center;
}
.logobar__item {
  display: block;
  height: calc(var(--logo-h) * var(--f, 1));
  width: auto; max-width: 100%;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .58;
  transition: opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);
}
.logobar__item:hover { opacity: 1; filter: none; transform: translateY(-2px); }
@media (max-width: 900px) { .logobar__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logobar__list { grid-template-columns: repeat(2, 1fr); } }

/* --- 8. Karten ---------------------------------------------------------- */
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.1rem);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease),
              border-color .45s var(--ease);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--teal-500); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--slate-300); }
.card:hover::after { transform: scaleY(1); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--teal-50); color: var(--teal-700);
  margin-bottom: 1.4rem;
}
.card h3 { margin-bottom: .7rem; }
.card p { font-size: var(--fs-sm); color: var(--slate-600); margin-bottom: 1.3rem; }
.card__list { margin-bottom: 1.5rem; }
.card__list li {
  position: relative; padding-left: 1.4rem; font-size: var(--fs-sm);
  color: var(--slate-600); margin-bottom: .45rem;
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--teal-500);
  transform: rotate(45deg);
}

/* Leistungskarte mit Bildkopf */
.svc { display: flex; flex-direction: column; padding: 0; }
.svc__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--slate-900); }
.svc__body { padding: clamp(1.4rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.svc__body .link-arrow { margin-top: auto; }
.svc__tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  background: rgba(11,20,22,.78); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--fs-xs); font-weight: 620;
  padding: .35rem .7rem; border-radius: var(--r-xs);
  border: 1px solid rgba(255,255,255,.16);
}

/* Referenz-/Case-Karte */
.case { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--slate-950); color: #fff; display: flex; flex-direction: column; min-height: 340px; }
.case__media { position: absolute; inset: 0; }
/* Kräftiger Verlauf von unten: das Foto bleibt sichtbar, der Text darüber
   erreicht trotzdem sichere Kontraste (Weiß auf ≥ rgba(11,20,22,.88)). */
.case__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,20,22,.94) 0%, rgba(11,20,22,.82) 30%,
                    rgba(11,20,22,.40) 60%, rgba(11,20,22,.08) 100%);
}
.case__media .ph::after { display: none; }
.case__media .ph img { filter: saturate(.82) contrast(1.03); }
.case:hover .ph img { transform: scale(1.05); }
.case__body { position: relative; z-index: 2; padding: clamp(1.6rem, 1rem + 1.4vw, 2.2rem); margin-top: auto; }
/* Der Schatten sichert die Lesbarkeit auf hellen Bildstellen, ohne dass der
   Verlauf darunter das Foto wieder zuschütten muss. */
.case__client {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-300); font-weight: 640; margin-bottom: .7rem;
  text-shadow: 0 1px 10px rgba(11,20,22,.95), 0 0 3px rgba(11,20,22,.8);
}
.case h3 { color: #fff; margin-bottom: .9rem; text-shadow: 0 2px 14px rgba(11,20,22,.8); }
.case__kpi span, .case__kpi b { text-shadow: 0 1px 10px rgba(11,20,22,.9); }
.case__kpis { display: flex; gap: 1.6rem; flex-wrap: wrap; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.18); }
.case__kpi b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--teal-300); letter-spacing: -.02em; }
.case__kpi span { font-size: var(--fs-xs); color: var(--slate-400); }

/* --- 9. Prozess --------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 92px minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1rem, .6rem + 1.6vw, 2.5rem); align-items: start;
  padding-block: clamp(1.6rem, 1rem + 1.4vw, 2.3rem);
  border-top: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step:hover { background: var(--surface-2); }
.step__no {
  counter-increment: step; font-family: var(--font-mono);
  font-size: var(--fs-sm); font-weight: 600; color: var(--teal-700);
  padding-top: .28rem;
}
.step__no::before { content: "0" counter(step); }
.step h3 { margin-bottom: .3rem; }
.step p { font-size: var(--fs-sm); color: var(--slate-600); margin: 0; }
.step__meta { font-size: var(--fs-xs); color: var(--slate-600); } /* Kontrast AA (Audit 25.08.2026) */
@media (max-width: 860px) {
  .step { grid-template-columns: 52px minmax(0,1fr); }
  .step__meta { grid-column: 2; }
}

/* --- 10. Branchen-Chips ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .68rem 1.15rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 580; color: var(--slate-700);
  transition: all .3s var(--ease); cursor: default;
}
.chip:hover { border-color: var(--teal-600); color: var(--ink); background: var(--teal-50); }
.chip svg { color: var(--teal-600); flex: none; }

/* --- 11. Vertrauens-/Zertifikatsband ----------------------------------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.trust__item { background: var(--surface); padding: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
.trust__item svg { color: var(--teal-600); margin-bottom: 1rem; }
.trust__item h3 { font-size: 1.0625rem; margin-bottom: .45rem; }
.trust__item p { font-size: var(--fs-sm); color: var(--slate-600); margin: 0; }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }

/* --- 11b. Zertifikatskachel & Präqualifikationsband --------------------- */
.cert {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.3rem, 1rem + .9vw, 1.7rem);
  display: flex; flex-direction: column;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.cert:hover { border-color: var(--teal-600); box-shadow: var(--sh); }
.cert__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.cert__head svg { color: var(--teal-600); flex: none; }
.cert__state {
  font-family: var(--font-mono); font-size: 11px; color: var(--slate-600); /* Kontrast AA (Audit 25.08.2026) */
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .22rem .55rem; border-radius: var(--r-pill); white-space: nowrap;
}
.cert h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.cert p { font-size: var(--fs-sm); color: var(--slate-600); margin-bottom: 1.2rem; }
.cert .link-arrow { margin-top: auto; font-size: var(--fs-xs); }

.prequal {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm);
  padding: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
}
.prequal__action { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
@media (max-width: 760px) {
  .prequal { grid-template-columns: 1fr; }
  .prequal__action { align-items: flex-start; }
}

/* --- 12. Team ----------------------------------------------------------- */
.person { text-align: left; }
.person__img {
  aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden;
  background: var(--slate-800); margin-bottom: 1.1rem; position: relative;
}
.person h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.person__role { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .8rem; }
.person__contact { display: flex; gap: .9rem; font-size: var(--fs-xs); }
.person__contact a { color: var(--teal-700); text-decoration: none; font-weight: 600; }
.person__contact a:hover { text-decoration: underline; }

/* --- 13. CTA-Band ------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--teal-950); border-radius: var(--r-xl); padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.cta-band__bg { position: absolute; inset: 0; background:
  radial-gradient(80% 120% at 85% 0%, rgba(0,176,157,.42), transparent 60%),
  radial-gradient(70% 100% at 5% 100%, rgba(0,144,127,.30), transparent 65%); }
.cta-band__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .9rem; }
.cta-band p { color: var(--teal-100); font-size: var(--fs-lead); margin: 0; }
.cta-band__actions { display: flex; flex-direction: column; gap: .8rem; }
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* --- 14. Footer --------------------------------------------------------- */
.footer { background: var(--slate-950); color: var(--slate-400); padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) 2rem; font-size: var(--fs-sm); }
.footer__grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo { height: 46px; width: auto; margin-bottom: 1.4rem; }
.footer h3 { font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: #fff; font-weight: 640; margin: 0 0 1.15rem; }
.footer li { margin-bottom: .6rem; }
.footer a { color: var(--slate-400); text-decoration: none; transition: color .25s var(--ease); }
.footer a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-top: 1.75rem; font-size: var(--fs-xs); color: var(--slate-400); } /* Kontrast AA (Audit 25.08.2026) */
.footer__legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* --- 15. Flächenmotive: Hexagon-Raster und Isometrie --------------------
   REGEL — wann bekommt eine Fläche ein Motiv?

   1. Wo ein Foto liegt, kommt KEIN Muster dazu. Beides gleichzeitig ergibt
      Unruhe und schwächt beide. (Einzige Ausnahme: der Hero, wo das Raster
      im Scrim fast verschwindet und nur als Textur wirkt.)
   2. Muster kommt auf DUNKLE Flächen ohne Foto — Footer, dunkle Bänder.
      Dort ersetzt es das Bild und gibt der Fläche Tiefe.
   3. Auf HELLEN Textflächen ist Weißraum das bessere Gestaltungsmittel.
            Hier höchstens sehr schwach (Tinte bei ca. 5 % Deckkraft, nach unten
      ausgeblendet) und nie hinter Fließtext — sonst leidet die Lesbarkeit.
   4. Höchstens ein Motivfeld pro Bildschirmhöhe. Sonst wird aus einem
      Markenzeichen eine Tapete.

   Deshalb: Footer und Karriere = Raster. Nachweisebene = sehr schwaches
   Raster (reine Kachelfläche, kein Fließtext). Ablauf = Isometrie statt
   Foto, weil dort Planung gezeigt wird, nicht Baustelle. */
.hexfield { position: absolute; inset: 0; opacity: .07; pointer-events: none; }
.hexfield svg { width: 100%; height: 100%; }
/* SO WIRD DIE STÄRKE GEREGELT (Release-Stand 25.08.2026):
   Die Strichfarbe steht fest im SVG-Pattern (#hexgrid weiß, #hexgrid-ink Tinte,
   #hexgrid-teal für Porträtplatten). Ein `color:`-Wert am .hexfield hat KEINE Wirkung —
   currentColor im Pattern löst sich gegen das versteckte Definitions-SVG auf, nicht gegen
   das Element, das das Muster benutzt. Bis zum 25.08.2026 lief das Raster deshalb überall
   unbeabsichtigt in Slate-700 bei .5 (dunkle Flächen) bzw. 1.0 (helle Fläche) — das war das
   „Gitter", das der Kunde als zu unruhig empfand. Seitdem: Stärke ausschließlich über
   `opacity` am .hexfield (inline je Fläche): Startseiten-Hero .08, Unterseiten-Heros und
   Footer .14, Karriere-Band .06, helle Nachweise-Fläche .10 (mit Ausblendung nach unten),
   Porträtplatten: opacity .2 am <rect> (vorher .35).
   Auf hellem Grund muss das Raster deutlich schwächer laufen als auf dunklem —
   und es wird nach unten ausgeblendet, damit unter keinem Fließtext ein Gitter
   liegt. Das ist Regel 3 von oben, angewendet. */
.hexfield--light {
  opacity: .10; /* Kundenwunsch 25.08.2026: Footer und Nachweise etwas kräftiger */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 42%, transparent 68%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 42%, transparent 68%);
}
.hex-badge { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }

/* Rohrleitungsisometrie als Flächenmotiv im Ablauf-Abschnitt.
   Sie sitzt oben rechts neben der Sektionsüberschrift — dort ist der einzige
   größere Freiraum, und sie liegt damit nicht hinter den Prozesszeilen. */
.iso-bg {
  position: absolute;
  right: clamp(1rem, 1vw + .5rem, 3rem);
  top: clamp(2.5rem, 1rem + 4vw, 6rem);
  width: min(46%, 580px); aspect-ratio: 700/440;
  color: var(--teal-700); opacity: .22; pointer-events: none; z-index: 1;
}
.iso-bg svg { width: 100%; height: 100%; }
@media (max-width: 1100px) { .iso-bg { opacity: .12; width: 54%; right: -6%; } }
@media (max-width: 760px)  { .iso-bg { display: none; } }

/* Technische Strichillustration als Bildplatzhalter (nur noch dort, wo bewusst
   KEIN Stockfoto stehen darf — Mitarbeiterporträts) */
.plate { position: absolute; inset: 0; background: linear-gradient(150deg, #0F2124 0%, #0B1416 55%, #08201D 100%); overflow: hidden; }
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate__initials {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: .08em;
  color: var(--teal-300); opacity: .9;
}
.plate__label {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(255,255,255,.42); text-transform: uppercase;
}

/* --- 15b. Fotoflächen ---------------------------------------------------- */
/* Alle Motivbilder laufen über dieselbe Behandlung, damit die Bildstrecke
   trotz verschiedener Quellen wie aus einem Guss wirkt: leicht entsättigt,
   minimal kühler, einheitlicher Kontrast. */
.ph { position: absolute; inset: 0; overflow: hidden; background: var(--slate-900); }
.ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.88) contrast(1.03);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.card:hover .ph img { transform: scale(1.04); filter: saturate(1) contrast(1.04); }
/* Sehr dezenter Fußverlauf — nur so viel, dass ein Tag am unteren Rand hält.
   Auf Leistungskarten liegt kein Text über dem Bild, deshalb bleibt es hell. */
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11,20,22,.28) 0%, rgba(11,20,22,.02) 38%, transparent 62%);
}
.ph--flat::after { background: linear-gradient(to top, rgba(11,20,22,.18), transparent 48%); }

/* Symbolbild-Kennzeichnung — Pflicht überall dort, wo ein Foto als Beleg
   missverstanden werden könnte (Referenzen). */
.symbol-note {
  position: absolute; right: .75rem; top: .75rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(11,20,22,.82); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-xs);
  padding: .3rem .55rem; font-size: 10.5px; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; color: var(--teal-300);
}
.symbol-note svg { flex: none; }

/* Bildquellen-Fußnote */
.credits {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
  border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 2.5rem;
}
.credits code { font-family: var(--font-mono); font-size: 11px; color: var(--slate-600); }

/* --- 16. Scroll-Reveal -------------------------------------------------- */
/* Ausblenden NUR, wenn JavaScript läuft (html.js wird im <head> gesetzt).
   Ohne JS, bei JS-Fehler oder in nicht-rendernden Crawlern ist alles sichtbar.
   Spezifität: html.js .reveal.is-in (0,3,1) liegt über html.js .reveal (0,2,1). */
html.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }

/* Hero-Einblendung ohne JS-Abhängigkeit (ersetzt .reveal im Hero, Audit 25.08.2026).
   Läuft als CSS-Animation ab dem ersten Frame; das LCP-Element (h1) wird
   nicht mehr bis zum Ende des HTML-Parsings + IntersectionObserver zurückgehalten. */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero__lead, .hero__actions, .stats, .quickform {
    animation: heroIn .6s var(--ease-out) both;
  }
  .hero__lead    { animation-delay: .08s; }
  .hero__actions { animation-delay: .16s; }
  .quickform     { animation-delay: .16s; }
  .stats         { animation-delay: .24s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal, html.js .reveal { opacity: 1; transform: none; }
}

/* --- 17. Mockup-Rahmen (nur Präsentation, nicht Teil der Website) ------- */
.mock-note {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 200;
  background: var(--slate-950); color: #fff; font-size: var(--fs-xs);
  padding: .7rem 1rem; border-radius: var(--r-sm); box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: .7rem; max-width: min(92vw, 420px);
  border: 1px solid rgba(255,255,255,.16);
}
.mock-note b { color: var(--teal-300); font-weight: 640; }
.mock-note button { background: none; border: 0; color: var(--slate-400); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.mock-note button:hover { color: #fff; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --- 18. Unterseiten-Muster -------------------------------------------- */
.subhero {
  position: relative; overflow: hidden; background: var(--slate-950); color: var(--slate-300);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(3.5rem, 2rem + 5vw, 6rem);
}
.subhero__bg { position: absolute; inset: 0; background:
  radial-gradient(100% 120% at 88% 0%, rgba(0,176,157,.26), transparent 62%),
  linear-gradient(150deg, #0E1B1E, #0B1416 60%, #08201D); }
.subhero__inner { position: relative; z-index: 2; }
.subhero h1 { color: #fff; max-width: 20ch; margin-bottom: 1.3rem; }
/* Ohne diese Zeile erbt der Lead die Textfarbe für helle Flächen (2,7:1 auf Dunkel) */
.subhero .lead { max-width: 58ch; color: var(--slate-300); }
.subhero p { color: var(--slate-300); }

.crumbs { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--slate-400); margin-bottom: 2rem; }
.crumbs a { color: var(--slate-400); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span[aria-current] { color: var(--teal-300); }
.crumbs svg { opacity: .5; }

.layout-doc {
  display: grid; grid-template-columns: 232px minmax(0,1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start;
}
@media (max-width: 940px) { .layout-doc { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 108px; }
.toc__heading {
  font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); font-weight: 640; margin: 0 0 1rem;
}
.toc a {
  display: block; padding: .5rem 0 .5rem .95rem; font-size: var(--fs-sm);
  color: var(--slate-600); text-decoration: none; border-left: 2px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.toc a:hover { color: var(--ink); border-color: var(--line-strong); }
.toc a.is-active { color: var(--teal-700); border-color: var(--teal-500); font-weight: 620; }

.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.6em; margin-bottom: .7em; scroll-margin-top: 110px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; margin-bottom: .5em; }
.prose ul.ticks li {
  position: relative; padding-left: 1.9rem; margin-bottom: .7rem; color: var(--slate-600);
}
.prose ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 19px; height: 19px;
  border-radius: 50%; background: var(--teal-50);
}
.prose ul.ticks li::after {
  content: ""; position: absolute; left: 5.5px; top: .62em; width: 8px; height: 4.5px;
  border-left: 2px solid var(--teal-700); border-bottom: 2px solid var(--teal-700);
  transform: rotate(-45deg);
}

.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec th, .spec td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { color: var(--ink); font-weight: 620; width: 38%; background: var(--surface-2); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

.callout {
  border-left: 3px solid var(--teal-500); background: var(--teal-50);
  padding: 1.4rem 1.6rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.callout p { font-size: var(--fs-sm); margin: 0; color: var(--slate-700); }
.callout strong { color: var(--ink); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 640;
  color: var(--ink); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.75rem;
  width: 10px; height: 10px; border-right: 2px solid var(--teal-600);
  border-bottom: 2px solid var(--teal-600); transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.95rem; }
.faq details p { font-size: var(--fs-sm); color: var(--slate-600); padding-bottom: 1.5rem; margin: 0; max-width: 68ch; }

.aside-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.2vw, 2rem);
}
.aside-card h3 { font-size: 1.125rem; margin-bottom: .6rem; }
.aside-card p { font-size: var(--fs-sm); color: var(--slate-600); }

/* --- 19. Styleguide-Ansicht -------------------------------------------- */
.sg-nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.sg-nav__row { display: flex; align-items: center; gap: 1.5rem; height: 64px; overflow-x: auto; }
.sg-nav a {
  font-size: var(--fs-sm); font-weight: 580; color: var(--slate-600);
  text-decoration: none; white-space: nowrap; padding: .4rem 0;
}
.sg-nav a:hover { color: var(--ink); }
.sg-nav strong { font-family: var(--font-display); color: var(--ink); white-space: nowrap; margin-right: auto; }

.swatches { display: grid; grid-template-columns: repeat(11, minmax(0,1fr)); gap: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.sw { padding: 1.6rem .55rem .7rem; font-size: 10px; font-family: var(--font-mono); line-height: 1.5; }
.sw b { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; margin-bottom: .25rem; }
.sw i { font-style: normal; display: block; opacity: .72; }

.type-row { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 2rem; align-items: baseline; }
@media (max-width: 720px) { .type-row { grid-template-columns: 1fr; gap: .5rem; } }
.type-row__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }

.demo {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); background: var(--surface);
}
.demo + .demo { margin-top: 1.25rem; }
.demo__label {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.5rem;
  padding-bottom: .75rem; border-bottom: 1px dashed var(--line);
}
.demo__row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.phones { display: flex; gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); flex-wrap: wrap; justify-content: center; }
.phone {
  width: 300px; flex: none; border-radius: 34px; background: var(--slate-950);
  padding: 11px; box-shadow: var(--sh-lg); position: relative;
}
.phone__screen {
  border-radius: 24px; overflow: hidden; background: #fff; height: 620px; position: relative;
}
.phone__screen iframe { width: 390px; height: 806px; border: 0; transform: scale(.7179); transform-origin: 0 0; }
.phone__notch {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px; background: var(--slate-950); border-radius: 12px; z-index: 5;
}
.phone__cap { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-top: .9rem; }