/* Selbst gehostete Montage-Videos (build/eigene-videos.mjs). Seitenverhaeltnis
   aus width/height des <video>, die Videos sind nicht alle 16:9. */
.eigenes-video { margin: 8px 0 20px; max-width: 860px; }
.eigenes-video video { display: block; width: 100%; height: auto; background: var(--ink); border-radius: var(--radius); }
.eigenes-video figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.video-schritte { margin: 0 0 8px; padding-left: 22px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 860px; }
.video-schritte li::marker { color: var(--bronze-deep); font-weight: 600; }
.montage-sektion { padding: 64px 24px; border-bottom: 1px solid var(--line); }
.montage-inner { max-width: 1180px; margin: 0 auto; }
.montage-text { max-width: 62ch; margin: -8px 0 24px; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.montage-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; align-items: start; }
.montage-raster.eins { grid-template-columns: minmax(0, 1fr); }
.montage-raster.eins .montage-video { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; }
.montage-video .eigenes-video { margin: 0; }
.montage-schritte h3 { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.montage-raster:not(.eins) .montage-schritte { margin-top: 16px; }
/* Stufen- und Konsolenseite: Schritte direkt unter dem Video, ohne Raster (montageVideo in stufen-inhalt.mjs). Im Raster (.montage-video) gilt diese Regel nicht. */
:not(.montage-video) > .eigenes-video + .montage-schritte { max-width: 860px; margin: 0 0 24px; }
@media (max-width: 860px) {
  .montage-raster, .montage-raster.eins .montage-video { grid-template-columns: minmax(0, 1fr); }
  .montage-sektion { padding: 48px 16px; }
}
/* Hoehen der Bedienelemente im Shop (AN 28.09.2026: "die Buttons sind viel zu
   hoch", Vorbild der Konfigurator von kragarmtreppen24: Wahlknoepfe 26 px,
   Eingaben 32 bis 38 px). Mit Maus kompakt; mit dem Finger (pointer: coarse)
   bleibt jede Tippflaeche 44 px hoch (AGENTS.md Abschnitt 8). Eingaben
   behalten 16 px Schrift, darunter zoomt iOS beim Antippen. */
:root { --shop-wahl-h: 32px; --shop-feld-h: 36px; --shop-knopf-h: 36px; --shop-haupt-h: 40px; }
@media (pointer: coarse) { :root { --shop-wahl-h: 44px; --shop-feld-h: 44px; --shop-knopf-h: 44px; --shop-haupt-h: 44px; } }
.produkt-block { background: var(--white); padding: 72px 24px; border-bottom: 1px solid var(--line); }
.produkt-block.hell { background: var(--cream-light); }
/* Zwei Zeilen links (Text, Bild), das Formular rechts ueber beide. Die zweite
   Zeile nimmt den Rest der Formularhoehe auf - sonst verteilt das Raster sie auf
   beide Zeilen, und zwischen Text und Bild klafft eine Luecke (Browsertest 22.09.). */
.produkt-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto 1fr; grid-template-areas: "text karte" "bild karte"; gap: 32px 56px; align-items: start; }
.produkt-text { grid-area: text; }
.produkt-text .section-title { margin-bottom: 20px; }
.produkt-text p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; max-width: 62ch; }
.produkt-punkte { list-style: none; margin: 18px 0 0; display: grid; gap: 8px; }
.produkt-punkte li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.produkt-punkte li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 12px; height: 2px; background: var(--bronze); }
.produkt-verweis { font-size: 14px; color: var(--ink-mute); margin-top: 18px !important; }
.produkt-verweis a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.produkt-bild { grid-area: bild; margin: 0; }
.produkt-bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.produkt-bild figcaption { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; padding-top: 10px; }
.produkt-karte { grid-area: karte; background: var(--cream-light); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 26px; box-shadow: var(--shadow-soft); }
.produkt-block.hell .produkt-karte { background: var(--white); }
.produkt-karte h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.produkt-karte .pf-unterzeile { font-size: 13px; color: var(--ink-mute); margin-bottom: 6px; }
/* Kopf des Positionsformulars dunkel mit Cognac-Linie (AN 27.09.2026: "das
   dunkle und das Braun" der Seite auch im Shop). Nur das Positionsformular,
   nicht die Karten der Uebersicht. */
form.produkt-karte { padding-top: 0; overflow: hidden; }
form.produkt-karte > h3:first-child { margin: 0 -24px 12px; padding: 14px 24px 13px; background: var(--tief); color: var(--cream-light); border-bottom: 3px solid var(--bronze); font-size: 17px; }
.pf-feld { margin-top: 16px; }
fieldset.pf-feld { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
fieldset.pf-feld > legend.pf-label { float: none; padding: 0; }
/* Felder des Positionsformulars in einem Raster: Ab 440 px Formularbreite
   (ohne Innenabstand) stehen halbe Felder (build/produkte.mjs, halb) paarweise
   nebeneinander, bei den Hohlstufen Form und Wandseite, Laenge und Tiefe,
   Staerke und Anzahl (Wunsch AN 25.09.2026: am Rechner kuerzer). Gemessen wird
   das Formular, nicht das Fenster: Neben der Zeichnung reicht der Platz ab etwa
   1.110 px Fensterbreite, am Tablet steht das Formular allein und breit genug.
   Schmaler bleibt alles untereinander: bei 1.024 px neben der Zeichnung (rund
   400 px), am Handy, in der Karte der Uebersicht (hoechstens 392 px) und in
   Browsern ohne Containerabfrage. 440 px, weil die laengste Beschriftung
   ("Wandseite, von vorn gesehen") 196 px braucht und eine halbe Spalte dann
   210 px hat - bei weniger bricht sie um und die Eingaben stehen versetzt. */
form.produkt-karte { container: formular / inline-size; }
.pf-felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; align-items: start; margin-top: 14px; }
.pf-felder > .pf-feld { margin: 0; }
/* Seit 27.09.2026 (AN: "am Handy zu lang, zwei in einer Reihe") stehen halbe
   Felder schon ab 260 px Formularbreite nebeneinander, also auch am Handy
   (Formular dort rund 326 px). Die Einheit sitzt im Feld (.pf-zahl), damit die
   Eingabe die halbe Spalte ganz nutzt. Unter 440 px darf eine Beschriftung
   zweizeilig werden; die Beschriftungen stehen dann unten buendig, damit die
   Eingaben eines Paars auf einer Linie liegen. */
@container formular (min-width: 260px) {
  .pf-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-felder > .pf-feld { grid-column: 1 / -1; }
  .pf-felder > .pf-halb { grid-column: auto; }
}
@container formular (min-width: 260px) and (max-width: 439px) {
  .pf-felder { gap: 12px 12px; }
  .pf-halb > .pf-label { display: flex; align-items: flex-end; min-height: 2.6em; line-height: 1.3; font-size: 13.5px; }
}
.korb-kopfzeile .korb-marke { vertical-align: middle; margin-left: 8px; }
.korb-kopfzeile .korb-marke:empty { display: none; }
.pf-feld[hidden] { display: none !important; }
.pf-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.pf-label .pflicht { color: var(--bronze-deep); }
.pf-hinweis { font-size: 12.5px; line-height: 1.45; color: var(--ink-mute); margin-top: 5px; }
.pf-warnung { font-size: 13px; line-height: 1.5; color: #6b2417; background: #f9e6e0; border-left: 3px solid #d9a695; padding: 6px 10px; margin-top: 6px; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.produkt-karte input[type="text"], .produkt-karte input[type="number"], .produkt-karte select { width: 100%; min-height: var(--shop-feld-h); border: 1px solid var(--rand-bedien); border-radius: var(--radius-klein); background: var(--white); font-family: inherit; font-size: 16px; color: var(--ink); padding: 8px 12px; }
.produkt-karte select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23A98457' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.produkt-karte input:focus-visible, .produkt-karte select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.produkt-karte input:user-invalid { border-color: #B4402F; }
/* Einheit im Feld rechts statt daneben: spart am Handy die halbe Zeile. */
.pf-zahl { position: relative; display: block; }
.pf-zahl input { width: 100%; padding-right: 52px !important; -moz-appearance: textfield; }
.pf-zahl input::-webkit-outer-spin-button, .pf-zahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-einheit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink-mute); pointer-events: none; }
.pf-wahl { display: flex; flex-wrap: wrap; gap: 5px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pf-wahl legend { padding: 0; }
.pf-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* Kompakt (AN 27.09.2026: "alle Buttons bisschen kleiner"): weniger Innenabstand
   und 13.5 px, damit mehr Knoepfe in eine Zeile passen. Die Hoehe kommt seit
   28.09.2026 aus --shop-wahl-h (oben): mit Maus 32 px, mit dem Finger 44 px. */
.pf-wahl label { display: inline-flex; align-items: center; min-height: var(--shop-wahl-h); padding: 4px 10px; border: 1px solid var(--rand-bedien); border-radius: var(--radius-klein); background: var(--white); font-size: 13.5px; line-height: 1.3; color: var(--ink); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.pf-wahl label:hover { border-color: var(--bronze); }
.pf-wahl input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 600; box-shadow: inset 0 -3px 0 var(--bronze); }
.pf-wahl input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Keramik-Dekore als Karten (Katalogkacheln, build/keramik-dekore.mjs): Kachel,
   darunter der Name. */
.pf-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
/* 37 Dekore standen am Handy auf 1.144 px untereinander (gemessen 27.09.2026).
   Jetzt eine Leiste zum Wischen: drei Reihen am Rechner, zwei am Handy. */
.pf-kacheln { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: 92px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--bronze) transparent; }
.pf-kacheln label { scroll-snap-align: start; }
@container formular (max-width: 439px) { .pf-kacheln { grid-template-rows: repeat(2, auto); grid-auto-columns: 86px; } }
.pf-kacheln label { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; min-width: 0; min-height: 0; padding: 4px; font-size: 11.5px; line-height: 1.25; text-align: center; }
/* Die Kacheln aus der Broschuere haben links und rechts einen schwarzen Rand von
   2 bis 3 von 600 Punkten; an der Karte stand er als dunkle Linie. inset 1 %
   blendet ihn aus (dasselbe macht KACHEL_RAND in stufen-3d.js fuer die 3D-Ansicht). */
.pf-kacheln label img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px; clip-path: inset(0 1% round 3px); }
.pf-kacheln label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.pf-haken input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); flex: none; }
.produkt-preis { margin-top: 20px; background: var(--cream-deep); border-left: 3px solid var(--bronze); border-radius: var(--radius-klein); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.produkt-karte .btn-primary { width: 100%; margin-top: 14px; border: 0; cursor: pointer; font-family: inherit; text-align: center; border-radius: var(--radius); min-height: var(--shop-haupt-h); padding-top: 9px; padding-bottom: 9px; }
/* Farbwelt 26.09.2026 (design-charakter.md): "Wichtige Aktionen stehen in Cognac
   mit heller Schrift. Uebrige Knoepfe sind anthrazit." Im Shop sind das "In den
   Anfragekorb", "Angebot anfordern" und "Anfrage absenden" (_teile.mjs). */
.btn-primary.anfrage-knopf { background: var(--bronze-deep); color: var(--white) !important; }
.btn-primary.anfrage-knopf:hover { background: var(--bronze-hell); }
/* Anfrageformulare im Shop kompakter als das Kontaktformular der Seite
   (AN 27.09.2026: am Handy zu lang). Vorname/Nachname und PLZ/Ort bleiben auch
   am Handy nebeneinander (.paar); E-Mail und Telefon brauchen die volle Breite. */
.glas-formular.formular, .korb-formular.formular { padding: 22px 24px 26px; }
.glas-formular label, .korb-formular label { margin: 14px 0 6px; }
.glas-formular input, .glas-formular textarea, .glas-formular select, .korb-formular input, .korb-formular textarea, .korb-formular select { padding: 6px 10px; }
.glas-formular input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .glas-formular select, .korb-formular input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .korb-formular select { min-height: var(--shop-feld-h); }
.glas-formular .anfrage-knopf, .korb-formular .anfrage-knopf { min-height: var(--shop-haupt-h); padding-top: 8px; padding-bottom: 8px; }
.glas-formular .anhang-fotos-knopf, .korb-formular .anhang-fotos-knopf { min-height: var(--shop-knopf-h); padding-top: 7px; padding-bottom: 7px; }
.glas-formular textarea, .korb-formular textarea { min-height: 80px; }
.glas-formular button, .korb-formular button { margin-top: 20px; }
@media (max-width: 620px) {
  .glas-formular.formular, .korb-formular.formular { padding: 16px 14px 20px; }
  .glas-formular .formular-reihe.paar, .korb-formular .formular-reihe.paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
}
/* Stufenseiten: Link vom Positionsformular zur direkten Anfrage mit Dateien (stufen.mjs). */
.pf-direkt { margin: 12px 0 0; font-size: 14px; text-align: center; }
.pf-direkt a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.pf-direkt a:hover { color: var(--ink); }
/* Shop-Startseite /produkte/: Produktkacheln, Systemliste, Werkstattfotos */
.shop-kachel-section { background: var(--white); padding: 64px 24px 72px; border-bottom: 1px solid var(--line); }
.shop-kachel-inner { max-width: 1180px; margin: 0 auto; }
.shop-kachel-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.shop-kachel-kopf .section-title { margin-bottom: 0; }
.shop-kachel-korb { display: inline-flex; align-items: center; gap: 6px; min-height: var(--shop-knopf-h); padding: 6px 16px; background: var(--cream-light); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); }
.shop-kachel-korb[hidden] { display: none; }
.shop-kachel-korb b { font-variant-numeric: tabular-nums; }
.shop-kachel-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Zwei freie Bereiche: zwei Spalten statt einer leeren dritten (AN 26.09.2026, Shop-Uebersicht nur mit freien Bereichen). */
.shop-kachel-raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
/* Gruppen der Uebersicht (drei Produkte je Material, AN 04.10.2026) und die Zeichnung des Podests in der Kachel. */
.shop-kachel-gruppe { margin: 36px 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.shop-kachel-kopf + .shop-kachel-gruppe { margin-top: 8px; }
.shop-kachel-zeichnung { display: flex; align-items: center; justify-content: center; padding: 14px 18px; background: var(--white); border-bottom: 1px solid var(--line); }
.shop-kachel-zeichnung svg { width: 100%; height: 100%; max-height: none; }
.shop-kachel { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shop-kachel > span { position: absolute; top: 0; left: 0; }
.shop-kachel-bild { position: relative; display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-light); }
.shop-kachel-bild picture, .shop-kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.shop-kachel:hover .shop-kachel-bild img { transform: scale(1.03); }
.shop-kachel-marke { position: absolute; left: 12px; top: 12px; padding: 4px 10px; background: var(--white); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-soft); }
.shop-kachel-text { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.shop-kachel-text h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; }
.shop-kachel-text h3 a { color: var(--ink); }
.shop-kachel-text h3 a:hover { color: var(--bronze-deep); }
.shop-kachel-text > p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.shop-kachel-text .shop-kachel-preis { color: var(--ink); font-size: 14px; }
.shop-kachel-preis strong { font-size: 20px; letter-spacing: -0.02em; }
.shop-preis-hinweis { max-width: 760px; margin: 28px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-mute); }
.shop-kachel-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 6px; }
.shop-kachel-knoepfe .btn-primary { border-radius: var(--radius-klein); padding: 12px 22px; }
.shop-link { font-size: 14px; font-weight: 600; color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.shop-link:hover { color: var(--ink); }
.produkt-spalte { grid-area: karte; display: grid; gap: 18px; min-width: 0; }
.produkt-spalte > .produkt-karte { grid-area: auto; }
.produkt-systeme { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; }
.produkt-systeme h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.produkt-systeme ul { list-style: none; margin: 0 0 14px; padding: 0; }
.produkt-systeme li + li { border-top: 1px solid var(--line-soft); }
.produkt-systeme li a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 10px 0; min-height: 44px; color: var(--ink); }
.produkt-systeme li a:hover b { color: var(--bronze-deep); }
.produkt-systeme li b { font-size: 14.5px; font-weight: 600; }
.produkt-systeme li span { font-size: 13px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.werkstatt-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.werkstatt-reihe figure { margin: 0; }
.werkstatt-reihe img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.werkstatt-reihe figcaption { padding-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
@media (max-width: 1000px) { .shop-kachel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .shop-kachel-section { padding: 48px 16px 56px; }
  .shop-kachel-raster, .shop-kachel-raster.zwei, .werkstatt-reihe { grid-template-columns: minmax(0, 1fr); }
  .shop-kachel-bild { aspect-ratio: 16/10; }
}
@media (min-width: 360px) and (max-width: 700px) {
  .shop-kachel-raster, .shop-kachel-raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-kachel-raster:not(.zwei) .shop-kachel:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shop-kachel-raster:not(.zwei) .shop-kachel:last-child .shop-kachel-bild { height: 100%; aspect-ratio: auto; }
  .shop-kachel-text { padding: 14px 12px; gap: 8px; }
  .shop-kachel-text h3 { font-size: 18px; }
  .shop-kachel-text > p { font-size: 13px; line-height: 1.5; }
  .shop-kachel-preis strong { display: block; font-size: 18px; }
  .shop-kachel-marke { left: 8px; top: 8px; font-size: 10px; padding: 2px 6px; }
  .shop-kachel-knoepfe .btn-primary { width: 100%; min-height: 44px; padding: 8px 6px; font-size: 12px; text-align: center; }
}
.produkt-knoepfe { display: grid; gap: 10px; margin-top: 16px; }
.produkt-knoepfe .btn-primary { margin-top: 0; }
.produkt-knoepfe .btn-secondary { text-align: center; border-radius: var(--radius); }
@media (max-width: 900px) {
  .produkt-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "karte" "bild"; gap: 28px; }
}
@media (max-width: 760px) {
  .produkt-block { padding: 48px 20px; }
  .produkt-karte { padding: 20px 16px 22px; }
  form.produkt-karte { padding-top: 0; }
  form.produkt-karte > h3:first-child { margin: 0 -16px 10px; padding: 12px 16px 11px; }
}
/* Ablauf in drei Schritten - die Reihenfolge ist echt, deshalb Ziffern. */
.ablauf-section { background: var(--cream); padding: 64px 24px; border-bottom: 1px solid var(--line); }
.ablauf-inner { max-width: 1100px; margin: 0 auto; }
.ablauf { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; }
.ablauf li::before { content: counter(schritt); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--bronze); border-radius: 50%; color: var(--bronze-deep); font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.ablauf h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.ablauf p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 800px) { .ablauf { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ablauf-section { padding: 48px 20px; } }
/* Platzhalter fuer Fotos, die noch geliefert werden (Ansage AN 22.09.2026). */
.platzhalter-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
@media (max-width: 700px) { .platzhalter-reihe { grid-template-columns: minmax(0, 1fr); } }
.platzhalter { margin: 0; }
.platzhalter-flaeche { aspect-ratio: 4/3; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; border: 1px dashed var(--bronze); border-radius: var(--radius); background: repeating-linear-gradient(135deg, var(--cream-light) 0 14px, var(--cream-deep) 14px 15px); }
.platzhalter-flaeche span { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-deep); }
.platzhalter-flaeche strong { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.35; max-width: 28ch; }
.platzhalter figcaption { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; padding-top: 10px; }
/* Korb-Zaehler: am Rechner eine Pille unten rechts, am Handy uebernimmt die
   feste Kontaktleiste (ihr rechter Knopf fuehrt dort zum Korb). */
.korb-pille { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--cream) !important; padding: 13px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-strong); }
.korb-pille b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--bronze-glow); color: var(--ink); font-size: 13px; }
.korb-pille:hover { background: var(--stahl); }
@media (max-width: 960px) { .korb-pille { display: none !important; } }
.korb-meldung { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 95; width: min(560px, calc(100% - 32px)); background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--bronze); border-radius: var(--radius); box-shadow: var(--shadow-strong); padding: 14px 16px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14.5px; color: var(--ink); }
.korb-meldung a { color: var(--bronze-deep); font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
@media (max-width: 960px) { .korb-meldung { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* Korbseite */
.korb-section { background: var(--white); padding: 56px 24px 72px; }
.korb-inner { max-width: 860px; margin: 0 auto; }
.korb-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.korb-kopfzeile h2 { font-size: 24px; font-weight: 600; }
.korb-kopfzeile a { font-size: 14px; color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.korb-kopfzeile .korb-weiter { margin: 0; font-size: 14px; color: var(--ink-soft); }
.korb-liste { display: grid; gap: 14px; }
.korb-position { background: var(--cream-light); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; }
.korb-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.korb-kopf h3 { font-size: 17px; font-weight: 600; }
.korb-titel { margin-right: auto; }
.korb-titel h3 a { color: var(--ink); border-bottom: 1px solid var(--line); }
.korb-mass { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.korb-aktionen { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.korb-aktion { display: inline-flex; align-items: center; min-height: var(--shop-knopf-h); padding: 6px 0 2px; font: inherit; font-size: 13.5px; color: var(--bronze-deep); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.korb-aktion:hover { color: var(--ink); }
.korb-inhalt.mit-bild { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.korb-inhalt.mit-bild .korb-daten { margin-top: 0; }
.korb-bild { width: 100%; height: auto; max-height: 180px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-klein); }
@media (max-width: 620px) { .korb-inhalt.mit-bild { grid-template-columns: minmax(0, 1fr); } .korb-bild { max-height: 220px; } }
.korb-werkzeuge { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: -8px 0 8px; }
.korb-rueckfrage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: #f9e6e0; border: 1px solid #d9a695; border-radius: var(--radius-klein); padding: 12px 14px; margin: 0 0 14px; }
.korb-rueckfrage p { flex: 1 1 100%; margin: 0; font-size: 14.5px; color: #6b2417; }
.korb-rueckgaengig { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; background: var(--cream-light); border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 6px 14px; margin: 0 0 14px; font-size: 14px; color: var(--ink); }
.korb-bearbeiten-hinweis { background: var(--cream-light); border-left: 3px solid var(--bronze); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.korb-bearbeiten-hinweis a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.korb-marke { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bronze-deep); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--white); }
.korb-entfernen { font: inherit; font-size: 13.5px; color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 6px 0 2px; cursor: pointer; min-height: var(--shop-knopf-h); }
.korb-entfernen:hover { color: #6b2417; }
.korb-daten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 20px; margin-top: 12px; }
.korb-daten dt { font-size: 12px; color: var(--ink-mute); }
.korb-daten dd { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.korb-menge { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.korb-menge label { margin-right: 6px; }
.korb-menge input { width: 64px; min-height: var(--shop-feld-h); padding: 5px 6px; text-align: center; font: inherit; font-size: 16px; font-weight: 700; border: 1px solid var(--rand-bedien); border-radius: var(--radius-klein); background: var(--white); color: var(--ink); }
.korb-menge button { width: var(--shop-feld-h); height: var(--shop-feld-h); border: 1px solid var(--rand-bedien); border-radius: var(--radius-klein); background: var(--white); font: inherit; font-size: 18px; cursor: pointer; color: var(--ink); }
.korb-leer { background: var(--cream-light); border: 1px dashed var(--bronze); border-radius: var(--radius); padding: 28px 24px; text-align: center; }
.korb-leer p { color: var(--ink-soft); margin-bottom: 16px; }
.korb-fluechtig { background: #f9e6e0; border: 1px solid #d9a695; color: #6b2417; border-radius: var(--radius-klein); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.korb-preis { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.korb-preis strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.korb-preis.offen { color: var(--ink-soft); }
.korb-preis-hinweis { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.korb-summe { margin: 0 0 18px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-klein); font-size: 14.5px; line-height: 1.55; }
.korb-zulang { background: #f9e6e0; border: 1px solid #d9a695; color: #6b2417; border-radius: var(--radius-klein); padding: 12px 14px; font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.korb-ansage { font-size: 13.5px; color: var(--ink-mute); min-height: 1.4em; margin: -8px 0 10px; }
.korb-kopfzeile h2:focus { outline: none; }
.korb-kopfzeile h2:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.korb-formular-titel { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.korb-formular.formular { max-width: none; margin-top: 28px; }
.korb-dateien { margin-top: 22px; }
.korb-dateien ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.korb-dateien li { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 6px 6px 6px 12px; font-size: 14px; }
.korb-dateien li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.korb-dateien li small { color: var(--ink-mute); white-space: nowrap; }
/* margin und width zurueck: .formular button (Abstand oben, am Handy volle
   Breite) traf sonst auch "Entfernen" und drueckte den Namen auf null Breite. */
.korb-dateien li button { font: inherit; font-size: 13px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; min-height: 40px; padding: 0 8px; margin: 0; width: auto; }
.korb-dateimeldung { font-size: 13.5px; color: #6b2417; margin-top: 10px; }
/* .formular label (Klasse + Element) setzt display:block und fett - deshalb hier
   ebenfalls mit Element, sonst verliert der Einwilligungstext Abstand und Gewicht. */
.formular label.korb-haken { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--ink); cursor: pointer; }
.korb-haken input { width: 20px !important; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); padding: 0 !important; }
.korb-haken a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.korb-falle { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.korb-noscript { background: var(--cream-light); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; }
/* Nur fuer Screenreader (kurze Ansagen), auf dem Bildschirm unsichtbar. */
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Druckblatt (build/produkte/client/druck.js, Runde 2 vom 23.09.2026). Auf dem
   Bildschirm nie sichtbar. Beim Drucken mit angemeldetem Inhalt (html.druckt)
   steht NUR das Blatt auf dem Papier, sonst die Seite ohne Kopf, Fuss und
   Kontaktleiste. A4 ist rund 794 CSS-Pixel breit - die Handy-Regeln bis 960 px
   greifen also auch beim Drucken; deshalb wird hier ausdruecklich
   zurueckgesetzt, was dort fest oder dunkel ist. */
.produkt-druck { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm 16mm; }
  body { padding: 0 !important; background: #fff !important; }
  .nav-wrap, .kontakt-leiste, .einwilligung, .korb-pille, .korb-meldung, .footer, .glas-werkzeuge, .glas-preisleiste, .video-sektion { display: none !important; }
  html.druckt body > *:not(.produkt-druck) { display: none !important; }
  html.druckt .produkt-druck { display: block !important; }
  .produkt-druck { font-size: 10.5pt; line-height: 1.45; color: #111; }
  /* Briefkopf wie in den Angeboten von AN: Band und Fuss im Blau des Logos.
     print-color-adjust: exact druckt die Flaechen auch ohne "Hintergrundgrafiken". */
  .druck-briefkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; margin-bottom: 2mm; }
  .druck-band { flex: 0 0 104mm; box-sizing: border-box; min-height: 24mm; display: flex; flex-direction: column; justify-content: center; padding: 3mm 16mm 3mm 4mm; background: #0075be; color: #fff; line-height: 1.25; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .druck-band span, .druck-band strong { display: block; }
  .druck-band span { font-size: 8.5pt; }
  .druck-band strong { font-size: 11pt; }
  .druck-band .druck-leistungen { font-size: 12pt; font-weight: 700; }
  .druck-band strong + .druck-leistungen { margin-top: 2mm; font-size: 11pt; }
  .druck-logo { display: block; width: 62mm; height: auto; margin-top: 1mm; }
  .druck-motto { margin: 0 0 5mm; text-align: right; font-style: italic; font-size: 10pt; color: #444; }
  .druck-stand { margin: 0 0 1mm; text-align: right; font-size: 8.5pt; color: #333; }
  .druck-fuss { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6mm; margin-top: 8mm; padding: 3mm 5mm; background: #0075be; color: #fff; font-size: 8.5pt; line-height: 1.4; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .druck-fuss span, .druck-fuss strong { display: block; }
  .druck-titel { font-size: 17pt; font-weight: 600; line-height: 1.2; margin: 0 0 2mm; }
  .produkt-druck h2 { font-size: 12pt; margin: 6mm 0 2mm; break-after: avoid; }
  .druck-satz { margin: 0 0 4mm; }
  .druck-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
  .druck-bilder.eins { grid-template-columns: 1fr; }
  .druck-bild { margin: 0; break-inside: avoid; border: 1px solid #bbb; padding: 3mm; }
  .druck-bild svg { display: block; width: 100%; height: auto; max-height: 85mm; }
  .druck-bild img { display: block; width: 100%; height: auto; max-height: 85mm; object-fit: contain; }
  .druck-bild canvas { display: block; width: 100%; height: auto; max-height: 85mm; object-fit: contain; }
  .druck-bild figcaption { font-size: 8.5pt; margin-top: 1.5mm; }
  .druck-bild .glas-legende { font-size: 7.5pt; margin: 1mm 0 0; padding-left: 4mm; }
  .druck-tabelle { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .druck-tabelle th, .druck-tabelle td { text-align: left; vertical-align: top; border-bottom: 1px solid #ccc; padding: 1.5mm 2mm; }
  .druck-tabelle tr { break-inside: avoid; }
  .druck-tabelle tbody th { width: 42%; font-weight: 600; }
  .druck-rolle { font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.05em; color: #555; }
  .druck-preis { margin-top: 5mm; border: 1px solid #999; padding: 3mm 4mm; break-inside: avoid; }
  .druck-preis, .druck-preis * { color: #111 !important; background: transparent !important; border-color: #ccc !important; }
  .druck-preis button { display: none !important; }
  .druck-hinweis, .druck-link { font-size: 9pt; color: #333; }
  .druck-link { word-break: break-all; }
  .druck-position { break-inside: avoid; margin-bottom: 5mm; }
  .druck-bild.klein { float: right; width: 60mm; margin: 0 0 3mm 5mm; }
  .druck-bild.klein svg { max-height: 45mm; }
  .druck-position::after { content: ''; display: block; clear: both; }
}

.glas-inner { max-width: 1180px; margin: 0 auto; }
.glas-konfig { background: var(--cream-light); padding: 64px 24px 72px; border-bottom: 1px solid var(--line); }
.glas-konfig .section-title, .glas-auswahl .section-title { margin-bottom: 28px; }
.glas-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px 44px; align-items: start; }
/* Die Zeichnung bleibt am Rechner stehen, waehrend rechts die Schritte laufen. */
.glas-buehne { position: sticky; top: 92px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px 16px; box-shadow: var(--shadow-soft); overflow: hidden; }
.glas-reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 -18px 12px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
.glas-reiter button { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-mute); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px 6px; min-height: var(--shop-knopf-h); cursor: pointer; white-space: nowrap; }
.glas-reiter button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--bronze); }
.glas-reiter button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.glas-zeichnung { display: block; width: 100%; height: auto; max-height: 420px; }
.glas-legende { list-style: none; display: grid; gap: 3px; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.glas-legende[hidden], .glas-notiz[hidden] { display: none; }
.glas-legende li { position: relative; padding-left: 14px; }
.glas-legende li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--bronze); }
.glas-legende li.stark { color: var(--ink); font-weight: 700; }
.glas-notiz { font-size: 12px; color: var(--ink-mute); margin-top: 8px; }
.glas-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.glas-fotos[hidden] { display: none; }
.glas-fotos figure { margin: 0; }
.glas-fotos img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-klein); }
.glas-fotos figcaption { font-size: 12px; line-height: 1.45; color: var(--ink-mute); padding-top: 6px; }
.glas-preiszeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin: 14px -18px -16px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--cream); }
.glas-preiszeile strong { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.glas-preiszeile a { font-size: 14px; color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.glas-hinweis { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); background: var(--white); border-left: 3px solid var(--bronze); border-radius: var(--radius-klein); padding: 10px 12px; margin-top: 12px; }
.glas-hinweis[hidden] { display: none; }
/* Schritte */
.glas-schritt { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.glas-schritt[hidden] { display: none; }
.glas-schritt > legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.glas-nr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--bronze-deep); border-radius: 50%; background: var(--bronze-deep); font-size: 13px; font-weight: 700; color: var(--white); }
.glas-konfig input[type="number"], .glas-konfig input[type="text"], .glas-konfig select { min-height: var(--shop-feld-h); border: 1px solid var(--rand-bedien); border-radius: var(--radius-klein); background-color: var(--white); font-family: inherit; font-size: 16px; color: var(--ink); padding: 5px 10px; }
.glas-konfig select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23A98457' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
.glas-konfig input:focus-visible, .glas-konfig select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.glas-konfig .pf-zahl { max-width: 180px; }
#glas-plz { max-width: 160px; }
.glas-glas { margin-top: 14px; }
.glas-konfig .pf-hinweis a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.glas-konfig .pf-hinweis a:hover { color: var(--ink); }
.glas-unterwahl { margin-top: 16px; }
.glas-unterwahl[hidden] { display: none; }
/* Seit 27.09.2026 gibt es nur Easy Glass Smart (angebot in glas-regeln.json):
   Eine gesperrte Oberflaeche ist dann kein Wechselgrund mehr, sondern Ballast.
   Der Satz darunter nennt weiter, was es fuer diese Schiene nicht gibt. */
.glas-unterwahl .pf-wahl input:disabled + label { display: none; }
.glas-schiene-satz { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.glas-schiene-satz strong { color: var(--ink); }
.glas-herkunft-satz { margin: 4px 0 0; }
.glas-abschnitte { list-style: none; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; }
.glas-abschnitt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 4px 10px; }
.glas-abschnitt-name { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 84px; }
.glas-zahl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-mute); }
.glas-zahl input { width: 96px; }
.glas-zahl.klein input { width: 78px; }
.glas-klein { display: inline-flex; align-items: center; gap: 8px; min-height: var(--shop-wahl-h); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.glas-klein input { width: 18px; height: 18px; accent-color: var(--ink); }
.glas-weg { margin-left: auto; min-height: var(--shop-wahl-h); font: inherit; font-size: 13px; color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.glas-ecke { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 12px 0 28px; font-size: 13.5px; color: var(--ink-soft); }
.glas-ecke::before { content: ''; position: absolute; left: 14px; top: -8px; bottom: -8px; border-left: 1px dashed var(--bronze); }
.glas-ecke label { font-weight: 700; color: var(--ink); }
.glas-eckloesung fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 0; padding: 4px 12px; border: 0; }
.glas-eckloesung legend { float: left; padding: 0; margin-right: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.glas-knopf { margin-top: 10px; min-height: var(--shop-knopf-h); padding: 6px 14px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius-klein); cursor: pointer; }
.glas-knopf:hover { background: var(--ink); color: var(--cream); }
.glas-knopf[hidden] { display: none; }
/* Karten zum Anklicken: Montageart, Schiene, Leistung */
.wahl-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wahl-karten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Die zwei Karten mit Piktogramm standen 279 px hoch (AN 28.09.2026: zu lang). */
.wahl-karten.zwei .wahl-bild { aspect-ratio: 2 / 1; }
.wahl-karten.liste { grid-template-columns: minmax(0, 1fr); }
.wahl-karten > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wahl-karte { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 10px 12px; background: var(--white); border: 1px solid var(--rand-bedien); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.wahl-karte:hover { border-color: var(--bronze); }
.wahl-karten > input:checked + .wahl-karte { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), inset 0 -3px 0 var(--bronze); }
.wahl-karten > input:focus-visible + .wahl-karte { outline: 2px solid var(--ink); outline-offset: 2px; }
.wahl-karten > input:disabled + .wahl-karte { cursor: not-allowed; background: var(--cream-light); }
.wahl-karten > input:disabled + .wahl-karte .wahl-bild { opacity: 0.45; }
.wahl-karten > input:disabled + .wahl-karte .wahl-titel { color: var(--ink-mute); }
.wahl-bild { display: block; aspect-ratio: 4/3; margin-bottom: 6px; background: var(--white); }
.wahl-bild picture { display: block; width: 100%; height: 100%; }
.wahl-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wahl-titel { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.wahl-unter { font-size: 12.5px; line-height: 1.45; color: var(--ink-mute); }
.wahl-sperre { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--bronze-deep); }
.wahl-marke { align-self: flex-start; margin-top: 2px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--bronze-deep); }
.wahl-karten.liste .wahl-karte { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: start; }
.wahl-karten.liste .wahl-bild { grid-row: 1 / 3; aspect-ratio: 124/70; margin: 0; background: var(--cream-light); border-radius: var(--radius-klein); }
.wahl-piktogramm { display: block; width: 100%; height: 100%; }
.p-decke { fill: var(--cream-deep); stroke: var(--ink-soft); stroke-width: 1; }
.p-aufbau { fill: var(--white); stroke: var(--ink-mute); stroke-width: 0.6; }
.p-schiene { fill: #C9BFAF; stroke: var(--ink); stroke-width: 1; }
.p-blende { fill: #9C9488; }
.p-halter { fill: var(--ink); }
.p-glas { fill: #7FB2C4; fill-opacity: 0.35; stroke: #7FB2C4; stroke-width: 1; }
.p-ffb { stroke: var(--bronze-deep); stroke-width: 1; stroke-dasharray: 4 3; }
/* Zeichnung (glas-zeichnung.js) */
.z-linie { stroke: #3B352D; fill: none; stroke-width: 1.6; }
.z-glas { fill: #7FB2C4; fill-opacity: 0.26; stroke: #7FB2C4; stroke-width: 1.2; }
.z-profil { fill: #C9BFAF; stroke: #3B352D; stroke-width: 1.2; }
.z-blende { fill: #9C9488; stroke: #3B352D; stroke-width: 0.8; }
.z-halter { fill: #2B2B2B; stroke: #111; stroke-width: 0.6; }
.z-langloch { fill: var(--white); stroke: #111; stroke-width: 0.6; }
.z-schraube { fill: var(--bronze); stroke: #3B352D; stroke-width: 0.6; }
.z-pfeil { stroke: var(--bronze-deep); stroke-width: 1.2; fill: none; }
.z-mass { stroke: var(--bronze-deep); stroke-width: 1; fill: none; }
.z-masstext { fill: var(--bronze-deep); font-family: var(--body); font-size: 11px; font-weight: 600; }
.z-schraffur { stroke: #C9BFAF; stroke-width: 1; }
.z-decke { fill: #C9BFAF; fill-opacity: 0.32; }
.z-daemmung { fill: #F1E3B8; stroke: #C9BFAF; stroke-width: 0.6; }
.z-estrich { fill: #D8D0C2; stroke: #C9BFAF; stroke-width: 0.6; }
.z-belag { fill: #C4A27A; stroke: #3B352D; stroke-width: 0.6; }
.z-ffb { stroke: var(--bronze-deep); stroke-width: 1.2; stroke-dasharray: 6 4; }
.z-anker { stroke: #3B352D; stroke-width: 2.2; }
.z-bruch-grund { stroke: var(--white); stroke-width: 7; fill: none; }
.z-bruch { stroke: #3B352D; stroke-width: 1.2; fill: none; }
.z-raum { fill: #6F6456; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.z-schiene { stroke: #3B352D; stroke-width: 2.4; fill: none; stroke-linejoin: round; }
.z-schiene-breit { stroke: #3B352D; stroke-width: 10; stroke-opacity: 0.2; fill: none; stroke-linejoin: round; }
.z-endkappe { fill: var(--white); stroke: #3B352D; stroke-width: 1.4; }
.z-ecke { fill: none; stroke: #3B352D; stroke-width: 1.2; stroke-dasharray: 3 2; }
.z-boden { stroke: #3B352D; stroke-width: 1.6; }
/* Stueckliste und Preiskasten */
.glas-auswahl { background: var(--white); padding: 64px 24px 72px; border-bottom: 1px solid var(--line); }
.glas-auswahl-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px 40px; align-items: start; }
.glas-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.glas-katalog > .glas-hinweis { grid-column: 1 / -1; margin: 0; }
.glas-artikel { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.glas-artikel-bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; background: var(--white); border-bottom: 1px solid var(--line-soft); }
.glas-artikel-bild picture { display: block; width: 100%; height: 100%; }
.glas-artikel-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.glas-artikel-leer { width: 44%; height: 68%; border: 1px solid #7FB2C4; border-radius: 2px; background: linear-gradient(135deg, rgba(127, 178, 196, 0.3), rgba(127, 178, 196, 0.06)); }
.glas-artikel-text { display: grid; gap: 3px; padding: 12px 14px 14px; }
.glas-rolle { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze-deep); }
.glas-artikel h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.glas-herkunft { font-size: 12.5px; line-height: 1.45; color: var(--ink-mute); overflow-wrap: anywhere; }
.glas-nb { white-space: nowrap; }
.glas-menge { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.glas-satz { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.glas-artikel.leistung { background: var(--cream-light); border-left: 3px solid var(--bronze); }
.glas-quelle { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.glas-preis { position: sticky; top: 92px; background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: var(--shadow-strong); }
.glas-preis-titel { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-glow); }
.glas-preis-betrag { margin-top: 4px; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--white); font-variant-numeric: tabular-nums; }
.glas-preis-betrag.klein { font-size: 22px; }
.glas-preis-unter { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--cream-deep); }
.glas-preis-teile { display: grid; gap: 6px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.glas-preis-teile div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.glas-preis-teile dt { color: var(--cream-deep); }
.glas-preis-teile dd { font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.glas-preis-hinweis, .glas-preis-satz { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--cream); }
.glas-preis .glas-gruende { display: grid; gap: 4px; margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--cream); }
.glas-preis-fuss { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; line-height: 1.55; color: var(--cream-deep); }
/* Farbe wie die uebrigen Anfrageknoepfe (.btn-primary.anfrage-knopf, Cognac); vorher hell auf dem dunklen Kasten. */
.glas-preis .btn-primary { display: block; margin-top: 16px; text-align: center; border-radius: var(--radius-klein); }
.glas-preis .glas-knopf { background: transparent; color: var(--cream); border-color: var(--cream-deep); }
.glas-preis .glas-knopf:hover { background: var(--cream); color: var(--ink); }
/* Warum bei uns */
.glas-warum { background: var(--cream-light); padding: 72px 24px; border-bottom: 1px solid var(--line); }
.glas-warum-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.glas-warum-text .section-title { margin-bottom: 20px; }
.glas-warum-text p { max-width: 62ch; margin-bottom: 14px; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.glas-warum-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.glas-warum-bilder figure { margin: 0; }
.glas-warum-bilder img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
.glas-warum-bilder figcaption { padding-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
/* Anfrage */
.glas-anfrage { background: var(--white); padding: 72px 24px; border-bottom: 1px solid var(--line); }
.glas-anfrage-inner { max-width: 860px; }
.glas-anfrage-satz { margin: -12px 0 22px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.glas-anfrage-satz strong { color: var(--ink); }
.glas-anfrage-satz a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.glas-formular.formular { max-width: none; }

/* Weitere Teile bitte anbieten (Schritt 8): Bild, Name, Merkmale, Haken. */
.glas-zusatz { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.glas-zusatz-teil { display: grid; grid-template-columns: auto 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-klein); background: var(--white); cursor: pointer; }
.glas-zusatz-teil input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.glas-zusatz-bild img { display: block; width: 56px; height: 56px; object-fit: contain; }
.glas-zusatz-text strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.glas-zusatz-text small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-mute); }
.glas-zusatz-teil:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.glas-kantenteile:not(:empty) { margin-top: 14px; }
.glas-kantenteile .pf-label { margin-bottom: 8px; }
/* Link kopieren, teilen, drucken (unter der Zeichnung). Ohne JavaScript verborgen. */
.glas-werkzeuge { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; margin-top: 18px; }
.glas-werkzeuge .glas-knopf { margin-top: 8px; }
.glas-link-feld { flex: 1 1 100%; margin-top: 10px; min-height: var(--shop-feld-h); padding: 6px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius-klein); background: var(--cream-light); color: var(--ink); }
.glas-werkzeug-meldung { flex: 1 1 100%; margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.glas-werkzeug-meldung:empty { display: none; }
/* Preisleiste am Handy: klebt unter der Kopfleiste, solange die Schritte im
   Bild sind (nur innerhalb von .glas-bedienung). Am Rechner steht der Preis
   ohnehin neben den Schritten. */
.glas-preisleiste { display: none; }
@media (max-width: 960px) {
  .glas-raster, .glas-auswahl-raster, .glas-warum-raster { grid-template-columns: minmax(0, 1fr); }
  .glas-buehne, .glas-preis { position: static; }
  /* Felder der Bedienspalte: Beim Tabben verdecken Kopfleiste und Preisleiste
     oben und die Kontaktleiste unten kein Feld. Ersetzt fuer diese Felder die
     allgemeine Regel [id] { scroll-margin-top: 96px } (nur Kopfleiste). */
  .glas-bedienung [id], .glas-bedienung input, .glas-bedienung select { scroll-margin-top: calc(var(--kopf-hoehe, 64px) + 64px); scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .glas-preisleiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: var(--kopf-hoehe, 64px); z-index: 30; margin: 0 0 16px; padding: 10px 14px; background: var(--ink); color: var(--white); border-radius: var(--radius-klein); box-shadow: 0 6px 18px rgba(34, 28, 22, 0.18); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .glas-preisleiste a { flex: none; color: var(--white); font-size: 13.5px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
}
@media (max-width: 620px) {
  .glas-konfig, .glas-auswahl, .glas-warum, .glas-anfrage { padding: 48px 16px 56px; }
  .glas-buehne { padding: 0 12px 14px; }
  .glas-reiter { margin: 0 -12px 10px; padding: 0 2px; }
  .glas-reiter button { padding: 12px 8px 10px; font-size: 13.5px; }
  .glas-preiszeile { margin: 12px -12px -14px; padding: 12px; }
  .wahl-karten, .wahl-karten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wahl-karte { padding: 10px 10px 12px; }
  .wahl-karten.zwei .wahl-bild { aspect-ratio: 16/10; margin-bottom: 4px; }
  .wahl-titel { font-size: 14px; }
  .wahl-unter { font-size: 12px; }
  .wahl-karten.liste .wahl-karte { grid-template-columns: 92px minmax(0, 1fr); }
  .glas-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glas-katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .glas-artikel-text { padding: 10px 10px 12px; }
  .glas-abschnitt-name { min-width: 0; width: 100%; }
}

.sort-produktkopf { background: var(--cream); padding: 56px 24px 52px; border-bottom: 1px solid var(--line); }
.sort-produktkopf-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.sort-produktkopf h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 52px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; overflow-wrap: anywhere; }
.sort-produktkopf .hero-ctas { margin-top: 28px; }
/* Hauptknopf der Kopfzeile in Cognac wie auf den Kopfbuehnen der Seite
   (design-charakter.md: Hauptknopf jeder Kopfbuehne). */
.sort-produktkopf .hero-ctas .btn-primary { background: var(--bronze-deep); color: var(--white) !important; }
.sort-produktkopf .hero-ctas .btn-primary:hover { background: var(--bronze-hell); }
.sort-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sort-fakten div { min-width: 0; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.sort-fakten dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-deep); }
.sort-fakten dd { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.sort-sektion { background: var(--white); padding: 64px 24px 72px; border-bottom: 1px solid var(--line); }
/* Kopf kompakter (AN 28.09.2026: "Buttons viel zu hoch", "nicht unnoetig in
   der Laenge"): Knoepfe in den Shop-Hoehen (--shop-haupt-h), Ueberschrift eine
   Stufe kleiner. Rechts die Preise statt der Wahlfelder, die standen doppelt. */
.sort-produktkopf { padding: 40px 24px 40px; }
.sort-produktkopf h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; }
.sort-produktkopf .hero-ctas { margin-top: 22px; }
.sort-produktkopf .hero-ctas a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--shop-haupt-h); padding: 8px 18px; font-size: 14.5px; }
.stufen-kopfpreis { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--bronze); border-radius: var(--radius); padding: 18px 20px 16px; }
.stufen-kopfpreis-titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-deep); margin: 0 0 8px; }
.stufen-kopfpreis dl { margin: 0; }
.stufen-kopfpreis dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.stufen-kopfpreis dt { font-size: 14px; color: var(--ink); align-self: center; }
.stufen-kopfpreis dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.stufen-kopfpreis dd strong { display: block; font-size: 17px; color: var(--ink); }
.stufen-kopfpreis dd span { display: block; font-size: 12px; color: var(--ink-mute); }
.stufen-kopfpreis-fuss { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.stufen-kopfpreis-fuss a { color: var(--bronze-deep); border-bottom: 1px solid currentColor; margin-left: 6px; }
/* Inhalt unter dem Rechner (stufen-inhalt.mjs): Antwort zuerst, dann Tabelle
   und Listen. */
.stufen-antwort { max-width: 860px; font-size: 16.5px; line-height: 1.7; color: var(--ink); margin-bottom: 24px; }
.stufen-wendung p { max-width: 860px; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.wendung-skizze { margin: 0 0 22px; max-width: 640px; }
.wendung-skizze-svg { max-height: 360px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.wendung-skizze figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.stufen-tabelle-rahmen { overflow-x: auto; margin-bottom: 28px; }
.stufen-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.stufen-tabelle caption { caption-side: top; text-align: left; font-size: 12.5px; color: var(--ink-mute); padding-bottom: 8px; }
.stufen-tabelle th, .stufen-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.stufen-tabelle thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-deep); }
.stufen-tabelle tbody th { font-weight: 600; color: var(--ink); }
.stufen-tabelle td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.stufen-tabelle td:nth-child(3) { white-space: nowrap; color: var(--ink-soft); }
.stufen-tabelle td:last-child { color: var(--ink-soft); }
.stufen-preis-raster, .stufen-zwei, .stufen-hinweis-raster { display: grid; gap: 20px 32px; }
.stufen-preis-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stufen-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.stufen-hinweis-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.stufen-preise h3, .stufen-kragarm h3, .stufen-hinweise h3, .stufen-auswahl-titel { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.stufen-preise p, .stufen-hinweise p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 8px; }
.stufen-preise ul, .stufen-kragarm ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.stufen-hinweis-raster > div { border-left: 3px solid var(--bronze); padding: 2px 0 2px 16px; }
.stufen-auswahl-titel { margin-bottom: 12px; }
@media (max-width: 760px) {
  .stufen-preis-raster, .stufen-zwei, .stufen-hinweis-raster { grid-template-columns: minmax(0, 1fr); }
  .stufen-tabelle td:last-child, .stufen-tabelle thead th:last-child { display: none; }
}
.sort-sektion.hell { background: var(--cream-light); }
.sort-sektion .section-title { margin-bottom: 16px; }
@media (max-width: 960px) {
  .sort-produktkopf-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .sort-produktkopf { padding: 28px 16px 32px; }
  .sort-sektion { padding: 48px 16px 56px; }
  /* Kopf der Stufenseiten am Handy knapper (AN 27.09.2026): Einleitung 16 px,
     beide Knoepfe in einer Reihe. */
  .sort-produktkopf h1 { margin-bottom: 14px; }
  .sort-produktkopf .hero-lead { font-size: 16px; line-height: 1.65; }
  .sort-produktkopf .hero-ctas { margin-top: 20px; gap: 8px; flex-wrap: nowrap; }
  .sort-produktkopf .hero-ctas a { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13.5px; text-align: center; white-space: nowrap; }
  /* Zwei Spalten statt einer langen Liste (AN 27.09.2026, kompakter am Handy). */
  .sort-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sort-fakten div { padding: 9px 11px; }
  .sort-fakten dt { font-size: 9.5px; letter-spacing: 0.1em; }
  .sort-fakten dd { margin: 3px 0 0; font-size: 13px; line-height: 1.4; }
}

.ansicht-3d-rahmen { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 470px; overflow: hidden; border-radius: var(--radius-klein); background: radial-gradient(120% 90% at 50% 28%, var(--white) 0%, var(--cream) 58%, var(--cream-deep) 100%); }
.ansicht-3d-flaeche { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: pan-y; outline: none; }
.ansicht-3d-flaeche:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.ansicht-3d-flaeche canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.ansicht-3d-flaeche canvas:active { cursor: grabbing; }
.ansicht-3d-flaeche.aktiv, .ansicht-3d-flaeche.aktiv canvas { touch-action: none; }
.ansicht-3d-marken { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.ansicht-3d-marken span { position: absolute; left: 0; top: 0; padding: 3px 9px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ink); background: rgba(255, 252, 246, 0.93); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(34, 28, 22, 0.08); }
.ansicht-3d-laden { position: absolute; top: 50%; left: 0; right: 0; margin: 0; transform: translateY(-50%); text-align: center; font-size: 14px; color: var(--ink-soft); }
/* Drehzeichen (drehZeichenKnopf): klein, unten links, mit dem Wort "Drehen", verdeckt die Stufe nicht.
   Der Finger wiegt sich dreimal hin und her, dann steht er still. */
.ansicht-3d-start { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px 0 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 10px rgba(34, 28, 22, 0.14); cursor: pointer; white-space: nowrap; }
.ansicht-3d-start[hidden] { display: none; }
.ansicht-3d-start svg { flex: none; width: 28px; height: 28px; transform-origin: 50% 80%; animation: dreh-zeichen 2.4s ease-in-out 0.6s 3; }
.ansicht-3d-start:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes dreh-zeichen { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-14deg); } 70% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .ansicht-3d-start svg { animation: none; } }
/* Freigeschaltet: ein schmaler Rahmen zeigt, dass der Finger jetzt dreht. */
@media (pointer: coarse) { .ansicht-3d-flaeche.aktiv { box-shadow: inset 0 0 0 2px var(--bronze); } }
.ansicht-3d-stand { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.ansicht-3d-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ansicht-3d-knoepfe .glas-knopf { margin-top: 0; }
.ansicht-3d-hinweis { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ansicht-3d-hinweis:empty { display: none; }
.ansicht-3d-meldung { margin: 10px 0 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--cream-light); border-radius: var(--radius-klein); }
/* Grossansicht (stufen-3d.js, Wunsch AN 25.09.2026): Knopf oben rechts in der
   Ansicht, Dialog ueber das ganze Fenster. Die Ansicht zieht mit ihren Knoepfen
   hinein; daneben, am Handy darunter, stehen die Karten fuer das Aussehen. */
.ansicht-3d-gross-knopf { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: rgba(255, 252, 246, 0.93); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px rgba(34, 28, 22, 0.08); cursor: pointer; }
.ansicht-3d-gross-knopf svg { flex: none; width: 16px; height: 16px; }
.ansicht-3d-gross-knopf:hover { border-color: var(--bronze); }
.ansicht-3d-gross-knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ansicht-3d-dialog .ansicht-3d-gross-knopf { display: none; }
html.ansicht-3d-offen { overflow: hidden; }
.ansicht-3d-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; color: var(--ink); background: var(--white); }
.ansicht-3d-dialog[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.ansicht-3d-dialog::backdrop { background: rgba(26, 22, 18, 0.6); }
.ansicht-3d-dialog-bild { position: relative; min-height: 0; }
.ansicht-3d-dialog .ansicht-3d-rahmen { height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
/* relative: Die unsichtbaren Radios der Reihen und Karten liegen absolut und gehoeren so zur scrollenden Leiste; sonst scrollt der Browser beim Fokus den ganzen Dialog und das 3D-Bild verschwindet. */
.ansicht-3d-dialog-leiste { position: relative; max-height: 46vh; overflow-y: auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--cream-light); }
.ansicht-3d-dialog-kopf { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -12px -16px 0; padding: 12px 16px 6px; background: var(--cream-light); }
.ansicht-3d-dialog-kopf .glas-knopf { margin-top: 0; }
.ansicht-3d-dialog-titel { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.ansicht-3d-dialog-hinweis { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ansicht-3d-karten { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.ansicht-3d-karten legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ansicht-3d-wahl { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.ansicht-3d-wahl[hidden] { display: none; }
.ansicht-3d-wahl legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ansicht-3d-wahl .ansicht-3d-dialog-hinweis { margin-top: 6px; }
.ansicht-3d-karten .wahl-karten { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ansicht-3d-karten .wahl-karte { padding: 8px 8px 10px; }
.ansicht-3d-karten .wahl-bild { overflow: hidden; border-radius: var(--radius-klein); background: var(--cream-light); }
.ansicht-3d-karten .wahl-bild canvas { display: block; width: 100%; height: 100%; }
.ansicht-3d-karten .wahl-titel { font-size: 13.5px; }
.ansicht-3d-dialog-knoepfe { margin-top: 14px; }
.ansicht-3d-dialog-knoepfe .ansicht-3d-stand { margin-top: 0; }
@media (min-width: 900px) {
  .ansicht-3d-dialog[open] { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 360px; }
  .ansicht-3d-dialog-leiste { max-height: none; padding: 20px 20px 24px; border-top: 0; border-left: 1px solid var(--line); }
  .ansicht-3d-dialog-kopf { top: -20px; margin: -20px -20px 0; padding: 20px 20px 6px; }
}
@media (pointer: coarse) {
  .ansicht-3d-gross-knopf { min-height: 44px; padding: 8px 14px; }
}

.mass-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mass-felder a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-klein); background: var(--white); color: var(--ink); font-size: 14px; line-height: 1.35; }
.mass-felder a:hover, .mass-felder a.mass-aktiv { border-color: var(--bronze-deep); }
.mass-felder a:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }
.mass-felder small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.mass-zeichen { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--bronze-deep); color: var(--white); font-size: 13px; font-weight: 700; vertical-align: middle; }
.pf-label .mass-zeichen { flex-basis: 20px; width: 20px; height: 20px; font-size: 11px; line-height: 1; }
.belag-kopf { padding: 36px 0 48px; background: var(--cream, #faf5ec); }
.belag-kopf-raster { display: grid; gap: 28px; align-items: center; }
.belag-kopf h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -.025em; margin: 18px 0; }
.belag-kopf p { max-width: 650px; line-height: 1.6; margin: 0 0 24px; }
.belag-kopf figure { margin: 0; }
.belag-kopf img { width: 100%; height: auto; max-height: 310px; object-fit: cover; border-radius: 12px; }
.belag-kopf figcaption { font-size: .82rem; color: #655a4f; margin-top: 8px; }
.belag-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.belag-wege a { display: flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1px solid #b8a592; border-radius: 6px; color: #33281e; text-decoration: none; }
.belag-wege a[aria-current] { background: #25221d; border-color: #25221d; color: #fff; }
.belag-raster { display: grid; gap: 24px; align-items: start; margin-top: 28px; }
.belag-vorschau { min-width: 0; }
.belag-ansicht, .belag-masshilfe { border: 1px solid #e0d3c3; border-radius: 12px; padding: 16px; margin-bottom: 20px; background: #fffdf8; }
.belag-masshilfe h3 { margin: 0 0 10px; font-size: 1.2rem; }
.belag-masshilfe p { line-height: 1.55; }
.belag-masshilfe svg { display: block; width: 100%; height: auto; }
.belag-masshilfe [data-belag-feld] { cursor: pointer; }
.belag-masshilfe svg [data-belag-feld]:focus { outline: none; }
.belag-masshilfe svg [data-belag-feld]:focus circle { stroke: #1b1b1b; stroke-width: 4; }
.belag-masshilfe .mass-felder { margin-top: 14px; }
.belag-buehne { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse at 45% 25%, #fffaf0, #e8dec9); }
.belag-buehne canvas { display: block; width: 100%; height: 100%; }
.belag-start { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.belag-start[hidden] { display: none; }
.belag-start span { font-size: 1.3rem; font-weight: 600; }
.belag-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.belag-aktionen button { font-size: .9rem; padding: 10px 14px; min-height: 44px; }
.belag-aktionen input { width: 20px; height: 20px; }
.belag-aktionen label { min-height: 44px; }
.belag-aufbau { font-size: .88rem; line-height: 1.55; color: #655a4f; margin: 18px 0; }
.belag-teile { list-style: none; padding: 0; margin: 0; }
.belag-teile li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 0; border-top: 1px solid #e5dacc; font-size: .88rem; }
.belag-raster .produkt-karte { grid-area: auto; margin: 0; min-width: 0; }
.belag-preis-titel { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.belag-preis-betrag { font-size: 2rem; font-weight: 700; margin: 10px 0 !important; }
.belag-preis-teile { list-style: none; padding: 0; }
.belag-preis-teile li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 7px 0; font-size: .85rem; }
.belag-info { display: grid; gap: 32px; line-height: 1.65; }
.belag-info ol { padding-left: 22px; }
.belag-info li { padding: 6px 0; }
.belag-dialog { border: 1px solid #bba88e; border-radius: 12px; padding: 16px; width: min(1200px, 96vw); max-width: 96vw; max-height: 94dvh; background: #fbf5eb; }
.belag-dialog::backdrop { background: rgba(20,17,13,.7); }
.belag-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.belag-dialog .belag-buehne { height: min(72dvh, 720px); aspect-ratio: auto; }
@media (min-width: 900px) {
  .belag-kopf-raster { grid-template-columns: 1.3fr 1fr; gap: 56px; }
  .belag-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .belag-info { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media (max-width: 759px) { .belag-kopf { padding: 20px 0 32px; } .belag-kopf img { max-height: 230px; } }