/* Sua – Look „leeres Blatt“: Tag = weißes Blatt, Nacht (20:00–07:59 Berlin) = gleiches Blatt dunkel */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/geist.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/geistmono.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/sourceserif4.woff2) format('woff2'); }

:root {
  --bg: #ffffff; --fg: #111111; --text2: #444444; --muted: #8a8a8a; --line: #ededed; --warn: #c2410c;
  --btn-bg: #111111; --btn-fg: #ffffff; --schatten: rgba(0, 0, 0, .06); --hg: rgba(17, 17, 17, .22);
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sa-o: env(safe-area-inset-top, 0px); --sa-u: env(safe-area-inset-bottom, 0px); --leiste: 64px; /* Höhe der unteren Leiste ohne Home-Indikator-Bereich */
  color-scheme: light;
}
html.nacht {
  --bg: #0c0c0d; --fg: #ececea; --text2: #c9c9c6; --muted: #8f8f8c; --line: #232325; --warn: #f0883e;
  --btn-bg: #ececea; --btn-fg: #0c0c0d; --schatten: rgba(0, 0, 0, .5); --hg: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: background-color .6s, color .6s, border-color .6s; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--sans); overscroll-behavior-y: none; }
body { min-height: 100dvh; overflow-x: clip; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
@keyframes atmen { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.88); } }
@keyframes dreh { to { transform: rotate(360deg); } }
@keyframes hoch { from { transform: translateY(30px); opacity: 0; } }

/* Bausteine: Punkt, Textlink, Knöpfe, Eingaben */
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); animation: atmen 3.2s ease-in-out infinite; }
.punkt.gross { width: 12px; height: 12px; }
.textLink, .linkKnopf { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; text-align: left; }
.knopf { background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; font-size: 14px; padding: 13px 18px; border-radius: 2px; text-align: center; }
.knopf:disabled { opacity: .5; }
.knopf.leise, .knopf.gefahr { background: none; color: var(--text2); font-weight: 400; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; padding: 10px 6px; }
.knopf.gefahr, .gefahrKlein, .fehler { color: var(--warn); }
input, select, textarea { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; outline: none; }
input:focus, select:focus, textarea:focus { border-bottom-color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { resize: vertical; line-height: 1.45; }
.fehler { min-height: 1.2em; font-size: 13.5px; }
.hinweis { color: var(--muted); font-size: 12.5px; }
.leer { color: var(--muted); font-size: 14px; padding: 10px 0; }

/* Anmeldung */
.login { min-height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20px; padding: 24px max(24px, calc((100vw - 300px) / 2)); }
.slogan { font: 400 27px/1.15 var(--serif); }
#loginForm { display: flex; flex-direction: column; gap: 14px; }
#loginForm .fehler { text-align: left; }

/* Gerüst */
.seite { max-width: 430px; margin: 0 auto; min-height: 100dvh; padding: calc(var(--sa-o) + 8px) 24px calc(var(--leiste) + var(--sa-u) + 16px); }
.kopf { display: flex; justify-content: space-between; align-items: center; height: 48px; }
.kopfRechts { display: flex; gap: 6px; margin-right: -8px; }
.rund { width: 36px; height: 36px; color: var(--muted); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rund.stopp { color: var(--warn); font-size: 12px; }
.rund.dreht svg { animation: dreh .8s linear infinite; }
.rund.text { font-size: 24px; font-weight: 300; }

/* Heute */
.warnungen { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; align-items: flex-start; }
.warn { color: var(--warn); font-size: 13.5px; padding: 3px 0 3px 14px; position: relative; }
.warn::before { content: ''; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.gruss { margin: 18px 0 20px; }
.gruss h1 { font: 400 27px/1.15 var(--serif); }
.datumZeile { color: var(--muted); font-size: 12px; margin-top: 6px; }
.briefingText { font: 400 15.5px/1.55 var(--serif); color: var(--text2); white-space: pre-line; overflow-wrap: anywhere; }
#vorlesen { margin-top: 6px; }
.liste { margin-top: 26px; }
.liste > .zeile:last-child, .liste > .kachel:last-child { border-bottom: 1px solid var(--line); }
.untertitel { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin: 18px 0 6px; }
.liste > .untertitel:first-child { margin-top: 0; }
.fuss { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 28px; }

/* Haarlinien-Zeilen: Uhrzeit-Spalte + Titel (Heute, Planer) */
.zeile, .eintrag, .todoZeile .innen { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.zeit { font: 400 12.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); width: 62px; flex: none; }
.zeit.orange { color: var(--warn); }
.txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.meta { display: block; color: var(--muted); font-size: 12px; }
.kreis { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); flex: none; padding: 0; }
.kreis.fertig { background: var(--fg); border-color: var(--fg); }

/* Kennzahlen als Liste „Bezeichnung … Wert ›“ */
.kachel { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 0; border-top: 1px solid var(--line); }
.kLabel { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.kLabel small { color: var(--muted); font-size: 11.5px; }
.kachel b { font: 400 13px var(--mono); font-variant-numeric: tabular-nums; text-align: right; max-width: 48%; overflow-wrap: anywhere; }
.kachel b.schlecht { color: var(--warn); }
.kachel b.aus { color: var(--muted); }
.pfeil { font-style: normal; color: var(--muted); }

/* Chat */
.tab.chat { display: flex; flex-direction: column; height: calc(100dvh - var(--sa-o) - 8px - 48px - var(--leiste) - var(--sa-u) - 16px); min-height: 320px; }
.chatKopf { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 8px; }
.chatKopf b { font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; scrollbar-width: none; }
.blase { max-width: 92%; white-space: pre-line; overflow-wrap: anywhere; }
.blase.sua { align-self: flex-start; font: 400 16px/1.5 var(--serif); }
.blase.chef { align-self: flex-end; text-align: right; color: var(--muted); font-size: 14px; max-width: 80%; }
.blase.denkt { color: var(--muted); font-style: italic; }
.blase .aktion { display: block; margin-top: 6px; font: 400 12px var(--sans); color: var(--muted); }
.blase .aktion.fehl { color: var(--warn); }
.mailLink { display: block; margin-top: 6px; }
.mikroStatus { text-align: center; color: var(--warn); font-size: 13.5px; padding: 6px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.mikroPunkt { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: atmen 1.1s ease-in-out infinite; }
.chatForm { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.chatForm input { border: 0; }
.senden { width: 36px; flex: none; color: var(--muted); font-size: 20px; }
.leerChat { color: var(--muted); margin: auto; padding: 0 4px; font-size: 14px; }
.leerChat p:first-child { font: 400 22px/1.2 var(--serif); color: var(--fg); }
.leerChat p + p { margin-top: 8px; }

/* Planer */
.segment { display: flex; gap: 22px; margin: 8px 0 14px; }
.segment button { color: var(--muted); padding: 4px 0; border-bottom: 1px solid transparent; }
.segment button.an { color: var(--fg); border-bottom-color: var(--fg); }
.neuZeile { display: grid; grid-template-columns: 1fr 36px; gap: 8px; margin-bottom: 12px; align-items: center; }
.neuZeile .zwei { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.neuZeile button.plus { width: 30px; height: 30px; border: 1px solid var(--fg); border-radius: 50%; font-size: 18px; line-height: 1; }
.todoZeile { position: relative; overflow: hidden; }
.todoZeile .innen { transition: transform .15s, background-color .6s, color .6s, border-color .6s; background: var(--bg); }
.loesch { color: var(--muted); font-size: 20px; width: 28px; height: 28px; flex: none; }
details.erledigt summary { color: var(--muted); padding: 12px 0; cursor: pointer; font-size: 13px; }
details.erledigt .txt { text-decoration: line-through; color: var(--muted); }
.woche { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.woche b { font: 400 12px var(--mono); color: var(--muted); }
.tag { margin-top: 18px; }
.tag h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 500; }
.tag.heute h3 { color: var(--fg); }
.eintrag { width: 100%; text-align: left; align-items: baseline; }
.eintrag .ort { color: var(--muted); font-size: 12.5px; }
.eintrag.frist { cursor: default; }
.leerTag { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding: 9px 0; }
.planKnopf { margin-top: 22px; }

/* Navigation unten: Heute · Mikro · Planer */
.tabLeiste { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 430px; margin: 0 auto; height: calc(var(--leiste) + var(--sa-u)); padding: 0 24px var(--sa-u); background: var(--bg); border-top: 1px solid var(--line); z-index: 20; }
.tabLeiste button span { font-size: 13px; color: var(--muted); padding: 12px 0; display: inline-block; }
.tabLeiste button.an span { color: var(--fg); }
.tabLeiste button:first-child { text-align: left; }
.tabLeiste button:last-child { text-align: right; }
.tabLeiste button.mitte i { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--fg); display: grid; place-items: center; }
.tabLeiste button.mitte i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); transition: background-color .6s; }
.tabLeiste button.mitte.denkt i { animation: atmen 1.4s ease-in-out infinite; }
.tabLeiste button.mitte.nimmtAuf i { border-color: var(--warn); animation: atmen 1.1s ease-in-out infinite; }
.tabLeiste button.mitte.nimmtAuf i::before { background: var(--warn); }

/* Fenster von unten: weißes Blatt */
.fenster { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.fensterHg { position: absolute; inset: 0; background: var(--hg); }
.fensterBox { position: relative; width: 100%; max-width: 430px; max-height: 88dvh; overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); padding: 24px 24px calc(24px + var(--sa-u)); box-shadow: 0 -8px 30px var(--schatten); animation: hoch .22s ease-out; }
.fensterBox h2 { font: 400 22px/1.2 var(--serif); margin-bottom: 14px; }
.fensterBox h2.mailTitel { font-size: 19px; overflow-wrap: anywhere; margin-bottom: 8px; }
.fensterBox h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 22px 0 6px; font-weight: 500; }
.zahlen { display: flex; flex-direction: column; }
.zahl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.zahl small { color: var(--muted); font-size: 13px; }
.zahl b { font: 400 13px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; padding: 4px 8px 4px 0; }
td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
td.r, th.r { text-align: right; font-family: var(--mono); padding-right: 0; }
th.r { font-family: var(--sans); }
.ok { color: var(--fg); } .schlecht { color: var(--warn); }
.feldZeile { margin-bottom: 12px; }
.feldZeile label { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.knoepfe { display: flex; gap: 8px; margin-top: 20px; align-items: center; }
.knoepfe > * { flex: 1; }
.knoepfe.wrap { flex-wrap: wrap; } .knoepfe.wrap > * { flex: 1 1 40%; }
.seoText, .mailText { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: var(--text2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; max-height: 36vh; overflow-y: auto; margin-bottom: 12px; }
.mailText { font-size: 14px; }

/* E-Mail, Einstellungen */
.reiter { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.reiterKnopf { font-size: 13px; color: var(--muted); padding: 4px 0; border-bottom: 1px solid transparent; }
.reiterKnopf.an { color: var(--fg); border-bottom-color: var(--fg); }
.mailZeile { display: block; width: 100%; text-align: left; padding: 10px 0; border-top: 1px solid var(--line); }
.mailKopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mailVon { color: var(--muted); font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailZeit { color: var(--muted); font: 400 12px var(--mono); flex: none; }
.mailBetreff { font-size: 15px; overflow-wrap: anywhere; margin-top: 1px; }
.mailSumme { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; margin-top: 2px; }
.mailZeile.neu .mailVon, .mailZeile.neu .mailBetreff { color: var(--fg); font-weight: 600; }
.mailRow .innen { padding: 0; align-items: stretch; gap: 0; }
.mailRow .mailZeile { flex: 1; min-width: 0; border-top: 0; }
.mailRow .loesch { align-self: center; }
.alleErledigt { display: block; margin: 6px 0 2px; }
.pushBereich .knopf { padding-left: 0; }
details.werbung { margin-top: 12px; } details.werbung summary { color: var(--muted); padding: 8px 0; cursor: pointer; font-size: 13px; }
.mailMeta { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; margin-bottom: 10px; }
.mailZusammen { font: 400 15px/1.5 var(--serif); margin-bottom: 10px; overflow-wrap: anywhere; }
.entwurf { margin-top: 8px; }
.hinweisBox { color: var(--muted); font-size: 13.5px; margin-bottom: 6px; }
.hinweisBox.warn { color: var(--warn); padding-left: 14px; }
.hinweis.links, .links { text-align: left; } .hinweis.links { margin-bottom: 8px; }
.postfach { padding: 12px 0; border-top: 1px solid var(--line); }
.pfKopf { display: flex; gap: 14px; align-items: center; }
.pfName { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pfName span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.pfStatus { color: var(--muted); font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; } .pfStatus.rot { color: var(--warn); }
.pfForm { margin-top: 10px; } .pfForm .knopf { width: 100%; margin-top: 8px; }

/* Hinweise */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--leiste) + var(--sa-u) + 16px); background: var(--fg); color: var(--bg); padding: 10px 16px; display: flex; align-items: center; gap: 14px; border-radius: 2px; z-index: 80; font-size: 13.5px; max-width: 90vw; }
.toastAktion { color: var(--bg); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; white-space: nowrap; }
.ptr { position: fixed; top: calc(var(--sa-o) + 6px); left: 50%; margin-left: -14px; width: 28px; height: 28px; z-index: 30; pointer-events: none; }
.ptr span { display: block; width: 100%; height: 100%; border: 2px solid var(--line); border-top-color: var(--fg); border-radius: 50%; }
.ptr.laedt span { animation: dreh .7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .punkt, .mikroPunkt, .rund.dreht svg, .tabLeiste button.mitte i, .fensterBox, .ptr.laedt span { animation: none !important; }
}