/* Farben kommen aus config.js (--farbe, --farbe-text, --akzent) */
:root {
  --farbe: #15392E;
  --farbe-text: #fff;
  --akzent: #B8F25C;
  --tinte: #16201c;
  --leise: #5b6762;
  --linie: #e3e7e4;
  --flaeche: #f6f8f6;
  --weiss: #fff;
  --rund: 14px;
  --schatten: 0 1px 2px rgba(16, 24, 20, .06), 0 4px 14px rgba(16, 24, 20, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinte);
  background: var(--weiss);
  line-height: 1.5;
  font-size: 17px;
}
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { outline: none; flex: 1 0 auto; }
strong { font-weight: 700; }

/* Fortschritt oben */
.balken { position: fixed; inset: 0 0 auto 0; height: 5px; background: var(--linie); z-index: 20; }
.balken-fuellung { height: 100%; width: 0; background: var(--akzent); transition: width .35s ease; }

.kopf { padding: 18px 20px 0; max-width: 1040px; margin: 0 auto; }
.marke { font-weight: 800; font-size: 19px; color: var(--farbe); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.marke img { height: 34px; width: auto; display: block; }

.seite { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; text-align: center; }
.breit { max-width: 1040px; }

.oben { font-size: 15px; color: var(--leise); margin: 0 0 8px; }
h1, h2 { line-height: 1.2; margin: 0 0 14px; letter-spacing: -.01em; }
h1 { font-size: clamp(27px, 5.4vw, 40px); }
h2 { font-size: clamp(23px, 4.2vw, 32px); }
.hinweis { color: var(--leise); font-size: 15px; margin: -4px 0 22px; }
.unterzeile { margin: 18px 0 6px; }

.bild { width: 100%; max-width: 560px; border-radius: var(--rund); display: block; margin: 18px auto; }

.fakten { list-style: none; padding: 0; margin: 14px 0 24px; display: grid; gap: 6px; }

/* Knöpfe */
.knopf {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: 12px 26px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--farbe); color: var(--farbe-text); font: inherit; font-weight: 700; font-size: 18px;
  text-decoration: none; transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.knopf small { font-weight: 500; font-size: 14px; opacity: .9; }
@media (hover: hover) { .knopf:hover { transform: translateY(-1px); } }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.knopf.blass { opacity: .5; box-shadow: none; }
.knopf-leise { background: var(--flaeche); color: var(--tinte); box-shadow: none; border: 1px solid var(--linie); }
.knopf:focus-visible, .karte-wahl:focus-visible, .zurueck:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.ja-nein { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin: 14px auto 0; }
.ja-nein .knopf { width: 100%; }
.nein-text { margin-top: 12px; color: var(--leise); font-size: 15px; }

/* Abschnitte der Startseite */
.abschnitt { padding: 40px 20px; }
.abschnitt:nth-of-type(even) { background: var(--flaeche); }
.abschnitt-innen { max-width: 1040px; margin: 0 auto; text-align: center; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0 26px; text-align: left; }
.info-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px; box-shadow: var(--schatten); }
.info-karte .icon { font-size: 28px; display: block; margin-bottom: 8px; }
.liste { list-style: none; padding: 0; margin: 20px auto 26px; max-width: 560px; text-align: left; display: grid; gap: 10px; }
.liste li { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 16px 12px 46px; position: relative; }
.liste li::before { content: "✓"; position: absolute; left: 14px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); color: var(--farbe); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.stimme { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px; text-align: left; box-shadow: var(--schatten); }
.stimme p { margin: 0 0 10px; }
.stimme .wer { font-weight: 700; font-size: 15px; }
.stimme .wer span { font-weight: 400; color: var(--leise); }

.start-text { max-width: 620px; margin: 0 auto 18px; color: var(--leise); }
.abschnitt-text { max-width: 620px; margin: -4px auto 0; color: var(--leise); }
.info-karte h3 { margin: 0 0 4px; font-size: 18px; }
.info-karte p { margin: 0; }
.kuerzel { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--farbe); color: var(--akzent); font-weight: 800; margin-bottom: 12px; }
.schritte { list-style: none; padding: 0; margin: 24px auto 28px; max-width: 620px; text-align: left; display: grid; gap: 12px; }
.schritte li { display: flex; gap: 14px; align-items: flex-start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: 18px; }
.schritte .nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--farbe); color: var(--akzent); font-weight: 800; font-size: 15px; }
.schritte h3 { margin: 2px 0 4px; font-size: 18px; }
.schritte p { margin: 0; color: var(--leise); }

/* ---------- Startbereich mit Grafik rechts ---------- */
.start-zwei { max-width: 1120px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; text-align: left; }
.start-zwei .ja-nein { margin-left: 0; }
.start-zwei .start-text { margin-left: 0; }
.vertrauen { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 15px; color: var(--leise); }
.start-zwei .vertrauen { justify-content: flex-start; }
.start:not(:has(.start-zwei)) .vertrauen { justify-content: center; }
.stapel { display: inline-flex; }
.stapel .kuerzel { width: 36px; height: 36px; margin: 0 0 0 -8px; font-size: 14px; border: 2px solid var(--weiss); }
.stapel .kuerzel:first-child { margin-left: 0; }

.eingang { background: var(--weiss); color: var(--tinte); border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); text-align: left; }
.eingang-kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.etikett { font-size: 12px; font-weight: 600; color: var(--leise); background: var(--flaeche); border-radius: 6px; padding: 2px 8px; }
.eingang-karte { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--flaeche); margin-top: 8px;
  animation: reinRechts .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.35s + var(--i) * .45s); }
.eingang-kopf + .eingang-karte { outline: 2px solid var(--akzent); outline-offset: -2px; background: var(--weiss); }
.eingang-karte .kuerzel { width: 40px; height: 40px; margin: 0; font-size: 14px; flex: none; }
.eingang-text { flex: 1; display: grid; line-height: 1.3; }
.eingang-text small { color: var(--leise); font-size: 13px; }
.eingang-zeit { font-size: 12px; color: var(--leise); white-space: nowrap; }
@keyframes reinRechts { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- Hervorhebung (große Zahl) ---------- */
.hervorhebung { display: flex; gap: 22px; align-items: center; max-width: 680px; margin: 26px auto 12px; padding: 22px 24px; border-radius: var(--rund); background: var(--farbe); color: #fff; text-align: left; }
.hv-zahl { display: grid; justify-items: center; flex: none; min-width: 120px; }
.hv-zahl span { font-size: 64px; font-weight: 800; line-height: 1; color: var(--akzent); letter-spacing: -.04em; }
.hv-zahl small { font-size: 13px; text-align: center; max-width: 130px; line-height: 1.3; opacity: .85; margin-top: 4px; }
.hv-text p { margin: 0; }
.hv-klein { font-size: 13px; font-weight: 700; color: var(--akzent); margin-bottom: 4px !important; text-transform: none; }

/* ---------- Ablauf als Zeitstrahl (Desktop waagerecht) ---------- */
@media (min-width: 900px) {
  .schritte.zeitstrahl { max-width: 1040px; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
  .schritte.zeitstrahl::before { content: ""; position: absolute; left: 12%; right: 12%; top: 37px; height: 2px; background: var(--akzent); }
  .schritte.zeitstrahl li { flex-direction: column; align-items: center; text-align: center; position: relative; padding: 22px 18px; }
  .schritte.zeitstrahl .nr { width: 36px; height: 36px; outline: 6px solid var(--weiss); }
}

/* ---------- Fragen: Fortschrittspunkte, Sprechblase, Kacheln ---------- */
.punkte { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; }
.punkte span { width: 28px; height: 5px; border-radius: 3px; background: var(--linie); transition: background .3s; }
.punkte .fertig { background: var(--farbe); }
.punkte .jetzt { background: var(--akzent); }
.berater { display: flex; align-items: flex-end; gap: 10px; max-width: 520px; margin: 0 auto 18px; text-align: left; animation-delay: .1s; }
.berater .kuerzel { width: 40px; height: 40px; margin: 0; flex: none; font-size: 15px; }
.blase { position: relative; margin: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 15px; line-height: 1.45; }
.blase .wer { display: block; font-size: 12px; font-weight: 700; color: var(--leise); margin-bottom: 2px; }

.wahl.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 880px; margin-left: auto; margin-right: auto; }
.wahl.kacheln-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.kacheln .karte-wahl .txt { -webkit-hyphens: auto; hyphens: auto; }
.kacheln .karte-wahl { flex-direction: column; justify-content: center; text-align: center; gap: 12px; min-height: 168px; padding: 22px 14px 18px; position: relative;
  animation: rein .35s ease both; animation-delay: calc(var(--i) * .06s); }
.kacheln .karte-wahl .txt { flex: none; font-weight: 600; line-height: 1.3; }
.kacheln .karte-wahl .kreis { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; }
.icon-linie { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--flaeche); color: var(--farbe); transition: background .2s, transform .2s; }
.icon-linie svg { width: 28px; height: 28px; }
.kacheln .icon:not(.icon-linie) { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--flaeche); font-size: 34px; line-height: 1; transition: background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.kacheln .karte-wahl[aria-checked="true"] .icon, .kacheln .karte-wahl[aria-pressed="true"] .icon { background: var(--akzent); transform: scale(1.06); }
@media (hover: hover) { .kacheln .karte-wahl:hover { transform: translateY(-2px); } .kacheln .karte-wahl:hover .icon { background: var(--akzent); transform: scale(1.08) rotate(-6deg); } }

/* ---------- Emojis als Bilder (überall gleich, egal ob iPhone, Android oder Windows) ---------- */
.emo { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .03em; vertical-align: -.24em; object-fit: contain; -webkit-user-drag: none; }
.icon > .emo, .li-icon > .emo, .bs-emoji > .emo, .kuerzel-emoji > .emo, .post-herz > .emo { display: block; width: 1.1em; height: 1.1em; margin: 0; }

/* ---------- Überschrift mit wechselndem Wort ---------- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wechsel { display: inline-grid; justify-items: start; vertical-align: bottom; white-space: nowrap; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.wechsel > span { grid-area: 1 / 1; white-space: nowrap; padding-bottom: .04em;
  background: linear-gradient(var(--akzent), var(--akzent)) 0 100% / 100% .08em no-repeat; }
html:not(.lebendig) .wechsel > span:not(.an) { display: none; }
.lebendig .wechsel > span { opacity: 0; transform: translateY(.4em); background-size: 0 .08em;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1), background-size .5s cubic-bezier(.2, .7, .2, 1); }
.lebendig .wechsel > span.an { opacity: 1; transform: none; background-size: 100% .08em; transition-delay: .1s, .1s, .45s; }
.lebendig .wechsel > span.raus { opacity: 0; transform: translateY(-.4em); background-size: 100% .08em; transition-delay: 0s; }
.start h1 + .ja-nein { margin-top: 30px; }

/* ---------- Handy mit Beispiel-Anzeige und eingehenden Bewerbungen ---------- */
.buehne { position: relative; display: flex; justify-content: center; padding: 6px 0 10px; }
.handy { width: 290px; background: #0a1d17; border-radius: 46px; padding: 10px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(238, 242, 234, .16); }
.handy-schirm { background: #fff; color: #111; border-radius: 36px; overflow: hidden; text-align: left; font-size: 13px; line-height: 1.35; }
.handy-status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 13px 24px 8px; font-size: 12px; font-weight: 700; }
.handy-insel { position: absolute; left: 50%; top: 9px; width: 84px; height: 22px; margin-left: -42px; background: #0a1d17; border-radius: 12px; }
.handy-akku { position: relative; width: 22px; height: 11px; border: 1.5px solid #111; border-radius: 3px; }
.handy-akku::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: #111; border-radius: 1px; }
.post-kopf { display: flex; align-items: center; gap: 9px; padding: 4px 12px 9px; }
.post-kopf b { display: block; font-size: 13px; }
.post-kopf small { display: block; color: #6b7280; font-size: 11px; }
.post-logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--farbe); color: var(--akzent); font-size: 11px; font-weight: 800; }
.post-bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e5e7eb; }
.post-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-herz { position: absolute; left: 50%; top: 50%; font-size: 72px; line-height: 1; opacity: 0; transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.post-knopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--farbe); color: #fff; font-weight: 700; font-size: 13px; }
.post-icons { display: flex; gap: 12px; padding: 10px 12px 4px; }
.post-icons svg { width: 21px; height: 21px; }
.post-text { margin: 0; padding: 2px 12px 16px; font-size: 12.5px; }
.meldungen { position: absolute; left: -18px; bottom: 64px; width: 250px; display: flex; flex-direction: column; }
.meldung { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; max-height: 90px; overflow: hidden; background: #fff; color: var(--tinte); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .24); text-align: left; }
.meldung > img, .meldung > .kuerzel { flex: none; width: 38px; height: 38px; margin: 0; border-radius: 50%; object-fit: cover; font-size: 13px; }
.meldung-text { display: grid; line-height: 1.25; }
.meldung-text b { font-size: 13.5px; }
.meldung-text small { font-size: 12px; color: var(--leise); }
.bild-unterschrift { margin: 8px 0 0; font-size: 13px; text-align: center; opacity: .75; }
@media (min-width: 900px) { .meldungen { left: auto; right: calc(50% + 40px); } }

/* ---------- Ablauf mit Fotos ---------- */
.bildschritte { list-style: none; padding: 0; margin: 28px auto 32px; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }
.bildschritte li { background: var(--weiss); border-radius: var(--rund); overflow: hidden; padding-bottom: 20px; }
.bs-bild { position: relative; aspect-ratio: 4 / 3; background: var(--flaeche); }
.bs-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-nr { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--farbe); color: var(--akzent); font-weight: 800; font-size: 14px; }
.bs-emoji { position: absolute; right: 14px; bottom: -24px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--weiss); font-size: 25px; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.bildschritte h3 { margin: 22px 18px 4px; font-size: 18px; line-height: 1.25; }
.bildschritte p { margin: 0 18px; color: var(--leise); font-size: 15px; line-height: 1.45; }

/* ---------- Liste als Reihe mit Emojis ---------- */
.liste.liste-icons { max-width: 1040px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.liste.liste-icons li { display: flex; gap: 14px; align-items: center; padding: 18px; }
.liste.liste-icons li::before { content: none; }
.li-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--flaeche); font-size: 24px; line-height: 1; }
.liste-icons strong { display: block; line-height: 1.3; }
.liste-icons small { display: block; margin-top: 2px; color: var(--leise); font-size: 15px; line-height: 1.4; }

/* ---------- Karten mit Emoji am Kürzel und großer Zahl ---------- */
.kuerzel { position: relative; }
img.kuerzel { object-fit: cover; padding: 0; background: var(--flaeche); }
.kopfbild { position: relative; display: inline-block; margin-bottom: 12px; }
.kopfbild .kuerzel { margin: 0; }
.kuerzel-emoji { position: absolute; right: -6px; bottom: -4px; font-size: 22px; line-height: 1; }
.info-karte .kuerzel.foto { width: 104px; height: 104px; }

/* Personen-Karten (Team): 3 nebeneinander, auf schmalen Bildschirmen 2 + die dritte mittig darunter */
.raster.raster-personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) {
  .raster.raster-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-left: auto; margin-right: auto; }
  .raster.raster-personen > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}
@media (max-width: 480px) {
  .raster.raster-personen { gap: 10px; }
  .raster.raster-personen > :last-child:nth-child(odd) { width: calc(50% - 5px); }
  .raster.raster-personen .info-karte { padding: 18px 10px 16px; }
  .raster.raster-personen .info-karte .kuerzel.foto { width: 80px; height: 80px; }
  .raster.raster-personen .info-karte h3 { font-size: 17px; }
  .raster.raster-personen .info-karte .karte-zahl { font-size: 15px; line-height: 1.3; }
  .raster.raster-personen .info-karte p { font-size: 14px; line-height: 1.4; }
}
.info-karte .kuerzel-emoji { font-size: 26px; right: -2px; bottom: 0; }
.info-karte .karte-zahl { margin: 2px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--tinte); }

/* ---------- Sprechblase: „tippt …“ ---------- */
.tippen { display: inline-flex; gap: 4px; padding: 6px 2px 4px; }
.tippen i { width: 7px; height: 7px; border-radius: 50%; background: var(--leise); opacity: .35; animation: tippen 1s infinite; }
.tippen i:nth-child(2) { animation-delay: .15s; }
.tippen i:nth-child(3) { animation-delay: .3s; }
.berater.schreibt .blase-text { display: none; }
.berater:not(.schreibt) .tippen { display: none; }
@keyframes tippen { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Konfetti ---------- */
#konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
#konfetti i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; animation: fallen 2.8s cubic-bezier(.25, .6, .4, 1) both; }
@keyframes fallen { 0% { transform: translate(0, -20px) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--wind), 105vh) rotate(var(--dreh)); opacity: 0; } }

/* ---------- Bewegung (nur mit config.js animationen: true und ohne „weniger Bewegung“) ---------- */
.lebendig .start-inhalt > * { animation: hoch .7s cubic-bezier(.2, .7, .2, 1) both; }
.lebendig .start-inhalt > :nth-child(2) { animation-delay: .07s; }
.lebendig .start-inhalt > :nth-child(3) { animation-delay: .14s; }
.lebendig .start-inhalt > :nth-child(4) { animation-delay: .21s; }
.lebendig .start-inhalt > :nth-child(5) { animation-delay: .28s; }
.lebendig .start-inhalt > :nth-child(n+6) { animation-delay: .35s; }
.lebendig .start-bild { animation: hoch .9s .2s cubic-bezier(.2, .7, .2, 1) both; }
.lebendig .handy { animation: schweben 6s 1.2s ease-in-out infinite; }
.lebendig .post-herz { animation: herz 5.6s 2.6s ease-out infinite; }
.lebendig .post-pfeil { display: inline-block; animation: stups 1.8s ease-in-out infinite; }
.lebendig .meldung { animation: meldungRein .55s cubic-bezier(.2, .8, .2, 1) both; }
.lebendig .meldung.weg { animation: meldungRaus .42s ease both; }
/* Weiter-Knöpfe: Pfeil schiebt sanft nach rechts, der Knopf wackelt alle paar Sekunden kurz
   (nur wenn er bereit ist – ein blasser „Weiter“ bleibt ruhig, bis eine Antwort gewählt ist) */
.knopf-zeile { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.pfeil { display: inline-block; font-weight: 800; }
.lebendig .pfeil { animation: stups 1.6s ease-in-out infinite; }
.lebendig .knopf:not(.knopf-leise):not(.blass):not(:disabled) { animation: anstupsen 5s ease-in-out 2.5s infinite; }
@media (hover: hover) { .lebendig .knopf:hover { animation-play-state: paused; } .lebendig .knopf:hover .pfeil { transform: translateX(4px); } }
/* Cookie-Hinweis: beide Knöpfe gleichwertig – keiner wird hervorgehoben */
.lebendig .cookie-box .knopf { animation: none !important; }

.lebendig .zeigen { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.lebendig .zeigen.da { opacity: 1; transform: none; }
.lebendig .zeigen .bs-emoji, .lebendig .zeigen .li-icon, .lebendig .zeigen .kuerzel-emoji { transform: scale(0); }
.lebendig .zeigen.da .bs-emoji, .lebendig .zeigen.da .li-icon, .lebendig .zeigen.da .kuerzel-emoji { animation: plopp .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 90ms + .35s); }
@media (hover: hover) {
  .lebendig .bildschritte li:not(.zeigen):hover .bs-emoji, .lebendig .liste-icons li:not(.zeigen):hover .li-icon { animation: hupf .6s cubic-bezier(.3, 1.6, .5, 1); }
  .bildschritte .bs-bild > img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .bildschritte li:hover .bs-bild > img { transform: scale(1.04); }
}

.lebendig .punkte .jetzt { animation: wachsen .45s cubic-bezier(.2, .7, .2, 1) both; }
.lebendig .blase-text { animation: rein .3s ease both; }
.lebendig .kacheln .karte-wahl[aria-checked="true"] .icon, .lebendig .kacheln .karte-wahl[aria-pressed="true"] .icon { animation: hupf .5s cubic-bezier(.3, 1.6, .5, 1); }
.lebendig .karte-wahl[aria-checked="true"] .kreis, .lebendig .karte-wahl[aria-pressed="true"] .kreis { animation: plopp .35s cubic-bezier(.3, 1.6, .5, 1); }
.lebendig .karte-wahl[aria-pressed="true"] > .icon:not(.icon-linie) { animation: hupf .5s cubic-bezier(.3, 1.6, .5, 1); }
.lebendig .kontakt-seite > * { animation: hoch .6s cubic-bezier(.2, .7, .2, 1) both; }
.lebendig .kontakt-seite > :nth-child(2) { animation-delay: .12s; }
.lebendig .danke .grosses-icon { animation: plopp .7s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
.lebendig .danke-schritte li { animation: hoch .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.45s + var(--i, 0) * .15s); }

@keyframes hoch { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes stups { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(5px); } }
@keyframes anstupsen {
  0%, 82%, 100% { transform: none; }
  85% { transform: rotate(-1.6deg) scale(1.03); }
  88% { transform: rotate(1.6deg) scale(1.03); }
  91% { transform: rotate(-1deg) scale(1.02); }
  94% { transform: rotate(.6deg) scale(1.01); }
  97% { transform: none; }
}
@keyframes plopp { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hupf { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-8deg); } 65% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes wachsen { from { width: 28px; } to { width: 44px; } }
@keyframes herz {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  6% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  10% { transform: translate(-50%, -50%) scale(.92); }
  14% { transform: translate(-50%, -50%) scale(1); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  32%, 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}
@keyframes meldungRein { from { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; transform: translateX(-18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes meldungRaus { to { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; transform: scale(.94); } }

/* ---------- Kontakt mit Zusammenfassung ---------- */
.kontakt-zwei { max-width: 1000px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px 40px; text-align: left; align-items: start; }
.kontakt-zwei .kontakt-kopf { grid-column: 1 / -1; text-align: center; margin-bottom: 8px; }
.kontakt-zwei .formular { max-width: none; margin: 0; background: var(--weiss); border-radius: var(--rund); padding: 24px; }
.kontakt-seite { display: grid; gap: 14px; }
.kontakt-seite .team { margin: 0; }
.kontakt-fuss { grid-column: 1 / -1; text-align: center; }
.angaben { background: var(--weiss); border-radius: var(--rund); padding: 20px 22px; }
.angaben h3 { margin: 0 0 10px; font-size: 17px; }
.angaben dl { margin: 0; display: grid; gap: 8px; }
.angaben dt { font-size: 12px; font-weight: 700; color: var(--leise); }
.angaben dd { margin: 0; font-size: 15px; line-height: 1.4; }
.angaben .aendern { margin-top: 12px; font-size: 14px; padding: 0; }
.team { display: flex; gap: 14px; align-items: flex-start; }
.team .kuerzel { flex: none; margin: 0; }
.form-hinweis { margin: 2px 0 0; font-size: 13px; color: var(--leise); text-align: center; }

/* ---------- Danke: nächste Schritte ---------- */
.danke-schritte { list-style: none; padding: 0; margin: 18px auto 22px; max-width: 460px; text-align: left; display: grid; gap: 0; }
.danke-schritte li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.danke-schritte li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--linie); }
.danke-schritte .nr { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--linie); background: var(--weiss); font-weight: 800; font-size: 14px; }
.danke-schritte .fertig .nr { background: var(--akzent); border-color: var(--akzent); color: var(--farbe); }
.danke-schritte h3 { margin: 4px 0 2px; font-size: 17px; }
.danke-schritte p { margin: 0; color: var(--leise); font-size: 15px; }

/* Fragen */
.schritt { font-size: 15px; color: var(--leise); margin: 0 0 10px; }
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 26px; text-align: left; }
.wahl.einspaltig { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
.karte-wahl {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; min-height: 64px;
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--tinte); text-align: left; box-shadow: var(--schatten);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
@media (hover: hover) { .karte-wahl:hover { border-color: var(--farbe); } }
.karte-wahl:active { transform: scale(.99); }
.karte-wahl .icon { font-size: 22px; flex: none; }
.karte-wahl .txt { flex: 1; }
.karte-wahl .kreis { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #b9c2bd; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: transparent; }
.karte-wahl[aria-pressed="true"], .karte-wahl[aria-checked="true"] { border-color: var(--farbe); background: color-mix(in srgb, var(--akzent) 14%, white); }
.karte-wahl[aria-pressed="true"] .kreis, .karte-wahl[aria-checked="true"] .kreis { background: var(--farbe); border-color: var(--farbe); color: var(--akzent); }

textarea, input[type=text], input[type=email], input[type=tel] {
  width: 100%; font: inherit; font-size: 17px; color: var(--tinte); padding: 15px 16px;
  border: 1.5px solid var(--linie); border-radius: 12px; background: var(--weiss);
}
textarea { min-height: 150px; resize: vertical; }
textarea:focus, input:focus { outline: none; border-color: var(--farbe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 45%, transparent); }

.zurueck { display: inline-block; margin-top: 22px; background: none; border: 0; color: var(--leise); font: inherit; font-size: 15px; cursor: pointer; text-decoration: underline; }

/* Kontaktformular */
.formular { max-width: 460px; margin: 0 auto; display: grid; gap: 12px; text-align: left; }
.formular label.feld { display: grid; gap: 4px; font-size: 14px; color: var(--leise); }
.namen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tel { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.tel .vorwahl { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; padding: 0 12px; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--flaeche); font-size: 16px; }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tinte); margin: 4px 0; }
.zustimmung input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--farbe); }
.zustimmung a { color: inherit; }
.fehler { color: #b42318; font-size: 15px; min-height: 1em; margin: 0; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.team { margin: 40px auto 0; max-width: 760px; background: color-mix(in srgb, var(--akzent) 16%, white); border-radius: var(--rund); padding: 22px; text-align: left; }
.team h3 { margin: 0 0 6px; font-size: 18px; }
.team p { margin: 0 0 8px; }
.team a { color: var(--farbe); font-weight: 700; }

.grosses-icon { font-size: 56px; margin: 10px 0 6px; }

/* Fuß */
.fuss { text-align: center; font-size: 13px; color: var(--leise); padding: 24px 20px 40px; }
.fuss a, .fuss button { color: var(--leise); font: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.fuss span { margin: 0 6px; }
.fuss-marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 28px; letter-spacing: -.04em; margin-bottom: 10px; }
.fuss-marke img { height: 34px; width: auto; }

/* Cookie-Hinweis */
.cookie-hg { position: fixed; inset: 0; background: rgba(10, 16, 13, .35); z-index: 40; display: grid; place-items: end center; padding: 16px; }
.cookie-box { background: var(--weiss); border-radius: 16px; max-width: 460px; width: 100%; padding: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); font-size: 15px; }
.cookie-box h2 { font-size: 18px; margin-bottom: 8px; }
.cookie-box p { margin: 0 0 12px; color: var(--leise); }
.cookie-box .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-box .knopf { min-height: 48px; font-size: 16px; width: 100%; }
.cookie-box a { color: inherit; }
/* Ablehnen und Einverstanden sehen gleich aus – keine Wahl wird hervorgehoben */
.cookie-box .knopf.cookie-wahl { background: var(--weiss); color: var(--tinte); border: 1.5px solid var(--tinte); box-shadow: none; }
@media (hover: hover) { .cookie-box .knopf.cookie-wahl:hover { background: var(--flaeche); } }

.einblenden { animation: rein .3s ease both; }
@keyframes rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .einblenden, .eingang-karte, .kacheln .karte-wahl { animation: none; }
  .balken-fuellung, .knopf, .karte-wahl, .kacheln .icon, .bildschritte .bs-bild > img { transition: none; }
  .bildschritte li:hover .bs-bild > img { transform: none; }
}

@media (max-width: 899px) {
  .start-zwei { grid-template-columns: 1fr; text-align: center; }
  .start-zwei .ja-nein, .start-zwei .start-text { margin-left: auto; }
  .start-zwei .vertrauen { justify-content: center; }
  .start-bild { max-width: 420px; width: 100%; margin: 0 auto; }
  .wahl.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl.kacheln-3 { grid-template-columns: 1fr; max-width: 520px; }
  .kacheln-3 .karte-wahl { flex-direction: row; min-height: 76px; text-align: left; justify-content: flex-start; }
  .kacheln-3 .karte-wahl .kreis { position: static; margin-left: auto; }
  .kontakt-zwei { grid-template-columns: 1fr; }
  .bildschritte { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .liste.liste-icons { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 640px) {
  .kacheln .karte-wahl { min-height: 140px; padding: 18px 10px 14px; font-size: 15px; }
  .vertrauen { flex-wrap: wrap; justify-content: center; font-size: 14px; }
  .icon-linie { width: 48px; height: 48px; }
  .kacheln .icon:not(.icon-linie) { width: 56px; height: 56px; font-size: 28px; }
  .handy { width: 252px; border-radius: 40px; padding: 9px; }
  .handy-schirm { border-radius: 31px; }
  .meldungen { left: -6px; bottom: 54px; width: 222px; }
  .meldung { padding: 8px 10px; }
  .meldung > img, .meldung > .kuerzel { width: 34px; height: 34px; }
  .bildschritte { gap: 10px; }
  .bildschritte h3 { margin: 20px 12px 2px; font-size: 16px; }
  .bildschritte p { margin: 0 12px; font-size: 14px; }
  .bildschritte li { padding-bottom: 16px; }
  .bs-emoji { width: 42px; height: 42px; font-size: 21px; bottom: -20px; right: 10px; }
  .bs-nr { width: 26px; height: 26px; font-size: 13px; left: 8px; top: 8px; }
  .hervorhebung { flex-direction: column; text-align: center; }
  .kontakt-zwei .formular { padding: 18px; }
  body { font-size: 16px; }
  .wahl { grid-template-columns: 1fr; }
  .ja-nein { grid-template-columns: 1fr; }
  .namen { grid-template-columns: 1fr; }
  .seite { padding-top: 22px; }
  .knopf { width: 100%; }
  .cookie-box .reihe { grid-template-columns: 1fr; }
}