/* =====================================================================
   Glückauf Consulting – Mitarbeiter- und Kundengewinnung
   Glückauf Consulting auf pre9-Basis (19.10.2026): Navy #0A2238, Markengelb #FCC302, Markenblau #0E91D1 (Text auf Hell #0A6FA3)
   ===================================================================== */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/figtree-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/figtree-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/figtree-500-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/figtree-600-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/figtree-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/figtree-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tinte: #0A2238;
  --tinte-2: #0F2E4A;
  --tinte-3: #174468;
  --text: #1A2533;
  --grau: #4F5D6E;
  --linie: #DAE3EC;
  --hell: #F1F6FA;
  --weiss: #FFFFFF;
  --gruen: #FCC302; --blau: #0E91D1; /* Namen aus pre9 behalten: --gruen = Akzent (Gelb), --gruen-tief = Text-Blau */
  --gruen-tief: #0A6FA3;
  --gruen-hell: #E3F3FB;
  --gelb: #FCC302;
  --gelb-tief: #8A6A00;
  --auf-dunkel: #C4D3E2;
  --radius: 14px;
  --radius-s: 10px;
  --schatten: 0 14px 40px rgba(10, 34, 56, .10);
  --kopf: 72px;

  --menue-hg: #fff; --menue-farbe: #0A2238; --menue-linie: #E2E5E9;
  --menue-schleier: rgba(10, 34, 56, .6); --menue-burger: #0A2238; --menue-kopf: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--weiss); overflow-x: hidden; /* Playbook: kein Querscroll bei 360 px (geparktes Handy-Menü) */ }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen-tief); text-underline-offset: .18em; }
a:hover { color: var(--tinte); }
h1, h2, h3 { color: var(--tinte); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
::selection { background: var(--gruen); color: var(--tinte); }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gelb); color: var(--tinte); padding: 10px 16px; border-radius: 8px; z-index: 300; font-weight: 700; }
.skip:focus { top: 12px; }

.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--gruen-tief); margin: 0 0 .9em; }
.lead { font-size: 1.15rem; color: var(--grau); max-width: 62ch; }
.klein { font-size: .9rem; }

/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: .85em 1.35em; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; text-align: center; }
.btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.btn:hover { transform: translateY(-1px); }
.btn--gross { padding: 1em 1.6em; font-size: 1.05rem; }
.btn--gelb { background: var(--gelb); color: var(--tinte); }
.btn--gelb:hover { background: #FFD43B; color: var(--tinte); }
.btn--hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--hell:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.btn--rand { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.btn--rand:hover { background: var(--tinte); color: #fff; }
.pfeil-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--gruen-tief); text-decoration: none; }
.pfeil-link svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.pfeil-link:hover svg, a:hover > .pfeil-link svg { transform: translateX(4px); }

/* ---------- Kopf ---------- */
/* KEIN backdrop-filter am Header: der macht ihn zum Bezugsrahmen fuer das position:fixed-Menue -> Panel haengt am Header, 296 px Querscroll (13.10.2026) */
.header { position: sticky; top: 0; z-index: 200; background: #fff; border-bottom: 1px solid var(--linie); }
.header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--kopf); }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); margin-right: auto; min-width: 0; }
.marke__zeichen { width: 42px; height: 42px; flex: 0 0 auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marke__name { font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; }
.marke__sub { font-size: .76rem; color: var(--grau); font-weight: 500; }
.menue { display: flex; align-items: center; gap: 22px; }
.menue > a:not(.btn) { color: var(--tinte); text-decoration: none; font-weight: 600; font-size: .97rem; padding: .3em 0; border-bottom: 2px solid transparent; }
.menue > a:not(.btn):hover, .menue > a[aria-current="page"] { border-bottom-color: var(--blau); }
.menue .btn { padding: .7em 1.2em; }
.menue__nur-mobil { display: none !important; }
.menue > a { white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 861px) { .menue { gap: 14px; } .menue > a:not(.btn) { font-size: .9rem; } .marke__sub { display: none; } .header__inner { gap: 16px; } }
@media (max-width: 860px) {
  .menue > a:not(.btn) { border-bottom: 1px solid var(--menue-linie); }
  .menue .btn { margin-top: 1rem; width: 100%; }
  .menue__nur-mobil { display: inline-flex !important; color: var(--tinte); }
}

/* ---------- Hero ---------- */
.hero { background: radial-gradient(900px 500px at 85% 20%, rgba(14,145,209,.25), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(252,195,2,.08), transparent 60%), var(--tinte); color: var(--auf-dunkel); padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--gruen); }
.hero .eyebrow { color: var(--gruen); }
.hero .lead { color: var(--auf-dunkel); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.hero__knoepfe--mitte { justify-content: center; }
.hero__fakten { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-weight: 600; color: #fff; font-size: .95rem; }
.hero__fakten li { display: flex; align-items: center; gap: .5em; }
.hero__fakten svg { width: 1.2em; height: 1.2em; color: var(--gruen); flex: 0 0 auto; }
.hero__fakten a { color: #fff; }
.hero__bild { display: flex; justify-content: center; }
.hero--unter { padding-top: clamp(32px, 5vw, 64px); }
.brotkrumen { font-size: .88rem; color: var(--auf-dunkel); margin-bottom: 1.2em; }
.brotkrumen a { color: var(--auf-dunkel); }
.recht .brotkrumen, .recht .brotkrumen a { color: var(--grau); }
@media (max-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(64px, 8vw, 112px) 0; }
.abschnitt--hell { background: var(--hell); }
.abschnitt--dunkel { background: var(--tinte); color: var(--auf-dunkel); }
.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel .eyebrow { color: var(--gruen); }
.abschnitt--dunkel .lead { color: var(--auf-dunkel); }
.abschnitt--oben { padding-top: clamp(36px, 5vw, 64px); }
.abschnitt__kopf { margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf--mitte .lead { margin-inline: auto; }
.abschnitt__kopf--zeile { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.mehr-link { margin: 28px 0 0; }
.mehr-link--mitte { text-align: center; }

.dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .dreier { grid-template-columns: minmax(0, 1fr); } }
.punkt { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px; }
.punkt__icon { width: 44px; height: 44px; color: var(--gruen-tief); background: var(--gruen-hell); border-radius: 12px; padding: 10px; margin-bottom: 18px; }
.punkt p { margin: 0; color: var(--grau); }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.zweispaltig--demo { align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: minmax(0, 1fr); } }

.haken { list-style: none; padding: 0; margin: 1.2em 0 1.4em; display: grid; gap: .6em; }
.haken li { position: relative; padding-left: 1.9em; }
.haken li::before { content: ''; position: absolute; left: 0; top: .2em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2238' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 62% no-repeat; }
.haken--hell li { color: #fff; }

/* Ablauf */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; position: relative; padding: 64px 24px 26px; background: var(--hell); border-radius: var(--radius); }
.ablauf li::before { content: counter(schritt); position: absolute; top: 20px; left: 24px; width: 34px; height: 34px; border-radius: 50%; background: var(--gruen); color: var(--tinte); font-weight: 700; display: grid; place-items: center; }
.ablauf p { margin: 0; color: var(--grau); }
@media (max-width: 1000px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }
/* Belege */
.screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.screen { margin: 0; background: #fff; border-radius: var(--radius); padding: 10px; box-shadow: var(--schatten); }
.screen img { border-radius: 8px; width: 100%; }
.screen figcaption { font-size: .85rem; color: var(--grau); padding: 10px 6px 4px; }



/* Bewertungen */
.bewertung-kopf { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--grau); }
.sterne { color: var(--gelb-tief); letter-spacing: .1em; }
.bewertungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bewertung { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.bewertung blockquote { margin: 0; flex: 1; }
.bewertung blockquote p { margin: 0; }
.bewertung--gross { grid-column: span 2; background: var(--tinte); border-color: var(--tinte); color: #fff; }
.bewertung--gross blockquote p { font-size: 1.2rem; line-height: 1.55; }
.bewertung--gross small { color: var(--auf-dunkel) !important; }
.bewertung figcaption { display: flex; align-items: center; gap: 12px; font-weight: 700; color: inherit; }
.bewertung figcaption small { display: block; font-weight: 500; color: var(--grau); font-size: .84rem; }
.kreis { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gruen); color: var(--tinte); font-weight: 700; flex: 0 0 auto; }
@media (max-width: 980px) { .bewertungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bewertungen { grid-template-columns: minmax(0, 1fr); } .bewertung--gross { grid-column: auto; } }

.logos { margin-top: 56px; }
.logos__titel { text-align: center; font-weight: 600; color: var(--grau); font-size: .95rem; }
.logos__liste { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.logos__liste li { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-s); height: 128px; display: grid; place-items: center; padding: 12px; }
.logos__liste img { max-height: 100px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.logos__liste li:hover img { filter: none; opacity: 1; }
@media (max-width: 800px) { .logos__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .logos__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-s); }
.abschnitt--hell .faq details { border-color: #DAE3EC; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; font-weight: 700; color: var(--tinte); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 500; color: var(--gruen-tief); }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 22px 18px; color: var(--grau); }
.faq details > div p { margin: 0; }

/* ---------- Kontakt & Formular ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }
.kontaktwege { display: grid; gap: 12px; margin-top: 28px; }
.kontaktweg { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; padding: 14px 16px; border-radius: var(--radius-s); background: var(--tinte-2); border: 1px solid var(--tinte-3); min-width: 0; }
.kontaktweg:hover { border-color: var(--gruen); color: #fff; }
.kontaktweg__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--gruen); color: var(--tinte); display: grid; place-items: center; flex: 0 0 auto; }
.kontaktweg__icon svg { width: 20px; height: 20px; }
.kontaktweg small { display: block; color: var(--auf-dunkel); font-size: .8rem; }
.kontaktweg strong { overflow-wrap: anywhere; }
.form-karte { background: #fff; color: var(--text); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 36px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.form-karte h3 { color: var(--tinte); font-size: 1.4rem; margin-bottom: .2em; }
.form__hinweis { color: var(--grau); font-size: .92rem; }
.form { display: block; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: .92rem; color: var(--tinte); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1rem; color: var(--tinte); background: #fff; border: 1.5px solid #CDD3DA; border-radius: var(--radius-s); padding: 12px 14px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(14,145,209,.25); }
.field input::placeholder, .field textarea::placeholder { color: #737B85; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 18px; font-size: .9rem; color: var(--grau); }
.consent-row input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--gruen-tief); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__status { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-s); font-weight: 600; }
.form__status.is-ok { background: var(--gruen-hell); color: #075A85; }
.form__status.is-err { background: #FDECEA; color: #8A1C12; }
.formular__ziel { display: none; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-s); font-weight: 600; }
.formular__ziel:target { display: block; }
.formular__ziel--ok { background: var(--gruen-hell); color: #075A85; }
.formular__ziel--fehler { background: #FDECEA; color: #8A1C12; }


/* ---------- Fuß ---------- */
.footer { background: #071A2C; color: var(--auf-dunkel); padding: 64px 0 28px; font-size: .95rem; }
.footer .marke { color: #fff; }
.footer .marke__zeichen { background: #fff; border-radius: 10px; padding: 3px; }
.footer .marke__sub { color: var(--auf-dunkel); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: .8em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; }
.footer a { color: var(--auf-dunkel); text-decoration: none; overflow-wrap: anywhere; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__slogan { margin: 16px 0; max-width: 34ch; }
.footer address { font-style: normal; }
.footer__unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid #123352; font-size: .88rem; }
.footer__unten nav { display: flex; gap: 18px; flex-wrap: wrap; }
.credit { opacity: .55; font-size: .85em; }
.credit:hover { opacity: 1; }

/* ---------- Rechtstexte, 404 ---------- */
.recht { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 100px); }
.recht .wrap { max-width: 820px; }
.recht h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.recht h2 { font-size: 1.3rem; margin-top: 1.8em; }
.recht address { font-style: normal; }
.recht p, .recht li, .recht address { overflow-wrap: anywhere; }
.stand { color: var(--grau); font-size: .9rem; margin-top: 2em; }
.fehlerseite { padding: clamp(72px, 10vw, 140px) 0; text-align: center; }
.fehlerseite .zahl { font-size: clamp(4rem, 12vw, 8rem); font-weight: 700; color: var(--gruen); line-height: 1; margin: 0 0 .1em; }
.fehlerseite .lead { margin-inline: auto; }

/* ---------- Entwurf-Badge ---------- */
.entwurf-badge { position: fixed; left: 12px; bottom: 12px; z-index: 150; background: var(--tinte); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: 7px 12px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: .92; }
.entwurf-badge:hover { color: var(--gelb); opacity: 1; }

/* ---------- dezentes Einblenden ---------- */
.js .zeige { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .zeige.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .zeige { opacity: 1; transform: none; transition: none; } }

/* ---------- Basis-Fassung: Porträt, Zertifikate, Leistungen, Know-how, Ansatz, Praxis ---------- */
.portraet { margin: 0; position: relative; width: min(440px, 100%); }
.portraet img { width: 100%; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.portraet figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(10,34,56,.88); backdrop-filter: blur(6px); border-radius: 12px; padding: 12px 16px; color: var(--auf-dunkel); font-size: .88rem; line-height: 1.4; border-left: 4px solid var(--gruen); }
.portraet figcaption b { display: block; color: #fff; font-size: 1.02rem; }
.portraet--hell img { box-shadow: var(--schatten); }
.abschnitt--schmal { padding: 40px 0 56px; border-bottom: 1px solid var(--linie); }
.zert-titel { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--grau); margin-bottom: 22px; }
.zertifikate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.zert { margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.zert a { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); box-shadow: 0 6px 16px rgba(10,34,56,.08); transition: transform .2s; }
.zert a:hover { transform: translateY(-2px) rotate(-1deg); }
.zert img { width: 84px; height: auto; }
.zert b { display: block; color: var(--tinte); font-size: .9rem; line-height: 1.3; }
.zert small { color: var(--grau); font-size: .8rem; }
@media (max-width: 1000px) { .zertifikate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .zertifikate { grid-template-columns: minmax(0, 1fr); } }

.leistungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.leistung { background: #fff; border: 1px solid #DAE3EC; border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; }
.leistung h3 { font-size: 1.35rem; }
.leistung__fuer { color: var(--grau); }
.leistung .haken { flex: 1; margin-bottom: 1.6em; }
.leistung .btn { align-self: flex-start; }
.leistung--dunkel { background: var(--tinte); border-color: var(--tinte); color: var(--auf-dunkel); box-shadow: 0 24px 60px rgba(10,34,56,.25); }
.leistung--dunkel h3 { color: #fff; }
.leistung--dunkel .leistung__fuer { color: var(--auf-dunkel); }
.leistung--dunkel .haken li { color: #fff; }
@media (max-width: 960px) { .leistungen { grid-template-columns: minmax(0, 1fr); } }

.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kachel { background: var(--hell); border-radius: var(--radius); padding: 26px 24px; color: var(--text); text-decoration: none; }
.kachel__icon { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--tinte); color: var(--gruen); margin-bottom: 16px; }
.kachel h3 { font-size: 1.12rem; margin-bottom: .35em; }
.kachel p { margin: 0; color: var(--grau); font-size: .97rem; }
.kachel--cta { background: var(--gruen); transition: transform .2s, box-shadow .2s; }
.kachel--cta:hover { transform: translateY(-2px); box-shadow: var(--schatten); color: var(--tinte); }
.kachel--cta .kachel__icon { background: var(--tinte); color: var(--gelb); }
.kachel--cta p { color: var(--tinte); font-weight: 700; display: flex; align-items: center; gap: .4em; }
.kachel--cta p svg { width: 1.1em; height: 1.1em; }
@media (max-width: 1000px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }

.abschnitt--dunkel strong { color: #fff; }
.grundsatz { margin: 0 0 32px; padding: 28px 30px; border-radius: var(--radius); background: var(--tinte-2); border-left: 5px solid var(--gruen); }
.grundsatz p { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.5; color: #fff; font-weight: 600; }
.grundsatz footer { font-size: .88rem; color: var(--auf-dunkel); }
.ziele-titel { font-weight: 700; color: #fff; }
.ziele { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ziele li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--tinte-2); border: 1px solid var(--tinte-3); color: #fff; font-weight: 600; font-size: .96rem; }
.ziele svg { width: 22px; height: 22px; color: var(--gruen); flex: 0 0 auto; }
@media (max-width: 420px) { .ziele { grid-template-columns: minmax(0, 1fr); } }

.praxis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.praxis .screen:nth-child(2), .praxis .screen:nth-child(4) { margin-top: 32px; }
.screen figcaption b { display: block; color: var(--tinte); font-size: .95rem; }
.praxis__hinweis { margin: 28px auto 0; max-width: 70ch; text-align: center; font-size: .92rem; color: var(--grau); }
@media (max-width: 1100px) { .praxis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .praxis .screen:nth-child(4) { margin-top: 0; } .praxis .screen:nth-child(3) { margin-top: -32px; } }
@media (max-width: 560px) { .praxis { grid-template-columns: minmax(0, 1fr); } .praxis .screen { margin-top: 0 !important; } }
.faktenkarte { background: var(--tinte); color: var(--auf-dunkel); border-radius: 18px; padding: clamp(26px, 4vw, 40px); box-shadow: var(--schatten); }
.faktenkarte__titel { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--gruen); }
.faktenkarte dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; margin: 22px 0 28px; }
.faktenkarte dt { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; }
.faktenkarte dd { margin: 8px 0 0; font-size: .95rem; }
.faktenkarte__fuss { display: flex; align-items: center; gap: .5em; margin: 0; padding-top: 18px; border-top: 1px solid var(--tinte-3); font-weight: 600; }
.faktenkarte__fuss svg { width: 1.2em; height: 1.2em; color: var(--gelb); }
.faktenkarte__fuss a { color: #fff; }
@media (max-width: 380px) { .faktenkarte dl { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Glückauf Consulting auf pre9-Basis (19.10.2026): neue Bausteine
   ===================================================================== */
.marke__zeichen { border-radius: 9px; }
.footer .marke__zeichen { background: none; padding: 0; }
.footer .marke__sub { color: var(--auf-dunkel); }
.hero__klein { margin: 12px 0 0; font-size: .88rem; color: var(--auf-dunkel); }
.entwurf-badge { cursor: default; }

/* Duo-Porträt im Hero */
.duo { position: relative; margin: 0; width: min(100%, 470px); }
.duo__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo__bilder img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); filter: grayscale(1) contrast(1.05); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.duo figcaption { margin-top: 16px; color: var(--auf-dunkel); font-size: .9rem; display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--gelb); }
.duo figcaption b { color: #fff; font-size: 1rem; }
@media (max-width: 900px) { .duo { margin-top: 12px; } }

/* Schwerpunkte mit Eingangskarten */
.schwerpunkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.schwerpunkt { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 4px; }
.schwerpunkt__dach { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gruen-tief); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; margin: 0 0 .6em; }
.schwerpunkt__dach svg { width: 20px; height: 20px; }
.schwerpunkt h3 { font-size: 1.3rem; }
.schwerpunkt .pfeil-link { margin-top: auto; padding-top: 14px; }
.eingang { background: var(--hell); border-radius: var(--radius-s); padding: 14px; margin: 10px 0 6px; }
.eingang__kopf { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-weight: 700; color: var(--tinte); font-size: .9rem; }
.eingang__kopf small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: var(--gruen-hell); color: var(--gruen-tief); padding: 3px 9px; border-radius: 999px; }
.eingang ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eingang li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; background: #fff; border-radius: 10px; padding: 10px 12px; border-left: 3px solid var(--gelb); }
.eingang li b { color: var(--tinte); font-size: .95rem; }
.eingang li span { grid-column: 1; font-size: .82rem; color: var(--grau); }
.eingang li i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .72rem; font-weight: 700; background: var(--tinte); color: var(--gelb); padding: 3px 9px; border-radius: 999px; }
.branchen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 36px; }
.branchen p { margin: 0; font-weight: 700; color: var(--tinte); }
.branchen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.branchen li { background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 600; color: var(--tinte); }
@media (max-width: 860px) { .schwerpunkte { grid-template-columns: minmax(0, 1fr); } }

.vergleich { list-style: none; margin: 44px auto 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.vergleich li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-s); background: var(--hell); }
.vergleich li p { margin: 0; }
.vergleich span { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.vergleich--nein span { background: #E3E8EE; color: var(--grau); }
.vergleich--ja { border: 2px solid var(--gelb); background: #fff !important; }
.vergleich--ja span { background: var(--gelb); color: var(--tinte); }

/* Besetzbarkeits-Check (Vorbild candidate-flow.de) */
.pruef { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pruef__liste { list-style: none; counter-reset: pr; margin: 24px 0 28px; padding: 0; display: grid; gap: 16px; }
.pruef__liste li { counter-increment: pr; position: relative; padding-left: 52px; display: grid; gap: 2px; }
.pruef__liste li::before { content: counter(pr); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--gelb); color: var(--tinte); font-weight: 800; display: grid; place-items: center; }
.pruef__liste b { color: var(--tinte); }
.pruef__liste span { color: var(--grau); font-size: .98rem; }
.pruefkarte { margin: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); border: 1px solid var(--linie); padding: 22px; }
.pruefkarte__kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; color: var(--tinte); margin-bottom: 16px; }
.pruefkarte__kopf > span { display: inline-flex; align-items: center; gap: 10px; }
.pruefkarte__zeichen { width: 30px; height: 30px; }
.pruefkarte__kopf small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--gruen-hell); color: var(--gruen-tief); padding: 4px 10px; border-radius: 999px; }
.pruefkarte__stelle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.pruefkarte__stelle div { background: var(--hell); border-radius: 10px; padding: 10px 12px; }
.pruefkarte__stelle dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); }
.pruefkarte__stelle dd { margin: 0; font-weight: 700; color: var(--tinte); font-size: .95rem; }
.pruefkarte__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pruefkarte__punkte li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: .93rem; }
.ampel { font-style: normal; font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ampel--gruen { background: #E3F2E6; color: #1D5A2A; }
.ampel--gelb { background: #FFF3C4; color: #7A5A00; }
.balken { grid-column: 1 / -1; display: block; height: 8px; background: var(--hell); border-radius: 99px; overflow: hidden; }
.balken em { display: block; height: 100%; background: linear-gradient(90deg, var(--blau), var(--gelb)); border-radius: inherit; }
.pruefkarte__ergebnis { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 10px; padding: 14px 16px; background: var(--tinte); color: #fff; border-radius: 10px; }
.pruefkarte__ergebnis svg { width: 24px; height: 24px; color: var(--gelb); flex: 0 0 auto; }
.pruefkarte__ergebnis span { display: grid; }
.pruefkarte__ergebnis small { color: var(--auf-dunkel); }
.pruefkarte figcaption { font-size: .8rem; color: var(--grau); }
@media (max-width: 860px) { .pruef { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .pruefkarte__stelle { grid-template-columns: minmax(0, 1fr); } .pruefkarte { padding: 16px; } }

/* Ablauf-Hinweis */
.hinweiszeile { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 28px auto 0; padding: 16px 20px; border-radius: 10px; background: var(--gruen-hell); }
.hinweiszeile svg { width: 22px; height: 22px; color: var(--gruen-tief); flex: 0 0 auto; margin-top: 2px; }

/* Team */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.person { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; align-items: start; }
.person__bild { width: 140px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; filter: grayscale(1); }
.person h3 { margin-bottom: .2em; }
.person__rolle { font-weight: 700; color: var(--gruen-tief); font-size: .88rem; margin-bottom: .7em; }
.person p:last-child { margin-bottom: 0; }
.faktenkarte--breit { margin-top: 24px; }
.faktenkarte--breit dl { margin: 0; }
.faktenkarte--breit dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .team { grid-template-columns: minmax(0, 1fr); } .faktenkarte--breit dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .person { grid-template-columns: minmax(0, 1fr); } .person__bild { width: 120px; } }

/* Kontakt: Ansprechpartner + Haken auf Dunkel */
.haken--hell li { color: #fff; }
.ansprech { display: flex; align-items: center; gap: 0; margin-top: 28px; }
.ansprech__bild { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tinte); filter: grayscale(1); }
.ansprech__bild + .ansprech__bild { margin-left: -14px; }
.ansprech p { margin: 0 0 0 14px; display: grid; color: var(--auf-dunkel); font-size: .9rem; }
.ansprech b { color: #fff; }
.kachel--cta { background: var(--gelb); }
.abschnitt--hell .kachel:not(.kachel--cta) { background: #fff; }
/* Logo nie vom Menü überdecken lassen (861–1120 px, 19.10.2026) */
.marke { flex: 0 0 auto; }
.marke__name { white-space: nowrap; }
@media (max-width: 1000px) and (min-width: 861px) { .menue { gap: 10px; } .menue > a:not(.btn) { font-size: .85rem; } .menue .btn { padding: .7em 1em; font-size: .88rem; } }

/* Kanal-Schaubild nach heidemannelbe.de (19.10.2026): Quellen -> Kurzbewerbung -> Stelle/Auftragsbuch. Keine erfundenen Zahlen. */
.kanal { display: grid; grid-template-columns: 220px 240px 290px 110px 260px; justify-content: center; align-items: center; height: 600px; margin: 0 auto 44px; }
.kanal__quellen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(5, 120px); align-items: center; justify-items: end; }
.kanal__quellen li { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 9px 16px; box-shadow: 0 6px 18px rgba(10,34,56,.05); min-width: 190px; }
.kanal__quellen b { display: block; font-size: .98rem; color: var(--tinte); line-height: 1.3; }
.kanal__quellen span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-tief); }
.kanal__linien, .kanal__pfeil { width: 100%; height: 600px; overflow: visible; }
.kanal__linien path { fill: none; stroke: #BFD9EA; stroke-width: 2; }
.kanal__pfeil path { fill: none; stroke: rgba(14,145,209,.55); stroke-width: 2.5; }
.kanal__pfeil .kanal__spitze { stroke: var(--blau); stroke-linecap: round; stroke-linejoin: round; }
.kanal circle { fill: var(--blau); }
.kanal__mitte { width: 290px; height: 290px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(14,145,209,.05), 0 0 0 11px rgba(14,145,209,.16), 0 30px 70px rgba(10,34,56,.12); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.kanal__dach { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-tief); margin: 0 0 10px; }
.kanal__koepfe { display: flex; margin-bottom: 12px; }
.kanal__kopf { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; filter: grayscale(1); box-shadow: 0 4px 10px rgba(10,34,56,.15); }
.kanal__kopf + .kanal__kopf { margin-left: -10px; }
.kanal__kopf--zeichen { filter: none; border-radius: 50%; }
.kanal__mitte b { font-size: 2.5rem; font-weight: 800; color: var(--tinte); line-height: 1.05; letter-spacing: -.02em; }
.kanal__mitte span { color: var(--grau); font-size: .92rem; }
.kanal__ziele { display: grid; grid-template-rows: repeat(2, 260px); align-items: center; }
.kanal__ziel { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; box-shadow: 0 14px 34px rgba(10,34,56,.08); border-left: 4px solid var(--gelb); }
.kanal__ziel h3 { font-size: 1.1rem; margin: 0 0 .4em; }
.kanal__ziel p:not(.kanal__dach) { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 4px; font-size: .9rem; line-height: 1.4; }
.kanal__ziel svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gruen-tief); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .kanal circle { display: none; } }
@media (max-width: 1180px) {
  .kanal { grid-template-columns: minmax(0, 1fr); height: auto; justify-items: center; }
  .kanal__linien, .kanal__pfeil { display: none; }
  .kanal__quellen { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-items: stretch; width: 100%; max-width: 720px; }
  .kanal__quellen li { min-width: 0; }
  .kanal__mitte { width: 250px; height: 250px; margin: 40px 0; position: relative; }
  .kanal__mitte::before, .kanal__mitte::after { content: ""; position: absolute; left: 50%; width: 2px; height: 40px; background: repeating-linear-gradient(180deg, var(--blau) 0 5px, transparent 5px 9px); }
  .kanal__mitte::before { top: -54px; } .kanal__mitte::after { bottom: -54px; }
  .kanal__ziele { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 720px; }
}
@media (max-width: 640px) { .kanal__quellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kanal__ziele { grid-template-columns: minmax(0, 1fr); } .kanal__mitte { width: 230px; height: 230px; } .kanal__mitte b { font-size: 2.1rem; } .kanal__quellen li { padding: 8px 12px; } .kanal__quellen b { font-size: .9rem; } .kanal__quellen span { font-size: .62rem; } }

/* Schaubild bewegt sich auch am Handy (19.10.2026): fließende Verbindungen, wandernde Punkte, Puls, Karten leuchten nacheinander */
.kanal__tropfen { display: none; }
@media (max-width: 1180px) {
  .kanal__mitte::before, .kanal__mitte::after { background-size: 2px 18px; animation: kanal-fliessen 1s linear infinite; }
  .kanal__tropfen { display: block; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 4px rgba(14,145,209,.18); opacity: 0; }
  .kanal__tropfen--oben { top: -54px; animation: kanal-tropfen 1.8s ease-in infinite; }
  .kanal__tropfen--unten { bottom: -14px; animation: kanal-tropfen 1.8s ease-in .9s infinite; }
  .kanal__tropfen--spaet { animation-delay: .9s; }
  .kanal__tropfen--unten.kanal__tropfen--spaet { animation-delay: 1.8s; }
  .kanal__mitte { animation: kanal-puls 2.4s ease-in-out infinite; }
  .kanal__quellen li { animation: kanal-quelle 4.8s ease-in-out infinite; }
  .kanal__quellen li:nth-child(2) { animation-delay: .8s; } .kanal__quellen li:nth-child(3) { animation-delay: 1.6s; }
  .kanal__quellen li:nth-child(4) { animation-delay: 2.4s; } .kanal__quellen li:nth-child(5) { animation-delay: 3.2s; } .kanal__quellen li:nth-child(6) { animation-delay: 4s; }
  .kanal__ziel { animation: kanal-ziel 3.6s ease-in-out infinite; }
  .kanal__ziel + .kanal__ziel { animation-delay: 1.8s; }
}
@keyframes kanal-fliessen { from { background-position: 0 0; } to { background-position: 0 18px; } }
@keyframes kanal-tropfen { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
@keyframes kanal-puls { 0%, 100% { box-shadow: 0 0 0 10px rgba(14,145,209,.05), 0 0 0 11px rgba(14,145,209,.16), 0 30px 70px rgba(10,34,56,.12); } 50% { box-shadow: 0 0 0 18px rgba(14,145,209,.08), 0 0 0 19px rgba(14,145,209,.22), 0 30px 70px rgba(10,34,56,.12); } }
@keyframes kanal-quelle { 0%, 30%, 100% { border-color: var(--linie); box-shadow: 0 6px 18px rgba(10,34,56,.05); } 10% { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(14,145,209,.18), 0 6px 18px rgba(10,34,56,.08); } }
@keyframes kanal-ziel { 0%, 40%, 100% { transform: none; box-shadow: 0 14px 34px rgba(10,34,56,.08); } 15% { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(252,195,2,.35), 0 18px 40px rgba(10,34,56,.12); } }
@media (prefers-reduced-motion: reduce) { .kanal__mitte, .kanal__mitte::before, .kanal__mitte::after, .kanal__quellen li, .kanal__ziel { animation: none !important; } .kanal__tropfen { display: none !important; } }

/* Ablauf nach Benjamins Funnel-Blatt (19.10.2026): zwei Phasen + Kampagnen-Trichter */
.phasen { display: grid; gap: 24px; }
.phase--dunkel .phase__schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.phase--dunkel .phase__schritte li:not(:last-child)::after { left: 40px; right: -20px; top: 13px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--gelb) 0 4px, transparent 4px 8px); }
.phase__titel span svg { width: 20px; height: 20px; }
.phase { background: var(--hell); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.phase--dunkel { background: var(--tinte); color: var(--auf-dunkel); }
.phase__titel { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; color: var(--tinte); margin: 0 0 20px; }
.phase--dunkel .phase__titel { color: #fff; }
.phase__titel span { width: 38px; height: 38px; border-radius: 10px; background: var(--gelb); color: var(--tinte); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.phase__schritte { list-style: none; margin: 0; padding: 0; counter-reset: ph; display: grid; gap: 18px; }
.phase__schritte li { counter-increment: ph; position: relative; padding-left: 44px; display: grid; gap: 2px; }
.phase__schritte li::before { content: counter(ph); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--blau); color: var(--gruen-tief); font-weight: 700; font-size: .85rem; display: grid; place-items: center; background: #fff; }
.phase__schritte li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 32px; bottom: -16px; width: 2px; background: repeating-linear-gradient(180deg, var(--blau) 0 4px, transparent 4px 8px); opacity: .6; }
.phase--dunkel .phase__schritte li::before { background: var(--tinte); color: var(--gelb); border-color: var(--gelb); }
.phase--dunkel .phase__schritte li:not(:last-child)::after { background: repeating-linear-gradient(180deg, var(--gelb) 0 4px, transparent 4px 8px); }
.phase__schritte b { color: var(--tinte); }
.phase--dunkel .phase__schritte b { color: #fff; }
.phase__schritte span { font-size: .95rem; color: var(--grau); }
.phase--dunkel .phase__schritte span { color: var(--auf-dunkel); }

@media (max-width: 860px) { .phase--dunkel .phase__schritte { grid-template-columns: minmax(0, 1fr); gap: 18px; } .phase--dunkel .phase__schritte li:not(:last-child)::after { left: 13px; right: auto; top: 32px; bottom: -16px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gelb) 0 4px, transparent 4px 8px); } }

/* Schritte im dunklen Kasten: Kreis über dem Titel, Linie läuft nur zwischen den Kreisen */
@media (min-width: 861px) {
  .phase--dunkel .phase__schritte li { padding: 44px 0 0; }
  .phase--dunkel .phase__schritte li:not(:last-child)::after { left: 38px; right: -18px; top: 13px; }
}

/* Funnel-Demo „So bewirbt sich eine Fachkraft“ (19.10.2026, Vorbild: Lindner-Bau-Sofortformular) */
.fd { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 1000px; margin: 0 auto; }
.fd-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-schritt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s; }
.fd-schritt:hover { background: #fff; }
.fd-schritt:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.fd-schritt b { display: block; color: var(--tinte); }
.fd-schritt small { display: block; color: var(--grau); font-size: .9rem; line-height: 1.45; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s, opacity .35s; }
.fd-nr { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #fff; color: var(--tinte); border: 2px solid var(--linie); transition: background .25s, border-color .25s; }
.fd-schritt.ist-aktiv { background: #fff; border-color: var(--linie); box-shadow: var(--schatten); }
.fd-schritt.ist-aktiv .fd-nr { background: var(--gelb); border-color: var(--gelb); }
.fd-schritt.ist-aktiv small { max-height: 8em; opacity: 1; margin-top: 2px; }
.fd-buehne { display: grid; justify-items: center; gap: 14px; }
.fd-handy { position: relative; width: 290px; }
.fd-handy__rand { position: relative; height: 590px; background: #0B0F14; border-radius: 40px; padding: 12px; box-shadow: 0 30px 70px rgba(10,34,56,.35), inset 0 0 0 2px #2A3340; overflow: hidden; }
.fd-handy__rand::before { content: ''; position: absolute; top: 18px; left: 50%; width: 80px; height: 20px; margin-left: -40px; background: #0B0F14; border-radius: 999px; z-index: 5; }
.fd-etikett { position: absolute; top: -12px; right: -10px; background: var(--gelb); color: var(--tinte); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; z-index: 6; }
.fd-screen { position: absolute; inset: 12px; border-radius: 30px; overflow: hidden; background: #fff; font-size: .82rem; line-height: 1.35; }
.js .fd .fd-screen { opacity: 0; transform: translateX(30px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.js .fd .fd-screen.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; }
/* Feed */
.fd-feed { height: 100%; display: flex; flex-direction: column; background: #000; color: #fff; }
.fd-feed__kopf { display: flex; align-items: center; gap: 8px; padding: 38px 12px 10px; background: #fff; color: #111; }
.fd-feed__kopf small { display: block; color: #777; font-size: .7rem; }
.fd-logo { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); font-weight: 800; font-size: .7rem; }
.fd-punkte { margin-left: auto; color: #333; }
.fd-feed__bild { position: relative; flex: 1; overflow: hidden; }
.fd-feed__foto { width: 100%; height: 100%; object-fit: cover; }
.js .fd--sichtbar .ist-aktiv .fd-feed__foto { animation: fd-zoom 7s ease-out both; }
.fd-feed__titel { position: absolute; left: 12px; right: 12px; bottom: 74px; display: grid; justify-items: center; text-align: center; text-transform: uppercase; line-height: 1.05; gap: 3px; }
.fd-feed__titel small { font-size: .68rem; font-weight: 800; background: #fff; color: var(--tinte); padding: 3px 8px; }
.fd-feed__titel span { font-size: 1.12rem; font-weight: 900; background: var(--gelb); color: var(--tinte); padding: 5px 10px; }
.fd-feed__untertitel { position: absolute; left: 14px; right: 14px; bottom: 30px; text-align: center; background: var(--tinte); color: #fff; font-weight: 700; font-size: .75rem; padding: 6px 8px; border-radius: 4px; }
.fd-play { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; font-size: .6rem; }
.fd-feed__cta { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: var(--blau); color: #fff; font-weight: 700; }
.fd-feed__fuss { display: flex; gap: 16px; padding: 10px 14px 14px; background: #fff; color: #222; font-size: .8rem; }
/* Formular */
.fd-form { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 40px 16px 16px; background: #10151C; color: #fff; }
.fd-form__kopf { display: flex; justify-content: space-between; align-items: center; color: #C9D1DB; font-size: .78rem; font-weight: 600; }
.fd-form__kopf b { font-size: 1.1rem; font-weight: 400; }
.fd-balken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fd-balken i { height: 3px; border-radius: 2px; background: #2E3743; }
.fd-balken i.an { background: linear-gradient(90deg, var(--gelb), var(--blau)); }
.fd-frage { font-weight: 800; font-size: 1.02rem; margin: 10px 0 4px; line-height: 1.3; }
.fd-klein { color: #9AA5B1; font-size: .74rem; margin: -6px 0 2px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-chip { border: 1px solid #3A4552; border-radius: 999px; padding: 8px 12px; font-weight: 600; color: #E3E8EE; }
.fd-chip.ist-gewaehlt { background: var(--gelb); border-color: var(--gelb); color: var(--tinte); }
.js .fd--sichtbar .ist-aktiv .fd-chip.ist-gewaehlt { animation: fd-tipp 1.4s ease .8s both; }
.fd-feld { display: grid; border: 1px solid #3A4552; border-radius: 10px; padding: 7px 10px; color: #fff; font-size: .82rem; overflow-wrap: anywhere; }
.fd-feld small { color: #9AA5B1; font-size: .68rem; }
.fd-knopf { margin-top: auto; text-align: center; padding: 12px; border-radius: 10px; background: var(--blau); color: #fff; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 6px; }
.fd-knopf svg { width: 16px; height: 16px; }
.fd-knopf--hell { background: #2E3743; }
.fd-knopf--gelb { background: var(--gelb); color: var(--tinte); }
.fd-danke { justify-content: center; text-align: center; align-items: center; }
.fd-danke p { color: #C9D1DB; margin: 0; }
.fd-danke__haken { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); color: var(--tinte); font-size: 2rem; font-weight: 900; }
.js .fd--sichtbar .ist-aktiv .fd-danke__haken { animation: fd-pop .6s ease both; }
.fd-danke .fd-knopf { width: 100%; }
/* Postfach */
.fd-mail { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 40px 14px 16px; background: var(--hell); color: var(--tinte); }
.fd-mail__kopf { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; }
.fd-mail__kopf svg { width: 18px; height: 18px; color: var(--blau); }
.fd-mail__karte { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 8px 20px rgba(10,34,56,.1); border-left: 4px solid var(--gelb); }
.js .fd--sichtbar .ist-aktiv .fd-mail__karte { animation: fd-rein .6s ease .2s both; }
.fd-mail__neu { display: inline-block; font-size: .66rem; font-weight: 700; color: var(--gruen-tief); background: var(--gruen-hell); padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.fd-mail__karte b { display: block; margin-bottom: 8px; }
.fd-mail__karte dl { margin: 0; display: grid; gap: 4px; }
.fd-mail__karte dl div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--linie); padding-top: 4px; }
.fd-mail__karte dt { color: var(--grau); }
.fd-mail__karte dd { margin: 0; font-weight: 700; text-align: right; }
.fd-steuerung { display: flex; align-items: center; gap: 12px; }
.fd-steuerung button { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--linie); color: var(--tinte); font-size: 1.4rem; line-height: 1; }
.fd-steuerung button:focus-visible { outline: 3px solid var(--blau); }
.fd-punkte-nav { display: flex; gap: 6px; }
.fd-punkte-nav i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie); transition: width .25s, background .25s; }
.fd-punkte-nav i.an { width: 22px; border-radius: 4px; background: var(--gelb); }
.fd-hinweis { text-align: center; color: var(--grau); font-size: .85rem; margin: 28px auto 0; max-width: 70ch; }
@keyframes fd-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fd-tipp { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(252,195,2,.6); } 40% { transform: scale(.94); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(252,195,2,0); } }
@keyframes fd-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fd-rein { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Ohne JS: alle Bildschirme nebeneinander zum Wischen */
html:not(.js) .fd { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .fd .fd-steuerung { display: none; }
html:not(.js) .fd .fd-handy { width: 100%; }
html:not(.js) .fd .fd-handy__rand { height: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; background: none; box-shadow: none; padding: 0; border-radius: 0; }
html:not(.js) .fd .fd-handy__rand::before { display: none; }
html:not(.js) .fd .fd-screen { position: relative; inset: auto; flex: 0 0 260px; height: 540px; scroll-snap-align: center; border: 10px solid #0B0F14; }
html:not(.js) .fd .fd-schritt small { max-height: none; opacity: 1; }
@media (max-width: 860px) {
  .fd { grid-template-columns: minmax(0, 1fr); }
  .fd-buehne { order: -1; }
  .fd-schritte { gap: 4px; }
}
@media (max-width: 360px) { .fd-handy { width: 268px; } .fd-handy__rand { height: 560px; } }
@media (prefers-reduced-motion: reduce) { .js .fd .fd-screen { transition: none; } .js .fd--sichtbar .ist-aktiv .fd-feed__foto, .js .fd--sichtbar .ist-aktiv .fd-chip.ist-gewaehlt, .js .fd--sichtbar .ist-aktiv .fd-danke__haken, .js .fd--sichtbar .ist-aktiv .fd-mail__karte { animation: none; } }

/* Funnel-Demo v2 nach Benjamins Funnel-Blatt: Trichter-Stufen links, Handy rechts (19.10.2026) */
.fd-links { display: grid; gap: 14px; }
.fd-schritte--trichter { gap: 6px; justify-items: center; }
.fd-schritte--trichter li { width: 100%; display: flex; justify-content: center; }
.fd-schritt--trichter { width: var(--b) !important; min-width: 220px; background: var(--tinte); color: #fff; border-radius: 10px; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); padding: 10px 22px; }
.fd-schritt--trichter b { color: #fff; }
.fd-schritt--trichter small { color: var(--auf-dunkel); }
.fd-schritt--trichter .fd-nr { background: var(--tinte-2); color: var(--gelb); border-color: var(--tinte-3); }
.fd-schritt--trichter:hover { background: var(--tinte-2); }
.fd-schritt--trichter.ist-aktiv { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 10px 24px rgba(252,195,2,.35); }
.fd-schritt--trichter.ist-aktiv b { color: var(--tinte); }
.fd-schritt--trichter.ist-aktiv small { color: var(--tinte); }
.fd-schritt--trichter.ist-aktiv .fd-nr { background: #fff; border-color: #fff; color: var(--tinte); }
.fd-schritte--folge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: relative; padding-top: 18px; }
.fd-schritte--folge::before { content: '↓'; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); color: var(--blau); font-weight: 700; }
.fd-schritt--folge { background: #fff; border-color: var(--linie) !important; padding: 10px 12px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.fd-schritt--folge .fd-nr { width: 28px; height: 28px; font-size: .8rem; }
.fd-schritt--folge.ist-aktiv { border-color: var(--gelb) !important; box-shadow: 0 0 0 2px var(--gelb), var(--schatten); }
.fd-neben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: .88rem; color: var(--grau); }
.fd-neben li { border: 1px dashed var(--blau); border-radius: 10px; padding: 8px 12px; }
.fd-neben b { display: block; color: var(--gruen-tief); }
/* neue Bildschirme */
.fd-feed--scroll { overflow: hidden; }
.fd-fremd { background: #fff; color: #111; flex: 0 0 auto; }
.fd-fremd .fd-feed__kopf { padding-top: 38px; }
.fd-logo--grau { background: #D9DEE5; color: #55606C; }
.fd-fremd__bild { height: 150px; background: linear-gradient(135deg, #C9D6C1, #8FA889 60%, #5E7A63); }
.fd-rein { flex: 1; display: flex; }
.fd-rein .fd-feed { flex: 1; }
.fd-rein .fd-feed__kopf { padding-top: 10px; }
.js .fd--sichtbar .ist-aktiv .fd-feed--scroll > * { animation: fd-scroll 3.2s ease-in-out .3s both; }
.fd-video { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.3); }
.fd-video i { display: block; height: 100%; width: 35%; background: #fff; }
.js .fd--sichtbar .ist-aktiv .fd-video i { animation: fd-video 3.4s linear both; }
.fd-zeit { position: absolute; left: 10px; bottom: 8px; font-size: .62rem; color: #fff; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 4px; }
.fd-herz { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 4.2rem; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.4); opacity: 0; }
.js .fd--sichtbar .ist-aktiv .fd-herz { animation: fd-herz 1.6s ease .4s both; }
.fd-rot { color: #E0245E; font-weight: 700; }
.fd-feed__cta--klick { background: var(--gelb); color: var(--tinte); }
.js .fd--sichtbar .ist-aktiv .fd-feed__cta--klick { animation: fd-klick 1.4s ease .5s both; }
.fd-frage--klein { font-size: .86rem; margin: 6px 0 2px; }
.fd-form .fd-chip { padding: 6px 10px; font-size: .76rem; }
.js .fd--sichtbar .ist-aktiv .fd-knopf--klick { animation: fd-klick 1.4s ease .6s both; }
.fd-anruf { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 16px 16px; background: linear-gradient(180deg, var(--tinte), #071A2C); color: #fff; text-align: center; }
.fd-anruf__status { margin: 0; font-size: .74rem; color: #9FD3EE; }
.fd-anruf__bild { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte-3); font-weight: 800; font-size: 1.1rem; }
.js .fd--sichtbar .ist-aktiv .fd-anruf__bild { animation: fd-ring 1.8s ease-out infinite; }
.fd-check { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.fd-check li { background: rgba(255,255,255,.08); border-radius: 8px; padding: 7px 10px 7px 30px; position: relative; font-size: .8rem; }
.fd-check li::before { content: '✓'; position: absolute; left: 10px; color: var(--gelb); font-weight: 800; }
.js .fd--sichtbar .ist-aktiv .fd-check li { animation: fd-rein .4s ease both; }
.js .fd--sichtbar .ist-aktiv .fd-check li:nth-child(2) { animation-delay: .4s; } .js .fd--sichtbar .ist-aktiv .fd-check li:nth-child(3) { animation-delay: .8s; } .js .fd--sichtbar .ist-aktiv .fd-check li:nth-child(4) { animation-delay: 1.2s; }
.fd-urteil { margin-top: auto; width: 100%; background: var(--gelb); color: var(--tinte); font-weight: 800; padding: 11px; border-radius: 10px; }
.fd-termin { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 8px 20px rgba(10,34,56,.1); }
.fd-termin__tag { width: 52px; height: 52px; border-radius: 10px; background: var(--gelb); color: var(--tinte); display: grid; place-items: center; font-weight: 800; line-height: 1; text-align: center; font-size: .9rem; }
.fd-termin__tag small { display: block; font-size: .65rem; font-weight: 700; }
.fd-termin b { display: block; font-size: .82rem; }
.fd-termin small { color: var(--grau); font-size: .72rem; }
.fd-danke__haken svg { width: 32px; height: 32px; }
@keyframes fd-scroll { from { transform: translateY(0); } to { transform: translateY(-150px); } }
@keyframes fd-video { from { width: 0; } to { width: 100%; } }
@keyframes fd-herz { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes fd-klick { 0%, 100% { transform: none; } 30% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(252,195,2,.7); } 70% { transform: none; box-shadow: 0 0 0 14px rgba(252,195,2,0); } }
@keyframes fd-ring { 0% { box-shadow: 0 0 0 0 rgba(14,145,209,.6); } 100% { box-shadow: 0 0 0 18px rgba(14,145,209,0); } }
@media (max-width: 860px) {
  .fd-schritt--trichter { min-width: 0; padding: 8px 18px; }
  .fd-schritt--trichter .fd-nr { width: 28px; height: 28px; font-size: .8rem; }
  .fd-schritt { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 480px) { .fd-schritte--folge, .fd-neben { grid-template-columns: minmax(0, 1fr); } .fd-schritt--trichter { width: calc(var(--b) * .6 + 40%) !important; } }
@media (prefers-reduced-motion: reduce) { .js .fd--sichtbar .ist-aktiv .fd-feed--scroll > *, .js .fd--sichtbar .ist-aktiv .fd-video i, .js .fd--sichtbar .ist-aktiv .fd-herz, .js .fd--sichtbar .ist-aktiv .fd-feed__cta--klick, .js .fd--sichtbar .ist-aktiv .fd-knopf--klick, .js .fd--sichtbar .ist-aktiv .fd-anruf__bild, .js .fd--sichtbar .ist-aktiv .fd-check li { animation: none; } .fd-herz { opacity: 1; } }
.fd-ki { margin: -4px 0 0; font-size: .66rem; color: #9AA5B1; }

/* „Der Funnel im Detail“ (19.10.2026, Muster aus Lindner Bau + Gartenbau Lehmann) */
.fdt { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 64px); counter-reset: fdt; position: relative; }
.fdt::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--linie) 0 6px, transparent 6px 12px); }
.fdt__stufe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.fdt__stufe::before { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 6px var(--weiss), 0 0 0 8px var(--linie); z-index: 1; }
.fdt__stufe:nth-child(even) .fdt__text { order: 2; }
.fdt__nr { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-tief); margin: 0 0 .6em; }
.fdt__nr span { background: var(--tinte); color: var(--gelb); padding: 4px 10px; border-radius: 999px; letter-spacing: .06em; }
.fdt__text h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.fdt__bild { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten); }
/* Vergleich */
.fdt-vergleich figcaption { font-weight: 700; color: var(--tinte); margin-bottom: 14px; }
.fdt-vergleich__zeile { display: grid; gap: 6px; margin-bottom: 16px; }
.fdt-vergleich__zeile small { color: var(--grau); }
.fdt-balken { display: flex; height: 30px; border-radius: 8px; overflow: hidden; background: var(--hell); }
.fdt-balken i { font-style: normal; display: flex; align-items: center; padding: 0 10px; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.fdt-balken .m { background: var(--tinte); color: #fff; }
.fdt-balken .w { background: var(--blau); color: #fff; justify-content: flex-end; }
.js .fdt-balken i { transform-origin: left; animation: fdt-wachsen 1.4s ease both; animation-play-state: paused; }
.js .zeige.ist-sichtbar .fdt-balken i, .js .fdt__stufe .fdt-balken i { animation-play-state: running; }
.fdt__quelle { font-size: .76rem; color: var(--grau); margin: 4px 0 0; }
/* Zeitstrahl Video */
.fdt-zeitstrahl__balken { display: grid; grid-template-columns: 15% 65% 20%; border-radius: 10px; overflow: hidden; text-align: center; font-size: .72rem; color: #fff; }
.fdt-zeitstrahl__balken span { padding: 10px 4px; display: grid; gap: 2px; }
.fdt-zeitstrahl__balken b { font-size: .82rem; }
.fdt-zeitstrahl__balken .a { background: var(--gelb); color: var(--tinte); }
.fdt-zeitstrahl__balken .b { background: var(--tinte); }
.fdt-zeitstrahl__balken .c { background: var(--blau); }
.fdt-zeitstrahl__info { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.fdt-zeitstrahl__info li { border-left: 3px solid var(--linie); padding-left: 10px; }
.fdt-zeitstrahl__info li:first-child { border-color: var(--gelb); } .fdt-zeitstrahl__info li:nth-child(2) { border-color: var(--tinte); } .fdt-zeitstrahl__info li:last-child { border-color: var(--blau); }
/* Post-Gerüst */
.fdt-post { font-size: .9rem; }
.fdt-post__kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.fdt-post__zeile { margin: 0 0 10px; }
.fdt-post__zeile--hook { font-size: 1rem; }
.fdt-post__block { display: grid; gap: 5px; margin: 0 0 12px; }
.fdt-post__block b { font-size: .85rem; color: var(--tinte); }
.fdt-post__block span { height: 8px; border-radius: 4px; background: var(--hell); }
.fdt-post__block span.kurz { width: 60%; }
.fdt-post__cta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--hell); font-size: .82rem; }
.fdt-post__cta b { background: var(--blau); color: #fff; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
/* Fragen */
.fdt-fragen ol { list-style: none; margin: 0; padding: 0; counter-reset: fq; display: grid; gap: 8px; }
.fdt-fragen li { counter-increment: fq; display: grid; gap: 2px; padding: 10px 12px 10px 44px; position: relative; border-radius: 10px; background: var(--hell); }
.fdt-fragen li::before { content: counter(fq); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinte); color: var(--gelb); font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.fdt-fragen li span { font-size: .82rem; color: var(--grau); }
.fdt-fragen__fuss { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 600; font-size: .9rem; }
.fdt-fragen__fuss svg { width: 18px; height: 18px; color: var(--gruen-tief); }
/* Tempo */
.fdt-tempo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fdt-tempo li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; position: relative; }
.fdt-tempo li:not(:last-child)::after { content: ''; position: absolute; left: 116px; top: 36px; bottom: -10px; width: 2px; background: repeating-linear-gradient(180deg, var(--blau) 0 4px, transparent 4px 8px); }
.fdt-tempo span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gruen-tief); text-align: right; }
.fdt-tempo b { position: relative; padding: 8px 12px 8px 26px; border-radius: 8px; background: var(--hell); color: var(--tinte); }
.fdt-tempo b::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blau); }
.fdt-tempo li.ziel b { background: var(--gelb); }
.fdt-tempo li.ziel b::before { background: var(--tinte); }
/* Dauer */
.fdt-dauer__monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.fdt-dauer__monate i { height: 34px; border-radius: 6px; background: var(--tinte); opacity: .25; }
.fdt-dauer__monate i:nth-child(n+3) { opacity: .45; } .fdt-dauer__monate i:nth-child(n+6) { opacity: .7; } .fdt-dauer__monate i:nth-child(n+9) { opacity: 1; background: linear-gradient(180deg, var(--blau), var(--tinte)); }
.js .fdt-dauer__monate i { animation: fdt-monat 6s ease-in-out infinite; }
.fdt-dauer__monate i:nth-child(2) { animation-delay: .2s; } .fdt-dauer__monate i:nth-child(3) { animation-delay: .4s; } .fdt-dauer__monate i:nth-child(4) { animation-delay: .6s; }
.fdt-dauer__monate i:nth-child(5) { animation-delay: .8s; } .fdt-dauer__monate i:nth-child(6) { animation-delay: 1s; } .fdt-dauer__monate i:nth-child(7) { animation-delay: 1.2s; } .fdt-dauer__monate i:nth-child(8) { animation-delay: 1.4s; }
.fdt-dauer__monate i:nth-child(9) { animation-delay: 1.6s; } .fdt-dauer__monate i:nth-child(10) { animation-delay: 1.8s; } .fdt-dauer__monate i:nth-child(11) { animation-delay: 2s; } .fdt-dauer__monate i:nth-child(12) { animation-delay: 2.2s; }
.fdt-dauer__legende { display: flex; justify-content: space-between; font-size: .75rem; color: var(--grau); margin: 6px 0 14px; }
.fdt-dauer__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fdt-dauer__kacheln p { margin: 0; padding: 10px 12px; border: 1px dashed var(--blau); border-radius: 10px; font-size: .86rem; color: var(--grau); }
.fdt-dauer__kacheln b { display: block; color: var(--gruen-tief); }
@keyframes fdt-wachsen { from { transform: scaleX(0); } to { transform: none; } }
@keyframes fdt-monat { 0%, 85%, 100% { transform: none; } 92% { transform: translateY(-4px); } }
@media (max-width: 860px) {
  .fdt::before { left: 9px; }
  .fdt__stufe { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 34px; }
  .fdt__stufe::before { left: 9px; top: 6px; margin-top: 0; }
  .fdt__stufe:nth-child(even) .fdt__text { order: 0; }
}
@media (max-width: 420px) {
  .fdt__bild { padding: 16px; }
  .fdt-tempo li { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
  .fdt-tempo li:not(:last-child)::after { left: 87px; }
  .fdt-dauer__kacheln { grid-template-columns: minmax(0, 1fr); }
  .fdt-post__cta { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .js .fdt-balken i, .js .fdt-dauer__monate i { animation: none; } }

/* Besetzbarkeits-Check als Schritt-Formular (Baustein schritte, Muster candidate-flow.de, 19.10.2026) */
form[data-schritte] { --ink: var(--tinte); --ink-m: var(--grau); --line: var(--linie); --gold: var(--blau); --gold-deep: var(--gruen-tief); --navy: #fff; --paper: #fff; --wahl-hover: #F1F9FD; --wahl-aktiv: #E3F3FB; --wahl-ring: rgba(14,145,209,.25); }
.check-form .schritt legend { font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.25; margin-bottom: 18px; }
.check-form .wahl label { position: relative; padding: 15px 44px 15px 16px; border-radius: 12px; font-weight: 600; background: var(--hell); border: 1px solid transparent; }
.check-form .wahl label::after { content: '→'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gruen-tief); font-weight: 700; transition: transform .2s; }
.check-form .wahl label:hover::after { transform: translate(4px, -50%); }
.check-form .wahl input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.check-form .schritt-weiter { color: #fff; }
.check-form .schritt-zahl { display: inline-block; background: var(--gelb); color: var(--tinte); padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.check-seite { background: linear-gradient(180deg, var(--hell), #fff 70%); padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.check-seite__wrap { max-width: 720px; }
.check-seite__kopf { text-align: center; margin-bottom: 28px; }
.check-seite__kopf h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.check-karte { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--schatten); }
.check-karte__fuss { margin: 18px 0 0; text-align: center; font-size: .85rem; color: var(--grau); }
.ansprech--hell { justify-content: center; margin-top: 26px; }
.ansprech--hell .ansprech__bild { border-color: #fff; }
.ansprech--hell p { color: var(--grau); }
.ansprech--hell b { color: var(--tinte); }
@media (max-width: 520px) { .check-form .wahl--zwei { grid-template-columns: minmax(0, 1fr); } }

/* iPhone-Look für die Funnel-Demo (19.10.2026): Titanrahmen, Dynamic Island, Statusleiste, Seitentasten, Home-Balken */
.fd-handy { width: 300px; }
.fd-handy__rand { height: 620px; padding: 11px; border-radius: 56px; background: #0B0D10; box-shadow: 0 0 0 2px #8E9196, 0 0 0 5px #3C3F44, 0 0 0 6px #6B6E73, 0 40px 80px rgba(10,34,56,.38); }
.fd-handy__rand::before { top: 22px; width: 96px; height: 28px; margin-left: -48px; background: #000; border-radius: 20px; z-index: 6; }
.fd-handy::before, .fd-handy::after { content: ''; position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5B5E63, #9A9DA2); }
.fd-handy::before { left: -9px; top: 120px; height: 58px; box-shadow: 0 74px 0 #6B6E73; }
.fd-handy::after { right: -9px; top: 150px; height: 84px; }
.fd-screen { inset: 11px; border-radius: 45px; }
.ios-status { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 34px; font-family: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; font-size: .82rem; color: #000; z-index: 5; pointer-events: none; }
.ios-status b { font-weight: 600; letter-spacing: -.01em; }
.ios-icons { display: flex; align-items: center; gap: 5px; }
.ios-netz { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.ios-netz i { width: 3px; background: currentColor; border-radius: 1px; }
.ios-netz i:nth-child(1) { height: 4px; } .ios-netz i:nth-child(2) { height: 6px; } .ios-netz i:nth-child(3) { height: 8px; } .ios-netz i:nth-child(4) { height: 10px; }
.ios-wlan { width: 15px; height: 11px; fill: currentColor; }
.ios-akku { position: relative; width: 23px; height: 11px; border: 1.2px solid currentColor; border-radius: 3.5px; opacity: .95; padding: 1.2px; }
.ios-akku::after { content: ''; position: absolute; right: -3.5px; top: 3px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.ios-akku i { display: block; height: 100%; width: 78%; background: currentColor; border-radius: 1.5px; }
.ios--hell { color: #fff; }
.ios-home { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: #111; z-index: 5; pointer-events: none; }
.ios-home.ios--hell { background: #fff; }
.ig-bar { display: flex; justify-content: space-between; align-items: center; padding: 50px 14px 6px; background: #fff; color: #111; }
.ig-bar b { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.45rem; font-weight: 400; line-height: 1; }
.ig-bar__icons { display: flex; gap: 14px; }
.ig-bar__icons svg { width: 21px; height: 21px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; }
.fd-feed__kopf, .fd-fremd .fd-feed__kopf, .fd-rein .fd-feed__kopf { padding-top: 8px; }
.fd-feed__fuss { padding-bottom: 22px; }
.fd-form { padding-top: 58px; padding-bottom: 26px; }
.fd-mail { padding-top: 58px; padding-bottom: 26px; }
.fd-anruf { padding-top: 64px; padding-bottom: 26px; }
.fd-feed__titel span { background: var(--gelb); }
@media (max-width: 360px) { .fd-handy { width: 276px; } .fd-handy__rand { height: 580px; } }

/* Korthauer-Muster in Glückauf-Farben (19.10.2026): Hero-Etikett, Logo-Leiste, Schmerzpunkte, Stärken, Pakete, Garantie */
h1, h2 { letter-spacing: -.02em; }
.grau { color: var(--grau); }
.abschnitt--dunkel .grau, .hero__grau { color: #8FA6BD; }
.gelb { color: var(--gelb); }
.hero h1 { font-weight: 800; }
.hero__pille { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; }
.hero__pille:hover { background: rgba(255,255,255,.12); border-color: var(--gelb); color: #fff; }
.hero__pille i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.hero__pille svg { width: 14px; height: 14px; }
.hero__sterne { color: var(--gelb); letter-spacing: .08em; }
.hero__logos { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.hero__logos p { margin: 0 0 16px; font-size: .82rem; color: var(--auf-dunkel); }
.hero__logos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
.hero__logos li { background: rgba(255,255,255,.92); border-radius: 10px; height: 58px; display: grid; place-items: center; padding: 6px 8px; }
.hero__logos img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.hero__logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 900px) { .hero__logos ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hero__logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero__logos li { height: 50px; } }
.probleme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.problem { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; box-shadow: 0 1px 0 var(--linie); transition: transform .2s, box-shadow .2s; }
.problem:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.problem__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #FFF6D6; color: #8A6A00; margin-bottom: 16px; }
.problem__icon svg { width: 22px; height: 22px; }
.problem h3 { font-size: 1.15rem; }
.problem p { margin: 0; color: var(--grau); }
@media (max-width: 860px) { .probleme { grid-template-columns: minmax(0, 1fr); } }
.pakete { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 22px; align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 30px 26px; overflow: hidden; }
.paket__nr { position: absolute; top: 14px; right: 20px; font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--hell); letter-spacing: -.04em; }
.paket__dach { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; font-weight: 700; color: var(--grau); }
.paket__dach i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.paket h3 { font-size: 1.5rem; margin: 2px 0 0; }
.paket__unter { margin: 0 0 6px; font-weight: 700; color: var(--tinte); }
.paket p:not(.paket__dach):not(.paket__unter) { color: var(--grau); }
.paket .pfeil-link, .paket .btn { margin-top: auto; align-self: flex-start; }
.paket--dunkel { background: var(--tinte); border-color: var(--tinte); border-top: 4px solid var(--gelb); box-shadow: 0 30px 60px rgba(10,34,56,.25); transform: translateY(-10px); }
.paket--dunkel .paket__nr { color: rgba(255,255,255,.07); }
.paket--dunkel h3, .paket--dunkel .paket__unter { color: #fff; }
.paket--dunkel .paket__dach { color: var(--auf-dunkel); }
.paket--dunkel p:not(.paket__dach):not(.paket__unter) { color: var(--auf-dunkel); }
.paket__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.paket__zahlen div { display: grid; gap: 2px; padding: 0 4px; }
.paket__zahlen div + div { border-left: 1px solid rgba(255,255,255,.12); }
.paket__zahlen b { color: var(--gelb); font-size: 1.25rem; font-weight: 800; }
.paket__zahlen span { color: var(--auf-dunkel); font-size: .74rem; line-height: 1.3; }
/* Leistungen mit vier Karten (20.10.2026): gleich breit, hervorgehobene Karte ohne Versatz */
.pakete--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pakete--vier .paket { padding: 28px 22px; }
.pakete--vier .paket h3 { font-size: 1.3rem; hyphens: manual; }
.pakete--vier .paket--dunkel { transform: none; }
@media (max-width: 1100px) { .pakete--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .pakete { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } .paket--dunkel { transform: none; } }
.garantie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; background: linear-gradient(120deg, #FFF8DC, #fff 60%); border: 2px solid var(--gelb); border-radius: 20px; padding: clamp(24px, 4vw, 40px); }
.garantie__siegel { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); color: var(--tinte); box-shadow: 0 0 0 8px rgba(252,195,2,.2); }
.garantie__siegel svg { width: 40px; height: 40px; }
.garantie h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.garantie p:last-child { margin: 0; color: var(--grau); }
@media (max-width: 860px) { .garantie { grid-template-columns: minmax(0, 1fr); text-align: left; } .garantie .btn { justify-self: start; } }

/* Logo-Laufband im Hero (19.10.2026) */
.hero__logos { width: 100%; max-width: none; margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.hero__logos > p { width: min(1180px, 100% - 40px); margin: 0 auto 16px; }
.laufband { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hero__logos ul.laufband__spur { display: flex; gap: 14px; width: max-content; grid-template-columns: none; animation: laufband 55s linear infinite; }
@media (hover: hover) and (pointer: fine) { .laufband:hover .laufband__spur { animation-play-state: paused; } }
.hero__logos .laufband__spur li { flex: 0 0 auto; width: 178px; height: 76px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; }
.hero__logos .laufband__spur img { max-height: 60px; max-width: 100%; width: auto; height: auto; min-width: 0; object-fit: contain; } /* 100 % statt 156 px: auf dem Handy ist die Karte nur 124 px breit, breite Logos (WandlungsPunkte) ragten heraus (19.10.2026) */
.hero__logos .laufband__spur li span { font-weight: 700; font-size: .82rem; color: var(--tinte); white-space: nowrap; }
.hero__logos .laufband__spur li:has(span) img { max-width: 42px; max-height: 42px; }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 480px) { .hero__logos .laufband__spur li { width: 124px; height: 54px; } .hero__logos .laufband__spur img { max-height: 40px; } .hero__logos ul.laufband__spur { animation-duration: 40s; } }
@media (prefers-reduced-motion: reduce) { .hero__logos ul.laufband__spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .hero__logos .laufband__spur li[aria-hidden] { display: none; } }
.hero__logos .laufband__spur li:has(span) { width: auto; min-width: 178px; padding: 8px 18px; }

/* Problem-Abschnitt aufgeschlüsselt (19.10.2026) */
.problem-gruppe + .problem-gruppe { margin-top: 34px; }
.problem-gruppe__titel { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; color: var(--tinte); margin: 0 0 16px; }
.problem-gruppe__titel span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); }
.problem-gruppe__titel svg { width: 18px; height: 18px; }
.problem { display: flex; flex-direction: column; }
.problem > p:not(.problem__loesung) { margin-bottom: 16px; }
.problem__loesung { margin: auto 0 0 !important; display: flex; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1px dashed var(--linie); color: var(--text) !important; font-size: .93rem; }
.problem__loesung svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--gruen-tief); }
.problem__loesung b { color: var(--tinte); }
.probleme__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 34px 0 0; font-weight: 700; color: var(--tinte); }

/* Schwerpunkte als Entscheidung A oder B (19.10.2026) */
.schwerpunkte { position: relative; gap: 40px; }
.schwerpunkt { border-width: 2px; }
.schwerpunkt--a { border-color: var(--gelb); }
.schwerpunkt--b { border-color: var(--blau); }
.schwerpunkt__weg { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; font-size: 1.25rem; font-weight: 800; color: var(--tinte); }
.schwerpunkt__weg b { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; }
.schwerpunkt--a .schwerpunkt__weg b { background: var(--gelb); color: var(--tinte); }
.schwerpunkt--b .schwerpunkt__weg b { background: var(--blau); color: #fff; }
.schwerpunkt--b .schwerpunkt__dach { color: var(--gruen-tief); }
.schwerpunkt--b .eingang li { border-left-color: var(--blau); }
.schwerpunkt__wenn { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; }
.schwerpunkt__wenn::before { content: 'Für Sie, wenn …'; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.schwerpunkt__wenn li { position: relative; padding-left: 26px; font-weight: 600; color: var(--tinte); }
.schwerpunkt__wenn li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; margin-top: 3px; }
.schwerpunkt--a .schwerpunkt__wenn li::before { background: var(--gelb); color: var(--tinte); }
.schwerpunkt--b .schwerpunkt__wenn li::before { background: var(--blau); color: #fff; }
.schwerpunkt .schwerpunkt__knopf { margin-top: auto; align-self: stretch; justify-content: center; }
.btn--blau { background: var(--blau); color: #fff; }
.btn--blau:hover { background: var(--gruen-tief); color: #fff; }
.schwerpunkte__oder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 0 0 6px var(--hell); z-index: 2; }
.schwerpunkte__beides { text-align: center; margin: 26px 0 0; font-weight: 600; color: var(--tinte); }
.schwerpunkte__beides a { font-weight: 700; color: var(--gruen-tief); }
.schwerpunkte__beides svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 860px) { .schwerpunkte__oder { position: relative; left: auto; top: auto; transform: none; margin: -24px auto; order: 1; } .schwerpunkt--b { order: 2; } .schwerpunkte { gap: 0; display: flex; flex-direction: column; } }
.zert-block { margin-top: 36px; padding: 26px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.zert-block .zert-titel { margin-top: 0; }

/* Kanal-Mitte "Ihre Anzeige" (19.10.2026) */
.kanal__mitte .kanal__ib { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); font-weight: 800; font-size: 1rem; box-shadow: 0 4px 10px rgba(10,34,56,.18); }
.kanal__mitte b.kanal__titel { font-size: 1.8rem; white-space: nowrap; margin: 2px 0 4px; }
@media (max-width: 640px) { .kanal__mitte b.kanal__titel { font-size: 1.5rem; } .kanal__mitte > span { font-size: .84rem; } }

/* Kanal-Mitte: Glückauf-Zeichen (Schlägel und Eisen) über „Ihr Unternehmen“, 23.10.2026 */
.kanal__logo { display: block; width: 78px; height: 78px; border-radius: 20px; box-shadow: 0 12px 26px rgba(10,34,56,.22); animation: kanal-logo 4s ease-in-out infinite; }
@keyframes kanal-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .kanal__logo { animation: none; } }
@media (max-width: 640px) { .kanal__mitte { width: 262px; height: 262px; padding: 20px; } .kanal__logo { width: 64px; height: 64px; border-radius: 16px; } .kanal__mitte .kanal__dach { margin-bottom: 6px; } }

/* Hero-Video (vorbereitet 19.10.2026, aktiv sobald HERO_VIDEO in daten.py gesetzt ist) */
.hero-video { width: min(100%, 420px); margin: 0; }
.hero-video__rahmen { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--tinte); box-shadow: 0 30px 70px rgba(10,34,56,.28), 0 0 0 1px rgba(255,255,255,.08); }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--tinte); }
.hero-video__start { position: absolute; inset: auto 16px 16px 16px; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--tinte); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(10,34,56,.25); transition: transform .2s ease; }
.hero-video__start:hover, .hero-video__start:focus-visible { transform: translateY(-2px); }
.hero-video__knopf { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); }
.hero-video__knopf svg { width: 18px; height: 18px; margin-left: 3px; }
.hero-video.laeuft .hero-video__start { display: none; }
.hero-video figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; text-align: center; }
.hero-video figcaption span { font-size: .88rem; opacity: .75; }

/* ===== Funnel im Detail: Instagram-Handy, wechselt beim Scrollen (19.10.2026) ===== */
.fdx__raster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.fdx__buehne { position: sticky; top: 104px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.fdx__hinweis { font-size: .78rem; color: var(--grau); text-align: center; margin: 0; }
.fdx__schritte { list-style: none; margin: 0; padding: 0; }
.fdx__schritt { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 32px; border-left: 3px solid var(--linie); opacity: .35; transition: opacity .35s ease, border-color .35s ease; }
.fdx__schritt:first-child { min-height: 62vh; justify-content: flex-start; padding-top: 56px; }
.fdx__schritt.ist-aktiv { opacity: 1; border-left-color: var(--gelb); }
.fdx__nr { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-tief); margin: 0 0 .7em; }
.fdx__nr span { background: var(--tinte); color: var(--gelb); padding: 4px 10px; border-radius: 999px; letter-spacing: .06em; }
.fdx__schritt h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.15; margin: 0 0 .5em; max-width: 560px; }
.fdx__schritt > p { max-width: 540px; margin: 0; }
.fdx__schritt > p.fdx__fakt { margin-top: 18px; padding: 12px 16px; background: var(--hell); border-radius: 12px; font-size: .95rem; border-left: 4px solid var(--blau); }
.fdx__fakt small { display: block; margin-top: 4px; font-size: .76rem; color: var(--grau); }
.fdx__mini { display: none; }

/* iPhone */
.fdx-handy { position: relative; width: 300px; flex: none; }
.fdx-handy::before, .fdx-handy::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5B5E63, #9A9DA2); }
.fdx-handy::before { left: -9px; top: 120px; height: 58px; box-shadow: 0 74px 0 #6B6E73; }
.fdx-handy::after { right: -9px; top: 150px; height: 84px; }
.fdx-handy__rand { position: relative; height: 620px; padding: 11px; border-radius: 56px; background: #0B0D10; box-shadow: 0 0 0 2px #8E9196, 0 0 0 5px #3C3F44, 0 0 0 6px #6B6E73, 0 40px 80px rgba(10,34,56,.30); }
.fdx-handy__rand::before { content: ""; position: absolute; top: 22px; left: 50%; width: 96px; height: 28px; margin-left: -48px; background: #000; border-radius: 20px; z-index: 9; }
.fdx-screen { position: absolute; inset: 11px; border-radius: 45px; overflow: hidden; background: #fff; color: #0C0C0C; font-family: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; font-size: 13px; line-height: 1.32; opacity: 0; transition: opacity .45s ease; }
.fdx-screen.ist-aktiv { opacity: 1; }
.fdx-screen--dunkel { background: #000; color: #fff; }
.fdx-screen p, .fdx-screen ul { margin: 0; }
.ig-ico { width: 22px; height: 22px; flex: none; }

/* Feed */
.ig-feed { position: absolute; top: 50px; left: 0; right: 0; bottom: 58px; overflow: hidden; }
.ig-vorher { padding: 4px 12px 9px; border-bottom: 1px solid #EFEFEF; }
.ig-vorher .ig-aktionen { padding: 2px 0 4px; }
.ig-vorher .ig-likes, .ig-vorher .ig-cap, .ig-vorher .ig-zeit { padding-left: 0; padding-right: 0; }
.ig-aktionen { display: flex; gap: 14px; align-items: center; padding: 9px 12px 5px; }
.ig-rechts { margin-left: auto; display: flex; }
.ig-likes { font-weight: 600; font-size: 12.5px; padding: 0 12px; }
.ig-cap { font-size: 12.5px; padding: 2px 12px 0; }
.ig-cap b { font-weight: 600; margin-right: 3px; }
.ig-grau, .ig-zeit { color: #737373; }
.ig-zeit { font-size: 11px; padding: 3px 12px 0; }
.ig-kopf { display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 12px; }
.ig-kopf p { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; font-size: 12.5px; }
.ig-kopf b { font-weight: 600; }
.ig-kopf small { font-size: 11px; }
.ig-kopf .ig-ico { width: 18px; height: 18px; }
.ig-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); font-weight: 800; font-size: 10px; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ig-medien { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #DDD; }
.ig-medien img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-overlay { position: absolute; left: 12px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ig-overlay span { background: var(--gelb); color: var(--tinte); font-weight: 800; font-size: 17px; padding: 5px 9px; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; }
.ig-overlay small { background: rgba(10,34,56,.88); color: #fff; font-size: 11px; padding: 3px 8px; }
.ig-cta { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-weight: 600; font-size: 13px; border-bottom: 1px solid #EFEFEF; background: #fff; overflow: hidden; }
.ig-cta .ig-ico { width: 16px; height: 16px; }
.ig-cta--aktiv { background: #0095F6; color: #fff; border-bottom-color: #0095F6; }
.ig-tipp { position: absolute; right: 46px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(255,255,255,.6); animation: ig-tipp 1.6s ease-out infinite; }
.ig-feed--hoch .ig-medien--rest { aspect-ratio: auto; height: 150px; }
.ig-medien--rest img { object-position: center 75%; }
.ig-cap--lang { line-height: 1.45; }
.ig-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding: 8px 22px 22px; display: flex; justify-content: space-between; align-items: center; background: #fff; border-top: 1px solid #EFEFEF; z-index: 4; }
.ig-tabs .ig-ico { width: 23px; height: 23px; }
.ig-tabs__ich { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #C7D2DE, #8FA3B8); }

/* Reel und Story */
.ig-reel { position: absolute; inset: 0; background: #000; color: #fff; }
.ig-reel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-reel__schatten { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 52%, rgba(0,0,0,.7) 100%); }
.ig-reel__oben { position: absolute; top: 54px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.ig-reel__oben b { font-size: 20px; font-weight: 700; }
.ig-reel__ton { position: absolute; top: 96px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 3; }
.ig-reel__ton .ig-ico { width: 15px; height: 15px; }
.ig-untertitel { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); background: #fff; color: #111; font-weight: 800; font-size: 19px; padding: 6px 12px; border-radius: 6px; white-space: nowrap; z-index: 3; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ist-aktiv .ig-untertitel { animation: ig-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.ig-reel__seite { position: absolute; right: 10px; bottom: 150px; display: flex; flex-direction: column; gap: 16px; align-items: center; z-index: 3; }
.ig-reel__seite span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ig-reel__seite .ig-ico { width: 26px; height: 26px; }
.ig-reel__seite small { font-size: 11px; font-weight: 600; }
.ig-reel__unten { position: absolute; left: 12px; right: 56px; bottom: 28px; z-index: 3; display: flex; flex-direction: column; gap: 7px; }
.ig-reel__wer { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ig-folgen { border: 1px solid rgba(255,255,255,.75); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.ig-reel__text { font-size: 12.5px; }
.ig-reel__cta { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 8px; padding: 9px 12px; font-weight: 600; font-size: 13px; width: calc(100% + 44px); }
.ig-reel__cta .ig-ico { width: 15px; height: 15px; }
.ig-reel__fortschritt { position: absolute; left: -12px; right: -56px; bottom: -16px; height: 2px; background: rgba(255,255,255,.3); }
.ig-reel__fortschritt i { display: block; height: 100%; width: 18%; background: #fff; }
.ist-aktiv .ig-reel__fortschritt i { animation: ig-lauf 7s linear infinite; }
.ig-story__bild { object-position: 62% center; }
.ig-story__balken { position: absolute; top: 52px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.ig-story__balken i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); }
.ig-story__balken i.voll { background: #fff; }
.ig-story__balken i.halb { background: linear-gradient(90deg, #fff 45%, rgba(255,255,255,.35) 45%); }
.ig-story__kopf { position: absolute; top: 62px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 3; font-size: 13px; }
.ig-story__kopf small { opacity: .85; font-size: 11.5px; }
.ig-story__kopf span { margin-left: auto; display: flex; gap: 10px; }
.ig-story__kopf .ig-ico { width: 20px; height: 20px; }
.ig-sticker { position: absolute; left: 50%; top: 40%; transform: translateX(-50%) rotate(-4deg); background: #fff; color: #111; border-radius: 14px; padding: 10px 14px; text-align: center; font-weight: 800; font-size: 19px; z-index: 3; width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ig-sticker span { display: block; font-weight: 600; font-size: 12.5px; color: #333; margin-top: 3px; }
.ig-story__unten { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; }
.ig-story__unten p { background: #fff; color: #111; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 999px; }
.ig-story__unten .ig-ico { width: 18px; height: 18px; animation: ig-hoch 1.4s ease-in-out infinite; }

/* Sofort-Formular und Danke */
.ig-dimm { position: absolute; inset: 0; background: linear-gradient(180deg, #2A3440, #151B22); }
.ig-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 84px; background: #fff; color: #111; border-radius: 16px 16px 0 0; padding: 8px 16px 30px; display: flex; flex-direction: column; gap: 8px; }
.ig-sheet__griff { width: 36px; height: 4px; border-radius: 2px; background: #D0D0D0; margin: 0 auto 4px; display: block; }
.ig-sheet__kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ig-sheet__kopf b { font-weight: 600; }
.ig-sheet__kopf span { margin-left: auto; display: flex; }
.ig-sheet__kopf .ig-ico { width: 18px; height: 18px; }
.ig-sheet__balken { display: flex; gap: 4px; }
.ig-sheet__balken i { flex: 1; height: 3px; border-radius: 2px; background: #E3E3E3; }
.ig-sheet__balken i.an { background: #0095F6; }
.ig-frage { font-weight: 700; font-size: 14px; margin-top: 6px !important; }
.ig-wahl { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ig-wahl li { border: 1px solid #DBDBDB; border-radius: 10px; padding: 8px 12px; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.ig-wahl li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #A8A8A8; flex: none; box-sizing: border-box; }
.ig-wahl li.an { border-color: #0095F6; background: #EAF5FE; }
.ig-wahl li.an::before { border: 4.5px solid #0095F6; }
.ig-wahl--zwei { flex-direction: row; }
.ig-wahl--zwei li { flex: 1; }
.ig-knopf { margin-top: auto !important; background: #0095F6; color: #fff; text-align: center; font-weight: 600; border-radius: 10px; padding: 11px; font-size: 14px; }
.ig-sheet__klein { font-size: 10.5px; color: #737373; text-align: center; }
.ig-danke { position: absolute; inset: 50px 0 0; padding: 10px 18px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: #fff; }
.ig-danke .ig-sheet__kopf { align-self: stretch; text-align: left; }
.ig-danke__haken { margin-top: 118px; width: 64px; height: 64px; border-radius: 50%; background: #E8F7EE; color: #1A9E52; display: grid; place-items: center; }
.ig-danke__haken .ig-ico { width: 34px; height: 34px; stroke-width: 2.6; }
.ig-danke__titel { font-size: 20px; font-weight: 700; }
.ig-danke__text { font-size: 13px; color: #555; max-width: 220px; }
.ig-danke .ig-knopf { align-self: stretch; }
.ios-banner { position: absolute; top: 54px; left: 8px; right: 8px; z-index: 6; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 18px; background: rgba(245,245,247,.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.2); color: #111; font-size: 12px; line-height: 1.3; }
.ist-aktiv .ios-banner { animation: ios-banner .7s .35s cubic-bezier(.2,.9,.3,1.15) both; }
.ios-banner__app { width: 30px; height: 30px; flex: none; border-radius: 8px; background: linear-gradient(180deg, #5AC8FA, #1E7CF0); color: #fff; display: grid; place-items: center; font-size: 15px; }
.ios-banner p { display: flex; flex-direction: column; gap: 1px; }
.ios-banner small { display: flex; justify-content: space-between; font-size: 10.5px; color: #6E6E73; }
.ios-banner small b { font-weight: 600; letter-spacing: .03em; }
.ios-banner p > b { font-size: 12.5px; font-weight: 600; }

@keyframes ig-tipp { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ig-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes ig-lauf { from { width: 0; } to { width: 100%; } }
@keyframes ig-hoch { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ios-banner { from { transform: translateY(-130%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .fdx__raster { grid-template-columns: minmax(0, 1fr); }
  .fdx__buehne { display: none; }
  .fdx__schritt, .fdx__schritt:first-child { min-height: 0; opacity: 1; border-left: 0; padding: 0 0 56px; justify-content: flex-start; }
  .fdx__mini { display: flex; justify-content: center; margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdx-screen, .fdx__schritt { transition: none; }
  .ig-tipp, .ist-aktiv .ig-untertitel, .ist-aktiv .ig-reel__fortschritt i, .ig-story__unten .ig-ico, .ist-aktiv .ios-banner { animation: none; }
}

/* Schaubild am Handy/Tablet: echte Verbindungslinien mit wandernden Punkten, per Script ans Layout angepasst (19.10.2026) */
.kanal { position: relative; }
.kanal__netz { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.kanal--netz .kanal__quellen, .kanal--netz .kanal__mitte, .kanal--netz .kanal__ziele { position: relative; z-index: 1; }
.kanal__netz path { fill: none; stroke-width: 2; stroke-linecap: round; }
.kanal__netz .kanal__netz-rein { stroke: #BFD9EA; }
.kanal__netz .kanal__netz-raus { stroke: rgba(14,145,209,.6); stroke-width: 2.5; }
.kanal__netz circle { fill: var(--blau); }
.kanal--netz .kanal__mitte::before, .kanal--netz .kanal__mitte::after, .kanal--netz .kanal__tropfen { display: none !important; }
@media (max-width: 1180px) { .kanal--netz .kanal__mitte { margin: 76px 0 64px; } }

/* Kontaktbereich: Prüfpunkte des Besetzbarkeits-Checks (ersetzt den eigenen Check-Abschnitt, 19.10.2026) */
.kontakt__pruef-titel { margin: 1.4em 0 .6em; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gelb); }
.kontakt__pruef { list-style: none; counter-reset: pruef; margin: 0 0 1.4em; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kontakt__pruef li { counter-increment: pruef; position: relative; padding: 12px 14px 12px 46px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .88rem; line-height: 1.4; color: var(--auf-dunkel); }
.kontakt__pruef li::before { content: counter(pruef); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--gelb); color: var(--tinte); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.kontakt__pruef b { display: block; color: #fff; font-size: .95rem; margin-bottom: 2px; }
@media (max-width: 520px) { .kontakt__pruef { grid-template-columns: minmax(0, 1fr); } }

/* Zweite Stimmen-Gruppe: echte Stimmen von webdesign-benjamin.de (19.10.2026) */
.stimmen-web { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--linie); }
.stimmen-web__titel { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 20px; }
.bewertungen--web { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bewertungen--web { grid-template-columns: minmax(0, 1fr); } }

/* Auszeichnung bei Benjamin (19.10.2026) */
.person__preis { margin-top: 12px; display: inline-block; padding: 8px 12px; border-radius: 10px; background: #FFF6D6; border: 1px solid #F3DD8A; font-size: .9rem; font-weight: 600; color: var(--tinte); line-height: 1.4; }

/* ---------- Menü: aktueller Teil der Startseite (Scrollspy, 19.10.2026) ---------- */
.menue > a.ist-aktiv:not(.btn) { border-bottom-color: var(--blau); color: var(--gruen-tief); }
@media (max-width: 860px) {
  .menue > a.ist-aktiv:not(.btn) { color: var(--blau); font-weight: 700; }
}

/* ---------- So starten wir: Startpaket + vier Werte (19.10.2026) ---------- */
.start { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.start__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.start__liste li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 14px 16px; }
.start__liste li svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--blau); margin-top: 2px; }
.start__liste b { display: block; color: var(--tinte); }
.start__liste span { display: block; color: var(--grau); font-size: .95rem; line-height: 1.5; margin-top: 2px; }
.start__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: sticky; top: calc(var(--kopf) + 24px); }
.start__wert { background: var(--tinte); color: var(--auf-dunkel); border-radius: var(--radius-s); padding: 20px 18px; min-height: 150px; }
.start__wert b { display: block; font-size: 1.6rem; color: var(--gelb); line-height: 1.1; margin-bottom: 6px; letter-spacing: -.01em; }
.start__wert span { display: block; font-size: .92rem; line-height: 1.45; opacity: .9; }
@media (max-width: 900px) { .start { grid-template-columns: minmax(0, 1fr); } .start__werte { position: static; } }
@media (max-width: 420px) { .start__werte { grid-template-columns: minmax(0, 1fr); } .start__wert { min-height: 0; } }

/* ---------- Cookie-Consent (Baustein Consent/consent.css, Farben auf Glückauf: Gelb/Blau) ----------
   Nur sichtbar, solange der Besucher noch nicht gewählt hat; beide Knöpfe gleich groß und gefüllt (Playbook 4). */
.consent {
  position: fixed; z-index: 90;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 620px; margin: 0 auto;
  background: #fff; color: var(--text);
  border-radius: var(--radius);
  border-top: 5px solid var(--gelb);
  box-shadow: 0 18px 50px rgba(10,34,56,.35);
  padding: 20px 22px;
}
.consent p { margin: 0 0 14px; font-size: .9rem; }
.consent a { color: var(--gruen-tief); }
.consent__btns { display: flex; gap: 10px; }
.consent__btns .btn { flex: 1; justify-content: center; padding: 12px 16px; font-size: .92rem; }
.consent__btn-no { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.consent__btn-no:hover { background: var(--tinte-3); color: #fff; }
.consent__btn-ok { background: var(--gelb); color: var(--tinte); border-color: var(--gelb); }
.consent__btn-ok:hover { background: #FFD43B; color: var(--tinte); }
@media (max-width: 420px) { .consent { left: 10px; right: 10px; bottom: 10px; padding: 16px; } .consent__btns { flex-direction: column; } }
/* Leistungen mit drei Saeulen (21.10.2026): Marke, Sichtbarkeit, Kampagnen */
.pakete--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pakete--drei .paket--dunkel { transform: none; }
.pakete--drei .paket h3 { font-size: 1.35rem; hyphens: manual; }
.paket .anker { position: absolute; top: 0; }
.paket__liste { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; gap: 8px; }
.paket__liste li { position: relative; padding-left: 24px; color: var(--tinte); font-size: .95rem; line-height: 1.45; }
.paket__liste li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px; border-left: 2px solid #1FA463; border-bottom: 2px solid #1FA463; transform: rotate(-45deg); }
.paket--dunkel .paket__liste li { color: #fff; }
.paket--dunkel .paket__liste li::before { border-color: var(--gelb); }
@media (max-width: 960px) { .pakete--drei { grid-template-columns: minmax(0, 1fr); } }

/* ===== Muster „Ihr Auftritt“ (#sichtbarkeit-muster): Website → Instagram → Google → Kampagne im iPhone-Rahmen ===== */
.fd--os { grid-template-columns: minmax(0, 1fr) 320px; }
.fd--os .fd-links { gap: 6px; }
.os-gruppe { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; font-weight: 800; color: var(--tinte); font-size: .95rem; }
.os-gruppe:first-child { margin-top: 0; }
.os-gruppe span { background: var(--tinte); color: var(--gelb); border-radius: 6px; padding: 2px 8px; font-size: .8rem; }
.fd--os .fd-schritte { gap: 4px; }
.os-weiter { margin: 10px 0 0 16px; }
.os-handy { margin: 0 auto; }
.os-handy .fd-etikett { top: -10px; right: -14px; z-index: 12; }
html:not(.js) .os-handy .fdx-screen:first-child { opacity: 1; }
.os-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdx-screen .grau { color: #737373; }

/* Safari-Leiste unten */
.os-safari { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: rgba(246,246,246,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #E2E2E2; padding: 7px 12px 26px; }
.os-safari__adr { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 11px; padding: 7px 10px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.os-safari__adr b { font-weight: 500; }
.os-safari__adr span { color: #555; font-size: 11px; }
.os-safari__nav { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px 0; color: #0A7AFF; font-size: 22px; line-height: 1; }
.os-safari__nav .grau { color: #B5B5B5; }
.os-safari__nav .ig-ico { width: 19px; height: 19px; }

/* Website (echte Referenz) */
.os-seite { position: absolute; top: 50px; left: 0; right: 0; bottom: 84px; overflow: hidden; background: #fff; }
.os-seite__bild { width: 100%; height: auto; display: block; }
.js .fd--sichtbar .ist-aktiv .os-seite__bild { animation: os-scroll 3.4s ease-in-out .2s both; }
@keyframes os-scroll { to { transform: translateY(-40%); } }
.os-echt { position: absolute; right: 12px; top: 60px; z-index: 7; background: var(--gelb); color: var(--tinte); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.25); white-space: nowrap; }

/* Karriereseite */
.os-karriere { display: flex; flex-direction: column; gap: 7px; padding: 0 0 10px; }
.os-karriere__held { position: relative; height: 200px; flex: none; }
.os-karriere__held::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,34,56,.05), rgba(10,34,56,.88)); }
.os-karriere__held p { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; color: #fff; display: grid; gap: 3px; }
.os-karriere__held small { color: var(--gelb); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.os-karriere__held b { font-size: 21px; line-height: 1.1; font-weight: 800; }
.os-karriere__held span { font-size: 12px; opacity: .9; }
.os-karriere__titel { font-weight: 800; font-size: 14px; padding: 6px 14px 0; }
.os-stelle { display: flex; align-items: center; justify-content: space-between; margin: 0 12px; padding: 9px 12px; border: 1px solid #E6E9ED; border-radius: 12px; }
.os-stelle b { display: block; font-size: 13px; }
.os-stelle small { color: #6B7480; font-size: 11px; }
.os-stelle i { font-style: normal; font-size: 20px; color: #9AA3AD; }
.os-stelle--an { border-color: var(--gelb); box-shadow: 0 0 0 1px var(--gelb); }
.os-karriere__knopf { margin: 4px 12px 0; background: var(--gelb); color: var(--tinte); font-weight: 800; text-align: center; border-radius: 12px; padding: 11px; font-size: 13.5px; }
.js .fd--sichtbar .ist-aktiv .os-stelle--an { animation: fd-rein .6s ease .3s both; }

/* Instagram-Profil */
.igp { position: absolute; top: 50px; left: 0; right: 0; bottom: 58px; overflow: hidden; font-size: 12.5px; }
.igp-kopf { display: flex; align-items: center; gap: 10px; padding: 2px 12px 8px; }
.igp-kopf > b { font-size: 16px; font-weight: 700; margin-right: auto; }
.igp-kopf span { display: flex; gap: 14px; }
.igp-kopf .ig-ico { width: 22px; height: 22px; }
.igp-oben { display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.igp-av { width: 72px; height: 72px; flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.igp-av span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); font-weight: 900; font-size: 22px; border: 3px solid #fff; }
.igp-name { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.igp-zahlen { display: flex; gap: 14px; }
.igp-zahlen span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.2; }
.igp-zahlen b { font-size: 15px; font-weight: 700; }
.igp-bio { padding: 9px 14px 0; line-height: 1.35; }
.igp-link { display: flex; align-items: center; gap: 4px; color: #00376B; font-weight: 600; margin-top: 2px; }
.igp-link .ig-ico { width: 14px; height: 14px; }
.igp-knoepfe { display: grid; grid-template-columns: 1fr 1fr 1fr 32px; gap: 6px; padding: 10px 14px 0; }
.igp-knoepfe span { background: #EFEFEF; border-radius: 8px; padding: 7px 0; text-align: center; font-weight: 600; font-size: 12.5px; display: grid; place-items: center; }
.igp-knoepfe .blau { background: #0095F6; color: #fff; }
.igp-knoepfe .ig-ico { width: 16px; height: 16px; }
.igp-hl { display: flex; gap: 12px; padding: 10px 14px 7px; }
.igp-hl > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.igp-hl i { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #DBDBDB; color: var(--gelb); }
.igp-hl i svg { width: 24px; height: 24px; }
.igp-tabs { display: flex; border-top: 1px solid #EFEFEF; }
.igp-tabs span { flex: 1; display: grid; place-items: center; padding: 7px 0; color: #8E8E8E; }
.igp-tabs span.an { color: #000; box-shadow: inset 0 -1.5px 0 #000; }
.igp-tabs .ig-ico { width: 21px; height: 21px; }
.igp-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.igp-kachel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; }
.igp-job { position: absolute; left: 4px; right: 4px; bottom: 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-transform: uppercase; text-align: center; line-height: 1.05; }
.igp-job small { background: #fff; color: var(--tinte); font-size: 6.5px; font-weight: 800; padding: 1.5px 3px; }
.igp-job span { background: var(--gelb); color: var(--tinte); font-size: 10.5px; font-weight: 900; padding: 2px 4px; }
.igp-job i { font-style: normal; background: var(--tinte); color: #fff; font-size: 6.5px; font-weight: 700; padding: 1px 3px; }
.igp-ecke { position: absolute; top: 5px; right: 5px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.igp-ecke .ig-ico { width: 14px; height: 14px; }
.igp-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: rgba(10,34,56,.55); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; }
.os-ton { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .92; }
.os-ton .ig-ico { width: 13px; height: 13px; }

/* Google-Unternehmensprofil (dunkle Google-Ansicht) */
.fdx-screen:has(.gp) { background: #1F1F1F; color: #E3E3E3; }
.gp { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden; background: #1F1F1F; color: #E3E3E3; font-size: 12.5px; }
.gp-leiste { display: flex; align-items: center; gap: 10px; padding: 2px 12px 8px; color: #E3E3E3; }
.gp-leiste p { flex: 1; background: #303134; border-radius: 999px; padding: 7px 12px; font-size: 12px; }
.gp-leiste .ig-ico { width: 18px; height: 18px; }
.gp-leiste > span { font-size: 18px; }
.gp-tabs { border: 1.5px solid #E3E3E3; border-radius: 4px; font-size: 9px !important; padding: 1px 3px; font-weight: 700; }
.gp-chips { display: flex; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px solid #3C4043; overflow: hidden; }
.gp-chips span { border: 1px solid #5F6368; border-radius: 9px; padding: 5px 11px; font-size: 12px; white-space: nowrap; }
.gp-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px 3px; }
.gp-kopf b { font-size: 19px; line-height: 1.2; font-weight: 400; color: #fff; margin-right: auto; }
.gp-teilen { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid #5F6368; display: grid; place-items: center; }
.gp-teilen .ig-ico { width: 15px; height: 15px; }
.gp-info { padding: 0 14px; color: #BDC1C6; font-size: 12px; }
.gp-stern { color: #FBBC04; }
.gp-blau { color: #8AB4F8; }
.gp-gruen { color: #81C995; }
.gp-fotos { display: grid; grid-template-columns: 1fr 34%; gap: 4px; height: 150px; margin: 10px 0 0 14px; border-radius: 12px 0 0 12px; overflow: hidden; }
.gp-fotos img { border-radius: 0; }
.gp-knoepfe { display: flex; gap: 15px; padding: 12px 14px 10px; overflow: hidden; }
.gp-knoepfe span { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #8AB4F8; font-size: 11px; }
.gp-knoepfe i { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #5F6368; display: grid; place-items: center; }
.gp-knoepfe .ig-ico { width: 18px; height: 18px; }
.gp-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid #3C4043; }
.gp-zeile > i { width: 30px; height: 30px; flex: none; border-radius: 8px; background: #303134; display: grid; place-items: center; color: #BDC1C6; }
.gp-zeile > i .ig-ico { width: 16px; height: 16px; }
.gp-zeile p { flex: 1; line-height: 1.3; }
.gp-zeile small { display: block; color: #9AA0A6; font-size: 11px; }
.gp-zeile > .ig-ico { width: 16px; height: 16px; color: #BDC1C6; }
.gp-pfeil { font-size: 18px; color: #BDC1C6; }
.gp-zeile--karte { padding-right: 0; }
.gp-karte { width: 80px; height: 52px; flex: none; position: relative; background: #2B3A44; background-image: linear-gradient(90deg, transparent 45%, #3E5361 45% 52%, transparent 52%), linear-gradient(0deg, transparent 55%, #3E5361 55% 61%, transparent 61%), linear-gradient(30deg, transparent 72%, #4A4030 72% 77%, transparent 77%); }
.gp-karte b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); color: #EA4335; }
.gp-karte .ig-ico { width: 22px; height: 22px; }
.js .fd--sichtbar .ist-aktiv .gp-fotos { animation: fd-rein .6s ease .15s both; }

@media (max-width: 860px) { .fd--os { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { .os-handy { transform: scale(.94); transform-origin: top center; } }
@media (prefers-reduced-motion: reduce) { .js .fd--sichtbar .ist-aktiv .os-seite__bild, .js .fd--sichtbar .ist-aktiv .gp-fotos, .js .fd--sichtbar .ist-aktiv .os-stelle--an { animation: none; } }

/* Probleme #1–3 und Vorteile #1–6 (23.10.2026, Handwerker-Ansprache) */
.problem__nr { margin: 0 0 10px !important; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8A6A00 !important; }
.vorteile .problem { background: var(--tinte-2); border-color: var(--tinte-3); box-shadow: none; }
.vorteile .problem h3 { color: #fff; }
.vorteile .problem p { color: var(--auf-dunkel); margin-bottom: 0; }
.vorteile .problem__nr { color: var(--gelb) !important; }
.vorteile .problem__icon { background: rgba(252,195,2,.14); color: var(--gelb); }
#vorteile .probleme__fuss { color: var(--auf-dunkel); }

/* =====================================================================
   Unterseiten (24.10.2026): Säulen 01/02/03 mit Farbcode, Seitenköpfe,
   Mockups, Zeitstrahl, Ergebnis-Teaser. 01 = Blau, 02 = Gelb, 03 = beides.
   ===================================================================== */
.saeule--1, .seitenkopf--s1 { --s: var(--blau); --s-text: #fff; }
.saeule--2, .seitenkopf--s2 { --s: var(--gelb); --s-text: var(--tinte); }
.saeule--3, .seitenkopf--s3 { --s: linear-gradient(135deg, var(--blau), var(--gelb)); --s-text: var(--tinte); }

/* Säulen-Karten auf der Startseite */
.saeulen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.saeule { position: relative; }
.saeule > a { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 30px 26px 26px; color: var(--text); text-decoration: none; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.saeule > a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--s); transition: height .25s ease; }
.saeule > a:hover, .saeule > a:focus-visible { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(10,34,56,.14); border-color: transparent; color: var(--text); }
.saeule > a:hover::before { height: 8px; }
.saeule__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.saeule__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--s); color: var(--s-text); box-shadow: 0 8px 18px rgba(10,34,56,.12); }
.saeule__icon svg { width: 24px; height: 24px; }
.saeule__nr { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px #C9D6E2; }
.saeule__dach { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--grau); }
.saeule h3 { font-size: 1.4rem; margin: 0; }
.saeule__unter { font-weight: 700; color: var(--tinte); }
.saeule ul { list-style: none; margin: 8px 0 18px; padding: 14px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 8px; }
.saeule li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; color: var(--grau); }
.saeule li svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; color: var(--gruen-tief); }
.saeule__mehr { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--gruen-tief); }
.saeule__mehr svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.saeule > a:hover .saeule__mehr svg { transform: translateX(5px); }
.saeule--3 > a, .saeule--3 > a:hover { background: var(--tinte); border-color: var(--tinte); color: var(--auf-dunkel); }
.saeule--3 > a { box-shadow: 0 30px 60px rgba(10,34,56,.25); }
.saeule--3 h3, .saeule--3 .saeule__unter { color: #fff; }
.saeule--3 .saeule__dach, .saeule--3 li { color: var(--auf-dunkel); }
.saeule--3 ul { border-top-color: rgba(255,255,255,.12); }
.saeule--3 li svg, .saeule--3 .saeule__mehr { color: var(--gelb); }
.saeule--3 .saeule__nr { -webkit-text-stroke-color: rgba(255,255,255,.22); }
/* Verbinder 01 → 02 → 03 */
.saeule:not(:last-child)::after { content: "›"; position: absolute; top: 50%; right: -36px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--tinte); color: var(--gelb); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; line-height: 1; z-index: 2; box-shadow: 0 0 0 6px var(--hell); }
@media (max-width: 960px) {
  .saeulen { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 560px; margin-inline: auto; }
  .saeule:not(:last-child)::after { top: auto; bottom: -31px; right: 50%; margin: 0 -14px 0 0; transform: rotate(90deg); }
}

/* Seitenkopf der Unterseiten */
.seitenkopf { position: relative; overflow: hidden; padding-bottom: clamp(36px, 5vw, 56px); }
.seitenkopf .wrap { position: relative; }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.seitenkopf__text h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.seitenkopf__dach { display: flex; align-items: center; gap: .7em; }
.seitenkopf__nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--s, var(--gelb)); color: var(--s-text, var(--tinte)); font-size: .85rem; letter-spacing: 0; }
.seitenkopf__rechts { display: flex; justify-content: center; }
.seitenkopf .duo { margin-inline: auto; }
@media (max-width: 900px) { .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); } }

/* Säulenleiste: wo bin ich? Linie je Abstand zwischen zwei Punkten */
.leiste { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: flex; max-width: 720px; }
.leiste__punkt { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.leiste__punkt:last-child { flex: 0 0 auto; }
.leiste__punkt:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px); }
.leiste__punkt a { display: flex; align-items: center; gap: 10px; color: var(--auf-dunkel); text-decoration: none; font-weight: 600; font-size: .95rem; }
.leiste__nr { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte-2); border: 2px solid rgba(255,255,255,.25); font-size: .8rem; font-weight: 800; color: #fff; transition: transform .2s, border-color .2s; }
.leiste__punkt a:hover .leiste__nr { transform: scale(1.08); border-color: #fff; }
.leiste__punkt a:hover, .leiste__punkt.ist-hier a { color: #fff; }
.leiste__punkt.ist-hier .leiste__nr { background: var(--s); border-color: transparent; color: var(--s-text); box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
@media (max-width: 520px) {
  .leiste__punkt { align-items: flex-start; }
  .leiste__punkt a { flex-direction: column; align-items: center; gap: 6px; font-size: .76rem; }
  .leiste__punkt:not(:last-child)::after { margin: 17px 6px 0; }
}

/* Leistungs-Kacheln der Unterseiten */
.kachel--leistung { border: 1px solid var(--linie); transition: transform .2s, box-shadow .2s; }
.kachel--leistung:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.abschnitt:not(.abschnitt--hell) .kachel--leistung { background: #fff; }

/* Zeitstrahl (Marke: So läuft es ab) */
.zeitstrahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.zeitstrahl__schritt { position: relative; }
.zeitstrahl__schritt:not(:last-child)::before { content: ""; position: absolute; left: 62px; right: -10px; top: 23px; height: 2px; background: repeating-linear-gradient(90deg, var(--gelb) 0 6px, transparent 6px 12px); }
.zeitstrahl__nr { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); color: var(--tinte); font-weight: 800; font-size: 1.1rem; margin-bottom: 18px; }
.zeitstrahl h3 { font-size: 1.12rem; }
.zeitstrahl p { margin: 0; color: var(--auf-dunkel); font-size: .97rem; }
@media (max-width: 860px) {
  .zeitstrahl { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .zeitstrahl__schritt { padding-left: 70px; min-height: 48px; }
  .zeitstrahl__schritt:not(:last-child)::before { left: 23px; right: auto; top: 60px; bottom: -14px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gelb) 0 6px, transparent 6px 12px); }
  .zeitstrahl__nr { position: absolute; left: 0; top: 0; margin: 0; }
}
.vergleich--weiss li { background: #fff; }

/* Weiter zum nächsten Baustein */
.weiter { border-bottom: 0; padding: clamp(36px, 5vw, 64px) 0; }
.weiter__karte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 32px); padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 36px); border-radius: 22px; background: var(--tinte); color: var(--auf-dunkel); text-decoration: none; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.weiter__karte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--s); }
.weiter__karte:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(10,34,56,.25); color: var(--auf-dunkel); }
.weiter__nr { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
.weiter__text { display: grid; gap: 2px; }
.weiter__text small { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: var(--gelb); }
.weiter__text b { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.25; }
.weiter__pfeil { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); color: var(--tinte); transition: transform .25s; }
.weiter__pfeil svg { width: 22px; height: 22px; }
.weiter__karte:hover .weiter__pfeil { transform: translateX(6px); }
@media (max-width: 560px) { .weiter__karte { grid-template-columns: minmax(0, 1fr) auto; } .weiter__nr { display: none; } .weiter__pfeil { width: 44px; height: 44px; } }

/* Ergebnis-Teaser Startseite */
.ergebnisse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; margin: 28px 0; }
.zahlen div { padding-top: 12px; border-top: 3px solid var(--blau); }
.zahlen div:nth-child(2) { border-top-color: var(--gelb); }
.zahlen div:nth-child(3) { border-top-color: var(--tinte); }
.zahlen div:nth-child(4) { border-image: linear-gradient(90deg, var(--blau), var(--gelb)) 1; }
.zahlen dt { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--tinte); line-height: 1; letter-spacing: -.03em; }
.zahlen dd { margin: 6px 0 0; color: var(--grau); font-size: .95rem; }
.ergebnisse__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.ergebnisse__bilder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ergebnisse__bilder .screen:nth-child(2) { margin-top: 48px; }
@media (max-width: 900px) { .ergebnisse { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ergebnisse__bilder { grid-template-columns: minmax(0, 1fr); } .ergebnisse__bilder .screen:nth-child(2) { margin-top: 0; } }

/* Team-Teaser Startseite */
.team-kurz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: center; max-width: 980px; }
.team-kurz__bilder { display: flex; }
.team-kurz__bild { width: clamp(120px, 16vw, 180px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #fff; box-shadow: var(--schatten); }
.team-kurz__bilder img + img { margin-left: -34px; }
@media (max-width: 700px) { .team-kurz { grid-template-columns: minmax(0, 1fr); } }

/* Website-Referenzen (Sichtbarkeit) */
.web-logos { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.web-logos li { display: flex; align-items: center; gap: 8px; height: 68px; padding: 10px 18px; background: #fff; border: 1px solid var(--linie); border-radius: 14px; font-weight: 700; color: var(--tinte); font-size: .92rem; }
.web-logos img { max-height: 44px; width: auto; max-width: 170px; }

/* =====================================================================
   Ruhigere Fassung (24.10.2026, „zu KI-lastig“): linksbündige Köpfe,
   Zeilen statt Kartenraster, echte Bilder statt Mockups.
   ===================================================================== */
.hero__ort { margin: 0 0 1.1em; font-size: .92rem; font-weight: 600; color: var(--gelb); }
.hero--start h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); max-width: 18ch; }

.zweiteilig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.zweiteilig p { color: var(--grau); max-width: 52ch; }
.zweiteilig p:last-child { color: var(--tinte); font-weight: 700; }
.vier-fragen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.vier-fragen li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linie); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: var(--tinte); line-height: 1.3; }
.vier-fragen span { font-size: .95rem; color: var(--gruen-tief); font-weight: 800; }
@media (max-width: 860px) { .zweiteilig { grid-template-columns: minmax(0, 1fr); } }

.zeilen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.zeile { display: grid; grid-template-columns: 3.2rem minmax(0, 15rem) minmax(0, 1fr) 48px; gap: 12px 28px; align-items: start; padding: 28px 0; border-bottom: 1px solid #CFDAE4; }
.zeile__nr { font-weight: 800; color: var(--gruen-tief); padding-top: .2em; }
.zeile h3 { margin: 0; font-size: 1.3rem; }
.zeile h3 a { color: var(--tinte); text-decoration: none; }
.zeile h3 a:hover { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.zeile p { margin: 0; color: var(--grau); max-width: 62ch; }
.zeile__link { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinte); display: grid; place-items: center; color: var(--tinte); transition: background .2s, color .2s; }
.zeile__link svg { width: 18px; height: 18px; }
.zeile__link:hover { background: var(--gelb); border-color: var(--gelb); }
@media (max-width: 860px) { .zeile { grid-template-columns: 2.4rem minmax(0, 1fr) 44px; } .zeile p { grid-column: 2 / 4; grid-row: 2; } }
.branchen--links { justify-content: flex-start; }
.branchen--links ul { justify-content: flex-start; }

.wir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.wir__person { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; align-items: start; }
.wir__bild { width: 140px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.wir__person h3 { margin: 0; font-size: 1.25rem; }
.wir__rolle { margin: 2px 0 10px; font-weight: 700; color: var(--gruen-tief); font-size: .95rem; }
.wir__person p:last-child { margin: 0; color: var(--grau); }
.wir__fuss { margin: 28px 0 0; }
@media (max-width: 860px) { .wir { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .wir__person { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } .wir__bild { width: 96px; } }

.stichworte { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; }
.stichworte li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); font-weight: 700; color: var(--tinte); }
.hinweis-satz { max-width: 640px; margin: 32px auto 0; padding-left: 18px; border-left: 4px solid var(--gelb); font-size: 1.12rem; font-weight: 600; color: var(--tinte); }

.kopfbild { margin: 0; width: min(100%, 460px); }
.kopfbild img { border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35); background: #fff; }
.kopfbild--schmal { width: min(100%, 340px); }
.kopfbild figcaption { margin-top: 12px; font-size: .88rem; color: var(--auf-dunkel); }
.seitenkopf--nurtext .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
.seitenkopf--nurtext .seitenkopf__text { max-width: 760px; }
.zeile--kurz { grid-template-columns: 3.2rem minmax(0, 15rem) minmax(0, 1fr); }
@media (max-width: 860px) { .zeile--kurz { grid-template-columns: 2.4rem minmax(0, 1fr); } .zeile--kurz p { grid-column: 2; } }
#leistung .abschnitt__kopf--mitte { text-align: left; margin-inline: 0; }
#leistung .abschnitt__kopf--mitte .lead { margin-inline: 0; }
#leistung .probleme__fuss { text-align: left; }
.kopfbild a { display: block; }
.kopfbild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.kopfbild--schmal img { aspect-ratio: auto; }
.garantie__klein { font-size: .85rem; line-height: 1.5; margin-top: .7em; }

/* =====================================================================
   Startseite 26.10.2026: Zahlenband, drei Bausteine als Handys, Garantieband
   ===================================================================== */
.zahlenband { background: #fff; border-bottom: 1px solid var(--linie); padding: clamp(28px, 4vw, 44px) 0; }
.zahlenband__liste { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.zahlenband__liste div { padding-left: 18px; border-left: 4px solid var(--gelb); }
.zahlenband__liste dt { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--tinte); }
.zahlenband__liste dd { margin: 8px 0 0; color: var(--grau); font-size: .95rem; line-height: 1.35; }
@media (max-width: 640px) { .zahlenband__liste { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

.hschritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.hschritt { display: flex; flex-direction: column; gap: 8px; }
.hschritt__handy { display: flex; justify-content: center; padding: 14px 0 26px; }
.hschritt__handy .fdx-handy { transform: scale(.86); transform-origin: top center; margin-bottom: -88px; }
.hschritt__nr { margin: 0; display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.hschritt__nr span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--s); color: var(--s-text); letter-spacing: 0; font-size: .8rem; }
.hschritt h3 { margin: 0; font-size: 1.35rem; }
.hschritt h3 a { color: var(--tinte); text-decoration: none; }
.hschritt h3 a:hover { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hschritt > p:not(.hschritt__nr) { margin: 0; color: var(--grau); }
.hschritt .pfeil-link { margin-top: 4px; }
@media (max-width: 1000px) {
  .hschritte { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 48px; }
}
@media (max-width: 420px) { .hschritt__handy .fdx-handy { transform: scale(.78); margin-bottom: -136px; } }

.garantieband { background: var(--gelb); color: var(--tinte); padding: clamp(26px, 4vw, 40px) 0; }
.garantieband__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 32px); align-items: center; }
.garantieband__siegel { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); }
.garantieband__siegel svg { width: 30px; height: 30px; }
.garantieband__text { margin: 0; display: grid; gap: 4px; }
.garantieband__text b { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.25; }
.garantieband__text span { font-weight: 600; }
.btn--dunkel { background: var(--tinte); color: #fff; }
.btn--dunkel:hover { background: #163A5C; color: #fff; }
@media (max-width: 760px) { .garantieband__inner { grid-template-columns: minmax(0, 1fr); } .garantieband__siegel { width: 52px; height: 52px; } .garantieband .btn { justify-self: start; } }
.hschritt--1 { --s: var(--blau); --s-text: #fff; }
.hschritt--2 { --s: var(--gelb); --s-text: var(--tinte); }
.hschritt--3 { --s: linear-gradient(135deg, var(--blau), var(--gelb)); --s-text: var(--tinte); }
.zahlenband__liste dt { font-variant-numeric: tabular-nums; }

/* Seitenköpfe der Unterseiten: zwei versetzte Musterhandys (26.10.2026) */
.kopf-handys { position: relative; width: 430px; height: 560px; margin-inline: auto; }
.kopf-handys .fdx-handy { position: absolute; top: 0; transform-origin: top left; }
.kopf-handys__hinten { left: 0; transform: scale(.74) rotate(-6deg); top: 46px !important; opacity: .92; filter: saturate(.9); }
.kopf-handys__vorne { left: 160px; transform: scale(.84) rotate(3deg); z-index: 2; }
.kopf-handys__vorne .fdx-handy__rand { box-shadow: 0 0 0 2px #8E9196, 0 0 0 5px #3C3F44, 0 0 0 6px #6B6E73, 0 40px 90px rgba(0,0,0,.55); }
.kopf-handys .fd-etikett { top: -6px; right: 0; left: auto; z-index: 5; }
@media (max-width: 900px) { .kopf-handys { width: 340px; height: 450px; } .kopf-handys .fdx-handy { zoom: .8; } .kopf-handys__vorne { left: 150px; } }
@media (max-width: 420px) { .kopf-handys { width: 290px; height: 400px; } .kopf-handys .fdx-handy { zoom: .72; } .kopf-handys__vorne { left: 130px; } }

/* =====================================================================
   Kundenstimme (/kundenstimme, 27.10.2026): Fragebogen nach dem Muster webdesign-benjamin.de,
   zwei Stufen (?90 = nach 90 Tagen), Google-Bewertung als wichtigster Knopf
   ===================================================================== */
.ks-hero { text-align: center; padding-bottom: clamp(48px, 6vw, 72px); }
.ks-hero__inner { max-width: 760px; }
.ks-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
.ks-hero .lead { color: var(--auf-dunkel); margin-inline: auto; }
.ks-g { margin: 32px auto 0; max-width: 560px; }
.ks-sterne { color: var(--gelb); font-size: 1.5rem; letter-spacing: .24em; line-height: 1; margin: 0 0 12px; }
.ks-g__titel { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; margin: 0 0 18px; }
.ks-g__klein { margin: 16px auto 0; font-size: .9rem; color: var(--auf-dunkel); max-width: 460px; }
.ks-g .btn svg, .ks-google .btn svg, .ks-senden svg { width: 18px; height: 18px; }
.ks-p2 { display: none !important; }
body.stufe2 .ks-p1 { display: none !important; }
body.stufe2 .ks-p2 { display: block !important; }
.ks-seite { padding-top: 0; background: linear-gradient(180deg, var(--tinte) 0 48px, var(--hell) 48px, #fff 70%); }
.ks-intro { color: var(--grau); margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.ks-q { margin-bottom: 22px; }
.ks-q > label, .ks-frage { font-size: 1.12rem !important; font-weight: 700; color: var(--tinte); line-height: 1.35; margin: 0 0 4px; }
.ks-num { color: var(--gruen-tief); margin-right: 6px; }
.ks-seite .hint { font-size: .88rem; color: var(--grau); margin: 0 0 8px; }
.ks-intern { display: inline-block; margin-left: 8px; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); border: 1px solid var(--linie); border-radius: 6px; padding: 2px 7px; vertical-align: 3px; }
.ks-opt { font-weight: 400; color: var(--grau); }
.ks-empf, .ks-teilen { border-top: 1px solid var(--linie); padding-top: 22px; margin: 4px 0 24px; }
.ks-empf__person { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.ks-empf__person legend { padding: 0; margin: 12px 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-tief); }
.ks-teilen__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ks-freigabe { background: var(--hell); border-radius: var(--radius-s); padding: 20px 22px 8px; margin: 8px 0 22px; }
.ks-freigabe h3 { font-size: 1rem; margin-bottom: 8px; }
.ks-freigabe .consent-row { margin: 0 0 12px; }
.ks-senden { margin-top: 8px; }
.ks-done { text-align: center; padding: 8px 0; }
.ks-done__haken { width: 64px; height: 64px; border-radius: 50%; background: var(--gelb); color: var(--tinte); display: grid; place-items: center; margin: 0 auto 18px; }
.ks-done__haken svg { width: 32px; height: 32px; }
.ks-google { margin: 28px auto 0; padding: 28px 24px 30px; background: var(--tinte); color: var(--auf-dunkel); border-radius: var(--radius); text-align: center; }
.ks-google__titel { color: #fff; font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.ks-google p { margin: 0 0 18px; }
@media (max-width: 640px) {
  .ks-g .btn, .ks-google .btn, .ks-senden { width: 100%; justify-content: center; }
  .ks-teilen__knoepfe .btn { width: 100%; justify-content: center; }
  .ks-google { padding: 24px 16px 26px; }
}