/* RELIFE — gemeinsames Aussehen der Streckenseiten hinter der Landeseite:
   /bewerbung, /danke, /vorab.

   Warum eine Datei: die drei Seiten trugen bis 06.09.2026 je eine eigene Kopie
   derselben Tokens und derselben Grundformen. Genau daran ist die Vorschau schon
   einmal vom Produkt weggelaufen. Tokens kommen aus /tokens.css, die Formen hier.
   index.html bleibt bewusst voll inline — dort saesse ein zusaetzlicher Request
   auf dem LCP-Pfad der Anzeigenseite.

   Seitenspezifisches (Formularfelder, Schrittlogik) bleibt in der jeweiligen Datei. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-color:var(--papier);
  background-image:
    radial-gradient(70% 46% at 92% 0%, rgba(176,141,87,.09) 0%, rgba(176,141,87,0) 60%),
    linear-gradient(180deg, var(--papier) 0%, var(--wand) 100%);
  /* KEIN background-attachment:fixed — das ruckelt auf dem Handy beim Scrollen
     und zieht im Vollschuss eine sichtbare Kante an der Viewport-Grenze. */
  min-height:100dvh}
img{display:block;max-width:100%}

.wrap{max-width:860px;margin:0 auto;
  padding-left:max(var(--padx),env(safe-area-inset-left));
  padding-right:max(var(--padx),env(safe-area-inset-right))}
/* Merke: .oben, .fuss und <form> tragen .wrap MIT. Wer dort die Kurzform
   `padding:` benutzt, loescht den Seitenrand wieder (Fehler vom 04.09.).
   Immer padding-top und padding-bottom einzeln setzen. */

.kopf{border-bottom:1px solid var(--linie);padding-top:16px;padding-bottom:16px;
      background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kopf img{height:22px;width:auto}

h1,h2{font-family:var(--serif);font-weight:700;color:var(--tinte);letter-spacing:-.005em;
      text-wrap:balance}
h1{font-size:clamp(27px,4.2vw,38px);line-height:1.14;margin-top:12px}
.oben{padding-top:34px;padding-bottom:6px}
.marke{display:block;width:40px;height:2px;background:var(--gold);margin-bottom:14px}
.oben p{color:var(--text2);font-size:17px;margin-top:14px;max-width:38em}

/* --- Knopf: Fassung B, von Michele am 06.09.2026 gewaehlt --------------
   Gleiche Farbe wie bisher, aber verarbeitet: Verlauf, Lichtkante oben,
   Schatten zur Tinte eingefaerbt (nicht blau, das waere lauter statt
   wertiger) und ein echter Druckpunkt. Identisch mit .knopf auf index.html. */
.knopf{display:inline-block;text-align:center;color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:16px;line-height:20px;
  padding:18px 28px;border:0;border-radius:10px;cursor:pointer;letter-spacing:.1px;
  background-color:var(--cta);
  background-image:linear-gradient(180deg,#3AA0EF 0%,var(--cta) 52%,#1873C6 100%);
  box-shadow:0 1px 2px rgba(14,17,22,.14),0 14px 26px -12px rgba(14,17,22,.42),
             inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .35s var(--kurve),box-shadow .35s var(--kurve)}
.knopf:hover,.knopf:focus-visible{transform:translateY(-2px);outline:none;color:#fff;
  box-shadow:0 2px 3px rgba(14,17,22,.16),0 20px 34px -14px rgba(14,17,22,.5),
             inset 0 1px 0 rgba(255,255,255,.32)}
.knopf:focus-visible{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--tinte),
             0 20px 34px -14px rgba(14,17,22,.5)}
.knopf:active{transform:translateY(0);
  box-shadow:0 1px 2px rgba(14,17,22,.22),inset 0 2px 4px rgba(0,0,0,.22)}
.knopf[disabled]{opacity:.5;cursor:default;transform:none;
  box-shadow:0 1px 2px rgba(14,17,22,.12)}
.reihe-cta{margin-top:32px}
.klein{font-size:14px;line-height:1.4;color:var(--text2);margin-top:12px}

/* --- Filmplatz --------------------------------------------------------
   Solange keine Wistia-ID hinterlegt ist, steht hier KEIN falscher Player.
   Ein Standbild mit Play-Knopf, hinter dem nichts liegt, waere gelogen.
   Stattdessen eine ruhige Tafel, die sagt, was kommt. Sobald die ID da ist,
   ersetzt das Skript der Seite den Inhalt durch den echten Einbau. */
/* Grundfarbe getrennt vom Verlauf. Ohne die Farbe stuende weisse Schrift auf dem
   weissen Elternteil, sobald der Verlauf nicht malt — dieselbe Falle wie bei
   .bildband (04.09.) und beim Rissband (06.09.). Dritter Treffer, jetzt gemerkt. */
.film{margin-top:28px;position:relative;overflow:hidden;border-radius:14px;
  background-color:var(--tinte);
  background-image:linear-gradient(158deg,#1B222C 0%,var(--tinte) 58%,#080B0F 100%);
  box-shadow:0 2px 4px rgba(14,17,22,.10),0 28px 56px -24px rgba(14,17,22,.5)}
.film::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(176,141,87,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.film.hat-film{aspect-ratio:16/9}
.film .wistia_embed{position:absolute;inset:0;width:100%!important;height:100%!important}
.film-platz{display:grid;gap:10px;padding:34px 28px;text-align:left;
  color:var(--t-text2);font-size:15px;line-height:1.55}
.film-platz b{display:block;font-family:var(--serif);font-size:20px;line-height:1.3;
  color:#fff;font-weight:700}
.film-platz .strich{display:block;width:38px;height:2px;background:var(--gold)}
@media(min-width:768px){ .film-platz{padding:40px 36px} }

/* OHNE Film ist der dunkle Rahmen eine schwarze Platte auf einer hellen Seite
   (Michele 13.09.2026: "dieser schwarze block da oben sieht katastrophe aus").
   Der Rahmen ist als Video-Fassung gedacht — er traegt sich nur, wenn wirklich
   ein Film drin liegt. Solange keiner hinterlegt ist, tritt der Block zurueck
   und spricht dieselbe Sprache wie .hinweis: kein Fuellton, Goldlinie links.
   Sobald das JS .hat-film setzt, greift automatisch wieder der dunkle Rahmen. */
.film:not(.hat-film){background:none;background-image:none;border-radius:0;
  box-shadow:none;border-left:2px solid var(--gold);margin-top:30px}
.film:not(.hat-film)::after{display:none}
.film:not(.hat-film) .film-platz{padding:2px 0 2px 16px;color:var(--text2);
  font-size:15.5px;line-height:1.6;max-width:44em}
.film:not(.hat-film) .film-platz b{color:var(--tinte);font-size:19px}
.film:not(.hat-film) .film-platz .strich{display:none}
@media(min-width:768px){ .film:not(.hat-film) .film-platz{padding:2px 0 2px 16px} }

/* --- Schrittliste (danke + vorab) -------------------------------------- */
.was{list-style:none;margin-top:32px}
.was li{display:grid;grid-template-columns:44px 1fr;gap:0 16px;
  padding-top:22px;padding-bottom:22px;border-top:1px solid var(--linie);
  align-items:start;position:relative}
.was li::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;
  background:var(--gold)}
.was .nr{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:17px;color:var(--gold);
  border:1px solid rgba(176,141,87,.45);
  background:linear-gradient(158deg,#232B36 0%,var(--tinte) 100%);
  box-shadow:0 1px 2px rgba(14,17,22,.10),0 10px 18px -10px rgba(14,17,22,.45),
             inset 0 1px 0 rgba(255,255,255,.12)}
.was b{display:block;font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--tinte)}
.was span{display:block;font-size:15.5px;color:var(--text2);margin-top:6px;max-width:44em}

.hinweis{margin-top:30px;padding-left:16px;border-left:2px solid var(--gold);
  font-size:15.5px;line-height:1.6;color:var(--text2);max-width:44em}
.hinweis b{color:var(--tinte)}

.fuss{border-top:1px solid var(--linie);margin-top:44px;padding-top:22px;
      padding-bottom:34px;font-size:12.5px;color:var(--muted)}
/* Trefferflaeche auf 44 px bringen, ohne die Zeile auseinanderzuziehen:
   Innenabstand rein, gleicher Wert als negativer Aussenabstand wieder raus. */
.fuss a{color:var(--text2);display:inline-block;padding:15px 4px;margin:-15px 0}

@media(min-width:768px){ .oben{padding-top:48px} }
@media(prefers-reduced-motion:reduce){ .knopf{transition:none} }
@media(prefers-reduced-transparency:reduce){
  .kopf{background:var(--papier);-webkit-backdrop-filter:none;backdrop-filter:none}
}