/* Leistungsbeginn auf der Produktseite.
   Bewusst sparsam: Das Theme bringt Schrift, Farben und Abstände mit. Hier
   steht nur, was ohne das Theme kaputt aussähe. */
.gpsi-beginn {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-block: 1rem; max-inline-size: 34rem;
}
.gpsi-beginn label { font-weight: 600; }
.gpsi-beginn input[type="date"] {
  padding: 0.5rem; max-inline-size: 14rem;
  font: inherit; font-size: max(16px, 1em);   /* unter 16px zoomt iOS beim Tippen */
}
.gpsi-beginn__hinweis { font-size: 0.875em; opacity: 0.8; }

/* --- Konfigurator ---------------------------------------------------------
   Nutzt die Farbvariablen des Themes, wenn es da ist, und fällt sonst auf
   neutrale Werte zurück. Das Plugin soll auch mit einem fremden Theme
   benutzbar aussehen, nicht nur hübsch mit unserem. */
.konf { --konf-linie: var(--c-line, #d8d4cd); --konf-akzent: var(--c-primary, #1d3a5f); }

/* Ohne unser Theme gibt es keine Farbwelten — dann greifen diese hier,
   damit der Bereichswechsel trotzdem sichtbar ist. */
.konf[data-welt="viehortung"]  { --konf-akzent: var(--c-primary, #2d5016); }
.konf[data-welt="fahrtenbuch"] { --konf-akzent: var(--c-primary, #0b3c5d); }
.konf[data-welt="tracking"],
.konf[data-welt="asset"]       { --konf-akzent: var(--c-primary, #2a2a2a); }

.konf__schritt { margin-block: 2rem; }
.konf__schritt h2 { font-size: 1.15rem; margin-block-end: 0.75rem; }
.konf__freiwillig { font-weight: 400; font-size: 0.8em; opacity: 0.7; }
.konf__hinweis {
  font-size: 0.85em; opacity: 0.8; max-inline-size: 60ch;
  margin-block-start: 0.75rem; padding-inline-start: 0.75rem;
  border-inline-start: 2px solid var(--konf-linie);
}

.konf__auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.75rem;
}
.konf__auswahl--liste { display: block; }

/* Die Karte ist ein ZWEISPALTIGES Raster.
 *
 * Grund: Die Merkmalsliste lag bisher als eigenes Raster in EINER Zeile der
 * Karte. Damit teilten sich die Karten einer Reihe zwar die Höhe des ganzen
 * Blocks, nicht aber die Höhe der einzelnen Merkmalszeilen. Bricht
 * "Zweckvorschlag" in einer Karte auf zwei Zeilen um, verschiebt sich dort
 * alles Folgende — und die Reihe sieht aus, als wäre sie verrutscht.
 *
 * Jetzt sind Bezeichnung und Wert eigene Spalten der Karte, und jede
 * Merkmalszeile ist eine eigene Rasterzeile. Über subgrid teilen sich alle
 * Karten einer Reihe auch diese Zeilen. */
.konf__karte {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto repeat(4, auto);
  gap: 0.2rem 0;
  padding: 0.85rem; text-align: start; cursor: pointer;
  background: transparent; border: 1px solid var(--konf-linie); border-radius: 3px;
  font: inherit; color: inherit; min-inline-size: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hier liegt die Ruhe im Bild: Alle Karten einer Reihe teilen sich dieselben
   Zeilen. Bild, Titel, Preis, Eignung und jede einzelne Merkmalszeile stehen
   damit über die ganze Reihe hinweg auf gleicher Höhe, egal wie lang ein Name
   oder ein Merkmalstext ist.
 *
 * Die Kette muss durchgehen, und genau daran ist es vorher gescheitert:
 *
 * .konf__auswahl (Raster)
 *   └ .konf__feld (subgrid — leiht sich 9 Zeilen)
 *       ├ .konf__karte (subgrid — die ersten 8 davon)
 *       └ .konf__feld__wege (die neunte)
 *
 * Die Hülle .konf__feld kam dazu, als die Karten "Details"-Verweise bekamen:
 * In einem <button> darf kein <a> stehen, also musste etwas um beides herum.
 * Sie war ein Flex-Kasten — und damit war die Karte kein Rasterelement mehr.
 * `grid-template-rows: subgrid` ohne Rasterelternteil verhält sich wie `none`,
 * ohne Fehler und ohne Wirkung. Gleich hoch blieben die Karten nur noch wegen
 * `block-size: 100%`, und das streckt die Karte als Ganzes — nicht die Zeilen
 * darin. Sichtbar wurde es erst, als ein Merkmalstext umbrach.
 *
 * Nicht für .konf__auswahl--liste: Die steht auf `display: block`, dort gibt
 * es kein Raster zu teilen. */
@supports ( grid-template-rows: subgrid ) {

  .konf__auswahl { grid-auto-rows: auto; }

  .konf__auswahl:not(.konf__auswahl--liste) > .konf__feld {
    display: grid;
    /*
     * Der Zeilenabstand MUSS hier stehen.
     *
     * Ein subgrid erbt die Abstände des Elternrasters, wenn es keine eigenen
     * hat — und .konf__auswahl braucht 0,75rem, um die Karten voneinander zu
     * trennen. Dieser Abstand landete dadurch zwischen JEDER der dreizehn
     * Zeilen innerhalb der Karte: zwischen Bild und Titel, zwischen jeder
     * Merkmalsbezeichnung und ihrem Wert. Auf dem Telefon wuchs eine Karte
     * ohne jeden Inhalt dadurch auf zweihundertsechzig Pixel, von denen
     * hundertvierzig leer waren.
     *
     * Die Karte setzte ihren eigenen Abstand zwar — aber die Zeilen gehören
     * nicht ihr, sondern dieser Hülle. Nur wer die Spuren aufspannt, bestimmt
     * ihre Abstände.
     *
     * Nur row-gap: Der Spaltenabstand von .konf__auswahl trennt weiterhin die
     * Karten nebeneinander.
     */
    row-gap: 0.2rem;
    /* Neun Kartenzeilen plus eine für die Verweise darunter. Mehr als vier
       Merkmale zeigt der Konfigurator bewusst nicht — sonst liest sie
       niemand. */
    grid-row: span 10;
    grid-template-rows: subgrid;
    /* Die Spalten kommen NICHT vom Elternteil: Dort ist jede Karte eine
       einzige Spalte. Die Zweiteilung in Bezeichnung und Wert gehört der
       Karte und wird hier nur durchgereicht. */
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
  }

  .konf__auswahl:not(.konf__auswahl--liste) > .konf__feld > .konf__karte {
    grid-row: 1 / span 9;
    grid-column: 1 / -1;
    grid-template-rows: subgrid;
    /* Die Höhe kommt jetzt aus den geteilten Zeilen, nicht aus der Streckung. */
    block-size: auto;
  }

  /*
   * Eine Auswahl, in der keine einzige Karte Merkmale hat — die Welten, die
   * Ergänzungspakete. Dann werden auch keine Zeilen dafür freigehalten.
   * Gesetzt wird die Klasse beim Zeichnen, nicht hier: Ob Merkmale da sind,
   * weiß erst der Browser, wenn die Karten stehen.
   */
  .konf__auswahl--knapp:not(.konf__auswahl--liste) > .konf__feld {
    grid-row: span 6;
  }
  .konf__auswahl--knapp:not(.konf__auswahl--liste) > .konf__feld > .konf__karte {
    grid-row: 1 / span 5;
  }
  .konf__auswahl--knapp:not(.konf__auswahl--liste) > .konf__feld > .konf__feld__wege {
    grid-row: 6;
  }

  .konf__auswahl:not(.konf__auswahl--liste) > .konf__feld > .konf__feld__wege {
    grid-row: 10;
    grid-column: 1 / -1;
  }
}

.konf__karte:hover { border-color: var(--konf-akzent); }
.konf__karte--aktiv { border-color: var(--konf-akzent); box-shadow: inset 0 0 0 1px var(--konf-akzent); }

/* Leere Plätze nehmen keine Höhe ein, halten aber die Zeile. */
.konf__karte--leer:empty { display: block; min-block-size: 0; }

.konf__karte__bild,
.konf__karte__titel,
.konf__karte__unten,
.konf__karte__text,
.konf__karte__warnung { grid-column: 1 / -1; }

.konf__karte__bild img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: contain; }
/* break-word statt anywhere: Nur ein Wort, das allein nicht in die Zeile
   passt, wird getrennt. "anywhere" zerlegt auch normale Wörter mitten im
   Wort, sobald es eng wird — genau das sah im Konfigurator wie ein Fehler aus. */
.konf__karte__titel { font-weight: 600; overflow-wrap: break-word; align-self: start; }
.konf__karte__unten { font-size: 0.85em; opacity: 0.8; align-self: start; }
/* Eine Beschriftung über der Eignungszeile.
 *
 * Grund: Auf der Karte stehen Titel, Preis, ein Satz und vier Merkmale. Der
 * Satz ist die Antwort auf die einzige Frage, die zuerst kommt — "ist das
 * für mich?" —, sah aber aus wie Kleingedrucktes zwischen Preis und Technik.
 * Die Beschriftung macht ihn als Antwort erkennbar, bevor man ihn liest. */
.konf__karte__text:not(.konf__karte--leer)::before {
  content: "Für wen?";
  display: block;
  font-size: 0.72rem; font-weight: 700; line-height: 1.3;
  color: var(--c-primary, #1d3a5f); opacity: 0.75;
  margin-block-end: 0.1rem;
}

/* Die Zeile "für wen das gedacht ist" — das Erste, was jemand sucht, und
   bisher das Blasseste auf der Karte. Jetzt in voller Textfarbe und etwas
   kräftiger als der Preis darüber. */
.konf__karte__text {
  font-size: 0.92em; line-height: 1.4; font-weight: 500;
  color: var(--c-text, #333); align-self: start;
  margin-block-start: 0.15rem;
}

/* Die Bezeichnungsspalte ist gedeckelt.
   Vorher stand dort "auto" — die Spalte nahm sich die Breite des längsten
   Begriffs ("100 % Privatschutz"), und für den Wert blieb so wenig übrig,
   dass "PDF und CSV" auf drei Zeilen stand. Jetzt bekommt die Bezeichnung
   höchstens 7,5 Zeichenbreiten, der Rest gehört dem Wert. */
/* display: contents — die Liste verschwindet als Kasten, ihre dt und dd
   werden unmittelbar zu Feldern der Karte. Nur so können alle Karten einer
   Reihe dieselben Merkmalszeilen teilen. */
.konf__merkmale { display: contents; }

.konf__merkmale dt,
.konf__merkmale dd {
  font-size: 0.82em;
  overflow-wrap: break-word;
  padding-block: 0.12rem;
}
.konf__merkmale dt { grid-column: 1; opacity: 0.7; padding-inline-end: 0.75rem; }
.konf__merkmale dd { grid-column: 2; margin: 0; font-weight: 600; }

/* Die Trennlinie über dem ersten Merkmal. Ohne Spaltenabstand läuft sie
   durch, statt in der Mitte eine Lücke zu lassen — der Abstand steckt
   stattdessen im Innenabstand der Bezeichnung. */
.konf__merkmale dt:first-of-type,
.konf__merkmale dd:first-of-type {
  border-block-start: 1px solid var(--konf-linie);
  padding-block-start: 0.5rem;
  margin-block-start: 0.35rem;
}

.konf__zeile { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.5rem; border-block-end: 1px solid var(--konf-linie); cursor: pointer; }
.konf__zeile__preis { margin-inline-start: auto; white-space: nowrap; }

/* Der Abstand, den ein angesprungener Schritt zum oberen Rand hält.
 *
 * Der Seitenkopf klebt oben; ohne diesen Abstand verschwindet die
 * Schrittüberschrift darunter, und man landet scheinbar mitten im Schritt.
 * Als CSS-Eigenschaft und nicht im Skript: Wie hoch der Kopf ist, weiß das
 * Stylesheet. */
.konf__schritt { scroll-margin-block-start: 5rem; }

.konf__abschluss { margin-block-start: 2rem; padding: 1rem; border: 1px solid var(--konf-linie); border-radius: 3px; }
.konf__menge { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 1rem; }
.konf__menge input { inline-size: 6rem; padding: 0.4rem; font: inherit; font-size: max(16px, 1em); }
.konf__beginn { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 1rem; flex-wrap: wrap; }
.konf__beginn input { padding: 0.4rem; font: inherit; font-size: max(16px, 1em); }
.konf__summe__zeile { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.3rem; }
.konf__summe__gesamt { display: flex; justify-content: space-between; gap: 1rem; padding-block-start: 0.6rem; margin-block-start: 0.4rem; border-block-start: 1px solid var(--konf-linie); font-weight: 700; font-size: 1.1em; }
.konf__summe__hinweis { font-size: 0.85em; opacity: 0.75; margin-block: 0.6rem 0; }
.konf__knopf { margin-block-start: 1rem; inline-size: 100%; }

/* --- Am Telefon ------------------------------------------------------------
 *
 * Zwei Spalten lassen je Karte rund 160 Pixel. Bezeichnung und Wert dort
 * nebeneinander zu setzen heißt Silbensalat: Bei 7,5em für die Bezeichnung
 * bleiben für den Wert vierzig Pixel, und "PDF und CSV" steht als
 * P-D-F-u-n-d-C-S-V untereinander.
 *
 * Diese Regel gab es schon — sie war nur wirkungslos geworden. Sie setzte
 * .konf__merkmale auf eine Spalte; seit die Liste auf `display: contents`
 * steht, gibt es an ihr gar keine Spalten mehr. Die Zweiteilung gehört jetzt
 * der Karte, also muss sie dort aufgehoben werden. Ein stiller Bruch: Die
 * Regel stand weiter da, sah richtig aus und tat nichts.
 *
 * Auf dem Telefon braucht ein Merkmal damit ZWEI Rasterzeilen statt einer —
 * Bezeichnung über Wert. Deshalb die anderen Zeilenzahlen: fünf feste Plätze
 * plus achtmal Merkmal, und die Hülle eine Zeile mehr für die Verweise. */
@media (max-width: 560px) {

  .konf__auswahl { grid-template-columns: 1fr 1fr; }

  .konf__karte {
    padding: 0.6rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto repeat(8, auto);
  }

  .konf__merkmale dt,
  .konf__merkmale dd { grid-column: 1; }

  .konf__merkmale dt { padding-inline-end: 0; margin-block-start: 0.35rem; }

  /* Die Trennlinie gehört über das erste Merkmal, nicht zwischen
     Bezeichnung und Wert — untereinander wäre sie genau dort gelandet. */
  .konf__merkmale dd:first-of-type {
    border-block-start: 0;
    padding-block-start: 0.12rem;
    margin-block-start: 0;
  }
  .konf__merkmale dt:first-of-type { margin-block-start: 0.35rem; }

  @supports ( grid-template-rows: subgrid ) {
    .konf__auswahl:not(.konf__auswahl--liste) > .konf__feld {
      grid-row: span 14;
      grid-template-columns: 1fr;
    }
    /* Ohne Merkmale gibt es nichts zu verdoppeln — dieselben fünf Plätze
       wie am großen Bildschirm. */
    .konf__auswahl--knapp:not(.konf__auswahl--liste) > .konf__feld { grid-row: span 6; }
    .konf__auswahl--knapp:not(.konf__auswahl--liste) > .konf__feld > .konf__karte { grid-row: 1 / span 5; }
    .konf__auswahl--knapp:not(.konf__auswahl--liste) > .konf__feld > .konf__feld__wege { grid-row: 6; }
    .konf__auswahl:not(.konf__auswahl--liste) > .konf__feld > .konf__karte {
      grid-row: 1 / span 13;
    }
    .konf__auswahl:not(.konf__auswahl--liste) > .konf__feld > .konf__feld__wege {
      grid-row: 14;
    }
  }
}

/* --- Leistungsvergleich ---------------------------------------------------
   Eine echte Tabelle, waagrecht scrollbar, erste Spalte festgehalten. Am
   Telefon schiebt man die Stufen unter der Merkmalszeile durch, statt vier
   Spalten auf 390 Pixel zu quetschen. */
/* Die Schrift ausdrücklich setzen statt zu erben.
   Je nachdem, in welchen Block jemand den Shortcode legt, erbt die Ausgabe
   sonst die Schrift dieses Blocks — in einem Code-Block etwa eine
   Schreibmaschinenschrift. Ein Baustein, der je nach Einbauort anders
   aussieht, ist keiner. */
/* Auch die Nachkommen, nicht nur die Elemente selbst.
 *
 * Steckt der Shortcode versehentlich in einem <code>- oder <pre>-Block, führt
 * WordPress ihn trotzdem aus — und die Ausgabe enthält Blockelemente, die in
 * einem Absatz nicht stehen dürfen. Der Browser schließt den Absatz und öffnet
 * das Auszeichnungselement in JEDEM folgenden Block neu. Der Text sitzt danach
 * nicht mehr in .vgl__titel, sondern in einem <code> darin.
 *
 * Eine Regel auf .vgl__titel allein greift dann ins Leere, auch mit
 * !important: Sie trifft das Elternelement, die Schrift hängt am Kind. Genau
 * das hat drei Anläufe gekostet. Der Sternchen-Zusatz holt die Kinder mit.
 *
 * Die richtige Lösung bleibt der Shortcode-Block in der Seite. Das hier ist
 * das Netz darunter. */
.vgl, .vgl__titel, .vgl__wisch, .vgl__andere, .konf-rueckweg, .welt,
.vgl *, .vgl__titel *, .vgl__wisch *, .vgl__andere *, .konf-rueckweg *, .welt *,
.vgl__tabelle, .vgl__tabelle th, .vgl__tabelle td, .vgl__knopf {
  /* !important, weil die Schrift hier nicht geerbt werden darf. Liegt der
     Shortcode in einem vorformatierten Block, erbt die Ausgabe sonst dessen
     Schreibmaschinenschrift — und ein Baustein, der je nach Einbauort anders
     aussieht, ist keiner. */
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  white-space: normal;
}
.vgl__titel { margin-block-end: 0.25rem; }
.vgl__wisch { font-size: 0.85em; opacity: 0.7; margin-block: 0 0.5rem; }
@media (min-width: 900px) { .vgl__wisch { display: none; } }

.vgl {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--c-line, #d8d4cd); border-radius: 3px;
}
.vgl:focus-visible { outline: 2px solid var(--c-primary, #1d3a5f); outline-offset: 2px; }

/* Das Theme behandelt jede Tabelle im Seiteninhalt als importierte
   Fremdtabelle: display: block, feste Zellbreiten, kein Zeilenumbruch. Für
   Tabellen aus alten Produkttexten ist das richtig, hier ist es verheerend —
   mit display: block verliert die Tabelle ihre Spaltenlogik, und genau das
   hat die Stufenspalten verschwinden und lange Zeilen überlaufen lassen.
   Das Theme nimmt seine eigenen Tabellen davon aus; die Vergleichstabelle
   kommt aus dem Plugin und muss sich selbst ausnehmen. Deshalb hier die
   höhere Spezifität und das !important gegen das !important des Themes. */
.vgl table.vgl__tabelle {
  display: table;
  border-collapse: separate; border-spacing: 0;
  inline-size: 100% !important; min-inline-size: 46rem;
  max-inline-size: none;
  overflow: visible;
  font-size: 0.9rem;
}
.vgl table.vgl__tabelle th,
.vgl table.vgl__tabelle td {
  white-space: normal;
  inline-size: auto;
  padding: 0.5rem 0.75rem;
}
.vgl table.vgl__tabelle th.vgl__merkmal,
.vgl table.vgl__tabelle td.vgl__merkmal { inline-size: 42% !important; }

.vgl__tabelle {
  border-collapse: separate; border-spacing: 0;
  inline-size: 100%; min-inline-size: 46rem;
  font-size: 0.9rem;
}
.vgl__tabelle th, .vgl__tabelle td {
  padding: 0.5rem 0.75rem; text-align: center; vertical-align: top;
  border-block-end: 1px solid var(--c-line, #d8d4cd);
  /* Das Theme setzt für Tabellen im Seiteninhalt white-space: nowrap, damit
     importierte Produkttabellen nicht ausfransen. Hier ist das falsch: Eine
     Merkmalszeile wie "Vier Zusammenfassungsstufen mit Drill-down …" bricht
     dann nicht um und schiebt sich über die Nachbarspalte. */
  white-space: normal;
  overflow-wrap: break-word;
}
.vgl__tabelle thead th {
  position: sticky; inset-block-start: 0; z-index: 2;
  background: var(--c-bg, #f8f6f1); font-weight: 700;
  border-block-end: 2px solid var(--c-primary, #1d3a5f);
}

/* Die Merkmalsspalte bleibt stehen — ohne sie weiß beim Wischen niemand
   mehr, in welcher Zeile er ist. */
/* th.vgl__merkmal statt .vgl__merkmal: Die allgemeine Regel oben ist
   `.vgl__tabelle th` und damit stärker als eine einzelne Klasse. Kurze
   Merkmalstexte standen deshalb zentriert, lange sahen nur linksbündig aus,
   weil sie die Zelle füllten. */
th.vgl__merkmal, td.vgl__merkmal {
  /* left zusätzlich zu inset-inline-start: Ältere Browser auf Android kennen
     die logische Eigenschaft nicht, und ohne Anker klebt nichts. */
  position: sticky; inset-inline-start: 0; left: 0; z-index: 2;
  background-color: var(--c-bg, #f8f6f1);
  background-clip: padding-box;
  text-align: start; font-weight: 400;
  min-inline-size: 15rem; max-inline-size: 30rem;
  /* Schatten statt Rahmen: Ein Rahmen an einer festgehaltenen Zelle wird beim
     Scrollen auf manchen Geräten nicht mitgezeichnet. */
  box-shadow: 1px 0 0 var(--c-line, #d8d4cd);
}
.vgl__tabelle thead .vgl__merkmal { z-index: 3; }

/* --- Am Telefon ------------------------------------------------------------
 *
 * Hier lag der eigentliche Fehler, und er war ein Rechenfehler:
 *
 * Die Merkmalsspalte stand auf 42 % der Tabellenbreite, die Tabelle auf
 * mindestens 46rem = 736 Pixel. 42 % davon sind 309 Pixel — auf einem 390
 * Pixel breiten Telefon bleiben 81 Pixel für ALLE Stufenspalten. Man wischt
 * also durch vier Spalten, von denen nie eine ganz zu sehen ist, und die
 * Überschrift "Basic" liegt immer knapp außerhalb des Bildes. Übrig bleiben
 * Häkchen ohne erkennbare Zugehörigkeit.
 *
 * Jetzt richtet sich die festgehaltene Spalte nach dem Bildschirm, nicht nach
 * der Tabelle: 55 % der Fensterbreite. Damit bleiben rund 175 Pixel für die
 * Stufen — zwei Spalten gleichzeitig sichtbar, jede mit ihrer Überschrift.
 */
@media (max-width: 46rem) {

  .vgl table.vgl__tabelle,
  .vgl__tabelle {
    min-inline-size: 0;
    font-size: 0.85rem;
  }

  .vgl table.vgl__tabelle th.vgl__merkmal,
  .vgl table.vgl__tabelle td.vgl__merkmal,
  th.vgl__merkmal, td.vgl__merkmal {
    inline-size: 55vw !important;
    min-inline-size: 0;
    max-inline-size: none;
  }

  /* Jede Stufenspalte breit genug für ihre Überschrift. */
  .vgl__tabelle th:not(.vgl__merkmal),
  .vgl__tabelle td:not(.vgl__merkmal) {
    min-inline-size: 5.5rem;
    padding-inline: 0.4rem;
  }

  .vgl__tabelle th, .vgl__tabelle td { padding-block: 0.45rem; }

  /* In einer Spalte von knapp 45vw hat "Auswählen" nebst Innenabstand keinen
     Platz mehr auf einer Zeile. Umbrechen darf es trotzdem nicht — sonst
     wächst die Fußzeile auf drei Zeilen. Also kleiner und enger. */
  .vgl__knopf { padding: 0.4rem 0.55rem; font-size: 0.82em; }
}

/* Die Abschnittsüberschrift wird genauso festgehalten — und hatte denselben
   Durchsichtsfehler: --c-accent ist in mehreren Farbwelten ein durchsichtiger
   Ton. Grundfarbe undurchsichtig, Akzent als Auflage darüber. */
.vgl__abschnitt th {
  position: sticky; inset-inline-start: 0; left: 0; z-index: 2;
  text-align: start; font-weight: 700;
  background-color: var(--c-bg, #f8f6f1);
  background-image: linear-gradient(var(--c-accent, rgba(0,0,0,.04)), var(--c-accent, rgba(0,0,0,.04)));
  background-clip: padding-box;
  color: var(--c-primary, #1d3a5f);
}
.vgl__abschnitt__text {
  position: sticky; inset-inline-start: 0; left: 0;
  display: inline-block;
}
/* Abwechselnde Zeilen. Bei neunundvierzig Merkmalszeilen verrutscht das Auge
   sonst waagrecht — besonders am breiten Bildschirm, wo zwischen Merkmal und
   Häkchen viel Platz liegt. */
/* Zeilenstreifen als AUFLAGE, nicht als Ersatz der Grundfarbe.
 *
 * Vorher stand hier `background: rgba(0,0,0,.025)`. Die Kurzschreibweise
 * setzt auch background-color — und überschrieb damit in jeder zweiten Zeile
 * das undurchsichtige Grau der festgehaltenen ersten Spalte durch ein zu
 * 97,5 % durchsichtiges Schwarz. Beim waagrechten Wischen am Telefon schoben
 * sich die Werte der Stufenspalten sichtbar UNTER der Merkmalsspalte durch:
 * "10 Min." stand quer über "Positionsintervall". Sichtbar war das nur in
 * jeder zweiten Zeile, was die Suche nach der Ursache lange in die falsche
 * Richtung geschickt hat — man vermutet den Fehler beim Festhalten, nicht
 * beim Streifenmuster.
 *
 * Als Verlauf gezeichnet liegt der Streifen über der Grundfarbe, statt sie
 * zu ersetzen. Die Zellen der Stufenspalten haben gar keine Grundfarbe und
 * sehen deshalb genauso aus wie vorher. */
.vgl__tabelle tbody tr:nth-child(even) > * {
  background-image: linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025));
}
.vgl__tabelle tbody tr:hover > * {
  background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
}
.vgl__abschnitt + tr > * { background-image: none; }

/* --- Die Entscheidungszeile im Tabellenfuß --------------------------------- */

.vgl__tabelle tfoot .vgl__waehlen > * {
  border-block-start: 2px solid var(--c-primary, #1d3a5f);
  border-block-end: 0;
  padding-block: 0.7rem;
  background-color: var(--c-bg, #f8f6f1);
  vertical-align: middle;
}
.vgl__tabelle tfoot .vgl__merkmal { font-weight: 600; }

.vgl__knopf {
  display: inline-block; text-decoration: none;
  padding: 0.45rem 0.9rem; border-radius: 4px;
  background: var(--c-primary, #1d3a5f); color: #fff;
  font-weight: 600; font-size: 0.9em; line-height: 1.2;
  white-space: nowrap;
}
.vgl__knopf:hover, .vgl__knopf:focus-visible { background: var(--c-primary-dunkel, #16304f); color: #fff; }
.vgl__knopf:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Eine Modulzeile samt ihrem Verweis. Der Verweis steht knapp darunter und
   eingerückt, damit die Zeile selbst ihre Form behält. */
.konf__modul + .konf__modul { margin-block-start: 0.2rem; }
.konf__modul .konf__feld__wege {
  margin-block: -0.1rem 0.45rem;
  padding-inline-start: 1.7rem;
}

/* Die Einleitung über dem Verlängerungs-Einstieg. Sie nimmt die Frage vorweg,
   die sonst beim Geräteschritt käme — und der hier bewusst fehlt. */
.konf__einleitung {
  margin-block: 0 1.2rem;
  padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--konf-akzent);
  background: color-mix(in srgb, var(--konf-akzent) 6%, transparent);
  font-size: 0.95em; line-height: 1.5;
  max-inline-size: 62ch;
}

/* --- Die beiden Blöcke in Schritt 4 ---------------------------------------
 *
 * "Eine zweite Software dazu" und "Zusatzmodule" sind verschiedene Dinge und
 * müssen auch so aussehen. Ein Trennstrich und etwas Luft reichen dafür — ein
 * Kasten um jeden Block würde den Schritt schwerer aussehen lassen, als er
 * ist, und er ist freiwillig. */
/* :not([hidden]) auf BEIDEN Seiten.
 *
 * Ohne das bekam der Modulblock seinen Trennstrich auch dann, wenn der Block
 * davor ausgeblendet war — ein Strich mitten im Nichts und darüber eine
 * Lücke, die aussah wie ein Ladefehler. Ein Trenner trennt nur dann etwas,
 * wenn auf beiden Seiten etwas steht. */
.konf__block:not([hidden]) + .konf__block:not([hidden]) {
  margin-block-start: 1.5rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--konf-linie);
}
.konf__block__titel {
  font-size: 1.02rem; font-weight: 700;
  margin-block: 0 0.2rem;
}
.konf__schritt__dazu {
  font-size: 0.88rem; opacity: 0.75; line-height: 1.45;
  margin-block: 0 0.7rem; max-inline-size: 60ch;
}

/* Die Warnzeile auf der Karte.
 *
 * Abgesetzt und nicht rot: Rot heißt im Shop "etwas ist schiefgegangen". Hier
 * ist nichts schiefgegangen — es ist eine Bedingung, die jemand kennen muss,
 * BEVOR er wählt. Deshalb ein ruhiger Warnton und ein Balken an der Seite,
 * der die Zeile aus dem Fließtext heraushebt, ohne sie zur Fehlermeldung zu
 * machen. */
.konf__karte__warnung:not(.konf__karte--leer) {
  font-size: 0.82em; line-height: 1.4;
  margin-block-start: 0.35rem;
  padding: 0.3rem 0.5rem;
  border-inline-start: 3px solid var(--konf-warn, #b26a00);
  background: var(--konf-warn-feld, rgba(178, 106, 0, 0.07));
  color: var(--c-text, #333);
}
.konf__karte__warnung:not(.konf__karte--leer)::before {
  content: "Achtung: ";
  font-weight: 700; color: var(--konf-warn, #b26a00);
}

.vgl__ja { color: var(--c-primary, #1d3a5f); font-weight: 700; }
.vgl__nein { opacity: 0.35; }
.vgl__wert { font-weight: 600; }
.vgl__zusatz { display: inline-block; font-size: 0.78em; opacity: 0.7; }

@media (max-width: 560px) {
  .vgl__tabelle { font-size: 0.82rem; min-inline-size: 36rem; }
  th.vgl__merkmal, td.vgl__merkmal { min-inline-size: 11rem; max-inline-size: 14rem; }
  .vgl__tabelle th, .vgl__tabelle td { padding: 0.4rem 0.5rem; }
}

/* --- Mengenvorteil ---------------------------------------------------------
   Der Hinweis unter der Summe: was die Stückzahl bringt und was die nächste
   Stufe brächte. Grün, weil es eine gute Nachricht ist — und zurückhaltend,
   weil es keine Werbung sein soll, sondern eine Rechnung. */
.konf__staffel {
  margin-block-start: var(--space-s, 1rem);
  padding: var(--space-xs, 0.6rem) var(--space-s, 1rem);
  border-inline-start: 3px solid var(--c-success, #27AE60);
  background: color-mix(in srgb, var(--c-success, #27AE60) 7%, transparent);
  border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
}

.konf__staffel p { margin: 0; }

.konf__staffel__jetzt {
  font-weight: 600;
  color: var(--c-text, #333);
}

.konf__staffel__mehr {
  margin-block-start: 0.25rem !important;
  font-size: var(--step--1, 0.89rem);
  color: var(--c-text-muted, #666);
}

/* --- Wege hinaus und zurück ------------------------------------------------
   Die Karte ist ein Knopf; Verweise dürfen nicht hinein. Sie stehen deshalb
   in einer gemeinsamen Hülle darunter — leise, damit sie die Wahl nicht
   überlagern, aber auffindbar für den, der mehr wissen will. */
.konf__feld { display: flex; flex-direction: column; min-inline-size: 0; }

/* Die Karte füllt die Hülle, damit das Subgrid weiter über alle Karten einer
   Reihe hinweg ausrichtet. */
.konf__feld > .konf__karte { block-size: 100%; }

.konf__feld__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-s, 1rem);
  margin: var(--space-3xs, 0.25rem) 0 0;
  padding-inline: var(--space-2xs, 0.5rem);
}

.konf__weg {
  font-size: var(--step--1, 0.89rem);
  color: var(--c-text-muted, #666);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.konf__weg:hover { color: var(--c-primary, #2A2A2A); }

/* --- Rückweg und Einstieg -------------------------------------------------- */
.konf-rueckweg {
  font-size: var(--step--1, 0.89rem);
  margin-block: 0 var(--space-s, 1rem);
}
.konf-rueckweg a { font-weight: 600; text-decoration: none; }
.konf-rueckweg a:hover { text-decoration: underline; }
.konf-rueckweg__dazu { color: var(--c-text-muted, #666); margin-inline-start: var(--space-2xs, 0.5rem); }

.konf-einstieg { margin-block-start: var(--space-l, 2rem); }

/* --- Zubehör mit Größenauswahl -------------------------------------------- */
.konf__zeile--gruppe { align-items: center; }

.konf__auswahlfeld {
  margin-inline-start: auto;
  font: inherit;
  font-size: var(--step--1, 0.89rem);
  padding: 0.35em 0.6em;
  border: 1px solid var(--c-border, #E2DFD8);
  border-radius: var(--radius, 4px);
  background: var(--c-surface, #fff);
  color: var(--c-text, #333);
  max-inline-size: 60%;
}
.konf__auswahlfeld:focus-visible { outline: 2px solid var(--c-gold, #D4AF37); outline-offset: 1px; }

/* Streichpreis bei Zubehör, das im Paket enthalten ist. */
.konf__zeile__preis s { color: var(--c-text-muted, #666); margin-inline-end: 0.35em; }

/* --- Zusatzmodule in der Summe --------------------------------------------
   Eigener Block, weil sie monatlich laufen und das Hauptpaket über Monate im
   Voraus. Beides in eine Zahl zu werfen hieße, entweder den Einmalbetrag
   aufzublähen oder die monatliche Last zu verstecken. */
.konf__module {
  margin-block-start: var(--space-s, 1rem);
  padding-block-start: var(--space-xs, 0.6rem);
  border-block-start: 1px dashed var(--c-border, #E2DFD8);
}
.konf__module__kopf {
  margin: 0 0 var(--space-3xs, 0.25rem);
  font-size: var(--step--1, 0.89rem);
  color: var(--c-text-muted, #666);
}
.konf__module__summe { font-weight: 600; }

/* Ein Gerät, das zum gewählten Paket nicht passt: sichtbar, aber nicht
   wählbar. Verschwinden lassen erzeugt die Frage "wo ist meines hin?". */
.konf__karte--aus {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}
.konf__karte--aus:hover { box-shadow: none; }

/* ---- Zustimmung zur Datennutzung ------------------------------------------
 *
 * Eine Zeile mit Haken über den Laufzeitkarten. Sie ist absichtlich ruhig
 * gestaltet: Sie soll gelesen und verstanden werden, nicht überredet. Ein
 * grüner Kasten mit Prozentzeichen wäre hier ein Verkaufsinstrument für eine
 * Einwilligung — und das ist sie nicht.
 */
.konf__zustimmung {
	margin-block-end: 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 0.4rem;
	background: rgba( 0, 0, 0, 0.015 );
}

.konf__zustimmung__zeile {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.35;
}

/* Der Haken darf nicht mitschrumpfen und nicht mitwachsen — in einem Flex
   mit langem Text tut er beides. */
.konf__zustimmung__zeile input {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	margin-block-start: 0.1rem;
}

.konf__zustimmung__dazu {
	margin: 0.35rem 0 0 1.7rem;
	font-size: 0.875rem;
	opacity: 0.75;
}

@media ( max-width: 560px ) {
	.konf__zustimmung__dazu {
		margin-inline-start: 0;
	}
}

/* Die Erläuterung zur Einwilligung. Geschlossen eine Zeile, offen ein Absatz —
   und beides an derselben Stelle, damit beim Aufklappen nichts wegspringt,
   worauf der Blick gerade liegt. */
.konf__zustimmung__mehr {
	margin-block-start: 0.4rem;
	margin-inline-start: 1.7rem;
	font-size: 0.875rem;
}

.konf__zustimmung__mehr > summary {
	cursor: pointer;
	display: inline-block;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	opacity: 0.8;
}

.konf__zustimmung__mehr > summary:hover,
.konf__zustimmung__mehr > summary:focus-visible {
	opacity: 1;
}

.konf__zustimmung__mehr__text {
	margin-block-start: 0.5rem;
	max-inline-size: 60ch;
	line-height: 1.5;
}

.konf__zustimmung__mehr__text p {
	margin: 0 0 0.6rem;
}

.konf__zustimmung__mehr__text p:last-child {
	margin-block-end: 0;
}

@media ( max-width: 560px ) {
	.konf__zustimmung__mehr {
		margin-inline-start: 0;
	}
}

/* ---- Weltseite und Vergleichsübersicht ------------------------------------
 *
 * Server gezeichnet, nicht im Browser: Diese Seiten müssen von Google gelesen
 * werden können und ohne JavaScript dastehen. Deshalb eigene Klassen statt der
 * Karten aus dem Konfigurator — die entstehen erst im Browser.
 */
.welt__text {
	font-size: 1.1rem;
	line-height: 1.5;
	max-inline-size: 60ch;
}

.welt__hinweis {
	font-size: 0.9rem;
	opacity: 0.8;
	max-inline-size: 60ch;
}

/* Ein Knopf, ein Verweis — nicht zwei Knöpfe. Zwei gleich starke Angebote
   nebeneinander sind keine Führung, sondern eine Frage an den Kunden. */
.welt__wege {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1.4rem;
	align-items: center;
	margin-block: 1.4rem;
}

/* Dieselben Variablen wie der Knopf auf der Vergleichsseite — damit die Farbe
   der Farbwelt folgt und nicht an zwei Stellen gepflegt werden muss. */
.welt__knopf {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: 4px;
	background: var( --c-primary, #1d3a5f );
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}

.welt__knopf:hover,
.welt__knopf:focus-visible {
	background: var( --c-primary-dunkel, #16304f );
	color: #fff;
}

.welt__knopf:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.welt__weg {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.welt__ueberschrift {
	margin-block: 2rem 0.3rem;
}

/* Der Satz unter der Überschrift: leise, aber vor der Liste. Er verhindert,
   dass die Softwarepakete für das ganze Angebot gehalten werden. */
.welt__dazu {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	opacity: 0.8;
	max-inline-size: 60ch;
}

.welt__pakete {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1rem;
	/* Die Karten sind verschieden hoch, weil die Eignungstexte verschieden
	   lang sind. Ohne diese Zeile endet der "Details"-Verweis auf jeder Karte
	   woanders — und das Auge sucht ihn dann jedes Mal neu. */
	align-items: stretch;
}

/* Die ganze Karte ist der Knopf, nicht nur der Verweis unten.
 *
 * Im Konfigurator ist jede Karte ein Knopf: Man tippt irgendwohin und es
 * passiert etwas. Hier war nur die letzte Zeile anklickbar — dieselbe Form,
 * eine andere Regel. Wer einmal gelernt hat, dass Karten klickbar sind,
 * tippt auf die Überschrift und es passiert nichts. Das ist kein kleiner
 * Schönheitsfehler, das bricht eine Zusage, die der Shop drei Schritte
 * vorher gegeben hat.
 *
 * Umgesetzt mit einem unsichtbaren Feld über der Karte, das vom Verweis
 * aufgespannt wird. Dadurch bleibt im Quelltext EIN Verweis mit lesbarem
 * Text — wichtig für Vorleseprogramme und für Google — statt einer in einen
 * Verweis gewickelten Karte mit Überschrift darin.
 */
.welt__paket {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 1rem 1.1rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 0.4rem;
	background: rgba( 0, 0, 0, 0.012 );
	transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}

/* position: static ausdrücklich — sonst spannt das Feld nur den Verweis auf.
   Ein position:relative am <a>, von welchem Stylesheet auch immer, würde den
   Bezugsrahmen übernehmen und die Karte wäre wieder nur an der letzten Zeile
   anklickbar. Genau das wäre schwer zu finden, weil es nach "wirkt nicht"
   aussieht statt nach "wirkt falsch". */
.welt__paket__weg a {
	position: static;
}

.welt__paket__weg a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.welt__paket:hover {
	border-color: var( --c-primary, #1d3a5f );
	background: rgba( 0, 0, 0, 0.03 );
}

/* Der Tastaturrahmen gehört um die ganze Karte, nicht um die eine Zeile —
   sonst sieht man beim Durchtabben nicht, wo man ist. */
.welt__paket:focus-within {
	outline: 2px solid var( --c-gold, #c8a44a );
	outline-offset: 2px;
}

.welt__paket:focus-within .welt__paket__weg a {
	outline: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.welt__paket { transition: none; }
}

.welt__paket__name {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.welt__paket__preis {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.welt__paket__text {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
	opacity: 0.85;
}

/* margin-block-start: auto schiebt den Verweis auf den Boden der Karte —
   dadurch stehen alle Verweise auf einer Höhe, egal wie lang der Text ist. */
.welt__paket__weg {
	margin: auto 0 0;
	font-weight: 600;
}

/* Die Zeile zu den anderen Vergleichen. Leise, aber da: Sie ist ein Angebot,
   kein Wegweiser vom eigentlichen Inhalt weg. */
.vgl__andere {
	margin-block: 0 0.6rem;
	font-size: 0.9rem;
}

.vgl__andere__text {
	opacity: 0.7;
	margin-inline-end: 0.2rem;
}

.vgl__andere__trenner {
	opacity: 0.4;
	margin-inline: 0.15rem;
}

/* Die Warnung auf der Paketkarte. Abgesetzt, nicht rot: Sie hält jemanden vom
   falschen Kauf ab, sie soll niemanden erschrecken. */
.welt__paket__warnung {
	margin: 0 0 0.9rem;
	padding-inline-start: 0.7rem;
	border-inline-start: 3px solid rgba( 0, 0, 0, 0.18 );
	font-size: 0.875rem;
	line-height: 1.45;
}

/* --- 0.48: Abschluss — Vertrauen, Nebenwege, Projekt, Hilfe ----------------
 *
 * Gewichtung: Der Kaufknopf bleibt das Größte. Alles darunter ist leiser —
 * kleiner, gedämpfter, als Verweis gesetzt —, damit es dem Zweifelnden hilft,
 * ohne den Entschlossenen aufzuhalten. */
.konf__vorwahl {
  margin-block: 1rem 0; padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--c-gold, #b8956a);
  background: var(--c-surface, #fff);
  font-size: 0.95em;
}
.konf__projekt {
  margin-block: 1rem 0; padding: 0.6rem 0.9rem;
  border: 1px dashed var(--konf-linie); border-radius: 3px;
  font-size: 0.9em;
}
.konf__vertrauen {
  margin-block: 0.6rem 0; text-align: center;
  font-size: 0.82em; color: var(--c-text-muted, #666);
  max-inline-size: none;
}
.konf__nebenwege {
  margin-block: 0.9rem 0; text-align: center;
  font-size: 0.88em; max-inline-size: none;
}
.konf__nebenweg {
  background: none; border: 0; padding: 0.2rem 0.1rem; margin: 0;
  font: inherit; color: var(--c-text-muted, #666);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.konf__nebenweg:hover, .konf__nebenweg:focus-visible { color: var(--konf-akzent); }
.konf__projekt .konf__nebenweg { color: var(--konf-akzent); font-weight: 600; }
.konf__trenner { color: var(--c-text-muted, #999); }
.konf__hilfe { margin-block-start: 0.9rem; }
.konf__abschluss .konf__hilfe .gpsi-hilfe { justify-content: center; text-align: center; }

/* hidden muss gewinnen. Das Theme setzt Knöpfe auf display:inline-block,
   und das schlägt das hidden-Attribut — dann stünden "In den Warenkorb" und
   "Angebot anfordern" gleichzeitig da. */
.konf [hidden], .konf-druck[hidden], #konf-anfrage[hidden] { display: none !important; }

/* Das Anfrageformular unter dem Konfigurator. */
#konf-anfrage { margin-block-start: 1.5rem; scroll-margin-block-start: 5rem; }

/* --- Druck und PDF ---------------------------------------------------------
 *
 * Gedruckt wird nur die Zusammenstellung. Am Bildschirm ist der Kasten
 * unsichtbar; im Druck verschwindet alles andere. Dafür hängt das Skript
 * den Kasten direkt unter <body> und setzt eine
 * Klasse; so entstehen keine leeren Blätter für die ausgeblendete Seite. */
.konf-druck { display: none; }
@media print {
  html.konf-druckt body > *:not(.konf-druck) { display: none !important; }
  html.konf-druckt .konf-druck {
    display: block !important;
    padding: 0; color: #000; background: #fff; font-size: 11pt;
  }
  html.konf-druckt body { background: #fff; }
  .konf-druck h2 { font-size: 16pt; margin: 0 0 0.3cm; }
  .konf-druck ul { padding-inline-start: 1.1em; }
  .konf-druck li { margin-block: 0.12cm; }
  .konf-druck__summe { font-weight: 700; margin-block-start: 0.4cm; }
  .konf-druck__fuss { margin-block-start: 1cm; font-size: 9pt; color: #444; }
}

/* Bereich, in dem das vorgewählte Gerät nicht arbeitet: wählbar, aber leiser. */
.konf__karte--gedaempft { opacity: .6; }
.konf__karte--gedaempft:hover, .konf__karte--gedaempft:focus-visible { opacity: 1; }

/* Einbau bei fest verbauten Geräten (seit 0.50) */
.konf__einbau { border: 1px solid currentColor; border-color: rgba(0,0,0,.15); border-radius: 8px; padding: 1rem 1.1rem; margin: 1.25rem 0 0; }
.konf__einbau[hidden] { display: none; }
.konf__einbau__titel { font-weight: 600; padding: 0 .35rem; }
.konf__einbau__dazu { margin: 0 0 .75rem; }
.konf__einbau .konf__zeile { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0; cursor: pointer; }
.konf__einbau .konf__zeile input { margin-top: .25rem; }
.konf__einbau .konf__hinweis { margin: .6rem 0 0; font-weight: 600; }