/* HvL, Web-App. Gleiche Tokens wie die Mac-App (Richtung D, Bereichsfarben).
   Glas: Flächen schweben über einer hellen Kulisse mit weichem Licht in der Farbe der Seite. */

:root {
  --grund: #FBFBFD;
  --text: #1D1D1F;
  --text-2: rgba(60, 60, 67, .62);
  --text-3: rgba(60, 60, 67, .36);
  --linie: rgba(60, 60, 67, .12);
  --flaeche: rgba(0, 0, 0, .045);
  --glas: rgba(255, 255, 255, .58);
  --glas-rand: rgba(255, 255, 255, .75);
  --glas-schatten: 0 1px 1px rgba(0, 0, 0, .04), 0 8px 28px rgba(30, 30, 60, .08);
  --kachel: rgba(255, 255, 255, .6);
  --studium: #5856D6;
  --studium-weich: rgba(88, 86, 214, .14);
  --gesundheit: #FF2D55;
  --geld: #34C759;
  --orange: #FF9500;
  --gruen: #34C759;
  --rot: #FF3B30;
  --licht-1: rgba(88, 86, 214, .16);
  --licht-2: rgba(255, 45, 85, .09);
  --r-karte: 22px;
  --r-kachel: 14px;
  --r-feld: 8px;
  --r-punkt: 4px;
  /* Die eine Schriftskala (wie Schrift.* in der Mac-App, Design.swift). Zwei Register: klein für Text und
     Beschriftung, groß für Titel und Zahlen. Eingebettet in die Mac-App gelten die Mac-Werte (unten). */
  --t-mini: 11px;      /* Marken, Achsen */
  --t-klein: 12px;     /* Metazeilen, Tabellenköpfe */
  --t-neben: 13px;     /* Nebentext */
  --t-text: 15px;      /* Zeilen, Knöpfe, Kartenköpfe */
  --t-lese: 17px;      /* Fließtext */
  --t-betont: 20px;    /* Zwischenüberschrift */
  --t-titel: 26px;     /* Titel einer Karte */
  --t-seite: 34px;     /* Titel einer Seite */
  --t-zahl: 44px;      /* Leitzahl einer Karte */
  --t-held: 84px;      /* die eine Zahl einer Seite */
  /* Bedienelemente */
  --h-knopf: 40px;
  --h-knopf-klein: 30px;
  --h-haken: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0B0B0D;
    --text: #F5F5F7;
    --text-2: rgba(235, 235, 245, .6);
    --text-3: rgba(235, 235, 245, .3);
    --linie: rgba(255, 255, 255, .1);
    --flaeche: rgba(255, 255, 255, .06);
    --glas: rgba(38, 38, 42, .55);
    --glas-rand: rgba(255, 255, 255, .1);
    --glas-schatten: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    --kachel: rgba(255, 255, 255, .05);
    --studium: #7D7AFF;
    --studium-weich: rgba(125, 122, 255, .2);
    --licht-1: rgba(94, 92, 230, .22);
    --licht-2: rgba(255, 55, 95, .1);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--grund);
  color: var(--text);
  font: var(--t-lese)/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--studium); text-decoration: none; }
.zahl { font-variant-numeric: tabular-nums; }

.kulisse {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 10% -5%, var(--licht-1), transparent 70%),
    radial-gradient(50vmax 50vmax at 95% 10%, var(--licht-2), transparent 70%),
    radial-gradient(55vmax 55vmax at 60% 105%, var(--licht-1), transparent 70%);
}

/* Glas: die eine Fläche der App */
.glas {
  background: var(--glas);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schatten), inset 0 1px 0 rgba(255, 255, 255, .35);
  border-radius: var(--r-karte);
}

/* ---------- Rahmen ---------- */

.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.leiste {
  position: sticky; top: 0; height: 100dvh; padding: 20px 12px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 22px;
}
.leiste-marke { font-size: var(--t-betont); font-weight: 700; letter-spacing: -.02em; padding: 4px 12px 0; }
.leiste-gruppe { display: grid; gap: 2px; }
.leiste-titel { font-size: var(--t-klein); font-weight: 600; color: var(--text-2); padding: 0 12px 4px; }
.leiste a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-feld);
  color: var(--text); font-size: var(--t-text);
}
.leiste a svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.leiste a[aria-current="page"] { background: var(--flaeche); font-weight: 600; }
.leiste a .zaehler { margin-left: auto; font-size: var(--t-neben); color: var(--text-2); }

.haupt { padding: 28px 32px 64px; min-width: 0; }
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.kopf h1 { margin: 0; font-size: var(--t-seite); line-height: 1.1; letter-spacing: -.025em; }
.kopf .unter { color: var(--text-2); font-size: var(--t-text); margin-top: 4px; }
.kopf-knoepfe { display: flex; gap: 8px; }
/* Reiter eines Bereichs (Falltraining) neben Suche oder Knopf */
.kopf-knoepfe:has(.ft-reiter) { flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* Zurück: eine Form auf allen Unterseiten, oben links, bleibt beim Scrollen stehen (wie die Navigationsleiste in iOS). */
.zurueck-knopf {
  position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 20;
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 2px;
  min-height: 40px; margin: -10px 0 14px -6px; padding: 0 16px 0 8px; border-radius: 999px;
  font-size: var(--t-lese); font-weight: 500; color: var(--studium);
}
.zurueck-knopf svg { width: 20px; height: 20px; flex: none; }
.zurueck-knopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zurueck-knopf:focus-visible { outline: 2px solid var(--studium); outline-offset: 2px; }
.eingebettet .zurueck-knopf { display: none; } /* die Mac-App zeigt Zurück in ihrer Werkzeugleiste */

.tabs { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .leiste { display: none; }
  .haupt { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .kopf h1 { font-size: var(--t-seite); }
  .tabs {
    display: flex; position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom)); padding: 6px; gap: 4px; border-radius: 999px;
  }
  .tabs a { display: grid; justify-items: center; gap: 2px; padding: 6px 18px; border-radius: 999px; font-size: var(--t-mini); color: var(--text-2); }
  .tabs a svg { width: 22px; height: 22px; }
  .tabs a[aria-current="page"] { color: var(--studium); background: var(--flaeche); }
  .mehr-blatt {
    position: fixed; z-index: 11; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
    display: grid; gap: 2px; padding: 8px; border-radius: var(--r-karte); min-width: 220px;
  }
  .mehr-blatt a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-kachel); font-size: var(--t-lese); }
  .mehr-blatt a svg { width: 20px; height: 20px; color: var(--text-2); }
  .mehr-blatt a[aria-current="page"] { background: var(--flaeche); font-weight: 600; }
}
@media (max-width: 480px) { .tabs a { padding: 6px 12px; } }
.mehr-blatt { display: none; }
@media (max-width: 900px) { .mehr-blatt { display: grid; } }

/* ---------- Raster und Karten ---------- */

.raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.spalte { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { .raster { grid-template-columns: 1fr; } }

.karte { padding: 18px 20px; min-width: 0; }
.karte-kopf { display: flex; align-items: center; gap: 8px; font-size: var(--t-text); font-weight: 600; margin-bottom: 12px; }
.karte-kopf svg { width: 17px; height: 17px; color: var(--studium); }
.karte-kopf .rechts { margin-left: auto; font-size: var(--t-klein); font-weight: 400; color: var(--text-2); text-align: right; }

.kicker { font-size: var(--t-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--studium); }
/* Abschnittsetikett: dieselben Versalien in Grau. Violett (.kicker) steht nur als Fachzeile über einem Titel. */
.rubrik, .kicker.ex-rubrik, .kicker.ex-woche, .ex-naechste .kicker, .ul-tagesluecken > .kicker, .af-abschnitt, .ul-rg, .ul-rubrik {
  font-size: var(--t-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.titel-gross { font-size: var(--t-titel); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 6px; text-wrap: balance; }
.leise { color: var(--text-2); }
.klein { font-size: var(--t-neben); }
.sehr-klein { font-size: var(--t-klein); }

.kennzahl { display: flex; align-items: baseline; gap: 8px; }
.kennzahl b { font-size: var(--t-held); line-height: .95; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: calc(var(--t-held) * .36); font-weight: 600; }

.zeile { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); font-size: var(--t-text); }
.zeile span:first-child { color: var(--text-2); }
.zeile b { font-weight: 600; font-variant-numeric: tabular-nums; }

.balken { height: 6px; border-radius: var(--r-punkt); background: var(--flaeche); overflow: hidden; }
.balken i { display: block; height: 100%; width: var(--w, 0%); background: var(--f, var(--studium)); border-radius: var(--r-punkt); transition: width 300ms var(--ease); }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h-knopf); padding: 0 16px; border-radius: 999px; border: 1px solid var(--glas-rand);
  background: var(--glas); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font-size: var(--t-text); font-weight: 600; cursor: pointer;
  color: var(--text); /* auch als Link: ein Knopf trägt die Textfarbe, der Akzent bleibt dem betonten Knopf */
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}
.knopf:active { transform: scale(.97); }
.knopf.haupt-knopf { background: var(--studium); color: #fff; border-color: transparent; }
.knopf.klein { min-height: var(--h-knopf-klein); padding: 0 12px; font-size: var(--t-neben); font-weight: 500; }
.knopf[disabled] { opacity: .45; pointer-events: none; }
.knopf svg { width: 16px; height: 16px; }
.knopf:focus-visible, .leiste a:focus-visible, .check:focus-visible { outline: 2px solid var(--studium); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Tagesblatt ---------- */

.aufgaben { list-style: none; margin: 8px 0 0; padding: 0; }
.aufgabe { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linie); }
.check {
  flex: none; width: var(--h-haken); height: var(--h-haken); margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--text-3);
  background: none; padding: 0; display: grid; place-items: center; cursor: pointer; transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.check svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.check[aria-checked="true"] { background: var(--studium); border-color: var(--studium); }
.check[aria-checked="true"] svg { opacity: 1; }
.aufgabe-art { font-weight: 600; min-width: 52px; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe.fertig .aufgabe-text { color: var(--text-2); text-decoration: line-through; }
.prio { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: var(--r-punkt); background: var(--studium); color: #fff; font-size: var(--t-mini); font-weight: 700; vertical-align: 1px; }

/* ---------- Unterlagen ---------- */

.fall { padding: 10px 0; border-top: 1px solid var(--linie); }
.fall-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fall-kopf b { font-weight: 600; }
.fall-kopf .knoepfe { margin-left: auto; display: flex; gap: 6px; }
.deckt { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-neben); color: var(--text-2); }
.deckt li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); margin-right: 8px; vertical-align: 2px; }
.deckt li.schwer::before { background: var(--studium); }
.reihe { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.reihe > span { font-size: var(--t-neben); color: var(--text-2); }

/* ---------- Stoppuhr ---------- */

.uhr { font-size: var(--t-zahl); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.uhr.ruht { color: var(--text-3); }
.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--flaeche); }
.segment button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: var(--t-neben); font-weight: 600; color: var(--text-2); cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--glas); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* ---------- Ring ---------- */

.ring { width: 72px; height: 72px; flex: none; }
.ring circle { fill: none; stroke-width: 10; }
.ring .spur { stroke: var(--flaeche); }
.ring .wert { stroke: var(--studium); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 400ms var(--ease); }

/* ---------- Karteikarten ---------- */

.gebiet-kopf .kurz { display: none; }
.gebiete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) {
  .gebiete { gap: 8px; }
  .gebiet { padding: 12px; gap: 8px; font-size: var(--t-text); }
  .gebiet .klein { font-size: var(--t-klein); }
  .gebiet-kopf .lang { display: none; } .gebiet-kopf .kurz { display: inline; }
  .kopf { flex-wrap: wrap; }
  .kopf-knoepfe { flex-basis: 100%; }
  .kopf-knoepfe .suche { max-width: none; }
}
.gebiet { min-width: 0; text-align: left; cursor: pointer; padding: 18px; display: grid; gap: 10px; font: inherit; color: inherit; }
.gebiet[aria-pressed="true"] { background: var(--studium-weich); }
.gebiet-kopf { display: flex; justify-content: space-between; font-weight: 600; }
.gebiet-kopf small { font-size: var(--t-klein); color: var(--text-2); }

.prognose { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding-top: 16px; }
.prognose div { flex: 1; display: grid; justify-items: center; gap: 4px; align-content: end; height: 100%; font-size: var(--t-mini); color: var(--text-2); }
.prognose i { display: block; width: 100%; max-width: 26px; height: calc(var(--h) * 64px); min-height: 3px; border-radius: var(--r-feld); background: var(--studium-weich); }
.prognose .heute i { background: var(--studium); }

.baum { font-size: var(--t-text); }
.baum-kopf, .baum-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 104px 44px 52px 44px 32px; gap: 8px; align-items: center; }
.baum-kopf { font-size: var(--t-klein); font-weight: 600; color: var(--text-2); padding: 0 0 8px; }
.baum-kopf span:nth-child(n+3), .baum-zeile .n { text-align: right; }
.baum-zeile { padding: 8px 0; border-top: 1px solid var(--linie); }
.baum-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.baum-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klapp { border: 0; background: none; padding: 0; width: 18px; color: var(--text-2); cursor: pointer; transition: transform 200ms var(--ease); }
.klapp[aria-expanded="true"] { transform: rotate(90deg); }
.stand { display: flex; align-items: center; gap: 8px; font-size: var(--t-neben); color: var(--text-2); }
.stand .balken { width: 48px; }
.n { font-variant-numeric: tabular-nums; }
.n.neu { color: var(--studium); } .n.lern { color: var(--orange); } .n.faellig { color: var(--gruen); } .n.null { color: var(--text-3); }
.spiel { border: 0; background: none; color: var(--studium); cursor: pointer; padding: 4px; }
.spiel svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .baum-kopf, .baum-zeile { grid-template-columns: minmax(0, 1fr) 48px 48px 48px 32px; }
  .baum-kopf span:nth-child(2), .baum-zeile .stand { display: none; }
}

.suche { width: 100%; max-width: 360px; height: var(--h-knopf); padding: 0 16px; border-radius: 999px; border: 1px solid var(--glas-rand); background: var(--glas); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.suche:focus-visible { outline: 2px solid var(--studium); outline-offset: 1px; }

/* ---------- Abfrage ---------- */

.abfrage { position: fixed; inset: 0; z-index: 20; background: #000; color: #F5F5F7; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
/* Drei Spalten, die Mitte bleibt mittig, auch wenn links und rechts ungleich breit sind. */
.abfrage-kopf { display: grid; grid-template-columns: minmax(32px, 1fr) minmax(0, auto) minmax(32px, 1fr); align-items: center; gap: 16px; padding: calc(10px + env(safe-area-inset-top)) 20px 10px; font-size: var(--t-klein); }
.abfrage-kopf .zu { justify-self: start; border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.abfrage-kopf .ort { display: grid; justify-items: center; gap: 1px; min-width: 0; text-align: center; }
.abfrage-kopf .pfad { font-size: var(--t-neben); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abfrage-kopf .flagge { display: inline-flex; margin-left: 5px; color: #FF9F0A; vertical-align: -1px; }
.abfrage-kopf .flagge svg { width: 11px; height: 11px; }
.abfrage-kopf .abschnitt { font-size: var(--t-mini); color: rgba(235, 235, 245, .6); }
.abfrage-kopf .wartend { color: #FF9F0A; }
.abfrage-kopf .zaehler { justify-self: end; display: flex; gap: 14px; white-space: nowrap; color: rgba(235, 235, 245, .3); }
.abfrage-kopf .zaehler b { font-weight: 600; }
.abfrage-kopf .neu b { color: #8E8CF8; }
.abfrage-kopf .arbeit b { color: #FF9F0A; }
.abfrage-kopf .faellig b { color: #30D158; }
.abfrage-kopf .null b { color: rgba(235, 235, 245, .6); }
.abfrage-fortschritt { height: 2px; background: rgba(255, 255, 255, .08); }
.abfrage-fortschritt span { display: block; height: 100%; background: rgba(255, 255, 255, .55); transition: width 250ms var(--ease); }
/* iPhone: Zähler nur als Zahlen, der Stapel bekommt den Platz. */
@media (max-width: 600px) {
  .abfrage-kopf { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .abfrage-kopf .zaehler { gap: 8px; font-size: 0; }
  .abfrage-kopf .zaehler b { font-size: var(--t-klein); }
}
.abfrage-inhalt { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 32px; }
.abfrage-fuss { display: flex; justify-content: center; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.bewerten {
  min-width: 0; flex: 0 1 132px; height: 58px; border-radius: var(--r-kachel); border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: #fff; display: grid; place-content: center; gap: 1px; cursor: pointer; font-weight: 600; font-size: var(--t-text);
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}
.bewerten small { font-size: var(--t-mini); font-weight: 400; color: rgba(235, 235, 245, .6); font-variant-numeric: tabular-nums; }
.bewerten:active { transform: scale(.96); }
.bewerten.nochmal { background: rgba(255, 69, 58, .22); }
.bewerten.gut { background: rgba(48, 209, 88, .2); }
.bewerten.zeigen { flex-basis: 300px; }
.abfrage-werkzeug { position: absolute; left: 16px; bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; gap: 6px; }
.abfrage-werkzeug button { border: 0; background: none; color: rgba(235, 235, 245, .55); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.abfrage-werkzeug svg { width: 18px; height: 18px; }
/* iPad und schmale Fenster: Die Werkzeuge links unten lägen über „Nochmal“, darum mittig unter die Bewertung. */
@media (max-width: 1100px) {
  .abfrage-fuss { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
  .abfrage-werkzeug { left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) { .abfrage-werkzeug { display: none; } .bewerten { flex-basis: 25%; height: 54px; } }

/* Die Karte selbst: karte.css (gemeinsam mit der Mac-App). */
.fertig-schirm { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; height: 100%; }
.fertig-schirm h2 { margin: 0; font-size: var(--t-seite); }

/* ---------- Anmeldung ---------- */

.anmelden { min-height: 100dvh; display: grid; place-items: center; padding: 24px; grid-column: 1 / -1; }
.anmelden .glas { width: min(420px, 100%); padding: 32px; display: grid; gap: 16px; }
.anmelden h1 { margin: 0; font-size: var(--t-zahl); letter-spacing: -.03em; }
.anmelden input { height: 44px; border-radius: var(--r-feld); border: 1px solid var(--linie); background: var(--kachel); padding: 0 14px; }
.meldung { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; padding: 10px 18px; border-radius: 999px; font-size: var(--t-text); }

.leer { color: var(--text-2); padding: 24px 0; }
.skelett { color: var(--text-3); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.abfrage:focus { outline: none; }
.abfrage-inhalt { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- Eingebettet in die Mac-App ---------- */
/* Seitenleiste, Tabs und Kulisse kommen dort nativ; die Web-Ansicht ist durchsichtig. */
.eingebettet body { background: transparent; }
.eingebettet .kulisse, .eingebettet .leiste, .eingebettet .tabs, .eingebettet .mehr-blatt { display: none !important; }
.eingebettet .app { grid-template-columns: minmax(0, 1fr); }
.eingebettet .kopf h1 { display: none; }

/* Mac-Maße: dieselbe Skala wie Schrift.* in Design.swift, damit eine Web-Seite neben einer nativen nicht größer wirkt. */
.eingebettet {
  --t-mini: 10px; --t-klein: 11px; --t-neben: 12px; --t-text: 13px; --t-lese: 13px; --t-betont: 15px;
  --t-titel: 20px; --t-seite: 28px; --t-zahl: 40px;
  --h-knopf: 28px; --h-knopf-klein: 22px; --h-haken: 18px;
  /* Glas wie die nativen Karten: gemessen am Fenster (Karte 5,5 % dunkler als der Grund, dunkel 8 % heller). */
  --glas: rgba(0, 0, 0, .055);
  --glas-rand: rgba(0, 0, 0, .09);
  --glas-schatten: none;
  --kachel: rgba(255, 255, 255, .55);
}
@media (prefers-color-scheme: dark) {
  .eingebettet:not([data-theme="light"]) {
    --glas: rgba(255, 255, 255, .08);
    --glas-rand: rgba(0, 0, 0, .35);
    --kachel: rgba(255, 255, 255, .06);
  }
}
.eingebettet body { line-height: 1.4; }
/* Seitenrand wie .seite() in der Mac-App: oben 6, sonst 28. */
.eingebettet .haupt { padding: 6px 28px 28px; }
.eingebettet .glas { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.eingebettet .karte-kopf { gap: 7px; margin-bottom: 10px; }
.eingebettet .karte-kopf svg { width: 16px; height: 16px; }
.eingebettet .zeile { padding: 7px 0; }
.eingebettet .knopf { padding: 0 12px; font-weight: 400; box-shadow: none; }
.eingebettet .knopf.haupt-knopf { font-weight: 600; }
.eingebettet .knopf.klein { padding: 0 9px; }
.eingebettet .segment { padding: 2px; }
.eingebettet .segment button { padding: 3px 12px; font-weight: 500; }
.eingebettet .aufgabe { gap: 10px; padding: 8px 0; }
.eingebettet .check svg { width: 10px; height: 10px; }
.eingebettet .suche { padding: 0 12px; }

/* ---------- Fokusmodus während der Kartenabfrage ---------- */

html.abfrage-offen, html.abfrage-offen body { background: #000; overflow: hidden; overscroll-behavior: none; color-scheme: dark; }
html.abfrage-offen .kulisse, html.abfrage-offen .leiste, html.abfrage-offen .tabs, html.abfrage-offen .mehr-blatt { display: none; }

/* ---------- Seitenleiste ein- und ausblenden ---------- */
/* Der Knopf sitzt im Kopf der Leiste; ist sie zu, rückt er an den linken Rand und der Inhalt macht ihm Platz. */

.leiste-knopf { display: none; }
@media (min-width: 901px) {
  .leiste-knopf {
    display: grid; place-items: center; position: fixed; z-index: 25; top: calc(18px + env(safe-area-inset-top)); left: 200px;
    width: 36px; height: 36px; border: 0; border-radius: var(--r-feld); background: none; color: var(--text-2); cursor: pointer;
  }
  .leiste-knopf:hover { background: var(--flaeche); }
  .leiste-knopf:focus-visible { outline: 2px solid var(--studium); outline-offset: 2px; }
  .leiste-knopf svg { width: 20px; height: 20px; }
  html.leiste-zu:not(.abfrage-offen) .app { grid-template-columns: minmax(0, 1fr); }
  html.leiste-zu:not(.abfrage-offen) .leiste { display: none; }
  html.leiste-zu:not(.abfrage-offen) .haupt { padding-left: 64px; }
  html.leiste-zu:not(.abfrage-offen) .leiste-knopf, html.abfrage-offen:not(.abfrage-leiste) .leiste-knopf { left: 14px; }
  /* In der Abfrage: Knopf links neben dem Schließen; mit offener Leiste rückt die Abfrage daneben. */
  html.abfrage-offen .leiste-knopf { top: calc(8px + env(safe-area-inset-top)); color: rgba(235, 235, 245, .6); }
  html.abfrage-offen .leiste-knopf:hover { background: rgba(255, 255, 255, .1); }
  html.abfrage-offen:not(.abfrage-leiste) .abfrage-kopf { padding-left: 62px; }
  html.abfrage-leiste .abfrage { left: 248px; }
  html.abfrage-leiste .leiste {
    display: flex; background: #0B0B0D; border-right: 1px solid rgba(255, 255, 255, .1); color: var(--text);
    --text: #F5F5F7; --text-2: rgba(235, 235, 245, .6); --flaeche: rgba(255, 255, 255, .06);
  }
}
.eingebettet .leiste-knopf, body.vollbild .leiste-knopf { display: none !important; }

/* ---------- Zwei Fassungen einer Notiz, Hinweise zum Speichern ---------- */

.notiz-konflikt { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-feld); }
.notiz-konflikt p { margin: 0 0 6px; }
.notiz-fremd { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--linie); color: var(--text-2); white-space: pre-wrap; }
.job-warnung { margin: 0 0 12px; }

/* ---------- Pausierte Kartenabfrage ---------- */

.leiste a.wartet svg { color: var(--studium); }
.leiste a small { display: block; font-size: var(--t-mini); font-weight: 400; line-height: 1.2; color: var(--text-2); }
.abfrage-weiter {
  position: fixed; z-index: 9; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: var(--r-karte);
  font-size: var(--t-text); font-weight: 600; color: var(--studium); cursor: pointer;
}
.abfrage-weiter svg { width: 16px; height: 16px; }
.abfrage-weiter:focus-visible { outline: 2px solid var(--studium); outline-offset: 2px; }
@media (max-width: 900px) { .abfrage-weiter { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); } }
.eingebettet .abfrage-weiter { display: none; }