/* ==========================================================================
   KAY GOOSE — Homepage
   Farbwelt: Schwarz / Rauch + Signalrot (aus Bandana & Shirt)
   ========================================================================== */

:root{
  --bg:        #08070a;
  --bg-2:      #0e0d12;
  --bg-3:      #141319;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --fg:        #f4f2f5;
  --fg-mute:   #9b96a4;
  --fg-dim:    #6d6877;
  --accent:    #e02424;
  --accent-hi: #ff3b30;

  --font-display: "Orbitron", "Helvetica Neue", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .2vw,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* --- Grundbausteine ------------------------------------------------------ */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.section{ padding-block:clamp(5rem,11vw,9.5rem); position:relative; }
.section + .section{ border-top:1px solid var(--line-soft); }

.eyebrow{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 1.25rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{
  content:""; height:1px; flex:1; max-width:7rem;
  background:linear-gradient(90deg,var(--accent),transparent);
}

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:.95; letter-spacing:-.02em; margin:0; }
h2{ font-size:clamp(2.25rem,6vw,4.5rem); text-transform:uppercase; }
h3{ font-size:clamp(1.4rem,2.4vw,2rem); text-transform:uppercase; }

p{ margin:0 0 1.15rem; color:var(--fg-mute); max-width:62ch; }
p strong{ color:var(--fg); font-weight:600; }

.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.95rem 1.7rem; border:1px solid var(--line);
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--fg); background:transparent;
  transition:background .25s, border-color .25s, color .25s, transform .25s;
  cursor:pointer;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px); }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--solid:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }

/* --- Navigation ---------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:flex-start;
  gap:1rem; padding:1.1rem var(--pad);
  transition:background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,7,10,.86); backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft); padding-block:.8rem;
}
.nav__brand{
  font-family:var(--font-display); font-size:1.15rem;
  letter-spacing:0; text-transform:none;   /* KayGoose bleibt KayGoose */
}
.nav__word > span{ color:var(--accent); }
.nav__links{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--fg-mute); transition:color .2s; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-.4rem; height:1px; width:0;
  background:var(--accent); transition:width .3s;
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ width:100%; }

.nav__toggle{ display:none; background:none; border:0; color:var(--fg); padding:.5rem; cursor:pointer; }
.nav__toggle svg{ width:26px; height:26px; }

/* --- Hero ----------------------------------------------------------------
   Die Bühne ist zweimal bildschirmhoch. Das Bild bleibt beim ersten Scrollen
   stehen (sticky), währenddessen fahren Fuchs und Schriftzug zusammen.
   Erst danach läuft die Seite weiter.                                       */
.hero-stage{ position:relative; height:200svh; }

.hero{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 40%;
  transform:scale(1.06);
  will-change:transform;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 3%, rgba(8,7,10,.70) 32%, rgba(8,7,10,.10) 60%, rgba(8,7,10,.55) 100%),
    linear-gradient(to right, rgba(8,7,10,.70), transparent 58%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  padding-bottom:clamp(3.5rem,9vw,7rem);
}

/* --- Wortmarke: Fuchs links, Schriftzug rechts, leicht ineinander --- */
.lockup{
  display:flex; align-items:flex-start;
  gap:0;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
}
.lockup__text{ display:inline-block; }
.lockup__fox{
  width:clamp(104px,19vw,310px); height:auto; flex:none;
  /* greift in den Schriftzug hinein und sitzt höher:
     der Kopf steht über den Buchstaben, der Schwanz läuft darunter durch */
  margin-right:clamp(-5.6rem,-5.8vw,-2rem);
  margin-top:clamp(-6.4rem,-6.6vw,-2.2rem);
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.8));
  will-change:transform,opacity;
}
.lockup__type{
  position:relative; z-index:1;
  font-size:clamp(2.6rem,10vw,8.2rem);
  line-height:.9; letter-spacing:.005em; margin:0;
  color:var(--fg);                     /* einfarbig — kein zweifarbiger Schriftzug */
  text-shadow:0 6px 60px rgba(0,0,0,.75);
  white-space:nowrap;
  will-change:transform,opacity;
}

.hero__tag{
  font-size:clamp(.72rem,1.35vw,1rem); letter-spacing:.34em; text-transform:uppercase;
  color:var(--fg); font-weight:600; margin:.4rem 0 0; max-width:none;
  text-align:right;              /* steht damit unter "Goose" */
  padding-right:.15em;
  will-change:transform,opacity;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; will-change:opacity; }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:1.4rem; z-index:2;
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--fg-dim);
  display:flex; align-items:center; gap:.7rem;
  transition:opacity .4s;
}
.hero__scroll::before{
  content:""; width:44px; height:1px; background:var(--fg-dim);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{ transform:scaleX(.35); opacity:.4; } 50%{ transform:scaleX(1); opacity:1; } }

/* Ohne JavaScript steht die Wortmarke einfach fertig da */
.no-js .lockup__fox, .no-js .lockup__type, .no-js .hero__tag{ opacity:1; transform:none; }

/* --- Intro --------------------------------------------------------------- */
.textlink{
  color:var(--fg); border-bottom:1px solid var(--accent);
  transition:color .2s, background .2s;
}
.textlink:hover{ color:var(--accent); }
.intro__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.intro__lead{ font-size:clamp(1.15rem,1.8vw,1.45rem); color:var(--fg); line-height:1.5; }
/* Drei Spalten, die sich gemeinsam verschmaelern, statt einer Reihe,
   aus der die dritte Kachel nach unten faellt. */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
        gap:clamp(1rem,2.2vw,2.5rem); margin-top:2.5rem; }
.stat__num{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); color:var(--accent); line-height:1; }
.stat__num--bild{ color:var(--accent); height:clamp(1.8rem,3vw,2.6rem); display:flex; align-items:center; }
.stat__num--bild svg{ height:100%; width:auto; }
.stat__label{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); margin-top:.5rem; }

/* --- Kanal-Blöcke (YouTube, Mixcloud) ------------------------------------ */
.channel{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(3rem,6vw,5rem);
}
.channel + .channel{ border-top:1px solid var(--line-soft); }
.channel--flip .channel__visual{ order:2; }

.channel__mark{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--fg); margin-bottom:1.4rem;
}
.channel__mark svg{ width:26px; height:26px; }
.channel__body p{ margin-bottom:1.5rem; }
.channel__list{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.7rem; }
.channel__list li{
  position:relative; padding-left:1.6rem; color:var(--fg-mute); font-size:.95rem;
}
.channel__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:.5rem; height:1px; background:var(--accent);
}

.channel__visual{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-soft);
}
.channel__visual img{ width:100%; height:100%; object-fit:cover; transition:transform .8s; }
/* Der Rahmen ist 16:10, die Bilder sind 16:9 - es wird also seitlich
   beschnitten. Beim Mixcloud-Motiv sitzt der Kopf rechts, deshalb dort
   den Ausschnitt nach rechts nageln, damit nie ein Ohr wegfaellt. */
.channel__bild--rechts{ object-position:78% 50%; }
.channel:hover .channel__visual img{ transform:scale(1.04); }
.channel__visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(224,36,36,.10), transparent 55%);
  mix-blend-mode:screen; pointer-events:none;
}

/* --- Übrige Plattformen -------------------------------------------------- */
.platforms{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:3rem;
}
.platform{
  background:var(--bg); padding:2rem 1.75rem 1.85rem;
  display:flex; flex-direction:column; gap:.7rem;
  transition:background .3s, transform .3s;
}
.platform:hover{ background:var(--bg-3); }
.platform__icon{ width:30px; height:30px; color:var(--accent); }
.platform__name{ font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; }
.platform__desc{ font-size:.87rem; color:var(--fg-mute); margin:0; }
.platform__go{
  margin-top:auto; padding-top:1rem;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim);
  display:flex; align-items:center; gap:.5rem; transition:color .25s, gap .25s;
}
.platform:hover .platform__go{ color:var(--accent); gap:.9rem; }

/* --- Booking ------------------------------------------------------------- */
.booking{ background:var(--bg-2); }
.booking__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.booking__wort{
  margin-top:2.5rem; padding-left:1.4rem;
  border-left:2px solid var(--accent);
}
.booking__wort p{ margin-bottom:.9rem; }
.booking__wort p:last-child{ margin-bottom:0; }
.booking__direct{ display:grid; gap:1.6rem; margin-top:2rem; }
.booking__item span{ display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:.35rem; }
.booking__item a{ font-size:1.05rem; color:var(--fg); border-bottom:1px solid var(--line); transition:border-color .25s, color .25s; }
.booking__item a:hover{ color:var(--accent); border-color:var(--accent); }

.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:grid; gap:.5rem; }
.field label{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); }
.field input, .field textarea, .field select{
  background:var(--bg); border:1px solid var(--line); color:var(--fg);
  padding:.9rem 1rem; font:inherit; font-size:.95rem; border-radius:0;
  transition:border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); background:var(--bg-3);
}
.field textarea{ min-height:150px; resize:vertical; }
.form__note{ font-size:.78rem; color:var(--fg-dim); margin:0; }
.form__note a{ color:var(--fg-mute); border-bottom:1px solid var(--line); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__status{ font-size:.9rem; margin:0; display:none; padding:.9rem 1.1rem; border-left:2px solid var(--accent); background:var(--bg-3); }
.form__status.is-visible{ display:block; }
.form__status.is-error{ border-color:#ffb020; color:#ffcf7a; }

/* --- Footer -------------------------------------------------------------- */
.footer{ border-top:1px solid var(--line-soft); padding-block:3.5rem 2.5rem; }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; align-items:flex-start; }
.footer__brand{
  font-family:var(--font-display); font-size:1.7rem; text-transform:none; letter-spacing:0;
  display:inline-flex; align-items:center; gap:0;
}
.footer__brand .fox{
  width:64px; height:64px; flex:none;
  margin-right:-20px;    /* schiebt sich vor das K */
  margin-top:-22px;      /* Kopf über der Schrift, Schwanz darunter */
}
.footer__word{ position:relative; z-index:1; }
.footer__brand:hover .fox, .footer__brand:focus-visible .fox{ animation:foxWackel .62s ease-in-out; }
.footer__word > span{ color:var(--accent); }
.footer__social{ display:flex; flex-wrap:wrap; gap:1.35rem; }
.footer__social a{ color:var(--fg-dim); transition:color .25s, transform .25s; display:inline-flex; }
.footer__social a:hover{ color:var(--accent); transform:translateY(-3px); }
.footer__social svg{ width:22px; height:22px; }
.footer__bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.78rem; color:var(--fg-dim);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer__legal a:hover{ color:var(--accent); }

/* --- Legal-Seiten -------------------------------------------------------- */
.legal-page{ padding-top:clamp(7rem,14vw,10rem); }
.legal-page h1{ font-size:clamp(2.25rem,6vw,4rem); text-transform:uppercase; margin-bottom:2.5rem; }
.legal-page h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin:2.75rem 0 .9rem; }
.legal-page h3{ font-size:1.05rem; margin:1.75rem 0 .6rem; color:var(--fg); }
.legal-page p, .legal-page li{ color:var(--fg-mute); max-width:74ch; }
.legal-page ul{ padding-left:1.2rem; margin:0 0 1.15rem; }
.legal-page a{ color:var(--fg); border-bottom:1px solid var(--line); }
.legal-page a:hover{ color:var(--accent); border-color:var(--accent); }
.legal-back{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); display:inline-block; margin-bottom:2rem; }
.legal-back:hover{ color:var(--accent); }
/* --- Kopfband der Werdegang-Seite ---------------------------------------- */
/* Das Bild sitzt darunter, der Verlauf darueber, die Schrift ganz oben.
   Ohne den Verlauf waere die Ueberschrift auf hellen Bildstellen unlesbar. */
.vitakopf{
  position:relative; width:100%;
  /* Festes Seitenverhaeltnis statt fester Hoehe: sonst wird das 16:9-Bild
     auf breiten Schirmen zu einem schmalen Streifen und schneidet den Kopf ab. */
  aspect-ratio:2.5 / 1; max-height:34rem;
  overflow:hidden; background:var(--bg);
}
.vitakopf__bild{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:50% 28%;
}
.vitakopf::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(8,7,10,.35) 45%, rgba(8,7,10,.55) 100%),
    linear-gradient(to left, rgba(8,7,10,.72) 0%, rgba(8,7,10,.12) 62%, transparent 100%);
}
.vitakopf__inhalt{
  position:absolute; z-index:1; right:0; bottom:0;
  width:100%; max-width:var(--maxw); margin:0 auto; left:0;
  padding:0 var(--pad) clamp(1.75rem,4vw,2.75rem);
  text-align:right;
}
.vitakopf__titel{
  font-size:clamp(2.25rem,7vw,4.5rem); text-transform:uppercase;
  line-height:.95; margin:0;
}
.vitakopf__unter{
  color:var(--fg-mute); margin:.9rem 0 0 auto; max-width:none;
  font-size:clamp(1rem,1.6vw,1.2rem);
}
/* Nach dem Kopfband braucht der Text keinen Abstand fuer die feste Kopfzeile. */
.legal-page--nachbild{ padding-top:clamp(2.5rem,5vw,3.5rem); }

@media (max-width:600px){
  /* Auf schmalen Schirmen steht die Schrift links und das Bild wird dunkler,
     sonst kollidiert die Ueberschrift mit dem Gesicht. */
  /* Hochkant braucht das Band mehr Hoehe, sonst bleibt vom Motiv nichts. */
  .vitakopf{ aspect-ratio:4 / 3; }
  .vitakopf__inhalt{ text-align:left; }
  .vitakopf__unter{ margin-left:0; }
  .vitakopf__bild{ object-position:88% 18%; }
  /* Hochkant wird aus drei Kacheln zwei plus eine. */
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vitakopf::after{
    background:linear-gradient(to top, var(--bg) 3%, rgba(8,7,10,.55) 55%, rgba(8,7,10,.55) 100%);
  }
}

/* --- Werdegang-Seite ----------------------------------------------------- */
/* Zeitleiste: schmale Linie links, Jahreszahl als Marke darueber. */
.vita__lead{ font-size:clamp(1.15rem,1.8vw,1.45rem); color:var(--fg); line-height:1.5; max-width:60ch; }
.vita{ list-style:none; margin:2.75rem 0 0; padding:0 0 0 1.6rem; border-left:1px solid var(--line-soft); max-width:74ch; }
.vita__punkt{ position:relative; padding-bottom:2rem; }
.vita__punkt:last-child{ padding-bottom:0; }
.vita__punkt::before{
  content:""; position:absolute; left:calc(-1.6rem - 4px); top:.45rem;
  width:7px; height:7px; border-radius:50%;
  background:var(--bg); border:1px solid var(--fg-mute);
}
.vita__punkt--jetzt::before{ background:var(--accent); border-color:var(--accent); }
.vita__jahr{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.45rem;
}
.vita__text{ margin:0; color:var(--fg-mute); }
.vita__punkt--jetzt .vita__text{ color:var(--fg); }

@media (max-width:600px){
  .vita{ padding-left:1.2rem; }
  .vita__punkt::before{ left:calc(-1.2rem - 4px); }
}

.todo{ background:rgba(224,36,36,.10); border-left:2px solid var(--accent); padding:.85rem 1.1rem; color:#ffb3b3; font-size:.9rem; }

/* --- Scroll-Reveal ------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--bg-2); border-left:1px solid var(--line-soft);
    flex-direction:column; justify-content:center; gap:2rem;
    padding:2rem var(--pad); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ font-size:1rem; }
  .nav__toggle{ display:block; position:relative; z-index:2; }
  .intro__grid, .channel, .booking__grid{ grid-template-columns:1fr; }
  .channel--flip .channel__visual{ order:0; }
  .form__row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   FUCHSLOGO
   ========================================================================== */

/* Wortmarke: Orbitron braucht mehr Laufweite, sonst klebt es */
.nav__brand, .footer__brand{ font-weight:800; }
.lockup__type{ font-weight:800; }
.lockup__type span{ color:var(--accent); }

/* --- Logo in der Navigation --- */
.nav__brand{ display:inline-flex; align-items:center; gap:0; }
.nav__brand .fox{
  width:46px; height:46px; flex:none;
  margin-right:-14px;          /* schiebt sich vor das K */
  margin-top:-16px;            /* Kopf sitzt über der Schrift, der Schwanz darunter */
  transition:width .35s, height .35s, margin .35s;
}
.nav.is-stuck .nav__brand .fox{ width:38px; height:38px; margin-right:-11px; margin-top:-13px; }
.nav__word{ position:relative; z-index:1; }

/* Wackeln, sobald der Mauszeiger darüber ist */
.nav__brand:hover .fox, .nav__brand:focus-visible .fox{ animation:foxWackel .62s ease-in-out; }
@keyframes foxWackel{
  0%   { transform:rotate(0deg)   scale(1); }
  18%  { transform:rotate(-13deg) scale(1.10); }
  38%  { transform:rotate(10deg)  scale(1.10); }
  56%  { transform:rotate(-7deg)  scale(1.06); }
  74%  { transform:rotate(5deg)   scale(1.03); }
  88%  { transform:rotate(-2deg)  scale(1.01); }
  100% { transform:rotate(0deg)   scale(1); }
}

/* --- Mitscrollendes Wasserzeichen ---
   Bleibt am Bildschirmrand stehen und begleitet das Scrollen; die
   Deckkraft und Drehung werden in main.js aus der Scrollposition gesetzt. */
.fox-watermark{
  position:fixed; right:-4vw; top:50%;
  width:clamp(300px,42vw,680px); height:auto;
  transform:translateY(-50%);
  opacity:0; pointer-events:none; z-index:0;
  transition:opacity .8s ease;
  will-change:transform,opacity;
  /* dunkel auf dunkel: nur ein Relief, kein Kontrast */
  filter:blur(.3px);
}

/* --- Fuchs als Trenner zwischen den Abschnitten --- */
.fox-divider{
  display:flex; align-items:center; gap:1.8rem;
  margin-block:clamp(2.5rem,6vw,4rem);
}
.fox-divider::before, .fox-divider::after{
  content:""; height:1px; flex:1; background:var(--line-soft);
}
.fox-divider img{ width:clamp(46px,5vw,64px); height:auto; opacity:.6; }

/* Inhalt muss über dem Wasserzeichen liegen */
.section > .wrap, .hero__inner, .footer > .wrap{ position:relative; z-index:1; }

/* --- Startzustand der Hero-Choreografie ---
   Nur wenn JavaScript die Steuerung übernimmt, starten die Teile unsichtbar.
   Ohne JavaScript oder bei reduzierter Bewegung steht alles sofort da. */
.js-hero .lockup__fox,
.js-hero .lockup__type,
.js-hero .hero__tag,
.js-hero .hero__cta{ opacity:0; }

@media (max-width:600px){
  .lockup{ gap:.35rem; }
  .lockup__type{ font-size:clamp(2.1rem,11vw,3.2rem); }
  .lockup__fox{ width:clamp(78px,22vw,124px); margin-right:-1.9rem; margin-top:-2.3rem; }
  .hero__tag{ letter-spacing:.22em; }
}
@media (prefers-reduced-motion:reduce){
  .js-hero .lockup__fox,
  .js-hero .lockup__type,
  .js-hero .hero__tag,
  .js-hero .hero__cta{ opacity:1; }
  .hero-stage{ height:100svh; }
}

/* ==========================================================================
   VIDEO MIT STARTKLICK
   Erst der Klick lädt den Player von YouTube. Vorher liegt nur ein Standbild
   von der eigenen Domain hier — deshalb braucht die Seite keinen Banner.
   ========================================================================== */
.video{ position:relative; }
.video__start{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  padding:1.5rem 1rem 3rem;
  background:linear-gradient(to top, rgba(8,7,10,.86), rgba(8,7,10,.30));
  border:0; cursor:pointer; color:var(--fg);
  font:inherit; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  transition:background .3s;
}
.video__start:hover{ background:linear-gradient(to top, rgba(8,7,10,.6), rgba(8,7,10,.05)); }
.video__knopf{
  width:clamp(56px,6vw,74px); height:clamp(56px,6vw,74px);
  display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:#fff;
  transition:transform .3s, background .3s;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.video__knopf svg{ width:42%; height:42%; margin-left:8%; }
.video__start:hover .video__knopf{ transform:scale(1.09); background:var(--accent-hi); }
.video__start:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }

.video__titel{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1rem,1.7vw,1.45rem); letter-spacing:0; text-transform:none;
  color:var(--fg); text-shadow:0 2px 24px rgba(0,0,0,.8);
  padding-inline:1rem; text-align:center; line-height:1.2;
}
.video__wo{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:600; text-align:center;
  padding-inline:1rem;
}
.video__hinweis{
  position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0;
  padding:.55rem .9rem; background:rgba(8,7,10,.82);
  font-size:.68rem; letter-spacing:.04em; color:var(--fg-dim); text-align:center;
  max-width:none;
}
.video__rahmen{
  position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4;
  opacity:0; pointer-events:none;      /* unsichtbar, solange nichts läuft */
}
.video.is-an .video__rahmen{ opacity:1; pointer-events:auto; }
.video.is-an .video__start, .video.is-an .video__hinweis, .video.is-an img{ display:none; }

/* Beim Video keinen Farbschleier über das Standbild legen */
.video.channel__visual::after{ display:none; }
.video.channel__visual img{ filter:none; }

/* ==========================================================================
   SPRACHUMSCHALTER
   ========================================================================== */
.sprache{
  display:flex; align-items:center; gap:.45rem;
  margin-left:auto; margin-right:1.75rem;
}
.sprache__knopf{
  background:none; border:0; padding:.3rem .15rem; cursor:pointer;
  font:inherit; font-size:.72rem; letter-spacing:.18em; font-weight:700;
  color:var(--fg-dim); transition:color .2s;
  position:relative;
}
.sprache__knopf:hover{ color:var(--fg); }
.sprache__knopf.is-aktiv{ color:var(--fg); }
.sprache__knopf.is-aktiv::after{
  content:""; position:absolute; left:.15rem; right:.15rem; bottom:0;
  height:1px; background:var(--accent);
}
.sprache__knopf:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.sprache__strich{ color:var(--fg-dim); font-size:.72rem; opacity:.5; }

@media (max-width:900px){
  /* neben dem Menüknopf, nicht im ausklappbaren Menü — so ist die Sprache
     immer erreichbar, ohne das Menü zu öffnen */
  .sprache{ margin-right:.6rem; }
}