/* ============================================================
   AB IT Solutions – „Platinengrün & Protokoll"
   Zwei Ebenen: editoriale Ebene (Besley/Hanken Grotesk) und
   Protokoll-Ebene (IBM Plex Mono, nur für echte Daten).
   Grün ist ausschließlich Status. Beide Farbmodi sind
   eigenständig entworfen, nicht invertiert.
   ============================================================ */

/* ---------- Schriften (self-hosted, latin) ------------------ */

@font-face {
  font-family: "Besley";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/besley-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ---------- Token: Tag ------------------------------------- */

:root {
  --bg: #F4F5F2;            /* Planpapier */
  --surface: #FFFFFF;       /* Weißfläche */
  --text: #172E3D;          /* Logo-Navy: trägt allen Text */
  --muted: #5B6774;         /* Blaugrau */
  --accent: #9E5614;        /* Druck-Orange: gedrucktes Logo-Orange bei Tag (5,1:1) */
  --accent-hover: #7F450F;
  --accent-ink: #FFFFFF;    /* Text auf Akzentflächen */
  --status: #27754F;        /* Signalgrün – nur Status-Punkte (LEDs bleiben grün) */
  --duotone: #24405C;       /* Grundton der Porträt-Einfärbung */
  --line: #DADDE0;          /* Rasterlinie */
  --line-strong: #C3C8CE;
  --topbar: rgba(244, 245, 242, 0.92);
  /* Elevationslogik Tag: weiche Schatten unter Flächen */
  --shadow: 0 1px 2px rgba(27, 36, 32, 0.05), 0 6px 24px rgba(27, 36, 32, 0.07);

  --font-serif: "Besley", "Bookman Old Style", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap-max: 1160px;
  --pad: clamp(20px, 4vw, 48px);
  --topbar-h: 64px;

  color-scheme: light;
}

/* ---------- Token: Nacht („Serverraum nach Feierabend") ----- */
/* Eigene Flächenlogik: Tonstufen und helle 1px-Oberkanten
   statt Schatten. Die Statusfarbe ist nachts am hellsten. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121B26;          /* Navy-Nacht */
    --surface: #1A2634;     /* Panelfläche */
    --text: #E8E5DF;        /* Kreide */
    --muted: #97A3AF;       /* Nebelblau */
    --accent: #FE9429;      /* Logo-Orange: leuchtet nachts (7,6:1) */
    --accent-hover: #FFA94A;
    --accent-ink: #14202E;
    --status: #4FC98A;      /* Signalgrün hell */
    --duotone: #2E4E6E;     /* tieferes Blau: Porträt bleibt nachts ruhig */
    --line: #283748;        /* Panellinie */
    --line-strong: #3A4D61;
    --topbar: rgba(18, 27, 38, 0.92);
    --shadow: inset 0 1px 0 rgba(232, 229, 223, 0.08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121B26;
  --surface: #1A2634;
  --text: #E8E5DF;
  --muted: #97A3AF;
  --accent: #FE9429;
  --accent-hover: #FFA94A;
  --accent-ink: #14202E;
  --status: #4FC98A;
  --duotone: #2E4E6E;
  --line: #283748;
  --line-strong: #3A4D61;
  --topbar: rgba(18, 27, 38, 0.92);
  --shadow: inset 0 1px 0 rgba(232, 229, 223, 0.08);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4F5F2;
  --surface: #FFFFFF;
  --text: #172E3D;
  --muted: #5B6774;
  --accent: #9E5614;
  --accent-hover: #7F450F;
  --accent-ink: #FFFFFF;
  --status: #27754F;
  --duotone: #24405C;
  --line: #DADDE0;
  --line-strong: #C3C8CE;
  --topbar: rgba(244, 245, 242, 0.92);
  --shadow: 0 1px 2px rgba(23, 46, 61, 0.05), 0 6px 24px rgba(23, 46, 61, 0.07);
  color-scheme: light;
}

/* ---------- Grundgerüst ------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

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

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

h1, h2, h3 { text-wrap: balance; }

p { margin: 0 0 1em; max-width: 66ch; }

/* `video` gehört hier ausdrücklich dazu: ein <video width="1920"> setzt
   sonst seine eigene Größe durch und sprengt auf dem Telefon das
   Layout – die Regel für img allein greift dafür nicht. */
img, video { max-width: 100%; height: auto; }

/* Sanfter Farbübergang beim Themenwechsel (per JS kurz aktiviert) */
html.theming,
html.theming *,
html.theming *::before,
html.theming *::after {
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, fill 0.18s ease !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: 0 0 4px 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus-visible {
  left: 0;
}

/* ---------- Protokoll-Ebene (Mono-Typografie) ---------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

/* ---------- Kopfleiste --------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  min-height: var(--topbar-h);
  flex-wrap: wrap;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-right: auto;
}

.brand-logo {
  height: 28px;
  width: auto;
  flex: none;
}

/* Je Modus die passende Logo-Fassung (Navy bei Tag, Kreide bei Nacht) */
.brand-logo--nacht { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo--tag { display: none; }
  :root:not([data-theme="light"]) .brand-logo--nacht { display: inline-block; }
}
:root[data-theme="dark"] .brand-logo--tag { display: none; }
:root[data-theme="dark"] .brand-logo--nacht { display: inline-block; }
:root[data-theme="light"] .brand-logo--tag { display: inline-block; }
:root[data-theme="light"] .brand-logo--nacht { display: none; }

.topnav {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}

/* Scrollspy-LED: „aktive Sektion" ist ein Status, also grün */
.topnav a[data-spy-link]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.topnav a[data-spy-link].active::before {
  background: var(--status);
  border-color: var(--status);
}
.topnav a:hover {
  color: var(--accent);
}

/* Tag/Nacht-Umschalter: beschriftete Kapsel, kein Icon-Rätsel */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.theme-toggle-opt {
  padding: 6px 14px;
  border-radius: 999px;
}
.theme-toggle-opt.on {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Hero --------------------------------------------- */

.hero {
  padding-block: clamp(84px, 12vh, 160px) clamp(72px, 9vh, 120px);
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
}

.hero-sub {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 34px;
}

/* Die Signatur: Betriebsanzeige */
.statusline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.07em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 13px 20px;
  margin: 0 0 36px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
}

.statusline .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status);
  flex: none;
}

/* Der ruhige Puls existiert nur nachts – wie eine LED im
   abgedunkelten Serverraum. Tagsüber steht der Punkt still. */
@media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) {
  .statusline .dot { animation: puls 2.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .statusline .dot { animation: puls 2.4s ease-in-out infinite; }
  :root[data-theme="light"] .statusline .dot { animation: none; }
}
@keyframes puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-cta { margin: 0; }

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 4px;
  padding: 15px 30px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.btn:hover { background: var(--accent-hover); }

/* ---------- Zonen mit Protokollrand -------------------------- */

.zone { position: relative; }

.zone-inner {
  position: relative;
  padding-block: clamp(64px, 8vw, 116px);
}

/* Die eine durchgehende Achse: beginnt an der ersten Zone,
   trägt alle Sektionslabels, wird zur Zeitleiste, endet im
   Kontakt. Eine Linie, ein Haus, seit 2001. */
.zone-inner::before {
  content: "";
  position: absolute;
  left: calc(var(--pad) + 5px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.zone--first .zone-inner::before { top: 14px; }
.zone--last .zone-inner::before { bottom: 140px; }

/* Endpunkt der Achse: angeschlossen. */
.zone--last .zone-inner::after {
  content: "";
  position: absolute;
  left: var(--pad);
  bottom: 128px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--status);
}

.rail {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
  padding-left: 30px;
}

/* Anschlusspunkt am Label; wird per Scrollspy zur grünen LED */
.rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.zone.active .rail::before {
  background: var(--status);
  border-color: var(--status);
}
.zone.active .rail { color: var(--text); }

@media (min-width: 960px) {
  .zone-inner {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .rail {
    position: sticky;
    top: calc(var(--topbar-h) + 28px);
    margin: 6px 0 0;
  }
  .zone-body { grid-column: 2; }
}

.zone h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.45rem);
  line-height: 1.18;
  margin: 0 0 20px;
}

.lead {
  font-size: 1.12rem;
  max-width: 58ch;
}

/* ---------- Vertrauensleiste --------------------------------- */

.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 40px;
}

.fakt dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.fakt dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}

/* ---------- Leistungs-Stapel --------------------------------- */

.stack-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
  max-width: 640px;
}

.stack-layer {
  display: block;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  padding: 16px 22px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color 0.18s ease;
}
.stack-layer:hover,
.stack-layer.active { border-color: var(--accent); }

/* Fundament unten, breiteste Fläche – ein echter Stapel */
.stack-layer:nth-child(1) { width: 76%; }
.stack-layer:nth-child(2) { width: 88%; }
.stack-layer:nth-child(3) { width: 100%; }

.stack-ebene {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.stack-ebene::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.stack-layer.active .stack-ebene::before {
  background: var(--status);
  border-color: var(--status);
}

.stack-layer strong {
  display: block;
  font-size: 1.12rem;
  font-weight: 600;
}
.stack-desc {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .stack-layer:nth-child(1),
  .stack-layer:nth-child(2),
  .stack-layer:nth-child(3) { width: 100%; }
}

/* ---------- Klemmleiste (Leistungszeilen) --------------------- */

.klemmleiste {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  max-width: 760px;
}

.klemmleiste li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 6px 28px;
  padding-block: 15px;
}
.klemmleiste li + li { border-top: 1px solid var(--line); }

.klemme {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 18px;
  padding-top: 5px;
}
.klemme::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1.5px solid var(--accent);
}

.klemmleiste li > span:last-child { max-width: 56ch; }

@media (max-width: 640px) {
  .klemmleiste li { grid-template-columns: 1fr; }
}

/* ---------- Dreischritt (echte Sequenz) ----------------------- */

.dreischritt {
  list-style: none;
  counter-reset: schritt;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
  max-width: 760px;
}

.dreischritt li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.dreischritt li::before {
  content: counter(schritt);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent);
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

.dreischritt h3 {
  font-size: 1.12rem;
  font-weight: 600;
  margin: 4px 0 6px;
}
.dreischritt p { margin: 0; max-width: 54ch; }

/* ---------- Ehrlichkeits-Zitat (KI) --------------------------- */

.ehrlich {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.4;
  margin: 34px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent);
  max-width: 30ch;
  text-wrap: balance;
}

/* ---------- Zusammenspiel: der Film --------------------------- */
/* Der Film ist in beiden Modi dunkel und trägt durchgehend das
   Nacht-Orange #FE9429 – eine Farbe, die die Seite tagsüber gar
   nicht verwendet (--accent ist dort das gedruckte #9E5614). Er
   wird deshalb nicht als Fläche der Seite behandelt, sondern wie
   das Porträt als gezeigtes Objekt: eine Linie, eine Rundung, ein
   Schatten. Eine Regel für beide Modi, kein Sonderfall. */

.film {
  margin: 36px 0 0;
  max-width: 760px;         /* Textmaß, solange kein Raster da ist */
}

/* Der Film ist das einzige Element der Seite, das aus dem Textkanal
   ausbricht – und zwar mit Grund: er ist stumm, sein gesamter
   Informationskanal ist Text im Bild, gerechnet auf 1920 px. Jedes
   Pixel Breite ist hier unmittelbar Lesbarkeit.

   Er beginnt bei 160 px. Das ist kein runder Wert, sondern der
   kleinste, der nichts kostet: die durchgehende Achse
   (.zone-inner::before) liegt bei var(--pad) + 5px, das Randlabel
   beginnt bei 30 px und endet bei rund 141 px. Beide bleiben
   sichtbar und unüberdeckt. Die vollen 1064 px zu nehmen, hieße die
   Achse für 500 px zu unterbrechen – der schlechteste Tausch, den
   diese Seite anbieten kann. So sind es 904 px statt 760: das
   breiteste Element der Seite, ohne ihr Raster zu beschädigen. */
@media (min-width: 960px) {
  .zone--film .rail {
    grid-column: 1;
    grid-row: 1 / 3;        /* trägt position: sticky über die ganze
                               Sektion; ohne das parkt das Label,
                               sobald der Film den Schirm füllt */
  }
  .zone--film .zone-body { grid-row: 1; }
  .zone--film .film {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin-left: 160px;
  }
}

/* Der Rahmen reserviert 16:9, bevor ein Byte geladen ist. Sein
   Grundton ist der dunkelste Ton des Films selbst – vor dem
   Standbild blitzt nichts auf. */
.film-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #0C141E;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Die globale Regel img { max-width: 100%; height: auto } greift für
   <video> nicht. Ohne diese Zeilen liefe ein <video width="1920">
   mobil aus dem Layout; height: 100% verhindert außerdem, dass die
   intrinsische Größe nach dem Laden der Metadaten das Kastenmaß
   noch einmal ändert. */
/* 16:9 von 904 px geht nicht glatt auf (508,5 px). `cover` würde
   dann stillschweigend beschneiden – bei einem Film, der Feldwerte
   und Kontaktdaten trägt, ist das nicht hinnehmbar. Der Rahmen hat
   ohnehin die Farbe des Films, `contain` kostet also nichts. */
.film-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: #0C141E;
}

/* Abspiel-Auslöser über dem Standbild.
   Ohne JavaScript trägt das Video seine eigenen Bedienelemente und
   dieser Knopf bleibt verborgen. Mit JavaScript werden die
   Bedienelemente erst beim Start eingeblendet – ein pausiertes Video
   zeigt sonst dauerhaft eine schwarze Leiste mit Lautstärkeregler,
   und zwar bei einem Film, der gar keine Tonspur hat. */
.film-start {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8E5DF;                    /* Kreide: liegt immer auf dem Film, nie auf der Seite */
  background: rgba(12, 20, 30, 0.82);
  border: 1px solid rgba(232, 229, 223, 0.28);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.film-start:hover {
  background: rgba(12, 20, 30, 0.94);
  border-color: var(--accent);
}
.film-start[hidden] { display: none; }
/* Der Knopf quittiert den Klick, bevor das erste Bild da ist. */
.film-start[disabled] { cursor: default; opacity: 0.7; }

/* Dreieck aus Rahmenlinien – kein Zeichensatz, keine Grafikdatei */
.film-start-zeichen {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent var(--accent);
}

/* Zwei Register in einer Bildunterschrift: die Kennzeichnung ist
   Protokoll (Mono – Laufzeit und Tonstatus sind echte Daten), die
   Beschreibung ist Prosa und bleibt in der Lesetype. */
.film-legende {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.film-daten {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Die Textfassung des Films.
   Der Film ist stumm und aufgezeichnet, also „video-only“ – WCAG 1.2.1
   verlangt eine gleichwertige Alternative. Beim 18-Sekunden-Loop ohne
   Text reichte die Bildunterschrift dafür aus. Neun Szenen, die Claim,
   Ebenennamen, Feldwerte, Jahreszahlen und Kontaktdaten ausschließlich
   als Bild transportieren, sind damit nicht abgedeckt. Zugeklappt
   kostet die Fassung eine Zeile; wer sie braucht, findet den ganzen
   Bildtext. */
.film-text {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}
.film-text summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.film-text summary:hover { color: var(--text); }

.film-szenen {
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
}
.film-szenen li {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}
.film-zeit {
  flex: 0 0 3.2em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* ---------- Grundsätze ---------------------------------------- */

.grundsaetze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 28px;
  box-shadow: var(--shadow);
}

.panel h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.22rem;
  margin: 0 0 10px;
}
.panel p { margin: 0; font-size: 0.97rem; color: var(--muted); }

/* ---------- Geschichte / Betriebsprotokoll --------------------- */

.geschichte-grid {
  display: grid;
  gap: 44px;
  align-items: start;
}
@media (min-width: 900px) {
  .geschichte-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}

.zeitleiste {
  position: relative;
  margin: 36px 0 0;
  padding-left: 30px;
  max-width: 620px;
}
.zeitleiste::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line-strong);
}

.zeit {
  position: relative;
  margin-bottom: 30px;
}
.zeit:last-child { margin-bottom: 0; }
.zeit::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--muted);
}
.zeit:last-child::before {
  background: var(--status);
  border-color: var(--status);
}

.zeit dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.zeit dd { margin: 0; max-width: 52ch; }

/* Porträt in Duotone: fügt sich in beide Modi ein */
.portrait { margin: 0; }
.portrait-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.portrait-frame img {
  display: block;
  width: 100%;
}
.portrait figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- Kontakt -------------------------------------------- */

.kontakt-grid {
  display: grid;
  gap: 44px;
  margin-top: 12px;
  align-items: start;
}
@media (min-width: 900px) {
  .kontakt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.direkt {
  font-weight: 600;
  font-size: 1.08rem;
}

.kontaktdaten {
  margin: 30px 0 0;
  display: grid;
  gap: 14px;
}
.kontaktdaten > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
.kontaktdaten dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.kontaktdaten dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text);
  overflow-wrap: anywhere; /* lange E-Mail-Adressen brechen kontrolliert um */
}
.kontaktdaten dd.platzhalter { color: var(--muted); }
.kontaktdaten dd a { color: var(--text); text-decoration-color: var(--line-strong); }
.kontaktdaten dd a:hover { color: var(--accent); }

/* Formular */
.formular {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow);
}

.feld { display: grid; gap: 7px; margin-bottom: 18px; }
.feld label { font-weight: 600; font-size: 0.95rem; }

.feld input,
.feld textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--muted); /* ≥3:1 Kontrast der Feldgrenze (SC 1.4.11) */
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
}
.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.feld textarea { resize: vertical; min-height: 130px; }

/* Honeypot: für Menschen (und Screenreader) unsichtbar, Bots füllen es aus */
.feld--falle {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-hinweis {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 14px 0 0;
}

/* ---------- Fußzeile -------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 30px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-variant-numeric: tabular-nums;
}
.footer-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status);
}

.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Rechtsseiten ----------------------------------------- */

.rechtsseite {
  padding-block: clamp(56px, 8vw, 96px);
  max-width: 760px;
}
.rechtsseite h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  margin: 0 0 24px;
}
.rechtsseite h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 40px 0 12px;
}
.hinweisbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  margin: 0 0 32px;
  font-size: 0.95rem;
}
.pflichtangabe {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- Einstiegs-Animationen -------------------------------- */
/* Ohne JavaScript ist alles sofort sichtbar; die Klasse „js"
   wird im Head gesetzt. Reduzierte Bewegung: Endzustand sofort. */

html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .statusline .dot,
  :root[data-theme="dark"] .statusline .dot { animation: none !important; }
  .btn,
  .stack-layer,
  .topnav a[data-spy-link]::before,
  .rail::before,
  .stack-ebene::before { transition: none; }
}

/* Sprungziele landen unter der fixierten Leiste; --topbar-real
   wird per JS aus der tatsächlichen Leistenhöhe gemessen */
section[id] { scroll-margin-top: calc(var(--topbar-real, var(--topbar-h)) + 16px); }

/* ---------- Mobile Feinheiten ------------------------------------- */

@media (max-width: 959.98px) {
  /* Achse rückt als schmale Kante in den linken Randbereich */
  .zone-inner::before { left: calc(var(--pad) - 13px); }
  .zone--last .zone-inner::after { left: calc(var(--pad) - 18px); }
  .rail { padding-left: 0; }
  .rail::before { left: -18px; }
}

@media (max-width: 759.98px) {
  .topbar-inner { padding-block: 10px 8px; }
  /* Die Chip-Zeile ist das Flex-Item <nav>, nicht die <ul> –
     so bleibt die Leiste verlässlich zweizeilig */
  .topbar-inner > nav {
    order: 3;
    width: 100%;
    min-width: 0;
  }
  /* Fallback ohne JS: zweizeilige Sticky-Leiste einkalkulieren */
  section[id] { scroll-margin-top: calc(var(--topbar-real, 110px) + 16px); }
  .brand { font-size: 1.1rem; }
  .topnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  /* Fokusring innenliegend, damit ihn der Scrollcontainer nicht kappt */
  .topnav a:focus-visible { outline-offset: -2px; }
  .topnav a {
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.88rem;
    background: var(--surface);
  }
  .theme-toggle { margin-left: auto; }
  .brand { margin-right: 0; }
}

/* ---------- Druck --------------------------------------------------- */
/* Papier ist immer hell: Tag-Token erzwingen (auch bei gewähltem
   Nachtmodus), Einstiegs-Animationen vollständig auflösen. */

@media print {
  :root,
  :root[data-theme="dark"] {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --text: #172E3D;
    --muted: #5B6774;
    --accent: #9E5614;
    --accent-ink: #172E3D; /* Akzentflächen werden nicht mitgedruckt */
    --status: #27754F;
    --duotone: #24405C;
    --line: #DADDE0;
    --line-strong: #C3C8CE;
    --shadow: none;
    color-scheme: light;
  }
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .topbar { position: static; }
  /* Ein dunkles Standbild kostet auf Papier nur Farbe; die
     Bildunterschrift beschreibt ohnehin, was zu sehen wäre. */
  .theme-toggle,
  .film,
  .skip-link { display: none; }
}