/* =====================================================================
   THEME „Glas" (seit 2.6.0, 23.10.2026) — dieselbe Optik wie Jarvis am
   PC (Jarvis glas.css): helle „Tapete" mit sanften blauen Lichtern,
   Rahmen (Kopf, Navigation, Unter-Reiter, Blätter, Toasts) aus Milchglas,
   Inhalt bleibt auf ruhigen weißen Karten — gut lesbar, auch am iPhone.
   Action-Blau #0066CC, Inter, Rundungen 11/18 px, keine Großbuchstaben.
   Korbi: „Er soll dieselbe Optik, also Glasoptik, bekommen wie Jarvis am
   Desktop. Es soll aber auf dem Server bleiben, damit Kathi mit dem iPhone
   ihn einfach benutzen kann."
   Ohne backdrop-filter oder mit „Transparenz reduzieren" werden die
   Glasflächen fest (unten). Dunkel: eigene Nacht-Variante.
   ===================================================================== */

@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; }

:root {
  --bg: #EEF0F5;
  --bg-erhoben: #FFFFFF;
  --bg-vertieft: #ECEEF3;
  --text: #1D1D1F;
  --text-leise: #424245;
  --text-still: #6A6A6F;
  --linie: rgba(0, 0, 0, .08);
  --linie-stark: rgba(0, 0, 0, .14);
  --akzent: #0066CC;          /* Action-Blau – 5,6:1 auf Weiß */
  --akzent-tint: #E8F1FC;
  --jetzt: #D08A00;
  --gut: #1F7A35;
  --warnung: #A1500A;
  --dringend: #C9001A;

  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-zahl: 'Inter', -apple-system, system-ui, sans-serif;
  --font-etikett: 'Inter', -apple-system, system-ui, sans-serif;

  --radius: 11px;
  --radius-gross: 18px;
  --karte-linie: rgba(0, 0, 0, .06);
  --karte-schatten: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 22px rgba(0, 0, 0, .06);
  --akzent-kontrast: #FFFFFF; --dringend-kontrast: #FFFFFF; --gut-kontrast: #FFFFFF;

  /* Glas (wie Jarvis) */
  --glas: rgba(255, 255, 255, .68);
  --glas-dicht: rgba(255, 255, 255, .82);
  --glas-filter: saturate(180%) blur(26px);
  --glas-kante: inset 0 1px 0 rgba(255, 255, 255, .85);
  --glas-linie: rgba(0, 0, 0, .09);
  --schweben: 0 10px 34px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  --blau-verlauf: linear-gradient(180deg, #0B6BD0, #0060C2);
  --tapete:
    radial-gradient(1200px 700px at 8% -10%, rgba(0, 113, 227, .16), transparent 60%),
    radial-gradient(900px 600px at 105% 8%, rgba(88, 86, 214, .10), transparent 60%),
    radial-gradient(900px 700px at 0% 110%, rgba(0, 113, 227, .08), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(52, 170, 220, .08), transparent 60%),
    #EEF0F5;
}

/* Nacht: dunkles Glas über tiefem Blaugrau */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="hell"]) {
    --bg: #0E1117; --bg-erhoben: #171B23; --bg-vertieft: #11151C;
    --text: #F2F3F5; --text-leise: #B9BDC6; --text-still: #8A909C;
    --linie: rgba(255, 255, 255, .08); --linie-stark: rgba(255, 255, 255, .16);
    --akzent: #4DA3FF; --akzent-tint: #12263D; --jetzt: #F2B640;
    --gut: #5CC48A; --warnung: #E2A84B; --dringend: #FF6B6B;
    --karte-linie: rgba(255, 255, 255, .06);
    --karte-schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 26px rgba(0, 0, 0, .3);
    --akzent-kontrast: #04121F; --dringend-kontrast: #1B0605; --gut-kontrast: #04170C;
    --glas: rgba(28, 32, 41, .66); --glas-dicht: rgba(28, 32, 41, .84);
    --glas-kante: inset 0 1px 0 rgba(255, 255, 255, .07); --glas-linie: rgba(255, 255, 255, .09);
    --schweben: 0 12px 36px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --blau-verlauf: linear-gradient(180deg, #3D95F5, #2A80E0);
    --tapete:
      radial-gradient(1200px 700px at 8% -10%, rgba(0, 113, 227, .22), transparent 60%),
      radial-gradient(900px 600px at 105% 8%, rgba(88, 86, 214, .16), transparent 60%),
      radial-gradient(900px 700px at 0% 110%, rgba(0, 113, 227, .10), transparent 60%),
      #0E1117;
  }
}
[data-mode="dunkel"] {
  --bg: #0E1117; --bg-erhoben: #171B23; --bg-vertieft: #11151C;
  --text: #F2F3F5; --text-leise: #B9BDC6; --text-still: #8A909C;
  --linie: rgba(255, 255, 255, .08); --linie-stark: rgba(255, 255, 255, .16);
  --akzent: #4DA3FF; --akzent-tint: #12263D; --jetzt: #F2B640;
  --gut: #5CC48A; --warnung: #E2A84B; --dringend: #FF6B6B;
  --karte-linie: rgba(255, 255, 255, .06);
  --karte-schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 26px rgba(0, 0, 0, .3);
  --akzent-kontrast: #04121F; --dringend-kontrast: #1B0605; --gut-kontrast: #04170C;
  --glas: rgba(28, 32, 41, .66); --glas-dicht: rgba(28, 32, 41, .84);
  --glas-kante: inset 0 1px 0 rgba(255, 255, 255, .07); --glas-linie: rgba(255, 255, 255, .09);
  --schweben: 0 12px 36px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --blau-verlauf: linear-gradient(180deg, #3D95F5, #2A80E0);
  --tapete:
    radial-gradient(1200px 700px at 8% -10%, rgba(0, 113, 227, .22), transparent 60%),
    radial-gradient(900px 600px at 105% 8%, rgba(88, 86, 214, .16), transparent 60%),
    radial-gradient(900px 700px at 0% 110%, rgba(0, 113, 227, .10), transparent 60%),
    #0E1117;
}

/* ------------------------------------------------------------ Grundlage */
html { background: var(--bg); }
/* Tapete als feste Ebene – iPhone-Safari kennt kein background-attachment: fixed (sonst endet der Verlauf mitten
   auf der Seite) */
body { background: transparent; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--tapete); }
h1, h2, h3, .karte-titel, .modal-titel { font-weight: 600; letter-spacing: -.022em; text-transform: none; }
h1 { font-size: 28px; }
.zahl, .zeile-zahl, .stat-zahl, .termin-zeit, .tabelle-zahl { font-weight: 500; font-feature-settings: 'tnum'; }
.kategorie-kopf, .monats-kopf, .feld-label, .raster-wt { letter-spacing: 0; text-transform: none; }
.kategorie-kopf { color: var(--text-still); font-weight: 600; padding-left: 0; }
::selection { background: var(--akzent-tint); }
:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .28); }

/* ------------------------------------------------- Glas: nur der Rahmen */
.kopf, .hauptnav, .unternav, .sheet-kasten, .toast {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante);
}
.kopf { border-bottom: 1px solid var(--glas-linie); }
.hauptnav { border-top: 1px solid var(--glas-linie); }
.unternav { border-radius: 14px; box-shadow: var(--glas-kante), var(--schweben); }
.sheet-kasten { border-radius: 22px 22px 0 0; box-shadow: var(--glas-kante), var(--schweben); }
.toast { color: var(--text); border-radius: 14px; font-weight: 500; box-shadow: var(--glas-kante), var(--schweben); }
.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; color: var(--text-still); }
.benutzer-chip { background: var(--glas-dicht); border-color: var(--glas-linie); box-shadow: var(--glas-kante); }
@media (max-width: 1023px) {
  .kopf { padding-top: max(var(--raum-2), env(safe-area-inset-top, 0px)); }
}
/* PC: schwebende Glas-Navigation links wie im Jarvis-Fenster */
@media (min-width: 1024px) {
  .rahmen-leiste {
    background: var(--glas); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
    border: 1px solid var(--glas-linie); border-radius: 18px; margin: 12px; height: calc(100vh - 24px);
    box-shadow: var(--glas-kante), var(--schweben);
  }
  .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 { background: var(--bg-erhoben); border: 1px solid var(--karte-linie); border-radius: 18px;
  padding: 18px; box-shadow: var(--karte-schatten); }
.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) 12%, var(--bg-erhoben)); }
.hinweis-kasten.dringend { background: color-mix(in srgb, var(--dringend) 10%, var(--bg-erhoben)); }
.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: 11px; font-weight: 500; transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; }
.knopf:active { transform: scale(.97); }
.knopf-primaer { background: var(--blau-verlauf); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 80, 170, .25), 0 4px 12px rgba(0, 102, 204, .18); }
.knopf-primaer:hover { filter: brightness(1.06); }
.knopf-sekundaer { background: var(--akzent-tint); border-color: transparent; color: var(--akzent); }
.knopf-sekundaer:hover { background: color-mix(in srgb, var(--akzent) 16%, var(--bg-erhoben)); }
.knopf-normal { background: linear-gradient(var(--bg-erhoben), var(--bg-vertieft)); border-color: var(--linie-stark); color: var(--text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
.knopf-klein { border-radius: 9px; }
.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;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-stark); }
.chip.aktiv { background: var(--akzent-tint); color: var(--akzent); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.filter-leiste[role="tablist"] {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%;
  background: rgba(118, 118, 128, .12); border-radius: 11px;
}
.filter-leiste[role="tablist"] .chip { background: transparent; box-shadow: none; border-radius: 9px; padding: 7px 14px; }
.filter-leiste[role="tablist"] .chip.aktiv { background: var(--bg-erhoben); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .08); }
.filter-leiste { scrollbar-width: none; }
.filter-leiste::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------- Formulare */
input, select, textarea { background: var(--bg-erhoben); border: 1px solid var(--linie-stark); border-radius: 11px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); background: var(--bg-erhoben);
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .22); }
.feld-label { font-size: 13px; font-weight: 500; color: var(--text-leise); }

/* ------------------------------------------- Dialoge: am Handy ein Blatt */
.modal-backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-kasten { background: var(--glas-dicht); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-linie); border-radius: 22px; padding: 24px 22px 22px; box-shadow: var(--glas-kante), 0 24px 60px rgba(0, 0, 0, .22); }
.modal-titel { font-size: 21px; }
@media (max-width: 599px) {
  .modal-backdrop { align-items: end !important; padding: 0 !important; }
  .modal-kasten { max-width: none; width: 100%; border-radius: 22px 22px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-height: 90vh; }
  .modal-kasten::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px;
    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-glas-blatt 240ms cubic-bezier(.2, .8, .2, 1); }
  }
}
@keyframes lp-glas-blatt { from { transform: translateY(40px); opacity: 0; } }

/* ------------------------------------------------------------ Kalender */
.monatsraster { border-radius: 16px; overflow: hidden; border: 0; background: var(--linie); box-shadow: var(--karte-schatten); }
.monats-zelle { background: var(--bg-erhoben); }
.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); background: var(--bg-erhoben); }
.raster-jetzt, .raster-jetzt::before { background: var(--dringend); }
.kal-titel { font-weight: 600; letter-spacing: -.01em; }

/* Feedback-Knopf als schwebendes Glas */
.feedback-knopf {
  font-size: 0; width: 46px; height: 46px; border: 1px solid var(--glas-linie); background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); box-shadow: var(--glas-kante), var(--schweben);
}
.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");
}

@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) –
   Abschnitte laufen bis an den Rand, flach, getrennt durch eine Lücke.
   ===================================================================== */
@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; }
  #inhalt .karte .karte, #inhalt .karte .stat-karte {
    margin-left: 0; margin-right: 0; padding: var(--raum-3) 0; background: transparent;
  }
  #inhalt .karte .liste-zeile { padding-left: 0; padding-right: 0; }
  #inhalt .karte button.liste-zeile { border-radius: 0; }
  .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%; }
  .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; }
  .heute-raster, .heute-kurz, .heute-mehr, .heute-karten { gap: 8px; }
  .heute-kurz > :empty, .heute-mehr > :empty { display: none; }
  .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; }
}

/* ----------------------------------------- Ohne Milchglas: feste Flächen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glas: rgba(255, 255, 255, .97); --glas-dicht: #FFFFFF; }
  [data-mode="dunkel"] { --glas: rgba(28, 32, 41, .98); --glas-dicht: #1C2029; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glas: var(--bg-erhoben); --glas-dicht: var(--bg-erhoben); }
  body::before { background: var(--bg); }
}