/* shop-set-konfigurator.de - eigene Gestaltungsschicht.
   Kein Inline-CSS, kein !important, jede Regel mit vollem Namensraum. */
:root {
  --tief: #16243f; --tief-weich: #223353; --tinte: #1f2937; --grau: #55647a; --grau-hell: #626e82;
  --akzent: #1f8fd4; --akzent-tief: #0f5c96; --akzent-flach: #e8f1fc;
  --gut: #1f936a; --gut-tinte: #156c3f; --gut-flach: #e9f6ef; --gut-linie: #a7d9c2;
  --stopp: #c0392b; --stopp-flach: #fbe9e9;
  --warn: #d9930a; --warn-tinte: #8f5e09; --warn-flach: #fbf1e0;
  --lila: #563590; --lila-flach: #f1ecfa;
  --blatt: #ffffff; --linie: #e6ebf3; --linie-fest: #d3dce8; --dunst: #f6f8fc;
  --verlauf-sky: linear-gradient(135deg, #eef4fc 0%, #f3f1fb 52%, #fdf3f6 100%);
  --verlauf-gruen: linear-gradient(135deg, #ecf7f1 0%, #f4f8f5 60%, #eef5fb 100%);
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --schrift-fest: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  --breite: 1160px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--schrift); background: var(--blatt); color: var(--tinte); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.shell { max-width: var(--breite); margin: 0 auto; padding: 0 30px; }
@media (max-width: 520px) { .shell { padding: 0 20px; } }
.shell--eng { max-width: 900px; }

h1, h2, h3 { color: var(--tief); letter-spacing: -0.025em; font-weight: 800; }
h1 { font-size: clamp(36px, 4.8vw, 54px); line-height: 1.05; }
h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.07; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.claim { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--grau); max-width: 46ch; }

/* ---- Marker, Knoepfe ---- */
.chip { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 8px 17px; font-weight: 700; font-size: 14px; color: var(--tief); box-shadow: 0 3px 12px rgba(20,36,63,0.05); }
.chip__pkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.chip__pkt--akzent { background: var(--akzent); }
.chip__pkt--gut { background: var(--gut); }
.chip__pkt--warn { background: var(--warn); }
.chip__pkt--lila { background: var(--lila); }
.chip--nacht { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; box-shadow: none; }

.act { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 15.5px; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, background .15s, border-color .15s; }
/* Ohne nowrap brach 'Im Shopware Store' auf dem Telefon in drei Zeilen und
   quoll als Ellipse aus der Kopfleiste. */
.act { white-space: nowrap; }
.act:active { transform: translateY(1px); }
.act__kurz { display: none; }
.act--voll { background: var(--tief); color: #fff; }
.act--voll:hover { background: #0f1b30; }
.act--rand { background: #fff; color: var(--tief); border-color: var(--linie-fest); }
.act--rand:hover { border-color: var(--grau-hell); }
.act--klein { padding: 9px 18px; font-size: 14px; }
.act--weiss { background: #fff; color: var(--tief); }
.act--weiss:hover { background: #eef2f8; }
.act--schemen { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.act--schemen:hover { border-color: #fff; }
a.act:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ---- Kopfleiste ---- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20,36,63,0.06); }
.topbar__reihe { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--tief); white-space: nowrap; }
.mark svg { flex: 0 0 auto; }
.topbar__ziele { display: flex; align-items: center; gap: 24px; }
.topbar__ziele a:not(.act) { font-size: 14.5px; color: var(--grau); font-weight: 500; }
.topbar__ziele a:not(.act):hover { color: var(--tief); }
/* Unter 1040px fallen die Sprungmarken weg. Das Handbuch bleibt stehen: es ist
   keine Marke auf derselben Seite, sondern eine eigene - und sonst nur ueber
   die Fusszeile erreichbar. */
@media (max-width: 1040px) { .topbar__ziele a:not(.act):not(.topbar__buch) { display: none; } }
.mark__kurz { display: none; }
/* Unter 560px ist die Kopfleiste sonst breiter als der Schirm: Marke 185px,
   Leiste 199px, verfuegbar sind 350px. Statt etwas unerreichbar zu machen,
   wird der Schriftzug gekuerzt und der Abstand enger. Gemessen, nicht geraten. */
@media (max-width: 560px) {
  .mark__lang { display: none; }
  .mark__kurz { display: inline; }
  .mark { font-size: 14.5px; gap: 8px; }
  .topbar__ziele { gap: 14px; }
  .topbar__ziele .act__lang { display: none; }
  .topbar__ziele .act__kurz { display: inline; }
}
/* Unter 360px reicht auch das nicht mehr: Marke 126px, Handbuch 70px,
   Store-Knopf 75px und zwei Abstaende ergeben 301px, verfuegbar sind bei
   320px Fenster nur 265px - die Seite liesse sich sonst 1px seitlich
   schieben. Der Handbuch-Link entfaellt hier wie die uebrigen Ziele weiter
   oben, er steht in der Fusszeile. Bei 360px passt alles, deshalb genau 359.
   Gemessen, nicht geraten. */
@media (max-width: 359px) {
  .topbar__buch { display: none; }
}

/* ---- Baender ---- */
.zone { padding: 100px 0; }
@media (max-width: 720px) { .zone { padding: 62px 0; } }
.zone--sky { background: var(--verlauf-sky); }
.zone--gruen { background: var(--verlauf-gruen); }
.zone--dunst { background: var(--dunst); }
.zone--nacht { background: var(--tief); }
.zone--schmal { padding: 72px 0; }

.zhead { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.zhead .chip { margin-bottom: 18px; }
.zhead .claim { margin: 14px auto 0; max-width: 56ch; }
.zone--nacht .zhead h2, .zone--nacht h2, .zone--nacht h3 { color: #fff; }
.zone--nacht .zhead .claim, .zone--nacht .claim { color: #b9c6da; }

/* ---- Kopfbereich der Startseite ---- */
.lead { background: var(--verlauf-sky); padding: 86px 0 92px; overflow: hidden; }
@media (max-width: 720px) { .lead { padding: 56px 0 64px; } }
.lead__raster { display: grid; grid-template-columns: 1fr 1.06fr; gap: 52px; align-items: center; }
@media (max-width: 940px) { .lead__raster { grid-template-columns: 1fr; gap: 40px; } }
.lead__raster > * { min-width: 0; }
/* Gemessen war der Nachbau 1084 Pixel hoch, die Textspalte 513. Etwas engere
   Innenabstaende und Schrift bringen ihn auf ein Verhaeltnis, das nicht mehr
   kippt. */
.lead .buehne__innen { padding: 16px; }
.lead .strom__kopf { padding: 9px 13px; }
.lead .strom__leib { padding: 10px 13px; gap: 8px; }
.lead .strom { margin-bottom: 9px; }
.lead .zus { padding: 9px 12px; margin-bottom: 10px; }
.lead .summe { margin-top: 11px; padding-top: 11px; }
.lead .kachel__bild { height: 34px; }
.lead .kachel { padding: 7px; }
.lead .chip { margin-bottom: 24px; }
/* Im Kopfbereich traegt die Schrift mehr Gewicht als auf den Unterseiten -
   sonst steht ein hoher Nachbau neben einem kleinen Text. */
.lead h1 { max-width: 15ch; font-size: clamp(38px, 5.2vw, 60px); }
.lead .lead__sub { font-size: clamp(17px, 2vw, 22.5px); max-width: 44ch; }
.lead h1 .hoch { color: var(--gut); }
.lead__sub { margin-top: 22px; }
.lead__wege { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }

/* Belege aus dem Store. Sie stehen direkt unter den Knoepfen, weil dort
   entschieden wird - weiter unten liest sie niemand mehr. */
.belege { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin-top: 22px; font-size: 13.5px; color: var(--grau); }
.belege__i { display: inline-flex; align-items: center; gap: 7px; }
.belege__i b { color: var(--tief); font-weight: 700; }
.belege__st { display: inline-flex; gap: 1px; color: #e8a317; }
.belege__st svg { fill: currentColor; }
.belege__i--aus { background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 6px 14px; font-weight: 700; color: var(--tief); font-size: 12.5px; box-shadow: 0 3px 12px rgba(20,36,63,0.05); }
@media (max-width: 520px) { .belege { gap: 8px 14px; font-size: 13px; } }

/* ---- Zwei Spalten mit Text und Anschauung ---- */
.duo { display: grid; grid-template-columns: 1fr 1.12fr; gap: 60px; align-items: center; }
.duo--dreh { grid-template-columns: 1.12fr 1fr; }
.duo--dreh .duo__wort { order: 2; }
@media (max-width: 900px) { .duo, .duo--dreh { grid-template-columns: 1fr; gap: 36px; } .duo--dreh .duo__wort { order: 0; } }
.duo > * { min-width: 0; }
.duo__wort .chip { margin-bottom: 22px; }
.duo__wort h2 { margin-bottom: 18px; }
.duo__wort .claim { max-width: 42ch; }

.ticks { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; color: var(--grau); line-height: 1.55; }
.ticks li b { color: var(--tief); font-weight: 700; }

/* Der Variantenvergleich ist ein Randfall, kein Hauptargument - deshalb
   klein und unter der Karte, nicht als Ueberschrift. */
.randnotiz { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--grau-hell); }
.randnotiz b { color: var(--grau); font-weight: 600; }
.ticks__ha { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---- Kennzahlen ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1140px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } }
.stat { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 20px 22px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
.stat__kopf { font-size: 17px; font-weight: 800; color: var(--tief); letter-spacing: -0.02em; line-height: 1.25; }
.stat__zahl { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 3px; }
.stat__zahl--akzent { color: var(--akzent); }
.stat__zahl--gut { color: var(--gut); }
.stat__zahl--lila { color: var(--lila); }
.stat__zahl--warn { color: var(--warn-tinte); }
.stat__wort { font-size: 13px; color: var(--grau); line-height: 1.5; display: grid; grid-template-columns: 7px 1fr; gap: 9px; margin-top: 10px; }
.stat__wort .chip__pkt { width: 7px; height: 7px; margin-top: 6px; }

/* ---- Kartensatz ---- */
.cardset { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .cardset { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .cardset { grid-template-columns: 1fr; } }
.cardset--zwei { grid-template-columns: repeat(2,1fr); }
@media (max-width: 600px) { .cardset--zwei { grid-template-columns: 1fr; } }
.cardset--vier { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1000px) { .cardset--vier { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .cardset--vier { grid-template-columns: 1fr; } }
.kard { background: #fff; border: 1px solid var(--linie); border-radius: 15px; padding: 26px 24px 22px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); display: flex; flex-direction: column; min-width: 0; }
.kard__zeichen { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; background: var(--akzent-flach); }
.kard--gut .kard__zeichen { background: var(--gut-flach); }
.kard--warn .kard__zeichen { background: var(--warn-flach); }
.kard--lila .kard__zeichen { background: var(--lila-flach); }
.kard h3 { margin-bottom: 7px; }
.kard p { font-size: 14px; color: var(--grau); line-height: 1.55; }
/* Ohne diese Zeile laufen zwei Absaetze in einer Karte ineinander. */
.kard p + p { margin-top: 12px; }
.kard__fuss { margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--akzent-tief); }
a.kard { transition: transform .14s ease, box-shadow .14s ease, border-color .14s; }
a.kard:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20,36,63,0.34); border-color: var(--linie-fest); }

/* ---- Tabellen ---- */
.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.matrix thead th { text-align: left; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grau-hell); font-weight: 700; padding: 13px 16px 11px; border-bottom: 1px solid var(--linie-fest); }
.matrix thead th.matrix__eigen { color: var(--gut-tinte); }
.matrix tbody th { text-align: left; font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--tief); }
.matrix th, .matrix td { padding: 9px 16px; border-bottom: 1px solid #f2f5f9; vertical-align: top; }
.matrix--eng th, .matrix--eng td { white-space: nowrap; }
.matrix tbody:last-child tr:last-child > * { border-bottom: none; }
.matrix__spalte { background: #f2f9f5; }
.matrix__gruppe > th { padding: 9px 16px; font-size: 10.5px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--tief); background: #eef2f8; border-top: 1px solid var(--linie-fest); border-bottom: 1px solid var(--linie-fest); }
.matrix tbody:first-of-type .matrix__gruppe > th { border-top: none; }
.rahmen { background: #fff; border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px -12px rgba(20,36,63,0.2); }
.rollt { overflow-x: auto; }

/* Zustand: das Zeichen traegt die Farbe, der Text bleibt ruhig */
.sig { display: inline-flex; align-items: flex-start; gap: 7px; color: var(--grau); line-height: 1.45; }
.sig__z { flex: 0 0 auto; margin-top: 2px; }
.sig--ja .sig__z { color: var(--gut); }
.sig--halb .sig__z { color: var(--warn); }
.sig--nein { color: var(--grau-hell); }
.sig--nein .sig__z { color: var(--stopp); }
.matrix__spalte .sig { color: var(--tief); font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0; font-size: 12.5px; }
.legende .sig { color: var(--grau-hell); }

/* ---- Ablauf in Schritten ---- */
.stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: stufe; }
@media (max-width: 980px) { .stufen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stufen { grid-template-columns: 1fr; } }
.stufe { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 22px 20px; position: relative; }
.stufe__nr { width: 30px; height: 30px; border-radius: 9px; background: var(--tief); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.stufe h3 { margin-bottom: 6px; }
.stufe p { font-size: 14px; color: var(--grau); line-height: 1.55; }

/* ---- Nachbau der Storefront ---- */
.buehne { background: #fff; border: 1px solid var(--linie); border-radius: 18px; box-shadow: 0 22px 50px -30px rgba(20,36,63,0.42); overflow: hidden; }
.buehne__leiste { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #f4f6fa; border-bottom: 1px solid var(--linie); }
.buehne__punkt { width: 9px; height: 9px; border-radius: 50%; background: #d5dce7; flex: 0 0 auto; }
.buehne__adresse { margin-left: 8px; font-size: 11.5px; color: var(--grau-hell); background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 4px 12px; font-family: var(--schrift-fest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buehne__innen { padding: 22px; }
@media (max-width: 520px) { .buehne__innen { padding: 14px; } }

.strom { border: 1px solid var(--linie); border-radius: 13px; margin-bottom: 12px; overflow: hidden; }
.strom:last-child { margin-bottom: 0; }
/* Ein Stream, der auf seine Bedingung wartet: sichtbar, aber gesperrt.
   Genau der Unterschied, den die Beispielseite erklaert. */
.strom--aus { background: #fbfcfe; }
.strom--aus .strom__titel { color: var(--grau-hell); }
.strom__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: #f8fafd; border-bottom: 1px solid var(--linie); }
.strom__titel { font-size: 14px; font-weight: 700; color: var(--tief); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.strom__pflicht { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stopp); background: var(--stopp-flach); border-radius: 5px; padding: 2px 7px; }
.strom__frei { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gut-tinte); background: var(--gut-flach); border-radius: 5px; padding: 2px 7px; }
.strom__zaehler { font-size: 12px; color: var(--grau-hell); white-space: nowrap; }
.strom__leib { padding: 12px 15px; display: flex; flex-direction: column; gap: 9px; }
.strom__hinweis { padding: 0 15px 12px; font-size: 12.5px; color: var(--grau-hell); }

.wahl { display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: start; font-size: 13.5px; color: var(--grau); }
.wahl__box { width: 18px; height: 18px; border: 1.5px solid var(--linie-fest); border-radius: 5px; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.wahl--rund .wahl__box { border-radius: 50%; }
.wahl--an .wahl__box { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.wahl--aus { color: var(--grau-hell); }
.wahl__wort b { display: block; color: var(--tief); font-weight: 600; font-size: 13.5px; }
.wahl__zusatz { font-size: 12px; color: var(--grau-hell); }
.wahl__preis { font-family: var(--schrift-fest); font-size: 12.5px; color: var(--tief); white-space: nowrap; padding-top: 1px; }
.wahl__preis--gut { color: var(--gut-tinte); }
.wahl--gesperrt { opacity: 0.55; }
/* Nur die NICHT gewaehlten gesperrten Kaestchen werden blass. Vorher hat die
   Regel auch die gewaehlten ueberschrieben - eine gesperrte Stueckliste sah
   damit aus, als waere nichts ausgewaehlt. */
.wahl--gesperrt:not(.wahl--an) .wahl__box { background: #f1f4f8; }

.summe { margin-top: 14px; border-top: 1px solid var(--linie); padding-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.summe__zeile { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--grau); }
.summe__zeile b { color: var(--tief); font-weight: 600; }
.summe__zeile--rabatt { color: var(--gut-tinte); }
.summe__zeile--rabatt b { color: var(--gut-tinte); }
.summe__zeile--gross { font-size: 16px; padding-top: 5px; border-top: 1px solid var(--linie); }
.summe__zeile--gross b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }

.notiz { margin-top: 26px; text-align: center; color: var(--grau); font-size: 15px; max-width: 64ch; margin-left: auto; margin-right: auto; }
.notiz b { color: var(--tief); font-weight: 700; }

/* ---- Fragen und Antworten ---- */
.fragen { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.frage { background: #fff; border: 1px solid var(--linie); border-radius: 13px; overflow: hidden; }
.frage > summary { cursor: pointer; list-style: none; padding: 17px 22px; font-weight: 700; font-size: 15.5px; color: var(--tief); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after { content: "+"; font-size: 21px; font-weight: 400; color: var(--grau-hell); flex: 0 0 auto; line-height: 1; }
.frage[open] > summary::after { content: "\2212"; }
.frage__wort { padding: 0 22px 19px; font-size: 14.5px; color: var(--grau); line-height: 1.62; }
.frage__wort a { color: var(--akzent-tief); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Fusszeile ---- */
.base { background: var(--tief); color: #b9c6da; padding: 62px 0 34px; }
.base__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .base__raster { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .base__raster { grid-template-columns: 1fr; } }
.base__wort { font-size: 13.5px; line-height: 1.62; margin-top: 14px; max-width: 34ch; }

/* Herstellerlogo unten links, wie auf den Schwesterseiten. Dort ist die
   Fusszeile weiss, hier dunkel - die dunkelblaue Wortmarke braucht deshalb
   eine helle Flaeche, sonst verschwindet sie. Feste Masse, damit beim Laden
   nichts springt. */
.base__haus { display: inline-block; margin-top: 20px; background: #fff; border-radius: 10px; padding: 9px 13px; }
.base__haus img { display: block; width: 173px; height: 44px; }
.base__t { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 14px; }
.base__liste { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.base__liste a:hover { color: #fff; }
.base .mark { color: #fff; }
.base__schluss { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.base__schluss a:hover { color: #fff; }

/* ---- Brotkrumen ---- */
.trail { font-size: 13px; color: var(--grau-hell); margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.trail a { color: var(--grau); }
.trail a:hover { color: var(--tief); text-decoration: underline; }
.trail__hier { color: var(--tief); font-weight: 600; }

/* ---- Verwandtes ---- */
.weiter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .weiter { grid-template-columns: 1fr; } }
.weiter__k { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 20px 22px; transition: border-color .14s, transform .14s ease; }
.weiter__k:hover { border-color: var(--linie-fest); transform: translateY(-2px); }
.weiter__k b { display: block; color: var(--tief); font-size: 15.5px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.01em; }
.weiter__k span { font-size: 13.5px; color: var(--grau); line-height: 1.5; }

/* ---- Abschluss ---- */
.schluss { text-align: center; }
.schluss h2 { margin-bottom: 16px; }
.schluss .claim { margin: 0 auto; }
.schluss__wege { display: flex; gap: 13px; margin-top: 30px; justify-content: center; flex-wrap: wrap; }

/* ---- Anwendungsfall ---- */
.fall__kopf { max-width: 760px; margin-bottom: 42px; }
.fall__kopf .chip { margin-bottom: 20px; }
.fall__kopf h1 { margin-bottom: 20px; }
.fall__wort { max-width: 68ch; }
.fall__wort p { font-size: 16px; color: var(--grau); line-height: 1.68; }
.fall__wort p + p { margin-top: 15px; }
.fall__wort b { color: var(--tief); font-weight: 700; }
.fall__h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 0; }
/* Ein Rhythmus fuer die ganze Beispielseite. Vorher trug jeder Bausteintyp
   seinen eigenen Abstand - zwischen Schrittliste und Merkkasten, zwischen
   Nachbau und folgendem Text stand deshalb gar keiner. */
.fall__lauf > * + * { margin-top: 36px; }
.fall__lauf > h2 + * { margin-top: 20px; }
.fall__lauf > * + h2 { margin-top: 60px; }
.fall__zurueck { margin-top: 48px; font-size: 15px; }
.fall__zurueck a { color: var(--akzent-tief); font-weight: 600; }
.fall__zurueck a:hover { text-decoration: underline; }

.merk { border-left: 3px solid var(--akzent); background: var(--akzent-flach); border-radius: 0 12px 12px 0; padding: 18px 22px; }
.merk__t { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-tief); margin-bottom: 6px; }
.merk p { font-size: 14.5px; color: var(--grau); line-height: 1.6; }
.merk b { color: var(--tief); font-weight: 700; }
.merk--gut { border-left-color: var(--gut); background: var(--gut-flach); }
.merk--gut .merk__t { color: var(--gut-tinte); }
.merk--warn { border-left-color: var(--warn); background: var(--warn-flach); }
.merk--warn .merk__t { color: var(--warn-tinte); }

.schritte { list-style: none; counter-reset: schritt; display: flex; flex-direction: column; gap: 15px; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 28px 1fr; gap: 14px; font-size: 15px; color: var(--grau); line-height: 1.6; }
.schritte li::before { content: counter(schritt); width: 26px; height: 26px; border-radius: 8px; background: var(--tief); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.schritte li b { color: var(--tief); font-weight: 700; }
.schritte code { font-family: var(--schrift-fest); font-size: 13px; background: #eef2f8; border-radius: 5px; padding: 1px 6px; color: var(--tief); }

/* ---- Handbuch ---- */
.ref__lede { font-size: clamp(16px, 1.8vw, 19px); color: var(--grau); max-width: 60ch; margin-bottom: 44px; line-height: 1.6; }
.ref__karte { font-size: clamp(21px, 2.4vw, 27px); color: var(--tief); margin: 46px 0 18px; padding-bottom: 11px; border-bottom: 2px solid var(--linie-fest); }
.ref__karte:first-of-type { margin-top: 0; }
.ref__e { padding: 20px 0; border-bottom: 1px solid var(--linie); }
.ref__e:last-child { border-bottom: none; }
.ref__eh { font-size: 16.5px; margin-bottom: 7px; }
.ref__was { font-size: 15px; color: var(--grau); line-height: 1.62; }
/* Viele Einstellungen haben mehrsaetzige Hilfetexte, die das Plugin in
   eigene Absaetze teilt. Ohne diese Zeile stehen sie ohne Luft aufeinander -
   auf der Einstellungs-Seite an 29 Stellen. */
.ref__was + .ref__was { margin-top: 10px; }
.ref__meta { display: grid; grid-template-columns: 150px 1fr; gap: 5px 18px; margin-top: 13px; font-size: 13.5px; }
@media (max-width: 560px) { .ref__meta { grid-template-columns: 1fr; gap: 2px; } .ref__meta dd { margin-bottom: 9px; } }
.ref__meta dt { color: var(--grau-hell); font-weight: 600; }
.ref__meta dd { color: var(--tinte); }
/* Technische Namen wie orderSaveConfigurationInCustomerCommentLineItem passen
   auf einem Telefon in keine Zeile und schoben die Seite waagerecht heraus. */
.ref__meta code { font-family: var(--schrift-fest); font-size: 12.5px; color: var(--tief); overflow-wrap: anywhere; }
.ref__meta dd { overflow-wrap: anywhere; }
.ref__rest { font-size: 14px; color: var(--grau); line-height: 1.6; margin-top: 11px; }
/* Nachbau am Ende eines Abschnitts: er gehoert zum Abschnitt darueber,
   deshalb oben enger als unten. */
.ref__bild { margin: 22px 0 4px; }
.ref__mehr { margin-top: 46px; font-size: 15px; }
.ref__mehr a { color: var(--akzent-tief); font-weight: 600; }
.ref__mehr a:hover { text-decoration: underline; }
.ref__optionen { list-style: none; margin-top: 11px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--grau); }
.ref__optionen li { display: grid; grid-template-columns: 9px 1fr; gap: 11px; line-height: 1.5; }
.ref__optionen li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--linie-fest); margin-top: 9px; }
.ref__optionen b { color: var(--tief); font-weight: 600; }

.inhalt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-bottom: 8px; }
@media (max-width: 760px) { .inhalt { grid-template-columns: 1fr; } }
.inhalt__k { background: #fff; border: 1px solid var(--linie); border-radius: 13px; padding: 19px 21px; transition: border-color .14s, transform .14s ease; }
.inhalt__k:hover { border-color: var(--linie-fest); transform: translateY(-2px); }
.inhalt__k b { display: block; color: var(--tief); font-size: 16px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.01em; }
.inhalt__k span { font-size: 13.5px; color: var(--grau); line-height: 1.5; display: block; }
.inhalt__k em { display: block; margin-top: 9px; font-style: normal; font-size: 12px; color: var(--grau-hell); }

/* ---- Begriffe ---- */
.lexikon { display: flex; flex-direction: column; gap: 0; }
.lex { padding: 19px 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 230px 1fr; gap: 26px; }
@media (max-width: 720px) { .lex { grid-template-columns: 1fr; gap: 7px; } }
.lex:last-child { border-bottom: none; }
.lex__wort { font-size: 15.5px; font-weight: 700; color: var(--tief); letter-spacing: -0.01em; }
.lex__wort span { display: block; font-weight: 500; font-size: 12.5px; color: var(--grau-hell); margin-top: 2px; }
.lex__satz { font-size: 14.5px; color: var(--grau); line-height: 1.62; }
.lex__satz b { color: var(--tief); font-weight: 600; }

/* ---- Rechtstexte ---- */
.recht { max-width: 760px; }
.recht h1 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 26px; }
/* Rechtstexte enthalten Woerter wie Verbraucherstreitbeilegung/Universal-
   schlichtungsstelle - ohne Trennung laufen sie schmalen Schirmen davon. */
.recht h1, .recht h2 { overflow-wrap: break-word; hyphens: auto; }
.recht h2 { font-size: 21px; margin: 36px 0 12px; }
.recht p, .recht li { font-size: 15px; color: var(--grau); line-height: 1.7; }
.recht p + p { margin-top: 12px; }
.recht ul { margin: 12px 0 0 20px; display: flex; flex-direction: column; gap: 7px; }
.recht a { color: var(--akzent-tief); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Vergleichsseite ---- */
.vgl__kopf { text-align: center; max-width: 760px; margin: 0 auto; }
.vgl__kopf .chip { margin-bottom: 18px; }
.vgl__kopf .claim { margin: 16px auto 0; max-width: 62ch; }

/* Ein Rhythmus fuer die ganze Vergleichsseite - wie auf den Beispielseiten.
   Vorher stiessen die Entscheidungskarten ohne jeden Abstand an die Tabelle,
   weil weder das Raster noch der Tabellenrahmen einen Rand mitbringt. */
.vgl__lauf > * + * { margin-top: 34px; }
.vgl__lauf > .vgl__kopf + * { margin-top: 40px; }
.vgl__lauf > .legende + * { margin-top: 18px; }
.vgl__lauf > .trail { margin-bottom: 0; }
.vgl__lauf > .notiz { margin-top: 34px; }
.vgl__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
@media (max-width: 900px) { .vgl__spalten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vgl__spalten { grid-template-columns: 1fr; } }
.vgl__s { background: #fff; border: 1px solid var(--linie); border-radius: 13px; padding: 18px 20px; }
.vgl__s--eigen { border-color: var(--gut-linie); background: #f7fdfa; }
.vgl__s b { display: block; font-size: 15px; color: var(--tief); font-weight: 700; margin-bottom: 5px; }
.vgl__s span { font-size: 13px; color: var(--grau); line-height: 1.5; }
/* margin-inline statt margin: sonst setzt diese Regel den oberen Rand auf 0
   und ueberschreibt damit den Fluss, der weiter oben steht. */
.vgl__wort { max-width: 68ch; margin-inline: auto; }
.vgl__wort h2 { font-size: clamp(23px, 2.6vw, 30px); margin-bottom: 16px; }
.vgl__wort p { font-size: 15.5px; color: var(--grau); line-height: 1.68; }
.vgl__wort p + p { margin-top: 14px; }
.vgl__wort b { color: var(--tief); font-weight: 700; }

/* ---- Wegweiser auf der Beispiel-Uebersicht ---- */
.wegweiser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 34px; margin-bottom: 40px; }
@media (max-width: 760px) { .wegweiser { grid-template-columns: 1fr; gap: 18px; } }
.wegweiser__f { font-size: 15.5px; font-weight: 700; color: var(--tief); letter-spacing: -0.01em; margin-bottom: 4px; }
.wegweiser__a { font-size: 14.5px; color: var(--grau); line-height: 1.6; }
.wegweiser__a a { color: var(--akzent-tief); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Beispiel-Ueberblick ---- */
.bsp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
@media (max-width: 800px) { .bsp { grid-template-columns: 1fr; } }
.bsp__k { background: #fff; border: 1px solid var(--linie); border-radius: 15px; padding: 24px 26px; display: flex; flex-direction: column; transition: border-color .14s, transform .14s ease, box-shadow .14s; }
.bsp__k:hover { border-color: var(--linie-fest); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20,36,63,0.3); }
.bsp__marke { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-tief); margin-bottom: 9px; }
.bsp__k h2, .bsp__k h3 { font-size: 19px; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.015em; }
.bsp__k p { font-size: 14.5px; color: var(--grau); line-height: 1.6; }
.bsp__k em { font-style: normal; margin-top: auto; padding-top: 15px; font-size: 13.5px; font-weight: 600; color: var(--akzent-tief); }
/* Auf der Startseite fuehren die Kacheln nur weiter - der erklaerende Satz
   steht auf der Uebersicht. Sonst traegt jede Seite denselben Text. */
.bsp__k--knapp { padding: 20px 24px; }
.bsp__k--knapp em { padding-top: 10px; }

@media (max-width: 620px) {
  /* Tippziele: die Fussnoten- und Listenlinks stehen auf Telefonen sonst enger
     als die 24 Pixel, die WCAG 2.5.8 verlangt. */
  .base__liste a, .base__schluss a { display: inline-block; padding: 4px 0; }
  .frage__wort a { display: inline-block; padding: 3px 0; }
}

/* =======================================================================
   Nachbau-Baukasten
   Alle Zustaende, die eine Auswahlgruppe im Shop annehmen kann, als Markup
   statt als Bild: skaliert auf dem Telefon, laesst sich vorlesen und veraltet
   nicht, wenn das Plugin ein neues Bild bekommt.
   ======================================================================= */

.mock { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 15px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.16); }
.mock--eng { padding: 12px; }
.mock--flach { box-shadow: none; }
.mock--hier { border-color: var(--gut-linie); background: #f7fdfa; }
.mock--flach .wahl__wort b { font-size: 16px; }
.mock--flach .stueck__p { margin: 6px 0 0; }
.mock--flach a { color: var(--akzent-tief); font-weight: 600; }
.mock--flach a:hover { text-decoration: underline; }

/* Kopfzeile eines Nachbaus: sagt, welche Einstellung er zeigt */
.mock__was { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--akzent-tief); margin-bottom: 10px; }
.mock__was--gut { color: var(--gut-tinte); }
.mock__was--warn { color: var(--warn-tinte); }
.mock__was--stopp { color: var(--stopp); }

/* --- Zustaende einer Gruppe --------------------------------------------- */
.strom--versteckt { border-style: dashed; background: #fbfcfe; }
.strom__leer { padding: 16px 15px; font-size: 12.5px; color: var(--grau-hell); text-align: center; }
.strom--aus .strom__leib { opacity: 0.5; }
.strom__sperre { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau-hell); background: #eef2f8; border-radius: 5px; padding: 2px 7px; }
.strom__menge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent-tief); background: var(--akzent-flach); border-radius: 5px; padding: 2px 7px; }
.strom__set { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lila); background: var(--lila-flach); border-radius: 5px; padding: 2px 7px; }

/* --- Bild in der Listendarstellung --------------------------------------- */
.wahl--bild { grid-template-columns: 20px 34px 1fr auto; }
.wahl__bild { width: 34px; height: 34px; border-radius: 7px; background: #f2f6fc; border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; color: #93a6c0; flex: 0 0 auto; }
.wahl__bild svg { width: 20px; height: 20px; }

/* --- Mengenwahl ---------------------------------------------------------- */
.menge { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linie-fest); border-radius: 7px; overflow: hidden; margin-top: 5px; }
.menge span { font-size: 12px; color: var(--grau-hell); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: #f6f8fc; }
.menge b { font-size: 12.5px; color: var(--tief); font-weight: 700; width: 26px; text-align: center; font-family: var(--schrift-fest); }

/* --- Eingabefeld --------------------------------------------------------- */
.feld { margin-top: 7px; border: 1px solid var(--linie-fest); border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: var(--tief); background: #fff; }
.feld--leer { color: var(--grau-hell); font-style: italic; }
.feld--fehler { border-color: var(--stopp); background: var(--stopp-flach); }
/* Auf dem roten Grund reicht das helle Grau nicht mehr: gemessen 4,4 statt
   der geforderten 4,5. */
.feld--fehler.feld--leer { color: var(--grau); }
.feld__fehler { margin-top: 5px; font-size: 11.5px; color: var(--stopp); font-weight: 600; }

/* --- Galerie ------------------------------------------------------------- */
/* minmax(0, 1fr) statt 1fr: sonst zieht das laengste Wort seine Spalte breiter
   und die Kacheln stehen ungleich im Rahmen. */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kacheln--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln--eng { gap: 4px; }
.kachel { border: 1.5px solid var(--linie); border-radius: 9px; padding: 8px; text-align: center; background: #fff; }
.kachel--an { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-flach); }
.kachel__bild { height: 42px; border-radius: 6px; background: #f2f6fc; border: 1px solid var(--linie); margin-bottom: 7px; display: flex; align-items: center; justify-content: center; color: #93a6c0; }
.kachel__bild svg { width: 24px; height: 24px; }
/* Gleiche Hoehe fuer ein- und zweizeilige Beschriftungen, sonst rutschen die
   Preise der Nachbarkacheln auseinander. */
.kachel__t { min-height: 2.7em; }
.kachel--leer .kachel__bild { background: repeating-linear-gradient(45deg, #f2f5fa, #f2f5fa 6px, #e8edf5 6px, #e8edf5 12px); }
/* Lange Woerter wie „Geschenkpapier" sind breiter als eine schmale Kachel und
   liefen sichtbar heraus. Trennen statt ueberlaufen. */
.kachel__t { font-size: 11.5px; font-weight: 700; color: var(--tief); line-height: 1.3; display: block; overflow-wrap: break-word; hyphens: auto; }
.kachel__p { font-size: 11px; color: var(--grau-hell); font-family: var(--schrift-fest); margin-top: 2px; display: block; }

/* --- Slider -------------------------------------------------------------- */
.schiene { display: flex; align-items: stretch; gap: 8px; }
.schiene__pfeil { flex: 0 0 auto; width: 24px; border: 1px solid var(--linie); border-radius: 7px; background: #f8fafd; color: var(--grau-hell); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.schiene__bahn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.schiene__bahn > :last-child { opacity: 0.45; }

/* --- Zusammenfassung ----------------------------------------------------- */
.zus { border: 1px solid var(--linie); border-radius: 11px; background: #f8fafd; padding: 11px 13px; margin-bottom: 12px; }
.zus__t { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau-hell); margin-bottom: 8px; }
.zus__zeile { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 12.5px; color: var(--grau); padding: 3px 0; align-items: center; }
.zus__zeile b { color: var(--tief); font-weight: 600; }
.zus--breit .zus__zeile { grid-template-columns: 28px 1fr auto; }
.zus__bild { width: 28px; height: 28px; border-radius: 6px; background: #f2f6fc; border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; color: #93a6c0; }
.zus__bild svg { width: 17px; height: 17px; }

/* Die Nachbau-Bausteine sind <span>, damit sie in jedem Textfluss stehen
   duerfen. Inline-Elemente nehmen aber keine Hoehe an - deshalb hier die
   Anzeigeart ausdruecklich. Ohne das war die Fortschrittsleiste unsichtbar. */
.balken, .balken__spur, .balken__voll, .balken__wort,
.kachel, .zus__bild, .feld, .feld__fehler,
.pdp, .pdp__raster, .pdp__saeule, .pdp__strich, .pdp__knopf, .pdp__voll, .pdp__stelle { display: block; }
.pdp__raster { display: grid; }
.pdp__saeule, .pdp__voll { display: flex; }
.pdp__bild { display: flex; }
.menge { display: inline-flex; }

/* --- Fortschritt zum Schwellenwert --------------------------------------- */
.balken { margin-top: 9px; }
.balken__spur { height: 7px; border-radius: 999px; background: #e8eef7; overflow: hidden; }
.balken__voll { height: 100%; border-radius: 999px; background: var(--gut); }
.balken__voll--0 { width: 0%; }
.balken__voll--10 { width: 10%; }
.balken__voll--20 { width: 20%; }
.balken__voll--30 { width: 30%; }
.balken__voll--40 { width: 40%; }
.balken__voll--50 { width: 50%; }
.balken__voll--60 { width: 60%; }
.balken__voll--70 { width: 70%; }
.balken__voll--80 { width: 80%; }
.balken__voll--90 { width: 90%; }
.balken__voll--100 { width: 100%; }
.balken__wort { margin-top: 6px; font-size: 12px; color: var(--gut-tinte); font-weight: 600; }
.balken__wort--offen { color: var(--warn-tinte); }

/* --- Kategorieansicht: was in der Liste vom Konfigurator ankommt --------- */
.katalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.katalog__k { border: 1px solid var(--linie); border-radius: 10px; padding: 9px; }
.katalog__b { height: 56px; border-radius: 7px; background: #f2f6fc; border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; color: #93a6c0; margin-bottom: 8px; }
.katalog__b svg { width: 30px; height: 30px; }
.katalog__t { display: block; font-size: 12px; font-weight: 700; color: var(--tief); line-height: 1.35; }
.katalog__p { display: block; font-size: 13px; font-weight: 800; color: var(--tief); font-family: var(--schrift-fest); margin-top: 4px; }
.katalog__z { display: block; font-size: 11px; color: var(--grau-hell); margin-top: 2px; }

/* --- Schaltflaeche im Nachbau ------------------------------------------- */
.mockknopf { display: block; margin-top: 12px; border-radius: 999px; padding: 10px 16px; text-align: center; font-size: 13px; font-weight: 700; background: var(--tief); color: #fff; }
.mockknopf--rand { background: #fff; color: var(--tief); border: 1px solid var(--linie-fest); }

/* --- Produktseiten-Geruest fuer die vier Positionen ---------------------- */
.pdp { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: #fff; }
.pdp__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.pdp__bild { border-radius: 7px; background: #f2f6fc; border: 1px solid var(--linie); min-height: 104px; display: flex; align-items: center; justify-content: center; color: #93a6c0; }
.pdp__bild svg { width: 34px; height: 34px; }
.pdp__saeule { display: flex; flex-direction: column; gap: 6px; }
.pdp__strich { height: 7px; border-radius: 4px; background: #e8eef7; }
.pdp__strich--kurz { width: 55%; }
.pdp__strich--titel { height: 11px; background: #d6dfec; width: 80%; }
.pdp__knopf { height: 22px; border-radius: 999px; background: var(--tief); }
.pdp__voll { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.pdp__stelle { border: 1.5px dashed var(--akzent); background: var(--akzent-flach); border-radius: 7px; padding: 6px 9px; font-size: 10.5px; font-weight: 700; color: var(--akzent-tief); text-align: center; }

/* --- Zwei Zustaende nebeneinander ---------------------------------------- */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .zwei { grid-template-columns: 1fr; } }
.zwei__pfeil { display: none; }

.sprungzeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 800px; margin: 0 auto; }
.sprungzeile a { display: inline-block; border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--tief); transition: border-color .14s, transform .14s ease; }
.sprungzeile a:hover { border-color: var(--linie-fest); transform: translateY(-1px); }

/* --- Raster der Options-Nachbauten --------------------------------------- */
.optgrid { display: grid; gap: 16px; }
.optgrid--3 { grid-template-columns: repeat(3, 1fr); }
.optgrid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .optgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .optgrid--3, .optgrid--2 { grid-template-columns: 1fr; } }
.optgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .optgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .optgrid--4 { grid-template-columns: 1fr; } }

/* Titel, Text und Nachbau liegen in jeder Reihe auf einer Linie. Ohne das
   beginnt jeder Nachbau auf einer anderen Hoehe, und ein Abschnitt mit sechs
   Kacheln wirkt unruhig - gemessen schwankten die Textbloecke zwischen 21 und
   63 Pixeln. Subgrid uebernimmt die Zeilenhoehen des Abschnittsrasters. */
/* Ohne die Spaltenangabe waechst das Raster auf Max-Content und schob die
   Seite auf dem Telefon um 34 Pixel heraus. */
.stueck { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-width: 0; }
.stueck__t { font-size: 15.5px; font-weight: 700; color: var(--tief); letter-spacing: -0.01em; margin-bottom: 5px; }
.stueck__p { font-size: 13.5px; color: var(--grau); line-height: 1.55; margin-bottom: 13px; }
.stueck__p b { color: var(--tief); font-weight: 600; }
.stueck .mock { align-self: stretch; }

@supports (grid-template-rows: subgrid) {
  .optgrid > .stueck, .zwei > .stueck { grid-row: span 3; grid-template-rows: subgrid; }
}
/* Wo Subgrid fehlt, bleibt wenigstens der Nachbau unten buendig. */
@supports not (grid-template-rows: subgrid) {
  .stueck .mock { margin-top: auto; }
}

/* --- Vollstaendige Optionsliste ------------------------------------------ */
.liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
@media (max-width: 760px) { .liste { grid-template-columns: 1fr; } }
.liste__g { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-hell); margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.liste__g:first-child { margin-top: 0; }
.liste__z { display: grid; grid-template-columns: 15px 1fr; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--grau); line-height: 1.5; align-items: start; border-bottom: 1px solid #f3f6fa; }
.liste__z b { color: var(--tief); font-weight: 600; }
.liste__h { color: var(--gut); margin-top: 3px; }