/* ARES H2: gemeinsames Stylesheet aller Seiten im H2-Rahmen. ERZEUGT von _werkzeug/seiten_bauen.py, nicht bearbeiten.
   Quellen: teile/h2/grund.css, teile/h2/bausteine.css, teile/h2/werkzeug.css, teile/zusatz/automatisierung.css, teile/zusatz/firmenwebsite.css, teile/zusatz/geo-agentur.css, teile/zusatz/google-ads.css, teile/zusatz/karriereseiten.css, teile/zusatz/ki-anzeigen.css, teile/zusatz/ki-chatbot.css, teile/zusatz/ki-loesungen.css, teile/zusatz/landingpages.css, teile/zusatz/local-seo.css, teile/zusatz/microsoft-ads.css, teile/zusatz/orte.css, teile/zusatz/personalmarketing.css, teile/zusatz/social-ads.css, teile/zusatz/social-recruiting.css, teile/zusatz/website-relaunch.css, teile/zusatz/wissen-geo.css, teile/zusatz/wissen.css, teile/h2/zusatz/automatisierung.css, teile/h2/zusatz/check.css, teile/h2/zusatz/firmenwebsite.css, teile/h2/zusatz/geo.css, teile/h2/zusatz/google-ads.css, teile/h2/zusatz/karriereseiten.css, teile/h2/zusatz/ki-anzeigen.css, teile/h2/zusatz/ki-chatbot.css, teile/h2/zusatz/ki-loesungen.css, teile/h2/zusatz/kontakt.css, teile/h2/zusatz/landingpages.css, teile/h2/zusatz/local-seo.css, teile/h2/zusatz/microsoft-ads.css, teile/h2/zusatz/ort-denzlingen.css, teile/h2/zusatz/ort-einsatzgebiet.css, teile/h2/zusatz/ort-elzach.css, teile/h2/zusatz/ort-endingen.css, teile/h2/zusatz/ort-freiburg.css, teile/h2/zusatz/ort-herbolzheim.css, teile/h2/zusatz/ort-kenzingen.css, teile/h2/zusatz/ort-teningen.css, teile/h2/zusatz/ort-waldkirch.css, teile/h2/zusatz/orte.css, teile/h2/zusatz/personalmarketing.css, teile/h2/zusatz/recht.css, teile/h2/zusatz/seo.css, teile/h2/zusatz/social-ads.css, teile/h2/zusatz/social-recruiting.css, teile/h2/zusatz/ueber-ares.css, teile/h2/zusatz/website-relaunch.css, teile/h2/zusatz/wissen.css */
/* ==========================================================================
   ARES H2-Rahmen, Teil 1: Grundlagen (aus der Startseite H2 herausgelöst am 16.10.2026)
   Schriften selbst gehostet: Titillium Web und Instrument Serif (SIL Open Font License, assets/fonts/OFL*.txt).
   Enthält: Tokens, Grundtypo, Knöpfe, Kopf, Mega-Menü, Handy-Menü, Analyse-Formular (.start), Vertrauensleiste,
   Live-Glasfläche mit Szenen, Befund-Dokument, Wegweiser (Lotse), Vergleich, Belege (Logos, Stimmen), Bobby,
   Kürze und FAQ, Abschluss, Fuß, Kontaktzentrale, Cookie-Hinweis, Einblenden.
   Pflege-Quelle: _werkzeug/teile/h2/grund.css. Das Bauwerkzeug setzt daraus assets/css/ares.css zusammen,
   NIE assets/css/ares.css direkt bearbeiten.
   ========================================================================== */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2"); }
/* Variante „Mischung“ (H): Einstieg, Wegweiser, Vergleich und Rahmen aus F „Mittelstand“, Ziele als Schilde aus E „Helm“, Bobby aus G „Aufstieg“. Espresso, Bernstein als Licht, Serifen-Kursive als Stimme. */
@font-face { font-family: "Titillium Web"; font-weight: 300; font-display: swap; src: url("../fonts/titillium-web-300.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 400; font-display: swap; src: url("../fonts/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url("../fonts/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-display: swap; src: url("../fonts/titillium-web-700.woff2") format("woff2"); }
:root {
  --espresso: #1c1713;
  --espresso-2: #241e19;
  --espresso-3: #2f2721;
  --papier: #fbf8f3;
  --creme: #f3ede4;
  --sand: #e9e0d2;
  --tinte: #1f1a16;
  --leise: #5d5449;
  --linie: #e0d6c8;
  --linie-dunkel: rgba(246, 239, 230, .14);
  --hell: #f6efe6;
  --hell-leise: #cdbfae;
  --bernstein: #f4a53a;
  --bernstein-tief: #e48f17;
  --bernstein-licht: #f7bb63;
  --bernstein-text: #8a4f00;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --grotesk: "Titillium Web", system-ui, sans-serif;
  --rahmen: 1240px;
  --rand: clamp(16px, 4vw, 48px);
  --kopf-h: 84px;
  --weich: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--kopf-h); }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 18px/1.6 var(--grotesk); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; }
h3 em, h2 em, h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
p, li, dd { text-wrap: pretty; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--tinte); color: #fff; padding: 8px 14px; z-index: 99; }
.sprung:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.symbol { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.raster { width: min(var(--rahmen), 100% - 2 * var(--rand)); margin-inline: auto; }
.abschnitt { padding-block: clamp(88px, 11vw, 160px); }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; font: 600 16px/1 var(--grotesk); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s, transform .25s var(--weich), box-shadow .25s; }
.knopf--akzent { background: var(--bernstein); color: #1a130c; box-shadow: 0 10px 30px -12px rgba(244, 165, 58, .7); }
.knopf--akzent:hover { background: var(--bernstein-licht); transform: translateY(-1px); }
.knopf--gross { min-height: 56px; padding: 0 30px; font-size: 17px; }
.textlink { font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .3s var(--weich); }
.textlink:hover { background-size: 40% 1px; }
/* Partnerlogos hell und einheitlich auf dunklem Grund */
.hell-logo { filter: grayscale(1) invert(1) brightness(1.55) contrast(1.15); mix-blend-mode: screen; }
.ms-ausschnitt, .meta-ausschnitt { --h: 24px; position: relative; display: block; height: var(--h); overflow: hidden; flex: none; }
.ms-ausschnitt { width: calc(var(--h) * 158 / 42); }
.ms-ausschnitt img { position: absolute; max-width: none; width: calc(var(--h) * 300 / 42); left: calc(var(--h) * -32 / 42); top: calc(var(--h) * -31 / 42); }
.meta-ausschnitt { width: calc(var(--h) * 557 / 120); }
.meta-ausschnitt img { position: absolute; max-width: none; width: calc(var(--h) * 774 / 120); left: calc(var(--h) * -108 / 120); top: calc(var(--h) * -109 / 120); }
/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; height: var(--kopf-h); color: var(--hell); transition: background .35s, color .35s, box-shadow .35s; }
.kopf.ist-hell { background: rgba(251, 248, 243, .96); color: var(--tinte); box-shadow: 0 1px 0 var(--linie); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kopf__innen { display: flex; align-items: center; gap: 32px; width: min(1360px, 100% - 2 * var(--rand)); height: 100%; margin-inline: auto; }
.kopf__logo { position: relative; flex: none; display: block; width: 118px; }
.kopf__logo img { width: 118px; transition: opacity .3s; }
.kopf__logo-dunkel { position: absolute; inset: 0; opacity: 0; }
.kopf.ist-hell .kopf__logo-hell { opacity: 0; }
.kopf.ist-hell .kopf__logo-dunkel { opacity: 1; }
.menue { margin-right: auto; }
.menue__liste { display: flex; align-items: center; gap: 6px; }
.menue__punkt { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px; background: none; color: inherit; font: 600 16px/1.2 var(--grotesk); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s; }
.menue__punkt:hover, .menue__punkt[aria-expanded="true"] { background: rgba(246, 239, 230, .1); }
.kopf.ist-hell .menue__punkt:hover, .kopf.ist-hell .menue__punkt[aria-expanded="true"] { background: var(--sand); }
.pfeilchen { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .25s; }
.menue__punkt[aria-expanded="true"] .pfeilchen { transform: rotate(180deg); }
.menue__handy-fuss { display: none; }
.kopf__aktion { display: flex; align-items: center; gap: 22px; flex: none; }
.kopf__tel { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.kopf__tel .symbol { width: 19px; height: 19px; color: var(--bernstein); }
.kopf.ist-hell .kopf__tel .symbol { color: var(--bernstein-text); }
.handy-knopf { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 600 15px var(--grotesk); cursor: pointer; }
.handy-knopf__striche { position: relative; width: 16px; height: 10px; }
.handy-knopf__striche::before, .handy-knopf__striche::after { content: ""; position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; transition: transform .3s var(--weich), top .3s var(--weich); }
.handy-knopf__striche::before { top: 0; }
.handy-knopf__striche::after { top: 8.4px; }
.handy-knopf[aria-expanded="true"] .handy-knopf__striche::before { top: 4.2px; transform: rotate(45deg); }
.handy-knopf[aria-expanded="true"] .handy-knopf__striche::after { top: 4.2px; transform: rotate(-45deg); }
.kopf.hat-handymenue { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--papier); }
/* Mega-Menü. Grundform (gilt auch im hellen Handy-Menü): Spalten mit Überschrift, Einträge mit Symbol-Kachel */
.mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; color: var(--tinte); }
.mega__innen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.08fr); gap: 0 36px; width: min(1360px, 100% - 2 * var(--rand)); margin-inline: auto; padding: 36px 36px 36px 40px; border-radius: 24px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 50px 90px -40px rgba(28, 23, 19, .45); }
.mega__titel { position: relative; display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 14px; border-bottom: 1px solid var(--tinte); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mega__nr { font: italic 400 22px/1 var(--serif); color: var(--bernstein-text); }
.mega__gruppe a { display: flex; gap: 14px; align-items: center; margin-inline: -12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; transition: background .2s, box-shadow .2s; }
.mega__gruppe a:hover { background: var(--creme); }
.mega__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--bernstein-text); transition: background .25s, box-shadow .25s, color .25s; }
.mega__ico .symbol { width: 20px; height: 20px; }
.mega__gruppe b { display: block; font-size: 16.5px; line-height: 1.3; }
.mega__gruppe small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.35; color: var(--leise); white-space: nowrap; }
.mega__karte { display: none; }
.mega__fuss { grid-column: 1 / 4; grid-row: 2; align-self: end; display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 0 0; border-top: 1px solid var(--linie); font-size: 15px; line-height: 1.4; color: var(--leise); text-decoration: none; }
.mega__fuss b { color: var(--tinte); }
.mega__pfeil { flex: none; width: 20px; height: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--weich); }
.mega__fuss:hover .mega__pfeil { transform: translateX(4px); }
/* Desktop: Espresso-Glas mit feinem Bernstein, der Kopf wird beim Öffnen selbst zum dunklen Glas */
@media (min-width: 1100px) {
  .kopf.hat-mega { background: rgba(21, 17, 14, .94); color: var(--hell); box-shadow: 0 1px 0 rgba(246, 239, 230, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .kopf.hat-mega .menue__punkt[aria-expanded="true"] { background: rgba(244, 165, 58, .14); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .38); }
  .mega__innen { overflow: hidden; color: var(--hell); background: radial-gradient(42% 70% at 86% 0%, rgba(244, 165, 58, .11), rgba(244, 165, 58, 0) 70%), linear-gradient(168deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12), inset 0 1px 0 rgba(255, 255, 255, .07), 0 60px 120px -50px rgba(0, 0, 0, .9), 0 0 140px -70px rgba(244, 165, 58, .55); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
  .mega__innen::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(247, 187, 99, 0), rgba(247, 187, 99, .7) 50%, rgba(247, 187, 99, 0)); }
  .mega__titel { border-bottom: 0; color: var(--hell); }
  .mega__titel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--bernstein) 0, rgba(244, 165, 58, .35) 38%, rgba(246, 239, 230, .1) 100%); }
  .mega__nr { color: var(--bernstein-licht); }
  .mega__gruppe a:hover, .mega__gruppe a:focus-visible { background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(247, 187, 99, .26); }
  .mega__gruppe a:focus-visible { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
  .mega__ico { background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .24); color: var(--bernstein-licht); }
  .mega__gruppe a:hover .mega__ico, .mega__gruppe a:focus-visible .mega__ico { background: var(--bernstein); box-shadow: 0 8px 22px -10px rgba(244, 165, 58, .8); color: #1a130c; }
  .mega__gruppe b { color: var(--hell); }
  .mega__gruppe small { color: #cdbfae; }
  .mega__karte { grid-column: 4; grid-row: 1 / 3; }
  .mega__fuss { border-top-color: rgba(246, 239, 230, .1); color: #cdbfae; }
  .mega__fuss b { color: var(--hell); }
  .mega__fuss .mega__pfeil { color: var(--bernstein-licht); }
  .mega__fuss:hover .mega__ico, .mega__fuss:focus-visible .mega__ico { background: var(--bernstein); color: #1a130c; }
  /* Seitenkarte als kleine Live-Oberfläche wie im Einstieg */
  .mega__karte { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 244, 228, .1) 0%, rgba(255, 244, 228, .035) 55%, rgba(255, 244, 228, .06) 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .mega__karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(246, 239, 230, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 239, 230, .05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(80% 60% at 70% 0%, #000, transparent 80%); mask-image: radial-gradient(80% 60% at 70% 0%, #000, transparent 80%); }
  .mega__live { padding: 12px 16px 14px; border-radius: 14px; background: rgba(21, 17, 14, .6); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1), 0 18px 40px -24px rgba(0, 0, 0, .9); }
  .mega__live-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(246, 239, 230, .1); }
  .mega__live .sz-titel { font-size: 14px; }
  .mega__mini { display: grid; gap: 10px; }
  .mega__mini li { display: grid; grid-template-columns: 68px minmax(0, 1fr) 54px; align-items: center; gap: 10px; font-size: 13px; color: #cdbfae; }
  .mega__mini i { position: relative; height: 6px; border-radius: 6px; background: rgba(246, 239, 230, .1); }
  .mega__mini i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 12px rgba(244, 165, 58, .45); transform-origin: left; animation: mega-balken 1s var(--weich) .2s both; }
  .mega__mini li:nth-child(2) i::after { animation-delay: .32s; }
  .mega__mini li:nth-child(3) i::after { animation-delay: .44s; }
  .mega__mini em { font-style: normal; font-weight: 600; text-align: right; color: var(--bernstein-licht); }
  .mega__karte-titel { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--hell); }
  .mega__karte-titel em { display: block; font: italic 400 30px/1.05 var(--serif); letter-spacing: -.005em; color: var(--bernstein-licht); }
  .mega__karte-text p:not(.mega__karte-titel) { margin-top: 10px; font-size: 15px; line-height: 1.5; color: #d9cdbd; }
  .mega__person { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--hell); }
  .mega__person img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(244, 165, 58, .5); }
  .mega__karte .knopf { align-self: flex-start; }
}
@keyframes mega-balken { from { transform: scaleX(0); } }
@media (max-width: 1359px) {
  .mega__innen { gap: 0 28px; padding: 32px 30px 32px 34px; }
  .mega__gruppe small { white-space: normal; text-wrap: balance; }
  .kopf__nummer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf__tel { justify-content: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
  .kopf__innen { gap: 26px; }
}
@media (max-width: 1259px) and (min-width: 1100px) {
  .mega__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
  .mega__gruppe small { white-space: normal; }
  .mega__karte { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 18px 28px; }
  .mega__person { display: none; }
  .mega__karte { grid-column: 1 / -1; grid-row: 3; }
  .mega__fuss { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}
@media (max-width: 1099px) {
  :root { --kopf-h: 68px; }
  .kopf__logo, .kopf__logo img { width: 100px; }
  .handy-knopf { display: inline-flex; }
  .kopf__innen { justify-content: space-between; gap: 12px; }
  .kopf__aktion { gap: 10px; }
  .menue { display: none; position: fixed; inset: var(--kopf-h) 0 0 0; z-index: 49; margin: 0; padding: 12px var(--rand) 40px; overflow-y: auto; background: var(--papier); color: var(--tinte); }
  .menue.ist-offen { display: block; }
  .menue__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menue__liste > li { border-bottom: 1px solid var(--linie); }
  .menue__punkt { width: 100%; justify-content: space-between; padding: 20px 0; border-radius: 0; font-size: 22px; }
  .menue__punkt:hover, .menue__punkt[aria-expanded="true"], .kopf.ist-hell .menue__punkt:hover, .kopf.ist-hell .menue__punkt[aria-expanded="true"] { background: none; }
  .mega { position: static; padding: 0 0 20px; }
  .mega__innen { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .mega__gruppe small { white-space: normal; }
  .mega__karte { display: none; }
  .mega__fuss { grid-column: auto; grid-row: auto; margin-top: 0; padding-top: 18px; }
  .menue__handy-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 28px; }
  .menue__tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
  html.menue-offen { overflow: hidden; }
}
@media (max-width: 700px) {
  .kopf__knopf { display: none; }
}
.nw { white-space: nowrap; }
/* Startformular: Analyse wählen, Website eingeben */
.start { margin-top: 30px; max-width: 650px; }
.start__wahl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.start__wahl legend { float: left; padding: 0; font-size: 15.5px; color: #e1d5c5; }
.start__segmente { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); }
.start__segmente label { position: relative; cursor: pointer; }
.start__segmente input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.start__segmente span { display: block; padding: 8px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: #d9ccbb; white-space: nowrap; transition: background .25s, color .25s; }
.start__segmente label:hover span { color: var(--hell); }
.start__segmente input:checked + span { background: var(--hell); color: var(--tinte); }
.start__segmente input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.start__zeile { display: flex; gap: 10px; }
.start__feld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 26px 0 22px; border-radius: 999px; background: #fbf6ee; color: var(--tinte); cursor: text; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 22px 44px -22px rgba(0, 0, 0, .9); transition: box-shadow .25s; }
.start__feld:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 6px rgba(244, 165, 58, .12), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.start__feld:focus-within { box-shadow: 0 0 0 2px var(--bernstein), 0 0 0 8px rgba(244, 165, 58, .28), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.start__feld .symbol { width: 24px; height: 24px; color: var(--bernstein-text); }
.start__feld-innen { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.start__label { font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; color: var(--leise); }
.start input { width: 100%; height: 28px; padding: 0; border: 0; background: none; color: var(--tinte); font: 400 18.5px/1 var(--grotesk); outline: none; }
.start input::placeholder { color: #8b7f71; opacity: 1; }
.start__knopf { min-height: 66px; padding: 0 30px; }
.start__fuss { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 15.5px; line-height: 1.45; color: #dcd0c0; }
.start__fuss img { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 239, 230, .25); }
/* Vertrauensleiste: eine Zeile über die ganze Breite */
.vertrauen { grid-area: vertrauen; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 0; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); }
.vertrauen__sterne { display: inline-flex; align-items: center; gap: 16px; padding-right: 34px; text-decoration: none; }
.sterne { display: inline-flex; gap: 3px; color: #f6b43c; }
.sterne svg { width: 26px; height: 26px; fill: currentColor; }
.vertrauen__sterne > span:last-child { font-size: 17px; color: #e7dccd; }
.vertrauen__sterne b { font: italic 400 36px/1 var(--serif); color: var(--hell); letter-spacing: -.01em; margin-right: 2px; }
.vertrauen__sterne:hover b { color: var(--bernstein-licht); }
.vertrauen__logos { flex: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vertrauen__logos > li:last-child { padding-right: 0; }
.vertrauen__logos > li { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 52px; padding: 0 30px; border-left: 1px solid var(--linie-dunkel); }
.vertrauen__google { height: 32px; width: auto; margin: -2px 0 -2px -4px; }
.vertrauen__marke > span:last-child { font-size: 13.5px; line-height: 1; letter-spacing: .02em; color: #d6c9b8; white-space: nowrap; }
.vertrauen__jahre b { font: italic 400 28px/1 var(--serif); color: var(--hell); white-space: nowrap; }
.vertrauen__jahre span { font-size: 13.5px; line-height: 1.2; color: #d6c9b8; white-space: nowrap; }
/* ---------- Kunden ---------- */
.kunden { background: var(--papier); padding-top: clamp(56px, 7vw, 96px); }
.kunden__titel { max-width: 14em; margin-inline: auto; text-align: center; }
.kunden__raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.kunden__raster li { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 12% 16%; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kunden__raster img { max-height: 54px; width: auto; max-width: 100%; object-fit: contain; opacity: .78; filter: grayscale(1); transition: opacity .3s; }
.kunden__raster li:hover img { opacity: 1; }
@media (max-width: 760px) {
  .kunden__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kunden__raster li { padding: 14%; }
  .kunden__raster img { max-height: 36px; }
}
/* ---------- Schluss ---------- */
.schluss { background: var(--espresso); color: var(--hell); }
.schluss__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px 96px; align-items: center; }
.schluss__person img { width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 0 0 1px var(--linie-dunkel), 0 0 0 10px rgba(246, 239, 230, .04); }
.schluss__person h2 { margin-top: 32px; }
.schluss__person h2 em { color: var(--bernstein-licht); }
.schluss__person p { max-width: 24em; margin-top: 18px; font-size: 19px; color: #e1d5c5; }
.schluss__tel { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font: italic 400 36px/1 var(--serif); text-decoration: none; }
.schluss__tel .symbol { width: 24px; height: 24px; color: var(--bernstein); }
.schluss__tel:hover { color: var(--bernstein-licht); }
.schluss__panel { padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: var(--espresso-2); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.schluss__reiter { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--espresso); }
.schluss__reiter button { flex: 1; min-height: 46px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--hell-leise); font: 600 15.5px var(--grotesk); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.schluss__reiter button[aria-selected="true"] { background: var(--hell); color: var(--tinte); }
.weg { display: grid; gap: 16px; margin-top: 28px; }
.weg[hidden] { display: none; }
.weg > p { color: #e1d5c5; }
.weg__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.weg label > span:first-child { display: block; margin-bottom: 6px; font-size: 14.5px; color: var(--hell-leise); }
.weg input:not([type]), .weg input[type="email"], .weg input[type="tel"], .weg textarea, .weg select { width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--espresso); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .22); color: var(--hell); font: 400 17px var(--grotesk); }
.weg input:focus, .weg textarea:focus, .weg select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--bernstein-licht); }
.weg__ok { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--hell-leise); }
.weg__ok input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--bernstein); }
.weg .knopf { justify-self: start; }
.weg__liste { display: grid; gap: 10px; }
.weg__liste li { padding-left: 28px; position: relative; }
.weg__liste li::before { content: ""; position: absolute; left: 0; top: .78em; width: 16px; height: 1px; background: var(--bernstein); }
.weg__danke { font: italic 400 28px/1.25 var(--serif); }
@media (max-width: 960px) {
  .schluss__raster { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .weg__zeile { grid-template-columns: 1fr; }
  .schluss__reiter button { font-size: 14px; padding: 0 6px; }
  .schluss__tel { font-size: 30px; }
}
/* ---------- Fuß ---------- */
.fuss { padding: clamp(64px, 7vw, 96px) 0 32px; background: #15110e; color: var(--hell-leise); font-size: 15.5px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--hell); }
.fuss__kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 56px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--linie-dunkel); }
.fuss__kopf img { width: 120px; }
.fuss__kopf p { color: var(--hell-leise); }
.fuss__direkt { display: flex; flex-direction: column; gap: 8px; color: var(--hell); }
.fuss__direkt a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.fuss__direkt .symbol { width: 18px; height: 18px; color: var(--bernstein); }
.fuss__spalten { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; padding: 48px 0; }
.fuss__spalten nav { display: flex; flex-direction: column; gap: 8px; }
.fuss__spalten p { margin-bottom: 6px; font-weight: 700; color: var(--hell); }
.fuss__region { padding: 28px 0; border-top: 1px solid var(--linie-dunkel); }
.fuss__region-titel { font: italic 400 24px/1.2 var(--serif); color: var(--hell); }
.fuss__orte { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; }
.fuss__orte a:last-child { color: var(--bernstein-licht); font-weight: 600; }
.fuss__belege { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px; padding: 32px 0; border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); }
.fuss__belege li { display: flex; align-items: center; gap: 10px; }
.fuss__belege > li > .hell-logo { height: 30px; width: auto; }
.fuss__belege .ms-ausschnitt, .fuss__belege .meta-ausschnitt { --h: 20px; }
.fuss__beleg-text { font-size: 13px; white-space: nowrap; color: var(--hell-leise); }
.fuss__belege .fuss__ga4, .fuss__belege .fuss__yt { height: 34px; }
.fuss__sterne .sterne { color: var(--hell-leise); gap: 2px; }
.fuss__sterne .sterne svg { width: 16px; height: 16px; }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 24px; font-size: 14px; }
.fuss__unten button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.fuss__unten button:hover { color: var(--hell); }
@media (max-width: 960px) {
  .fuss__kopf { grid-template-columns: 1fr; }
  .fuss__spalten { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Schwebender Kontakt, Handy-Leiste, Dialog ---------- */
.status-punkt { position: absolute; width: 12px; height: 12px; border: 2px solid var(--papier); border-radius: 50%; background: #b9ab99; }
.ist-erreichbar .status-punkt { background: #2f9e5b; }
.pille { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; border: 0; border-radius: 999px; background: var(--papier); color: var(--tinte); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 0 0 1px var(--linie), 0 22px 50px -18px rgba(28, 23, 19, .6); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .35s var(--weich), box-shadow .25s; }
.schwebe.ist-sichtbar .pille { opacity: 1; transform: none; pointer-events: auto; }
.pille:hover { box-shadow: 0 0 0 1px var(--bernstein-tief), 0 22px 50px -18px rgba(28, 23, 19, .6); }
.pille__bild { position: relative; flex: none; }
.pille__bild img { width: 46px; height: 46px; border-radius: 50%; }
.pille__bild .status-punkt { right: -1px; bottom: 0; }
.pille b { display: block; font-size: 15.5px; line-height: 1.2; }
.pille small { display: block; font-size: 13px; line-height: 1.3; color: var(--leise); }
.kontakt { width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 26px; background: var(--papier); color: var(--tinte); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7); overflow: auto; overscroll-behavior: contain; }
.kontakt::backdrop { background: rgba(20, 16, 13, .58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kontakt[open] { animation: dialog-auf .4s var(--weich); }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.kontakt__rahmen { padding: 26px 28px 24px; }
.kontakt__kopf { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.kontakt__bild { position: relative; flex: none; }
.kontakt__bild img { width: 56px; height: 56px; border-radius: 50%; }
.kontakt__bild .status-punkt { right: 0; bottom: 1px; width: 14px; height: 14px; }
.kontakt__kopf h2 { font-size: 27px; line-height: 1.1; letter-spacing: -.02em; }
.kontakt__kopf h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.kontakt__kopf p { margin-top: 4px; font-size: 14.5px; color: var(--leise); }
.ist-erreichbar .kontakt__status { color: #1f7a45; font-weight: 600; }
.kontakt__zu { flex: none; display: grid; place-items: center; align-self: flex-start; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: var(--creme); color: var(--tinte); cursor: pointer; transition: background .2s; }
.kontakt__zu:hover { background: var(--sand); }
.kontakt__zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kontakt__gruppe { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--tinte); }
.kontakt__gruppe::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.kontakt__analysen { display: grid; gap: 8px; }
.kontakt__analyse { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: var(--creme); text-decoration: none; transition: background .2s, transform .25s var(--weich); }
.kontakt__analyse:hover { background: var(--sand); transform: translateX(2px); }
.kontakt__analyse .symbol, .kontakt__weg .symbol { color: var(--bernstein-text); }
.kontakt__analyse b { display: block; font-size: 16.5px; line-height: 1.25; }
.kontakt__analyse small { display: block; font-size: 14px; line-height: 1.35; color: var(--leise); }
.kontakt__wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kontakt__weg { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 13px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linie); text-decoration: none; transition: box-shadow .2s, background .2s; }
.kontakt__weg:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.kontakt__weg b { display: block; font-size: 15.5px; line-height: 1.25; }
.kontakt__weg small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--leise); }
.kontakt__fuss { margin-top: 18px; font-size: 14px; color: var(--leise); }
html.dialog-offen { overflow: hidden; }
@media (max-width: 760px) {
  .fuss { padding-bottom: 100px; }
  .kontakt { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .kontakt[open] { animation-name: dialog-unten; }
  @keyframes dialog-unten { from { transform: translateY(40px); opacity: 0; } }
  .kontakt__rahmen { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  .kontakt__kopf h2 { font-size: 22px; }
  .kontakt__wege { grid-template-columns: 1fr; }
  .kontakt__weg { flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; }
  .kontakt__analyse { padding: 12px 16px; }
}
.nw { white-space: nowrap; }
.knopf--dunkel { background: var(--tinte); color: var(--hell); }
.knopf--dunkel:hover { background: #3a3028; transform: translateY(-1px); }
button.textlink { border: 0; padding: 0 0 3px; background-color: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
/* Logo: schwarzes Original auf Elfenbein-Plakette */
.plakette { display: inline-flex; align-items: center; padding: 7px 12px 7px 11px; border-radius: 11px; background: #f3ebdd; box-shadow: 0 0 0 1px rgba(28, 23, 19, .06), 0 10px 24px -14px rgba(0, 0, 0, .7); }
.plakette img { width: auto; height: 38px; }
.kopf__logo, .kopf__logo img { width: auto; }
.kopf.ist-hell .plakette { box-shadow: 0 0 0 1px var(--linie); }
.plakette--fuss { justify-self: start; padding: 10px 16px; border-radius: 14px; }
.plakette--fuss img { height: 52px; }
@media (max-width: 1099px) {
  .kopf__logo, .kopf__logo img { width: auto; }
  .plakette img { height: 32px; }
  .plakette { padding: 6px 10px; }
}
/* ---------- Wegweiser über der Werkhalle (aus F) ---------- */
.wegweiser { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 11vw, 160px); background: var(--espresso); color: var(--hell); }
.wegweiser__bild, .wegweiser__bild img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.wegweiser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 16, 13, .9) 0%, rgba(20, 16, 13, .55) 36%, rgba(20, 16, 13, .25) 55%, rgba(20, 16, 13, .7) 74%, rgba(20, 16, 13, .9) 100%), linear-gradient(0deg, rgba(20, 16, 13, .6), rgba(20, 16, 13, 0) 40%); }
.wegweiser__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 48px clamp(40px, 10vw, 220px); align-items: center; }
.wegweiser__text h2 { max-width: 11em; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; }
.wegweiser__text h2 em { display: block; margin-top: .08em; font-size: 1.06em; line-height: 1.02; color: var(--bernstein-licht); }
.wegweiser__text p { max-width: 24em; margin-top: 22px; font-size: 19px; color: #e7dccd; }
.lotse { position: relative; min-height: 480px; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px) 72px; border-radius: 28px; background: rgba(24, 19, 15, .76); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 100px -50px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.lotse__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lotse__fortschritt { display: flex; gap: 6px; }
.lotse__fortschritt li { width: 42px; height: 4px; border-radius: 4px; background: rgba(246, 239, 230, .16); transition: background .4s; }
.lotse__fortschritt li.ist-erledigt { background: var(--bernstein); }
.lotse__stand { font-size: 13.5px; color: var(--hell-leise); }
.lotse__frage { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; animation: auftritt .5s var(--weich) both; }
.lotse__frage[hidden] { display: none; }
.lotse__frage legend { padding: 0; font: italic 400 clamp(28px, 2.4vw, 34px)/1.1 var(--serif); letter-spacing: -.005em; }
.lotse__wahl { display: grid; gap: 8px; margin-top: 22px; }
.lotse__wahl button { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 20px; border: 0; border-radius: 14px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); color: var(--hell); font: 600 16.5px/1.25 var(--grotesk); text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s, transform .25s var(--weich); }
.lotse__wahl button::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .4); transition: box-shadow .2s, background .2s; }
.lotse__wahl button:hover, .lotse__wahl button:focus-visible { background: rgba(246, 239, 230, .11); box-shadow: inset 0 0 0 1px rgba(247, 187, 99, .6); transform: translateX(3px); }
.lotse__wahl button:hover::after, .lotse__wahl button.ist-gewaehlt::after { box-shadow: inset 0 0 0 5px var(--bernstein); }
.lotse__ergebnis { margin-top: 26px; animation: auftritt .6s var(--weich) both; outline: none; }
.lotse__ergebnis[hidden] { display: none; }
.lotse__klein { font-size: 14px; font-weight: 600; color: var(--bernstein-licht); }
.lotse__ergebnis h3 { margin-top: 8px; font: italic 400 clamp(34px, 3vw, 42px)/1.04 var(--serif); letter-spacing: -.005em; }
.lotse__ergebnis > p:not([class]) { margin-top: 14px; font-size: 16.5px; color: #e1d5c5; }
.lotse__warum { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(246, 239, 230, .06); font-size: 14.5px; line-height: 1.5; color: var(--hell-leise); }
.lotse__ergebnis .knopf { margin-top: 22px; }
.lotse__person { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--hell-leise); }
.lotse__person img { width: 30px; height: 30px; border-radius: 50%; }
.lotse__zurueck { position: absolute; left: clamp(24px, 2.6vw, 36px); bottom: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--hell-leise); font: 600 14.5px var(--grotesk); cursor: pointer; }
.lotse__zurueck:hover { color: var(--hell); }
.lotse__zurueck[hidden] { display: none; }
.lotse__zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) {
  .wegweiser__raster { grid-template-columns: 1fr; }
  .wegweiser::before { background: linear-gradient(180deg, rgba(20, 16, 13, .8) 0%, rgba(20, 16, 13, .55) 40%, rgba(20, 16, 13, .85) 100%); }
  .lotse { max-width: 560px; }
}
@media (max-width: 760px) {
  .wegweiser { padding-block: 0 72px; }
  .wegweiser::before { display: none; }
  .wegweiser__bild { position: relative; z-index: 0; display: block; height: clamp(250px, 72vw, 310px); }
  .wegweiser__bild img { z-index: 0; object-position: 22% 46%; }
  .wegweiser__bild::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28, 23, 19, .35) 0%, rgba(28, 23, 19, 0) 35%, rgba(28, 23, 19, .55) 72%, var(--espresso) 100%); }
  .wegweiser__raster { position: relative; z-index: 1; gap: 32px; margin-top: -44px; }
  .wegweiser__text h2 { font-size: clamp(31px, 8.6vw, 38px); }
  .wegweiser__text p { margin-top: 16px; font-size: 17px; line-height: 1.55; }
  .lotse { min-height: 0; padding: 22px 18px 18px; border-radius: 22px; background: rgba(36, 30, 25, .9); }
  .lotse__frage { margin-top: 20px; }
  .lotse__frage legend { font-size: 28px; line-height: 1.12; }
  .lotse__wahl { gap: 10px; margin-top: 18px; }
  .lotse__wahl button { min-height: 56px; padding: 12px 16px 12px 18px; }
  .lotse__ergebnis h3 { font-size: 34px; }
  .lotse__ergebnis > p:not([class]) { font-size: 16px; line-height: 1.55; }
  .lotse__warum { font-size: 14.5px; }
  .lotse__zurueck { position: static; min-height: 44px; margin-top: 14px; padding: 0 4px 0 0; font-size: 15px; }
  .lotse__ergebnis .knopf { width: 100%; white-space: normal; text-align: center; min-height: 52px; padding: 10px 18px; line-height: 1.2; }
}
/* ---------- Stimmen (aus F) ---------- */
.stimmen { background: var(--papier); }
.stimmen__kopf { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.stimmen__kopf h2 { max-width: 13em; }
.stimmen__wert { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.stimmen__wert .sterne svg { width: 26px; height: 26px; }
.stimmen__wert .sterne { color: #e0951c; }
.stimmen__wert > span:last-child { font-size: 15px; color: var(--leise); }
.stimmen__wert b { display: block; font: italic 400 38px/1 var(--serif); color: var(--tinte); }
.stimmen__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.stimmen__reihe figure { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: clamp(26px, 3vw, 40px); border-radius: 26px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.stimmen__reihe figure:nth-child(2) { background: var(--espresso); color: var(--hell); box-shadow: none; }
.stimmen__reihe blockquote p { font: italic 400 clamp(23px, 2vw, 28px)/1.24 var(--serif); }
.stimmen__reihe figcaption { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--leise); }
.stimmen__reihe figcaption b { display: block; font-size: 16px; color: var(--tinte); }
.stimmen__reihe figure:nth-child(2) figcaption { color: var(--hell-leise); }
.stimmen__reihe figure:nth-child(2) figcaption b { color: var(--hell); }
.kuerzel { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--bernstein-text); font: italic 400 20px var(--serif); }
.stimmen__reihe figure:nth-child(2) .kuerzel { background: var(--espresso-3); color: var(--bernstein-licht); }
@media (min-width: 901px) {
  .stimmen__reihe figure:nth-child(2).ist-da { transform: translateY(-18px); }
}
@media (max-width: 900px) {
  .stimmen__reihe { grid-template-columns: 1fr; }
}
/* ---------- Bobby (aus G) ---------- */
.gipfel { position: relative; background: var(--espresso); color: var(--hell); padding-bottom: clamp(72px, 9vw, 130px); overflow: hidden; }
.gipfel__kopf { padding-top: clamp(80px, 9vw, 130px); }
.gipfel__kopf h2 { max-width: 11em; }
.gipfel__kopf h2 em { color: var(--bernstein-licht); }
.gipfel__kopf p { max-width: 27em; margin-top: 20px; font-size: 19px; color: #efe5d8; }
.gipfel__beweis { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 64px; margin-top: clamp(-260px, -18vw, -120px); }
.gipfel__zahl { display: flex; flex-direction: column; line-height: 1; }
.gipfel__ueber { font: italic 400 clamp(28px, 3vw, 44px)/1 var(--serif); color: var(--hell-leise); }
.gipfel__gross { font: italic 400 clamp(104px, 17vw, 260px)/.86 var(--serif); letter-spacing: -.03em; white-space: nowrap; background: linear-gradient(180deg, #fff6e6 20%, var(--bernstein-licht) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.gipfel__einheit { margin-top: 18px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--hell); }
.gipfel__button { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; perspective: 900px; }
.gipfel__plakette { --rx: 0deg; --ry: 0deg; position: relative; width: clamp(150px, 15vw, 220px); border-radius: 8px; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg); transition: transform .3s var(--weich); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(247, 187, 99, .25); }
.gipfel__plakette img { width: 100%; }
.gipfel__plakette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%) no-repeat; background-size: 250% 100%; background-position: 120% 0; pointer-events: none; transition: background-position 1.4s var(--weich); }
.gipfel__button:hover .gipfel__plakette::after, .gipfel__button.ist-da .gipfel__plakette::after { background-position: -20% 0; }
.gipfel__button figcaption { font-size: 15px; color: var(--hell-leise); text-align: center; }
.gipfel__button figcaption b { display: block; font: italic 400 26px/1.1 var(--serif); color: var(--hell); }
.gipfel__weg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: 40px 64px; margin-top: clamp(56px, 7vw, 96px); }
.gipfel__stationen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--linie-dunkel); }
.gipfel__stationen li { --i: 0; display: flex; flex-direction: column; gap: 4px; height: calc(96px + var(--i) * 30px); padding: 14px 14px 0; border-top: 2px solid rgba(247, 187, 99, calc(.25 + var(--i) * .18)); border-left: 1px solid var(--linie-dunkel); background: linear-gradient(180deg, rgba(246, 239, 230, calc(.02 + var(--i) * .015)), rgba(246, 239, 230, 0)); }
.gipfel__stationen b { font: italic 400 24px/1.05 var(--serif); color: var(--hell); }
.gipfel__stationen span { font-size: 14px; line-height: 1.35; color: var(--hell-leise); }
.gipfel__aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 6px; }
.gipfel__aktion p { font: italic 400 26px/1.2 var(--serif); }
@media (max-width: 960px) {
  .gipfel__beweis { grid-template-columns: 1fr; margin-top: -120px; }
  .gipfel__button { flex-direction: row; justify-content: flex-start; gap: 22px; }
  .gipfel__button figcaption { text-align: left; }
  .gipfel__weg { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .gipfel__kopf { order: 1; padding-block: 72px 24px; }
  .gipfel__kopf p { font-size: 17px; }
  .gipfel__beweis { margin-top: -36px; }
  .gipfel__gross { font-size: clamp(88px, 27vw, 120px); }
  .gipfel__plakette { width: 112px; }
  .gipfel__stationen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gipfel__stationen li { height: calc(70px + var(--i) * 20px); padding: 10px 6px 0; }
  .gipfel__stationen b { font-size: 17px; }
  .gipfel__stationen span { display: none; }
  .gipfel__aktion p { font-size: 23px; }
}
/* =====================================================================
   Variante „Mischung“: eigene Teile
   ===================================================================== */
/* ---------- Schwebender Kontakt: Pille, mobil mit Schnellwahl ---------- */
.schwebe { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px; }
.schnellwahl { display: none; }
@media (max-width: 760px) {
  .schwebe { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pille { flex: 1; min-width: 0; padding: 6px 16px 6px 6px; }
  .pille__bild img { width: 44px; height: 44px; }
  .pille b { font-size: 15px; }
  .schnellwahl { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bernstein); color: #1a130c; box-shadow: 0 0 0 1px rgba(228, 143, 23, .5), 0 18px 36px -14px rgba(28, 23, 19, .7); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s .05s, transform .35s .05s var(--weich); }
  .schnellwahl .symbol { width: 23px; height: 23px; stroke-width: 1.8; }
  .schwebe.ist-sichtbar .schnellwahl { opacity: 1; transform: none; pointer-events: auto; }
  .fuss { padding-bottom: 104px; }
}
.vertrauen { grid-area: vertrauen; }
/* Analyse-Auswahl mit gleitender Markierung */
.js .start__segmente { position: relative; }
.start__gleiter { display: none; }
.js .start__gleiter { display: block; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--gw, 0); border-radius: 999px; background: var(--hell); transform: translateX(var(--gx, 0)); transition: transform .55s var(--weich), width .55s var(--weich); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
.js .start__segmente label { z-index: 1; }
.js .start__segmente input:checked + span { background: none; color: var(--tinte); }
.start__segmente.ist-gewechselt .start__gleiter { animation: gleiter-hinweis .9s var(--weich); }
@keyframes gleiter-hinweis { 40% { box-shadow: 0 0 0 5px rgba(244, 165, 58, .35), 0 6px 16px -8px rgba(0, 0, 0, .6); } }
/* Niedrige Bildschirme (z. B. 1280 × 720): alles etwas dichter, Vertrauensleiste bleibt im ersten Bild */
@media (min-width: 1100px) and (max-height: 800px) {
  .start__wahl { margin-bottom: 10px; }
  .start__feld, .start__knopf { height: 60px; min-height: 60px; }
  .start__fuss { margin-top: 12px; }
  .vertrauen { margin-top: 22px; padding-top: 16px; }
  .vertrauen__logos > li { min-height: 46px; }
}
@media (max-width: 760px) {
  .start__wahl { margin-bottom: 8px; }
  .start__wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .start__segmente { display: flex; width: 100%; }
  .start__segmente label { flex: 1 1 auto; }
  .start__segmente span { padding: 7px 5px; font-size: 13px; text-align: center; }
  .start__zeile { flex-direction: column; gap: 8px; }
  .start__feld { flex: none; height: 54px; padding: 0 20px 0 18px; }
  .start__knopf { min-height: 50px; }
  .start__fuss { margin-top: 10px; font-size: 13.5px; line-height: 1.4; align-items: flex-start; }
  .start__fuss img { width: 28px; height: 28px; }
  /* Vertrauen mobil: oben Sterne und Jahre, darunter die drei Partner, Unterzeilen mindestens 12 px */
  .vertrauen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; margin-top: 14px; padding-top: 12px; }
  .vertrauen__logos { display: contents; }
  .vertrauen__sterne { flex: none; gap: 10px; padding-right: 0; }
  .vertrauen__sterne > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.1; }
  .sterne { gap: 2px; }
  .sterne svg { width: 17px; height: 17px; }
  .vertrauen__sterne b { font-size: 25px; }
  .vertrauen__jahre { order: -1; margin-left: auto; text-align: right; }
  .vertrauen__sterne { order: -2; }
  .vertrauen__logos > li { flex: 1 1 30%; min-height: 38px; gap: 4px; padding: 0 0 0 12px; }
  .vertrauen__logos > li:first-child { padding-left: 0; border-left: 0; }
  .vertrauen__logos > li.vertrauen__jahre { flex: none; min-height: 0; padding: 0; border: 0; }
  .vertrauen__google { height: 27px; width: auto; margin: 0 0 0 -3px; align-self: flex-start; }
  .vertrauen .ms-ausschnitt, .vertrauen .meta-ausschnitt { --h: 17px; }
  .vertrauen__marke > span:last-child { font-size: 12px; letter-spacing: 0; }
  .vertrauen__jahre b { font-size: 21px; }
  .vertrauen__jahre span { font-size: 12px; line-height: 1.15; white-space: normal; max-width: 8.6em; margin-left: auto; }
}
/* ---------- Befund: was Sie kostenlos bekommen ---------- */
.befund { position: relative; overflow: hidden; background: var(--creme); }
.befund::before { content: ""; position: absolute; right: -10%; top: 6%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0)); pointer-events: none; }
.befund__raster { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.befund__text h2 { max-width: 9em; }
.befund__text h2 em { color: var(--bernstein-text); }
.befund__lead { max-width: 25em; margin-top: 20px; font-size: 19px; color: var(--leise); }
.befund__wert { position: relative; max-width: 25em; margin-top: 26px; padding: 4px 0 4px 22px; }
.befund__wert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bernstein), rgba(244, 165, 58, .25)); }
.befund__wert span { display: block; font-size: 16px; line-height: 1.5; color: var(--leise); }
.befund__wert em { display: block; margin-top: 2px; font: italic 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); letter-spacing: -.005em; color: var(--bernstein-text); }
.befund__arten { display: inline-flex; gap: 2px; margin-top: 32px; padding: 4px; border-radius: 999px; background: var(--sand); box-shadow: inset 0 0 0 1px var(--linie); }
.befund__arten button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--leise); font: 600 15px var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.befund__arten button:hover { color: var(--tinte); }
.befund__arten button[aria-selected="true"] { background: var(--tinte); color: var(--hell); }
.befund__punkte { margin-top: 22px; border-top: 1px solid var(--tinte); counter-reset: p; }
.befund__punkte li { counter-increment: p; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 6px; padding: 13px 10px 13px 0; border-bottom: 1px solid var(--linie); transition: background .3s, padding .3s var(--weich); }
.befund__punkte li::before { content: counter(p, upper-roman); grid-row: span 2; padding-top: 1px; font: italic 400 22px/1.2 var(--serif); color: var(--bernstein-text); }
.befund__punkte b { font-size: 17px; line-height: 1.3; }
.befund__punkte span { font-size: 15px; line-height: 1.45; color: var(--leise); }
.befund__punkte li.ist-hell { padding-left: 12px; background: linear-gradient(90deg, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 80%); }
.befund__punkte.ist-neu li { animation: auftritt .5s var(--weich) both; }
.befund__punkte.ist-neu li:nth-child(2) { animation-delay: .05s; }
.befund__punkte.ist-neu li:nth-child(3) { animation-delay: .1s; }
.befund__punkte.ist-neu li:nth-child(4) { animation-delay: .15s; }
.befund__punkte.ist-neu li:nth-child(5) { animation-delay: .2s; }
.befund__knopf { margin-top: 30px; }
.papier { width: min(100%, 500px); border-radius: 6px; background: #fffdf9; box-shadow: 0 1px 0 rgba(60, 40, 20, .05), 0 50px 90px -46px rgba(60, 40, 20, .6), 0 14px 26px -18px rgba(60, 40, 20, .35); }
.papier--hinten2 { align-self: stretch; background: #f5eee2; transform: rotate(5.5deg) translate(26px, 10px); }
.papier--hinten1 { align-self: stretch; background: #faf5ec; transform: rotate(-4deg) translate(-18px, 6px); }
.papier--vorn { position: relative; padding: 30px 34px 26px; transform: rotate(-1.2deg); color: var(--tinte); }
.papier__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #ece3d6; }
.papier__logo { width: auto; height: 30px; }
.papier__beispiel { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: #7b7064; }
.papier__titel { margin-top: 22px; font: italic 400 clamp(30px, 2.6vw, 36px)/1.04 var(--serif); }
.papier__fuer { margin-top: 4px; font-size: 14px; color: var(--leise); }
.papier__zeilen { margin-top: 16px; }
.papier__zeilen li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-inline: -10px; padding: 11px 10px; border-radius: 10px; border-bottom: 1px dashed #e9dfd1; transition: background .35s; }
.papier__zeilen li:last-child { border-bottom: 0; }
.papier__nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(138, 79, 0, .45); font: italic 400 15px/1 var(--serif); color: var(--bernstein-text); transition: background .35s, color .35s, box-shadow .35s; }
.papier__zeilen b { display: block; font-size: 15px; line-height: 1.3; }
.papier__zeilen small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--leise); }
.ampel { padding: 4px 10px; border-radius: 999px; font: normal 700 12px/1.2 var(--grotesk); white-space: nowrap; }
.ampel--rot { background: #f7e1da; color: #962c13; }
.ampel--gelb { background: #f9ecc9; color: #6f4400; }
.ampel--gruen { background: #dcefe1; color: #1c6537; }
.papier__zeilen li.papier__hebel { grid-template-columns: 30px minmax(0, 1fr); margin-top: 8px; background: #fff4e0; }
.papier__hebel small { color: var(--tinte); font-size: 14px; }
.papier__zeilen li.ist-hell { background: #fdf0d9; }
.papier__zeilen li.ist-hell .papier__nr { background: var(--bernstein); box-shadow: none; color: #1a130c; }
.papier__fuss { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ece3d6; font-size: 13px; color: var(--leise); }
.papier__fuss img { width: 40px; height: 40px; border-radius: 50%; }
.papier__fuss b { display: block; font: italic 400 22px/1 var(--serif); color: var(--tinte); }
/* Prüfung läuft: Zeilen erscheinen nacheinander */
.js .papier__zeilen li { opacity: 0; transform: translateY(6px); }
.js .papier.ist-geprueft .papier__zeilen li { opacity: 1; transform: none; transition: opacity .5s calc(.25s + var(--i, 0) * .22s), transform .6s calc(.25s + var(--i, 0) * .22s) var(--weich), background .35s; }
.js .papier .ampel { display: inline-block; transform: scale(.6); opacity: 0; }
.js .papier.ist-geprueft .ampel { transform: none; opacity: 1; transition: transform .5s calc(.55s + var(--i, 0) * .22s) cubic-bezier(.3, 1.6, .5, 1), opacity .3s calc(.55s + var(--i, 0) * .22s); }
.stempel { position: absolute; bottom: 2%; right: 3%; width: 132px; color: var(--bernstein-text); transform: rotate(14deg); pointer-events: none; }
.stempel svg { display: block; width: 100%; height: auto; overflow: visible; }
.stempel__ring { fill: none; stroke: currentColor; stroke-width: 1.6; }
.stempel__ring--innen { stroke-width: 1; opacity: .5; }
.stempel text { fill: currentColor; }
.stempel__rund { font: 700 11.2px var(--grotesk); letter-spacing: .14em; text-transform: uppercase; }
.stempel__zahl { font: italic 400 44px var(--serif); }
.stempel__klein { font: 700 9.5px var(--grotesk); letter-spacing: .16em; text-transform: uppercase; }
.zusagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--tinte); }
.zusagen li { padding: 22px 22px 0 0; }
.zusagen li + li { padding-left: 22px; border-left: 1px solid var(--linie); }
.zusagen b { display: block; font: italic 400 clamp(25px, 2.1vw, 31px)/1.08 var(--serif); }
.zusagen span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--leise); }
@media (max-width: 1060px) {
  .befund__raster { grid-template-columns: minmax(0, 1fr); }
  .zusagen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .zusagen li:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1060px) {
  .befund__text { display: contents; }
  .befund__raster { gap: 0; }
  .befund__text h2 { order: 1; }
  .befund__lead { order: 2; }
  .befund__wert { order: 2; }
  .befund__arten { order: 3; justify-self: start; }
  #befund-inhalt { order: 5; }
  .befund__knopf { order: 6; justify-self: start; }
}
@media (max-width: 760px) {
  .befund__lead { font-size: 17px; }
  .befund__arten { display: flex; width: 100%; margin-top: 24px; }
  .befund__arten button { flex: 1; padding: 0 6px; font-size: 14px; }
  .befund__knopf { width: 100%; }
  .papier--vorn { padding: 20px 18px 18px; transform: rotate(-.8deg); }
  .papier--hinten2 { transform: rotate(3.5deg) translate(10px, 6px); }
  .papier--hinten1 { transform: rotate(-2.5deg) translate(-8px, 4px); }
  .papier__logo { height: 24px; }
  .papier__beispiel { font-size: 12px; }
  .papier__titel { margin-top: 16px; font-size: 27px; }
  .papier__zeilen li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 9px 8px; margin-inline: -8px; }
  .papier__zeilen li.papier__hebel { grid-template-columns: 26px minmax(0, 1fr); }
  .papier__nr { width: 26px; height: 26px; font-size: 14px; }
  .papier__zeilen b { font-size: 14px; }
  .papier__zeilen small { font-size: 12.5px; }
  .ampel { padding: 3px 8px; font-size: 11px; }
  .stempel { bottom: 4px; right: 6px; width: 92px; }
  .befund__punkte { margin-top: 18px; }
  .zusagen { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .zusagen li, .zusagen li + li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .zusagen b { font-size: 23px; white-space: nowrap; }
  .zusagen span { margin: 0; font-size: 14px; text-align: right; }
}
/* ---------- Warum: großer Umschalter ---------- */
.warum { background: var(--creme); }
.warum__kopf h2 { max-width: 13em; }
.vergleich { margin-top: clamp(32px, 4vw, 48px); }
.vergleich__steuer { display: flex; align-items: center; gap: 22px; }
.vergleich__schalter { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 780px); padding: 7px; border-radius: 999px; background: #ddd2c2; box-shadow: inset 0 0 0 1px #cfc2b0, inset 0 2px 6px rgba(60, 40, 20, .12); }
.vergleich__gleiter { position: absolute; top: 7px; bottom: 7px; left: 7px; width: calc(50% - 7px); border-radius: 999px; background: #5f564d; box-shadow: 0 12px 26px -12px rgba(28, 23, 19, .7); transition: transform .7s var(--weich), background .5s, box-shadow .5s; }
.vergleich[data-seite-aktiv="mit"] .vergleich__gleiter { transform: translateX(100%); background: radial-gradient(120% 140% at 50% 0%, #3b2d20, var(--espresso) 70%); box-shadow: 0 0 0 1.5px var(--bernstein), 0 16px 34px -12px rgba(28, 23, 19, .75), 0 0 40px -4px rgba(244, 165, 58, .55); }
.vergleich__schalter button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: #5f564d; font: inherit; cursor: pointer; transition: color .4s; }
.vergleich__schalter button:hover { color: var(--tinte); }
.vergleich__schalter button span { display: inline-flex; align-items: center; gap: 10px; font: 700 clamp(21px, 2vw, 28px)/1.1 var(--grotesk); letter-spacing: -.015em; }
.vergleich__schalter button small { font-size: 14.5px; font-weight: 600; line-height: 1.2; color: #5f564d; transition: color .4s; }
.vergleich__schalter button[aria-pressed="true"] { color: var(--hell); }
.vergleich__schalter button[aria-pressed="true"] small { color: #efe5d8; }
.vergleich__schalter button[data-seite="mit"] span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .35; transition: background .4s, opacity .4s, box-shadow .4s; }
.vergleich__schalter button[data-seite="mit"][aria-pressed="true"] span::before { background: var(--bernstein); opacity: 1; box-shadow: 0 0 0 4px rgba(244, 165, 58, .22), 0 0 14px rgba(244, 165, 58, .8); }
.vergleich__schalter button[data-seite="mit"][aria-pressed="true"] small { color: var(--bernstein-licht); }
.vergleich__schalter button:focus-visible { outline-offset: -4px; }
/* Hinweis „Umschalten“: erscheint einmal mit Bewegung, verschwindet nach dem ersten Klick */
.vergleich__hinweis { display: flex; align-items: center; gap: 10px; font: italic 400 25px/1 var(--serif); color: var(--bernstein-text); opacity: 0; transform: translateX(14px); transition: opacity .6s var(--weich), transform .6s var(--weich); }
.vergleich__hinweis svg { width: 34px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vergleich.zeigt-hinweis .vergleich__hinweis { opacity: 1; transform: none; }
.vergleich.zeigt-hinweis .vergleich__hinweis svg { animation: hinweis-stups 1.6s var(--weich) .5s 3; }
.vergleich.ist-beruehrt .vergleich__hinweis { opacity: 0; transform: translateX(14px); }
@keyframes hinweis-stups { 0%, 100% { transform: none; } 40% { transform: translateX(-9px); } }
@keyframes hinweis-hoch { 0%, 100% { transform: rotate(90deg); } 40% { transform: rotate(90deg) translateX(-7px); } }
.vergleich.zeigt-hinweis:not(.ist-beruehrt) .vergleich__schalter { animation: schalter-puls 2.4s var(--weich) .3s 2; }
@keyframes schalter-puls { 50% { box-shadow: inset 0 0 0 1px #cfc2b0, inset 0 2px 6px rgba(60, 40, 20, .12), 0 0 0 7px rgba(244, 165, 58, .25); } }
.vergleich__liste { margin-top: 22px; overflow: hidden; border-radius: 28px; box-shadow: 0 50px 90px -60px rgba(60, 40, 20, .6); }
.vergleich__liste > li { display: grid; }
.vergleich__liste > li > div { grid-area: 1 / 1; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.5fr); gap: 6px 32px; align-items: baseline; padding: 30px clamp(24px, 3.4vw, 48px); }
.vergleich__liste > li + li > div { border-top: 1px solid; }
.vergleich__nr { font: italic 400 40px/1 var(--serif); }
.vergleich__liste b { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; letter-spacing: -.01em; }
.vergleich__liste p { grid-column: 3; font-size: 16.5px; line-height: 1.5; }
.vergleich__liste em { grid-column: 3; font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--bernstein-licht); }
.vergleich__liste em::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--bernstein); }
.vergleich__ohne { background: #e6e0d7; color: #4f483f; }
.vergleich__liste > li + li > .vergleich__ohne { border-color: rgba(31, 26, 22, .1); }
.vergleich__ohne .vergleich__nr { color: #7c7268; }
.vergleich__mit { position: relative; z-index: 1; background: var(--espresso); color: var(--hell); clip-path: inset(0 0 0 0); }
.vergleich__liste > li:first-child > .vergleich__mit { background: radial-gradient(90% 260% at 100% 0%, #3a2d21, var(--espresso) 70%); }
.vergleich__liste > li + li > .vergleich__mit { border-color: var(--linie-dunkel); }
.vergleich__mit .vergleich__nr { color: var(--bernstein-licht); }
.vergleich__mit p { color: #e1d5c5; }
.vergleich[data-seite-aktiv="ohne"] .vergleich__mit { clip-path: inset(0 0 0 100%); }
.vergleich.wischt .vergleich__mit { transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1) calc(var(--r, 0) * .09s); }
/* Text: die alte Fassung blendet aus, bevor der Wisch sie erreicht, die neue erst danach ein. So ist immer nur eine Textversion lesbar. */
.vergleich__liste > li > div > * { transition: opacity .45s var(--weich) .1s; }
.vergleich[data-seite-aktiv="ohne"] .vergleich__mit > *, .vergleich[data-seite-aktiv="mit"] .vergleich__ohne > * { opacity: 0; transition: opacity .2s; }
.vergleich.wischt .vergleich__liste > li > div > * { transition: opacity .55s var(--weich) calc(1.05s + var(--r, 0) * .09s); }
.vergleich.wischt[data-seite-aktiv="ohne"] .vergleich__mit > *, .vergleich.wischt[data-seite-aktiv="mit"] .vergleich__ohne > * { transition: opacity .18s; }
.vergleich__liste > li:nth-child(2) { --r: 1; }
.vergleich__liste > li:nth-child(3) { --r: 2; }
.vergleich__liste > li:nth-child(4) { --r: 3; }
.warum__aktion { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 18px; padding: 30px clamp(24px, 3.4vw, 48px); border-radius: 28px; background: radial-gradient(60% 160% at 100% 50%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -56px rgba(60, 40, 20, .7); }
.warum__aktion p { font: 600 clamp(22px, 2.1vw, 30px)/1.15 var(--grotesk); letter-spacing: -.015em; }
.warum__aktion em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.warum__aktion .knopf { flex: none; }
.warum__fuss { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 32px 64px; margin-top: clamp(44px, 5vw, 72px); }
.warum__zitat blockquote p { max-width: 30em; font: italic 400 clamp(24px, 2.3vw, 32px)/1.2 var(--serif); letter-spacing: -.005em; text-indent: -.36em; }
.warum__zitat figcaption { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 15px; color: var(--leise); }
.warum__zitat figcaption img { width: 52px; height: 52px; border-radius: 50%; }
.warum__zitat figcaption b { display: block; font-size: 16.5px; color: var(--tinte); }
@media (max-width: 860px) {
  .vergleich__liste > li > div { grid-template-columns: 46px minmax(0, 1fr); padding: 22px 18px; gap: 6px 12px; }
  .vergleich__liste b, .vergleich__liste p, .vergleich__liste em { grid-column: 2; }
  .vergleich__nr { grid-row: span 3; font-size: 30px; }
  .warum__fuss { grid-template-columns: 1fr; }
  .warum__aktion { flex-direction: column; align-items: flex-start; }
  .vergleich__steuer { flex-direction: column; align-items: stretch; gap: 12px; }
  .vergleich__hinweis { justify-content: center; font-size: 21px; transform: translateY(-6px); }
  .vergleich.ist-beruehrt .vergleich__hinweis { transform: translateY(-6px); }
  .vergleich__hinweis svg { transform: rotate(90deg); }
  .vergleich.zeigt-hinweis .vergleich__hinweis svg { animation-name: hinweis-hoch; }
  .warum__zitat blockquote p { text-indent: 0; }
}
@media (max-width: 560px) {
  .vergleich__schalter { width: 100%; padding: 5px; }
  .vergleich__gleiter { top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); }
  .vergleich__schalter button { min-height: 76px; padding: 6px 8px; }
  .vergleich__schalter button span { gap: 7px; font-size: 21px; }
  .vergleich__schalter button[data-seite="mit"] span::before { width: 8px; height: 8px; }
  .vergleich__schalter button small { font-size: 12.5px; }
  .warum__aktion { padding: 24px 20px; border-radius: 20px; }
  .warum__aktion p { font-size: 22px; }
  .vergleich__liste { border-radius: 20px; }
  .vergleich__liste p { font-size: 15.5px; }
  .warum__aktion .knopf { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
}
/* ---------- Bobby: Zahlen mit Plattformzeichen ---------- */
.plattform { flex: none; fill: currentColor; color: var(--hell); }
.plattform--yt { width: 40px; height: 28px; }
.plattform--sp { width: 34px; height: 34px; }
.gipfel__einheit { display: flex; align-items: center; gap: 14px; }
.gipfel__einheit .plattform--yt { width: 34px; height: 24px; }
.gipfel__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(44px, 5vw, 72px); border-top: 1px solid var(--linie-dunkel); }
.gipfel__zahlen li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 22px; padding: 30px 32px 0 0; }
.gipfel__zahlen li + li { padding-left: 40px; border-left: 1px solid var(--linie-dunkel); }
.gipfel__zahlen .plattform { grid-row: span 2; align-self: center; }
.gipfel__zahlen b { font: italic 400 clamp(46px, 5.2vw, 76px)/1 var(--serif); letter-spacing: -.015em; color: var(--hell); white-space: nowrap; }
.gipfel__zahlen span { font-size: 16.5px; color: var(--hell-leise); }
@media (max-width: 760px) {
  .gipfel__zahlen { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .gipfel__zahlen li, .gipfel__zahlen li + li { padding: 22px 0; border-left: 0; }
  .gipfel__zahlen li + li { border-top: 1px solid var(--linie-dunkel); }
  .gipfel__zahlen b { font-size: 46px; }
  .gipfel__zahlen span { font-size: 15px; }
  .gipfel__einheit { font-size: 17px; }
}
/* ---------- Das Wichtigste in Kürze und Fragen ---------- */
.kurz { background: var(--creme); }
.kurz h2 { max-width: 12em; }
.kurz__band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--linie); }
.kurz__band > div { padding: 22px 28px 24px 0; }
.kurz__band > div + div { padding-left: 28px; border-left: 1px solid var(--linie); }
.kurz__band dt { font: italic 400 25px/1.1 var(--serif); color: var(--bernstein-text); }
.kurz__band dd { margin-top: 8px; font-size: 16.5px; line-height: 1.5; }
.faq { margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 3.6vw, 56px); border-radius: 28px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 40px 80px -50px rgba(60, 40, 20, .35); }
.faq__titel { font: italic 400 clamp(34px, 3.2vw, 46px)/1.05 var(--serif); letter-spacing: 0; padding-bottom: 18px; border-bottom: 1px solid var(--tinte); }
.faq__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq__spalte details:last-child { border-bottom: 0; }
.faq summary { position: relative; display: flex; align-items: baseline; gap: 16px; padding: 21px 44px 21px 0; font-size: 18px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 15px; height: 1.6px; background: var(--tinte); transition: transform .3s var(--weich); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover, .faq details[open] summary { color: var(--bernstein-text); }
.faq__nr { flex: none; width: 28px; font: italic 400 21px/1 var(--serif); color: var(--bernstein-text); }
.faq details p { padding: 0 40px 22px 44px; font-size: 16.5px; color: var(--leise); }
.faq details[open] p { animation: auftritt .45s var(--weich) both; }
@media (max-width: 960px) {
  .kurz__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurz__band > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kurz__band > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .faq__spalten { grid-template-columns: minmax(0, 1fr); }
  .faq__spalte:first-child details:last-child { border-bottom: 1px solid var(--linie); }
}
@media (max-width: 560px) {
  .kurz__band > div { padding: 16px 12px 18px 0; }
  .kurz__band > div + div { padding-left: 14px; }
  .kurz__band > div:nth-child(3) { padding-left: 0; }
  .kurz__band dt { font-size: 22px; }
  .kurz__band dd { font-size: 15px; }
  .faq { padding: 22px 18px 8px; border-radius: 22px; }
  .faq summary { gap: 12px; padding-right: 30px; font-size: 16.5px; }
  .faq__nr { width: 24px; font-size: 19px; }
  .faq details p { padding: 0 0 20px 36px; font-size: 15.5px; }
}
/* ---------- Einblenden und Bewegung ---------- */
@keyframes auftritt { from { opacity: 0; transform: translateY(14px); } }
.bewegt .zeigen { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--weich), transform .9s var(--weich); }
.bewegt .zeigen.ist-da { opacity: 1; transform: none; }
@media (min-width: 901px) {
  .stimmen__reihe figure:nth-child(2).ist-da { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}
.schluss__raster > *, .befund__raster > * { min-width: 0; }
@media (max-width: 380px) {
  .schluss__reiter button { white-space: normal; line-height: 1.15; font-size: 13.5px; }
  .vertrauen__logos > li { padding-left: 8px; }
  .vertrauen__google { height: 25px; }
  .vertrauen__jahre span { white-space: normal; }
  .start__segmente span { font-size: 12.5px; padding-inline: 3px; }
}
@media (min-width: 761px) {
  .fuss { padding-bottom: 112px; }
}
/* ---------- Mobil: Logos gleichmäßig, Stimmen als Wischreihe ---------- */
@media (max-width: 760px) {
  .kunden__raster li { aspect-ratio: auto; height: 78px; padding: 14px 12px; }
  .stimmen__reihe { display: flex; gap: 12px; margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .stimmen__reihe::-webkit-scrollbar { display: none; }
  .stimmen__reihe figure { flex: 0 0 84%; scroll-snap-align: start; gap: 24px; padding: 24px 22px; }
  .stimmen__reihe blockquote p { font-size: 22px; }
  .stimmen__hinweis { display: block; margin-top: 14px; font-size: 13.5px; color: var(--leise); }
}
.stimmen__hinweis { display: none; }
.live { grid-area: live; align-self: center; justify-self: end; width: min(100%, 470px); margin-bottom: 8px; }
.live__glas { position: relative; isolation: isolate; height: 416px; overflow: hidden; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 244, 228, .12) 0%, rgba(255, 244, 228, .045) 44%, rgba(255, 244, 228, .07) 100%); border: 1px solid rgba(246, 239, 230, .17); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 50px 100px -50px rgba(0, 0, 0, .95), 0 0 140px -50px rgba(244, 165, 58, .5); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); }
.live__glas::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 30%), radial-gradient(80% 50% at 85% 0%, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 70%); }
.live__hinweis { margin-top: 12px; padding-right: 6px; text-align: right; font-size: 13px; letter-spacing: .02em; color: #b5a796; }
.bewegt .live { animation: auftritt 1.2s var(--weich) .35s both; }
/* Szenen liegen übereinander, nur die aktive ist sichtbar */
.szene { position: absolute; inset: 22px 24px 24px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.szene.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .7s ease .3s; }
.sz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(246, 239, 230, .1); }
.sz-titel { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--hell); white-space: nowrap; }
.sz-live { width: 8px; height: 8px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .2); }
.bewegt .sz-live { animation: live-puls 2.2s ease-in-out infinite; }
@keyframes live-puls { 50% { box-shadow: 0 0 0 8px rgba(244, 165, 58, 0); } }
.sz-marke { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--bernstein-licht); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .32); }
.sz-marke svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Zähler: zählt beim Auftritt hoch (CSS, ohne Skript) */
@property --zahl { syntax: '<integer>'; inherits: false; initial-value: 0; }
.sz-zahl { display: flex; align-items: center; gap: 10px; }
.sz-zahl small { font-size: 12px; line-height: 1.25; color: #cdbfae; }
.zaehler { --zahl: var(--bis); counter-reset: zahl var(--zahl); font: italic 400 42px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.zaehler::after { content: counter(zahl); }
.ist-aktiv .zaehler { animation: zaehlen 2.6s cubic-bezier(.2, .7, .2, 1) .5s both; }
@keyframes zaehlen { from { --zahl: 0; } }
/* Eingang (Anfragen, Bewerbungen) */
.sz-liste { display: grid; gap: 10px; }
.sz-liste li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.sz-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(244, 165, 58, .13); color: var(--bernstein-licht); }
.sz-ico .symbol { width: 19px; height: 19px; }
.sz-text { min-width: 0; }
.sz-text b { display: block; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--hell); white-space: nowrap; text-overflow: ellipsis; }
.sz-text small { display: block; font-size: 13px; line-height: 1.3; color: #cdbfae; }
.sz-liste time { font-size: 12.5px; color: #b5a796; white-space: nowrap; }
.sz-liste li.sz-neu { background: linear-gradient(90deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .5), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.sz-neu time { font-weight: 600; color: var(--bernstein-licht); }
.ist-aktiv .sz-liste li { animation: eingang .8s var(--weich) both; animation-delay: calc(.45s + var(--i) * .6s); }
@keyframes eingang { from { opacity: 0; transform: translateY(-16px) scale(.97); } }
.sz-saeulen { display: flex; align-items: flex-end; gap: 8px; height: 58px; margin-top: auto; }
.sz-saeulen i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(247, 187, 99, .7), rgba(244, 165, 58, .14)); transform-origin: bottom; }
.sz-saeulen i:last-child { background: linear-gradient(180deg, #f7bb63, #e48f17); box-shadow: 0 0 22px rgba(244, 165, 58, .45); }
.ist-aktiv .sz-saeulen i { animation: saeule .9s var(--weich) both; animation-delay: calc(.3s + var(--i) * .08s); }
@keyframes saeule { from { transform: scaleY(0); } }
/* KI-Suche: Frage, Empfehlung mit „Ihr Unternehmen“ */
.sz-frage { align-self: flex-end; max-width: 84%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: #f3ebdf; color: var(--tinte); font-size: 15.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.sz-antwort { display: flex; gap: 12px; margin-top: 18px; }
.sz-ki { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--bernstein-licht); background: rgba(244, 165, 58, .15); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .38); }
.sz-ki .symbol { width: 19px; height: 19px; }
.sz-blase { position: relative; flex: 1; min-width: 0; padding: 14px 16px; border-radius: 4px 18px 18px 18px; background: rgba(255, 244, 228, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .11); }
.sz-blase p { font-size: 15.5px; line-height: 1.5; color: #efe5d8; }
.sz-blase mark { padding: 1px 7px; border-radius: 7px; font-weight: 700; color: #ffd796; background: rgba(244, 165, 58, .26); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .6), 0 0 22px -4px rgba(244, 165, 58, .6); }
.sz-quellen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sz-quellen li { padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #cdbfae; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.sz-tippt { position: absolute; left: 16px; top: 20px; display: flex; gap: 5px; opacity: 0; }
.sz-tippt i { width: 7px; height: 7px; border-radius: 50%; background: #cdbfae; }
.ist-aktiv .sz-frage { animation: eingang .7s var(--weich) .4s both; }
.ist-aktiv .sz-antwort { animation: auftritt .6s var(--weich) 1.1s both; }
.ist-aktiv .sz-tippt { animation: tippen 1.5s linear 1.1s both; }
.ist-aktiv .sz-tippt i { animation: tipp-punkt .9s ease-in-out infinite; }
.sz-tippt i:nth-child(2) { animation-delay: .15s !important; }
.sz-tippt i:nth-child(3) { animation-delay: .3s !important; }
@keyframes tippen { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tipp-punkt { 50% { transform: translateY(-4px); opacity: .5; } }
.ist-aktiv .sz-blase p, .ist-aktiv .sz-quellen { animation: einblenden .7s ease 2.6s both; }
.ist-aktiv .sz-blase mark { animation: markieren 1.4s var(--weich) 3s both; }
@keyframes einblenden { from { opacity: 0; } }
@keyframes markieren { from { background: rgba(244, 165, 58, 0); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, 0), 0 0 0 0 rgba(244, 165, 58, 0); color: #efe5d8; } }
/* Werbung: Kosten je Anfrage sinken, Streuverlust schrumpft */
.sz-kurve { display: block; width: 100%; height: auto; overflow: visible; }
.sz-kurve__netz { fill: none; stroke: rgba(246, 239, 230, .08); stroke-width: 1; }
.sz-kurve__flaeche { fill: url(#sz-flaeche); }
.sz-kurve__linie { fill: none; stroke: var(--bernstein-licht); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(244, 165, 58, .5)); }
.sz-kurve__punkt { fill: var(--bernstein); stroke: #2a2119; stroke-width: 3; }
.ist-aktiv .sz-kurve__linie { animation: linie 2s var(--weich) .4s both; }
.ist-aktiv .sz-kurve__flaeche { animation: einblenden 1s ease 1.5s both; }
.ist-aktiv .sz-kurve__punkt { animation: punkt-auf .6s var(--weich) 2.1s both; transform-box: fill-box; transform-origin: center; }
@keyframes linie { from { stroke-dashoffset: 1; } }
@keyframes punkt-auf { from { opacity: 0; transform: scale(0); } }
.sz-achse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #b5a796; }
.sz-streu { display: grid; gap: 10px; margin-top: auto; }
.sz-streu__zeile { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; color: #cdbfae; }
.sz-streu__zeile--heute span { font-weight: 600; color: var(--hell); }
.sz-streu__balken { display: flex; height: 14px; overflow: hidden; border-radius: 999px; background: rgba(246, 239, 230, .06); }
.sz-streu__balken i { width: var(--w); }
i.sz-wirkt { background: linear-gradient(90deg, #e48f17, #f7bb63); }
i.sz-verlust { background: repeating-linear-gradient(135deg, rgba(205, 191, 174, .42) 0 4px, rgba(205, 191, 174, .16) 4px 8px); }
.ist-aktiv .sz-streu__zeile--heute .sz-wirkt { animation: wirkt-wachsen 1.6s var(--weich) 1.2s both; }
.ist-aktiv .sz-streu__zeile--heute .sz-verlust { animation: verlust-schrumpfen 1.6s var(--weich) 1.2s both; }
@keyframes wirkt-wachsen { from { width: 54%; } }
@keyframes verlust-schrumpfen { from { width: 46%; } }
.sz-legende { display: flex; gap: 18px; padding-left: 64px; font-size: 12px; color: #b5a796; }
.sz-legende i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
/* Website: Seite baut sich auf, Knopf wird geklickt */
.sz-tempo { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: #cdbfae; white-space: nowrap; }
.sz-tempo b { color: var(--bernstein-licht); }
.sz-tempo__balken { width: 58px; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(246, 239, 230, .1); }
.sz-tempo__balken i { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e48f17, #f7bb63); }
.ist-aktiv .sz-tempo__balken i { animation: tempo 1.1s var(--weich) .5s both; }
@keyframes tempo { from { width: 0; } }
.sz-browser { position: relative; flex: 1; overflow: hidden; border-radius: 16px; background: #f6efe6; box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .85); }
.sz-browser__leiste { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #e6dccd; }
.sz-browser__leiste i { width: 8px; height: 8px; border-radius: 50%; background: #c9bcab; }
.sz-browser__leiste span { display: flex; align-items: center; flex: 1; height: 20px; margin-left: 10px; padding: 0 10px; border-radius: 6px; font-size: 12px; color: #5d5449; background: #fbf8f3; }
.sz-seite { padding: 14px 18px; color: var(--tinte); }
.sz-seite__kopf { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #e0d6c8; }
.sz-seite__logo { width: 62px; height: 14px; border-radius: 4px; background: #2a221b; }
.sz-seite__nav { display: flex; gap: 10px; }
.sz-seite__nav i { width: 30px; height: 6px; border-radius: 3px; background: #cdbfae; }
.sz-seite__inhalt { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 16px; }
.sz-seite__titel { font: 600 21px/1.12 var(--grotesk); letter-spacing: -.02em; color: var(--tinte); }
.sz-seite__zeilen { display: grid; gap: 6px; margin: 12px 0 14px; }
.sz-seite__zeilen i { height: 6px; border-radius: 3px; background: #dbcfbf; }
.sz-seite__zeilen i:last-child { width: 72%; }
.sz-seite__knopf { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: #1a130c; background: var(--bernstein); box-shadow: 0 8px 18px -8px rgba(228, 143, 23, .8); }
.sz-seite__bild { aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 72% 28%, #f7bb63 0 11%, rgba(247, 187, 99, 0) 12%), linear-gradient(180deg, rgba(28, 23, 19, 0) 55%, rgba(28, 23, 19, .5)), linear-gradient(155deg, #4a3826, #1c1713 75%); }
.sz-zeiger { position: absolute; left: 132px; top: 196px; width: 22px; height: 22px; fill: #fbf6ee; stroke: #1a130c; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); opacity: 0; }
.ist-aktiv [style*="--i"] { animation: aufbau .7s var(--weich) both; animation-delay: calc(.4s + var(--i) * .4s); }
.szene--eingang.ist-aktiv [style*="--i"] { animation-name: eingang; animation-delay: calc(.45s + var(--i) * .6s); }
.szene--eingang.ist-aktiv .sz-saeulen i { animation: saeule .9s var(--weich) both; animation-delay: calc(.3s + var(--i) * .08s); }
@keyframes aufbau { from { opacity: 0; transform: translateY(10px); } }
.ist-aktiv .sz-zeiger { animation: zeiger 1.5s var(--weich) 2.2s both; }
.ist-aktiv .sz-seite__knopf { animation: aufbau .7s var(--weich) 1.6s both, klick .5s ease 3.5s; }
@keyframes zeiger { from { opacity: 0; transform: translate(120px, 70px); } 30% { opacity: 1; } to { opacity: 1; } }
@keyframes klick { 50% { transform: scale(.94); box-shadow: 0 0 0 8px rgba(244, 165, 58, .3); } }
/* Tablet: Glasfläche über dem Text */
@media (max-width: 1099px) {
  .live { justify-self: start; width: min(100%, 520px); margin: 0 0 28px; }
}
/* Handy: kompakte Glasfläche als Band oben, nur das Wesentliche jeder Szene */
@media (max-width: 760px) {
  .live { width: 100%; margin: 0 0 6px; }
  .live__glas { height: 166px; border-radius: 20px; }
  .live__hinweis { position: absolute; right: 14px; bottom: 7px; margin: 0; padding: 0; font-size: 12px; line-height: 1.2; color: #a99b89; }
  .sz-nur-gross { display: none; }
  .live { position: relative; }
  .szene { inset: 11px 14px 28px; }
  .sz-kopf { min-height: 0; padding-bottom: 8px; margin-bottom: 9px; }
  .sz-titel { gap: 8px; font-size: 13px; }
  .sz-live { width: 7px; height: 7px; }
  .sz-zahl { gap: 7px; }
  .zaehler { font-size: 24px; }
  .sz-zahl small br { display: none; }
  .sz-marke { padding: 2px 9px; font-size: 12px; }
  .sz-liste { gap: 6px; }
  .sz-liste li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; padding: 6px 10px 6px 7px; border-radius: 11px; }
  .sz-liste li:nth-child(n+3), .sz-text small, .sz-saeulen, .sz-quellen, .sz-kurve, .sz-achse, .sz-seite__zeilen, .sz-seite__kopf { display: none; }
  .sz-ico { width: 26px; height: 26px; border-radius: 8px; }
  .sz-ico .symbol { width: 15px; height: 15px; }
  .sz-text b { font-size: 13.5px; }
  .sz-liste time { font-size: 12px; }
  .sz-frage { max-width: 100%; padding: 5px 11px; border-radius: 13px 13px 3px 13px; font-size: 12.5px; white-space: nowrap; }
  .sz-antwort { gap: 8px; margin-top: 7px; }
  .sz-ki { width: 26px; height: 26px; }
  .sz-ki .symbol { width: 15px; height: 15px; }
  .sz-blase { padding: 6px 10px; border-radius: 3px 13px 13px 13px; }
  .sz-blase p { font-size: 12.5px; line-height: 1.4; }
  .sz-streu { gap: 8px; margin-top: 2px; }
  .sz-streu__zeile { grid-template-columns: 46px minmax(0, 1fr); font-size: 12px; }
  .sz-streu__balken { height: 12px; }
  .sz-legende { padding-left: 58px; }
  .sz-tempo { gap: 7px; font-size: 12px; }
  .sz-tempo__balken { width: 40px; }
  .sz-browser { border-radius: 10px; }
  .sz-browser__leiste { height: 20px; gap: 4px; padding: 0 8px; }
  .sz-browser__leiste i { width: 6px; height: 6px; }
  .sz-browser__leiste span { height: 14px; font-size: 10px; }
  .sz-seite { padding: 7px 10px; }
  .sz-seite__inhalt { grid-template-columns: minmax(0, 1fr) 60px; gap: 10px; margin-top: 0; }
  .sz-seite__titel { font-size: 14px; }
  .sz-seite__knopf { height: 24px; margin-top: 6px; padding: 0 11px; font-size: 12px; }
  .sz-seite__bild { border-radius: 8px; }
  .sz-zeiger { left: 74px; top: 74px; width: 16px; height: 16px; }
}
/* Ergänzungen: Eingabezeile im KI-Fenster, Karten in der Website, höhere Säulen */
.sz-eingabe { display: flex; align-items: center; justify-content: space-between; height: 42px; margin-top: auto; padding: 0 6px 0 16px; border-radius: 999px; font-size: 13.5px; color: #a99b89; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.sz-eingabe i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(246, 239, 230, .14); color: var(--hell); }
.sz-eingabe svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ist-aktiv .sz-eingabe { animation: einblenden .8s ease .3s both; }
.sz-seite__bild { display: block; width: 100%; height: auto; }
.sz-seite__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sz-seite__karten i { height: 34px; border-radius: 8px; background: #ebe2d5; box-shadow: inset 0 0 0 1px #e0d6c8; }
.sz-saeulen { flex: 1; height: auto; min-height: 56px; margin-top: 18px; }
@media (max-width: 760px) {
  .sz-eingabe, .sz-seite__karten { display: none; }
}
/* ---------- Mobil-Feinschliff: Tippflächen mindestens 44 px, Fließtext mindestens 14 px ---------- */
@media (max-width: 760px) {
  .start__segmente span { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .start__fuss { font-size: 14px; }
  .vertrauen__sterne { min-height: 44px; }
  .befund__arten button { min-height: 46px; }
  .textlink, .schluss__tel { position: relative; }
  .textlink::before, .schluss__tel::before { content: ""; position: absolute; inset: -10px -6px; }
  .fuss__spalten nav { gap: 0; }
  .fuss__spalten nav a { display: flex; align-items: center; min-height: 44px; line-height: 1.3; }
  .fuss__spalten p { margin-bottom: 2px; }
  .fuss__direkt { gap: 0; }
  .fuss__direkt a { min-height: 44px; }
  .fuss__orte { gap: 0 20px; }
  .fuss__orte a { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss__unten { gap: 0 22px; }
  .fuss__unten a, .fuss__unten button { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss__unten > span:first-child { flex-basis: 100%; padding-bottom: 6px; }
}
/* ---------- Ergänzungen für den Livegang (16.10.2026) ---------- */
/* Weitere Mega-Panels (Mitarbeiter, KI, Über ARES): zwei Spalten plus Seitenkarte ohne Live-Oberfläche */
@media (min-width: 1100px) {
  .mega__innen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.08fr); }
  .mega__innen--zwei .mega__karte { grid-column: 3; grid-row: 1; }
  .mega__karte--schlicht { justify-content: center; }
}
@media (max-width: 1259px) and (min-width: 1100px) {
  .mega__innen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__innen--zwei .mega__karte { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr) auto; }
}
/* Spamfalle der Formulare: für Menschen unsichtbar */
.honig { position: absolute; left: -9999px; }
/* Cookie-Hinweis mit Bürohund Cookie (Baustein _werkzeug/teile/keks.html), im Espresso-Stil */
.keks { position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border-radius: 24px; background: var(--papier); color: var(--tinte); font-size: 16px; line-height: 1.5; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px var(--linie); animation: keks-rein .5s var(--weich) both; }
.keks[hidden] { display: none; }
@keyframes keks-rein { from { opacity: 0; transform: translateY(24px) rotate(-1deg); } }
.keks__kopf { display: flex; gap: 14px; align-items: center; }
.keks__hund { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.keks__hund { overflow: hidden; width: 68px; height: 68px; box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--bernstein); }
.keks__hund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.4); transform-origin: 50% 28%; }
.keks__hund .symbol { width: 34px; height: 34px; color: var(--bernstein-text); }
.keks__kopf b { display: block; font: italic 400 25px/1.1 var(--serif); }
.keks__kopf p { margin-top: 2px; font-size: 14px; color: var(--leise); }
.keks__text { margin-top: 14px; font-size: 14.5px; color: var(--leise); }
.keks__text a { color: var(--tinte); font-weight: 600; }
.keks__wahl { display: grid; gap: 8px; margin-top: 14px; }
.keks__wahl[hidden] { display: none; }
.keks__wahl label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--creme); font-size: 14.5px; font-weight: 600; }
.keks__wahl small { display: block; font-weight: 400; color: var(--leise); font-size: 12.5px; }
.schalter { position: relative; flex: none; width: 44px; height: 26px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; background: #cfc4b5; cursor: pointer; transition: background .2s; }
.schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.schalter:checked { background: var(--bernstein-tief); }
.schalter:checked::after { transform: translateX(18px); }
.schalter:disabled { opacity: .55; cursor: not-allowed; }
.keks__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.keks__knoepfe button { min-height: 46px; border-radius: 999px; font: 600 15px var(--grotesk); cursor: pointer; transition: background .2s, color .2s; }
.keks__nur { border: 1.5px solid var(--tinte); background: var(--papier); color: var(--tinte); }
.keks__nur:hover { background: var(--creme); }
.keks__alle { border: 1.5px solid var(--tinte); background: var(--tinte); color: var(--hell); }
.keks__alle:hover { background: var(--espresso-3); }
.keks__einst { grid-column: 1 / -1; min-height: 32px !important; border: 0; background: none; color: var(--leise); text-decoration: underline; }
@media (max-width: 560px) {
  .keks { left: 8px; bottom: 8px; width: calc(100vw - 16px); padding: 18px; }
}
/* Startformular: ein gemeinsames Raster, alle drei Zeilen gleich breit (Artur, 16.10.2026) */
.start { width: 100%; max-width: 620px; }
.start__wahl { display: block; margin: 0 0 12px; }
.start__wahl legend { float: none; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 0; font: italic 400 21px/1.2 var(--serif); color: var(--hell); }
.start__wahl legend::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(244, 165, 58, .55), rgba(244, 165, 58, 0)); }
.start__segmente { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.start__segmente span { padding: 10px 8px; text-align: center; }
.start__zeile { width: 100%; }
.start__fuss { width: 100%; white-space: nowrap; }
.start__fuss span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .start__wahl legend { position: static; width: 100%; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 19px; margin-bottom: 10px; }
  .start__segmente span { padding: 10px 4px; font-size: 13.5px; }
  .start__fuss { font-size: 14px; gap: 10px; }
  .start__fuss img { width: 28px; height: 28px; }
}
.start__segmente span .start__lang { display: inline; padding: 0; }
@media (max-width: 760px) {
  .start__segmente span .start__lang { display: none; }
}

/* Bobby-Bühne (aus start.css, gemeinsam für Startseite und Über ARES, 17.10.2026) */
.gipfel__buehne { position: relative; isolation: isolate; min-height: clamp(560px, 58vw, 860px); overflow: hidden; }
.gipfel__buehne picture, .gipfel__buehne picture img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.gipfel__buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 16, 13, .9) 0%, rgba(20, 16, 13, .6) 34%, rgba(20, 16, 13, 0) 62%), linear-gradient(0deg, var(--espresso) 0%, rgba(28, 23, 19, .6) 22%, rgba(28, 23, 19, 0) 48%); }
@media (max-width: 760px) {
  .gipfel__buehne { display: flex; flex-direction: column; min-height: 0; }
  .gipfel__buehne picture { position: relative; display: block; z-index: 0; order: 2; aspect-ratio: 16 / 10; }
  .gipfel__buehne picture img { position: absolute; z-index: 0; }
  .gipfel__buehne::before { z-index: 1; background: linear-gradient(180deg, var(--espresso) 0%, rgba(28, 23, 19, 0) 58%, rgba(28, 23, 19, 0) 70%, var(--espresso) 100%); top: auto; height: calc(100vw * 10 / 16); }
}

/* Unterseiten mobil: Hinweis „Beispiel zur Veranschaulichung“ unter die Glasfläche statt darüber (17.10.2026) */
@media (max-width: 760px) { .einstieg .live__hinweis { position: static; margin-top: 8px; } }

/* hidden gilt immer, auch gegen eigene display-Regeln von Bausteinen (17.10.2026) */
[hidden] { display: none !important; }

/* Befund-Blätter gestapelt (aus start.css, gemeinsam für alle Seiten mit Befund-Block, 17.10.2026) */
.papier-buehne { position: relative; display: grid; place-items: center; padding: 34px 30px 40px; }
.papier-buehne > .papier { grid-area: 1 / 1; }
.bewegt .papier-buehne:not(.ist-da) .stempel { opacity: 0; transform: rotate(14deg) scale(1.5); }
.bewegt .papier-buehne.ist-da .stempel { transition: opacity .25s 1.6s, transform .45s 1.6s cubic-bezier(.3, 1.4, .5, 1); }
@media (max-width: 1060px) {
  .papier-buehne { max-width: 620px; justify-self: center; width: 100%; }
}
@media (max-width: 1060px) {
  .papier-buehne { order: 4; margin-top: 12px; }
}
@media (max-width: 760px) {
  .papier-buehne { margin-top: 8px; padding: 22px 6px 26px; }
}

/* ==========================================================================
   ARES H2-Rahmen, Teil 2: Bausteine der Unterseiten (Etappe 2, 16.10.2026)
   Doku mit HTML-Gerüsten: _werkzeug/bausteine-h2.md. Musterseite: vorschau-r4/r11-bausteine/index.html
   Grundsatz: Espresso-Bühne im Einstieg, Creme- und Papier-Abschnitte im Wechsel mit dunklen Bändern,
   Instrument Serif kursiv als Akzent (<em> in Überschriften), Bernstein nur für Handlungen und Licht.
   ========================================================================== */

/* ---------- Rahmen-Ergänzungen: aktiver Menüpunkt, Brotkrumen, Rückmeldung ---------- */
.menue__punkt.ist-aktuell { position: relative; }
.menue__punkt.ist-aktuell::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--bernstein); transform: translateX(-50%); }
.mega__gruppe a[aria-current="page"] { background: rgba(244, 165, 58, .1); box-shadow: inset 2px 0 0 var(--bernstein); }
.mega__gruppe a[aria-current="page"] b::after { content: " (hier)"; font-weight: 400; font-size: 13px; color: var(--bernstein-text); }
@media (min-width: 1100px) { .mega__gruppe a[aria-current="page"] b::after { color: var(--bernstein-licht); } }
@media (max-width: 1099px) { .menue__punkt.ist-aktuell::after { left: auto; right: 28px; bottom: auto; top: 50%; transform: translateY(-50%); } }

.krumen2 { font-size: 14px; line-height: 1.4; }
.krumen2 ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.krumen2 li { display: inline-flex; align-items: center; color: inherit; opacity: .78; }
.krumen2 li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 10px; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transform: rotate(45deg); opacity: .6; }
.krumen2 a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.krumen2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.krumen2 li[aria-current="page"] { opacity: 1; font-weight: 600; }
.krumen2-leiste { padding: 18px 0 0; background: var(--papier); color: var(--leise); }
@media (max-width: 760px) { .krumen2 a { min-height: 44px; } }

.meldung { position: fixed; z-index: 70; top: calc(var(--kopf-h) + 12px); left: 50%; display: flex; align-items: flex-start; gap: 14px; width: min(640px, calc(100% - 32px)); padding: 18px 16px 18px 22px; border-radius: 20px; background: var(--papier); color: var(--tinte); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--linie), 0 40px 80px -30px rgba(0, 0, 0, .55); animation: auftritt .6s var(--weich) both; }
.meldung::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 5px rgba(47, 158, 91, .18); }
.meldung--fehler::before { background: #c2410c; box-shadow: 0 0 0 5px rgba(194, 65, 12, .16); }
.meldung p { flex: 1; font-size: 16px; line-height: 1.5; }
.meldung b { display: block; font: italic 400 24px/1.15 var(--serif); }
.meldung span { color: var(--leise); }
.meldung a { color: var(--tinte); font-weight: 600; }
.meldung__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--creme); color: var(--tinte); cursor: pointer; }
.meldung__zu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Abschnitte: Hintergründe und Kopfzeile ---------- */
.abschnitt--papier { background: var(--papier); }
.abschnitt--creme { background: var(--creme); }
.abschnitt--dunkel { background: var(--espresso); color: var(--hell); }
.abschnitt--dunkel h2 em, .abschnitt--dunkel h3 em { color: var(--bernstein-licht); }
.abschnitt--eng { padding-block: clamp(64px, 7vw, 104px); }
.abschnitt--dunkel h2 em { color: var(--bernstein-licht); }
/* Kopfzeile eines Abschnitts: Überschrift links, ein Satz rechts unten. Kein Etikett über der Überschrift. */
.titelzeile { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 18px 72px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.titelzeile h2 { max-width: 14em; }
.titelzeile p { max-width: 30em; font-size: 19px; line-height: 1.55; color: var(--leise); }
.abschnitt--dunkel .titelzeile p { color: var(--hell-leise); }
.titelzeile--mitte { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.titelzeile--mitte h2, .titelzeile--mitte p { margin-inline: auto; }
.lead { max-width: 34em; font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.55; color: var(--leise); }
.abschnitt--dunkel .lead { color: var(--hell-leise); }
:where(body.h2) h3 { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.22; }
@media (max-width: 900px) { .titelzeile { grid-template-columns: minmax(0, 1fr); } .titelzeile p { font-size: 17px; } }

/* Zweitknopf im H2-Stil (hell umrandet) und Aliasse für übernommene Seiten */
.knopf--hell { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.knopf--hell:hover { background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); transform: translateY(-1px); }
.knopf--orange { background: var(--bernstein); color: #1a130c; box-shadow: 0 10px 30px -12px rgba(244, 165, 58, .7); }
.knopf--orange:hover { background: var(--bernstein-licht); }
@media (max-width: 560px) { :where(body.h2) .knopf { white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; } }

/* =====================================================================
   1. Einstieg der Unterseiten (dunkle Bühne, H1, Analyse-Formular, Live-Glasfläche, Vertrauensleiste)
   ===================================================================== */
.einstieg { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--kopf-h)); padding: calc(var(--kopf-h) + 34px) 0 30px; color: var(--hell);
  background: radial-gradient(48% 60% at 79% 46%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 72%), radial-gradient(70% 90% at 100% 100%, #1d1712, rgba(29, 23, 18, 0) 70%), #15110e; }
.einstieg__grund { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.einstieg__raster { position: absolute; inset: 0; background-image: linear-gradient(rgba(246, 239, 230, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 239, 230, .055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(46% 58% at 78% 48%, #000 0, rgba(0, 0, 0, .5) 50%, transparent 100%); mask-image: radial-gradient(46% 58% at 78% 48%, #000 0, rgba(0, 0, 0, .5) 50%, transparent 100%); }
.einstieg__kegel { position: absolute; top: -12%; left: 62%; width: 34%; height: 96%; rotate: 9deg; transform-origin: 50% 0; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 226, 182, .16), rgba(255, 214, 160, .05) 50%, rgba(255, 214, 160, 0) 78%); }
.einstieg::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 30%; background: linear-gradient(0deg, rgba(21, 17, 14, .9), rgba(21, 17, 14, 0)); pointer-events: none; }
.einstieg__inhalt { --rahmen: 1320px; display: grid; grid-template-columns: minmax(0, 690px) minmax(0, 1fr); grid-template-areas: "text live" "vertrauen vertrauen"; align-items: center; column-gap: clamp(32px, 4.4vw, 80px); }
.einstieg__text { grid-area: text; min-width: 0; }
.einstieg .krumen2 { margin-bottom: 22px; color: #d9cdbd; }
.einstieg h1 { font-size: inherit; letter-spacing: 0; }
.einstieg__klein { display: flex; align-items: center; gap: 14px; font-size: clamp(17px, 1.35vw, 20px); font-weight: 600; letter-spacing: .005em; color: #e6d9c8; }
.einstieg__klein::before { content: ""; flex: none; width: 34px; height: 1.5px; background: var(--bernstein); }
.einstieg__aussage { display: block; margin-top: 16px; font: 600 clamp(40px, min(4.9vw, 8svh), 72px)/1.02 var(--grotesk); letter-spacing: -.03em; color: var(--hell); text-wrap: balance; }
.einstieg__aussage em { display: block; font: italic 400 1.3em/.92 var(--serif); letter-spacing: -.015em; color: var(--bernstein-licht); text-shadow: 0 0 40px rgba(244, 165, 58, .18); }
.einstieg__aussage em.nachgestellt { display: inline; }
.einstieg__lead { max-width: 31em; margin-top: 20px; font-size: clamp(18px, 1.4vw, 20.5px); line-height: 1.55; color: #ece2d4; }
.einstieg .start { margin-top: 26px; }
.einstieg .live { grid-area: live; justify-self: end; width: min(100%, 470px); }
.einstieg .vertrauen { grid-area: vertrauen; }
/* Ohne Analyse-Formular (Recruiting, KI): zwei Wege und der persönliche Hinweis */
.einstieg__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; }
.einstieg__wege .knopf--hell { color: var(--hell); }
.einstieg__hinweis { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 15.5px; line-height: 1.45; color: #dcd0c0; }
.einstieg__hinweis img { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 239, 230, .25); }
.bewegt .einstieg__text > * { animation: auftritt 1s var(--weich) both; }
.bewegt .einstieg__text > :nth-child(2) { animation-delay: .08s; }
.bewegt .einstieg__text > :nth-child(3) { animation-delay: .16s; }
.bewegt .einstieg__text > :nth-child(4) { animation-delay: .24s; }
.bewegt .einstieg .live { animation: auftritt 1.2s var(--weich) .35s both; }
/* Niedrige Bildschirme: Vertrauensleiste bleibt im ersten Bild */
@media (min-width: 1100px) and (max-height: 800px) {
  .einstieg { padding-top: calc(var(--kopf-h) + 14px); padding-bottom: 22px; }
  .einstieg .krumen2 { margin-bottom: 12px; }
  .einstieg__aussage { margin-top: 10px; }
  .einstieg__lead { margin-top: 14px; }
  .einstieg .start { margin-top: 18px; }
  .einstieg .live__glas { height: 380px; }
}
@media (max-width: 1099px) {
  .einstieg { padding-top: calc(var(--kopf-h) + 18px); background: radial-gradient(70% 40% at 60% 18%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 72%), #15110e; }
  .einstieg__inhalt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "vertrauen" "live"; }
  .einstieg .live { justify-self: start; width: min(100%, 560px); margin: 30px 0 0; }
  .einstieg .vertrauen { margin-top: 26px; }
  .einstieg__raster { -webkit-mask-image: radial-gradient(60% 34% at 40% 20%, #000, transparent); mask-image: radial-gradient(60% 34% at 40% 20%, #000, transparent); }
  .einstieg__kegel { left: 30%; width: 60%; height: 50%; }
}
@media (max-width: 760px) {
  .einstieg { padding: calc(var(--kopf-h) + 6px) 0 26px; }
  .einstieg .krumen2 { margin-bottom: 8px; font-size: 13.5px; }
  .einstieg__klein { font-size: 15px; gap: 10px; }
  .einstieg__klein::before { width: 22px; }
  .einstieg__aussage { margin-top: 10px; font-size: clamp(31px, 8.9vw, 40px); }
  .einstieg__aussage em { font-size: 1.28em; }
  .einstieg__lead { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .einstieg .start { margin-top: 16px; }
  .einstieg .live { width: 100%; margin-top: 18px; position: relative; }
  .einstieg__hinweis { font-size: 14px; }
  .einstieg__wege .knopf { flex: 1 1 100%; }
}

/* Variante ruhig (Ortsseiten, Kontakt, Über ARES): weniger Licht, kleinere Aussage */
.einstieg--ruhig { background: radial-gradient(60% 70% at 85% 30%, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 70%), #17130f; }
.einstieg--ruhig .einstieg__kegel { display: none; }
.einstieg--ruhig .einstieg__aussage { font-size: clamp(36px, min(4.2vw, 7svh), 62px); }

/* Ortsmarke im Einstieg der Ortsseiten: Name groß, Lage als Koordinatenzeile */
.ortsmarke { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font-size: 14.5px; color: var(--hell-leise); }
.ortsmarke b { font: italic 400 22px/1 var(--serif); color: var(--hell); }

/* Variante hell und editorial (Wissensartikel, Rechtstexte): Creme, ohne Glasfläche. Seite bekommt automatisch kopf-hell. */
.einstieg--hell { margin-top: 0; padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); color: var(--tinte); background: radial-gradient(50% 80% at 90% 0%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 70%), var(--creme); }
.einstieg--hell::after, .einstieg--hell .einstieg__grund { display: none; }
.einstieg--hell .einstieg__inhalt { grid-template-columns: minmax(0, 820px); grid-template-areas: "text"; }
.einstieg--hell .krumen2 { color: var(--leise); }
.einstieg--hell .einstieg__klein { color: var(--leise); }
.einstieg--hell .einstieg__aussage { color: var(--tinte); font-size: clamp(38px, 4.6vw, 66px); }
.einstieg--hell .einstieg__aussage em { color: var(--bernstein-text); text-shadow: none; }
.einstieg--hell .einstieg__lead { color: var(--leise); }
.einstieg--hell .einstieg__hinweis { color: var(--leise); }
.einstieg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--leise); }
.einstieg__meta img { width: 40px; height: 40px; border-radius: 50%; }
.einstieg__meta b { color: var(--tinte); }
.einstieg__meta span { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Live-Szenen: zusätzliche Grundform „Rangliste steigt“ ---------- */
.sz-rang { display: grid; gap: 8px; }
.sz-rang__suche { display: flex; align-items: center; gap: 10px; height: 42px; margin-bottom: 6px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; color: var(--tinte); background: #f3ebdf; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.sz-rang__suche .symbol { width: 17px; height: 17px; color: var(--bernstein-text); }
.sz-rang li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 10px; border-radius: 14px; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); font-size: 14.5px; color: #e1d5c5; }
.sz-rang__platz { font: italic 400 22px/1 var(--serif); color: #a99b89; text-align: center; }
.sz-rang li small { font-size: 12.5px; color: #b5a796; }
.sz-rang li.sz-rang__sie { position: relative; z-index: 1; color: var(--hell); font-weight: 700; background: linear-gradient(90deg, rgba(244, 165, 58, .26), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.sz-rang li.sz-rang__sie .sz-rang__platz { color: var(--bernstein-licht); }
.sz-rang li.sz-rang__sie small { color: var(--bernstein-licht); font-weight: 600; }
/* Ihr Eintrag steigt von unten nach oben, die anderen rücken nach unten (Abstand je Zeile 54 px) */
.ist-aktiv .sz-rang__sie { animation: rang-steigt 1.6s cubic-bezier(.6, 0, .2, 1) 1.1s both; }
.ist-aktiv .sz-rang__andere { animation: rang-rutscht 1.6s cubic-bezier(.6, 0, .2, 1) 1.1s both; }
@keyframes rang-steigt { from { transform: translateY(calc(var(--von, 3) * 54px)); } }
@keyframes rang-rutscht { from { transform: translateY(-54px); } }
.sz-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; font-size: 12.5px; color: #b5a796; }
.sz-fuss b { color: var(--bernstein-licht); font-weight: 600; }
@media (max-width: 760px) {
  .sz-rang { gap: 5px; }
  .sz-rang__suche { height: 30px; margin-bottom: 2px; font-size: 12.5px; }
  .sz-rang li { height: 30px; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; border-radius: 10px; font-size: 12.5px; }
  .sz-rang li:nth-child(n+4), .sz-fuss { display: none; }
  .sz-rang__platz { font-size: 16px; }
  @keyframes rang-steigt { from { transform: translateY(calc(var(--von, 3) * 35px)); } }
  @keyframes rang-rutscht { from { transform: translateY(-35px); } }
}

/* =====================================================================
   2. Das Wichtigste in Kürze (eigenes dunkles Band)
   ===================================================================== */
.kuerze { padding-block: clamp(56px, 6vw, 88px); background: var(--creme); color: var(--tinte); }
.kuerze__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; }
.kuerze__kopf h2 { font-size: clamp(30px, 3.2vw, 44px); }
.kuerze__kopf h2 em { color: var(--bernstein-text); }
.kuerze__kopf p { font-size: 15px; color: var(--leise); }
.kuerze__band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--tinte); }
.kuerze__band > div { padding: 22px 28px 4px 0; }
.kuerze__band > div + div { padding-left: 28px; border-left: 1px solid var(--linie); }
.kuerze__band dt { font: italic 400 25px/1.1 var(--serif); color: var(--bernstein-text); }
.kuerze__band dd { margin-top: 8px; font-size: 16.5px; line-height: 1.5; }
.kuerze__antwort { max-width: 46em; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; }
/* Variante dunkel: zwischen zwei hellen Abschnitten, nie direkt nach dem dunklen Einstieg */
.kuerze--dunkel { background: var(--espresso); color: var(--hell); }
.kuerze--dunkel .kuerze__kopf h2 em, .kuerze--dunkel .kuerze__band dt { color: var(--bernstein-licht); }
.kuerze--dunkel .kuerze__kopf p { color: var(--hell-leise); }
.kuerze--dunkel .kuerze__band { border-top-color: var(--bernstein); }
.kuerze--dunkel .kuerze__band > div + div, .kuerze--dunkel .kuerze__band > div:nth-child(n+3) { border-color: var(--linie-dunkel); }
.kuerze--dunkel .kuerze__band dd, .kuerze--dunkel .kuerze__antwort { color: #e9dfd2; }
.kuerze--dunkel .kuerze__antwort { border-top-color: var(--linie-dunkel); }
@media (max-width: 960px) {
  .kuerze__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kuerze__band > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kuerze__band > div:nth-child(n+3) { border-top: 1px solid var(--linie); margin-top: 18px; }
}
@media (max-width: 560px) {
  .kuerze__band { grid-template-columns: minmax(0, 1fr); }
  .kuerze__band > div, .kuerze__band > div + div { padding: 16px 0; border-left: 0; }
  .kuerze__band > div + div { border-top: 1px solid var(--linie); margin-top: 0; }
  .kuerze__band dt { font-size: 22px; }
  .kuerze__band dd { font-size: 15.5px; }
}

/* =====================================================================
   3. Problem aus Kundensicht: Aussage links, Gesprächsnotizen rechts zum Abhaken (Zähler)
   ===================================================================== */
.sorgen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; }
.sorgen__aussage { position: sticky; top: calc(var(--kopf-h) + 32px); }
.sorgen__aussage h2 { max-width: 10em; }
.sorgen__aussage p { max-width: 24em; margin-top: 20px; font-size: 18.5px; line-height: 1.6; color: var(--leise); }
.sorgen__liste { border-top: 1px solid var(--tinte); }
.sorgen__punkt { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; padding: 26px 8px 26px 0; border-bottom: 1px solid var(--linie); cursor: pointer; transition: background .3s, padding .3s var(--weich); }
.sorgen__punkt input { position: absolute; opacity: 0; pointer-events: none; }
.sorgen__haken { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .45); color: transparent; transition: background .3s, box-shadow .3s, color .3s, transform .4s var(--weich); }
.sorgen__haken svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sorgen__zitat { font: italic 400 clamp(23px, 2vw, 29px)/1.22 var(--serif); letter-spacing: -.005em; }
.sorgen__dahinter { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--leise); }
.sorgen__kennen { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--bernstein-text); }
.sorgen__kennen::before { content: "Kenne ich"; }
.sorgen__punkt:hover .sorgen__haken { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.sorgen__punkt:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 4px; }
.sorgen__punkt:has(input:checked) { padding-left: 14px; background: linear-gradient(90deg, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 85%); }
.sorgen__punkt:has(input:checked) .sorgen__haken { background: var(--bernstein); box-shadow: none; color: #1a130c; transform: rotate(-8deg); }
.sorgen__punkt:has(input:checked) .sorgen__kennen::before { content: "Trifft auf Sie zu"; }
.sorgen__ergebnis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 28px; padding: 26px clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -56px rgba(60, 40, 20, .7); }
.sorgen__ergebnis p { flex: 1 1 280px; font-size: 17px; line-height: 1.5; color: #e1d5c5; }
.sorgen__ergebnis b { display: block; font: italic 400 clamp(26px, 2.3vw, 32px)/1.15 var(--serif); color: var(--hell); }
.sorgen__ergebnis [data-zaehlen-aus] { color: var(--bernstein-licht); }
.sorgen__ergebnis [hidden] { display: none; }
@media (max-width: 960px) {
  .sorgen__raster { grid-template-columns: minmax(0, 1fr); }
  .sorgen__aussage { position: static; }
}
@media (max-width: 560px) {
  .sorgen__punkt { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; }
  .sorgen__zitat { font-size: 22px; }
  .sorgen__dahinter { font-size: 15px; }
  .sorgen__ergebnis { padding: 22px 20px; border-radius: 20px; }
  .sorgen__ergebnis .knopf { width: 100%; }
}

/* =====================================================================
   3b. Leistungsumfang als Register (statt Kartenraster): römische Ziffer, Titel, Satz, Stichpunkte
   ===================================================================== */
.umfang { border-top: 1px solid var(--tinte); counter-reset: u; }
.umfang > li { counter-increment: u; display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 40px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--linie); }
.umfang > li::before { content: counter(u, upper-roman); font: italic 400 30px/1 var(--serif); color: var(--bernstein-text); }
.umfang h3 { font-size: clamp(21px, 1.8vw, 26px); }
.umfang p { font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.umfang ul { grid-column: 3; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; font-size: 15px; }
.umfang ul li { position: relative; padding-left: 18px; }
.umfang ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; background: var(--bernstein-tief); transform: rotate(45deg); }
.abschnitt--dunkel .umfang { border-top-color: var(--bernstein); }
.abschnitt--dunkel .umfang > li { border-bottom-color: var(--linie-dunkel); }
.abschnitt--dunkel .umfang > li::before { color: var(--bernstein-licht); }
.abschnitt--dunkel .umfang p { color: var(--hell-leise); }
@media (max-width: 860px) {
  .umfang > li { grid-template-columns: 46px minmax(0, 1fr); gap: 6px 14px; padding: 22px 0; }
  .umfang > li::before { grid-row: span 3; font-size: 24px; }
  .umfang ul { grid-column: 2; }
}

/* =====================================================================
   4. Vorgehen als Schritte: Speerlinie mit Stationen, Klick zeigt den Schritt im Detail
   ===================================================================== */
.vorgehen { position: relative; }
.vorgehen__linie { position: relative; display: grid; grid-template-columns: repeat(var(--anzahl, 4), minmax(0, 1fr)); gap: 0 12px; }
/* Speer: Schaft durch die Stationen, Spitze am Ende */
.vorgehen__linie::before { content: ""; position: absolute; left: 22px; right: 26px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein) 60%, rgba(244, 165, 58, .35)); transform-origin: left; }
.vorgehen__linie::after { content: ""; position: absolute; right: 0; top: 16px; width: 30px; height: 14px; background: var(--bernstein); clip-path: polygon(0 50%, 35% 0, 100% 50%, 35% 100%); }
.bewegt .vorgehen.ist-da .vorgehen__linie::before { animation: speer 1.4s var(--weich) .2s both; }
@keyframes speer { from { transform: scaleX(0); } }
.vorgehen__schritt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 0 8px 18px 0; border: 0; background: none; color: var(--leise); font: inherit; text-align: left; cursor: pointer; }
.vorgehen__nr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief), 0 0 0 6px var(--papier); font: italic 400 21px/1 var(--serif); color: var(--bernstein-text); transition: background .3s, color .3s, transform .4s var(--weich), box-shadow .3s; }
.vorgehen__titel { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--tinte); }
.vorgehen__dauer { font-size: 14px; color: var(--leise); }
.vorgehen__schritt:hover .vorgehen__nr { transform: translateY(-3px); }
.vorgehen__schritt[aria-selected="true"] .vorgehen__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 1.5px var(--bernstein), 0 0 0 6px var(--papier), 0 0 26px rgba(244, 165, 58, .45); transform: scale(1.1); }
.vorgehen__schritt[aria-selected="true"] .vorgehen__titel { color: var(--bernstein-text); }
.vorgehen__schritt:focus-visible { outline: none; }
.vorgehen__schritt:focus-visible .vorgehen__nr { outline: 2px solid var(--bernstein-tief); outline-offset: 4px; }
.abschnitt--creme .vorgehen__nr { background: var(--creme); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief), 0 0 0 6px var(--creme); }
.abschnitt--creme .vorgehen__schritt[aria-selected="true"] .vorgehen__nr { background: var(--espresso); box-shadow: 0 0 0 1.5px var(--bernstein), 0 0 0 6px var(--creme), 0 0 26px rgba(244, 165, 58, .45); }
.vorgehen__feld { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 56px; min-height: 210px; margin-top: 18px; padding: clamp(26px, 3.4vw, 46px); border-radius: 28px; background: var(--espresso); color: var(--hell); box-shadow: 0 50px 90px -60px rgba(60, 40, 20, .75); animation: auftritt .5s var(--weich) both; }
.vorgehen__feld[hidden] { display: none; }
.vorgehen__feld h3 { font: italic 400 clamp(28px, 2.6vw, 38px)/1.08 var(--serif); letter-spacing: -.005em; color: var(--hell); }
.vorgehen__feld p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: #e1d5c5; }
.vorgehen__ergebnis { align-self: center; padding: 22px 24px; border-radius: 18px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.vorgehen__ergebnis b { display: block; font-size: 14px; font-weight: 700; color: var(--bernstein-licht); }
.vorgehen__ergebnis p { margin-top: 6px; font-size: 16px; }
@media (max-width: 860px) {
  .vorgehen__linie { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vorgehen__linie::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--bernstein-tief), var(--bernstein) 60%, rgba(244, 165, 58, .35)); transform-origin: top; }
  .vorgehen__linie::after { display: none; }
  @keyframes speer { from { transform: scaleY(0); } }
  .vorgehen__schritt { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 2px 16px; min-height: 64px; padding: 8px 0; }
  .vorgehen__nr { grid-row: span 2; }
  .vorgehen__feld { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px; padding: 24px 20px; }
}

/* =====================================================================
   5. Werkzeug-Rahmen: Rechner, Checklisten, Selbsttests, Tabellen, Entscheidungshilfen
   (Gestaltung übernommener Bausteine in werkzeug.css)
   ===================================================================== */
.werkzeug { position: relative; padding: clamp(26px, 3.6vw, 52px); border-radius: 30px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.werkzeug::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein) 50%, rgba(244, 165, 58, 0)); }
.werkzeug__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 32px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--tinte); }
.werkzeug__kopf h2, .werkzeug__kopf h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; }
.werkzeug__kopf p { grid-column: 1; max-width: 40em; font-size: 17px; color: var(--leise); }
.werkzeug__art { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); font-size: 13.5px; font-weight: 600; color: var(--bernstein-text); white-space: nowrap; }
.werkzeug__art .symbol { width: 16px; height: 16px; }
.werkzeug__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 14.5px; color: var(--leise); }
.werkzeug--dunkel { background: linear-gradient(165deg, #29211b 0%, #17130f 100%); color: var(--hell); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12), 0 60px 120px -60px rgba(0, 0, 0, .9); }
.werkzeug--dunkel .werkzeug__kopf { border-bottom-color: rgba(244, 165, 58, .5); }
.werkzeug--dunkel .werkzeug__kopf p, .werkzeug--dunkel .werkzeug__fuss { color: var(--hell-leise); }
.werkzeug--dunkel .werkzeug__art { background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .32); color: var(--bernstein-licht); }
.werkzeug--dunkel .werkzeug__fuss { border-top-color: var(--linie-dunkel); }
@media (max-width: 640px) {
  .werkzeug { padding: 22px 18px; border-radius: 22px; }
  .werkzeug__kopf { grid-template-columns: minmax(0, 1fr); }
  .werkzeug__art { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Prüfliste mit Zähler (data-zaehlen): Zeilen zum Abhaken, Stand und Deutung daneben */
.pruefliste { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.pruefliste__punkte { border-top: 1px solid var(--linie); }
.pruefliste__punkte label { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 16px; padding: 16px 6px 16px 0; border-bottom: 1px solid var(--linie); cursor: pointer; transition: background .25s; }
.pruefliste__punkte input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--bernstein-tief); cursor: pointer; }
.pruefliste__punkte b { font-size: 17px; line-height: 1.35; }
.pruefliste__punkte small { grid-column: 2; display: block; font-size: 15px; line-height: 1.5; color: var(--leise); }
.pruefliste__punkte label:has(input:checked) { background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 80%); }
.pruefliste__stand { position: sticky; top: calc(var(--kopf-h) + 24px); padding: 26px; border-radius: 24px; background: var(--espresso); color: var(--hell); }
.pruefliste__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--hell-leise); }
.pruefliste__zahl b { font: italic 400 64px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.pruefliste__balken { height: 6px; margin: 16px 0 18px; border-radius: 6px; background: rgba(246, 239, 230, .12); overflow: hidden; }
.pruefliste__balken i { display: block; height: 100%; width: calc(var(--anteil, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transition: width .6s var(--weich); }
.pruefliste__stand p { font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.pruefliste__stand p b { color: var(--hell); }
.pruefliste__stand [hidden] { display: none; }
.pruefliste__stand .knopf { margin-top: 18px; }
@media (max-width: 900px) { .pruefliste { grid-template-columns: minmax(0, 1fr); } .pruefliste__stand { position: static; } }

/* Gestaltete Tabelle: Kopf mit Linie, erste Spalte fett, mobil als Karten (td mit data-titel) */
.tabelle { overflow-x: auto; border-radius: 24px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabelle caption { padding: 22px 24px 0; text-align: left; font: italic 400 22px/1.2 var(--serif); color: var(--tinte); }
.tabelle th, .tabelle td { padding: 16px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle thead th { padding-top: 22px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--leise); border-bottom: 1.5px solid var(--tinte); }
.tabelle tbody th { font-weight: 700; color: var(--tinte); }
.tabelle td { color: var(--leise); }
.tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background .2s; }
.tabelle tbody tr:hover { background: rgba(244, 165, 58, .06); }
.tabelle .tabelle__ziel { background: linear-gradient(180deg, rgba(244, 165, 58, .14), rgba(244, 165, 58, .06)); color: var(--tinte); font-weight: 600; }
.tabelle thead .tabelle__ziel { color: var(--bernstein-text); }
.tabelle__quelle { margin-top: 10px; font-size: 13.5px; color: var(--leise); }
@media (max-width: 700px) {
  .tabelle--karten { overflow: visible; background: none; box-shadow: none; }
  .tabelle--karten table, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten th, .tabelle--karten td { display: block; }
  .tabelle--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle--karten caption { display: block; padding: 0 0 12px; }
  .tabelle--karten tr { margin-bottom: 12px; padding: 6px 18px 0; overflow: hidden; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
  .tabelle--karten tr > :last-child { border-bottom: 0; }
  .tabelle--karten tbody tr:hover { background: var(--papier); }
  .tabelle--karten tbody th { padding: 14px 0 6px; font-size: 18px; border-bottom: 1px solid var(--linie); }
  .tabelle--karten td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 10px 0; }
  .tabelle--karten td::before { content: attr(data-titel); font-size: 13.5px; font-weight: 700; color: var(--tinte); }
  .tabelle--karten .tabelle__ziel { margin-inline: -18px; padding-inline: 18px; }
}

/* Entscheidungshilfe: Frage mit zwei bis vier Antworten (data-reiter), die Empfehlung erscheint darunter */
.entscheidung__wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.entscheidung__wahl [role="tab"] { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: 600 15.5px var(--grotesk); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.entscheidung__wahl [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.entscheidung__wahl [role="tab"][aria-selected="true"] { background: var(--tinte); color: var(--hell); box-shadow: none; }
.entscheidung__feld { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 22px; margin-top: 18px; padding: 24px 26px; border-radius: 22px; background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); animation: auftritt .45s var(--weich) both; }
.entscheidung__feld[hidden] { display: none; }
.entscheidung__feld > b { grid-row: span 2; font: italic 400 34px/1 var(--serif); color: var(--bernstein-text); }
.entscheidung__feld h3 { font-size: 21px; }
.entscheidung__feld p { grid-column: 2; font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.entscheidung__feld .knopf { grid-column: 2; justify-self: start; margin-top: 10px; }
@media (max-width: 560px) { .entscheidung__wahl [role="tab"] { flex: 1 1 100%; } .entscheidung__feld { grid-template-columns: minmax(0, 1fr); padding: 20px; } .entscheidung__feld > b, .entscheidung__feld p, .entscheidung__feld .knopf { grid-column: 1; grid-row: auto; } }

/* Ablaufgrafik als Kette (Automatisierung, Funnel): Stationen mit Verbindung, die letzte leuchtet */
.kette { display: flex; align-items: stretch; gap: 0; counter-reset: k; }
.kette > li { counter-increment: k; position: relative; flex: 1 1 0; min-width: 0; padding: 22px 26px 22px 22px; border-radius: 20px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.kette > li + li { margin-left: 34px; }
.kette > li + li::before { content: ""; position: absolute; left: -34px; top: 50%; width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--bernstein-tief) 0 6px, transparent 6px 10px); }
.kette > li::after { content: counter(k, upper-roman); position: absolute; right: 18px; top: 16px; font: italic 400 18px/1 var(--serif); color: var(--bernstein-text); }
.kette b { display: block; padding-right: 26px; font-size: 17px; line-height: 1.3; }
.kette span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--leise); }
.kette > li:last-child { background: var(--espresso); color: var(--hell); box-shadow: 0 0 0 1px var(--bernstein), 0 20px 40px -24px rgba(244, 165, 58, .6); }
.kette > li:last-child span { color: var(--hell-leise); }
.kette > li:last-child::after { color: var(--bernstein-licht); }
@media (max-width: 860px) {
  .kette { flex-direction: column; }
  .kette > li + li { margin: 26px 0 0; }
  .kette > li + li::before { left: 32px; top: -26px; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--bernstein-tief) 0 6px, transparent 6px 10px); }
}

/* =====================================================================
   6. Befund-Block (Gestaltung in grund.css, .befund). Stempel ohne Frist für Unterseiten:
   ===================================================================== */
.stempel__text { font: italic 400 25px var(--serif); }
.befund--dunkel { background: var(--espresso); color: var(--hell); }
.befund--dunkel::before { background: radial-gradient(closest-side, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0)); }
.befund--dunkel .befund__text h2 em, .befund--dunkel .befund__wert em { color: var(--bernstein-licht); }
.befund--dunkel .befund__lead, .befund--dunkel .befund__wert span, .befund--dunkel .befund__punkte span { color: var(--hell-leise); }
.befund--dunkel .befund__arten { background: rgba(246, 239, 230, .08); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.befund--dunkel .befund__arten button { color: var(--hell-leise); }
.befund--dunkel .befund__arten button[aria-selected="true"] { background: var(--hell); color: var(--tinte); }
.befund--dunkel .befund__punkte { border-top-color: var(--bernstein); }
.befund--dunkel .befund__punkte li { border-bottom-color: var(--linie-dunkel); }
.befund--dunkel .befund__punkte li::before { color: var(--bernstein-licht); }
.befund--dunkel .stempel { color: var(--bernstein-licht); }
.befund--dunkel .zusagen { border-top-color: var(--bernstein); }
.befund--dunkel .zusagen li + li { border-left-color: var(--linie-dunkel); }
.befund--dunkel .zusagen span { color: var(--hell-leise); }
.befund--dunkel .knopf--dunkel { background: var(--bernstein); color: #1a130c; }

/* =====================================================================
   7. Vergleich (Gestaltung in grund.css: .warum, .vergleich, .warum__aktion, .warum__zitat)
   8. Belege (grund.css: .kunden__raster, .stimmen__reihe). Hier nur der gemeinsame Abschnitt:
   ===================================================================== */
.belege { background: var(--papier); }
.belege__logos { margin-top: 0; }
.belege .kunden__raster { margin-top: 0; }
.belege__stimmen { margin-top: clamp(64px, 7vw, 104px); }
.belege__fuss { margin-top: 14px; font-size: 14px; color: var(--leise); }

/* =====================================================================
   9. Häufige Fragen als eigener Abschnitt (Gestaltung der Liste in grund.css: .faq)
   ===================================================================== */
.fragen { background: var(--creme); }
.fragen .faq { margin-top: 0; }
.fragen__gruppe { margin: 26px 0 0; padding-bottom: 10px; font: italic 400 24px/1.2 var(--serif); color: var(--bernstein-text); border-bottom: 1px solid var(--linie); }
.faq__spalte > .fragen__gruppe:first-child { margin-top: 18px; }

/* =====================================================================
   10. Empfehlungen zu anderen Leistungen (Zielgruppe zuerst, ganze Zeile ist der Link)
   ===================================================================== */
.empfehlung__liste { border-top: 1px solid var(--tinte); }
.empfehlung__eintrag { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 14px 40px; padding: 28px 18px 28px 0; border-bottom: 1px solid var(--linie); text-decoration: none; transition: background .3s, padding .4s var(--weich); }
.empfehlung__fuer { font: italic 400 clamp(22px, 1.9vw, 27px)/1.2 var(--serif); letter-spacing: -.005em; color: var(--leise); }
.empfehlung__fuer b { font-weight: 400; color: var(--tinte); }
.empfehlung__was { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 16px; align-items: center; }
.empfehlung__was .symbol { grid-row: span 2; width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--bernstein-text); transition: background .3s, color .3s; }
.empfehlung__was b { font-size: 19px; line-height: 1.25; }
.empfehlung__was span { font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.empfehlung__los { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--tinte); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.empfehlung__eintrag:hover, .empfehlung__eintrag:focus-visible { padding-left: 18px; background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 70%); }
.empfehlung__eintrag:hover .symbol, .empfehlung__eintrag:focus-visible .symbol { background: var(--bernstein); color: #1a130c; box-shadow: none; }
.empfehlung__eintrag:hover .empfehlung__los, .empfehlung__eintrag:focus-visible .empfehlung__los { background: var(--tinte); color: var(--hell); box-shadow: none; }
.abschnitt--dunkel .empfehlung__liste { border-top-color: var(--bernstein); }
.abschnitt--dunkel .empfehlung__eintrag { border-bottom-color: var(--linie-dunkel); }
.abschnitt--dunkel .empfehlung__fuer { color: var(--hell-leise); }
.abschnitt--dunkel .empfehlung__fuer b { color: var(--hell); }
.abschnitt--dunkel .empfehlung__was .symbol { background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); color: var(--bernstein-licht); }
.abschnitt--dunkel .empfehlung__was span { color: var(--hell-leise); }
.abschnitt--dunkel .empfehlung__los { box-shadow: inset 0 0 0 1.5px var(--hell); }
.abschnitt--dunkel .empfehlung__eintrag:hover .empfehlung__los { background: var(--bernstein); color: #1a130c; }
@media (max-width: 900px) {
  .empfehlung__eintrag { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .empfehlung__eintrag:hover, .empfehlung__eintrag:focus-visible { padding-left: 0; }
  .empfehlung__los { justify-self: start; }
}

/* =====================================================================
   11. Abschluss (grund.css: .schluss, .weg). Wegweiser im Abschluss-Reiter:
   ===================================================================== */
.weg--lotse { margin-top: 22px; }
.lotse--klein { min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lotse--klein .lotse__frage { margin-top: 18px; }
.lotse--klein .lotse__frage legend { font-size: clamp(25px, 2.1vw, 30px); }
.lotse--klein .lotse__zurueck { position: static; min-height: 44px; margin-top: 12px; }
.lotse--klein .lotse__ergebnis .knopf { white-space: normal; text-align: center; line-height: 1.2; }

/* =====================================================================
   12. Team-Phalanx (Über ARES): Personen als geschlossene Reihe von Schilden auf einer Speerlinie
   ===================================================================== */
.phalanx { position: relative; isolation: isolate; overflow: hidden; background: var(--espresso); color: var(--hell); }
.phalanx__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.phalanx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 23, 19, .92) 0%, rgba(28, 23, 19, .7) 45%, var(--espresso) 100%); }
.phalanx .titelzeile h2 em { color: var(--bernstein-licht); }
.phalanx .titelzeile p { color: var(--hell-leise); }
.phalanx__reihe { --schild: clamp(118px, 12vw, 172px); position: relative; display: flex; justify-content: center; padding-top: 8px; }
.phalanx__reihe::before { content: ""; position: absolute; left: 2%; right: 2%; top: calc(8px + var(--schild) / 2); height: 2px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein) 12%, var(--bernstein) 88%, rgba(244, 165, 58, 0)); }
.phalanx__person { position: relative; flex-shrink: 0; flex: 0 0 calc(var(--schild) * 1.42); display: flex; flex-direction: column; align-items: center; text-align: center; }
.phalanx__person + .phalanx__person { margin-left: calc(var(--schild) * -.16); }
.phalanx__schild { position: relative; z-index: 1; display: grid; place-items: center; width: var(--schild); height: var(--schild); overflow: hidden; border: clamp(5px, .55vw, 8px) solid transparent; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #4b3b2d 0%, #2a211a 58%, #1d1713 100%) padding-box, linear-gradient(150deg, #f1c98b 0%, #9a6a35 32%, #5e3d1c 55%, #c99552 78%, #6b4622 100%) border-box;
  box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .9), 0 0 0 4px var(--espresso); transition: transform .5s var(--weich), box-shadow .5s; }
.phalanx__schild img { width: 100%; height: 100%; object-fit: cover; }
.phalanx__schild .phalanx__helm { width: 46%; height: auto; object-fit: contain; opacity: .9; filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.95); }
.phalanx__person:hover .phalanx__schild, .phalanx__person:focus-within .phalanx__schild { transform: translateY(-8px); box-shadow: 0 36px 50px -24px rgba(0, 0, 0, .95), 0 0 0 4px var(--espresso), 0 0 50px -6px rgba(244, 165, 58, .5); }
.phalanx__person:hover, .phalanx__person:focus-within { z-index: 2; }
.phalanx__name { margin-top: 18px; font: italic 400 clamp(23px, 2vw, 28px)/1.1 var(--serif); color: var(--hell); }
.phalanx__rolle { max-width: 15em; margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--hell-leise); }
.phalanx__person--leiter .phalanx__schild { width: calc(var(--schild) * 1.12); height: calc(var(--schild) * 1.12); margin-top: calc(var(--schild) * -.06); }
/* Freelancer erst nach Zustimmung zeigen: data-freelancer ausgeblendet, sichtbar erst mit data-freigegeben */
.phalanx__person[data-freelancer]:not([data-freigegeben]) { display: none; }
/* Offener Platz in der Reihe („Wir wachsen“) */
.phalanx__person--frei .phalanx__schild { background: var(--espresso); border: 2px dashed rgba(244, 165, 58, .55); box-shadow: 0 0 0 4px var(--espresso); }
.phalanx__person--frei .phalanx__schild span { font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-licht); }
.phalanx__fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: clamp(40px, 5vw, 64px); font-size: 15px; color: var(--hell-leise); }
.phalanx__fuss b { color: var(--hell); }
@media (max-width: 860px) {
  .phalanx__reihe { --schild: 104px; flex-wrap: wrap; row-gap: 26px; }
  .phalanx__reihe::before { display: none; }
  .phalanx__person { flex: 0 0 50%; }
  .phalanx__person + .phalanx__person { margin-left: 0; }
  .phalanx__person--leiter { flex-basis: 100%; order: -1; }
  .phalanx__name { font-size: 22px; }
  .phalanx__rolle { font-size: 14px; }
}

/* =====================================================================
   13a. Orts-Fakten: amtliche Zahlen groß, Quelle klein darunter
   ===================================================================== */
.ortsfakten { display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); border-top: 1px solid var(--tinte); }
.ortsfakten > div { padding: 24px 24px 22px 0; }
.ortsfakten > div + div { padding-left: 24px; border-left: 1px solid var(--linie); }
.ortsfakten dt { font-size: 14.5px; line-height: 1.35; color: var(--leise); }
.ortsfakten dd { margin-top: 6px; font: italic 400 clamp(38px, 3.6vw, 52px)/1 var(--serif); letter-spacing: -.01em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.ortsfakten dd small { display: block; margin-top: 8px; font: 400 14px/1.4 var(--grotesk); letter-spacing: 0; color: var(--leise); }
.ortsfakten__quelle { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); font-size: 13.5px; line-height: 1.5; color: var(--leise); }
.ortsfakten__quelle a { color: inherit; }
.abschnitt--dunkel .ortsfakten { border-top-color: var(--bernstein); }
.abschnitt--dunkel .ortsfakten > div + div { border-left-color: var(--linie-dunkel); }
.abschnitt--dunkel .ortsfakten dt, .abschnitt--dunkel .ortsfakten dd small, .abschnitt--dunkel .ortsfakten__quelle { color: var(--hell-leise); }
.abschnitt--dunkel .ortsfakten dd { color: var(--hell); }
.abschnitt--dunkel .ortsfakten__quelle { border-top-color: var(--linie-dunkel); }
@media (max-width: 900px) {
  .ortsfakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ortsfakten > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ortsfakten > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 420px) {
  .ortsfakten > div { padding: 18px 12px 16px 0; }
  .ortsfakten > div + div { padding-left: 12px; }
  .ortsfakten dd { font-size: 34px; }
}

/* =====================================================================
   13b. Artikel: Inhaltsverzeichnis (mitlaufend), Lesetext, Kästen
   ===================================================================== */
.artikel { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 720px); justify-content: space-between; gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.artikel__inhalt { position: sticky; top: calc(var(--kopf-h) + 28px); }
.artikel__inhalt p { padding-bottom: 12px; font: italic 400 22px/1.2 var(--serif); border-bottom: 1px solid var(--tinte); }
.artikel__inhalt ol { counter-reset: ai; }
.artikel__inhalt li { counter-increment: ai; }
.artikel__inhalt a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 15px; line-height: 1.4; color: var(--leise); text-decoration: none; transition: color .2s; }
.artikel__inhalt a::before { content: counter(ai, upper-roman); font: italic 400 16px/1.3 var(--serif); color: var(--bernstein-text); }
.artikel__inhalt a:hover, .artikel__inhalt a[aria-current] { color: var(--tinte); }
.artikel__inhalt a[aria-current] { font-weight: 600; box-shadow: inset 2px 0 0 var(--bernstein); padding-left: 10px; }
.artikel__text { font-size: 18.5px; line-height: 1.7; color: #2c251f; }
.artikel__text > * + * { margin-top: 1.1em; }
.artikel__text h2 { margin-top: 2.2em; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; scroll-margin-top: calc(var(--kopf-h) + 24px); }
.artikel__text h2:first-child { margin-top: 0; }
.artikel__text h3 { margin-top: 1.8em; font-size: 23px; }
.artikel__text ul, .artikel__text ol { display: grid; gap: .5em; }
.artikel__text ul li { position: relative; padding-left: 24px; }
.artikel__text ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; background: var(--bernstein-tief); transform: rotate(45deg); }
.artikel__text ol { counter-reset: an; }
.artikel__text ol li { counter-increment: an; position: relative; padding-left: 34px; }
.artikel__text ol li::before { content: counter(an) "."; position: absolute; left: 0; font: italic 400 21px/1.5 var(--serif); color: var(--bernstein-text); }
.artikel__text a { color: var(--tinte); font-weight: 600; text-decoration-color: var(--bernstein-tief); text-underline-offset: 4px; }
.artikel__text blockquote { padding-left: 24px; border-left: 2px solid var(--bernstein); font: italic 400 clamp(23px, 2vw, 28px)/1.3 var(--serif); color: var(--tinte); }
.artikel__text .tabelle { margin-block: 1.6em; }
.kasten { padding: 24px 26px; border-radius: 22px; background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); font-size: 17px; line-height: 1.6; }
.kasten > b:first-child, .kasten__titel { display: block; margin-bottom: 6px; font: italic 400 24px/1.2 var(--serif); color: var(--bernstein-text); }
.kasten ul { margin-top: 8px; }
.kasten--dunkel { background: var(--espresso); color: #e9dfd2; box-shadow: inset 3px 0 0 var(--bernstein); }
.kasten--dunkel > b:first-child, .kasten--dunkel .kasten__titel { color: var(--bernstein-licht); }
.kasten--warnung { background: #fbf1ea; box-shadow: inset 3px 0 0 #c2410c; }
.kasten--warnung > b:first-child, .kasten--warnung .kasten__titel { color: #9a3412; }
.artikel__autor { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; align-items: center; margin-top: 2.4em; padding-top: 24px; border-top: 1px solid var(--tinte); font-size: 15.5px; color: var(--leise); }
.artikel__autor img { grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; }
.artikel__autor b { font: italic 400 24px/1.1 var(--serif); color: var(--tinte); }
.quellen { margin-top: 2em; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 14.5px; line-height: 1.55; color: var(--leise); }
.quellen li + li { margin-top: 6px; }
@media (max-width: 960px) {
  .artikel { grid-template-columns: minmax(0, 1fr); }
  .artikel__inhalt { position: static; }
  .artikel__text { font-size: 17px; }
}

/* Reiter-Felder: hidden schlägt eigene display-Regeln (17.10.2026) */
[role="tabpanel"][hidden] { display: none !important; }

/* Sammelkorrekturen aus Etappe 4 (17.10.2026) */
.befund__arten[hidden] { display: none; }
.abschnitt--dunkel .werkzeug:not(.werkzeug--dunkel) { color: var(--tinte); }

/* ==========================================================================
   ARES H2-Rahmen, Teil 3: Übernahme der alten Werkzeuge und Bausteine (Klassen-Mapping, 16.10.2026)
   Zweck: Rechner, Checklisten, Selbsttests, Funnel, Tabellen und Seitenwerkzeuge der alten Seiten
   (teile/seiten.css, teile/zusatz/*.css) laufen im H2-Rahmen unverändert weiter und sehen nach H2 aus.
   1. Alte Farbnamen zeigen auf die H2-Palette (die Zusatz-Dateien der alten Seiten werden in ares.css angehängt).
   2. Allgemeine alte Klassen bekommen hier ihre H2-Gestalt. Neue Seiten nutzen bevorzugt die Bausteine aus bausteine.css.
   ========================================================================== */
:root {
  --grund: var(--creme);
  --text: var(--tinte);
  --orange: var(--bernstein);
  --orange-hell: #fbecd2;
  --orange-text: var(--bernstein-text);
  --nacht: var(--espresso);
  --gruen: #1f7a45;
  --rund: 22px;
  --seite: var(--rand);
  --schatten: 0 1px 0 var(--linie), 0 40px 80px -50px rgba(60, 40, 20, .45);
}

/* Kleine Hilfsklassen der alten Seiten */
.symbol-feld { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--bernstein-text); }
.symbol-feld .symbol { width: 21px; height: 21px; }
.notiz { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--leise); }
.titel-m { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.haken-liste { display: grid; gap: 12px; }
.haken-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.haken-liste .symbol { width: 22px; height: 22px; color: var(--bernstein-tief); }

/* Text neben Kasten (zweispalter, fliesstext, kasten-dunkel) */
.zweispalter { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.fliesstext p { font-size: 18px; line-height: 1.65; color: var(--leise); }
.fliesstext p + p { margin-top: 14px; }
.fliesstext strong { color: var(--tinte); }
.fliesstext h3 { margin: 28px 0 8px; font-size: 22px; }
.kasten-dunkel { padding: 28px 30px; border-radius: 24px; background: var(--espresso); color: var(--hell); box-shadow: inset 3px 0 0 var(--bernstein), 0 40px 80px -56px rgba(60, 40, 20, .7); }
.kasten-dunkel h3 { font: italic 400 26px/1.15 var(--serif); color: var(--bernstein-licht); }
.kasten-dunkel p, .kasten-dunkel li { font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.kasten-dunkel ul { display: grid; gap: 10px; margin-top: 14px; }
.kasten-dunkel li { position: relative; padding-left: 22px; }
.kasten-dunkel li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--bernstein); }
@media (max-width: 960px) { .zweispalter { grid-template-columns: minmax(0, 1fr); } }

/* Rechner: Kosten je Auftrag (data-rechner) */
.rechner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.rechner .lead { margin-top: 14px; }
.rechner__feld { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rechner__ergebnis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; overflow: hidden; border-radius: 22px; background: var(--espresso); color: var(--hell); }
.rechner__ergebnis div { padding: 20px 22px; }
.rechner__ergebnis div + div { border-left: 1px solid var(--linie-dunkel); }
.rechner__ergebnis div:nth-child(2) { background: radial-gradient(120% 140% at 50% 0%, rgba(244, 165, 58, .22), rgba(244, 165, 58, 0) 70%); }
.rechner__ergebnis span { display: block; font-size: 13.5px; color: var(--hell-leise); }
.rechner__ergebnis b { display: block; margin-top: 6px; font: italic 400 clamp(32px, 3vw, 44px)/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.rechner__satz { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.55; }
@media (max-width: 960px) { .rechner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rechner__feld, .rechner__ergebnis { grid-template-columns: minmax(0, 1fr); } .rechner__ergebnis div + div { border-left: 0; border-top: 1px solid var(--linie-dunkel); } }

/* Formularfelder auf hellem Grund (Rechner, Funnel, Kontakt) */
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.feld { display: grid; gap: 7px; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld > span { font-size: 14.5px; font-weight: 600; color: var(--tinte); }
.feld > span small { font-weight: 400; color: var(--leise); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-radius: 14px; background: #fffdf9; box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--tinte); font: 400 17px var(--grotesk); transition: box-shadow .2s; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bernstein-tief), 0 0 0 5px rgba(244, 165, 58, .18); }
@media (max-width: 640px) { .felder { grid-template-columns: minmax(0, 1fr); } }

/* Auswahlkarten (Funnel, Kontakt-Anliegen) */
.auswahl { display: grid; gap: 10px; margin-top: 18px; }
.auswahl--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auswahl__breit { grid-column: 1 / -1; }
.auswahl label { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; align-items: center; min-width: 0; padding: 14px 18px; border-radius: 18px; background: #fffdf9; box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: box-shadow .2s, background .2s, transform .25s var(--weich); }
.auswahl input { position: absolute; opacity: 0; }
.auswahl .symbol-feld { grid-row: span 2; }
.auswahl b { min-width: 0; font-size: 16.5px; line-height: 1.3; }
.auswahl small { min-width: 0; font-size: 14px; line-height: 1.4; color: var(--leise); }
.auswahl label:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.auswahl label:has(input:checked) { background: linear-gradient(90deg, rgba(244, 165, 58, .16), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 2px var(--bernstein-tief); }
.auswahl label:has(input:checked) .symbol-feld { background: var(--bernstein); color: #1a130c; box-shadow: none; }
.auswahl label:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
@media (max-width: 640px) { .auswahl--zwei { grid-template-columns: minmax(0, 1fr); } }

/* Geführter Funnel (Check, Kontakt, Bewerbung) */
.funnel { padding: clamp(24px, 3.4vw, 44px); border-radius: 30px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.funnel__fortschritt { height: 6px; overflow: hidden; border-radius: 6px; background: var(--sand); }
.funnel__fortschritt i { display: block; width: 33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transition: width .5s var(--weich); }
.funnel__zaehler { margin-top: 10px; font-size: 14px; color: var(--leise); }
.funnel__schritt { margin-top: 18px; }
.funnel__schritt h2, .funnel__schritt h3 { font: italic 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); letter-spacing: -.005em; }
.funnel__schritt > p { margin-top: 8px; font-size: 16px; color: var(--leise); }
.funnel__knoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.zurueck { min-height: 44px; border: 0; background: none; color: var(--leise); font: 600 15px var(--grotesk); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.einwilligung { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.einwilligung input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bernstein-tief); }
.funnel__danke { margin-top: 18px; text-align: center; }
.funnel__danke .symbol { width: 56px; height: 56px; margin: 0 auto 12px; color: var(--bernstein-tief); }
.funnel__danke p { margin-top: 8px; color: var(--leise); }
.ehrlich { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--creme); font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.ehrlich .symbol { color: var(--bernstein-text); }

/* Selbsteinschätzung mit Stufen (Skala) */
.skala { display: grid; gap: 14px; margin-top: 18px; }
.skala__zeile { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.skala__zeile:last-child { border-bottom: 0; }
.skala__zeile b { font-size: 16px; }
.skala__stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.skala__stufen label { position: relative; }
.skala__stufen input { position: absolute; opacity: 0; }
.skala__stufen span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 14px; text-align: center; cursor: pointer; transition: background .2s, box-shadow .2s; }
.skala__stufen input:checked + span { background: var(--tinte); color: var(--hell); box-shadow: none; font-weight: 700; }
.skala__stufen input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.skala__legende { margin-top: 8px; font-size: 13.5px; color: var(--leise); }

/* Kanalvergleich (Rangfolge mit Kennzahlen) */
.kanaele { display: grid; gap: 0; border-top: 1px solid var(--tinte); }
.kanal { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.kanal__rang { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); font: italic 400 22px/1 var(--serif); color: var(--bernstein-text); }
.kanal--zuerst .kanal__rang { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 1.5px var(--bernstein), 0 0 22px rgba(244, 165, 58, .4); }
.kanal h3 { font-size: 20px; }
.kanal p { margin-top: 4px; font-size: 15.5px; color: var(--leise); }
.kanal dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kanal dt { font-size: 12.5px; font-weight: 700; color: var(--bernstein-text); }
.kanal dd { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 960px) { .kanal { grid-template-columns: 46px minmax(0, 1fr); } .kanal dl { grid-column: 1 / -1; } }
@media (max-width: 640px) { .kanal dl { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Preislogik statt Preisliste: Weg links, Faktoren rechts */
.preislogik { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px clamp(28px, 4vw, 56px); align-items: start; }
.preislogik__weg { border-top: 1px solid var(--tinte); counter-reset: pl; }
.preislogik__weg li { counter-increment: pl; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 14px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.preislogik__weg li::before { content: counter(pl, upper-roman); grid-row: span 2; font: italic 400 28px/1.1 var(--serif); color: var(--bernstein-text); }
.preislogik__weg b { font-size: 18.5px; }
.preislogik__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.preislogik__faktoren { padding: 28px; border-radius: 24px; background: var(--espresso); color: var(--hell); }
.preislogik__titel { margin-bottom: 14px; font: italic 400 25px/1.15 var(--serif); color: var(--bernstein-licht); }
.preislogik__faktoren ul { display: grid; gap: 14px; }
.preislogik__faktoren li { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
.preislogik__faktoren li b { display: block; font-size: 16.5px; color: var(--hell); }
@media (max-width: 960px) { .preislogik { grid-template-columns: minmax(0, 1fr); } }

/* Ortsdaten (alte Klasse) im Stil der Orts-Fakten */
.ortsdaten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tinte); }
.ortsdaten li { padding: 22px 22px 20px 0; }
.ortsdaten li + li { padding-left: 22px; border-left: 1px solid var(--linie); }
.ortsdaten b { display: block; font: italic 400 clamp(34px, 3.2vw, 46px)/1.05 var(--serif); color: var(--tinte); }
.ortsdaten span { font-size: 14.5px; color: var(--leise); }
.ortsdaten small { display: block; margin-top: 6px; font-size: 13px; color: var(--leise); }
@media (max-width: 900px) { .ortsdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ortsdaten li:nth-child(odd) { padding-left: 0; border-left: 0; } .ortsdaten li:nth-child(n+3) { border-top: 1px solid var(--linie); } }

/* Tabellen der alten Seitenwerkzeuge: Rahmen und Überschrift wie .tabelle */
.ki-anzeigen-tabelle, .orte-tabelle-huelle, .website-relaunch-tabelle { border-radius: 24px; box-shadow: inset 0 0 0 1px var(--linie); }
.ki-anzeigen-tabelle caption, .orte-tabelle caption, .website-relaunch-tabelle caption { font: italic 400 21px/1.2 var(--serif); color: var(--tinte); }
.ki-anzeigen-tabelle thead th, .orte-tabelle thead th, .website-relaunch-tabelle th { border-bottom: 1.5px solid var(--tinte); }

/* Werkzeuge im dunklen Rahmen (.werkzeug--dunkel): helle Beschriftung, Ergebnis als Glas */
.werkzeug--dunkel .feld > span, .werkzeug--dunkel .rechner__satz, .werkzeug--dunkel .auswahl b, .werkzeug--dunkel .skala__zeile b { color: var(--hell); }
.werkzeug--dunkel .feld > span small, .werkzeug--dunkel .notiz, .werkzeug--dunkel .lead { color: var(--hell-leise); }
.werkzeug--dunkel .rechner__ergebnis { background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }

/* ===== Seite Automatisierung: Ablaufgrafiken Auslöser, Schritte, Ergebnis (06.10.2026) ===== */

.automatisierung-fluesse { display: grid; gap: 14px; }
.automatisierung-fluss { padding: 24px; border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.automatisierung-fluss h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1.25; }
.automatisierung-fluss h3 span { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); font-size: 16px; }

/* Kette: waagerecht mit Pfeilen, am Handy senkrecht */
.automatisierung-fluss__kette { display: flex; gap: 26px; margin-top: 18px; }
.automatisierung-fluss__kette li { position: relative; flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--grund); }
.automatisierung-fluss__kette li + li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%238a5200' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.automatisierung-fluss__kette small { font-size: 12px; font-weight: 700; color: var(--leise); letter-spacing: .02em; }
.automatisierung-fluss__kette b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.automatisierung-fluss__ausloeser { background: var(--orange) !important; }
.automatisierung-fluss__ausloeser small { color: var(--text); }
.automatisierung-fluss__ki { background: var(--orange-hell) !important; box-shadow: inset 0 0 0 1.5px var(--orange); }
.automatisierung-fluss__ki small { color: var(--orange-text); }
.automatisierung-fluss__ergebnis { background: #def3e4 !important; box-shadow: inset 0 0 0 1.5px #9fd3ae; }
.automatisierung-fluss__ergebnis small { color: #186b35; }
.automatisierung-fluss__mensch { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--leise); font-size: 15px; }
.automatisierung-fluss__mensch .symbol { width: 20px; height: 20px; color: var(--orange-text); }

@media (max-width: 960px) {
  .automatisierung-fluss__kette { flex-direction: column; gap: 22px; }
  .automatisierung-fluss__kette li + li::before { left: 50%; top: -20px; margin: 0 0 0 -9px; transform: rotate(90deg); }
}

/* Seite Firmenwebsite: Prüfliste und Vergleich Baukasten gegen Agentur (06.10.2026) */
.firmenwebsite-pruefliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: fwp; }
.firmenwebsite-pruefliste li { counter-increment: fwp; display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; align-content: start; padding: 22px 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.firmenwebsite-pruefliste li::before { content: counter(fwp); grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); font-weight: 700; font-size: 18px; }
.firmenwebsite-pruefliste h3 { font-size: 19px; line-height: 1.25; }
.firmenwebsite-pruefliste p { color: var(--leise); font-size: 15.5px; }
.firmenwebsite-pruefliste .firmenwebsite-pruefen { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--grund); color: var(--text); font-size: 14.5px; }

.firmenwebsite-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.firmenwebsite-vergleich article { display: grid; align-content: start; gap: 14px; padding: 26px; border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.firmenwebsite-vergleich .firmenwebsite-vergleich--wir { background: linear-gradient(160deg, #fff 35%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.firmenwebsite-vergleich h3 { font-size: 22px; }
.firmenwebsite-vergleich dl { display: grid; gap: 0; margin: 0; }
.firmenwebsite-vergleich dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.firmenwebsite-vergleich dt { font-size: 13.5px; font-weight: 700; color: var(--orange-text); }
.firmenwebsite-vergleich dd { margin: 0; font-size: 15.5px; }
.firmenwebsite-vergleich__fazit { font-size: 15.5px; color: var(--leise); }
.firmenwebsite-vergleich__fazit b { color: var(--text); }

@media (max-width: 960px) { .firmenwebsite-vergleich { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .firmenwebsite-pruefliste { grid-template-columns: 1fr; }
  .firmenwebsite-pruefliste li { padding: 18px; }
  .firmenwebsite-vergleich article { padding: 20px; }
  .firmenwebsite-vergleich dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== geo-agentur: Selbsttest mit 5 Fragen an ChatGPT (06.10.2026) ===== */
.geo-agentur-test { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: geo; }
.geo-agentur-test > li { counter-increment: geo; display: grid; grid-template-columns: 52px minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.geo-agentur-test > li::before { content: counter(geo); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); font-size: 20px; font-weight: 700; }
.geo-agentur-test__frage b { display: block; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.geo-agentur-test__prompt { position: relative; margin-top: 6px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--grund); font-size: 16.5px; line-height: 1.45; }
.geo-agentur-test dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.geo-agentur-test dt { font-size: 12.5px; font-weight: 700; color: #186b35; }
.geo-agentur-test dl div + div dt { color: #b3261e; }
.geo-agentur-test dd { margin: 2px 0 0; font-size: 14.5px; color: var(--leise); }
@media (max-width: 960px) {
  .geo-agentur-test > li { grid-template-columns: 44px minmax(0, 1fr); }
  .geo-agentur-test dl { grid-column: 2; }
}
@media (max-width: 640px) {
  .geo-agentur-test > li { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .geo-agentur-test dl { grid-column: auto; grid-template-columns: 1fr; }
}

/* Hinweis: neutral testen (Artur, 06.10.2026) */
.geo-agentur-neutral { margin: 0 0 18px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(160deg, #fff 30%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.geo-agentur-neutral__titel { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.geo-agentur-neutral__titel .symbol { width: 22px; height: 22px; color: var(--orange-text); }
.geo-agentur-neutral p { margin-top: 6px; color: var(--leise); font-size: 15.5px; max-width: 62em; }
.geo-agentur-neutral ul { display: grid; gap: 6px; margin-top: 10px; font-size: 15.5px; }
.geo-agentur-neutral li { position: relative; padding-left: 18px; }
.geo-agentur-neutral li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 2px; background: var(--orange); }

/* Seite Google Ads: Selbstcheck "Verbrennt Ihr Konto Geld?" (ohne JavaScript, Zählung per CSS-Zähler) */
.google-ads-check { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; align-items: start; counter-reset: gac; }
.google-ads-check__liste { display: grid; gap: 10px; }
.google-ads-check__liste label { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: background .15s, box-shadow .15s; }
.google-ads-check__liste input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--text); cursor: pointer; }
.google-ads-check__liste input:checked { counter-increment: gac; }
.google-ads-check__liste label:has(input:checked) { background: #fff6f3; box-shadow: inset 0 0 0 2px #e8a08a; }
.google-ads-check__liste b { display: block; font-size: 17px; line-height: 1.3; }
.google-ads-check__liste small { display: block; margin-top: 4px; color: var(--leise); font-size: 15px; line-height: 1.5; }
.google-ads-check__auswertung { position: sticky; top: 96px; display: grid; gap: 14px; padding: 26px; border-radius: 22px; background: linear-gradient(160deg, #fff 30%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.google-ads-check__stand { font-size: 15px; font-weight: 700; color: var(--orange-text); }
.google-ads-check__zahl::before { content: counter(gac); font-size: 44px; font-weight: 300; line-height: 1; color: var(--text); vertical-align: -6px; margin: 0 4px; }
.google-ads-check__deutung { display: grid; gap: 10px; }
.google-ads-check__deutung li { color: var(--leise); font-size: 15px; line-height: 1.5; }
.google-ads-check__deutung b { display: block; color: var(--text); font-size: 15.5px; }
.google-ads-check__auswertung .knopf { justify-self: start; }
.google-ads-check__auswertung .notiz { margin-top: 0; }
@media (max-width: 960px) {
  .google-ads-check { grid-template-columns: 1fr; }
  .google-ads-check__auswertung { position: static; }
}

/* Seite Karriereseiten: Vorher/Nachher eines Bewerbungswegs (06.10.2026) */
.karriereseiten-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.karriereseiten-vergleich__spalte { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.karriereseiten-vergleich__spalte--neu { background: linear-gradient(160deg, #fff 30%, var(--orange-hell)); box-shadow: inset 0 0 0 2px var(--orange); }
.karriereseiten-vergleich__marke { justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.karriereseiten-vergleich__spalte--alt .karriereseiten-vergleich__marke { background: #fde4dd; color: #a3300c; }
.karriereseiten-vergleich__spalte--neu .karriereseiten-vergleich__marke { background: var(--orange); color: var(--text); }
.karriereseiten-vergleich h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }
.karriereseiten-vergleich ol { display: grid; gap: 8px; counter-reset: kv; }
.karriereseiten-vergleich li { counter-increment: kv; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.karriereseiten-vergleich li:last-child { border-bottom: 0; }
.karriereseiten-vergleich li::before { content: counter(kv); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.karriereseiten-vergleich__spalte--alt li::before { background: var(--grund); color: var(--leise); }
.karriereseiten-vergleich__spalte--neu li::before { background: var(--orange); color: var(--text); }
.karriereseiten-vergleich li b { font-size: 16.5px; }
.karriereseiten-vergleich li span { color: var(--leise); font-size: 15px; }
.karriereseiten-vergleich__spalte--alt li b { color: var(--leise); text-decoration: line-through; text-decoration-color: rgba(163, 48, 12, .45); text-decoration-thickness: 2px; }
.karriereseiten-vergleich__fazit { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: var(--grund); font-size: 15.5px; font-weight: 600; }
.karriereseiten-vergleich__spalte--neu .karriereseiten-vergleich__fazit { background: var(--papier); }
@media (max-width: 760px) {
  .karriereseiten-vergleich { grid-template-columns: 1fr; }
}

/* Leistungsseite Anzeigen in KI-Assistenten (ki-anzeigen), 06.10.2026 */

/* Plattformübersicht: wo man heute in KI-Assistenten werben kann */
.ki-anzeigen-stand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); font-size: 14px; color: var(--leise); }
.ki-anzeigen-stand b { color: var(--text); }
.ki-anzeigen-plattformen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ki-anzeigen-plattform { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ki-anzeigen-plattform--offen { box-shadow: inset 0 4px 0 var(--gruen), 0 0 0 1px var(--linie); }
.ki-anzeigen-plattform--teils { box-shadow: inset 0 4px 0 var(--orange), 0 0 0 1px var(--linie); }
.ki-anzeigen-plattform__kopf { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.ki-anzeigen-plattform h3 { font-size: 20px; line-height: 1.2; }
.ki-anzeigen-plattform__anbieter { display: block; margin-top: 2px; font-size: 13.5px; color: var(--leise); font-weight: 400; }
.ki-anzeigen-plattform > p { color: var(--leise); font-size: 15.5px; }
.ki-anzeigen-plattform dl { display: grid; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--linie); }
.ki-anzeigen-plattform dt { font-size: 12.5px; font-weight: 700; color: var(--orange-text); }
.ki-anzeigen-plattform dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; }
.ki-anzeigen-plattform__quelle { font-size: 12.5px; color: var(--leise); }
.ki-anzeigen-ampel--grau { background: var(--grund); color: var(--leise); }
.ki-anzeigen-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14px; color: var(--leise); }
.ki-anzeigen-legende span { display: inline-flex; align-items: center; gap: 8px; }

/* Eignung: passt heute, passt noch nicht */
.ki-anzeigen-eignung { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ki-anzeigen-eignung > div { padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ki-anzeigen-eignung h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.ki-anzeigen-eignung h3 .symbol { color: var(--gruen); }
.ki-anzeigen-eignung__nein h3 .symbol { color: #a3300c; }
.ki-anzeigen-eignung ul { display: grid; gap: 10px; margin-top: 14px; }
.ki-anzeigen-eignung li { position: relative; padding-left: 18px; color: var(--leise); font-size: 15.5px; }
.ki-anzeigen-eignung li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.ki-anzeigen-eignung__nein li::before { background: #d9542b; }
.ki-anzeigen-eignung li b { color: var(--text); }

/* Vergleichstabelle ChatGPT Ads und Google Ads */
.ki-anzeigen-tabelle { overflow-x: auto; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ki-anzeigen-tabelle table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15.5px; }
.ki-anzeigen-tabelle caption { padding: 18px 22px 0; text-align: left; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.ki-anzeigen-tabelle th, .ki-anzeigen-tabelle td { padding: 14px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.ki-anzeigen-tabelle thead th { font-size: 14px; color: var(--leise); }
.ki-anzeigen-tabelle tbody th { width: 26%; font-weight: 600; }
.ki-anzeigen-tabelle td { color: var(--leise); }
.ki-anzeigen-tabelle tr:last-child th, .ki-anzeigen-tabelle tr:last-child td { border-bottom: 0; }

@media (max-width: 1120px) {
  .ki-anzeigen-plattformen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ki-anzeigen-plattformen, .ki-anzeigen-eignung { grid-template-columns: 1fr; }
}

/* ===== Seite KI-Chatbot: Beispiel-Chatfenster und Entscheidungshilfe (06.10.2026) ===== */

/* Merkmale neben dem Chatfenster, Nummern passen zu den Marken im Fenster */
.ki-chatbot-merkmale { display: grid; gap: 12px; margin-top: 22px; counter-reset: km; }
.ki-chatbot-merkmale li { counter-increment: km; display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; }
.ki-chatbot-merkmale li::before { content: counter(km); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); font-size: 14px; font-weight: 700; }
.ki-chatbot-merkmale b { font-size: 17px; }
.ki-chatbot-merkmale span { color: var(--leise); font-size: 15px; }

/* Chatfenster */
.ki-chatbot-fenster { margin: 0; border-radius: 26px; background: var(--papier); box-shadow: var(--schatten), 0 0 0 1px var(--linie); overflow: hidden; }
.ki-chatbot-fenster__kopf { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 16px 18px; background: var(--grund); border-bottom: 1px solid var(--linie); }
.ki-chatbot-fenster__kopf b { display: block; font-size: 15.5px; }
.ki-chatbot-fenster__kopf small { display: block; font-size: 13px; color: var(--leise); }
.ki-chatbot-fenster__kopf .beispiel-hinweis { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0; }
.ki-chatbot-fenster__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--text); }
.ki-chatbot-fenster__avatar .symbol { width: 22px; height: 22px; }
.ki-chatbot-fenster__verlauf { display: grid; gap: 10px; padding: 18px; }
.ki-chatbot-fenster__zeit { justify-self: center; font-size: 12.5px; color: var(--leise); }
.ki-chatbot-blase { position: relative; max-width: 86%; padding: 12px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
.ki-chatbot-blase--bot { justify-self: start; background: var(--grund); border-bottom-left-radius: 6px; }
.ki-chatbot-blase--mensch { justify-self: end; background: var(--text); color: #fff; border-bottom-right-radius: 6px; }
.ki-chatbot-quelle { display: block; margin-top: 6px; font-size: 12.5px; color: var(--orange-text); font-weight: 600; }
.ki-chatbot-marke { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--orange); color: var(--text); font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.ki-chatbot-uebergabe { display: grid; gap: 4px; padding: 14px 15px; border-radius: 16px; background: #def3e4; box-shadow: inset 4px 0 0 var(--gruen); font-size: 14.5px; }
.ki-chatbot-uebergabe b { color: #186b35; }
.ki-chatbot-uebergabe span:last-child { color: var(--leise); }
.ki-chatbot-fenster__fuss { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.ki-chatbot-fenster__fuss span { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 13.5px; font-weight: 600; }

/* Entscheidungshilfe ja oder nein */
.ki-chatbot-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ki-chatbot-wahl__spalte { padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ki-chatbot-wahl__spalte h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; }
.ki-chatbot-wahl__spalte h3::before { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.ki-chatbot-wahl__spalte--ja { box-shadow: inset 4px 0 0 var(--gruen), 0 0 0 1px var(--linie); }
.ki-chatbot-wahl__spalte--ja h3::before { content: "✓"; background: #def3e4; color: #186b35; }
.ki-chatbot-wahl__spalte--nein h3::before { content: "✕"; background: #fde4dd; color: #a3300c; }
.ki-chatbot-wahl ul { display: grid; gap: 10px; margin-top: 16px; }
.ki-chatbot-wahl li { position: relative; padding-left: 18px; color: var(--leise); font-size: 15.5px; }
.ki-chatbot-wahl li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--orange); }

@media (max-width: 760px) {
  .ki-chatbot-wahl { grid-template-columns: 1fr; }
  .ki-chatbot-blase { max-width: 94%; }
}

/* ===== Seite KI-Lösungen: Matrix nach Bereichen und Zeitleiste AI Act (06.10.2026) ===== */

/* Matrix: Wo KI Zeit spart */
.ki-loesungen-matrix__huelle { border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); overflow: hidden; }
.ki-loesungen-matrix { width: 100%; border-collapse: collapse; text-align: left; }
.ki-loesungen-matrix thead th { padding: 16px 20px; background: var(--grund); font-size: 13px; font-weight: 700; color: var(--orange-text); }
.ki-loesungen-matrix tbody th, .ki-loesungen-matrix td { padding: 22px 20px; vertical-align: top; border-top: 1px solid var(--linie); font-size: 15.5px; }
.ki-loesungen-matrix tbody th { width: 17%; }
.ki-loesungen-matrix td:nth-child(2) { width: 46%; }
.ki-loesungen-matrix td:nth-child(3) { color: var(--leise); }
.ki-loesungen-matrix td:last-child { width: 14%; }
.ki-loesungen-matrix__bereich { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.ki-loesungen-matrix__bereich .symbol { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--orange-hell); color: var(--orange-text); }
.ki-loesungen-matrix ul { display: grid; gap: 8px; }
.ki-loesungen-matrix li { position: relative; padding-left: 16px; }
.ki-loesungen-matrix li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--orange); }

@media (max-width: 860px) {
  .ki-loesungen-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ki-loesungen-matrix, .ki-loesungen-matrix tbody, .ki-loesungen-matrix tr, .ki-loesungen-matrix th, .ki-loesungen-matrix td { display: block; width: auto !important; }
  .ki-loesungen-matrix tr { padding: 20px; border-top: 1px solid var(--linie); }
  .ki-loesungen-matrix tr:first-child { border-top: 0; }
  .ki-loesungen-matrix tbody th, .ki-loesungen-matrix td { padding: 0; border-top: 0; }
  .ki-loesungen-matrix td { margin-top: 14px; }
  .ki-loesungen-matrix td::before { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--orange-text); }
  .ki-loesungen-matrix td:nth-child(2)::before { content: "Was KI übernehmen kann"; }
  .ki-loesungen-matrix td:nth-child(3)::before { content: "Was beim Menschen bleibt"; }
  .ki-loesungen-matrix td:nth-child(4)::before { content: "Aufwand zum Start"; }
}

/* Zeitleiste AI Act */
.ki-loesungen-zeit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ki-loesungen-zeit li { display: grid; align-content: start; gap: 6px; padding: 22px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ki-loesungen-zeit time { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--grund); font-size: 13px; font-weight: 700; }
.ki-loesungen-zeit b { margin-top: 4px; font-size: 18px; line-height: 1.25; }
.ki-loesungen-zeit span { color: var(--leise); font-size: 15px; }
.ki-loesungen-zeit__jetzt { box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie) !important; }
.ki-loesungen-zeit__jetzt time { background: var(--orange); }

@media (max-width: 960px) { .ki-loesungen-zeit { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ki-loesungen-zeit { grid-template-columns: 1fr; } }

/* Seite Landingpages: Anatomie und 10-Sekunden-Test (06.10.2026). Zähler nur mit CSS, kein JavaScript. */
.landingpages-anatomie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: lpa; }
.landingpages-anatomie li { counter-increment: lpa; display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; align-content: start; padding: 22px 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.landingpages-anatomie li::before { content: counter(lpa); grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); font-weight: 700; font-size: 18px; }
.landingpages-anatomie h3 { font-size: 19px; line-height: 1.25; }
.landingpages-anatomie p { color: var(--leise); font-size: 15.5px; }
.landingpages-anatomie .landingpages-fehler { font-size: 14.5px; color: #a3300c; }
.landingpages-anatomie .landingpages-fehler b { color: #a3300c; }

.landingpages-test { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 4vw, 48px); border-radius: 30px; background: linear-gradient(150deg, #fff 30%, var(--orange-hell)); box-shadow: 0 0 0 1px var(--linie); }
.landingpages-test .lead { margin-top: 14px; }
.landingpages-test__form { counter-reset: lpt; display: grid; gap: 12px; min-width: 0; }
.landingpages-test__form fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.landingpages-test__form label { display: grid; grid-template-columns: 24px 1fr; gap: 2px 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: box-shadow .15s; }
.landingpages-test__form input { grid-row: span 2; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gruen); }
.landingpages-test__form label:has(input:checked) { counter-increment: lpt; box-shadow: inset 0 0 0 2px var(--gruen); }
.landingpages-test__form label b { font-size: 16.5px; line-height: 1.3; }
.landingpages-test__form label small { color: var(--leise); font-size: 14.5px; }
.landingpages-test__stand { padding: 18px 20px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 2px var(--orange); }
.landingpages-test__stand > p { font-size: 17px; font-weight: 600; }
.landingpages-test__zahl::after { content: counter(lpt) " von 7"; font-size: clamp(24px, 2.4vw, 32px); }
.landingpages-test__stand ul { display: grid; gap: 6px; margin-top: 10px; font-size: 14.5px; color: var(--leise); }
.landingpages-test__stand li b { color: var(--text); }

@media (max-width: 960px) { .landingpages-test { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .landingpages-anatomie { grid-template-columns: 1fr; } .landingpages-anatomie li { padding: 18px; } }

/* ===== local-seo: Checkliste Google-Unternehmensprofil zum Abhaken, nur HTML und CSS (06.10.2026) ===== */
.local-seo-check { display: grid; gap: 16px; counter-reset: local-seo-erledigt; }
.local-seo-check__gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.local-seo-gruppe { margin: 0; padding: 22px 24px; border: 0; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.local-seo-gruppe:first-child { grid-row: span 2; }
.local-seo-gruppe legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.local-seo-gruppe label { clear: both; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linie); cursor: pointer; }
.local-seo-gruppe legend + label { border-top: 0; }
.local-seo-gruppe input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--linie); background: var(--papier) center / 16px no-repeat; cursor: pointer; }
.local-seo-gruppe input:checked { counter-increment: local-seo-erledigt; background-color: var(--gruen); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.local-seo-gruppe input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.local-seo-gruppe span { font-size: 15px; color: var(--leise); }
.local-seo-gruppe b { display: block; font-size: 16.5px; color: var(--text); }
.local-seo-gruppe label:has(input:checked) b { text-decoration: line-through; text-decoration-color: var(--gruen); text-decoration-thickness: 2px; }
.local-seo-check__stand { order: -1; justify-self: start; padding: 10px 18px; border-radius: 999px; background: var(--orange-hell); color: var(--orange-text); font-weight: 700; }
.local-seo-check__stand::after { content: counter(local-seo-erledigt) " von 15 Punkten erledigt"; }
@media (max-width: 960px) {
  .local-seo-check__gruppen { grid-template-columns: 1fr; }
  .local-seo-gruppe:first-child { grid-row: auto; }
}

/* Seite Microsoft Ads: Entscheidungshilfe "Lohnt sich Microsoft Ads für Sie?" */
.microsoft-ads-hilfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 14px; align-items: start; }
.microsoft-ads-hilfe__gruppe { display: grid; gap: 10px; }
.microsoft-ads-hilfe__titel { margin-bottom: 2px; }
.microsoft-ads-hilfe__gruppe ul { display: grid; gap: 10px; }
.microsoft-ads-hilfe__gruppe li { display: grid; gap: 6px; padding: 20px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.microsoft-ads-hilfe__gruppe li b { font-size: 16.5px; line-height: 1.3; }
.microsoft-ads-hilfe__gruppe li span { color: var(--leise); font-size: 15px; line-height: 1.5; }
.microsoft-ads-hilfe__regel { position: sticky; top: 96px; display: grid; gap: 12px; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #fff 30%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.microsoft-ads-hilfe__regel .preislogik__titel { margin-bottom: 0; }
.microsoft-ads-hilfe__regel p { color: var(--leise); font-size: 15px; line-height: 1.5; }
.microsoft-ads-hilfe__regel b { color: var(--text); }
.microsoft-ads-hilfe__regel .knopf { justify-self: start; }
@media (max-width: 1120px) {
  .microsoft-ads-hilfe { grid-template-columns: 1fr 1fr; }
  .microsoft-ads-hilfe__regel { position: static; }
}
@media (max-width: 640px) {
  .microsoft-ads-hilfe { grid-template-columns: 1fr; }
}

/* Ortsseiten und Einsatzgebiet (06.10.2026): Datentabelle und ehrlicher Vergleich */

/* Vergleichstabelle der Orte, scrollt am Handy nur in sich selbst */
.orte-tabelle-huelle { overflow-x: auto; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.orte-tabelle { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15.5px; }
.orte-tabelle caption { padding: 18px 22px 0; text-align: left; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.orte-tabelle th, .orte-tabelle td { padding: 14px 22px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.orte-tabelle th:first-child, .orte-tabelle td:first-child { text-align: left; }
.orte-tabelle thead th { font-size: 13px; font-weight: 700; color: var(--leise); vertical-align: bottom; white-space: normal; }
.orte-tabelle tbody tr:last-child td { border-bottom: 0; }
.orte-tabelle tbody tr:hover { background: var(--grund); }
.orte-tabelle a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.orte-tabelle .orte-tabelle__sitz td { background: var(--orange-hell); }
.orte-tabelle--schmal { min-width: 520px; }
.orte-quelle { margin-top: 12px; font-size: 13.5px; color: var(--leise); max-width: 62em; }

/* Zwei Spalten: wann ARES passt, wann eher nicht */
.orte-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.orte-vergleich > div { padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.orte-vergleich > div:first-child { box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.orte-vergleich h3 { font-size: 20px; }
.orte-vergleich ul { display: grid; gap: 10px; margin-top: 14px; }
.orte-vergleich li { position: relative; padding-left: 22px; color: var(--leise); font-size: 15.5px; }
.orte-vergleich li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--orange); }

@media (max-width: 760px) {
  .orte-vergleich { grid-template-columns: 1fr; }
  .orte-tabelle th, .orte-tabelle td { padding: 12px 14px; }
}

/* Seite Personalmarketing: Selbsttest „Würden Sie sich bei sich bewerben?“ (06.10.2026)
   Zählt angehakte Aussagen ohne JavaScript über einen CSS-Zähler. */
.personalmarketing-test { counter-reset: pmja; display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px 40px; align-items: start; padding: clamp(24px, 4vw, 48px); border-radius: 30px; background: linear-gradient(150deg, #fff 30%, var(--orange-hell)); box-shadow: 0 0 0 1px var(--linie); }
.personalmarketing-test__kopf { grid-column: 1 / -1; }
.personalmarketing-test__kopf .lead { max-width: 40em; margin-top: 14px; }
.personalmarketing-test__liste { display: grid; gap: 8px; }
.personalmarketing-test__liste label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 16px; cursor: pointer; transition: box-shadow .15s, background .15s; }
.personalmarketing-test__liste input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--text); }
.personalmarketing-test__liste label:has(input:checked) { counter-increment: pmja; background: var(--orange-hell); box-shadow: inset 0 0 0 2px var(--orange); }
.personalmarketing-test__liste label:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
.personalmarketing-test__ergebnis { position: sticky; top: 96px; display: grid; gap: 16px; padding: 26px; border-radius: 24px; background: var(--papier); box-shadow: var(--schatten); }
.personalmarketing-test__stand { font-size: 18px; font-weight: 600; }
.personalmarketing-test__zahl { font-size: 44px; font-weight: 700; line-height: 1; color: var(--orange-text); }
.personalmarketing-test__zahl::after { content: counter(pmja); }
.personalmarketing-test__stufen { display: grid; gap: 10px; margin: 0; }
.personalmarketing-test__stufen div { padding: 12px 14px; border-radius: 14px; background: var(--grund); }
.personalmarketing-test__stufen dt { font-size: 13px; font-weight: 700; color: var(--orange-text); }
.personalmarketing-test__stufen dd { margin: 2px 0 0; color: var(--leise); font-size: 14.5px; }
@media (max-width: 960px) {
  .personalmarketing-test { grid-template-columns: minmax(0, 1fr); }
  .personalmarketing-test__ergebnis { position: static; }
}

/* Seite Social Ads: Vergleich Meta Ads und LinkedIn Ads */
.social-ads-vergleich { border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); overflow: hidden; }
.social-ads-vergleich table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.social-ads-vergleich th, .social-ads-vergleich td { padding: 16px 20px; text-align: left; vertical-align: top; font-size: 15.5px; line-height: 1.5; }
.social-ads-vergleich thead th { padding-top: 20px; padding-bottom: 20px; background: var(--grund); font-size: 19px; }
.social-ads-vergleich thead th:first-child { width: 22%; }
.social-ads-vergleich thead small { display: block; font-size: 13.5px; font-weight: 400; color: var(--leise); }
.social-ads-vergleich thead th:nth-child(2) { box-shadow: inset 0 -3px 0 #8fb2f0; }
.social-ads-vergleich thead th:nth-child(3) { box-shadow: inset 0 -3px 0 var(--orange); }
.social-ads-vergleich tbody th { font-size: 14px; font-weight: 700; color: var(--orange-text); }
.social-ads-vergleich tbody td { color: var(--leise); }
.social-ads-vergleich tbody tr + tr { border-top: 1px solid var(--linie); }
.social-ads-faustregel { margin-top: 14px; padding: 22px 26px; border-radius: 20px; background: linear-gradient(160deg, #fff 30%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.social-ads-faustregel p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 62em; }
.social-ads-faustregel b { color: var(--text); }
@media (max-width: 760px) {
  .social-ads-vergleich { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .social-ads-vergleich table, .social-ads-vergleich tbody, .social-ads-vergleich tr, .social-ads-vergleich th, .social-ads-vergleich td { display: block; width: 100%; }
  .social-ads-vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .social-ads-vergleich tbody tr { margin-bottom: 10px; padding: 16px 18px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
  .social-ads-vergleich tbody tr + tr { border-top: 0; }
  .social-ads-vergleich tbody th { padding: 0 0 8px; }
  .social-ads-vergleich tbody td { padding: 6px 0 0; }
  .social-ads-vergleich tbody td:nth-of-type(1)::before { content: "Meta Ads: "; font-weight: 700; color: var(--text); }
  .social-ads-vergleich tbody td:nth-of-type(2)::before { content: "LinkedIn Ads: "; font-weight: 700; color: var(--text); }
}

/* Seite Social Recruiting: Funnel-Anatomie und Kostenblöcke (06.10.2026) */
.social-recruiting-strecke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.social-recruiting-strecke li { position: relative; display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.social-recruiting-strecke li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -13px; top: 34px; width: 12px; height: 12px; border-top: 2.5px solid var(--orange); border-right: 2.5px solid var(--orange); transform: rotate(45deg); }
.social-recruiting-strecke li:last-child { box-shadow: inset 0 0 0 2px var(--orange); }
.social-recruiting-strecke__marke { justify-self: start; padding: 4px 10px; border-radius: 8px; background: var(--orange-hell); color: var(--orange-text); font-size: 12.5px; font-weight: 700; }
.social-recruiting-strecke h3 { font-size: 21px; line-height: 1.2; }
.social-recruiting-strecke p { color: var(--leise); font-size: 15.5px; }
.social-recruiting-strecke__fehler { margin-top: auto; padding: 12px 14px; border-radius: 14px; background: #fde4dd; color: #6e2508 !important; font-size: 14.5px !important; }
.social-recruiting-strecke__fehler b { color: #a3300c; }

.social-recruiting-kosten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.social-recruiting-kosten article { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.social-recruiting-kosten__nr { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); font-weight: 700; }
.social-recruiting-kosten h3 { font-size: 19px; }
.social-recruiting-kosten p { color: var(--leise); font-size: 15px; }

@media (max-width: 1120px) {
  .social-recruiting-strecke, .social-recruiting-kosten { grid-template-columns: 1fr 1fr; }
  .social-recruiting-strecke li:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .social-recruiting-strecke, .social-recruiting-kosten { grid-template-columns: 1fr; }
}

/* Seite Website-Relaunch: Checkliste in drei Phasen und Weiterleitungstabelle (06.10.2026). Zähler nur mit CSS, kein JavaScript. */
.website-relaunch-phasen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; counter-reset: wr-gesamt; }
.website-relaunch-phase { counter-reset: wr-phase; display: grid; gap: 10px; min-width: 0; padding: 22px; border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.website-relaunch-phase:first-child { box-shadow: inset 0 4px 0 var(--orange), 0 0 0 1px var(--linie); }
.website-relaunch-phase__marke { font-size: 13px; font-weight: 700; color: var(--orange-text); }
.website-relaunch-phase h3 { font-size: 21px; line-height: 1.2; margin-bottom: 4px; }
.website-relaunch-phase label { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--grund); cursor: pointer; transition: box-shadow .15s, background .15s; }
.website-relaunch-phase input { grid-row: span 2; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gruen); }
.website-relaunch-phase label:has(input:checked) { counter-increment: wr-phase wr-gesamt; background: #def3e4; box-shadow: inset 0 0 0 1.5px var(--gruen); }
.website-relaunch-phase label b { font-size: 15.5px; line-height: 1.3; }
.website-relaunch-phase label small { color: var(--leise); font-size: 14px; line-height: 1.45; }
.website-relaunch-phase__stand { margin-top: 4px; font-size: 14.5px; font-weight: 600; }
.website-relaunch-phase__stand::after { content: counter(wr-phase) " von " attr(data-von) " erledigt"; }
.website-relaunch-gesamt { grid-column: 1 / -1; padding: 18px 22px; border-radius: 18px; background: linear-gradient(150deg, #fff 30%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); font-size: 18px; font-weight: 600; }
.website-relaunch-gesamt__zahl::after { content: counter(wr-gesamt) " von 25 Punkten"; }

.website-relaunch-tabelle { min-width: 0; overflow-x: auto; padding: 22px; border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.website-relaunch-tabelle table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.website-relaunch-tabelle caption { text-align: left; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.website-relaunch-tabelle th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--text); font-size: 13.5px; }
.website-relaunch-tabelle td { padding: 10px; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.website-relaunch-tabelle td:last-child { font-weight: 700; white-space: nowrap; }

@media (max-width: 1120px) { .website-relaunch-phasen { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .website-relaunch-phase, .website-relaunch-tabelle { padding: 16px; } .website-relaunch-tabelle table { font-size: 13.5px; } .website-relaunch-tabelle td, .website-relaunch-tabelle th { padding: 8px 6px; } }

/* ===== wissen-geo: Ergänzungen zum Ratgeber GEO-Optimierung (06.10.2026) =====
   Grundbausteine (Artikel, Inhalt, Tabellen, Merkkasten, Warnzeichen, Fazit) kommen aus wissen.css. */
.wissen-geo-titel { font-size: clamp(34px, 4vw, 56px); }
.wissen-tabelle table.wissen-geo-quellen { min-width: 720px; }
.wissen-geo-vergleich td:last-child { background: var(--orange-hell); color: var(--text); }
.wissen-geo-vergleich thead th:last-child { background: var(--orange-hell); color: var(--orange-text); }
.wissen-geo-unter { margin-top: 10px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; color: var(--leise); }

/* Wissen: Übersicht und Ratgeber (wissen, wissen/seo-kosten, wissen/ki-anzeigen), 06.10.2026
   Alle Klassen beginnen mit "wissen-". Die Karten der Übersicht nutzen den vorhandenen Baustein .wissen. */

/* Autorzeile im Kopf */
.wissen-autor { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 15px; color: var(--leise); }
.wissen-autor b { color: var(--text); }
.wissen-autor .portrait { width: 48px; height: 48px; }

/* Inhaltsverzeichnis in der Infokarte */
.wissen-inhalt { display: grid; gap: 4px; margin-top: 12px; counter-reset: wi; }
.wissen-inhalt li { counter-increment: wi; }
.wissen-inhalt a { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 7px 8px; border-radius: 12px; color: var(--text); font-size: 15.5px; text-decoration: none; }
.wissen-inhalt a::before { content: counter(wi); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); font-size: 13px; font-weight: 700; }
.wissen-inhalt a:hover { background: var(--grund); }

/* Artikeltext */
.wissen-artikel { max-width: 820px; }
.wissen-artikel > section { padding-top: clamp(48px, 6vw, 72px); }
.wissen-artikel h2 { font-size: clamp(27px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; scroll-margin-top: 100px; }
.wissen-artikel h3 { margin: 28px 0 8px; font-size: 21px; line-height: 1.25; }
.wissen-artikel p, .wissen-artikel li { color: var(--leise); font-size: 17.5px; line-height: 1.65; }
.wissen-artikel h2 + p { margin-top: 16px; }
.wissen-artikel p + p { margin-top: 14px; }
.wissen-artikel strong { color: var(--text); }
.wissen-artikel ul, .wissen-artikel ol { display: grid; gap: 8px; margin: 14px 0; }
.wissen-artikel ul > li { position: relative; padding-left: 20px; }
.wissen-artikel ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--orange); }
.wissen-artikel ol { counter-reset: wo; }
.wissen-artikel ol > li { counter-increment: wo; position: relative; padding-left: 38px; }
.wissen-artikel ol > li::before { content: counter(wo); position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); font-size: 13.5px; font-weight: 700; }
.wissen-quelle { display: block; margin-top: 6px; font-size: 13.5px; color: var(--leise); }

/* Merkkasten */
.wissen-merke { margin: 22px 0; padding: 20px 24px; border-radius: 18px; background: linear-gradient(160deg, #fff 35%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.wissen-merke p { color: var(--text); font-size: 16.5px; }
.wissen-merke b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--orange-text); }

/* Tabellen */
.wissen-tabelle { margin: 22px 0; overflow-x: auto; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.wissen-tabelle table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.wissen-tabelle caption { padding: 16px 20px 0; text-align: left; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.wissen-tabelle th, .wissen-tabelle td { padding: 12px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); line-height: 1.45; }
.wissen-tabelle thead th { font-size: 13.5px; color: var(--leise); }
.wissen-tabelle tbody th { font-weight: 600; }
.wissen-tabelle td { color: var(--leise); }
.wissen-tabelle tr:last-child th, .wissen-tabelle tr:last-child td { border-bottom: 0; }

/* Zwei Spalten: Chancen und Grenzen */
.wissen-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.wissen-zwei > div { padding: 22px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.wissen-zwei h3 { margin: 0 0 6px; font-size: 19px; }
.wissen-zwei ul { margin: 8px 0 0; }
.wissen-zwei li { font-size: 16px; }

/* Prüfliste zum Abhaken, zählt ohne JavaScript über CSS-Zähler */
.wissen-pruefliste { margin: 22px 0; padding: clamp(20px, 3vw, 30px); border-radius: 24px; background: var(--papier); box-shadow: var(--schatten); counter-reset: erfuellt; }
.wissen-pruefliste__punkte { display: grid; gap: 8px; }
.wissen-pruefliste label { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; align-items: start; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: background .15s, box-shadow .15s; }
.wissen-pruefliste input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--gruen); grid-row: span 2; }
.wissen-pruefliste input:checked { counter-increment: erfuellt; }
.wissen-pruefliste label:has(input:checked) { background: #eef8f1; box-shadow: inset 0 0 0 1.5px #9fd3b0; }
.wissen-pruefliste label b { color: var(--text); font-size: 16.5px; line-height: 1.35; }
.wissen-pruefliste label span { color: var(--leise); font-size: 15px; line-height: 1.5; }
.wissen-pruefliste__stand { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: var(--grund); font-size: 15.5px; color: var(--leise); }
.wissen-pruefliste__stand::before { content: counter(erfuellt) " von 10 Punkten erfüllt. "; color: var(--text); font-weight: 700; }

/* Warnzeichen */
.wissen-warnzeichen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.wissen-warnzeichen > div { display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; padding: 20px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.wissen-warnzeichen__zeichen { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fde4dd; color: #a3300c; font-weight: 700; }
.wissen-warnzeichen b { color: var(--text); font-size: 17px; line-height: 1.3; }
.wissen-warnzeichen p { font-size: 15px; line-height: 1.5; }

/* Fazit */
.wissen-fazit { padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: linear-gradient(150deg, #fff 30%, var(--orange-hell)); box-shadow: 0 0 0 1px var(--linie); }
.wissen-fazit p { color: var(--text); }
.wissen-fazit .einstieg__knoepfe { margin-top: 22px; }

/* Quellen am Ende */
.wissen-quellen { display: grid; gap: 6px; margin-top: 14px; }
.wissen-artikel .wissen-quellen li { font-size: 14.5px; line-height: 1.5; }


@media (max-width: 640px) {
  .wissen-zwei, .wissen-warnzeichen { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Zusatz Automatisierung (automatisierung/index.html, Quelle _werkzeug/seiten/37-automatisierung.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix automatisierung-. Nur Tokens aus :root.
   Die alten Klassen automatisierung-fluesse / automatisierung-fluss (teile/zusatz/automatisierung.css) werden hier NICHT benutzt.
   Enthält: Rückruf mit Frage nach dem Ablauf (Knoten-Feld, zweistufig über :has), tippender Platzhalter in CSS,
   Live-Szene „Eine Anfrage, drei Stationen“, fünf Abläufe als Reiter mit Kette, Werkzeug-Finder mit Profilen (Radios und :has),
   Betrieb mit vier Regeln und Selbsttest, Ablauf-Blatt heute/vereinfacht, Preis-Kopf, Wegweiser als Stationen ohne Skript.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-szenen, data-weg-waehlen aus ares.js.
   ========================================================================== */

/* ---------- Einstieg: Rückruf mit Frage nach dem Ablauf ---------- */
.automatisierung-ruf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frage knopf" "fuss fuss"; gap: 10px; max-width: 650px; margin-top: 26px; }
.automatisierung-ruf__frage { grid-area: frage; position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; height: 66px; padding: 0 50px 0 10px; border-radius: 18px; background: #fbf6ee; color: var(--tinte); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 22px 44px -22px rgba(0, 0, 0, .9); transition: box-shadow .25s; }
.automatisierung-ruf__frage:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 6px rgba(244, 165, 58, .12), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.automatisierung-ruf__frage:focus-within { box-shadow: 0 0 0 2px var(--bernstein), 0 0 0 8px rgba(244, 165, 58, .28), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.automatisierung-ruf__frage::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--bernstein-text); border-bottom: 2px solid var(--bernstein-text); transform: rotate(45deg); pointer-events: none; }
.automatisierung-ruf__knoten { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--espresso); color: var(--bernstein-licht); }
.automatisierung-ruf__knoten::after { content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 3px #fbf6ee; }
.automatisierung-ruf__knoten .symbol { width: 21px; height: 21px; }
.automatisierung-ruf__innen { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.automatisierung-ruf__label { font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; color: var(--leise); }
.automatisierung-ruf__frage select { width: 100%; height: 28px; padding: 0; border: 0; background: none; color: var(--tinte); font: 400 18.5px/1 var(--grotesk); outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.automatisierung-ruf__frage select:invalid { color: #6f6458; }
.automatisierung-ruf__knopf { grid-area: knopf; min-height: 66px; padding: 0 30px; }
.automatisierung-ruf__fuss { grid-area: fuss; display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: #dcd0c0; }
.automatisierung-ruf__fuss img { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 239, 230, .25); }
.automatisierung-ruf__zwei { grid-area: zwei; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "eigene eigene eigene" "name tel zeit" "ok ok ok"; gap: 12px; padding: 18px; border-radius: 18px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.automatisierung-ruf:has(.automatisierung-ruf__frage select:valid) { grid-template-areas: "frage frage" "zwei zwei" "fuss knopf"; }
.automatisierung-ruf:has(.automatisierung-ruf__frage select:valid) .automatisierung-ruf__zwei { display: grid; animation: auftritt .5s var(--weich) both; }
.automatisierung-ruf:has(.automatisierung-ruf__frage select:valid) .automatisierung-ruf__knopf { min-height: 56px; }
@supports not selector(:has(*)) { .automatisierung-ruf { grid-template-areas: "frage frage" "zwei zwei" "fuss knopf"; } .automatisierung-ruf__zwei { display: grid; } }
.automatisierung-ruf__zwei > label { min-width: 0; }
.automatisierung-ruf__zwei > label:nth-child(2) { grid-area: name; }
.automatisierung-ruf__zwei > label:nth-child(3) { grid-area: tel; }
.automatisierung-ruf__zwei > label:nth-child(4) { grid-area: zeit; }
.automatisierung-ruf__eigene { grid-area: eigene; }
.automatisierung-ruf__zwei label > span:first-child { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--hell-leise); }
.automatisierung-ruf__zwei small { font-size: 12.5px; color: #b5a796; }
.automatisierung-ruf__zwei input:not([type="checkbox"]), .automatisierung-ruf__zwei select { width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px; background: rgba(21, 17, 14, .7); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .22); color: var(--hell); font: 400 16.5px var(--grotesk); }
.automatisierung-ruf__zwei input:focus, .automatisierung-ruf__zwei select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--bernstein-licht); }
.automatisierung-ruf__ok { grid-area: ok; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--hell-leise); }
.automatisierung-ruf__ok input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--bernstein); }
.automatisierung-ruf__ok a { color: var(--hell); }
.automatisierung-ruf__tippfeld { position: relative; display: block; }
.automatisierung-tipp { position: absolute; left: 15px; right: 15px; top: 0; bottom: 0; overflow: hidden; pointer-events: none; font: 400 16.5px/48px var(--grotesk); color: #a3968a; }
.automatisierung-tipp i { position: absolute; left: 0; top: 0; overflow: hidden; width: 0; font-style: normal; white-space: nowrap; }
.automatisierung-tipp i:first-child { width: var(--l); }
.bewegt .automatisierung-tipp i { width: 0; opacity: 0; animation: automatisierung-tippen 12s steps(30, end) infinite; }
.bewegt .automatisierung-tipp i:nth-child(2) { animation-delay: 4s; }
.bewegt .automatisierung-tipp i:nth-child(3) { animation-delay: 8s; }
@keyframes automatisierung-tippen { 0% { width: 0; opacity: 1; } 18% { width: var(--l); opacity: 1; } 29% { width: var(--l); opacity: 1; } 33% { width: 0; opacity: 1; } 33.4%, 100% { width: 0; opacity: 0; } }
.automatisierung-ruf__tippfeld:focus-within .automatisierung-tipp, .automatisierung-ruf__tippfeld input:not(:placeholder-shown) + .automatisierung-tipp { display: none; }
@media (min-width: 1100px) and (max-height: 800px) {
  .automatisierung-ruf { margin-top: 18px; }
  .automatisierung-ruf__frage, .automatisierung-ruf__knopf { height: 60px; min-height: 60px; }
  .automatisierung-ruf__knoten { width: 42px; height: 42px; }
}
@media (max-width: 760px) {
  .automatisierung-ruf, .automatisierung-ruf:has(.automatisierung-ruf__frage select:valid) { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .automatisierung-ruf { grid-template-areas: "frage" "knopf" "fuss"; }
  .automatisierung-ruf:has(.automatisierung-ruf__frage select:valid) { grid-template-areas: "frage" "zwei" "knopf" "fuss"; }
  .automatisierung-ruf__frage { height: 58px; padding: 0 42px 0 7px; gap: 12px; }
  .automatisierung-ruf__frage::after { right: 20px; }
  .automatisierung-ruf__knoten { width: 42px; height: 42px; }
  .automatisierung-ruf__frage select { font-size: 16.5px; }
  .automatisierung-ruf__knopf, .automatisierung-ruf:has(.automatisierung-ruf__frage select:valid) .automatisierung-ruf__knopf { min-height: 50px; }
  .automatisierung-ruf__fuss { margin-top: 2px; font-size: 13.5px; line-height: 1.4; }
  .automatisierung-ruf__fuss img { width: 28px; height: 28px; }
  .automatisierung-ruf__zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "eigene eigene" "name tel" "zeit zeit" "ok ok"; padding: 14px; gap: 10px; }
}
@media (max-width: 760px) { @supports not selector(:has(*)) { .automatisierung-ruf { grid-template-areas: "frage" "zwei" "knopf" "fuss"; } } }

/* ---------- Live-Szene: eine Anfrage wandert durch drei Stationen ---------- */
.automatisierung-sz-bahn { position: relative; height: 136px; }
.automatisierung-sz-bahn::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, rgba(244, 165, 58, .55) 0 7px, rgba(244, 165, 58, 0) 7px 12px); }
.automatisierung-sz-station { position: absolute; top: 0; display: grid; justify-items: center; gap: 6px; width: 76px; font-size: 12.5px; color: #e9dfd2; }
.automatisierung-sz-station:nth-child(1) { left: 0; }
.automatisierung-sz-station:nth-child(2) { left: calc(50% - 38px); }
.automatisierung-sz-station:nth-child(3) { right: 0; }
.automatisierung-sz-station .symbol { box-sizing: content-box; width: 20px; height: 20px; padding: 17px; border-radius: 16px; color: var(--bernstein-licht); background: #2a221b; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); }
.automatisierung-sz-station b { font-weight: 600; }
.automatisierung-sz-karte { position: absolute; left: 0; top: 88px; display: grid; width: 150px; padding: 7px 12px; border-radius: 12px; font-size: 12px; line-height: 1.3; color: var(--tinte); background: #fbf6ee; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9); }
.automatisierung-sz-karte b { font-size: 12.5px; }
.automatisierung-sz-karte small { color: var(--leise); }
.automatisierung-sz-ki { position: absolute; left: 50%; top: 56px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #1a130c; background: var(--bernstein); box-shadow: 0 8px 20px -6px rgba(244, 165, 58, .9); white-space: nowrap; transform: translateX(-50%); opacity: 0; }
.automatisierung-sz-protokoll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.automatisierung-sz-protokoll li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.3; color: #e9dfd2; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.automatisierung-sz-protokoll .symbol { flex: none; width: 15px; height: 15px; color: var(--bernstein-licht); }
.automatisierung-sz-mensch { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.3; color: #efe5d8; background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); }
.automatisierung-sz-mensch .symbol { flex: none; width: 18px; height: 18px; color: var(--bernstein-licht); }
.automatisierung-sz-mensch b { color: var(--bernstein-licht); font-weight: 600; }
.automatisierung-sz-mensch em { margin-left: auto; font-size: 12px; font-style: normal; color: #b5a796; white-space: nowrap; }
.ist-aktiv .automatisierung-sz-karte { animation: automatisierung-wandern 5.4s cubic-bezier(.6, 0, .3, 1) .4s both; }
@keyframes automatisierung-wandern { 0% { left: 0; opacity: 0; } 8% { left: 0; opacity: 1; } 28% { left: 0; } 52% { left: calc(50% - 75px); } 70% { left: calc(50% - 75px); } 100% { left: calc(100% - 150px); opacity: 1; } }
.ist-aktiv .automatisierung-sz-ki { animation: automatisierung-ki 2.6s ease 2.2s both; }
@keyframes automatisierung-ki { 0% { opacity: 0; transform: translate(-50%, 6px); } 20%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: .0; } }
.ist-aktiv .automatisierung-sz-protokoll li { animation: auftritt .6s var(--weich) both; }
.ist-aktiv .automatisierung-sz-protokoll li:nth-child(1) { animation-delay: 1.2s; }
.ist-aktiv .automatisierung-sz-protokoll li:nth-child(2) { animation-delay: 3.4s; }
.ist-aktiv .automatisierung-sz-protokoll li:nth-child(3) { animation-delay: 5.6s; }
.ist-aktiv .automatisierung-sz-protokoll li:nth-child(4) { animation-delay: 6s; }
.ist-aktiv .automatisierung-sz-mensch { animation: auftritt .8s var(--weich) 6.6s both; }
.ist-aktiv .automatisierung-sz-station:nth-child(3) .symbol { animation: automatisierung-ankunft .9s ease 5.6s both; }
@keyframes automatisierung-ankunft { 50% { box-shadow: inset 0 0 0 1px var(--bernstein), 0 0 0 8px rgba(244, 165, 58, .25); } 100% { box-shadow: inset 0 0 0 1px var(--bernstein); } }
@media (min-width: 1100px) and (max-height: 800px) {
  .automatisierung-sz-bahn { height: 126px; } .automatisierung-sz-karte { top: 82px; }
  .automatisierung-sz-protokoll li { padding: 6px 9px; }
}
@media (max-width: 760px) {
  .automatisierung-sz-bahn { height: 74px; }
  .automatisierung-sz-bahn::before { top: 16px; left: 18px; right: 18px; }
  .automatisierung-sz-station { width: 56px; gap: 2px; font-size: 11px; }
  .automatisierung-sz-station:nth-child(2) { left: calc(50% - 28px); }
  .automatisierung-sz-station .symbol { width: 14px; height: 14px; padding: 9px; border-radius: 10px; }
  .automatisierung-sz-karte { top: 48px; width: 118px; padding: 3px 9px; font-size: 10.5px; }
  .automatisierung-sz-karte small, .automatisierung-sz-ki, .automatisierung-sz-protokoll { display: none; }
  @keyframes automatisierung-wandern { 0% { left: 0; opacity: 0; } 8% { left: 0; opacity: 1; } 28% { left: 0; } 52% { left: calc(50% - 59px); } 70% { left: calc(50% - 59px); } 100% { left: calc(100% - 118px); opacity: 1; } }
  .automatisierung-sz-mensch { padding: 4px 10px; font-size: 11.5px; }
  .automatisierung-sz-mensch em { display: none; }
}

/* ---------- Sorgen: Kernsatz ---------- */
.automatisierung-band { margin-top: 26px; padding: 18px 20px; border-radius: 18px; font-size: 16.5px; line-height: 1.55; color: var(--leise); background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); }
.automatisierung-band b { color: var(--tinte); }

/* ---------- Alleinstellung: fünf Abläufe als Reiter mit Kette ---------- */
.automatisierung-ablaeufe__wahl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.automatisierung-ablaeufe__wahl button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 92px; padding: 14px 16px; border: 0; border-radius: 18px; background: rgba(255, 253, 249, .55); color: var(--leise); font: 600 15.5px/1.3 var(--grotesk); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); transition: background .3s, color .3s, transform .3s var(--weich); }
.automatisierung-ablaeufe__wahl button span { font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); }
.automatisierung-ablaeufe__wahl button:hover { color: var(--tinte); background: #fffdf9; transform: translateY(-2px); }
.automatisierung-ablaeufe__wahl button[aria-selected="true"] { color: var(--hell); background: var(--espresso); box-shadow: 0 22px 40px -22px rgba(28, 23, 19, .8); }
.automatisierung-ablaeufe__wahl button[aria-selected="true"] span { color: var(--bernstein-licht); }
.automatisierung-ablaeufe__wahl button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; background: var(--espresso); transform: rotate(45deg); }
.automatisierung-ablaeufe__wahl button:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.automatisierung-ablaeufe__feld { padding: clamp(26px, 3vw, 44px); border-radius: 28px; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.automatisierung-ablaeufe__feld[hidden] { display: none; }
.automatisierung-ablaeufe__hinweis { margin-bottom: 18px; font-size: 15px; color: var(--leise); }
.automatisierung-kette { display: flex; align-items: stretch; counter-reset: ak; }
.automatisierung-kette li { position: relative; flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.automatisierung-kette li + li { margin-left: 30px; }
.automatisierung-kette li + li::before { content: ""; position: absolute; left: -30px; top: 50%; width: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--bernstein-tief) 0 6px, rgba(138, 79, 0, 0) 6px 10px); }
.automatisierung-kette li + li::after { content: ""; position: absolute; left: -9px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-top: 2px solid var(--bernstein-tief); border-right: 2px solid var(--bernstein-tief); transform: rotate(45deg); }
.automatisierung-kette small { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--leise); }
.automatisierung-kette b { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.automatisierung-kette__start { background: var(--creme) !important; }
.automatisierung-kette__start small { color: var(--bernstein-text); }
.automatisierung-kette__ki { background: linear-gradient(180deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .06)) !important; box-shadow: inset 0 0 0 1.5px var(--bernstein) !important; }
.automatisierung-kette__ki small { display: inline-flex; justify-self: start; padding: 2px 9px; border-radius: 999px; color: #1a130c; background: var(--bernstein); }
.automatisierung-kette__ziel { color: var(--hell); background: var(--espresso) !important; box-shadow: none !important; }
.automatisierung-kette__ziel small { color: var(--bernstein-licht); }
.automatisierung-ablaeufe__feld:not([hidden]) .automatisierung-kette li { animation: auftritt .5s var(--weich) both; }
.automatisierung-ablaeufe__feld:not([hidden]) .automatisierung-kette li:nth-child(2) { animation-delay: .12s; }
.automatisierung-ablaeufe__feld:not([hidden]) .automatisierung-kette li:nth-child(3) { animation-delay: .24s; }
.automatisierung-ablaeufe__feld:not([hidden]) .automatisierung-kette li:nth-child(4) { animation-delay: .36s; }
.automatisierung-ablaeufe__feld:not([hidden]) .automatisierung-kette li:nth-child(5) { animation-delay: .48s; }
.automatisierung-kette__mensch { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 18px; border-radius: 16px; font-size: 16px; line-height: 1.45; background: var(--creme); box-shadow: inset 3px 0 0 var(--tinte); }
.automatisierung-kette__mensch .symbol { flex: none; width: 20px; height: 20px; color: var(--tinte); }
.automatisierung-ablaeufe__feld:not([hidden]) .automatisierung-kette__mensch { animation: auftritt .5s var(--weich) .7s both; }
.automatisierung-ablaeufe__legende { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 13.5px; color: var(--leise); }
.automatisierung-ablaeufe__legende span { display: inline-flex; align-items: center; gap: 8px; }
.automatisierung-ablaeufe__legende span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.automatisierung-ablaeufe__l-ki::before { background: rgba(244, 165, 58, .3); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.automatisierung-ablaeufe__l-mensch::before { background: var(--creme); box-shadow: inset 3px 0 0 var(--tinte); }
.automatisierung-notiz { max-width: 52em; margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--bernstein); font-size: 15px; line-height: 1.55; color: var(--leise); }
@media (max-width: 1100px) {
  .automatisierung-ablaeufe__wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .automatisierung-ablaeufe__wahl button[aria-selected="true"]::after { display: none; }
  .automatisierung-kette { flex-direction: column; }
  .automatisierung-kette li { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 16px; }
  .automatisierung-kette li + li { margin: 18px 0 0; }
  .automatisierung-kette li + li::before { left: 30px; top: -18px; width: 2px; height: 18px; background: repeating-linear-gradient(180deg, var(--bernstein-tief) 0 5px, rgba(138, 79, 0, 0) 5px 9px); }
  .automatisierung-kette li + li::after { left: 27px; top: -8px; margin: 0; transform: rotate(135deg); }
}
@media (max-width: 560px) {
  .automatisierung-ablaeufe__wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automatisierung-ablaeufe__wahl button { min-height: 0; padding: 12px; font-size: 14px; }
  .automatisierung-ablaeufe__wahl button:last-child { grid-column: 1 / -1; }
  .automatisierung-ablaeufe__feld { padding: 18px 14px; border-radius: 22px; }
  .automatisierung-kette li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Werkzeug-Finder mit Profilen ---------- */
.automatisierung-finder__rahmen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.automatisierung-finder__fragen { display: grid; gap: 20px; padding: clamp(22px, 2.6vw, 34px); border-radius: 26px; color: var(--hell); background: linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: 0 50px 100px -60px rgba(0, 0, 0, .8); }
.automatisierung-finder__frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.automatisierung-finder__frage--b { display: none; }
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked) .automatisierung-finder__frage--b { display: block; animation: auftritt .45s var(--weich) both; }
.automatisierung-finder__frage legend { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.automatisierung-finder__frage legend span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: italic 400 16px/1 var(--serif); color: var(--bernstein-licht); box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .5); }
.automatisierung-finder__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 42px; }
.automatisierung-finder__wahl label { position: relative; cursor: pointer; }
.automatisierung-finder__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.automatisierung-finder__wahl span { display: grid; place-items: center; min-height: 46px; border-radius: 12px; font-size: 15.5px; font-weight: 600; color: #e9dfd2; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); transition: background .25s, color .25s; }
.automatisierung-finder__wahl label:hover span { box-shadow: inset 0 0 0 1px var(--bernstein); }
.automatisierung-finder__wahl input:checked + span { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.automatisierung-finder__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.automatisierung-finder__antwort { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--linie-dunkel); }
.automatisierung-finder__warte { font: italic 400 20px/1.3 var(--serif); color: #b5a796; }
.automatisierung-finder__erg { display: none; font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.automatisierung-finder__erg b { color: var(--bernstein-licht); }
.automatisierung-finder__avv { display: block; margin-top: 10px; font-size: 13.5px; color: #b5a796; }
.automatisierung-finder__neu { display: none; justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--hell-leise); font: 600 14.5px var(--grotesk); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .3); }
.automatisierung-finder__neu:hover { color: var(--hell); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.automatisierung-finder__rahmen:has(input:checked) .automatisierung-finder__neu { display: inline-flex; align-items: center; }
.automatisierung-finder__profile { display: grid; gap: 12px; }
.automatisierung-profil { position: relative; display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 6px 24px; padding: 22px 24px; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .35s, box-shadow .35s, opacity .35s, transform .35s var(--weich); }
.automatisierung-profil h3 { grid-row: span 2; font: italic 400 clamp(26px, 2.3vw, 32px)/1.05 var(--serif); }
.automatisierung-profil p { font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.automatisierung-profil ul { display: grid; gap: 4px; font-size: 14.5px; }
.automatisierung-profil li { position: relative; padding-left: 20px; }
.automatisierung-profil__plus::before, .automatisierung-profil__minus::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 2px; background: var(--leise); }
.automatisierung-profil__plus::after { content: ""; position: absolute; left: 6px; top: calc(.55em - 4px); width: 2px; height: 10px; background: var(--bernstein-tief); }
.automatisierung-profil__plus::before { background: var(--bernstein-tief); }
/* Treffer heben sich hervor, der Rest tritt zurück */
.automatisierung-finder__rahmen:has(#automatisierung-fa-ja:checked) .automatisierung-profil:not(.automatisierung-profil--n8n),
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-ja:checked) .automatisierung-profil:not(.automatisierung-profil--haus),
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-nein:checked) .automatisierung-profil:not(.automatisierung-profil--make) { background: rgba(243, 237, 228, .55); box-shadow: inset 0 0 0 1px rgba(224, 214, 200, .6); }
.automatisierung-finder__rahmen:has(#automatisierung-fa-ja:checked) .automatisierung-profil--n8n,
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-ja:checked) .automatisierung-profil--haus,
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-nein:checked) .automatisierung-profil--make { background: #fffdf9; box-shadow: inset 0 0 0 2px var(--bernstein), 0 30px 60px -30px rgba(244, 165, 58, .6); transform: translateX(-6px); }
.automatisierung-finder__rahmen:has(#automatisierung-fa-ja:checked) .automatisierung-finder__erg--n8n,
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-ja:checked) .automatisierung-finder__erg--haus,
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-nein:checked) .automatisierung-finder__erg--make { display: block; animation: auftritt .45s var(--weich) both; }
.automatisierung-finder__rahmen:has(#automatisierung-fa-ja:checked) .automatisierung-finder__warte,
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-ja:checked) .automatisierung-finder__warte,
.automatisierung-finder__rahmen:has(#automatisierung-fa-nein:checked):has(#automatisierung-fb-nein:checked) .automatisierung-finder__warte { display: none; }
@supports not selector(:has(*)) { .automatisierung-finder__frage--b { display: block; } }
@media (max-width: 1000px) { .automatisierung-finder__rahmen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .automatisierung-profil { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .automatisierung-profil h3 { grid-row: auto; }
  .automatisierung-finder__wahl { padding-left: 0; }
}

/* ---------- Betrieb: vier Regeln und Selbsttest ---------- */
.automatisierung-betrieb__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px clamp(40px, 5vw, 88px); align-items: center; }
.automatisierung-betrieb__text > p { max-width: 34em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--hell-leise); }
.automatisierung-betrieb__text strong { color: var(--hell); }
.automatisierung-regeln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; counter-reset: ar; }
.automatisierung-regeln li { counter-increment: ar; display: grid; gap: 4px; padding: 16px 14px 18px; border-radius: 16px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.automatisierung-regeln li::before { content: counter(ar, upper-roman); font: italic 400 22px/1 var(--serif); color: var(--bernstein-licht); }
.automatisierung-regeln b { font-size: 15.5px; color: var(--hell); }
.automatisierung-regeln span { font-size: 13.5px; line-height: 1.35; color: #cdbfae; }
.automatisierung-test { background: #fffdf9; color: var(--tinte); }
.automatisierung-test .werkzeug__kopf { grid-template-columns: minmax(0, 1fr); }
.automatisierung-test .werkzeug__art { grid-column: 1; grid-row: auto; justify-self: start; }
.automatisierung-test__punkte { display: grid; gap: 8px; }
.automatisierung-test__punkte label { position: relative; display: block; cursor: pointer; }
.automatisierung-test__punkte input { position: absolute; opacity: 0; pointer-events: none; }
.automatisierung-test__punkte span { display: block; padding: 12px 16px 12px 48px; border-radius: 14px; font-size: 15.5px; line-height: 1.45; color: var(--leise); background: var(--creme); transition: background .25s, color .25s; }
.automatisierung-test__punkte span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; background: #fffdf9; box-shadow: inset 0 0 0 1.5px rgba(60, 40, 20, .35); }
.automatisierung-test__punkte label:hover span { color: var(--tinte); }
.automatisierung-test__punkte input:checked + span { color: var(--tinte); background: rgba(244, 165, 58, .18); }
.automatisierung-test__punkte input:checked + span::before { background: var(--bernstein); box-shadow: none; }
.automatisierung-test__punkte input:checked + span::after { content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 10px; margin-top: -7px; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg); }
.automatisierung-test__punkte input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.automatisierung-test__stand { margin-top: 18px; }
.automatisierung-test__stand > p { font: italic 400 20px/1.3 var(--serif); color: var(--leise); }
.automatisierung-test__erg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.automatisierung-test__erg[hidden] { display: none; }
.automatisierung-test__erg p { font-size: 17px; }
.automatisierung-test__erg b { font-weight: 700; }
@media (max-width: 1100px) { .automatisierung-regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .automatisierung-betrieb__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .automatisierung-test__erg .knopf { width: 100%; } }

/* ---------- Statt Befund: Ablauf auf einem Blatt ---------- */
.automatisierung-blatt { overflow-x: clip; }
.automatisierung-blatt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.automatisierung-blatt__lead { max-width: 24em; margin-top: 22px; font: italic 400 clamp(23px, 2vw, 28px)/1.3 var(--serif); color: var(--tinte); }
.automatisierung-blatt__punkte { margin: 24px 0 30px; border-top: 1px solid var(--tinte); }
.automatisierung-blatt__punkte li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 16px; line-height: 1.45; }
.automatisierung-blatt__punkte b { font-weight: 700; }
.automatisierung-blatt__punkte span { color: var(--leise); }
.automatisierung-blatt__buehne { position: relative; }
.automatisierung-blatt__buehne::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #ece3d6; transform: rotate(2.6deg) translate(10px, 8px); }
.automatisierung-blatt__papier { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 6px; background: #fffdf9; background-image: linear-gradient(rgba(60, 40, 20, .045) 1px, rgba(60, 40, 20, 0) 1px), linear-gradient(90deg, rgba(60, 40, 20, .045) 1px, rgba(60, 40, 20, 0) 1px); background-size: 22px 22px; box-shadow: 0 70px 120px -60px rgba(60, 40, 20, .7); transform: rotate(-.8deg); }
.automatisierung-blatt__papier header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.automatisierung-blatt__papier header img { width: 94px; height: auto; }
.automatisierung-blatt__papier header span { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--leise); text-align: right; }
.automatisierung-blatt__titel { margin-top: 18px; font: italic 400 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); }
.automatisierung-blatt__fuer { margin-top: 4px; font-size: 15px; color: var(--leise); }
.automatisierung-blatt__schalter { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.automatisierung-blatt__schalter button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--leise); font: 600 14.5px var(--grotesk); cursor: pointer; }
.automatisierung-blatt__schalter button[aria-selected="true"] { color: var(--hell); background: var(--espresso); }
.automatisierung-blatt__schalter button:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.automatisierung-blatt__feld { margin-top: 20px; animation: auftritt .45s var(--weich) both; }
.automatisierung-blatt__feld[hidden] { display: none; }
.automatisierung-skizze { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.automatisierung-skizze li { position: relative; display: grid; gap: 2px; min-width: 88px; padding: 10px 14px; border-radius: 12px; background: #fffdf9; box-shadow: inset 0 0 0 1.5px var(--tinte); }
.automatisierung-skizze li + li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 22px; border-top: 2px solid var(--tinte); }
.automatisierung-skizze b { font-size: 15px; }
.automatisierung-skizze small { font-size: 12px; color: var(--leise); }
.automatisierung-skizze__doppelt { box-shadow: inset 0 0 0 1.5px var(--tinte), 4px 4px 0 -1px #fffdf9, 4px 4px 0 0 var(--leise) !important; }
.automatisierung-skizze__doppelt small { color: var(--bernstein-text); font-weight: 700; }
.automatisierung-skizze__ziel { color: var(--hell); background: var(--espresso) !important; box-shadow: 0 0 0 4px rgba(244, 165, 58, .3) !important; }
.automatisierung-skizze__ziel small { color: var(--bernstein-licht); }
.automatisierung-skizze__weg { opacity: .5; box-shadow: inset 0 0 0 1.5px var(--leise) !important; }
.automatisierung-skizze__weg b { text-decoration: line-through; }
.automatisierung-skizze__weg::before { border-top-style: dashed !important; border-top-color: var(--leise) !important; }
.automatisierung-blatt__zeile { margin-top: 18px; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.automatisierung-blatt__zeile b { color: var(--tinte); }
.automatisierung-blatt__mensch { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed #d8ccbb; font-size: 15px; line-height: 1.45; }
.automatisierung-blatt__mensch .symbol { flex: none; width: 18px; height: 18px; }
@media (max-width: 1000px) { .automatisierung-blatt__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .automatisierung-blatt__punkte li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .automatisierung-blatt__papier header { flex-direction: column; align-items: flex-start; }
  .automatisierung-blatt__papier header span { text-align: left; }
  .automatisierung-skizze { flex-direction: column; align-items: stretch; gap: 18px; }
  .automatisierung-skizze li + li::before { left: 24px; top: -18px; width: 0; height: 16px; border-top: 0; border-left: 2px solid var(--tinte); }
  .automatisierung-skizze__weg::before { border-left-style: dashed !important; border-left-color: var(--leise) !important; }
  .automatisierung-blatt .knopf--gross { width: 100%; }
}

/* ---------- Preis-Kopf unter dem Vorgehen ---------- */
.automatisierung-preis { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--linie); }
.automatisierung-preis__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 14px 72px; margin-bottom: 36px; }
.automatisierung-preis__kopf p { font-size: 18px; line-height: 1.55; color: var(--leise); }
@media (max-width: 900px) { .automatisierung-preis__kopf { grid-template-columns: minmax(0, 1fr); } .automatisierung-preis__kopf p { font-size: 17px; } }

/* ---------- Wegweiser als Stationen ohne Skript ---------- */
.automatisierung-weg { position: relative; isolation: isolate; overflow: hidden; color: var(--hell); background: #15110e; }
.automatisierung-weg__bild { position: absolute; top: 0; right: 0; z-index: -2; width: 60%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .7; }
.automatisierung-weg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #15110e 0%, #15110e 36%, rgba(21, 17, 14, .5) 64%, rgba(21, 17, 14, .15) 100%), linear-gradient(0deg, #15110e 0%, rgba(21, 17, 14, 0) 30%); }
.automatisierung-weg__kopf { max-width: 640px; }
.automatisierung-weg__kopf h2 em { color: var(--bernstein-licht); }
.automatisierung-weg__kopf p { margin-top: 16px; font-size: 19px; line-height: 1.55; color: var(--hell-leise); }
.automatisierung-weg__bahn { position: relative; display: grid; gap: 18px; max-width: 820px; margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(58px, 6vw, 80px); border-radius: 30px; background: rgba(21, 17, 14, .76); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 120px -60px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.automatisierung-weg__bahn::before { content: ""; position: absolute; left: clamp(36px, 3.6vw, 48px); top: 40px; bottom: 40px; border-left: 2px dashed rgba(244, 165, 58, .45); }
.automatisierung-weg__frage { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.automatisierung-weg__frage--2, .automatisierung-weg__frage--3 { display: none; }
.automatisierung-weg__frage legend { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0; font: italic 400 22px/1.25 var(--serif); color: var(--hell); }
.automatisierung-weg__frage legend span { position: absolute; left: calc(-1 * clamp(36px, 4vw, 48px)); top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: italic 400 15px/1 var(--serif); color: #1a130c; background: var(--bernstein); box-shadow: 0 0 0 5px #1c1713; }
.automatisierung-weg__frage label { position: relative; display: block; cursor: pointer; }
.automatisierung-weg__frage label + label { margin-top: 7px; }
.automatisierung-weg__frage input { position: absolute; opacity: 0; pointer-events: none; }
.automatisierung-weg__frage label > span { display: block; padding: 11px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.4; color: #e9dfd2; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); transition: background .25s, box-shadow .25s, color .25s; }
.automatisierung-weg__frage label:hover > span { color: var(--hell); box-shadow: inset 0 0 0 1px var(--bernstein); }
.automatisierung-weg__frage input:checked + span { color: var(--hell); background: linear-gradient(90deg, rgba(244, 165, 58, .26), rgba(244, 165, 58, .06)); box-shadow: inset 3px 0 0 var(--bernstein), inset 0 0 0 1px rgba(244, 165, 58, .6); }
.automatisierung-weg__frage input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.automatisierung-weg__notiz { display: none; margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; color: var(--bernstein-licht); background: rgba(244, 165, 58, .08); }
.automatisierung-weg__bahn:has(#automatisierung-w2-ki:checked) .automatisierung-weg__notiz--ki,
.automatisierung-weg__bahn:has(#automatisierung-w2-regel:checked) .automatisierung-weg__notiz--regel { display: block; }
.automatisierung-weg__bahn:has(#automatisierung-w1-daten:checked) .automatisierung-weg__frage--2 { display: block; animation: auftritt .45s var(--weich) both; }
.automatisierung-weg__bahn:has(#automatisierung-w1-daten:checked):has(.automatisierung-weg__frage--2 input:checked) .automatisierung-weg__frage--3 { display: block; animation: auftritt .45s var(--weich) both; }
.automatisierung-weg__ergebnisse { display: grid; gap: 12px; }
.automatisierung-weg__erg { display: none; padding: clamp(20px, 2.4vw, 28px); border-radius: 22px; color: var(--tinte); background: #fffdf9; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); animation: auftritt .5s var(--weich) both; }
.automatisierung-weg__klein { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--bernstein-text); }
.automatisierung-weg__erg h3 { margin-top: 6px; font: italic 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); color: var(--tinte); }
.automatisierung-weg__erg > p:not(.automatisierung-weg__klein) { margin: 10px 0 18px; font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.automatisierung-weg__erg .knopf--hell { color: var(--tinte); }
.automatisierung-weg__neu { display: none; justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--hell-leise); font: 600 14.5px var(--grotesk); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .3); }
.automatisierung-weg__neu:hover { color: var(--hell); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.automatisierung-weg__bahn:has(input:checked) .automatisierung-weg__neu { display: inline-flex; align-items: center; }
.automatisierung-weg__bahn:has(#automatisierung-w1-fragen:checked) .automatisierung-weg__erg--fragen,
.automatisierung-weg__bahn:has(#automatisierung-w1-anders:checked) .automatisierung-weg__erg--anders,
.automatisierung-weg__bahn:has(#automatisierung-w1-daten:checked):has(.automatisierung-weg__frage--2 input:checked):has(#automatisierung-w3-ja:checked) .automatisierung-weg__erg--ja,
.automatisierung-weg__bahn:has(#automatisierung-w1-daten:checked):has(.automatisierung-weg__frage--2 input:checked):has(#automatisierung-w3-nein:checked) .automatisierung-weg__erg--nein { display: block; }
@supports not selector(:has(*)) { .automatisierung-weg__frage--2, .automatisierung-weg__frage--3, .automatisierung-weg__erg { display: block; } }
@media (max-width: 900px) {
  .automatisierung-weg__bild { width: 100%; height: 40%; opacity: .4; }
  .automatisierung-weg::before { background: linear-gradient(0deg, #15110e 0%, #15110e 60%, rgba(21, 17, 14, .45) 100%); }
}
@media (max-width: 560px) {
  .automatisierung-weg__bahn { margin-inline: calc(-1 * var(--rand) + 8px); padding: 20px 14px 20px 52px; border-radius: 24px; }
  .automatisierung-weg__bahn::before { left: 30px; }
  .automatisierung-weg__frage legend { font-size: 20px; }
  .automatisierung-weg__frage legend span { left: -42px; width: 30px; height: 30px; }
  .automatisierung-weg__erg .knopf { width: 100%; }
}
.automatisierung-test h2 em, .automatisierung-test h3 em { color: var(--bernstein-text); }

/* ==========================================================================
   Zusatz Sichtbarkeits-Check (sichtbarkeits-check/index.html, Quelle _werkzeug/seiten/15-sichtbarkeits-check.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix check-. Nur Tokens aus :root.
   Enthält: Funnel als helle Karte im dunklen Einstieg, vier Analyse-Arten, Danke-Zustand,
   Vorschau „Ihr Befund entsteht“ (data-spiegel, data-nur-art aus ares.js), Wegweiser „Welche Analyse passt?“ (nur CSS, :has),
   drei Wege nach dem Befund als Drehkarten, Zusagen als Sprungmarken zur FAQ.
   Skripte: keine eigenen. Funnel, Vorbelegung ?check= ?website= ?stelle=, Spiegel und Art-Umschaltung in ares.js (Check-Funnel).
   ========================================================================== */

/* ---------- Einstieg ---------- */
.check-einstieg { overflow-x: clip; }
.check-einstieg .einstieg__inhalt { grid-template-columns: minmax(0, 660px) minmax(0, 1fr); align-items: start; }
.check-einstieg .einstieg__aussage { font-size: clamp(34px, min(3.7vw, 6.4svh), 56px); }
.check-einstieg .einstieg__lead { max-width: 36em; font-size: clamp(16.5px, 1.2vw, 18.5px); }
.check-einstieg .live { align-self: center; margin-top: 40px; }
[data-nur-art][hidden] { display: none !important; }

/* ---------- Funnel als helle Karte ---------- */
.check-funnel { position: relative; margin-top: 26px; padding: clamp(20px, 2.4vw, 32px); border-radius: 28px; color: var(--tinte); background: linear-gradient(180deg, #fffdf9, var(--papier)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 120px -50px rgba(244, 165, 58, .45); scroll-margin-top: calc(var(--kopf-h) + 12px); }
.check-funnel__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.check-funnel__kopf .funnel__zaehler { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--bernstein-text); white-space: nowrap; }
.check-funnel .funnel__schritt { margin-top: 14px; }
fieldset.check-funnel__schritt { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.check-funnel__frage { display: block; padding: 0; font: italic 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); letter-spacing: -.005em; color: var(--tinte); }
.check-funnel__frage em { color: var(--bernstein-text); }
.check-funnel .felder { margin-top: 14px; }
.check-funnel .funnel__knoepfe { margin-top: 18px; }
fieldset.check-funnel__schritt { position: relative; }
fieldset.check-funnel__schritt > legend { float: left; width: 100%; margin-bottom: 4px; padding-right: 210px; }
fieldset.check-funnel__schritt > legend + * { clear: both; }
.check-funnel__unsicher { position: absolute; top: -4px; right: 0; min-height: 40px; padding-inline: 16px; font-size: 14.5px; color: var(--leise); }
.check-funnel__felder { display: grid; gap: 12px; margin-top: 14px; }
.check-funnel__zeile { display: flex; align-items: flex-end; gap: 10px; }
.check-funnel__zeile .feld { flex: 1; }
.check-funnel__zeile .knopf { flex: none; min-height: 52px; }

/* Vier Arten als 2 × 2, mit römischer Ziffer statt Symbolkachel */
.check-arten { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.check-art { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "nr name" "nr text"; column-gap: 12px; align-items: start; min-width: 0; padding: 13px 14px 13px 12px; border-radius: 18px; background: #fffdf9; box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: box-shadow .2s, background .25s, transform .25s var(--weich); }
.check-art input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check-art__nr { grid-area: nr; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); font: italic 400 16px/1 var(--serif); color: var(--bernstein-text); transition: background .25s, color .25s, box-shadow .25s; }
.check-art b { grid-area: name; font-size: 16px; line-height: 1.25; }
.check-art small { grid-area: text; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--leise); }
.check-art:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.check-art:has(input:checked) { background: linear-gradient(120deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, .05) 70%), #fffdf9; box-shadow: inset 0 0 0 2px var(--bernstein-tief), 0 16px 30px -22px rgba(138, 79, 0, .7); }
.check-art:has(input:checked) .check-art__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 1.5px var(--bernstein), 0 0 16px rgba(244, 165, 58, .45); }
.check-art:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }

/* Danke-Zustand */
.check-danke { margin-top: 6px; text-align: left; }
.check-danke:focus { outline: none; }
.check-danke__siegel { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 1.5px var(--bernstein), 0 0 30px rgba(244, 165, 58, .45); }
.funnel__danke .check-danke__siegel .symbol { width: 28px; height: 28px; margin: 0; color: var(--bernstein-licht); }
.check-danke > p { max-width: 34em; margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.check-danke a[href^="tel:"] { color: var(--tinte); font-weight: 600; }
.check-danke__weg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--tinte); counter-reset: d; }
.check-danke__weg li { counter-increment: d; padding: 14px 14px 0 0; }
.check-danke__weg li + li { padding-left: 14px; border-left: 1px solid var(--linie); }
.check-danke__weg li::before { content: counter(d, upper-roman); display: block; font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); }
.check-danke__weg li:first-child::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--bernstein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a130c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.check-danke__weg b { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.3; }
.check-danke__weg span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--leise); }
.check-danke__weiter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--leise); }
.bewegt .check-funnel.ist-gesendet .check-danke > * { animation: auftritt .8s var(--weich) both; }

/* ---------- Vorschau „Ihr Befund entsteht“ ---------- */
.check-vorschau { width: min(100%, 470px); }
.check-vorschau__blatt { position: relative; padding: 24px 28px 20px; border-radius: 6px; background: #fffdf9; color: var(--tinte); transform: rotate(1.4deg); box-shadow: 0 1px 0 rgba(60, 40, 20, .05), 0 60px 100px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .4); }
.check-vorschau__blatt::before, .check-vorschau__blatt::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; }
.check-vorschau__blatt::before { background: #efe6d8; transform: rotate(-4.5deg) translate(-12px, 8px); }
.check-vorschau__blatt::after { background: #f7f1e7; transform: rotate(3deg) translate(14px, 4px); }
.check-vorschau__kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #ece3d6; }
.check-vorschau__kopf img { width: auto; height: 26px; }
.check-vorschau__kopf span { padding: 4px 10px; border-radius: 999px; background: #fff1da; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bernstein-text); }
.check-vorschau__titel { margin-top: 16px; font: italic 400 clamp(26px, 2.2vw, 32px)/1.05 var(--serif); }
.check-vorschau__titel span { animation: auftritt .6s var(--weich) both; }
.check-vorschau__fuer { margin-top: 4px; font-size: 14px; color: var(--leise); overflow-wrap: anywhere; }
.check-vorschau__fuer b { color: var(--tinte); font-weight: 600; }
[data-spiegel].ist-leer { color: #9a8e80; font-weight: 400; }
.check-vorschau__fuer b:not(.ist-leer)::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--bernstein-tief); animation: check-cursor 1s steps(2, start) infinite; }
@keyframes check-cursor { to { visibility: hidden; } }
.check-vorschau__angaben { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.check-vorschau__angaben > span { display: inline-flex; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--creme); font-size: 12.5px; color: var(--leise); }
.check-vorschau__angaben b { overflow: hidden; color: var(--tinte); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.check-vorschau__bereiche { margin-top: 12px; }
.check-vorschau__bereiche li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #e9dfd1; overflow: hidden; }
.check-vorschau__bereiche li:last-child { border-bottom: 0; }
.check-vorschau__bereiche i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(138, 79, 0, .4); font: italic 400 13.5px/1 var(--serif); color: var(--bernstein-text); }
.check-vorschau__bereiche b { font-size: 14.5px; line-height: 1.3; }
.check-vorschau__bereiche span { font-size: 12px; color: #8b7f71; white-space: nowrap; }
.check-vorschau__bereiche li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244, 165, 58, 0), rgba(244, 165, 58, .16), rgba(244, 165, 58, 0)); transform: translateX(-100%); }
.bewegt .check-vorschau__bereiche li::after { animation: check-pruefen 5.5s var(--weich) infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes check-pruefen { 0% { transform: translateX(-100%); } 22%, 100% { transform: translateX(100%); } }
.bewegt .check-vorschau__bereiche:not([hidden]) li { animation: auftritt .55s var(--weich) both; animation-delay: calc(var(--i) * .07s); }
.check-vorschau__bereiche li.check-vorschau__hebel { margin-top: 6px; padding-inline: 10px; border-radius: 10px; background: #fff4e0; }
.check-vorschau__fuss { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ece3d6; font-size: 12.5px; color: var(--leise); }
.check-vorschau__fuss img { width: 36px; height: 36px; border-radius: 50%; }
.check-vorschau__fuss b { display: block; font: italic 400 20px/1 var(--serif); color: var(--tinte); }
.check-vorschau__satz { position: relative; margin: 30px 6px 0 18px; padding-left: 20px; }
.check-vorschau__satz::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(180deg, var(--bernstein), rgba(244, 165, 58, .2)); }
.check-vorschau__satz p { font: italic 400 clamp(20px, 1.6vw, 24px)/1.25 var(--serif); color: var(--hell); }
.check-vorschau__satz figcaption { margin-top: 8px; font-size: 13.5px; color: var(--hell-leise); }
.check-vorschau .live__hinweis { margin-top: 14px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .check-funnel { margin-top: 18px; }
  .check-vorschau__bereiche li { padding-block: 7px; }
  .check-vorschau__satz { margin-top: 22px; }
}
@media (max-width: 1099px) {
  .check-einstieg .einstieg__inhalt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "live" "vertrauen"; }
  .check-einstieg .live { justify-self: center; margin-top: 44px; }
}
@media (max-width: 760px) {
  .check-funnel { margin-top: 18px; margin-inline: -4px; border-radius: 22px; padding: 18px 16px 18px; }
  .check-funnel__kopf { gap: 12px; }
  .check-arten { gap: 8px; }
  .check-art { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "nr name" "text text"; column-gap: 8px; row-gap: 4px; align-items: center; padding: 11px 12px; }
  .check-art__nr { width: 28px; height: 28px; font-size: 14px; }
  .check-art b { font-size: 15px; }
  .check-art small { font-size: 12.5px; }
  .check-funnel .funnel__knoepfe { flex-direction: column-reverse; align-items: stretch; }
  .check-funnel .funnel__knoepfe .knopf { width: 100%; }
  .check-funnel .funnel__knoepfe .zurueck { align-self: center; }
  .check-danke__weg { grid-template-columns: minmax(0, 1fr); }
  .check-danke__weg li, .check-danke__weg li + li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .check-danke__weg li::before { grid-row: span 2; }
  .check-danke__weg b { margin-top: 0; }
  .check-einstieg .live { width: 100%; margin-top: 34px; }
  .check-vorschau__blatt { padding: 18px 18px 14px; transform: rotate(.8deg); }
  .check-vorschau__bereiche span { display: none; }
  .check-vorschau__satz { margin: 24px 0 0 6px; }
}
@media (max-width: 560px) {
  .check-funnel__unsicher { position: static; order: 9; width: 100%; margin-top: 12px; }
  fieldset.check-funnel__schritt { display: flex; flex-direction: column; }
  fieldset.check-funnel__schritt > legend { float: none; padding-right: 0; }
  .check-funnel__zeile { flex-direction: column; align-items: stretch; }
}

/* ---------- Wegweiser „Welche Analyse passt?“ (nur CSS) ---------- */
.check-lotse__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.check-lotse__text { position: sticky; top: calc(var(--kopf-h) + 32px); }
.check-lotse__text h2 { max-width: 9em; }
.check-lotse__text p { max-width: 24em; margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--leise); }
.check-lotse__karte { padding: clamp(22px, 3vw, 40px); border-radius: 30px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.check-lotse__frage { min-width: 0; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--linie); }
.check-lotse__frage + .check-lotse__frage { padding-top: 20px; }
.check-lotse__frage legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.check-lotse__nr { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); font: italic 400 16px/1 var(--serif); color: var(--bernstein-text); }
.check-lotse__antworten { clear: both; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-left: 46px; }
.check-lotse__antworten label { position: relative; }
.check-lotse__antworten input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check-lotse__antworten span { display: flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 15.5px; font-weight: 600; line-height: 1.25; transition: background .25s, box-shadow .25s, color .25s; }
.check-lotse__antworten label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.check-lotse__antworten input:checked + span { background: var(--tinte); color: var(--hell); box-shadow: none; }
.check-lotse__antworten input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
/* Fragen II und III erscheinen erst, wenn sie gebraucht werden */
.check-lotse__frage--2, .check-lotse__frage--3 { display: none; }
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked) .check-lotse__frage--2 { display: block; animation: auftritt .5s var(--weich) both; }
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked):has([name="lotse-anzeigen"][value="nein"]:checked) .check-lotse__frage--3 { display: block; animation: auftritt .5s var(--weich) both; }
.check-lotse__ergebnis { margin-top: 22px; }
.check-lotse__offen { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--leise); }
.check-lotse__offen::before { content: ""; width: 34px; height: 1.5px; background: var(--bernstein); }
.check-lotse__empfehlung { display: none; padding: 24px 26px; border-radius: 22px; background: radial-gradient(60% 140% at 100% 0%, rgba(244, 165, 58, .22), rgba(244, 165, 58, 0) 70%), var(--espresso); color: var(--hell); box-shadow: 0 30px 60px -40px rgba(60, 40, 20, .8); }
.check-lotse__klein { font-size: 13.5px; font-weight: 600; color: var(--bernstein-licht); }
.check-lotse__empfehlung h3 { margin-top: 6px; font: italic 400 clamp(28px, 2.6vw, 36px)/1.05 var(--serif); }
.check-lotse__empfehlung p:not(.check-lotse__klein) { margin-top: 8px; max-width: 32em; font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.check-lotse__empfehlung .knopf { margin-top: 16px; }
.check-lotse__karte:has([name="lotse-ziel"][value="leute"]:checked) .check-lotse__empfehlung--recruiting,
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked):has([name="lotse-anzeigen"][value="google"]:checked) .check-lotse__empfehlung--kampagne,
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked):has([name="lotse-anzeigen"][value="andere"]:checked) .check-lotse__empfehlung--kampagne,
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked):has([name="lotse-anzeigen"][value="nein"]:checked):has([name="lotse-sorge"][value="selten"]:checked) .check-lotse__empfehlung--sichtbarkeit,
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked):has([name="lotse-anzeigen"][value="nein"]:checked):has([name="lotse-sorge"][value="vorn"]:checked) .check-lotse__empfehlung--mitbewerber { display: block; animation: auftritt .6s var(--weich) both; }
.check-lotse__karte:has([name="lotse-ziel"][value="leute"]:checked) .check-lotse__offen,
.check-lotse__karte:has([name="lotse-anzeigen"][value="google"]:checked):has([name="lotse-ziel"][value="kunden"]:checked) .check-lotse__offen,
.check-lotse__karte:has([name="lotse-anzeigen"][value="andere"]:checked):has([name="lotse-ziel"][value="kunden"]:checked) .check-lotse__offen,
.check-lotse__karte:has([name="lotse-ziel"][value="kunden"]:checked):has([name="lotse-anzeigen"][value="nein"]:checked):has([name="lotse-sorge"]:checked) .check-lotse__offen { display: none; }
@media (max-width: 960px) {
  .check-lotse__raster { grid-template-columns: minmax(0, 1fr); }
  .check-lotse__text { position: static; }
}
@media (max-width: 560px) {
  .check-lotse__antworten { padding-left: 0; }
  .check-lotse__antworten label { flex: 1 1 100%; }
  .check-lotse__empfehlung { padding: 20px; }
  .check-lotse__empfehlung .knopf { width: 100%; }
}

/* ---------- Befund: vier Reiter, Zusagen als Sprungmarken ---------- */
.check-befund .befund__arten { flex-wrap: wrap; }
.check-zusagen a { display: block; height: 100%; border-radius: 6px; color: inherit; text-decoration: none; transition: color .25s; }
.check-zusagen a:hover b, .check-zusagen a:focus-visible b { color: var(--bernstein-licht); }
.check-zusagen a:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .check-befund .befund__arten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 22px; }
  .check-befund .befund__arten button { border-radius: 18px; }
}

/* ---------- Drei Wege nach dem Befund: Drehkarten ---------- */
.check-wege__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.check-weg { position: relative; display: grid; min-height: 250px; cursor: pointer; perspective: 1200px; }
.check-weg input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check-weg__vorn, .check-weg__hinten { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 28px 28px 26px; border-radius: 26px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .7s var(--weich), box-shadow .3s; }
.check-weg__vorn { background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.check-weg__vorn i { font: italic 400 64px/1 var(--serif); color: var(--bernstein-text); opacity: .85; }
.check-weg__vorn b { margin-top: auto; font: 600 24px/1.15 var(--grotesk); letter-spacing: -.015em; }
.check-weg__vorn small { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 15px; color: var(--leise); }
.check-weg__vorn small::after { content: ""; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); background: radial-gradient(circle, var(--bernstein-tief) 0 2.5px, transparent 3px); }
.check-weg__hinten { justify-content: flex-end; transform: rotateY(180deg); background: radial-gradient(80% 90% at 100% 0%, rgba(244, 165, 58, .26), rgba(244, 165, 58, 0) 70%), var(--espresso); color: var(--hell); box-shadow: 0 40px 70px -46px rgba(60, 40, 20, .9); }
.check-weg__hinten b { font: italic 400 30px/1.05 var(--serif); color: var(--bernstein-licht); }
.check-weg__hinten span { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--hell-leise); }
.check-weg:hover .check-weg__vorn { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.check-weg:has(input:checked) .check-weg__vorn { transform: rotateY(-180deg); }
.check-weg:has(input:checked) .check-weg__hinten { transform: rotateY(0); }
.check-weg:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 4px; border-radius: 26px; }
@media (prefers-reduced-motion: reduce) { .check-weg__vorn, .check-weg__hinten { transition: none; } }
@media (max-width: 900px) {
  .check-wege__wahl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .check-weg { min-height: 168px; }
  .check-weg__vorn, .check-weg__hinten { padding: 22px 22px 20px; }
  .check-weg__vorn i { font-size: 44px; }
  .check-weg__vorn b { font-size: 21px; }
}
.check-funnel.ist-gesendet .check-funnel__kopf { display: none; }

/* ---------- Papier-Bühne im Befund ----------
   Die Regeln für .papier-buehne stehen bisher nur in assets/css/start.css (nicht in ares.css). Ohne sie stapeln sich die
   Blätter auf Unterseiten nicht und das Blatt rutscht mobil über die Überschrift. Bis sie in grund.css wandern, hier für diese Seite. */
.check-befund .papier-buehne { position: relative; display: grid; place-items: center; padding: 34px 30px 40px; }
.check-befund .papier-buehne > .papier { grid-area: 1 / 1; }
.bewegt .check-befund .papier-buehne:not(.ist-da) .stempel { opacity: 0; transform: rotate(14deg) scale(1.5); }
.bewegt .check-befund .papier-buehne.ist-da .stempel { transition: opacity .25s 1.6s, transform .45s 1.6s cubic-bezier(.3, 1.4, .5, 1); }
@media (max-width: 1060px) { .check-befund .papier-buehne { order: 4; max-width: 620px; width: 100%; margin-top: 12px; justify-self: center; } }
@media (max-width: 760px) { .check-befund .papier-buehne { margin-top: 8px; padding: 22px 6px 26px; } }

/* Mobil: lange Wörter in den Arten trennen, Vorschau ohne Überstand */
.check-art b { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .check-vorschau__blatt { margin-inline: 8px; transform: none; }
  .check-vorschau__blatt::before { transform: rotate(-2.5deg) translate(-4px, 6px); }
  .check-vorschau__blatt::after { transform: rotate(1.8deg) translate(5px, 3px); }
}

/* Niedrige Bildschirme (1280 × 720, 1366 × 768): Schritt 1 samt „Weiter“ bleibt im ersten Bild */
@media (min-width: 1100px) and (max-height: 800px) {
  .check-einstieg .einstieg__aussage { font-size: clamp(30px, 3vw, 42px); }
  .check-einstieg .einstieg__lead { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .check-funnel { margin-top: 14px; padding-block: 18px; }
  .check-arten { margin-top: 10px; gap: 8px; }
  .check-art { grid-template-areas: "nr name"; align-items: center; padding-block: 10px; }
  .check-art small { display: none; }
  .check-funnel__felder { margin-top: 10px; }
}
@media (max-width: 380px) { .check-art b { font-size: 14px; } }

/* ==========================================================================
   Zusatz Firmenwebsite (firmenwebsite/index.html, Quelle _werkzeug/seiten/29-firmenwebsite.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix firmenwebsite-. Nur Tokens aus :root.
   Achtung: teile/zusatz/firmenwebsite.css (alter Rahmen) nutzt firmenwebsite-pruefliste, -pruefen, -vergleich*;
   diese Namen hier nicht verwenden.
   Enthält: Live-Szene „Fünf Sekunden, eine Minute, eine Anfrage“, Wegweiser mit Bildkarten, Prüfprotokoll mit Stempeln,
   Duell Baukasten oder Agentur, Technik-Wahl per Radio und :has(), BFSG-Selbsteinordnung per :has(), Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen aus ares.js.
   ========================================================================== */

.firmenwebsite-was [hidden], .firmenwebsite-duell [hidden], .firmenwebsite-protokoll [hidden] { display: none !important; }

/* ---------- Einstieg ---------- */
.firmenwebsite-einstieg .einstieg__aussage em { font-size: 1.18em; margin-top: 4px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .firmenwebsite-einstieg .einstieg__aussage { font-size: clamp(36px, min(4.3vw, 7.2svh), 60px); }
  .firmenwebsite-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) { .firmenwebsite-einstieg .einstieg__aussage { font-size: clamp(29px, 8.2vw, 38px); } }

/* ---------- Live-Szene: Handy links, Klarheit und Posteingang rechts, Uhr oben ---------- */
.firmenwebsite-sz__uhr { font-variant-numeric: tabular-nums; }
.firmenwebsite-sz__uhr svg { width: 12px; height: 12px; }
.firmenwebsite-sz__sek { font: 600 12.5px/1 var(--grotesk); color: var(--bernstein-licht); }
.firmenwebsite-sz__sek::after { content: counter(zahl, decimal-leading-zero); }
.ist-aktiv .firmenwebsite-sz__sek { animation-duration: 2.2s; animation-delay: 2.2s; animation-timing-function: linear; }
.firmenwebsite-sz__buehne { flex: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; min-height: 0; }
.firmenwebsite-sz__handy { align-self: start; padding: 7px; border-radius: 24px; background: linear-gradient(160deg, #4a3d31, #1a1511); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16), 0 24px 44px -20px rgba(0, 0, 0, .9); }
.firmenwebsite-sz__schirm { position: relative; height: 272px; overflow: hidden; padding: 14px 12px; border-radius: 18px; background: #f6efe6; color: var(--tinte); }
.firmenwebsite-sz__logo { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #e0d6c8; }
.firmenwebsite-sz__logo i { width: 46px; height: 10px; border-radius: 3px; background: #2a221b; }
.firmenwebsite-sz__logo span { width: 16px; height: 10px; border-top: 2px solid #8b7d6c; border-bottom: 2px solid #8b7d6c; }
.firmenwebsite-sz__titel { font: 600 17px/1.15 var(--grotesk); letter-spacing: -.02em; }
.firmenwebsite-sz__fuer { margin-top: 6px; font-size: 11.5px; color: #5d5449; }
.firmenwebsite-sz__knopf { display: inline-flex; align-items: center; height: 28px; margin-top: 14px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #1a130c; background: var(--bernstein); }
.firmenwebsite-sz__form { position: absolute; inset: auto 0 0; display: grid; gap: 7px; padding: 14px 12px 14px; border-radius: 16px 16px 0 0; background: #fffdf9; box-shadow: 0 -12px 24px -14px rgba(0, 0, 0, .35); transform: translateY(105%); }
.firmenwebsite-sz__form i { position: relative; height: 22px; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px #dccfbd; }
.firmenwebsite-sz__form i::after { content: ""; position: absolute; left: 8px; top: 8px; height: 6px; width: calc(40% + var(--n) * 12%); border-radius: 3px; background: #8b7d6c; transform: scaleX(0); transform-origin: left; }
.firmenwebsite-sz__form span { justify-self: start; display: inline-flex; align-items: center; height: 26px; padding: 0 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--hell); background: var(--tinte); }
.firmenwebsite-sz__seite { display: flex; flex-direction: column; min-width: 0; }
.firmenwebsite-sz__klar { display: grid; gap: 8px; }
.firmenwebsite-sz__klar li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 13px; color: #e1d5c5; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.firmenwebsite-sz__klar .symbol { width: 16px; height: 16px; color: var(--bernstein-licht); }
.firmenwebsite-sz__klar b { font-weight: 700; color: var(--bernstein-licht); }
.firmenwebsite-sz__klar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hell); font-weight: 600; }
.firmenwebsite-sz__fuenf { align-self: flex-start; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--bernstein-licht); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .32); }
.firmenwebsite-sz__post { margin-top: auto; padding: 12px; border-radius: 14px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.firmenwebsite-sz__postkopf { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(246, 239, 230, .1); font-size: 12px; color: #b5a796; }
.firmenwebsite-sz__postkopf .symbol { width: 14px; height: 14px; }
.firmenwebsite-sz__neu { padding: 9px 11px; border-radius: 10px; background: linear-gradient(90deg, rgba(244, 165, 58, .24), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.firmenwebsite-sz__neu b { display: block; overflow: hidden; font-size: 13px; color: var(--hell); white-space: nowrap; text-overflow: ellipsis; }
.firmenwebsite-sz__neu small { font-size: 11.5px; color: var(--bernstein-licht); }
.ist-aktiv .firmenwebsite-sz__handy { animation: auftritt .7s var(--weich) .2s both; }
.ist-aktiv .firmenwebsite-sz__klar li { animation: eingang .6s var(--weich) both; animation-delay: calc(.6s + var(--k) * .45s); }
.ist-aktiv .firmenwebsite-sz__fuenf { animation: punkt-auf .5s var(--weich) 2s both; }
.ist-aktiv .firmenwebsite-sz__knopf { animation: klick .5s ease 2.2s; }
.ist-aktiv .firmenwebsite-sz__form { animation: firmenwebsite-hoch .6s var(--weich) 2.5s both; }
.ist-aktiv .firmenwebsite-sz__form i::after { animation: firmenwebsite-fuellen .5s steps(6) both; animation-delay: calc(2.8s + var(--n) * .4s); }
.ist-aktiv .firmenwebsite-sz__form span { animation: klick .5s ease 4.3s; }
.ist-aktiv .firmenwebsite-sz__post { animation: auftritt .6s var(--weich) 3.6s both; }
.ist-aktiv .firmenwebsite-sz__neu { animation: eingang .7s var(--weich) 4.6s both; }
@keyframes firmenwebsite-hoch { to { transform: translateY(0); } }
@keyframes firmenwebsite-fuellen { to { transform: scaleX(1); } }
@media (min-width: 1100px) and (max-height: 800px) {
  .firmenwebsite-sz__schirm { height: 236px; }
  .firmenwebsite-sz__klar { gap: 6px; }
  .firmenwebsite-sz__klar li { padding-block: 7px; }
}
@media (max-width: 760px) {
  .firmenwebsite-sz__buehne { grid-template-columns: minmax(0, 1fr); }
  .firmenwebsite-sz__handy, .firmenwebsite-sz__fuenf, .firmenwebsite-sz__postkopf, .firmenwebsite-sz__neu small { display: none; }
  .firmenwebsite-sz__klar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .firmenwebsite-sz__klar li { grid-template-columns: 12px minmax(0, 1fr); gap: 4px 5px; padding: 4px 7px; border-radius: 9px; font-size: 11.5px; }
  .firmenwebsite-sz__klar .symbol { width: 12px; height: 12px; }
  .firmenwebsite-sz__klar span { grid-column: 1 / -1; font-size: 11.5px; }
  .firmenwebsite-sz__post { margin-top: 7px; padding: 0; background: none; box-shadow: none; }
  .firmenwebsite-sz__neu { padding: 5px 9px; }
  .firmenwebsite-sz__neu b { font-size: 12px; }
}

/* ---------- Wegweiser: drei Bildkarten zur Ausgangslage ---------- */
.firmenwebsite-was__frage { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 19px; font-weight: 700; color: var(--tinte); }
.firmenwebsite-was__frage span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font: italic 400 17px/1 var(--serif); color: var(--bernstein-licht); background: var(--espresso); }
.firmenwebsite-was__frage--klein { margin: 26px 0 12px; font-size: 17px; }
.firmenwebsite-was__frage--klein span { width: 32px; height: 32px; font-size: 15px; }
.firmenwebsite-was__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.firmenwebsite-was__karte { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 96px; padding: 14px 18px 14px 14px; border: 0; border-radius: 20px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: 600 16px/1.3 var(--grotesk); text-align: left; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--weich); }
.firmenwebsite-was__karte:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.firmenwebsite-was__karte:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.firmenwebsite-was__karte[aria-selected="true"] { color: var(--hell); background: linear-gradient(165deg, #2e261f, #17130f); box-shadow: 0 0 0 1px var(--bernstein), 0 22px 44px -22px rgba(244, 165, 58, .55); }
.firmenwebsite-was__bild { position: relative; display: grid; align-content: start; gap: 5px; height: 64px; padding: 9px 9px 0; overflow: hidden; border-radius: 10px; background: #fffdf9; box-shadow: inset 0 0 0 1px #dccfbd; }
.firmenwebsite-was__bild i { display: block; height: 7px; border-radius: 3px; background: #ddd1c1; }
.firmenwebsite-was__bild--leer { place-content: center; justify-items: center; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .6; }
.firmenwebsite-was__bild--leer i { width: 22px; height: 22px; border-radius: 0; background: none; }
.firmenwebsite-was__bild--leer i::before, .firmenwebsite-was__bild--leer i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.firmenwebsite-was__bild--leer i::after { transform: translate(-50%, -50%) rotate(90deg); }
.firmenwebsite-was__bild--alt { background: #e8e1d6; filter: grayscale(1); }
.firmenwebsite-was__bild--alt i:nth-child(1) { width: 92%; height: 14px; background: #a39a8f; }
.firmenwebsite-was__bild--alt i:nth-child(2) { width: 60%; }
.firmenwebsite-was__bild--alt i:nth-child(3) { width: 80%; }
.firmenwebsite-was__bild--alt::after { content: ""; position: absolute; right: 10px; top: 0; width: 2px; height: 120%; background: #8b7d6c; transform: rotate(24deg); }
.firmenwebsite-was__bild--ok i:nth-child(1) { width: 86%; height: 10px; background: var(--tinte); }
.firmenwebsite-was__bild--ok i:nth-child(2) { width: 64%; }
.firmenwebsite-was__bild--ok i:nth-child(3) { width: 46%; height: 12px; border-radius: 999px; background: var(--bernstein); }
.firmenwebsite-was__feld { margin-top: 10px; animation: auftritt .45s var(--weich) both; }
.firmenwebsite-was__ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; padding: 22px 24px; border-radius: 20px; background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); animation: auftritt .45s var(--weich) both; }
.firmenwebsite-was__ergebnis p { flex: 1 1 320px; font-size: 16px; line-height: 1.55; color: var(--leise); }
.firmenwebsite-was__ergebnis p b { display: block; margin-bottom: 4px; font: italic 400 clamp(23px, 2vw, 27px)/1.2 var(--serif); color: var(--tinte); }
@media (max-width: 860px) { .firmenwebsite-was__wahl { grid-template-columns: minmax(0, 1fr); } .firmenwebsite-was__karte { min-height: 80px; } .firmenwebsite-was__bild { height: 52px; } }
@media (max-width: 560px) { .firmenwebsite-was__ergebnis { padding: 18px; } .firmenwebsite-was__ergebnis .knopf { width: 100%; } }

/* ---------- Prüfprotokoll: zwölf Zeilen mit Stempel, Stand rechts ---------- */
.firmenwebsite-protokoll { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.firmenwebsite-protokoll__punkte { position: relative; padding: clamp(14px, 2vw, 26px) clamp(16px, 2.4vw, 34px); border-radius: 8px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 0 60px 110px -60px rgba(60, 40, 20, .6); counter-reset: firmenwebsite-p; }
.firmenwebsite-protokoll__punkte::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein), rgba(244, 165, 58, 0)); }
.firmenwebsite-protokoll__punkte li { counter-increment: firmenwebsite-p; border-bottom: 1px dashed #d8ccbb; }
.firmenwebsite-protokoll__punkte li:last-child { border-bottom: 0; }
.firmenwebsite-protokoll__punkte label { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 92px; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; transition: background .25s; }
.firmenwebsite-protokoll__punkte label::before { content: counter(firmenwebsite-p, decimal-leading-zero); align-self: start; padding-top: 2px; font: italic 400 26px/1 var(--serif); color: var(--bernstein-text); }
.firmenwebsite-protokoll__punkte input { position: absolute; opacity: 0; pointer-events: none; }
.firmenwebsite-protokoll__punkte label:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.firmenwebsite-protokoll__punkte label:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .06), rgba(244, 165, 58, 0) 80%); }
.firmenwebsite-protokoll__inhalt { display: grid; gap: 6px; min-width: 0; }
.firmenwebsite-protokoll__inhalt b { font-size: 18px; line-height: 1.3; }
.firmenwebsite-protokoll__inhalt > span { font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.firmenwebsite-protokoll__inhalt small { margin-top: 4px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--tinte); background: var(--creme); }
.firmenwebsite-protokoll__inhalt small em { font-style: normal; font-weight: 700; color: var(--bernstein-text); }
.firmenwebsite-protokoll__stempel { justify-self: center; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; font: 700 12px/1.1 var(--grotesk); letter-spacing: .04em; text-align: center; color: var(--leise); box-shadow: inset 0 0 0 1.5px var(--linie); background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0 30px, rgba(224, 214, 200, .6) 30px 31px); transition: transform .35s var(--weich), color .3s, box-shadow .3s, background .3s; }
.firmenwebsite-protokoll__stempel::before { content: "prüfen"; }
.firmenwebsite-protokoll__punkte label:hover .firmenwebsite-protokoll__stempel { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); color: var(--bernstein-text); }
.firmenwebsite-protokoll__punkte label:has(input:checked) .firmenwebsite-protokoll__stempel { color: var(--bernstein-text); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 3px var(--bernstein-tief), inset 0 0 0 7px rgba(244, 165, 58, .12), inset 0 0 0 8px var(--bernstein-tief); transform: rotate(-12deg) scale(1.04); font: italic 400 21px/1 var(--serif); letter-spacing: 0; }
.firmenwebsite-protokoll__punkte label:has(input:checked) .firmenwebsite-protokoll__stempel::before { content: "erfüllt"; }
.firmenwebsite-protokoll__punkte label:has(input:checked) .firmenwebsite-protokoll__inhalt b { color: var(--leise); }
.firmenwebsite-protokoll__stand { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 14px; padding: clamp(24px, 2.6vw, 34px); border-radius: 26px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.firmenwebsite-protokoll__titel { padding-bottom: 12px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 26px/1.1 var(--serif); }
.firmenwebsite-protokoll__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--hell-leise); }
.firmenwebsite-protokoll__zahl b { font: italic 400 72px/.9 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.firmenwebsite-protokoll__raster { height: 14px; background: linear-gradient(90deg, var(--bernstein) calc(var(--anteil, 0) * 100%), rgba(246, 239, 230, .14) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 12 - 4px), transparent calc(100% / 12 - 4px) calc(100% / 12)); mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 12 - 4px), transparent calc(100% / 12 - 4px) calc(100% / 12)); }
.firmenwebsite-protokoll__raster i { display: none; }
.firmenwebsite-protokoll__stand > p:not(.firmenwebsite-protokoll__titel):not(.firmenwebsite-protokoll__zahl) { font-size: 15.5px; line-height: 1.55; color: #e1d5c5; }
.firmenwebsite-protokoll__stand p b { color: var(--hell); }
.firmenwebsite-protokoll__stand .knopf { justify-self: start; }
.firmenwebsite-protokoll__stand .firmenwebsite-protokoll__quelle { padding-top: 12px; border-top: 1px solid var(--linie-dunkel); font-size: 12.5px !important; color: var(--hell-leise) !important; }
@media (max-width: 960px) {
  .firmenwebsite-protokoll { grid-template-columns: minmax(0, 1fr); }
  .firmenwebsite-protokoll__stand { position: static; }
}
@media (max-width: 560px) {
  .firmenwebsite-protokoll__punkte { padding: 6px 14px; }
  .firmenwebsite-protokoll__punkte label { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 12px; padding: 18px 0; }
  .firmenwebsite-protokoll__punkte label::before { font-size: 22px; }
  .firmenwebsite-protokoll__stempel { grid-column: 2; justify-self: start; width: auto; height: 34px; padding: 0 14px; border-radius: 999px; background: none; }
  .firmenwebsite-protokoll__punkte label:has(input:checked) .firmenwebsite-protokoll__stempel { transform: rotate(-3deg); font-size: 18px; box-shadow: inset 0 0 0 2px var(--bernstein-tief); }
  .firmenwebsite-protokoll__inhalt b { font-size: 16.5px; }
  .firmenwebsite-protokoll__stand { padding: 18px; border-radius: 20px; gap: 10px; }
  .firmenwebsite-protokoll__zahl b { font-size: 52px; }
  .firmenwebsite-protokoll__stand .knopf { width: 100%; }
}

/* ---------- Duell: Baukasten oder Agentur, Kriterium wählen ---------- */
.firmenwebsite-duell { padding: clamp(24px, 3.4vw, 48px); border-radius: 30px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.firmenwebsite-duell__wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.firmenwebsite-duell__wahl [role="tab"] { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: 600 15.5px var(--grotesk); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.firmenwebsite-duell__wahl [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.firmenwebsite-duell__wahl [role="tab"]:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.firmenwebsite-duell__wahl [role="tab"][aria-selected="true"] { background: var(--tinte); color: var(--hell); box-shadow: none; }
.firmenwebsite-duell__kopf { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); align-items: center; margin-top: 30px; padding-bottom: 12px; border-bottom: 1px solid var(--tinte); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--leise); }
.firmenwebsite-duell__kopf i { font: italic 400 22px/1 var(--serif); text-align: center; color: var(--bernstein-text); }
.firmenwebsite-duell__kopf span:last-child { text-align: right; color: var(--bernstein-text); }
.firmenwebsite-duell__feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; margin-top: 22px; animation: auftritt .45s var(--weich) both; }
.firmenwebsite-duell__feld p { display: grid; align-content: center; gap: 8px; min-height: 150px; padding: 26px 28px; border-radius: 22px; font: italic 400 clamp(23px, 2.2vw, 31px)/1.2 var(--serif); color: var(--tinte); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.firmenwebsite-duell__feld p small { font: 700 13px/1.2 var(--grotesk); letter-spacing: .02em; color: var(--leise); }
.firmenwebsite-duell__feld .firmenwebsite-duell__wir { color: var(--hell); background: radial-gradient(70% 80% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), var(--espresso); box-shadow: 0 0 0 1px var(--bernstein), 0 30px 60px -36px rgba(244, 165, 58, .55); }
.firmenwebsite-duell__feld .firmenwebsite-duell__wir small { color: var(--bernstein-licht); }
.firmenwebsite-duell__fazit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linie); }
.firmenwebsite-duell__fazit p { font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.firmenwebsite-duell__fazit b { color: var(--tinte); }
.firmenwebsite-duell__fazit .firmenwebsite-duell__wir b { color: var(--bernstein-text); }
.firmenwebsite-duell__mittelweg { margin-top: 22px; padding: 16px 20px; border-radius: 16px; font-size: 15.5px; line-height: 1.55; color: var(--leise); background: var(--papier); box-shadow: inset 3px 0 0 var(--bernstein); }
.firmenwebsite-duell__mittelweg b { color: var(--tinte); }
@media (max-width: 760px) {
  .firmenwebsite-duell { padding: 22px 16px; border-radius: 22px; }
  .firmenwebsite-duell__wahl { justify-content: flex-start; }
  .firmenwebsite-duell__wahl [role="tab"] { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
  .firmenwebsite-duell__kopf { display: none; }
  .firmenwebsite-duell__feld, .firmenwebsite-duell__fazit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .firmenwebsite-duell__feld p { min-height: 0; padding: 20px; font-size: 22px; }
}

/* ---------- Technik: zwei Fragen (Radio), passende Lösung leuchtet per :has() ---------- */
.firmenwebsite-technik { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.firmenwebsite-technik__fragen { display: grid; gap: 22px; }
.firmenwebsite-technik fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.firmenwebsite-technik legend { margin-bottom: 12px; font-size: 18px; font-weight: 700; color: var(--tinte); }
.firmenwebsite-technik label { position: relative; display: block; margin-top: 8px; cursor: pointer; }
.firmenwebsite-technik label input { position: absolute; opacity: 0; pointer-events: none; }
.firmenwebsite-technik label span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; border-radius: 16px; font-size: 16px; font-weight: 600; line-height: 1.3; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.firmenwebsite-technik label span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .5); transition: box-shadow .25s, background .25s; }
.firmenwebsite-technik label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.firmenwebsite-technik label:has(input:focus-visible) span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.firmenwebsite-technik label:has(input:checked) span { color: var(--hell); background: var(--tinte); box-shadow: none; }
.firmenwebsite-technik label:has(input:checked) span::before { background: var(--bernstein); box-shadow: inset 0 0 0 4px var(--tinte), 0 0 0 1.5px var(--bernstein); }
.firmenwebsite-technik__hinweis { font-size: 14px; color: var(--leise); }
.firmenwebsite-technik__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.firmenwebsite-technik__weg { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 26px 24px; border-radius: 26px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); transition: opacity .35s, transform .35s var(--weich), box-shadow .35s, background .35s, color .35s; }
.firmenwebsite-technik__buchstabe { font: italic 400 54px/.9 var(--serif); color: var(--bernstein-text); }
.firmenwebsite-technik__weg h3 { font-size: clamp(21px, 1.8vw, 25px); }
.firmenwebsite-technik__weg > p:not([class]) { font-size: 16px; line-height: 1.55; color: var(--leise); }
.firmenwebsite-technik__weg dl { margin-top: 4px; border-top: 1px solid var(--tinte); }
.firmenwebsite-technik__weg dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.firmenwebsite-technik__weg dt { font: italic 400 18px/1.3 var(--serif); color: var(--bernstein-text); }
.firmenwebsite-technik__weg dd { font-size: 15px; font-weight: 600; line-height: 1.4; }
.firmenwebsite-technik__passt { display: none; justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1a130c; background: var(--bernstein); }
/* B (WordPress): oft ändern oder Ihr Team. A (statisch): selten und ARES. */
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--b,
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--b,
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--a { color: var(--hell); background: radial-gradient(70% 60% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), var(--espresso); box-shadow: 0 0 0 1px var(--bernstein), 0 40px 80px -40px rgba(244, 165, 58, .5); transform: translateY(-6px); }
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--b .firmenwebsite-technik__passt,
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--b .firmenwebsite-technik__passt,
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--a .firmenwebsite-technik__passt { display: inline-flex; }
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--b :is(.firmenwebsite-technik__buchstabe, dt),
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--b :is(.firmenwebsite-technik__buchstabe, dt),
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--a :is(.firmenwebsite-technik__buchstabe, dt) { color: var(--bernstein-licht); }
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--b > p:not([class]),
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--b > p:not([class]),
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--a > p:not([class]) { color: var(--hell-leise); }
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--b dl,
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--b dl,
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--a dl { border-top-color: rgba(244, 165, 58, .5); }
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--b dl > div,
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--b dl > div,
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--a dl > div { border-bottom-color: var(--linie-dunkel); }
.firmenwebsite-technik:has(input[value="oft"]:checked) .firmenwebsite-technik__weg--a,
.firmenwebsite-technik:has(input[value="team"]:checked) .firmenwebsite-technik__weg--a,
.firmenwebsite-technik:has(input[value="selten"]:checked):has(input[value="ares"]:checked) .firmenwebsite-technik__weg--b { opacity: .55; }
@media (max-width: 960px) { .firmenwebsite-technik { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .firmenwebsite-technik__wege { grid-template-columns: minmax(0, 1fr); }
  .firmenwebsite-technik__weg { padding: 22px 18px; border-radius: 22px; }
}

/* Diese Website ist selbst ein Beispiel, Fragen vor dem Bau */
.firmenwebsite-beispiel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(40px, 4.4vw, 64px); border-top: 1px solid var(--linie); }
.firmenwebsite-beispiel__text h3 { font: 600 clamp(26px, 2.6vw, 36px)/1.12 var(--grotesk); letter-spacing: -.02em; }
.firmenwebsite-beispiel__text h3 em { font: italic 400 1.12em/1 var(--serif); color: var(--bernstein-text); }
.firmenwebsite-beispiel__text p { max-width: 32em; margin-top: 14px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.firmenwebsite-beispiel__fragen { padding: clamp(24px, 3vw, 36px); border-radius: 26px; color: var(--hell); background: var(--espresso); box-shadow: inset 3px 0 0 var(--bernstein), 0 40px 80px -56px rgba(60, 40, 20, .7); counter-reset: firmenwebsite-f; }
.firmenwebsite-beispiel__titel { padding-bottom: 12px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 25px/1.15 var(--serif); color: var(--bernstein-licht); }
.firmenwebsite-beispiel__fragen li { counter-increment: firmenwebsite-f; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 15.5px; line-height: 1.5; color: #e1d5c5; }
.firmenwebsite-beispiel__fragen li:last-child { border-bottom: 0; padding-bottom: 0; }
.firmenwebsite-beispiel__fragen li::before { content: counter(firmenwebsite-f, upper-roman); font: italic 400 18px/1.3 var(--serif); color: var(--bernstein-licht); }
@media (max-width: 860px) { .firmenwebsite-beispiel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- BFSG: Einordnung links, Selbsteinordnung als Karte rechts (dunkles Band) ---------- */
.firmenwebsite-bfsg { overflow-x: clip; background: radial-gradient(50% 70% at 90% 30%, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 70%), var(--espresso); }
.firmenwebsite-bfsg__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(36px, 6vw, 96px); align-items: center; }
.firmenwebsite-bfsg__text h2 { max-width: 12em; }
.firmenwebsite-bfsg__text p { max-width: 34em; margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--hell-leise); }
.firmenwebsite-bfsg__text strong { color: var(--hell); }
.firmenwebsite-bfsg__text .firmenwebsite-bfsg__quelle { padding-top: 14px; border-top: 1px solid var(--linie-dunkel); font-size: 13.5px; }
.firmenwebsite-bfsg__test { padding: clamp(24px, 3vw, 36px); border-radius: 26px; color: var(--tinte); background: var(--papier); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9); }
.firmenwebsite-bfsg__titel { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--tinte); }
.firmenwebsite-bfsg__titel b { font: 600 clamp(22px, 2vw, 27px)/1.2 var(--grotesk); letter-spacing: -.015em; }
.firmenwebsite-bfsg__titel em { font-family: var(--serif); font-weight: 400; color: var(--bernstein-text); }
.firmenwebsite-bfsg__titel span { font-size: 14px; color: var(--leise); }
.firmenwebsite-bfsg__frage { min-width: 0; margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--linie); }
.firmenwebsite-bfsg__frage legend { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; float: left; width: 100%; font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.firmenwebsite-bfsg__frage legend span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: italic 400 16px/1 var(--serif); color: var(--bernstein-licht); background: var(--espresso); }
.firmenwebsite-bfsg__erklaerung { clear: both; padding: 6px 0 0 44px; font-size: 14.5px; color: var(--leise); }
.firmenwebsite-bfsg__antworten { display: flex; gap: 8px; padding: 12px 0 0 44px; }
.firmenwebsite-bfsg__antworten label { position: relative; cursor: pointer; }
.firmenwebsite-bfsg__antworten input { position: absolute; opacity: 0; pointer-events: none; }
.firmenwebsite-bfsg__antworten span { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 700; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.firmenwebsite-bfsg__antworten label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.firmenwebsite-bfsg__antworten label:has(input:focus-visible) span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.firmenwebsite-bfsg__antworten label:has(input:checked) span { color: var(--hell); background: var(--tinte); box-shadow: none; }
.firmenwebsite-bfsg__ergebnis { display: grid; gap: 10px; margin-top: 18px; }
.firmenwebsite-bfsg__ergebnis > p:not(.firmenwebsite-bfsg__recht) { padding: 16px 18px; border-radius: 16px; font-size: 15.5px; line-height: 1.5; color: var(--leise); background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); }
.firmenwebsite-bfsg__ergebnis b { display: block; margin-bottom: 2px; font: italic 400 22px/1.2 var(--serif); color: var(--tinte); }
.firmenwebsite-bfsg__ja, .firmenwebsite-bfsg__nein { display: none; }
.firmenwebsite-bfsg__ja { box-shadow: inset 3px 0 0 #962c13 !important; }
.firmenwebsite-bfsg__test:has([name="fw-bfsg-1"]:checked):has([name="fw-bfsg-2"]:checked) .firmenwebsite-bfsg__offen { display: none; }
.firmenwebsite-bfsg__test:has([name="fw-bfsg-1"][value="ja"]:checked):has([name="fw-bfsg-2"][value="ja"]:checked) .firmenwebsite-bfsg__ja { display: block; }
.firmenwebsite-bfsg__test:has([name="fw-bfsg-1"]:checked):has([name="fw-bfsg-2"]:checked):has([value="nein"]:checked) .firmenwebsite-bfsg__nein { display: block; }
.firmenwebsite-bfsg__offen { font-style: italic; }
.firmenwebsite-bfsg__recht { font-size: 13.5px; line-height: 1.5; color: var(--leise); }
@media (max-width: 960px) { .firmenwebsite-bfsg__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .firmenwebsite-bfsg__test { padding: 22px 16px; border-radius: 22px; }
  .firmenwebsite-bfsg__erklaerung, .firmenwebsite-bfsg__antworten { padding-left: 0; }
  .firmenwebsite-bfsg__antworten label { flex: 1; }
  .firmenwebsite-bfsg__antworten span { width: 100%; }
}

/* ---------- Preislogik (ohne Preise) ---------- */
.firmenwebsite-preis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.firmenwebsite-preis__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.firmenwebsite-preis__text > p { max-width: 32em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.firmenwebsite-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: firmenwebsite-pw; }
.firmenwebsite-preis__weg li { counter-increment: firmenwebsite-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.firmenwebsite-preis__weg li::before { content: counter(firmenwebsite-pw, upper-roman); grid-row: span 2; font: italic 400 27px/1.1 var(--serif); color: var(--bernstein-text); }
.firmenwebsite-preis__weg b { font-size: 18px; }
.firmenwebsite-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.firmenwebsite-preis__ohne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; font-size: 15.5px; color: var(--leise); }
.firmenwebsite-preis__faktoren { position: relative; overflow: hidden; padding: clamp(28px, 3.2vw, 46px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.firmenwebsite-preis__titel { padding-bottom: 18px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(28px, 2.4vw, 36px)/1.1 var(--serif); }
.firmenwebsite-preis__titel em { color: var(--bernstein-licht); }
.firmenwebsite-preis__faktoren li { position: relative; display: grid; gap: 4px; padding: 18px 0 18px 24px; border-bottom: 1px solid var(--linie-dunkel); }
.firmenwebsite-preis__faktoren li:last-child { border-bottom: 0; padding-bottom: 0; }
.firmenwebsite-preis__faktoren li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
.firmenwebsite-preis__faktoren b { font-size: 18px; color: var(--hell); }
.firmenwebsite-preis__faktoren span { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) { .firmenwebsite-preis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .firmenwebsite-preis__faktoren { border-radius: 22px; padding: 24px 20px; } .firmenwebsite-preis__ohne .knopf { width: 100%; } }

/* ==========================================================================
   Zusatz GEO-Agentur (geo-agentur/index.html, Quelle _werkzeug/seiten/21-geo.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix geo-. Nur Tokens aus :root (plus Ampelfarben aus grund.css).
   Enthält: Live-Szenen „Fragenkatalog“ und „Zugang für KI-Crawler“, Assistenten-Reiter, Zugangs-Check,
   Selbsttest mit fünf Fragen (Alleinstellung), Schalter „kann / nicht tun“, Wegweiser „Wo fangen Sie an?“, Preislogik.
   Skripte: keine eigenen, nur data-reiter und data-zaehlen aus ares.js, sonst :has(input:checked).
   ========================================================================== */

/* ---------- Einstieg: Szene „Fragenkatalog“ (Raster füllt sich Spalte für Spalte) ---------- */
.geo-sz-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 12px 6px; }
.geo-sz-raster > b { font-size: 12px; font-weight: 600; color: #b5a796; text-align: center; letter-spacing: .01em; padding-bottom: 4px; border-bottom: 1px solid rgba(246, 239, 230, .1); }
.geo-sz-ecke { align-self: stretch; border-bottom: 1px solid rgba(246, 239, 230, .1); }
.geo-sz-frage { font-size: 13.5px; font-weight: 600; color: #e9dfd2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-sz-zelle { justify-self: center; display: block; width: 100%; max-width: 56px; height: 42px; border-radius: 10px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); position: relative; }
.geo-sz-zelle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(205, 191, 174, .45); }
.geo-sz-zelle.geo-sz-ja { background: linear-gradient(160deg, rgba(244, 165, 58, .32), rgba(244, 165, 58, .1)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .6), 0 10px 24px -14px rgba(244, 165, 58, .8); }
.geo-sz-zelle.geo-sz-ja::after { background: var(--bernstein-licht); box-shadow: 0 0 12px rgba(244, 165, 58, .8); }
.geo-sz-antwort { position: absolute; left: 29%; top: 70px; z-index: 2; display: grid; gap: 4px; max-width: 250px; padding: 10px 14px; border-radius: 4px 14px 14px 14px; font-size: 13.5px; line-height: 1.4; color: #efe5d8; background: #2b231c; box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .45), 0 20px 40px -16px rgba(0, 0, 0, .9); opacity: 0; }
.geo-sz-antwort mark { padding: 0 6px; border-radius: 6px; font-weight: 700; color: #ffd796; background: rgba(244, 165, 58, .26); }
.geo-sz-antwort small { font-size: 11.5px; color: #b5a796; }
.geo-sz-summe { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(246, 239, 230, .1); font-size: 13px; color: #b5a796; }
.geo-sz-summe b { font: italic 400 30px/1 var(--serif); color: var(--bernstein-licht); }
/* Takte: Zeilen erscheinen, Spalten färben sich nacheinander, dann Mini-Antwort und Summe */
.ist-aktiv .geo-sz-frage { animation: aufbau .6s var(--weich) both; animation-delay: calc(.3s + var(--z) * .18s); }
.ist-aktiv .geo-sz-raster > b { animation: geo-spalte 1.1s ease both; animation-delay: calc(1.3s + var(--s) * .7s); }
.ist-aktiv .geo-sz-zelle { animation: aufbau .5s var(--weich) both; animation-delay: calc(.3s + var(--z) * .18s); }
.ist-aktiv .geo-sz-zelle.geo-sz-ja { animation: aufbau .5s var(--weich) both, geo-genannt .6s var(--weich) both; animation-delay: calc(.3s + var(--z) * .18s), calc(1.4s + var(--s) * .7s + var(--z) * .1s); }
.ist-aktiv .geo-sz-zelle::after { animation: einblenden .4s ease both; animation-delay: calc(1.4s + var(--s) * .7s + var(--z) * .1s); }
.ist-aktiv .geo-sz-antwort { animation: geo-blase 3.2s var(--weich) 4.4s both; }
.ist-aktiv .geo-sz-summe { animation: auftritt .7s var(--weich) 4.6s both; }
@keyframes geo-spalte { 30% { color: var(--bernstein-licht); border-bottom-color: var(--bernstein); } }
@keyframes geo-genannt { from { background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); } }
@keyframes geo-blase { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

/* ---------- Einstieg: Szene „Zugang für KI-Crawler“ ---------- */
.geo-sz-bots { display: grid; gap: 10px; }
.geo-sz-bots li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bot status" "wer status"; align-items: center; column-gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.geo-sz-bots code { grid-area: bot; font: 600 14.5px/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--hell); }
.geo-sz-bots small { grid-area: wer; font-size: 12.5px; color: #b5a796; }
.geo-sz-status { grid-area: status; position: relative; display: grid; min-width: 86px; }
.geo-sz-status i { grid-area: 1 / 1; padding: 5px 12px; border-radius: 999px; font: normal 700 12px/1.2 var(--grotesk); text-align: center; color: #1a130c; background: var(--bernstein-licht); }
.geo-sz-wechsel .geo-sz-status i:first-child { color: #cdbfae; background: repeating-linear-gradient(135deg, rgba(205, 191, 174, .26) 0 4px, rgba(205, 191, 174, .1) 4px 8px); box-shadow: inset 0 0 0 1px rgba(205, 191, 174, .35); }
.geo-sz-wechsel .geo-sz-status i:last-child { opacity: 0; }
.ist-aktiv .geo-sz-bots li { animation: eingang .7s var(--weich) both; animation-delay: calc(.3s + var(--i) * .35s); }
.ist-aktiv .geo-sz-wechsel .geo-sz-status i:first-child { animation: geo-weg .5s ease 2.6s both; }
.ist-aktiv .geo-sz-wechsel .geo-sz-status i:last-child { animation: geo-auf .6s cubic-bezier(.3, 1.6, .5, 1) 2.8s both; }
.ist-aktiv .geo-sz-wechsel:last-child .geo-sz-status i:first-child { animation-delay: 3.4s; }
.ist-aktiv .geo-sz-wechsel:last-child .geo-sz-status i:last-child { animation-delay: 3.6s; }
.ist-aktiv .geo-sz-wechsel { animation: eingang .7s var(--weich) both, geo-zeile 1.2s ease both; animation-delay: calc(.3s + var(--i) * .35s), 2.7s; }
@keyframes geo-weg { to { opacity: 0; transform: scale(.85); } }
@keyframes geo-auf { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes geo-zeile { 40% { box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .6), 0 14px 34px -18px rgba(244, 165, 58, .7); } }

/* Niedrige Desktop-Höhe (Glas 380 px) */
@media (min-width: 1100px) and (max-height: 800px) {
  .geo-sz-raster { gap: 8px 6px; }
  .geo-sz-zelle { height: 34px; }
  .geo-sz-bots { gap: 8px; }
  .geo-sz-bots li { padding-block: 8px; }
}
/* Handy: Glas 166 px, nur Raster ohne Antwort und Summe */
@media (max-width: 760px) {
  .geo-sz-raster { gap: 4px 5px; }
  .geo-sz-raster > b { font-size: 10.5px; padding-bottom: 2px; }
  .geo-sz-frage { font-size: 11.5px; }
  .geo-sz-zelle { height: 17px; border-radius: 6px; }
  .geo-sz-zelle::after { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .geo-sz-raster > :nth-child(n+21), .geo-sz-antwort, .geo-sz-summe { display: none; }
  .geo-sz-bots { gap: 5px; }
  .geo-sz-bots li { padding: 4px 10px; border-radius: 10px; grid-template-areas: "bot status"; }
  .geo-sz-bots li:nth-child(n+4), .geo-sz-bots small { display: none; }
  .geo-sz-bots code { font-size: 12.5px; }
  .geo-sz-status { min-width: 70px; }
  .geo-sz-status i { padding: 3px 8px; font-size: 11px; }
}

/* ---------- Einstieg: kurze Aussage mit nachgestelltem Akzent ---------- */
.geo-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.24em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) {
  .geo-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .geo-einstieg .einstieg__lead { font-size: 15.5px; line-height: 1.45; }
}

/* ---------- Assistenten: Reiter links, Karte rechts ---------- */
.geo-quellen__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 64px); align-items: stretch; }
.geo-quellen__wahl { display: grid; gap: 12px; align-content: center; }
.geo-quellen__ass { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; padding: 14px 18px 14px 14px; border: 0; border-radius: 20px; background: var(--papier); color: var(--tinte); font-family: var(--grotesk); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .25s, transform .35s var(--weich), background .25s; }
.geo-quellen__ass:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.geo-quellen__marke { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font: italic 400 28px/1 var(--serif); color: var(--bernstein-text); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s; }
.geo-quellen__name { display: grid; gap: 2px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.geo-quellen__name small { font-size: 13.5px; font-weight: 400; color: var(--leise); }
.geo-quellen__ass[aria-selected="true"] { background: var(--espresso); color: var(--hell); transform: translateX(10px); box-shadow: 0 30px 60px -36px rgba(40, 25, 10, .9); }
.geo-quellen__ass[aria-selected="true"] .geo-quellen__marke { background: var(--bernstein); color: #1a130c; box-shadow: none; }
.geo-quellen__ass[aria-selected="true"] small { color: var(--hell-leise); }
.geo-quellen__felder { min-width: 0; }
.geo-quellen__feld { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; padding: clamp(28px, 3.4vw, 48px); overflow: hidden; border-radius: 30px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); animation: auftritt .5s var(--weich) both; }
.geo-quellen__feld[hidden] { display: none; }
.geo-quellen__feld::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%); pointer-events: none; }
.geo-quellen__feld h3 { font: italic 400 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.01em; }
.geo-quellen__feld > p { max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--leise); }
.geo-quellen__dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; border-top: 1px solid var(--tinte); }
.geo-quellen__dreier div { display: grid; align-content: start; gap: 6px; padding: 16px 16px 4px 0; }
.geo-quellen__dreier div + div { padding-left: 16px; border-left: 1px solid var(--linie); }
.geo-quellen__dreier dt { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--bernstein-text); }
.geo-quellen__dreier dd { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.geo-quellen__dreier code, .geo-zugang__zeile { font: 600 .92em/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.geo-quellen__notiz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: clamp(40px, 4.4vw, 60px); padding-top: 28px; border-top: 1px solid var(--linie); }
.geo-quellen__notiz p { flex: 1 1 420px; max-width: 46em; font-size: 17px; line-height: 1.6; color: var(--leise); }
.geo-quellen__notiz b { color: var(--tinte); }
@media (max-width: 960px) {
  .geo-quellen__raster { grid-template-columns: minmax(0, 1fr); }
  .geo-quellen__wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geo-quellen__ass[aria-selected="true"] { transform: none; }
}
@media (max-width: 560px) {
  .geo-quellen__wahl { gap: 8px; }
  .geo-quellen__ass { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 16px; }
  .geo-quellen__marke { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; }
  .geo-quellen__name { font-size: 15px; }
  .geo-quellen__name small { font-size: 12.5px; }
  .geo-quellen__feld { padding: 24px 20px; border-radius: 22px; }
  .geo-quellen__dreier { grid-template-columns: minmax(0, 1fr); }
  .geo-quellen__dreier div, .geo-quellen__dreier div + div { padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .geo-quellen__notiz .knopf { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
}

/* ---------- Zugangs-Check (dunkles Werkzeug, Zeilen wie robots.txt) ---------- */
.geo-zugang { margin-top: clamp(64px, 7vw, 112px); }
.geo-zugang h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.geo-zugang__raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.geo-zugang__punkte { border-top: 1px solid var(--linie-dunkel); }
.geo-zugang__punkt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "box zeile stand" "box b stand" "box small small"; gap: 4px 16px; padding: 18px 6px 18px 0; border-bottom: 1px solid var(--linie-dunkel); cursor: pointer; transition: background .25s; }
.geo-zugang__punkt:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .07), rgba(244, 165, 58, 0) 80%); }
.geo-zugang__punkt input { grid-area: box; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bernstein); cursor: pointer; }
.geo-zugang__zeile { grid-area: zeile; font-size: 13px; color: var(--bernstein-licht); letter-spacing: .01em; }
.geo-zugang__punkt b { grid-area: b; font-size: 17px; line-height: 1.35; color: var(--hell); }
.geo-zugang__punkt small { grid-area: small; font-size: 15px; line-height: 1.5; color: var(--hell-leise); }
.geo-zugang__stand { grid-area: stand; align-self: start; padding: 4px 10px; border-radius: 999px; font: normal 700 12px/1.2 var(--grotesk); white-space: nowrap; color: #6f4400; background: #f9ecc9; }
.geo-zugang__stand::before { content: "offen"; }
.geo-zugang__punkt:has(input:checked) { background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 80%); }
.geo-zugang__punkt:has(input:checked) .geo-zugang__stand { color: #1a130c; background: var(--bernstein-licht); }
.geo-zugang__punkt:has(input:checked) .geo-zugang__stand::before { content: "geklärt"; }
.geo-zugang__ergebnis { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 14px; padding: 26px; border-radius: 24px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.geo-zugang__ergebnis [hidden] { display: none; }
.geo-zugang__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--hell-leise); }
.geo-zugang__zahl b { font: italic 400 64px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.geo-zugang__ring { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.geo-zugang__ring i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)) 0 0 / calc(var(--anteil, 0) * 100%) 100% no-repeat, repeating-linear-gradient(90deg, rgba(246, 239, 230, .14) 0 calc(20% - 4px), rgba(246, 239, 230, 0) calc(20% - 4px) 20%); transition: background-size .6s var(--weich); }
.geo-zugang__ergebnis p:not(.geo-zugang__zahl) { font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.geo-zugang__ergebnis p b { color: var(--hell); }
.geo-zugang__ergebnis .knopf { justify-self: start; margin-top: 4px; }
@media (max-width: 960px) {
  .geo-zugang__raster { grid-template-columns: minmax(0, 1fr); }
  .geo-zugang__ergebnis { position: static; }
}
@media (max-width: 560px) {
  .geo-zugang__punkt { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "box zeile" "box b" "box small" "box stand"; column-gap: 12px; }
  .geo-zugang__stand { justify-self: start; margin-top: 6px; }
  .geo-zugang__ergebnis .knopf { width: 100%; }
}

/* ---------- Selbsttest: neutral testen links, fünf Fragen als Chat-Karten rechts ---------- */
.geo-test__raster { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 64px); align-items: start; }
.geo-test__seite { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 16px; }
.geo-test__neutral { padding: clamp(24px, 2.6vw, 32px); border-radius: 26px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 50px 100px -60px rgba(40, 25, 10, .8); }
.geo-test__neutral-titel { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 25px/1.15 var(--serif); color: var(--bernstein-licht); }
.geo-test__neutral-titel .symbol { width: 22px; height: 22px; flex: none; }
.geo-test__neutral p:not(.geo-test__neutral-titel) { font-size: 15.5px; line-height: 1.55; color: var(--hell-leise); }
.geo-test__neutral ul { display: grid; gap: 10px; margin-top: 14px; }
.geo-test__neutral li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: #e1d5c5; }
.geo-test__neutral li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; background: var(--bernstein); transform: rotate(45deg); }
.geo-test__neutral strong { color: var(--hell); }
.geo-test__stand { display: grid; gap: 12px; padding: 22px 24px; border-radius: 22px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.geo-test__stand [hidden] { display: none; }
.geo-test__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; color: var(--leise); }
.geo-test__zahl b { font: italic 400 52px/1 var(--serif); color: var(--bernstein-text); font-variant-numeric: tabular-nums; }
.geo-test__punkte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.geo-test__punkte li { height: 6px; border-radius: 6px; background: var(--linie); transition: background .4s; }
.geo-test__raster[data-summe="1"] .geo-test__punkte li:nth-child(-n+1),
.geo-test__raster[data-summe="2"] .geo-test__punkte li:nth-child(-n+2),
.geo-test__raster[data-summe="3"] .geo-test__punkte li:nth-child(-n+3),
.geo-test__raster[data-summe="4"] .geo-test__punkte li:nth-child(-n+4),
.geo-test__raster[data-summe="5"] .geo-test__punkte li { background: var(--bernstein-tief); }
.geo-test__stand p:not(.geo-test__zahl) { font-size: 15px; line-height: 1.5; color: var(--leise); }
.geo-test__stand p b { color: var(--tinte); }
.geo-test__stand .knopf { justify-self: start; }
.geo-test__fragen { display: grid; gap: 16px; counter-reset: geo-f; }
.geo-test__frage { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 28px); border-radius: 24px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 40px 80px -60px rgba(60, 40, 20, .5); transition: box-shadow .3s; }
.geo-test__frage:has(input:checked) { box-shadow: inset 0 0 0 1.5px rgba(228, 143, 23, .55), 0 40px 80px -60px rgba(60, 40, 20, .5); }
.geo-test__kopf { display: flex; align-items: center; gap: 14px; }
.geo-test__nr { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font: italic 400 19px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s; }
.geo-test__frage:has(input:checked) .geo-test__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: none; }
.geo-test__kopf b { font-size: 18px; }
.geo-test__gestellt { position: relative; display: inline-flex; align-items: center; margin-left: auto; cursor: pointer; }
.geo-test__gestellt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.geo-test__gestellt span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s, box-shadow .3s; }
.geo-test__gestellt span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; }
.geo-test__gestellt:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.geo-test__gestellt input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.geo-test__gestellt input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: none; }
.geo-test__gestellt input:checked + span::before { background: var(--bernstein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231a130c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
/* Frage als Chat-Blase: ein Tippen markiert den ganzen Text zum Kopieren */
.geo-test__prompt { position: relative; justify-self: end; max-width: 92%; padding: 14px 18px 14px 18px; border-radius: 18px 18px 4px 18px; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--hell); background: var(--espresso); box-shadow: 0 18px 34px -20px rgba(28, 23, 19, .9); user-select: all; -webkit-user-select: all; cursor: text; }
.geo-test__prompt::after { content: "Antippen markiert die Frage"; position: absolute; right: 14px; bottom: -22px; font-size: 12px; font-weight: 400; color: var(--leise); opacity: 0; transition: opacity .25s; }
.geo-test__prompt:hover::after, .geo-test__prompt:focus::after { opacity: 1; }
.geo-test__prompt:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.geo-test__prompt::selection { background: var(--bernstein); color: #1a130c; }
.geo-test__lesen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 6px; }
.geo-test__lesen div { display: grid; align-content: start; justify-items: start; gap: 6px; }
.geo-test__lesen dd { font-size: 15px; line-height: 1.5; color: var(--leise); }
.geo-test__ehrlich { max-width: 980px; margin-top: 28px; background: var(--papier); }
@media (max-width: 960px) {
  .geo-test__raster { grid-template-columns: minmax(0, 1fr); }
  .geo-test__seite { position: static; }
}
@media (max-width: 560px) {
  .geo-test__frage { border-radius: 20px; }
  .geo-test__kopf { flex-wrap: wrap; gap: 10px 12px; }
  .geo-test__kopf b { font-size: 16.5px; }
  .geo-test__prompt { max-width: 100%; font-size: 16px; }
  .geo-test__prompt::after { display: none; }
  .geo-test__lesen { grid-template-columns: minmax(0, 1fr); }
  .geo-test__stand .knopf { width: 100%; }
}

/* ---------- Was GEO kann und was nicht (dunkel, Schalter) ---------- */
.geo-ehrlich__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.geo-ehrlich__text h2 { max-width: 12em; }
.geo-ehrlich__text p { max-width: 34em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--hell-leise); }
.geo-ehrlich__text p strong { color: var(--hell); }
.geo-ehrlich__text .knopf { margin-top: 28px; color: var(--hell); }
.geo-ehrlich__tafel { padding: clamp(24px, 3vw, 40px); border-radius: 30px; background: linear-gradient(165deg, rgba(255, 244, 228, .07), rgba(255, 244, 228, .02)); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12), 0 60px 120px -60px rgba(0, 0, 0, .9); }
.geo-ehrlich__schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.geo-ehrlich__schalter button { min-height: 50px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 16px/1.2 var(--grotesk); color: var(--hell-leise); background: none; cursor: pointer; transition: background .3s, color .3s; }
.geo-ehrlich__schalter button:hover { color: var(--hell); }
.geo-ehrlich__schalter button[aria-selected="true"] { color: #1a130c; background: var(--bernstein); box-shadow: 0 10px 26px -12px rgba(244, 165, 58, .8); }
.geo-ehrlich__schalter button:last-child[aria-selected="true"] { color: var(--tinte); background: var(--hell); box-shadow: none; }
.geo-ehrlich__feld { margin-top: 22px; animation: auftritt .45s var(--weich) both; }
.geo-ehrlich__feld[hidden] { display: none; }
.geo-ehrlich__kann { counter-reset: geo-k; }
.geo-ehrlich__kann li { counter-increment: geo-k; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--linie-dunkel); }
.geo-ehrlich__kann li:last-child { border-bottom: 0; }
.geo-ehrlich__kann li::before { content: counter(geo-k, upper-roman); grid-row: span 2; font: italic 400 28px/1.05 var(--serif); color: var(--bernstein-licht); }
.geo-ehrlich__kann b { font-size: 18px; color: var(--hell); }
.geo-ehrlich__kann span { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
.geo-ehrlich__nicht li { position: relative; display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 17.5px; color: var(--hell); }
.geo-ehrlich__nicht li:last-child { border-bottom: 0; }
.geo-ehrlich__nicht li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23f7bb63' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .5); }
@media (max-width: 960px) { .geo-ehrlich__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .geo-ehrlich__tafel { padding: 18px 16px; border-radius: 22px; }
  .geo-ehrlich__schalter button { min-height: 46px; padding: 0 8px; font-size: 14.5px; }
  .geo-ehrlich__nicht li { font-size: 16px; gap: 12px; }
}

/* ---------- Wegweiser: drei Fragen, eine Empfehlung (nur :has, kein Skript) ---------- */
.geo-weg__werkzeug { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px clamp(24px, 3.4vw, 48px); align-items: stretch; }
.geo-weg__fragen { display: grid; gap: 14px; }
.geo-weg__frage { min-width: 0; margin: 0; padding: 20px 22px 22px; border: 0; border-radius: 24px; background: var(--papier); box-shadow: 0 1px 0 var(--linie); }
.geo-weg__frage legend { float: left; display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px; padding: 0; font-size: 18px; font-weight: 600; }
.geo-weg__frage legend + * { clear: left; }
.geo-weg__nr { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font: italic 400 18px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s; }
.geo-weg__frage:has(input:checked) .geo-weg__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: none; }
.geo-weg__frage label { position: relative; display: inline-flex; margin: 0 8px 8px 0; cursor: pointer; }
.geo-weg__frage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.geo-weg__frage label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--tinte); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.geo-weg__frage label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.geo-weg__frage input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.geo-weg__frage input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: 0 10px 22px -14px rgba(28, 23, 19, .9); }
.geo-weg__ergebnis { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 40px); overflow: hidden; border-radius: 30px; color: var(--hell); background: radial-gradient(70% 70% at 100% 0%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.geo-weg__ergebnis [hidden] { display: none !important; }
.geo-weg__ergebnis { justify-content: flex-end; min-height: 420px; isolation: isolate; }
.geo-weg__bild { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 80% 30%; opacity: .7; }
.geo-weg__ergebnis::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 19, 15, .1) 0%, rgba(23, 19, 15, .55) 45%, rgba(23, 19, 15, .94) 78%); pointer-events: none; }
.geo-weg__warten { display: grid; gap: 12px; }
.geo-weg__stand { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--hell-leise); }
.geo-weg__stand b { font: italic 400 64px/1 var(--serif); color: var(--bernstein-licht); }
.geo-weg__warten p:not(.geo-weg__stand) { font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.geo-weg__erg { display: none; animation: auftritt .5s var(--weich) both; }
.geo-weg__satz { font: italic 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); color: var(--hell); text-wrap: balance; }
.geo-weg__satz em { color: var(--bernstein-licht); }
.geo-weg__erg p:not(.geo-weg__satz) { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.geo-weg__erg > .knopf, .geo-weg__knoepfe { margin-top: 22px; }
.geo-weg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.geo-weg__erg .knopf--hell { color: var(--hell); }
/* Auswahl der Empfehlung. Vorrang: lokal, dann noch nichts, dann SEO plus Klicks, dann Mitbewerber plus bundesweit, sonst Standard */
.geo-weg__erg--standard { display: block; }
.geo-weg__werkzeug:has([value="lokal"]:checked) .geo-weg__erg--lokal,
.geo-weg__werkzeug:not(:has([value="lokal"]:checked)):has([value="nichts"]:checked) .geo-weg__erg--nichts,
.geo-weg__werkzeug:not(:has([value="lokal"]:checked)):not(:has([value="nichts"]:checked)):has([value="seo"]:checked):has([value="klicks"]:checked) .geo-weg__erg--klicks,
.geo-weg__werkzeug:not(:has([value="lokal"]:checked)):not(:has([value="nichts"]:checked)):not(:has([value="seo"]:checked):has([value="klicks"]:checked)):has([value="mitbewerber"]:checked) .geo-weg__erg--mitbewerber { display: block; }
.geo-weg__werkzeug:has([value="lokal"]:checked) .geo-weg__erg--standard,
.geo-weg__werkzeug:has([value="nichts"]:checked) .geo-weg__erg--standard,
.geo-weg__werkzeug:has([value="seo"]:checked):has([value="klicks"]:checked) .geo-weg__erg--standard,
.geo-weg__werkzeug:has([value="mitbewerber"]:checked):has([value="bundesweit"]:checked) .geo-weg__erg--standard { display: none; }
@media (max-width: 960px) { .geo-weg__werkzeug { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .geo-weg__frage { padding: 16px 16px 12px; border-radius: 20px; }
  .geo-weg__frage legend { font-size: 16.5px; align-items: flex-start; }
  .geo-weg__frage label span { min-height: 44px; padding: 8px 14px; font-size: 15px; line-height: 1.3; }
  .geo-weg__ergebnis { border-radius: 22px; padding: 24px 20px; min-height: 340px; }
  .geo-weg__knoepfe .knopf, .geo-weg__erg > .knopf { width: 100%; }
}

/* ---------- Preislogik unter dem Vorgehen ---------- */
.geo-preis { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.geo-preis__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 14px 72px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.geo-preis__kopf h2 { font-size: clamp(32px, 3.6vw, 50px); }
.geo-preis__kopf p { max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--leise); }
.geo-preis .preislogik { align-items: center; }
.geo-preis .preislogik__faktoren { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); }
.geo-preis .preislogik__faktoren li { padding-left: 22px; position: relative; }
.geo-preis .preislogik__faktoren li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
@media (max-width: 960px) { .geo-preis__kopf, .geo-preis .preislogik { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Zusatz Google Ads (google-ads/index.html, Quelle _werkzeug/seiten/23-google-ads.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix google-ads-. Nur Tokens aus :root (plus Ampelfarben aus grund.css).
   Enthält: Live-Szenen „Suchbegriffe gefiltert“ und „Ihre Rechnung“, Rechner als Rechenweg (Alleinstellung),
   Selbstcheck mit Warnlampen, Neuerungen 2026 als Reiter, Konto und Google Partner mit Jahreszähler,
   Wegweiser „Wo stehen Sie mit Google Ads?“, Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen und data-rechner aus ares.js, sonst :has(input:checked).
   Hinweis: Die alte Datei teile/zusatz/google-ads.css (Klassen google-ads-check) bleibt bestehen, wird hier nicht genutzt.
   ========================================================================== */

/* ---------- Einstieg: Szene „Suchbegriffe heute“ ---------- */
.google-ads-sz-suche { display: flex; align-items: center; gap: 9px; flex: none; height: 40px; padding: 0 14px; margin-bottom: 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tinte); background: #f3ebdf; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.google-ads-sz-suche .symbol { width: 15px; height: 15px; flex: none; color: var(--bernstein-text); }
.google-ads-sz-tippt { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--bernstein-tief); }
.google-ads-sz-begriffe { display: grid; gap: 6px; }
.google-ads-sz-begriffe li { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-height: 40px; padding: 7px 12px; overflow: hidden; border-radius: 12px; font: 600 13.5px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #e9dfd2; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.google-ads-sz-begriffe li span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.google-ads-sz-begriffe small { flex: none; padding: 2px 9px; border-radius: 999px; font: 700 11.5px/1.3 var(--grotesk); }
.google-ads-sz-raus small { color: #cdbfae; background: rgba(205, 191, 174, .14); opacity: 0; }
.google-ads-sz-raus span::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: #cdbfae; transform: scaleX(0); transform-origin: left; }
.google-ads-sz-treffer { color: var(--hell) !important; }
.google-ads-sz-treffer small { color: #1a130c; background: var(--bernstein-licht); opacity: 0; }
.google-ads-sz-anzeige { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marke url" "titel titel" "cta cta"; align-items: center; gap: 4px 10px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; color: var(--tinte); background: #f6efe6; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); opacity: 0; }
.google-ads-sz-marke { grid-area: marke; font-size: 11.5px; font-weight: 700; }
.google-ads-sz-url { grid-area: url; font-size: 12.5px; color: var(--leise); }
.google-ads-sz-anzeige b { grid-area: titel; font-size: 16px; line-height: 1.25; color: #1f3a8a; color: var(--tinte); }
.google-ads-sz-cta { grid-area: cta; justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #1a130c; background: var(--bernstein); }
.google-ads-sz-eingang { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 9px 14px; border-radius: 12px; font-size: 12px; line-height: 1.3; color: #cdbfae; background: linear-gradient(90deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .5); opacity: 0; }
.google-ads-sz-eingang b { display: block; font-size: 13.5px; color: var(--hell); }
.google-ads-sz-eingang .symbol { width: 18px; height: 18px; flex: none; color: var(--bernstein-licht); }
/* Takte */
.ist-aktiv .google-ads-sz-tippt { animation: google-ads-tippen 1.2s steps(24) .3s both, google-ads-cursor .7s step-end 4; }
.ist-aktiv .google-ads-sz-begriffe li { animation: eingang .6s var(--weich) both; animation-delay: calc(.9s + var(--i) * .22s); }
.ist-aktiv .google-ads-sz-raus span::after { animation: google-ads-strich .5s var(--weich) both; animation-delay: calc(2.1s + var(--i) * .2s); }
.ist-aktiv .google-ads-sz-raus small { animation: google-ads-an .4s ease both; animation-delay: calc(2.2s + var(--i) * .2s); }
.ist-aktiv .google-ads-sz-begriffe .google-ads-sz-raus { animation: eingang .6s var(--weich) both, google-ads-weg .6s var(--weich) both; animation-delay: calc(.9s + var(--i) * .22s), 3.3s; }
.ist-aktiv .google-ads-sz-begriffe .google-ads-sz-treffer { animation: eingang .6s var(--weich) both, google-ads-leuchten 1s ease both; animation-delay: calc(.9s + var(--i) * .22s), 3.4s; }
.ist-aktiv .google-ads-sz-treffer small { animation: google-ads-an .4s ease 3.4s both; }
.ist-aktiv .google-ads-sz-anzeige { animation: google-ads-auf .7s var(--weich) 3.8s both; }
.ist-aktiv .google-ads-sz-cta { animation: google-ads-klick .6s ease 4.9s; }
.ist-aktiv .google-ads-sz-eingang { animation: google-ads-auf .7s var(--weich) 5.4s both; }
@keyframes google-ads-tippen { from { width: 0; } }
@keyframes google-ads-cursor { 50% { border-color: transparent; } }
@keyframes google-ads-strich { to { transform: scaleX(1); } }
@keyframes google-ads-an { to { opacity: 1; } }
@keyframes google-ads-weg { to { max-height: 0; padding-block: 0; margin-top: -6px; opacity: 0; } }
@keyframes google-ads-leuchten { to { background: linear-gradient(90deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .6); } }
@keyframes google-ads-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes google-ads-klick { 50% { transform: scale(.93); box-shadow: 0 0 0 7px rgba(244, 165, 58, .3); } }
.google-ads-sz-treffer { animation-fill-mode: both; }

/* ---------- Einstieg: Szene „Ihre Rechnung“ ---------- */
.google-ads-sz-kette { position: relative; display: grid; gap: 10px; }
.google-ads-sz-kette::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 2px dashed rgba(244, 165, 58, .45); }
.google-ads-sz-kette li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "punkt titel wert" "punkt satz wert"; align-items: center; column-gap: 12px; padding: 9px 14px 9px 0; }
.google-ads-sz-kette li::before { content: ""; grid-area: punkt; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: #2a2119; box-shadow: inset 0 0 0 2px var(--bernstein); }
.google-ads-sz-kette small { grid-area: titel; font-size: 12.5px; color: #b5a796; }
.google-ads-sz-kette span { grid-area: satz; font-size: 12.5px; color: #cdbfae; }
.google-ads-sz-kette b { grid-area: wert; font: italic 400 32px/1 var(--serif); color: var(--hell); }
.google-ads-sz-kette li.google-ads-sz-ziel { border-radius: 14px; background: linear-gradient(90deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .04)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55); }
.google-ads-sz-ziel b { color: var(--bernstein-licht); }
.google-ads-sz-ziel::before { background: var(--bernstein) !important; box-shadow: 0 0 12px rgba(244, 165, 58, .8) !important; }
.google-ads-sz-anteil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; font-size: 12.5px; color: #b5a796; }
.google-ads-sz-anteil i { position: relative; height: 10px; border-radius: 10px; background: rgba(246, 239, 230, .1); overflow: hidden; }
.google-ads-sz-anteil em { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); min-width: 10%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); }
.google-ads-sz-anteil b { font: italic 400 22px/1 var(--serif); color: var(--bernstein-licht); }
.google-ads-sz-rechnung .sz-fuss { margin-top: auto; }
.ist-aktiv .google-ads-sz-kette li { animation: aufbau .7s var(--weich) both; animation-delay: calc(.4s + var(--i) * .6s); }
.ist-aktiv .google-ads-sz-anteil { animation: einblenden .7s ease 2.4s both; }
.ist-aktiv .google-ads-sz-anteil em { animation: google-ads-fuellen 1.2s var(--weich) 2.6s both; }
@keyframes google-ads-fuellen { from { width: 0; min-width: 0; } }
@media (min-width: 1100px) and (max-height: 800px) {
  .google-ads-sz-suche { height: 34px; margin-bottom: 8px; }
  .google-ads-sz-begriffe li { padding-block: 5px; }
  .google-ads-sz-anzeige { padding: 9px 12px; }
  .google-ads-sz-kette li { padding-block: 6px; }
  .google-ads-sz-kette b { font-size: 27px; }
  .google-ads-sz-rechnung .sz-fuss { display: none; }
}
@media (max-width: 760px) {
  .google-ads-sz-suche, .google-ads-sz-anzeige, .google-ads-sz-begriffe li:nth-child(2), .google-ads-sz-begriffe li:nth-child(3) { display: none; }
  .google-ads-sz-begriffe { gap: 5px; }
  .google-ads-sz-begriffe li { padding: 4px 10px; border-radius: 9px; font-size: 12px; }
  .ist-aktiv .google-ads-sz-begriffe .google-ads-sz-raus { animation: eingang .6s var(--weich) both; animation-delay: .5s; }
  .google-ads-sz-eingang { margin-top: 6px; padding: 5px 10px; font-size: 11px; }
  .google-ads-sz-eingang b { font-size: 12px; }
  .google-ads-sz-eingang span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .google-ads-sz-kette { gap: 2px; }
  .google-ads-sz-kette::before { left: 13px; top: 12px; bottom: 12px; }
  .google-ads-sz-kette li { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "punkt titel wert"; padding: 3px 10px 3px 0; }
  .google-ads-sz-kette li::before { width: 10px; height: 10px; }
  .google-ads-sz-kette span, .google-ads-sz-anteil, .google-ads-sz-rechnung .sz-fuss { display: none; }
  .google-ads-sz-kette b { font-size: 20px; }
  .google-ads-sz-kette small { font-size: 12px; }
}

/* ---------- Einstieg: Aussage mit nachgestelltem Akzent ---------- */
.google-ads-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.2em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) {
  .google-ads-einstieg .einstieg__aussage { font-size: clamp(38px, min(4.4vw, 7.4svh), 62px); }
  .google-ads-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .google-ads-einstieg .einstieg__aussage { font-size: clamp(29px, 8.2vw, 38px); }
  .google-ads-einstieg .einstieg__lead { font-size: 15.5px; line-height: 1.45; }
}

/* ---------- Rechner als Rechenweg (Alleinstellung) ---------- */
.google-ads-rechner { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 44px); align-items: stretch; }
.google-ads-rechner__form { align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: 30px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.google-ads-rechner__titel { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--tinte); font: italic 400 28px/1.1 var(--serif); }
.google-ads-rechner__form .feld:nth-of-type(5) { grid-column: 1 / -1; }
.google-ads-rechner__weg.rechner__ergebnis { position: relative; margin-top: 18px; overflow: visible; border-radius: 0; background: none; color: var(--tinte); gap: 12px; }
.google-ads-rechner__weg::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 2px dashed rgba(228, 143, 23, .55); z-index: 0; }
.google-ads-rechner__weg.rechner__ergebnis div { position: relative; z-index: 1; display: grid; gap: 6px; padding: 18px 18px 20px; border: 0; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.google-ads-rechner__weg.rechner__ergebnis div + div { border-left: 0; }
.google-ads-rechner__weg.rechner__ergebnis div:nth-child(2) { background: var(--creme); }
.google-ads-rechner__weg.rechner__ergebnis div:last-child { color: var(--hell); background: radial-gradient(120% 140% at 50% 0%, rgba(244, 165, 58, .3), rgba(244, 165, 58, 0) 70%), var(--espresso); box-shadow: 0 30px 60px -30px rgba(28, 23, 19, .9); }
.google-ads-rechner__weg.rechner__ergebnis span { font-size: 13.5px; font-weight: 600; color: var(--leise); }
.google-ads-rechner__weg.rechner__ergebnis div:last-child span { color: var(--hell-leise); }
.google-ads-rechner__weg.rechner__ergebnis b { margin-top: 0; font-size: clamp(34px, 3.2vw, 48px); color: var(--bernstein-text); }
.google-ads-rechner__weg.rechner__ergebnis div:last-child b { color: var(--bernstein-licht); }
.google-ads-rechner__monat { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 0 0; border-top: 1px dashed #d8ccbb; font-size: 15.5px; color: var(--leise); }
.google-ads-rechner__monat b { font: italic 400 30px/1 var(--serif); color: var(--tinte); }
.google-ads-rechner__form .rechner__satz { font: italic 400 clamp(22px, 2vw, 27px)/1.3 var(--serif); color: var(--tinte); }
.google-ads-rechner__lesen { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 30px; color: var(--hell); background: radial-gradient(80% 50% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 50px 100px -60px rgba(40, 25, 10, .8); }
.google-ads-rechner__lesen-titel { padding-bottom: 12px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 27px/1.1 var(--serif); }
.google-ads-rechner__lesen-titel em { color: var(--bernstein-licht); }
.google-ads-rechner__lesen p:not(.google-ads-rechner__lesen-titel) { font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.google-ads-rechner__lesen b { color: var(--hell); }
.google-ads-rechner__hebel { display: grid; gap: 10px; counter-reset: google-ads-h; }
.google-ads-rechner__hebel li { counter-increment: google-ads-h; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 14px 16px 14px 12px; border-radius: 16px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.google-ads-rechner__hebel li::before { content: counter(google-ads-h, upper-roman); grid-row: span 2; font: italic 400 26px/1 var(--serif); color: var(--bernstein-licht); }
.google-ads-rechner__hebel b { font-size: 16px; }
.google-ads-rechner__hebel span { font-size: 14.5px; line-height: 1.5; color: var(--hell-leise); }
.google-ads-rechner__lesen .google-ads-rechner__hinweis { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie-dunkel); font-size: 13.5px; color: var(--hell-leise); }
.google-ads-rechner__lesen .knopf { align-self: flex-start; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
@media (max-width: 1060px) { .google-ads-rechner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .google-ads-rechner__form { padding: 22px 16px; border-radius: 22px; }
  .google-ads-rechner__weg::before { left: 50%; right: auto; top: 8%; bottom: 8%; border-top: 0; border-left: 2px dashed rgba(228, 143, 23, .55); }
  .google-ads-rechner__lesen { border-radius: 22px; }
  .google-ads-rechner__lesen .knopf { width: 100%; }
}

/* ---------- Selbstcheck mit Warnlampen ---------- */
.google-ads-selbst__werk { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 48px); align-items: start; }
.google-ads-selbst__liste { display: grid; gap: 10px; counter-reset: google-ads-a; }
.google-ads-selbst__liste li { counter-increment: google-ads-a; }
.google-ads-selbst__liste label { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px 18px 18px; border-radius: 20px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; transition: background .3s, box-shadow .3s; }
.google-ads-selbst__liste input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.google-ads-selbst__lampe { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 2px #cdbfae; transition: background .3s, box-shadow .3s; }
.google-ads-selbst__lampe::before { content: counter(google-ads-a, upper-roman); font: italic 400 19px/1 var(--serif); color: var(--bernstein-text); }
.google-ads-selbst__liste b { display: block; font-size: 17px; line-height: 1.35; color: var(--tinte); }
.google-ads-selbst__liste small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--leise); }
.google-ads-selbst__liste label:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.google-ads-selbst__liste label:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.google-ads-selbst__liste label:has(input:checked) { background: #f9ecc9; box-shadow: inset 0 0 0 1.5px rgba(228, 143, 23, .7); }
.google-ads-selbst__liste label:has(input:checked) .google-ads-selbst__lampe { background: var(--bernstein); box-shadow: 0 0 0 5px rgba(244, 165, 58, .25), 0 0 22px rgba(244, 165, 58, .6); }
.google-ads-selbst__liste label:has(input:checked) .google-ads-selbst__lampe::before { color: #1a130c; }
.google-ads-selbst__tafel { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 16px; padding: 26px; border-radius: 26px; color: var(--hell); background: radial-gradient(80% 50% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 50px 100px -60px rgba(40, 25, 10, .8); }
.google-ads-selbst__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--hell-leise); }
.google-ads-selbst__zahl b { font: italic 400 64px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.google-ads-selbst__lampen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.google-ads-selbst__lampen i { height: 10px; border-radius: 10px; background: rgba(246, 239, 230, .12); transition: background .35s, box-shadow .35s; }
.google-ads-selbst__werk[data-summe="1"] .google-ads-selbst__lampen i:nth-child(-n+1),
.google-ads-selbst__werk[data-summe="2"] .google-ads-selbst__lampen i:nth-child(-n+2),
.google-ads-selbst__werk[data-summe="3"] .google-ads-selbst__lampen i:nth-child(-n+3),
.google-ads-selbst__werk[data-summe="4"] .google-ads-selbst__lampen i:nth-child(-n+4),
.google-ads-selbst__werk[data-summe="5"] .google-ads-selbst__lampen i:nth-child(-n+5),
.google-ads-selbst__werk[data-summe="6"] .google-ads-selbst__lampen i { background: var(--bernstein); box-shadow: 0 0 12px rgba(244, 165, 58, .6); }
.google-ads-selbst__deutung { display: grid; gap: 8px; }
.google-ads-selbst__stufe { padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: #a99b89; box-shadow: inset 0 0 0 1px var(--linie-dunkel); transition: background .3s, color .3s, box-shadow .3s; }
.google-ads-selbst__stufe b { display: block; margin-bottom: 2px; font: italic 400 20px/1.1 var(--serif); color: inherit; }
.google-ads-selbst__werk:not([data-summe]) .google-ads-selbst__stufe--1,
.google-ads-selbst__werk[data-summe="0"] .google-ads-selbst__stufe--1, .google-ads-selbst__werk[data-summe="1"] .google-ads-selbst__stufe--1,
.google-ads-selbst__werk[data-summe="2"] .google-ads-selbst__stufe--2, .google-ads-selbst__werk[data-summe="3"] .google-ads-selbst__stufe--2,
.google-ads-selbst__werk[data-summe="4"] .google-ads-selbst__stufe--3, .google-ads-selbst__werk[data-summe="5"] .google-ads-selbst__stufe--3, .google-ads-selbst__werk[data-summe="6"] .google-ads-selbst__stufe--3 { color: #e1d5c5; background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .5); }
.google-ads-selbst__werk[data-summe] .google-ads-selbst__stufe b { color: inherit; }
.google-ads-selbst__tafel .knopf { justify-self: start; }
.google-ads-selbst__notiz { font-size: 13.5px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) { .google-ads-selbst__werk { grid-template-columns: minmax(0, 1fr); } .google-ads-selbst__tafel { position: static; } }
@media (max-width: 560px) {
  .google-ads-selbst__liste label { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .google-ads-selbst__lampe { width: 36px; height: 36px; }
  .google-ads-selbst__liste b { font-size: 16px; }
  .google-ads-selbst__tafel { padding: 22px 18px; }
  .google-ads-selbst__tafel .knopf { width: 100%; }
}

/* ---------- Umfang: Fußzeile ---------- */
.google-ads-umfang__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 36px; padding: 22px 26px; border-radius: 22px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.google-ads-umfang__fuss p { font-size: 16.5px; line-height: 1.5; color: var(--leise); }
.google-ads-umfang__fuss b { color: var(--tinte); }
@media (max-width: 560px) { .google-ads-umfang__fuss .knopf { width: 100%; } }

/* ---------- Neuerungen 2026: Reiter links, Karte rechts (dunkel) ---------- */
.google-ads-neu__werk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(28px, 4vw, 64px); align-items: stretch; }
.google-ads-neu__wahl { display: grid; gap: 10px; align-content: center; }
.google-ads-neu__wahl button { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 16px 18px 16px 14px; border: 0; border-radius: 18px; font: 600 16.5px/1.3 var(--grotesk); color: var(--hell-leise); text-align: left; background: rgba(255, 244, 228, .04); box-shadow: inset 0 0 0 1px var(--linie-dunkel); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.google-ads-neu__wahl button span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: italic 400 19px/1 var(--serif); color: var(--bernstein-licht); box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .45); }
.google-ads-neu__wahl button:hover { color: var(--hell); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.google-ads-neu__wahl button[aria-selected="true"] { color: var(--hell); background: linear-gradient(90deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, .04)); box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .6); }
.google-ads-neu__wahl button[aria-selected="true"] span { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.google-ads-neu__feld { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.4vw, 48px); border-radius: 30px; color: var(--tinte); background: var(--papier); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9); animation: auftritt .45s var(--weich) both; }
.google-ads-neu__feld[hidden] { display: none; }
.google-ads-neu__datum { align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--bernstein-text); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.abschnitt--dunkel .google-ads-neu__feld h3 { font: italic 400 clamp(30px, 2.8vw, 40px)/1.08 var(--serif); color: var(--tinte); }
.google-ads-neu__feld > p:not(.google-ads-neu__datum):not(.google-ads-neu__heisst) { font-size: 17px; line-height: 1.6; color: var(--leise); }
.google-ads-neu__heisst { margin-top: auto; padding: 16px 18px; border-left: 3px solid var(--bernstein); border-radius: 0 16px 16px 0; font-size: 16px; line-height: 1.5; color: var(--tinte); background: var(--creme); }
.google-ads-neu__heisst b { display: block; margin-bottom: 2px; font-size: 13px; letter-spacing: .02em; color: var(--bernstein-text); }
.google-ads-neu__ki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(36px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--linie-dunkel); }
.google-ads-neu__ki p { flex: 1 1 380px; max-width: 44em; font-size: 16.5px; line-height: 1.55; color: var(--hell-leise); }
.google-ads-neu__ki .knopf { color: var(--hell); }
@media (max-width: 960px) { .google-ads-neu__werk { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .google-ads-neu__wahl button { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; font-size: 15px; }
  .google-ads-neu__wahl button span { width: 36px; height: 36px; font-size: 16px; }
  .google-ads-neu__feld { padding: 24px 20px; border-radius: 22px; }
  .google-ads-neu__ki .knopf { width: 100%; }
}

/* ---------- Konto übernehmen, Schlüssel und Google Partner ---------- */
.google-ads-konto__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.google-ads-konto__text { position: sticky; top: calc(var(--kopf-h) + 32px); }
.google-ads-konto__text h2 { max-width: 13em; }
.google-ads-konto__text p { max-width: 34em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.google-ads-konto__text strong { color: var(--tinte); }
.google-ads-konto__person { display: flex; align-items: center; gap: 14px; }
.google-ads-konto__person img { width: 56px; height: 56px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--creme); }
.google-ads-konto__person span { font-size: 15.5px; }
.google-ads-konto__person b { color: var(--tinte); }
.google-ads-konto__seite { display: grid; gap: 16px; }
.google-ads-schluessel { display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.google-ads-schluessel__titel { padding-bottom: 14px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); }
.google-ads-schluessel__titel em { color: var(--bernstein-licht); }
.google-ads-schluessel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.google-ads-schluessel li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.google-ads-schluessel li b { font: italic 400 21px/1.1 var(--serif); color: var(--bernstein-licht); }
.google-ads-schluessel li span { font-size: 14.5px; line-height: 1.45; color: #e1d5c5; }
.google-ads-schluessel .knopf { justify-self: start; }
.google-ads-partner { display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.google-ads-partner__jahre { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.google-ads-partner__jahre .zaehler { font-size: 64px; color: var(--bernstein-text); }
.google-ads-partner.ist-da .zaehler { animation: zaehlen 2.2s cubic-bezier(.2, .7, .2, 1) .3s both; }
.google-ads-partner__jahre span { font-size: 15px; line-height: 1.4; color: var(--leise); }
.google-ads-partner__jahre b { display: block; font-size: 17px; color: var(--tinte); }
.google-ads-partner h3 { font: italic 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); }
.google-ads-partner h3 em { color: var(--bernstein-text); }
.google-ads-partner > p { font-size: 15.5px; line-height: 1.6; color: var(--leise); }
.google-ads-partner__drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.google-ads-partner__drei li { display: grid; align-content: start; gap: 6px; padding: 14px; border-radius: 16px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.google-ads-partner__drei b { font: italic 400 22px/1.1 var(--serif); color: var(--tinte); }
.google-ads-partner__drei span { font-size: 13.5px; line-height: 1.4; color: var(--leise); }
.google-ads-partner .google-ads-partner__quelle { font-size: 13px; color: var(--leise); }
.google-ads-partner .google-ads-partner__auch { font-size: 14.5px; font-weight: 600; color: var(--tinte); }
@media (max-width: 960px) { .google-ads-konto__raster { grid-template-columns: minmax(0, 1fr); } .google-ads-konto__text { position: static; } }
@media (max-width: 560px) {
  .google-ads-schluessel ul, .google-ads-partner__drei { grid-template-columns: minmax(0, 1fr); }
  .google-ads-schluessel, .google-ads-partner { border-radius: 22px; padding: 22px 18px; }
  .google-ads-schluessel .knopf { width: 100%; }
}

/* ---------- Wegweiser: Fragen als Zeilen, Ergebnis als Band ---------- */
.google-ads-weg__werk { display: grid; gap: 16px; }
.google-ads-weg__fragen { border-top: 1px solid var(--tinte); counter-reset: google-ads-w; }
.google-ads-weg__fragen > li { counter-increment: google-ads-w; border-bottom: 1px solid var(--linie); }
.google-ads-weg__fragen fieldset { position: relative; min-width: 0; margin: 0; padding: 20px 0 20px 64px; border: 0; }
.google-ads-weg__fragen fieldset::after { content: ""; display: table; clear: both; }
.google-ads-weg__fragen fieldset::before { content: counter(google-ads-w, upper-roman); position: absolute; left: 0; top: 22px; font: italic 400 30px/1 var(--serif); color: var(--bernstein-text); }
.google-ads-weg__fragen legend { float: left; width: 38%; padding: 8px 24px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.google-ads-weg__fragen label { position: relative; display: block; cursor: pointer; }
.google-ads-weg__fragen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.google-ads-weg__fragen label span { display: flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--tinte); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.google-ads-weg__fragen label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.google-ads-weg__fragen input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.google-ads-weg__fragen input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: 0 12px 24px -16px rgba(28, 23, 19, .9); }
.google-ads-weg__optionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 38%; }
.google-ads-weg__ergebnis { position: relative; min-height: 170px; padding: clamp(26px, 3vw, 40px); overflow: hidden; border-radius: 30px; color: var(--hell); background: radial-gradient(60% 120% at 100% 0%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.google-ads-weg__ergebnis [hidden] { display: none !important; }
.google-ads-weg__ergebnis { isolation: isolate; min-height: 240px; }
.google-ads-weg__bild { position: absolute; right: 0; top: 0; z-index: -1; width: 55%; height: 100%; object-fit: cover; object-position: 75% 50%; opacity: .6; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.google-ads-weg__zusatz { background: rgba(23, 19, 15, .8); }
@media (max-width: 900px) { .google-ads-weg__bild { width: 100%; opacity: .25; -webkit-mask-image: none; mask-image: none; } }
.google-ads-weg__warten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; }
.google-ads-weg__stand { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--hell-leise); }
.google-ads-weg__stand b { font: italic 400 56px/1 var(--serif); color: var(--bernstein-licht); }
.google-ads-weg__warten p:not(.google-ads-weg__stand) { font-size: 16px; color: var(--hell-leise); }
.google-ads-weg__fertig { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-auto-rows: min-content; gap: 14px 40px; align-items: start; }
.google-ads-weg__erg { display: none; grid-column: 1; grid-row: 1 / span 3; animation: auftritt .5s var(--weich) both; }
.google-ads-weg__ergebnis .google-ads-weg__satz { font: italic 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); color: var(--hell); }
.google-ads-weg__satz em { color: var(--bernstein-licht); }
.google-ads-weg__erg p:not(.google-ads-weg__satz) { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.google-ads-weg__erg > .knopf, .google-ads-weg__knoepfe { margin-top: 20px; }
.google-ads-weg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.google-ads-weg__ergebnis .knopf--hell { color: var(--hell); }
.google-ads-weg__zusatz { display: none; grid-column: 2; padding: 14px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; color: var(--hell-leise); background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); }
.google-ads-weg__zusatz b { color: var(--bernstein-licht); }
.google-ads-weg__zusatz .knopf { margin-top: 10px; }
.google-ads-weg__werk:has([value="agentur"]:checked) .google-ads-weg__erg--agentur,
.google-ads-weg__werk:has([value="selbst"]:checked) .google-ads-weg__erg--selbst,
.google-ads-weg__werk:has([value="neu"]:checked) .google-ads-weg__erg--neu,
.google-ads-weg__werk:has([value="shop"]:checked) .google-ads-weg__zusatz--shop,
.google-ads-weg__werk:has([value="genau"]:checked) .google-ads-weg__zusatz--genau { display: block; }
@media (max-width: 900px) {
  .google-ads-weg__fragen fieldset { padding: 0 0 20px; }
  .google-ads-weg__fragen fieldset::before { display: none; }
  .google-ads-weg__fragen legend { float: none; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 20px 0 12px; }
  .google-ads-weg__fragen legend::before { content: counter(google-ads-w, upper-roman); flex: none; min-width: 30px; font: italic 400 26px/1 var(--serif); color: var(--bernstein-text); }
  .google-ads-weg__optionen { margin-left: 0; }
  .google-ads-weg__fertig { grid-template-columns: minmax(0, 1fr); }
  .google-ads-weg__erg { grid-row: auto; }
  .google-ads-weg__zusatz { grid-column: 1; }
}
@media (max-width: 560px) {
  .google-ads-weg__ergebnis { border-radius: 22px; padding: 24px 20px; }
  .google-ads-weg__knoepfe .knopf, .google-ads-weg__erg > .knopf { width: 100%; }
}

/* ---------- Preislogik unter dem Vorgehen ---------- */
.google-ads-preis { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.google-ads-preis__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 14px 72px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.google-ads-preis__kopf h2 { font-size: clamp(32px, 3.6vw, 50px); }
.google-ads-preis__kopf p { max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--leise); }
.google-ads-preis .preislogik__faktoren { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); }
.google-ads-preis .preislogik__faktoren li { position: relative; padding-left: 22px; }
.google-ads-preis .preislogik__faktoren li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
@media (max-width: 960px) { .google-ads-preis__kopf, .google-ads-preis .preislogik { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Zusatz Karriereseiten (karriereseiten/index.html, Quelle _werkzeug/seiten/34-karriereseiten.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix karriereseiten-. Nur Tokens aus :root.
   Achtung: teile/zusatz/karriereseiten.css (alter Rahmen) nutzt karriereseiten-vergleich*; hier nicht verwenden.
   Enthält: Recruiting-Formular (Feld Stelle), Live-Szenen „Stellenseite mit Prüfliste“ und „Jobsuche“,
   Bewerbungsweg im Handy (klassisch gegen Kurzbewerbung), Google-for-Jobs-Regeln, Prüfliste je Stellenseite,
   Messung als Säulen, Gehaltsband, Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-szenen aus ares.js.
   ========================================================================== */

/* ---------- Einstieg: Recruiting-Formular mit Feld Stelle ---------- */
.karriereseiten-start .start__wahl { margin-bottom: 10px; }
.karriereseiten-start__stelle { height: 54px; flex: none; width: 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 36px -24px rgba(0, 0, 0, .9); }
.karriereseiten-start__stelle input { font-size: 17px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .karriereseiten-start__stelle { height: 46px; }
  .karriereseiten-einstieg .start { margin-top: 14px; }
  .karriereseiten-start .start__wahl { margin-bottom: 8px; }
  .karriereseiten-start .start__fuss { margin-top: 8px; }
  .karriereseiten-start .start__feld:not(.karriereseiten-start__stelle), .karriereseiten-start .start__knopf { height: 56px; min-height: 56px; }
}
@media (max-width: 760px) {
  .karriereseiten-start__stelle { height: 50px; padding: 0 18px; }
  .karriereseiten-start .start__wahl { margin-bottom: 8px; }
}

/* ---------- Live-Szene 1: Stellenseite, Prüfliste hakt ab, Feldnamen der Auszeichnung ---------- */
.karriereseiten-sz .sz-kopf { margin-bottom: 14px; }
.karriereseiten-sz__fenster { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #f6efe6; box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .85); }
.karriereseiten-sz__seite { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 16px 18px; color: var(--tinte); }
.karriereseiten-sz__stelle { display: flex; flex-direction: column; gap: 7px; }
.karriereseiten-sz__stelle b { font: 600 17px/1.2 var(--grotesk); letter-spacing: -.01em; }
.karriereseiten-sz__stelle i { height: 6px; border-radius: 3px; background: #dbcfbf; }
.karriereseiten-sz__stelle i:nth-of-type(2) { width: 84%; }
.karriereseiten-sz__stelle i:nth-of-type(3) { width: 62%; }
.karriereseiten-sz__knopf { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; margin-top: 6px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #1a130c; background: var(--bernstein); box-shadow: 0 8px 18px -8px rgba(228, 143, 23, .8); }
.karriereseiten-sz__haken { display: grid; align-content: start; gap: 6px; padding-left: 14px; border-left: 1px solid #e0d6c8; }
.karriereseiten-sz__haken li { position: relative; padding: 5px 0 5px 24px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--leise); }
.karriereseiten-sz__haken li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--bernstein); transform: translateY(-50%); }
.karriereseiten-sz__haken li::after { content: ""; position: absolute; left: 4.5px; top: 50%; width: 7px; height: 4px; margin-top: -3px; border: solid #1a130c; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.karriereseiten-sz__code { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; background: #1c1713; }
.karriereseiten-sz__code span { padding: 3px 9px; border-radius: 6px; font: 600 11.5px/1.3 ui-monospace, Consolas, monospace; color: var(--bernstein-licht); background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .35); }
.karriereseiten-sz__code span::after { content: " ✓"; color: var(--hell); }
.ist-aktiv .karriereseiten-sz__haken li { animation: aufbau .5s var(--weich) both; animation-delay: calc(.6s + var(--n) * .45s); }
.ist-aktiv .karriereseiten-sz__haken li::before, .ist-aktiv .karriereseiten-sz__haken li::after { animation: karriereseiten-haken .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.9s + var(--n) * .45s); }
@keyframes karriereseiten-haken { from { opacity: 0; scale: .3; } }
.ist-aktiv .karriereseiten-sz__code span { animation: aufbau .5s var(--weich) both; animation-delay: calc(3.4s + var(--n) * .3s); }
.ist-aktiv .karriereseiten-sz__knopf { animation: aufbau .6s var(--weich) .4s both; }
/* ---------- Live-Szene 2: neutrale Jobsuche, Eintrag erscheint, nach der Besetzung wieder weg ---------- */
.karriereseiten-sz2__suche { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--tinte); background: #f3ebdf; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.karriereseiten-sz2__suche .symbol { width: 18px; height: 18px; color: var(--bernstein-text); }
.karriereseiten-sz2__suche span { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--bernstein-tief); }
.karriereseiten-sz2__kasten { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 16px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.karriereseiten-sz2__eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 244, 228, .05); }
.karriereseiten-sz2__eintrag b { font-size: 14.5px; font-weight: 600; color: #e1d5c5; }
.karriereseiten-sz2__eintrag small { grid-column: 1; font-size: 12.5px; color: #a99b89; }
.karriereseiten-sz2__eintrag--sie { background: linear-gradient(90deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.karriereseiten-sz2__eintrag--sie b { color: var(--hell); }
.karriereseiten-sz2__eintrag--sie span { grid-row: span 2; align-self: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #1a130c; background: var(--bernstein); white-space: nowrap; }
.karriereseiten-sz2__besetzt { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 13px; color: #b5a796; }
.karriereseiten-sz2__besetzt span { padding: 3px 10px; border-radius: 999px; font-weight: 700; color: #962c13; background: #f7e1da; }
.ist-aktiv .karriereseiten-sz2__suche span { animation: karriereseiten-tippen 1.2s steps(20) .4s both; }
@keyframes karriereseiten-tippen { from { max-width: 0; } to { max-width: 100%; } }
.ist-aktiv .karriereseiten-sz2__eintrag { animation: eingang .6s var(--weich) both; }
.ist-aktiv .karriereseiten-sz2__eintrag:nth-child(1) { animation-delay: 1.7s; }
.ist-aktiv .karriereseiten-sz2__eintrag:nth-child(2) { animation: eingang .6s var(--weich) 2s both, karriereseiten-weg 1s ease 6.2s forwards; }
.ist-aktiv .karriereseiten-sz2__eintrag:nth-child(3) { animation-delay: 2.3s; }
@keyframes karriereseiten-weg { to { opacity: .25; filter: grayscale(1); transform: scale(.97); } }
.ist-aktiv .karriereseiten-sz2__besetzt { animation: aufbau .6s var(--weich) 5.6s both; }
@media (min-width: 1100px) and (max-height: 800px) {
  .karriereseiten-sz__haken li:nth-child(5) { display: none; }
  .karriereseiten-sz2__eintrag:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .karriereseiten-sz .sz-kopf, .karriereseiten-sz2 .sz-kopf { margin-bottom: 9px; }
  .karriereseiten-sz__fenster { border-radius: 12px; }
  .karriereseiten-sz__fenster .sz-browser__leiste { height: 24px; }
  .karriereseiten-sz__seite { grid-template-columns: minmax(0, 1fr); padding: 8px 12px; }
  .karriereseiten-sz__stelle, .karriereseiten-sz__code { display: none; }
  .karriereseiten-sz__haken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; padding-left: 0; border-left: 0; }
  .karriereseiten-sz__haken li { padding: 3px 0 3px 22px; font-size: 11.5px; }
  .karriereseiten-sz__haken li:nth-child(n+5) { display: none; }
  .karriereseiten-sz2__suche { height: 34px; font-size: 13px; }
  .karriereseiten-sz2__kasten { margin-top: 8px; padding: 0; background: none; box-shadow: none; }
  .karriereseiten-sz2__eintrag--andere, .karriereseiten-sz2__besetzt { display: none; }
  .karriereseiten-sz2__eintrag { padding: 7px 10px; }
  .karriereseiten-sz2__eintrag small { font-size: 11.5px; }
}

/* ---------- Bewerbungsweg: Reiter klassisch gegen Kurzbewerbung, Handy mit Schritten ---------- */
.karriereseiten-wege { overflow-x: clip; }
.karriereseiten-weg__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin-bottom: 26px; }
.karriereseiten-weg__wahl [role="tab"] { display: grid; gap: 3px; padding: 16px 20px 18px; border: 0; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font-family: var(--grotesk); text-align: left; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.karriereseiten-weg__wahl [role="tab"] b { font-size: 19px; }
.karriereseiten-weg__wahl [role="tab"] small { font-size: 14px; color: var(--leise); }
.karriereseiten-weg__wahl [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.karriereseiten-weg__wahl [role="tab"][aria-selected="true"] { color: var(--hell); background: var(--espresso); box-shadow: 0 20px 40px -26px rgba(28, 23, 19, .9); }
.karriereseiten-weg__wahl [role="tab"][aria-selected="true"] small { color: var(--hell-leise); }
.karriereseiten-weg__laenge { display: block; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 6px; background: rgba(138, 79, 0, .12); }
.karriereseiten-weg__laenge i { display: block; width: calc(var(--l) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); }
[aria-selected="true"] .karriereseiten-weg__laenge { background: rgba(246, 239, 230, .14); }
.karriereseiten-weg__feld { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 80px); align-items: center; padding: clamp(26px, 3.4vw, 48px); border-radius: 30px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.karriereseiten-weg__feld[hidden] { display: none; }
.karriereseiten-weg__handy { position: relative; display: flex; flex-direction: column; gap: 10px; height: 470px; padding: 44px 18px 22px; overflow: hidden; border-radius: 38px; background: #f6efe6; box-shadow: inset 0 0 0 9px #1c1713, inset 0 0 0 10px #3a3029, 0 40px 70px -40px rgba(28, 23, 19, .8); }
.karriereseiten-weg__handy::before { content: ""; position: absolute; left: 50%; top: 18px; width: 60px; height: 7px; border-radius: 7px; background: #1c1713; transform: translateX(-50%); }
.karriereseiten-weg__handy > span { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--tinte); background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie); }
.karriereseiten-weg__handy small { font-size: 11.5px; font-weight: 700; color: var(--leise); }
.karriereseiten-weg__pdf { gap: 7px !important; padding: 14px 16px 18px !important; transform: rotate(-1deg) scale(1.02); }
.karriereseiten-weg__pdf i { height: 4px; border-radius: 2px; background: #d8ccbb; }
.karriereseiten-weg__pdf i:nth-of-type(odd) { width: 74%; }
.karriereseiten-weg__upload { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1.5px dashed #c9b9a3 !important; box-shadow: none !important; background: #f9f3ea !important; }
.karriereseiten-weg__upload small { color: #962c13; }
.karriereseiten-weg__kopf { padding: 16px !important; color: var(--hell) !important; background: linear-gradient(150deg, #3a2c20, #1c1713) !important; box-shadow: none !important; }
.karriereseiten-weg__kopf small { color: var(--bernstein-licht) !important; }
.karriereseiten-weg__frage { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.karriereseiten-weg__frage i { padding: 3px 12px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; color: #1a130c; background: var(--bernstein); }
.karriereseiten-weg__senden { text-align: center; color: #1a130c !important; background: var(--bernstein) !important; box-shadow: 0 10px 22px -10px rgba(228, 143, 23, .8) !important; }
.karriereseiten-weg__danke { color: #1c6537 !important; background: #dcefe1 !important; box-shadow: none !important; }
.karriereseiten-weg__feld:not([hidden]) .karriereseiten-weg__handy > span { animation: aufbau .5s var(--weich) both; }
.karriereseiten-weg__feld:not([hidden]) .karriereseiten-weg__handy > span:nth-child(2) { animation-delay: .25s; }
.karriereseiten-weg__feld:not([hidden]) .karriereseiten-weg__handy > span:nth-child(3) { animation-delay: .5s; }
.karriereseiten-weg__feld:not([hidden]) .karriereseiten-weg__handy > span:nth-child(4) { animation-delay: .75s; }
.karriereseiten-weg__feld:not([hidden]) .karriereseiten-weg__handy > span:nth-child(5) { animation-delay: 1s; }
.karriereseiten-weg__text h3 { font: italic 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.005em; }
.karriereseiten-weg__text ol { margin-top: 18px; border-top: 1px solid var(--tinte); counter-reset: karriereseiten-w; }
.karriereseiten-weg__text ol li { counter-increment: karriereseiten-w; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.karriereseiten-weg__text ol li::before { content: counter(karriereseiten-w); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: italic 400 17px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); }
.karriereseiten-weg__text ol b { font-size: 16.5px; }
.karriereseiten-weg__text ol span { font-size: 15px; line-height: 1.5; color: var(--leise); }
.karriereseiten-weg__feld:not([hidden]) .karriereseiten-weg__text ol li { animation: aufbau .45s var(--weich) both; animation-delay: calc(.15s + var(--n) * .18s); }
.karriereseiten-weg__feld--alt .karriereseiten-weg__text ol li::before { color: #962c13; box-shadow: inset 0 0 0 1.5px rgba(150, 44, 19, .35); }
.karriereseiten-weg__feld--neu .karriereseiten-weg__text ol li::before { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.karriereseiten-weg__fazit { margin-top: 18px; padding: 14px 18px; border-radius: 14px; font-size: 16px; line-height: 1.5; background: var(--creme); }
.karriereseiten-weg__feld--alt .karriereseiten-weg__fazit { box-shadow: inset 3px 0 0 #962c13; }
.karriereseiten-weg__feld--neu .karriereseiten-weg__fazit { box-shadow: inset 3px 0 0 var(--bernstein-tief); }
.karriereseiten-weg__hinweis { margin-top: 14px; font-size: 13.5px; color: var(--leise); }
.karriereseiten-wege__notiz { display: flex; align-items: flex-start; gap: 14px; max-width: 58em; margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--linie); font-size: 16px; line-height: 1.6; color: var(--leise); }
.karriereseiten-wege__notiz .symbol { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--bernstein-text); }
.karriereseiten-wege__notiz b { color: var(--tinte); }
@media (max-width: 960px) {
  .karriereseiten-weg__feld { grid-template-columns: minmax(0, 1fr); }
  .karriereseiten-weg__handy { width: min(100%, 300px); height: auto; min-height: 380px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .karriereseiten-weg__wahl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .karriereseiten-weg__feld { padding: 22px 16px; border-radius: 24px; }
  .karriereseiten-weg__handy { min-height: 340px; padding: 40px 14px 18px; border-radius: 30px; }
}

/* ---------- Google for Jobs: Regeln als Reiter, rechts die Prüfliste ---------- */
.karriereseiten-jobs__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 44px); align-items: start; }
.karriereseiten-regeln { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3.2vw, 44px); border-radius: 30px; color: var(--hell); background: radial-gradient(80% 60% at 0% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 110px -60px rgba(40, 25, 10, .8); }
.karriereseiten-regeln__wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.karriereseiten-regeln__wahl [role="tab"] { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .18); color: #e1d5c5; font: 600 14.5px var(--grotesk); cursor: pointer; transition: background .25s, color .25s; }
.karriereseiten-regeln__wahl [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.karriereseiten-regeln__wahl [role="tab"][aria-selected="true"] { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.karriereseiten-regeln__feld { animation: auftritt .4s var(--weich) both; }
.karriereseiten-regeln__feld[hidden] { display: none; }
.karriereseiten-regeln__satz { font: italic 400 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); color: var(--hell); }
.karriereseiten-regeln__satz em { color: var(--bernstein-licht); }
.karriereseiten-regeln__feld > p:not(.karriereseiten-regeln__satz) { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--hell-leise); }
.karriereseiten-regeln__felder { display: grid; gap: 8px; margin-top: 16px; }
.karriereseiten-regeln__felder li { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.karriereseiten-regeln__felder code { font: 600 13.5px/1.2 ui-monospace, Consolas, monospace; color: var(--bernstein-licht); }
.karriereseiten-regeln__felder span { font-size: 14.5px; line-height: 1.45; color: #e9dfd2; }
.karriereseiten-regeln__quelle { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie-dunkel); font-size: 13.5px; line-height: 1.5; color: var(--hell-leise); }
.karriereseiten-pruefliste h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.karriereseiten-pruefliste__punkte { border-top: 1px solid var(--tinte); }
.karriereseiten-pruefliste__punkte label { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; padding: 14px 6px 14px 0; border-bottom: 1px solid var(--linie); cursor: pointer; transition: background .25s; }
.karriereseiten-pruefliste__punkte input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bernstein-tief); cursor: pointer; }
.karriereseiten-pruefliste__punkte b { font-size: 16.5px; line-height: 1.35; }
.karriereseiten-pruefliste__punkte small { grid-column: 2; font-size: 14.5px; line-height: 1.5; color: #962c13; }
.karriereseiten-pruefliste__punkte label:has(input:checked) { background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 80%); }
.karriereseiten-pruefliste__punkte label:has(input:checked) small { display: none; }
.karriereseiten-pruefliste__punkte label:has(input:checked) b::after { content: "  erfüllt"; font-size: 13px; font-weight: 700; color: var(--bernstein-text); }
.karriereseiten-pruefliste__fuss { flex-wrap: wrap; }
.karriereseiten-pruefliste__fuss [hidden] { display: none; }
.karriereseiten-pruefliste__stand { white-space: nowrap; font-size: 15px; color: var(--leise); }
.karriereseiten-pruefliste__stand b { font: italic 400 36px/1 var(--serif); color: var(--bernstein-text); }
.karriereseiten-pruefliste__deutung { flex: 1 1 220px; font-size: 15px; line-height: 1.5; color: var(--leise); }
@media (max-width: 1099px) { .karriereseiten-jobs__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .karriereseiten-regeln { padding: 22px 18px; border-radius: 24px; }
  .karriereseiten-regeln__felder li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .karriereseiten-pruefliste .werkzeug__fuss .knopf { width: 100%; }
}

/* ---------- Messung: vier Säulen, Diagnose rechts ---------- */
.karriereseiten-mess { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(28px, 4vw, 64px); align-items: end; }
.karriereseiten-mess__saeulen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; padding-bottom: 4px; border-bottom: 1px solid var(--tinte); }
.karriereseiten-mess__saeulen [role="tab"] { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; height: 330px; padding: 0 0 14px; border: 0; background: none; color: var(--tinte); font-family: var(--grotesk); text-align: left; cursor: pointer; }
.karriereseiten-mess__saeule { position: relative; display: block; height: calc(var(--h) * 230px); border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #e9dfd0, #ddd0bc); transition: background .3s, transform .35s var(--weich), box-shadow .3s; }
.karriereseiten-mess__saeule i { position: absolute; inset: 10px 10px auto; height: 3px; border-radius: 3px; background: rgba(138, 79, 0, .3); }
.karriereseiten-mess__saeulen [role="tab"] b { min-height: 2.5em; font-size: 15.5px; line-height: 1.25; }
.karriereseiten-mess__saeulen [role="tab"]:hover .karriereseiten-mess__saeule { transform: translateY(-4px); }
.karriereseiten-mess__saeulen [role="tab"]:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 4px; border-radius: 12px; }
.karriereseiten-mess__saeulen [role="tab"][aria-selected="true"] .karriereseiten-mess__saeule { background: linear-gradient(180deg, var(--bernstein-licht), var(--bernstein-tief)); box-shadow: 0 24px 40px -22px rgba(228, 143, 23, .9); }
.karriereseiten-mess__saeulen [role="tab"][aria-selected="true"] .karriereseiten-mess__saeule i { background: rgba(255, 255, 255, .6); }
.karriereseiten-mess__felder { min-width: 0; }
.karriereseiten-mess__feld { position: relative; display: grid; gap: 12px; padding: clamp(26px, 3vw, 40px); border-radius: 26px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); animation: auftritt .4s var(--weich) both; }
.karriereseiten-mess__feld[hidden] { display: none; }
.karriereseiten-mess__feld > span { position: absolute; right: 24px; top: 8px; font: italic 400 84px/1 var(--serif); color: rgba(138, 79, 0, .14); }
.karriereseiten-mess__frage { position: relative; font: italic 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); color: var(--tinte); }
.karriereseiten-mess__feld > p:not(.karriereseiten-mess__frage) { position: relative; font-size: 17.5px; line-height: 1.55; color: var(--leise); }
.karriereseiten-mess__feld .knopf { justify-self: start; margin-top: 4px; }
.karriereseiten-mess__hinweis { grid-column: 1 / -1; font-size: 13.5px; color: var(--leise); }
@media (max-width: 960px) { .karriereseiten-mess { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .karriereseiten-mess__saeulen { gap: 6px; }
  .karriereseiten-mess__saeulen [role="tab"] { height: 230px; gap: 8px; }
  .karriereseiten-mess__saeule { height: calc(var(--h) * 150px); border-radius: 10px 10px 4px 4px; }
  .karriereseiten-mess__saeulen [role="tab"] b { min-height: 3.6em; font-size: 12.5px; }
  .karriereseiten-mess__feld .knopf { justify-self: stretch; }
}

/* ---------- Gehalt: dunkles Band mit Gehaltskarte ---------- */
.karriereseiten-gehalt__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.karriereseiten-gehalt h2 { max-width: 13em; }
.karriereseiten-gehalt__text { max-width: 34em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--hell-leise); }
.karriereseiten-gehalt__text strong { color: var(--hell); }
.karriereseiten-gehalt__karte { display: grid; gap: 16px; transform: rotate(1.2deg); }
.karriereseiten-gehalt__spanne { display: grid; gap: 4px; padding: 28px 30px; border-radius: 22px; color: var(--tinte); background: #f6efe6; box-shadow: 0 0 0 1.5px var(--bernstein), 0 40px 70px -40px rgba(0, 0, 0, .9); }
.karriereseiten-gehalt__spanne small { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bernstein-text); }
.karriereseiten-gehalt__spanne b { font: italic 400 clamp(38px, 3.6vw, 52px)/1.05 var(--serif); }
.karriereseiten-gehalt__spanne span { font-size: 15px; color: var(--leise); }
.karriereseiten-gehalt__recht { padding: 22px 26px; border-radius: 20px; background: rgba(255, 244, 228, .06); box-shadow: inset 3px 0 0 var(--bernstein), inset 0 0 0 1px rgba(246, 239, 230, .1); }
.karriereseiten-gehalt__recht h3 { font: italic 400 24px/1.15 var(--serif); color: var(--bernstein-licht); }
.karriereseiten-gehalt__recht p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: #e1d5c5; }
@media (max-width: 960px) { .karriereseiten-gehalt__raster { grid-template-columns: minmax(0, 1fr); } .karriereseiten-gehalt__karte { transform: none; } }

/* ---------- Preislogik ---------- */
.karriereseiten-preis { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); align-items: center; }
.karriereseiten-preis h2 { font-size: clamp(32px, 3.6vw, 50px); }
.karriereseiten-preis h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.karriereseiten-preis__lead { max-width: 32em; margin: 16px 0 24px; font-size: 18px; line-height: 1.6; color: var(--leise); }
@media (max-width: 960px) { .karriereseiten-preis { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Zusatz Anzeigen in KI-Assistenten (ki-anzeigen/index.html, Quelle _werkzeug/seiten/25-ki-anzeigen.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix ki-anzeigen-. Die alte Datei teile/zusatz/ki-anzeigen.css
   (ki-anzeigen-plattform*, -eignung, -tabelle, -stand, -legende, -ampel--grau) bleibt für den alten Rahmen; diese Namen
   werden hier nicht verwendet.
   Enthält: Live-Szene „Testplan mit Budgetgrenze“, datierte Plattform-Ampel mit Filter, Eignungs-Selbsttest,
   Umdenk-Tabelle mit Umschalter, Budgetschutz, zwei Töpfe (Preislogik), Wegweiser mit drei Fragen.
   Skripte: keine eigenen, nur data-reiter und data-zaehlen aus ares.js, sonst :has().
   ========================================================================== */

/* ---------- Einstieg: Szene „Testplan mit Budgetgrenze“ ---------- */
.ki-anzeigen-sz-test .sz-kopf { margin-bottom: 12px; }
.ki-anzeigen-sz-plan { display: grid; gap: 6px; margin: 0; }
.ki-anzeigen-sz-plan > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 12px; border-radius: 12px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.ki-anzeigen-sz-plan dt { font-size: 12.5px; color: #b5a796; }
.ki-anzeigen-sz-plan dd { position: relative; margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--hell); white-space: nowrap; text-overflow: ellipsis; }
.ist-aktiv .ki-anzeigen-sz-plan > div { animation: eingang .6s var(--weich) both; animation-delay: calc(.3s + var(--i) * .35s); }
.ist-aktiv .ki-anzeigen-sz-plan dd { animation: ki-anzeigen-tippen 1s steps(18) both; animation-delay: calc(.55s + var(--i) * .35s); }
@keyframes ki-anzeigen-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.ki-anzeigen-sz-budget { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; }
.ki-anzeigen-sz-budget__name { font-size: 12.5px; color: #cdbfae; }
.ki-anzeigen-sz-budget__bahn { position: relative; height: 18px; border-radius: 999px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.ki-anzeigen-sz-budget__bahn i { position: absolute; inset: 3px auto 3px 3px; width: calc(78% - 6px); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 16px rgba(244, 165, 58, .5); transform-origin: left; }
.ki-anzeigen-sz-budget__bahn::after { content: ""; position: absolute; left: 78%; top: -8px; bottom: -8px; border-left: 2px dashed var(--hell); }
.ki-anzeigen-sz-budget__bahn b { position: absolute; left: 78%; top: -26px; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--hell); white-space: nowrap; }
.ist-aktiv .ki-anzeigen-sz-budget { animation: auftritt .5s var(--weich) 1.5s both; }
.ist-aktiv .ki-anzeigen-sz-budget__bahn i { animation: ki-anzeigen-ausgeben 2.2s cubic-bezier(.3, .1, .2, 1) 1.8s both; }
@keyframes ki-anzeigen-ausgeben { from { transform: scaleX(0); } 85% { transform: scaleX(1.015); } to { transform: scaleX(1); } }

.ki-anzeigen-sz-vergleich { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px 12px; margin-top: 16px; font-size: 12.5px; color: #cdbfae; }
.ki-anzeigen-sz-vergleich i { position: relative; height: 6px; overflow: hidden; border-radius: 6px; background: rgba(246, 239, 230, .08); }
.ki-anzeigen-sz-vergleich i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: rgba(205, 191, 174, .55); transform-origin: left; }
.ki-anzeigen-sz-vergleich i:first-of-type::after { background: var(--bernstein-licht); }
.ist-aktiv .ki-anzeigen-sz-vergleich { animation: auftritt .5s var(--weich) 3.6s both; }
.ist-aktiv .ki-anzeigen-sz-vergleich i::after { animation: ki-anzeigen-wachsen 1s var(--weich) 3.9s both; }
@keyframes ki-anzeigen-wachsen { from { transform: scaleX(0); } }

.ki-anzeigen-sz-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.ki-anzeigen-sz-wahl li { display: grid; place-items: center; min-height: 36px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #cdbfae; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.ist-aktiv .ki-anzeigen-sz-wahl li { animation: ki-anzeigen-leuchten 1.1s ease both; animation-delay: calc(4.8s + var(--i) * .9s); }
@keyframes ki-anzeigen-leuchten { 0% { opacity: .4; } 35%, 65% { color: var(--tinte); background: var(--bernstein); box-shadow: 0 0 22px rgba(244, 165, 58, .55); opacity: 1; } 100% { opacity: 1; } }
.ki-anzeigen-sz-fuss { margin-top: 10px; font: italic 400 17px/1.2 var(--serif); color: var(--bernstein-licht); text-align: center; }
@media (min-width: 1100px) and (max-height: 800px) {
  .ki-anzeigen-sz-plan > div { padding-block: 5px; }
  .ki-anzeigen-sz-vergleich { margin-top: 12px; }
  .ki-anzeigen-sz-fuss { display: none; }
}
@media (max-width: 760px) {
  .ki-anzeigen-sz-test .sz-kopf { margin-bottom: 6px; }
  .ki-anzeigen-sz-plan, .ki-anzeigen-sz-vergleich, .ki-anzeigen-sz-fuss { display: none; }
  .ki-anzeigen-sz-budget { margin-top: 22px; gap: 10px; }
  .ki-anzeigen-sz-budget__bahn { height: 14px; }
  .ki-anzeigen-sz-budget__bahn b { top: -19px; font-size: 11px; }
  .ki-anzeigen-sz-wahl { margin-top: 14px; gap: 6px; }
  .ki-anzeigen-sz-wahl li { min-height: 28px; border-radius: 9px; font-size: 12px; }
  .ist-aktiv .ki-anzeigen-sz-wahl li { animation-delay: calc(3.8s + var(--i) * .9s); }
}

/* ---------- Einstieg: Aussage ---------- */
.ki-anzeigen-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.18em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) {
  .ki-anzeigen-einstieg .einstieg__aussage { font-size: clamp(38px, min(4.4vw, 7.4svh), 62px); }
  .ki-anzeigen-einstieg .einstieg__lead { font-size: 18px; }
}

/* ---------- gemeinsame Kleinteile ---------- */
.ki-anzeigen-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ki-anzeigen-ampel-grau { background: #e9e3da; color: #5d5449; }
.ki-anzeigen-punkt { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; }
.ki-anzeigen-punkt--gruen { background: #2f8a4f; }
.ki-anzeigen-punkt--gelb { background: #d9a21b; }
.ki-anzeigen-punkt--rot { background: #c0452a; }

/* ---------- Plattform-Ampel mit Filter (Alleinstellung) ---------- */
.ki-anzeigen-markt__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 56px; margin-bottom: clamp(32px, 4vw, 52px); }
.ki-anzeigen-markt__kopf h2 { max-width: 14em; }
.ki-anzeigen-markt__kopf p:not(.ki-anzeigen-markt__stand) { max-width: 36em; margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.ki-anzeigen-markt__stand { display: grid; justify-items: center; align-content: center; width: 168px; height: 168px; border-radius: 50%; text-align: center; color: var(--hell); background: radial-gradient(circle at 40% 30%, #3a2f26, #17130f); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), inset 0 0 0 7px #241e19, inset 0 0 0 8px rgba(244, 165, 58, .35), 0 30px 60px -30px rgba(40, 25, 10, .8); transform: rotate(-6deg); }
.ki-anzeigen-markt__stand span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bernstein-licht); }
.ki-anzeigen-markt__stand b { margin-top: 2px; font: italic 400 30px/1 var(--serif); }
.ki-anzeigen-markt__stand small { font-size: 15px; color: var(--hell-leise); }
.ki-anzeigen-markt__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }
.ki-anzeigen-markt__filter legend { float: left; margin-right: 14px; padding: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--leise); }
.ki-anzeigen-markt__filter label { position: relative; cursor: pointer; }
.ki-anzeigen-markt__filter input { position: absolute; opacity: 0; pointer-events: none; }
.ki-anzeigen-markt__filter span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.ki-anzeigen-markt__filter label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.ki-anzeigen-markt__filter input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: 0 0 0 3px rgba(244, 165, 58, .3); }
.ki-anzeigen-markt__filter input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-anzeigen-markt__liste { border-top: 2px solid var(--tinte); }
.ki-anzeigen-markt__zeile { --farbe: #2f8a4f; position: relative; display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8fr); gap: 16px clamp(28px, 4vw, 64px); padding: 30px 0 30px 26px; border-bottom: 1px solid var(--linie); transition: opacity .35s, filter .35s, background .35s; }
.ki-anzeigen-markt__zeile::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 4px; border-radius: 4px; background: var(--farbe); }
.ki-anzeigen-markt__zeile--gelb { --farbe: #d9a21b; }
.ki-anzeigen-markt__zeile--rot { --farbe: #c0452a; }
.ki-anzeigen-markt__zeile--rot:has(.ki-anzeigen-ampel-grau) { --farbe: #b5a796; }
.ki-anzeigen-markt__name { display: grid; align-content: start; justify-items: start; gap: 4px; }
.ki-anzeigen-markt__name h3 { margin: 0; font: italic 400 clamp(32px, 3vw, 44px)/1 var(--serif); letter-spacing: -.01em; }
.ki-anzeigen-markt__name span { font-size: 14.5px; color: var(--leise); }
.ki-anzeigen-markt__name .ampel { margin-top: 12px; font-size: 13px; padding: 5px 12px; }
.ki-anzeigen-markt__inhalt > p:first-child { max-width: 46em; font-size: 17.5px; line-height: 1.6; }
.ki-anzeigen-markt__inhalt dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 18px 0 0; }
.ki-anzeigen-markt__inhalt dl div { padding-top: 10px; border-top: 1px dashed #d8ccbb; }
.ki-anzeigen-markt__inhalt dt { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--bernstein-text); }
.ki-anzeigen-markt__inhalt dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.ki-anzeigen-markt__quelle { margin-top: 14px; font-size: 13px; color: var(--leise); font-style: italic; }
.ki-anzeigen-markt__werk:has(#ki-filter-gruen:checked) .ki-anzeigen-markt__zeile:not(.ki-anzeigen-markt__zeile--gruen),
.ki-anzeigen-markt__werk:has(#ki-filter-gelb:checked) .ki-anzeigen-markt__zeile:not(.ki-anzeigen-markt__zeile--gelb),
.ki-anzeigen-markt__werk:has(#ki-filter-rot:checked) .ki-anzeigen-markt__zeile:not(.ki-anzeigen-markt__zeile--rot) { opacity: .28; filter: grayscale(1); }
.ki-anzeigen-markt__werk:has(#ki-filter-gruen:checked) .ki-anzeigen-markt__zeile--gruen,
.ki-anzeigen-markt__werk:has(#ki-filter-gelb:checked) .ki-anzeigen-markt__zeile--gelb,
.ki-anzeigen-markt__werk:has(#ki-filter-rot:checked) .ki-anzeigen-markt__zeile--rot { background: linear-gradient(90deg, rgba(244, 165, 58, .08), rgba(244, 165, 58, 0) 70%); }
.ki-anzeigen-markt__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 30px; padding: 22px 26px; border-radius: 20px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-anzeigen-markt__fuss p { flex: 1 1 420px; font-size: 16px; line-height: 1.55; color: var(--leise); }
.ki-anzeigen-markt__fuss b { color: var(--tinte); }
@media (max-width: 860px) {
  .ki-anzeigen-markt__kopf { grid-template-columns: minmax(0, 1fr); }
  .ki-anzeigen-markt__stand { width: 130px; height: 130px; }
  .ki-anzeigen-markt__stand b { font-size: 24px; }
  .ki-anzeigen-markt__zeile { grid-template-columns: minmax(0, 1fr); padding-left: 20px; }
  .ki-anzeigen-markt__name { grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 12px; }
  .ki-anzeigen-markt__name .ampel { margin-top: 0; justify-self: end; }
}
@media (max-width: 560px) {
  .ki-anzeigen-markt__filter legend { float: none; width: 100%; padding: 0 0 6px; }
  .ki-anzeigen-markt__filter span { min-height: 42px; padding: 0 14px; font-size: 14.5px; }
  .ki-anzeigen-markt__name { grid-template-columns: minmax(0, 1fr) auto; }
  .ki-anzeigen-markt__name span { grid-row: 2; }
  .ki-anzeigen-markt__name .ampel { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .ki-anzeigen-markt__inhalt dl { grid-template-columns: minmax(0, 1fr); }
  .ki-anzeigen-markt__fuss { padding: 20px 18px; }
  .ki-anzeigen-markt__fuss .knopf { width: 100%; }
}

/* ---------- Sorgen auf Creme ---------- */
.ki-anzeigen-sorgen .sorgen__ergebnis .ki-anzeigen-knoepfe { margin-top: 4px; }

/* ---------- Eignungs-Selbsttest (dunkel) ---------- */
.ki-anzeigen-eignung2__werk { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.ki-anzeigen-eignung2__fragen { display: grid; gap: 30px; }
.ki-anzeigen-eignung2__frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.ki-anzeigen-eignung2__frage legend { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding: 0; font-size: 19px; font-weight: 600; color: var(--hell); }
.ki-anzeigen-eignung2__frage legend span { font: italic 400 26px/1 var(--serif); color: var(--bernstein-licht); }
.ki-anzeigen-eignung2__branchen, .ki-anzeigen-eignung2__messung { display: flex; flex-wrap: wrap; gap: 8px; }
.ki-anzeigen-eignung2__frage label { position: relative; cursor: pointer; }
.ki-anzeigen-eignung2__frage input { position: absolute; opacity: 0; pointer-events: none; }
.ki-anzeigen-eignung2__frage label span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 18px; border-radius: 999px; font-size: 15.5px; line-height: 1.3; color: var(--hell); background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); transition: background .25s, color .25s, box-shadow .25s; }
.ki-anzeigen-ja span::before, .ki-anzeigen-nein span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4fbf74; }
.ki-anzeigen-nein span::before { background: #e25b3a; }
.ki-anzeigen-eignung2__frage label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.ki-anzeigen-eignung2__frage input:checked + span { color: var(--tinte); background: var(--bernstein); box-shadow: 0 10px 24px -12px rgba(244, 165, 58, .8); }
.ki-anzeigen-eignung2__frage input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 3px; }
.ki-anzeigen-eignung2__karte { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 14px; min-height: 300px; padding: clamp(24px, 3vw, 36px); border-radius: 26px; color: var(--tinte); background: #fffdf9; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); transform: rotate(-.6deg); }
.ki-anzeigen-eignung2__karte > div { display: grid; align-content: start; justify-items: start; gap: 12px; animation: auftritt .45s var(--weich) both; }
.ki-anzeigen-eignung2__karte b { font: italic 400 clamp(26px, 2.3vw, 32px)/1.12 var(--serif); }
.ki-anzeigen-eignung2__karte p { font-size: 16px; line-height: 1.55; color: var(--leise); }
.ki-anzeigen-eignung2__karte .ampel { font-size: 13px; padding: 5px 12px; }
.ki-anzeigen-eignung2__stand { align-self: end; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 13px !important; }
.ki-anzeigen-eignung2__ergebnis { display: none !important; }
.ki-anzeigen-eignung2__werk:has(#ki-b-recht:checked, #ki-b-gesundheit:checked, #ki-b-finanzen:checked) .ki-anzeigen-eignung2__ergebnis--gesperrt,
.ki-anzeigen-eignung2__werk:has(#ki-b-sonst:checked):has([name="ki-messung"]:checked) .ki-anzeigen-eignung2__ergebnis--offen,
.ki-anzeigen-eignung2__werk:has(.ki-anzeigen-ja input:checked):has(#ki-m-ja:checked) .ki-anzeigen-eignung2__ergebnis--test,
.ki-anzeigen-eignung2__werk:has(.ki-anzeigen-ja input:checked):has(#ki-m-nein:checked) .ki-anzeigen-eignung2__ergebnis--messung { display: grid !important; }
.ki-anzeigen-eignung2__werk:has(.ki-anzeigen-nein input:checked) .ki-anzeigen-eignung2__leer,
.ki-anzeigen-eignung2__werk:has([name="ki-branche"]:checked):has([name="ki-messung"]:checked) .ki-anzeigen-eignung2__leer { display: none; }
.ki-anzeigen-eignung2__notiz { max-width: 62em; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); font-size: 15.5px; line-height: 1.6; color: var(--hell-leise); }
@media (max-width: 960px) {
  .ki-anzeigen-eignung2__werk { grid-template-columns: minmax(0, 1fr); }
  .ki-anzeigen-eignung2__karte { position: static; min-height: 0; transform: none; }
}
@media (max-width: 560px) {
  .ki-anzeigen-eignung2__frage label span { padding: 8px 14px; font-size: 14.5px; }
  .ki-anzeigen-eignung2__karte .knopf { width: 100%; }
}

/* ---------- Leistungsumfang: Fuß ---------- */
.ki-anzeigen-umfang__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tinte); }
.ki-anzeigen-umfang__fuss p { font: italic 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.ki-anzeigen-knopf-hell { color: var(--tinte) !important; box-shadow: inset 0 0 0 1.5px var(--tinte) !important; background: transparent !important; }
@media (max-width: 560px) { .ki-anzeigen-umfang__fuss .knopf { width: 100%; } }

/* ---------- Umdenk-Tabelle mit Umschalter ---------- */
.ki-anzeigen-umdenken__schalter { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 5px; border: 0; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-anzeigen-umdenken__schalter legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ki-anzeigen-umdenken__schalter label { position: relative; cursor: pointer; }
.ki-anzeigen-umdenken__schalter input { position: absolute; opacity: 0; pointer-events: none; }
.ki-anzeigen-umdenken__schalter span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--leise); transition: background .25s, color .25s; }
.ki-anzeigen-umdenken__schalter input:checked + span { color: var(--hell); background: var(--espresso); }
.ki-anzeigen-umdenken__schalter input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-anzeigen-umdenken__tafel { overflow: hidden; border-radius: 26px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.ki-anzeigen-umdenken__tafel table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ki-anzeigen-umdenken__tafel caption { padding: 22px 26px 6px; text-align: left; font: italic 400 22px/1.25 var(--serif); }
.ki-anzeigen-umdenken__tafel th, .ki-anzeigen-umdenken__tafel td { padding: 17px 26px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); transition: background .3s, color .3s, opacity .3s; }
.ki-anzeigen-umdenken__tafel thead th { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--leise); border-bottom: 1.5px solid var(--tinte); }
.ki-anzeigen-umdenken__tafel tbody th { width: 26%; font-weight: 700; }
.ki-anzeigen-umdenken__tafel td { color: var(--leise); }
.ki-anzeigen-umdenken__tafel tbody tr:last-child > * { border-bottom: 0; }
.ki-anzeigen-umdenken__werk:has(#ki-sicht-chatgpt:checked) tr > :nth-child(2),
.ki-anzeigen-umdenken__werk:has(#ki-sicht-google:checked) tr > :nth-child(3) { color: var(--tinte); background: linear-gradient(180deg, rgba(244, 165, 58, .16), rgba(244, 165, 58, .07)); font-weight: 600; }
.ki-anzeigen-umdenken__werk:has(#ki-sicht-chatgpt:checked) thead tr > :nth-child(2),
.ki-anzeigen-umdenken__werk:has(#ki-sicht-google:checked) thead tr > :nth-child(3) { color: var(--bernstein-text); }
@media (max-width: 760px) {
  .ki-anzeigen-umdenken__schalter { display: flex; }
  .ki-anzeigen-umdenken__schalter label { flex: 1; }
  .ki-anzeigen-umdenken__schalter span { justify-content: center; width: 100%; }
  .ki-anzeigen-umdenken__tafel caption { padding: 18px 18px 6px; font-size: 19px; }
  .ki-anzeigen-umdenken__tafel thead { display: none; }
  .ki-anzeigen-umdenken__tafel tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px 18px; border-bottom: 1px solid var(--linie); }
  .ki-anzeigen-umdenken__tafel tbody tr:last-child { border-bottom: 0; }
  .ki-anzeigen-umdenken__tafel th, .ki-anzeigen-umdenken__tafel td { width: auto !important; padding: 0; border: 0; background: none !important; }
  .ki-anzeigen-umdenken__tafel tbody th { font-size: 14px; color: var(--bernstein-text); }
  .ki-anzeigen-umdenken__tafel td { margin-top: 4px; font-size: 16px; }
  .ki-anzeigen-umdenken__werk:has(#ki-sicht-chatgpt:checked) tbody td:nth-child(3),
  .ki-anzeigen-umdenken__werk:has(#ki-sicht-google:checked) tbody td:nth-child(2) { display: none; }
}

/* ---------- Budgetschutz und Preis mit zwei Töpfen ---------- */
.ki-anzeigen-geld { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.ki-anzeigen-schutz { position: sticky; top: calc(var(--kopf-h) + 24px); padding: clamp(26px, 3vw, 40px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 0% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.ki-anzeigen-schutz__titel { margin: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(26px, 2.3vw, 32px)/1.12 var(--serif); }
.ki-anzeigen-schutz__titel em { color: var(--bernstein-licht); }
.ki-anzeigen-schutz ol { counter-reset: ki-s; }
.ki-anzeigen-schutz li { counter-increment: ki-s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 16px; line-height: 1.45; color: #e9dfd2; }
.ki-anzeigen-schutz li::before { content: counter(ki-s, upper-roman); font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-licht); }
.ki-anzeigen-person { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14.5px; line-height: 1.45; color: var(--hell-leise); }
.ki-anzeigen-person img { flex: none; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(244, 165, 58, .5); }
.ki-anzeigen-person b { color: var(--hell); }
.ki-anzeigen-preis h2 { font-size: clamp(32px, 3.6vw, 50px); }
.ki-anzeigen-preis > p:not(.ki-anzeigen-preis__notiz) { max-width: 34em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.ki-anzeigen-toepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.ki-anzeigen-topf { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "gefaess name" "gefaess text"; align-items: center; column-gap: 18px; padding: 20px; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-anzeigen-topf b { grid-area: name; align-self: end; font: italic 400 26px/1.1 var(--serif); }
.ki-anzeigen-topf > span:last-child { grid-area: text; align-self: start; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--leise); }
.ki-anzeigen-topf__gefaess { grid-area: gefaess; position: relative; width: 64px; height: 84px; overflow: hidden; border-radius: 10px 10px 22px 22px; background: rgba(255, 253, 249, .9); box-shadow: inset 0 0 0 2px var(--tinte); }
.ki-anzeigen-topf__gefaess i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: calc(var(--h) * 100% - 8px); border-radius: 6px 6px 18px 18px; background: linear-gradient(180deg, rgba(138, 79, 0, .25), rgba(138, 79, 0, .5)); }
.ki-anzeigen-topf--budget .ki-anzeigen-topf__gefaess i { background: linear-gradient(180deg, var(--bernstein-licht), var(--bernstein-tief)); }
.ki-anzeigen-topf__gefaess s { position: absolute; left: -2px; right: -2px; bottom: calc(.86 * 100%); border-top: 2px dashed var(--tinte); }
.ki-anzeigen-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: ki-pw; }
.ki-anzeigen-preis__weg li { counter-increment: ki-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.ki-anzeigen-preis__weg li::before { content: counter(ki-pw, upper-roman); grid-row: span 2; font: italic 400 26px/1.1 var(--serif); color: var(--bernstein-text); }
.ki-anzeigen-preis__weg b { font-size: 18px; }
.ki-anzeigen-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.ki-anzeigen-preis__faktoren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 26px 0 0; }
.ki-anzeigen-preis__faktoren dt { grid-column: 1 / -1; font: italic 400 24px/1.2 var(--serif); color: var(--bernstein-text); }
.ki-anzeigen-preis__faktoren dd { margin: 0; padding-top: 10px; border-top: 1px dashed #d8ccbb; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.ki-anzeigen-preis__faktoren dd b { display: block; color: var(--tinte); }
.ki-anzeigen-preis__notiz { margin-top: 22px; padding: 14px 18px; border-left: 3px solid var(--bernstein); font-size: 14.5px; line-height: 1.55; color: var(--leise); background: var(--creme); border-radius: 0 12px 12px 0; }
@media (max-width: 960px) {
  .ki-anzeigen-geld { grid-template-columns: minmax(0, 1fr); }
  .ki-anzeigen-schutz { position: static; }
}
@media (max-width: 560px) {
  .ki-anzeigen-toepfe, .ki-anzeigen-preis__faktoren { grid-template-columns: minmax(0, 1fr); }
  .ki-anzeigen-schutz { padding: 24px 20px; border-radius: 22px; }
}

/* ---------- Wegweiser mit drei Fragen (Spalten, Ergebnis als Band) ---------- */
.ki-anzeigen-lotse { margin-top: clamp(64px, 7vw, 112px); }
.ki-anzeigen-lotse h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.ki-anzeigen-lotse__fragen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ki-anzeigen-lotse__frage { display: grid; align-content: start; gap: 8px; margin: 0; padding: 22px 24px 24px; border: 0; min-width: 0; }
.ki-anzeigen-lotse__frage + .ki-anzeigen-lotse__frage { border-left: 1px solid var(--linie); }
.ki-anzeigen-lotse__frage legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; padding: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ki-anzeigen-lotse__frage legend span { font: italic 400 24px/1 var(--serif); color: var(--bernstein-text); }
.ki-anzeigen-lotse__frage label { position: relative; cursor: pointer; }
.ki-anzeigen-lotse__frage input { position: absolute; opacity: 0; pointer-events: none; }
.ki-anzeigen-lotse__frage label span { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.35; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.ki-anzeigen-lotse__frage label span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--leise); transition: box-shadow .25s; }
.ki-anzeigen-lotse__frage label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.ki-anzeigen-lotse__frage input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: 0 0 0 3px rgba(244, 165, 58, .3); }
.ki-anzeigen-lotse__frage input:checked + span::before { box-shadow: inset 0 0 0 5px var(--bernstein); }
.ki-anzeigen-lotse__frage input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-anzeigen-lotse__band { display: grid; gap: 14px; margin-top: 18px; padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px); border-radius: 22px; color: var(--hell); background: linear-gradient(100deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.ki-anzeigen-lotse__leer { font: italic 400 22px/1.3 var(--serif); color: var(--hell-leise); }
.ki-anzeigen-lotse__wahl { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; animation: auftritt .45s var(--weich) both; }
.ki-anzeigen-lotse__wahl p { flex: 1 1 380px; font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.ki-anzeigen-lotse__wahl p b { display: block; margin-bottom: 4px; font: italic 400 clamp(24px, 2.2vw, 30px)/1.15 var(--serif); color: var(--hell); }
.ki-anzeigen-lotse__geo { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 14px; border-top: 1px solid var(--linie-dunkel); font-size: 16px; color: #efe5d8; }
.ki-anzeigen-lotse__geo .knopf { color: var(--tinte); background: var(--hell); }
.ki-anzeigen-lotse:has(#ki-l1-reg:checked) .ki-anzeigen-lotse__leer,
.ki-anzeigen-lotse:has([name="ki-l1"]:checked):has([name="ki-l2"]:checked) .ki-anzeigen-lotse__leer { display: none; }
.ki-anzeigen-lotse:has(#ki-l1-reg:checked) .ki-anzeigen-lotse__wahl--gesperrt,
.ki-anzeigen-lotse:has(#ki-l1-andere:checked):has(#ki-l2-ja:checked) .ki-anzeigen-lotse__wahl--test,
.ki-anzeigen-lotse:has(#ki-l1-andere:checked):has(#ki-l2-ohne:checked) .ki-anzeigen-lotse__wahl--grund,
.ki-anzeigen-lotse:has(#ki-l1-andere:checked):has(#ki-l2-nein:checked) .ki-anzeigen-lotse__wahl--grund { display: flex; }
.ki-anzeigen-lotse:has(#ki-l3-dauer:checked) .ki-anzeigen-lotse__geo { display: flex; }
@media (max-width: 960px) {
  .ki-anzeigen-lotse__fragen { grid-template-columns: minmax(0, 1fr); }
  .ki-anzeigen-lotse__frage { padding: 20px 0; }
  .ki-anzeigen-lotse__frage + .ki-anzeigen-lotse__frage { border-left: 0; border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) {
  .ki-anzeigen-lotse__wahl .ki-anzeigen-knoepfe, .ki-anzeigen-lotse__wahl .knopf, .ki-anzeigen-lotse__geo .knopf { width: 100%; }
}

/* ---------- Befund: Reiterleiste bei nur einer Art ausblenden ---------- */
.ki-anzeigen-befund .befund__arten[hidden] { display: none; }
@media (max-width: 380px) {
  .ki-anzeigen-einstieg .einstieg__aussage { font-size: 29px; }
  .ki-anzeigen-einstieg .einstieg__lead { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
}

/* ==========================================================================
   Zusatz KI-Chatbot (ki-chatbot/index.html, Quelle _werkzeug/seiten/36-ki-chatbot.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix ki-chatbot-. Nur Tokens aus :root.
   Die alten Klassen aus teile/zusatz/ki-chatbot.css (fenster, blase, marke, quelle, uebergabe, merkmale, wahl) werden hier NICHT benutzt.
   Enthält: Rückruf mit der häufigsten Kundenfrage (Sprechblase, zweistufig über :has), tippender Platzhalter in CSS,
   Live-Szenen „Quelle“ und „Grenze und Übergabe“, kommentiertes Beispielgespräch mit Klickmarken (Radios und :has),
   Nick-Zähler mit Waage (data-punkte +1/-1, Spaltenzähler über CSS-Zähler), Telefon-Umschalter, Recht, Erstgespräch-Karten,
   Preis-Kopf, Wegweiser als Gesprächsverlauf ohne Skript.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-szenen, data-weg-waehlen aus ares.js.
   ========================================================================== */

/* ---------- Einstieg: Rückruf mit der häufigsten Kundenfrage ---------- */
.ki-chatbot-ruf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frage knopf" "fuss fuss"; gap: 10px; max-width: 650px; margin-top: 26px; }
.ki-chatbot-ruf__frage { grid-area: frage; position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; height: 66px; padding: 0 24px 0 10px; border-radius: 999px 999px 999px 10px; background: #fbf6ee; color: var(--tinte); cursor: text; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 22px 44px -22px rgba(0, 0, 0, .9); transition: box-shadow .25s; }
.ki-chatbot-ruf__frage:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 6px rgba(244, 165, 58, .12), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.ki-chatbot-ruf__frage:focus-within { box-shadow: 0 0 0 2px var(--bernstein), 0 0 0 8px rgba(244, 165, 58, .28), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.ki-chatbot-ruf__blase { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50% 50% 50% 6px; background: var(--espresso); color: var(--bernstein-licht); }
.ki-chatbot-ruf__blase .symbol { width: 21px; height: 21px; }
.ki-chatbot-ruf__innen { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ki-chatbot-ruf__label { font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; color: var(--leise); }
.ki-chatbot-ruf__tippfeld { position: relative; display: block; }
.ki-chatbot-ruf__frage input { width: 100%; height: 28px; padding: 0; border: 0; background: none; color: var(--tinte); font: 400 18.5px/1 var(--grotesk); outline: none; }
.ki-chatbot-tipp { position: absolute; inset: 0; overflow: hidden; pointer-events: none; font: 400 18.5px/28px var(--grotesk); color: #7d7166; }
.ki-chatbot-tipp i { position: absolute; left: 0; top: 0; overflow: hidden; width: 0; font-style: normal; white-space: nowrap; }
.ki-chatbot-tipp i:first-child { width: var(--l); }
.bewegt .ki-chatbot-tipp i { width: 0; opacity: 0; animation: ki-chatbot-tippen 12s steps(32, end) infinite; }
.bewegt .ki-chatbot-tipp i:nth-child(2) { animation-delay: 4s; }
.bewegt .ki-chatbot-tipp i:nth-child(3) { animation-delay: 8s; }
@keyframes ki-chatbot-tippen { 0% { width: 0; opacity: 1; } 18% { width: var(--l); opacity: 1; } 29% { width: var(--l); opacity: 1; } 33% { width: 0; opacity: 1; } 33.4%, 100% { width: 0; opacity: 0; } }
.ki-chatbot-ruf__tippfeld:focus-within .ki-chatbot-tipp, .ki-chatbot-ruf__tippfeld input:not(:placeholder-shown) + .ki-chatbot-tipp { display: none; }
.ki-chatbot-ruf__knopf { grid-area: knopf; min-height: 66px; padding: 0 30px; }
.ki-chatbot-ruf__fuss { grid-area: fuss; display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: #dcd0c0; }
.ki-chatbot-ruf__fuss img { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 239, 230, .25); }
.ki-chatbot-ruf__zwei { grid-area: zwei; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name tel zeit" "ok ok ok"; gap: 12px; padding: 18px; border-radius: 10px 22px 22px 22px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.ki-chatbot-ruf:has(.ki-chatbot-ruf__frage input:not(:placeholder-shown)) { grid-template-areas: "frage frage" "zwei zwei" "fuss knopf"; }
.ki-chatbot-ruf:has(.ki-chatbot-ruf__frage input:not(:placeholder-shown)) .ki-chatbot-ruf__zwei { display: grid; animation: auftritt .5s var(--weich) both; }
.ki-chatbot-ruf:has(.ki-chatbot-ruf__frage input:not(:placeholder-shown)) .ki-chatbot-ruf__knopf { min-height: 56px; }
@supports not selector(:has(*)) { .ki-chatbot-ruf { grid-template-areas: "frage frage" "zwei zwei" "fuss knopf"; } .ki-chatbot-ruf__zwei { display: grid; } }
.ki-chatbot-ruf__zwei > label { min-width: 0; }
.ki-chatbot-ruf__zwei > label:nth-child(1) { grid-area: name; }
.ki-chatbot-ruf__zwei > label:nth-child(2) { grid-area: tel; }
.ki-chatbot-ruf__zwei > label:nth-child(3) { grid-area: zeit; }
.ki-chatbot-ruf__zwei label > span:first-child { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--hell-leise); }
.ki-chatbot-ruf__zwei input:not([type="checkbox"]), .ki-chatbot-ruf__zwei select { width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px; background: rgba(21, 17, 14, .7); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .22); color: var(--hell); font: 400 16.5px var(--grotesk); }
.ki-chatbot-ruf__zwei input:focus, .ki-chatbot-ruf__zwei select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--bernstein-licht); }
.ki-chatbot-ruf__ok { grid-area: ok; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--hell-leise); }
.ki-chatbot-ruf__ok input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--bernstein); }
.ki-chatbot-ruf__ok a { color: var(--hell); }
@media (min-width: 1100px) and (max-height: 800px) {
  .ki-chatbot-ruf { margin-top: 18px; }
  .ki-chatbot-ruf__frage, .ki-chatbot-ruf__knopf { height: 60px; min-height: 60px; }
  .ki-chatbot-ruf__blase { width: 42px; height: 42px; }
}
@media (max-width: 760px) {
  .ki-chatbot-ruf, .ki-chatbot-ruf:has(.ki-chatbot-ruf__frage input:not(:placeholder-shown)) { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .ki-chatbot-ruf { grid-template-areas: "frage" "knopf" "fuss"; }
  .ki-chatbot-ruf:has(.ki-chatbot-ruf__frage input:not(:placeholder-shown)) { grid-template-areas: "frage" "zwei" "knopf" "fuss"; }
  .ki-chatbot-ruf__frage { height: 58px; padding: 0 16px 0 7px; gap: 10px; }
  .ki-chatbot-ruf__blase { width: 42px; height: 42px; }
  .ki-chatbot-ruf__frage input, .ki-chatbot-tipp { font-size: 16.5px; }
  .ki-chatbot-ruf__knopf, .ki-chatbot-ruf:has(.ki-chatbot-ruf__frage input:not(:placeholder-shown)) .ki-chatbot-ruf__knopf { min-height: 50px; }
  .ki-chatbot-ruf__fuss { margin-top: 2px; font-size: 13.5px; line-height: 1.4; }
  .ki-chatbot-ruf__fuss img { width: 28px; height: 28px; }
  .ki-chatbot-ruf__zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "name tel" "zeit zeit" "ok ok"; padding: 14px; gap: 10px; }
}
@media (max-width: 760px) { @supports not selector(:has(*)) { .ki-chatbot-ruf { grid-template-areas: "frage" "zwei" "knopf" "fuss"; } } }

/* ---------- Live-Szenen: Website mit Chatfenster ---------- */
.ki-chatbot-sz { inset: 18px 18px 20px; }
.ki-chatbot-sz-seite { position: absolute; inset: 0 0 auto; height: 70%; overflow: hidden; border-radius: 16px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.ki-chatbot-sz-leiste { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: rgba(246, 239, 230, .07); }
.ki-chatbot-sz-leiste i { width: 7px; height: 7px; border-radius: 50%; background: rgba(246, 239, 230, .25); }
.ki-chatbot-sz-leiste b { margin-left: 10px; padding: 2px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #cdbfae; background: rgba(21, 17, 14, .5); }
.ki-chatbot-sz-skizze { display: grid; gap: 9px; padding: 18px 16px; }
.ki-chatbot-sz-skizze i { height: 9px; width: 62%; border-radius: 5px; background: rgba(246, 239, 230, .1); }
.ki-chatbot-sz-skizze i:first-child { width: 44%; height: 16px; background: rgba(246, 239, 230, .16); }
.ki-chatbot-sz-skizze i:last-child { width: 38%; }
.ki-chatbot-sz-chat { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; width: 84%; padding: 0 14px 14px; overflow: hidden; border-radius: 20px 20px 6px 20px; color: var(--tinte); background: #fbf6ee; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); }
.ki-chatbot-sz-kopf { display: flex; align-items: center; gap: 10px; margin: 0 -14px 4px; padding: 10px 14px; background: var(--creme); border-bottom: 1px solid var(--linie); }
.ki-chatbot-sz-kopf b { display: block; font-size: 13.5px; line-height: 1.2; }
.ki-chatbot-sz-kopf small { display: block; font-size: 11.5px; color: var(--leise); }
.ki-chatbot-sz-bot { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--espresso); color: var(--bernstein-licht); }
.ki-chatbot-sz-bot .symbol { width: 16px; height: 16px; }
.ki-chatbot-sz-b { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.ki-chatbot-sz-b--bot { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--creme); }
.ki-chatbot-sz-b--mensch { align-self: flex-end; border-bottom-right-radius: 4px; color: var(--hell); background: var(--espresso); }
.ki-chatbot-sz-b ul { display: grid; gap: 2px; }
.ki-chatbot-sz-b li { position: relative; padding-left: 14px; }
.ki-chatbot-sz-b li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 2px; background: var(--bernstein-tief); }
.ki-chatbot-sz-quelle { display: inline-flex; margin-top: 7px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--bernstein-text); background: rgba(244, 165, 58, .16); box-shadow: inset 0 0 0 1px rgba(138, 79, 0, .3); }
.ki-chatbot-sz-uebergabe { position: absolute; left: 0; top: 34px; display: flex; align-items: center; gap: 10px; max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; color: #efe5d8; background: linear-gradient(90deg, rgba(244, 165, 58, .26), rgba(244, 165, 58, .08)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 18px 34px -16px rgba(244, 165, 58, .6); }
.ki-chatbot-sz-uebergabe b { display: block; color: var(--bernstein-licht); font-size: 13px; }
.ki-chatbot-sz-uebergabe .symbol { flex: none; width: 18px; height: 18px; color: var(--bernstein-licht); }
.ist-aktiv .ki-chatbot-sz-chat { animation: aufbau .7s var(--weich) .2s both; }
.ist-aktiv .ki-chatbot-sz-b { animation: eingang .6s var(--weich) both; animation-delay: calc(.8s + var(--t) * 1.1s); }
.ist-aktiv .ki-chatbot-sz-quelle { animation: auftritt .6s var(--weich) 3.8s both; }
.ist-aktiv .ki-chatbot-sz-uebergabe { animation: ki-chatbot-uebergeben 1.2s var(--weich) 3.2s both; }
@keyframes ki-chatbot-uebergeben { from { opacity: 0; transform: translate(60px, 120px) scale(.9); } }
@media (min-width: 1100px) and (max-height: 800px) {
  .ki-chatbot-sz-b { padding: 6px 11px; font-size: 12.5px; }
  .ki-chatbot-sz-chat { gap: 6px; }
}
@media (max-width: 760px) {
  .ki-chatbot-sz { inset: 10px 12px 26px; }
  .ki-chatbot-sz-seite { display: none; }
  .ki-chatbot-sz-chat { position: static; width: 100%; height: 100%; padding: 0 10px 8px; gap: 5px; border-radius: 14px; }
  .ki-chatbot-sz-kopf { margin: 0 -10px 0; padding: 6px 10px; }
  .ki-chatbot-sz-kopf small, .ki-chatbot-sz-bot { display: none; }
  .ki-chatbot-sz-kopf b { font-size: 12px; }
  .ki-chatbot-sz-b { padding: 4px 9px; font-size: 11.5px; }
  .ki-chatbot-sz--quelle .ki-chatbot-sz-b[style*="--t: 0"] { display: none; }
  .ki-chatbot-sz-b ul li:nth-child(n+2) { display: none; }
  .ki-chatbot-sz-quelle { margin-top: 3px; font-size: 10.5px; }
  .ki-chatbot-sz--grenze .ki-chatbot-sz-b[style*="--t: 1"] { display: none; }
  .ki-chatbot-sz-uebergabe { top: auto; bottom: 6px; left: 10px; max-width: none; right: 10px; padding: 5px 10px; font-size: 11px; background: var(--espresso); }
  .ki-chatbot-sz-uebergabe b { font-size: 11.5px; }
}

/* ---------- Sorgen: Kernsatz ---------- */
.ki-chatbot-band { margin-top: 26px; padding: 18px 20px; border-radius: 18px; font-size: 16.5px; line-height: 1.55; color: var(--leise); background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); }
.ki-chatbot-band b { color: var(--tinte); }

/* ---------- Alleinstellung: kommentiertes Beispielgespräch ---------- */
.ki-chatbot-gespraech__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px clamp(32px, 5vw, 80px); align-items: center; }
.ki-chatbot-gespraech__merkmale { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--tinte); }
.ki-chatbot-gespraech__merkmale label { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; padding: 18px 14px 18px 0; border-bottom: 1px solid var(--linie); cursor: pointer; transition: background .3s, padding .4s var(--weich); }
.ki-chatbot-gespraech__merkmale input { position: absolute; opacity: 0; pointer-events: none; }
.ki-chatbot-gespraech__merkmale .ki-chatbot-nr { grid-row: span 2; }
.ki-chatbot-gespraech__merkmale b { font-size: 17.5px; line-height: 1.3; }
.ki-chatbot-gespraech__merkmale small { font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.ki-chatbot-gespraech__merkmale label:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .08), rgba(244, 165, 58, 0) 85%); }
.ki-chatbot-gespraech__merkmale label:has(input:checked) { padding-left: 14px; background: linear-gradient(90deg, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 90%); }
.ki-chatbot-gespraech__merkmale label:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-chatbot-nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: italic 400 18px/1 var(--serif); color: var(--bernstein-text); background: #fffdf9; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .45); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--weich); }
.ki-chatbot-gespraech__merkmale label:has(input:checked) .ki-chatbot-nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); transform: rotate(-6deg); }
.ki-chatbot-gespraech__fenster { margin: 0; overflow: hidden; border-radius: 28px; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie), 0 60px 110px -60px rgba(60, 40, 20, .65); }
.ki-chatbot-gespraech__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 20px; color: var(--hell); background: var(--espresso); }
.ki-chatbot-gespraech__kopf b { display: block; font-size: 15.5px; }
.ki-chatbot-gespraech__kopf small { display: block; font-size: 13px; color: var(--hell-leise); }
.ki-chatbot-gespraech__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #1a130c; background: var(--bernstein); }
.ki-chatbot-gespraech__avatar .symbol { width: 22px; height: 22px; }
.ki-chatbot-gespraech__beispiel { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--bernstein-licht); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .4); white-space: nowrap; }
.ki-chatbot-gespraech__verlauf { display: grid; gap: 10px; padding: 20px; }
.ki-chatbot-gespraech__zeit { justify-self: center; font-size: 12.5px; color: var(--leise); }
.ki-chatbot-g { position: relative; max-width: 88%; padding: 12px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; transition: box-shadow .35s, background .35s, opacity .35s; }
.ki-chatbot-g--bot { justify-self: start; border-bottom-left-radius: 6px; background: var(--creme); }
.ki-chatbot-g--mensch { justify-self: end; border-bottom-right-radius: 6px; color: var(--hell); background: var(--espresso); }
.ki-chatbot-g .ki-chatbot-nr { width: 24px; height: 24px; margin-right: 8px; font-size: 14px; vertical-align: -2px; }
.ki-chatbot-g__quelle { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--bernstein-text); }
.ki-chatbot-g--uebergabe { justify-self: stretch; max-width: none; padding: 14px 16px; background: rgba(244, 165, 58, .1); box-shadow: inset 4px 0 0 var(--bernstein); }
.ki-chatbot-g--uebergabe b { font-size: 14.5px; }
.ki-chatbot-g--uebergabe ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ki-chatbot-g--uebergabe li { padding: 3px 10px; border-radius: 999px; font-size: 13px; color: var(--tinte); background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie); }
.ki-chatbot-gespraech__fuss { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.ki-chatbot-gespraech__fuss span { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--linie); }
/* Markierte Stelle leuchtet, der Rest tritt zurück */
.ki-chatbot-gespraech:has(#ki-chatbot-m1:checked) .ki-chatbot-g[data-m="1"],
.ki-chatbot-gespraech:has(#ki-chatbot-m2:checked) .ki-chatbot-g[data-m="2"],
.ki-chatbot-gespraech:has(#ki-chatbot-m3:checked) .ki-chatbot-g[data-m="3"],
.ki-chatbot-gespraech:has(#ki-chatbot-m4:checked) .ki-chatbot-g[data-m="4"],
.ki-chatbot-gespraech:has(#ki-chatbot-m4:checked) .ki-chatbot-g[data-m2="4"],
.ki-chatbot-gespraech:has(#ki-chatbot-m5:checked) .ki-chatbot-g[data-m="5"] { box-shadow: 0 0 0 2px var(--bernstein), 0 18px 40px -18px rgba(244, 165, 58, .8); transform: translateX(4px); }
.ki-chatbot-gespraech:has(#ki-chatbot-m1:checked) .ki-chatbot-g label[for="ki-chatbot-m1"],
.ki-chatbot-gespraech:has(#ki-chatbot-m2:checked) .ki-chatbot-g label[for="ki-chatbot-m2"],
.ki-chatbot-gespraech:has(#ki-chatbot-m3:checked) .ki-chatbot-g label[for="ki-chatbot-m3"],
.ki-chatbot-gespraech:has(#ki-chatbot-m4:checked) .ki-chatbot-g label[for="ki-chatbot-m4"],
.ki-chatbot-gespraech:has(#ki-chatbot-m5:checked) .ki-chatbot-g label[for="ki-chatbot-m5"] { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 3px rgba(244, 165, 58, .3); }
@media (max-width: 1000px) { .ki-chatbot-gespraech__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ki-chatbot-gespraech__kopf { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .ki-chatbot-gespraech__beispiel { grid-column: 1 / -1; justify-self: start; }
  .ki-chatbot-gespraech__verlauf { padding: 16px 12px; }
  .ki-chatbot-g { max-width: 94%; font-size: 14.5px; }
  .ki-chatbot-gespraech__merkmale b { font-size: 16.5px; }
}

/* ---------- Werkzeug: Nick-Zähler mit Waage ---------- */
.ki-chatbot-nicken__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(20px, 3vw, 40px); }
.ki-chatbot-nicken__spalte { margin: 0; padding: 0; border: 0; counter-reset: ki-chatbot-n; min-width: 0; }
.ki-chatbot-nicken__spalte legend { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--tinte); font: italic 400 26px/1.1 var(--serif); }
.ki-chatbot-nicken__spalte legend::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .2); }
.ki-chatbot-nicken__spalte--dagegen legend::before { background: none; box-shadow: inset 0 0 0 2px var(--leise); }
.ki-chatbot-nicken__spalte label { position: relative; display: block; cursor: pointer; }
.ki-chatbot-nicken__spalte label + label { margin-top: 8px; }
.ki-chatbot-nicken__spalte input { position: absolute; opacity: 0; pointer-events: none; }
.ki-chatbot-nicken__spalte input:checked { counter-increment: ki-chatbot-n; }
.ki-chatbot-nicken__spalte label > span { display: block; padding: 13px 16px 13px 50px; border-radius: 14px; font-size: 15.5px; line-height: 1.45; color: var(--leise); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.ki-chatbot-nicken__spalte label > span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(60, 40, 20, .35); background: #fffdf9; transition: background .25s, box-shadow .25s; }
.ki-chatbot-nicken__spalte label:hover > span { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.ki-chatbot-nicken__spalte--dafuer input:checked + span { color: var(--tinte); background: rgba(244, 165, 58, .16); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.ki-chatbot-nicken__spalte--dafuer input:checked + span::before { background: var(--bernstein); box-shadow: none; }
.ki-chatbot-nicken__spalte--dagegen input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: none; }
.ki-chatbot-nicken__spalte--dagegen input:checked + span::before { background: var(--hell); box-shadow: none; }
.ki-chatbot-nicken__spalte input:checked + span::after { content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 10px; margin-top: -7px; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg); }
.ki-chatbot-nicken__spalte input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-chatbot-nicken__zahl { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--leise); }
.ki-chatbot-nicken__zahl b::before { content: counter(ki-chatbot-n); font: italic 400 42px/1 var(--serif); color: var(--bernstein-text); }
.ki-chatbot-nicken__spalte--dagegen .ki-chatbot-nicken__zahl b::before { color: var(--tinte); }
.ki-chatbot-nicken__urteil { display: grid; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linie); }
.ki-chatbot-nicken__waage { position: relative; height: 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(28, 23, 19, .16), rgba(28, 23, 19, .04) 50%, rgba(244, 165, 58, .1) 50%, rgba(244, 165, 58, .3)); }
.ki-chatbot-nicken__waage::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 2px solid var(--tinte); }
.ki-chatbot-nicken__waage i { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--espresso); box-shadow: 0 0 0 4px #fffdf9, 0 8px 18px -6px rgba(60, 40, 20, .6); left: calc(50% + clamp(-5, var(--summe, 0), 5) * 9%); transition: left .6s var(--weich), background .3s; }
.ki-chatbot-nicken[data-summe]:not([data-summe="0"]):not([data-summe^="-"]) .ki-chatbot-nicken__waage i { background: var(--bernstein); }
.ki-chatbot-nicken__erg, .ki-chatbot-nicken__site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 20px; border-radius: 18px; background: var(--creme); }
.ki-chatbot-nicken__erg p, .ki-chatbot-nicken__site p { flex: 1 1 22em; font-size: 16.5px; line-height: 1.5; color: var(--leise); }
.ki-chatbot-nicken__erg b, .ki-chatbot-nicken__site b { color: var(--tinte); }
.ki-chatbot-nicken__leer { font: italic 400 22px/1.3 var(--serif); color: var(--leise); }
.ki-chatbot-nicken:has(input:checked) .ki-chatbot-nicken__leer { display: none; }
.ki-chatbot-nicken:not(:has(input:checked)) .ki-chatbot-nicken__erg { display: none; }
.ki-chatbot-nicken__erg[hidden] { display: none !important; }
.ki-chatbot-nicken__site { display: none; box-shadow: inset 3px 0 0 var(--bernstein); }
.ki-chatbot-nicken:has(.ki-chatbot-nicken__website:checked) .ki-chatbot-nicken__site { display: flex; }
@media (max-width: 860px) { .ki-chatbot-nicken__spalten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ki-chatbot-nicken__erg .knopf, .ki-chatbot-nicken__site .knopf { width: 100%; } }

/* ---------- Telefon: aktueller Stand mit Umschalter ---------- */
.ki-chatbot-telefon__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.ki-chatbot-telefon__text p { max-width: 32em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--hell-leise); }
.ki-chatbot-telefon__stand { padding: 16px 18px; border-radius: 16px; background: rgba(244, 165, 58, .08); box-shadow: inset 3px 0 0 var(--bernstein); }
.ki-chatbot-telefon__stand b { display: block; margin-bottom: 4px; color: var(--bernstein-licht); }
.ki-chatbot-telefon__text .knopf { margin-top: 26px; }
.ki-chatbot-telefon__geraet { position: relative; padding: 18px 18px 22px; border-radius: 36px; background: linear-gradient(165deg, #2b231d 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 120px -60px rgba(0, 0, 0, .95); }
.ki-chatbot-telefon__geraet::before { content: ""; display: block; width: 70px; height: 5px; margin: 0 auto 16px; border-radius: 5px; background: rgba(246, 239, 230, .16); }
.ki-chatbot-telefon__schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.ki-chatbot-telefon__schalter button { min-height: 44px; border: 0; border-radius: 999px; background: none; color: #d9ccbb; font: 600 15px var(--grotesk); cursor: pointer; transition: background .25s, color .25s; }
.ki-chatbot-telefon__schalter button[aria-selected="true"] { color: var(--tinte); background: var(--hell); }
.ki-chatbot-telefon__schalter button:focus-visible { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.ki-chatbot-telefon__feld { min-height: 300px; padding: 22px 6px 6px; animation: auftritt .45s var(--weich) both; }
.ki-chatbot-telefon__feld[hidden] { display: none; }
.ki-chatbot-telefon__liste { display: grid; gap: 10px; }
.ki-chatbot-telefon__liste li { position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; font-size: 15.5px; line-height: 1.45; color: #efe5d8; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.ki-chatbot-telefon__liste li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 10px rgba(244, 165, 58, .55); }
.ki-chatbot-telefon__liste--ja li::after { content: ""; position: absolute; left: 21px; top: 50%; width: 4px; height: 7px; margin-top: -5px; border-right: 2px solid #1a130c; border-bottom: 2px solid #1a130c; transform: rotate(45deg); }
.ki-chatbot-telefon__liste--nein li::before { background: none; box-shadow: inset 0 0 0 1.5px rgba(205, 191, 174, .55); }
.ki-chatbot-telefon__liste--nein li::after { content: ""; position: absolute; left: 19px; top: 50%; width: 10px; height: 2px; margin-top: -1px; background: #cdbfae; }
.ki-chatbot-telefon__fuss { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; color: var(--hell-leise); background: rgba(246, 239, 230, .05); }
.ki-chatbot-telefon__fuss .symbol { flex: none; width: 18px; height: 18px; color: var(--bernstein-licht); }
@media (max-width: 1000px) { .ki-chatbot-telefon__raster { grid-template-columns: minmax(0, 1fr); } .ki-chatbot-telefon__feld { min-height: 0; } }
@media (max-width: 560px) { .ki-chatbot-telefon__geraet { border-radius: 28px; padding: 14px 12px 16px; } .ki-chatbot-telefon__schalter button { font-size: 14px; } }

/* ---------- Recht ---------- */
.ki-chatbot-recht__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.ki-chatbot-recht__haupt { position: relative; padding: clamp(26px, 3vw, 42px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-chatbot-recht__datum { display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--tinte); }
.ki-chatbot-recht__datum span { font-size: 15px; color: var(--leise); }
.ki-chatbot-recht__datum b { font: italic 400 clamp(34px, 3.4vw, 50px)/1 var(--serif); color: var(--bernstein-text); }
.ki-chatbot-recht__haupt h3 { font-size: clamp(22px, 1.9vw, 27px); }
.ki-chatbot-recht__haupt > p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--leise); }
.ki-chatbot-recht__probe { display: grid; gap: 6px; margin-top: 20px !important; padding: 14px 16px; border-radius: 16px 16px 16px 4px; font: italic 400 22px/1.25 var(--serif); color: var(--tinte) !important; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie); }
.ki-chatbot-recht__probe span { font: 600 13px/1.3 var(--grotesk); color: var(--bernstein-text); }
.ki-chatbot-recht__liste { border-top: 1px solid var(--tinte); counter-reset: kr; }
.ki-chatbot-recht__liste li { counter-increment: kr; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 14px; padding: 24px 0; border-bottom: 1px solid var(--linie); }
.ki-chatbot-recht__liste li::before { content: counter(kr, upper-roman); grid-row: span 2; font: italic 400 30px/1 var(--serif); color: var(--bernstein-text); }
.ki-chatbot-recht__liste h3 { font-size: clamp(20px, 1.6vw, 23px); }
.ki-chatbot-recht__liste p { font-size: 16.5px; line-height: 1.6; color: var(--leise); }
.ki-chatbot-notiz { max-width: 52em; margin-top: 32px; padding-left: 16px; border-left: 2px solid var(--bernstein); font-size: 15px; line-height: 1.55; color: var(--leise); }
@media (max-width: 900px) { .ki-chatbot-recht__raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Statt Befund: Erstgespräch mit zwei Beispiel-Karten ---------- */
.ki-chatbot-erst { overflow-x: clip; }
.ki-chatbot-erst__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.ki-chatbot-erst__lead { max-width: 24em; margin-top: 22px; font: italic 400 clamp(23px, 2vw, 28px)/1.3 var(--serif); color: var(--tinte); }
.ki-chatbot-erst__punkte { margin: 24px 0 30px; border-top: 1px solid var(--tinte); counter-reset: ke; }
.ki-chatbot-erst__punkte li { counter-increment: ke; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 16.5px; line-height: 1.45; }
.ki-chatbot-erst__punkte li::before { content: counter(ke); font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-text); }
.ki-chatbot-erst__wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ki-chatbot-erst__wahl button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fffdf9; color: var(--leise); font: 600 15px var(--grotesk); cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s; }
.ki-chatbot-erst__wahl button[aria-selected="true"] { color: var(--hell); background: var(--espresso); box-shadow: none; }
.ki-chatbot-erst__wahl button:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-chatbot-erst__karte { position: relative; padding: clamp(24px, 3vw, 38px); border-radius: 6px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 14px 14px 0 -2px #ece3d6, 0 60px 110px -60px rgba(60, 40, 20, .7); transform: rotate(-.8deg); animation: auftritt .45s var(--weich) both; }
.ki-chatbot-erst__karte[hidden] { display: none; }
.ki-chatbot-erst__beispiel { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--leise); }
.ki-chatbot-erst__karte dl { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--tinte); }
.ki-chatbot-erst__karte dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px dashed #d8ccbb; }
.ki-chatbot-erst__karte dt { font-size: 14px; font-weight: 700; color: var(--bernstein-text); }
.ki-chatbot-erst__karte dd { font-size: 16px; line-height: 1.45; }
.ki-chatbot-erst__einschaetzung { margin-top: 18px; padding-right: 110px; font: italic 400 clamp(22px, 2vw, 27px)/1.25 var(--serif); }
.ki-chatbot-erst__einschaetzung span { display: block; margin-bottom: 4px; font: 700 13px/1.3 var(--grotesk); color: var(--leise); }
.ki-chatbot-erst__stempel { position: absolute; right: 22px; bottom: 26px; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; font: 700 13px/1.1 var(--grotesk); letter-spacing: .04em; text-align: center; color: var(--leise); box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 6px #fffdf9, inset 0 0 0 7px currentColor; transform: rotate(-12deg); }
.ki-chatbot-erst__stempel--ja { color: var(--bernstein-text); }
@media (max-width: 1000px) { .ki-chatbot-erst__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ki-chatbot-erst__einschaetzung { padding-right: 0; }
  .ki-chatbot-erst__stempel { position: static; margin-top: 16px; width: 84px; height: 84px; font-size: 12px; }
  .ki-chatbot-erst__karte dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ki-chatbot-erst .knopf--gross { width: 100%; }
}

/* ---------- Preis-Kopf unter dem Vorgehen ---------- */
.ki-chatbot-preis { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--linie); }
.ki-chatbot-preis__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 14px 72px; margin-bottom: 36px; }
.ki-chatbot-preis__kopf p { font-size: 18px; line-height: 1.55; color: var(--leise); }
@media (max-width: 900px) { .ki-chatbot-preis__kopf { grid-template-columns: minmax(0, 1fr); } .ki-chatbot-preis__kopf p { font-size: 17px; } }

/* ---------- Wegweiser als Gesprächsverlauf ohne Skript ---------- */
.ki-chatbot-weg { position: relative; isolation: isolate; overflow: hidden; color: var(--hell); background: #15110e; }
.ki-chatbot-weg__bild { position: absolute; top: 0; right: 0; z-index: -2; width: 62%; height: 100%; object-fit: cover; object-position: 75% 40%; opacity: .75; }
.ki-chatbot-weg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #15110e 0%, #15110e 38%, rgba(21, 17, 14, .5) 66%, rgba(21, 17, 14, .15) 100%), linear-gradient(0deg, #15110e 0%, rgba(21, 17, 14, 0) 30%); }
.ki-chatbot-weg__kopf { max-width: 640px; }
.ki-chatbot-weg__kopf h2 em { color: var(--bernstein-licht); }
.ki-chatbot-weg__kopf p { margin-top: 16px; font-size: 19px; line-height: 1.55; color: var(--hell-leise); }
.ki-chatbot-weg__verlauf { display: grid; gap: 22px; max-width: 760px; margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border-radius: 30px; background: rgba(21, 17, 14, .76); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 120px -60px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ki-chatbot-weg__frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.ki-chatbot-weg__frage--2, .ki-chatbot-weg__frage--3 { display: none; }
.ki-chatbot-weg__frage legend { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; margin-bottom: 12px; padding: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--hell); }
.ki-chatbot-weg__bot { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #1a130c; background: var(--bernstein); }
.ki-chatbot-weg__bot .symbol { width: 18px; height: 18px; }
.ki-chatbot-weg__wahl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ki-chatbot-weg__wahl label { position: relative; cursor: pointer; }
.ki-chatbot-weg__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.ki-chatbot-weg__wahl span { display: block; padding: 10px 16px; border-radius: 18px 18px 4px 18px; font-size: 15px; line-height: 1.4; color: #e9dfd2; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); transition: background .25s, color .25s, box-shadow .25s; }
.ki-chatbot-weg__wahl label:hover span { color: var(--hell); box-shadow: inset 0 0 0 1px var(--bernstein); }
.ki-chatbot-weg__wahl input:checked + span { color: var(--tinte); background: #fbf6ee; box-shadow: none; font-weight: 600; }
.ki-chatbot-weg__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-web:checked) .ki-chatbot-weg__frage--2 { display: block; animation: auftritt .45s var(--weich) both; }
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-web:checked):has(#ki-chatbot-w2-gleich:checked) .ki-chatbot-weg__frage--3 { display: block; animation: auftritt .45s var(--weich) both; }
.ki-chatbot-weg__ergebnisse { display: grid; gap: 12px; }
.ki-chatbot-weg__erg { display: none; max-width: 92%; padding: clamp(20px, 2.4vw, 28px); border-radius: 6px 22px 22px 22px; color: var(--tinte); background: #fffdf9; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); animation: auftritt .5s var(--weich) both; }
.ki-chatbot-weg__klein { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--bernstein-text); }
.ki-chatbot-weg__erg h3 { margin-top: 6px; font: italic 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); color: var(--tinte); }
.ki-chatbot-weg__erg > p:not(.ki-chatbot-weg__klein) { margin: 10px 0 18px; font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.ki-chatbot-weg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ki-chatbot-weg__erg .knopf--hell { color: var(--tinte); }
.ki-chatbot-weg__neu { display: none; justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--hell-leise); font: 600 14.5px var(--grotesk); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .3); }
.ki-chatbot-weg__neu:hover { color: var(--hell); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.ki-chatbot-weg__verlauf:has(input:checked) .ki-chatbot-weg__neu { display: inline-flex; align-items: center; }
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-tel:checked) .ki-chatbot-weg__erg--tel,
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-pers:checked) .ki-chatbot-weg__erg--pers,
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-web:checked):has(#ki-chatbot-w2-einzel:checked) .ki-chatbot-weg__erg--einzel,
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-web:checked):has(#ki-chatbot-w2-gleich:checked):has(#ki-chatbot-w3-ja:checked) .ki-chatbot-weg__erg--ja,
.ki-chatbot-weg__verlauf:has(#ki-chatbot-w1-web:checked):has(#ki-chatbot-w2-gleich:checked):has(#ki-chatbot-w3-kaum:checked) .ki-chatbot-weg__erg--kaum { display: block; }
@supports not selector(:has(*)) { .ki-chatbot-weg__frage--2, .ki-chatbot-weg__frage--3, .ki-chatbot-weg__erg { display: block; } }
@media (max-width: 900px) {
  .ki-chatbot-weg__bild { width: 100%; height: 40%; opacity: .4; }
  .ki-chatbot-weg::before { background: linear-gradient(0deg, #15110e 0%, #15110e 60%, rgba(21, 17, 14, .45) 100%); }
}
@media (max-width: 560px) {
  .ki-chatbot-weg__verlauf { margin-inline: calc(-1 * var(--rand) + 8px); padding: 20px 14px; border-radius: 24px; }
  .ki-chatbot-weg__frage legend { max-width: 100%; font-size: 16px; }
  .ki-chatbot-weg__erg { max-width: none; }
  .ki-chatbot-weg__erg .knopf { width: 100%; }
}
.ki-chatbot-weg__text { padding: 10px 15px; border-radius: 18px 18px 18px 4px; background: rgba(255, 244, 228, .1); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }

/* ==========================================================================
   Zusatz KI-Lösungen (ki-loesungen/index.html, Quelle _werkzeug/seiten/35-ki-loesungen.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix ki-loesungen-. Nur Tokens aus :root.
   Die alten Klassen ki-loesungen-matrix und ki-loesungen-zeit (teile/zusatz/ki-loesungen.css) werden hier NICHT benutzt.
   Enthält: Rückruf mit Frage im Einstieg (zweistufig über :has), tippender Platzhalter in CSS, Live-Szenen „Zeitfresser“ und „Plan“,
   Lage in Deutschland (Destatis), Einsatz-Matrix als Karteireiter, Nein-Liste und Selbsttest, Praxis, AI-Act-Stationen mit Heute-Marke,
   Pflichten, Plan-Blatt (statt Befund), Preis-Kopf, Wegweiser mit drei Fragen ohne Skript (Radios und :has).
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-szenen, data-weg-waehlen aus ares.js.
   ========================================================================== */

/* ---------- Einstieg: Rückruf mit einer Frage ---------- */
.ki-loesungen-ruf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frage knopf" "fuss fuss"; gap: 10px; max-width: 650px; margin-top: 26px; }
.ki-loesungen-ruf__frage { grid-area: frage; position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; height: 66px; padding: 0 50px 0 22px; border-radius: 999px; background: #fbf6ee; color: var(--tinte); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 22px 44px -22px rgba(0, 0, 0, .9); transition: box-shadow .25s; }
.ki-loesungen-ruf__frage:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 6px rgba(244, 165, 58, .12), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.ki-loesungen-ruf__frage:focus-within { box-shadow: 0 0 0 2px var(--bernstein), 0 0 0 8px rgba(244, 165, 58, .28), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.ki-loesungen-ruf__frage::after { content: ""; position: absolute; right: 26px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--bernstein-text); border-bottom: 2px solid var(--bernstein-text); transform: rotate(45deg); pointer-events: none; }
.ki-loesungen-ruf__frage .symbol { flex: none; width: 24px; height: 24px; color: var(--bernstein-text); }
.ki-loesungen-ruf__innen { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ki-loesungen-ruf__label { font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; color: var(--leise); }
.ki-loesungen-ruf__frage select { width: 100%; height: 28px; padding: 0; border: 0; background: none; color: var(--tinte); font: 400 18.5px/1 var(--grotesk); outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.ki-loesungen-ruf__frage select:invalid { color: #6f6458; }
.ki-loesungen-ruf__knopf { grid-area: knopf; min-height: 66px; padding: 0 30px; }
.ki-loesungen-ruf__fuss { grid-area: fuss; display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: #dcd0c0; }
.ki-loesungen-ruf__fuss img { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 239, 230, .25); }
/* Schritt 2 erscheint, sobald die Frage beantwortet ist */
.ki-loesungen-ruf__zwei { grid-area: zwei; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "eigene eigene eigene" "name tel zeit" "ok ok ok"; gap: 12px; padding: 18px; border-radius: 22px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.ki-loesungen-ruf:has(.ki-loesungen-ruf__frage select:valid) { grid-template-areas: "frage frage" "zwei zwei" "fuss knopf"; }
.ki-loesungen-ruf:has(.ki-loesungen-ruf__frage select:valid) .ki-loesungen-ruf__zwei { display: grid; animation: auftritt .5s var(--weich) both; }
.ki-loesungen-ruf:has(.ki-loesungen-ruf__frage select:valid) .ki-loesungen-ruf__knopf { min-height: 56px; }
@supports not selector(:has(*)) {
  .ki-loesungen-ruf { grid-template-areas: "frage frage" "zwei zwei" "fuss knopf"; }
  .ki-loesungen-ruf__zwei { display: grid; }
}
.ki-loesungen-ruf__zwei > label { min-width: 0; }
.ki-loesungen-ruf__zwei > label:nth-child(2) { grid-area: name; }
.ki-loesungen-ruf__zwei > label:nth-child(3) { grid-area: tel; }
.ki-loesungen-ruf__zwei > label:nth-child(4) { grid-area: zeit; }
.ki-loesungen-ruf__eigene { grid-area: eigene; }
.ki-loesungen-ruf__zwei label > span:first-child { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--hell-leise); }
.ki-loesungen-ruf__zwei small { font-size: 12.5px; color: #b5a796; }
.ki-loesungen-ruf__zwei input:not([type="checkbox"]), .ki-loesungen-ruf__zwei select { width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px; background: rgba(21, 17, 14, .7); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .22); color: var(--hell); font: 400 16.5px var(--grotesk); }
.ki-loesungen-ruf__zwei input:focus, .ki-loesungen-ruf__zwei select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--bernstein-licht); }
.ki-loesungen-ruf__ok { grid-area: ok; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--hell-leise); }
.ki-loesungen-ruf__ok input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--bernstein); }
.ki-loesungen-ruf__ok a { color: var(--hell); }
/* Tippender Platzhalter, nur CSS: drei Beispiele nacheinander, verschwindet bei Fokus oder Eingabe */
.ki-loesungen-ruf__tippfeld { position: relative; display: block; }
.ki-loesungen-tipp { position: absolute; left: 15px; right: 15px; top: 0; bottom: 0; overflow: hidden; pointer-events: none; font: 400 16.5px/48px var(--grotesk); color: #a3968a; }
.ki-loesungen-tipp i { position: absolute; left: 0; top: 0; overflow: hidden; width: 0; font-style: normal; white-space: nowrap; }
.ki-loesungen-tipp i:first-child { width: var(--l); }
.bewegt .ki-loesungen-tipp i { width: 0; opacity: 0; animation: ki-loesungen-tippen 12s steps(30, end) infinite; }
.bewegt .ki-loesungen-tipp i:nth-child(2) { animation-delay: 4s; }
.bewegt .ki-loesungen-tipp i:nth-child(3) { animation-delay: 8s; }
@keyframes ki-loesungen-tippen { 0% { width: 0; opacity: 1; } 18% { width: var(--l); opacity: 1; } 29% { width: var(--l); opacity: 1; } 33% { width: 0; opacity: 1; } 33.4%, 100% { width: 0; opacity: 0; } }
.ki-loesungen-ruf__tippfeld:focus-within .ki-loesungen-tipp, .ki-loesungen-ruf__tippfeld input:not(:placeholder-shown) + .ki-loesungen-tipp { display: none; }
@media (min-width: 1100px) and (max-height: 800px) {
  .ki-loesungen-ruf { margin-top: 18px; }
  .ki-loesungen-ruf__frage, .ki-loesungen-ruf__knopf { height: 60px; min-height: 60px; }
}
@media (max-width: 760px) {
  .ki-loesungen-ruf, .ki-loesungen-ruf:has(.ki-loesungen-ruf__frage select:valid) { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .ki-loesungen-ruf { grid-template-areas: "frage" "knopf" "fuss"; }
  .ki-loesungen-ruf:has(.ki-loesungen-ruf__frage select:valid) { grid-template-areas: "frage" "zwei" "knopf" "fuss"; }
  .ki-loesungen-ruf__frage { height: 56px; padding: 0 44px 0 18px; }
  .ki-loesungen-ruf__frage::after { right: 22px; }
  .ki-loesungen-ruf__frage select { font-size: 16.5px; }
  .ki-loesungen-ruf__knopf, .ki-loesungen-ruf:has(.ki-loesungen-ruf__frage select:valid) .ki-loesungen-ruf__knopf { min-height: 50px; }
  .ki-loesungen-ruf__fuss { margin-top: 2px; font-size: 13.5px; line-height: 1.4; }
  .ki-loesungen-ruf__fuss img { width: 28px; height: 28px; }
  .ki-loesungen-ruf__zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "eigene eigene" "name tel" "zeit zeit" "ok ok"; padding: 14px; gap: 10px; }
}
@media (max-width: 760px) { @supports not selector(:has(*)) { .ki-loesungen-ruf { grid-template-areas: "frage" "zwei" "knopf" "fuss"; } } }

/* ---------- Live-Szene 1: Zeitfresser werden geprüft und eingeordnet ---------- */
.ki-loesungen-sz-karten { display: grid; gap: 9px; }
.ki-loesungen-sz-karten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name std" "haken wohin"; align-items: center; gap: 7px 10px; padding: 10px 12px 10px 14px; border-radius: 14px; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.ki-loesungen-sz-karten b { grid-area: name; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--hell); white-space: nowrap; text-overflow: ellipsis; }
.ki-loesungen-sz-karten small { grid-area: std; font-size: 12.5px; color: #cdbfae; white-space: nowrap; }
.ki-loesungen-sz-haken { grid-area: haken; display: flex; gap: 5px; min-width: 0; overflow: hidden; }
.ki-loesungen-sz-haken i { position: relative; padding: 2px 8px 2px 19px; border-radius: 999px; font-size: 11.5px; font-style: normal; line-height: 1.4; color: #cdbfae; background: rgba(246, 239, 230, .06); white-space: nowrap; }
.ki-loesungen-sz-haken i::before { content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--bernstein-licht); box-shadow: 0 0 8px rgba(244, 165, 58, .6); }
.ki-loesungen-sz-haken i.ki-loesungen-sz-leer { color: #8f8375; text-decoration: line-through; text-decoration-color: rgba(205, 191, 174, .5); }
.ki-loesungen-sz-haken i.ki-loesungen-sz-leer::before { background: none; box-shadow: inset 0 0 0 1.5px rgba(205, 191, 174, .45); }
.ki-loesungen-sz-wohin { grid-area: wohin; justify-self: end; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; color: #e9dfd2; background: rgba(246, 239, 230, .1); white-space: nowrap; }
.ki-loesungen-sz-wohin--zuerst { color: #1a130c; background: var(--bernstein); box-shadow: 0 6px 16px -6px rgba(244, 165, 58, .8); }
.ki-loesungen-sz-wohin--nein { color: #a99b89; background: none; box-shadow: inset 0 0 0 1px rgba(205, 191, 174, .35); }
.ist-aktiv .ki-loesungen-sz-karten li { animation: eingang .7s var(--weich) both; animation-delay: calc(.3s + var(--i) * .3s); }
.ist-aktiv .ki-loesungen-sz-haken i::before { animation: punkt-auf .35s var(--weich) both; animation-delay: 1.8s; }
.ist-aktiv .ki-loesungen-sz-haken i:nth-child(2)::before { animation-delay: 2.1s; }
.ist-aktiv .ki-loesungen-sz-haken i:nth-child(3)::before { animation-delay: 2.4s; }
.ist-aktiv .ki-loesungen-sz-haken i:nth-child(4)::before { animation-delay: 2.7s; }
.ist-aktiv .ki-loesungen-sz-wohin { animation: auftritt .6s var(--weich) both; animation-delay: calc(3.6s + var(--i, 0) * .35s); }
.ist-aktiv li:nth-child(2) .ki-loesungen-sz-wohin { animation-delay: 3.95s; }
.ist-aktiv li:nth-child(3) .ki-loesungen-sz-wohin { animation-delay: 4.3s; }
.ist-aktiv li:nth-child(4) .ki-loesungen-sz-wohin { animation-delay: 4.65s; }
.ist-aktiv .ki-loesungen-sz-karten li:nth-child(4) { animation-name: ki-loesungen-zurueck; animation-duration: 5.5s; }
@keyframes ki-loesungen-zurueck { 0% { opacity: 0; transform: translateY(-16px) scale(.97); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: .55; transform: none; } }

/* ---------- Live-Szene 2: der sortierte Plan in drei Spalten ---------- */
.ki-loesungen-sz-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ki-loesungen-sz-spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 10px 14px; border-radius: 16px; background: rgba(255, 244, 228, .045); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.ki-loesungen-sz-spalte > b { font: italic 400 20px/1.1 var(--serif); color: #e9dfd2; }
.ki-loesungen-sz-spalte > span { display: block; padding: 9px 10px; border-radius: 11px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--hell); background: rgba(255, 244, 228, .08); }
.ki-loesungen-sz-spalte small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: #a99b89; }
.ki-loesungen-sz-spalte--zuerst { background: linear-gradient(180deg, rgba(244, 165, 58, .16), rgba(244, 165, 58, .03)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .45); }
.ki-loesungen-sz-spalte--zuerst > b { color: var(--bernstein-licht); }
.ki-loesungen-sz-spalte--nein { box-shadow: inset 0 0 0 1px rgba(205, 191, 174, .22); background: repeating-linear-gradient(135deg, rgba(246, 239, 230, .03) 0 6px, rgba(246, 239, 230, 0) 6px 12px); }
.ki-loesungen-sz-spalte--nein > span { color: #b5a796; background: rgba(255, 244, 228, .04); }
.ki-loesungen-sz-ziel { color: #1a130c !important; background: linear-gradient(90deg, #f7bb63, var(--bernstein)) !important; box-shadow: 0 10px 26px -10px rgba(244, 165, 58, .9); }
.ki-loesungen-sz-start { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.35; color: #efe5d8; background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); }
.ki-loesungen-sz-start b { color: var(--bernstein-licht); font-weight: 600; }
.ki-loesungen-sz-start .symbol { width: 16px; height: 16px; color: var(--bernstein-licht); }
.ist-aktiv .ki-loesungen-sz-spalte { animation: aufbau .7s var(--weich) both; }
.ist-aktiv .ki-loesungen-sz-spalte:nth-child(2) { animation-delay: .25s; }
.ist-aktiv .ki-loesungen-sz-spalte:nth-child(3) { animation-delay: .5s; }
.ist-aktiv .ki-loesungen-sz-spalte > span { animation: eingang .6s var(--weich) both; animation-delay: 1s; }
.ist-aktiv .ki-loesungen-sz-ziel { animation: eingang .6s var(--weich) 1s both, klick .6s ease 2.6s; }
.ist-aktiv .ki-loesungen-sz-start { animation: auftritt .8s var(--weich) 3.2s both; }
@media (min-width: 1100px) and (max-height: 800px) {
  .ki-loesungen-sz-karten { gap: 6px; }
  .ki-loesungen-sz-karten li { padding-block: 7px; gap: 5px 10px; }
}
@media (max-width: 760px) {
  .ki-loesungen-sz-karten { gap: 5px; }
  .ki-loesungen-sz-karten li { grid-template-areas: "name wohin"; padding: 5px 8px 5px 10px; border-radius: 10px; }
  .ki-loesungen-sz-karten li:nth-child(2) { display: none; }
  .ki-loesungen-sz-karten small, .ki-loesungen-sz-haken { display: none; }
  .ki-loesungen-sz-karten b { font-size: 12.5px; }
  .ki-loesungen-sz-wohin { padding: 1px 8px; font-size: 11px; }
  .ki-loesungen-sz-spalten { gap: 6px; }
  .ki-loesungen-sz-spalte { gap: 5px; padding: 6px 7px 8px; border-radius: 11px; }
  .ki-loesungen-sz-spalte > b { font-size: 15px; }
  .ki-loesungen-sz-spalte > span { padding: 5px 7px; font-size: 11.5px; border-radius: 8px; }
  .ki-loesungen-sz-spalte > span + span, .ki-loesungen-sz-spalte small, .ki-loesungen-sz-start { display: none; }
}

/* ---------- Sorgen: Lage in Deutschland ---------- */
.ki-loesungen-lage { margin: 32px 0 0; padding: 24px 26px 20px; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-loesungen-lage__gross { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--tinte); }
.ki-loesungen-lage__gross b { font: italic 400 clamp(52px, 5vw, 72px)/.9 var(--serif); color: var(--bernstein-text); }
.ki-loesungen-lage__gross span { font-size: 16.5px; line-height: 1.35; color: var(--tinte); }
.ki-loesungen-lage__balken { display: grid; gap: 9px; margin-top: 16px; }
.ki-loesungen-lage__balken li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 46px; align-items: center; gap: 12px; font-size: 14.5px; color: var(--leise); }
.ki-loesungen-lage__balken i { position: relative; height: 9px; overflow: hidden; border-radius: 9px; background: rgba(60, 40, 20, .08); }
.ki-loesungen-lage__balken i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transform-origin: left; transition: transform 1.2s var(--weich) .3s; }
.bewegt .zeigen:not(.ist-da) .ki-loesungen-lage__balken i::after { transform: scaleX(0); }
.ki-loesungen-lage__balken b { font-weight: 600; color: var(--tinte); text-align: right; }
.ki-loesungen-lage__gruende { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--linie); font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.ki-loesungen-lage__gruende span { display: block; color: var(--tinte); font-weight: 600; }
.ki-loesungen-lage__gruende b { color: var(--tinte); }
.ki-loesungen-lage figcaption { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--leise); }
@media (max-width: 560px) { .ki-loesungen-lage { padding: 20px 18px 16px; } .ki-loesungen-lage__balken li { grid-template-columns: 62px minmax(0, 1fr) 42px; gap: 10px; } }

/* ---------- Einsatz-Matrix als Karteireiter ---------- */
.ki-loesungen-einsatz__rahmen { position: relative; }
.ki-loesungen-einsatz__reiter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ki-loesungen-einsatz__bereich { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 20px; border: 0; border-radius: 20px 20px 0 0; background: rgba(255, 253, 249, .45); box-shadow: inset 0 0 0 1px var(--linie); color: var(--leise); font: 600 18px/1.2 var(--grotesk); text-align: left; cursor: pointer; transition: background .3s, color .3s; }
.ki-loesungen-einsatz__bereich .symbol { flex: none; width: 22px; height: 22px; color: var(--bernstein-text); }
.ki-loesungen-einsatz__bereich span { flex: 1; min-width: 0; }
.ki-loesungen-einsatz__bereich:hover { color: var(--tinte); background: rgba(255, 253, 249, .8); }
.ki-loesungen-einsatz__bereich[aria-selected="true"] { z-index: 1; color: var(--tinte); background: #fffdf9; box-shadow: 0 -1px 0 var(--linie), -1px 0 0 var(--linie), 1px 0 0 var(--linie); }
.ki-loesungen-einsatz__bereich[aria-selected="true"]::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--bernstein); }
.ki-loesungen-einsatz__bereich[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: #fffdf9; }
.ki-loesungen-ampel { display: inline-flex; gap: 3px; }
.ki-loesungen-ampel::before, .ki-loesungen-ampel::after { content: ""; width: 5px; height: 14px; border-radius: 2px; background: var(--bernstein-tief); }
.ki-loesungen-ampel--1::after { background: rgba(60, 40, 20, .15); }
.ki-loesungen-einsatz__feld { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); border-radius: 0 0 30px 30px; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); animation: auftritt .45s var(--weich) both; }
.ki-loesungen-einsatz__feld[hidden] { display: none; }
.ki-loesungen-einsatz__feld > div { padding: clamp(26px, 3vw, 44px); }
.ki-loesungen-einsatz__feld > div + div { border-left: 1px solid var(--linie); }
.ki-loesungen-einsatz__feld h3 { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--tinte); font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.ki-loesungen-einsatz__ki ul { display: grid; gap: 14px; }
.ki-loesungen-einsatz__ki li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.5; }
.ki-loesungen-einsatz__ki li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 8px; height: 8px; background: var(--bernstein-tief); transform: rotate(45deg); }
.ki-loesungen-einsatz__zusatz { margin-top: 18px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; color: var(--leise); background: var(--creme); }
.ki-loesungen-einsatz__mensch { background: linear-gradient(180deg, rgba(244, 165, 58, .1), rgba(244, 165, 58, .02)); }
.ki-loesungen-einsatz__mensch p { font: italic 400 clamp(24px, 2.1vw, 30px)/1.22 var(--serif); color: var(--tinte); }
.ki-loesungen-einsatz__aufwand p { margin-top: 12px; font: italic 400 24px/1.2 var(--serif); color: var(--tinte); }
.ki-loesungen-einsatz__skala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.ki-loesungen-einsatz__skala i { height: 12px; border-radius: 4px; background: rgba(60, 40, 20, .1); }
[style*="--stufe: 1"] .ki-loesungen-einsatz__skala i:nth-child(1), [style*="--stufe: 2"] .ki-loesungen-einsatz__skala i:nth-child(-n+2) { background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); }
.ki-loesungen-notiz { max-width: 52em; margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--bernstein); font-size: 15px; line-height: 1.55; color: var(--leise); }
@media (max-width: 960px) {
  .ki-loesungen-einsatz__reiter { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
  .ki-loesungen-einsatz__bereich { border-radius: 16px; min-height: 60px; }
  .ki-loesungen-einsatz__bereich[aria-selected="true"] { background: var(--espresso); color: var(--hell); box-shadow: none; }
  .ki-loesungen-einsatz__bereich[aria-selected="true"] .symbol { color: var(--bernstein-licht); }
  .ki-loesungen-einsatz__bereich[aria-selected="true"]::after { display: none; }
  .ki-loesungen-einsatz__feld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 26px; }
  .ki-loesungen-einsatz__ki { grid-column: 1 / -1; }
  .ki-loesungen-einsatz__feld > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .ki-loesungen-einsatz__aufwand { border-left: 1px solid var(--linie) !important; }
}
@media (max-width: 560px) {
  .ki-loesungen-einsatz__bereich { gap: 9px; padding: 0 12px; font-size: 15.5px; }
  .ki-loesungen-einsatz__bereich .symbol { width: 18px; height: 18px; }
  .ki-loesungen-einsatz__feld { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .ki-loesungen-einsatz__feld > div { padding: 22px 20px; }
  .ki-loesungen-einsatz__aufwand { border-left: 0 !important; }
  .ki-loesungen-einsatz__ki li { font-size: 16px; }
}

/* ---------- Wo sich KI nicht lohnt, Selbsttest ---------- */
.ki-loesungen-grenzen__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 48px clamp(40px, 5vw, 88px); align-items: center; }
.ki-loesungen-grenzen__lead { margin-top: 22px; font: italic 400 clamp(23px, 2vw, 28px)/1.3 var(--serif); color: var(--tinte); }
.ki-loesungen-nein { margin-top: 26px; border-top: 1px solid var(--tinte); counter-reset: nein; }
.ki-loesungen-nein li { counter-increment: nein; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.ki-loesungen-nein li::before { content: counter(nein, upper-roman); grid-row: span 2; font: italic 400 30px/1 var(--serif); color: var(--bernstein-text); }
.ki-loesungen-nein h3 { font-size: clamp(19px, 1.5vw, 21px); }
.ki-loesungen-nein p { font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.ki-loesungen-test .werkzeug__kopf { grid-template-columns: minmax(0, 1fr); }
.ki-loesungen-test .werkzeug__art { grid-column: 1; grid-row: auto; justify-self: start; background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .35); color: var(--bernstein-licht); }
.ki-loesungen-test .werkzeug__kopf p { color: var(--hell-leise); }
.ki-loesungen-test__punkte { margin: 0; padding: 0; border: 0; }
.ki-loesungen-test__punkte label { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--linie-dunkel); font-size: 16.5px; line-height: 1.4; color: #e9dfd2; cursor: pointer; transition: color .25s; }
.ki-loesungen-test__punkte input { position: absolute; opacity: 0; pointer-events: none; }
.ki-loesungen-test__schalter { position: relative; width: 46px; height: 26px; border-radius: 999px; background: rgba(246, 239, 230, .12); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); transition: background .3s; }
.ki-loesungen-test__schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #cdbfae; transition: transform .35s var(--weich), background .3s; }
.ki-loesungen-test__punkte label:has(input:checked) { color: var(--hell); }
.ki-loesungen-test__punkte input:checked + .ki-loesungen-test__schalter { background: var(--bernstein); box-shadow: 0 0 18px -4px rgba(244, 165, 58, .8); }
.ki-loesungen-test__punkte input:checked + .ki-loesungen-test__schalter::after { transform: translateX(20px); background: #1a130c; }
.ki-loesungen-test__punkte label:has(input:focus-visible) { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; border-radius: 8px; }
.ki-loesungen-test__stand { margin-top: 24px; }
.ki-loesungen-test__mess { position: relative; height: 12px; border-radius: 12px; background: rgba(246, 239, 230, .1); }
.ki-loesungen-test__mess i { position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(244, 165, 58, .45), var(--bernstein-licht)); transition: width .5s var(--weich); }
.ki-loesungen-test__marke { position: absolute; left: 60%; top: -6px; bottom: -6px; border-left: 2px dashed var(--bernstein-licht); }
.ki-loesungen-test__marke { font-size: 0; }
.ki-loesungen-test__marke::after { content: "ab 3"; position: absolute; left: 6px; top: -20px; font-size: 12px; font-weight: 600; color: var(--bernstein-licht); white-space: nowrap; }
.ki-loesungen-test__zahl { margin-top: 18px; font-size: 16px; color: var(--hell-leise); }
.ki-loesungen-test__zahl b { margin-right: 8px; font: italic 400 46px/1 var(--serif); color: var(--bernstein-licht); }
.ki-loesungen-test__stand p:not(.ki-loesungen-test__zahl) { margin-top: 10px; font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.ki-loesungen-test__stand p b { color: var(--hell); }
.ki-loesungen-test .werkzeug__fuss { border-top-color: var(--linie-dunkel); color: #b5a796; }
@media (max-width: 1000px) { .ki-loesungen-grenzen__raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Umfang: Wege unter dem Register ---------- */
.ki-loesungen-umfang__wege { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 32px; }
@media (max-width: 560px) { .ki-loesungen-umfang__wege .knopf { width: 100%; } }

/* ---------- Praxis: KI liefert Vorarbeit, ein Mensch prüft ---------- */
.ki-loesungen-praxis__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.ki-loesungen-praxis__text p { max-width: 32em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.ki-loesungen-praxis__text .knopf { margin-top: 26px; }
.ki-loesungen-praxis__buehne { position: relative; padding: clamp(28px, 3.4vw, 48px); border-radius: 30px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-loesungen-praxis__satz { position: relative; padding-top: 34px; }
.ki-loesungen-praxis__satz::before { content: "„"; position: absolute; left: -4px; top: -78px; font: italic 400 110px/1 var(--serif); color: rgba(138, 79, 0, .25); }
.ki-loesungen-praxis__satz p { font: italic 400 clamp(28px, 2.7vw, 40px)/1.15 var(--serif); letter-spacing: -.005em; color: var(--tinte); text-wrap: balance; }
.ki-loesungen-praxis__satz footer { margin-top: 12px; font-size: 15.5px; color: var(--leise); }
.ki-loesungen-praxis__weg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.ki-loesungen-praxis__weg::before { content: ""; position: absolute; left: 22px; right: 22%; top: 22px; border-top: 2px dashed rgba(138, 79, 0, .35); }
.ki-loesungen-praxis__weg li { position: relative; display: grid; gap: 4px; }
.ki-loesungen-praxis__weg span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: #fffdf9; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); font: italic 400 18px/1 var(--serif); color: var(--bernstein-text); }
.ki-loesungen-praxis__weg b { font-size: 16px; line-height: 1.3; }
.ki-loesungen-praxis__weg small { font-size: 13.5px; line-height: 1.4; color: var(--leise); }
.ki-loesungen-praxis__ziel span { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 5px rgba(244, 165, 58, .22); }
.ki-loesungen-praxis__lehren { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--tinte); }
.ki-loesungen-praxis__lehren p { font: italic 400 22px/1.2 var(--serif); color: var(--tinte); }
.ki-loesungen-praxis__lehren ul { display: grid; gap: 8px; margin-top: 12px; }
.ki-loesungen-praxis__lehren li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.45; color: var(--leise); }
.ki-loesungen-praxis__lehren li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; background: var(--bernstein-tief); transform: rotate(45deg); }
@media (max-width: 1000px) { .ki-loesungen-praxis__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ki-loesungen-praxis__buehne { padding: 26px 20px; border-radius: 24px; }
  .ki-loesungen-praxis__weg { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ki-loesungen-praxis__weg::before { left: 21px; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 2px dashed rgba(138, 79, 0, .35); }
  .ki-loesungen-praxis__weg li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .ki-loesungen-praxis__weg span { grid-row: span 2; margin: 0; }
}

/* ---------- Alleinstellung: AI-Act-Stationen mit Heute-Marke ---------- */
.ki-loesungen-recht { overflow-x: clip; }
.ki-loesungen-stationen__linie { position: relative; display: flex; gap: 10px; }
.ki-loesungen-stationen__linie::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: linear-gradient(90deg, var(--tinte) 0 76%, rgba(28, 23, 19, 0) 76%), repeating-linear-gradient(90deg, rgba(28, 23, 19, .45) 0 8px, rgba(28, 23, 19, 0) 8px 14px); }
.ki-loesungen-stationen__station { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 50px 12px 16px; border: 0; border-radius: 18px; background: none; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; transition: background .3s, box-shadow .3s; }
.ki-loesungen-stationen__station::before { content: ""; position: absolute; left: 12px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--tinte); box-shadow: 0 0 0 4px var(--creme); transition: transform .3s var(--weich); }
.ki-loesungen-stationen__station--gilt::after { content: ""; position: absolute; left: 18px; top: 18px; width: 7px; height: 4px; border-left: 2px solid var(--creme); border-bottom: 2px solid var(--creme); transform: rotate(-45deg); }
.ki-loesungen-stationen__station--jetzt::before { background: var(--bernstein); box-shadow: 0 0 0 4px var(--creme), 0 0 0 9px rgba(244, 165, 58, .3); }
.bewegt .ki-loesungen-stationen__station--jetzt::before { animation: ki-loesungen-puls 2.4s ease-in-out infinite; }
@keyframes ki-loesungen-puls { 50% { box-shadow: 0 0 0 4px var(--creme), 0 0 0 14px rgba(244, 165, 58, 0); } }
.ki-loesungen-stationen__station--kommt::before { background: var(--creme); box-shadow: 0 0 0 4px var(--creme), inset 0 0 0 2px var(--tinte); }
.ki-loesungen-stationen__station time { font-size: 13.5px; font-weight: 700; color: var(--bernstein-text); }
.ki-loesungen-stationen__station b { max-width: 100%; font-size: 16px; font-weight: 600; line-height: 1.3; -webkit-hyphens: auto; hyphens: auto; }
.ki-loesungen-stationen__stand { margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--leise); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-loesungen-stationen__station--jetzt .ki-loesungen-stationen__stand { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.ki-loesungen-stationen__station--kommt .ki-loesungen-stationen__stand { border: 1px dashed var(--leise); box-shadow: none; }
.ki-loesungen-stationen__station:hover { background: rgba(255, 253, 249, .6); }
.ki-loesungen-stationen__station[aria-selected="true"] { background: #fffdf9; box-shadow: 0 0 0 1px var(--linie), 0 24px 44px -28px rgba(60, 40, 20, .55); }
.ki-loesungen-stationen__station[aria-selected="true"]::before { transform: scale(1.2); }
.ki-loesungen-stationen__heute { position: relative; flex: 0 0 88px; padding: 48px 0 0 10px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--bernstein-text); }
.ki-loesungen-stationen__heute i { position: absolute; left: 0; top: 6px; height: 34px; border-left: 2px solid var(--bernstein); }
.ki-loesungen-stationen__heute i::after { content: ""; position: absolute; left: -6px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bernstein); }
.ki-loesungen-stationen__feld { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 64px); align-items: start; margin-top: 18px; padding: clamp(26px, 3vw, 40px); border-radius: 26px; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); animation: auftritt .45s var(--weich) both; }
.ki-loesungen-stationen__feld[hidden] { display: none; }
.ki-loesungen-stationen__was { font-size: 18px; line-height: 1.6; }
.ki-loesungen-stationen__fuer { padding-left: 20px; border-left: 3px solid var(--bernstein); font: italic 400 clamp(21px, 1.8vw, 25px)/1.3 var(--serif); color: var(--tinte); }
.ki-loesungen-stationen__fuer b { display: block; margin-bottom: 6px; font: 700 13.5px/1.3 var(--grotesk); letter-spacing: .02em; color: var(--bernstein-text); }
.ki-loesungen-pflichten { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 24px clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(48px, 5vw, 72px); }
.ki-loesungen-pflichten__titel { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.ki-loesungen-pflichten__titel em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.ki-loesungen-pflichten__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--tinte); counter-reset: pf; }
.ki-loesungen-pflichten__liste li { counter-increment: pf; display: grid; gap: 6px; align-content: start; padding-top: 18px; }
.ki-loesungen-pflichten__liste li::before { content: counter(pf, upper-roman); font: italic 400 28px/1 var(--serif); color: var(--bernstein-text); }
.ki-loesungen-pflichten__liste b { font-size: 18px; }
.ki-loesungen-pflichten__liste span { font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.ki-loesungen-recht .ki-loesungen-notiz { margin-top: 32px; }
@media (max-width: 1000px) {
  .ki-loesungen-pflichten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ki-loesungen-stationen__linie { flex-direction: column; gap: 4px; }
  .ki-loesungen-stationen__linie::before { left: 21px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--tinte) 0 82%, rgba(28, 23, 19, .4) 82%); }
  .ki-loesungen-stationen__station { flex: none; padding: 14px 14px 14px 50px; }
  .ki-loesungen-stationen__station::before { left: 12px; top: 16px; }
  .ki-loesungen-stationen__station--gilt::after { left: 18px; top: 21px; }
  .ki-loesungen-stationen__heute { flex: none; padding: 4px 0 4px 50px; }
  .ki-loesungen-stationen__heute i { left: 12px; top: 50%; width: 22px; height: 0; border-left: 0; border-top: 2px solid var(--bernstein); }
  .ki-loesungen-stationen__heute i::after { left: auto; right: -5px; top: -6px; }
  .ki-loesungen-stationen__feld { grid-template-columns: minmax(0, 1fr); }
  .ki-loesungen-pflichten__liste { grid-template-columns: minmax(0, 1fr); }
  .ki-loesungen-pflichten__liste li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
  .ki-loesungen-pflichten__liste li::before { grid-row: span 2; }
}

/* ---------- Statt Befund: der Zeitfresser-Plan als Blatt ---------- */
.ki-loesungen-plan { overflow-x: clip; }
.ki-loesungen-plan__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(40px, 6vw, 96px); align-items: center; }
.ki-loesungen-plan__lead { max-width: 24em; margin-top: 22px; font: italic 400 clamp(23px, 2vw, 28px)/1.3 var(--serif); color: var(--hell); }
.ki-loesungen-plan__inhalt { display: grid; gap: 12px; margin: 26px 0 30px; padding-top: 20px; border-top: 1px solid var(--linie-dunkel); }
.ki-loesungen-plan__inhalt li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.5; color: var(--hell-leise); }
.ki-loesungen-plan__inhalt li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
.ki-loesungen-plan__blatt { position: relative; }
.ki-loesungen-plan__blatt::before, .ki-loesungen-plan__blatt::after { content: ""; position: absolute; inset: 0 0 40px; border-radius: 6px; background: #e9e0d2; }
.ki-loesungen-plan__blatt::before { transform: rotate(3.2deg) translate(12px, 10px); opacity: .55; }
.ki-loesungen-plan__blatt::after { transform: rotate(1.4deg) translate(5px, 4px); opacity: .8; }
.ki-loesungen-plan__papier { position: relative; z-index: 1; padding: clamp(24px, 3vw, 40px); border-radius: 6px; color: var(--tinte); background: #fffdf9; box-shadow: 0 70px 120px -60px rgba(0, 0, 0, .9); transform: rotate(-1deg); }
.ki-loesungen-plan__papier::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein), rgba(244, 165, 58, 0)); }
.ki-loesungen-plan__papier header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.ki-loesungen-plan__papier header img { width: 94px; height: auto; }
.ki-loesungen-plan__papier header span { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--leise); text-align: right; }
.ki-loesungen-plan__titel { margin-top: 20px; font: italic 400 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); }
.ki-loesungen-plan__fuer { margin-top: 4px; font-size: 15px; color: var(--leise); }
.ki-loesungen-plan__zeilen { margin-top: 20px; border-top: 1px solid var(--tinte); }
.ki-loesungen-plan__zeile { border-bottom: 1px dashed #d8ccbb; }
.ki-loesungen-plan__zeile summary { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 16px 0; list-style: none; cursor: pointer; }
.ki-loesungen-plan__zeile summary::-webkit-details-marker { display: none; }
.ki-loesungen-plan__zeile summary::after { content: ""; justify-self: end; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--bernstein-text); border-bottom: 2px solid var(--bernstein-text); transform: rotate(45deg); transition: transform .3s var(--weich); }
.ki-loesungen-plan__zeile[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.ki-loesungen-plan__zeile summary:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .08), rgba(244, 165, 58, 0) 80%); }
.ki-loesungen-plan__zeile summary:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.ki-loesungen-plan__zeile i { justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 700; white-space: nowrap; }
.ki-loesungen-plan__zeile--zuerst i { color: #1a130c; background: var(--bernstein); }
.ki-loesungen-plan__zeile--spaeter i { color: var(--tinte); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-loesungen-plan__zeile--nein i { color: var(--leise); box-shadow: inset 0 0 0 1px var(--leise); }
.ki-loesungen-plan__zeile--nein b { color: var(--leise); text-decoration: line-through; text-decoration-color: rgba(28, 23, 19, .35); }
.ki-loesungen-plan__zeile b { font-size: 16.5px; line-height: 1.35; }
.ki-loesungen-plan__zeile p { padding: 0 0 16px 116px; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.ki-loesungen-plan__papier footer { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 13.5px; color: var(--leise); }
.ki-loesungen-plan__papier footer img { width: 40px; height: 40px; border-radius: 50%; }
.ki-loesungen-plan__papier footer b { display: block; color: var(--tinte); }
.ki-loesungen-plan__tipp { position: relative; z-index: 1; margin-top: 26px; font-size: 14px; color: #b5a796; text-align: center; }
@media (max-width: 1000px) { .ki-loesungen-plan__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ki-loesungen-plan__zeile summary { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 10px; }
  .ki-loesungen-plan__zeile i { grid-column: 1; }
  .ki-loesungen-plan__zeile b { grid-column: 1; }
  .ki-loesungen-plan__zeile summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .ki-loesungen-plan__zeile p { padding-left: 0; }
  .ki-loesungen-plan__papier header { flex-direction: column; align-items: flex-start; }
  .ki-loesungen-plan__papier header span { text-align: left; }
  .ki-loesungen-plan .knopf--gross { width: 100%; }
}

/* ---------- Preis-Kopf unter dem Vorgehen ---------- */
.ki-loesungen-preis { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--linie); }
.ki-loesungen-preis__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 14px 72px; margin-bottom: 36px; }
.ki-loesungen-preis__kopf p { font-size: 18px; line-height: 1.55; color: var(--leise); }
@media (max-width: 900px) { .ki-loesungen-preis__kopf { grid-template-columns: minmax(0, 1fr); } .ki-loesungen-preis__kopf p { font-size: 17px; } }

/* ---------- Wegweiser: drei Fragen ohne Skript ---------- */
.ki-loesungen-weg { position: relative; isolation: isolate; overflow: hidden; color: var(--hell); background: #15110e; }
.ki-loesungen-weg__bild { position: absolute; top: 0; right: 0; z-index: -2; width: 64%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .7; }
.ki-loesungen-weg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #15110e 0%, #15110e 34%, rgba(21, 17, 14, .55) 62%, rgba(21, 17, 14, .2) 100%), linear-gradient(0deg, #15110e 0%, rgba(21, 17, 14, 0) 30%); }
.ki-loesungen-weg__kopf { max-width: 640px; }
.ki-loesungen-weg__kopf h2 em { color: var(--bernstein-licht); }
.ki-loesungen-weg__kopf p { margin-top: 16px; font-size: 19px; line-height: 1.55; color: var(--hell-leise); }
.ki-loesungen-weg__karte { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "f1 erg" "f2 erg" "f3 erg"; align-items: start; gap: 18px clamp(24px, 3vw, 44px); max-width: 1080px; margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 3vw, 40px); border-radius: 30px; background: rgba(21, 17, 14, .74); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 120px -60px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ki-loesungen-weg__frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.ki-loesungen-weg__frage--1 { grid-area: f1; }
.ki-loesungen-weg__frage--2 { grid-area: f2; display: none; }
.ki-loesungen-weg__frage--3 { grid-area: f3; display: none; }
.ki-loesungen-weg__frage legend { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0; font: italic 400 24px/1.2 var(--serif); color: var(--hell); }
.ki-loesungen-weg__frage legend span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font: italic 400 16px/1 var(--serif); color: var(--bernstein-licht); box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .5); }
.ki-loesungen-weg__frage label { position: relative; display: block; cursor: pointer; }
.ki-loesungen-weg__frage label + label { margin-top: 7px; }
.ki-loesungen-weg__frage input { position: absolute; opacity: 0; pointer-events: none; }
.ki-loesungen-weg__frage label > span { display: block; padding: 12px 16px 12px 44px; border-radius: 14px; font-size: 15.5px; line-height: 1.4; color: #e9dfd2; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); transition: background .25s, box-shadow .25s, color .25s; }
.ki-loesungen-weg__frage label > span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .45); transition: box-shadow .25s, background .25s; }
.ki-loesungen-weg__frage label:hover > span { color: var(--hell); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55); }
.ki-loesungen-weg__frage input:checked + span { color: var(--hell); background: linear-gradient(90deg, rgba(244, 165, 58, .24), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .7); }
.ki-loesungen-weg__frage input:checked + span::before { background: var(--bernstein); box-shadow: inset 0 0 0 4px #2a2119, 0 0 0 1.5px var(--bernstein); }
.ki-loesungen-weg__frage input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked) .ki-loesungen-weg__frage--2 { display: block; animation: auftritt .45s var(--weich) both; }
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-woche:checked) .ki-loesungen-weg__frage--3 { display: block; animation: auftritt .45s var(--weich) both; }
.ki-loesungen-weg__ergebnisse { grid-area: erg; position: sticky; top: calc(var(--kopf-h, 80px) + 20px); display: grid; gap: 14px; min-width: 0; }
.ki-loesungen-weg__warte { display: grid; place-items: center; min-height: 220px; padding: 24px; border-radius: 22px; font: italic 400 24px/1.3 var(--serif); color: #b5a796; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .14); background: repeating-linear-gradient(135deg, rgba(246, 239, 230, .025) 0 8px, rgba(246, 239, 230, 0) 8px 16px); }
.ki-loesungen-weg__erg { display: none; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; color: var(--tinte); background: #fffdf9; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); animation: auftritt .5s var(--weich) both; }
.ki-loesungen-weg__klein { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--bernstein-text); }
.ki-loesungen-weg__erg h3 { margin-top: 6px; font: italic 400 clamp(28px, 2.4vw, 34px)/1.1 var(--serif); color: var(--tinte); }
.ki-loesungen-weg__erg > p:not(.ki-loesungen-weg__klein) { margin: 12px 0 20px; font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.ki-loesungen-weg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ki-loesungen-weg__erg .knopf--hell { color: var(--tinte); }
.ki-loesungen-weg__neu { display: none; justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--hell-leise); font: 600 14.5px var(--grotesk); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .3); }
.ki-loesungen-weg__neu:hover { color: var(--hell); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.ki-loesungen-weg__karte:has(input:checked) .ki-loesungen-weg__neu { display: inline-flex; align-items: center; }
/* Ergebnisse je Antwort */
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-chat:checked) .ki-loesungen-weg__erg--chat,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-auto:checked) .ki-loesungen-weg__erg--auto,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-geo:checked) .ki-loesungen-weg__erg--geo,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-anz:checked) .ki-loesungen-weg__erg--anz,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-selten:checked) .ki-loesungen-weg__erg--selten,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-woche:checked):has(#ki-loesungen-w3-ja:checked) .ki-loesungen-weg__erg--ja,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-woche:checked):has(#ki-loesungen-w3-nein:checked) .ki-loesungen-weg__erg--nein { display: block; }
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-chat:checked) .ki-loesungen-weg__warte,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-auto:checked) .ki-loesungen-weg__warte,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-geo:checked) .ki-loesungen-weg__warte,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-anz:checked) .ki-loesungen-weg__warte,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-selten:checked) .ki-loesungen-weg__warte,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-woche:checked):has(#ki-loesungen-w3-ja:checked) .ki-loesungen-weg__warte,
.ki-loesungen-weg__karte:has(#ki-loesungen-w1-weiter:checked):has(#ki-loesungen-w2-woche:checked):has(#ki-loesungen-w3-nein:checked) .ki-loesungen-weg__warte { display: none; }
@supports not selector(:has(*)) { .ki-loesungen-weg__frage--2, .ki-loesungen-weg__frage--3 { display: block; } .ki-loesungen-weg__warte { display: none; } .ki-loesungen-weg__erg { display: block; } }
@media (max-width: 900px) {
  .ki-loesungen-weg__bild { width: 100%; height: 46%; opacity: .45; }
  .ki-loesungen-weg::before { background: linear-gradient(0deg, #15110e 0%, #15110e 55%, rgba(21, 17, 14, .4) 100%); }
  .ki-loesungen-weg__karte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "f1" "f2" "f3" "erg"; }
  .ki-loesungen-weg__ergebnisse { position: static; }
  .ki-loesungen-weg__warte { min-height: 0; padding: 16px; font-size: 19px; }
}
@media (max-width: 560px) {
  .ki-loesungen-weg__karte { margin-inline: calc(-1 * var(--rand) + 8px); padding: 20px 16px; border-radius: 24px; }
  .ki-loesungen-weg__frage legend { font-size: 21px; }
  .ki-loesungen-weg__erg .knopf { width: 100%; }
}
@media (max-width: 900px) {
  .ki-loesungen-stationen__station { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 10px; padding-block: 10px; }
  .ki-loesungen-stationen__station b { grid-column: 1 / -1; grid-row: 2; }
  .ki-loesungen-stationen__stand { grid-row: 1; grid-column: 2; margin-top: 0; }
  .ki-loesungen-stationen__station::before { top: 12px; }
  .ki-loesungen-stationen__station--gilt::after { top: 17px; }
}

/* =====================================================================
   Kontakt (seiten/80-kontakt.html): ruhiger Einstieg mit Visitenkarte, Rücksprung ?gesendet=1|0,
   Formular-Karte mit Reitern Schreiben, Rückruf, Termin (nur CSS über Optionsfelder name="anliegen"),
   Ablauf-Leiste, dunkles Band mit Analyse und „Wie gehe ich am besten vor?“. Alle Klassen mit Präfix kontakt-.
   ===================================================================== */

.kontakt-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Einstieg: Visitenkarte statt Live-Szene ---------- */
.kontakt-einstieg .einstieg__inhalt { align-items: center; }
.kontakt-visite { grid-area: live; justify-self: end; width: min(100%, 430px); padding: clamp(26px, 2.6vw, 36px); border-radius: 28px; font-style: normal; color: var(--hell);
  background: linear-gradient(160deg, rgba(246, 239, 230, .085), rgba(246, 239, 230, .02) 60%), rgba(28, 23, 19, .72);
  box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 100px -50px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.kontakt-visite__helm { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--hell); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); }
.kontakt-visite__helm img { width: 36px; height: 36px; }
.kontakt-visite__name { margin-top: 20px; font: italic 400 clamp(28px, 2.4vw, 34px)/1.05 var(--serif); color: var(--hell); }
.kontakt-visite__wer { margin-top: 4px; font-size: 15.5px; color: var(--hell-leise); }
.kontakt-visite__wege { margin-top: 22px; }
.kontakt-visite__wege li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--linie-dunkel); }
.kontakt-visite__wege li:last-child { padding-bottom: 0; }
.kontakt-visite__wege .symbol { margin-top: 3px; color: var(--bernstein); }
.kontakt-visite__wege small { display: block; font-size: 13.5px; letter-spacing: .02em; color: var(--hell-leise); }
.kontakt-visite__wege a { display: inline-block; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--hell); text-decoration: none; }
.kontakt-visite__wege a:hover { color: var(--bernstein-licht); }
.kontakt-visite__wege em { display: block; margin-top: 2px; font-style: normal; font-size: 14.5px; line-height: 1.45; color: var(--hell-leise); }
.kontakt-visite__wege li > span { font-size: 16.5px; line-height: 1.5; color: var(--hell); overflow-wrap: anywhere; }
.kontakt-person { align-items: center; }
.kontakt-person b { color: var(--hell); }
.kontakt-person__bild { position: relative; flex: none; }
.kontakt-person__bild .status-punkt { right: -2px; bottom: -1px; width: 11px; height: 11px; border-color: #17130f; }
.ist-erreichbar .kontakt-person [data-status-text] { color: #8fd6a9; }

/* ---------- Rücksprung von senden.php: sichtbar im ersten Bildschirm, ohne Fristen ---------- */
.kontakt-rueck { display: none; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; margin: 0 0 28px; padding: 22px 24px 24px 20px; border-radius: 22px; background: var(--papier); color: var(--tinte); box-shadow: inset 4px 0 0 var(--bernstein), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.kontakt-rueck > .symbol { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--creme); color: var(--bernstein-text); }
.kontakt-rueck--fehler { box-shadow: inset 4px 0 0 var(--bernstein-tief), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.kontakt-rueck__titel { font: italic 400 clamp(26px, 2.2vw, 30px)/1.1 var(--serif); color: var(--tinte); }
.kontakt-rueck p + p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--leise); }
.kontakt-rueck a:not(.knopf) { color: var(--tinte); font-weight: 600; }
.kontakt-rueck .knopf { margin-top: 16px; }
body:has(.meldung--ok) .kontakt-rueck--ok, body:has(.meldung--fehler) .kontakt-rueck--fehler { display: grid; }
/* Die schwebende Meldung aus ares.js bleibt für Vorleseprogramme erhalten, sichtbar ist hier der Block im Einstieg */
.seite-kontakt .meldung { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); animation: none; transform: none; }
.seite-kontakt .meldung__zu { display: none; }

/* ---------- Formular-Karte mit Reitern ---------- */
.kontakt-bereich__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(36px, 5vw, 80px); align-items: start; }
.kontakt-karte { padding: clamp(22px, 3.2vw, 46px); border-radius: 30px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie), 0 50px 90px -60px rgba(60, 40, 20, .5); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.kontakt-karte h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.08; }
.kontakt-karte fieldset, .kontakt-lotse fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.kontakt-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 24px !important; padding: 4px !important; border-radius: 999px; background: var(--espresso); }
.kontakt-reiter label, .kontakt-anliegen label, .kontakt-zeit label, .kontakt-lotse__frage label { position: relative; display: block; cursor: pointer; }
.kontakt-reiter input, .kontakt-anliegen input, .kontakt-zeit input, .kontakt-lotse__frage input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.kontakt-reiter span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 10px; border-radius: 999px; font: 600 16px/1.1 var(--grotesk); color: var(--hell-leise); transition: background .2s, color .2s; }
.kontakt-reiter .symbol { width: 18px; height: 18px; }
.kontakt-reiter label:hover span { color: var(--hell); }
.kontakt-reiter input:checked + span { background: var(--hell); color: var(--tinte); }
.kontakt-reiter input:checked + span .symbol { color: var(--bernstein-text); }
.kontakt-reiter input:focus-visible + span, .kontakt-anliegen input:focus-visible + span, .kontakt-zeit input:focus-visible + span, .kontakt-lotse__frage input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }

.kontakt-panel { display: none; gap: 20px; margin-top: 28px; }
.kontakt-karte:has(#k-weg-schreiben:checked) .kontakt-panel--schreiben,
.kontakt-karte:has(#k-weg-rueckruf:checked) .kontakt-panel--rueckruf,
.kontakt-karte:has(#k-weg-termin:checked) .kontakt-panel--termin { display: grid; animation: auftritt .5s var(--weich) both; }
.kontakt-panel__satz { font-size: 17.5px; line-height: 1.55; color: var(--leise); }
.kontakt-panel .weg__danke { color: var(--tinte); }

/* Anliegen als kompakte Kacheln mit Linien-Symbolen */
.kontakt-anliegen legend, .kontakt-zeit legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 600; color: var(--tinte); }
.kontakt-anliegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kontakt-anliegen legend { grid-column: 1 / -1; }
.kontakt-anliegen span { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 1px 12px; align-items: center; height: 100%; padding: 14px 16px; border-radius: 16px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .2s, background .2s; }
.kontakt-anliegen .symbol { grid-row: span 2; color: var(--bernstein-text); }
.kontakt-anliegen b { font-size: 16px; line-height: 1.25; }
.kontakt-anliegen small { font-size: 14px; line-height: 1.35; color: var(--leise); }
.kontakt-anliegen label:hover span { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.kontakt-anliegen input:checked + span { background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }

/* Felder */
.kontakt-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kontakt-feld--breit { grid-column: 1 / -1; }
.kontakt-feld > span { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 600; color: var(--tinte); }
.kontakt-feld small { font-weight: 400; color: var(--leise); }
.kontakt-feld input, .kontakt-feld textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: 400 17px/1.45 var(--grotesk); transition: box-shadow .2s, background .2s; }
.kontakt-feld textarea { resize: vertical; }
.kontakt-feld input::placeholder, .kontakt-feld textarea::placeholder { color: #8a7f72; }
.kontakt-feld input:focus, .kontakt-feld textarea:focus { outline: none; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }

/* Hinweis zur Nachricht wechselt mit dem Anliegen */
.kontakt-tipps p { display: none; position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.kontakt-tipps p::before { content: ""; position: absolute; left: 0; top: .78em; width: 18px; height: 1.5px; background: var(--bernstein-tief); }
.kontakt-panel--schreiben:has(input[value="kunden"]:checked) [data-fuer="kunden"],
.kontakt-panel--schreiben:has(input[value="mitarbeiter"]:checked) [data-fuer="mitarbeiter"],
.kontakt-panel--schreiben:has(input[value="ki"]:checked) [data-fuer="ki"],
.kontakt-panel--schreiben:has(input[value="anderes"]:checked) [data-fuer="anderes"] { display: block; }

/* Wunschzeit und Gesprächsart als Wahlknöpfe */
.kontakt-zeit { display: flex; flex-wrap: wrap; gap: 8px; }
.kontakt-zeit legend { width: 100%; }
.kontakt-zeit span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); font-size: 15.5px; font-weight: 600; transition: background .2s, color .2s, box-shadow .2s; }
.kontakt-zeit label:hover span { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.kontakt-zeit input:checked + span { background: var(--tinte); color: var(--hell); box-shadow: none; }

.kontakt-ok { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.kontakt-ok input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--bernstein-tief); }
.kontakt-ok a { color: var(--tinte); font-weight: 600; }
.kontakt-panel > .knopf { justify-self: start; }

/* ---------- Seitenleiste: Ablauf und Kurzfakten ---------- */
.kontakt-ablauf { padding-top: clamp(8px, 1.6vw, 22px); }
.kontakt-ablauf h2 { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.12; }
.kontakt-ablauf__schritte { counter-reset: ks; margin-top: 26px; }
.kontakt-ablauf__schritte li { counter-increment: ks; position: relative; display: grid; gap: 2px; padding: 0 0 24px 52px; font-size: 16px; line-height: 1.5; color: var(--leise); }
.kontakt-ablauf__schritte li::before { content: counter(ks, upper-roman); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1px var(--bernstein-tief); font: italic 400 18px/1 var(--serif); color: var(--bernstein-text); }
.kontakt-ablauf__schritte li:not(:last-child)::after { content: ""; position: absolute; left: 17.5px; top: 38px; bottom: 2px; width: 1px; background: linear-gradient(var(--bernstein-tief), var(--linie)); }
.kontakt-ablauf__schritte b { font-size: 17px; color: var(--tinte); }
.kontakt-ablauf__kurz { margin-top: 10px; border-top: 1px solid var(--tinte); }
.kontakt-ablauf__kurz div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.kontakt-ablauf__kurz dt { font-size: 14.5px; color: var(--leise); }
.kontakt-ablauf__kurz dd { font: italic 400 21px/1.25 var(--serif); color: var(--tinte); }

/* ---------- Dunkles Band: Analyse und Wegweiser ---------- */
.kontakt-vorab__raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.kontakt-vorab h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; }
.kontakt-vorab .lead { margin-top: 16px; }
.kontakt-vorab .start { margin-top: 28px; }
.kontakt-lotse { padding: clamp(24px, 2.6vw, 36px); border-radius: 28px; background: rgba(246, 239, 230, .045); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14), 0 60px 100px -50px rgba(0, 0, 0, .9); }
.kontakt-lotse__frage { display: grid; gap: 10px; }
.kontakt-lotse__frage legend { margin-bottom: 4px; padding: 0; font: 600 clamp(22px, 1.9vw, 27px)/1.15 var(--grotesk); color: var(--hell); }
.kontakt-lotse__frage legend em { display: block; margin-top: 2px; font: italic 400 1.15em/1.1 var(--serif); color: var(--bernstein-licht); }
.kontakt-lotse__satz { margin-bottom: 4px; font-size: 15.5px; color: var(--hell-leise); }
.kontakt-lotse__frage span { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 18px; border-radius: 14px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); font: 600 16px/1.25 var(--grotesk); color: var(--hell); transition: background .2s, box-shadow .2s, transform .25s var(--weich); }
.kontakt-lotse__frage span::after { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .4); transition: box-shadow .2s; }
.kontakt-lotse__frage label:hover span { background: rgba(246, 239, 230, .11); box-shadow: inset 0 0 0 1px rgba(247, 187, 99, .6); transform: translateX(3px); }
.kontakt-lotse__frage input:checked + span { background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px var(--bernstein); }
.kontakt-lotse__frage input:checked + span::after { box-shadow: inset 0 0 0 5px var(--bernstein); }
.kontakt-lotse__ergebnisse { margin-top: 18px; }
.kontakt-lotse__leer { padding: 16px 18px; border-radius: 16px; border: 1px dashed rgba(246, 239, 230, .22); font-size: 15px; line-height: 1.5; color: var(--hell-leise); }
.kontakt-lotse__ergebnisse [data-fuer] { display: none; padding: 22px 22px 24px; border-radius: 20px; background: rgba(244, 165, 58, .09); box-shadow: inset 0 0 0 1px rgba(247, 187, 99, .38); animation: auftritt .5s var(--weich) both; }
.kontakt-lotse__ergebnisse b { display: block; font: italic 400 28px/1.1 var(--serif); color: var(--bernstein-licht); }
.kontakt-lotse__ergebnisse [data-fuer] p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: #e1d5c5; }
.kontakt-lotse__ergebnisse .knopf { margin-top: 16px; }
.kontakt-lotse:has(input:checked) .kontakt-lotse__leer { display: none; }
.kontakt-lotse:has(input[value="kunden"]:checked) [data-fuer="kunden"],
.kontakt-lotse:has(input[value="werbung"]:checked) [data-fuer="werbung"],
.kontakt-lotse:has(input[value="leute"]:checked) [data-fuer="leute"],
.kontakt-lotse:has(input[value="zeit"]:checked) [data-fuer="zeit"],
.kontakt-lotse:has(input[value="offen"]:checked) [data-fuer="offen"] { display: block; }

/* ---------- Breiten ---------- */
@media (max-width: 1099px) {
  .kontakt-visite { justify-self: start; width: min(100%, 560px); margin-top: 28px; }
}
@media (max-width: 1000px) {
  .kontakt-bereich__raster, .kontakt-vorab__raster { grid-template-columns: minmax(0, 1fr); }
  .kontakt-ablauf { padding-top: 0; }
}
@media (max-width: 760px) {
  .kontakt-rueck { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 18px 20px 20px; margin-bottom: 20px; }
  .kontakt-rueck > .symbol { width: 40px; height: 40px; padding: 9px; }
  .kontakt-visite { padding: 22px 20px; border-radius: 22px; }
  .kontakt-visite__helm { display: none; }
  .kontakt-visite__name { margin-top: 0; }
  .kontakt-visite__wege a { font-size: 18px; }
  .kontakt-felder { grid-template-columns: minmax(0, 1fr); }
  .kontakt-panel > .knopf, .kontakt-rueck .knopf { justify-self: stretch; width: 100%; }
  .kontakt-karte { border-radius: 24px; }
}
@media (max-width: 480px) {
  .kontakt-anliegen { grid-template-columns: minmax(0, 1fr); }
  .kontakt-reiter .symbol { display: none; }
  .kontakt-reiter span { font-size: 15px; padding: 0 6px; }
  .kontakt-ablauf__kurz div { grid-template-columns: 100px minmax(0, 1fr); }
}

/* ==========================================================================
   Zusatz Landingpages (landingpages/index.html, Quelle _werkzeug/seiten/27-landingpages.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix landingpages-. Nur Tokens aus :root.
   Achtung: teile/zusatz/landingpages.css (alter Rahmen) nutzt landingpages-anatomie, -fehler, -test*;
   diese Namen hier nicht verwenden.
   Enthält: Live-Szene „Anzeigenklick wird gezählte Anfrage“, Anatomie als Handy zum Antippen,
   10-Sekunden-Test mit Stoppuhr, Wegweiser Google oder Social, Waage Sofortformular, Messplan, Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen aus ares.js.
   ========================================================================== */

.landingpages-zehn [hidden], .landingpages-mess [hidden], .landingpages-weg [hidden], .landingpages-bau__feld[hidden] { display: none !important; }

/* ---------- Einstieg: Aussage etwas kompakter, damit die Vertrauensleiste im ersten Bild bleibt ---------- */
.landingpages-einstieg .einstieg__aussage { font-size: clamp(40px, min(4.5vw, 8svh), 64px); }
.landingpages-einstieg .einstieg__aussage em { font-size: 1.16em; line-height: .98; margin-top: 4px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .landingpages-einstieg .einstieg__aussage { font-size: clamp(36px, min(4.2vw, 7svh), 58px); }
  .landingpages-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .landingpages-einstieg .einstieg__aussage { font-size: clamp(29px, 8.2vw, 38px); }
  .landingpages-einstieg .einstieg__aussage em { font-size: 1.14em; }
}

/* ---------- Live-Szene I: Anzeige wird geklickt, Seite greift sie auf ---------- */
.landingpages-sz__anzeige { position: relative; flex: none; padding: 14px 18px 15px; border-radius: 16px; color: var(--tinte); background: #f3ebdf; box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .85); }
.landingpages-sz__kennung { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #5d5449; }
.landingpages-sz__kennung b { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--tinte); box-shadow: inset 0 0 0 1.2px var(--tinte); }
.landingpages-sz__titel { margin-top: 7px; font: 600 19px/1.2 var(--grotesk); letter-spacing: -.01em; }
.landingpages-sz__text { margin-top: 3px; font-size: 13.5px; color: #5d5449; }
.landingpages-sz__zeiger { position: absolute; right: 34px; bottom: 6px; width: 22px; height: 22px; fill: #fbf6ee; stroke: #1a130c; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); opacity: 0; }
.landingpages-sz__seite { position: relative; flex: 1; min-height: 0; margin-top: 16px; overflow: hidden; border-radius: 16px; background: #f6efe6; box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .85); }
.landingpages-sz__leiste { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #e6dccd; }
.landingpages-sz__leiste i { width: 8px; height: 8px; border-radius: 50%; background: #c9bcab; }
.landingpages-sz__leiste span { display: flex; align-items: center; flex: 1; height: 19px; margin-left: 10px; padding: 0 10px; border-radius: 6px; font-size: 11.5px; color: #5d5449; background: #fbf8f3; }
.landingpages-sz__innen { padding: 18px 18px 16px; }
.landingpages-sz__ueber { display: inline; padding: 2px 4px; border-radius: 6px; font: 600 22px/1.25 var(--grotesk); letter-spacing: -.02em; color: var(--tinte); background: linear-gradient(90deg, rgba(244, 165, 58, .45), rgba(244, 165, 58, .2)) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.landingpages-sz__zeilen { display: grid; gap: 6px; margin: 14px 0 14px; }
.landingpages-sz__zeilen i { height: 6px; border-radius: 3px; background: #dbcfbf; }
.landingpages-sz__zeilen i:last-child { width: 70%; }
.landingpages-sz__knopf { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #1a130c; background: var(--bernstein); box-shadow: 0 8px 18px -8px rgba(228, 143, 23, .8); }
.landingpages-sz__passt { position: absolute; right: 10px; top: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hell); background: var(--espresso); box-shadow: 0 0 0 1px var(--bernstein), 0 10px 22px -10px rgba(244, 165, 58, .8); }
.landingpages-sz__passt .symbol { width: 14px; height: 14px; color: var(--bernstein-licht); }
.ist-aktiv .landingpages-sz__anzeige { animation: eingang .8s var(--weich) .35s both, landingpages-tipp .45s ease 2.05s; }
.ist-aktiv .landingpages-sz__zeiger { animation: landingpages-zeiger 1.3s var(--weich) 1.1s both; }
.ist-aktiv .landingpages-sz__seite { animation: landingpages-hoch .9s var(--weich) 2.4s both; }
.ist-aktiv .landingpages-sz__ueber { animation: landingpages-leuchten 1.4s var(--weich) 3.2s both; }
.ist-aktiv .landingpages-sz__passt { animation: punkt-auf .6s var(--weich) 3.9s both; }
@keyframes landingpages-tipp { 50% { transform: scale(.975); box-shadow: 0 0 0 6px rgba(244, 165, 58, .35), 0 18px 34px -20px rgba(0, 0, 0, .85); } }
@keyframes landingpages-zeiger { from { opacity: 0; transform: translate(70px, 40px); } 40% { opacity: 1; } to { opacity: 1; } }
@keyframes landingpages-hoch { from { opacity: 0; transform: translateY(60px); } }
@keyframes landingpages-leuchten { from { background-size: 0% 100%; } }

/* ---------- Live-Szene II: Formular füllt sich, Anfrage wird gezählt ---------- */
.landingpages-sz__formular { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 16px 14px; border-radius: 16px; background: #f6efe6; box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .85); }
.landingpages-sz__feld { display: grid; gap: 3px; }
.landingpages-sz__feld small { font-size: 11.5px; font-weight: 600; color: #5d5449; }
.landingpages-sz__feld span { display: flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 9px; background: #fffdf9; box-shadow: inset 0 0 0 1px #dccfbd; }
.landingpages-sz__feld b { font-size: 14px; font-weight: 600; color: var(--tinte); white-space: nowrap; }
.landingpages-sz__feld:nth-child(3), .landingpages-sz__senden { grid-column: 1 / -1; }
.landingpages-sz__senden { justify-self: start; display: inline-flex; align-items: center; height: 36px; margin-top: 4px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1a130c; background: var(--bernstein); box-shadow: 0 8px 18px -8px rgba(228, 143, 23, .8); }
.landingpages-sz__danke { display: grid; gap: 8px; margin-top: auto; padding-top: 10px; }
.landingpages-sz__danke > p:first-child { padding: 9px 16px; border-radius: 14px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.landingpages-sz__danke > p:first-child b { display: block; font: italic 400 21px/1.15 var(--serif); color: var(--hell); }
.landingpages-sz__danke > p:first-child small { display: none; }
.landingpages-sz__gezaehlt { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; font-size: 15px; font-weight: 700; color: var(--hell); background: linear-gradient(90deg, rgba(244, 165, 58, .24), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.landingpages-sz__gezaehlt small { display: block; font-size: 12px; font-weight: 400; color: #cdbfae; }
.landingpages-sz__eins { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; font: italic 400 26px/1 var(--serif); color: var(--bernstein-licht); background: rgba(244, 165, 58, .14); }
.ist-aktiv .landingpages-sz__formular { animation: eingang .7s var(--weich) .3s both; }
.ist-aktiv .landingpages-sz__feld b { animation: landingpages-tippen .9s both; animation-timing-function: steps(var(--n)); }
.ist-aktiv .landingpages-sz__feld:nth-child(1) b { animation-delay: .9s; }
.ist-aktiv .landingpages-sz__feld:nth-child(2) b { animation-delay: 1.8s; }
.ist-aktiv .landingpages-sz__feld:nth-child(3) b { animation-delay: 2.7s; animation-duration: 1.2s; }
.ist-aktiv .landingpages-sz__senden { animation: klick .5s ease 4.05s; }
.ist-aktiv .landingpages-sz__danke > p:first-child { animation: auftritt .7s var(--weich) 4.5s both; }
.ist-aktiv .landingpages-sz__gezaehlt { animation: eingang .7s var(--weich) 5.1s both; }
.ist-aktiv .landingpages-sz__eins { animation: punkt-auf .6s var(--weich) 5.5s both; }
@keyframes landingpages-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (min-width: 1100px) and (max-height: 800px) {
  .landingpages-sz__innen { padding: 14px 16px 12px; }
  .landingpages-sz__zeilen { margin: 10px 0; }
  .landingpages-sz__formular { gap: 6px; padding-block: 12px 13px; }
  .landingpages-sz__feld span { height: 29px; }
  .landingpages-sz__danke > p:first-child { display: none; }
}
@media (max-width: 760px) {
  .landingpages-sz__anzeige { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 11px; }
  .landingpages-sz__kennung span { display: none; }
  .landingpages-sz__kennung b { padding: 0 6px; font-size: 10.5px; }
  .landingpages-sz__titel { margin-top: 0; font-size: 14px; white-space: nowrap; }
  .landingpages-sz__text, .landingpages-sz__leiste, .landingpages-sz__zeilen, .landingpages-sz__knopf { display: none; }
  .landingpages-sz__zeiger { right: 16px; bottom: 2px; width: 16px; height: 16px; }
  .landingpages-sz__seite { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-right: 8px; border-radius: 11px; }
  .landingpages-sz__innen { min-width: 0; padding: 9px 4px 9px 10px; }
  .landingpages-sz__ueber { font-size: 13px; white-space: nowrap; }
  .landingpages-sz__passt { position: static; flex: none; padding: 3px 9px 3px 6px; font-size: 11px; }
  .landingpages-sz__passt .symbol { width: 12px; height: 12px; }
  .landingpages-sz__formular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; padding: 7px 10px 8px; border-radius: 11px; }
  .landingpages-sz__feld small { font-size: 10.5px; }
  .landingpages-sz__feld span { height: 24px; padding: 0 8px; border-radius: 7px; }
  .landingpages-sz__feld b { font-size: 12px; }
  .landingpages-sz__senden, .landingpages-sz__danke > p:first-child, .landingpages-sz__feld.sz-nur-gross { display: none; }
  .landingpages-sz__danke { margin-top: 8px; }
  .landingpages-sz__gezaehlt { gap: 9px; padding: 4px 10px 4px 5px; border-radius: 10px; font-size: 13px; }
  .landingpages-sz__gezaehlt small { display: none; }
  .landingpages-sz__eins { width: 26px; height: 26px; border-radius: 8px; font-size: 19px; }
  .ist-aktiv .landingpages-sz__gezaehlt { animation-delay: 4.2s; }
  .ist-aktiv .landingpages-sz__eins { animation-delay: 4.6s; }
}

/* ---------- Anatomie: Handy mit acht Teilen zum Antippen, Erklärung daneben ---------- */
.landingpages-bau { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(36px, 6vw, 96px); align-items: center; }
.landingpages-handy { position: relative; display: grid; justify-items: center; }
.landingpages-handy::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 20, .3), rgba(60, 40, 20, 0)); }
.landingpages-handy__rahmen { position: relative; width: min(100%, 352px); padding: 14px; border-radius: 48px; background: linear-gradient(160deg, #3a3028 0%, #1a1511 55%, #120e0b 100%); box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .14), inset 0 2px 0 rgba(255, 255, 255, .12), 0 60px 110px -50px rgba(40, 25, 10, .75); }
.landingpages-handy__kamera { position: absolute; left: 50%; top: 24px; z-index: 2; width: 84px; height: 22px; border-radius: 999px; background: #0d0a08; transform: translateX(-50%); }
.landingpages-handy__schirm { display: grid; gap: 4px; padding: 46px 12px 16px; border-radius: 36px; background: #fbf8f3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.landingpages-teil { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 10px; min-height: 48px; padding: 8px 8px 8px 12px; border: 0; border-radius: 13px; background: transparent; color: var(--leise); font: 600 12.5px/1.2 var(--grotesk); text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s; }
.landingpages-teil__skizze { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.landingpages-teil__skizze i { display: block; height: 6px; border-radius: 3px; background: #ddd1c1; }
.landingpages-teil__name { grid-column: 2; grid-row: 1; white-space: nowrap; }
.landingpages-teil__nr { grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: italic 400 13.5px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.3px rgba(138, 79, 0, .4); transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--weich); }
.landingpages-teil:hover { box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .35); }
.landingpages-teil:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.landingpages-teil[aria-selected="true"] { color: var(--tinte); background: linear-gradient(90deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.landingpages-teil[aria-selected="true"] .landingpages-teil__nr { color: var(--bernstein-licht); background: var(--espresso); box-shadow: 0 0 0 3px rgba(244, 165, 58, .25); transform: rotate(-8deg); }
/* Skizzen je Teil */
.landingpages-teil--ueber .landingpages-teil__skizze i { height: 11px; border-radius: 4px; background: var(--tinte); }
.landingpages-teil--ueber .landingpages-teil__skizze i + i { width: 62%; }
.landingpages-teil--unter .landingpages-teil__skizze i + i { width: 74%; }
.landingpages-teil--knopf .landingpages-teil__skizze i { width: 58%; height: 22px; border-radius: 999px; background: var(--bernstein); box-shadow: 0 6px 14px -6px rgba(228, 143, 23, .8); }
.landingpages-teil--vertrauen .landingpages-teil__skizze { flex-direction: row; gap: 4px; }
.landingpages-teil--vertrauen .landingpages-teil__skizze i { width: 12px; height: 12px; border-radius: 2px; background: var(--bernstein-tief); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.landingpages-teil--gruende .landingpages-teil__skizze i { position: relative; margin-left: 14px; }
.landingpages-teil--gruende .landingpages-teil__skizze i::before { content: ""; position: absolute; left: -14px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--bernstein-tief); }
.landingpages-teil--gruende .landingpages-teil__skizze i:nth-child(2) { width: 82%; }
.landingpages-teil--gruende .landingpages-teil__skizze i:nth-child(3) { width: 66%; }
.landingpages-teil--ablauf .landingpages-teil__skizze { flex-direction: row; align-items: center; gap: 0; }
.landingpages-teil--ablauf .landingpages-teil__skizze i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px var(--bernstein-tief); }
.landingpages-teil--ablauf .landingpages-teil__skizze i + i { margin-left: 22px; position: relative; }
.landingpages-teil--ablauf .landingpages-teil__skizze i + i::before { content: ""; position: absolute; right: 16px; top: 6px; width: 20px; border-top: 2px dashed #cdbfae; }
.landingpages-teil--ablauf .landingpages-teil__skizze i:last-child { background: var(--bernstein-tief); }
.landingpages-teil--fragen .landingpages-teil__skizze i { position: relative; height: 14px; border-radius: 5px; background: none; box-shadow: inset 0 0 0 1.3px #d6c9b7; }
.landingpages-teil--fragen .landingpages-teil__skizze i::after { content: "+"; position: absolute; right: 6px; top: -2px; font: 600 13px/1 var(--grotesk); color: var(--bernstein-text); }
.landingpages-teil--formular .landingpages-teil__skizze { gap: 4px; }
.landingpages-teil--formular .landingpages-teil__skizze i { height: 11px; border-radius: 4px; background: #fffdf9; box-shadow: inset 0 0 0 1.3px #d6c9b7; }
.landingpages-teil--formular .landingpages-teil__skizze i:last-child { width: 46%; height: 13px; border-radius: 999px; background: var(--tinte); box-shadow: none; }

.landingpages-bau__felder { min-width: 0; }
.landingpages-bau__feld { position: relative; min-height: 330px; overflow: hidden; padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); animation: auftritt .45s var(--weich) both; }
.landingpages-bau__gross { position: absolute; right: clamp(20px, 3vw, 40px); top: 4px; font: italic 400 clamp(90px, 9vw, 140px)/1 var(--serif); color: rgba(138, 79, 0, .12); pointer-events: none; }
.landingpages-bau__feld h3 { position: relative; max-width: 13em; font: italic 400 clamp(30px, 2.8vw, 40px)/1.08 var(--serif); letter-spacing: -.01em; }
.landingpages-bau__feld > p:not(.landingpages-fehler2) { position: relative; max-width: 30em; margin-top: 16px; font-size: 17.5px; line-height: 1.6; color: var(--leise); }
.landingpages-fehler2 { position: relative; display: grid; gap: 8px; margin-top: 26px; padding: 18px 20px 18px 54px; border-radius: 18px; font-size: 16px; line-height: 1.5; color: var(--tinte); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.landingpages-fehler2::before, .landingpages-fehler2::after { content: ""; position: absolute; left: 22px; top: 27px; width: 18px; height: 2px; border-radius: 2px; background: #962c13; transform: rotate(45deg); }
.landingpages-fehler2::after { transform: rotate(-45deg); }
.landingpages-fehler2 b { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #962c13; background: #f7e1da; }
.landingpages-bau__notiz { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 15px; line-height: 1.6; color: var(--leise); }
@media (max-width: 960px) {
  .landingpages-bau { grid-template-columns: minmax(0, 1fr); }
  .landingpages-bau__feld { min-height: 0; }
}
@media (max-width: 560px) {
  .landingpages-handy__rahmen { padding: 11px; border-radius: 40px; }
  .landingpages-handy__schirm { padding: 40px 8px 12px; border-radius: 30px; }
  .landingpages-handy__kamera { top: 19px; width: 70px; height: 19px; }
  .landingpages-teil { min-height: 46px; padding-left: 10px; }
  .landingpages-bau__feld { padding: 26px 20px; border-radius: 22px; }
  .landingpages-bau__gross { font-size: 72px; right: 14px; }
  .landingpages-bau__feld h3 { padding-right: 44px; font-size: 28px; }
  .landingpages-bau__feld > p:not(.landingpages-fehler2) { font-size: 16px; }
}

/* ---------- 10-Sekunden-Test: Stoppuhr füllt sich mit jedem Haken (dunkles Band) ---------- */
.landingpages-zehn-abschnitt { position: relative; overflow-x: clip; background: radial-gradient(50% 70% at 12% 30%, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 70%), var(--espresso); }
.landingpages-zehn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(36px, 6vw, 96px); align-items: start; }
.landingpages-zehn__text h2 { max-width: 11em; }
.landingpages-zehn__lead { max-width: 30em; margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--hell-leise); }
.landingpages-uhr { position: relative; width: 168px; height: 168px; margin-top: 34px; }
.landingpages-uhr__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--bernstein) calc(var(--anteil, 0) * 360deg), rgba(246, 239, 230, .1) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); filter: drop-shadow(0 0 18px rgba(244, 165, 58, .35)); }
.landingpages-uhr__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -1.5deg, var(--espresso) 0 3deg, transparent 3deg calc(360deg / 7)); }
.landingpages-uhr__krone { position: absolute; left: 50%; top: -14px; width: 26px; height: 12px; border-radius: 4px 4px 2px 2px; background: #3a3028; transform: translateX(-50%); }
.landingpages-uhr::before { content: ""; position: absolute; left: 50%; top: -8px; width: 26px; height: 10px; border-radius: 4px 4px 2px 2px; background: #4a3d31; transform: translateX(-50%); }
.landingpages-uhr__stand { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.landingpages-uhr__stand b { font: italic 400 62px/.9 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.landingpages-uhr__stand span { font-size: 14px; color: var(--hell-leise); }
.landingpages-zehn__stufen { margin-top: 30px; border-top: 1px solid rgba(244, 165, 58, .5); }
.landingpages-zehn__stufe { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--linie-dunkel); opacity: .62; transition: opacity .3s, background .3s; }
.landingpages-zehn__stufe::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: rgba(246, 239, 230, .16); transition: background .3s; }
.landingpages-zehn__stufe b { font: italic 400 21px/1.2 var(--serif); color: var(--hell); }
.landingpages-zehn__stufe span { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
.landingpages-zehn[data-summe="7"] .landingpages-zehn__stufe--voll,
.landingpages-zehn:is([data-summe="5"], [data-summe="6"]) .landingpages-zehn__stufe--gut,
.landingpages-zehn:is([data-summe="1"], [data-summe="2"], [data-summe="3"], [data-summe="4"]) .landingpages-zehn__stufe--wenig { opacity: 1; background: linear-gradient(90deg, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 80%); }
.landingpages-zehn[data-summe="7"] .landingpages-zehn__stufe--voll::before,
.landingpages-zehn:is([data-summe="5"], [data-summe="6"]) .landingpages-zehn__stufe--gut::before,
.landingpages-zehn:is([data-summe="1"], [data-summe="2"], [data-summe="3"], [data-summe="4"]) .landingpages-zehn__stufe--wenig::before { background: var(--bernstein); }
.landingpages-zehn[data-summe="7"] .landingpages-zehn__stufe--voll b,
.landingpages-zehn:is([data-summe="5"], [data-summe="6"]) .landingpages-zehn__stufe--gut b,
.landingpages-zehn:is([data-summe="1"], [data-summe="2"], [data-summe="3"], [data-summe="4"]) .landingpages-zehn__stufe--wenig b { color: var(--bernstein-licht); }
.landingpages-zehn__weiter { margin-top: 22px; }
.landingpages-zehn__weiter p { max-width: 32em; font-size: 14.5px; line-height: 1.55; color: var(--hell-leise); }
.landingpages-zehn__weiter .knopf--hell { color: var(--hell); }
.landingpages-zehn__punkte { min-width: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid rgba(244, 165, 58, .5); }
.landingpages-zehn__punkte label { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; padding: 20px 8px 20px 0; border-bottom: 1px solid var(--linie-dunkel); cursor: pointer; transition: background .3s, padding .3s var(--weich); }
.landingpages-zehn__punkte input { position: absolute; opacity: 0; pointer-events: none; }
.landingpages-zehn__haken { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .35); transition: background .3s, box-shadow .3s, color .3s, transform .4s var(--weich); }
.landingpages-zehn__haken svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.landingpages-zehn__punkte b { font-size: 17.5px; font-weight: 600; line-height: 1.35; color: var(--hell); }
.landingpages-zehn__punkte small { font-size: 15px; line-height: 1.5; color: var(--hell-leise); }
.landingpages-zehn__punkte label:hover .landingpages-zehn__haken { box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.landingpages-zehn__punkte label:has(input:focus-visible) { outline: 2px solid var(--bernstein); outline-offset: 3px; }
.landingpages-zehn__punkte label:has(input:checked) { padding-left: 14px; background: linear-gradient(90deg, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 85%); }
.landingpages-zehn__punkte label:has(input:checked) .landingpages-zehn__haken { color: #1a130c; background: var(--bernstein); box-shadow: none; transform: rotate(-8deg); }
@media (max-width: 960px) {
  /* Mobil: erst abhaken, dann Ergebnis sehen */
  .landingpages-zehn { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .landingpages-zehn__text { display: contents; }
  .landingpages-zehn__text h2 { order: 1; }
  .landingpages-zehn__lead { order: 2; }
  .landingpages-zehn__punkte { order: 3; margin-top: 28px; }
  .landingpages-uhr { order: 4; }
  .landingpages-zehn__stufen { order: 5; }
  .landingpages-zehn__weiter { order: 6; }
}
@media (max-width: 560px) {
  .landingpages-uhr { width: 140px; height: 140px; }
  .landingpages-uhr__stand b { font-size: 52px; }
  .landingpages-zehn__stufe { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
  .landingpages-zehn__punkte label { grid-template-columns: 42px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; }
  .landingpages-zehn__haken { width: 36px; height: 36px; }
  .landingpages-zehn__punkte b { font-size: 16.5px; }
  .landingpages-zehn__weiter .knopf { width: 100%; }
}

/* ---------- Wegweiser: Google oder Social, Kopf des Besuchers ---------- */
.landingpages-weg__frage { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 19px; font-weight: 700; color: var(--tinte); }
.landingpages-weg__frage span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font: italic 400 17px/1 var(--serif); color: var(--bernstein-licht); background: var(--espresso); }
.landingpages-weg__frage--klein { margin: 26px 0 12px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 17px; }
.landingpages-weg__frage--klein span { width: 32px; height: 32px; font-size: 15px; }
.landingpages-weg__feld { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; margin-top: 26px; padding-top: 28px; border-top: 1px solid var(--tinte); animation: auftritt .45s var(--weich) both; }
.landingpages-kopf { position: relative; display: grid; justify-items: start; gap: 16px; padding: 28px 24px 24px; border-radius: 26px; color: var(--hell); background: radial-gradient(70% 70% at 0% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #261f19 0%, #16120f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 50px 100px -60px rgba(40, 25, 10, .8); }
.landingpages-kopf__anlass { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--tinte); background: #f3ebdf; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.landingpages-kopf__anlass .symbol { width: 17px; height: 17px; color: var(--bernstein-text); }
.landingpages-kopf__denkt { position: relative; margin-left: 30px; padding: 10px 16px; border-radius: 18px; font: italic 400 21px/1.2 var(--serif); color: var(--hell); background: rgba(255, 244, 228, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.landingpages-kopf__denkt::before, .landingpages-kopf__denkt::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 244, 228, .12); }
.landingpages-kopf__denkt::before { left: -16px; top: -6px; width: 10px; height: 10px; }
.landingpages-kopf__denkt::after { left: -26px; top: -16px; width: 6px; height: 6px; }
.landingpages-kopf__seite { display: grid; gap: 7px; justify-self: stretch; padding: 16px; border-radius: 14px; background: #f6efe6; }
.landingpages-kopf__seite i { display: block; height: 7px; border-radius: 4px; background: #dbcfbf; }
.landingpages-kopf__seite .landingpages-kopf__z1 { height: 13px; width: 86%; background: var(--tinte); }
.landingpages-kopf__seite .landingpages-kopf__z2 { width: 70%; }
.landingpages-kopf__seite .landingpages-kopf__k { width: 42%; height: 22px; margin-top: 4px; border-radius: 999px; background: var(--bernstein); }
.landingpages-kopf__seite .landingpages-kopf__bild { height: 54px; border-radius: 9px; background: radial-gradient(circle at 74% 30%, #f7bb63 0 9%, rgba(247, 187, 99, 0) 10%), linear-gradient(155deg, #6b5136, #2a2119 80%); }
.landingpages-kopf small { font-size: 13px; color: var(--hell-leise); }
.landingpages-kopf__plus { padding-left: 18px; font: italic 400 22px/1 var(--serif); color: var(--bernstein-licht); }
.landingpages-weg__feld:not([hidden]) .landingpages-kopf > * { animation: eingang .6s var(--weich) both; }
.landingpages-weg__feld:not([hidden]) .landingpages-kopf > :nth-child(2) { animation-delay: .25s; }
.landingpages-weg__feld:not([hidden]) .landingpages-kopf > :nth-child(3) { animation-delay: .5s; }
.landingpages-weg__feld:not([hidden]) .landingpages-kopf > :nth-child(4) { animation-delay: .7s; }
.landingpages-weg__text > p:not([class]) { max-width: 36em; margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--leise); }
.landingpages-weg__satz b { display: block; font: 600 clamp(24px, 2.2vw, 31px)/1.15 var(--grotesk); letter-spacing: -.02em; color: var(--tinte); }
.landingpages-weg__satz em { font: italic 400 1.12em/1 var(--serif); color: var(--bernstein-text); }
.landingpages-weg__ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; padding: 20px 22px; border-radius: 18px; background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); animation: auftritt .45s var(--weich) both; }
.landingpages-weg__ergebnis p { flex: 1 1 100%; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.landingpages-weg__ergebnis p b { display: block; margin-bottom: 2px; font: italic 400 23px/1.2 var(--serif); color: var(--tinte); }
.landingpages-weg__ergebnis--offen { margin-top: 20px; }
@media (max-width: 960px) { .landingpages-weg__feld { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .landingpages-weg__frage { font-size: 17px; }
  .landingpages-weg__ergebnis { padding: 18px; }
  .landingpages-weg__ergebnis .knopf { width: 100%; }
  .landingpages-kopf { padding: 22px 18px 20px; border-radius: 22px; }
}

/* ---------- Waage: Sofortformular oder eigene Seite ---------- */
.landingpages-waage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 5vw, 72px); padding: clamp(28px, 3.4vw, 46px); border-radius: 30px; color: var(--hell); background: radial-gradient(60% 120% at 100% 100%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), var(--espresso); box-shadow: 0 50px 100px -60px rgba(40, 25, 10, .8); }
.landingpages-waage__kopf h3 { font: italic 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); color: var(--hell); }
.landingpages-waage__kopf h3 em { color: var(--bernstein-licht); }
.landingpages-waage__kopf p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.landingpages-waage__skala { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 34px; }
.landingpages-waage__skala::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(246, 239, 230, .35), var(--bernstein)); }
.landingpages-waage__skala li { position: relative; }
.landingpages-waage__skala li::before { content: ""; position: absolute; left: 0; top: -31px; width: 16px; height: 16px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 3px var(--hell-leise); }
.landingpages-waage__skala li:last-child::before { box-shadow: inset 0 0 0 3px var(--bernstein); background: var(--bernstein); }
.landingpages-waage__skala li.landingpages-waage__mitte::before { left: 50%; width: 18px; height: 18px; border-radius: 3px; background: var(--bernstein-licht); box-shadow: none; transform: translateX(-50%) rotate(45deg); }
.landingpages-waage__mitte { text-align: center; }
.landingpages-waage__skala li:last-child { text-align: right; }
.landingpages-waage__skala li:last-child::before { left: auto; right: 0; }
.landingpages-waage__skala b { display: block; font-size: 17px; color: var(--hell); }
.landingpages-waage__skala span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--hell-leise); }
.landingpages-waage__achse { grid-column: 2; display: flex; justify-content: space-between; margin-top: -8px; font-size: 12.5px; letter-spacing: .02em; color: #a99b89; }
@media (max-width: 960px) {
  .landingpages-waage { grid-template-columns: minmax(0, 1fr); }
  .landingpages-waage__achse { grid-column: 1; }
}
@media (max-width: 640px) {
  .landingpages-waage { padding: 24px 20px; border-radius: 22px; }
  .landingpages-waage__skala { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0 0 0 34px; }
  .landingpages-waage__skala::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; background: linear-gradient(180deg, rgba(246, 239, 230, .35), var(--bernstein)); }
  .landingpages-waage__skala li, .landingpages-waage__mitte, .landingpages-waage__skala li:last-child { text-align: left; }
  .landingpages-waage__skala li::before, .landingpages-waage__skala li:last-child::before, .landingpages-waage__skala li.landingpages-waage__mitte::before { left: -32px; right: auto; top: 3px; transform: none; }
  .landingpages-waage__skala li.landingpages-waage__mitte::before { left: -33px; transform: rotate(45deg); }
  .landingpages-waage__achse { display: none; }
}

/* ---------- Conversion-Optimierung und Messplan zum Abhaken ---------- */
.landingpages-optimierung__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(36px, 6vw, 96px); align-items: center; }
.landingpages-optimierung__text h2 { max-width: 12em; }
.landingpages-optimierung__text > p { max-width: 34em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.landingpages-optimierung__text strong { color: var(--tinte); }
.landingpages-zitat { margin-top: 26px; padding: 4px 0 4px clamp(20px, 2.6vw, 32px); border-left: 2px solid var(--bernstein); }
.landingpages-zitat p { font: italic 400 clamp(23px, 2vw, 28px)/1.3 var(--serif); color: var(--tinte); }
.landingpages-zitat footer { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.landingpages-zitat cite { display: block; margin-top: 6px; font-size: 13.5px; font-style: normal; color: var(--leise); }
.landingpages-ehrlich { padding: 18px 20px; border-radius: 18px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.landingpages-ehrlich b { color: var(--tinte); }
.landingpages-mess { padding: clamp(26px, 3vw, 40px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.landingpages-mess__kopf h3 { font: italic 400 clamp(26px, 2.3vw, 33px)/1.1 var(--serif); color: var(--hell); }
.landingpages-mess__kopf h3 em { color: var(--bernstein-licht); }
.landingpages-mess__kopf p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--hell-leise); }
.landingpages-mess__punkte { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; border-top: 1px solid rgba(244, 165, 58, .5); }
.landingpages-mess__punkte label { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 15px; line-height: 1.45; color: #e1d5c5; cursor: pointer; transition: background .25s; }
.landingpages-mess__punkte input { position: absolute; opacity: 0; pointer-events: none; }
.landingpages-mess__punkte label::after { content: "offen"; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hell-leise); box-shadow: inset 0 0 0 1px var(--linie-dunkel); white-space: nowrap; }
.landingpages-mess__nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: italic 400 15px/1 var(--serif); color: var(--bernstein-licht); box-shadow: inset 0 0 0 1.3px rgba(244, 165, 58, .5); transition: background .25s, color .25s; }
.landingpages-mess__punkte label:hover .landingpages-mess__nr { box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.landingpages-mess__punkte label:has(input:focus-visible) { outline: 2px solid var(--bernstein); outline-offset: 2px; }
.landingpages-mess__punkte label:has(input:checked) { color: var(--hell); background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 85%); }
.landingpages-mess__punkte label:has(input:checked) .landingpages-mess__nr { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.landingpages-mess__punkte label:has(input:checked)::after { content: "gemessen"; color: #1a130c; background: var(--bernstein-licht); box-shadow: none; }
.landingpages-mess__stand { margin-top: 20px; }
.landingpages-mess__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--hell-leise); }
.landingpages-mess__zahl b { font: italic 400 52px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.landingpages-mess__balken { height: 6px; margin: 12px 0 14px; overflow: hidden; border-radius: 6px; background: rgba(246, 239, 230, .12); }
.landingpages-mess__balken i { display: block; width: calc(var(--anteil, 0) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transition: width .6s var(--weich); }
.landingpages-mess__stand > p:not(.landingpages-mess__zahl) { font-size: 15px; line-height: 1.55; color: #e1d5c5; }
.landingpages-mess__stand b { color: var(--hell); }
@media (max-width: 960px) { .landingpages-optimierung__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .landingpages-mess { padding: 24px 18px; border-radius: 22px; }
  .landingpages-mess__punkte label { grid-template-columns: 34px minmax(0, 1fr); }
  .landingpages-mess__punkte label::after { grid-column: 2; justify-self: start; }
}

/* ---------- Leitsatz über dem Vergleich ---------- */
.landingpages-leitsatz { max-width: 32em; margin-top: 14px; font: italic 400 clamp(21px, 1.9vw, 26px)/1.3 var(--serif); color: var(--leise); }

/* ---------- Preislogik (ohne Preise) ---------- */
.landingpages-preis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.landingpages-preis__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.landingpages-preis__text > p { max-width: 32em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.landingpages-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: landingpages-pw; }
.landingpages-preis__weg li { counter-increment: landingpages-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.landingpages-preis__weg li::before { content: counter(landingpages-pw, upper-roman); grid-row: span 2; font: italic 400 27px/1.1 var(--serif); color: var(--bernstein-text); }
.landingpages-preis__weg b { font-size: 18px; }
.landingpages-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.landingpages-preis__faktoren { position: relative; overflow: hidden; padding: clamp(28px, 3.2vw, 46px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.landingpages-preis__titel { padding-bottom: 18px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(28px, 2.4vw, 36px)/1.1 var(--serif); }
.landingpages-preis__titel em { color: var(--bernstein-licht); }
.landingpages-preis__faktoren li { position: relative; display: grid; gap: 4px; padding: 18px 0 18px 24px; border-bottom: 1px solid var(--linie-dunkel); }
.landingpages-preis__faktoren li:last-child { border-bottom: 0; padding-bottom: 0; }
.landingpages-preis__faktoren li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
.landingpages-preis__faktoren b { font-size: 18px; color: var(--hell); }
.landingpages-preis__faktoren span { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) { .landingpages-preis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .landingpages-preis__faktoren { border-radius: 22px; padding: 24px 20px; } }

/* ==========================================================================
   Zusatz Local SEO (local-seo/index.html, Quelle _werkzeug/seiten/22-local-seo.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix local-seo-. Nur Tokens aus :root (plus Ampelfarben aus grund.css).
   Enthält: Live-Szenen „Kartenergebnis mit Anruf“ und „Profil wird vollständig“, Drei-Faktoren-Reiter, Karte oder Anzeige,
   Checkliste Unternehmensprofil mit Arbeitsplan (Alleinstellung), Bewertungs-Regeln zum Einschätzen, KI-Quellenstapel,
   Wegweiser „Was brauchen Sie zuerst?“, Preislogik.
   Skripte: keine eigenen, nur data-reiter und data-zaehlen aus ares.js, sonst CSS-Zähler und :has(input:checked).
   Hinweis: Die alte Datei teile/zusatz/local-seo.css (Klassen local-seo-check, local-seo-gruppe) bleibt bestehen, wird hier nicht genutzt.
   ========================================================================== */

/* ---------- Einstieg: Szene „Kartenergebnis“ ---------- */
.local-seo-sz-suche { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--tinte); background: #f3ebdf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.local-seo-sz-suche .symbol { width: 13px; height: 13px; flex: none; color: var(--bernstein-text); }
.local-seo-sz-streifen { position: relative; flex: none; height: 74px; margin-bottom: 10px; overflow: hidden; border-radius: 14px; background:
  linear-gradient(90deg, rgba(246, 239, 230, 0) 0 30%, rgba(246, 239, 230, .1) 30% calc(30% + 7px), rgba(246, 239, 230, 0) calc(30% + 7px)),
  linear-gradient(0deg, rgba(246, 239, 230, 0) 0 44%, rgba(246, 239, 230, .1) 44% calc(44% + 6px), rgba(246, 239, 230, 0) calc(44% + 6px)),
  linear-gradient(160deg, rgba(246, 239, 230, 0) 0 70%, rgba(246, 239, 230, .07) 70% calc(70% + 5px), rgba(246, 239, 230, 0) calc(70% + 5px)),
  linear-gradient(170deg, rgba(255, 244, 228, .07), rgba(255, 244, 228, .02)); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.local-seo-sz-pin { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 24px; height: 24px; margin: -24px 0 0 -12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); font: normal 700 11px/1 var(--grotesk); color: var(--hell); background: #6e6052; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .6); }
.local-seo-sz-pin::first-letter { display: inline-block; }
.local-seo-sz-pin--sie { width: 30px; height: 30px; margin: -30px 0 0 -15px; color: #1a130c; background: var(--bernstein); box-shadow: 0 0 0 6px rgba(244, 165, 58, .18), 0 8px 18px -4px rgba(244, 165, 58, .7); }
.local-seo-sz-liste { position: relative; display: grid; gap: 7px; }
.local-seo-sz-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border-radius: 14px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.local-seo-sz-name { min-width: 0; }
.local-seo-sz-name b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.local-seo-sz-name small { display: block; font-size: 12px; color: #b5a796; white-space: nowrap; }
.local-seo-sz-sterne { letter-spacing: 1px; color: var(--bernstein-licht); }
.local-seo-sz-knopf { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--hell-leise); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); white-space: nowrap; }
li.local-seo-sz-sie { background: linear-gradient(90deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.local-seo-sz-anruf { color: #1a130c; background: var(--bernstein); box-shadow: none; }
.local-seo-sz-meldung { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.3; color: #cdbfae; background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); opacity: 0; }
.local-seo-sz-meldung b { display: block; font-size: 13.5px; color: var(--bernstein-licht); }
.local-seo-sz-meldung .symbol { width: 18px; height: 18px; color: var(--bernstein-licht); }
/* Takte: andere stehen zuerst oben, Ihr Unternehmen rückt nach vorn, dann Anruf */
.local-seo-sz-paket .local-seo-sz-andere { transform: translateY(calc(-100% - 8px)); }
.local-seo-sz-paket .local-seo-sz-sie { opacity: 0; transform: translateY(calc(300% + 24px)); }
.ist-aktiv .local-seo-sz-andere { animation: local-seo-runter .9s var(--weich) 2s both; }
.ist-aktiv .local-seo-sz-sie { animation: local-seo-hoch 1.1s var(--weich) 1.9s both; }
.ist-aktiv .local-seo-sz-pin--sie { animation: local-seo-pin .7s cubic-bezier(.3, 1.6, .5, 1) 2.4s both; }
.ist-aktiv .local-seo-sz-anruf { animation: local-seo-puls 1s ease 3.6s 2; }
.ist-aktiv .local-seo-sz-meldung { animation: local-seo-melden .7s var(--weich) 4s both; }
@keyframes local-seo-melden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes local-seo-runter { from { transform: translateY(calc(-100% - 8px)); } to { transform: none; } }
@keyframes local-seo-hoch { 0% { opacity: .35; transform: translateY(calc(300% + 24px)); } 100% { opacity: 1; transform: none; } }
@keyframes local-seo-pin { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }
@keyframes local-seo-puls { 50% { box-shadow: 0 0 0 7px rgba(244, 165, 58, .3); transform: scale(.95); } }
.local-seo-sz-pin--sie { transform: rotate(-45deg); }
.local-seo-sz-pin { font-size: 0; }
.local-seo-sz-pin::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(28, 23, 19, .7); }
.local-seo-sz-pin--sie::after { width: 9px; height: 9px; background: #1a130c; }

/* ---------- Einstieg: Szene „Profil wird vollständig“ ---------- */
.local-seo-sz-profil__raster { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; flex: 1; }
.local-seo-sz-ring { position: relative; display: grid; place-items: center; }
.local-seo-sz-ring svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.local-seo-sz-ring__grund { fill: none; stroke: rgba(246, 239, 230, .1); stroke-width: 9; }
.local-seo-sz-ring__wert { fill: none; stroke: var(--bernstein-licht); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(244, 165, 58, .5)); }
.local-seo-sz-ring span { position: absolute; display: grid; text-align: center; }
.local-seo-sz-ring b { font: italic 400 18px/1 var(--serif); color: var(--bernstein-licht); }
.local-seo-sz-ring small { font-size: 12px; color: #b5a796; }
.local-seo-sz-felder { display: grid; gap: 8px; }
.local-seo-sz-felder li { position: relative; display: grid; padding: 7px 12px 7px 38px; border-radius: 12px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.local-seo-sz-felder li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; background: var(--bernstein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231a130c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.local-seo-sz-felder b { font-size: 13.5px; font-weight: 600; color: var(--hell); }
.local-seo-sz-felder small { font-size: 12px; color: #b5a796; }
.ist-aktiv .local-seo-sz-ring__wert { animation: local-seo-ring 3.2s var(--weich) .5s both; }
.ist-aktiv .local-seo-sz-felder li::before { animation: local-seo-haken .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1s + var(--i) * .5s); }
@keyframes local-seo-ring { from { stroke-dashoffset: 72; } }
@keyframes local-seo-haken { from { transform: scale(0); opacity: 0; } }
@media (min-width: 1100px) and (max-height: 800px) {
  .local-seo-sz-streifen { display: none; }
  .local-seo-sz-profil .sz-fuss { display: none; }
  .local-seo-sz-liste { gap: 6px; }
  .local-seo-sz-liste li { padding-block: 7px; }
  .local-seo-sz-felder { gap: 6px; }
  .local-seo-sz-felder li { padding-block: 5px; }
}
@media (max-width: 760px) {
  .local-seo-sz-suche { padding: 3px 9px; font-size: 11.5px; }
  .local-seo-sz-streifen, .local-seo-sz-meldung, .local-seo-sz-liste li:nth-child(3), .local-seo-sz-knopf:not(.local-seo-sz-anruf), .local-seo-sz-name small { display: none; }
  .local-seo-sz-liste { gap: 6px; }
  .local-seo-sz-liste li { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px 6px 12px; border-radius: 10px; }
  .local-seo-sz-name b { font-size: 13px; }
  .local-seo-sz-knopf { padding: 3px 9px; font-size: 11.5px; }
  .local-seo-sz-paket .local-seo-sz-andere:not(:nth-child(3)) { visibility: visible; }
  .local-seo-sz-profil__raster { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .local-seo-sz-ring svg { width: 74px; height: 74px; }
  .local-seo-sz-ring b { font-size: 11.5px; }
  .local-seo-sz-ring small { display: none; }
  .local-seo-sz-felder { gap: 4px; }
  .local-seo-sz-felder li { padding: 3px 8px 3px 28px; border-radius: 8px; }
  .local-seo-sz-felder li::before { left: 8px; width: 13px; height: 13px; margin-top: -6.5px; background-size: 9px; }
  .local-seo-sz-felder li:nth-child(n+4), .local-seo-sz-felder small { display: none; }
  .local-seo-sz-felder b { font-size: 12px; }
}

/* ---------- Einstieg: Akzent nachgestellt ---------- */
.local-seo-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.22em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) { .local-seo-einstieg .einstieg__lead { font-size: 18px; } }
@media (max-width: 760px) { .local-seo-einstieg .einstieg__lead { font-size: 15.5px; line-height: 1.45; } }

/* ---------- Drei Faktoren: Reiter links, Karte mit Einfluss-Regler rechts ---------- */
.local-seo-faktoren__werk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(28px, 4vw, 64px); align-items: stretch; }
.local-seo-faktoren__wahl { display: grid; gap: 0; align-content: center; }
.local-seo-faktor:first-child { border-top: 1px solid var(--tinte); }
.local-seo-faktor { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "nr name" "nr wert"; align-items: center; column-gap: 16px; width: 100%; padding: 20px 12px 20px 0; border: 0; border-bottom: 1px solid var(--linie); background: none; color: var(--leise); font-family: var(--grotesk); text-align: left; cursor: pointer; transition: padding .35s var(--weich), background .3s, color .25s; }
.local-seo-faktor__nr { grid-area: nr; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s, transform .4s var(--weich); }
.local-seo-faktor b { grid-area: name; font: italic 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); color: inherit; }
.local-seo-faktor small { grid-area: wert; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.local-seo-faktor__ja { color: var(--bernstein-text); }
.local-seo-faktor__nein { color: var(--leise); }
.local-seo-faktor:hover { color: var(--tinte); }
.local-seo-faktor[aria-selected="true"] { padding-left: 16px; color: var(--tinte); background: linear-gradient(90deg, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 85%); }
.local-seo-faktor[aria-selected="true"] .local-seo-faktor__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 4px rgba(244, 165, 58, .22); transform: rotate(-6deg); }
.local-seo-faktoren__felder { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3.4vw, 48px); border-radius: 30px; color: var(--hell); background: radial-gradient(70% 90% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #261f19 0%, #16120f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 110px -60px rgba(40, 25, 10, .8); }
.local-seo-faktoren__feld { display: grid; gap: 16px; animation: auftritt .45s var(--weich) both; }
.local-seo-faktoren__feld[hidden] { display: none; }
.local-seo-faktoren__feld h3 { font: italic 400 clamp(32px, 3vw, 44px)/1.05 var(--serif); color: var(--hell); }
.local-seo-faktoren__feld p { max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
.local-seo-regler { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--bernstein-licht); }
.local-seo-regler i { position: relative; height: 10px; border-radius: 10px; background: rgba(246, 239, 230, .1); }
.local-seo-regler i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); animation: local-seo-regel 1s var(--weich) .2s both; }
.local-seo-regler i::after { content: ""; position: absolute; top: 50%; left: calc(var(--w) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--hell); box-shadow: 0 0 0 4px rgba(244, 165, 58, .35); animation: local-seo-knauf 1s var(--weich) .2s both; }
.local-seo-regler--aus { color: var(--hell-leise); }
.local-seo-regler--aus i::before { background: rgba(205, 191, 174, .5); }
.local-seo-regler--aus i::after { box-shadow: 0 0 0 4px rgba(205, 191, 174, .25); }
@keyframes local-seo-regel { from { width: 0; } }
@keyframes local-seo-knauf { from { left: 0; } }
.local-seo-hebel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.local-seo-hebel li { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--hell); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .35); }
.local-seo-regler--aus ~ .local-seo-hebel li { background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); }
.local-seo-faktoren__quelle { margin-top: auto; padding-top: 22px; font-size: 12.5px; color: #a99b89; }
.local-seo-faktoren__unten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 4.4vw, 64px); padding-top: 32px; border-top: 1px solid var(--linie); }
.local-seo-faktoren__notiz { font-size: 16.5px; line-height: 1.65; color: var(--leise); }
.local-seo-platz { display: grid; gap: 14px; padding: 24px; border-radius: 24px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 40px 80px -60px rgba(60, 40, 20, .5); }
.local-seo-platz__frage { font: italic 400 26px/1.1 var(--serif); }
.local-seo-platz__schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.local-seo-platz__schalter button { min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; font: 600 14.5px/1.2 var(--grotesk); color: var(--leise); background: none; cursor: pointer; transition: background .3s, color .3s; }
.local-seo-platz__schalter button[aria-selected="true"] { color: var(--hell); background: var(--espresso); }
.local-seo-platz__feld { display: grid; gap: 12px; justify-items: start; animation: auftritt .4s var(--weich) both; }
.local-seo-platz__feld[hidden] { display: none; }
.local-seo-platz__feld p { font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.local-seo-platz__feld b { color: var(--tinte); }
.local-seo-platz .knopf--hell { color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); }
@media (max-width: 960px) {
  .local-seo-faktoren__werk, .local-seo-faktoren__unten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .local-seo-faktor { padding-block: 14px; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; }
  .local-seo-faktor__nr { width: 38px; height: 38px; font-size: 17px; }
  .local-seo-faktoren__felder { padding: 24px 20px; border-radius: 22px; }
}

/* ---------- Checkliste Unternehmensprofil mit Arbeitsplan ---------- */
.local-seo-liste__werk { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 44px); align-items: start; }
.local-seo-liste__gruppen { columns: 2; column-gap: 14px; }
.local-seo-liste__gruppe { position: relative; min-width: 0; margin: 0; padding: 22px 22px 18px; border: 0; border-radius: 24px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); counter-reset: local-seo-g; break-inside: avoid; margin-bottom: 14px; width: 100%; }
.local-seo-liste__gruppe legend { float: left; width: 100%; padding: 0 0 10px; font: italic 400 25px/1.1 var(--serif); color: var(--tinte); }
.local-seo-liste__gruppe label { clear: both; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linie); cursor: pointer; }
.local-seo-liste__gruppe legend + label { border-top-color: var(--tinte); }
.local-seo-liste__gruppe input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; background: var(--papier) center / 15px no-repeat; box-shadow: inset 0 0 0 2px #cdbfae; cursor: pointer; transition: background-color .25s, box-shadow .25s; }
.local-seo-liste__gruppe input:checked { counter-increment: local-seo-g; background-color: var(--espresso); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23f7bb63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.local-seo-liste__gruppe input:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.local-seo-liste__gruppe span { font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.local-seo-liste__gruppe b { display: block; font-size: 16px; line-height: 1.35; color: var(--tinte); }
.local-seo-liste__gruppe label:has(input:checked) b { color: var(--leise); text-decoration: line-through; text-decoration-color: var(--bernstein-tief); text-decoration-thickness: 2px; }
/* Fortschritt je Gruppe: CSS-Zähler plus Segmente */
.local-seo-liste__gfuss { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.local-seo-liste__gzahl::after { content: counter(local-seo-g) " von " attr(data-von); font-size: 13px; font-weight: 600; color: var(--bernstein-text); white-space: nowrap; }
.local-seo-liste__seg { display: flex; gap: 4px; }
.local-seo-liste__seg i { flex: 1; height: 6px; border-radius: 6px; background: var(--linie); transition: background .35s; }
.local-seo-liste__gruppe:has(label:nth-of-type(1) input:checked) .local-seo-liste__seg i:nth-child(1),
.local-seo-liste__gruppe:has(label:nth-of-type(2) input:checked) .local-seo-liste__seg i:nth-child(2),
.local-seo-liste__gruppe:has(label:nth-of-type(3) input:checked) .local-seo-liste__seg i:nth-child(3),
.local-seo-liste__gruppe:has(label:nth-of-type(4) input:checked) .local-seo-liste__seg i:nth-child(4),
.local-seo-liste__gruppe:has(label:nth-of-type(5) input:checked) .local-seo-liste__seg i:nth-child(5),
.local-seo-liste__gruppe:has(label:nth-of-type(6) input:checked) .local-seo-liste__seg i:nth-child(6) { background: var(--bernstein-tief); }
.local-seo-liste__gruppe:not(:has(input:not(:checked))) { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
/* Stand und Arbeitsplan */
.local-seo-liste__stand { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 14px; padding: 26px; border-radius: 26px; color: var(--hell); background: radial-gradient(80% 50% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 50px 100px -60px rgba(40, 25, 10, .8); }
.local-seo-liste__stand [hidden] { display: none; }
.local-seo-liste__zahl { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; color: var(--hell-leise); }
.local-seo-liste__zahl b { font: italic 400 64px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.local-seo-liste__gesamt { display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)) 0 0 / calc(var(--anteil, 0) * 100%) 100% no-repeat, rgba(246, 239, 230, .12); transition: background-size .6s var(--weich); }
.local-seo-liste__plan-titel { margin-top: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-licht); }
.local-seo-liste__plan { display: grid; gap: 0; counter-reset: local-seo-plan; }
.local-seo-liste__plan li { counter-increment: local-seo-plan; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 3px 0; font-size: 14.5px; line-height: 1.35; color: #e1d5c5; }
.local-seo-liste__plan li::before { content: counter(local-seo-plan) "."; font-size: 13px; color: #a99b89; }
.local-seo-liste__werk:has(#ls-c1:checked) [data-p="1"], .local-seo-liste__werk:has(#ls-c2:checked) [data-p="2"], .local-seo-liste__werk:has(#ls-c3:checked) [data-p="3"],
.local-seo-liste__werk:has(#ls-c4:checked) [data-p="4"], .local-seo-liste__werk:has(#ls-c5:checked) [data-p="5"], .local-seo-liste__werk:has(#ls-c6:checked) [data-p="6"],
.local-seo-liste__werk:has(#ls-c7:checked) [data-p="7"], .local-seo-liste__werk:has(#ls-c8:checked) [data-p="8"], .local-seo-liste__werk:has(#ls-c9:checked) [data-p="9"],
.local-seo-liste__werk:has(#ls-c10:checked) [data-p="10"], .local-seo-liste__werk:has(#ls-c11:checked) [data-p="11"], .local-seo-liste__werk:has(#ls-c12:checked) [data-p="12"],
.local-seo-liste__werk:has(#ls-c13:checked) [data-p="13"], .local-seo-liste__werk:has(#ls-c14:checked) [data-p="14"], .local-seo-liste__werk:has(#ls-c15:checked) [data-p="15"] { display: none; }
.local-seo-liste__werk[data-summe="15"] .local-seo-liste__plan, .local-seo-liste__werk[data-summe="15"] .local-seo-liste__plan-titel { display: none; }
.local-seo-liste__stand p:not(.local-seo-liste__zahl):not(.local-seo-liste__plan-titel) { font-size: 15px; line-height: 1.5; color: #e1d5c5; }
.local-seo-liste__stand p b { color: var(--hell); }
.local-seo-liste__stand .knopf { justify-self: start; }
.local-seo-liste__notiz { max-width: 60em; margin-top: 24px; font-size: 14.5px; line-height: 1.55; color: var(--leise); }
@media (max-width: 1100px) {
  .local-seo-liste__werk { grid-template-columns: minmax(0, 1fr); }
  .local-seo-liste__stand { position: static; }
  .local-seo-liste__plan { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; max-height: none; }
}
@media (max-width: 700px) {
  .local-seo-liste__gruppen { columns: 1; }
  .local-seo-liste__gruppe { padding: 18px 16px 14px; border-radius: 20px; }
  .local-seo-liste__plan { grid-template-columns: minmax(0, 1fr); }
  .local-seo-liste__stand { padding: 22px 18px; }
  .local-seo-liste__stand .knopf { width: 100%; }
}

/* ---------- Bewertungs-Regeln: erlaubt oder nicht ---------- */
.local-seo-regeln { margin-top: clamp(64px, 7vw, 112px); }
.local-seo-regeln h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.local-seo-regeln__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: local-seo-r; }
.local-seo-regel { counter-increment: local-seo-r; position: relative; display: grid; align-content: start; gap: 14px; padding: 22px 22px 20px 64px; border-radius: 22px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); transition: box-shadow .3s; }
.local-seo-regel::before { content: counter(local-seo-r, upper-roman); position: absolute; left: 22px; top: 20px; font: italic 400 26px/1 var(--serif); color: var(--bernstein-licht); }
.local-seo-regel__satz { font-size: 17.5px; font-weight: 600; line-height: 1.4; color: var(--hell); }
.local-seo-regel__wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.local-seo-regel__wahl label { position: relative; cursor: pointer; }
.local-seo-regel__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.local-seo-regel__wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--hell-leise); box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .25); transition: background .25s, color .25s, box-shadow .25s; }
.local-seo-regel__wahl label:hover span { color: var(--hell); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.local-seo-regel__wahl input:focus-visible + span { outline: 2px solid var(--bernstein); outline-offset: 2px; }
.local-seo-regel__wahl input:checked + span { color: #1a130c; background: var(--hell); box-shadow: none; }
.local-seo-regel__aufloesung { display: none; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; color: #e1d5c5; background: rgba(0, 0, 0, .25); animation: auftritt .4s var(--weich) both; }
.local-seo-regel__aufloesung b { color: var(--hell); }
.local-seo-regel:has(input:checked) .local-seo-regel__aufloesung { display: block; }
.local-seo-regel:has(input:checked) .local-seo-regel__aufloesung::before { content: "Nicht ganz. "; font-weight: 700; color: #f9ecc9; }
.local-seo-regel[data-richtig="ja"]:has([value="ja"]:checked) .local-seo-regel__aufloesung::before,
.local-seo-regel[data-richtig="nein"]:has([value="nein"]:checked) .local-seo-regel__aufloesung::before { content: "Richtig. "; color: var(--bernstein-licht); }
.local-seo-regel[data-richtig="ja"]:has([value="ja"]:checked), .local-seo-regel[data-richtig="nein"]:has([value="nein"]:checked) { box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .6); }
@media (max-width: 860px) { .local-seo-regeln__liste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .local-seo-regel { padding: 18px 16px 16px 52px; }
  .local-seo-regel::before { left: 16px; top: 18px; font-size: 22px; }
  .local-seo-regeln .werkzeug__fuss .knopf { width: 100%; }
}

/* ---------- Lokal in KI-Antworten: Frage über einem Quellenstapel ---------- */
.local-seo-ki__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.local-seo-ki__text h2 { max-width: 13em; }
.local-seo-ki__text p { max-width: 34em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--hell-leise); }
.local-seo-ki__text p strong { color: var(--hell); }
.local-seo-ki__text .knopf { margin-top: 28px; color: var(--hell); }
.local-seo-ki__stapel { position: relative; display: grid; gap: 12px; }
.local-seo-ki__frage { justify-self: end; max-width: 90%; padding: 14px 18px; border-radius: 18px 18px 4px 18px; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--tinte); background: #f3ebdf; box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .9); }
.local-seo-ki__titel { margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 26px/1.1 var(--serif); color: var(--bernstein-licht); }
.local-seo-ki__quellen { display: grid; gap: 8px; counter-reset: local-seo-q; }
.local-seo-ki__quellen li { counter-increment: local-seo-q; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; font-size: 16px; line-height: 1.4; color: var(--hell); background: rgba(255, 244, 228, calc(.08 - var(--i) * .01)); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); margin-left: calc(var(--i) * 14px); }
.local-seo-ki__quellen li::before { content: counter(local-seo-q, upper-roman); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: italic 400 19px/1 var(--serif); color: var(--bernstein-licht); background: rgba(244, 165, 58, .12); }
@media (max-width: 960px) { .local-seo-ki__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .local-seo-ki__quellen li { margin-left: 0; font-size: 15px; } .local-seo-ki__frage { max-width: 100%; } }

/* ---------- Wegweiser: drei Fragen nebeneinander, Ergebnis als Band darunter ---------- */
.local-seo-weg__werk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.local-seo-weg__frage { min-width: 0; margin: 0; padding: 22px; border: 0; border-radius: 24px; background: var(--papier); box-shadow: 0 1px 0 var(--linie); }
.local-seo-weg__frage legend { float: left; display: grid; gap: 10px; width: 100%; margin-bottom: 14px; padding: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.local-seo-weg__frage legend span { font: italic 400 34px/1 var(--serif); color: var(--bernstein-text); }
.local-seo-weg__frage label { clear: left; position: relative; display: block; margin-bottom: 8px; cursor: pointer; }
.local-seo-weg__frage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.local-seo-weg__frage label span { display: flex; align-items: center; min-height: 46px; padding: 8px 16px 8px 44px; border-radius: 14px; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--tinte); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; position: relative; }
.local-seo-weg__frage label span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a99b89; transition: box-shadow .25s; }
.local-seo-weg__frage label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.local-seo-weg__frage input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.local-seo-weg__frage input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: 0 12px 24px -16px rgba(28, 23, 19, .9); }
.local-seo-weg__frage input:checked + span::before { box-shadow: inset 0 0 0 5px var(--bernstein); }
.local-seo-weg__ergebnis { grid-column: 1 / -1; position: relative; min-height: 190px; padding: clamp(26px, 3vw, 40px); overflow: hidden; border-radius: 30px; color: var(--hell); background: radial-gradient(60% 120% at 100% 0%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.local-seo-weg__ergebnis [hidden] { display: none !important; }
.local-seo-weg__ergebnis { isolation: isolate; min-height: 260px; }
.local-seo-weg__bild { position: absolute; right: 0; top: 0; z-index: -1; width: 62%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: .75; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.local-seo-weg__ergebnis > div:not(.local-seo-weg__fertig) { display: grid; gap: 8px; max-width: 34em; }
.local-seo-weg__fertig { position: relative; }
.local-seo-weg__zusatz { background: rgba(23, 19, 15, .78); }
@media (max-width: 960px) { .local-seo-weg__bild { width: 100%; opacity: .35; -webkit-mask-image: none; mask-image: none; } }
.local-seo-weg__stand { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--hell-leise); }
.local-seo-weg__stand b { font: italic 400 56px/1 var(--serif); color: var(--bernstein-licht); }
.local-seo-weg__ergebnis p { font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.local-seo-weg__fertig { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-auto-rows: min-content; gap: 14px 40px; align-items: start; }
.local-seo-weg__erg { display: none; grid-column: 1; grid-row: 1 / span 3; animation: auftritt .5s var(--weich) both; }
.local-seo-weg__ergebnis .local-seo-weg__satz { font: italic 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); color: var(--hell) !important; }
.local-seo-weg__satz em { color: var(--bernstein-licht); }
.local-seo-weg__erg p:not(.local-seo-weg__satz) { margin-top: 12px; }
.local-seo-weg__erg > .knopf, .local-seo-weg__knoepfe { margin-top: 20px; }
.local-seo-weg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.local-seo-weg__erg .knopf--hell { color: var(--hell); }
.local-seo-weg__zusatz { display: none; grid-column: 2; padding: 14px 16px; border-radius: 16px; background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); }
.local-seo-weg__zusatz b { color: var(--bernstein-licht); }
.local-seo-weg__werk:has([value="karte"]:checked) .local-seo-weg__erg--karte,
.local-seo-weg__werk:has([value="falsch"]:checked) .local-seo-weg__erg--profil,
.local-seo-weg__werk:has([value="bewertungen"]:checked) .local-seo-weg__erg--profil,
.local-seo-weg__werk:has([value="ki"]:checked) .local-seo-weg__erg--ki { display: block; }
.local-seo-weg__werk:has([value="fahre"]:checked) .local-seo-weg__zusatz--fahre,
.local-seo-weg__werk:has([value="viele"]:checked) .local-seo-weg__zusatz--viele { display: block; }
@media (max-width: 960px) {
  .local-seo-weg__werk { grid-template-columns: minmax(0, 1fr); }
  .local-seo-weg__fertig { grid-template-columns: minmax(0, 1fr); }
  .local-seo-weg__zusatz { grid-column: 1; }
  .local-seo-weg__erg { grid-row: auto; }
}
@media (max-width: 560px) {
  .local-seo-weg__frage { padding: 18px 16px 10px; border-radius: 20px; }
  .local-seo-weg__ergebnis { border-radius: 22px; padding: 24px 20px; }
  .local-seo-weg__knoepfe .knopf, .local-seo-weg__erg > .knopf { width: 100%; }
}

/* ---------- Preislogik unter dem Vorgehen ---------- */
.local-seo-preis { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.local-seo-preis__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 14px 72px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.local-seo-preis__kopf h2 { font-size: clamp(32px, 3.6vw, 50px); }
.local-seo-preis__kopf p { max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--leise); }
.local-seo-preis .preislogik__faktoren { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); }
.local-seo-preis .preislogik__faktoren li { position: relative; padding-left: 22px; }
.local-seo-preis .preislogik__faktoren li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
@media (max-width: 960px) { .local-seo-preis__kopf, .local-seo-preis .preislogik { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Zusatz Microsoft Ads (microsoft-ads/index.html, Quelle _werkzeug/seiten/24-microsoft-ads.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix microsoft-ads-. Die alte Datei teile/zusatz/microsoft-ads.css
   (Klassen microsoft-ads-hilfe*) bleibt für den alten Rahmen bestehen; hier werden diese Namen nicht verwendet.
   Enthält: Live-Szenen „Import mit Verstand“ und „Anzeige in Copilot“, Anteil mit Gerätewahl, Gründe, Netz der Ausspielorte,
   Ampel-Entscheidungshilfe mit Zähler, Partner-Siegel, Wegweiser mit drei Fragen, Preis-Beleg.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen (data-punkte) aus ares.js, sonst :has() und CSS-Zähler.
   ========================================================================== */

/* ---------- Einstieg: Szene „Import mit Verstand“ ---------- */
.microsoft-ads-sz-import .sz-kopf { margin-bottom: 12px; }
.microsoft-ads-sz-wege { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600; color: #cdbfae; white-space: nowrap; }
.microsoft-ads-sz-wege > span { padding: 5px 11px; border-radius: 999px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.microsoft-ads-sz-wege > .microsoft-ads-sz-wege__ziel { color: var(--hell); background: rgba(244, 165, 58, .14); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .5); }
.microsoft-ads-sz-wege > i { position: relative; width: 26px; height: 2px; border-radius: 2px; background: rgba(246, 239, 230, .18); overflow: hidden; }
.microsoft-ads-sz-wege > i::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: inherit; background: var(--bernstein-licht); }
.ist-aktiv .microsoft-ads-sz-wege > i::after { animation: microsoft-ads-fluss 1.6s ease-in-out .4s infinite; }
@keyframes microsoft-ads-fluss { to { left: 100%; } }

.microsoft-ads-sz-kampagnen { display: grid; gap: 7px; }
.microsoft-ads-sz-kampagnen li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.microsoft-ads-sz-nr { font: italic 400 18px/1 var(--serif); color: #a99b89; text-align: center; }
.microsoft-ads-sz-kampagnen b { overflow: hidden; font-size: 14.5px; font-weight: 600; color: var(--hell); white-space: nowrap; text-overflow: ellipsis; }
.microsoft-ads-sz-kampagnen small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.microsoft-ads-sz-ja small { color: var(--bernstein-licht); }
.microsoft-ads-sz-ja small::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.microsoft-ads-sz-ja { background: linear-gradient(90deg, rgba(244, 165, 58, .17), rgba(244, 165, 58, .04)) !important; box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .42) !important; }
.microsoft-ads-sz-nein small { color: #a99b89; }
.microsoft-ads-sz-nein b { color: #a99b89; text-decoration: line-through; text-decoration-color: rgba(205, 191, 174, .6); }
.ist-aktiv .microsoft-ads-sz-kampagnen li { animation: eingang .65s var(--weich) both; animation-delay: calc(.3s + var(--i) * .4s); }
.ist-aktiv .microsoft-ads-sz-nein { animation: eingang .65s var(--weich) 1.1s both, microsoft-ads-grau .6s ease 2.2s both !important; }
@keyframes microsoft-ads-grau { from { opacity: 1; } to { opacity: .55; } }

.microsoft-ads-sz-balken { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin-top: 12px; font-size: 12.5px; color: #cdbfae; }
.microsoft-ads-sz-balken b { font-weight: 600; color: var(--bernstein-licht); }
.microsoft-ads-sz-balken i { grid-column: 1 / -1; position: relative; height: 6px; overflow: hidden; border-radius: 6px; background: rgba(246, 239, 230, .1); }
.microsoft-ads-sz-balken i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 67%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 14px rgba(244, 165, 58, .5); transform-origin: left; }
.ist-aktiv .microsoft-ads-sz-balken { animation: auftritt .6s var(--weich) 2.4s both; }
.ist-aktiv .microsoft-ads-sz-balken i::after { animation: microsoft-ads-fuellen 1.2s var(--weich) 2.7s both; }
@keyframes microsoft-ads-fuellen { from { transform: scaleX(0); } }

.microsoft-ads-sz-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: auto; }
.microsoft-ads-sz-felder li { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "stift name" "stift zusatz"; align-items: center; column-gap: 9px; padding: 7px 11px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--hell); background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.microsoft-ads-sz-felder svg { grid-area: stift; width: 15px; height: 15px; fill: none; stroke: var(--bernstein-licht); stroke-width: 1.5; stroke-linejoin: round; }
.microsoft-ads-sz-felder small { grid-area: zusatz; font-size: 11.5px; font-weight: 400; color: #b5a796; }
.ist-aktiv .microsoft-ads-sz-felder li { animation: auftritt .5s var(--weich) both, microsoft-ads-setzen 1s ease both; animation-delay: calc(3.5s + var(--i) * .35s), calc(3.7s + var(--i) * .35s); }
@keyframes microsoft-ads-setzen { 40% { box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .7), 0 0 20px -2px rgba(244, 165, 58, .45); } }

/* Szene „Anzeige in Copilot“ */
.microsoft-ads-sz-copilot .sz-frage { max-width: 92%; }
.microsoft-ads-sz-anzeige { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kenn name" "kenn text"; align-items: center; column-gap: 12px; margin-top: auto; padding: 12px 14px; border-radius: 16px; background: #f3ebdf; color: var(--tinte); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(244, 165, 58, .5); }
.microsoft-ads-sz-anzeige__kenn { grid-area: kenn; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--bernstein-text); box-shadow: inset 0 0 0 1px rgba(138, 79, 0, .45); }
.microsoft-ads-sz-anzeige b { grid-area: name; font-size: 15px; font-weight: 700; line-height: 1.2; }
.microsoft-ads-sz-anzeige span:last-child { grid-area: text; font-size: 13px; line-height: 1.35; color: var(--leise); }
.ist-aktiv .microsoft-ads-sz-anzeige { animation: auftritt .7s var(--weich) 3.6s both; }

@media (min-width: 1100px) and (max-height: 800px) {
  .microsoft-ads-sz-felder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .microsoft-ads-sz-felder li { grid-template-columns: 14px minmax(0, 1fr); grid-template-areas: "stift name"; padding: 8px 9px; font-size: 12.5px; }
  .microsoft-ads-sz-felder small { display: none; }
}
@media (max-width: 760px) {
  .microsoft-ads-sz-import .sz-kopf { margin-bottom: 8px; }
  .microsoft-ads-sz-import .sz-marke, .microsoft-ads-sz-balken, .microsoft-ads-sz-felder { display: none; }
  .microsoft-ads-sz-wege { gap: 6px; font-size: 12px; }
  .microsoft-ads-sz-wege > span { padding: 2px 9px; }
  .microsoft-ads-sz-wege > i { width: 16px; }
  .microsoft-ads-sz-kampagnen { gap: 4px; }
  .microsoft-ads-sz-kampagnen li { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; padding: 3px 10px 3px 6px; border-radius: 9px; }
  .microsoft-ads-sz-kampagnen b { font-size: 12.5px; }
  .microsoft-ads-sz-kampagnen small { font-size: 11.5px; }
  .microsoft-ads-sz-nr { font-size: 14px; }
  .microsoft-ads-sz-copilot .sz-antwort { display: none; }
  .microsoft-ads-sz-copilot .sz-frage { max-width: 100%; }
  .microsoft-ads-sz-anzeige { margin-top: 8px; padding: 6px 10px; border-radius: 11px; column-gap: 9px; }
  .microsoft-ads-sz-anzeige b { font-size: 13px; }
  .microsoft-ads-sz-anzeige span:last-child { font-size: 11.5px; }
  .microsoft-ads-sz-anzeige__kenn { padding: 2px 7px; font-size: 11px; }
}

/* ---------- Einstieg: lange Aussage, Vertrauensleiste im ersten Bild ---------- */
.microsoft-ads-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.18em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) {
  .microsoft-ads-einstieg .einstieg__aussage { font-size: clamp(38px, min(4.4vw, 7.4svh), 62px); }
  .microsoft-ads-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .microsoft-ads-einstieg .einstieg__klein { font-size: 15px; }
  .microsoft-ads-einstieg .einstieg__aussage { font-size: clamp(30px, 8.6vw, 40px); }
}

/* ---------- Anteil mit Gerätewahl (dunkel) ---------- */
.microsoft-ads-anteil { overflow-x: clip; }
.microsoft-ads-anteil__werk { --g: 87.84; --b: 6.49; --y: 1.71; --d: 1.07; --e: 1.03; position: relative; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: radial-gradient(60% 80% at 10% 0%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1), 0 60px 120px -60px rgba(0, 0, 0, .9); }
.microsoft-ads-anteil__werk:has(#ms-geraet-desktop:checked) { --g: 69.98; --b: 19.42; --y: 5.21; --d: 1.92; --e: 1.36; }
.microsoft-ads-anteil__wahl { display: inline-flex; gap: 4px; margin: 0; padding: 5px; border: 0; border-radius: 999px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.microsoft-ads-anteil__wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.microsoft-ads-anteil__wahl label { position: relative; cursor: pointer; }
.microsoft-ads-anteil__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.microsoft-ads-anteil__wahl span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--hell-leise); transition: background .3s, color .3s, box-shadow .3s; }
.microsoft-ads-anteil__wahl label:hover span { color: var(--hell); }
.microsoft-ads-anteil__wahl input:checked + span { color: var(--tinte); background: var(--bernstein); box-shadow: 0 10px 26px -12px rgba(244, 165, 58, .8); }
.microsoft-ads-anteil__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 3px; }
.microsoft-ads-nur-desktop { display: none !important; }
.microsoft-ads-anteil__werk:has(#ms-geraet-desktop:checked) .microsoft-ads-nur-desktop { display: inline !important; }
.microsoft-ads-anteil__werk:has(#ms-geraet-desktop:checked) .microsoft-ads-nur-alle { display: none !important; }
.microsoft-ads-anteil__gross { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 24px 48px; margin-top: clamp(28px, 3.4vw, 44px); }
.microsoft-ads-anteil__gross p { display: grid; gap: 8px; }
.microsoft-ads-anteil__zahl b { font: italic 400 clamp(72px, 9vw, 136px)/.9 var(--serif); letter-spacing: -.02em; color: var(--bernstein-licht); animation: auftritt .5s var(--weich) both; }
.microsoft-ads-anteil__google .microsoft-ads-anteil__zahl b { font-size: clamp(44px, 4.6vw, 68px); color: var(--hell-leise); }
.microsoft-ads-anteil__gross p > span:last-child { max-width: 24em; font-size: 17px; line-height: 1.45; color: var(--hell-leise); }
.microsoft-ads-anteil__gross strong { color: var(--hell); }
.microsoft-ads-anteil__band { display: flex; height: 54px; margin-top: clamp(26px, 3vw, 40px); overflow: hidden; border-radius: 14px; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.microsoft-ads-anteil__band i { position: relative; display: flex; align-items: center; height: 100%; overflow: hidden; transition: width .9s var(--weich); }
.microsoft-ads-anteil__band span { padding-left: 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.microsoft-ads-anteil__g { width: calc(var(--g) * 1%); color: var(--hell); background: repeating-linear-gradient(135deg, rgba(205, 191, 174, .2) 0 8px, rgba(205, 191, 174, .12) 8px 16px); }
.microsoft-ads-anteil__b { width: calc(var(--b) * 1%); color: var(--tinte); background: linear-gradient(180deg, var(--bernstein-licht), var(--bernstein-tief)); box-shadow: 0 0 26px rgba(244, 165, 58, .55); }
.microsoft-ads-anteil__b span { padding-left: 12px; }
.microsoft-ads-anteil__y { width: calc(var(--y) * 1%); background: rgba(247, 187, 99, .62); }
.microsoft-ads-anteil__d { width: calc(var(--d) * 1%); background: rgba(247, 187, 99, .4); }
.microsoft-ads-anteil__e { width: calc(var(--e) * 1%); background: rgba(247, 187, 99, .22); }
.microsoft-ads-anteil__r { flex: 1; }
.microsoft-ads-anteil__band i + i { box-shadow: -1px 0 0 rgba(23, 19, 15, .9); }
.microsoft-ads-anteil__netz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid rgba(244, 165, 58, .45); }
.microsoft-ads-anteil__netz li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "punkt name wert" ". zusatz zusatz"; align-items: center; gap: 4px 10px; padding: 18px 18px 4px 0; }
.microsoft-ads-anteil__netz li + li { padding-left: 18px; border-left: 1px solid var(--linie-dunkel); }
.microsoft-ads-anteil__punkt { grid-area: punkt; width: 10px; height: 10px; border-radius: 3px; }
.microsoft-ads-anteil__punkt--b { background: var(--bernstein); box-shadow: 0 0 10px rgba(244, 165, 58, .6); }
.microsoft-ads-anteil__punkt--y { background: rgba(247, 187, 99, .62); }
.microsoft-ads-anteil__punkt--d { background: rgba(247, 187, 99, .4); }
.microsoft-ads-anteil__punkt--e { background: rgba(247, 187, 99, .22); box-shadow: inset 0 0 0 1px rgba(247, 187, 99, .5); }
.microsoft-ads-anteil__netz b { grid-area: name; font-size: 16px; color: var(--hell); }
.microsoft-ads-anteil__netz li > span { grid-area: wert; font: italic 400 24px/1 var(--serif); color: var(--bernstein-licht); white-space: nowrap; }
.microsoft-ads-anteil__netz small { grid-area: zusatz; font-size: 13px; line-height: 1.35; color: #b5a796; }
.microsoft-ads-anteil__quelle { max-width: 62em; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linie-dunkel); font-size: 13.5px; line-height: 1.55; color: #b5a796; }
@media (max-width: 960px) {
  .microsoft-ads-anteil__gross { grid-template-columns: minmax(0, 1fr); }
  .microsoft-ads-anteil__netz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .microsoft-ads-anteil__netz li:nth-child(3) { padding-left: 0; border-left: 0; }
  .microsoft-ads-anteil__netz li:nth-child(n+3) { border-top: 1px solid var(--linie-dunkel); margin-top: 14px; }
}
@media (max-width: 560px) {
  .microsoft-ads-anteil__werk { padding: 24px 18px; border-radius: 24px; }
  .microsoft-ads-anteil__wahl { display: flex; }
  .microsoft-ads-anteil__wahl label { flex: 1; }
  .microsoft-ads-anteil__wahl span { justify-content: center; width: 100%; padding: 0 12px; font-size: 15px; }
  .microsoft-ads-anteil__band { height: 40px; }
  .microsoft-ads-anteil__b span { display: none; }
  .microsoft-ads-anteil__netz { grid-template-columns: minmax(0, 1fr); }
  .microsoft-ads-anteil__netz li, .microsoft-ads-anteil__netz li + li { padding: 14px 0 6px; border-left: 0; margin-top: 0; }
  .microsoft-ads-anteil__netz li + li { border-top: 1px solid var(--linie-dunkel); }
}

/* ---------- Warum zusätzlich: Text links, Gründe rechts ---------- */
.microsoft-ads-warum__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.microsoft-ads-warum__text { position: sticky; top: calc(var(--kopf-h) + 32px); }
.microsoft-ads-warum__lead { margin-top: 24px; font: italic 400 clamp(24px, 2.1vw, 30px)/1.25 var(--serif); color: var(--tinte); }
.microsoft-ads-warum__lead strong { font-weight: 400; color: var(--bernstein-text); }
.microsoft-ads-warum__text > p:not(.microsoft-ads-warum__lead) { max-width: 30em; margin-top: 16px; font-size: 17.5px; line-height: 1.6; color: var(--leise); }
.microsoft-ads-gruende { border-top: 1px solid var(--tinte); counter-reset: ms-grund; }
.microsoft-ads-gruende li { counter-increment: ms-grund; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 18px; padding: 28px 0; border-bottom: 1px solid var(--linie); }
.microsoft-ads-gruende li::before { content: counter(ms-grund, upper-roman); grid-row: span 2; font: italic 400 34px/1 var(--serif); color: var(--bernstein-text); }
.microsoft-ads-gruende h3 { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.2; }
.microsoft-ads-gruende p { font-size: 16.5px; line-height: 1.6; color: var(--leise); }
@media (max-width: 960px) {
  .microsoft-ads-warum__raster { grid-template-columns: minmax(0, 1fr); }
  .microsoft-ads-warum__text { position: static; }
}
@media (max-width: 560px) {
  .microsoft-ads-gruende li { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; padding: 22px 0; }
  .microsoft-ads-gruende li::before { font-size: 26px; }
}

/* ---------- Netz der Ausspielorte (Reiter) ---------- */
.microsoft-ads-orte { margin-top: clamp(64px, 7vw, 112px); }
.microsoft-ads-orte h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.microsoft-ads-orte__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 64px); align-items: center; }
.microsoft-ads-orte__netz { --r: 172px; position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.microsoft-ads-orte__netz::before, .microsoft-ads-orte__netz::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.microsoft-ads-orte__netz::before { inset: 11%; border: 1.5px dashed rgba(244, 165, 58, .35); }
.microsoft-ads-orte__netz::after { inset: 30%; background: radial-gradient(closest-side, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0)); }
.microsoft-ads-orte__mitte { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-content: center; gap: 4px; width: 150px; height: 150px; border-radius: 50%; text-align: center; transform: translate(-50%, -50%); background: linear-gradient(160deg, #3a2f26, #1d1813); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 0 0 10px rgba(244, 165, 58, .06), 0 24px 50px -20px rgba(0, 0, 0, .9); }
.microsoft-ads-orte__mitte b { font: italic 400 24px/1.05 var(--serif); color: var(--hell); }
.microsoft-ads-orte__mitte small { font-size: 12px; color: var(--bernstein-licht); }
.microsoft-ads-orte__wahl { position: absolute; inset: 0; z-index: 2; }
.microsoft-ads-orte__ort { position: absolute; left: 50%; top: 50%; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 15px/1 var(--grotesk); color: var(--hell); white-space: nowrap; cursor: pointer; background: rgba(41, 33, 27, .96); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2), 0 12px 24px -14px rgba(0, 0, 0, .9); transform: translate(-50%, -50%) rotate(var(--w)) translateX(var(--r)) rotate(calc(var(--w) * -1)); transition: background .3s, color .3s, box-shadow .3s; }
.microsoft-ads-orte__ort:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein), 0 12px 24px -14px rgba(0, 0, 0, .9); }
.microsoft-ads-orte__ort[aria-selected="true"] { color: var(--tinte); background: var(--bernstein); box-shadow: 0 0 0 6px rgba(244, 165, 58, .2), 0 16px 34px -12px rgba(244, 165, 58, .8); }
.microsoft-ads-orte__ort:focus-visible { outline: 2px solid var(--bernstein-licht); outline-offset: 3px; }
.microsoft-ads-orte__felder { min-width: 0; }
.microsoft-ads-orte__feld { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: 24px; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); animation: auftritt .45s var(--weich) both; }
.microsoft-ads-orte__feld[hidden] { display: none; }
.microsoft-ads-orte__art { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--bernstein-licht); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .32); }
.microsoft-ads-orte__feld h4 { margin: 16px 0 0; font: italic 400 clamp(34px, 3.2vw, 46px)/1.05 var(--serif); color: var(--hell); }
.microsoft-ads-orte__feld p { max-width: 28em; margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
.microsoft-ads-orte__feld small { display: block; margin-top: 14px; font-size: 13px; color: #b5a796; }
@media (max-width: 1099px) {
  .microsoft-ads-orte__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .microsoft-ads-orte__netz { width: 100%; aspect-ratio: auto; }
  .microsoft-ads-orte__netz::before, .microsoft-ads-orte__netz::after, .microsoft-ads-orte__mitte { display: none; }
  .microsoft-ads-orte__wahl { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .microsoft-ads-orte__ort { position: static; transform: none; min-height: 42px; padding: 0 14px; font-size: 14.5px; }
  .microsoft-ads-orte__feld { padding: 22px 18px; border-radius: 20px; }
  .microsoft-ads-orte .werkzeug__fuss .knopf { width: 100%; }
}
@media (min-width: 561px) and (max-width: 760px) { .microsoft-ads-orte__netz { --r: 150px; } }

/* ---------- Ampel-Entscheidungshilfe (Alleinstellung) ---------- */
.microsoft-ads-ampel__werk { counter-reset: ms-gruen ms-gelb ms-rot; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 56px); align-items: start; }
.microsoft-ads-ampel__gruppen { display: grid; gap: 30px; }
.microsoft-ads-ampel__gruppe { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.microsoft-ads-ampel__gruppe legend { margin-bottom: 12px; padding: 0; }
.microsoft-ads-ampel__gruppe .ampel { display: inline-block; padding: 6px 14px; font-size: 13.5px; }
.microsoft-ads-ampel__gruppe--gruen { --farbe: #1c6537; --grund: #dcefe1; }
.microsoft-ads-ampel__gruppe--gelb { --farbe: #8a5a00; --grund: #f9ecc9; }
.microsoft-ads-ampel__gruppe--rot { --farbe: #962c13; --grund: #f7e1da; }
.microsoft-ads-ampel__lage { position: relative; display: grid; align-content: start; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 16px; padding: 18px 22px 18px 18px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s var(--weich); }
.microsoft-ads-ampel__lage::before { content: ""; grid-row: span 2; align-self: start; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--farbe); opacity: .55; transition: background .3s, opacity .3s, box-shadow .3s; }
.microsoft-ads-ampel__lage::after { content: ""; position: absolute; left: 27px; top: 25px; width: 9px; height: 5px; border-left: 2px solid var(--papier); border-bottom: 2px solid var(--papier); transform: rotate(-45deg) scale(0); transition: transform .3s var(--weich); }
.microsoft-ads-ampel__lage input { position: absolute; opacity: 0; pointer-events: none; }
.microsoft-ads-ampel__lage b { font-size: 17px; line-height: 1.35; }
.microsoft-ads-ampel__lage span { font-size: 15px; line-height: 1.5; color: var(--leise); }
.microsoft-ads-ampel__lage:hover { box-shadow: inset 0 0 0 1.5px var(--farbe); }
.microsoft-ads-ampel__lage:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.microsoft-ads-ampel__lage:has(input:checked) { background: linear-gradient(90deg, var(--grund), var(--papier) 85%); box-shadow: inset 4px 0 0 var(--farbe), inset 0 0 0 1px var(--farbe); }
.microsoft-ads-ampel__lage:has(input:checked)::before { background: var(--farbe); opacity: 1; }
.microsoft-ads-ampel__lage:has(input:checked)::after { transform: rotate(-45deg) scale(1); }
.microsoft-ads-ampel__gruppe--gruen input:checked { counter-increment: ms-gruen; }
.microsoft-ads-ampel__gruppe--gelb input:checked { counter-increment: ms-gelb; }
.microsoft-ads-ampel__gruppe--rot input:checked { counter-increment: ms-rot; }

.microsoft-ads-ampel__urteil { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; padding: clamp(24px, 2.6vw, 34px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 0% 0%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.microsoft-ads-ampel__mast { display: grid; align-content: start; gap: 14px; padding: 16px 0; border-radius: 46px; background: #100d0a; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1), inset 0 6px 18px rgba(0, 0, 0, .7); justify-items: center; }
.microsoft-ads-ampel__lampe { --licht: #f4a53a; position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%), rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); transition: background .4s, box-shadow .4s; }
.microsoft-ads-ampel__lampe--rot { --licht: #e25b3a; }
.microsoft-ads-ampel__lampe--gelb { --licht: #f4c03a; }
.microsoft-ads-ampel__lampe--gruen { --licht: #4fbf74; }
.microsoft-ads-ampel__lampe b { font: italic 400 26px/1 var(--serif); color: rgba(246, 239, 230, .35); }
.microsoft-ads-ampel__lampe--rot b::after { content: counter(ms-rot); }
.microsoft-ads-ampel__lampe--gelb b::after { content: counter(ms-gelb); }
.microsoft-ads-ampel__lampe--gruen b::after { content: counter(ms-gruen); }
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--rot input:checked) .microsoft-ads-ampel__lampe--rot,
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--gelb input:checked) .microsoft-ads-ampel__lampe--gelb,
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--gruen input:checked) .microsoft-ads-ampel__lampe--gruen { background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%), var(--licht); box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 0 34px var(--licht); }
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--rot input:checked) .microsoft-ads-ampel__lampe--rot b,
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--gelb input:checked) .microsoft-ads-ampel__lampe--gelb b,
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--gruen input:checked) .microsoft-ads-ampel__lampe--gruen b { color: #14100c; }
.microsoft-ads-ampel__regel { display: grid; align-content: start; gap: 14px; }
.microsoft-ads-ampel__titel { padding-bottom: 14px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); }
.microsoft-ads-ampel__titel em { color: var(--bernstein-licht); }
.microsoft-ads-ampel__regel p:not(.microsoft-ads-ampel__titel) { font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.microsoft-ads-ampel__regel p b { display: block; margin-bottom: 4px; font: italic 400 23px/1.2 var(--serif); color: var(--hell); }
.microsoft-ads-ampel__satz { animation: auftritt .45s var(--weich) both; }
.microsoft-ads-ampel__satz--rot, .microsoft-ads-ampel__google { display: none !important; }
.microsoft-ads-ampel__werk:has(input:checked) .microsoft-ads-ampel__start { display: none; }
.microsoft-ads-ampel__werk:not(:has(input:checked)) .microsoft-ads-ampel__satz { display: none !important; }
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--rot input:checked) .microsoft-ads-ampel__satz:not(.microsoft-ads-ampel__satz--rot) { display: none !important; }
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--rot input:checked) .microsoft-ads-ampel__satz--rot { display: block !important; }
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--rot input:checked) .microsoft-ads-ampel__google { display: inline-flex !important; }
.microsoft-ads-ampel__werk:has(.microsoft-ads-ampel__gruppe--rot input:checked) .microsoft-ads-ampel__urteil { box-shadow: inset 0 0 0 1px rgba(226, 91, 58, .5), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.microsoft-ads-ampel__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 961px) {
  .microsoft-ads-ampel__gruppen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .microsoft-ads-ampel__gruppe--gruen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .microsoft-ads-ampel__werk { grid-template-columns: minmax(0, 1fr); }
  .microsoft-ads-ampel__urteil { position: static; }
}
@media (max-width: 560px) {
  .microsoft-ads-ampel__lage { grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; padding: 16px 16px 16px 14px; }
  .microsoft-ads-ampel__lage::before { width: 22px; height: 22px; }
  .microsoft-ads-ampel__lage::after { left: 21px; top: 22px; }
  .microsoft-ads-ampel__lage b { font-size: 16px; }
  .microsoft-ads-ampel__urteil { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 18px 16px; border-radius: 22px; }
  .microsoft-ads-ampel__mast { gap: 8px; padding: 10px 0; }
  .microsoft-ads-ampel__lampe { width: 38px; height: 38px; }
  .microsoft-ads-ampel__lampe b { font-size: 18px; }
  .microsoft-ads-ampel__regel { gap: 8px; }
  .microsoft-ads-ampel__titel { padding-bottom: 8px; font-size: 22px; }
  .microsoft-ads-ampel__regel p:not(.microsoft-ads-ampel__titel) { font-size: 14.5px; }
  .microsoft-ads-ampel__regel p b { font-size: 19px; }
  .microsoft-ads-ampel__knoepfe .knopf { width: 100%; }
}

/* ---------- Partner-Siegel ---------- */
.microsoft-ads-partner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.microsoft-ads-partner__siegel { position: relative; display: grid; place-items: center; padding: 40px 0; }
.microsoft-ads-partner__siegel::before { content: ""; position: absolute; width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 165, 58, .22), rgba(244, 165, 58, 0)); }
.microsoft-ads-partner__plakette { position: relative; display: block; width: min(100%, 250px); padding: 18px; border-radius: 26px; background: #fffdf9; box-shadow: 0 0 0 1px var(--linie), 0 0 0 10px rgba(255, 253, 249, .6), 0 50px 90px -40px rgba(60, 40, 20, .6); transform: rotate(-3deg); }
.microsoft-ads-partner__plakette img { width: 100%; border-radius: 10px; }
.microsoft-ads-partner__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.microsoft-ads-partner__text > p:not(.microsoft-ads-person) { max-width: 34em; margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.microsoft-ads-partner__text strong { color: var(--tinte); }
.microsoft-ads-person { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.microsoft-ads-person img { flex: none; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--linie); }
.microsoft-ads-person b { color: var(--tinte); }
@media (max-width: 860px) {
  .microsoft-ads-partner { grid-template-columns: minmax(0, 1fr); }
  .microsoft-ads-partner__siegel { padding: 10px 0; }
  .microsoft-ads-partner__plakette { width: 190px; }
}

/* ---------- Wegweiser mit drei Fragen (nur CSS, :has) ---------- */
.microsoft-ads-lotse { margin-top: clamp(64px, 7vw, 112px); }
.microsoft-ads-lotse h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.microsoft-ads-lotse__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 56px); align-items: stretch; }
.microsoft-ads-lotse__fragen { display: grid; gap: 22px; }
.microsoft-ads-lotse__frage { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.microsoft-ads-lotse__frage:last-child { padding-bottom: 0; border-bottom: 0; }
.microsoft-ads-lotse__frage legend { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; padding: 0; font-size: 18px; font-weight: 600; }
.microsoft-ads-lotse__frage legend span { font: italic 400 24px/1 var(--serif); color: var(--bernstein-text); }
.microsoft-ads-lotse__frage label { position: relative; cursor: pointer; }
.microsoft-ads-lotse__frage input { position: absolute; opacity: 0; pointer-events: none; }
.microsoft-ads-lotse__frage label span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-size: 15px; line-height: 1.3; color: var(--tinte); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.microsoft-ads-lotse__frage label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.microsoft-ads-lotse__frage input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: 0 0 0 3px rgba(244, 165, 58, .3); }
.microsoft-ads-lotse__frage input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.microsoft-ads-lotse__ergebnis { position: relative; display: grid; align-content: center; padding: clamp(24px, 3vw, 40px); border-radius: 24px; color: var(--hell); background: radial-gradient(70% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.microsoft-ads-lotse__ergebnis > div { display: grid; gap: 12px; animation: auftritt .45s var(--weich) both; }
.microsoft-ads-lotse__satz { font: italic 400 clamp(28px, 2.5vw, 36px)/1.1 var(--serif); color: var(--hell); }
.microsoft-ads-lotse__satz em { color: var(--bernstein-licht); }
.microsoft-ads-lotse__ergebnis p:not(.microsoft-ads-lotse__satz) { font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.microsoft-ads-lotse__ergebnis .knopf { justify-self: start; margin-top: 6px; }
.microsoft-ads-lotse__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.microsoft-ads-lotse__knoepfe .knopf { margin-top: 0; }
.microsoft-ads-lotse__zusatz { padding: 10px 14px; border-radius: 12px; background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); color: #efe5d8 !important; }
.microsoft-ads-lotse .microsoft-ads-lotse__wahl, .microsoft-ads-lotse .microsoft-ads-lotse__zusatz { display: none; }
.microsoft-ads-lotse:has([name="ms-l1"]:checked):has([name="ms-l2"]:checked) .microsoft-ads-lotse__leer { display: none; }
.microsoft-ads-lotse:has(#ms-l1-nein:checked):has([name="ms-l2"]:checked) .microsoft-ads-lotse__wahl--google,
.microsoft-ads-lotse:has(#ms-l1-ja:checked):has(#ms-l2-ja:checked) .microsoft-ads-lotse__wahl--import,
.microsoft-ads-lotse:has(#ms-l1-unsicher:checked):has([name="ms-l2"]:checked) .microsoft-ads-lotse__wahl--pruefen,
.microsoft-ads-lotse:has(#ms-l1-ja:checked):has(#ms-l2-teils:checked) .microsoft-ads-lotse__wahl--pruefen,
.microsoft-ads-lotse:has(#ms-l1-ja:checked):has(#ms-l2-unbekannt:checked) .microsoft-ads-lotse__wahl--pruefen { display: grid; }
.microsoft-ads-lotse:has(#ms-l3-firmen:checked) .microsoft-ads-lotse__zusatz { display: block; }
@media (max-width: 960px) {
  .microsoft-ads-lotse__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .microsoft-ads-lotse__frage label { width: 100%; }
  .microsoft-ads-lotse__frage label span { width: 100%; padding: 10px 16px; border-radius: 16px; }
  .microsoft-ads-lotse__ergebnis .knopf { justify-self: stretch; width: 100%; }
}

/* ---------- Preis: Weg links, Beleg rechts ---------- */
.microsoft-ads-preis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.microsoft-ads-preis__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.microsoft-ads-preis__text > p { max-width: 32em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.microsoft-ads-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: ms-pw; }
.microsoft-ads-preis__weg li { counter-increment: ms-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.microsoft-ads-preis__weg li::before { content: counter(ms-pw, upper-roman); grid-row: span 2; font: italic 400 27px/1.1 var(--serif); color: var(--bernstein-text); }
.microsoft-ads-preis__weg b { font-size: 18px; }
.microsoft-ads-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.microsoft-ads-beleg { position: relative; padding: 30px 30px 40px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 0 60px 110px -60px rgba(60, 40, 20, .7); transform: rotate(1.2deg); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) bottom left / 20px 12px repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) bottom left / 20px 12px repeat-x; }
.microsoft-ads-beleg__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 16px; border-bottom: 2px solid var(--tinte); }
.microsoft-ads-beleg__kopf span { font: italic 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); }
.microsoft-ads-beleg__kopf small { font-size: 13px; color: var(--leise); }
.microsoft-ads-beleg__zeilen > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; border-bottom: 1px dashed #d8ccbb; }
.microsoft-ads-beleg__zeilen dt { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 700; }
.microsoft-ads-beleg__zeilen dt::after { content: ""; flex: 1; border-bottom: 2px dotted #d8ccbb; transform: translateY(-4px); }
.microsoft-ads-beleg__zeilen dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.microsoft-ads-beleg__fuss { margin-top: 18px; font: italic 400 20px/1.3 var(--serif); color: var(--bernstein-text); }
@media (max-width: 960px) { .microsoft-ads-preis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .microsoft-ads-beleg { padding: 24px 20px 34px; transform: none; } }
@media (max-width: 380px) {
  .microsoft-ads-einstieg .einstieg__klein { font-size: 14px; line-height: 1.3; }
  .microsoft-ads-einstieg .einstieg__aussage { font-size: 29px; }
  .microsoft-ads-einstieg .einstieg__lead { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
}
.microsoft-ads-befund .befund__arten[hidden] { display: none; }

/* ==========================================================================
   Denzlingen H2 (17.10.2026): nur diese Seite, Präfix denzlingen-
   Abend-Uhr in der Live-Szene, Szene Unternehmensprofil, Kaufkraft-Dreieck mit drei Sichten (data-reiter).
   Umzugs-Checkliste nutzt .werkzeug und .pruefliste aus den Bausteinen.
   Gemeinsame ort-…-Klassen kommen aus orte.css. Nur Tokens aus :root.
   ========================================================================== */

/* ---------- Live-Szene: Uhrzeit läuft, Unternehmensprofil ---------- */
.denzlingen-uhr { gap: 0; font-variant-numeric: tabular-nums; }
.denzlingen-uhr .zaehler { font: inherit; color: inherit; }
.ist-aktiv .denzlingen-uhr .zaehler { animation: denzlingen-minuten 2.4s steps(9) .4s both; }
@keyframes denzlingen-minuten { from { --zahl: 31; } }
.denzlingen-profil { flex: 1 1 auto; display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: 18px; background: #f6efe6; color: var(--tinte); box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .85); }
.denzlingen-profil__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.denzlingen-profil__kopf b { font-size: 21px; font-weight: 700; }
.denzlingen-profil__sterne { display: flex; gap: 3px; }
.denzlingen-profil__sterne i { width: 14px; height: 14px; background: var(--bernstein-tief); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.denzlingen-profil__zeile { font-size: 14.5px; color: var(--leise); }
.denzlingen-profil__zeile--offen { color: #2f6b3a; font-weight: 600; }
.denzlingen-profil__knoepfe { display: flex; gap: 8px; margin-top: 6px; }
.denzlingen-profil__knoepfe span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--tinte); background: #e6dccd; }
.denzlingen-profil__knoepfe .symbol { width: 16px; height: 16px; }
.denzlingen-profil__anruf { color: #1a130c !important; background: var(--bernstein) !important; box-shadow: 0 8px 18px -8px rgba(228, 143, 23, .8); }
.ist-aktiv .denzlingen-profil { animation: aufbau .7s var(--weich) .4s both; }
.ist-aktiv .denzlingen-profil__anruf { animation: aufbau .6s var(--weich) 1s both, klick .6s ease 2.4s, klick .6s ease 3.4s; }
@media (max-width: 760px) {
  .denzlingen-profil { gap: 6px; padding: 10px 12px; border-radius: 12px; }
  .denzlingen-profil__kopf b { font-size: 15px; }
  .denzlingen-profil__sterne i { width: 11px; height: 11px; }
  .denzlingen-profil__zeile { font-size: 12.5px; }
  .denzlingen-profil__knoepfe { margin-top: 0; }
  .denzlingen-profil__knoepfe span { height: 28px; padding: 0 10px; font-size: 12px; }
}

/* ---------- Kaufkraft-Dreieck ---------- */
.denzlingen-dreieck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.denzlingen-dreieck__karte { position: relative; padding: clamp(16px, 2vw, 28px); border-radius: 30px; background: radial-gradient(70% 70% at 50% 50%, #2a221b, var(--espresso) 75%); box-shadow: 0 40px 80px -40px rgba(28, 23, 19, .55), inset 0 0 0 1px rgba(246, 239, 230, .08); }
.denzlingen-dreieck__karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.denzlingen-dreieck__flaeche { fill: rgba(246, 239, 230, .04); stroke: rgba(246, 239, 230, .28); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linejoin: round; }
.denzlingen-dreieck__ort circle { fill: var(--espresso-3); stroke: var(--hell-leise); stroke-width: 2.5; }
.denzlingen-dreieck__ort text, .denzlingen-dreieck__alter text { font: 600 15px var(--grotesk); fill: var(--hell); }
.denzlingen-dreieck__ort--gross text { font: italic 400 22px var(--serif); }
.denzlingen-dreieck__mitte circle:not(.denzlingen-dreieck__puls) { fill: var(--bernstein); }
.denzlingen-dreieck__mitte text { font: italic 400 24px var(--serif); fill: var(--bernstein-licht); }
.denzlingen-dreieck__puls { fill: rgba(244, 165, 58, .25); transform-box: fill-box; transform-origin: center; }
.bewegt .denzlingen-dreieck__puls { animation: ort-puls 2.4s ease-out infinite; }
.denzlingen-dreieck__spitze { fill: context-stroke; }
.denzlingen-dreieck__pfeile path { fill: none; stroke-width: 5; stroke-linecap: round; marker-end: url(#dz-spitze); }
.denzlingen-dreieck__pfeile--arbeit path { stroke: var(--hell); }
.denzlingen-dreieck__pfeile--arbeit path:first-child { stroke-width: 9; }
.denzlingen-dreieck__pfeile--einkauf path { stroke: var(--bernstein); stroke-dasharray: 2 10; stroke-width: 7; }
.denzlingen-dreieck__pfeile--einkauf path:first-child { stroke-width: 11; }
.denzlingen-dreieck__pfeile--einkauf, .denzlingen-dreieck__alter { opacity: 0; transition: opacity .5s; }
.denzlingen-dreieck__pfeile--arbeit { transition: opacity .5s; }
.denzlingen-dreieck[data-aktiv="1"] .denzlingen-dreieck__pfeile--arbeit, .denzlingen-dreieck[data-aktiv="2"] .denzlingen-dreieck__pfeile--arbeit { opacity: 0; }
.denzlingen-dreieck[data-aktiv="1"] .denzlingen-dreieck__pfeile--einkauf { opacity: 1; }
.denzlingen-dreieck[data-aktiv="2"] .denzlingen-dreieck__alter { opacity: 1; }
.denzlingen-dreieck__saeule { fill: rgba(246, 239, 230, .3); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--h)); transition: transform .9s var(--weich); }
.denzlingen-dreieck__saeule--dz { fill: var(--bernstein); }
.denzlingen-dreieck__alter .denzlingen-dreieck__wert { font: italic 400 20px var(--serif); fill: var(--bernstein-licht); }
.denzlingen-dreieck:not([data-aktiv="2"]) .denzlingen-dreieck__saeule { transform: scaleY(0); }
@media (prefers-reduced-motion: no-preference) {
  .denzlingen-dreieck__pfeile path { stroke-dashoffset: 0; }
  .denzlingen-dreieck.ist-da:not([data-aktiv="1"]):not([data-aktiv="2"]) .denzlingen-dreieck__pfeile--arbeit path, .denzlingen-dreieck[data-aktiv="1"] .denzlingen-dreieck__pfeile--einkauf path { animation: denzlingen-fluss 1.2s linear infinite; animation-delay: var(--d); }
}
@keyframes denzlingen-fluss { 50% { opacity: .55; } }
.denzlingen-dreieck__steuer { display: grid; gap: 22px; }
.denzlingen-dreieck__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.denzlingen-dreieck__wahl button { display: grid; gap: 2px; min-height: 68px; padding: 10px 12px; border: 0; border-radius: 16px; background: none; color: var(--leise); font: 600 14.5px/1.2 var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.denzlingen-dreieck__wahl button b { font: italic 400 28px/1 var(--serif); color: var(--tinte); }
.denzlingen-dreieck__wahl button:hover { background: rgba(244, 165, 58, .12); }
.denzlingen-dreieck__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell-leise); }
.denzlingen-dreieck__wahl button[aria-selected="true"] b { color: var(--bernstein-licht); }
.denzlingen-dreieck__wahl button:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.denzlingen-dreieck__feld { display: grid; gap: 14px; justify-items: start; }
.denzlingen-dreieck__feld[hidden] { display: none; }
.denzlingen-dreieck__zahl { display: grid; gap: 4px; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--tinte); }
.denzlingen-dreieck__zahl b { font: italic 400 clamp(64px, 7vw, 100px)/.9 var(--serif); color: var(--bernstein-text); font-variant-numeric: tabular-nums; }
.denzlingen-dreieck__zahl span { font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.denzlingen-dreieck__feld h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.denzlingen-dreieck__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.denzlingen-dreieck__feld > p:not(.denzlingen-dreieck__zahl) { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 36em; }
.denzlingen-dreieck__balken { width: 100%; height: 14px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.denzlingen-dreieck__balken i { display: block; width: var(--anteil); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); }
.denzlingen-dreieck__skala { position: relative; display: grid; gap: 8px; width: 100%; }
.denzlingen-dreieck__skala i { display: flex; align-items: center; width: var(--wert); height: 30px; padding-left: 12px; border-radius: 8px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); font-style: normal; }
.denzlingen-dreieck__skala span { font-size: 13.5px; font-weight: 700; color: #1a130c; white-space: nowrap; }
.denzlingen-dreieck__skala .denzlingen-dreieck__skala-d { background: var(--sand); }
.denzlingen-dreieck__skala .denzlingen-dreieck__skala-d span { color: var(--tinte); }
@media (prefers-reduced-motion: no-preference) {
  .denzlingen-dreieck__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; }
  .denzlingen-dreieck__feld:not([hidden]) .denzlingen-dreieck__balken i, .denzlingen-dreieck__feld:not([hidden]) .denzlingen-dreieck__skala i { animation: denzlingen-wachsen 1s var(--weich) .2s both; transform-origin: left; }
}
@keyframes denzlingen-wachsen { from { transform: scaleX(0); } }
@media (max-width: 900px) { .denzlingen-dreieck { grid-template-columns: minmax(0, 1fr); } .denzlingen-dreieck__karte { max-width: 520px; width: 100%; justify-self: center; } }
@media (max-width: 520px) {
  .denzlingen-dreieck__wahl button { min-height: 60px; padding: 8px 6px; font-size: 13.5px; }
  .denzlingen-dreieck__wahl button b { font-size: 23px; }
  .denzlingen-dreieck__ort text, .denzlingen-dreieck__alter text { font-size: 19px; }
  .denzlingen-dreieck__ort--gross text { font-size: 26px; }
  .denzlingen-dreieck__mitte text { font-size: 28px; }
}

/* Niedrige Bildschirme: Ortsmarke weicht, damit die Vertrauensleiste im ersten Bild bleibt (Entfernung steht in Kürze und FAQ) */
@media (min-width: 1100px) and (max-height: 760px) { .denzlingen-einstieg .ortsmarke { display: none; } }
@media (max-width: 400px) and (max-height: 780px) { .denzlingen-einstieg .ortsmarke { display: none; } }

/* Umzugs-Checkliste: Werkzeug hebt sich als Creme-Karte vom Papiergrund ab */
.denzlingen-umzug .werkzeug { background: var(--creme); }

/* ==========================================================================
   Einsatzgebiet H2 (17.10.2026): nur diese Seite, Präfix einsatzgebiet-
   Live-Szene „Suchen im Landkreis“, Ortswähler auf der Kreiskarte mit Pendlerwaage,
   sortierbare Vergleichstabelle (Radio + :has, ohne eigenes JavaScript), Lesehilfe, Termin-Anlässe.
   Gemeinsame ort-…-Klassen kommen aus orte.css. Nur Tokens aus :root.
   ========================================================================== */

/* ---------- Live-Szene: Suchanfragen leuchten auf der Kreiskarte auf ---------- */
.einsatzgebiet-szene__flaeche { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.einsatzgebiet-szene__karte { position: relative; justify-self: center; height: 100%; max-width: 100%; aspect-ratio: 446 / 260; min-height: 0; }
.einsatzgebiet-szene__karte svg { display: block; width: 100%; height: 100%; overflow: visible; }
.einsatzgebiet-szene__kreis { fill: rgba(255, 244, 228, .06); stroke: rgba(244, 165, 58, .45); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 6 5; }
.einsatzgebiet-szene__elz { fill: none; stroke: rgba(205, 191, 174, .3); stroke-width: 6; stroke-linecap: round; }
.einsatzgebiet-szene__orte circle { fill: var(--espresso-3); stroke: var(--hell-leise); stroke-width: 2.5; }
.einsatzgebiet-szene__ping { position: absolute; left: var(--px); top: var(--py); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 5px rgba(244, 165, 58, .3), 0 0 24px rgba(244, 165, 58, .9); }
.einsatzgebiet-szene__ping::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--bernstein-licht); opacity: 0; }
.einsatzgebiet-szene__suche { display: grid; gap: 7px; }
.einsatzgebiet-szene__suche .sz-rang__suche { margin: 0; }
.einsatzgebiet-szene__treffer, .einsatzgebiet-szene__andere { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 10px; border-radius: 14px; font-size: 14.5px; }
.einsatzgebiet-szene__treffer { color: var(--hell); font-weight: 700; background: linear-gradient(90deg, rgba(244, 165, 58, .26), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.einsatzgebiet-szene__treffer small { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a130c; background: var(--bernstein); }
.einsatzgebiet-szene__andere { grid-template-columns: 26px minmax(0, 1fr); color: #cdbfae; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.einsatzgebiet-szene__platz { font: italic 400 21px/1 var(--serif); text-align: center; color: #a99b89; }
.einsatzgebiet-szene__treffer .einsatzgebiet-szene__platz { color: var(--bernstein-licht); }
.ist-aktiv .einsatzgebiet-szene__ping { animation: einsatzgebiet-ping-auf .6s var(--weich) .5s both; }
.bewegt .ist-aktiv .einsatzgebiet-szene__ping::after { animation: einsatzgebiet-welle 2s ease-out 1.1s infinite; }
.ist-aktiv .einsatzgebiet-szene__suche .sz-rang__suche { animation: aufbau .6s var(--weich) .9s both; }
.ist-aktiv .einsatzgebiet-szene__treffer { animation: aufbau .6s var(--weich) 1.5s both; }
.ist-aktiv .einsatzgebiet-szene__andere { animation: aufbau .6s var(--weich) 1.8s both; }
@keyframes einsatzgebiet-ping-auf { from { opacity: 0; transform: scale(0); } }
@keyframes einsatzgebiet-welle { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
@media (min-width: 1100px) and (max-height: 800px) { .einsatzgebiet-szene__andere { display: none; } }
@media (max-width: 760px) {
  .einsatzgebiet-szene__flaeche { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 12px; }
  .einsatzgebiet-szene__karte { height: 78px; }
  .einsatzgebiet-szene__suche .sz-rang__suche { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .einsatzgebiet-szene__ping { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .einsatzgebiet-szene__suche { gap: 5px; }
  .einsatzgebiet-szene__treffer { height: 30px; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 7px; padding: 0 8px 0 6px; border-radius: 10px; font-size: 12.5px; }
  .einsatzgebiet-szene__treffer small { padding: 2px 7px; font-size: 11px; }
  .einsatzgebiet-szene__platz { font-size: 15px; }
  .einsatzgebiet-szene__andere { display: none; }
}

/* Kleine, niedrige Handys: Ortsmarke weicht, damit die Vertrauensleiste im ersten Bild bleibt (steht auch in der Kürze) */
@media (max-width: 400px) and (max-height: 780px) { .einsatzgebiet-einstieg .ortsmarke { display: none; } }

/* ---------- Ortswähler: Kreiskarte (Reiter) ---------- */
.einsatzgebiet-waehler { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.einsatzgebiet-karte { position: relative; width: 100%; aspect-ratio: 446 / 389; border-radius: 30px; background: radial-gradient(70% 70% at 42% 52%, #2a221b, var(--espresso) 75%); box-shadow: 0 40px 80px -40px rgba(28, 23, 19, .55), inset 0 0 0 1px rgba(246, 239, 230, .08); }
.einsatzgebiet-karte__bild { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.einsatzgebiet-karte__kreis { fill: rgba(246, 239, 230, .05); stroke: rgba(244, 165, 58, .55); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.einsatzgebiet-karte__wald { fill: url(#eg-wald); opacity: .5; }
.einsatzgebiet-karte__schraffur { stroke: rgba(246, 239, 230, .1); stroke-width: 1.5; }
.einsatzgebiet-karte__licht { fill: url(#eg-licht); pointer-events: none; }
.einsatzgebiet-karte__rhein { fill: none; stroke: rgba(205, 191, 174, .22); stroke-width: 10; stroke-linecap: round; }
.einsatzgebiet-karte__elz { fill: none; stroke: rgba(205, 191, 174, .3); stroke-width: 5; stroke-linecap: round; }
.einsatzgebiet-karte__bahn { fill: none; stroke: rgba(246, 239, 230, .2); stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; }
.einsatzgebiet-karte__name { font: 600 11px var(--grotesk); fill: var(--hell-leise); letter-spacing: .06em; }
.einsatzgebiet-karte__name--fluss { font: italic 400 17px var(--serif); letter-spacing: 0; }
.einsatzgebiet-karte__name--gross { font: italic 400 19px var(--serif); letter-spacing: .01em; fill: rgba(205, 191, 174, .55); }
.einsatzgebiet-ort { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; margin: 0; border: 0; border-radius: 12px; background: none; color: var(--hell); font: 600 15px/1.1 var(--grotesk); white-space: nowrap; cursor: pointer; transform: translate(-14px, -50%); transition: background .25s; }
.einsatzgebiet-ort i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 2.5px var(--bernstein-licht); transition: background .25s, box-shadow .25s; }
.einsatzgebiet-ort--links { flex-direction: row-reverse; transform: translate(calc(-100% + 14px), -50%); }
.einsatzgebiet-ort--sitz { transform: translate(-24px, -50%); }
.einsatzgebiet-ort--sitz img { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--hell); box-shadow: 0 0 0 5px rgba(244, 165, 58, .2), 0 0 26px rgba(244, 165, 58, .5); }
.einsatzgebiet-ort:hover { background: rgba(246, 239, 230, .08); }
.einsatzgebiet-ort[aria-selected="true"] i { background: var(--bernstein); box-shadow: 0 0 0 5px rgba(244, 165, 58, .28), 0 0 18px rgba(244, 165, 58, .8); }
.einsatzgebiet-ort[aria-selected="true"] span { color: var(--bernstein-licht); }
.einsatzgebiet-ort--sitz[aria-selected="true"] img { box-shadow: 0 0 0 3px var(--bernstein), 0 0 0 9px rgba(244, 165, 58, .2), 0 0 40px rgba(244, 165, 58, .7); }
.einsatzgebiet-ort:focus-visible, .einsatzgebiet-kreis:focus-visible { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.einsatzgebiet-kreis { position: absolute; right: 16px; bottom: 16px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(246, 239, 230, .08); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); color: var(--hell); font: 600 14.5px/1 var(--grotesk); cursor: pointer; transition: background .25s, color .25s; }
.einsatzgebiet-kreis:hover { background: rgba(246, 239, 230, .14); }
.einsatzgebiet-kreis[aria-selected="true"] { background: var(--bernstein); color: #1a130c; box-shadow: none; }

/* ---------- Ortswähler: Feld mit Pendlerwaage ---------- */
.einsatzgebiet-felder { display: grid; }
.einsatzgebiet-feld { grid-area: 1 / 1; display: grid; gap: 16px; align-content: center; justify-items: start; }
.einsatzgebiet-feld[hidden] { display: none; }
.einsatzgebiet-feld h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; }
.einsatzgebiet-feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.einsatzgebiet-feld > p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 34em; }
.einsatzgebiet-feld__zahlen { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 28px; width: 100%; padding: 14px 0; border-block: 1px solid var(--linie); }
.einsatzgebiet-feld__zahlen span { display: grid; font-size: 13.5px; line-height: 1.35; color: var(--leise); }
.einsatzgebiet-feld__zahlen b { font: italic 400 30px/1.05 var(--serif); color: var(--tinte); font-variant-numeric: tabular-nums; }
.einsatzgebiet-feld__zahlen span:last-child b { color: var(--bernstein-text); }
@media (prefers-reduced-motion: no-preference) { .einsatzgebiet-feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }

.einsatzgebiet-waage { position: relative; width: 100%; max-width: 460px; height: 210px; }
.einsatzgebiet-waage__balken { position: absolute; left: 12%; right: 12%; top: 132px; z-index: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein) 50%, var(--tinte)); transform: rotate(var(--neigung)); }
.einsatzgebiet-waage__balken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 3px var(--tinte); }
.einsatzgebiet-waage__schale { position: absolute; bottom: 100%; display: grid; justify-items: center; width: 116px; transform: translateX(-50%) rotate(calc(var(--neigung) * -1)); transform-origin: 50% 100%; }
.einsatzgebiet-waage__schale--ein { left: 0; }
.einsatzgebiet-waage__schale--aus { left: 100%; }
.einsatzgebiet-waage__schale i { order: 2; width: 70px; height: calc(18px + var(--h) * 64px); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--espresso-3), var(--espresso)); box-shadow: inset 0 1px 0 rgba(246, 239, 230, .14); }
.einsatzgebiet-waage__schale--ein i { --h: var(--h-ein); background: linear-gradient(180deg, var(--bernstein-licht), var(--bernstein-tief)); }
.einsatzgebiet-waage__schale--aus i { --h: var(--h-aus); }
.einsatzgebiet-waage__schale b { order: 0; font: italic 400 26px/1 var(--serif); color: var(--tinte); font-variant-numeric: tabular-nums; }
.einsatzgebiet-waage__schale small { order: 1; margin-bottom: 6px; font-size: 12.5px; color: var(--leise); }
.einsatzgebiet-waage__fuss { position: absolute; left: 50%; top: 135px; width: 64px; height: 58px; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--tinte), var(--espresso-3)); }
.einsatzgebiet-waage__fuss::after { content: ""; position: absolute; inset: auto -40px 0; height: 2px; background: var(--tinte); }
.einsatzgebiet-waage__urteil { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--hell); background: var(--espresso); white-space: nowrap; }
.einsatzgebiet-waage--arbeit .einsatzgebiet-waage__urteil { color: #1a130c; background: var(--bernstein); }
@media (prefers-reduced-motion: no-preference) {
  .einsatzgebiet-feld:not([hidden]) .einsatzgebiet-waage__balken { animation: einsatzgebiet-kippen 1.1s var(--weich) .15s both; }
  .einsatzgebiet-feld:not([hidden]) .einsatzgebiet-waage__schale { animation: einsatzgebiet-schale 1.1s var(--weich) .15s both; }
  .einsatzgebiet-feld:not([hidden]) .einsatzgebiet-waage__schale i { animation: saeule .8s var(--weich) .1s both; transform-origin: bottom; }
}
@keyframes einsatzgebiet-kippen { from { transform: rotate(0deg); } }
@keyframes einsatzgebiet-schale { from { transform: translateX(-50%) rotate(0deg); } }
@media (max-width: 900px) {
  .einsatzgebiet-waehler { grid-template-columns: minmax(0, 1fr); }
  .einsatzgebiet-karte { max-width: 620px; justify-self: center; }
}
@media (max-width: 560px) {
  .einsatzgebiet-karte { border-radius: 22px; }
  .einsatzgebiet-ort { gap: 5px; min-height: 36px; padding: 2px 4px; font-size: 13px; transform: translate(-9px, -50%); }
  .einsatzgebiet-ort--links { transform: translate(calc(-100% + 9px), -50%); }
  .einsatzgebiet-ort i { width: 10px; height: 10px; }
  .einsatzgebiet-ort--sitz { transform: translate(-15px, -50%); }
  .einsatzgebiet-ort--oben { flex-direction: column-reverse; gap: 2px; transform: translate(-50%, calc(-100% + 12px)); }
  .einsatzgebiet-ort--sitz img { width: 26px; height: 26px; padding: 4px; }
  .einsatzgebiet-karte__name--gross { font-size: 24px; }
  .einsatzgebiet-karte__name { font-size: 15px; }
  .einsatzgebiet-kreis { right: 10px; bottom: 10px; min-height: 36px; padding: 0 12px; font-size: 13px; }
  .einsatzgebiet-feld__zahlen { grid-template-columns: auto auto; }
  .einsatzgebiet-feld__zahlen span:last-child { grid-column: 1 / -1; }
  .einsatzgebiet-waage { height: 196px; }
  .einsatzgebiet-waage__balken { top: 122px; left: 16%; right: 16%; }
  .einsatzgebiet-waage__fuss { top: 125px; height: 52px; }
  .einsatzgebiet-waage__schale { width: 96px; }
  .einsatzgebiet-waage__schale i { width: 54px; height: calc(14px + var(--h) * 56px); }
  .einsatzgebiet-waage__schale b { font-size: 22px; }
}

/* ---------- Sortierbare Vergleichstabelle ---------- */
.einsatzgebiet-tafel__sortierung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.einsatzgebiet-tafel__sortierung legend { float: left; margin-right: 10px; font: italic 400 22px/44px var(--serif); color: var(--bernstein-text); }
.einsatzgebiet-tafel__sortierung label { position: relative; cursor: pointer; }
.einsatzgebiet-tafel__sortierung input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.einsatzgebiet-tafel__sortierung span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); font-size: 15px; font-weight: 600; color: var(--tinte); transition: background .25s, color .25s, box-shadow .25s; }
.einsatzgebiet-tafel__sortierung label:hover span { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.einsatzgebiet-tafel__sortierung input:checked + span { background: var(--espresso); color: var(--hell); box-shadow: 0 10px 24px -14px rgba(28, 23, 19, .8); }
.einsatzgebiet-tafel__sortierung input:checked + span::before { content: ""; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); }
.einsatzgebiet-tafel__sortierung input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.einsatzgebiet-tafel__huelle { overflow-x: auto; border-radius: 26px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie), 0 40px 80px -60px rgba(60, 40, 20, .5); }
.einsatzgebiet-tafel__huelle:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.einsatzgebiet-tafel table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 16px; }
.einsatzgebiet-tafel caption { padding: 22px 24px 4px; text-align: left; font: italic 400 22px/1.2 var(--serif); color: var(--tinte); }
.einsatzgebiet-tafel thead, .einsatzgebiet-tafel tbody, .einsatzgebiet-tafel tfoot { display: flex; flex-direction: column; }
.einsatzgebiet-tafel tr { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(7, minmax(0, 1fr)); align-items: stretch; }
.einsatzgebiet-tafel th, .einsatzgebiet-tafel td { position: relative; padding: 15px 16px; text-align: right; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.einsatzgebiet-tafel th:first-child { text-align: left; }
.einsatzgebiet-tafel thead th { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding-top: 18px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.25; color: var(--tinte); border-bottom: 1.5px solid var(--tinte); }
.einsatzgebiet-tafel thead th:first-child { align-items: flex-start; }
.einsatzgebiet-tafel thead small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--leise); }
.einsatzgebiet-tafel tbody th a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--bernstein); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.einsatzgebiet-tafel tbody th a img { width: 18px; height: 18px; }
.einsatzgebiet-tafel td { color: var(--leise); }
.einsatzgebiet-tafel__leer { font-size: 13px; font-style: italic; }
.einsatzgebiet-tafel tbody tr { transition: background .2s; }
.einsatzgebiet-tafel tbody tr:hover { background: rgba(244, 165, 58, .06); }
.einsatzgebiet-tafel__sitz th { background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0)); }
.einsatzgebiet-tafel tfoot tr { background: var(--creme); }
.einsatzgebiet-tafel tfoot th { font-weight: 700; color: var(--tinte); }
.einsatzgebiet-tafel tfoot th small { display: block; font-size: 12.5px; font-weight: 400; color: var(--leise); }
.einsatzgebiet-tafel tfoot tr:first-child > * { border-top: 1.5px solid var(--tinte); }
.einsatzgebiet-tafel tfoot tr:last-child > * { border-bottom: 0; }
/* Sortierung: Zeilen ordnen sich nach dem gewählten Rang, die Spalte leuchtet und zeigt Balken */
.einsatzgebiet-tafel:has(#eg-sort-1:checked) tbody tr { order: var(--r1); }
.einsatzgebiet-tafel:has(#eg-sort-2:checked) tbody tr { order: var(--r2); }
.einsatzgebiet-tafel:has(#eg-sort-3:checked) tbody tr { order: var(--r3); }
.einsatzgebiet-tafel:has(#eg-sort-4:checked) tbody tr { order: var(--r4); }
.einsatzgebiet-tafel:has(#eg-sort-5:checked) tbody tr { order: var(--r5); }
.einsatzgebiet-tafel:has(#eg-sort-1:checked) tr > :nth-child(2),
.einsatzgebiet-tafel:has(#eg-sort-2:checked) tr > :nth-child(3),
.einsatzgebiet-tafel:has(#eg-sort-3:checked) tr > :nth-child(4),
.einsatzgebiet-tafel:has(#eg-sort-4:checked) tr > :nth-child(5),
.einsatzgebiet-tafel:has(#eg-sort-5:checked) tr > :nth-child(8) { color: var(--tinte); font-weight: 700; background-color: rgba(244, 165, 58, .1); }
.einsatzgebiet-tafel:has(#eg-sort-1:checked) thead tr > :nth-child(2),
.einsatzgebiet-tafel:has(#eg-sort-2:checked) thead tr > :nth-child(3),
.einsatzgebiet-tafel:has(#eg-sort-3:checked) thead tr > :nth-child(4),
.einsatzgebiet-tafel:has(#eg-sort-4:checked) thead tr > :nth-child(5),
.einsatzgebiet-tafel:has(#eg-sort-5:checked) thead tr > :nth-child(8) { color: var(--bernstein-text); background: rgba(244, 165, 58, .16); }
.einsatzgebiet-tafel:has(#eg-sort-1:checked) tbody td:nth-child(2)::after,
.einsatzgebiet-tafel:has(#eg-sort-2:checked) tbody td:nth-child(3)::after,
.einsatzgebiet-tafel:has(#eg-sort-3:checked) tbody td:nth-child(4)::after,
.einsatzgebiet-tafel:has(#eg-sort-4:checked) tbody td:nth-child(5)::after,
.einsatzgebiet-tafel:has(#eg-sort-5:checked) tbody td:nth-child(8)::after { content: ""; position: absolute; right: 16px; bottom: 8px; width: calc((100% - 32px) * var(--w)); height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bernstein-licht), var(--bernstein-tief)); animation: einsatzgebiet-balken .7s var(--weich) both; transform-origin: right; }
@keyframes einsatzgebiet-balken { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) { .einsatzgebiet-tafel tbody tr { animation: aufbau .5s var(--weich) both; } }

/* Handy: jede Zeile eine Karte, Werte zweispaltig, sortierter Wert hervorgehoben */
@media (max-width: 760px) {
  .einsatzgebiet-tafel__sortierung legend { float: none; width: 100%; line-height: 1.2; margin-bottom: 4px; }
  .einsatzgebiet-tafel__sortierung span { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .einsatzgebiet-tafel__huelle { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .einsatzgebiet-tafel table { min-width: 0; }
  .einsatzgebiet-tafel caption { padding: 0 0 12px; }
  .einsatzgebiet-tafel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .einsatzgebiet-tafel tbody, .einsatzgebiet-tafel tfoot { gap: 10px; }
  .einsatzgebiet-tafel tfoot { margin-top: 10px; }
  .einsatzgebiet-tafel tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 16px 8px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
  .einsatzgebiet-tafel tfoot tr { background: var(--sand); }
  .einsatzgebiet-tafel tfoot tr:first-child > * { border-top: 0; }
  .einsatzgebiet-tafel th, .einsatzgebiet-tafel td { padding: 10px 0; text-align: left; border-bottom: 0; }
  .einsatzgebiet-tafel tbody th, .einsatzgebiet-tafel tfoot th { grid-column: 1 / -1; padding: 12px 0 8px; border-bottom: 1px solid var(--linie); font-size: 18px; }
  .einsatzgebiet-tafel td { display: grid; gap: 2px; font-size: 17px; color: var(--tinte); }
  .einsatzgebiet-tafel td::before { content: attr(data-titel); font-size: 12.5px; font-weight: 600; color: var(--leise); }
  .einsatzgebiet-tafel:has(#eg-sort-1:checked) tbody td:nth-child(2),
  .einsatzgebiet-tafel:has(#eg-sort-2:checked) tbody td:nth-child(3),
  .einsatzgebiet-tafel:has(#eg-sort-3:checked) tbody td:nth-child(4),
  .einsatzgebiet-tafel:has(#eg-sort-4:checked) tbody td:nth-child(5),
  .einsatzgebiet-tafel:has(#eg-sort-5:checked) tbody td:nth-child(8) { order: -1; grid-column: 1 / -1; margin: 8px -16px 4px; padding: 10px 16px 14px; font: italic 400 30px/1 var(--serif); }
  .einsatzgebiet-tafel tbody td::after { left: 16px; right: auto; width: calc((100% - 32px) * var(--w)) !important; transform-origin: left !important; }
  .einsatzgebiet-tafel tbody th { order: -2; }
}

/* ---------- Lesehilfe zur Tabelle (dunkle Karte) ---------- */
.einsatzgebiet-lesen { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: 24px 56px; margin-top: clamp(56px, 7vw, 96px); padding: clamp(28px, 4vw, 52px); border-radius: 30px; background: var(--espresso); color: var(--hell); }
.einsatzgebiet-lesen h3 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; }
.einsatzgebiet-lesen h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.einsatzgebiet-lesen dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.einsatzgebiet-lesen dl > div { padding: 18px 0; border-top: 1px solid var(--linie-dunkel); }
.einsatzgebiet-lesen dt { font: italic 400 23px/1.15 var(--serif); color: var(--bernstein-licht); }
.einsatzgebiet-lesen dd { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
@media (max-width: 900px) { .einsatzgebiet-lesen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .einsatzgebiet-lesen dl { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Termin vor Ort: Text und Anlässe als Stationen ---------- */
.einsatzgebiet-termin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--tinte); }
.einsatzgebiet-termin__text { display: grid; gap: 16px; justify-items: start; }
.einsatzgebiet-termin__text h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
.einsatzgebiet-termin__text h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.einsatzgebiet-termin__text p { font-size: 17px; line-height: 1.6; color: var(--leise); }
.einsatzgebiet-termin__anlaesse { counter-reset: a; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.einsatzgebiet-termin__anlaesse li { counter-increment: a; position: relative; display: grid; gap: 6px; min-height: 150px; align-content: end; padding: 22px; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
.einsatzgebiet-termin__anlaesse li::before { content: counter(a, upper-roman); position: absolute; right: 18px; top: 10px; font: italic 400 56px/1 var(--serif); color: rgba(138, 79, 0, .18); }
.einsatzgebiet-termin__anlaesse li:nth-child(2), .einsatzgebiet-termin__anlaesse li:nth-child(3) { background: var(--espresso); box-shadow: none; }
.einsatzgebiet-termin__anlaesse li:nth-child(2)::before, .einsatzgebiet-termin__anlaesse li:nth-child(3)::before { color: rgba(247, 187, 99, .3); }
.einsatzgebiet-termin__anlaesse b { font-size: 21px; line-height: 1.2; }
.einsatzgebiet-termin__anlaesse span { font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.einsatzgebiet-termin__anlaesse li:nth-child(2) b, .einsatzgebiet-termin__anlaesse li:nth-child(3) b { color: var(--bernstein-licht); }
.einsatzgebiet-termin__anlaesse li:nth-child(2) span, .einsatzgebiet-termin__anlaesse li:nth-child(3) span { color: var(--hell-leise); }
@media (max-width: 900px) { .einsatzgebiet-termin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .einsatzgebiet-termin__anlaesse { grid-template-columns: minmax(0, 1fr); } .einsatzgebiet-termin__anlaesse li { min-height: 0; } .einsatzgebiet-termin__anlaesse li:nth-child(3) { background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); } .einsatzgebiet-termin__anlaesse li:nth-child(3) b { color: var(--tinte); } .einsatzgebiet-termin__anlaesse li:nth-child(3) span { color: var(--leise); } .einsatzgebiet-termin__anlaesse li:nth-child(4) { background: var(--espresso); box-shadow: none; } .einsatzgebiet-termin__anlaesse li:nth-child(4) b { color: var(--bernstein-licht); } .einsatzgebiet-termin__anlaesse li:nth-child(4) span { color: var(--hell-leise); } }

/* ==========================================================================
   Ortsseite Elzach (H2, 17.10.2026)
   elzach-…  Talszene im Einstieg, Talkarte mit Regler für das Einzugsgebiet,
             Pendler entlang der Elztalbahn, Suchwege-Umschalter, Profil des Ortes.
   Gemeinsame ort-…-Klassen kommen aus orte.css. Nur Tokens aus :root, kein eigenes JavaScript
   (Regler über Radios mit :has und data-zaehlen, Reiter über data-reiter aus ares.js).
   ========================================================================== */

/* ---------- Talszene im Einstieg (ergänzt ort-szene-karte) ---------- */
.elzach-szene__berg { fill: rgba(246, 239, 230, .05); stroke: rgba(246, 239, 230, .12); stroke-width: 1.5; }

/* ---------- Talkarte mit Regler ---------- */
.elzach-tal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.elzach-tal__karte { position: relative; border-radius: 30px; overflow: hidden; background: radial-gradient(70% 60% at 60% 36%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 60%), var(--espresso); box-shadow: 0 40px 80px -46px rgba(28, 23, 19, .7), inset 0 0 0 1px rgba(246, 239, 230, .08); }
.elzach-tal__karte svg { display: block; width: 100%; height: auto; }
.elzach-tal__berg { fill: rgba(246, 239, 230, .045); }
.elzach-tal__fluss { fill: none; stroke: rgba(205, 191, 174, .3); stroke-width: 12; stroke-linecap: round; }
.elzach-tal__bahn { fill: none; stroke: var(--hell-leise); stroke-width: 3; stroke-dasharray: 10 8; opacity: .7; }
.elzach-tal__fluss-name { font: italic 400 22px var(--serif); fill: var(--hell-leise); }
.elzach-tal__bahn-name { font: 600 13px var(--grotesk); fill: var(--hell-leise); letter-spacing: .04em; }
.elzach-tal__weg { fill: none; stroke: var(--bernstein); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 7; opacity: 0; transition: opacity .5s; }
.elzach-tal__ort circle { fill: var(--espresso-3); stroke: var(--hell-leise); stroke-width: 2.5; transition: fill .4s, stroke .4s, r .4s; }
.elzach-tal__ort--teil circle { stroke-width: 3.5; }
.elzach-tal__ort text { font: 600 17px var(--grotesk); fill: var(--hell-leise); transition: fill .4s; }
.elzach-tal__ort--teil text:not(.elzach-tal__km) { font-weight: 700; fill: var(--hell); }
.elzach-tal__km { font: italic 400 16px var(--serif) !important; fill: var(--hell-leise); }
.elzach-tal__mitte circle:not(.elzach-tal__puls) { fill: var(--bernstein); }
.elzach-tal__puls { fill: rgba(244, 165, 58, .25); transform-box: fill-box; transform-origin: center; }
.elzach-tal__mitte text { font: 700 19px var(--grotesk); fill: var(--hell); }
@media (prefers-reduced-motion: no-preference) { .elzach-tal__puls { animation: ort-puls 2.4s ease-out infinite; } }
/* Stufen: ohne JavaScript über :has, mit JavaScript zusätzlich data-summe */
.elzach-tal:has(#umkreis-1:checked) .elzach-tal__weg--1,
.elzach-tal:has(#umkreis-2:checked) :is(.elzach-tal__weg--1, .elzach-tal__weg--2),
.elzach-tal:has(#umkreis-3:checked) .elzach-tal__weg { opacity: .9; }
.elzach-tal:has(#umkreis-1:checked) .elzach-tal__ort--1 circle,
.elzach-tal:has(#umkreis-2:checked) :is(.elzach-tal__ort--1, .elzach-tal__ort--2) circle,
.elzach-tal:has(#umkreis-3:checked) .elzach-tal__ort circle { fill: var(--bernstein); stroke: var(--bernstein-licht); }
.elzach-tal:has(#umkreis-1:checked) .elzach-tal__ort--1 text,
.elzach-tal:has(#umkreis-2:checked) :is(.elzach-tal__ort--1, .elzach-tal__ort--2) text,
.elzach-tal:has(#umkreis-3:checked) .elzach-tal__ort text { fill: var(--bernstein-licht); }
.elzach-tal__steuer { display: grid; gap: 26px; }
.elzach-regler { margin: 0; padding: 0; border: 0; min-width: 0; }
.elzach-regler legend { padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--leise); }
.elzach-regler__bahn { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.elzach-regler__bahn label { position: relative; z-index: 1; display: grid; place-items: center; min-height: 52px; border-radius: 999px; font: 600 16px/1 var(--grotesk); color: var(--leise); cursor: pointer; transition: color .3s; }
.elzach-regler__bahn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.elzach-regler__bahn label:has(input:checked) { color: var(--hell); }
.elzach-regler__bahn label:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.elzach-regler__knopf { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 999px; background: var(--espresso); box-shadow: 0 0 0 2px var(--bernstein), 0 10px 24px -10px rgba(28, 23, 19, .6); transition: transform .5s var(--weich); }
.elzach-regler__bahn:has(#umkreis-2:checked) .elzach-regler__knopf { transform: translateX(100%); }
.elzach-regler__bahn:has(#umkreis-3:checked) .elzach-regler__knopf { transform: translateX(200%); }
.elzach-tal__ergebnis { display: grid; gap: 16px; justify-items: start; }
.elzach-tal__ergebnis > div { display: grid; gap: 12px; }
.elzach-tal__ergebnis > div[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .elzach-tal__ergebnis > div:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.elzach-tal__ergebnis h3 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.15; }
.elzach-tal__ergebnis h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.elzach-tal__ergebnis p { font-size: 17px; line-height: 1.6; color: var(--leise); }
.elzach-tal__flaeche { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--tinte); }
.elzach-tal__flaeche div { display: grid; gap: 2px; padding: 16px 16px 0 0; }
.elzach-tal__flaeche div + div { padding-left: 20px; border-left: 1px solid var(--linie); }
.elzach-tal__flaeche dt { font-size: 14px; color: var(--leise); }
.elzach-tal__flaeche dd { margin: 0; display: grid; font: italic 400 clamp(34px, 3.4vw, 46px)/1 var(--serif); color: var(--bernstein-text); }
.elzach-tal__flaeche small { font: 400 13.5px/1.4 var(--grotesk); color: var(--leise); }
@media (max-width: 960px) { .elzach-tal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .elzach-tal__ort text { font-size: 25px; }
  .elzach-tal__km { font-size: 23px !important; }
  .elzach-tal__mitte text { font-size: 24px; }
  .elzach-tal__karte { border-radius: 22px; }
  .elzach-regler__bahn label { font-size: 15px; }
}

/* ---------- Pendler entlang der Elztalbahn ---------- */
.elzach-bahn__abschnitt { overflow-x: clip; }
.elzach-bahn { display: grid; gap: clamp(28px, 4vw, 44px); }
.elzach-bahn__strecke { position: relative; height: 92px; margin: 0 8px; }
.elzach-bahn__strecke::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--hell-leise) 0 26px, transparent 26px 34px); opacity: .55; }
.elzach-bahn__halt { position: absolute; left: var(--pos, 0%); top: 0; display: grid; justify-items: center; grid-template-rows: 30px 22px auto; transform: translateX(-50%); text-align: center; }
.elzach-bahn__halt::before { content: ""; grid-row: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 3px var(--hell-leise); }
.elzach-bahn__halt b { grid-row: 1; align-self: end; font-size: 16px; font-weight: 600; white-space: nowrap; }
.elzach-bahn__halt small { grid-row: 3; font: italic 400 16px/1.3 var(--serif); color: var(--hell-leise); }
.elzach-bahn__halt--start { transform: none; justify-items: start; }
.elzach-bahn__halt--start::before { width: 26px; height: 26px; margin-top: -5px; background: var(--bernstein); box-shadow: 0 0 0 6px rgba(244, 165, 58, .25), 0 0 30px rgba(244, 165, 58, .7); }
.elzach-bahn__halt--start b { font: italic 400 28px/1 var(--serif); color: var(--bernstein-licht); }
.elzach-bahn__halt--ende { left: 100%; transform: translateX(-100%); justify-items: end; }
.elzach-bahn__zug { position: absolute; top: 34px; left: 0; width: 44px; height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 20px rgba(244, 165, 58, .6); }
@media (prefers-reduced-motion: no-preference) {
  .elzach-bahn[data-aktiv="0"] .elzach-bahn__zug { animation: elzach-ab 5s var(--weich) infinite; }
  .elzach-bahn[data-aktiv="1"] .elzach-bahn__zug { animation: elzach-auf 5s var(--weich) infinite; }
  .elzach-bahn[data-aktiv="2"] .elzach-bahn__zug { animation: elzach-bleibt 2.4s ease-in-out infinite; }
}
@keyframes elzach-ab { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 44px); opacity: 0; } }
@keyframes elzach-auf { 0% { left: calc(100% - 44px); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes elzach-bleibt { 0%, 100% { left: 0; } 50% { left: 6%; } }
.elzach-bahn__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 24px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.elzach-bahn__wahl button { display: grid; gap: 4px; justify-items: start; min-height: 88px; padding: 14px 20px; border: 0; border-radius: 18px; background: none; color: var(--hell-leise); font: 600 15px/1.2 var(--grotesk); text-align: left; cursor: pointer; transition: background .3s, color .3s; }
.elzach-bahn__wahl button b { font: italic 400 clamp(36px, 3.6vw, 50px)/1 var(--serif); color: var(--hell); }
.elzach-bahn__wahl button[aria-selected="true"] { background: var(--hell); color: var(--leise); }
.elzach-bahn__wahl button[aria-selected="true"] b { color: var(--bernstein-text); }
.elzach-bahn__felder { display: grid; }
.elzach-bahn__feld { grid-area: 1 / 1; display: grid; gap: 16px; justify-items: start; max-width: 860px; }
.elzach-bahn__feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .elzach-bahn__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.elzach-bahn__feld h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.elzach-bahn__feld p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
@media (max-width: 640px) {
  .elzach-bahn__wahl { grid-template-columns: minmax(0, 1fr); }
  .elzach-bahn__wahl button { grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; min-height: 60px; }
  .elzach-bahn__halt b { font-size: 13px; }
  .elzach-bahn__halt small { font-size: 14px; }
  .elzach-bahn__halt--start b { font-size: 22px; }
}

/* ---------- Suchwege-Umschalter ---------- */
.elzach-wege { display: grid; gap: clamp(24px, 3.4vw, 40px); }
.elzach-wege__wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.elzach-wege__wahl button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: 600 16px/1 var(--grotesk); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.elzach-wege__wahl button:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.elzach-wege__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell); box-shadow: 0 0 0 2px var(--bernstein); }
.elzach-wege__felder { display: grid; }
.elzach-wege__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.elzach-wege__feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .elzach-wege__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.elzach-wege__suche { position: relative; display: flex; align-items: center; gap: 14px; min-height: 120px; padding: 0 clamp(22px, 3vw, 36px); border-radius: 28px; background: radial-gradient(90% 120% at 90% 0%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 60%), var(--espresso); color: var(--hell); font: italic 400 clamp(24px, 2.6vw, 34px)/1.15 var(--serif); box-shadow: 0 30px 60px -40px rgba(28, 23, 19, .7); }
.elzach-wege__suche::after { content: ""; width: 2px; height: 1.1em; margin-left: -6px; background: var(--bernstein); }
@media (prefers-reduced-motion: no-preference) { .elzach-wege__suche::after { animation: elzach-blinken 1s steps(1) infinite; } }
@keyframes elzach-blinken { 50% { opacity: 0; } }
.elzach-wege__suche .symbol { flex: none; width: 26px; height: 26px; color: var(--bernstein-licht); }
.elzach-wege__suche--feed { border-radius: 28px 28px 28px 6px; }
.elzach-wege__text { display: grid; gap: 14px; justify-items: start; }
.elzach-wege__text h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.elzach-wege__text h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.elzach-wege__text p { font-size: 17px; line-height: 1.6; color: var(--leise); }
@media (max-width: 900px) { .elzach-wege__feld { grid-template-columns: minmax(0, 1fr); } .elzach-wege__suche { min-height: 96px; } }
@media (max-width: 560px) { .elzach-wege__wahl button { padding: 0 16px; min-height: 46px; font-size: 15px; } }

/* ---------- Profil des Ortes ---------- */
.elzach-profil { display: grid; border-top: 1px solid var(--tinte); }
.elzach-profil > li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) auto; gap: 16px 48px; align-items: center; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--linie); }
.elzach-profil__wort { font: italic 400 clamp(56px, 7vw, 104px)/.9 var(--serif); color: var(--bernstein-text); letter-spacing: -.02em; }
.elzach-profil > li > div { display: grid; gap: 10px; }
.elzach-profil h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; }
.elzach-profil p:not(.elzach-profil__wort) { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 42em; }
.elzach-profil > li:hover .elzach-profil__wort { color: var(--bernstein-tief); }
@media (max-width: 1000px) { .elzach-profil > li { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* ==========================================================================
   Ortsseite Endingen am Kaiserstuhl (H2, 17.10.2026)
   endingen-…  Umschalter Gast/Nachbar mit Suchkarte, Saisonband mit Schieber,
               Doppelrolle Wein/Werk mit Zentralität, Hürden zum Aufklappen.
   Gemeinsame ort-…-Klassen kommen aus orte.css. Nur Tokens aus :root, kein eigenes JavaScript.
   ========================================================================== */

/* ---------- Umschalter: Kaiserstuhl oder Endingen ---------- */
.endingen-sicht { display: grid; gap: clamp(28px, 4vw, 48px); }
.endingen-sicht__schalter { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 760px; padding: 8px; border-radius: 28px; background: var(--espresso); box-shadow: 0 30px 60px -36px rgba(28, 23, 19, .6); }
.endingen-sicht__gleiter { position: absolute; top: 8px; bottom: 8px; left: 8px; width: calc(50% - 8px); border-radius: 22px; background: var(--hell); box-shadow: 0 0 0 2px var(--bernstein), 0 10px 30px -10px rgba(244, 165, 58, .6); transform: translateX(calc(var(--aktiv, 0) * 100%)); transition: transform .55s var(--weich); }
.endingen-sicht__schalter button { position: relative; z-index: 1; display: grid; gap: 2px; min-height: 76px; padding: 12px 22px; border: 0; border-radius: 22px; background: none; color: var(--hell-leise); text-align: left; font: 400 14px/1.3 var(--grotesk); cursor: pointer; transition: color .35s; }
.endingen-sicht__schalter button b { font: 600 clamp(19px, 1.8vw, 23px)/1.2 var(--grotesk); color: var(--hell); transition: color .35s; }
.endingen-sicht__schalter button[aria-selected="true"] { color: var(--leise); }
.endingen-sicht__schalter button[aria-selected="true"] b { color: var(--tinte); }
.endingen-sicht__felder { display: grid; }
.endingen-sicht__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.endingen-sicht__feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .endingen-sicht__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.endingen-sicht__text { display: grid; gap: 16px; justify-items: start; }
.endingen-sicht__text h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.endingen-sicht__text h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.endingen-sicht__text > p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 36em; }
.endingen-sicht__liste { counter-reset: s; display: grid; width: 100%; border-top: 1px solid var(--tinte); }
.endingen-sicht__liste li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 17px; line-height: 1.45; }
.endingen-sicht__liste li::before { content: counter(s, upper-roman); font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-text); }

/* Suchkarte (dunkle Glasfläche mit Treffern) */
.endingen-suche { position: relative; display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 30px); border-radius: 26px; background: radial-gradient(120% 90% at 85% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 55%), var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -44px rgba(28, 23, 19, .7), inset 0 0 0 1px rgba(246, 239, 230, .08); transform: rotate(-1.2deg); }
.endingen-sicht__feld + .endingen-sicht__feld .endingen-suche { transform: rotate(1.2deg); }
.endingen-suche__zeile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--hell); color: var(--tinte); font-size: 17px; font-weight: 600; }
.endingen-suche__zeile .symbol { width: 18px; height: 18px; color: var(--bernstein-tief); }
.endingen-suche__treffer { display: grid; gap: 10px; }
.endingen-suche__treffer li { display: grid; gap: 2px; padding: 13px 18px; border-radius: 16px; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.endingen-suche__treffer b { font-size: 16.5px; font-weight: 600; }
.endingen-suche__treffer span { font-size: 14px; color: var(--hell-leise); }
.endingen-suche__sie { background: rgba(244, 165, 58, .16) !important; box-shadow: inset 0 0 0 1.5px var(--bernstein), 0 0 30px rgba(244, 165, 58, .25) !important; }
.endingen-suche__sie b { color: var(--bernstein-licht); }
.endingen-suche__hinweis { justify-self: end; font-size: 12.5px; color: var(--hell-leise); }
@media (max-width: 900px) {
  .endingen-sicht__feld { grid-template-columns: minmax(0, 1fr); }
  .endingen-suche, .endingen-sicht__feld + .endingen-sicht__feld .endingen-suche { transform: none; }
}
@media (max-width: 560px) {
  .endingen-sicht__schalter { border-radius: 22px; padding: 6px; }
  .endingen-sicht__gleiter { top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 17px; }
  .endingen-sicht__schalter button { min-height: 70px; padding: 10px 12px; font-size: 12.5px; border-radius: 17px; }
  .endingen-sicht__schalter button b { font-size: 17px; }
}

/* ---------- Saisonband mit Schieber ---------- */
.endingen-saison__abschnitt { overflow-x: clip; }
.endingen-saison { display: grid; gap: 0; }
.endingen-saison__band { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; border-radius: 24px 24px 0 0; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.endingen-saison__schieber { position: absolute; top: 8px; bottom: 8px; left: 8px; width: calc((100% - 16px) / 4); border-radius: 18px; background: var(--bernstein); box-shadow: 0 0 40px rgba(244, 165, 58, .45); transform: translateX(calc(var(--aktiv, 1) * 100%)); transition: transform .6s var(--weich); }
.endingen-saison__band button { position: relative; z-index: 1; display: grid; gap: 2px; min-height: 72px; padding: 12px 14px; border: 0; border-radius: 18px; background: none; color: var(--hell-leise); font: 400 13.5px/1.25 var(--grotesk); text-align: left; cursor: pointer; transition: color .3s; }
.endingen-saison__band button b { font: italic 400 clamp(24px, 2.4vw, 32px)/1 var(--serif); color: var(--hell); transition: color .3s; }
.endingen-saison__band button[aria-selected="true"], .endingen-saison__band button[aria-selected="true"] b { color: var(--espresso); }
.endingen-saison__kurve { position: relative; height: 96px; margin-bottom: clamp(28px, 4vw, 44px); border-radius: 0 0 24px 24px; background: linear-gradient(to bottom, rgba(246, 239, 230, .04), rgba(246, 239, 230, 0)); box-shadow: inset 0 0 0 1px var(--linie-dunkel); overflow: hidden; }
.endingen-saison__kurve svg { position: absolute; inset: 10px 0 0; width: 100%; height: calc(100% - 10px); }
.endingen-saison__flaeche { fill: rgba(244, 165, 58, .14); }
.endingen-saison__linie { fill: none; stroke: var(--bernstein-licht); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.endingen-saison__kurve span { position: absolute; left: 16px; top: 10px; font-size: 12.5px; color: var(--hell-leise); }
.endingen-saison__kurve::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--aktiv, 1) * 25%); width: 25%; background: linear-gradient(to bottom, rgba(244, 165, 58, .22), rgba(244, 165, 58, 0)); transition: left .6s var(--weich); }
.endingen-saison { --aktiv: 1; }
.endingen-saison__felder { display: grid; }
.endingen-saison__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.6fr); gap: 20px 64px; align-items: start; }
.endingen-saison__feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .endingen-saison__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.endingen-saison__stufe { display: grid; gap: 4px; font-size: 15px; color: var(--hell-leise); }
.endingen-saison__stufe b { font: italic 400 clamp(52px, 6vw, 84px)/.95 var(--serif); color: var(--bernstein-licht); }
.endingen-saison__feld > div { display: grid; gap: 16px; justify-items: start; }
.endingen-saison__feld h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.endingen-saison__feld p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); max-width: 40em; }
@media (max-width: 900px) { .endingen-saison__feld { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .endingen-saison__band { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .endingen-saison__schieber { width: calc((100% - 16px) / 2); height: calc((100% - 16px) / 2); bottom: auto; }
  .endingen-saison[data-aktiv="0"] .endingen-saison__schieber { transform: translate(0, 0); }
  .endingen-saison[data-aktiv="1"] .endingen-saison__schieber { transform: translate(100%, 0); }
  .endingen-saison[data-aktiv="2"] .endingen-saison__schieber { transform: translate(0, 100%); }
  .endingen-saison[data-aktiv="3"] .endingen-saison__schieber { transform: translate(100%, 100%); }
  .endingen-saison__band button { min-height: 64px; }
}

/* ---------- Doppelrolle: Wein und Werk ---------- */
.endingen-doppel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(28, 23, 19, .55); }
.endingen-doppel__seite { position: relative; display: grid; gap: 16px; align-content: start; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(120px, 12vw, 150px); }
.endingen-doppel__seite--wein { background: var(--creme); }
.endingen-doppel__seite--werk { background: var(--espresso); color: var(--hell); }
.endingen-doppel__wort { font: italic 400 clamp(72px, 9vw, 128px)/.8 var(--serif); color: var(--bernstein-text); letter-spacing: -.02em; }
.endingen-doppel__seite--werk .endingen-doppel__wort { color: var(--bernstein-licht); }
.endingen-doppel__seite h3 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.15; }
.endingen-doppel__seite h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.endingen-doppel__seite--werk h3 em { color: var(--bernstein-licht); }
.endingen-doppel__seite > p:not(.endingen-doppel__wort) { font-size: 17px; line-height: 1.6; color: var(--leise); }
.endingen-doppel__seite--werk > p:not(.endingen-doppel__wort) { color: var(--hell-leise); }
.endingen-doppel__fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding-top: 16px; border-top: 1px solid var(--tinte); }
.endingen-doppel__seite--werk .endingen-doppel__fakten { border-top-color: var(--bernstein); }
.endingen-doppel__fakten li { display: grid; gap: 2px; }
.endingen-doppel__fakten b { font: italic 400 26px/1.05 var(--serif); }
.endingen-doppel__fakten span { font-size: 14px; color: var(--leise); }
.endingen-doppel__seite--werk .endingen-doppel__fakten span { color: var(--hell-leise); }
.endingen-doppel__mitte { position: absolute; left: 50%; bottom: clamp(20px, 2.4vw, 28px); transform: translateX(-50%); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; width: min(720px, calc(100% - 48px)); padding: 16px 22px; border-radius: 22px; background: var(--hell); color: var(--tinte); box-shadow: 0 0 0 2px var(--bernstein), 0 24px 50px -20px rgba(28, 23, 19, .55); }
.endingen-doppel__zahl { display: grid; text-align: center; }
.endingen-doppel__zahl b { font: italic 400 48px/1 var(--serif); color: var(--bernstein-text); }
.endingen-doppel__zahl span { font-size: 12px; color: var(--leise); }
.endingen-doppel__mitte figcaption { font-size: 13.5px; line-height: 1.45; color: var(--leise); }
@media (max-width: 900px) {
  .endingen-doppel { grid-template-columns: minmax(0, 1fr); }
  .endingen-doppel__seite { padding-bottom: clamp(28px, 4vw, 56px); }
  .endingen-doppel__mitte { position: static; transform: none; width: auto; margin: 0; border-radius: 0; box-shadow: inset 0 3px 0 var(--bernstein); }
}
@media (max-width: 480px) { .endingen-doppel__mitte { grid-template-columns: minmax(0, 1fr); text-align: left; } .endingen-doppel__zahl { text-align: left; } }

/* ---------- Hürden zum Aufklappen ---------- */
.endingen-huerden__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 40px 80px; align-items: start; }
.endingen-huerden__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); display: grid; gap: 22px; justify-items: start; }
.endingen-huerden__kopf h2 { font-size: clamp(34px, 4vw, 54px); }
.endingen-huerden__kopf p { font-size: 19px; line-height: 1.55; color: var(--leise); max-width: 26em; }
.endingen-huerden { display: grid; gap: 14px; }
.endingen-huerde { border-radius: 22px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); transition: background .3s, box-shadow .3s; }
.endingen-huerde[open] { background: var(--espresso); color: var(--hell); box-shadow: 0 30px 60px -40px rgba(28, 23, 19, .6); }
.endingen-huerde summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 16px; align-items: center; min-height: 76px; padding: 16px 22px; cursor: pointer; list-style: none; }
.endingen-huerde summary::-webkit-details-marker { display: none; }
.endingen-huerde summary::after { content: ""; width: 14px; height: 14px; border-right: 2px solid var(--bernstein-tief); border-bottom: 2px solid var(--bernstein-tief); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s; }
.endingen-huerde[open] summary::after { transform: rotate(225deg); border-color: var(--bernstein-licht); }
.endingen-huerde summary b { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; font-weight: 600; }
.endingen-huerde__nr { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); font: italic 400 22px/1 var(--serif); color: var(--bernstein-text); }
.endingen-huerde[open] .endingen-huerde__nr { background: var(--bernstein); color: var(--espresso); box-shadow: 0 0 24px rgba(244, 165, 58, .5); }
.endingen-huerde__inhalt { display: grid; gap: 16px; padding: 0 22px 24px 90px; }
.endingen-huerde__inhalt > p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
.endingen-huerde__weg { display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; background: rgba(244, 165, 58, .12); box-shadow: inset 3px 0 0 var(--bernstein); color: var(--hell) !important; }
.endingen-huerde__weg b { font: italic 400 20px/1.1 var(--serif); color: var(--bernstein-licht); }
@media (max-width: 900px) { .endingen-huerden__raster { grid-template-columns: minmax(0, 1fr); } .endingen-huerden__kopf { position: static; } }
@media (max-width: 560px) {
  .endingen-huerde summary { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; padding: 14px 16px; }
  .endingen-huerde__nr { width: 40px; height: 40px; font-size: 18px; }
  .endingen-huerde__inhalt { padding: 0 16px 20px; }
}

/* ==========================================================================
   Ortsseite Freiburg (17.10.2026)
   freiburg-…  nur Freiburg: ehrliche Waage „Passen wir zusammen?“ (Zähler mit Plus- und Minuspunkten),
               Stadtteil-Schalter „Gedränge“, Arbeitsplätze als Feld aus 100 Teilen.
   Gemeinsame ort-… Klassen liegen in orte.css (nur lesen). Nur Tokens aus :root, kein eigenes JavaScript
   (data-zaehlen setzt --summe, data-reiter setzt data-aktiv).
   ========================================================================== */

/* ---------- Einstieg: Ortsmarke mobil kompakter ---------- */
@media (max-width: 760px) { .einstieg .freiburg-ortsmarke { margin-top: 4px; } .einstieg .freiburg-ortsmarke b { font-size: 19px; } }

/* ---------- Ehrliche Waage ---------- */
.freiburg-waage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.freiburg-waage__aussagen { display: grid; gap: 10px; }
.freiburg-waage__gruppe { margin-bottom: 4px; font: italic 400 22px/1.2 var(--serif); color: var(--bernstein-text); }
.freiburg-waage__punkt { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 60px; padding: 12px 18px 12px 14px; border-radius: 18px; background: var(--creme); font-size: 16.5px; line-height: 1.4; cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s var(--weich); }
.freiburg-waage__punkt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.freiburg-waage__haken { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); transition: background .3s; }
.freiburg-waage__haken svg { width: 18px; height: 18px; fill: none; stroke: var(--espresso); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.freiburg-waage__punkt:hover { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.freiburg-waage__punkt:has(input:focus-visible) { outline: 3px solid var(--bernstein); outline-offset: 2px; }
.freiburg-waage__punkt:has(input:checked) { background: var(--espresso); color: var(--hell); transform: translateX(4px); }
.freiburg-waage__punkt:has(input:checked) .freiburg-waage__haken { background: var(--bernstein); box-shadow: none; }
.freiburg-waage__punkt:has(input:checked) .freiburg-waage__haken svg { opacity: 1; }
.freiburg-waage__stand { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 22px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: radial-gradient(70% 60% at 50% 30%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 70%), var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -40px rgba(28, 23, 19, .6); }
.freiburg-waage__bild { position: relative; height: 230px; }
.freiburg-waage__balken { --neigung: calc(max(-5, min(5, var(--summe, 0))) * -2.6deg); position: absolute; left: 14%; right: 14%; top: 34%; z-index: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--bernstein), var(--bernstein-licht) 50%, var(--hell-leise)); transform: rotate(var(--neigung)); transition: transform .9s var(--weich); }
.freiburg-waage__balken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 3px var(--bernstein); }
.freiburg-waage__schale { position: absolute; top: 3px; display: grid; justify-items: center; gap: 2px; width: 130px; padding-top: 62px; transform: translateX(-50%) rotate(calc(var(--neigung) * -1)); transform-origin: top center; transition: transform .9s var(--weich); }
.freiburg-waage__schale::before { content: ""; position: absolute; left: 50%; top: 0; width: 70%; height: 56px; transform: translateX(-50%); background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--hell-leise) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), var(--hell-leise) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; opacity: .55; }
.freiburg-waage__schale::after { content: ""; position: absolute; left: 0; right: 0; top: 56px; height: 8px; border-radius: 0 0 999px 999px; background: var(--hell-leise); opacity: .5; transition: background .4s, opacity .4s; }
.freiburg-waage__schale--ares { left: 0; }
.freiburg-waage__schale--andere { left: 100%; }
.freiburg-waage__schale b { margin-top: 10px; font: italic 400 30px/1 var(--serif); color: var(--hell); transition: color .4s; }
.freiburg-waage__schale span { font-size: 13.5px; color: var(--hell-leise); }
.freiburg-waage[data-summe]:not([data-summe="0"]):not([data-summe^="-"]) .freiburg-waage__schale--ares b { color: var(--bernstein-licht); }
.freiburg-waage[data-summe]:not([data-summe="0"]):not([data-summe^="-"]) .freiburg-waage__schale--ares::after { background: var(--bernstein); opacity: 1; }
.freiburg-waage[data-summe^="-"] .freiburg-waage__schale--andere b { color: var(--bernstein-licht); }
.freiburg-waage[data-summe^="-"] .freiburg-waage__schale--andere::after { background: var(--bernstein); opacity: 1; }
.freiburg-waage__fuss { position: absolute; left: 50%; top: calc(34% + 3px); bottom: 0; width: 150px; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(244, 165, 58, .06), rgba(244, 165, 58, .3)); }
.freiburg-waage__ergebnis { display: grid; min-height: 180px; padding-top: 18px; border-top: 1px solid var(--linie-dunkel); }
.freiburg-waage__ergebnis > div { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; justify-items: start; }
.freiburg-waage__ergebnis > div[hidden] { display: none; }
.freiburg-waage__ergebnis b { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.freiburg-waage__ergebnis p { font-size: 16.5px; line-height: 1.55; color: var(--hell-leise); }
.freiburg-waage__ergebnis .knopf--dunkel { background: var(--hell); color: var(--tinte); }
@media (prefers-reduced-motion: no-preference) { .freiburg-waage__ergebnis > div:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
@media (max-width: 900px) { .freiburg-waage { grid-template-columns: minmax(0, 1fr); } .freiburg-waage__stand { position: static; } }
@media (max-width: 560px) {
  .freiburg-waage__punkt { font-size: 15.5px; padding: 10px 14px 10px 10px; }
  .freiburg-waage__bild { height: 200px; }
  .freiburg-waage__schale { width: 100px; }
  .freiburg-waage__schale b { font-size: 24px; }
  .freiburg-waage__fuss { width: 110px; }
}

/* ---------- Stadtteil-Schalter: Gedränge ---------- */
.freiburg-gedraenge { display: grid; gap: 22px; }
.freiburg-gedraenge__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 24px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.freiburg-gedraenge__wahl button { display: grid; gap: 4px; align-content: center; min-height: 74px; padding: 12px 18px; border: 0; border-radius: 18px; background: none; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; transition: background .3s, color .3s; }
.freiburg-gedraenge__wahl small { font-size: 13px; color: var(--leise); }
.freiburg-gedraenge__wahl b { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.25; }
.freiburg-gedraenge__wahl b::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bernstein-tief); background: radial-gradient(circle, transparent 3px, transparent 3px); }
.freiburg-gedraenge__wahl button:hover { background: rgba(244, 165, 58, .1); }
.freiburg-gedraenge__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell); }
.freiburg-gedraenge__wahl button[aria-selected="true"] small { color: var(--hell-leise); }
.freiburg-gedraenge__wahl button[aria-selected="true"] b::before { box-shadow: inset 0 0 0 2px var(--bernstein-licht), 0 0 0 4px rgba(244, 165, 58, .2); background: var(--bernstein); }
.freiburg-gedraenge__buehne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.freiburg-gedraenge__feld-bild { position: relative; display: grid; gap: 22px; padding: clamp(20px, 2.6vw, 32px); border-radius: 28px; background: var(--espresso); box-shadow: 0 40px 80px -40px rgba(28, 23, 19, .55), inset 0 0 0 1px rgba(246, 239, 230, .08); }
.freiburg-gedraenge__podest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.freiburg-gedraenge__podest i { display: grid; place-items: center; height: 54px; border-radius: 14px; background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .4); font: italic 400 26px/1 var(--serif); color: var(--bernstein-licht); }
.freiburg-gedraenge__menge { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.freiburg-gedraenge__menge i { aspect-ratio: 1; border-radius: 50%; background: rgba(246, 239, 230, .55); transition: opacity .6s var(--weich), transform .6s var(--weich), background .4s; transition-delay: calc(var(--n, 0) * 6ms); }
.freiburg-gedraenge__menge i.freiburg-gedraenge__sie { background: var(--bernstein-licht); box-shadow: 0 0 0 3px rgba(244, 165, 58, .3); }
.freiburg-gedraenge[data-aktiv="1"] .freiburg-gedraenge__menge i:not(.freiburg-gedraenge__sie):nth-child(n+10) { opacity: .1; transform: scale(.55); }
.freiburg-gedraenge[data-aktiv="2"] .freiburg-gedraenge__menge i:not(.freiburg-gedraenge__sie):nth-child(n+3) { opacity: .1; transform: scale(.55); }
.freiburg-gedraenge[data-aktiv="2"] .freiburg-gedraenge__sie { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(244, 165, 58, .35), 0 0 22px rgba(244, 165, 58, .8); }
.freiburg-gedraenge[data-aktiv="2"] .freiburg-gedraenge__podest i:first-child { background: var(--bernstein); color: var(--espresso); }
.freiburg-gedraenge__felder { display: grid; }
.freiburg-gedraenge__feld { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; }
.freiburg-gedraenge__feld[hidden] { display: none; }
.freiburg-gedraenge__feld h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.freiburg-gedraenge__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.freiburg-gedraenge__feld p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 34em; }
@media (prefers-reduced-motion: no-preference) { .freiburg-gedraenge__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.freiburg-gedraenge__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 22px; }
.freiburg-gedraenge__fuss .ort-quelle { margin-top: 0; }
@media (max-width: 900px) { .freiburg-gedraenge__buehne { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .freiburg-gedraenge__wahl { grid-template-columns: minmax(0, 1fr); }
  .freiburg-gedraenge__wahl button { min-height: 60px; }
  .freiburg-gedraenge__menge { gap: 7px; }
  .freiburg-gedraenge__podest i { height: 44px; font-size: 22px; }
}

/* ---------- Arbeitsplätze als Feld aus 100 Teilen ---------- */
.freiburg-pendel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text bild" "quelle quelle"; gap: 28px clamp(36px, 6vw, 96px); align-items: center; }
.freiburg-pendel__text { grid-area: text; display: grid; gap: 18px; justify-items: start; }
.freiburg-pendel__text h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; }
.freiburg-pendel__text > p { font-size: 18px; line-height: 1.55; color: var(--hell-leise); max-width: 32em; }
.freiburg-pendel__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 480px; padding: 6px; border-radius: 22px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.freiburg-pendel__wahl button { display: grid; gap: 2px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px; background: none; color: var(--hell-leise); font: 600 14px/1.2 var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.freiburg-pendel__wahl button b { font: italic 400 26px/1 var(--serif); color: var(--hell); }
.freiburg-pendel__wahl button[aria-selected="true"] { background: var(--hell); color: var(--tinte); }
.freiburg-pendel__wahl button[aria-selected="true"] b { color: var(--bernstein-text); }
.freiburg-pendel__feld { display: grid; gap: 14px; justify-items: start; }
.freiburg-pendel__feld[hidden] { display: none; }
.freiburg-pendel__feld h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.16; }
.freiburg-pendel__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.freiburg-pendel__feld p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
@media (prefers-reduced-motion: no-preference) { .freiburg-pendel__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.freiburg-pendel__bild { grid-area: bild; display: grid; gap: 16px; justify-self: center; width: 100%; max-width: 480px; }
.freiburg-pendel__raster { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.freiburg-pendel__raster i { aspect-ratio: 1; border-radius: 6px; background: rgba(246, 239, 230, .1); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); transition: background .5s, box-shadow .5s; }
.freiburg-pendel[data-aktiv="0"] .freiburg-pendel__raster i:nth-child(-n+53) { background: linear-gradient(160deg, var(--bernstein-licht), var(--bernstein-tief)); box-shadow: 0 0 14px -4px rgba(244, 165, 58, .7); }
.freiburg-pendel[data-aktiv="1"] .freiburg-pendel__raster i:nth-child(n+54) { background: var(--hell); box-shadow: none; }
.freiburg-pendel__zahl { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--hell-leise); }
.freiburg-pendel__zahl b { font: italic 400 36px/1 var(--serif); color: var(--hell); }
.freiburg-pendel__quelle { grid-area: quelle; }
@media (max-width: 900px) { .freiburg-pendel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild" "quelle"; } }
@media (max-width: 560px) { .freiburg-pendel__raster { gap: 5px; } .freiburg-pendel__raster i { border-radius: 4px; } }

/* ==========================================================================
   Ortsseite Herbolzheim (H2, 17.10.2026)
   herbolzheim-…  Einpendler-Vergleich mit drei Ansichten, Achse an der A 5,
                  Betriebsarten-Wähler (vier Arten), Zentralitäts-Pegel.
   Gemeinsame ort-…-Klassen kommen aus orte.css. Nur Tokens aus :root, kein eigenes JavaScript.
   ========================================================================== */

/* ---------- Einpendler: drei Ansichten ---------- */
.herbolzheim-pendler { display: grid; gap: clamp(28px, 4vw, 44px); }
.herbolzheim-pendler__wahl { display: inline-grid; grid-auto-flow: column; justify-self: start; gap: 4px; padding: 5px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.herbolzheim-pendler__wahl button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--leise); font: 600 16px/1 var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.herbolzheim-pendler__wahl button:hover { color: var(--tinte); }
.herbolzheim-pendler__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell); box-shadow: 0 8px 20px -10px rgba(28, 23, 19, .6); }
.herbolzheim-pendler__felder { display: grid; }
.herbolzheim-pendler__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.herbolzheim-pendler__feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .herbolzheim-pendler__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.herbolzheim-pendler__text { display: grid; gap: 16px; justify-items: start; }
.herbolzheim-pendler__text h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.herbolzheim-pendler__text h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.herbolzheim-pendler__text p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 34em; }

.herbolzheim-balken { display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -48px rgba(28, 23, 19, .7); }
.herbolzheim-balken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name zahl" "balken balken"; gap: 6px 14px; align-items: baseline; }
.herbolzheim-balken span { grid-area: name; font-size: 15px; color: var(--hell-leise); }
.herbolzheim-balken b { grid-area: zahl; font: italic 400 24px/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--hell); }
.herbolzheim-balken i { grid-area: balken; display: block; height: 10px; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, rgba(246, 239, 230, .18), rgba(246, 239, 230, .34)); transform-origin: left; }
.herbolzheim-balken__hier span { color: var(--hell); font-weight: 600; }
.herbolzheim-balken__hier b { color: var(--bernstein-licht); font-size: 34px; }
.herbolzheim-balken__hier i { height: 14px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 24px rgba(244, 165, 58, .45); }
@media (prefers-reduced-motion: no-preference) { .herbolzheim-pendler__feld:not([hidden]) .herbolzheim-balken i { animation: herbolzheim-wachsen 1s var(--weich) both; } }
@keyframes herbolzheim-wachsen { from { transform: scaleX(0); } to { transform: none; } }

.herbolzheim-anteil { display: flex; height: clamp(150px, 16vw, 210px); border-radius: 26px; overflow: hidden; background: var(--espresso); box-shadow: 0 40px 80px -48px rgba(28, 23, 19, .7); }
.herbolzheim-anteil__teil { flex: 0 0 var(--w); display: flex; align-items: flex-end; padding: 18px 20px; }
.herbolzheim-anteil__teil b { font: italic 400 clamp(34px, 4vw, 56px)/1 var(--serif); }
.herbolzheim-anteil__teil--hier { background: var(--sand); color: var(--tinte); }
.herbolzheim-anteil__teil--aussen { background: linear-gradient(135deg, var(--bernstein-tief), var(--bernstein-licht)); color: var(--espresso); }
.herbolzheim-anteil__teil--weg { background: repeating-linear-gradient(135deg, var(--espresso) 0 14px, var(--espresso-3) 14px 28px); color: var(--bernstein-licht); }
.herbolzheim-anteil__teil { position: relative; }
.herbolzheim-anteil__teil::after { position: absolute; left: 20px; top: 16px; font: 600 13px/1.3 var(--grotesk); letter-spacing: .02em; }
.herbolzheim-anteil__teil--hier::after { content: "wohnen und arbeiten hier"; color: var(--leise); right: 8px; }
.herbolzheim-anteil__teil--aussen::after { content: "pendeln ein"; }
.herbolzheim-anteil__teil--weg::after { content: "pendeln aus"; color: var(--hell-leise); }
@media (max-width: 900px) { .herbolzheim-pendler__feld { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .herbolzheim-pendler__wahl { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; width: 100%; border-radius: 20px; }
  .herbolzheim-pendler__wahl button { border-radius: 16px; }
  .herbolzheim-anteil__teil { padding: 14px 12px; }
  .herbolzheim-anteil__teil::after { left: 12px; font-size: 12px; }
}

/* ---------- Achse an der A 5 ---------- */
.herbolzheim-achse__abschnitt { overflow-x: clip; }
.herbolzheim-achse { display: grid; gap: clamp(40px, 5vw, 64px); }
.herbolzheim-achse__linie { position: relative; height: 150px; margin: 0 clamp(40px, 6vw, 70px); }
.herbolzheim-achse__linie::before { content: ""; position: absolute; left: -40px; right: -40px; top: 72px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(246, 239, 230, .3) 0 22px, transparent 22px 34px); }
.herbolzheim-achse__linie::after { content: "A 5"; position: absolute; left: 71%; top: 90px; transform: translateX(-50%); font: italic 400 18px/1 var(--serif); color: var(--hell-leise); }
.herbolzheim-achse__linie li { position: absolute; left: var(--pos); top: 0; bottom: 0; display: grid; justify-items: center; grid-template-rows: 58px 30px auto; width: 130px; transform: translateX(-50%); text-align: center; }
.herbolzheim-achse__linie li::before { content: ""; grid-row: 2; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 2.5px var(--hell-leise); }
.herbolzheim-achse__linie li:nth-child(odd) b { grid-row: 1; align-self: end; }
.herbolzheim-achse__linie li:nth-child(odd) span { grid-row: 3; }
.herbolzheim-achse__linie li:nth-child(even) b { grid-row: 3; }
.herbolzheim-achse__linie li:nth-child(even) span { grid-row: 1; align-self: end; }
.herbolzheim-achse__linie b { font-size: 17px; font-weight: 600; }
.herbolzheim-achse__linie span { font-size: 13px; line-height: 1.3; color: var(--hell-leise); }
.herbolzheim-achse__linie li.herbolzheim-achse__hier { width: 200px; z-index: 1; }
.herbolzheim-achse__hier::before { width: 30px !important; height: 30px !important; background: var(--bernstein) !important; box-shadow: 0 0 0 8px rgba(244, 165, 58, .2), 0 0 40px rgba(244, 165, 58, .7) !important; }
.herbolzheim-achse__linie li.herbolzheim-achse__hier b { grid-row: 1; align-self: end; font: italic 400 34px/1 var(--serif); color: var(--bernstein-licht); }
.herbolzheim-achse__linie li.herbolzheim-achse__hier span { grid-row: 3; color: var(--hell); }
@media (prefers-reduced-motion: no-preference) { .herbolzheim-achse__hier::before { animation: herbolzheim-puls 2.4s ease-out infinite; } }
@keyframes herbolzheim-puls { 0% { box-shadow: 0 0 0 0 rgba(244, 165, 58, .5), 0 0 40px rgba(244, 165, 58, .7); } 100% { box-shadow: 0 0 0 22px rgba(244, 165, 58, 0), 0 0 40px rgba(244, 165, 58, .7); } }
.herbolzheim-achse__punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--bernstein); }
.herbolzheim-achse__punkte li { display: grid; gap: 8px; align-content: start; padding: 24px 28px 6px 0; }
.herbolzheim-achse__punkte li + li { padding-left: 28px; border-left: 1px solid var(--linie-dunkel); }
.herbolzheim-achse__punkte b { font: italic 400 28px/1.05 var(--serif); color: var(--bernstein-licht); }
.herbolzheim-achse__punkte p { font-size: 16.5px; line-height: 1.6; color: var(--hell-leise); }
@media (max-width: 900px) {
  .herbolzheim-achse__punkte { grid-template-columns: minmax(0, 1fr); }
  .herbolzheim-achse__punkte li, .herbolzheim-achse__punkte li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--linie-dunkel); }
}
/* Mobil: Achse senkrecht */
@media (max-width: 760px) {
  .herbolzheim-achse__linie { height: auto; margin: 0; display: grid; gap: 0; padding-left: 8px; }
  .herbolzheim-achse__linie::before { left: 15px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, rgba(246, 239, 230, .3) 0 18px, transparent 18px 28px); }
  .herbolzheim-achse__linie::after { content: none; }
  .herbolzheim-achse__linie li, .herbolzheim-achse__linie li.herbolzheim-achse__hier { position: relative; left: auto; transform: none; width: auto; display: grid; grid-template-columns: 30px 118px minmax(0, 1fr); grid-template-rows: auto; justify-items: start; align-items: center; gap: 4px 14px; padding: 11px 0; text-align: left; }
  .herbolzheim-achse__linie li::before { grid-row: 1; grid-column: 1; justify-self: center; }
  .herbolzheim-achse__linie li b, .herbolzheim-achse__linie li:nth-child(n) b { grid-row: 1; grid-column: 2; align-self: center; }
  .herbolzheim-achse__linie li span, .herbolzheim-achse__linie li:nth-child(n) span { grid-row: 1; grid-column: 3; align-self: center; }
  .herbolzheim-achse__linie li.herbolzheim-achse__hier b { font-size: 28px; }
  .herbolzheim-achse__linie li.herbolzheim-achse__hier { grid-template-columns: 30px minmax(0, 1fr); padding: 16px 0; }
  .herbolzheim-achse__linie li.herbolzheim-achse__hier span { grid-row: 2; grid-column: 2; }
}

/* ---------- Betriebsarten-Wähler ---------- */
.herbolzheim-arten { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.herbolzheim-arten__wahl { display: grid; align-content: start; border-top: 1px solid var(--tinte); }
.herbolzheim-arten__wahl button { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 78px; padding: 12px 18px 12px 6px; border: 0; border-bottom: 1px solid var(--linie); background: none; color: var(--tinte); text-align: left; font: 600 clamp(18px, 1.6vw, 21px)/1.25 var(--grotesk); cursor: pointer; transition: background .3s, color .3s, padding .3s var(--weich); }
.herbolzheim-arten__wahl button span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); }
.herbolzheim-arten__wahl button:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 80%); }
.herbolzheim-arten__wahl button[aria-selected="true"] { padding-left: 18px; background: var(--espresso); color: var(--hell); border-radius: 0 18px 18px 0; }
.herbolzheim-arten__wahl button[aria-selected="true"] span { background: var(--bernstein); color: var(--espresso); box-shadow: 0 0 22px rgba(244, 165, 58, .5); }
.herbolzheim-arten__felder { display: grid; }
.herbolzheim-arten__feld { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; justify-items: start; padding: clamp(26px, 3.4vw, 44px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.herbolzheim-arten__feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .herbolzheim-arten__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.herbolzheim-arten__ziel { display: grid; gap: 4px; }
.herbolzheim-arten__ziel small { font-size: 14px; font-weight: 600; color: var(--leise); }
.herbolzheim-arten__ziel b { font: italic 400 clamp(38px, 4vw, 56px)/1 var(--serif); color: var(--bernstein-text); }
.herbolzheim-arten__feld > p:not(.herbolzheim-arten__ziel) { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 40em; }
.herbolzheim-arten__wichtig { display: grid; width: 100%; border-top: 1px solid var(--tinte); }
.herbolzheim-arten__wichtig li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--linie); font-size: 17px; line-height: 1.4; }
.herbolzheim-arten__wichtig li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--bernstein-tief); border-bottom: 2px solid var(--bernstein-tief); transform: rotate(-45deg); }
@media (max-width: 900px) { .herbolzheim-arten { grid-template-columns: minmax(0, 1fr); } .herbolzheim-arten__wahl button[aria-selected="true"] { border-radius: 18px; } }
@media (max-width: 560px) { .herbolzheim-arten__wahl button { grid-template-columns: 40px minmax(0, 1fr); min-height: 64px; font-size: 17px; } .herbolzheim-arten__wahl button span { width: 38px; height: 38px; font-size: 17px; } }

/* ---------- Zentralitäts-Pegel ---------- */
.herbolzheim-pegel__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 40px 80px; align-items: center; }
.herbolzheim-pegel__kopf { display: grid; gap: 22px; justify-items: start; }
.herbolzheim-pegel__kopf h2 { font-size: clamp(34px, 4vw, 54px); }
.herbolzheim-pegel__kopf p { font-size: 18px; line-height: 1.6; color: var(--leise); max-width: 30em; }
.herbolzheim-pegel { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--papier); box-shadow: 0 30px 60px -40px rgba(28, 23, 19, .45), inset 0 0 0 1px var(--linie); }
.herbolzheim-pegel__liste { display: grid; gap: 4px; }
.herbolzheim-pegel__liste li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 58px; gap: 14px; align-items: center; min-height: 36px; }
.herbolzheim-pegel__liste span { font-size: 15px; color: var(--leise); }
.herbolzheim-pegel__liste i { position: relative; height: 2px; background: var(--linie); }
.herbolzheim-pegel__liste i::after { content: ""; position: absolute; left: var(--wert); top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--papier); box-shadow: inset 0 0 0 2.5px var(--leise); }
.herbolzheim-pegel__liste b { font: italic 400 22px/1 var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.herbolzheim-pegel__hier span { color: var(--tinte); font-weight: 600; }
.herbolzheim-pegel__hier i { background: linear-gradient(90deg, var(--bernstein-tief) 0 var(--wert), var(--linie) var(--wert)); height: 4px; }
.herbolzheim-pegel__hier i::after { width: 24px; height: 24px; background: var(--bernstein); box-shadow: 0 0 0 6px rgba(244, 165, 58, .22); }
.herbolzheim-pegel__hier b { font-size: 30px; color: var(--bernstein-text); }
.herbolzheim-pegel__d { border-top: 1px dashed var(--leise); border-bottom: 1px dashed var(--leise); }
.herbolzheim-pegel__d i::after { border-radius: 2px; width: 4px; height: 22px; background: var(--leise); box-shadow: none; }
.herbolzheim-pegel figcaption { padding-top: 14px; border-top: 1px solid var(--linie); font-size: 13px; line-height: 1.5; color: var(--leise); }
@media (max-width: 900px) { .herbolzheim-pegel__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .herbolzheim-pegel__liste li { grid-template-columns: 92px minmax(0, 1fr) 48px; gap: 10px; } .herbolzheim-pegel__liste span { font-size: 14px; } }

/* ==========================================================================
   Ortsseite Kenzingen (17.10.2026)
   kenzingen-…  nur Kenzingen: Pendler-Bild „Vier von fünf fahren hinaus“ mit Tageszeiten,
                zwei Messgrößen (242 Betriebe, 363 Unternehmen), Kanal-Treppe „Wie weit sind Sie?“.
   Gemeinsame ort-… Klassen liegen in orte.css (nur lesen). Nur Tokens aus :root, kein eigenes JavaScript.
   ========================================================================== */

/* ---------- Einstieg: Ortsmarke mobil kompakter ---------- */
@media (max-width: 760px) { .einstieg .kenzingen-ortsmarke { margin-top: 4px; } .einstieg .kenzingen-ortsmarke b { font-size: 19px; } }

/* ---------- Pendler-Bild mit Tageszeiten ---------- */
.kenzingen-tag-abschnitt { overflow-x: clip; }
.kenzingen-tag { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "wahl wahl" "buehne feld"; gap: 28px clamp(32px, 5vw, 80px); align-items: center; }
.kenzingen-tag__wahl { grid-area: wahl; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 720px; padding: 6px; border-radius: 22px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.kenzingen-tag__wahl button { display: grid; gap: 2px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px; background: none; color: var(--hell-leise); font: 600 14px/1.2 var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.kenzingen-tag__wahl button b { font: italic 400 26px/1 var(--serif); color: var(--hell); }
.kenzingen-tag__wahl button[aria-selected="true"] { background: var(--hell); color: var(--tinte); }
.kenzingen-tag__wahl button[aria-selected="true"] b { color: var(--bernstein-text); }
.kenzingen-tag__buehne { grid-area: buehne; position: relative; height: clamp(240px, 24vw, 320px); overflow: hidden; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.kenzingen-tag__himmel { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244, 165, 58, .05), rgba(244, 165, 58, .32) 78%, rgba(244, 165, 58, .1)); transition: background 1s, opacity 1s; }
.kenzingen-tag[data-aktiv="1"] .kenzingen-tag__himmel { background: linear-gradient(180deg, rgba(246, 239, 230, .16), rgba(246, 239, 230, .05) 80%); }
.kenzingen-tag[data-aktiv="2"] .kenzingen-tag__himmel { background: radial-gradient(1.5px 1.5px at 18% 22%, var(--hell), transparent), radial-gradient(1.5px 1.5px at 42% 14%, var(--hell), transparent), radial-gradient(1px 1px at 66% 28%, var(--hell), transparent), radial-gradient(1.5px 1.5px at 84% 12%, var(--hell), transparent), radial-gradient(1px 1px at 30% 40%, var(--hell-leise), transparent), linear-gradient(180deg, rgba(10, 8, 6, .5), rgba(244, 165, 58, .06) 80%); }
.kenzingen-tag__boden { position: absolute; left: 0; right: 0; bottom: 20%; height: 2px; background: repeating-linear-gradient(90deg, rgba(246, 239, 230, .35) 0 14px, transparent 14px 24px); }
.kenzingen-tag__ort { position: absolute; bottom: 7%; font: italic 400 19px/1.1 var(--serif); color: var(--hell); }
.kenzingen-tag__ort--heim { left: 5%; }
.kenzingen-tag__ort--weg { right: 5%; max-width: 44%; text-align: right; color: var(--hell-leise); font-size: 16px; }
.kenzingen-tag__person { position: absolute; bottom: 20%; left: calc(5% + var(--p) * 8.5%); width: min(7.5%, 44px); transition: left 1.3s var(--weich), opacity .8s; transition-delay: calc(var(--p) * 110ms); }
.kenzingen-tag__person svg { display: block; width: 100%; height: auto; fill: rgba(246, 239, 230, .62); transition: fill .6s; }
.kenzingen-tag[data-aktiv="0"] .kenzingen-tag__person:not(.kenzingen-tag__person--bleibt),
.kenzingen-tag[data-aktiv="1"] .kenzingen-tag__person:not(.kenzingen-tag__person--bleibt) { left: calc(52% + var(--p) * 8.5%); }
.kenzingen-tag[data-aktiv="1"] .kenzingen-tag__person:not(.kenzingen-tag__person--bleibt) { opacity: .45; }
.kenzingen-tag[data-aktiv="0"] .kenzingen-tag__person--bleibt svg, .kenzingen-tag[data-aktiv="1"] .kenzingen-tag__person--bleibt svg { fill: var(--bernstein-licht); }
.kenzingen-tag__handy { position: absolute; left: 62%; top: 44%; width: 26%; aspect-ratio: .6; border-radius: 2px; background: var(--bernstein-licht); box-shadow: 0 0 14px 4px rgba(244, 165, 58, .75); opacity: 0; transition: opacity .6s; transition-delay: calc(1s + var(--p) * 150ms); }
.kenzingen-tag[data-aktiv="2"] .kenzingen-tag__handy { opacity: 1; }
.kenzingen-tag[data-aktiv="2"] .kenzingen-tag__person svg { fill: var(--hell); }
.kenzingen-tag__felder { grid-area: feld; display: grid; }
.kenzingen-tag__feld { grid-area: 1 / 1; display: grid; gap: 14px; justify-items: start; }
.kenzingen-tag__feld[hidden] { display: none; }
.kenzingen-tag__zahl { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linie-dunkel); width: 100%; }
.kenzingen-tag__zahl b { font: italic 400 clamp(52px, 5vw, 76px)/.95 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.kenzingen-tag__zahl span { font-size: 15px; color: var(--hell-leise); }
.kenzingen-tag__feld h3 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.15; }
.kenzingen-tag__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.kenzingen-tag__feld p:not(.kenzingen-tag__zahl) { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
@media (prefers-reduced-motion: no-preference) { .kenzingen-tag__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
@media (prefers-reduced-motion: reduce) { .kenzingen-tag__person, .kenzingen-tag__handy { transition: none; } }
@media (max-width: 900px) { .kenzingen-tag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wahl" "buehne" "feld"; } }
@media (max-width: 560px) {
  .kenzingen-tag__wahl button { padding: 8px 6px; font-size: 12.5px; }
  .kenzingen-tag__wahl button b { font-size: 21px; }
  .kenzingen-tag__buehne { height: 210px; }
  .kenzingen-tag__person { width: 8%; }
  .kenzingen-tag__ort { font-size: 16px; }
  .kenzingen-tag__ort--weg { font-size: 13px; }
}

/* ---------- Zwei Messgrößen ---------- */
.kenzingen-zwei { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.kenzingen-zwei__titel { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.kenzingen-zwei__titel em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.kenzingen-zwei__paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px 32px; align-items: start; margin-top: 24px; }
.kenzingen-zwei__wert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: start; }
.kenzingen-zwei__wert b { font: italic 400 clamp(56px, 6vw, 84px)/.9 var(--serif); color: var(--bernstein-text); font-variant-numeric: tabular-nums; }
.kenzingen-zwei__wert p { font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.kenzingen-zwei__wert strong { color: var(--tinte); }
.kenzingen-zwei__oder { align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--espresso); color: var(--bernstein-licht); font: italic 400 18px/1 var(--serif); }
.kenzingen-zwei__fazit { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 17px; line-height: 1.55; font-weight: 600; }
@media (max-width: 900px) { .kenzingen-zwei__paar { grid-template-columns: minmax(0, 1fr); } .kenzingen-zwei__oder { justify-self: start; width: 44px; height: 44px; } }
@media (max-width: 560px) { .kenzingen-zwei__wert { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kanal-Treppe ---------- */
.kenzingen-treppe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "frage feld" "stufen feld"; gap: 28px clamp(32px, 5vw, 80px); align-items: start; }
.kenzingen-treppe__frage { grid-area: frage; display: grid; gap: 12px; }
.kenzingen-treppe__label { font: italic 400 24px/1.2 var(--serif); color: var(--bernstein-text); }
.kenzingen-treppe__wahl { display: grid; gap: 8px; }
.kenzingen-treppe__wahl button { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 18px; border: 0; border-radius: 16px; background: var(--papier); color: var(--tinte); font: 600 16.5px/1.3 var(--grotesk); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); transition: background .3s, box-shadow .3s; }
.kenzingen-treppe__wahl button::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bernstein-tief); transition: background .3s, box-shadow .3s; }
.kenzingen-treppe__wahl button:hover { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.kenzingen-treppe__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell); box-shadow: none; }
.kenzingen-treppe__wahl button[aria-selected="true"]::before { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); }
.kenzingen-treppe__stufen { grid-area: stufen; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; height: 220px; }
.kenzingen-treppe__stufe { display: grid; align-content: start; gap: 6px; padding: 14px 14px 0; border-radius: 16px 16px 4px 4px; background: var(--sand); color: var(--leise); font-size: 14.5px; font-weight: 600; transition: background .5s, color .5s, box-shadow .5s; }
.kenzingen-treppe__stufe i { font: italic 400 30px/1 var(--serif); font-style: italic; color: var(--bernstein-text); }
.kenzingen-treppe__stufe--1 { height: 42%; }
.kenzingen-treppe__stufe--2 { height: 68%; }
.kenzingen-treppe__stufe--3 { height: 96%; }
.kenzingen-treppe[data-aktiv="1"] .kenzingen-treppe__stufe--1, .kenzingen-treppe[data-aktiv="2"] .kenzingen-treppe__stufe--1, .kenzingen-treppe[data-aktiv="2"] .kenzingen-treppe__stufe--2 { background: var(--espresso-2); color: var(--hell-leise); }
.kenzingen-treppe[data-aktiv="1"] .kenzingen-treppe__stufe--1 i, .kenzingen-treppe[data-aktiv="2"] .kenzingen-treppe__stufe--1 i, .kenzingen-treppe[data-aktiv="2"] .kenzingen-treppe__stufe--2 i { color: var(--hell-leise); }
.kenzingen-treppe[data-aktiv="0"] .kenzingen-treppe__stufe--1, .kenzingen-treppe[data-aktiv="1"] .kenzingen-treppe__stufe--2, .kenzingen-treppe[data-aktiv="2"] .kenzingen-treppe__stufe--3 { background: linear-gradient(180deg, var(--bernstein-licht), var(--bernstein)); color: var(--espresso); box-shadow: 0 20px 40px -18px rgba(228, 143, 23, .8); }
.kenzingen-treppe[data-aktiv="0"] .kenzingen-treppe__stufe--1 i, .kenzingen-treppe[data-aktiv="1"] .kenzingen-treppe__stufe--2 i, .kenzingen-treppe[data-aktiv="2"] .kenzingen-treppe__stufe--3 i { color: var(--espresso); }
.kenzingen-treppe__felder { grid-area: feld; display: grid; }
.kenzingen-treppe__feld { grid-area: 1 / 1; display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -40px rgba(28, 23, 19, .55); }
.kenzingen-treppe__feld[hidden] { display: none; }
.kenzingen-treppe__naechste { display: flex; align-items: baseline; gap: 12px; font-size: 15px; color: var(--hell-leise); }
.kenzingen-treppe__naechste b { font: italic 400 64px/.9 var(--serif); color: var(--bernstein-licht); }
.kenzingen-treppe__feld h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.kenzingen-treppe__feld > p:not(.kenzingen-treppe__naechste) { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
.kenzingen-treppe__feld dl { display: grid; gap: 10px; width: 100%; padding: 14px 0; border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); }
.kenzingen-treppe__feld dl div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 12px; }
.kenzingen-treppe__feld dt { font-size: 14px; color: var(--hell-leise); }
.kenzingen-treppe__feld dd { font-size: 15.5px; font-weight: 600; }
.kenzingen-treppe__feld .knopf--dunkel { background: var(--hell); color: var(--tinte); }
@media (prefers-reduced-motion: no-preference) { .kenzingen-treppe__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.kenzingen-treppe__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(28px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--linie); }
.kenzingen-treppe__fuss p { font-size: 18px; font-weight: 600; }
@media (max-width: 900px) { .kenzingen-treppe { grid-template-columns: minmax(0, 1fr); grid-template-areas: "frage" "stufen" "feld"; } .kenzingen-treppe__stufen { height: 170px; } }
@media (max-width: 560px) { .kenzingen-treppe__feld dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kenzingen-treppe__stufe { font-size: 13px; padding: 10px 10px 0; } }

/* ==========================================================================
   Ortsseite Teningen (17.10.2026)
   teningen-…  nur Teningen: Fachsuche-Szene mit Anfrage, Umkreis-Szene, Gewerbegebiete-Karte,
               Suchbegriff-Umschalter „Wer sucht Sie?“, Pendler-Kreise (zwei Kreise, kleine Schnittmenge).
   Gemeinsame ort-… Klassen liegen in orte.css (nur lesen). Nur Tokens aus :root, kein eigenes JavaScript.
   ========================================================================== */

/* ---------- Szene 1: Fachsuche, Anfrage-Hinweis ---------- */
.teningen-szene-fach__anfrage { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--hell); color: var(--tinte); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9); opacity: 0; }
.teningen-szene-fach__anfrage i { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 5px rgba(244, 165, 58, .25); }
.teningen-szene-fach__anfrage b { font-size: 14.5px; line-height: 1.25; }
.teningen-szene-fach__anfrage span { font-size: 13px; color: var(--leise); }
.teningen-szene-fach.ist-aktiv .teningen-szene-fach__anfrage { animation: teningen-anfrage .8s var(--weich) 3.2s both; }
@keyframes teningen-anfrage { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .teningen-szene-fach__anfrage { opacity: 1; } }
@media (max-width: 760px) { .teningen-szene-fach__anfrage { display: none; } }

/* ---------- Szene 2: Stellenanzeige im Pendelradius ---------- */
.teningen-szene-umkreis__ring { fill: rgba(244, 165, 58, .07); stroke: rgba(244, 165, 58, .5); stroke-width: 1.5; stroke-dasharray: 6 6; transform-box: fill-box; transform-origin: center; }
.teningen-szene-umkreis__ring--innen { fill: rgba(244, 165, 58, .1); stroke-dasharray: none; stroke-opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .teningen-szene-umkreis.ist-aktiv .teningen-szene-umkreis__ring { animation: teningen-ring 1.6s var(--weich) .6s both; }
  .teningen-szene-umkreis.ist-aktiv .teningen-szene-umkreis__ring--innen { animation-delay: .3s; }
}
@keyframes teningen-ring { from { opacity: 0; transform: scale(.2); } }

/* ---------- Gewerbegebiete-Karte (Reiter) ---------- */
.teningen-gebiete-abschnitt { overflow-x: clip; }
.teningen-gebiete { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "karte liste" "feld liste"; gap: 0 clamp(32px, 4vw, 64px); align-items: start; }
.teningen-gebiete__karte { grid-area: karte; position: relative; padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 12px; border-radius: 28px 28px 0 0; background: radial-gradient(70% 60% at 55% 55%, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 70%), var(--espresso); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.teningen-gebiete__karte svg { display: block; width: 100%; height: auto; }
.teningen-gebiete__autobahn { fill: none; stroke: rgba(246, 239, 230, .3); stroke-width: 9; stroke-linecap: round; }
.teningen-gebiete__weg { fill: none; stroke: rgba(246, 239, 230, .16); stroke-width: 3; stroke-linecap: round; }
.teningen-gebiete__weg--hin { stroke-dasharray: 2 8; stroke: rgba(244, 165, 58, .45); }
.teningen-gebiete__strassenname { font: 600 13px var(--grotesk); fill: var(--hell-leise); letter-spacing: .04em; }
.teningen-gebiete__richtung { font: italic 400 16px var(--serif); fill: var(--bernstein-licht); }
.teningen-gebiete__ort { font: 600 15px var(--grotesk); fill: var(--hell); letter-spacing: .02em; paint-order: stroke; stroke: var(--espresso); stroke-width: 4px; }
.teningen-gebiete__fl { fill: rgba(246, 239, 230, .1); stroke: rgba(246, 239, 230, .4); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: fill .35s, stroke .35s, transform .5s var(--weich); }
.teningen-gebiete__fl--plan { fill: rgba(244, 165, 58, .04); stroke: var(--bernstein-licht); stroke-dasharray: 5 5; }
.teningen-gebiete[data-aktiv="0"] .teningen-gebiete__fl--0, .teningen-gebiete[data-aktiv="1"] .teningen-gebiete__fl--1,
.teningen-gebiete[data-aktiv="2"] .teningen-gebiete__fl--2, .teningen-gebiete[data-aktiv="3"] .teningen-gebiete__fl--3,
.teningen-gebiete[data-aktiv="4"] .teningen-gebiete__fl--4, .teningen-gebiete[data-aktiv="5"] .teningen-gebiete__fl--5,
.teningen-gebiete[data-aktiv="6"] .teningen-gebiete__fl--6, .teningen-gebiete[data-aktiv="7"] .teningen-gebiete__fl--7,
.teningen-gebiete[data-aktiv="8"] .teningen-gebiete__fl--8, .teningen-gebiete[data-aktiv="9"] .teningen-gebiete__fl--9 { fill: rgba(244, 165, 58, .55); stroke: var(--bernstein-licht); stroke-width: 2.5; transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(244, 165, 58, .7)); }
.teningen-gebiete__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; color: var(--hell-leise); }
.teningen-gebiete__legende span { display: inline-flex; align-items: center; gap: 8px; }
.teningen-gebiete__legende i { width: 12px; height: 12px; border-radius: 50%; background: rgba(246, 239, 230, .14); box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .45); }
.teningen-gebiete__legende i.teningen-gebiete__legende--plan { background: none; box-shadow: none; border: 1.5px dashed var(--bernstein-licht); }

.teningen-gebiete__liste { grid-area: liste; display: grid; border-top: 1px solid var(--tinte); }
.teningen-gebiete__liste button { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name ha" "teil ha"; align-items: center; column-gap: 16px; min-height: 58px; padding: 10px 14px 12px 4px; border: 0; border-bottom: 1px solid var(--linie); background: none; color: var(--tinte); text-align: left; font: inherit; cursor: pointer; transition: padding .3s var(--weich), background .3s; }
.teningen-gebiete__liste b { grid-area: name; font-size: 17px; font-weight: 600; line-height: 1.25; }
.teningen-gebiete__liste span { grid-area: teil; font-size: 13.5px; color: var(--leise); }
.teningen-gebiete__liste small { grid-area: ha; font: italic 400 24px/1 var(--serif); color: var(--bernstein-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.teningen-gebiete__liste i { position: absolute; left: 0; bottom: -1px; height: 3px; width: var(--ha); border-radius: 2px; background: var(--sand); transition: background .3s; }
.teningen-gebiete__plan i { background: repeating-linear-gradient(90deg, var(--bernstein-tief) 0 6px, transparent 6px 11px) !important; }
.teningen-gebiete__liste button:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 80%); }
.teningen-gebiete__liste button[aria-selected="true"] { padding-left: 16px; background: linear-gradient(90deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 85%); }
.teningen-gebiete__liste button[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--bernstein); }
.teningen-gebiete__liste button[aria-selected="true"] i { background: var(--bernstein); }

.teningen-gebiete__felder { grid-area: feld; display: grid; padding: 4px clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 32px); border-radius: 0 0 28px 28px; background: var(--espresso); color: var(--hell); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 40px 80px -40px rgba(28, 23, 19, .55); }
.teningen-gebiete__feld { grid-area: 1 / 1; display: grid; gap: 12px; justify-items: start; padding-top: 18px; border-top: 1px solid var(--linie-dunkel); }
.teningen-gebiete__feld[hidden] { display: none; }
.teningen-gebiete__ha { display: flex; align-items: baseline; gap: 10px; }
.teningen-gebiete__ha b { font: italic 400 clamp(46px, 4.4vw, 62px)/.95 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.teningen-gebiete__ha span { font-size: 15px; color: var(--hell-leise); }
.teningen-gebiete__feld h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--hell); }
.teningen-gebiete__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.teningen-gebiete__feld p:not(.teningen-gebiete__ha) { font-size: 16.5px; line-height: 1.6; color: var(--hell-leise); max-width: 36em; }
@media (prefers-reduced-motion: no-preference) { .teningen-gebiete__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.teningen-gebiete__tabelle { margin-top: 28px; }
.teningen-gebiete__tabelle summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--bernstein); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.teningen-gebiete__tabelle .tabelle { margin-top: 16px; max-width: 760px; }
@media (max-width: 900px) {
  .teningen-gebiete { grid-template-columns: minmax(0, 1fr); grid-template-areas: "karte" "feld" "liste"; }
  .teningen-gebiete__karte, .teningen-gebiete__felder { max-width: 640px; width: 100%; }
  .teningen-gebiete__liste { margin-top: 28px; }
}
@media (max-width: 560px) {
  .teningen-gebiete__ort { font-size: 21px; }
  .teningen-gebiete__strassenname { font-size: 18px; }
  .teningen-gebiete__richtung { font-size: 22px; }
  .teningen-gebiete__liste b { font-size: 16px; }
  .teningen-gebiete__liste small { font-size: 21px; }
}

/* ---------- Wer sucht Sie? (Reiter) ---------- */
.teningen-suche { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.teningen-suche__wahl { display: grid; gap: 10px; }
.teningen-suche__wahl button { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 76px; padding: 14px 18px 14px 14px; border: 0; border-radius: 20px; background: var(--creme); color: var(--tinte); text-align: left; font: inherit; cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s var(--weich); }
.teningen-suche__nr { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); }
.teningen-suche__wahl b { font-size: 18px; line-height: 1.2; }
.teningen-suche__wahl small { font-size: 14px; line-height: 1.35; color: var(--leise); }
.teningen-suche__wahl button:hover { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.teningen-suche__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell); transform: translateX(6px); box-shadow: 0 24px 40px -26px rgba(28, 23, 19, .8); }
.teningen-suche__wahl button[aria-selected="true"] small { color: var(--hell-leise); }
.teningen-suche__wahl button[aria-selected="true"] .teningen-suche__nr { background: var(--bernstein); box-shadow: none; color: var(--espresso); }
.teningen-suche__felder { display: grid; }
.teningen-suche__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.teningen-suche__feld[hidden] { display: none; }
.teningen-suche__fenster { position: relative; padding: 22px 22px 20px; border-radius: 26px; background: linear-gradient(160deg, var(--espresso-3, #2a2119), var(--espresso) 60%); color: var(--hell); box-shadow: 0 40px 70px -40px rgba(28, 23, 19, .8), inset 0 0 0 1px rgba(246, 239, 230, .1); }
.teningen-suche__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--linie-dunkel); font-size: 15px; font-weight: 600; }
.teningen-suche__kopf small { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; color: var(--bernstein-licht); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .32); }
.teningen-suche__zeilen { display: grid; gap: 10px; }
.teningen-suche__zeilen li { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: #f3ebdf; color: var(--tinte); font-size: 15.5px; line-height: 1.3; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .9); }
.teningen-suche__zeilen .symbol { flex: none; width: 17px; height: 17px; color: var(--bernstein-text); }
.teningen-suche__fehlt { margin-top: 16px; font: italic 400 21px/1.2 var(--serif); color: var(--bernstein-licht); }
@media (prefers-reduced-motion: no-preference) {
  .teningen-suche__feld:not([hidden]) .teningen-suche__zeilen li { animation: teningen-zeile .6s var(--weich) both; animation-delay: calc(.1s + var(--i) * .18s); }
  .teningen-suche__feld:not([hidden]) .teningen-suche__rat { animation: ort-feld .5s var(--weich) .2s both; }
}
@keyframes teningen-zeile { from { opacity: 0; transform: translateX(-14px); } }
.teningen-suche__rat { display: grid; gap: 14px; justify-items: start; }
.teningen-suche__rat h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.18; }
.teningen-suche__rat h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.teningen-suche__rat p { font-size: 17px; line-height: 1.6; color: var(--leise); }
@media (max-width: 1100px) { .teningen-suche { grid-template-columns: minmax(0, 1fr); } .teningen-suche__wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .teningen-suche__wahl button[aria-selected="true"] { transform: translateY(-4px); } }
@media (max-width: 760px) {
  .teningen-suche__wahl { grid-template-columns: minmax(0, 1fr); }
  .teningen-suche__wahl button { min-height: 64px; }
  .teningen-suche__wahl button[aria-selected="true"] { transform: none; }
  .teningen-suche__feld { grid-template-columns: minmax(0, 1fr); }
  .teningen-suche__zeilen li { font-size: 14.5px; padding: 0 14px; }
}

/* ---------- Zwei Kreise, kleine Schnittmenge ---------- */
.teningen-venn-abschnitt { overflow-x: clip; }
.teningen-venn { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.teningen-venn__bild { position: relative; width: 100%; max-width: 580px; aspect-ratio: 580 / 400; justify-self: center; }
.teningen-venn__kreis { position: absolute; top: 9%; width: 55.2%; aspect-ratio: 1; border-radius: 50%; transition: background .5s, box-shadow .5s; }
.teningen-venn__kreis--wohn { left: 0; overflow: hidden; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 2px rgba(246, 239, 230, .35); }
.teningen-venn__kreis--arbeit { left: 44.8%; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 2px rgba(246, 239, 230, .35); }
.teningen-venn__schnitt { position: absolute; top: 0; left: 81.2%; width: 100%; height: 100%; border-radius: 50%; background: rgba(244, 165, 58, .25); transition: background .5s; }
.teningen-venn__marke { position: absolute; display: grid; justify-items: center; text-align: center; font-size: 14px; line-height: 1.3; color: var(--hell-leise); transition: color .4s; pointer-events: none; }
.teningen-venn__marke b { font: italic 400 clamp(34px, 3.6vw, 50px)/1 var(--serif); color: var(--hell); transition: color .4s; font-variant-numeric: tabular-nums; }
.teningen-venn__marke--wohn { left: 4%; top: 38%; width: 34%; }
.teningen-venn__marke--arbeit { right: 4%; top: 38%; width: 34%; }
.teningen-venn__marke--schnitt { left: 50%; top: 43%; transform: translateX(-50%); }
.teningen-venn__marke--schnitt b { font-size: clamp(26px, 2.6vw, 34px); }
.teningen-venn[data-aktiv="0"] .teningen-venn__kreis--arbeit { background: rgba(244, 165, 58, .28); box-shadow: inset 0 0 0 2px var(--bernstein-licht), 0 0 60px -10px rgba(244, 165, 58, .55); }
.teningen-venn[data-aktiv="0"] .teningen-venn__marke--arbeit b, .teningen-venn[data-aktiv="1"] .teningen-venn__marke--wohn b, .teningen-venn[data-aktiv="2"] .teningen-venn__marke--schnitt b { color: var(--bernstein-licht); }
.teningen-venn[data-aktiv="1"] .teningen-venn__kreis--wohn { background: rgba(244, 165, 58, .28); box-shadow: inset 0 0 0 2px var(--bernstein-licht), 0 0 60px -10px rgba(244, 165, 58, .55); }
.teningen-venn[data-aktiv="1"] .teningen-venn__schnitt, .teningen-venn[data-aktiv="0"] .teningen-venn__schnitt { background: rgba(28, 23, 19, .45); }
.teningen-venn[data-aktiv="2"] .teningen-venn__schnitt { background: var(--bernstein); box-shadow: 0 0 40px rgba(244, 165, 58, .8); }
.teningen-venn[data-aktiv="2"] .teningen-venn__marke--schnitt, .teningen-venn[data-aktiv="2"] .teningen-venn__marke--schnitt b { color: var(--espresso); }
.teningen-venn__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 22px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.teningen-venn__wahl button { display: grid; gap: 2px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px; background: none; color: var(--hell-leise); font: 600 14px/1.2 var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.teningen-venn__wahl button b { font: italic 400 26px/1 var(--serif); color: var(--hell); }
.teningen-venn__wahl button[aria-selected="true"] { background: var(--hell); color: var(--tinte); }
.teningen-venn__wahl button[aria-selected="true"] b { color: var(--bernstein-text); }
.teningen-venn__feld { display: grid; gap: 16px; justify-items: start; margin-top: 28px; }
.teningen-venn__feld[hidden] { display: none; }
.teningen-venn__feld h3 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.16; }
.teningen-venn__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.teningen-venn__feld p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
@media (prefers-reduced-motion: no-preference) { .teningen-venn__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
.teningen-venn__aktion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(36px, 4vw, 56px); padding: 22px clamp(20px, 3vw, 36px); border-radius: 22px; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.teningen-venn__aktion p { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; color: var(--hell); }
@media (max-width: 900px) { .teningen-venn { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .teningen-venn__marke { font-size: 12px; }
  .teningen-venn__marke b { font-size: 28px; }
  .teningen-venn__marke--schnitt b { font-size: 22px; }
  .teningen-venn__wahl { grid-template-columns: minmax(0, 1fr); }
  .teningen-venn__wahl button { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; min-height: 52px; text-align: left; }
}

/* ---------- Einstieg: Ortsmarke mobil kompakter, damit die Vertrauensleiste im ersten Bildschirm bleibt ---------- */
@media (max-width: 760px) { .einstieg .teningen-ortsmarke { margin-top: 4px; } .einstieg .teningen-ortsmarke b { font-size: 19px; } }

/* ==========================================================================
   Waldkirch H2 (17.10.2026): nur diese Seite, Präfix waldkirch-
   Befragungs-Barometer (vier Messuhren, laufen beim Einblenden auf ihren Wert), „Und Sie?“ mit drei Fragen
   (Radio + :has, Zähler data-zaehlen aus ares.js), Elztal-Linie mit Haltestellen (data-reiter).
   Gemeinsame ort-…-Klassen kommen aus orte.css. Nur Tokens aus :root.
   ========================================================================== */

/* ---------- Barometer: vier Messuhren ---------- */
.waldkirch-barometer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.waldkirch-barometer li { display: grid; align-content: start; gap: 8px; padding: 26px 24px 24px; border-radius: 26px; background: var(--espresso); color: var(--hell); box-shadow: 0 40px 80px -50px rgba(28, 23, 19, .7); }
.waldkirch-uhr { width: 100%; max-width: 170px; height: auto; overflow: visible; margin-bottom: 6px; }
.waldkirch-uhr__bahn, .waldkirch-uhr__wert { fill: none; stroke-width: 10; stroke-linecap: round; }
.waldkirch-uhr__bahn { stroke: rgba(246, 239, 230, .12); }
.waldkirch-uhr__wert { stroke: var(--bernstein); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--wert)); filter: drop-shadow(0 0 6px rgba(244, 165, 58, .45)); }
.waldkirch-uhr__zeiger { transform-box: view-box; transform-origin: 60px 62px; transform: rotate(calc(var(--wert) * 1.8deg - 90deg)); }
.waldkirch-uhr__zeiger path { stroke: var(--hell); stroke-width: 3; stroke-linecap: round; }
.waldkirch-uhr__zeiger circle { fill: var(--hell); }
.waldkirch-barometer b { font: italic 400 clamp(52px, 5vw, 72px)/.95 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.waldkirch-barometer span { font-size: 16px; line-height: 1.45; color: var(--hell); hyphens: auto; overflow-wrap: break-word; }
.waldkirch-barometer li { min-width: 0; }
.waldkirch-barometer small { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linie-dunkel); font-size: 13.5px; color: var(--hell-leise); }
.waldkirch-barometer__amtlich { background: var(--creme) !important; color: var(--tinte) !important; box-shadow: inset 0 0 0 1px var(--linie) !important; }
.waldkirch-barometer__amtlich .waldkirch-uhr__bahn { stroke: var(--sand); }
.waldkirch-barometer__amtlich .waldkirch-uhr__wert { stroke: var(--bernstein-tief); filter: none; }
.waldkirch-barometer__amtlich .waldkirch-uhr__zeiger path { stroke: var(--tinte); }
.waldkirch-barometer__amtlich .waldkirch-uhr__zeiger circle { fill: var(--tinte); }
.waldkirch-barometer__amtlich b { color: var(--bernstein-text); }
.waldkirch-barometer__amtlich span { color: var(--tinte); }
.waldkirch-barometer__amtlich small { color: var(--leise); border-top-color: var(--linie); }
.bewegt .waldkirch-barometer.ist-da .waldkirch-uhr__wert { animation: waldkirch-uhr 1.8s var(--weich) .2s both; }
.bewegt .waldkirch-barometer.ist-da .waldkirch-uhr__zeiger { animation: waldkirch-zeiger 1.8s var(--weich) .2s both; }
.bewegt .waldkirch-barometer:not(.ist-da) .waldkirch-uhr__wert { stroke-dashoffset: 100; }
.bewegt .waldkirch-barometer:not(.ist-da) .waldkirch-uhr__zeiger { transform: rotate(-90deg); }
.waldkirch-barometer li:nth-child(2) * { animation-delay: .35s !important; }
.waldkirch-barometer li:nth-child(3) * { animation-delay: .5s !important; }
.waldkirch-barometer li:nth-child(4) * { animation-delay: .65s !important; }
@keyframes waldkirch-uhr { from { stroke-dashoffset: 100; } }
@keyframes waldkirch-zeiger { from { transform: rotate(-90deg); } }
@media (max-width: 1000px) { .waldkirch-barometer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .waldkirch-barometer { gap: 10px; }
  .waldkirch-barometer li { padding: 18px 16px; border-radius: 20px; }
  .waldkirch-barometer b { font-size: 44px; }
  .waldkirch-barometer span { font-size: 14.5px; }
  .waldkirch-barometer small { font-size: 12.5px; }
}

/* ---------- „Und Sie?“: drei Fragen mit Vergleich ---------- */
.waldkirch-frage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.waldkirch-frage__kopf { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: 12px 40px; padding-bottom: 20px; border-bottom: 1px solid var(--tinte); }
.waldkirch-frage__kopf h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; }
.waldkirch-frage__kopf h3 em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.waldkirch-frage__kopf p { font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.waldkirch-frage__stand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.waldkirch-frage__stand b { font: italic 400 44px/1 var(--serif); color: var(--bernstein-text); }
.waldkirch-frage__punkt { display: grid; align-content: start; gap: 16px; min-width: 0; margin: 0; padding: 24px; border: 0; border-radius: 24px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .3s, box-shadow .3s; }
.waldkirch-frage__punkt legend { float: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; width: 100%; padding: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--tinte); }
.waldkirch-frage__punkt legend span { font: italic 400 28px/1 var(--serif); color: var(--bernstein-text); }
.waldkirch-frage__wahl { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.waldkirch-frage__wahl label { position: relative; cursor: pointer; }
.waldkirch-frage__wahl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.waldkirch-frage__wahl span { display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--tinte); transition: background .25s, color .25s; }
.waldkirch-frage__wahl label:hover span { background: rgba(244, 165, 58, .12); }
.waldkirch-frage__wahl input:checked + span { background: var(--espresso); color: var(--hell); }
.waldkirch-frage__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.waldkirch-frage__antwort { display: none; padding-left: 14px; border-left: 3px solid var(--bernstein); font-size: 15.5px; line-height: 1.55; color: var(--tinte); }
.waldkirch-frage__punkt:has(input[id$="-ja"]:checked) .waldkirch-frage__antwort--ja,
.waldkirch-frage__punkt:has(input[id$="-nein"]:checked) .waldkirch-frage__antwort--nein { display: block; animation: ort-feld .5s var(--weich) both; }
.waldkirch-frage__punkt:has(input:checked) { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief), 0 30px 60px -45px rgba(60, 40, 20, .6); }
.waldkirch-frage__ergebnis { grid-column: 1 / -1; padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--espresso); color: var(--hell); }
.waldkirch-frage__ergebnis > p[hidden] { display: none; }
.waldkirch-frage__ergebnis > p { display: grid; gap: 4px; font-size: 16px; color: var(--hell-leise); }
.waldkirch-frage__ergebnis > p b { font: italic 400 26px/1.15 var(--serif); color: var(--hell); }
.waldkirch-frage__ergebnis > div:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 40px; }
.waldkirch-rat { display: none; align-content: start; justify-items: start; gap: 12px; }
.waldkirch-rat b { font: italic 400 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); color: var(--bernstein-licht); }
.waldkirch-rat p { font-size: 16.5px; line-height: 1.55; color: var(--hell-leise); max-width: 34em; }
.waldkirch-rat .knopf--hell { color: var(--hell); }
.waldkirch-frage:has(#wf1-ja:checked) .waldkirch-rat--recruiting,
.waldkirch-frage:has(#wf2-ja:checked) .waldkirch-rat--recruiting,
.waldkirch-frage:has(#wf3-ja:checked) .waldkirch-rat--auftritt { display: grid; animation: ort-feld .5s var(--weich) both; }
.waldkirch-frage:not(:has(#wf1-ja:checked)):not(:has(#wf2-ja:checked)):not(:has(#wf3-ja:checked)) .waldkirch-rat--vorn { display: grid; }
@media (max-width: 1000px) {
  .waldkirch-frage { grid-template-columns: minmax(0, 1fr); }
  .waldkirch-frage__kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .waldkirch-frage__kopf p:not(.waldkirch-frage__stand) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) { .waldkirch-frage__punkt { padding: 18px; } .waldkirch-frage__punkt legend { font-size: 17px; } .waldkirch-frage__stand b { font-size: 36px; } }

/* ---------- Elztal-Linie: Haltestellen als Reiter ---------- */
.waldkirch-linie { display: grid; gap: clamp(28px, 4vw, 48px); }
.waldkirch-linie__strecke { position: relative; height: 150px; margin: 0 clamp(30px, 4vw, 56px); }
.waldkirch-linie__gleis { position: absolute; left: 0; right: 0; top: 66px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(246, 239, 230, .3) 0 14px, rgba(246, 239, 230, .12) 14px 20px); }
.waldkirch-linie__weg { position: absolute; top: -2px; height: 10px; left: 36.8%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 22px rgba(244, 165, 58, .6); transition: left .7s var(--weich), width .7s var(--weich); }
.waldkirch-linie[data-aktiv="0"] .waldkirch-linie__weg { left: 0; width: 36.8%; }
.waldkirch-linie[data-aktiv="1"] .waldkirch-linie__weg { left: 18.7%; width: 18.1%; }
.waldkirch-linie[data-aktiv="3"] .waldkirch-linie__weg { width: 7.2%; }
.waldkirch-linie[data-aktiv="4"] .waldkirch-linie__weg { width: 25.4%; }
.waldkirch-linie[data-aktiv="5"] .waldkirch-linie__weg { width: 63.2%; }
.waldkirch-halt { position: absolute; left: var(--pos); top: 52px; display: grid; justify-items: center; gap: 4px; min-width: 44px; padding: 0 4px 6px; margin: 0; border: 0; border-radius: 12px; background: none; color: var(--hell); font: 600 15.5px/1.15 var(--grotesk); white-space: nowrap; transform: translateX(-50%); cursor: pointer; }
.waldkirch-halt i { width: 34px; height: 34px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 3px var(--bernstein-licht); transition: background .25s, box-shadow .25s, transform .3s var(--weich); }
.waldkirch-halt small { font-size: 12.5px; font-weight: 400; color: var(--hell-leise); }
.waldkirch-halt:hover i { transform: scale(1.08); }
.waldkirch-halt[aria-selected="true"] i { background: var(--bernstein); box-shadow: 0 0 0 6px rgba(244, 165, 58, .25), 0 0 24px rgba(244, 165, 58, .8); }
.waldkirch-halt[aria-selected="true"] span { color: var(--bernstein-licht); }
.waldkirch-halt:focus-visible { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.waldkirch-halt--ziel i { box-shadow: inset 0 0 0 3px var(--hell), 0 0 0 4px rgba(246, 239, 230, .12); }
.waldkirch-halt--klein { top: 14px; display: flex; flex-direction: column-reverse; align-items: center; gap: 30px; pointer-events: none; cursor: default; font-size: 12.5px; font-weight: 400; color: var(--hell-leise); }
.waldkirch-halt--klein i { width: 14px; height: 14px; margin-bottom: -2px; box-shadow: inset 0 0 0 2px rgba(246, 239, 230, .45); }
.waldkirch-linie__felder { display: grid; }
.waldkirch-linie__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 20px 56px; align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.waldkirch-linie__feld[hidden] { display: none; }
.waldkirch-linie__km { display: grid; gap: 6px; }
.waldkirch-linie__km b { font: italic 400 clamp(72px, 8vw, 116px)/.9 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.waldkirch-linie__km span { font-size: 15px; color: var(--hell-leise); }
.waldkirch-linie__feld > div { display: grid; gap: 14px; justify-items: start; }
.waldkirch-linie__feld h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.waldkirch-linie__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.waldkirch-linie__feld p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); max-width: 40em; }
.waldkirch-linie__feld .knopf--hell { color: var(--hell); }
@media (prefers-reduced-motion: no-preference) { .waldkirch-linie__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
/* Handy: Linie senkrecht, Namen rechts */
@media (max-width: 760px) {
  .waldkirch-linie__strecke { height: 520px; margin: 0 0 0 8px; }
  .waldkirch-linie__gleis { left: 16px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; background: repeating-linear-gradient(180deg, rgba(246, 239, 230, .3) 0 14px, rgba(246, 239, 230, .12) 14px 20px); }
  .waldkirch-linie__weg { top: 36.8%; left: -2px; width: 10px; height: 0; transition: top .7s var(--weich), height .7s var(--weich); }
  .waldkirch-linie[data-aktiv] .waldkirch-linie__weg { left: -2px; width: 10px; }
  .waldkirch-linie[data-aktiv="0"] .waldkirch-linie__weg { top: 0; height: 36.8%; }
  .waldkirch-linie[data-aktiv="1"] .waldkirch-linie__weg { top: 18.7%; height: 18.1%; }
  .waldkirch-linie[data-aktiv="3"] .waldkirch-linie__weg { height: 7.2%; }
  .waldkirch-linie[data-aktiv="4"] .waldkirch-linie__weg { height: 25.4%; }
  .waldkirch-linie[data-aktiv="5"] .waldkirch-linie__weg { height: 63.2%; }
  .waldkirch-halt { left: 0; top: var(--pos); grid-template-columns: 38px auto auto; align-items: center; justify-items: start; gap: 10px; min-height: 44px; padding: 0 8px 0 0; transform: translateY(-50%); }
  .waldkirch-halt i { width: 26px; height: 26px; margin-left: 6px; }
  .waldkirch-halt--klein { top: var(--pos); flex-direction: row; gap: 18px; padding-left: 12px; }
  .waldkirch-halt--klein i { width: 12px; height: 12px; margin: 0; }
  .waldkirch-linie__feld { grid-template-columns: minmax(0, 1fr); }
}

/* Niedrige Bildschirme: Ortsmarke weicht, damit die Vertrauensleiste im ersten Bild bleibt (Entfernung steht in Kürze und FAQ) */
@media (min-width: 1100px) and (max-height: 760px) { .waldkirch-einstieg .ortsmarke { display: none; } }
@media (max-width: 400px) and (max-height: 780px) { .waldkirch-einstieg .ortsmarke { display: none; } }

/* ==========================================================================
   Ortsseiten H2 (ab 17.10.2026, Muster Emmendingen)
   ort-…  gemeinsam für alle zehn Ortsseiten: Radar mit Orten im Umkreis, Kartenszene, Quellenzeile,
          „Was das heißt“, Leistungs-Register mit Links, Nachbarorte als Wegweiser-Liste.
   emm-…  nur Emmendingen: Pendlerwaage, Branchen-Wähler, Zentralitäts-Skala, Weg durch den Standort.
   Nur Tokens aus :root, kein eigenes JavaScript (Reiter über data-reiter aus ares.js).
   ========================================================================== */

/* ---------- Quellenzeile unter Werkzeugen ---------- */
.ort-quelle { margin-top: 18px; max-width: 62em; font-size: 13.5px; line-height: 1.5; color: var(--leise); }
.ort-quelle--dunkel { color: var(--hell-leise); }

/* ---------- Kartenszene im Einstieg (gezeichneter Stadtausschnitt) ---------- */
.ort-szene-karte__bild { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; border-radius: 16px; background: rgba(255, 244, 228, .04); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.ort-szene-karte__fluss { fill: none; stroke: rgba(205, 191, 174, .28); stroke-width: 14; stroke-linecap: round; }
.ort-szene-karte__strasse { fill: none; stroke: rgba(246, 239, 230, .22); stroke-width: 4; stroke-linecap: round; }
.ort-szene-karte__strasse--gross { stroke: rgba(246, 239, 230, .34); stroke-width: 8; }
.ort-szene-karte__platz { fill: rgba(244, 165, 58, .1); stroke: rgba(244, 165, 58, .35); stroke-width: 1.5; }
.ort-szene-karte__name { font: 600 12px var(--grotesk); fill: var(--hell-leise); letter-spacing: .02em; }
.ort-szene-karte__name--fluss { font: italic 400 16px var(--serif); }
.ort-szene-karte__nadel--andere circle { fill: var(--espresso-3); stroke: var(--hell-leise); stroke-width: 2; }
.ort-szene-karte__nadel--sie path { fill: var(--bernstein); }
.ort-szene-karte__kern { fill: var(--espresso); }
.ort-szene-karte__puls { fill: rgba(244, 165, 58, .25); transform-box: fill-box; transform-origin: center; }
.ort-szene-karte__marke { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .32); font-size: 13.5px; color: var(--hell-leise); }
.ort-szene-karte__marke b { color: var(--hell); }
@media (prefers-reduced-motion: no-preference) {
  .ort-szene-karte.ist-aktiv .ort-szene-karte__nadel { animation: ort-nadel .7s var(--weich) both; animation-delay: calc(.3s + var(--i) * .35s); }
  .ort-szene-karte.ist-aktiv .ort-szene-karte__puls { animation: ort-puls 2.2s ease-out 1.6s infinite; }
}
@keyframes ort-nadel { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes ort-puls { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
@media (max-width: 760px) {
  .ort-szene-karte__marke, .ort-szene-karte__nur-gross { display: none; }
  .ort-szene-karte__name { font-size: 19px; }
  .ort-szene-karte__name--fluss { font-size: 24px; }
}

/* ---------- Radar: Orte im Umkreis (Reiter) ---------- */
.ort-radar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ort-radar__karte { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 42%), var(--espresso);
  box-shadow: 0 40px 80px -40px rgba(28, 23, 19, .55), inset 0 0 0 1px rgba(246, 239, 230, .08); overflow: hidden; }
.ort-radar__ring { position: absolute; left: 50%; top: 50%; width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(246, 239, 230, .2); pointer-events: none; }
.ort-radar__ring i { position: absolute; left: 100%; top: 50%; transform: translate(-50%, -50%); padding: 0 6px; background: var(--espresso); font: 600 11px/1.4 var(--grotesk); font-style: normal; letter-spacing: .04em; color: var(--hell-leise); white-space: nowrap; }
.ort-radar__ring--aussen { border-style: solid; border-color: rgba(244, 165, 58, .25); }
.ort-radar__strahl { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, 0) 18%, rgba(244, 165, 58, 0)); }
@media (prefers-reduced-motion: no-preference) { .ort-radar__strahl { animation: ort-strahl 9s linear infinite; } }
@keyframes ort-strahl { to { transform: rotate(360deg); } }
.ort-radar__himmel { position: absolute; left: 50%; top: 2.2%; transform: translateX(-50%); font: italic 400 18px/1 var(--serif); color: var(--bernstein-licht); pointer-events: none; }
.ort-radar__mitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; gap: 2px; width: clamp(64px, 14%, 84px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--hell); color: var(--tinte); cursor: pointer; box-shadow: 0 0 0 6px rgba(244, 165, 58, .18), 0 0 40px rgba(244, 165, 58, .45); font: 700 11px/1 var(--grotesk); letter-spacing: .08em; transition: box-shadow .3s; }
.ort-radar__mitte img { width: 46%; height: auto; }
.ort-radar__mitte[aria-selected="true"] { box-shadow: 0 0 0 3px var(--bernstein), 0 0 0 10px rgba(244, 165, 58, .2), 0 0 50px rgba(244, 165, 58, .6); }
.ort-radar__ort { position: absolute; left: var(--x); top: var(--y); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 44px; padding: 4px 6px; margin: 0; border: 0; border-radius: 10px; background: none; color: var(--hell); text-align: left; cursor: pointer; transform: translate(-11px, -50%); transition: background .25s; }
.ort-radar__ort i { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 2px var(--bernstein-licht); transition: background .25s, box-shadow .25s; }
.ort-radar__ort span { font: 600 15px/1.15 var(--grotesk); white-space: nowrap; }
.ort-radar__ort small { font-size: 12px; line-height: 1.2; color: var(--hell-leise); }
.ort-radar__ort--links { grid-template-columns: auto auto; transform: translate(calc(-100% + 11px), -50%); text-align: right; }
.ort-radar__ort--links i { grid-column: 2; grid-row: 1 / span 2; }
.ort-radar__ort--links span, .ort-radar__ort--links small { grid-column: 1; }
.ort-radar__ort:hover { background: rgba(246, 239, 230, .08); }
.ort-radar__ort[aria-selected="true"] i { background: var(--bernstein); box-shadow: 0 0 0 5px rgba(244, 165, 58, .28), 0 0 18px rgba(244, 165, 58, .8); }
.ort-radar__ort[aria-selected="true"] span { color: var(--bernstein-licht); }
.ort-radar__felder { display: grid; }
.ort-radar__feld { grid-area: 1 / 1; display: grid; gap: 16px; align-content: center; justify-items: start; }
.ort-radar__km { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--tinte); width: 100%; }
.ort-radar__km b { font: italic 400 clamp(84px, 9vw, 132px)/.9 var(--serif); letter-spacing: -.02em; color: var(--bernstein-text); font-variant-numeric: tabular-nums; }
.ort-radar__km span { font-size: 18px; font-weight: 600; color: var(--leise); }
.ort-radar__feld h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
.ort-radar__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.ort-radar__feld p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 34em; }
@media (prefers-reduced-motion: no-preference) { .ort-radar__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
@keyframes ort-feld { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .ort-radar { grid-template-columns: minmax(0, 1fr); }
  .ort-radar__karte { max-width: 520px; }
}
@media (max-width: 560px) {
  .ort-radar__ort { padding: 2px 4px; column-gap: 6px; min-height: 40px; }
  .ort-radar__ort span { font-size: 13px; }
  .ort-radar__ort small { display: none; }
  .ort-radar__ort i { grid-row: auto; width: 10px; height: 10px; }
  .ort-radar__ring i { display: none; }
  .ort-radar__himmel { font-size: 15px; }
}

/* ---------- Was das heißt (drei Folgerungen, redaktionell) ---------- */
.ort-folgen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 24px 72px; margin-top: clamp(64px, 8vw, 112px); align-items: start; }
.ort-folgen__titel { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; position: sticky; top: calc(var(--kopf-h) + 24px); }
.ort-folgen__titel em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.ort-folgen__liste { counter-reset: f; border-top: 1px solid var(--tinte); }
.ort-folgen__liste li { counter-increment: f; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 26px 0; border-bottom: 1px solid var(--linie); }
.ort-folgen__liste li::before { content: counter(f, upper-roman); grid-row: span 2; font: italic 400 34px/1 var(--serif); color: var(--bernstein-text); }
.ort-folgen__liste b { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.25; }
.ort-folgen__liste p { font-size: 17px; line-height: 1.6; color: var(--leise); }
@media (max-width: 900px) { .ort-folgen { grid-template-columns: minmax(0, 1fr); } .ort-folgen__titel { position: static; } }
@media (max-width: 560px) { .ort-folgen__liste li { grid-template-columns: 44px minmax(0, 1fr); } .ort-folgen__liste li::before { font-size: 28px; } }

/* ---------- Leistungs-Register mit Links (ergänzt .umfang) ---------- */
.ort-umfang h3 a { text-decoration: underline; text-decoration-color: var(--bernstein); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .25s; }
.ort-umfang h3 a:hover, .ort-umfang h3 a:focus-visible { color: var(--bernstein-licht); }
.abschnitt--dunkel .ort-umfang ul { color: var(--hell); }

/* ---------- Nachbarorte als Wegweiser-Liste ---------- */
.ort-nachbarn { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 24px 72px; align-items: start; }
.ort-nachbarn__titel { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.ort-nachbarn__titel em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.ort-nachbarn__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--tinte); }
.ort-nachbarn__liste a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 56px; padding: 16px 4px 14px; border-bottom: 1px solid var(--linie); text-decoration: none; transition: padding .3s var(--weich), background .3s; }
.ort-nachbarn__liste b { font-size: 18px; font-weight: 600; }
.ort-nachbarn__liste span { font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); white-space: nowrap; }
.ort-nachbarn__liste a:hover, .ort-nachbarn__liste a:focus-visible { padding-left: 12px; background: linear-gradient(90deg, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 80%); }
.ort-nachbarn__alle b { text-decoration: underline; text-decoration-color: var(--bernstein); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 1000px) { .ort-nachbarn { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .ort-nachbarn__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
@media (max-width: 380px) { .ort-nachbarn__liste b { font-size: 16px; } .ort-nachbarn__liste span { font-size: 17px; } }

/* ==========================================================================
   Nur Emmendingen
   ========================================================================== */

/* ---------- Pendlerwaage ---------- */
.emm-waage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.emm-waage__bild { position: relative; height: clamp(320px, 30vw, 400px); }
.emm-waage__balken { --neigung: -4deg; position: absolute; left: 16%; right: 16%; top: 30%; z-index: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--bernstein), var(--bernstein-licht) 50%, var(--hell-leise)); transform: rotate(var(--neigung)); transition: transform 1s var(--weich); }
.emm-waage[data-aktiv="1"] .emm-waage__balken { --neigung: -2deg; }
.emm-waage[data-aktiv="2"] .emm-waage__balken { --neigung: 0deg; }
.emm-waage__balken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 3px var(--bernstein); }
.emm-waage__schale { position: absolute; top: 3px; display: grid; justify-items: center; gap: 4px; width: 150px; padding-top: 70px; transform: translateX(-50%) rotate(calc(var(--neigung) * -1)); transform-origin: top center; transition: transform 1s var(--weich); }
.emm-waage__schale::before { content: ""; position: absolute; left: 50%; top: 0; width: 70%; height: 64px; transform: translateX(-50%); background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--hell-leise) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), var(--hell-leise) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; opacity: .55; }
.emm-waage__schale::after { content: ""; position: absolute; left: 0; right: 0; top: 64px; height: 8px; border-radius: 0 0 999px 999px; background: var(--hell-leise); opacity: .5; }
.emm-waage__schale--ein { left: 0; }
.emm-waage__schale--aus { left: 100%; }
.emm-waage__schale b { margin-top: 14px; font: italic 400 clamp(44px, 4.4vw, 60px)/1 var(--serif); color: var(--hell); font-variant-numeric: tabular-nums; }
.emm-waage__schale span { font-size: 15px; letter-spacing: .04em; color: var(--hell-leise); }
.emm-waage[data-aktiv="0"] .emm-waage__schale--ein b, .emm-waage[data-aktiv="1"] .emm-waage__schale--aus b { color: var(--bernstein-licht); }
.emm-waage[data-aktiv="0"] .emm-waage__schale--ein::after, .emm-waage[data-aktiv="1"] .emm-waage__schale--aus::after { background: var(--bernstein); opacity: 1; }
.emm-waage__fuss { position: absolute; left: 50%; top: calc(30% + 3px); bottom: 0; transform: translateX(-50%); display: grid; align-content: end; justify-items: center; width: 180px; padding-bottom: 16px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(244, 165, 58, .06), rgba(244, 165, 58, .3)); text-align: center; transition: background .4s; }
.emm-waage__fuss span { font: italic 400 28px/1 var(--serif); color: var(--hell); }
.emm-waage__fuss small { font-size: 12px; color: var(--hell-leise); }
.emm-waage[data-aktiv="2"] .emm-waage__fuss { background: linear-gradient(to bottom, rgba(244, 165, 58, .25), rgba(244, 165, 58, .6)); }
.emm-waage[data-aktiv="2"] .emm-waage__fuss span { color: var(--bernstein-licht); }
.emm-waage__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 22px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.emm-waage__wahl button { display: grid; gap: 2px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px; background: none; color: var(--hell-leise); font: 600 14px/1.2 var(--grotesk); cursor: pointer; transition: background .3s, color .3s; }
.emm-waage__wahl button b { font: italic 400 26px/1 var(--serif); color: var(--hell); }
.emm-waage__wahl button[aria-selected="true"] { background: var(--hell); color: var(--tinte); }
.emm-waage__wahl button[aria-selected="true"] b { color: var(--bernstein-text); }
.emm-waage__feld { display: grid; gap: 16px; justify-items: start; margin-top: 30px; }
.emm-waage__feld h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.emm-waage__feld h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.emm-waage__feld p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
@media (prefers-reduced-motion: no-preference) { .emm-waage__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
@media (max-width: 900px) { .emm-waage { grid-template-columns: minmax(0, 1fr); } .emm-waage__bild { max-width: 520px; width: 100%; justify-self: center; } }
@media (max-width: 560px) {
  .emm-waage__bild { height: 290px; }
  .emm-waage__schale { width: 112px; padding-top: 56px; }
  .emm-waage__schale::before { height: 50px; }
  .emm-waage__schale::after { top: 50px; }
  .emm-waage__fuss { width: 130px; }
  .emm-waage__wahl { grid-template-columns: minmax(0, 1fr); }
  .emm-waage__wahl button { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; min-height: 52px; text-align: left; }
}

/* ---------- Branchen-Wähler ---------- */
.emm-branchen { display: grid; gap: 22px; }
.emm-branchen__balken { display: flex; height: 64px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linie); }
.emm-branchen__teil { flex: 0 0 var(--anteil); display: flex; align-items: center; padding: 0 16px; background: var(--sand); color: var(--leise); transition: background .4s, color .4s, flex-basis .6s var(--weich); }
.emm-branchen__teil + .emm-branchen__teil { border-left: 2px solid var(--papier); }
.emm-branchen__teil b { font: italic 400 22px/1 var(--serif); white-space: nowrap; }
.emm-branchen[data-aktiv="0"] .emm-branchen__teil--1, .emm-branchen[data-aktiv="1"] .emm-branchen__teil--2, .emm-branchen[data-aktiv="2"] .emm-branchen__teil--3 { background: var(--espresso); color: var(--bernstein-licht); }
.emm-branchen__wahl { display: grid; grid-template-columns: 69fr 16.5fr 14.5fr; gap: 8px; }
.emm-branchen__wahl button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 2px 10px; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--creme); color: var(--tinte); text-align: left; font: 600 16px/1.25 var(--grotesk); cursor: pointer; transition: background .3s, box-shadow .3s; }
.emm-branchen__wahl button i { grid-row: span 2; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bernstein-tief); }
.emm-branchen__wahl button small { font-size: 13.5px; font-weight: 400; color: var(--leise); }
.emm-branchen__wahl button:hover { box-shadow: inset 0 0 0 1px var(--bernstein-tief); }
.emm-branchen__wahl button[aria-selected="true"] { background: var(--espresso); color: var(--hell); }
.emm-branchen__wahl button[aria-selected="true"] small { color: var(--hell-leise); }
.emm-branchen__wahl button[aria-selected="true"] i { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); }
.emm-branchen__inhalt { display: grid; }
.emm-branchen__feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); gap: 20px 56px; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--linie); align-items: start; }
.emm-branchen__zahl { display: grid; font-size: 15px; color: var(--leise); }
.emm-branchen__zahl b { font: italic 400 clamp(46px, 4.6vw, 64px)/1 var(--serif); color: var(--bernstein-text); }
.emm-branchen__feld > div { display: grid; gap: 14px; justify-items: start; }
.emm-branchen__feld h3 { font-size: clamp(22px, 2vw, 28px); }
.emm-branchen__feld p { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 38em; }
@media (prefers-reduced-motion: no-preference) { .emm-branchen__feld:not([hidden]) { animation: ort-feld .5s var(--weich) both; } }
@media (max-width: 900px) { .emm-branchen__wahl { grid-template-columns: minmax(0, 1fr); } .emm-branchen__feld { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .emm-branchen__balken { height: 48px; } .emm-branchen__teil { padding: 0 8px; } .emm-branchen__teil b { font-size: 15px; } .emm-branchen__teil--2 b, .emm-branchen__teil--3 b { font-size: 13px; } }

/* ---------- Zentralitäts-Skala ---------- */
.emm-zentral { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 64px; align-items: center; margin: clamp(56px, 7vw, 96px) 0 0; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--espresso); color: var(--hell); }
.emm-zentral__text { display: grid; gap: 12px; }
.emm-zentral__text h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.emm-zentral__text h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.emm-zentral__text p { font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
.emm-zentral__skala { position: relative; height: 130px; }
.emm-zentral__bahn { position: absolute; left: 0; right: 0; top: 70px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(246, 239, 230, .14) 33.3%, var(--bernstein-tief) 33.3%, var(--bernstein-licht) 79.3%, rgba(246, 239, 230, .14) 79.3%); }
.emm-zentral__marke { position: absolute; left: var(--wert); top: 0; display: grid; justify-items: center; transform: translateX(-50%); text-align: center; }
.emm-zentral__marke b { font: italic 400 30px/1 var(--serif); color: var(--hell); }
.emm-zentral__marke small { font-size: 12.5px; color: var(--hell-leise); }
.emm-zentral__marke::after { content: ""; width: 2px; height: 22px; margin-top: 6px; background: currentColor; }
.emm-zentral__marke--d { color: var(--hell-leise); }
.emm-zentral__marke--emm { color: var(--bernstein-licht); }
.emm-zentral__marke--emm b { font-size: 40px; color: var(--bernstein-licht); }
.emm-zentral__marke--emm { top: -10px; }
.emm-zentral__ende { position: absolute; top: 88px; font-size: 12px; color: var(--hell-leise); }
.emm-zentral__ende--a { left: 0; } .emm-zentral__ende--b { right: 0; }
.emm-zentral figcaption { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--linie-dunkel); font-size: 13px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 900px) { .emm-zentral { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Weg durch den Standort ---------- */
.emm-weg__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 40px 80px; align-items: start; }
.emm-weg__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); display: grid; gap: 22px; justify-items: start; }
.emm-weg__kopf h2 { font-size: clamp(34px, 4vw, 54px); }
.emm-weg__kopf p { font-size: 19px; line-height: 1.55; color: var(--leise); max-width: 26em; }
.emm-weg { position: relative; display: grid; gap: 0; }
.emm-weg > li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 74px; bottom: -18px; width: 2px; background: repeating-linear-gradient(to bottom, var(--bernstein-tief) 0 10px, transparent 10px 18px); }
.emm-weg > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 18px 0 30px; }
.emm-weg__nr { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief), 0 0 0 6px var(--creme); font: italic 400 22px/1 var(--serif); color: var(--bernstein-text); }
.emm-weg h3 { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.25; padding-top: 12px; }
.emm-weg p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--leise); }
.emm-weg small { display: inline-block; margin-top: 10px; font-size: 13px; letter-spacing: .02em; color: var(--leise); border-bottom: 1px solid var(--linie); }
.emm-weg__ziel .emm-weg__nr { background: var(--hell); box-shadow: 0 0 0 2px var(--bernstein), 0 0 0 6px var(--creme), 0 0 30px rgba(244, 165, 58, .5); }
.emm-weg__ziel .emm-weg__nr img { width: 28px; height: auto; }
.emm-weg__ziel > div { padding: 18px 22px 20px; margin-top: -6px; border-radius: 20px; background: var(--espresso); color: var(--hell); }
.emm-weg__ziel h3 { padding-top: 0; }
.emm-weg__ziel p, .emm-weg__ziel small { color: var(--hell-leise); border-color: var(--linie-dunkel); }
@media (max-width: 900px) { .emm-weg__raster { grid-template-columns: minmax(0, 1fr); } .emm-weg__kopf { position: static; } }
@media (max-width: 560px) {
  .emm-weg > li:not(:last-child)::after { left: 21px; top: 62px; }
  .emm-weg > li { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .emm-weg__nr { width: 44px; height: 44px; font-size: 18px; }
  .emm-weg h3 { padding-top: 8px; }
}

/* Reiter-Felder: hidden muss gegen display:grid gewinnen */
.ort-radar__feld[hidden], .emm-waage__feld[hidden], .emm-branchen__feld[hidden] { display: none; }

/* ---------- Kleine Handys (360×740, 375×667): Vertrauensleiste bleibt im ersten Bild (Schlussprüfung 17.10.2026) ---------- */
@media (max-width: 400px) and (max-height: 780px) {
  .einstieg--ruhig:has(.ortsmarke) .einstieg__aussage { font-size: 32px; }
  .einstieg--ruhig:has(.ortsmarke) .vertrauen { margin-top: 16px; }
  .einstieg--ruhig .ortsmarke { margin-top: 8px; gap: 2px 12px; font-size: 13.5px; }
  .einstieg--ruhig .ortsmarke b { font-size: 19px; }
  /* zweizeilige Ortsmarke (Emmendingen, Endingen) und langer Suchbegriff (Einsatzgebiet): hier entfällt die Ortsmarke, wie auf Denzlingen und Waldkirch */
  .emm-einstieg .ortsmarke, .endingen-einstieg .ortsmarke { display: none; }
  .einsatzgebiet-einstieg .einstieg__klein { font-size: 14px; gap: 8px; }
  .einsatzgebiet-einstieg .einstieg__klein::before { width: 16px; }
  .einsatzgebiet-einstieg .einstieg__lead { margin-top: 8px; font-size: 15px; }
}

/* ==========================================================================
   Zusatz Personalmarketing (personalmarketing/index.html, Quelle _werkzeug/seiten/33-personalmarketing.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix personalmarketing-. Nur Tokens aus :root.
   Achtung: teile/zusatz/personalmarketing.css (alter Rahmen) nutzt personalmarketing-test*; hier deshalb
   personalmarketing-selbsttest*, damit die alten Regeln nicht greifen.
   Enthält: Recruiting-Formular (Feld Stelle), Live-Szene „Floskel wird Klartext“ (Karten drehen sich),
   Schätzfrage Wechselgründe mit Balken, Floskel-Dreher, Kanalfilter, Selbsttest mit Glas-Zähler, Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-szenen aus ares.js; Filter und Dreher über :has().
   ========================================================================== */

/* ---------- Einstieg: Recruiting-Formular mit Feld Stelle ---------- */
.personalmarketing-start .start__wahl { margin-bottom: 10px; }
.personalmarketing-start__stelle { height: 54px; flex: none; width: 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 36px -24px rgba(0, 0, 0, .9); }
.personalmarketing-start__stelle input { font-size: 17px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .personalmarketing-start__stelle { height: 46px; }
  .personalmarketing-einstieg .start { margin-top: 14px; }
  .personalmarketing-start .start__wahl { margin-bottom: 8px; }
  .personalmarketing-start .start__fuss { margin-top: 8px; }
  .personalmarketing-start .start__feld:not(.personalmarketing-start__stelle), .personalmarketing-start .start__knopf { height: 56px; min-height: 56px; }
}
@media (max-width: 760px) {
  .personalmarketing-start__stelle { height: 50px; padding: 0 18px; }
  .personalmarketing-start .start__wahl { margin-bottom: 8px; }
}

/* ---------- Live-Szene: Floskel-Karten drehen sich zu Klartext, dann die Frage an das Team ---------- */
.personalmarketing-sz .sz-kopf { margin-bottom: 14px; }
.personalmarketing-sz__karten { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.personalmarketing-sz__karte { position: relative; flex: none; height: 96px; perspective: 900px; }
.personalmarketing-sz__vorne, .personalmarketing-sz__hinten { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 20px; border-radius: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: none; }
.personalmarketing-sz__vorne { background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); }
.personalmarketing-sz__hinten { background: #f6efe6; color: var(--tinte); transform: rotateX(180deg); box-shadow: 0 0 0 1.5px var(--bernstein), 0 18px 34px -18px rgba(244, 165, 58, .7); }
.personalmarketing-sz__vorne small, .personalmarketing-sz__hinten small, .personalmarketing-sz__frage small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.personalmarketing-sz__vorne small { color: #a99b89; }
.personalmarketing-sz__hinten small { color: var(--bernstein-text); }
.personalmarketing-sz__vorne b { position: relative; align-self: flex-start; font: italic 400 25px/1.1 var(--serif); color: #cdbfae; }
.personalmarketing-sz__vorne b::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; background: var(--bernstein); transform: scaleX(0); transform-origin: left; }
.personalmarketing-sz__hinten b { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.personalmarketing-sz__frage { display: grid; gap: 6px; margin-top: auto; padding: 14px 18px; border-radius: 18px; background: linear-gradient(90deg, rgba(244, 165, 58, .18), rgba(244, 165, 58, .04)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .45); }
.personalmarketing-sz__frage small { color: var(--bernstein-licht); }
.personalmarketing-sz__frage b { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--hell); }
.personalmarketing-sz__frage span { display: flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 10px; font-size: 13px; color: #a99b89; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.personalmarketing-sz__fuss { display: none; }
/* Bewegung, 12 Sekunden je Durchlauf (bei reduzierter Bewegung stehen die Floskeln) */
.personalmarketing-sz__vorne, .personalmarketing-sz__hinten { will-change: transform; }
.ist-aktiv .personalmarketing-sz__vorne { animation: personalmarketing-vorne 12s ease-in-out infinite; animation-delay: calc(var(--k) * 2.2s); }
.ist-aktiv .personalmarketing-sz__hinten { animation: personalmarketing-hinten 12s ease-in-out infinite; animation-delay: calc(var(--k) * 2.2s); }
.ist-aktiv .personalmarketing-sz__vorne b::after { animation: personalmarketing-streichen 12s ease infinite; animation-delay: calc(var(--k) * 2.2s); }
@keyframes personalmarketing-vorne { 0%, 12% { transform: none; } 18%, 86% { transform: rotateX(-180deg); } 92%, 100% { transform: none; } }
@keyframes personalmarketing-hinten { 0%, 12% { transform: rotateX(180deg); } 18%, 86% { transform: none; } 92%, 100% { transform: rotateX(180deg); } }
@keyframes personalmarketing-streichen { 0%, 4% { transform: scaleX(0); } 10%, 100% { transform: none; } }
.ist-aktiv .personalmarketing-sz__frage { animation: personalmarketing-frage 12s var(--weich) infinite; }
@keyframes personalmarketing-frage { 0%, 44% { opacity: .28; transform: translateY(10px); } 50%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: .28; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .personalmarketing-sz__frage { opacity: 1; } }
@media (min-width: 1100px) and (max-height: 800px) {
  .personalmarketing-sz__karte { height: 82px; }
  .personalmarketing-sz__karten { gap: 9px; }
  .personalmarketing-sz__frage { padding: 10px 16px; }
  .personalmarketing-sz__frage span { height: 26px; }
}
@media (max-width: 760px) {
  .personalmarketing-sz .sz-kopf { margin-bottom: 9px; }
  .personalmarketing-sz__karte { height: 76px; }
  .personalmarketing-sz__karte + .personalmarketing-sz__karte, .personalmarketing-sz__frage { display: none; }
  .personalmarketing-sz__vorne, .personalmarketing-sz__hinten { padding: 0 14px; gap: 3px; border-radius: 14px; }
  .personalmarketing-sz__vorne b { font-size: 21px; }
  .personalmarketing-sz__hinten b { font-size: 13.5px; }
}

/* ---------- Warum Leute gehen: Schätzfrage mit Balken ---------- */
.personalmarketing-gehen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.personalmarketing-gehen__text h2 { max-width: 11em; }
.personalmarketing-gehen__lead { margin-top: 22px; font: italic 400 clamp(24px, 2.1vw, 30px)/1.25 var(--serif); color: var(--tinte); }
.personalmarketing-gehen__text > p:not(.personalmarketing-gehen__lead) { max-width: 32em; margin-top: 16px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.personalmarketing-gehen__text strong { color: var(--tinte); }
.personalmarketing-raten { padding: clamp(26px, 3.2vw, 44px); border-radius: 28px; background: var(--papier); box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.personalmarketing-raten__wahl { min-width: 0; margin: 0; padding: 0; border: 0; }
.personalmarketing-raten__wahl legend { padding: 0; font: italic 400 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); color: var(--tinte); }
.personalmarketing-raten__balken { display: grid; gap: 10px; margin-top: 22px; }
.personalmarketing-raten__zeile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wert" "spur spur" "notiz notiz"; gap: 8px 14px; padding: 14px 18px 16px; border-radius: 16px; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; transition: box-shadow .25s, background .25s; }
.personalmarketing-raten__zeile input { position: absolute; opacity: 0; pointer-events: none; }
.personalmarketing-raten__zeile:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.personalmarketing-raten__zeile:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.personalmarketing-raten__name { grid-area: name; font-size: 17px; font-weight: 600; }
.personalmarketing-raten__spur { grid-area: spur; position: relative; height: 10px; overflow: hidden; border-radius: 10px; background: repeating-linear-gradient(90deg, var(--linie) 0 10px, rgba(224, 214, 200, 0) 10px 14px); }
.personalmarketing-raten__spur i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) / .35 * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(205, 191, 174, .7), #b9a68f); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--weich); }
.personalmarketing-raten__zeile > b { grid-area: wert; font: italic 400 26px/1 var(--serif); color: var(--bernstein-text); opacity: 0; transition: opacity .4s .5s; }
.personalmarketing-raten__zeile > small { grid-area: notiz; font-size: 13px; font-weight: 700; color: var(--bernstein-text); opacity: 0; transition: opacity .4s .8s; }
.personalmarketing-raten:has(input:checked) .personalmarketing-raten__spur i { transform: none; }
.personalmarketing-raten:has(input:checked) .personalmarketing-raten__zeile > b, .personalmarketing-raten:has(input:checked) .personalmarketing-raten__zeile > small { opacity: 1; }
.personalmarketing-raten__zeile:first-child .personalmarketing-raten__spur i { background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); }
.personalmarketing-raten__zeile:has(input:checked) { background: var(--espresso); box-shadow: 0 16px 30px -18px rgba(28, 23, 19, .8); }
.personalmarketing-raten__zeile:has(input:checked) .personalmarketing-raten__name { color: var(--hell); }
.personalmarketing-raten__zeile:has(input:checked) > b, .personalmarketing-raten__zeile:has(input:checked) > small { color: var(--bernstein-licht); }
.personalmarketing-raten__zeile:has(input:checked) .personalmarketing-raten__spur { background: repeating-linear-gradient(90deg, rgba(246, 239, 230, .14) 0 10px, rgba(246, 239, 230, 0) 10px 14px); }
.personalmarketing-raten__vorher { margin-top: 16px; font-size: 15px; color: var(--leise); }
.personalmarketing-raten__danach { display: none; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.personalmarketing-raten:has(input:checked) .personalmarketing-raten__vorher { display: none; }
.personalmarketing-raten:has(input:checked) .personalmarketing-raten__danach { display: block; animation: auftritt .6s var(--weich) .6s both; }
.personalmarketing-raten__bindung { display: flex; align-items: center; gap: 16px; }
.personalmarketing-raten__bindung b { flex: none; font: italic 400 52px/1 var(--serif); color: var(--bernstein-text); white-space: nowrap; }
.personalmarketing-raten__bindung span { font-size: 16px; line-height: 1.5; color: var(--tinte); }
.personalmarketing-raten__quelle { margin-top: 12px; font-size: 13.5px; color: var(--leise); }
@media (max-width: 960px) { .personalmarketing-gehen__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .personalmarketing-raten { padding: 22px 16px; border-radius: 22px; } .personalmarketing-raten__zeile { padding: 12px 14px 14px; } .personalmarketing-raten__name { font-size: 15.5px; } }

/* ---------- Floskel und Klartext: Karten zum Umdrehen ---------- */
.personalmarketing-floskeln { overflow-x: clip; }
.personalmarketing-dreher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.personalmarketing-dreher__karte { position: relative; display: block; height: 240px; perspective: 1100px; cursor: pointer; }
.personalmarketing-dreher__karte input { position: absolute; opacity: 0; pointer-events: none; }
.personalmarketing-dreher__karte:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 4px; border-radius: 24px; }
.personalmarketing-dreher__innen { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--weich); }
.personalmarketing-dreher__karte:nth-child(even) .personalmarketing-dreher__innen { top: 18px; bottom: -18px; }
.personalmarketing-dreher__karte:has(input:checked) .personalmarketing-dreher__innen { transform: rotateY(180deg); }
.personalmarketing-dreher__vorne, .personalmarketing-dreher__hinten { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.personalmarketing-dreher__vorne { justify-content: space-between; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie), 0 30px 60px -44px rgba(60, 40, 20, .6); }
.personalmarketing-dreher__vorne small, .personalmarketing-dreher__hinten small { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.personalmarketing-dreher__vorne small { color: var(--leise); }
.personalmarketing-dreher__vorne b { font: italic 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); color: var(--tinte); }
.personalmarketing-dreher__vorne i { align-self: flex-start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 600; color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); }
.personalmarketing-dreher__karte:hover .personalmarketing-dreher__vorne i { color: var(--hell); background: var(--espresso); box-shadow: none; }
.personalmarketing-dreher__hinten { justify-content: center; color: var(--hell); background: radial-gradient(80% 70% at 100% 0%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #2a221c, #16120f); transform: rotateY(180deg); box-shadow: 0 30px 60px -36px rgba(40, 25, 10, .9); }
.personalmarketing-dreher__hinten small { color: var(--bernstein-licht); }
.personalmarketing-dreher__hinten b { font-size: 18px; font-weight: 600; line-height: 1.4; }
.personalmarketing-dreher__hinweis { margin-top: 40px; font-size: 14.5px; color: var(--leise); }
@media (max-width: 1099px) { .personalmarketing-dreher { grid-template-columns: repeat(2, minmax(0, 1fr)); } .personalmarketing-dreher__karte:nth-child(even) .personalmarketing-dreher__innen { top: 0; bottom: 0; } .personalmarketing-dreher__hinweis { margin-top: 20px; } }
@media (max-width: 560px) { .personalmarketing-dreher { grid-template-columns: minmax(0, 1fr); gap: 12px; } .personalmarketing-dreher__karte { height: 190px; } .personalmarketing-dreher__vorne, .personalmarketing-dreher__hinten { padding: 20px; border-radius: 20px; } }

/* ---------- Umfang: weiterführende Knöpfe ---------- */
.personalmarketing-umfang__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.personalmarketing-umfang__weiter p { margin-right: 6px; font-size: 16px; color: var(--leise); }
@media (max-width: 560px) { .personalmarketing-umfang__weiter .knopf { width: 100%; } }

/* ---------- Kanäle mit Filter ---------- */
.personalmarketing-filter__wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.personalmarketing-filter__wahl legend { float: left; margin-right: 8px; padding: 0; font: italic 400 24px/1.2 var(--serif); color: var(--tinte); }
.personalmarketing-filter__wahl label { position: relative; cursor: pointer; }
.personalmarketing-filter__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.personalmarketing-filter__wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.personalmarketing-filter__wahl label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.personalmarketing-filter__wahl input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: none; }
.personalmarketing-filter__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.personalmarketing-filter__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.personalmarketing-kanal { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; border-radius: 24px; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie); transition: opacity .4s, transform .4s var(--weich), box-shadow .3s, filter .4s; }
.personalmarketing-kanal--grund { background: var(--creme); box-shadow: inset 0 3px 0 var(--bernstein), inset 0 0 0 1px var(--linie); }
.personalmarketing-kanal__nr { position: absolute; right: 20px; top: 14px; font: italic 400 46px/1 var(--serif); color: rgba(138, 79, 0, .28); }
.personalmarketing-kanal h3 { font-size: 21px; }
.personalmarketing-kanal p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.personalmarketing-kanal dl { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); }
.personalmarketing-kanal dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }
.personalmarketing-kanal dt { font-weight: 700; color: var(--bernstein-text); }
.personalmarketing-kanal dd { margin: 0; color: var(--tinte); }
.personalmarketing-filter:has(#pm-f-fach:checked) .personalmarketing-kanal:not(.personalmarketing-kanal--fach):not(.personalmarketing-kanal--grund),
.personalmarketing-filter:has(#pm-f-aktiv:checked) .personalmarketing-kanal:not(.personalmarketing-kanal--aktiv):not(.personalmarketing-kanal--grund),
.personalmarketing-filter:has(#pm-f-azubi:checked) .personalmarketing-kanal:not(.personalmarketing-kanal--azubi):not(.personalmarketing-kanal--grund) { opacity: .4; filter: saturate(.3); transform: scale(.98); }
.personalmarketing-filter:has(#pm-f-fach:checked) .personalmarketing-kanal--fach,
.personalmarketing-filter:has(#pm-f-aktiv:checked) .personalmarketing-kanal--aktiv,
.personalmarketing-filter:has(#pm-f-azubi:checked) .personalmarketing-kanal--azubi { box-shadow: inset 0 0 0 2px var(--bernstein-tief), 0 26px 50px -30px rgba(228, 143, 23, .7); transform: translateY(-4px); }
.personalmarketing-filter__legende { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--leise); }
.personalmarketing-filter__legende i { width: 26px; height: 3px; border-radius: 3px; background: var(--bernstein); }
.personalmarketing-kanaele__notiz { display: flex; align-items: flex-start; gap: 14px; max-width: 58em; margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--linie); font-size: 16px; line-height: 1.6; color: var(--leise); }
.personalmarketing-kanaele__notiz .symbol { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--bernstein-text); }
@media (max-width: 1099px) { .personalmarketing-filter__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .personalmarketing-filter__liste { grid-template-columns: minmax(0, 1fr); }
  .personalmarketing-filter__wahl legend { float: none; width: 100%; margin-bottom: 4px; }
  .personalmarketing-filter__wahl span { min-height: 42px; padding: 0 14px; font-size: 14px; }
}

/* ---------- Selbsttest auf dunklem Grund ---------- */
.personalmarketing-test-abschnitt { overflow-x: clip; background: radial-gradient(60% 50% at 85% 20%, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 70%), var(--espresso); }
.personalmarketing-selbsttest { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.personalmarketing-selbsttest__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.personalmarketing-selbsttest__liste label { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; height: 100%; padding: 18px 18px 20px; border-radius: 18px; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); font-size: 16px; line-height: 1.5; color: #e9dfd2; cursor: pointer; transition: background .3s, box-shadow .3s, color .3s; }
.personalmarketing-selbsttest__liste input { position: absolute; opacity: 0; pointer-events: none; }
.personalmarketing-selbsttest__liste label:hover { box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .6); }
.personalmarketing-selbsttest__liste label:has(input:focus-visible) { outline: 2px solid var(--bernstein-licht); outline-offset: 2px; }
.personalmarketing-selbsttest__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: italic 400 18px/1 var(--serif); color: var(--bernstein-licht); box-shadow: inset 0 0 0 1.5px rgba(244, 165, 58, .45); transition: background .3s, color .3s; }
.personalmarketing-selbsttest__liste label:has(input:checked) { color: var(--hell); background: linear-gradient(135deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.personalmarketing-selbsttest__liste label:has(input:checked) .personalmarketing-selbsttest__nr { color: #1a130c; background: var(--bernstein); box-shadow: none; font-size: 0; }
.personalmarketing-selbsttest__liste label:has(input:checked) .personalmarketing-selbsttest__nr::before { content: ""; width: 14px; height: 8px; margin-top: -4px; border: solid #1a130c; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.personalmarketing-selbsttest__stand { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 16px; padding: 28px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 244, 228, .12), rgba(255, 244, 228, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(246, 239, 230, .16), 0 40px 80px -40px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.personalmarketing-selbsttest__zahl { display: flex; align-items: baseline; gap: 10px; color: var(--hell-leise); }
.personalmarketing-selbsttest__zahl span { font-size: 16px; }
.personalmarketing-selbsttest__zahl b { font: italic 400 78px/.9 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.personalmarketing-selbsttest__zahl small { font-size: 16px; }
.personalmarketing-selbsttest__balken { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(246, 239, 230, .12); }
.personalmarketing-selbsttest__balken i { display: block; width: calc(var(--anteil, 0) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transition: width .6s var(--weich); }
.personalmarketing-selbsttest__stufen { display: grid; gap: 8px; }
.personalmarketing-selbsttest__stufe { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; opacity: .5; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); transition: opacity .3s, background .3s, box-shadow .3s; }
.personalmarketing-selbsttest__stufe b { font: italic 400 20px/1.1 var(--serif); color: var(--bernstein-licht); }
.personalmarketing-selbsttest__stufe span { font-size: 14.5px; line-height: 1.5; color: #e1d5c5; }
.personalmarketing-selbsttest:is([data-summe="0"], [data-summe="1"], [data-summe="2"], [data-summe="3"], [data-summe="4"]) .personalmarketing-selbsttest__stufe--tief,
.personalmarketing-selbsttest:is([data-summe="5"], [data-summe="6"], [data-summe="7"]) .personalmarketing-selbsttest__stufe--mitte,
.personalmarketing-selbsttest:is([data-summe="8"], [data-summe="9"], [data-summe="10"]) .personalmarketing-selbsttest__stufe--hoch { opacity: 1; background: rgba(244, 165, 58, .12); box-shadow: inset 3px 0 0 var(--bernstein), inset 0 0 0 1px rgba(244, 165, 58, .35); }
.personalmarketing-selbsttest__hinweis { font-size: 13px; color: var(--hell-leise); }
.personalmarketing-selbsttest__stand .knopf { justify-self: start; }
@media (max-width: 1099px) { .personalmarketing-selbsttest { grid-template-columns: minmax(0, 1fr); } .personalmarketing-selbsttest__stand { position: static; } }
@media (max-width: 640px) {
  .personalmarketing-selbsttest__liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .personalmarketing-selbsttest__liste label { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; font-size: 15.5px; }
  .personalmarketing-selbsttest__nr { width: 34px; height: 34px; font-size: 16px; }
  .personalmarketing-selbsttest__stand { padding: 22px 18px; }
  .personalmarketing-selbsttest__stand .knopf { justify-self: stretch; }
}

/* ---------- Preislogik ---------- */
.personalmarketing-preis { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); align-items: center; }
.personalmarketing-preis h2 { font-size: clamp(32px, 3.6vw, 50px); }
.personalmarketing-preis h2 em, .personalmarketing-gehen__text h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.personalmarketing-preis__lead { max-width: 32em; margin: 16px 0 24px; font-size: 18px; line-height: 1.6; color: var(--leise); }
@media (max-width: 960px) { .personalmarketing-preis { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Rechtliches (seiten/90-impressum.html, 91-datenschutz.html, 92-agb.html) und Fehlerseite (seiten/99-404.html).
   Rechtstexte: heller Einstieg, Wechsel zwischen den drei Seiten, Inhaltsverzeichnis (mitlaufend, mobil aufklappbar),
   ruhige Lesespalte, Kennzeichnung ruhender Abschnitte, Druckstil. Klassen mit Präfix recht- bzw. fehlt- (404).
   ===================================================================== */

/* ---------- Einstieg ---------- */
.recht-einstieg .einstieg__aussage { font-size: clamp(36px, 4.4vw, 60px); overflow-wrap: anywhere; hyphens: auto; }
.recht-einstieg .einstieg__lead { max-width: 40em; }
.recht-einstieg .einstieg__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 15px; color: var(--leise); }
.recht-einstieg .einstieg__meta span + span::before { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 12px 0 -10px; vertical-align: middle; background: var(--bernstein-tief); }
.pruef-hinweis { max-width: 46em; margin-bottom: 22px; padding: 12px 18px 12px 20px; border-radius: 14px; background: var(--papier); box-shadow: inset 3px 0 0 var(--bernstein-tief), 0 0 0 1px var(--linie); font-size: 15px; line-height: 1.5; color: var(--bernstein-text); }
.recht-wechsel { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.recht-wechsel a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--leise); text-decoration: none; transition: background .2s, color .2s; }
.recht-wechsel a:hover { color: var(--tinte); background: var(--creme); }
.recht-wechsel a[aria-current="page"] { background: var(--tinte); color: var(--hell); }

/* ---------- Lesespalte ---------- */
.recht__raster { grid-template-columns: minmax(220px, 290px) minmax(0, 720px); }
.recht-text { font-size: 17.5px; line-height: 1.72; }
.recht-text h2 { margin-top: 2em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; padding-top: 22px; border-top: 1px solid var(--linie); }
.recht-text h2:first-child { padding-top: 0; border-top: 0; }
.recht-text h3 { margin-top: 1.6em; font-size: 19.5px; }
.recht-text > * + p, .recht-ruhend > * + p { margin-top: .8em; }
.recht-text h2 + p, .recht-text h3 + p { margin-top: .6em; }
.recht-text .kasten + p, .recht-text .kasten + div { margin-top: 1.2em; }
.recht-anschrift { font: italic 400 25px/1.35 var(--serif); color: var(--tinte); }
.recht-text a { overflow-wrap: anywhere; }
.recht-knopf { margin-top: 1.2em !important; }

/* Kurzfassung der AGB als gestalteter Kasten */
.recht-kuerze { padding: clamp(22px, 2.4vw, 32px); background: var(--creme); }
.recht-kuerze h2 { margin: 0 0 10px; padding: 0; border: 0; font: italic 400 clamp(26px, 2.4vw, 32px)/1.15 var(--serif); color: var(--bernstein-text); }
.recht-kuerze ul { margin-top: 0; }
.recht-kuerze p { margin-top: 14px; font-size: 15.5px; font-weight: 600; color: var(--tinte); }

/* Ruhender Abschnitt (Datenschutz 7): deutlich gekennzeichnet, Text bleibt vollständig lesbar */
.recht-hinweis { margin-top: 1em; box-shadow: inset 3px 0 0 var(--bernstein-tief), 0 0 0 1px var(--linie); background: var(--papier); }
.recht-hinweis > b:first-child { font-size: 24px; }
.recht-ruhend { margin-top: 1.2em; padding-left: 22px; border-left: 1px dashed var(--bernstein-tief); }
.recht-ruhend > p { color: #4a4239; }
.recht-ruhend h3 { margin-top: 1.4em; }
.recht-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px !important; padding: 2px 12px; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); font-size: 13.5px; font-weight: 600; line-height: 1.7; color: var(--bernstein-text); }
.recht-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.recht-status + p { margin-top: .5em !important; }

/* ---------- Inhaltsverzeichnis: mitlaufend ab Desktop, mobil aufklappbar (ohne Skript) ---------- */
.recht-inhalt { max-height: calc(100vh - var(--kopf-h) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.recht-inhalt a { padding: 8px 0; font-size: 14.5px; }
.recht-inhalt small { grid-column: 2; display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--bernstein-text); }
.recht-inhalt--nummern a { grid-template-columns: 40px minmax(0, 1fr); }
.recht-inhalt--paragrafen a { grid-template-columns: 46px minmax(0, 1fr); }
.recht-inhalt--nummern a::before { content: none; }
.recht-inhalt--nummern a > span { font: italic 400 16px/1.3 var(--serif); color: var(--bernstein-text); white-space: nowrap; }
.recht-inhalt__schalter, .recht-inhalt__knopf { display: none; }

@media (max-width: 960px) {
  .recht__raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .recht-inhalt { max-height: none; overflow: visible; padding: 4px 18px; border-radius: 18px; background: var(--creme); }
  .recht-inhalt > p { display: none; }
  .recht-inhalt__schalter { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .recht-inhalt__knopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-size: 16px; font-weight: 600; color: var(--tinte); cursor: pointer; }
  .recht-inhalt__knopf::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; }
  .recht-inhalt__schalter:focus-visible + .recht-inhalt__knopf { outline: 2px solid var(--bernstein-tief); outline-offset: 4px; border-radius: 8px; }
  .recht-inhalt ol { display: none; padding-bottom: 12px; }
  .recht-inhalt__schalter:checked ~ ol { display: block; }
  .recht-inhalt__schalter:checked + .recht-inhalt__knopf::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .recht-text { font-size: 17px; }
}
@media (max-width: 560px) {
  .recht-wechsel { display: flex; }
  .recht-wechsel a { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .recht-anschrift { font-size: 23px; }
  .recht-ruhend { padding-left: 14px; }
}

/* ---------- Druckstil: nur der Rechtstext, ohne Kopf, Fuß, Kontakt und Verzeichnis ---------- */
@media print {
  body.seite-recht { background: #fff; color: #000; font-size: 11pt; }
  body.seite-recht .kopf, body.seite-recht .sprung, body.seite-recht .fuss, body.seite-recht .schwebe, body.seite-recht .keks, body.seite-recht dialog,
  body.seite-recht .krumen2, body.seite-recht .recht-wechsel, body.seite-recht .recht-inhalt, body.seite-recht .recht-knopf, body.seite-recht .meldung { display: none !important; }
  body.seite-recht .einstieg--hell, body.seite-recht .abschnitt { padding: 0 !important; margin: 0 !important; background: none !important; }
  body.seite-recht .einstieg__aussage { font-size: 24pt !important; color: #000; }
  body.seite-recht .einstieg__klein, body.seite-recht .einstieg__lead, body.seite-recht .einstieg__meta { color: #333 !important; }
  body.seite-recht .einstieg__lead { margin-bottom: 12pt; }
  body.seite-recht .raster { width: 100% !important; }
  body.seite-recht .recht__raster { display: block; }
  body.seite-recht .recht-text { max-width: none; font-size: 11pt; line-height: 1.5; color: #000; }
  body.seite-recht .recht-text h2 { font-size: 14pt; margin-top: 14pt; padding-top: 0; border: 0; break-after: avoid; }
  body.seite-recht .recht-text h3 { font-size: 12pt; break-after: avoid; }
  body.seite-recht .recht-text p, body.seite-recht .recht-text li { orphans: 3; widows: 3; }
  body.seite-recht .kasten { box-shadow: none !important; border: 1pt solid #999; background: none !important; }
  body.seite-recht .recht-text a { color: #000; text-decoration: none; }
  body.seite-recht .zeigen { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Fehlerseite 404 (Präfix fehlt-): ein Bildschirm, „4 Helm 4“ als Marke, direkte Wege (17.10.2026)
   ===================================================================== */
.fehlt-einstieg { min-height: min(820px, 100svh); display: flex; align-items: center; padding-block: calc(var(--kopf-h, 84px) + 40px) 56px; }
.fehlt-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .32; filter: saturate(.8); }
.fehlt-einstieg .einstieg__grund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #15110e 0%, rgba(21, 17, 14, .94) 42%, rgba(21, 17, 14, .7) 100%); }
.fehlt-einstieg .einstieg__raster { opacity: .4; }
.fehlt-raster { position: relative; z-index: 1; width: min(var(--rahmen), 100% - 2 * var(--rand)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fehlt-text .einstieg__wege { margin-top: 28px; }
.fehlt-einstieg .einstieg__hinweis { margin-top: 22px; }
.fehlt-einstieg .einstieg__hinweis a { color: var(--hell); font-weight: 600; }
.fehlt-wege { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(244, 165, 58, .22); }
.fehlt-wege__titel { margin: 0 0 12px; font: italic 400 22px/1.2 var(--serif); color: var(--bernstein-licht); }
.fehlt-wege ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fehlt-wege a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255, 240, 220, .2); background: rgba(255, 240, 220, .05); color: var(--hell); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
.fehlt-wege a:hover, .fehlt-wege a:focus-visible { border-color: var(--bernstein); background: rgba(244, 165, 58, .12); color: var(--bernstein-licht); }
.fehlt-marke { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: clamp(6px, 1vw, 14px); }
.fehlt-ziffer { padding: .12em .14em .04em; margin-inline: -.1em; font: italic 400 clamp(150px, 17vw, 260px)/.9 var(--serif); letter-spacing: -.04em; color: transparent; background: linear-gradient(180deg, #f7cf8f 0%, #d98f2c 55%, #8a5a20 100%); -webkit-background-clip: text; background-clip: text; }
.fehlt-helm { width: clamp(118px, 13vw, 200px); aspect-ratio: 2880 / 3096; background: linear-gradient(180deg, #f2e6d4 0%, #b9a891 100%); -webkit-mask: url("../img/helm.svg") center / contain no-repeat; mask: url("../img/helm.svg") center / contain no-repeat; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); animation: fehlt-wippen 5s ease-in-out infinite; }
@keyframes fehlt-wippen { 50% { transform: translateY(-8px) rotate(-2deg); } }
.fehlt-zeile { flex-basis: 100%; margin: 26px 0 0; text-align: center; font-size: 16px; line-height: 1.4; color: var(--hell-leise); }
.fehlt-zeile em { display: block; margin-top: 4px; font: italic 400 30px/1.1 var(--serif); color: var(--bernstein-licht); }
@media (max-width: 900px) {
  .fehlt-einstieg { min-height: 0; padding-block: calc(var(--kopf-h, 72px) + 24px) 44px; }
  .fehlt-raster { grid-template-columns: minmax(0, 1fr); }
  .fehlt-marke { order: -1; justify-content: flex-start; }
  .fehlt-ziffer { font-size: clamp(96px, 26vw, 150px); }
  .fehlt-helm { width: clamp(76px, 20vw, 118px); }
  .fehlt-zeile { display: none; }
}
@media (max-width: 480px) {
  .fehlt-text .einstieg__wege { flex-direction: column; align-items: stretch; }
  .fehlt-wege a { min-height: 44px; padding: 0 15px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .fehlt-helm { animation: none; } }

/* ==========================================================================
   Zusatz SEO-Beratung (seo-beratung/index.html, Quelle _werkzeug/seiten/20-seo.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix seo-. Nur Tokens aus :root.
   Enthält: Live-Szene „Prognose“ und Grund-Zeile im Einstieg, Zielauswahl mit Tafeln, Bausteine als Fundament,
   Prognose-Blatt zum Aufdecken, Gegenrechnung, Preislogik, hervorgehobene Bewertung.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-rechner aus ares.js.
   ========================================================================== */

/* ---------- Einstieg: Grund-Zeile unter der Rangliste ---------- */
.seo-sz-rang .sz-kopf { margin-bottom: 12px; }
.seo-sz-rang .sz-rang__suche { flex: none; }
.seo-sz-rang .sz-rang { flex: none; margin-bottom: 10px; }
.seo-sz-grund { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; color: #efe5d8; background: rgba(244, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); }
.seo-sz-grund b { color: var(--bernstein-licht); font-weight: 600; }
.seo-sz-grund .symbol { width: 16px; height: 16px; color: var(--bernstein-licht); }
.ist-aktiv .seo-sz-grund { animation: auftritt .8s var(--weich) 3s both; }

/* ---------- Einstieg: Szene „Ihre SEO-Prognose“ (Zeilen füllen sich, ohne Zahlen) ---------- */
.seo-sz-zeilen { display: grid; gap: 10px; }
.seo-sz-zeilen li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "nr name zusatz" "nr balken balken"; align-items: center; column-gap: 12px; padding: 11px 14px 12px 10px; border-radius: 14px; background: rgba(255, 244, 228, .055); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .09); }
.seo-sz-nr { grid-area: nr; font: italic 400 21px/1 var(--serif); color: #a99b89; text-align: center; }
.seo-sz-zeilen b { grid-area: name; font-size: 14.5px; font-weight: 600; color: var(--hell); white-space: nowrap; }
.seo-sz-zeilen small { grid-area: zusatz; font-size: 12.5px; color: #b5a796; white-space: nowrap; }
.seo-sz-zeilen i { grid-area: balken; position: relative; height: 5px; margin-top: 9px; overflow: hidden; border-radius: 5px; background: rgba(246, 239, 230, .1); }
.seo-sz-zeilen i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w, .5) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(244, 165, 58, .35), var(--bernstein-licht)); transform-origin: left; }
.seo-sz-zeilen li.seo-sz-ziel { background: linear-gradient(90deg, rgba(244, 165, 58, .24), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.seo-sz-ziel .seo-sz-nr, .seo-sz-ziel small { color: var(--bernstein-licht); }
.seo-sz-ziel small { font-weight: 600; }
.ist-aktiv .seo-sz-zeilen li { animation: eingang .7s var(--weich) both; animation-delay: calc(.35s + var(--i) * .45s); }
.ist-aktiv .seo-sz-zeilen i::after { animation: seo-fuellen 1.3s var(--weich) both; animation-delay: calc(.8s + var(--i) * .45s); }
@keyframes seo-fuellen { from { transform: scaleX(0); } }
.seo-sz-prognose .sz-fuss { margin-top: auto; }
@media (min-width: 1100px) and (max-height: 800px) {
  .seo-sz-rang .sz-rang li:nth-child(4) { display: none; }
  .seo-sz-zeilen { gap: 7px; }
  .seo-sz-zeilen li { padding-block: 8px 9px; }
}
@media (max-width: 760px) {
  .seo-sz-grund, .seo-sz-zeilen small { display: none; }
  .seo-sz-zeilen { gap: 5px; }
  .seo-sz-zeilen li { padding: 3px 10px 5px 6px; border-radius: 10px; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "nr name" "nr balken"; }
  .seo-sz-zeilen li:nth-child(3) { display: none; }
  .seo-sz-zeilen b { font-size: 12.5px; }
  .seo-sz-zeilen i { margin-top: 3px; height: 4px; }
  .seo-sz-nr { font-size: 15px; }
}

/* ---------- Zielauswahl: Ziele links, dunkle Tafel rechts ---------- */
.seo-ziele__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 64px); align-items: stretch; }
.seo-ziele__wahl { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--tinte); }
.seo-ziele__ziel { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; padding: 22px 12px 22px 0; border: 0; border-bottom: 1px solid var(--linie); background: none; color: var(--leise); text-align: left; cursor: pointer; font: italic 400 clamp(23px, 2vw, 29px)/1.15 var(--serif); letter-spacing: -.005em; transition: color .25s, padding .4s var(--weich), background .3s; }
.seo-ziele__nr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: italic 400 19px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--weich); }
.seo-ziele__ziel:hover { color: var(--tinte); }
.seo-ziele__ziel:hover .seo-ziele__nr { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.seo-ziele__ziel[aria-selected="true"] { padding-left: 16px; color: var(--tinte); background: linear-gradient(90deg, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 85%); }
.seo-ziele__ziel[aria-selected="true"] .seo-ziele__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: 0 0 0 4px rgba(244, 165, 58, .22); transform: rotate(-6deg); }
.seo-ziele__ziel[aria-selected="true"]::after { content: ""; position: absolute; right: -9px; top: 50%; width: 14px; height: 14px; background: var(--espresso); transform: translateY(-50%) rotate(45deg); }
.seo-ziele__tafeln { position: relative; min-width: 0; }
.seo-ziele__tafel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); height: 100%; min-height: 380px; overflow: hidden; border-radius: 30px; color: var(--hell); background: radial-gradient(70% 90% at 0% 50%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #261f19 0%, #16120f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 110px -60px rgba(40, 25, 10, .8); animation: auftritt .5s var(--weich) both; }
.seo-ziele__tafel[hidden] { display: none; }
.seo-ziele__bild { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 36px clamp(22px, 2.6vw, 36px) 54px; border-right: 1px solid var(--linie-dunkel); }
.seo-ziele__hinweis { position: absolute; left: clamp(22px, 2.6vw, 36px); bottom: 18px; font-size: 12px; letter-spacing: .02em; color: #a99b89; }
.seo-ziele__inhalt { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px clamp(24px, 3vw, 44px); }
.seo-ziele__satz { font: italic 400 clamp(28px, 2.5vw, 36px)/1.12 var(--serif); letter-spacing: -.005em; color: var(--hell); text-wrap: balance; }
.seo-ziele__satz em { font-style: italic; color: var(--bernstein-licht); }
.seo-ziele__inhalt p:not(.seo-ziele__satz) { font-size: 16.5px; line-height: 1.55; color: var(--hell-leise); }
.seo-ziele__inhalt .knopf { align-self: flex-start; margin-top: 8px; }

/* Bild I: Weg von der Suche zur Anfrage */
.seo-bild-weg > span { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.3; color: #e9dfd2; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.seo-bild-weg > span + span { margin-top: 22px; }
.seo-bild-weg > span + span::before { content: ""; position: absolute; left: 26px; top: -22px; height: 22px; border-left: 2px dashed rgba(244, 165, 58, .55); }
.seo-bild-weg .symbol { width: 18px; height: 18px; color: var(--bernstein-licht); }
.seo-bild-weg__suche { color: var(--tinte) !important; background: #f3ebdf !important; border-radius: 999px !important; font-weight: 600; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8) !important; }
.seo-bild-weg__suche .symbol { color: var(--bernstein-text); }
.seo-bild-weg__anfrage { font-weight: 700; color: var(--hell) !important; background: linear-gradient(90deg, rgba(244, 165, 58, .28), rgba(244, 165, 58, .06)) !important; box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55), 0 14px 34px -18px rgba(244, 165, 58, .7) !important; }
.seo-bild-weg__anfrage small { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--bernstein-licht); }
.seo-ziele__tafel:not([hidden]) .seo-bild-weg > span { animation: eingang .7s var(--weich) both; }
.seo-ziele__tafel:not([hidden]) .seo-bild-weg > span:nth-child(2) { animation-delay: .35s; }
.seo-ziele__tafel:not([hidden]) .seo-bild-weg > span:nth-child(3) { animation-delay: .7s; }

/* Bild II: Balken, Ihr Unternehmen überholt */
.seo-bild-balken { gap: 18px; }
.seo-bild-balken > span { display: grid; gap: 7px; font-size: 13.5px; color: #cdbfae; }
.seo-bild-balken b { font-weight: 600; }
.seo-bild-balken i { position: relative; height: 12px; overflow: hidden; border-radius: 6px; background: rgba(246, 239, 230, .08); }
.seo-bild-balken i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(205, 191, 174, .25), rgba(205, 191, 174, .55)); }
.seo-bild-balken__sie b { color: var(--hell); }
.seo-bild-balken__sie i::after { background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); box-shadow: 0 0 18px rgba(244, 165, 58, .5); }
.seo-ziele__tafel:not([hidden]) .seo-bild-balken__sie i::after { animation: seo-ueberholen 1.8s cubic-bezier(.6, 0, .2, 1) .5s both; }
@keyframes seo-ueberholen { from { width: calc(var(--von) * 100%); } }

/* Bild III: KI-Antwort */
.seo-bild-ki { gap: 14px; }
.seo-bild-ki__frage { align-self: flex-end; max-width: 88%; padding: 11px 15px; border-radius: 16px 16px 4px 16px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--tinte); background: #f3ebdf; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.seo-bild-ki__antwort { max-width: 94%; padding: 13px 15px; border-radius: 4px 16px 16px 16px; font-size: 14.5px; line-height: 1.5; color: #efe5d8; background: rgba(255, 244, 228, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .11); }
.seo-bild-ki__antwort mark { padding: 1px 6px; border-radius: 7px; font-weight: 700; color: #ffd796; background: rgba(244, 165, 58, .26); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .6); }
.seo-ziele__tafel:not([hidden]) .seo-bild-ki__frage { animation: eingang .6s var(--weich) .2s both; }
.seo-ziele__tafel:not([hidden]) .seo-bild-ki__antwort { animation: auftritt .7s var(--weich) .8s both; }

/* Bild IV: kleines Prognose-Blatt */
.seo-bild-blatt__papier { display: grid; gap: 4px; padding: 20px 20px 16px; border-radius: 6px; color: var(--tinte); background: #fffdf9; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); transform: rotate(-2deg); }
.seo-bild-blatt__papier > b { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); font: italic 400 22px/1.1 var(--serif); }
.seo-bild-blatt__papier > span { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--linie); font-size: 14px; }
.seo-bild-blatt__papier i { font: italic 400 17px/1 var(--serif); color: var(--bernstein-text); }
.seo-ziele__tafel:not([hidden]) .seo-bild-blatt__papier { animation: auftritt .7s var(--weich) .2s both; }

@media (max-width: 1099px) {
  .seo-ziele__raster { grid-template-columns: minmax(0, 1fr); }
  .seo-ziele__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .seo-ziele__ziel[aria-selected="true"]::after { display: none; }
}
@media (max-width: 760px) {
  .seo-ziele__wahl { gap: 0 12px; border-top: 0; }
  .seo-ziele__ziel { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 10px 14px 0; font-size: 19px; border-top: 1px solid var(--linie); border-bottom: 0; }
  .seo-ziele__ziel[aria-selected="true"] { padding-left: 10px; }
  .seo-ziele__nr { width: 34px; height: 34px; font-size: 15px; }
  .seo-ziele__tafel { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 24px; }
  .seo-ziele__bild { padding: 26px 20px 44px; border-right: 0; border-bottom: 1px solid var(--linie-dunkel); }
  .seo-ziele__hinweis { left: 20px; bottom: 14px; }
  .seo-ziele__inhalt { padding: 26px 20px 28px; gap: 12px; }
  .seo-ziele__satz { font-size: 27px; }
  .seo-ziele__inhalt .knopf { align-self: stretch; }
}

/* ---------- Bausteine als Fundament: Technik unten, jeder Stein ein Reiter ---------- */
.seo-bausteine__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.seo-bausteine__stapel { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 9px; padding: 8px 0 34px; }
.seo-bausteine__stapel::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 6px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 20, .28), rgba(60, 40, 20, 0)); }
.seo-bausteine__stein { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; width: calc(100% - var(--n) * 9%); min-height: 66px; padding: 0 24px; border: 0; border-radius: 14px; color: var(--tinte); background: linear-gradient(180deg, #f1e9dc 0%, #e4d8c6 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(120, 90, 50, .14), 0 16px 28px -20px rgba(60, 40, 20, .55); font: 600 17px/1.2 var(--grotesk); text-align: left; cursor: pointer; transition: transform .4s var(--weich), background .3s, box-shadow .3s, color .3s; }
.seo-bausteine__nr { min-width: 30px; font: italic 400 25px/1 var(--serif); color: var(--bernstein-text); }
.seo-bausteine__stein:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(120, 90, 50, .14), 0 0 0 1.5px var(--bernstein-tief), 0 16px 28px -20px rgba(60, 40, 20, .55); }
.seo-bausteine__stein[aria-selected="true"] { color: var(--hell); background: linear-gradient(180deg, #2e261f 0%, #1a1511 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--bernstein), 0 22px 44px -20px rgba(244, 165, 58, .55); transform: scale(1.035); }
.seo-bausteine__stein[aria-selected="true"] .seo-bausteine__nr { color: var(--bernstein-licht); }
.seo-bausteine__felder { min-width: 0; }
.seo-bausteine__feld { position: relative; overflow: hidden; padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); animation: auftritt .45s var(--weich) both; }
.seo-bausteine__feld[hidden] { display: none; }
.seo-bausteine__gross { position: absolute; right: clamp(20px, 3vw, 40px); top: 6px; font: italic 400 clamp(90px, 9vw, 140px)/1 var(--serif); color: rgba(138, 79, 0, .12); pointer-events: none; }
.seo-bausteine__feld h3 { position: relative; max-width: 14em; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
.seo-bausteine__feld > p { position: relative; max-width: 30em; margin-top: 14px; font-size: 17.5px; line-height: 1.6; color: var(--leise); }
.seo-bausteine__punkte { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tinte); }
.seo-bausteine__punkte li { position: relative; padding-left: 22px; font-size: 16.5px; }
.seo-bausteine__punkte li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; background: var(--bernstein-tief); transform: rotate(45deg); }
.seo-bausteine__weiter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 15.5px; color: var(--leise); }
.seo-bausteine__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(40px, 4.4vw, 64px); padding-top: 26px; border-top: 1px solid var(--tinte); }
.seo-bausteine__fuss p { font-size: 18px; color: var(--leise); }
.seo-bausteine__fuss b { display: block; font: italic 400 clamp(26px, 2.2vw, 32px)/1.15 var(--serif); color: var(--tinte); }
@media (max-width: 960px) {
  .seo-bausteine__raster { grid-template-columns: minmax(0, 1fr); }
  .seo-bausteine__stein { width: calc(100% - var(--n) * 6%); }
}
@media (max-width: 560px) {
  .seo-bausteine__stein { min-height: 54px; padding: 0 16px; gap: 12px; font-size: 15.5px; border-radius: 12px; width: calc(100% - var(--n) * 4%); }
  .seo-bausteine__nr { min-width: 26px; font-size: 21px; }
  .seo-bausteine__feld { border-radius: 22px; padding: 26px 20px; }
  .seo-bausteine__gross { font-size: 72px; right: 14px; top: 2px; }
  .seo-bausteine__feld h3 { padding-right: 36px; }
  .seo-bausteine__feld > p { font-size: 16px; }
  .seo-bausteine__weiter .knopf, .seo-bausteine__fuss .knopf { width: 100%; }
}

.seo-prognose { overflow-x: clip; }
/* ---------- Prognose: Text links, Blatt zum Aufdecken rechts ---------- */
.seo-prognose__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.seo-prognose__text h2 { max-width: 10em; }
.seo-prognose__lead { margin-top: 24px; font: italic 400 clamp(24px, 2.1vw, 30px)/1.25 var(--serif); color: var(--tinte); }
.seo-prognose__text > p:not(.seo-prognose__lead):not(.seo-person) { max-width: 32em; margin-top: 16px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.seo-prognose__text strong { color: var(--tinte); }
.seo-person { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.seo-person img { flex: none; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--linie); }
.seo-person b { color: var(--tinte); }

.seo-blatt { position: relative; }
.seo-blatt::before, .seo-blatt::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #f2eadd; box-shadow: 0 30px 60px -40px rgba(60, 40, 20, .55); }
.seo-blatt::before { transform: rotate(3deg) translate(10px, 8px); }
.seo-blatt::after { transform: rotate(1.4deg) translate(4px, 4px); background: #f7f1e7; }
.seo-blatt__papier { position: relative; z-index: 1; padding: clamp(24px, 3vw, 42px); border-radius: 6px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 0 70px 120px -60px rgba(60, 40, 20, .7); transform: rotate(-.8deg); }
.seo-blatt__papier::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein), rgba(244, 165, 58, 0)); }
.seo-blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); }
.seo-blatt__kopf img { width: 94px; }
.seo-blatt__kopf span { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--leise); }
.seo-blatt__titel { margin-top: 22px; font: italic 400 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.01em; }
.seo-blatt__titel em, .seo-gegen h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.seo-blatt__titel em { color: var(--bernstein-text); }
.seo-blatt__auftrag { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--leise); }
.seo-blatt__zeilen { margin-top: 20px; border-top: 1px solid var(--tinte); }
.seo-blatt__zeilen > li { border-bottom: 1px dashed #d8ccbb; }
.seo-blatt__zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "nr frage auf" "nr antwort antwort"; align-items: center; column-gap: 14px; padding: 16px 4px 16px 0; cursor: pointer; transition: background .3s; }
.seo-blatt__zeile input { position: absolute; opacity: 0; pointer-events: none; }
.seo-blatt__zeile:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .07), rgba(244, 165, 58, 0) 80%); }
.seo-blatt__zeile:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.seo-blatt__nr { grid-area: nr; align-self: start; padding-top: 3px; font: italic 400 26px/1 var(--serif); color: var(--bernstein-text); }
.seo-blatt__frage { grid-area: frage; font-size: 17px; font-weight: 600; line-height: 1.35; }
.seo-blatt__antwort { grid-area: antwort; display: grid; gap: 9px; margin-top: 10px; }
.seo-blatt__antwort b { font-size: 15.5px; font-weight: 400; line-height: 1.45; color: var(--leise); filter: blur(5px); opacity: .55; user-select: none; transition: filter .5s var(--weich), opacity .5s, color .3s; }
.seo-blatt__balken { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--linie) 0 10px, rgba(224, 214, 200, 0) 10px 14px); }
.seo-blatt__balken i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--weich) .15s; }
.seo-blatt__auf { grid-area: auf; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s, box-shadow .3s; white-space: nowrap; }
.seo-blatt__auf::before { content: "Aufdecken"; }
.seo-blatt__zeile:hover .seo-blatt__auf { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.seo-blatt__zeile:has(input:checked) .seo-blatt__antwort b { filter: none; opacity: 1; color: var(--tinte); font-weight: 600; user-select: auto; }
.seo-blatt__zeile:has(input:checked) .seo-blatt__balken i { transform: scaleX(1); }
.seo-blatt__zeile:has(input:checked) .seo-blatt__frage { color: var(--leise); font-weight: 400; }
.seo-blatt__zeile:has(input:checked) .seo-blatt__auf { color: var(--hell); background: var(--espresso); box-shadow: none; }
.seo-blatt__zeile:has(input:checked) .seo-blatt__auf::before { content: "Aufgedeckt"; }
.seo-blatt__fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--leise); }
.seo-blatt__fuss [hidden] { display: none; }
.seo-blatt__fuss p:not(.seo-blatt__stand) { flex: 1 1 260px; }
.seo-blatt__fuss p b { color: var(--tinte); }
.seo-blatt__stand { white-space: nowrap; }
.seo-blatt__stand b { font: italic 400 36px/1 var(--serif); color: var(--bernstein-text); }
.seo-blatt[data-summe="4"] .seo-blatt__papier { box-shadow: 0 0 0 2px rgba(244, 165, 58, .5), 0 70px 120px -60px rgba(60, 40, 20, .7); }

/* Gegenrechnung mit eigenen Annahmen */
.seo-gegen { margin-top: clamp(64px, 7vw, 112px); }
.seo-gegen h3 em { color: var(--bernstein-licht); }
@media (max-width: 960px) {
  .seo-prognose__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .seo-blatt__papier { padding: 22px 18px; transform: none; }
  .seo-blatt::before { transform: rotate(2deg) translate(4px, 6px); }
  .seo-blatt::after { transform: rotate(1deg) translate(2px, 3px); }
  .seo-blatt__zeile { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "nr frage" "nr antwort" "nr auf"; column-gap: 10px; }
  .seo-blatt__auf { justify-self: start; margin-top: 12px; }
  .seo-blatt__nr { font-size: 22px; }
  .seo-blatt__frage { font-size: 16px; }
  .seo-gegen .werkzeug__fuss .knopf { width: 100%; }
}

/* ---------- Preislogik (ohne Preise) ---------- */
.seo-preis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.seo-preis__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.seo-preis__text > p { max-width: 32em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.seo-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: seo-pw; }
.seo-preis__weg li { counter-increment: seo-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.seo-preis__weg li::before { content: counter(seo-pw, upper-roman); grid-row: span 2; font: italic 400 27px/1.1 var(--serif); color: var(--bernstein-text); }
.seo-preis__weg b { font-size: 18px; }
.seo-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.seo-preis__ratgeber { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; font-size: 15.5px; color: var(--leise); }
.seo-preis__faktoren { position: relative; overflow: hidden; padding: clamp(28px, 3.2vw, 46px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.seo-preis__titel { padding-bottom: 18px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(28px, 2.4vw, 36px)/1.1 var(--serif); }
.seo-preis__titel em { color: var(--bernstein-licht); }
.seo-preis__faktoren li { display: grid; gap: 4px; padding: 18px 0 18px 24px; border-bottom: 1px solid var(--linie-dunkel); position: relative; }
.seo-preis__faktoren li:last-child { border-bottom: 0; padding-bottom: 0; }
.seo-preis__faktoren li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
.seo-preis__faktoren b { font-size: 18px; color: var(--hell); }
.seo-preis__faktoren span { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) { .seo-preis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .seo-preis__faktoren { border-radius: 22px; padding: 24px 20px; } .seo-preis__ratgeber .knopf { width: 100%; } }

/* ---------- Hervorgehobene SEO-Bewertung über dem Auszug ---------- */
.seo-stimme { display: grid; gap: 18px; max-width: 900px; margin-top: clamp(40px, 4.4vw, 60px); padding: 4px 0 4px clamp(22px, 3vw, 40px); border-left: 2px solid var(--bernstein); }
.seo-stimme blockquote p { font: italic 400 clamp(28px, 3vw, 42px)/1.18 var(--serif); letter-spacing: -.01em; text-indent: -.36em; }
.seo-stimme figcaption { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--leise); }
.seo-stimme figcaption b { display: block; font-size: 16px; color: var(--tinte); }
.seo-stimme .kuerzel { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--bernstein-text); background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }

/* ---------- Einstieg: lange Aussage mit nachgestelltem Akzent etwas kompakter, damit die Vertrauensleiste im ersten Bild bleibt ---------- */
.seo-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.22em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) {
  .seo-einstieg .einstieg__aussage { font-size: clamp(38px, min(4.4vw, 7.4svh), 62px); }
  .seo-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .seo-einstieg .einstieg__aussage { font-size: clamp(29px, 8.2vw, 38px); }
  .seo-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.2em; }
}

/* ==========================================================================
   Zusatz Social Ads (social-ads/index.html, Quelle _werkzeug/seiten/26-social-ads.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix social-ads-. Die alte Datei teile/zusatz/social-ads.css
   (social-ads-vergleich, social-ads-faustregel) bleibt für den alten Rahmen; diese Namen werden hier nicht verwendet.
   Enthält: Live-Szene „Vom Feed zur geprüften Anfrage“, Duell Meta oder LinkedIn mit Umschalter, Faustregel,
   Wegweiser mit Waage, Lead-Formular-Baukasten, Einwilligungs-Schaltbild, Partner, Preisfaktoren.
   Skripte: keine eigenen, nur data-reiter und data-zaehlen aus ares.js, sonst :has().
   ========================================================================== */

/* ---------- Einstieg: Szene „Vom Feed zur geprüften Anfrage“ ---------- */
.social-ads-sz { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
.social-ads-sz__handy { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 10px 10px 12px; border-radius: 28px; background: #0f0c0a; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .18), 0 24px 44px -22px rgba(0, 0, 0, .9); }
.social-ads-sz__leiste { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 8px; font-size: 12px; font-weight: 600; color: #cdbfae; }
.social-ads-sz__mess { display: inline-grid; grid-template-columns: 8px auto; align-items: center; gap: 6px; }
.social-ads-sz__mess b { grid-column: 2; grid-row: 1; justify-self: end; }
.social-ads-sz__mess-an { color: var(--bernstein-licht); opacity: 0; }
.ist-aktiv .social-ads-sz__mess-aus { animation: social-ads-aus .3s ease 1.6s both; }
.ist-aktiv .social-ads-sz__mess-an { animation: social-ads-ein .3s ease 1.6s both; }
.social-ads-sz__mess i { width: 8px; height: 8px; border-radius: 50%; background: #7d7268; }
.social-ads-sz__mess b { font-weight: 600; font-size: 11.5px; }
.social-ads-sz__fenster { position: relative; flex: 1; overflow: hidden; border-radius: 18px; background: #f3ebdf; }
.social-ads-sz__feed { display: grid; gap: 8px; padding: 10px; }
.social-ads-sz__beitrag { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 8px; padding: 10px; border-radius: 12px; background: #fffdf9; }
.social-ads-sz__beitrag i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #ddd2c3; }
.social-ads-sz__beitrag span { height: 7px; border-radius: 4px; background: #e3d9cb; }
.social-ads-sz__beitrag span:last-child { width: 70%; }
.social-ads-sz__beitrag::after { content: ""; grid-column: 1 / -1; height: 46px; border-radius: 8px; background: #ebe2d5; }
.social-ads-sz__anzeige { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: #fffdf9; box-shadow: 0 0 0 1.5px rgba(244, 165, 58, .7); }
.social-ads-sz__anzeige small { font-size: 10.5px; color: #8a7f72; }
.social-ads-sz__anzeige b { font-size: 13px; color: var(--tinte); }
.social-ads-sz__bild { height: 54px; border-radius: 8px; background: radial-gradient(circle at 75% 30%, #f7bb63 0 12%, rgba(247, 187, 99, 0) 13%), linear-gradient(160deg, #4a3826, #241c15); }
.social-ads-sz__mehr { justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--tinte); background: var(--bernstein); }
.social-ads-sz__keks { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 12px; font-size: 11.5px; color: var(--hell); background: #241e19; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .7); transform: translateY(140%); }
.social-ads-sz__keks b { padding: 4px 9px; border-radius: 999px; font-size: 11px; color: var(--tinte); background: var(--bernstein); }
.social-ads-sz__formular { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 5px; padding: 12px 12px 14px; border-radius: 16px 16px 0 0; background: #fffdf9; box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, .45); transform: translateY(105%); }
.social-ads-sz__formular b { font-size: 12.5px; color: var(--tinte); }
.social-ads-sz__formular span { padding: 5px 9px; border-radius: 8px; font-size: 11.5px; color: var(--leise); box-shadow: inset 0 0 0 1px #e0d6c8; }
.social-ads-sz__formular em { margin-top: 3px; padding: 6px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 700; text-align: center; color: var(--hell); background: var(--espresso); }
.social-ads-sz__eingang { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.social-ads-sz__titel { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(246, 239, 230, .1); font-size: 14.5px; font-weight: 600; color: var(--hell); }
.social-ads-sz__alt { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 244, 228, .045); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.social-ads-sz__alt i { width: 26px; height: 26px; border-radius: 8px; background: rgba(246, 239, 230, .1); }
.social-ads-sz__alt span { height: 7px; border-radius: 4px; background: rgba(246, 239, 230, .12); }
.social-ads-sz__neu { position: relative; display: grid; gap: 3px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(244, 165, 58, .2), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .5), 0 14px 34px -18px rgba(244, 165, 58, .7); }
.social-ads-sz__neu b { font-size: 14px; color: var(--hell); }
.social-ads-sz__neu small { font-size: 12px; color: #cdbfae; }
.social-ads-sz__marke { position: relative; display: block; height: 24px; margin-top: 6px; }
.social-ads-sz__marke em { position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.social-ads-sz__frage { color: #f9ecc9; background: rgba(244, 192, 58, .16); box-shadow: inset 0 0 0 1px rgba(244, 192, 58, .45); }
.social-ads-sz__rueck { color: var(--tinte); background: var(--bernstein); opacity: 0; }
/* Ablauf der Szene */
.ist-aktiv .social-ads-sz__keks { animation: social-ads-keks 1.9s var(--weich) .3s both; }
@keyframes social-ads-keks { 0% { transform: translateY(140%); } 22%, 72% { transform: translateY(0); } 100% { transform: translateY(160%); } }
.ist-aktiv .social-ads-sz__keks b { animation: klick .4s ease 1.25s; }
.ist-aktiv .social-ads-sz__mess i { animation: social-ads-an .3s ease 1.6s both; }
@keyframes social-ads-an { to { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); } }
.ist-aktiv .social-ads-sz__feed { animation: social-ads-scroll 1.1s cubic-bezier(.5, 0, .2, 1) 2.1s both; }
@keyframes social-ads-scroll { to { transform: translateY(var(--scroll, -150px)); } }
.ist-aktiv .social-ads-sz__mehr { animation: klick .45s ease 3.3s; }
.ist-aktiv .social-ads-sz__formular { animation: social-ads-blatt .6s var(--weich) 3.7s both; }
@keyframes social-ads-blatt { to { transform: translateY(0); } }
.ist-aktiv .social-ads-sz__gewaehlt { animation: social-ads-wahl .3s ease 4.5s both; }
@keyframes social-ads-wahl { to { color: var(--tinte); font-weight: 700; background: rgba(244, 165, 58, .2); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); } }
.ist-aktiv .social-ads-sz__formular em { animation: klick .45s ease 5.1s; }
.ist-aktiv .social-ads-sz__neu { animation: eingang .6s var(--weich) 5.6s both; }
.ist-aktiv .social-ads-sz__frage { animation: social-ads-aus .4s ease 7s both; }
.ist-aktiv .social-ads-sz__rueck { animation: social-ads-ein .5s var(--weich) 7.1s both; }
@keyframes social-ads-aus { to { opacity: 0; transform: translateY(-6px); } }
@keyframes social-ads-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1100px) and (max-height: 800px) {
  .social-ads-sz__alt:last-child { display: none; }
}
@media (max-width: 760px) {
  .social-ads-sz { grid-template-columns: minmax(0, 1fr); }
  .social-ads-sz__handy, .social-ads-sz__alt { display: none; }
  .social-ads-sz__titel { padding-bottom: 7px; margin-bottom: 0; font-size: 13px; }
  .social-ads-sz__eingang { gap: 7px; }
  .social-ads-sz__neu { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 9px 10px; }
  .social-ads-sz__neu b { font-size: 13px; }
  .social-ads-sz__neu small { grid-row: 2; font-size: 11.5px; }
  .social-ads-sz__marke { grid-row: 1 / span 2; grid-column: 2; width: 120px; margin: 0; }
  .social-ads-sz__marke em { right: 0; left: auto; top: 50%; transform: translateY(-50%); white-space: normal; text-align: center; font-size: 11px; line-height: 1.2; }
  .ist-aktiv .social-ads-sz__neu { animation-delay: .5s; }
  .ist-aktiv .social-ads-sz__frage { animation: social-ads-aus-m .4s ease 2.2s both; }
  .ist-aktiv .social-ads-sz__rueck { animation: social-ads-ein-m .5s var(--weich) 2.3s both; }
  @keyframes social-ads-aus-m { to { opacity: 0; } }
  @keyframes social-ads-ein-m { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Einstieg: Aussage ---------- */
.social-ads-einstieg .einstieg__aussage em.nachgestellt { font-size: 1.16em; line-height: .98; }
@media (min-width: 1100px) and (max-height: 800px) {
  .social-ads-einstieg .einstieg__aussage { font-size: clamp(38px, min(4.4vw, 7.4svh), 62px); }
  .social-ads-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 380px) {
  .social-ads-einstieg .einstieg__aussage { font-size: 29px; }
  .social-ads-einstieg .einstieg__lead { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
}

/* ---------- Duell Meta oder LinkedIn (dunkel, Alleinstellung) ---------- */
.social-ads-duell { overflow-x: clip; }
.social-ads-duell__werk { --sp-m: 1.35fr; --sp-l: .85fr; }
.social-ads-duell__werk:has(#sa-seite-linkedin:checked) { --sp-m: .85fr; --sp-l: 1.35fr; }
.social-ads-duell__wahl { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, var(--sp-m)) minmax(0, var(--sp-l)); gap: 0 20px; margin: 0; padding: 0; border: 0; transition: grid-template-columns .6s var(--weich); }
.social-ads-duell__wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.social-ads-duell__wahl::before { content: ""; }
.social-ads-duell__seite { position: relative; cursor: pointer; }
.social-ads-duell__seite input { position: absolute; opacity: 0; pointer-events: none; }
.social-ads-duell__seite span { display: grid; gap: 2px; padding: 22px 24px; border-radius: 22px 22px 0 0; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); transition: background .3s, box-shadow .3s; }
.social-ads-duell__seite b { font: italic 400 clamp(30px, 3vw, 44px)/1 var(--serif); color: var(--hell-leise); transition: color .3s; }
.social-ads-duell__seite small { font-size: 14px; color: #b5a796; }
.social-ads-duell__seite:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.social-ads-duell__seite input:checked + span { background: linear-gradient(180deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .06)); box-shadow: inset 0 0 0 1.5px var(--bernstein), 0 -10px 40px -20px rgba(244, 165, 58, .6); }
.social-ads-duell__seite input:checked + span b { color: var(--hell); }
.social-ads-duell__seite input:checked + span::after { content: "hervorgehoben"; justify-self: start; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--tinte); background: var(--bernstein); }
.social-ads-duell__seite input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 3px; }
.social-ads-duell__liste { margin: 0; border-top: 1.5px solid var(--bernstein); }
.social-ads-duell__zeile { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, var(--sp-m)) minmax(0, var(--sp-l)); gap: 8px 20px; padding: 20px 0; border-bottom: 1px solid var(--linie-dunkel); transition: grid-template-columns .6s var(--weich); }
.social-ads-duell__zeile dt { font-size: 15px; font-weight: 700; color: var(--bernstein-licht); }
.social-ads-duell__zeile dd { margin: 0; padding: 0 24px; font-size: 15px; line-height: 1.55; color: #9c8f80; transition: color .3s, font-size .3s; }
.social-ads-duell__werk:has(#sa-seite-meta:checked) .social-ads-duell__meta,
.social-ads-duell__werk:has(#sa-seite-linkedin:checked) .social-ads-duell__linkedin { font-size: 17px; color: var(--hell); }
.social-ads-duell__zeile:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .06), rgba(244, 165, 58, 0) 80%); }
.social-ads-duell__quelle { margin-top: 16px; font-size: 13px; color: #b5a796; }
@media (max-width: 860px) {
  .social-ads-duell__wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .social-ads-duell__wahl::before { display: none; }
  .social-ads-duell__seite span { padding: 16px 16px; border-radius: 18px; }
  .social-ads-duell__seite input:checked + span::after { display: none; }
  .social-ads-duell__zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
  .social-ads-duell__zeile dd { padding: 0; font-size: 16px !important; color: var(--hell) !important; }
  .social-ads-duell__werk:has(#sa-seite-meta:checked) .social-ads-duell__linkedin,
  .social-ads-duell__werk:has(#sa-seite-linkedin:checked) .social-ads-duell__meta { display: none; }
}

/* ---------- Faustregel ---------- */
.social-ads-regel { position: relative; max-width: 980px; margin: clamp(48px, 5vw, 72px) 0 0; padding: 6px 0 6px clamp(22px, 3vw, 40px); border-left: 2px solid var(--bernstein); }
.social-ads-regel__titel { font: italic 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); color: var(--hell); }
.social-ads-regel__titel em { color: var(--bernstein-licht); }
.social-ads-regel p:not(.social-ads-regel__titel) { margin-top: 14px; font-size: 18px; line-height: 1.6; color: #e9dfd2; }
.social-ads-regel .social-ads-regel__notiz { font-size: 15px; color: var(--hell-leise); }

/* ---------- Wegweiser mit Waage ---------- */
.social-ads-lotse { margin-top: clamp(56px, 6vw, 96px); }
.social-ads-lotse h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.social-ads-lotse__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 56px); align-items: stretch; }
.social-ads-lotse__fragen { counter-reset: sa-l; display: grid; gap: 18px; }
.social-ads-lotse__fragen > li { counter-increment: sa-l; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.social-ads-lotse__fragen > li::before { content: counter(sa-l, upper-roman); font: italic 400 26px/1.2 var(--serif); color: var(--bernstein-text); }
.social-ads-lotse fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.social-ads-lotse__fragen > li:last-child fieldset { border-bottom: 0; padding-bottom: 0; }
.social-ads-lotse legend { float: left; width: 100%; margin-bottom: 10px; padding: 3px 0 0; font-size: 17.5px; font-weight: 600; line-height: 1.35; }
.social-ads-lotse fieldset label { position: relative; cursor: pointer; }
.social-ads-lotse fieldset input { position: absolute; opacity: 0; pointer-events: none; }
.social-ads-lotse fieldset label span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 12px; font-size: 15px; line-height: 1.3; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); transition: background .25s, color .25s, box-shadow .25s; }
.social-ads-lotse fieldset label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-ads-lotse fieldset input:checked + span { color: var(--hell); background: var(--espresso); box-shadow: inset 0 -3px 0 var(--bernstein); }
.social-ads-lotse fieldset input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.social-ads-lotse__ergebnis { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; color: var(--hell); background: radial-gradient(70% 60% at 50% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.social-ads-lotse__waage { --neigung: 0deg; position: relative; display: flex; align-items: flex-start; justify-content: space-between; height: 92px; padding: 0 6px; transform: rotate(var(--neigung)); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.social-ads-lotse__waage i { position: absolute; left: 6px; right: 6px; top: 16px; height: 3px; border-radius: 3px; background: var(--bernstein-licht); box-shadow: 0 0 14px rgba(244, 165, 58, .5); }
.social-ads-lotse__waage::after { content: ""; position: absolute; left: 50%; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--bernstein); transform: translateX(-50%); box-shadow: 0 0 0 4px rgba(244, 165, 58, .2); }
.social-ads-lotse__schale { position: relative; z-index: 1; display: grid; place-items: center; margin-top: 30px; padding: 10px 18px; min-width: 104px; border-radius: 0 0 40px 40px; font: italic 400 22px/1 var(--serif); color: var(--hell); background: rgba(246, 239, 230, .08); box-shadow: inset 0 0 0 1px var(--linie-dunkel); transform: rotate(calc(var(--neigung) * -1)); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1), background .3s, color .3s; }
.social-ads-lotse__schale::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 16px; border-left: 1.5px solid rgba(247, 187, 99, .6); }
.social-ads-lotse__leer { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
.social-ads-lotse__wahl { display: none; gap: 6px; animation: auftritt .45s var(--weich) both; }
.social-ads-lotse__wahl b { font: italic 400 clamp(25px, 2.2vw, 31px)/1.12 var(--serif); }
.social-ads-lotse__wahl p { font-size: 15.5px; line-height: 1.55; color: var(--hell-leise); }
.social-ads-lotse__knoepfe { display: none; flex-wrap: wrap; gap: 10px; }
.social-ads-lotse__lp { display: none !important; }
.social-ads-lotse__recruiting { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 14px; border-top: 1px solid var(--linie-dunkel); font-size: 14.5px; color: var(--hell-leise); }
.social-ads-lotse__recruiting .knopf { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
/* Ergebnis-Logik */
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has([name="sa-l3"]:checked) .social-ads-lotse__leer { display: none; }
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has([name="sa-l3"]:checked) .social-ads-lotse__knoepfe { display: flex; }
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has(#sa-l3-unbekannt:checked) .social-ads-lotse__wahl--offen,
.social-ads-lotse:has(#sa-l1-firmen:checked, #sa-l1-beides:checked):has(#sa-l2-ja:checked):has(#sa-l3-hoch:checked) .social-ads-lotse__wahl--linkedin,
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has(#sa-l3-hoch:checked, #sa-l3-weniger:checked):has(#sa-l1-privat:checked, #sa-l2-nein:checked, #sa-l3-weniger:checked) .social-ads-lotse__wahl--meta { display: grid; }
.social-ads-lotse:has(#sa-l1-firmen:checked, #sa-l1-beides:checked):has(#sa-l2-ja:checked):has(#sa-l3-hoch:checked) .social-ads-lotse__waage { --neigung: 8deg; }
.social-ads-lotse:has(#sa-l1-firmen:checked, #sa-l1-beides:checked):has(#sa-l2-ja:checked):has(#sa-l3-hoch:checked) .social-ads-lotse__schale--linkedin,
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has(#sa-l3-hoch:checked, #sa-l3-weniger:checked):has(#sa-l1-privat:checked, #sa-l2-nein:checked, #sa-l3-weniger:checked) .social-ads-lotse__schale--meta { color: var(--tinte); background: var(--bernstein); box-shadow: 0 10px 26px -10px rgba(244, 165, 58, .8); }
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has(#sa-l3-hoch:checked, #sa-l3-weniger:checked):has(#sa-l1-privat:checked, #sa-l2-nein:checked, #sa-l3-weniger:checked) .social-ads-lotse__waage { --neigung: -8deg; }
.social-ads-lotse:has([name="sa-l1"]:checked):has([name="sa-l2"]:checked):has(#sa-l3-hoch:checked, #sa-l3-weniger:checked):has(#sa-l1-privat:checked, #sa-l2-nein:checked, #sa-l3-weniger:checked) .social-ads-lotse__lp { display: inline-flex !important; }
@media (max-width: 960px) { .social-ads-lotse__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .social-ads-lotse__fragen > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .social-ads-lotse fieldset label { width: 100%; }
  .social-ads-lotse fieldset label span { width: 100%; }
  .social-ads-lotse__knoepfe .knopf { width: 100%; }
}

/* ---------- Lead-Formular-Baukasten ---------- */
.social-ads-bau { margin-top: clamp(64px, 7vw, 112px); }
.social-ads-bau h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.social-ads-bau__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.social-ads-bau__schalter { display: grid; gap: 14px; }
.social-ads-bau__kippe { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; transition: box-shadow .3s, background .3s; }
.social-ads-bau__kippe input { position: absolute; opacity: 0; pointer-events: none; }
.social-ads-bau__knebel { position: relative; width: 58px; height: 32px; border-radius: 999px; background: #d8ccbb; transition: background .3s; }
.social-ads-bau__knebel::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fffdf9; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .35s var(--weich); }
.social-ads-bau__kippe b { display: block; font-size: 17px; }
.social-ads-bau__kippe small { font-size: 14.5px; color: var(--leise); }
.social-ads-bau__kippe:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-ads-bau__kippe:has(input:checked) { background: linear-gradient(90deg, rgba(244, 165, 58, .16), var(--creme) 80%); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-ads-bau__kippe:has(input:checked) .social-ads-bau__knebel { background: var(--espresso); }
.social-ads-bau__kippe:has(input:checked) .social-ads-bau__knebel::after { transform: translateX(26px); background: var(--bernstein); }
.social-ads-bau__kippe:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.social-ads-bau__satz { min-height: 64px; padding: 16px 0 0; border-top: 1px solid var(--tinte); }
.social-ads-bau__satz p { font: italic 400 clamp(22px, 2vw, 27px)/1.25 var(--serif); animation: auftritt .45s var(--weich) both; }
.social-ads-bau__satz p + p { margin-top: 8px; }
.social-ads-bau__satz--frage, .social-ads-bau__satz--pruefen { display: none; }
.social-ads-bau:has(#sa-bau-frage:checked) .social-ads-bau__satz--frage, .social-ads-bau:has(#sa-bau-pruefen:checked) .social-ads-bau__satz--pruefen { display: block; }
.social-ads-bau:has(#sa-bau-frage:checked) .social-ads-bau__satz--leer, .social-ads-bau:has(#sa-bau-pruefen:checked) .social-ads-bau__satz--leer { display: none; }
.social-ads-bau__handy { display: grid; gap: 8px; width: min(100%, 300px); justify-self: center; padding: 20px 16px 22px; border-radius: 34px; background: #fffdf9; box-shadow: 0 0 0 10px var(--espresso), 0 0 0 11px rgba(244, 165, 58, .35), 0 50px 90px -40px rgba(40, 25, 10, .8); }
.social-ads-bau__kopf { display: grid; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.social-ads-bau__kopf small { font-size: 12px; color: var(--leise); }
.social-ads-bau__kopf b { font-size: 15px; }
.social-ads-bau__feld { display: grid; gap: 4px; font-size: 12.5px; color: var(--leise); }
.social-ads-bau__feld i { height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px #d8ccbb; background: var(--papier); }
.social-ads-bau__extra { display: grid; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--weich), opacity .35s, padding .4s; }
.social-ads-bau__extra b { font-size: 13.5px; }
.social-ads-bau__extra em { padding: 6px 10px; border-radius: 9px; font-size: 12.5px; font-style: normal; color: var(--leise); box-shadow: inset 0 0 0 1px #e0d6c8; }
.social-ads-bau__extra em.ist { color: var(--tinte); font-weight: 600; background: rgba(244, 165, 58, .16); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-ads-bau__extra--pruefen { border-radius: 12px; background: var(--creme); }
.social-ads-bau__extra--pruefen small { font-size: 12.5px; color: var(--leise); }
.social-ads-bau:has(#sa-bau-frage:checked) .social-ads-bau__extra--frage { max-height: 200px; opacity: 1; padding-top: 4px; }
.social-ads-bau:has(#sa-bau-pruefen:checked) .social-ads-bau__extra--pruefen { max-height: 120px; opacity: 1; padding: 10px 12px; }
.social-ads-bau__senden { margin-top: 4px; padding: 11px; border-radius: 999px; font-size: 14px; font-weight: 700; text-align: center; color: var(--tinte); background: var(--bernstein); }
@media (max-width: 860px) { .social-ads-bau__raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Einwilligung: Text links, Schaltbild rechts ---------- */
.social-ads-einwilligung__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.social-ads-einwilligung__text > p { max-width: 36em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.social-ads-einwilligung__text h3 { margin-top: 30px; font-size: clamp(21px, 1.8vw, 25px); }
.social-ads-einwilligung__text strong { color: var(--tinte); }
.social-ads-schaltbild { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 18px; padding: clamp(24px, 3vw, 38px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.social-ads-schaltbild__titel { font: italic 400 clamp(26px, 2.3vw, 32px)/1.12 var(--serif); }
.social-ads-schaltbild__titel em { color: var(--bernstein-licht); }
.social-ads-schaltbild__wahl { display: flex; gap: 4px; margin: 0; padding: 5px; border: 0; border-radius: 999px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.social-ads-schaltbild__wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.social-ads-schaltbild__wahl label { position: relative; flex: 1; cursor: pointer; }
.social-ads-schaltbild__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.social-ads-schaltbild__wahl span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--hell-leise); text-align: center; transition: background .3s, color .3s; }
.social-ads-schaltbild__wahl input:checked + span { color: var(--tinte); background: var(--hell); }
.social-ads-schaltbild__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 3px; }
.social-ads-schaltbild__fluss { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.social-ads-schaltbild__start { position: relative; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--tinte); background: var(--hell); writing-mode: vertical-rl; transform: rotate(180deg); }
.social-ads-schaltbild__fluss ul { position: relative; display: grid; gap: 10px; }
.social-ads-schaltbild__fluss ul::before { content: ""; position: absolute; left: -18px; top: 22px; bottom: 22px; border-left: 2px dashed rgba(246, 239, 230, .2); }
.social-ads-schaltbild__fluss li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(246, 239, 230, .05); box-shadow: inset 0 0 0 1px var(--linie-dunkel); transition: background .4s, box-shadow .4s; }
.social-ads-schaltbild__fluss li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; border-top: 2px dashed rgba(246, 239, 230, .2); transition: border-color .4s; }
.social-ads-schaltbild__fluss li i { width: 12px; height: 12px; border-radius: 50%; background: #6e645a; transition: background .4s, box-shadow .4s; }
.social-ads-schaltbild__fluss li b { font-size: 15.5px; }
.social-ads-schaltbild__fluss small { font-size: 13px; color: var(--hell-leise); white-space: nowrap; }
.social-ads-aus { display: none; }
.social-ads-schaltbild:has(#sa-keks-ja:checked) .social-ads-schaltbild__fluss li { background: linear-gradient(90deg, rgba(244, 165, 58, .18), rgba(244, 165, 58, .04)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .5); }
.social-ads-schaltbild:has(#sa-keks-ja:checked) .social-ads-schaltbild__fluss li::before { border-color: var(--bernstein); }
.social-ads-schaltbild:has(#sa-keks-ja:checked) .social-ads-schaltbild__fluss li i { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .2), 0 0 14px rgba(244, 165, 58, .6); }
.social-ads-schaltbild:has(#sa-keks-ja:checked) .social-ads-an { color: var(--bernstein-licht); }
.social-ads-schaltbild:has(#sa-keks-nein:checked) .social-ads-an { display: none; }
.social-ads-schaltbild:has(#sa-keks-nein:checked) .social-ads-aus { display: inline; }
.social-ads-schaltbild:has(#sa-keks-nein:checked) .social-ads-schaltbild__fluss li b { color: #9c8f80; text-decoration: line-through; text-decoration-color: rgba(156, 143, 128, .6); }
.social-ads-schaltbild__fuss { font-size: 14px; line-height: 1.5; color: var(--bernstein-licht); }
.social-ads-schaltbild__liste { padding-top: 16px; border-top: 1px solid var(--linie-dunkel); }
.social-ads-schaltbild__liste > p { font: italic 400 22px/1.2 var(--serif); }
.social-ads-schaltbild__liste ul { display: grid; gap: 8px; margin-top: 10px; }
.social-ads-schaltbild__liste li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: #e9dfd2; }
.social-ads-schaltbild__liste li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; background: var(--bernstein); transform: rotate(45deg); }
.social-ads-schaltbild__liste small { display: block; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) {
  .social-ads-einwilligung__raster { grid-template-columns: minmax(0, 1fr); }
  .social-ads-schaltbild { position: static; }
}
@media (max-width: 420px) {
  .social-ads-schaltbild { padding: 22px 16px; }
  .social-ads-schaltbild__fluss li { grid-template-columns: 12px minmax(0, 1fr); }
  .social-ads-schaltbild__fluss small { grid-column: 2; white-space: normal; }
}

/* ---------- Partner, Vorgehen, Preis ---------- */
.social-ads-partner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; margin-bottom: clamp(80px, 9vw, 140px); padding-bottom: clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--linie); }
.social-ads-partner__plakette { display: block; width: min(100%, 300px); justify-self: center; padding: 16px; border-radius: 24px; background: #fffdf9; box-shadow: 0 0 0 1px var(--linie), 0 0 0 10px rgba(255, 253, 249, .55), 0 50px 90px -40px rgba(60, 40, 20, .6); transform: rotate(2.5deg); }
.social-ads-partner__plakette img { width: 100%; border-radius: 10px; }
.social-ads-partner__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.social-ads-partner__text > p:not(.social-ads-person) { max-width: 36em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.social-ads-partner__text strong { color: var(--tinte); }
.social-ads-person { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.social-ads-person img { flex: none; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--linie); }
.social-ads-person b { color: var(--tinte); }
.social-ads-preis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.social-ads-preis__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.social-ads-preis__text > p { max-width: 32em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.social-ads-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: sa-pw; }
.social-ads-preis__weg li { counter-increment: sa-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.social-ads-preis__weg li::before { content: counter(sa-pw, upper-roman); grid-row: span 2; font: italic 400 27px/1.1 var(--serif); color: var(--bernstein-text); }
.social-ads-preis__weg b { font-size: 18px; }
.social-ads-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.social-ads-regler { padding: clamp(26px, 3vw, 42px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.social-ads-regler__titel { padding-bottom: 16px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(28px, 2.4vw, 36px)/1.1 var(--serif); }
.social-ads-regler__titel em { color: var(--bernstein-licht); }
.social-ads-regler ul { counter-reset: sa-r; }
.social-ads-regler li { counter-increment: sa-r; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--linie-dunkel); }
.social-ads-regler li:last-child { border-bottom: 0; padding-bottom: 0; }
.social-ads-regler li::before { content: counter(sa-r, upper-roman); grid-row: span 2; font: italic 400 24px/1.1 var(--serif); color: var(--bernstein-licht); }
.social-ads-regler b { font-size: 17.5px; }
.social-ads-regler span { font-size: 15px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) {
  .social-ads-partner, .social-ads-preis { grid-template-columns: minmax(0, 1fr); }
  .social-ads-partner__plakette { width: 220px; }
}
@media (max-width: 560px) { .social-ads-regler { padding: 24px 20px; border-radius: 22px; } }

/* ---------- Befund: Reiterleiste bei nur einer Art ausblenden ---------- */
.social-ads-befund .befund__arten[hidden] { display: none; }
@media (min-width: 761px) and (max-width: 1099px) {
  .social-ads-einstieg .einstieg__aussage { font-size: clamp(36px, 4.6vw, 46px); }
}
/* Wegweiser auf dunklem Abschnitt: heller Rahmen, dunkle Schrift */
.social-ads-duell .social-ads-lotse { color: var(--tinte); }
.social-ads-duell .social-ads-lotse .werkzeug__kopf p { color: var(--leise); }
.social-ads-duell .social-ads-lotse h3 { color: var(--tinte); }
.social-ads-duell .social-ads-lotse__ergebnis { color: var(--hell); }

/* ==========================================================================
   Zusatz Social Recruiting (social-recruiting/index.html, Quelle _werkzeug/seiten/32-social-recruiting.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix social-recruiting-. Nur Tokens aus :root
   (Ampelfarben wie .ampel in grund.css). Achtung: teile/zusatz/social-recruiting.css (alter Rahmen) nutzt
   social-recruiting-kosten und social-recruiting-strecke; diese Namen hier bewusst nicht verwenden.
   Enthält: Recruiting-Formular (Feld Stelle), Live-Szene „Vom Feed zur Bewerbung“ (Handy, vier Takte),
   Plattform-Wahl, Bewerbungs-Trichter, Kostenblöcke zum Abhaken, Rechner-Zusätze, ehrliches Angebot,
   Formulierungs-Prüfer AGG, Regeln Meta und Datenschutz, Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen, data-rechner, data-szenen aus ares.js.
   ========================================================================== */

/* ---------- Einstieg: Recruiting-Formular mit Feld „Welche Stelle ist offen?“ ---------- */
.social-recruiting-start .start__wahl { margin-bottom: 10px; }
.social-recruiting-start__stelle { height: 54px; flex: none; width: 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 36px -24px rgba(0, 0, 0, .9); }
.social-recruiting-start__stelle input { font-size: 17px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .social-recruiting-start__stelle { height: 46px; }
  .social-recruiting-einstieg .start { margin-top: 14px; }
  .social-recruiting-start .start__fuss { margin-top: 8px; }
  .social-recruiting-start .start__wahl { margin-bottom: 8px; }
  .social-recruiting-start .start__feld:not(.social-recruiting-start__stelle), .social-recruiting-start .start__knopf { height: 56px; min-height: 56px; }
}
@media (max-width: 760px) {
  .social-recruiting-start__stelle { height: 50px; padding: 0 18px; }
  .social-recruiting-start .start__wahl { margin-bottom: 8px; }
  .social-recruiting-start .start__wahl legend { margin-bottom: 8px; }
}

/* ---------- Live-Szene: Handy mit vier Takten, rechts die Stationen im Gleichtakt ---------- */
.social-recruiting-sz .sz-kopf { margin-bottom: 14px; }
.social-recruiting-sz__buehne { flex: 1; min-height: 0; display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.social-recruiting-sz__handy { position: relative; height: 100%; max-height: 300px; align-self: center; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #19140f, #110e0b); box-shadow: inset 0 0 0 5px #2c241d, inset 0 0 0 6px rgba(246, 239, 230, .16), 0 34px 54px -26px rgba(0, 0, 0, .95), 0 0 60px -30px rgba(244, 165, 58, .6); }
.social-recruiting-sz__kerbe { position: absolute; left: 50%; top: 10px; width: 46px; height: 6px; border-radius: 6px; background: #2c241d; transform: translateX(-50%); }
.social-recruiting-sz__bild { position: absolute; inset: 26px 11px 12px; display: flex; flex-direction: column; gap: 7px; opacity: 0; }
.social-recruiting-sz__bild--feed { opacity: 1; justify-content: center; }
/* Takt I: Feed mit eingerasteter Anzeige */
.social-recruiting-sz__post { display: grid; gap: 5px; padding: 9px 10px; border-radius: 10px; background: rgba(246, 239, 230, .05); }
.social-recruiting-sz__post i { height: 5px; border-radius: 3px; background: rgba(246, 239, 230, .14); }
.social-recruiting-sz__post i + i { width: 62%; }
.social-recruiting-sz__anzeige { display: grid; gap: 3px; padding: 8px; border-radius: 12px; background: #f6efe6; color: var(--tinte); box-shadow: 0 0 0 1.5px var(--bernstein), 0 12px 26px -12px rgba(244, 165, 58, .7); }
.social-recruiting-sz__foto { display: flex; align-items: flex-end; height: 62px; margin-bottom: 4px; padding: 6px 8px; border-radius: 8px; background: radial-gradient(circle at 75% 30%, rgba(247, 187, 99, .85) 0 9%, rgba(247, 187, 99, 0) 10%), linear-gradient(180deg, rgba(28, 23, 19, 0) 40%, rgba(28, 23, 19, .55)), linear-gradient(150deg, #5a4430, #241c15 80%); }
.social-recruiting-sz__foto b { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--hell); }
.social-recruiting-sz__anzeige > b { font-size: 12.5px; line-height: 1.2; }
.social-recruiting-sz__anzeige small { font-size: 10.5px; line-height: 1.3; color: var(--leise); }
.social-recruiting-sz__gehalt { font-weight: 700; color: var(--bernstein-text) !important; }
.social-recruiting-sz__knopf { display: grid; place-items: center; min-height: 26px; margin-top: 5px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #1a130c; background: var(--bernstein); white-space: nowrap; }
/* Takt II: Fragen zum Antippen */
.social-recruiting-sz__schritt { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--bernstein-licht); }
.social-recruiting-sz__frage { display: grid; gap: 6px; padding: 9px 10px; border-radius: 12px; background: rgba(246, 239, 230, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.social-recruiting-sz__frage b { font-size: 12px; line-height: 1.25; color: var(--hell); }
.social-recruiting-sz__frage > span { display: flex; gap: 6px; }
.social-recruiting-sz__frage i { flex: 1; display: grid; place-items: center; min-height: 24px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 600; color: #cdbfae; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); white-space: nowrap; }
/* Takt III: Kontakt */
.social-recruiting-sz__eingabe { display: grid; gap: 4px; padding: 7px 10px 9px; border-radius: 10px; background: #f6efe6; }
.social-recruiting-sz__eingabe small { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: var(--leise); }
.social-recruiting-sz__eingabe i { display: block; width: 70%; height: 6px; border-radius: 3px; background: #cdbfae; }
.social-recruiting-sz__eingabe + .social-recruiting-sz__eingabe i { width: 52%; }
.social-recruiting-sz__eingabe--wahl b { font-size: 12px; color: var(--bernstein-text); }
/* Takt IV: Bestätigung mit Namen */
.social-recruiting-sz__bild--danke { align-items: center; justify-content: center; gap: 6px; text-align: center; }
.social-recruiting-sz__haken { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 8px rgba(244, 165, 58, .18); }
.social-recruiting-sz__haken svg { width: 26px; height: 26px; fill: none; stroke: #1a130c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.social-recruiting-sz__bild--danke > b { font-size: 14px; color: var(--hell); }
.social-recruiting-sz__bild--danke > small { font-size: 11px; color: #cdbfae; }
.social-recruiting-sz__person { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; text-align: left; background: rgba(246, 239, 230, .08); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .4); }
.social-recruiting-sz__person i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #cdbfae 0 26%, rgba(205, 191, 174, 0) 27%), radial-gradient(circle at 50% 110%, #cdbfae 0 46%, #3a3029 47%); }
.social-recruiting-sz__person span { display: grid; font-size: 10.5px; color: #cdbfae; }
.social-recruiting-sz__person span b { font-size: 11.5px; color: var(--hell); }
/* Stationen rechts */
.social-recruiting-sz__takte { display: grid; align-content: center; gap: 8px; counter-reset: none; }
.social-recruiting-sz__takte li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 12px 9px 8px; border-radius: 14px; background: rgba(255, 244, 228, .04); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.social-recruiting-sz__takte span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: italic 400 16px/1 var(--serif); color: #a99b89; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .2); }
.social-recruiting-sz__takte b { font-size: 14px; font-weight: 600; line-height: 1.2; color: #e1d5c5; }
.social-recruiting-sz__takte small { font-size: 12px; line-height: 1.3; color: #a99b89; }
.social-recruiting-sz__takte li:first-child { background: linear-gradient(90deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55); }
.social-recruiting-sz__takte li:first-child span { background: var(--bernstein); color: #1a130c; box-shadow: none; }
.social-recruiting-sz__takte li:first-child b { color: var(--hell); }
/* Bewegung: 14 Sekunden, je Takt 3,5 Sekunden (bei reduzierter Bewegung steht Takt I) */
.ist-aktiv .social-recruiting-sz__bild { animation: social-recruiting-takt 14s linear infinite; animation-delay: calc(var(--t) * 3.5s); }
@keyframes social-recruiting-takt { 0% { opacity: 0; transform: translateY(10px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
.ist-aktiv .social-recruiting-sz__bild--feed > * { animation: social-recruiting-scroll 14s var(--weich) infinite; }
@keyframes social-recruiting-scroll { 0% { transform: translateY(70px); } 9%, 100% { transform: none; } }
.ist-aktiv .social-recruiting-sz__bild--feed .social-recruiting-sz__knopf { animation: social-recruiting-tipp 14s ease infinite; }
@keyframes social-recruiting-tipp { 0%, 17% { transform: none; box-shadow: none; } 19% { transform: scale(.93); box-shadow: 0 0 0 7px rgba(244, 165, 58, .35); } 21%, 100% { transform: none; box-shadow: none; } }
.ist-aktiv .social-recruiting-sz__wahl { animation: 14s ease 3.5s infinite; }
.ist-aktiv .social-recruiting-sz__wahl--1 { animation-name: social-recruiting-wahl1; }
.ist-aktiv .social-recruiting-sz__wahl--2 { animation-name: social-recruiting-wahl2; }
.ist-aktiv .social-recruiting-sz__wahl--3 { animation-name: social-recruiting-wahl3; }
@keyframes social-recruiting-wahl1 { 0%, 5% { background: none; color: #cdbfae; } 6%, 23% { background: var(--bernstein); color: #1a130c; } 25%, 100% { background: none; color: #cdbfae; } }
@keyframes social-recruiting-wahl2 { 0%, 10% { background: none; color: #cdbfae; } 11%, 23% { background: var(--bernstein); color: #1a130c; } 25%, 100% { background: none; color: #cdbfae; } }
@keyframes social-recruiting-wahl3 { 0%, 15% { background: none; color: #cdbfae; } 16%, 23% { background: var(--bernstein); color: #1a130c; } 25%, 100% { background: none; color: #cdbfae; } }
.ist-aktiv .social-recruiting-sz__eingabe i { animation: social-recruiting-fuellen 14s ease 7s infinite; }
@keyframes social-recruiting-fuellen { 0%, 3% { transform: scaleX(0); } 8%, 100% { transform: none; } }
.social-recruiting-sz__eingabe i { transform-origin: left; }
.ist-aktiv .social-recruiting-sz__haken { animation: social-recruiting-haken 14s cubic-bezier(.3, 1.6, .5, 1) 10.5s infinite; }
@keyframes social-recruiting-haken { 0%, 2% { transform: scale(.3); } 6%, 100% { transform: none; } }
.ist-aktiv .social-recruiting-sz__takte li { animation: social-recruiting-station 14s linear infinite; animation-delay: calc(var(--t) * 3.5s); }
@keyframes social-recruiting-station {
  0%, 24% { background: linear-gradient(90deg, rgba(244, 165, 58, .22), rgba(244, 165, 58, .05)); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .55); }
  25%, 100% { background: rgba(255, 244, 228, .04); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
}
.ist-aktiv .social-recruiting-sz__takte span { animation: social-recruiting-nummer 14s linear infinite; animation-delay: calc(var(--t) * 3.5s); }
@keyframes social-recruiting-nummer { 0%, 24% { background: var(--bernstein); color: #1a130c; } 25%, 100% { background: none; color: #a99b89; } }
@media (min-width: 1100px) and (max-height: 800px) {
  .social-recruiting-sz__handy { max-height: 262px; }
  .social-recruiting-sz__foto { height: 44px; }
  .social-recruiting-sz__post:last-child { display: none; }
  .social-recruiting-sz__takte { gap: 6px; }
  .social-recruiting-sz__takte li { padding-block: 6px; }
}
@media (max-width: 760px) {
  .social-recruiting-sz .sz-kopf { margin-bottom: 9px; }
  .social-recruiting-sz__buehne { grid-template-columns: minmax(0, 1fr); }
  .social-recruiting-sz__handy { display: none; }
  .social-recruiting-sz__takte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: start; }
  .social-recruiting-sz__takte li { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 5px; padding: 7px 8px 8px; border-radius: 11px; }
  .social-recruiting-sz__takte span { grid-row: auto; width: 22px; height: 22px; font-size: 13px; }
  .social-recruiting-sz__takte b { font-size: 11.5px; line-height: 1.15; }
  .social-recruiting-sz__takte small { display: none; }
}

/* ---------- Leistungsumfang mit Plattform-Wahl ---------- */
.social-recruiting-plattform { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(28px, 4vw, 64px); align-items: stretch; margin-bottom: clamp(48px, 5vw, 80px); }
.social-recruiting-plattform__frage { display: flex; flex-direction: column; justify-content: center; }
.social-recruiting-plattform__frage h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
.social-recruiting-plattform__frage h3 em, .social-recruiting-ehrlich h3 em, .social-recruiting-pruefer h3 em, .social-recruiting-regeln h3 em, .social-recruiting-preis h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.social-recruiting-plattform__frage > p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--leise); }
.social-recruiting-plattform__wahl { display: grid; gap: 10px; margin-top: 22px; }
.social-recruiting-plattform__wahl [role="tab"] { position: relative; display: grid; font-family: var(--grotesk); gap: 2px; width: 100%; padding: 16px 52px 16px 20px; border: 0; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); text-align: left; cursor: pointer; transition: box-shadow .25s, background .25s, transform .35s var(--weich); }
.social-recruiting-plattform__wahl [role="tab"]::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .45); transform: translateY(-50%); transition: background .25s, box-shadow .25s; }
.social-recruiting-plattform__wahl [role="tab"] b { font-size: 17px; line-height: 1.25; }
.social-recruiting-plattform__wahl [role="tab"] small { font-size: 14.5px; color: var(--leise); }
.social-recruiting-plattform__wahl [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-recruiting-plattform__wahl [role="tab"][aria-selected="true"] { background: #fffdf9; box-shadow: inset 0 0 0 2px var(--bernstein-tief), 0 20px 40px -26px rgba(60, 40, 20, .55); transform: translateX(6px); }
.social-recruiting-plattform__wahl [role="tab"][aria-selected="true"]::after { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); }
.social-recruiting-plattform__felder { min-width: 0; }
.social-recruiting-plattform__feld { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 100%; min-height: 340px; padding: clamp(28px, 3.4vw, 48px); overflow: hidden; border-radius: 30px; color: var(--hell); background: radial-gradient(70% 80% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #2a221c 0%, #16120f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 110px -60px rgba(40, 25, 10, .8); animation: auftritt .45s var(--weich) both; }
.social-recruiting-plattform__feld[hidden] { display: none; }
.social-recruiting-plattform__marke { align-self: flex-start; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #1a130c; background: var(--bernstein); }
.social-recruiting-plattform__feld:not(#pf-feld-1) .social-recruiting-plattform__marke { color: var(--bernstein-licht); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .45); }
.social-recruiting-plattform__name { font: italic 400 clamp(30px, 2.8vw, 40px)/1.08 var(--serif); color: var(--hell); }
.social-recruiting-plattform__feld > p:not(.social-recruiting-plattform__name) { max-width: 32em; font-size: 17px; line-height: 1.6; color: var(--hell-leise); }
.social-recruiting-plattform__feld ul { display: grid; gap: 9px; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(244, 165, 58, .4); }
.social-recruiting-plattform__feld li { position: relative; padding-left: 22px; font-size: 16px; color: #e9dfd2; }
.social-recruiting-plattform__feld li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; background: var(--bernstein); transform: rotate(45deg); }
@media (max-width: 960px) {
  .social-recruiting-plattform { grid-template-columns: minmax(0, 1fr); }
  .social-recruiting-plattform__feld { min-height: 0; }
  .social-recruiting-plattform__wahl [role="tab"][aria-selected="true"] { transform: none; }
}
@media (max-width: 560px) {
  .social-recruiting-plattform__feld { border-radius: 24px; padding: 26px 20px; }
  .social-recruiting-plattform__wahl [role="tab"] { padding: 14px 46px 14px 16px; }
}

/* ---------- Anatomie: Trichter aus vier Stationen, Feld rechts ---------- */
.social-recruiting-anatomie { overflow-x: clip; }
.social-recruiting-trichter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.social-recruiting-trichter__stufen { position: relative; display: grid; justify-items: center; gap: 8px; padding-bottom: 30px; }
.social-recruiting-trichter__stufen::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 26px; background: linear-gradient(var(--bernstein-tief), rgba(228, 143, 23, 0)); transform: translateX(-50%); }
.social-recruiting-trichter__stufen [role="tab"] { display: flex; align-items: center; justify-content: center; gap: 14px; width: calc(100% - var(--n) * 14%); min-height: 70px; padding: 0 28px; border: 0; color: var(--tinte); background: linear-gradient(180deg, #efe6d8, #e2d6c3); clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%); font: 600 18px/1.2 var(--grotesk); cursor: pointer; transition: background .3s, color .3s, transform .35s var(--weich); }
.social-recruiting-trichter__stufen [role="tab"] span { font: italic 400 26px/1 var(--serif); color: var(--bernstein-text); }
.social-recruiting-trichter__stufen [role="tab"]:hover { background: linear-gradient(180deg, #f3ebdf, #e8dccb); }
.social-recruiting-trichter__stufen [role="tab"]:focus-visible { outline: none; background: linear-gradient(180deg, #f7efe2, #ead9bf); text-decoration: underline; text-decoration-color: var(--bernstein-tief); text-underline-offset: 4px; }
.social-recruiting-trichter__stufen [role="tab"][aria-selected="true"] { color: var(--hell); background: linear-gradient(180deg, #33291f, #1a1511); transform: scale(1.03); }
.social-recruiting-trichter__stufen [role="tab"][aria-selected="true"] span { color: var(--bernstein-licht); }
.social-recruiting-trichter__felder { min-width: 0; }
.social-recruiting-trichter__feld { position: relative; padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); animation: auftritt .45s var(--weich) both; }
.social-recruiting-trichter__feld[hidden] { display: none; }
.social-recruiting-trichter__feld h3 { font: italic 400 clamp(32px, 3vw, 44px)/1.05 var(--serif); letter-spacing: -.01em; }
.social-recruiting-trichter__feld > p:not(.social-recruiting-trichter__fehler) { margin-top: 16px; font-size: 17.5px; line-height: 1.6; color: var(--leise); }
.social-recruiting-trichter__feld > p b { color: var(--tinte); }
.social-recruiting-trichter__fehler { display: grid; gap: 4px; margin-top: 22px; padding: 16px 20px; border-radius: 16px; font-size: 16.5px; line-height: 1.5; color: var(--tinte); background: #fffdf9; box-shadow: inset 3px 0 0 #962c13, inset 0 0 0 1px var(--linie); }
.social-recruiting-trichter__fehler b { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: #962c13; }
.social-recruiting-anatomie__notiz { display: flex; align-items: flex-start; gap: 14px; max-width: 58em; margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--linie); font-size: 16px; line-height: 1.6; color: var(--leise); }
.social-recruiting-anatomie__notiz .symbol { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--bernstein-text); }
.social-recruiting-anatomie__notiz b { color: var(--tinte); }
@media (max-width: 960px) { .social-recruiting-trichter { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .social-recruiting-trichter__stufen [role="tab"] { min-height: 58px; padding: 0 22px; font-size: 16px; width: calc(100% - var(--n) * 10%); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%); }
  .social-recruiting-trichter__feld { border-radius: 22px; padding: 24px 20px; }
}

/* ---------- Kosten: vier Blöcke zum Abhaken mit Stand ---------- */
.social-recruiting-bloecke { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 3vw, 40px); align-items: stretch; }
.social-recruiting-bloecke__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.social-recruiting-bloecke__block { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 6px 16px; padding: 24px 24px 26px; border-radius: 22px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; transition: box-shadow .3s, background .3s, transform .35s var(--weich); }
.social-recruiting-bloecke__block input { position: absolute; opacity: 0; pointer-events: none; }
.social-recruiting-bloecke__block:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.social-recruiting-bloecke__block:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-recruiting-bloecke__nr { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: italic 400 22px/1 var(--serif); color: var(--bernstein-text); box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .4); transition: background .3s, color .3s; }
.social-recruiting-bloecke__block > b { align-self: center; font-size: 19px; line-height: 1.25; }
.social-recruiting-bloecke__block > span:not(.social-recruiting-bloecke__nr) { grid-column: 2; font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.social-recruiting-bloecke__fehlt { grid-column: 2; justify-self: start; display: none; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #f9ecc9; color: #6f4400; }
.social-recruiting-bloecke__block:has(input:checked) { background: #fffdf9; box-shadow: inset 0 0 0 2px var(--bernstein-tief), 0 18px 36px -26px rgba(60, 40, 20, .5); }
.social-recruiting-bloecke__block:has(input:checked) .social-recruiting-bloecke__nr { background: var(--espresso); color: var(--bernstein-licht); box-shadow: none; }
.social-recruiting-bloecke:not([data-summe="0"]) .social-recruiting-bloecke__block:not(:has(input:checked)) { background: repeating-linear-gradient(135deg, rgba(244, 165, 58, .07) 0 8px, rgba(244, 165, 58, 0) 8px 16px), var(--papier); box-shadow: inset 0 0 0 1.5px rgba(228, 143, 23, .55); }
.social-recruiting-bloecke:not([data-summe="0"]) .social-recruiting-bloecke__block:not(:has(input:checked)) .social-recruiting-bloecke__fehlt { display: inline-block; animation: auftritt .4s var(--weich) both; }
.social-recruiting-bloecke__stand { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px; border-radius: 24px; color: var(--hell); background: radial-gradient(90% 60% at 100% 0%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), var(--espresso); }
.social-recruiting-bloecke__stand [hidden] { display: none; }
.social-recruiting-bloecke__zahl { display: grid; gap: 4px; }
.social-recruiting-bloecke__zahl b { font: italic 400 72px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.social-recruiting-bloecke__zahl span { font-size: 15px; color: var(--hell-leise); }
.social-recruiting-bloecke__stand p:not(.social-recruiting-bloecke__zahl) { font-size: 15.5px; line-height: 1.55; color: #e1d5c5; }
.social-recruiting-bloecke__stand p b { color: var(--hell); }
@media (max-width: 1099px) { .social-recruiting-bloecke { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .social-recruiting-bloecke__liste { grid-template-columns: minmax(0, 1fr); }
  .social-recruiting-bloecke__block { padding: 20px 18px 22px; grid-template-columns: 38px minmax(0, 1fr); gap: 6px 12px; }
  .social-recruiting-bloecke__nr { width: 38px; height: 38px; font-size: 19px; }
  .social-recruiting-bloecke__zahl b { font-size: 56px; }
}

/* ---------- Rechner: Rechenweg und Satzzeile ---------- */
.social-recruiting-rechner { margin-top: clamp(56px, 6vw, 96px); }
.social-recruiting-rechner h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.social-recruiting-rechner__weg { display: flex; margin: 22px 0 6px; }
.social-recruiting-rechner__weg li { position: relative; flex: 1; display: grid; gap: 2px; padding: 12px 22px 12px 18px; background: rgba(255, 244, 228, .06); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.social-recruiting-rechner__weg li:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 12px 0 0 12px; }
.social-recruiting-rechner__weg li:last-child { background: linear-gradient(90deg, rgba(244, 165, 58, .3), rgba(244, 165, 58, .12)); }
.social-recruiting-rechner__weg li + li { margin-left: -6px; padding-left: 24px; }
.social-recruiting-rechner__weg b { font-size: 15px; color: var(--hell); }
.social-recruiting-rechner__weg span { font-size: 12.5px; line-height: 1.3; color: var(--hell-leise); }
.social-recruiting-rechner__satz { display: none; padding: 10px 16px; border-radius: 12px; font-size: 15px !important; color: #6f4400 !important; background: #f9ecc9; }
.social-recruiting-rechner form:has(input:invalid) .social-recruiting-rechner__satz { display: block; }
@media (max-width: 560px) {
  .social-recruiting-rechner__weg li { padding: 10px 14px 10px 12px; }
  .social-recruiting-rechner__weg li + li { padding-left: 18px; }
  .social-recruiting-rechner__weg span { display: none; }
  .social-recruiting-rechner .werkzeug__fuss .knopf { width: 100%; }
}

/* ---------- Ehrliches Angebot ---------- */
.social-recruiting-ehrlich { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(64px, 7vw, 112px); }
.social-recruiting-ehrlich h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; }
.social-recruiting-ehrlich ol { margin-top: 24px; border-top: 1px solid var(--tinte); counter-reset: social-recruiting-e; }
.social-recruiting-ehrlich ol li { counter-increment: social-recruiting-e; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.social-recruiting-ehrlich ol li::before { content: counter(social-recruiting-e, upper-roman); grid-row: span 2; font: italic 400 28px/1.05 var(--serif); color: var(--bernstein-text); }
.social-recruiting-ehrlich ol b { font-size: 18px; line-height: 1.35; }
.social-recruiting-ehrlich ol span { font-size: 16px; line-height: 1.55; color: var(--leise); }
.social-recruiting-ehrlich__kasten { transform: rotate(-1deg); }
@media (max-width: 960px) { .social-recruiting-ehrlich { grid-template-columns: minmax(0, 1fr); } .social-recruiting-ehrlich__kasten { transform: none; } }

/* ---------- Recht: Formulierungs-Prüfer ---------- */
.social-recruiting-recht { overflow-x: clip; }
.social-recruiting-pruefer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px clamp(28px, 4vw, 64px); padding: clamp(28px, 3.6vw, 52px); border-radius: 30px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 0 50px 100px -60px rgba(60, 40, 20, .5); }
.social-recruiting-pruefer::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein) 50%, rgba(244, 165, 58, 0)); }
.social-recruiting-pruefer__kopf { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(28px, 4vw, 64px); align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--linie); }
.social-recruiting-pruefer__kopf h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
.social-recruiting-pruefer__kopf p { font-size: 16.5px; line-height: 1.55; color: var(--leise); }
.social-recruiting-pruefer__wahl { display: grid; gap: 10px; align-content: start; }
.social-recruiting-pruefer__wahl [role="tab"] { min-height: 58px; padding: 10px 20px; border: 0; border-radius: 16px; text-align: left; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: italic 400 22px/1.2 var(--serif); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.social-recruiting-pruefer__wahl [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.social-recruiting-pruefer__wahl [role="tab"][aria-selected="true"] { color: var(--hell); background: var(--espresso); box-shadow: 0 16px 30px -18px rgba(28, 23, 19, .8); }
.social-recruiting-pruefer__felder { min-width: 0; }
.social-recruiting-pruefer__feld { display: grid; align-content: center; gap: 16px; height: 100%; min-height: 220px; padding: 28px 30px; border-radius: 22px; background: var(--creme); animation: auftritt .4s var(--weich) both; }
.social-recruiting-pruefer__feld[hidden] { display: none; }
.social-recruiting-pruefer__urteil { justify-self: start; padding: 6px 16px; border-radius: 999px; font-size: 15px; font-weight: 700; }
.social-recruiting-pruefer__feld--rot { box-shadow: inset 4px 0 0 #962c13; }
.social-recruiting-pruefer__feld--rot .social-recruiting-pruefer__urteil { background: #f7e1da; color: #962c13; }
.social-recruiting-pruefer__feld--gelb { box-shadow: inset 4px 0 0 #6f4400; }
.social-recruiting-pruefer__feld--gelb .social-recruiting-pruefer__urteil { background: #f9ecc9; color: #6f4400; }
.social-recruiting-pruefer__feld--gruen { box-shadow: inset 4px 0 0 #1c6537; }
.social-recruiting-pruefer__feld--gruen .social-recruiting-pruefer__urteil { background: #dcefe1; color: #1c6537; }
.social-recruiting-pruefer__feld p { font-size: 18px; line-height: 1.55; color: var(--tinte); }
.social-recruiting-pruefer__fuss { grid-column: 1 / -1; font-size: 13.5px; color: var(--leise); }
.social-recruiting-regeln { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; margin-top: 20px; }
.social-recruiting-regeln article { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); border-radius: 26px; }
.social-recruiting-regeln h3 { font-size: clamp(23px, 2vw, 28px); line-height: 1.15; }
.social-recruiting-regeln__meta { color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); }
.social-recruiting-regeln__meta h3 em { color: var(--bernstein-licht); }
.social-recruiting-regeln__meta > p { font-size: 16px; line-height: 1.55; color: var(--hell-leise); }
.social-recruiting-regeln__meta dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.social-recruiting-regeln__meta dl div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1); }
.social-recruiting-regeln__meta dt { font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-licht); }
.social-recruiting-regeln__meta dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: #e9dfd2; }
.social-recruiting-regeln__hinweis { padding-top: 14px; border-top: 1px solid var(--linie-dunkel); font-size: 15px !important; }
.social-recruiting-regeln__meta .knopf { align-self: flex-start; color: var(--hell); }
.social-recruiting-regeln__daten { background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.social-recruiting-regeln__daten > p { font-size: 16px; line-height: 1.55; color: var(--leise); }
.social-recruiting-regeln__daten ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.social-recruiting-regeln__daten li { padding: 7px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; background: #fffdf9; box-shadow: inset 0 0 0 1px var(--linie); }
@media (max-width: 960px) {
  .social-recruiting-pruefer, .social-recruiting-pruefer__kopf, .social-recruiting-regeln { grid-template-columns: minmax(0, 1fr); }
  .social-recruiting-pruefer__feld { min-height: 0; }
}
@media (max-width: 560px) {
  .social-recruiting-pruefer { padding: 24px 18px; border-radius: 24px; }
  .social-recruiting-pruefer__wahl [role="tab"] { font-size: 19px; min-height: 52px; }
  .social-recruiting-pruefer__feld { padding: 22px 20px; }
  .social-recruiting-regeln__meta dl { grid-template-columns: minmax(0, 1fr); }
  .social-recruiting-regeln article { border-radius: 22px; padding: 24px 20px; }
  .social-recruiting-regeln__meta .knopf { align-self: stretch; }
}

/* ---------- Preislogik ---------- */
.social-recruiting-preis { margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); align-items: center; }
.social-recruiting-preis h2 { font-size: clamp(32px, 3.6vw, 50px); }
.social-recruiting-preis__lead { max-width: 32em; margin: 16px 0 24px; font-size: 18px; line-height: 1.6; color: var(--leise); }
@media (max-width: 960px) { .social-recruiting-preis { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Über ARES (H2): seitenspezifische Gestaltung, alle Klassen mit Präfix ueber-
   Quelle: _werkzeug/seiten/50-ueber-ares.html. Nur Tokens aus :root, keine neuen Farben.
   Aufbau: Einstieg mit Helm-Skulptur und Zitatkarte, Haltung mit durchgestrichener „Kostenstelle“,
   Team-Phalanx mit Schilden als Reiter, Stationen und Belege, Bobby ausführlich, Wir wachsen.
   ========================================================================== */

/* ---------- 1. Einstieg: Helm in der Vitrine, Arturs Satz als Elfenbein-Karte ---------- */
.ueber-einstieg .einstieg__aussage em { margin-top: .06em; font-size: 1.12em; line-height: .98; }
.ueber-wache { grid-area: live; position: relative; justify-self: end; width: min(100%, 600px); margin: 0; }
.ueber-wache picture { position: relative; display: block; overflow: hidden; border-radius: 30px; box-shadow: 0 0 0 1px rgba(244, 165, 58, .22), 0 70px 120px -60px rgba(0, 0, 0, .95); }
.ueber-wache picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 17, 14, 0) 55%, rgba(21, 17, 14, .55) 100%), radial-gradient(90% 70% at 0% 100%, rgba(21, 17, 14, .55), rgba(21, 17, 14, 0) 70%); pointer-events: none; }
.ueber-wache__bild { width: 100%; height: clamp(380px, 60svh, 580px); object-fit: cover; object-position: 66% 42%; }
.ueber-wache__karte { position: absolute; left: clamp(-64px, -3.4vw, -24px); bottom: 30px; width: min(390px, 78%); padding: 24px 26px 22px; border-radius: 22px; background: var(--hell); color: var(--tinte); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(138, 79, 0, .12); }
.ueber-wache__karte::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: linear-gradient(90deg, var(--bernstein), rgba(244, 165, 58, 0)); }
.ueber-wache__karte p { font: italic 400 clamp(21px, 1.6vw, 24px)/1.25 var(--serif); letter-spacing: -.005em; text-indent: -.36em; }
.ueber-wache__karte footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 14.5px; line-height: 1.35; color: var(--leise); }
.ueber-wache__karte footer img { width: 48px; height: 48px; flex: none; border-radius: 50%; }
.ueber-wache__karte footer b { display: block; font-size: 16px; color: var(--tinte); }
.bewegt .ueber-wache { animation: auftritt 1.2s var(--weich) .3s both; }
.bewegt .ueber-wache__karte { animation: auftritt 1s var(--weich) .9s both; }
@media (min-width: 1100px) and (max-height: 800px) {
  .ueber-wache__bild { height: clamp(340px, 56svh, 440px); }
  .ueber-wache__karte { bottom: 22px; padding: 18px 22px 16px; }
  .ueber-wache__karte p { font-size: 20px; }
}
@media (max-width: 1099px) {
  .ueber-wache { justify-self: stretch; width: 100%; margin-top: 30px; }
  .ueber-wache__bild { height: clamp(260px, 42vw, 420px); object-position: 70% 40%; }
  .ueber-wache__karte { position: relative; left: auto; bottom: auto; width: auto; max-width: 520px; margin: -64px 18px 0 auto; }
}
@media (max-width: 760px) {
  .ueber-wache { margin-top: 22px; }
  .ueber-wache picture { border-radius: 22px; }
  .ueber-wache__bild { height: 210px; }
  .ueber-wache__karte { margin: -44px 12px 0; padding: 20px 20px 18px; border-radius: 18px; }
  .ueber-wache__karte p { font-size: 19.5px; }
}

/* ---------- 3. Haltung: „Kostenstelle“ wird durchgestrichen, darunter die Folge als Treppe ---------- */
.ueber-haltung__kopf { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; gap: 22px 72px; }
.ueber-haltung__kopf h2 { max-width: 12.5em; font-size: clamp(38px, 5.2vw, 78px); line-height: 1.02; }
.ueber-haltung__kopf h2 em { display: block; margin-top: .06em; color: var(--bernstein-text); }
.ueber-haltung__kopf p { max-width: 26em; font-size: 19px; line-height: 1.6; color: var(--leise); }
.ueber-streich { position: relative; white-space: nowrap; color: #7c7268; }
.ueber-streich::after { content: ""; position: absolute; left: -3%; right: -1%; top: 52%; height: .085em; border-radius: 4px; background: var(--bernstein); transform: rotate(-4deg); transform-origin: left center; box-shadow: 0 0 18px rgba(244, 165, 58, .35); }
.bewegt .ueber-haltung__kopf .ueber-streich::after { transform: rotate(-4deg) scaleX(0); transition: transform .9s var(--weich) .7s; }
.bewegt .ueber-haltung__kopf.ist-da .ueber-streich::after { transform: rotate(-4deg) scaleX(1); }

.ueber-folge { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 88px); }
.ueber-folge > li { --i: 0; position: relative; margin-top: calc(var(--i) * 44px); padding: 26px 0 0; border-top: 1.5px solid var(--tinte); }
.ueber-folge > li:nth-child(2) { --i: 1; }
.ueber-folge > li:nth-child(3) { --i: 2; border-top-color: var(--bernstein-tief); }
/* Stufe: kurzer senkrechter Strich verbindet die Stufen */
.ueber-folge > li + li::before { content: ""; position: absolute; left: calc(-1 * clamp(24px, 3vw, 48px)); top: -45px; width: clamp(24px, 3vw, 48px); height: 44px; border-top: 1.5px solid var(--linie); border-right: 1.5px solid var(--linie); border-top-right-radius: 14px; }
.ueber-folge__nr { display: block; font: italic 400 clamp(46px, 4.4vw, 64px)/1 var(--serif); color: var(--bernstein-text); }
.ueber-folge b { display: block; margin-top: 14px; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -.01em; }
.ueber-folge p { max-width: 22em; margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--leise); }
.ueber-folge > li:last-child .ueber-folge__nr { text-shadow: 0 0 30px rgba(244, 165, 58, .35); }
@media (max-width: 900px) {
  .ueber-haltung__kopf { grid-template-columns: minmax(0, 1fr); }
  .ueber-haltung__kopf p { font-size: 17px; }
  .ueber-folge { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .ueber-folge > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; margin-top: 0; margin-left: calc(var(--i) * 18px); padding: 22px 0; }
  .ueber-folge > li + li::before { display: none; }
  .ueber-folge__nr { grid-row: span 2; font-size: 44px; }
  .ueber-folge b { margin-top: 2px; }
}
@media (max-width: 420px) { .ueber-folge > li { margin-left: 0; grid-template-columns: 52px minmax(0, 1fr); } .ueber-folge__nr { font-size: 38px; } }

/* ---------- 5. Team-Phalanx: Schilde sind Reiter (data-reiter), das gewählte Schild dreht sich und tritt vor ---------- */
.ueber-team .phalanx__bild { opacity: .52; object-position: 28% 62%; }
.ueber-reihe .ueber-person { flex: 0 0 calc(var(--schild) * 1.42); width: calc(var(--schild) * 1.42); }
.ueber-person .phalanx__rolle { max-width: calc(var(--schild) * 1.3); }
.ueber-team::before { background: linear-gradient(180deg, rgba(28, 23, 19, .9) 0%, rgba(28, 23, 19, .58) 42%, rgba(28, 23, 19, .82) 70%, var(--espresso) 100%); }
.ueber-team .titelzeile p { max-width: 36em; }
.ueber-reihe { align-items: flex-start; }
.ueber-schilde { display: flex; justify-content: center; }
.ueber-person { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; text-decoration: none; cursor: pointer; perspective: 800px; -webkit-tap-highlight-color: transparent; }
.ueber-person:focus-visible { outline: none; }
.ueber-person:focus-visible .phalanx__schild { outline: 2px solid var(--bernstein-licht); outline-offset: 6px; }
.ueber-frei { flex-shrink: 0; margin-left: calc(var(--schild) * -.16); text-decoration: none; color: inherit; }
.ueber-frei:hover .phalanx__schild, .ueber-frei:focus-visible .phalanx__schild { border-color: var(--bernstein); }
/* Nicht gewählte Schilde treten leicht zurück, das gewählte leuchtet */
.ueber-person[aria-selected="false"] .phalanx__schild { filter: saturate(.7) brightness(.78); transition: transform .5s var(--weich), box-shadow .5s, filter .4s; }
.ueber-person[aria-selected="false"]:hover .phalanx__schild { filter: none; }
.ueber-person[aria-selected="true"] { z-index: 3; }
.ueber-person[aria-selected="true"] .phalanx__schild { transform: translateY(-12px); box-shadow: 0 40px 56px -26px rgba(0, 0, 0, .95), 0 0 0 4px var(--espresso), 0 0 0 6px var(--bernstein), 0 0 70px -4px rgba(244, 165, 58, .55); animation: ueber-wenden .9s var(--weich) both; }
.ueber-person[aria-selected="true"] .phalanx__name { color: var(--bernstein-licht); }
.ueber-person .phalanx__name { transition: color .3s; }
@keyframes ueber-wenden {
  0% { transform: translateY(0) rotateY(0); }
  45% { transform: translateY(-12px) rotateY(90deg); }
  100% { transform: translateY(-12px) rotateY(360deg); }
}
/* Geprägte Helm-Schilde für Personen ohne freigegebenes Foto: Bronze-Relief, innerer Ring, Initialen */
.ueber-praegung { align-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 34%, #6b523a 0%, #3c2e22 44%, #211a14 100%) padding-box, linear-gradient(150deg, #f1c98b 0%, #9a6a35 32%, #5e3d1c 55%, #c99552 78%, #6b4622 100%) border-box; }
.ueber-praegung::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(247, 187, 99, .38), inset 0 0 0 6px rgba(0, 0, 0, .22), inset 0 0 0 7px rgba(247, 187, 99, .14); pointer-events: none; }
.ueber-praegung::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 40% at 34% 22%, rgba(255, 236, 200, .22), rgba(255, 236, 200, 0) 70%); pointer-events: none; }
.ueber-praegung .phalanx__helm { width: 38%; filter: sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(1.05) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ueber-praegung i { font: italic 400 calc(var(--schild) * .15)/1 var(--serif); letter-spacing: .1em; color: var(--bernstein-licht); text-shadow: 0 1px 1px rgba(0, 0, 0, .7); }
.ueber-tipp { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; font: italic 400 21px/1.2 var(--serif); color: var(--hell-leise); }
.ueber-tipp::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 0 rgba(244, 165, 58, .5); animation: ueber-puls 2.2s ease-out infinite; }
@keyframes ueber-puls { 70% { box-shadow: 0 0 0 12px rgba(244, 165, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 165, 58, 0); } }
/* Feld unter der Reihe: wer was in Ihrem Projekt tut */
.ueber-felder { max-width: 1000px; margin: 22px auto 0; }
.ueber-feld { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr) auto; align-items: center; gap: 16px 40px; min-height: 150px; padding: 28px clamp(24px, 3vw, 38px); border-radius: 26px; background: linear-gradient(160deg, rgba(255, 244, 228, .1), rgba(255, 244, 228, .035)); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .13), 0 50px 90px -50px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: auftritt .5s var(--weich) both; }
.ueber-feld::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein) 50%, rgba(244, 165, 58, 0)); }
.ueber-feld[hidden] { display: none; }
.ueber-feld:focus-visible { outline: 2px solid var(--bernstein-licht); outline-offset: 4px; }
.ueber-feld__wer h3 { font: italic 400 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.005em; color: var(--hell); }
.ueber-feld__wer p { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--bernstein-licht); }
.ueber-feld__was p { font-size: 17px; line-height: 1.6; color: #e9dfd2; }
.ueber-team .phalanx__fuss { margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 860px) {
  .ueber-reihe { --schild: 92px; flex-wrap: nowrap; justify-content: center; }
  .ueber-reihe::before { display: block; }
  .ueber-schilde .phalanx__person { flex: 0 0 calc(var(--schild) * 1.3); }
  .ueber-schilde .phalanx__person + .phalanx__person { margin-left: calc(var(--schild) * -.1); }
  .ueber-schilde .phalanx__person--leiter { flex-basis: calc(var(--schild) * 1.3); order: 0; }
  .ueber-frei, .ueber-person .phalanx__rolle { display: none; }
  .ueber-feld { grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; padding: 24px 22px; }
  .ueber-feld .knopf { justify-self: start; }
}
@media (max-width: 560px) {
  .ueber-reihe { --schild: 70px; }
  .ueber-schilde .phalanx__person { flex: 0 0 calc(var(--schild) * 1.2); }
  .ueber-schilde .phalanx__person + .phalanx__person { margin-left: calc(var(--schild) * -.06); }
  .ueber-schilde .phalanx__person--leiter { flex-basis: calc(var(--schild) * 1.2); }
  .ueber-nachname { display: none; }
  .ueber-person .phalanx__name { margin-top: 12px; font-size: 18px; }
  .ueber-praegung i { font-size: 12px; }
  .ueber-tipp { margin-top: 18px; font-size: 18px; }
  .ueber-feld__wer h3 { font-size: 30px; }
  .ueber-feld__was p { font-size: 16px; }
  .ueber-team .phalanx__fuss { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* ---------- 6. Stationen und Belege ---------- */
.ueber-weg__knopf { margin-top: 14px; color: var(--hell); }
.ueber-partner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 48px; margin-top: clamp(48px, 5vw, 72px); padding: 26px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.ueber-partner li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--tinte); }
.ueber-partner img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.ueber-partner__google { height: 32px; width: auto; }
.ueber-partner .ms-ausschnitt, .ueber-partner .meta-ausschnitt { --h: 24px; }
.ueber-partner__sterne .sterne { color: var(--tinte); }
.ueber-partner__sterne .sterne svg { width: 18px; height: 18px; }
.ueber-partner__sterne b { font: italic 400 24px/1 var(--serif); }
.ueber-kunden { margin-top: clamp(72px, 8vw, 120px); }
.ueber-kunden__titel { max-width: 14em; margin-inline: auto; text-align: center; font-size: clamp(30px, 3.4vw, 48px); }
.ueber-kunden__titel em { color: var(--bernstein-text); }
@media (max-width: 560px) {
  .ueber-partner { justify-content: flex-start; gap: 18px 28px; }
  .ueber-partner__google { height: 26px; }
}

/* ---------- 7. Bobby: Weg der Marke mit ganzen Sätzen, Schluss mit Handlung ---------- */
/* Bühne des Bobby-Schaustücks: steht bisher nur in start.css (nicht in grund.css), deshalb hier für diese Seite nachgezogen */
.ueber-bobby .gipfel__buehne { position: relative; isolation: isolate; min-height: clamp(600px, 60vw, 880px); overflow: hidden; }
.ueber-bobby .gipfel__buehne picture, .ueber-bobby .gipfel__buehne picture img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.ueber-bobby .gipfel__buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 16, 13, .92) 0%, rgba(20, 16, 13, .66) 36%, rgba(20, 16, 13, 0) 64%), linear-gradient(0deg, var(--espresso) 0%, rgba(28, 23, 19, .6) 22%, rgba(28, 23, 19, 0) 48%); }
.ueber-bobby .gipfel__kopf h2 { max-width: 12em; }
.ueber-bobby .gipfel__kopf p { max-width: 30em; }
@media (max-width: 760px) {
  .ueber-bobby .gipfel__buehne { display: flex; flex-direction: column; min-height: 0; }
  .ueber-bobby .gipfel__buehne picture { position: relative; display: block; z-index: 0; order: 2; aspect-ratio: 16 / 10; }
  .ueber-bobby .gipfel__buehne picture img { position: absolute; z-index: 0; }
  .ueber-bobby .gipfel__buehne::before { z-index: 1; background: linear-gradient(180deg, var(--espresso) 0%, rgba(28, 23, 19, 0) 58%, rgba(28, 23, 19, 0) 70%, var(--espresso) 100%); top: auto; height: calc(100vw * 10 / 16); }
}
.ueber-bobby__weg { margin-top: clamp(64px, 7vw, 104px); }
.ueber-bobby__titel { max-width: 22em; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.015em; }
.ueber-bobby__titel em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.ueber-marke { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; margin-top: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--linie-dunkel); }
.ueber-marke li { --i: 0; display: flex; flex-direction: column; gap: 8px; min-height: calc(150px + var(--i) * 34px); padding: 18px 18px 22px; border-top: 2px solid rgba(247, 187, 99, calc(.25 + var(--i) * .18)); border-left: 1px solid var(--linie-dunkel); background: linear-gradient(180deg, rgba(246, 239, 230, calc(.025 + var(--i) * .018)), rgba(246, 239, 230, 0)); }
.ueber-marke b { font: italic 400 clamp(25px, 2.1vw, 30px)/1.05 var(--serif); color: var(--hell); }
.ueber-marke span { font-size: 15px; line-height: 1.45; color: var(--hell-leise); }
.ueber-marke li:last-child { box-shadow: inset 0 2px 0 var(--bernstein), 0 -20px 60px -30px rgba(244, 165, 58, .4); }
.bewegt .ueber-marke.ist-da li { animation: auftritt .8s var(--weich) calc(var(--i) * .12s) both; }
.ueber-bobby__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; margin-top: clamp(36px, 4vw, 56px); padding: 28px clamp(24px, 3vw, 40px); border-radius: 26px; background: radial-gradient(60% 160% at 100% 50%, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 70%), rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12); }
.ueber-bobby__fuss p { flex: 1 1 360px; max-width: 30em; font: 600 clamp(21px, 1.9vw, 27px)/1.25 var(--grotesk); letter-spacing: -.012em; }
.ueber-bobby__fuss em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
@media (max-width: 960px) {
  .ueber-marke { grid-template-columns: minmax(0, 1fr); border-bottom: 0; border-left: 1px solid var(--linie-dunkel); }
  .ueber-marke li { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 4px 18px; min-height: 0; margin-left: calc(var(--i) * 10px); padding: 18px 16px; border-left: 0; }
}
@media (max-width: 560px) {
  .ueber-marke li { grid-template-columns: minmax(0, 1fr); margin-left: calc(var(--i) * 6px); }
  .ueber-bobby__fuss { padding: 22px 20px; }
  .ueber-bobby__fuss .knopf { width: 100%; }
}

/* ---------- 8. Wir wachsen: Bernstein-Band mit dem offenen Platz ---------- */
.ueber-wachsen__band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); border-radius: 32px; background: radial-gradient(70% 140% at 0% 50%, var(--bernstein-licht), rgba(247, 187, 99, 0) 70%), linear-gradient(115deg, var(--bernstein-licht) 0%, var(--bernstein) 100%); color: var(--tinte); box-shadow: 0 50px 100px -60px rgba(138, 79, 0, .7); }
.ueber-wachsen__schild { display: grid; place-items: center; width: clamp(104px, 10vw, 140px); aspect-ratio: 1; border: 2px dashed rgba(31, 26, 22, .55); border-radius: 50%; box-shadow: inset 0 0 0 10px rgba(255, 244, 228, .22); }
.ueber-wachsen__schild span { font: italic 400 clamp(22px, 2vw, 27px)/1 var(--serif); }
.ueber-wachsen__text h2 { font-size: clamp(32px, 3.6vw, 52px); }
.ueber-wachsen__text h2 em { color: var(--espresso); }
.ueber-wachsen__text p { max-width: 36em; margin-top: 12px; font-size: 17.5px; line-height: 1.55; color: #2c241d; }
@media (max-width: 900px) {
  .ueber-wachsen__band { grid-template-columns: auto minmax(0, 1fr); }
  .ueber-wachsen__band .knopf { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .ueber-wachsen__band { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; border-radius: 24px; }
  .ueber-wachsen__schild { width: 88px; }
  .ueber-wachsen__band .knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ueber-tipp::before { animation: none; }
}

/* Kleine, niedrige Handys (360 × 740): Vertrauensleiste bleibt im ersten Bildschirm */
@media (max-width: 400px) and (max-height: 780px) {
  .ueber-einstieg .einstieg__wege { gap: 10px; margin-top: 18px; }
  .ueber-einstieg .einstieg__wege .knopf--gross { min-height: 50px; }
  .ueber-einstieg .einstieg__lead { line-height: 1.45; }
}

/* ==========================================================================
   Zusatz Website-Relaunch (website-relaunch/index.html, Quelle _werkzeug/seiten/28-website-relaunch.html), 17.10.2026
   Nur seitenspezifische Gestaltung, alle Klassen mit Präfix website-relaunch-. Nur Tokens aus :root.
   Achtung: teile/zusatz/website-relaunch.css (alter Rahmen) nutzt website-relaunch-phasen, -phase*, -gesamt*, -tabelle;
   diese Namen hier nicht verwenden.
   Enthält: Live-Szene „Weiterleitungsliste wird abgehakt“, Wegweiser als Zeitstrahl, Schadensbild der sechs Ursachen,
   Checkliste in drei Phasen (je Phase data-zaehlen, gesamt per CSS-Zähler), Weiterleitungsplan zum Antippen,
   Notfallkarte Erste Hilfe, Stufen mit Risikoskala, Preislogik.
   Skripte: keine eigenen, nur data-reiter, data-zaehlen aus ares.js.
   ========================================================================== */

.website-relaunch-wo [hidden], .website-relaunch-tafel [hidden], .website-relaunch-stufen [hidden], .website-relaunch-notfall [hidden] { display: none !important; }

/* ---------- Einstieg: lange Aussage kompakter ---------- */
.website-relaunch-einstieg .einstieg__aussage { font-size: clamp(40px, min(4.5vw, 8svh), 64px); }
.website-relaunch-einstieg .einstieg__aussage em { font-size: 1.12em; line-height: .98; margin-top: 4px; }
@media (min-width: 1100px) and (max-height: 800px) {
  .website-relaunch-einstieg .einstieg__aussage { font-size: clamp(36px, min(4.1vw, 6.8svh), 56px); }
  .website-relaunch-einstieg .einstieg__lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .website-relaunch-einstieg .einstieg__aussage { font-size: clamp(28px, 7.8vw, 36px); }
  .website-relaunch-einstieg .einstieg__aussage em { font-size: 1.06em; }
}

/* ---------- Live-Szene: alte Adresse zu neuer Adresse, Zeile für Zeile geprüft ---------- */
.website-relaunch-sz__liste { display: grid; gap: 6px; }
.website-relaunch-sz__liste li { display: grid; grid-template-columns: minmax(0, 1.15fr) 18px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 36px; padding: 5px 6px 5px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.25; background: rgba(255, 244, 228, .05); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08); }
.website-relaunch-sz__alt { overflow: hidden; color: #b5a796; white-space: nowrap; text-overflow: ellipsis; text-decoration: line-through; text-decoration-color: rgba(181, 167, 150, .5); }
.website-relaunch-sz__neu { overflow: hidden; font-weight: 600; color: var(--hell); white-space: nowrap; text-overflow: ellipsis; }
.website-relaunch-sz__neu small { display: block; font-size: 11px; font-weight: 400; color: #a99b89; }
.website-relaunch-sz__pfeil { position: relative; height: 2px; background: rgba(244, 165, 58, .55); }
.website-relaunch-sz__pfeil::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 2px solid rgba(244, 165, 58, .8); border-right: 2px solid rgba(244, 165, 58, .8); transform: rotate(45deg); }
.website-relaunch-sz__status { justify-self: end; display: grid; place-items: center; min-width: 40px; height: 24px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a130c; background: var(--bernstein); box-shadow: 0 6px 16px -8px rgba(244, 165, 58, .9); }
.website-relaunch-sz__weg .website-relaunch-sz__status { color: var(--hell); background: rgba(246, 239, 230, .16); box-shadow: none; }
.website-relaunch-sz__weg .website-relaunch-sz__neu { font-weight: 400; color: #cdbfae; }
.website-relaunch-sz__haken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.website-relaunch-sz__haken li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--hell); background: rgba(244, 165, 58, .12); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .38); }
.website-relaunch-sz__haken .symbol { width: 14px; height: 14px; color: var(--bernstein-licht); }
.website-relaunch-sz__fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(246, 239, 230, .1); }
.website-relaunch-sz__fuss p { font-size: 13px; color: #cdbfae; white-space: nowrap; }
.website-relaunch-sz__fuss p b { font: italic 400 26px/1 var(--serif); color: var(--bernstein-licht); margin-right: 4px; }
.website-relaunch-sz__kurve { display: grid; justify-items: end; gap: 2px; }
.website-relaunch-sz__kurve svg { width: 140px; height: 34px; overflow: visible; }
.website-relaunch-sz__vorher { fill: none; stroke: rgba(246, 239, 230, .25); stroke-width: 1.2; stroke-dasharray: 4 4; }
.website-relaunch-sz__linie { fill: none; stroke: var(--bernstein-licht); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(244, 165, 58, .5)); }
.website-relaunch-sz__kurve small { font-size: 11px; color: #a99b89; white-space: nowrap; }
.ist-aktiv .website-relaunch-sz__liste li { animation: eingang .6s var(--weich) both, website-relaunch-geprueft .6s ease both; animation-delay: calc(.35s + var(--i) * .45s), calc(.95s + var(--i) * .45s); }
.ist-aktiv .website-relaunch-sz__status { animation: punkt-auf .5s var(--weich) both; animation-delay: calc(.95s + var(--i) * .45s); }
.ist-aktiv .website-relaunch-sz__liste li:not(.website-relaunch-sz__weg) { animation-name: eingang, website-relaunch-geprueft; }
.ist-aktiv .website-relaunch-sz__liste li.website-relaunch-sz__weg { animation-name: eingang, none; }
.website-relaunch-sz__liste li:not(.website-relaunch-sz__weg) { background: linear-gradient(90deg, rgba(244, 165, 58, .13), rgba(244, 165, 58, .03)); }
@keyframes website-relaunch-geprueft { from { background: rgba(255, 244, 228, .05); } }
.ist-aktiv .website-relaunch-sz__haken li { animation: eingang .6s var(--weich) both; animation-delay: calc(3.4s + var(--j) * .4s); }
.ist-aktiv .website-relaunch-sz__fuss { animation: auftritt .7s var(--weich) 4.2s both; }
.ist-aktiv .website-relaunch-sz__linie { animation: linie 2s var(--weich) 4.5s both; }
@media (min-width: 1100px) and (max-height: 800px) {
  .website-relaunch-sz__liste { gap: 5px; }
  .website-relaunch-sz__liste li { min-height: 32px; padding-block: 3px; }
  .website-relaunch-sz__neu small { display: none; }
  .website-relaunch-sz__haken { margin-top: 9px; }
}
@media (max-width: 760px) {
  .website-relaunch-sz__liste { gap: 5px; }
  .website-relaunch-sz__liste li { min-height: 28px; padding: 2px 4px 2px 10px; font-size: 12px; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 38px; }
  .website-relaunch-sz__liste li:nth-child(n+3), .website-relaunch-sz__haken, .website-relaunch-sz__kurve, .website-relaunch-sz__neu small { display: none; }
  .website-relaunch-sz__status { min-width: 34px; height: 20px; font-size: 11px; }
  .website-relaunch-sz__fuss { padding-top: 6px; }
  .website-relaunch-sz__fuss p { font-size: 12px; }
  .website-relaunch-sz__fuss p b { font-size: 19px; }
}

/* ---------- Wegweiser: Stand des Relaunchs als Zeitstrahl, Ergebnis rechts ---------- */
.website-relaunch-wo__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 64px); align-items: start; }
.website-relaunch-wo__frage { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 19px; font-weight: 700; color: var(--tinte); }
.website-relaunch-wo__frage span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font: italic 400 17px/1 var(--serif); color: var(--bernstein-licht); background: var(--espresso); }
.website-relaunch-wo__frage--klein { font-size: 17px; }
.website-relaunch-wo__frage--klein span { width: 32px; height: 32px; font-size: 15px; }
.website-relaunch-wo__wahl { position: relative; display: grid; gap: 6px; padding-left: 4px; }
.website-relaunch-wo__wahl::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: repeating-linear-gradient(180deg, var(--bernstein-tief) 0 6px, transparent 6px 11px); }
.website-relaunch-wo__stand { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 58px; padding: 8px 14px 8px 0; border: 0; border-radius: 16px; background: none; color: var(--leise); font: 600 16.5px/1.3 var(--grotesk); text-align: left; cursor: pointer; transition: background .25s, color .25s, padding .3s var(--weich); }
.website-relaunch-wo__stand i { position: relative; z-index: 1; justify-self: center; width: 18px; height: 18px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 2px var(--bernstein-tief), 0 0 0 5px var(--papier); transition: transform .35s var(--weich), background .25s, box-shadow .25s; }
.website-relaunch-wo__stand--alarm i { box-shadow: inset 0 0 0 2px #962c13, 0 0 0 5px var(--papier); }
.website-relaunch-wo__stand:hover { color: var(--tinte); }
.website-relaunch-wo__stand:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.website-relaunch-wo__stand[aria-selected="true"] { padding-left: 4px; color: var(--tinte); background: linear-gradient(90deg, rgba(244, 165, 58, .18), rgba(244, 165, 58, 0) 90%); }
.website-relaunch-wo__stand[aria-selected="true"] i { background: var(--bernstein); box-shadow: 0 0 0 5px var(--papier), 0 0 0 7px rgba(244, 165, 58, .35); transform: scale(1.15); }
.website-relaunch-wo__stand--alarm[aria-selected="true"] i { background: #962c13; box-shadow: 0 0 0 5px var(--papier), 0 0 0 7px rgba(150, 44, 19, .25); }
.website-relaunch-wo__felder { min-width: 0; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--linie); }
.website-relaunch-wo__feld { animation: auftritt .45s var(--weich) both; }
.website-relaunch-wo__ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; padding: 22px 24px; border-radius: 20px; background: var(--creme); box-shadow: inset 3px 0 0 var(--bernstein); animation: auftritt .45s var(--weich) both; }
.website-relaunch-wo__ergebnis p { flex: 1 1 100%; font-size: 16px; line-height: 1.55; color: var(--leise); }
.website-relaunch-wo__ergebnis p b { display: block; margin-bottom: 4px; font: italic 400 clamp(23px, 2vw, 27px)/1.2 var(--serif); color: var(--tinte); }
.website-relaunch-wo__ergebnis--alarm { margin-top: 0; box-shadow: inset 3px 0 0 #962c13; }
.website-relaunch-wo__feld > .website-relaunch-wo__ergebnis:first-child { margin-top: 0; }
@media (max-width: 960px) {
  .website-relaunch-wo__raster { grid-template-columns: minmax(0, 1fr); }
  .website-relaunch-wo__felder { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) {
  .website-relaunch-wo__ergebnis { padding: 18px; }
  .website-relaunch-wo__ergebnis .knopf { width: 100%; }
  .website-relaunch-wo__stand { font-size: 15.5px; }
}

/* ---------- Schadensbild: sechs Ursachen als editoriales Raster mit Fehlercode ---------- */
.website-relaunch-risse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tinte); counter-reset: website-relaunch-r; }
.website-relaunch-risse li { counter-increment: website-relaunch-r; position: relative; display: grid; align-content: start; gap: 10px; padding: 30px 28px 32px 0; border-bottom: 1px solid var(--linie); }
.website-relaunch-risse li:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--linie); }
.website-relaunch-risse li::before { content: counter(website-relaunch-r, upper-roman); font: italic 400 30px/1 var(--serif); color: var(--bernstein-text); }
.website-relaunch-risse h3 { font-size: clamp(20px, 1.6vw, 23px); }
.website-relaunch-risse p { font-size: 16px; line-height: 1.6; color: var(--leise); }
.website-relaunch-risse__code { position: absolute; right: 22px; top: 30px; padding: 4px 10px; border-radius: 6px; font: 600 12.5px/1.2 ui-monospace, Consolas, monospace; color: #962c13; background: #f7e1da; transform: rotate(3deg); }
.website-relaunch-risse li:not(:nth-child(3n + 1)) .website-relaunch-risse__code { right: 22px; }
.website-relaunch-risse li:nth-child(3n) .website-relaunch-risse__code { right: 0; }
@media (max-width: 960px) {
  .website-relaunch-risse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .website-relaunch-risse li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .website-relaunch-risse li:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--linie); }
  .website-relaunch-risse li .website-relaunch-risse__code, .website-relaunch-risse li:nth-child(3n) .website-relaunch-risse__code { right: 18px; }
}
@media (max-width: 600px) {
  .website-relaunch-risse { grid-template-columns: minmax(0, 1fr); }
  .website-relaunch-risse li, .website-relaunch-risse li:nth-child(2n) { padding: 24px 0; border-left: 0; }
  .website-relaunch-risse li .website-relaunch-risse__code, .website-relaunch-risse li:nth-child(3n) .website-relaunch-risse__code { right: 0; top: 24px; }
}

/* ---------- Fußzeile unter dem Umfang ---------- */
.website-relaunch-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--tinte); }
.website-relaunch-fuss p { font-size: 18px; color: var(--leise); }
.website-relaunch-fuss b { display: block; font: italic 400 clamp(25px, 2.1vw, 30px)/1.15 var(--serif); color: var(--tinte); }
@media (max-width: 560px) { .website-relaunch-fuss .knopf { width: 100%; } }

/* ---------- Checkliste in drei Phasen: drei Karten, die mittlere ist der Tag des Livegangs ---------- */
.website-relaunch-phasen2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; counter-reset: website-relaunch-gesamt2; }
.website-relaunch-karte { display: grid; min-width: 0; padding: 26px 22px 18px; border-radius: 26px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie), 0 40px 80px -60px rgba(60, 40, 20, .5); transition: box-shadow .4s; }
.website-relaunch-karte__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 14px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--tinte); }
.website-relaunch-karte__nr { grid-row: span 3; font: italic 400 46px/.9 var(--serif); color: var(--bernstein-text); }
.website-relaunch-karte h3 { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--leise); }
.website-relaunch-karte h3 em { display: block; margin-top: 2px; font: italic 400 clamp(23px, 1.9vw, 27px)/1.12 var(--serif); color: var(--tinte); }
.website-relaunch-karte__stand { margin-top: 10px; font-size: 14px; color: var(--leise); }
.website-relaunch-karte__stand b { font: italic 400 26px/1 var(--serif); color: var(--bernstein-text); }
.website-relaunch-karte__balken { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: rgba(138, 79, 0, .12); }
.website-relaunch-karte__balken i { display: block; width: calc(var(--anteil, 0) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transition: width .5s var(--weich); }
.website-relaunch-karte label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 3px 13px; padding: 13px 4px 13px 0; border-bottom: 1px solid var(--linie); cursor: pointer; transition: background .25s; }
.website-relaunch-karte label:last-child { border-bottom: 0; }
.website-relaunch-karte input { grid-row: span 2; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; -webkit-appearance: none; appearance: none; box-shadow: inset 0 0 0 1.5px rgba(138, 79, 0, .45); background: transparent center / 14px no-repeat; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.website-relaunch-karte input:checked { background-color: var(--bernstein); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a130c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); box-shadow: none; }
.website-relaunch-karte input:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.website-relaunch-karte label b { font-size: 15.5px; line-height: 1.35; }
.website-relaunch-karte label small { font-size: 14px; line-height: 1.5; color: var(--leise); }
.website-relaunch-karte label:has(input:checked) { counter-increment: website-relaunch-gesamt2; background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 85%); }
.website-relaunch-karte:not(:has(input:not(:checked))) { box-shadow: inset 0 0 0 2px var(--bernstein), 0 40px 80px -50px rgba(244, 165, 58, .55); }
/* Tag des Livegangs: dunkle Karte */
.website-relaunch-karte--tag { color: var(--hell); background: radial-gradient(80% 50% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 50px 100px -50px rgba(40, 25, 10, .8); }
.website-relaunch-karte--tag .website-relaunch-karte__kopf { border-bottom-color: rgba(244, 165, 58, .5); }
.website-relaunch-karte--tag .website-relaunch-karte__nr, .website-relaunch-karte--tag .website-relaunch-karte__stand b { color: var(--bernstein-licht); }
.website-relaunch-karte--tag h3, .website-relaunch-karte--tag .website-relaunch-karte__stand, .website-relaunch-karte--tag label small { color: var(--hell-leise); }
.website-relaunch-karte--tag h3 em { color: var(--hell); }
.website-relaunch-karte--tag .website-relaunch-karte__balken { background: rgba(246, 239, 230, .12); }
.website-relaunch-karte--tag label { border-bottom-color: var(--linie-dunkel); }
.website-relaunch-karte--tag input { box-shadow: inset 0 0 0 1.5px rgba(246, 239, 230, .4); }
.website-relaunch-karte--tag input:focus-visible { outline-color: var(--bernstein); }
.website-relaunch-summe { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 36px; margin-top: 8px; padding: 26px clamp(22px, 3vw, 40px); border-radius: 26px; color: var(--hell); background: radial-gradient(60% 160% at 100% 50%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), var(--espresso); box-shadow: 0 40px 80px -56px rgba(60, 40, 20, .7); }
.website-relaunch-summe__zahl { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.website-relaunch-summe__wert::after { content: counter(website-relaunch-gesamt2); font: italic 400 64px/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; }
.website-relaunch-summe__zahl small { font-size: 15px; color: var(--hell-leise); }
.website-relaunch-summe__text { font-size: 16.5px; line-height: 1.55; color: #e1d5c5; }
.website-relaunch-quelle { margin-top: 14px; font-size: 13.5px; color: var(--leise); }
@media (max-width: 1120px) {
  .website-relaunch-phasen2 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .website-relaunch-summe { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 560px) {
  .website-relaunch-karte { padding: 22px 16px 12px; border-radius: 22px; }
  .website-relaunch-summe { padding: 22px 20px; border-radius: 22px; }
  .website-relaunch-summe .knopf { width: 100%; }
}

/* ---------- Weiterleitungsplan: Blatt mit Zeilen zum Antippen ---------- */
.website-relaunch-plan { overflow-x: clip; }
.website-relaunch-plan__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(36px, 6vw, 96px); align-items: center; }
.website-relaunch-plan__text h2 { max-width: 11em; }
.website-relaunch-plan__text > p { max-width: 32em; margin-top: 16px; font-size: 17.5px; line-height: 1.65; color: var(--leise); }
.website-relaunch-plan__text strong { color: var(--tinte); }
.website-relaunch-plan__text .website-relaunch-plan__quelle { padding-top: 14px; border-top: 1px solid var(--linie); font-size: 14px; }
.website-relaunch-tafel { position: relative; padding: clamp(22px, 2.6vw, 34px); border-radius: 8px; background: #fffdf9; box-shadow: 0 1px 0 var(--linie), 0 70px 120px -60px rgba(60, 40, 20, .7); transform: rotate(-.6deg); }
.website-relaunch-tafel::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, rgba(244, 165, 58, 0), var(--bernstein), rgba(244, 165, 58, 0)); }
.website-relaunch-tafel__titel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.website-relaunch-tafel__titel b { font: italic 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); }
.website-relaunch-tafel__titel span { font-size: 13px; color: var(--leise); }
.website-relaunch-tafel__spalten, .website-relaunch-zeile { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 54px; align-items: center; gap: 12px; }
.website-relaunch-tafel__spalten { margin-top: 14px; padding: 0 10px 8px; border-bottom: 1.5px solid var(--tinte); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--leise); }
.website-relaunch-tafel__spalten span:last-child { text-align: right; }
.website-relaunch-zeile { width: 100%; min-height: 48px; padding: 8px 10px; border: 0; border-bottom: 1px dashed #d8ccbb; background: none; color: var(--tinte); font: 400 14.5px/1.3 ui-monospace, Consolas, monospace; text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s; }
.website-relaunch-zeile span { overflow-wrap: anywhere; }
.website-relaunch-zeile span:first-child { color: var(--leise); }
.website-relaunch-zeile b { justify-self: end; display: grid; place-items: center; min-width: 46px; height: 26px; border-radius: 999px; font: 700 12.5px/1 var(--grotesk); color: #1a130c; background: var(--bernstein-licht); }
.website-relaunch-zeile--weg b { color: var(--tinte); background: var(--sand); }
.website-relaunch-zeile--nie span { text-decoration: line-through; text-decoration-color: rgba(150, 44, 19, .6); }
.website-relaunch-zeile--nie b { color: #962c13; background: #f7e1da; }
.website-relaunch-zeile:hover { background: linear-gradient(90deg, rgba(244, 165, 58, .08), rgba(244, 165, 58, 0) 80%); }
.website-relaunch-zeile:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 1px; }
.website-relaunch-zeile[aria-selected="true"] { background: linear-gradient(90deg, rgba(244, 165, 58, .18), rgba(244, 165, 58, .04)); box-shadow: inset 3px 0 0 var(--bernstein-tief); }
.website-relaunch-tafel__warum { display: grid; gap: 6px; margin-top: 18px; padding: 20px 22px; border-radius: 18px; color: var(--hell); background: var(--espresso); animation: auftritt .4s var(--weich) both; }
.website-relaunch-tafel__warum b { font: italic 400 23px/1.2 var(--serif); color: var(--bernstein-licht); }
.website-relaunch-tafel__warum p { font-size: 15.5px; line-height: 1.55; color: #e1d5c5; }
.website-relaunch-tafel__warum--nie b { color: #f7c2b2; }
@media (max-width: 960px) { .website-relaunch-plan__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .website-relaunch-tafel { padding: 20px 14px; transform: none; }
  .website-relaunch-tafel__spalten, .website-relaunch-zeile { grid-template-columns: minmax(0, 1fr) 46px; gap: 4px 10px; }
  .website-relaunch-tafel__spalten span:nth-child(2) { display: none; }
  .website-relaunch-zeile { font-size: 13px; }
  .website-relaunch-zeile span:first-child { grid-column: 1; }
  .website-relaunch-zeile span:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--tinte); font-weight: 600; }
  .website-relaunch-zeile span:nth-child(2)::before { content: "zu "; font-weight: 400; color: var(--leise); }
  .website-relaunch-zeile b { grid-column: 2; grid-row: 1 / span 2; min-width: 42px; }
}

/* ---------- Erste Hilfe: Notfallkarte auf dunklem Band ---------- */
.website-relaunch-hilfe { overflow-x: clip; background: radial-gradient(50% 70% at 90% 30%, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 70%), var(--espresso); }
.website-relaunch-hilfe__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(36px, 6vw, 96px); align-items: center; }
.website-relaunch-hilfe__text h2 { max-width: 11em; }
.website-relaunch-hilfe__text p { max-width: 32em; margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--hell-leise); }
.website-relaunch-hilfe__text strong { color: var(--hell); }
.website-relaunch-notfall { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 38px); border-radius: 26px; color: var(--tinte); background: var(--papier); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9); }
.website-relaunch-notfall::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(135deg, var(--bernstein) 0 14px, var(--espresso) 14px 28px); }
.website-relaunch-notfall__kopf { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--tinte); }
.website-relaunch-notfall__kopf b { font: 600 clamp(24px, 2.1vw, 30px)/1.15 var(--grotesk); letter-spacing: -.015em; }
.website-relaunch-notfall__kopf em { font-family: var(--serif); font-weight: 400; color: var(--bernstein-text); }
.website-relaunch-notfall__kopf span { font-size: 14.5px; color: var(--leise); }
.website-relaunch-notfall__schritte { min-width: 0; margin: 0; padding: 0; border: 0; }
.website-relaunch-notfall__schritte label { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 16px; line-height: 1.45; cursor: pointer; transition: background .25s, color .25s; }
.website-relaunch-notfall__schritte input { position: absolute; opacity: 0; pointer-events: none; }
.website-relaunch-notfall__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: italic 400 22px/1 var(--serif); color: var(--bernstein-licht); background: var(--espresso); transition: background .25s, color .25s, transform .35s var(--weich); }
.website-relaunch-notfall__schritte label:hover .website-relaunch-notfall__nr { transform: translateY(-2px); }
.website-relaunch-notfall__schritte label:has(input:focus-visible) { outline: 2px solid var(--bernstein-tief); outline-offset: 2px; }
.website-relaunch-notfall__schritte label:has(input:checked) { color: var(--leise); background: linear-gradient(90deg, rgba(244, 165, 58, .12), rgba(244, 165, 58, 0) 85%); }
.website-relaunch-notfall__schritte label:has(input:checked) .website-relaunch-notfall__nr { font-size: 0; color: #1a130c; background: var(--bernstein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a130c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.website-relaunch-notfall__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; }
.website-relaunch-notfall__fuss p { font-size: 15px; color: var(--leise); }
.website-relaunch-notfall__fuss p b { font: italic 400 36px/1 var(--serif); color: var(--bernstein-text); margin-right: 4px; }
@media (max-width: 960px) { .website-relaunch-hilfe__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .website-relaunch-notfall { padding: 26px 18px 20px; border-radius: 22px; }
  .website-relaunch-notfall__schritte label { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; font-size: 15.5px; }
  .website-relaunch-notfall__nr { width: 36px; height: 36px; }
  .website-relaunch-notfall__fuss .knopf { width: 100%; }
}

/* ---------- Brauchen Sie wirklich einen Relaunch? Stufen als Treppe, Risikoskala ---------- */
.website-relaunch-stufen__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.website-relaunch-stufen__knopf { position: relative; display: grid; align-content: end; justify-items: start; gap: 10px; min-height: calc(84px + var(--h) * 34px); padding: 18px 20px; border: 0; border-radius: 20px 20px 6px 6px; background: linear-gradient(180deg, #f1e9dc 0%, #e4d8c6 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(120, 90, 50, .14), 0 16px 28px -20px rgba(60, 40, 20, .55); color: var(--tinte); font: 600 16.5px/1.3 var(--grotesk); text-align: left; cursor: pointer; transition: transform .35s var(--weich), background .3s, color .3s, box-shadow .3s; }
.website-relaunch-stufen__stufe { font: italic 400 34px/1 var(--serif); color: var(--bernstein-text); }
.website-relaunch-stufen__knopf:hover { transform: translateY(-3px); }
.website-relaunch-stufen__knopf:focus-visible { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.website-relaunch-stufen__knopf[aria-selected="true"] { color: var(--hell); background: linear-gradient(180deg, #2e261f 0%, #1a1511 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--bernstein), 0 22px 44px -20px rgba(244, 165, 58, .55); }
.website-relaunch-stufen__knopf[aria-selected="true"] .website-relaunch-stufen__stufe { color: var(--bernstein-licht); }
.website-relaunch-stufen__feld { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; margin-top: 16px; padding: clamp(26px, 3.2vw, 44px); border-radius: 28px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); animation: auftritt .45s var(--weich) both; }
.website-relaunch-stufen__feld h3 { font: italic 400 clamp(28px, 2.6vw, 38px)/1.08 var(--serif); }
.website-relaunch-stufen__feld p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--leise); }
.website-relaunch-stufen__daten { display: grid; gap: 0; border-top: 1px solid var(--tinte); }
.website-relaunch-stufen__daten > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.website-relaunch-stufen__daten dt { font: italic 400 20px/1.3 var(--serif); color: var(--bernstein-text); }
.website-relaunch-stufen__daten dd { font-size: 16px; font-weight: 600; line-height: 1.45; }
.website-relaunch-stufen__skala { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 26px; font-size: 13px; color: var(--leise); }
.website-relaunch-stufen__skala::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #dcefe1, var(--bernstein-licht) 50%, #e7a48f); }
.website-relaunch-stufen__skala i { position: absolute; top: -2px; left: calc(var(--risiko) * 100%); width: 24px; height: 24px; border-radius: 50%; background: var(--espresso); box-shadow: 0 0 0 4px var(--creme), 0 6px 14px -4px rgba(0, 0, 0, .5); transform: translateX(-50%); animation: website-relaunch-zeiger .9s var(--weich) both; }
@keyframes website-relaunch-zeiger { from { left: 0; } }
.website-relaunch-stufen__skala span:nth-of-type(2) { text-align: center; }
.website-relaunch-stufen__skala span:nth-of-type(3) { text-align: right; }
.website-relaunch-stufen__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 16.5px; color: var(--leise); }
@media (max-width: 860px) {
  .website-relaunch-stufen__feld { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .website-relaunch-stufen__wahl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .website-relaunch-stufen__knopf { min-height: 0; grid-template-columns: 34px minmax(0, 1fr); align-items: center; padding: 14px 16px; border-radius: 16px; width: calc(78% + var(--h) * 7.3%); font-size: 15.5px; }
  .website-relaunch-stufen__stufe { font-size: 26px; }
  .website-relaunch-stufen__feld { padding: 24px 18px; border-radius: 22px; }
  .website-relaunch-stufen__daten > div { grid-template-columns: 90px minmax(0, 1fr); }
  .website-relaunch-stufen__fuss .knopf { width: 100%; }
}

/* ---------- Preislogik (ohne Preise) ---------- */
.website-relaunch-preis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 140px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linie); }
.website-relaunch-preis__text h2 { font-size: clamp(32px, 3.6vw, 50px); }
.website-relaunch-preis__text > p { max-width: 32em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--leise); }
.website-relaunch-preis__weg { margin-top: 28px; border-top: 1px solid var(--tinte); counter-reset: website-relaunch-pw; }
.website-relaunch-preis__weg li { counter-increment: website-relaunch-pw; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.website-relaunch-preis__weg li::before { content: counter(website-relaunch-pw, upper-roman); grid-row: span 2; font: italic 400 27px/1.1 var(--serif); color: var(--bernstein-text); }
.website-relaunch-preis__weg b { font-size: 18px; }
.website-relaunch-preis__weg span { font-size: 16px; line-height: 1.5; color: var(--leise); }
.website-relaunch-preis__faktoren { position: relative; overflow: hidden; padding: clamp(28px, 3.2vw, 46px); border-radius: 28px; color: var(--hell); background: radial-gradient(80% 60% at 100% 0%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .08), 0 60px 120px -60px rgba(40, 25, 10, .8); }
.website-relaunch-preis__titel { padding-bottom: 18px; border-bottom: 1px solid rgba(244, 165, 58, .5); font: italic 400 clamp(28px, 2.4vw, 36px)/1.1 var(--serif); }
.website-relaunch-preis__titel em { color: var(--bernstein-licht); }
.website-relaunch-preis__faktoren li { position: relative; display: grid; gap: 4px; padding: 18px 0 18px 24px; border-bottom: 1px solid var(--linie-dunkel); }
.website-relaunch-preis__faktoren li:last-child { border-bottom: 0; padding-bottom: 0; }
.website-relaunch-preis__faktoren li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 8px; height: 8px; background: var(--bernstein); transform: rotate(45deg); }
.website-relaunch-preis__faktoren b { font-size: 18px; color: var(--hell); }
.website-relaunch-preis__faktoren span { font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
@media (max-width: 960px) { .website-relaunch-preis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .website-relaunch-preis__faktoren { border-radius: 22px; padding: 24px 20px; } }

/* ==========================================================================
   Zusatz Wissen (wissen/, wissen/seo-kosten/, wissen/geo-optimierung/, wissen/ki-anzeigen/), 17.10.2026
   Quellen _werkzeug/seiten/60 bis 63. Nur seitenspezifische Gestaltung, alle Klassen mit Präfix wissen-
   (neue Namen, die alten wissen-* Klassen aus teile/zusatz/wissen.css werden nicht mehr verwendet). Nur Tokens aus :root.
   Enthält: Kopf mit typografischem Titelbild (Kopfbilder fehlen noch), Ratgeber-Regal und Regeln (Übersicht),
   Zahlenkästen, Preismodelle als Reiter, Arbeitszeit-Rechner (nur CSS), Warnliste, Assistenten-Schaubild,
   SEO gegen GEO als Umschalter, Hebel-Selbsttest mit „nächstem Hebel“, Plattform-Ampel, Zeitleiste,
   Budgetkästen, Branchen-Prüfer, Abwägung, Handlungskarte mit Analyse-Formular.
   Skripte: keine eigenen. data-reiter, data-zaehlen, data-inhalt aus ares.js, sonst :has().
   ========================================================================== */

/* ---------- Listen in eigenen Bausteinen ohne Artikel-Aufzählungszeichen ---------- */
.artikel__text [class*="wissen-"] li { padding-left: 0; }
.artikel__text [class*="wissen-"] li::before { content: none; }
.artikel__text [class*="wissen-"] a:not(.knopf) { font-weight: 600; }
.artikel__text .knopf { text-decoration: none; }

/* ---------- Kopf mit Titelbild ---------- */
.wissen-kopf .einstieg__inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "text bild"; align-items: center; column-gap: clamp(32px, 5vw, 88px); }
.wissen-kopf .einstieg__aussage { font-size: clamp(38px, 4.4vw, 62px); }
.wissen-kopf .einstieg__lead { max-width: 34em; }
.wissen-titelbild { grid-area: bild; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 400px; margin: 0; padding: 34px 32px 50px; overflow: hidden; border-radius: 30px; color: var(--hell);
  background: radial-gradient(70% 60% at 70% 8%, rgba(255, 214, 160, .2), rgba(255, 214, 160, 0) 70%), radial-gradient(80% 70% at 10% 100%, rgba(244, 165, 58, .16), rgba(244, 165, 58, 0) 70%), linear-gradient(165deg, #2a211a, #15110e 70%);
  box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1), 0 60px 110px -60px rgba(60, 40, 20, .9); }
.wissen-titelbild::before { content: ""; position: absolute; z-index: -1; top: -20%; left: 46%; width: 40%; height: 90%; rotate: 12deg; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 226, 182, .16), rgba(255, 214, 160, 0) 78%); }
.wissen-titelbild__hinweis { position: absolute; left: 32px; right: 32px; bottom: 18px; font-size: 12.5px; letter-spacing: .02em; color: #b5a796; }
.wissen-titelbild--foto { padding: 0; justify-content: flex-end; }
.wissen-titelbild--foto img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.wissen-titelbild--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(21, 17, 14, .92) 0%, rgba(21, 17, 14, .2) 55%, rgba(21, 17, 14, 0) 80%); }
.wissen-titelbild--foto figcaption { padding: 0 30px 28px; }
.wissen-titelbild--foto figcaption b { display: block; font: italic 400 30px/1.1 var(--serif); color: var(--hell); }
.wissen-titelbild--foto figcaption span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--hell-leise); }

/* Titelbild Kosten: die Rechnung als Typografie */
.wissen-rechnung { display: grid; gap: 4px; }
.wissen-rechnung__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 15px; color: var(--hell-leise); }
.wissen-rechnung__zeile b { font: italic 400 38px/1 var(--serif); color: var(--hell); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wissen-rechnung__zeile--teil b::before { content: "÷ "; color: var(--bernstein-licht); }
.wissen-rechnung__zeile--ziel { border-bottom: 0; padding-top: 18px; border-top: 1.5px solid var(--bernstein); }
.wissen-rechnung__zeile--ziel b { font-size: 58px; color: var(--bernstein-licht); text-shadow: 0 0 40px rgba(244, 165, 58, .3); }
.wissen-rechnung__frage { margin-bottom: 10px; font: italic 400 24px/1.2 var(--serif); color: var(--hell); }

/* Titelbild GEO: Frage und Antwort einer KI-Suche */
.wissen-ki { display: grid; gap: 14px; }
.wissen-ki__frage { justify-self: end; max-width: 86%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: rgba(246, 239, 230, .1); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .14); font-size: 15px; line-height: 1.4; }
.wissen-ki__antwort { padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: #fbf6ee; color: var(--tinte); font-size: 15px; line-height: 1.5; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); }
.wissen-ki__antwort mark { padding: 1px 6px; border-radius: 6px; background: rgba(244, 165, 58, .35); color: var(--tinte); font-weight: 700; }
.wissen-ki__quellen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wissen-ki__quellen span { padding: 3px 9px; border-radius: 999px; background: var(--creme); font-size: 12px; color: var(--leise); }
.wissen-ki__quellen span:first-child { background: #fff1da; color: var(--bernstein-text); font-weight: 700; }
.wissen-ki__eingabe { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .18); font-size: 13.5px; color: #b5a796; }
.wissen-ki__eingabe::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 12px var(--bernstein); }
.bewegt .wissen-ki > * { animation: auftritt .9s var(--weich) both; }
.bewegt .wissen-ki > :nth-child(2) { animation-delay: .7s; }
.bewegt .wissen-ki > :nth-child(3) { animation-delay: 1.2s; }

/* Titelbild KI-Anzeigen: Stand-Siegel und Ampel */
.wissen-siegel { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein-licht), inset 0 0 0 7px rgba(21, 17, 14, 0), inset 0 0 0 8px rgba(247, 187, 99, .45); text-align: center; color: var(--bernstein-licht); rotate: 10deg; }
.wissen-siegel b { display: block; font: italic 400 22px/1 var(--serif); }
.wissen-siegel span { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wissen-mini-ampel { display: grid; gap: 8px; margin-top: 112px; }
.wissen-mini-ampel li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(246, 239, 230, .06); font-size: 15px; }
.wissen-mini-ampel i { width: 12px; height: 12px; border-radius: 50%; }
.wissen-mini-ampel small { font-size: 12.5px; color: #b5a796; }
.wissen-punkt--gruen { background: #4bb174; box-shadow: 0 0 12px rgba(75, 177, 116, .6); }
.wissen-punkt--gelb { background: var(--bernstein); box-shadow: 0 0 12px rgba(244, 165, 58, .6); }
.wissen-punkt--grau { background: #7d7266; }
@media (max-width: 1099px) {
  .wissen-kopf .einstieg__inhalt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild"; }
  .wissen-titelbild { width: min(100%, 560px); min-height: 0; margin-top: 34px; }
  .wissen-titelbild--foto { min-height: 300px; }
}
@media (max-width: 560px) {
  .wissen-titelbild { padding: 26px 20px 46px; border-radius: 24px; }
  .wissen-titelbild__hinweis { left: 20px; }
  .wissen-rechnung__zeile b { font-size: 30px; }
  .wissen-rechnung__zeile--ziel b { font-size: 44px; }
  .wissen-siegel { width: 92px; height: 92px; top: 14px; right: 14px; }
  .wissen-siegel b { font-size: 17px; }
  .wissen-mini-ampel { margin-top: 96px; }
}

/* ---------- Übersicht: Regal der Ratgeber ---------- */
.wissen-regal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.wissen-band { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 28px; background: var(--papier); color: var(--tinte); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linie), 0 40px 80px -60px rgba(60, 40, 20, .6); transition: transform .4s var(--weich), box-shadow .3s; }
.wissen-band:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--bernstein-tief), 0 50px 90px -56px rgba(60, 40, 20, .7); }
.wissen-band:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto; }
.wissen-band__bild { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 26px 28px; color: var(--hell); background: radial-gradient(70% 70% at 80% 0%, rgba(255, 214, 160, .2), rgba(255, 214, 160, 0) 70%), linear-gradient(160deg, #2a211a, #15110e 75%); }
.wissen-band:first-child .wissen-band__bild { min-height: 100%; }
.wissen-band__zeichen { font: italic 400 clamp(64px, 7vw, 104px)/.9 var(--serif); color: var(--bernstein-licht); letter-spacing: -.02em; }
.wissen-band__thema { margin-top: 10px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--hell-leise); }
.wissen-band__text { display: flex; flex-direction: column; padding: 28px 30px 30px; }
.wissen-band__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--leise); }
.wissen-band__meta span + span { padding-left: 18px; border-left: 1px solid var(--linie); }
.wissen-band__titel { margin-top: 12px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.015em; }
.wissen-band__titel em { color: var(--bernstein-text); }
.wissen-band__fragen { display: grid; gap: 8px; margin: 18px 0 24px; padding-top: 16px; border-top: 1px solid var(--linie); counter-reset: wf; }
.wissen-band__fragen li { counter-increment: wf; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; font-size: 15.5px; line-height: 1.45; color: var(--leise); }
.wissen-band__fragen li::before { content: counter(wf, upper-roman); font: italic 400 16px/1.4 var(--serif); color: var(--bernstein-text); }
.wissen-band__los { align-self: flex-start; margin-top: auto; }
.wissen-band:hover .wissen-band__los { background: #3a3028; }
@media (max-width: 860px) {
  .wissen-regal { grid-template-columns: minmax(0, 1fr); }
  .wissen-band:first-child { grid-template-columns: minmax(0, 1fr); }
  .wissen-band__bild { min-height: 150px; padding: 20px 22px; }
  .wissen-band__text { padding: 22px; }
}

/* Übersicht: So schreiben wir, vier Regeln als Siegelzeile */
.wissen-regeln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--bernstein); counter-reset: wr; }
.wissen-regeln li { counter-increment: wr; padding: 24px 24px 0 0; }
.wissen-regeln li + li { padding-left: 24px; border-left: 1px solid var(--linie-dunkel); }
.wissen-regeln li::before { content: counter(wr, upper-roman); display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bernstein); font: italic 400 19px/1 var(--serif); color: var(--bernstein-licht); }
.wissen-regeln b { display: block; font: italic 400 clamp(23px, 2vw, 28px)/1.12 var(--serif); color: var(--hell); }
.wissen-regeln span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--hell-leise); }
.wissen-person { display: flex; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--linie-dunkel); color: var(--hell-leise); font-size: 15.5px; }
.wissen-person img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 239, 230, .2); }
.wissen-person b { color: var(--hell); }
@media (max-width: 960px) {
  .wissen-regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .wissen-regeln li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .wissen-regeln { grid-template-columns: minmax(0, 1fr); }
  .wissen-regeln li, .wissen-regeln li + li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--linie-dunkel); }
  .wissen-regeln li::before { grid-row: span 2; margin: 0; }
}

/* ---------- Handlungskarte am Ende (dunkel, mit Analyse-Formular) ---------- */
.wissen-handlung { position: relative; overflow: hidden; margin-top: 2.4em; padding: clamp(26px, 3.4vw, 42px); border-radius: 28px; color: var(--hell); background: radial-gradient(70% 90% at 100% 0%, rgba(244, 165, 58, .2), rgba(244, 165, 58, 0) 70%), linear-gradient(160deg, #29211b, #17130f 80%); box-shadow: 0 50px 100px -60px rgba(60, 40, 20, .9); }
.wissen-handlung__titel { font: 600 clamp(26px, 2.6vw, 34px)/1.12 var(--grotesk); letter-spacing: -.015em; color: var(--hell); }
.wissen-handlung__titel em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-licht); }
.wissen-handlung > p:not(.wissen-handlung__titel) { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--hell-leise); }
.wissen-handlung .start { margin-top: 22px; }
.wissen-handlung__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie-dunkel); font-size: 15px; color: var(--hell-leise); }
.wissen-handlung__weiter .knopf--hell { color: var(--hell); }
.wissen-handlung--hell-abstand { margin-top: 0; }
.artikel__text .wissen-handlung .start__fuss { white-space: normal; }

/* ---------- Zahlenkästen (Studienwerte) ---------- */
.wissen-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wissen-zahlen figure { display: flex; flex-direction: column; margin: 0; padding: 22px 22px 18px; border-radius: 22px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.wissen-zahlen b { font: italic 400 clamp(30px, 3vw, 40px)/1.02 var(--serif); color: var(--tinte); letter-spacing: -.01em; }
.wissen-zahlen b small { display: block; margin-top: 4px; font: 600 13px/1.3 var(--grotesk); letter-spacing: .02em; color: var(--bernstein-text); }
.wissen-zahlen span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--leise); }
.wissen-zahlen figcaption { margin-top: auto; padding-top: 12px; font-size: 12.5px; line-height: 1.4; color: var(--leise); }
.wissen-zahlen figure.wissen-zahlen__dunkel { background: var(--espresso); box-shadow: none; }
.wissen-zahlen__dunkel b { color: var(--bernstein-licht); }
.wissen-zahlen__dunkel span { color: var(--hell-leise); }
.wissen-zahlen__dunkel figcaption { color: #a99b89; }
@media (max-width: 560px) { .wissen-zahlen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reiter allgemein (Preismodelle, Assistenten, SEO gegen GEO, Plattformen) ---------- */
.wissen-reiter__wahl { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 22px; background: var(--sand); box-shadow: inset 0 0 0 1px var(--linie); }
.wissen-reiter__wahl button { flex: 1 1 auto; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 17px; background: none; color: var(--leise); font: 600 15px/1.2 var(--grotesk); cursor: pointer; transition: background .25s, color .25s; }
.wissen-reiter__wahl button:hover { color: var(--tinte); }
.wissen-reiter__wahl button[aria-selected="true"] { background: var(--tinte); color: var(--hell); }
.wissen-reiter__feld { margin-top: 14px; padding: 24px 26px; border-radius: 24px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie), 0 30px 60px -50px rgba(60, 40, 20, .5); animation: auftritt .5s var(--weich) both; }
.wissen-reiter__feld h3 { margin: 0; font-size: 23px; line-height: 1.2; }
.wissen-reiter__feld h3 em { color: var(--bernstein-text); }
.wissen-reiter__feld > p { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--leise); }
.wissen-merkmale { display: grid; margin-top: 16px; border-top: 1px solid var(--tinte); }
.wissen-merkmale > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.6fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.wissen-merkmale dt { font-size: 14px; font-weight: 700; color: var(--bernstein-text); }
.wissen-merkmale dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tinte); }
.wissen-urteil { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.wissen-urteil::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.wissen-urteil--gut { background: #dcefe1; color: #1c6537; }
.wissen-urteil--mittel { background: #f9ecc9; color: #6f4400; }
.wissen-urteil--schlecht { background: #f7e1da; color: #962c13; }
@media (max-width: 560px) {
  .wissen-reiter__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wissen-reiter__feld { padding: 20px 18px; }
  .wissen-merkmale > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Arbeitszeit-Rechner (nur CSS) ---------- */
.wissen-zeit { padding: clamp(22px, 3vw, 34px); border-radius: 28px; color: var(--hell); background: linear-gradient(165deg, #29211b 0%, #17130f 100%); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .1), 0 50px 100px -60px rgba(0, 0, 0, .9); }
.wissen-zeit__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(244, 165, 58, .5); }
.wissen-zeit__kopf p:first-child { font: italic 400 clamp(25px, 2.3vw, 30px)/1.1 var(--serif); color: var(--hell); }
.wissen-zeit__kopf p:last-child { font-size: 13.5px; font-weight: 600; color: var(--bernstein-licht); }
.wissen-zeit fieldset { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.wissen-zeit legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 14.5px; font-weight: 600; color: var(--hell-leise); }
.wissen-zeit__wahl { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wissen-zeit__wahl label { position: relative; }
.wissen-zeit__wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wissen-zeit__wahl span { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 8px 12px; border-radius: 16px; background: rgba(246, 239, 230, .06); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .16); text-align: center; font: italic 400 24px/1.05 var(--serif); color: var(--hell); transition: background .25s, box-shadow .25s; }
.wissen-zeit__wahl span small { margin-top: 3px; font: 600 11.5px/1.25 var(--grotesk); color: #b5a796; }
.wissen-zeit__wahl label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.wissen-zeit__wahl input:checked + span { background: var(--bernstein); color: #1a130c; box-shadow: none; }
.wissen-zeit__wahl input:checked + span small { color: #3d2a12; }
.wissen-zeit__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-licht); outline-offset: 3px; }
.wissen-zeit__ergebnis { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 26px; margin-top: 22px; padding: 20px 22px; border-radius: 20px; background: rgba(255, 244, 228, .06); box-shadow: inset 0 0 0 1px rgba(244, 165, 58, .3); }
.wissen-zeit__std { font: italic 400 clamp(48px, 5vw, 68px)/1 var(--serif); color: var(--bernstein-licht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wissen-zeit__std small { font-size: .4em; color: var(--hell-leise); }
.wissen-zeit__std > span, .wissen-zeit__was > span { display: none; }
.wissen-zeit__was { font-size: 16px; line-height: 1.5; color: var(--hell); }
.wissen-zeit__was b { display: block; margin-bottom: 2px; font-size: 13px; color: var(--bernstein-licht); }
.wissen-zeit__notiz { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: #b5a796; }
/* Ergebnis je Kombination: Betrag (300, 1000, 2500) und Satz (90, 103, 120) */
.wissen-zeit:has([name="zeit-betrag"][value="300"]:checked):has([name="zeit-satz"][value="90"]:checked) [data-w="300-90"],
.wissen-zeit:has([name="zeit-betrag"][value="300"]:checked):has([name="zeit-satz"][value="103"]:checked) [data-w="300-103"],
.wissen-zeit:has([name="zeit-betrag"][value="300"]:checked):has([name="zeit-satz"][value="120"]:checked) [data-w="300-120"],
.wissen-zeit:has([name="zeit-betrag"][value="1000"]:checked):has([name="zeit-satz"][value="90"]:checked) [data-w="1000-90"],
.wissen-zeit:has([name="zeit-betrag"][value="1000"]:checked):has([name="zeit-satz"][value="103"]:checked) [data-w="1000-103"],
.wissen-zeit:has([name="zeit-betrag"][value="1000"]:checked):has([name="zeit-satz"][value="120"]:checked) [data-w="1000-120"],
.wissen-zeit:has([name="zeit-betrag"][value="2500"]:checked):has([name="zeit-satz"][value="90"]:checked) [data-w="2500-90"],
.wissen-zeit:has([name="zeit-betrag"][value="2500"]:checked):has([name="zeit-satz"][value="103"]:checked) [data-w="2500-103"],
.wissen-zeit:has([name="zeit-betrag"][value="2500"]:checked):has([name="zeit-satz"][value="120"]:checked) [data-w="2500-120"],
.wissen-zeit:has([name="zeit-betrag"][value="300"]:checked) [data-b="300"],
.wissen-zeit:has([name="zeit-betrag"][value="1000"]:checked) [data-b="1000"],
.wissen-zeit:has([name="zeit-betrag"][value="2500"]:checked) [data-b="2500"] { display: inline; }
.wissen-zeit__was > span[data-b] { display: none; }
.wissen-zeit:has([name="zeit-betrag"][value="300"]:checked) .wissen-zeit__was > [data-b="300"],
.wissen-zeit:has([name="zeit-betrag"][value="1000"]:checked) .wissen-zeit__was > [data-b="1000"],
.wissen-zeit:has([name="zeit-betrag"][value="2500"]:checked) .wissen-zeit__was > [data-b="2500"] { display: block; }
@media (max-width: 560px) {
  .wissen-zeit__wahl span { font-size: 20px; min-height: 54px; padding-inline: 6px; }
  .wissen-zeit__ergebnis { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Warnliste (Ampel-Zeilen statt Kacheln) ---------- */
.wissen-warnliste { border-top: 1px solid var(--tinte); counter-reset: ww; }
.wissen-warnliste li { counter-increment: ww; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "nr titel quelle" "nr text text"; gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.artikel__text .wissen-warnliste li::before { content: counter(ww, decimal-leading-zero); grid-area: nr; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f7e1da; font: 700 13px/1 var(--grotesk); color: #962c13; }
.wissen-warnliste b { grid-area: titel; font-size: 17.5px; line-height: 1.35; color: var(--tinte); }
.wissen-warnliste p { grid-area: text; margin: 0; font-size: 16px; line-height: 1.55; color: var(--leise); }
.wissen-warnliste small { grid-area: quelle; align-self: start; padding: 3px 10px; border-radius: 999px; background: var(--creme); font-size: 12px; font-weight: 700; color: var(--leise); white-space: nowrap; }
.wissen-warnliste small.wissen-laut-google { background: #fff1da; color: var(--bernstein-text); }
@media (max-width: 560px) {
  .wissen-warnliste li { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "nr titel" "nr quelle" "nr text"; }
  .wissen-warnliste small { justify-self: start; margin: 4px 0; }
}

/* ---------- Assistenten-Schaubild (GEO) ---------- */
.wissen-assistent__weg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.wissen-assistent__weg > div { position: relative; padding: 16px 16px 14px; border-radius: 18px; background: var(--creme); }
.wissen-assistent__weg > div + div::before { content: ""; position: absolute; left: -9px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--bernstein-tief); border-right: 1.5px solid var(--bernstein-tief); transform: translateY(-50%) rotate(45deg); }
.wissen-assistent__weg b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--bernstein-text); }
.wissen-assistent__weg span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--tinte); }
@media (max-width: 640px) {
  .wissen-assistent__weg { grid-template-columns: minmax(0, 1fr); }
  .wissen-assistent__weg > div + div::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }
}

/* ---------- SEO gegen GEO als Umschalter ---------- */
.wissen-gegen { display: grid; margin-top: 14px; border-top: 1px solid var(--tinte); }
.wissen-gegen li { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr); gap: 4px 22px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.wissen-gegen b { font-size: 14.5px; font-weight: 700; color: var(--bernstein-text); }
.wissen-gegen span { font-size: 16.5px; line-height: 1.5; color: var(--tinte); }
.wissen-gegen--geo li { background: linear-gradient(90deg, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 70%); }
@media (max-width: 560px) { .wissen-gegen li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hebel-Selbsttest (GEO): Zähler und der nächste offene Hebel ---------- */
.wissen-hebel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.wissen-hebel__liste { border-top: 1px solid var(--tinte); counter-reset: wh; }
.wissen-hebel__liste li { counter-increment: wh; position: relative; border-bottom: 1px solid var(--linie); transition: background .25s; }
.wissen-hebel__liste label { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; padding: 12px 10px 12px 0; cursor: pointer; }
.wissen-hebel__liste input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bernstein-tief); cursor: pointer; }
.wissen-hebel__liste b { font-size: 16px; line-height: 1.35; }
.wissen-hebel__liste b::before { content: counter(wh) ". "; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bernstein-text); }
.wissen-hebel__liste small { grid-column: 2; font-size: 14.5px; line-height: 1.45; color: var(--leise); }
.wissen-hebel__liste li:has(input:checked) { background: linear-gradient(90deg, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 80%); }
.wissen-hebel__liste li:has(input:checked) b { color: var(--leise); text-decoration: line-through; text-decoration-color: rgba(138, 79, 0, .5); }
/* Der erste noch offene Hebel ist der nächste */
.wissen-hebel__liste li:has(input:not(:checked)):not(li:has(input:not(:checked)) ~ li) { background: #fff4e0; box-shadow: inset 3px 0 0 var(--bernstein); }
.wissen-hebel__liste li:has(input:not(:checked)):not(li:has(input:not(:checked)) ~ li) label { padding-left: 12px; }
.wissen-hebel__liste li:has(input:not(:checked)):not(li:has(input:not(:checked)) ~ li) small::after { content: " Ihr nächster Hebel."; font-weight: 700; color: var(--bernstein-text); }
.wissen-hebel__stand { position: sticky; top: calc(var(--kopf-h) + 24px); padding: 22px; border-radius: 22px; background: var(--espresso); color: var(--hell); }
.wissen-hebel__zahl { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--hell-leise); }
.wissen-hebel__zahl b { font: italic 400 58px/1 var(--serif); color: var(--bernstein-licht); }
.wissen-hebel__balken { height: 6px; margin: 14px 0 16px; overflow: hidden; border-radius: 6px; background: rgba(246, 239, 230, .12); }
.wissen-hebel__balken i { display: block; height: 100%; width: calc(var(--anteil, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); transition: width .6s var(--weich); }
.wissen-hebel__stand p { font-size: 15px; line-height: 1.5; color: #e1d5c5; }
.wissen-hebel__stand p b { color: var(--hell); }
.wissen-hebel__stand [hidden] { display: none; }
@media (max-width: 760px) { .wissen-hebel { grid-template-columns: minmax(0, 1fr); } .wissen-hebel__stand { position: static; } }

/* ---------- Frage-Antwort-Karte (llms.txt) und Messquellen ---------- */
.wissen-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 22px; align-items: center; padding: 22px 24px; border-radius: 22px; background: var(--espresso); color: var(--hell); }
.wissen-karte__frage { font-size: 14px; font-weight: 600; color: var(--hell-leise); }
.wissen-karte__antwort { grid-column: 1; font: italic 400 46px/1 var(--serif); color: var(--bernstein-licht); }
.wissen-karte p:last-child { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; line-height: 1.55; color: #e1d5c5; }
@media (max-width: 560px) { .wissen-karte { grid-template-columns: minmax(0, 1fr); } .wissen-karte p:last-child { grid-column: 1; grid-row: auto; } }
.wissen-messung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--tinte); counter-reset: wm; }
.wissen-messung li { counter-increment: wm; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--linie); }
.wissen-messung li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linie); }
.wissen-messung b { display: flex; align-items: baseline; gap: 10px; font-size: 17px; line-height: 1.3; color: var(--tinte); }
.wissen-messung b::before { content: counter(wm, upper-roman); font: italic 400 20px/1 var(--serif); color: var(--bernstein-text); }
.wissen-messung span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--leise); }
@media (max-width: 640px) { .wissen-messung { grid-template-columns: minmax(0, 1fr); } .wissen-messung li:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ---------- KI-Anzeigen: Plattform-Ampel, Zeitleiste, Budget, Branchen-Prüfer, Abwägung ---------- */
.wissen-plattform__wahl button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wissen-plattform__wahl button i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.wissen-plattform__status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.wissen-plattform__status--gruen { background: #dcefe1; color: #1c6537; }
.wissen-plattform__status--gelb { background: #f9ecc9; color: #6f4400; }
.wissen-plattform__status--grau { background: var(--sand); color: var(--leise); }
.wissen-ampel-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13.5px; color: var(--leise); }
.wissen-ampel-legende span { display: inline-flex; align-items: center; gap: 8px; }
.wissen-ampel-legende i { width: 10px; height: 10px; border-radius: 50%; }

.wissen-zeitleiste { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 30px; }
.wissen-zeitleiste::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein) 70%, rgba(244, 165, 58, .2)); }
.wissen-zeitleiste li { position: relative; padding-right: 16px; }
.artikel__text .wissen-zeitleiste li::before { content: ""; position: absolute; left: 0; top: -30px; width: 16px; height: 16px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 2px var(--bernstein-tief); }
.artikel__text .wissen-zeitleiste li:last-child::before { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(244, 165, 58, .25); }
.wissen-zeitleiste time { display: block; font: italic 400 22px/1.1 var(--serif); color: var(--bernstein-text); }
.wissen-zeitleiste span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--tinte); }
@media (max-width: 640px) {
  .wissen-zeitleiste { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 0 0 30px; }
  .wissen-zeitleiste::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--bernstein-tief), rgba(244, 165, 58, .2)); }
  .artikel__text .wissen-zeitleiste li::before { left: -30px; top: 2px; }
}

.wissen-budget { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; }
.wissen-budget > div { display: flex; flex-direction: column; padding: 20px; border-radius: 20px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.wissen-budget > div:first-child { background: var(--espresso); color: var(--hell); box-shadow: none; }
.wissen-budget b { font: italic 400 clamp(32px, 3.2vw, 44px)/1 var(--serif); color: var(--tinte); }
.wissen-budget > div:first-child b { color: var(--bernstein-licht); }
.wissen-budget span { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--leise); }
.wissen-budget > div:first-child span { color: var(--hell-leise); }
.wissen-budget small { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--leise); }
.wissen-budget > div:first-child small { color: #a99b89; }
@media (max-width: 640px) { .wissen-budget { grid-template-columns: minmax(0, 1fr); } }

.wissen-branche { padding: clamp(20px, 3vw, 30px); border-radius: 26px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.wissen-branche fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.wissen-branche legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; font: italic 400 25px/1.15 var(--serif); color: var(--tinte); }
.wissen-branche__wahl { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.wissen-branche__wahl label { position: relative; }
.wissen-branche__wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wissen-branche__wahl span { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font-size: 15px; font-weight: 600; transition: background .25s, color .25s; }
.wissen-branche__wahl label:hover span { box-shadow: inset 0 0 0 1.5px var(--bernstein-tief); }
.wissen-branche__wahl input:checked + span { background: var(--tinte); color: var(--hell); box-shadow: none; }
.wissen-branche__wahl input:focus-visible + span { outline: 2px solid var(--bernstein-tief); outline-offset: 3px; }
.wissen-branche__ergebnis { margin-top: 18px; }
.wissen-branche__ergebnis > div { display: none; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 18px 20px; border-radius: 18px; background: var(--papier); animation: auftritt .5s var(--weich) both; }
.wissen-branche__ergebnis > div > b:first-child { grid-row: span 2; padding: 5px 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.wissen-branche__ergebnis p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--leise); }
.wissen-branche__ergebnis p b { color: var(--tinte); }
.wissen-branche__ergebnis .wissen-branche__ja > b:first-child { background: #dcefe1; color: #1c6537; }
.wissen-branche__ergebnis .wissen-branche__nein > b:first-child { background: #f7e1da; color: #962c13; }
.wissen-branche__offen { font-size: 15px; color: var(--leise); }
.wissen-branche:has(input:checked) .wissen-branche__offen { display: none; }
.wissen-branche:has([value="handel"]:checked) [data-ergebnis="handel"],
.wissen-branche:has([value="dienst"]:checked) [data-ergebnis="dienst"],
.wissen-branche:has([value="bildung"]:checked) [data-ergebnis="bildung"],
.wissen-branche:has([value="recht"]:checked) [data-ergebnis="recht"],
.wissen-branche:has([value="gesundheit"]:checked) [data-ergebnis="gesundheit"],
.wissen-branche:has([value="finanzen"]:checked) [data-ergebnis="finanzen"] { display: grid; }
@media (max-width: 560px) { .wissen-branche__ergebnis > div { grid-template-columns: minmax(0, 1fr); } .wissen-branche__ergebnis > div > b:first-child { justify-self: start; } }

.wissen-abwaegung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wissen-abwaegung > div { padding: 22px 24px; border-radius: 22px; background: var(--creme); }
.wissen-abwaegung > div:last-child { background: var(--espresso); color: var(--hell); }
.wissen-abwaegung h3 { margin: 0 0 10px; font: italic 400 26px/1.1 var(--serif); color: var(--bernstein-text); }
.wissen-abwaegung > div:last-child h3 { color: var(--bernstein-licht); }
.wissen-abwaegung ul { display: grid; gap: 10px; }
.artikel__text .wissen-abwaegung li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.artikel__text .wissen-abwaegung li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 1.5px; background: var(--bernstein-tief); }
.wissen-abwaegung > div:last-child li { color: #e1d5c5; }
@media (max-width: 640px) { .wissen-abwaegung { grid-template-columns: minmax(0, 1fr); } }

/* Quellenzeile unter einem Abschnitt */
.wissen-beleg { display: block; font-size: 13.5px; line-height: 1.5; color: var(--leise); }
.wissen-beleg::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 8px; vertical-align: middle; background: var(--bernstein-tief); }

/* Prüfliste im Artikel etwas schmaler */
@media (min-width: 901px) { .artikel__text .pruefliste { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; } .artikel__text .pruefliste__stand { padding: 22px; } .artikel__text .pruefliste__zahl b { font-size: 54px; } }

/* Zähler eigener Listen im Artikel: .artikel__text ol setzt sonst seinen eigenen Zähler (an) durch */
.artikel__text .wissen-warnliste { counter-reset: ww; }
.artikel__text .wissen-warnliste > li { counter-increment: ww; }
.artikel__text .wissen-hebel__liste { counter-reset: wh; }
.artikel__text .wissen-hebel__liste > li { counter-increment: wh; }
.artikel__text .wissen-messung { counter-reset: wm; }
.artikel__text .wissen-messung > li { counter-increment: wm; }
.artikel__text .wissen-preis .preislogik__weg { counter-reset: pl; }
.artikel__text .wissen-preis .preislogik__weg > li { counter-increment: pl; padding-left: 0; }
.artikel__text .wissen-preis .preislogik__weg > li::before { content: counter(pl, upper-roman); position: static; grid-row: span 2; font: italic 400 28px/1.1 var(--serif); color: var(--bernstein-text); }
.artikel__text .wissen-preis .preislogik__faktoren li { padding-left: 0; }
.artikel__text .wissen-preis .preislogik__faktoren li::before { content: none; }
.artikel__text .wissen-preis .preislogik { grid-template-columns: minmax(0, 1fr); }
.artikel__text .wissen-zeitleiste > li { counter-increment: none; }
.wissen-zahlen__dunkel b small { color: var(--bernstein-licht); }