/* ==================================================================
   LUX Agency · Marketing Hiring Funnel
   Facelift 24.09.2026: Gestaltung auf das Niveau der neuen Website
   (agency-website, start.css) und der abgenommenen Bewerbung v2.

   Liegt NACH styles.css und dreht nur an der Gestaltung: dunkle Koepfe
   mit pinkem Gluehen und Filmkorn, Uebergaenge ueber Beere und Rose statt
   harter Kanten, Kicker als Pille mit Herz, Akzentwoerter in Playfair
   kursiv, weisse Karten mit Linie und weichem Schatten, Knoepfe im
   Verlauf mit LUX-Zeichen. Inhalte, Links, Felder und Logik bleiben.

   Mobil zuerst. Kein backdrop-filter (teuer auf dem iPhone), animiert
   wird nur transform und opacity. Alles mit prefers-reduced-motion.
   ================================================================== */

:root {
  /* Werte der Website */
  --dunkel:    #141013;
  --dunkel-2:  #1f181d;
  --pink:      #ff8abd;
  --pink-d:    #e95394;
  --pink-hell: #ffe6f1;
  --rose:      #fdf3f8;
  --tinte:     #101010;
  --leise:     rgb(16 16 16 / .72);
  --zart:      rgb(16 16 16 / .5);
  --linie:     #f2dde7;
  --gruen:     #1f9d63;
  --rot:       #c8323c;
  --verlauf:   linear-gradient(94deg, #ff8abd, #e95394);
  --feder:     cubic-bezier(.34, 1.56, .64, 1);
  --karte-schatten: 0 24px 50px -40px rgb(140 38 82 / .5);
  --knopf-schatten: 0 14px 30px -12px rgb(233 83 148 / .6);

  /* Dunkel nach Hell ueber Beere und Rose, nie ueber Grau */
  --beere-1: #2c1823;
  --beere-2: #5a2f45;
  --rose-1:  #d9a3bd;
  --rose-2:  #f9e6ef;

  /* Filmkorn fuer dunkle Flaechen, SVG-Rauschen, keine Datei */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");

  /* Alte Namen aus styles.css auf die neuen Werte gelegt */
  --rosa:      var(--pink);
  --rosa-deep: var(--pink-d);
  --rosa-tint: var(--rose);
  --rosa-line: var(--linie);
  --black:     var(--tinte);
  --cream:     #fff;
  --paper:     #fff;
  --stone:     #efe2e8;
  --ink:       #564c52;
  --ink-light: #8e8389;

  --r:    .4444rem;
  --r-md: 1.15rem;
  --r-lg: 1.5rem;

  /* Ueberschriften in Inter wie auf der Website */
  --head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --akzent-schrift: 'Playfair Display', Georgia, serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);

  --shadow-sm: 0 12px 26px -22px rgb(140 38 82 / .45);
  --shadow-md: var(--karte-schatten);
  --shadow-lg: 0 34px 70px -40px rgb(20 16 19 / .6);
  --shadow-cta: var(--knopf-schatten);
}

html { overflow-x: clip; }

body {
  background: #fff;
  color: var(--tinte);
  overflow-x: clip;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; }
h3 { letter-spacing: -.015em; }

::selection { background: var(--pink); color: var(--tinte); }

:focus-visible { outline-color: var(--pink-d); }

/* ---------- Akzentwort: Playfair kursiv in Pink ---------- */

.akzent {
  font-family: var(--akzent-schrift);
  font-style: italic;
  font-weight: 500;
  color: var(--pink);
  letter-spacing: -.01em;
  font-synthesis: none;
}

/* Schwung unter dem Akzent in Zwischenueberschriften, zeichnet sich
   beim Einblenden. Bricht der Akzent um, laeuft er unter jeder Zeile. */
h2 .akzent,
.q-title .akzent {
  padding-bottom: .06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 2, 120 6 S 180 11, 198 4' fill='none' stroke='%23ff8abd' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    0 100% / 100% .2em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lp-bewegt .reveal h2 .akzent {
  background-size: 0% .2em;
  transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .45s;
}

.lp-bewegt .reveal.seen h2 .akzent,
.no-anim h2 .akzent { background-size: 100% .2em; }

/* ---------- Kicker als Pille mit Herz ---------- */

.kicker,
.pill,
.q-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: auto;
  margin: 0 0 1rem;
  padding: .38rem .85rem;
  border: 0;
  border-radius: 99px;
  background: var(--rose);
  box-shadow: none;
  color: var(--pink-d);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: none;
}

.kicker::before,
.pill::before,
.q-kicker::before {
  content: '';
  flex: none;
  width: .8rem;
  height: .72rem;
  background: url("brand/herz.svg") center / contain no-repeat;
}

/* Herzschlag, wenn der Kicker ins Bild kommt */
.lp-bewegt .seen .kicker::before,
.lp-bewegt .pill::before,
.q-kicker::before { animation: schlag .9s ease-in-out .45s; }

@keyframes schlag {
  15% { transform: scale(1.5); }
  30% { transform: scale(1.05); }
  45% { transform: scale(1.35); }
}

/* Helle Fassung auf dunklen Flaechen */
.buehne .pill,
.scene--phone .kicker,
.cta-block .kicker {
  background: rgb(255 255 255 / .08);
  color: #ffc7df;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
}

.buehne .pill::before,
.scene--phone .kicker::before { filter: brightness(1.35); }

/* Der Rosa-Strich ueber jeder Ueberschrift hat ausgedient, die Pille
   uebernimmt seine Rolle. */
.sec-head::before { display: none; }

/* ---------- Knoepfe: Verlauf und LUX-Zeichen ---------- */

.btn {
  background: var(--verlauf);
  color: #fff;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  border-radius: var(--r);
  box-shadow: var(--knopf-schatten);
  overflow: visible;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .2s;
}

/* Das Pfeil-Icon im Markup weicht dem LUX-Zeichen */
.btn > .ico { display: none; }

/* Maske statt Bild: das Zeichen traegt immer die Textfarbe. Eine
   Filterkette rendert Safari auf dem iPhone rot (so auf der Website). */
.btn::after {
  content: '';
  position: static;
  inset: auto;
  display: block;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  -webkit-mask: url("brand/lux-button-icon.svg") center / contain no-repeat;
  mask: url("brand/lux-button-icon.svg") center / contain no-repeat;
  transform: none;
  transition: transform .35s ease-in-out;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--verlauf);
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgb(233 83 148 / .7);
  }
  .btn:hover::after { transform: rotate(180deg); }
}

.btn:active { transform: scale(.98); }

.btn--ghost {
  background: #fff;
  border: 1.5px solid var(--linie);
  color: var(--tinte);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.btn--ghost::after { display: block; background: var(--pink-d); }

@media (hover: hover) {
  .btn--ghost:hover {
    background: #fff;
    border-color: #f6b9d4;
    box-shadow: 0 0 0 4px rgb(255 138 189 / .12), 0 16px 30px -22px rgb(140 38 82 / .55);
    transform: translateY(-2px);
  }
}

/* Herzchen beim Druck auf einen Haupt-Knopf (mikro.js) */
.mikro-herz {
  position: fixed;
  z-index: 2000;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  pointer-events: none;
  background: linear-gradient(135deg, #ffb3d4, #e95394);
  -webkit-mask: url("brand/herz.svg") center / contain no-repeat;
  mask: url("brand/herz.svg") center / contain no-repeat;
  animation: mikroHerz .8s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes mikroHerz {
  0%   { opacity: 1; transform: translate(0, 0) scale(.2); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(25deg); }
}

/* ---------- Icon-Kachel: pinker Strich auf Rose ---------- */

.ibox,
.step .ibox,
.reel .ibox {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 0;
  border-radius: .85rem;
  background: linear-gradient(135deg, var(--rose), var(--pink-hell));
  box-shadow: inset 0 0 0 1px rgb(255 138 189 / .18);
  color: var(--pink-d);
}

/* ---------- Logo, das sich selbst schreibt ---------- */

.logo-schrift { display: block; overflow: visible; }
.logo-schrift__text { fill: #fff; }

.lp-bewegt .mark .logo-schrift__text {
  mask: url(#logo-maske);
  animation: logoFertig 0s linear 2.15s forwards;
}

.lp-bewegt .logo-schrift__zug {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: logoZug var(--d) cubic-bezier(.45, .05, .35, 1) var(--v) forwards;
}

.logo-schrift__zug--1 { --d: 1.5s;  --v: .1s; }
.logo-schrift__zug--2 { --d: .28s; --v: 1.55s; }
.logo-schrift__zug--3 { --d: .28s; --v: 1.8s; }

@keyframes logoZug   { to { stroke-dashoffset: 0; } }
@keyframes logoFertig { to { mask: none; } }

.logo-schrift__herz,
.logo-schrift__puls { transform-box: fill-box; transform-origin: 50% 70%; }

.lp-bewegt .mark .logo-schrift__herz {
  transform: scale(0);
  animation: logoHerz .6s var(--feder) 2.05s forwards;
}

@keyframes logoHerz { to { transform: scale(1); } }

.mark:hover .logo-schrift__puls { animation: logoSchlag .8s ease-in-out; }

@keyframes logoSchlag {
  30% { transform: scale(1.35); }
  60% { transform: scale(.95); }
}

/* Das alte Video-Logo ist raus, der Rahmen braucht keine feste Groesse mehr */
.mark {
  width: auto;
  height: auto;
  overflow: visible;
  animation: none;
}

/* ==================================================================
   Landingpage: dunkle Buehne fuer Kopf und Hero
   ================================================================== */

.buehne {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  padding-bottom: 7.5rem;
  background:
    radial-gradient(40rem 26rem at 50% -4rem, rgb(233 83 148 / .34), transparent 68%),
    radial-gradient(30rem 22rem at 100% 62%, rgb(255 138 189 / .12), transparent 65%),
    radial-gradient(26rem 20rem at 0% 40%, rgb(255 138 189 / .08), transparent 65%),
    linear-gradient(to bottom,
      var(--dunkel) 0,
      var(--dunkel) calc(100% - 10rem),
      var(--beere-1) calc(100% - 7.8rem),
      var(--beere-2) calc(100% - 5.6rem),
      var(--rose-1) calc(100% - 3.2rem),
      var(--rose-2) calc(100% - 1.3rem),
      #fff 100%);
}

/* Filmkorn, laeuft mit dem Dunkel aus */
.buehne::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: var(--korn);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 11rem), transparent calc(100% - 5rem));
  mask-image: linear-gradient(#000 calc(100% - 11rem), transparent calc(100% - 5rem));
}

.topbar { padding: 22px 0 6px; }

/* Hero */

.hero { padding-block: 18px 0; overflow: visible; }

/* Der Schein atmet nur ueber die Deckkraft, nicht ueber Groesse oder
   Position: so uebernimmt der Grafikchip das ohne Neuzeichnen. */
.hero::before {
  background: radial-gradient(ellipse at center, rgb(255 138 189 / .26), rgb(255 138 189 / 0) 68%);
  animation: gluehen 7s ease-in-out infinite alternate;
}

@keyframes gluehen {
  from { opacity: .65; transform: none; }
  to   { opacity: 1;   transform: none; }
}

.glowfollow { background: radial-gradient(circle at center, rgb(255 138 189 / .18), rgb(255 138 189 / 0) 70%); }

h1.display {
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
}

/* Akzent leuchtet auf Dunkel */
.buehne h1 .akzent { filter: drop-shadow(0 0 26px rgb(255 138 189 / .35)); }

.buehne .star { color: var(--pink); }
.hero .foot { color: rgb(255 255 255 / .55); margin-top: 4px; }
.hero .lead { color: rgb(255 255 255 / .74); }
.hero .scarce { color: rgb(255 255 255 / .7); }

/* Eckdaten als dunkle Karten, ohne backdrop-filter */
.facts li {
  background: rgb(255 255 255 / .06);
  border: 0;
  border-radius: 1.1rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 22px 44px -26px rgb(0 0 0 / .6);
}

.facts .ico { color: var(--pink); }
.facts .k { color: rgb(255 255 255 / .5); }
.facts .v { font-family: var(--body); color: #fff; }

@media (min-width: 900px) {
  .facts li:hover {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgb(255 138 189 / .35), 0 0 0 4px rgb(255 138 189 / .08), 0 22px 44px -26px rgb(0 0 0 / .6);
  }
  .buehne { padding-bottom: 9rem; }
}

/* Auftritt: von unten mit Feder, gestaffelt wie auf der Website */
.lp-bewegt .hero .pill,
.lp-bewegt .hero h1,
.lp-bewegt .hero .foot,
.lp-bewegt .hero .lead,
.lp-bewegt .hero > .btn,
.lp-bewegt .hero .scarce,
.lp-bewegt .hero .facts { animation: hochRein .8s var(--feder) both; }

.lp-bewegt .hero .facts li { animation: hochRein .7s var(--feder) both; }
.lp-bewegt .hero .facts li:nth-child(1) { animation-delay: .6s; }
.lp-bewegt .hero .facts li:nth-child(2) { animation-delay: .67s; }
.lp-bewegt .hero .facts li:nth-child(3) { animation-delay: .74s; }
.lp-bewegt .hero .facts li:nth-child(4) { animation-delay: .81s; }

@keyframes hochRein {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ==================================================================
   Landingpage: helle Abschnitte
   ================================================================== */

h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.06; }
.sec-head { margin-bottom: 26px; }
.sec-head h2 { margin-bottom: 10px; }
.sec-head p, .section > p { color: var(--leise); }

/* Baender: Rose, das oben und unten weich ins Weisse laeuft */
.section--band {
  background: linear-gradient(to bottom, #fff, var(--rose) 4.5rem, var(--rose) calc(100% - 4.5rem), #fff);
  border: 0;
}

.section--band::before,
.section--band::after { display: none; }

/* Icon-Listen */
.ilist .t, .step h3, .reel .lbl, .weiter b { font-family: var(--body); font-weight: 600; }
.ilist .d, .step p { color: var(--leise); }
.rail::before { left: 22px; background: linear-gradient(180deg, var(--pink), var(--linie) 70%, transparent); }

/* Negativliste als stille Karten */
.nolist li {
  background: #fff;
  border: 1.5px dashed #efd0de;
  border-radius: var(--r-md);
  color: var(--leise);
}

.nolist li:hover { background: #fff; border-color: #f6b9d4; }
.nolist .ico { color: var(--pink-d); }

/* Karten: weiss, Linie, weicher Schatten, Hover mit pinkem Rand-Glow */
.step,
.ab__card,
.plan__out {
  background: #fff;
  border: 1.5px solid var(--linie);
  border-radius: 1.5rem;
  box-shadow: var(--karte-schatten);
}

.step::before { background: var(--verlauf); }
.step .n { font-family: var(--body); color: var(--pink-d); letter-spacing: .12em; }

@media (min-width: 900px) {
  .step:hover,
  .ab__card:hover {
    border-color: #f6b9d4;
    box-shadow: 0 0 0 4px rgb(255 138 189 / .12), 0 26px 50px -34px rgb(140 38 82 / .55);
    transform: translateY(-3px);
  }
}

/* Szene 1: zwei Reels */
.ab__card.is-up { border-color: #f6c6dc; }
.ab__frame {
  border: 0;
  border-radius: 1.1rem;
  background:
    radial-gradient(ellipse at 50% 120%, rgb(255 138 189 / .35), rgb(255 138 189 / 0) 62%),
    linear-gradient(135deg, var(--rose), var(--pink-hell));
}

.ab__card.is-down .ab__frame { background: linear-gradient(135deg, #f8f5f7, #f1ecef); }
.ab__tag { font-family: var(--body); border: 0; box-shadow: inset 0 0 0 1px var(--linie); }
.ab__hook { font-family: var(--body); }
.bar { background: #f5e8ee; }
.bar i { background: var(--verlauf); }

/* Szene 2: Baukasten */
.plan__lab, .plan__tag { font-family: var(--body); }
.chip { border: 1.5px solid var(--linie); background: #fff; color: var(--leise); }
.chip:hover { border-color: #f6b9d4; }

.chip.is-on {
  border-color: transparent;
  background: var(--verlauf);
  color: #fff;
  box-shadow: var(--knopf-schatten);
}

.plan__out { overflow: hidden; }
.plan__kopf { font-family: var(--body); background: var(--rose); border-bottom-color: var(--linie); color: var(--pink-d); }
.plan__tage li { border-bottom-color: #f7e9ef; }
.plan__fuss { background: var(--rose); border-top-color: var(--linie); color: var(--leise); }

/* Szene 3: der Dienstag, als dunkle Buehne mit weichen Uebergaengen */
.scene--phone {
  isolation: isolate;
  overflow: clip;
  border: 0;
  padding-block: 11rem;
  color: #fff;
  background:
    radial-gradient(30rem 24rem at 50% 55%, rgb(233 83 148 / .3), transparent 66%),
    linear-gradient(to bottom,
      #fff 0,
      var(--rose-2) 1.3rem,
      var(--rose-1) 3.2rem,
      var(--beere-2) 5.6rem,
      var(--beere-1) 7.8rem,
      var(--dunkel) 10rem,
      var(--dunkel) calc(100% - 10rem),
      var(--beere-1) calc(100% - 7.8rem),
      var(--beere-2) calc(100% - 5.6rem),
      var(--rose-1) calc(100% - 3.2rem),
      var(--rose-2) calc(100% - 1.3rem),
      #fff 100%);
}

.scene--phone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: var(--korn);
  -webkit-mask-image: linear-gradient(transparent 7rem, #000 11rem, #000 calc(100% - 11rem), transparent calc(100% - 7rem));
  mask-image: linear-gradient(transparent 7rem, #000 11rem, #000 calc(100% - 11rem), transparent calc(100% - 7rem));
}

.scene--phone h2 { color: #fff; }
.scene--phone .akzent { background-image: none; text-shadow: 0 0 40px rgb(255 138 189 / .45); }
.phone__fuss { color: rgb(255 255 255 / .7); }

.phone {
  background: #0b0809;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 90px -30px rgb(233 83 148 / .45);
}

.note { border-radius: 1rem; }
.note__ico { background: linear-gradient(135deg, var(--rose), var(--pink-hell)); color: var(--pink-d); }

/* Fragen als Karten */
.faq { border: 0; display: grid; gap: 10px; }

.fq {
  border: 0;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--linie), 0 12px 26px -24px rgb(140 38 82 / .45);
  padding: 0 14px;
  transition: box-shadow .25s var(--ease), background-color .25s;
}

@media (hover: hover) {
  .fq:not([open]):hover { box-shadow: 0 0 0 1.5px #f6b9d4, 0 0 0 5.5px rgb(255 138 189 / .1); }
}

.fq[open] { background: var(--rose); }
.fq summary:hover { color: inherit; }
.fq__n { font-family: var(--akzent-schrift); font-style: italic; font-weight: 500; font-size: 17px; letter-spacing: 0; color: var(--pink); padding-top: 0; }
.fq__q { font-family: var(--body); }
.fq__a p { color: var(--leise); }

/* Schluss: dunkle Karte mit Gluehen und Korn */
.cta-block {
  isolation: isolate;
  width: auto;
  max-width: 820px;
  margin: 56px max(var(--pad), calc((100% - 820px) / 2)) 0;
  padding: 56px 22px 48px;
  border: 0;
  border-radius: clamp(1.5rem, 4vw, 2.2rem);
  color: #fff;
  background:
    radial-gradient(30rem 20rem at 50% 115%, rgb(233 83 148 / .45), transparent 65%),
    radial-gradient(24rem 16rem at 100% 0%, rgb(255 138 189 / .14), transparent 62%),
    var(--dunkel);
  box-shadow: 0 40px 80px -44px rgb(233 83 148 / .75);
}

.cta-block::before {
  bottom: auto;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: inherit;
  opacity: .09;
  mix-blend-mode: overlay;
  background: var(--korn);
  animation: none;
  z-index: -1;
}

.cta-block h2 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem); letter-spacing: -.03em; }
.cta-block .akzent { background-image: none; text-shadow: 0 0 40px rgb(255 138 189 / .45); }
.cta-block p { color: rgb(255 255 255 / .72); }

/* Fuss mit Disclaimer */
.footer {
  border-top: 0;
  padding: 40px 0 calc(34px + env(safe-area-inset-bottom));
  color: var(--zart);
  font-size: 12px;
  line-height: 1.5;
}

.footer p { margin: 0; }
.footer__disclaimer { max-width: 36rem; margin: 0 auto !important; text-wrap: pretty; }
.footer__links { margin-top: 10px !important; font-size: 13px; }
.footer a::after { background: var(--pink); }

/* Auf der Landingpage liegt der klebende CTA ueber dem Fuss: Platz lassen */
@media (max-width: 899px) {
  .seite-lp .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* Klebender CTA und Lesefortschritt */
.sticky-cta {
  background: rgb(255 255 255 / .97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--linie);
  box-shadow: 0 -12px 30px -20px rgb(140 38 82 / .35);
}

.readbar { background: var(--verlauf); }

/* Cookie-Hinweis dunkel wie auf der Website */
.consent {
  background: var(--dunkel);
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 1.25rem;
  color: rgb(255 255 255 / .72);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7);
}

.consent h3 { color: #fff; font-family: var(--body); }
.consent a { color: var(--pink); }
.consent .row .btn { border-radius: 99px; font-size: 15px; }
.consent .row .btn::after { display: none; }
.consent .btn--ghost { background: transparent; border: 1.5px solid rgb(255 255 255 / .2); color: #fff; box-shadow: none; }

@media (min-width: 640px) {
  .topbar { padding: 30px 0 8px; }
  .cta-block { padding: 72px 40px 60px; }
  .fq { padding: 0 20px; }
}

/* ==================================================================
   Quiz: dunkler Kopf mit Gluehen und Korn, der ueber Beere und Rose ins
   Weisse laeuft. Die Frage steht als weisse Karte darauf.
   ================================================================== */

body.seite-quiz {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(38rem 16rem at 50% 0%, rgb(233 83 148 / .34), transparent 70%),
    radial-gradient(26rem 14rem at 100% 12rem, rgb(255 138 189 / .14), transparent 70%),
    linear-gradient(to bottom,
      var(--dunkel) 0,
      var(--dunkel) 7.5rem,
      var(--beere-1) 10rem,
      var(--beere-2) 12.5rem,
      var(--rose-1) 15.5rem,
      var(--rose-2) 18rem,
      var(--rose) 20rem,
      #fff 32rem) top / 100% 32rem no-repeat,
    #fff;
}

body.seite-quiz::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 14rem;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: var(--korn);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

/* Der alte Schein hinter der Karte ragte mobil ueber den Rand hinaus */
.quiz-main::before { display: none; }

/* ------------------------------------------------------------------
   Angleich 25.09.2026: Kopf, Leiste und Spalte wie bei bewerbung-v2
   (Seite.astro, quiz.css). Logo mittig oben, darunter der duenne
   Fortschritt mit Herz an der Spitze, "Noch N Schritte" rechts, Zurueck
   links. Keine eigene dunkle Leiste, das Dunkel ist der Seitengrund.
   ------------------------------------------------------------------ */

.kopf {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 1rem 1rem .5rem;
}

.kopf__logo { display: inline-flex; color: #fff; }
.kopf__logo .logo-schrift__text { fill: #fff; }

.quiz-main { flex: 1; padding: 0 0 1rem; }

/* Schmale Spalte: 34rem, mobil 16 px Rand */
.quiz-spalte {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.quiz__leiste {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: 1.25rem;
}

.quiz__zurueck {
  position: absolute;
  left: -.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;
  padding: 0 .5rem;
  border: 0;
  background: none;
  color: rgb(255 255 255 / .72);
  font-family: var(--body);
  font-size: .9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}

.quiz__zurueck[hidden] { display: none; }
.quiz__zurueck span { transition: transform .25s var(--ease); }
.quiz__zurueck:hover { color: #fff; }
.quiz__zurueck:hover span { transform: translateX(-3px); }

.quiz__fortschritt {
  width: 42%;
  max-width: 12rem;
  height: 4px;
  margin: 0 auto;
  border-radius: 99px;
  background: rgb(255 255 255 / .14);
}

.quiz__fuellung {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--verlauf);
  box-shadow: 0 0 12px rgb(255 138 189 / .55);
  transition: width .55s var(--ease);
}

/* Das LUX-Herz reitet auf der Spitze und huepft bei jedem Schritt vor */
.quiz__herz {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: url("brand/herz.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgb(255 138 189 / .9));
}

.quiz__herz.hupf { animation: hupf .55s var(--feder); }

@keyframes hupf { 40% { transform: translateY(-5px) scale(1.25); } }

.quiz__zaehler {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(255 255 255 / .6);
  font-family: var(--body);
  font-size: .8125rem;
  white-space: nowrap;
}

/* Karte */
.card {
  background: #fff;
  border: 1.5px solid var(--linie);
  border-radius: clamp(1.4rem, 4vw, 1.9rem);
  padding: clamp(1.4rem, 5vw, 2.1rem) clamp(1.1rem, 4.5vw, 2rem) clamp(1.3rem, 4.5vw, 1.9rem);
  box-shadow: 0 30px 60px -38px rgb(140 38 82 / .55), 0 12px 24px -22px rgb(20 16 19 / .35);
  overflow: visible;
}

.card::before { display: none; }

.step-fwd  { animation: rein .38s var(--ease) both; }
.step-back { animation: reinZurueck .38s var(--ease) both; }

@keyframes rein        { from { opacity: 0; transform: translateX(18px); } }
@keyframes reinZurueck { from { opacity: 0; transform: translateX(-18px); } }

.q-head { display: block; margin-bottom: 0; }

/* Angleich 25.09.2026: Masse wie .schritt__etikett (bewerbung-v2) */
.q-kicker {
  gap: .4rem;
  margin: 0 0 .75rem;
  padding: .3rem .7rem;
  font-size: .8125rem;
  animation: hochRein .55s var(--feder) .1s both;
}

.q-title {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.q-title:focus { outline: none; }

.q-title .akzent { animation: schwung .9s cubic-bezier(.65, 0, .35, 1) .3s both; }

@keyframes schwung { from { background-size: 0% .2em; } }

.q-help { margin: .75rem 0 0; color: var(--leise); font-size: .9875rem; text-wrap: pretty; }

/* Angleich 25.09.2026: Hinweis-Kasten mit Luft zur Frage, Felder im
   Raster 1.5rem darunter (.felder bei bewerbung-v2) */
.card > .q-note { margin: 1rem 0 0; }

.felder { display: grid; gap: 1rem; margin-top: 1.5rem; }
.felder > .field { margin-bottom: 0; }
.felder .limit-note { margin-bottom: .6rem; }

.q-note {
  border: 0;
  border-radius: 1rem;
  background: var(--rose);
  box-shadow: inset 0 0 0 1px var(--linie);
  color: #8a3a5f;
}

.q-note .ico { color: var(--pink-d); }

/* Antworten als Karten mit Kachel links und Haken rechts */
.options { gap: .625rem; }

.option {
  gap: .875rem;
  min-height: 3.75rem;
  padding: .75rem 3rem .75rem .75rem;
  border: 1.5px solid var(--linie);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 12px 26px -22px rgb(140 38 82 / .5);
  transition: border-color .2s, background-color .2s, box-shadow .25s, transform .25s var(--ease);
}

.option--ohne { padding-left: 1.1rem; }

@media (hover: hover) {
  .option:hover {
    border-color: #f6b9d4;
    background: #fff;
    box-shadow: 0 0 0 4px rgb(255 138 189 / .12), 0 16px 30px -22px rgb(140 38 82 / .55);
    transform: translateY(-1px);
  }
}

.option:active { transform: scale(.985); }
.option .txt { font-size: 16.5px; font-weight: 500; line-height: 1.35; }
.option:has(input:checked) .txt { font-weight: 500; }

.option .kachel {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  background: linear-gradient(135deg, var(--rose), var(--pink-hell));
  box-shadow: inset 0 0 0 1px rgb(255 138 189 / .18);
  color: var(--pink-d);
  transition: color .2s;
}

.option .kachel .ico { width: 22px; height: 22px; }

/* Haken rechts: Kreis bei Einfach-, Quadrat bei Mehrfachauswahl */
.option .box {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 2px solid #ecd3df;
  border-radius: 50%;
  transition: background-color .18s, border-color .18s;
}

.option--multi .box { border-radius: .375rem; }
.option .box::after { display: none; }

.option:has(input:checked) {
  border-color: var(--pink);
  background: var(--rose);
  box-shadow: 0 0 0 4px rgb(255 138 189 / .16), 0 16px 30px -22px rgb(140 38 82 / .55);
}

.option:has(input:checked) .kachel {
  background: var(--verlauf);
  box-shadow: 0 8px 18px -8px rgb(233 83 148 / .7);
  color: #fff;
  animation: pop .4s var(--feder);
}

.option input:checked ~ .box {
  border-color: var(--pink-d);
  background: var(--pink-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  animation: pop .4s var(--feder);
}

@keyframes pop { 45% { transform: scale(1.15) rotate(-4deg); } }

.option:focus-within { box-shadow: 0 0 0 3px rgb(255 138 189 / .28); }

/* Gestaffelter Auftritt von unten mit Feder */
.options > .option { animation: hochRein .5s var(--feder) both; }
.options > .option:nth-child(1) { animation-delay: 0s; }
.options > .option:nth-child(2) { animation-delay: .04s; }
.options > .option:nth-child(3) { animation-delay: .08s; }
.options > .option:nth-child(4) { animation-delay: .12s; }
.options > .option:nth-child(5) { animation-delay: .16s; }
.options > .option:nth-child(6) { animation-delay: .2s; }
.options > .option:nth-child(7) { animation-delay: .24s; }
.options > .option:nth-child(8) { animation-delay: .28s; }
.options > .option:nth-child(9) { animation-delay: .32s; }

.limit-note { color: var(--zart); }

/* Felder: mindestens 16 px, damit iOS beim Fokus nicht zoomt */
.field label { font-size: 15px; font-weight: 500; color: var(--tinte); }

.input,
.textarea {
  border: 1.5px solid #ecd3df;
  border-radius: .9rem;
  background: #fff;
  font-size: 17px;
  transition: border-color .2s, box-shadow .2s;
}

.input::placeholder, .textarea::placeholder { color: #b9aab2; }

.input:focus,
.textarea:focus {
  background: #fff;
  border-color: var(--pink-d);
  box-shadow: 0 0 0 4px rgb(255 138 189 / .2);
}

.input.voll { border-color: var(--pink); background: #fffafc; }
.textarea { min-height: 170px; line-height: 1.5; }

.counter.ok { color: var(--gruen); font-weight: 500; }

/* Datei */
.filebox {
  border: 2px dashed #efc7da;
  border-radius: 1.15rem;
  background: #fff;
  padding: .75rem;
}

.filebox > .ico {
  box-sizing: content-box;
  padding: 10px;
  border-radius: .8rem;
  background: linear-gradient(135deg, var(--rose), var(--pink-hell));
  color: var(--pink-d);
}

@media (hover: hover) {
  .filebox:hover { border-color: var(--pink); background: #fff; box-shadow: 0 0 0 4px rgb(255 138 189 / .12); }
}

.filebox .fl { color: var(--leise); font-weight: 500; }
.filebox.has { border-style: solid; border-color: var(--gruen); background: #f2fbf6; }
.filebox.has .ico { background: var(--gruen); color: #fff; }
.or { color: var(--zart); }
.or::before, .or::after { background: var(--linie); }

/* Reel-Aufgabe: Kachel im Verlauf mit weissem Play */
.reel {
  border: 1.5px solid var(--linie);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 12px 26px -22px rgb(140 38 82 / .5);
}

.reel .ibox { background: var(--verlauf); color: #fff; box-shadow: 0 8px 18px -8px rgb(233 83 148 / .7); }
.reel .lbl { font-family: var(--body); }
.reel:hover { border-color: #f6b9d4; box-shadow: 0 0 0 4px rgb(255 138 189 / .12), 0 16px 30px -22px rgb(140 38 82 / .55); }
.reel:hover .go { color: var(--pink-d); }

/* Navigation. Angleich 25.09.2026: nur noch der Weiter-Knopf, volle
   Breite wie .schritt__knopf; Zurueck sitzt oben in der Leiste. */
.nav { display: block; margin-top: 1.5rem; }

.nav .btn,
.end .btn {
  width: 100%;
  min-height: 3.25rem;
  padding: .8rem 1.5rem;
  gap: .6rem;
  color: var(--pink-hell);
  font-size: 1.0625rem;
}

/* Weiter blass, bis alles da ist, bleibt aber klickbar */
.nav .btn.wartet { opacity: .55; box-shadow: none; }

.err { color: var(--rot); font-size: .9375rem; }
.err:not(:empty) { margin-top: 1rem; }
.err:not(:empty) { animation: wackel .35s; }

@keyframes wackel {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* Endpunkte */
.end .seal {
  width: 3.4rem;
  height: 3.4rem;
  border: 0;
  border-radius: 1.05rem;
  background: var(--verlauf);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgb(233 83 148 / .6);
  animation: hochRein .6s var(--feder) .05s both;
}

.end .seal--mute {
  background:
    url("brand/herz.svg") center / 1.35rem no-repeat,
    linear-gradient(135deg, var(--rose), var(--pink-hell));
  box-shadow: inset 0 0 0 1px rgb(255 138 189 / .2);
}

.end p { color: var(--leise); }

.weiter { border-top: 1.5px solid var(--linie); }
.weiter .wico { border: 0; background: linear-gradient(135deg, var(--rose), var(--pink-hell)); color: var(--pink-d); }
.weiter span.wd { color: var(--leise); }

.dots span { background: var(--verlauf); }

.cal-embed { border: 1.5px solid var(--linie); border-radius: 1.2rem; box-shadow: var(--karte-schatten); }

/* Konfetti aus LUX-Herzen nach dem Absenden */
.card.end { position: relative; }

.konfetti {
  position: absolute;
  left: 50%;
  top: 4.5rem;
  width: 0;
  height: 0;
  pointer-events: none;
}

.konfetti span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--g, 14px);
  height: var(--g, 14px);
  background: url("brand/herz.svg") center / contain no-repeat;
  animation: flieg 1.3s var(--ease) forwards;
}

@keyframes flieg {
  0%   { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
}

/* ------------------------------------------------------------------
   Angleich 25.09.2026: Felder und Fuss der Quiz-Seiten wie bei
   bewerbung-v2 (.feld__eingabe, Rechtliches.astro)
   ------------------------------------------------------------------ */

.seite-quiz .field label { margin-bottom: .375rem; font-size: .9375rem; }

.seite-quiz .input {
  min-height: 3.25rem;
  padding: .7rem .875rem;
  font-size: 1.0625rem;
}

.seite-quiz .textarea { padding: .75rem .875rem; font-size: 1.0625rem; line-height: 1.45; }

.seite-quiz .footer { padding: 2rem 1rem 2.25rem; font-size: .75rem; }
.seite-quiz .footer__links { margin-top: .5rem !important; font-size: .75rem; }
.seite-quiz .footer a { margin: 0 .4em; text-decoration: underline; text-underline-offset: .15em; }
.seite-quiz .footer a::after { display: none; }

/* ------------------------------------------------------------------
   Angleich 25.09.2026, Teil 2: Telefon mit Laendervorwahl und Upload mit
   Fortschritt, wie .feld__rahmen--telefon und .foto bei bewerbung-v2
   ------------------------------------------------------------------ */

.tel {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #ecd3df;
  border-radius: .9rem;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.tel:focus-within { border-color: var(--pink-d); box-shadow: 0 0 0 4px rgb(255 138 189 / .2); }
.tel:has(.input.voll) { border-color: var(--pink); background: #fffafc; }

.tel__vorwahl {
  flex: none;
  min-height: 3.25rem;
  padding: 0 .5rem 0 .75rem;
  border: 0;
  border-right: 1.5px solid #ecd3df;
  border-radius: .8rem 0 0 .8rem;
  background: var(--rose);
  color: var(--tinte);
  font-family: var(--body);
  font-size: 1rem;
}

.tel__vorwahl:focus { outline: none; }

.seite-quiz .tel .input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0 .8rem .8rem 0;
  background: transparent;
  box-shadow: none;
}

.seite-quiz .tel .input:focus { box-shadow: none; }

.tel__status { min-height: 1.25rem; margin: .4rem 0 0; font-size: .875rem; color: var(--zart); }
.tel__status.ok { color: var(--gruen); font-weight: 500; }
.tel__status.fehler { color: var(--rot); }

/* Upload: Vorschau links, Fortschritt als Linie unten, Haken bei Erfolg */
.filebox { position: relative; overflow: hidden; gap: .875rem; }
.filebox > .ico { display: none; }

.filebox__bild {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .8rem;
  background: linear-gradient(135deg, var(--rose), var(--pink-hell)) center / cover no-repeat;
  color: var(--pink-d);
}

.filebox__bild.mit-bild .ico { visibility: hidden; }
.filebox__text { display: grid; min-width: 0; }
.filebox__text .fl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebox .fs { color: var(--zart); font-size: .8125rem; }
.filebox .fs:empty { display: none; }

.filebox__balken {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  opacity: 0;
  transition: opacity .2s;
}

.filebox__balken span { display: block; height: 100%; width: 0; background: var(--verlauf); transition: width .2s linear; }

.filebox[data-zustand="laedt"] { border-style: solid; border-color: var(--pink-hell); }
.filebox[data-zustand="laedt"] .filebox__balken { opacity: 1; }
.filebox[data-zustand="fertig"] .fs { color: var(--gruen); font-weight: 500; }
.filebox[data-zustand="fertig"] .filebox__bild:not(.mit-bild) { background: var(--gruen); color: #fff; animation: pop .4s var(--feder); }
.filebox[data-zustand="fehler"] { border-style: solid; border-color: var(--rot); }
.filebox[data-zustand="fehler"] .fs { color: var(--rot); font-weight: 500; }

/* ==================================================================
   Reduzierte Bewegung: alles steht sofort da
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero::before, .kicker::before, .pill::before, .q-kicker::before,
  .quiz__herz, .konfetti, .mikro-herz { animation: none !important; }
  .konfetti, .mikro-herz { display: none; }
  h2 .akzent, .q-title .akzent { background-size: 100% .2em !important; }
}

/* Feinschliff nach Sichtung (24.09.2026) */

/* Akzentwort im Hero nicht am Bindestrich brechen */
h1.display .akzent { white-space: nowrap; }

/* .field label (styles.css) machte die Datei-Flaeche zum Block */
.field .filebox { display: flex; }

/* Desktop: breitere Buehne, damit der Titel in zwei statt vier Zeilen steht */
@media (min-width: 900px) {
  .hero { max-width: 940px; }
  h1.display { font-size: clamp(3.4rem, 1.6rem + 3.2vw, 4.4rem); }
  .hero .foot, .hero .lead { max-width: 36em; margin-left: auto; margin-right: auto; }
  .hero .scarce { justify-content: center; }
  .hero .facts { max-width: 700px; margin-left: auto; margin-right: auto; }
}