/* ── EIGENE SCHRIFTEN (Befund Gesamtpruefung 26.07.) ──────────────────────────────
   Bisher luden 20 Seiten Archivo und Spline Sans Mono per fonts.googleapis.com nach -
   darunter ausgerechnet die Datenschutzseite selbst, die das Gegenteil zusicherte. Bei
   jedem Seitenaufruf ging damit die IP-Adresse des Besuchers an Google. Jetzt liegen die
   Schriften auf dem eigenen Server. Beides sind VARIABLE Schriften: eine Datei deckt alle
   Gewichte ab (font-weight-Bereich statt je Schnitt eine Datei) - 76 KB statt 9 Dateien.
   font-display:swap = Text ist sofort lesbar, die Schrift tauscht nach. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;
  font-display:swap;src:url('/assets/archivo.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:100 900;
  font-display:swap;src:url('/assets/splinemono.woff2') format('woff2')}

/* ══ pub.css — gemeinsame Design-Ebene für ALLE öffentlichen Seiten ══
   WP-I (07/2026): sichtbarer Design-Sprung. EINE Quelle für CI-Typografie
   (Archivo 700/800 Überschriften, Spline Sans Mono für Daten/Labels), Karten mit
   echter Schatten-Tiefe + Hover-Lift, Akzent-Eyebrows, kräftige Akzent-Pills
   und feine Gradienten. Wird als LETZTES Stylesheet eingebunden (nach den
   Seiten-<style> + ci*.css), damit die Vereinheitlichung greift. Selektoren
   sind body-/klassen-verankert, damit sie ohne !important gewinnen. */

/* ── Design-Token ────────────────────────────────────────────────── */
:root{
  --pub-mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pub-head:'Archivo',-apple-system,system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pub-acc:#38BDF8; --pub-acc2:#0369A1;
  --pub-s1:#F2C40F; --pub-s2:#E0452F; --pub-s3:#7B4FD4; --pub-s4:#D63F8C; --pub-ok:#34D399;
  --pub-gap:16px; --pub-r:14px; --pub-r-sm:10px; --pub-r-pill:999px;
  /* Karten-Tiefe (Default = hell; Themes überschreiben unten) */
  --pub-shadow:0 1px 2px rgba(16,32,58,.05), 0 16px 34px -20px rgba(16,32,58,.30);
  --pub-shadow-h:0 4px 10px rgba(16,32,58,.09), 0 28px 54px -20px rgba(16,32,58,.42);
  /* WARNSTUFEN = FLÄCHEN-Farben (Betreiber: S1 ist GELB!). ci-tokens.css definiert
     --s1..--s4 im hellen Theme als dunkle TEXT-Kontrasttöne (S1 = braun-gold #8A6B00)
     für die internen Seiten — auf den öffentlichen Seiten/Portal überschrieb das nach
     der WP-I-Ladereihenfolge die Chip-/Legenden-Flächen. pub.css lädt als LETZTES
     und setzt hier die Flächen-Palette verbindlich zurück (gilt nur, wo pub.css lädt). */
  --s1:#F2C40F; --s2:#E0452F; --s3:#7B4FD4; --s4:#D63F8C;
  /* TEXT-Toene der Warnstufen (Befund Gesamtpruefung 25.07., Team Design): die Flaechen-
     Palette darueber ist Betreiber-Schema und bleibt. Als SCHRIFT ist sie im hellen Theme
     unlesbar (S1-Gelb 1,55:1, Entwarnungsgruen 1,67:1 - noetig 4,5:1). Regel ab jetzt:
     Flaeche -> --s1..--s4, Schrift/Linie -> --s1-text..--s4-text (Werte aus ci-tokens.css). */
  --s1-text:#8A6B00; --s2-text:#C22014; --s3-text:#6D28D9; --s4-text:#BE185D; --ok-text:#1F7A4D;
  /* --faint auch HIER setzen (04.08.2026): start.html und guete.html laden
     ci-tokens.css nicht und fielen sonst auf den alten, unlesbaren Ersatzwert
     zurueck. pub.css laedt zuletzt - derselbe Wert, kein Widerspruch. */
  --faint:#5C6A7C;
}
:root[data-theme="light"], :root[data-theme="dark"]{
  --s1:#F2C40F; --s2:#E0452F; --s3:#7B4FD4; --s4:#D63F8C;
}
:root[data-theme="light"]{
  --s1-text:#8A6B00; --s2-text:#C22014; --s3-text:#6D28D9; --s4-text:#BE185D; --ok-text:#1F7A4D;
  --pub-ok:#1F7A4D;              /* grosse Entwarnungs-Zahl: Mint #34D399 war nur 1,67:1 */
  --pub-shadow:0 1px 2px rgba(16,32,58,.05), 0 16px 34px -20px rgba(16,32,58,.30);
  --pub-shadow-h:0 4px 10px rgba(16,32,58,.09), 0 28px 54px -20px rgba(16,32,58,.42);
  /* 10.08.2026 nachgemessen: 4,34:1 auf dem Seitengrund #EDF1F6 - der ist
     die Flaeche, auf der Fusszeilen und Standangaben wirklich liegen, und
     dort war der Ton zu leise. Jetzt 4,86:1 dort, 5,52:1 auf Weiss. */
  --faint:#5C6A7C;
}
:root[data-theme="dark"]{
  --s1-text:#F2C40F; --s2-text:#F26B5E; --s3-text:#B57BEA; --s4-text:#F472B6; --ok-text:#4EC58A;
  --pub-ok:#34D399;
  --pub-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.72);
  --pub-shadow-h:0 4px 12px rgba(0,0,0,.6), 0 28px 58px -18px rgba(0,0,0,.85);
  --faint:#7E899A;               /* 4,94:1 auf Panel, 4,53:1 auf Panel-2 */
}

/* ── Überschriften: kräftige Archivo-Typo, groß & markant ─────────── */
body h1{
  font-family:var(--pub-head); font-weight:800;
  font-size:clamp(30px, 1.4rem + 1.6vw, 39px); line-height:1.04;
  letter-spacing:-.028em;
}
body h2{ font-family:var(--pub-head); font-weight:700; letter-spacing:-.016em }
body h3,body h4,.pub-head{ font-family:var(--pub-head); font-weight:700; letter-spacing:-.008em }
/* /warnung: Titel sitzt im Warn-Hero neben dem Stufen-Badge → dort eigener Maßstab */
body .wh-body h1{ font-size:clamp(25px, 1.1rem + 1.5vw, 33px); line-height:1.06; letter-spacing:-.02em }
/* /guete: Sektions-Titel etwas größer */
body .sec h2{ font-size:19px }

/* ── Sektions-Eyebrow (mono, klein, Akzent, uppercase) über Titeln ── */
.pub-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 8px;
  font-family:var(--pub-mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent, var(--acc,#0369A1));
}
.pub-eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor; flex:none }
/* Bestehende Karten-Kopf-Labels als Eyebrows einfärben (Akzent statt grau) */
.card>.head .t, .card .head .t{ color:var(--accent, var(--acc,#0369A1)); font-weight:600 }

/* ── Karten: echte Tiefe, 14px-Radius, sanfter Hover-Lift ─────────── */
body .card, body .sec, body .big{
  border-radius:var(--pub-r);
  box-shadow:var(--pub-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body .card:hover, body .big:hover{ transform:translateY(-3px); box-shadow:var(--pub-shadow-h) }
body .sec:hover{ box-shadow:var(--pub-shadow-h) }
/* Karten-Flächen: dezenter Akzentrand beim Hovern */
body .card:hover{ border-color:color-mix(in oklab, var(--accent, var(--acc,#0369A1)) 30%, var(--line,#DCE3EC)) }
/* Karten mit Leaflet-Karte/Vorschau NICHT anheben (kein Ruckeln beim Kartenklick) */
body .card:has(#map):hover, body .card:has(.leaflet-container):hover,
body .card:has(.preview):hover, body .card:has(iframe):hover{
  transform:none; box-shadow:var(--pub-shadow);
  border-color:var(--line,#DCE3EC);
}
/* Größerer Rhythmus zwischen den Karten (mehr Luft) */
body .card{ margin-top:20px }

/* ── Kennzahl-Kacheln: stolze Archivo-800-Zahlen (guete/region) ───── */
body .big .n{ font-family:var(--pub-head); font-weight:800; font-size:clamp(38px,3vw,52px); letter-spacing:-.03em }
body .kpi .v{ font-family:var(--pub-head); font-weight:800; letter-spacing:-.02em }
body .metric .n, body .metric .row b{ font-family:var(--pub-mono) }

/* ── Buttons: kräftige Akzent-Pills mit Gradient + Glow ───────────── */
body .btn.primary, body button.send, body .backbtn.primary{
  border:0; border-radius:var(--pub-r-pill);
  background:linear-gradient(180deg, var(--accent,#0369A1), var(--accent2, var(--acc,#0369A1)));
  /* WEISSE SCHRIFT auf hellem Grund (gemessen 10.08.2026: fast schwarz auf dem
     dunkelblauen Verlauf ergab 3,19:1, weiss ergibt 5,9). Im dunklen Thema ist
     der Akzent hellblau - dort bleibt die dunkle Schrift richtig. Aufgefallen
     ist es erst, nachdem der Kontrast-Test auch VERLAEUFE als Hintergrund
     erkennt; vorher rechnete er gegen den Seitengrund und sah beide Faelle
     falsch. */
  color:#FFFFFF; font-weight:700; letter-spacing:.01em;
  box-shadow:0 8px 20px -8px color-mix(in oklab, var(--accent,#0369A1) 70%, transparent);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
body .btn.primary{ padding:10px 18px }
body .backbtn.primary{ padding:10px 18px }
[data-theme="dark"] body .btn.primary, [data-theme="dark"] body button.send,
[data-theme="dark"] body .backbtn.primary{ color:#04121C }
body button.send{ border-radius:var(--pub-r-pill) }
body .btn.primary:hover, body button.send:hover, body .backbtn.primary:hover{
  transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 12px 26px -8px color-mix(in oklab, var(--accent,#0369A1) 75%, transparent);
}

/* ── Formulare: EIN Stil (Schrift erben, ruhiger Fokusring) ───────── */
input,select,textarea,button{font-family:inherit}
input,select,textarea{font-size:15px}
.pub-field{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line2,#C7D2DE);
  background:var(--panel2,#F5F8FB);color:var(--txt,#0F1720);font-size:15px;line-height:1.4}
.pub-field:focus{outline:none;border-color:var(--pub-acc);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--pub-acc);outline-offset:2px}

/* ── Chip / Pill ── */
.pub-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--pub-mono);
  font-size:11px;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:var(--pub-r-pill);
  background:var(--panel2,#F5F8FB);border:1px solid var(--line2,#C7D2DE);color:var(--muted,#5A6675);white-space:nowrap}
.pub-chip.s1{background:var(--pub-s1);border-color:var(--pub-s1);color:#231A00}
.pub-chip.s2{background:var(--pub-s2);border-color:var(--pub-s2);color:#fff}
.pub-chip.s3{background:var(--pub-s3);border-color:var(--pub-s3);color:#fff}
.pub-chip.s4{background:var(--pub-s4);border-color:var(--pub-s4);color:#fff}
.pub-chip.ok{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.4);color:var(--pub-ok)}

/* ── Kennzahl-Kacheln (Dashboard-Muster wie portal .dtile) ── */
.pub-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pub-kpi{background:var(--panel,#fff);border:1px solid var(--line,#DCE3EC);border-radius:var(--pub-r);
  padding:14px 15px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--pub-shadow)}
/* MINDESTGROESSE 11 PIXEL (Konzept 03.08.2026, nachgemessen): Diese Beschriftung
   stand bei 10 px, weiter unten sogar bei 9,5 - in Versalien, gesperrt und in
   gedaempftem Grau. Auf einem Handy in der Sonne ist das nicht mehr zu lesen,
   und es ist die Zeile, die sagt, WAS die grosse Zahl darunter bedeutet. */
.pub-kpi .k-lbl{font-family:var(--pub-mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted,#5A6675)}
.pub-kpi .k-num{font-family:var(--pub-head);font-weight:800;font-size:29px;line-height:1.05;letter-spacing:-.02em;color:var(--txt,#0F1720)}
.pub-kpi .k-sub{font-size:12px;color:var(--muted,#5A6675)}

/* ── CTA-/Hinweis-Kasten: feiner Akzent-Gradient (Vorbild /hilfe-Handbuch) ── */
.pub-cta{
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent,#0369A1) 12%, transparent), transparent 60%),
    var(--panel, #fff);
  border:1px solid color-mix(in oklab, var(--accent,#0369A1) 30%, var(--line,#DCE3EC));
  border-radius:var(--pub-r); box-shadow:var(--pub-shadow);
}

/* ── Portal: Dashboard-Kacheln mit Tiefe + Icon-Akzentfläche ─────── */
body .dtile{
  border-radius:var(--pub-r); box-shadow:var(--pub-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body .dtile:hover{ transform:translateY(-3px); box-shadow:var(--pub-shadow-h) }
body .dtile .dh .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; font-size:14px;
  background:color-mix(in oklab, var(--accent,#0369A1) 15%, transparent);
}
body .dtile .dv{ font-family:var(--pub-head); font-weight:800; font-size:18px; letter-spacing:-.01em }

/* ── Portal-Sprungleiste: als Milchglas-Segmented-Control mit gleitendem
   Indikator umgesetzt — die vollständige Gestaltung liegt jetzt in portal.html
   (Kapsel .pnav-links + absolut positionierter .pnav-ind). Hier bewusst KEINE
   #pnav-Regeln mehr, damit sie sich nicht mit dem Indikator überlagern. */

/* ── Ruhige „Technik × Apple"-Effekt-Basis für ALLE öffentlichen Seiten (WP-L) ──
   Einmalig hier abgelegt, damit warnung/guete/urlaub/beta/hilfe/handbuch sie
   automatisch erben. Aktiviert wird die Staffel-Einblendung global über pubnav.js
   (überall eingebunden). Nur transform/opacity → GPU-schonend, kein Layout-Trigger. */
/* KEIN will-change: dauerhafte Compositing-Layer zeigten in iOS-Safari nach dem
   Theme-Wechsel schwarze Flächen zwischen den Sektionen (Befund 18.07.2026).
   pubnav.js entfernt die Klassen nach der Einblendung wieder vollständig. */
.pub-reveal{ opacity:0; transform:translateY(12px) }
.pub-reveal.pub-in{ opacity:1; transform:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.32,.72,.28,1) }
/* Schwebende Karten-Knöpfe und Dialog-Folien dürfen NIE am Effekt hängen
   (sonst unsichtbarer "Meine Orte"-Knopf) - doppelte Absicherung zur JS-Ausnahme. */
.wz-fab.pub-reveal, .wz-fab.pub-reveal.pub-in{ opacity:1 !important; transform:none !important; transition:none !important }
@media (prefers-reduced-motion: reduce){
  .pub-reveal, .pub-reveal.pub-in{ opacity:1 !important; transform:none !important; transition:none !important }
}

/* Buttons/Kacheln: sanfter Lift beim Hovern, dezenter Druck beim Klick.
   (Karten-Lift steckt schon oben; hier die klickbaren Steuerelemente.) */
body .btn:hover, body .seg button:hover, body .chk:hover{ transform:translateY(-2px) }
body .btn:active, body .seg button:active, body .chk:active,
body .btn.primary:active, body button.send:active{ transform:scale(.98) }
body .btn, body .seg button, body .chk{ transition:transform .14s ease, color .12s ease, border-color .12s ease, background .12s ease }

/* Sticky-Kopf (pubnav.js): weicher Schatten erst beim Scrollen (Klasse per JS). */
#pubHeader{ transition:box-shadow .25s ease, background .25s ease }
#pubHeader.pnav-scrolled{ box-shadow:0 6px 22px -12px rgba(16,32,58,.45) }
[data-theme="dark"] #pubHeader.pnav-scrolled{ box-shadow:0 8px 26px -12px rgba(0,0,0,.7) }

/* ── Schwebende Karten-Knöpfe: EIN Stapel-System, Slots von unten ──
   Auch von zell_eta.js / konrad3d.js / warnfarben.js selbst injiziert (id wzFabCss),
   damit interne Seiten ohne pub.css denselben Stapel bekommen. Werte identisch halten! */
.wz-fab{position:fixed;right:12px;z-index:9600;border:0;border-radius:var(--pub-r-pill);
  padding:9px 14px;font:600 12.5px/1 var(--pub-mono);color:#fff;background:#0F1720;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.55);cursor:pointer;max-width:82vw}
/* Basis-Abstand + iPhone-Home-Leiste (safe-area-inset-bottom), sonst rutscht der
   unterste Knopf "Meine Orte" hinter die Home-Leiste fast aus dem Bild. */
.wz-fab[data-slot="0"]{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.wz-fab[data-slot="1"]{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.wz-fab[data-slot="2"]{bottom:calc(116px + env(safe-area-inset-bottom,0px))}
.wz-fab[data-slot="3"]{bottom:calc(168px + env(safe-area-inset-bottom,0px))}
@media(max-width:700px){
  /* 44 px, nicht 40: unter 44 trifft ein Daumen im Gehen daneben - und diese
     Knoepfe sind genau die, die jemand im Regen mit einer Hand bedient.
     Die Steckplaetze liegen 50 px auseinander, das traegt 44 px ohne Beruehrung. */
  .wz-fab{padding:8px 14px;font-size:12px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
  .wz-fab[data-slot="0"]{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .wz-fab[data-slot="1"]{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .wz-fab[data-slot="2"]{bottom:calc(114px + env(safe-area-inset-bottom,0px))}
  .wz-fab[data-slot="3"]{bottom:calc(164px + env(safe-area-inset-bottom,0px))}
}
/* Leaflet-Popups über alle schwebenden Panels legen (Karten-Konflikt Handy) */
.leaflet-popup-pane{z-index:9700}

/* ══════════════════════════════════════════════════════════════════════════
   WP-M — Lage-Dashboard: Hero-Glaskachel · KPI-Dashlets · Gefahren-Kacheln
   Kollisionsfrei (pub-*-Klassen), lädt als LETZTES → gewinnt gegen Seiten-<style>.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO „Jetzt/Heute": zwei Stufen-Kacheln mit Puls-Glow + Lagetext-Körper ──
   (auf /warnung neben .warn-hero gesetzt; .warn-hero liefert display:grid -> hier
   auf Block zurückgestellt, damit Kachel-Reihe und Körper untereinander stehen). */
body .pub-hero{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--line,#DCE3EC); border-radius:var(--pub-r);
  box-shadow:var(--pub-shadow);
  background:
    radial-gradient(135% 150% at 0% 0%, color-mix(in oklab,var(--accent,#0369A1) 13%,transparent), transparent 52%),
    linear-gradient(180deg, var(--panel,#fff), var(--panel2,#F5F8FB));
}
body .pub-hero:hover{ transform:none; box-shadow:var(--pub-shadow) }   /* Hero ruhig, kein Lift */
.pub-hero .wh-split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 14px 0 }
.pub-hero .wh-tile{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--line2,#E7ECF2); border-radius:14px; padding:13px 15px 15px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--tcol,transparent) 20%,var(--panel,#fff)), var(--panel,#fff)) }
.pub-hero .wh-tile > *{ position:relative; z-index:1 }
.pub-hero .wh-tile .wh-k{ font-family:var(--pub-mono); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.pub-hero .wh-tile .wh-num{ font-family:var(--pub-head); font-weight:800;
  font-size:clamp(38px,10vw,52px); line-height:.95; letter-spacing:-.03em; margin:7px 0 1px; color:var(--txt) }
.pub-hero .wh-tile[data-stufe="0"] .wh-num{ color:var(--pub-ok) }
.pub-hero .wh-tile .wh-lvl{ font-size:12.5px; font-weight:700 }
.pub-hero .wh-tile .wh-sub{ font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:4px }
.pub-hero .wh-tile .wh-run{ display:inline-flex; align-items:center; gap:5px; font-family:var(--pub-mono); font-weight:700; font-size:11px; letter-spacing:.04em }
.pub-hero .wh-tile .wh-run i{ width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 0 currentColor; animation:pubPulseDot 1.7s ease-out infinite }
/* Puls-Glow je Kachel in ihrer Stufenfarbe (ruhig ~3 s; Stufe 0 statisch).
   Mischmodus theme-abhängig: DUNKEL 'screen' (leuchtet auf), HELL 'multiply'
   (screen wäre auf Weiß unsichtbar) — mit kräftigeren Glow-Farben für Hell. */
.pub-hero .wh-tile::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 28% 32%, var(--pub-glow,transparent), transparent 66%);
  mix-blend-mode:var(--pub-glow-blend,screen); opacity:0; animation:pubHeroGlow 3s ease-in-out infinite }
@keyframes pubHeroGlow{ 0%,100%{opacity:0} 50%{opacity:.6} }
.pub-hero .wh-tile[data-stufe="0"]{ --tcol:var(--pub-ok) }
.pub-hero .wh-tile[data-stufe="0"]::after{ animation:none; opacity:0 }
.pub-hero .wh-tile[data-stufe="1"]{ --tcol:var(--s1-fill,#F2C40F); --pub-glow:#FFE58A }
.pub-hero .wh-tile[data-stufe="2"]{ --tcol:var(--s2-fill,#E0452F); --pub-glow:#FF9E8B }
.pub-hero .wh-tile[data-stufe="3"]{ --tcol:var(--s3-fill,#7B4FD4); --pub-glow:#CBB0FF }
.pub-hero .wh-tile[data-stufe="4"]{ --tcol:var(--s4-fill,#D63F8C); --pub-glow:#FF9BD1 }
/* HELL: multiply + gesättigte Stufenfarbe -> der Glow wird auf Weiß sichtbar */
:root[data-theme="light"] .pub-hero .wh-tile{ --pub-glow-blend:multiply }
:root[data-theme="light"] .pub-hero .wh-tile[data-stufe="1"]{ --pub-glow:#F2C40F }
:root[data-theme="light"] .pub-hero .wh-tile[data-stufe="2"]{ --pub-glow:#F2705B }
:root[data-theme="light"] .pub-hero .wh-tile[data-stufe="3"]{ --pub-glow:#9E78E8 }
:root[data-theme="light"] .pub-hero .wh-tile[data-stufe="4"]{ --pub-glow:#EA6FB0 }
@media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .pub-hero .wh-tile{ --pub-glow-blend:multiply }
  :root:not([data-theme="dark"]) .pub-hero .wh-tile[data-stufe="1"]{ --pub-glow:#F2C40F }
  :root:not([data-theme="dark"]) .pub-hero .wh-tile[data-stufe="2"]{ --pub-glow:#F2705B }
  :root:not([data-theme="dark"]) .pub-hero .wh-tile[data-stufe="3"]{ --pub-glow:#9E78E8 }
  :root:not([data-theme="dark"]) .pub-hero .wh-tile[data-stufe="4"]{ --pub-glow:#EA6FB0 } }
.pub-hero .wh-body{ padding:15px 20px 18px; display:flex; flex-direction:column; gap:8px }
.pub-hero .wh-valid{ display:inline-flex; align-items:center; gap:8px }
.pub-hero .wh-text{ font-size:14px; line-height:1.55 }
/* Stand-Zeile mit Puls-Punkt (mono) */
.pub-hero .wh-valid .dot, .pub-pulsedot{ position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--pub-ok); flex:none; box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:pubPulseDot 2.4s ease-out infinite }
@keyframes pubPulseDot{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
@media(max-width:640px){ .pub-hero .wh-tile .wh-num{ font-size:40px } .pub-hero .wh-body{ padding:14px 16px 16px } }

/* ── KPI-Dashlets: Icon-Rundquadrat + mono-Label + stolze Archivo-800-Zahl ── */
.pub-kpi{ min-height:104px; gap:9px; justify-content:flex-start }
/* UMBRECHEN STATT UEBERSTEHEN. Gemessen auf /guete bei 390 px (B-296):
   Zeichen 30 + Abstand 9 + "TREFFGENAUIGKEIT" 123 = 162 Pixel in einer
   143 Pixel breiten Kachel - 19 Pixel standen ausserhalb, und weil die
   Kachel sichtbar ueberlaeuft, lagen sie ueber der Nachbarkachel. Das
   Wort ist EIN Wort und kann nicht brechen; also bricht die ZEILE:
   Passt die Ueberschrift nicht neben das Zeichen, rutscht sie darunter
   (123 <= 143). Kleiner setzen waere der falsche Weg - genau diese
   Beschriftung wurde am 03.08.2026 aus Lesbarkeitsgruenden von 10 auf
   11 Pixel vergroessert. */
.pub-kpi .k-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0 }
.pub-kpi .k-lbl{ min-width:0 }
.pub-kpi .k-ic{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:9px; font-size:15px; line-height:1;
  color:var(--accent,#0369A1);
  background:color-mix(in oklab,var(--accent,#0369A1) 15%,transparent) }
.pub-kpi .k-ic svg{ width:17px; height:17px; display:block }
.pub-kpi .k-lbl{ font-size:11px; line-height:1.3 }
.pub-kpi .k-num{ font-size:clamp(27px,4.4vw,34px); margin-top:2px }
.pub-kpi .k-sub{ font-size:11.5px; line-height:1.35 }
/* Stufen-Tönung der Icon-Fläche (per Modifier gesetzt) */
.pub-kpi.t1 .k-ic{ background:color-mix(in oklab,var(--pub-s1) 24%,transparent) }
.pub-kpi.t2 .k-ic{ background:color-mix(in oklab,var(--pub-s2) 20%,transparent) }
.pub-kpi.t3 .k-ic{ background:color-mix(in oklab,var(--pub-s3) 22%,transparent) }
.pub-kpi.t4 .k-ic{ background:color-mix(in oklab,var(--pub-s4) 22%,transparent) }
.pub-kpi.tok .k-ic{ background:color-mix(in oklab,var(--pub-ok) 22%,transparent) }
.pub-kpi.twarn .k-ic{ background:color-mix(in oklab,#FBBF24 26%,transparent) }

/* ── Gefahren-Kacheln (2-Spalten-Grid, linke Akzentkante in Stufenfarbe) ── */
.pub-hazgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:600px){ .pub-hazgrid{ grid-template-columns:1fr } }
.pub-haz{ background:var(--panel2,#F5F8FB); border:1px solid var(--line,#DCE3EC);
  border-radius:var(--pub-r); padding:13px 14px; display:flex; flex-direction:column; gap:8px;
  min-height:64px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease }
.pub-haz:hover{ transform:translateY(-2px); box-shadow:var(--pub-shadow) }
.pub-haz.on{ border-left:3px solid var(--tcol,var(--line2)); padding-left:13px }
.pub-haz.off{ opacity:.66 }
.pub-haz .ph-top{ display:flex; align-items:center; gap:11px }
.pub-haz .ph-ic{ flex:none; width:34px; height:34px; border-radius:9px; font-size:19px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in oklab,var(--tcol,var(--accent,#0369A1)) 16%,transparent) }
.pub-haz .ph-name{ font-family:var(--pub-head); font-weight:700; font-size:15px; flex:1; min-width:0; letter-spacing:-.01em }
.pub-haz .ph-win{ font-family:var(--pub-mono); font-size:11px; color:var(--muted,#5A6675); letter-spacing:.02em }
.pub-haz .ph-tip{ font-size:12px; color:var(--muted,#5A6675); line-height:1.45 }

/* ── Einheitliche Panel-Köpfe: Eyebrow-Balken vor jeden Karten-Kopf-Titel ──
   (.card>.head .t ist über pub.css schon akzentfarben) — nur der Balken fehlt noch. */
body .card>.head .t{ display:inline-flex; align-items:center; gap:8px }
body .card>.head .t::before{ content:""; width:16px; height:2px; border-radius:2px; background:currentColor; flex:none }

@media (prefers-reduced-motion: reduce){
  .pub-hero .wh-level::after, .pub-hero .wh-valid .dot, .pub-pulsedot{ animation:none !important }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP-MODUS: DIE SEITE LAEUFT OHNE BROWSER-LEISTEN
   (Betreiber-Befund 01.08.2026: "Du musst dann aber noch pruefen, dass die
   Ansichten, wenn es nicht im Browser laeuft, angepasst sind - es fehlen dann
   oben und unten die Leisten.")

   Genau so war es. Ursache war eine Kombination aus zwei Dingen: 14 Seiten
   erklaeren die iPhone-Statusleiste ueber apple-mobile-web-app-status-bar-style
   = black-translucent fuer DURCHSICHTIG - der Seiteninhalt beginnt in der App
   also ganz oben am Bildschirmrand, unter Uhrzeit und Akkuanzeige. Das ist
   Absicht und sieht gut aus, verlangt aber, dass die Seite selbst den noetigen
   Abstand haelt. Dafuer gibt es env(safe-area-inset-*) - diese Werte sind aber
   NUR ungleich null, wenn die Seite viewport-fit=cover setzt, und das taten 18
   von 20 Seiten nicht. Die Abstaende waren also ueberall null, obwohl im
   Stylesheet mit ihnen gerechnet wurde. In der App lag der Inhalt damit unter
   der Statusleiste, und unten schnitt der Home-Balken hinein.

   Die Werte stehen als Variablen, damit sie pruefbar und notfalls von Hand
   ueberschreibbar sind.

   NACHTRAG 04.08.2026 - DIE ABFRAGE WAR ZU ENG (Befund des Betreibers auf dem
   ersten TestFlight-Geraet: "die App hat ein Problem in der Aufloesung, passt
   nicht in den Bildschirm"; auf dem Bild lag unsere Kopfzeile ueber Uhrzeit und
   Akkuanzeige).
   Diese Regeln standen in @media (display-mode:standalone). Das trifft zu, wenn
   jemand die Seite ueber "Zum Home-Bildschirm" ablegt - die ECHTE App aber
   laeuft in einer eingebetteten Ansicht und meldet display-mode BROWSER. Die
   Abfrage schloss also ausgerechnet den Fall aus, fuer den sie gedacht war.
   Die Abfrage ist ersatzlos entfallen, und das ist gefahrlos: env(safe-area-*)
   ist im gewoehnlichen Browser null, weil dort die Browser-Leisten den Abstand
   halten. Wo nichts zu schuetzen ist, addieren die Regeln null.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --sa-top:env(safe-area-inset-top,0px);
  --sa-bottom:env(safe-area-inset-bottom,0px);
  --sa-left:env(safe-area-inset-left,0px);
  --sa-right:env(safe-area-inset-right,0px);
}
/* Oben: Kopfleiste unter die Statusleiste. Der unscharfe Hintergrund reicht
   dabei bis an den Bildschirmrand, damit die Uhrzeit lesbar bleibt. */
#pubHeader{padding-top:var(--sa-top)}
/* Unten: Platz fuer den Home-Balken. BEWUSST als Abstandhalter am Ende des
   Inhalts und NICHT als padding-bottom am body - der body traegt auf mehreren
   Seiten bereits einen Abstand fuer die schwebenden Knoepfe (auf der Warnkarte
   196 Pixel), den eine eigene Regel ueberschreiben und damit zerstoeren
   wuerde. Der Abstandhalter kommt additiv dazu. */
body::after{content:"";display:block;height:var(--sa-bottom)}
/* Querformat: auf Geraeten mit Aussparung liegt links oder rechts ein Rand. */
.pnav-inner{padding-left:calc(16px + var(--sa-left));padding-right:calc(16px + var(--sa-right))}
.ci-banner{padding-left:calc(24px + var(--sa-left));padding-right:calc(24px + var(--sa-right))}

/* ── DAS "i" — EINE FORM FUER ALLE SEITEN ────────────────────────────────────
   Hausregel 13 (Betreiber 16.08.2026): Die AUSSAGE bleibt sichtbar, die
   BEGRUENDUNG kommt hinter ein anwaehlbares "i". Innerhalb von zwoelf Stunden
   gab es davon drei private Fassungen mit je eigenen Massen und Farben
   (.ikinfo, .rwinfo, der Knopf an der See-Ebene). Ein eigenes Aussehen fuer
   dieselbe Sache ist eine zweite Sprache - hier steht sie einmal.
   Das Verhalten liegt in /info.js, hier nur die Form.

   WARUM HIER UND NICHT IN ci.css - GEMESSEN, NICHT VERMUTET: Der erste Anlauf
   legte die Regel nach ci.css, und der Test meldete auf /regionwarnung einen
   19 x 21 Pixel grossen Knopf ohne Trefferflaeche. Grund: Diese Seite laedt
   ci.css gar nicht, nur pub.css. Die oeffentlichen Seiten haben genau EINE
   Stilquelle gemeinsam, und das ist diese Datei. (Nebenbei zeigt derselbe
   Lauf, warum "alle Knoepfe sehen gleich aus" allein nichts beweist: Dort
   sahen sie gleich aus - gleich falsch.)
   FARBEN AUSGESCHRIEBEN und beide Themen daneben (Hausregel 6): var(--gibtsnicht)
   nimmt klaglos den Ersatzwert, und im Dunkelmodus steht dann ein weisses Feld. */
.wzinfo {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; border: 1px solid #D8DEE6; background: #FFFFFF; color: #0F1720;
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  display: inline-flex; align-items: center; justify-content: center;
}
/* DIE TREFFERFLAECHE IST 44 PIXEL, DER KNOPF BLEIBT 34. Der Daumen braucht 44
   (dieselbe Lehre wie bei der Regenleiste und den Modell-Knoepfen); ein 44 px
   grosser Kreis neben einer Textzeile saehe dagegen aus wie ein Fehler. */
.wzinfo::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.wzinfo[aria-expanded="true"], .wzinfo.active {
  background: #0369A1; color: #FFFFFF; border-color: #0369A1;
}
[data-theme="dark"] .wzinfo {
  border-color: #2A3441; background: #141A22; color: #E7EDF3;
}
[data-theme="dark"] .wzinfo[aria-expanded="true"],
[data-theme="dark"] .wzinfo.active {
  background: #38BDF8; color: #04121C; border-color: #38BDF8;
}
/* Die Zeile aus Aussage und "i": der Satz dehnt sich, der Knopf nicht. */
.wzinfozeile { display: flex; align-items: flex-start; gap: 9px; }
.wzinfozeile > :first-child { flex: 1 1 auto; }

/* Ein gemeinsamer Angebotsbaustein, im Dokumentfluss nach der Warnlage.
   Native Kaufwege markiert appbruecke.js; Embed zeigt keine Werbung. */
[data-wzangebot][hidden],html[data-embed="1"] [data-wzangebot],
html[data-nativeapp] [data-wzangebot][data-kaufweg]{display:none!important}
.wzangebot{margin:16px 0;padding:16px;border:1px solid #B9D3E4;border-radius:16px;
  color:#0F1720;background:#F4F9FD;font-size:13px;line-height:1.5}
.wzangebot h2{font-size:18px;line-height:1.25;margin:3px 0 6px;font-weight:750}
.wzangebot p{margin:0}
.wzangebot-label{font-size:11px;font-weight:700;color:#51677B}
.wzangebot-namen{color:#51677B}
.wzangebot-aktion{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.wzangebot .wzangebot-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 14px;border-radius:12px;background:#0369A1;color:#FFF;font-size:13px;font-weight:700;text-decoration:none}
.wzangebot-preis{font-size:12px;color:#51677B}
.wzangebot .wzangebot-bedingungen{margin-top:8px;font-size:11px;line-height:1.5;color:#51677B}
.wzangebot-details{margin-top:4px}
.wzangebot-details summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-size:12px;font-weight:650}
.wzangebot-details p{margin-top:5px}
.wzangebot-modul{padding:10px 0;border-top:1px solid #B9D3E4}
.wzangebot-frei{color:#51677B}
.wzangebot-status{padding:10px 14px;background:transparent;border-color:#DCE3EC}
.wzangebot-status a{display:inline-flex;min-height:44px;align-items:center;color:#0369A1;font-weight:600}
.wzangebot a:focus-visible,.wzangebot summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[data-theme="dark"] .wzangebot{background:#14232F;color:#E7EDF3;border-color:#315065}
[data-theme="dark"] .wzangebot-label,[data-theme="dark"] .wzangebot-namen,
[data-theme="dark"] .wzangebot-preis,[data-theme="dark"] .wzangebot-frei,
[data-theme="dark"] .wzangebot .wzangebot-bedingungen{color:#B1C3D2}
[data-theme="dark"] .wzangebot .wzangebot-cta{background:#38BDF8;color:#04121C}
[data-theme="dark"] .wzangebot-modul{border-color:#315065}
[data-theme="dark"] .wzangebot-status{background:transparent}
[data-theme="dark"] .wzangebot-status a{color:#38BDF8}
@media(max-width:380px){.wzangebot{padding:12px}.wzangebot h2{font-size:16px}}