/* Mit Krebs nicht allein – Gestaltung nach Master Abschnitt 6 und Entwurf FINAL 05.10.26 */

@font-face{font-family:"Literata";src:url(../fonts/literata-600.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(../fonts/literata-600-italic.woff2) format("woff2");font-weight:500 700;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/sourcesans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/sourcesans-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/sourcesans-600.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --bg:#fdf4ea;          /* helles warmes Beige aus der Bildmitte des Covers */
  --card:#f8eadc;        /* Flächen */
  --white:#fffbf6;       /* helle Flächen */
  --blue:#1c3778;        /* das eine Blau (Titelblau) */
  --accent:#1c3778;      /* Überschriften, Rahmen, Symbole */
  --btn:#1c3778; --btn-ink:#fffbf6;
  --ink:#1f2f52;
  --ink-soft:#56627c;    /* Nebentext */
  --line:rgba(43,63,93,.16);
  --shadow:0 4px 14px rgba(28,55,120,.10);
  --greet-bg:linear-gradient(#f6ede2 0%,#f6ede2 32%,#f7ede3 68%,#f7ede3 100%);
  --rund:#f8eadc;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
/* Nachts: wie am Handy eingestellt oder im Menü gewählt */
@media (prefers-color-scheme:dark){
  :root:not([data-modus="hell"]){
    --bg:#13213f; --card:#1b2c52; --white:#1a2a4e; --accent:#fff6ec;
    --btn:#2a4682; --btn-ink:#fff8f0; --ink:#fff6ec; --ink-soft:#e6ddd2;
    --line:rgba(251,239,221,.18); --shadow:none; --greet-bg:#b8ad9f; --rund:rgba(255,246,236,.14); color-scheme:dark;
  }
}
:root[data-modus="dunkel"]{
  --bg:#13213f; --card:#1b2c52; --white:#1a2a4e; --accent:#fff6ec;
  --btn:#2a4682; --btn-ink:#fff8f0; --ink:#fff6ec; --ink-soft:#e6ddd2;
  --line:rgba(251,239,221,.18); --shadow:none; --greet-bg:#b8ad9f; --rund:rgba(255,246,236,.14); color-scheme:dark;
}

*{box-sizing:border-box}
/* Grundschrift 18 px, wächst mit der Schriftgrösse des Handys */
html{font-size:112.5%;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
@supports (font:-apple-system-body){html{font:-apple-system-body;font-size:106%}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.5;min-height:100vh;min-height:100dvh}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.phone{max-width:520px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* Kopfzeile: links Marke oder Zurück, rechts immer „Hilfe in der Krise“ */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;min-height:52px;margin-bottom:6px}
.top-left{display:flex;align-items:center;gap:4px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;min-height:48px}
.brand img{width:40px;height:40px;border-radius:10px;display:block;box-shadow:0 1px 4px rgba(43,63,93,.2);flex:none}
.brand span{font-family:var(--serif);color:var(--accent);font-weight:600;font-size:1.02rem;line-height:1.15}
.back{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:-12px;border-radius:50%;color:var(--accent);text-decoration:none;background:none;border:0;cursor:pointer;flex:none}
.back svg{width:24px;height:24px}
.brand.klein{width:48px;justify-content:center}
.brand.klein img{width:34px;height:34px;border-radius:9px}
.sos{display:inline-flex;align-items:center;gap:7px;font:600 .88rem var(--sans);color:var(--accent);background:var(--white);border:1.5px solid var(--accent);border-radius:999px;padding:0 14px;min-height:48px;text-decoration:none;white-space:nowrap;flex:none}
.sos svg{width:18px;height:18px}
:root[data-modus="dunkel"] .sos{background:transparent}
@media (prefers-color-scheme:dark){:root:not([data-modus="hell"]) .sos{background:transparent}}
@media (max-width:360px){.brand span{display:none}}

h1,h2,h3,h4{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;font-family:var(--serif);color:var(--accent);font-weight:600;line-height:1.2;text-wrap:balance}
h1{font-size:2.05rem;margin:0}
h2.seite{font-size:1.65rem;margin:14px 0 18px}
.lead{color:var(--ink-soft);margin:6px 0 0}
.icon{width:24px;height:24px;flex:none}

/* Startseite */
.start{display:flex;flex-direction:column;gap:26px;margin-top:34px;flex:1}
.start.g{margin-top:22px;gap:22px}
.stack{display:flex;flex-direction:column;gap:12px}
.btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border-radius:18px;padding:18px 20px;min-height:84px;text-decoration:none;border:0;cursor:pointer}
.btn .txt{flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.btn b{display:block;font-size:1.18rem;font-weight:600;line-height:1.25}
.btn .unter{display:block;font-size:.95rem;opacity:.85}
.btn svg{width:28px;height:28px;flex:none}
.btn .chev{width:20px;height:20px;opacity:.7}
.blue{background:var(--btn);color:var(--btn-ink)}
.start.g .btn{min-height:64px;padding:14px 18px}
.start.g .btn b{font-size:1.05rem}
.wide{display:flex;align-items:center;gap:14px;background:var(--white);border:2px solid var(--accent);border-radius:18px;padding:14px 16px;color:var(--ink);text-decoration:none;min-height:80px;box-shadow:var(--shadow)}
.wide .ring{width:48px;height:48px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none}
.wide .ring svg{width:26px;height:26px;color:#fffbf6}
:root[data-modus="dunkel"] .wide .ring{background:var(--accent)}
:root[data-modus="dunkel"] .wide .ring svg{color:#13213f}
@media (prefers-color-scheme:dark){:root:not([data-modus="hell"]) .wide .ring{background:var(--accent)}:root:not([data-modus="hell"]) .wide .ring svg{color:#13213f}}
.wide b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--accent)}
.wide small{display:block;color:var(--ink-soft);font-size:.88rem}
.wide .chev{width:20px;height:20px;color:var(--accent);margin-left:auto;flex:none}
.more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin-top:2px;padding:12px;color:var(--accent);font-weight:600;text-decoration:none;font-size:1rem;min-height:48px}
.more svg{width:22px;height:22px}
.more span{flex-basis:100%;text-align:center;font-weight:400;color:var(--ink-soft);font-size:.85rem}
.hello{font-family:var(--serif);color:var(--accent);font-size:1.55rem;font-weight:600;margin:0;line-height:1.2}
.label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}

/* Listen (Zuletzt gehört, Bereiche, Menü) */
.liste{list-style:none;margin:0;padding:0;background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.liste li+li{border-top:1px solid var(--line)}
.zeile{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:64px;text-decoration:none;color:var(--ink);width:100%;background:none;border:0;text-align:left;cursor:pointer}
.zeile .sym{width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;flex:none;color:var(--accent)}
.zeile .sym svg{width:20px;height:20px}
.zeile .sym.play{background:var(--btn);color:var(--btn-ink)}
.zeile .sym.play svg{width:16px;height:16px;margin-left:2px}
.zeile .t{flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.zeile b{display:block;color:var(--accent);font-weight:600;line-height:1.25}
.zeile small{display:block;color:var(--ink-soft);font-size:.88rem;line-height:1.3;margin-top:2px}
.zeile .end{color:var(--ink-soft);flex:none;display:flex;align-items:center;gap:6px}
.zeile .end svg{width:18px;height:18px}
.zeile .schloss{color:var(--ink-soft)}
.gruppe{margin:0 0 22px}
.gruppe > p{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.menu .zeile{min-height:56px}
.menu .zeile b{color:var(--ink);font-weight:400}
.testmarke{text-align:center;color:var(--ink-soft);font-size:.85rem;margin:6px 0 0}

/* Erstes Öffnen */
.ob{display:flex;flex-direction:column;flex:1;padding-top:4px}
.ob .dots{display:flex;gap:8px;justify-content:center;margin:2px 0 24px}
.ob .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.ob .dots i.on{background:var(--accent)}
.ob .pic{width:84px;height:84px;border-radius:50%;background:var(--card);display:grid;place-items:center;margin:0 0 22px}
.ob .pic svg{width:42px;height:42px;color:var(--accent)}
.ob h2{font-size:1.75rem;margin:0 0 16px}
.ob .txt p{margin:0 0 14px;max-width:60ch}
.actions{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:10px}
.actions .btn{min-height:64px;justify-content:center;text-align:center}
.actions .btn b{font-size:1.1rem}
.later{align-self:center;text-align:center;background:none;border:0;color:var(--accent);font:600 1rem var(--sans);padding:12px;min-height:48px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-radius:14px;padding:4px;margin:0 0 16px}
.seg button{font:600 1rem var(--sans);border:0;border-radius:11px;padding:10px;min-height:48px;background:transparent;color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--accent);box-shadow:0 1px 4px rgba(28,55,120,.15)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.steps .n{width:32px;height:32px;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font-weight:600;flex:none}
.steps b{color:var(--accent)}
.steps .ic{display:inline-block;vertical-align:-4px;width:20px;height:20px;color:var(--accent)}
.hinweis{background:var(--card);border-radius:14px;padding:12px 16px;margin:0 0 16px}

/* Begrüssung */
.greet{position:fixed;inset:0;z-index:20;background:var(--greet-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.greet img{width:100%;max-width:520px;height:auto;display:block;-webkit-mask-image:linear-gradient(transparent,#000 6%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 6%,#000 84%,transparent);opacity:0;transform:scale(1.03);transition:opacity 1.6s ease,transform 4s ease}
.greet.kurz img{transition:opacity .6s ease,transform 1.5s ease}
.greet.show img{opacity:1;transform:scale(1)}
/* Name der Autorin unten im Begrüssungsbild (Wunsch Simone 10.10.26): gleiche Schrift und Farbe wie der Titel im Bild */
.greet-bild{position:relative;width:100%;max-width:520px}
.greet-name{position:absolute;left:0;right:0;top:88%;margin:0;text-align:center;font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.03em;color:#1c3778;opacity:0;transition:opacity 1.6s ease .4s}
.greet.kurz .greet-name{transition:opacity .6s ease}
.greet.show .greet-name{opacity:1}
.greet .sos{position:absolute;top:max(18px,env(safe-area-inset-top));right:20px;opacity:.9}
.greet.weg{opacity:0;transition:opacity .4s ease;pointer-events:none}
:root[data-modus="dunkel"] .greet img,:root[data-modus="dunkel"] .greet-name{filter:brightness(.72) sepia(.18)}
/* Nachtbild: wärmer und heller, Variante 2 (Entscheid Simone 13.10.26) */
@media (prefers-color-scheme:dark){:root:not([data-modus="hell"]) .greet img,:root:not([data-modus="hell"]) .greet-name{filter:brightness(.72) sepia(.18)}}

/* Lesetexte */
.lesetext{max-width:62ch;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.lesetext h2.seite{margin-bottom:8px}
.lesetext h2.seite + p{margin-top:0}
.lesezeit{color:var(--ink-soft);font-size:.92rem;margin:0 0 18px}
.lesetext p,.lesetext li{margin:0 0 14px}
.lesetext ul{padding-left:1.2em;margin:0 0 14px}
.lesetext ul.liste{padding-left:0}
.lesetext ul.liste li{margin:0}
.lesetext h2{font-size:1.4rem;margin:30px 0 12px}
.lesetext h3{font-size:1.18rem;margin:24px 0 8px}
.lesetext h4{font-size:1.05rem;margin:20px 0 8px}
.lesetext table{border-collapse:collapse;width:100%;table-layout:fixed;margin:0 0 16px;font-size:.95rem}
.lesetext th,.lesetext td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.lesetext a{color:var(--accent);text-underline-offset:3px}
.weiter{display:inline-flex;align-items:center;gap:6px;margin:4px 0 8px;background:var(--white);border:1.5px solid var(--accent);color:var(--accent);border-radius:999px;padding:0 20px;min-height:48px;font-weight:600;cursor:pointer}
.weiter svg{width:18px;height:18px}
.verweise{margin-top:26px}

/* Krisenseite */
.notruf{background:var(--card);border:2px solid var(--accent);border-radius:18px;padding:16px 16px 4px;margin:18px 0}
.notruf p{margin:0 0 12px}
.notruf .nr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
.notruf .nr .oder{font-style:normal;color:var(--ink-soft)}
.notruf .nr span{flex-basis:100%;color:var(--ink-soft);font-size:.92rem}
.notruf .nr a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:14px;background:var(--btn);color:var(--btn-ink);font-weight:600;font-size:1.2rem;text-decoration:none;letter-spacing:.02em}
.feld{margin:0 0 18px}
.feld textarea{width:100%;min-height:96px;resize:vertical;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--white);color:var(--ink);font:inherit;line-height:1.45}
.feld textarea:focus{outline:none;border-color:var(--accent)}
.feld .status{display:block;min-height:1.4em;font-size:.85rem;color:var(--ink-soft);margin-top:4px}
.eigene{margin:18px 0}

/* Übung abspielen */
.player{display:flex;flex-direction:column;gap:16px;flex:1}
.player .meta{color:var(--ink-soft);margin:-8px 0 0}
.karte{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px}
.steuer{display:flex;align-items:center;justify-content:center;gap:28px;margin:18px 0 8px}
.play{width:88px;height:88px;border-radius:50%;background:var(--btn);color:var(--btn-ink);border:0;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.play svg{width:36px;height:36px}
.play .p-play{margin-left:5px}
.rund{width:56px;height:56px;border-radius:50%;background:var(--rund);color:var(--accent);border:0;display:grid;place-items:center;cursor:pointer}
.rund svg{width:28px;height:28px}
.zeit{display:flex;justify-content:space-between;color:var(--ink-soft);font-size:.9rem;font-variant-numeric:tabular-nums;margin-top:6px}
input[type=range]{width:100%;height:48px;margin:0;background:transparent;accent-color:var(--blue);cursor:pointer}
:root[data-modus="dunkel"] input[type=range]{accent-color:#fff6ec}
@media (prefers-color-scheme:dark){:root:not([data-modus="hell"]) input[type=range]{accent-color:#fff6ec}}
.gesperrt{text-align:center}
.gesperrt .schloss-gross{width:72px;height:72px;border-radius:50%;background:var(--card);display:grid;place-items:center;margin:4px auto 12px;color:var(--accent)}
.gesperrt .schloss-gross svg{width:32px;height:32px}
.gesperrt p{margin:0 0 14px;color:var(--ink-soft)}
.danach{text-align:center}
.danach p{font-family:var(--serif);color:var(--accent);font-size:1.3rem;font-weight:600;margin:0 0 14px}
.zwei{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.knopf{min-height:52px;padding:0 24px;border-radius:14px;font-weight:600;border:0;cursor:pointer;background:var(--btn);color:var(--btn-ink)}
.knopf-link{display:inline-flex;align-items:center;text-decoration:none}
.platz{width:56px;height:56px}
.knopf.leise{background:var(--card);color:var(--accent)}
.fehler{color:var(--ink);background:var(--card);border-radius:12px;padding:10px 14px;margin:0}

/* Einstellungen */
.wahl{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:60px;cursor:pointer}
.wahl input{width:22px;height:22px;accent-color:var(--blue);flex:none}
.wahl small{display:block;color:var(--ink-soft);font-size:.85rem}
.wahl span b{font-weight:400}

.folgt{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}.greet img,.greet-name{opacity:1;transform:none}}
.greet .sos{background:var(--white)}
:root .greet .sos{background:var(--white)}

/* Gut lesbar: keine schräge Schrift (Wunsch Simone 06.10.26) */
em,i{font-style:normal}
/* Verweis aufs Hilfeset im Krisentext als Knopf */
a.hs-link{display:inline-flex;align-items:center;min-height:48px;margin-top:6px;padding:8px 16px;border:1.5px solid var(--accent);border-radius:14px;background:var(--white);color:var(--accent);font-weight:600;text-decoration:none;line-height:1.3}
.liste.abstand{margin-top:18px}

/* ---------- Stufe 2 ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--btn);color:var(--btn-ink);padding:12px 20px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:calc(100% - 32px);text-align:center;box-shadow:var(--shadow)}
.toast.an{opacity:1;transform:translate(-50%,0)}
.vor{display:block;font-size:.85rem;color:var(--ink-soft);margin-bottom:2px}
.zahl{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--card);color:var(--accent);font-weight:600;font-size:.85rem;margin-right:6px}
.abschnitt{margin:0 0 26px}
.abschnitt h3{font-size:1.15rem;margin:0 0 10px}
.abschnitt > p{margin:12px 0 10px}
.abschnitt .liste + .label,.abschnitt .liste + p{margin-top:16px}
.teil{font-weight:600;color:var(--accent);margin:0 0 6px;text-align:center}
.wahlteil{margin-top:16px;text-align:center}
.wahlteil .stack{gap:10px;margin-top:12px}
.karte + .karte,.karte + [data-nach],[data-nach] + .karte{margin-top:16px}
.bitte{margin-top:16px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem var(--sans);text-align:center;line-height:1.25;padding:10px 22px}
.knopf svg{width:22px;height:22px;flex:none}
.knopf.klein{min-height:48px;padding:6px 14px;font-size:.92rem}
section > .knopf,.fragen > .knopf,.fragen > .knopf-link,.lead + .knopf,.formular > .knopf{width:100%;margin-top:14px}
.leise-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 4px;min-height:48px;color:var(--accent);font:600 .92rem var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.leise-link svg{width:20px;height:20px}
.datei{position:relative;cursor:pointer}
.datei input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
label.knopf.datei{display:inline-flex}
.formular{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.formular label{font-weight:600;margin-top:8px}
.formular textarea,.formular input[type=text],.formular input[type=tel],.formular input[type=email],.formular input[type=date],.formular input[type=time],.formular select,.eintrag textarea,.eintrag select,.eintrag input[type=date],.eintrag input[type=time]{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--white);color:var(--ink);font:inherit;line-height:1.4;min-height:52px}
.formular textarea,.eintrag textarea{resize:vertical}
.formular textarea:focus,.formular input:focus,.formular select:focus,.eintrag textarea:focus,.eintrag select:focus,.eintrag input:focus{outline:2px solid var(--accent);outline-offset:1px}
.formular.neu{background:var(--card);border-radius:18px;padding:14px 16px 16px;margin-top:16px}
.formular.neu .label{margin:0}
.formular .status,.eintrag .status{font-size:.88rem;color:var(--ink-soft);min-height:1.2em;margin:0}
.formular .bsp{margin:0 0 4px;color:var(--ink-soft);font-size:.92rem}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:6px}
.aktionen .knopf{margin-left:auto}
.foto-name{font-size:.85rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.wann{display:flex;gap:10px}
.wann input{min-width:0}.wann input[type=date]{flex:1.4}.wann input[type=time]{flex:1}
.eintraege{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:12px}
/* Gespeicherte Einträge im gleichen Beige wie das Feld „Etwas hinzufügen“ (Wunsch Simone 10.10.26: nur die zwei Beigetöne) */
.eintrag{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.eintrag label:not(.leise-link):not(.haken){display:block;font-weight:600;margin:10px 0 6px}
.eintrag label:first-child,.eintrag .label:first-child{margin-top:0}
.eintrag > p{margin:0}
.eintrag .liste{margin-top:10px}
.eintrag .foto{display:block;width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin:0 0 10px}
.eintraege.erledigt textarea{color:var(--ink-soft)}
.leer{color:var(--ink-soft);margin:6px 0 14px}
.haken{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:600;cursor:pointer;margin:0 !important}
.haken input{width:24px;height:24px;accent-color:var(--blue)}
.rueckfrage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.rueckfrage span{font-weight:600;flex-basis:100%}
.kontakt{display:flex;align-items:center;padding-right:8px}
.kontakt .zeile{flex:1;min-width:0}
.mit-weg{display:flex;align-items:center;padding-right:8px}
.mit-weg .zeile{flex:1;min-width:0}
.anlauf{margin-top:6px}
section h3,.fragen h3{margin:22px 0 10px}
.zwei.gross{flex-direction:column}
.zwei.gross .knopf{width:100%;min-height:60px;font-size:1.1rem}
.auswahl .wahl span b{font-weight:600}
.auswahl .wahl input{width:26px;height:26px;flex:none;accent-color:var(--blue)}
.schritt{font-size:.9rem;color:var(--ink-soft);margin:0 0 4px}
.regler{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:16px 16px 10px;margin:0 0 14px}
.regler label{font-weight:600;font-size:1.05rem}
.regler .enden{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.regler .enden span{display:inline-flex;align-items:center;gap:6px}
.regler .enden svg{width:26px;height:26px;color:var(--accent)}
.regler .enden b{font-size:1.3rem;color:var(--accent);min-width:2ch;text-align:center}
.hinweis-krise{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--accent);border-radius:16px;padding:14px 16px;margin:0 0 20px;color:var(--ink);text-decoration:none;font-weight:600}
.hinweis-krise svg{width:24px;height:24px;flex:none;color:var(--accent)}
.bevor{margin:26px 0 8px}
.bevor h3{margin-top:0}
.bevor .formular{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.bevor .formular p{margin:0 0 4px}
.bevor .formular .knopf{width:100%}
/* Ablenkung */
.filme{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.filmkarte{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--line);height:100%}
.filmkarte img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.filmkarte span{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 4px 10px;text-align:center}
.filmkarte span svg{display:none}
.filmkarte b{font-weight:600;font-size:.88rem;line-height:1.2}
.lead + .filme{margin-top:14px}
body.im-kino{overflow:hidden;background:#000}
.kino{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-items:center}
.kino video{width:100%;height:100%;object-fit:cover}
.kino-knoepfe{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;transition:opacity .8s}
.kino.zart .kino-knoepfe{opacity:.22}
.kino-zu{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 16px;border-radius:999px;background:rgba(10,20,40,.55);color:#fff;font-weight:600;text-decoration:none}
.kino-zu svg{width:20px;height:20px}
body .kino a.sos.sos{background:rgba(255,251,246,.92);color:#1c3778;border-color:#1c3778}
.kino-start{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(10,20,40,.55);color:#fff;border:0;border-radius:20px;padding:20px 26px;font:600 1rem var(--sans);cursor:pointer}
.kino-start svg{width:44px;height:44px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chips button{min-height:48px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--accent);background:var(--white);color:var(--accent);font:600 .9rem var(--sans);cursor:pointer;text-align:left}
.chips button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.fragekarte{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:26px 22px;min-height:220px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}
.fragekarte .gruppe-name{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.fragekarte .frage{font-family:var(--serif);font-size:1.3rem;line-height:1.4;margin:0;color:var(--accent)}
.fragekarte.neu{animation:einblenden .45s ease}
@keyframes einblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.memory{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin:6px 0 18px}
.memory.m12{grid-template-columns:repeat(4,1fr)}
@media (min-width:520px){.memory.m6{grid-template-columns:repeat(4,1fr)}.memory.m12{grid-template-columns:repeat(6,1fr)}}
.mk{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:12px;cursor:pointer;background:none;perspective:600px}
.mk .vorne,.mk .hinten{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .45s;overflow:hidden}
.mk .hinten{background:var(--blue);display:grid;place-items:center;box-shadow:0 2px 6px rgba(28,55,120,.18)}
.mk .hinten span{display:grid;grid-template-columns:repeat(2,9px);gap:7px}
.mk .hinten i{width:9px;height:9px;border-radius:50%;background:#FDF1DF;opacity:.9}
:root[data-modus="dunkel"] .mk .hinten{background:#2a4682}
.mk .vorne{transform:rotateY(180deg);background:var(--white)}
.mk .vorne img{width:100%;height:100%;object-fit:cover;display:block}
.mk.auf .vorne{transform:rotateY(0)}
.mk.auf .hinten{transform:rotateY(-180deg)}
.mk.paar::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 5px #C99A3C;pointer-events:none}
.mk.paar{cursor:default}
.mk:disabled{opacity:1}
.memory-fertig{text-align:center}
.memory-fertig h3{margin-top:0}
.memory-fertig .stack{gap:10px;margin-top:12px}
.buchstaben{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 20px}
.buchstaben span{display:grid;place-items:center;width:46px;height:54px;border-radius:12px;background:var(--white);border:1.5px solid var(--line);font:600 1.45rem var(--serif);color:var(--accent);box-shadow:var(--shadow)}
.wr input{text-transform:uppercase;font-size:1.2rem;letter-spacing:.08em}
.rueck{min-height:1.5em;font-size:1.05rem;text-align:center;margin:4px 0 10px}
.rueck.gut{font-weight:700;color:var(--accent)}
.druckblatt{display:none}
.zuletzt-text{color:var(--ink-soft)}
@media print{
  body{background:#fff}
  .sprite,.top,.nur-bildschirm,.toast{display:none !important}
  .druckblatt{display:block;color:#000;font:12pt/1.5 Georgia,serif}
  .druckblatt h1{font-size:18pt;margin:0 0 10pt;color:#000}
  .druckblatt .linie{display:inline-block;width:60%;border-bottom:1px solid #000}
  .druckblatt ol{padding-left:18pt}
  .druckblatt li{margin:0 0 14pt;break-inside:avoid}
  .druckblatt li p{margin:0}
  .druckblatt .an{font-size:10pt;color:#333}
  .druckblatt .notiz{height:48pt;border-bottom:1px dotted #777}
}

textarea{field-sizing:content;max-height:60vh}
.fragen > .knopf-link + .lead,.fragen > .knopf-link + .liste{margin-top:16px}
.anlauf a.tel{font-weight:600;white-space:nowrap;display:inline-block;padding:12px 2px;margin:-12px 0;min-width:48px;text-align:center}
.fragekarte{margin-bottom:16px}
.memory.laedt{visibility:hidden}
@media (prefers-color-scheme:dark){:root:not([data-modus="hell"]) .mk .hinten{background:#2a4682}}

/* Kalender-Auswahl auf Android */
.kalwahl{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.kalwahl p{margin:0 0 10px}
.kalwahl .lead{margin:0}
.kalwahl .knopf.leise{background:var(--bg);border:1.5px solid var(--accent)}
.kalwahl .zwei{justify-content:flex-start}

/* Eigene Datums- und Zeitauswahl (Hilfeset Vorbereitung) */
.wann-wahl{display:flex;flex-direction:column;gap:10px}
.wann-datum{display:flex;flex-wrap:wrap;gap:8px}
.wann-datum select{width:auto}
.wann-datum [data-w="t"]{flex:1 0 4.6em}
.wann-datum [data-w="m"]{flex:3 0 8.6em}
.wann-datum [data-w="j"]{flex:1 0 5.6em}
.wann-zeit{display:flex;align-items:center;gap:8px}
.wann-zeit select{width:auto;flex:1;max-width:120px}
.wann-zeit span{font-weight:600}
.formular .wann-wahl select,.eintrag .wann-wahl select{padding:12px 8px}
.vorber{display:flex;flex-direction:column;gap:10px}

/* Achtsamkeits-Erinnerung im Lesetext: gleiches Beige wie die Felder im Hilfeset */
.achtsam-erinnerung{background:var(--card);margin:8px 0 22px}
.achtsam-erinnerung .formular{margin:0}
.achtsam-erinnerung .wann-zeit{margin-bottom:14px}

/* Krisenweg: Kasten „Wenn Sie gerade im Krankenhaus sind“ – Beige wie die übrigen Flächen */
.karte.spital{background:var(--card);margin:18px 0}
.karte.spital h3{margin-top:0}
.karte.spital ul{margin:0;padding-left:1.2em}
.karte.spital li{margin:6px 0}

/* Abholende Sätze bei sehr starker Angst */
.karte.abholen{background:var(--card);margin:14px 0 18px}
.karte.abholen p{margin:0 0 10px}
.karte.abholen .liste{margin-top:6px}

/* Seite „Das Buch“ */
.lesetext img.buchcover{display:block;width:58%;max-width:240px;height:auto;margin:4px 0 18px;border-radius:4px;box-shadow:0 6px 18px rgba(28,55,120,.18)}

/* Krisenweg: Kasten zum Körper (bei körperlich 1–3) */
.karte.koerper{background:var(--card);margin:14px 0 18px}
.karte.koerper h3{margin-top:0}
.karte.koerper .nr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 0}
.karte.koerper .nr .oder{font-style:normal;color:var(--ink-soft)}
.karte.koerper .nr span{flex-basis:100%;color:var(--ink-soft);font-size:.92rem}
.karte.koerper .nr a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:14px;background:var(--btn);color:var(--btn-ink);font-weight:600;font-size:1.2rem;text-decoration:none;letter-spacing:.02em}

/* Krisenweg: Übergang zu den Themen */
.uebergang{margin:4px 0 14px}
.uebergang p{margin:0 0 12px}

.uebergang .knopf.breit{width:100%}
.schluss-link{display:block;margin:6px auto 18px;background:none;border:0;color:var(--ink-soft);text-decoration:underline;font:inherit;font-size:.95rem;min-height:44px;cursor:pointer}

/* Hilfeset: ruhige Lesekarten (Simone 13.10.26) */
.eintrag .eintrag-text{margin:0;white-space:pre-line;line-height:1.5}
.eintrag .eintrag-titel{margin:0 0 4px;font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--accent)}
.eintrag .eintrag-datum{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--ink-soft)}
.eintrag .eintrag-datum svg{width:18px;height:18px;flex:none}
.eintrag .eintrag-an{margin:4px 0 0 40px;color:var(--ink-soft);font-size:.92rem}
.eintrag > .label{margin:12px 0 2px;font-weight:600;font-size:.92rem;color:var(--ink-soft)}
.eintrag .foto + .eintrag-text{margin-top:10px}
.aktionen.leise{justify-content:flex-start;gap:4px 18px;margin-top:4px}
.aktionen.leise .leise-link{min-height:44px;font-weight:500;color:var(--ink-soft)}
.frage-haken{display:flex;align-items:flex-start;gap:14px;cursor:pointer}
.frage-haken input{flex:none;width:26px;height:26px;margin:0}
.erledigt .frage-haken .eintrag-text{color:var(--ink-soft);text-decoration:line-through}
.aufklapp{margin-top:16px}
.aufklapp .knopf.breit{width:100%;justify-content:center}
.eintrag > .label{text-transform:none;letter-spacing:0}
.frage-haken .eintrag-text{font-weight:400}
.mit-weg .leise-link{font-weight:500;color:var(--ink-soft)}

/* Hilfeset: Wobei hilft es? */
.chips.klein{margin:6px 0 4px}
.chips.klein button{min-height:44px;padding:4px 12px;font-weight:500}
.chips.filter{margin:0 0 18px}
.eintrag .eintrag-wobei{margin:8px 0 0;color:var(--ink-soft);font-size:.92rem}
.eintrag .wobei-frage,.formular .wobei-frage{margin:14px 0 4px;font-weight:600;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink)}
.chips.klein button[aria-pressed="false"],.chips.filter button[aria-pressed="false"]{background:var(--bg)}
.lead + .chips.filter{margin-top:14px}

/* Hilfeset: Lied und Link */
.medien{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px}
.medien .foto-name{flex-basis:100%;margin:0;color:var(--ink-soft);font-size:.9rem}
.link-feld{margin-top:10px}
.link-feld label{display:block;font-weight:600;margin:0 0 6px}
.link-feld input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--bg);color:var(--ink);font:inherit;min-height:52px}
.lied{margin:10px 0 0}
.lied-name svg,.eintrag-link svg{width:20px;height:20px;flex:none}
.eintrag-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--accent);font-weight:600;min-height:44px}
.lied-knopf{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:4px 0;text-align:left;color:var(--ink);font:inherit;cursor:pointer;min-height:56px}
.lied-ring{width:48px;height:48px;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;flex:none}
.lied-ring svg{width:22px;height:22px}
.lied-knopf .lied-name{display:flex;flex-direction:column;font-weight:600}
.lied-knopf small{font-weight:400;color:var(--ink-soft)}
.kontakt-zeile{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;min-height:56px}
.kontakt-zeile .t{display:flex;flex-direction:column}
.kontakt-zeile b{color:var(--accent)}
.kontakt-zeile small{color:var(--ink-soft);font-size:.95rem}
.karte.bevor{background:var(--card)}
.bevor .formular .leise-link{width:auto;padding-left:0}
.bevor [data-feld] textarea{background:var(--bg)}
.bevor [data-feld] .knopf{margin-top:10px}
.bevor .status:empty{display:none}
/* Eine Regel für die ganze App (Simone 14.10.26): Seite beige, alle Kästen mit Einträgen, Listen und Feldern hell wie die Listen */
.eintrag,.formular.neu,.karte.bevor,.aufklapp .knopf.leise{background:var(--white);border:1px solid var(--line)}
.eintrag .liste{border:1px solid var(--line)}
.bevor [data-feld] textarea{background:var(--white)}
.knopf.leise{background:var(--white);border:1px solid var(--line)}
.sichern-knopf{margin-top:22px}
.klein-mitte{text-align:center;font-size:.92rem;margin-top:8px}
.erinnern{margin:0 0 18px}
.erinnern .aktionen{justify-content:flex-start;gap:8px 18px}
.erinnern .aktionen .knopf{margin-left:0}
.erinnern a.knopf,a.sichern-knopf{text-decoration:none}
.eintrag.kopie{margin:0 0 20px}.eintrag.kopie .knopf{margin-top:14px}.eintrag.kopie .status:empty{display:none}
.anrede{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:var(--ink-soft)}
.seg-klein{display:inline-flex;border:1.5px solid var(--accent);border-radius:999px;overflow:hidden}
.seg-klein button{min-height:44px;min-width:64px;padding:4px 16px;border:0;background:var(--white);color:var(--accent);font:600 1rem var(--sans);cursor:pointer}
.seg-klein button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.fk-festhalten{margin-top:6px;text-align:center}
.fk-festhalten .formular{text-align:left;margin-top:8px;padding:16px}
.bsp-fragen{margin:10px 0 18px}
.bsp-fragen h4{font-size:1rem;margin:18px 0 8px;color:var(--ink-soft)}
.bsp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bsp-frage{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-height:48px;font:inherit;color:var(--ink);cursor:pointer}
.bsp-frage svg{width:22px;height:22px;flex:none;color:var(--accent);margin-top:1px}
.bsp-frage span{flex:1}
.bsp-frage small{display:block;color:var(--ink-soft);font-size:.85rem;align-self:center}
.bsp-frage:disabled{cursor:default;opacity:.75}
.bsp-zu{margin-top:14px}
.film-schloss{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,251,246,.92);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.film-schloss svg{width:18px;height:18px}
.fk-abo{text-align:center;margin:10px 0 0}
.fk-abo a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:.92rem}
.fk-abo svg{width:16px;height:16px}

/* Hinweis „Die App wurde verbessert“ (16.10.26) – heller Kasten mit feinem Rand wie alle Kästen */
.update-hinweis{position:sticky;top:0;z-index:50;margin:10px 16px;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.08);color:var(--ink)}
.update-hinweis p{margin:0 0 12px;font:600 1.05rem/1.4 var(--sans)}
.update-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.update-knoepfe .knopf{flex:1 1 140px}