/* ============================================================
   POLAR · styles.css
   Dunkelblaues, sachlich-modernes Erscheinungsbild.
   Alle Farben/Maße als Variablen — Module erfinden keine
   eigenen Farbwerte, sie nehmen die Token von hier.
   ============================================================ */

:root{
  /* Flächen */
  --grund:      #0A1322;   /* Seitenhintergrund oben */
  --grund-2:    #0D1830;   /* Seitenhintergrund unten */
  --karte:      #121F38;   /* Karten */
  --karte-2:    #182849;   /* erhabene Fläche, z. B. Icon-Blase */
  --rand:       rgba(127,178,255,.12);
  --rand-stark: rgba(127,178,255,.26);

  /* Text */
  --text:       #EAF1FB;
  --text-2:     #A9B8D0;
  --text-3:     #6F8099;

  /* Akzente */
  --akzent:     #7FB2FF;   /* Polarstern-Blau */
  --akzent-tief:#274E8D;
  --gold:       #F2C879;   /* Favoriten */
  --ok:         #6BD9A2;
  --warn:       #F2A65A;
  --alarm:      #F28B82;

  /* Maße */
  --radius:     16px;
  --radius-k:   12px;
  --schatten:   0 10px 26px rgba(2,8,20,.45);
  --tab-hoehe:  62px;
  --kopf-hoehe: 56px;
  --inhalt-breite: 720px; /* auf dem Tablet/PC nicht endlos breit werden */
}

/* ---------- Grundlage ---------- */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* hidden-Attribut gewinnt IMMER — auch gegen display:flex einer Klasse */
[hidden]{ display:none !important; }
html{ height:100%; overscroll-behavior-y:contain; } /* kein Neuladen durch Herunterwischen */
body{
  margin:0; min-height:100%;
  overscroll-behavior-y:contain;
  background:linear-gradient(180deg,var(--grund) 0%,var(--grund-2) 100%) fixed;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ margin:0; font-weight:650; }
p{ margin:0; }
a{ color:var(--akzent); }
button{ font:inherit; color:inherit; }
input,textarea,select{ font:inherit; }
::selection{ background:rgba(127,178,255,.30); }

.icon{ width:22px; height:22px; flex:none; display:block; }

/* ---------- Kopfzeile ---------- */

.kopf{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:8px;
  height:calc(var(--kopf-hoehe) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 10px 0 10px;
  background:rgba(10,19,34,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rand);
}
.kopf-marke{
  display:flex; align-items:center; gap:10px;
  font-weight:750; font-size:19px; letter-spacing:.16em;
  padding-left:6px; flex:1; min-width:0;
}
.kopf-marke .icon{ width:24px; height:24px; color:var(--akzent); }
.kopf-titel{
  flex:1; min-width:0; font-weight:650; font-size:17px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kopf-knopf{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; border-radius:12px;
  background:transparent; color:var(--text-2); cursor:pointer;
}
.kopf-knopf:active{ background:var(--karte-2); color:var(--text); }

/* ---------- Inhaltsbereich ---------- */

.ansicht{
  max-width:var(--inhalt-breite);
  margin:0 auto;
  padding:16px 16px calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + 28px);
}

/* ---------- Tab-Leiste unten ---------- */

.tableiste{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:center; gap:2px;
  padding:6px 8px calc(env(safe-area-inset-bottom) + 6px);
  background:rgba(10,19,34,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--rand);
}
.tab{
  flex:1; max-width:96px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px 4px; border:0; border-radius:12px;
  background:transparent; color:var(--text-3); cursor:pointer;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}
.tab .icon{ width:23px; height:23px; }
.tab.aktiv{ color:var(--akzent); }
.tab:active{ background:var(--karte-2); }

/* ---------- Startseite ---------- */

.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:flex-end;
  min-height:400px; padding:26px 8px 20px;
  margin-bottom:16px;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--rand);
  /* Blaupausen-Bild (Stil-Wahl von Marcus): Stern oben, Text in der
     ruhigen Kartenzone darunter; unten weich in den Seitengrund */
  background:
    linear-gradient(180deg, rgba(10,19,34,0) 0%, rgba(10,19,34,0) 55%, rgba(10,19,34,.55) 82%, var(--grund) 100%),
    url('assets/bilder/blaupause.webp') center top / cover no-repeat var(--grund);
}
.hero-titel{ font-size:30px; letter-spacing:.34em; padding-left:.34em; font-weight:800; text-shadow:0 2px 14px rgba(4,9,18,.8); }
.hero-unterzeile{ color:var(--text-2); font-size:13.5px; margin-top:4px; letter-spacing:.02em; text-shadow:0 1px 8px rgba(4,9,18,.8); }
.hero-datum{ color:var(--text-3); font-size:13px; margin-top:10px; }

.kacheln{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.kachel{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:16px 14px; min-height:118px;
  background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius); box-shadow:var(--schatten);
  color:var(--text); text-align:left; cursor:pointer;
}
.kachel:active{ background:var(--karte-2); }
.kachel-blase{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:13px;
  background:var(--karte-2); color:var(--akzent);
  border:1px solid var(--rand);
}
.kachel-name{ font-weight:700; font-size:15.5px; }
.kachel-hinweis{ color:var(--text-3); font-size:12.5px; margin-top:2px; }

/* Start-Kacheln mit Blaupausen-Motiv */
.kachel-bild{
  position:relative; padding:0; min-height:172px;
  justify-content:flex-end;
  background-size:cover; background-position:center;
  background-color:var(--karte);
  border-color:var(--rand-stark);
}
.kachel-bild::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(10,19,34,0) 38%, rgba(10,19,34,.90) 92%);
}
.kachel-schild{
  position:relative; z-index:1; padding:12px 14px 13px;
}
.kachel-bild .kachel-name{ text-shadow:0 1px 8px rgba(4,9,18,.85); }
.kachel-bild .kachel-hinweis{ color:var(--text-2); text-shadow:0 1px 6px rgba(4,9,18,.85); }

.geraete-hinweis{
  display:flex; align-items:center; gap:10px; justify-content:center;
  color:var(--text-3); font-size:12.5px; margin-top:22px; text-align:center;
}
.geraete-hinweis .icon{ width:15px; height:15px; }

/* ---------- Karten und Listen (Grundbausteine für alle Module) ---------- */

.karte{
  background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius); box-shadow:var(--schatten);
  padding:16px;
}
.karte + .karte{ margin-top:12px; }
.karten-titel{ font-size:16px; font-weight:700; margin-bottom:8px; }

.leer{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; color:var(--text-2);
  padding:44px 20px;
}
.leer .icon{ width:44px; height:44px; color:var(--text-3); }
.leer-titel{ font-weight:700; color:var(--text); font-size:16.5px; }
.leer-text{ font-size:14px; max-width:34ch; }

/* ---------- Knöpfe ---------- */

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 18px;
  border:0; border-radius:13px; cursor:pointer;
  font-weight:700; font-size:15px;
  background:var(--karte-2); color:var(--text);
  border:1px solid var(--rand);
}
.knopf:active{ filter:brightness(1.15); }
.knopf-haupt{
  background:linear-gradient(180deg,#5E93E8,#3D6DC0);
  border-color:transparent; color:#fff;
}
.knopf-gefahr{ background:rgba(242,139,130,.14); color:var(--alarm); border-color:rgba(242,139,130,.35); }
.knopf-hell{ background:#EAF1FB; color:#12233F; border-color:transparent; }
.knopf-klein{ min-height:36px; padding:0 12px; font-size:13.5px; border-radius:10px; }
.knopf-breit{ width:100%; }
.knopf .icon{ width:18px; height:18px; }

/* ---------- Formulare (ab Etappe 2 genutzt) ---------- */

.feld{ margin-bottom:14px; }
.feld-name{ display:block; font-size:13px; font-weight:650; color:var(--text-2); margin-bottom:6px; }
.eingabe{
  width:100%; min-height:46px; padding:11px 13px;
  background:var(--grund); color:var(--text);
  border:1px solid var(--rand-stark); border-radius:var(--radius-k);
  outline:none;
}
.eingabe:focus{ border-color:var(--akzent); box-shadow:0 0 0 3px rgba(127,178,255,.18); }
textarea.eingabe{ resize:vertical; min-height:120px; line-height:1.5; }

/* ---------- Hinweis-Leiste neue Version ---------- */

.update-leiste{
  position:fixed; left:12px; right:12px; z-index:60;
  top:calc(env(safe-area-inset-top) + 10px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg,#33517F,#27406A);
  border:1px solid var(--rand-stark); border-radius:14px;
  box-shadow:var(--schatten); font-size:14px; font-weight:600;
}

/* ---------- Install-Hinweiskarte ---------- */

.install-karte{ margin-bottom:14px; }
.install-karte .karten-titel{ display:flex; align-items:center; gap:8px; }
.install-karte .karten-titel .icon{ color:var(--akzent); }
.install-text{ color:var(--text-2); font-size:14px; }
.install-schritte{ margin:10px 0 0; padding-left:20px; color:var(--text-2); font-size:14px; }
.install-schritte li{ margin-bottom:4px; }
.install-knoepfe{ display:flex; gap:10px; margin-top:14px; }

/* ---------- Platzhalter kommender Etappen ---------- */

.bald-liste{ margin:10px 0 0; padding-left:0; list-style:none; color:var(--text-2); font-size:14.5px; }
.bald-liste li{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.bald-liste .icon{ width:17px; height:17px; color:var(--akzent); }

/* ---------- Toast (kurze Rückmeldung unten) ---------- */

.toastplatz{
  position:fixed; left:0; right:0; z-index:70;
  bottom:calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + 14px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px;
  max-width:88vw; padding:11px 16px;
  background:#1D2E50; border:1px solid var(--rand-stark);
  border-radius:14px; box-shadow:var(--schatten);
  font-size:14px; font-weight:600;
  animation:toast-rein .22s ease;
}
.toast .icon{ width:17px; height:17px; }
.toast-ok .icon{ color:var(--ok); }
.toast-alarm .icon{ color:var(--alarm); }
.toast-info .icon{ color:var(--akzent); }
.toast.weg{ animation:toast-raus .22s ease forwards; }
@keyframes toast-rein{ from{ opacity:0; transform:translateY(8px);} }
@keyframes toast-raus{ to{ opacity:0; transform:translateY(8px);} }

/* ---------- Dialog (Bestätigen/Hinweis) ---------- */

.dialog-schleier{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,9,18,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:schleier-rein .18s ease;
}
@keyframes schleier-rein{ from{ opacity:0; } }
.dialog{
  width:100%; max-width:480px;
  margin:0 10px calc(env(safe-area-inset-bottom) + 12px);
  background:var(--karte); border:1px solid var(--rand-stark);
  border-radius:20px; box-shadow:var(--schatten);
  padding:20px 18px;
  animation:dialog-rein .22s ease;
}
@keyframes dialog-rein{ from{ opacity:0; transform:translateY(24px);} }
.dialog-titel{ font-size:17px; font-weight:750; margin-bottom:6px; }
.dialog-text{ color:var(--text-2); font-size:14.5px; white-space:pre-line; }
.dialog-knoepfe{ display:flex; gap:10px; margin-top:18px; }
.dialog-knoepfe .knopf{ flex:1; }

/* ---------- Suchfeld und Filter-Chips ---------- */

.suchfeld{ position:relative; margin-bottom:10px; }
.suchfeld .icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--text-3); width:18px; height:18px; pointer-events:none;
}
.suchfeld .eingabe{ padding-left:42px; }

.chips{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; padding:7px 13px; border-radius:999px;
  border:1px solid var(--rand-stark); background:transparent;
  color:var(--text-2); font-size:13px; font-weight:650; cursor:pointer;
}
.chip.aktiv{ background:var(--akzent-tief); border-color:transparent; color:#fff; }

/* ---------- Einträge (Listenkarten) ---------- */

.eintrag{
  display:flex; align-items:flex-start; gap:8px;
  background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius); box-shadow:var(--schatten);
  padding:13px 10px 13px 14px; margin-bottom:10px; cursor:pointer;
}
.eintrag:active{ background:var(--karte-2); }
.eintrag-mitte{ flex:1; min-width:0; }
.eintrag-titel{ font-weight:700; font-size:15.5px; overflow-wrap:anywhere; }
.eintrag-unter{
  color:var(--text-3); font-size:12.5px; margin-top:3px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  background:var(--karte-2); border:1px solid var(--rand);
  color:var(--akzent); font-size:11.5px; font-weight:650;
}
.eintrag-anriss{
  color:var(--text-2); font-size:13.5px; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stern-knopf{
  flex:none; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:12px; background:transparent;
  color:var(--text-3); cursor:pointer;
}
.stern-knopf.an{ color:var(--gold); }
.stern-knopf.an .icon path{ fill:currentColor; }
.stern-knopf .icon{ width:20px; height:20px; }

/* ---------- Schwebe-Knopf (neuer Eintrag) ---------- */

.fab{
  position:fixed; right:18px; z-index:30;
  bottom:calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + 18px);
  width:58px; height:58px; border-radius:19px; border:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#5E93E8,#3D6DC0); color:#fff;
  box-shadow:0 10px 24px rgba(46,94,168,.5); cursor:pointer;
}
.fab:active{ filter:brightness(1.15); }
.fab .icon{ width:24px; height:24px; }

/* ---------- Formular-Feinheiten ---------- */

.feld-halb{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* Bricht eine Beschriftung um, bleiben die Eingabefelder trotzdem auf
   gleicher Höhe: Beschriftung füllt den Platz, Feld sitzt unten bündig */
.feld-halb > div{ display:flex; flex-direction:column; }
.feld-halb .feld-name{ flex:1; }
.formular-knoepfe{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.entwurf-hinweis{
  display:flex; align-items:center; gap:8px;
  color:var(--warn); font-size:13.5px; margin-bottom:12px;
}
.entwurf-hinweis .icon{ width:16px; height:16px; }

/* ---------- Bausteine: Hilfe, Lücken, Vorschau ---------- */

.hilfe-box{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(127,178,255,.08); border:1px solid var(--rand);
  border-radius:var(--radius-k); padding:11px 13px;
  color:var(--text-2); font-size:13.5px; margin-bottom:14px;
}
.hilfe-box .icon{ width:17px; height:17px; color:var(--akzent); flex:none; margin-top:1px; }

.luecken-zeile{ display:flex; flex-wrap:wrap; gap:7px; min-height:26px; }
.luecken-zeile .leer-text{ font-size:13px; color:var(--text-3); }

.vorschau{
  background:var(--grund); border:1px solid var(--rand);
  border-radius:var(--radius-k); padding:13px;
  font-size:14.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere;
}
mark.luecke-offen, mark.luecke-voll{
  border-radius:6px; padding:1px 6px; font-weight:650;
}
mark.luecke-offen{
  background:rgba(242,166,90,.16); color:var(--warn);
  border:1px dashed rgba(242,166,90,.55);
}
mark.luecke-voll{
  background:rgba(107,217,162,.14); color:var(--ok);
  border:1px solid rgba(107,217,162,.35);
}

/* ---------- Infothek: Segmente, Dateianzeige ---------- */

.segmente{ display:flex; gap:6px; }
.segment{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; border-radius:12px; cursor:pointer;
  background:var(--grund); border:1px solid var(--rand-stark);
  color:var(--text-2); font-weight:650; font-size:14px;
}
.segment .icon{ width:17px; height:17px; }
.segment.aktiv{ background:var(--akzent-tief); border-color:transparent; color:#fff; }
.segment:disabled{ opacity:.55; cursor:default; }

.feld-hinweis{ color:var(--text-3); font-size:12.5px; margin-top:7px; }
.feld-hinweis-hoch{ margin:-8px 0 14px; }

.art-zeichen{ display:inline-flex; align-items:center; gap:5px; }
.art-zeichen .icon{ width:14px; height:14px; }
.nur-online{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(242,166,90,.13); border:1px solid rgba(242,166,90,.4);
  color:var(--warn); font-size:11px; font-weight:650;
}

.datei-zeile{
  display:flex; align-items:center; gap:9px; margin-bottom:10px;
  color:var(--text-2); font-size:14px; min-height:24px;
}
.datei-zeile .icon{ width:18px; height:18px; color:var(--akzent); flex:none; }

.datei-bild{ width:100%; border-radius:var(--radius-k); display:block; }
.datei-rahmen{
  width:100%; height:70vh; border:1px solid var(--rand);
  border-radius:var(--radius-k); background:#fff;
}

/* ---------- Tagebuch: Monatsgruppen, Laufend-Zeichen ---------- */

.monats-titel{
  font-size:13px; font-weight:750; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3);
  margin:18px 2px 10px;
}
.monats-titel:first-child{ margin-top:4px; }
.laeuft-zeichen{
  display:inline-block; vertical-align:2px; margin-left:6px;
  padding:2px 9px; border-radius:999px;
  background:rgba(107,217,162,.14); border:1px solid rgba(107,217,162,.4);
  color:var(--ok); font-size:11px; font-weight:700;
}
.pfeil-rechts{
  transform:rotate(180deg); align-self:center;
  width:17px; height:17px; color:var(--text-3); flex:none;
}

/* ---------- Anhänge (Tagebuch) und Aufnahme-Dialog ---------- */

.anhang-knoepfe{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.anhang-knoepfe .knopf{ flex:1; min-width:110px; }
.anhang-leer{ font-size:13.5px; color:var(--text-3); }

.anhang-zeile{
  display:flex; align-items:center; gap:11px;
  background:var(--grund); border:1px solid var(--rand);
  border-radius:var(--radius-k); padding:9px 10px; margin-bottom:8px;
}
.anhang-thumb{
  width:52px; height:52px; object-fit:cover; border-radius:9px;
  flex:none; cursor:pointer; background:var(--karte-2);
}
.anhang-blase{
  width:44px; height:44px; flex:none; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--karte-2); color:var(--akzent); border:1px solid var(--rand);
}
.anhang-mitte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.anhang-mitte b{ font-size:14px; overflow-wrap:anywhere; }
.anhang-mitte span{ color:var(--text-3); font-size:12px; }
.anhang-audio{ width:100%; height:36px; margin-top:6px; }
.anhang-anzahl{
  display:inline-flex; align-items:center; gap:4px; align-self:center;
  color:var(--text-3); font-size:12.5px; font-weight:650; flex:none;
}
.anhang-anzahl .icon{ width:14px; height:14px; }

.aufnahme-anzeige{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:34px; font-weight:750; font-variant-numeric:tabular-nums;
  padding:14px 0 6px;
}
.aufnahme-punkt{
  width:14px; height:14px; border-radius:50%;
  background:var(--alarm);
  animation:aufnahme-blinken 1.1s ease-in-out infinite;
}
@keyframes aufnahme-blinken{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.foto-schleier{ align-items:center; cursor:zoom-out; }
.foto-gross{
  max-width:94vw; max-height:86vh; border-radius:12px;
  box-shadow:var(--schatten);
}

/* ---------- Einstellungen: Zeilen, Schalter, Pfeile ---------- */

.stell-zeile{
  display:flex; align-items:center; gap:9px;
  padding:8px 0; border-bottom:1px solid var(--rand);
}
.stell-zeile:last-child{ border-bottom:0; }
.stell-zeile .kachel-blase{ width:38px; height:38px; border-radius:11px; }
.stell-name{ flex:1; min-width:0; font-weight:650; font-size:15px; }
.stell-pfeil{
  width:38px; height:38px; border:1px solid var(--rand); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grund); color:var(--text-2); cursor:pointer;
}
.stell-pfeil .icon{ width:16px; height:16px; transform:rotate(90deg); }
.stell-pfeil.runter .icon{ transform:rotate(-90deg); }
.stell-pfeil:disabled{ opacity:.3; cursor:default; }

.schalter{
  width:52px; height:31px; flex:none; border-radius:999px; border:0;
  background:var(--karte-2); border:1px solid var(--rand-stark);
  position:relative; cursor:pointer; transition:background .18s ease;
}
.schalter span{
  position:absolute; top:3px; left:3px; width:23px; height:23px;
  border-radius:50%; background:var(--text-3); transition:all .18s ease;
}
.schalter.an{ background:var(--akzent-tief); border-color:transparent; }
.schalter.an span{ left:24px; background:#fff; }

.dialog-eingabe{ margin-top:12px; }

.daten-seite p{ color:var(--text-2); font-size:14.5px; line-height:1.6; margin:0 0 13px; }
.daten-seite p:last-child{ margin-bottom:0; }
.daten-seite b{ color:var(--text); }
.daten-seite .karten-titel{ display:flex; align-items:center; gap:9px; }
.daten-seite .karten-titel .icon{ color:var(--akzent); }

/* ---------- PIN-Sperr-Schleier ---------- */

.sperr-schleier{
  position:fixed; inset:0; z-index:200;
  /* Blaupausen-Bild als Vorhang, unten abgedunkelt für die PIN-Eingabe */
  background:
    linear-gradient(180deg, rgba(10,19,34,.30) 0%, rgba(10,19,34,.72) 55%, var(--grund-2) 100%),
    url('assets/bilder/blaupause.webp') center top / cover no-repeat var(--grund);
  display:flex; align-items:flex-end; justify-content:center;
  padding:24px 24px 12vh;
}
.sperr-mitte{
  width:100%; max-width:320px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.sperr-titel{ font-size:18px; font-weight:750; }
.sperr-eingabe{ text-align:center; font-size:22px; letter-spacing:.3em; }
.sperr-meldung{ min-height:20px; color:var(--warn); font-size:13.5px; font-weight:650; }
.sperr-oder{
  color:var(--text-3); font-size:12px; font-weight:650;
  letter-spacing:.06em; text-transform:uppercase; margin-top:2px;
}

/* ---------- Gesetzes-Leser ---------- */

.nachschlag-kacheln{ margin-bottom:14px; }
.nachschlag-kacheln .kachel{ min-height:92px; }

.gesetz-kurz{
  color:var(--akzent); font-weight:800; font-size:16.5px;
  letter-spacing:.02em; overflow-wrap:anywhere;
}
.gesetz-lang{
  font-size:13.5px; font-weight:600; color:var(--text-2);
  margin-top:2px; overflow-wrap:anywhere;
}
.gesetz-kopf .karten-titel{ font-size:19px; }
.gesetz-kopf a{ color:var(--akzent); }

.gesetz-norm{
  background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius-k); margin-bottom:7px; overflow:hidden;
}
.gesetz-norm-kopf{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border:0; background:transparent;
  color:var(--text); text-align:left; cursor:pointer;
}
.gesetz-norm-kopf:active{ background:var(--karte-2); }
.gesetz-nr{ flex:none; font-weight:800; color:var(--akzent); font-size:14px; min-width:56px; }
.gesetz-normtitel{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--text-2); overflow-wrap:anywhere; }
.klapp-pfeil{ width:15px; height:15px; color:var(--text-3); transform:rotate(-90deg); transition:transform .15s ease; flex:none; }
.gesetz-norm.offen .klapp-pfeil{ transform:rotate(90deg); }
.gesetz-inhalt{
  padding:2px 14px 13px; border-top:1px solid var(--rand);
  background:var(--grund);
}
.gesetz-absatz{
  margin:9px 0 0; font-size:14.5px; line-height:1.6; color:var(--text);
  overflow-wrap:anywhere;
}
.gesetz-absatz b{ color:var(--akzent); }
.einzug-1{ padding-left:16px; }
.einzug-2{ padding-left:32px; }
.einzug-3{ padding-left:48px; }
.einzug-4{ padding-left:64px; }

/* ---------- Wissen (Erste Hilfe, Handy-Tricks) ---------- */

.nachschlag-kacheln .kachel:last-child:nth-child(odd){ grid-column:1 / -1; }
.nachschlag-kacheln .kachel-bild:last-child:nth-child(odd){
  min-height:132px;
  background-position:center 32%; /* breite Kachel: Motiv mittig anschneiden */
}

.wissen-zeichen{ font-size:20px; flex:none; line-height:1; align-self:center; }
.wissen-titelblock{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wissen-titelblock b{ font-size:14.5px; }
.wissen-titelblock span{ color:var(--text-3); font-size:12px; }
.wissen-text{ font-size:14px; line-height:1.6; color:var(--text); padding-top:9px; }
.wissen-text b{ color:var(--text); }

.wissen-schritte{ margin:8px 0 0; padding-left:20px; }
.wissen-schritte li{ margin:5px 0; }

.wissen-box{
  margin-top:10px; padding:8px 11px;
  border-left:3px solid var(--akzent);
  background:rgba(127,178,255,.08);
  border-radius:0 9px 9px 0; font-size:12.5px; line-height:1.55;
}
.wissen-box.wb-amber{ border-color:var(--warn); background:rgba(242,166,90,.10); }
.wissen-box.wb-red{ border-color:var(--alarm); background:rgba(242,139,130,.10); }

/* Notruf-Knöpfe und Zwischentitel der Erste-Hilfe-Seiten */
.eh-notruf{ display:flex; gap:9px; margin:4px 0 12px; }
.eh-notruf-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:10px 6px; border-radius:13px; text-decoration:none;
  background:rgba(242,139,130,.13); color:var(--alarm);
  border:1px solid rgba(242,139,130,.35);
}
.eh-notruf-btn span{ font-size:25px; font-weight:800; line-height:1; }
.eh-notruf-btn small{ font-size:10.5px; font-weight:600; color:var(--text-3); text-align:center; }
.eh-notruf-btn.eh-blau{ background:rgba(127,178,255,.12); color:var(--akzent); border-color:rgba(127,178,255,.35); }
.eh-h{
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); margin:13px 0 5px;
}
.eh-w{
  background:var(--karte-2); border-radius:10px; padding:9px 12px;
  font-size:13px; font-weight:700;
}

/* Schemazeichnungen (aus der BeDoE-App, Strichfarben über Klassen) */
.eh-figs{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:11px 0 3px; }
.eh-figs.eh-1{ grid-template-columns:1fr; max-width:250px; margin-inline:auto; }
.eh-fig{
  margin:0; background:var(--karte-2); border:1px solid var(--rand);
  border-radius:11px; padding:9px 9px 8px;
}
.eh-fig svg{ width:100%; height:138px; display:block; }
.eh-figs > .eh-fig:last-child:nth-child(odd),
.eh-figs > .eh-fig.eh-breit{ grid-column:1 / -1; }
.eh-figs > .eh-fig:last-child:nth-child(odd) svg{ max-width:165px; margin-inline:auto; }
.eh-figs > .eh-fig.eh-breit svg{ height:158px; }
.eh-fig-cap{ font-size:11.5px; line-height:1.4; color:var(--text-2); margin-top:6px; }
.eh-fig-nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; margin-right:5px;
  background:var(--akzent-tief); color:#fff; font-size:10px; font-weight:800;
}
.eh-fig .k{ fill:none; stroke:var(--text-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.eh-fig .f{ fill:rgba(111,128,153,.15); stroke:none; }
.eh-fig .a{ fill:none; stroke:var(--alarm); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.eh-fig .af{ fill:rgba(242,139,130,.24); stroke:none; }
.eh-fig .p{ fill:none; stroke:var(--akzent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.eh-fig .t{ fill:var(--text-3); font-size:11px; font-weight:700; }

/* ---------- Nachschlagewerke ---------- */

.ns-zeile{
  display:flex; align-items:center; gap:11px;
  background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius-k); padding:10px 12px; margin-bottom:6px;
}
.ns-zeile .gesetz-nr{ min-width:52px; overflow-wrap:anywhere; }
.ns-klick{ cursor:pointer; }
.ns-klick:active{ background:var(--karte-2); }
.ns-rest{ flex:1; min-width:0; font-size:14px; overflow-wrap:anywhere; }
.ns-punkt{ color:var(--text-3); font-size:12.5px; }
.ns-ort{ width:18px; height:18px; color:var(--akzent); flex:none; }
.quelle-zeile{
  color:var(--text-3); font-size:10.5px; line-height:1.5;
  border-top:1px solid var(--rand); padding-top:10px; margin-top:16px;
}
.hilfe-box .icon{ vertical-align:-3px; }

/* ---------- Kleinkram ---------- */

.zeile-abstand{ height:12px; }
.nur-lesbar{ user-select:text; -webkit-user-select:text; }
:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; }

/* ---------- Bereichskopf und flüssige Übergänge ---------- */

.bereich-kopf{
  position:relative; overflow:hidden;
  min-height:148px; margin-bottom:14px;
  border-radius:var(--radius); border:1px solid var(--rand-stark);
  background-size:cover; background-position:center;
  background-color:var(--karte);
  display:flex; align-items:flex-end; padding:12px 16px;
  box-shadow:var(--schatten);
}
.bereich-kopf::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(10,19,34,0) 40%, rgba(10,19,34,.86) 94%);
}
.bereich-kopf-name{
  position:relative; z-index:1;
  font-weight:800; font-size:18.5px;
  text-shadow:0 1px 8px rgba(4,9,18,.85);
}

/* Kopf- und Tab-Leiste bleiben beim Ansichtswechsel ruhig stehen,
   nur der Inhalt (und das wandernde Kachel-Motiv) bewegen sich */
.kopf{ view-transition-name:kopfzeile; }
.tableiste{ view-transition-name:tableiste; }
::view-transition-group(*){
  animation-duration:.32s;
  animation-timing-function:cubic-bezier(.22,.8,.3,1);
}
::view-transition-old(root), ::view-transition-new(root){
  animation-duration:.24s;
}

/* ---------- Stil-Bilder (Blaupause) ---------- */

.leer-bild{
  width:min(230px, 64vw); aspect-ratio:1;
  border-radius:18px; border:1px solid var(--rand);
  box-shadow:var(--schatten); display:block;
}
.seiten-bild{
  width:min(220px, 60vw); aspect-ratio:1;
  border-radius:18px; border:1px solid var(--rand);
  box-shadow:var(--schatten); display:block;
  margin:0 auto 16px;
}
.karten-bild-klein{
  float:right; width:74px; aspect-ratio:1;
  border-radius:12px; border:1px solid var(--rand);
  margin:0 0 8px 12px;
}

/* Auf größeren Bildschirmen: Kacheln dreispaltig, Querformat-Blaupause */
@media (min-width:600px){
  .kacheln{ grid-template-columns:1fr 1fr 1fr; }
}
@media (min-width:700px){
  .hero{
    background:
      linear-gradient(180deg, rgba(10,19,34,0) 0%, rgba(10,19,34,0) 55%, rgba(10,19,34,.55) 82%, var(--grund) 100%),
      url('assets/bilder/blaupause-quer.webp') center / cover no-repeat var(--grund);
    min-height:360px;
  }
}