:root {
  --bg: #14181f;
  --panel: #1c222b;
  --line: #2d3541;
  --fg: #e7ebf0;
  --muted: #94a0b0;
  --accent: #3ecf8e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: var(--fg); }

/* Startseite: Logo als Hintergrundbild */
/* Das Logo füllt die Höhe H. Der App-Screenshot (2560 × 2000) zeigt dasselbe Logo blass,
   ebenfalls in voller Höhe, mit 252,97 px = 0,126486 H Rand links und rechts.
   --logo-right hält rechts mindestens diesen Rand frei, damit der Screenshot ganz sichtbar ist. */
.home {
  --h: 100vh;
  --logo-right: max(4vw, calc(var(--h) * 0.126486));
  position: relative;
  min-height: var(--h);
  display: flex;
  flex-direction: column;
}
/* Logo als eingebettetes SVG: volle Höhe, rechts um --logo-right eingerückt.
   Eigene Ebene, damit es beim Preview abblenden und beim Laden Balken für Balken steigen kann. */
.logo {
  position: absolute;
  bottom: 0;
  right: var(--logo-right);
  height: 100%;
  width: auto;
  aspect-ratio: 76 / 74;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Einstieg wie ein Pegelmeter: Eine Abdeckung in Hintergrundfarbe gibt jeden Balken von unten frei.
   Der Farbverlauf bleibt fest stehen, Rot erscheint also erst, wenn der Pegel oben ankommt.
   Jeder Balken schießt hoch, fällt zurück, pumpt nach und rastet ein; von links nach rechts versetzt. */
.logo .cover {
  fill: var(--bg);
  transform-box: fill-box;
  transform-origin: top;
  transform: scaleY(0);
  animation: meter-in 1.9s cubic-bezier(0.3, 0, 0.3, 1) calc(0.5s + var(--i) * 0.11s) backwards;
}
@keyframes meter-in {
  0%   { transform: scaleY(1); }
  28%  { transform: scaleY(0); }
  46%  { transform: scaleY(0.42); }
  64%  { transform: scaleY(0.06); }
  80%  { transform: scaleY(0.2); }
  100% { transform: scaleY(0); }
}

/* Schriftzug fliegt von links herein. „backwards“: nach dem Einflug gelten wieder die Preview-Übergänge. */
.wordmark { animation: fly-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards; }
@keyframes fly-in {
  from { transform: translateX(-110vw); opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; filter: none; }
}
.wordmark {
  position: relative;
  z-index: 1;
  margin: auto 0;
  padding: 0 5vw;
  font-size: clamp(2.75rem, 7.5vw, 7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
}
/* Preview: Screenshot so skaliert und verschoben, dass sein Logo genau auf dem Hintergrundlogo liegt. */
.preview {
  position: fixed;
  bottom: 0;
  right: calc(var(--logo-right) - var(--h) * 0.126486);
  height: var(--h);
  width: auto;
  max-width: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(14px) brightness(1.6);
}

/* Überblendung in drei Akten. Die Zeiten im Grundzustand gelten fürs Schließen,
   die unter .show-preview fürs Öffnen.
   Öffnen:    Schriftzug zieht weg → Logo sinkt auf 10 % (wie in der App) → Screenshot schärft sich heraus.
   Schließen: Screenshot verglüht → Logo leuchtet wieder auf → Schriftzug kehrt zurück. */
.preview {
  transition:
    opacity 2s cubic-bezier(0.4, 0, 0.2, 1),
    filter 2s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 2s;
}
.show-preview .preview {
  opacity: 1;
  visibility: visible;
  filter: none;
  transition:
    opacity 3s cubic-bezier(0.4, 0, 0.2, 1) 1.2s,
    filter 3.5s cubic-bezier(0.2, 0, 0.1, 1) 1.2s,
    visibility 0s linear 1.2s;
}
.logo { transition: opacity 2.5s ease-in-out 1.2s; }
.show-preview .logo { opacity: 0.1; transition: opacity 3s ease-in-out 0.4s; }
.wordmark { transition: opacity 2s ease 2.6s, transform 2.5s cubic-bezier(0.2, 0, 0, 1) 2.6s, filter 2s ease 2.6s; }
.show-preview .wordmark {
  opacity: 0;
  transform: translateX(-3vw);
  filter: blur(6px);
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.6, 0, 0.8, 0.2), filter 1.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .preview, .show-preview .preview, .logo, .show-preview .logo, .wordmark, .show-preview .wordmark { transition: none; }
  .wordmark, .logo .cover { animation: none; }
  .preview { filter: none; }
  .show-preview .wordmark { transform: none; filter: none; }
}

.wordmark span {
  color: var(--accent);
  font-weight: 800;
}
.legal-links {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem calc(5vw - 0.75rem);
  font-size: 0.85rem;
}
.legal-links a, .legal-links button {
  font: inherit;
  cursor: pointer;
  color: var(--muted);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
}
.legal-links a:focus-visible, .legal-links button:focus-visible { color: var(--accent); border-color: var(--accent); }
/* Nur mit Maus: Auf Touchgeräten bliebe :hover nach dem Tippen hängen. */
@media (hover: hover) {
  .legal-links a:hover, .legal-links button:hover { color: var(--accent); border-color: var(--accent); }
}

/* Rechtstexte */
.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 16px 4rem;
}
.page h1 { font-size: 1.75rem; margin-top: 0; }
.page h2 { font-size: 1.15rem; margin-top: 2rem; }
.back { display: inline-block; margin-bottom: 2rem; color: var(--muted); }
.todo { background: #5a4a00; color: #fff3b0; padding: 0 0.25em; border-radius: 3px; }

@supports (height: 100dvh) {
  .home { --h: 100dvh; }
}