/* =============================================================
   Scariv — Stylesheet
   Dunkles, "spacey" Theme · Mobile-First · barrierearm
   Aufbau:
     1. Design-Tokens (CSS Custom Properties)
     2. Reset & Basistypografie
     3. Hintergrund / Sternenfeld
     4. Layout-Hilfen & Header/Navigation
     5. Hero & animierter Planet (Coming-Soon-Seite)
     6. Komponenten (Buttons, Formular, Badges)
     7. Rechtstexte (Impressum / Datenschutz)
     8. Footer
     9. Responsive Anpassungen
    10. Barrierefreiheit & Reduced-Motion
   ============================================================= */

/* ----------------------------------------------------------------
   1. Design-Tokens
   ---------------------------------------------------------------- */
:root {
  /* Farbwelt: tiefes Schwarz/Dunkelblau + kühler Cyan-Akzent
     und warmes Bernstein als zweiter Akzent (Sternenlicht). */
  --bg-deep:   #04060d;   /* tiefster Hintergrund */
  --bg:        #070b16;   /* Grundfläche */
  --bg-elev:   #0d1326;   /* leicht erhöhte Flächen (Cards, Inputs) */
  --line:      rgba(150, 170, 220, 0.14);  /* dezente Trennlinien */

  --ink:       #eef2ff;   /* Primärtext, hoher Kontrast */
  --ink-soft:  #b6c0e0;   /* Sekundärtext */
  --ink-mute:  #7d88ad;   /* gedämpfter Text / Captions */

  --accent:    #46e6d3;   /* kühles Cyan – Hauptakzent */
  --accent-deep: #18b9a8; /* dunklere Cyan-Variante */
  --amber:     #ffc785;   /* warmes Bernstein – Limblicht des Planeten */

  /* Typografie */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Maße & Rhythmus */
  --maxw: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --radius: 14px;
  --radius-sm: 10px;

  /* Übergänge */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
}

/* ----------------------------------------------------------------
   2. Reset & Basistypografie
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink-soft);
  background-color: var(--bg-deep);
  /* Tiefenwirkung: zwei weiche Farbschwaden über dem Grundton */
  background-image:
    radial-gradient(120% 80% at 80% -10%, rgba(70, 230, 211, 0.10), transparent 60%),
    radial-gradient(90% 70% at 10% 110%, rgba(120, 110, 255, 0.10), transparent 55%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: #8af4e8; }

img, svg { display: block; max-width: 100%; }

ul { padding-left: 1.2em; }

strong { color: var(--ink); }

/* Sichtbarer, deutlicher Fokus-Indikator für Tastaturnutzung */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* "Zum Inhalt springen" – nur sichtbar bei Tastaturfokus */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #03110f;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top var(--t-med) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------
   3. Hintergrund / Sternenfeld
   Das <canvas> liegt fix hinter allem und wird per JS gezeichnet.
   Fällt JS aus, bleibt der dunkle Verlaufshintergrund (siehe body).
   ---------------------------------------------------------------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;   /* fängt keine Klicks ab */
  display: block;
}

/* ----------------------------------------------------------------
   4. Layout-Hilfen & Header/Navigation
   ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: relative;
  z-index: 5;
  padding-block: 1.4rem;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Wortmarke "Scariv" – einziger nach außen sichtbarer Name */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__mark {
  width: auto;            /* "i"-Emblem: Höhe fix, Breite nach Seitenverhältnis */
  height: 1.65rem;
  flex: none;
}
.brand__word { line-height: 1; }
/* Header-Wortmarke: kompletter "Scariv"-Schriftzug oben links */
.brand__logo {
  --logo-w: clamp(124px, 40vw, 190px);
  display: block;
  width: var(--logo-w);
  height: auto;                 /* Höhe folgt der Breite → kein Verzerren */
  /* gleicht den transparenten Linksrand der Wortmark-PNG aus, damit das „S"
     exakt auf der linken Inhaltskante (Kicker/Titel) sitzt */
  margin-left: calc(var(--logo-w) * -0.045);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.nav a {
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.25rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ----------------------------------------------------------------
   5. Hero & animierter Planet (Coming-Soon-Seite)
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  flex: 1;              /* füllt den Platz zwischen Seitenanfang und Footer */
  min-height: 0;        /* darf schrumpfen → Footer bleibt im Viewport */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.1rem, 3vw, 1.9rem);
  padding-block: clamp(1rem, 3vh, 2.5rem);
}

/* Wortmarke "Scariv" (Bild-Logo) – zentriert in der Mitte des Planeten,
   mit dunkler Vignette dahinter für sicheren Kontrast. */
.brand-title {
  position: relative;
  z-index: 3;                 /* liegt über Planet & Schiffen */
  margin: 0;
  line-height: 0;             /* keine zusätzliche Texthöhe um das Bild */
  animation: float 6s ease-in-out infinite;
}
.brand-logo {
  display: block;
  /* an den Planetendurchmesser gekoppelt, aber bewusst deutlich größer als der
     Planet (auf schmalen Screens auf 92vw begrenzt, damit nichts überläuft). */
  width: min(calc(var(--psize) * 1.5), 92vw);
  height: auto;
  filter: drop-shadow(0 2px 14px rgba(0, 6, 20, 0.55));
}
/* dezente dunkle Vignette hinter dem Schriftzug für sicheren Kontrast */
.brand-title::before {
  content: "";
  position: absolute;
  inset: -150% -10%;
  z-index: -1;
  background: radial-gradient(62% 60% at 50% 50%, rgba(2, 8, 22, 0.55), transparent 72%);
  border-radius: 50%;
  pointer-events: none;
}

/* Akzent-Wort mit Cyan/Bernstein-Verlauf (im Claim) */
.glow {
  background: linear-gradient(120deg, var(--accent), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Claim unter dem Planeten */
.hero__claim {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch;
}

.hero__lead {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 34rem;
}

/* E-Mail-Anmeldung ("Benachrichtige mich") – reiner UI-Platzhalter */
.notify {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 30rem;
}
.notify__field {
  flex: 1 1 14rem;
  display: flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.2rem 0.2rem 0.2rem 1rem;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.notify__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(70, 230, 211, 0.18);
}
.notify input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding-block: 0.7rem;
}
.notify input::placeholder { color: var(--ink-mute); }
.notify input:focus { outline: none; }

.notify__msg {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--accent);
  min-height: 1.2em;
}

/* ----- Buttons ----- */
.btn {
  --btn-bg: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: #03110f;
  background: var(--btn-bg);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease);
  box-shadow: 0 8px 30px rgba(70, 230, 211, 0.22);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }

/* Planet-Bühne: enthält Glow, Sterne-Nahschicht und den Planeten */
.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 50vw, 520px);
}

/* Gruppe aus Wortmarke + Planet – sie erhält den Parallax/Tilt-Transform,
   damit "Scariv" sich gemeinsam mit dem Planeten bewegt.
   Grid-Stapelung: Titel und Planet liegen in derselben Zelle übereinander,
   sodass "Scariv" zentriert in der Mitte des Planeten sitzt. */
.planet-group {
  /* Planetendurchmesser – hier definiert, damit ihn sowohl der Planet als
     auch die Wortmarke (Geschwister-Elemente) als gemeinsame Größenbasis nutzen. */
  --psize: clamp(200px, min(42vw, 52vh), 420px);
  display: grid;
  place-items: center;
  will-change: transform;   /* eigener GPU-Layer für die Tilt-Bewegung */
}
.planet-group > * { grid-area: 1 / 1; }

/* Der "Tilt"-Wrapper wird per JS leicht gegenläufig zur Maus bewegt.
   --psize ist der Planetendurchmesser und dient zugleich als Basis
   für die Radien der umkreisenden Raumschiffe. */
.planet-tilt {
  position: relative;
  width: var(--psize);
  aspect-ratio: 1;
  /* Der Tilt-Transform sitzt jetzt auf .planet-group (Titel + Planet). */
}

/* Atmosphären-Glow hinter dem Planeten */
.planet-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(70, 230, 211, 0.35),
              rgba(70, 230, 211, 0.08) 45%,
              transparent 70%);
  filter: blur(6px);
  will-change: transform, opacity;   /* eigener GPU-Layer → scale/opacity günstig */
  animation: breathe 7s ease-in-out infinite;
}

/* Realistischer Wasserplanet in vier Schichten:
   .planet          = Clip-Kreis + Atmosphären-Glühen (Fallback-Ozean)
   .planet__surface = prozedurale Land/Ozean-Textur (JS), scrollt horizontal
   .planet__clouds  = prozedurale Wolken-Textur (JS), scrollt etwas schneller
   .planet__shade   = fixe Kugel-Beleuchtung: Terminator + Sonnenglanz + Atmosphäre
   Das horizontale Scrollen der Texturen = Rotation um die eigene Achse;
   die Beleuchtung bleibt fix → wirkt wie ein echter, sonnenbeschienener Planet.
   Nur transform wird animiert (GPU-kompositiert → performant). */
.planet {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(130% 130% at 30% 78%,
       #02141a 6%, #073945 40%, #0a5563 70%, #021016 100%);   /* Teal-Grundkugel */
  box-shadow:
    0 0 60px rgba(70, 230, 211, 0.28),            /* äußeres Cyan-Atmosphären-Glühen */
    inset 0 0 26px rgba(70, 230, 211, 0.14);      /* innerer Saum */
}
/* Globus-Wrapper: kippt die rotierende Achse um ~23,5° (wie die Erde).
   Enthält NUR die scrollenden Texturen – die Beleuchtung (.planet__shade)
   liegt außerhalb und bleibt gerade (fixe Sonne). */
.planet__globe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-23deg);
}
.planet__surface,
.planet__clouds {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;                 /* zwei nahtlose Kacheln à 2× Planetenbreite */
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
}
/* leichter Blur glättet das Teal-Mottling; einmalig in den Layer gerastert */
.planet__surface { filter: blur(1.4px); animation: planet-spin 26s linear infinite; }
.planet__clouds  { filter: blur(2.5px); opacity: 0.7; animation: planet-spin 20s linear infinite; }
.planet__shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    /* warmes Bernstein-Limblicht oben rechts (wie am Anfang) */
    radial-gradient(120% 120% at 72% 22%, rgba(255, 199, 133, 0.50), transparent 42%),
    /* feines Glanzlicht */
    radial-gradient(40% 40% at 76% 18%, rgba(255, 255, 255, 0.20), transparent 60%),
    /* leichter Terminator zur Schattenseite unten links */
    radial-gradient(130% 130% at 32% 80%, rgba(0, 4, 10, 0.55) 0%, transparent 55%);
  box-shadow:
    inset -18px -22px 60px rgba(0, 0, 0, 0.70),     /* Schatten unten links */
    inset 22px 18px 50px rgba(70, 230, 211, 0.12);  /* kühles Innenlicht */
}


/* ---- Kleine Raumschiffe, die den Planeten umfliegen ----
   Jede .ship-orbit füllt den Planetenbereich (inset:0) und rotiert um
   dessen Mitte. Das Schiff darin sitzt zentriert und wird per translateY
   (= Bahnradius, abgeleitet von --psize) nach außen geschoben. */
.ship-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform;   /* Orbit-Rotation läuft auf der GPU */
}
.ship-orbit--1 { animation: orbit 11s linear infinite; }
.ship-orbit--2 { animation: orbit 17s linear infinite reverse; animation-delay: -6s; }

.ship {
  display: block;
  width: 20px;
  /* kein CSS-drop-shadow (würde bei jeder Bewegung neu gerastert);
     der Triebwerks-Schein steckt direkt in der SVG. */
}
.ship svg { display: block; width: 100%; height: auto; }

/* translateY schiebt das Schiff auf seine Bahn; rotate richtet die Nase
   tangential zur Flugrichtung aus (Schiff 2 fliegt rückwärts → -90deg). */
.ship-orbit--1 .ship { transform: translateY(calc(var(--psize) * -0.56)) rotate(90deg); }
.ship-orbit--2 .ship { transform: translateY(calc(var(--psize) * -0.62)) rotate(-90deg); width: 18px; }


/* ----------------------------------------------------------------
   6. Komponenten – Sektionen unter dem Hero (optional dekorativ)
   ---------------------------------------------------------------- */
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--ink-mute);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

/* ----------------------------------------------------------------
   7. Rechtstexte (Impressum / Datenschutz)
   ---------------------------------------------------------------- */
.legal {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}
.legal__head { max-width: 48rem; margin-bottom: 2.5rem; }
.legal__head h1 {
  font-size: clamp(1.5rem, 7vw, 3rem);
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}
.legal__kicker {
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.prose {
  max-width: 48rem;
}
.prose section { margin-bottom: 2.4rem; }
.prose h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: 0.7rem;
  padding-top: 0.4rem;
}
.prose h3 {
  font-size: 1.08rem;
  margin: 1.2rem 0 0.4rem;
  color: var(--ink);
}
.prose p + p { margin-top: 0.8rem; }
.prose ul { margin-top: 0.6rem; }
.prose li { margin-bottom: 0.3rem; }

/* Platzhalter, die der Betreiber später ausfüllt – visuell markiert */
.placeholder {
  font-family: var(--font-display);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--amber);
  background: rgba(255, 199, 133, 0.10);
  border: 1px dashed rgba(255, 199, 133, 0.4);
  border-radius: 6px;
  padding: 0.05em 0.45em;
  white-space: nowrap;
}

/* Hinweis-Box (z. B. "anwaltlich prüfen lassen") */
.notice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.notice svg { flex: none; margin-top: 2px; color: var(--amber); }

/* ----------------------------------------------------------------
   8. Footer (auf allen Seiten identisch)
   ---------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: rgba(4, 6, 13, 0.82);   /* ohne backdrop-filter (teuer) */
}
.site-footer .wrap {
  display: flex;
  flex-wrap: nowrap;             /* immer eine Zeile */
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;         /* super schlank */
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.footer-brand svg { width: 1.4rem; height: 1.4rem; }
.footer-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.7rem, 2.5vw, 1.2rem);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2.6vw, 0.85rem);
  white-space: nowrap;
}
.footer-nav a { color: var(--ink-soft); }
.footer-nav a:hover { color: var(--ink); }
.footer-copy {
  color: var(--ink-mute);
  font-size: clamp(0.66rem, 2.4vw, 0.8rem);
  white-space: nowrap;
}
/* auf schmalen Handys den langen Zusatz weglassen, damit Copyright + Links
   bequem in eine schlanke Zeile passen */
@media (max-width: 440px) {
  .footer-rights { display: none; }
}

/* Seiten-Grundgerüst: Footer immer am unteren Rand */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* main füllt die Höhe und ist selbst Flex-Container, damit der Hero
   den Restplatz einnimmt und der Footer im Viewport bleibt. */
.page > main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------
   9. Responsive Anpassungen (Mobile-First → größere Viewports)
   ---------------------------------------------------------------- */
@media (max-width: 759px) {
  .nav { font-size: 0.9rem; gap: 1rem; }
}

@media (max-width: 420px) {
  .brand { font-size: 1.15rem; }
  .nav { gap: 0.85rem; }
}

/* ----------------------------------------------------------------
   10. Barrierefreiheit & Reduced-Motion
   Respektiert die System-Einstellung "Bewegung reduzieren".
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .planet, .planet__surface, .planet__clouds, .brand-title, .ship-orbit { animation: none; }
  /* Schiffe statisch um den Planeten verteilen, statt sie zu animieren */
  .ship-orbit--1 { transform: rotate(40deg); }
  .ship-orbit--2 { transform: rotate(210deg); }
}

/* ----------------------------------------------------------------
   Keyframes
   ---------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Achsenrotation des Planeten: nahtloses horizontales Scrollen der Textur.
   -50% der 400%-breiten Schicht = genau eine Kachel → kein Sprung. */
@keyframes planet-spin {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Sanftes Schweben der Wortmarke über dem Planeten */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}