/* Wache — App („Wachstube"), Anmeldeseiten, öffentliche Statusseite */

/* ================= Schale ================= */
body.app { min-height: 100svh; }
.schale { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100svh; }
.wachstube { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 18px 14px; z-index: 60; border-right: 1px solid var(--nacht-kimm); overflow-y: auto;
  background: linear-gradient(180deg, var(--nacht-2), var(--nacht) 70%); }
.wachstube .wortmarke { color: var(--nacht-ink); margin: 0 8px 22px; }
.nav { display: grid; gap: 2px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; border-radius: var(--r-s); color: var(--nacht-dunst); text-decoration: none; font: 700 .95rem var(--ff-body); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.nav-link:hover { background: rgba(232, 240, 239, .07); color: var(--nacht-ink); text-decoration: none; }
.nav-link:active { transform: scale(.98); }
.nav-link.aktiv { color: var(--nacht-ink); background: rgba(255, 244, 220, .08); }
.nav-link.aktiv::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--feuerschein); box-shadow: 0 0 12px rgba(255, 244, 220, .6); }
.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.zaehler { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--n-berichtigung); color: var(--nacht); font: 700 .72rem var(--ff-mono); }
.wachstube-fuss { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nacht-kimm); display: grid; gap: 4px; }
.konto { display: grid; padding: 6px 12px 8px; min-width: 0; }
.konto-name { color: var(--nacht-ink); font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-mail { color: var(--nacht-dunst); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.spalte { display: flex; flex-direction: column; min-width: 0; }
.kopfleiste { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px clamp(16px, 3vw, 36px); background: color-mix(in srgb, var(--nebel) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--kimm); }
.kopf-titel { flex: 1; min-width: 0; font: 700 .78rem var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dunst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-rechts { display: flex; align-items: center; gap: 6px; }
.kopf-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-s); border: 1px solid var(--kimm-stark); background: none; color: var(--teer); cursor: pointer; }
.kopf-knopf:active { transform: scale(.95); }
.burger, .wortmarke--mobil { display: none; }
.ansicht { width: 100%; max-width: 1180px; padding: clamp(18px, 3vw, 36px) clamp(16px, 3vw, 36px) 64px; outline: none; }
.ansicht > * + * { margin-top: 22px; }
.banner { margin: 14px clamp(16px, 3vw, 36px) 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.banner p { margin: 0; flex: 1 1 320px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(8, 18, 22, .55); }
.mobil-leiste { display: none; }

.seitenkopf { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.seitenkopf h1 { margin: 6px 0 0; font-size: clamp(2.4rem, 5vw, 3.6rem); text-transform: uppercase; line-height: .9; }
.h-klein { font-family: var(--ff-display); font-weight: 760; line-height: 1.05; font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 0; }
.listen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--dunst); }
.zurueck:hover { color: var(--teer); }

/* ================= Übersicht ================= */
.lagebild { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lage-kachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--logbuch); border: 1px solid var(--kimm); color: var(--teer); text-decoration: none; transition: transform .2s var(--ease), border-color .2s; }
a.lage-kachel:hover { transform: translateY(-2px); border-color: var(--kimm-stark); text-decoration: none; }
.lage-kachel .kn { grid-row: span 2; }
.lage-kachel .kn::before { width: 16px; height: 16px; }
.lage-kachel .kn--down::before { width: 18px; height: 16px; }
.lage-zahl { font: 800 2.6rem/1 var(--ff-display); }
.lage-label { font-size: .88rem; color: var(--dunst); font-weight: 600; }
.lage-down { border-color: color-mix(in srgb, var(--ausfall) 40%, var(--kimm)); }
.lage-down .lage-zahl { color: var(--ausfall); }
.lage-change .lage-zahl { color: var(--berichtigung); }
.lage-fuss { grid-column: 1 / -1; margin: 0; }

.neueste-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.neu-karte { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--logbuch); border: 1px solid var(--kimm); overflow: hidden; color: var(--teer); text-decoration: none; transition: transform .2s var(--ease), border-color .2s; }
.neu-karte:hover { transform: translateY(-3px); border-color: var(--kimm-stark); text-decoration: none; }
.neu-karte.ungesehen { border-color: color-mix(in srgb, var(--berichtigung) 55%, var(--kimm)); }
.neu-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--logbuch-2); border-bottom: 1px solid var(--kimm); }
.neu-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--ease); }
.neu-karte:hover .neu-bild img, .zp-karte:hover .zp-bild img { transform: scale(1.04); }
.neu-ohne { display: grid; place-items: center; height: 100%; min-height: 70px; font: 700 .76rem var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dunst); }
.neu-text { display: grid; gap: 6px; padding: 12px 14px; align-content: start; }
.neu-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.neu-kopf strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neu-sum { font-size: .9rem; color: var(--teer-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.wachliste { display: grid; gap: 8px; border-radius: var(--r); }
.wache-zeile { display: grid; grid-template-columns: 122px minmax(0, 1.7fr) 140px 82px 82px 104px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--logbuch); border: 1px solid var(--kimm); color: var(--teer); text-decoration: none; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.wache-zeile:hover { transform: translateX(3px); border-color: var(--kimm-stark); box-shadow: 0 10px 22px -18px rgba(8, 18, 22, .6); text-decoration: none; }
.wache-zeile:active { transform: scale(.995); }
.wache-zeile.st-down { border-left: 3px solid var(--ausfall); }
.wache-zeile.st-paused { opacity: .78; }
.wz-name { display: grid; min-width: 0; }
.wz-name strong { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-ziel { font-size: .8rem; color: var(--dunst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-typ { color: var(--dunst); }
.wz-wert { display: grid; }
.wz-zahl { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.wz-extra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.wz-pfeil { color: var(--dunst); transition: transform .2s var(--ease); }
.wache-zeile:hover .wz-pfeil { transform: translateX(3px); color: var(--teer); }
.spark { width: 132px; height: 34px; overflow: visible; }
.spark-linie { fill: none; stroke: var(--teer-2); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark-fehl { fill: var(--ausfall); }
.spark-null { stroke: var(--kimm-stark); stroke-dasharray: 3 4; }

.leer-wache { padding: clamp(24px, 4vw, 44px); border: 1.5px dashed var(--kimm-stark); border-radius: var(--r-l); }
.leer-kopf { max-width: 640px; margin-bottom: 24px; }
.leer-kopf h2 { margin-top: 8px; }
.arten-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.art-kachel { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r); border: 1.5px solid var(--kimm); background: var(--logbuch); color: var(--teer); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.art-kachel:hover { transform: translateY(-3px); border-color: var(--kimm-stark); box-shadow: 0 16px 30px -24px rgba(8, 18, 22, .55); text-decoration: none; }
.art-kachel:active { transform: scale(.985); }
.art-icon { width: 52px; height: 48px; stroke: var(--teer); fill: none; }
.art-icon .akz { stroke: var(--berichtigung); }
.art-icon .akz-voll { fill: var(--klar); stroke: none; }
.art-titel { font: 800 1.8rem/1 var(--ff-display); text-transform: uppercase; letter-spacing: .02em; margin-top: 6px; }
.art-satz { font-size: .95rem; color: var(--teer-2); }
.art-bsp { font-size: .74rem; color: var(--dunst); }
.art-kachel--wahl:has(input:checked) { border-color: var(--teer); box-shadow: 0 0 0 1px var(--teer), 0 16px 30px -24px rgba(8, 18, 22, .55); }
.art-kachel--wahl:has(input:checked)::after { content: "Gewählt"; position: absolute; top: 14px; right: 14px; padding: 3px 8px; border-radius: 4px; background: var(--teer); color: var(--nebel); font: 700 .7rem var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.art-kachel--wahl:has(input:focus-visible) { outline: 3px solid var(--peil); outline-offset: 3px; }

/* ================= Assistent ================= */
.assistent { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.assistent-rail { position: sticky; top: 88px; display: grid; gap: 24px; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.schritt { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--dunst); font-weight: 700; }
.schritt + .schritt::before { content: ""; position: absolute; left: 17px; top: -10px; height: 20px; width: 2px; background: var(--kimm-stark); }
.schritt-nr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--kimm-stark); font: 800 1.15rem var(--ff-display); background: var(--nebel); transition: background .2s, color .2s, border-color .2s; }
.schritt.aktiv { color: var(--teer); }
.schritt.aktiv .schritt-nr { background: var(--teer); color: var(--nebel); border-color: var(--teer); }
.schritt.erledigt .schritt-nr { border-color: var(--klar); color: var(--klar); }
.schritt-mobil { display: none; }
.logbuch-vorschau { padding: 16px; border-radius: var(--r); background: var(--logbuch); border: 1px solid var(--kimm); }
.logbuch-vorschau dl { margin: 10px 0 0; display: grid; gap: 6px; }
.logbuch-vorschau dt { font-size: .76rem; color: var(--dunst); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.logbuch-vorschau dd { margin: 0 0 6px; font-size: .85rem; overflow-wrap: anywhere; }
.assistent-haupt { min-width: 0; }
.buehne { padding: clamp(18px, 3vw, 32px); border-radius: var(--r-l); background: var(--logbuch); border: 1px solid var(--kimm); }
.buehne h2 { outline: none; }
.buehne-kopf { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.buehne-kopf h2 { margin: 2px 0 0; }
.unterarten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.unterart { position: relative; display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r); border: 1.5px solid var(--kimm); cursor: pointer; transition: border-color .15s, background .15s; }
.unterart:hover { border-color: var(--kimm-stark); }
.unterart:has(input:checked) { border-color: var(--teer); background: var(--logbuch-2); box-shadow: inset 4px 0 0 var(--teer); }
.unterart:has(input:focus-visible) { outline: 3px solid var(--peil); outline-offset: 2px; }
.unterart-titel { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; }
.unterart-satz { font-size: .9rem; color: var(--teer-2); }
.assistent-leiste { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.assistent-leiste .btn--lampe { margin-left: auto; min-width: 180px; }
.assistent-fehler { margin: 16px 0 0; }
.abschnitt { border: 1px solid var(--kimm); border-radius: var(--r); padding: 8px 16px 12px; margin: 10px 0 18px; }
.abschnitt legend { padding: 0 6px; font-weight: 800; font-size: .95rem; }
.grid-2--auto { align-items: start; }
.grid-2--host { grid-template-columns: minmax(0, 1fr) 160px; }
.field--haken { align-self: end; }
.feinheiten { border: 1px solid var(--kimm); border-radius: var(--r); margin: 6px 0 18px; }
.feinheiten summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 52px; padding: 14px 16px; cursor: pointer; font-weight: 800; list-style: none; }
.feinheiten summary::-webkit-details-marker { display: none; }
.feinheiten summary::before { content: "+"; font: 700 1.1rem var(--ff-mono); width: 16px; }
.feinheiten[open] summary::before { content: "−"; }
.feinheiten-inhalt { padding: 4px 16px 10px; border-top: 1px solid var(--kimm); padding-top: 16px; }
.probe { margin: 4px 0 18px; }
.probe-ergebnis:not(:empty) { margin-top: 14px; padding: 14px; border-radius: var(--r); background: var(--logbuch-2); border: 1px solid var(--kimm); }
.probe-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.probe-vorschau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.probe-bild { max-height: 380px; overflow: auto; border-radius: var(--r-s); border: 1px solid var(--kimm-stark); background: #fff; }
.probe-bild img { width: 100%; height: auto; }
.probe-text { display: grid; gap: 6px; align-content: start; min-width: 0; }
.probe-url { overflow-wrap: anywhere; }
.probe-auszug { margin: 0; max-height: 300px; overflow: auto; padding: 10px 12px; border-radius: var(--r-s); background: var(--logbuch); border: 1px solid var(--kimm); font: .8rem/1.5 var(--ff-mono); white-space: pre-wrap; word-break: break-word; }
.erfolg-push { text-align: left; max-width: 760px; margin: 24px auto 0; display: grid; gap: 12px; }
.erfolg-push h3 { margin: 0; }
.erfolg-aktionen { justify-content: center; margin-top: 24px; }
.snippets { display: grid; gap: 12px; }
.snippet-body .hint { display: block; margin: 0 0 8px; }
.zentriert { justify-content: center; }

/* ================= Detail ================= */
.wach-kopf { padding: clamp(20px, 3vw, 32px); border-color: var(--nacht-kimm); }
.wach-kopf .wk-name { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; line-height: .92; margin: 12px 0 8px; color: var(--nacht-ink); overflow-wrap: anywhere; }
.wk-ziel { margin: 0; color: var(--feuerschein); overflow-wrap: anywhere; }
.wk-meta { margin: 8px 0 0; color: var(--nacht-dunst); }
.wk-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: rgba(255, 139, 147, .1); border: 1px solid rgba(255, 139, 147, .35); color: var(--nacht-ink); }
.wk-aktionen { margin-top: 20px; }
.btn--gefahr-rahmen { --fg: var(--n-ausfall) !important; border-color: rgba(255, 139, 147, .45) !important; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kz { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r); background: var(--logbuch); border: 1px solid var(--kimm); }
.kz-label { font-size: .82rem; font-weight: 700; color: var(--dunst); }
.kz-wert { font: 800 2rem/1 var(--ff-display); }
.kz--warn { border-color: var(--warn); }
.kz--warn .kz-wert { color: var(--warn); }
.diagramm-wrap { position: relative; outline: none; border-radius: var(--r-s); }
.diagramm-wrap:focus-visible { outline: 3px solid var(--peil); outline-offset: 4px; }
.diagramm { width: 100%; height: 240px; overflow: visible; touch-action: pan-y; }
.d-raster { stroke: var(--kimm); stroke-width: 1; }
.d-achse { fill: var(--dunst); font: 500 11px var(--ff-mono); }
.d-linie { fill: none; stroke: var(--peil); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.d-flaeche { fill: var(--peil); opacity: .08; }
.d-ausfall { fill: var(--ausfall); opacity: .12; }
.d-ausfall-marke { fill: var(--ausfall); }
.d-kreuz { stroke: var(--teer); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.d-punkt { fill: var(--logbuch); stroke: var(--peil); stroke-width: 2; }
.d-tip { position: absolute; top: 4px; transform: translateX(-50%); display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-s); background: var(--nacht-2); color: var(--nacht-ink); font-size: .82rem; pointer-events: none; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); z-index: 2; }
.d-tip .kn--up { --c: var(--n-klar); } .d-tip .kn--down { --c: var(--n-ausfall); }
.diag-legende { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.leg-linie { display: inline-block; width: 22px; height: 2px; background: var(--peil); }
.vorfaelle { list-style: none; margin: 0; padding: 0; }
.vorfall { display: grid; grid-template-columns: 120px minmax(0, 1.4fr) 140px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--kimm); }
.vorfall:last-child { border-bottom: 0; }
.vorfall.laeuft .vf-dauer { color: var(--ausfall); font-weight: 700; }
.push-box .kopierzeile { margin: 6px 0 16px; }
.einstellungen-box { padding: 0; }
.einstellungen-box > summary { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 20px clamp(16px, 2.6vw, 26px); cursor: pointer; list-style: none; min-height: 60px; }
.einstellungen-box > summary::-webkit-details-marker { display: none; }
.einstellungen-box > summary::after { content: "+"; margin-left: auto; font: 700 1.3rem var(--ff-mono); }
.einstellungen-box[open] > summary::after { content: "−"; }
.einstellungen-form { padding: 0 clamp(16px, 2.6vw, 26px) 24px; border-top: 1px solid var(--kimm); padding-top: 20px; }
.einst-spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--kimm-stark); display: grid; gap: 12px; }
.zp { position: relative; }
.zp::before { content: ""; position: absolute; left: -29px; top: 22px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--berichtigung); box-shadow: 0 0 0 4px var(--logbuch); }
.aend-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aend-liste .zp::before { display: none; }
.zp-karte { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: var(--r); border: 1px solid var(--kimm); background: var(--logbuch); color: var(--teer); text-decoration: none; transition: transform .2s var(--ease), border-color .2s; }
.zp-karte:hover { transform: translateX(3px); border-color: var(--kimm-stark); text-decoration: none; }
.zp.ungesehen .zp-karte { border-color: color-mix(in srgb, var(--berichtigung) 55%, var(--kimm)); box-shadow: inset 3px 0 0 var(--berichtigung); }
.zp-bild { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-s); overflow: hidden; background: var(--logbuch-2); border: 1px solid var(--kimm); }
.zp-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--ease); }
.zp-text { display: grid; gap: 6px; align-content: start; min-width: 0; }
.zp-kopf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.zp-sum { font-weight: 700; }
.zp-ki { font-size: .92rem; color: var(--teer-2); }
.zp-meta { gap: 8px; }
.mehr { margin-top: 14px; }

/* ================= Änderungsansicht ================= */
.aend-kopf h1 { margin: 6px 0 4px; font-size: clamp(2rem, 4.6vw, 3.2rem); text-transform: uppercase; line-height: .92; overflow-wrap: anywhere; }
.aend-url { overflow-wrap: anywhere; }
.aend-nav { gap: 8px; }
.aend-summe { border-left: 3px solid var(--berichtigung); }
.summe-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.summe-text { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; margin: 14px 0 12px; max-width: 70ch; }
.chips { gap: 8px; margin-bottom: 16px; }
.ki-block { padding-top: 14px; border-top: 1px solid var(--kimm); display: grid; gap: 8px; justify-items: start; }
.ki-satz { display: flex; gap: 6px; align-items: flex-start; }
.ki-satz p { margin: 0; max-width: 70ch; }
.ki-satz .ki-marke { margin-top: 3px; }
.ki-hoch { color: var(--ausfall); border-color: currentColor; }
.ki-mittel { color: var(--warn); border-color: currentColor; }
.ki-gering { color: var(--dunst); }
.aend-ansicht { padding-top: 6px; }
.aend-panel { padding-top: 16px; }
.panel-kopf { margin: 0 0 10px; gap: 8px; }
.bildfenster { max-height: min(80svh, 1000px); overflow: auto; border-radius: var(--r-s); border: 1px solid var(--kimm-stark); background: var(--logbuch-2); overscroll-behavior: contain; }
.overlay-bild { width: 100%; height: auto; }
.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nebeneinander figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.nb-spalte { max-height: min(78svh, 960px); overflow: auto; border-radius: var(--r-s); border: 1px solid var(--kimm-stark); background: var(--logbuch-2); }
.nb-spalte img { width: 100%; height: auto; }
.diff-legende { gap: 6px; }

/* ================= Kanäle / Statusseiten / Einstellungen ================= */
.kanal-liste, .sp-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kanal, .sp-karte { display: grid; gap: 10px; align-content: start; transition: border-color .2s; }
.kanal-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kanal-typ { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--dunst); }
.kanal h3, .sp-karte h3 { margin: 0; }
.kanal-ziel { margin: 0; overflow-wrap: anywhere; color: var(--teer-2); }
.sp-monitore { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .93rem; }
.sp-monitore li { display: flex; align-items: center; gap: 10px; }
.sp-auswahl { max-height: 320px; overflow: auto; }
.einst-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.einst-raster > * { margin: 0 !important; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 10px 0 14px; }
.kv dt { font-weight: 700; font-size: .9rem; color: var(--dunst); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv--klein { font-size: .85rem; gap: 4px 14px; }
.gefahrenzone { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--ausfall) 45%, var(--kimm)); }

/* ================= Admin ================= */
.admin-panel { padding-top: 18px; display: grid; gap: 16px; }
.worker-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 12px; }
.worker-raster p { margin: 6px 0 0; }
.einst-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 20px; margin: 16px 0 6px; }
.konten-liste { display: grid; gap: 12px; }
.konto-karte { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.4fr); gap: 12px 22px; align-items: start; }
.konto-karte.gesperrt { border-color: color-mix(in srgb, var(--ausfall) 45%, var(--kimm)); }
.konto-kopf { display: grid; gap: 8px; }
.konto-mail { overflow-wrap: anywhere; }
.konto-grenzen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; }
.konto-grenzen .field { margin-bottom: 10px; }
.konto-grenzen .btn { grid-column: 1 / -1; justify-self: start; }
.konto-karte > .row:last-child { grid-column: 1 / -1; }
.listen-kopf .input[type="search"] { max-width: 320px; }
.listen-kopf .seg { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.audit-meta { max-width: 340px; overflow-wrap: anywhere; white-space: normal; }
.dns-liste { display: grid; gap: 12px; margin-bottom: 16px; }
.dns-zeile { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--kimm); border-radius: var(--r); background: var(--logbuch-2); }
.dns-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dns-feld { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.dns-wert { padding: 8px 10px; border-radius: var(--r-s); background: var(--logbuch); border: 1px solid var(--kimm); font-size: .82rem; overflow-wrap: anywhere; }

/* ================= Anmelden / Registrieren ================= */
.auth { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth-nacht { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 48px); }
.auth-nacht::before { content: ""; position: absolute; left: -10%; bottom: -10%; width: 180%; height: 60%; z-index: -1; transform-origin: 0 100%; transform: rotate(-24deg);
  background: linear-gradient(90deg, rgba(255, 244, 220, .22), rgba(255, 244, 220, .05) 50%, transparent 85%);
  clip-path: polygon(0 96%, 100% 0, 100% 46%, 0 100%); animation: auth-strahl 14s var(--ease) infinite alternate; }
@keyframes auth-strahl { from { transform: rotate(-30deg); } to { transform: rotate(-14deg); } }
.auth-nacht .wortmarke { color: var(--nacht-ink); }
.auth-nacht .auth-these { font: 800 clamp(2.6rem, 5vw, 4.4rem)/.9 var(--ff-display); text-transform: uppercase; max-width: 11ch; margin: 0; color: var(--nacht-ink); }
.auth-nacht p { color: var(--nacht-dunst); max-width: 36ch; }
.auth-seite { display: flex; flex-direction: column; padding: clamp(18px, 4vw, 48px); }
.auth-oben { display: flex; justify-content: flex-end; gap: 8px; }
.auth-mitte { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 24px; }
.auth-karte { width: 100%; max-width: 440px; }
.auth-karte h1 { font-size: clamp(2.4rem, 5vw, 3.2rem); text-transform: uppercase; line-height: .92; }
.auth-karte .lead { margin-bottom: 26px; }
.auth-alt { margin-top: 22px; font-size: .95rem; }
.form-fehler { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--ausfall); background: color-mix(in srgb, var(--ausfall) 8%, transparent); color: var(--ausfall); font-weight: 600; font-size: .93rem; }
.form-fehler + .btn { margin-bottom: 14px; }
.pw-zeile { display: flex; gap: 8px; }
.pw-zeile .input { flex: 1; }
.pw-zeile .btn { min-width: 96px; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.pw-meter i { height: 5px; border-radius: 3px; background: var(--kimm-stark); transition: background .2s; }
.pw-meter[data-stufe="1"] i:nth-child(-n+1) { background: var(--ausfall); }
.pw-meter[data-stufe="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-stufe="3"] i:nth-child(-n+3) { background: var(--peil); }
.pw-meter[data-stufe="4"] i { background: var(--klar); }
.auth-fuss { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .85rem; }
.auth-fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dunst); }
.auth .gezuendet { border: 0; background: none; padding-inline: 0; }

/* ================= Öffentliche Statusseite ================= */
.status-seite .status-kopf { padding-block: clamp(28px, 6vw, 64px) clamp(24px, 4vw, 40px); }
.status-seite h1 { font-size: clamp(2.4rem, 6vw, 4rem); text-transform: uppercase; line-height: .9; margin: 10px 0 18px; overflow-wrap: anywhere; }
.status-lage { display: inline-flex; padding: 14px 20px; border-radius: var(--r); border: 1px solid var(--nacht-kimm); background: rgba(232, 240, 239, .04); }
.status-lage .kn { font-size: 1.2rem; }
.lage--partial, .lage--down { border-color: rgba(255, 139, 147, .45); }
.status-liste { display: grid; gap: 14px; padding-block: clamp(24px, 4vw, 44px) 60px; }
.status-zeile { padding: 18px 20px; border-radius: var(--r); background: var(--logbuch); border: 1px solid var(--kimm); }
.sz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.sz-name { font-size: 1.5rem; margin: 0; margin-right: auto; overflow-wrap: anywhere; }
.sz-uptime { font-size: .85rem; color: var(--dunst); }
.tage-wrap { position: relative; }
.tage { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 36px; touch-action: pan-y; }
.tag { border-radius: 2px; background: var(--klar); }
.tag--mau { background: var(--warn); clip-path: polygon(0 18%, 100% 18%, 100% 100%, 0 100%); }
.tag--schlecht { background: var(--ausfall); clip-path: polygon(0 34%, 100% 34%, 100% 100%, 0 100%); }
.tag--leer { background: var(--kimm-stark); clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); }
.tag:hover { opacity: .7; }
.tage-achse { display: flex; justify-content: space-between; margin-top: 6px; font: 500 .74rem var(--ff-mono); color: var(--dunst); }
.achse-links::before { content: "vor 90 Tagen"; }
.tage-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); display: grid; gap: 2px; padding: 7px 11px; border-radius: var(--r-s); background: var(--nacht-2); color: var(--nacht-ink); font-size: .8rem; white-space: nowrap; pointer-events: none; z-index: 2; }
.status-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .85rem; color: var(--dunst); }
.status-legende span { display: inline-flex; align-items: center; gap: 6px; }
.status-legende i { display: inline-block; width: 10px; height: 16px; border-radius: 2px; }
.status-legende .l-gut { background: var(--klar); }
.status-legende .l-mau { background: var(--warn); clip-path: polygon(0 18%, 100% 18%, 100% 100%, 0 100%); }
.status-legende .l-schlecht { background: var(--ausfall); clip-path: polygon(0 34%, 100% 34%, 100% 100%, 0 100%); }
.status-legende .l-leer { background: var(--kimm-stark); clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); }

/* ================= Responsiv: Tablet ================= */
@media (max-width: 1180px) {
  .wache-zeile { grid-template-columns: 112px minmax(0, 1.6fr) 120px 76px 96px minmax(0, 1fr) 16px; }
  .wz-30 { display: none; }
  .spark { width: 112px; }
}
@media (max-width: 920px) {
  .schale { grid-template-columns: minmax(0, 1fr); }
  .wachstube { position: fixed; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-102%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s .28s; }
  .wachstube.offen { transform: none; visibility: visible; transition: transform .28s var(--ease); box-shadow: 20px 0 40px -20px rgba(0, 0, 0, .6); }
  .burger { display: inline-grid; }
  .wortmarke--mobil { display: inline-flex; font-size: 1.35rem; color: var(--teer); }
  .kopf-titel { display: none; }
  .kopfleiste { justify-content: space-between; }
  .lagebild { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistent { grid-template-columns: minmax(0, 1fr); }
  .assistent-rail { position: static; }
  .schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .schritt { flex-direction: column; gap: 6px; padding: 0; font-size: .86rem; }
  .schritt + .schritt::before { left: -50%; right: 50%; top: 17px; width: auto; height: 2px; margin-inline: 22px; }
  .logbuch-vorschau { display: none; }
  .einst-spalten, .einst-raster { grid-template-columns: minmax(0, 1fr); }
  .konto-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .konto-grenzen { grid-column: 1 / -1; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-nacht { min-height: 0; padding-block: 20px; flex-direction: row; align-items: center; }
  .auth-nacht .auth-these, .auth-nacht p { display: none; }
}

/* ================= Mobil: eigene Anordnung ================= */
@media (max-width: 768px) {
  .kopf-cta { display: none; }
  .ansicht { padding-bottom: 104px; }
  .mobil-leiste { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--nacht); border-top: 1px solid var(--nacht-kimm); }
  .ml-link { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 54px; padding: 6px 2px; border-radius: var(--r-s); color: var(--nacht-dunst); text-decoration: none; font-size: .72rem; font-weight: 700; }
  .ml-link .nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .ml-link:active { transform: scale(.95); }
  .ml-link.aktiv { color: var(--feuerschein); }
  .ml-link .zaehler { position: absolute; top: 2px; right: calc(50% - 26px); margin: 0; min-width: 18px; height: 18px; font-size: .64rem; }
  .ml-neu { color: var(--nacht); }
  .ml-neu .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--feuerschein); color: var(--nacht); margin-top: -2px; }
  .ml-neu .nav-text { color: var(--nacht-dunst); }
  .toast-host { bottom: 84px; }

  /* Wachliste als Karten */
  .wache-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "spark spark" "werte werte" "extra extra"; gap: 8px 12px; padding: 14px; }
  .wache-zeile:hover { transform: none; }
  .wz-status { grid-area: status; align-self: start; }
  .wz-name { grid-area: name; }
  .wz-spark { grid-area: spark; }
  .wz-spark .spark { width: 100%; height: 30px; }
  .wz-wert { display: inline-grid; }
  .wache-zeile { grid-template-areas: "name status" "spark spark" "w1 w2" "w3 extra"; grid-template-columns: 1fr 1fr; }
  .wz-wert:nth-of-type(4) { grid-area: w1; } .wz-30 { display: grid; grid-area: w2; } .wz-wert:nth-of-type(6) { grid-area: w3; }
  .wz-extra { grid-area: extra; justify-content: flex-end; }
  .wz-pfeil { display: none; }
  .wz-status { justify-self: end; }
  .arten-raster { grid-template-columns: minmax(0, 1fr); }
  .art-kachel { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .art-kachel .art-icon { grid-row: span 3; }
  .art-kachel .art-bsp { grid-column: 2; }
  .art-titel { margin-top: 0; font-size: 1.6rem; }

  /* Assistent: Aktionen als feste Leiste über der Navigation */
  .schritte { display: none; }
  .schritt-mobil { display: block; margin: 0 0 10px; color: var(--dunst); letter-spacing: .08em; text-transform: uppercase; }
  .buehne { padding: 18px 16px; border-radius: var(--r); }
  .assistent-leiste { position: sticky; bottom: 76px; z-index: 30; margin: 14px -4px 0; padding: 10px; border-radius: var(--r); background: color-mix(in srgb, var(--nebel) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--kimm); }
  .assistent-leiste .btn { flex: 1; }
  .assistent-leiste .btn--lampe { min-width: 0; }
  .unterarten { grid-template-columns: minmax(0, 1fr); }
  .grid-2--host { grid-template-columns: minmax(0, 1fr) 110px; }
  .probe-vorschau { grid-template-columns: minmax(0, 1fr); }
  .probe-bild { max-height: 280px; }

  .vorfall { grid-template-columns: auto minmax(0, 1fr); }
  .vf-grund { grid-column: 1 / -1; }
  .zp-karte { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .nebeneinander { grid-template-columns: 1fr 1fr; gap: 6px; }
  .nb-spalte { max-height: 62svh; }
  .bildfenster { max-height: 70svh; }
  .hinweis-ziehen { display: none; }
  .konto-karte { grid-template-columns: minmax(0, 1fr); }
  .kanal-liste, .sp-liste { grid-template-columns: minmax(0, 1fr); }
  .tage { grid-template-columns: repeat(45, minmax(0, 1fr)); }
  .tage .tag:nth-child(-n+45) { display: none; }
  .achse-links::before { content: "vor 45 Tagen"; }
  .dns-feld { grid-template-columns: minmax(0, 1fr) auto; }
  .dns-feld .label { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .lagebild { gap: 8px; }
  .lage-kachel { padding: 12px; column-gap: 10px; }
  .lage-zahl { font-size: 2.1rem; }
  .lage-label { font-size: .8rem; }
  .seitenkopf h1 { font-size: 2.4rem; }
  .wk-aktionen .btn { flex: 1 1 calc(50% - 12px); }
  .kz-wert { font-size: 1.7rem; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-karte { grid-template-columns: minmax(0, 1fr); }
  .zp-bild { aspect-ratio: 16 / 7; }
  .tage { grid-template-columns: repeat(30, minmax(0, 1fr)); height: 32px; }
  .tage .tag:nth-child(-n+60) { display: none; }
  .achse-links::before { content: "vor 30 Tagen"; }
  .tabs button { padding: 10px 11px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-nacht::before { animation: none; }
}