:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #efece4;
  --text: #1c1b19;
  --muted: #5f5b53;
  --line: #dcd7cb;
  --accent: #c8102e;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6e9;
  --ok: #1f7a4d;
  --ok-soft: #e1f2e8;
  --warn: #8a5a00;
  --warn-soft: #fbf0d9;
  --radius: 20px;
  --radius-sm: 14px;
  --eisblau: #cfe6f2; --flieder: #dfd2f2; --moos: #d5e8cf; --sand: #f1e6c9; --rose: #f9d7dc; --kachel-ink: #1c1b19;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Zart (Auftrag 2026-10-04-pause-umbau, Punkt 8): erst Pause, die App folgt später mit einer Änderung */
  --z-serif: "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --z-hair: rgb(38 40 44 / .12);
  --z-karte: #ffffff;
  --z-schatten: 0 1px 2px rgb(0 0 0 / .035);
  --eis: #eef3f6; --eis-ink: #3e5866; --eis-strich: rgb(62 88 102 / .22); --eis-ruhig: #e3ebf0;
  --z-haupt-groesse: 12.5px; --z-haupt-gewicht: 500; --z-haupt-pad: 6px 11px; --z-radius: 6px;
  --z-neben: var(--muted); --z-titel-gewicht: 400; --z-h-gewicht: 300; --z-ok: #4c8a66;
  --lumi-ton: #a3500f; /* Sorte der Lumi (Alltag, App …) als Schrift: 4,5 : 1 auf Weiß */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #141517; --surface-2: #1f2124; --text: #ecebe7; --muted: #a3a09a;
    --line: #33363b; --accent: #ff4d63; --accent-ink: #1a0005; --accent-soft: #3a1419;
    --ok: #5fd39a; --ok-soft: #13301f; --warn: #f0c060; --warn-soft: #362a0e;
    --shadow: none; color-scheme: dark; --line: #26282c; --z-hair: rgb(232 231 227 / .14); --z-karte: #141517; --z-schatten: none; --eis: #1d2529; --eis-ink: #a9c4d1; --eis-strich: rgb(169 196 209 / .25); --eis-ruhig: #171e22; --z-ok: #79b893; --lumi-ton: #f0a060;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #141517; --surface-2: #1f2124; --text: #ecebe7; --muted: #a3a09a;
  --line: #33363b; --accent: #ff4d63; --accent-ink: #1a0005; --accent-soft: #3a1419;
  --ok: #5fd39a; --ok-soft: #13301f; --warn: #f0c060; --warn-soft: #362a0e;
  --shadow: none; color-scheme: dark; --line: #26282c; --z-hair: rgb(232 231 227 / .14); --z-karte: #141517; --z-schatten: none; --eis: #1d2529; --eis-ink: #a9c4d1; --eis-strich: rgb(169 196 209 / .25); --eis-ruhig: #171e22; --z-ok: #79b893; --lumi-ton: #f0a060;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 750; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* Marke: rot-weiß-rot als Balken */
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 850; letter-spacing: .08em; text-decoration: none; }
.brand-flag { width: 22px; height: 16px; border-radius: 3px; background: linear-gradient(#c8102e 0 33.3%, #fff 33.3% 66.6%, #c8102e 66.6%); /* Flagge bleibt rot-weiß-rot, auch mit Skin */ box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn-sm { padding: .4rem .8rem; font-size: .9rem; }
.btn:disabled { opacity: .55; cursor: default; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.tag-pro { background: var(--accent-soft); color: var(--accent); }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- Landingpage ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.site-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.hero { padding: 3.5rem 0 3rem; }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 42rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.section { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.feature-num { font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: .9rem; }
.price { font-size: 1.8rem; font-weight: 800; margin: .3rem 0; }
.price small { font-size: .95rem; font-weight: 500; color: var(--muted); }
.plan ul { padding-left: 1.1rem; margin: .5rem 0 0; }
.plan li { margin: .25rem 0; }
.plan.featured { border: 2px solid var(--accent); }
/* Preise: untereinander am Handy, zwei mal zwei auf mittleren, vier nebeneinander auf breiten Schirmen */
.grid-preise { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-preise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-preise { grid-template-columns: repeat(4, 1fr); } }
.plan .tag { font-size: .7rem; vertical-align: middle; }
.grid-preise .price small { display: block; margin-top: .15rem; }
.site-foot { padding: 2rem 0 3rem; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); }

/* ---------- App ---------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 1.1rem .8rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1rem; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav svg { width: 18px; height: 18px; flex: none; }
.download { margin-top: auto; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .75rem; font-size: .8rem; background: var(--surface-2); }
.download[hidden] { display: none; }
.download + .status { margin-top: 0; }
.download .dl-titel { font-weight: 600; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download .dl-zeile { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-top: .25rem; color: var(--muted); }
.download .progress { margin: .4rem 0 0; height: 5px; }
.download .btn { margin-top: .5rem; }
.status { margin-top: auto; font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: .3rem; padding: .5rem .75rem; }
.status-zeile { display: flex; align-items: center; gap: .5rem; min-width: 0; }
#net-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.status-zeile#app-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.status .neu { margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.status .neu:hover { color: var(--text); }
.status .neu.dreht svg { animation: dreh 1s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--ok); }
.dot.off { background: var(--warn); }

.main { padding: 2rem clamp(16px, 4vw, 2.5rem) 4rem; min-width: 0; }
.main.main-lesen { padding: .75rem 1rem 1rem; display: flex; flex-direction: column; height: 100vh; }
.lesen-kopf { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.lesen-rahmen { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head p { margin: 0; color: var(--muted); }

.proto-banner { background: var(--warn-soft); color: var(--warn); font-size: .85rem; padding: .5rem 16px; text-align: center; }
.proto-banner a { font-weight: 600; }

/* Notrufe */
.notruf { display: flex; gap: 1rem; align-items: flex-start; }
.notruf-nr { font-family: var(--mono); font-weight: 800; font-size: 1.6rem; color: var(--accent); min-width: 4.2rem; text-decoration: none; }
.notruf-nr.long { font-size: 1rem; padding-top: .45rem; }
.notruf h3 { margin: .1rem 0 .2rem; overflow-wrap: anywhere; hyphens: auto; }
.notruf > div { min-width: 0; }
.notruf p { margin: 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; } /* große Schrift: lange Wörter trennen */

/* Sirenen */
.siren svg { width: 100%; height: 44px; display: block; margin: .5rem 0 .75rem; }
.siren path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }

/* Checkliste */
.check { list-style: none; padding: 0; margin: 0; }
.check li { border-top: 1px solid var(--line); }
.check li:first-child { border-top: 0; }
.check label { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--accent); flex: none; }
.check input:checked + span { color: var(--muted); text-decoration: line-through; }
.progress { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--ok); transition: width .3s; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.25rem 1.6rem; border-left: 2px solid var(--line); margin-left: .4rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* Bibliothek */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filters button { border: 1px solid var(--z-hair); background: transparent; color: var(--muted); border-radius: var(--z-radius); padding: 0 .8rem; min-height: 40px; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pkg { display: flex; flex-direction: column; gap: .5rem; }
.pkg-head { display: flex; justify-content: space-between; gap: .5rem; align-items: start; }
.pkg p { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; }
.pkg-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .25rem; }
.storage { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.storage .progress { flex: 1; min-width: 160px; }

/* Karte */
#karte { height: min(70vh, 620px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.leaflet-container { font: inherit; }
/* Quellenzeile (Nr. 26): Leaflets halbdurchsichtiges Weiß mit blauen Links hat dunkel zu wenig Kontrast; eigene Fläche, Text in Schriftfarbe, Links unterstrichen */
.leaflet-container .leaflet-control-attribution { background: var(--surface); color: var(--text); }
.leaflet-container .leaflet-control-attribution a { color: inherit; text-decoration: underline; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label, .legend { font-weight: 500; }
.seg { display: inline-flex; border: 1px solid var(--z-hair); border-radius: var(--z-radius); padding: 2px; background: transparent; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 0 .8rem; min-height: 40px; border-radius: 4px; font: inherit; font-size: .9rem; font-weight: 400; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 0; border-top: 1px solid var(--line); } /* große Schrift: umbrechen statt überlaufen */
.switch input { width: 2.6rem; height: 1.4rem; accent-color: var(--accent); }
input[type="time"], select, input[type="text"], input[type="email"], input[type="search"], textarea { font: inherit; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.changelog { list-style: none; padding: 0; margin: 0; }
.changelog li { padding: .7rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; }
.changelog li:first-child { border-top: 0; }

/* KI */
.chat { display: flex; flex-direction: column; gap: .75rem; }
.bubble { padding: .75rem 1rem; border-radius: 14px; max-width: 46rem; }
.bubble.user { background: var(--accent-soft); align-self: flex-end; }
.bubble.bot { background: var(--surface-2); }
.chat-form { display: flex; gap: .5rem; margin-top: 1rem; }
.chat-form input { flex: 1; }

/* Mobil */
.menu-btn { display: none; }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 1000; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; }
  .sidebar.open { transform: none; visibility: visible; box-shadow: 0 0 40px rgb(0 0 0 / .25); }
  .menu-btn { display: inline-flex; }
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: .75rem 16px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 900; }
  .main { padding-top: 1.25rem; }
  .changelog li { grid-template-columns: 1fr; gap: .1rem; }
}
@media (min-width: 821px) { .topbar { display: none; } }

/* Anmeldung */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--accent); flex: none; }
.field input { width: 100%; }
.form-msg { margin: .75rem 0 0; font-weight: 600; }
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--accent); }
.legal { max-width: 46rem; }
.legal h2 { margin-top: 2rem; font-size: 1.2rem; }

/* Tresor */
.tresor, .notizbuch { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .tresor, .notizbuch { grid-template-columns: 1fr; } }
.tresor-liste { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.tresor-liste button { text-align: left; border: 0; background: none; padding: .55rem .7rem; border-radius: 10px; color: var(--text); cursor: pointer; font: inherit; }
.tresor-liste button:hover { background: var(--surface-2); }
.tresor-liste button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.tresor-liste .muted { display: block; font-size: .8rem; font-weight: 400; }
.tresor input[type="text"], .tresor input[type="password"], .tresor textarea, .tresor select, .notizbuch input[type="text"], .notizbuch textarea { width: 100%; box-sizing: border-box; }
.tresor input[type="password"] { font: inherit; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.tresor .titel, .notizbuch .titel { font-size: 1.2rem; font-weight: 500; }
.tresor textarea, .notizbuch textarea { min-height: 40vh; resize: vertical; font: inherit; line-height: 1.5; }
.code-anzeige { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .08em; padding: 1rem; border: 2px dashed var(--accent); border-radius: 12px; text-align: center; margin: 1rem 0; user-select: all; }
.code-gruppen { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 1.1rem; }
.code-gruppen input { width: 5.5em; text-align: center; font-family: var(--mono); text-transform: uppercase; }
.anhang { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.anhang-vorschau img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.anhang-vorschau iframe { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.warnkasten { background: var(--accent-soft); border-radius: 12px; padding: .8rem 1rem; color: var(--text); }

textarea { border-radius: var(--radius-sm) !important; }
.btn-primary { box-shadow: 0 6px 18px rgb(200 16 46 / .25); }
.card { border-radius: var(--radius); }
.nav a { border-radius: 12px; }

/* ---------- Kacheln (Startseite) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
@media (min-width: 1100px) { .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kachel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; min-height: 140px; padding: 1rem 1rem .9rem; border-radius: 16px; text-decoration: none; color: var(--kachel-ink); background: var(--kf, var(--eisblau)); transition: transform .12s; }
.kachel:hover { transform: translateY(-2px); }
.kachel:active { transform: scale(.98); }
.kachel-ikon { width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .5); display: inline-flex; align-items: center; justify-content: center; }
.kachel-ikon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.kachel-pfeil { position: absolute; top: 1rem; right: 1rem; width: 20px; height: 20px; opacity: .8; }
.kachel strong { font-size: 1.05rem; font-weight: 500; line-height: 1.2; display: block; overflow-wrap: anywhere; hyphens: auto; }
.kachel .muted { color: rgb(28 27 25 / .74); font-size: .85rem; display: block; margin-top: .15rem; }
.kachel-rose { --kf: var(--rose); } .kachel-moos { --kf: var(--moos); } .kachel-eisblau { --kf: var(--eisblau); } .kachel-flieder { --kf: var(--flieder); } .kachel-sand { --kf: var(--sand); }

/* Bühne oben: Wesen + Bereit */
.buehne-kopf { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem; border-radius: 18px; background: var(--z-karte); border: 0; box-shadow: var(--z-schatten); }
.buehne-kopf .wesen-buehne { border-radius: 20px; box-shadow: 0 0 0 6px var(--surface-2), 0 8px 24px rgb(0 0 0 / .18); }
.bereit-kopf { min-width: 0; }
.bereit-kopf .bereit-zahl { font-size: 3.6rem; }
.bereit-kopf .progress { height: 4px; }
@media (max-width: 720px) { .buehne-kopf { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1rem; } .buehne-kopf .wesen { --wb: 190px !important; } .buehne-kopf .bereit-quelle { text-align: left; } .bereit-kopf { width: 100%; } .bereit-kopf .bereit-zahl { font-size: 3rem; } }
.gruss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.gruss h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.8rem); }
.gruss p { margin: .1rem 0 0; }

/* ---------- Tab-Leiste (Handy) ---------- */
.tabbar { display: none; }
.sheet-hinter { display: none; }
@media (max-width: 820px) {
  .topbar { padding-top: max(.75rem, env(safe-area-inset-top)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding: .35rem .25rem max(.35rem, env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .68rem; font-weight: 500; text-decoration: none; border-radius: 12px; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"], .tabbar button[aria-expanded="true"] { color: var(--accent); }
  .main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .sidebar { inset: auto 0 0 0; width: auto; height: auto; max-height: 80vh; transform: translateY(100%); border-right: 0; border-radius: 24px 24px 0 0; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); overflow: auto; }
  .sidebar.open { transform: none; }
  .sidebar .brand { display: none; }
  .sheet-hinter { display: block; position: fixed; inset: 0; z-index: 940; background: rgb(0 0 0 / .45); border: 0; }
  .sheet-hinter[hidden] { display: none; }
  .wesen-toast { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Module: Katalogkarte, Schieber, Slideshow, Löschen, Ansicht in der Sandbox, Druck ---------- */
.modul-steuerung { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
.modul-karte .btn, .modul-kopf .btn { min-height: 44px; min-width: 44px; }
.schieber { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .4rem; background: none; border: 0; color: inherit; font: inherit; font-weight: 500; cursor: pointer; border-radius: 999px; }
.schieber:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.schieber:disabled { cursor: progress; opacity: .8; }
.schieber-bahn { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--line); transition: background .2s; flex: none; }
.schieber-knopf { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .2s; }
.schieber[aria-checked="true"] .schieber-knopf { transform: translateX(18px); }
.schieber[aria-checked="true"] .schieber-bahn { background: var(--ok); }
/* „laden“ ist grün, auch bevor er umgelegt ist: das ist Miks Vorgabe für den Katalog */
.schieber-laden .schieber-bahn { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
.schieber-laden .schieber-text { color: var(--ok); }
.schieber-laden[aria-checked="true"] .schieber-bahn { background: var(--ok); }
/* Vorschau (0.7.2): Titelbild in der Karte, großes Fenster über der Seite (am Handy ganzer Bildschirm) */
.vorschau-titel { display: grid; gap: .4rem; margin: 0 0 .7rem; }
.vorschau-titel--leer { min-height: 3rem; place-items: center; border: 1px solid var(--z-hair); border-radius: var(--z-radius); }
.vorschau-titelbild { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--z-hair); border-radius: var(--z-radius); background: var(--surface-2); overflow: hidden; cursor: zoom-in; color: inherit; font: inherit; }
.vorschau-titelbild img, .vorschau-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vorschau-ansehen { justify-self: start; min-height: 44px; padding: 0 .1rem; background: none; border: 0; color: var(--eis-ink); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vorschau-fenster { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.vorschau-fenster[hidden] { display: none; }
.vorschau-hinter { position: absolute; inset: 0; background: rgb(20 18 16 / .5); animation: blatt-hinter .18s ease-out; }
.vorschau-dialog { position: relative; display: flex; flex-direction: column; width: min(760px, calc(100vw - 48px)); max-height: min(92vh, 900px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text); border-radius: 18px; box-shadow: 0 16px 50px rgb(0 0 0 / .25); padding: 10px 20px max(18px, env(safe-area-inset-bottom)); animation: blatt-auf .22s ease-out; }
.vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--z-hair); margin: 0 -8px 14px 0; padding-bottom: 6px; }
.vorschau-kopf h2 { font-family: var(--z-serif); font-weight: 400; font-size: 1.15rem; margin: 0; }
.vorschau-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: none; border: 0; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; border-radius: var(--z-radius); }
.vorschau-x:focus { outline: none; } .vorschau-x:focus-visible { outline: 1.5px solid var(--eis-ink); outline-offset: -4px; }
.vorschau-seite { margin: 0; touch-action: pan-y; user-select: none; }
.vorschau-bild { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; max-height: 56vh; background: var(--surface-2); border-radius: var(--z-radius); overflow: hidden; }
.vorschau-bild img { pointer-events: none; }
/* Antippen zum Vergrößern (Nr. 23): eingepasst ist das Bild ein Knopf über die ganze Fläche; groß steht es in voller Größe und lässt sich verschieben */
.vorschau-zoom { position: absolute; inset: 0; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; border-radius: var(--z-radius); }
.vorschau-zoom:focus-visible { outline: 2px solid var(--eis-ink); outline-offset: -2px; }
.vorschau-bild--gross { display: block; place-items: normal; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.vorschau-bild--gross .vorschau-zoom { position: static; display: block; width: max-content; min-width: 100%; margin: 0; cursor: zoom-out; }
.vorschau-bild--gross img { position: static; display: block; width: auto; height: auto; max-width: none; margin: 0; }
.vorschau-zoom-hinweis { margin: .4rem 2px 0; color: var(--muted); font-size: .9rem; }
.vorschau-seite figcaption { padding: 14px 2px 4px; }
.vorschau-seite h3 { font-family: var(--z-serif); font-weight: 400; font-size: 1.25rem; margin: 0 0 .35rem; }
.vorschau-seite p { font-size: 1rem; line-height: 1.6; margin: 0; }
/* Nr. 28 (Nachtrag Mik): kein Durchblättern – die Bilder stehen untereinander in normaler Größe, der Text je Bild darunter */
.vorschau-folien { display: flex; flex-direction: column; gap: 1.4rem; }
.vorschau-folien .vorschau-bild:not(.vorschau-bild--gross) { display: block; aspect-ratio: auto; height: auto; max-height: none; }
.vorschau-folien .vorschau-bild:not(.vorschau-bild--gross) .vorschau-zoom { position: static; display: block; width: 100%; }
.vorschau-folien .vorschau-bild:not(.vorschau-bild--gross) img { display: block; width: 100%; height: auto; }
.vorschau-folien .vorschau-bild--gross { max-height: 70vh; }
.vorschau-fuss { display: flex; justify-content: center; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--z-hair); }
.vorschau-fuss p { margin: .4rem 0; }
body.vorschau-offen { overflow: hidden; }
@media (max-width: 640px) {
  .vorschau-dialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; padding-top: max(8px, env(safe-area-inset-top)); }
  .vorschau-bild { aspect-ratio: auto; height: 50vh; max-height: none; }
  .vorschau-fuss { margin-top: auto; }
}
.modul-loeschen { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; display: grid; gap: .55rem; }
.modul-loeschen input[type="text"] { min-height: 44px; font-size: 1rem; }
.modul-loeschen fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.modul-loeschen fieldset label { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.modul-loeschen-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.modul-loeschen-knoepfe .btn { min-height: 44px; }
.modul-ansicht { display: flex; flex-direction: column; gap: .6rem; }
.modul-ansicht[hidden] { display: none; }
.modul-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.modul-kopf h1 { font-size: 1.4rem; margin: 0; flex: 1; }
.modul-wesen { background: var(--ok-soft); color: var(--text, inherit); border-radius: 10px; padding: .6rem .8rem; }
.modul-platz { flex: 1; min-height: 70vh; display: flex; }
.modul-rahmen { flex: 1; width: 100%; min-height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.druck-bereich { display: none; }
@media print {
  body > *:not(#druck-bereich) { display: none !important; }
  .druck-bereich { display: block; color: #000; background: #fff; font: 12pt/1.4 system-ui, sans-serif; }
  .druck-bereich .druck { display: grid; grid-template-columns: repeat(auto-fill, minmax(6cm, 1fr)); gap: 4mm; }
  .druck-bereich .zettel { border: 1.5pt dashed #000; border-radius: 3mm; padding: 4mm; display: grid; gap: 2mm; break-inside: avoid; }
  .druck-bereich .falz { border-top: 1pt dashed #888; margin: 2mm 0; font-size: 8pt; color: #555; text-align: center; }
  .druck-bereich .leise { color: #555; }
}
@media (max-width: 420px) {
  .modul-karte .pkg-foot { flex-direction: column; align-items: stretch; gap: .5rem; }
  .modul-steuerung { justify-content: flex-start; }
}

/* Tagesseite (Startbildschirm): endlicher Tag, keine Feeds (Gesamtkonzept Kap. 1, 6a) */
.tag-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: 1rem 0 .6rem; }
/* Nr. 28: lange Wörter, Zahlenreihen und Formeln brechen um, statt die Karte über den Rand zu schieben (Rundgang Bill, 390 px) */
.tag-karte { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tag-art { margin: 0 0 .4rem; font-size: .72rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tag-frage { font-size: 1.15rem; line-height: 1.45; margin: 0 0 .9rem; }
.tag-text { font-size: 1.05rem; line-height: 1.55; margin: 0 0 .9rem; }
.tag-anriss { margin: 0 0 .9rem; line-height: 1.55; }
.tag-hinweis, .tag-loesung { margin: 0 0 .9rem; padding: .2rem 0 .2rem .9rem; border-radius: 0; background: none; border: 0; border-left: 1px solid var(--z-hair); }
.tag-antwort { margin: 0 0 .9rem; }
.tag-antwort label { display: block; font-size: .9rem; margin: 0 0 .3rem; }
.tag-antwort-zeile { display: flex; gap: .5rem; }
.tag-antwort-zeile input { flex: 1; min-width: 0; min-height: 44px; font-size: 1rem; padding: .5rem .7rem; border-radius: var(--z-radius); border: 1px solid var(--line); background: var(--bg); color: inherit; }
.tag-antwort-zeile .btn { min-height: 44px; min-width: 44px; }
.tag-noch-nicht { margin: .5rem 0 0; }
.tag-richtig { border-color: var(--ok, var(--line)); }
.tag-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tag-karte .btn, .tag-schluss .btn, .tag-gelernt .btn, .kapitel-kopf .btn, .kapitel-text .btn { min-height: 44px; min-width: 44px; }
.tag-karte--lumi { position: relative; }
.tag-karte--lumi .tag-art { padding-right: 2.4rem; }
.tag-zu { position: absolute; top: .3rem; right: .3rem; width: 44px; height: 44px; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); border-radius: 10px; }
.tag-zu:focus-visible { outline: 2px solid var(--accent); }
.vorhaben .check li { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
.tag-karte--fertig { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tag-karte--fertig .tag-art { display: inline; margin: 0 .4rem 0 0; }
.tag-schluss { text-align: center; padding: 2.2rem 1rem; }
.tag-schluss-satz { font-family: var(--z-serif); font-weight: 300; font-size: 1.45rem; line-height: 1.35; margin: 0 0 1.1rem; }
.tag-leer p { line-height: 1.55; }
.tag-vorrat { text-align: center; margin: .4rem 0 1.6rem; }
.kapitel-kopf { display: flex; justify-content: space-between; gap: .5rem; max-width: 38rem; margin: 0 auto 1rem; }
.kapitel-text { max-width: 38rem; margin: 0 auto; font-size: 1.08rem; line-height: 1.7; }
.kapitel-text h1 { font-size: 1.7rem; line-height: 1.2; margin: .2rem 0 0; }
.kapitel-text h2 { font-size: 1.05rem; margin: 2rem 0 .8rem; text-align: center; letter-spacing: .03em; }
.kapitel-text p { margin: 0 0 1em; hyphens: auto; -webkit-hyphens: auto; }
.kapitel-text .vers { text-align: center; font-style: italic; }
.kapitel-text .tag-knoepfe { margin: 2rem 0 1rem; }
.kapitel-quelle { margin-top: 1.5rem; overflow-wrap: anywhere; }
.tagesplan fieldset { border: 0; padding: 0; margin: 0 0 .8rem; }
.tagesplan legend { font-weight: 500; margin-bottom: .4rem; }
.tagesplan-zeile { display: block; margin: 0 0 .7rem; min-height: 32px; }
.tagesplan input[type="checkbox"] { width: 20px; height: 20px; vertical-align: -4px; }
.tagesplan select { max-width: 100%; min-height: 44px; }
@media (max-width: 400px) { .kapitel-text { font-size: 1.02rem; } .tag-frage { font-size: 1.08rem; } }

/* Was ist neu (Box App-Update und eigene Seite) */
.neues-fuss { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.neues-knopf { position: relative; min-height: 44px; }
.neues-punkt { display: inline-block; width: 8px; height: 8px; margin-left: .45rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.neues-seite { max-width: 40rem; margin: 0 auto; }
.neues-seite h1 { margin: 0 0 .2rem; }
.neues-version { margin: 1rem 0; }
.neues-version h2 { font-size: 1.15rem; margin: 0; }
.neues-version ul { margin: .6rem 0 0; padding-left: 1.2rem; line-height: 1.55; }
.neues-version li { margin: 0 0 .45rem; }

/* ---------- Pause: Happen für zwischendurch (Auftrag 2026-10-04-pause-stufe1) ----------
   Ein Rahmen über der Tagesseite, ruhig, ohne Rot: „Schau, so war's“ ist blau umrandet, Gelingen grün. */
.pause-anleitung { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
.pause--abend .pause-anleitung { color: #b9b6c4; }
.pause-stand { min-height: 1.5em; margin: .6rem 0; }
.pause-wort { font-size: 1.2rem; margin: .2rem 0 .6rem; line-height: 1.4; }
.pause-wahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.pause-wahl .z-linie { flex: 1 1 40%; }
/* Lumisch-Stufen (0.6.4): Stufe 2 Wahl mit Lautsprecher je Antwort, Stufe 3 Wörter ordnen */
.pause-wahl-zeile { display: flex; align-items: center; flex: 1 1 100%; gap: .2rem; }
.pause-wahl-zeile .z-linie { flex: 1 1 auto; }
.pause-wahl--woerter .z-linie { flex: 0 0 auto; min-width: 4.5rem; }
.pause-wahl--woerter .z-linie[hidden] { display: none; }
.pause-satz-gelegt { min-height: 48px; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--z-hair); margin: .4rem 0 .8rem; }
.pause-gelegt { min-height: 40px; padding: 0 .7rem; }
.pause-wahl--richtig::before { border-color: var(--z-ok) !important; }
.pause-aufloesung { margin: .6rem 0; min-height: 1.2em; }
.pause-zitat { margin: .3rem 0 .8rem; padding: .5rem .8rem; border-left: 3px solid var(--line); font-style: italic; line-height: 1.5; }
.pause-zeit { display: flex; gap: .8rem; margin: .4rem 0 .8rem; }
.pause-zeit select { min-height: 44px; }
/* Pilz: 3 × 3 Felder, die Mitte ist der Blickpunkt */
.pause-pilz { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: min(100%, 330px); margin: .4rem auto; }
.pause-feld { aspect-ratio: 1; min-height: 72px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pause-feld:disabled { cursor: default; }
.pause-feld[data-feld="4"] { border-style: dashed; }
.pause-punkt { width: 12px; height: 12px; border-radius: 50%; background: #5f5b53; }
.pause-feld--gut { outline: 1.5px solid var(--z-ok); outline-offset: -2px; }
.pause-feld--hier { outline: 1.5px solid var(--eis-ink); outline-offset: -2px; }
.pause-pilz-bild { width: 60%; height: 60%; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 30C6 15 18 6 32 6s26 9 26 24c0 3-2 4-5 4H11c-3 0-5-1-5-4z' fill='%23b5651d'/%3E%3Ccircle cx='22' cy='18' r='4' fill='%23f6efe4'/%3E%3Ccircle cx='40' cy='14' r='3' fill='%23f6efe4'/%3E%3Ccircle cx='44' cy='25' r='4' fill='%23f6efe4'/%3E%3Cpath d='M24 34h16l2 22c0 3-2 4-5 4H27c-3 0-5-1-5-4z' fill='%23efe3cf'/%3E%3C/svg%3E"); }
/* Eingebauter Fehler */
.pause-geschichte { padding-left: 1.4rem; margin: .4rem 0; display: grid; gap: .4rem; }
.pause-satz { width: 100%; text-align: left; min-height: 44px; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit; line-height: 1.4; cursor: pointer; }
.pause-satz--fehler { outline: 1.5px solid var(--eis-ink); outline-offset: 1px; }
/* Atemfenster */
.pause-atem { width: 120px; height: 120px; margin: 1rem auto; border-radius: 50%; background: radial-gradient(circle, #9fc3e0 0%, #4c7ea6 70%); transform: scale(.6); transition: transform 4s ease-in-out; }
.pause-atem--ein { transform: scale(1); }
.pause-atem--ruhig, .pause-atem--ruhig.pause-atem--ein { transition: none; transform: scale(.85); }
@media (prefers-reduced-motion: reduce) { .pause-atem { transition: none; } }
.pause-zaehler { text-align: center; }
.pause-rueckspiegel { margin-bottom: .9rem; }
.linie-balken li { grid-template-columns: 9rem 1fr 4.5rem; }
@media (max-width: 400px) { .linie-balken li { grid-template-columns: 7rem 1fr 3.8rem; } }

/* ---------- Zart: Knöpfe, Karten, Listen (Auftrag 2026-10-04-pause-umbau, Punkt 8; Vorbild „Pause neu gedacht“) ----------
   Ein Hauptknopf je Bildschirm (helles Rot, rote Schrift), Nebenwege als grauer Text mit Haarlinie, Wahlfelder mit Haarlinie.
   Die sichtbare Fläche bleibt klein, die Tippfläche ist trotzdem 44 px hoch (unsichtbar über Innenabstand bzw. Mindesthöhe). */
.z-haupt { font: var(--z-haupt-gewicht) var(--z-haupt-groesse)/1 var(--font); letter-spacing: .01em; color: var(--accent); background: transparent; border: 0; padding: 0 11px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; cursor: pointer; position: relative; isolation: isolate; }
.z-haupt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: calc(var(--z-haupt-groesse) + 12px); background: var(--accent-soft); border-radius: var(--z-radius); z-index: -1; }
.z-haupt:disabled { opacity: .45; cursor: default; }
.z-neben { font: 400 .8rem/1 var(--font); color: var(--z-neben); background: none; border: 0; padding: 0 2px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; cursor: pointer; }
summary.z-neben { display: list-item; list-style: none; line-height: 44px; }
summary.z-neben::-webkit-details-marker { display: none; }
.z-linie { font: 400 .8rem/1.2 var(--font); color: var(--text); background: transparent; border: 0; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; isolation: isolate; }
.z-linie::before { content: ""; position: absolute; inset: 7px 0; border: 1px solid var(--z-hair); border-radius: var(--z-radius); z-index: -1; }
.z-linie[aria-pressed="true"]::before { border-color: var(--eis-ink); background: rgb(255 255 255 / .55); }
.z-linie:disabled { cursor: default; }
.z-linie:focus-visible, .z-haupt:focus-visible, .z-neben:focus-visible { outline: 2px solid var(--eis-ink); outline-offset: 2px; border-radius: var(--z-radius); }
.z-karte { background: var(--z-karte); border-radius: 16px; padding: 14px 16px; box-shadow: var(--z-schatten); display: grid; gap: 2px; margin-bottom: 1rem; }
.z-eis { background: var(--eis); box-shadow: none; }
.z-marke { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.z-eis .z-marke, .z-eis .z-unter { color: var(--eis-ink); }
.z-titel { font-family: var(--z-serif); font-weight: var(--z-titel-gewicht); font-size: 1.15rem; margin: 0; }
.z-unter { font-size: .82rem; color: var(--muted); margin: 0; }
.z-zeile { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.z-text { margin: 0 0 .8rem; max-width: 60ch; line-height: 1.55; }
.z-leise { color: var(--muted); font-size: .88rem; margin: .2rem 0 .4rem; }
.z-h1 { font-family: var(--z-serif); font-weight: var(--z-h-gewicht); letter-spacing: -.01em; font-size: 2rem; margin: 0; }
.z-ueber { font-family: var(--z-serif); font-weight: var(--z-h-gewicht); font-size: 1.2rem; margin: 1.4rem 0 .3rem; }
.z-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--z-hair); }
.z-liste > li { border-bottom: 1px solid var(--z-hair); }
.z-mit { border-left: 1px solid var(--z-ok); padding-left: 12px; margin: .4rem 0 .8rem; }
.z-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.z-eingabe { font: inherit; font-size: 1rem; padding: .45rem .6rem; min-height: 44px; border: 1px solid var(--z-hair); border-radius: var(--z-radius); background: var(--z-karte); color: inherit; width: 100%; box-sizing: border-box; }
.z-eingabe:focus, .happen input:focus, .happen select:focus { outline: 1.5px solid var(--eis-ink); outline-offset: 1px; box-shadow: none; border-color: transparent; }
.z-x { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.2; fill: none; }

/* ---------- Der Raum „Pause“ (#pause) ---------- */
.pause-raum { max-width: 640px; }
.pause-alter { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 10px; margin: .4rem 0 .8rem; }
.pause-alter .z-linie { min-height: 56px; font-size: .95rem; }
.pause-alter .z-linie::before { inset: 4px 0; }
.pause-liste { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .pause-liste { grid-template-columns: 1fr 1fr; column-gap: 24px; border-top: 0; } .pause-liste > li:nth-child(-n+2) { border-top: 1px solid var(--z-hair); } }
.pause-zeile-wahl { width: 100%; min-height: 56px; display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 10px 2px; color: var(--text); font: inherit; cursor: pointer; }
.pause-zeile-wahl .z-name { font-weight: 500; font-size: .95rem; }
.pause-zeile-wahl:hover:not(:disabled) .z-name { color: var(--accent); }
.pause-zeile-wahl:disabled { cursor: default; }
.pause-zeile-wahl:disabled .z-name { color: var(--muted); font-weight: 400; }
.pause-raum-fuss { margin-top: .8rem; }
.pause-einst > div { padding: .4rem 0 1rem; }
.pause-einladung { touch-action: pan-y; transition: transform .2s ease, opacity .2s ease; user-select: none; }
a.pause-zeile { display: block; color: inherit; text-decoration: none; }

/* ---------- Der Happen als Fokus-Bildschirm (#happen) ---------- */
.happen { background: var(--eis); color: var(--text); border-radius: 22px; padding: 14px 18px 22px; min-height: min(640px, calc(100vh - 140px)); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; animation: happen-auf .22s ease-out; }
@keyframes happen-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .happen { animation: none; } .pause-einladung { transition: none; } }
.happen.happen--ruhig { background: var(--eis-ruhig); }
.happen-kopf { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; color: var(--eis-ink); margin: -6px 0 .4rem -12px; }
.happen-zu { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; border-radius: var(--z-radius); }
.happen-striche { display: flex; gap: 4px; justify-content: center; }
.happen-striche i { width: 18px; height: 2px; border-radius: 2px; background: var(--eis-strich); }
.happen-striche i.an { background: var(--eis-ink); }
.happen-name { font: 500 .78rem/1.2 var(--font); margin: 0; color: var(--eis-ink); text-align: right; }
.happen-einladung { font-family: var(--z-serif); font-weight: var(--z-h-gewicht); font-size: 1.4rem; line-height: 1.25; margin: .3rem 0 .6rem; }
.happen-einladung:empty { display: none; }
.happen-inhalt { flex: 1; display: flex; flex-direction: column; }
.happen-inhalt > .z-haupt, .happen-fuss { margin-top: auto; padding-top: .6rem; }
.happen-inhalt > .z-haupt { align-self: flex-start; }
/* Spiele aus einem Modul (0.6.5): der Rahmen füllt die Breite; Feld so breit wie hoch, darunter Platz für die Knöpfe */
.pause-modul { flex: 1; display: flex; min-height: 0; }
.pause-modul .modul-rahmen { width: 100%; border: 0; border-radius: 0; background: transparent; height: calc(min(100vw - 32px, 604px) + 190px); max-height: calc(100vh - 150px); min-height: 420px; display: block; }
.happen-fuss { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.happen-satz { font-family: var(--z-serif); font-weight: var(--z-h-gewicht); font-size: 1.45rem; line-height: 1.25; margin: .4rem 0 .6rem; }
.happen-frage { margin-top: .8rem; }
.happen .pause-anleitung, .happen .z-leise { color: var(--eis-ink); }
.happen .pause-feld, .happen .pause-satz { background: transparent; border-color: var(--eis-strich); }
.happen .pause-feld--gut, .happen .pause-feld--hier { background: var(--z-karte); }
.happen .pause-zitat { border-left: 1px solid var(--eis-strich); }
.happen .pause-tag-antwort .z-haupt, .happen .tag-antwort .z-haupt { margin-left: .4rem; }
@media (max-width: 767px) {
  body.happen-offen .happen { position: fixed; inset: 0; z-index: 1100; border-radius: 0; max-width: none; min-height: 0; overflow: auto; padding: max(10px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
  .happen .pause-pilz { width: min(100%, 270px); }
  .happen .pause-feld { min-height: 0; }
}
body.happen-offen .wesen-toast { display: none; } /* im Happen meldet sich die Lumi nicht dazwischen */

/* ==========================================================================
   Zart für die ganze App (Auftrag 2026-10-04-stil-zart-app, 0.4.3). Grundlage sind die Werte aus dem Pause-Umbau
   (--z-*, --eis*). Nur in der App (.of-app), die Startseite bleibt, wie sie ist. Je Bildschirm ein Hauptknopf: das zarte
   hellrote Feld (.btn-primary); Nebenknöpfe sind Haarlinien-Felder (.btn). Tippfläche immer 44 px, sichtbar kleiner.
   Schrift: Überschriften leicht (300–400), Text 400, nirgends schwerer als 600 – außer den Notrufnummern.
   Kontrast 4,5 : 1 hell und dunkel: web/stil.test.mjs.
   ========================================================================== */
.of-app h1, .of-app h2 { font-family: var(--z-serif); letter-spacing: -.01em; }
.of-app h1 { font-weight: 300; }
.of-app h2 { font-weight: 400; }
.of-app h3 { font-family: var(--z-serif); font-weight: 400; font-size: 1.12rem; }
.of-app strong, .of-app b { font-weight: 600; }
.of-app .brand { font-weight: 600; }
.of-app .tag { font-weight: 500; }
.of-app .bereit-zahl { font-family: var(--z-serif); font-weight: 300; font-size: 3.6rem; letter-spacing: -.03em; }
.of-app .bereit-kopf .bereit-zahl { font-size: 4.2rem; }
@media (max-width: 720px) { .of-app .bereit-kopf .bereit-zahl { font-size: 3.6rem; } }

.of-app .card { border: 0; border-radius: 16px; box-shadow: var(--z-schatten); background: var(--z-karte); }
.of-app .page-head { margin-bottom: 1.25rem; }

.of-app .btn { position: relative; isolation: isolate; background: transparent; border: 0; border-radius: var(--z-radius); box-shadow: none; filter: none;
  min-height: 44px; min-width: 44px; padding: 0 12px; font-weight: 400; font-size: .85rem; line-height: 1.2; color: var(--text); }
.of-app .btn::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border: 1px solid var(--z-hair); border-radius: var(--z-radius); z-index: -1; }
.of-app .btn:hover { border-color: transparent; }
.of-app .btn:hover::before { border-color: var(--muted); }
.of-app .btn-primary { color: var(--accent); font-size: var(--z-haupt-groesse); font-weight: var(--z-haupt-gewicht); padding: 0 11px; box-shadow: none; }
.of-app .btn-primary::before { border: 0; background: var(--accent-soft); top: 50%; bottom: auto; height: calc(var(--z-haupt-groesse) + 12px); transform: translateY(-50%); }
.of-app .btn-primary:hover { filter: none; }
.of-app .btn-primary:hover::before { filter: brightness(.97); }
.of-app .btn-sm { padding: 0 10px; font-size: .8rem; }
.of-app .btn:focus-visible { outline: 2px solid var(--eis-ink); outline-offset: 0; }
.of-app .btn:disabled { opacity: .45; }

.of-app input[type="time"], .of-app select, .of-app input[type="text"], .of-app input[type="email"], .of-app input[type="password"], .of-app input[type="search"] { border-radius: var(--z-radius); }
.of-app textarea { border-radius: var(--z-radius) !important; }
.of-app .tag-antwort-zeile .btn { min-width: 64px; }
.of-app input[type="time"] { max-width: 100%; min-width: 0; } /* große Schrift: das Zeitfenster bricht um statt zu überlaufen */

/* Lumi: Meldung und Einladung ohne dunklen Block */
.of-app .wesen-toast { border: 0; border-left: 1px solid var(--z-hair); border-radius: 12px; box-shadow: 0 2px 14px rgb(0 0 0 / .08); }

/* Notfall bleibt deutlich: Nummern kräftig und groß, Karten mit sichtbarer Kante */
.of-app .notruf-nr { font-weight: 800; }
.of-app .notruf { border: 1px solid var(--line); }
.of-app .notruf h3, .of-app .siren h3 { font-family: var(--font); font-weight: 600; font-size: 1.05rem; }

/* ---------- Das Lumi-Buch (0.5.0): ruhige Leseansicht, Serif, viel Rand; Lücken still ---------- */
.buch-lesen { max-width: 36rem; margin: 0 auto; padding: .5rem 0 3rem; }
.buch-titel { text-align: center; margin: 1rem 0 2.5rem; }
.buch-titel h1 { font-family: var(--z-serif); font-weight: 300; font-size: clamp(2rem, 7vw, 2.8rem); margin: 0 0 .4rem; }
.buch-band { color: var(--muted); margin: 0 0 .8rem; font-size: .95rem; }
.buch-hinweis { font-family: var(--z-serif); font-style: italic; color: var(--muted); margin: 0 auto 1rem; max-width: 28rem; font-size: .95rem; }
.buch-werkzeug { display: flex; justify-content: center; gap: 18px; margin: 0; }
.buch-leer { color: var(--muted); text-align: center; margin: 0 auto 2rem; max-width: 28rem; }
.buch-kapitel { margin: 0 0 2.4rem; }
.buch-kapitel h2 { font-family: var(--z-serif); font-weight: 400; font-size: 1.25rem; text-align: center; margin: 0 0 1.2rem; }
.buch-text { font-family: var(--z-serif); font-size: 1.12rem; line-height: 1.75; margin: 0 0 1.1em; hyphens: auto; -webkit-hyphens: auto; }
.buch-luecke { color: var(--muted); font-size: .9rem; font-style: italic; text-align: center; margin: .2rem auto 1.3rem; padding: .3rem 0; border-top: 1px solid var(--z-hair); border-bottom: 1px solid var(--z-hair); max-width: 22rem; }
.buch-absatz { padding-top: 0; }
.buch-kopf { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px; margin: 0 0 1.4rem -12px; }
.buch-zu { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); border-radius: var(--z-radius); }
.buch-marke { margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.buch-fuss { margin: 2rem 0 0; }
.lumi-buch-link { margin-left: 6px; font-size: .8rem; }
a.buch-zeile { display: block; color: inherit; text-decoration: none; }
@media (max-width: 400px) { .buch-text { font-size: 1.06rem; line-height: 1.7; } }
/* Was die Lumis denken (0.6.2): Inhaltsverzeichnis und je Gedanke eine Seite, ruhig wie das Lumi-Buch */
.gedanken { max-width: 36rem; margin: 0 auto; padding: .5rem 0 3rem; }
.gedanken-kopf { text-align: center; margin: 1rem 0 2rem; }
.gedanken-kopf h1, .gedanke h1 { font-family: var(--z-serif); font-weight: 300; font-size: clamp(1.8rem, 6.5vw, 2.5rem); margin: 0 0 .4rem; }
.gedanken-unter { margin: 0 0 .6rem; color: var(--muted); }
.gedanken-hinweis { font-family: var(--z-serif); font-style: italic; color: var(--muted); margin: 0 auto; max-width: 28rem; font-size: .95rem; }
.gedanken-inhalt { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--z-hair); }
.gedanken-inhalt li { border-bottom: 1px solid var(--z-hair); }
.gedanken-eintrag { display: grid; grid-template-columns: 2rem 1fr; column-gap: .4rem; width: 100%; min-height: 44px; padding: .65rem 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.gedanken-nr { grid-row: span 2; color: var(--muted); font-variant-numeric: tabular-nums; }
.gedanken-titel { font-family: var(--z-serif); font-size: 1.08rem; }
.gedanken-wer { grid-column: 2; color: var(--muted); font-size: .85rem; }
.gedanken-fuss { margin: 2rem 0 0; text-align: center; }
.gedanken-marke { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gedanke-bild { margin: 0 0 1.2rem; }
.gedanke-bild img { display: block; width: 100%; height: auto; aspect-ratio: 1300 / 872; object-fit: cover; border-radius: var(--z-radius); background: var(--z-hair); }
.gedanke-wer { margin: 0 0 .2rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gedanke-lumisch { font-family: var(--z-serif); font-size: clamp(1.5rem, 5.6vw, 2rem); line-height: 1.35; margin: 1.1rem 0 .5rem; }
.gedanke-wort { margin: 0 0 .4rem; color: var(--muted); font-size: .95rem; }
.gedanken-feld { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.gedanke-deutsch { font-family: var(--z-serif); font-style: italic; font-size: 1.15rem; margin: 0 0 1.2rem; }
.gedanken-werkzeug { display: flex; gap: 18px; margin: 0 0 1rem; }
.gedanke-text { font-family: var(--z-serif); font-size: 1.12rem; line-height: 1.75; margin: 0 0 1.1em; hyphens: auto; -webkit-hyphens: auto; }
.gedanken-blaettern { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 2.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--z-hair); }
.gedanken-blaettern > :first-child { justify-self: start; text-align: left; }
.gedanken-blaettern > :last-child { justify-self: end; text-align: right; }
.pkg-hinweis { margin: -.3rem 0 .6rem; font-style: italic; }
@media (max-width: 400px) { .gedanke-text { font-size: 1.06rem; line-height: 1.7; } }

/* ---------- Updates & Abo (0.5.2): Stand, Was ist neu mit Reitern, Einstellungen zugeklappt, Löschen abgesetzt ---------- */
.upd-neu, .upd-einst, .upd-stand ~ section.card { margin-top: 1rem; }
.upd-stand { display: grid; gap: .6rem; }
.upd-satz { margin: 0; font-size: 1.05rem; }
.upd-stand > .btn-primary { justify-self: start; }
.upd-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--z-hair); }
.upd-h2 { font-family: var(--z-serif); font-weight: 400; font-size: 1.2rem; margin: 0 0 .6rem; }
.upd-reiter { display: flex; gap: 18px; border-bottom: 1px solid var(--z-hair); margin: 0 0 .6rem; }
.upd-reiter button { background: none; border: 0; padding: 0 2px; min-height: 44px; font: inherit; font-size: .95rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.upd-reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.upd-liste { list-style: none; margin: 0; padding: 0; }
.upd-liste > li { padding: .6rem 0; border-bottom: 1px solid var(--z-hair); }
.upd-liste > li:last-child { border-bottom: 0; }
.upd-liste ul { margin: .3rem 0 0; padding-left: 1.1rem; line-height: 1.5; }
.upd-kopf { margin: 0 0 .15rem; }
.upd-einst summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; min-height: 44px; list-style: none; position: relative; padding-right: 28px; }
.upd-einst summary::-webkit-details-marker { display: none; }
.upd-einst summary .upd-h2 { margin: 0; }
.upd-einst summary::after { content: "›"; position: absolute; right: 4px; top: .35rem; font-size: 1.3rem; color: var(--muted); transition: transform .15s; }
.upd-einst[open] summary::after { transform: rotate(90deg); }
.upd-info { margin: 1.4rem 0 0; }
.upd-loeschen { margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--z-hair); }
.of-app .upd-gefahr { color: var(--accent); }
.of-app .upd-gefahr::before { border-color: var(--accent-soft); }
.neu-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: .4rem; vertical-align: .15em; }
.hilfe-frage { font-family: var(--font); font-weight: 600; font-size: 1.05rem; margin: 1.1rem 0 .25rem; } /* Nr. 28 (Nachtrag Mik): Textschrift, fett */
.hilfe-frage:first-child { margin-top: 0; }
.hilfe-antwort { margin: 0; line-height: 1.6; }

/* ---------- Das Blatt: am Handy von unten, breit in der Mitte; eigener Bildlauf, ✕ ---------- */
.blatt-hinter { position: fixed; inset: 0; z-index: 1150; background: rgb(20 18 16 / .35); display: flex; align-items: flex-end; justify-content: center; animation: blatt-hinter .18s ease-out; }
.blatt { background: var(--surface); color: var(--text); width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgb(0 0 0 / .15); animation: blatt-auf .22s ease-out; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 10px 8px 6px 18px; border-bottom: 1px solid var(--z-hair); }
.blatt-kopf h2 { font-family: var(--font); font-weight: 600; font-size: 1.15rem; margin: 0; }
.blatt-zu { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: var(--z-radius); }
.blatt-inhalt { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 14px 18px max(24px, env(safe-area-inset-bottom)); }
body.blatt-offen { overflow: hidden; }
@media (min-width: 821px) {
  .blatt-hinter { align-items: center; }
  .blatt { width: min(640px, calc(100vw - 48px)); max-height: min(80vh, 760px); border-radius: 18px; box-shadow: 0 16px 50px rgb(0 0 0 / .2); }
}
@keyframes blatt-auf { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes blatt-hinter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .blatt, .blatt-hinter { animation: none; } }
.blatt-zu:focus { outline: none; } .blatt-zu:focus-visible { outline: 1.5px solid var(--eis-ink); outline-offset: -4px; }

.bereit-hilfe { margin: .6rem 0 0; } /* „Info und Hilfe“ am Ende eines Abschnitts der Übersicht */

/* Mein Tag (0.5.6): drei Knöpfe als schneller Weg, Zeiten darunter */
.mein-tag { border: 0; padding: 0; margin: .4rem 0 .8rem; }
.mein-tag-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .3rem 0 .6rem; }
.mein-tag-arten .btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; white-space: normal; hyphens: manual; line-height: 1.2; padding: .45rem .2rem; font-size: .85rem; }
.mein-tag-arten .btn .muted { font-size: .78rem; }
.mein-tag-arten .ist-gewaehlt { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.lumi-mein-tag { margin: .6rem 0 0; }

/* Lumisch anhören (0.5.6): kleiner Knopf mit Haarlinie neben dem Wort */
.lumisch-hoeren { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 .15rem 0 .35rem; padding: 0; vertical-align: middle; border: 1px solid var(--z-hair); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.lumisch-hoeren:hover, .lumisch-hoeren:focus-visible { color: var(--text); border-color: currentColor; }
.lumisch-hoeren[hidden] { display: none; }

/* Naturheilkunde (0.6.0): Erste-Hilfe-Karte oben, ruhiger Streifen, drei Wege, Handbuch mit Tabellen */
.natur-erste-hilfe { border-left: 3px solid var(--accent); margin-bottom: .6rem; }
.natur-erste-hilfe h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.natur-erste-hilfe summary { cursor: pointer; }
.natur-erste-hilfe[open] summary { margin-bottom: .4rem; }
.natur-erste-hilfe ol, .natur-erste-hilfe ul { margin: .2rem 0 .2rem 1.2rem; padding: 0; }
.natur-erste-hilfe p, .natur-erste-hilfe li { font-size: .95rem; }
.natur-tel { font-weight: 600; white-space: nowrap; }
.natur-streifen { margin: 0 0 1rem; padding: .45rem .8rem; border: 1px solid var(--z-hair); border-radius: var(--z-radius); color: var(--muted); font-size: .9rem; }
.natur-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.natur-weg { display: flex; flex-direction: column; gap: .25rem; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.natur-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.natur-chips .ist-gewaehlt { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.natur-liste { list-style: none; margin: .3rem 0 .8rem; padding: 0; }
.natur-liste li { padding: .35rem 0; border-bottom: 1px solid var(--z-hair); display: flex; flex-direction: column; gap: .1rem; }
.natur-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--z-hair); text-underline-offset: 3px; }
.natur-link--warn { font-weight: 600; }
.natur-nichts { padding: .6rem .8rem; border: 1px dashed var(--z-hair); border-radius: var(--z-radius); }
.natur-plaketten { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .6rem; }
.natur-warnhinweis { font-weight: 600; }
.natur-text { overflow-wrap: anywhere; }
.natur-text h3, .natur-text h4, .natur-text h5 { margin: 1rem 0 .3rem; }
.natur-tabelle { overflow-x: auto; margin: .6rem 0; }
.natur-tabelle table { border-collapse: collapse; font-size: .88rem; min-width: 100%; }
.natur-tabelle th, .natur-tabelle td { border: 1px solid var(--z-hair); padding: .3rem .45rem; vertical-align: top; text-align: left; overflow-wrap: normal; min-width: 6rem; }
.natur-suche { display: flex; gap: .4rem; margin: .4rem 0 .8rem; }
.natur-suche input { flex: 1; min-width: 0; }
.natur-inhalt { margin: .4rem 0 0 1.4rem; padding: 0; }
.natur-inhalt li { padding: .3rem 0; }
.natur-zurueck { margin: 0 0 .6rem; }
.upd-version { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.intern-feld { flex-wrap: wrap; gap: .4rem; }
.intern-feld input { flex: 1; min-width: 12rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.natur-text ul, .natur-text ol { padding-left: 1.1rem; margin: .4rem 0; }

/* Naturheilkunde-Bilder (0.6.1): Tafel oben, Foto darunter; giftiger Doppelgänger mit rotem Rand */
.natur-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .4rem 0 .8rem; align-items: start; }
.natur-bilder .natur-bild--tafel { grid-column: 1 / -1; }
.natur-bilder .natur-bild--foto img { aspect-ratio: 1; object-fit: cover; }
.natur-bild { margin: 0; }
.natur-bild-knopf { display: block; width: 100%; padding: 0; border: 1px solid var(--z-hair); border-radius: var(--z-radius); background: var(--z-karte); cursor: zoom-in; overflow: hidden; }
.natur-bild img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.natur-bild figcaption { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.natur-bild--gift .natur-bild-knopf { border: 3px solid var(--accent); }
.natur-bild--fehlt { display: none; }
.natur-bild--klein { width: 64px; flex: 0 0 64px; }
.natur-bild--klein img { height: 64px; object-fit: cover; }
.natur-mitbild { flex-direction: row !important; align-items: center; gap: .6rem; }
.natur-bildsatz { font-weight: 600; margin: .2rem 0 .8rem; }
.natur-nachweise { list-style: none; margin: .4rem 0 0; padding: 0; }
.natur-nachweise li { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--z-hair); overflow-wrap: anywhere; }
.natur-gross { margin: 0; }
.natur-gross img { width: 100%; height: auto; }
.natur-text .natur-nachweise { padding-left: 0; }

/* ---------- Die Lumi-Seite (0.7.0) ---------- */
.lumi-seite-kopf { text-align: center; margin: 0 0 .8rem; }
.lumi-seite-kopf .wesen { margin: 0 auto; }
.lumi-seite-bereit { margin: .1rem 0 0; }
.lumi-satz-des-tages { margin: 0 0 1rem; font-size: 1rem; line-height: 1.45; }
.lumi-satz-marke { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lumi-ton); margin-right: .3rem; }
.lumi-reiter { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 1rem; padding: 2px; -webkit-overflow-scrolling: touch; }
.lumi-reiter::-webkit-scrollbar { display: none; }
.lumi-reiter-knopf { flex: 0 0 auto; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--z-hair); background: var(--z-karte); color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; }
.lumi-reiter-knopf[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.lumi-kaestchen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 720px) { .lumi-kaestchen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lumi-kaestchen-feld { display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; min-height: 104px; padding: 1rem; border: 1px solid var(--z-hair); border-radius: var(--radius-sm); background: var(--z-karte); color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.lumi-kaestchen-titel { font: var(--z-titel-gewicht) 1.15rem/1.25 var(--z-serif); }
.lumi-kaestchen-zeile { color: var(--muted); font-size: .88rem; line-height: 1.35; }
.lumi-mehr { margin: 1rem 0 0; font-size: .92rem; }
.lumi-teil-titel { font-size: 1.05rem; margin: 0 0 .7rem; }
.lumi-hilfe .card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.lumi-hilfe .card { margin-bottom: .6rem; }
.wesen--klein { cursor: pointer; }

/* ---------- Die Bibliothek als Laden (0.7.0) ---------- */
.laden-abschnitt { margin: 1.6rem 0 0; }
.laden-abschnitt > h2 { font: var(--z-h-gewicht) 1.45rem/1.2 var(--z-serif); margin: 0 0 .2rem; }
.laden-abschnitt > .laden-satz { margin: 0 0 .9rem; color: var(--muted); }
.laden-karte .pkg-head h3 { font: var(--z-titel-gewicht) 1.15rem/1.3 var(--z-serif); }
.laden-bereich { display: block; margin: .3rem 0 .5rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.laden-steuerung { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
.laden-immer { font-size: .85rem; color: var(--muted); }
.alter-empfehlung { margin: -.3rem 0 .5rem; color: var(--muted); font-weight: 600; }

/* Szenarien, Grundvorsorge, Radio (0.8.0) */
.haushalt summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.haushalt-gruppe { border: 0; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.haushalt-gruppe legend { color: var(--muted); margin-bottom: .3rem; }
.haushalt-wahl { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.gv { margin-top: 1.5rem; }
.gv-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.gv-kopf h2 { margin: 0; }
.gv-werkzeug { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; align-items: center; }
.gv-zurueck { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.gv-bereich h3 { margin-bottom: .2rem; }
.gv-stand { color: var(--muted); margin: .3rem 0 .2rem; }
.gv-liste { margin-top: .6rem; }
.gv-punkt { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0 .4rem; }
.gv-punkt > label { grid-column: 1; }
.gv-merk { grid-column: 2; grid-row: 1; min-width: 44px; min-height: 44px; background: none; border: 0; font-size: 1.2rem; color: var(--warn); cursor: pointer; }
.gv-detail { grid-column: 1 / -1; margin: -.2rem 0 .3rem 1.8rem; }
.gv-detail summary { color: var(--eis-ink); cursor: pointer; }
.gv-detail p { margin: .3rem 0 0; }
.sz-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.sz-kachel { display: grid; gap: .3rem; text-decoration: none; color: inherit; padding: .8rem .9rem; }
.sz-kachel strong { font-size: 1.02rem; }
.sz-zurueck { margin: 0 0 .5rem; }
.sz-merk { border-color: var(--accent); }
.sz-merk ul { margin: 0; padding-left: 1.1rem; }
.sz-merk li { margin: .2rem 0; font-weight: 600; }
.sz-teil { padding: 0; }
.sz-teil > summary { cursor: pointer; padding: .9rem 1rem; list-style-position: inside; }
.sz-teil > summary h2 { display: inline; font-size: 1.15rem; margin: 0; }
.sz-teil[open] > summary { border-bottom: 1px solid var(--line); }
.sz-liste { margin: 0; padding: .6rem 1rem .8rem 2rem; }
.sz-liste li { margin: .45rem 0; }
.sz-zusatz h3 { margin: .8rem 0 .2rem; font-size: 1rem; }
.sz-verweise { margin: 1rem 0; }
.sz-quellen { margin-top: 1.2rem; }
.sz-quellen ul { padding-left: 1.1rem; }
.sz-quellen a { overflow-wrap: anywhere; }
.radio-box { margin-top: 1.5rem; }
.radio-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.radio-kopf h2 { margin: 0; }
.radio-tabelle { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.radio-tabelle th, .radio-tabelle td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.radio-tabelle th { font-size: .85rem; color: var(--muted); font-weight: 600; }
.sirene-hoeren { margin-top: .4rem; min-height: 44px; }
@media print { .druck-bereich .druck-liste p { margin: 1mm 0; } .druck-bereich .druck-liste h3 { margin: 4mm 0 1mm; } }
.sz-liste li > strong { display: block; margin-bottom: .1rem; }
/* Impressum unter „Über“ (Auftrag Nr. 22): Begriff links, Angabe rechts; schmal untereinander */
.ueber-impressum { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: 0; }
.ueber-titel { font-weight: 600; margin: .7rem 0 .3rem; }
.ueber-impressum dt { color: var(--muted); }
.ueber-impressum dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ueber-impressum { grid-template-columns: 1fr; gap: 0; } .ueber-impressum dd { margin-bottom: .3rem; } }

/* ---------- Nr. 28: Land wählen, Einstellungen, Vorschau je Land ---------- */
.land-frage { max-width: 30rem; margin: 1.5rem auto 2rem; display: flex; flex-direction: column; gap: .8rem; }
.land-frage h1 { margin: 0; }
.land-frage-text { font-size: 1.15rem; margin: 0; }
.land-auswahl { display: flex; flex-direction: column; gap: .5rem; }
.land-opt { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem 1rem; min-height: 48px; cursor: pointer; font-size: 1.05rem; }
.land-opt:has(input:checked) { border: 2px solid var(--ok); padding: calc(.75rem - 1px) calc(1rem - 1px); }
.land-opt input { width: 1.2rem; height: 1.2rem; accent-color: var(--ok); margin: 0; }
.land-opt:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.land-spaeter { color: var(--muted); font-size: .92rem; margin: 0 1rem; }
.land-weiter { align-self: stretch; min-height: 48px; }
.land-absender { border-top: 1px solid var(--line); padding-top: .8rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.land-absender p { margin: 0; color: var(--muted); }
.einst-teil { margin-bottom: 1rem; }
.einst-teil h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.einst-teil .land-auswahl { margin-top: .6rem; }
.land-vorschau { border-style: dashed; }

/* ---------- Nr. 28: Naturheilkunde (Aufbau nach Probe v7, Farben im App-Skin) ---------- */
.heilkunde { --hk-grund: var(--surface); --hk-blatt: #2f7a4a; --hk-samen: #8c6b45; --hk-stein: #7a7f86; --hk-honig: #c98a10; --hk-obst: #c0392b; --hk-gemuese: #d9731a; --hk-pilz: #7b5a3c;
  --hk-gruen: #1f6b3e; --hk-gruen-soft: #e2efe6; --hk-rot: #b3261e; --hk-rot-soft: #f9e1de; --hk-gelb-soft: #f8ecd2; --hk-gelb: #7a4f00;
  display: flex; flex-direction: column; gap: .9rem; max-width: 40rem; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .heilkunde { --hk-blatt: #7ccf9f; --hk-samen: #c9a47a; --hk-stein: #aeb4bb; --hk-honig: #f0b84a; --hk-obst: #ff7b6b; --hk-gemuese: #ffa45c; --hk-pilz: #c9a07a;
  --hk-gruen: #7ccf9f; --hk-gruen-soft: #1f3a2b; --hk-rot: #ff8a80; --hk-rot-soft: #3d1f1c; --hk-gelb-soft: #3a2f17; --hk-gelb: #f2c063; } }
:root[data-theme="dark"] .heilkunde { --hk-blatt: #7ccf9f; --hk-samen: #c9a47a; --hk-stein: #aeb4bb; --hk-honig: #f0b84a; --hk-obst: #ff7b6b; --hk-gemuese: #ffa45c; --hk-pilz: #c9a07a;
  --hk-gruen: #7ccf9f; --hk-gruen-soft: #1f3a2b; --hk-rot: #ff8a80; --hk-rot-soft: #3d1f1c; --hk-gelb-soft: #3a2f17; --hk-gelb: #f2c063; }
.hk-ic { width: 28px; height: 28px; flex: none; }
.hk-reiter { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.hk-reiter button { font: inherit; font-weight: 600; font-size: .95rem; padding: .7rem .5rem; border: 0; background: var(--surface); color: var(--text); cursor: pointer; min-height: 48px; }
.hk-reiter button[aria-pressed="true"] { background: var(--hk-gruen-soft); color: var(--hk-gruen); }
.hk-hinweis { margin: 0; color: var(--muted); }
.hk-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.hk-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; min-height: 64px; cursor: pointer; }
.hk-kachel small, .hk-zeile small { color: var(--muted); font-size: .85rem; }
.hk-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.hk-chip { font: inherit; font-size: .9rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; min-height: 40px; }
.hk-chip[aria-pressed="true"] { background: var(--hk-gruen-soft); color: var(--hk-gruen); border-color: var(--hk-gruen); }
.hk-umfang { background: var(--hk-gruen-soft); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.hk-umfang b { color: var(--hk-gruen); }
.hk-umfang p { margin: .4rem 0 0; }
.hk-selbst { border-top: 1px solid var(--line); padding-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.hk-selbst p { margin: 0; }
.hk-not { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; background: var(--hk-rot-soft); color: var(--hk-rot); border-radius: 10px; padding: .55rem .8rem; font-weight: 600; }
.hk-titel { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.4rem; }
.hk-zurueck { align-self: flex-start; }
.hk-liste { display: flex; flex-direction: column; gap: .4rem; }
.hk-gruppe { margin: .6rem 0 0; font-weight: 600; color: var(--muted); font-size: .9rem; }
.hk-zeile { display: flex; align-items: center; gap: .7rem; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; cursor: pointer; min-height: 52px; }
.hk-zeile span { display: flex; flex-direction: column; }
.hk-plaketten { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hk-plak { font-size: .85rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; background: var(--hk-gruen-soft); color: var(--hk-gruen); }
.hk-plak--ue { background: var(--hk-gelb-soft); color: var(--hk-gelb); }
.hk-plak--rot, .hk-rot { background: var(--hk-rot-soft); color: var(--hk-rot); }
.hk-rot { background: none; font-weight: 600; }
.hk-bsp { font-size: .85rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: .15rem .6rem; }
.hk-fakten { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; }
.hk-fakten dt { font-weight: 600; color: var(--muted); }
.hk-fakten dd { margin: 0; }
.hk-foto { border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 1rem; color: var(--muted); text-align: center; }
.hk-block h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.hk-schritte { margin: .3rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .3rem; }
.hk-verw { background: var(--hk-rot-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.hk-verw b { color: var(--hk-rot); }
.hk-verw p { margin: .4rem 0 0; }
.hk-link { font: inherit; font-weight: 600; color: var(--hk-rot); background: none; border: 1px solid var(--hk-rot); border-radius: var(--z-radius); padding: .4rem .7rem; margin-top: .4rem; cursor: pointer; min-height: 40px; }
.hk-kueche { background: var(--hk-gelb-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.hk-kueche ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.hk-wer { color: var(--text); }
.hk-mehr summary { cursor: pointer; font-weight: 600; }
.of-app .land-frage .land-weiter { min-height: 48px; font-size: 1rem; padding: .6rem 1rem; }

/* ---------- Nr. 29: Heute neu (Entwurf C) ---------- */
.heute-stapel { display: flex; flex-direction: column; gap: 22px; }
.heute-stapel > * { margin-top: 0; margin-bottom: 0; }
.heute-stapel .tag-karten { margin: 0; gap: 22px; }
.heute-status { border-radius: var(--radius-sm); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.heute-status b { font-size: 1.3rem; font-weight: 600; }
.heute-status span { color: var(--text); font-size: .95rem; }
.heute-status--on { background: var(--ok-soft); color: var(--ok); }
.heute-status--off { background: var(--accent-soft); color: var(--accent); }
.bereit-kreis-karte { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.bereit-kreis-reihe { display: flex; gap: 1rem; align-items: center; }
.bereit-kreis { --wert: 0; width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ok) calc(var(--wert) * 1%), var(--line) 0); }
.bereit-kreis .bereit-zahl { width: 68px; height: 68px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 1.7rem; line-height: 1; margin: 0; }
.bereit-kreis-karte .btn { text-align: center; justify-content: center; min-height: 44px; }
.netz-fragen { margin: 0; display: flex; flex-direction: column; }
.netz-frage { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.netz-jn { display: flex; gap: .3rem; flex: none; }
.netz-jn .btn { min-width: 52px; min-height: 40px; }
.netz-jn .btn[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.netz-nachbar { margin: .6rem 0 0; }
.netz-rat { margin: 0; border: 2px solid var(--line); }
.netz-rat--gross { border-color: var(--accent); }
.netz-stufen { display: flex; flex-direction: column; gap: .4rem; }
.netz-stufe { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; min-height: 48px; }
.netz-stufe small { display: block; font-weight: 400; color: var(--muted); }
.netz-stufe--jetzt { border: 2px solid var(--accent); background: var(--accent-soft); }
.netz-schritte { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding-left: 1.3rem; }
.netz-schluss { margin: 1rem 0; }
.spiele-raetsel, .spiele-roman { margin: 0 0 1.2rem; }
.bereit-kreis-reihe > div:last-child { text-align: left; }
.of-app .bereit-kreis-karte .btn, .of-app .netz-rat .btn { font-size: 1rem; min-height: 44px; padding: .6rem 1rem; display: flex; align-items: center; justify-content: center; }
.of-app .netz-rat .btn { display: inline-flex; }
.of-app #main .bereit-kreis-karte .btn, .of-app #main .netz-rat .btn { font-size: 1rem; min-height: 44px; padding: .6rem 1rem; }
.of-app #main .netz-rat--gross { border: 2px solid var(--accent); }

/* ---------- Nr. 30: Suche ---------- */
.kopf-rechts { display: flex; align-items: center; gap: .6rem; }
.seiten-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.suche-knopf { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: none; border: 0; color: var(--text); border-radius: var(--z-radius); cursor: pointer; }
.suche-knopf svg { width: 22px; height: 22px; }
.suche-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.suche { position: fixed; inset: 0; z-index: 1300; background: var(--bg); display: flex; justify-content: center; overflow-y: auto; }
.suche[hidden] { display: none; }
body.suche-offen { overflow: hidden; }
.suche-dialog { width: 100%; max-width: 760px; padding: max(12px, env(safe-area-inset-top)) 16px 2rem; }
.suche-kopf { display: flex; gap: .5rem; align-items: center; position: sticky; top: 0; background: var(--bg); padding: .4rem 0 .6rem; }
.suche-kopf input { flex: 1; min-width: 0; min-height: 48px; font-size: 1.05rem; padding: .5rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.suche-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.suche-eintrag { width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem; cursor: pointer; overflow-wrap: anywhere; }
.suche-bereich { font-size: .8rem; color: var(--muted); }
.suche-titel { font-weight: 600; }
.suche-zeile { font-size: .92rem; color: var(--muted); }
.suche-eintrag b { color: var(--text); font-weight: 600; }
.suche-zahl, .suche-hinweis { margin: .2rem 0 .6rem; }
.suche-leer p { margin: .4rem 0; }
.suche-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem !important; }
@media (max-width: 820px) { .seiten-kopf .suche-knopf { display: none; } }
.topbar .suche-knopf { margin: -11px -10px -11px 0; } /* Tippfläche 44 px, die Kopfzeile bleibt so hoch wie vorher */

/* Nr. 34: Euer Polster – Zeile auf Heute und Abschnitt in Vorsorge */
.heute-polster { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; margin: .4rem auto 1.6rem; padding: .6rem 1rem; min-height: 44px; color: inherit; text-decoration: none; border-radius: 12px; }
a.heute-polster:hover .heute-polster-titel, a.heute-polster:focus-visible .heute-polster-titel { text-decoration: underline; }
.heute-polster-titel { font-weight: 600; margin: 0; }
.heute-polster--leer { gap: .6rem; }
.polster-felder { display: grid; gap: .9rem; }
.polster-feld { display: grid; gap: .3rem; border: 0; padding: 0; margin: 0; }
.polster-feld legend, .polster-feld label { font-weight: 600; padding: 0; }
.polster-zahl { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.polster-zahl .of-input { width: 5.5em; text-align: center; }
.polster-schritt { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; }
.polster-licht { display: flex; flex-wrap: wrap; gap: .5rem; }
.polster-licht legend { width: 100%; margin-bottom: .3rem; }
.polster-licht .btn { min-height: 44px; min-width: 5.5em; }
/* Gewählt deutlich gefüllt in der Akzentfarbe, Schrift in --accent-ink (Bill, 16.10.: Kontrast mindestens 4,5:1 hell und dunkel) */
.polster-licht .btn.polster-gewaehlt, .of-app .polster-licht .btn.polster-gewaehlt { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.of-app .polster-licht .btn.polster-gewaehlt::before { display: none; }
.polster-ergebnis { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.polster-tage { font-size: 1.25rem; font-weight: 600; margin: 0; }

/* Nr. 36: Karten zu Akku und Strom (im Szenario-Teil und im Bereich der Grundvorsorge) */
.sz-infokarte { margin: 1rem 0 .2rem; padding: .9rem 1rem; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; }
.sz-infokarte h3 { margin: 0 0 .5rem; }
.sz-infokarte-liste { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }

/* Nr. 38: Ton lässt sich nicht abspielen – sichtbar statt still */
.sirene-meldung { margin: .4rem 0 0; font-weight: 600; }

/* Nr. 39: Bereit-Zahl als Knopf, Aufschlüsselung im Blatt */
button.bereit-kreis { border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.bereit-kreis:focus-visible, .bereit-zahl-knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bereit-zahl-knopf { display: block; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; min-height: 44px; }
.bereit-erklaert .be-quelle { margin: 0 0 1rem; }
.bereit-erklaert h3 { display: flex; justify-content: space-between; gap: .6rem; margin: 0 0 .4rem; }
.bereit-erklaert .be-punkte { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bereit-erklaert ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.bereit-erklaert .be-schritt { margin: 1rem 0 0; }

/* Nr. 40: Dein Haushalt als Einstellung */
.hh .hh-gruppe { border: 0; padding: 0; margin: 1rem 0 0; }
.hh .hh-gruppe legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.hh-zeile { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; min-height: 44px; padding: .2rem 0; }
.hh-name { font-weight: 600; }
.hh-schalter { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.hh-schalter input { width: 1.2rem; height: 1.2rem; }
.hh-zahl { display: inline-flex; align-items: center; gap: .4rem; }
.hh-zahl .of-input { width: 4.5em; text-align: center; }
.hh-schritt { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; }
.hh-kurz { margin: 0 0 1rem; }
.hh-start .hh-zahl { margin: .4rem 0 1rem; }
.hh-start [data-hh-start="spaeter"] { margin-left: .4rem; }
.polster-personen { margin: 0; }
.hh-frage { display: grid; gap: .2rem; padding: .3rem 0; }
.hh-wahlen { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.hh-wahl { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer; }
.hh-wahl input { width: 1.1rem; height: 1.1rem; }

/* Nr. 42: Vorratsliste (drei Entwürfe) */
.vr-liste { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .1rem; }
.vr-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); }
.vr-zeile--ab .vr-was strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.vr-was { display: grid; min-width: 0; overflow-wrap: anywhere; }
.vr-ablauf { font-size: .9rem; white-space: nowrap; }
.vr-ablauf--bald, .vr-ablauf--ab { font-weight: 600; }
.vr-knoepfe { grid-column: 1 / -1; display: flex; gap: .4rem; }
.vr-gruppe { margin: 1rem 0 0; }
.vr-gruppe h3 { margin: 0 0 .2rem; }
.vr-form { margin: 1rem 0; }
.vr-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.vr-feld { display: grid; gap: .2rem; font-weight: 600; font-size: .95rem; }
.vr-feld--breit { grid-column: 1 / -1; }
.vr-feld .of-input, .vr-feld .of-select { width: 100%; min-height: 44px; }
.vr-form-knoepfe { margin: .8rem 0 0; }
.vr-regal { display: flex; gap: .5rem; overflow-x: auto; padding: .4rem 0 .8rem; }
.vr-regal-fach { flex: 0 0 auto; min-width: 9rem; max-width: 12rem; display: grid; gap: .2rem; padding: .6rem .7rem; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; overflow-wrap: anywhere; }
.vr-filter { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .4rem; }
.vr-filter .btn[aria-pressed="true"] { font-weight: 600; border-color: currentColor; }
.vr-vorlagen { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.vr-vorlagen p { flex-basis: 100%; }
.vr-heute { display: grid; gap: .2rem; text-align: center; margin: -1rem auto 1.4rem; color: inherit; text-decoration: none; font-size: .95rem; }
.vr-heute-zeile { display: block; }
.vr-einkauf ul { padding-left: 1.2rem; display: grid; gap: .3rem; }