/* =========================================================================
   CalcTape – site.css  (GENERIERT-NAH, handgepflegt)
   Design-System 1:1 übernommen von der Firmenseite (../schoettler):
   Tokens, Reset/Basis, Buttons, Header, Hero, Komponenten, Effekte, Dark-Mode.
   Darunter die CalcTape-spezifischen Produkt-Komponenten auf denselben Tokens.
   Hausfarben: Marineblau #132339 / #003f77, Akzent Cyan #03a2dd.
   Schrift: Nunito (lokal gehostet).
   ========================================================================= */

/* ---------- Stammfarben, Tokens, Schrift ---------- */
/* Symbole (Fluent System Icons, siehe make-ui-icons.py): Fluent zeichnet auch
   den Strich-Stil als gefüllte Fläche – die Strichstärke steckt in der Form.
   Grundfarbe ist deshalb die Textfarbe; einzelne Regeln setzen ein eigenes
   `fill`, wo das Symbol nicht die Schriftfarbe tragen soll. */
svg { fill: currentColor; }

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito/nunito.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy:      #132339;
  --navy-2:    #1c3052;
  --blue:      #003f77;
  --cyan:      #03a2dd;
  --cyan-dark: #0285b8;
  /* Outline-Buttons tragen 16-px-Fettschrift auf Weiß – für Fließtextgröße
     verlangt WCAG AA 4,5:1, #0285b8 kam auf 4,2:1. #026c94 liegt bei 5,9:1. */
  --btn-outline-ink: #026c94;
  --orange:    #e7660e;

  --ink:    #1c2733;
  --muted:  #5b6b7f;
  --line:   #e3e8ef;
  --soft:   #f5f7fa;
  --white:  #ffffff;

  /* Semantische Flächen-/Text-Tokens (für Tag-/Nachtmodus umschaltbar) */
  color-scheme: light;            /* native Elemente (Felder, Scrollbalken) hell rendern */
  --bg:      #ffffff;             /* Seitenhintergrund */
  --notice-ink: #a04607;          /* Titel/Links im Hinweiskasten auf hellem Grund (.notice--prose) */
  --surface: #ffffff;            /* Karten, Tabellen, erhabene Flächen */
  --heading: #132339;            /* Überschriften & kräftige Textfarbe (== navy) */
  --btn-primary: var(--cyan);    /* Akzent: Eyebrows, Trennstriche, Menü-Unterstrich */
  --btn-primary-bg: #0279a8;     /* Primär-Button-Hintergrund – dunkler, damit weißer Text WCAG AA erreicht */
  --blue-text: var(--blue);      /* Blau für Texte/Links/Eyebrows (Tag #003f77 / Nacht heller) */
  --field-border: var(--line);   /* Umrandung der Formularfelder (nachts kräftiger) */
  --error:      #c8102e;         /* Fehlerrot (Pantone 186 C) – wie schoettler.com */
  --green-dark: #235332;         /* Statusgrün als Text auf hellem Grund */

  --container: 1140px;
  --header-h: 72px;
  --page-title-h: 54px;  /* Höhe des angedockten Seitentitels (.page-title.is-stuck) */
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(19, 35, 57, .08);
  --shadow:    0 10px 30px rgba(19, 35, 57, .10);
  --shadow-lg: 0 18px 50px rgba(19, 35, 57, .16);

  --space: clamp(3.5rem, 8vw, 6.5rem);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--page-title-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Nunito", -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: clamp(1rem, .6vw + .9rem, 1.075rem);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-text); text-decoration: none; }
a:hover { color: var(--blue-text); }

h1, h2, h3 { line-height: 1.18; color: var(--heading); font-weight: 800; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout ---------- */
/* Seitenluft: 1,25 rem auf dem Telefon, dazwischen mitwachsend bis 2 rem – ab
   rund 1200 px übernimmt ohnehin die Deckelung auf --container. Bei 1014 px
   standen Logo und Burger sonst 20 px vom Rand, genau wie auf dem Telefon.
   (Abweichung von schoettler.com, dort durchgehend 1,25 rem – dessen Logo ist
   34 px hoch, das von CalcTape 42, die Kopfzeile trägt also mehr Gewicht.) */
.container { width: min(100% - clamp(2.5rem, 6vw, 4rem), var(--container)); margin-inline: auto; }
main { flex: 1 0 auto; }
.section { padding-block: var(--space); }
.section--soft { background: var(--soft); }
.section--navy { background: var(--navy); color: #cfe0f0; }
.section--navy h2 { color: #fff; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-text);
  margin-bottom: .6rem;
}
.section--navy .eyebrow { color: var(--btn-primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-family: inherit; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn svg { width: 19px; height: 19px; }
.btn--primary {
  background: var(--btn-primary-bg); color: #fff; box-shadow: 0 6px 18px rgba(3,162,221,.35);
}
.btn--primary:hover { background: #015f86; color: #fff; transform: translateY(-2px); }
.btn--ghost {
  border-color: rgba(255,255,255,.5); color: #fff;
}
.btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.btn--outline {
  border-color: var(--cyan); color: var(--btn-outline-ink);
}
.btn--outline:hover { background: var(--cyan); color: #fff; }

/* Sprunglink: erstes Element im Dokument, sichtbar nur mit Tastaturfokus.
   Ziel ist das <main> der Seite (build.py setzt dort id="inhalt"). */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; font-weight: 700;
  padding: .7rem 1.1rem; border-radius: 0 0 10px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Nur für Screenreader – trägt die Wortfassung von Zeichen, die allein nichts
   sagen (der Strich „nicht verfügbar“ in der Verfügbarkeitstabelle). */
.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;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex; align-items: center;
  min-height: var(--header-h); gap: 1rem;
}
.site-header .logo { margin-right: auto; display: inline-flex; align-items: stretch; gap: .6rem; }
.site-header .logo img { height: 42px; width: auto; }

/* Marken-Lockup: Titel oben (bündig mit Logo-Oberkante), Subheading unten */
.brand-text { display: inline-flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding: 1px 0; }
.brand-name { font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: -.01em; color: #fff; }
.brand-tag { font-weight: 700; font-size: .68rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--btn-primary); white-space: nowrap; }

/* Tag-/Nachtmodus-Umschalter (immer sichtbar, im navy Header) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #dce6f2; transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.theme-toggle svg { width: 20px; height: 20px; }
/* Icon zeigt das ZIEL-Design (was ein Klick aktiviert): hell → Mond, dunkel → Sonne */
.theme-toggle .ti { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: inline; }
:root[data-theme="dark"]  .theme-toggle .ico-sun  { display: inline; }
:root:not([data-theme])   .theme-toggle .ico-moon { display: inline; }

/* Sprachumschalter: Weltkugel-Dropdown (<details>, läuft auch ohne JS) */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 40px; padding: 0 .6rem; border-radius: 999px;
  background: none; border: 0; cursor: pointer; color: #dce6f2;
  font: inherit; font-weight: 800; font-size: .82rem; letter-spacing: .03em;
  list-style: none; -webkit-user-select: none; user-select: none;
  transition: background .15s ease, color .15s ease;
}
.lang-switch__btn::-webkit-details-marker { display: none; }
.lang-switch__btn::marker { content: ""; }
.lang-switch__btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.lang-switch[open] .lang-switch__btn { background: rgba(255,255,255,.12); color: #fff; }
.lang-switch__globe { width: 20px; height: 20px; transition: transform .25s ease; }
.lang-switch[open] .lang-switch__globe { transform: rotate(-18deg); }
.lang-switch__cur { line-height: 1; }

.lang-switch__menu {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
  min-width: 11.5rem; margin: 0; padding: .4rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transform-origin: top right; animation: langPop .16s ease;
}
@keyframes langPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.lang-switch__menu a {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 8px;
  color: var(--ink); font-weight: 700; font-size: .95rem;
}
.lang-switch__menu a:hover { background: var(--soft); color: var(--blue-text); }
.lang-switch__menu a.is-current { color: var(--blue-text); }
.lang-switch__menu a.is-current::after { content: "\2713"; margin-left: auto; color: var(--cyan-dark); font-weight: 800; }
.lang-switch__code {
  flex: 0 0 auto; min-width: 2rem; text-align: center; line-height: 1;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  padding: .22rem .3rem; border-radius: 6px;
  background: rgba(3,162,221,.12); color: var(--cyan-dark);
}
@media (prefers-reduced-motion: reduce) {
  .lang-switch__menu { animation: none; }
  .lang-switch__globe { transition: none; }
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { color: #dce6f2; font-weight: 700; font-size: .98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav .btn--primary { color: #fff; }
.nav-toggle { display: none; }

/* ---------- Hero (Struktur 1:1 von schoettler) ----------
   Hintergrund: reiner navy Verlauf + Glow (CSS). Die bewegten Ziffern/Operatoren
   liegen darüber als animiertes Canvas (.hero-glyphs, siehe js/site.js).
   Aufbau wie der Seitenkopf der Unterseiten (siehe .page-head weiter unten):
   <main> ist ein Grid, die Section nur Klammer (display: contents). .hero__bg
   (Verlauf + Canvas) überlappt als Zeile 1–3 die Textzeilen .hero__top (Tagline),
   .page-title (H1 – klebt beim Scrollen) und .hero__body (Absatz, Buttons,
   Hinweis, Tech-Zeile); das App-Bild .hero-device gehört zur Desktop-Anordnung
   und liegt dort als Zeile 1–3 rechts über allem – gestapelt bleibt es aus. */
.hero { display: contents; color: #fff; }
.hero__bg {
  grid-row: 1 / span 3; grid-column: 1;
  position: relative; overflow: hidden;
  background:
    radial-gradient(58% 62% at 74% 38%, rgba(29,60,102,.55), rgba(22,41,74,0) 70%),
    linear-gradient(135deg, #0b1422 0%, #102038 55%, #16294a 100%);
}
.hero__top, .hero__body, .hero-device { grid-column: 1; position: relative; z-index: 2; }
.hero__top { grid-row: 1; }
.hero__body { grid-row: 3; }
/* Unterhalb von 1000 px, wo der Text die ganze Breite braucht, entfällt das
   Gerät – wie die Aufnahme im Seitenkopf der Unterseiten (.head-device). Zuvor
   stand es dort als eigene Zeile unter dem Absatz und zog den Hero um die
   Bildhöhe auf; die App zeigt weiter unten der Windows-Screenshot. */
.hero-device { display: none; }
.hero__top > .container { padding-top: clamp(4rem, 12vw, 8rem); }
.hero__body > .container { padding-bottom: clamp(4rem, 12vw, 8rem); }  /* unterer Rand des Heros */
/* Textspalte (bei schoettler ein 30rem breiter Innenkasten): hier je Zeile auf die Kinder */
.hero__top > .container > *, .hero__body > .container > *, .hero .page-title h1 { max-width: 30rem; }
/* Bewegte Ziffern/Operatoren hinter dem Hero-Inhalt (Canvas, von js/site.js bespielt) */
.hero-glyphs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* App-Bild: Der Container ist die Bühne der Perspektive und umschließt das Bild
   eng (kein eigener Rand) – wie das .hero-device-Kästchen bei schoettler; so
   liegt der Fluchtpunkt in der Bildmitte. */
.hero-device > .container { display: flex; perspective: 1600px; }
/* Die Aufnahme bringt ihr Android-Gehäuse schon mit (freigestellt auf Transparenz),
   deshalb kein eigener Rahmen: drop-shadow folgt der Silhouette, box-shadow würde den
   rechteckigen Bildkasten umranden (gleiche Überlegung wie .dev--bare in der Galerie). */
.hero-device img {
  --tilt: rotateX(12deg) rotateY(-16deg) rotate(1deg);   /* leichte Neigung */
  transform: var(--tilt);
  transform-origin: center 60%;
  transition: transform .3s ease;
}
.hero-device:hover img { transform: var(--tilt) scale(1.04); }   /* Hover: nur leichte Vergrößerung, keine Drehung */

/* Desktop: Gerät als Zeile 1–3 über den Textzeilen (Grid-Überlappung), an die
   Hero-Höhe gekoppelt (Container absolut, inset 0) -> es bläht den Hero NICHT auf
   und schaut nur 5 % unten heraus (overflow-y: visible zeigt es). Es liegt über den
   Textzeilen (z-index 3), fängt aber nur auf dem Bild selbst Zeiger-Ereignisse –
   Text und Buttons links bleiben klickbar; die Mindesthöhe des Hintergrunds geht
   in Zeile 3 (1fr, siehe main), bleibt also unter dem Text. */
@media (min-width: 1000px) {
  .hero__bg { min-height: clamp(600px, 70vh, 760px); }
  .hero-device {
    display: block;
    grid-row: 1 / span 3; z-index: 3; padding: 0; pointer-events: none;
    overflow-x: clip;            /* kein horizontales Scrollen durch die Neigung … */
    overflow-y: visible;         /* … aber das App-Bild darf unten herausschauen */
  }
  /* Die Bühne hängt an der rechten Kante der Textspalte (derselbe Seitenrand wie
     .container), ist so hoch wie der Hero und so breit wie das Bild (shrink-to-fit):
     Fluchtpunkt = Bildmitte, exakt die Geometrie des schoettler-Heros. */
  .hero-device > .container {
    position: absolute; right: max(1.25rem, (100% - var(--container)) / 2); bottom: -5%;   /* max. 5 % unten heraus */
    height: 100%; width: auto; margin: 0; align-items: flex-end;
    filter: drop-shadow(0 40px 55px rgba(0,0,0,.45));   /* Schatten auch über dem hellen Folgeabschnitt */
  }
  /* Das Gerät füllt die Bühne nicht ganz (bei schoettler 100 %): mit der Neigung
     reichte es sonst vom Kopfmenü bis unter den Hero und drängte die Textspalte.
     Es steht unten (align-items) und schaut weiter 5 % heraus. */
  .hero-device img {
    --tilt: rotateX(14deg) rotateY(-18deg) rotate(1deg);
    height: var(--hero-dev-h, 82%); width: auto; filter: none;   /* Schatten liegt am Container */
    pointer-events: auto;
  }
}
/* Burger-Stufe (1000–1079 px, siehe Kopfzeile): eine Stufe kleiner */
@media (min-width: 1000px) and (max-width: 1079px) {
  .hero-device img { --hero-dev-h: 66%; }
}

/* Interaktives Verbindungsnetz – liegt im Hintergrundkasten des Seitenkopfs (.page-head__bg) */
.net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .9; pointer-events: none; }
.hero h1 { color: #fff; }
.hero .tagline {
  display: block; color: var(--btn-primary);
  font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 800;
  letter-spacing: .04em; margin-bottom: .8rem;
}
.hero p { font-size: 1.2rem; color: #e6eef8; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-tech { margin-top: 1.2rem; color: rgba(255,255,255,.72); font-weight: 700; font-size: .9rem; letter-spacing: .04em; }

/* ---------- Karten / Raster ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Höchstens DREI Spalten: Bei auto-fit standen die neun Funktionskarten auf
   1440 px als 4 + 4 + 1 – die neunte allein in der letzten Zeile. Mit festen
   Stufen geht 3 × 3 auf, und schon ab 560 px stehen zwei nebeneinander (auf dem
   Telefon war der Abschnitt sonst rund 2300 px hoch). */
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.9rem 1.6rem; display: flex; flex-direction: column;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfe0f0; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); margin: 0; font-size: .98rem; }
.card .icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff; margin-bottom: 1.1rem;
}
.card .icon svg { width: 26px; height: 26px; fill: #fff; }

/* ---------- Feature-Liste ---------- */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature .tick {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(3,162,221,.12); color: var(--cyan-dark);
  display: grid; place-items: center; margin-top: .15rem;
}
.feature .tick svg { width: 17px; height: 17px; }
.feature h3 { margin: 0 0 .25rem; }
.feature p { color: var(--muted); margin: 0; font-size: .97rem; }

/* ---------- Produkt-Band ---------- */
.product {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #cfe0f0; border-radius: 20px; padding: clamp(2rem, 5vw, 3.2rem);
}
.product h2 { color: #fff; max-width: 22ch; }
/* Der Kasten läuft über die volle Breite; ohne Schranke stand der Absatz auf dem
   Desktop mit rund 110 Zeichen je Zeile. */
.product p { max-width: 62ch; }
.badge {
  display: inline-block; background: rgba(231,102,14,.18); color: #ffb27a;
  font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; margin-bottom: .8rem;
}

/* ---------- CTA-Band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfe0f0; max-width: 52ch; margin-inline: auto; }
.cta-meta { margin-top: 1.6rem; font-weight: 700; color: #fff; }
.cta-meta a { color: #fff; }

/* ---------- Footer (1:1 von schoettler) ---------- */
.site-footer { background: #0e1b2e; color: #b7c6da; padding-block: 3.5rem 2rem; font-size: .95rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr; }
.site-footer img { height: 30px; width: auto; margin-bottom: 1rem; }
.site-footer .logo-foot { display: inline-flex; align-items: stretch; gap: .6rem; margin-bottom: 1rem; }
.site-footer .logo-foot img { height: 42px; width: auto; margin: 0; }
.site-footer .footer-title { color: #fff; font-size: .85rem; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .9rem; font-weight: 700; }
/* Die Spaltentitel der Fußzeile sind h2 (die Seite hat h1 > h2 > h3, ein h4 sprang eine Ebene);
   .footer-title setzt die h2-Standardgröße zurück. */
.site-footer a { color: #cdd9e8; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .88rem;
}

/* ---------- Rechtstext / Prose ---------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: .5rem; }
.prose h3 { margin-top: 1.6rem; color: var(--blue-text); font-size: 1.08rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose address { font-style: normal; line-height: 1.8; }
.prose .legal-meta { color: var(--muted); font-size: .92rem; }
.prose .callout {
  background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.4rem 0;
}
.prose .callout p:last-child { margin-bottom: 0; }

/* ---------- Pfiff: Signatur, Reveals, Micro-Interaktionen ---------- */
/* Marken-Signatur: warmer Marker-Strich (Cyan -> Orange) hinter Schlüsselwörtern */
.mark {
  background-image: linear-gradient(110deg, rgba(3,162,221,.32), rgba(231,102,14,.32));
  background-repeat: no-repeat;
  background-size: 100% 38%;
  background-position: 0 86%;
  padding: 0 .06em;
  border-radius: 3px;
}

/* Editoriale Feinheit: kurzer Strich vor Eyebrow-Labels (nicht in zentrierten Headern) */
.eyebrow::before {
  content: ""; display: inline-block; width: 1.6em; height: 2px;
  background: currentColor; vertical-align: middle; margin-right: .55em; opacity: .8;
}
.center .eyebrow::before, .cta-band .eyebrow::before { display: none; }

/* Eleganter Hero-Auftritt */
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .tagline   { animation: riseIn .6s ease both; }
.hero .mark { background-size: 0% 38%; animation: markDraw .7s ease .55s forwards; }
@keyframes markDraw { to { background-size: 100% 38%; } }
.hero h1         { animation: riseIn .6s ease .08s both; }
.hero p          { animation: riseIn .6s ease .16s both; }
.hero-actions    { animation: riseIn .6s ease .24s both; }

/* Scroll-Reveal (nur aktiv, wenn JS läuft -> kein Verstecken ohne JS) */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease-out, transform .5s ease, box-shadow .5s ease, border-color .5s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* Animierte Link-Unterstreichung (Inhalt, Navigation, Footer – ohne Buttons/Logo/Kacheln) */
main a:not(.btn):not(.platform):not(.pchip):not(.plain), .nav a:not(.btn), .site-footer a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  transition: background-size .25s ease, color .15s ease;
}
main a:not(.btn):not(.platform):not(.pchip):not(.plain):hover, .nav a:not(.btn):hover, .site-footer a:hover { background-size: 100% 1.5px; }

/* Aktive Seite im Hauptmenü klar markieren – nicht beim Kontakt-Button:
   dort läge der Balken quer über der Buttonfläche. */
.nav a[aria-current="page"]:not(.btn),
.nav a[aria-current="page"]:not(.btn):hover {
  background-image: linear-gradient(var(--btn-primary), var(--btn-primary));
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: 0 100%;
}

/* ---------- Responsive (Mobile-Navigation) ---------- */
/* Burger-Menü unter 1080 px (schoettler.com: 820 px). Die CalcTape-Kopfzeile
   ist breiter – fünf Menüpunkte, Sprachwahl, Tag/Nacht, Kontakt-Knopf und das
   Marken-Lockup mit Unterzeile brauchen ausgeklappt rund 1060 px (DE) bzw.
   940 px (EN); zwischen 820 und 1060 px drückte Flexbox das Lockup zusammen,
   die Unterzeile brach dreizeilig um und der Kontakt-Knopf ragte rechts hinaus.
   Die Zahl ist gemessen (Headless-Chrome, beide Sprachen) plus 20 px Luft und
   hängt an der längsten Sprache; bei neuen Menüpunkten neu messen. */
@media (max-width: 1079px) {
  .nav-toggle {
    display: inline-flex; background: none; border: 0; cursor: pointer; padding: .4rem;
  }
  .nav-toggle svg { width: 30px; height: 30px; fill: #fff; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--navy);
    padding: .5rem 1.25rem 1.25rem; box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav .btn--primary { margin-top: .75rem; justify-content: center; }
}
/* Unter 540 px passt die Unterzeile auch neben Burger, Tag/Nacht und Sprachwahl
   nicht mehr einzeilig – lieber weg als umgebrochen. */
@media (max-width: 540px) {
  .brand-tag { display: none; }
  .brand-text { justify-content: center; }
}
@media (max-width: 820px) {
  .site-footer .cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   CalcTape-Produktseite – spezifische Komponenten (auf denselben Tokens)
   ========================================================================= */

/* ---------- Hero-Meta-Pills ---------- */
.hero-meta { display: flex; flex-wrap: wrap; gap: .55rem .6rem; margin-top: 1.8rem; }
.hero-meta .pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #e6eef8; font-weight: 700; font-size: .82rem;
  padding: .35rem .8rem; border-radius: 999px;
}
.hero-meta .pill svg { width: 15px; height: 15px; fill: var(--cyan); }

/* Geräte-Hinweis im Hero (Smart-Eingang) */
.device-hint { margin: 1.1rem 0 0; font-size: .92rem; color: #cfe0f0; }
.device-hint a { color: #fff; font-weight: 700; background-image: linear-gradient(currentColor,currentColor); background-repeat: no-repeat; background-size: 100% 1.5px; background-position: 0 100%; }

/* ---------- Intro-Split: Text/Schritte + Tape-Mockup nebeneinander ---------- */
.intro-split { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 940px) { .intro-split { grid-template-columns: 1.05fr .95fr; } }
.intro-split .steps { margin-top: 2rem; }

/* ---------- Tape-Mockup (zeigt das Produktprinzip) ---------- */
.tape {
  background: var(--surface); color: var(--ink); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-width: 380px;
  margin-inline: auto; width: 100%;
  font-variant-numeric: tabular-nums;
}
.tape__bar {
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  padding: .7rem 1rem; color: #cfe0f0; font-size: .82rem; font-weight: 700;
}
.tape__dots { display: inline-flex; gap: .35rem; margin-right: .4rem; }
.tape__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); }
.tape__dots i:first-child { background: var(--orange); }
.tape__body { padding: .4rem 0; }
.tape__row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 1rem; padding: .42rem 1.15rem;
}
.tape__row .lbl { color: var(--muted); font-size: .92rem; }
.tape__row .val { font-weight: 700; font-size: 1.05rem; }
.tape__row .op { color: var(--cyan-dark); font-weight: 800; margin-right: .15rem; }
.tape__row--sub { border-top: 1px dashed var(--line); margin-top: .1rem; }
.tape__row--sub .lbl { font-weight: 700; color: var(--blue-text); }
.tape__row--sub .val { color: var(--blue-text); }
.tape__row--total {
  background: var(--soft); border-top: 2px solid var(--navy); margin-top: .25rem; padding-block: .7rem;
}
.tape__row--total .lbl { font-weight: 800; color: var(--heading); }
.tape__row--total .val { font-weight: 800; font-size: 1.3rem; color: var(--heading); }
.tape__row .note {
  display: block; font-size: .76rem; color: var(--cyan-dark); font-style: italic; margin-top: .1rem;
}
.tape__caret {
  display: inline-block; width: 1px; height: 1.05em; background: var(--cyan);
  vertical-align: -2px; margin-left: 1px; animation: caretBlink 1.05s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------- Schritt-für-Schritt ---------- */
.steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 3rem; }
.step { position: relative; padding-left: 3.6rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff;
  font-weight: 800; font-size: 1.15rem; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(3,162,221,.3);
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--muted); margin: 0; font-size: .98rem; }

/* ---------- Versions-Vergleich (Editionen-Matrix) ---------- */
.table-wrap { margin-top: 2.6rem; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 640px; }
.cmp th, .cmp td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { background: var(--navy); color: #fff; font-size: .95rem; vertical-align: bottom; }
/* Spaltenköpfe stehen über zentrierten Werten – also ebenfalls zentriert
   (die erste Spalte bleibt linksbündig wie ihre Zeilenköpfe). */
.cmp thead .plan { font-size: 1.05rem; text-align: center; }
.cmp thead .plan small { display: block; font-weight: 400; font-size: .8rem; color: #9fc6e6; margin-top: .15rem; }
.cmp thead .plan--pro { color: #ffd9bd; }
.cmp tbody th { font-weight: 700; color: var(--heading); }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th { background: var(--soft); }
.cmp td { text-align: center; color: var(--muted); }
.cmp td:first-child, .cmp tbody th { text-align: left; }
.cmp .yes svg { width: 20px; height: 20px; fill: #0a7d4a; display: inline-block; vertical-align: middle; }
/* Der Strich bedeutet „gibt es hier nicht“ – auf Weiß kam #c4ccd6 auf 1,5:1.
   var(--muted) trägt in beiden Designs (5,5:1 hell, 7,8:1 dunkel). */
.cmp .no { color: var(--muted); font-weight: 700; }
.cmp .v { font-weight: 800; color: var(--heading); }
/* Zustand der Plattform in der Zeilenüberschrift (z. B. „in Arbeit“ für Windows,
   solange die neue Fassung nicht ausgeliefert wird) – dieselbe Farbgebung wie das
   Kachel-Badge weiter unten. */
.cmp-badge {
  display: inline-block; margin-left: .5rem; vertical-align: middle;
  background: rgba(231,102,14,.14); color: #a04607;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
}
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: #eef6fb; }

/* Verfügbarkeitstabelle auf schmalen Schirmen: eine Karte je Plattform.
   Als Tabelle brauchte sie 640 px Mindestbreite in einem seitlich scrollbaren
   Kasten – bei 375 px waren davon 333 px zu sehen, also Plattform und Freeware.
   Die Preisspalten lagen außerhalb, ohne Schatten, Verlauf oder Hinweis. */
@media (max-width: 700px) {
  .table-wrap:has(.cmp--avail) { overflow: visible; border: 0; box-shadow: none; border-radius: 0; }
  .cmp--avail { min-width: 0; display: block; background: transparent; }
  .cmp--avail thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp--avail tbody, .cmp--avail tr, .cmp--avail th, .cmp--avail td { display: block; }
  .cmp--avail tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: .2rem 1.1rem .8rem; margin-bottom: .9rem;
  }
  .cmp--avail tbody tr:nth-child(even) td, .cmp--avail tbody tr:nth-child(even) th { background: transparent; }
  .cmp--avail tbody th {
    text-align: left; font-size: 1.08rem; padding: .8rem 0 .6rem;
    border-bottom: 1px solid var(--line);
  }
  .cmp--avail td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
    text-align: right; border: 0; padding: .5rem 0;
  }
  .cmp--avail td::before {
    content: attr(data-label); color: var(--muted); font-weight: 700; font-size: .92rem; text-align: left;
  }
}

/* ---------- Preise ---------- */
.price-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 3rem; align-items: stretch; }
.price {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.7rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price--featured { border-color: var(--cyan); box-shadow: 0 14px 40px rgba(3,162,221,.18); position: relative; }
/* Das Badge steht als Element im Markup (content/<lang>/home.html, Text aus
   editions.md → featured_badge). Als CSS-content war es unübersetzt („Beliebt“
   auch auf /en/) und für Screenreader wie Suchmaschinen gar nicht vorhanden. */
.plan-badge {
  position: absolute; top: -.8rem; right: 1.4rem;
  background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px;
}
/* „ab 2,99 €“ unter dem Tarifnamen – der Preis stand nur in der Tabelle darunter. */
.plan-price {
  font-size: 1.35rem; font-weight: 800; color: var(--heading);
  margin: -.6rem 0 1.1rem; font-variant-numeric: tabular-nums;
}
.plan-price:empty { display: none; }
.price .plan-name { font-weight: 800; color: var(--heading); font-size: 1.25rem; margin: 0 0 .2rem; }
.price .plan-for { color: var(--muted); font-size: .92rem; margin: 0 0 1.1rem; }
.price .amount { font-size: 2.4rem; font-weight: 800; color: var(--heading); line-height: 1; }
.price .amount small { font-size: .95rem; font-weight: 700; color: var(--muted); }
.price .amount-note { color: var(--muted); font-size: .88rem; margin: .4rem 0 1.3rem; }
.price ul { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.price li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; font-size: .96rem; }
.price li svg { width: 18px; height: 18px; fill: var(--cyan-dark); flex: 0 0 auto; margin-top: .2rem; }
.price .btn { margin-top: auto; justify-content: center; }

/* ---------- Plattformen ----------
   Die Gruppen stehen als Spalten nebeneinander, die Plattformen darin
   untereinander (Mac unter Windows, iPad unter iPhone …). Die Spalten sind
   gleich breit und beginnen alle oben – sie werden unterschiedlich lang, weil
   „Browser" und „Für Unternehmen" nur eine Kachel haben. */
.platform-groups {
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start;
}
.platform-group { margin-top: 0; }
.platform-group__title {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1rem;
}
.platform-group__title::before {
  content: ""; display: inline-block; width: 1.5em; height: 2px; background: var(--cyan);
  vertical-align: middle; margin-right: .55em; opacity: .8;
}
/* Innerhalb einer Gruppe stehen die Kacheln untereinander und füllen die Spalte. */
.platforms { display: grid; gap: 1rem; margin-top: 0; grid-template-columns: 1fr; }
.platform {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1rem; text-align: center; color: var(--heading); font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .15s ease;
}
.platform:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfe0f0; color: var(--blue-text); }
.platform .pico {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(3,162,221,.1); color: var(--cyan-dark);
}
.platform .pico svg { width: 24px; height: 24px; }
.platform span { font-size: .98rem; }
/* Zwei Zeilen sind für die Unterzeile immer reserviert: Sonst steht die
   Windows-Kachel („Neue Version, noch kein Download") 21 px höher als die
   übrigen, und weil jede Gruppe ein eigenes Raster ist, gleicht sich das über
   die Spalten hinweg nicht aus. Gemessen: 184 px gegen 163 px. */
.platform small { font-weight: 400; color: var(--muted); font-size: .82rem;
  line-height: 1.35; min-height: 2.7em; }

/* ---------- Vertrauensband (Store-Zahlen unter dem Plattform-Band) ---------- */
.trust-sec { padding: 2.4rem 0; border-bottom: 1px solid var(--line); background: var(--soft); }
.trust {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem 2.5rem; grid-template-columns: 1fr; text-align: center;
}
@media (min-width: 700px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust li { display: flex; flex-direction: column; gap: .25rem; }
.trust__value {
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--heading);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.trust__label { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.trust__src { text-align: center; color: var(--muted); font-size: .82rem; margin: 1.2rem 0 0; }

/* ---------- Plattform-Band (Schnellwahl direkt unter dem Hero) ---------- */
.platform-band-sec { padding: 2.2rem 0; border-bottom: 1px solid var(--line); background: var(--surface); }
/* Ab 1000 px schaut das geneigte Gerätebild aus dem Hero 5 % nach unten in dieses
   Band (siehe .hero-device). Bei rund 1440 px Fensterbreite stieß es genau an das
   Ende von „CalcTape gibt es für:“. Der zusätzliche Kopfabstand setzt die Zeile
   unter die Silhouette – unabhängig von der Fensterbreite. */
@media (min-width: 1000px) { .platform-band-sec { padding-top: 4.8rem; } }
.platform-band__label { text-align: center; color: var(--muted); font-weight: 700; font-size: .92rem; letter-spacing: .04em; margin: 0 0 1.1rem; }
.pchips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
/* Unter 640 px bricht die Zeile unter dem Logo dreizeilig um und steht 90 px über
   derselben Wortfolge im Hero – dort ist sie entbehrlich. */
@media (max-width: 639px) { .brand-tag { display: none; } }

/* Einordnende Zeile unter einem Raster (welche Funktionen die Freeware je nach
   Plattform mitbringt) – kleiner als der Fließtext, aber kein Kleingedrucktes. */
.grid-note {
  max-width: 60ch; margin: 1.8rem auto 0; text-align: center;
  color: var(--muted); font-size: .93rem; line-height: 1.6;
}
/* „Pro“ hinter einer Kartenüberschrift */
.tag-pro {
  display: inline-block; margin-left: .45rem; vertical-align: middle;
  background: rgba(3,162,221,.14); color: var(--btn-outline-ink);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .1rem .45rem; border-radius: 999px;
}
.pchip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .95rem .45rem .5rem; color: var(--heading); font-weight: 700; font-size: .95rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.pchip:hover { transform: translateY(-2px); border-color: #cfe0f0; color: var(--blue-text); box-shadow: var(--shadow); }
.pchip .pico {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(3,162,221,.1); color: var(--cyan-dark);
}
.pchip .pico svg { width: 18px; height: 18px; }
.pchip.is-detected { border-color: var(--cyan); color: var(--blue-text); box-shadow: 0 6px 18px rgba(3,162,221,.28); }

/* Fußnote unter der Verfügbarkeits-/Preismatrix */
.cmp-note { margin: .9rem 0 0; color: var(--muted); font-size: .88rem; text-align: center; }

/* Preis-Fußnoten-Sternchen an jedem Preis; Erläuterung steht in der Fußzeile. */
.price-fn { color: var(--cyan); font-weight: 700; margin-left: .1em; }
.page-head .price-fn { color: #9fc6e6; }
/* Preis-Disclaimer als Fußnote direkt unter dem Block mit den Sternchen:
   unter der Preis-/Verfügbarkeitstabelle (dann zusätzlich .cmp-note) oder –
   auf Plattformseiten ohne Tabelle – unter den Pillen im Seitenkopf. */
.price-note { margin: .6rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.price-note.cmp-note { margin-top: .5rem; }
.price-note__mark { font-weight: 700; margin-right: .35em; }
.price-note--head { color: #9fc6e6; max-width: 62ch; margin-top: 1rem; }
.ct-money { white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 2.6rem auto 0; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 1rem; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.4rem;
  font-weight: 700; color: var(--heading); display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: 0 0 auto; width: 22px; height: 22px; transition: transform .2s ease; color: var(--cyan-dark); }
.faq summary .chev svg { width: 22px; height: 22px; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details > div { padding: 0 1.4rem 1.2rem; color: var(--muted); }
.faq details > div p { margin: 0; }

/* FAQ-Kategorien (gegliedert) */
.faq-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 2.4rem auto 0; max-width: 800px;
}
.faq-tab {
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
  color: var(--blue-text); background: var(--surface); border: 1px solid var(--line);
  padding: .5rem 1.1rem; border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.faq-tab:hover { transform: translateY(-2px); border-color: #cfe0f0; }
.faq-tab[aria-selected="true"] {
  background: var(--cyan); color: #fff; border-color: var(--cyan);
  box-shadow: 0 6px 18px rgba(3,162,221,.3);
}
.faq-group { max-width: 800px; margin: 1.8rem auto 0; }
.faq-group > h3 {
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-text); margin: 2.2rem 0 1rem;
}
.faq-group:first-of-type > h3 { margin-top: 1.6rem; }
.faq--js .faq-group[hidden] { display: none; }

/* ---------- Subpage-Kopf (kompakt, mit Netz) ----------
   <main> ist ein Grid mit einer Spalte, jede Sektion belegt eine Zeile. Der
   Seitenkopf (<section class="page-head">, display: contents) bringt vier Zeilen-
   Kinder mit: .page-head__bg (Verlauf, Netz-Canvas, Kopfaufnahme) überlappt als
   Zeile 1–3 die Textzeilen .page-head__top (Brotkrumen), .page-title (H1 – klebt
   beim Scrollen, siehe „Klebender Seitentitel") und .page-head__body (Rest).
   Nur so kann die H1 selbst kleben: position: sticky haftet innerhalb des
   Elternkastens, und der ist hier <main>, nicht der Kopf. Zeile 3 ist 1fr, damit
   eine Mindesthöhe des Hintergrunds (Kopfaufnahme, Hero) unter dem Text Platz
   lässt, statt die drei Zeilen gleichmäßig auseinanderzuziehen. Die Startseite
   (.hero) folgt demselben Muster. */
main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(auto, 1fr); }
.page-head { display: contents; color: #fff; }
.page-head__bg {
  grid-row: 1 / span 3; grid-column: 1;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
}
/* Der Container im Hintergrundkasten füllt ihn ganz aus – Bezug für die absolut
   gesetzte Kopfaufnahme (wie der Hero-Container bei schoettler). */
.page-head__bg > .container { position: absolute; inset: 0; padding: 0; }
.page-head__top, .page-head__body { grid-column: 1; position: relative; z-index: 2; }
.page-head__top { grid-row: 1; }
.page-head__body { grid-row: 3; }
.page-head__top > .container { padding-top: clamp(2.6rem, 7vw, 4.5rem); }
.page-head__body > .container { padding-bottom: clamp(2.6rem, 7vw, 4.5rem); }
.page-head h1 { color: #fff; margin: 0; }
.page-head .crumbs { font-size: .9rem; color: #9fc6e6; margin-bottom: .7rem; }
.page-head .crumbs a { color: #cfe0f0; }
.page-head .crumbs a:hover { color: #fff; }
.page-head .intro { color: #cfe0f0; font-size: 1.15rem; max-width: 60ch; margin: .8rem 0 0; }
.page-head .tagline { display: block; color: var(--cyan); font-weight: 800; }
.page-head .hero-meta .pill { background: rgba(255,255,255,.08); }

/* Perspektivische Kopfaufnahme der Plattformseiten -----------------------------
   Aufbau 1:1 wie das App-Bild im Hero der Startseite (.hero-device): Das Gerät
   liegt IM .container – dessen position:relative ist der Bezug, `right: 0` hält
   es also an der rechten Kante der Textspalte, nicht am Fensterrand – es ist an
   die Höhe des Kopfs gekoppelt und schaut unten ein Stück heraus (deshalb
   overflow-y: visible, wie beim Hero). Anders als dort steht in jeder Plattform
   ein anderer Blickwinkel: --tilt und --persp liefert build.py als Inline-
   Variablen (HEAD_TILT), --ar ist das Seitenverhältnis der Aufnahme, aus dem
   hochkante Geräte ihre Breite beziehen (bemessen wird ihre Höhe, wie im Hero).
   Den Rahmen stellt dieselbe .dev-Mechanik wie in der Galerie.
   Das Bild ist Dekoration (aria-hidden): unterhalb von 1000 px, wo der Text die
   ganze Breite braucht, entfällt es – dieselben Aufnahmen stehen weiter unten in
   der Galerie, dort groß und mit Bildunterschrift. */
.head-device { display: none; }
@media (min-width: 1000px) {
  .page-head--shot .page-head__bg {
    min-height: 30rem;             /* Mindestbühne für das Gerät – der Überschuss geht in Zeile 3 (1fr) */
    overflow-x: clip;              /* kein horizontales Scrollen durch die Neigung … */
    overflow-y: visible;           /* … aber das Gerät darf unten herausschauen */
  }
  /* Platz für die Aufnahme: der Text bleibt links davon (der Container im
     Hintergrundkasten ist davon ausgenommen – für die absolut gesetzte Aufnahme
     zählt ohnehin nur sein Rand). */
  .page-head--shot.is-portrait { --head-pad: 18rem; }
  .page-head--shot.is-wide { --head-pad: 32rem; }
  .page-head--shot .container { padding-right: var(--head-pad); }
  .page-head--shot .page-head__bg > .container { padding: 0; }
  /* Ausnahme Hinweiskasten: Er steht im oberen Teil des Kopfs, die Aufnahme
     sitzt auf der Unterkante – er darf sich die Einrückung also zurückholen und
     über die volle Breite laufen (siehe Windows). */
  .page-head--shot .notice { margin-right: calc(-1 * var(--head-pad)); max-width: none; }
  /* Wie im Hero steht jedes Gerät auf der Unterkante und schaut 5 % heraus –
     der Schatten liegt am Kasten und fällt damit auch über den hellen
     Folgeabschnitt. */
  .head-device {
    display: flex; justify-content: flex-end; align-items: flex-end;
    /* z-index 3: über den Textzeilen (2), damit das Überfahren das Gerät trifft;
       der Text weicht ihm über --head-pad aus. Der klebende Titel (40) bleibt darüber. */
    position: absolute; z-index: 3; top: 0; bottom: -5%;
    /* Die perspektivische Neigung macht das Gerät breiter als seinen Kasten
       (die nahe Kante wächst). Bis 1280 px ist die Lücke neben dem Container zu
       schmal dafür – overflow-x: clip schnitte sonst die Kante ab. */
    right: 3rem;
    perspective: var(--persp, 1600px);
    perspective-origin: var(--porigin, 8% 45%);   /* Fluchtpunkt: immer links */
    filter: drop-shadow(0 40px 55px rgba(0, 0, 0, .45));
    animation: riseIn .7s ease .2s both;
  }
  /* Querformat (Fenster, Mac, Tablet, Karte) nach Breite … */
  .head-device--wide .dev { width: 28rem; }
  /* … Hochformat (Telefon, freigestelltes Gerät) nach Höhe: Zielhöhe × Seiten-
     verhältnis, damit das Gerät den Kopf ausfüllt statt in einer Ecke zu kleben. */
  .head-device--portrait .dev { width: calc(29rem * var(--ar, .47)); }
  /* Kein Zoom-Zeiger: die Lightbox gehört zur Galerie, hier ist nichts klickbar.
     margin:0 – automatische Ränder saugen im Flex-Kontext den freien Platz auf. */
  .head-device .dev {
    cursor: default; margin: 0;
    transform: var(--tilt);
    transform-origin: center 60%;
    transition: transform .3s ease;
  }
  /* Hover wie im Hero: nur leicht größer, die Neigung bleibt. */
  .head-device:hover .dev { transform: var(--tilt) scale(1.04); }
}
/* Ab hier ist die Lücke neben dem Container breit genug für die Neigung; das
   Querformat wächst NICHT mit – der Container ist bei 1140 px gedeckelt, ein
   breiteres Gerät ginge nur von der Textspalte ab. */
@media (min-width: 1280px) {
  .page-head--shot .page-head__bg { min-height: 32rem; }
  .head-device { right: 0; }
  .head-device--portrait .dev { width: calc(31rem * var(--ar, .47)); }
  .head-device--wide .dev { width: 30rem; }
  .page-head--shot.is-wide { --head-pad: 34rem; }
}

/* ---------- Handbuch-/Doku-Kacheln ---------- */
/* Handbuch-Kacheln: 5 in einer Reihe, dann 3+2, 2+2+1, 1. Hochformatige Karten
   (Zeichen oben, darunter OS-Name und Kapitelzahl, Pfeil unten rechts) – die
   Reihe ist der Hauptinhalt der Seite und soll auch so viel Fläche bekommen.
   Der Pfeil sitzt absolut, damit Name und Kapitelzahl über die volle Kartenbreite
   laufen; beim Überfahren rückt er ein Stück nach rechts. */
.docs { display: grid; gap: 1.2rem; grid-template-columns: repeat(5, 1fr); margin-top: 3rem; }
@media (max-width: 1160px) { .docs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .docs { grid-template-columns: 1fr; } }
.doc {
  position: relative; display: flex; flex-direction: column; gap: .95rem;
  align-items: flex-start; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.3rem; box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.doc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfe0f0; color: var(--ink); }
.doc .pico {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff;
}
.doc .pico svg { width: 25px; height: 25px; fill: #fff; }
.doc__text { display: block; }
.doc strong { display: block; color: var(--heading); font-size: 1.12rem; line-height: 1.25; }
.doc small { display: block; margin-top: .2rem; color: var(--muted); font-size: .88rem; }
.doc .arrow {
  position: absolute; right: 1.2rem; bottom: 1.15rem; color: var(--cyan-dark);
  transition: transform .18s ease;
}
.doc:hover .arrow { transform: translateX(3px); }
.doc .arrow svg { width: 20px; height: 20px; }
/* Ab der 3-Spalten-Stufe sind die Karten breiter als hoch – dort ist die
   kompakte Zeile (Zeichen · Name · Pfeil) die bessere Form. */
@media (max-width: 1160px) {
  .doc { flex-direction: row; align-items: center; gap: .9rem; padding: 1.15rem 1.3rem; }
  .doc .pico { width: 42px; height: 42px; }
  .doc .pico svg { width: 23px; height: 23px; }
  .doc .arrow { position: static; margin-left: auto; }
}

/* Schlusshinweis unter der FAQ – mittig wie Überschrift und Filterreihe. */
.faq-note { max-width: 800px; margin: 2.6rem auto 0; text-align: center; color: var(--muted); }

/* ---------- Screenshot-Galerie (Plattform-Seiten) ----------------------------
   .section--stage  Bühne: weiche Fläche mit dezentem Marken-Schimmer
   .gallery         Anordnung: .gal-item--lead groß (optional mit Beistellgerät
                    in .gal-pair), .gal-grid als Raster, .gal-item--wide breit
   .dev             Geräterahmen um den Screenshot – reines CSS, keine Bilder.
   Die Maße sind Prozentwerte der Gehäusebreite, damit derselbe Rahmen in jeder
   Größe stimmt (Prozent-Padding/-Margin beziehen sich immer auf die Breite).
   Bei randlosen Telefonen liefert build.py --rx/--ry: den Eckenradius getrennt
   für beide Achsen, sonst würden aus runden Ecken bei hochkanten Bildern Eier.
   -------------------------------------------------------------------------- */
.section--stage { background: var(--soft); position: relative; overflow: hidden; }
.section--stage > * { position: relative; }
.section--stage::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1250px, 130%); height: 60%; pointer-events: none;
  background: radial-gradient(56% 100% at 50% 0%, rgba(3, 162, 221, .17), rgba(3, 162, 221, 0) 72%);
}
.section--stage .lead { margin-top: 1rem; }

.gallery {
  --dev-shadow: 0 22px 46px -18px rgba(19, 35, 57, .55);
  display: grid; gap: clamp(2.4rem, 5vw, 3.8rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.gal-item { margin: 0; text-align: center; }
.gal-item figcaption {
  margin: 1.1rem auto 0; max-width: 56ch;
  color: var(--muted); font-size: .95rem; line-height: 1.55;
}
.gal-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Enthält das Raster nur Querformat-Aufnahmen (Fenster, Mac, Tablet), braucht es
   breitere Spalten – vier Fensterbilder nebeneinander wären unlesbar klein. */
.gal-grid--wide { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
/* Anzeigegrößen je Gerät und Platz */
.dev { display: block; position: relative; margin-inline: auto; cursor: zoom-in; }
.gal-item--lead .dev--mac,
.gal-item--wide .dev--mac { max-width: 880px; }
.gal-item--lead .dev--tablet,
.gal-item--wide .dev--tablet { max-width: 820px; }
.gal-item--lead .dev--phone, .gal-item--lead .dev--bare,
.gal-item--wide .dev--phone, .gal-item--wide .dev--bare { max-width: 340px; }
.gal-item--lead .dev--window,
.gal-item--wide .dev--window { max-width: 940px; }
.gal-grid .dev--window { max-width: 100%; }
.gal-grid .dev--mac { max-width: 560px; }
.gal-grid .dev--tablet { max-width: 520px; }
.gal-grid .dev--phone, .gal-grid .dev--bare { max-width: 258px; }
.gal-grid .dev--flat { max-width: 100%; }

/* Lead mit Beistellgerät: Tablet und Telefon nebeneinander, leicht überlappend */
.gal-pair { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.gal-pair .dev--phone { width: min(58%, 200px); }
@media (min-width: 720px) {
  .gal-pair { flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; }
  /* Kein margin-inline:auto im Flex-Kontext – automatische Ränder würden den
     freien Platz aufsaugen und die beiden Geräte auseinanderziehen. */
  .gal-pair .dev { margin-inline: 0; }
  .gal-pair .dev--tablet { flex: 1 1 auto; min-width: 0; }
  .gal-pair .dev--phone {
    flex: 0 0 auto; width: clamp(130px, 18%, 196px); margin-left: -4%;
    position: relative; z-index: 2;
  }
}

/* --- Geräterahmen: gemeinsame Teile --- */
/* Beim Überfahren hebt sich das Gerät sanft an. Bewegt wird dabei das Gehäuse,
   NICHT der Link: Verschöbe sich der Link selbst, rutschte er an seiner Unterkante
   unter dem Zeiger weg – :hover fiele weg, das Gerät fiele zurück, :hover griffe
   wieder, und das Bild zappelte. Die Trefferfläche bleibt so, wo sie ist. */
.dev__shell {
  display: block; position: relative;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
a.dev:hover .dev__shell { transform: translateY(-5px); }
.dev__screen { display: block; position: relative; overflow: hidden; background: #fff; line-height: 0; }
.dev__screen img { display: block; width: 100%; height: auto; }
.dev__deco { display: block; }
.dev--mac .dev__shell,
.dev--phone .dev__shell,
.dev--tablet .dev__shell {
  background: linear-gradient(150deg, #55637a 0%, #232e3e 26%, #131a25 55%, #2c374a 82%, #4a586e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 5px rgba(19, 35, 57, .2), var(--dev-shadow);
}

/* Schlichte Karte – Screenshots aus dem Handbuch-Altbestand */
.dev--flat .dev__screen {
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm); background: var(--surface);
}

/* Fenster-Aufnahme: das Fenster steckt schon im Bild – nur weiche Ecken, ein
   Schatten und ein Haarstrich als Kante, kein zweites Gehäuse drumherum. */
.dev--window .dev__screen {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(19, 35, 57, .12), var(--dev-shadow);
}
:root[data-theme="dark"] .dev--window .dev__screen {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--dev-shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dev--window .dev__screen {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--dev-shadow);
  }
}

/* Kein Rahmen – die Aufnahme bringt ihr Gerät schon mit (freigestellt auf
   Transparenz). drop-shadow folgt der Silhouette, box-shadow würde dagegen den
   rechteckigen Bildkasten umranden. */
.dev--bare .dev__screen { background: none; overflow: visible; }
.dev--bare .dev__screen img { filter: drop-shadow(0 18px 26px rgba(19, 35, 57, .3)); }
:root[data-theme="dark"] .dev--bare .dev__screen img { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dev--bare .dev__screen img { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }
}

/* --- Telefon --- */
.dev--phone .dev__shell { padding: 2.6%; }
.dev--phone .dev__screen { border-radius: 3px; }
/* randlos: runde Ecken + Notch, Maße wie im Original-Screenshot.
   Langform absichtlich: „radius-x radius-y“ je Ecke ist eindeutig, während der
   Schrägstrich-Kurzform-Trick mit calc() leichter zu übersehen wäre. */
.dev--phone.is-modern .dev__shell {
  border-top-left-radius:     calc(var(--rx) * 1.16) calc(var(--ry) * 1.16);
  border-top-right-radius:    calc(var(--rx) * 1.16) calc(var(--ry) * 1.16);
  border-bottom-right-radius: calc(var(--rx) * 1.16) calc(var(--ry) * 1.16);
  border-bottom-left-radius:  calc(var(--rx) * 1.16) calc(var(--ry) * 1.16);
}
.dev--phone.is-modern .dev__screen {
  border-top-left-radius:     var(--rx) var(--ry);
  border-top-right-radius:    var(--rx) var(--ry);
  border-bottom-right-radius: var(--rx) var(--ry);
  border-bottom-left-radius:  var(--rx) var(--ry);
}
.dev--phone.is-modern .dev__shell::before,
.dev--phone.is-modern .dev__shell::after {          /* Seitentasten */
  content: ""; position: absolute; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #78889f, #2c3746);
}
.dev--phone.is-modern .dev__shell::before { left: -2px; top: 26%; height: 13%; }
.dev--phone.is-modern .dev__shell::after { right: -2px; top: 30%; height: 9%; }
/* Maße aus dem Original-Screenshot: 51,7 % breit, 3,35 % hoch, unten mit rund
   20 px Radius (bei 1242 px Bildbreite). Hier je eine Winzigkeit größer, damit
   die weiße Notch-Fläche des Screenshots vollständig darunter verschwindet. */
.dev__notch {
  position: absolute; z-index: 2; top: -1px; left: 50%; transform: translateX(-50%);
  width: 52.4%; height: 3.4%; background: #0d1219;
  border-bottom-left-radius: 3.2% 19%;
  border-bottom-right-radius: 3.2% 19%;
}
/* klassisch: schmale Ränder, Hörmuschel oben, Home-Taste unten */
.dev--phone.is-classic .dev__shell { padding: 19% 6%; border-radius: 26px; }
.dev--phone.is-classic .dev__deco {                 /* Hörmuschel */
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-top: 10.5%;
  width: 17%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2);
}
.dev--phone.is-classic .dev__deco::before {         /* Frontkamera darüber */
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 5px; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.dev--phone.is-classic .dev__shell::after {         /* Home-Taste */
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  margin-bottom: 3.5%; width: 12%; padding-top: 12%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

/* --- Tablet --- */
.dev--tablet .dev__shell { padding: 2.4%; border-radius: 22px; }
.dev--tablet .dev__screen { border-radius: 6px; }
.dev--tablet .dev__deco {                           /* Frontkamera in der Blende */
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-top: .95%;
  width: .6%; padding-top: .6%; border-radius: 50%; background: rgba(255, 255, 255, .3);
}

/* --- MacBook: Deckel mit Kinn, darunter die Basis mit Griffmulde --- */
.dev--mac { margin-bottom: 14px; }
.dev--mac .dev__shell { padding: 1.5% 1.5% 2.8%; border-radius: 14px 14px 9px 9px; }
.dev--mac .dev__screen { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.dev--mac .dev__shell::before {                     /* Kamera über dem Bildschirm */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  margin-top: .5%; width: .45%; padding-top: .45%; border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}
.dev--mac .dev__deco {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 112%; padding-top: 1.25%; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #d3dae4 0%, #aab3c1 45%, #7b8697 100%);
  box-shadow: 0 10px 20px -10px rgba(19, 35, 57, .55);
}
.dev--mac .dev__deco::before {                      /* Griffmulde */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; padding-top: .5%; border-radius: 0 0 7px 7px; background: #98a2b1;
}

/* --- Lightbox (js/site.js) --- */
.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3.6rem, 8vw, 5rem) clamp(1rem, 8vw, 5rem);
  background: rgba(8, 14, 22, .88);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(100%, 1120px); text-align: center; }
.lightbox__fig img {
  max-width: 100%; max-height: 74vh; width: auto; margin-inline: auto;
  /* Grund in der Seitenfarbe: Aufnahmen mit transparentem Rand (Fensterschatten der
     Windows-Bilder) bekämen sonst nachts einen weißen Rahmen. */
  border-radius: 10px; background: var(--bg); box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
.lightbox__cap {
  margin: 1.1rem auto 0; max-width: 62ch; color: #cfe0f0;
  font-size: .95rem; line-height: 1.55;
}
.lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  /* Halbdunkel gefüllt mit hellem Rand: bleibt sowohl auf dem dunklen Hintergrund
     als auch über einem hellen Screenshot erkennbar (die Pfeile liegen auf
     schmalen Bildschirmen zwangsläufig ein Stück über dem Bild). */
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(19, 35, 57, .6);
  color: #fff; font: inherit; transition: background .15s ease;
}
.lightbox__btn:hover { background: rgba(19, 35, 57, .88); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.lightbox__prev, .lightbox__next { top: 50%; margin-top: -23px; }
.lightbox__prev { left: clamp(.6rem, 2.5vw, 1.6rem); }
.lightbox__next { right: clamp(.6rem, 2.5vw, 1.6rem); }
@media (prefers-reduced-motion: reduce) {
  .dev__shell { transition: none; }
  a.dev:hover .dev__shell { transform: none; }
}

/* ---------- Handbuch-Detailseiten ---------- */
.manual-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .manual-layout { grid-template-columns: 240px 1fr; align-items: start; } }

/* Klebender Seitentitel: Die H1 des Seitenkopfs bleibt beim Scrollen unter dem
   Kopfmenü stehen – das Element selbst, keine Kopie in einer zweiten Leiste. Ihr
   Kasten .page-title ist Zeile 2 des Grids in <main> und sticky; weil <main> sein
   Elternkasten ist, haftet er bis zum Seitenende. Der Rest des Kopfs (Brotkrumen
   davor, Einleitung und Buttons dahinter) schiebt sich darunter hindurch. Sie tritt
   an die Stelle der früheren zweiten Leiste mit Textkopie, die erst eingeblendet
   wurde, wenn die H1 schon ganz verschwunden war.

   Ohne JS bleibt die H1 eine gewöhnliche Überschrift (.js-pagetitle fehlt): sticky
   ohne eigenen Hintergrund ließe die Einleitung durch den Titel hindurchlaufen.
   Mit JS setzt js/site.js (Abschnitt 9) `.is-stuck`, sobald der Kasten am Kopfmenü
   andockt. Dann legt sich davor die navyfarbene Leiste (::before, volle Breite,
   --page-title-h hoch), und die H1 wird darin zur kompakten Zeile: absolut gesetzt,
   einzeilig mit Auslassungspunkten, die Schriftgröße gleitet in .25 s hinüber. Der
   Kasten behält dabei seine Höhe – JS friert sie als min-height ein –, denn die
   Zeile darf nicht schrumpfen: Der Inhalt darunter rückte nach, und die
   Scroll-Verankerung des Browsers geriete mit dem Andocken in eine Schleife. Ist
   der Kasten höher als die Leiste (mehrzeilige Titel), bleibt der Rest unsichtbar
   und lässt Klicks durch (pointer-events). Beim Ablegen (.is-leaving) wächst die
   H1 an Ort und Stelle zurück, darf wieder umbrechen und kehrt erst danach in den
   Fluss zurück – so springt nichts. `.no-anim` schaltet die Übergänge kurz ab,
   wenn JS den Kasten neu vermisst (erster Aufruf, Fenstergröße).

   Die Leistenhöhe steht als --page-title-h bereit; daran messen sich Ankersprünge
   (scroll-padding-top) und das klebende Inhaltsverzeichnis der Handbücher. */
.page-title { grid-row: 2; grid-column: 1; position: relative; z-index: 2; }
.page-title > .container { position: relative; }
.page-title h1 { transition: font-size .25s ease, letter-spacing .25s ease; }
/* Zeichen vor dem Titel (Handbuchseiten): nur in der Leiste */
.page-title h1 > svg { display: none; width: 20px; height: 20px; vertical-align: -.25em; margin-right: .55rem; }
.js-pagetitle .page-title { position: sticky; top: var(--header-h); z-index: 40; }
.page-title.is-stuck { pointer-events: none; }
.page-title.is-stuck::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--page-title-h);
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow: var(--shadow-sm); pointer-events: auto;
  transition: opacity .25s ease;
}
.page-title.is-stuck h1 {
  position: absolute; left: 0; right: 0; top: 0; max-width: none; pointer-events: auto;
  animation: none;                      /* der Hero-Auftritt (riseIn) gilt hier nicht */
}
.page-title.is-stuck:not(.is-leaving) h1 {
  height: var(--page-title-h); line-height: var(--page-title-h);
  right: 9.5rem;                        /* Platz für „Nach oben" am rechten Rand */
  font-size: 1.05rem; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-title.is-stuck:not(.is-leaving) h1 > svg { display: inline-block; }
.page-title.is-leaving::before { opacity: 0; }
.page-title.no-anim h1, .page-title.no-anim::before { transition: none; }
/* Klick auf die angedockte Leiste (Band, Titel oder der Link „Nach oben") scrollt
   zum Seitenanfang – js/site.js, Abschnitt 9. Der Link (page() → with_top_link())
   ist nur angedockt sichtbar und damit auch nur dann fokussierbar; ohne JS dockt
   nichts an, er bleibt aus. Wie .subnav-top bei schoettler. */
.page-title.is-stuck::before, .page-title.is-stuck h1 { cursor: pointer; }
.page-title__top {
  display: none; position: absolute; right: 0; top: 0; height: var(--page-title-h);
  align-items: center; gap: .35rem; padding: 0 .1rem;
  color: #cfe0f0; font-weight: 800; font-size: .9rem; white-space: nowrap;
  pointer-events: auto;
}
.page-title__top svg { width: 18px; height: 18px; }
.page-title__top:hover { color: #fff; }
.page-title.is-stuck:not(.is-leaving) .page-title__top { display: inline-flex; }
@media (max-width: 720px) {
  /* schmal: nur der Pfeil (Text bleibt für Vorlese-Programme erhalten) */
  .page-title__top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-title.is-stuck:not(.is-leaving) h1 { right: 2.4rem; }
}

/* Plattform-/Handbuch-Umschalter */
.manual-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.manual-switch a {
  font-weight: 700; font-size: .9rem; color: var(--cyan-dark); background: var(--surface);
  border: 1px solid var(--line); padding: .45rem 1rem; border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.manual-switch a:hover { transform: translateY(-2px); border-color: #cfe0f0; }
.manual-switch a[aria-current="page"] { background: var(--cyan); color: #fff; border-color: var(--cyan); }

/* Inhaltsverzeichnis (Sidebar / oben) */
.toc {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; font-size: .95rem;
}
/* Klebendes Inhaltsverzeichnis mit eigenem Scrollbereich: bei langen Handbüchern
   passt es sonst nicht auf den Schirm, und die hinteren Punkte wären erst am
   Dokumentende erreichbar. overscroll-behavior verhindert, dass das Scrollen am
   Ende auf die Seite überspringt. */
@media (min-width: 900px) {
  .toc {
    position: sticky;
    top: calc(var(--header-h) + var(--page-title-h) + 18px);
    max-height: calc(100vh - var(--header-h) - var(--page-title-h) - 36px);
    display: flex; flex-direction: column;
  }
  /* Nur die Liste scrollt – die Überschrift „Inhalt" bleibt stehen. */
  .toc ul {
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    margin-right: -.5rem; padding-right: .5rem;
  }
}
.toc h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: .5rem; line-height: 1.35; }
.toc a { color: var(--ink); font-weight: 700; }
.toc a:hover { color: var(--cyan-dark); }

/* Prose-Erweiterungen: Bilder, Anker, Code */
.prose figure { margin: 1.6rem 0; }
.prose figure img {
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.prose figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
/* Handbuch-Abbildungen sind anklickbar: Der Link zeigt aufs Bild – ohne JS
   öffnet der Klick die Datei, mit JS die Lightbox (js/site.js, Abschnitt 7).
   Gebraucht wird er, seit build.py -> fig_width() die Abbildungen auf
   FIG_MAX_H deckelt: Details stehen klein im Text, das Original ist einen Klick
   entfernt. `width: fit-content` legt den Link um das Bild statt um die ganze
   Textspalte – sonst läge die Trefferfläche neben der Abbildung. */
.prose figure a.figzoom {
  display: block; width: fit-content; max-width: 100%;
  cursor: zoom-in; border-radius: 12px;
}
.prose figure a.figzoom img { transition: box-shadow .15s ease, border-color .15s ease; }
.prose figure a.figzoom:hover img { box-shadow: var(--shadow); border-color: #cfe0f0; }
/* Theme-Screenshots: helle Variante als Standard, dunkle im Nachtmodus.
   Folgt dem data-theme der Seite (Drei-Stufen-Schalter); ohne JS greift der
   prefers-color-scheme-Fallback (Crawler/kein JS sehen die helle Variante).
   Gilt für die Handbuch-Bilder wie für die Screenshot-Galerie. */
/* Eine Aufnahme auf der Startseite: breit, gerahmt wie eine Fensterkante. */
.home-shot { margin: 2.8rem auto 0; max-width: 900px; }
/* Die Aufnahme bringt Fensterkante und runde Ecken schon mit (transparent
   freigestellt, Radius 10 px wie .dev--window). Deshalb kein eigener Rahmen und
   ein drop-shadow, der der Silhouette folgt – box-shadow umrandete den
   rechteckigen Bildkasten (dieselbe Überlegung wie beim Hero-Bild). */
.home-shot img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; filter: drop-shadow(0 18px 40px rgba(19, 35, 57, .18));
}
:root[data-theme="dark"] .home-shot img { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .home-shot img { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
}
.home-shot figcaption {
  margin-top: .9rem; text-align: center; color: var(--muted); font-size: .9rem;
}

.shot.shot--dark { display: none; }
:root[data-theme="dark"] .shot.shot--light { display: none; }
:root[data-theme="dark"] .shot.shot--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot.shot--light { display: none; }
  :root:not([data-theme]) .shot.shot--dark { display: block; }
}
.prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h) + var(--page-title-h) + 18px); }
.prose h2 .anchor, .prose h3 .anchor {
  opacity: 0; text-decoration: none; color: var(--cyan); margin-left: .4rem; font-weight: 700;
}
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose code {
  background: var(--soft); border: 1px solid var(--line); border-radius: 6px;
  padding: .1em .4em; font-size: .92em;
}
.prose pre {
  background: var(--soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.2rem; margin: 1.4rem 0; overflow-x: auto;
  font-size: .9rem; line-height: 1.55;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose blockquote {
  margin: 1.4rem 0; padding: .2rem 1.2rem; border-left: 3px solid var(--cyan);
  background: var(--soft); border-radius: 0 10px 10px 0; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.mtable-wrap { margin: 1.5rem 0; overflow-x: auto; }
.prose table.mtable {
  width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--surface);
}
.prose .mtable th, .prose .mtable td {
  border: 1px solid var(--line); padding: .55rem .8rem; text-align: left; vertical-align: top;
}
.prose .mtable thead th { background: var(--soft); font-weight: 600; color: var(--heading); }
.prose .mtable tbody tr:nth-child(even) td { background: var(--soft); }

/* Status-Hinweis (Handbuch-Fallback) */
.form-msg { border-radius: 10px; padding: .9rem 1.2rem; font-weight: 700; margin-bottom: 1.2rem; }
.form-msg.ok { background: rgba(10,125,74,.12); border: 1px solid rgba(10,125,74,.3); color: #0a7d4a; }
.form-msg.err { background: rgba(200,16,46,.10); border: 1px solid rgba(200,16,46,.3); color: var(--error); }

@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   Status-Hinweis im Seitenkopf (.page-head, navy)
   Für Plattformen, die gerade nicht erhältlich sind (Frontmatter status_*).
   Bewusst nur für den dunklen Kopfbereich gestaltet – dort steht er.
   ========================================================================= */
.notice {
  display: flex; gap: .9rem; align-items: flex-start;
  max-width: 62ch; margin-top: 1.8rem; padding: 1rem 1.2rem;
  background: rgba(231,102,14,.14); border: 1px solid rgba(231,102,14,.45);
  border-left: 4px solid #f08a33; border-radius: 12px;
  color: #eef2f6;
}
.notice__icon { flex: 0 0 auto; margin-top: .1rem; color: #f8ab63; }
.notice__icon svg { width: 22px; height: 22px; display: block; }
.notice__title { display: block; color: #ffd0a8; margin-bottom: .3rem; }
.notice p { margin: 0; font-size: .98rem; line-height: 1.55; }
.notice a { color: #ffd0a8; text-decoration: underline; }
/* Im Fließtext (Handbuch-Hinweis, frontmatter `notice`): Textfarbe der Seite,
   Akzent über Token – die Kopf-Fassung oben rechnet mit navy Grund. */
.notice--prose { max-width: none; margin: 0 0 1.8rem; color: var(--ink); }
.notice--prose .notice__title, .notice--prose a { color: var(--notice-ink); }

/* Kachel-Marker im Plattform-Hub (z. B. "Beta") */
.platform { position: relative; }
.platform__badge {
  position: absolute; top: .6rem; right: .6rem;
  background: rgba(231,102,14,.14); color: #a04607;   /* 5,3:1 auf dem getönten Grund (#b4500a lag bei 4,4:1) */
  border: 1px solid rgba(231,102,14,.35); border-radius: 999px;
  padding: .1rem .5rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================================
   Kontakt- / Support-Formular (1:1 von schoettler.com, scss/_contact.scss)
   Serverseite: send-email.php + form-token.php + form-guard.php im Root.
   ========================================================================= */
.section--contact { padding-top: calc(var(--space) + 1.25rem); }
.contact-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1.3fr; align-items: start; max-width: 1040px; margin-inline: auto; }
.contact-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 4vw, 2.2rem);
}
.contact-trust {
  border-left: 3px solid var(--btn-primary); padding: .15rem 0 .15rem 1rem;
  margin: 0 0 1.5rem; color: var(--heading); font-weight: 700;
}
.info-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.info-list li {
  margin: 0; padding: .85rem .95rem; display: flex; gap: .75rem; align-items: flex-start;
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
}
.info-list svg { width: 20px; height: 20px; fill: var(--cyan-dark); flex: 0 0 auto; margin-top: .15rem; }
.info-list a { font-weight: 700; font-size: 1.02rem; }
.contact-hint { color: var(--muted); margin-top: 1.5rem; }

.form-intro { font-weight: 700; color: var(--heading); margin: 0 0 .3rem; font-size: 1.05rem; }
.form-required { color: var(--muted); font-size: .88rem; margin: 0 0 1.5rem; }

.field { margin-bottom: 1.15rem; }
.field > label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--heading); font-size: .95rem; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; padding: .72rem .85rem; border: 1px solid var(--field-border); border-radius: 10px;
  font: inherit; color: var(--ink); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--btn-primary); box-shadow: 0 0 0 3px rgba(3,162,221,.18);
}
.field textarea { min-height: 150px; resize: vertical; }
/* Native Optionsliste an die Flächenfarbe koppeln – sonst zeigt color-scheme:dark
   ein graues Popup, das nicht zum Design passt. */
.field select option { background-color: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .field select option:checked { background-color: var(--soft); }

.radio-row { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.radio-row label { font-weight: 400; display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.check a { font-weight: 700; }
.check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin-top: .12rem; flex: 0 0 auto;
  accent-color: var(--btn-primary); cursor: pointer;
}
/* Honeypot: aus Layout und Sicht entfernt, aber im DOM (Spam-Schutz) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.contact-card form button[type="submit"] {
  width: 100%; justify-content: center; margin-top: .6rem; padding-block: .95rem; font-size: 1.05rem;
}
.contact-footnote {
  max-width: 1040px; margin: 2.6rem auto 0; padding-top: 2rem;
  border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 1.02rem;
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Tag-/Nachtmodus
   Die dunkelblauen Marken-Flächen (Header, Hero, page-head, section--navy,
   Produkt-Band, CTA, Footer) bleiben in beiden Modi gleich – sie tragen bereits
   eigene dunkle Hintergründe + helle Schrift. Im Nachtmodus werden nur die hellen
   Flächen dunkel: über die semantischen Tokens. Wenige Akzente werden aufgehellt.
   ========================================================================= */
:root[data-theme="dark"] {
  --bg:      #0c131c;
  --notice-ink: #ffd0a8;
  --surface: #161f2b;
  --soft:    #101924;
  --ink:     #c9d3df;
  /* Sekundärtext: #a3b3c5 statt #8c9eb2 – kleine graue Unterzeilen (13 px) kamen
     gerendert nur auf ~4:1; jetzt 7,8:1 auf Karten, 8,7:1 auf der Seite (AAA). */
  --muted:   #a3b3c5;
  /* Ränder: 16 % statt 10 % Weiß, damit Karten und Tabellen sich vom Grund abheben. */
  --line:    rgba(255,255,255,.16);
  /* Akzent-Vordergrund (Häkchen, Pfeile, Chevrons, Listen-Symbole, Umschalter):
     die Tagfarbe #0285b8 kommt auf dunklem Grund nur auf 3,8–4,5:1, #4cc0ee auf 7,7–9:1. */
  --cyan-dark: #4cc0ee;
  --btn-outline-ink: #4cc0ee;
  --heading: #dde6f1;
  --btn-primary: #0b76a0;
  --btn-primary-bg: #0b76a0;
  --blue-text: #6cb6e0;
  --field-border: rgba(255,255,255,.24);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow:    0 12px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-theme="dark"] .btn--outline { color: #1c8fbf; border-color: #1c8fbf; }
:root[data-theme="dark"] .btn--outline:hover { background: #0b76a0; color: #fff; }
:root[data-theme="dark"] .btn--primary { box-shadow: 0 6px 18px rgba(0,0,0,.4); }
:root[data-theme="dark"] .btn--primary:hover { background: #095f82; }
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .platform:hover,
:root[data-theme="dark"] .doc:hover,
:root[data-theme="dark"] .faq-tab:hover,
:root[data-theme="dark"] .manual-switch a:hover { border-color: var(--cyan-dark); }
:root[data-theme="dark"] .platform:hover { color: #8ad6f5; }
/* Grünes Häkchen der Editionen-Tabelle: #0a7d4a käme auf der dunklen Karte nur auf 3,2:1. */
:root[data-theme="dark"] .cmp .yes svg { fill: #3ccf8a; }
:root[data-theme="dark"] .cmp tbody tr:hover td,
:root[data-theme="dark"] .cmp tbody tr:hover th { background: #1e3047; }
:root[data-theme="dark"] .form-msg.ok { background: rgba(10,125,74,.20); color: #87e3b6; }
:root[data-theme="dark"] .form-msg.err { background: rgba(200,16,46,.24); color: #f98b9d; }
:root[data-theme="dark"] .platform__badge { color: #f8ab63; }
/* Die Geräterahmen der Screenshot-Galerie bleiben graphitfarben (echte Geräte
   wechseln ja auch nicht die Farbe) – nur ihr Schlagschatten wird tiefer. */
:root[data-theme="dark"] .gallery { --dev-shadow: 0 22px 46px -18px rgba(0,0,0,.8); }

/* Fallback ohne JavaScript: System-Einstellung respektieren (nur Tokens) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0c131c; --surface: #161f2b; --soft: #101924; --notice-ink: #ffd0a8;
    --ink: #c9d3df; --muted: #a3b3c5; --line: rgba(255,255,255,.16); --cyan-dark: #4cc0ee;
    --btn-outline-ink: #4cc0ee;
    --heading: #dde6f1; --btn-primary: #0b76a0; --btn-primary-bg: #0b76a0; --blue-text: #6cb6e0;
    --field-border: rgba(255,255,255,.24);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow: 0 12px 30px rgba(0,0,0,.5); --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
    color-scheme: dark;
  }
  :root:not([data-theme]) .gallery { --dev-shadow: 0 22px 46px -18px rgba(0,0,0,.8); }
  :root:not([data-theme]) .cmp .yes svg { fill: #3ccf8a; }
}

/* Weicher Übergang beim Umschalten */
body, .card, .price, .platform, .doc, .toc, .faq details, .cmp, .tape,
.section--soft, .prose code, .manual-switch a, .faq-tab,
.contact-card, .info-list li, .field input, .field select, .field textarea {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero .tagline, .hero h1, .hero p, .hero-actions, .hero-device, .hero-device > .container,
  .head-device { animation: none !important; }
  .head-device .dev { transition: none; }
  .page-title::before { transition: none; }
  .hero .mark { background-size: 100% 38% !important; animation: none !important; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .tape__caret { animation: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}