/* 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-produktbild picture, .shop-kachel-produktbild img { object-fit: contain; background: var(--white); }
.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; }
}