/* Rädler EMS – Markenfarben (Tanne, Salbei, Creme, Terracotta, Nacht), Schrift Bahnschrift wie im Logo */
:root {
  --bg: #F3EFE4; --flaeche: #FFFFFF; --flaeche2: #EDE7D8; --linie: #DDD5C3; --linie2: #CFC6B2;
  --text: #1E3A2C; --text2: #5C6A63; --tanne: #1E3A2C; --creme: #F1EAD9; --terra: #B8551F;
  --ok: #3B6D11; --warn: #9A5B0C; --fehler: #A32D2D;
  --pv: #E8920F; --netz: #5E7591; --speicher: #1D9E75; --haus: #1E3A2C; --wb: #2F7FD1; --wp: #D2552B;
  --g1: #8A5FB0; --g2: #2F9C95; --g3: #C2417A; --g4: #7A8B2E;
  --schatten: 0 1px 2px rgba(30,58,44,.06), 0 4px 18px rgba(30,58,44,.07);
  --r: 16px;
  --f-zahl: "Bahnschrift", "DIN Alternate", "Barlow Semi Condensed", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --f-text: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  /* Szene */
  --s-wand: #F7F3EA; --s-dach: #7A4E3C; --s-linie: #33443A; --s-geraet: #E3E9E5; --s-auto: #B9C8D6; --s-glas: #8FB2C9;
  --s-fenster: #BCD3DF; --s-licht: #FFD27A; --s-gras: #9DBF78; --s-gras2: #7EA35A; --s-boden: #BFD3A2; --s-haut: #EFC39B;
  --s-ruhe: #C9D2CB; --s-karte: rgba(255,255,255,.94);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111D17; --flaeche: #19291F; --flaeche2: #20352A; --linie: #2C4537; --linie2: #3A5847;
  --text: #F1EAD9; --text2: #A9B3AB; --tanne: #F1EAD9; --ok: #97C459; --warn: #FAC775; --fehler: #F09595;
  --pv: #F2B234; --netz: #8EA7C4; --speicher: #4CC183; --haus: #F1EAD9; --wb: #5EA2F0; --wp: #F07A4F;
  --g1: #B596DA; --g2: #5FC7BF; --g3: #E77AA8; --g4: #B7C76A;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.25);
  --s-wand: #2B3A31; --s-dach: #5A3A2E; --s-linie: #A7B8AD; --s-geraet: #34443B; --s-auto: #4A5A69; --s-glas: #2B3F4F;
  --s-fenster: #33475A; --s-licht: #F2C062; --s-gras: #2E4A28; --s-gras2: #436A39; --s-boden: #22331F; --s-haut: #E0B48C;
  --s-ruhe: #34443A; --s-karte: rgba(25,41,31,.94);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #111D17; --flaeche: #19291F; --flaeche2: #20352A; --linie: #2C4537; --linie2: #3A5847;
  --text: #F1EAD9; --text2: #A9B3AB; --tanne: #F1EAD9; --ok: #97C459; --warn: #FAC775; --fehler: #F09595;
  --pv: #F2B234; --netz: #8EA7C4; --speicher: #4CC183; --haus: #F1EAD9; --wb: #5EA2F0; --wp: #F07A4F;
  --g1: #B596DA; --g2: #5FC7BF; --g3: #E77AA8; --g4: #B7C76A;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.25);
  --s-wand: #2B3A31; --s-dach: #5A3A2E; --s-linie: #A7B8AD; --s-geraet: #34443B; --s-auto: #4A5A69; --s-glas: #2B3F4F;
  --s-fenster: #33475A; --s-licht: #F2C062; --s-gras: #2E4A28; --s-gras2: #436A39; --s-boden: #22331F; --s-haut: #E0B48C;
  --s-ruhe: #34443A; --s-karte: rgba(25,41,31,.94);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.5 var(--f-text); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.leise { color: var(--text2); }
.klein { font-size: 13px; }
h1 { font: 600 24px/1.2 var(--f-zahl); margin: 2px 0 4px; letter-spacing: .01em; }
h2 { font: 600 18px/1.25 var(--f-zahl); margin: 0; letter-spacing: .01em; }
.unter { margin: 0 0 4px; color: var(--text2); max-width: 70ch; }

/* ---------- Kopf und Navigation ---------- */
.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; padding-top: max(10px, env(safe-area-inset-top));
  background: #1E3A2C; color: #F1EAD9; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marke img { flex: none; }
.marke b { display: block; font: 600 18px/1.05 var(--f-zahl); letter-spacing: .02em; }
.marke small { display: block; font: 500 11px var(--f-zahl); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
nav#nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
nav#nav a { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px; text-decoration: none;
  font: 600 15px var(--f-zahl); letter-spacing: .03em; color: rgba(241,234,217,.78); white-space: nowrap; }
nav#nav a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
nav#nav a:hover { color: #F1EAD9; background: rgba(241,234,217,.08); }
nav#nav a.aktiv { background: #F1EAD9; color: #1E3A2C; }
nav#nav a:focus-visible, .knopf:focus-visible, .seg button:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.kopf-rechts { display: flex; align-items: center; gap: 12px; }
.uhr { font: 600 22px var(--f-zahl); font-variant-numeric: tabular-nums; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: #888780; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.punkt.an { background: #5DCAA5; } .punkt.aus { background: #E24B4A; }
@media (max-width: 860px) {
  nav#nav { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    background: #1E3A2C; border-radius: 16px; padding: 5px; box-shadow: 0 8px 28px rgba(0,0,0,.28); justify-content: space-between; }
  nav#nav a { flex: 1 1 0; flex-direction: column; gap: 1px; padding: 6px 2px; font-size: 11.5px; letter-spacing: .01em; }
  main { padding-bottom: 96px !important; }
  .marke small { display: none; }
}
body.kiosk nav#nav { display: none; }

main { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 16px; }

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: 16px 18px; display: grid; gap: 14px; min-width: 0; }
.karte > h2 { display: flex; align-items: center; gap: 9px; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.farbpunkt { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--tanne)); flex: none; display: inline-block; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 11px;
  border: 1px solid var(--linie2); background: var(--flaeche); cursor: pointer; text-decoration: none; font-weight: 600; }
.knopf:hover { border-color: var(--tanne); }
.knopf.primaer { background: #1E3A2C; color: #F1EAD9; border-color: #1E3A2C; }
:root[data-theme="dark"] .knopf.primaer { background: #F1EAD9; color: #1E3A2C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf.primaer { background: #F1EAD9; color: #1E3A2C; } }
.knopf.klein { padding: 5px 11px; font-size: 13.5px; border-radius: 9px; }
.knopf.gefahr { color: var(--fehler); }
.knopf:disabled { opacity: .45; cursor: default; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zeile:last-child { border-bottom: 0; }
.hinweis { padding: 10px 14px; border-radius: 12px; background: #FAEEDA; color: #633806; border: 1px solid #EFC98A; }
.hinweis.fehler { background: #FCEBEB; color: #791F1F; border-color: #F0B4B4; }
.hinweis.ok { background: #E1F5EE; color: #085041; border-color: #A6DCC8; }
.fehlertext { color: var(--fehler); min-height: 1em; margin: 0; }
.grund { background: var(--flaeche2); border-radius: 12px; padding: 10px 13px; font-size: 14.5px; white-space: pre-wrap; }
input, select, textarea { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 10px; padding: 9px 11px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--terra); outline-offset: 0; border-color: transparent; }
textarea { min-height: 300px; font: 13px/1.45 ui-monospace, Consolas, monospace; }
label { font-weight: 500; }

/* Schalter, Schieber, Segmente */
.feld { display: grid; gap: 6px; }
.feld.reihe { grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.feldkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.feldwert { font: 600 17px var(--f-zahl); font-variant-numeric: tabular-nums; color: var(--c, var(--tanne)); white-space: nowrap; }
.hilfe { display: block; color: var(--text2); font-size: 13px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--flaeche2); padding: 4px; border-radius: 13px; }
.seg button { flex: 1 1 auto; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text2); font-weight: 500; }
.seg button.an { background: var(--flaeche); color: var(--text); border-color: var(--c, var(--tanne)); font-weight: 650; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg button:disabled { cursor: default; }
input[type=range] { padding: 0; background: none; border: 0; accent-color: var(--c, var(--tanne)); height: 26px; }
input[type=range]:focus { outline-offset: 2px; }
input.sw { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; padding: 0; border-radius: 99px; border: 0; background: var(--linie2); position: relative; cursor: pointer; flex: none; transition: background .15s; }
input.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
input.sw:checked { background: var(--c, var(--speicher)); }
input.sw:checked::after { transform: translateX(20px); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: 99px; border: 1px solid var(--linie2); background: var(--flaeche); cursor: pointer; font-size: 14px; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--tanne)); opacity: .25; }
.chip.an { border-color: var(--c, var(--tanne)); font-weight: 600; }
.chip.an::before { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* Kacheln (Tageswerte) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.kachel { background: var(--flaeche); padding: 11px 15px; min-width: 0; }
.kachel span { display: block; font: 600 11px var(--f-zahl); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.kachel b { font: 600 24px/1.25 var(--f-zahl); font-variant-numeric: tabular-nums; }
.kachel i { font-style: normal; color: var(--text2); font-size: 13px; margin-left: 3px; }
.kachel small { display: block; color: var(--text2); font-size: 12px; }

/* ---------- Übersicht ---------- */
.ampel { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.ampel .licht { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--a, #888); box-shadow: 0 0 0 6px color-mix(in srgb, var(--a, #888) 18%, transparent), 0 0 18px color-mix(in srgb, var(--a, #888) 55%, transparent); }
.ampel b { display: block; font: 600 17px var(--f-zahl); }
.ampel span { color: var(--text2); font-size: 14px; }
.szenebox { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--schatten); background: #cfe3ee; }
.szenebox svg { display: block; width: 100%; height: auto; }
.wetterchip { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 9px; padding: 6px 13px 6px 8px; border-radius: 14px;
  background: var(--s-karte); border: 1px solid var(--linie); box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: pointer; backdrop-filter: blur(4px); max-width: calc(100% - 24px); }
.wetterchip svg { width: 30px; height: 30px; flex: none; }
.wetterchip b { font: 600 20px var(--f-zahl); font-variant-numeric: tabular-nums; }
.wetterchip span { font-size: 13px; color: var(--text2); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taetig { position: absolute; right: 12px; top: 12px; padding: 5px 11px; border-radius: 12px; background: var(--s-karte); border: 1px solid var(--linie); font-size: 13px; color: var(--text2); }
@media (max-width: 560px) { .taetig { display: none; } .wetterchip { left: 8px; top: 8px; padding: 4px 10px 4px 6px; } .wetterchip b { font-size: 16px; } .wetterchip svg { width: 22px; height: 22px; } }
.hit { cursor: pointer; outline: none; }
.hit:hover .box { stroke: var(--c); stroke-width: 2.2; }
.hit:focus-visible .box { stroke: var(--terra); stroke-width: 3; }
.ln { font: 600 12.5px var(--f-zahl); letter-spacing: .1em; fill: var(--text2); text-transform: uppercase; }
.lv { font: 600 32px var(--f-zahl); fill: var(--text); font-variant-numeric: tabular-nums; }
.lu { font: 500 15px var(--f-zahl); fill: var(--text2); }
.ls { font: 500 13px var(--f-text); fill: var(--text2); }
.lh { font: 600 12px var(--f-text); fill: var(--text2); opacity: .85; }
.box { fill: var(--s-karte); stroke: var(--linie); stroke-width: 1.2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.10)); }
.flow { fill: none; stroke-linecap: round; }
.geraeteliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.gkarte { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); cursor: pointer; text-align: left; box-shadow: var(--schatten); min-width: 0; }
.gkarte:hover { border-color: var(--c); }
.gkarte .ikon { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.gkarte .ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gkarte div { min-width: 0; flex: 1; }
.gkarte b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gkarte small { display: block; color: var(--text2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gkarte em { font: 600 18px var(--f-zahl); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gkarte.stoerung { border-color: var(--fehler); }
.leiste { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.leiste select { width: auto; padding: 6px 10px; }

/* ---------- Pop-up ---------- */
dialog { border: 1px solid var(--linie); border-radius: 20px; padding: 0; background: var(--flaeche); color: var(--text); width: min(520px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(10,20,14,.55); backdrop-filter: blur(2px); }
.dkopf { display: flex; align-items: center; gap: 11px; padding: 16px 18px 8px; position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.dkopf h2 { flex: 1; font-size: 21px; }
.dkopf .zu { border: 1px solid var(--linie); background: var(--flaeche); width: 38px; height: 38px; border-radius: 11px; cursor: pointer; font-size: 18px; }
.dlive { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 18px 14px; border-bottom: 1px solid var(--linie); }
.dlive b { font: 600 38px/1 var(--f-zahl); font-variant-numeric: tabular-nums; }
.dlive span { color: var(--text2); }
.dinhalt { padding: 16px 18px 20px; display: grid; gap: 18px; }
.dfuss { display: flex; gap: 10px; flex-wrap: wrap; }
dl.werte { margin: 0; display: grid; gap: 0; }
dl.werte div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
dl.werte dt { color: var(--text2); } dl.werte dd { margin: 0; font: 600 16px var(--f-zahl); font-variant-numeric: tabular-nums; text-align: right; }
.tage3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tag3 { background: var(--flaeche2); border-radius: 12px; padding: 10px; text-align: center; display: grid; gap: 2px; justify-items: center; }
.tag3 svg { width: 34px; height: 34px; }
.tag3 b { font: 600 15px var(--f-zahl); }
.tag3 span { font-size: 12.5px; color: var(--text2); }

/* ---------- Diagramme ---------- */
.diagramm { position: relative; touch-action: pan-y; }
.diagramm svg { display: block; width: 100%; }
.achse { font: 500 12px var(--f-text); fill: var(--text2); }
.tip { position: absolute; top: 4px; pointer-events: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 11px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.16); min-width: 170px; z-index: 3; }
.tip b { display: block; font: 600 14px var(--f-zahl); margin-bottom: 3px; }
.tip div { display: flex; justify-content: space-between; gap: 12px; }
.tip div span { display: flex; align-items: center; gap: 6px; color: var(--text2); }
.tip div span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tip div em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }
.tagwahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tagwahl b { font: 600 17px var(--f-zahl); min-width: 210px; text-align: center; }

/* ---------- Planer ---------- */
.ergebnis { padding: 12px 15px; border-radius: 13px; background: color-mix(in srgb, var(--pv) 14%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--pv) 45%, transparent); }
.ergebnis b { font: 600 19px var(--f-zahl); display: block; }
.raster2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* ---------- Anlage ---------- */
.eintrag { border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; background: var(--flaeche2); }
.eintragkopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.eintragkopf b { font: 600 16px var(--f-zahl); }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.felder .feld label { font-size: 13px; color: var(--text2); font-weight: 500; }
.felder .feld.breit { grid-column: 1 / -1; }
.speicherleiste { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--linie2); border-radius: var(--r); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
@media (max-width: 860px) { .speicherleiste { bottom: 96px; } }
.warten { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(10,20,14,.7); color: #F1EAD9; text-align: center; font: 600 20px var(--f-zahl); }
.anmelden { max-width: 380px; margin: 40px auto; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* Weitere Einstellungen (eingeklappt) und Ladeplaner */
details.weitere { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; display: grid; gap: 14px; }
details.weitere[open] { padding-bottom: 14px; }
details.weitere summary { cursor: pointer; font-weight: 600; color: var(--text2); list-style: none; display: flex; align-items: center; gap: 8px; }
details.weitere summary::-webkit-details-marker { display: none; }
details.weitere summary::before { content: "›"; font-size: 20px; line-height: 1; transition: transform .15s; }
details.weitere[open] summary::before { transform: rotate(90deg); }
details.weitere > p { margin: 0; }
.feld.plan { background: var(--flaeche2); border-radius: 14px; padding: 12px 14px; }
.planfelder { display: grid; gap: 10px; }
.planfelder.aus { opacity: .45; }
.planfelder select { width: auto; padding: 6px 10px; }
.planstand { display: grid; gap: 6px; font-size: 14px; color: var(--text2); }
.planbalken { height: 8px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.planbalken i { display: block; height: 100%; background: var(--wb); border-radius: 99px; transition: width .4s; }
.gkarte small.heute { color: var(--c); font-weight: 600; opacity: .9; }
.zoomleiste { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.zoomleiste .seg button { min-width: 40px; }
.seg button:disabled { opacity: .4; cursor: default; }
/* Gerätekatalog auf der Anlage-Seite */
.feld.markewahl { grid-column: 1 / -1; }
.feld.markewahl select { font-weight: 600; }
.kstatus { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; margin-right: 4px; background: var(--flaeche2); }
.kstatus.entwurf { color: var(--warn); } .kstatus.getestet, .kstatus.freigegeben { color: var(--ok); } .kstatus.fehlerhaft { color: var(--fehler); }
/* Einrichtungsassistent */
main.assistent { max-width: 820px; }
.schritte { display: flex; gap: 6px; flex-wrap: wrap; }
.schritte span { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: var(--flaeche2); color: var(--text2); font: 600 13px var(--f-zahl); }
.schritte span::before { content: ""; width: 0; }
.schritte span em { font-style: normal; font-weight: 500; }
.schritte span.aktiv { background: #1E3A2C; color: #F1EAD9; }
.schritte span.erledigt { color: var(--ok); }
@media (max-width: 700px) { .schritte span:not(.aktiv) em { display: none; } }
.assistentfuss { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
/* Sonnen-Rückblick (Vollbild-Geschichte) */
.rb { position: fixed; inset: 0; z-index: 200; color: #FFF8EC; background: linear-gradient(160deg, var(--a, #F7B733), var(--b, #FC4A1A));
  transition: background .8s; display: flex; flex-direction: column; overflow: hidden; }
.rb-kopf { position: relative; z-index: 3; padding: max(12px, env(safe-area-inset-top)) 16px 0; display: grid; gap: 10px; }
.rb-fortschritt { display: flex; gap: 4px; }
.rb-fortschritt i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.rb-fortschritt i.voll { background: #fff; }
.rb-fortschritt i.laeuft::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: rb-lauf 6s linear forwards; }
@keyframes rb-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rb-wahl { display: flex; gap: 6px; flex-wrap: wrap; padding-right: 44px; }
.rb-wahl button { border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; border-radius: 99px; padding: 4px 12px; font: 600 13px var(--f-zahl); cursor: pointer; }
.rb-wahl button.an { background: #fff; color: #1E3A2C; }
.rb-zu { position: absolute; right: 12px; top: max(18px, calc(env(safe-area-inset-top) + 6px)); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.2); color: #fff; font-size: 18px; cursor: pointer; }
.rb-folie { flex: 1; display: grid; place-items: center; padding: 20px 28px 40px; text-align: center; }
.rb-inhalt { max-width: 560px; display: grid; gap: 14px; justify-items: center; animation: rb-rein .7s cubic-bezier(.2,.8,.2,1); }
@keyframes rb-rein { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.rb-inhalt small { font: 600 15px var(--f-zahl); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.rb-inhalt h2 { font: 700 clamp(30px, 7vw, 52px)/1.1 var(--f-zahl); margin: 0; }
.rb-inhalt b { font: 700 clamp(56px, 16vw, 112px)/1 var(--f-zahl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-shadow: 0 4px 24px rgba(0,0,0,.18); }
.rb-inhalt b.rb-text { font-size: clamp(32px, 8vw, 56px); }
.rb-inhalt p { font-size: clamp(17px, 4vw, 21px); line-height: 1.4; margin: 0; opacity: .95; }
.rb-inhalt em { font-style: normal; font-weight: 700; }
.rb-links, .rb-rechts { position: absolute; top: 120px; bottom: 0; width: 35%; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.rb-links { left: 0; } .rb-rechts { right: 0; width: 65%; }
.rb .knopf { position: relative; z-index: 2; background: #fff; color: #1E3A2C; border: 0; }
.rb-sonne { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFF6C8 0 38%, #FFD27A 39% 60%, rgba(255,210,122,0) 61%);
  box-shadow: 0 0 80px 30px rgba(255,230,150,.55); animation: rb-sonne 2.4s ease-out both; }
@keyframes rb-sonne { from { transform: translateY(60px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.rb-ring { position: relative; width: min(64vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.rb-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rb-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.rb-ring .rb-spur { stroke: rgba(255,255,255,.22); }
.rb-ring .rb-wert { stroke: #fff; stroke-dasharray: 327; stroke-dashoffset: 327; animation: rb-ring 1.8s cubic-bezier(.2,.8,.2,1) .2s forwards; }
@keyframes rb-ring { to { stroke-dashoffset: calc(327 - 327 * var(--p) / 100); } }
.rb-ring b { font-size: clamp(44px, 12vw, 72px); }
.rb-muenzen { position: relative; height: 70px; width: 220px; }
.rb-muenzen i { position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1B0, #E0A419 60%, #A86F00);
  animation: rb-muenze 1.4s cubic-bezier(.5,0,.8,1) both; }
.rb-muenzen i:nth-child(1) { left: 6%; animation-delay: .1s } .rb-muenzen i:nth-child(2) { left: 18%; animation-delay: .5s } .rb-muenzen i:nth-child(3) { left: 30%; animation-delay: .25s }
.rb-muenzen i:nth-child(4) { left: 42%; animation-delay: .7s } .rb-muenzen i:nth-child(5) { left: 54%; animation-delay: .35s } .rb-muenzen i:nth-child(6) { left: 66%; animation-delay: .9s }
.rb-muenzen i:nth-child(7) { left: 78%; animation-delay: .15s } .rb-muenzen i:nth-child(8) { left: 88%; animation-delay: .6s } .rb-muenzen i:nth-child(9) { left: 48%; animation-delay: 1.1s }
@keyframes rb-muenze { from { transform: translateY(-160px) rotate(0); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(48px) rotate(320deg); opacity: 1; } }
.rb-baeume { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; max-width: 320px; }
.rb-baeume i { width: 22px; height: 30px; background: linear-gradient(#8FD46B, #3E7A3A); clip-path: polygon(50% 0, 100% 72%, 60% 72%, 60% 100%, 40% 100%, 40% 72%, 0 72%);
  animation: rb-baum .6s cubic-bezier(.3,1.6,.5,1) both; }
.rb-baeume i:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rb-baum { from { transform: scale(0); transform-origin: bottom; } to { transform: scale(1); } }
.rb-balken { display: flex; align-items: flex-end; gap: 3px; height: 90px; width: min(80vw, 420px); }
.rb-balken i { flex: 1; height: calc(var(--h) * 1%); min-height: 2px; background: rgba(255,255,255,.85); border-radius: 3px 3px 0 0; animation: rb-wachs .9s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
@keyframes rb-wachs { from { transform: scaleY(0); } }
.rueckblick-knopf { justify-self: start; display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(120deg, #F7B733, #FC4A1A); color: #fff; font: 700 16px var(--f-zahl); letter-spacing: .02em; box-shadow: 0 6px 18px rgba(252,74,26,.3); }
.rueckblick-knopf:hover { filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .rb *, .rb { animation: none !important; transition: none !important; } .rb-ring .rb-wert { stroke-dashoffset: calc(327 - 327 * var(--p) / 100); } }