/* ============================================================================
   PRODUKTDETAIL-DESIGNSYSTEM (pd-*)
   ============================================================================
   FIX (R12.1): Dieser Block lag als <style> im Rumpf von product_info_layout.php
   und ging damit bei JEDEM Produktseitenaufruf ungecacht ueber die Leitung
   (~42 KB). Er ist vollstaendig statisch — keine PHP-Variablen, keine
   %PLATZHALTER% — und deshalb 1:1 auslagerbar.

   KASKADE: Die Datei wird in getStylesheetResources() (template_top.php) NACH
   stylesheet.css eingehaengt. Damit bleibt die relative Reihenfolge zu
   stylesheet.css und zu den verbliebenen Inline-<style>-Bloecken des Layouts
   exakt erhalten — die Darstellung aendert sich nicht.

   Beim Aendern: Version in getStylesheetResources() hochzaehlen.
   ============================================================================ */

.modal { display:none !important; }
/* ============================================================
   Redesign: produkt_daten_container_beschreibung_li
   Konsolidierte, einzige gültige Version (SSOT) — Stand: aktuell
   ============================================================ */

/* Split-Screen: Galerie links (~fast halbe Bildschirmbreite), Konfigurator rechts.
   ZWEI direkte Kinder in DOM-Reihenfolge: #linke_seite_produktinfo und die
   Beschreibungsspalte (namenloses div). Das <h1> steckt IM zweiten Kind, ganz oben
   in #produkt_beschreibung_div — die Spaltenaufteilung haengt damit nicht daran,
   dass dieses Stylesheet geladen ist. */
#erste_zeile_ul {
    display: grid;
    grid-template-columns: min(48vw, 640px) 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 90px; /* Platz für sticky Warenkorb-Leiste unten */
}
@media (max-width: 900px) {
    #erste_zeile_ul { grid-template-columns: 1fr; gap: 32px; padding-bottom: 90px; }
    #linke_seite_produktinfo { position: static !important; height: auto; }
}

/* Produkttitel — EINZIGES <h1> der Seite (R1, 13.08.2026).
   DESKTOP: keine Sonderregel noetig. Das h1 ist das erste Element von
   #produkt_beschreibung_div und steht damit von selbst oben in der rechten
   Spalte, unmittelbar ueber der Trust-Zeile und der Beschreibung.

   UNTER 900px soll es ueber dem Bild stehen. Dafuer geben die beiden Huellen
   zwischen Grid und h1 ihre Box ab (display: contents): der Titel und seine
   Geschwister werden dadurch selbst zu Rasterzellen, und der Titel laesst sich
   per 'order' vor die Bildspalte ziehen, ohne dass sich am DOM etwas aendert.
   Kein zweites h1, kein JavaScript, keine Umstellung des Markups.

   Warum nicht der umgekehrte Weg (h1 als direktes Grid-Kind): Dann bestimmt
   ausschliesslich dieses Stylesheet, was in welcher Spalte landet. Faellt es aus
   oder haengt ein alter Stand im Cache, fallen die drei Kinder der Reihe nach in
   die Zellen — Titel links, Bild rechts, Beschreibung links darunter. Genau
   dieser Zustand trat am 13.08. auf.

   #produkt_beschreibung_div traegt keine eigene Flaeche, keinen Rahmen und kein
   Innenmass; die abgegebene Box kostet deshalb nichts. Nachsehen, falls dort je
   Hintergrund oder Abstand hinzukommt.

   row-gap wird dabei auf 0 gesetzt: die Zwischenraeume der Abschnitte kommen aus
   deren eigenen Margen (.pd-section: margin-bottom 36px). Ohne diese Zeile kaeme
   der Rasterabstand von 32px zu JEDEM Abschnitt hinzu. Die beiden Abstaende, die
   sonst der gap erzeugt hat, stehen deshalb ausdruecklich am Titel und an der
   Bildspalte. */
@media (max-width: 900px) {
    #erste_zeile_ul { row-gap: 0; }
    #erste_zeile_ul > div:not(#linke_seite_produktinfo),
    #erste_zeile_ul #produkt_beschreibung_div { display: contents; }

    h1.produkt_title  { order: -1; margin: 0 0 12px; }
    #linke_seite_produktinfo { margin-bottom: 32px; }
}
/* height:100vh ist funktional, nicht kosmetisch: die Spalte darf nie hoeher als der
   sichtbare Bereich werden, sonst braucht das Karussell nach dem Loesen des Sticky
   noch eine volle Bildschirmhoehe Scrollweg und begleitet die folgenden Abschnitte. */
#linke_seite_produktinfo { position: sticky; top: 32px; align-self: start; height: 100vh; }

/* Grundbausteine */
.pd-section { margin-bottom: 36px; }
/* Konfigurations-Blöcke (Größe, Material, Materialstärke, Oberkante, Zusätzliche Optionen)
   rechte Seite, vor "Hochbeet individualisieren": sichtbar abgesetzte Panel-Fläche.
   Innenliegende Karten (pd-option-card/pd-mini-card) bleiben weiß und heben sich davon ab. */
.pd-config-panel { background: var(--color-bg-panel); border: 1px solid var(--color-border-panel); border-radius: var(--border-radius-md); padding: 18px 20px; }
.pd-section-label { display: flex; align-items: center; gap: 8px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 14px; font-weight: 600; }
.pd-section-icon { color: var(--color-green); width: 24px; height: 24px; vertical-align: -4px; margin-right: 2px; flex-shrink: 0; }
/* Gewaehlter Wert rechts in der Blocktitelzeile: gleiches gruenes Haekchen wie auf
   den Auswahlkarten, damit "gewaehlt" seitenweit dasselbe Zeichen hat. */
.pd-section-label { display: flex; align-items: center; gap: 8px; }
.pd-section-value { margin-left: auto; background: #eaf1ec; color: #2c5540; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 12px; min-width: 0; }
.pd-section-label > .pd-help { flex-shrink: 0; }
.pd-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--color-border); border-radius: 50%; font-size: 10px; color: var(--color-secondary); cursor: help; text-transform: none; letter-spacing: normal; font-weight: 400; }

/* Preis */
.pd-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 28px; }
.pd-price-block .pd-price { font-size: 28px; font-weight: 600; color: var(--color-primary); }



/* Karten MIT Bild (Material, Oberkante, hervorgehobene Zusatzoptionen) */
.pd-card-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pd-option-card { flex: 1 1 160px; min-width: 0; position: relative; display: flex; overflow: hidden; padding: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); cursor: pointer; transition: var(--transition-fast); background: var(--color-bg-main); }
.pd-option-card:hover { border-color: var(--color-green); }
.pd-option-card.checked { border: 1.5px solid var(--color-green); background: #f4f8f5; }
.pd-option-card .radio-input { position: absolute; opacity: 0; pointer-events: none; }
.pd-card-image { position: relative; width: 96px; flex-shrink: 0; overflow: hidden; background: var(--color-bg-secondary); }
.pd-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-card-body { padding: 12px 14px; flex: 1; min-width: 0; }
.pd-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; }
.pd-option-card h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-primary); }
.pd-badge-price { background: transparent; color: var(--color-secondary); padding: 3px 0; border-radius: 0; font-size: 11.5px; font-weight: 400; white-space: nowrap; }
.pd-spec-tag { display: block; margin-top: 6px; font-size: 11.5px; color: var(--color-secondary); }
/* Feature-Karten (Schneckenschutz, Doppelte Aussenfalz): untereinander,
   volle Breite, breiteres Bild links — für Karten mit viel Text (Variante A) */
.pd-feature-card-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.pd-feature-card-stack .pd-option-card { flex: 1 1 auto; width: 100%; }
.pd-feature-card-stack .pd-card-image { width: 180px; }
@media (max-width: 480px) { .pd-feature-card-stack .pd-card-image { width: 110px; } }

/* Kurz-Auszug aus dem jeweiligen Info-Modal direkt in der Karte */
.pd-card-excerpt { display: block; margin-top: 8px; font-size: 11.5px; color: var(--color-secondary); line-height: 1.55; overflow-wrap: anywhere; }

/* Modifier fuer die Oberkanten-Karten (#pd_sec_oberkante): Bild links fest 96px.
   Kopfzeile bekommt min-height = Bildhoehe, damit der Excerpt-Breakout erst
   UNTER dem Bild beginnt und nicht darueber liegt (sonst Ueberlappung, da der
   Excerpt laut HTML in .pd-card-body verschachtelt ist und sonst direkt nach
   der kurzen Kopfzeile startet). Scope auf .pd-card-row--edge (SRP), Basis-
   .pd-option-card fuer Material-Swatch/Feature-Stack bleibt unveraendert (OCP). */
.pd-card-row--edge .pd-card-image { width: 96px; height: 96px; flex-shrink: 0; }
.pd-card-row--edge .pd-card-body { padding: 0 14px; display: flex; flex-direction: column; }
.pd-card-row--edge .pd-card-header { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-card-row--edge .pd-spec-tag { display: none; } /* Info steckt jetzt im Excerpt, Tag entfaellt */
.pd-card-row--edge .pd-card-excerpt {
  width: calc(100% + 96px);
  margin: 0 -96px 10px -96px; /* Breakout ueber die Bildbreite, startet erst nach der 96px-Kopfzeile */
  padding: 10px 14px 0;
  border-top: 1px solid var(--color-border);
}

/* Material-Swatch-Variante: EIGENES Layout (Bild oben, Body unten) — bewusst
   auf .pd-swatch beschränkt statt an der Basisklasse .pd-option-card geändert,
   damit Oberkante/Zusatzoptionen (nutzen dieselbe Basisklasse, aber horizontales
   Bild-Thumbnail-Layout) unverändert bleiben (SRP: eine Variante, ein Scope). */
.pd-option-card.pd-swatch { flex: 1 1 140px; flex-direction: column; }
.pd-swatch .pd-card-image { position: relative; width: 100%; height: 72px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg-main); }
.pd-swatch .pd-card-body { padding: 10px 12px 12px; }
/* Rostton als eigene Variable: Baustahl DC01 und Cortenstahl teilen ihn seit
   dem 12.08.2026. DC01 trug zuvor einen Grauverlauf (#9a9a9a -> #5c5c5c), was
   den Auslieferungszustand zeigte, nicht den Zustand im Garten - auch Baustahl
   rostet. Einmal definiert, damit beide Flaechen nicht auseinanderlaufen. */
:root { --swatch-rost: linear-gradient(135deg, #a45c2e, #7a4322); }

.pd-material-swatch { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
/* DC01 (13.08.2026, Vorgabe des Nutzers): derselbe Rost, nur etwas dunkler.
   Bis dahin waren beide Flaechen zeichengleich - zwei Auswahlkreise, die sich
   nicht unterscheiden liessen (auch Punkt 11.3 der Tester-Vorgabe).
   Bewusst ueber brightness() aus DERSELBEN Variablen abgeleitet statt als zweiter
   Farbwert: So bleibt es ein Rostton und kann nicht von Cortenstahl wegdriften,
   wenn --swatch-rost je nachgestellt wird. Ergibt rund #8b4e27 -> #68391d. */
.pd-material-swatch--dc01 { background: var(--swatch-rost); filter: brightness(.85); }
.pd-material-swatch--corten { background: var(--swatch-rost); }
.pd-material-swatch--edelstahl { background: linear-gradient(135deg, #e8eaec 0%, #c3c7cc 45%, #8e939a 100%); }

/* Karte OHNE Bild (Materialstärke) — ausschließlich hier verwendet,
   daher direkte Anpassung ohne Scope nötig */
.pd-mini-card { flex: 1 1 160px; min-width: 0; position: relative; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 14px 16px; cursor: pointer; transition: var(--transition-fast); background: var(--color-bg-main); }
.pd-mini-card:hover { border-color: var(--color-green); }
.pd-mini-card.checked { border: 1.5px solid var(--color-green); background: #f4f8f5; }
.pd-mini-card .radio-input { position: absolute; opacity: 0; pointer-events: none; }
.pd-mini-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pd-mini-card h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-primary); overflow-wrap: anywhere; }
.pd-mini-desc { display: block; font-size: 12px; color: var(--color-secondary); line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }

/* Details-Bereich (Produktangaben/Lieferumfang/Details, Vorschlag 2) */
.pd-desc-excerpt-wrap { position: relative; margin-bottom: 16px; }
.pd-desc-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.pd-desc-excerpt { font-size: 13px; color: var(--color-secondary); line-height: 1.6; max-height: 4.8em; overflow: hidden; position: relative; }
.pd-desc-excerpt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(to bottom, transparent, var(--color-bg-main)); }
.pd-desc-toggle-input:checked ~ .pd-desc-excerpt { max-height: none; }
.pd-desc-toggle-input:checked ~ .pd-desc-excerpt::after { display: none; }
.pd-desc-more, .pd-desc-less { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-green); cursor: pointer; }
.pd-desc-less { display: none; }
.pd-desc-toggle-input:checked ~ .pd-desc-more { display: none; }
.pd-desc-toggle-input:checked ~ .pd-desc-less { display: inline-block; }

/* ENTFERNT (B6.4): .pd-detail-list — kein Markup vorhanden. Vorgaengername von
   .pd-dimension-list; die Umbenennung wurde im Markup vollzogen, die alte Regel
   blieb hier stehen. */
.pd-detail-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-green); flex-shrink: 0; }
/* Bedingt sichtbare *_angabe-Elemente bleiben per bestehender globaler Regel
   (Zeile ~3622: display:none) gesteuert, hier nur Layout innerhalb der Tags/Zeilen */

.pd-manufacturer-info { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); background: var(--color-bg-secondary); }

/* ============================================================================
   FRAGEN-SEKTION (14.08.2026)
   ============================================================================
   Kontaktwege und Produkt-FAQ stehen jetzt in EINER Sektion. Die Klasse kommt zu
   .pd-manufacturer-info hinzu und erbt deren Rahmen, Flaeche und Innenmass - es
   gibt bewusst keinen zweiten Rahmen und keine zweite Ueberschrift. Ergaenzt wird
   nur, was durch die neuen Kinder noetig ist.

   WARUM die Titel hier entrahmt werden: .addon-title-produkte-section bringt aus
   stylesheet.css:1124 eine eigene Panelflaeche samt Rahmen mit - sinnvoll, solange
   die Abschnitte frei auf der Seite stehen. Innerhalb dieser Box ergaebe das
   Rahmen im Rahmen. Die Aufklapp-Mechanik, der Winkel und die IDs bleiben davon
   unberuehrt; verandert wird ausschliesslich die Flaeche.

   Die Regeln gelten NUR innerhalb von .pd-fragen. .pd-manufacturer-info allein
   wird auch von pd_kontakt_block() und pd_hersteller_box() benutzt - dort aendert
   sich nichts. */
.pd-fragen .addon-title-produkte-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 10px 0 4px;
    font-size: 13.5px;
}
.pd-fragen [id$="_container"] {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 0 6px;
    margin-bottom: 0;
}
/* Dezenter Trenner zwischen Kontaktzeile und erster Frage - die einzige optische
   Zaesur in der Sektion, damit die beiden Teile lesbar bleiben, ohne wie zwei
   Bloecke zu wirken. */
.pd-fragen-trenner {
    height: 1px;
    background: var(--color-border-light);
    margin: 14px 0 4px;
}

/* ============================================================================
   AUFKLAPPER ALS KLASSE (14.08.2026)
   ============================================================================
   Die Abschnitte unter "… individualisieren" klappen ueber .active auf. Die
   Regeln dafuer stehen in stylesheet.css ab Zeile 3413 - als AUFZAEHLUNG VON IDs.
   Jeder neue Abschnitt muss dort in ZWEI Listen nachgetragen werden, sonst klappt
   er nicht zu. Genau das war bei den vier FAQ-Abschnitten passiert: Der Klick
   setzte .active, sichtbar geschah nichts, sie standen dauerhaft offen.

   Diese Klasse leistet dasselbe, ohne Liste. Neue Aufklapper tragen sie und
   funktionieren; die 15 bestehenden IDs bleiben unangetastet, damit hier kein
   zweiter Satz Regeln fuer dieselben Elemente entsteht.

   Werte bewusst identisch zu stylesheet.css:3432 und :3462 - dieselbe Bewegung,
   damit die FAQ nicht anders aufgeht als der Abschnitt darueber. */
.pd-aufklapp {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.50s ease-out;
}
.pd-aufklapp.active {
    max-height: 6000px;
    transition: max-height 1.0s ease-in;
}
.pd-manufacturer-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: 10px; }

/* Fragen zum Hochbeet: Telefon/E-Mail-Kacheln + aufklappbares Kontaktformular (CSS-only Toggle) */
.pd-contact-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.pd-contact-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-contact-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 10px 12px; text-decoration: none; color: var(--color-green); cursor: pointer; }
.pd-contact-option-title { display: block; font-size: 12px; font-weight: 600; color: var(--color-primary); }
.pd-contact-option-sub { display: block; font-size: 10.5px; color: var(--color-secondary); }
.pd-contact-option-sub.pd-contact-less { display: none; }
.pd-contact-toggle-input:checked ~ .pd-contact-options .pd-contact-option--toggle { border-color: var(--color-green); background: #f4f8f5; }
.pd-contact-toggle-input:checked ~ .pd-contact-options .pd-contact-more { display: none; }
.pd-contact-toggle-input:checked ~ .pd-contact-options .pd-contact-less { display: block; }
.pd-contact-form { display: none; border-top: 1px solid var(--color-border-light); margin-top: 14px; padding-top: 14px; }
.pd-contact-toggle-input:checked ~ .pd-contact-form { display: block; }
.pd-contact-form form input,
.pd-contact-form form textarea { width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.pd-contact-form form button { width: auto; }

/* Auswahl-Häkchen auf aktiver Karte/Zeile */
.pd-option-card.checked::after,
.pd-mini-card.checked::after {
    content: '✓'; position: absolute; bottom: 8px; right: 8px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--color-green); color: #fff; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.pd-addon-row { position: relative; }

/* Hero-Karte (empfohlene Option): gleiche Randstärke wie alle anderen —
   nur das Badge markiert sie, kein zusätzlicher Rahmen (Fix: störte beim Klick) */
.pd-option-card.pd-hero,
.pd-mini-card.pd-hero { flex: 1.4 1 200px; }
.pd-option-card.pd-hero .pd-card-body { padding: 16px 18px; }
.pd-option-card.pd-hero h3,
.pd-mini-card.pd-hero h3 { font-size: 15px !important; }

/* "Beliebt"-Badge: rein visuell, blockiert nie Klicks auf die darunterliegende Karte */
.pd-badge-popular {
    position: absolute; top: -1px; left: 12px;
    background: var(--color-green); color: #fff;
    font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 0 0 4px 4px;
    z-index: 1; pointer-events: none; border: none; box-shadow: none;
}

/* Preis-Delta pro Zusatzoption */
.price-addon { color: var(--color-green); font-weight: 600; }

/* Zusatzoptionen (Checkbox-Zeilen ohne Bild) */
.pd-addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .pd-addon-grid { grid-template-columns: 1fr; } }
.pd-addon-row { display: flex; align-items: flex-start; justify-content: space-between; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 12px 14px; font-size: 13px; gap: 10px; transition: var(--transition-fast); }
.pd-addon-row.checked,
.pd-addon-row:has(.checkbox-input:checked) { border: 1.5px solid var(--color-green); background: #f4f8f5; }
.pd-left { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.pd-addon-row > .pd-help { flex-shrink: 0; margin-left: 8px; }
/* Info-Icon behaelt seine Groesse, damit der Preis im Label nicht dagegenlaeuft */
/* Zwischenwände-Stückzahl: Segmented-Control statt +/- Stepper (Stil wie .pd-size-preset: Pille, var(--color-*)-Tokens der Seite) */
#qc_zwischenwaende > span[id$="_minus"],
#qc_zwischenwaende > span[id$="_plus"],
#qc_zwischenwaende > input { display: none; }
/* FIX (R5.2): --color-border-strong war nie definiert; die border-Deklaration fiel
   als 'invalid at computed-value time' aus und die Segmented-Control hatte gar
   keinen Rahmen. Ersetzt durch das vorhandene --color-border-panel. */
.pd-zw-segmented { display: inline-flex; border: 1px solid var(--color-border-panel); border-radius: var(--border-radius-md); overflow: hidden; }
.pd-zw-segment { padding: 5px 11px; font-size: 12px; color: var(--color-secondary); cursor: pointer; border-left: 1px solid var(--color-border); transition: var(--transition-fast); }
.pd-zw-segment:first-child { border-left: none; }
.pd-zw-segment:hover { background: var(--color-bg-secondary); }
.pd-zw-segment.active { background: #f4f8f5; color: var(--color-green); font-weight: 600; }
/* Icon + einsätziger Beschreibungstext je Zusatzoption (Herkunft: jeweiliges Info-Modal, s. addon-title-produkte-section) */
.pd-addon-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--color-green); }
.pd-addon-main { flex: 1; min-width: 0; }
.pd-addon-desc { display: block; font-size: 11px; color: var(--color-secondary); margin-top: 3px; }

/* Kundenbewertungen (Vorschlag 3): Gesamtbewertung + Bildergalerie */
.pd-reviews-summary { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 6px; }
.pd-reviews-score { font-size: 22px; font-weight: 600; color: var(--color-primary); }
.pd-reviews-meta { display: flex; flex-direction: column; }
.pd-reviews-stars { font-size: 14px; color: #f5c518; line-height: 1; }
.pd-reviews-count { font-size: 11px; color: var(--color-secondary); }
.pd-reviews-gallery { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 2px; }
.pd-reviews-photo { min-width: 90px; aspect-ratio: 1 / 1; border-radius: var(--border-radius-sm); background: var(--color-bg-secondary); flex-shrink: 0; }
.pd-reviews-photo--more { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--color-secondary); }

/* Größe wählen: Grid mit Maßfeldern links, Sidebar-Buttons rechts */
.pd-groesse-layout { display: grid; grid-template-columns: 1fr 180px; gap: 16px; align-items: start; }
@media (max-width: 640px) { .pd-groesse-layout { grid-template-columns: 1fr; } }
.pd-groesse-sidebar { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--color-border-light); padding-left: 14px; }
@media (max-width: 640px) { .pd-groesse-sidebar { border-left: none; border-top: 1px solid var(--color-border-light); padding-left: 0; padding-top: 12px; flex-direction: row; flex-wrap: wrap; } }
.pd-sidebar-link { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--color-green); background: none; border: none; border-bottom: 1px solid var(--color-green); padding: 0 0 1px; width: fit-content; cursor: pointer; font-family: inherit; }
.pd-sidebar-link svg { width: 24px; height: 24px; flex-shrink: 0; }

.pd-dims-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.pd-link { font-size: 12px; color: var(--color-green); text-decoration: none; border-bottom: 1px solid var(--color-green); cursor: pointer; }
/* ENTFERNT (B6.4): .pd-link-btn — kein Markup vorhanden. Inhaltlich fast identisch mit
   .pd-link darueber; der einzige Kandidat (#masse_uebernehmen) traegt .pd-link
   .pd-link-primary. */
.pd-link-primary { display: inline-block; background: var(--color-green); color: #fff; border: none; border-bottom: none; padding: 8px 16px; border-radius: var(--border-radius-sm); font-weight: 600; text-decoration: none; transition: var(--transition-fast); }
.pd-link-primary:hover { background: var(--color-primary-dark); }

/* Maßfeld-Icons: EINZIGE gültige Definition, gilt für alle Formen.
   Selektoren decken beide Verwendungsorte ab (SSOT, keine doppelten Icon-Daten):
   - ".dimension-label"                         -> Bereich "Größe wählen" (Eingabefelder)
   - ".pd-dimension-list--icons .detail-label"   -> Bereich "Abmessungen" (Anzeige, %GROESSENANGABE%) */
.dimension-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
/* gap 6 -> 10 (14.08.2026): Abstand zwischen Symbol und Beschriftung auf Wunsch
   vergroessert. Gilt fuer beide Bauarten - Maske und Inline-SVG. */
.dimension-label { order: -1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; color: var(--color-secondary); }

/* ============================================================================
   MASS-SYMBOLE ALS INLINE-SVG (14.08.2026)
   ============================================================================
   Zweite Bauart neben der Maske aus .dimension-label[data-dim]::before, und zwar
   aus einem sachlichen Grund: Die Symbole der Formen Rund, L, U und Abgesetzt
   zeigen die KONTUR DER FORM mit einem Masspfeil an genau der Kante, um die es im
   jeweiligen Feld geht. Vier generische Masken (Laenge/Breite/Hoehe/Durchmesser)
   koennen das nicht leisten - 'Laenge 2' bei der U-Form ist eine andere Kante als
   'Laenge 1', mit demselben Symbol waere die Zuordnung geraten.

   Ein Feld traegt deshalb ENTWEDER data-dim (Maske) ODER ein .dimension-icon,
   niemals beides - sonst stuenden zwei Symbole uebereinander.

   Die Symbole sitzen im Textfluss vor der Beschriftung; .dimension-label ordnet
   als Flex-Spalte, also landet das Symbol darueber - dieselbe Anordnung wie bei
   der Maskenvariante. */
.dimension-icon {
    display: block;
    order: -2;                       /* vor dem Label, das selbst order:-1 traegt */
    color: var(--color-green);
    margin-bottom: 10px;             /* derselbe Abstand wie das gap der Maske */
    line-height: 0;                  /* kein Zeilenraum unter dem SVG */
}

/* EINHEITLICHE GROESSE UND STRICHSTAERKE (14.08.2026)
   Die Symbole tragen im Markup unterschiedliche Werte: die Kanten-Symbole
   34x34 bei viewBox 38, das Hoehen-Symbol 42x30 bei viewBox 34 und
   stroke-width 1.6 statt 1.5. Nebeneinander sah man drei Unterschiede -
   Kastengroesse, Massstab und Strichdicke.
   Beides wird deshalb hier zentral gesetzt statt in 38 einzelnen SVGs:
     - feste Kachel 34x34; preserveAspectRatio (Vorgabe 'meet') passt jede
       Form proportional ein, auch die querformatige Hoehen-Ansicht
     - non-scaling-stroke macht die Strichdicke unabhaengig vom viewBox-
       Massstab. Ohne das waere derselbe Zahlenwert bei viewBox 34 um ein
       Achtel dicker als bei viewBox 38. */
/* 34 -> 44 px (14.08.2026, auf Wunsch groesser). Bewusst genau 44: Das ist die
   Kachelgroesse der Maskenvariante (.dimension-label[data-dim]::before, weiter
   oben). Damit sind beide Bauarten gleich gross - Hochbeet-Formen und die
   Produkttypen, die noch mit Masken arbeiten, zeigen dieselbe Symbolgroesse. */
.dimension-icon svg { display: block; width: 44px; height: 44px; }
.dimension-icon svg * { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
/* FIX (13.08.2026): Der Selektor lautete '.dimension-label::before' OHNE
   Attributbedingung. Die Maske kommt aber erst aus den data-dim-Regeln darunter -
   ein Label ohne data-dim bekam also die 44x44-Flaeche in --color-green ohne
   ausgestanztes Icon: ein gruenes Quadrat. Betroffen war jede Form ausser
   Hochbeet rechteckig, weil nur dort data-dim gesetzt war. Die Bedingung
   [data-dim] macht die Regel selbsttragend - kein Attribut, kein Kaestchen.

   PLATZHALTER (14.08.2026): Die Basisregel bringt jetzt selbst eine Maske mit -
   ein Lineal. Die Regeln darunter ueberschreiben nur noch die Variable --icon.
   Damit gilt: Ein Mass OHNE eigenes Icon (z.B. 'tiefe' beim Raumteiler oder die
   gemischte Angabe 'Breite/Laenge' bei der geraden Stuetzmauer) zeigt das
   Lineal statt eines inhaltlich falschen Icons - und ein neu hinzukommendes Mass
   kann nie wieder als gruenes Quadrat erscheinen, auch wenn seine Regel fehlt.
   Sobald ein echtes Icon vorliegt: unten einen Zweig mit --icon ergaenzen, sonst
   nichts. */
.dimension-label[data-dim]::before,
.pd-dimension-list--icons .detail-label[data-dim]::before {
    content: ""; display: block; width: 44px; height: 44px;
    background-color: var(--color-green);
    /* Vorgabe-Icon: Lineal mit Teilstrichen */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M7 8v3M12 8v4M17 8v3'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--icon); mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.dimension-label[data-dim="laenge"]::before,
.pd-dimension-list--icons .detail-label[data-dim="laenge"]::before {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 27' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='20' height='13' rx='1.5'/%3E%3Cline x1='6' y1='5' x2='26' y2='5'/%3E%3Cpolyline points='9.8,2 6,5 9.8,8'/%3E%3Cpolyline points='22.2,2 26,5 22.2,8'/%3E%3C/svg%3E");
}
.dimension-label[data-dim="breite"]::before,
.pd-dimension-list--icons .detail-label[data-dim="breite"]::before {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 34 18' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='20' height='13' rx='1.5'/%3E%3Cline x1='30' y1='11' x2='30' y2='24'/%3E%3Cpolyline points='27,14.8 30,11 33,14.8'/%3E%3Cpolyline points='27,20.2 30,24 33,20.2'/%3E%3C/svg%3E");
}
.dimension-label[data-dim="hoehe"]::before,
.pd-dimension-list--icons .detail-label[data-dim="hoehe"]::before {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 34 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='25' x2='26' y2='25'/%3E%3Crect x='10' y='6' width='10' height='19' rx='1.5'/%3E%3Cline x1='29' y1='6' x2='29' y2='25'/%3E%3Cpolyline points='26,9.8 29,6 32,9.8'/%3E%3Cpolyline points='26,21.2 29,25 32,21.2'/%3E%3C/svg%3E");
}
.dimension-label[data-dim="durchmesser"]::before,
.pd-dimension-list--icons .detail-label[data-dim="durchmesser"]::before {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
}

/* Spaltenraster der Massfelder — gilt nur auf Produktseiten und zieht damit die
   Regel aus stylesheet.css:5715 (repeat(3, 1fr)) nach.
   Grund: Seit die uebrigen Layouts dasselbe Raster benutzen wie das Hochbeet
   (vorher teils '.dimension-grid2'), treffen dort auch Bloecke mit nur ZWEI
   Feldern darauf - Sichtschutz und Steck-Sichtschutz. Bei drei festen Spalten
   blieben die Felder schmal und eine Spalte leer.
   minmax(180px, 1fr) laesst in der rechten Spalte weiterhin hoechstens drei
   Felder je Zeile zu, fuellt bei zweien aber die Breite. Das Hochbeet-Layout
   sieht damit unveraendert aus. */
.dimension-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Fehler direkt am Eingabefeld */
.dimension-input.pd-field-error { border: 1.5px solid #c0392b !important; background: #fdecea !important; }

/* Details: linke Konfigurations-Box (gewählte Maße) + rechte Datenliste inkl. Lieferumfang */
.pd-abmessungen-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 560px) { .pd-abmessungen-layout { grid-template-columns: 1fr; } }

.pd-config-box { border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 14px; }
.pd-config-box-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-secondary); font-weight: 600; margin-bottom: 10px; }
.pd-groesse-icon { color: var(--color-green); margin-bottom: 10px; }
/* Die Skizze zeichnet seit dem 14.08.2026 dieselben Pfade wie das kleine Symbol
   neben der Ueberschrift "Details" (pd_form_pfade()) - nur groesser. Zwei Angaben
   sind dafuer noetig:
   - non-scaling-stroke: Ohne das wuerde die Kontur mitskaliert. Das Raster ist
     24 Einheiten breit, die Box rund 172 px - aus stroke-width 1.5 wuerden ueber
     10 px. Mit der Angabe bleibt die Linie 2 px, unabhaengig vom Zoom.
   - max-height: Die Formen haben unterschiedliche Seitenverhaeltnisse (der
     Sichtschutz ist hoch, das Auflageprofil flach). Ohne Deckel waere die Skizze
     eines hohen Produkts doppelt so hoch wie die eines flachen. */
.pd-groesse-icon svg { display: block; width: 100%; max-height: 110px; }
.pd-groesse-icon svg * { vector-effect: non-scaling-stroke; stroke-width: 2; }
/* %GROESSENANGABE% liefert .detail-item-Zeilen (siehe FormTemplateGenerator.php) — hier als Label/Wert-Paare mit Trennlinie */
.pd-config-dims .detail-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12px; border-top: 1px solid var(--color-border-light); }
.pd-config-dims .detail-label { color: var(--color-secondary); }
.pd-config-dims .detail-value { font-weight: 600; color: var(--color-primary); }

.pd-details-right { min-width: 0; }
.pd-details-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--color-secondary); }
.pd-details-trust span { display: flex; align-items: center; gap: 5px; }
.pd-details-trust svg { color: var(--color-green); flex-shrink: 0; }

/* Abschnittstitel: zentrierter Text zwischen zwei Trennlinien (Anpassbare Features, Mein Hochbeet, ...) */
.pd-section-heading { margin: 56px 0 24px; text-align: center; }
/* Grosses Icon traegt die raeumliche Trennung - deshalb keine Trennlinien mehr */
.pd-section-heading-icon { display: block; width: 72px; height: 72px; margin: 0 auto 18px; color: var(--color-green); }

/* Aufklapper-Kennzeichnung der Optionsabschnitte (R6, 13.08.2026).
   Die Abschnitte starten wieder ZUGEKLAPPT - der Container steht ohne .active auf
   max-height:0 (stylesheet.css:3413ff), die Klasse setzt
   ProductManager.initOptionContainerToggles() beim Klick auf den Titel.
   Bis 12.08. stand 'active' fest im Markup; damit war der Klickmechanismus
   unsichtbar und wurde nie gebraucht. Jetzt muss die Titelzeile zeigen, dass sie
   eine Schaltflaeche ist: Zeiger und Winkel, der sich beim Oeffnen dreht.
   Dieselbe Sprache wie .addon-title::after (stylesheet.css:3466) - dort fuer die
   Aufklapper des alten Layouts, hier fuer die pd-Abschnitte. */
.addon-title-produkte-section { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.addon-title-produkte-section::after {
    content: "";
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s;
    flex-shrink: 0;
}
.addon-title-produkte-section.active::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Vorschau-Auszug in den Bloecken unter "Mein Hochbeet".
   Eigene Klassen statt .pd-desc-excerpt-wrap: dort gilt eine andere Hoehe und
   der Block sitzt in der Grid-Spalte. Rein CSS, kein JS-Toggle. */
.pd-excerpt-toggle { position: absolute; opacity: 0; pointer-events: none; }
.pd-excerpt-wrap { position: relative; max-height: 104px; overflow: hidden; }
.pd-excerpt-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
    background: linear-gradient(to bottom, rgba(255,253,249,0), var(--color-bg-panel)); }
.pd-excerpt-more, .pd-excerpt-less { display: inline-block; margin-top: 8px; font-size: 12.5px;
    font-weight: 500; color: var(--color-green); cursor: pointer; }
.pd-excerpt-less { display: none; }
.pd-excerpt-toggle:checked ~ .pd-excerpt-wrap { max-height: none; }
.pd-excerpt-toggle:checked ~ .pd-excerpt-wrap .pd-excerpt-fade { display: none; }
.pd-excerpt-toggle:checked ~ .pd-excerpt-more { display: none; }
.pd-excerpt-toggle:checked ~ .pd-excerpt-less { display: inline-block; }

/* Ab dem Umbruch auf eine Spalte (900px, s. #erste_zeile_ul) kein Auszug mehr.
   Die Abschnitte unter "… individualisieren" tragen je einen eigenen
   "Weiterlesen"-Schalter — auf der Hochbeetseite zwanzig Stueck. Untereinander
   in einer Spalte wirkt das unruhig, und der Platzgewinn ist gering, weil ohnehin
   gescrollt wird. Der Text steht deshalb vollstaendig da.

   Das Markup bleibt fuer beide Ansichten identisch: Die Checkbox ist schon durch
   .pd-excerpt-toggle unsichtbar und ohne ihre Beschriftungen nicht mehr
   ansteuerbar, es bleibt also kein bedienbares Element ohne Wirkung zurueck.

   NICHT betroffen ist .pd-desc-excerpt-wrap im Kopfbereich: das ist ein einzelner
   Schalter, und dort schoebe der volle Text den Konfigurator weit nach unten. */
@media (max-width: 900px) {
	.pd-excerpt-wrap { max-height: none; }
	.pd-excerpt-fade { display: none; }
	.pd-excerpt-more,
	.pd-excerpt-less { display: none; }
}

/* ============================================================================
   FAQ (13.08.2026)
   ============================================================================
   Ergaenzt die Klassen, die pd_sektion_faq() seit der pd-Migration ausgibt und
   fuer die es bis jetzt KEINE Regeln gab — der Baustein-Docblock hielt das
   ausdruecklich fest. Ohne diese Regeln zeigte der Browser seine Vorgabe fuer
   <details>: schwarzes Dreieck, keine Abstaende, kein Rahmen. Auf Sichtschutz,
   Sichtschutz Stecken, Raumteiler, Stuetzmauer und geschweisstem Hochbeet stand
   das unmittelbar unter den gerahmten pd-Panels und fiel entsprechend auf.

   Bewusst weiter <details>/<summary>: klappt ohne JavaScript, ist fuer
   Screenreader und Suchmaschinen auswertbar, und der Zustand ueberlebt die
   Browser-Suche (Chrome oeffnet geschlossene <details> beim Finden von Text).
   Die Optik folgt den Optionsabschnitten: Panelflaeche, gleicher Rahmen,
   gleicher Winkel als Aufklapp-Zeichen. */
.pd-faq { max-width: 900px; margin: 0 auto; }
.pd-faq-item {
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-panel);
    border-radius: var(--border-radius-md);
    margin-bottom: 10px;
    overflow: hidden;
}
.pd-faq-frage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    user-select: none;
    list-style: none;              /* Firefox: Vorgabe-Dreieck weg */
}
.pd-faq-frage::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.pd-faq-frage b { color: var(--color-green); font-weight: 600; }
/* Gleicher Winkel wie .addon-title-produkte-section::after — ein Aufklapp-
   Zeichen fuer die ganze Seite. */
.pd-faq-frage::after {
    content: "";
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s;
    flex-shrink: 0;
}
.pd-faq-item[open] > .pd-faq-frage::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pd-faq-frage:focus-visible { outline: 2px solid var(--color-green); outline-offset: -2px; }
.pd-faq-antwort {
    padding: 0 16px 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--color-secondary);
}
@media (max-width: 560px) {
    .pd-faq-frage  { font-size: 14px; padding: 12px 14px; }
    .pd-faq-antwort { padding: 0 14px 14px; }
}

/* Einleitungssatz ueber Canvas bzw. Video */
.pd-media-intro { font-size: 12.5px; color: var(--color-secondary); line-height: 1.65; margin: 0 0 12px; }
/* Mehrere Icons nebeneinander (Mein Hochbeet: Maßansicht, Aufbau, Tipps) */
/* Kein Umbruch: die Reihe bleibt in jeder Spaltenbreite einzeilig. Reicht der Platz
   nicht für 4 × 72px, schrumpfen die Icons proportional statt umzubrechen. */
.pd-section-heading-icons { display: flex; justify-content: center; gap: 14px; margin: 0 0 18px; flex-wrap: nowrap; }
.pd-section-heading-icons .pd-section-heading-icon { margin: 0; flex: 0 1 72px; width: auto; height: auto; aspect-ratio: 1; min-width: 0; }
@media (max-width: 480px) { .pd-section-heading-icons { gap: 10px; } }
.pd-section-heading-line { display: block; }
.pd-section-heading-text { font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--color-green); }
.pd-section-heading-sub { text-align: center; font-size: 12px; color: var(--color-secondary); margin: 6px 0 0; }
/* Akzentstrich als Abschluss - ersetzt die frueheren seitlichen Linien */
.pd-section-heading::after { content: ''; display: block; width: 40px; height: 2px; background: var(--color-green); margin: 14px auto 0; }
/* In den beiden Spaltenkarten sitzt die Ueberschrift bereits am Kartenrand */
.pd-config-features-col .pd-section-heading { margin-top: 0; }
@media (max-width: 480px) { .pd-section-heading-text { font-size: 15px; } .pd-section-heading-icon { width: 56px; height: 56px; } }

/* Konfigurationsmöglichkeiten + Anpassbare Features: immer untereinander
   (nicht mehr nebeneinander auf Desktop) */
.pd-config-features-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
/* Kein Kartenrahmen: die beiden Bereiche sollen sich genauso lesen wie die
   vollbreiten Abschnitte (Mein Hochbeet, Hochbeet individualisieren). */
.pd-config-features-col { min-width: 0; }

/* Hochbeet individualisieren: Mini-Karussell + Text/Options-Grid */
.pd-individualisieren-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pd-individualisieren-text { min-width: 0; }
/* Bild jetzt volle Breite oben (Variante 2): breiteres Seitenverhältnis statt 4:3 */
.pd-individualisieren-layout .pd-mini-carousel { aspect-ratio: 16 / 6; }

.pd-mini-carousel { position: relative; border-radius: var(--border-radius-md); overflow: hidden; background: var(--color-bg-secondary); aspect-ratio: 4 / 3; }
.pd-mini-carousel-track { display: flex; height: 100%; transition: transform 0.35s ease; }
.pd-mini-carousel-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.pd-mini-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--color-primary); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pd-mini-carousel-prev { left: 6px; }
.pd-mini-carousel-next { right: 6px; }
.pd-mini-carousel-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; }
.pd-mini-carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; }
.pd-mini-carousel-dots span.active { width: 16px; border-radius: 3px; background: #fff; }

/* Trust-Zeile direkt unter der H1 (Bewertung, Liefertermin, Auslastung) */
.pd-headline-trust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border-light); font-size: 12px; color: var(--color-secondary); }
.pd-headline-trust strong { color: var(--color-primary); font-weight: 600; }
.pd-headline-rating { display: flex; align-items: center; gap: 5px; }
.pd-stars { color: #d9a441; letter-spacing: 1px; }
.pd-headline-sep { width: 1px; height: 12px; background: var(--color-border); }
@media (max-width: 560px) { .pd-headline-sep { display: none; } .pd-headline-trust { gap: 8px 14px; } }

/* Größe + USPs, untereinander/abgesetzt (Vorschlag A) */
/* Größe + USPs als kompakte, zentrierte Zeile direkt unter der Beschreibung/Weiterlesen (Variante A) */
.pd-usp-box { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0 0 20px; font-size: 12px; color: var(--color-secondary); }
.pd-usp-item { display: inline-flex; align-items: center; gap: 5px; }
.pd-usp-item svg { color: var(--color-green); flex-shrink: 0; }
.pd-usp-sep { color: var(--color-border-panel); } /* FIX (R5.2): war --color-border-strong */

/* Optionen-Übersicht in Hochbeet individualisieren: 2-spaltiges Grid mit Trennlinien (Variante C) */
.pd-usp-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.pd-usp-grid-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--color-primary); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pd-usp-grid-item svg { color: var(--color-green); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 480px) { .pd-usp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INFO-MODALS (pd-modal-*)
   Einheitliches Layout für alle Modal-Inhalte: Titel als Label,
   Empfehlung als Hero-Karte, Optionen als Karten-Grid, Kennzahlen
   als Wert-Zeilen, Hinweise als abgesetzter Block.
   ============================================================ */
.pd-modal-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-secondary); font-weight: 600; margin-bottom: 12px; }
.pd-modal-text { font-size: 12.5px; color: var(--color-secondary); line-height: 1.65; margin: 0 0 14px; }
.pd-modal-subtitle { font-size: 13px; font-weight: 600; color: var(--color-primary); margin: 0 0 10px; }
.pd-modal-group-label { font-size: 12px; color: var(--color-secondary); font-weight: 600; margin: 0 0 8px; }

/* Empfehlungs-Hero ("ich empfehle: ...") */
.pd-modal-empfehlung { border: 1.5px solid var(--color-green); background: #f4f8f5; border-radius: var(--border-radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pd-modal-empfehlung img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.pd-modal-empfehlung-lead { font-size: 11px; color: var(--color-secondary); }
.pd-modal-empfehlung-value { font-size: 14px; font-weight: 600; color: var(--color-primary); }

/* Karten-Grid für gleichwertige Optionen/Vorteile */
.pd-modal-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.pd-modal-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pd-modal-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pd-modal-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .pd-modal-grid--2, .pd-modal-grid--3, .pd-modal-grid--4 { grid-template-columns: 1fr; } }
.pd-modal-card { border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 14px; }
.pd-modal-card--hero { border: 1.5px solid var(--color-green); background: #f4f8f5; position: relative; }
.pd-modal-card-badge { position: absolute; top: -9px; left: 12px; background: var(--color-green); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 20px; }
.pd-modal-card-title { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.pd-modal-card-text { font-size: 11.5px; color: var(--color-secondary); line-height: 1.55; }
.pd-modal-card-list { font-size: 11.5px; color: var(--color-secondary); line-height: 1.8; border-top: 1px solid var(--color-border-light); padding-top: 8px; margin-top: 8px; }

/* Kennzahlen als Wert-Zeilen + Hinweis-Block (gleiche Optik) */
.pd-modal-note { border-left: 3px solid var(--color-green); background: var(--color-bg-main); border-radius: 0 6px 6px 0; padding: 12px 14px; margin-bottom: 14px; }
.pd-modal-note-title { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.pd-modal-note-text { font-size: 12.5px; color: var(--color-secondary); line-height: 1.6; }
.pd-modal-fact { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--color-border-light); }
.pd-modal-fact:last-child { border-bottom: none; }
.pd-modal-fact span:first-child { color: var(--color-secondary); }
.pd-modal-fact span:last-child { color: var(--color-primary); text-align: right; }

/* Bild-Text-Block: Bild fest links, per --reverse rechts */
.pd-modal-media { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pd-modal-media--reverse { flex-direction: row-reverse; }
.pd-modal-media img { width: 180px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.pd-modal-media-text { font-size: 12.5px; color: var(--color-secondary); line-height: 1.65; }
@media (max-width: 560px) { .pd-modal-media, .pd-modal-media--reverse { flex-direction: column; } .pd-modal-media img { width: 100%; } }
.pd-modal-image-full { width: 100%; border-radius: 6px; display: block; }

/* Nummerierte Schritt-Karten */
.pd-modal-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--color-green); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }

/* Galerie (Beispiele) */
.pd-modal-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .pd-modal-gallery { grid-template-columns: 1fr 1fr; } }
.pd-detail-lieferumfang { padding: 11px 16px; }
/* Optik an .pd-section-label angeglichen (gleiche Textformatierung), links statt rechts,
   Icon ergänzt: Lieferumfang soll sich wie ein eigener kleiner Abschnittstitel lesen */
.pd-detail-lieferumfang-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 8px; text-align: left; }
.pd-detail-lieferumfang-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-green); }
/* Lieferumfang wie die Detail-Zeilen darstellen (gerahmte Liste mit Trennlinien) */
.pd-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pd-detail-tags li { padding: 7px 14px; font-size: 12px; color: var(--color-secondary); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 20px; }
.pd-dimension-list--icons { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); overflow: hidden; }
.pd-dimension-list--icons .detail-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 12.5px; border-bottom: 1px solid var(--color-border-light); }
.pd-dimension-list--icons .detail-item:last-child { border-bottom: none; }
.pd-dimension-list--icons .detail-label { flex-direction: row; display: flex; align-items: center; gap: 10px; color: var(--color-secondary); order: 0; }
.pd-dimension-list--icons .detail-value { font-weight: 600; color: var(--color-primary); }
.pd-detail-icon { color: var(--color-green); flex-shrink: 0; }
.pd-dimension-list--icons .detail-label[data-dim="laenge"]::before,
.pd-dimension-list--icons .detail-label[data-dim="breite"]::before,
.pd-dimension-list--icons .detail-label[data-dim="hoehe"]::before,
.pd-dimension-list--icons .detail-label[data-dim="durchmesser"]::before { width: 20px; height: 20px; }

/* Sticky Warenkorb-Leiste */
.pd-sticky-atc {
    /* Fix: vorher left:50%/translateX(-50%) -> zentrierte sich über die gesamte
       Viewport-Breite und konnte dadurch über das linke Karussell ragen. */
    position: fixed; right: 24px; left: auto; bottom: 20px;
    transform: translateY(0);
    width: min(100% - 48px, 900px);
    background: var(--color-bg-main); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg);
    z-index: 9999; opacity: 1; pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Startzustand: Die Leiste soll nicht sofort beim Seitenaufruf erscheinen,
   sondern erst, wenn der Besucher die Material-Optionen erreicht hat
   (#pd_sec_material). Gesetzt und wieder entfernt von initStickyAtcVisibility()
   in produkt_detail.js.
   Bewusst ueber transform/opacity statt display:none - so greift die vorhandene
   transition und die Leiste faehrt weich herein statt zu springen.
   pointer-events:none verhindert, dass der unsichtbare Balken Klicks abfaengt.
   FAIL-SAFE: Die Klasse wird ausschliesslich per JavaScript gesetzt. Laedt das
   Skript nicht oder fehlt #pd_sec_material, bleibt die Leiste wie bisher sofort
   sichtbar - nie unsichtbar und damit unbenutzbar. */
.pd-sticky-atc.pd-atc-verborgen {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
}
/* kein justify-content: space-between - der Balken wurde dadurch unnoetig breit;
   die Elemente stehen jetzt zusammen, #warenkorb_gesamt_div haelt den Button rechts */
.pd-sticky-atc__main { padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.pd-sticky-atc__title { font-weight: 600; font-size: 13.5px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sticky-atc .pd-price-block { margin-bottom: 0; flex-shrink: 0; }
.pd-sticky-atc .pd-price-block .pd-price { font-size: 15px; white-space: nowrap; }
#warenkorb_gesamt_div { flex-shrink: 0; }
#warenkorb_gesamt_div form { display: flex; align-items: center; gap: 6px; }

/* Mengensteuerung in der Leiste kompakter, 13.08.2026.
   Die Grundregeln in stylesheet.css:4892/4899 sind fuer die Seite gedacht -
   padding 10/15px, 1.2rem und 50px Feldbreite waren in der Leiste der groesste
   Platzfresser, und im 640er-Bereich wurden sie bisher gar nicht angefasst
   (erst ab 560px). Nur hier ueberschrieben, damit die Steuerung ausserhalb der
   Leiste unveraendert bleibt.

   BEWUSSTE UNTERGRENZE: Die Tippflaechen bleiben bei rund 30 CSS-Pixeln.
   Weiter zu verkleinern waere auf dem Telefon kontraproduktiv - WCAG 2.5.8
   nennt 24 Pixel als Minimum, und ein danebengetipptes Plus kostet mehr als
   die gewonnenen Millimeter einbringen. */
.pd-sticky-atc .quantity-control       { border-radius: 8px; }
.pd-sticky-atc .quantity-control span  { padding: 6px 11px; font-size: 1.05rem; }
.pd-sticky-atc .quantity-control input { width: 34px; padding: 7px 2px; font-size: 1rem; }
/* Kompakter Button in der Sticky-Leiste. Breite/Schriftgröße müssen nicht mehr
   zurückgesetzt werden – die globale Regel in stylesheet.css liefert nur noch
   die Optik, die Box-Maße kommen von hier. */
#warenkorb_button { white-space: nowrap; flex-shrink: 0; font-size: 13.5px; padding: 9px 16px; }

/* Kompakter Basiszustand: Titel ausgeblendet (steht bereits als H1 auf der Seite),
   nur Preis + Menge + Button bleiben in einer Zeile.
   Erst nach dem Scrollen über den Produkttitel wird die volle Leiste (.pd-expanded) gezeigt. */
.pd-sticky-atc__info, .pd-sticky-atc__specs, .pd-sticky-atc__summary,
.pd-summary-toggle-input, .pd-summary-less { display: none; }
/* Auslöser der Konfigurations-Zusammenfassung ist in beiden Zuständen sichtbar,
   sonst gibt es in der kompakten Leiste keinen Weg, sie zu öffnen. */
.pd-summary-more { display: inline-block; }
.pd-summary-toggle-input:checked ~ .pd-sticky-atc__summary { display: block; }
.pd-summary-toggle-input:checked ~ .pd-sticky-atc__main .pd-summary-more { display: none; }
.pd-summary-toggle-input:checked ~ .pd-sticky-atc__main .pd-summary-less { display: inline-block; }

/* Trust-Signale sind in beiden Zustaenden sichtbar - sie sind der Grund,
   warum die Leiste ueberhaupt dauerhaft eingeblendet bleibt */
.pd-sticky-atc__trust { border-top: 1px solid var(--color-border-light); padding: 6px 20px; display: flex; gap: 16px; flex-wrap: wrap; }
.pd-sticky-atc__trust span { font-size: 10.5px; color: var(--color-secondary); display: flex; align-items: center; gap: 4px; }

.pd-sticky-atc.pd-expanded .pd-sticky-atc__main { padding: 10px 20px; flex-wrap: wrap; }
.pd-sticky-atc.pd-expanded .pd-sticky-atc__info { display: block; min-width: 0; flex: 1 1 auto; }
.pd-sticky-atc.pd-expanded .pd-sticky-atc__title { overflow: visible; text-overflow: clip; white-space: normal; }
.pd-sticky-atc.pd-expanded .pd-price-block .pd-price { font-size: 18px; }
.pd-sticky-atc.pd-expanded .pd-sticky-atc__specs { display: flex; gap: 8px; margin-top: 2px; }
.pd-sticky-atc.pd-expanded .pd-sticky-atc__specs span { font-size: 11px; color: var(--color-secondary); }
.pd-sticky-atc.pd-expanded .pd-sticky-atc__specs span:not(:last-child)::after { content: '·'; margin-left: 8px; color: var(--color-border); }

/* Ausklappbare Konfigurations-Zusammenfassung (Variante B) */
.pd-summary-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.pd-sticky-atc__summary { padding: 14px 20px; border-bottom: 1px solid var(--color-border-light); }
.pd-summary-title { font-size: 12px; font-weight: 600; color: var(--color-primary); margin-bottom: 8px; }
.pd-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; }
.pd-summary-row span:first-child { color: var(--color-secondary); }
.pd-summary-row span:last-child { color: var(--color-primary); text-align: right; }
.pd-summary-row--free span { color: var(--color-green) !important; }
.pd-summary-row--base { border-top: 1px solid var(--color-border-light); margin-top: 4px; padding-top: 8px; font-weight: 600; }
.pd-summary-more, .pd-summary-less { margin-top: 4px; font-size: 11px; color: var(--color-green); cursor: pointer; }

@media (max-width: 560px) {
    /* Fix: erbt sonst right:24px vom Desktop-Fix -> asymmetrischer Rand. */
    .pd-sticky-atc { left: 12px; right: 12px; width: auto; bottom: 12px; }
    .pd-sticky-atc__main { padding: 7px 12px; gap: 8px; }
    .pd-sticky-atc .pd-price-block .pd-price { font-size: 14.5px; }
    /* 13.08.2026 auf .pd-sticky-atc eingegrenzt: die Regel galt zuvor global und
       verkleinerte die Mengensteuerung auch ausserhalb der Leiste. */
    .pd-sticky-atc .quantity-control span  { padding: 5px 9px; font-size: 1rem; }
    .pd-sticky-atc .quantity-control input { width: 30px; padding: 6px 2px; }
    #warenkorb_button { padding: 8px 13px; font-size: 12.5px; }
    .pd-sticky-atc.pd-expanded .pd-sticky-atc__trust { justify-content: center; }
}

/* ============================================================
   REDESIGN-ERGÄNZUNGEN — UX/Conversion
   ============================================================ */

/* Größen-Presets (Punkt 3): Einstiegshilfe über den Freimaß-Feldern. Optik bewusst
   als Chip-Reihe, damit sie sich klar von den Auswahlkarten (pd-option-card) abhebt. */
.pd-size-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pd-size-presets-label { font-size: 12px; color: var(--color-secondary); margin-right: 2px; }
.pd-size-preset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; color: var(--color-primary); background: var(--color-bg-main); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: var(--transition-fast); }
.pd-size-preset:hover { border-color: var(--color-green); }
.pd-size-preset.checked { border: 1.5px solid var(--color-green); background: #f4f8f5; }
.pd-size-preset-badge { font-size: 10.5px; color: var(--color-green); }

/* Maßvalidierung (Punkt 4c): Klartext-Hinweis unter einem Feld, leer = unsichtbar */
.pd-field-hint { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #b3261e; }
.pd-field-hint:empty { display: none; }

/* Sammelhinweis über den Maß-Links */
.pd-dims-error { margin: 10px 0 0; padding: 8px 12px; font-size: 12px; color: #b3261e; background: #fdf3f2; border-radius: 6px; }

/* Preisangabe je Optionskarte (Punkt 1b): Differenz zur aktuellen Konfiguration
   oben, bisheriger Preiswert klein darunter. */
.pd-badge-stack { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.pd-badge-delta { font-size: 12px; font-weight: 500; color: var(--color-green); white-space: nowrap; }
.pd-badge-delta--none { color: var(--color-secondary); font-weight: 400; }
.pd-badge-delta--down { color: var(--color-secondary); }
.pd-badge-stack .pd-badge-price { font-size: 10.5px; color: var(--color-secondary); opacity: .8; padding: 0; }
.pd-badge-delta:empty + .pd-badge-price { font-size: 11.5px; opacity: 1; }

/* Sekundäre Aktion im Konfigurations-Panel (Punkt 8b): bewusst zurückhaltend,
   damit sie nicht mit dem Warenkorb-Button konkurriert. */
.pd-summary-save { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--color-secondary); background: transparent; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: var(--transition-fast); }
.pd-summary-save:hover:not(:disabled) { color: var(--color-primary); border-color: var(--color-green); }
.pd-summary-save:disabled { opacity: .6; cursor: default; }

/* Mobile Sprungnavigation (Punkt 11a) — auf Desktop nicht vorhanden, dort sind
   alle Abschnitte ohne langen Scrollweg erreichbar. */
.pd-jumpnav { display: none; }

@media (max-width: 900px) {
	.pd-jumpnav { display: flex; gap: 6px; position: sticky; top: 0; z-index: 20; margin: 0 0 12px; padding: 8px 0; background: var(--color-bg-main); overflow-x: auto; scrollbar-width: none; }
	.pd-jumpnav::-webkit-scrollbar { display: none; }
	.pd-jumpnav-chip { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px; color: var(--color-secondary); text-decoration: none; white-space: nowrap; border: 1px solid var(--color-border); border-radius: 999px; transition: var(--transition-fast); }
	.pd-jumpnav-chip--active { color: var(--color-green); border-color: var(--color-green); background: #f4f8f5; }
	/* Sprungziel nicht unter die klebende Leiste schieben */
	.pd-config-panel { scroll-margin-top: 56px; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* FIX (B2.1): Abstandsklasse aus den Alt-Layouts. Sie stand bis zur Migration im toten
   $modal_html-Style-Block und war damit nie aktiv, wird vom Markup aber weiterhin
   verwendet (product_info_profil_layout.php). */
.mtop2 { margin-top: 2em; }

/* Vorteilsliste (artikel_aufzaehlung) mit Symbolen je Aussage.

   stylesheet.css:4550 setzt ueber .artikel_aufzählung li::before einen gruenen
   Haken vor JEDES li. Fuer die Eintraege mit eigenem Symbol wird er abgeschaltet,
   sonst stuenden zwei Zeichen nebeneinander. Die Regel greift nur bei .pd-vorteil,
   alle uebrigen Listen mit dieser Klasse bleiben unveraendert. */
.artikel_aufzählung li.pd-vorteil::before { content: none; }

.artikel_aufzählung li.pd-vorteil {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.5;
}

.pd-vorteil-icon {
	color: var(--color-green);
	flex-shrink: 0;
}

/* Die Groessenzeile traegt kein Symbol, soll aber buendig mit den uebrigen
   Punkten stehen - die Einrueckung entspricht Symbolbreite plus gap. */
.artikel_aufzählung li.pd-vorteil--groesse {
	padding-left: 28px;
	font-weight: 600;
}