/* Produktseite im neuen Aufbau (Pilot 10.11.2026, server/produktseite-entwurf.mjs). Aus drei Entwürfen blieb A (kaufnah).
   Bausteine zuerst, dann unter "A, kaufnah" Anordnung, Abstände und Bewegung, am Ende "Einbau": die Kapitel unter dem Kaufteil
   jeder Produktseite (renderProduct). Kein Kasten je Abschnitt.
   Bisherige Abschnitte der Produktseite stehen als .pe-alt im Kapitel und behalten ihre eigenen Stile: die Grundregeln für
   Überschriften, Absätze und Bilder nehmen sie mit :not(:where(.pe-alt *)) aus (:where, damit das Gewicht der Regeln bleibt). */
main.pe-main{max-width:1240px}
.pe{--pe-kopfhoehe:232px;--pe-blau:#154e8a;--pe-orange:#a64b0d;--pe-text:68ch;font-size:16px;line-height:1.65}
.pe h1{margin:8px 0 18px;font-size:44px;font-weight:500;letter-spacing:-.035em;line-height:1.1}
.pe h2:not(:where(.pe-alt *)){margin:0;font-size:28px;line-height:1.2}
.pe h3:not(:where(.pe-alt *)){margin:0 0 6px;font-size:17px;line-height:1.35}
.pe p:not(:where(.pe-alt *)){margin:0 0 14px;max-width:var(--pe-text)}
/* public/shop/style.css gibt jedem header Fläche, Rand und Innenabstand des Seitenkopfs. */
.pe .pe-kopf{margin:0;padding:0;background:none;border:0;box-shadow:none}
.pe-lead{font-size:19px;line-height:1.55}
.pe-klein{font-size:13px;line-height:1.5;color:var(--t-muted)}
.pe figure:not(:where(.pe-alt *)){margin:0}
.pe img:not(:where(.pe-alt *)){display:block;max-width:100%;height:auto}
.pe-bild img{width:100%;aspect-ratio:1;object-fit:cover}
.pe figcaption:not(:where(.pe-alt *)){margin-top:8px;font-size:13px;color:var(--t-muted)}

/* Kaufteil */
.pe-kauf{margin-top:26px}
.pe-preis{margin:0 0 4px!important;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pe-wege{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:16px 0 14px}
.pe a.pe-knopf{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;min-width:240px;padding:12px 22px;background:var(--pe-blau);border-color:var(--pe-blau);color:#fff;font-weight:700;text-decoration:none}
.pe a.pe-knopf:hover{background:#0f3d6e;border-color:#0f3d6e}
.pe-telefon{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.pe a:focus-visible{outline:3px solid var(--pe-orange);outline-offset:3px}

/* Kurzfakten als Zeilen */
.pe-fakten{margin:22px 0 0;border-top:1px solid var(--t-line)}
.pe-fakten>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--t-line);font-size:14px;line-height:1.45}
.pe-fakten dt{color:var(--t-muted)}
.pe-fakten dd{margin:0;font-weight:600}

/* Kapitel */
.pe-kapitel{padding:56px 0;border-top:1px solid var(--t-line);scroll-margin-top:var(--pe-kopfhoehe)}
.pe-kapitel-kopf{margin-bottom:22px}
.pe-nr{margin:0 0 6px!important;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--pe-orange);font-variant-numeric:tabular-nums}
.pe-kapitel-inhalt>:last-child{margin-bottom:0}

.pe-orte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;margin:28px 0 0}
.pe-orte>div{padding-top:14px;border-top:2px solid var(--t-ink)}
.pe-orte dt{font-weight:700}
.pe-orte dd{margin:4px 0 0;color:var(--t-muted);font-size:15px;line-height:1.5}

.pe-tabelle{width:100%;max-width:760px;margin:0 0 26px;border-collapse:collapse;border-top:1px solid var(--t-line);font-size:15px;line-height:1.5}
.pe-tabelle th,.pe-tabelle td{padding:11px 0;border-bottom:1px solid var(--t-line);text-align:left;vertical-align:top}
.pe-tabelle th{width:34%;padding-right:16px;font-weight:500;color:var(--t-muted)}
.pe-tabelle td{font-weight:600}

.pe-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:760px;margin-top:24px}
.pe-fotos img{width:100%;aspect-ratio:3/2;object-fit:cover}

.pe-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin:0 0 24px;padding:0;list-style:none}
.pe-schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px}
.pe-schritt-nr{font-size:34px;font-weight:500;line-height:1;color:var(--pe-orange);font-variant-numeric:tabular-nums}
.pe-schritte p{margin:0;font-size:15px;line-height:1.55}
.pe-hinweis{font-weight:600}

.pe-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px}
.pe-zwei h3{margin-bottom:10px;font-size:19px}

.pe-fragen{margin:0;max-width:820px;border-top:1px solid var(--t-line)}
.pe-fragen>div{padding:18px 0;border-bottom:1px solid var(--t-line)}
.pe-fragen dt{font-size:17px;font-weight:700;line-height:1.4}
.pe-fragen dd{margin:6px 0 0;max-width:var(--pe-text)}

.pe-verwandte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;margin:0;padding:0;list-style:none}
.pe-verwandt{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:start;text-decoration:none}
.pe-verwandt img{width:112px;aspect-ratio:1;object-fit:cover}
.pe-verwandt-text{display:grid;gap:4px;font-size:15px;line-height:1.5}
.pe-verwandt strong{font-size:17px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pe-verwandt:hover strong{text-decoration-thickness:2px}
.pe-verwandt-text>span{color:var(--t-muted)}
.pe-verwandt-text>.pe-verwandt-preis{color:var(--t-ink);font-weight:700}
.pe-wissen{margin-top:28px!important;font-size:15px}

/* A, kaufnah. Runde 2 (10.11.2026): mehr Luft und klare Kapitelgrenzen. Abstände nur aus der Stufung --pe-a1 bis --pe-a6:
   eng innerhalb einer Gruppe, weit zwischen Gruppen, sehr weit zwischen Kapiteln. Die Kapitel wechseln zwischen hellem
   und weißem Grund über die volle Breite, der Kapitelkopf mit Zähler bleibt am Desktop neben dem Inhalt stehen. */
.pe-a{--pe-a1:8px;--pe-a2:16px;--pe-a3:24px;--pe-a4:40px;--pe-a5:64px;--pe-a6:112px}
.pe.pe-a .pe-kopf{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--pe-a5);align-items:start;padding-bottom:var(--pe-a5)}
.pe-a .pe-lead{margin-bottom:0}
.pe-a .pe-kauf{margin-top:var(--pe-a4)}
.pe-a .pe-kopf .pe-fakten{margin-top:var(--pe-a4)}
.pe-a .pe-kopf .pe-fakten>div{padding:12px 0}
.pe-sprung{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--pe-a5);align-items:start;padding:var(--pe-a3) 0 var(--pe-a5);border-top:1px solid var(--t-line)}
.pe-sprung-titel{margin:10px 0 0!important;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.pe-sprung ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--pe-a4);max-width:760px;margin:0;padding:0;list-style:none;font-size:15px;font-weight:600}
.pe-sprung a{display:flex;align-items:baseline;gap:14px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--t-line);text-decoration:none}
.pe-sprung a:hover{border-bottom-color:var(--t-ink)}
.pe-a .pe-kapitel{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--pe-a5);padding:var(--pe-a6) 0;border-top:0}
.pe-a .pe-kapitel:nth-of-type(odd){background:var(--t-white);box-shadow:0 0 0 100vmax var(--t-white);clip-path:inset(0 -100vmax)}
/* Nachttest 12.11.2026 (klebend-unter-kopf, Regel vom 18.10.2026: nichts klebt unter dem Menü): Kapitelköpfe kleben nicht mehr; am Ende
   kurzer Kapitel rutschten sie unter den Seitenkopf. */
.pe-a .pe-kapitel-kopf{align-self:start;margin:0}
.pe-a .pe-nr{display:flex;align-items:center;gap:10px;margin-bottom:var(--pe-a3)!important;color:var(--t-muted);font-weight:500}
/* Zähler in Orange: das helle Orange als Fläche mit
   dunkelblauer Zahl, wie in public/architecture/werkbank.css. Als Schriftfarbe auf Weiß wäre es zu blass zum Lesen. */
.pe-a .pe-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 7px;background:var(--k-orange,#f2884b);color:var(--t-ink);font-size:14px;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pe-sprung a .pe-zahl{flex:none;align-self:center}
.pe-a .pe-schritt-nr{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--k-orange,#f2884b);color:var(--t-ink);font-size:20px;font-weight:800}
.pe-a .pe-kapitel-kurz{margin:var(--pe-a2) 0 0;font-size:15px;line-height:1.5;color:var(--t-muted)}
.pe-a .pe-kapitel-inhalt p:not(:where(.pe-alt *)){margin-bottom:var(--pe-a2)}
.pe-a .pe-orte{gap:var(--pe-a3) var(--pe-a4);margin-top:var(--pe-a5)}
.pe-a .pe-orte>div{padding-top:var(--pe-a2)}
.pe-a .pe-tabelle{margin-bottom:var(--pe-a5)}
.pe-a .pe-tabelle th,.pe-a .pe-tabelle td{padding:14px 0}
.pe-a .pe-tabelle th{padding-right:var(--pe-a2)}
.pe-a .pe-fotos{gap:var(--pe-a3);margin-top:var(--pe-a4)}
.pe-a .pe-schritte{gap:var(--pe-a4);margin-bottom:var(--pe-a5)}
.pe-a .pe-schritte li{grid-template-columns:1fr;gap:var(--pe-a2);padding-top:var(--pe-a2);border-top:2px solid var(--t-ink)}
.pe-a .pe-schritte h3{margin-bottom:var(--pe-a1)}
.pe-a .pe-zwei{gap:var(--pe-a4) var(--pe-a5)}
.pe-a .pe-zwei h3{margin-bottom:var(--pe-a2)}
.pe-a .pe-fragen>div{padding:var(--pe-a3) 0}
.pe-a .pe-fragen dd{margin-top:var(--pe-a1)}
.pe-a .pe-verwandte{gap:var(--pe-a4) var(--pe-a5)}
.pe-a .pe-wissen{margin-top:var(--pe-a5)!important}
/* Bewegung (public/shop/produktseite-entwurf.mjs): Einblenden beim Scrollen und eine orange Leselinie am oberen Rand.
   Versteckt wird nur mit data-bewegt, das setzt das Skript; ohne Skript und bei "Bewegung reduzieren" steht alles da. */
.pe-a[data-bewegt] [data-ein]{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.pe-a[data-bewegt] [data-ein="1"]{transition-delay:.07s}
.pe-a[data-bewegt] [data-ein="2"]{transition-delay:.14s}
.pe-a[data-bewegt] [data-ein="3"]{transition-delay:.21s}
.pe-a[data-bewegt] [data-ein="4"]{transition-delay:.28s}
.pe-a[data-bewegt] [data-ein][data-da]{opacity:1;transform:none}
.pe-a[data-bewegt] .pe-fotos [data-ein]{transform:scale(.96)}
.pe-a[data-bewegt] .pe-fotos [data-ein][data-da]{transform:none}
.pe-a .pe-zahl{transition:transform .5s cubic-bezier(.22,1,.36,1) .15s}
.pe-a[data-bewegt] [data-ein]:not([data-da]) .pe-zahl{transform:scale(.6)}
.pe-fortschritt{position:fixed;inset:0 0 auto 0;z-index:90;height:4px;background:var(--k-orange,#f2884b);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){.pe-fortschritt{animation:pe-fortschritt linear both;animation-timeline:scroll(root)}}
@keyframes pe-fortschritt{to{transform:scaleX(1)}}
.pe-verwandt img{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pe-verwandt:hover img{transform:scale(1.04)}
/* Letztes Kapitel auf weißem Grund: Abstand zum Seitenfuß kommt aus dem Kapitel selbst. */
main.pe-main:has(.pe-a),main.p1-main:has(>.pe-einbau){padding-bottom:0}

.pe-fakten-breit{max-width:760px;margin:0 0 var(--pe-a4)}
.pe-fakten-breit>div{grid-template-columns:34% minmax(0,1fr);font-size:15px;padding:14px 0}

/* Einbau (10.11.2026): Übersicht und Kapitel unter dem Kaufteil der bestehenden Produktseite, auch unter den Konfiguratoren.
   Schrift und Zeilenabstand der Seite bleiben für die bisherigen Abschnitte, ihre eigenen Abstände und Trennlinien nach oben
   entfallen, weil das Kapitel sie stellt. */
.pe-einbau{margin-top:var(--pe-a6);clear:both}
/* Unter dem Glas-Konfigurator blendet public/architecture/glass-sheet.css alles nach dem Konfigurator aus (gc-layout-49);
   die Kapitel bleiben. Die feste Kaufleiste der Werkbank liegt über dem Seitenende, deshalb unten ihr Platz als Abstand. */
main.gc-page:has(.gc-layout-49)>#glas-konfigurator~.pe-einbau{display:block}
main.wb-seite>.pe-einbau{padding-bottom:calc(var(--plus-purchase-height,120px) + var(--pe-a3))}
.pe-kapitel-kopf h2{hyphens:auto}
.pe-alt{font-size:1rem;line-height:1.55}
.pe-a .pe-kapitel-inhalt>.pe-alt{margin-top:0;padding-top:0;border-top:0}
.pe-a .pe-kapitel-inhalt>.pe-alt:not(:first-child){margin-top:var(--pe-a4)}
.pe-a .pe-kapitel-inhalt>.p1-text.pe-alt{gap:var(--pe-a4)}
.pe-a .pe-kapitel-inhalt>.vb-faq.pe-alt{max-width:820px}
.pe-zwischen{margin:var(--pe-a5) 0 var(--pe-a3)!important;font-size:19px!important}
.pe-einstieg{margin-bottom:var(--pe-a4)}
.pe-einstieg>p{font-size:17px}
.pe-einstieg .pe-fakten-breit{margin:var(--pe-a3) 0 0}
/* Reiter der Artikeldetails im Kapitel: Abschnittsüberschriften sind hier h3; mit Skript trägt der Reiter den Namen. */
.pe-kapitel .p1-reiter[data-reiter-bereit] [role="tabpanel"]>h3:first-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pe-kapitel .p1-reiter [role="tabpanel"]>h3:first-child{font-size:22px;margin:0 0 16px}

@media(max-width:1100px){
  .pe-a{--pe-a5:48px;--pe-a6:80px}
  .pe-a .pe-kapitel,.pe-sprung{grid-template-columns:1fr;gap:var(--pe-a3)}
  .pe-a .pe-kapitel-kopf{position:static}
  .pe-a .pe-kapitel-inhalt{margin-top:var(--pe-a2)}
  .pe-sprung-titel{margin-top:0!important}
}
@media(max-width:860px){
  .pe{--pe-kopfhoehe:176px}
  .pe h1{font-size:30px}
  .pe h2{font-size:23px}
  .pe-lead{font-size:17px}
  .pe-kapitel{padding:40px 0}
  .pe.pe-a .pe-kopf{grid-template-columns:1fr;gap:24px;padding-bottom:32px}
  .pe-bild img{aspect-ratio:4/3}
  .pe-orte,.pe-schritte,.pe-zwei,.pe-verwandte{grid-template-columns:1fr}
  .pe-a{--pe-a4:32px;--pe-a5:40px;--pe-a6:64px}
  .pe-sprung ol{grid-template-columns:1fr}
  .pe-a .pe-schritte li{grid-template-columns:auto minmax(0,1fr);border-top:0;padding-top:0}
  .pe-a .pe-schritt-nr{width:36px;height:36px;font-size:17px}
  .pe a.pe-knopf{width:100%}
  .pe-tabelle th{width:42%}
}
@media(max-width:420px){
  .pe-fotos{grid-template-columns:1fr}
  .pe-verwandt{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .pe-verwandt img{width:84px}
}