/* GTX|001|Funnel|Quiz — Landingpage
   Entwurfsbreiten: 393 px mobil, 1440 px Desktop. */

:root {
  --schwarz: #060606;
  --schwarz-2: #0e0e0e;
  --schwarz-3: #151514;
  --linie: #2a2a28;
  --karten-linie: #3a3b36;
  --weiss: #ffffff;
  --grau: #cfcfcb;
  --gold: #c69d64;
  --gold-hell: #e8cc9d;
  --gold-matt: #8a6f57;

  /* Zonen der Struktur-Skala, von "passt" bis "arbeitet gegen dich".
     Hier drehen, wenn das Design-Team die Skala anders faerben will. */
  --zone-passt: #8e9b81;
  --zone-luecken: #bd9a66;
  --zone-potenzial: #ebbc7c;
  --zone-gegen: #dc7145;
  --gruen: #0a2a22;

  --display: "Playfair Display", "Times New Roman", serif;
  --text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rand: 20px;
  --bahn: 1280px;
}

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

/* Sonst gewinnt eine Klasse mit display gegen das hidden-Attribut. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Zwei weiche Lichter hinter dem Hero, warm links und gruen rechts. Gleicher
   Aufbau wie auf GTX|002, sonst steht der Hero auf reinem Schwarz. Liegt am
   body, nicht an .hero: die Sektionen darunter bringen eigene Hintergruende
   mit und decken das Licht ab der Portraetsektion ohnehin zu. Nur die LP,
   Quiz und Ergebnis haben ihre eigene Flaeche. */
body[data-seite="lp"] {
  background-image:
    radial-gradient(30% 26% at 11% 44%, rgba(96, 90, 72, 0.50) 0%, transparent 72%),
    radial-gradient(27% 24% at 73% 43%, rgba(31, 86, 65, 0.42) 0%, transparent 74%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1200px, 100% 1200px;
  background-position: top center, top center;
}

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

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

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

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

.kopf {
  padding: 40px var(--rand) 0;
  text-align: center;
}

.wortmarke {
  width: clamp(136px, 13vw, 186px);
  height: auto;
  margin-inline: auto;
}

.wortmarke--fuss {
  width: clamp(150px, 14vw, 200px);
  margin-inline: 0;
}

/* ------------------------------------------------------------------ Hero */

.hero {
  padding-top: clamp(40px, 4.1vw, 59px);
  text-align: center;
}

.augenbraue {
  margin: 0 auto 16px;
  max-width: 900px;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-matt);
}

.hero__titel {
  margin: 0 auto;
  max-width: 1300px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(29px, 4.2vw, 60px);
  line-height: 1.17;
  letter-spacing: -0.01em;
}

.hero__titel em {
  font-style: normal;
  color: var(--gold);
}

.hero__text {
  margin: clamp(16px, 1.6vw, 20px) auto 0;
  max-width: 800px;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--weiss);
}

/* ------------------------------------------------------- CTA und Belege */

.cta {
  margin: clamp(26px, 4.4vw, 64px) 0 0;
}

.cta--mitte {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 46px);
}

/* Goldbarren, Werte eins zu eins von goldmantax.de, dort Klasse .button.
   Der Effekt kommt nicht aus dem Verlauf, sondern aus den beiden inneren
   Schatten: ein dunkler von unten und eine helle Kante darueber. Faellt einer
   davon weg, bleibt eine flache goldene Flaeche. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  width: min(100%, 406px);
  min-height: 64px;
  padding: 0 24px;
  border: 1px solid rgba(193, 141, 43, 0.9);
  border-radius: 8px;
  background: linear-gradient(160deg, #c18d2b, #e2a233, #fef1a2, #e2a233, #c18d2b);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16),
    0 2px 5px rgba(110, 80, 20, 0.3),
    0 3px 6px rgba(190, 160, 128, 0.4),
    inset 0 -2px 5px 1px rgba(139, 66, 8, 0.75),
    inset 0 -1px 1px 3px #fae385;
  color: #805a14;
  text-shadow: 0 1px 1px rgba(250, 227, 133, 0.95);
  font-family: inherit;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.knopf__zusatz {
  font-weight: 400;
}

.knopf:hover { color: rgba(128, 90, 20, 0.9); transform: translateY(-3px); }
/* Ohne das bliebe der Knopf beim Druecken oben, weil :hover mitgilt. */
.knopf:active { transform: translateY(0); }
.knopf:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

.belege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 16px;
  font-size: clamp(13px, 1.15vw, 16px);
  color: var(--grau);
}

.belege li { display: inline-flex; align-items: center; gap: 9px; }

.haken {
  flex: none;
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}

.haken rect { stroke-width: 1.6; }
.haken path { stroke-linecap: square; }

/* ----------------------------------------------------------- Videoflaeche */

/* Der Entwurf zeichnet die Flaeche mit 886 x 431, das Video ist aber 16:9.
   Mit dem Entwurfsmass haette der Player schwarze Balken links und rechts,
   deshalb das echte Verhaeltnis. */
.video {
  position: relative;
  width: min(100% - 2 * var(--rand), 886px);
  margin: clamp(36px, 4.4vw, 59px) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  /* Ohne Standbild eine dunkle Flaeche in der Tonart der uebrigen Karten, nicht
     das helle Grau aus dem Entwurf: das war als Platzhalter gedacht und sieht
     neben einer Seite mit Standbild aus wie ein Ladefehler. Mit Standbild deckt
     das Bild die Flaeche ohnehin. */
  background: var(--schwarz-3) center / cover no-repeat;
  border: 1px solid var(--karten-linie);
  display: grid;
  place-items: center;
}

/* Das Standbild ist ein Videoausschnitt, der Knopf muss sich darauf noch
   absetzen. Ein leichter Schleier reicht, das Bild bleibt erkennbar.

   pointer-events: none ist Pflicht: der Schleier liegt ueber der ganzen
   Flaeche, und ohne das schluckt er jeden Klick, der eigentlich dem Player
   gilt. Genau daran liess sich das Video nicht mehr anhalten. */
.video--poster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(6, 6, 6, 0.28);
}

.video--poster .video__knopf { position: relative; }

/* Sobald der Player laeuft, gehoert die Flaeche ihm: kein Schleier, kein
   Standbild mehr darunter. Sonst blitzt das Standbild durch, solange das
   iframe noch leer ist, und man sieht kurz ein fremdes Bild. */
.video--laeuft::before { content: none; }
.video--laeuft { background-image: none; }

/* Sobald der Player drin ist, faellt der graue Grund weg. Sonst blitzt er
   auf, solange Vimeo noch laedt. */
.video--laeuft { background: #000; }

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video__knopf {
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: clamp(48px, 6.8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #f0d9ae 0%, #d9b478 62%, #c69d64 100%);
  box-shadow: 0 0 54px rgba(232, 204, 157, 0.45);
}

.video__knopf svg {
  width: 42%;
  fill: #101010;
}

.video__knopf:hover { transform: scale(1.04); }
.video__knopf:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .video__knopf { transition: transform 0.15s ease; }
}

/* --------------------------------------------------------------- Siegel */

/* Endlos laufendes Band. Zwei gleiche Listen hintereinander, die Bewegung um
   genau eine Listenbreite laesst den Lauf nahtlos wirken. Die Kanten laufen
   weich aus, damit nichts abgeschnitten wirkt. */
.siegel {
  width: min(100% - 2 * var(--rand), 1000px);
  margin: clamp(28px, 3.4vw, 42px) auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.siegel__lauf {
  display: flex;
  width: max-content;
  animation: siegellauf 26s linear infinite;
}

.siegel:hover .siegel__lauf { animation-play-state: paused; }

@keyframes siegellauf {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.siegel__band {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(44px, 5vw, 76px);
  padding-right: clamp(44px, 5vw, 76px);
}

.siegel__stk { display: flex; align-items: center; }

.siegel img {
  width: auto;
  opacity: 0.62;
  filter: grayscale(1);
}

.siegel__stk:nth-child(1) img { height: clamp(28px, 3.1vw, 45px); }
.siegel__stk:nth-child(2) img { height: clamp(33px, 3.7vw, 54px); }
.siegel__stk:nth-child(3) img { height: clamp(30px, 3.3vw, 47px); }
.siegel__stk:nth-child(4) img { height: clamp(30px, 3.3vw, 48px); }

/* Das IHK-Siegel ist aus dem Entwurf geschnitten und traegt dessen Graustufen
   und Deckkraft schon in sich. Ein zweites Mal daempfen wuerde es abdunkeln. */
.siegel__stk:nth-child(5) img {
  height: clamp(26px, 2.8vw, 40px);
  opacity: 1;
  filter: none;
}

/* Platz für das IHK-Siegel, solange die Datei fehlt. */
.siegel__leer { width: clamp(48px, 5.4vw, 78px); }

/* --------------------------------------------------- Für wen ist der Test */

.fuer-wen {
  position: relative;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(28px, 7.8vw, 113px);
  padding-bottom: clamp(10px, 4.5vw, 64px);
  overflow: hidden;
  background:
    linear-gradient(to bottom, var(--schwarz) 0%, rgba(6, 6, 6, 0) 22%, rgba(6, 6, 6, 0) 62%, var(--schwarz) 100%),
    url("/assets/img/bg-fuer-wen.webp") center / cover no-repeat,
    #12100e;
  isolation: isolate;
}

/* Zwei Spalten statt Text links und freischwebendem Portrait rechts. Vorher
   war die Glasflaeche 800 px breit, der Text darin aber auf 500 px gedeckelt,
   damit er nicht unter das Portrait laeuft. Das liess 254 px tote Flaeche im
   Kasten stehen. Das Raster haelt die beiden auseinander, der Deckel auf dem
   Text kann weg und das Portrait darf so gross werden, wie die Spalte ist. */
.fuer-wen__inhalt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 450px);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}

.fuer-wen__spalte { min-width: 0; }

.glas {
  margin-left: 0;
  padding: clamp(24px, 3.2vw, 45px) clamp(20px, 3.2vw, 45px) clamp(26px, 3.9vw, 55px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(10, 12, 11, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Der Freisteller rechts ist 58 % breit und beginnt sichtbar ab etwa 15 % seiner
   eigenen Breite (gemessen am Alphakanal). Der Text muss davor enden, sonst
   laeuft er auf Schulter und Anzug. Mit der kurzen Copy fiel das nicht auf, mit
   drei Absaetzen schon. */
.glas p {
  /* Nur noch Lesbarkeit, nicht mehr Kollisionsschutz. Das Raster haelt das
     Portrait auf Abstand. */
  max-width: 58ch;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--weiss);
}

/* 60 px waren so gross wie die H1 im Hero. Fuer eine Sektionsheadline zu
   laut, und vier Zeilen treiben den Kasten unnoetig hoch. */
.glas .titel { max-width: none; font-size: clamp(22px, 3vw, 42px); }

.glas p:last-child { margin-bottom: 0; }

.person {
  margin: clamp(24px, 2.4vw, 34px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.person__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1.1;
}

.person__rolle {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: clamp(13px, 1.15vw, 16px);
  color: var(--weiss);
}

/* Hochformat (832x1138), auf Brusthoehe geschnitten. Die Blende faengt
   deshalb erst spaet an, sonst verliert man den Anzug. */
.fuer-wen__portrait {
  width: 100%;
  align-self: end;
  justify-self: end;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.4) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.4) 92%, transparent 100%);
}

/* --------------------------------------------- Was du konkret bekommst */

.bekommst {
  position: relative;
  padding-top: clamp(44px, 13.9vw, 200px);
  background: var(--schwarz);
}

.titel {
  margin: 0 0 clamp(20px, 3.8vw, 55px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 4.2vw, 60px);
  line-height: 1.16;
  letter-spacing: -0.005em;
}

.titel--gold { color: var(--gold); }
.titel--mitte { text-align: center; }

.bekommst .bahn {
  position: relative;
  z-index: 1;
}

.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 969px;
  margin-inline: auto;
}


.karte {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--karten-linie);
  border-radius: 16px;
  background: rgba(14, 14, 14, 0.88);
}

/* Feste Hoehe, nicht auto. icon-schritte ist 200x192 und damit als einziges
   nicht quadratisch, bei auto wurde es 3,2 px flacher und zog den Titel der
   dritten Karte mit nach oben. object-fit haelt das Bild unverzerrt im
   gleich grossen Kasten. */
.karte__icon {
  width: clamp(66px, 5.6vw, 80px);
  height: clamp(66px, 5.6vw, 80px);
  object-fit: contain;
  object-position: left center;
  margin-bottom: clamp(28px, 4.9vw, 70px);
}

.karte__titel {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.25;
}

.karte p {
  margin: 0;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.32;
  color: var(--weiss);
}
/* Die Titel sind ein- und zweizeilig gemischt, dadurch starteten die Texte
   darunter 28,7 px auseinander. Mit subgrid teilen sich alle drei Karten
   dieselben Zeilen, Ikon, Titel und Text liegen damit bei jeder Breite auf
   einer Hoehe. Ohne subgrid bleibt es beim bisherigen Flex-Verhalten. */
@supports (grid-template-rows: subgrid) {
  .karten { grid-template-rows: auto auto 1fr; }

  .karte {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

/* Das Bild laeuft oben und unten in das Schwarz der Seite aus. Der Verlauf
   liegt als eigene Ebene darueber, eine Maske am Bild selbst greift nicht
   zuverlaessig, wenn die naechste Sektion darueber liegt. */
.skyline {
  position: relative;
  z-index: 0;
  width: 100%;
  height: clamp(200px, 31vw, 450px);
  margin-top: clamp(14px, 1.6vw, 24px);
}

.skyline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.skyline::before,
.skyline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.skyline::before {
  top: 0;
  height: 44%;
  background: linear-gradient(to bottom, var(--schwarz), rgba(6, 6, 6, 0));
}

.skyline::after {
  bottom: 0;
  height: 56%;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0), var(--schwarz) 74%);
}

/* ------------------------------------------ Warum wir das abfragen */

.warum {
  position: relative;
  margin-top: clamp(-40px, -2.6vw, -16px);
  padding: clamp(40px, 6.9vw, 100px) 0 0;
  background:
    linear-gradient(to bottom, var(--schwarz) 0%, rgba(6, 6, 6, 0) 26%, rgba(6, 6, 6, 0) 74%, var(--schwarz) 100%),
    url("/assets/img/bg-warum.webp") center bottom / cover no-repeat,
    #0d0f0e;
}

.warum__raster {
  display: grid;
  grid-template-columns: minmax(0, 47.7%) minmax(0, 1fr);
  align-items: end;
  max-width: 1440px;
  margin-inline: auto;
}

.warum__portrait {
  align-self: end;
  width: min(100%, 505px);
  margin: 0 0 -1px clamp(0px, 11vw, 160px);
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
}

.warum__text { padding: 0 var(--rand) 12px 0; }

.warum__text > p {
  max-width: 533px;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.4;
}

.warum__aber {
  margin-top: clamp(20px, 2.6vw, 34px);
  margin-bottom: 6px;
  font-weight: 700;
  font-size: clamp(15px, 1.18vw, 17px);
}

.fragen {
  max-width: 533px;
}

.fragen li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(198, 157, 100, 0.28);
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.4;
}

.fragen li:last-child { border-bottom: 0; }

.fragen .haken {
  width: 21px; height: 21px;
  margin-top: 2px;
}

/* ------------------------------------------------ Damit du erfährst */

.damit {
  position: relative;
  max-width: 1280px;
  margin: clamp(56px, 5.6vw, 80px) auto 0;
  padding-inline: var(--rand);
}

.damit__karte {
  position: relative;
  padding: clamp(30px, 4.4vw, 64px) clamp(22px, 4.9vw, 70px);
  border-radius: 24px;
  background:
    radial-gradient(90% 150% at 6% 0%, rgba(24, 92, 74, 0.95) 0%, rgba(12, 48, 39, 0.95) 38%, rgba(8, 20, 17, 0.97) 72%, rgba(8, 14, 12, 0.98) 100%),
    #0a1512;
  box-shadow: 0 30px 110px -20px rgba(18, 82, 66, 0.7);
  text-align: center;
}

/* Der Schein liegt hinter der Karte und laeuft nach aussen aus. */
.damit__karte::before {
  content: "";
  position: absolute;
  inset: -22% -14%;
  z-index: -1;
  border-radius: 48px;
  background: radial-gradient(58% 62% at 68% 62%, rgba(26, 100, 80, 0.55) 0%, rgba(18, 68, 55, 0.28) 42%, rgba(6, 6, 6, 0) 74%);
  filter: blur(40px);
  pointer-events: none;
}

.damit__karte .titel {
  margin-bottom: 12px;
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 33px);
}

.damit__karte > p {
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.4;
}

.damit .cta { display: flex; justify-content: center; }

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

/* Bewusst nur Marke, Copyright und Rechtstexte. Der Funnel soll einen Ausgang
   haben, jeder weitere Link ist einer zu viel. */
.fuss {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: clamp(36px, 4.2vw, 58px);
  background: var(--schwarz-3);
  font-size: 15px;
}

.fuss .bahn {
  max-width: 1440px;
  padding-inline: clamp(var(--rand), 2.8vw, 40px);
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding-bottom: clamp(28px, 3.2vw, 40px);
  color: var(--grau);
}

.fuss__recht { margin: 0; }

.fuss__rechtlich {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.fuss__rechtlich a { text-decoration: none; }
.fuss__rechtlich a:hover { color: var(--weiss); }

/* ------------------------------------------------------------- Mobil */

@media (max-width: 640px) {
  .hero__titel {
    margin-inline: -7px;
  }

  .hero__text {
    font-size: 15px;
  }

  /* Liste im Warum-Block enger, sonst wird die Sektion deutlich hoeher als im
     Entwurf. */
  .fragen li {
    padding: 11px 0 13px;
    gap: 11px;
  }

  .fragen .haken {
    width: 19px;
    height: 19px;
  }

  .warum__aber { margin-top: 22px; }

  /* Die Karte laeuft auf dem Telefon von Rand zu Rand, nur so passt der
     Knopftext in eine Zeile. */
  .damit {
    max-width: none;
    padding-inline: 0;
  }

  .damit__karte {
    padding: 30px 17px 34px;
    border-radius: 20px;
  }

  .damit .knopf {
    width: 100%;
    padding-inline: 10px;
    letter-spacing: 0;
  }
}

@media (max-width: 700px) {
  .fuer-wen {
    background:
      linear-gradient(to bottom, var(--schwarz) 0%, rgba(6, 6, 6, 0) 18%, rgba(6, 6, 6, 0) 74%, var(--schwarz) 100%),
      url("/assets/img/bg-fuer-wen-mobil.webp") center top / cover no-repeat,
      #12100e;
  }

  .warum {
    background:
      linear-gradient(to bottom, var(--schwarz) 0%, rgba(6, 6, 6, 0) 20%, rgba(6, 6, 6, 0) 78%, var(--schwarz) 100%),
      url("/assets/img/bg-warum-mobil.webp") center bottom / cover no-repeat,
      #0d0f0e;
  }
}

@media (max-width: 860px) {
  .fuss__unten {
    flex-direction: column;
    text-align: center;
  }

  .wortmarke--fuss { margin-inline: auto; }

  .fuss__rechtlich { justify-content: center; }

  .fuer-wen {
    padding-top: clamp(28px, 6vw, 44px);
    text-align: center;
  }

  /* Eine Spalte, und die Spaltenbox loest sich auf, damit Glas, Portrait und
     Namenskarte direkte Rasterkinder werden. Sonst stuende der Name ueber dem
     Foto statt darunter. */
  .fuer-wen__inhalt { grid-template-columns: 1fr; }
  .fuer-wen__spalte { display: contents; }
  .glas { order: 1; }
  .fuer-wen__portrait { order: 2; }
  .fuer-wen__person { order: 3; }

  .glas { max-width: none; margin-left: 0; }
  .glas p, .glas .titel { max-width: none; }
  .glas .titel { text-align: center; }

  .person { align-items: center; margin-left: 0; margin-top: clamp(18px, 4vw, 26px); }
  .fuer-wen__person { text-align: center; }

  .fuer-wen__portrait {
    width: min(74%, 330px);
    justify-self: center;
    margin: clamp(14px, 3vw, 24px) auto 0;
  }

  .karten { grid-template-columns: 1fr; gap: 18px; }

  .warum { padding-top: clamp(32px, 8vw, 56px); }
  .warum__raster { grid-template-columns: 1fr; }

  .warum__portrait {
    order: 2;
    width: min(100%, 420px);
    margin: 0 auto -1px;
  }

  .warum__text { order: 1; padding: 0 var(--rand) 0; }
  .warum__text > p { max-width: none; }


}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .knopf:hover { transform: none; }
  .siegel__lauf { animation: none; }
}