/* Briefkasten, Handy-Seite. Schwarz auf Weiß, Hairlines, große Serifenschrift. Immer hell. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/schrift/cormorant-garamond-500.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/schrift/public-sans.woff2) format('woff2'); }

:root {
  --fg: #000; --bg: #fff; --muted: #666; --soft: #b3b3b3; --hairline: rgba(0,0,0,.4);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Public Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh;
}
.blatt { flex: 1; display: flex; flex-direction: column; padding: max(20px, env(safe-area-inset-top)) 22px 12px; }
.k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.frage { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 6.5vw, 34px); line-height: 1.12; margin: 8px 0 0; }
.frage[hidden] { display: none; }

/* Zeichen */
.zeichen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.zeichen[hidden] { display: none; }
.z { appearance: none; background: none; border: 0; border-bottom: .5px solid var(--hairline); border-radius: 0; padding: 14px 0 12px; display: flex; justify-content: center; color: var(--fg); -webkit-tap-highlight-color: transparent; }
.z svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.z.an { border-bottom-color: var(--fg); border-bottom-width: 2px; }
.z.an svg { fill: currentColor; }

/* Feld */
.feldwrap { margin-top: 24px; flex: 1; display: flex; flex-direction: column; }
.feldwrap[hidden] { display: none; }
.feld {
  appearance: none; width: 100%; border: 0; border-radius: 0; padding: 0; margin: 0; resize: none; outline: none;
  background: transparent; color: var(--fg); font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 8vw, 40px); line-height: 1.15;
  min-height: 1.2em; overflow: hidden;
}
.feld::placeholder { color: var(--soft); opacity: 1; }
.zeile { display: flex; justify-content: space-between; border-top: .5px solid var(--hairline); padding: 8px 0 0; margin-top: 10px; }

/* eigene Antworten */
.eigene { list-style: none; margin: 28px 0 0; padding: 0; }
.eigene[hidden] { display: none; }
.eigene li { border-top: .5px solid var(--hairline); padding: 14px 0 12px; }
.eigene li.eigene-ue { border-top: 0; padding: 0 0 8px; }
.eigene li:last-child { border-bottom: .5px solid var(--hairline); }
.eigene:not([hidden]) ~ .meldung { border-top: 0; padding-top: 0; }
.eigene-z { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.eigene-text { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 7.4vw, 36px); line-height: 1.15; white-space: pre-wrap; overflow-wrap: anywhere; }
.akt { display: flex; gap: 20px; margin-top: 12px; }
.lnk { appearance: none; background: none; border: 0; border-bottom: .5px solid var(--fg); border-radius: 0; padding: 0 0 1px; font: inherit; font-size: 14px; color: var(--fg); -webkit-tap-highlight-color: transparent; }
body.zu .akt { display: none; }

/* Meldung */
.meldung { font-size: 14px; color: var(--muted); margin: 18px 0 0; border-top: .5px solid var(--hairline); padding-top: 12px; }
.meldung[hidden] { display: none; }
body.zu .meldung { color: var(--fg); }

/* Balken */
.balken {
  appearance: none; border: 0; border-radius: 0; width: 100%; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); margin: 0;
  background: var(--fg); color: var(--bg); font: inherit; font-size: 17px; font-weight: 500; letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent; position: sticky; bottom: 0;
}
.balken[hidden] { display: none; }
.balken.leer { background: #e6e6e6; color: #999; }
.balken.wartet { opacity: .6; }
.fuss { font-size: 11px; letter-spacing: .08em; color: var(--soft); text-align: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.balken:not([hidden]) + .fuss { display: none; }

/* Startseite */
.codeform { margin-top: 28px; }
.codefeld {
  appearance: none; width: 100%; border: 0; border-bottom: .5px solid var(--hairline); border-radius: 0; padding: 6px 0 10px; outline: none; background: transparent;
  font-family: var(--serif); font-weight: 500; font-size: 56px; letter-spacing: .3em; line-height: 1; color: var(--fg);
}
.codefeld::placeholder { color: var(--soft); opacity: 1; }
.codefeld:focus { border-bottom-color: var(--fg); }
.codefeld.zittert { animation: zittern .35s; }
@keyframes zittern { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hinweis { font-size: 14px; color: var(--muted); margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) { .codefeld.zittert { animation: none; } }