/* =========================================================
   Wind im Gesicht - Stylesheet
   Alle Schriften werden lokal geladen. Keine externen Dienste.
   ========================================================= */

/* ---------- Schriften ---------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Marken ---------- */

:root {
  --nacht:    #101A24;
  --nacht-2:  #1E2D3D;
  --papier:   #FCFBF9;
  --stein:    #E7E4DD;
  --stahl:    #5A6775;
  --ampel:    #F0B429;
  --ampel-tief: #9A6E06;

  --schrift-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --mass: 34rem;          /* Lesebreite */
  --rand: 1.5rem;
  --bahn: 68rem;          /* Maximale Inhaltsbreite */
}

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

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

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--nacht);
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 600; }

p { margin: 0 0 1.15em; max-width: var(--mass); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

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

img, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--stein);
  margin: 3rem 0;
}

/* ---------- Layout ---------- */

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: clamp(3.5rem, 8vw, 6rem); }
.abschnitt--eng { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.abschnitt--stein { background: var(--stein); }
.abschnitt--nacht { background: var(--nacht); color: var(--papier); }

.springen {
  position: absolute;
  left: -9999px;
}
.springen:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  background: var(--ampel); color: var(--nacht);
  padding: .7rem 1.1rem; border-radius: 2px;
  font-family: var(--schrift-display); font-weight: 600;
}

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

.kopf {
  background: var(--nacht);
  color: var(--papier);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.wortmarke {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--papier);
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
}
/* Solange der Spendenlink noch nicht eingetragen ist, sagt der Knopf das
   selbst. Sobald die echte Adresse im href steht, verschwindet der Zusatz
   von allein. */
a[href="#SPENDENLINK"]::after {
  content: " (Link fehlt noch)";
  font-weight: 400;
  font-size: .875em;
}

.navi ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0; padding: 0;
}
.navi a {
  font-family: var(--schrift-display);
  font-size: .95rem;
  font-weight: 500;
  color: var(--papier);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.navi a:hover { border-bottom-color: rgba(252,251,249,.45); }
.navi a[aria-current="page"] { border-bottom-color: var(--ampel); }

.navi__schalter {
  display: none;
  background: none;
  border: 1px solid rgba(252,251,249,.35);
  color: var(--papier);
  font-family: var(--schrift-display);
  font-size: .95rem;
  font-weight: 500;
  padding: .5rem .85rem;
  border-radius: 2px;
  cursor: pointer;
}

@media (max-width: 52rem) {
  .navi__schalter { display: block; }
  .navi {
    display: none;
    width: 100%;
    padding-bottom: 1.25rem;
  }
  .navi.ist-offen { display: block; }
  .kopf__innen { flex-wrap: wrap; padding-block: .9rem; }
  .navi ul { flex-direction: column; gap: 0; }
  .navi li + li { border-top: 1px solid rgba(252,251,249,.14); }
  .navi a { display: block; padding: .75rem 0; border-bottom: 0; }
  .navi a[aria-current="page"] { color: var(--ampel); }
}

/* ---------- Kopfbereich Startseite ---------- */

.bugwelle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nacht);
  color: var(--papier);
  padding-block: clamp(3.5rem, 11vw, 7.5rem) 0;
}

/* Der Film liegt hinter dem Text und wird kräftig abgedunkelt. Die Schrift
   bleibt das Hauptmotiv, das Bild ist nur Stimmung. */
.bugwelle__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bugwelle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(16,26,36,.97) 0%,
      rgba(16,26,36,.90) 40%,
      rgba(16,26,36,.60) 100%),
    linear-gradient(180deg,
      rgba(16,26,36,.85) 0%,
      rgba(16,26,36,.35) 45%,
      rgba(16,26,36,.90) 100%);
}

/* Der freigestellte Helm liegt als eigene Ebene über dem Film. Weil er
   ein HTML-Element ist und kein eingebranntes Pixel, kann er je nach
   Seitenverhältnis woanders sitzen. Genau das löst das Problem, dass
   derselbe Film hochkant und quer funktionieren muss. */
.bugwelle__helm {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: clamp(14rem, 34vw, 30rem);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

/* Querformat: der Helm steht rechts, angeschnitten am Bildrand. Das
   Anschneiden ist Absicht, sonst wirkt er wie ein aufgeklebter Sticker. */
@media (min-aspect-ratio: 1/1) {
  .bugwelle__helm {
    width: clamp(13rem, 26vw, 27rem);
    right: -3rem;
    top: 54%;
    transform: translateY(-50%);
  }
}

/* Hochformat: hier ist kein Platz für ihn als lesbares Zeichen, die
   Spalte ist voll. Also wird er groß, weit nach rechts geschoben und
   stark zurückgenommen. Dann wirkt er als Struktur im Hintergrund
   statt als Logo, das mit der Schrift konkurriert. Lesbar steht er
   ohnehin im Fußbereich jeder Seite. */
@media (max-aspect-ratio: 1/1) {
  .bugwelle__helm {
    width: 150%;
    right: -52%;
    top: 46%;
    transform: translateY(-50%);
    opacity: .26;
    filter: none;
  }
}

/* Der Helm kommt nach Titel und Linie ins Bild, von rechts. */
.bewegung-an .bugwelle__helm {
  animation: helm-herein 1.1s .5s cubic-bezier(.16,.84,.24,1) both;
}
@keyframes helm-herein {
  from { opacity: 0; transform: translate(14%, -50%) scale(.95); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
@media (max-aspect-ratio: 1/1) {
  @keyframes helm-herein {
    from { opacity: 0; transform: translate(10%, -50%); }
    to   { opacity: .26; transform: translateY(-50%); }
  }
}

/* Wer Bewegung im Browser abbestellt hat, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .bugwelle__film { display: none; }
  .bugwelle {
    background-image: url("hero.jpg");
    background-size: cover;
    background-position: center;
  }
  .bewegung-an .bugwelle__helm { animation: none; }
}

.bugwelle h1 {
  font-size: clamp(2.6rem, 11vw, 7rem);
  letter-spacing: -0.03em;
  line-height: .95;
  margin: 0;
  max-width: 14ch;
}

.bugwelle__horizont {
  height: 2px;
  background: linear-gradient(90deg, var(--ampel) 0%, var(--ampel) 62%, rgba(240,180,41,0) 100%);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.bugwelle__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: end;
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(3rem, 7vw, 4.5rem);
}

.bugwelle__satz {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  max-width: 32rem;
  margin: 0;
  color: #D7DEE6;
}

@media (max-width: 46rem) {
  .bugwelle__fuss { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Kopfbereich Unterseiten ---------- */

.seitenkopf {
  background: var(--nacht);
  color: var(--papier);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: 2px solid var(--ampel);
}
.seitenkopf h1 { margin-bottom: .35em; }
.seitenkopf p {
  color: #D7DEE6;
  font-size: 1.1875rem;
  margin: 0;
  max-width: 36rem;
}

/* ---------- Schaltflächen ---------- */

.knopf {
  display: inline-block;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.knopf--haupt {
  background: var(--ampel);
  color: var(--nacht);
  border-color: var(--ampel);
}
.knopf--haupt:hover { background: #FFC845; border-color: #FFC845; }

.knopf--rand {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.knopf--rand:hover { background: rgba(127,127,127,.12); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.75rem;
}

/* ---------- Textblöcke ---------- */

.prosa > * + * { margin-top: 1.15em; }
.prosa h2 { margin-top: 2.5em; }
.prosa h3 { margin-top: 2em; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { max-width: var(--mass); padding-left: 1.3em; }
.prosa li { margin-bottom: .5em; }
.prosa li:last-child { margin-bottom: 0; }

.vorlauf {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  max-width: 36rem;
}

.klein { font-size: .9375rem; color: var(--stahl); }
.abschnitt--nacht .klein { color: #A9B6C2; }

/* ---------- Zweispalter ---------- */

.zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 52rem) {
  .zweispalt { grid-template-columns: 1fr; }
}

/* ---------- Ablauf als echte Abfolge ---------- */

.ablauf {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: schritt;
  border-top: 1px solid var(--stein);
  max-width: 48rem;
}
.abschnitt--stein .ablauf { border-top-color: #CFCABF; }

.ablauf li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--stein);
  margin: 0;
}
.abschnitt--stein .ablauf li { border-bottom-color: #CFCABF; }

.ablauf li::before {
  content: counter(schritt);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ampel-tief);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ablauf h3 { margin-bottom: .3em; }
.ablauf p { margin: 0; max-width: 40rem; }

@media (max-width: 34rem) {
  .ablauf li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .9rem; }
  .ablauf li::before { font-size: 1.2rem; }
}

/* ---------- Frage und Antwort ---------- */

.faq { max-width: 48rem; margin-top: 2.5rem; }
.faq > div {
  border-top: 1px solid var(--stein);
  padding-block: 1.5rem;
}
.faq > div:last-child { border-bottom: 1px solid var(--stein); }
.faq h3 { margin-bottom: .45em; }
.faq p { max-width: 42rem; }

/* ---------- Kennzahl ---------- */

.stand {
  border-left: 3px solid var(--ampel);
  padding-left: 1.5rem;
  max-width: 28rem;
}
.stand__zahl {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stand__text { margin: .6rem 0 0; font-size: 1rem; color: var(--stahl); }
.abschnitt--nacht .stand__text { color: #A9B6C2; }

/* ---------- Zitat ---------- */

.zitat {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.4;
  font-style: italic;
  max-width: 34rem;
  margin: 0;
  border: 0;
  padding: 0;
}
.zitat footer {
  font-family: var(--schrift-display);
  font-style: normal;
  font-size: .95rem;
  font-weight: 500;
  margin-top: 1.25rem;
  color: var(--stahl);
}
.abschnitt--nacht .zitat footer { color: #A9B6C2; }

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

.formular { max-width: 36rem; margin-top: 2rem; }

.feld { margin-bottom: 1.5rem; }
.feld label {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .45rem;
}
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
  width: 100%;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--nacht);
  background: #fff;
  border: 1px solid #B9B5AC;
  border-radius: 2px;
  padding: .7rem .85rem;
}
.feld input:focus, .feld textarea:focus {
  border-color: var(--nacht);
  outline: 3px solid var(--ampel);
  outline-offset: 1px;
}
.feld textarea { min-height: 11rem; resize: vertical; }
.feld .hinweis { font-size: .875rem; color: var(--stahl); margin: .4rem 0 0; }

.feld--haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.feld--haken input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; }
.feld--haken label { font-family: var(--schrift-text); font-weight: 400; font-size: 1rem; margin: 0; }

.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.meldung {
  border-left: 3px solid;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  max-width: 36rem;
  font-size: 1rem;
}
.meldung p { margin: 0; max-width: none; }
.meldung--fehler { border-color: #B3261E; background: #FBEAE8; }
.meldung--gut { border-color: #1F6B3B; background: #E7F3EB; }

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

.fuss {
  background: var(--nacht);
  color: #C3CDD6;
  padding-block: 3.5rem 2.5rem;
  font-size: 1rem;
}
.fuss a { color: var(--papier); }
.fuss h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--papier);
  margin-bottom: .9rem;
  letter-spacing: 0;
}
.fuss__logo {
  width: 190px;
  height: auto;
  margin-bottom: 1.1rem;
}
.fuss__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .55rem; }
.fuss p { max-width: 24rem; }
.fuss__schluss {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(252,251,249,.16);
  font-size: .9375rem;
  color: #93A1AE;
}

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

/* Einstieg: einmal, beim Laden, in einer Abfolge. Danach ist Ruhe. */
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes horizont-ziehen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.bewegung-an .bugwelle h1 {
  animation: auftauchen .85s cubic-bezier(.2,.7,.2,1) both;
}
.bewegung-an .bugwelle__horizont {
  transform-origin: left center;
  animation: horizont-ziehen 1.05s .3s cubic-bezier(.2,.7,.2,1) both;
}
.bewegung-an .bugwelle__satz {
  animation: auftauchen .8s .55s cubic-bezier(.2,.7,.2,1) both;
}
.bewegung-an .bugwelle__fuss .knopfreihe {
  animation: auftauchen .8s .7s cubic-bezier(.2,.7,.2,1) both;
}

/* Beim Lesen: Inhalte kommen herein, wenn sie an der Reihe sind. */
.zeigt-sich {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.zeigt-sich.ist-da {
  opacity: 1;
  transform: none;
}

/* Der Hauptknopf bekommt beim Überfahren etwas Schub, sonst passiert nichts. */
.knopf--haupt:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .bewegung-an .bugwelle h1,
  .bewegung-an .bugwelle__horizont,
  .bewegung-an .bugwelle__satz,
  .bewegung-an .bugwelle__fuss .knopfreihe { animation: none; }
  .zeigt-sich { opacity: 1; transform: none; transition: none; }
  .knopf--haupt:hover { transform: none; }
}

/* ---------- Entwurfszustand ---------- */

/* Das Band oben erscheint nur, solange <body class="ist-entwurf"> gesetzt
   ist. Vor der Veröffentlichung diese eine Klasse in allen Dateien
   entfernen, dann verschwinden Band und Platzhaltermarkierung. */
.entwurfsband { display: none; }

.ist-entwurf .entwurfsband {
  display: block;
  margin: 0;
  max-width: none;
  background: #B3261E;
  color: #fff;
  font-family: var(--schrift-display);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: .7rem 1rem;
}

/* Erfundener Beispieltext. Steht an der richtigen Stelle, sagt aber nicht
   die Wahrheit. Im Entwurf gepunktet unterstrichen, sonst unauffällig. */
.ist-entwurf .platzhalter {
  border-bottom: 1px dotted rgba(240,180,41,.75);
}

/* Angaben, die niemand erfinden darf. Die bleiben immer markiert, auch
   wenn die Entwurfsklasse entfernt wurde. Das ist Absicht: Sie sollen
   nicht aus Versehen online gehen. */
.offen {
  background: #FFF0C2;
  color: #6B4B00;
  border-bottom: 2px dotted #C9941A;
  padding: 0 .2em;
  font-style: normal;
}
.abschnitt--nacht .offen, .bugwelle .offen, .seitenkopf .offen {
  background: rgba(240,180,41,.22);
  color: #FFD978;
  border-bottom-color: #C9941A;
}

/* ---------- Lücken, die noch gefüllt werden müssen ---------- */

.luecke {
  background: #FFF0C2;
  color: #6B4B00;
  border-bottom: 2px dotted #C9941A;
  padding: 0 .2em;
  font-style: normal;
}
.abschnitt--nacht .luecke, .bugwelle .luecke, .seitenkopf .luecke {
  background: rgba(240,180,41,.22);
  color: #FFD978;
  border-bottom-color: #C9941A;
}