/* MSG ERP Bistro — Verkaufsseite (EN /midnightbistro/, DE /de/midnightbistro/).
   Von Hand geschrieben, nicht aus website-seo/build.py.
   Eigenständig: lädt weder base.css noch hacienda.css noch theme.js — die
   gehören den Funktionsseiten (Pult, Gastseite, Hausseiten) und bleiben dort.
   Farben wörtlich aus der Tablet-App (kasse.css, Stammwerte.cs). */

:root {
  color-scheme: dark;
  --nacht: #13222b;
  --leiste: #16212e;
  --leiste-hell: #23324a;
  --tief: #0d161d;
  --flaeche: #182029;
  --flaeche-2: #1c2733;
  --text: #eef2f6;
  --matt: #a9b6c4;
  --leise: #8fa3b5;
  --linie: rgba(169, 182, 196, .16);
  --linie-stark: rgba(169, 182, 196, .28);
  --blau: #1c5d99;
  --blau-stark: #164a7a;
  --blau-aktiv: #2271bb;
  --blau-hell: #6ba8e0;
  /* Warengruppen — die feste Palette der App */
  --g-blau: #1c5d99; --g-petrol: #0f6c73; --g-gruen: #2e6b4f; --g-schiefer: #3f5568;
  --g-pflaume: #6a3d7a; --g-ocker: #7a4f00; --g-moos: #4f5f1f; --g-nacht: #23324a;
  /* Stationsstatus */
  --st-a: #5b6b7d; --st-z: #6a3d7a; --st-f: #2e7d4f; --st-warn: #e0b341;
  --papier: #ffffff; --papier-grund: #f4f6f9; --tinte: #14181d; --tinte-matt: #545f6b;

  --schrift: 'Zen Kaku Gothic New', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --geraet: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --breite: 1200px;
  --rand: clamp(16px, 4vw, 40px);
  --kurve: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--tief); }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--nacht);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blau-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #9cc6ee; }
:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blau); color: #fff; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--blau); color: #fff; padding: 10px 16px; border-radius: 8px; }
.springen:focus { top: 12px; }

.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(19, 34, 43, .82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 2px solid var(--blau);
}
.kopf .rahmen { display: flex; align-items: center; gap: 24px; height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; white-space: nowrap; font-size: 18px; letter-spacing: -.01em; }
.marke:hover { color: #fff; }
.marke img { width: 30px; height: 30px; opacity: .92; }
.marke b { font-weight: 900; }
.marke span { font-weight: 400; }
.kopf nav { display: flex; gap: 22px; margin-left: auto; }
.kopf nav a { color: var(--matt); text-decoration: none; font-size: 15px; }
.kopf nav a:hover { color: var(--text); }
.sprache { display: flex; border: 1px solid var(--linie-stark); border-radius: 999px; padding: 2px; }
.sprache a { color: var(--matt); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.sprache a[aria-current] { background: var(--leiste-hell); color: var(--text); }
.sprache a:not([aria-current]):hover { color: var(--text); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 10px; border: 1px solid transparent;
  font: 700 16px/1 var(--schrift); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--kurve);
}
.knopf svg { width: 18px; height: 18px; transition: transform .25s var(--kurve); }
.knopf:hover svg { transform: translateX(3px); }
.knopf-blau { background: var(--blau); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.knopf-blau:hover { background: var(--blau-aktiv); color: #fff; }
.knopf-blau:active { transform: translateY(1px); }
.knopf-linie { color: var(--text); border-color: var(--linie-stark); background: transparent; }
.knopf-linie:hover { border-color: var(--blau-hell); color: #fff; }
.kopf .knopf { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 8px; }

/* ---------- Hero ---------- */
.held { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 112px);
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(28, 93, 153, .30), transparent 62%),
    radial-gradient(700px 500px at 0% 100%, rgba(15, 108, 115, .14), transparent 60%),
    linear-gradient(180deg, var(--nacht) 0%, var(--leiste) 55%, #1a2738 100%);
}
.held-sonne { position: absolute; width: min(760px, 90vw); right: -14%; top: -18%; opacity: .045; pointer-events: none; }
.held .rahmen { position: relative; display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 12fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--matt); border: 1px solid var(--linie-stark); border-radius: 999px; padding: 6px 14px 6px 12px;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-warn); box-shadow: 0 0 0 3px rgba(224,179,65,.18); }
.held h1 { margin: 26px 0 22px; font-size: clamp(54px, 7.4vw, 100px); line-height: .9; letter-spacing: -.045em; }
.held h1 b { font-weight: 900; display: block; white-space: nowrap; }
.held h1 span { font-weight: 400; display: block; color: var(--blau-hell); }
.held .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: #d6dee7; max-width: 34em; }
.held .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.eckdaten { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.eckdaten li { padding: 14px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--linie); font-size: 14px; color: var(--matt); line-height: 1.35; }
.eckdaten li:last-child { border-right: 0; margin-right: 0; }
.eckdaten b { display: block; color: var(--text); font-size: 15px; }

/* ---------- Gerätebühne im Hero ---------- */
.buehne { position: relative; padding-bottom: 8%; }
.tablet {
  container-type: inline-size;
  position: relative; border-radius: 22px; padding: 12px;
  background: linear-gradient(160deg, #26313d, #0a0e13 40%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.75), 0 18px 40px -20px rgba(28,93,153,.45);
  transform: perspective(1800px) rotateY(-7deg) rotateX(2deg);
  transform-origin: 30% 50%;
}
.schirm { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--leiste); font-family: var(--geraet); color: #fff; display: grid; grid-template-rows: 8.4% 1fr 9.8%; font-size: 1.72cqw; }
.t-leiste { display: flex; align-items: center; gap: 2.4%; padding: 0 2.2%; background: var(--leiste); border-bottom: .2em solid var(--blau); font-size: .95em; white-space: nowrap; }
.t-leiste .t-reiter { color: #eef2f6; opacity: .85; }
.t-leiste .t-zentrale { line-height: 1.1; }
.t-leiste .t-zentrale small { display: block; font-size: .72em; color: var(--matt); }
.t-leiste .t-bed { display: flex; align-items: center; gap: .6em; background: var(--g-pflaume); padding: .35em .9em .35em .35em; border-radius: .3em; font-weight: 700; }
.t-leiste .t-bed em { font-style: normal; width: 1.7em; height: 1.7em; display: grid; place-items: center; background: #ece6f0; color: #14181d; border-radius: .25em; }
.t-leiste .t-uhr { margin-left: auto; text-align: right; line-height: 1.1; }
.t-leiste .t-uhr small { display: block; font-size: .72em; color: var(--matt); }
.t-leiste .t-punkt { width: .6em; height: .6em; border-radius: 50%; background: #3ccf6e; }
.t-mitte { display: grid; grid-template-columns: 31% 1fr; min-height: 0; }
.beleg { background: var(--papier); color: var(--tinte); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.beleg-kopf { text-align: center; padding: .8em .6em .6em; border-bottom: 1px solid #e3e7ec; }
.beleg-kopf b { font-size: 1.15em; }
.beleg-kopf small { color: var(--tinte-matt); }
.beleg-kopf .b-tisch { display: block; font-size: 1.35em; font-weight: 700; margin-top: .1em; }
.zeilen { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.zeilen li { display: grid; grid-template-columns: 2.6em 1fr auto; gap: .3em; padding: .45em .7em; border-bottom: 1px solid #edf0f3; font-size: .98em; line-height: 1.25; }
.zeilen li b { font-weight: 700; }
.zeilen li .z-preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.zeilen li small { grid-column: 2 / 4; color: var(--tinte-matt); font-style: italic; font-size: .9em; }
.zeilen li.neu { animation: zeileRein .45s var(--kurve) both, zeileGlanz 1.8s ease-out both; }
@keyframes zeileRein { from { opacity: 0; transform: translateX(-12%); } to { opacity: 1; transform: none; } }
@keyframes zeileGlanz { 0%, 30% { background: #e3eef8; } 100% { background: transparent; } }
.beleg-fuss { padding: .5em .7em .6em; border-top: 1px solid #e3e7ec; }
.beleg-fuss .b-mwst { display: flex; justify-content: space-between; font-size: .8em; color: var(--tinte-matt); }
.beleg-fuss .b-summe { display: flex; justify-content: space-between; align-items: baseline; }
.beleg-fuss .b-summe strong { font-size: 1.9em; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kacheln { position: relative; padding: 1.4% 1.4% 0; background: linear-gradient(180deg, #1a2634, #20304a); overflow: hidden; }
.kacheln .k-titel { font-size: .95em; color: #d8e0e8; margin: 0 0 1.2%; }
.kgitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6%; }
.kachel {
  position: relative; aspect-ratio: 1.45; border-radius: .35em; padding: .6em .7em; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; background: var(--k, var(--g-blau)); box-shadow: inset 0 -.4em 1em rgba(0,0,0,.18);
  transition: transform .18s var(--kurve), filter .18s;
}
.kachel b { font-size: 1.12em; line-height: 1.15; }
.kachel span { font-size: .9em; opacity: .9; margin-top: .2em; font-variant-numeric: tabular-nums; }
.kachel.tipp { transform: scale(.955); filter: brightness(1.25); }
.kacheln .k-sonne { position: absolute; right: 4%; bottom: 6%; width: 22%; opacity: .07; }
.t-unten { display: grid; grid-template-columns: 31% 1fr; }
.t-unten .t-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #0d1520; }
.t-unten .t-aktionen span, .t-reiterzeile span { display: flex; align-items: center; justify-content: center; gap: .4em; font-size: 1em; }
.t-unten .t-aktionen span { background: var(--blau-stark); }
.t-unten .t-aktionen .t-bons { transition: background-color .3s; }
.t-unten .t-aktionen .t-bons em { font-style: normal; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 1em; background: var(--blau-hell); color: #0d1116; font-weight: 700; display: grid; place-items: center; font-size: .85em; }
.t-unten .t-aktionen .t-bons.an { background: var(--blau-aktiv); box-shadow: inset 0 0 0 .2em rgba(255,255,255,.35); }
.t-reiterzeile { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #0d1520; }
.t-reiterzeile span { background: var(--k); }
.t-reiterzeile span.an { background: var(--blau-aktiv); box-shadow: inset 0 -.25em 0 #fff; font-weight: 700; }
.t-meldung {
  position: absolute; left: 50%; top: 14%; transform: translate(-50%, -30%); opacity: 0;
  background: var(--st-f); color: #fff; padding: .7em 1.2em; border-radius: .4em; font-weight: 700; font-size: 1.1em;
  display: flex; align-items: center; gap: .6em; box-shadow: 0 1em 2em rgba(0,0,0,.35); pointer-events: none;
  transition: opacity .35s, transform .35s var(--kurve); white-space: nowrap;
}
.t-meldung.an { opacity: 1; transform: translate(-50%, 0); }
.t-meldung svg { width: 1.3em; height: 1.3em; }

.handy {
  position: absolute; right: -5%; bottom: -4%; width: 23%;
  border-radius: 9% / 4.6%; padding: 2.2%; background: #0a0e13;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -18px rgba(0,0,0,.8);
}
.handy img { border-radius: 7% / 3.8%; }
/* Anhalten (WCAG 2.2.2): erscheint nur, wenn das Tablet wirklich läuft */
.pause { position: absolute; left: 0; bottom: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie-stark); background: rgba(13,22,29,.7); color: var(--matt); cursor: pointer; display: grid; place-items: center; padding: 0; transition: color .2s, border-color .2s; }
.pause[hidden] { display: none; }
.pause:hover { color: var(--text); border-color: var(--blau-hell); }
.pause svg { width: 14px; height: 14px; fill: currentColor; }
.pause .i-play, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }

/* ---------- Farbband (Warengruppen) ---------- */
.farbband { display: grid; grid-template-columns: repeat(8, 1fr); height: 6px; }
.farbband i:nth-child(1) { background: var(--g-blau); }  .farbband i:nth-child(2) { background: var(--g-petrol); }
.farbband i:nth-child(3) { background: var(--g-gruen); } .farbband i:nth-child(4) { background: var(--g-schiefer); }
.farbband i:nth-child(5) { background: var(--g-pflaume); } .farbband i:nth-child(6) { background: var(--g-ocker); }
.farbband i:nth-child(7) { background: var(--g-moos); }  .farbband i:nth-child(8) { background: var(--g-nacht); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(72px, 10vw, 136px) 0; position: relative; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.dunkel { background: var(--tief); }
.zeile-oben { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blau-hell); display: flex; align-items: center; gap: 12px; }
.zeile-oben::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.abschnitt h2 { font-size: clamp(34px, 4.6vw, 60px); margin: 18px 0 0; max-width: 16em; }
.abschnitt h2 em { font-style: normal; color: var(--matt); font-weight: 400; }
.einleitung { margin-top: 22px; font-size: 19px; color: #cdd6df; max-width: 38em; }

/* drei Säulen */
.saeulen { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--linie-stark); }
.saeule { padding: 32px 32px 8px 0; position: relative; }
.saeule + .saeule { padding-left: 32px; border-left: 1px solid var(--linie); }
.saeule::before { content: ''; position: absolute; top: -1px; left: 0; width: 56px; height: 3px; background: var(--k); }
.saeule + .saeule::before { left: 32px; }
.saeule .nr { font: 400 14px/1 var(--geraet); color: var(--leise); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.saeule h3 { font-size: 26px; margin: 14px 0 12px; }
.saeule p { color: var(--matt); }
.marke-klein { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--matt); }
.marke-klein i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-f); }
.marke-klein.folgt i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-warn); }
.marke-klein.test i { background: var(--st-warn); }
.punkt .marke-klein { margin-top: 10px; }
#grillwagen .marke-klein { margin-top: 16px; }

/* Küche */
.teil { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(40px, 6vw, 64px); }
.teil.links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.teil h2 { font-size: clamp(32px, 3.8vw, 50px); }
.rahmenbild { border-radius: 16px; padding: 10px; background: linear-gradient(160deg, #26313d, #0a0e13 45%); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -36px rgba(0,0,0,.8); }
.rahmenbild img { border-radius: 8px; width: 100%; }
.umschalter { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.umschalter button { font: 700 14px/1 var(--schrift); color: var(--matt); background: transparent; border: 0; padding: 10px 16px; border-radius: 7px; cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--blau); color: #fff; }
.umschalter button:not([aria-pressed="true"]):hover { color: var(--text); }
.bildwechsel { position: relative; aspect-ratio: 16 / 10; }
.bildwechsel img { transition: opacity .45s; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bildwechsel img + img { position: absolute; inset: 0; }
.bildwechsel img[hidden] { display: block; opacity: 0; pointer-events: none; }
.liste { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.liste li { padding: 16px 0; border-bottom: 1px solid var(--linie); color: var(--matt); display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.liste li b { color: var(--text); font-weight: 700; }
.liste li > span:first-child { font: 400 13px/1.9 var(--geraet); color: var(--leise); font-variant-numeric: tabular-nums; }
.legende { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; font-size: 14px; color: var(--matt); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--geraet); }

/* Aus MSG ERP */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 6px; background: var(--k); color: #fff; font-size: 14px; font-weight: 700; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.erp-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(40px, 6vw, 64px); }
.handy-gross { max-width: 320px; border-radius: 34px; padding: 10px; background: #0a0e13; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 40px 70px -30px rgba(0,0,0,.85); }
.handy-gross img { border-radius: 26px; }
.erp-text { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.punkt h3 { font-size: 20px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.punkt h3 i { width: 10px; height: 10px; border-radius: 2px; background: var(--k); }
.punkt p { color: var(--matt); font-size: 16px; }
.bon {
  grid-column: 1 / -1; background: var(--papier); color: var(--tinte); border-radius: 4px; padding: 24px 26px 22px;
  font-family: var(--geraet); font-size: 14px; line-height: 1.45; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  position: relative; max-width: 460px;
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x;
  padding-bottom: 30px;
}
.bon .bon-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed #c7ced6; padding-bottom: 10px; margin-bottom: 8px; }
.bon .bon-kopf b { font-size: 15px; }
.bon .bon-kopf span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); background: #e3eef8; padding: 3px 8px; border-radius: 4px; }
.bon table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bon td { padding: 3px 0; vertical-align: top; }
.bon td:last-child { text-align: right; white-space: nowrap; }
.bon td.m { width: 26px; font-weight: 700; }
.bon td small { display: block; color: var(--tinte-matt); font-size: 12px; font-style: italic; }
.bon tr.trenn td { border-top: 1px dashed #c7ced6; padding-top: 8px; }
.bon tr.matt td { color: var(--tinte-matt); font-size: 13px; }
.bon tr.summe td { border-top: 2px solid var(--tinte); padding-top: 8px; font-weight: 700; font-size: 18px; }
.bon .sx { color: var(--tinte-matt); font-size: 11px; margin-left: 6px; }

/* Offline */
.netz { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.netzbild { border: 1px solid var(--linie); border-radius: 18px; background: radial-gradient(ellipse at 50% 50%, rgba(28,93,153,.18), transparent 65%), var(--nacht); padding: 8px; }
.netzbild svg { width: 100%; height: auto; display: block; font-family: var(--schrift); }
.netzbild .leitung { stroke: rgba(107,168,224,.35); stroke-width: 1.5; fill: none; }
/* Bewegung nur beim Einblenden und unter 5 s (WCAG 2.2.2), danach steht das Bild. */
.netzbild .fluss { stroke: var(--blau-hell); stroke-width: 2.5; fill: none; stroke-dasharray: 6 26; stroke-linecap: round; }
.netzbild.da .fluss { animation: fliessen 2.2s linear 2; }
.netzbild.da .fluss.r { animation-direction: reverse; }
@keyframes fliessen { to { stroke-dashoffset: -64; } }
.netzbild .knoten rect { fill: var(--flaeche-2); stroke: var(--linie-stark); }
.netzbild .knoten text { fill: var(--text); font-size: 15px; font-weight: 700; }
.netzbild .knoten text.u { fill: var(--matt); font-size: 12px; font-weight: 400; }
.netzbild .router circle.w { fill: none; stroke: var(--blau-hell); stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; }
.netzbild.da .router circle.w { animation: welle 2.4s ease-out 1; }
.netzbild.da .router circle.w:nth-of-type(2) { animation-delay: .8s; }
.netzbild.da .router circle.w:nth-of-type(3) { animation-delay: 1.6s; }
.netz-notiz { display: none; margin: 6px 0 4px; text-align: center; font-size: 14px; color: var(--matt); }
@keyframes welle { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
.zahlen { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 30px; border-top: 1px solid var(--linie); }
.zahlen div { padding: 18px 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: baseline; }
.zahlen strong { font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: var(--blau-hell); }
.zahlen span { color: var(--matt); }

/* Grillwagen */
.karte {
  border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
}
.karte-kopf { padding: 18px 22px; background: var(--leiste); border-bottom: 2px solid var(--blau); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.karte-kopf b { font-size: 17px; }
.karte-kopf small { color: var(--matt); font-size: 13px; }
.karte-gruppe { padding: 14px 22px 6px; }
.kg-titel { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--matt); display: flex; align-items: center; gap: 8px; }
.kg-titel i { width: 18px; height: 6px; border-radius: 2px; background: var(--k); }
.karte-gruppe p { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.karte-gruppe p:last-child { border-bottom: 0; }
.karte-gruppe p span:last-child { font-family: var(--geraet); font-variant-numeric: tabular-nums; color: #d6dee7; }

/* Bildband */
.band-kopf { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.band-pfeile { display: flex; gap: 8px; }
.band-pfeile button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie-stark); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: border-color .2s, background-color .2s; }
.band-pfeile button:hover { border-color: var(--blau-hell); background: rgba(107,168,224,.08); }
.band-pfeile svg { width: 18px; height: 18px; }
.band {
  --band-rand: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--band-rand);
  padding: 40px var(--band-rand) 24px;
  scrollbar-width: thin; scrollbar-color: var(--leiste-hell) transparent;
}
.band figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
.band figure.quer { width: min(720px, 82vw); }
.band figure.hoch { width: min(226px, 52vw); }
.band figcaption { margin-top: 14px; font-size: 14px; color: var(--matt); max-width: 40em; }
.band figcaption b { color: var(--text); }
.band .rahmenbild { padding: 8px; border-radius: 14px; }
.band figure.hoch .rahmenbild { border-radius: 28px; padding: 8px; }
.band figure.hoch .rahmenbild img { border-radius: 21px; }
.band-hinweis { font-size: 13px; color: var(--leise); margin-top: 8px; }

/* Stand */
.stufen { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.stufen > div { padding: clamp(24px, 3.5vw, 40px); }
.stufen > div + div { border-left: 1px solid var(--linie); background: rgba(13,22,29,.5); }
.stufen h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: var(--matt); }
.stufen ul { list-style: none; margin: 18px 0 0; padding: 0; }
.stufen li { padding: 14px 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.stufen li b { display: block; font-size: 18px; }
.stufen li span { color: var(--matt); font-size: 15px; }
.haken { width: 20px; height: 20px; border-radius: 50%; background: var(--st-f); display: grid; place-items: center; margin-top: 3px; }
.haken svg { width: 12px; height: 12px; }
.offen { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--st-warn); margin-top: 3px; }
.offen.test { background: linear-gradient(90deg, var(--st-warn) 50%, transparent 50%); }
.stufen li b .im-test { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #14181d; background: var(--st-warn); border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: 3px; white-space: nowrap; }
.fortschritt { margin-top: 28px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.fortschritt i { height: 4px; border-radius: 2px; background: var(--leiste-hell); }
.fortschritt i.an { background: var(--blau-hell); }
.fortschritt i.test { background: linear-gradient(90deg, var(--st-warn) 50%, var(--leiste-hell) 50%); }
.fortschritt-text { margin-top: 10px; font-size: 13px; color: var(--leise); }

/* Abschluss */
.schluss { text-align: center; overflow: hidden;
  background: radial-gradient(800px 420px at 50% 0%, rgba(28,93,153,.32), transparent 70%), var(--nacht); }
.schluss .sonne-gross { width: 120px; margin: 0 auto 30px; opacity: .9; }
.schluss h2 { margin-left: auto; margin-right: auto; font-size: clamp(40px, 6vw, 80px); letter-spacing: -.04em; }
.schluss .einleitung { margin-left: auto; margin-right: auto; }
.schluss .knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.schluss .klein { margin-top: 22px; font-size: 14px; color: var(--leise); }

/* Fuß */
.fuss { background: var(--tief); border-top: 1px solid var(--linie); padding: 48px 0 40px; font-size: 14px; color: var(--matt); }
.fuss .rahmen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.fuss .fuss-titel { margin: 0 0 12px; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss a { color: var(--matt); text-decoration: none; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss .marke { margin-bottom: 12px; }
.fuss .unterzeile { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--leise); font-size: 13px; }

/* ---------- Einblenden ---------- */
.js .zeigen { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--kurve), transform .8s var(--kurve); transition-delay: var(--v, 0s); }
.js .zeigen.da { opacity: 1; transform: none; }

/* ---------- Schmal ---------- */
@media (max-width: 1020px) {
  .held .rahmen, .teil, .teil.links, .netz, .erp-raster { grid-template-columns: 1fr; }
  .buehne { max-width: 720px; margin: 8px auto 0; width: 100%; padding-right: 5%; }
  .tablet { transform: none; }
  .kopf nav { display: none; }
  .kopf nav.sprache { display: flex; } /* Sprachumschalter bleibt am Handy (27.10.) */
  .kopf .sprache { margin-left: auto; }
  .handy-gross { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .saeulen { grid-template-columns: 1fr; }
  .saeule, .saeule + .saeule { padding: 28px 0 24px; border-left: 0; }
  .saeule + .saeule { border-top: 1px solid var(--linie); }
  .saeule + .saeule::before { left: 0; }
  .erp-text { grid-template-columns: 1fr; }
  .stufen { grid-template-columns: 1fr; }
  .stufen > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .fuss .rahmen { grid-template-columns: 1fr 1fr; }
  .fuss .rahmen > :first-child { grid-column: 1 / -1; }
  .eckdaten { grid-template-columns: 1fr 1fr 1fr; }
  .eckdaten li { padding-right: 10px; margin-right: 10px; font-size: 13px; }
  .eckdaten b { font-size: 14px; }
  .band-pfeile { display: none; }
  .einleitung { font-size: 17px; }
  .zahlen div { grid-template-columns: 48px 1fr; }
  .zahlen strong { font-size: 24px; }
  /* SVG schrumpft auf ~0,5: Schrift im Netzbild größer, Internet-Hinweis als HTML */
  .netzbild .knoten text { font-size: 27px; }
  .netzbild .knoten text.u { font-size: 21px; }
  .netzbild .knoten text { transform: translateY(-3px); }
  .netzbild .knoten text.u { transform: translateY(5px); }
  .netzbild text[letter-spacing] { font-size: 21px; }
  .netzbild .inet { display: none; }
  .netz-notiz { display: block; }
}
@media (max-width: 520px) {
  .kopf .knopf { display: none; }
  .status { font-size: 11px; letter-spacing: .05em; padding: 6px 12px 6px 10px; }
  .marke { font-size: 16px; }
  .held h1 { font-size: clamp(50px, 15vw, 64px); }
  .held .knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
  .handy { width: 27%; right: -2%; }
  .buehne { padding-right: 6%; padding-bottom: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .zeigen { opacity: 1; transform: none; }
}
@media print {
  .kopf, .band-pfeile, .held-sonne { display: none; }
  body, .held, .dunkel, .schluss, .fuss { background: #fff; color: #000; }
}