/* Cockpit Designsystem (Abschnitt 4). Einzige Stelle mit Farbwerten: der Tokenblock. */
@import url("fonts.css");

:root {
  --papier: #FFFFFF;
  --flaeche: #F5F6F8;
  --linie: #E3E5EA;
  --tinte: #0B0B0C;
  --tinte2: #4A4D55;
  --akzent: #2A57C4;
  --akzent2: #1F4296;
  --warm: #D9480F;
  --gruen: #1E7F4F;

  --schrift: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --uhr-desktop: 72px;
  --uhr-iphone: 44px;
  --modul-titel: 20px;
  --prio-nummer: 28px;
  --text: 16px;
  --zweittext: 14px;
  --label: 12px;

  --raster: 8px;
  --rand-desktop: 32px;
  --rand-iphone: 16px;
  --radius: 8px;
  --balken: 4px;
  --dauer: 180ms;

  --akzent-hell: color-mix(in srgb, var(--akzent) 10%, var(--papier));
  --warm-hell: color-mix(in srgb, var(--warm) 10%, var(--papier));
  --schleier: rgb(0 0 0 / 0.35);
  color-scheme: light;
}
:root[data-welt="dunkel"] {
  --papier: #0E0F12;
  --flaeche: #16181D;
  --linie: #262931;
  --tinte: #F2F3F5;
  --tinte2: #A7ABB4;
  --akzent: #6F92E8;
  --akzent2: #9DB5F0;
  --warm: #F0733A;
  --gruen: #4CBF86;
  --schleier: rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

/* ---- Grund ---- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--text);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }
svg.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }
svg.ic.gross { width: 20px; height: 20px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: var(--zweittext); }
.zweit { color: var(--tinte2); font-size: var(--zweittext); }
.label { font-size: var(--label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte2); }
.warm { color: var(--warm); }
.gruen { color: var(--gruen); }
.akzent { color: var(--akzent); }
.hairline { border-top: 1px solid var(--linie); }
.balance { text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Tasten ---- */
.taste {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier); color: var(--tinte);
  font-size: var(--zweittext); font-weight: 500; white-space: nowrap;
  transition: background var(--dauer), border-color var(--dauer);
}
.taste:hover { background: var(--flaeche); }
.taste:active { background: var(--linie); }
.taste:focus-visible { border-color: var(--akzent); outline-offset: 0; }
.taste[disabled] { color: var(--tinte2); border-color: transparent; cursor: default; background: transparent; }
.taste.primaer { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.taste.primaer:hover { background: var(--tinte2); border-color: var(--tinte2); }
.taste.akzent { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.taste.akzent:hover { background: var(--akzent2); border-color: var(--akzent2); }
.taste.klein { min-height: 28px; padding: 0 10px; font-size: var(--label); }
.taste.icon { padding: 0; width: 36px; justify-content: center; }
.taste.wartend { color: transparent; position: relative; }
.taste.wartend::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--tinte2); }
.tastenreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Felder ---- */
.feld {
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier); color: var(--tinte);
}
.feld:focus { border-color: var(--akzent); outline: none; }
.feld.fehler { border-color: var(--warm); }
textarea.feld { min-height: 80px; resize: vertical; }
select.feld { appearance: none; padding-right: 32px; }
.feldzeile { display: grid; gap: 4px; margin-bottom: 12px; }
.feldzeile > label { font-size: var(--zweittext); color: var(--tinte2); }
.hinweis { font-size: var(--zweittext); color: var(--tinte2); }
.hinweis.warm { color: var(--warm); }

/* ---- Codefenster (5.1) ---- */
#gate {
  position: fixed; inset: 0; background: var(--papier);
  display: grid; grid-template-rows: auto 1fr auto; padding: 16px;
  z-index: 50;
  transition: opacity 200ms ease, transform 200ms ease;
}
#gate.weg { opacity: 0; transform: scale(1.02); pointer-events: none; }
.gate-kopf { display: flex; justify-content: space-between; align-items: center; height: 24px; }
.gate-marke { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.gate-uhr { font-family: var(--mono); font-size: 14px; color: var(--tinte2); }
.gate-mitte { display: grid; place-items: start center; padding-top: 18vh; }
.codefenster {
  width: 360px; max-width: 100%; min-height: 220px;
  background: var(--flaeche); border-radius: var(--radius);
  padding: 32px 32px 24px;
  display: grid; gap: 16px; align-content: center;
  transition: transform var(--dauer);
}
.codefenster.schuettel { animation: schuetteln 320ms ease; }
@keyframes schuetteln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}
.codefenster .feld { text-align: center; font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; min-height: 52px; background: var(--papier); }
.codefenster .feld::placeholder { color: transparent; }
.codefenster .merken { display: flex; align-items: center; gap: 8px; font-size: var(--zweittext); color: var(--tinte2); justify-content: center; }
.codefenster .merken input { width: 16px; height: 16px; accent-color: var(--akzent); margin: 0; }
.codefenster .gate-text { text-align: center; min-height: 20px; font-size: var(--zweittext); color: var(--tinte2); }
.codefenster .gate-text.warm { color: var(--warm); }
.codefenster.einrichtung { width: 440px; }
.codefenster h1 { font-size: var(--modul-titel); font-weight: 600; }
.codefenster .einrichtung-feld { text-align: left; font-family: var(--mono); letter-spacing: 0.05em; font-size: 16px; }
.gate-fuss { text-align: center; font-family: var(--mono); font-size: var(--label); color: var(--tinte2); }
.schluessel { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; font-family: var(--mono); font-size: 13px; word-break: break-all; user-select: all; }

/* ---- App Rahmen ---- */
#app {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
  max-width: 1440px; margin: 0 auto;
  padding: 0 var(--rand-desktop);
  opacity: 0; transition: opacity 200ms ease;
}
#app.da { opacity: 1; }

/* Kopfzeile */
.kopf { display: flex; align-items: flex-end; justify-content: space-between; padding: 20px 0 12px; gap: 16px; }
.kopf-links { display: grid; gap: 2px; }
.marke { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.datum { font-size: 18px; font-weight: 500; }
.kopf-rechts { display: flex; align-items: center; gap: 16px; }
.uhr { font-size: var(--uhr-desktop); font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.uhr .sek { font-size: 0.5em; color: var(--tinte2); margin-left: 2px; }
.sync-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); display: inline-block; }
.sync-punkt.grau { background: var(--tinte2); opacity: 0.5; }
.sync-punkt.warm { background: var(--warm); }
.kopf-tasten { display: flex; gap: 8px; }

/* Startansicht Raster (5.2) */
.ansicht { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-bottom: 24px; min-height: 0; }
.spalte-links { grid-column: span 3; display: grid; gap: 24px; align-content: start; min-width: 0; }
.spalte-mitte { grid-column: span 5; min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.spalte-rechts { grid-column: span 4; min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.ansicht.woche-aktiv .spalte-mitte, .ansicht.woche-aktiv .spalte-rechts { display: none; }
.spalte-woche { grid-column: span 9; min-width: 0; display: none; }
.ansicht.woche-aktiv .spalte-woche { display: block; }

.modul-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.modul-titel { font-size: var(--modul-titel); font-weight: 600; }
.modul-kopf .zaehler { font-family: var(--mono); color: var(--tinte2); font-size: var(--zweittext); }
.leer { color: var(--tinte2); font-size: var(--zweittext); padding: 8px 0; }

/* Prioliste (M2) */
.prios { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.prio { display: grid; grid-template-columns: 40px 1fr; gap: 4px 8px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.prio-nr { font-size: var(--prio-nummer); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.prio.vorgeschlagen .prio-nr { color: var(--tinte2); }
.prio-text { min-width: 0; display: grid; gap: 2px; }
.prio-titel { font-weight: 500; overflow-wrap: anywhere; text-align: left; display: block; width: 100%; }
.prio-zweit { font-size: var(--zweittext); color: var(--tinte2); }
.prio-tasten { display: flex; gap: 4px; align-items: center; grid-column: 2; margin-top: 2px; }
.prio.laeuft .prio-titel::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); margin-right: 6px; vertical-align: 1px; }
.kennzeichen { font-size: var(--label); color: var(--tinte2); letter-spacing: 0.04em; }

/* Nächstes (M3) */
.naechstes { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.naechstes-zeile { display: flex; align-items: center; gap: 12px; }
.naechstes-zeit { font-family: var(--mono); font-size: var(--zweittext); color: var(--tinte2); white-space: nowrap; }
.naechstes-titel { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.naechstes-relativ { font-size: var(--zweittext); color: var(--akzent); font-weight: 500; white-space: nowrap; }

/* Tagesleiste (M4) */
.tagesleiste { position: relative; border-top: 1px solid var(--linie); overflow-y: auto; min-height: 320px; }
.tagesleiste-inner { position: relative; height: var(--tag-hoehe, 960px); margin-top: 10px; margin-bottom: 12px; }
.stunde { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linie); }
.stunde span { position: absolute; left: 0; top: -9px; font-family: var(--mono); font-size: var(--label); color: var(--tinte2); background: var(--papier); padding-right: 6px; }
.termin {
  position: absolute; left: 48px; right: 4px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--flaeche); border-left: 3px solid var(--tinte2);
  overflow: hidden; font-size: var(--zweittext); line-height: 1.3; cursor: pointer;
  transition: background var(--dauer);
}
.termin:hover { background: var(--linie); }
.termin.laeuft { border-left-color: var(--akzent); background: var(--akzent-hell); }
.termin.vorbei { color: var(--tinte2); }
.termin.vorbei .termin-titel { color: var(--tinte2); }
.termin.termin-aufgabe { background: transparent; border: 1px dashed var(--linie); border-left: 3px solid var(--linie); }
.termin.termin-aufgabe.laeuft { border-left-color: var(--akzent); }
.termin.linkedin { border-left-color: var(--tinte); }
.termin.vorlaeufig { border-left-style: dashed; }
.termin-titel { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin-zeit { font-family: var(--mono); font-size: var(--label); color: var(--tinte2); }
.jetzt-linie { position: absolute; left: 40px; right: 0; height: 2px; background: var(--akzent); z-index: 3; pointer-events: none; }
.jetzt-linie::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.ganztags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--flaeche); font-size: var(--zweittext); border: 1px solid var(--linie); }
.pille.akzent { border-color: var(--akzent); color: var(--akzent); }
.randzeile { font-size: var(--zweittext); color: var(--tinte2); padding: 4px 0; }

/* Aufgabenliste (M5) */
.gruppen { display: grid; gap: 4px; overflow-y: auto; min-height: 0; }
.gruppe { border-top: 1px solid var(--linie); }
.gruppe-kopf { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 0; text-align: left; font-weight: 600; }
.gruppe-kopf .zaehler { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: var(--zweittext); color: var(--tinte2); }
.gruppe.ueberfaellig .gruppe-kopf { color: var(--warm); }
.gruppe.ueberfaellig .gruppe-kopf .zaehler { color: var(--warm); }
.gruppe.zu .gruppe-liste { display: none; }
.aufgabe { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linie); position: relative; }
.aufgabe:first-child { border-top: 0; }
.kaestchen { width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--tinte2); border-radius: 4px; display: grid; place-items: center; color: var(--papier); background: transparent; transition: background var(--dauer), border-color var(--dauer); }
.kaestchen:hover { border-color: var(--tinte); }
.aufgabe.erledigt .kaestchen { background: var(--gruen); border-color: var(--gruen); }
.aufgabe.erledigt .aufgabe-titel { text-decoration: line-through; color: var(--tinte2); }
.aufgabe.laeuft .aufgabe-titel::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); margin-right: 6px; vertical-align: 1px; }
.aufgabe-text { min-width: 0; display: grid; gap: 2px; }
.aufgabe-titel { overflow-wrap: anywhere; text-align: left; display: block; width: 100%; }
.naechstes-titel { text-align: left; }
.heute-zeile { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--linie); }
.heute-zeile:first-child { border-top: 0; }
.heute-zeile.vorbei .aufgabe-titel, .heute-zeile.vorbei .mono { color: var(--tinte2); }
.heute-zeile.laeuft .aufgabe-titel::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); margin-right: 6px; vertical-align: 1px; }
.aufgabe-zweit { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--zweittext); color: var(--tinte2); align-items: center; }
.aufgabe-zweit .zeit { font-family: var(--mono); }
.aufgabe.ueberfaellig .aufgabe-zweit .zeit { color: var(--warm); }
.priopunkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tinte); }
.priopunkt.hoch { width: 8px; height: 8px; }
.aufgabe-tasten { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dauer); }
.aufgabe:hover .aufgabe-tasten, .aufgabe:focus-within .aufgabe-tasten { opacity: 1; }
.aufgabe.speichert::after { content: ""; position: absolute; right: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--tinte2); }
.aufgabe .warnung { color: var(--warm); font-size: var(--zweittext); }
.taste.icon.klein { width: 28px; }

/* Jetzt Karte und Leiste (M6) */
.jetzt-leiste {
  position: sticky; bottom: 0; background: var(--papier);
  border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: minmax(200px, 3fr) minmax(200px, 6fr) auto; gap: 24px; align-items: center;
  padding: 12px 0 16px; min-height: 84px;
}
.jetzt-info { min-width: 0; display: grid; gap: 2px; }
.jetzt-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jetzt-zeit { font-family: var(--mono); font-size: var(--zweittext); color: var(--tinte2); }
.zeitbalken { position: relative; height: var(--balken); border-radius: 999px; background: var(--linie); overflow: hidden; }
.zeitbalken-fuell { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--akzent); border-radius: 999px; }
.zeitbalken.ueber .zeitbalken-fuell { background: var(--warm); width: 100% !important; }
.zeitbalken.pause .zeitbalken-fuell { background: repeating-linear-gradient(90deg, var(--akzent) 0 6px, transparent 6px 10px); }
.zeitbalken.still .zeitbalken-fuell { background: var(--tinte2); opacity: 0.5; }
.jetzt-rechts { display: flex; align-items: center; gap: 16px; }
.restzeit { font-family: var(--mono); font-size: 28px; font-weight: 500; min-width: 5.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.restzeit.ueber { color: var(--warm); }
.restzeit.still { color: var(--tinte2); font-size: var(--zweittext); }
.jetzt-tasten { display: flex; gap: 6px; }
.jetzt-hinweis { font-size: var(--zweittext); color: var(--tinte2); }
.dauerwahl { display: inline-flex; gap: 4px; }

/* Statusleiste (M8) */
.status { display: flex; gap: 16px; align-items: center; font-family: var(--mono); font-size: var(--label); color: var(--tinte2); padding: 8px 0 12px; flex-wrap: wrap; }
.status button { font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.status .warm { color: var(--warm); }
.status .hinweis-zeile { display: inline-flex; align-items: center; gap: 6px; }

/* Wochenraster (M10) */
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--linie); padding-top: 12px; }
.woche-tag { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.woche-tag.wochenende { color: var(--tinte2); }
.woche-tag.heute .woche-datum { color: var(--akzent); }
.woche-datum { font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; }
.woche-datum .zaehler { font-family: var(--mono); font-weight: 400; font-size: var(--label); color: var(--tinte2); }
.woche-termin { font-size: var(--zweittext); padding: 4px 6px; border-radius: 4px; background: var(--flaeche); border-left: 3px solid var(--tinte2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.woche-termin .zeit { font-family: var(--mono); color: var(--tinte2); font-size: var(--label); }
.woche-aufgabe { font-size: var(--zweittext); padding: 2px 0; display: flex; gap: 6px; align-items: baseline; cursor: pointer; border-radius: 4px; }
.woche-aufgabe:hover { background: var(--flaeche); }
.woche-aufgabe .zeit { font-family: var(--mono); color: var(--tinte2); font-size: var(--label); white-space: nowrap; }
.woche-aufgabe .t { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woche-aufgabe.ueberfaellig .zeit { color: var(--warm); }

/* Dialog */
.dialog-schleier { position: fixed; inset: 0; background: var(--schleier); display: grid; place-items: center; padding: 16px; z-index: 60; animation: einblenden var(--dauer) ease; }
.dialog { width: 560px; max-width: 100%; max-height: 90vh; max-height: 90dvh; overflow-y: auto; background: var(--papier); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; border: 1px solid var(--linie); }
.dialog-kopf { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.dialog-titel { font-size: var(--modul-titel); font-weight: 600; overflow-wrap: anywhere; }
.dialog-felder { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; font-size: var(--zweittext); }
.dialog-felder dt { color: var(--tinte2); }
.dialog-felder dd { margin: 0; overflow-wrap: anywhere; }
.dialog-fuss { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dialog .liste { display: grid; gap: 6px; }
.dialog .zeile { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.dialog .zeile:first-child { border-top: 0; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Schnelleingabe (M7) */
.schnell { display: grid; gap: 12px; }
.schnell .feld { font-size: 16px; }
.vorschau { background: var(--flaeche); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; font-size: var(--zweittext); }
.vorschau-zeile { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: center; }
.vorschau-zeile dt { color: var(--tinte2); }
.vorschau-zeile dd { margin: 0; }
.vorschau-zeile .fehlt { color: var(--warm); }
.vorschau .vorschlag { color: var(--akzent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linie); font-size: var(--label); background: var(--papier); }
.chip:hover, .chip:focus-visible { border-color: var(--akzent); color: var(--akzent); }
.chip.aktiv { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.syntax { font-family: var(--mono); font-size: var(--label); color: var(--tinte2); }

/* Toast */
.toast-root { position: fixed; left: 0; right: 0; bottom: 24px; display: grid; justify-items: center; z-index: 70; pointer-events: none; gap: 8px; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius); background: var(--tinte); color: var(--papier); font-size: var(--zweittext); box-shadow: none; animation: einblenden var(--dauer) ease; max-width: min(90vw, 560px); }
.toast button { color: var(--akzent2); font-weight: 600; }
:root[data-welt="dunkel"] .toast button { color: var(--akzent); }
.toast.warm { background: var(--warm); color: #fff; }
.toast.warm button { color: #fff; text-decoration: underline; }

/* Mehr Ansicht */
.mehr { display: grid; gap: 24px; max-width: 720px; }
.mehr section { display: grid; gap: 8px; }
.mehr .zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.mehr .zeile:first-of-type { border-top: 0; }
.kuerzel { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; font-size: var(--zweittext); }
.kuerzel kbd { font-family: var(--mono); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; padding: 0 6px; font-size: var(--label); }
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.zahl { background: var(--flaeche); border-radius: var(--radius); padding: 12px; display: grid; gap: 2px; }
.zahl b { font-size: 28px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.zahl span { font-size: var(--label); color: var(--tinte2); text-transform: uppercase; letter-spacing: 0.06em; }

/* Freigabe Zeile */
.freigabe { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--akzent-hell); border-radius: var(--radius); margin-bottom: 12px; font-size: var(--zweittext); flex-wrap: wrap; }
.freigabe b { font-family: var(--mono); }

/* Tab Leiste und FAB (iPhone) */
.tabs { display: none; }
.fab { display: none; }
.nur-iphone { display: none !important; }

/* Bewegung reduziert */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- iPhone (5.3) ---- */
@media (max-width: 760px) {
  .nur-desktop { display: none !important; }
  .nur-iphone { display: revert !important; }
  #app { padding: 0 var(--rand-iphone); padding-top: env(safe-area-inset-top); padding-bottom: calc(64px + env(safe-area-inset-bottom)); grid-template-rows: auto 1fr; }
  .kopf { padding: 12px 0 8px; align-items: center; }
  .datum { font-size: 14px; font-weight: 500; }
  .uhr { font-size: var(--uhr-iphone); }
  .uhr .sek { display: none; }
  .uhr.mit-sek .sek { display: inline; }
  .kopf-tasten { display: none; }
  .ansicht { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 16px; }
  .ansicht > * { grid-column: auto; display: grid; }
  .spalte-links { gap: 20px; }
  .spalte-mitte, .spalte-rechts { grid-template-rows: auto auto; }
  .ansicht.woche-aktiv .spalte-mitte, .ansicht.woche-aktiv .spalte-rechts { display: grid; }
  .spalte-woche { display: none !important; }
  .ansicht[data-tab="jetzt"] .modul-todo .gruppe:not(.ueberfaellig) { --zu: 1; }
  .ansicht[data-tab="jetzt"] .tagesleiste { min-height: 0; }
  .ansicht[data-tab="heute"] .spalte-links, .ansicht[data-tab="heute"] .spalte-rechts, .ansicht[data-tab="heute"] .jetzt-karte { display: none; }
  .ansicht[data-tab="todo"] .spalte-links, .ansicht[data-tab="todo"] .spalte-mitte, .ansicht[data-tab="todo"] .jetzt-karte { display: none; }
  .ansicht[data-tab="woche"] .spalte-links, .ansicht[data-tab="woche"] .spalte-mitte, .ansicht[data-tab="woche"] .spalte-rechts, .ansicht[data-tab="woche"] .jetzt-karte { display: none; }
  .ansicht[data-tab="woche"] .spalte-woche { display: block !important; }
  .ansicht[data-tab="mehr"] .spalte-links, .ansicht[data-tab="mehr"] .spalte-mitte, .ansicht[data-tab="mehr"] .spalte-rechts, .ansicht[data-tab="mehr"] .jetzt-karte { display: none; }
  .ansicht:not([data-tab="mehr"]) .spalte-mehr { display: none; }
  .ansicht[data-tab="mehr"] .spalte-mehr { display: block; }
  .woche { grid-template-columns: 1fr; gap: 16px; }
  .jetzt-leiste { display: none; }
  .jetzt-karte { display: grid; gap: 10px; background: var(--flaeche); border-radius: var(--radius); padding: 16px; }
  .jetzt-karte .restzeit { font-size: 36px; text-align: left; }
  .jetzt-karte .restzeit.still { font-size: var(--zweittext); }
  .jetzt-karte .jetzt-rechts { justify-content: space-between; }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--papier); border-top: 1px solid var(--linie);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .tab { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--tinte2); padding: 4px 0; }
  .tab svg.ic { width: 22px; height: 22px; }
  .tab.aktiv { color: var(--akzent); }
  .fab {
    position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 41;
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--tinte); color: var(--papier);
  }
  .fab svg.ic { width: 24px; height: 24px; }
  /* Am iPhone: Wischen (rechts erledigt, links verschiebt) und Tippen (Dialog) statt Tastenreihe je Zeile */
  .aufgabe-tasten { display: none; }
  .aufgabe { grid-template-columns: 24px 1fr; }
  /* Nächstes als eine Zeile vor den Hauptprios (Abschnitt 5.3) */
  .spalte-links .modul-next { order: -1; }
  .prio { grid-template-columns: 36px 1fr; }
  .dialog { padding: 20px 16px; }
  .dialog-felder { grid-template-columns: 96px 1fr; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .status { padding-bottom: 0; }
  .termin { left: 40px; }
}
@media (min-width: 761px) {
  .jetzt-karte { display: none; }
  .spalte-mehr { display: none; }
  .ansicht[data-tab="mehr"] .spalte-mehr { display: block; grid-column: span 9; }
  .ansicht[data-tab="mehr"] .spalte-mitte, .ansicht[data-tab="mehr"] .spalte-rechts, .ansicht[data-tab="mehr"] .spalte-woche { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .uhr { font-size: 48px; }
  .spalte-links { grid-column: span 4; }
  .spalte-mitte { grid-column: span 8; }
  .spalte-rechts { grid-column: span 12; }
}

/* Fokusmodus (5.10) */
body.fokus #app > *:not(.jetzt-leiste) { display: none; }
body.fokus .jetzt-leiste { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: center; justify-items: center; gap: 24px; padding: 32px; border: 0; }
body.fokus .restzeit { font-size: 22vw; }
body.fokus .zeitbalken { width: min(80vw, 900px); }
body.fokus .jetzt-info { text-align: center; }
body.fokus .jetzt-titel { font-size: 24px; white-space: normal; }

/* Drucken */
@media print { .tabs, .fab, .jetzt-leiste, .kopf-tasten { display: none !important; } }