/* =========================================================================
   Zollhaus-Marketing - Designsystem
   Farben, Typografie und Abstaende stammen aus
   04 Ressourcen/Design-System Zollhaus-Marketing/Zollhaus-Marketing-Designsystem.md
   Keine Farbe erfinden: es gibt genau eine Markenfarbe (Blau).
   ========================================================================= */

:root {
  /* Markenblau */
  --blue-500:#1a7bc0; --blue-600:#1668a5; --blue-700:#12557f;
  --blue-400:#4295cf; --blue-100:#d7ebf7; --blue-50:#eef7fc;

  /* Ink */
  --ink-900:#231f20; --ink-700:#4a4647; --ink-500:#77716f; --ink-300:#b3aeac;

  /* Neutrals */
  --white:#fff; --gray-50:#f7f8fa; --gray-100:#eef0f3; --gray-200:#e2e5ea; --gray-300:#cfd3da;

  /* Semantik */
  --color-primary:var(--blue-500);
  --color-primary-hover:var(--blue-600);
  --color-primary-active:var(--blue-700);
  --text-heading:var(--ink-900); --text-body:var(--ink-900); --text-muted:var(--ink-500);
  --text-on-brand:var(--white); --text-link:var(--blue-500); --text-link-hover:var(--blue-700);
  --surface-page:var(--white); --surface-alt:var(--gray-50); --surface-card:var(--white);
  --surface-tint:var(--blue-50);
  --border-subtle:var(--gray-200); --border-strong:var(--gray-300);

  /* Typografie */
  --font-sans:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --weight-regular:400; --weight-semibold:600;
  --text-display:44px; --text-h1:34px; --text-h2:26px; --text-h3:20px; --text-h4:17px;
  --text-lead:19px; --text-body-lg:17px; --text-base:15px; --text-sm:13px; --text-xs:11px;
  --leading-tight:1.15; --leading-snug:1.35; --leading-normal:1.6;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:.04em;

  /* Abstaende */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --border-width:1px;

  --shadow-sm:0 1px 2px rgba(35,31,32,.06);
  --shadow-md:0 4px 14px rgba(35,31,32,.08);
  --shadow-lg:0 12px 32px rgba(35,31,32,.10);
  --shadow-focus:0 0 0 3px rgba(26,123,192,.28);

  --container-max:1160px; --container-narrow:760px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms; --duration-base:200ms;

  --kopf-hoehe:76px;
}

/* Grundlagen ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);
  line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--text-heading);font-weight:var(--weight-semibold);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} h4{font-size:var(--text-h4)}
p{margin:0 0 var(--space-4)}

/* Worttrennung ----------------------------------------------------------
   Lange Woerter sollen ungetrennt bleiben, solange sie in die Zeile passen,
   und erst dann brechen - an einer Stelle, an der man im Deutschen trennt.
   Frueher schrieb man dafuer den weichen Trennstrich &shy; von Hand ins
   Wort. Das macht heute der Browser selbst.

   hyphens:auto trennt nach den Regeln der SEITENSPRACHE. Ohne <html lang="de">
   passiert deshalb gar nichts - das Attribut steht in jeder Seite, wer es
   entfernt, schaltet die Trennung stillschweigend ab.

   hyphenate-limit-chars haelt kurze Woerter heraus: erst ab 10 Zeichen wird
   getrennt, und nie naeher als 4 Zeichen an Anfang oder Ende. Browser, die
   die Zeile nicht kennen, trennen etwas grosszuegiger - unschoener, nie falsch.

   overflow-wrap ist das letzte Netz fuer das, was sich nicht trennen laesst,
   etwa eine lange Adresse: lieber hart umbrechen als die Seite waagerecht
   wegschieben. */
h1,h2,h3,h4,p,li,figcaption,dt,dd{
  -webkit-hyphens:auto;hyphens:auto;
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:10 4 4;
  overflow-wrap:break-word;
}
/* Wo Trennung stoert: Navigation, Schaltflaechen, Etiketten, Kennzahlen.
   Das sind kurze Beschriftungen, die man am Stueck liest - ein Trennstrich
   waere dort ein Stolperstein, kein Dienst. `manual` heisst nicht "nie",
   sondern "nur da, wo ein &shy; steht". */
.zum-inhalt,.navi-link,.klappmenue a,.knopf,.marke,.augenmerk,.schlagwort,
.filter,.fuss h2,.kennzahl-wert,.logowand-feld{
  -webkit-hyphens:manual;hyphens:manual;
}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
[hidden]{display:none!important}
.nur-fuer-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zum-inhalt{position:absolute;left:var(--space-4);top:-60px;z-index:200;background:var(--blue-500);
  color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  transition:top var(--duration-base) var(--ease-standard)}
.zum-inhalt:focus{top:var(--space-4);text-decoration:none;color:#fff}

/* Layout ---------------------------------------------------------------- */
.huelle{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}
.huelle-schmal{max-width:var(--container-narrow)}
.block{padding:var(--space-9) 0}
.block-eng{padding:var(--space-8) 0}
.block-alt{background:var(--surface-alt)}
.block-tint{background:var(--surface-tint)}
.block-ink{background:var(--ink-900);color:#fff}
.block-ink h2,.block-ink h3{color:#fff}
.block-ink p{color:rgba(255,255,255,.82)}
.block-ink .augenmerk{color:#8ec4e8}
.block-ink .vorspann{color:rgba(255,255,255,.86)}

.gitter{display:grid;gap:var(--space-5)}
@media (min-width:700px){ .g2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
@media (min-width:700px) and (max-width:899px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }

.augenmerk{display:inline-block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--blue-600);
  margin:0 0 var(--space-3)}
.vorspann{font-size:var(--text-lead);line-height:var(--leading-snug);color:var(--ink-700)}
.gedaempft{color:var(--text-muted)}
.mittig{text-align:center}
.kopfzeile-block{max-width:var(--container-narrow);margin:0 auto var(--space-7)}
.kopfzeile-block.mittig{text-align:center}
.kopfzeile-block.eng{margin-bottom:var(--space-6)}
.nach-block{margin-top:var(--space-7)}

/* Knoepfe --------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-semibold);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:var(--border-width) solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard)}
.knopf:hover{text-decoration:none;transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf-primaer{background:var(--color-primary);color:#fff}
.knopf-primaer:hover{background:var(--color-primary-hover);color:#fff}
.knopf-primaer:active{background:var(--color-primary-active)}
.knopf-sekundaer{background:transparent;color:var(--blue-600);border-color:var(--blue-500)}
.knopf-sekundaer:hover{background:var(--blue-50);color:var(--blue-700)}
.knopf-hell{background:#fff;color:var(--ink-900)}
.knopf-hell:hover{background:var(--gray-100);color:var(--ink-900)}
.knopf-geist{background:transparent;color:var(--blue-600);padding-left:0;padding-right:0}
.knopf-geist:hover{background:transparent;color:var(--blue-700);text-decoration:underline}
.knopf-gross{font-size:var(--text-body-lg);padding:var(--space-4) var(--space-6)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.knopf-reihe-mittig{justify-content:center}

/* Kopfbereich ----------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:var(--border-width) solid var(--border-subtle)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;
  height:var(--kopf-hoehe);gap:var(--space-5)}
.kopf-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.kopf-logo img{height:26px;width:auto}
/* Das Wortzeichen ist sehr breit (Verhaeltnis rund 11,5:1). Auf schmalen Schirmen
   schiebt es sonst den Menueknopf aus dem Bild - gemessen: 8 px Querscrollen bei 375 px. */
@media (max-width:560px){
  .huelle{padding:0 var(--space-4)}
  .kopf-logo img{height:auto;width:208px}
}
@media (max-width:360px){
  .kopf-logo img{width:176px}
}
.kopf-logo:hover{text-decoration:none}
.haupt-navi{display:none}
@media (min-width:1000px){
  .haupt-navi{display:flex;align-items:center;gap:var(--space-2)}
}
.navi-link{color:var(--ink-700);font-size:var(--text-base);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);white-space:nowrap;max-width:100%}
/* Sicherheitsnetz: nowrap haelt Beschriftungen zusammen, schiebt aber bei einer
   zu langen Beschriftung die ganze Seite waagerecht weg - auf schmalen Geraeten
   gemessen mit „Wegbeschreibung bei Google Maps aufrufen" (429px bei 320px Platz).
   Auf Telefonbreite darf ein Knopf deshalb umbrechen. Bei den vorhandenen
   Beschriftungen passiert das nicht, alle bleiben unter 288px. */
@media (max-width:699px){ .knopf{white-space:normal} }
.navi-link:hover{color:var(--ink-900);background:var(--gray-100);text-decoration:none}
.navi-link[aria-current="page"]{color:var(--blue-600);font-weight:var(--weight-semibold)}
.kopf-tat{display:none}
@media (min-width:1000px){ .kopf-tat{display:inline-flex} }

/* Klappmenue */
.menue-knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:transparent;border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-md);cursor:pointer;color:var(--ink-900)}
@media (min-width:1000px){ .menue-knopf{display:none} }
.menue-knopf svg{width:22px;height:22px}
.klappmenue{position:fixed;inset:var(--kopf-hoehe) 0 auto 0;background:#fff;
  border-bottom:var(--border-width) solid var(--border-subtle);box-shadow:var(--shadow-lg);
  padding:var(--space-4) 0 var(--space-6);z-index:99;max-height:calc(100vh - var(--kopf-hoehe));
  overflow-y:auto}
.klappmenue[hidden]{display:none!important}
.klappmenue a{display:block;padding:var(--space-3) var(--space-5);color:var(--ink-900);
  font-size:var(--text-body-lg);border-bottom:1px solid var(--gray-100)}
.klappmenue a:hover{background:var(--gray-50);text-decoration:none}
.klappmenue .knopf{margin:var(--space-4) var(--space-5) 0;width:calc(100% - var(--space-5)*2)}
@media (min-width:1000px){ .klappmenue{display:none!important} }

/* Hero ------------------------------------------------------------------ */
.hero{position:relative;background:linear-gradient(180deg,var(--blue-50) 0%,#fff 68%);
  padding:var(--space-9) 0 var(--space-8);overflow:hidden}
.hero::after{content:"";position:absolute;top:-180px;right:-160px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(66,149,207,.20),rgba(66,149,207,0) 68%);
  pointer-events:none}
.hero-innen{position:relative;z-index:1;display:grid;gap:var(--space-7);align-items:center}
@media (min-width:900px){ .hero-innen{grid-template-columns:1.05fr .95fr;gap:var(--space-8)} }
.hero h1{font-size:clamp(32px,5.2vw,var(--text-display));margin-bottom:var(--space-5)}
.hero .vorspann{margin-bottom:var(--space-6);max-width:52ch}
.hero-bild{position:relative}
.hero-bild img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;
  aspect-ratio:4/3;object-fit:cover}
/* height:auto ist PFLICHT. Anders als bei <img> setzen die Attribute width/height an
   einem <video> die tatsaechliche Hoehe (Presentational Hint), nicht nur das
   Seitenverhaeltnis - ohne diese Zeile bleibt der Kasten 720 px hoch und
   aspect-ratio wirkt nicht. Gemessen am 08.09.2026. */
.hero-bild video{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;
  height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--ink-900)}
/* Wer weniger Bewegung eingestellt hat, bekommt Standbild statt Lauf - das erledigt
   main.js, CSS kann ein Video nicht anhalten. */
.hero-marke{color:var(--blue-500)}

.kennzahlen{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:var(--space-5) var(--space-6);margin-top:var(--space-7);
  padding-top:var(--space-6);border-top:var(--border-width) solid var(--border-subtle)}
@media (max-width:479px){ .kennzahlen{grid-template-columns:repeat(2,auto)} }
.kennzahlen > div{min-width:0}
.kennzahl-text{display:block;max-width:16ch}
.kennzahl-wert{font-size:var(--text-h2);font-weight:var(--weight-semibold);color:var(--ink-900);
  line-height:1;display:block;margin-bottom:var(--space-1)}
.kennzahl-text{font-size:var(--text-sm);color:var(--text-muted)}

/* Karten ---------------------------------------------------------------- */
.karte{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);
  display:flex;flex-direction:column}
.karte h3,.karte h2{margin-bottom:var(--space-2)}
/* In einer Karte ist die Ueberschrift semantisch eine h2 (sie folgt direkt auf die h1
   der Seite), soll aber wie eine h3 aussehen. Groesse hier festlegen, nicht im Markup. */
.karte h2{font-size:var(--text-h3)}
.karte p{color:var(--ink-700);margin-bottom:var(--space-4)}
.karte p:last-child{margin-bottom:0}
.karte-tat{margin-top:auto;padding-top:var(--space-2)}
/* Verweise am Fuss einer Referenzkarte. Bewusst eine Liste, nicht mehrere
   Absaetze: bei zwei oder drei Verweisen sagt ein Screenreader dann die Anzahl
   an, und der Abstand bleibt gleich, egal wie viele es sind. Funktioniert
   genauso mit einem einzelnen Eintrag. */
.karte-verweise{margin-top:auto;padding-top:var(--space-4);
  list-style:none;margin-bottom:0;padding-left:0;
  display:flex;flex-direction:column;gap:var(--space-2)}
.karte-verweise li{margin:0}
a.karte{color:inherit}
a.karte:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-2px);
  border-color:var(--blue-100)}
a.karte{transition:box-shadow var(--duration-base) var(--ease-standard),
                   transform var(--duration-base) var(--ease-standard),
                   border-color var(--duration-base) var(--ease-standard)}
a.karte h3,a.karte h2{color:var(--ink-900)}
a.karte:hover h3,a.karte:hover h2{color:var(--blue-600)}

.kachel{width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-50);
  color:var(--blue-600);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-4);flex-shrink:0}
.kachel svg{width:22px;height:22px;stroke-width:1.6}

/* Schrittfolge ---------------------------------------------------------- */
.schritte{counter-reset:schritt;display:grid;gap:var(--space-6)}
@media (min-width:800px){ .schritte{grid-template-columns:repeat(3,1fr)} }
.schritt{position:relative;padding-top:var(--space-6)}
.schritt::before{counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  position:absolute;top:0;left:0;font-size:var(--text-h3);font-weight:var(--weight-semibold);
  color:var(--blue-400);letter-spacing:var(--tracking-wide)}
.schritt h3{margin-bottom:var(--space-2)}
.schritt p{color:var(--ink-700);margin:0}
/* Schrittfolge zweispaltig statt dreispaltig */
.schritte-zwei{grid-template-columns:none}
@media (min-width:800px){ .schritte-zwei > .gitter{gap:var(--space-7)} }

/* Wechselseitige Bild-Text-Baenke --------------------------------------- */
.bank{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:900px){
  .bank{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .bank-gedreht .bank-bild{order:2}
}
.bank-bild img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;
  aspect-ratio:3/2;object-fit:cover}
/* Bild als Zugang zum Videofenster. Die Flaeche ist ein echter Verweis auf
   YouTube: ohne JavaScript oeffnet sie das Video dort, mit JavaScript im
   Fenster ueber der Seite. Vor dem Klick geht KEINE Anfrage an YouTube. */
.bank-film{display:block;position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md)}
.bank-film img{border-radius:0;box-shadow:none;display:block}
.bank-film:hover img,.bank-film:focus-visible img{opacity:.82}
.bank-film img{transition:opacity var(--duration-base) var(--ease-standard)}
.bank-film:hover .video-knopf{background:var(--blue-600);transform:translate(-50%,-50%) scale(1.06)}
.bank-film-text{position:absolute;left:var(--space-4);bottom:var(--space-4);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:rgba(35,31,32,.72);color:#fff;font-size:var(--text-sm);
  font-weight:var(--weight-semibold)}
@media (prefers-reduced-motion:reduce){
  .bank-film:hover .video-knopf{transform:translate(-50%,-50%)}
}

/* Hoerprobe: Radiospot vom eigenen Server. preload="none" ist Absicht - ohne
   Klick wird keine einzige Tondatei geladen. */
.hoerprobe{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6)}
.hoerprobe h3{margin-bottom:var(--space-2)}
.hoerprobe .schlagwort{margin-bottom:var(--space-4)}
.hoerprobe-spieler{width:100%;display:block}

.bank + .bank{margin-top:var(--space-9)}
.bank-bild img.hochformat{aspect-ratio:4/5}

/* Logowand -------------------------------------------------------------- */
.logowand{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
@media (min-width:600px){ .logowand{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .logowand{grid-template-columns:repeat(5,1fr)} }
.logowand-feld{background:#fff;border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-md);aspect-ratio:3/2;display:flex;align-items:center;
  justify-content:center;padding:var(--space-4)}
.logowand-feld img{max-height:52px;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1);opacity:.72;
  transition:filter var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard)}
.logowand-feld:hover img{filter:grayscale(0);opacity:1}

/* Logo in einer Referenzkarte: volle Farbe, linksbuendig, feste Hoehe */
.referenz-logo{height:56px;display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:var(--space-4)}
.referenz-logo img{max-height:52px;width:auto;max-width:100%;object-fit:contain}

/* Listen ---------------------------------------------------------------- */
.hakenliste{list-style:none;margin:0 0 var(--space-5);padding:0}
.hakenliste li{position:relative;padding-left:var(--space-6);margin-bottom:var(--space-3);
  color:var(--ink-700)}
.hakenliste li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--blue-500)}
.block-ink .hakenliste li{color:rgba(255,255,255,.82)}

/* Formular -------------------------------------------------------------- */
.feld{margin-bottom:var(--space-5)}
.feld label{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--ink-900);margin-bottom:var(--space-2)}
.feld input,.feld textarea,.feld select{width:100%;font-family:inherit;font-size:var(--text-base);
  color:var(--ink-900);background:#fff;padding:var(--space-3) var(--space-4);
  border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-md);
  transition:border-color var(--duration-fast) var(--ease-standard)}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--blue-500);outline:none;
  box-shadow:var(--shadow-focus)}
.feld textarea{min-height:150px;resize:vertical}
.feld-hinweis{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-2)}
.feld-fehler{font-size:var(--text-sm);color:#d24b3e;margin-top:var(--space-2)}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#d24b3e}
.ankreuz{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-5)}
.ankreuz input{width:18px;height:18px;margin-top:3px;flex-shrink:0;accent-color:var(--blue-500)}
.ankreuz label{font-size:var(--text-sm);color:var(--ink-700);font-weight:var(--weight-regular);margin:0}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  margin-bottom:var(--space-5);font-size:var(--text-base)}
.meldung-gut{background:#eaf6ee;border:1px solid #bfe2cb;color:#1d6b3c}
.meldung-schlecht{background:#fdeceb;border:1px solid #f3c6c1;color:#a3352a}

/* Blog ------------------------------------------------------------------ */
.beitrag-bild{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);
  margin-bottom:var(--space-4)}
.beitrag-meta{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-2);
  display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.marke{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:3px var(--space-3);
  border-radius:var(--radius-pill);background:var(--blue-50);color:var(--blue-700)}
.filterleiste{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-7)}
.filter{font-family:inherit;font-size:var(--text-sm);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);border:var(--border-width) solid var(--border-subtle);
  background:#fff;color:var(--ink-700);cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard)}
.filter:hover{background:var(--gray-50);color:var(--ink-900)}
.filter[aria-pressed="true"]{background:var(--blue-50);border-color:var(--blue-500);
  color:var(--blue-700);font-weight:var(--weight-semibold)}
.beitrag-text{max-width:var(--container-narrow);margin:0 auto}
.beitrag-text p{font-size:var(--text-body-lg);line-height:var(--leading-normal);color:var(--ink-900)}
.beitrag-text h2{font-size:var(--text-h2);margin-top:var(--space-8)}
.beitrag-text h3{font-size:var(--text-h3);margin-top:var(--space-6)}
.beitrag-text img{border-radius:var(--radius-md);margin:var(--space-6) 0}
.beitrag-text ul,.beitrag-text ol{color:var(--ink-900);font-size:var(--text-body-lg);
  padding-left:var(--space-5);margin-bottom:var(--space-5)}
.beitrag-text li{margin-bottom:var(--space-2)}
.schlagworte{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-7);
  padding-top:var(--space-5);border-top:var(--border-width) solid var(--border-subtle)}
.schlagwort{font-size:var(--text-sm);color:var(--text-muted)}
.leer-hinweis{padding:var(--space-8) 0;text-align:center;color:var(--text-muted)}

/* Videoeinbettung (Zwei-Klick) --------------------------------------------
   Vor dem Klick geht KEINE Anfrage an YouTube: Vorschaubild und Knopf liegen
   auf dem eigenen Server. Erst der Klick tauscht die Flaeche gegen den
   YouTube-Rahmen. Ohne JavaScript bleibt der Verweis in der Bildunterschrift
   der Weg zum Video - eine Zusatzfunktion darf den Zugang nie versperren. */
.video{margin:var(--space-6) 0}
.video-flaeche{display:block;position:relative;width:100%;padding:0;border:none;
  background:var(--ink-900);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;
  aspect-ratio:16/9}
.video-flaeche img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
  transition:opacity var(--duration-base) var(--ease-standard)}
.video-flaeche:hover img{opacity:.82}
.video-knopf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:68px;border-radius:50%;background:var(--blue-500);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard)}
.video-flaeche:hover .video-knopf{background:var(--blue-600);transform:translate(-50%,-50%) scale(1.06)}
.video-knopf svg{width:26px;height:26px;margin-left:3px}
.video-rahmen{width:100%;aspect-ratio:16/9;border:none;border-radius:var(--radius-md);display:block}
.video figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted);
  line-height:var(--leading-snug)}
@media (prefers-reduced-motion:reduce){
  .video-flaeche:hover .video-knopf{transform:translate(-50%,-50%)}
}

/* Fremde Einbettung (Zwei-Klick) ------------------------------------------
   Gleiche Haltung wie bei den Videos: vor dem Klick geht KEINE Anfrage an den
   fremden Dienst. Der Kasten sagt vorher, wer geladen wird und was das fuer
   den Besucher bedeutet - erst danach entscheidet er.
   Wer hier einen Dienst eintraegt, gehoert auch in die Datenschutzerklaerung. */
/* margin-left/right statt der Kurzform margin: die wuerde margin-top mit
   ueberschreiben und damit Abstandsklassen wie .nach-block aushebeln, die
   frueher in dieser Datei stehen. */
.einbettung{max-width:var(--container-narrow);margin-left:auto;margin-right:auto;
  background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.einbettung-vorschau{padding:var(--space-7) var(--space-6);text-align:center}
.einbettung-vorschau h2,.einbettung-vorschau h3{font-size:var(--text-h3);margin-bottom:var(--space-3)}
.einbettung-vorschau p{color:var(--ink-700);margin-bottom:var(--space-5)}
.einbettung-fussnote{font-size:var(--text-sm);color:var(--text-muted);margin:var(--space-5) 0 0}
/* Hoehe des Rahmens: lieber zu viel als zu wenig. Ein eingebetteter Dienst
   kann seine Hoehe nicht an die Seite melden (fremde Herkunft), also muss der
   Platz vorher stimmen - sonst scrollt der Besucher IM Kasten, was sich anfuehlt
   wie ein Fehler.
   Gemessen am 07.09.2026 am meetergo-Kalender in dem Zustand, den Besucher
   sehen (Ort gewaehlt): 1283px bei 710-760px Breite, 1221px bei 500px,
   1129px bei 343px. Die Werte hier liegen mit rund 400px Reserve bewusst
   deutlich darueber, damit auch die Uhrzeitenliste und das Anmeldeformular
   hineinpassen - diese beiden Zustaende liessen sich von aussen nicht messen.
   Verschenkter Platz entsteht dabei nicht: der Kalender streckt sich auf die
   volle Hoehe, nachgemessen bleibt kein Leerraum darunter.
   Eine Einbettung mit anderem Bedarf setzt data-hoehe am Kasten - das gewinnt,
   weil es als Inline-Stil geschrieben wird (so macht es die Karte mit 480px). */
.einbettung-rahmen{display:block;width:100%;height:1700px;border:none}
@media (max-width:699px){ .einbettung-rahmen{height:1600px} }

/* Videofenster (Lightbox) -------------------------------------------------
   Legt sich ueber die Seite, macht den Hintergrund unscharf und spielt das
   Video, ohne dass jemand die Seite verlaesst.
   YouTube wird auch hier ERST beim Klick geladen - der Klick ist die
   Einwilligung, genau wie bei den Videos in den Blogbeitraegen.
   Ohne JavaScript passiert nichts davon: der Verweis bleibt ein gewoehnlicher
   Link, der das Video bei YouTube oeffnet. Eine Zierde darf den Zugang nie
   versperren.
   z-index 150: ueber der klebenden Kopfleiste (100), unter dem Sprunglink (200). */
.videofenster{position:fixed;inset:0;z-index:150;display:flex;
  align-items:center;justify-content:center;padding:var(--space-6);
  background:rgba(35,31,32,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Breite zusaetzlich an der Fensterhoehe begrenzen, sonst ragt das 16:9-Bild
   auf flachen Fenstern (Telefon im Querformat) oben und unten hinaus. */
.videofenster-buehne{width:min(1120px, 100%, (100vh - 9rem) * 16 / 9);
  aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#000}
.videofenster-buehne iframe{display:block;width:100%;height:100%;border:none}
.videofenster-schliessen{position:absolute;top:var(--space-5);right:var(--space-5);
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blue-500);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard)}
.videofenster-schliessen:hover{background:var(--blue-600);transform:scale(1.06)}
.videofenster-schliessen svg{width:26px;height:26px}
@media (max-width:699px){
  .videofenster{padding:var(--space-4)}
  .videofenster-schliessen{top:var(--space-3);right:var(--space-3);width:48px;height:48px}
  .videofenster-schliessen svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .videofenster-schliessen:hover{transform:none}
}

/* Fussbereich ----------------------------------------------------------- */
.fuss{background:var(--ink-900);color:rgba(255,255,255,.78);padding:var(--space-9) 0 var(--space-6);
  font-size:var(--text-base)}
.fuss a{color:rgba(255,255,255,.78)}
.fuss a:hover{color:#fff}
.fuss h2{color:#fff;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:var(--space-4)}
.fuss-gitter{display:grid;gap:var(--space-7)}
@media (min-width:700px){ .fuss-gitter{grid-template-columns:1.4fr 1fr 1fr} }
@media (min-width:1000px){ .fuss-gitter{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.fuss-logo{height:24px;width:auto;margin-bottom:var(--space-5)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:var(--space-3)}
.fuss-sozial{display:inline-flex;align-items:center;gap:var(--space-2)}
.fuss-sozial svg{width:16px;height:16px;flex:none;opacity:.8}
.fuss-sozial:hover svg{opacity:1}
.fuss-schluss{margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:var(--space-4);
  justify-content:space-between;font-size:var(--text-sm);color:rgba(255,255,255,.6)}
.fuss-schluss a{color:rgba(255,255,255,.6)}
.fuss-schluss nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* Nach-oben-Knopf ------------------------------------------------------- */
.nach-oben{position:fixed;right:var(--space-5);bottom:var(--space-5);width:46px;height:46px;
  border-radius:50%;background:var(--blue-500);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;z-index:90;
  transition:opacity var(--duration-base) var(--ease-standard),
             visibility var(--duration-base) var(--ease-standard),
             background var(--duration-fast) var(--ease-standard)}
.nach-oben.sichtbar{opacity:1;visibility:visible}
.nach-oben:hover{background:var(--blue-600)}
.nach-oben svg{width:20px;height:20px}

/* Einblenden beim Scrollen -----------------------------------------------
   Versteckt wird NUR, wenn JavaScript laeuft (Klasse .js am <html>-Element).
   Faellt das Skript aus, bleibt der Inhalt sichtbar - eine Zierde darf niemals
   daruber entscheiden, ob der Text ueberhaupt lesbar ist. */
.js .auftritt{opacity:0;transform:translateY(14px);
  transition:opacity 520ms var(--ease-standard),transform 520ms var(--ease-standard)}
.js .auftritt.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .auftritt{opacity:1;transform:none}
}

/* Grosse Schriften erst ab Tablet --------------------------------------- */
@media (min-width:800px){
  :root{--text-h1:40px;--text-h2:30px}
}

/* Produktlogo ueber einem Abschnitt (Siro Pilot). Hoehe fest, Breite folgt dem Bild.
   Auf dunklem Grund die weisse Fassung einsetzen, nicht per Filter umfaerben. */
.produkt-logo{height:64px;width:auto;margin:0 0 var(--space-4)}