/* ============ Anker — ruhiges, warmes Design ============ */
:root {
  --bg: #f6f4ee;
  --karte: #ffffff;
  --karte-2: #f0efe8;
  --linie: #e4e1d6;
  --text: #2b3a33;
  --leise: #75837b;
  --gruen: #4f7d68;          /* Primär: Eukalyptus */
  --gruen-dunkel: #3d6553;
  --gruen-hell: #dcebe3;
  --sand: #e9c46a;
  --terra: #d97b5f;
  --blau: #8fb3d9;
  --gefahr: #b4544a;
  --radius: 18px;
  --schatten: 0 8px 24px -14px rgba(43, 58, 51, .35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131a17;
    --karte: #1c2520;
    --karte-2: #232e28;
    --linie: #2e3a33;
    --text: #e6ede9;
    --leise: #93a49b;
    --gruen: #6fae90;
    --gruen-dunkel: #8cc4a8;
    --gruen-hell: #24352c;
    --schatten: 0 8px 24px -14px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.seite {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px calc(96px + env(safe-area-inset-bottom));
}

h1 { font-size: 24px; margin: 2px 0 0; letter-spacing: -.4px; }
h2 { font-size: 16.5px; margin: 0 0 10px; letter-spacing: -.2px; }
p { margin: 6px 0; }
a { color: var(--gruen); }
.link { text-decoration: none; }
.leise { color: var(--leise); font-size: 13.5px; }
.klein { font-size: 12px; }
.mitte { text-align: center; }
.verborgen { display: none !important; }
code { background: var(--karte-2); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin: 4px 2px 16px;
}
.kopf-menu { color: var(--leise); }
.kopf-menu svg, .mini-icon {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Karten ---------- */
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 16px;
  margin-bottom: 14px;
}
.karte-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.karte-kopf > * { min-width: 0; }
.karte-kopf h2 { margin: 0; }
.karte-info { background: var(--gruen-hell); border-color: transparent; }
.karten-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.karte-klein {
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: var(--text); margin-bottom: 14px;
}
.karte-schmal {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text); font-weight: 600; font-size: 14.5px;
}
.karte-link:active { transform: scale(.985); }
.karte-icon { color: var(--gruen); }
.karte-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.chip {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--karte-2); color: var(--leise); white-space: nowrap;
}
.chip-ok { background: var(--gruen-hell); color: var(--gruen-dunkel); }

/* ---------- Formulare ---------- */
.stapel { display: flex; flex-direction: column; gap: 12px; }
.zeile { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
/* Felder in einer Zeile: Beschriftungen oben bündig, Eingaben unten bündig */
.zeile > label { align-self: stretch; justify-content: space-between; }
.feld-gross { flex: 1 1 200px; }
.feld-klein { flex: 0 0 110px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; }
input[type=text], input[type=password], input[type=number], input[type=time],
textarea, select {
  font: inherit; font-weight: 400;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--karte-2);
  color: var(--text);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gruen); background: var(--karte);
}
textarea { resize: vertical; }

.btn {
  font: inherit; font-weight: 650; font-size: 14.5px;
  padding: 11px 16px; border-radius: 13px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; transition: transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-primaer { background: var(--gruen); color: #fff; }
.btn-primaer:hover { background: var(--gruen-dunkel); }
.btn-sekundaer { background: var(--karte-2); color: var(--text); border: 1px solid var(--linie); }
.btn-gefahr { background: transparent; color: var(--gefahr); border: 1px solid var(--gefahr); }
.link-gefahr { background: none; border: none; color: var(--gefahr); font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }

.flashes { margin-bottom: 12px; }
.flash {
  padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 8px;
}
.flash-ok { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.flash-warn { background: #f6e3c5; color: #8a5a2a; }
@media (prefers-color-scheme: dark) { .flash-warn { background: #3d321f; color: #e0b872; } }

/* ---------- Auth ---------- */
.auth-karte {
  max-width: 380px; margin: 12vh auto 0; text-align: center;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 22px; padding: 30px 24px; box-shadow: var(--schatten);
}
.auth-logo { font-size: 40px; }
.auth-karte h1 { margin-bottom: 4px; }
.auth-karte form { margin-top: 18px; text-align: left; }

/* ---------- Tabbar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: flex-end;
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 600; text-decoration: none;
  color: var(--leise); min-width: 58px;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.aktiv { color: var(--gruen); }
.tab-kreis {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gruen); color: #fff; margin-top: -22px;
  box-shadow: 0 6px 16px -6px rgba(79, 125, 104, .55);
}
.tab-kreis svg { width: 24px; height: 24px; }
.tab-mitte.aktiv .tab-kreis { background: var(--gruen-dunkel); }
.tab-notfall svg { stroke: var(--terra); }
.tab-notfall.aktiv { color: var(--terra); }

/* ---------- Heute ---------- */
.slider-zeile { gap: 3px; }
.slider-label b { color: var(--gruen); }
input[type=range] {
  width: 100%; accent-color: var(--gruen); height: 30px;
}
.slider-enden { display: flex; justify-content: space-between; }
.slider-enden i { font-style: normal; font-size: 11px; color: var(--leise); font-weight: 400; }

.heute-habits { list-style: none; margin: 0; padding: 0; }
.heute-habits li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.heute-habits li:last-child { border-bottom: none; }
.hcheck {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--linie); background: var(--karte-2);
  display: grid; place-items: center; cursor: pointer; transition: all .15s;
  color: transparent; padding: 0;
}
.hcheck svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hcheck:hover { border-color: var(--gruen); }
.hcheck.an { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hname { font-weight: 650; font-size: 14.5px; }
.sanft-hinweis { color: var(--sand); font-style: normal; font-weight: 600; }
.balken {
  display: block; height: 5px; border-radius: 4px;
  background: var(--karte-2); overflow: hidden; margin-top: 3px;
}
.balken i { display: block; height: 100%; background: var(--gruen); border-radius: 4px; transition: width .3s; }

/* ---------- Tracker ---------- */
.monat-nav { display: flex; gap: 4px; align-items: center; }
.monat-nav a {
  text-decoration: none; font-weight: 650; color: var(--text);
  background: var(--karte); border: 1px solid var(--linie);
  padding: 6px 12px; border-radius: 11px; font-size: 14px;
}
.monat-nav a.aktiv { background: var(--gruen); border-color: var(--gruen); color: #fff; }

.garten { width: 100%; height: auto; display: block; border-radius: 14px; }
.garten-text { margin-top: 8px; }
/* Pflanzen wachsen sichtbar nach, wenn ein Häkchen gesetzt wurde */
.garten .pflanze { transition: transform .5s ease-out; transform-origin: center bottom; }
@keyframes wachsen {
  0%   { transform: translateY(3px) scaleY(.9); opacity: .75; }
  60%  { transform: translateY(-1px) scaleY(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.garten-waechst .pflanze { animation: wachsen .65s ease-out both; }
.garten-waechst .pflanze:nth-child(odd) { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) {
  .garten-waechst .pflanze { animation: none; }
}

/* Gewohnheits-Liste: kompakt, Kalender klappt auf */
.habit-liste { list-style: none; margin: 0; padding: 0; }
.habit-eintrag { border-bottom: 1px solid var(--linie); }
.habit-eintrag:last-child { border-bottom: none; }
.habit-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; cursor: pointer; user-select: none;
}
.habit-kopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; border-radius: 10px; }
.habit-kopf .hcheck { width: 38px; height: 38px; }
.habit-kopf .hcheck svg { width: 19px; height: 19px; }
.habit-kopf .hcheck:disabled { opacity: .45; cursor: default; }
.aufklapp {
  color: var(--leise); font-size: 21px; flex: 0 0 auto;
  transition: transform .18s ease; padding: 0 2px;
}
.habit-eintrag.offen .aufklapp { transform: rotate(90deg); color: var(--gruen); }
.habit-eintrag.offen .hname { color: var(--gruen-dunkel); }
[data-theme="dark"] .habit-eintrag.offen .hname { color: var(--gruen); }
.habit-kalender { padding: 2px 0 14px; }
.habit-bearbeiten { margin-top: 12px; }
.habit-bearbeiten summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--leise);
  list-style: none; padding: 4px 0;
}
.habit-bearbeiten summary::-webkit-details-marker { display: none; }
.habit-bearbeiten summary::before { content: "✎ "; }
.habit-bearbeiten[open] summary { color: var(--gruen); }
.habit-bearbeiten .stapel { margin: 10px 0; }
.habit-bearbeiten .link-gefahr { padding-left: 0; }

.tage-raster {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px;
}
.wt { text-align: center; font-size: 10.5px; color: var(--leise); font-weight: 600; }
.tagzelle {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--karte-2); color: var(--text); font: inherit; font-size: 12.5px;
  cursor: pointer; transition: all .12s; padding: 0;
}
.tagzelle:hover:not(:disabled) { border-color: var(--gruen); }
.tagzelle.an { background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 650; }
.tagzelle.heute { outline: 2px solid var(--sand); outline-offset: 1px; }
.tagzelle:disabled { opacity: .35; cursor: default; }

/* ---------- Atmen ---------- */
.abschnitt-titel { margin: 18px 4px 10px; }
.uebungs-liste { display: flex; flex-direction: column; }
.uebung {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--text);
}
.uebung-nr {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gruen-hell); color: var(--gruen-dunkel);
  display: grid; place-items: center; font-weight: 700;
}
.uebung-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pfeil { color: var(--leise); font-size: 20px; }
.karte-hinweis { background: var(--karte-2); border-style: dashed; box-shadow: none; }
.warnsignal { border-color: var(--sand); background: var(--karte-2); }
.warnsignal .zeile { margin-top: 12px; }
.warnsignal p { margin: 6px 0 0; }
.einladung-link code {
  display: block; word-break: break-all; font-size: 11.5px;
  background: var(--karte-2); padding: 6px 8px; border-radius: 8px;
}
.hinweis-liste { margin: 8px 0 0; padding-left: 18px; }
.hinweis-liste li { margin-bottom: 6px; font-size: 13.5px; color: var(--leise); }

.atem-buehne { text-align: center; padding: 26px 16px; }
.atem-kreis-halter { display: grid; place-items: center; height: 210px; }
.atem-kreis {
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--gruen-hell), var(--gruen));
  display: grid; place-items: center;
  transform: scale(1);
  transition: transform 4s ease-in-out;
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--gruen) 12%, transparent),
              0 0 0 28px color-mix(in srgb, var(--gruen) 6%, transparent);
}
.atem-kreis.einatmen { transform: scale(1.65); }
.atem-kreis.ausatmen { transform: scale(1); }
.atem-kreis.pulsieren { animation: pulsieren 7s ease-in-out infinite; }
@keyframes pulsieren {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.28); }
}
.atem-zahl { font-size: 30px; font-weight: 700; color: #fff; }
.atem-phase { font-size: 16.5px; font-weight: 650; min-height: 24px; margin-top: 10px; }
.atem-rest { min-height: 18px; }
.atem-steuerung {
  display: flex; gap: 10px; justify-content: center; align-items: flex-end;
  margin-top: 14px; flex-wrap: wrap;
}
.stimme-schalter {
  flex-direction: row; align-items: center; gap: 9px; justify-content: center;
  margin-top: 16px; font-weight: 500; font-size: 13.5px; cursor: pointer;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: 12px; padding: 11px 14px; text-align: left;
}
.stimme-schalter input { width: 20px; height: 20px; accent-color: var(--gruen); flex: 0 0 auto; }
.ablauf-details summary { cursor: pointer; font-weight: 600; color: var(--gruen); }
.ablauf-liste { margin: 10px 0 0; padding-left: 20px; }
.ablauf-liste li { margin-bottom: 6px; font-size: 14px; }

/* ---------- Journal ---------- */
.art-schalter { display: flex; gap: 8px; margin-bottom: 14px; }
.art-schalter label { flex: 1; }
.art-schalter input { display: none; }
.art-schalter span {
  display: block; text-align: center; padding: 9px 10px; border-radius: 12px;
  border: 1.5px solid var(--linie); background: var(--karte-2);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.art-schalter input:checked + span {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen-dunkel);
}
.foto-feld input { display: none; }
.journal-text { white-space: pre-wrap; }
.belief-liste { margin: 0; }
.belief-liste dt { font-size: 12px; font-weight: 700; color: var(--gruen-dunkel); text-transform: uppercase; letter-spacing: .4px; margin-top: 10px; }
.belief-liste dd { margin: 2px 0 0; white-space: pre-wrap; }
.foto-galerie { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.foto-galerie img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--linie);
}
.eintrag-fuss { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ---------- Sitzung ---------- */
.notiz-liste { list-style: none; margin: 0; padding: 0; }
.notiz-liste li {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
}
.notiz-liste li:last-child { border-bottom: none; }
.notiz-liste .hcheck { width: 32px; height: 32px; }
.notiz-liste .hcheck svg { width: 16px; height: 16px; }
.durchgestrichen { text-decoration: line-through; color: var(--leise); }
.erledigt-liste { opacity: .8; }
.visually-plain { font-weight: 400; }

/* ---------- Verlauf ---------- */
.legende { display: flex; gap: 14px; font-size: 12.5px; color: var(--leise); margin-bottom: 8px; flex-wrap: wrap; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.dot-stimmung { background: var(--gruen); }
.dot-energie { background: var(--sand); }
.dot-anspannung { background: var(--terra); }
.chart-halter { width: 100%; overflow-x: auto; }
.chart { width: 100%; height: auto; min-width: 480px; }
.gitter { stroke: var(--linie); stroke-width: 1; }
.achse { font-size: 9px; fill: var(--leise); text-anchor: end; }
.mitte-text { text-anchor: middle; }
.kurve { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.k-stimmung { stroke: var(--gruen); }
.k-energie { stroke: var(--sand); }
.k-anspannung { stroke: var(--terra); }
.punkt { stroke: none; }
.punkt.k-stimmung { fill: var(--gruen); }
.punkt.k-energie { fill: var(--sand); }
.punkt.k-anspannung { fill: var(--terra); }
.atem-balken { fill: var(--blau); opacity: .85; }
.monat-historie { list-style: none; margin: 0; padding: 0; }
.monat-historie li { border-bottom: 1px solid var(--linie); }
.monat-historie li:last-child { border-bottom: none; }
.monat-historie a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; text-decoration: none; color: var(--text);
}
.stats-liste { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-liste li { background: var(--karte-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--leise); }
.stats-liste b { display: block; font-size: 19px; color: var(--text); }

/* ---------- Kachel-Menü ---------- */
.kachel-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.kachel {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 16px 14px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 3px; transition: transform .12s, border-color .12s;
  min-height: 118px;
}
.kachel:hover { border-color: var(--gruen); }
.kachel:active { transform: scale(.975); }
.kachel b { font-size: 15px; letter-spacing: -.2px; margin-top: 4px; }
.kachel-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--gruen-hell); color: var(--gruen-dunkel);
  display: grid; place-items: center; margin-bottom: 4px;
}
.kachel-icon svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Notfall ---------- */
.notfall-knopf {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #e8a48c, var(--terra));
  color: #fff; text-decoration: none;
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
  box-shadow: 0 10px 26px -14px rgba(217, 123, 95, .8);
  transition: transform .12s;
}
[data-theme] .notfall-knopf:active, .notfall-knopf:active { transform: scale(.985); }
.notfall-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); display: grid; place-items: center;
}
.notfall-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.notfall-text { flex: 1; display: flex; flex-direction: column; }
.notfall-text b { font-size: 16px; }
.notfall-text span { font-size: 13px; opacity: .92; }
.notfall-knopf .pfeil { color: #fff; opacity: .8; font-size: 22px; }
.notfall-kopf h1 { color: var(--terra); }
.notfall-buehne { border-color: var(--terra); }
.notfall-hilfe { border-color: var(--linie); }
.notfall-hilfe .hinweis-liste li { color: var(--text); }

.satz-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.satz-liste li {
  background: var(--karte-2); border-left: 3px solid var(--gruen);
  border-radius: 0 10px 10px 0; padding: 10px 13px; margin-bottom: 8px;
  font-size: 14.5px;
}
.satz-liste.gross li { font-size: 16px; line-height: 1.45; }
.satz-bearbeiten { background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--gruen); }
.grounding { margin: 10px 0 0; padding-left: 20px; }
.grounding li { margin-bottom: 7px; font-size: 14.5px; }
.grounding b { color: var(--gruen-dunkel); }

/* ---------- Auslöser ---------- */
.ausloeser-situation { margin: 3px 0 0; font-weight: 600; font-size: 15px; }
.staerke-punkte { display: flex; gap: 3px; flex: 0 0 auto; padding-top: 4px; }
.staerke-punkte i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linie); display: block;
}
.staerke-punkte i.voll { background: var(--terra); }
.geholfen { font-size: 13.5px; color: var(--gruen-dunkel); margin-top: 4px; }
[data-theme="dark"] .geholfen { color: var(--gruen); }

/* ---------- Erfolge ---------- */
.erfolg-liste { list-style: none; margin: 0; padding: 0; }
.erfolg-liste li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.erfolg-liste li:last-child { border-bottom: none; }
.erfolg-stern { color: var(--sand); font-size: 17px; line-height: 1.4; flex: 0 0 auto; }

/* ---------- Meine Sätze ---------- */
.glaubenssatz-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.glaubenssatz-liste li {
  border: 1px solid var(--linie); border-radius: 14px;
  padding: 13px 15px; margin-bottom: 10px; background: var(--karte-2);
}
.gs-satz { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--gruen-dunkel); }
[data-theme="dark"] .gs-satz { color: var(--gruen); }
.gs-alt { text-decoration: line-through; }

/* ---------- Woche & Sitzungs-Export ---------- */
.woche-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.wwert {
  background: var(--karte-2); border-radius: 13px; padding: 12px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.wzahl { font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.6px; }
.wlabel { font-size: 12px; color: var(--leise); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-warn { background: var(--accent-soft, #f6e3c5); color: #8a5a2a; }
[data-theme="dark"] .chip-warn { background: #3d321f; color: #e0b872; }
.woche-liste { list-style: none; margin: 0; padding: 0; }
.woche-liste li { padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; }
.woche-liste li:last-child { border-bottom: none; }
.woche-liste li.einzug { padding-left: 16px; font-size: 13.5px; color: var(--leise); }
.woche-balken { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wbalken-zeile { display: grid; grid-template-columns: 1fr 90px 32px; gap: 9px; align-items: center; font-size: 13px; }
.wbalken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besprechen-liste { margin: 6px 0 0; padding-left: 20px; }
.besprechen-liste li { margin-bottom: 8px; font-size: 15px; }
.druck-titel { font-size: 18px; font-weight: 800; margin: 0 0 2px; }
.druck-leiste { margin-bottom: 14px; }
.aktiv-zeit { border-color: var(--gruen); color: var(--gruen-dunkel); }

/* ---------- Drucken ---------- */
@media print {
  .tabbar, .keine-druck, .fab { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .seite { max-width: none; padding: 0; }
  .karte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; margin-bottom: 10px; }
  .karte-info { background: #f4f4f4; }
  .chart { min-width: 0; }
  a { text-decoration: none; color: #000; }
}

/* ---------- Grosser Bildschirm: App-Anmutung statt gestreckter Website ----------
   Der Inhalt bleibt eine schmale, zentrierte Spalte mit ruhigem Rand drumherum;
   die Tab-Leiste sitzt genauso breit darunter. */
@media (min-width: 760px) {
  body { background: var(--rahmen, #e7e4db); }
  .seite {
    max-width: 600px;
    min-height: 100vh;
    padding: 30px 22px calc(104px + env(safe-area-inset-bottom));
    background: var(--bg);
    box-shadow: 0 0 46px -18px rgba(43, 58, 51, .28);
  }
  .tabbar {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
  }
  h1 { font-size: 27px; }
  .kachel-gitter { grid-template-columns: repeat(3, 1fr); gap: 11px; }
  .kachel { min-height: 112px; padding: 14px 13px; }
  .kachel b { font-size: 14.5px; }
}
@media (min-width: 760px) and (prefers-color-scheme: dark) {
  body { background: #0a100e; }
  .seite { box-shadow: 0 0 46px -14px rgba(0, 0, 0, .75); }
}