@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-variable.woff2) format("woff2")}

/* ===== 000-basis.css ===== */
/* RoluControl (Technik und Gestaltung aus dem Rolutec-Neubau) — Grundlagen: Farben, Schrift, Raster, Knöpfe.
   Seed-Farben (--s-*) setzt jede Seite im <html>-Tag; auf der Startseite stellt der Leistungs-Regler sie live um,
   damit Knöpfe, Linien und Überschriften im Gleichschritt mit dem Zeichen umfärben. */
:root {
  --grund: #F3F4FA;
  --flaeche: #FFFFFF;
  --flaeche-2: #F8F9FD;
  --tinte: #0C0C2E;
  --text: #1E1F3B;
  --text-2: #464866;
  --text-3: #616380;
  --haar: #E1E3EE;
  --haar-2: #CCD0E2;
  --kern: #DB1A2B;
  --funke: #EE343B;
  --gut: #0F7A4A;
  --fehler: #B42318;

  --s-akzent: #EE343B; --s-tinte: #DB1A2B; --s-tief: #AA101E; --s-hell: #FFF0EF; --s-linie: #FDCDC9; --s-va: #A30C22; --s-vb: #F0484A;

  --schrift: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rahmen: 1280px;
  --rand: clamp(20px, 4.4vw, 56px);
  --r-gross: 26px;
  --r: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t1: 160ms;
  --t2: 280ms;
  --t3: 640ms;
  --schatten-hoch: 0 0 0 1px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .05), 0 14px 24px -14px rgba(0, 0, 0, .24);
  --kopf-hoehe: 76px;
  color-scheme: light;
  accent-color: var(--s-tinte);
  scrollbar-color: var(--haar-2) var(--grund);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: var(--schrift); font-size: clamp(1rem, .96rem + .18vw, 1.0625rem); line-height: 1.65;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
p, h1, h2, h3, h4, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--s-linie); color: var(--tinte); }
input, textarea { caret-color: var(--s-tinte); }
:focus-visible { outline: 2.5px solid var(--s-tinte); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--grund); }
::-webkit-scrollbar-thumb { background: var(--haar-2); border: 3px solid var(--grund); border-radius: 12px; }
::-webkit-scrollbar-thumb:hover { background: #A9AECB; }

/* ---------- Schrift ---------- */
h1, h2, h3, h4 { color: var(--tinte); text-wrap: balance; font-feature-settings: "ss01" 0; overflow-wrap: break-word; }
/* Schmale Geräte: lange deutsche Komposita in großen Überschriften trennen statt über den Rand laufen lassen */
@media (max-width: 560px) { h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
h1 {
  font-size: clamp(2.55rem, 1.2rem + 4.35vw, 5.3rem); font-weight: 780; line-height: 1.02; letter-spacing: -.038em;
}
h2 { font-size: clamp(2rem, 1.3rem + 2.35vw, 3.35rem); font-weight: 760; line-height: 1.06; letter-spacing: -.032em; }
h3 { font-size: clamp(1.14rem, 1.06rem + .3vw, 1.3rem); font-weight: 720; line-height: 1.28; letter-spacing: -.014em; }
h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.lead { font-size: clamp(1.1rem, 1rem + .42vw, 1.3rem); line-height: 1.55; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.zahl, [href^="tel:"] { font-variant-numeric: tabular-nums; }

/* ---------- Raster ---------- */
.rahmen { width: min(var(--rahmen), 100% - 2 * var(--rand)); margin-inline: auto; }
.abschnitt { padding-block: clamp(72px, 5rem + 4vw, 148px); position: relative; }
.abschnitt + .abschnitt { padding-top: 0; }
.kopfblock { max-width: 780px; margin-bottom: clamp(36px, 3vw + 20px, 64px); }
.kopfblock h2 + .lead { margin-top: 20px; }
.kopfblock--zwei { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.kopfblock--zwei .lead { margin-top: 0; }
@media (max-width: 860px) { .kopfblock--zwei { grid-template-columns: 1fr; } }

.unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung {
  position: fixed; left: 16px; top: 16px; z-index: 200; background: var(--tinte); color: #fff; padding: 12px 18px;
  border-radius: 999px; font-weight: 700; text-decoration: none; transform: translateY(-96px); transition: transform var(--t2) var(--ease);
}
.sprung:focus { transform: none; }

.ic { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Knöpfe ---------- */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--s-tinte); color: #fff; font-weight: 680; font-size: 1rem; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t1) var(--ease), border-color var(--t1) var(--ease), color var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.knopf .ic { width: 18px; height: 18px; transition: transform var(--t2) var(--ease); }
.knopf:hover { background: var(--s-tief); }
.knopf:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.knopf:active { transform: translateY(1px); }
.knopf--gross { --h: 58px; padding: 0 30px; font-size: 1.06rem; }
.knopf--klein { --h: 42px; padding: 0 18px; font-size: .95rem; }
/* Schmale Handys: lange Knopftexte („Kostenlosen Vor-Ort-Termin anfragen“) brechen ausgewogen um statt überzustehen */
@media (max-width: 480px) { .knopf { white-space: normal; text-wrap: balance; text-align: center; padding-block: 9px; line-height: 1.25; max-width: 100%; } }
.zusammen { white-space: nowrap; }
.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--haar-2); }
.knopf--rand:hover { background: var(--s-hell); border-color: var(--s-tinte); color: var(--s-tief); box-shadow: none; }
.knopf--hell { background: #fff; color: var(--s-tief); }
.knopf--hell:hover { background: var(--s-hell); color: var(--s-tief); box-shadow: none; }
.knopf--rand-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.knopf--rand-hell:hover { background: rgba(255, 255, 255, .1); border-color: #fff; box-shadow: none; }

.mehr { margin-top: 28px; }
.mehr a { display: inline-flex; gap: 8px; align-items: center; font-weight: 680; color: var(--s-tinte); text-decoration: none; }
.mehr a:hover { text-decoration: underline; }
.mehr .ic { transition: transform var(--t2) var(--ease); }
.mehr a:hover .ic { transform: translateX(3px); }

/* Kennzeichnung fotorealistischer KI-Bilder (Art. 50 KI-VO) */
.ki-etikett {
  position: absolute; left: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px;
  background: rgba(12, 12, 46, .72); color: #fff; font-size: .75rem; font-weight: 650; letter-spacing: .01em;
}

/* ---------- Zeichen (SVG aus src/kern/zeichen.js) ---------- */
.zeichen { width: 100%; height: auto; overflow: visible; }
.zeichen-grund { transition: fill var(--t3) var(--ease); }

/* Mini-Zeichen in Primärknöpfen: Linien in Schriftfarbe, zeichnet sich beim Reseed mit um */
.knopf__zeichen { display: block; width: 16px; flex: none; margin-left: -3px; }
.knopf--gross .knopf__zeichen { width: 19px; margin-left: -5px; }
.knopf--klein .knopf__zeichen { width: 14px; }
.knopf__zeichen .zeichen-leiter { stroke: currentColor; }
.knopf__zeichen .zeichen-grund { fill: currentColor; fill-opacity: .18; }

/* ===== 010-kopf.css ===== */
/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(243, 244, 250, .94);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t2) var(--ease), background-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.kopf.ist-gescrollt { border-bottom-color: var(--haar); background: rgba(250, 250, 253, .97); }
.kopf__innen { height: var(--kopf-hoehe); display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }

.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); flex: none; }
/* Logo im Kopf unverändert wie bei Rolutec (Wunsch Ferdinand 30.09.2026: Logo nie animieren oder umfärben) */
.marke__logo { display: block; height: 56px; width: auto; }

.kopf__nav { display: flex; align-items: center; gap: clamp(4px, 1vw, 12px); margin-left: auto; }
.kopf__nav > a, .kopf__mega > a {
  position: relative; padding: 10px 10px; font-size: .96rem; font-weight: 620; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: color var(--t1) var(--ease);
}
.kopf__nav > a::after, .kopf__mega > a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--s-akzent); transform: scaleX(0); transform-origin: left; transition: transform var(--t2) var(--ease);
}
.kopf__nav > a:hover, .kopf__mega > a:hover { color: var(--tinte); }
.kopf__nav > a:hover::after, .kopf__mega > a:hover::after, .kopf__nav [aria-current="page"]::after { transform: scaleX(1); }
.kopf__nav [aria-current="page"] { color: var(--s-tinte); }

.kopf__mega { position: relative; display: flex; align-items: center; }
/* Ausklapp-Menüs „Systeme“ und „Einsatzbereiche“: Textknopf mit Pfeil */
.kopf__auf {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 8px 10px 10px; border: 0; border-radius: 10px;
  background: transparent; font-size: .96rem; font-weight: 620; color: var(--text-2);
  transition: color var(--t1) var(--ease), background-color var(--t1) var(--ease);
}
.kopf__auf .ic { width: 16px; height: 16px; color: var(--text-3); transition: transform var(--t2) var(--ease); }
.kopf__auf:hover, .kopf__mega[data-offen] .kopf__auf { color: var(--tinte); background: var(--s-hell); }
.kopf__auf[aria-current] { color: var(--s-tinte); }
.kopf__mega[data-offen] .kopf__auf .ic { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 14px); left: -12px; width: min(420px, 92vw);
  background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten-hoch);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), visibility 0s linear var(--t2);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* Brücke für die Maus */
.kopf__mega[data-offen] .mega, .kopf__mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: none; transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .kopf__mega:hover .mega { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t2) var(--ease) 60ms, transform var(--t2) var(--ease) 60ms, visibility 0s 60ms; }
}
.mega ul a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 16px;
  color: var(--text); text-decoration: none; transition: background-color var(--t1), color var(--t1);
}
.mega__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s-hell); color: var(--s-tinte); }
.mega__icon .ic { width: 21px; height: 21px; }
.mega ul strong { display: block; font-size: .98rem; font-weight: 720; letter-spacing: -.01em; color: var(--tinte); }
.mega ul small { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.45; color: var(--text-2); }
.mega ul a:hover, .mega ul a[aria-current="page"] { background: var(--s-hell); }
.mega__bild { width: 52px; height: 52px; transition: transform var(--t2) var(--ease); }
.mega ul a:hover .mega__bild { transform: translateY(-2px) scale(1.06); }
.mega ul a:hover .mega__icon, .mega ul a[aria-current="page"] .mega__icon { background: var(--s-tinte); color: #fff; }

.kopf__aktion { display: flex; align-items: center; gap: 14px; flex: none; }
.kopf__tel {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .98rem; color: var(--tinte); text-decoration: none;
  padding: 8px 4px;
}
.kopf__tel .ic { width: 18px; height: 18px; color: var(--s-tinte); }
.kopf__tel:hover span { text-decoration: underline; }
.kopf__menue {
  display: none; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--haar-2);
  background: var(--flaeche); color: var(--tinte);
}
.kopf__menue .ic { width: 22px; height: 22px; }
.kopf__menue .ic--zu, .kopf__menue[aria-expanded="true"] .ic--auf { display: none; }
.kopf__menue[aria-expanded="true"] .ic--zu { display: block; }

.menue { border-top: 1px solid var(--haar); background: var(--flaeche); height: calc(100svh - var(--kopf-hoehe)); overflow: auto; overscroll-behavior: contain; }
.menue__innen { display: grid; padding-block: 12px 28px; }
.menue__innen > a {
  padding: 13px 4px; font-size: 1.25rem; font-weight: 720; letter-spacing: -.02em; color: var(--tinte); text-decoration: none;
  border-bottom: 1px solid var(--haar);
}
.menue__innen > a[aria-current="page"] { color: var(--s-tinte); }
.menue__kontakt { display: grid; gap: 10px; margin-top: 22px; }
.menue__titel { margin-top: 18px; padding: 0 4px 2px; font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.menue__innen > .menue__titel:first-child { margin-top: 4px; }

@media (max-width: 1180px) { .kopf__tel span { display: none; } .kopf__tel { width: 44px; height: 44px; justify-content: center; border: 1.5px solid var(--haar-2); border-radius: 14px; background: var(--flaeche); } }
@media (max-width: 1080px) { /* volle Menüleiste erst ab 1081 px, darunter passt sie nicht in den Rahmen (Anfrage-Knopf ragte bei 1024 px 20 px heraus) */
  .kopf__nav { display: none; }
  .kopf__menue { display: grid; }
  .kopf__aktion { margin-left: auto; }
}
@media (max-width: 560px) {
  :root { --kopf-hoehe: 66px; }
  .kopf__aktion .knopf { display: none; }
  .marke__logo { height: 44px; }
}

/* ===== 020-lageplan.css ===== */
/* ---------- Lageplan (teile/lageplan.mjs, js/030-lageplan.js) ----------
   Draufsicht im Linienstil: Boden in Netzweiß-Stufen, Gebäude weiß mit Nachtblau-Kontur, Sichtkegel im Seed-Rot,
   Kabelwege gestrichelt mit fließenden Datenpunkten. Bewegung nur über transform/opacity/stroke-dashoffset. */
.lageplan { width: 100%; height: auto; font-family: var(--schrift); overflow: hidden; border-radius: var(--r); }
.lageplan[hidden] { display: none; }

.lp-boden { fill: var(--flaeche); }
.lp-strasse { fill: #E7E9F2; }
.lp-gehweg { fill: #EFF0F6; }
.lp-asphalt { fill: #EEEFF5; }
.lp-parken { fill: #E9EBF2; }
.lp-rasen { fill-opacity: 1; }
.lp-rasen-punkt { fill: #CDD6CF; }
.lp-fuge { fill: none; stroke: #DADDEA; stroke-width: 1; }
.lp-mittellinie { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 16 14; }
.lp-stellplatz { fill: none; stroke: #fff; stroke-width: 2; }
.lp-grenze { fill: none; stroke: var(--haar-2); stroke-width: 1.4; stroke-dasharray: 5 5; }
.lp-zaun { fill: none; stroke: #9DA2BE; stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.lp-silo { fill: none; stroke: var(--tinte); stroke-width: 4; stroke-linejoin: round; }
.lp-silage { fill-opacity: 1; }
.lp-rampe { stroke: var(--tinte); stroke-width: 1.2; }
.lp-abkalb { fill: var(--s-hell); stroke: var(--s-akzent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.lp-tank { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 1.6; }
.lp-tank-innen { fill: none; stroke: var(--haar-2); stroke-width: 1; }

.lp-wand { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 1.8; stroke-linejoin: round; }
.lp-first { fill: none; stroke: var(--haar-2); stroke-width: 1.2; stroke-dasharray: 6 4; }
.lp-haus--flach .lp-first { stroke-dasharray: none; stroke: #E4E6F0; }

.lp-tuer-luecke { stroke: var(--flaeche); stroke-width: 3.4; }
.lp-tuer-bogen { fill: none; stroke: var(--haar-2); stroke-width: 1; stroke-dasharray: 2 2; }
.lp-tuer-blatt { stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: inherit; transition: transform 700ms var(--ease); }
.lp-tuer.ist-offen .lp-tuer-blatt { transform: rotate(var(--dreh)); }
.lp-tor-schiene { stroke: var(--haar-2); stroke-width: 1.2; stroke-dasharray: 3 3; }
.lp-tor-blatt { stroke: var(--tinte); stroke-width: 4; stroke-linecap: round; transition: transform 1600ms var(--ease-io); }
.lp-tor.ist-offen .lp-tor-blatt { transform: translateX(-104px); }

/* Sichtkegel: ruhig sichtbar, beim Ereignis hell */
.lp-kegel-a { stop-color: var(--s-akzent); stop-opacity: .36; }
.lp-kegel-b { stop-color: var(--s-akzent); stop-opacity: .15; }
.lp-kegel-c { stop-color: var(--s-akzent); stop-opacity: 0; }
.lp-kegel { opacity: .7; stroke: var(--s-akzent); stroke-opacity: .22; stroke-width: 1; stroke-linejoin: round; transition: opacity 500ms var(--ease); }
.lp-kegel.ist-aktiv { opacity: 1; }

.lp-kabel { fill: none; stroke: var(--s-akzent); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.lageplan.laeuft .lp-kabel { animation: lp-daten 1.4s linear infinite; }
.lp-kabel.ist-aktiv { stroke-opacity: 1; stroke-width: 2; }
@keyframes lp-daten { to { stroke-dashoffset: -16; } }
.lp-funk { fill: none; stroke: var(--s-akzent); stroke-width: 1.6; stroke-dasharray: 1 7; stroke-linecap: round; }
.lageplan.laeuft .lp-funk { animation: lp-daten 1s linear infinite; }

.lp-name { font-size: 11px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; fill: var(--tinte); }
.lp-ort { font-size: 10.5px; font-weight: 650; letter-spacing: .04em; fill: var(--text-3); }
.lp-ebene-text text { paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round; }

.lp-gehaeuse { fill: var(--tinte); }
.lp-linse { fill: var(--s-akzent); }
.lp-leser { fill: var(--flaeche); stroke: var(--s-tinte); stroke-width: 1.8; transition: fill 300ms, stroke 300ms; }
.lp-nfc { fill: none; stroke: var(--s-tinte); stroke-width: 1.3; stroke-linecap: round; transition: stroke 300ms; }
.lp-rekorder { fill: var(--tinte); }
.lp-schaechte { stroke: #6E7193; stroke-width: 1.6; stroke-linecap: round; }
.lp-status { fill: #3DDC84; }
.lp-bild { fill: #3A3D66; }
.lp-funkwelle { fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-linecap: round; }
.lp-ring { fill: var(--flaeche); fill-opacity: .9; stroke: var(--s-linie); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.lp-geraet--rekorder .lp-ring, .lp-geraet--monitor .lp-ring { display: none; }
.lp-geraet.ist-aktiv .lp-ring { stroke: var(--s-akzent); stroke-width: 1.5; animation: lp-puls 1.6s var(--ease) infinite; }
@keyframes lp-puls { 0% { transform: scale(1); stroke-opacity: 1; } 100% { transform: scale(2.3); stroke-opacity: 0; } }
.lp-geraet--leser.ist-frei .lp-leser { fill: #E8F6EE; stroke: var(--gut); }
.lp-geraet--leser.ist-frei .lp-nfc { stroke: var(--gut); }
.lp-geraet--leser.ist-gesperrt .lp-leser { fill: #FDECEA; stroke: var(--fehler); }
.lp-geraet--leser.ist-gesperrt .lp-nfc { stroke: var(--fehler); }

/* Erkanntes Objekt mit Erkennungsrahmen (wird vom Skript entlang seines Wegs bewegt) */
.lp-objekt { opacity: 0; transition: opacity 300ms var(--ease); }
.lp-objekt.ist-an { opacity: 1; }
.lp-punkt { fill: var(--tinte); stroke: #fff; stroke-width: 2; }
.lp-rahmen { fill: none; stroke: var(--s-akzent); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity 250ms; }
.lp-objekt.ist-erkannt .lp-rahmen { opacity: 1; }

[data-bewegung="aus"] .lageplan .lp-kabel, [data-bewegung="aus"] .lageplan .lp-funk, [data-bewegung="aus"] .lp-geraet .lp-ring { animation: none !important; }

/* Sportplatz (Vereinsgelände): blasses Rasengrün mit weißen Linien, Flutlichtmasten */
.lp-spielfeld { fill: #E2ECE3; }
.lp-feldlinie { fill: none; stroke: #fff; stroke-width: 2; }
.lp-feldpunkt { fill: #fff; }
.lp-mast { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 1.4; }

/* ===== 025-film.css ===== */
/* ---------- Einstiegs-Slider (Entscheidung Ferdinand 03./04.10.2026, fließend seit 05.10.) ----------
   Dunkle Bühne mit mehreren KI-Filmen (teile/film.mjs, js/025-film.js). Kurz vor Filmende blendet der nächste Film
   über (1,2 s), beide laufen dabei; die abtretende Folie (.geht) bleibt voll sichtbar darunter, damit die Mitte der
   Überblendung nicht dunkler wird. Glut in den letzten 2 s auf dem laufenden Film (.ist-schluss). Folien mit Standzeit
   (Klingel) stehen nach dem Film kurz. Reiterleiste unten mit Fortschritt, Pause-Knopf.
   Slides liegen per Grid übereinander (gleiche Zelle), damit die Höhe auch am Handy stimmt.
   Ohne Skript, bei „Bewegung reduzieren“ (Schalter) oder „Daten sparen“: Endbilder, Reiter schalten von Hand.
   Handy: quadratischer Ausschnitt um das Motiv oben, Text darunter. */
.film {
  position: relative; isolation: isolate; overflow: clip; color: #fff; background: #060814;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(580px, calc(100svh - var(--kopf-hoehe)), 920px);
}
.film__slide {
  --film-pos: 58% 50%; --linse-x: 56%; --linse-qx: 50%; --linse-y: 41%;
  grid-area: 1 / 1 / 3 / 2; position: relative; display: grid; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 1200ms var(--ease-io), visibility 0s linear 1200ms;
}
.film__slide.ist-aktiv { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1200ms var(--ease-io), visibility 0s; }
/* Abtretende Folie: bleibt unter der neuen voll stehen (ihr Film läuft aus), bis die neue ganz da ist */
.film__slide.geht { opacity: 1; visibility: visible; transition: none; }
.film__medien { --glut-x: var(--linse-x); position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Einschweben: der neue Film setzt minimal größer ein und gleitet auf normal, der abtretende fährt dabei leicht heran
   (nur Querformat, nicht bei der Klingel-Folie, deren Ebenen sonst verrutschen) */
@media (min-width: 761px) {
  .film__slide:not(.film__slide--klingel) .film__medien { transform: scale(1.04); transition: transform 2400ms cubic-bezier(.22, .61, .36, 1); }
  .film__slide.ist-aktiv:not(.film__slide--klingel) .film__medien { transform: none; }
  [data-bewegung="aus"] .film__slide .film__medien { transform: none; transition: none; }
}
.film__bild, .film__bild img, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__bild img, .film__video { object-fit: cover; object-position: var(--film-pos); }
.film__video { opacity: 0; transition: opacity 400ms var(--ease); }
.film__bild--ende { opacity: 0; transition: opacity 600ms var(--ease); }
.film__slide.laeuft .film__video { opacity: 1; }
.film__slide.ist-ende .film__bild--ende { opacity: 1; }
.film__slide.ist-ende .film__video { opacity: 0; transition-delay: 600ms; }
/* Langsames Heranfahren am Endbild, solange es steht (nur transform) */
.film__slide.ist-ende .film__bild--ende img { animation: film-halten 9s linear both; }
@keyframes film-halten { from { transform: scale(1); } to { transform: scale(1.035); } }
[data-bewegung="aus"] .film__bild--ende img { animation: none !important; }

/* Glut am Endbild (Linse bzw. Leser), pulsiert ruhig. Sie liegt in Bildkoordinaten: Die Ebene ist so groß und so
   verschoben wie das per object-fit: cover beschnittene 16:9-Bild (Container-Einheiten der Medienfläche), damit sie
   auch auf schmalen oder sehr breiten Bildschirmen genau auf Linse bzw. Leser sitzt. Sie fährt mit dem Endbild heran. */
.film__medien { container-type: size; }
.film__glut {
  --bw: max(100cqw, 100cqh * 16 / 9); --bh: max(100cqh, 100cqw * 9 / 16);
  --bl: calc(var(--pos-x, .5) * (100cqw - var(--bw))); --bo: calc(var(--pos-y, .5) * (100cqh - var(--bh)));
  position: absolute; left: var(--bl); top: var(--bo); width: var(--bw); height: var(--bh);
  transform-origin: calc(50cqw - var(--bl)) calc(50cqh - var(--bo));
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--glut-x) var(--linse-y), rgba(255, 60, 60, .55) 0, rgba(238, 52, 59, .22) 7%, rgba(238, 52, 59, 0) 24%);
  transition: opacity 900ms var(--ease);
}
.film__glut--gruen { background: radial-gradient(circle at var(--glut-x) var(--linse-y), rgba(80, 230, 140, .5) 0, rgba(49, 196, 111, .18) 5%, rgba(49, 196, 111, 0) 16%); }
.film__glut--aus { display: none; }
.film__slide.ist-schluss .film__glut { opacity: 1; animation: film-glut 3.6s var(--ease-io) 900ms infinite alternate; }
.film__slide.ist-ende .film__glut { opacity: 1; animation: film-glut 3.6s var(--ease-io) 900ms infinite alternate, film-halten 9s linear both; }
[data-bewegung="aus"] .film__glut { animation: none; }
/* Pause-Knopf hält alles an, was sich bewegt (Glut und Heranfahren) */
.film.glut-aus .film__glut, .film.glut-aus .film__bild--ende img { animation-play-state: paused; }
@keyframes film-glut { from { opacity: .55; } to { opacity: 1; } }

/* Schleier: links dicht für die Schrift, unten für die Leiste */
.film__schleier {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(4, 6, 16, .86) 0%, rgba(4, 6, 16, 0) 28%),
    linear-gradient(90deg, rgba(4, 6, 16, .9) 0%, rgba(4, 6, 16, .76) 30%, rgba(4, 6, 16, .25) 48%, rgba(4, 6, 16, 0) 60%);
}
.film__innen { padding-block: clamp(48px, 7vw, 120px) clamp(96px, 9vw, 132px); }
.film__text { max-width: 640px; }
.film .film__titel { color: #fff; font-size: clamp(2.5rem, 1.2rem + 3vw, 4.15rem); font-weight: 780; line-height: 1.02; letter-spacing: -.038em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); text-wrap: balance; }
.film .lead { margin-top: 22px; max-width: 44ch; color: rgba(255, 255, 255, .88); }
.film .knopfreihe { margin-top: clamp(28px, 3vw, 38px); }
.film .dachzeile--hell { color: rgba(255, 255, 255, .86); }
.film :focus-visible { outline-color: #fff; }
/* Text gleitet beim Slide-Wechsel sanft herein */
.js .film__slide .film__text > * { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .film__slide:not(.ist-aktiv) .film__text > * { opacity: 0; transform: translateY(14px); }
/* Wechsel nacheinander statt übereinander: alter Text geht zügig nach oben, der neue kommt erst danach */
.js .film__slide.geht .film__text > * { transform: translateY(-10px); transition-duration: 380ms; transition-delay: 0s; }
.js .film__slide.ist-aktiv .film__text > * { transition-delay: 320ms; }
.js .film__slide.ist-aktiv .film__text > :nth-child(2) { transition-delay: 400ms; }
.js .film__slide.ist-aktiv .film__text > :nth-child(3) { transition-delay: 480ms; }
.js .film__slide.ist-aktiv .film__text > :nth-child(4) { transition-delay: 560ms; }
[data-bewegung="aus"] .film__slide .film__text > * { transition: none; }

/* Sehr breite Bildschirme: Text bleibt bündig mit dem Logo der Kopfzeile. Damit die Überschrift ab ca. 2000 px nicht ins
   Motiv läuft (Kamerarand bei ~48 % der Breite), enden Überschrift und Text vor 46 % (die Knöpfe darunter dürfen breiter sein) und die Überschrift wird etwas kleiner.
   Gilt nicht für die Klingel-Folie, deren Text um das Handy herum Platz hat. */
@media (min-width: 1800px) {
  .film__slide:not(.film__slide--klingel) :is(.film__titel, .lead) { max-width: min(640px, 46vw - (100vw - var(--rahmen)) / 2); }
  .film .film__titel { font-size: 3.75rem; }
}

/* Leiste unten: Reiter mit Fortschritt, KI-Hinweis, Pause */
.film__leiste { grid-area: 2 / 1 / 3 / 2; z-index: 2; display: flex; align-items: center; gap: 16px; padding-block: 0 clamp(20px, 2.4vw, 32px); }
.film__reiter { display: flex; gap: clamp(6px, 1vw, 14px); flex-wrap: wrap; }
.film__reiterknopf {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px 12px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .72); font-size: .92rem; font-weight: 680; overflow: hidden;
  transition: background-color var(--t2) var(--ease), color var(--t1);
}
.film__reiterknopf:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.film__reiterknopf[aria-selected="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.film__nr { font-size: .74rem; font-weight: 780; color: rgba(255, 255, 255, .55); }
.film__reiterknopf[aria-selected="true"] .film__nr { color: var(--s-akzent); }
.film__fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--s-akzent); transform: scaleX(var(--fortschritt, 0)); transform-origin: left; }
.film__reiterknopf:not([aria-selected="true"]) .film__fortschritt { --fortschritt: 0; }
.film__weiter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .92rem; font-weight: 680; color: rgba(255, 255, 255, .86); text-decoration: none; }
.film__weiter .ic { width: 18px; height: 18px; }
.film__ki { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .75rem; font-weight: 650; color: rgba(255, 255, 255, .86); white-space: nowrap; }
.film__pause {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(4, 6, 16, .35); color: #fff; transition: background-color var(--t1), border-color var(--t1);
}
.film__pause:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.film__pause .ic { width: 16px; height: 16px; }
/* Angehalten: Start-Dreieck statt Pause-Balken */
.film__zeichen-start, .film__pause[aria-pressed="true"] .film__zeichen-pause { display: none; }
.film__pause[aria-pressed="true"] .film__zeichen-start { display: block; margin-left: 2px; }
[data-bewegung="aus"] .film__pause { display: none; }

/* ---------- Folie „Klingeln“ (art klingel): Klingelkamera hochkant im Handy, Szene unscharf dahinter ----------
   Eigene App-Oberfläche wie in der App-Vitrine (keine UniFi-Nachbildung). Einheiten im Bildschirm = Container-Breite
   (cqw), damit das Handy in jeder Größe gleich aussieht. js/025-film.js setzt data-zustand nach Filmzeit:
   klingelt → Ruf-Plakette, spricht → Sprechen-Knopf rot + Tonwelle + Untertitel, paket → Erkennungsrahmen + Meldung.
   Handygröße: höchstens 78 % der Bühne, 680 px hoch und 36 vw breit; der Text weicht um die Handybreite aus. */
.film__slide--klingel {
  --buehne: clamp(580px, calc(100svh - var(--kopf-hoehe)), 920px);
  --kh: min(calc(var(--buehne) * .78), 680px, 69.6vw); --kw: calc(var(--kh) * 9 / 17.4);
}
.film__slide--klingel .film__text { max-width: min(640px, 100% - var(--kw) - clamp(40px, 6vw, 96px)); }
/* Ebenen: Szene (-2) unter dem Schleier (-1), Handy (1) darüber; die Medienfläche bildet hier keine eigene Ebene */
.film__medien--klingel { z-index: auto; }
.film__hinter { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.film__slide--klingel .film__schleier {
  background:
    linear-gradient(0deg, rgba(4, 6, 16, .8) 0%, rgba(4, 6, 16, 0) 28%),
    linear-gradient(90deg, rgba(4, 6, 16, .88) 0%, rgba(4, 6, 16, .62) 38%, rgba(4, 6, 16, .2) 62%, rgba(4, 6, 16, .08) 100%);
}
.klingel {
  --ui-rot: #ee343b; --ui-gruen: #31c46f; --ui-2: #1b2036; --ui-dim: #9aa1c0;
  position: absolute; z-index: 1; top: calc(50% - 28px); right: max(var(--rand), (100% - var(--rahmen)) / 2); /* bündig mit der rechten Kante der Kopfzeile */
  width: var(--kw); height: var(--kh); padding: calc(var(--kh) * .014); border-radius: calc(var(--kh) * .072);
  transform: translateY(-50%);
  background: linear-gradient(160deg, #2c2f3d, #0d0f17 55%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 50px 90px -30px rgba(0, 0, 0, .75), 0 0 120px -20px rgba(238, 52, 59, .22);
}
.klingel__bildschirm {
  position: relative; height: 100%; overflow: hidden; container-type: inline-size; border-radius: calc(var(--kh) * .06);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: #0b0e1c; color: #fff;
}
.klingel__kopf { display: flex; align-items: center; gap: 2.4cqw; padding: 10cqw 4.5cqw 3.4cqw; font-size: 4.6cqw; line-height: 1.15; }
.klingel__kopf .ic { width: 6cqw; height: 6cqw; flex: none; }
.klingel__ort { font-weight: 720; }
.klingel__ort small { display: block; font-size: 3.4cqw; font-weight: 600; color: var(--ui-dim); }
.klingel__live { margin-left: auto; display: inline-flex; align-items: center; gap: 1.5cqw; padding: 1.2cqw 2.8cqw; border-radius: 99px; background: rgba(238, 52, 59, .16); color: #ff8a8f; font-size: 3.3cqw; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.klingel__punkt { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: var(--ui-rot); animation: app-live 1.6s ease-in-out infinite; }
.klingel__bild { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #05070f; }
.klingel__poster, .klingel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.klingel__video { opacity: 0; transition: opacity 400ms var(--ease); }
.klingel__poster--ende { opacity: 0; transition: opacity 600ms var(--ease); }
.film__slide.laeuft .klingel__video { opacity: 1; }
.film__slide.ist-ende .klingel__poster--ende { opacity: 1; }
.film__slide.ist-ende .klingel__video { opacity: 0; transition-delay: 600ms; }
/* Ruf, Rahmen, Untertitel, Meldung: unsichtbar, bis der Zustand passt */
.klingel__ruf, .klingel__paketkamera, .klingel__untertitel, .klingel__welle { opacity: 0; transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.klingel__ruf {
  position: absolute; left: 3.5cqw; top: 3.5cqw; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.5cqw 3.2cqw 1.5cqw 2.6cqw;
  border-radius: 99px; background: var(--ui-rot); font-size: 3.7cqw; font-weight: 740; transform: translateY(-2cqw);
}
.klingel__ruf .ic { width: 4.4cqw; height: 4.4cqw; }
/* Am Ende: Bild der zweiten Kamera (Paketkamera der Klingel) oben rechts im Klingelbild, mit dem Karton auf der Matte */
.klingel__paketkamera {
  position: absolute; right: 3.5cqw; top: 3.5cqw; width: 40%; overflow: hidden; border-radius: 2.4cqw;
  border: .5cqw solid rgba(255, 255, 255, .85); box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, .5); transform: translateY(-3cqw) scale(.94); transform-origin: top right;
}
.klingel__paketkamera img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.klingel__paketkamera > span { position: absolute; left: 1.4cqw; top: 1.4cqw; display: inline-flex; align-items: center; gap: .9cqw; padding: .5cqw 1.6cqw; border-radius: 99px; background: rgba(6, 8, 20, .74); font-size: 2.8cqw; font-weight: 700; }
.klingel__paketkamera .ic { width: 3.2cqw; height: 3.2cqw; }
.klingel__untertitel {
  position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 17%; margin: 0; padding: 2.6cqw 3.4cqw; border-radius: 3cqw;
  background: rgba(6, 8, 20, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 3.9cqw; line-height: 1.35; transform: translateY(2cqw);
}
.klingel__untertitel b { display: block; margin-bottom: .6cqw; font-size: 3cqw; letter-spacing: .08em; text-transform: uppercase; color: #ff8a8f; }
.klingel__steuer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; padding: 3cqw 3cqw 5cqw; }
.klingel__knopf { position: relative; display: grid; justify-items: center; gap: 2cqw; font-size: 3.3cqw; font-weight: 650; color: var(--ui-dim); transition: color 300ms; }
.klingel__knopf .ic { box-sizing: content-box; width: 6.4cqw; height: 6.4cqw; padding: 4.4cqw; border-radius: 50%; background: var(--ui-2); color: #fff; transition: background-color 300ms, box-shadow 300ms; }
.klingel__knopf--ab .ic { background: rgba(238, 52, 59, .16); color: #ff8a8f; }
.klingel__knopf--auf .ic { background: rgba(49, 196, 111, .16); color: var(--ui-gruen); }
.klingel__welle { position: absolute; top: -5.4cqw; left: 50%; display: flex; align-items: center; gap: .9cqw; height: 4cqw; transform: translateX(-50%); }
.klingel__welle i { width: .9cqw; height: 100%; border-radius: 1cqw; background: var(--ui-rot); animation: klingel-welle .8s ease-in-out infinite alternate; }
.klingel__welle i:nth-child(2) { animation-delay: -.3s; } .klingel__welle i:nth-child(3) { animation-delay: -.55s; } .klingel__welle i:nth-child(4) { animation-delay: -.15s; }
@keyframes klingel-welle { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.film__slide[data-zustand="klingelt"] .klingel__ruf { opacity: 1; transform: none; animation: klingel-ruf 1s ease-in-out infinite; }
/* Beim Klingeln vibriert das Handy kurz (eigene rotate-Eigenschaft, verträgt sich mit der Lage per transform) */
.film__slide[data-zustand="klingelt"] .klingel { animation: klingel-vibrieren .55s ease-in-out 2; }
@keyframes klingel-vibrieren { 20% { rotate: -1.4deg; } 40% { rotate: 1.4deg; } 60% { rotate: -.9deg; } 80% { rotate: .6deg; } }
@keyframes klingel-ruf { 50% { transform: scale(1.06); } }
.film__slide[data-zustand="spricht"] .klingel__untertitel,
.film__slide[data-zustand="spricht"] .klingel__welle { opacity: 1; transform: translateX(0); }
.film__slide[data-zustand="spricht"] .klingel__welle { transform: translateX(-50%); }
.film__slide[data-zustand="spricht"] .klingel__knopf--sprechen { color: #fff; }
.film__slide[data-zustand="spricht"] .klingel__knopf--sprechen .ic { background: var(--ui-rot); box-shadow: 0 0 0 2cqw rgba(238, 52, 59, .22); }
.film__slide[data-zustand="paket"] .klingel__paketkamera { opacity: 1; transform: none; }
.film.glut-aus .klingel__ruf, .film.glut-aus .klingel__welle i, .film.glut-aus .klingel__punkt { animation-play-state: paused; }
[data-bewegung="aus"] .klingel, [data-bewegung="aus"] .klingel__ruf, [data-bewegung="aus"] .klingel__welle i, [data-bewegung="aus"] .klingel__punkt { animation: none; }

/* Handy und schmale Tablets: quadratischer Ausschnitt oben, Text darunter. Die Leiste liegt über dem Quadrat, damit man
   im ersten Bildschirm sieht, dass es mehrere Filme gibt: Reiter an der Unterkante (auf dem Schleier), KI-Hinweis und
   Pause oben rechts. Höhe des Quadrats = Breite der Bühne (100cqi). */
@media (max-width: 760px) {
  .film { min-height: 0; container-type: inline-size; }
  .film__slide { grid-area: 1 / 1 / 2 / 2; display: block; }
  /* Glut-Lage im Quadrat (teile/film.mjs rechnet sie aus kx); die Inline-Werte am Slide gelten weiter für quer */
  .film__medien { --glut-x: var(--linse-qx); container-type: normal; position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1; }
  .film__glut { inset: 0; width: auto; height: auto; transform-origin: 50% 50%; }
  .film__bild img, .film__video { object-position: 50% 50%; }
  .film__schleier {
    position: absolute; inset: 0 0 auto; aspect-ratio: 1 / 1; height: auto; z-index: 0;
    background: linear-gradient(0deg, #060814 0%, rgba(6, 8, 20, .62) 15%, rgba(6, 8, 20, 0) 34%), linear-gradient(180deg, rgba(6, 8, 20, .45) 0%, rgba(6, 8, 20, 0) 16%);
  }
  .film__innen { position: relative; padding-block: 14px 40px; }
  .film .film__titel { font-size: clamp(2.1rem, 1.3rem + 4vw, 2.8rem); }
  .film .knopfreihe .knopf { width: 100%; }
  .film__leiste { grid-area: 1 / 1 / 2 / 2; position: absolute; inset: 0 0 auto; height: 100cqi; padding: 0; display: block; pointer-events: none; }
  .film__leiste > * { pointer-events: auto; }
  .film__reiter { position: absolute; left: 0; right: 0; bottom: 6px; flex-wrap: nowrap; gap: 6px; }
  .film__reiterknopf { flex: 1 1 0; justify-content: center; gap: 5px; min-width: 0; padding: 10px 4px 12px; font-size: .86rem; background: rgba(6, 8, 20, .5); backdrop-filter: blur(6px); }
  .film__reiterknopf[aria-selected="true"] { background: rgba(255, 255, 255, .16); }
  .film__nr { font-size: .68rem; }
  .film__ki { position: absolute; top: 18px; right: 54px; margin: 0; background: rgba(6, 8, 20, .5); }
  .film__pause { position: absolute; top: 8px; right: 0; }
  .film__weiter { position: absolute; left: 0; bottom: 6px; }
  /* Klingel-Folie: Handy mittig im Quadrat, zwischen Oberkante und Reitern */
  /* Klingel-Folie: Handy links im Quadrat (rechts oben stehen KI-Hinweis und Pause), zwischen Oberkante und Reitern;
     Medienfläche ohne eigene Ebene, sonst läge der Schleier über dem Handy */
  .film__slide--klingel { --kh: calc(100cqi - 72px); }
  .film__slide--klingel .film__text { max-width: none; }
  .film__medien--klingel { z-index: auto; }
  .klingel { top: 10px; right: auto; left: var(--rand); transform: none; }
}
/* Fünf Reiter: Nummern erst ab 1001 px (sonst bricht die Leiste am Tablet um) */
@media (max-width: 1000px) { .film__nr { display: none; } }
@media (max-width: 430px) { .film__reiterknopf { font-size: .82rem; } }

/* ===== 028-zahlen.css ===== */
/* ---------- Belegte Zahlen und Verkaufs-Bausteine (teile/zahlen.mjs, js/027-zahlen.js), seit 08.10.2026 ----------
   Zahlen-Band (dunkel, schließt an die Filmbühne an), Saison-Modul mit Monatsgrafik, Winterpaket, „Fachbetrieb statt
   Baumarkt“, Regional-Zahlen, Beleg-Kästen, Steuerbonus, Abo-Rechner, Aktions-Banner. Quellen stehen immer sichtbar dabei. */
:root { --nacht: #060814; }
.beleg__quelle { font-size: .82rem; color: var(--text-3); }
.beleg__quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Zahlen-Band */
.zband { background: var(--nacht); color: #fff; padding-block: clamp(44px, 5.5vw, 84px) clamp(40px, 5vw, 72px); border-top: 1px solid rgba(255, 255, 255, .07); }
.zband .dachzeile { color: rgba(255, 255, 255, .82); }
.zband__kopf h2 { margin-top: 10px; max-width: 24ch; color: #fff; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.zband__kacheln { list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px); }
.zband__kachel { border-top: 2px solid var(--s-akzent); padding-top: 18px; }
.zband__zahl { margin: 0; font-size: clamp(2.7rem, 1.5rem + 3.4vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zband__zahl small { margin-left: .1em; font-size: .46em; font-weight: 780; letter-spacing: -.01em; color: var(--s-akzent); }
.zband__text { margin: 12px 0 0; font-size: .98rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.zband__quellen { margin: clamp(26px, 3vw, 36px) 0 0; font-size: .82rem; color: rgba(255, 255, 255, .56); }
.zband__quellen a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .zband__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Saison-Modul */
.saison { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.saison__text h2 { margin-top: 10px; }
.saison__text .lead { margin-top: 18px; }
@media (max-width: 960px) { .saison { grid-template-columns: minmax(0, 1fr); } }

/* Monatsgrafik */
.monate { margin: 30px 0 0; }
.monate__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, .8vw, 10px); align-items: end; }
.monat { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 6px; text-align: center; }
.monat__zahl { font-size: .66rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.monat__balken { display: block; height: calc(var(--wert) * clamp(120px, 16vw, 190px)); border-radius: 6px 6px 2px 2px; background: #CDD0DE; transform-origin: bottom; transition: transform 900ms var(--ease); }
.monat--winter .monat__balken { background: var(--s-tinte); }
.monat--winter .monat__zahl { color: var(--s-tinte); }
.monat__name { font-size: .78rem; font-weight: 700; color: var(--text-2); }
.monate figcaption { margin-top: 14px; font-size: .86rem; line-height: 1.5; color: var(--text-2); }
.js .monate:not(.ist-an) .monat__balken { transform: scaleY(.04); }
.monate .monat:nth-child(n) .monat__balken { transition-delay: calc(var(--i, 0) * 40ms); }
[data-bewegung="aus"] .monat__balken { transition: none; transform: none !important; }
@media (max-width: 700px) { .monat__zahl { display: none; } }

/* Winterpaket */
.winter { padding: clamp(24px, 3vw, 38px); border-radius: var(--r-gross); background: var(--nacht); color: #fff; box-shadow: 0 30px 60px -36px rgba(6, 8, 20, .7); }
.winter__marke { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--s-akzent); font-size: .76rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.winter__titel { margin-top: 16px; color: #fff; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); line-height: 1.12; letter-spacing: -.02em; }
.winter__schritte { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.winter__schritte li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.winter__schritte strong { display: block; color: #fff; font-size: 1.02rem; }
.winter__nr { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--s-akzent); color: #fff; font-weight: 780; }
.winter .knopf { margin-top: 24px; }

/* Fachbetrieb statt Baumarkt */
.fachbetrieb { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fachbetrieb__text h2 { margin-top: 10px; text-wrap: balance; }
.fachbetrieb__text .lead { margin: 18px 0 12px; }
.fachbetrieb__vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fachbetrieb__spalte { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r); border: 1px solid var(--haar); background: var(--flaeche); }
.fachbetrieb__spalte h3 { font-size: 1.08rem; }
.fachbetrieb__spalte ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.fachbetrieb__spalte li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: .94rem; line-height: 1.45; color: var(--text-2); }
.fachbetrieb__spalte li .ic { width: 20px; height: 20px; margin-top: 1px; }
.fachbetrieb__spalte strong { color: var(--tinte); }
.fachbetrieb__spalte--nein { background: #F4F5F9; }
.fachbetrieb__spalte--nein .ic { color: #9A9EB8; }
.fachbetrieb__spalte--ja { border-color: var(--s-tinte); background: var(--s-hell); }
.fachbetrieb__spalte--ja .ic { color: var(--s-tinte); }
@media (max-width: 1000px) { .fachbetrieb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .fachbetrieb__vergleich { grid-template-columns: minmax(0, 1fr); } }

/* Regional-Zahlen (Abschnitt Region) */
.region__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.region__zahl { margin: 0; }
.region__zahl strong { display: block; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--s-tinte); }
.region__zahl span { display: block; margin-top: 6px; font-size: .94rem; line-height: 1.45; color: var(--text-2); }
.region__quelle { margin-top: 12px; font-size: .82rem; color: var(--text-3); }
.region__quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Beleg-Kasten (Gewerbe, Landwirtschaft) */
.abschnitt--beleg { padding-block: clamp(8px, 2vw, 24px); }
.beleg-kasten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3.4vw, 48px); align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-gross); background: var(--nacht); color: #fff; }
.beleg-kasten__zahl { margin: 0; font-size: clamp(3rem, 1.8rem + 4.4vw, 5.6rem); font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--s-akzent); white-space: nowrap; }
.beleg-kasten__titel { margin: 0; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 780; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.beleg-kasten__text p { margin: 10px 0 0; color: rgba(255, 255, 255, .8); }
.beleg-kasten__text .beleg-kasten__titel { margin-top: 0; color: #fff; }
.beleg-kasten__quelle, .beleg-kasten__quelle .beleg__quelle { font-size: .8rem; color: rgba(255, 255, 255, .56) !important; }
@media (max-width: 640px) { .beleg-kasten { grid-template-columns: minmax(0, 1fr); } }

/* Steuerbonus */
.steuer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3.4vw, 48px); align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-gross); background: var(--s-hell); border: 1px solid rgba(219, 26, 43, .18); }
.steuer__zahl { margin: 0; font-size: clamp(3rem, 1.8rem + 4.4vw, 5.6rem); font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--s-tinte); white-space: nowrap; }
.steuer__text h2 { font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); text-wrap: balance; }
.steuer__text p { margin-top: 12px; color: var(--text-2); }
.steuer__text .steuer__quelle { font-size: .82rem; color: var(--text-3); }
@media (max-width: 640px) { .steuer { grid-template-columns: minmax(0, 1fr); } }

/* Abo-Rechner */
.rechner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 40px); padding: clamp(22px, 3vw, 36px); border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--haar); }
.rechner__feld { display: grid; gap: 8px; margin-bottom: 20px; font-weight: 680; color: var(--tinte); }
.rechner__feld output { font-variant-numeric: tabular-nums; color: var(--s-tinte); }
.rechner__eingabe { min-width: 0; }
.rechner__feld { min-width: 0; }
.rechner__feld select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--haar-2); border-radius: 14px; background: #fff; font: inherit; font-weight: 600; color: var(--tinte); }
.rechner__feld input[type="range"] { width: 100%; accent-color: var(--s-tinte); min-height: 32px; }
.rechner__ergebnis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.rechner__seite { padding: clamp(18px, 2vw, 24px); border-radius: var(--r); background: #F4F5F9; }
.rechner__seite--unifi { background: var(--nacht); color: #fff; }
.rechner__titel { margin: 0; font-size: .92rem; font-weight: 700; color: var(--text-2); }
.rechner__seite--unifi .rechner__titel { color: rgba(255, 255, 255, .78); }
.rechner__summe { margin: 10px 0 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--s-tinte); }
.rechner__seite--unifi .rechner__summe { color: #fff; }
.rechner__klein { margin: 8px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.rechner__hinweis { grid-column: 1 / -1; margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-3); }
.rechner__hinweis a { color: inherit; text-decoration: underline; }
@media (max-width: 860px) { .rechner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .rechner__ergebnis { grid-template-columns: minmax(0, 1fr); } }

/* Tabelle (Einbruch in Zahlen) */
.ztabelle-rahmen { overflow-x: auto; margin-top: clamp(20px, 2.6vw, 32px); }
.ztabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ztabelle caption { text-align: left; font-weight: 700; color: var(--text-2); padding-bottom: 10px; }
.ztabelle th, .ztabelle td { padding: 14px 12px; border-bottom: 1px solid var(--haar); text-align: right; white-space: nowrap; }
.ztabelle th:first-child, .ztabelle td:first-child { text-align: left; padding-left: 0; }
.ztabelle thead th { font-size: .82rem; color: var(--text-3); font-weight: 700; white-space: normal; vertical-align: bottom; }
@media (max-width: 900px) { .ztabelle th, .ztabelle td { padding: 12px 8px; } }
/* Handy: jede Zeile als kleine Karte mit Beschriftung je Wert */
@media (max-width: 640px) {
  .ztabelle thead { display: none; }
  .ztabelle tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--haar); }
  .ztabelle tbody th, .ztabelle tbody td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .ztabelle tbody th { grid-column: 1 / -1; font-size: 1.05rem; }
  .ztabelle tbody td::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 600; color: var(--text-3); }
}
.ztabelle tbody th { font-weight: 720; color: var(--tinte); }
.ztabelle tbody tr:nth-child(n+3) td { color: var(--s-tinte); font-weight: 700; }
.ztabelle__quelle { margin-top: 12px; font-size: .82rem; color: var(--text-3); }
.polizei-rat { max-width: 860px; }
.polizei-rat .lead { margin-top: 16px; }
.quellen { padding-left: 1.2em; }
.quellen li { margin-bottom: 8px; }

/* Aktions-Banner (Tag des Einbruchschutzes) */
.aktion { background: var(--s-tinte); color: #fff; font-size: .92rem; }
.aktion__innen { display: flex; align-items: center; gap: 14px; min-height: 46px; padding-block: 6px; }
.aktion__text { margin: 0; flex: 1 1 auto; line-height: 1.4; }
.aktion__text strong { font-weight: 780; }
.aktion__link { color: #fff; font-weight: 760; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.aktion__zu { flex: none; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
@media (max-width: 640px) {
  .aktion { position: relative; font-size: .84rem; }
  .aktion__innen { flex-wrap: wrap; gap: 6px 12px; padding-block: 10px; padding-right: 36px; }
  .aktion__text { flex-basis: 100%; }
  .aktion__zu { position: absolute; top: 4px; right: 6px; margin: 0; }
}

/* ===== 030-einstieg.css ===== */
/* ---------- Einstieg der Startseite: Text links, Lageplan-Bühne rechts ---------- */
.einstieg { position: relative; padding-block: clamp(28px, 3.4vw, 56px) clamp(56px, 6vw, 104px); overflow: clip; }
.einstieg__innen { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.einstieg h1 { font-size: clamp(2.4rem, 1.15rem + 3vw, 4rem); }
.einstieg .lead { margin-top: 22px; max-width: 48ch; }
.einstieg .knopfreihe { margin-top: 30px; }
.einstieg__punkte { margin-top: 30px; }
@media (max-width: 1060px) { .einstieg__innen { grid-template-columns: minmax(0, 1fr); } .einstieg__text { max-width: 720px; } }

/* Dachzeile mit REC-Punkt: der rote Aufnahmepunkt ist der „Funke“ von RoluControl */
.dachzeile { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .84rem; font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.rec { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--s-akzent); flex: none; }
.rec::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--s-akzent); opacity: 0; animation: rec-puls 2.4s var(--ease) infinite; }
@keyframes rec-puls { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
[data-bewegung="aus"] .rec::after { animation: none; }

.haken-liste { display: grid; gap: 10px; }
.haken-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text); font-weight: 560; }
.haken-liste .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--s-tinte); stroke-width: 2.2; }

/* ---------- Lageplan-Bühne ---------- */
.lpb { background: var(--flaeche); border: 1px solid var(--haar); border-radius: var(--r-gross); padding: clamp(10px, 1.2vw, 16px); }
.lpb__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 2px 2px 12px; }
.lpb__reiter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--haar); }
.lpb__reiter button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  font-size: .95rem; font-weight: 680; color: var(--text-2); transition: background-color var(--t2) var(--ease), color var(--t1);
}
.lpb__reiter button:hover { color: var(--tinte); background: var(--s-hell); }
.lpb__reiter button[aria-selected="true"] { background: var(--s-tinte); color: #fff; }
.lpb__titel { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 700; color: var(--text-2); }
.lpb__live { width: 8px; height: 8px; border-radius: 50%; background: var(--s-akzent); box-shadow: 0 0 0 4px var(--s-hell); }
.lpb__plan { border-radius: var(--r); overflow: hidden; background: var(--flaeche-2); }
.lpb__fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 4px 2px; }
.lpb__legende { font-size: .84rem; font-weight: 620; color: var(--text-3); }
.lpb__ueber { font-size: .74rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }

.ereignisse { display: grid; border-top: 1px solid var(--haar); }
.ereignis {
  display: grid; grid-template-columns: 3.4em 10px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 2px; border-bottom: 1px solid var(--haar); font-size: .92rem;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), background-color 900ms var(--ease);
}
.ereignis::before { content: ""; grid-column: 2; grid-row: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--s-akzent); }
.ereignis--zutritt::before { background: var(--gut); }
.ereignis--abgelehnt::before { background: var(--fehler); box-shadow: inset 0 0 0 2px #fff; outline: 1.5px solid var(--fehler); }
.ereignis__zeit { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; font-weight: 720; color: var(--tinte); }
.ereignis__text { grid-column: 3; grid-row: 1; font-weight: 640; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ereignis__quelle { grid-column: 4; grid-row: 1; font-size: .82rem; color: var(--text-3); white-space: nowrap; }
.ereignis.ist-neu { opacity: 0; transform: translateY(-8px); background: var(--s-hell); }
[data-bewegung="aus"] .ereignis { transition: none; }
@media (max-width: 620px) {
  .ereignis { grid-template-columns: 3.4em 10px minmax(0, 1fr); row-gap: 0; }
  .ereignis__quelle { grid-column: 3; grid-row: 2; }
  .ereignis__text { white-space: normal; }
  .lpb__reiter { width: 100%; }
  .lpb__reiter button { flex: 1 1 0; padding: 0 8px; }
}

/* ---------- Feldlinien (Canvas, js/020-feld.js) hinter Unterseitenköpfen und im Kontaktband, wie rolutec.de ---------- */
.feld { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.34) 36%, #000 64%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.34) 36%, #000 64%); }
.feld canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--ease); }
.feld.ist-bereit canvas { opacity: 1; }
.gross { position: relative; width: 100%; }
.unterheld__zeichen .gross { width: min(100%, 330px); }
@media (max-width: 1000px) {
  .feld { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 30%, #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 30%, #000 70%); }
}

/* ===== 040-bausteine.css ===== */
/* ---------- Bausteine der RoluControl-Seiten (Systeme, Werte, Einsatz, Recht, Fragen, Produkte, Register) ---------- */

/* Weiße Bänder für Rhythmus zwischen den netzweißen Abschnitten */
.abschnitt--systeme, .abschnitt--recht-kamera, .abschnitt--produkte:nth-of-type(odd), .abschnitt--ausstattung {
  background: var(--flaeche); border-block: 1px solid var(--haar); padding-top: clamp(72px, 5rem + 4vw, 148px) !important;
}
.abschnitt--systeme + .abschnitt, .abschnitt--recht-kamera + .abschnitt, .abschnitt--ausstattung + .abschnitt,
.abschnitt--produkte:nth-of-type(odd) + .abschnitt { padding-top: clamp(72px, 5rem + 4vw, 148px); }

.mehr-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 700; color: var(--s-tinte); text-decoration: none; min-height: 44px; }
.mehr-link .ic { width: 18px; height: 18px; transition: transform var(--t2) var(--ease); }
.mehr-link:hover { text-decoration: underline; }
.mehr-link:hover .ic { transform: translateX(3px); }

/* Produktfoto auf ruhiger Fläche (Ubiquiti-Fotos sind freigestellt) */
.produktflaeche, .system__bild, .produkt__bild, .ausstattung img {
  background: radial-gradient(120% 90% at 50% 38%, #fff 0%, #fff 42%, var(--flaeche-2) 100%);
  border: 1px solid var(--haar); border-radius: var(--r);
}

/* ---------- Drei Systeme ---------- */
.systeme { display: grid; border-top: 2px solid var(--tinte); }
.system { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--haar); }
.system__bild { display: block; aspect-ratio: 1; overflow: hidden; }
.system__bild img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t3) var(--ease); }
.system:hover .system__bild img { transform: scale(1.04); }
.system__nr { font-size: .82rem; font-weight: 780; letter-spacing: .06em; color: var(--s-tinte); }
.system h3 { margin-top: 6px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 760; letter-spacing: -.028em; }
.system h3 a { text-decoration: none; }
.system h3 a:hover { color: var(--s-tinte); }
.system__text > p:not(.system__nr) { margin-top: 12px; max-width: 58ch; color: var(--text-2); }
.system .haken-liste { margin-top: 18px; }
@media (max-width: 760px) { .system { grid-template-columns: minmax(0, 1fr); } .system__bild { max-width: 260px; } }

/* ---------- Werte (Datenblatt) mit Titel ---------- */
.werte-titel { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
.werte-titel .ic { width: 26px; height: 26px; color: var(--s-tinte); }

/* ---------- Einsatzbereiche: drei Spalten mit Haarlinien ---------- */
.einsatz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--haar); border-bottom: 1px solid var(--haar); }
.einsatz__spalte + .einsatz__spalte { border-left: 1px solid var(--haar); }
.einsatz__spalte > a { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 2.6vw, 40px) clamp(18px, 2.2vw, 34px); text-decoration: none; color: inherit; transition: background-color var(--t2) var(--ease); }
.einsatz__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--s-hell); color: var(--s-tinte); margin-bottom: 22px; transition: background-color var(--t2), color var(--t2); }
/* Leuchtmodell-Icons (KI): frei stehend, schweben beim Überfahren leicht an */
.einsatz__bild { width: clamp(132px, 12vw, 176px); height: auto; margin: -8px 0 14px -10px; transition: transform var(--t3) var(--ease); }
.einsatz__spalte > a:hover .einsatz__bild { transform: translateY(-6px) scale(1.04); }
.einsatz__icon .ic { width: 28px; height: 28px; }
.einsatz h3 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); letter-spacing: -.024em; }
.einsatz p { margin: 10px 0 22px; color: var(--text-2); }
.einsatz__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--s-tinte); }
.einsatz__link .ic { width: 18px; height: 18px; transition: transform var(--t2) var(--ease); }
.einsatz__spalte > a:hover h3 { color: var(--s-tinte); }
/* Außenspalten ohne Innenabstand zum Rand: Texte stehen bündig mit Überschrift und Kopfzeile (sonst wirken sie versetzt) */
.einsatz__spalte:nth-child(4n+1) > a { padding-left: 0; }
.einsatz__spalte:nth-child(4n) > a { padding-right: 0; }
.einsatz__spalte > a:hover .einsatz__icon { background: var(--s-tinte); color: #fff; }
.einsatz__spalte > a:hover .einsatz__link .ic { transform: translateX(3px); }
@media (max-width: 1100px) {
  .einsatz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .einsatz__spalte:nth-child(3) { border-left: 0; }
  .einsatz__spalte:nth-child(n+3) { border-top: 1px solid var(--haar); }
  .einsatz__spalte:nth-child(odd) > a { padding-left: 0; }
  .einsatz__spalte:nth-child(even) > a { padding-right: 0; }
}
@media (max-width: 640px) {
  .einsatz { grid-template-columns: minmax(0, 1fr); }
  .einsatz__spalte + .einsatz__spalte { border-left: 0; border-top: 1px solid var(--haar); }
  .einsatz__spalte > a { padding-inline: 0; }
}

/* ---------- Vereinsgelände Bereich für Bereich (vereine.html) ---------- */
.zonen { display: grid; border-top: 2px solid var(--tinte); counter-reset: zone; }
.zone { display: grid; grid-template-columns: 56px minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(18px, 3vw, 44px); align-items: start; padding: 24px 0; border-bottom: 1px solid var(--haar); }
.zone__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--s-hell); color: var(--s-tinte); }
.zone__icon .ic { width: 24px; height: 24px; }
.zone h3 { padding-top: 10px; }
.zone__was, .zone__warum { padding-top: 10px; color: var(--text-2); }
.zone__was::before, .zone__warum::before { display: block; margin-bottom: 4px; font-size: .76rem; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.zone__was::before { content: "Was wir einsetzen"; }
.zone__warum::before { content: "Warum"; }
.zone:last-child .zone__icon { background: var(--flaeche-2); color: var(--text-3); }
@media (max-width: 900px) {
  .zone { grid-template-columns: 48px minmax(0, 1fr); }
  .zone__icon { grid-row: span 3; }
  .zone__was, .zone__warum { grid-column: 2; padding-top: 4px; }
}

/* ---------- Kameras und Rücksicht ---------- */
.recht-kamera { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.recht-kamera .lead { margin-top: 20px; }
.recht-kamera__hinweis { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 28px; padding: 16px 18px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--haar); font-size: .92rem; color: var(--text-2); }
.recht-kamera__hinweis .ic { width: 22px; height: 22px; color: var(--s-tinte); }
@media (max-width: 900px) { .recht-kamera { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Häufige Fragen ---------- */
.fragen-rahmen { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.fragen-rahmen__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
.fragen-rahmen__kopf .lead { margin-top: 18px; }
.fragen-rahmen__kopf .lead a { color: var(--s-tinte); font-weight: 700; white-space: nowrap; }
.fragen { border-top: 2px solid var(--tinte); }
.frage { border-bottom: 1px solid var(--haar); }
.frage summary { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 16px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage h3 { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); transition: color var(--t1); }
.frage summary:hover h3 { color: var(--s-tinte); }
.frage__plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--haar-2); color: var(--tinte); transition: transform var(--t2) var(--ease), background-color var(--t1), border-color var(--t1); }
.frage__plus .ic { width: 16px; height: 16px; }
.frage[open] .frage__plus { transform: rotate(45deg); background: var(--s-tinte); border-color: var(--s-tinte); color: #fff; }
.frage__antwort { padding: 0 48px 24px 0; }
.frage__antwort p { color: var(--text-2); max-width: 68ch; }
@media (max-width: 900px) { .fragen-rahmen { grid-template-columns: minmax(0, 1fr); } .fragen-rahmen__kopf { position: static; } .frage__antwort { padding-right: 0; } }

/* ---------- Produkte (Datenblatt-Zeilen mit Foto) ---------- */
.produkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 72px); border-top: 2px solid var(--tinte); }
.produkt { display: grid; grid-template-columns: clamp(120px, 12vw, 168px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; padding: 26px 0; border-bottom: 1px solid var(--haar); }
.produkt__bild { aspect-ratio: 1; overflow: hidden; }
.produkt__bild img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t3) var(--ease); }
.produkt:hover .produkt__bild img { transform: scale(1.05); }
.produkt__art { font-size: .8rem; font-weight: 740; letter-spacing: .03em; color: var(--s-tinte); }
.produkt h3 { margin-top: 2px; font-size: clamp(1.15rem, 1.05rem + .3vw, 1.32rem); }
.produkt__text > p:not(.produkt__art) { margin-top: 6px; color: var(--text-2); font-size: .96rem; }
.produkt__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--haar-2); }
.produkt__werte dt { font-size: .76rem; font-weight: 700; color: var(--text-3); }
.produkt__werte dd { font-size: .9rem; font-weight: 640; color: var(--tinte); }
.raster-2 .produkte { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .produkte { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .produkt { grid-template-columns: 96px minmax(0, 1fr); } .produkt__werte { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Erkennung ---------- */
.erkennung { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.erkennung__text .lead { margin-top: 20px; }
.erkennung__text > p:not(.lead) { margin-top: 16px; color: var(--text-2); max-width: 60ch; }
.erkennung__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--tinte); }
.erkennung__liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--haar); }
.erkennung__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--s-hell); color: var(--s-tinte); }
.erkennung__icon .ic { width: 22px; height: 22px; }
.erkennung__liste strong { font-weight: 740; color: var(--tinte); }
.erkennung__liste span:last-child { font-size: .9rem; color: var(--text-2); }
@media (max-width: 960px) { .erkennung { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .erkennung__liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Aufbau einer Tür als Kette ---------- */
.kette { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.kette::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; border-top: 2px dashed var(--s-linie); }
.kette__glied { position: relative; }
.kette__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--s-tinte); color: var(--s-tinte); box-shadow: 0 0 0 6px var(--grund); }
.kette__glied:last-child .kette__icon { background: var(--s-tinte); color: #fff; }
.kette__icon .ic { width: 24px; height: 24px; }
.kette h3 { margin-top: 18px; }
.kette p { margin-top: 8px; color: var(--text-2); font-size: .96rem; }
@media (max-width: 900px) {
  .kette { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kette::before { left: 27px; right: auto; top: 28px; bottom: 28px; border-top: 0; border-left: 2px dashed var(--s-linie); }
  .kette__glied { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 28px; }
  .kette__icon { grid-row: span 2; }
  .kette h3 { margin-top: 14px; }
}

/* ---------- Beispiel-Ausstattung ---------- */
.ausstattung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 72px); border-top: 2px solid var(--tinte); }
.ausstattung__zeile { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--haar); }
.ausstattung img { grid-row: span 3; width: 88px; height: 88px; object-fit: contain; }
.ausstattung__ort { font-size: .8rem; font-weight: 740; color: var(--s-tinte); }
.ausstattung__geraet { font-weight: 720; color: var(--tinte); }
.ausstattung__modell { font-size: .88rem; color: var(--text-3); }
@media (max-width: 900px) { .ausstattung { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Unterseitenköpfe: Produktfoto bzw. Lageplan rechts ---------- */
.unterheld__produkt { display: grid; place-items: center; }
.unterheld__produkt img { width: min(100%, 440px); height: auto; animation: schweben 7s var(--ease-io) infinite alternate; filter: drop-shadow(0 30px 30px rgba(12, 12, 46, .12)); }
[data-bewegung="aus"] .unterheld__produkt img { animation: none; }
@media (max-width: 900px) { .unterheld__produkt { justify-items: start; } .unterheld__produkt img { width: 240px; } }
.unterheld--plan .unterheld__innen { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.unterheld.unterheld--plan h1 { font-size: clamp(2.1rem, 1rem + 2.2vw, 3.2rem); -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
@media (max-width: 1060px) { .unterheld--plan .unterheld__innen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kontakt: nächste Schritte ---------- */
.kontakt__ablauf { margin-top: 36px; padding: 22px 24px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--haar); }
.kontakt__ablauf h3 { font-size: 1.08rem; }
.kontakt__ablauf ol { counter-reset: schritt; display: grid; gap: 12px; margin-top: 14px; }
.kontakt__ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; color: var(--text-2); font-size: .96rem; }
.kontakt__ablauf li::before { content: counter(schritt); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s-hell); color: var(--s-tief); font-weight: 780; font-size: .85rem; }

/* ---------- Register (Systeme / Einsatzbereiche als Zeilen) ---------- */
.reg__liste--breit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid var(--haar); }
.abschnitt h2 + .reg__liste--breit { margin-top: clamp(24px, 2.6vw, 40px); }
.reg__zeile { border-bottom: 1px solid var(--haar); }
.reg__zeile > a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 14px 12px 14px 4px; margin-inline: -4px -12px; border-radius: 14px; text-decoration: none; color: inherit; transition: background-color var(--t2) var(--ease); }
.reg__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--s-hell); color: var(--s-tinte); transition: background-color var(--t2), color var(--t2); }
.reg__icon .ic { width: 24px; height: 24px; }
.reg__name { font-size: 1.02rem; font-weight: 720; letter-spacing: -.012em; line-height: 1.3; color: var(--tinte); }
.reg__kurz { display: block; margin-top: 3px; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.reg__pfeil { color: var(--text-3); transition: transform var(--t2) var(--ease), color var(--t1); }
.reg__pfeil .ic { width: 20px; height: 20px; }
.reg__zeile > a:hover { background: var(--s-hell); }
.reg__zeile > a:hover .reg__icon { background: var(--s-tinte); color: #fff; }
.reg__bild { width: 64px; height: 64px; transition: transform var(--t2) var(--ease); }
.reg__zeile > a:hover .reg__bild { transform: translateY(-3px) scale(1.06); }
.reg__zeile > a:hover .reg__pfeil { color: var(--s-tinte); transform: translateX(4px); }
@media (max-width: 1060px) { .reg__liste--breit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .reg__liste--breit { grid-template-columns: minmax(0, 1fr); } }

/* Team: drei Ansprechpartner wie auf rolutec.de, das mittlere Porträt leicht versetzt */
.abschnitt--menschen .team { list-style: none; }
@media (min-width: 901px) { .abschnitt--menschen .person:nth-child(2) { margin-top: clamp(28px, 4vw, 60px); } }

/* Team am Handy: Porträt klein links, Text rechts (sonst drei bildschirmhohe Fotos untereinander) */
@media (max-width: 560px) {
  .abschnitt--menschen .team { gap: 0; border-top: 1px solid var(--haar); }
  .abschnitt--menschen .person { grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--haar); }
  .abschnitt--menschen .person__bild { grid-row: span 3; border-radius: 16px; }
  .abschnitt--menschen .person__rolle { margin-top: 0; }
  .abschnitt--menschen .person h3 { font-size: 1.2rem; }
}
.fragen-rahmen__kopf h2 { -webkit-hyphens: auto; hyphens: auto; }

/* ===== 045-app.css ===== */
/* ---------- App-Vitrine: Tablet + Handy mit eigener, vereinfachter Oberfläche (teile/app.mjs, js/035-app.js) ----------
   Die Oberfläche skaliert mit der Tablet-Breite (Container-Einheiten), damit sie am Handy wie am Desktop gleich aussieht.
   Dunkles App-Design (wie Sicherheits-Apps üblich), Akzent Signalrot, „geöffnet“ in Grün. */
.app { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.app__liste { display: grid; border-top: 2px solid var(--tinte); }
.app__reiter {
  position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 10px; text-align: left;
  padding: 18px 8px 18px 4px; border: 0; border-bottom: 1px solid var(--haar); background: transparent; color: inherit;
  transition: background-color var(--t2) var(--ease);
}
.app__reiter:hover { background: var(--s-hell); }
.app__nr { grid-row: span 2; font-size: .8rem; font-weight: 780; letter-spacing: .04em; color: var(--text-3); padding-top: 4px; }
.app__name { font-size: 1.12rem; font-weight: 740; letter-spacing: -.015em; color: var(--tinte); }
.app__text { margin-top: 2px; font-size: .92rem; line-height: 1.45; color: var(--text-2); }
.app__reiter[aria-selected="true"] .app__nr, .app__reiter[aria-selected="true"] .app__name { color: var(--s-tinte); }
.app__fortschritt { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--s-tinte); }
.app__reiter[aria-selected="true"] .app__fortschritt { width: 100%; }
.app.laeuft .app__reiter[aria-selected="true"] .app__fortschritt { width: 0; animation: app-fortschritt var(--app-takt, 6.5s) linear forwards; }
@keyframes app-fortschritt { to { width: 100%; } }

.app__buehne { position: relative; padding: 0 clamp(52px, 13%, 156px) clamp(28px, 5%, 64px) 0; }

/* Tablet (quer, 4:3) */
.tablet {
  position: relative; border-radius: clamp(18px, 2.4vw, 34px); padding: clamp(9px, 1.1vw, 16px);
  background: linear-gradient(145deg, #2a2d3a, #0d0f17 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 70px -40px rgba(12, 12, 46, .55), 0 18px 30px -24px rgba(12, 12, 46, .4);
}
.tablet__bildschirm { position: relative; aspect-ratio: 4 / 3; border-radius: clamp(10px, 1.2vw, 18px); overflow: clip; background: #0b0e1c; container-type: inline-size; }
.tablet__ki { position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(26px, 2.6vw, 34px)); text-align: center; font-size: .78rem; color: var(--text-3); }

/* Handy (hoch), überlappt rechts unten */
.handy {
  position: absolute; right: 0; bottom: 0; width: clamp(110px, 21%, 210px); border-radius: clamp(20px, 2.6vw, 34px); padding: clamp(5px, .6vw, 8px);
  background: linear-gradient(160deg, #2a2d3a, #0d0f17 55%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 50px -24px rgba(12, 12, 46, .6);
}
.handy__bildschirm {
  position: relative; aspect-ratio: 9 / 19.5; border-radius: clamp(15px, 2vw, 27px); overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 80% at 30% 10%, #3b2232 0%, #141729 55%, #0b0e1c 100%); color: #fff;
}
.handy__uhr { padding: 22cqw 0 0; text-align: center; font-size: 19cqw; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.handy__uhr small { display: block; margin-top: 3cqw; font-size: 5.6cqw; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .8); }
.handy__meldung {
  position: absolute; left: 5cqw; right: 5cqw; top: 66cqw; display: grid; grid-template-columns: 11cqw minmax(0, 1fr); gap: 3cqw; align-items: center;
  padding: 4cqw; border: 0; border-radius: 6cqw; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; text-align: left; font: inherit; cursor: pointer; transition: transform 500ms var(--ease), opacity 500ms var(--ease);
}
.handy__meldung img { grid-column: 1 / -1; width: 100%; border-radius: 3cqw; margin-top: 1cqw; }
.handy__meldung--zwei { top: auto; bottom: 30cqw; grid-template-columns: 11cqw minmax(0, 1fr); background: rgba(255, 255, 255, .1); }
.handy__app { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3cqw; background: var(--s-tinte); color: #fff; }
.handy__app svg { width: 7cqw; height: 7cqw; }
.handy__app--klingel { background: #4b5170; }
.handy__text { font-size: 5cqw; line-height: 1.3; color: rgba(255, 255, 255, .85); }
.handy__text strong { display: block; font-size: 5.6cqw; color: #fff; }
.app:not(.zeigt-meldung) .handy__meldung:not(.handy__meldung--zwei) { transform: translateY(-8cqw) scale(.96); opacity: 0; pointer-events: none; }
.js .app:not(.zeigt-meldung):not(.statisch) .handy__meldung--zwei { transform: translateY(-48cqw); }

/* ---------- App-Oberfläche (Einheiten relativ zur Tablet-Breite) ---------- */
.appui { --ui: #0b0e1c; --ui-2: #151a2e; --ui-3: #20263f; --ui-text: #eef0f8; --ui-dim: #9aa1c0; --ui-rot: #ee343b; --ui-gruen: #31c46f;
  position: absolute; inset: 0; overflow: clip; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--ui); color: var(--ui-text); font-size: 1.6cqw; line-height: 1.35; }
.appui__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2cqw; padding: 1.6cqw 2.2cqw; border-bottom: 1px solid var(--ui-3); }
.appui__standort { font-weight: 760; font-size: 1.9cqw; }
.appui__standort small { display: block; font-size: 1.3cqw; font-weight: 600; color: var(--ui-dim); }
.appui__nav { justify-self: center; display: inline-flex; gap: .6cqw; padding: .5cqw; border-radius: 99px; background: var(--ui-2); }
.appui__nav span { padding: .7cqw 1.6cqw; border-radius: 99px; font-size: 1.45cqw; font-weight: 650; color: var(--ui-dim); transition: background-color 300ms, color 300ms; }
.appui__nav span.ist-an { background: var(--ui-3); color: #fff; }
.appui__status { display: inline-flex; align-items: center; gap: .8cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.appui__live { display: inline-block; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--ui-rot); box-shadow: 0 0 0 .5cqw rgba(238, 52, 59, .25); animation: app-live 1.6s ease-in-out infinite; }
@keyframes app-live { 50% { opacity: .35; } }
[data-bewegung="aus"] .appui__live { animation: none; }

.appui__seite { min-height: 0; padding: 1.8cqw 2.2cqw; overflow: clip; animation: app-seite 420ms var(--ease); }
.appui__seite[hidden] { display: none; }
@keyframes app-seite { from { opacity: 0; transform: translateY(1cqw); } to { opacity: 1; transform: none; } }
[data-bewegung="aus"] .appui__seite { animation: none; }

.appui__bild { position: relative; display: block; overflow: hidden; border-radius: 1cqw; background: #000; }
.appui__bild img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.appui__rahmen { position: absolute; border: .25cqw solid var(--ui-rot); border-radius: .5cqw; box-shadow: 0 0 0 .3cqw rgba(238, 52, 59, .25); }
.appui__rahmen span { position: absolute; left: -.25cqw; top: -2.3cqw; padding: .2cqw .7cqw; border-radius: .4cqw; background: var(--ui-rot); font-size: 1.15cqw; font-weight: 700; white-space: nowrap; }

/* Live: 2 × 2 Kacheln */
.appui__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; height: 100%; align-content: center; }
.appui__kachel { position: relative; margin: 0; }
.appui__kachel figcaption { position: absolute; left: 1cqw; bottom: 1cqw; display: inline-flex; align-items: center; gap: .7cqw; padding: .4cqw 1cqw; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: 1.3cqw; font-weight: 650; }

/* Ereignisse: Filter + Liste */
.appui__filter { display: flex; gap: .8cqw; margin-bottom: 1.4cqw; }
.appui__filter span { padding: .6cqw 1.4cqw; border-radius: 99px; background: var(--ui-2); font-size: 1.3cqw; font-weight: 650; color: var(--ui-dim); }
.appui__filter .ist-an { background: var(--ui-rot); color: #fff; }
.appui__liste { display: grid; gap: .9cqw; }
.appui__liste li { display: grid; grid-template-columns: 12cqw minmax(0, 1fr) auto; gap: 1.6cqw; align-items: center; padding: .9cqw; border-radius: 1.2cqw; background: var(--ui-2); }
.appui__mini .appui__bild { border-radius: .7cqw; }
.appui__was strong { display: block; font-size: 1.6cqw; }
.appui__was small { font-size: 1.3cqw; color: var(--ui-dim); }
.appui__uhr { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ui-dim); padding-right: .8cqw; }

/* Wiedergabe: großes Bild, Zeitleiste mit Marken */
.appui__seite--wiedergabe { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 1.4cqw; }
.appui__gross { position: relative; min-height: 0; }
.appui__gross .appui__bild { height: 100%; }
.appui__gross .appui__bild img { aspect-ratio: auto; }
.appui__stempel { position: absolute; left: 1.2cqw; top: 1.2cqw; padding: .4cqw 1cqw; border-radius: .6cqw; background: rgba(0, 0, 0, .6); font-size: 1.3cqw; font-weight: 650; font-variant-numeric: tabular-nums; }
.appui__zeitleiste { position: relative; height: 5.4cqw; margin: 0 1cqw; }
.appui__spur { position: absolute; left: 0; right: 0; top: 1.6cqw; height: .8cqw; border-radius: 99px; background: linear-gradient(90deg, var(--ui-3) 0 100%); }
.appui__marke { position: absolute; top: 1.15cqw; width: 1.8cqw; height: 1.8cqw; margin-left: -.9cqw; padding: 0; border-radius: 50%; border: .3cqw solid var(--ui); background: var(--ui-rot); cursor: pointer; transition: transform 200ms; }
.appui__marke--zutritt { background: var(--ui-gruen); }
.appui__marke--fahrzeug { background: #f0a23b; }
.appui__marke--tier { background: #9b8cff; }
.appui__marke:hover, .appui__marke.ist-an { transform: scale(1.35); }
.appui__kopfstrich { position: absolute; top: .4cqw; width: .3cqw; height: 3.4cqw; margin-left: -.15cqw; background: #fff; border-radius: 99px; transition: left 500ms var(--ease); }
.appui__skala { position: absolute; left: 0; right: 0; top: 3.4cqw; display: flex; justify-content: space-between; font-size: 1.1cqw; color: var(--ui-dim); }
.appui__knoepfe { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; }
.appui__knoepfe span { padding: .6cqw 1.3cqw; border-radius: 99px; background: var(--ui-2); font-size: 1.3cqw; font-weight: 650; color: var(--ui-dim); }
.appui__knoepfe .appui__play { width: 4.2cqw; height: 4.2cqw; display: grid; place-items: center; padding: 0; border-radius: 50%; background: #fff; color: var(--ui); font-size: 1.6cqw; }
.appui__knoepfe .appui__export { margin-left: auto; color: #fff; background: var(--ui-3); }

/* Tür & Tor: Klingelruf */
.appui__anruf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2cqw; height: 100%; align-items: center; }
.appui__anrufbild { position: relative; }
.appui__klingelt { position: absolute; left: 1.2cqw; top: 1.2cqw; display: inline-flex; align-items: center; gap: .8cqw; padding: .5cqw 1.2cqw; border-radius: 99px; background: var(--ui-rot); font-size: 1.35cqw; font-weight: 700; animation: app-klingel 1.2s ease-in-out infinite; }
@keyframes app-klingel { 50% { box-shadow: 0 0 0 1cqw rgba(238, 52, 59, 0); } 0% { box-shadow: 0 0 0 0 rgba(238, 52, 59, .55); } }
[data-bewegung="aus"] .appui__klingelt { animation: none; }
.appui__titel { font-size: 2.6cqw; font-weight: 760; letter-spacing: -.02em; }
.appui__untertitel { font-size: 1.4cqw; color: var(--ui-dim); }
.appui__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin: 2cqw 0; }
.appui__btn { display: grid; place-items: center; padding: 1.2cqw; border-radius: 1.2cqw; font-weight: 700; font-size: 1.45cqw; }
.appui__btn--grau { background: var(--ui-2); }
.appui__btn--gruen { grid-column: 1 / -1; background: var(--ui-gruen); color: #04210f; padding: 1.6cqw; font-size: 1.7cqw; transition: transform 200ms, filter 200ms; }
.appui.offen .appui__btn--gruen { filter: brightness(1.15); }
.appui.offen .appui__btn--gruen::after { content: " ✓"; }
.appui__protokoll { display: grid; gap: .6cqw; font-size: 1.3cqw; color: var(--ui-dim); }
.appui__protokoll span { display: inline-block; min-width: 6.5cqw; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__liste { order: 2; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
@media (max-width: 560px) {
  .app__liste { grid-template-columns: minmax(0, 1fr); }
  .app__buehne { padding-right: 20%; }
  .handy { width: 30%; }
}

/* ===== 050-ablauf.css ===== */
/* ---------- Ablauf als Wechselstrom-Welle ---------- */
.ablauf { position: relative; }
.ablauf__welle { width: 100%; height: clamp(90px, 9vw, 120px); overflow: visible; }
.ablauf__spur { fill: none; stroke: var(--haar-2); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 2 6; stroke-linecap: round; }
.ablauf__strom {
  fill: none; stroke: var(--s-akzent); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.ablauf__knoten { position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 9vw, 120px); pointer-events: none; }
.ablauf__knoten span {
  position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--s-tinte); box-shadow: 0 0 0 5px var(--grund), 0 0 0 6.5px var(--s-linie);
}
.ablauf__schritte { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); margin-top: 22px; }
.ablauf__schritte li { text-align: center; max-width: 34ch; margin-inline: auto; }
.ablauf__schritte h3 { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); }
.ablauf__schritte p { margin-top: 8px; color: var(--text-2); font-size: .97rem; }

/* Einschalten: Strom läuft einmal durch, Knoten schalten nacheinander ein (nur mit Skript, Endzustand ist sichtbar) */
.js [data-ablauf]:not(.ist-an) .ablauf__strom { stroke-dashoffset: 1; }
.js [data-ablauf]:not(.ist-an) .ablauf__knoten span { background: var(--flaeche); box-shadow: 0 0 0 5px var(--grund), inset 0 0 0 2px var(--haar-2); }
.js [data-ablauf] .ablauf__strom { transition: stroke-dashoffset 1800ms var(--ease-io); }
.ablauf__knoten span:last-child { background: var(--funke); box-shadow: 0 0 0 5px var(--grund), 0 0 0 6.5px rgba(238, 52, 59, .35); }
.js [data-ablauf].ist-an .ablauf__knoten span { animation: funke 1000ms var(--ease) calc(200ms + var(--i) * 1500ms / var(--n)) both; }
.js [data-ablauf].ist-an .ablauf__knoten span:last-child { animation-name: funke-bleibt; }
[data-bewegung="aus"] .ablauf__knoten span { animation: none !important; }
@keyframes funke {
  0% { background: var(--flaeche); box-shadow: 0 0 0 5px var(--grund), inset 0 0 0 2px var(--haar-2); }
  30% { background: var(--funke); box-shadow: 0 0 0 5px var(--grund), 0 0 0 11px rgba(238, 52, 59, .28); }
  100% { background: var(--s-tinte); box-shadow: 0 0 0 5px var(--grund), 0 0 0 6.5px var(--s-linie); }
}
@keyframes funke-bleibt {
  0% { background: var(--flaeche); box-shadow: 0 0 0 5px var(--grund), inset 0 0 0 2px var(--haar-2); }
  30% { background: var(--funke); box-shadow: 0 0 0 5px var(--grund), 0 0 0 11px rgba(238, 52, 59, .28); }
  100% { background: var(--funke); box-shadow: 0 0 0 5px var(--grund), 0 0 0 6.5px rgba(238, 52, 59, .35); }
}

@media (max-width: 760px) {
  .ablauf__welle, .ablauf__knoten { display: none; }
  .ablauf__schritte { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .ablauf__schritte li { text-align: left; max-width: none; margin: 0; position: relative; padding: 0 0 28px 36px; }
  .ablauf__schritte li::before {
    content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--s-tinte); box-shadow: 0 0 0 4px var(--grund), 0 0 0 5.5px var(--s-linie);
  }
  .ablauf__schritte li::after { content: ""; position: absolute; left: 10px; top: 26px; bottom: 2px; width: 2px; background: var(--haar-2); }
  .ablauf__schritte li:last-child::after { display: none; }
  .ablauf__schritte li:last-child::before { background: var(--funke); box-shadow: 0 0 0 4px var(--grund), 0 0 0 5.5px rgba(238, 52, 59, .35); }
}

/* ===== 060-menschen-region.css ===== */
/* ---------- Menschen ---------- */
.menschen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
/* Zwei Einzelporträts der Geschäftsführung (dieselben Dateien wie auf der Team-Seite), das zweite leicht versetzt */
.menschen__bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); align-items: start; }
.menschen__person:nth-child(2) { margin-top: clamp(28px, 4vw, 60px); }
.menschen__person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-gross); background: #0b0b0f; }
.menschen__person figcaption { margin-top: 12px; font-size: .9rem; font-weight: 650; color: var(--text-2); }
.menschen__text .lead { margin-top: 20px; }
.personen { display: grid; gap: 0; margin: 28px 0 32px; border-top: 1px solid var(--haar); }
.personen > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--haar); }
.personen dt { font-weight: 740; color: var(--tinte); }
.personen dd { color: var(--text-2); }
@media (max-width: 900px) { .menschen { grid-template-columns: 1fr; } .personen > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Region ---------- */
.region { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.region__text .lead { margin-top: 20px; }
.region__kreise { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.region__kreise li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--haar-2); background: var(--flaeche); font-size: .92rem; font-weight: 640; color: var(--text); }
.region__karte { background: var(--flaeche); border: 1px solid var(--haar); border-radius: var(--r-gross); padding: clamp(14px, 2vw, 26px); }
.region__karte figcaption { margin-top: 10px; font-size: .85rem; color: var(--text-3); }
.karte { width: 100%; height: auto; font-family: var(--schrift); }
.karte__ring { fill: none; stroke: var(--s-akzent); stroke-opacity: .5; stroke-width: .55; stroke-linecap: round; stroke-dasharray: 0 1; }
.karte__km text { font-size: 1.7px; fill: var(--text-3); font-weight: 600; }
.karte__ort circle { fill: var(--tinte); }
.karte__ort text { font-size: 2.35px; font-weight: 640; fill: var(--text-2); }
.karte text { paint-order: stroke; stroke: var(--flaeche); stroke-width: .75px; stroke-linejoin: round; }
.karte__punkt { fill: var(--tinte); fill-opacity: .7; }
.karte__sitz circle { fill: var(--s-tinte); }
.karte__sitz .karte__puls { fill: var(--funke); fill-opacity: .28; transform-box: fill-box; transform-origin: center; animation: puls 2.6s var(--ease) infinite; }
.karte__sitz text { font-size: 2.9px; font-weight: 780; fill: var(--s-tief); letter-spacing: -.02px; }
@keyframes puls { 0% { transform: scale(.6); fill-opacity: .45; } 70%, 100% { transform: scale(2.6); fill-opacity: 0; } }
[data-bewegung="aus"] .karte__puls { animation: none; }
@media (max-width: 900px) { .region { grid-template-columns: 1fr; } }

/* ---------- Kontaktband ---------- */
.band { background: var(--s-tinte); color: #fff; padding-block: clamp(56px, 4rem + 3vw, 112px); position: relative; overflow: hidden; isolation: isolate; }
.band__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px); align-items: center; position: relative; z-index: 1; }
.feld--band { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.45) 40%, #000 70%); mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.45) 40%, #000 70%); }
.band h2 { color: #fff; }
.band__text p { margin-top: 16px; color: #fff; max-width: 46ch; font-size: 1.08rem; }
.band__tel { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); font-weight: 780; letter-spacing: -.03em; line-height: 1.1; }
.band__tel .ic { width: .8em; height: .8em; opacity: .9; }
.band__tel:hover span { text-decoration: underline; text-decoration-thickness: 2px; }
.band__zeiten { margin-top: 8px; color: #fff; font-size: .98rem; }
.band .knopfreihe { margin-top: 26px; }
.band :focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .band__innen { grid-template-columns: 1fr; } }

/* ===== 070-unterseiten.css ===== */
/* ---------- Unterseiten: Kopf mit Zeichen im Seed der Seite ---------- */
.unterheld { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(28px, 3vw, 48px) clamp(64px, 6vw, 112px); }
.unterheld__innen {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.unterheld h1 { font-size: clamp(2.05rem, 1.3rem + 3.5vw, 4.6rem); overflow-wrap: break-word; }
.unterheld .lead { margin-top: 22px; }
.unterheld .knopfreihe { margin-top: 32px; }
.unterheld__zeichen { display: grid; justify-items: center; }
.unterheld__zeichen .gross { width: min(100%, 330px); }
/* Leistungsseiten: großes Leistungs-Icon statt R; Feldlinien gehen von ihm aus (data-feld-anker), schwebt sanft */
.leistungsicon { width: min(100%, 360px); }
.leistungsicon__bild { width: 100%; height: auto; animation: schweben 7s var(--ease-io) infinite alternate; }
@keyframes schweben { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
[data-bewegung="aus"] .leistungsicon__bild { animation: none; }
@media (prefers-reduced-motion: reduce) { .leistungsicon__bild { animation-duration: 16s; } }
.unterheld--schlicht .unterheld__innen { grid-template-columns: minmax(0, 1fr); }
.unterheld--schlicht .unterheld__text { max-width: 880px; }
.unterheld--schlicht { padding-bottom: clamp(24px, 3vw, 48px); }
.unterheld--schlicht + .abschnitt { padding-top: clamp(16px, 2vw, 32px); }

.pfad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; font-size: .9rem; color: var(--text-3); }
.pfad a { color: var(--text-2); text-decoration: none; font-weight: 600; }
.pfad a:hover { color: var(--s-tinte); text-decoration: underline; }
.pfad [aria-current] { color: var(--text-3); }

/* „Was Sie bekommen“: Datenblatt statt Kacheln */
.abschnitt h2 + .umfang, .abschnitt h2 + .ablauf, .abschnitt h2 + .reg__liste--breit, .abschnitt h2 + .raster-2, .abschnitt h2 + .stellen { margin-top: clamp(28px, 3vw, 48px); }
.umfang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); border-top: 2px solid var(--tinte); }
.umfang__punkt { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--haar); }
.umfang dt { font-size: 1.12rem; font-weight: 740; letter-spacing: -.014em; color: var(--s-tief); }
.umfang dd { color: var(--text-2); }
@media (max-width: 1060px) { .umfang { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .umfang__punkt { grid-template-columns: 1fr; gap: 6px; } }

.foto { position: relative; border-radius: var(--r-gross); overflow: hidden; background: var(--haar); }
.foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .foto img { aspect-ratio: 4 / 3; } }
.abschnitt--foto { padding-top: 0; }
/* Leistungsfoto öffnet sich einmal beim Hereinscrollen (js/055-enthuellen.js); ohne Skript steht es sofort ganz da */
.js .foto[data-enthuellen] { clip-path: inset(0 round var(--r-gross)); transition: clip-path 1400ms var(--ease); }
.js .foto[data-enthuellen] img { transition: transform 1800ms var(--ease); }
.js .foto[data-enthuellen]:not(.ist-an) { clip-path: inset(5% 3.5% round var(--r-gross)); }
.js .foto[data-enthuellen]:not(.ist-an) img { transform: scale(1.08); }
[data-bewegung="aus"] .foto[data-enthuellen], [data-bewegung="aus"] .foto[data-enthuellen] img { transition: none; }
/* System „Bewegung reduzieren“: Aufziehen bleibt (kurz), aber ohne Zoom */
@media (prefers-reduced-motion: reduce) {
  .js .foto[data-enthuellen] { transition-duration: 700ms; }
  .js .foto[data-enthuellen] img, .js .foto[data-enthuellen]:not(.ist-an) img { transform: none; transition: none; }
}

.spezial {
  display: grid; grid-template-columns: clamp(96px, 12vw, 150px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--r-gross); background: var(--s-hell); border: 1px solid var(--s-linie);
}
.spezial h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); color: var(--s-tief); }
.spezial p { margin: 14px 0 24px; color: var(--text-2); max-width: 62ch; }
.spezial .knopf--rand { background: var(--flaeche); }
@media (max-width: 600px) { .spezial { grid-template-columns: 1fr; } .spezial__zeichen { width: 96px; } }

@media (max-width: 900px) {
  .unterheld__innen { grid-template-columns: 1fr; }
  .unterheld__zeichen { justify-items: start; }
  .unterheld__zeichen .gross { width: 200px; }
  .leistungsicon { width: 200px; }
}

/* ---------- Raster-Hilfen ---------- */
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); }
@media (max-width: 860px) { .raster-2 { grid-template-columns: 1fr; } }
.werte { border-top: 2px solid var(--tinte); }
.werte > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--haar); }
.werte dt { font-weight: 740; color: var(--s-tief); font-size: 1.08rem; }
.werte dd { color: var(--text-2); }
@media (max-width: 600px) { .werte > div { grid-template-columns: 1fr; gap: 4px; } }
.text-block p + p { margin-top: 16px; }
.text-block p { color: var(--text-2); max-width: 64ch; }
.text-block h2 + p { margin-top: 20px; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.person { display: grid; gap: 0; align-content: start; }
.person__bild { position: relative; border-radius: var(--r-gross); overflow: hidden; background: #f4f4f6; }
.person__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__rolle { margin-top: 18px; font-size: .85rem; font-weight: 700; color: var(--s-tinte); }
.person h3 { margin-top: 4px; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); letter-spacing: -.02em; }
.person__text { margin-top: 6px; color: var(--text-2); }
.team__gruppe + .team__gruppe { margin-top: clamp(56px, 6vw, 96px); }
.team__gruppe > h2 { margin-bottom: 12px; }
.team__gruppe > .lead { margin-bottom: clamp(28px, 3vw, 44px); }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* ---------- Karriere ---------- */
.stellen { border-top: 2px solid var(--tinte); }
.stelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--haar); }
.stelle h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.stelle__merkmale { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stelle__merkmale li { padding: 4px 11px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--haar); font-size: .82rem; font-weight: 650; color: var(--text-2); }
@media (max-width: 700px) { .stelle { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
/* Lesebreite auf den Inhalten, nicht auf dem Rahmen: sonst wird der Rahmen schmal und mittig (Text versetzt zur Kopfzeile) */
.prosa > * { max-width: 76ch; }
.prosa h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); margin: 48px 0 14px; }
.prosa h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.prosa h4 { margin: 22px 0 8px; }
.prosa p, .prosa li { color: var(--text-2); }
.prosa p + p { margin-top: 12px; }
.prosa ul { list-style: disc; padding-left: 1.3em; margin: 10px 0; }
.prosa li + li { margin-top: 6px; }
.prosa a { color: var(--s-tinte); overflow-wrap: anywhere; }
.prosa strong { color: var(--text); }
.prosa > :first-child { margin-top: 0; }
/* Widerspruch gegen die Statistik (Datenschutz): Knopf + Zustand, Text setzt einbau.js der Statistik-Zentrale */
.prosa .statistik-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.prosa .statistik-schalter .knopf { white-space: normal; text-align: center; }
.prosa .statistik-schalter [data-statistik-status] { font-size: .92rem; color: var(--text-2); }

/* ===== 080-kontakt.css ===== */
/* ---------- Kontakt: Wege + Formular ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.wege { display: grid; gap: 0; border-top: 2px solid var(--tinte); }
.wege > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--haar); }
.wege .ic { width: 22px; height: 22px; color: var(--s-tinte); margin-top: 3px; }
.wege__was { font-size: .82rem; font-weight: 700; color: var(--text-3); }
.wege__wert { margin-top: 2px; color: var(--text); }
.wege__wert a { color: var(--tinte); font-weight: 700; text-decoration: none; }
.wege__wert a:hover { text-decoration: underline; color: var(--s-tinte); }
.wege__tel a { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; }
.wege__zeiten { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; }

.formular {
  background: var(--flaeche); border: 1px solid var(--haar); border-radius: var(--r-gross);
  padding: clamp(22px, 3.4vw, 44px);
}
.formular h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.formular__hinweis { margin-top: 8px; color: var(--text-2); font-size: .98rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 28px; }
.feld-voll { grid-column: 1 / -1; }
.feld-ein { display: grid; gap: 7px; }
.feld-ein label { font-size: .9rem; font-weight: 680; color: var(--text); }
.feld-ein label span { color: var(--text-3); font-weight: 600; }
.feld-ein input, .feld-ein select, .feld-ein textarea {
  width: 100%; min-height: 52px; padding: 12px 15px; border-radius: 14px; border: 1.5px solid var(--haar-2); background: var(--flaeche-2);
  font-size: 1rem; color: var(--tinte); transition: border-color var(--t1), box-shadow var(--t2) var(--ease), background-color var(--t1);
}
.feld-ein textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.feld-ein select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.feld-ein input::placeholder, .feld-ein textarea::placeholder { color: #6B6D8A; }
.feld-ein input:hover, .feld-ein select:hover, .feld-ein textarea:hover { border-color: #AEB3CD; }
.feld-ein input:focus, .feld-ein select:focus, .feld-ein textarea:focus {
  outline: none; border-color: var(--s-tinte); background: var(--flaeche); box-shadow: 0 0 0 4px var(--s-hell);
}
.feld-ein [aria-invalid="true"] { border-color: var(--fehler); }
.feld-fehler { margin: 2px 0 0; font-size: .86rem; font-weight: 640; line-height: 1.4; color: var(--fehler); }
.zustimmung + .feld-fehler { margin: 8px 0 0 36px; }
.zustimmung { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 22px; font-size: .92rem; color: var(--text-2); }
.zustimmung input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--s-tinte); }
.zustimmung a { color: var(--s-tinte); }
.falle { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { margin-top: 24px; }
.formular .knopf[disabled] { opacity: .65; cursor: progress; }
.meldung { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-weight: 600; font-size: .96rem; gap: 10px; align-items: flex-start; }
.meldung .ic { width: 20px; height: 20px; margin-top: 2px; }
.meldung--gut { display: flex; background: #E8F6EE; color: var(--gut); border: 1px solid #BFE6CF; }
.meldung--fehler { display: flex; background: #FDECEA; color: var(--fehler); border: 1px solid #F6C9C4; }
@media (max-width: 960px) { .kontakt { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .felder { grid-template-columns: 1fr; } .formular .knopf { width: 100%; } }

/* Karte erst nach Klick (OpenStreetMap) */
.karte-box {
  position: relative; margin-top: clamp(40px, 5vw, 72px); border-radius: var(--r-gross); overflow: hidden; border: 1px solid var(--haar);
  background: var(--flaeche); min-height: 360px; display: grid;
}
.karte-box iframe { width: 100%; height: 420px; border: 0; display: block; }
.karte-laden { position: relative; display: grid; place-items: center; text-align: center; padding: 40px 24px; background: var(--s-hell); overflow: hidden; }
.karte-laden__grund { position: absolute; inset: 0; opacity: .7; }
.karte-laden__grund .karte--weit { width: 100%; height: 100%; }
.karte-laden__innen { position: relative; }
.karte-laden__innen { max-width: 46ch; background: var(--flaeche); padding: 24px 26px; border-radius: 20px; border: 1px solid var(--haar); }
.karte-laden h3 { font-size: 1.15rem; }
.karte-laden p { margin: 8px 0 18px; font-size: .92rem; color: var(--text-2); }
.karte-laden a { color: var(--s-tinte); }

/* ===== 090-fuss.css ===== */
/* ---------- Fußzeile ---------- */
.fuss { background: var(--flaeche); border-top: 1px solid var(--haar); padding-top: clamp(56px, 5vw, 88px); }
.fuss__innen { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 2.6vw, 44px); }
.marke--fuss .marke__logo { height: 52px; }
.fuss__marke > p, .fuss__adresse { margin-top: 18px; font-size: .94rem; color: var(--text-2); max-width: 38ch; }
.fuss__wege { display: grid; gap: 6px; margin-top: 16px; }
.fuss__wege a, .fuss__zeiten { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 650; color: var(--tinte); text-decoration: none; }
.fuss__wege a:hover { color: var(--s-tinte); text-decoration: underline; }
.fuss__wege .ic, .fuss__zeiten .ic { width: 17px; height: 17px; color: var(--s-tinte); }
.fuss__zeiten { margin-top: 10px; font-weight: 600; color: var(--text-2); }
.fuss__titel { font-size: .82rem; font-weight: 750; color: var(--tinte); margin-bottom: 12px; }
.fuss__spalte ul + .fuss__titel { margin-top: 26px; }
.fuss__spalte li + li { margin-top: 7px; }
.fuss__spalte a { font-size: .92rem; color: var(--text-2); text-decoration: none; }
.fuss__spalte a:hover { color: var(--s-tinte); text-decoration: underline; }
.fuss__leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(40px, 4vw, 64px); padding-block: 22px; border-top: 1px solid var(--haar);
}
.fuss__recht { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: .9rem; }
.fuss__recht a { color: var(--text-2); text-decoration: none; }
.fuss__recht a:hover { color: var(--s-tinte); text-decoration: underline; }
.fuss__sozial { display: flex; gap: 8px; }
.fuss__sozial a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--haar); color: var(--tinte); transition: border-color var(--t1), background-color var(--t1), color var(--t1); }
.fuss__sozial a:hover { border-color: var(--s-tinte); background: var(--s-hell); color: var(--s-tief); }
.fuss__sozial .ic { width: 19px; height: 19px; }
.fuss__ki { padding-bottom: 22px; font-size: .84rem; color: var(--text-3); }
/* Touch-Ziele am Handy: Fuß-Links mindestens 44 px hoch (WCAG 2.5.8 / Apple HIG) */
@media (max-width: 900px) {
  .fuss__spalte li + li { margin-top: 0; }
  .fuss__spalte a, .fuss__recht a { display: inline-block; padding-block: 11px; }
  .fuss__recht { gap: 0 22px; }
  .bewegung { min-height: 44px; }
}

.bewegung {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--haar-2);
  background: transparent; font-size: .85rem; font-weight: 620; color: var(--text-2);
}
.bewegung__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--s-akzent); box-shadow: 0 0 0 3px var(--s-hell); }
.bewegung[aria-pressed="true"] .bewegung__punkt { background: var(--haar-2); box-shadow: none; }
.bewegung:hover { border-color: var(--s-tinte); color: var(--tinte); }

/* SABESUS-Gruppenstreifen bündig zum Seitenrahmen */
sabesus-footer {
  font-family: var(--schrift);
  --sf-bg: #EBEDF6; --sf-fg: var(--tinte); --sf-dim: rgba(12, 12, 46, .66); --sf-faint: rgba(12, 12, 46, .42);
  --sf-line: rgba(12, 12, 46, .1); --sf-accent: var(--kern);
  --sf-max: calc(var(--rahmen) + 2 * var(--rand)); --sf-pad-x: var(--rand);
}

@media (max-width: 1100px) {
  .fuss__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fuss__innen { grid-template-columns: 1fr 1fr; }
  .fuss__spalte:last-child { grid-column: 1 / -1; }
}

/* Touch-Ziele am Handy (ui-ux-pro-max: mindestens 44 px): Kontaktwege, Brotkrumen, Mehr-Links, Telefon im Kontaktband,
   Social-Knöpfe. Polster nach innen, damit sich das Layout kaum verschiebt. */
@media (max-width: 900px) {
  .fuss__wege a, .wege__wert a, .mehr a, .pfad a, .band__tel { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss__wege { gap: 0; }
  .pfad { gap: 0 8px; margin-block: -10px 12px; }
  .fuss__sozial a { width: 44px; height: 44px; }
}

/* ===== 900-consent.css ===== */
/* ---------- Cookie-Banner (CookieConsent v3), Gruppenstandard seit 08.10.2026 (Vorlage Helfer-Fuchs), RoluControl-Look ----------
   Kleine Karte unten links, die Seite bleibt bedienbar. „Alles klar“ und „Alles ablehnen“ nebeneinander, gleich groß und
   gleich gestaltet; „Anpassen“ als Textlink darunter. Farben und Schrift aus dem Seed der Seite (Manrope, Signalrot). */
#cc-main {
  --cc-font-family: var(--schrift);
  --cc-bg: #ffffff;
  --cc-primary-color: var(--tinte);
  --cc-secondary-color: var(--text-2);
  --cc-btn-primary-bg: var(--tinte);
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: var(--tinte);
  --cc-btn-primary-hover-bg: var(--s-tinte);
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: var(--s-tinte);
  --cc-btn-secondary-bg: var(--tinte);
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: var(--tinte);
  --cc-btn-secondary-hover-bg: var(--s-tinte);
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: var(--s-tinte);
  --cc-btn-border-radius: 999px;
  --cc-modal-border-radius: 18px;
  --cc-separator-border-color: var(--haar);
  --cc-toggle-on-bg: var(--s-tinte);
  --cc-toggle-off-bg: #C4C8DB;
  --cc-toggle-readonly-bg: var(--haar);
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-bg: #9A9EB8;
  --cc-link-color: var(--s-tinte);
  --cc-footer-bg: var(--flaeche-2);
  --cc-footer-color: var(--text-2);
  --cc-footer-border-color: var(--haar);
  --cc-overlay-bg: rgba(12, 12, 46, .45);
  --cc-pm-toggle-border-radius: 999px;
  --cc-cookie-category-block-bg: var(--flaeche-2);
  --cc-cookie-category-block-border: var(--haar);
  --cc-cookie-category-block-hover-bg: var(--s-hell);
  --cc-cookie-category-block-hover-border: var(--haar-2);
  --cc-cookie-category-expanded-block-bg: var(--flaeche-2);
  --cc-cookie-category-expanded-block-hover-bg: var(--s-hell);
  --cc-modal-margin: 24px;
  color-scheme: light;
}

/* Ebene 1: kompakte Karte */
#cc-main .cm--box { max-width: 380px; box-shadow: 0 14px 34px -10px rgba(12, 12, 46, .28); border: 1px solid var(--haar); }
#cc-main .cm__body { padding: 14px 16px 12px; }
#cc-main .cm__texts { padding: 0; }
/* RoluControl-Zeichen rechts in der Titelzeile, damit Titel, Text, Knöpfe und Links links bündig stehen */
#cc-main .cm__title {
  padding: 0 40px 0 0; min-height: 32px; display: flex; align-items: center;
  font-size: 16px; font-weight: 780; line-height: 1.2; letter-spacing: -.015em;
  background: url("/assets/favicon-32.png") right center / 28px 28px no-repeat;
}
#cc-main .cm__desc { font-size: 14px; line-height: 1.45; color: var(--text-2); padding: 6px 0 0; }
#cc-main .cm__desc strong { color: var(--tinte); font-weight: 700; }
#cc-main .cm__footer, #cc-main .cm__links { justify-content: flex-start; text-align: left; }
#cc-main .cm__links { padding-left: 0 !important; padding-right: 0 !important; }
#cc-main .cm__link-group { margin: 0 !important; justify-content: flex-start !important; }
/* „Alles klar“ und „Alles ablehnen“ nebeneinander, gleich groß; „Anpassen“ als Textlink darunter */
#cc-main .cm__btns { padding: 10px 0 0; gap: 6px; border-top: 0; }
#cc-main .cm__btn-group { display: flex; flex-direction: row; gap: 8px; }
#cc-main .cm__btn, #cc-main .cm__btn:first-child { flex: 1 1 0; height: 42px; min-height: 42px; padding: 0 10px; font-size: 15px; font-weight: 700; line-height: 1.1; }
#cc-main .cm__btn[data-role="show"] {
  flex: none !important; height: auto !important; min-height: 0; padding: 4px 0 0; align-self: flex-start;
  background: none; border: 0; color: var(--s-tinte); font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
#cc-main .cm__btn[data-role="show"]:hover { background: none; color: var(--tinte); }
/* die Bibliothek schiebt den zweiten Knopf 6 px nach unten (margin-top) – bei nebeneinander stehenden Knöpfen nicht erwünscht */
#cc-main .cm__btn + .cm__btn { margin: 0 !important; }
#cc-main .cm__btn-group + .cm__btn { margin: 6px 0 0 !important; }
#cc-main .cm__footer { padding: 7px 16px 8px; font-size: 13px; }
#cc-main .cm__footer a { font-weight: 700; }

/* Ebene 2: Einstellungen */
#cc-main .pm { max-width: 520px; }
#cc-main .pm__title { font-size: 18px; font-weight: 780; letter-spacing: -.02em; }
#cc-main .pm__section-title { font-size: 15px; }
#cc-main .pm__section-desc { font-size: 14px; line-height: 1.45; }
#cc-main .pm__btn { min-height: 44px; font-weight: 700; }

@media (max-width: 640px) {
  #cc-main { --cc-modal-margin: 8px; }
  #cc-main .cm--box { max-width: none; }
  /* auch am Handy beide Knöpfe nebeneinander; die Bibliothek stapelt sie per !important, daher ebenfalls !important */
  #cc-main .cm { width: calc(100vw - 16px) !important; max-width: 380px !important; }
  #cc-main .cm__btns { border-top: 0 !important; padding: 10px 16px 0 !important; }
  #cc-main .cm__btn-group { flex-direction: row !important; gap: 8px; }
  #cc-main .cm__btn + .cm__btn { margin: 0 !important; }
  #cc-main .cm__btn-group + .cm__btn { margin: 6px 0 0 !important; }
  #cc-main .cm__btn, #cc-main .cm__btn:first-child { flex: 1 1 0 !important; width: auto; }
  #cc-main .cm__title, #cc-main .cm__desc { padding-left: 16px !important; padding-right: 16px !important; }
  #cc-main .cm__title { background-position: right 16px center; padding-right: 56px !important; }
  #cc-main .cm__btn[data-role="show"] { width: 100% !important; text-align: left !important; justify-content: flex-start !important; }
  #cc-main .cm__footer { justify-content: flex-start !important; text-align: left !important; padding-left: 16px !important; }
  #cc-main .cm__links { padding-left: 0 !important; padding-right: 0 !important; }
}