/* Condisystems — Konditionieranlagen.
   Alle Seitenstile stehen unter .cs-anlagen (Inhaltsblock, später WordPress-tauglich) bzw. .cs-nachbildung
   (Kopf, Fuß und Vorschauleisten — werden nicht ausgeliefert). Keine nackten Elementselektoren.
   Designwerte nach Wissensplattform/konzept/designkonzept.md §1/§2 (am Live-Auftritt gemessen):
   Markenblau #2270AE, Poppins, Buttonradius 15 px, Kartenfläche #F5F8FB, Fokus 0 0 0 3px #fff, 0 0 0 6px #2270AE. */

@font-face { font-family: "CS Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-regular-400.woff2") format("woff2"); }
@font-face { font-family: "CS Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-medium-500.woff2") format("woff2"); }
@font-face { font-family: "CS Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-semibold-600.woff2") format("woff2"); }
/* Ersatzschrift mit Poppins-Metriken: beim ersten Laden springt der Text beim Schriftwechsel nicht (size-adjust aus gemessenen Textbreiten; funktioniert lokal und unter file://) */
@font-face { font-family: "CS Poppins Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("Helvetica"); size-adjust: 111.3%; ascent-override: 94.3%; descent-override: 31.4%; line-gap-override: 9%; }
@font-face { font-family: "CS Poppins Fallback"; font-style: normal; font-weight: 500; src: local("Arial"), local("Helvetica"); size-adjust: 112.7%; ascent-override: 93.2%; descent-override: 31%; line-gap-override: 8.9%; }
@font-face { font-family: "CS Poppins Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); size-adjust: 106.3%; ascent-override: 98.8%; descent-override: 32.9%; line-gap-override: 9.4%; }
@font-face { font-family: "CS Poppins Symbole"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-symbole-400.woff2") format("woff2"); unicode-range: U+2248, U+2260, U+2264, U+2265; }
@font-face { font-family: "CS Poppins Symbole"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-symbole-500.woff2") format("woff2"); unicode-range: U+2248, U+2260, U+2264, U+2265; }
@font-face { font-family: "CS Poppins Symbole"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-symbole-600.woff2") format("woff2"); unicode-range: U+2248, U+2260, U+2264, U+2265; }

.cs-seite {
  --cs-blau: #2270AE; --cs-blau-dunkel: #1B5A8C; --cs-blau-tief: #143852; --cs-blau-hell: #EAF2F9;
  --cs-flaeche: #F5F8FB; --cs-weiss: #fff; --cs-text: #5E6166; --cs-text-leise: #6B6F76; --cs-ueberschrift: #212529;
  --cs-linie: #E2E8F0; --cs-radius: 15px; --cs-radius-klein: 8px;
  --cs-schatten: 0 1px 10px rgba(0, 0, 0, .08); --cs-schatten-hoch: 0 10px 24px rgba(20, 56, 82, .16);
  --cs-fokus: 0 0 0 3px #fff, 0 0 0 6px #2270AE;
  --cs-ok: #17694A; --cs-ok-bg: #E4F3EC; --cs-warn: #8A3B07; --cs-warn-bg: #FDEFD9; --cs-nein: #8E2F0E; --cs-nein-bg: #FCE9E1; --cs-grau-bg: #ECEFF3;
  --cs-sans: "CS Poppins", "CS Poppins Fallback", "CS Poppins Symbole", Poppins, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --sim-h: 0px;
  margin: 0; background: #fff; color: var(--cs-text); font-family: var(--cs-sans); font-size: 16px; line-height: 1.6;
  -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;
}
.cs-seite[data-sim="1"] { --sim-h: 44px; }
html[data-modus="simulation"] .cs-seite { --sim-h: 44px; }

.cs-anlagen, .cs-nachbildung, .anfrage-dialog { font-family: var(--cs-sans); }
.cs-anlagen *, .cs-anlagen *::before, .cs-anlagen *::after,
.cs-nachbildung *, .cs-nachbildung *::before, .cs-nachbildung *::after,
.anfrage-dialog *, .anfrage-dialog *::before, .anfrage-dialog *::after { box-sizing: border-box; }
.cs-anlagen img, .cs-nachbildung img { max-width: 100%; height: auto; display: block; }
.cs-anlagen h1, .cs-anlagen h2, .cs-anlagen h3, .cs-anlagen h4, .cs-nachbildung h2 { margin: 0; color: var(--cs-ueberschrift); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cs-anlagen p, .cs-anlagen ul, .cs-anlagen dl, .cs-anlagen dd, .cs-anlagen figure { margin: 0; }
.cs-anlagen ul { padding: 0; list-style: none; }
.cs-anlagen [hidden], .anfrage-dialog [hidden] { display: none !important; }
@media (min-width: 961px) { .cs-anlagen .angaben-leiste { display: none; } }
.cs-anlagen a { color: var(--cs-blau); }

.cs-anlagen .container, .cs-nachbildung .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.cs-anlagen .container--schmal { max-width: 860px; }
.cs-seite .skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: var(--cs-blau); padding: 10px 16px; border-radius: var(--cs-radius-klein); font-weight: 600; text-decoration: none; box-shadow: var(--cs-schatten-hoch); }
.cs-seite .skip:focus { top: 12px; box-shadow: var(--cs-fokus); }

/* ------------------------------------------------------------ Fokus, Bewegung */
.cs-anlagen :focus-visible, .cs-nachbildung :focus-visible, .anfrage-dialog :focus-visible { outline: none; box-shadow: var(--cs-fokus); border-radius: 6px; }
.cs-nachbildung .site-footer :focus-visible, .cs-anlagen .hero :focus-visible, .cs-anlagen .lohn :focus-visible, .cs-anlagen .kontakt-karte--haupt :focus-visible { box-shadow: 0 0 0 3px #143852, 0 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) {
  .cs-anlagen *, .cs-nachbildung *, .anfrage-dialog * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html:has(.cs-seite) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.cs-seite) { scroll-behavior: auto; } }

/* ------------------------------------------------------------ Buttons */
.cs-anlagen .btn, .cs-nachbildung .btn, .anfrage-dialog .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 44px; padding: 10px 22px;
  border: 2px solid transparent; border-radius: var(--cs-radius); font: 500 14.5px/1.3 var(--cs-sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; text-align: center;
}
.cs-anlagen .btn .ic, .cs-nachbildung .btn .ic, .anfrage-dialog .btn .ic { width: 1.15em; height: 1.15em; flex: none; }
.cs-anlagen .btn--primaer, .cs-nachbildung .btn--primaer, .anfrage-dialog .btn--primaer { background: var(--cs-blau); color: #fff; }
.cs-anlagen .btn--primaer:hover, .cs-nachbildung .btn--primaer:hover, .anfrage-dialog .btn--primaer:hover { background: var(--cs-blau-dunkel); color: #fff; }
.cs-anlagen .btn--weiss { background: #fff; color: var(--cs-blau); }
.cs-anlagen .btn--weiss:hover { background: var(--cs-blau-hell); color: var(--cs-blau-dunkel); }
.cs-anlagen .btn--umriss { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.cs-anlagen .btn--umriss:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.cs-anlagen .btn--umriss-dunkel, .cs-nachbildung .btn--umriss-dunkel, .anfrage-dialog .btn--umriss-dunkel { background: #fff; color: var(--cs-blau); border-color: var(--cs-blau); }
.cs-anlagen .btn--umriss-dunkel:hover, .cs-nachbildung .btn--umriss-dunkel:hover, .anfrage-dialog .btn--umriss-dunkel:hover { background: var(--cs-blau-hell); color: var(--cs-blau-dunkel); }
.cs-anlagen .btn--text { background: transparent; color: var(--cs-blau); padding-inline: 10px; }
.cs-anlagen .btn--text:hover { background: var(--cs-blau-hell); }
.cs-anlagen .btn--klein, .cs-nachbildung .btn--klein, .anfrage-dialog .btn--klein { min-height: 40px; padding: 8px 16px; font-size: 13.5px; }
.cs-anlagen .btn--gross { min-height: 52px; padding: 14px 28px; font-size: 16px; font-weight: 600; }
.cs-anlagen .btn[disabled], .cs-anlagen .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cs-anlagen .textlink { display: inline-flex; align-items: center; gap: .4em; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-block: 2px; }
.cs-anlagen .textlink:hover { color: var(--cs-blau-dunkel); }
.cs-anlagen button.textlink--btn { background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; font: 500 16px/1.6 var(--cs-sans); color: var(--cs-blau); cursor: pointer; min-height: 32px; }
.cs-anlagen .textlink .ic { width: 1.05em; height: 1.05em; }
.cs-anlagen .textlink--hell { color: #fff; }
.cs-anlagen .textlink--hell:hover { color: #fff; opacity: .85; }
.cs-seite .ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Vergleichsleiste, Vergleichsdialog und Anfragedialog hängen unter <body>, in WordPress also außerhalb des Wurzelelements .cs-seite: die Symbolzeichnung (nur Linien, keine Füllung) muss dort ebenfalls gelten. Größen kommen aus den jeweiligen Regeln. */
.cs-anlagen.vergleich-dialog .ic, .cs-anlagen.vergleich-leiste .ic, .cs-anlagen.anfrage-dialog .ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cs-seite .sym { width: 40px; height: 40px; fill: none; stroke: var(--cs-blau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cs-seite .sym--klein { width: 30px; height: 30px; }

/* ------------------------------------------------------------ Typografie */
.cs-anlagen .kicker { color: var(--cs-blau); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.cs-anlagen .kicker--hell { color: rgba(255, 255, 255, .9); }
.cs-anlagen h1, .cs-anlagen h2, .cs-anlagen h3, .cs-anlagen h4 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.cs-anlagen h1 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem); letter-spacing: -.035em; line-height: 1.08; color: #fff; }
.cs-anlagen h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); letter-spacing: -.03em; }
.cs-anlagen h3 { font-size: 1.2rem; }
.cs-anlagen .lede { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.65; }
.cs-anlagen .abschnitt__lede { max-width: 760px; margin-top: 14px; font-size: 1.06rem; }
.cs-anlagen .hinweis-klein { margin-top: 20px; font-size: 13.5px; color: var(--cs-text-leise); }

.cs-anlagen .abschnitt { padding-block: clamp(56px, 7vw, 96px); scroll-margin-top: 90px; }
.cs-anlagen .abschnitt--flaeche { background: var(--cs-flaeche); }
.cs-anlagen [id] { scroll-margin-top: calc(96px + var(--sim-h)); }

/* ------------------------------------------------------------ Vorschauleisten (Nachbildung) */
.cs-nachbildung.vorschau-leiste { background: var(--cs-blau-tief); color: #E9F1F8; font-size: 12.5px; line-height: 1.45; }
.vorschau-leiste__inner { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-block: 8px; flex-wrap: wrap; }
.vorschau-leiste__text { margin: 0; flex: 1 1 520px; }
.cs-nachbildung .segment { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .1); padding: 3px; border-radius: 10px; }
.cs-nachbildung .segment__label { padding: 0 8px; font-size: 12px; opacity: .85; }
.cs-nachbildung .segment__btn, .cs-anlagen .segment__btn { border: 0; background: transparent; color: inherit; font: 500 12.5px/1 var(--cs-sans); padding: 9px 14px; border-radius: 8px; cursor: pointer; min-height: 34px; }
.cs-nachbildung .segment__btn[aria-pressed="true"] { background: #fff; color: var(--cs-blau-tief); }
.cs-nachbildung.sim-leiste { position: sticky; top: 0; z-index: 90; background: #FDB022; color: #2B1A00; font-size: 13.5px; }
.cs-nachbildung.sim-leiste[hidden] { display: none; }
.sim-leiste__inner { display: flex; gap: 8px 18px; align-items: center; justify-content: center; flex-wrap: wrap; padding-block: 6px; min-height: 44px; }
.sim-leiste__inner .btn { min-height: 32px; padding: 4px 12px; font-size: 12.5px; border-color: #2B1A00; color: #2B1A00; background: transparent; }

/* ------------------------------------------------------------ Kopf */
.cs-nachbildung.site-header { position: sticky; top: var(--sim-h, 0px); z-index: 80; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .08); }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: 150px; height: auto; }
.cs-nachbildung .site-nav { margin-left: auto; }
.cs-nachbildung .site-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cs-nachbildung .site-nav a { display: block; padding: 10px 12px; color: var(--cs-blau); font-weight: 500; font-size: 14.5px; text-decoration: none; border-radius: 8px; }
.cs-nachbildung .site-nav a:hover { background: var(--cs-blau-hell); }
.cs-nachbildung .site-nav a[aria-current="page"] { color: #446084; background: var(--cs-flaeche); box-shadow: inset 0 -3px 0 var(--cs-blau); border-radius: 8px 8px 0 0; }
.site-header__menue { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--cs-linie); background: #fff; color: var(--cs-blau); border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; }
.site-header__menue .ic { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .cs-nachbildung .site-header__cta { display: none; }
  .site-header__menue { display: inline-flex; }
  .cs-nachbildung .site-nav { display: none; position: absolute; inset: 100% 0 auto 0; margin: 0; background: #fff; border-top: 1px solid var(--cs-linie); box-shadow: 0 16px 24px rgba(0, 0, 0, .12); padding: 8px 24px 20px; }
  .cs-nachbildung .site-nav.is-offen { display: block; }
  .cs-nachbildung .site-nav ul { flex-direction: column; gap: 0; }
  .cs-nachbildung .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--cs-linie); border-radius: 0; font-size: 16px; }
  .cs-nachbildung .site-nav a[aria-current="page"] { box-shadow: none; background: transparent; font-weight: 600; }
}

/* ------------------------------------------------------------ Hero (V2) */
.cs-anlagen .hero { background: linear-gradient(155deg, #2270AE 0%, #1B5A8C 55%, #164A73 100%); color: rgba(255, 255, 255, .95); position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 72px) clamp(44px, 5.5vw, 76px); }
.cs-anlagen .hero::after { content: ""; position: absolute; right: -8%; top: 50%; width: min(720px, 60vw); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 66%); pointer-events: none; }
.cs-anlagen .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; position: relative; z-index: 1; }
.cs-anlagen .hero__text .kicker { margin-bottom: 16px; }
.cs-anlagen .hero h1 { hyphens: manual; -webkit-hyphens: manual; }
.cs-anlagen .hero__h1-kern { display: block; }
.cs-anlagen .hero__zusatz { display: block; margin-top: .4em; font-size: .56em; font-weight: 400; letter-spacing: -.015em; line-height: 1.3; color: rgba(255, 255, 255, .92); max-width: 24ch; }
.cs-anlagen .hero .lede { margin-top: 22px; max-width: 54ch; color: rgba(255, 255, 255, .92); }
.cs-anlagen .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.cs-anlagen .hero__alle { margin-top: 18px; font-size: 14.5px; }
.cs-anlagen .hero__fakten { display: grid; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.cs-anlagen .hero__fakten li { display: flex; align-items: center; gap: 9px; }
.cs-anlagen .hero__fakten li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .65); flex: none; }
.cs-anlagen .hero__buehne { display: grid; gap: 14px; }
.cs-anlagen .hero__bild { position: relative; margin: 0; background: linear-gradient(180deg, #fff 0%, #EEF4F9 100%); border-radius: 20px; padding: 18px 18px 0; box-shadow: 0 22px 48px rgba(8, 30, 52, .32); display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.cs-anlagen .hero__bild img { mix-blend-mode: multiply; width: auto; max-width: 100%; height: clamp(250px, 30vw, 400px); object-fit: contain; }
.cs-anlagen .hero__bild figcaption { align-self: stretch; margin-top: 8px; padding: 12px 4px 14px; border-top: 1px solid var(--cs-linie); font-size: 13.5px; font-weight: 600; color: var(--cs-ueberschrift); text-align: left; }
.cs-anlagen .hero__tag { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--cs-blau-hell); color: var(--cs-blau-tief); font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
.cs-anlagen .hero__verfahren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-anlagen .hero__verfahren a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; height: 100%; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s; }
.cs-anlagen .hero__verfahren a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }
.cs-anlagen .hero .sym--hero { width: 26px; height: 26px; stroke: #fff; stroke-width: 3; }
.cs-anlagen .hero .sym--hero { grid-row: 1 / 3; }
.cs-anlagen .hero__verf-name { align-self: end; font-size: 13.5px; font-weight: 600; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.cs-anlagen .hero__verf-n { align-self: start; font-size: 12px; opacity: .85; }
.cs-anlagen .hero__verf-n::after { content: " Anlagen"; }
@media (max-width: 900px) {
  .cs-anlagen .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-anlagen .hero__buehne { max-width: none; }
  .cs-anlagen .hero__bild img { height: clamp(220px, 52vw, 340px); }
}
@media (max-width: 560px) {
  .cs-anlagen .hero__cta .btn { width: 100%; }
  .cs-anlagen .hero__verfahren a { padding: 10px 12px; column-gap: 10px; }
  .cs-anlagen .hero__verf-name { font-size: 12.5px; }
  .cs-anlagen .hero__fakten { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------ Einstiege (V2) */
.cs-anlagen .einstiege { padding-block: clamp(32px, 4vw, 52px) 0; }
.cs-anlagen .einstiege__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.cs-anlagen .einstiege__weitere { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.cs-anlagen .einstieg { display: flex; text-decoration: none; color: var(--cs-text); border-radius: var(--cs-radius); border: 1px solid var(--cs-linie); transition: border-color .2s, box-shadow .2s; }
.cs-anlagen .einstieg:hover { border-color: var(--cs-blau); box-shadow: var(--cs-schatten-hoch); }
.cs-anlagen .einstieg__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14.5px; line-height: 1.55; }
.cs-anlagen .einstieg__text strong { color: var(--cs-ueberschrift); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.cs-anlagen .einstieg__text .kicker { margin: 0; }
.cs-anlagen .einstieg__cta { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--cs-blau); font-size: 14.5px; }
.cs-anlagen .einstieg__cta .ic { width: 1.1em; height: 1.1em; transition: transform .2s; }
.cs-anlagen .einstieg:hover .einstieg__cta .ic { transform: translateX(3px); }
.cs-anlagen .einstieg--haupt { background: linear-gradient(120deg, var(--cs-blau-hell) 0%, #fff 78%); padding: clamp(22px, 3vw, 34px); gap: 24px; align-items: center; }
.cs-anlagen .einstieg--haupt .einstieg__text { flex: 1 1 auto; align-self: stretch; }
.cs-anlagen .einstieg--haupt .einstieg__text strong { font-size: clamp(21px, 1.5vw + 14px, 28px); letter-spacing: -.02em; }
.cs-anlagen .einstieg--haupt .einstieg__cta { align-self: flex-start; margin-top: 14px; padding: 12px 20px; border-radius: var(--cs-radius); background: var(--cs-blau); color: #fff; transition: background-color .2s; }
.cs-anlagen .einstieg--haupt:hover .einstieg__cta { background: var(--cs-blau-dunkel); }
.cs-anlagen .einstieg__bild { flex: 0 0 clamp(150px, 20vw, 250px); }
.cs-anlagen .einstieg__bild img { mix-blend-mode: multiply; width: 100%; height: auto; max-height: 250px; object-fit: contain; }
.cs-anlagen .einstieg--leise { background: #fff; padding: 22px 24px; border-left: 4px solid var(--cs-blau); }
.cs-anlagen .einstieg--leise .einstieg__text strong { font-size: 17px; }
@media (max-width: 900px) {
  .cs-anlagen .einstiege__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cs-anlagen .einstiege__weitere { grid-template-rows: none; gap: 14px; }
}
@media (max-width: 560px) {
  .cs-anlagen .einstieg--haupt { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .cs-anlagen .einstieg__bild { flex: none; height: 150px; display: flex; justify-content: center; }
  .cs-anlagen .einstieg__bild img { width: auto; height: 100%; }
  .cs-anlagen .einstieg--haupt .einstieg__cta { align-self: stretch; justify-content: center; }
}

/* ------------------------------------------------------------ Einführung */

/* ------------------------------------------------------------ Verfahren */
.cs-anlagen .verfahren-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin-top: 36px; }
.cs-anlagen .verfahren-karte { background: #fff; border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); padding: 26px; display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 14px; margin-bottom: 20px; border: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.cs-anlagen .verfahren-karte:hover { box-shadow: var(--cs-schatten-hoch); border-color: var(--cs-blau-hell); }
.cs-anlagen .verfahren-karte__kopf { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.cs-anlagen .verfahren-karte__kopf h3 { font-size: 1.1rem; min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.cs-anlagen .verfahren-karte p { font-size: 15px; }
.cs-anlagen .verfahren-karte__daten { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 1px solid var(--cs-linie); font-size: 13.5px; }
.cs-anlagen .verfahren-karte__daten dt { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-text-leise); }
.cs-anlagen .verfahren-karte__daten dd { color: var(--cs-ueberschrift); font-weight: 500; }
.cs-anlagen .verfahren-karte__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.cs-anlagen .minis { display: inline-flex; }
.cs-anlagen .mini { width: 38px; height: 38px; border-radius: 50%; background: var(--cs-flaeche); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--cs-linie); margin-left: -8px; overflow: hidden; display: inline-block; }
.cs-anlagen .mini:first-child { margin-left: 0; }
.cs-anlagen .mini img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 3px; }
@media (max-width: 1100px) { .cs-anlagen .verfahren-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-anlagen .verfahren-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Karten (Anlagen, Zubehör) */
.cs-anlagen .filter { display: flex; gap: 8px; margin-top: 28px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
html:not(.js) .cs-anlagen .filter { display: none; }
.cs-anlagen .chip { flex: none; border: 1.5px solid var(--cs-linie); background: #fff; color: var(--cs-textblau); font: 500 14px/1 var(--cs-sans); padding: 11px 16px; border-radius: 999px; cursor: pointer; min-height: 42px; transition: background-color .2s, border-color .2s, color .2s; }
.cs-anlagen .chip:hover { border-color: var(--cs-blau); }
.cs-anlagen .chip[aria-pressed="true"] { background: var(--cs-blau); color: #fff; border-color: var(--cs-blau); }
.cs-anlagen .filter__status { min-height: 1.4em; font-size: 13.5px; color: var(--cs-text-leise); margin-top: 6px; }
.cs-anlagen .gruppe { margin-top: 44px; }
.cs-anlagen .gruppe[hidden] { display: none; }
.cs-anlagen .gruppe__titel { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; margin-bottom: 20px; }
.cs-anlagen .karten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.cs-anlagen .karte, .cs-anlagen .zubehoer-karte { background: #fff; border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); display: flex; flex-direction: column; overflow: hidden; border: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.cs-anlagen .karte:hover, .cs-anlagen .zubehoer-karte:hover { box-shadow: var(--cs-schatten-hoch); border-color: var(--cs-blau-hell); }
.cs-anlagen .karte[hidden] { display: none; }
.cs-anlagen .karte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--cs-flaeche); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cs-anlagen .karte__bild img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.cs-anlagen .karte__bild > .symbol-gross { position: static; }
.cs-anlagen .karte__bild.blend img { mix-blend-mode: multiply; }
.cs-anlagen .karte__bild--klein { aspect-ratio: 5 / 4; }
.cs-anlagen .bild-hinweis { position: absolute; right: 10px; bottom: 10px; background: rgba(20, 56, 82, .88); color: #fff; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; }
.cs-anlagen .bild-plakette { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; align-items: flex-start; background: var(--cs-warn-bg); color: var(--cs-warn); font-size: 11px; line-height: 1.35; padding: 5px 8px; border-radius: 8px; }
.cs-anlagen .bild-plakette .ic { width: 14px; height: 14px; margin-top: 1px; }
.cs-anlagen .karte__inhalt { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-anlagen .karte__inhalt .kicker { margin: 0; }
.cs-anlagen .karte__titel { font-size: 1.22rem; }
.cs-anlagen .karte__unter { font-size: 13.5px; color: var(--cs-text-leise); margin-top: -4px; }
.cs-anlagen .karte__kurz { font-size: 14.5px; line-height: 1.55; }
.cs-anlagen .merkmale { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cs-linie); font-size: 13.5px; margin-top: auto; }
.cs-anlagen .merkmale > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.cs-anlagen .merkmale dt { color: var(--cs-text-leise); font-weight: 500; }
.cs-anlagen .merkmale dd { color: var(--cs-ueberschrift); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.cs-anlagen .merkmale small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--cs-text-leise); }
.cs-anlagen .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-anlagen .chips li { background: var(--cs-blau-hell); color: var(--cs-blau-tief); font-size: 12.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px; }
.cs-anlagen .karte-details { font-size: 13.5px; }
.cs-anlagen .karte-details summary { cursor: pointer; color: var(--cs-blau); font-weight: 500; padding: 6px 0; min-height: 32px; }
.cs-anlagen .karte-details ul { display: grid; gap: 6px; padding: 6px 0 0 0; }
.cs-anlagen .karte__aktionen { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cs-anlagen .zeile-anfrage { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px; border: 1.5px dashed #B7C9DB; border-radius: var(--cs-radius); background: rgba(255, 255, 255, .7); font-size: 14.5px; }
.cs-anlagen .leer-hinweis { margin-top: 24px; padding: 18px; background: #fff; border-radius: var(--cs-radius); }

.cs-anlagen .zuordnung { font-size: 12.5px; background: var(--cs-warn-bg); color: var(--cs-warn); border-radius: 8px; padding: 8px 10px; }
.cs-anlagen .zuordnung ul { margin-top: 4px; padding-left: 14px; list-style: disc; }

/* Intern-Ansicht */
html:not([data-ansicht="intern"]) .cs-anlagen .nur-vorschau { display: none !important; }
.cs-anlagen .plakette { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.cs-anlagen .plakette--warn { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-anlagen .plakette--empfohlen { background: var(--cs-ok-bg); color: var(--cs-ok); }

/* ------------------------------------------------------------ Gebrauchtanlagen */
.cs-anlagen .demo-schalter { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 6px 8px 6px 14px; border: 1.5px dashed #B7C9DB; border-radius: 12px; background: #fff; font-size: 13px; }
.cs-anlagen .demo-schalter__label { color: var(--cs-text-leise); margin-right: 4px; }
.cs-anlagen .segment__btn { color: var(--cs-textblau); border: 1px solid var(--cs-linie); background: #fff; min-width: 40px; }
.cs-anlagen .segment__btn[aria-pressed="true"] { background: var(--cs-blau); color: #fff; border-color: var(--cs-blau); }
.cs-anlagen .demo-banner { margin-top: 16px; padding: 10px 16px; border-radius: 10px; background: var(--cs-warn-bg); color: var(--cs-warn); font-weight: 500; font-size: 14px; }
.cs-anlagen .gebraucht-liste { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.cs-anlagen .leerzustand { grid-column: 1 / -1; background: #fff; border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); padding: clamp(24px, 4vw, 40px); display: grid; gap: 10px; justify-items: start; border-left: 5px solid var(--cs-blau); }
.cs-anlagen .gebraucht-karte { background: #fff; border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); overflow: hidden; display: flex; flex-direction: column; }
.cs-anlagen .gebraucht-karte .karte__bild { padding: 12px; }
.cs-anlagen .status-plakette { position: absolute; right: 10px; top: 10px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--cs-ok-bg); color: var(--cs-ok); }
.cs-anlagen .status-plakette--reserviert { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-anlagen .modellabb { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; background: rgba(20, 56, 82, .88); color: #fff; padding: 3px 9px; border-radius: 999px; }
.cs-anlagen .beispiel-marke { position: absolute; left: 10px; top: 10px; font-size: 11.5px; font-weight: 600; background: #FDB022; color: #2B1A00; padding: 3px 9px; border-radius: 999px; }
.cs-anlagen .gebraucht-karte dl { display: grid; gap: 6px; font-size: 14px; }
.cs-anlagen .gebraucht-karte dl > div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }
.cs-anlagen .gebraucht-karte dt { color: var(--cs-text-leise); }
.cs-anlagen .gebraucht-karte dd { color: var(--cs-ueberschrift); font-weight: 500; }
.cs-anlagen .preis { font-size: 1.1rem; font-weight: 600; color: var(--cs-ueberschrift); }

/* ------------------------------------------------------------ Lohnkonditionierung */
.cs-anlagen .lohn { background: var(--cs-blau); color: rgba(255, 255, 255, .95); padding-block: clamp(56px, 7vw, 92px); position: relative; overflow: hidden; }
.cs-anlagen .lohn::before { content: ""; position: absolute; left: -200px; bottom: -260px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%); }
.cs-anlagen .lohn h2 { color: #fff; }
.cs-anlagen .lohn__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; }
.cs-anlagen .lohn .lede { margin-top: 18px; max-width: 62ch; }
.cs-anlagen .lohn__punkte { display: grid; gap: 10px; margin-top: 22px; }
.cs-anlagen .lohn__punkte li { display: flex; gap: 10px; align-items: flex-start; }
.cs-anlagen .lohn__punkte .ic { margin-top: .3em; }
.cs-anlagen .lohn__aktion { display: grid; gap: 14px; justify-items: stretch; }
@media (max-width: 860px) { .cs-anlagen .lohn__grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ FAQ */
.cs-anlagen .faq { margin-top: 28px; border-top: 1px solid var(--cs-linie); }
.cs-anlagen .faq__eintrag { border-bottom: 1px solid var(--cs-linie); }
.cs-anlagen .faq__frage { font-size: 1rem; }
.cs-anlagen .faq__knopf { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; font: 600 1.05rem/1.4 var(--cs-sans); color: var(--cs-ueberschrift); min-height: 44px; }
.cs-anlagen .faq__knopf:hover { color: var(--cs-blau); }
.cs-anlagen .faq__knopf:focus-visible { box-shadow: var(--cs-fokus); border-radius: 8px; }
.cs-anlagen .faq__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--cs-blau-hell); color: var(--cs-blau); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .2s, background-color .2s; }
.cs-anlagen .faq__knopf[aria-expanded="true"] .faq__icon { transform: rotate(45deg); background: var(--cs-blau); color: #fff; }
.cs-anlagen .faq__antwort { padding: 0 4px 22px; max-width: 70ch; }
.js .cs-anlagen .faq__antwort[hidden] { display: none; }

/* ------------------------------------------------------------ Kontakt */
.cs-anlagen .kontakt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.cs-anlagen .kontakt-karte { background: #fff; border-radius: var(--cs-radius); padding: 28px; box-shadow: var(--cs-schatten); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cs-anlagen .kontakt-karte--haupt { background: var(--cs-blau); color: rgba(255, 255, 255, .95); }
.cs-anlagen .kontakt-karte--haupt h3 { color: #fff; }
.cs-anlagen .kontakt-karte__ic { width: 50px; height: 50px; border-radius: 14px; background: var(--cs-blau-hell); color: var(--cs-blau); display: inline-flex; align-items: center; justify-content: center; }
.cs-anlagen .kontakt-karte--haupt .kontakt-karte__ic { background: rgba(255, 255, 255, .16); color: #fff; }
.cs-anlagen .kontakt-karte .btn { margin-top: auto; }
.cs-anlagen .kontakt-karte address { font-style: normal; font-size: 14px; color: var(--cs-text-leise); }
@media (max-width: 960px) { .cs-anlagen .kontakt-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Fuß */
.cs-nachbildung.site-footer { background: #2270AE; color: #fff; font-size: 14.5px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-block: 56px 40px; }
.cs-nachbildung .site-footer__marke img { width: 170px; height: auto; margin-bottom: 14px; }
.cs-nachbildung .site-footer__marke p { margin: 0; max-width: 34ch; }
.cs-nachbildung .site-footer__titel { color: #fff; font-size: 1.05rem; margin: 0 0 14px; font-weight: 600; letter-spacing: 0; }
.cs-nachbildung.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-nachbildung.site-footer a { color: #fff; text-underline-offset: 3px; }
.cs-nachbildung.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer__fuss { border-top: 1px solid rgba(255, 255, 255, .25); font-size: 12.5px; padding-block: 16px; opacity: .9; }
.site-footer__fuss p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 40px 28px; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Anlagenfinder */
.cs-anlagen .finder { margin-top: 32px; }
.cs-anlagen .finder__rahmen { background: #fff; border-radius: 20px; box-shadow: 0 14px 44px rgba(20, 56, 82, .14); border: 1px solid var(--cs-linie); overflow: hidden; }
.cs-anlagen .finder__noscript { padding: 24px; }
.cs-anlagen .finder__start { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; }
.cs-anlagen .finder__start-text { padding: clamp(24px, 4vw, 48px); display: grid; gap: 16px; justify-items: start; }
.cs-anlagen .finder__punkte { display: grid; gap: 10px; }
.cs-anlagen .finder__punkte li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.cs-anlagen .finder__punkte .ic { color: var(--cs-ok); margin-top: .25em; }
.cs-anlagen .finder__modus { background: var(--cs-flaeche); padding: clamp(24px, 4vw, 40px); border-left: 1px solid var(--cs-linie); display: grid; gap: 16px; align-content: center; font-size: 14px; }
@media (max-width: 860px) { .cs-anlagen .finder__start { grid-template-columns: minmax(0, 1fr); } .cs-anlagen .finder__modus { border-left: 0; border-top: 1px solid var(--cs-linie); } }
.cs-anlagen .modus-panel h4 { font-size: .95rem; margin-bottom: 8px; }
.cs-anlagen .modus-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #fff; padding: 4px; border: 1px solid var(--cs-linie); border-radius: 12px; }
.cs-anlagen .modus-schalter button { border: 0; background: transparent; padding: 10px 8px; border-radius: 9px; font: 500 13.5px/1.25 var(--cs-sans); color: var(--cs-textblau); cursor: pointer; min-height: 44px; }
.cs-anlagen .modus-schalter button[aria-pressed="true"] { background: var(--cs-blau); color: #fff; }
.cs-anlagen .modus-schalter button[data-modus="simulation"][aria-pressed="true"] { background: #FDB022; color: #2B1A00; }
.cs-anlagen .stand-hinweis { background: var(--cs-blau-hell); color: var(--cs-blau-tief); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }
.cs-anlagen .stand-hinweis--sim { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; font-weight: 500; }
.cs-anlagen .regelpanel { margin-top: 4px; font-size: 13px; }
.cs-anlagen .regelpanel summary { cursor: pointer; color: var(--cs-blau); font-weight: 500; min-height: 32px; padding: 6px 0; }
.cs-anlagen .regelliste { display: grid; gap: 4px; margin-top: 8px; max-height: 300px; overflow: auto; padding-right: 4px; }
.cs-anlagen .regelliste label { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; padding: 4px 2px; cursor: pointer; }
.cs-anlagen .regelliste input { margin-top: 3px; accent-color: var(--cs-blau); width: 16px; height: 16px; flex: none; }
.cs-anlagen .regelliste small { color: var(--cs-text-leise); display: block; }
.cs-anlagen .regelliste .ist-zurueck { color: var(--cs-warn); }

.cs-anlagen .finder__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 16px clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--cs-linie); background: var(--cs-flaeche); }
.cs-anlagen .finder__kopf-titel { font-weight: 600; color: var(--cs-ueberschrift); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-anlagen .modus-etikett { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--cs-blau-hell); color: var(--cs-blau-tief); }
.cs-anlagen .modus-etikett--sim { background: #FDB022; color: #2B1A00; }
.cs-anlagen .fortschritt { padding: 14px clamp(18px, 3vw, 32px) 0; }
.cs-anlagen .fortschritt__text { display: flex; justify-content: space-between; font-size: 13px; color: var(--cs-text-leise); margin-bottom: 8px; gap: 12px; }
.cs-anlagen .fortschritt__balken { height: 8px; background: var(--cs-blau-hell); border-radius: 999px; overflow: hidden; }
.cs-anlagen .fortschritt__balken > span { display: block; height: 100%; background: var(--cs-blau); border-radius: 999px; transition: width .3s; }
.cs-anlagen .finder__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; }
.cs-anlagen .finder__haupt { padding: clamp(18px, 3vw, 36px); min-width: 0; }
.cs-anlagen .finder__seite { border-left: 1px solid var(--cs-linie); background: var(--cs-flaeche); padding: 24px 22px; font-size: 13.5px; }
.cs-anlagen .finder__seite h4 { font-size: .95rem; margin-bottom: 12px; }
.cs-anlagen .angaben-liste { display: grid; gap: 10px; }
.cs-anlagen .angaben-liste li { display: grid; gap: 1px; }
.cs-anlagen .angaben-liste dt, .cs-anlagen .angaben-liste .a-frage { color: var(--cs-text-leise); font-size: 12px; }
.cs-anlagen .angaben-liste .a-wert { color: var(--cs-ueberschrift); font-weight: 500; display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.cs-anlagen .link-knopf { all: unset; box-sizing: border-box; cursor: pointer; color: var(--cs-blau); font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; flex: none; padding: 4px 2px; min-height: 28px; }
.cs-anlagen .link-knopf:focus-visible { box-shadow: var(--cs-fokus); border-radius: 4px; }
@media (max-width: 960px) {
  .cs-anlagen .finder__layout { grid-template-columns: minmax(0, 1fr); }
  .cs-anlagen .finder__seite { border-left: 0; border-top: 1px solid var(--cs-linie); }
}
.cs-anlagen .frage { border: 0; padding: 0; margin: 0; min-width: 0; }
.cs-anlagen .frage__titel { padding: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); font-weight: 600; color: var(--cs-ueberschrift); letter-spacing: -.02em; line-height: 1.25; margin-bottom: 8px; }
.cs-anlagen .frage__hilfe { font-size: 14.5px; max-width: 64ch; margin-bottom: 4px; }
.cs-anlagen .frage__fuss { font-size: 13.5px; color: var(--cs-text-leise); margin-top: 14px; max-width: 64ch; }
.cs-anlagen .antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 20px; }
.cs-anlagen .antworten--eine { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.cs-anlagen .antwort { position: relative; display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--cs-linie); border-radius: 14px; background: #fff; padding: 16px 16px 16px 14px; cursor: pointer; min-height: 64px; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.cs-anlagen .antwort:hover { border-color: #9DBBD6; background: #FAFCFE; }
.cs-anlagen .antwort input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-anlagen .antwort__punkt { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #9AA6B2; margin-top: 2px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cs-anlagen .antwort--mehr .antwort__punkt { border-radius: 6px; }
.cs-anlagen .antwort input:checked + .antwort__punkt { border-color: var(--cs-blau); background: var(--cs-blau); box-shadow: inset 0 0 0 4px #fff; }
.cs-anlagen .antwort--mehr input:checked + .antwort__punkt { box-shadow: none; }
.cs-anlagen .antwort--mehr input:checked + .antwort__punkt::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.cs-anlagen .antwort:has(input:checked) { border-color: var(--cs-blau); background: var(--cs-blau-hell); }
.cs-anlagen .antwort:has(input:focus-visible) { box-shadow: var(--cs-fokus); }
.cs-anlagen .antwort__text { display: grid; gap: 2px; min-width: 0; color: var(--cs-ueberschrift); font-weight: 500; line-height: 1.4; }
.cs-anlagen .antwort__text small { color: var(--cs-text); font-weight: 400; font-size: 13px; }
.cs-anlagen .plakette--emp { display: inline-block; justify-self: start; font-size: 11.5px; font-weight: 600; background: var(--cs-ok-bg); color: var(--cs-ok); border-radius: 999px; padding: 2px 9px; margin-top: 2px; }
.cs-anlagen .antwort-unbekannt { margin-top: 12px; }
.cs-anlagen .erkennung { margin-top: 14px; background: var(--cs-flaeche); border-radius: 12px; padding: 12px 16px; font-size: 14px; display: flex; gap: 12px; align-items: center; max-width: 640px; }
.cs-anlagen .erkennung svg { width: 74px; height: 56px; flex: none; }
.cs-anlagen .feld-zeile { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-top: 20px; }
.cs-anlagen .feld { display: grid; gap: 6px; min-width: 0; }
.cs-anlagen .feld label, .cs-anlagen .feld__label { font-size: 13.5px; font-weight: 500; color: var(--cs-ueberschrift); }
.cs-anlagen .feld input[type="number"], .cs-anlagen .feld input[type="text"], .cs-anlagen .feld select, .cs-anlagen .feld textarea {
  width: 100%; min-height: 52px; border: 2px solid #C9D3DE; border-radius: 12px; padding: 12px 14px; font: 500 17px/1.3 var(--cs-sans); color: var(--cs-ueberschrift); background: #fff; }
.cs-anlagen .feld input[type="number"] { width: 170px; max-width: 100%; }
.cs-anlagen .feld textarea { min-height: 110px; font-size: 16px; font-weight: 400; }
.cs-anlagen .feld input:focus, .cs-anlagen .feld select:focus, .cs-anlagen .feld textarea:focus { outline: none; border-color: var(--cs-blau); box-shadow: 0 0 0 4px rgba(34, 112, 174, .2); }
.cs-anlagen .feld input[aria-invalid="true"] { border-color: #B42318; }
.cs-anlagen .feld__einheit { align-self: center; color: var(--cs-text-leise); padding-bottom: 14px; }
.cs-anlagen .schnellwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cs-anlagen .schnellwahl .chip { padding: 9px 16px; }
.cs-anlagen .fehler { margin-top: 14px; color: #B42318; font-weight: 500; font-size: 14.5px; display: flex; gap: 8px; align-items: flex-start; }
.cs-anlagen .fehler[hidden] { display: none; }
.cs-anlagen .medien-gitter { display: grid; gap: 10px; margin-top: 20px; max-width: 560px; }
.cs-anlagen .medien-gitter .feld { grid-template-columns: 140px minmax(0, 1fr); align-items: center; }
.cs-anlagen .medien-gitter select { min-height: 46px; font-size: 15px; }
.cs-anlagen .finder__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cs-linie); }
.cs-anlagen .finder__nav-rechts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .cs-anlagen .finder__nav { position: sticky; bottom: 0; background: #fff; margin-inline: -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px rgba(0, 0, 0, .08); z-index: 5; }
  .cs-anlagen .finder__nav .btn { flex: 1 1 auto; }
  .cs-anlagen .finder__nav-rechts { flex: 1; }
  .cs-anlagen .finder__nav-rechts .btn { flex: 1; }
  .cs-anlagen .medien-gitter .feld { grid-template-columns: minmax(0, 1fr); }
}

/* Ergebnis */
.cs-anlagen .ergebnis__titel { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
.cs-anlagen .ergebnis__lede { margin-top: 10px; max-width: 70ch; }
.cs-anlagen .banner { margin-top: 18px; border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.cs-anlagen .banner--frei { background: var(--cs-blau-hell); color: var(--cs-blau-tief); }
.cs-anlagen .banner--sim { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; font-weight: 500; }
.cs-anlagen .angaben-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cs-anlagen .angabe-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-flaeche); border: 1px solid var(--cs-linie); border-radius: 999px; padding: 4px 6px 4px 14px; font-size: 13px; color: var(--cs-ueberschrift); }
.cs-anlagen .treffer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; margin-top: 26px; align-items: stretch; }
.cs-anlagen .treffer-karte { background: #fff; border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); display: flex; flex-direction: column; overflow: hidden; }
.cs-anlagen .treffer-karte .karte__bild { aspect-ratio: 16 / 10; }
.cs-anlagen .treffer-karte .karte__bild .symbol-gross { width: 96px; height: 96px; opacity: .85; }
.cs-anlagen .treffer-karte .karte__inhalt { gap: 12px; }
.cs-anlagen .klasse { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; line-height: 1.25; align-self: flex-start; }
.cs-anlagen .klasse .ic { width: 16px; height: 16px; flex: none; }
.cs-anlagen .klasse--A { background: var(--cs-ok-bg); color: var(--cs-ok); }
.cs-anlagen .klasse--B { background: var(--cs-blau-hell); color: var(--cs-blau-tief); }
.cs-anlagen .klasse--Bx { background: var(--cs-grau-bg); color: #3F454D; }
.cs-anlagen .klasse--C { background: var(--cs-nein-bg); color: var(--cs-nein); }
.cs-anlagen .klasse-sim-marke { display: block; font-size: 11px; font-weight: 600; color: #5A3200; background: #FFF1D6; padding: 3px 9px; border-radius: 6px; align-self: flex-start; }
.cs-anlagen .liste-kopf { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-text-leise); margin-bottom: 6px; }
.cs-anlagen .liste-punkte { display: grid; gap: 7px; font-size: 14px; }
.cs-anlagen .liste-punkte li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.cs-anlagen .liste-punkte .ic { width: 16px; height: 16px; margin-top: .3em; }
.cs-anlagen .liste-punkte--ok .ic { color: var(--cs-ok); }
.cs-anlagen .liste-punkte--pruef .ic { color: var(--cs-blau); }
.cs-anlagen .warnbox { background: var(--cs-warn-bg); color: #5A3200; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; display: flex; gap: 8px; align-items: flex-start; }
.cs-anlagen .warnbox .ic { width: 18px; height: 18px; margin-top: .1em; color: var(--cs-warn); }
.cs-anlagen .ausf-zeile { border-top: 1px solid var(--cs-linie); padding-top: 10px; display: grid; gap: 6px; font-size: 14px; }
.cs-anlagen .treffer-karte .karte__aktionen { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--cs-linie); }
.cs-anlagen .eingeklappt { margin-top: 22px; border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); background: #fff; }
.cs-anlagen .eingeklappt summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--cs-ueberschrift); min-height: 52px; display: flex; align-items: center; }
.cs-anlagen .eingeklappt__inhalt { padding: 0 20px 18px; display: grid; gap: 12px; }
.cs-anlagen .kompakt { border-top: 1px solid var(--cs-linie); padding-top: 12px; display: grid; gap: 6px; font-size: 14px; }
.cs-anlagen .kompakt strong { color: var(--cs-ueberschrift); }
.cs-anlagen .block-offen { margin-top: 26px; background: var(--cs-flaeche); border-radius: var(--cs-radius); padding: 20px 22px; }
.cs-anlagen .block-offen h3 { font-size: 1.05rem; margin-bottom: 10px; }
.cs-anlagen .alternativen { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cs-anlagen .alt-karte { border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); padding: 18px 20px; display: grid; gap: 8px; align-content: start; background: #fff; font-size: 14.5px; }
.cs-anlagen .alt-karte h3 { font-size: 1.05rem; }
.cs-anlagen .ergebnis__aktionen { margin-top: 30px; padding: 24px; border-radius: var(--cs-radius); background: var(--cs-blau); color: #fff; display: grid; gap: 14px; }
.cs-anlagen .ergebnis__aktionen h3 { color: #fff; }
.cs-anlagen .ergebnis__aktionen .reihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cs-anlagen .festsatz { margin-top: 20px; font-size: 13.5px; color: var(--cs-text-leise); max-width: 78ch; border-left: 3px solid var(--cs-linie); padding-left: 14px; }
.cs-anlagen .ergaenzung { margin-top: 18px; border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); background: #fff; }
.cs-anlagen .ergaenzung summary { cursor: pointer; padding: 14px 20px; font-weight: 600; color: var(--cs-ueberschrift); min-height: 48px; display: flex; align-items: center; }
.cs-anlagen .ergaenzung__inhalt { padding: 0 20px 20px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cs-anlagen .ergaenzung .feld input[type="text"], .cs-anlagen .ergaenzung .feld select { min-height: 46px; font-size: 15px; }

.cs-anlagen .protokoll { margin-top: 6px; font-size: 12.5px; }
.cs-anlagen .protokoll summary { cursor: pointer; color: var(--cs-warn); font-weight: 600; min-height: 30px; }
.cs-anlagen .protokoll ul { display: grid; gap: 5px; margin-top: 6px; }
.cs-anlagen .protokoll li { background: #FFFBF2; border: 1px solid #F3E2BB; border-radius: 6px; padding: 5px 8px; color: #4A3200; line-height: 1.4; }
.cs-anlagen .protokoll b { font-weight: 600; }

/* Dialog */
.anfrage-dialog { border: 0; padding: 0; border-radius: 20px; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: var(--cs-text); background: #fff; font-size: 15px; line-height: 1.55; }
.anfrage-dialog::backdrop { background: rgba(10, 30, 50, .6); }
.anfrage-dialog .dlg__kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 22px 24px 8px; }
.anfrage-dialog h2 { margin: 0; font-size: 1.35rem; color: var(--cs-ueberschrift); font-weight: 600; letter-spacing: -.02em; }
.anfrage-dialog .dlg__zu { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--cs-text); flex: none; }
.anfrage-dialog .dlg__zu:hover { background: var(--cs-flaeche); }
.anfrage-dialog .dlg__zu:focus-visible { box-shadow: var(--cs-fokus); }
.anfrage-dialog .dlg__inhalt { padding: 6px 24px 24px; display: grid; gap: 14px; overflow: auto; max-height: calc(100dvh - 130px); }
.anfrage-dialog .dlg__hinweis { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; }
.anfrage-dialog textarea { width: 100%; min-height: 240px; border: 2px solid #C9D3DE; border-radius: 12px; padding: 14px; font: 400 13.5px/1.55 ui-monospace, Consolas, "Courier New", monospace; color: var(--cs-ueberschrift); background: var(--cs-flaeche); resize: vertical; }
.anfrage-dialog .dlg__aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.anfrage-dialog .dlg__feld { display: grid; gap: 6px; }
.anfrage-dialog .dlg__feld label { font-size: 13.5px; font-weight: 500; color: var(--cs-ueberschrift); }
.anfrage-dialog .dlg__status { font-size: 14px; color: var(--cs-ok); font-weight: 500; min-height: 1.4em; }
.anfrage-dialog .dlg__mapping { font-size: 13px; color: var(--cs-text-leise); }
.anfrage-dialog .dlg__mapping dt { font-weight: 600; color: var(--cs-ueberschrift); margin-top: 6px; }
.anfrage-dialog .dlg__mapping dd { margin: 0; }

/* Seitenleiste zeigt die Angaben bereits — Chip-Leiste nur auf schmalen Bildschirmen */
@media (min-width: 961px) { .cs-anlagen .angaben-leiste { display: none; } }

/* ============================================================ Version 2: Ergebnisseite, Karten, Anfrageformular */
.cs-anlagen .finder__layout--ergebnis { grid-template-columns: minmax(0, 1fr); }
.cs-anlagen .link-knopf--gross { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 4px; min-height: 40px; }
.cs-anlagen .link-knopf--gross:hover { text-decoration: underline; }
.cs-anlagen .link-knopf .ic { width: 1em; height: 1em; }
.cs-anlagen .ergebnis { position: relative; }
.cs-anlagen .ergebnis--sim { outline: 3px solid #FDB022; outline-offset: 12px; border-radius: 6px; }
.cs-anlagen .sim-band { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.cs-anlagen .ergebnis__kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.cs-anlagen .ergebnis__kontakt { font-size: 14px; color: var(--cs-text-leise); }
.cs-anlagen .ergebnis__titel { margin-bottom: 4px; }
.cs-anlagen .erg-gruppe { margin-top: 38px; }
.cs-anlagen .erg-gruppe__kopf h4 { font-size: 1.3rem; }
.cs-anlagen .erg-gruppe__kopf p { margin-top: 6px; max-width: 70ch; font-size: 15px; }
.cs-anlagen .erg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: stretch; }
.cs-anlagen .erg-grid--nach { margin-top: 26px; }
@media (min-width: 640px) { .cs-anlagen .erg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-anlagen .erg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-anlagen .erg-grid--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-anlagen .erg-karte { background: #fff; border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.cs-anlagen .erg-karte:hover { box-shadow: var(--cs-schatten-hoch); border-color: #C9DCEC; }
.cs-anlagen .erg-karte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--cs-flaeche); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cs-anlagen .erg-karte__bild img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.cs-anlagen .erg-karte__bild.blend img { mix-blend-mode: multiply; }
.cs-anlagen .erg-karte__bild > .symbol-gross { width: 84px; height: 84px; fill: none; stroke: var(--cs-blau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.cs-anlagen .verfahren-label { position: absolute; left: 12px; top: 12px; z-index: 2; background: #fff; color: var(--cs-blau-tief); border: 1px solid var(--cs-linie); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.cs-anlagen .erg-karte__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-anlagen .erg-karte__name { font-size: 1.25rem; letter-spacing: -.02em; }
.cs-anlagen .erg-karte__ein { font-size: 14px; color: var(--cs-text-leise); margin-top: -4px; line-height: 1.45; }
.cs-anlagen .chips--klein li { font-size: 12px; padding: 3px 10px; }
.cs-anlagen .erg-karte__warum { padding-top: 12px; border-top: 1px solid var(--cs-linie); display: grid; gap: 8px; }
.cs-anlagen .erg-karte__warum-titel { font-size: 13px; font-weight: 600; color: var(--cs-blau-tief); letter-spacing: .01em; }
.cs-anlagen .erg-karte__gruende { display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.cs-anlagen .erg-karte__gruende li { display: flex; gap: 9px; align-items: flex-start; }
.cs-anlagen .erg-karte__gruende .ic { width: 16px; height: 16px; margin-top: .28em; color: var(--cs-ok); }
.cs-anlagen .erg-karte__neutral { font-size: 14px; color: var(--cs-text); }
.cs-anlagen .erg-karte__hinweis { font-size: 13px; color: var(--cs-text-leise); border-left: 3px solid #D5DEE8; padding-left: 10px; line-height: 1.45; }
.cs-anlagen .erg-karte__aktion { margin-top: auto; padding-top: 14px; display: grid; gap: 10px; justify-items: center; }
.cs-anlagen .btn--block { width: 100%; }
.cs-anlagen .textlink--leise { font-size: 13.5px; font-weight: 400; border-bottom: 0; color: var(--cs-text-leise); text-decoration: underline; text-underline-offset: 3px; }
.cs-anlagen .textlink--leise:hover { color: var(--cs-blau); }
.cs-anlagen .erg-karte--kompakt { flex-direction: row; }
.cs-anlagen .erg-karte--kompakt .erg-karte__bild { width: 38%; max-width: 168px; min-width: 112px; aspect-ratio: auto; flex: none; }
.cs-anlagen .erg-karte--kompakt .erg-karte__bild img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.cs-anlagen .erg-karte--kompakt .verfahren-label { left: 8px; top: 8px; font-size: 10.5px; padding: 2px 8px; }
.cs-anlagen .erg-karte--kompakt .erg-karte__inhalt { padding: 16px 18px; gap: 8px; min-width: 0; }
.cs-anlagen .erg-karte--kompakt .erg-karte__name { font-size: 1.05rem; }
.cs-anlagen .erg-karte__kurzgrund { font-size: 13.5px; line-height: 1.5; }
.cs-anlagen .erg-karte__aktion--zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-top: 8px; }
.cs-anlagen .umstellung-hinweis { display: flex; gap: 8px; align-items: flex-start; background: var(--cs-blau-hell); color: var(--cs-blau-tief); border-radius: 10px; padding: 7px 11px; font-size: 13px; font-weight: 500; line-height: 1.4; }
.cs-anlagen .umstellung-hinweis .ic { width: 16px; height: 16px; margin-top: 1px; }
@media (max-width: 479px) { .cs-anlagen .erg-karte--kompakt { flex-direction: column; } .cs-anlagen .erg-karte--kompakt .erg-karte__bild { width: 100%; max-width: none; aspect-ratio: 16 / 9; } }

.cs-anlagen .erg-hilfe { margin-top: 18px; background: linear-gradient(135deg, #2270AE 0%, #1B5A8C 100%); color: rgba(255, 255, 255, .95); border-radius: 20px; padding: clamp(24px, 4vw, 44px); display: flex; gap: clamp(16px, 3vw, 32px); align-items: flex-start; }
.cs-anlagen .erg-hilfe--ruhig { background: var(--cs-flaeche); color: var(--cs-text); border: 1px solid var(--cs-linie); }
.cs-anlagen .erg-hilfe__ic { flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; }
.cs-anlagen .erg-hilfe--ruhig .erg-hilfe__ic { background: var(--cs-blau-hell); color: var(--cs-blau); }
.cs-anlagen .erg-hilfe__ic .ic { width: 28px; height: 28px; }
.cs-anlagen .erg-hilfe__text h3 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.cs-anlagen .erg-hilfe--ruhig .erg-hilfe__text h3 { color: var(--cs-ueberschrift); }
.cs-anlagen .erg-hilfe__text p { margin-top: 10px; font-size: 1.05rem; max-width: 60ch; }
.cs-anlagen .erg-hilfe__klein { font-size: .95rem !important; opacity: .92; }
.cs-anlagen .erg-hilfe__aktionen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 560px) { .cs-anlagen .erg-hilfe { flex-direction: column; } .cs-anlagen .erg-hilfe__aktionen .btn { width: 100%; } }
.cs-anlagen .richtungen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; }
@media (min-width: 768px) { .cs-anlagen .richtungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-anlagen .richtung { background: #fff; border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); padding: 22px; display: grid; gap: 12px; align-content: start; }
.cs-anlagen .richtung__kopf { display: flex; align-items: center; gap: 12px; }
.cs-anlagen .richtung__kopf h5 { font-size: 1.15rem; }
.cs-anlagen .richtung > p { font-size: 14px; }
.cs-anlagen .richtung__modelle { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cs-linie); font-size: 14px; font-weight: 500; color: var(--cs-ueberschrift); }
.cs-anlagen .richtung__modelle li { display: flex; align-items: center; gap: 10px; }
.cs-anlagen .richtung .mini { width: 40px; height: 40px; margin-left: 0; border-radius: 10px; background: var(--cs-flaeche); box-shadow: none; border: 1px solid var(--cs-linie); }
.cs-anlagen .richtung .mini img { mix-blend-mode: multiply; }
.cs-anlagen .richtungen__link { margin-top: 20px; }

.cs-anlagen .abschluss { margin-top: 40px; background: linear-gradient(135deg, #2270AE 0%, #1B5A8C 100%); color: rgba(255, 255, 255, .95); border-radius: 20px; padding: clamp(24px, 4vw, 40px); display: flex; gap: 20px 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cs-anlagen .abschluss h4 { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.cs-anlagen .abschluss p { margin-top: 8px; max-width: 58ch; font-size: 1.02rem; }
.cs-anlagen .abschluss__aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) { .cs-anlagen .abschluss__aktionen, .cs-anlagen .abschluss__aktionen .btn { width: 100%; } }
.cs-anlagen .alternativen-leise { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--cs-linie); }
.cs-anlagen .alternativen-leise h4 { font-size: 1.05rem; }
.cs-anlagen .alternativen-leise__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; margin-top: 14px; }
@media (min-width: 768px) { .cs-anlagen .alternativen-leise__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-anlagen .alternativen-leise__liste li { display: grid; gap: 4px; align-content: start; font-size: 14px; }
.cs-anlagen .alternativen-leise__liste strong { color: var(--cs-ueberschrift); }
.cs-anlagen .alternativen-leise__liste .textlink, .cs-anlagen .alternativen-leise__liste .textlink--btn { justify-self: start; font-size: 14px; }
.cs-anlagen .leise { margin-top: 22px; font-size: 13.5px; color: var(--cs-text-leise); }
.cs-anlagen .leise summary { cursor: pointer; min-height: 32px; padding: 6px 0; }
.cs-anlagen .leise ul { display: grid; gap: 8px; padding: 4px 0 0 0; }
.cs-anlagen .finder__nav--ruhig { border-top: 0; margin-top: 10px; padding-top: 0; }
@media (max-width: 520px) { .cs-anlagen .finder__nav--ruhig { position: static; box-shadow: none; margin-inline: 0; padding: 0; } }
.cs-anlagen .festsatz { margin-top: 30px; }

/* Anfrageformular (eingeblendet) */
.anfrage-dialog { width: min(720px, calc(100vw - 24px)); }
.anfrage-dialog .kicker { color: var(--cs-blau); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }
.anfrage-dialog .dlg__sub { margin: 6px 0 0; font-size: 14.5px; }
.anfrage-dialog .dlg__demo { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; border-radius: 10px; padding: 9px 14px; font-size: 13.5px; font-weight: 500; margin: 0; }
.anfrage-dialog .dlg__demo--gross { font-size: 14.5px; padding: 13px 16px; }
.anfrage-dialog .dlg__uebernahme { display: flex; gap: 12px; align-items: flex-start; background: var(--cs-blau-hell); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.45; color: var(--cs-blau-tief); }
.anfrage-dialog .dlg__uebernahme .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--cs-ok); }
.anfrage-dialog .dlg__uebernahme strong { display: block; color: var(--cs-ueberschrift); font-weight: 600; }
.anfrage-dialog .dlg__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; margin-bottom: 14px; }
@media (min-width: 600px) { .anfrage-dialog .dlg__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.anfrage-dialog .dlg__feld input[type="text"], .anfrage-dialog .dlg__feld input[type="email"], .anfrage-dialog .dlg__feld input[type="tel"] { width: 100%; min-height: 50px; border: 2px solid #C9D3DE; border-radius: 12px; padding: 10px 14px; font: 500 16px/1.3 var(--cs-sans); color: var(--cs-ueberschrift); background: #fff; }
.anfrage-dialog .dlg__feld textarea { min-height: 96px; font: 400 15px/1.5 var(--cs-sans); background: #fff; border: 2px solid #C9D3DE; border-radius: 12px; padding: 12px 14px; width: 100%; }
.anfrage-dialog .dlg__feld input:focus, .anfrage-dialog .dlg__feld textarea:focus { outline: none; border-color: var(--cs-blau); box-shadow: 0 0 0 4px rgba(34, 112, 174, .2); }
.anfrage-dialog .dlg__feld--fehler input, .anfrage-dialog .dlg__feld--fehler textarea { border-color: #B42318; }
.anfrage-dialog .pflicht { color: #B42318; }
.anfrage-dialog .optional { color: var(--cs-text-leise); font-weight: 400; font-size: 12.5px; }
.anfrage-dialog .feld-fehler { margin: 0; color: #B42318; font-size: 13.5px; font-weight: 500; }
.anfrage-dialog .dlg__datenschutz { font-size: 12.5px; color: var(--cs-text-leise); margin: 12px 0 16px; }
.anfrage-dialog .dlg__struktur { font-size: 13px; }
.anfrage-dialog .dlg__struktur summary { cursor: pointer; color: var(--cs-blau); font-weight: 500; min-height: 32px; padding: 6px 0; }
.anfrage-dialog .dlg__struktur pre { background: var(--cs-flaeche); border-radius: 10px; padding: 12px; max-height: 240px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.anfrage-dialog .hinweis-klein { font-size: 13px; color: var(--cs-text-leise); margin: 0; }
.anfrage-dialog .btn--gross { min-height: 52px; padding: 14px 26px; font-size: 16px; font-weight: 600; }
.anfrage-dialog .btn--text { background: transparent; color: var(--cs-blau); }
.anfrage-dialog .btn--klein { min-height: 40px; padding: 8px 16px; font-size: 13.5px; }
@media (max-width: 520px) { .anfrage-dialog .dlg__aktionen .btn { width: 100%; } }

/* Feinschliff V2 */
.cs-anlagen h5 { margin: 0; color: var(--cs-ueberschrift); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.cs-anlagen .ergebnis__titel:focus, .cs-anlagen .ergebnis__titel:focus-visible, .cs-anlagen .frage__titel:focus, .cs-anlagen .frage__titel:focus-visible, .cs-anlagen #frage-titel:focus, .cs-anlagen #frage-titel:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.cs-anlagen .erg-hilfe__text h3:focus, .cs-anlagen .erg-hilfe__text h3:focus-visible { outline: none; box-shadow: none; }

/* Verfahrensfilter (V2) */
@media (min-width: 900px) { .cs-anlagen .filter { flex-wrap: wrap; overflow: visible; } }
.cs-anlagen .chip { font-size: 14.5px; padding: 11px 20px; }
.cs-anlagen .chip[aria-pressed="true"] { box-shadow: 0 6px 16px rgba(34, 112, 174, .28); }

/* ------------------------------------------------------------ Fokusmodus des Anlagenfinders (Dialog) */
html.finder-fokus { overflow: hidden; scrollbar-gutter: stable; }
.cs-anlagen .finder__fortsetzen { font-size: 14px; color: var(--cs-text-leise); }
.cs-anlagen .finder-dialog { padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--cs-text); width: min(1080px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); min-height: min(620px, calc(100dvh - 48px)); margin: auto; box-shadow: 0 30px 80px rgba(8, 24, 40, .45); overflow: hidden; }
.cs-anlagen .finder-dialog[open] { display: flex; flex-direction: column; animation: fd-ein .26s ease-out; }
.cs-anlagen .finder-dialog::backdrop { background: rgba(8, 24, 40, .5); animation: fd-bd .26s ease-out; }
@keyframes fd-ein { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fd-bd { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-anlagen .finder-dialog[open], .cs-anlagen .finder-dialog::backdrop { animation: none; } }
.cs-anlagen .finder-dialog__kopf { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px 12px 32px; border-bottom: 1px solid var(--cs-linie); background: var(--cs-flaeche); }
.cs-anlagen .finder-dialog__titel { margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--cs-ueberschrift); }
.cs-anlagen .finder-dialog__zu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--cs-linie); border-radius: 12px; background: #fff; color: var(--cs-ueberschrift); font: 500 14px/1 var(--cs-sans); cursor: pointer; transition: border-color .2s, background-color .2s; }
.cs-anlagen .finder-dialog__zu:hover { border-color: var(--cs-blau); background: var(--cs-blau-hell); }
.cs-anlagen .finder-dialog__zu .ic { width: 18px; height: 18px; }
.cs-anlagen .finder-dialog__koerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cs-anlagen .finder-dialog .finder__app { display: block; }
.cs-anlagen .finder-dialog .finder__app[hidden] { display: none; }
.cs-anlagen .finder-dialog .finder__kopf { justify-content: flex-end; padding: 14px 40px 0; border: 0; background: transparent; }
.cs-anlagen .finder-dialog .finder__kopf-name { display: none; }
.cs-anlagen .finder-dialog .finder__kopf:not(:has([data-modus])):not(:has(.modus-etikett)) { display: none; }
.cs-anlagen .finder-dialog .fortschritt { position: sticky; top: 0; z-index: 4; background: #fff; padding: 18px 40px 12px; }
.cs-anlagen .finder-dialog .fortschritt__text { font-size: 14px; font-weight: 500; }
.cs-anlagen .finder-dialog .fortschritt__balken { height: 10px; }
.cs-anlagen .finder-dialog .finder__layout { grid-template-columns: minmax(0, 1fr) 280px; }
.cs-anlagen .finder-dialog .finder__haupt { padding: 22px 40px 0; }
.cs-anlagen .finder-dialog .frage__titel { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem); margin-bottom: 10px; }
.cs-anlagen .finder-dialog .frage__hilfe { font-size: 15.5px; }
.cs-anlagen .finder-dialog .antworten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 26px; }
.cs-anlagen .finder-dialog .antwort { padding: 20px 20px 20px 18px; min-height: 76px; font-size: 1.04rem; }
.cs-anlagen .finder-dialog .antwort__punkt { width: 26px; height: 26px; margin-top: 0; }
.cs-anlagen .finder-dialog .finder__nav { position: sticky; bottom: 0; z-index: 5; background: #fff; margin: 28px 0 0; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 18px -12px rgba(8, 24, 40, .18); }
.cs-anlagen .finder-dialog .finder__nav .btn { min-height: 50px; }
.cs-anlagen .finder-dialog .finder__seite { padding: 22px 20px; align-self: start; background: var(--cs-flaeche); border-radius: 14px; margin: 22px 40px 28px 0; border: 1px solid var(--cs-linie); }
.cs-anlagen .finder-dialog .finder__layout > .finder__haupt { grid-column: 1; }
.cs-anlagen .finder-dialog .frage__titel:focus, .cs-anlagen .finder-dialog .frage__titel:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 960px) {
  .cs-anlagen .finder-dialog .finder__layout { grid-template-columns: minmax(0, 1fr); }
  .cs-anlagen .finder-dialog .finder__seite { display: none; }
}
@media (max-width: 700px) {
  .cs-anlagen .finder-dialog { width: 100vw; height: 100dvh; max-height: none; min-height: 0; border-radius: 0; margin: 0; }
  .cs-anlagen .finder-dialog__kopf { padding: 8px 12px 8px 18px; }
  .cs-anlagen .finder-dialog .finder__kopf { padding: 12px 18px 0; }
  .cs-anlagen .finder-dialog .fortschritt { padding: 14px 18px 10px; }
  .cs-anlagen .finder-dialog .finder__haupt { padding: 14px 18px 0; }
  .cs-anlagen .finder-dialog .antwort { padding: 18px 16px 18px 14px; }
  .cs-anlagen .finder-dialog .finder__nav { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 700px) {
  .cs-anlagen .finder-dialog .finder__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; align-items: center; }
  .cs-anlagen .finder-dialog .finder__nav-rechts { display: contents; }
  .cs-anlagen .finder-dialog #knopf-zurueck { order: 1; }
  .cs-anlagen .finder-dialog #knopf-weiter { order: 2; }
  .cs-anlagen .finder-dialog #knopf-neu { order: 3; grid-column: 1 / -1; justify-self: center; min-height: 40px; }
}

/* ------------------------------------------------------------ Zubehör (V2): ruhiger Katalog */
.cs-anlagen .zubehoer-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px; }
.cs-anlagen .zubehoer-karte { flex: 0 0 calc((100% - 72px) / 4); min-width: 0; border: 1px solid var(--cs-linie); box-shadow: none; }
.cs-anlagen .zubehoer-karte:hover { border-color: #B6CDE2; box-shadow: 0 8px 22px rgba(20, 56, 82, .10); }
.cs-anlagen .zubehoer-karte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--cs-flaeche); }
.cs-anlagen .zubehoer-karte__bild img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; }
.cs-anlagen .zubehoer-karte__bild.blend img { mix-blend-mode: multiply; }
.cs-anlagen .zubehoer-karte__inhalt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding: 20px 22px 22px; overflow-wrap: anywhere; }
.cs-anlagen .zubehoer-karte__titel { font-size: 1.02rem; letter-spacing: -.01em; hyphens: auto; -webkit-hyphens: auto; }
.cs-anlagen .zubehoer-karte__text { font-size: 14.5px; line-height: 1.55; }
.cs-anlagen .zubehoer-karte__aktion { margin-top: auto; padding-top: 12px; }
@media (max-width: 1100px) { .cs-anlagen .zubehoer-karte { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 560px) {
  .cs-anlagen .zubehoer-grid { gap: 14px; margin-top: 28px; }
  .cs-anlagen .zubehoer-karte { flex-basis: 100%; flex-direction: row; }
  .cs-anlagen .zubehoer-karte__bild { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; }
  .cs-anlagen .zubehoer-karte__bild img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
  .cs-anlagen .zubehoer-karte__inhalt { padding: 16px 16px 16px 18px; }
}

/* ------------------------------------------------------------ Dezente Bewegung (nur opacity/transform) */
.cs-anlagen .karte, .cs-anlagen .zubehoer-karte, .cs-anlagen .erg-karte { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .cs-anlagen [data-reveal] { opacity: 0; transform: translateY(12px); }
  html.js-reveal .cs-anlagen [data-reveal].ist-sichtbar { opacity: 1; transform: none; transition: opacity .38s ease-out var(--rd, 0ms), transform .38s ease-out var(--rd, 0ms); }
  @keyframes karte-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .cs-anlagen .karte.karte-ein { animation: karte-ein .28s ease-out backwards; }
  @keyframes frage-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .cs-anlagen .finder-dialog .frage { animation: frage-ein .24s ease-out backwards; }
  .cs-anlagen .ergebnis { animation: frage-ein .32s ease-out backwards; }
  .cs-anlagen .fehler:not([hidden]) { animation: frage-ein .18s ease-out backwards; }
  .anfrage-dialog[open] { animation: fd-ein .24s ease-out; }
  .anfrage-dialog[open]::backdrop { animation: fd-bd .24s ease-out; }
  .anfrage-dialog.is-closing { animation: fd-aus .16s ease-in forwards; }
  .anfrage-dialog.is-closing::backdrop { animation: fd-bd-aus .16s ease-in forwards; }
  @keyframes fd-aus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.99); } }
  @keyframes fd-bd-aus { from { opacity: 1; } to { opacity: 0; } }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cs-anlagen .karte:hover, .cs-anlagen .zubehoer-karte:hover, .cs-anlagen .erg-karte:hover { transform: translateY(-2px); }
}

/* Feinschliff: Smartphone-Hero-Kacheln, Kompaktkarten auf dem Tablet */
@media (max-width: 450px) {
  .cs-anlagen .hero__verfahren { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cs-anlagen .hero__verfahren a { padding: 9px 14px; }
}
@media (max-width: 560px) { .cs-anlagen .hero__verf-name { hyphens: manual; overflow-wrap: normal; } }
@media (min-width: 640px) and (max-width: 1023px) { .cs-anlagen .erg-grid--kompakt { grid-template-columns: minmax(0, 1fr); } }
.cs-anlagen .erg-karte__name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ============================================================ Anlagenfinder Version 3: ein Dialog für den ganzen Prozess */
.cs-anlagen .nur-lesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-anlagen .finder-dialog { --fd-w: 1040px; --fd-h: min(740px, calc(100dvh - 32px)); --fd-max: calc(100vw - 48px);
  width: min(var(--fd-w), var(--fd-max)); height: var(--fd-h); max-height: calc(100dvh - 32px); min-height: 0; border-radius: 18px; }
.cs-anlagen .finder-dialog:is([data-ansicht="evaluating"], [data-ansicht="results"], [data-ansicht="inquiry"], [data-ansicht="inquiryPreview"]) { --fd-w: 1280px; --fd-h: min(920px, calc(100dvh - 32px)); }
.cs-anlagen .finder-dialog[data-modus="simulation"] { border-top: 5px solid #FDB022; }
@media (prefers-reduced-motion: no-preference) { .cs-anlagen .finder-dialog { transition: width .32s ease, height .32s ease; } }
.cs-anlagen .finder-dialog__kopf { gap: 16px; padding: 10px 14px 10px 28px; min-height: 64px; }
.cs-anlagen .finder-dialog__marke { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-anlagen .finder-dialog__werkzeuge { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; }
.cs-anlagen .modus-schalter--klein { min-width: 0; padding: 3px; gap: 3px; }
.cs-anlagen .modus-schalter--klein button { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
.cs-anlagen .finder-dialog__aendern { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; min-height: 44px; padding: 4px 8px; }
.cs-anlagen .finder-dialog__aendern .ic { width: 16px; height: 16px; }
.cs-anlagen .finder-dialog__koerper { container-type: inline-size; container-name: fdk; min-width: 0; }
.cs-anlagen .finder-ansicht--fragen { max-width: 1040px; margin-inline: auto; }
.cs-anlagen .finder-ansicht--ergebnis { padding: 30px clamp(18px, 3.4vw, 48px) 36px; }
.cs-anlagen .finder-ansicht--anfrage { padding: 26px clamp(18px, 3.4vw, 48px) 40px; }
.cs-anlagen .anfrage-eingebettet { max-width: 820px; margin-inline: auto; }
.cs-anlagen .anfrage-eingebettet .dlg__kopf--eingebettet { display: grid; gap: 14px; padding: 0 0 8px; }
.cs-anlagen .anfrage-eingebettet .dlg__inhalt { padding: 6px 0 0; display: grid; gap: 14px; overflow: visible; max-height: none; }
.cs-anlagen .anfrage-eingebettet h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.cs-anlagen .anfrage-eingebettet .link-knopf { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; min-height: 40px; }
.cs-anlagen .anfrage-eingebettet .link-knopf .ic { width: 16px; height: 16px; }
.cs-anlagen .anfrage-eingebettet textarea#dlg-text { min-height: 220px; }
.cs-anlagen .anfrage-eingebettet h2:focus, .cs-anlagen .anfrage-eingebettet h2:focus-visible { outline: none; box-shadow: none; }

/* Auswertung: ruhiger Übergang, nur transform/opacity */
.cs-anlagen .finder-ansicht--auswertung { height: 100%; min-height: 320px; display: grid; place-items: center; }
.cs-anlagen .auswertung { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 32px 24px; max-width: 560px; }
.cs-anlagen .auswertung h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.cs-anlagen .auswertung h3:focus { outline: none; }
.cs-anlagen .auswertung p { color: var(--cs-text); }
.cs-anlagen .auswertung__ring { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--cs-blau-hell); border-top-color: var(--cs-blau); margin-bottom: 8px; animation: fd-dreh .9s linear infinite; }
@keyframes fd-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .cs-anlagen .finder-ansicht { animation: ansicht-ein .3s ease-out backwards; } @keyframes ansicht-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* Ergebnisansicht im Dialog */
.cs-anlagen .ergebnis__kopf { margin-bottom: 26px; }
.cs-anlagen .ergebnis__kopf .kicker { margin-bottom: 6px; }
.cs-anlagen .ergebnis__titel { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -.025em; }
.cs-anlagen .ergebnis__titel:focus { outline: none; }
.cs-anlagen .ergebnis__intro { margin-top: 10px; max-width: 64ch; font-size: 1.04rem; color: var(--cs-text); }
.cs-anlagen .finder-dialog .ergebnis { animation: none; }
.cs-anlagen .finder-dialog .erg-gruppe + .erg-gruppe { margin-top: 36px; }
.cs-anlagen .finder-dialog .erg-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cs-anlagen .finder-dialog .erg-grid--kompakt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container fdk (min-width: 600px) { .cs-anlagen .finder-dialog .erg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fdk (min-width: 900px) { .cs-anlagen .finder-dialog .erg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-anlagen .finder-dialog .erg-grid--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-anlagen .erg-etikett { display: inline-flex; align-items: flex-start; gap: 7px; width: fit-content; max-width: 100%; margin: 0 0 8px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.35; background: var(--cs-blau-hell); color: var(--cs-blau-tief); }
.cs-anlagen .erg-etikett .ic { width: 15px; height: 15px; margin-top: 1px; }
.cs-anlagen .erg-etikett--sonder { background: #FFF1D6; color: #5A3200; }
.cs-anlagen .erg-etikett--individuell { background: var(--cs-flaeche); color: var(--cs-ueberschrift); border: 1px solid var(--cs-linie); }
.cs-anlagen .erg-karte__name { overflow-wrap: break-word; }
.cs-anlagen .abschluss-ruhig { margin-top: 36px; padding: 24px 28px; border-radius: 16px; background: var(--cs-blau-hell); display: grid; gap: 8px; }
.cs-anlagen .abschluss-ruhig h4 { font-size: 1.2rem; color: var(--cs-blau-tief); }
.cs-anlagen .abschluss-ruhig p { color: var(--cs-text); max-width: 70ch; }
.cs-anlagen .abschluss-ruhig__hinweis { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--cs-blau-tief); }
.cs-anlagen .abschluss-ruhig__hinweis .ic { width: 18px; height: 18px; color: var(--cs-ok); flex: none; }
.cs-anlagen .finder-dialog .erg-hilfe { margin-bottom: 8px; }
.cs-anlagen .finder-dialog .erg-hilfe .abschluss-ruhig__hinweis { color: #fff; }
.cs-anlagen .finder-dialog .erg-hilfe .abschluss-ruhig__hinweis .ic { color: #fff; }
.cs-anlagen .ergebnis__neu { margin-top: 28px; text-align: center; font-size: 14px; }
.cs-anlagen .alt-karte { margin-top: 8px; padding: 22px 26px; border: 1px solid var(--cs-linie); border-radius: 16px; max-width: 760px; display: grid; gap: 10px; }

/* Aktionsleiste: primärer und sekundärer CTA bleiben im Dialog erreichbar */
.cs-anlagen .finder-aktionen { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 14px clamp(18px, 3.4vw, 48px) calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--cs-linie); box-shadow: 0 -12px 24px -16px rgba(8, 24, 40, .28); }
.cs-anlagen .finder-aktionen[hidden] { display: none; }
.cs-anlagen .finder-aktionen__hinweis { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cs-text); min-width: 0; }
.cs-anlagen .finder-aktionen__hinweis .ic { width: 18px; height: 18px; color: var(--cs-ok); flex: none; }
.cs-anlagen .finder-aktionen__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 960px) { .cs-anlagen .finder-aktionen__hinweis { display: none; } .cs-anlagen .finder-aktionen { justify-content: flex-end; } }
@media (max-width: 700px) {
  .cs-anlagen .finder-dialog, .cs-anlagen .finder-dialog[data-ansicht] { --fd-w: 100vw; --fd-max: 100vw; --fd-h: var(--cs-vvh, 100dvh); max-height: none; border-radius: 0; margin: 0; }
  .cs-anlagen .finder-dialog__kopf { padding: 6px 8px 6px 16px; min-height: 56px; gap: 8px; }
  .cs-anlagen .finder-dialog__titel { font-size: 1rem; }
  .cs-anlagen .finder-dialog__aendern span { max-width: 9.5em; }
  .cs-anlagen .finder-ansicht--ergebnis { padding: 20px 16px 28px; }
  .cs-anlagen .finder-ansicht--anfrage { padding: 18px 16px 32px; }
  .cs-anlagen .finder-aktionen { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .cs-anlagen .finder-aktionen__knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cs-anlagen .finder-aktionen__knoepfe .btn { width: 100%; min-height: 48px; padding: 10px 16px; font-size: 15.5px; }
  .cs-anlagen .finder-aktionen__knoepfe .btn--umriss-dunkel { min-height: 42px; font-size: 14.5px; }
  .cs-anlagen .abschluss-ruhig { padding: 20px 18px; }
}
@media (max-height: 560px) and (min-width: 480px) { .cs-anlagen .finder-aktionen { flex-direction: row; } .cs-anlagen .finder-aktionen__knoepfe { display: flex; } .cs-anlagen .finder-aktionen__knoepfe .btn { width: auto; } }
@media (max-width: 700px) { .cs-anlagen .finder-dialog__werkzeuge .modus-schalter--klein { order: 3; } }

/* sanftes Schließen */
@media (prefers-reduced-motion: no-preference) {
  .cs-anlagen .finder-dialog.is-closing { animation: fd-aus .18s ease-in forwards; }
  .cs-anlagen .finder-dialog.is-closing::backdrop { animation: fd-bd-aus .18s ease-in forwards; }
}

/* Anfrageformular, eingebettet (Regeln des eigenständigen Anfragedialogs übernommen) */
.cs-anlagen .anfrage-eingebettet .dlg__kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 22px 24px 8px; }
.cs-anlagen .anfrage-eingebettet h2 { margin: 0; font-size: 1.35rem; color: var(--cs-ueberschrift); font-weight: 600; letter-spacing: -.02em; }
.cs-anlagen .anfrage-eingebettet .dlg__zu { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--cs-text); flex: none; }
.cs-anlagen .anfrage-eingebettet .dlg__zu:hover { background: var(--cs-flaeche); }
.cs-anlagen .anfrage-eingebettet .dlg__zu:focus-visible { box-shadow: var(--cs-fokus); }
.cs-anlagen .anfrage-eingebettet .dlg__hinweis { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; }
.cs-anlagen .anfrage-eingebettet textarea { width: 100%; min-height: 240px; border: 2px solid #C9D3DE; border-radius: 12px; padding: 14px; font: 400 13.5px/1.55 ui-monospace, Consolas, "Courier New", monospace; color: var(--cs-ueberschrift); background: var(--cs-flaeche); resize: vertical; }
.cs-anlagen .anfrage-eingebettet .dlg__aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-anlagen .anfrage-eingebettet .dlg__feld { display: grid; gap: 6px; }
.cs-anlagen .anfrage-eingebettet .dlg__feld label { font-size: 13.5px; font-weight: 500; color: var(--cs-ueberschrift); }
.cs-anlagen .anfrage-eingebettet .dlg__status { font-size: 14px; color: var(--cs-ok); font-weight: 500; min-height: 1.4em; }
.cs-anlagen .anfrage-eingebettet .dlg__mapping { font-size: 13px; color: var(--cs-text-leise); }
.cs-anlagen .anfrage-eingebettet .dlg__mapping dt { font-weight: 600; color: var(--cs-ueberschrift); margin-top: 6px; }
.cs-anlagen .anfrage-eingebettet .dlg__mapping dd { margin: 0; }
.cs-anlagen .anfrage-eingebettet .kicker { color: var(--cs-blau); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }
.cs-anlagen .anfrage-eingebettet .dlg__sub { margin: 6px 0 0; font-size: 14.5px; }
.cs-anlagen .anfrage-eingebettet .dlg__demo { background: #FFF1D6; color: #5A3200; border: 1px solid #F3C566; border-radius: 10px; padding: 9px 14px; font-size: 13.5px; font-weight: 500; margin: 0; }
.cs-anlagen .anfrage-eingebettet .dlg__demo--gross { font-size: 14.5px; padding: 13px 16px; }
.cs-anlagen .anfrage-eingebettet .dlg__uebernahme { display: flex; gap: 12px; align-items: flex-start; background: var(--cs-blau-hell); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.45; color: var(--cs-blau-tief); }
.cs-anlagen .anfrage-eingebettet .dlg__uebernahme .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--cs-ok); }
.cs-anlagen .anfrage-eingebettet .dlg__uebernahme strong { display: block; color: var(--cs-ueberschrift); font-weight: 600; }
.cs-anlagen .anfrage-eingebettet .dlg__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; margin-bottom: 14px; }
.cs-anlagen .anfrage-eingebettet .dlg__feld input[type="text"], .cs-anlagen .anfrage-eingebettet .dlg__feld input[type="email"], .cs-anlagen .anfrage-eingebettet .dlg__feld input[type="tel"] { width: 100%; min-height: 50px; border: 2px solid #C9D3DE; border-radius: 12px; padding: 10px 14px; font: 500 16px/1.3 var(--cs-sans); color: var(--cs-ueberschrift); background: #fff; }
.cs-anlagen .anfrage-eingebettet .dlg__feld textarea { min-height: 96px; font: 400 15px/1.5 var(--cs-sans); background: #fff; border: 2px solid #C9D3DE; border-radius: 12px; padding: 12px 14px; width: 100%; }
.cs-anlagen .anfrage-eingebettet .dlg__feld input:focus, .cs-anlagen .anfrage-eingebettet .dlg__feld textarea:focus { outline: none; border-color: var(--cs-blau); box-shadow: 0 0 0 4px rgba(34, 112, 174, .2); }
.cs-anlagen .anfrage-eingebettet .dlg__feld--fehler input, .cs-anlagen .anfrage-eingebettet .dlg__feld--fehler textarea { border-color: #B42318; }
.cs-anlagen .anfrage-eingebettet .pflicht { color: #B42318; }
.cs-anlagen .anfrage-eingebettet .optional { color: var(--cs-text-leise); font-weight: 400; font-size: 12.5px; }
.cs-anlagen .anfrage-eingebettet .feld-fehler { margin: 0; color: #B42318; font-size: 13.5px; font-weight: 500; }
.cs-anlagen .anfrage-eingebettet .dlg__datenschutz { font-size: 12.5px; color: var(--cs-text-leise); margin: 12px 0 16px; }
.cs-anlagen .anfrage-eingebettet .dlg__struktur { font-size: 13px; }
.cs-anlagen .anfrage-eingebettet .dlg__struktur summary { cursor: pointer; color: var(--cs-blau); font-weight: 500; min-height: 32px; padding: 6px 0; }
.cs-anlagen .anfrage-eingebettet .dlg__struktur pre { background: var(--cs-flaeche); border-radius: 10px; padding: 12px; max-height: 240px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.cs-anlagen .anfrage-eingebettet .hinweis-klein { font-size: 13px; color: var(--cs-text-leise); margin: 0; }
@media (min-width: 600px) { .cs-anlagen .anfrage-eingebettet .dlg__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V3 Feinschliff */
.cs-anlagen .finder-dialog[data-ansicht="evaluating"] .finder-dialog__koerper { display: grid; align-content: center; justify-items: center; }
.cs-anlagen .finder-dialog[data-ansicht="evaluating"] #finder-app { width: 100%; }
.cs-anlagen .finder-ansicht--auswertung { height: auto; min-height: 0; }
.cs-anlagen .finder-aktionen__hinweis { flex: 1 1 180px; max-width: 340px; }
.cs-anlagen .finder-aktionen__knoepfe { flex: 0 1 auto; flex-wrap: nowrap; }
.cs-anlagen .finder-aktionen__knoepfe .btn--gross { padding: 12px 24px; font-size: 15.5px; white-space: nowrap; }
@media (max-width: 1100px) { .cs-anlagen .finder-aktionen__knoepfe { flex-wrap: wrap; } }

/* V3 Dialogkopf: Marke | Werkzeuge | Schließen, auf dem Smartphone Marke und Schließen oben, Werkzeuge darunter */
.cs-anlagen .finder-dialog__kopf { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
.cs-anlagen .finder-dialog__marke { order: 1; flex: 1 1 auto; }
.cs-anlagen .finder-dialog__werkzeuge { order: 2; flex: 0 1 auto; }
.cs-anlagen .finder-dialog__zu { order: 3; flex: none; }
.cs-anlagen .finder-dialog__werkzeuge:not(:has(> :not([hidden]))) { display: none; }
@media (max-width: 900px) {
  .cs-anlagen .finder-dialog__zu { order: 2; }
  .cs-anlagen .finder-dialog__werkzeuge { order: 3; flex: 1 1 100%; justify-content: space-between; padding-bottom: 4px; }
}
@media (max-width: 700px) { .cs-anlagen .finder-dialog__kopf { padding: 8px 10px 4px 16px; } }
@media (min-width: 701px) and (max-width: 1100px) {
  .cs-anlagen .finder-aktionen__knoepfe { flex-wrap: nowrap; }
  .cs-anlagen .finder-aktionen__knoepfe .btn--gross { padding: 12px 16px; font-size: 14.5px; }
}
@media (max-width: 900px) {
  .cs-anlagen .finder-dialog__werkzeuge { flex-wrap: nowrap; gap: 8px; }
  .cs-anlagen .modus-schalter--klein button { padding: 6px 10px; font-size: 12px; min-height: 34px; }
  .cs-anlagen .finder-dialog__aendern { min-height: 40px; font-size: 13.5px; padding: 4px 4px; white-space: nowrap; }
}
.cs-anlagen .anfrage-eingebettet .dlg__kopf.dlg__kopf--eingebettet { display: grid; gap: 14px; padding: 0 0 8px; justify-items: start; }
.cs-anlagen .anfrage-eingebettet .dlg__kopf--eingebettet h2 { margin: 0; }
@media (max-width: 480px) {
  .cs-anlagen .modus-schalter--klein button { padding: 6px 8px; font-size: 11.5px; }
  .cs-anlagen .finder-dialog__aendern { font-size: 13px; gap: 5px; padding-inline: 2px; }
  .cs-anlagen .finder-dialog__werkzeuge { gap: 6px; }
}

/* V3 Dialogkopf, zweite Fassung: Marke | Regelstand-Schalter (nur Vorschau) | Angaben ändern | Schließen */
.cs-anlagen .finder-dialog__werkzeuge { display: contents; }
.cs-anlagen .finder-dialog__marke { order: 1; flex: 1 1 auto; }
.cs-anlagen .finder-dialog__werkzeuge .modus-schalter--klein { order: 2; }
.cs-anlagen .finder-dialog__aendern { order: 3; }
.cs-anlagen .finder-dialog__zu { order: 4; }
@media (max-width: 700px) {
  .cs-anlagen .finder-dialog__kopf { flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px 6px 16px; min-height: 56px; }
  .cs-anlagen .finder-dialog__werkzeuge .modus-schalter--klein { order: 5; flex: 1 1 100%; margin-bottom: 4px; }
  .cs-anlagen .finder-dialog__werkzeuge .modus-schalter--klein { display: grid; grid-template-columns: 1fr 1fr; max-width: 360px; }
}
@media (max-width: 480px) {
  .cs-anlagen .finder-dialog__zu span { display: none; }
  .cs-anlagen .finder-dialog__zu { padding: 8px 10px; min-width: 44px; justify-content: center; }
}
@media (max-width: 700px) {
  .cs-anlagen .finder-aktionen__knoepfe .btn--gross { white-space: normal; line-height: 1.25; padding: 10px 12px; font-size: 15px; }
  .cs-anlagen .finder-aktionen__knoepfe .btn--umriss-dunkel { font-size: 14px; }
}

/* Lösungsrichtungen im Dialog: Spalten nach Dialogbreite */
.cs-anlagen .finder-dialog .richtungen { grid-template-columns: minmax(0, 1fr); }
@container fdk (min-width: 640px) { .cs-anlagen .finder-dialog .richtungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fdk (min-width: 940px) { .cs-anlagen .finder-dialog .richtungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-anlagen .finder-ansicht--auswertung { -webkit-user-select: none; user-select: none; }

/* ============================================================ Version 4 */
/* Ergebniskarten: Kopf (Etikett, Verfahren, Name, Einordnung) und Rumpf (Gründe, Hinweis, Aktion) getrennt, damit sie mobil kompakt anordenbar sind */
.cs-anlagen .erg-karte__kopf, .cs-anlagen .erg-karte__rumpf { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs-anlagen .erg-karte__rumpf { flex: 1; }
.cs-anlagen .erg-karte--kompakt .erg-karte__kopf, .cs-anlagen .erg-karte--kompakt .erg-karte__rumpf { gap: 8px; }
.cs-anlagen .erg-karte__verfahren { display: none; margin: 0; }
.cs-anlagen .erg-karte__kopf .erg-etikett { margin-bottom: 0; }
.cs-anlagen .erg-etikett--standard { background: var(--cs-ok-bg); color: var(--cs-ok); }
.cs-anlagen .erg-etikett--pruefung { background: var(--cs-flaeche); color: var(--cs-ueberschrift); border: 1px solid var(--cs-linie); }
.cs-anlagen .ergebnis__hinweis { margin-top: 8px; max-width: 64ch; font-size: .95rem; color: var(--cs-text-leise); }
.cs-anlagen .finder-dialog .erg-gruppe--umstellung .erg-grid--kompakt { margin-top: 18px; }

/* Smartphone und schmale Dialoge: eine Spalte, alle Karten gleich kompakt (Bild als Vorschau links, Text daneben, Gründe und Aktion darunter) */
@container fdk (max-width: 599px) {
  .cs-anlagen .finder-dialog .erg-grid, .cs-anlagen .finder-dialog .erg-grid--kompakt { gap: 12px; margin-top: 14px; }
  .cs-anlagen .finder-dialog .erg-gruppe + .erg-gruppe { margin-top: 26px; }
  .cs-anlagen .finder-dialog .erg-gruppe__kopf h4 { font-size: 1.15rem; }
  .cs-anlagen .finder-dialog .erg-gruppe__kopf p { font-size: 14px; }
  .cs-anlagen .finder-dialog .erg-karte, .cs-anlagen .finder-dialog .erg-karte--kompakt {
    display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-template-areas: "bild kopf" "rumpf rumpf";
    column-gap: 12px; row-gap: 8px; padding: 12px; align-items: start; }
  .cs-anlagen .finder-dialog .erg-karte__inhalt { display: contents; }
  .cs-anlagen .finder-dialog .erg-karte__bild, .cs-anlagen .finder-dialog .erg-karte--kompakt .erg-karte__bild { grid-area: bild; width: 78px; height: 78px; min-width: 0; max-width: none; aspect-ratio: auto; border-radius: 10px; }
  .cs-anlagen .finder-dialog .erg-karte__bild img, .cs-anlagen .finder-dialog .erg-karte--kompakt .erg-karte__bild img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .cs-anlagen .finder-dialog .erg-karte__bild > .symbol-gross { width: 44px; height: 44px; }
  .cs-anlagen .finder-dialog .erg-karte__bild .verfahren-label, .cs-anlagen .finder-dialog .erg-karte__bild .bild-hinweis { display: none; }
  .cs-anlagen .finder-dialog .erg-karte__kopf { grid-area: kopf; gap: 2px; padding-top: 2px; }
  .cs-anlagen .finder-dialog .erg-karte__verfahren { display: block; font-size: 12px; font-weight: 600; color: var(--cs-blau-tief); line-height: 1.3; }
  .cs-anlagen .finder-dialog .erg-karte__name, .cs-anlagen .finder-dialog .erg-karte--kompakt .erg-karte__name { font-size: 1.02rem; line-height: 1.25; }
  .cs-anlagen .finder-dialog .erg-karte__ein { font-size: 13px; margin-top: 0; line-height: 1.35; }
  .cs-anlagen .finder-dialog .erg-karte__kopf .erg-etikett { margin: 0 0 4px; padding: 3px 9px; font-size: 12px; }
  .cs-anlagen .finder-dialog .erg-karte__rumpf { grid-area: rumpf; gap: 8px; }
  .cs-anlagen .finder-dialog .erg-karte__warum { padding-top: 8px; gap: 6px; }
  .cs-anlagen .finder-dialog .erg-karte__warum-titel { display: none; }
  .cs-anlagen .finder-dialog .erg-karte__gruende { font-size: 13.5px; gap: 5px; line-height: 1.4; }
  .cs-anlagen .finder-dialog .erg-karte__kurzgrund, .cs-anlagen .finder-dialog .erg-karte__neutral { font-size: 13.5px; line-height: 1.4; }
  .cs-anlagen .finder-dialog .erg-karte__hinweis { font-size: 12.5px; line-height: 1.4; }
  .cs-anlagen .finder-dialog .erg-karte__aktion, .cs-anlagen .finder-dialog .erg-karte__aktion--zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 2px; }
  .cs-anlagen .finder-dialog .erg-karte__aktion .btn { width: auto; min-height: 42px; padding: 8px 16px; font-size: 14.5px; }
  .cs-anlagen .finder-dialog .chips--klein { gap: 5px; }
}

.cs-anlagen .feld-hinweis { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--cs-text-leise); }

/* V4 Feinschliff: Platzhalter hält die Schaltflächen der Karten auf einer Linie; schmaler Dialogkopf auf dem Smartphone (Vorschau mit Simulationsetikett) */
.cs-anlagen .aktion-platz { font-size: 13.5px; line-height: 1.4; visibility: hidden; }
@container fdk (max-width: 599px) { .cs-anlagen .finder-dialog .aktion-platz { display: none; } }
@media (max-width: 480px) {
  .cs-anlagen .finder-dialog__marke { gap: 6px; flex: 1 1 0; }
  .cs-anlagen .finder-dialog__titel { font-size: .95rem; }
  .cs-anlagen .finder-dialog__marke .modus-etikett { font-size: 10.5px; padding: 2px 7px; }
  .cs-anlagen .finder-dialog__aendern { font-size: 12.5px; gap: 3px; }
  .cs-anlagen .finder-dialog__kopf { gap: 2px 6px; }
}

/* ============================================================ Version 4.1 */
/* Einführung im Verfahrensbereich (ersetzt den früheren Grundlagenabschnitt): Text links, Aktion rechts, darunter die Verfahrenskarten */
.cs-anlagen .verfahren-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(28px, 5vw, 72px); align-items: end; }
.cs-anlagen .verfahren-intro__text h2 { max-width: 36ch; }
.cs-anlagen .verfahren-intro__text p:not(.kicker) { margin-top: 14px; max-width: 62ch; font-size: 1.04rem; }
.cs-anlagen .verfahren-intro__aktion { display: grid; gap: 14px; justify-items: start; padding-bottom: 4px; }
.cs-anlagen .verfahren-intro__aktion .textlink { font-size: 14.5px; }
@media (max-width: 900px) { .cs-anlagen .verfahren-intro { grid-template-columns: minmax(0, 1fr); } }

/* Gebrauchtanlagen und Miete: zwei gleich gestaltete, kompakte Blöcke statt zusätzlicher Sektion */
.cs-anlagen .gebraucht-miete { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.cs-anlagen .gebraucht-miete .gebraucht-liste { margin-top: 0; }
.cs-anlagen .gebraucht-miete.hat-angebote { grid-template-columns: minmax(0, 1fr); }
.cs-anlagen .leerzustand, .cs-anlagen .miete-block { background: #fff; border-radius: var(--cs-radius); box-shadow: var(--cs-schatten); padding: clamp(22px, 3vw, 32px); display: grid; gap: 10px; justify-items: start; align-content: start; border-left: 5px solid var(--cs-blau); }
.cs-anlagen .leerzustand h3, .cs-anlagen .miete-block h3 { font-size: 1.2rem; }
.cs-anlagen .leerzustand p, .cs-anlagen .miete-block p { max-width: 52ch; }
.cs-anlagen .leerzustand .btn, .cs-anlagen .miete-block .btn { margin-top: 6px; }
@media (max-width: 820px) { .cs-anlagen .gebraucht-miete { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---- V4.1 Ergebnisse: Hauptkarten, ausklappbare weitere Anlagen, Projektlösungs-Karten */
.cs-anlagen .erg-grid--haupt { margin-top: 22px; }
.cs-anlagen .finder-dialog .ergebnis__kopf { margin-bottom: 4px; }
.cs-anlagen .finder-dialog .ergebnis__intro { max-width: 60ch; }
.cs-anlagen .erg-weitere { margin-top: 26px; }
.cs-anlagen .erg-weitere__knopf { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 52px; border: 1.5px solid var(--cs-linie); border-radius: 14px; background: #fff; color: var(--cs-textblau); font: inherit; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.cs-anlagen .erg-weitere__knopf:hover { border-color: var(--cs-blau); background: var(--cs-blau-hell); }
.cs-anlagen .erg-weitere__knopf .ic { width: 20px; height: 20px; flex: none; transition: transform .3s ease; }
.cs-anlagen .erg-weitere.ist-offen .erg-weitere__knopf .ic { transform: rotate(180deg); }
.cs-anlagen .erg-weitere__huelle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease, visibility 0s linear .32s; visibility: hidden; }
.cs-anlagen .erg-weitere.ist-offen .erg-weitere__huelle { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s ease, visibility 0s; }
.cs-anlagen .erg-weitere__innen { overflow: hidden; min-height: 0; }
.cs-anlagen .erg-weitere__innen > .erg-gruppe:first-child { margin-top: 22px; }
.cs-anlagen .erg-weitere__innen .erg-gruppe + .erg-gruppe { margin-top: 28px; }
.cs-anlagen .erg-weitere__innen .erg-gruppe__kopf h4 { font-size: 1.1rem; }
.cs-anlagen .erg-weitere__innen .erg-gruppe__kopf p { font-size: 14px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .cs-anlagen .erg-weitere__huelle, .cs-anlagen .erg-weitere.ist-offen .erg-weitere__huelle, .cs-anlagen .erg-weitere__knopf .ic { transition: none; } }

/* Projektlösung: bewusst anders als eine Standard-Produktkarte (Akzentkante, technische Fläche statt Platzhaltersymbol, eigene Kennzeichnung) */
.cs-anlagen .erg-etikett--projekt { background: var(--cs-blau-tief); color: #fff; }
.cs-anlagen .erg-karte--projekt { border-top: 3px solid var(--cs-blau); }
.cs-anlagen .erg-karte__bild--projekt { background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(34, 112, 174, .09) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(34, 112, 174, .09) 23px 24px), var(--cs-flaeche); flex-direction: column; gap: 10px; }
.cs-anlagen .erg-karte__bild--projekt .symbol-gross { width: 64px; height: 64px; }
.cs-anlagen .projekt-panel__text { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-blau-tief); }
@container fdk (max-width: 599px) {
  .cs-anlagen .finder-dialog .erg-karte__bild--projekt .projekt-panel__text { display: none; }
  .cs-anlagen .finder-dialog .erg-karte__bild--projekt .symbol-gross { width: 40px; height: 40px; }
  .cs-anlagen .finder-dialog .erg-weitere { margin-top: 18px; }
}

.cs-anlagen .erg-gemeinsamer-hinweis { margin-top: 14px; max-width: 80ch; }
.cs-anlagen .erg-karte__warum { padding-top: 12px; }
@container fdk (max-width: 599px) { .cs-anlagen .finder-dialog .ergebnis__titel { font-size: 1.4rem; line-height: 1.2; } .cs-anlagen .finder-dialog .ergebnis__intro { font-size: .98rem; } }

/* ---- V4.1 Anlagenvergleich */
.cs-anlagen .karte__aktionen { flex-wrap: wrap; }
.cs-anlagen .vergleich-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 8px; margin-left: auto; border: 1.5px solid var(--cs-linie); border-radius: 999px; background: #fff; color: var(--cs-textblau); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.cs-anlagen .vergleich-knopf:hover { border-color: var(--cs-blau); }
.cs-anlagen .vergleich-knopf__box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #9DB3C8; background: #fff; display: grid; place-items: center; color: transparent; transition: background-color .2s, border-color .2s; }
.cs-anlagen .vergleich-knopf__box .ic { width: 14px; height: 14px; }
.cs-anlagen .vergleich-knopf.ist-gewaehlt { background: var(--cs-blau-hell); border-color: var(--cs-blau); color: var(--cs-blau-tief); }
.cs-anlagen .vergleich-knopf.ist-gewaehlt .vergleich-knopf__box { background: var(--cs-blau); border-color: var(--cs-blau); color: #fff; }
.cs-anlagen .vergleich-knopf.ist-gesperrt { opacity: .55; cursor: not-allowed; }

.vergleich-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--cs-linie, #D8E1EA); box-shadow: 0 -12px 28px -14px rgba(8, 24, 40, .35); padding: 12px clamp(14px, 3vw, 40px) calc(12px + env(safe-area-inset-bottom)); font-family: inherit; animation: vg-ein .28s ease backwards; }
.vergleich-leiste[hidden] { display: none; }
.vergleich-leiste__innen { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.vergleich-leiste__info { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-width: 0; }
.vergleich-leiste__liste { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.vergleich-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #EAF2F9; color: #143852; font-size: 13.5px; font-weight: 600; max-width: 100%; }
.vergleich-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.vergleich-chip__weg, .vg__weg { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #143852; cursor: pointer; }
.vergleich-chip__weg:hover, .vg__weg:hover { background: rgba(34, 112, 174, .16); }
.vergleich-chip__weg .ic, .vg__weg .ic { width: 16px; height: 16px; }
.vergleich-leiste__status { margin: 0; font-size: 13.5px; color: #5E6166; }
.vergleich-leiste__aktion { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.vergleich-leiste .btn.ist-gesperrt { opacity: .55; cursor: not-allowed; }
html.hat-vergleich body { padding-bottom: 92px; }
html.finder-fokus .vergleich-leiste { display: none; }
@keyframes vg-ein { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .vergleich-leiste { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .vergleich-leiste__innen { gap: 8px; }
  .vergleich-chip__name { max-width: 16ch; }
  .vergleich-leiste__aktion { width: 100%; justify-content: space-between; }
  html.hat-vergleich body { padding-bottom: 150px; }
}

html.vergleich-offen { overflow: hidden; scrollbar-gutter: stable; }
.vergleich-dialog { border: 0; padding: 0; width: min(1120px, 96vw); max-width: 96vw; max-height: min(92vh, 940px); border-radius: 20px; background: #fff; color: #5E6166; box-shadow: 0 30px 80px rgba(8, 24, 40, .45); display: flex; flex-direction: column; overflow: hidden; font-family: inherit; }
.vergleich-dialog:not([open]) { display: none; }
.vergleich-dialog[open] { animation: vg-dlg .24s ease backwards; }
.vergleich-dialog::backdrop { background: rgba(8, 24, 40, .55); }
@keyframes vg-dlg { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.vg__kopfzeile { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px clamp(18px, 3vw, 36px) 12px; }
.vg__kopfzeile h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin: 0; color: #212529; letter-spacing: -.02em; }
.vg__kopfzeile h2:focus { outline: none; }
.vg__kopfzeile .kicker { margin: 0 0 4px; }
.vergleich-dialog .dlg__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #D8E1EA; background: #fff; color: #143852; cursor: pointer; }
.vergleich-dialog .dlg__zu .ic { width: 18px; height: 18px; }
.vg__koerper { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 clamp(18px, 3vw, 36px) 8px; display: flex; flex-direction: column; gap: 10px; }
.vg__hinweis { margin: 0; font-size: 14px; max-width: 72ch; }
.vg__scroll { overflow-x: auto; border: 1px solid #D8E1EA; border-radius: 14px; -webkit-overflow-scrolling: touch; }
.vg__scroll:focus-visible { outline: 3px solid rgba(34, 112, 174, .45); outline-offset: 2px; }
.vg__tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.5; }
.vg__tabelle th, .vg__tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #E6ECF2; background: #fff; }
.vg__tabelle tbody tr:last-child > * { border-bottom: 0; }
.vg__tabelle thead td, .vg__tabelle thead th { border-bottom: 1px solid #D8E1EA; background: #F5F8FB; }
.vg__ecke { width: 150px; min-width: 150px; }
.vg__merkmal { width: 150px; min-width: 150px; font-weight: 600; color: #143852; font-size: 13.5px; position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #E6ECF2; }
.vg__ecke { position: sticky; left: 0; z-index: 3; }
.vg__spalte { min-width: 210px; width: auto; font-weight: 400; }
.vg__unterschied > * { background: #F0F6FB; }
.vg__unterschied > .vg__merkmal { background: #E8F1F9; }
.vg__kopf { position: relative; display: grid; gap: 6px; justify-items: start; }
.vg__kopf .vg__weg { position: absolute; right: -8px; top: -8px; }
.vg__bild { width: 100%; aspect-ratio: 4 / 3; max-height: 170px; display: grid; place-items: center; background: #fff; border-radius: 10px; overflow: hidden; }
.vg__bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.vg__bild.blend img { mix-blend-mode: multiply; }
.vg__verfahren { margin: 0; font-size: 12px; font-weight: 600; color: #2270AE; letter-spacing: .02em; }
.vg__name { margin: 0; font-size: 1.05rem; font-weight: 600; color: #212529; line-height: 1.25; }
.vg__intern { display: inline-block; margin-top: 6px; }
.vg__wisch { margin: 0; text-align: center; font-size: 12.5px; color: #6B6F76; }
.vg__fuss { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px clamp(18px, 3vw, 36px) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #E6ECF2; }
@media (max-width: 720px) {
  .vergleich-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .vg__ecke, .vg__merkmal { width: 104px; min-width: 104px; padding: 10px 10px; font-size: 12.5px; }
  .vg__spalte { min-width: 168px; padding: 10px 10px; }
  .vg__tabelle th, .vg__tabelle td { padding: 10px 10px; font-size: 13.5px; }
  .vg__tabelle.vg--2 .vg__spalte { min-width: 0; }
  .vg__bild { max-height: 110px; }
  .vg__name { font-size: .98rem; }
  .vg__fuss { flex-direction: column; align-items: stretch; }
  .vg__fuss .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vergleich-leiste, .vergleich-dialog[open] { animation: none; } }

/* V4.1 Vergleich: Feinschliff (kompaktere Leiste und Tabelle, zwei Anlagen ohne Scrollen auf dem Smartphone) */
.vergleich-leiste__innen { flex-wrap: nowrap; }
.vergleich-leiste__info { flex: 1 1 0; flex-wrap: nowrap; overflow: hidden; }
.vergleich-leiste__aktion { flex: none; flex-wrap: nowrap; }
.vergleich-leiste__liste { flex-wrap: nowrap; overflow: hidden; }
.vergleich-chip { flex: none; }
.vergleich-leiste__status { flex: none; white-space: nowrap; }
.vg__kopfzeile { padding-top: 16px; padding-bottom: 8px; }
.vg__bild { max-height: 124px; aspect-ratio: 16 / 9; }
.vg__tabelle th, .vg__tabelle td { padding: 9px 14px; }
@media (max-width: 720px) {
  .vergleich-leiste__innen { flex-wrap: wrap; }
  .vergleich-leiste__info { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; }
  .vergleich-leiste__liste { flex-wrap: wrap; }
  .vergleich-leiste__aktion { flex: 1 1 100%; }
  .vg__tabelle.vg--2 { table-layout: fixed; }
  .vg__tabelle.vg--2 .vg__ecke, .vg__tabelle.vg--2 .vg__merkmal { width: 92px; min-width: 92px; padding-inline: 8px; }
  .vg__tabelle.vg--2 .vg__spalte { width: auto; padding-inline: 8px; }
  .vg__tabelle.vg--2 th, .vg__tabelle.vg--2 td { overflow-wrap: anywhere; hyphens: auto; }
  .vg__bild { max-height: 96px; }
  .vg__kopf .vg__weg { right: -4px; top: -4px; }
}

@media (max-width: 720px) {
  .vg__tabelle.vg--2 { table-layout: auto; }
  .vg__tabelle.vg--2 th, .vg__tabelle.vg--2 td, .vg__tabelle th, .vg__tabelle td { overflow-wrap: break-word; hyphens: manual; }
  .vg__tabelle .vg__ecke, .vg__tabelle .vg__merkmal, .vg__tabelle.vg--2 .vg__ecke, .vg__tabelle.vg--2 .vg__merkmal { width: 96px; min-width: 96px; max-width: 96px; padding-inline: 8px; font-size: 12px; }
  .vg__tabelle .vg__spalte, .vg__tabelle.vg--2 .vg__spalte { min-width: 160px; width: 160px; padding-inline: 8px; }
  .vg__name { font-size: .9rem; }
  .vg__kopf .textlink { font-size: 12.5px; }
}
@media (max-width: 720px) {
  .vg__tabelle .vg__ecke, .vg__tabelle .vg__merkmal, .vg__tabelle.vg--2 .vg__ecke, .vg__tabelle.vg--2 .vg__merkmal { width: 104px; min-width: 104px; max-width: 104px; hyphens: manual; }
}

/* ---- V4.1 Optionale Unterlagen im Anfrageformular (Demo) */
.cs-anlagen .dlg__upload { margin-top: 4px; }
.cs-anlagen .dlg__feldname { display: block; margin-bottom: 8px; font-weight: 600; font-size: .95rem; color: var(--cs-ueberschrift); }
.cs-anlagen .upload { position: relative; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 14px; border: 1.5px dashed #B7C9DB; border-radius: 14px; background: #F8FBFD; transition: border-color .2s, background-color .2s; }
.cs-anlagen .upload.ist-drag { border-color: var(--cs-blau); background: var(--cs-blau-hell); }
.cs-anlagen .upload__eingabe { position: absolute; left: 14px; top: 14px; width: 1px; height: 1px; opacity: 0; }
.cs-anlagen .upload__eingabe:focus-visible + .upload__knopf { outline: 3px solid rgba(34, 112, 174, .5); outline-offset: 2px; }
.cs-anlagen .upload__knopf { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cs-anlagen .upload__knopf .ic { width: 16px; height: 16px; }
.cs-anlagen .upload.ist-voll .upload__knopf { opacity: .5; cursor: not-allowed; }
.cs-anlagen .upload__drop { font-size: 13.5px; color: var(--cs-text-leise); }
@media (hover: none) { .cs-anlagen .upload__drop { display: none; } }
.cs-anlagen .upload__liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cs-anlagen .upload__liste[hidden] { display: none; }
.cs-anlagen .upload__datei { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--cs-linie); border-radius: 10px; background: #fff; font-size: 14px; }
.cs-anlagen .upload__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cs-ueberschrift); font-weight: 500; }
.cs-anlagen .upload__gr { flex: none; color: var(--cs-text-leise); font-size: 13px; }
.cs-anlagen .upload__weg { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--cs-blau-tief); }
.cs-anlagen .upload__weg:hover { background: var(--cs-blau-hell); }
.cs-anlagen .upload__weg .ic { width: 16px; height: 16px; }

/* V4.1 Zubehör: dezente Einordnung nach Einsatzbereich */
.cs-anlagen .zubehoer-karte__einsatz { margin: 0 0 8px; display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cs-blau-hell); color: var(--cs-blau-tief); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
/* Entfernen-Schaltfläche über dem Bild (sonst vom Bild verdeckt) */
.vg__kopf .vg__weg { z-index: 3; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(8, 24, 40, .18); }
.cs-anlagen picture { display: contents; }
.cs-anlagen .upload__liste { grid-template-columns: minmax(0, 1fr); }
@container fdk (max-width: 599px) { .cs-anlagen .finder-dialog .erg-karte__ein { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

/* V4.1 Vergleich: Bild vollständig sichtbar (feste Höhe statt Seitenverhältnis), gleich breite Anlagenspalten ab Tablet */
.vg__bild { display: block; aspect-ratio: auto; max-height: none; height: 124px; }
.vg__bild img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 720px) { .vg__bild { height: 96px; } }
@media (min-width: 721px) { .vg__tabelle { table-layout: fixed; } .vg__tabelle .vg__ecke, .vg__tabelle .vg__merkmal { width: 150px; } }
/* V4.1: Felder in einer Zeile oben ausrichten (Feld mit Hinweis streckt sonst die Nachbarspalte) */
.anfrage-dialog .dlg__feld, .cs-anlagen .anfrage-eingebettet .dlg__feld { align-content: start; }

/* ============================================================ V4.2: Produktdaten im Vergleich und auf den Karten */
.cs-nachbildung.vc-leiste { display: none; background: #E6DEF7; color: #2A1A52; font-size: 13.5px; }
html[data-ansicht="vc"] .cs-nachbildung.vc-leiste { display: block; position: sticky; top: 0; z-index: 91; }
.vc-leiste__inner { display: flex; gap: 6px 18px; align-items: center; justify-content: center; flex-wrap: wrap; padding-block: 7px; min-height: 40px; text-align: center; }
html[data-ansicht="vc"] .cs-anlagen .tech-zeile.nur-vorschau[data-a="1"] { display: grid !important; }
.cs-anlagen .merkmale .tech-zeile dd .plakette { margin-left: 6px; vertical-align: baseline; }
.cs-anlagen .merkmale .tech-zeile.nur-vorschau { opacity: .92; }
.vg__gruppe th { position: sticky; left: 0; padding: 7px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #2270AE; background: #EEF4FA !important; border-bottom: 1px solid #D8E1EA; text-align: left; }
.vg__z { display: inline; }
.vg__z--n, .vg__z--z { color: #5A6670; }
.vg__z--b, .vg__z--f, .vg__z--r { color: #6B6F76; font-style: italic; }
.vg__z--i, .vg__z--a { color: #143852; }
.vg__chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; vertical-align: 1px; margin-right: 2px; }
.vg__chip--opt { background: #E8F1F9; color: #143852; border: 1px solid #BFD6EA; }
.vg__stand { margin: 0; padding: 8px 12px; border-radius: 10px; background: #F1ECFB; color: #3A2670; font-size: 13px; line-height: 1.45; }
.vg__rest { margin: 4px 0 0; font-size: 13.5px; color: #4A5560; }
.vg__leer { padding: 18px 16px !important; color: #4A5560; font-style: italic; }
.vg__tabelle td .vg__intern { display: block; margin-top: 4px; width: fit-content; }
@media (max-width: 720px) { .vg__gruppe th { padding: 6px 10px; } }
.cs-anlagen .plakette--ok { background: var(--cs-ok-bg); color: var(--cs-ok); }
.vg__merkmal { overflow-wrap: break-word; hyphens: manual; }
@media (min-width: 721px) { .vg__ecke, .vg__merkmal { width: 168px; min-width: 168px; } }
html[data-ansicht="vc"] .cs-anlagen .tech-zeile .plakette { display: none; }
.cs-anlagen .merkmale dt { overflow-wrap: anywhere; hyphens: auto; }
.cs-nachbildung .segment { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 400px) { .cs-nachbildung .segment__btn { padding-inline: 9px; font-size: 12px; } }
/* V4.2: die Vergleichstabelle behält ihre volle Höhe; der Dialogkörper scrollt senkrecht (statt eines kleinen inneren Scrollfensters) */
.vg__scroll { flex: 0 0 auto; }
.vg__rest, .vg__stand, .vg__hinweis { flex: none; }
@media (max-width: 720px) { .vg__hinweis { display: none; } .vg__stand { font-size: 12.5px; padding: 6px 10px; } .vg__kopfzeile h2 { font-size: 1.3rem; } }
/* ---- V4.2 Feinschliff (Gesamtprüfung 2026-10-26) ---- */
/* Gebraucht/Miete: Schaltflächen beider Blöcke stehen auf einer Linie */
.cs-anlagen .gebraucht-miete .leerzustand, .cs-anlagen .gebraucht-miete .miete-block { grid-template-rows: auto 1fr auto; align-content: stretch; }
.cs-anlagen .gebraucht-miete .leerzustand .btn, .cs-anlagen .gebraucht-miete .miete-block .btn { align-self: end; }
.cs-anlagen .gebraucht-miete.hat-angebote .leerzustand { grid-template-rows: none; }
/* Kontaktkarten: Schaltflächen brechen nicht um; auf dem Smartphone volle Breite */
.cs-anlagen .kontakt-karte .btn { white-space: nowrap; }
@media (max-width: 560px) { .cs-anlagen .kontakt-karte .btn { width: 100%; justify-content: center; } }
/* Zubehör auf schmalen Smartphones: Bild oben statt schmaler Textspalte */
@media (max-width: 430px) {
  .cs-anlagen .zubehoer-karte { flex-direction: column; }
  .cs-anlagen .zubehoer-karte__bild { flex: 0 0 auto; width: 100%; min-height: 0; height: 150px; }
  .cs-anlagen .zubehoer-karte__inhalt { padding: 16px 18px 20px; }
}
/* Kontrast (Messung tests/kontrast.js): weißer Text auf dem hellsten Verlaufspunkt des Heros mindestens 4,5 : 1 */
.cs-anlagen .hero__fakten { color: #fff; }
.cs-anlagen .hero__verfahren a { background: rgba(255, 255, 255, .07); }
.cs-anlagen .hero__verf-n { opacity: 1; color: #fff; font-weight: 500; }

/* V4.3: Größentabelle auf der Karte und Detailbereich „Technische Daten“ (gleiche Muster wie die übrigen Kartenzeilen) */
.cs-anlagen table.groessen { border-collapse: collapse; width: 100%; font-size: 13px; font-weight: 500; }
.cs-anlagen table.groessen th { text-align: left; font-weight: 600; color: var(--cs-blau-tief); padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: baseline; }
.cs-anlagen table.groessen th.lang { white-space: normal; width: 42%; padding-right: 10px; }
.cs-anlagen table.groessen td { padding: 3px 0; color: var(--cs-ueberschrift); overflow-wrap: anywhere; }
.cs-anlagen table.groessen tr + tr th, .cs-anlagen table.groessen tr + tr td { border-top: 1px solid var(--cs-linie); }
.cs-anlagen .karte-technik { border-top: 1px solid var(--cs-linie); }
.cs-anlagen table.groessen caption { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--cs-text-leise); padding: 0 0 2px; }
.cs-anlagen .technik { display: grid; gap: 14px; padding: 8px 0 4px; }
.cs-anlagen .technik__titel { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-text-leise); margin-bottom: 6px; }
.cs-anlagen .technik__liste { display: grid; gap: 6px; font-size: 13.5px; }
.cs-anlagen .technik__liste > div { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 10px; }
.cs-anlagen .technik__liste > div:has(table.groessen) { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cs-anlagen .technik__liste th.lang { width: 54%; font-size: 12.5px; }
.cs-anlagen .technik__liste dt { color: var(--cs-text-leise); font-weight: 500; overflow-wrap: anywhere; hyphens: auto; min-width: 0; }
.cs-anlagen .technik__liste dd { color: var(--cs-ueberschrift); font-weight: 500; overflow-wrap: anywhere; }
.cs-anlagen .technik__liste .plakette { margin: 2px 0 0 6px; white-space: normal; max-width: 100%; }
.cs-anlagen .technik__liste dd { min-width: 0; }
@media (max-width: 420px) { .cs-anlagen .technik__liste > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Gebrauchtanlagen (V4.3): ruhige Premium-Karte, Preis als eigene Zeile, höchstens drei Karten nebeneinander */
.cs-anlagen .gebraucht-karte { border: 1px solid #E1E9F1; transition: box-shadow .2s ease, transform .2s ease; }
.cs-anlagen .gebraucht-karte:hover { box-shadow: 0 10px 28px rgba(20, 56, 82, .14); }
.cs-anlagen .gebraucht-karte .karte__inhalt { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.cs-anlagen .gebraucht-karte .karte__aktionen { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.cs-anlagen .gebraucht-karte dl > div { grid-template-columns: minmax(78px, 30%) minmax(0, 1fr); }
.cs-anlagen .gebraucht-karte dd { overflow-wrap: anywhere; min-width: 0; }
.cs-anlagen .gebraucht-karte .preis-zeile { padding-top: 8px; border-top: 1px solid #E1E9F1; }
.cs-anlagen .gebraucht-karte .preis-zeile dd { font-size: 1.05rem; font-weight: 600; color: var(--cs-blau); }
@media (min-width: 1024px) { .cs-anlagen .gebraucht-miete.hat-angebote .gebraucht-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cs-anlagen .gebraucht-karte { transition: none; } }

/* Gebrauchtmarkt-Demo (nur Vorschau): Steuerung in der Vorschauleiste, auf Anhieb auffindbar; im öffentlichen Build entfernt */
.cs-nachbildung .vorschau-demo { background: #FDB022; color: #2B1A00; }
.cs-nachbildung .vorschau-demo .segment__label { font-weight: 600; opacity: 1; }
.cs-nachbildung .vorschau-demo .segment__btn[aria-pressed="true"] { background: #2B1A00; color: #fff; }
.cs-nachbildung .vorschau-demo .segment__btn:hover { background: rgba(43, 26, 0, .12); }
.cs-nachbildung .vorschau-demo .segment__btn[aria-pressed="true"]:hover { background: #2B1A00; }
.cs-anlagen .demo-schalter .demo-stand { color: var(--cs-ueberschrift); }

/* Gebrauchtmarkt: Raster je Anzahl. 1 Karte = breite Querkarte neben dem Mietblock, 2–3 Karten = gleiches Raster, Mietblock als ruhiger Streifen darunter */
.cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
.cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-liste { grid-template-columns: minmax(0, 1fr); }
.cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-karte { flex-direction: row; }
.cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-karte .karte__bild { flex: 0 0 42%; max-width: 42%; min-height: 100%; display: flex; align-items: center; justify-content: center; }
.cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-karte .karte__bild img { max-height: 340px; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-karte .karte__inhalt { flex: 1 1 0; min-width: 0; justify-content: center; }
.cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="1"] .miete-block { align-content: center; }
.cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="2"] .gebraucht-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="2"] .gebraucht-karte, .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="3"] .gebraucht-karte { height: 100%; }
@media (min-width: 821px) {
  .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="2"] .miete-block, .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="3"] .miete-block { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 28px; }
  .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="2"] .miete-block h3, .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="3"] .miete-block h3 { grid-column: 1; }
  .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="2"] .miete-block p, .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="3"] .miete-block p { grid-column: 1; max-width: 80ch; }
  .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="2"] .miete-block .btn, .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="3"] .miete-block .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}
@media (max-width: 1023px) { .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-karte { flex-direction: column; }
  .cs-anlagen .gebraucht-miete[data-anzahl="1"] .gebraucht-karte .karte__bild { flex: none; max-width: 100%; }
}
@media (max-width: 1023px) and (min-width: 641px) { .cs-anlagen .gebraucht-miete.hat-angebote[data-anzahl="3"] .gebraucht-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-nachbildung .vorschau-demo .segment__btn { border: 1px solid rgba(43, 26, 0, .35); background: rgba(255, 255, 255, .35); }
.cs-nachbildung .vorschau-demo .segment__btn[aria-pressed="true"] { border-color: #2B1A00; }

/* Gebrauchtmarkt: weitere Fotos und ausführliche Beschreibung (nur wenn für die Anlage hinterlegt) */
.cs-anlagen .galerie-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-anlagen .galerie-thumbs .thumb { padding: 0; border: 2px solid #D6E2EE; border-radius: 8px; background: #fff; cursor: pointer; line-height: 0; overflow: hidden; width: 56px; height: 56px; }
.cs-anlagen .galerie-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-anlagen .galerie-thumbs .thumb[aria-pressed="true"] { border-color: var(--cs-blau); }
.cs-anlagen .galerie-thumbs .thumb:hover { border-color: var(--cs-blau-dunkel); }
.cs-anlagen .gebraucht-mehr { border-top: 1px solid #E1E9F1; padding-top: 8px; font-size: 14px; }
.cs-anlagen .gebraucht-mehr summary { cursor: pointer; font-weight: 600; color: var(--cs-blau); }
.cs-anlagen .gebraucht-mehr__text { margin-top: 8px; display: grid; gap: 6px; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-anlagen .gebraucht-mehr__text h4 { font-size: 13px; letter-spacing: .02em; color: var(--cs-text-leise); margin: 6px 0 0; text-transform: none; }
.cs-anlagen .gebraucht-mehr__text p { margin: 0; }

/* Ausführungen mit Foto (JK 2/145 – 2 Module) */
.cs-anlagen .variante--bild { display: flex; align-items: center; gap: 14px; list-style: none; }
.cs-anlagen .variante__bild { flex: 0 0 120px; }
.cs-anlagen .variante__bild img { display: block; width: 120px; height: auto; border-radius: 8px; }