/* 
   MEIN TAG, v1.3
   Drei Themes: daemmer (Standard, gedämpftes Blau-Violett),
   dunkel (Nacht), hell (heller Tag, aber nie grelles Weiß).
   Mobile-first. Ruhig, strukturiert, nicht überladen.
    */

[hidden] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/*  Dämmerung (Standard)  */
:root, [data-theme="daemmer"] {
  --gruen: #6cc295;
  --gruen-tief: #b9ead0;
  --akzent: #7fb5e6;
  --pfirsich: #f0a878;
  --sonne: #f0c969;
  --lila: #a98fd6;
  --rot: #e57b7b;

  --bg: radial-gradient(ellipse at top, #2b2d52 0%, #232544 45%, #1c1e38 100%);
  --karte: #2e3057;
  --karte-2: #363a66;
  --rand: #3f4374;
  --text: #eef0fb;
  --text-weich: #bcc0e4;
  --text-leise: #8b8fc4;
  --schatten: 0 8px 28px rgba(0,0,0,0.3);

  --radius: 22px;
  --radius-s: 14px;
  --tabbar-h: 66px;
  --krisen-h: 38px;
}

/*  Dunkel (Nacht)  */
[data-theme="dunkel"] {
  --gruen: #6cc295; --gruen-tief: #bfe9d2; --akzent: #6fb0e8;
  --pfirsich: #eaa376; --sonne: #efc762; --lila: #ad93da; --rot: #e87d7d;
  --bg: linear-gradient(165deg, #0e0f1c 0%, #14152a 50%, #0f1320 100%);
  --karte: #1a1c30; --karte-2: #20233c; --rand: #2c2f4e;
  --text: #e8eaf6; --text-weich: #aab0d4; --text-leise: #767 aa;
  --text-leise: #767caa;
  --schatten: 0 8px 28px rgba(0,0,0,0.5);
}

/*  Hell (Tag, gedämpft, kein reines Weiß)  */
[data-theme="hell"] {
  --gruen: #2d8a5f; --gruen-tief: #1d6b46; --akzent: #3d7fb8;
  --pfirsich: #e08a52; --sonne: #d9a93a; --lila: #7d5fc0; --rot: #cf5151;
  --bg: linear-gradient(165deg, #e7e3da 0%, #e4dfe4 40%, #dde6ea 100%);
  --karte: #fbf9f5; --karte-2: #f1eee7; --rand: #e0dad0;
  --text: #2b2d44; --text-weich: #565a78; --text-leise: #8a8ea8;
  --schatten: 0 6px 20px rgba(40,42,68,0.1);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  font-size: 16px; line-height: 1.5;
  padding-bottom: calc(var(--tabbar-h) + var(--krisen-h));
  transition: background 0.5s, color 0.4s;
}

.container { max-width: 580px; margin: 0 auto; padding: 22px 16px 24px; }

/*  Kopf  */
header { text-align: center; padding: 10px 0 18px; }
header h1 {
  font-size: 27px; font-weight: 800; letter-spacing: -0.3px;
  background: linear-gradient(120deg, var(--gruen), var(--akzent), var(--lila));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.header-sub { color: var(--text-leise); margin-top: 4px; font-size: 14px; }

.seite { animation: rein 0.3s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/*  Karten  */
.karte {
  position: relative;
  background: var(--karte);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 15px;
  box-shadow: var(--schatten);
  overflow: hidden;
}
.karte-akzent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.akzent-gruen { background: var(--gruen); }
.akzent-pfirsich { background: var(--pfirsich); }
.akzent-sonne { background: var(--sonne); }
.akzent-lila { background: var(--lila); }
.akzent-himmel { background: var(--akzent); }
.akzent-rot { background: var(--rot); }

h2 { font-size: 18px; margin-bottom: 10px; color: var(--text); font-weight: 700; }
h3 { font-size: 16px; margin-bottom: 8px; color: var(--text); }
.intro { font-size: 14px; color: var(--text-weich); line-height: 1.65; margin-bottom: 16px; }

/*  Buttons  */
.btn-voll {
  width: 100%; padding: 15px; margin-top: 14px;
  background: linear-gradient(135deg, var(--gruen), var(--akzent));
  color: #11221a; border: none; border-radius: var(--radius-s);
  font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: transform 0.15s, filter 0.15s;
}
.btn-voll:hover { transform: translateY(-2px); filter: brightness(1.05); }
[data-theme="hell"] .btn-voll { color: #fff; }

.btn-weich {
  padding: 11px 18px; background: var(--karte-2); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius-s);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: filter 0.15s;
}
.btn-weich:hover { filter: brightness(1.08); }

.btn-gefahr {
  padding: 11px 18px; background: transparent; color: var(--rot);
  border: 1px solid var(--rot); border-radius: var(--radius-s);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/*  Stimmung  */
.emojis { display: flex; gap: 8px; }
.emoji-btn {
  flex: 1; padding: 14px 4px; border: 2px solid var(--rand);
  border-radius: 16px; background: var(--karte-2); cursor: pointer;
  font-size: 28px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color 0.2s, transform 0.15s, background 0.2s; font-family: inherit;
}
.emoji-btn span { font-size: 11px; color: var(--text-weich); font-weight: 600; }
.emoji-btn:hover { transform: translateY(-3px); }
.emoji-btn.gewaehlt { border-color: var(--gruen); background: rgba(108,194,149,0.18); transform: scale(1.04); }

/* erweitert */
.erweitert-zeigen {
  width: 100%; margin-top: 14px; padding: 11px;
  background: transparent; border: 1px dashed var(--rand);
  border-radius: var(--radius-s); color: var(--text-leise);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.erweitert { margin-top: 12px; background: var(--karte-2); border-radius: var(--radius-s); padding: 16px; }
.erweitert-hinweis { font-size: 12px; color: var(--text-leise); margin-bottom: 14px; line-height: 1.5; }
.slider-gruppe { margin-bottom: 14px; }
.slider-gruppe:last-child { margin-bottom: 0; }
.slider-gruppe label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.slider-wert { background: var(--karte); border-radius: 8px; padding: 1px 10px; color: var(--akzent); font-weight: 800; }
.slider-gruppe input[type="range"] { width: 100%; accent-color: var(--akzent); height: 26px; cursor: pointer; }
.slider-enden { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-leise); }

/*  Frage des Tages  */
.frage-karte {
  background: linear-gradient(135deg, var(--lila), var(--akzent));
}
.frage-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); font-weight: 800; }
.frage-text { color: #fff; font-size: 18px; line-height: 1.55; font-weight: 500; margin-top: 8px; }

/*  Schnellzugriff  */
.schnell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.schnell-btn {
  background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--radius-s);
  padding: 16px 10px; cursor: pointer; font-family: inherit; color: var(--text);
  font-size: 13px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform 0.15s, border-color 0.2s;
}
.schnell-btn:hover { transform: translateY(-2px); border-color: var(--gruen); }
.schnell-icon { font-size: 26px; }

/*  Textfelder  */
textarea, input[type="text"] {
  width: 100%; border: 2px solid var(--rand); border-radius: var(--radius-s);
  padding: 13px; font-size: 15px; font-family: inherit; color: var(--text);
  background: var(--karte-2); outline: none; line-height: 1.6; transition: border-color 0.2s;
}
textarea { min-height: 110px; resize: vertical; }
textarea:focus, input[type="text"]:focus { border-color: var(--gruen); }
.tagebuch-karte input.tagebuch-karte textarea { margin-bottom: 0; }
#brueckeZiel, #vorhabenFeld { margin-bottom: 10px; }

.status-text { font-size: 13px; color: var(--gruen); margin-top: 8px; font-weight: 600; line-height: 1.5; }

/*  Krisen-Karte  */
.krisen-karte { background: linear-gradient(135deg, #c9485b, #d96b6b); }
.krisen-karte h2 { color: #fff; }
.krisen-karte p { color: rgba(255,255,255,0.95); font-size: 14px; line-height: 1.65; margin-bottom: 14px; }
.btn-krisen { display: inline-block; background: #fff; color: #c9485b; padding: 12px 18px; border-radius: var(--radius-s); font-weight: 800; text-decoration: none; font-size: 14px; }

/*  Check-in  */
.checkin-karte { background: var(--karte); border: 1px solid var(--sonne); }
.checkin-ziel { font-size: 15px; color: var(--text); font-style: italic; margin-bottom: 12px; }
.checkin-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.checkin-buttons button { flex: 1; min-width: 110px; }

/*  Kurve  */
.kurve-wrap { width: 100%; overflow: hidden; }
#kurveSvg { width: 100%; height: auto; }
.kurve-hinweis { font-size: 12px; color: var(--text-leise); margin-top: 10px; line-height: 1.55; }
.kurve-punkt { cursor: pointer; }

/*  Was geholfen hat  */
.gehalf-karte { background: var(--karte-2); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 8px; border-left: 3px solid var(--sonne); }
.gehalf-datum { font-size: 11px; color: var(--text-leise); }
.gehalf-karte p { font-size: 14px; color: var(--text); line-height: 1.6; margin-top: 2px; }
.leer-hinweis { font-size: 13px; color: var(--text-leise); line-height: 1.6; padding: 6px 0; }

/*  Brücke-Ergebnis  */
.bruecke-ergebnis { margin-top: 14px; background: var(--karte-2); border-radius: var(--radius-s); padding: 16px; font-size: 15px; line-height: 1.7; border-left: 3px solid var(--sonne); }

/*  Einträge  */
.eintrag-karte { background: var(--karte-2); border-radius: var(--radius-s); padding: 15px; margin-bottom: 11px; border-left: 3px solid var(--gruen); }
.eintrag-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.eintrag-datum { font-size: 12px; color: var(--text-leise); }
.eintrag-stimmung { font-size: 14px; font-weight: 800; color: var(--gruen); }
.eintrag-extra { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.eintrag-badge { font-size: 11px; font-weight: 600; background: var(--karte); color: var(--text-weich); border-radius: 7px; padding: 3px 9px; }
.eintrag-text { font-size: 15px; color: var(--text); line-height: 1.65; white-space: pre-wrap; }

/*  Übungen  */
.uebung-kategorie { font-size: 12px; font-weight: 800; color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 10px; }
.uebung-kategorie:first-child { margin-top: 0; }
.uebung { border: 1px solid var(--rand); border-radius: var(--radius-s); margin-bottom: 9px; overflow: hidden; background: var(--karte-2); }
.uebung-kopf { width: 100%; padding: 14px 15px; background: none; border: none; text-align: left; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: inherit; }
.uebung-dauer { font-size: 11px; font-weight: 600; color: var(--text-leise); background: var(--karte); border-radius: 7px; padding: 3px 8px; margin-left: auto; flex-shrink: 0; }
.uebung-pfeil { color: var(--text-leise); transition: transform 0.25s; flex-shrink: 0; }
.uebung.offen .uebung-pfeil { transform: rotate(180deg); }
.uebung-inhalt { display: none; padding: 0 15px 15px; }
.uebung.offen .uebung-inhalt { display: block; }
.uebung-inhalt p.uebung-inhalt li { font-size: 14px; color: var(--text-weich); line-height: 1.75; }
.uebung-inhalt ol { padding-left: 20px; margin: 8px 0 10px; }
.uebung-beschreibung { font-style: italic; margin-bottom: 4px; }
.atmung-anzeige { text-align: center; padding: 18px 0 8px; }
.atmung-kreis { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, var(--akzent), var(--gruen)); margin: 0 auto 12px; transition: transform 4s ease-in-out; }
.atmung-kreis.gross { transform: scale(1.6); }
.atmung-text { font-size: 15px; font-weight: 600; color: var(--text); }

/*  Denkfallen  */
.denkfalle { background: var(--karte-2); border-radius: var(--radius-s); padding: 14px 15px; margin-bottom: 9px; cursor: pointer; border-left: 3px solid var(--akzent); }
.denkfalle strong { font-size: 14px; color: var(--text); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.denkfalle-pfeil { color: var(--text-leise); transition: transform 0.25s; }
.denkfalle.offen .denkfalle-pfeil { transform: rotate(180deg); }
.denkfalle-detail { display: none; margin-top: 10px; }
.denkfalle.offen .denkfalle-detail { display: block; }
.denkfalle-detail p { font-size: 14px; color: var(--text-weich); line-height: 1.7; margin-bottom: 8px; }
.denkfalle-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-leise); }
.denkfalle-beispiel { background: var(--karte); border-radius: 8px; padding: 9px 12px; font-style: italic; }
.denkfalle-tipp { background: rgba(108,194,149,0.14); border-radius: 8px; padding: 9px 12px; }

/*  Hilfe  */
.hilfe-beruhigung { background: rgba(108,194,149,0.14); border-radius: var(--radius-s); padding: 15px; font-size: 14px; line-height: 1.65; color: var(--text); margin-bottom: 15px; }
.hilfe-karte { background: var(--karte-2); border-radius: var(--radius-s); padding: 14px 15px; margin-bottom: 9px; }
.hilfe-karte.dringend { border-left: 3px solid var(--rot); }
.hilfe-karte strong { font-size: 14px; color: var(--text); }
.hilfe-karte p { font-size: 14px; color: var(--text-weich); line-height: 1.65; margin-top: 3px; }
.hilfe-karte a { color: var(--gruen); font-weight: 700; text-decoration: none; }
.hilfe-karte a:hover { text-decoration: underline; }

/*  Einstellungen  */
.setting { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rand); }
.setting:last-child { border-bottom: none; }
.setting-block { flex-direction: column; align-items: stretch; }
.setting-text strong { font-size: 15px; color: var(--text); }
.setting-text p { font-size: 12px; color: var(--text-leise); margin-top: 2px; line-height: 1.5; }
.setting button.setting .datei-label { flex-shrink: 0; }
.datei-label { display: inline-block; text-align: center; }
.intens-gruppe { display: flex; gap: 8px; margin-top: 12px; }
.intens-btn { flex: 1; padding: 10px; background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--radius-s); color: var(--text-weich); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.intens-btn.aktiv { background: var(--gruen); color: #11221a; border-color: var(--gruen); }

/*  In-App-Nachricht  */
.nachricht-popup { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: calc(100% - 28px); max-width: 540px; z-index: 200; animation: nachRein 0.5s ease-out; }
@keyframes nachRein { from { opacity: 0; transform: translateX(-50%) translateY(-18px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.nachricht-inhalt { background: linear-gradient(135deg, var(--gruen), var(--akzent)); color: #11221a; border-radius: var(--radius); padding: 15px 42px 15px 15px; display: flex; gap: 11px; align-items: flex-start; box-shadow: 0 12px 36px rgba(0,0,0,0.35); position: relative; }
[data-theme="hell"] .nachricht-inhalt { color: #fff; }
.nachricht-icon { font-size: 22px; flex-shrink: 0; }
.nachricht-inhalt p { font-size: 15px; line-height: 1.55; font-weight: 500; }
.nachricht-schliessen { position: absolute; top: 9px; right: 9px; background: rgba(255,255,255,0.3); border: none; color: inherit; width: 27px; height: 27px; border-radius: 50%; cursor: pointer; font-size: 12px; }

/*  Overlays / Onboarding  */
.overlay { position: fixed; inset: 0; background: rgba(10,11,24,0.7); backdrop-filter: blur(6px); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 18px; }
.overlay-karte { background: var(--karte); border-radius: 26px; padding: 30px 24px; max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; text-align: center; animation: karteRein 0.35s ease-out; }
@keyframes karteRein { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.onb-emoji { font-size: 46px; margin-bottom: 12px; }
.overlay-karte h2 { font-size: 21px; margin-bottom: 10px; line-height: 1.4; }
.overlay-karte p { font-size: 15px; color: var(--text-weich); line-height: 1.7; margin-bottom: 16px; }
.onb-fortschritt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-leise); font-weight: 800; margin-bottom: 8px; }
.onb-balken { height: 5px; background: var(--rand); border-radius: 5px; margin-bottom: 18px; overflow: hidden; }
.onb-balken-fill { height: 100%; background: linear-gradient(90deg, var(--gruen), var(--akzent)); border-radius: 5px; transition: width 0.3s; }
.onb-label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-weich); margin-bottom: 6px; }
.overlay-karte input[type="text"] { margin-bottom: 16px; }
.onb-antwort { display: block; width: 100%; padding: 14px 16px; margin-bottom: 10px; background: var(--karte-2); border: 2px solid var(--rand); border-radius: var(--radius-s); font-size: 15px; font-family: inherit; color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.onb-antwort:hover { border-color: var(--gruen); }
.onb-antwort strong { font-weight: 700; }
.onb-sub { font-size: 12px; color: var(--text-leise); }
.onb-link { background: none; border: none; color: var(--text-leise); font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 8px; font-family: inherit; }
.onb-empfohlen { font-size: 12px; color: var(--text-leise); font-style: italic; margin-bottom: 14px; }
.overlay-karte .emojis { margin-bottom: 4px; }

/* Brief-Popup */
.brief-karte { text-align: left; }
.brief-karte h2.brief-karte .onb-emoji.brief-popup-intro { text-align: center; }
.brief-text { background: var(--karte-2); border-radius: var(--radius-s); padding: 18px; font-size: 15px; line-height: 1.8; color: var(--text); white-space: pre-wrap; margin-bottom: 16px; border-left: 3px solid var(--sonne); }
.brief-hilfe { background: rgba(108,194,149,0.14); border-radius: var(--radius-s); padding: 14px; margin-bottom: 16px; }
.brief-hilfe p { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0; }

/*  Footer  */
footer { text-align: center; padding: 18px 14px; font-size: 12px; color: var(--text-leise); line-height: 1.9; }

/*  Krisen-Leiste  */
.krisen-leiste { position: fixed; bottom: var(--tabbar-h); left: 0; right: 0; height: var(--krisen-h); background: rgba(20,22,42,0.95); display: flex; align-items: center; justify-content: center; z-index: 150; border-top: 1px solid var(--rand); }
[data-theme="hell"] .krisen-leiste { background: rgba(40,42,68,0.95); }
.krisen-leiste a { color: var(--gruen-tief); font-size: 13px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.krisen-leiste a:hover { text-decoration: underline; }

/*  Tab-Bar  */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabbar-h); background: var(--karte); border-top: 1px solid var(--rand); display: flex; z-index: 160; }
.tab { flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--text-leise); font-family: inherit; padding: 6px 2px; transition: color 0.2s; }
.tab-icon { font-size: 20px; opacity: 0.6; transition: opacity 0.2s, transform 0.2s; }
.tab.aktiv { color: var(--gruen); }
.tab.aktiv .tab-icon { opacity: 1; transform: translateY(-2px) scale(1.1); }

@media (min-width: 620px) {
  .tabbar.krisen-leiste { max-width: 580px; left: 50%; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/*  NEU in v1.3.1  */

/*  Frage-Spiel  */
.spiel-karte h2 { margin-bottom: 14px; }
.spiel-balken { height: 7px; background: var(--rand); border-radius: 7px; overflow: hidden; margin: 12px 0 6px; }
.spiel-balken-fill { height: 100%; background: linear-gradient(90deg, var(--lila), var(--akzent)); border-radius: 7px; transition: width 0.4s; }
.spiel-zaehler { font-size: 12px; color: var(--text-leise); text-align: center; margin-bottom: 4px; }
.spiel-runde-pos { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lila); margin-bottom: 10px; }
.spiel-frage { font-size: 17px; line-height: 1.45; margin-bottom: 14px; color: var(--text); }
.spiel-antwort { margin-bottom: 9px; }
.spiel-fertig { text-align: center; padding: 8px 0; }
.spiel-fertig-icon { font-size: 40px; display: block; margin-bottom: 10px; }
.spiel-fertig p { font-size: 15px; color: var(--text-weich); line-height: 1.6; margin-bottom: 12px; }

/*  Was mir geholfen hat  */
.gehalf-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 8px; }
.gehalf-quelle { font-size: 11px; font-weight: 700; color: var(--text-leise); }
.gehalf-add { width: 100%; margin-top: 12px; }
.wasGehalf-formular { margin-top: 12px; background: var(--karte-2); border-radius: var(--radius-s); padding: 16px; }
.wasGehalf-formular input { margin-bottom: 10px; }

/*  Übungs-Dokumentation  */
.uebung-felder li { margin-bottom: 8px; }
.uebung-feld { width: 100%; margin-top: 5px; padding: 9px 11px; font-size: 14px; border: 1.5px solid var(--rand); border-radius: 10px; background: var(--karte); color: var(--text); }
.uebung-feld:focus { border-color: var(--gruen); outline: none; }

.uebung-doku { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rand); }
.doku-zeile { margin-bottom: 12px; }
.doku-zeile label { display: block; font-size: 13px; font-weight: 600; color: var(--text-weich); margin-bottom: 7px; line-height: 1.4; }
.doku-skala { display: flex; gap: 6px; }
.doku-smiley { flex: 1; padding: 8px 0; font-size: 24px; background: var(--karte); border: 2px solid var(--rand); border-radius: 11px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.doku-smiley:hover { transform: translateY(-2px); }
.doku-smiley.gewaehlt { border-color: var(--gruen); background: rgba(108,194,149,0.18); transform: scale(1.05); }
.doku-notiz-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-weich); margin: 4px 0 7px; }
.doku-notiz { width: 100%; min-height: 60px; padding: 10px; font-size: 14px; border: 1.5px solid var(--rand); border-radius: 11px; background: var(--karte); color: var(--text); resize: vertical; font-family: inherit; }
.doku-notiz:focus { border-color: var(--gruen); outline: none; }
.uebung-doku .btn-weich { margin-top: 10px; width: 100%; }
.doku-status { font-size: 13px; color: var(--gruen); font-weight: 600; margin-top: 8px; text-align: center; }

/*  Notruf-Block (deutlich, ganz unten)  */
.notruf-block {
  display: block; text-decoration: none; text-align: center;
  margin-top: 18px; padding: 18px 16px;
  background: linear-gradient(135deg, #b8323f, #d44848);
  border-radius: var(--radius-s);
  border: 2px solid #ff6b6b;
  box-shadow: 0 6px 20px rgba(184,50,63,0.35);
}
.notruf-warnung { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #ffd9d9; margin-bottom: 4px; }
.notruf-nummer { display: block; font-size: 34px; font-weight: 900; color: #fff; line-height: 1.1; }
.notruf-text { display: block; font-size: 13px; color: rgba(255,255,255,0.92); margin-top: 6px; line-height: 1.5; }

/*  NEU in v1.3.2  */

/*  Bessere Slider  */
.slider-frage { font-size: 15px; font-weight: 700; }
.slider-unterfrage { font-size: 12px; color: var(--text-leise); margin: 2px 0 8px; line-height: 1.4; }

/*  Frage des Tages: beantwortbar  */
.frage-antwort-btn {
  margin-top: 14px; width: 100%; padding: 12px;
  background: rgba(255,255,255,0.22); color: #fff; border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-s); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.frage-antwort-btn:hover { background: rgba(255,255,255,0.32); }
.frage-antwort-box { margin-top: 12px; }
.frage-antwort-box textarea {
  width: 100%; min-height: 90px; padding: 12px; border-radius: var(--radius-s);
  border: none; font-size: 15px; font-family: inherit; resize: vertical;
  background: rgba(255,255,255,0.95); color: #2b2d44;
}
.btn-frage-speichern {
  margin-top: 10px; width: 100%; padding: 13px; background: #fff; color: var(--lila);
  border: none; border-radius: var(--radius-s); font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
}

/*  "Dafür lohnt es sich"-Liste  */
.lohnt-karte-sektion h2 { color: var(--text); }
.lohnt-karte {
  display: flex; align-items: center; gap: 10px;
  background: var(--karte-2); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 8px;
  border-left: 3px solid var(--sonne);
}
.lohnt-stern { font-size: 18px; flex-shrink: 0; }
.lohnt-karte p { flex: 1; font-size: 15px; color: var(--text); line-height: 1.4; }
.lohnt-entfernen {
  background: none; border: none; color: var(--text-leise); cursor: pointer;
  font-size: 13px; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
}
.lohnt-entfernen:hover { background: var(--rand); color: var(--rot); }
.lohnt-add { width: 100%; margin-top: 12px; }
.lohnt-formular { margin-top: 12px; background: var(--karte-2); border-radius: var(--radius-s); padding: 16px; }
.lohnt-formular input { margin-bottom: 10px; }

/*  Brücke neu: Schritte + Belohnung  */
.feld-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-weich); margin-bottom: 6px; margin-top: 4px; }
.feld-hinweis { font-size: 12px; color: var(--text-leise); margin: -4px 0 10px; line-height: 1.5; }
#brueckeBelohnung { margin-bottom: 4px; }
.bruecke-schritt-block { display: flex; gap: 12px; align-items: flex-start; background: var(--karte-2); border-radius: var(--radius-s); padding: 14px; }
.bruecke-belohnung-block { background: rgba(240,201,105,0.16); }
.bruecke-nr { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--gruen); color: #11221a; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.bruecke-belohnung-block .bruecke-nr { background: var(--sonne); }
.bruecke-schritt-block strong { font-size: 13px; color: var(--text); display: block; margin-bottom: 3px; }
.bruecke-schritt-block p { font-size: 14px; color: var(--text-weich); line-height: 1.6; }
.bruecke-pfeil { text-align: center; font-size: 20px; color: var(--text-leise); margin: 6px 0; }
.bruecke-belohnung-tipp { font-size: 13px; color: var(--text-weich); line-height: 1.6; margin-top: 12px; background: var(--karte-2); border-radius: var(--radius-s); padding: 12px; }
.bruecke-merksatz { font-size: 14px; color: var(--text-weich); line-height: 1.6; margin-top: 14px; text-align: center; }
.bruecke-merken { width: 100%; margin-top: 14px; }

/*  Verlauf-Motivation  */
.verlauf-motivation {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(108,194,149,0.16), rgba(127,181,230,0.16));
  border-radius: var(--radius-s); padding: 16px; margin-bottom: 16px;
}
.moti-icon { font-size: 28px; flex-shrink: 0; }
.moti-text { font-size: 14px; color: var(--text); line-height: 1.6; font-weight: 500; }

/* Tagesrückblick: Modus-Schalter */
.modus-schalter { display: flex; gap: 8px; margin-bottom: 16px; background: var(--karte-2); border-radius: var(--radius-s); padding: 4px; }
.modus-btn { flex: 1; padding: 10px; background: none; border: none; border-radius: 11px; color: var(--text-leise); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s; }
.modus-btn.aktiv { background: var(--karte); color: var(--gruen); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.rueckblick-frage { font-size: 14px; color: var(--text-weich); line-height: 1.6; margin-bottom: 12px; }

/* Kurz-Chips */
.kurz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kurz-chip { padding: 9px 14px; background: var(--karte-2); border: 1.5px solid var(--rand); border-radius: 20px; color: var(--text-weich); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.kurz-chip:hover { border-color: var(--gruen); }
.kurz-chip.gewaehlt { background: rgba(108,194,149,0.2); border-color: var(--gruen); color: var(--gruen); }
#kurzFeld { margin-bottom: 4px; }