/* weite · Stylesheet der PWA.
   Farben = Bayit-Palette (design.rch.jetzt, Stand 2026-09-16) als Werte
   übernommen - BEWUSST kein Bayit-Laufzeit-Spiegel: die App ist offline-first
   und hat eigene Klima-Slots (Tageszeit-Modus), die Bayit nicht kennt.
   Bei Palettenänderung hier nachziehen (Kommentar im README). Kein Inline-
   CSS im Markup (strikte CSP); Abstände über die mt-*-Klassen. */

@font-face{font-family:'Figtree';src:url(fonts/figtree-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Figtree';src:url(fonts/figtree-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Figtree';src:url(fonts/figtree-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Lora';src:url(fonts/lora-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lora';src:url(fonts/lora-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url(fonts/lora-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  /* Bayit-Neutrale */
  --papier-warm:#F8F4EE;--papier-kuehl:#F6F5F2;--creme:#F2EADE;--karton-warm:#EFE8DE;--karton-kuehl:#EAE8E3;
  --linie-t:#D8D2C8;--graphit:#6B665F;--kohle-weich:#3A3631;--kohle:#1E1C1A;
  --beere500:#7A2A44;--beere700:#602638;--schiefer300:#B3B4B8;--schiefer500:#4B5568;--altrosa300:#D8B7BD;--altrosa700:#814A5A;
  --salbei100:#E7E8E0;--salbei300:#C0CBC0;--salbei500:#6C8E7A;--salbei700:#566E5F;--gold300:#E3D3AE;--gold500:#C9A24A;--gold700:#7A5E1F;
  /* Klima-Slots (je Thema gesetzt) */
  --grund:var(--papier-warm);--flaeche:var(--creme);--linie:var(--linie-t);--ink:var(--kohle);--dim:var(--graphit);--faint:var(--schiefer300);
  --disc:var(--creme);--ring:var(--linie-t);--ring2:var(--altrosa300);--hint:var(--graphit);
  --akzent:var(--beere500);--akzent-ink:var(--papier-warm);--gebet:var(--altrosa700);--sek-border:var(--kohle);--sek-ink:var(--kohle);--link:var(--beere500);
  --schalter-an:var(--beere500);--warn:#8a3b2e;
  --sans:'Figtree','Helvetica Neue',Arial,sans-serif;--serif:'Lora',Georgia,serif;
}
/* A · Papier (Store-Klima) - immer hell */
body.thema-A{--grund:var(--papier-warm);--flaeche:var(--creme);--linie:var(--linie-t);--ink:var(--kohle);--dim:var(--graphit);
  --disc:var(--creme);--ring:var(--linie-t);--ring2:var(--altrosa300);--hint:var(--graphit);
  --akzent:var(--beere500);--akzent-ink:var(--papier-warm);--gebet:var(--altrosa700);--sek-border:var(--kohle);--sek-ink:var(--kohle);--link:var(--beere500);--schalter-an:var(--beere500)}
/* B · Kohle (Academy-Klima) - immer dunkel */
body.thema-B{--grund:var(--kohle);--flaeche:var(--kohle-weich);--linie:var(--kohle-weich);--ink:var(--papier-kuehl);--dim:var(--schiefer300);
  --disc:var(--gold500);--ring:var(--kohle-weich);--ring2:var(--gold700);--hint:var(--kohle);
  --akzent:var(--papier-kuehl);--akzent-ink:var(--kohle);--gebet:var(--gold300);--sek-border:var(--schiefer500);--sek-ink:var(--papier-kuehl);--link:var(--gold300);--schalter-an:var(--gold500)}
/* C · Haus (ruach-Klima) */
body.thema-C{--grund:var(--papier-kuehl);--flaeche:#F4EFE7;--linie:var(--linie-t);--ink:var(--kohle);--dim:var(--graphit);
  --disc:var(--karton-kuehl);--ring:var(--linie-t);--ring2:var(--schiefer300);--hint:var(--schiefer500);
  --akzent:var(--beere500);--akzent-ink:var(--papier-kuehl);--gebet:var(--beere700);--sek-border:var(--kohle);--sek-ink:var(--kohle);--link:var(--beere500);--schalter-an:var(--beere500)}
/* D · Tageszeit - morgens Papier mit Salbei, abends Kohle */
body.thema-D{--grund:var(--papier-warm);--flaeche:var(--salbei100);--linie:var(--linie-t);--ink:var(--kohle);--dim:var(--graphit);
  --disc:var(--salbei100);--ring:var(--salbei300);--ring2:var(--linie-t);--hint:var(--salbei700);
  --akzent:var(--salbei700);--akzent-ink:var(--papier-warm);--gebet:var(--salbei700);--sek-border:var(--kohle);--sek-ink:var(--kohle);--link:var(--salbei700);--schalter-an:var(--salbei700)}
body.thema-D.abend{--grund:var(--kohle);--flaeche:var(--kohle-weich);--linie:var(--kohle-weich);--ink:var(--papier-warm);--dim:var(--schiefer300);
  --disc:var(--salbei500);--ring:var(--salbei700);--ring2:var(--kohle-weich);--hint:var(--papier-warm);
  --akzent:var(--papier-warm);--akzent-ink:var(--kohle);--gebet:var(--gold300);--sek-border:var(--schiefer500);--sek-ink:var(--papier-warm);--link:var(--gold300);--schalter-an:var(--gold500)}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--grund);overflow:hidden;transition:background .6s,color .6s}
button{font-family:inherit}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(24px,env(safe-area-inset-top)) 24px 120px;background:var(--grund);transition:background .6s}
.screen.active{display:flex}
.screen > *{width:100%;max-width:420px}
.screen > .kreis,.screen > .btn,.screen > .marke,.screen > .absender{width:auto}

/* Typo */
.lbl,.schritt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center}
.schritt.links{text-align:left}
.lbl.klein{font-size:10px;color:var(--faint)}
.lbl.tageszeit{letter-spacing:.14em;text-transform:none}
.marke{font-weight:500;font-size:17px;letter-spacing:-.015em;text-align:center}
.marke.leise{opacity:.6}
.absender{margin-top:4px;font-size:12px;color:var(--dim);text-align:center}
.text{max-width:340px;text-align:center;font-size:17px;line-height:1.6;white-space:pre-line}
.text.lead{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4}
.text.schluss{font-size:26px;line-height:1.45}
.gebet{max-width:340px;text-align:center;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.6;color:var(--gebet);white-space:pre-line}
.gebet.klein{font-size:15px}
.zeit{font-size:32px;font-weight:400;letter-spacing:-.015em;color:var(--dim);font-variant-numeric:tabular-nums;text-align:center}
.meta{font-size:15px;line-height:1.47;color:var(--dim);text-align:center}
.meta.klein{font-size:13px}
.zsub{max-width:280px;line-height:1.6;min-height:42px}
.frage-impuls{font-weight:600;font-size:17px;line-height:1.4;text-align:center}
.herkunft{max-width:340px;line-height:1.6}
.herkunft a{color:var(--link);text-decoration:underline}

/* Abstände */
.mt-s{margin-top:10px}.mt-m{margin-top:22px}.mt-l{margin-top:30px}.mt-xl{margin-top:40px}.mt-xxl{margin-top:50px}
.mt-kreis{margin-top:4vh}
.gap-kopf{height:56px;flex-shrink:0}.gap-schluss{height:10vh;flex-shrink:0}

/* Knöpfe */
.btn{min-height:48px;padding:12px 24px;border-radius:6px;border:1px solid var(--sek-border);font-size:15px;font-weight:600;color:var(--sek-ink);background:none;cursor:pointer;letter-spacing:0}
.btn.voll{background:var(--akzent);color:var(--akzent-ink);border-color:var(--akzent)}
.btn.leise{border-color:var(--linie);color:var(--dim);font-weight:500}
.btn.breit{width:100%;border-radius:14px;text-transform:none;letter-spacing:.04em;font-size:13px}
.btn.zeile-btn{min-height:40px;padding:8px 16px;font-size:14px}
.row{display:flex;gap:12px;justify-content:center}
.cta{display:flex;justify-content:center}
.abbruch{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;width:36px;height:36px;border-radius:6px;border:1px solid var(--linie);color:var(--dim);background:none;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:3}

/* Atemscheibe (flach, Bewegung statt Verlauf) */
.kreis{position:relative;flex-shrink:0}
.screen > .kreis-gross{width:min(84vw,320px);height:min(84vw,320px)}
.screen > .kreis-mittel{width:220px;height:220px}
.screen > .kreis-klein{width:150px;height:150px}
.kreis .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--ring)}
.kreis .ring2{position:absolute;inset:9%;border-radius:50%;border:1px solid var(--ring2)}
.kreis .atem{position:absolute;inset:14%;border-radius:50%;background:var(--disc);will-change:transform;transition:background .6s}
.kreis .wort{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);transition:opacity 1.2s;pointer-events:none}

/* Zustände */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.zchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 12px;border-radius:6px;border:1px solid var(--linie);background:var(--flaeche);min-height:100px;cursor:pointer;transition:all .3s;color:var(--ink)}
.zchip.sel{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent)}
.zchip .n{font-family:var(--serif);font-size:18px}
.zchip .w{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.flaeche{padding:22px;border-radius:6px;background:var(--flaeche);border:1px solid var(--linie);display:flex;flex-direction:column;gap:18px;align-items:center}

textarea{width:100%;padding:16px;border-radius:6px;resize:none;background:var(--flaeche);border:1px solid var(--linie);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6}
textarea:focus{outline:none;border-color:var(--akzent)}
textarea::placeholder{color:var(--dim)}
textarea.gedanken{min-height:38vh}
.fragen{display:flex;flex-direction:column;gap:18px}
.frage{display:flex;flex-direction:column;gap:8px}
.frage .q{font-weight:600;font-size:17px;line-height:1.4}

.kopf{display:flex;flex-direction:column;gap:6px}
.kopf h1{font-weight:500;font-size:32px;line-height:1.18;letter-spacing:-.015em}
.kopf p{font-size:15px;line-height:1.47;color:var(--dim)}

/* Journal */
.journal{display:flex;flex-direction:column;gap:14px}
.eintrag{padding:18px;border-radius:6px;background:var(--flaeche);border:1px solid var(--linie);display:flex;flex-direction:column;gap:8px}
.eintrag .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.eintrag .datum{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.eintrag .badge{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.eintrag .kontext{font-size:15px;line-height:1.47;color:var(--dim)}
.eintrag .zitat{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--dim)}
.eintrag .q{font-weight:600;font-size:15px;line-height:1.4;margin-top:4px}
.eintrag .a{font-family:var(--serif);font-size:17px;line-height:1.6;white-space:pre-line}
.eintrag .a.leer{color:var(--faint);font-style:italic}
.eintrag .fuss{display:flex;justify-content:flex-end}
.eintrag .fuss button{background:none;border:0;color:var(--faint);font-size:13px;cursor:pointer;padding:4px 0;font-family:inherit}
.journal .leer-hinweis{text-align:center;color:var(--dim);font-size:15px;line-height:1.6;padding:24px 0}

/* Karten (Serien, Mehr) */
.karte{padding:18px;border-radius:6px;background:var(--flaeche);border:1px solid var(--linie);display:flex;flex-direction:column;gap:6px;margin-top:14px}
.karte.zu{opacity:.55}
.etikett{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.karte h2{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.27}
.karte .meta{text-align:left}
.karte a{color:var(--link);text-decoration:underline}
.tagrow{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--linie);cursor:pointer;min-height:48px;background:none;border-left:0;border-right:0;border-top:0;width:100%;color:var(--ink);text-align:left}
.tagrow:last-of-type{border-bottom:none}
.tagrow .l{display:flex;gap:14px;align-items:baseline}
.tagrow .num{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--dim);width:26px}
.tagrow .name{font-size:17px}
.tagrow.heute .name{color:var(--akzent);font-weight:600}
.tagrow.done .name{color:var(--dim)}
.tagrow .r{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.karte-aktionen{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.zeile{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--linie);font-size:17px;min-height:48px;gap:12px}
.zeile:last-child{border-bottom:none}
.zeile .wert{color:var(--dim);font-size:15px;white-space:nowrap;background:none;border:0;cursor:pointer;padding:6px 0;font-family:inherit}
.zeile .wert.warn{color:var(--warn)}
.zeile .zeit-input,.zeile .auswahl{font:inherit;font-size:15px;color:var(--ink);background:var(--grund);border:1px solid var(--linie);border-radius:6px;padding:6px 8px}
.schalter{width:44px;height:26px;border-radius:6px;background:var(--linie);position:relative;cursor:pointer;transition:background .3s;flex-shrink:0;border:0;padding:0}
.schalter i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:4px;background:var(--grund);transition:left .3s}
.schalter.an{background:var(--schalter-an)} .schalter.an i{left:21px}
.privat{margin-top:20px;padding:16px;border-radius:6px;background:var(--flaeche);border:1px solid var(--linie);font-size:15px;line-height:1.47;color:var(--dim)}
.privat b{color:var(--ink);font-weight:600}
.privat a{color:var(--link)}

#tabs{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-around;align-items:center;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:var(--grund);border-top:1px solid var(--linie);transition:background .6s}
#tabs[hidden]{display:none}
.tab{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;min-width:88px}
.tab.active{color:var(--ink);font-weight:600}

#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--grund);padding:10px 18px;border-radius:6px;font-size:15px;opacity:0;transition:all .4s;pointer-events:none;z-index:20;max-width:90vw;text-align:center}
#toast.zeig{opacity:1;transform:translateX(-50%) translateY(0)}

[hidden]{display:none !important}

/* Reduzierte Bewegung: Übergänge aus, der Atemkreis atmet weiter (Inhalt,
   nicht Dekoration - siehe app.js atem()). */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* Datenschutz-Seite (normale, scrollbare Seite) */
body.seite-body{overflow:auto}
.seite{max-width:640px;margin:0 auto;padding:32px 24px 60px;font-size:17px;line-height:1.6}
.seite h1{font-weight:500;font-size:32px;letter-spacing:-.015em;margin:18px 0 10px}
.seite h2{font-family:var(--serif);font-weight:500;font-size:21px;margin:26px 0 6px}
.seite p{margin:0 0 12px}
.seite a{color:var(--link)}
.seite .zurueck{font-size:14px;color:var(--dim);text-decoration:none}
.seite .lead-seite{font-size:19px}
.seite .meta-seite{margin-top:28px;font-size:14px;color:var(--dim)}