/* Startseite ohne Anmeldung (web/landing.html) im Design Entwurf D.
   Nur Variablen aus tokens.css. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--t-farbe-grund); color: var(--t-farbe-tinte); }
body { font-family: var(--t-schrift-text); -webkit-font-smoothing: antialiased; }
.st-schirm {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; justify-content: safe center; gap: var(--t-abstand-6);
  padding: calc(var(--t-mass-rand) + env(safe-area-inset-top)) var(--t-mass-rand) calc(var(--t-mass-rand) + env(safe-area-inset-bottom));
  text-align: center;
}
.st-gesicht { display: block; width: 320px; max-width: 86vw; height: auto; }
.st-led { fill: var(--t-farbe-tinte); }            /* Maske: hell = sichtbar */
.st-grund { fill: var(--t-farbe-flaeche-hoch); }   /* die dunklen Punkte des Displays */
.st-auge { fill: var(--t-farbe-akzent); animation: st-blinzeln 6s infinite; transform-origin: center 48px; transform-box: view-box; }
.st-strich { fill: var(--t-farbe-akzent); }
@keyframes st-blinzeln {
  0%, 95%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}
@media (prefers-reduced-motion: reduce) { .st-auge { animation: none; } }
.st-satz { margin: 0; font-size: var(--t-groesse-abschnitt); line-height: 1.4; font-weight: 500; color: var(--t-farbe-tinte-leise); }