/* Gemeinsame Basis der Richtungen: Schrift lokal, Reset, Hilfsklassen */
@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"); }
@font-face { font-family: "Titillium Web"; font-weight: 900; font-display: swap; src: url("../fonts/titillium-web-900.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Titillium Web", system-ui, sans-serif; line-height: 1.55; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.entwurf-hinweis { position: fixed; right: 12px; bottom: 12px; z-index: 50; padding: 4px 10px; font-size: 12px; background: #000; color: #fff; }

/* Wechselndes Wort: gleitet in Pfeilrichtung nach oben */
.wechsel { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.1em; }
.wechsel__spur { display: grid; animation: wechsel 10s cubic-bezier(.7,0,.2,1) infinite; }
.wechsel__spur span { height: 1.1em; line-height: 1.1em; white-space: nowrap; }
@keyframes wechsel {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-1.1em); }
  50%, 70%  { transform: translateY(-2.2em); }
  75%, 95%  { transform: translateY(-3.3em); }
  100%      { transform: translateY(-4.4em); }
}
@media (prefers-reduced-motion: reduce) {
  .wechsel__spur { animation: none; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ===== ARES Gestaltungssystem v2 (03.10.2026) =====
   Grundsätze: begrenzter Inhaltsrahmen, Helm und Pfeil als Markenmotiv, Symbole, lesbare Belege, Führung statt Kästen. */
:root {
  --grund: #f3f2ee;
  --papier: #ffffff;
  --text: #0e0e0e;
  --leise: #555452;
  --linie: #e1dfd9;
  --orange: #f7a41b;
  --orange-hell: #fff1d6;
  --orange-text: #8a5200;
  --nacht: #141414;
  --gruen: #1f8a44;
  --rahmen: 1240px;
  --seite: clamp(20px, 4vw, 40px);
  --rund: 22px;
  --schatten: 0 30px 60px -36px rgba(30, 20, 0, .35), 0 8px 20px -14px rgba(30, 20, 0, .18);
}
body { background: var(--grund); color: var(--text); font-size: 17px; }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 90; padding: 8px 12px; background: #000; color: #fff; }
.sprung:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.rahmen { width: 100%; max-width: calc(var(--rahmen) + 2 * var(--seite)); margin: 0 auto; padding: 0 var(--seite); }
.symbol { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entwurf-hinweis { position: fixed; right: 10px; bottom: 10px; z-index: 50; padding: 4px 10px; background: #000; color: #fff; font-size: 12px; }

/* Typografie */
.titel-xl { font-size: clamp(42px, 5.4vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -.022em; }
.titel-l { font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; }
.titel-m { font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.2; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--leise); }
.abschnitt { padding: clamp(72px, 9vw, 120px) 0 0; }
.abschnitt__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 36px; }
.abschnitt__kopf .lead { max-width: 34em; }
/* Pfeil aus dem Logo als Markierung vor Abschnittstiteln */
.mit-pfeil::before { content: ""; display: block; width: 44px; height: 14px; margin-bottom: 18px; background: url("../img/pfeil.svg") left center / contain no-repeat; }

/* Knöpfe: etwa 48 px, halbfett, Pfeil im Kreis */
.knopf { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 10px 0 24px; border: 0; border-radius: 999px; font: inherit; font-size: 16.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.knopf::after { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .25s; }
.knopf:hover::after { transform: rotate(45deg); }
.knopf--dunkel { background: var(--text); color: #fff; box-shadow: 0 14px 26px -14px rgba(247,164,27,.9); }
.knopf--dunkel:hover { transform: translateY(-2px); }
.knopf--hell { background: var(--papier); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); padding-right: 24px; }
.knopf--hell::after { display: none; }
.knopf--hell:hover { background: var(--orange-hell); }
.knopf--orange { background: var(--orange); color: var(--text); }
.knopf--orange::after { background-color: var(--text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23f7a41b' stroke-width='2.2'/%3E%3C/svg%3E"); }
.textlink { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(243,242,238,.88); backdrop-filter: blur(14px); transition: box-shadow .2s; }
.kopf.gescrollt { box-shadow: 0 1px 0 var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: 22px; height: 76px; }
.kopf__logo img { width: 128px; height: auto; }
.menue { flex: 1; }
.menue__liste { display: flex; justify-content: center; gap: 2px; }
.menue__knopf, .menue__link { display: flex; align-items: center; padding: 9px 13px; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.menue__knopf::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.menue__knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.menue__knopf:hover, .menue__link:hover, .menue__knopf[aria-expanded="true"] { background: var(--papier); }
.kopf__aktion { display: flex; align-items: center; gap: 10px; }
.kopf__telefon { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopf__telefon .symbol { width: 20px; height: 20px; color: var(--orange-text); }
.kopf__handy { display: none; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--text); border-radius: 999px; background: none; font: inherit; font-weight: 700; }

/* Mega-Menü */
.mega { display: none; position: absolute; left: 50%; top: calc(100% + 4px); width: min(1180px, calc(100vw - 32px)); transform: translateX(-50%); padding: 28px; border-radius: 26px; background: var(--papier); box-shadow: 0 40px 90px -40px rgba(0,0,0,.4), 0 0 0 1px var(--linie); }
.menue__punkt.offen .mega { display: grid; grid-template-columns: repeat(3, 1fr) 300px; gap: 6px 24px; animation: rein .22s both; }
.menue__punkt.offen .mega--schmal { grid-template-columns: 1fr 1fr 300px; width: min(900px, calc(100vw - 32px)); }
@keyframes rein { from { opacity: 0; transform: translate(-50%, 8px); } }
.mega__kopf { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--linie); }
.mega__kopf p { font-size: 28px; font-weight: 300; line-height: 1.1; }
.mega__kopf .wechsel { font-weight: 700; color: var(--text); }
.mega__spalte { display: grid; align-content: start; gap: 4px; }
.mega__titel { margin: 6px 0 4px 12px; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.mega__eintrag { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; color: var(--text); text-decoration: none; }
.mega__eintrag:hover { background: var(--grund); }
.mega__eintrag .symbol-feld { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); }
.mega__eintrag b { font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.mega__eintrag span:last-child { font-size: 13.5px; color: var(--leise); }
.marke { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.marke--neu { background: var(--orange); color: var(--text); }
.marke--partner { background: var(--grund); color: var(--leise); }
.marke--partner img { height: 14px; width: auto; margin-right: 4px; }
.mega__seite { display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: 20px; background: var(--nacht); color: #fff; }
.mega__seite .person { display: flex; align-items: center; gap: 12px; }
.mega__seite p { color: #d6d2c8; font-size: 15px; }
.mega__seite strong { color: #fff; font-size: 18px; line-height: 1.25; }

/* Platzhalter für Personenfoto: gestaltet, damit es auch leer gut aussieht */
.portrait { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 30%, #ffd78f, var(--orange)); display: grid; place-items: center; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__helm { width: 62%; height: auto; }
.portrait--gross { width: 112px; height: 112px; }

/* Handy-Menü */
.handy-menue { position: fixed; inset: 0; z-index: 70; display: none; overflow-y: auto; padding: 18px var(--seite) 40px; background: var(--grund); }
.handy-menue.offen { display: block; }
.handy-menue__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.handy-menue details { border-bottom: 1px solid var(--linie); }
.handy-menue summary, .handy-menue nav > a { display: block; padding: 16px 0; color: var(--text); font-size: 21px; font-weight: 700; text-decoration: none; cursor: pointer; }
.handy-menue details a { display: flex; gap: 10px; align-items: center; padding: 9px 0 9px 6px; color: var(--text); text-decoration: none; }
.handy-menue .knopf { margin-top: 24px; }

/* Brotkrumen */
.krumen { padding-top: 10px; font-size: 14px; color: var(--leise); }
.krumen ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.krumen li + li::before { content: "/"; margin-right: 8px; color: #b3afa6; }
.krumen a { color: var(--leise); }

/* ===== Startseite: Einstieg ===== */
.einstieg { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); overflow-x: clip; isolation: isolate; }
.einstieg::before { content: ""; position: absolute; z-index: -1; right: -8vw; top: -16vw; width: 64vw; max-width: 980px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,164,27,.34), rgba(247,164,27,.08) 60%, transparent 72%); }
.einstieg__raster { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 4vw, 64px); align-items: center; }
.bewertung-pille { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); font-size: 14.5px; color: var(--text); text-decoration: none; }
.bewertung-pille img { height: 22px; width: auto; }
.bewertung-pille b { font-size: 15px; }
.einstieg h1 { margin-top: 20px; }
.einstieg h1 .wechsel { color: var(--orange-text); }
.einstieg .lead { max-width: 33em; margin-top: 22px; }
.einstieg__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.zusagen { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 15px; color: var(--leise); }
.zusagen li { display: flex; align-items: center; gap: 8px; }
.zusagen .symbol { width: 20px; height: 20px; color: var(--gruen); }

/* Befund-Vorschau rechts */
.befund { position: relative; padding: 26px; border-radius: 28px; background: var(--papier); box-shadow: var(--schatten); }
.befund__helm { position: absolute; right: -40px; top: -70px; width: 220px; opacity: .07; pointer-events: none; }
.befund__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.befund__kopf b { font-size: 18px; }
.befund__kopf span { font-size: 13px; color: var(--leise); }
.befund__suche { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 12px 16px; border-radius: 14px; background: var(--grund); font-size: 15px; color: var(--leise); }
.befund__zeilen { display: grid; gap: 2px; margin-top: 8px; }
.befund__zeile { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--linie); }
.befund__zeile:last-child { border-bottom: 0; }
.befund__quelle { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grund); font-weight: 700; font-size: 14px; }
.befund__zeile b { display: block; font-size: 15.5px; }
.befund__zeile small { color: var(--leise); font-size: 13.5px; }
.ampel { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ampel--rot { background: #fde4dd; color: #a3300c; }
.ampel--gelb { background: #fff0cf; color: #7a4f00; }
.ampel--gruen { background: #def3e4; color: #186b35; }
.befund__fuss { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.befund__fuss p { font-size: 14.5px; color: var(--leise); line-height: 1.4; }
.befund__fuss b { color: var(--text); }
.befund__marke { position: absolute; left: 26px; top: -14px; padding: 5px 12px; border-radius: 999px; background: var(--text); color: #fff; font-size: 12.5px; font-weight: 700; }

/* Belege: lesbar, mit Beschriftung */
.belege-leiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.beleg { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.beleg img { height: 52px; width: auto; flex: none; }
.beleg b { display: block; font-size: 15px; line-height: 1.25; }
.beleg span { font-size: 13.5px; color: var(--leise); }

/* ===== Ziel-Funnel ===== */
.ziele__wahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ziel-knopf { display: grid; justify-items: start; gap: 12px; padding: 20px; border: 0; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); font: inherit; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.ziel-knopf:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.ziel-knopf .symbol-feld { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--grund); }
.ziel-knopf b { font-size: 17.5px; line-height: 1.2; }
.ziel-knopf span { font-size: 14px; color: var(--leise); }
.ziel-knopf[aria-selected="true"] { background: var(--nacht); color: #fff; box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.ziel-knopf[aria-selected="true"] span { color: #cfcabf; }
.ziel-knopf[aria-selected="true"] .symbol-feld { background: var(--orange); color: var(--text); }
.ziel-tafel { display: grid; grid-template-columns: 1fr 1.1fr .95fr; margin-top: 14px; border-radius: 26px; background: var(--papier); box-shadow: var(--schatten); overflow: hidden; min-height: 330px; }
.ziel-tafel > div { padding: clamp(24px, 2.6vw, 36px); }
.ziel-tafel > div + div { border-left: 1px solid var(--linie); }
.ziel-tafel__marke { font-size: 13px; font-weight: 700; color: var(--orange-text); margin-bottom: 12px; }
.ziel-tafel blockquote { margin: 0; font-size: clamp(22px, 2vw, 27px); font-weight: 300; line-height: 1.3; }
.ziel-tafel blockquote + p { margin-top: 16px; color: var(--leise); }
.schritte { display: grid; gap: 14px; counter-reset: s; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.schritte li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); font-weight: 700; }
.schritte b { display: block; }
.schritte span { color: var(--leise); font-size: 15.5px; }
.ziel-tafel__aktion { display: grid; align-content: space-between; gap: 18px; background: linear-gradient(160deg, #fff 30%, var(--orange-hell)); }
.ziel-tafel__aktion .titel-m { margin-top: 6px; }
.ziel-tafel__aktion p { color: var(--leise); font-size: 15.5px; }

/* ===== Warum ARES ===== */
.warum { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.warum__zitat { position: relative; padding: clamp(28px, 3vw, 44px); border-radius: 28px; background: var(--nacht); color: #fff; overflow: hidden; isolation: isolate; }
.warum__zitat::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 300px; height: 320px; background: url("../img/helm-logo.svg") center / contain no-repeat; opacity: .07; filter: invert(1); }
.warum__zitat blockquote { margin: 0; font-size: clamp(25px, 2.5vw, 34px); font-weight: 300; line-height: 1.28; }
.warum__zitat .person { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.warum__zitat .person p { color: #cfcabf; font-size: 15px; }
.warum__zitat .person b { color: #fff; }
.vorteile { display: grid; gap: 14px; }
.vorteil { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.vorteil .symbol-feld { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); }
.vorteil .symbol { width: 26px; height: 26px; }
.vorteil b { font-size: 19px; }
.vorteil p { margin-top: 4px; color: var(--leise); font-size: 15.5px; }

/* ===== Stimmen ===== */
.stimmen__wert { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); text-decoration: none; color: var(--text); }
.stimmen__wert img { height: 26px; width: auto; }
.stimmen__wert b { font-size: 26px; }
.stimmen__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stimme { display: grid; align-content: space-between; gap: 18px; margin: 0; padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.stimme blockquote { margin: 0; font-size: 18px; line-height: 1.5; }
.stimme blockquote::before { content: "★★★★★"; display: block; margin-bottom: 12px; color: #f4b400; letter-spacing: 2px; font-size: 16px; }
.stimme figcaption { display: flex; align-items: center; gap: 12px; }
.stimme__kuerzel { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); font-weight: 700; }
.stimme figcaption b { display: block; font-size: 15px; }
.stimme figcaption span { font-size: 13.5px; color: var(--leise); }

/* ===== Beweis Bobby ===== */
.bobby { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: linear-gradient(135deg, #e9f6f7 0%, #fff 55%, var(--orange-hell) 100%); overflow: hidden; }
.bobby__bild { position: relative; display: flex; align-items: end; justify-content: center; gap: 4%; min-height: 360px; }
.bobby__lama { width: 46%; height: auto; }
.bobby__button { width: 38%; height: auto; transform: rotate(4deg); }
.bobby__fakten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.bobby__fakten li { padding: 10px 16px; border-radius: 14px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.bobby__fakten b { display: block; font-size: 22px; line-height: 1.1; }
.bobby__fakten span { font-size: 13.5px; color: var(--leise); }

/* ===== Kunden ===== */
.kunden { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.kunden li { display: grid; place-items: center; height: 84px; padding: 10px; }
.kunden img { max-height: 46px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.kunden img:hover { filter: none; opacity: 1; }

/* ===== Wissen ===== */
.wissen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wissen a { display: grid; align-content: start; gap: 10px; min-height: 200px; padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.wissen a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.wissen .marke { justify-self: start; background: var(--orange-hell); color: var(--orange-text); }
.wissen b { font-size: 21px; line-height: 1.25; }
.wissen span:last-child { color: var(--leise); font-size: 15.5px; }

/* ===== Abschluss ===== */
.schluss { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: radial-gradient(80% 140% at 0% 100%, rgba(247,164,27,.28), transparent 60%), var(--papier); box-shadow: var(--schatten); }
.schluss .portrait--gross { width: clamp(120px, 14vw, 180px); height: clamp(120px, 14vw, 180px); box-shadow: 0 0 0 8px var(--papier), 0 0 0 9px var(--linie); }
.schluss .lead { max-width: 36em; margin-top: 12px; }
.termine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.termine button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--text); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.termine button:hover { background: var(--orange); color: var(--text); }
.schluss__wege { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; }
.schluss__wege a { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 18px; text-decoration: none; }
.schluss__wege .symbol { color: var(--orange-text); }

/* ===== Fußbereich mit Orten ===== */
.fuss { margin-top: clamp(80px, 9vw, 120px); padding: 56px 0 28px; background: var(--papier); border-top: 1px solid var(--linie); }
.fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.fuss__marke img { width: 150px; height: auto; }
.fuss__marke p { margin-top: 14px; color: var(--leise); font-size: 15px; }
.fuss nav { display: grid; align-content: start; gap: 9px; }
.fuss nav b, .fuss__orte b { margin-bottom: 4px; }
.fuss a { color: var(--text); text-decoration: none; font-size: 15px; }
.fuss a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.fuss__orte { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie); }
.fuss__orte ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.fuss__orte li { font-size: 14.5px; }
.fuss__orte .geplant { color: var(--leise); }
.fuss__partner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.fuss__partner img { height: 54px; width: auto; }
.fuss__unten { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--leise); }
.fuss__unten button { border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; }

/* ===== Cookie-Hinweis mit Bürohund Cookie ===== */
.keks { position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(420px, calc(100vw - 32px)); padding: 22px; border-radius: 24px; background: var(--papier); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45), 0 0 0 1px var(--linie); animation: keks-rein .5s cubic-bezier(.2,.8,.2,1) 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 { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--orange-hell); display: grid; place-items: center; overflow: hidden; }
.keks__hund svg { width: 40px; height: 40px; color: var(--orange-text); }
.keks__hund img { width: 100%; height: 100%; object-fit: cover; }
.keks__kopf b { font-size: 18px; line-height: 1.2; }
.keks__kopf p { font-size: 14px; color: var(--leise); }
.keks__text { margin-top: 14px; font-size: 14.5px; color: var(--leise); line-height: 1.5; }
.keks__text a { color: var(--text); }
.keks__wahl { display: grid; gap: 8px; margin-top: 14px; }
.keks__wahl label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--grund); font-size: 14.5px; }
.keks__wahl small { display: block; color: var(--leise); font-size: 12.5px; }
.schalter { position: relative; flex: none; width: 44px; height: 26px; appearance: none; border-radius: 999px; background: #cfccc4; 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(--gruen); }
.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: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.keks__nur { border: 1.5px solid var(--text); background: var(--papier); color: var(--text); }
.keks__alle { border: 1.5px solid var(--text); background: var(--text); color: #fff; }
.keks__einst { grid-column: 1 / -1; border: 0; background: none; color: var(--leise); text-decoration: underline; min-height: 32px !important; }

/* ===== Mobil ===== */
@media (max-width: 1120px) {
  .menue, .kopf__telefon { display: none; }
  .kopf__handy { display: block; }
  .kopf__innen { justify-content: space-between; }
  .einstieg__raster, .warum, .bobby { grid-template-columns: 1fr; }
  .belege-leiste { grid-template-columns: 1fr 1fr; }
  .ziele__wahl { grid-template-columns: repeat(3, 1fr); }
  .ziel-tafel { grid-template-columns: 1fr; }
  .ziel-tafel > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .stimmen__raster, .wissen { grid-template-columns: 1fr; }
  .kunden { grid-template-columns: repeat(3, 1fr); }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kopf__aktion .knopf { display: none; }
  .ziele__wahl { grid-template-columns: 1fr 1fr; }
  .belege-leiste { grid-template-columns: 1fr; }
  .schluss { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; }
  .bobby__bild { min-height: 260px; }
  .keks { left: 8px; bottom: 8px; width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* Korrekturen 03.10.2026 */
.knopf { white-space: nowrap; }
.keks__wahl[hidden], .funnel__schritt[hidden], [hidden] { display: none !important; }

/* Keine schweren schwarzen Flächen (Vorgabe Artur): Zitat warm und hell */
.warum__zitat { background: linear-gradient(150deg, #fff 20%, var(--orange-hell) 100%); color: var(--text); box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.warum__zitat::after { filter: none; opacity: .08; }
.warum__zitat .person p { color: var(--leise); }
.warum__zitat .person b { color: var(--text); }
.warum__zitat blockquote { font-weight: 400; }

.bobby__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .bobby__fakten { grid-template-columns: 1fr; } }

/* Zeilenumbrüche seitenweit (Artur, 06.10.2026): ausgewogene Überschriften,
   keine einzelnen Wörter in der letzten Zeile, keine Silbentrennung in Überschriften */
h1, h2, h3, .titel-xl, .titel-l, .titel-m, blockquote, .kategorie, .knopf, .mega__eintrag b { text-wrap: balance; hyphens: manual; }
p, li, dd, figcaption, .lead { text-wrap: pretty; }
.titel-xl, .titel-l { overflow-wrap: normal; word-break: normal; }

/* Warum ARES, Fassung 2 (06.10.2026): große Kacheln statt Liste mit Symbolen */
.warum2__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 28px; }
.warum2__zitat { margin: 0; padding: 26px 28px; border-radius: 24px; background: linear-gradient(150deg, #fff 25%, var(--orange-hell)); box-shadow: 0 0 0 1px var(--linie); }
.warum2__zitat blockquote { margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; }
.warum2__zitat figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14.5px; color: var(--leise); }
.warum2__zitat figcaption b { display: block; color: var(--text); font-size: 15.5px; }
.warum2__zitat .portrait { width: 44px; height: 44px; }
.warum2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.warum2__kachel { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); overflow: hidden; }
.warum2__kachel::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; background: url("../img/pfeil.svg") center / contain no-repeat; opacity: .07; }
.warum2__gross { font-size: clamp(40px, 4.4vw, 60px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--orange-text); }
.warum2__kachel h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.warum2__kachel p:not(.warum2__gross) { color: var(--leise); font-size: 16px; max-width: 34em; }
.warum2__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; min-height: 60px; }
.warum2__logos img { height: 44px; width: auto; }
.warum2__logos li:first-child img { height: 30px; }
.warum2__kachel--ki { background: linear-gradient(150deg, #fff 35%, var(--orange-hell)); }
@media (max-width: 860px) {
  .warum2__kopf, .warum2 { grid-template-columns: 1fr; }
}

/* Bobby, Fassung 2 (06.10.2026): Bühnenbild, Bobby groß, Text auf dem dunklen Vorhang */
.bobby2 { position: relative; border-radius: 32px; overflow: hidden; background: #0d3b3c; color: #fff; min-height: clamp(460px, 44vw, 620px); display: grid; align-items: center; }
.bobby2__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.bobby2__buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,32,34,.92) 0%, rgba(6,32,34,.78) 38%, rgba(6,32,34,0) 62%); }
.bobby2__text { position: relative; z-index: 1; max-width: 560px; padding: clamp(28px, 4vw, 56px); }
.bobby2__marke { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--orange); }
.bobby2 .titel-l { margin-top: 10px; color: #fff; }
.bobby2__text > p:not(.bobby2__marke) { margin-top: 14px; font-size: 17px; line-height: 1.55; color: #e3efee; }
.bobby2__fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.bobby2__fakten li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: 14px; color: #e3efee; }
.bobby2__fakten li > b { font-size: 26px; font-weight: 600; line-height: 1; color: #fff; }
.bobby2__fakten li span b { display: block; color: #fff; font-size: 15px; }
.bobby2__fakten img { flex: none; width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.9); padding: 3px; }
@media (max-width: 700px) {
  .bobby2 { display: block; min-height: 0; }
  .bobby2__buehne { display: block; position: relative; aspect-ratio: 16 / 10; }
  .bobby2__buehne img { object-position: 85% 50%; }
  .bobby2__buehne::after { background: linear-gradient(180deg, rgba(6,32,34,0) 55%, #0d3b3c 100%); }
  .bobby2__fakten { grid-template-columns: 1fr; }
}

/* Kundenlogos als Laufband, hält bei Mausberührung an, ruht bei reduzierter Bewegung */
.laufband { display: flex; overflow: hidden; padding: 14px 0; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linie); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.laufband__spur { display: flex; flex: none; align-items: center; gap: 56px; padding-right: 56px; animation: laufband 48s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__spur li { flex: none; display: grid; place-items: center; height: 70px; }
.laufband__spur img { max-height: 44px; max-width: 150px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.laufband__spur img:hover { filter: none; opacity: 1; }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .laufband__spur { animation: none; } .laufband { overflow-x: auto; } }

/* Kontaktzentrale: schwebender Knopf unten rechts (Muster aus optimotus, 06.10.2026) */
.schwebend { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 22px 8px 8px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: inherit; text-align: left; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55), 0 0 0 4px rgba(247,164,27,.0); cursor: pointer; transform: translateY(140%); transition: transform .35s cubic-bezier(.3,.8,.3,1), box-shadow .2s; }
.schwebend.ist-sichtbar { transform: none; }
.schwebend:hover, .schwebend:focus-visible { box-shadow: 0 18px 40px -16px rgba(0,0,0,.55), 0 0 0 4px var(--orange); }
.schwebend__bild { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px var(--orange); }
.schwebend__bild img { width: 100%; height: 100%; object-fit: cover; }
.schwebend strong { display: block; font-size: 16px; }
.schwebend small { display: block; font-size: 12.5px; color: #d6d2c8; }
.zentrale { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 26px; background: var(--grund); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); }
.zentrale::backdrop { background: rgba(20,20,20,.45); backdrop-filter: blur(3px); }
.zentrale__kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 22px 22px 16px; background: #fff; border-bottom: 1px solid var(--linie); }
.zentrale__kopf h2 { font-size: 21px; }
.zentrale__kopf p { margin-top: 2px; color: var(--leise); font-size: 14.5px; }
.zentrale__zu { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--grund); font-size: 24px; line-height: 1; cursor: pointer; }
.zentrale__wege { display: grid; gap: 8px; padding: 16px 22px 24px; }
.zentrale__gruppe { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--orange-text); }
.zentrale__weg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--linie); color: var(--text); text-decoration: none; }
.zentrale__weg .symbol { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--orange-hell); color: var(--orange-text); }
.zentrale__weg b { display: block; font-size: 16px; }
.zentrale__weg small { color: var(--leise); font-size: 13.5px; }
.zentrale__weg:hover { box-shadow: inset 0 0 0 2px var(--orange); }
.zentrale__weg--haupt { background: var(--text); color: #fff; }
.zentrale__weg--haupt small { color: #d6d2c8; }
.zentrale__weg--haupt .symbol { background: var(--orange); color: var(--text); }
@media (max-width: 860px) { .schwebend { display: none; } }
button.knopf { border: 0; font: inherit; cursor: pointer; }
.bobby2__fakten li > b { white-space: nowrap; }
.bobby2__fakten img { width: 58px; height: 58px; }
.bobby2__fakten img[src*="kuscheltier"] { object-fit: cover; object-position: 35% 40%; padding: 0; }

/* ===== Bausteine der Unterseiten (03.10.2026) ===== */

/* Seitenkopf */
.kopfbereich { position: relative; padding: clamp(24px, 3.5vw, 48px) 0 clamp(36px, 4vw, 56px); overflow-x: clip; isolation: isolate; }
.kopfbereich::before { content: ""; position: absolute; z-index: -1; right: -10vw; top: -20vw; width: 56vw; max-width: 860px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,164,27,.28), transparent 70%); }
.kopfbereich__raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.kategorie { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); font-size: 14px; font-weight: 600; }
.kategorie .symbol-feld { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); }
.kategorie .symbol { width: 16px; height: 16px; }
.kopfbereich h1 { margin-top: 18px; }
.kopfbereich .lead { max-width: 34em; margin-top: 20px; }

/* Infokarte rechts im Seitenkopf */
.infokarte { padding: 26px; border-radius: 26px; background: var(--papier); box-shadow: var(--schatten); }
.infokarte__titel { font-size: 13px; font-weight: 700; color: var(--orange-text); }
.haken-liste { display: grid; gap: 12px; margin-top: 14px; }
.haken-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.haken-liste .symbol { width: 22px; height: 22px; color: var(--gruen); }
.infokarte .person { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--leise); }
.infokarte .person b { color: var(--text); }

/* Kurz gesagt (zitierfähig für Google und KI) */
.kurz { display: grid; grid-template-columns: 180px 1fr; gap: 16px 32px; padding: clamp(22px, 3vw, 34px); border-radius: var(--rund); background: var(--papier); box-shadow: 0 0 0 1px var(--linie); border-left: 6px solid var(--orange); }
.kurz h2 { font-size: 15px; color: var(--orange-text); }
.kurz p { font-size: 19px; line-height: 1.6; max-width: 62em; }

/* Probleme */
.probleme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.problem { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.problem__zeichen { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fde4dd; color: #a3300c; font-weight: 700; }
.problem b { font-size: 19px; line-height: 1.25; }
.problem p { color: var(--leise); font-size: 15.5px; }
.loesung-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 22px 26px; border-radius: 20px; background: var(--nacht); color: #fff; }
.loesung-band p { font-size: 19px; max-width: 46em; }
.loesung-band b { color: var(--orange); }

/* Leistungsbausteine mit Symbol */
.bausteine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.baustein { display: grid; align-content: start; gap: 10px; padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.baustein .symbol-feld { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--orange-hell); color: var(--orange-text); }
.baustein .symbol { width: 26px; height: 26px; }
.baustein h3 { font-size: 21px; line-height: 1.2; }
.baustein p { color: var(--leise); font-size: 15.5px; }
.baustein ul { display: grid; gap: 6px; font-size: 15px; }
.baustein li { position: relative; padding-left: 16px; }
.baustein li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--orange); }
.baustein--breit { grid-column: span 2; background: linear-gradient(150deg, #fff 45%, var(--orange-hell)); }

/* Zwei Spalten Text und Kasten */
.zweispalter { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.fliesstext p { color: var(--leise); font-size: 17.5px; line-height: 1.65; }
.fliesstext p + p { margin-top: 14px; }
.fliesstext strong { color: var(--text); }
.fliesstext h3 { margin: 26px 0 8px; font-size: 21px; }
.kasten-dunkel { padding: 28px; border-radius: 24px; background: var(--nacht); color: #fff; }
.kasten-dunkel h3 { font-size: 21px; color: var(--orange); }
.kasten-dunkel p, .kasten-dunkel li { color: #d6d2c8; font-size: 15.5px; }
.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: .5em; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--orange); }

/* Ablauf in Schritten */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: a; }
.ablauf--3 { grid-template-columns: repeat(3, 1fr); }
.ablauf li { counter-increment: a; position: relative; display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ablauf li::before { content: counter(a); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); font-weight: 700; margin-bottom: 4px; }
.ablauf b { font-size: 18.5px; }
.ablauf span { color: var(--leise); font-size: 15.5px; }

/* Preisrahmen */
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.preis { display: grid; align-content: start; gap: 10px; padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.preis--hervor { background: var(--nacht); color: #fff; box-shadow: var(--schatten); }
.preis b { font-size: 19px; }
.preis__betrag { font-size: 38px; font-weight: 300; line-height: 1; }
.preis__betrag small { font-size: 15px; }
.preis p { color: var(--leise); font-size: 15.5px; }
.preis .preis__betrag { color: inherit; font-size: 38px; }
.preis--hervor p { color: #d6d2c8; }
.preis--hervor .preis__betrag { color: #fff; }
.notiz { margin-top: 14px; font-size: 14px; color: var(--leise); }

/* Wegweiser-Chips */
.wegweiser { display: flex; flex-wrap: wrap; gap: 10px; }
.wegweiser a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); color: var(--text); font-weight: 600; text-decoration: none; }
.wegweiser a:hover { background: var(--orange); box-shadow: none; }
.wegweiser .symbol { width: 18px; height: 18px; }

/* Einzelne Stimme als Band */
.stimme-band { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: linear-gradient(135deg, #fff, var(--orange-hell)); box-shadow: 0 0 0 1px var(--linie); }
.stimme-band blockquote { margin: 0; font-size: clamp(21px, 2vw, 27px); font-weight: 300; line-height: 1.35; }
.stimme-band blockquote::before { content: "★★★★★"; display: block; margin-bottom: 10px; color: #f4b400; font-size: 16px; letter-spacing: 2px; }
.stimme-band figcaption { margin-top: 12px; font-size: 15px; color: var(--leise); }
.stimme-band figcaption b { color: var(--text); }

/* Fallstudie als Geschichte */
.fall { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-radius: 26px; background: var(--papier); box-shadow: var(--schatten); overflow: hidden; }
.fall > div { padding: 26px; }
.fall > div + div { border-left: 1px solid var(--linie); }
.fall__marke { font-size: 13px; font-weight: 700; color: var(--orange-text); margin-bottom: 8px; }
.fall__zahl { font-size: 44px; font-weight: 300; line-height: 1; }
.fall p { color: var(--leise); font-size: 15.5px; }
.demo-hinweis, .beispiel-hinweis { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 8px; background: #fde4dd; color: #a3300c; font-size: 12.5px; font-weight: 700; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 980px; }
.faq details { border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.faq summary { position: relative; padding: 20px 64px 20px 24px; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s, background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--orange); }
.faq details > div { padding: 0 24px 22px; color: var(--leise); max-width: 62em; }

/* Funnel (Checks und Bewerbung) */
.funnel { padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: var(--papier); box-shadow: var(--schatten); }
.funnel__fortschritt { height: 6px; border-radius: 999px; background: var(--grund); overflow: hidden; }
.funnel__fortschritt i { display: block; height: 100%; width: 33%; border-radius: 999px; background: var(--orange); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.funnel__zaehler { margin-top: 10px; font-size: 13.5px; color: var(--leise); }
.funnel__schritt { margin-top: 16px; }
.funnel__schritt h2, .funnel__schritt h3 { font-size: 23px; line-height: 1.25; }
.funnel__schritt > p { margin-top: 6px; color: var(--leise); font-size: 15.5px; }
.auswahl { display: grid; gap: 10px; margin-top: 16px; }
.auswahl label { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: box-shadow .15s, background .15s; }
.auswahl input { position: absolute; opacity: 0; }
.auswahl .symbol-feld { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--grund); }
.auswahl b { font-size: 16.5px; }
.auswahl small { color: var(--leise); font-size: 14px; }
.auswahl label:has(input:checked) { background: var(--orange-hell); box-shadow: inset 0 0 0 2px var(--orange); }
.auswahl label:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.feld { display: grid; gap: 6px; }
.feld--breit { grid-column: 1 / -1; }
.feld > span { font-size: 14px; font-weight: 600; }
.feld > span small { font-weight: 400; color: var(--leise); }
.feld input, .feld select, .feld textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--linie); border-radius: 13px; background: #fff; font: inherit; font-size: 16.5px; transition: border-color .15s; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--text); outline: none; }
.feld textarea { min-height: 120px; resize: vertical; }
.funnel__knoepfe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.zurueck { border: 0; background: none; color: var(--leise); font: inherit; text-decoration: underline; cursor: pointer; }
.einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--leise); }
.einwilligung input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--text); }
.funnel__danke { margin-top: 18px; text-align: center; }
.funnel__danke .symbol { width: 56px; height: 56px; color: var(--gruen); margin: 0 auto 10px; }
.funnel__danke p { color: var(--leise); margin-top: 8px; }
.honig { position: absolute; left: -9999px; }
.ehrlich { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--grund); font-size: 14px; color: var(--leise); }
.ehrlich .symbol { color: var(--orange-text); }

/* Selbsteinschätzung im Bewerbungs-Funnel */
.skala { display: grid; gap: 12px; margin-top: 16px; }
.skala__zeile { display: grid; grid-template-columns: 1fr; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.skala__zeile:last-child { border-bottom: 0; }
.skala__zeile b { font-size: 15.5px; }
.skala__stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.skala__stufen label { position: relative; }
.skala__stufen input { position: absolute; opacity: 0; }
.skala__stufen span { display: block; padding: 9px 4px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--linie); text-align: center; font-size: 14px; white-space: nowrap; cursor: pointer; }
.skala__stufen input:checked + span { background: var(--orange); box-shadow: none; font-weight: 700; }
.skala__stufen input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }

/* Team */
.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mitglied { display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.mitglied__bild { aspect-ratio: 1; border-radius: 16px; margin-bottom: 8px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #ffe2ac, var(--orange-hell)); overflow: hidden; }
.mitglied__bild img { width: 46%; height: auto; opacity: .85; }
.mitglied b { font-size: 17px; }
.mitglied span { font-size: 14px; color: var(--leise); }

/* Rechtstexte */
.rechtstext { max-width: 820px; }
.rechtstext h2 { margin: 34px 0 10px; font-size: 22px; }
.rechtstext h3 { margin: 22px 0 6px; font-size: 18px; }
.rechtstext p, .rechtstext li { color: var(--leise); line-height: 1.65; }
.rechtstext p + p { margin-top: 10px; }
.rechtstext ul { margin: 8px 0 0 20px; list-style: disc; }
.pruef-hinweis { padding: 14px 18px; border-radius: 14px; background: #fff0cf; color: #6b4500; font-size: 15px; }

/* Standort- und Kartenblock */
.ortsdaten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ortsdaten li { padding: 20px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.ortsdaten b { display: block; font-size: 30px; font-weight: 300; line-height: 1.1; }
.ortsdaten span { font-size: 14px; color: var(--leise); }
.ortsdaten small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--leise); }

/* Kontakt-Seitenleiste */
.kontakt-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
.seitenleiste { display: grid; gap: 14px; }
.seitenleiste > div { padding: 24px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.seitenleiste h2 { font-size: 19px; }
.seitenleiste p { margin-top: 6px; color: var(--leise); font-size: 15.5px; }
.seitenleiste__gross { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 26px; font-weight: 300; color: var(--text); text-decoration: none; }
.seitenleiste--dunkel { background: var(--nacht) !important; color: #fff; }
.seitenleiste--dunkel p { color: #d6d2c8; }
.seitenleiste--dunkel .termine button { background: #fff; color: var(--text); }

/* Fester Knopf am Handy */
.handy-leiste { display: none; }
@media (max-width: 760px) {
  .handy-leiste { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5), 0 0 0 1px var(--linie); }
  .handy-leiste a:first-child { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); color: var(--text); }
  .handy-leiste .knopf { justify-content: center; }
}

@media (max-width: 1120px) {
  .kopfbereich__raster, .zweispalter, .kontakt-raster { grid-template-columns: 1fr; }
  .probleme, .bausteine, .preise { grid-template-columns: 1fr 1fr; }
  .baustein--breit { grid-column: 1 / -1; }
  .ablauf, .ortsdaten { grid-template-columns: 1fr 1fr; }
  .fall { grid-template-columns: 1fr; }
  .fall > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .team { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .probleme, .bausteine, .preise, .ablauf, .ablauf--3, .felder, .ortsdaten, .kurz { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .skala__zeile { grid-template-columns: 1fr; gap: 6px; }
  .stimme-band { grid-template-columns: 1fr; }
}

/* Kontakt: zweispaltige Auswahl und große Adressen mobil sicher */
.auswahl--zwei { grid-template-columns: 1fr 1fr; }
.auswahl label, .auswahl b, .auswahl small { min-width: 0; }
.seitenleiste__gross { overflow-wrap: anywhere; }
.kontakt-raster > * { min-width: 0; }
@media (max-width: 640px) {
  .auswahl--zwei { grid-template-columns: 1fr; }
  .seitenleiste__gross { font-size: 21px; }
}

.skala__legende { margin-top: 8px; font-size: 13.5px; color: var(--leise); }
.skala__legende b { color: var(--text); }

/* Dunkle Kästen hell und warm, Orange als Rahmenakzent */
.kasten-dunkel { background: linear-gradient(160deg, #fff 35%, var(--orange-hell)); color: var(--text); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.kasten-dunkel h3 { color: var(--text); }
.kasten-dunkel p, .kasten-dunkel li { color: var(--leise); }

/* Branchenseite Handwerk: Kanalvergleich */
.kanaele { display: grid; gap: 10px; }
.kanal { display: grid; grid-template-columns: 52px 1fr minmax(0, 1.1fr); gap: 20px; align-items: center; padding: 20px 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.kanal--zuerst { box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.kanal__rang { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); font-size: 20px; font-weight: 700; }
.kanal--zuerst .kanal__rang { background: var(--orange-hell); color: var(--orange-text); }
.kanal h3 { font-size: 19px; }
.kanal p { margin-top: 4px; color: var(--leise); font-size: 15px; }
.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(--orange-text); }
.kanal dd { margin: 2px 0 0; font-size: 14.5px; }

/* Rechner: Kosten je Auftrag */
.rechner { display: grid; grid-template-columns: .9fr 1.1fr; 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); }
.rechner .lead { margin-top: 14px; }
.rechner__feld { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rechner__ergebnis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.rechner__ergebnis div { padding: 16px; border-radius: 16px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.rechner__ergebnis div:nth-child(2) { box-shadow: inset 0 0 0 2px var(--orange); }
.rechner__ergebnis span { display: block; font-size: 13px; color: var(--leise); }
.rechner__ergebnis b { display: block; margin-top: 4px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.1; }
.rechner__satz { grid-column: 1 / -1; font-size: 15.5px; }

/* Gewerke */
.gewerke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gewerke article { padding: 26px; border-radius: 22px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); scroll-margin-top: 100px; }
.gewerke h3 { font-size: 20px; }
.gewerke p { margin-top: 8px; color: var(--leise); font-size: 15.5px; }

@media (max-width: 960px) {
  .kanal { grid-template-columns: 44px 1fr; }
  .kanal dl { grid-column: 1 / -1; }
  .rechner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kanal { padding: 18px; gap: 12px 14px; }
  .kanal dl { grid-template-columns: 1fr; gap: 6px; }
  .kanal dl div { display: flex; gap: 8px; align-items: baseline; }
  .kanal dd { margin: 0; }
  .rechner__feld, .rechner__ergebnis, .gewerke { grid-template-columns: 1fr; }
}

.mitglied__bild--foto { background: none; }
.mitglied__bild--foto img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.auswahl__breit { grid-column: 1 / -1; }

/* Preislogik statt Preisliste (Artur: keine festen Preise auf der Website) */
.preislogik { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: stretch; }
.preislogik__weg { display: grid; gap: 10px; counter-reset: pl; }
.preislogik__weg li { counter-increment: pl; display: grid; grid-template-columns: 44px 1fr; gap: 2px 16px; padding: 20px 22px; border-radius: 20px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.preislogik__weg li::before { content: counter(pl); grid-row: span 2; 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; }
.preislogik__weg b { font-size: 18px; }
.preislogik__weg span { color: var(--leise); font-size: 15.5px; }
.preislogik__faktoren { 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); }
.preislogik__titel { font-size: 13px; font-weight: 700; color: var(--orange-text); margin-bottom: 12px; }
.preislogik__faktoren ul { display: grid; gap: 14px; }
.preislogik__faktoren li { color: var(--leise); font-size: 15.5px; }
.preislogik__faktoren li b { display: block; color: var(--text); font-size: 16.5px; }
@media (max-width: 960px) { .preislogik { grid-template-columns: 1fr; } }

/* Mobil: lange Knopftexte dürfen umbrechen (sonst seitlicher Überstand) */
@media (max-width: 640px) {
  .knopf { white-space: normal; max-width: 100%; }
}

/* Über ARES: Belegkasten und Band „Wir wachsen“ (06.10.2026) */
.belegkasten { padding: 26px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.belegkasten__titel { font-size: 13px; font-weight: 700; color: var(--orange-text); margin-bottom: 16px; }
.belegkasten ul { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; align-items: center; justify-items: center; }
.belegkasten img { max-height: 72px; max-width: 100%; width: auto; }
.belegkasten li:first-child img { max-height: 36px; }
.wachsen-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: linear-gradient(150deg, #fff 30%, var(--orange-hell)); box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--linie); }
.wachsen-band > div { flex: 1 1 420px; }
.wachsen-band h2 { font-size: clamp(22px, 2vw, 28px); }
.wachsen-band p { margin-top: 6px; color: var(--leise); max-width: 46em; }

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