@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(assets/font-4.woff2) format('woff2'),url(assets/font-4.ttf) format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(assets/font-5.woff2) format('woff2'),url(assets/font-5.ttf) format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(assets/font-6.woff2) format('woff2'),url(assets/font-6.ttf) format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(assets/font-7.woff2) format('woff2'),url(assets/font-7.ttf) format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(assets/font-8.woff2) format('woff2'),url(assets/font-8.ttf) format('truetype')}
:root{--t-ink:#142a4c;--t-paper:#f4f6f9;--t-sage:#d3dae4;--t-muted:#5a6678;--t-line:#cfd7e1;--t-white:#fff;--t-accent:#142a4c;font-family:Manrope,Arial,sans-serif;color:var(--t-ink);background:var(--t-paper);font-synthesis:none;line-height:1.6}
*{box-sizing:border-box}body{margin:0;background:var(--t-paper);color:var(--t-ink)}


/* EU-Mitteilung zur gesetzlichen Gewährleistung als Zeile in der Kopfleiste
   (Pflicht ab 27.09.2026, EU-Leitlinie: Satz im Seitenkopf, Mitteilung auf
   den ersten Klick). Die Zeile sitzt rechts in der Leiste; geöffnet schiebt
   die Mitteilung die Seite nach unten, statt sie zu überdecken. */





















/* G3 24.09.2026: markiert wird die offene Rubrik (aria-current, gesetzt in menue.mjs), nicht mehr immer "Mein Konto". */


footer.t-footer{display:block;padding:60px 5% 22px;background:#d7dce3;color:var(--t-ink);font:400 14px/1.6 Manrope,Arial,sans-serif;border:0}
.t-footer-grid,.t-legal,.t-footer-bottom{max-width:1404px;margin-inline:auto}.t-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}.t-footer h2{font-size:16px;font-weight:600;line-height:1.4;margin:5px 0 14px;letter-spacing:-.02em}.t-footer p{margin:20px 0;font-size:14px}.t-footer a:hover{text-decoration:underline;text-underline-offset:5px}.t-legal{display:flex;gap:8px 28px;flex-wrap:wrap;border-top:1px solid #142a4c30;margin-top:36px;padding-top:16px}.t-legal a{font-size:12px!important}.t-footer-bottom{display:flex;justify-content:space-between;gap:15px;padding-top:18px;font-size:10px;letter-spacing:.12em}
.t-preview a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px}.t-preview{max-width:none;margin:0;background:#e4e9f0;color:var(--t-ink);padding:10px 5%;font:400 12px/1.6 Manrope,Arial,sans-serif;text-align:center;border-bottom:1px solid var(--t-line)}
.t-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t-muted)}
/* Karte 48: Kennzeilen mit ß (server/kennzeile.mjs) ohne Großschreibung, sonst stünde dort MASS statt Maß. */
.t-eyebrow.t-eyebrow-gemischt{text-transform:none;letter-spacing:.04em}
.t-footer a:focus-visible{outline:3px solid #a2480a;outline-offset:4px}

/* Paket V32: Handy und Tablet siehe Kopf Variante B am Dateiende (bis 1099 px Schublade statt Kategorienzeile). */
@media(max-width:780px){.t-footer-grid{grid-template-columns:1fr 1fr}.t-footer-grid>div:first-child{grid-column:1/-1}.t-footer{padding-top:38px!important}}
@media(max-width:430px){.t-footer-grid{grid-template-columns:1fr;gap:24px}.t-footer-grid>div:first-child{grid-column:auto}.t-legal{gap:0 20px}.t-footer-bottom{flex-wrap:wrap}.t-preview{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{.t-footer,.t-preview{display:none!important}}

.t-phone{display:flex;align-items:center;min-height:44px;font-size:14px}
/* Mindestschrift 12 px (Vollprüfung 24.09.2026, W07). */

.t-eyebrow{font-size:12px}
.t-preview{font-size:12px}
@media(max-width:430px){.t-preview{font-size:12px}}
/* 18.10.2026: Hinweise raus. Die Vorschauzeile ist auch in der geschützten Vorschau unsichtbar.
   Das Markup bleibt als Marke für public/vorgang.mjs, im Verkaufsbetrieb nimmt der Server die Zeile ganz heraus. */
p.t-preview{display:none}
.t-footer-bottom{font-size:12px}
/* Nachmessung 24.09.2026: "AGB" war mit 23 px das einzige Bedienziel unter 24 px Breite.
   G3 24.09.2026: statt 44 px Mindestbreite mit mittigem Text (ungleiche Abstände um "AGB") bekommt jeder Rechtslink
   6 px Innenabstand links und rechts, den ein gleich großer negativer Außenabstand ausgleicht. Die Schrift steht in
   gleichmäßigen Abständen, jede Klickfläche ist 12 px breiter als ihr Wort ("AGB": 35 px). */
.t-legal a{padding-inline:6px;margin-inline:-6px}
/* 19.10.2026: keine sichtbaren KI-Bild-Schilder; Herkunft in assets/PROMPTS.json. */

/* Kontaktleiste (Paket V19, 03.10.2026): eigene Zeile unter dem Leitsatz, wie im bisherigen Shop. Bricht um statt
   abzuschneiden; unter 621 px stehen die drei Kontaktlinks als Zeichen, die Beschriftung bleibt hörbar.
   Schrift und Unterstreichung wie "Deine Gewährleistungsrechte" (25.09.2026). */










/* Fuß: Zugang zur Verwaltung, dezent neben dem Schriftzug. Die Verwaltung selbst verlangt die Anmeldung. */
.t-footer-rechts{display:inline-flex;gap:28px;align-items:center}
.t-verwaltung{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:24px}
/* Die allgemeine Fußlink-Regel (14 px, 44 px hoch) gilt hier nicht: die Zeile bleibt klein und auf einer Linie. */
.t-footer-bottom{align-items:center}
.t-footer .t-footer-bottom a.t-verwaltung{display:inline-flex;min-height:44px;font-size:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}

/* Paket V32 (04.10.2026): Seitenkopf Variante B "Konfigurator zuerst". Hauptzeile: Logo, Konfigurator, Glasfinder,
   Suche, Konto, Warenkorb. Darunter die Kategorienzeile mit Aufklappmenü (details.t-kat-auf), bis 1099 px die
   Schublade (details.t-menu). Klebend und kompakt nur mit kopf.mjs und nur ohne eigene klebende Leisten der Seite. */
.t-nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


.t-knopf{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border:2px solid var(--t-ink);border-radius:4px;background:var(--t-ink);color:var(--t-paper);font:700 15px/1.2 Manrope,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.t-knopf:hover{background:#0d1e38}.t-knopf-hell{background:transparent;color:var(--t-ink)}.t-knopf-hell:hover{background:#e4e7ec}
.t-knopf[aria-current="page"]{box-shadow:0 0 0 2px var(--t-paper),0 0 0 4px var(--t-ink)}







.t-vs-gruppe{padding:6px 0;border-bottom:1px solid var(--t-line)}
.t-vs-titel{display:flex;justify-content:space-between;margin:8px 16px 4px;font:700 10px/1.4 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}


.t-vs-bild{flex:none;width:44px;height:44px;background:#eceef2;overflow:hidden}.t-vs-bild img{display:block;width:44px;height:44px;object-fit:cover}
.t-vs-text{display:flex;flex-direction:column;flex:1;min-width:0}.t-vs-name{font:600 14px/1.3 Manrope,Arial,sans-serif;overflow-wrap:anywhere}.t-vs-familie{font-size:12px;color:var(--t-muted)}
.t-vs-name mark{background:#d9dee6;color:inherit;padding:0 1px}
.t-vs-preis{flex:none;max-width:42%;text-align:right;font:700 12px/1.3 Manrope,Arial,sans-serif}
a.t-vs-alle{justify-content:space-between;font:700 14px/1.3 Manrope,Arial,sans-serif}
.t-vs-leer{margin:0;padding:18px 16px;font-size:14px;color:var(--t-muted)}
































/* Runde 55: Kontaktleiste klebt über dem Kopf (unter dessen Menüs und Schublade); offen scrollt der Gewährleistungshinweis mit. */




@media(max-width:1280px){.t-knopf{padding:0 16px;font-size:14px}}
@media(max-width:1099px){










.t-knopf{min-height:48px;justify-content:center;white-space:normal;text-align:left}

}
@media(max-width:420px){.t-knopf{padding:0 10px;gap:8px;font-size:13px}.t-vs-preis{max-width:36%}}


/* Paket V36 (04.10.2026): Kopf 1 "Leicht und vertraut" (Vorlage kopf-fuss-filigran-2026-10-04/empfehlung.html, filigran.css).
   Ersetzt das Aussehen von V32 Kopf B, Verhalten bleibt (kopf.mjs, menue.mjs). Eine helle Servicezeile (32 px) statt zwei
   dunkler Leisten, Hauptzeile 72 px, Sortimentszeile 44 px, Haarlinien statt Rahmen, Zeichen 19 px mit Strich 1,4. */

























































/* V36: Bedienziele mindestens 44 px hoch (Hausregel, tests/pruefe.mjs und pruefe-start.mjs), ohne das feine Bild zu
   ändern: die Fläche wächst unsichtbar nach oben und unten, ein gleich großer negativer Außenabstand hält die Zeilen. */








/* Bei 320 px mindestens 8 px Abstand zur Telefonnummer, auch mit Subpixel-Schriftmaßen. */

/* Abgleich 11.10.2026 (S16): E-Mail und Servicezeiten in der Servicezeile (shell.mjs SERVICEZEILE). Sie bleibt eine Zeile
   und klebt nicht. Wo der Platz nicht reicht, fallen die Servicezeiten weg (sie stehen auch im Fuß); am Handy steht die
   E-Mail nur als Zeichen, die Adresse bleibt als Textalternative vorlesbar. Grenzen am 12.10.2026
   im Browser gemessen (die Servicezeiten brauchen rund 240 px). */








/* Unter 370 px reicht die Zeile nur für Telefonnummer und Gewährleistungsknopf (kopfleiste-320-browser.test.mjs); die E-Mail steht dann im Fuß. */

/* Warenkorb-Vorschau (06.10.2026): klappt beim Überfahren mit der Maus und bei Tastaturfokus unter dem Warenkorb-Zeichen
   auf (korb-vorschau.mjs). Rechtsbündig unter den Zeichen, nie breiter als der Bildschirm; die Liste scrollt senkrecht,
   Warenwert und "Zum Warenkorb" bleiben sichtbar. Die unsichtbare Brücke (::before) schließt den Spalt zum Zeichen.
   18.10.2026: KOPF-98 (tools/kopfregeln-entfernen.py, Muster ".t-korb…" und ".t-symbol…") hatte die Fensterregeln mit
   den alten Kopfregeln gestrichen, das Fenster stand dadurch ungestylt mitten in der Kopfzeile. Wieder eingesetzt im
   Stil des Kopfs 9.8: eckig, Schatten wie das Großmenü, "Zum Warenkorb" Leitblau wie "Glas konfigurieren". */
.t-symbole.t-mit-korbvorschau{position:relative}
.t-korb-vorschau{position:absolute;z-index:75;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 24px));padding:16px 18px 18px;background:#fff;border:1px solid var(--k-linie,#dde3ea);border-top:3px solid var(--k-tinte,#142a4c);box-shadow:0 40px 60px -30px rgba(13,30,56,.32);color:var(--k-tinte,#142a4c);text-align:left;text-transform:none;font:500 13.5px/1.4 Manrope,Arial,sans-serif;letter-spacing:0}
.t-korb-vorschau[hidden]{display:none}
.t-korb-vorschau::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.t-korb-vorschau p{margin:0}
.t-kv-titel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--t-line);font:700 14px/1.3 Manrope,Arial,sans-serif}
.t-kv-anzahl{font:500 12.5px/1.3 Manrope,Arial,sans-serif;color:var(--t-muted)}
.t-kv-leer{padding:14px 0 4px;color:var(--t-muted)}
.t-kv-liste{max-height:min(46vh,336px);margin:0;padding:0;list-style:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.t-kv-zeile{display:flex;align-items:flex-start;gap:12px;margin:0;padding:10px 0;border-bottom:1px solid var(--t-line)}
.t-kv-bild{flex:none;width:48px;height:48px;background:#eceef2;border-radius:2px;overflow:hidden}
.t-kv-bild img{display:block;width:48px;height:48px;object-fit:cover}.t-kv-zeichnung img{object-fit:contain;padding:3px}
.t-kv-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.t-kv-name{font:600 13.5px/1.3 Manrope,Arial,sans-serif;overflow-wrap:anywhere}
.t-kv-menge,.t-kv-richtwert{font-size:12px;color:var(--t-muted)}
.t-kv-preis{flex:none;max-width:40%;text-align:right;font:700 13px/1.3 Manrope,Arial,sans-serif;white-space:nowrap}
.t-kv-preis-offen{white-space:normal;font-weight:600;font-size:12px;color:var(--t-muted)}
.t-kv-summe{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font:700 14px/1.3 Manrope,Arial,sans-serif}
.t-kv-betrag{text-align:right}
.t-kv-klein{padding-top:4px;font-size:12px;color:var(--t-muted)}
.t-korb-vorschau a.t-kv-knopf{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:14px;padding:0 22px;background:var(--k-blau,#154e8a);color:#fff;font:800 15px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.005em;text-decoration:none}
.t-korb-vorschau a.t-kv-knopf:hover{background:var(--k-blau-tief,#0f3c6b)}
.t-korb-vorschau a.t-kv-knopf:focus-visible{outline:2px solid var(--k-blau,#154e8a);outline-offset:3px}

/* Konfigurator-Weiche (08.10.2026): Hinweis, dass ein Konfigurator noch im bisherigen Shop läuft (server/konfigurator-weiche.mjs) */
.k-altshop-liste{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.k-altshop-hinweis{margin:10px 0 0;font-size:13px;line-height:1.5;max-width:46ch}
.k-altshop-liste>.k-altshop-hinweis{margin:0}
.k-altshop-band{max-width:none;margin:0;background:#e4e9f0;color:var(--t-ink);padding:12px 5%;font:500 14px/1.6 Manrope,Arial,sans-serif;text-align:center;border-bottom:1px solid var(--t-line)}
.k-altshop-band a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
/* Karte #62: Hinweis vor dem neuen Tab in den bisherigen Shop (altshop-hinweis.mjs), Gestaltung wie der Kontakt-Dialog. */
dialog.k-altshop-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;padding:24px 28px 28px;width:min(520px,calc(100% - 32px));max-width:none;height:fit-content;max-height:calc(100dvh - 32px);overflow:auto;border:0;border-top:4px solid var(--t-ink);background:#fff;color:var(--t-ink);font:500 15px/1.6 Manrope,Arial,sans-serif;text-align:left}
.k-altshop-dialog::backdrop{background:rgba(13,30,56,.62)}
.k-altshop-dialog h2{margin:0 0 10px;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.03em}
.k-altshop-dialog p{margin:0 0 22px;overflow-wrap:anywhere}
.k-altshop-dialog-wege{display:flex;flex-wrap:wrap;gap:12px}
.k-altshop-dialog-wege>*{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:2px solid #154e8a;border-radius:4px;font:700 15px/1.2 Manrope,Arial,sans-serif;text-decoration:none;cursor:pointer}
.k-altshop-weiter{background:#154e8a;color:#fff}
.k-altshop-weiter:hover{background:#0f3d6e;border-color:#0f3d6e}
.k-altshop-abbrechen{background:#fff;color:var(--t-ink);border-color:var(--t-line)}
.k-altshop-abbrechen:hover{background:#e4e7ec}
.k-altshop-dialog :is(a,button):focus-visible{outline:2px solid #154e8a;outline-offset:3px}
@media(max-width:400px){dialog.k-altshop-dialog{padding:18px 20px 22px}.k-altshop-dialog h2{font-size:23px}.k-altshop-dialog-wege>*{flex:1 1 100%}}

/* 54-BLAU: Ein Leitton für Vorwärts-Aktionen im Kaufweg. */
:root{--gc-active:#154e8a}

/* Richtung A (17.10.2026): Titel auf allen übrigen Inhaltsseiten fett wie Kopf, Startseite und Kategorieseiten, der große
   Seitentitel mit orangem Schrägstrich (nicht bei Artikelnamen). Konfigurator (.gc-page) und Seiten mit eigenem A-Stil
   (.ra, .lp-body) bleiben unberührt. Die ID hebt die Regel über die seitenweisen Titelregeln mit Gewicht 500. */
:is(#inhalt,#main):not(.ra,.lp-body,.gc-page) h1,html body main>.intro h1,html body main>.intro>div>h1{font-weight:800;letter-spacing:-.05em}
:is(#inhalt,#main):not(.ra,.lp-body,.gc-page) h2:not(.t-vh){font-weight:800;letter-spacing:-.035em}
:is(#inhalt,#main):not(.ra,.lp-body,.gc-page,.p1-main) h1::after,html body main>.intro>div>h1::after{content:"/";margin-left:.03em;color:var(--k-orange,#f2884b)}