/* ============================================================================
   G & M Tiedemann, Klick-Dummy
   Eine Datei. Oben die Werte des Design-Systems TDM-DSG-001 als CSS-Variablen,
   darunter Layout und Bausteine. Es gibt in diesem Blatt keinen Farbwert, der
   nicht aus dem Design-System stammt.

   Eine Abweichung, bewusst und dokumentiert in KLAERUNGSPUNKTE.md unter K-06:
   --action-primary steht auf Signal 700 statt Signal 600. Weiße Schrift auf
   Signal 600 erreicht 4,43:1 und verfehlt die im Briefing geforderten 4,5:1.
   Signal 700 erreicht 5,11:1. Beide Werte stammen aus dem Design-System.
   ========================================================================== */

/* ---------- Schriften, lokal. Kein Aufruf an einen fremden Server. -------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/public-sans-var-latin.woff2") format("woff2");
}

/* ---------- Tokens, aus tiedemann-design-system/tokens/ ------------------- */

:root {
  /* Blau. Marine 700 und 500 sind die gemessenen Bestandswerte der alten Seite */
  --marine-900: #0E2244;
  --marine-700: #15325E;
  --marine-500: #2B5E93;
  --marine-50:  #E7EEF7;

  /* Orange, Kontrastfarbe */
  --signal-700: #B34D00;
  --signal-600: #C25400;
  --signal-500: #9E4300;
  --signal-400: #7A3400;
  --signal-300: #FF9A4D;
  --signal-50:  #FFEBD6;

  /* Neutral */
  --grey-900: #1C1F24;
  --grey-600: #5A626E;
  --grey-400: #9DA4AE;
  --grey-300: #C9CED6;
  --grey-200: #E4E8EE;
  --grey-100: #F2F4F7;
  --white:    #FFFFFF;

  /* Semantik: Text */
  --text-heading: var(--marine-900);
  --text-body: var(--grey-900);
  --text-muted: var(--grey-600);
  --text-accent: var(--signal-700);
  --text-invert: var(--white);
  --text-invert-muted: #E3EAF4;
  --text-disabled: var(--grey-400);

  /* Semantik: Flächen */
  --surface-page: var(--grey-100);
  --surface-card: var(--white);
  --surface-section: var(--marine-50);
  --surface-invert: var(--marine-700);
  --surface-invert-deep: var(--marine-900);
  --surface-highlight: var(--signal-50);
  --surface-disabled: var(--grey-200);

  /* Semantik: Rahmen */
  --border-default: var(--grey-300);
  --border-subtle: var(--grey-200);
  --border-strong: var(--marine-700);
  --border-accent: var(--marine-500);

  /* Semantik: Aktionen. Siehe Kopfkommentar zu --action-primary. */
  --action-primary: var(--signal-700);
  --action-primary-hover: var(--signal-500);
  --action-primary-active: var(--signal-400);
  --action-secondary-border: var(--marine-500);
  --action-secondary-bg-hover: var(--marine-50);
  --action-link: var(--signal-700);
  --action-link-hover: var(--signal-400);

  /* Fokus, Pflicht an jedem bedienbaren Element, Befund B-23 */
  --focus-ring: var(--signal-700);
  --focus-ring-invert: var(--signal-300);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Schrift */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Untergrenze Fließtext 17px, Befund B-18 */
  --text-hero: 34px;
  --text-hero-lg: 56px;
  --text-section: 26px;
  --text-section-lg: 36px;
  --text-card: 21px;
  --text-card-lg: 24px;
  --text-lead: 19px;
  --text-lead-lg: 21px;
  --text-body-size: 17px;
  --text-body-size-lg: 18px;
  --text-ui: 17px;
  --text-label: 15px;
  --text-caption: 14px;

  --leading-hero: 1.08;
  --leading-tight: 1.2;
  --leading-card: 1.3;
  --leading-lead: 1.55;
  --leading-body: 1.6;
  --leading-ui: 1.2;

  --tracking-eyebrow: 0.08em;
  --measure-body: 70ch;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --content-max: 1200px;
  --gutter: 24px;
  --gutter-lg: 40px;
  --grid-gap: 24px;

  /* Klickflächen mindestens 44 x 44, Befund B-24 */
  --hit-min: 44px;
  --control-height: 48px;
  --control-height-lg: 52px;

  /* Form */
  --radius: 2px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --shadow-card-hover: 0 2px 10px rgba(14, 34, 68, 0.14);
  --shadow-raised: 0 2px 14px rgba(14, 34, 68, 0.12);
  --overlay-image: linear-gradient(90deg, rgba(14,34,68,0.94) 0%, rgba(14,34,68,0.82) 55%, rgba(14,34,68,0.62) 100%);
  --placeholder-stripe: repeating-linear-gradient(135deg, #E4E8EE 0 8px, #EDF0F4 8px 16px);

  /* Abschnittsabstand: 64 mobil, 96 Desktop */
  --section-gap: var(--space-16);
}

@media (min-width: 1024px) {
  :root {
    --section-gap: var(--space-24);
    --text-body-size: var(--text-body-size-lg);
    --gutter: var(--gutter-lg);
  }
}

/* ---------- Grundlage ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
}

/* Deutsche Komposita sind laenger als der Schirm schmal ist. Ohne Trennung
   ragt "Kommunikationstechnik" bei 360 Pixeln 43 Pixel ueber den Rand und
   die ganze Seite laesst sich seitlich schieben. Gemessen am 30.08.2026.
   hyphens: auto trennt nach den Regeln der Sprache aus dem lang-Attribut,
   overflow-wrap greift, falls der Browser kein Trennwoerterbuch hat. */
h1, h2, h3, h4 {
  hyphens: auto;
  overflow-wrap: break-word;
}


h1 { font-size: var(--text-hero); line-height: var(--leading-hero); }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-card); line-height: var(--leading-card); }
h4 { font-size: var(--text-lead); line-height: var(--leading-card); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-hero-lg); }
  h2 { font-size: var(--text-section-lg); }
  h3 { font-size: var(--text-card-lg); }
}

p { margin: 0 0 var(--space-4); max-width: var(--measure-body); }
p:last-child { margin-bottom: 0; }

a { color: var(--action-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--action-link-hover); text-decoration-thickness: 2px; }

strong { font-weight: var(--weight-semibold); }

img, svg { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); max-width: var(--measure-body); }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

/* Fokus, überall sichtbar, nie abgeschaltet. Befund B-23. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.on-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--focus-ring-invert);
}

/* ---------- Hilfsklassen ------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  background: var(--white);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-2); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}
.on-dark .eyebrow, .hero .eyebrow { color: var(--signal-300); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--text-body);
}
@media (min-width: 768px) { .lead { font-size: var(--text-lead-lg); } }

.muted { color: var(--text-muted); }

/* ---------- Schaltflächen ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: var(--hit-min);
  padding: var(--space-2) var(--space-6);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--lg { min-height: var(--control-height-lg); }

.btn--primary {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: var(--white);
}
.btn--primary:active {
  background: var(--action-primary-active);
  border-color: var(--action-primary-active);
}

.btn--secondary {
  background: transparent;
  border-color: var(--action-secondary-border);
  color: var(--marine-700);
}
.btn--secondary:hover {
  background: var(--action-secondary-bg-hover);
  border-color: var(--border-strong);
  color: var(--marine-900);
}

.on-dark .btn--secondary, .hero .btn--secondary {
  border-color: var(--white);
  color: var(--white);
}
.on-dark .btn--secondary:hover, .hero .btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-disabled);
  border-color: var(--surface-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* inline-flex statt flex: die Reihe schrumpft auf ihren Inhalt. Zusammen mit
   flex: 1 1 0 an den Schaltflaechen heisst das, alle sind so breit wie die
   breiteste, aber die Reihe zieht sich nicht ueber die ganze Spalte. */
.btn-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  max-width: 100%;
}

/* Gleich breite Schaltflaechen, ueberall. Ohne das richtet sich die Breite
   nach der Beschriftung, und "Jetzt anrufen" gegen "WhatsApp" sieht schief
   aus. Entschieden am 30.08.2026. */
/* Grundbreite 14rem statt 0. Mit 0 schrumpfen die Schaltflaechen bis auf das
   laengste Wort: bei 360 Pixeln standen drei Knoepfe zu je 96 Pixeln
   nebeneinander, dreizeilig beschriftet und teils ueberlaufend. Mit einer
   echten Grundbreite passen sie entweder nebeneinander, dann sind sie gleich
   breit, oder sie brechen um und nehmen je eine ganze Zeile. */
.btn-row .btn {
  flex: 1 1 14rem;
  justify-content: center;
  /* Die Beschriftung bleibt auf einer Zeile. Zweizeilige Knoepfe sahen
     gedraengt aus, und die Reihe wurde dadurch unterschiedlich hoch.
     Passt eine Beschriftung nicht mehr, bricht die ganze Reihe um und
     jeder Knopf bekommt eine eigene Zeile, dafuer sorgt die Grundbreite. */
  white-space: nowrap;
}

/* ---------- Kopfbereich -------------------------------------------------- */

.site-header {
  background: var(--surface-invert);
  color: var(--text-invert);
  position: relative;
  z-index: 50;
}

.site-header a { color: var(--text-invert); }

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 68px;
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  text-decoration: none;
  flex: none;
}
/* Logoplatz 132 x 36 mobil, 180 x 48 Desktop. Das Zeichen selbst ist
   flacher als der Platz, das ist Absicht: der Schutzraum bleibt frei. */
.brand { color: var(--text-invert); }
.brand__logo { width: 168px; height: auto; display: block; }

@media (min-width: 600px) { .brand__logo { width: 196px; } }
@media (min-width: 1024px) { .brand__logo { width: 220px; } }

/* Die beiden Kontaktwege. Mobil eine eigene Zeile mit zwei gleich breiten
   Flaechen, damit sie sich vom Steg aus mit dem Daumen treffen lassen. */
.header-contact {
  flex: 0 0 100%;
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}
.header-contact .btn { flex: 1 1 0; }
/* Der Symbolknopf wächst nicht mit: der Platz gehört den beiden Kontaktwegen. */
.header-contact .btn--symbol { flex: 0 0 var(--control-height); }

/* Unter 480 Pixeln wird der WhatsApp-Knopf zum Symbolfeld. Mit Schriftzug
   braucht die Zeile 347 Pixel; auf einem 360er Schirm stehen im Inhalt aber
   nur 312 zur Verfuegung, die Zeile lief also um 35 Pixel ueber den Rand und
   die Seite liess sich seitlich schieben. Gemessen am 30.08.2026.
   Der Name geht nicht verloren, er steht im aria-label. */
@media (max-width: 479px) {
  .header-contact .btn--primary { min-width: 0; }
  .header-contact .btn--whatsapp {
    flex: 0 0 var(--control-height);
    padding-inline: 0;
    justify-content: center;
  }
  .header-contact .wa-fab__label { display: none; }
}

.nur-schmal { display: inline; }
.nur-breit { display: none; }

@media (min-width: 480px) {
  .nur-schmal { display: none; }
  .nur-breit { display: inline; }
}

@media (min-width: 1024px) {
  .header-contact {
    flex: 0 0 auto;
    padding-bottom: 0;
    order: 3;
    margin-left: auto;   /* schiebt die beiden Schaltflächen nach rechts */
  }
  .header-contact .btn { flex: 0 0 auto; white-space: nowrap; }
}

.menu-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit-min);
  min-width: var(--hit-min);
  padding: 0 var(--space-3);
  background: transparent;
  border: var(--border-width-strong) solid var(--white);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

/* Die Navigation liegt als dritte Zeile in derselben Reihe und klappt darunter
   auf. Kein Überlagern des Inhalts, damit auf schmalen Geräten nichts unter
   dem Menü verschwindet. */
.site-nav {
  flex: 0 0 100%;
  display: none;
  border-top: var(--border-width) solid rgba(255,255,255,0.22);
}
.site-nav.is-open { display: block; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  max-width: none;
}
.site-nav li { margin: 0; }

.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid rgba(255,255,255,0.22);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.site-nav li:last-child a { border-bottom: 0; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] {
  color: var(--signal-300);
  font-weight: var(--weight-semibold);
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .brand { order: 1; }
  /* Bewusst 0 1 auto und nicht 1 1 auto: die Navigation darf schrumpfen, aber
     nicht wachsen. Sonst füllt sie die Zeile und schiebt die beiden
     Kontaktschaltflächen in eine zweite Zeile. */
  .site-nav {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    display: block;
    border-top: 0;
    margin-inline: var(--space-3);
  }
  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 0;
  }
  /* min-width zusaetzlich zu min-height: "Start" ist als Wort nur 43 Pixel
     breit und verfehlt die Vorgabe von 44 x 44 sonst um ein Pixel. */
  .site-nav a {
    border-bottom: 0;
    padding: 0;
    min-height: var(--hit-min);
    min-width: var(--hit-min);
    justify-content: center;
  }
  .site-nav li:last-child a { border-bottom: 0; }
}

/* Keine großzügigeren Abstände bei breiten Fenstern: die Inhaltsbreite ist bei
   1200 gedeckelt, abzüglich Rinnen bleiben 1120, und zwar unabhängig davon,
   wie breit das Fenster ist. Mehr Platz gibt es also nie. Die Zeile ist mit
   Logo 180, Navigation 464 und drei Schaltflächen 423 plus Abständen bei
   1115 voll. */

/* ===========================================================================
   NAVIGATIONSLEISTE, randlos und stehenbleibend

   Vorbild ses-hamburg.com, am 30.08.2026 nachgemessen: randlose Kopfzeile,
   schmale Servicezeile darueber, Logoblock links, danach Navigationspunkte
   mit gleicher Breite und Trennern dazwischen, die aktive Seite in der
   Signalfarbe. Die Leiste bleibt beim Scrollen stehen.

   Am 30.08.2026 als Fassung D ausgewaehlt, die Alternativen C und E sind
   entfallen. Die Klasse nav-breit steht fest im html-Element.
   ======================================================================== */

/* Bleibt beim Scrollen oben stehen. Kein Skript noetig, das macht
   position: sticky allein. z-index 100 liegt ueber der Buehne (50). */
.nav-breit .site-header {
  position: sticky;
  /* Unter der ebenfalls fixierten Abstimmungsleiste; deren Höhe setzt
     fassung.js. Ohne Skript bleibt es bei 0. */
  top: var(--schalter-hoehe, 0px);
  z-index: 100;
  background: var(--surface-card);
  color: var(--text-heading);
  border-bottom: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-raised);
  /* Falls das Menue auf einem kleinen Schirm laenger wird als das Fenster,
     scrollt es in sich selbst statt die Seite unerreichbar zu machen. */
  max-height: calc(100vh - var(--schalter-hoehe, 0px));
  overflow-y: auto;
}

/* Die Inhaltsbreite von 1120 Pixeln gilt hier nicht: die Leiste geht von
   Rand zu Rand. Deshalb wird der Rahmen fuer diesen einen Fall aufgehoben. */
.nav-breit .site-header > .wrap {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

.nav-breit .header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding-block: 0;
}

/* ---- Servicezeile ganz oben, ueber der Navigation ---------------------- */
/* Die Servicezeile steht ueber der Navigation, nicht darin. Der Grund ist
   Grau 100, eine Stufe dunkler als die weisse Leiste darunter. */
.nav-breit .header-contact {
  order: -1;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  /* Knapp gehalten: die Zeile bleibt beim Scrollen stehen und nimmt sonst
     zu viel vom Schirm. Die Schaltflaechen selbst bleiben bei 48 Pixeln,
     die Mindestklickflaeche von 44 wird also nicht angetastet. */
  padding: var(--space-1) var(--space-4);
  margin: 0;
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
/* Ohne Fuellung, wie bei der Vorlage. Drei gesaettigte Flaechen (Orange,
   Gruen, Blau) nebeneinander machten das Band unruhig, und dieselben zwei
   Aktionen stehen 200 Pixel tiefer in der Buehne noch einmal gross. Hier
   oben genuegt der Hinweis, dass es sie gibt. Wer sie farbig will, waehlt
   Fassung D.
   Alles steht in Marine 700 auf Grau 100, das sind 11,53:1. */
.nav-breit .header-contact .btn {
  flex: 0 0 auto;
  min-height: var(--hit-min);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--marine-700);
  font-weight: var(--weight-medium);
  padding-inline: var(--space-2);
}
.nav-breit .header-contact .btn:hover {
  background: transparent;
  color: var(--marine-900);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Die Rufnummer wandert nach links und fuellt damit die Zeile, statt den
   Farbcluster in der rechten Ecke haengen zu lassen. */
.nav-breit .header-contact .btn--primary {
  margin-right: auto;
  padding-left: 0;
  font-weight: var(--weight-semibold);
}
.nav-breit .header-contact .btn--whatsapp svg,
.nav-breit .header-contact .btn--facebook svg { opacity: 0.85; }

/* ---- Logoblock links --------------------------------------------------- */
/* Dunkler Block auf heller Leiste, wie beim Vorbild. Der Schriftzug nimmt
   die Farbe des Blocks an, weil er currentColor benutzt. */
.nav-breit .brand {
  order: 1;
  flex: none;
  align-self: stretch;
  align-items: center;
  padding-inline: var(--space-4);
  background: var(--surface-invert-deep);
  color: var(--text-invert);
}

/* ---- Navigation -------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-breit .header-contact { padding-inline: var(--space-6); }
  .nav-breit .brand { padding-inline: var(--space-6); }

  .nav-breit .site-nav {
    order: 2;
    flex: 1 1 auto;          /* nimmt den ganzen Rest der Zeile ein */
    display: block;
    min-width: 0;
    border-top: 0;
    margin-inline: 0;
  }
  .nav-breit .site-nav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    height: 100%;
  }
  /* Gleiche Breite fuer jeden Punkt, wie bei der Vorlage. flex-basis 0
     sorgt dafuer, dass die Textlaenge die Breite nicht beeinflusst. */
  .nav-breit .site-nav li {
    flex: 1 1 0;
    display: flex;
    /* Reine Zierde: was den Punkt als Verweis erkennbar macht, ist die
       Schrift mit 12,73:1, nicht die Linie. */
    border-left: var(--border-width) solid var(--border-subtle);
  }
  .nav-breit .site-nav li:last-child {
    border-right: var(--border-width) solid var(--border-subtle);
  }
  .nav-breit .site-nav a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0 var(--space-2);
    border-bottom: 0;
    text-align: center;
    color: var(--marine-700);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .nav-breit .site-nav a:hover {
    background: var(--marine-50);
    color: var(--signal-700);
    text-decoration: none;
  }
  .nav-breit .site-nav a[aria-current="page"] {
    color: var(--signal-700);
    font-weight: var(--weight-semibold);
    box-shadow: inset 0 -3px 0 var(--signal-700);
    padding-bottom: 0;
  }
}

/* ---- Schmale Schirme --------------------------------------------------- */
@media (max-width: 1023px) {
  /* Logo links, Menueknopf als Signalfeld rechts aussen, wie bei der
     Vorlage. Dazwischen bleibt nichts, damit die Zeile flach bleibt. */
  .nav-breit .brand { flex: 1 1 auto; min-width: 0; }
  .nav-breit .site-header .menu-toggle {
    /* Ohne order stuende der Knopf vor dem Logo: im Quelltext kommt er
       davor, und das Logo hat order 1. */
    order: 2;
    align-self: stretch;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding-inline: var(--space-4);
    background: var(--signal-700);
    color: var(--white);
  }
  .nav-breit .site-header .menu-toggle:hover { background: var(--signal-600); }

  .nav-breit .site-nav {
    order: 3;
    flex: 0 0 100%;
    border-top: var(--border-width) solid var(--border-subtle);
  }
  .nav-breit .site-nav ul { padding: 0; }
  .nav-breit .site-nav a {
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-subtle);
    color: var(--marine-700);
  }
  .nav-breit .site-nav a[aria-current="page"] {
    color: var(--signal-700);
    font-weight: var(--weight-semibold);
    box-shadow: inset 3px 0 0 var(--signal-700);
  }
  /* Die Servicezeile darf auf schmalen Schirmen nicht die halbe Hoehe
     fressen und schon gar nicht ueber den Rand laufen: die Rufnummer nimmt
     den Platz, WhatsApp und Facebook stehen als Symbolfelder daneben. */
  .nav-breit .header-contact {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-inline: var(--space-3);
  }
  .nav-breit .header-contact .btn--primary {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-breit .header-contact .btn--whatsapp {
    flex: 0 0 var(--control-height);
    padding-inline: 0;
    justify-content: center;
  }
  /* Ohne Schriftzug bleibt das Zeichen. Der Name steht weiterhin im
     aria-label, Screenreader verlieren also nichts. */
  .nav-breit .header-contact .wa-fab__label { display: none; }

  /* Ohne Fuellung passt die Rufnummer auch auf schmale Schirme: bei 360
     Pixeln bleiben 336, die Nummer braucht rund 140, die beiden Zeichen je
     48. Eine lesbare Nummer ist nuetzlicher als das Wort "Anrufen". */
  .nav-breit .header-contact .btn--primary {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .nav-breit .header-contact .nur-schmal { display: none; }
  .nav-breit .header-contact .nur-breit { display: inline; }
}

/* Auf hellem Grund gilt der normale Fokusring in Signal 700. */
.nav-breit .site-header :focus-visible { outline-color: var(--focus-ring); }

/* Ausnahme Logo: es steht in einem dunklen Block. Der Ring wird nach innen
   gelegt und hell gezeichnet, dann liegt er ganz auf Marine 900 und erreicht
   15,78:1. Aussen auf der weissen Leiste kaeme Signal 700 nur auf 5,28:1,
   das reicht zwar, aber innen ist es eindeutiger. */
.nav-breit .brand:focus-visible {
  outline-color: var(--white);
  outline-offset: -3px;
}

/* Weil die Leiste stehenbleibt, wuerde ein Sprungziel sonst darunter
   verschwinden. Der Abstand entspricht der Hoehe beider Zeilen. */
.nav-breit :target,
.nav-breit #inhalt { scroll-margin-top: calc(124px + var(--schalter-hoehe, 0px)); }

/* ---- Faerbung: dunkelblau mit farbigen Kontaktflaechen ----------------- */

/* Die Kontaktwege stehen in E ohne Fuellung wie in C, aber auf dunklem
   Grund, deshalb weiss statt Marine 700: 15,78:1 gegen Marine 900. */

/* ---- Faerbung auf dunkel ---------------------------------------------- */
.nav-breit .site-header{
  background: var(--surface-invert);
  color: var(--text-invert);
  border-bottom: 0;
}
.nav-breit .header-contact{
  background: var(--surface-invert-deep);
  border-bottom: 0;
}
/* Nur D raeumt die Kontaktwege nach rechts, dort stehen sie als Gruppe mit
   dem Notdiensthinweis. E behaelt die Aufteilung von C: Nummer links. */
.nav-breit .header-contact { justify-content: flex-end; }
/* Heller Block auf dunkler Leiste, umgekehrt zu C. */
.nav-breit .brand{
  background: var(--surface-card);
  color: var(--marine-900);
}
.nav-breit .site-header :focus-visible{ outline-color: var(--white); }
.nav-breit .brand:focus-visible{
  outline-color: var(--marine-900);
  outline-offset: -3px;
}

@media (min-width: 1024px) {
  .nav-breit .site-nav li{ border-left-color: rgba(255, 255, 255, 0.22); }
  .nav-breit .site-nav li:last-child{ border-right-color: rgba(255, 255, 255, 0.22); }
  .nav-breit .site-nav a{ color: var(--text-invert); }
  .nav-breit .site-nav a:hover{
    background: rgba(255, 255, 255, 0.08);
    color: var(--signal-300);
  }
  /* Signal 300 statt 700: Orange erreicht auf dunklem Grund nur in der
     hellen Stufe genug Kontrast, hier 6,05:1 gegen Marine 700. */
  .nav-breit .site-nav a[aria-current="page"]{
    color: var(--signal-300);
    box-shadow: inset 0 -3px 0 var(--signal-300);
  }
}

@media (max-width: 1023px) {
  .nav-breit .site-nav{ border-top-color: rgba(255, 255, 255, 0.22); }
  .nav-breit .site-nav a{
    border-bottom-color: rgba(255, 255, 255, 0.22);
    color: var(--text-invert);
  }
  .nav-breit .site-nav a[aria-current="page"]{
    color: var(--signal-300);
    box-shadow: inset 3px 0 0 var(--signal-300);
  }
}

/* Der Notdiensthinweis steht nur in Fassung D. Im Quelltext ist er auf jeder
   Seite vorhanden, aber ausgeblendet; so bleibt der Kopfbereich in A, B und C
   unveraendert. */
.notdienst { display: none; }

/* Steht direkt vor der Rufnummer, nicht am linken Rand: die Kontaktwege
   bleiben als Gruppe rechts zusammen, der Hinweis gehoert dazu. */
.nav-breit .notdienst {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  color: var(--text-invert);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
/* Ein kleiner Punkt in der Signalfarbe statt eines Symbols: kein zusaetzliches
   Zeichen, kein weiteres Bild, und er hebt den Hinweis von der Rufnummer ab. */
.nav-breit .notdienst::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--signal-300);
}

/* Unter 900 Pixeln ist die Zeile zu eng: Hinweis, Rufnummer und zwei Zeichen
   passen nicht nebeneinander. Der Hinweis entfaellt dann, die Kontaktwege
   haben Vorrang. */
@media (max-width: 899px) {
  .nav-breit .notdienst { display: none; }
}

.nav-breit .header-contact .btn {
  padding-inline: var(--space-4);
  font-weight: var(--weight-semibold);
  /* Auf Marine 900 kommt das WhatsApp-Gruen nur auf 2,06:1, das Orange auf
     2,99:1. Die Beschriftung traegt (weiss auf Gruen 7,67:1), fuer die
     Flaechengrenze nach WCAG 1.4.11 sorgt die helle Kante mit 3,64:1. */
  border: var(--border-width) solid rgba(255, 255, 255, 0.4);
}
.nav-breit .header-contact .btn--primary {
  margin-right: 0;
  background: var(--action-primary);
  color: var(--text-invert);
}
.nav-breit .header-contact .btn--primary:hover { background: var(--signal-600); }
.nav-breit .header-contact .btn--whatsapp {
  /* Die beiden Markenfarben stehen bewusst direkt hier und nicht als Token:
     sie gehoeren WhatsApp und Meta, nicht dem Design-System. Siehe K-07. */
  background: #075E54;
  color: var(--white);
}
.nav-breit .header-contact .btn--facebook {
  background: #1A7CF5;
  color: var(--white);
}

/* Im Schlussbaustein steht Facebook gefuellt wie im Kopfbereich, aber eine
   Spur dunkler: das Meta-Blau 1A7CF5 traegt weisse Schrift nur mit 4,00:1,
   verlangt sind 4,5:1 fuer Text dieser Groesse. Auf 90 Prozent abgedunkelt
   sind es 4,79:1, und der Farbeindruck bleibt Facebook-Blau.
   Im Kopfbereich bleibt das Original, weil der Knopf dort nur das Zeichen
   traegt und fuer Grafik 3:1 gelten. */
.section--invert .btn--facebook {
  background: #1770DC;
  border-color: #1770DC;
  color: var(--white);
}
.section--invert .btn--facebook:hover {
  background: #1563C4;
  border-color: #1563C4;
  color: var(--white);
}
.nav-breit .header-contact .btn:hover { text-decoration: none; }
.nav-breit .header-contact .btn svg { opacity: 1; }

/* Auf schmalen Schirmen bleibt die Rufnummer im Klartext, die Zeile passt
   auch mit Fuellung: 143 + 48 + 48 plus Abstaende bleiben unter den 312
   Pixeln, die bei 360 zur Verfuegung stehen. */
@media (max-width: 1023px) {
  .nav-breit .header-contact .btn--primary { padding-inline: var(--space-3); }
}

/* ---------- Bühne -------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--surface-invert-deep);
  color: var(--text-invert);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #24365A 0 12px, #1B2C4C 12px 24px);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-image);
}

.hero__inner {
  position: relative;
  padding-block: var(--space-16);
}

.hero h1 { color: var(--white); max-width: 20ch; }
.hero .lead { color: var(--text-invert-muted); max-width: 52ch; }

.hero__note {
  margin-top: var(--space-6);
  font-size: var(--text-caption);
  color: var(--text-invert-muted);
}

@media (min-width: 1024px) {
  .hero__inner { padding-block: var(--space-24); }
}

/* ---------- Abschnitte --------------------------------------------------- */

.section { padding-block: var(--section-gap); }
.section--tint { background: var(--surface-section); }
.section--invert { background: var(--surface-invert); color: var(--text-invert); }
.section--invert h2, .section--invert h3 { color: var(--white); }
.section--invert p { color: var(--text-invert-muted); }
/* Textlinks auf dunklem Grund in Signal 300. Schaltflächen ausgenommen: sie
   bringen ihre eigene Fläche mit und tragen weiße Schrift. */
.section--invert a:not(.btn) { color: var(--signal-300); }

.section__head { margin-bottom: var(--space-8); }
.section__head p { max-width: var(--measure-body); }

.prose > * + h2 { margin-top: var(--space-12); }
.prose > * + h3 { margin-top: var(--space-8); }

/* Dieselbe Luft auch fuer Ueberschriften, die neben einem .prose stehen statt
   darin. Ohne diese Regel klebte auf der Partnerseite die Ueberschrift
   "Unsere Lieferanten" mit 0 Pixeln Abstand am Absatz darueber. */
.wrap > * + h2 { margin-top: var(--space-12); }
.wrap > * + h3 { margin-top: var(--space-8); }

/* Und fuer Ueberschriften in den Fassungsbehaeltern: auf der Seite "Ueber uns"
   liegt der Text in .v-a beziehungsweise .v-b, damit greift .prose > * + h2
   nicht und die Ueberschriften standen mit 16 statt 48 Pixeln Abstand. */
.prose > .v-a > * + h2,
.prose > .v-b > * + h2 { margin-top: var(--space-12); }
.prose > .v-a > * + h3,
.prose > .v-b > * + h3 { margin-top: var(--space-8); }

/* Zwei Raster direkt hintereinander brauchen Luft dazwischen. Auf der Seite
   "Ueber uns" stiessen sonst die Kennzahlkacheln ohne Abstand an das Bild
   darueber. */
.wrap > .grid + .grid { margin-top: var(--space-8); }

/* ---------- Raster ------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--sidebar { grid-template-columns: 2fr 1fr; align-items: start; }
  /* Bild und Text gleich hoch: Das Bild reicht von der Dachzeile bis zum
     letzten Absatz, statt oben neben der Überschrift zu schweben
     (Startseite, Havarie). Ausschnitt hält den Schiffsführer rechts im Bild. */
  .grid--buendig { align-items: stretch; }
  .grid--buendig > div > :last-child { margin-bottom: 0; }
  .grid--buendig .bild--fuellt { height: 100%; object-fit: cover; object-position: 78% 50%; }
}

/* ---------- Karten ------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-6);
}

a.card, .card--link {
  text-decoration: none;
  color: var(--text-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
a.card:hover, .card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
}

.card h3 { margin-bottom: var(--space-3); }
.card p { margin-bottom: var(--space-4); }
.card > :last-child { margin-bottom: 0; }

.card__more {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--action-link);
  font-weight: var(--weight-semibold);
}
a.card:hover .card__more { text-decoration: underline; text-decoration-thickness: 2px; }

.card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.card__list li {
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-body-size);
}
.card__list li:last-child { border-bottom: 0; }

/* Zeichen über einer Karte, derzeit nur das Facebook-f. Es ist ein Inline-SVG
   und übernimmt über currentColor die Textfarbe. */
.card__zeichen {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--marine-700);
}
.card__zeichen svg { display: block; }

.card--fb { border-color: var(--border-accent); }

/* ---------- Platzhalterbilder -------------------------------------------- */

.ph {
  display: flex;
  align-items: flex-end;
  background: var(--placeholder-stripe);
  border: var(--border-width) dashed var(--grey-400);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-height: 160px;
  margin-bottom: var(--space-4);
}
.ph--wide { min-height: 220px; }
.ph--tall { min-height: 300px; }

.ph__label {
  background: var(--white);
  border: var(--border-width) solid var(--border-default);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
  line-height: 1.35;
}

/* ---------- Echte Bilder ------------------------------------------------- */
/* Bilder bringen ihre Seitenverhältnisse als width- und height-Attribute mit,
   damit beim Laden nichts springt. Alles unterhalb der ersten Bildschirmhöhe
   lädt verzögert. */

.bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--grey-200);
}

.card .bild {
  margin-bottom: var(--space-4);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bild--kopf {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-bottom: var(--space-8);
}

/* Kontakt: Ausschnitt nach Vorgabe vom 19.09.2026 im Format 3:2 */
.bild--kontakt {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .bild--kopf { aspect-ratio: 3 / 2; }
}

/* Bildreihe mit Bildunterschrift. Die Unterschrift benennt, was zu sehen ist,
   und ersetzt keine Aussage im Fließtext. */
.bildgalerie {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  margin-block: var(--space-8);
}
@media (min-width: 768px) {
  .bildgalerie--2 { grid-template-columns: repeat(2, 1fr); }
  .bildgalerie--3 { grid-template-columns: repeat(3, 1fr); }
}

.bildgalerie figure { margin: 0; }
.bildgalerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--grey-200);
}
.bildgalerie figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-label);
  color: var(--text-muted);
}

/* Fotoband mit Text. Dunkles Bild, Abdunklung nach Befund B-20, Text darauf.
   Das Nachtmotiv trägt die Markenfarben von selbst: Marineblau als Fläche,
   die warmen Hafenlichter treffen den Orangeton der Kontrastfarbe. */
.fotoband {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-invert-deep);
  color: var(--text-invert);
  margin-block: var(--space-8);
}
.fotoband__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.fotoband__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-image);
}

.fotoband__inner {
  position: relative;
  padding: var(--space-12) var(--space-6);
}
.fotoband h2, .fotoband h3 { color: var(--white); }
.fotoband p { color: var(--text-invert-muted); max-width: 46ch; }
.fotoband .eyebrow { color: var(--signal-300); }

@media (min-width: 768px) {
  .fotoband__inner { padding: var(--space-16) var(--space-12); }
}

@media (max-width: 767px) {
  /* Auf schmalen Geräten liegt der Text über der Bildmitte, deshalb deckt die
     Abdunklung hier die ganze Fläche. */
  .fotoband__media::after { background: rgba(14, 34, 68, 0.88); }
}

/* Breites Band über die volle Inhaltsbreite */
.bildband {
  display: block;
  width: 100%;
  height: auto;
  /* 2:1 wie der vorgegebene Zuschnitt vom 19.09.2026 (Leistungen) */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--grey-200);
  margin-block: var(--space-8);
}
@media (max-width: 767px) {
  .bildband { aspect-ratio: 16 / 9; }
}

/* ---------- Karte des Einsatzgebiets ------------------------------------- */

.karte {
  margin: 0 0 var(--space-8);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

/* Die Karte lag auf schmalen Geraeten mit 640 Pixeln Mindestbreite in einem
   312 Pixel breiten Rahmen. Sichtbar war damit etwa die Haelfte, den Rest
   musste man seitlich wischen, und diese Geste findet kaum jemand. Seit dem
   30.08.2026 wird die Karte stattdessen ganz gezeigt. Die Ortsnamen sind
   dann klein, aber die Aussage der Karte ist die Flaeche, nicht die
   Beschriftung, und die Orte stehen im Text darueber. */
.karte__flaeche { overflow-x: auto; }
.karte img { display: block; width: 100%; height: auto; }
.karte figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-label);
  color: var(--text-muted);
}
.karte figcaption strong { color: var(--text-heading); }

/* Die dunkle Kartenfassung bringt ihre eigene Fläche mit, deshalb bekommt sie
   keinen hellen Rahmen, sondern schließt bündig an das Bild an. */
.karte--dunkel { border-color: var(--surface-invert-deep); background: var(--surface-invert-deep); }
.karte--dunkel figcaption {
  border-top-color: rgba(255,255,255,0.22);
  color: var(--text-invert-muted);
}
.karte--dunkel figcaption strong { color: var(--white); }

/* Bühne mit Foto. Das Nachtmotiv trägt die Markenfarben von selbst:
   Marineblau als Fläche, die warmen Hafenlichter im Ton der Kontrastfarbe. */
/* Zwei Bühnenfassungen, weil die beiden Motive verschieden hell sind.

   --foto, dunkles Motiv (Hafen bei Nacht): Text liegt direkt auf dem Bild,
   der Verlauf dunkelt links stark ab. Das Bild bleibt rechts sichtbar.

   --foto-hell, helles Motiv (Brücke im Abendlicht): dieser Weg funktioniert
   hier nicht. Unter der Auszeichnungszeile liegt der Sonnenuntergang mit 0,78
   mittlerer Helligkeit; eine Abdunklung, die das lesbar macht, löscht das Bild
   aus. Deshalb der zweite vom Design-System erlaubte Weg: Text auf eigener
   Farbfläche, Bild nur leicht abgedunkelt und dadurch sichtbar. */

.hero--foto .hero__media,
.hero--foto-hell .hero__media {
  background-size: cover;
  background-position: center 60%;
}

/* Breite Bildschirme (Befund 19.09.2026): Der Kasten lag mitten auf Radar
   und Kartenbildschirm, und die flache Bühne zog das Bild zu einem schmalen
   Streifen. Deshalb hier: Bühne höher, Kasten an den linken Rand und etwas
   schmaler. Das Bild ist so zugeschnitten, dass das Pult rechts vom Kasten
   liegt (werkzeug/bildwelten.py, hero-bruecke). */
@media (min-width: 1024px) {
  .hero--foto-hell .wrap {
    max-width: none;
    padding-inline: 5vw;
  }
  .hero--foto-hell .hero__inner {
    min-height: min(36vw, 680px);
    display: flex;
    align-items: center;
  }
  .hero--foto-hell .hero__panel { max-width: 34rem; }
}
.hero--foto-hell .hero__media { background-image: url("../img/hero-bruecke.webp"); }

/* Helles Motiv: nur so weit abdunkeln, dass es ruhig wirkt. Der Text steht
   auf der deckenden Fläche, die Abdunklung trägt keinen Kontrast und darf
   deshalb leicht bleiben. Mit 0,62 wirkte die Startseite zu dunkel. */
.hero--foto-hell .hero__media::after {
  background: linear-gradient(90deg, rgba(14,34,68,0.30) 0%, rgba(14,34,68,0.16) 60%, rgba(14,34,68,0.08) 100%);
}

/* Die Farbfläche unter dem Text. Deckend, deshalb gelten hier die bekannten
   Werte: Weiß 15,8:1, gedämpft 13,0:1, Signal 300 7,5:1. */
.hero__panel {
  background: var(--surface-invert-deep);
  border-radius: var(--radius);
  padding: var(--space-6);
  max-width: 40rem;
}

@media (min-width: 768px) {
  .hero__panel { padding: var(--space-12); }
}

/* Fläche und Bühne bringen beide einen Innenabstand mit. Auf schmalen Geräten
   addieren sie sich zu einer Bühne, die den ganzen Schirm füllt, deshalb hier
   der kleinere Wert. */
@media (max-width: 767px) {
  .hero--foto-hell .hero__inner { padding-block: var(--space-8); }
}
.hero--foto .hero__media::after {
  /* Kräftiger als die Standardabdunklung, weil die Hafenlichter punktuell
     ausgebrannt sind. Gemessen gegen die tatsächlichen Buchstabenkästen und
     die hellsten Pixel darunter: schwächster Wert 4,94:1, das ist die längere
     Auszeichnungszeile der Fassung B in Signal 300. Alles andere liegt über
     7:1. Der dunkle Bereich reicht bis 62 Prozent, weil diese Zeile so weit
     nach rechts läuft. Befund B-20. */
  background: linear-gradient(90deg, rgba(14,34,68,0.97) 0%, rgba(14,34,68,0.93) 62%, rgba(14,34,68,0.70) 100%);
}

@media (max-width: 767px) {
  .hero--foto .hero__media::after {
    background: rgba(14,34,68,0.90);
  }
}

/* ---------- Kennzahlen --------------------------------------------------- */

.stat {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--marine-700);
}
.stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-label);
  color: var(--text-muted);
}

/* Dunkle Fassung. Signal 300 auf Marine 900 erreicht 7,5:1, Weiß 15,8:1.
   Signal 700 wäre hier gesperrt, weil Orange auf dunklem Grund nur in der
   hellen Fassung 300 zulässig ist. */
.stat--invert {
  background: var(--surface-invert-deep);
  border-color: var(--surface-invert-deep);
}
.stat--invert .stat__value { color: var(--signal-300); }
.stat--invert .stat__label { color: var(--text-invert-muted); }
.stat--invert .pruefen {
  background: transparent;
  border-color: var(--signal-300);
  color: var(--signal-300);
}

/* Partikuliere (Startseite, unter den Referenzlogos): Kennzahl-Kachel in
   den Farben der übrigen Kennzahlen, Marine 900 mit Zahl in Signal 300
   (7,5:1), Text gedämpft (13,0:1). Die erste Fassung in Marine 500 passte
   nicht ins Bild (Befund 19.09.2026). Ab 768 Pixel Zahl und Text
   nebeneinander, über die volle Breite. */
.stat--partikuliere {
  margin-top: var(--space-6);
  background: var(--surface-invert-deep);
  border-color: var(--surface-invert-deep);
}
.stat--partikuliere .stat__value { color: var(--signal-300); }
.stat--partikuliere .stat__label {
  color: var(--text-invert-muted);
  font-size: var(--text-body-size);
}
@media (min-width: 768px) {
  .stat--partikuliere {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
  }
  .stat--partikuliere .stat__value { font-size: var(--text-hero-lg); }
  .stat--partikuliere .stat__label { margin-top: 0; max-width: 46ch; }
}

/* ---------- Marker für ungeprüfte Angaben -------------------------------- */

.pruefen {
  display: inline-block;
  background: var(--surface-highlight);
  border: var(--border-width) solid var(--signal-700);
  border-radius: var(--radius);
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--signal-700);
  white-space: nowrap;
}

.hinweis {
  background: var(--surface-highlight);
  border-left: 4px solid var(--signal-700);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-6);
}
.hinweis p { max-width: none; }
.hinweis__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}

.platzhalter-seite {
  background: var(--surface-highlight);
  border: var(--border-width-strong) dashed var(--signal-700);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
.platzhalter-seite p { max-width: none; }

/* ---------- Partnerleiste ------------------------------------------------ */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
@media (min-width: 768px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }

.partner-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--space-3);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--marine-700);
  margin: 0;
}

/* ---------- Partnerlogos ------------------------------------------------- */
/* Drei Logos in einer Zeile, auch auf dem Telefon. Die Vorlagen haben sehr
   verschiedene Seitenverhältnisse, von 3:1 bis 1:1. Gleiche Zellenhöhe und
   object-fit: contain sorgen dafür, dass keines beschnitten oder verzerrt
   wird. Das quadratische Logo bekommt eine kleinere Höhe, sonst wirkt es bei
   gleicher Höhe deutlich größer als die breiten. */

/* ---------- Portfolio der Lieferanten ------------------------------------
   Bis zum 30.08.2026 standen die Logos oben und die Liste weiter unten. Beides
   zusammen ist jetzt eine Ansicht: je Lieferant eine Karte mit Logo, Namen und
   einem Satz. Die Karten sind noch nicht anklickbar, deshalb bekommen sie auch
   keinen Schwebezustand, der eine Schaltflaeche vortaeuschen wuerde. */

.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: none;
}

@media (min-width: 600px) {
  .portfolio { grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
}
@media (min-width: 1024px) {
  .portfolio { grid-template-columns: repeat(3, 1fr); }
}

.portfolio__karte {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
}

@media (min-width: 600px) {
  .portfolio__karte { padding: var(--space-6); }
}

/* Feste Hoehe fuer das Logofeld: die Marken sind unterschiedlich proportioniert,
   von quadratisch bis 5:1. Ohne festen Platz stehen die Namen darunter auf
   verschiedenen Hoehen und das Raster wirkt schief. */
.portfolio__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.portfolio__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

/* Verlinkte Karten (Wunsch vom 19.09.2026, wie die Referenzen auf der
   Startseite): Der Link sitzt auf dem Namen, sein ::after spannt die
   Klickfläche über die ganze Karte. Linktext bleibt der Firmenname. */
.portfolio__karte { position: relative; }
.portfolio__link {
  color: inherit;
  text-decoration: none;
}
.portfolio__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.portfolio__karte:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
}
.portfolio__link:focus-visible { outline: none; }
.portfolio__link:focus-visible::after {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}

/* Reine Bildmarke ohne Schriftzug (Radio Zeeland DMP): Der Name steht ohnehin
   darunter, deshalb darf das Zeichen die volle Feldhoehe nutzen. Bei 56 px
   wirkte es neben den breiten Wortmarken verloren. */
.portfolio__logo--bildmarke img { max-height: 100%; }

/* Fehlt das Logo, bleibt der Platz nicht leer. Der Name steht in der
   Hausschrift, darunter der Hinweis. Der gestrichelte Rand sagt: das ist
   ein Platzhalter, keine Gestaltung. */
.portfolio__logo--offen {
  flex-direction: column;
  gap: var(--space-1);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius);
  height: auto;
  min-height: 84px;
  padding: var(--space-3);
}

.portfolio__ersatz {
  font-family: var(--font-display);
  font-size: var(--text-card);
  font-weight: var(--weight-bold);
  color: var(--marine-500);
  text-align: center;
  line-height: var(--leading-tight);
}

.portfolio__fehlt {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Zentriert wie das Logo darueber. Linksbuendige Namen unter mittig
   stehenden Logos ergaben zwei Achsen je Karte, das wirkte unruhig. */
.portfolio__karte h3 {
  margin: 0;
  font-size: var(--text-card);
  text-align: center;
}

.portfolio__karte p {
  margin: 0;
  color: var(--text-body);
}
/* ---------- Kundenliste -------------------------------------------------- */
/* Namen mit Verweis auf die Unternehmensseite. Bewusst schlicht: Logos der
   Auftraggeber duerften wir ohne deren Erlaubnis ohnehin nicht zeigen. */

/* ---------- Auftraggeber, Logoansicht ------------------------------------
   Bis zum 30.08.2026 standen hier Namenskacheln. Jetzt das Logo mit dem Namen
   darunter. Der Name bleibt, weil mehrere Marken im Kleinen nicht lesbar sind
   und weil eine Kachel ohne Logo sonst wie ein Fehler aussaehe: AIKA Shipping
   fuehrt den Firmennamen auf der eigenen Seite als Text, dort gibt es keine
   Bilddatei. */

.kundenlogos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: none;
}

@media (min-width: 600px) {
  .kundenlogos { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
}
@media (min-width: 1024px) {
  .kundenlogos { grid-template-columns: repeat(5, 1fr); }
}

.kundenlogos li { margin: 0; }

.kundenlogos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4) var(--space-3);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-heading);
}
.kundenlogos a:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
}

/* Feste Hoehe fuer das Logofeld: die Marken reichen von 10:1 bis hochkant.
   Ohne festen Platz stehen die Namen auf verschiedenen Hoehen. */
.kundenlogo__bild {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 100%;
}
.kundenlogo__bild img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

/* Ohne Logo steht der Name in der Hausschrift, der Kasten ist gestrichelt
   umrandet: das ist ein Platzhalter, keine Gestaltung. */
.kundenlogo__bild--ohne {
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-2);
}
.kundenlogo__ersatz {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  color: var(--marine-500);
  text-align: center;
  line-height: var(--leading-tight);
}

.kundenlogo__name {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-align: center;
  line-height: var(--leading-tight);
  color: var(--text-body);
}

/* ---------- Tabelle ------------------------------------------------------ */

.table-scroll { overflow-x: auto; margin-bottom: var(--space-6); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  font-size: var(--text-body-size);
}
caption {
  text-align: left;
  font-size: var(--text-label);
  color: var(--text-muted);
  padding-bottom: var(--space-2);
}
th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  vertical-align: top;
}
thead th {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  border-bottom: var(--border-width-strong) solid var(--border-strong);
  white-space: nowrap;
}
tbody tr.is-highlight { background: var(--surface-highlight); }

/* ---------- Definitionslisten -------------------------------------------- */

.facts { margin: 0; }
.facts div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.facts div:last-child { border-bottom: 0; }
.facts dt { flex: 0 0 12rem; font-weight: var(--weight-semibold); color: var(--text-heading); }
.facts dd { margin: 0; flex: 1 1 14rem; }

/* Telefon und E-Mail sind hier echte Bedienelemente, keine Fliesstextlinks.
   Sie bekommen deshalb die volle Klickflaeche, Befund B-24. */
.facts dd a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
}

/* ---------- Kontaktwege -------------------------------------------------- */

.kontaktweg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.kontaktweg__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kontaktweg__value {
  font-family: var(--font-display);
  font-size: var(--text-card);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-card);
  word-break: break-word;
}
.kontaktweg__value a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  text-decoration: none;
}
.kontaktweg__value a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Beitragsliste ------------------------------------------------ */

.beitrag-meta {
  display: block;
  font-size: var(--text-label);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ---------- Einsatzgebiet ------------------------------------------------ */

.orte {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: none;
}
.orte li {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
}
.orte li.is-offen {
  background: var(--surface-highlight);
  border-color: var(--signal-700);
  color: var(--signal-700);
}

/* ---------- Fußbereich --------------------------------------------------- */

.site-footer {
  background: var(--surface-invert-deep);
  color: var(--text-invert-muted);
  padding-block: var(--section-gap) var(--space-8);
  margin-top: var(--section-gap);
}
/* Endet die Seite mit einem hellblauen Abschnitt, schließt der Fuß direkt
   an; sonst bliebe ein grauer Streifen dazwischen (Kontakt, 19.09.2026). */
main:has(> .section--tint:last-child) + .site-footer { margin-top: 0; }
.site-footer h2, .site-footer h3 { color: var(--white); font-size: var(--text-lead); }
.site-footer a { color: var(--white); }
.site-footer p { color: var(--text-invert-muted); }

.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid rgba(255,255,255,0.22);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin: 0; }
.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  text-decoration: none;
}
.footer-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.footer-bottom {
  padding-top: var(--space-6);
  font-size: var(--text-label);
}

/* ---------- Textfassungs-Umschalter, nur Demo ---------------------------- */
/* Entfernen: diese eine Regelgruppe und die Zeile mit fassung.js in den
   Seiten löschen. Ohne JavaScript ist Fassung A sichtbar. */

.v-b { display: none; }
.fassung-b .v-a { display: none; }
.fassung-b .v-b { display: revert; }

/* Fixiert: bleibt beim Scrollen oben stehen, der Kopf der Seite darunter.
   z-index über dem Kopf (100). */
.fassung-schalter {
  position: sticky;
  top: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-invert-deep);
  color: var(--text-invert);
  padding: var(--space-2) var(--gutter);
  font-size: var(--text-label);
  border-bottom: var(--border-width) solid rgba(255,255,255,0.22);
}
.fassung-schalter__marke {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--signal-300);
  margin-right: auto;
}
.fassung-schalter { flex-wrap: wrap; column-gap: var(--space-6); }
.fassung-schalter__gruppe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fassung-schalter__titel {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-invert-muted);
}
.fassung-schalter button {
  min-height: var(--hit-min);
  min-width: var(--hit-min);
  padding: 0 var(--space-4);
  background: transparent;
  border: var(--border-width-strong) solid var(--white);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.fassung-schalter button:focus-visible { outline-color: var(--focus-ring-invert); }
.fassung-schalter button[aria-pressed="true"] {
  background: var(--white);
  color: var(--marine-900);
}

@media (max-width: 479px) {
  .fassung-schalter__marke { font-size: 11px; }
  .fassung-schalter button { padding: 0 var(--space-3); }
  .fassung-schalter { column-gap: var(--space-4); }
  /* A/B und 1/2/3 sprechen für sich; für Vorleseprogramme bleiben die
     Gruppentitel erhalten, nur unsichtbar */
  .fassung-schalter__titel {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* Schmal: Hinweis in eigener Zeile, darunter beide Gruppen */
@media (max-width: 599px) {
  .fassung-schalter__marke { flex-basis: 100%; }
}

/* ---------- WhatsApp ----------------------------------------------------- */
/* Aus whatsapp-button-demo.html übernommen, Verhalten unverändert.
   Angepasst an das Design-System: Schrift, Radius, Fokusring und die Farbe
   der Statuszeile (Marine 900 statt #1a2332).

   Das Grün ist die einzige Farbe in diesem Blatt, die nicht aus dem
   Design-System stammt: das System kennt kein Grün, und Orange ist hier
   gesperrt, weil es die Hauptaktion trägt. Der Wert wurde gegenüber der Demo
   von #128C7E auf #075E54 abgedunkelt, damit weiße Schrift 7,5:1 erreicht
   statt 4,2:1. Zur Entscheidung vorgelegt als K-07 in KLAERUNGSPUNKTE.md.

   Der Baustein saß ursprünglich als schwebender Knopf unten rechts. Auf
   Wunsch steht er jetzt im Kopfbereich neben der Telefonnummer, auf jeder
   Seite. Verhalten und Skript sind unverändert, geändert haben sich Lage
   und Form. */

.btn--whatsapp {
  background: #075E54;
  border-color: #075E54;
  color: var(--white);
}
.btn--whatsapp:hover {
  background: #054C44;
  border-color: #054C44;
  color: var(--white);
}
.btn--whatsapp:focus-visible { outline-color: var(--focus-ring-invert); }
.btn--whatsapp svg { width: 22px; height: 22px; flex: none; fill: currentColor; }

/* ---------- Facebook ----------------------------------------------------- */
/* Der Knopf im Kopfbereich trägt nur das Zeichen, keine Beschriftung. Damit
   gilt die 3:1-Schwelle für grafische Elemente statt 4,5:1 für Text, und das
   löst einen Zielkonflikt: ein blauer Knopf auf blauem Grund kann nicht
   gleichzeitig dunkel genug für weiße Schrift und hell genug zur Abgrenzung
   vom Kopfbereich sein.

   #1A7CF5 ist das Facebook-Blau, um eine Spur aufgehellt. Das weiße Zeichen
   erreicht darauf 4,00:1, der Knopfrand gegen Marine 700 erreicht 3,18:1.
   Mit dem Originalwert #1877F2 wären es 4,23:1 und 3,01:1, also am Rand.
   Der Unterschied ist mit dem Auge nicht zu sehen. Vermerkt als K-19. */

.btn--facebook {
  background: #1A7CF5;
  border-color: #1A7CF5;
  color: var(--white);
}
.btn--facebook:hover {
  background: #0E63CE;
  border-color: #0E63CE;
  color: var(--white);
}
.btn--facebook:focus-visible { outline-color: var(--focus-ring-invert); }

/* Knopf ohne Beschriftung, quadratisch, Mindestmaß eingehalten. */
.btn--symbol {
  flex: 0 0 auto;
  width: var(--control-height);
  padding: 0;
}
.btn--symbol svg { width: 24px; height: 24px; flex: none; fill: currentColor; }

/* Die Statuszeile außerhalb der Erreichbarkeit ist am 16.08.2026 entfallen.
   Der Hinweis bleibt in der Alternativbeschriftung der Schaltfläche erhalten,
   ist also für Vorleseprogramme da, ohne sichtbar Platz zu belegen. */

/* ---------- Druck -------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .fassung-schalter { display: none; }
  body { background: var(--white); }
  thead { display: table-header-group; }
}

/* ==========================================================================
   Laufband Gerätemarken (Partnerseite)
   Stand 19.09.2026: weißer Streifen, Namen in Marine 900 (15,8:1), Schrift
   in der Größe der Hauptnavigation, in der Inhaltsbreite. An beiden Enden
   blendet der Streifen samt Namen weich aus (Maske), damit die Namen
   auftauchen und verschwinden statt an einer harten Kante abzubrechen.
   Die dunkle, durchlaufende Fassung wirkte zu hart. Nur Namen, keine Logos, solange die Markenrechte offen sind
   (K-40).
   Kein Skript: Das Band läuft per CSS-Animation. Zwei gleiche Spuren
   hintereinander, das Band wandert um genau eine Spur nach links und
   beginnt dann unsichtbar von vorn. Jede Spur enthält die Liste viermal und
   ist mindestens so breit wie das Fenster (100cqw).
   Anhalten ohne Knopf: beim Überfahren mit der Maus und solange das Band
   per Tastatur markiert ist. Siehe K-47.
   ========================================================================== */
.laufband {
  position: relative;
  margin-top: var(--space-8);
  background: var(--surface-card);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.laufband__fenster {
  container-type: inline-size;
  overflow: hidden;
}
.laufband__fenster:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.laufband__band {
  display: flex;
  width: max-content;
  animation: laufband 60s linear infinite;
}

.laufband__spur {
  display: flex;
  flex: none;
  min-width: 100cqw;
}

.laufband__spur ul {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.laufband__spur li {
  /* margin 0: die allgemeine Listenregel gibt 8 px nach unten, dadurch saß
     die Schrift nicht mittig im Streifen (Befund 19.09.2026) */
  margin: 0;
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-body-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-heading);
  white-space: nowrap;
}

@keyframes laufband {
  to { transform: translateX(-50%); }
}

.laufband__fenster:hover .laufband__band,
.laufband__fenster:focus-within .laufband__band {
  animation-play-state: paused;
}

/* Halt ohne JavaScript. Mit Maus haelt das Band beim Ueberfahren, mit der
   Tastatur beim Hineinspringen. Auf dem Handy gibt es beides nicht, deshalb
   dort ein Kontrollkaestchen, das die Animation anhaelt. Der Knopf ist das
   zugehoerige Label und traegt die normale Nebenaktion des Hauses. Befund
   2.2.2 der Pruefung vom 01.11.2026. */
/* Oberhalb von 768 Pixeln gibt es das Kaestchen gar nicht: waere es nur
   unsichtbar, saesse im Tabulatorweg ein Halt ohne sichtbaren Fokus. */
.laufband__schalter { display: none; }
.laufband__knopf { display: none; }

@media (max-width: 767px) {
  .laufband__schalter {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .laufband__knopf { display: inline-flex; margin-bottom: var(--space-4); }
}

.laufband__schalter:focus-visible + .laufband__knopf {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.laufband__knopf-aus { display: none; }
.laufband__schalter:checked + .laufband__knopf .laufband__knopf-an { display: none; }
.laufband__schalter:checked + .laufband__knopf .laufband__knopf-aus { display: inline; }

.laufband__schalter:checked ~ .laufband__fenster .laufband__band {
  animation-play-state: paused;
}

/* Weniger Bewegung gewünscht: ruhende Liste, alle Wiederholungen entfallen.
   Dann gibt es nichts anzuhalten, der Knopf entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .laufband__knopf { display: none; }
  .laufband__band { animation: none; width: auto; display: block; }
  .laufband__spur { min-width: 0; justify-content: center; }
  .laufband__spur ul { flex-wrap: wrap; justify-content: center; }
  .laufband__spur[aria-hidden="true"],
  .laufband__spur ul[aria-hidden="true"] { display: none; }
  .laufband { -webkit-mask-image: none; mask-image: none; }
}