/* Richtung A "Schnitt" (Kundenwahl 17.10.2026, Entwurf OUTBOX/TROAS_20261017_DESIGN_VARIANTEN, a-start.html und
   a-kategorie.html): hell und kantig, die Formensprache von Kopf 9.8 über die ganze Seite. Keil vor großen Titeln,
   Schrägstrich dahinter, Gruppenbalken über Listen, Bildkanten im Winkel von 18 Grad.
   Alles gilt nur innerhalb von .ra (Seiteninhalt), damit Konfigurator, Kasse und Verwaltung unberührt bleiben.
   Erzeugt mit tools/css-bereich.py aus den Entwurfsstilblättern; Farben und Maße aus kopf.css (--k-*). */
.ra{--tinte:var(--k-tinte,#142a4c);--tief:var(--k-tief,#0d1e38);--leise:var(--k-leise,#5a6678);--linie:var(--k-linie,#dde3ea);--flaeche:var(--k-flaeche,#eef1f5);--orange:var(--k-orange,#f2884b);--blau:var(--k-blau,#154e8a);--blau-tief:var(--k-blau-tief,#0f3c6b);--auf-nacht:var(--k-auf-nacht,#b8c4d6);--rand:var(--k-rand,64px);--breite:var(--k-breite,1760px);--schraeg:.325;--luft-keil:var(--k-luft-keil,20px);--keil-max:200px;display:block;background:#fff;color:var(--tinte);font-family:Manrope,Arial,sans-serif;font-size:var(--text,17px);line-height:1.55;font-weight:500;overflow-wrap:break-word;overflow-x:clip}
.ra *,.ra *::before,.ra *::after{box-sizing:border-box}
.ra img{display:block;max-width:100%;height:auto}
.ra ul,.ra ol{margin:0;padding:0;list-style:none}
.ra p,.ra h1,.ra h2,.ra h3,.ra figure,.ra dl,.ra dd{margin:0}
.ra a{color:inherit}
.ra button,.ra input,.ra select{font:inherit;color:inherit}
.ra button{cursor:pointer;background:none;border:0;padding:0}
.ra summary{list-style:none;cursor:pointer}.ra summary::-webkit-details-marker{display:none}
/* Gemeinsame Grundlage der drei Gestaltungsrichtungen (17.10.2026). Farben und Maße kommen aus kopf.css (Entwurf 9.8):
   --tinte Nachtblau, --tief Nachtblau tief, --orange, --blau Leitblau (nur "Glas konfigurieren"), --flaeche Hellgrau.
   Regeln aus 9.8: Orange als Schrift nur auf Nachtblau, Keile höchstens 200 px, Schräge 18 Grad. */.ra{--h1:clamp(44px,5.4vw,104px);--h2:clamp(32px,2.9vw,56px);--h3:clamp(19px,1.25vw,24px);--text:17px;--abschnitt:clamp(72px,7vw,136px)}.ra{font-size:var(--text);line-height:1.55;font-weight:500;color:var(--tinte);overflow-wrap:break-word}.ra .w{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}.ra h1,.ra h2,.ra h3{font-weight:800;letter-spacing:-.035em;line-height:1.05}.ra .h2{font-size:var(--h2);letter-spacing:-.045em;line-height:1}.ra .h3{font-size:var(--h3);font-weight:800;letter-spacing:-.025em;line-height:1.15;display:block}.ra .marke{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte)}.ra .marke.auf-nacht{color:var(--auf-nacht)}.ra .orange-text{color:var(--orange)}.ra p{margin:0}.ra .abschnitt{padding:var(--abschnitt) 0}.ra .abschnitt-eng{padding:calc(var(--abschnitt) * .7) 0}.ra .nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Schrägstrich aus dem Logo als Satzzeichen hinter einem Titel (wie der Großmenü-Titel in 9.8) */.ra .schraeg::after,.ra .schraeg-zeichen{content:"";display:inline-block;width:.12em;height:.72em;margin-left:.16em;background:var(--orange);transform:skewX(-18deg);vertical-align:baseline}
/* Keil vom linken Fensterrand bis kurz vor den Titel, höchstens 200 px breit */.ra .keil-zeile{position:relative}.ra .keil-zeile::before{content:"";position:absolute;right:calc(100% + var(--luft-keil));top:.12em;height:.72em;width:min(var(--keil-max),var(--rand) + 600px);background:var(--orange);clip-path:polygon(0 0,100% 0,calc(100% - .72em * var(--schraeg)) 100%,0 100%)}
/* Gruppenbalken: 34 x 5 px, schräge Enden */.ra .balken{position:relative;padding-top:18px}.ra .balken::before{content:"";position:absolute;left:0;top:0;width:34px;height:5px;background:var(--orange);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}

/* Knöpfe. Leitblau nur für Konfigurieren (Regel aus Troas-AGENTS.md), alles andere Nachtblau oder Linie. */.ra .knoepfe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.ra .k-blau,.ra .k-nacht,.ra .k-linie,.ra .k-hell,.ra .k-weiss{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;font-size:16px;font-weight:800;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;border:2px solid transparent}.ra .k-blau{background:var(--blau);color:#fff}.ra .k-blau:hover{background:var(--blau-tief)}.ra .k-blau svg{width:19px;height:19px}.ra .k-nacht{background:var(--tinte);color:#fff}.ra .k-nacht:hover{background:var(--tief)}.ra .k-linie{border-color:var(--tinte);color:var(--tinte);background:#fff}.ra .k-linie:hover{background:var(--flaeche)}.ra .k-weiss{background:#fff;color:var(--tinte)}.ra .k-weiss:hover{background:var(--flaeche)}.ra .k-hell{border-color:#fff;color:#fff;background:transparent}.ra .k-hell:hover{background:rgba(255,255,255,.1)}.ra .k-blau:focus-visible,.ra .k-weiss:focus-visible,.ra .k-nacht:focus-visible,.ra .k-linie:focus-visible,.ra .k-hell:focus-visible,.ra a:focus-visible,.ra summary:focus-visible,.ra input:focus-visible,.ra select:focus-visible,.ra button:focus-visible{outline:2px solid var(--blau);outline-offset:3px}.ra .pf{width:20px;height:20px;flex:none}
/* Textlink wie "Alle 80 Gläser" im Großmenü: fett, orange Unterstreichung, Pfeil */.ra .link-alle{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:17px;font-weight:800;color:var(--tinte);text-decoration:none}.ra .link-alle span{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:7px}.ra .link-alle:hover span{text-decoration-color:var(--tinte)}.ra .link-alle.klein{font-size:15.5px;min-height:44px}.ra .zahl{margin-left:3px;font-size:11px;font-weight:800;vertical-align:super;line-height:0;color:var(--leise);font-variant-numeric:tabular-nums}

/* Brotkrumen */.ra .krumen{display:flex;flex-wrap:wrap;gap:10px;padding:22px 0 0;font-size:14px;font-weight:600;color:var(--leise)}.ra .krumen a{color:var(--leise);text-underline-offset:3px}.ra .krumen [aria-current]{color:var(--tinte);font-weight:800}

/* Formularfelder (Schnellstart mit Maßen) */.ra .feld{display:flex;flex-direction:column;gap:6px;min-width:0}.ra .feld-label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte)}.ra .feld-wahl,.ra .feld-zahl{position:relative;display:flex;align-items:center;height:52px;background:#fff;border-bottom:2px solid var(--tinte)}.ra .feld-wahl select{appearance:none;-webkit-appearance:none;width:100%;height:100%;padding:0 38px 0 14px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--tinte);cursor:pointer}.ra .feld-wahl::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2.4px solid var(--tinte);border-bottom:2.4px solid var(--tinte);transform:rotate(45deg);pointer-events:none}.ra .feld-zahl input{width:100%;min-width:0;height:100%;padding:0 4px 0 14px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums;-moz-appearance:textfield}.ra .feld-zahl input::-webkit-inner-spin-button{-webkit-appearance:none}.ra .feld-zahl span{padding:0 14px 0 4px;font-size:14px;font-weight:700;color:var(--leise)}.ra .feld-wahl:focus-within,.ra .feld-zahl:focus-within{box-shadow:inset 0 0 0 2px var(--tinte)}

/* Filter: Haken und Chips */.ra .filter-gruppe{margin:0;padding:0;border:0;min-width:0}.ra .filter-gruppe legend{padding:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ra .haken{display:flex;align-items:center;gap:12px;min-height:38px;font-size:15.5px;font-weight:600;cursor:pointer}.ra .haken input,.ra .chip input{position:absolute;opacity:0;pointer-events:none}.ra .haken span::before{content:"";display:inline-block;width:18px;height:18px;margin-right:12px;vertical-align:-3px;border:2px solid var(--tinte);background:#fff}.ra .haken input:checked+span::before{background:var(--tinte);box-shadow:inset 0 0 0 3px #fff}.ra .haken input:focus-visible+span::before,.ra .chip input:focus-visible+span{outline:2px solid var(--blau);outline-offset:2px}.ra .chip{display:inline-flex;cursor:pointer}.ra .chip span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1.5px solid #c3ccd8;background:#fff;font-size:14.5px;font-weight:700;white-space:nowrap}.ra .chip:hover span{border-color:var(--tinte)}.ra .chip input:checked+span{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* Produktangaben */.ra .p-nutzen{font-size:15.5px;line-height:1.5;color:#33415a}.ra .p-daten{display:grid;gap:4px;margin:0;font-size:14px;line-height:1.4}.ra .p-daten div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px}.ra .p-daten dt{font-weight:800;color:var(--leise)}.ra .p-daten dd{margin:0;font-weight:600}.ra .p-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;font-size:14px;font-weight:700;color:var(--leise)}.ra .p-preis strong{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--tinte);font-variant-numeric:tabular-nums}.ra .p-stern{color:var(--leise);text-decoration:none;font-weight:800}.ra .hinweis{margin-top:26px;font-size:14px;color:var(--leise)}

/* Fragen */.ra .fragen{border-top:2px solid var(--tinte)}.ra .fragen details{border-bottom:1px solid var(--linie)}.ra .fragen summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:14px 0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.3}.ra .fragen .plus{flex:none;width:22px;height:22px;transition:transform .18s}.ra .fragen details[open] .plus{transform:rotate(45deg)}.ra .fragen p{max-width:72ch;padding:0 48px 24px 0;font-size:16.5px;color:#33415a}


@media (max-width:1099px){
}
@media (max-width:640px){.ra{--text:16px}.ra p,.ra h3,.ra dd,.ra .h3{hyphens:auto;-webkit-hyphens:auto}.ra .fragen summary{font-size:17px;min-height:64px}.ra .fragen p{padding-right:0}.ra .k-blau,.ra .k-nacht,.ra .k-linie,.ra .k-hell,.ra .k-weiss{white-space:normal;text-align:center}
}

/* Richtung A "Schnitt": hell und kantig, die Formensprache von 9.8 über die ganze Seite.
   Keil vor großen Titeln, Schrägstrich dahinter, Gruppenbalken über Listen, Bildkanten im Winkel von 18 Grad.
   Weiß und Nachtblau tragen, zwei dunkle Bänder (Vorteile, Konfigurator) gliedern. */

/* Kopfzeile eines Abschnitts: Titel links, Erklärung und Link rechts unten bündig */.ra .kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);align-items:end;gap:24px 64px;margin-bottom:56px;padding-bottom:28px;border-bottom:1px solid var(--linie)}.ra .kopfzeile .marke{margin-bottom:18px}.ra .kopfzeile-rechts{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:16px;color:#33415a}.ra .kopfzeile .h2{white-space:normal}

/* Bühne: Text links, Foto rechts bis an den Fensterrand, linke Fotokante schräg */.ra .a-held{position:relative;overflow:hidden;border-bottom:1px solid var(--linie)}.ra .a-held-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:clamp(560px,46vw,760px)}.ra .a-held-text{display:flex;flex-direction:column;justify-content:center;padding:72px 56px 72px 0}.ra .a-held-titel{display:flex;flex-direction:column;margin:4px 0 28px;font-size:var(--h1);line-height:.92;letter-spacing:-.055em}.ra .a-held-titel .keil-zeile::before{top:.14em}.ra .a-held-lead{max-width:30ch;margin-bottom:36px;font-size:clamp(18px,1.3vw,23px);font-weight:600;line-height:1.4;color:#33415a}.ra .a-held-runter{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-size:15px;font-weight:800;color:var(--tinte);text-decoration:none}.ra .a-held-runter span,.ra .a-held-runter{text-underline-offset:6px}.ra .a-held-runter:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px}.ra .a-held-bild{position:relative;margin:0 calc(-1 * max(var(--rand),(100vw - var(--breite)) / 2 + var(--rand))) 0 0}.ra .a-held-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(clamp(80px,9vw,190px) 0,100% 0,100% 100%,0 100%)}.ra .a-held-bild figcaption{position:absolute;right:0;bottom:0;padding:14px 28px;background:var(--tief);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* Vorteile: dunkles Band, Ziffern orange (Orange als Schrift nur auf Nachtblau) */.ra .a-vorteile{background:var(--tief);color:#fff}.ra .a-vorteile-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.ra .a-vorteile-liste>li{display:flex;gap:18px;min-width:0;padding:34px 28px 34px 0}.ra .a-vorteile-liste>li+li{padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}.ra .a-vorteil-nr{flex:none;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--orange);font-variant-numeric:tabular-nums}.ra .a-vorteil-titel{margin-bottom:4px;font-size:18px;font-weight:800;letter-spacing:-.02em}.ra .a-vorteile p:not(.a-vorteil-titel){font-size:15px;color:var(--auf-nacht)}.ra .a-vorteile a{color:#fff;font-weight:800;font-size:17px;text-decoration:none}
/* Versand-Band vor dem Fuß (19.10.2026, vorher Fußzeile des Vorteile-Bandes): Bedingungen links, belegte Vertrauensangaben rechts untereinander, damit neben dem Text keine leere Fläche bleibt. Hellgrau wie die Glasarten, Orange nur als Zeichen und Linie. */.ra .a-vorteile a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.ra .a-versand-band{background:var(--flaeche)}.ra .a-betrieb+.a-versand-band{border-top:1px solid #d3dae4}.ra .a-versand-innen{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px 80px;align-items:center}.ra .a-bedingungen{min-width:0;max-width:72ch}.ra .a-bedingungen .h3{margin-bottom:12px}.ra .a-bedingungen p{font-size:16px;line-height:1.6;color:#33415a}.ra .a-bedingungen .link-alle{margin-top:10px}.ra .a-vertrauen{display:grid;gap:24px;align-content:start;min-width:0;padding-left:48px;border-left:1px solid #d3dae4}.ra .a-vertrauen>li{display:flex;gap:14px;min-width:0}.ra .a-vertrauen-zeichen{flex:none;width:22px;height:22px;margin-top:1px;color:var(--orange)}.ra p.a-vertrauen-titel{margin-bottom:2px;font-size:16px;font-weight:800;line-height:1.3;color:var(--tinte)}.ra .a-vertrauen p:not(.a-vertrauen-titel){font-size:15px;line-height:1.45;color:#33415a}

/* Vier Bereiche: Bild, Nummer, Titel mit Pfeil, Liste wie im Großmenü */.ra .a-bereiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px}.ra .a-bereich{display:flex;flex-direction:column}.ra .a-bereich-bild{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:22px;background:var(--flaeche)}.ra .a-bereich-bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.ra .a-bereich:hover .a-bereich-bild img{transform:scale(1.03)}.ra .a-bereich-bild::after{content:"";position:absolute;right:0;bottom:0;width:64px;height:20px;background:#fff;clip-path:polygon(calc(20px * .325) 0,100% 0,100% 100%,0 100%)}.ra .a-bereich-nr{position:relative;padding-top:16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.ra .a-bereich-nr::before{content:"";position:absolute;left:0;top:0;width:34px;height:5px;background:var(--orange);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}.ra .a-bereich-nr span{margin-left:8px;color:var(--leise)}.ra .a-bereich h3{margin:10px 0 10px;font-size:clamp(23px,1.6vw,30px);letter-spacing:-.04em}.ra .a-bereich h3 a{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.ra .a-bereich h3 a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:7px}.ra .a-bereich-text{margin-bottom:14px;font-size:15.5px;color:#33415a}.ra .a-kats{margin-bottom:10px;border-top:1px solid var(--linie)}.ra .a-kats a{display:flex;align-items:baseline;min-height:44px;padding:11px 0 0;border-bottom:1px solid var(--linie);font-size:16.5px;font-weight:700;letter-spacing:-.015em;text-decoration:none}.ra .a-kats a:hover{color:var(--blau)}.ra .a-bereich .link-alle{margin-top:auto}

/* Glasarten: Hellgrau, weiße Karten, Bild mit schräger Ecke */.ra .a-glas{background:var(--flaeche)}.ra .a-glas .kopfzeile{border-color:#d3dae4}.ra .a-glasarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}.ra .a-glasarten a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);height:100%;background:#fff;text-decoration:none;transition:box-shadow .2s}.ra .a-glasarten a:hover{box-shadow:0 0 0 2px var(--tinte)}.ra .a-glas-bild{position:relative;overflow:hidden;min-height:250px}.ra .a-glas-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%)}.ra .a-glas-text{display:flex;flex-direction:column;gap:10px;padding:28px 28px 24px 14px}.ra .a-glas-nr{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--leise)}.ra .a-glas-text .h3{font-size:clamp(22px,1.5vw,28px);letter-spacing:-.04em}.ra .a-glas-satz{font-size:15px;line-height:1.5;color:#33415a}.ra .a-glas-mehr{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:15px;font-weight:800;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:6px}

/* Ideen: Raster, Küche groß, Schild mit schräger Kante, letzte Kachel Nachtblau */.ra .a-ideen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(190px,15vw,290px);gap:16px}.ra .a-ideen li{position:relative;overflow:hidden;background:var(--flaeche)}.ra .a-ideen li.gross{grid-column:span 2;grid-row:span 2}.ra .a-ideen a{position:absolute;inset:0;display:block;text-decoration:none}.ra .a-ideen img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.ra .a-ideen a:hover img{transform:scale(1.04)}.ra .a-idee-schild{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:12px;padding:12px 34px 12px 18px;background:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}.ra .a-idee-name{font-size:18px;font-weight:800;letter-spacing:-.02em}.ra .gross .a-idee-name{font-size:26px}.ra .a-idee-zahl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}.ra .a-ideen-alle{background:var(--tief)!important}.ra .a-ideen-alle a{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:28px 28px 26px;color:#fff}.ra .a-ideen-zahl{font-size:clamp(64px,5.6vw,108px);font-weight:800;line-height:.8;letter-spacing:-.06em;color:var(--orange)}.ra .a-ideen-alle a>span:nth-child(2){font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.025em}.ra .a-ideen-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:16px;font-weight:800;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:6px}

/* Konfigurator: Nachtblau tief, Keil vor dem Titel */.ra .a-planung{position:relative;overflow:hidden;padding:var(--abschnitt) 0;background:var(--tief);color:#fff}.ra .a-planung-innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}.ra .a-planung .h2{margin-bottom:44px}.ra .a-schritte{display:grid;gap:0;margin:0 0 44px;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.16)}.ra .a-schritte li{display:grid;grid-template-columns:64px minmax(0,1fr);padding:20px 0;border-bottom:1px solid rgba(255,255,255,.16)}.ra .a-schritte span{font-size:28px;font-weight:800;line-height:1;color:var(--orange)}.ra .a-schritte h3{margin-bottom:4px;font-size:20px;letter-spacing:-.02em}.ra .a-schritte p{color:var(--auf-nacht);font-size:15.5px}.ra .a-planung-knoepfe{margin:0 0 40px}.ra .a-direkt{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.ra .a-direkt a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-size:15px;font-weight:700;text-decoration:none}.ra .a-direkt a:hover{border-color:var(--orange);background:rgba(242,136,75,.12)}.ra .a-planung-hinweis{font-size:14px;color:var(--auf-nacht)}.ra .a-planung-bild{position:relative;margin:0;padding:14px;background:#fff}.ra .a-planung-bild img{width:100%;height:auto}.ra .a-planung-bild figcaption{padding:14px 4px 2px;font-size:14px;font-weight:600;color:var(--leise)}.ra .a-planung-bild::before{content:"";position:absolute;right:-14px;top:-14px;width:120px;height:14px;background:var(--orange);clip-path:polygon(calc(14px * .325) 0,100% 0,100% 100%,0 100%)}

/* Ablauf */.ra .a-ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none}.ra .a-ablauf li{position:relative;padding-top:26px;border-top:2px solid var(--tinte)}.ra .a-ablauf-nr{display:block;margin-bottom:22px;font-size:clamp(48px,4vw,72px);font-weight:800;line-height:.9;letter-spacing:-.05em}.ra .a-ablauf-nr::after{content:"";display:inline-block;width:.1em;height:.62em;margin-left:.12em;background:var(--orange);transform:skewX(-18deg)}.ra .a-ablauf h3{margin-bottom:10px;font-size:21px;letter-spacing:-.025em}.ra .a-ablauf p{font-size:15.5px;color:#33415a}

/* Wissen und Fragen */.ra .a-wissen{border-top:1px solid var(--linie)}.ra .a-wissen-innen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}.ra .a-wissen .h2{margin-bottom:32px}.ra .a-wissen-links{display:grid;gap:2px}

/* Betrieb */.ra .a-betrieb{background:var(--flaeche)}.ra .a-betrieb-innen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.7fr);gap:80px;align-items:start}.ra .a-betrieb .h2{margin-bottom:28px}.ra .a-betrieb-text{max-width:64ch;margin-bottom:44px;font-size:18px;line-height:1.6;color:#33415a}.ra .a-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0}.ra .a-fakten div{padding-top:18px;border-top:2px solid var(--tinte)}.ra .a-fakten dt{margin-bottom:8px;font-size:clamp(30px,2.4vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1}.ra .a-fakten dd{margin:0;font-size:15px;color:#33415a}.ra .a-kontakt{position:relative;padding:36px;background:var(--tief);color:#fff;font-style:normal}.ra .a-kontakt::before{content:"";position:absolute;left:0;top:0;width:120px;height:8px;background:var(--orange);clip-path:polygon(0 0,100% 0,calc(100% - 8px * .325) 100%,0 100%)}.ra .a-kontakt-firma{margin-bottom:22px;font-size:18px;font-weight:800;line-height:1.45}.ra .a-kontakt-tel{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:none}.ra .a-kontakt-tel svg{color:var(--orange)}.ra .a-kontakt-mail{display:inline-block;margin-bottom:18px;color:#fff;font-weight:700;text-underline-offset:4px}.ra .a-kontakt p:last-child{font-size:14.5px;color:var(--auf-nacht)}


/* ---------- Kategorieseite A ---------- */.ra .a-kat-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,620px);align-items:end;gap:24px 72px;padding-top:44px;padding-bottom:44px}.ra .a-kat-titel{position:relative;font-size:clamp(48px,5vw,96px);line-height:.92;letter-spacing:-.055em;white-space:nowrap}.ra .a-kat-titel::before{content:"";display:inline-block;width:var(--keil-max);height:.72em;margin-left:calc(-1 * var(--keil-max) - var(--luft-keil));margin-right:var(--luft-keil);background:var(--orange);clip-path:polygon(0 0,100% 0,calc(100% - .72em * var(--schraeg)) 100%,0 100%)}.ra .a-kat-titel::after{content:"";display:inline-block;width:.12em;height:.72em;margin-left:.15em;background:var(--orange);transform:skewX(-18deg)}.ra main:has(.a-kat-titel){overflow:hidden}.ra .a-kat-intro{font-size:17.5px;line-height:1.6;color:#33415a}.ra .a-mass{padding:36px 0 30px;background:var(--flaeche)}.ra .a-mass-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-bottom:22px}.ra .a-mass-kopf p{font-size:15px;color:var(--leise)}.ra .a-mass-form{display:grid;grid-template-columns:1.3fr 1fr 1.2fr .8fr .8fr .8fr 1.1fr auto;gap:14px;align-items:end}.ra .a-mass-form .k-blau{min-height:52px}.ra .a-mass-fuss{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:16px;font-size:14px;color:var(--leise)}.ra .a-mass-fuss strong{color:var(--tinte)}.ra .a-produkte{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}.ra .a-filter{position:sticky;top:calc(var(--t-kopf-h,0px) + 20px);display:grid;gap:26px}.ra .a-filter-titel{font-size:22px;font-weight:800;letter-spacing:-.025em;padding-bottom:12px;border-bottom:2px solid var(--tinte)}.ra .a-filter .filter-gruppe legend{position:relative;margin-bottom:8px;padding-top:16px}.ra .a-filter .filter-gruppe legend::before{content:"";position:absolute;left:0;top:0;width:34px;height:5px;background:var(--orange);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}.ra .a-filter-zurueck{justify-self:start;min-height:40px;font-size:14.5px;font-weight:700;text-decoration:underline;text-underline-offset:4px;color:var(--leise)}.ra .a-produkte-kopf{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--linie)}.ra .a-produkte-kopf p{font-size:15px;font-weight:600;color:var(--leise)}.ra .a-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.ra .a-produkt{display:flex;flex-direction:column;border:1px solid var(--linie);background:#fff;transition:border-color .2s}.ra .a-produkt:hover{border-color:var(--tinte)}.ra .a-produkt-bild{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:var(--flaeche)}.ra .a-produkt-bild img{width:100%;height:100%;object-fit:cover}.ra .a-produkt-text{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 22px 22px}.ra .a-produkt h3{font-size:20px;letter-spacing:-.03em}.ra .a-produkt h3 a{text-decoration:none}.ra .a-produkt h3 a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px}.ra .a-produkt-fuss{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linie)}.ra .a-produkt-fuss .k-blau{min-height:46px;padding:0 18px;font-size:15px}.ra .a-fakten-abschnitt{background:var(--flaeche)}.ra .a-zwei{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px;align-items:start}.ra .a-zwei .h2{margin-bottom:24px}.ra .a-zwei-text{margin-bottom:32px;font-size:16.5px;color:#33415a}.ra .a-tabelle{width:100%;border-collapse:collapse;background:#fff;border-top:2px solid var(--tinte)}.ra .a-tabelle th,.ra .a-tabelle td{padding:16px 22px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}.ra .a-tabelle th{width:190px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding-top:19px}.ra .a-tabelle td{font-size:16px;font-weight:600}.ra .a-ratgeber{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px}.ra .a-ratgeber article{position:relative;padding-top:22px}.ra .a-ratgeber article::before{content:"";position:absolute;left:0;top:0;width:34px;height:5px;background:var(--orange);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}.ra .a-ratgeber h3{margin-bottom:12px;font-size:22px;letter-spacing:-.03em}.ra .a-ratgeber p{font-size:16px;line-height:1.6;color:#33415a}.ra .a-einsatz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.ra .a-einsatz li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);background:#fff}.ra .a-einsatz figure{position:relative;margin:0;min-height:220px;overflow:hidden}.ra .a-einsatz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ra .a-einsatz li>div{display:flex;flex-direction:column;gap:10px;padding:24px}.ra .a-einsatz h3{font-size:21px;letter-spacing:-.03em}.ra .a-einsatz p{font-size:15px;color:#33415a}.ra .a-einsatz .link-alle{margin-top:auto}.ra .a-vergleich{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:28px}.ra .a-vergleich a{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px;border-top:2px solid var(--tinte);background:var(--flaeche);text-decoration:none;font-size:15px;color:#33415a}.ra .a-vergleich .h3{display:flex;align-items:center;gap:8px;color:var(--tinte)}.ra .a-vergleich a:hover{background:#e3e8ef}.ra .a-weitere{display:flex;flex-wrap:wrap;gap:10px}.ra .a-weitere a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid #c3ccd8;font-size:14.5px;font-weight:700;text-decoration:none}.ra .a-weitere a:hover{border-color:var(--tinte)}.ra .a-beratung{position:relative;overflow:hidden;padding:72px 0;background:var(--tief);color:#fff}.ra .a-beratung-innen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center}.ra .a-beratung .h2{margin-bottom:14px}.ra .a-beratung p{color:var(--auf-nacht);font-size:17px}.ra .a-beratung-wege{display:flex;gap:16px;flex-wrap:wrap}.ra .a-beratung-wege a{display:flex;align-items:center;gap:14px;min-height:72px;padding:0 28px;border:1.5px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.03em}.ra .a-beratung-wege a:hover{border-color:var(--orange)}.ra .a-beratung-wege svg{color:var(--orange)}.ra .a-beratung-wege small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--auf-nacht)}

/* ---------- schmalere Bildschirme ---------- */
@media (max-width:1500px){.ra .a-bereiche{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px}.ra .a-bereich{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:start}.ra .a-bereich-bild{grid-row:span 6;margin:0;aspect-ratio:auto;min-height:100%}.ra .a-glasarten{grid-template-columns:repeat(2,minmax(0,1fr))}.ra .a-einsatz{grid-template-columns:repeat(2,minmax(0,1fr))}.ra .a-produkte{grid-template-columns:230px minmax(0,1fr);gap:40px}.ra .a-raster{gap:20px}.ra .a-produkt-text{padding:18px}.ra .a-mass-form{grid-template-columns:repeat(4,minmax(0,1fr))}.ra .a-mass-form .k-blau{grid-column:span 1}
}
@media (max-width:1279px){.ra .a-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1099px){.ra .kopfzeile{grid-template-columns:1fr}.ra .a-held-innen{grid-template-columns:1fr;min-height:0}.ra .a-held-text{padding:48px 0 40px}.ra .a-held-bild{margin:0 calc(-1 * var(--rand));height:380px}.ra .a-held-bild img{clip-path:polygon(0 46px,100% 0,100% 100%,0 100%)}.ra .a-vorteile-liste{grid-template-columns:repeat(2,minmax(0,1fr))}.ra .a-vorteile-liste>li:nth-child(3){padding-left:0;border-left:0}.ra .a-vorteile-liste>li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}.ra .a-versand-innen{grid-template-columns:minmax(0,1fr)}.ra .a-vertrauen{grid-template-columns:repeat(3,minmax(0,1fr));padding:28px 0 0;border-left:0;border-top:1px solid #d3dae4}.ra .a-planung-innen,.ra .a-wissen-innen,.ra .a-betrieb-innen,.ra .a-zwei{grid-template-columns:1fr;gap:48px}.ra .a-ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}.ra .a-ratgeber{grid-template-columns:repeat(2,minmax(0,1fr))}.ra .a-glasarten a{grid-template-columns:minmax(0,1fr)}.ra .a-glas-bild{min-height:200px}.ra .a-glas-bild img{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}.ra .a-glas-text{padding:20px}.ra .a-vergleich{grid-template-columns:repeat(2,minmax(0,1fr))}.ra .a-produkte{grid-template-columns:1fr}.ra .a-filter{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.ra .a-filter-titel,.ra .a-filter-zurueck{grid-column:1 / -1}.ra .a-kat-kopf{grid-template-columns:1fr}.ra .a-beratung-innen{grid-template-columns:1fr}
}
@media (max-width:760px){.ra .a-bereiche,.ra .a-glasarten,.ra .a-raster,.ra .a-einsatz,.ra .a-ablauf,.ra .a-ratgeber,.ra .a-vergleich,.ra .a-fakten{grid-template-columns:minmax(0,1fr)}.ra .a-bereich{display:flex}.ra .a-bereich-bild{grid-row:auto;min-height:0;aspect-ratio:4/3;margin-bottom:20px}.ra .a-glasarten a,.ra .a-einsatz li{grid-template-columns:minmax(0,1fr)}.ra .a-glas-bild,.ra .a-einsatz figure{min-height:200px}.ra .a-glas-bild img{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}.ra .a-glas-text{padding:20px}.ra .a-vorteile-liste{grid-template-columns:minmax(0,1fr)}.ra .a-vorteile-liste>li{padding:22px 0!important;border-left:0!important}.ra .a-vorteile-liste>li+li{border-top:1px solid rgba(255,255,255,.14)}.ra .a-vertrauen{grid-template-columns:minmax(0,1fr)}.ra .a-ideen{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:160px}.ra .a-ideen-alle a{padding:18px}.ra .a-filter{grid-template-columns:minmax(0,1fr)}.ra .a-mass-form{grid-template-columns:1fr 1fr}.ra .a-mass-form .feld-breit,.ra .a-mass-form .k-blau{grid-column:1 / -1}.ra .a-kat-titel{white-space:normal}.ra .a-tabelle th{width:120px;padding-left:14px}.ra .a-tabelle td{padding-left:14px;padding-right:14px}.ra .a-beratung-wege a{font-size:20px;width:100%}
}

/* Bildausschnitte aus den Daten (baue-startseite.mjs) */
.ra .pos-links{object-position:left center}
.ra .st-bild-oben{object-position:center top}
/* KI-Kennzeichnung auf Konzeptbildern (im Entwurf aus dem Kopfstilblatt) */
/* Handy (17.10.2026): Ideenkacheln sind dort 160 px hoch und rund 180 px breit. Schild zweizeilig (Name über Zahl), sonst bricht
   die Zahl mitten im Schild um; die Abschlusskachel kleiner, sonst schneidet die Kachel die große 58 oben ab. */
@media (max-width:760px){
  .ra .a-idee-schild{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 26px 8px 12px}
  .ra .a-idee-name{font-size:16px;line-height:1.15}
  .ra .a-idee-zahl{font-size:10.5px;line-height:1.2}
  .ra .a-ideen-alle a{gap:6px;padding:16px}
  .ra .a-ideen-zahl{font-size:44px}
  .ra .a-ideen-alle a>span:nth-child(2){font-size:15px}
  .ra .a-ideen-link{font-size:14.5px;text-underline-offset:5px}
}
@media (max-width:400px){
  .ra .a-ideen{grid-auto-rows:170px}
  .ra .a-ideen-alle a{padding:12px}
  .ra .a-ideen-zahl{font-size:36px}
  .ra .a-ideen-alle a>span:nth-child(2){font-size:14px}
  .ra .a-ideen-link{font-size:13.5px}
}

/* Tastatur und Touch: Textlinks der Startseite behalten eigenständige Bedienflächen. */
.ra .a-held-runter,.ra .a-vorteile a,.ra .a-bereich h3 a,.ra .a-direkt a,.ra .a-planung-hinweis a,.ra .a-kontakt-tel,.ra .a-kontakt-mail{display:inline-flex;align-items:center;min-height:44px}