/* Vio Web-App — eine Seite, Vollbild, schwarz. Große Schrift für zwei Meter Abstand. */
:root {
  --text: #f0f0f0;
  --gedaempft: #8c8c8c;
  --linie: #2a2a2a;
  --akzent: #9fd6ff;
  --offen: #9fd6ff; --laeuft: #ffd27f; --wartet: #ffb86b; --erledigt: #8fe3a5; --gescheitert: #ff8a8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); font: 22px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }

#wesen { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
#tippen { position: fixed; inset: 0; z-index: 30; background: transparent; }

/* Anmeldung */
#anmeldung { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: #000; }
#anmeldung h1 { font-size: 48px; font-weight: 400; letter-spacing: 0.06em; margin: 0; }
#anmeldung p { margin: 0; color: var(--gedaempft); font-size: 20px; max-width: 520px; }
#anmeldung button { font: inherit; font-size: 22px; padding: 14px 28px; border-radius: 10px; border: 1px solid var(--text); background: var(--text); color: #000; cursor: pointer; }
#anmeldung .meldung { min-height: 1.4em; color: var(--akzent); }

/* Ansichten */
#ansicht { position: fixed; inset: 0; z-index: 20; padding: 5vh 6vw; overflow: hidden; background: rgba(0,0,0,0.82); opacity: 0; transition: opacity 0.6s ease; }
#ansicht.sichtbar { opacity: 1; }
#ansicht h2 { font-size: 34px; font-weight: 500; margin: 0 0 22px; letter-spacing: 0.01em; }
#ansicht ul { list-style: none; margin: 0; padding: 0; }
#ansicht li { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 24px; }
#ansicht li .punkt { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--gedaempft); align-self: center; }
#ansicht li .text { flex: 1; }
#ansicht li .neben { color: var(--gedaempft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.punkt.offen { background: var(--offen); } .punkt.laeuft { background: var(--laeuft); } .punkt.wartet { background: var(--wartet); }
.punkt.erledigt { background: var(--erledigt); } .punkt.gescheitert { background: var(--gescheitert); }

#ansicht .absatz { font-size: 24px; margin: 0 0 16px; max-width: 70ch; white-space: pre-wrap; }
#ansicht .quelle, #ansicht .hinweis { color: var(--gedaempft); font-size: 18px; margin-top: 18px; }

#ansicht table { border-collapse: collapse; width: 100%; font-size: 24px; }
#ansicht th, #ansicht td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
#ansicht th { color: var(--gedaempft); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: 0.08em; }
#ansicht td.hervor, #ansicht th.hervor { background: rgba(159,214,255,0.10); }
#ansicht td.wert { font-variant-numeric: tabular-nums; }

#ansicht .beleg { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: baseline; max-width: 900px; }
#ansicht .beleg .absender { font-size: 30px; grid-column: 1 / -1; }
#ansicht .beleg .betrag { font-size: 40px; font-variant-numeric: tabular-nums; }
#ansicht .beleg .klein { color: var(--gedaempft); font-size: 18px; }
#ansicht .beleg .positionen { grid-column: 1 / -1; margin-top: 12px; }

#ansicht .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 24px; }
#ansicht .kachel { border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; }
#ansicht .kachel .wert { font-size: 44px; font-variant-numeric: tabular-nums; line-height: 1.1; }
#ansicht .kachel .bezeichnung { color: var(--gedaempft); font-size: 18px; margin-top: 4px; }
#ansicht .kachel .hinweis { margin-top: 6px; font-size: 16px; }

#verbindung { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 35; text-align: center; color: var(--gedaempft); font-size: 16px; margin: 0; }

@media (max-width: 700px) {
  html, body { font-size: 18px; }
  #ansicht h2 { font-size: 26px; } #ansicht li { font-size: 20px; } #ansicht .absatz { font-size: 20px; }
}