/* ---------------------------------------------------------------------------
   Schrift — Inter als Variable Font, lokal eingebunden.
   Liegt bewusst im Projekt statt beim Google-CDN: funktioniert offline und
   direkt von der Festplatte, und es werden keine Daten an Dritte übertragen.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Grundlagen
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ink: #f4f7ff;
  --ink-muted: rgba(226, 232, 255, 0.62);

  --accent: #8fb4ff;   /* Blau des Sternenhimmels */
  --aurora: #7dffd0;   /* Grün des Nordlichts */

  --font-sans: 'Inter', "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Durchgängig Semibold */
  --weight: 600;

  --space-page: clamp(1.5rem, 5vw, 5rem);
}

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #04060e;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--weight);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Sternenhimmel
--------------------------------------------------------------------------- */

/* Ebenen von hinten nach vorn: CSS-Aurora → Canvas (Nebel, Glühwürmchen)
   → Korn → Inhalt */

/* Waldlichtung bei Nacht: petrolgrüne Waldränder links und rechts, in der
   Mitte die violette Lichtung, darüber der dunkle Himmel. Die oberste
   Schicht steht zuerst. */
.css-aurora {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  /* Die ganze Verlaufsebene atmet sehr langsam — dadurch bewegen sich auch
     die Waldränder und die Lichtung selbst */
  animation: auroraBreath 26s ease-in-out infinite alternate;
  background:
    radial-gradient(58% 85% at 0% 60%, rgba(22, 64, 60, 0.55), transparent 66%),
    radial-gradient(58% 85% at 100% 60%, rgba(20, 58, 56, 0.50), transparent 66%),
    radial-gradient(48% 55% at 100% 0%, rgba(52, 138, 128, 0.62), transparent 68%),
    radial-gradient(50% 58% at 50% 56%, rgba(110, 62, 155, 0.52), rgba(64, 40, 102, 0.22) 56%, transparent 78%),
    radial-gradient(70% 45% at 50% 98%, rgba(72, 42, 112, 0.34), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(11, 9, 34, 0.85), transparent 72%),
    radial-gradient(130% 100% at 50% 12%, #0e0c29 0%, #070518 50%, #010008 100%);
}

/* Das Herz der Lichtung: schwillt heller an und wieder ab. Bewusst diffus —
   der Verlauf läuft sehr weit aus, damit keine erkennbare Ellipse entsteht. */
.aurora-heart {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 58%;
  height: 74%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(158, 108, 204, 0.28),
    rgba(120, 72, 170, 0.10) 48%,
    rgba(100, 60, 150, 0.03) 70%,
    transparent 88%
  );
  animation: heartGlow 11s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes auroraBreath {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(0.8%, -0.8%, 0); }
}

@keyframes heartGlow {
  0%, 100% { opacity: 0.5;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}

/* Animierte Aurora-Schwaden: zwei große, stark weichgezeichnete Farbfelder
   in Petrol und Violett, die auf sehr langsamen Bahnen übers Bild wandern.
   Nur transform wird animiert — das bleibt flüssig. */
.css-aurora::before,
.css-aurora::after {
  content: "";
  position: absolute;
  inset: -30%;
  filter: blur(70px);
  will-change: transform;
}

.css-aurora::before {
  background:
    radial-gradient(38% 30% at 30% 62%, rgba(24, 92, 86, 0.42), transparent 70%),
    radial-gradient(30% 26% at 74% 36%, rgba(18, 70, 72, 0.30), transparent 70%);
  animation: auroraDrift1 38s ease-in-out infinite alternate;
}

.css-aurora::after {
  background:
    radial-gradient(36% 30% at 66% 64%, rgba(122, 66, 178, 0.34), transparent 70%),
    radial-gradient(28% 24% at 34% 30%, rgba(96, 50, 150, 0.26), transparent 70%);
  animation: auroraDrift2 48s ease-in-out infinite alternate;
}

/* Deutlich sichtbare, aber weiche Wanderung — die beiden Schichten laufen
   gegeneinander, dadurch verschieben sich Petrol und Violett fortwährend */
@keyframes auroraDrift1 {
  0%   { transform: translate3d(-10%, -5%, 0) rotate(-4deg) scale(1); }
  50%  { transform: translate3d(6%, 6%, 0) rotate(2deg) scale(1.14); }
  100% { transform: translate3d(11%, -4%, 0) rotate(5deg) scale(1.04); }
}

@keyframes auroraDrift2 {
  0%   { transform: translate3d(10%, 5%, 0) rotate(4deg) scale(1.10); }
  50%  { transform: translate3d(-6%, -6%, 0) rotate(-2.5deg) scale(1); }
  100% { transform: translate3d(-11%, 4%, 0) rotate(-5deg) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .css-aurora,
  .css-aurora::before,
  .css-aurora::after,
  .aurora-heart {
    animation: none;
  }
}

.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -4;
}


/* Sehr feines Rauschen über dem Himmel: verhindert sichtbare Streifen in den
   Farbverläufen und gibt der Fläche eine analoge Anmutung. */
.sky-grain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Burg — Vordergrund am unteren Bildrand.
   Die Zeichnung liegt in Purpurviolett vor; `brightness(0) invert(1)` färbt
   sie unabhängig von der Quellfarbe rein weiß ein, ohne die Datei zu ändern.
--------------------------------------------------------------------------- */

/* Motiv im Vordergrund. Die Zeichnung ist dunkel angelegt und wirkt nur so —
   deshalb liegt ein heller Lichtschein dahinter, vor dem sie sich abzeichnet. */
.motif {
  position: relative;
  display: flex;
  justify-content: center;
  /* +160px ersetzen die Höhe des Textblocks, der jetzt fest auf der Bühne
     steht — der Wolf behält dadurch seine Position im Startbild */
  margin: calc(clamp(1rem, 2.5vh, 2rem) + 240px) 0 0;
  pointer-events: none;
}

/* `brightness(0)` macht die Zeichnung unabhängig von der Quellfarbe rein
   schwarz — ohne die Datei zu verändern.
   Die Maske lässt das gespiegelte Tier nach unten hin ausblenden, damit das
   Junge oben im Vordergrund steht. */
.motif__image {
  position: relative;
  display: block;
  width: min(70vw, 28.5rem);
  height: auto;
  transform: translateX(-10px);
  filter: brightness(0);
  --fade: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.95) 64%,
    rgba(0, 0, 0, 0.88) 82%,
    rgba(0, 0, 0, 0.76) 100%
  );
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

@media (max-width: 48rem) {
  .motif__image { width: min(74vw, 18rem); }
}

/* ---------------------------------------------------------------------------
   Bühne
--------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Das Padding hält dem Wolf den Platz frei, den früher der Textblock
     einnahm — Headline und Slogan stehen jetzt fest auf der Bühne. */
  padding: clamp(6rem, calc(35svh - 120px), 20rem) var(--space-page) 3vh;
  text-align: center;
}

/* Feste Bühne im goldenen Schnitt: Headline und Slogan bleiben beim
   Scrollen stehen — nur der Wolf zieht nach oben. */
.stage {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(35svh - 120px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-page);
  text-align: center;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Claim mit Schreibmaschinen-Cursor
--------------------------------------------------------------------------- */

.claim {
  margin: 0;
  /* Der Satz soll auf einer Zeile bleiben — die Schriftgröße folgt deshalb
     der Viewport-Breite, statt umzubrechen. */
  font-size: clamp(1.05rem, 3.6vw, 3.4rem);
  /* Headline wie auf der Referenzseite: Bold, kompakte Zeile */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em; /* wie die Headline der Referenzseite */
  text-transform: uppercase;
}

/* Der Platzhalter hält Breite und Höhe des vollen Satzes frei. Der
   geschriebene Text liegt zentriert darüber — er wächst aus der Mitte,
   der Cursor wandert mit dem Zeilenende mit. */
.claim__line {
  position: relative;
  display: inline-block;
  text-align: center;
}

.claim__ghost {
  visibility: hidden;
}

.claim__live {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  /* Der getippte Text kommt per textContent — nur hier soll \n umbrechen.
     Auf umschließenden Elementen würde pre-line auch die Markup-Einrückung
     zu Leerzeilen machen. */
  white-space: pre-line;
}

.claim__cursor {
  display: inline-block;
  width: 0.055em;
  min-width: 2px;
  height: 1.05em;
  margin-left: 0.1em;
  /* Netto-Breite ≤ 0: Der Cursor beansprucht keinen Platz in der Zeile.
     Sonst bricht er am Ende der vollen zweiten Zeile allein in eine dritte
     Zeile um (der Container ist exakt so breit wie der Text). */
  margin-right: calc(-0.16em - 2px);
  vertical-align: -0.14em;
  background: var(--ink);
  border-radius: 1px;
  transition: opacity 0.6s ease;
}

/* Beim Tippen steht der Cursor still, in den Pausen blinkt er. */
.claim__cursor.is-idle {
  animation: blink 1.05s steps(1) infinite;
}

.claim__cursor.is-gone {
  animation: none;
  opacity: 0;
}

@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Buttons — Liquid Glass
--------------------------------------------------------------------------- */

/* Die Buttons stehen fest im Bildausschnitt und bleiben — wie die Bühne —
   beim Scrollen stehen. Von Anfang an sichtbar, keine Einblendung. */
.actions {
  position: fixed;
  left: 50%;
  top: calc(74svh + 60px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  justify-content: center;
}

/* Milchglas über dem leuchtenden Hintergrund; eine feine helle Ober-,
   eine dunkle Unterkante geben die Glaskante. */
.btn {
  position: relative;
  display: inline-block;
  min-width: clamp(9.5rem, 16vw, 11.5rem); /* beide Buttons gleich breit */
  text-align: center;
  padding: 0.9em 2em;
  border-radius: 999px;
  font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
  font-weight: var(--weight);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  /* Glasglanz über einer dunklen Tönung — Milchglas, aber abgedunkelt */
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.03) 45%,
      rgba(255, 255, 255, 0.01)
    ),
    rgba(9, 7, 26, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 10px 34px rgba(4, 6, 20, 0.45);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Lichtreflex, der schräg über das Glas läuft */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 46%,
    rgba(255, 255, 255, 0.04) 54%,
    transparent 68%
  );
  background-size: 260% 100%;
  background-position: 120% 0;
  transition: background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.06) 45%,
      rgba(255, 255, 255, 0.03)
    ),
    rgba(9, 7, 26, 0.46);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 44px rgba(4, 6, 20, 0.55);
}

.btn:hover::after,
.btn:focus-visible::after {
  background-position: -60% 0;
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Schwebende Kontakt-Icons am rechten Rand
--------------------------------------------------------------------------- */

.fly-icons {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.75rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* unter dem Menü-Overlay (15) */
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vh, 0.5rem);
}

/* Schlichte weiße Icons — bewusst ohne Glasfläche und ohne Bewegung */
.fly-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.fly-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.fly-icon:hover,
.fly-icon:focus-visible {
  opacity: 1;
}

.fly-icon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
  border-radius: 50%;
}

body.menu-open .fly-icons {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ---------------------------------------------------------------------------
   Subline — der Slogan unter der Headline
--------------------------------------------------------------------------- */

.subclaim {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  font-size: clamp(0.9375rem, 1.9vw, 1.5rem);
  font-weight: 400; /* bewusst leichter als die Headline */
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.subclaim.is-visible {
  opacity: 1;
  transform: none;
}

/* Bereich 2 — schiebt sich beim Scrollen wie ein Vorhang ÜBER den ersten
   Bildschirm: eigene deckende Fläche, volles Scrolltempo, z-Index über der
   Bühne (5) und den Buttons (2), aber unter Logo, Icons und Menü. */
.below {
  position: relative;
  z-index: 6;
  height: 180svh;
  /* Dunkles Milchglas: halbtransparent + Weichzeichnung — was der Vorhang
     überdeckt, schimmert verschwommen durch */
  background: linear-gradient(
    to bottom,
    rgba(9, 7, 24, 0.72) 0%,
    rgba(5, 4, 16, 0.82) 38%,
    rgba(2, 2, 9, 0.94) 100%
  );
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-radius: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) 0 0;
  box-shadow: 0 -18px 60px rgba(2, 2, 10, 0.65);
}

/* Feine Lichtkante an der Oberkante des Vorhangs */
.below::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    transparent 8%,
    rgba(190, 160, 235, 0.16) 50%,
    transparent 92%
  );
}

/* Weißer Pfeil unter den Buttons: lädt zum Scrollen ein, nickt sanft */
.scroll-hint {
  position: fixed;
  left: 50%;
  top: calc(74svh + 60px + clamp(4.5rem, 9vh, 6rem));
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink);
  opacity: 0.85;
  animation: hintNod 2.4s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.scroll-hint:hover,
.scroll-hint:focus-visible {
  opacity: 1;
}

.scroll-hint:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
  border-radius: 50%;
}

.scroll-hint svg {
  width: 2.25rem;
  height: 2.25rem;
}

@keyframes hintNod {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 7px; }
}

body.menu-open .scroll-hint {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
}

/* ---------------------------------------------------------------------------
   Burgermenü
--------------------------------------------------------------------------- */

/* Logo klein links oben, Burger rechts außen — beide bleiben beim Scrollen stehen */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-start;
  padding: clamp(1.25rem, 3vh, 2.25rem) clamp(1.25rem, 2.6vw, 2.5rem) 0;
  pointer-events: none; /* der Balken selbst fängt keine Klicks ab */
}

.topbar > * {
  pointer-events: auto;
}

.burger {
  position: fixed;
  top: clamp(1rem, 2.4vh, 2rem);
  right: clamp(0.75rem, 2vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.burger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.burger__box {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1rem;
}

.burger__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: calc(50% - 1px); }
.burger__line:nth-child(3) { bottom: 0; }

/* Die drei Striche klappen zum Kreuz zusammen */
.burger.is-open .burger__line:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.burger.is-open .burger__line:nth-child(2) { opacity: 0; }
.burger.is-open .burger__line:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 14, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
}

.menu__list {
  display: grid;
  gap: clamp(1.25rem, 3.5vh, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

/* Die Punkte laufen nacheinander ein */
.menu__list li {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) { transition-delay: 0.10s; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: 0.16s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 0.22s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: 0.28s; }

.menu__list a {
  display: inline-block;
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu__list a:hover,
.menu__list a:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* Kein Scrollen, solange das Menü offen ist */
body.menu-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Logo
--------------------------------------------------------------------------- */

/* Die Wortmarke ist von Anfang an sichtbar — sie gehört nicht zur
   Einblende-Sequenz des Claims. */
.logo {
  opacity: 1;
}

/* Die Wortmarke liegt schwarz vor — invertiert wird sie rein weiß. */
/* Volles Logo (breite Wortmarke), invertiert weiß */
.logo__image {
  display: block;
  width: clamp(10rem, 17vw, 14rem);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(10, 16, 34, 0.85));
}

/* ---------------------------------------------------------------------------
   Reduzierte Bewegung
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .claim__cursor,
  .logo {
    animation: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Helle Variante (index2.html, body.light)
   Invertiert die Flächen und Texte — die Farbwelt des Hintergrunds
   (Petrol-Waldränder, violette Lichtung) bleibt erhalten, nur hell gebettet.
--------------------------------------------------------------------------- */

body.light {
  --ink: #3e3e3d; /* CD-Anthrazit */
  --ink-muted: rgba(62, 62, 61, 0.62);
  background: #f5f7fa; /* kühles, fast weißes Grau */
}

/* Waldlichtung auf fast weißem Grund: lichtes Petrol an den Rändern, das
   nach innen zart ins Violett ausläuft — die Mitte selbst bleibt fast
   weiß, nur der Übergang trägt den Violetthauch */
body.light .css-aurora {
  background:
    radial-gradient(58% 85% at 0% 60%, rgba(46, 138, 126, 0.18), transparent 68%),
    radial-gradient(58% 85% at 100% 60%, rgba(42, 126, 116, 0.15), transparent 68%),
    radial-gradient(48% 55% at 100% 0%, rgba(56, 158, 144, 0.18), transparent 70%),
    /* der violette Auslauf der grünen Ränder */
    radial-gradient(46% 68% at 22% 58%, rgba(158, 108, 204, 0.10), transparent 70%),
    radial-gradient(46% 68% at 78% 58%, rgba(158, 108, 204, 0.09), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(252, 255, 254, 0.85), transparent 68%),
    /* fast weiße Bettung mit grünlichem Glashauch */
    radial-gradient(130% 100% at 50% 12%, #fdfffe 0%, #f4f8f6 50%, #ebf1ee 100%);
}

/* Das Herz der Lichtung pulsiert rein weiß — ohne Violettstich */
body.light .aurora-heart {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.65),
    rgba(250, 252, 255, 0.30) 48%,
    rgba(244, 247, 252, 0.08) 70%,
    transparent 88%
  );
}

/* Nur die Petrol-Schwaden wandern als zarter Farbhauch — die violette
   Schwaden-Schicht ruht im Hellen (Look: leicht grünlich gläsern) */
body.light .css-aurora::before {
  opacity: 0.4;
}

body.light .css-aurora::after {
  opacity: 0;
  animation: none;
}

body.light .sky-grain {
  opacity: 0.03;
}

/* Logo im Original-Anthrazit, ohne Invertierung */
body.light .logo__image {
  filter: none;
}

/* Buttons: nur leichte Glas-Allüren — flach, zarte Kante, ein Hauch Blur */
/* Buttons im CD-Purpurviolett mit weißer Schrift */
body.light .btn {
  color: #fff;
  background: rgba(124, 45, 130, 0.92);
  border: 1px solid rgba(124, 45, 130, 0.95);
  box-shadow: 0 6px 20px rgba(124, 45, 130, 0.26);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

/* Der wandernde Lichtreflex entfällt im Hellen */
body.light .btn::after {
  display: none;
}

body.light .btn:hover,
body.light .btn:focus-visible {
  background: rgba(143, 58, 150, 0.96);
  border-color: rgba(143, 58, 150, 1);
  box-shadow: 0 8px 26px rgba(124, 45, 130, 0.34);
}

body.light .btn:focus-visible {
  outline-color: rgba(124, 45, 130, 0.7);
}

/* Vorhang (Bereich 2): helles Glas, aber nur angehaucht */
body.light .below {
  background: linear-gradient(
    to bottom,
    rgba(251, 254, 253, 0.78) 0%,
    rgba(245, 249, 247, 0.88) 38%,
    rgba(237, 243, 240, 0.98) 100%
  );
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 -10px 36px rgba(46, 90, 82, 0.12);
}

body.light .below::before {
  background: linear-gradient(
    to right,
    transparent 8%,
    rgba(62, 62, 61, 0.16) 50%,
    transparent 92%
  );
}

/* Menü-Overlay hell */
body.light .menu {
  background: rgba(246, 243, 251, 0.84);
}

/* Fokus-Ringe dunkel statt weiß */
body.light .btn:focus-visible,
body.light .burger:focus-visible,
body.light .fly-icon:focus-visible,
body.light .scroll-hint:focus-visible {
  outline-color: rgba(62, 62, 61, 0.7);
}

/* ---------------------------------------------------------------------------
   Mobil (schmale Viewports) — gilt für dunkle und helle Variante.
   Die Desktop-Formeln skalieren über vw zu klein bzw. sitzen zu tief;
   hier werden Schrift und feste Positionen neu kalibriert.
--------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  /* Headline: 3.6vw wäre auf dem Handy winzig */
  .claim {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  .subclaim {
    font-size: clamp(0.9375rem, 4vw, 1.125rem);
  }

  /* Logo kompakter, damit es neben dem Burger Luft hat */
  .logo__image {
    width: 8.5rem;
  }

  /* Bühne etwas höher ansetzen (der Textblock ist niedriger) */
  .stage {
    top: max(5.5rem, calc(32svh - 90px));
  }

  /* Der fixe Textblock ist mobil ~110px hoch statt ~160px —
     der Wolf rückt entsprechend nach */
  .motif {
    margin-top: calc(clamp(1rem, 2.5vh, 2rem) + 150px);
  }

  /* Buttons und Pfeil etwas höher, damit alles ins Bild passt */
  .actions {
    top: calc(72svh + 40px);
  }

  .scroll-hint {
    top: calc(72svh + 40px + 4rem);
  }

  /* Kontakt-Icons: nicht mit den Buttons kollidieren */
  .fly-icons {
    right: 0.5rem;
  }
}

/* Headline der hellen Variante im CD-Purpurviolett — der ganze Satz,
   inklusive Schreib-Cursor */
body.light .claim {
  color: #7c2d82;
}

body.light .claim__cursor {
  background: #7c2d82;
}

/* „Andreas Hoffmann" tritt im Hellen kräftiger auf als im Dunklen */
body.light .subclaim {
  font-weight: 600;
}