/* =====================================================================
   THEME „Isar" (Standard seit 2.2.0) — Familie am Fluss.
   Kühler Kiesel-Grund wie die Kiesbänke bei Geretsried, Gletscher-Türkis
   als Hauptfarbe, Föhrengrün für Text, ein warmes Föhnlicht-Gold nur für
   „jetzt". Karten liegen ruhig (keine Kippung), Reiter sind Schalter,
   Dialoge kommen am Handy als Blatt von unten.
   Schriften: Bricolage Grotesque (Überschriften, große Zahlen),
   Inter (Text), Space Grotesk (kleine Etiketten).
   ===================================================================== */

@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #EDF1F0;            /* Kiesel */
  --bg-erhoben: #FFFFFF;    /* Karte */
  --bg-vertieft: #E2E8E6;   /* Mulde: Segment-Schalter, Eingaben */
  --text: #16302E;          /* Föhre */
  --text-leise: #526965;
  --text-still: #7F928E;
  --linie: #DCE3E1;
  --linie-stark: #C3CECB;
  --akzent: #0F7C82;        /* Isar — 4,9:1 auf Weiß */
  --akzent-tint: #E0F0F0;
  --jetzt: #E8A21F;         /* Föhnlicht — nur für „jetzt" und Hervorhebung */
  --gut: #2C8656;
  --warnung: #A9711B;
  --dringend: #C2413A;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-zahl: 'Inter', system-ui, sans-serif;
  --font-etikett: 'Space Grotesk', system-ui, sans-serif;

  --radius: 12px;
  --radius-gross: 22px;
  --karte-linie: transparent;
  --karte-schatten: 0 1px 2px rgba(22, 48, 46, .06), 0 6px 20px rgba(22, 48, 46, .06);
  --akzent-kontrast: #FFFFFF; --dringend-kontrast: #FFFFFF; --gut-kontrast: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="hell"]) {
    --bg: #0D1817; --bg-erhoben: #15211F; --bg-vertieft: #0A1312;
    --text: #E4EFEC; --text-leise: #9DB3AE; --text-still: #6F8682;
    --linie: #233230; --linie-stark: #34504B;
    --akzent: #4CC3C7; --akzent-tint: #133537; --jetzt: #F2B640;
    --gut: #5CC48A; --warnung: #E2A84B; --dringend: #EE6B62;
    --karte-schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
    --akzent-kontrast: #062022; --dringend-kontrast: #1B0605; --gut-kontrast: #04170C;
  }
}
[data-mode="dunkel"] {
  --bg: #0D1817; --bg-erhoben: #15211F; --bg-vertieft: #0A1312;
  --text: #E4EFEC; --text-leise: #9DB3AE; --text-still: #6F8682;
  --linie: #233230; --linie-stark: #34504B;
  --akzent: #4CC3C7; --akzent-tint: #133537; --jetzt: #F2B640;
  --gut: #5CC48A; --warnung: #E2A84B; --dringend: #EE6B62;
  --karte-schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --akzent-kontrast: #062022; --dringend-kontrast: #1B0605; --gut-kontrast: #04170C;
}

/* ------------------------------------------------------------ Grundlage */
body { -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3, .karte-titel, .modal-titel { font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: 30px; }
.zahl, .zeile-zahl, .stat-zahl, .termin-zeit, .tabelle-zahl { font-weight: 500; font-feature-settings: 'tnum'; }
.kategorie-kopf, .monats-kopf, .feld-label, .raster-wt {
  font-family: var(--font-etikett); letter-spacing: .06em;
}
.kategorie-kopf { color: var(--text-leise); font-weight: 700; padding-left: 0; }
::selection { background: var(--akzent-tint); }

/* ------------------------------------------------------------ Kopfzeile */
.kopf {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
}
.marke { font-weight: 600; letter-spacing: -.02em; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.marke-zusatz { font-family: var(--font-body); font-weight: 400; }
.benutzer-chip { background: var(--bg-erhoben); border-color: transparent; box-shadow: var(--karte-schatten); }

/* ------------------------------------------------------- Navigation */
/* Aufbau und Symbole: rahmen.css. Hier nur der Isar-Ton. */
.hauptnav { background: color-mix(in srgb, var(--bg-erhoben) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top-color: var(--linie); }
.sheet-kasten { border-radius: 26px 26px 0 0; }
.unternav { border-radius: 14px; }
@media (max-width: 1023px) {
  /* Am Handy ist die Kopfzeile nur eine leise Leiste — die Seite beginnt darunter */
  .kopf { padding-top: max(var(--raum-2), env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1024px) {
  .rahmen-leiste { background: var(--bg); border-right-color: color-mix(in srgb, var(--linie) 70%, transparent); }
  .rahmen-leiste .marke { font-size: 19px; }
}

/* ------------------------------------------------------------- Seiten */
main#inhalt { padding-top: var(--raum-2); }
.seiten-kopf { flex-wrap: wrap; align-items: center; margin: var(--raum-4) 0 var(--raum-4); row-gap: var(--raum-3); }
.seiten-kopf h1 { flex: 1 1 auto; }
.seiten-aktionen { flex-wrap: wrap; }
.seiten-aktionen .knopf { white-space: nowrap; }
@media (max-width: 479px) {
  .seiten-aktionen { flex: 1 1 100%; }
  .seiten-aktionen .knopf { flex: 1; }
}

/* -------------------------------------------------------------- Karten */
.karte, .stat-karte { border-radius: 18px; padding: 18px; }
.karte + .karte { margin-top: var(--raum-3); }
.hinweis-kasten { background: var(--akzent-tint); border-left: 0; border-radius: 14px; color: var(--text); }
.hinweis-kasten.warnung { background: color-mix(in srgb, var(--warnung) 14%, var(--bg-erhoben)); }
.hinweis-kasten.dringend { background: color-mix(in srgb, var(--dringend) 12%, var(--bg-erhoben)); }

/* Listen in Karten: Linien eingerückt, keine harte Kante unten */
.liste-zeile { border-bottom-color: var(--linie); }
.karte .liste-zeile:last-child, .karte .liste-zeile:last-of-type { border-bottom-color: transparent; }
.liste-zeile:active, button.liste-zeile:hover { background: color-mix(in srgb, var(--akzent) 6%, transparent); }
button.liste-zeile { border-radius: 10px; }
.zeile-titel { font-weight: 500; }

/* -------------------------------------------------------------- Knöpfe */
.knopf { border-radius: 14px; font-weight: 500; transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease; }
.knopf:active { transform: scale(.97); }
.knopf-primaer { box-shadow: 0 1px 2px rgba(15, 124, 130, .25), 0 4px 12px rgba(15, 124, 130, .18); }
.knopf-primaer:hover { background: color-mix(in srgb, var(--akzent) 88%, black); }
.knopf-sekundaer { background: var(--akzent-tint); border-color: transparent; color: var(--akzent); }
.knopf-sekundaer:hover { background: color-mix(in srgb, var(--akzent) 18%, var(--bg-erhoben)); }
.knopf-normal { background: var(--bg-vertieft); border-color: transparent; color: var(--text); }
.knopf-klein { border-radius: 11px; }
.knopf-link { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------------------------------------------- Chips und Segment-Schalter */
.chip { border: 0; background: var(--bg-erhoben); color: var(--text-leise); font-weight: 500; padding: 7px 14px;
  box-shadow: inset 0 0 0 1px var(--linie); }
.chip.aktiv { background: var(--akzent-tint); color: var(--akzent); box-shadow: inset 0 0 0 1.5px var(--akzent); }
/* Reiter (role=tablist) sind ein Segment-Schalter: Mulde mit hellem Schieber */
.filter-leiste[role="tablist"] {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%;
  background: var(--bg-vertieft); border-radius: 14px;
}
.filter-leiste[role="tablist"] .chip { background: transparent; box-shadow: none; border-radius: 11px; padding: 7px 14px; }
.filter-leiste[role="tablist"] .chip.aktiv { background: var(--bg-erhoben); color: var(--text);
  box-shadow: 0 1px 2px rgba(22, 48, 46, .12), 0 2px 6px rgba(22, 48, 46, .08); }
.filter-leiste { scrollbar-width: none; }
.filter-leiste::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------- Formulare */
input, select, textarea { background: var(--bg-vertieft); border-color: transparent; border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); background: var(--bg-erhoben);
  box-shadow: 0 0 0 4px var(--akzent-tint); }
.feld-label { font-size: 12px; text-transform: uppercase; color: var(--text-leise); }

/* ------------------------------------------- Dialoge: am Handy ein Blatt */
.modal-kasten { border-radius: 26px; padding: 24px 22px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.modal-titel { font-size: 22px; }
@media (max-width: 599px) {
  .modal-backdrop { align-items: end !important; padding: 0 !important; }
  .modal-kasten { max-width: none; width: 100%; border-radius: 26px 26px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-height: 90vh; }
  .modal-kasten::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--linie-stark); margin: -10px auto 14px; }
  .modal-aktionen { flex-wrap: wrap; }
  .modal-aktionen .knopf { flex: 1 1 auto; }
  @media (prefers-reduced-motion: no-preference) {
    .modal-backdrop .modal-kasten { animation: lp-blatt 220ms cubic-bezier(.2, .8, .2, 1); }
  }
}
@keyframes lp-blatt { from { transform: translateY(40px); opacity: 0; } }

/* -------------------------------------------------------------- Toasts */
.toast { border-radius: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

/* ------------------------------------------------------------ Kalender */
.monatsraster { border-radius: 16px; overflow: hidden; border: 0; background: var(--linie); }
.monats-zelle.ist-heute { box-shadow: inset 0 0 0 2px var(--akzent); }
.monats-zelle.ist-heute .monats-zahl { color: var(--akzent); font-weight: 700; }
.stundenraster { border: 0; border-radius: 18px; box-shadow: var(--karte-schatten); }
.raster-jetzt, .raster-jetzt::before { background: var(--jetzt); }
.kal-titel { font-weight: 600; letter-spacing: -.01em; }

/* Feedback-Knopf: Linien-Symbol in Akzentfarbe statt Emoji */
.feedback-knopf {
  font-size: 0; width: 46px; height: 46px; border: 0; background: var(--bg-erhoben);
  box-shadow: 0 4px 16px rgba(22, 48, 46, .14);
}
.feedback-knopf::before {
  content: ""; display: block; width: 22px; height: 22px; margin: auto; background: var(--akzent);
  -webkit-mask: var(--icon) center / 22px no-repeat; mask: var(--icon) center / 22px no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8.5 10.5h7'/%3E%3C/svg%3E");
}

/* Segment-Schalter am Handy: volle Breite, Reiter teilen sich den Platz —
   so passen auch fünf Reiter (Freizeit) auf 390 px. */
@media (max-width: 599px) {
  .filter-leiste[role="tablist"] { display: flex; width: 100%; }
  .filter-leiste[role="tablist"] .chip { flex: 1 1 auto; padding: 7px 6px; text-align: center; font-size: 14px; }
}

/* =====================================================================
   Handy: keine Rahmen um die Elemente (Wunsch des Inhabers 11.10.2026).
   Statt Karte-im-Rand laufen Abschnitte bis an den Bildschirmrand,
   flach, ohne Rundung und Schatten, getrennt durch eine schmale Lücke.
   Inhalt sitzt 14 px vom Rand — bündig mit Überschriften und Schaltern.
   ===================================================================== */
@media (max-width: 599px) {
  :root { --rand: 14px; }
  main#inhalt { padding-left: var(--rand); padding-right: var(--rand); }
  #inhalt .karte, #inhalt .stat-karte {
    margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    border-radius: 0; box-shadow: none; border: 0;
    padding: 16px var(--rand);
  }
  #inhalt .karte + .karte { margin-top: 8px; }
  /* Karten in Karten (und Karten in Rastern) bleiben, wo sie sind */
  #inhalt .karte .karte, #inhalt .karte .stat-karte {
    margin-left: 0; margin-right: 0; padding: var(--raum-3) 0; background: transparent;
  }
  /* Listenzeilen in Abschnitten: Text bündig mit dem Abschnittstitel */
  #inhalt .karte .liste-zeile { padding-left: 0; padding-right: 0; }
  #inhalt .karte button.liste-zeile { border-radius: 0; }
  /* Segment-Schalter und Filter dürfen ebenfalls die volle Breite nutzen */
  .filter-leiste { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    padding-left: var(--rand); padding-right: var(--rand); }
  .filter-leiste[role="tablist"] { margin-left: 0; margin-right: 0; padding: 3px; width: 100%; }
  /* Kalender-Raster und Monatsansicht randlos */
  .stundenraster, .monatsraster { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    border-radius: 0; box-shadow: none; }
  .hinweis-kasten { border-radius: 10px; }
}
@media (max-width: 599px) {
  /* Heute: Abschnitte dicht untereinander, leere Behälter ohne Lücke */
  .heute-raster, .heute-kurz, .heute-mehr, .heute-karten { gap: 8px; }
  .heute-kurz > :empty, .heute-mehr > :empty { display: none; }
  /* „Tag aufklappen" an den neuen Seitenrand anpassen (vorher für 18 px Polster gebaut) */
  .heute-aufklappen { width: calc(100% + 2 * var(--rand)); margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    padding-left: var(--rand); padding-right: var(--rand); margin-bottom: -16px; }
}