/* ООО «Герой» — geroy.ooo
   Eine Seite, dunkler Grund, Bewegung im Kopfbereich.
   Keine externen Ressourcen: Schriften liegen unter /assets/fonts/. */

:root {
  --grund:     #05060a;
  --flaeche:   #0d0f17;
  --flaeche-2: #141724;
  --linie:     #232739;
  --text:      #eef0f6;
  --leise:     #8b90a3;
  --rot:       #ff3d2e;
  --violett:   #a855f7;
  --blau:      #4d7cff;

  --spektrum: linear-gradient(96deg, #ff3d2e 0%, #a855f7 52%, #4d7cff 100%);

  --display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --lauf:    "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --breite: 1160px;
  --rund: 14px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--lauf);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); }

.huelle { width: min(var(--breite), 100% - 2.8rem); margin-inline: auto; }

/* ---------- Auftritt beim Scrollen ---------- */

[data-auftritt] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-auftritt].sichtbar { opacity: 1; transform: none; }

/* ---------- Kopf ---------- */

.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.kopf--fest {
  background: rgba(5,6,10,.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linie);
}
.kopf__innen { display: flex; align-items: center; gap: 1.4rem; min-height: 72px; }

.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marke__zeichen { width: 40px; height: auto; flex: none; }
.marke__text {
  font-family: var(--display); font-weight: 900; font-size: 1rem;
  letter-spacing: -.02em; text-transform: uppercase;
}

.navi { display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; }
.navi a {
  text-decoration: none; color: var(--leise); font-weight: 500; font-size: .92rem;
  padding: .5rem .8rem; border-radius: 999px; transition: color .18s ease, background-color .18s ease;
}
.navi a:hover { color: var(--text); background: rgba(255,255,255,.06); }

.navi__schalter {
  display: none; background: var(--text); color: var(--grund); border: 0;
  font: inherit; font-weight: 600; font-size: .88rem;
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
}

@media (max-width: 860px) {
  .navi__schalter { display: block; }
  .navi {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(5,6,10,.97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linie);
    flex-direction: column; align-items: stretch; padding: .6rem 1.4rem 1.1rem;
  }
  .kopf.offen .navi { display: flex; }
  .navi a { padding: .8rem .8rem; font-size: 1.02rem; }
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; border: 0; cursor: pointer;
  font-family: var(--lauf); font-weight: 600; font-size: .96rem;
  padding: .9rem 1.7rem; border-radius: 999px;
  background: var(--text); color: var(--grund);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.knopf:hover { color: var(--grund); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,255,255,.12); }
.knopf:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }

.knopf--rand {
  background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.knopf--rand:hover { color: var(--text); box-shadow: inset 0 0 0 1px #3b415a; }

/* ---------- Kopfbereich mit Lichtfeld ---------- */

.held { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
#lichtfeld { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Grund abdunkeln, damit die Schrift immer trägt */
.held::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(72% 58% at 22% 44%, rgba(5,6,10,.94) 0%, rgba(5,6,10,.6) 46%, transparent 78%),
    linear-gradient(to bottom, rgba(5,6,10,.75) 0%, transparent 26%, rgba(5,6,10,.9) 100%);
}
/* Kein width hier — sonst ueberschreibt es die Breite aus .huelle,
   die dieselbe Spezifitaet hat und frueher steht. */
.held__innen { position: relative; z-index: 2; padding: 7.5rem 0 5rem; }

.held__marke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); margin-bottom: 1.7rem;
}
.held__marke::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--spektrum);
}

.held h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.72rem, 7.4vw, 4.3rem);
  line-height: 1.02; letter-spacing: -.045em;
  margin: 0 0 1.5rem; max-width: 17ch; text-wrap: balance;
  overflow-wrap: break-word;
}
.held h1 em {
  font-style: normal;
  background: var(--spektrum);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .held h1 em { color: var(--rot); }
}

.held__text { font-size: clamp(1rem, 1.7vw, 1.16rem); color: var(--leise); max-width: 46ch; margin: 0 0 2.4rem; }
.held__knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; }

.held__fuss {
  position: absolute; left: 0; right: 0; bottom: 1.6rem; z-index: 2;
  font-size: .78rem; color: var(--leise); letter-spacing: .1em; text-transform: uppercase;
}
.held__fuss .huelle { display: flex; gap: 1rem 2.2rem; flex-wrap: wrap; }

/* Schmale Schirme: die Zeile umbricht auf drei Zeilen und wuerde sonst
   ueber den Knoepfen liegen. Deshalb dort in den normalen Textfluss. */
@media (max-width: 860px) {
  /* display:block ist hier entscheidend — sonst wird die statisch gestellte
     Schlagwortzeile zum zweiten Flex-Element und quetscht die Ueberschrift. */
  .held { display: block; min-height: 0; }
  .held__innen { padding: 6.5rem 0 2.5rem; }
  .held__fuss { position: static; margin-top: 2.2rem; padding-bottom: 3rem; }
  .held__fuss .huelle { gap: .55rem 1.6rem; }
}

/* ---------- Abschnitte ---------- */

.teil { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; }
.teil--linie { border-top: 1px solid var(--linie); }

.hut {
  display: inline-block; font-size: .73rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--leise); margin-bottom: 1.1rem;
}
.hut b { font-weight: 600; background: var(--spektrum);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.65rem, 3.7vw, 2.6rem); line-height: 1.1;
  letter-spacing: -.04em; margin: 0 0 1.1rem; text-wrap: balance;
}
h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; margin: 0 0 .55rem; letter-spacing: -.01em; }

.blei { font-size: 1.05rem; color: var(--leise); margin: 0; max-width: 60ch; }
.titel { margin-bottom: 3rem; }

/* ---------- Karten ---------- */

.gitter { display: grid; gap: 1.1rem; }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.karte {
  position: relative; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.9rem 1.8rem;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
  overflow: hidden;
}
.karte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--spektrum); opacity: 0; transition: opacity .25s ease;
}
.karte:hover { transform: translateY(-4px); border-color: #303653; background: var(--flaeche-2); }
.karte:hover::before { opacity: 1; }
.karte p { color: var(--leise); margin: 0; }

/* ---------- Zahlen ---------- */

.zahlen { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.zahl b {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 1;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin-bottom: .5rem;
  background: var(--spektrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zahl span { font-size: .92rem; color: var(--leise); }

/* ---------- Formular ---------- */

.formular { display: grid; gap: 1rem; }
.feldpaar { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.feld { display: flex; flex-direction: column; gap: .45rem; }
.feld label { font-size: .84rem; font-weight: 500; color: var(--leise); }
.feld input, .feld textarea {
  font: inherit; font-size: .98rem; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 11px; padding: .82rem 1rem; width: 100%;
  transition: border-color .18s ease, background-color .18s ease;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld textarea:focus {
  outline: none; border-color: #49507a; background: var(--flaeche-2);
}
.feld input::placeholder, .feld textarea::placeholder { color: #5b6076; }

/* Honigtopf — für Menschen unsichtbar, für Bots ein Köder */
.honigtopf {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.zustimmung { display: flex; gap: .75rem; align-items: flex-start; font-size: .89rem; color: var(--leise); }
.zustimmung input { margin-top: .3rem; accent-color: var(--rot); width: 17px; height: 17px; flex: none; }
.zustimmung a { color: var(--text); text-underline-offset: 3px; }

.formular__meldung { font-size: .92rem; margin: 0; min-height: 1.4em; }
.formular__meldung--gut { color: #4ade80; }
.formular__meldung--fehler { color: #ff6b5e; }
.formular__meldung--still { color: transparent; }

/* ---------- Rechtstexte ---------- */

.dokument { max-width: 44rem; padding-top: 7rem; }
.dokument h1 { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem,3.6vw,2.3rem);
  line-height: 1.12; letter-spacing: -.035em; margin: 0 0 1rem; text-wrap: balance; }
.dokument h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin-top: 2.8rem; }
.dokument h3 { margin-top: 1.9rem; }
.dokument p, .dokument li { color: #c2c6d4; }
.dokument ol, .dokument ul { padding-left: 1.25rem; }
.dokument li { margin-bottom: .5rem; }
.dokument table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .94rem; }
.dokument th, .dokument td { border-bottom: 1px solid var(--linie); padding: .75rem .85rem; text-align: left; vertical-align: top; }
.dokument th { font-weight: 600; color: var(--leise); width: 36%; }

.hinweis {
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 2px solid var(--rot);
  border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.7rem 0;
}
.hinweis p:last-child { margin-bottom: 0; }

.rollbar { overflow-x: auto; }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); padding: 3.5rem 0 2rem; font-size: .93rem; color: var(--leise); }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss__gitter { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fuss__zeichen { width: 42px; margin-bottom: 1rem; }
.fuss h4 { color: var(--text); font-size: .73rem; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 .9rem; font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss__unten {
  margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; justify-content: space-between; font-size: .84rem;
}

.sprung { position: absolute; left: -9999px; background: var(--text); color: var(--grund);
  padding: .8rem 1.3rem; border-radius: 999px; font-weight: 600; z-index: 100; }
.sprung:focus { left: 1rem; top: .7rem; position: fixed; }

:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }