/* 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;
}

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);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  width: min(100%, 406px);
  min-height: 64px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #c69d64 0%, #d9bd87 22%, #e8cc9d 50%, #d9bd87 78%, #c69d64 100%);
  box-shadow: 0 0 42px rgba(198, 157, 100, 0.28);
  color: #14100a;
  font-family: inherit;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.knopf__zusatz {
  font-weight: 400;
}

.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: translateY(1px); }
.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 */

.video {
  position: relative;
  width: min(100% - 2 * var(--rand), 886px);
  margin: clamp(36px, 4.4vw, 59px) auto 0;
  aspect-ratio: 886 / 431;
  border-radius: 14px;
  background: #303030;
  display: grid;
  place-items: center;
}

.video__knopf {
  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;
}

/* --------------------------------------------------------------- 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;
}

.fuer-wen__inhalt,
.fuer-wen__person {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.glas {
  max-width: 800px;
  margin-left: clamp(0px, 3.6vw, 51px);
  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);
}

.glas p {
  max-width: 640px;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--weiss);
}

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

.person {
  margin: clamp(24px, 2.4vw, 34px) 0 0 clamp(0px, 3.8vw, 54px);
  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);
}

.fuer-wen__portrait {
  position: absolute;
  right: -1%;
  bottom: -15%;
  z-index: 2;
  width: 58%;
  max-width: 840px;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.35) 78%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.35) 78%, transparent 88%);
}

/* --------------------------------------------- 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);
}

.karte__icon {
  width: clamp(66px, 5.6vw, 80px);
  height: auto;
  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);
}

/* 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;
  }

  .glas { max-width: none; margin-left: 0; }
  .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 {
    position: static;
    width: min(100%, 460px);
    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; }
  .siegel__lauf { animation: none; }
}