@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/Lexend-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/Lexend-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Nix falsch. (Design von richtig so.): ruhig, warm, migränefreundlich. Kein reines Weiß, keine harten Kontraste, keine schnellen Bewegungen. */
:root {
  --bg: #1d1a24; --karte: #27232f; --karte2: #302b39; --linie: #3a3545;
  --text: #f4efe7; --leise: #a9a1b3; --akzent: #9cc5ae; --warm: #f2a074; --akzent-text: #16231c;
  --gefahr: #e39a8f;
  --schrift: 1;
  --rund: 18px;
  color-scheme: dark;
}
:root[data-theme="tag"] {
  --bg: #f4efe7; --karte: #fbf8f3; --karte2: #ebe4d8; --linie: #ddd4c6;
  --text: #1d1a24; --leise: #6d6575; --akzent: #4f8a6b; --warm: #d9804f; --akzent-text: #ffffff;
  --gefahr: #a8473a;
  color-scheme: light;
}
:root[data-theme="migraene"] {
  --bg: #0d0c0f; --karte: #151318; --karte2: #1b1820; --linie: #232029;
  --text: #a99e8f; --leise: #6f6759; --akzent: #7d8f80; --warm: #8f7563; --akzent-text: #0d0c0f;
  --gefahr: #a07068;
  color-scheme: dark;
}
:root[data-theme="migraene"] * { animation: none !important; transition: none !important; }

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 350;
  font-size: calc(17px * var(--schrift)); line-height: 1.55;
  min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--akzent); }

#kopf {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--bg);
}
#marke { flex: 1; font-weight: 500; letter-spacing: -.03em; font-size: 1.2em; }
.pkt { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--warm); margin-left: .05em; }
.kopfknopf { background: var(--karte); border: 0; border-radius: 12px; min-width: 44px; height: 44px; font-size: 1.3em; cursor: pointer; }

main { max-width: 640px; margin: 0 auto; padding: 4px 16px 24px; outline: none; }

#leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center;
  background: var(--bg); border-top: 1px solid var(--linie); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
#leiste a { flex: 1; max-width: 200px; text-align: center; text-decoration: none; color: var(--leise); font-size: .78em; padding: 4px 0; border-radius: 12px; }
#leiste a .ni { display: block; font-size: 1.45em; line-height: 1.3; }
#leiste a.an { color: var(--akzent); }

h1 { font-size: 1.55em; line-height: 1.25; margin: 14px 0 6px; font-weight: 500; letter-spacing: -.02em; }
h2 { font-size: 1.1em; margin: 26px 0 10px; font-weight: 500; letter-spacing: -.01em; }
.leise { color: var(--leise); }
.klein { font-size: .88em; }

.karte { background: var(--karte); border-radius: var(--rund); padding: 16px 18px; margin: 10px 0; }
.karte p { margin: .4em 0; }

.akut {
  display: flex; align-items: center; gap: 14px; width: 100%; border: 0; cursor: pointer; text-align: left;
  background: var(--karte2); border-radius: var(--rund); padding: 18px; margin: 12px 0 4px;
}
.akut .kreis { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--warm); flex: none; }
.akut b { display: block; font-size: 1.08em; }

.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zust {
  background: var(--karte); border: 0; border-radius: var(--rund); padding: 14px; text-align: left; cursor: pointer;
  min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.zust .ic { font-size: 1.4em; color: var(--akzent); line-height: 1; }
.zust b { font-weight: 500; font-size: .98em; line-height: 1.3; }
.zust.weiss { background: transparent; border: 1.5px dashed var(--linie); grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }

.satz { font-size: 1.22em; line-height: 1.4; font-weight: 450; letter-spacing: -.01em; }
.satz-karte { background: var(--karte2); border-left: 4px solid var(--warm); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px;
  border-radius: 14px; border: 0; background: var(--akzent); color: var(--akzent-text); font-weight: 500; cursor: pointer; text-decoration: none;
}
.knopf.zwei { background: var(--karte2); color: var(--text); }
.knopf.voll { width: 100%; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.fach { display: inline-block; font-size: .8em; color: var(--leise); border: 1px solid var(--linie); border-radius: 99px; padding: 2px 10px; }

details.methode { background: var(--karte); border-radius: var(--rund); margin: 8px 0; }
details.methode summary { list-style: none; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 500; }
details.methode summary::-webkit-details-marker { display: none; }
details.methode summary::before { content: "+"; color: var(--akzent); width: 1em; font-weight: 700; }
details.methode[open] summary::before { content: "−"; }
details.methode .mi { padding: 0 16px 14px 42px; }
.stern { margin-left: auto; font-size: .8em; color: var(--warm); font-weight: 500; white-space: nowrap; }
.geholfen.an { background: var(--warm); color: var(--akzent-text); }

.hinweis { border: 1.5px solid var(--gefahr); color: var(--text); }

.atem-feld { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52vh; text-align: center; }
.atem-kreis {
  width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--akzent); display: flex; align-items: center; justify-content: center;
  transform: scale(.6); transition: transform 4s ease-in-out, opacity 4s ease-in-out; opacity: .5; font-size: 1.1em;
}
.atem-kreis.ein { transform: scale(1); opacity: 1; transition-duration: 4s; }
.atem-kreis.aus { transform: scale(.6); opacity: .5; transition-duration: 6s; }
@media (prefers-reduced-motion: reduce) { .atem-kreis, .atem-kreis.ein, .atem-kreis.aus { transform: none; transition: opacity 1s; } }

.ring { width: 220px; height: 220px; }
.ring circle { fill: none; stroke-width: 10; }
.zahl { font-size: 2.6em; font-variant-numeric: tabular-nums; font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--linie); background: transparent; border-radius: 99px; padding: 8px 14px; cursor: pointer; text-align: left; }
.chip.an { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }

.feld { width: 100%; background: var(--karte); border: 1.5px solid var(--linie); border-radius: 14px; padding: 12px 14px; min-height: 48px; }
.feld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
label.zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }

.schritt { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.schritt input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--akzent); flex: none; }
.schritt.fertig span { text-decoration: line-through; color: var(--leise); }

.balken { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: .92em; }
.balken .b { height: 10px; border-radius: 99px; background: var(--akzent); min-width: 6px; }
.balken .n { width: 9.5em; flex: none; }

.mythos .m { text-decoration: line-through; text-decoration-color: var(--warm); color: var(--leise); }
.mythos .q { font-size: .8em; color: var(--leise); margin-top: 6px; }

.segment { display: flex; background: var(--karte); border-radius: 14px; padding: 4px; gap: 4px; }
.segment button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 10px 6px; cursor: pointer; }
.segment button.an { background: var(--karte2); font-weight: 500; color: var(--akzent); }

.willkommen { text-align: center; padding-top: 6vh; }
.willkommen .zeichen { width: 96px; height: 96px; margin: 0 auto 22px; display: block; }
.willkommen .wm { font-size: 2.6em; font-weight: 500; letter-spacing: -.035em; line-height: 1; margin: 0 0 12px; }
.brief { text-align: left; background: var(--karte2); border-radius: var(--rund); padding: 16px 18px; margin: 18px 0; }

.fortschritt { height: 6px; background: var(--karte2); border-radius: 99px; overflow: hidden; margin: 8px 0 18px; }
.fortschritt div { height: 100%; background: var(--akzent); }

.vollbild { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow: auto; padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
.vollbild .zu { position: absolute; right: 16px; top: calc(14px + env(safe-area-inset-top)); }

.leer { text-align: center; padding: 18px; color: var(--leise); }
.trenn { height: 1px; background: var(--linie); margin: 20px 0; border: 0; }
.vorlesen { background: transparent; border: 1.5px solid var(--linie); border-radius: 99px; padding: 6px 12px; cursor: pointer; font-size: .85em; color: var(--leise); }

.blase { aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--akzent) 55%, white) 0 18%, var(--akzent) 60%); opacity: .9; transition: transform .12s, opacity .2s; }
.blase:active { transform: scale(.85); }
.blase.weg { background: transparent; border: 1.5px dashed var(--leise); opacity: .35; transform: scale(.8); }
textarea.feld { resize: vertical; line-height: 1.45; }
b, strong { font-weight: 500; }

.sprich-karte { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; cursor: pointer; text-align: left; background: var(--akzent); color: var(--akzent-text); border-radius: var(--rund); padding: 18px; margin: 14px 0 0; }
.sprich-karte b { display: block; font-size: 1.12em; }
.sprich-karte .leise { color: inherit; opacity: .78; }
.mikro-gross { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--akzent-text) 14%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1.5em; flex: none; }
#gespraech { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.blase-ich { align-self: flex-end; max-width: 84%; background: var(--karte2); border-radius: 18px 18px 4px 18px; padding: 10px 14px; }
.blase-app { align-self: flex-start; max-width: 92%; background: var(--karte); border-radius: 18px 18px 18px 4px; padding: 12px 16px; line-height: 1.55; }
.eingabe { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; margin-top: 16px; background: var(--bg); padding: 8px 0; }
.eingabe .feld { min-height: 52px; resize: none; }
.mikro { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--warm); color: var(--akzent-text); font-size: 1.3em; flex: none; cursor: pointer; }
.mikro.an { animation: puls 1.4s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--warm) 25%, transparent); } }
.eingabe .knopf { width: 52px; height: 52px; padding: 0; border-radius: 50%; font-size: 1.3em; flex: none; }
.tippt { display: inline-flex; gap: 5px; }
.tippt i { width: 8px; height: 8px; border-radius: 50%; background: var(--leise); animation: tipp 1.2s infinite; }
.tippt i:nth-child(2) { animation-delay: .2s; } .tippt i:nth-child(3) { animation-delay: .4s; }
@keyframes tipp { 50% { opacity: .25; } }

.idee-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: .9em; font-weight: 500; color: var(--warm); }

.gut-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 2px; }
.gut { display: flex; align-items: center; gap: 8px; border: 1.5px solid color-mix(in srgb, var(--warm) 55%, transparent); background: color-mix(in srgb, var(--warm) 12%, var(--karte)); color: var(--text); border-radius: 14px; padding: 11px 12px; text-align: left; cursor: pointer; font-weight: 450; line-height: 1.25; font-size: .95em; }
.gut span { color: var(--warm); font-size: 1.15em; }
.karte.schatz { background: color-mix(in srgb, var(--warm) 10%, var(--karte)); border-left: 4px solid var(--warm); }

.karte.fuer-dich { border: 1.5px solid color-mix(in srgb, var(--akzent) 50%, transparent); }

.kette { display: flex; align-items: center; gap: 14px; background: var(--karte); border-radius: var(--rund); padding: 12px 16px; margin: 12px 0 4px; }
.kette .punkte { display: flex; gap: 5px; flex: none; }
.kette .punkte span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linie); }
.kette .punkte span.an { background: var(--akzent); border-color: var(--akzent); }
.kette .punkte span.heute.an { background: var(--warm); border-color: var(--warm); }
.kette .punkte span.heute:not(.an) { border-color: var(--warm); border-style: dashed; }

.wahl3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wahl { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1.5px solid var(--linie); background: var(--karte); border-radius: 16px; padding: 14px 6px; cursor: pointer; font-weight: 500; font-size: 1em; }
.wahl span { font-size: 1.5em; line-height: 1; color: var(--akzent); }
.wahl[data-wahl3="gut"] span { color: var(--warm); }
.wahl.an { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--karte)); }
.wahl[data-wahl3="gut"].an { border-color: var(--warm); background: color-mix(in srgb, var(--warm) 14%, var(--karte)); }
.sos { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; border: 1.5px solid color-mix(in srgb, var(--warm) 50%, transparent); background: transparent; border-radius: var(--rund); padding: 12px 16px; cursor: pointer; font-weight: 500; text-align: left; }
.sos .kreis { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--warm); flex: none; }
.mehr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mehr-k { border: 1.5px solid var(--linie); background: transparent; border-radius: 99px; padding: 9px 14px; cursor: pointer; font-size: .9em; }
.mehr-k.idee { border-color: color-mix(in srgb, var(--warm) 60%, transparent); color: var(--warm); }
.jetzt-sofort { border: 2px solid var(--akzent); }
.jetzt-sofort .titel { font-size: 1.25em; font-weight: 500; margin-top: 2px; }

.badge { background: var(--warm); color: var(--akzent-text); border-radius: 99px; min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85em; }

.karte.draht-neu { border: 2px solid var(--warm); background: color-mix(in srgb, var(--warm) 10%, var(--karte)); }

.schritt-z { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.schritt-nr { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--warm); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .75em; margin-top: 2px; }
.schritt-nr.ok { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }

.qr { background: #fff; border-radius: 18px; padding: 10px; max-width: 280px; margin: 16px auto 8px; }
.qr svg { width: 100%; height: auto; display: block; }

.karte.en-karte { border: 1.5px solid color-mix(in srgb, var(--akzent) 55%, transparent); }

.erkl-karte { margin-top: 8px; background: color-mix(in srgb, var(--akzent) 12%, var(--karte2)); border-left: 3px solid var(--akzent); border-radius: 12px; padding: 10px 12px; font-size: .95em; }

.fuer-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 2px; }

.figur-k.an { outline: 2px solid var(--warm); }
.figur-mini { display: inline-block; margin-right: 6px; font-size: 1.15em; }

.figur-svg svg { border-radius: 50%; }
.mikro-gross .figur-svg, .mikro-gross > svg { line-height: 0; }
#marke { white-space: nowrap; }
@media (max-width: 420px) { #zurueck:not([hidden]) ~ #ideeKnopf span { display: none; } }

.kachel-wrap { display: flex; flex-direction: column; gap: 6px; }
.kachel-wrap > .zust { flex: 1; }
.anpass { display: flex; flex-wrap: wrap; gap: 6px; }
.vorlesen.an { border-color: var(--warm); color: var(--warm); }

.ki-mark{display:inline-block;font-size:.55em;font-weight:600;letter-spacing:.04em;padding:2px 6px;border-radius:6px;border:1.5px solid var(--linie);color:var(--leise,inherit);vertical-align:middle;margin-left:4px}

/* Tagebuch-Überblick: Tage als Spalten, nur Anzeige */
.blick-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 6px; }
.blick { display: grid; gap: 4px; min-width: calc(64px + var(--n) * 18px); }
.bl { display: grid; grid-template-columns: 62px repeat(var(--n), minmax(16px, 1fr)); gap: 2px; align-items: center; }
.bn { font-size: .72em; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz { height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .68em; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--karte) 60%, transparent); }
.bz small { font-size: 1em; color: var(--leise); }
.ez { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.ez:last-child { border-bottom: 0; }

/* Einrichtungs-Assistent */
.los-punkte { display: flex; gap: 6px; justify-content: center; margin: 6px 0 18px; }
.los-punkte span { width: 8px; height: 8px; border-radius: 50%; background: var(--linie); transition: background .3s, transform .3s; }
.los-punkte span.an { background: var(--akzent); }
.los-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.los-wahl.drei { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.los-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px 14px; border-radius: var(--rund); border: 2px solid transparent; background: var(--karte); color: var(--text); cursor: pointer; font: inherit; min-width: 0; }
.los-karte .ic { font-size: 1.4em; color: var(--akzent); }
.los-karte.an { border-color: var(--akzent); background: var(--karte2); }
.los-liste { padding-left: 22px; display: grid; gap: 6px; margin: 10px 0 4px; }
.los-liste-ul { padding-left: 18px; margin: 8px 0 0; display: grid; gap: 6px; }
.los-feier { text-align: center; padding: 10px 0 16px; }
.los-zeichen { width: 96px; height: 96px; }
.los-punkt { animation: losHuepf 1.6s ease-in-out 2; transform-origin: 78px 70px; }
@keyframes losHuepf { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 60% { transform: translateY(0); } 75% { transform: translateY(-5px); } }
.los-warte { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); animation: losPuls 1.4s ease-in-out infinite; vertical-align: middle; }
@keyframes losPuls { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .los-punkt, .los-warte { animation: none; } }

.schatz-foto { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; margin: 8px 0 6px; }