/* casmartis.de · Bildwelt „Lichtstudie mit Technik-Ebene“, für alle Seiten.
   Liegt über werkblatt.css und marke.css (Basisschicht); alles hängt an .welt-licht, das jede Seite trägt. */
.welt-licht {
  --l-wand: #e9ebea;
  --l-flaeche: #f2f4f3;
  --l-nacht: #14181b;
  --l-text: #1b1f22;
  --l-text-2: #4a514f;
  --l-text-hell: #eef2ef;
  --l-text-hell-2: #b9c3be;
  --l-linie: #e1e5e3;
  --l-linie-dunkel: rgba(255, 255, 255, .14);
  --gruen: #95c11f;
  --gruen-tief: #4f6c0b;
  --gruen-hell: #c6e37a;
  --l-radius: 14px;
  --l-schatten: 0 18px 36px -18px rgba(16, 22, 20, .42), 0 2px 5px rgba(16, 22, 20, .1);
  --l-schatten-hoch: 0 26px 44px -20px rgba(16, 22, 20, .48), 0 3px 7px rgba(16, 22, 20, .12);
  --buehne-h: calc(100svh - var(--leiste-h));
  color: var(--l-text);
}
.welt-licht ::selection { background: var(--gruen); color: var(--l-text); }
.welt-licht main p, .welt-licht main li { max-width: none; }
.welt-licht a { color: var(--gruen-tief); }
.welt-licht a:hover { color: var(--l-text); }
.welt-licht :focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.welt-licht .sprung, .welt-licht .sprung:hover { color: #fff; }

/* ---------------------------------------------------------------- Kopf */
.welt-licht .leiste { border-bottom: 1px solid var(--l-linie); }
.welt-licht .leiste__liste > li > a:hover, .welt-licht .leiste__knopf:hover, .welt-licht .leiste__knopf[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--gruen); }
.welt-licht .leiste__liste > li > a[aria-current="page"], .welt-licht .leiste__knopf.ist-hier { box-shadow: inset 0 -3px 0 var(--l-text); }
.welt-licht .leiste__kauf { border: 0; border-radius: 10px; background: var(--l-nacht); color: #fff; padding: 0 20px; }
.welt-licht .leiste__kauf:hover { background: #000; color: #fff; }
.welt-licht .mega { border-bottom: 0; border-top: 0; box-shadow: 0 34px 60px -34px rgba(16, 22, 20, .4); }
.welt-licht .mega__gruppe h3 { border-bottom: 1px solid var(--l-text); }
.welt-licht .mega li a, .welt-licht .mega li > span { border-bottom-color: var(--l-linie); }
.welt-licht .mega li a:hover, .welt-licht .mega li a:hover .mega__typ, .welt-licht .mega__gruppe h3 a:hover { color: var(--gruen-tief); }
.welt-licht .mega__typ { font-family: inherit; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.welt-licht .mega__bild img { border: 0; border-radius: 12px; box-shadow: var(--l-schatten); }
@media (max-width: 1020px) {
  .welt-licht .leiste__menue { border: 1px solid #cfd5d2; border-radius: 10px; color: var(--l-text); }
  .welt-licht .leiste.offen .leiste__menue { background: var(--l-nacht); border-color: var(--l-nacht); color: #fff; }
}

/* ---------------------------------------------------------------- Tageslauf */
.lauf { position: relative; background: var(--l-wand); }
.lauf__buehne { position: sticky; top: var(--leiste-h); height: var(--buehne-h); min-height: 560px; overflow: hidden; z-index: 1; }
.lauf__rahmen { position: absolute; left: 50%; top: 0; width: max(100%, calc(max(var(--buehne-h), 560px) * 1.5612)); aspect-ratio: 1672 / 1071; transform: translateX(-50%); }
/* Desktop: Kasten und Fenster (Bildhöhe 6,5 % bis 65,5 %) stehen gemeinsam zwischen Bühnenkante und Zeitleiste, mittig;
   das Bild deckt die Bühne immer ganz, beschnitten wird nur freie Wand oben und Boden unten */
@media (min-width: 1021px) {
  .lauf__buehne { container-type: size; --reserve: 96px; }
  .lauf__rahmen {
    --b: max(100cqw, 100cqh * 1.5612);
    --h: calc(var(--b) / 1.5612);
    width: var(--b);
    top: clamp(calc(100cqh - var(--h)), calc((100cqh - var(--reserve) - var(--h) * .587) / 2 - var(--h) * .065), 0px);
  }
}

.lauf__bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
.lauf__bild[data-bild="1"] { opacity: 1; }
.lauf .lauf__bildart { position: absolute; right: max(44px, calc((100% - 1480px) / 2 + 44px)); bottom: 104px; z-index: 6; margin: 0; padding: 3px 9px; border-radius: 6px; background: rgba(20, 24, 27, .66); font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; color: #fff; }

/* Weicher Lichtschleier hinter der Textspalte: hebt die Wand für dunkle Schrift, nachts aus */
.lauf__schleier { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse 30% 58% at 34% 48%, rgba(248, 250, 249, .42), rgba(248, 250, 249, .2) 48%, rgba(248, 250, 249, 0) 78%); transition: opacity .5s cubic-bezier(.2, .7, .2, 1); }
.lauf.nacht .lauf__schleier { opacity: 0; }

/* Blick in den Rollladenkasten: Foto mit Markierung (verdeckter Motor gestrichelt, sichtbarer Kopf durchgezogen) */
.roentgen--foto img, .roentgen__markierung { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.roentgen__markierung .rm-motor { fill: rgba(149, 193, 31, .2); stroke: #95c11f; stroke-width: 2; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }
.roentgen__markierung .rm-kopf { fill: none; stroke: #95c11f; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Röntgenblick in den Rollladenkasten */
.roentgen { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; pointer-events: none; clip-path: inset(0 52% 0 48%); transition: clip-path .9s cubic-bezier(.2, .7, .2, 1); }
.roentgen.an { clip-path: inset(0 0 0 0); }

/* Texte über dem stehenden Bild */
.lauf__texte { position: relative; z-index: 2; margin-top: calc(-1 * max(var(--buehne-h), 560px)); pointer-events: none; }
/* Textspalte in der Wandfläche des Bildes: gerechnet aus der Bildbreite, damit sie auch bei beschnittenem Bild zwischen Leuchte und Fenster bleibt */
.lauf__schritt { --bild-b: max(100%, calc(max(var(--buehne-h), 560px) * 1.5612)); min-height: max(var(--buehne-h), 560px); display: flex; align-items: center; padding: 30px 0 150px; margin-left: calc((100% - var(--bild-b)) / 2 + var(--bild-b) * .22); width: calc(var(--bild-b) * .255); }
.lauf__inhalt { pointer-events: auto; width: 100%; transition: opacity .35s cubic-bezier(.2, .7, .2, 1); }
.lauf__schritt:not(.ist-aktiv) .lauf__inhalt { opacity: .14; }
.lauf__schritt .lauf__uhr { color: #3f580a; font-weight: 650; margin-right: .14em; font-variant-numeric: tabular-nums; }
.lauf h1 { font-size: clamp(34px, 3.75vw, 60px); line-height: 1; letter-spacing: -.036em; font-weight: 780; color: var(--l-text); }
.lauf h2 { font-size: clamp(26px, 2.35vw, 38px); line-height: 1.07; letter-spacing: -.03em; font-weight: 760; color: var(--l-text); }
.lauf p { margin-top: 14px; font-size: 16px; line-height: 1.58; color: #20262a; }
.lauf .lauf__unter { font-size: 17.5px; margin-top: 18px; }
.lauf .lauf__grenze { font-size: 14.5px; padding-left: 16px; position: relative; }
.lauf .lauf__grenze::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1.5px; background: currentColor; }
.lauf__legende { display: flex; align-items: center; gap: 10px; font-size: 14.5px !important; font-weight: 620; color: var(--l-text) !important; }
.lauf__legende span { flex: none; width: 26px; height: 8px; border-radius: 4px; background: var(--gruen); }
.lauf__produkt { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin: 22px 0 0; }
.lauf__produkt img { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 12px; padding: 7px; box-shadow: var(--l-schatten); }
.lauf__produkt img[src*="-quadrat"] { object-fit: cover; padding: 0; }
.lauf__produkt figcaption { font-size: 13.5px; line-height: 1.45; color: #20262a; }
.lauf__produkt strong { display: block; font-size: 15px; color: var(--l-text); margin-bottom: 2px; }
.lauf__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px !important; }
.lauf__links .pfeillink { margin-top: 0; }
.welt-licht .pfeillink { color: var(--gruen-tief); font-weight: 680; font-size: 15px; }

/* Nacht: helle Schrift auf dem dunklen Raum */
.lauf.nacht .lauf__schritt--nacht h2, .lauf.nacht .lauf__schritt--nacht strong { color: var(--l-text-hell); }
.lauf.nacht .lauf__schritt--nacht p, .lauf.nacht .lauf__schritt--nacht figcaption { color: var(--l-text-hell-2); }
.lauf.nacht .lauf__schritt--nacht .lauf__uhr { color: var(--gruen); }
.lauf.nacht .lauf__schritt--nacht a { color: var(--gruen-hell); }

/* Wellenwahl als weiße Platten */
.wahl { margin-top: 28px; }
.wahl__frage { margin: 0 !important; font-size: 16.5px !important; font-weight: 720; color: var(--l-text) !important; }
.wahl__hinweis { margin-top: 3px !important; font-size: 13.5px !important; }
.platten { display: flex; gap: 14px; margin-top: 16px; }
.platte { width: 120px; height: 120px; border-radius: 14px; background: linear-gradient(180deg, #fff, #eef1ef); color: var(--l-text); text-decoration: none; display: grid; place-items: center; align-content: center; gap: 1px; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, var(--l-schatten); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s cubic-bezier(.2, .7, .2, 1); }
.platte:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, var(--l-schatten-hoch); color: var(--l-text); }
.platte svg { width: 36px; height: 36px; margin-bottom: 6px; }
.platte .platte__welle { fill: none; stroke: var(--gruen-tief); stroke-width: 7; }
.platte .achteck__falz { fill: none; stroke: var(--gruen-tief); stroke-width: 6; }
.platte b { font-size: 23px; font-weight: 770; letter-spacing: -.02em; line-height: 1.1; }
.platte span { font-size: 12.5px; color: #3f4644; }
.wahl__wege { display: flex; gap: 20px; margin-top: 16px !important; font-size: 14.5px !important; font-weight: 680; }

/* Tageszeiten als Bildmuster mit Jetzt-Marke. Die Leiste steht in einer eigenen Ebene über der Textspalte, deckungsgleich
   mit der Bühne: Texte laufen beim Scrollen unter ihr durch statt über sie (26.10.2026). */
.lauf__dock { position: sticky; top: var(--leiste-h); height: max(var(--buehne-h), 560px); margin-top: calc(-1 * max(var(--buehne-h), 560px)); z-index: 3; overflow: hidden; pointer-events: none; }
.lauf__zeiten { position: absolute; left: max(44px, calc((100% - 1480px) / 2 + 44px)); right: max(44px, calc((100% - 1480px) / 2 + 44px)); bottom: 22px; z-index: 3; pointer-events: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(16, 22, 20, .5); }
.lauf__zeiten button { all: unset; cursor: pointer; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 10px; }
.lauf__zeiten button + button { box-shadow: -1px 0 0 var(--l-linie); }
.lauf__vorschau { grid-row: span 2; width: 64px; height: 40px; border-radius: 7px; background: var(--bild) 86% 40% / 260% auto no-repeat; }
.lauf__zeiten .lauf__uhr { font-size: 19px; font-weight: 760; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--l-text); }
.lauf__zeiten .lauf__was { font-size: 12.5px; color: var(--l-text-2); }
.lauf__zeiten button:hover .lauf__uhr, .lauf__zeiten button[aria-current="step"] .lauf__uhr { color: var(--gruen-tief); }
.lauf__zeiten button:focus-visible { outline: 3px solid var(--gruen); outline-offset: -3px; }
.lauf__jetzt { position: absolute; top: -1px; left: 0; width: 25%; height: 3px; border-radius: 2px; background: var(--gruen); pointer-events: none; }

/* Niedrige Bildschirme: Zeitleiste und Schritte kompakter, damit Kasten, Fenster und Text zusammen Platz haben */
@media (min-width: 1021px) and (max-height: 760px) {
  .lauf h1 { font-size: clamp(32px, 3.2vw, 46px); }
  .lauf h2 { font-size: clamp(24px, 2.05vw, 32px); }
  .lauf p { font-size: 15px; margin-top: 10px; }
  .lauf .lauf__unter { font-size: 16px; margin-top: 12px; }
  .lauf__produkt { grid-template-columns: 68px 1fr; gap: 12px; margin-top: 14px; }
  .lauf__produkt img { width: 68px; height: 68px; padding: 5px; }
  .lauf__links { margin-top: 10px !important; }
  .wahl { margin-top: 18px; }
  .platte { width: 104px; height: 104px; }
  .lauf__buehne { --reserve: 78px; }
  .lauf__zeiten { bottom: 12px; }
  .lauf__zeiten button { padding: 6px 12px 6px 8px; }
  .lauf__vorschau { width: 52px; height: 32px; }
  .lauf .lauf__bildart { bottom: 76px; }
}

/* ---------------------------------------------------------------- Abschnitte */
.kopfzeile { max-width: 760px; margin-bottom: 40px; }
.innenleben__bild { min-width: 0; max-width: 100%; }
.kopfzeile h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.04; letter-spacing: -.033em; font-weight: 780; }
.kopfzeile p { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--l-text-2); }

.sortiment { background: var(--l-flaeche); padding: 120px 0 130px; }
.sortiment__innen, .innenleben__innen { max-width: 1360px; margin: 0 auto; padding: 0 var(--seite); }
.sortiment__flaeche { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; }
.bereich-feld { display: grid; grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 22px; border-radius: var(--l-radius); background: #fff; color: var(--l-text); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 22, 20, .06); transition: box-shadow .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); }
.welt-licht .bereich-feld, .welt-licht .bereich-feld:hover { color: var(--l-text); }
.bereich-feld:hover { box-shadow: var(--l-schatten-hoch); transform: translateY(-2px); }
.bereich-feld--gross { grid-row: span 2; }
.bereich-feld__bild { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #fff; }
.bereich-feld__bildart { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .9); font-size: 11px; font-weight: 500; color: #4a514f; }
.bereich-feld__bild img { width: 100%; height: 210px; object-fit: contain; }
.bereich-feld--gross .bereich-feld__bild img { height: 330px; }
.bereich-feld__text { display: grid; gap: 6px; }
.bereich-feld__text b { font-size: 26px; font-weight: 770; letter-spacing: -.025em; }
.bereich-feld__text span { font-size: 15px; line-height: 1.5; color: var(--l-text-2); }
.bereich-feld__liste { display: grid; border-top: 1px solid var(--l-linie); }
.bereich-feld__liste > span { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--l-linie); font-size: 15px; font-weight: 600; }
.bereich-feld__liste i { font-style: normal; font-weight: 500; color: var(--l-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bereich-feld--klein { align-content: center; padding: 26px 28px; }
.bereich-feld--klein .bereich-feld__text b { font-size: 22px; }

.innenleben { background: var(--l-nacht); color: var(--l-text-hell); padding: 130px 0 140px; }
.innenleben .kopfzeile h2 { color: #fff; }
.innenleben .kopfzeile p { color: var(--l-text-hell-2); }
.innenleben__bild { margin: 10px 0 0; padding: 26px 24px 20px; border-radius: 12px; background-color: #171b1f; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 24px 24px; }
.motor-schnitt { display: block; width: 100%; height: auto; overflow: visible; }
.motor-schnitt .ms-achse { stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 22 5 3 5; }
.motor-schnitt .ms-rohr { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .88); stroke-width: 1.4; }
.motor-schnitt .ms-innen { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.motor-schnitt .ms-kontur rect { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .88); stroke-width: 1.4; }
.motor-schnitt .ms-teil[data-pos="2"] circle { fill: #20262b; stroke: rgba(255, 255, 255, .9); stroke-width: 1.4; }
.motor-schnitt .ms-teil[data-pos="2"] path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.4; }
.motor-schnitt .ms-messing { fill: #9a7834; stroke: #e2c47e; stroke-width: 1.3; }
.motor-schnitt .ms-gewinde { stroke: rgba(40, 28, 6, .55); stroke-width: 1.5; }
.motor-schnitt .ms-schalter { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.motor-schnitt .ms-motor rect { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .78); stroke-width: 1.3; }
.motor-schnitt .ms-motor path { stroke: rgba(196, 122, 66, .5); stroke-width: 2.4; }
.motor-schnitt .ms-welle { fill: rgba(255, 255, 255, .22); stroke: none !important; }
.motor-schnitt .ms-getriebe > rect { fill: rgba(149, 193, 31, .1); stroke: var(--gruen); stroke-width: 1.6; }
.motor-schnitt .ms-getriebe path { stroke: var(--gruen); stroke-width: 1.4; opacity: .85; }
.motor-schnitt .ms-fein { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.motor-schnitt .ms-bezug path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; }
.motor-schnitt .ms-bezug circle { fill: #fff; }
.motor-schnitt .ms-bezug .ms-nr { fill: var(--l-nacht); stroke: var(--gruen); stroke-width: 1.6; }
.motor-schnitt .ms-bezug[data-pos="2"] .ms-nr { stroke: rgba(255, 255, 255, .7); }
.motor-schnitt .ms-bezug text { fill: #fff; font: 700 17px var(--text, "Manrope cm", sans-serif); }
.motor-schnitt .ms-namen text { fill: rgba(255, 255, 255, .62); font: 500 15px var(--text, "Manrope cm", sans-serif); }
.innenleben__beleg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; margin-top: 56px; }
.innenleben__foto { margin: 0; }
.innenleben__foto img { width: 100%; height: auto; border-radius: 12px; background: #fff; }
.innenleben__foto figcaption { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.innenleben__punkt { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.innenleben__punkt strong { display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 760; color: #fff; }
.innenleben__punkt p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--l-text-hell-2); }
.innenleben__punkt .ziffer { width: 34px; height: 34px; border-radius: 50%; border: 1.6px solid var(--gruen); display: grid; place-items: center; font-size: 16px; font-weight: 750; color: #fff; }
.innenleben__bild figcaption { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.innenleben__liste { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
.innenleben__liste li.innenleben__frei { grid-template-columns: 1fr; }
.innenleben__liste li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 22px 0 26px; border-top: 1px solid var(--l-linie-dunkel); }
.innenleben__liste .ziffer { width: 30px; height: 30px; border-radius: 50%; border: 1.6px solid var(--gruen); display: grid; place-items: center; font-size: 15px; font-weight: 750; color: #fff; }
.innenleben__liste strong { display: block; font-size: 18px; font-weight: 720; color: #fff; }
.innenleben__liste p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--l-text-hell-2); }
.innenleben .pfeillink { display: inline-block; margin-top: 10px; color: var(--gruen-hell); }
.innenleben .pfeillink:hover { color: #fff; }

.hilfe-licht { max-width: 1360px; margin: 0 auto; padding: 130px var(--seite) 0; }
.hilfe-licht h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.04; letter-spacing: -.033em; font-weight: 780; }
.hilfe-licht__band { margin-top: 30px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 64px; align-items: center; padding: 26px 0; border-top: 1px solid var(--l-text); border-bottom: 1px solid var(--l-linie); }
.hilfe-licht__telefon { margin: 0; }
.hilfe-licht__telefon a { font-size: clamp(38px, 5.2vw, 76px); font-weight: 760; letter-spacing: -.03em; line-height: 1; color: var(--l-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.hilfe-licht__telefon a:hover { color: var(--gruen-tief); }
.hilfe-licht__text { font-size: 17px; line-height: 1.6; color: var(--l-text-2); max-width: 48ch !important; }
.hilfe-licht__wege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hilfe-licht__wege li { padding: 20px 28px 24px; border-bottom: 1px solid var(--l-linie); }
.hilfe-licht__wege li:first-child { padding-left: 0; }
.hilfe-licht__wege li + li { border-left: 1px solid var(--l-linie); }
.hilfe-licht__wege a { font-size: 18.5px; font-weight: 720; color: var(--l-text); text-decoration-color: var(--l-linie); text-underline-offset: .22em; }
.hilfe-licht__wege a:hover { color: var(--gruen-tief); text-decoration-color: currentColor; }
.hilfe-licht__wege p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--l-text-2); }

.fach-licht { max-width: 1360px; margin: 120px auto 0; padding: 0 var(--seite); }
.fach-licht__innen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 72px; align-items: center; padding: 48px 52px; border-radius: 14px; background: var(--l-flaeche); }
.fach-licht h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.028em; font-weight: 770; }
.fach-licht p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--l-text-2); }
.knopf-licht { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; padding: 0 22px; border-radius: 10px; background: var(--l-nacht); color: #fff !important; font-weight: 700; font-size: 15.5px; text-decoration: none; }
.knopf-licht:hover { background: #000; }
.fach-licht__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fach-licht__liste li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: #fff; font-size: 15.5px; line-height: 1.45; box-shadow: 0 1px 2px rgba(16, 22, 20, .06); }
.fach-licht__liste .ziffer { width: 30px; height: 30px; border-radius: 50%; background: var(--l-text); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 750; }

.marke-licht { max-width: 1360px; margin: 0 auto; padding: 130px var(--seite) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px 72px; }
.marke-licht h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.04; letter-spacing: -.033em; font-weight: 780; }
.marke-licht p { font-size: 17px; line-height: 1.65; color: var(--l-text-2); margin-top: 14px; }
.marke-licht p:first-child { margin-top: 0; }
.marke-licht .marke-licht__gross { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.4; color: var(--l-text); font-weight: 560; letter-spacing: -.012em; }

/* Illustrationen (Inhaber 20.10.2026): Erklärzeichnungen mit Flächen statt Haarlinien. Wand weiß, Dach und Tür anthrazit,
   Glas als kühler Verlauf, der Rollladenpanzer als Fläche, die fährt; Grün nur für das, was man wählt oder was wirkt. */
.welt-licht .il-wand { fill: #fff; stroke: #cdd4d1; stroke-width: 1.2; }
.welt-licht .il-dach { fill: #2b3135; }
.welt-licht .il-geschoss { stroke: #e3e8e5; stroke-width: 1.4; }
.welt-licht .il-boden { fill: #dfe4e1; }
.welt-licht .il-kasten { fill: #e8ecea; stroke: #c3cbc8; stroke-width: 1; }
.welt-licht .il-rahmen { fill: #fbfcfb; stroke: #94a09b; stroke-width: 1.2; }
.welt-licht .il-glas { fill: url(#il-glas); }
.welt-licht .il-spiegel { fill: #fff; opacity: .42; }
.welt-licht .il-sprosse { stroke: #94a09b; stroke-width: 1.2; }
.welt-licht .il-panzer { fill: url(#il-panzer); }
.welt-licht .il-endleiste { fill: #4b5458; }
.welt-licht .il-bank { fill: #dde3e0; }
.welt-licht .il-tuer { fill: #3a4247; }
.welt-licht .il-griff { fill: #cfd6d3; }
.welt-licht .il-geraet-platte { fill: #fff; stroke: #1b1f22; stroke-width: 1.2; }
.welt-licht .il-geraet-symbol { fill: #1b1f22; }
.welt-licht .il-aktor { fill: #fff; stroke: #1b1f22; stroke-width: 1.2; stroke-dasharray: 5 3 1.5 3; }
.welt-licht .il-motor { fill: rgba(149, 193, 31, .32); stroke: var(--gruen-tief); stroke-width: 1.3; }
.welt-licht .il-motor-kopf { fill: #fff; stroke: var(--gruen-tief); stroke-width: 1.3; }
.welt-licht .il-dose { fill: #fff; stroke: #1b1f22; stroke-width: 1.2; }
.welt-licht .il-strom { fill: none; stroke: #1b1f22; stroke-width: 2; stroke-linejoin: round; }
.welt-licht .il-steuer { fill: none; stroke: var(--gruen-tief); stroke-width: 2.2; stroke-linejoin: round; }
.welt-licht .il-entfaellt { fill: none; stroke: #a7b1ad; stroke-width: 1.6; stroke-dasharray: 5 5; }
.welt-licht .il-kreuz { fill: none; stroke: #6b7470; stroke-width: 2; stroke-linecap: round; }
.welt-licht .il-funk { fill: none; stroke: var(--gruen); stroke-width: 2.4; stroke-linecap: round; }
.welt-licht .il-text { fill: var(--l-text-2); font-family: var(--text); font-weight: 560; }
.welt-licht .il-text--stark { fill: var(--l-text); font-weight: 720; }
.welt-licht .il-titel { fill: var(--l-text); font-family: var(--text); font-weight: 760; letter-spacing: -.01em; }
.welt-licht .il-etage { fill: var(--l-text-2); font-family: var(--text); font-weight: 720; letter-spacing: .04em; }
.welt-licht .il-mass { stroke: #aab4b0; stroke-width: 1.2; }
.welt-licht .il-mass--basis { stroke: var(--l-text); stroke-width: 1.6; }
.welt-licht .il-basis { stroke: var(--l-text); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity .3s; }
.welt-licht .verstellt .il-basis { opacity: .5; }
.welt-licht .il-akzent { fill: var(--gruen-tief); }
.welt-licht :is(#fig3-svg, #fig6-svg) .vorhang, .welt-licht .f6-marke { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
/* Fig. 3: Markierungen als Ring um das Ziel mit Marke; abends Panzer zu, Giebelfenster hell */
.welt-licht #fig3-svg .ez-ring { fill: transparent; stroke: #1b1f22; stroke-opacity: .3; stroke-width: 1.5; stroke-dasharray: 5 5; transition: stroke .2s, stroke-opacity .2s; }
.welt-licht #fig3-svg .ez-marke { fill: #fff; stroke: #1b1f22; stroke-width: 1.3; transition: fill .2s; }
.welt-licht #fig3-svg .ez-kreis text { fill: #1b1f22; font-family: var(--text); font-weight: 780; }
.welt-licht #fig3-svg .ez-kreis:hover .ez-ring { stroke-opacity: .7; }
.welt-licht #fig3-svg .ez-kreis.an .ez-ring { stroke: var(--gruen-tief); stroke-opacity: 1; stroke-width: 2.4; stroke-dasharray: none; }
.welt-licht #fig3-svg .ez-kreis.an .ez-marke { fill: var(--gruen); stroke: var(--gruen-tief); }
.welt-licht #fig3-svg .ez-kreis:focus-visible .ez-ring { stroke: var(--gruen-tief); stroke-opacity: 1; stroke-width: 3; }
.welt-licht #fig3-svg .ez-kreis[data-ez="d"] .ez-ring { stroke: #fff; stroke-opacity: .55; }
.welt-licht #fig3-svg .ez-kreis[data-ez="d"].an .ez-ring { stroke: var(--gruen); stroke-opacity: 1; }
.welt-licht #fig3-svg.abend .il-wand { fill: #e8ecea; }
.welt-licht #fig3-svg.abend .glas { fill: url(#il-glas-abend); }
.welt-licht #fig3-svg.abend .giebel { fill: #f1d27a; }
/* Fig. 10: gewählte Fenster grün gerahmt, Kanal als Marke */
.welt-licht #fig10-svg .f10.an .il-rahmen { stroke: var(--gruen-tief); stroke-width: 2.6; }
.welt-licht #fig10-svg .f10-marke rect { fill: #fff; stroke: #cdd4d1; stroke-width: 1.2; transition: fill .2s; }
.welt-licht #fig10-svg .f10-marke text { fill: var(--l-text); font-family: var(--text); font-weight: 760; }
.welt-licht #fig10-svg .f10.an .f10-marke rect { fill: var(--gruen); stroke: var(--gruen-tief); }
/* Sender im Funktionsplan: dunkles Gerät mit Anzeige, Kanäle und Tasten */
.welt-licht .plan__geraet { border: 0; border-radius: 18px; padding: 16px; gap: 14px; background: #1d2327; box-shadow: var(--l-schatten); }
.welt-licht .plan__anzeige { margin: 0; padding: 12px 14px; border-radius: 10px; background: #0f1315; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--gruen-hell); font-size: 19px; font-weight: 720; letter-spacing: .01em; font-variant-numeric: tabular-nums; max-width: none; }
.welt-licht .plan__kanaele { gap: 8px; }
.welt-licht .plan__kanaele span { min-width: 44px; min-height: 42px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .09); color: #eef2ef; font-family: inherit; font-size: 15.5px; font-weight: 680; transition: background .15s; }
.welt-licht .plan__kanaele label:hover span { background: rgba(255, 255, 255, .16); }
.welt-licht .plan__kanaele input:checked + span { background: var(--gruen); color: #14181b; }
.welt-licht .plan__kanaele input:focus-visible + span { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.welt-licht .plan__tasten button { min-width: 58px; min-height: 50px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; transition: background .15s; }
.welt-licht .plan__tasten button:hover { background: rgba(255, 255, 255, .2); }
/* Endlagen: Knöpfe mit Schraubenkopf, Panzer fährt */
@media (min-width: 1021px) { .welt-licht .endlagen__spiel { grid-template-columns: 300px 1fr; } }
.welt-licht .endlagen__knoepfe button { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 18px 7px 8px; border: 1px solid #cfd5d2; border-radius: 999px; background: #fff; color: var(--l-text); font-family: inherit; font-size: 15px; font-weight: 680; box-shadow: 0 1px 2px rgba(16, 22, 20, .06); transition: border-color .2s, box-shadow .2s; }
.welt-licht .endlagen__knoepfe button:hover { border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .25); }
.welt-licht .endlagen__knoepfe .schraube { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cdd3d4 72%); box-shadow: inset 0 0 0 1px #98a1a2; font-size: 18px; font-weight: 800; line-height: 1; }
/* Motorfinder und Lieferumfang: Flächen für Kasten, Welle, Glas, Lamellen und Teile */
.welt-licht #fig1-svg .f1-kasten { fill: #eef1ef; }
.welt-licht #fig1-svg .f1-welle { fill: #dfe4e1; }
.welt-licht #fig1-svg .f1-glas { fill: url(#il-glas); }
.welt-licht #fig1-svg .f1-lamelle { fill: #dde2e0; }
.welt-licht .fig1-motor rect.l-verdeckt { fill: rgba(149, 193, 31, .26); stroke: var(--gruen-tief); }
.welt-licht .fig1-motor rect.l-voll:not([fill]) { fill: #fff; }
/* Verzahnung im Vergleich (Fig. 9) */
.prinzip__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.prinzip__titel { font-size: 15px; font-weight: 720; color: rgba(255, 255, 255, .66); }
.prinzip__fall--schraeg .prinzip__titel { color: #fff; }
.prinzip__text { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .62); }
.welt-licht .prinzip .zahnrad { display: block; width: 100%; max-width: none; height: auto; margin: 6px 0 4px; }
.zahnrad .zr-mantel { fill: url(#zr-licht); stroke: rgba(255, 255, 255, .82); stroke-width: 1.3; }
.zahnrad .zr-zahn { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.1; }
.zahnrad .zr-achse { stroke: rgba(255, 255, 255, .22); stroke-dasharray: 14 4 3 4; }
.zahnrad .zr-kontakt { fill: none; stroke: var(--gruen); stroke-width: 3; stroke-linecap: round; }
.zahnrad .zr-punkt { fill: var(--gruen); }
@media (max-width: 640px) { .prinzip__paar { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .welt-licht .vorhang, .welt-licht .f6-marke { transition: none !important; } }

/* Downloads nach Produkt (Service): je Gruppe die Anleitung, darunter Baugrößen mit Maßzeichnung und Garantie */
.dl-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.dl-gruppe h3 { font-size: 19px; line-height: 1.3; font-weight: 740; padding-bottom: 12px; border-bottom: 1px solid var(--l-text); }
.dl-anleitung { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--l-linie); font-size: 15px; line-height: 1.5; color: var(--l-text-2); }
.dl-anleitung a { font-weight: 680; }
.dl-anleitung span { font-variant-numeric: tabular-nums; }
.dl-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.dl-tabelle th, .dl-tabelle td { padding: 11px 0; border-bottom: 1px solid var(--l-linie); text-align: left; vertical-align: baseline; font-weight: 400; }
.dl-tabelle th { font-weight: 700; color: var(--l-text); }
.dl-tabelle th a { color: var(--l-text); text-decoration-color: var(--l-linie); }
.dl-tabelle th small { display: block; font-size: 12.5px; font-weight: 500; color: var(--l-text-2); font-variant-numeric: tabular-nums; }
.dl-tabelle td { padding-left: 14px; white-space: nowrap; }
.dl-tabelle td a { font-weight: 620; }
.welt-licht .senderreihe .links--pdf { margin-top: 6px; }
.welt-licht .senderreihe .links--pdf a { font-weight: 560; color: var(--l-text-2); }
.welt-licht .varianten-wahl .varianten-wahl__art { margin: 12px 0 6px; font-weight: 650; color: var(--l-text-2); }
.welt-licht .varianten-wahl > p:first-child + .varianten-wahl__art { margin-top: 0; }
.kaufbox__hinweis { font-size: 14.5px; line-height: 1.5; color: var(--l-text-2); }
@media (max-width: 1020px) {
  .dl-gruppen { grid-template-columns: 1fr; }
}

/* Senderseiten */
.liefer-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-text); max-width: 760px; }
.liefer-liste li { padding: 12px 0 13px; border-bottom: 1px solid var(--l-linie); font-size: 16px; line-height: 1.5; max-width: none; }
.produkt--sender .produkt__bild img { aspect-ratio: 1; object-fit: contain; padding: 14px; background: #fff; }
.welt-licht .plan--seite { margin-top: 0; }
.welt-licht .plan__text h3[id] { scroll-margin-top: calc(var(--leiste-h, 72px) + 20px); }
.welt-licht .senderreihe h3 a { color: var(--l-text); text-decoration: none; }
.welt-licht .senderreihe h3 a:hover { color: var(--gruen-tief); }

/* Rechtstexte (Impressum, Datenschutz), Lesemodus: Raster wie „Über casmartis.“, Überschrift links, Text rechts in Lesebreite.
   Was vor dem Start noch eingetragen wird, ist gestrichelt umrandet wie eine verdeckte Kante. */
.recht { max-width: 1360px; margin: 0 auto; padding: 40px var(--seite) 0; }
.recht__kopf, .recht__teil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px 72px; }
.recht__kopf { align-items: end; padding: 28px 0 44px; border-bottom: 1px solid var(--l-text); }
.recht__kopf h1 { font-size: clamp(40px, 4.2vw, 64px); line-height: 1; letter-spacing: -.036em; font-weight: 780; }
.recht .recht__kopf p { max-width: 52ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--l-text-2); }
.recht__teil { padding: 36px 0 38px; border-bottom: 1px solid var(--l-linie); }
.recht__teil h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.014em; font-weight: 740; }
.recht__text { max-width: 64ch; }
.recht__text > * + * { margin-top: 14px; }
.recht__text p, .recht__text li { font-size: 16.5px; line-height: 1.65; color: var(--l-text-2); }
.recht__text ul { margin-bottom: 0; padding-left: 1.15em; list-style: disc; }
.recht__text li + li { margin-top: 3px; }
.recht__text li::marker { color: var(--gruen-tief); }
.recht a { text-underline-offset: .2em; }
.recht__anschrift { font-style: normal; font-size: 19px; line-height: 1.55; font-weight: 560; color: var(--l-text); }
.recht__daten { margin: 0; }
.recht__daten div { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2.4fr); gap: 2px 24px; padding: 12px 0 13px; border-bottom: 1px solid var(--l-linie); }
.recht__daten div:first-child { padding-top: 0; }
.recht__daten div:last-child { padding-bottom: 0; border-bottom: 0; }
.recht__daten dt { font-size: 15px; line-height: 1.6; color: var(--l-text-2); }
.recht__daten dd { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--l-text); font-variant-numeric: tabular-nums; }
.recht__widerspruch { padding: 22px 26px 24px; border-radius: var(--l-radius); background: var(--l-flaeche); }
.recht__widerspruch h3 { font-size: 17px; line-height: 1.35; font-weight: 740; color: var(--l-text); }
.recht__widerspruch p { margin-top: 8px; color: var(--l-text); }
.recht__offen { padding: 0 6px; border: 1.5px dashed var(--gruen-tief); border-radius: 6px; color: var(--gruen-tief); font-weight: 650; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.recht__stand { padding: 26px 0 0; font-size: 14px; color: var(--l-text-2); }
@media (max-width: 1020px) {
  .recht { padding-top: 24px; }
  .recht__kopf, .recht__teil { grid-template-columns: 1fr; }
  .recht__kopf { gap: 12px; padding: 12px 0 30px; }
  .recht__teil { gap: 12px; padding: 28px 0 30px; }
}
@media (max-width: 520px) {
  .recht__daten div { grid-template-columns: 1fr; }
  .recht__widerspruch { padding: 18px 18px 20px; }
}

.welt-licht #wo-kaufen { padding-top: 120px; }
.welt-licht #wo-kaufen .abschnitt__kopf p { color: var(--l-text-2); }
.welt-licht .haendlerliste { border-top: 1px solid var(--l-text); }
.welt-licht .haendlerliste li { border-bottom: 1px solid var(--l-linie); padding: 22px 0; }
.welt-licht .haendlerliste__text { color: var(--l-text-2); }
.welt-licht .haendlerliste .knopf { border-radius: 10px; background: var(--l-nacht); border-color: var(--l-nacht); color: #fff; }
.welt-licht .haendlerliste .knopf:hover { background: #000; }
.welt-licht .bald__marke { color: var(--l-text-2); }


/* ---------------------------------------------------------------- Übergang: Werkblatt-Bauteile in der Lichtstudie
   Finder, Schriftfeld, Reihe, Figuren und Listen kommen aus der Basisschicht (werkblatt.css, marke.css). Ihre Farben
   hängen an Variablen; hier werden sie für die Lichtstudie neu belegt: Technik im Motor auf dunklen Röntgentafeln,
   Erklären und Wählen auf hellen Planflächen, Bilder auf Platten. */
.welt-licht {
  --tusche: #1b1f22;
  --graphit: #4a514f;
  --bleistift: #c3cac7;
  --befund: #4f6c0b;
  --befund-hell: #edf3dc;
  --tisch: #f2f4f3;
  --tisch-tief: #e6eae8;
  --norm: "Manrope cm", "Segoe UI", Roboto, Arial, sans-serif;
  --linie: 1px;
}
.welt-licht .abschnitt__kopf h2, .welt-licht .bereich h1, .welt-licht .produkt h1, .welt-licht .held h1 { font-weight: 780; letter-spacing: -.033em; }
.welt-licht .abschnitt__kopf h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.05; }
.welt-licht .abschnitt__kopf p { color: var(--l-text-2); }

/* Röntgentafeln: dieselbe Sprache wie der Motorschnitt der Startseite */
.welt-licht :is(.prinzip, .massfig) {
  --tusche: rgba(255, 255, 255, .92);
  --graphit: rgba(255, 255, 255, .66);
  --bleistift: rgba(255, 255, 255, .36);
  --blatt: #171b1f;
  --weiss: #171b1f;
  --tisch: #1d2226;
  --tisch-tief: #252b30;
  --befund: #95c11f;
  --befund-hell: rgba(149, 193, 31, .2);
  --punkt: #95c11f;
  color: rgba(255, 255, 255, .92);
  background-color: #171b1f;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 12px;
  padding: 22px 22px 16px;
}
.welt-licht :is(.prinzip, .massfig) .figur-unterschrift { color: rgba(255, 255, 255, .62); }
.welt-licht :is(.prinzip, .massfig) a { color: var(--gruen-hell); }

/* Helle Planfläche: Zeichnungen, die erklären oder zum Wählen dienen */
.welt-licht :is(.fig7, .fig9, .haus__fig, .plan__fig, .fig11, .fig2) { background: var(--l-flaeche); border-radius: 12px; padding: 22px 22px 16px; }
.welt-licht .fig, .welt-licht .nr { font-size: 15px; font-weight: 760; vertical-align: 0; }
.welt-licht .reihe__tabelle td.typ { font-size: 26px; font-weight: 760; letter-spacing: -.01em; }

/* Umschalter als Segment, auf hellem und auf dunklem Grund */
.welt-licht .umschalter { border: 0; border-radius: 11px; background: #e9edeb; padding: 3px; gap: 2px; }
.welt-licht .umschalter button { background: transparent; border: 0; border-radius: 8px; color: var(--l-text); min-height: 40px; }
.welt-licht .umschalter button + button { border-left: 0; }
.welt-licht .umschalter button[aria-pressed="true"] { background: #fff; color: var(--l-text); box-shadow: 0 1px 3px rgba(16, 22, 20, .2); }
.welt-licht .umschalter button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .6); }
.welt-licht :is(.prinzip, .massfig) .umschalter { background: rgba(255, 255, 255, .09); }
.welt-licht :is(.prinzip, .massfig) .umschalter button { color: rgba(255, 255, 255, .82); }
.welt-licht :is(.prinzip, .massfig) .umschalter button[aria-pressed="true"] { background: #fff; color: #14181b; }
.welt-licht :is(.prinzip, .massfig) .umschalter button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .16); }

/* Szene: Bildeinstieg der Bereichsseiten */
/* Die Szene ist höchstens 1480 breit; ihr linkes Drittel bleibt im Bild ruhig, dort steht der Text */
.szene { position: relative; height: min(74svh, 720px); min-height: 520px; overflow: hidden; background: #dfe3e1; max-width: 1480px; margin: 0 auto; container-type: inline-size; }
@media (min-width: 1500px) { .szene { border-radius: 14px; } }
.szene__bild { position: absolute; inset: 0; }
.szene__bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.szene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(246, 248, 247, .96) 0%, rgba(246, 248, 247, .94) 31%, rgba(246, 248, 247, .5) 41%, rgba(246, 248, 247, 0) 52%); }
.szene--dunkel::before { background: linear-gradient(90deg, rgba(10, 14, 20, .58), rgba(10, 14, 20, .28) 42%, rgba(10, 14, 20, 0) 66%); }
.szene__innen { position: relative; z-index: 2; height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--seite) 46px; display: flex; align-items: center; }
.szene__text { width: max(280px, calc(100cqw / 3 - max(var(--seite), (100cqw - 1360px) / 2 + var(--seite)) - 20px)); }
.szene h1 { font-size: clamp(34px, 3.3vw, 50px); hyphens: manual; line-height: 1; letter-spacing: -.036em; font-weight: 780; color: var(--l-text); text-wrap: balance; }
.szene .szene__lead { margin-top: 18px; font-size: 18px; line-height: 1.55; color: #20262a; max-width: 44ch; }
.szene__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px !important; }
.szene__aktionen .knopf { padding: 0 20px; }
/* Umbrechen die Knöpfe in der schmalen Textspalte, stehen sie gleich breit untereinander */
.szene:not(.szene--raum) .szene__aktionen:has(.knopf + .knopf) .knopf { flex: 1 1 auto; justify-content: center; }
.szene--dunkel h1 { color: #fff; }
.szene--dunkel .szene__lead { color: #e4ebe7; }
.szene .szene__bildart { position: absolute; right: 44px; bottom: 62px; z-index: 3; margin: 0; padding: 3px 9px; border-radius: 6px; background: rgba(20, 24, 27, .66); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; }
/* Platzhalter Wohnraum: Bild nach rechts gerückt, Leuchte und Sideboard außerhalb; Text an der Satzkante vor dem Fenster */
.szene--raum .szene__bild img { left: -25%; width: 125%; }
.szene--raum .szene__innen { align-items: flex-start; padding-top: clamp(40px, 8vh, 88px); }
.szene--raum .szene__text { width: min(440px, 30vw); }
.szene--raum h1 { font-size: clamp(34px, 3.3vw, 52px); }

/* Eckdaten als weiße Leiste, die über die Szene greift */
.eckdaten-band { position: relative; z-index: 3; max-width: 1360px; margin: -46px auto 0; padding: 0 var(--seite); }
.eckdaten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(16, 22, 20, .5), 0 1px 2px rgba(16, 22, 20, .06); }
.eckdaten li { display: grid; align-content: start; gap: 4px; padding: 16px 22px 18px; max-width: none; }
.eckdaten li + li { box-shadow: -1px 0 0 var(--l-linie); }
.eckdaten span { font-size: 12.5px; color: var(--l-text-2); }
.eckdaten b { font-size: 17px; font-weight: 720; line-height: 1.35; color: var(--l-text); font-variant-numeric: tabular-nums; }
.eckdaten a[href^="tel:"] { color: var(--l-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.eckdaten a[href^="tel:"]:hover { color: var(--gruen-tief); }

/* Service: Bildplatte im Einstieg, Kurzwege als Zeile */
.bereich__bild--szene { position: relative; }
.bereich__bild--szene img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
.bereich__bild--raum img { object-position: 82% 40%; }
.bereich__bild--kasten img { object-position: 62% 50%; }
.bereich__bild--szene.bereich__bild--kasten .szene__bildart { top: 12px; bottom: auto; }
.bereich__bild--kasten figcaption { margin-top: 12px; font-size: 13px; color: var(--l-text-2); }
.bereich__bild--szene .szene__bildart { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 3px 9px; border-radius: 6px; background: rgba(20, 24, 27, .66); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; }
.kurzwege-band { max-width: 1360px; margin: 64px auto 0; padding: 0 var(--seite); }
.welt-licht .kurzwege { border-top: 1px solid var(--l-text); }
.welt-licht .kurzweg + .kurzweg { border-left: 1px solid var(--l-linie); }
.welt-licht .kurzweg strong { color: var(--l-text); }
.welt-licht a.kurzweg:hover strong { color: var(--gruen-tief); }

/* Motorfinder: Zeichenfläche, Wellenwahl als Platten, Felder und Schriftfeld */
@media (min-width: 1101px) { .welt-licht .held__blatt { background: var(--l-flaeche); border-radius: 14px; } }
.welt-licht .welle-wahl { gap: 14px; align-items: stretch; }
.welt-licht .achteck { width: 116px; min-height: 116px; padding: 12px 8px 10px; align-content: center; border-radius: 14px; background: linear-gradient(180deg, #fff, #eef1ef); box-shadow: var(--l-schatten); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.welt-licht .achteck:hover { transform: translateY(-2px); box-shadow: var(--l-schatten-hoch); }
.welt-licht .achteck[data-sw="40"] svg { width: 36px; height: 36px; }
.welt-licht .achteck[data-sw="60"] svg { width: 46px; height: 46px; }
.welt-licht .achteck__welle { fill: none; stroke: var(--gruen-tief); stroke-width: 2.2; stroke-dasharray: none; }
.welt-licht .achteck__falz { stroke: var(--gruen-tief); stroke-width: 2; }
.welt-licht .achteck__mass { font-size: 21px; font-weight: 770; letter-spacing: -.01em; color: var(--l-text); }
.welt-licht .achteck:hover .achteck__welle { stroke: var(--gruen-tief); }
.welt-licht .achteck:has(input:checked) { background: #f5f9ea; box-shadow: 0 0 0 2px var(--gruen-tief), var(--l-schatten); }
.welt-licht .achteck:has(input:checked) .achteck__welle { fill: none; stroke-width: 2.6; }
.welt-licht .achteck:has(input:checked) .achteck__mass { color: var(--gruen-tief); }
.welt-licht .achteck:has(input:focus-visible) { outline: 3px solid var(--gruen); outline-offset: 3px; }
.welt-licht .mass input { width: 110px; border: 1px solid #cfd5d2; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 20px; font-weight: 650; }
.welt-licht .mass input:focus { border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .35); }
.welt-licht .mass input[aria-invalid="true"] { border-color: var(--fehler); }
.welt-licht .behang { gap: 10px; }
.welt-licht .behang__wahl { padding: 8px 8px 7px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #dfe4e1; }
.welt-licht .behang__wahl svg { width: 84px; height: 30px; border: 0; border-radius: 6px; background: #f2f4f3; }
.welt-licht .behang__wahl:has(input:checked) { box-shadow: 0 0 0 2px var(--gruen-tief); }
.welt-licht .behang__wahl:has(input:checked) svg { border: 0; }
.welt-licht .kasten-check input { border-radius: 5px; border-color: #8e9894; }
.welt-licht .kasten-check input:checked { background: var(--gruen-tief); border-color: var(--gruen-tief); box-shadow: inset 0 0 0 3px #fff; }
.welt-licht :is(.bedienung, .anzahl, .sender-wahl) input { border-color: #8e9894; }
.welt-licht .schriftfeld { border: 0; border-radius: 14px; background: #fff; box-shadow: var(--l-schatten); overflow: hidden; }
.welt-licht .sf__kopf { border-bottom: 1px solid var(--l-linie); }
.welt-licht .sf__zeilen div { border-bottom-color: var(--l-linie); }
.welt-licht .sf__zeilen dt { border-right-color: var(--l-linie); }
.welt-licht .dock { left: 12px; right: 12px; bottom: 0; border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -14px 34px -20px rgba(16, 22, 20, .5); }
@media (min-width: 1101px) { .welt-licht .dock { border: 0; left: auto; } }

/* Produktreihen, Varianten, Hinweise, Tasten */
.welt-licht .senderreihe { border-top: 0; gap: 18px; }
.welt-licht .senderreihe article, .welt-licht .senderreihe article + article { padding: 0; border-left: 0; }
.welt-licht .senderreihe img { border: 0; border-radius: 14px; box-shadow: var(--l-schatten); padding: 10px; }
.welt-licht .senderreihe h3 { font-family: inherit; font-weight: 770; font-size: 22px; letter-spacing: -.01em; }
.welt-licht .variante img { border: 0; border-radius: 14px; box-shadow: var(--l-schatten); }
.welt-licht .variante + .variante { border-left-color: var(--l-linie); }
.welt-licht .varianten { border-top-color: var(--l-text); }
.welt-licht .passt-nicht { border: 0; border-radius: 12px; background: var(--l-flaeche); padding: 24px 28px; }
.welt-licht .varianten-wahl a, .welt-licht .varianten-wahl span { border: 1px solid #cfd5d2; border-radius: 10px; font-family: inherit; font-size: 16px; font-weight: 680; }
.welt-licht .varianten-wahl a:hover { background: var(--l-flaeche); }
.welt-licht .varianten-wahl [aria-current="page"] { background: var(--l-nacht); border-color: var(--l-nacht); color: #fff; }
.welt-licht .telefonzeile a[href^="tel:"] { font-family: inherit; font-weight: 720; }

/* Kastenblick: Raumbild mit Röntgenblick, Ausschnitt um Kasten und Fenster */
.kastenblick { max-width: 1360px; margin: 0 auto; padding: 130px var(--seite) 0; }
.kastenblick__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px 64px; align-items: center; }
.kastenblick h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.05; letter-spacing: -.033em; font-weight: 780; }
.kastenblick__text p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--l-text-2); }
.kastenblick__links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.kastenblick__bild, .bereich .kastenblick__bild { margin: 0; }
.kastenblick__ausschnitt { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #dfe3e1; box-shadow: var(--l-schatten); }
.kastenblick__raum { position: absolute; left: -88.68%; top: -6.45%; width: 188.68%; aspect-ratio: 1672 / 1071; }
.kastenblick__raum img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.kastenblick .roentgen, .kastenblick__bild .roentgen { opacity: 1; clip-path: none; transition: none; }
.kastenblick__bild figcaption { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--l-text-2); }
.kastenblick__bildart { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 5px; background: rgba(20, 24, 27, .8); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }

/* Fahrplan beim HRC06T: dasselbe Fenster morgens und nachts */
.welt-licht .timer { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 56px; }
.fahrplan { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fahrplan__zeit { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; box-shadow: var(--l-schatten); }
.fahrplan__zeit img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 80% 38%; }
.fahrplan__zeit p { position: absolute; left: 14px; bottom: 14px; margin: 0; display: grid; padding: 10px 14px 11px; border-radius: 10px; background: rgba(255, 255, 255, .92); }
.fahrplan__zeit b { font-size: 30px; font-weight: 780; letter-spacing: -.02em; line-height: 1; color: var(--l-text); font-variant-numeric: tabular-nums; }
.fahrplan__zeit span { font-size: 13px; color: var(--l-text-2); margin-top: 3px; }
.fahrplan__zeit--nacht p { background: rgba(20, 24, 27, .82); }
.fahrplan__zeit--nacht b { color: #fff; }
.fahrplan__zeit--nacht span { color: #c9d2cd; }
.fahrplan figcaption { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--l-text-2); }

/* Produktseite: Motorkopf und Funkset im ersten Blick */
.produkt__bilder { position: sticky; top: calc(var(--leiste-h) + 24px); align-self: start; display: grid; gap: 22px; }
.produkt__bilder .produkt__bild { position: static; }
.produkt__bild--zweit img { aspect-ratio: 4 / 3; object-fit: contain; padding: 14px; background: #fff; }

/* Lieferumfang: Foto neben der Einleitung, die Tafel darunter über die ganze Breite */
@media (min-width: 1021px) {
  .welt-licht .abschnitt.lieferumfang { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
  .welt-licht .lieferumfang > .abschnitt__kopf { grid-column: 1; grid-row: 1; }
  .welt-licht .lieferumfang > .tafel--lieferumfang { grid-column: 2; grid-row: 1; max-width: none; margin: 0 0 40px; }
  .welt-licht .lieferumfang > .fig2 { grid-column: 1 / -1; grid-row: 2; }
}
.welt-licht .gut-zu-wissen { max-width: none; }
.reihe__set { margin-top: 28px; font-size: 16px; color: var(--l-text-2); }
.welt-licht .passt-nicht { max-width: none; }
.welt-licht .gut-zu-wissen ul { columns: 3; }

/* Bilder auf weißen Platten */
.welt-licht .tafel img, .welt-licht .tafel__bild, .welt-licht .produkt__bild img, .welt-licht .bereich__bild img, .welt-licht .bereich__bild--rahmen img {
  border: 0; border-radius: 14px; background: #fff; box-shadow: var(--l-schatten);
}
.welt-licht .tafel__bild img { box-shadow: none; border-radius: 14px; }
.welt-licht .tafel__marke { border: 0; border-radius: 6px; background: rgba(20, 24, 27, .78); color: #fff; }

/* Knöpfe und Kaufbox */
.welt-licht .knopf { border-radius: 10px; background: var(--l-nacht); border-color: var(--l-nacht); color: #fff; }
.welt-licht .knopf:hover { background: #000; color: #fff; }
.welt-licht .knopf--hell { background: #fff; color: var(--l-text); border: 1px solid #cfd5d2; }
.welt-licht .kaufbox { border: 0; border-radius: 14px; background: #fff; box-shadow: var(--l-schatten); overflow: hidden; }

/* ---------------------------------------------------------------- Fuß */
.welt-licht .seitenfuss { margin-top: 150px; border-top: 0; background: var(--l-nacht); color: var(--l-text-hell-2); }
.welt-licht .seitenfuss__marke p { color: var(--l-text-hell-2); }
.welt-licht .seitenfuss__marke a[href^="tel:"] { font-family: inherit; font-weight: 720; color: #fff; }
.welt-licht .seitenfuss nav h2 { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.welt-licht .seitenfuss nav li a { color: var(--l-text-hell); border-bottom-color: var(--l-linie-dunkel); }
.welt-licht .seitenfuss nav li a:hover { color: var(--gruen-hell); }
.welt-licht .seitenfuss__zeile { background: #0e1113; }
.welt-licht .seitenfuss__zeile div, .welt-licht .seitenfuss__zeile a { color: #8c9692; }
.welt-licht .seitenfuss__zeile a:hover { color: #fff; }

/* ---------------------------------------------------------------- Schmale Fenster: Bild oben, Text darunter */
@media (max-width: 1100px) {
  .lauf__schritt { margin-left: max(24px, calc((100% - var(--bild-b)) / 2 + var(--bild-b) * .21)); width: calc(var(--bild-b) * .26); }
  .innenleben__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .innenleben__beleg { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
  .welt-licht { --buehne-h: 42svh; }
  .lauf { background: #fff; }
  .lauf__buehne { min-height: 0; height: calc(var(--buehne-h) + 58px); background: #fff; z-index: 3; }
  .lauf__texte { z-index: 1; }
  .lauf__dock { height: calc(var(--buehne-h) + 58px); margin-top: calc(-1 * (var(--buehne-h) + 58px)); z-index: 4; }
  .lauf__rahmen { left: auto; right: 0; top: calc(var(--buehne-h) / 2); width: max(100%, calc(var(--buehne-h) * 1.5612)); transform: translateY(-50%); }
  .lauf .lauf__bildart { right: 10px; bottom: 68px; font-size: 11px; }
  .lauf__zeiten { left: 0; right: 0; bottom: 0; height: 58px; border-radius: 0; box-shadow: 0 1px 0 var(--l-linie); }
  .lauf__zeiten button { grid-template-columns: 1fr; padding: 8px 6px; text-align: center; border-radius: 0; }
  .lauf__vorschau, .lauf__zeiten .lauf__was { display: none; }
  .lauf__zeiten .lauf__uhr { font-size: 16px; }
  .lauf__jetzt { top: 0; }
  .lauf__texte { margin-top: 0; }
  .lauf__schritt { min-height: 72svh; margin: 0; width: auto; padding: 40px var(--seite) 56px; border-bottom: 1px solid var(--l-linie); }
  /* Handy: nicht abblenden. Blasse Texte waren am Handy schwer lesbar und unter dem Kontrastminimum (PageSpeed 26.10.2026, E291);
     welche Tageszeit gerade dran ist, zeigt die Leiste unter dem Bild */
  .lauf__schritt:not(.ist-aktiv) .lauf__inhalt { opacity: 1; }
  .lauf__auftakt { min-height: 0; }
  .lauf__schritt--nacht { background: var(--l-nacht); }
  .lauf__schritt--nacht h2, .lauf__schritt--nacht strong { color: var(--l-text-hell) !important; }
  .lauf__schritt--nacht p, .lauf__schritt--nacht figcaption { color: var(--l-text-hell-2) !important; }
  .lauf__schritt--nacht .lauf__uhr { color: var(--gruen) !important; }
  .lauf__schritt--nacht a { color: var(--gruen-hell) !important; }
  .lauf h1 { font-size: clamp(38px, 9vw, 52px); }
  .lauf h2 { font-size: clamp(26px, 6.4vw, 34px); }
  .lauf p { font-size: 16.5px; }
  .platte { flex: 1; height: 112px; }
  .sortiment, .innenleben { padding: 80px 0 90px; }
  .sortiment__flaeche { grid-template-columns: 1fr; }
  .bereich-feld--gross { grid-row: auto; }
  .bereich-feld--gross .bereich-feld__bild img, .bereich-feld__bild img { height: 220px; }
  .innenleben__bild { padding: 14px 10px 12px; }
  .motor-schnitt * { vector-effect: non-scaling-stroke; }
  .motor-schnitt .ms-namen text { font-size: 40px; }
  .motor-schnitt .ms-bezug text { font-size: 36px; }
  .motor-schnitt .ms-bezug .ms-nr { r: 30px; }
  .hilfe-licht, .marke-licht { padding-top: 90px; }
  .hilfe-licht__band { grid-template-columns: 1fr; }
  .hilfe-licht__wege { grid-template-columns: 1fr; }
  .hilfe-licht__wege li, .hilfe-licht__wege li:first-child { padding: 18px 0 20px; }
  .hilfe-licht__wege li + li { border-left: 0; }
  .fach-licht { margin-top: 80px; }
  .fach-licht__innen { grid-template-columns: 1fr; padding: 32px 24px; }
  .marke-licht { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
  .szene { height: auto; min-height: 0; overflow: visible; background: #fff; }
  .szene::before { display: none; }
  .szene__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
  .szene--raum .szene__bild img { object-position: 84% 45%; }
  .szene__innen, .szene--raum .szene__innen { display: block; height: auto; max-width: none; padding: 26px var(--seite) 28px; }
  .szene__text, .szene--raum .szene__text { width: auto; }
  .szene h1, .szene--raum h1 { font-size: clamp(36px, 9vw, 50px); }
  .szene--dunkel h1 { color: var(--l-text); }
  .szene--dunkel .szene__lead { color: #20262a; }
  .szene .szene__bildart { right: 10px; bottom: 10px; font-size: 11px; }
  .eckdaten-band { margin: 0 auto; padding: 0 var(--seite); }
  .eckdaten { grid-template-columns: 1fr 1fr; }
  .eckdaten li:nth-child(odd) { box-shadow: none; }
  .eckdaten li:nth-child(n+3) { border-top: 1px solid var(--l-linie); }
  .kurzwege-band { margin-top: 40px; }
  .welt-licht :is(.fig7, .fig9, .haus__fig, .plan__fig, .fig2, .fig11, .prinzip, .massfig) { padding: 16px 12px 12px; }
  .welt-licht .senderreihe { gap: 14px; }
  .szene--raum .szene__bild img { left: 0; width: 100%; }
  .kastenblick { padding-top: 80px; }
  .kastenblick__innen { grid-template-columns: 1fr; }
  .welt-licht .timer { grid-template-columns: 1fr; }
  .produkt__bilder { position: static; }
  .welt-licht .gut-zu-wissen ul { columns: 1; }
  .pfad li:not(:nth-last-child(-n+2)) { display: none; }
  .pfad li:nth-last-child(2)::before { content: none; }
  .fahrplan { gap: 10px; }
  .fahrplan__zeit p { left: 10px; bottom: 10px; padding: 7px 10px 8px; }
  .fahrplan__zeit b { font-size: 22px; }
  .fahrplan__zeit span { font-size: 12px; }
  .produkt__bilder { display: contents; }
  .produkt__bilder .produkt__bild { order: 0; }
  .produkt__info { order: 1; }
  .produkt__bilder .produkt__bild--zweit { order: 2; }
}
@media (max-width: 640px) {
  .innenleben__liste { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .roentgen, .lauf__schleier, .lauf__inhalt, .platte, .bereich-feld { transition: none !important; }
}

/* ---------------------------------------------------------------- SEO/GEO-Runde 20.10.2026 */
/* Gattungsbegriff als zweite Zeile unter der Überschrift; keine Dachzeilen darüber */
.h1-zeile { display: block; margin-top: 10px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.3; letter-spacing: -.01em; font-weight: 620; color: var(--l-text-2); }

/* Produktseiten: eigener Text links, Kasten rechts */
.wissen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.wissen h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.03em; font-weight: 780; }
.wissen__text p { max-width: 62ch; margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--l-text-2); }
.wissen__kasten { padding: 26px 28px 28px; border-radius: var(--l-radius); background: var(--l-flaeche); }
.wissen__kasten h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.012em; font-weight: 740; }
.wissen__kasten p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--l-text-2); }
.wissen__kasten .wissen__link { margin-top: 16px; }

/* Fragen mit Antwort */
.fragen__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 56px; border-top: 1px solid var(--l-text); }
.frage { padding: 22px 0 24px; border-bottom: 1px solid var(--l-linie); }
.frage h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; font-weight: 720; }
.frage p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--l-text-2); }

/* Vergleichstabellen im HTML statt per Skript */
.vergleich-rahmen { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vergleich { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.vergleich caption { caption-side: bottom; padding-top: 12px; text-align: left; font-size: 14px; line-height: 1.5; color: var(--l-text-2); }
.vergleich th, .vergleich td { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--l-linie); text-align: left; vertical-align: top; }
.vergleich thead th { padding-top: 0; border-bottom-color: var(--l-text); font-size: 13.5px; font-weight: 650; color: var(--l-text-2); }
.vergleich tbody th { font-weight: 680; color: var(--l-text); }
.vergleich td { color: var(--l-text-2); }
.vergleich a { font-weight: 680; text-underline-offset: .2em; }
.pruefliste .vergleich-rahmen { margin-top: 12px; }
.pruefliste .vergleich { min-width: 0; width: auto; font-size: 14.5px; }
.pruefliste .vergleich th, .pruefliste .vergleich td { padding: 7px 22px 7px 0; }

/* Hinweis-Kasten: Warnhinweise und Korrekturen zu den Anleitungen */
.hinweis-kasten { max-width: 900px; margin-top: 28px; padding: 22px 26px 24px; border-radius: var(--l-radius); background: var(--l-flaeche); }
.hinweis-kasten h3 { font-size: 17px; line-height: 1.35; font-weight: 740; color: var(--l-text); }
.hinweis-kasten p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--l-text); }
.hinweis-kasten--recht { margin-top: 0; }
.stand { margin-top: 22px; font-size: 14px; color: var(--l-text-2); }

/* Rollladenmotoren: die vier Baugrößen je Variante als Links */
.variante__typen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 380px; margin: 18px 0 0; padding: 0; list-style: none; }
.variante__typen a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--l-linie); border-radius: 10px; font-weight: 700; color: var(--l-text); text-decoration: none; transition: border-color .2s; }
.variante__typen a:hover { border-color: var(--l-text); }
.variante__typen small { font-size: 12.5px; font-weight: 500; color: var(--l-text-2); }

/* Ratgeber: Schrittfolgen */
.recht__text ol { margin-bottom: 0; padding-left: 1.3em; list-style: decimal; }
.recht__text ol li + li { margin-top: 8px; }
.recht__text ol li::marker { color: var(--gruen-tief); font-weight: 700; }
.recht__text strong { color: var(--l-text); font-weight: 680; }
.recht__text > ul:first-child, .recht__text > ol:first-child { margin-top: 0; }
.recht__kopf h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.ratgeber__bild { max-width: 480px; margin: 26px 0 0; }
.ratgeber__bild img { display: block; width: 100%; height: auto; border-radius: var(--l-radius); box-shadow: var(--l-schatten); }
.ratgeber__bild figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--l-text-2); }
#lieferumfang .hinweis-kasten { max-width: 760px; }

@media (max-width: 760px) {
  .wissen { grid-template-columns: 1fr; gap: 24px; }
  .wissen__kasten { padding: 20px 18px 22px; }
  .hinweis-kasten { padding: 18px 18px 20px; }
  /* Vergleichstabellen als Kartenliste: Zeilenkopf oben, darunter Etikett und Wert */
  .vergleich--karten { display: flex; flex-direction: column; min-width: 0; }
  .vergleich--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vergleich--karten tbody, .vergleich--karten tr, .vergleich--karten th { display: block; }
  .vergleich--karten caption { order: 2; }
  .vergleich--karten tbody { border-top: 1px solid var(--l-text); }
  .vergleich--karten tr { padding: 14px 0 12px; border-bottom: 1px solid var(--l-linie); }
  .vergleich--karten th, .vergleich--karten td { padding: 0; border: 0; }
  .vergleich--karten tbody th { padding-bottom: 6px; font-size: 16.5px; }
  .vergleich--karten td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 12px; padding: 3px 0; color: var(--l-text); }
  .vergleich--karten td::before { content: attr(data-label); color: var(--l-text-2); }
}

/* Kaufweg auf schmalen Bildschirmen: Kaufbox vor Kennzahlen und Varianten, „Wo kaufen“ bleibt im Kopf */
@media (max-width: 1020px) {
  .produkt__info { display: flex; flex-direction: column; }
  .produkt__info > .kaufbox { order: 1; }
  .produkt__info > :is(.kennzahlen, .varianten-wahl, .produkt__passt) { order: 2; }
  .kaufbox { scroll-margin-top: calc(var(--leiste-h) + 16px); }
}
@media (max-width: 760px) {
  .welt-licht .leiste__kauf { display: inline-flex; margin-left: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .welt-licht .leiste__menue { margin-left: 0; }
}
@media (max-width: 345px) {
  .welt-licht .leiste__kauf { display: none; }
  .welt-licht .leiste__menue { margin-left: auto; }
}

/* Sortiment: lange Wörter wie „Rollladenmotoren“ trennen statt die Karte zu sprengen */
.bereich-feld { min-width: 0; }
.bereich-feld__text b { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* ---------------------------------------------------------------- Motorfinder: Ihr Fenster als Illustration (Runde 20.10.2026, Teil 2)
   Überschrift über dem Werkzeug, links die Fensterillustration (klebt beim Scrollen), rechts Wahl und Ergebnis. */
.welt-licht .held { grid-template-columns: minmax(0, 1fr) 356px; grid-template-areas: "kopf kopf" "blatt finder"; column-gap: 40px; row-gap: 20px; min-height: 0; padding-top: 22px; align-items: start; }
.welt-licht .held__kopf { grid-area: kopf; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; }
.welt-licht .held__kopf h1 { grid-column: 1 / -1; font-size: clamp(34px, 3.1vw, 48px); line-height: 1.04; }
.welt-licht .held__kopf .held__sub { grid-column: 1; margin-top: 0; max-width: 68ch; font-size: 17px; line-height: 1.55; color: var(--l-text-2); }
.welt-licht .held__kopf .pfeillink { grid-column: 2; margin: 0; white-space: nowrap; }
.welt-licht .held__blatt { grid-area: blatt; position: sticky; top: calc(var(--leiste-h) + 20px); display: flex; flex-direction: column; height: clamp(520px, calc(100vh - var(--leiste-h) - 150px), 720px); min-height: 0; max-height: none; margin: 0; background: var(--l-flaeche); border-radius: 14px; }
.welt-licht .held__svg { position: relative; inset: auto; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; display: block; }
.welt-licht .held__fig { position: static; margin: 0; padding: 0 22px 16px; font-size: 13px; color: var(--l-text-2); }
.welt-licht .finder { grid-area: finder; }
.welt-licht .massanzeige { padding: 4px 12px 5px; border: 1px solid #cfd5d2; border-radius: 999px; background: #fff; font-family: var(--text); font-size: 14.5px; font-weight: 680; line-height: 1.2; color: var(--gruen-tief); box-shadow: 0 1px 2px rgba(16, 22, 20, .08); transition: border-color .2s; }
.welt-licht .massanzeige.gesetzt { color: var(--l-text); }
.welt-licht .massanzeige--h { transform: translate(-50%, -50%); }
.welt-licht .massanzeige:hover { border-color: var(--gruen-tief); }
.welt-licht .f1-wand { fill: #fff; stroke: #dbe1de; stroke-width: 1; }
.welt-licht .f1-kasten { fill: #e8ecea; stroke: #c3cbc8; stroke-width: 1; }
.welt-licht .f1-kasten-innen { fill: #d8dfdc; }
.welt-licht .f1-wickel { opacity: .5; }
.welt-licht .f1-welle { fill: #c3cbc8; stroke: #9aa5a1; stroke-width: 1; }
.welt-licht .f1-kante { stroke: #aeb8b4; stroke-width: 1; }
.welt-licht .f1-lager { fill: #4b5458; }
.welt-licht .f1-rohr { fill: rgba(149, 193, 31, .34); stroke: var(--gruen-tief); stroke-width: 1.5; stroke-dasharray: 5 3; }
.welt-licht .f1-kopf { fill: #fff; stroke: var(--gruen-tief); stroke-width: 1.6; }
.welt-licht .f1-zulang { fill: rgba(138, 46, 18, .1); stroke: var(--fehler); stroke-width: 1.4; stroke-dasharray: 4 3; }
.welt-licht .f1-mass { stroke: #9aa5a1; stroke-width: 1.2; }
.welt-licht .f1-mass--motor { stroke: var(--gruen-tief); stroke-width: 1.5; }
.welt-licht .f1-pille { fill: #fff; stroke: #cfd5d2; stroke-width: 1; }
.welt-licht .f1-pillentext { fill: var(--l-text); font-family: var(--text); font-weight: 680; font-variant-numeric: tabular-nums; }
.welt-licht .f1-pille-g--motor .f1-pille { fill: var(--l-nacht); stroke: none; }
.welt-licht .f1-pille-g--motor .f1-pillentext { fill: #fff; }
.welt-licht .f1-pille-g--hinweis .f1-pillentext { fill: var(--l-text-2); }
.welt-licht .f1-pille-g--fehler .f1-pille { stroke: var(--fehler); }
.welt-licht .f1-pille-g--fehler .f1-pillentext { fill: var(--fehler); }
.welt-licht .f1-pillentext--motor { fill: var(--gruen-tief); }
.welt-licht .f1-hinweis { fill: var(--l-text-2); font-family: var(--text); font-weight: 650; }
.welt-licht .f1-hinweis--fehler { fill: var(--fehler); }
.welt-licht .f1-sender-gehaeuse { fill: #1d2327; }
.welt-licht .f1-sender-anzeige { fill: #3d484e; }
.welt-licht .f1-sender-taste { fill: #737e83; }
.welt-licht .f1-motor.neu { animation: f1-ein .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes f1-ein { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.welt-licht .sf__bild { display: block; margin: 0; background: #fff; border-bottom: 1px solid var(--l-linie); }
.welt-licht .sf__bild[hidden] { display: none; }
.welt-licht .sf__bild img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 40% 60%; }
.welt-licht .sf__bild figcaption { padding: 6px 14px 8px; background: #fff; font-size: 12px; line-height: 1.4; color: var(--l-text-2); }
.welt-licht .sf__ansicht { border-bottom: 1px solid var(--l-linie); }
@media (max-width: 1100px) {
  .welt-licht .held { display: block; padding-top: 10px; }
  .welt-licht .held__kopf { display: block; }
  .welt-licht .held__kopf .held__sub { margin-top: 10px; }
  .welt-licht .held__kopf .pfeillink { margin-top: 10px; white-space: normal; }
  .welt-licht .held__blatt { display: none; }
  .welt-licht .finder { padding-top: 22px; }
  .welt-licht .sf__bild img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .welt-licht .held__kopf h1 { font-size: 30px; line-height: 1.08; }
  .welt-licht .held__kopf .held__sub { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .welt-licht .f1-motor.neu { animation: none; }
}

/* ---------------------------------------------------------------- Senderreihe: Bild verlinkt auf die Detailseite */
.senderreihe__bild { display: block; border-radius: 14px; }
.welt-licht .senderreihe__bild img { transition: box-shadow .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); }
.welt-licht .senderreihe__bild:hover img { box-shadow: var(--l-schatten-hoch); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .welt-licht .senderreihe__bild img { transition: none; }
  .welt-licht .senderreihe__bild:hover img { transform: none; }
}

/* ---------------------------------------------------------------- Kontakt: Angaben links, Formular rechts */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px 72px; align-items: start; max-width: 1360px; margin: 0 auto; padding: 40px var(--seite) 0; }
.kontakt h1 { font-size: clamp(40px, 4.2vw, 64px); line-height: 1; letter-spacing: -.036em; font-weight: 780; }
.kontakt__lead { max-width: 46ch; margin-top: 18px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--l-text-2); }
.kontakt .recht__daten { margin-top: 28px; }
.kontakt-weg { margin-top: 18px; }
.kontakt__hinweis { max-width: 48ch; margin-top: 22px; font-size: 14.5px; line-height: 1.55; color: var(--l-text-2); }
.formular { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 28px; border-radius: var(--l-radius); background: #fff; box-shadow: var(--l-schatten); }
.formular__titel { grid-column: 1 / -1; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; font-weight: 760; }
.formular__feld { display: grid; gap: 7px; min-width: 0; align-content: start; }
.formular__feld--voll { grid-column: 1 / -1; }
.formular label { font-size: 14.5px; font-weight: 650; color: var(--l-text); }
.formular__optional { font-weight: 500; color: var(--l-text-2); }
.formular :is(input, select, textarea) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cfd5d2; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; line-height: 1.4; color: var(--l-text); }
.formular textarea { min-height: 168px; resize: vertical; line-height: 1.55; }
.formular select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b1f22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
.formular :is(input, select, textarea):focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .35); }
.formular :is(input, textarea):user-invalid { border-color: var(--fehler); }
.formular ::placeholder { color: #87918d; }
.formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__datenschutz { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.55; color: var(--l-text-2); }
.formular__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.formular button.knopf { min-height: 48px; padding: 0 24px; font: inherit; font-weight: 680; cursor: pointer; }
.formular button.knopf:disabled { opacity: .55; cursor: progress; }
.formular__status { flex: 1 1 220px; font-size: 15px; line-height: 1.5; color: var(--l-text-2); }
.formular__status[data-art="ok"] { color: var(--gruen-tief); font-weight: 650; }
.formular__status[data-art="fehler"] { color: var(--fehler); font-weight: 600; }
@media (max-width: 1020px) {
  .kontakt { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kontakt { padding-top: 24px; gap: 32px; }
  .formular { grid-template-columns: 1fr; padding: 22px 16px; }
}

/* ---------------------------------------------------------------- Lieferumfang als helle Illustration (20.10.2026)
   Teile in ihren Materialien auf weißem Karton, Motorrohr anthrazit; gewählt: Kontur und Nummernmarke in Grün tief.
   Eingebaut: Welle grau mit Kanten, der Motor darin grün getönt und gestrichelt wie im Motorfinder. */
.welt-licht .fig2 .teil { cursor: pointer; }
.welt-licht .fig2 .f2-treffer { fill: transparent; }
.welt-licht .fig2 .f2-form { stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke .15s, stroke-width .15s; }
.welt-licht .fig2 .f2-metall { fill: #d3d9dc; stroke: #8f9a9f; }
.welt-licht .fig2 .f2-metall-dunkel { fill: #69757a; stroke: #4f5a5f; }
.welt-licht .fig2 .f2-kopf { fill: #b8c1c5; stroke: #7d888e; }
.welt-licht .fig2 .f2-kunststoff { fill: #4a5459; stroke: #343c40; }
.welt-licht .fig2 .f2-rohr { fill: #3a4247; stroke: #262d31; }
.welt-licht .fig2 .f2-rohr--ende { fill: #4a5358; }
.welt-licht .fig2 .f2-glanz { fill: #fff; opacity: .16; pointer-events: none; }
.welt-licht .fig2 .f2-draht { fill: none; stroke: #8f9a9f; stroke-width: 3; stroke-linecap: round; }
.welt-licht .fig2 .f2-griff { fill: #3a4247; }
.welt-licht .fig2 .f2-loch { fill: #f2f4f3; stroke: #8f9a9f; stroke-width: 1; vector-effect: non-scaling-stroke; }
.welt-licht .fig2 .f2-loch--dunkel { fill: #262d31; stroke: none; }
.welt-licht .fig2 .f2-papier { fill: #fff; stroke: #b9c2bf; }
.welt-licht .fig2 .f2-papierkante { fill: #e9edeb; stroke: #b9c2bf; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.welt-licht .fig2 .f2-titel { fill: #59646a; }
.welt-licht .fig2 .f2-zeile { stroke: #c7cfcc; stroke-width: 2; stroke-linecap: round; }
.welt-licht .fig2 .f2-haken-kreis { fill: none; stroke: #59646a; stroke-width: 1.4; }
.welt-licht .fig2 .f2-haken { fill: none; stroke: #59646a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.welt-licht .fig2 .f2-sender { fill: #1d2327; stroke: #1d2327; }
.welt-licht .fig2 .f2-sender-anzeige { fill: #3d484e; }
.welt-licht .fig2 .f2-sender-taste { fill: #737e83; }
.welt-licht .fig2 .f2-nicht-dabei { fill: rgba(255, 255, 255, .5); stroke: #9aa5a1; stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.welt-licht .fig2 .f2-kabel { fill: none; stroke: #2c3337; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.welt-licht .fig2 .f2-verdeckt { fill: rgba(149, 193, 31, .34); stroke: var(--gruen-tief); stroke-width: 1.5; stroke-dasharray: 5 3; }
.welt-licht .fig2 .f2-welle { fill: #c3cbc8; stroke: #9aa5a1; stroke-width: 1; }
.welt-licht .fig2 .f2-kante { stroke: #aeb8b4; stroke-width: 1; }
.welt-licht .fig2 .f2-wand { fill: #dfe4e1; stroke: #c3cbc8; stroke-width: 1; }
.welt-licht .fig2 .f2-karton { fill: #fff; stroke: #c3cbc8; stroke-width: 1.2; stroke-dasharray: 7 6; }
.welt-licht .fig2 .bezug path { stroke: #9aa5a1; stroke-width: 1.2; }
.welt-licht .fig2 .bezug__punkt { fill: #5b6662; }
.welt-licht .fig2 .bezug__marke { fill: #fff; stroke: #cfd5d2; stroke-width: 1.2; transition: fill .15s, stroke .15s; }
.welt-licht .fig2 .bezug text { font-family: var(--text); font-size: 14px; font-weight: 760; fill: var(--l-text); }
.welt-licht .fig2 .teil:hover .bezug__marke { stroke: var(--gruen-tief); }
.welt-licht .fig2 .teil.aktiv .f2-form { stroke: var(--gruen-tief); stroke-width: 2.4; }
.welt-licht .fig2 .teil.aktiv .f2-draht { stroke: var(--gruen-tief); }
.welt-licht .fig2 .teil.aktiv .bezug path { stroke: var(--gruen-tief); }
.welt-licht .fig2 .teil.aktiv .bezug__punkt { fill: var(--gruen-tief); }
.welt-licht .fig2 .teil.aktiv .bezug__marke { fill: var(--gruen-tief); stroke: var(--gruen-tief); }
.welt-licht .fig2 .teil.aktiv .bezug text { fill: #fff; }
.welt-licht .fig2[data-variante="kabel"] .nur-funk { pointer-events: none; }
.fig2__bild { min-width: 0; }
.welt-licht .fig2__auswahl { min-height: 2.9em; margin: 10px 2px 0; font-size: 14.5px; line-height: 1.45; color: var(--l-text-2); }
.welt-licht .fig2__auswahl b { margin-right: 6px; color: var(--gruen-tief); }
@media (min-width: 1181px) { .welt-licht .fig2__auswahl { display: none; } }
/* Gewählt: Teil hell grün hinterlegt, Kabel mit; Kabelring mit Glanzlinie und Bindern */
.welt-licht .fig2 .teil.aktiv .f2-treffer { fill: rgba(149, 193, 31, .16); }
.welt-licht .fig2 .teil.aktiv .f2-kabel { stroke: var(--gruen-tief); }
.welt-licht .fig2 .f2-treffer-kabel { fill: transparent; }
.welt-licht .fig2 .f2-kabel-glanz { fill: none; stroke: #6b767b; stroke-width: 1; }
.welt-licht .fig2 .f2-binder { fill: #e3e8e6; stroke: #8f9a9f; stroke-width: 1; }
/* Stückliste: Nummern als runde Marken wie in der Grafik; gewählt Marke grün gefüllt und Zeile hell grün */
.welt-licht .stueckliste li { border-bottom-color: var(--l-linie); }
.welt-licht .stueckliste button, .welt-licht .stueckliste .zeile { grid-template-columns: 30px 1fr; gap: 2px 14px; padding: 11px 10px 11px 8px; border-radius: 10px; transition: background-color .2s; }
.welt-licht .stueckliste .pos { display: grid; place-items: center; align-self: start; width: 28px; height: 28px; padding: 0; border: 1.2px solid #cfd5d2; border-radius: 50%; background: #fff; font-family: var(--text); font-size: 14px; font-weight: 760; line-height: 1; color: var(--l-text); transition: background-color .2s, border-color .2s, color .2s; }
.welt-licht .stueckliste .zeile .pos { border-color: transparent; background: none; color: var(--l-text-2); }
.welt-licht .stueckliste button:hover .pos { border-color: var(--gruen-tief); }
.welt-licht .stueckliste button[aria-current="true"] { background: #edf3dc; }
.welt-licht .stueckliste button[aria-current="true"] .pos { border-color: var(--gruen-tief); background: var(--gruen-tief); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .welt-licht .stueckliste button, .welt-licht .stueckliste .pos { transition: none; }
}

/* ---------------------------------------------------------------- Projekt-Stückliste (Fachbetriebe, 20.10.2026)
   Karte auf der Planfläche, jede Position eine weiße Zeile mit runder Nummer wie in der Legende des Lieferumfangs.
   Welle, Bedienung und die Funk-Angaben als Umschalter; das Fenster-Symbol zeigt Breite zu Höhe, alle Zeilen im selben Maßstab.
   Bei Funk zeigt die Zeile darunter Sender am Fenster und Zeitschaltung. Bis 900 px wird jede Position eine Karte mit Beschriftung.
   „Projektangebot anfordern“ öffnet darunter das Anfrageformular (Formular-Platte wie auf der Kontaktseite). */
.welt-licht .fachbetriebe__flaeche { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.welt-licht .projekt [hidden] { display: none !important; }
.welt-licht .projekt__karte { padding: 8px 20px 20px; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht :is(.projekt__kopfzeile, .projekt__zeile) { display: grid; grid-template-columns: 30px 46px minmax(0, 1fr) 112px 112px 148px 148px 36px; column-gap: 12px; align-items: center; }
.welt-licht .projekt__kopfzeile { padding: 12px 10px 4px 14px; font-size: 13px; font-weight: 650; color: var(--l-text-2); white-space: nowrap; }
.welt-licht .projekt__liste { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.welt-licht .projekt__zeile { row-gap: 10px; max-width: none; margin: 0; padding: 10px 10px 10px 14px; border-radius: 12px; background: #fff; }
.welt-licht .projekt__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.2px solid #cfd5d2; border-radius: 50%; background: #fff; font-size: 14px; font-weight: 760; color: var(--l-text); transition: background .15s, border-color .15s, color .15s; }
.welt-licht .projekt__zeile.beispiel .projekt__nr { border-style: dashed; color: var(--l-text-2); }
.welt-licht .projekt__zeile:focus-within .projekt__nr { border-style: solid; border-color: var(--gruen-tief); background: var(--gruen-tief); color: #fff; }
.welt-licht .projekt__bild svg { display: block; width: 44px; height: 44px; }
.welt-licht .projekt__zeile.beispiel .projekt__bild svg { opacity: .5; }
.welt-licht .pf-kasten { fill: #59646a; }
.welt-licht .pf-rahmen { fill: #fbfcfb; stroke: #94a09b; stroke-width: 1.2; }
.welt-licht .pf-panzer { fill: #aeb8b4; }
.welt-licht .pf-leiste { fill: #4b5458; }
.welt-licht .pf-leer { fill: none; stroke: #b9c2bf; stroke-width: 1.2; stroke-dasharray: 3 3; }
.welt-licht .projekt__feld { min-width: 0; }
.welt-licht .projekt__etikett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.welt-licht .projekt__etikett--immer { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 13px; font-weight: 650; color: var(--l-text-2); }
.welt-licht .projekt__zeile input:not([type="radio"]) { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #dfe4e1; border-radius: 9px; background: #f6f8f7; font: inherit; font-size: 16px; color: var(--l-text); transition: border-color .15s, background .15s, box-shadow .15s; }
.welt-licht .projekt__zeile input:not([type="radio"]):hover { border-color: #c3cbc8; }
.welt-licht .projekt__zeile input:not([type="radio"]):focus { outline: none; border-color: var(--gruen-tief); background: #fff; box-shadow: 0 0 0 3px rgba(149, 193, 31, .3); }
.welt-licht .projekt__zeile input::placeholder { color: #6f7975; opacity: 1; }
.welt-licht .feld-m { position: relative; display: block; }
.welt-licht .projekt__zeile .feld-m input.zahl { padding-right: 30px; font-family: var(--norm); font-size: 16px; font-variant-numeric: tabular-nums; }
.welt-licht .feld-m > span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 14px; color: var(--l-text-2); pointer-events: none; }
.welt-licht .segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #eef1f0; }
.welt-licht .segment label { position: relative; display: flex; flex: 1; }
.welt-licht .segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.welt-licht .segment span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; font-weight: 620; color: var(--l-text-2); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.welt-licht .segment label:hover input:not(:checked) + span { color: var(--l-text); background: rgba(255, 255, 255, .55); }
.welt-licht .segment input:checked + span { background: #fff; color: var(--l-text); font-weight: 720; box-shadow: 0 1px 2px rgba(16, 22, 20, .16), 0 0 0 1px rgba(16, 22, 20, .05); }
.welt-licht .segment input:focus-visible + span { outline: 2px solid var(--gruen-tief); outline-offset: 1px; }
.welt-licht :is(.projekt__feld--welle, .projekt__feld--bedienung) .segment { display: flex; }
.welt-licht .projekt__funk { grid-column: 3 / 8; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 8px 12px; border-radius: 10px; background: #f6f8f7; }
.welt-licht .projekt__zeile[data-bedienung="Schalter"] .projekt__funk { display: none; }
.welt-licht .projekt__funk .projekt__feld { display: flex; align-items: center; gap: 12px; }
.welt-licht .projekt__funk .segment span { min-height: 32px; padding: 0 14px; font-size: 14px; }
.welt-licht .projekt__weg button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #6f7975; cursor: pointer; transition: background .15s, color .15s; }
.welt-licht .projekt__weg button:hover { background: #eef1f0; color: var(--l-text); }
.welt-licht .projekt__weg button:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 1px; }
.welt-licht .projekt__weg svg, .welt-licht .projekt__dazu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.welt-licht .projekt__dazu { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 8px; border: 1.5px dashed #b9c2bf; border-radius: 12px; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--gruen-tief); cursor: pointer; transition: border-color .15s, background .15s; }
.welt-licht .projekt__dazu:hover { border-color: var(--gruen-tief); background: #fff; }
.welt-licht .projekt__dazu:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.welt-licht .projekt__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #dfe4e1; }
.welt-licht .projekt__summe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; margin: 0; }
.welt-licht .projekt__anzahl { margin-right: 6px; font-size: 15px; font-weight: 600; color: var(--l-text-2); }
.welt-licht .projekt__anzahl b { margin-right: 2px; font-size: 28px; font-weight: 760; letter-spacing: -.02em; color: var(--l-text); font-variant-numeric: tabular-nums; }
.welt-licht .projekt__chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid #dfe4e1; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 650; color: var(--l-text); white-space: nowrap; }
.welt-licht .projekt__chip--beispiel { border-style: dashed; background: transparent; color: var(--l-text-2); }
.welt-licht .projekt__fuss .knopf { width: auto; min-height: 48px; padding: 0 24px; font: inherit; font-size: 15.5px; font-weight: 700; }
.welt-licht .projekt__meldung { flex: 1 0 100%; max-width: none; margin: 0; font-size: 15px; font-weight: 650; color: var(--l-text); }
.welt-licht .projekt__meldung[data-art="fehler"] { color: var(--fehler); }
.welt-licht .projekt__meldung:empty { display: none; }
.welt-licht .projekt__beispiel { margin-top: 14px; }
.welt-licht .projekt__anfrage { margin-top: 24px; margin-bottom: 18px; scroll-margin-top: calc(var(--leiste-h, 72px) + 16px); }
.welt-licht .projekt__anfrage:not([hidden]) { animation: anfrage-ein .32s ease-out both; }
@keyframes anfrage-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.welt-licht .projekt__anfrage-liste { grid-column: 1 / -1; max-width: none; margin: -6px 0 0; font-size: 15px; line-height: 1.55; color: var(--l-text-2); }
@media (min-width: 901px) { .welt-licht .projekt__anfrage .formular__fuss .knopf { width: auto; } }
.welt-licht .projekt__vorschau { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 10px; background: #f6f8f7; font-family: var(--norm); font-size: 13.5px; line-height: 1.6; color: var(--l-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.welt-licht .fachbetriebe .verzeichnis ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
@media (prefers-reduced-motion: reduce) { .welt-licht .projekt__anfrage:not([hidden]) { animation: none; } }
@media (max-width: 1100px) {
  .welt-licht :is(.projekt__kopfzeile, .projekt__zeile) { grid-template-columns: 30px 46px minmax(0, 1fr) 100px 100px 136px 136px 36px; column-gap: 10px; }
}
@media (max-width: 900px) {
  .welt-licht .projekt__karte { padding: 10px 10px 14px; }
  .welt-licht .projekt__kopfzeile { display: none; }
  .welt-licht .projekt__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; margin: 0; }
  .welt-licht .projekt__zeile { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 36px; grid-template-areas: "pos raum raum weg" "bild breite hoehe hoehe" "welle welle bed bed" "funk funk funk funk"; gap: 12px 10px; align-content: start; padding: 14px 12px; border-radius: 14px; }
  .welt-licht .projekt__pos { grid-area: pos; align-self: end; padding-bottom: 7px; }
  .welt-licht .projekt__bild { grid-area: bild; align-self: end; }
  .welt-licht .projekt__bild svg { width: 40px; height: 40px; }
  .welt-licht .projekt__feld--raum { grid-area: raum; }
  .welt-licht .projekt__feld--breite { grid-area: breite; }
  .welt-licht .projekt__feld--hoehe { grid-area: hoehe; }
  .welt-licht .projekt__feld--welle { grid-area: welle; }
  .welt-licht .projekt__feld--bedienung { grid-area: bed; }
  .welt-licht .projekt__weg { grid-area: weg; align-self: start; }
  .welt-licht .projekt__etikett { position: static; display: block; width: auto; height: auto; margin-bottom: 6px; overflow: visible; clip-path: none; font-size: 12.5px; font-weight: 650; color: var(--l-text-2); }
  .welt-licht .projekt__funk { grid-area: funk; display: grid; gap: 12px; padding: 12px; }
  .welt-licht .projekt__funk .projekt__feld { display: block; }
  .welt-licht .projekt__funk .segment { display: flex; }
  .welt-licht .segment span { padding: 0 6px; }
  .welt-licht .projekt__fuss .knopf { width: 100%; }
  .welt-licht .fachbetriebe .verzeichnis ul { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Rollladen-Aufhängefedern (Infoseite, 20.10.2026)
   Produktbild weiß hinterlegt wie bei den Sendern; Schnitt durch Welle und Lamelle in den Materialfarben des Lieferumfangs,
   Nummern als runde Marken mit Legende daneben; Federbedarf als Wellen mit gleichmäßig verteilten Federn. */
.produkt--zubehoer .produkt__bild img { aspect-ratio: 5 / 4; object-fit: contain; padding: 14px; background: #fff; }
.feder-fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; align-items: center; margin: 0; padding: 28px 32px; border-radius: 18px; background: var(--l-flaeche); }
.feder-fig__bild { min-width: 0; }
.fd-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: hidden; }
.fd-welle { fill: #c3cbc8; stroke: #9aa5a1; stroke-width: 1.2; }
.fd-innen { fill: #f6f8f7; stroke: #aeb8b4; stroke-width: 1; }
.fd-motor { fill: rgba(149, 193, 31, .22); stroke: var(--gruen-tief); stroke-width: 1.4; stroke-dasharray: 5 3; }
.fd-stahl { fill: #d3d9dc; stroke: #7d888e; stroke-width: 1; stroke-linejoin: round; }
.fd-filz { fill: #2c3337; }
.fd-lamelle { fill: #fff; stroke: #9aa5a1; stroke-width: 1.2; }
.fd-kammer { fill: #f2f4f3; stroke: #c3cbc8; stroke-width: 1; }
.fd-bezug path { fill: none; stroke: #9aa5a1; stroke-width: 1.2; }
.fd-punkt { fill: #5b6662; }
.fd-marke { fill: #fff; stroke: #cfd5d2; stroke-width: 1.2; }
.fd-bezug--motor .fd-marke { stroke: var(--gruen-tief); }
.fd-bezug text { font-family: var(--text); font-size: 14px; font-weight: 760; fill: var(--l-text); text-anchor: middle; dominant-baseline: central; }
.feder-fig__legende { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.feder-fig__legende li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--l-text-2); }
.feder-fig__legende b { color: var(--l-text); font-weight: 720; }
.feder-fig__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.2px solid #cfd5d2; border-radius: 50%; background: #fff; font-size: 14px; font-weight: 760; color: var(--l-text); transform: translateY(-2px); }
.feder-fig__legende li:last-child .feder-fig__nr { border-color: var(--gruen-tief); }
.feder-fig figcaption { grid-column: 1 / -1; font-size: 13.5px; color: var(--l-text-2); }
.federbedarf { display: grid; gap: 22px; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.federbedarf li { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 20px; align-items: start; max-width: none; }
.federbedarf__welle { display: flex; justify-content: space-around; height: 12px; border-radius: 6px; background: #c3cbc8; box-shadow: inset 0 -2px 0 rgba(16, 22, 20, .08); }
.federbedarf--100 .federbedarf__welle { width: 40%; }
.federbedarf--150 .federbedarf__welle { width: 60%; }
.federbedarf--200 .federbedarf__welle { width: 80%; }
.federbedarf--250 .federbedarf__welle { width: 100%; }
.federbedarf__welle i { width: 7px; height: 26px; margin-top: 5px; border-radius: 1px 1px 3px 3px; background: #2c3337; }
.federbedarf__text { display: grid; font-size: 15px; line-height: 1.35; color: var(--l-text-2); }
.federbedarf__text b { font-family: var(--norm); font-size: 18px; font-weight: 700; color: var(--l-text); font-variant-numeric: tabular-nums; }
.feder-pdf { max-width: 760px; margin-top: 22px; }
@media (max-width: 900px) {
  .feder-fig { grid-template-columns: 1fr; padding: 20px 16px; }
  .federbedarf li { grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; }
}

/* ---------------------------------------------------------------- Ersatz nach Typenschild (Rollladenantriebe, 21.10.2026)
   Eine Planfläche: links Frage, Erklärung und Hinweise, rechts der Rechner auf weißer Platte mit beschrifteten Feldern.
   Das Ergebnis steht in einem Kasten: leer grau, Treffer hellgrün mit Typ, Daten und Links zu Kabel- und Funkmotor. */
.welt-licht .ersatz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 56px; align-items: center; margin-top: 56px; padding: 36px 40px; border: 0; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .ersatz__text h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; font-weight: 760; }
.welt-licht .ersatz__text p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--l-text-2); }
.welt-licht .ersatz__hinweise { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.welt-licht .ersatz__hinweise li { position: relative; max-width: none; padding-left: 22px; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--l-text); }
.welt-licht .ersatz__hinweise li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border: 1.5px solid var(--gruen-tief); border-radius: 50%; }
.welt-licht .ersatz__rechner { min-width: 0; padding: 24px; border-radius: 14px; background: #fff; box-shadow: var(--l-schatten); }
.welt-licht .ersatz__eingabe { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 20px; }
.welt-licht .ersatz__feld { display: grid; gap: 7px; }
.welt-licht .ersatz__etikett { font-size: 13.5px; font-weight: 650; color: var(--l-text-2); }
.welt-licht .feld-nm { position: relative; display: block; width: 156px; }
.welt-licht .feld-nm input { width: 100%; min-height: 46px; padding: 8px 46px 8px 12px; border: 1px solid #cfd5d2; border-radius: 10px; background: #fff; font-family: var(--norm); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--l-text); }
.welt-licht .feld-nm input:focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .35); }
.welt-licht .feld-nm > span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 15px; font-weight: 650; color: var(--l-text-2); pointer-events: none; }
.welt-licht .ersatz .umschalter--klein button { min-height: 40px; padding: 0 18px; font-size: 14.5px; font-weight: 650; }
.welt-licht .ersatz__ergebnis { margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: #f6f8f7; font-weight: 500; transition: background .2s; }
.welt-licht .ersatz__ergebnis[data-art="treffer"] { background: #edf3dc; }
.welt-licht .ersatz__ergebnis p { margin: 0; max-width: none; }
.welt-licht .ersatz__leer { font-size: 15px; line-height: 1.5; color: var(--l-text-2); }
.welt-licht .ersatz__vorschlag { font-size: 13px; font-weight: 650; color: var(--gruen-tief); }
.welt-licht .ersatz__typ { margin-top: 2px !important; font-size: 20px; line-height: 1.3; letter-spacing: -.012em; font-weight: 760; color: var(--l-text); }
.welt-licht .ersatz__daten { margin-top: 4px !important; font-size: 15px; color: var(--l-text-2); font-variant-numeric: tabular-nums; }
.welt-licht .ersatz__reserve, .welt-licht .ersatz__pruef { margin-top: 10px !important; font-size: 14.5px; line-height: 1.5; color: var(--l-text-2); }
.welt-licht .ersatz__wege { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px !important; }
.welt-licht .ersatz__wege a { font-size: 15px; font-weight: 700; color: var(--gruen-tief); text-underline-offset: .2em; }
.welt-licht .ersatz__link { margin-top: 16px; }
@media (max-width: 900px) {
  .welt-licht .ersatz { grid-template-columns: 1fr; margin-top: 40px; padding: 22px 16px; }
  .welt-licht .ersatz__rechner { padding: 18px 16px; }
}

/* ---------------------------------------------------------------- Zweispaltige Einleitung (21.10.2026)
   Zwei Absätze unter einer Überschrift stehen ab 1100 px nebeneinander: gleiche Zeilenlänge (62ch), halbe Höhe, keine leere rechte Hälfte. */
@media (min-width: 1100px) {
  .welt-licht .abschnitt__kopf--zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: start; max-width: none; }
  .welt-licht .abschnitt__kopf--zweispaltig > h2 { grid-column: 1 / -1; max-width: 780px; }
  .welt-licht .abschnitt__kopf--zweispaltig > p { max-width: 62ch; }
}

/* ---------------------------------------------------------------- Kratzschutz der Aufhängefedern (21.10.2026)
   Hauptvorteil direkt unter dem Kopfbereich: Text links, rechts zwei Fotos ohne und mit Filz auf weißen Platten,
   Zeichen ✕ in `fehler` und ✓ in `gruen-tief`, die Filz-Platte mit grünem Ring. Foto „Eingehakt“ unter der Schnittzeichnung. */
.welt-licht .kratzschutz { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 56px; align-items: center; }
.welt-licht .kratzschutz > .abschnitt__kopf { margin-bottom: 0; }
.kratzschutz__vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kratzschutz__bild { margin: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: var(--l-schatten); }
.kratzschutz__bild--mit { box-shadow: var(--l-schatten), 0 0 0 2px var(--gruen); }
.kratzschutz__bild img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.kratzschutz__bild figcaption { display: grid; gap: 4px; padding: 14px 16px 16px; font-size: 14.5px; line-height: 1.45; color: var(--l-text-2); }
.kratzschutz__bild figcaption b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 740; color: var(--l-text); }
.kratzschutz__zeichen { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.kratzschutz__bild--ohne .kratzschutz__zeichen { background: #f6e9e4; color: var(--fehler); }
.kratzschutz__bild--mit .kratzschutz__zeichen { background: #edf3dc; color: var(--gruen-tief); }
.kratzschutz__zeichen svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feder-foto { margin: 24px 0 0; }
.feder-foto img { display: block; width: 100%; height: auto; border-radius: 14px; }
.feder-foto figcaption { margin-top: 10px; font-size: 13.5px; color: var(--l-text-2); }
@media (max-width: 900px) {
  .welt-licht .kratzschutz { grid-template-columns: 1fr; }
  .kratzschutz__vergleich { gap: 10px; }
  .kratzschutz__bild figcaption { padding: 10px 12px 12px; font-size: 13.5px; }
  .kratzschutz__bild figcaption b { font-size: 14px; }
}

/* ---------------------------------------------------------------- Endlagen einstellen (Service, 21.10.2026)
   Kopf geteilt: Überschrift links, Einleitung rechts (ab 1100 px). Darunter eine Bühne auf der Planfläche:
   Motorkopf (Fig. 5) – Knöpfe mit sichtbarer Rückmeldung – Fenster (Fig. 6). Text darunter zweispaltig. */
@media (min-width: 1100px) {
  .welt-licht .abschnitt__kopf--geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; max-width: none; }
  .welt-licht .abschnitt__kopf--geteilt > p { margin-top: 0; max-width: 62ch; }
}
.welt-licht .endlagen { display: block; margin-top: 0; }
.welt-licht .endlagen__buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr); grid-template-areas: "kopf steuerung fenster"; align-items: start; gap: 24px 40px; padding: 36px 40px 28px; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .endlagen__kopf { grid-area: kopf; margin: 0; }
.welt-licht .endlagen__fenster { grid-area: fenster; margin: 0; }
.welt-licht .endlagen__steuerung { grid-area: steuerung; display: grid; gap: 16px; justify-items: start; padding-top: 18px; }
.welt-licht .endlagen__kopf svg, .welt-licht .endlagen__fenster svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.welt-licht #fig6-svg { width: 100%; max-width: 280px; height: auto; }
.welt-licht .endlagen__buehne .figur-unterschrift { margin-top: 10px; text-align: center; }
.welt-licht .endlagen__frage { max-width: 26ch; font-size: 19px; line-height: 1.35; font-weight: 740; letter-spacing: -.01em; color: var(--l-text); }
.welt-licht .endlagen__knoepfe { display: grid; gap: 10px; justify-items: start; }
.welt-licht .endlagen__stand { max-width: 30ch; min-height: calc(4 * 1.45em + 20px); margin: 0; padding: 10px 14px; border-radius: 10px; background: #fff; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--l-text); }
.welt-licht .endlagen__text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 28px; }
.welt-licht .endlagen__text p { max-width: 62ch; margin-top: 0; font-size: 16.5px; line-height: 1.6; color: var(--l-text-2); }
.welt-licht .endlagen__link { margin-top: 18px; }
.f5-platte { fill: #d3d9dc; stroke: #8f9a9f; stroke-width: 1.4; }
.f5-fase { fill: none; stroke: #e6eae8; stroke-width: 3; }
.f5-vierkant { fill: #b8c1c5; stroke: #7d888e; stroke-width: 1.2; }
.f5-loch { fill: #69757a; }
.f5-schraube { fill: #fff; stroke: #8f9a9f; stroke-width: 1.4; }
.f5-sechskant, .f5-zeiger { fill: #59646a; }
.f5-dreh { transform-box: view-box; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.f5-unten .f5-dreh { transform-origin: 186px 174px; }
.f5-unten .f5-zeiger { fill: var(--gruen-tief); }
.f5-ring { fill: none; stroke: var(--gruen-tief); stroke-width: 2.4; }
.f5-bogen { fill: none; stroke: var(--gruen-tief); stroke-width: 2; stroke-linecap: round; }
.f5-spitze { fill: var(--gruen-tief); }
.f5-zeichen { font-family: var(--text); font-size: 22px; font-weight: 800; fill: var(--gruen-tief); text-anchor: middle; }
.f5-pfeil { fill: var(--l-text-2); }
.f5-text { font-family: var(--text); font-size: 15px; font-weight: 700; fill: var(--l-text-2); }
.f5-text--aktiv { fill: var(--l-text); }
@media (prefers-reduced-motion: reduce) { .f5-dreh { transition: none; } }
@media (max-width: 1099px) {
  .welt-licht .endlagen__text { grid-template-columns: 1fr; }
  .welt-licht .endlagen__text p + p { margin-top: 12px; }
}
@media (max-width: 900px) {
  .welt-licht .endlagen__buehne { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "frage frage" "kopf fenster" "steuerung steuerung"; gap: 18px 16px; padding: 22px 16px 20px; }
  .welt-licht .endlagen__steuerung { display: contents; }
  .welt-licht .endlagen__frage { grid-area: frage; max-width: none; font-size: 17px; }
  .welt-licht .endlagen__knoepfe { grid-column: 1 / -1; grid-template-columns: 1fr; width: 100%; }
  .welt-licht .endlagen__knoepfe button { justify-content: flex-start; width: 100%; font-size: 14px; }
  .welt-licht .endlagen__stand { grid-column: 1 / -1; max-width: none; min-height: calc(3 * 1.45em + 20px); }
  .welt-licht .endlagen__buehne .figur-unterschrift { font-size: 12.5px; }
}

/* ---------------------------------------------------------------- Sender einlernen (Service, 21.10.2026)
   Bühne wie bei den Endlagen: Fenster mit Funkmotor – Knöpfe und Rückmeldung – Zeitfenster als Ring.
   Zustände an der Bühne (data-zustand): aus, hoert (Ring läuft grün ab, Funkwellen am Motor), fertig (Ring voll mit Haken),
   abgelaufen (Ring leer in fehler). Der Panzer ruckt beim Einschalten und zur Bestätigung (Klasse .ruckt). */
.welt-licht .ein-buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr); grid-template-areas: "fenster steuerung uhr"; align-items: start; gap: 24px 40px; padding: 36px 40px 28px; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .ein-buehne__fenster { grid-area: fenster; margin: 0; }
.welt-licht .ein-buehne__uhr { grid-area: uhr; align-self: stretch; display: grid; justify-items: center; align-content: center; margin: 0; }
.welt-licht .ein-buehne__steuerung { grid-area: steuerung; display: grid; gap: 16px; justify-items: start; padding-top: 18px; }
.welt-licht .ein-svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.welt-licht .ein-buehne .figur-unterschrift { margin-top: 10px; text-align: center; }
.ein-kasten { fill: #e8ecea; stroke: #c3cbc8; stroke-width: 1; }
.ein-motor { fill: rgba(149, 193, 31, .32); stroke: var(--gruen-tief); stroke-width: 1.3; transition: fill .3s; }
.ein-motorkopf { fill: #fff; stroke: var(--gruen-tief); stroke-width: 1.3; }
.ein-funk path { fill: none; stroke: var(--gruen); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.ein-rahmen { fill: #fbfcfb; stroke: #94a09b; stroke-width: 1.2; }
.ein-glas { fill: #e3ecef; }
.ein-spiegel { fill: #fff; opacity: .42; }
.ein-lamelle { fill: #c9d0cd; }
.ein-fuge { fill: #aeb8b4; }
.ein-endleiste { fill: #4b5458; }
.ein-bank { fill: #dde3e0; }
.ein-buehne[data-zustand="hoert"] .ein-funk path { opacity: 1; }
.ein-buehne[data-zustand="hoert"] .ein-motor, .ein-buehne[data-zustand="fertig"] .ein-motor { fill: rgba(149, 193, 31, .55); }
.ein-buehne.ruckt .ein-panzer { animation: ein-ruck .7s ease-in-out; }
@keyframes ein-ruck { 0%, 100% { transform: translateY(0); } 20%, 60% { transform: translateY(7px); } 40%, 80% { transform: translateY(0); } }
.welt-licht .ein-knoepfe { display: grid; gap: 10px; justify-items: start; }
.welt-licht .ein-knoepfe button { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 18px 7px 8px; border: 1px solid #cfd5d2; border-radius: 999px; background: #fff; color: var(--l-text); font-family: inherit; font-size: 15px; font-weight: 680; box-shadow: 0 1px 2px rgba(16, 22, 20, .06); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.welt-licht .ein-knoepfe button:hover { border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .25); }
.welt-licht .ein-knoepfe button:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.ein-symbol { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cdd3d4 72%); box-shadow: inset 0 0 0 1px #98a1a2; }
.ein-symbol svg { width: 15px; height: 15px; fill: none; stroke: var(--l-text); stroke-width: 1.9; stroke-linecap: round; }
.ein-symbol--p { font-size: 15px; font-weight: 800; color: var(--l-text); }
.ein-buehne[data-zustand="hoert"] #ein-taste { border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .25); }
.welt-licht .ein-stand { max-width: 32ch; }
.ein-uhr { position: relative; width: min(100%, 200px); aspect-ratio: 1; }
.ein-uhr svg { display: block; width: 100%; height: 100%; }
.ein-uhr__spur { fill: #fff; stroke: #dfe4e1; stroke-width: 9; }
.ein-uhr__rest { fill: none; stroke: #b9c2bf; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314.16; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.ein-buehne[data-zustand="hoert"] .ein-uhr__rest { stroke: var(--gruen-tief); }
.ein-buehne[data-zustand="fertig"] .ein-uhr__rest { stroke: var(--gruen); }
.ein-buehne[data-zustand="abgelaufen"] .ein-uhr__rest { stroke: var(--fehler); }
.ein-uhr__haken { fill: none; stroke: var(--gruen-tief); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.ein-buehne[data-zustand="fertig"] .ein-uhr__haken { opacity: 1; }
.ein-uhr__zahl { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-size: 16px; font-weight: 650; color: var(--l-text-2); }
.ein-uhr__zahl b { font-family: var(--norm); font-size: 46px; line-height: 1; font-weight: 760; letter-spacing: -.02em; color: var(--l-text); font-variant-numeric: tabular-nums; }
.ein-buehne[data-zustand="fertig"] .ein-uhr__zahl { opacity: 0; }
.ein-buehne[data-zustand="abgelaufen"] .ein-uhr__zahl b { color: var(--fehler); }
.welt-licht .schritte--karten { gap: 12px; margin-top: 24px; border-top: 0; }
.welt-licht .schritte--karten li, .welt-licht .schritte--karten li + li { padding: 18px 20px 20px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4e1; }
.welt-licht .schritte--karten li::before { display: grid; place-items: center; width: 30px; height: 30px; border: 1.2px solid #cfd5d2; border-radius: 50%; font-family: var(--text); font-size: 14px; font-weight: 760; color: var(--l-text); }
.welt-licht .schritte--karten li:nth-child(2)::before { border-color: var(--gruen-tief); background: var(--gruen-tief); color: #fff; }
.welt-licht .ein-hinweise { max-width: none; }
.welt-licht .ein-hinweise ul { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 20px; }
.welt-licht .ein-hinweise li { max-width: 92ch; font-size: 15.5px; line-height: 1.55; color: var(--l-text); }
.welt-licht .ein-hinweise p { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .ein-buehne.ruckt .ein-panzer { animation: none; } .ein-funk path, .ein-uhr__haken, .ein-motor { transition: none; } }
@media (max-width: 1100px) { .welt-licht .schritte--karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .welt-licht .schritte--karten li:nth-child(n + 3) { border-top: 0; } }
@media (max-width: 900px) {
  .welt-licht .ein-buehne { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "frage frage" "fenster uhr" "steuerung steuerung"; gap: 18px 16px; padding: 22px 16px 20px; }
  .welt-licht .ein-buehne__steuerung { display: contents; }
  .welt-licht .ein-buehne .endlagen__frage { grid-area: frage; max-width: none; font-size: 17px; }
  .welt-licht .ein-knoepfe { grid-column: 1 / -1; width: 100%; }
  .welt-licht .ein-knoepfe button { justify-content: flex-start; width: 100%; font-size: 14px; }
  .welt-licht .ein-stand { grid-column: 1 / -1; max-width: none; }
  .ein-uhr { width: min(100%, 140px); }
  .ein-uhr__zahl b { font-size: 34px; }
  .welt-licht .ein-buehne .figur-unterschrift { font-size: 12.5px; }
}
@media (max-width: 600px) { .welt-licht .schritte--karten { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Downloads (Service, 21.10.2026)
   Karten je Produktgruppe auf der Planfläche; die Anleitung als weiße Download-Kachel mit PDF-Marke, Größe und Stand;
   je Baugröße Knöpfe für Maßzeichnung und Garantie. Darunter die Ergänzungen zu den Anleitungen und „Zubehör und Sicherheit“. */
.welt-licht .dl-gruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.welt-licht .dl-gruppe { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 22px 22px 18px; border-radius: 18px; background: var(--l-flaeche); scroll-margin-top: calc(var(--leiste-h, 72px) + 12px); }
.welt-licht .dl-gruppe h3 { display: grid; gap: 3px; padding: 0; border: 0; font-size: 20px; line-height: 1.25; font-weight: 760; letter-spacing: -.01em; }
.welt-licht .dl-gruppe h3 span { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--l-text-2); }
.dl-haupt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--l-text) !important; text-decoration: none; box-shadow: 0 0 0 1px #dfe4e1, 0 1px 2px rgba(16, 22, 20, .06); transition: box-shadow .2s; }
.dl-haupt:hover { box-shadow: 0 0 0 2px var(--gruen-tief), 0 8px 18px -10px rgba(16, 22, 20, .35); }
.dl-haupt:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.dl-pdf { display: grid; place-items: center; width: 38px; height: 44px; border-radius: 4px 10px 4px 4px; background: #2c3337; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.dl-haupt__text { min-width: 0; }
.dl-haupt__text b { display: block; font-size: 15.5px; line-height: 1.3; font-weight: 720; }
.dl-haupt__text small { display: block; margin-top: 2px; font-size: 13px; color: var(--l-text-2); font-variant-numeric: tabular-nums; }
.dl-pfeil { width: 18px; height: 18px; fill: none; stroke: var(--gruen-tief); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-haupt-liste { display: grid; gap: 8px; }
.welt-licht .dl-tabelle { width: 100%; margin-top: 2px; border-collapse: collapse; font-size: 15px; }
.welt-licht .dl-tabelle th, .welt-licht .dl-tabelle td { padding: 10px 0; border-bottom: 1px solid #dfe4e1; vertical-align: middle; }
.welt-licht .dl-tabelle tr:last-child th, .welt-licht .dl-tabelle tr:last-child td { border-bottom: 0; }
.welt-licht .dl-tabelle td { width: 1%; padding-left: 8px; text-align: right; white-space: nowrap; }
.dl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4e1; color: var(--l-text) !important; font-size: 13.5px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: box-shadow .15s, color .15s; }
.dl-chip:hover { box-shadow: inset 0 0 0 1.5px var(--gruen-tief); color: var(--gruen-tief) !important; }
.dl-chip:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.dl-chip .dl-pfeil { width: 13px; height: 13px; stroke: currentColor; }
.dl-notiz { font-size: 13.5px; line-height: 1.5; color: var(--l-text-2); }
.dl-sprung { display: none; }
.dl-fuss { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-top: 20px; }
.welt-licht .dl-hinweise { max-width: none; margin-top: 0; }
.welt-licht .dl-hinweise ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; }
.welt-licht .dl-hinweise li { max-width: 80ch; font-size: 15px; line-height: 1.55; color: var(--l-text); }
.dl-zubehoer { display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: 18px; background: var(--l-flaeche); scroll-margin-top: calc(var(--leiste-h, 72px) + 12px); }
.dl-zubehoer h3 { font-size: 17px; line-height: 1.35; font-weight: 740; }
@media (max-width: 1100px) {
  .welt-licht .dl-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-fuss { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dl-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; }
  .dl-sprung a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--l-flaeche); color: var(--l-text) !important; font-size: 14.5px; font-weight: 650; text-decoration: none; }
  .welt-licht .dl-gruppen { grid-template-columns: 1fr; gap: 14px; }
  .welt-licht .dl-gruppe { padding: 18px 14px 14px; }
  .dl-zubehoer { padding: 18px 14px; }
}
@media (max-width: 600px) {
  .dl-sprung a { padding: 0 12px; font-size: 14px; }
  .welt-licht .dl-tabelle, .welt-licht .dl-tabelle tbody { display: block; }
  .welt-licht .dl-tabelle tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #dfe4e1; }
  .welt-licht .dl-tabelle tr:last-child { border-bottom: 0; }
  .welt-licht .dl-tabelle th { flex: 1 0 100%; padding: 0; border: 0; }
  .welt-licht .dl-tabelle th small { display: inline; margin-left: 8px; }
  .welt-licht .dl-tabelle td { width: auto; padding: 0; border: 0; text-align: left; }
}

/* ---------------------------------------------------------------- Garantie (Service, 21.10.2026)
   Kopf geteilt; Band auf der Planfläche mit dunklem Siegel „5 Jahre“, drei Kernaussagen mit Haken und der Garantieerklärung
   als Download-Kachel. Darunter die sechs Punkte als Karten mit Frage: 1–3 nebeneinander, „Wie läuft ein Garantiefall?“
   breit mit drei Schritten und dem Knopf zum Kontaktformular (Anliegen Garantie), dann Ausschlüsse als Liste und „Wo?“. */
.welt-licht .garantie__band { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 24px 40px; padding: 28px 36px; border-radius: 18px; background: var(--l-flaeche); }
.garantie__siegel { display: block; width: 140px; height: 140px; }
.garantie__siegel-grund { fill: var(--l-nacht); }
.garantie__siegel-ring { fill: none; stroke: var(--gruen); stroke-width: 2; }
.garantie__siegel-umschrift { font-family: var(--text); font-size: 9.5px; font-weight: 750; letter-spacing: .14em; fill: var(--gruen-hell); }
.garantie__siegel-zahl { font-family: var(--text); font-size: 56px; font-weight: 800; fill: #fff; text-anchor: middle; }
.garantie__siegel-jahre { font-family: var(--text); font-size: 11px; font-weight: 750; letter-spacing: .24em; fill: #fff; text-anchor: middle; }
.garantie__kern { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.garantie__kern li { position: relative; max-width: none; padding-left: 34px; font-size: 17px; line-height: 1.4; font-weight: 680; color: var(--l-text); }
.garantie__kern li::before { content: ""; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: #edf3dc; }
.garantie__kern li::after { content: ""; position: absolute; left: 9px; top: 3px; width: 5px; height: 10px; border: solid var(--gruen-tief); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.welt-licht .garantie__punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; max-width: none; }
.welt-licht .garantie__punkt { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; column-gap: 12px; row-gap: 6px; max-width: none; padding: 20px 22px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4e1; }
.garantie__nr { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1.2px solid #cfd5d2; border-radius: 50%; font-size: 14px; font-weight: 760; color: var(--l-text); }
.welt-licht .garantie__punkt h3 { align-self: center; font-size: 18px; line-height: 1.3; font-weight: 740; letter-spacing: -.01em; }
.welt-licht .garantie__punkt > p, .welt-licht .garantie__punkt > ul, .welt-licht .garantie__punkt > ol { grid-column: 2; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--l-text-2); }
.welt-licht .garantie__punkt--ablauf { grid-column: 1 / -1; background: var(--l-flaeche); box-shadow: none; }
.welt-licht .garantie__punkt--ablauf .garantie__nr { border-color: var(--gruen-tief); background: var(--gruen-tief); color: #fff; }
.welt-licht .garantie__ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px !important; padding: 0; list-style: none; counter-reset: none; }
.welt-licht .garantie__ablauf li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; max-width: none; padding: 14px 16px; border-radius: 12px; background: #fff; }
.welt-licht .garantie__ablauf li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px; background: #cfd5d2; }
.welt-licht .garantie__ablauf svg { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #edf3dc; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welt-licht .garantie__ablauf b { font-size: 16px; font-weight: 740; color: var(--l-text); }
.welt-licht .garantie__ablauf span { font-size: 14.5px; line-height: 1.45; color: var(--l-text-2); }
.welt-licht .garantie__melden { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px !important; }
.welt-licht .garantie__melden .knopf { width: auto; min-height: 46px; padding: 0 22px; font-size: 15px; }
.welt-licht .garantie__melden span { font-size: 14.5px; color: var(--l-text-2); }
.welt-licht .garantie__punkt--ausschluss { grid-column: span 2; }
.welt-licht .garantie__punkt--ausschluss ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; padding-left: 18px; }
.welt-licht .garantie__punkt--ausschluss li { max-width: none; }
@media (max-width: 1100px) {
  .welt-licht .garantie__band { grid-template-columns: auto minmax(0, 1fr); }
  .welt-licht .garantie__erklaerung { grid-column: 1 / -1; }
  .welt-licht .garantie__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welt-licht .garantie__punkt--ausschluss { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .welt-licht .garantie__band { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 20px 16px; }
  .garantie__siegel { width: 96px; height: 96px; }
  .garantie__kern li { font-size: 15.5px; }
  .welt-licht .garantie__punkte { grid-template-columns: 1fr; }
  .welt-licht .garantie__punkt { padding: 16px; }
  .welt-licht .garantie__ablauf { grid-template-columns: 1fr; gap: 10px; }
  .welt-licht .garantie__ablauf li + li::before { left: 37px; top: -10px; width: 2px; height: 10px; }
  .welt-licht .garantie__punkt--ausschluss ul { grid-template-columns: 1fr; }
  .welt-licht .garantie__melden .knopf { width: 100%; }
  .welt-licht .garantie__punkt--ablauf > .garantie__ablauf, .welt-licht .garantie__punkt--ablauf > .garantie__melden { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Kontakt am Ende der Serviceseite (21.10.2026)
   Drei Wege als Karten: Telefon dunkel hervorgehoben (l-nacht, Nummer weiß), E-Mail und Kontaktformular auf der Planfläche.
   Darunter Anschrift und „Garantiefall melden“ (Kontaktformular, Anliegen Garantie). */
.kontaktwege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kontaktweg { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; padding: 22px 24px; border-radius: 16px; background: var(--l-flaeche); color: var(--l-text) !important; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.kontaktweg:hover { box-shadow: 0 0 0 2px var(--gruen-tief); }
.kontaktweg:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 3px; }
.kontaktweg__symbol { grid-row: 1 / span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #edf3dc; }
.kontaktweg__symbol svg { width: 22px; height: 22px; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kontaktweg__art { font-size: 13.5px; font-weight: 650; color: var(--l-text-2); }
.kontaktweg b { font-size: 22px; line-height: 1.25; font-weight: 760; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kontaktweg__text { font-size: 14.5px; line-height: 1.45; color: var(--l-text-2); }
.kontaktweg--telefon { background: var(--l-nacht); color: #fff !important; }
.kontaktweg--telefon:hover { box-shadow: 0 0 0 2px var(--gruen); }
.kontaktweg--telefon .kontaktweg__symbol { background: rgba(149, 193, 31, .18); }
.kontaktweg--telefon .kontaktweg__symbol svg { stroke: var(--gruen); }
.kontaktweg--telefon .kontaktweg__art, .kontaktweg--telefon .kontaktweg__text { color: var(--l-text-hell-2); }
.kontaktweg--telefon b { font-family: var(--norm); font-size: 26px; font-variant-numeric: tabular-nums; }
.kontakt__adresse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; max-width: none; margin-top: 18px; font-size: 15px; color: var(--l-text-2); }
@media (max-width: 900px) {
  .kontaktwege { grid-template-columns: 1fr; gap: 12px; }
  .kontaktweg { padding: 18px; }
}

/* ---------------------------------------------------------------- Fachbetriebe (21.10.2026)
   Ablauf als vier weiße Schritt-Karten auf der Planfläche: Symbol im hellgrünen Kreis mit Nummernmarke in gruen-tief,
   Verbindungslinien. Vorteile als sechs weiße Karten mit Symbol. Unterlagen als Download-Kacheln auf der Planfläche. */
.fb-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 22px; border-radius: 18px; background: var(--l-flaeche); list-style: none; }
.fb-schritte li { position: relative; display: grid; align-content: start; gap: 6px; max-width: none; padding: 18px 18px 20px; border-radius: 14px; background: #fff; }
.fb-schritte li + li::before { content: ""; position: absolute; left: -16px; top: 42px; width: 16px; height: 2px; background: #cfd5d2; }
.fb-schritte__symbol { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: #edf3dc; }
.fb-schritte__symbol svg { width: 22px; height: 22px; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb-schritte__nr { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid #fff; border-radius: 50%; background: var(--gruen-tief); color: #fff; font-size: 11px; font-weight: 800; }
.fb-schritte strong { font-size: 17px; font-weight: 740; color: var(--l-text); }
.fb-schritte li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--l-text-2); }
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vorteile li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 4px; max-width: none; padding: 22px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4e1; }
.vorteile svg { grid-row: 1 / span 2; width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: #edf3dc; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welt-licht .vorteile h3 { align-self: center; font-size: 18px; line-height: 1.3; font-weight: 740; letter-spacing: -.01em; }
.welt-licht .vorteile p { grid-column: 2; margin: 0; font-size: 15px; line-height: 1.55; color: var(--l-text-2); }
.unterlagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 22px; border-radius: 18px; background: var(--l-flaeche); }
.unterlagen__weiter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; }
@media (max-width: 1100px) {
  .fb-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-schritte li:nth-child(3)::before { display: none; }
  .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .unterlagen { grid-template-columns: 1fr; padding: 14px; }
}
@media (max-width: 600px) {
  .fb-schritte { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .fb-schritte li + li::before, .fb-schritte li:nth-child(3)::before { display: block; left: 41px; top: -12px; width: 2px; height: 12px; }
  .vorteile { grid-template-columns: 1fr; gap: 12px; }
  .vorteile li { padding: 18px; }
}

/* ---------------------------------------------------------------- Motorfinder (21.10.2026)
   Ergebnis-Leiste unten in Fig. 1 (Desktop, bleibt mit der Zeichnung stehen): Motor, Balken Last gegen Zugkraft, Knopf zum Ergebnis.
   Derselbe Balken im Schriftfeld. Rechenblatt als Karte auf der Planfläche, Prüfliste als Karten mit Symbol im hellgrünen Kreis. */
@media (min-width: 1101px) { .welt-licht .held { grid-template-columns: minmax(0, 1fr) 384px; } }
.welt-licht .held__ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 10px 20px; margin: 0 14px 14px; padding: 12px 14px 12px 18px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #dfe4e1; }
.held__ergebnis-name { display: grid; gap: 1px; max-width: none; margin: 0; }
.held__ergebnis-name span { font-size: 12.5px; font-weight: 650; color: var(--l-text-2); }
.held__ergebnis-name b { font-size: 16px; line-height: 1.3; font-weight: 740; color: var(--l-text); }
.held__ergebnis:not([data-stand="motor"]) .held__ergebnis-name { grid-column: 1 / -1; }
.held__ergebnis:not([data-stand="motor"]) .held__ergebnis-name b { font-size: 15px; font-weight: 600; color: var(--l-text-2); }
.held__ergebnis[data-stand="kein"] .held__ergebnis-name b { color: var(--fehler); }
.held__ergebnis:not([data-stand="motor"]) .held__ergebnis-knopf { display: none; }
.welt-licht .held__ergebnis-knopf { width: auto; min-height: 42px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
.reserve { display: grid; gap: 6px; }
.reserve[hidden] { display: none; }
.reserve__balken { height: 10px; overflow: hidden; border-radius: 5px; background: #e6eae8; }
.reserve__balken span { display: block; width: 0; height: 100%; border-radius: 5px; background: var(--gruen); transition: width .5s cubic-bezier(.22, .61, .36, 1); }
.reserve__text { max-width: none; margin: 0; font-size: 13px; line-height: 1.4; color: var(--l-text-2); }
.welt-licht .schriftfeld > .reserve { padding: 12px 14px 14px; border-bottom: 1px solid var(--l-linie); }
@media (prefers-reduced-motion: reduce) { .reserve__balken span { transition: none; } }
.welt-licht .rechenblatt { padding: 24px 28px; border: 0; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .rechenblatt .beispiel { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; }
.welt-licht .rechenblatt .ergebnis { padding: 4px 12px; border: 0; border-radius: 10px; background: #edf3dc; }
.welt-licht .pruefliste { display: grid; gap: 12px; }
.welt-licht .pruefliste li { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4e1; }
.welt-licht .pruefliste svg { width: 52px; height: 52px; padding: 11px; border-radius: 50%; background: #edf3dc; }
.welt-licht .pruefliste svg :is(path, rect, circle) { stroke: var(--gruen-tief); }
@media (max-width: 600px) {
  .welt-licht .rechenblatt { padding: 18px 16px; font-size: 19px; }
  .welt-licht .pruefliste li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .welt-licht .pruefliste svg { width: 44px; height: 44px; padding: 9px; }
}

/* Einleitung mit ungleich langen Absätzen (Motorfinder, Rechengang): Text fließt ab 1100 px ausgeglichen über zwei Spalten */
@media (min-width: 1100px) {
  .welt-licht .abschnitt__kopf--spalten { max-width: none; columns: 2; column-gap: 56px; }
  .welt-licht .abschnitt__kopf--spalten > h2 { column-span: all; max-width: 780px; margin-bottom: 18px; }
  .welt-licht .abschnitt__kopf--spalten > p { max-width: none; margin-top: 0; }
  .welt-licht .abschnitt__kopf--spalten > p + p { margin-top: 12px; }
}

/* ---------------------------------------------------------------- Startseite: Hilfe als Karten (21.10.2026)
   Telefon dunkel wie im Kontakt der Serviceseite, daneben drei Hilfe-Wege auf der Planfläche mit Symbol im hellgrünen Kreis. */
.hilfe-licht__karten { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 16px; }
.kontaktweg--hilfe { grid-template-rows: auto 1fr; }
.kontaktweg--hilfe b { align-self: center; font-size: 18.5px; }
.kontaktweg--hilfe .kontaktweg__symbol { grid-row: 1 / span 2; }
.hilfe-licht__weiter { margin-top: 16px; font-size: 15.5px; color: var(--l-text-2); }
@media (max-width: 1100px) { .hilfe-licht__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hilfe-licht__karten { grid-template-columns: 1fr; gap: 12px; } }

/* ---------------------------------------------------------------- Produktseiten, gemeinsame Bausteine (21.10.2026)
   „Gut zu wissen“ neben dem Datenblatt als Fläche mit Haken (Motoren, Sender, Aufhängefedern); „Im Karton“ als Liste mit
   Haken neben dem Warnhinweis; Downloads als Kacheln; „Die anderen Sender“ als Karten mit Bild. Haken: Kreis #edf3dc, gruen-tief. */
.welt-licht .datenblatt-flaeche > div:last-child { align-self: start; padding: 24px 26px; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .datenblatt-flaeche > div:last-child ul.downloads { display: grid; gap: 4px; border-top: 0; }
.welt-licht .datenblatt-flaeche > div:last-child ul.downloads li { position: relative; display: block; padding: 7px 0 7px 32px; border: 0; font-size: 15px; line-height: 1.55; color: var(--l-text); }
.welt-licht :is(.datenblatt-flaeche > div:last-child ul.downloads, .karton__liste, .gut-zu-wissen ul) li::before { content: ""; position: absolute; left: 0; top: .5em; width: 22px; height: 22px; border-radius: 50%; background: #edf3dc; }
.welt-licht :is(.datenblatt-flaeche > div:last-child ul.downloads, .karton__liste, .gut-zu-wissen ul) li::after { content: ""; position: absolute; left: 8px; top: calc(.5em + 4px); width: 5px; height: 10px; border: solid var(--gruen-tief); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.karton { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.karton__liste { display: grid; gap: 6px; margin: 0; padding: 22px 24px; border-radius: 18px; background: var(--l-flaeche); list-style: none; }
.karton__liste li { position: relative; max-width: none; padding: 6px 0 6px 34px; font-size: 16px; line-height: 1.5; color: var(--l-text); }
.welt-licht .karton__warnung { max-width: none; margin-top: 0; }
.welt-licht .unterlagen--zwei, .welt-licht #downloads > .unterlagen { max-width: none; }
.sender-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sender-karte { display: grid; align-content: start; gap: 4px; padding: 14px 14px 18px; border-radius: 16px; background: var(--l-flaeche); color: var(--l-text) !important; text-decoration: none; transition: box-shadow .2s; }
.sender-karte:hover { box-shadow: 0 0 0 2px var(--gruen-tief); }
.sender-karte:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 3px; }
.sender-karte img { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 10px; padding: 10px; border-radius: 12px; background: #fff; object-fit: contain; }
.sender-karte__name { font-size: 20px; font-weight: 760; letter-spacing: -.01em; }
.sender-karte__text { font-size: 14px; line-height: 1.45; color: var(--l-text-2); }
.welt-licht .gut-zu-wissen { padding: 24px 28px; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .gut-zu-wissen ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 32px; columns: auto; margin: 12px 0 0; padding: 0; list-style: none; }
.welt-licht .gut-zu-wissen li { position: relative; max-width: none; margin: 0; padding: 0 0 0 32px; border: 0; font-size: 15px; line-height: 1.55; }
.welt-licht .gut-zu-wissen li::before { top: .05em; }
.welt-licht .gut-zu-wissen li::after { top: calc(.05em + 4px); }
@media (max-width: 1100px) {
  .sender-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welt-licht .gut-zu-wissen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .karton { grid-template-columns: 1fr; }
  .welt-licht .gut-zu-wissen ul { grid-template-columns: 1fr; }
  .welt-licht .datenblatt-flaeche > div:last-child, .karton__liste, .welt-licht .gut-zu-wissen { padding: 18px 16px; }
}
@media (max-width: 420px) { .sender-karte__name { font-size: 18px; } }

/* ---------------------------------------------------------------- Motor-Produktseiten (21.10.2026)
   Fragen als Karten auf der Planfläche (auch Aufhängefedern); Downloads als drei Kacheln; „Ähnliche Produkte“ als Karten
   mit Symbol im hellgrünen Kreis (Motor oder Sender), Typ in Manrope, Kerndaten darunter. */
.welt-licht .fragen__liste { gap: 16px; border-top: 0; }
.welt-licht .frage { padding: 20px 22px 22px; border: 0; border-radius: 14px; background: var(--l-flaeche); }
.unterlagen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.produkt-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.produkt-karte { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: 14px; row-gap: 2px; padding: 20px 22px; border-radius: 16px; background: var(--l-flaeche); color: var(--l-text) !important; text-decoration: none; transition: box-shadow .2s; }
.produkt-karte:hover { box-shadow: 0 0 0 2px var(--gruen-tief); }
.produkt-karte:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 3px; }
.produkt-karte__symbol { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #edf3dc; }
.produkt-karte__symbol svg { width: 22px; height: 22px; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.produkt-karte b { align-self: center; font-family: var(--norm); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.produkt-karte > span:last-child { grid-column: 2; font-size: 14.5px; line-height: 1.45; color: var(--l-text-2); }
@media (max-width: 1100px) { .produkt-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .unterlagen--drei { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .produkt-karten { grid-template-columns: 1fr; gap: 12px; } .welt-licht .frage { padding: 18px 16px; } }

/* ---------------------------------------------------------------- Ratgeber (21.10.2026)
   Inhaltsverzeichnis als Sprungknöpfe unter dem Kopf; nummerierte Schritte mit runder Nummer in gruen-tief; Einschübe in voller Breite
   (Endlagen-Bühne); Abschluss „Sie kommen nicht weiter?“ mit den drei Kontaktkarten. */
.ratgeber__inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 0 8px; }
:is(.ratgeber__inhalt, .sprungleiste) > span { margin-right: 6px; font-size: 13.5px; font-weight: 650; color: var(--l-text-2); }
:is(.ratgeber__inhalt, .sprungleiste) a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--l-flaeche); color: var(--l-text) !important; font-size: 14px; font-weight: 650; text-decoration: none; transition: box-shadow .15s; }
:is(.ratgeber__inhalt, .sprungleiste) a:hover { box-shadow: inset 0 0 0 1.5px var(--gruen-tief); }
:is(.ratgeber__inhalt, .sprungleiste) a:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.recht__teil h2 { scroll-margin-top: calc(var(--leiste-h, 72px) + 20px); }
.ratgeber .recht__text ol { display: grid; gap: 10px; margin-bottom: 0; padding: 0; list-style: none; counter-reset: rg; }
.ratgeber .recht__text ol > li { position: relative; margin: 0; padding-left: 42px; counter-increment: rg; }
.ratgeber .recht__text ol > li::before { content: counter(rg); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1.2px solid var(--gruen-tief); border-radius: 50%; background: #fff; font-size: 13.5px; font-weight: 760; color: var(--gruen-tief); }
.ratgeber .recht__text .vergleich-rahmen { margin-top: 18px; }
.ratgeber__einschub { padding: 36px 0; border-bottom: 1px solid var(--l-linie); }
.ratgeber__hilfe { padding: 44px 0 10px; }
.ratgeber__hilfe .abschnitt__kopf { margin-bottom: 24px; }
@media (max-width: 900px) { .ratgeber__einschub { padding: 26px 0; } }

/* ---------------------------------------------------------------- Seite Rollladenmotoren (21.10.2026)
   Sprungleiste unter den Eckdaten (wie das Inhaltsverzeichnis der Ratgeber, am Handy als waagerechte Leiste);
   Kabel/Funk als Karten auf der Planfläche mit Haken; Zubehör als Karte mit Bild; Garantie als Band mit Siegel und Kacheln. */
.sprungleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1360px; margin: 44px auto 0; padding: 0 var(--seite); }
@media (max-width: 600px) {
  :is(.ratgeber__inhalt, .sprungleiste) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  :is(.ratgeber__inhalt, .sprungleiste)::-webkit-scrollbar { display: none; }
  :is(.ratgeber__inhalt, .sprungleiste) > * { flex: none; }
  .ratgeber__inhalt { margin: 0 calc(-1 * var(--seite)); padding: 20px var(--seite) 8px; }
  .sprungleiste { margin-top: 28px; padding-bottom: 4px; }
}
.welt-licht .varianten { gap: 20px; border-top: 0; }
.welt-licht .variante, .welt-licht .variante + .variante { padding: 24px 26px 26px; border: 0; border-radius: 18px; background: var(--l-flaeche); }
.welt-licht .variante ul:not(.variante__typen) { display: grid; gap: 6px; margin-top: 10px; padding: 0; list-style: none; }
.welt-licht .variante ul:not(.variante__typen) li { position: relative; margin: 0; padding-left: 32px; }
.welt-licht .variante ul:not(.variante__typen) li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #edf3dc; }
.welt-licht .variante ul:not(.variante__typen) li::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--gruen-tief); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.welt-licht .variante__typen a { background: #fff; border-color: #dfe4e1; }
.welt-licht .variante__typen a:hover { border-color: var(--gruen-tief); }
.zubehoer-karte { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 20px; max-width: 760px; margin-top: 20px; padding: 14px 22px 14px 14px; border-radius: 16px; background: var(--l-flaeche); color: var(--l-text) !important; text-decoration: none; transition: box-shadow .2s; }
.zubehoer-karte:hover { box-shadow: 0 0 0 2px var(--gruen-tief); }
.zubehoer-karte:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 3px; }
.zubehoer-karte img { width: 120px; height: 96px; padding: 6px; border-radius: 12px; background: #fff; object-fit: contain; }
.zubehoer-karte__text { display: grid; gap: 4px; }
.zubehoer-karte__text b { font-size: 17px; line-height: 1.3; font-weight: 740; }
.zubehoer-karte__text span { font-size: 14.5px; line-height: 1.45; color: var(--l-text-2); }
.zubehoer-karte__pfeil { width: 22px; height: 22px; fill: none; stroke: var(--gruen-tief); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.garantie-kurz__unterlagen { margin-top: 16px; }
@media (max-width: 600px) {
  .zubehoer-karte { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 12px; }
  .zubehoer-karte img { width: 84px; height: 72px; }
  .zubehoer-karte__pfeil { display: none; }
  .welt-licht .variante, .welt-licht .variante + .variante { padding: 18px 16px 20px; }
}

/* Smart Home: Markenhinweis unter den beiden Spalten (21.10.2026) */
.welt-licht .smart-home__marken { margin-top: -16px; color: var(--l-text-2); }

/* ---------------------------------------------------------------- Übersicht Hand- und Wandsender (21.10.2026)
   Senderkarten auf der Planfläche; „Wie viele Rollläden?“ als Pillen, gewählt dunkel, Empfehlung als grüner Chip;
   „Was smart bei uns heißt“ und „Einlernen auf Knopfdruck“ als zwei Karten unter dem Zeitprogramm. */
.welt-licht .senderreihe article, .welt-licht .senderreihe article + article { gap: 8px; padding: 12px 12px 16px; border: 0; border-radius: 16px; background: var(--l-flaeche); }
.welt-licht .senderreihe img { background: #fff; box-shadow: none; }
.welt-licht .senderreihe article > :not(.senderreihe__bild) { padding: 0 4px; }
.welt-licht .sender-wahl { gap: 8px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--l-flaeche); }
.welt-licht .sender-wahl__frage { margin-right: 8px; }
.welt-licht .sender-wahl label { position: relative; gap: 0; min-height: 0; }
.welt-licht .sender-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.welt-licht .sender-wahl label span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4e1; font-size: 15px; font-weight: 650; color: var(--l-text); transition: background .15s, color .15s, box-shadow .15s; }
.welt-licht .sender-wahl label:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--gruen-tief); }
.welt-licht .sender-wahl input:checked + span { background: var(--l-nacht); color: #fff; box-shadow: none; }
.welt-licht .sender-wahl input:focus-visible + span { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.welt-licht .sender-wahl__ergebnis { min-height: 34px; margin: 0 0 14px; }
.welt-licht .sender-wahl__ergebnis:not(:empty) { display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #edf3dc; color: var(--gruen-tief); font-weight: 700; }
.sender-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
@media (min-width: 761px) { .welt-licht .timer { align-items: center; } }
@media (max-width: 600px) {
  .sender-vorteile { grid-template-columns: 1fr; }
  .welt-licht .sender-wahl__frage { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- Über casmartis (Startseite #marke, 21.10.2026)
   Kopf wie bisher (Überschrift links, Leitbild groß rechts); darunter drei Werte als Karten auf der Planfläche mit Symbol
   im weißen Kreis; zum Schluss der Absender mit Logo über einer feinen Linie. Wortlaut unverändert. */
.welt-licht .marke-licht { display: block; }
.marke-licht__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px 72px; }
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.werte li { display: grid; align-content: start; gap: 10px; max-width: none; padding: 26px 26px 28px; border-radius: 18px; background: var(--l-flaeche); }
.werte svg { width: 52px; height: 52px; margin-bottom: 6px; padding: 14px; border-radius: 50%; background: #fff; fill: none; stroke: var(--gruen-tief); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.welt-licht .werte h3 { font-size: 20px; line-height: 1.3; font-weight: 750; letter-spacing: -.012em; color: var(--l-text); }
.welt-licht .werte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--l-text-2); }
.marke-licht__absender { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 40px; align-items: center; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--l-text); }
.marke-licht__absender img { width: 150px; height: auto; }
.welt-licht .marke-licht__absender p { max-width: 70ch; margin: 0; font-size: 17px; line-height: 1.6; color: var(--l-text); }
@media (max-width: 1100px) { .werte { grid-template-columns: 1fr; } .werte li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; } .werte svg { grid-row: 1 / span 2; margin: 0; } }
@media (max-width: 760px) {
  .marke-licht__kopf { grid-template-columns: 1fr; gap: 18px; }
  .marke-licht__absender { grid-template-columns: 1fr; }
  .werte li { padding: 20px 18px; }
}

/* Markenhinweis unter den Fragen der Kabel-Produktseiten (21.10.2026) */
.welt-licht .aktoren-marken { margin-top: 16px; color: var(--l-text-2); }

/* Footer-Logo führt zur Startseite wie das Logo in der Kopfleiste (21.10.2026) */
.seitenfuss__logo { display: inline-block; border-radius: 6px; }
.seitenfuss__logo img { transition: opacity .15s; }
.seitenfuss__logo:hover img { opacity: .82; }
.seitenfuss__logo:focus-visible { outline: 2px solid var(--gruen-hell); outline-offset: 4px; }

/* ---------------------------------------------------------------- Datenschutz: Kernaussagen als Haken-Leiste unter dem Kopf (21.10.2026) */
.recht__kurz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.recht__kurz li { position: relative; display: flex; align-items: center; min-height: 64px; max-width: none; padding: 14px 18px 14px 54px; border-radius: 14px; background: var(--l-flaeche); font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--l-text); }
.recht__kurz li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #edf3dc; }
.recht__kurz li::after { content: ""; position: absolute; left: 27px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid var(--gruen-tief); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.recht__kurz + .ratgeber__inhalt { padding-top: 18px; }
@media (max-width: 1100px) { .recht__kurz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .recht__kurz { grid-template-columns: 1fr; } .recht__kurz li { min-height: 52px; } }

/* ---------------------------------------------------------------- Kontaktseite (21.10.2026)
   Links Telefon (dunkel) und E-Mail als Karten wie auf der Serviceseite, darunter Absender, Garantie-Hinweis und „Häufige Themen“. */
.kontakt .kontaktwege { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.kontakt__absender { max-width: 52ch; margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--l-text-2); }
.kontakt .kontakt__hinweis { margin-top: 10px; }
.kontakt__themen { padding-top: 22px; }
.kontakt__text, .kontakt .formular { min-width: 0; }

/* ---------------------------------------------------------------- Federseite (21.10.2026, zweite Runde)
   Foto „Eingehakt“ in der Montage-Box; Federbedarf auf der Planfläche mit Rechner; Sicherheitshinweise als nummerierte Liste
   mit PDF-Kachel. Zweites Produktbild und Produktkarten nutzen die vorhandenen Bausteine. */
.wissen__bild { margin: 12px 0 6px; }
.wissen__bild img { display: block; width: 100%; height: auto; border-radius: 12px; }
.wissen__bild figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--l-text-2); }
.federbedarf-flaeche { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; padding: 28px 32px; border-radius: 18px; background: var(--l-flaeche); }
.federbedarf-flaeche .federbedarf { max-width: none; }
.federrechner { display: grid; gap: 10px; align-content: start; padding: 22px 24px 26px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #dfe4e1; }
.federrechner[hidden], .federrechner__welle[hidden] { display: none; }
.federrechner label { font-size: 14.5px; font-weight: 650; color: var(--l-text); }
.federrechner .feld-m { max-width: 220px; }
.federrechner input { width: 100%; min-height: 48px; padding: 8px 40px 8px 14px; border: 1px solid #cfd5d2; border-radius: 10px; background: #fff; font-family: var(--norm); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--l-text); }
.federrechner input:focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(149, 193, 31, .35); }
.federrechner input::placeholder { color: #9aa5a1; font-weight: 500; }
.welt-licht .federrechner__ergebnis { min-height: 60px; max-width: none; margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--l-text-2); }
.welt-licht .federrechner__ergebnis b { display: block; font-family: var(--norm); font-size: 30px; line-height: 1.15; font-weight: 760; color: var(--l-text); font-variant-numeric: tabular-nums; }
.federrechner__welle { margin-bottom: 22px; }
.sicher-liste { display: grid; gap: 14px; margin: 0; padding: 24px 26px; border-radius: 18px; background: var(--l-flaeche); list-style: none; counter-reset: si; }
.sicher-liste li { position: relative; max-width: none; padding-left: 42px; font-size: 16px; line-height: 1.55; color: var(--l-text-2); counter-increment: si; }
.sicher-liste li::before { content: counter(si); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border: 1.2px solid var(--gruen-tief); border-radius: 50%; background: #fff; font-size: 13.5px; font-weight: 760; color: var(--gruen-tief); }
.sicher-liste b { color: var(--l-text); font-weight: 720; }
.sicher-pdf { display: grid; gap: 14px; align-content: start; }
@media (max-width: 900px) {
  .federbedarf-flaeche { grid-template-columns: 1fr; padding: 20px 16px; }
  .sicher-liste { padding: 18px 16px; }
}

/* 404: Weiter-Karten direkt unter dem Kopf (22.10.2026) */
.recht__weiter { padding: 44px 0 8px; }
.recht__weiter .pfeillink { display: inline-block; margin-top: 26px; }
@media (max-width: 1020px) {
  .recht__weiter { padding-top: 26px; }
}

/* Motorfinder: Motorkopf im Ergebnis ganz zeigen statt anzuschneiden (22.10.2026).
   Das 35-mm-Bild ist fast quadratisch; der 16:9-Zuschnitt zeigte nur noch einen Ausschnitt des Kopfdeckels.
   Das Bild sitzt als Fotokachel auf heller Fläche: Die im Rendering beschnittenen Kanten sind dann einfach Bildrand.
   Feste Höhe, damit die Karte beim Wechsel SW40/SW60 nicht springt. */
.welt-licht .sf__bild { padding: 14px 16px 0; background: var(--l-flaeche); }
.welt-licht .sf__bild img { box-sizing: border-box; width: auto; max-width: 100%; height: 164px; aspect-ratio: auto; margin: 0 auto; object-fit: contain; border-radius: 10px; background: #fff; }
.welt-licht .sf__bild figcaption { padding: 8px 0 10px; background: none; text-align: center; text-wrap: balance; }
@media (max-width: 1100px) {
  .welt-licht .sf__bild img { height: 184px; aspect-ratio: auto; }
}

/* Menü: „Kontakt“ als Hauptpunkt; im Handymenü darunter die Telefonnummer zum Antippen (22.10.2026) */
.leiste__telefon { display: none; }
@media (max-width: 1020px) {
  .welt-licht .leiste__telefon { display: block; margin: 22px 0 0; font-size: 16px; line-height: 1.5; color: var(--l-text-2); }
  .welt-licht .leiste__telefon a { font-weight: 700; color: var(--l-text); white-space: nowrap; }
}

/* Startseite am Handy (22.10.2026) */
@media (max-width: 1020px) {
  /* Tageslauf: der letzte Schritt (22:00) nur so hoch wie sein Inhalt, sonst bleibt vor dem Sortiment ein leerer dunkler Streifen */
  .lauf__schritt--nacht { min-height: 0; padding-bottom: 64px; }
  /* Längsschnitt: „Endlagen“ und „Getriebe“ eine Zeile tiefer, damit sich die Namen bei großer Schrift nicht berühren */
  .motor-schnitt .ms-namen text:nth-child(even) { transform: translateY(48px); }
  .innenleben__bild figcaption { margin-top: 30px; }
}
@media (max-width: 600px) {
  /* Sortiment: Baureihe über den Typen statt dreizeilig daneben */
  .bereich-feld__liste > span { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* Werte: Symbol über der Überschrift, der Text bekommt die volle Kartenbreite */
  .werte li { grid-template-columns: 1fr; row-gap: 10px; }
  .werte svg { grid-row: auto; width: 46px; height: 46px; padding: 12px; margin: 0 0 2px; }
}

/* Maßzeichnung Motorkopf 45 mm (22.10.2026): am Desktop ein Blatt mit begrenzter Breite statt 1600 px Höhe;
   am Handy alle Ansichten im selben Maßstab, wie im Schriftfeld angegeben (vorher je Teil 0,65 bis 1,0) */
.welt-licht .massfig .zg-ganz { max-width: 860px; margin: 0 auto; }
.welt-licht .massfig > .figur-unterschrift { max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .welt-licht .massfig .zg-teile { container-type: inline-size; }
  .welt-licht .massfig .zg-teil[style*="--b"] { width: calc(var(--b) / 514 * 100cqi); max-width: 100%; }
  .welt-licht .massfig > .figur-unterschrift { max-width: none; }
}

/* Produktseiten am Handy (22.10.2026) */
@media (max-width: 600px) {
  /* Baugröße und Variante: vier Kacheln je Reihe, auch „WL 13/14“; sonst stand „WL 40/15“ allein in einer Zeile */
  .welt-licht .varianten-wahl ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .welt-licht .varianten-wahl a, .welt-licht .varianten-wahl span { display: block; padding: 9px 2px; text-align: center; font-size: clamp(13.5px, 3.9vw, 15px); white-space: nowrap; }
}
@media (max-width: 760px) {
  /* Maßzeichnung: Lager und Splinte aufklappbar */
  .welt-licht .massfig .zg-mehr { justify-self: stretch; }
  .welt-licht .massfig .zg-mehr > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; padding: 14px 0 2px; cursor: pointer; list-style: none; }
  .welt-licht .massfig .zg-mehr > summary::-webkit-details-marker { display: none; }
  .welt-licht .massfig .zg-mehr > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; font-size: 20px; line-height: 1; }
  .welt-licht .massfig .zg-mehr[open] > summary::after { content: "–"; }
  .welt-licht .massfig .zg-mehr__teile { display: grid; gap: 26px; justify-items: center; margin-top: 22px; }
}

/* ---------------------------------------------------------------- Alle Seiten am Handy (22.10.2026)
   Wischleisten zeigen am rechten Rand, dass es weitergeht; Kurzwege ohne Desktop-Trennstrich; schmale Handys (320 bis 360 px)
   ohne Überlauf; größere Tippflächen für Pfad, Fußzeile, Kauflinks und die Senderliste der Kaufbox. */
.kaufbox__sender li { position: relative; }
.kaufbox__sender a::after { content: ""; position: absolute; inset: 0; } /* ganze Zeile ist der Link */
@media (max-width: 920px) {
  .welt-licht .kurzweg + .kurzweg { border-left: 0; }
}
@media (max-width: 760px) {
  .pfad a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .seitenfuss__zeile div { row-gap: 14px; }
  .seitenfuss__zeile a { padding: 7px 0; margin: -7px 0; }
  .senderreihe .links { row-gap: 10px; }
  .senderreihe .links a { padding: 5px 0; margin: -5px 0; }
  .klappe summary { padding: 8px 0; margin: -8px 0; }
  .reihe__produkt { padding: 9px 0; margin: -3px 0 -9px; }
}
@media (max-width: 600px) {
  :is(.ratgeber__inhalt, .sprungleiste) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  :is(.ratgeber__inhalt, .sprungleiste)::after { content: ""; flex: 0 0 32px; }
  /* Motorfinder: Breite und Höhe teilen sich die Zeile, statt bei 320 px über den Rand zu laufen */
  .welt-licht .masse { gap: 18px; }
  .welt-licht .masse .mass { flex: 1 1 0; min-width: 0; }
  .welt-licht .masse .mass input { flex: 1 1 0; width: 0; min-width: 0; }
}
@media (max-width: 360px) {
  .welt-licht .garantie__band { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .garantie__siegel { width: 72px; height: 72px; }
  .kennzahlen dd { font-size: 22px; }
  .eckdaten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eckdaten li { padding: 14px 12px 16px; }
  .eckdaten b { font-size: 15.5px; }
  .welt-licht .senderreihe p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------- Kabel/Funk-Karten auf Rollladenmotoren (22.10.2026)
   Das Motorkopf-Rendering ist 5:3; quadratisch beschnitten fehlten Halter und Kopf. Jetzt ganz: am Desktop links in 240 px,
   wenn die Karte einspaltig ist, über die Kartenbreite (höchstens 460 px). */
.welt-licht .variante { grid-template-columns: 240px minmax(0, 1fr); }
.welt-licht .variante img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
@media (max-width: 1180px) {
  .welt-licht .variante { grid-template-columns: minmax(0, 1fr); }
  .welt-licht .variante figure { max-width: 460px; margin-bottom: 6px; }
}

/* Videos, selbst gehostet (seit 28.10.2026): laden erst beim Abspielen */
.welt-licht .video { margin: 0; }
.welt-licht .video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px;
  background: #e9eeec; box-shadow: 0 22px 48px -30px rgba(16, 22, 20, .5); }
.welt-licht .video figcaption { margin-top: .75rem; }
.welt-licht .video-reihe { max-width: 960px; margin: 0 0 2.5rem; }
.welt-licht #video .video { max-width: 960px; }