/* Die Website von Visola in der Palette „Refreshing Summer Fun“ (decisions/0004), denselben
   Farben wie die App. Oben eine Fläche in Deep Space Blue, darauf Sky Blue und Amber Flame;
   darunter ruhiges Weiss, im Dunkeln ein Grund aus Deep Space Blue. Systemschrift, keine
   Schrift und kein Skript von fremden Servern. Die Klassen heissen wie in Honeyday.

   Abgeleitete Töne sind mit einer Farbe der Palette gemischt und gemessen (02.10.2026):
   --link #187D99 (Blue Green Deep) 4,7:1 auf Weiss, --muted #4E6E7E 5,0:1 auf der Karte,
   im Dunkeln --muted #8DA2AC 6,4:1 auf der Karte. */
:root {
  --sky: #8ecae6;            /* Sky Blue (Light) */
  --blue-green: #219ebc;     /* Blue Green */
  --deep-space: #023047;     /* Deep Space Blue */
  --amber: #ffb703;          /* Amber Flame */
  --tiger: #fb8500;          /* Tiger Orange */

  --bg: #ffffff;
  --surface: #eef7fb;        /* Sky Blue, 85 % Weiss */
  --text: var(--deep-space);
  --muted: #4e6e7e;
  --line: #d8e9f1;
  --link: #187d99;           /* Blue Green Deep */
  --hero-bg: var(--deep-space);
  --hero-text: #ffffff;
  --hero-muted: #c0cbd1;
  --hero-accent: var(--sky);
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #01131c;           /* Deep Space Blue, 60 % Schwarz */
    --surface: #011f2e;      /* Deep Space Blue, 35 % Schwarz */
    --text: #f2f7fa;
    --muted: #8da2ac;
    --line: #0d3346;
    --link: var(--sky);
    --hero-bg: var(--deep-space);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--link); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Kopf */
.topbar { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; color: var(--text); text-decoration: none; }
.hero { padding-bottom: 56px; background: var(--hero-bg); color: var(--hero-text); }
.hero a { color: var(--hero-accent); }
.hero .brand { color: var(--hero-text); }
.hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin: 56px 0 18px; max-width: 18ch; }
.h1-lead { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--hero-accent); margin-bottom: 14px; }
.tagline { font-size: 21px; color: var(--hero-muted); max-width: 40ch; margin: 0 0 26px; }
.soon { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--amber); color: var(--deep-space); font-weight: 600; }
.req { color: var(--hero-muted); font-size: 15px; margin-top: 16px; }
.hero-slim h1, .legal-h1 { margin-top: 40px; }

/* Abschnitte */
.band { padding: 56px 0; border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 22px; }
.kicker { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--link); margin-bottom: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 22px; }
.card b { display: block; font-size: 18px; margin-bottom: 6px; color: var(--text); }
.card p { margin: 0; color: var(--muted); }
.later { color: var(--muted); margin-top: 22px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { color: var(--muted); margin: 10px 0 0; }

/* Rechtsseiten */
.legal { padding: 8px 0 48px; }
.legal h2 { font-size: 22px; margin: 36px 0 10px; }
.legal p, .legal li { max-width: 68ch; }
.legal-date { color: var(--muted); font-size: 15px; margin-top: 36px; }
.legal-note { color: var(--muted); font-size: 15px; }

/* Fuss */
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 15px; }
footer p { margin: 0 0 6px; }
.footer-note { font-size: 14px; }

/* Sprachwahl, wie in Honeyday ein Popover */
.langswitch { position: relative; }
.langswitch button {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--hero-text); background: rgba(255, 255, 255, .12); border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.langswitch ul[popover] {
  margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text); position-area: bottom span-left; inset: auto; margin-top: 6px;
}
.langswitch li a, .langswitch li span { display: block; padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--text); }
.langswitch li span[aria-current] { font-weight: 600; }
.langswitch li a:hover { background: var(--surface); }

/* 404 */
.notfound { max-width: 560px; margin: 12vh auto; padding: 0 20px; text-align: center; }
.nf-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); text-decoration: none; }
.nf-code { font-size: 72px; font-weight: 700; margin: 24px 0 8px; color: var(--blue-green); }
.nf-langs { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}