/* Postfrieden: Farben, Grundklassen und Seitenstile.
   Ruhig und hell, eine große Sache pro Bildschirm. System-Schriften, keine Inline-Stile (CSP). */

:root {
  --blatt: #fbfaf7;
  --tinte: #1f2a2e;
  --tinte-2: #44525a;
  --tinte-3: #6b777d;
  --linie: #dcdcd6;
  --linie-2: #ecebe6;
  --grau-hell: #f1f0ec;
  --petrol: #1f5f6b;
  --petrol-hell: #e3eef0;
  --ocker-hell: #efe9df;
  --rot: #9a4a3c;
  --vorbei-hell: #f5ebe7;
  --radius: 14px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blatt); color: var(--tinte); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
.knopf-gross { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 18px; border: 0; border-radius: var(--radius); font: inherit; font-weight: 650; cursor: pointer; text-align: center; }
.knopf-haupt { background: var(--petrol); color: #fff; }
.knopf-ruhig { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); }
.knopf-gross:focus-visible, .link-leise:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.link-leise { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; font: inherit; padding: 8px 4px; }
.fehler-zeile { margin: 0; padding: 10px 12px 10px 14px; border-radius: 10px; background: var(--grau-hell); color: var(--tinte); box-shadow: inset 3px 0 0 var(--petrol); }
dialog.dialog { width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 0; border: 0; border-radius: 18px; background: var(--blatt); color: var(--tinte); }
dialog.dialog::backdrop { background: rgba(31, 42, 46, .45); }
.dialog-innen { display: grid; padding: 16px; }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog-kopf h2 { margin: 0; font-size: 20px; }
.dialog-hinweis { margin: 0; color: var(--tinte-2); font-size: 15px; }
.schliessen { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--tinte-2); }
/* Chrome begrenzt modale Dialoge sonst auf 100% - 6px - 2em (bei 320 px nur 280 px breit). */
dialog.dialog { max-width: calc(100vw - 16px); }
/* Kacheln mindestens 136 px: drei Knöpfe ‹ × › bleiben je 44 px breit (3 x 44 + 2 x 2). */
.seiten-dialog .seiten-liste { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.seiten-dialog .seiten-aktionen { gap: 2px; }
@media (max-width: 359px) {
  .seiten-dialog .dialog-innen { padding: 12px; }
  .seiten-dialog .seiten-liste { gap: 8px; }
}

/* ── Ergänzende Tokens und Feinschliff der Grundklassen ── */

:root {
  --petrol-tief: #184c56;
  --papier: #fff;
  --schatten: 0 1px 2px rgba(31, 42, 46, .04), 0 18px 40px -22px rgba(31, 42, 46, .22);
  --rand: max(16px, calc((100% - 560px) / 2 + 16px));
  /* Umschlag mit weich geschwungener Klappe: das Zeichen der Wortmarke. */
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f6b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='5.25' width='18.5' height='13.5' rx='3'/%3E%3Cpath d='M3.6 7.4c2.9 2.9 5.6 4.4 8.4 4.4s5.5-1.5 8.4-4.4'/%3E%3C/svg%3E");
}
body { min-height: 100vh; min-height: 100dvh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a.knopf-gross { text-decoration: none; }
.knopf-gross { font-size: 17px; line-height: 1.25; transition: background-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.knopf-gross[disabled] { opacity: .55; cursor: default; }
.knopf-haupt:hover { background: var(--petrol-tief); }
.knopf-ruhig:hover { box-shadow: inset 0 0 0 1.5px var(--tinte-3); }
.link-leise { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 1px; text-decoration-color: rgba(31, 95, 107, .45); }
.link-leise:hover { text-decoration-color: currentColor; }
.fehler-zeile { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Wortmarke ── */

.wortmarke { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--tinte); }
.wortmarke::before { content: ""; width: 24px; height: 24px; background: var(--zeichen) center / contain no-repeat; }

/* ── Kopfzeile ── */

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px var(--rand); padding-top: max(8px, env(safe-area-inset-top)); }
.kopf .link-leise { color: var(--tinte-2); text-decoration: none; padding-inline: 8px; margin-inline: -8px; font-size: 16px; }
.kopf .link-leise:hover { color: var(--tinte); }
.seite-brief .kopf .wortmarke { font-size: 15px; color: var(--tinte-3); }
.seite-brief .kopf .wortmarke::before { width: 20px; height: 20px; opacity: .8; }

/* ── Seitenaufbau ── */

.seite-heute, .seite-brief { display: flex; flex-direction: column; }
.inhalt { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 16px 32px; }
.fehler-zeile.unten { margin: 0 var(--rand) 12px; }
.seite-heute .fehler-zeile.unten { order: 2; }
.seite-heute .aktionen { order: 3; }

/* ── Heute ── */

.gruss { margin: 12px 0 18px; font-size: 17px; font-weight: 600; color: var(--tinte-3); letter-spacing: 0; }
/* Ohne offene Sache sagt die Karte schon alles; die Überschrift bleibt für Screenreader. */
.inhalt:has(.ruhe) .gruss { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.inhalt:has(.ruhe) [data-eine] { margin-top: 16px; }

.heute-karte { --karte-rand: 22px; position: relative; display: grid; gap: 14px; justify-items: start; padding: 24px var(--karte-rand) 22px; border-radius: 20px; background: var(--papier); box-shadow: var(--schatten); }
.heute-karte > .knopf-gross { position: relative; justify-self: stretch; margin-top: 18px; }
/* Falz: die untere Faltung des Briefs trennt Inhalt und Handlung. */
.heute-karte > .knopf-gross::before { content: ""; position: absolute; left: calc(-1 * var(--karte-rand)); right: calc(-1 * var(--karte-rand)); top: -17px; height: 1px; background: linear-gradient(90deg, transparent, var(--linie-2) 12%, var(--linie-2) 88%, transparent); pointer-events: none; }
.karte-art { margin: 0; font-size: 15px; color: var(--tinte-3); overflow-wrap: anywhere; }
.karte-handlung { margin: 0; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -.018em; color: var(--tinte); overflow-wrap: break-word; hyphens: auto; }
.karte-hinweis { margin: 0; padding-left: 12px; border-left: 2px solid var(--linie); font-size: 15px; color: var(--tinte-2); }

.frist { display: inline-block; max-width: 100%; padding: 5px 11px; border-radius: 9px; font-size: 15px; font-weight: 600; line-height: 1.35; background: var(--grau-hell); color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.frist[data-ton="bald"] { background: var(--petrol-hell); color: var(--petrol-tief); }
.frist[data-ton="vorbei"] { background: var(--vorbei-hell); color: var(--rot); }

.ruhe { justify-items: start; padding: 28px var(--karte-rand) 26px; }
@media (max-width: 359px) { .heute-karte { --karte-rand: 18px; } .heute-karte > .knopf-gross { padding-inline: 12px; } }
.ruhe::before { content: ""; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--zeichen) center / 30px no-repeat, var(--petrol-hell); }
.ruhe h2 { margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: -.018em; }
.ruhe p { margin: 0; color: var(--tinte-2); max-width: 34ch; }

.lesend { display: flex; align-items: center; gap: 10px; margin: 18px 4px 0; font-size: 15px; color: var(--tinte-2); }
.lesend::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); animation: atmen 1.8s ease-in-out infinite; }
@keyframes atmen { 50% { opacity: .25; transform: scale(.7); } }
.lesend-liste { margin-top: 10px; }
.lesend-liste .zeile-titel { font-weight: 500; color: var(--tinte-2); }
.zeile-hinweis { font-size: 14px; color: var(--tinte-3); overflow-wrap: anywhere; }

.spaeter { margin-top: 28px; }
.spaeter + .spaeter { margin-top: 12px; }
.spaeter summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; list-style: none; cursor: pointer; font-weight: 600; color: var(--tinte-2); border-radius: 10px; }
.spaeter summary::-webkit-details-marker { display: none; }
.spaeter summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--tinte-3); border-bottom: 2px solid var(--tinte-3); transform: translateY(-3px) rotate(45deg); transition: transform .15s ease; }
.spaeter[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.spaeter summary:focus-visible, .korrektur summary:focus-visible, .zeile:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.liste { list-style: none; margin: 6px 0 0; padding: 0; border-radius: 16px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
.liste li + li { border-top: 1px solid var(--linie-2); }
.zeile { display: grid; gap: 6px; justify-items: start; min-height: 56px; padding: 14px 16px; color: var(--tinte); text-decoration: none; }
.zeile:hover { background: var(--blatt); }
.zeile-titel { font-weight: 550; overflow-wrap: anywhere; }
.zeile .frist { padding: 2px 8px; font-size: 14px; }
[data-erledigt] .zeile-titel { color: var(--tinte-3); }

/* Aktionsleiste: auf dem Handy immer in Daumennähe. */
.aktionen { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; padding: 14px var(--rand); padding-bottom: max(14px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--blatt) 72%, rgba(251, 250, 247, 0)); }
.aktionen .knopf-gross { padding-inline: 10px; white-space: nowrap; }
/* Schmale Handys: Hauptknopf über die volle Breite, PDF leiser darunter. */
@media (max-width: 419px) {
  .aktionen { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 18px; }
  .aktionen .knopf-ruhig { min-height: 46px; font-weight: 600; }
}
.aktionen label.ist-gesperrt { opacity: .55; pointer-events: none; }
.aktionen label.knopf-gross:focus-within { outline: 3px solid var(--petrol); outline-offset: 2px; }

/* ── Brief ── */

.brief { display: grid; gap: 14px; align-content: start; justify-items: start; padding-top: 16px; }
.brief > * { max-width: 100%; }
.brief .karte-handlung { font-size: 30px; }
.brief > .karte-art { margin-top: 4px; }
.erklaerung { margin: 8px 0 0; color: var(--tinte-2); max-width: 60ch; }
.hinweis-recht { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--grau-hell); font-size: 15px; color: var(--tinte-2); }
.girocode { display: grid; justify-items: center; gap: 12px; justify-self: stretch; margin: 10px 0 0; padding: 22px 18px 18px; border-radius: 20px; background: var(--papier); box-shadow: var(--schatten); }
.girocode img { display: block; width: 220px; height: 220px; max-width: 100%; }
.girocode figcaption { font-size: 15px; color: var(--tinte-2); text-align: center; max-width: 30ch; overflow-wrap: anywhere; }
.knopf-reihe { display: grid; gap: 10px; justify-self: stretch; margin-top: 12px; }
.erledigt-text { margin: 0; font-size: 22px; font-weight: 700; color: var(--petrol); }
.knopf-reihe .link-leise { justify-self: start; }
.korrektur { justify-self: stretch; margin-top: 18px; border-top: 1px solid var(--linie-2); padding-top: 6px; }
.korrektur summary { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; color: var(--tinte-2); font-size: 16px; font-weight: 550; list-style: none; border-radius: 10px; }
.korrektur summary::-webkit-details-marker { display: none; }
.korrektur summary::after { content: "+"; margin-left: auto; padding-right: 4px; font-size: 22px; font-weight: 400; color: var(--tinte-3); }
.korrektur[open] summary::after { content: "−"; }
.korrektur .formular { padding: 8px 0 12px; }
.brief > .link-leise:last-child { margin-top: -4px; }

/* ── Formulare ── */

.formular { display: grid; gap: 16px; }
.formular label, .feld { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--tinte-2); }
.formular input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--papier); color: var(--tinte); font: inherit; font-size: 17px; font-weight: 400; }
.formular input:not([type="checkbox"]):focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-hell); }
.formular input[type="date"] { -webkit-appearance: none; appearance: none; }
.formular .knopf-gross { margin-top: 4px; }
.feld-hinweis { font-weight: 400; font-size: 14px; color: var(--tinte-3); }
.formular .einwilligung { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: 12px; background: var(--grau-hell); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--tinte-2); cursor: pointer; }
.einwilligung input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--petrol); }

/* ── Konto-Seiten ── */

.konto { width: 100%; max-width: 420px; margin: 0 auto; padding: max(28px, 9vh) 16px 40px; }
.konto .wortmarke { margin-bottom: 40px; }
.konto h1 { margin: 0 0 24px; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.022em; }
.konto-text { margin: -10px 0 24px; color: var(--tinte-2); }
.meldung { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--petrol-hell); color: var(--petrol-tief); }
.konto-links { margin: 18px 0 0; text-align: center; }
.konto-links .link-leise { font-size: 16px; }

/* ── Etappe 2a: Kopf-Links, nur ablegen, Hinweise ── */

.kopf { flex-wrap: wrap; }
.kopf-links { display: flex; align-items: center; gap: 16px; }
.kopf .kopf-links .link-leise { margin-inline: 0; padding-inline: 2px; }
@media (max-width: 379px) {
  /* Gemessen bei 320 px: Zeichen 24 + Abstand 6 + Links 253 = 283 von 288 px, bleibt einzeilig. */
  .kopf { gap: 6px; }
  .kopf-links { gap: 8px; }
  .kopf .kopf-links .link-leise { font-size: 15px; }
  .kopf .wortmarke-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.aktionen .ablegen { grid-column: 1 / -1; justify-self: center; min-height: 44px; padding: 4px 8px; font-size: 16px; font-weight: 400; color: var(--tinte-2); white-space: normal; }
label.ist-gesperrt { opacity: .55; pointer-events: none; }
.ablegen-dialog .dialog-innen { gap: 12px; }
.ablegen-dialog .knopf-reihe { margin-top: 4px; }
.hinweis-push { display: grid; gap: 10px; margin: 16px 0 0; padding: 16px; border-radius: 16px; background: var(--petrol-hell); color: var(--petrol-tief); }
.hinweis-push p { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.hinweis-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hinweis-knoepfe .knopf-gross { min-height: 46px; }
.meldung.unten { margin: 0 var(--rand) 12px; }
.seite-heute .meldung.unten { order: 2; }

/* ── Archiv und Einstellungen ── */

.seite-archiv, .seite-einstellungen { display: flex; flex-direction: column; }
.seiten-titel { margin: 12px 0 16px; font-size: 28px; line-height: 1.2; letter-spacing: -.018em; }
.suche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.suche input { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--papier); color: var(--tinte); font: inherit; }
.suche input:focus, .feld select:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-hell); }
.suche .knopf-gross { padding-inline: 14px; }
.chips { display: flex; gap: 8px; margin: 14px -16px 0; padding: 2px 16px 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--tinte-2); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--petrol); box-shadow: none; color: #fff; }
.chip:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.feld select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--papier); color: var(--tinte); font: inherit; font-size: 16px; font-weight: 400; }
.art-filter { margin-top: 12px; }
.archiv-stand { margin: 14px 4px 0; font-size: 15px; color: var(--tinte-3); }
.zeile-meta { font-size: 14px; color: var(--tinte-3); overflow-wrap: anywhere; }
.status-chip { padding: 2px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--grau-hell); color: var(--tinte-2); }
.status-chip[data-status="offen"] { background: var(--petrol-hell); color: var(--petrol-tief); }
.zeile-ausschnitt { font-size: 14px; color: var(--tinte-2); overflow-wrap: anywhere; }
mark { background: var(--petrol-hell); color: var(--petrol-tief); border-radius: 3px; padding: 0 1px; }
.zeile-knopf { margin: -8px 12px 6px; }
.frage-box { display: grid; gap: 12px; margin-top: 32px; padding: 20px 18px; border-radius: 20px; background: var(--papier); box-shadow: var(--schatten); }
.frage-box h2 { margin: 0; font-size: 20px; }
.frage-box .feld-hinweis { margin: 0; }
.antworten { display: grid; gap: 12px; }
.antwort { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--linie-2); }
.antwort p { margin: 0; overflow-wrap: anywhere; }
.antwort-frage { font-size: 15px; font-weight: 600; color: var(--tinte-3); }
.antwort-quellen { font-size: 15px; color: var(--tinte-2); }
.antwort-quellen .link-leise { min-height: 32px; padding: 0 2px; }
.ordner-wahl { justify-self: stretch; margin-top: 14px; }
.block { display: grid; gap: 12px; margin-bottom: 20px; padding: 20px 18px; border-radius: 20px; background: var(--papier); box-shadow: var(--schatten); }
.block h2 { margin: 0; font-size: 20px; }
.block-text { margin: 0; color: var(--tinte-2); overflow-wrap: anywhere; }
.block .knopf-reihe { margin-top: 0; }

/* Frist bestätigen (Briefseite) */
.frist-pruefen { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--grau-hell); }
.frist-pruefen p { margin: 0 0 10px; color: var(--tinte-2); }
.frist-pruefen .knopf-reihe { margin: 0; }