/* Postamt — ruhiges Papier, dunkle Tinte, ein Hauch Gold (Imperium). Handy zuerst. */
:root {
  --papier: #f6f3ec;
  --flaeche: #fffdf8;
  --flaeche-2: #efeadf;
  --linie: #e2dccf;
  --tinte: #1c1a16;
  --tinte-2: #5f594d;
  --tinte-3: #8d8676;
  --gold: #a86b00;
  --gold-hell: #fbbf24;
  --gold-flaeche: #fdf3d7;
  --rot: #b42318;
  --gruen: #1f7a4d;
  --schatten: 0 1px 2px rgba(28, 26, 22, .06), 0 8px 24px rgba(28, 26, 22, .08);
  --radius: 14px;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #15130f;
    --flaeche: #1d1b16;
    --flaeche-2: #26231d;
    --linie: #332f27;
    --tinte: #f1ece1;
    --tinte-2: #b8b09f;
    --tinte-3: #857d6d;
    --gold: #f5b82e;
    --gold-flaeche: #3a2d10;
    --rot: #f97066;
    --gruen: #4ade80;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--papier); color: var(--tinte);
  font: 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--gold); }
.marke { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
.start-laden { height: 100dvh; display: grid; place-items: center; font-size: 28px; color: var(--tinte-3); }

/* ── Grundgeruest ── */
.rahmen { height: 100dvh; display: grid; grid-template-columns: 1fr; }
.spalte { min-width: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--papier); }
.spalte.seite, .spalte.detail { display: none; }
.rahmen[data-ansicht="start"] .spalte.seite { display: flex; }
.rahmen[data-ansicht="start"] .spalte.liste { display: none; }
.rahmen[data-ansicht="detail"] .spalte.liste { display: none; }
.rahmen[data-ansicht="detail"] .spalte.detail { display: flex; }
@media (min-width: 900px) {
  .rahmen { grid-template-columns: 290px minmax(320px, 400px) 1fr; }
  .spalte.seite, .spalte.liste, .spalte.detail,
  .rahmen[data-ansicht] .spalte.seite, .rahmen[data-ansicht] .spalte.liste, .rahmen[data-ansicht] .spalte.detail { display: flex; }
  .spalte.seite { border-right: 1px solid var(--linie); background: var(--flaeche-2); }
  .spalte.liste { border-right: 1px solid var(--linie); }
  .nur-handy { display: none !important; }
}
@media (max-width: 899px) { .nur-gross { display: none !important; } }

.kopf {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px;
  padding: calc(var(--oben) + 8px) 12px 8px; min-height: 56px;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
}
.kopf.linie { border-bottom-color: var(--linie); }
.kopf h1 { flex: 1; min-width: 0; margin: 0; font: 600 20px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf h1 small { display: block; font: 12px/1.3 var(--sans); color: var(--tinte-3); }
.knopf-icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px;
  background: transparent; color: var(--tinte-2); cursor: pointer;
}
.knopf-icon:hover { background: var(--flaeche-2); }
.knopf-icon:active { transform: scale(.96); }
.knopf-icon svg { width: 22px; height: 22px; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--unten) + 96px); }

/* ── Seitenleiste / Startseite ── */
.gruppe { padding: 6px 12px 14px; }
.gruppe h2 { margin: 14px 8px 6px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.eintrag {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px;
  border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; color: var(--tinte);
  text-decoration: none;
}
.eintrag:hover { background: var(--flaeche); }
.eintrag.aktiv { background: var(--gold-flaeche); }
.eintrag .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag .zahl { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--tinte-3); }
.eintrag .zahl.neu { color: var(--gold); font-weight: 600; }
.eintrag svg { width: 20px; height: 20px; color: var(--tinte-3); flex: none; }
.domain-block { margin: 4px 0; }
.domain-block > .eintrag .name { font-weight: 600; }
.unterordner { padding-left: 32px; }
.unterordner .eintrag { min-height: 44px; font-size: 15px; }

/* ── Liste ── */
.suche { padding: 0 12px 8px; }
.suche input {
  width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8676' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 18px;
  font-size: 16px; outline: none;
}
.suche input:focus { border-color: var(--gold); }
.mail {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 12px 16px 12px 8px; border-bottom: 1px solid var(--linie); cursor: pointer; color: inherit; text-decoration: none;
  background: var(--papier);
}
.mail:hover { background: var(--flaeche); }
.mail.aktiv { background: var(--gold-flaeche); }
.mail .punkt { grid-row: 1; width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.mail.ungelesen .punkt { background: var(--gold); }
.mail .wer { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.mail.ungelesen .wer { font-weight: 650; }
.mail .wann { grid-column: 3; font-size: 13px; color: var(--tinte-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail .betreff { grid-column: 2 / 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.mail.ungelesen .betreff { font-weight: 600; }
.mail .vorschau {
  grid-column: 2 / 4; font-size: 14px; color: var(--tinte-2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mail .etikett { font-size: 11px; color: var(--tinte-3); letter-spacing: .02em; }
.mail .clip { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; margin-right: 3px; color: var(--tinte-3); }
.leer { padding: 48px 24px; text-align: center; color: var(--tinte-3); }
.leer .marke { display: block; font-size: 22px; color: var(--tinte-2); margin-bottom: 6px; }
.mehr-laden { display: block; margin: 16px auto; }

/* ── Detail ── */
.detail-kopf { padding: 8px 20px 14px; border-bottom: 1px solid var(--linie); }
.detail-kopf h2 { margin: 4px 0 12px; font: 600 22px/1.25 var(--serif); overflow-wrap: anywhere; }
.absender { display: flex; gap: 12px; align-items: center; }
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--flaeche-2); color: var(--tinte-2); font-weight: 600; font-size: 15px;
}
.absender .zeilen { min-width: 0; flex: 1; }
.absender .n { font-weight: 600; overflow-wrap: anywhere; }
.absender .a, .absender .an { font-size: 13px; color: var(--tinte-3); overflow-wrap: anywhere; }
.pruefung { display: inline-flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.marker { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--flaeche-2); color: var(--tinte-2); }
.marker.warn { background: color-mix(in srgb, var(--rot) 14%, transparent); color: var(--rot); }
.inhalt { padding: 16px 20px 24px; }
.inhalt .text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }
.inhalt .text .zitat { color: var(--tinte-3); }
.mailrahmen { width: 100%; border: 0; min-height: 120px; background: #fff; border-radius: 10px; }
.bilder-hinweis {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; font-size: 14px;
  border-radius: 10px; background: var(--flaeche-2); color: var(--tinte-2);
}
.bilder-hinweis button { margin-left: auto; }
.anhaenge { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; }
.anhang {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--tinte); text-decoration: none; font-size: 14px;
}
.anhang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.anhang small { color: var(--tinte-3); }
.faden { padding: 0 20px 24px; }
.faden h3 { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); margin: 8px 0; }
.faden a { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linie); color: var(--tinte-2); text-decoration: none; font-size: 14px; }
.faden a.hier { color: var(--tinte); font-weight: 600; }
.faden a span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aktionen {
  position: sticky; bottom: 0; display: flex; justify-content: space-around; gap: 4px;
  padding: 6px 8px calc(var(--unten) + 6px); border-top: 1px solid var(--linie);
  background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.aktionen .knopf-icon { width: 52px; }
.detail-leer { flex: 1; display: grid; place-items: center; color: var(--tinte-3); }

/* ── Knoepfe, Felder ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--tinte); cursor: pointer; font-weight: 550;
}
.knopf:hover { border-color: var(--tinte-3); }
.knopf.haupt { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.knopf.gold { background: var(--gold-hell); color: #1c1a16; border-color: var(--gold-hell); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.klein { min-height: 34px; padding: 0 12px; font-size: 14px; }
.schreiben-fab {
  position: fixed; right: 18px; bottom: calc(var(--unten) + 18px); z-index: 20; width: 58px; height: 58px; border-radius: 18px;
  border: 0; background: var(--gold-hell); color: #1c1a16; box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer;
}
.schreiben-fab svg { width: 26px; height: 26px; }
/* In der Einzelansicht am Handy liegt die Aktionsleiste unten — dort kein schwebender Knopf. */
.rahmen[data-ansicht="detail"] + .schreiben-fab { display: none; }
@media (min-width: 900px) { .schreiben-fab { position: static; width: auto; height: 44px; border-radius: 12px; box-shadow: none; padding: 0 16px; display: inline-flex; gap: 8px; font-weight: 600; margin: 12px 12px 0; } }

/* ── Schreiben ── */
.blatt { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--papier); }
@media (min-width: 900px) {
  .blatt { inset: auto 24px 0 auto; width: 640px; height: min(760px, 92dvh); border: 1px solid var(--linie); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--schatten); }
}
.feld { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--linie); }
.feld label { width: 56px; flex: none; font-size: 15px; color: var(--tinte-3); }
.feld input, .feld select { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; outline: none; font-size: 16px; }
.feld .knopf-icon { width: 36px; height: 36px; }
.textfeld { flex: 1; width: 100%; min-height: 200px; padding: 14px 16px; border: 0; resize: none; outline: none; background: transparent; font-size: 16px; line-height: 1.5; }
.anhang-leiste { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--linie); align-items: center; }
.anhang-leiste .anhang button { border: 0; background: none; color: var(--tinte-3); cursor: pointer; padding: 0 0 0 4px; font-size: 18px; line-height: 1; }
.groesse { font-size: 13px; color: var(--tinte-3); }
.groesse.zuviel { color: var(--rot); font-weight: 600; }

/* ── Anmeldung ── */
.anmelden { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.karte { width: min(420px, 100%); padding: 32px 26px; border-radius: 20px; background: var(--flaeche); box-shadow: var(--schatten); text-align: center; }
.karte .marke { font-size: 34px; display: block; margin-bottom: 4px; }
.karte p { color: var(--tinte-2); margin: 6px 0 22px; }
.karte .knopf { width: 100%; }
.karte input { width: 100%; height: 46px; margin-bottom: 12px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--papier); font-size: 16px; }
.fehlertext { color: var(--rot); font-size: 14px; margin-top: 12px; }

/* ── Einstellungen ── */
.liste-karte { margin: 8px 16px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
.liste-karte .zeile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--linie); }
.liste-karte .zeile:last-child { border-bottom: 0; }
.liste-karte .zeile .l { flex: 1; min-width: 0; }
.liste-karte .zeile small { display: block; color: var(--tinte-3); font-size: 13px; }
.link-box { margin: 8px 16px; padding: 12px; border-radius: 12px; background: var(--gold-flaeche); font-size: 14px; overflow-wrap: anywhere; }

#meldung {
  position: fixed; left: 50%; bottom: calc(var(--unten) + 90px); transform: translateX(-50%); z-index: 99;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--tinte); color: var(--papier);
  box-shadow: var(--schatten); font-size: 15px;
}
.laedt { opacity: .55; pointer-events: none; }