/* KnowNX Planer – Regeln gelten nur innerhalb des Planer-Bereichs (.planer).
   Grundlagen wie Farben, Schrift, Kopf und Fuß kommen aus /assets/seiten/seiten.css. */

html:has(dialog[open]) { overflow: hidden; }

.planer {
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  scroll-margin-top: 96px;

  h2.schritt-titel { font-size: 1.875rem; margin: 0 0 0.5rem; }
  h2.schritt-titel:focus { outline: none; }
  h3 { font-size: 1.375rem; margin: 2.25rem 0 0.75rem; }
  h4 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
  p { margin: 0 0 0.75rem; max-width: 70ch; }
  ul, ol { margin-top: 0; }
  /* Abstand zwischen Listenpunkten aus inhalt.css im Planer zurücksetzen (Schritte, Raum- und Etagenlisten) */
  li + li { margin-top: 0; }
  #planer-app { padding: 1.5rem 0 1rem; }

  /* Kopf und Schritte */

  .marker { font-size: 0.875rem; font-weight: 500; color: var(--kupfer-text); border: 1px solid currentColor; border-radius: 999px; padding: 0.1rem 0.6rem; }

  .schritte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
  .schritte ol { list-style: none; margin: 0; padding: 0 0.75rem; display: flex; gap: 0.25rem; overflow-x: auto; }
  .schritte button {
    font: inherit; color: var(--leise); background: none; border: 0; cursor: pointer;
    padding: 0.85rem 1rem 0.75rem; border-block-end: 3px solid transparent;
    display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; min-height: 48px;
  }
  .schritte button:hover { color: var(--text); }
  .schritte button[aria-current="step"] { color: var(--text); font-weight: 600; border-block-end-color: var(--kupfer); }
  .schritt-nr {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1.5px solid currentColor; font-size: 0.875rem; font-weight: 600;
  }
  .schritte button[aria-current="step"] .schritt-nr { background: var(--kupfer); border-color: var(--kupfer); color: var(--kupfer-knopf-text); }

  .projektleiste { margin: 1rem 0 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
  .speicherhinweis { margin: 0; color: var(--leise); font-size: 0.9375rem; }
  .projektaktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

  .einleitung { font-size: 1.1875rem; color: var(--leise); margin-block-end: 1.5rem; }
  .hinweis, .leise-text, .feld-hinweis { color: var(--leise); }
  .feld-hinweis { font-size: 0.9375rem; margin: 0 0 0.35rem; }
  .laden { color: var(--leise); }
  .leerzustand { font-size: 1.1875rem; margin-block: 1.5rem; }

  /* Knöpfe */

  .knopf {
    font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; padding: 0.6rem 1.15rem;
    border-radius: var(--radius); border: 1.5px solid var(--kupfer-knopf);
    background: var(--kupfer-knopf); color: var(--kupfer-knopf-text);
  }
  .knopf:hover { filter: brightness(1.08); }
  .knopf.leise { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); font-weight: 500; }
  .knopf.leise:hover { border-color: var(--kupfer); filter: none; }
  .knopf.klein { min-height: 40px; padding: 0.35rem 0.8rem; font-size: 0.9375rem; }
  .knopf.warnend { background: var(--fehler); border-color: var(--fehler); color: var(--flaeche); }
  .knopf:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
  /* Funktionen, die bald kommen: lesbar, aber erkennbar nicht verfügbar */
  .knopf.bald:disabled { opacity: 1; color: var(--leise); border-style: dashed; display: inline-flex; align-items: center; gap: 0.45rem; }
  .bald-marke { font-size: 0.75rem; font-weight: 600; color: var(--kupfer-text); border: 1px solid currentColor; border-radius: 999px; padding: 0.05rem 0.5rem; white-space: nowrap; }
  @media (pointer: coarse) { .knopf.klein { min-height: 48px; } }

  .weiter { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--linie); }
  .weiter .knopf:last-child { margin-inline-start: auto; }
  .zeilen-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  /* Formularfelder */

  .feld { display: flex; flex-direction: column; gap: 0.25rem; margin-block-end: 1rem; }
  .feld.schmal { max-width: 24rem; }
  .feld label, .zaehler-anzahl label { font-weight: 500; }
  input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select {
    font: inherit; color: var(--text); background: var(--flaeche);
    border: 1.5px solid var(--linie-stark); border-radius: var(--radius);
    padding: 0.6rem 0.75rem; min-height: 48px; width: 100%;
  }
  input[type="number"] { max-width: 7rem; }
  input:user-invalid { border-color: var(--fehler); background: var(--fehler-hauch); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--kupfer); width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }

  .auswahl { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
  .auswahl.gesperrt { color: var(--leise); cursor: not-allowed; }
  .grund { font-size: 0.9375rem; }

  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  legend { font-weight: 600; padding: 0; }

  /* Etagen */

  .etagenliste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
  .etage-zeile {
    display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.5fr) auto; gap: 0.75rem; align-items: end;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.85rem 1rem;
  }
  .etage-zeile .feld { margin: 0; }
  @media (max-width: 40rem) { .etage-zeile { grid-template-columns: 1fr; } }

  /* Räume */

  .etage-block { margin-block-end: 2rem; }
  .etage-block h4 .leise-text { font-weight: 400; font-size: 1rem; }
  .raumliste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
  .raum {
    display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr auto; gap: 0.5rem 1.25rem; align-items: center;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.75rem 1rem;
  }
  .raum p { margin: 0; }
  .raum-name { font-weight: 600; }
  .raum-meta { color: var(--leise); font-size: 0.9375rem; }
  .raum-info { color: var(--leise); font-size: 0.9375rem; }
  /* Prüfstatus: ungeprüfte Räume mit Kupferkante und Etikett, geprüfte mit Häkchen */
  .raum.offen { border-color: var(--kupfer); box-shadow: inset 4px 0 0 var(--kupfer); }
  .raum-status { display: inline-flex; align-items: center; gap: 0.35rem; margin-block-start: 0.35rem !important; font-size: 0.8125rem; font-weight: 600; }
  .raum-status.offen { color: var(--kupfer-text); border: 1px solid currentColor; border-radius: 999px; padding: 0.05rem 0.55rem; width: fit-content; }
  .raum-status.ok { color: var(--leise); font-weight: 500; }
  .raum-status.ok::before { content: ""; inline-size: 0.5rem; block-size: 0.85rem; border: solid var(--kupfer); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); margin-inline: 0.15rem 0.2rem; }
  .pruef-fortschritt { background: var(--kupfer-hauch); border-inline-start: 4px solid var(--kupfer); border-radius: var(--radius); padding: 1rem 1.25rem; margin-block: 0 1.5rem; display: grid; gap: 0.6rem; justify-items: start; }
  .pruef-fortschritt p { margin: 0; max-width: 46rem; }
  .pruef-fortschritt progress { max-width: 28rem; }
  .pruef-titel { font-weight: 600; }
  /* Bestand des Objekts (Kontrolle vor den Funktionen und Grundlagen im Ausdruck) */
  .bestand table { width: 100%; min-width: 0; }
  .bestand th, .bestand td { hyphens: auto; }
  .bestand td.verteilung { overflow-wrap: anywhere; }
  .bestand tbody th[scope="row"] { width: 34%; }
  @media (max-width: 36rem) { .bestand th, .bestand td { padding-inline: 0.5rem; } .bestand td.verteilung { font-size: 0.875rem; } }
  .bestand tr.bereich th { padding-block-start: 1rem; font-weight: 700; color: var(--kupfer-text); border-block-end: 1px solid var(--linie-stark); }
  .bestand td.zahl, .bestand th.zahl { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .bestand td.zahl { font-weight: 600; }
  .bestand td.verteilung { color: var(--leise); font-size: 0.9375rem; }
  .bestand .fehlt { color: var(--kupfer-text); font-weight: 600; }
  /* Grundlagen dieser Planung */
  .grundlagen { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); margin-block: 2rem; }
  .grundlagen > summary { cursor: pointer; padding: 1rem 1.25rem; list-style-position: inside; }
  .grundlagen > summary:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .grundlagen-titel { font-weight: 700; font-size: 1.125rem; }
  .grundlagen-inhalt { padding: 0 1.25rem 1.25rem; }
  .grundlagen-inhalt h3 { margin-block: 1.75rem 0.75rem; }
  .funktionsliste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.6rem; }
  .funktionsliste p { margin: 0; }
  .funktionsgruppe h4 { margin-block: 1rem 0.5rem; }
  .praesenz-info { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: 0.75rem 1.25rem; margin-block: 0 1.5rem; }
  .praesenz-info > summary { cursor: pointer; font-weight: 600; }
  .praesenz-info > summary:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .praesenz-info[open] > summary { margin-block-end: 0.5rem; }
  .praesenz-info ul { margin-block: 0 0.75rem; }
  .pruef-fortschritt.fertig { background: var(--flaeche); border: 1px solid var(--linie); border-inline-start: 4px solid var(--kupfer); }
  @media (max-width: 48rem) { .raum { grid-template-columns: 1fr; } }

  /* Dialoge */

  dialog {
    color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
    padding: 0; width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  }
  dialog::backdrop { background: rgb(28 31 34 / 0.6); }
  #raum-formular { padding: 1.5rem; }
  #raum-formular h2 { margin-block: 0 1.25rem; }
  #frage-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 1.5rem; }
  #beta-dialog { width: min(36rem, calc(100vw - 2rem)); }
  .beta-inhalt { padding: 1.5rem 1.75rem; }
  .beta-inhalt h2 { margin-block: 0.5rem 0.75rem; font-size: 1.5rem; }
  .beta-inhalt h3 { margin-block: 1.25rem 0.35rem; font-size: 1.0625rem; }
  .beta-inhalt p { margin-block: 0 0.5rem; }
  .beta-etikett { margin: 0; }
  #frage-dialog p { font-size: 1.125rem; }
  .dialog-aktionen { display: flex; justify-content: flex-end; gap: 0.75rem; margin-block-start: 1.5rem; flex-wrap: wrap; }
  #raum-formular .dialog-aktionen {
    position: sticky; inset-block-end: 0; background: var(--flaeche);
    margin: 1.5rem -1.5rem -1.5rem; padding: 1rem 1.5rem; border-block-start: 1px solid var(--linie);
  }

  .grunddaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  @media (max-width: 36rem) { .grunddaten { grid-template-columns: 1fr; } }

  .gruppe { border-block-start: 1px solid var(--linie); padding-block: 1.25rem 0.5rem; margin-block-start: 1.25rem; }
  .gruppe > legend { float: left; width: 100%; font-size: 1.0625rem; margin-block-end: 0.75rem; }
  .gruppe > legend + * { clear: both; }
  .zaehler { display: flex; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; min-height: 52px; }
  .zaehler > .auswahl { min-width: 15rem; }
  .zaehler-anzahl { display: flex; align-items: center; gap: 0.6rem; }
  .zaehler-anzahl input { width: 6rem; }
  .radios, .checkboxen { margin-block: 0.5rem 1rem; }
  .radios legend, .checkboxen legend { font-weight: 500; margin-block-end: 0.25rem; }
  .radios .auswahl, .checkboxen .auswahl { display: inline-flex; margin-inline-end: 1.25rem; }
  .reihe { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
  .reihe .feld.zahl { margin-block-end: 0.35rem; }
  .reihe-hinweis { margin-block: 0 0.75rem; }
  .feld.zahl { margin-block-end: 0.75rem; }

  /* Wenn-Dann-Fragen */

  .fortschritt { display: grid; gap: 0.35rem; max-width: 24rem; margin-block-end: 1rem; color: var(--leise); }
  progress { width: 100%; height: 0.5rem; accent-color: var(--kupfer); }

  .fragengruppe h3 { margin-block-start: 2.75rem; }
  .frage {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1rem; margin-block-end: 0.75rem;
  }
  .frage.status-ja { border-color: var(--kupfer); box-shadow: inset 4px 0 0 var(--kupfer); }
  .frage.status-nein .satz { color: var(--leise); }

  .satz {
    display: grid; gap: 0.15rem; font-size: 1.3125rem; line-height: 1.3; margin-block-end: 1rem;
    padding-inline-start: 1rem; border-inline-start: 2px solid var(--kupfer); max-width: none;
  }
  .satz .wenn { font-weight: 400; }
  .satz .dann { font-weight: 600; padding-inline-start: 1.5rem; }

  .antwort { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .antwort-wahl { position: relative; cursor: pointer; }
  .antwort-wahl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .antwort-wahl span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.1rem;
    border: 1.5px solid var(--linie-stark); border-radius: 999px; font-weight: 500;
  }
  .antwort-wahl input:checked + span { background: var(--kupfer-knopf); border-color: var(--kupfer-knopf); color: var(--kupfer-knopf-text); }
  .antwort-wahl input:focus-visible + span { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .antwort-wahl:hover span { border-color: var(--kupfer); }

  .beschreibung { color: var(--leise); font-size: 0.9375rem; margin-block: 0.75rem 0; }
  .raumwahl, .optionen { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--linie); }
  .raumwahl legend, .optionen legend { float: left; width: 100%; margin-block-end: 0.5rem; }
  .raumwahl legend + *, .optionen legend + * { clear: both; }
  .raumwahl-etage { margin-block-end: 0.75rem; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .raumwahl-titel { flex-basis: 100%; max-width: none; margin: 0.25rem 0 0; color: var(--leise); font-size: 0.9375rem; font-weight: 500; }
  .raumwahl-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.25rem; }
  .raumwahl .auswahl .leise-text { font-size: 0.875rem; }
  .option-teilweise { margin: 0.1rem 0 0.4rem 1.85rem; font-size: 0.875rem; }
  .je-raum { margin-block-start: 0.75rem; }
  .je-raum > summary { cursor: pointer; font-weight: 500; color: var(--kupfer-text); }
  .je-raum > summary:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .je-raum-raum { border: 0; padding: 0; margin: 0.75rem 0 0; }
  .je-raum-raum legend { font-weight: 600; margin-block-end: 0.25rem; }
  .zentral-hinweis { color: var(--leise); font-size: 0.9375rem; background: var(--kupfer-hauch); border-radius: var(--radius); padding: 0.6rem 0.9rem; }
  .textknopf { font: inherit; color: var(--kupfer-text); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; min-height: 0; }
  .textknopf:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .warnung {
    margin: 0.25rem 0 0.5rem 1.85rem; padding: 0.5rem 0.75rem; font-size: 0.9375rem;
    background: var(--kupfer-hauch); border-inline-start: 3px solid var(--kupfer);
  }

  /* Funktionen Raum für Raum */
  .funktionen-raster { display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 24px; }
  .stationen { position: sticky; top: 96px; max-height: calc(100dvh - 120px); overflow-y: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px; }
  .stationen ol { list-style: none; margin: 0; padding: 0; }
  .stationen li { margin: 0; }
  .stationen-etage + .stationen-etage { margin-top: 10px; }
  .stationen-titel { margin: 4px 8px 4px; font-size: 0.85rem; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: 0.04em; }
  .station { width: 100%; text-align: start; font: inherit; color: var(--text); background: none; border: 0; border-radius: 6px; padding: 9px 10px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; min-height: 48px; }
  .station:hover { background: var(--grund); }
  .station[aria-current="step"] { background: var(--kupfer-hauch); box-shadow: inset 3px 0 0 var(--kupfer); }
  .station-name { font-weight: 600; }
  .station-typ { grid-column: 1; font-size: 0.85rem; color: var(--leise); }
  .station-stand { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.85rem; color: var(--leise); white-space: nowrap; }
  .station.fertig .station-stand { color: var(--kupfer-text); font-weight: 600; }
  .raumfragen-kopf h3 { margin: 0 0 4px; font-size: 1.6rem; }
  .raumfragen-kopf h3:focus { outline: none; }
  .raumfragen-kopf p { margin: 0 0 14px; }
  .raumfragen-aktionen { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: end; margin-bottom: 8px; }
  .uebernehmen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .uebernehmen label { font-size: 0.95rem; color: var(--leise); }
  .uebernehmen select { width: auto; min-height: 40px; padding: 6px 10px; }
  .fragengruppe h4 { font-size: 1.15rem; margin: 28px 0 10px; }
  .empfohlen { display: inline-block; margin: 0 0 10px; font-size: 0.85rem; font-weight: 600; color: var(--kupfer-text); background: var(--kupfer-hauch); border-radius: 999px; padding: 2px 10px; }
  @media (max-width: 62rem) {
    .funktionen-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .stationen { position: static; max-height: none; overflow-x: auto; padding: 8px; }
    .stationen > ol { display: flex; gap: 6px; width: max-content; }
    .stationen-etage + .stationen-etage { margin-top: 0; }
    .stationen-etage { display: flex; align-items: center; gap: 4px; }
    .stationen-etage > ol { display: flex; gap: 4px; }
    .stationen-titel { margin: 0 4px; }
    .station { width: auto; white-space: nowrap; }
    .station-typ { display: none; }
  }

  /* Geräteliste */

  .kennzahlen { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0 0 1.5rem; }
  .kennzahlen dt { color: var(--leise); font-size: 0.9375rem; }
  .kennzahlen dd { margin: 0; font-size: 1.625rem; font-weight: 600; }

  .hinweiskasten { background: var(--kupfer-hauch); border-inline-start: 4px solid var(--kupfer); border-radius: var(--radius); padding: 1rem 1.25rem; margin-block: 1.5rem; }
  .hinweiskasten h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
  .hinweiskasten ul { margin: 0; padding-inline-start: 1.25rem; }
  .hinweiskasten li + li { margin-block-start: 0.4rem; }

  .tabelle { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
  table { border-collapse: collapse; width: 100%; min-width: 34rem; }
  caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  th, td { text-align: start; padding: 0.6rem 1rem; border-block-end: 1px solid var(--linie); vertical-align: top; }
  thead th { font-size: 0.9375rem; font-weight: 500; color: var(--leise); }
  tbody th { font-weight: 500; }
  tbody tr:last-child > * { border-block-end: 0; }
  td:last-child { color: var(--leise); font-size: 0.9375rem; }
  .menge { text-align: end; width: 4.5rem; font-weight: 600; white-space: nowrap; }
  thead .menge { font-weight: 500; }

  .aufteilung { margin-block: 0.75rem 0; }
  .aufteilung summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
  .aufteilung > ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
  .aufteilung .raum-name { margin: 0 0 0.25rem; }
  .aufteilung ul ul { padding-inline-start: 1rem; margin: 0; color: var(--leise); font-size: 0.9375rem; }

  /* Herstellerwahl */

  .herstellerbereich { margin-block: 2rem 1.5rem; }
  .herstellerwahl-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
  .herstellerwahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.15rem; }
  .herstellerwahl legend { float: left; width: 100%; font-size: 1.0625rem; }
  .herstellerwahl legend + * { clear: both; }
  .herstellerwahl-optionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.5rem; }
  .herstellerwahl-option { position: relative; cursor: pointer; }
  .herstellerwahl-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .herstellerwahl-inhalt {
    display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.35rem 0.9rem;
    border: 1.5px solid var(--linie-stark); border-radius: var(--radius); font-weight: 500;
  }
  .herstellerwahl-option:hover .herstellerwahl-inhalt { border-color: var(--kupfer); }
  .herstellerwahl-option input:checked + .herstellerwahl-inhalt { border-color: var(--kupfer); box-shadow: inset 0 0 0 1.5px var(--kupfer); background: var(--kupfer-hauch); }
  .herstellerwahl-option input:focus-visible + .herstellerwahl-inhalt { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  /* Logos stehen immer auf hellem Grund, damit sie auch im Dunkelmodus lesbar bleiben */
  .herstellerlogo { height: 1.4rem; width: auto; max-width: 5.5rem; background: #fff; border-radius: 3px; padding: 0.15rem 0.3rem; box-sizing: content-box; }
  /* Knopf nur mit Logo: Logo etwas größer und mittig */
  .mit-logo .herstellerwahl-inhalt { justify-content: center; min-width: 7.5rem; }
  .mit-logo .herstellerlogo { height: 1.6rem; max-width: 7rem; }
  .marken-hinweis { color: var(--leise); font-size: 0.875rem; margin-block-start: 0.75rem; }

  /* Artikeltabellen */

  table.produkte { min-width: 40rem; }
  .preis { text-align: end; white-space: nowrap; width: 7.5rem; }
  td.preis { font-weight: 500; }
  .produkte td:last-child { color: var(--text); font-size: inherit; }
  .pos-titel { font-weight: 600; margin: 0 0 0.2rem; }
  .artikel { list-style: none; padding: 0; margin: 0 0 0.25rem; font-weight: 400; font-size: 0.9375rem; }
  .artikel li + li { margin-block-start: 0.15rem; }
  .artikelnr { font-weight: 600; white-space: nowrap; }
  .produkte th p { margin: 0; font-weight: 400; }
  .produkte th .pos-titel { font-weight: 600; }
  .produkte th p.leise-text { font-size: 0.875rem; }
  .ohne-artikel { color: var(--kupfer-text); font-size: 0.9375rem; }
  .pos-hinweis { color: var(--leise); font-size: 0.875rem; margin-block-start: 0.2rem !important; }
  tr.generisch td.menge { color: var(--leise); }

  .summen { margin-block-start: 2rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
  .summen h3 { margin: 0 0 0.75rem; font-size: 1.1875rem; }
  .summen dl { margin: 0 0 0.75rem; display: grid; gap: 0.3rem; max-width: 26rem; }
  .summen dl div { display: flex; justify-content: space-between; gap: 1rem; }
  .summen dd { margin: 0; font-weight: 500; }
  .summen .gesamt { border-block-start: 1px solid var(--linie); padding-block-start: 0.4rem; font-weight: 600; font-size: 1.1875rem; }
  .summen .gesamt dd { font-weight: 600; }
  .summen .hinweis { font-size: 0.9375rem; margin: 0; }

  /* Allgemeine Bausteine */
  .kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.15rem; }
  .kasten > legend { float: left; width: 100%; font-size: 1.0625rem; margin-block-end: 0.5rem; }
  .kasten > legend + * { clear: both; }
  /* Auswahl mit Überschrift und Erklärtext: Häkchen oder Optionsfeld immer auf Höhe der ersten Zeile */
  .auswahl.oben, .auswahl:has(.block) { align-items: flex-start; padding-block: 0.35rem; }
  .auswahl.oben input, .auswahl:has(.block) > input { margin-block-start: 0.2rem; }
  .block { display: block; font-size: 0.9375rem; margin-block-start: 0.1rem; }
  .unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .feld.inline { flex-direction: row; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .feld.inline select { width: auto; }
  .feld.inline input[type="number"] { width: 6rem; }
  p.hinweiskasten { margin-block: 1rem 0; max-width: 70ch; }

  /* Hausvorlagen */
  .vorlagen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
  .vorlage-karte {
    width: 100%; height: 100%; min-height: 6.5rem; font: inherit; color: var(--text); text-align: start; cursor: pointer;
    display: grid; align-content: start; gap: 0.3rem; padding: 1rem 1.15rem;
    background: var(--flaeche); border: 1.5px solid var(--linie-stark); border-radius: var(--radius);
  }
  .vorlage-karte:hover { border-color: var(--kupfer); }
  .vorlage-karte:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .vorlage-karte.leer { border-style: dashed; }
  .vorlage-name { font-weight: 600; font-size: 1.125rem; }
  .vorlage-text { color: var(--leise); font-size: 0.9375rem; }
  .anpassen-raster, .vorschau { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: start; }
  .anpassen-raster .feld.zahl { margin-block-end: 0.5rem; }

  /* Räume hinzufügen */
  .hinzufuegen { margin-block: 1.5rem 0; background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: var(--radius); padding: 1rem 1.15rem; }
  .hinzufuegen h4 { margin: 0 0 0.75rem; }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chips-titel { margin: 1rem 0 0.4rem; color: var(--leise); font-size: 0.9375rem; font-weight: 500; }
  .chip {
    font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--text); cursor: pointer;
    min-height: 44px; padding: 0.4rem 0.95rem; border-radius: 999px;
    background: var(--grund); border: 1.5px solid var(--linie-stark);
  }
  .chip:hover { border-color: var(--kupfer); }
  .chip:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .chip.leise { background: none; border-style: dashed; }
  .chip:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Licht, Verteiler und Mitplanen in Schritt 1 */
  .licht-wahl, .verteiler-wahl { margin-block-start: 2.25rem; }
  .licht-wahl .kasten { max-width: 52rem; }
  .licht-optionen { margin: 0.5rem 0 0.25rem 1.85rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--linie); }
  .mitplanen { margin-block-start: 2.25rem; max-width: 52rem; }
  .mitplanen h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }

  /* Netzwerk und Sicherheit */
  .netz-abschnitt { margin-block-start: 2.75rem; }
  .netz-abschnitt > h3 { margin-block-start: 0; }
  .netz-details { margin: 0.75rem 0 0 1.85rem; }
  @media (max-width: 40rem) { .netz-details, .licht-optionen { margin-inline-start: 0; } }
  .schalter strong { font-weight: 600; }
  .szenarien { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
  .szenario { position: relative; cursor: pointer; }
  .szenario input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .szenario-inhalt {
    display: grid; gap: 0.35rem; height: 100%; padding: 0.85rem; background: var(--flaeche);
    border: 1.5px solid var(--linie-stark); border-radius: var(--radius);
  }
  .szenario:hover .szenario-inhalt { border-color: var(--kupfer); }
  .szenario input:checked + .szenario-inhalt { border-color: var(--kupfer); box-shadow: inset 0 0 0 1.5px var(--kupfer); background: var(--kupfer-hauch); }
  .szenario input:focus-visible + .szenario-inhalt { outline: 3px solid var(--kupfer); outline-offset: 2px; }
  .szenario-name { font-weight: 600; }
  .szenario-text { color: var(--leise); font-size: 0.9375rem; }
  .draufsicht { width: 100%; height: auto; display: block; }
  .draufsicht .grundstueck { fill: var(--grund); stroke: var(--linie); }
  .draufsicht .haus { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
  .draufsicht .haus-text { fill: var(--leise); font: 600 15px "Barlow", sans-serif; }
  .draufsicht .nord { fill: var(--leise); font: 600 12px "Barlow", sans-serif; }
  .draufsicht .kegel { fill: var(--kupfer); fill-opacity: 0.2; stroke: var(--kupfer); stroke-opacity: 0.55; stroke-width: 1; }
  .draufsicht .kegel.garten { fill-opacity: 0.1; stroke-dasharray: 4 3; }
  .draufsicht .kamera { fill: var(--kupfer); stroke: var(--flaeche); stroke-width: 1.5; }
  .raumauswahl { margin-block: 1rem 0; }
  .raumauswahl > legend { float: left; width: 100%; margin-block-end: 0.35rem; }
  .raumauswahl > legend + * { clear: both; }
  .raumauswahl-etage { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-block-end: 0.5rem; }
  .raumauswahl-titel { flex-basis: 100%; max-width: none; margin: 0.25rem 0 0; color: var(--leise); font-size: 0.9375rem; font-weight: 500; }
  .zugaenge { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; }
  .zugaenge li + li { margin-block-start: 0.3rem; }
  .gateways { margin-block-end: 0.75rem; }
  table.wlan { min-width: 22rem; }
  table.wlan td { color: var(--text); }
  .segment { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--linie-stark); border-radius: 999px; overflow: hidden; }
  .segment-wahl { position: relative; cursor: pointer; }
  .segment-wahl + .segment-wahl { border-inline-start: 1px solid var(--linie-stark); }
  .segment-wahl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .segment-wahl span { display: inline-flex; align-items: center; min-height: 40px; padding: 0.3rem 0.9rem; font-size: 0.9375rem; font-weight: 500; }
  .segment-wahl input:checked + span { background: var(--kupfer-knopf); color: var(--kupfer-knopf-text); }
  .segment-wahl input:focus-visible + span { outline: 3px solid var(--kupfer); outline-offset: -3px; }
  @media (pointer: coarse) { .segment-wahl span { min-height: 44px; } }

  /* Liste: Netzwerk, Anfrage */
  .netzliste { margin-block-start: 2.5rem; }
  .warnliste { color: var(--kupfer-text); padding-inline-start: 1.25rem; }
  .artikel-hersteller { font-weight: 600; }
  .anfrage { margin-block-start: 2.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
  .anfrage > h3 { margin-block-start: 0; }
  .anfrage-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; max-width: 52rem; }
  .einwilligungen { margin-block: 0.75rem 1rem; max-width: 52rem; }
  .einwilligungen > legend { float: left; width: 100%; margin-block-end: 0.25rem; }
  .einwilligungen > legend + * { clear: both; }
  .einwilligungen .auswahl span { font-size: 0.9375rem; }
  .anfrage .hinweiskasten { margin-block: 0 1rem; }

  /* Herstellerkataloge */
  .kataloge { margin-block-start: 2rem; }
  .katalogliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
  .katalogliste a { color: var(--kupfer-text); font-weight: 600; text-underline-offset: 3px; }

  /* Meldungen */

  .meldung:empty { display: none; }
  .meldung {
    position: fixed; inset-block-end: 1rem; inset-inline: 1rem; margin-inline: auto; max-width: 36rem; z-index: 20;
    background: var(--text); color: var(--grund); padding: 0.85rem 1.1rem; border-radius: var(--radius);
  }
  .meldung.fehler { background: var(--fehler); color: var(--flaeche); inset-block-end: 5rem; }
  .fehlerkasten { background: var(--fehler-hauch); color: var(--text); border-inline-start: 4px solid var(--fehler); padding: 1rem 1.25rem; }


}

.beta-knopf { font: inherit; font-size: 0.85rem; font-weight: 700; background: none; cursor: pointer; min-height: 32px; }
.beta-knopf:hover { background: var(--kupfer-hauch); }
.beta-knopf:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .planer * { transition: none !important; } }

@media print {
  .planer-kopf, .planer-mehr, .faq, .brotkrumen, section[aria-labelledby="weiter"] { display: none !important; }
  .schritte, .projektleiste, .weiter, .meldung, .feld.schmal, .herstellerwahl-raster, .herstellerbereich > .hinweis, .anfrage, .kataloge { display: none !important; }
  :root { --grund: #fff; --flaeche: #fff; --text: #000; --leise: #333; }
  main { padding: 0; max-width: none; }
  /* Die Bildschirmregeln stehen verschachtelt unter .planer; die Druckregeln brauchen dieselbe Spezifität */
  .planer .tabelle { overflow: visible; border: 0; }
  .planer table, .planer table.produkte, .planer table.wlan { min-width: 0; }
  .planer h2 { break-after: avoid; }
  .planer tr { break-inside: avoid; }
  .planer .grundlagen { border: 0; margin: 0; break-before: page; }
  .planer .grundlagen > summary { padding: 0 0 0.5rem; list-style: none; }
  .planer .grundlagen > summary::-webkit-details-marker { display: none; }
  .planer .grundlagen > summary .leise-text { display: none; }
  .planer .grundlagen-titel { font-size: 1.4rem; }
  .planer .grundlagen-inhalt { padding: 0; }
  .planer .grundlagen-inhalt h3, .planer .grundlagen-inhalt h4 { break-after: avoid; }
  .planer .funktionsliste li { break-inside: avoid; }
}