/* fachgeschaeft-konzept.de – Bausteine im audiSys-Rahmen. Rahmen, Schrift, Kopf und Fuß kommen aus site.css + marke.css
   (Webseite-Projekt, body.p-au); hier nur Rundgang, Vergleich und Auswahl, Farben über die audiSys-Variablen. */
.marker { background: linear-gradient(transparent 60%, var(--accent) 60% 92%, transparent 92%); padding: 0 .08em; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font-size: .85rem; color: var(--muted); }
.dachzeile { font-size: var(--mono-lbl); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text); margin-bottom: .6rem; }
.nur-druck { display: none; }
[hidden] { display: none !important; }

/* Unterleiste */
.fk-leiste { background: var(--blue-soft); border-bottom: var(--hair) solid var(--line); }
.fk-leiste .wrap { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1.4rem; flex-wrap: wrap; min-height: 52px; padding-block: .4rem; }
.fk-name { display: flex; align-items: center; gap: .5rem; color: var(--head); font-weight: 700; text-decoration: none; font-stretch: 92%; font-size: 1.1rem; }
.fk-name svg { width: 1.7rem; height: 1.7rem; flex: none; }
.fk-name em { font-style: normal; font-weight: 400; color: var(--accent-text); }
.fk-menue { display: flex; gap: .2rem 1.2rem; flex-wrap: wrap; }
.fk-menue a { color: var(--head); font-weight: 600; text-decoration: none; padding-block: .3rem; border-bottom: 3px solid transparent; }
.fk-menue a:hover { border-bottom-color: var(--accent); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .55rem 1.3rem; font: 700 1rem/1.2 var(--font); color: var(--accent-ink); background: var(--accent); border: 2px solid var(--accent); border-radius: 0; cursor: pointer; text-decoration: none; margin: 0 .4rem .4rem 0; }
.knopf:hover { background: #a8d235; border-color: #a8d235; color: var(--accent-ink); }
.knopf-leise { background: transparent; color: var(--head); border-color: var(--head); }
.knopf-leise:hover { background: var(--paper-2); border-color: var(--head); color: var(--head); }
.link-knopf { font: inherit; color: var(--head); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-weight: 700; }
:where(.knopf, .paket, .pl-art, .link-knopf, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Abschnitte */
main section { scroll-margin-top: 5.5rem; padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.einstieg { padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.einstieg .wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.einstieg h1 { margin-bottom: 1.2rem; }
.einstieg .lead { margin-bottom: 1.4rem; }
.stufen-karten { list-style: none; margin: 0; padding: 1.2rem 1.5rem; background: var(--night); color: #dfe7ec; border-top: 6px solid var(--accent); }
.stufen-karten li { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.stufen-karten li:last-child { border-bottom: 0; }
.stufen-karten strong { display: block; font-size: 1.6rem; font-stretch: 92%; color: #fff; line-height: 1.1; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.abschnitt-kopf h2, .audisys-band h2 { font-size: var(--step-2); }
.abschnitt-kopf .klein { margin: 0; }
.fk-band { background: var(--band); }

/* Ihr Betrieb (Zähler wie im Planer auf audiSys.de: .pl-num/.pl-step aus site.css) */
.nur-js { display: none; }
.fk-js .nur-js { display: inline; }
.fk-js p.nur-js { display: block; }
.betrieb-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: start; }
.betrieb-mengen { border: 0; margin: 0; padding: 0; display: grid; gap: .7rem; min-width: 0; }
.betrieb-mengen, .betrieb-rechts { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--head); padding: 1rem 1.2rem; }
.pl-step button:focus-visible, .pl-step input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Mitlaufender Stand (Desktop); mobil übernimmt die Aktionsleiste */
.stand { position: sticky; bottom: 0; z-index: 20; background: var(--night); color: #fff; box-shadow: 0 -8px 24px -14px rgba(0,0,0,.5); }
.stand .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding-block: .3rem; }
.stand p { margin: 0; font-weight: 700; }
.stand .knopf { margin: 0; min-height: 44px; }
.stand .knopf:focus-visible { outline-color: var(--accent); }

/* Paketwahl */
.paketwahl-titel { font-weight: 700; color: var(--head); margin: 0 0 .5rem; }
.paketwahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1rem; }
.paket { display: block; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-top: 5px solid var(--head); padding: .8rem 1rem; cursor: pointer; min-height: 48px; }
.paket strong { display: block; font-size: 1.2rem; color: var(--head); }
.paket span { font-size: .9rem; color: var(--muted); }
.paket:hover { border-color: var(--head); }
.paket[aria-pressed="true"] { border-color: var(--head); border-top-color: var(--accent); background: var(--green-soft); }
.paket-leer { border-top-color: var(--line-strong); border-style: dashed; border-top-style: solid; }
.paket[aria-pressed="true"] strong::after { content: " ✓"; color: var(--accent-text); }
.anpass-hinweis { background: var(--surface); border-left: 5px solid var(--accent); padding: .6rem 1rem; margin: 0 0 1rem; }

/* Grundriss mit Zonen-Knöpfen */
.rundgang-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
.rundgang-raster > *, .seiten-spalte > * { min-width: 0; }
.plan-spalte, .seiten-spalte { display: grid; gap: 1rem; align-content: start; }

/* Detailbereich */
.detail { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--head); padding: 1rem 1.2rem; min-height: 12rem; }
.detail:focus { outline: none; }
.detail h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.detail h4 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.detail-leer { color: var(--muted); }
.el-liste { list-style: none; margin: .6rem 0 0; padding: 0; }
.el { padding: .6rem 0; border-bottom: 1px solid var(--paper-2); }
.el:last-child { border-bottom: 0; }
.el label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-weight: 700; color: var(--head); }
.el p { margin: .25rem 0 0 1.85rem; font-size: .93rem; }
.el a { font-size: .9rem; }
.el.aus label { color: var(--muted); font-weight: 600; }
.el-menge { display: block; font-size: .8rem; font-weight: 600; color: var(--accent-text); }
.stufe { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .05rem .4rem; margin-left: .2rem; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; vertical-align: .1em; }
.stufe-start { background: var(--paper-2); }
.stufe-komfort { background: var(--blue-soft); }
.stufe-maximal { background: var(--green-soft); color: var(--accent-text); }
.pflicht-liste { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.pflicht-liste li { margin: .3rem 0; }

/* Statische Zonenliste (ohne JavaScript) */
.zonen-statisch { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.zs { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--head); padding: 1rem 1.1rem; }
.zs h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.zs h4 { font-size: .95rem; margin: 1rem 0 .3rem; }
.zs ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.zs li { margin: .35rem 0; }

/* Vergleichstabelle */
.tabelle-rahmen { overflow-x: auto; margin-bottom: 1rem; }
.tabelle-rahmen:focus-visible { outline: 3px solid var(--focus); }
.vergleich { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: .95rem; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
.vergleich thead th { background: var(--night); color: #fff; font-weight: 700; }
.vergleich thead th:not(:first-child), .vergleich td { text-align: center; width: 7rem; }
.vergleich tbody th { font-weight: 400; }
.vergleich .vg-bereich th { background: var(--paper-2); font-weight: 700; color: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.vg-zeile { display: flex; gap: .6rem; align-items: flex-start; }
.vg-zeile input { margin-top: .2rem; }
.vergleich summary { cursor: pointer; font-weight: 700; color: var(--head); }
.vergleich details p { margin: .4rem 0 0; font-size: .9rem; max-width: 60ch; }
.vergleich td.ja { color: var(--accent-text); font-weight: 700; font-size: 1.15rem; }
.vergleich td.nein { color: var(--muted); }

/* Auswahl und Anfrage */
.auswahl-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.auswahl-block, .anfrage { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--head); padding: 1rem 1.2rem; }
.auswahl-kopf { font-weight: 700; color: var(--head); }
.auswahl-zone h3 { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.auswahl-zone ul { margin: 0; padding-left: 1.1rem; }
.auswahl-zone li { margin: .2rem 0; }
.auswahl-zone .menge { color: var(--head); white-space: nowrap; }
.betrieb-liste { margin: .3rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem 1rem; }
.betrieb-liste div { border-bottom: 1px solid var(--paper-2); padding: .2rem 0; }
.betrieb-liste dt { font-size: .8rem; color: var(--muted); }
.betrieb-liste dd { margin: 0; font-weight: 700; color: var(--head); }
#auswahl-betrieb h3 { font-size: 1.05rem; margin: .6rem 0 0; }
.link-feld { width: 100%; margin-top: .4rem; font: inherit; }
.auswahl-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.auswahl-zusatz { color: var(--accent-text); font-size: .85rem; font-weight: 700; }
.anfrage h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.anfrage .field { margin-bottom: .8rem; }
.anfrage label { font-weight: 700; }
.anfrage input:not([type="checkbox"]), .anfrage textarea { width: 100%; font: inherit; }
.haken { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; margin: .4rem 0 1rem; }
.status { font-weight: 700; color: var(--head); min-height: 1.5em; }
.status.fehler { color: #b3261e; }

/* audiSys-Band */
.audisys-band { background: var(--surface); border-top: 6px solid var(--accent); }
.audisys-band .lead { margin: .8rem 0 1.2rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.kacheln a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--head); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); }
.kacheln a:hover { border-color: var(--head); border-top-color: var(--accent); }
.kacheln strong { display: block; font-size: 1.1rem; line-height: 1.25; color: var(--head); margin-bottom: .3rem; }
.kacheln span { color: var(--muted); font-size: .9rem; }
.audisys-kontakt { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; margin: 1.4rem 0 0; }

/* Textseiten */
.textseite { padding: clamp(1.8rem, 5vw, 3.5rem) 0; }
.textseite .blatt { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--head); padding: clamp(1.1rem, 4vw, 2.5rem); max-width: 50rem; }
.textseite h1 { font-size: var(--step-3); margin-bottom: .8rem; }
.textseite h2 { font-size: 1.3rem; margin: 1.6em 0 .5em; }
.footer .fk-gewaehr { color: var(--muted); margin: 1.4rem 0 0; max-width: 60ch; }

@media (max-width: 960px) {
  .einstieg .wrap, .rundgang-raster, .auswahl-raster, .betrieb-raster { grid-template-columns: 1fr; }
  .paketwahl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .stand { display: none !important; }
}
/* Mobil */
@media (max-width: 700px) {
  .paket { padding: .6rem .7rem; }
  .paket strong { font-size: 1.05rem; }
  .paket span { font-size: .8rem; }
  .vergleich th, .vergleich td { padding: .5rem .3rem; }
  .vergleich thead th:not(:first-child), .vergleich td { width: 2.8rem; font-size: .7rem; }
  .vergleich { font-size: .88rem; }
  .vg-zeile { gap: .35rem; }
  .vg-zeile input { width: 1.1rem; height: 1.1rem; }
  .vergleich tbody th { padding-left: .5rem; }
  .vergleich thead th:first-child { width: auto; }
}

/* Druck: nur die Auswahl */
@media print {
  .skip, .gruppe, .topbar, .fk-leiste, .footer, .aktionsleiste, .einstieg, #betrieb, .stand, #rundgang, #vergleich, .audisys-band, .anfrage, .auswahl-knoepfe, #link-status, .auswahl-block p.nur-js { display: none !important; }
  #auswahl { background: none; padding: 0; }
  .auswahl-raster { display: block; }
  .auswahl-block { border: 0; padding: 0; }
  .nur-druck { display: block; }
  a { color: inherit; text-decoration: none; }
}

/* Räume im Geschäft (Skizze wächst mit der Auswahl, 27.10.2026) */
.raeume { border: 0; margin: 1rem 0 0; padding: 0; display: grid; gap: .35rem; }
.raeume legend { font-weight: 700; color: var(--head); padding: 0; margin-bottom: .2rem; }
.raeume .klein { margin: 0 0 .3rem; }
.el-herkunft { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
.betrieb-liste .betrieb-breit { grid-column: 1 / -1; }
.raeume .haken { margin: 0; }

/* Grundriss im Abschnitt „Ihr Laden“ (planer.js, 27.10.2026) */
.planer-leiste { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; margin-bottom: .8rem; }
.pl-feld { display: grid; gap: .25rem; }
.pl-feld label { font-size: .85rem; font-weight: 700; color: var(--head); }
.pl-feld input, .pl-select { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink, var(--head)); min-height: 44px; }
.planer-leiste .pl-feld input { width: 7rem; }
.pl-datei-knopf { cursor: pointer; }
.pl-datei-knopf:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pl-hinweis { min-height: 1.5rem; margin: 0 0 .8rem; font-size: .95rem; color: var(--head); }
.pl-hinweis input { width: 7rem; font: inherit; padding: .35rem .5rem; border: 1px solid var(--line-strong); }
.pl-ansicht { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .9rem; margin-bottom: -.4rem; }
.pl-ansicht span { color: var(--muted); margin-right: .3rem; }
.pl-ansicht button { font: inherit; padding: .3rem .75rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--head); cursor: pointer; }
.pl-ansicht button[aria-pressed="true"] { background: var(--head); border-color: var(--head); color: #fff; }
.planer-flaeche { background: var(--surface); border: 1px solid var(--line); padding: .5rem; }
.pl-svg { display: block; width: 100%; height: auto; max-height: 78vh; user-select: none; -webkit-user-select: none; }
.pl-ziehbar { cursor: grab; touch-action: none; }
.pl-griff { cursor: nwse-resize; touch-action: none; }
.pl-ecke, .pl-kante { cursor: move; touch-action: none; }
.pl-raum:focus { outline: none; }
.pl-raum:focus-visible > rect:first-of-type { stroke: var(--focus); stroke-width: 12; }
.pl-obj:focus { outline: none; }
.pl-obj:focus-visible > :nth-child(2) { stroke: var(--focus); stroke-width: 6; }
.pl-auswahl, .pl-neu { background: var(--surface); border: 1px solid var(--line); padding: .9rem 1.1rem; display: grid; gap: .6rem; }
.pl-auswahl h3 { margin: 0; font-size: 1.05rem; }
.pl-auswahl p { margin: 0; }
.pl-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pl-felder input { width: 100%; }
.pl-neu { display: grid; gap: .3rem; }
.pl-neu label { font-weight: 700; font-size: .85rem; color: var(--head); }
.pl-neu-zeile { display: flex; gap: .5rem; }
.pl-neu-zeile select { flex: 1; min-width: 0; }
.pl-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.pl-legende em { color: var(--muted); font-style: normal; }
.pl-sym-mini { width: 1.6rem; height: 1.6rem; margin-right: .5rem; vertical-align: middle; flex: none; }
.pl-legende li { display: flex; align-items: center; flex-wrap: wrap; }
.pl-neu-zeile select { width: 100%; }
.pl-neu-zeile .knopf { flex: none; padding-left: .9rem; padding-right: .9rem; }
.pl-einrichten p { margin: 0 0 .4rem; font-weight: 700; font-size: .9rem; color: var(--head); }
#pl-palette, #pl-symbole { display: flex; flex-wrap: wrap; gap: .4rem; }
.pl-einrichten + .pl-einrichten { margin-top: .7rem; }
.pl-art-icon { width: 1.4rem; height: 1.4rem; margin-right: .4rem; vertical-align: -.35rem; }
.pl-warn { margin: 0; color: #b45309; font-weight: 700; font-size: .9rem; }
.pl-pruefung { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.pl-pruefung .link-knopf { text-align: left; color: #b45309; }
.pl-art { font: 600 .85rem/1.2 var(--font); color: var(--head); background: var(--surface); border: 1px solid var(--line-strong); padding: .5rem .7rem; min-height: 40px; cursor: pointer; }
.pl-art:hover { background: var(--green-soft, #eef5dc); }
.pl-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pl-legende-titel { margin: 0; font-size: 1.05rem; }

/* Eine Arbeitsfläche (28.10.2026): Umschalter Grundriss/Liste, Ausführungen je Gerät, mobil Ausstattung als Leiste unten */
.sicht-wahl { display: flex; gap: 0; margin: 0 0 1rem; }
.sicht-wahl button { font: inherit; font-weight: 700; padding: .55rem 1.1rem; border: 1px solid var(--head); background: var(--surface); color: var(--head); cursor: pointer; }
.sicht-wahl button + button { border-left: 0; }
.sicht-wahl button[aria-pressed="true"] { background: var(--head); color: #fff; }
.liste > .klein { max-width: 70ch; }
.el-opt { margin: .4rem 0 0 1.85rem; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .88rem; color: var(--head); }
.el-opt label { display: inline-flex; gap: .35rem; align-items: center; font-weight: 400; cursor: pointer; }
.el-opt-titel { color: var(--muted); width: 100%; font-size: .8rem; }
.vg-opt { margin-left: 0; }
.auswahl-opt { color: var(--muted); font-size: .9rem; }
.detail-zahl { color: var(--accent-text); font-weight: 600; }
.blatt-griff { display: none; }
@media (max-width: 960px) {
  .seiten-spalte { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 25; background: var(--surface);
    border-top: 6px solid var(--head); box-shadow: 0 -12px 30px -14px rgba(0,0,0,.45); gap: 0; }
  .blatt-griff { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: .5rem 1rem;
    font: inherit; font-weight: 700; color: var(--head); background: var(--surface); border: 0; cursor: pointer; text-align: left; }
  .blatt-griff::after { content: "▲"; font-size: .8rem; margin-left: .8rem; }
  .blatt-griff[aria-expanded="true"]::after { content: "▼"; }
  .blatt-inhalt { display: none; max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 .6rem .8rem; }
  .seiten-spalte.offen .blatt-inhalt { display: grid; gap: 1rem; }
  .seiten-spalte .detail { border-top-width: 1px; }
}
@media (min-width: 821px) and (max-width: 960px) {
  .seiten-spalte { bottom: 0; }
}

/* Zugang (28.10.2026): Vorschau mit Registrierung/Anmeldung, Leiste im Planer */
.vorschau-bild { margin: 0; }
.vorschau-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(0,0,0,.45); }
.vorschau-bild figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.kann-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.kann-liste li { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: 1rem 1.1rem; display: grid; gap: .35rem; }
.kann-liste strong { color: var(--head); }
.kann-liste span { font-size: .95rem; }
.zugang-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.2rem; align-items: start; }
.zugang-hinweis { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--accent); padding: .8rem 1rem; font-weight: 600; color: var(--head); }
.konto-leiste { background: var(--paper-2); font-size: .88rem; }
.konto-leiste .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; min-height: 36px; padding-block: .3rem; }
.konto-leiste #speicher-status { color: var(--muted); }
.konto-leiste a { margin-left: auto; }
@media (max-width: 960px) { .zugang-raster { grid-template-columns: 1fr; } }

/* Vorschau mit Beispielladen (28.10.2026) */
.zahlen-band { background: var(--night); color: #fff; }
.zahlen { list-style: none; margin: 0; padding: 1.2rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.zahlen li { display: grid; gap: .15rem; }
.zahlen strong { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: var(--accent); }
.zahlen span { font-size: .92rem; opacity: .9; }
.demo-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 1.2rem; align-items: start; }
.demo-plan { background: var(--surface); border: 1px solid var(--line); padding: .5rem; }
.demo-svg { display: block; width: 100%; height: auto; }
.demo-raum { cursor: pointer; }
.demo-raum rect:first-child { transition: fill .15s; }
.demo-raum:hover rect:first-child { fill: #f4f9e8; }
.demo-raum.an rect:first-child { fill: #eef5dc; }
.demo-raum:focus-visible { outline: 3px solid var(--accent); }
.demo-karte { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--head); padding: 1rem 1.2rem; min-height: 16rem; }
.demo-karte h3 { font-size: 1.35rem; margin: 0 0 .6rem; }
.demo-zahlen { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.demo-zahlen li { display: grid; }
.demo-zahlen strong { font-size: 1.6rem; color: var(--accent-text); line-height: 1.1; }
.demo-zahlen span { font-size: .82rem; color: var(--muted); }
.demo-zeile { font-size: .95rem; }
.demo-muster { border: 1px dashed var(--line-strong); padding: .7rem .9rem; margin-top: .8rem; background: var(--paper-2); }
.demo-muster p { margin: .2rem 0; }
.demo-muster-titel, .demo-opt-titel { font-size: .8rem; color: var(--muted); }
.demo-geraet { font-weight: 700; color: var(--head); display: flex; gap: .5rem; align-items: center; }
.demo-haken, .demo-kasten { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border: 2px solid var(--head); font-size: .75rem; line-height: 1; flex: none; }
.demo-haken, .demo-kasten.an { background: var(--head); color: #fff; }
.demo-opt { display: flex; gap: .5rem; align-items: center; font-size: .9rem; margin-left: 1.6rem !important; }
.demo-dose { font-size: .85rem; color: var(--accent-text); }
.demo-mehr { margin: 1rem 0 0; font-weight: 700; }
.demo-weiter { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.ablauf { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ablauf li { counter-increment: s; background: var(--surface); border: 1px solid var(--line); padding: 1rem 1.1rem; display: grid; gap: .35rem; align-content: start; }
.ablauf li::before { content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--accent); color: var(--accent-ink, #071b2a); font-weight: 800; font-size: 1.1rem; }
.ablauf strong { color: var(--head); }
.ablauf span, .fuer-liste span { font-size: .95rem; }
.fuer-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.fuer-liste li { border-left: 5px solid var(--accent); background: var(--surface); padding: .9rem 1rem; display: grid; gap: .3rem; }
.fuer-liste strong { color: var(--head); }
.fragen details { border-bottom: 1px solid var(--line); padding: .8rem 0; max-width: 60rem; }
.fragen summary { cursor: pointer; font-weight: 700; color: var(--head); }
.fragen p { margin: .5rem 0 0; }
@media (max-width: 960px) {
  .demo-raster { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .zahlen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } }