/* ILS Dispo – Website
   Nachtbilder und echte Bildschirmfotos, dunkles Anthrazit wie das Programm, Stahlblau für Blaulicht und Auswahl.
   Schriften liegen lokal in assets/fonts (SIL Open Font License), es wird nichts von fremden Servern geladen. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-700-normal.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-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #141618;
  --bg-2: #1a1c1f;
  --surface: #212327;
  --surface-2: #2a2d32;
  --line: #34383e;
  --line-strong: #565b62;
  --ink: #e9e7e2;
  --ink-strong: #f7f5f0;
  --ink-soft: #c3c5c9;
  --muted: #a9acb1;
  --accent: #4874a0;
  --accent-hover: #3f6890;
  --blue: #8fb6da;
  --shade: 14, 16, 18;            /* Grundton der Abdunklungen über Bildern */
  --fms-1: #43a047; --fms-2: #2e7d32; --fms-3: #f9a825; --fms-4: #ef6c00;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 6px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  /* Abstands-Skala: alle Abstände kommen aus diesen Stufen (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px) */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 24px; --a-6: 32px; --a-7: 48px; --a-8: 64px; --a-9: 96px;
  --abschnitt: clamp(64px, 7vw, 96px);    /* zwischen zwei Abschnitten (Handy 64, groß 96) */
  --kopf: clamp(32px, 4vw, 48px);         /* unter einer Abschnittsüberschrift, unter dem Seitenkopf */
  --block: clamp(24px, 3vw, 32px);        /* zwischen Blöcken in einem Abschnitt */
  color-scheme: dark;
}

/* ---------- Grundlagen ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink-strong); margin: 0; line-height: 1.04; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
p { margin: 0; max-width: 64ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--ink-strong); color: var(--bg); padding: 10px 14px; border-radius: 4px; }
.skip:focus { top: 12px; }
.eyebrow { font: 600 0.8125rem/1.35 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.eyebrow::before { content: ""; display: inline-block; width: 20px; height: 2px; background: currentColor; vertical-align: middle; margin: -2px 10px 0 0; }   /* wie der farbige Rand der Bereiche im Programm */
.small { font-size: 0.9375rem; color: var(--muted); }
.section { padding-block: var(--abschnitt) 0; }
main > .section:last-child { padding-bottom: var(--abschnitt); }   /* Luft vor „Weiter auf der Website“ */
.page-hero + .section { padding-top: var(--kopf); }
.section-head { display: grid; gap: var(--a-3); margin-bottom: var(--kopf); max-width: 780px; }
.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.section-head p { color: var(--muted); font-size: 1.125rem; }

/* Knöpfe */
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.schluss { display: grid; justify-items: center; gap: var(--a-4); text-align: center; max-width: 760px; margin-inline: auto; padding: var(--a-7) var(--a-6); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); }
.schluss h2 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.schluss p { color: var(--ink-soft); margin-inline: auto; }
.schluss .actions { justify-content: center; padding-top: var(--a-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: 600 1rem/1 var(--font-body); padding: 15px 20px; border-radius: 4px; border: 1px solid transparent; min-height: 48px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--ink-strong); border-color: rgba(247, 245, 240, 0.42); background: rgba(var(--shade), 0.35); }
.btn-ghost:hover { border-color: var(--ink-strong); }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }

/* KI-Kennzeichnung direkt am Bild: ein kleines „KI“ unten rechts in der Bildecke; der volle Text („KI-generiertes Bild“)
   steht als Tooltip (title) und für Screenreader (sr-only) daneben. Dunkler Grund zu 75 % deckend: Auch über reinem Weiß
   oder hellem Blau bleibt der Kontrast über 8 : 1. */
.ki-tag { position: absolute; z-index: 3; right: 10px; bottom: 10px; font: 700 0.6875rem/1 var(--font-body); letter-spacing: 0.06em; color: #f7f5f0; background: rgba(10, 12, 14, 0.75); border-radius: 3px; padding: 3px 5px; cursor: help; }
.hero > .ki-tag { bottom: calc(clamp(96px, 14vw, 180px) + 14px); }   /* über dem Karussell, das den Aufmacher unten überdeckt */
@media (max-width: 760px) {
  .hero > .ki-tag { bottom: auto; top: calc(min(80vw, 520px) - 40px); }   /* Handy: unten rechts im Bild, über dem Text */
  .cta > .ki-tag { bottom: auto; top: calc(min(68vw, 440px) - 72px); }
}
@media (max-width: 560px) { .band > .ki-tag { bottom: auto; top: calc(62.5vw - 30px); } }   /* Bild über dem Text: unten rechts im Bild */

/* ---------- Kopf ---------------------------------------------------------------------------- */
.site-head { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head.over { position: absolute; inset-inline: 0; top: 0; border-bottom: 0; background: transparent; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 18px; flex-wrap: wrap; }
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink-strong); }
.wordmark b { font: 700 1.6rem/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.wordmark span { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; padding-block: 8px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .nav-cta { border: 1px solid rgba(247, 245, 240, 0.4); border-radius: 4px; padding: 8px 12px; }
.nav .nav-cta:hover { border-color: var(--ink-strong); color: var(--ink-strong); }
@media (max-width: 700px) {
  .site-head .wrap { padding-block: 14px 8px; }
  .nav { width: 100%; gap: 0 18px; }
  .nav .nav-cta { display: none; }
}
/* Handy: vier Einträge (seit „Start“) passen ab 340 px in eine Zeile */
@media (max-width: 430px) { .nav { gap: 0 14px; } .nav a { font-size: 0.92rem; } }
@media (max-width: 360px) { .wordmark span { display: none; } .nav { gap: 0 11px; } .nav a { font-size: 0.875rem; } }

/* ---------- Aufmacher der Startseite -------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 66%; }
/* Breite Bildschirme: Bild endet über dem Karussell und läuft weich aus – so bleibt mehr vom Motiv sichtbar */
@media (min-width: 761px) {
  .hero-media img { height: calc(100% - clamp(96px, 14vw, 180px)); -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent); mask-image: linear-gradient(180deg, #000 76%, transparent); }
}
.hero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(var(--shade), 0.96) 0, rgba(var(--shade), 0.9) calc(var(--gutter) + 520px), rgba(var(--shade), 0.5) calc(var(--gutter) + 720px), rgba(var(--shade), 0.05) calc(var(--gutter) + 980px)),
  linear-gradient(0deg, var(--bg) 0%, rgba(var(--shade), 0) 34%),
  linear-gradient(180deg, rgba(var(--shade), 0.7) 0%, rgba(var(--shade), 0) 18%); }
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(30% 34% at 80% 56%, rgba(61, 123, 255, 0.35), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: glow 2.6s ease-in-out infinite alternate; }
  @keyframes glow { from { opacity: 0; } to { opacity: 1; } }
}
.hero .wrap { padding-block: clamp(140px, 15vw, 180px) clamp(150px, 16vw, 210px); }
.hero-text { display: grid; gap: 20px; max-width: 600px; }
.hero h1 { font-size: clamp(2.9rem, 6.6vw, 4.6rem); letter-spacing: -0.005em; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero .lead { font-size: clamp(1.0625rem, 1.5vw, 1.2rem); }
.hero .local { font-size: 0.9375rem; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.hero .local::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fms-1); box-shadow: 0 0 0 4px rgba(67, 160, 71, 0.2); flex: none; }
.hint { font-size: 0.875rem; color: #b9bbbf; max-width: 46ch; }
/* Lesbarkeit über Bildern allein über die Abdunklung des Bildes (kein Schatten um die Schrift, der sie weich macht) */
.hero .eyebrow, .band .eyebrow { color: #bcd5ee; }   /* über Bildern ein helleres Blau, damit es auch vor Lichtern 4,5 : 1 erreicht */
/* Mittlere Breiten: der Text steht hier direkt über dem Fahrzeug, also unter dem Text kräftiger abdunkeln */
@media (min-width: 761px) and (max-width: 1099px) {
  .hero-shade { background:
    linear-gradient(90deg, rgba(var(--shade), 0.96) 0%, rgba(var(--shade), 0.9) 45%, rgba(var(--shade), 0.62) 72%, rgba(var(--shade), 0.3) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(var(--shade), 0) 34%),
    linear-gradient(180deg, rgba(var(--shade), 0.7) 0%, rgba(var(--shade), 0) 18%); }
}
/* Handy: Bild oben, Text darunter auf ruhigem Grund */
@media (max-width: 760px) {
  /* Handy: Kopfzeile über dem Bild statt darauf, Bild läuft unten weich aus, Text beginnt erst darunter */
  .site-head.over { position: relative; background: var(--bg); border-bottom: 1px solid var(--line); }
  .hero-media { bottom: auto; height: min(80vw, 520px); }
  .hero-media img { object-position: 97% 50%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero-shade { background: none; }
  .hero-glow { bottom: auto; height: min(80vw, 520px); background: radial-gradient(55% 40% at 70% 70%, rgba(61, 123, 255, 0.35), transparent 70%); }
  .hero .wrap { padding-block: calc(min(80vw, 520px) + 4px) 40px; }
  .actions .btn { flex: 1 1 auto; }
}

/* ---------- Bildschirmfotos zum Blättern ---------------------------------------------------- */
/* Ohne JavaScript: ein Monitor mit seitlich scrollbarem Streifen (.slides). Mit JavaScript (karussell.js) wird daraus eine
   Reihe (.cf): vorn das aktuelle Foto im Monitorrahmen, links und rechts die Nachbarn kleiner, nach hinten versetzt und
   abgedunkelt. Breite des vorderen Monitors und Zahl der Seitenfotos je Breite stehen hier, die Lage rechnet das Skript. */
.showcase { position: relative; z-index: 2; margin-top: clamp(-180px, -14vw, -96px); overflow-x: clip; }
.stage { position: relative; max-width: 1180px; margin-inline: auto; --cf-w: 64%; --cf-seiten: 1; --cf-x1: 0.64; --cf-s1: 0.72; --cf-s2: 0.52; --cf-r: 16; --cf-d1: 0.42; --cf-d2: 0.62; }
.mon { margin: 0; }
.bezel { background: #0b0c0e; border-radius: 10px; padding: 8px; box-shadow: 0 0 0 1px #3a3e44, 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 0 90px -30px rgba(61, 123, 255, 0.45); }
.screen { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #15171a; position: relative; }
.mon::after { content: ""; display: block; width: 18%; height: 18px; margin: 0 auto; background: linear-gradient(180deg, #0b0c0e, #1a1c1f); border-radius: 0 0 6px 6px; }
.mon-main { position: relative; z-index: 2; width: var(--cf-w); margin-inline: auto; }
.slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
.slide picture, .cf-card picture { display: contents; }   /* <picture> mit Handy-Ausschnitt: das Bild füllt den Bildschirm wie bisher */

/* Reihe (nur mit JavaScript) */
.cf-an .mon-main { display: none; }
.cf { display: grid; perspective: 1700px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.cf.cf-zieht { cursor: grabbing; }
.cf-card { grid-area: 1 / 1; justify-self: center; width: var(--cf-w); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: inherit; transform-origin: 50% 50%; }
.cf-bewegt .cf-card { will-change: transform, opacity; }   /* nur während einer Bewegung eigene Ebenen */
/* Das vordere Foto auf eigener Ebene: Die Seitenfotos (gedreht, also eigene Ebenen) überlappen es; ohne eigene Ebene
   rechnet Chrome es bei 125 und 150 % Skalierung mit ihnen zusammen und zeichnet es weich (gemessen: 27 % Schärfe). */
.cf-card.ist-vorn img { will-change: transform; }
.cf-card .bezel, .cf-card .screen { display: block; }
.cf-card img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.cf-dim { position: absolute; inset: 0; z-index: 1; background: #08090b; opacity: 0; pointer-events: none; }
.cf-card:focus-visible { outline: none; }
.cf-card:focus-visible .bezel { outline: 3px solid var(--blue); outline-offset: 3px; }
.cf-blende { opacity: 0.12; }
@media (prefers-reduced-motion: reduce) { .cf { transition: opacity 0.16s ease; } }

.car-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; max-width: 820px; margin: 18px auto 0; }
.car-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-strong); display: grid; place-items: center; cursor: pointer; padding: 0; }
.car-btn:hover { border-color: var(--blue); color: var(--blue); }
.car-btn svg { width: 22px; height: 22px; }
.car-text { text-align: center; display: grid; gap: 4px; min-height: 3.4em; align-content: start; max-width: none; }   /* mittig unter dem Foto */
.car-text b { font: 700 1.3rem/1.15 var(--font-display); color: var(--ink-strong); }
.car-text span { font-size: 0.9375rem; color: var(--ink-soft); }
.car-quelle { font-size: 0.8125rem; color: var(--muted); }
.car-quelle:empty { display: none; }
.car-dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 4px; }
.car-dots button { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.car-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.car-dots button[aria-current="true"]::before { background: var(--blue); transform: scale(1.3); }
.car-note { text-align: center; font: 500 0.8125rem/1.4 var(--font-mono); color: var(--muted); padding-top: 6px; margin-inline: auto; }
/* Ohne JavaScript: wischen oder seitlich scrollen. Knöpfe, Punkte und die Bildunterschrift entfallen – die Unterschrift
   könnte ohne Skript nicht mit dem Foto wechseln. */
.no-js .car-btn, .no-js .car-dots, .no-js .car-text { display: none; }
.no-js .car-bar { grid-template-columns: minmax(0, 1fr); }
/* Ab Tablettbreite über die ganze Breite: vorn das Foto mit 60 bis 78 % der Breite, so groß, dass es mit Bildunterschrift
   in die Fensterhöhe passt (190 px für Rahmen, Fuß und Unterschrift); die Nachbarn schauen am Rand hervor
   (--cf-x1: auto = das Skript legt ihren Außenrand an den Fensterrand). */
@media (min-width: 761px) {
  .stage { max-width: none; margin-inline: calc(-1 * var(--gutter)); --cf-w: clamp(60%, calc((100vh - 190px) * 16 / 9 + 16px), 78%); --cf-x1: auto; --cf-s1: 0.7; --cf-r: 12; }
  @supports (height: 100svh) { .stage { --cf-w: clamp(60%, calc((100svh - 190px) * 16 / 9 + 16px), 78%); } }
  .car-text { min-height: 4.6em; }   /* Platz für die Quellenzeile beim Luftbild, damit nichts springt */
}
/* Große Bildschirme (ab 1600 px): vorn 55 bis 62 % der Breite, so dass Foto, Unterschrift, Pfeile und Punkte mit Luft
   ins Fenster passen (330 px für Rahmen, Fuß, Unterschrift, Punkte und Rand oben und unten). */
@media (min-width: 1600px) {
  .stage { --cf-w: clamp(55%, calc((100vh - 330px) * 16 / 9 + 16px), 62%); }
  @supports (height: 100svh) { .stage { --cf-w: clamp(55%, calc((100svh - 330px) * 16 / 9 + 16px), 62%); } }
}
@media (max-width: 760px) {
  .showcase { margin-top: 8px; }
  .stage { --cf-w: 100%; --cf-x1: 0.66; --cf-s1: 0.74; --cf-r: 10; }   /* Handy: das breite Foto über die volle Inhaltsbreite; die Nachbarn schauen im Seitenrand hervor */
  .bezel { padding: 5px; border-radius: 8px; }
  .mon::after { height: 12px; }
  .car-btn { width: 44px; height: 44px; }
  .car-text b { font-size: 1.15rem; }
  /* Pfeile und Punkte in einer Zeile direkt unter dem Foto, die Bildunterschrift darunter über die volle Breite:
     so braucht sie weniger Zeilen (ihre feste Höhe setzt karussell.js, damit beim Blättern nichts springt) */
  .car-bar { row-gap: 10px; }
  .car-btn[data-dir="-1"] { grid-row: 1; grid-column: 1; }
  .car-dots { grid-row: 1; grid-column: 2; gap: 0; align-self: center; }
  .car-dots button { width: 28px; height: 28px; flex: none; }   /* Tippfläche bleibt mindestens 24 px */
  .car-btn[data-dir="1"] { grid-row: 1; grid-column: 3; }
  .car-text { grid-row: 2; grid-column: 1 / -1; padding-inline: 4px; }
}
@media (max-width: 359px) { .car-bar { column-gap: 8px; } .car-btn { width: 40px; height: 40px; } .car-dots button { width: 26px; } }

/* ---------- Großansicht (grossansicht.js) --------------------------------------------------- */
.grossansicht-offen { overflow: hidden; }
.grossansicht { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--ink); overflow: hidden; }
.grossansicht[open] { display: grid; place-items: center; }
.grossansicht::backdrop { background: rgba(8, 9, 11, 0.9); }
.grossansicht-bild { margin: 0; display: grid; gap: 10px; justify-items: center; align-content: center; padding: 72px 12px 16px; max-width: 100%; max-height: 100%; }
.grossansicht-bild img { max-width: min(100%, 2560px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: 4px; background: #15171a; box-shadow: 0 0 0 1px #3a3e44, 0 30px 80px -20px rgba(0, 0, 0, 0.9); }
.grossansicht-bild figcaption { text-align: center; display: grid; gap: 2px; max-width: 70ch; }
.grossansicht-bild figcaption b { font: 700 1.2rem/1.2 var(--font-display); color: var(--ink-strong); }
.grossansicht-bild figcaption span { font-size: 0.9375rem; color: var(--ink-soft); }
.grossansicht-bild figcaption small { font-size: 0.8125rem; color: var(--muted); }
.grossansicht-bild figcaption:empty, .grossansicht-bild figcaption b:empty, .grossansicht-bild figcaption span:empty, .grossansicht-bild figcaption small:empty { display: none; }
.grossansicht-zu { position: fixed; top: 12px; right: 12px; z-index: 1; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(247, 245, 240, 0.6); background: rgba(20, 22, 24, 0.92); color: var(--ink-strong); display: grid; place-items: center; cursor: pointer; padding: 0; }
.grossansicht-zu:hover { border-color: var(--ink-strong); background: var(--surface-2); }
.grossansicht-zu svg { width: 26px; height: 26px; }

/* ---------- Vergleich mit Trennlinie (vergleich.js) ----------------------------------------- */
/* Ohne JavaScript: beide Bilder untereinander, jedes mit seinem Namen. Mit JavaScript: übereinander, links das erste,
   rechts das zweite Bild; --teil ist die Lage der Trennlinie. */
.vergleich { margin: 0; display: grid; gap: 10px; min-width: 0; }
.vergleich-bilder { display: grid; gap: 12px; width: var(--raster-w, 100%); max-width: 100%; justify-self: center; }   /* Breite: Stufe (Pixelgenau, unten) */
.vergleich-teil { margin: 0; position: relative; box-shadow: 0 0 0 1px var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }   /* Linie als Schatten: das Foto bekommt die volle Stufenbreite */
.vergleich-teil img { width: 100%; height: auto; }
.vergleich-name { position: absolute; bottom: 36px; z-index: 3; font: 600 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-strong); background: rgba(10, 12, 14, 0.82); border: 1px solid rgba(247, 245, 240, 0.22); border-radius: 3px; padding: 4px 8px; pointer-events: none; }
.vergleich-a .vergleich-name { left: 10px; }
.vergleich-b .vergleich-name { right: 10px; }
.vergleich figcaption { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--muted); }
.vergleich-an .vergleich-bilder { position: relative; display: block; gap: 0; box-shadow: 0 0 0 1px var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; --teil: 50%; }
.vergleich-an .vergleich-teil { box-shadow: none; border-radius: 0; }
.vergleich-an .vergleich-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--teil)); }
.vergleich-an .vergleich-b img { height: 100%; object-fit: cover; }
.vergleich-an img { pointer-events: none; -webkit-user-drag: none; }
.vergleich-regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.vergleich-linie { position: absolute; top: 0; bottom: 0; left: var(--teil); z-index: 4; width: 2px; margin-left: -1px; background: var(--ink-strong); box-shadow: 0 0 0 1px rgba(10, 12, 14, 0.55); pointer-events: none; }
.vergleich-griff { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(20, 22, 24, 0.92); border: 2px solid var(--ink-strong); color: var(--ink-strong); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.vergleich-griff svg { width: 24px; height: 24px; }
/* :focus statt :focus-visible: den Regler erreicht nur die Tastatur (Maus und Finger greifen die Fläche), so ist der Rahmen
   in jedem Browser verlässlich da */
.vergleich-regler:focus ~ .vergleich-linie .vergleich-griff { outline: 3px solid var(--blue); outline-offset: 3px; }
.vergleich-zieht .vergleich-griff { background: var(--accent); }

/* ---------- Vorteile ------------------------------------------------------------------------ */
.benefits { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.benefit { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.benefit .zeichen { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(143, 182, 218, 0.12); box-shadow: inset 0 0 0 1px rgba(143, 182, 218, 0.28); }
.benefit svg { width: 28px; height: 28px; color: var(--blue); }
.benefit h3 { font-size: 1.5rem; }
.benefit p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
/* Die ganze Kachel ist ein Link: der Link sitzt in der Überschrift und spannt sich über die Kachel */
.benefit .kachel-link { color: inherit; text-decoration: none; }
.benefit .kachel-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.benefit .kachel-link:focus-visible { outline: none; }
.benefit:has(.kachel-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.benefit .mehr { margin-top: auto; padding-top: 4px; font-size: .9375rem; font-weight: 600; color: var(--blue); }
@media (hover: hover) { .benefit:hover { border-color: var(--blue); transform: translateY(-3px); background: #24272b; } }
@media (prefers-reduced-motion: reduce) { .benefit { transition: none; } .benefit:hover { transform: none; } }
/* Ruhige, etwas hellere Fläche hinter einem Abschnitt: setzt ihn von den Nachbarn ab */
.flaeche { background: linear-gradient(180deg, var(--bg) 0, var(--bg-2) 140px, var(--bg-2) calc(100% - 140px), var(--bg) 100%); padding-bottom: var(--abschnitt); }
/* Weiter-Link am Ende eines Abschnitts */
.weiter-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 44px; font-weight: 600; color: var(--blue); text-decoration: none; }
.weiter-link:hover { text-decoration: underline; }

/* ---------- Bildbänder ---------------------------------------------------------------------- */
.band { position: relative; overflow: hidden; isolation: isolate; margin-top: var(--abschnitt); min-height: clamp(320px, 36vw, 560px); display: grid; align-items: end; }
.band-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bildbänder und das Interesse-Bild laufen oben weich in den Seitengrund aus (Handy: eigene Darstellung, unten) */
@media (min-width: 561px) { .band-img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px); mask-image: linear-gradient(180deg, transparent 0, #000 140px); } }
@media (min-width: 761px) { .cta-bg img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px); mask-image: linear-gradient(180deg, transparent 0, #000 140px); } }
.band-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(var(--shade), 0.95) 0%, rgba(var(--shade), 0.55) 45%, rgba(var(--shade), 0.2) 100%); }
.band .wrap { position: relative; z-index: 2; width: 100%; padding-block: var(--a-7); display: grid; gap: var(--a-3); }
.band h2 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
/* Handy: Bild oben als eigener Block, Text darunter auf ruhigem Grund statt über dem Bild */
@media (max-width: 560px) {
  .band { display: block; min-height: 0 !important; }
  .band-img { position: relative; display: block; height: auto; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .band-shade { display: none; }
  .band .hero-glow { bottom: auto; height: auto; aspect-ratio: 16 / 10; }
  .band .wrap { padding-block: 4px 8px; }
}
.band p { color: #d6d5d1; font-size: 1.125rem; }
/* Mittlere Breiten: der Text rückt mit dem breiteren Seitenrand weiter ins Bild, links etwas kräftiger abdunkeln */
@media (min-width: 561px) and (max-width: 1099px) {
  .band-shade { background: linear-gradient(90deg, rgba(var(--shade), 0.5) 0%, rgba(var(--shade), 0) 65%),
    linear-gradient(0deg, rgba(var(--shade), 0.95) 0%, rgba(var(--shade), 0.55) 45%, rgba(var(--shade), 0.2) 100%); }
}

/* ---------- Ablauf in vier Schritten -------------------------------------------------------- */
.steps { display: grid; gap: 32px 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; gap: 14px; align-content: start; }
.step .thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); cursor: zoom-in; }
/* Lupe: das Bild lässt sich groß öffnen */
.step .thumb::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(247, 245, 240, 0.25); background: rgba(10, 12, 14, 0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9e7e2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.step .thumb:hover { border-color: var(--blue); }
.step .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .step .thumb img { transition: transform 0.4s ease; } .step .thumb:hover img { transform: scale(1.03); } }
.step-head { display: flex; align-items: baseline; gap: 12px; }
.step-no { font: 600 1rem/1 var(--font-mono); color: var(--bg); background: var(--blue); border-radius: 50%; width: 32px; height: 32px; display: inline-grid; place-items: center; flex: none; box-shadow: 0 0 0 5px rgba(143, 182, 218, 0.15); }
.step h3 { font-size: 1.45rem; }
.step p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.step .rail { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), rgba(143, 182, 218, 0)); }
/* Breit: die Linien laufen von Schritt zu Schritt durch wie eine Zeitleiste */
@media (min-width: 1080px) { .step:not(:last-child) .rail { margin-right: -18px; background: linear-gradient(90deg, var(--blue), rgba(143, 182, 218, 0.4)); } }

/* ---------- Gebiet über dem Straßennetz ----------------------------------------------------- */
.area { display: grid; gap: var(--block); padding-top: var(--kopf); }
@media (min-width: 980px) { .area { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: center; } }
.area-map { margin: 0; position: relative; aspect-ratio: 1040 / 662; background: #0f1113; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.area-netz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.38; }   /* als Bild statt Hintergrund: lädt erst, wenn die Karte in die Nähe kommt */
.area-map svg { position: relative; width: 100%; height: 100%; display: block; }
.map-place { font: 500 24px var(--font-mono); fill: var(--ink-soft); paint-order: stroke; stroke: #0f1113; stroke-width: 7px; stroke-linejoin: round; }
.map-ils-label { font: 600 25px var(--font-mono); fill: var(--blue); paint-order: stroke; stroke: #0f1113; stroke-width: 7px; stroke-linejoin: round; }
@media (max-width: 700px) { .map-place { font-size: 34px; stroke-width: 9px; } .map-ils-label { font-size: 36px; stroke-width: 9px; } }
@media (max-width: 420px) { .map-place { font-size: 40px; stroke-width: 10px; } .map-ils-label { font-size: 42px; stroke-width: 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .ils-pulse { transform-origin: center; transform-box: fill-box; animation: pulse 2.8s ease-out infinite; }
  @keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.875rem; color: var(--muted); padding-top: 12px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats li { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.stats li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.stats b { font: 600 clamp(1.8rem, 3.2vw, 2.4rem)/1 var(--font-mono); color: var(--ink-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats span { font-size: 0.9375rem; color: var(--muted); }
.area-side { display: grid; gap: var(--a-5); min-width: 0; }
/* Karte mit Legende und Zahlen daneben (ab 1100 px): Karte kleiner links, rechts Legende mit der Zahl der Standorte
   je Art, die Kennzahlen und der Text. Schmaler bleibt alles untereinander wie bisher. */
.karte-gebiet { display: grid; }
.legend b, .nur-breit { display: none; }
#map-cap { padding-top: 6px; }
@media (min-width: 1100px) {
  .karte-gebiet { grid-template-columns: minmax(0, 960px) minmax(300px, 400px); gap: var(--a-7); align-items: center; }
  .map-place { font-size: 21px; stroke-width: 6px; } .map-ils-label { font-size: 22px; stroke-width: 6px; }   /* Ortsnamen ruhiger */
  .area { grid-template-columns: minmax(0, 880px) minmax(300px, 480px); gap: var(--a-7); justify-content: start; }
  .karte-seite { display: grid; gap: var(--a-5); align-content: center; min-width: 0; }
  .karte-seite .legend, .area-side .legend { display: grid; gap: 0; padding-top: 0; font-size: 1rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
  .karte-seite .legend li, .area-side .legend li { padding-block: var(--a-3); border-bottom: 1px solid var(--line); }
  .legend b { display: inline; margin-left: auto; font: 600 1.05rem/1 var(--font-mono); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
  .nur-breit { display: grid; }
  #map-cap { padding-top: 0; }
}
.more { font-weight: 600; text-decoration: none; color: var(--blue); }
.more:hover { text-decoration: underline; }

/* ---------- Fahrzeugreihe: alle Bilder im gleichen Maßstab ---------------------------------- */
.fleet { container-type: inline-size; --m: clamp(5px, 1vw, 12px); }
.lineup-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.lineup { display: flex; align-items: flex-end; min-width: max-content; }
.lineup + .lineup { margin-top: 10px; }
.lineup figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.lineup img { height: 78px; width: auto; margin-inline: var(--m); }
.lineup figcaption { align-self: stretch; text-align: center; border-top: 3px solid var(--surface-2); padding-top: 10px; font: 600 0.8125rem/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.fleet-note { font-size: 0.8125rem; color: var(--muted); padding-top: var(--a-4); }
/* Ab Tablettbreite zwei Reihen; die längere untere (Bildbreiten zusammen 1965 bei 200 Höhe) füllt die Zeile */
@media (min-width: 900px) {
  .lineup { min-width: 0; justify-content: center; }
  .lineup img { height: min(140px, calc((100cqi - 12 * var(--m)) * 200 / 1965 - 2px)); }
}

/* ---------- Fahrzeugkatalog (Gebiet und Wachen): je Organisation aufklappbar, Bilder laden erst beim Aufklappen ---------- */
.fz-katalog { display: grid; gap: var(--a-3); }
.fz-gruppe { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.fz-gruppe > summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2) var(--a-4); min-height: 56px; padding: var(--a-3) var(--a-5); cursor: pointer; list-style: none; }
.fz-gruppe > summary::-webkit-details-marker { display: none; }
.fz-gruppe > summary::before { content: ""; width: 10px; height: 10px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-right: 4px; transition: transform .2s ease; }
.fz-gruppe[open] > summary::before { transform: rotate(45deg); }
.fz-gruppe > summary:hover .fz-titel { color: var(--blue); }
.fz-gruppe > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.fz-gruppe[open] > summary { border-bottom: 1px solid var(--line); }
.fz-titel { font: 700 1.4rem/1.1 var(--font-display); color: var(--ink-strong); }
.fz-zahl { font: 600 .8125rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-bottom: -1px; }   /* Trennlinien an den Karten: leere Felder bleiben leer */
.fz { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--a-3) var(--a-4); align-items: center; align-content: start; padding: var(--a-5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fz-bild { grid-column: 1 / -1; display: flex; justify-content: center; align-items: flex-end; height: 104px; border-bottom: 3px solid var(--surface-2); }
.fz-bild img { height: 96px; width: auto; max-width: 100%; }
.fz-zeichen { width: 64px; height: 56px; }
.fz-name { display: grid; gap: 2px; min-width: 0; }
.fz-name b { font: 600 1rem/1.25 var(--font-mono); color: var(--ink-strong); }
.fz-name span { font-size: .9375rem; line-height: 1.35; color: var(--ink-soft); hyphens: auto; overflow-wrap: break-word; }
.fz-name small { font-size: .8125rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fz-gruppe > summary::before { transition: none; } }

/* ---------- Interesse: Headset als Hintergrund ---------------------------------------------- */
.cta { position: relative; overflow: hidden; isolation: isolate; margin-top: var(--abschnitt); background: var(--bg-2); border-top: 1px solid var(--line); }
.cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.cta-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(var(--shade), 0.85) 0%, rgba(var(--shade), 0.6) 38%, rgba(var(--shade), 0.1) 62%, rgba(var(--shade), 0) 78%),
  linear-gradient(180deg, rgba(var(--shade), 0.55) 0%, rgba(var(--shade), 0) 22%),
  linear-gradient(0deg, rgba(var(--shade), 0.6) 0%, rgba(var(--shade), 0) 25%); }
.cta .wrap { padding-block: var(--abschnitt); min-height: clamp(520px, 46vw, 680px); display: grid; align-content: center; }
.cta-text { display: grid; gap: var(--a-4); max-width: 540px; }
@media (min-width: 761px) and (max-width: 1099px) {
  .cta-shade { background:
    linear-gradient(90deg, rgba(var(--shade), 0.9) 0%, rgba(var(--shade), 0.75) 45%, rgba(var(--shade), 0.3) 75%, rgba(var(--shade), 0.1) 100%),
    linear-gradient(180deg, rgba(var(--shade), 0.55) 0%, rgba(var(--shade), 0) 22%),
    linear-gradient(0deg, rgba(var(--shade), 0.6) 0%, rgba(var(--shade), 0) 25%); }
}
.cta h2 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.addr { font: 500 0.9375rem/1.4 var(--font-mono); color: #b9bbbf; }
.mail-tpl { margin: 0; background: rgba(33, 35, 39, 0.82); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font: 500 0.875rem/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
@media (max-width: 760px) {
  .cta-bg { bottom: auto; height: min(68vw, 440px); }
  .cta-bg img { object-position: 90% 50%; }
  .cta-shade { background: linear-gradient(180deg, rgba(var(--shade), 0.35) 0%, rgba(var(--shade), 0.1) 30%, var(--bg-2) calc(min(68vw, 440px) - 4px)); }
  .cta .wrap { min-height: 0; padding-block: calc(min(68vw, 440px) - 40px) 56px; }
}

/* ---------- Kompakte Kopfzeile (seite.js) ---------------------------------------------------- */
/* Erscheint, sobald der Seitenkopf aus dem Bild ist: breit (ab 1024 px) bleibt sie stehen, schmaler kommt sie beim
   Hochscrollen. Auf dem Handy klappt „Seiten“ die Liste auf. */
.kopf-kompakt { position: fixed; inset: 0 0 auto; z-index: 60; background: rgba(20, 22, 24, 0.97); border-bottom: 1px solid var(--line); transform: translateY(-105%); transition: transform .25s ease; }
.kopf-kompakt.zeigen { transform: none; }
@media (prefers-reduced-motion: reduce) { .kopf-kompakt { transition: none; } }
.kopf-kompakt .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 0; }
.kopf-kompakt .wordmark b { font-size: 1.3rem; }
.kopf-kompakt .nav { width: auto; gap: 4px 20px; }
.kopf-kompakt .nav a { padding-block: 6px; }
.kopf-kompakt .menue { display: none; }
@media (max-width: 760px) {
  .kopf-kompakt .nav { display: none; }
  .kopf-kompakt .wordmark { white-space: nowrap; }
  .kopf-kompakt .wordmark span { display: none; }
  .kopf-kompakt .menue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(247, 245, 240, 0.4); border-radius: 4px; background: transparent; color: var(--ink-strong); font: 600 .95rem/1 var(--font-body); cursor: pointer; }
  .kopf-kompakt .menue svg { width: 18px; height: 18px; }
  .kopf-kompakt.offen .nav { display: grid; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; gap: 0; }
  .kopf-kompakt.offen .nav a { padding: 12px 0; border-top: 1px solid var(--line); font-size: 1.05rem; }
  .kopf-kompakt.offen .nav .nav-cta { display: block; border: 0; border-top: 1px solid var(--line); padding: 12px 0; border-radius: 0; }
}

/* ---------- Weiter auf der Website (am Seitenende) ------------------------------------------ */
.weiter { border-top: 1px solid var(--line); background: var(--bg-2); }
.weiter .wrap { padding-block: var(--a-7); display: grid; gap: var(--a-5); }
.weiter h2 { font-size: 1.5rem; }
.weiter-karten { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .weiter-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .weiter-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.weiter-karte { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
.weiter-karte b { font: 700 1.3rem/1.15 var(--font-display); color: var(--ink-strong); }
.weiter-karte b::after { content: " →"; color: var(--blue); }
.weiter-karte span { font-size: .9375rem; color: var(--ink-soft); }
.weiter-karte:hover, .weiter-karte:focus-visible { border-color: var(--blue); }

/* ---------- Drei Designs (Funktionen): ein Foto, drei Auswahlfelder – auch ohne JavaScript ------ */
.designs { margin: 0; display: grid; gap: 14px; min-width: 0; }
.designs-wahl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; border: 0; padding: 0; margin: 0; min-width: 0; }
.designs-wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.designs-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.designs-wahl label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--ink); background: var(--surface); }
.designs-wahl label i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(247, 245, 240, 0.5); }
.designs-wahl input:checked + label { border-color: var(--blue); background: rgba(143, 182, 218, 0.16); color: var(--ink-strong); }
.designs-wahl input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 3px; }
.designs-bilder { position: relative; display: grid; width: var(--raster-w, 100%); max-width: 100%; justify-self: center; box-shadow: 0 0 0 1px var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.designs-bilder img { grid-area: 1 / 1; width: 100%; height: auto; transition: opacity .35s ease; }
.designs-bilder img + img { opacity: 0; }   /* ohne :has() bleibt das erste Foto stehen */
@media (prefers-reduced-motion: reduce) { .designs-bilder img { transition: none; } }
@supports selector(:has(*)) {
  .designs-bilder img { opacity: 0; }
  .designs:has(#d-dunkel:checked) .b-dunkel, .designs:has(#d-hell:checked) .b-hell, .designs:has(#d-blau:checked) .b-blau { opacity: 1; }
}
.designs > figcaption { font: 500 .8125rem/1.4 var(--font-mono); color: var(--muted); text-align: center; }

/* ---------- Sanftes Einblenden beim Hereinscrollen (seite.js; nicht bei „Bewegung reduzieren“) ---- */
@media (prefers-reduced-motion: no-preference) {
  .einblenden { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .einblenden.ist-da { opacity: 1; transform: none; }
}

/* ---------- Fuß ----------------------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { padding-block: var(--a-7) var(--a-8); display: grid; gap: var(--a-5); font-size: 0.9375rem; color: var(--muted); }
.site-foot blockquote { margin: 0; padding-left: 14px; border-left: 2px solid var(--line-strong); max-width: 74ch; color: var(--ink); }
.credits { display: grid; gap: 4px; }
.foot-links { display: flex; gap: 4px 22px; flex-wrap: wrap; }
.foot-links a { padding-block: 6px; }

/* ---------- Unterseiten --------------------------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/strassennetz-1800.webp") 60% 40% / cover no-repeat; opacity: 0.16; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 0%, rgba(var(--shade), 0.6) 60%, rgba(var(--shade), 0.2) 100%); }
.page-hero .wrap { padding-block: var(--abschnitt) var(--kopf); display: grid; gap: var(--a-3); }
.page-hero h1 { font-size: clamp(2.5rem, 5.6vw, 3.6rem); }
.page-hero p { color: var(--ink-soft); font-size: 1.125rem; }

/* Funktionen: je Bereich eine Zeile, Bildschirmfoto daneben oder darunter */
.features { display: grid; border-top: 1px solid var(--line); }
.feature { padding-block: var(--a-7); border-bottom: 1px solid var(--line); min-width: 0; display: grid; gap: var(--a-6); align-content: start; }
.feature-text { display: grid; gap: var(--a-4); align-content: start; min-width: 0; }
.feature h2, .feature h3 { font-size: 1.7rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.feature h2 .tag, .feature h3 .tag { font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--blue); text-transform: uppercase; }
.feature ul { display: grid; align-content: start; }
.feature li { padding-block: 11px; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.shot { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.shot-link { display: block; width: var(--raster-w, auto); max-width: 100%; box-shadow: 0 0 0 1px var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: zoom-in; }
.shot-link:hover { box-shadow: 0 0 0 1px var(--blue); }
.shot img { width: 100%; height: auto; }   /* die Breite (Stufe, höchstens Originalgröße) steht am Link */
.shot figcaption { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--muted); }
.feature-row .shot { max-width: 560px; }
.feature-row.flip .shot-link { margin-left: auto; }   /* Foto links: an den Text heranrücken, wenn es schmaler als seine Spalte ist */
@media (min-width: 760px) {
  .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .feature-row.flip .feature-text { order: 2; }
  .feature-row .shot { max-width: none; }
}
@media (min-width: 1080px) {
  .feature-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .feature-row.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .feature-wide .feature-text ul { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 32px; }
}
.monitore { display: grid; gap: 28px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) { .monitore { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
/* Programmfenster im Monitorrahmen wie im Karussell; Klick öffnet die Großansicht (grossansicht.js) */
.monitor { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.mon-link { display: block; width: calc(var(--raster-w, calc(100% - 16px)) + 16px); max-width: 100%; justify-self: center; color: inherit; text-decoration: none; cursor: zoom-in; border-radius: 10px; }
.mon-link .bezel, .mon-link .screen { display: block; }
.mon-link img { width: 100%; height: 100%; object-fit: contain; }
.mon-link:hover .bezel { box-shadow: 0 0 0 1px var(--blue), 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 0 90px -30px rgba(61, 123, 255, 0.45); }
.monitor figcaption { text-align: center; display: grid; gap: 2px; justify-items: center; }
.monitor figcaption b { font: 700 1.2rem/1.2 var(--font-display); color: var(--ink-strong); }
.monitor figcaption span { font-size: 0.9375rem; color: var(--ink-soft); }
.monitor figcaption small { font-size: 0.8125rem; color: var(--muted); }
.monitore-note { grid-column: 1 / -1; text-align: center; font: 500 0.8125rem/1.4 var(--font-mono); color: var(--muted); margin-inline: auto; }
.feature-pair { display: grid; border-bottom: 1px solid var(--line); }
.feature-pair .feature { gap: 16px; border-bottom: 0; }
@media (max-width: 759px) { .feature-pair .feature:first-child { border-bottom: 1px solid var(--line); } }
@media (min-width: 760px) {
  .feature-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-pair .feature + .feature { border-left: 1px solid var(--line); padding-left: 32px; }
  .feature-pair .feature:first-child { padding-right: 32px; }
}

/* Tabellen */
.table-scroll { overflow-x: auto; min-width: 0; }
table.data { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
table.data th, table.data td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font: 600 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong); }
table.data .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 14px; white-space: nowrap; }
table.data tr.total td { font-weight: 600; color: var(--ink-strong); border-bottom: 0; border-top: 1px solid var(--line-strong); }
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding-block: 14px; border-bottom: 1px solid var(--line); }
  table.stack td { border: 0; padding: 2px 0; }
  table.stack td:first-child { font: 600 1.125rem/1.3 var(--font-display); color: var(--ink-strong); padding-bottom: 6px; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; font: 600 0.6875rem/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  table.stack td + td + td { margin-top: 10px; }
}

/* Gebiet-Unterseite */
.area-grid { display: grid; gap: var(--block); }
@media (min-width: 980px) { .area-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.area-text { display: grid; gap: var(--a-4); min-width: 0; }

/* Projekt */
.two { display: grid; gap: 32px; }
@media (min-width: 900px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.two h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.two h3 { font-size: 1.5rem; }
.prose { display: grid; gap: 14px; align-content: start; }
.prose p { color: var(--ink-soft); }
.plan { display: grid; gap: 8px; margin-top: 16px; }
.plan li { padding-left: 16px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 2px; background: var(--blue); }

/* Rechtstexte und 404 */
.page .wrap { padding-block: var(--kopf) var(--abschnitt); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page .wrap > * { max-width: 860px; }   /* linksbündig am Seitenrand wie die übrigen Seiten */
.page .wrap > p { max-width: 64ch; }     /* Absätze behalten ihre Zeilenlänge */
.page h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.page h2 { font-size: 1.6rem; margin-top: 16px; }

/* ---------- Breite Bildschirme: mehr Fläche, Schrift wächst leicht mit ---------------------- */
/* Ab Tablettbreite ein fester Seitenrand von 5,5 % der Breite (bei 1920 px gut 100 px) statt einer schmalen Mitte;
   Text bleibt durch seine eigene Höchstbreite lesbar. Das Handy (bis 760 px) behält seinen Rand. */
@media (min-width: 761px) { :root { --wrap: 2600px; --gutter: 5.5vw; } }
/* Große Bildschirme nutzen die Breite, zeichnen aber nicht größer: Schrift, Knöpfe und Abstände bleiben wie bei 1440 px.
   Fließtext ab 1100 px höchstens etwa 70 Zeichen je Zeile (56ch in Barlow). */
@media (min-width: 1100px) {
  p, .page .wrap > p, .feature li, .plan li, .page .wrap li, .site-foot blockquote { max-width: 56ch; }
  .car-text { max-width: none; }
}

/* PIXELGENAU-ANFANG */
/* ---------- Pixelgenaue Bildschirmfotos (erzeugt von bauen.py, nicht von Hand ändern) ------------------- */
/* Chrome zeichnet ein Foto nur scharf, wenn ein Pixel der Datei genau ein Bildschirmpixel ist. Ab 761 px stehen
   die Programmfotos deshalb in festen Breiten; zu jeder gibt es Dateien für 100, 125, 150 und 200 % Skalierung
   (srcset/sizes in den Seiten). Ohne passende Stufe bleibt die fließende Breite. */
/* karussell */
@media (min-width: 842px) and (max-width: 1599px) and (min-height: 550px) { .stage { --cf-w: 656px; } }
@media (min-width: 1600px) and (min-height: 690px) { .stage { --cf-w: 656px; } }
@media (min-width: 1006px) and (max-width: 1599px) and (min-height: 622px) { .stage { --cf-w: 784px; } }
@media (min-width: 1600px) and (min-height: 762px) { .stage { --cf-w: 784px; } }
@media (min-width: 1170px) and (max-width: 1599px) and (min-height: 694px) { .stage { --cf-w: 912px; } }
@media (min-width: 1600px) and (min-height: 834px) { .stage { --cf-w: 912px; } }
@media (min-width: 1334px) and (max-width: 1599px) and (min-height: 766px) { .stage { --cf-w: 1040px; } }
@media (min-width: 1678px) and (min-height: 906px) { .stage { --cf-w: 1040px; } }
@media (min-width: 1498px) and (max-width: 1599px) and (min-height: 838px) { .stage { --cf-w: 1168px; } }
@media (min-width: 1884px) and (min-height: 978px) { .stage { --cf-w: 1168px; } }
@media (min-width: 2091px) and (min-height: 1050px) { .stage { --cf-w: 1296px; } }
@media (min-width: 2504px) and (min-height: 1194px) { .stage { --cf-w: 1552px; } }
/* designs */
@media (min-width: 761px) { .designs { --raster-w: 640px; } }
@media (min-width: 863px) { .designs { --raster-w: 768px; } }
@media (min-width: 1007px) { .designs { --raster-w: 896px; } }
@media (min-width: 1151px) { .designs { --raster-w: 1024px; } }
@media (min-width: 1295px) { .designs { --raster-w: 1152px; } }
@media (min-width: 1439px) { .designs { --raster-w: 1280px; } }
@media (min-width: 1726px) { .designs { --raster-w: 1536px; } }
@media (min-width: 2158px) { .designs { --raster-w: 1920px; } }
/* vergleich */
@media (min-width: 761px) { .vergleich { --raster-w: 640px; } }
@media (min-width: 863px) { .vergleich { --raster-w: 768px; } }
@media (min-width: 1007px) { .vergleich { --raster-w: 896px; } }
@media (min-width: 1151px) { .vergleich { --raster-w: 1024px; } }
@media (min-width: 1295px) { .vergleich { --raster-w: 1152px; } }
@media (min-width: 1439px) { .vergleich { --raster-w: 1280px; } }
@media (min-width: 1654px) { .vergleich { --raster-w: 1472px; } }
/* breit */
@media (min-width: 761px) { .shot[data-stufe="breit"] { --raster-w: 640px; } }
@media (min-width: 863px) { .shot[data-stufe="breit"] { --raster-w: 768px; } }
@media (min-width: 1007px) { .shot[data-stufe="breit"] { --raster-w: 896px; } }
@media (min-width: 1151px) { .shot[data-stufe="breit"] { --raster-w: 1024px; } }
@media (min-width: 1295px) { .shot[data-stufe="breit"] { --raster-w: 1152px; } }
@media (min-width: 1439px) { .shot[data-stufe="breit"] { --raster-w: 1280px; } }
@media (min-width: 1654px) { .shot[data-stufe="breit"] { --raster-w: 1472px; } }
/* tableau */
@media (min-width: 761px) { .shot[data-stufe="tableau"] { --raster-w: 640px; } }
@media (min-width: 863px) { .shot[data-stufe="tableau"] { --raster-w: 768px; } }
@media (min-width: 1007px) { .shot[data-stufe="tableau"] { --raster-w: 896px; } }
@media (min-width: 1151px) { .shot[data-stufe="tableau"] { --raster-w: 1024px; } }
@media (min-width: 1295px) { .shot[data-stufe="tableau"] { --raster-w: 1152px; } }
@media (min-width: 1439px) { .shot[data-stufe="tableau"] { --raster-w: 1280px; } }
@media (min-width: 1726px) { .shot[data-stufe="tableau"] { --raster-w: 1536px; } }
@media (min-width: 2445px) { .shot[data-stufe="tableau"] { --raster-w: 2176px; } }
/* zeile */
@media (min-width: 908px) and (max-width: 1079px) { .shot[data-stufe="zeile"] { --raster-w: 384px; } }
@media (min-width: 1080px) { .shot[data-stufe="zeile"] { --raster-w: 384px; } }
@media (min-width: 1118px) { .shot[data-stufe="zeile"] { --raster-w: 512px; } }
@media (min-width: 1382px) { .shot[data-stufe="zeile"] { --raster-w: 640px; } }
@media (min-width: 1645px) { .shot[data-stufe="zeile"] { --raster-w: 768px; } }
@media (min-width: 1909px) { .shot[data-stufe="zeile"] { --raster-w: 896px; } }
@media (min-width: 2272px) { .shot[data-stufe="zeile"] { --raster-w: 1072px; } }
/* monitore */
@media (min-width: 944px) { .monitore { --raster-w: 384px; } }
@media (min-width: 1232px) { .monitore { --raster-w: 512px; } }
@media (min-width: 1520px) { .monitore { --raster-w: 640px; } }
@media (min-width: 1807px) { .monitore { --raster-w: 768px; } }
@media (min-width: 2095px) { .monitore { --raster-w: 896px; } }
@media (min-width: 2383px) { .monitore { --raster-w: 1024px; } }
/* PIXELGENAU-ENDE */