/*!
 * Chip-/Karten-Layout - Gestaltung (Stylesheet)
 * © 2003–2026 HOCH-M.D. NATURSTEINE UG · https://natursteine-direktimporteur.de
 * Alle Rechte vorbehalten. Urheberrechtlich geschützt.
 * Vervielfältigung, Weitergabe oder Nachnutzung – ganz oder in Teilen –
 * nur mit vorheriger schriftlicher Genehmigung des Rechteinhabers.
 */

/* =====================================================================
   PROTOTYP – Chip-/Karten-Layout (Ersatz für die Preis-Tabellen)
   ---------------------------------------------------------------------
   Dieses Stylesheet wird NUR auf den Prototyp-Seiten geladen.
   Es gestaltet die neuen Produkt-Karten mit anklickbaren Feldern (Chips)
   und dem aufklappenden Detailbereich (Artikel-Nr., Preise, Eingabe,
   Übernehmen-Knopf). Funktioniert auf Handy, Tablet und Desktop.
   ===================================================================== */

/* Karte um ein Produkt herum – ohne sichtbaren Rahmen, da der Produktname
   bereits weiter oben auf der Seite steht. Dient nur noch als Abstandshalter. */
.ptc-card {
    margin: 0 0 24px;
}

/* Hinweiszeile "Größe / Variante wählen" */
.ptc-chips-label {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
}

/* Leiste mit den anklickbaren Feldern (Chips) */
.ptc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

/* Einzelnes anklickbares Feld (Chip) */
.ptc-chip {
    appearance: none;
    border: 1px solid #c8c8c8;
    background: #f7f7f7;
    color: #333;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ptc-chip:hover {
    border-color: #5EA53F;
    background: #f1f8e7;
}

/* Ausgewähltes Feld (Chip) – Button-Grün #5EA53F, normale Schrift */
.ptc-chip.is-active {
    border-color: #5EA53F;
    background: #5EA53F;
    color: #ffffff;
    font-weight: 400;
}

/* Aufklappender Detailbereich – komplette Karte mit dem gelblich-grünen
   Hintergrund (kein weißer/grauer Hintergrund mehr) */
.ptc-detail {
    /* 17.07.2026 (Kundenwunsch, nach Bruch-Test): TRANSPARENT — der beige Seiten-Hintergrund scheint durch, nur der feine Rahmen zeichnet die Karte ab */
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: transparent;
    padding: 14px 16px;
    /* Handy: einspaltig; Reihenfolge wird per "order" gesteuert (siehe unten) */
    display: flex;
    flex-direction: column;
}

/* Handy: die Info-Spalte "auflösen", damit Tabelle und Anfrageliste-Button
   einzeln sortiert werden können. */
.ptc-info-spalte {
    display: contents;
}

/* Handy-Reihenfolge: Infos, Aktion, Hinweis, dann Anfrageliste-Button */
.ptc-rows { order: 1; }
.ptc-aktion { order: 2; }
.ptc-note { order: 3; }
.ptc-anfrage-link { order: 4; }

/* Absicherungs-Hinweis „Irrtümer vorbehalten" unter „zzgl. Transportkosten." –
   gleiche Schrift wie der Service-Hinweis (12px, #777); Icon gold per Inline-Style. */
.ptc-irrtum-zzgl {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #777;
}

/* Warenpreis-Block in der Aktions-Spalte (links, über dem Button): darf die
   .ptc-rows-Reihenfolge (order:1) NICHT erben – sonst rutscht er unter den Button.
   order:0 → bleibt in der DOM-Reihenfolge, also ÜBER dem Button (Desktop & Handy). */
.ptc-endpreis-aktion { order: 0 !important; }

/* Kantenprofil-Übersicht (rechts): 4 Profile als 2×2-Raster, das gewählte wird markiert */
.ptc-kp-titel { font-weight: 600; font-size: 14px; color: #333; margin: 8px 0 4px; }
.ptc-kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ptc-kp-option, .ptc-pkopf-option, .ptc-tropfkante-option { position: relative; border: 1px solid #d8d8d8; border-radius: 8px; padding: 6px 6px 4px; background: #fff; text-align: center; cursor: zoom-in; }
.ptc-kp-option .ptc-kp-name, .ptc-pkopf-option .ptc-kp-name, .ptc-tropfkante-option .ptc-kp-name { display: block; font-size: 11px; color: #333; line-height: 1.2; margin-top: 2px; }
/* Markiertes Profil: kräftiger grüner Zickzack-Rahmen (gut sichtbar auf Handy/Tablet).
   Als ::after-Overlay, damit kein Layout-Sprung entsteht. */
.ptc-kp-option.ptc-kp-aktiv, .ptc-pkopf-option.ptc-kp-aktiv, .ptc-tropfkante-option.ptc-kp-aktiv { border-color: #68AB03; background: #eef7da; }
/* Auswahl-Haken oben links auf den Kacheln (15.07.2026, Kundenwunsch): Klick auf den
   Haken WÄHLT die Kachel (Dropdowns links werden gesetzt), der Rest vergrößert weiter.
   Der Aktiv-Zustand folgt .ptc-kp-aktiv (gleiche Quelle wie der Zickzack-Rahmen). */
.ptc-kp-check { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #c8c8c8; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; cursor: pointer; z-index: 2; transition: border-color .12s, background .12s; }
.ptc-kp-check:hover { border-color: #68AB03; }
.ptc-kp-check i { opacity: 0; transition: opacity .12s; }
.ptc-kp-aktiv .ptc-kp-check { background: #68AB03; border-color: #68AB03; }
.ptc-kp-aktiv .ptc-kp-check i { opacity: 1; }
/* Haken in der Lupe: größer + Lupen-Inhalt als Bezugsrahmen; aktiver Zustand färbt den Lupen-Hintergrund */
.ptc-lupe-inhalt { position: relative; }

/* Farbmuster in der eigenen Lupe (16.07.2026, Kundenwunsch): Anzeige bewusst KOMPAKT
   (max. 278×296 px wie früher) — die Datei dahinter ist hochauflösend, die Pixelreserve
   macht die kleine Ansicht auch auf Retina-Displays scharf. Klick schließt (wie überall). */
.ptc-lupe-inhalt.ist-farbmuster { text-align: center; cursor: zoom-out; }
.ist-farbmuster .ptc-farbmuster-gross { display: block; margin: 0 auto; max-width: 278px; max-height: 296px; width: auto; height: auto; border-radius: 8px; }
.ist-farbmuster .ptc-farbmuster-name { margin-top: 8px; font-size: 14px; color: #333; text-align: center; }
.ptc-lupe-inhalt .ptc-kp-check { width: 36px; height: 36px; font-size: 20px; top: 12px; left: 12px; border-radius: 8px; }
.ptc-lupe-inhalt.ptc-kp-aktiv { background: #eef7da; }
/* Vom Standard abweichende Dropdowns einfärben (15.07.2026): die Klasse ptc-abweichend
   setzt jede Karte EINZELN über ihre eigene markiereGeaenderteDropdowns…-Funktion;
   hier steht nur die gemeinsame Präsentation (wie bei .ptc-kp-aktiv). */
.ptc-card select.ptc-abweichend { background-color: #F0F7DD; }

.ptc-kp-option.ptc-kp-aktiv::after, .ptc-pkopf-option.ptc-kp-aktiv::after, .ptc-tropfkante-option.ptc-kp-aktiv::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 5px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20fill='none'%20stroke='%2368AB03'%20stroke-width='3'%3E%3Cpath%20d='M0,12L12,2L24,12L36,2L48,12'/%3E%3Cpath%20d='M0,36L12,46L24,36L36,46L48,36'/%3E%3Cpath%20d='M12,0L2,12L12,24L2,36L12,48'/%3E%3Cpath%20d='M36,0L46,12L36,24L46,36L36,48'/%3E%3C/svg%3E") 12 round;
    pointer-events: none;
}
/* "Kante bearbeiten an: keine" → Grid dezent ausgegraut (kein Profil wählbar) */
.ptc-kp-block.ptc-kp-gesperrt { opacity: 0.45; }
/* Granitplatten: die 4 Kantenprofil-Bilder bleiben auch bei "Kantenprofil: –" (gerade Kanten)
   voll sichtbar – der Kunde soll die Profile sehen koennen. Nur Platten; PC + Handy. */
.ptc-platten .ptc-kp-block.ptc-kp-gesperrt { opacity: 1; }
/* Palisaden-Köpfe kompakter: kleinere, zentrierte Kacheln (weniger Weißraum als die breiten Kantenprofil-Kacheln) */
.ptc-pkopf-block .ptc-kp-grid { grid-template-columns: repeat(4, minmax(0, 84px)); justify-content: space-between; gap: 8px; }
.ptc-pkopf-option { padding: 6px 6px 4px; }

/* Tabelle der Eigenschaften (Label links, Wert rechts) */
.ptc-rows {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ptc-rows td {
    padding: 7px 0;
    vertical-align: top;
}

.ptc-rows td.ptc-label {
    color: #333;
    white-space: nowrap;
    padding-right: 12px;
}

.ptc-rows td.ptc-value {
    text-align: right;
    color: #222;
    font-weight: 400;
}

/* Aktionspreis-Anzeige (13.07.2026): „jetzt X €" rot, alter Preis durchgestrichen —
   gleiche Optik wie in den Preisübersicht-Tabellen. */
.ptc-rows .ptc-aktionspreis {
    color: red;
}

.ptc-rows .ptc-altpreis {
    text-decoration: line-through;
    color: #888;
    font-size: 0.85em;
}

/* Aktionszeilen (14.07.2026): beide „jetzt"-Preise LINKSBÜNDIG in der Wertespalte
   und die ganze Zelle OHNE Umbruch — so bekommt die Preisspalte von der Tabelle
   immer genug Breite (das €-Zeichen brach am Handy in die 2. Zeile); die lange
   Beschriftung darf stattdessen umbrechen. 15.07.2026 (Kundenwunsch): rechtsbündig
   wie alle anderen Werte der Karte — beide Zeilen enden an derselben Kante. */
.ptc-rows td.ptc-value-aktion {
    text-align: right;
    white-space: nowrap;
}

/* Endpreis-Zeile (Gesamtpreis) – die einzige fett dargestellte Zeile.
   Höhere Spezifität, damit sie die normalen Label-/Wert-Regeln übersteuert. */
.ptc-rows tr.ptc-endpreis-row td {
    font-weight: 700;
    /* Warenpreis-Zeile (Label + Preis) in Montserrat (tramor), schwarz & groß,
       damit der Kunde sie gut sieht */
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #000;
}

/* Langes Label (z. B. die Preiszeile) darf auf mehrere Zeilen umbrechen */
.ptc-rows td.ptc-label-wrap {
    white-space: normal;
}

/* Kopfzeile: Produktname als Titel, darunter die Artikel-Nr. (zweizeilig) */
.ptc-rows td.ptc-artikel-zeile {
    padding: 5px 0;
    white-space: normal;
}

.ptc-produktname {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.ptc-artikelnr {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

/* Auch die Artikel-Nummer selbst (z. B. G4000) normal, nicht fett */
.ptc-artikelnr strong {
    font-weight: 400;
}

/* Kleiner Hinweis unter der Preiszeile (Transportkosten) –
   gleiche Schrift wie der "kostenlos & unverbindlich"-Hinweis (.ptc-note) */
.ptc-rows td.ptc-hinweis {
    padding: 12px 0 2px;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    font-style: normal;
}

/* Eingabebereich (Menge) */
.ptc-input-block {
    border-top: 1px solid #e8e8e8;
    margin-top: 12px;
    padding-top: 12px;
}

.ptc-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ptc-input-row label {
    flex: 1;
    font-size: 14px;
    color: #444;
}

.ptc-input-row input {
    width: 90px;
    height: 38px;
    text-align: center;
    font-size: 15px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}

.ptc-input-row input:focus {
    outline: none;
    border-color: #68AB03;
    box-shadow: 0 0 0 3px rgba(104, 171, 3, 0.15);
}

/* Live-Berechnung "Ihr Bedarf in m²" – gleiche Schrift wie das Label.
   Das Ergebnis ("ca. …") steht rechts genau unter dem Mengen-Eingabefeld. */
.ptc-calc {
    font-size: 14px;
    color: #444;
}

.ptc-bedarf-wert {
    text-align: right;
    font-size: 14px;
    color: #444;
}

/* Reihe mit Übernehmen-Knopf + Mülleimer-Knopf */
.ptc-button-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap; /* die zwei Buttons bleiben IMMER auf einer Linie – nie untereinander */
}

/* Übernehmen-Knopf (nimmt die übrige Breite ein, daneben der Mülleimer) */
.ptc-submit {
    flex: 1;
    min-width: 0; /* darf schrumpfen (Text bricht notfalls im Button um) statt den Papierkorb zu verdrängen */
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    /* 17.07.2026 (Kundenwunsch): grüner Farbverlauf statt Volltongrün */
    background: linear-gradient(180deg, #6DB84C 0%, #5EA53F 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

/* Mülleimer-Knopf zum Leeren des Mengen-Feldes */
.ptc-clear {
    flex: 0 0 auto;
    width: 52px;
    border: 1px solid #c8c8c8;
    background: #ffffff;
    border-radius: 8px;
    color: #d62828;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ptc-clear:hover {
    border-color: #d62828;
    background: #fdecec;
}

/* 17.07.2026 (Kundenwunsch): sanfter Hover = UMGEKEHRTER grüner Basis-Verlauf (dunkleres
   Grün oben → heller unten), weich einblendend (0,35s) — exakt wie der Anfrageliste-Button,
   KEIN helles Aufblitzen mehr. */
.ptc-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 8px;
    background: linear-gradient(180deg, #5EA53F 0%, #6DB84C 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ptc-submit:hover::before {
    opacity: 1;
}

.ptc-submit:active {
    transform: scale(0.99);
}

/* Kurzer Hinweis unter dem Knopf */
.ptc-note {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin: 10px 0 0;
}

/* Link zur Anfrageliste – eine Leerzeile Abstand zum Satz darüber */
.ptc-anfrage-link {
    margin: 18px 0 0;
}

/* Schmaler Rahmen-Button (kein grüner Hintergrund) – nur Umrandung.
   Breite richtet sich nach dem Inhalt (deutlich schmaler als die Karte). */
/* 17.07.2026 (Kundenwunsch): Umriss-Optik ersetzt durch einen SATTEN, flächigen Button
   (stahlblau, weiße Schrift — Vorbild Kunden-Screenshot); Icon bleibt. Höhe, Rundung
   und Schriftgröße wie der grüne „In Anfrage übernehmen"-Button (harmonische Reihe). */
.ptc-anfrage-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    /* 17.07.2026 (Kundenwunsch): Alexa-Blau mit Farbverlauf — oben heller, unten #1391E2 */
    background: linear-gradient(180deg, #3BA5EA 0%, #1391E2 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400; /* 17.07.2026: keine Fettschrift (Kundenwunsch) */
    text-decoration: none;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

/* SANFTER Maus-Over (17.07.2026, Kundenwunsch — kein hartes Aufblitzen): Farbverläufe
   lassen sich nicht direkt überblenden, deshalb liegt der UMGEKEHRTE Verlauf als
   zweite Schicht darunter und wird beim Hover weich eingeblendet (0,35s). */
.ptc-anfrage-link a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 8px;
    background: linear-gradient(180deg, #1391E2 0%, #3BA5EA 100%); /* umgekehrt */
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ptc-anfrage-link a:hover {
    color: #ffffff;
    text-decoration: none;
}

.ptc-anfrage-link a:hover::before {
    opacity: 1;
}

.ptc-anfrage-link a:hover i {
    color: #ffffff;
}

.ptc-anfrage-link a:active {
    transform: scale(0.99);
}

.ptc-anfrage-link i {
    font-size: 18px;
    color: inherit;
}

/* Status: Sobald die Anfrageliste Artikel enthält, wird der Button ORANGE
   (auffälliges Signal „da liegt etwas drin"). 17.07.2026 (Kundenwunsch): oranger
   Farbverlauf #F2850A → #D94808 + sanfte Verlaufs-UMKEHR beim Hover (wie der blaue
   Grundzustand und die grünen Buttons); das frühere blaue Hover ist abgeschafft. */
.ptc-anfrage-link.hat-anfrage a {
    background: linear-gradient(180deg, #F2850A 0%, #D94808 100%);
    color: #ffffff;
}

/* Hover-Schicht im Orange-Zustand: UMGEKEHRTER oranger Verlauf (blendet weich ein,
   opacity + transition erbt die Schicht von der Basis-Regel .ptc-anfrage-link a::before). */
.ptc-anfrage-link.hat-anfrage a::before {
    background: linear-gradient(180deg, #D94808 0%, #F2850A 100%);
}

.ptc-anfrage-link.hat-anfrage a:hover i {
    color: #ffffff; /* Icon bleibt weiß — auch im orangen Zustand */
}

/* Positions-Zahl vor dem Icon (leer, wenn nichts in der Anfrageliste ist) */
.ptc-anfrage-count {
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Aktionsbereich (Eingabe + Anfrage) – optisch vom Info-Teil abgesetzt
   --------------------------------------------------------------------- */
.ptc-aktion {
    margin-top: 16px;
    padding: 14px 14px 16px;
    /* 17.07.2026 (Kundenwunsch): TRANSPARENT — wie .ptc-detail */
    background: transparent;
    border: 1px solid #dddddd;
    border-radius: 10px;
}

/* Umschalter: Menge in Tonnen  /  Fläche in m² */
.ptc-toggle {
    display: flex;
    margin-bottom: 12px;
    border: 1px solid #c8d8ad;
    border-radius: 8px;
    overflow: hidden;
}

.ptc-toggle-btn {
    flex: 1;
    appearance: none;
    border: none;
    background: #ffffff;
    color: #333;
    padding: 8px 8px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

.ptc-toggle-btn + .ptc-toggle-btn {
    border-left: 1px solid #c8d8ad;
}

.ptc-toggle-btn.is-active {
    /* 17.07.2026 (Kundenwunsch): grüner Farbverlauf statt Volltongrün */
    background: linear-gradient(180deg, #6DB84C 0%, #5EA53F 100%);
    color: #ffffff;
    font-weight: 400;
}

/* Sanfter Maus-Over = UMGEKEHRTER grüner Basis-Verlauf (17.07.2026, Kundenwunsch) —
   weich einblendende Schicht (0,35s) über weißem wie aktivem Button, kein hartes
   Umschalten und kein helles Aufblitzen (wie beim "Ihre Anfrageliste"-Button). */
.ptc-toggle-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #5EA53F 0%, #6DB84C 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ptc-toggle-btn:hover {
    color: #ffffff;
}

.ptc-toggle-btn:hover::before {
    opacity: 1;
}

.ptc-toggle-btn:active {
    transform: scale(0.99);
}

/* Mindestabnahme-Zeile */
.ptc-minorder {
    font-size: 13px;
    color: #555;
    margin: 0 0 10px;
}

/* Mengen-Eingabe mit +/−-Knöpfen */
.ptc-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ptc-step {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid #c8c8c8;
    background: #ffffff;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    color: #333;
    cursor: pointer;
}

.ptc-step:hover {
    border-color: #68AB03;
    background: #eef6e0;
}

.ptc-stepper .ptc-menge {
    width: 70px;
}

/* Auf Tablet/PC die Karte etwas breiter (aber noch einspaltig) */
@media (min-width: 768px) {
    .ptc-card {
        max-width: 560px;
    }
}

/* =====================================================================
   GRANITPLATTEN – zusätzliche Stile (Farb-Chips, Maß-Eingaben, Auswahl)
   ===================================================================== */

/* Chip mit Farbmuster + Name – gleiche eckige Form wie die Maß-Eingabefelder */
.ptc-chip-farbe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}

.ptc-chip-farbe img {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    object-fit: cover;
}

/* Größeres Farbfoto der gewählten Sorte (rechte Info-Spalte) */
.ptc-rows td.ptc-foto-zelle {
    padding: 8px 0 10px;
    text-align: center;
}

.ptc-sorte-foto-link {
    display: inline-block;
    cursor: zoom-in;
}

.ptc-sorte-foto {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin: 2px auto 0;
}

/* Überschrift im Aktionsbereich */
.ptc-platten-titel {
    font-weight: 600;
    color: #2d5016;
    margin: 0 0 10px;
}

/* Maß-Eingaben (Höhe/Breite/Länge/Stück) nebeneinander, umbrechend */
.ptc-masse {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ptc-masse-feld {
    flex: 1 1 64px;
    min-width: 64px;
    display: flex;
    flex-direction: column;
}

.ptc-masse-feld label {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.2;
    text-align: center;
}

.ptc-masse-feld label small {
    display: block;
    font-size: 11px;
    color: #888;
}

.ptc-masse-feld input {
    height: 38px;
    width: 100%;
    text-align: center;
    font-size: 15px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}

.ptc-masse-feld input:focus {
    outline: none;
    border-color: #68AB03;
    box-shadow: 0 0 0 3px rgba(104, 171, 3, 0.15);
}

/* Auswahl-Zeilen (Oberseite, Fase) */
.ptc-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ptc-select-row label {
    flex: 0 0 165px;
    font-size: 14px;
    color: #444;
}

.ptc-select-row select {
    flex: 0 1 185px;
    height: 38px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    padding: 0 8px;
    background: #ffffff;
    font-size: 14px;
}

.ptc-select-row select:focus {
    outline: none;
    border-color: #68AB03;
    box-shadow: 0 0 0 3px rgba(104, 171, 3, 0.15);
}

/* Kopfhöhe-Eingabefeld (unter Palisaden-Kopf) – Optik wie die Dropdowns */
.ptc-select-row input.ptc-kopfhoehe {
    flex: 0 1 185px;
    height: 38px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    padding: 0 8px;
    background: #ffffff;
    font-size: 14px;
}
.ptc-select-row input.ptc-kopfhoehe:focus {
    outline: none;
    border-color: #68AB03;
    box-shadow: 0 0 0 3px rgba(104, 171, 3, 0.15);
}
.ptc-select-row input.ptc-kopfhoehe:disabled {
    background: #f0f0f0;
    color: #aaa;
    cursor: not-allowed;
}
.ptc-kopfhoehe-row.ptc-row-gesperrt label { color: #aaa; }

/* Gesperrte (disabled) Auswahl-Dropdowns dezent ausgrauen – konsistent zum Kopfhöhe-Feld.
   Bewusst JE KARTE getrennt (Trennungs-Prinzip), wie die Raster-Ausgrauung. */
.ptc-platten .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ptc-stufen .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ptc-palisaden .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ptc-randsteine .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }

/* Grüner Maus-Over-Effekt auf den Dropdowns – exakt wie bei den −/+-Buttons
   (nicht bei deaktivierten Selects). Pro Karte eine eigene Regel (Trenn-Prinzip). */
.ptc-platten .ptc-select-row select:hover:not(:disabled) { border-color: #68AB03; background: #eef6e0; }
.ptc-stufen .ptc-select-row select:hover:not(:disabled) { border-color: #68AB03; background: #eef6e0; }
.ptc-palisaden .ptc-select-row select:hover:not(:disabled) { border-color: #68AB03; background: #eef6e0; }
.ptc-randsteine .ptc-select-row select:hover:not(:disabled) { border-color: #68AB03; background: #eef6e0; }

/* Berechnungs-Block (Fläche/Gewicht): Label links, Ergebnis rechts */
.ptc-platten-calc {
    margin: 12px 0;
    font-size: 14px;
    color: #444;
}

.ptc-calc-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
}

.ptc-calc-zeile > span:last-child {
    text-align: right;
    white-space: nowrap;
}

/* =====================================================================
   PC/Mac & breite Tablets (ab 992px): zweispaltige Karte.
   Es ist genug Platz vorhanden -> wir legen den Aktionsbereich nach
   LINKS und die Infos nach RECHTS, um den freien Platz rechts zu nutzen.
   ===================================================================== */
@media (min-width: 992px) {
    .ptc-card {
        max-width: 920px;
    }

    /* Zwei Spalten:
       Zeile 1: links Aktionsbereich, rechts Info-Spalte – beide GLEICH HOCH.
       Zeile 2: links der Hinweis (unter dem Aktionsbereich), rechts leer.
       Die unteren Buttons (Submit / Anfrageliste) werden ans untere Ende
       geschoben, damit sie immer exakt auf einer Linie liegen. */
    .ptc-detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "aktion infospalte"
            "note   leer";
        grid-template-rows: auto auto;
        column-gap: 28px;
        align-items: stretch;
    }

    /* Aktionsbereich (linke Spalte, Zeile 1): Flex-Säule, Submit nach unten */
    .ptc-detail > .ptc-aktion {
        grid-area: aktion;
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }

    .ptc-aktion .ptc-button-row {
        margin-top: auto;
    }

    /* Info-Spalte (rechte Spalte, Zeile 1): gleicher Rahmen, Button nach unten */
    .ptc-info-spalte {
        grid-area: infospalte;
        display: flex;
        flex-direction: column;
        padding: 14px 14px 16px;
        /* 17.07.2026 (Kundenwunsch): TRANSPARENT — wie .ptc-detail */
        background: transparent;
        border: 1px solid #dddddd;
        border-radius: 10px;
    }

    .ptc-info-spalte .ptc-anfrage-link {
        margin-top: auto;
    }

    /* Platten (17.07.2026 Fix): Button unten bündig (auto) + Mindest-Luft 40px
       (padding-top greift nur, wenn die Spalte knapp wird; bei Überschuss schluckt
       der auto-Abstand das Polster — Mechanik wie Stufen/Randsteine). NUR Granit-
       Platten (.ptc-platten); Sandstein-Platten haben eigene .ptc-sst-platten-Regel. */
    .ptc-platten .ptc-info-spalte .ptc-platten-anfrage {
        margin-top: auto;
        padding-top: 40px;
    }

    /* Hinweis: linke Spalte, Zeile 2 (direkt unter dem Aktionsbereich) */
    .ptc-detail > .ptc-note {
        grid-area: note;
        margin: 10px 0 0;
    }
}

/* =====================================================================
   Granitstufen-Karte: Produktart-Checkboxen in der Überschrift
   ("Ihre Wunschmaße für ☐ Granitstufen oder ☐ Granitpalisaden angeben:")
   Nur .ptc-card-stufen – betrifft Platten/Randsteine NICHT.
   ===================================================================== */
.ptc-card-stufen .ptc-art-check {
    white-space: nowrap;
    font-weight: inherit;
}

.ptc-card-stufen .ptc-art-check input {
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer;
}

/* Foto der Sorte + technische Skizze (Stufe/Palisade) nebeneinander */
.ptc-card-stufen .ptc-foto-skizze-zelle {
    padding-top: 6px;
}

.ptc-card-stufen .ptc-foto-skizze {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Foto nach links */
    gap: 16px;
    flex-wrap: wrap;
}

.ptc-card-stufen .ptc-skizze-box {
    flex: 1 1 200px; /* füllt den Platz neben dem Foto */
    min-width: 180px;
    text-align: center;
    cursor: zoom-in; /* wie beim Foto: nur der Mauszeiger wird zur Lupe (kein Icon) */
}

.ptc-card-stufen .ptc-skizze {
    text-align: center; /* Skizze mittig in diesem Bereich */
}

.ptc-card-stufen .ptc-skizze svg {
    width: 100%;
    max-width: 310px; /* breiter wegen ausgeklappter Hinterseite-Fläche */
    height: auto;
}

/* Palisade ist hochformatig -> Breite so begrenzen, dass sie im gleichen Maßstab
   wie die Stufe rendert (gleiche Linienstärke) und nicht zu hoch wird. */
.ptc-card-stufen .ptc-skizze.ist-palisade svg {
    max-width: 205px;
}

/* Hinweis in der Kantenprofil-Überschrift (klein, dezent) */
.ptc-kp-hinweis {
    font-weight: 400;
    font-size: 12px;
    color: #333;
}

/* Vergrößerungs-Overlay (Lupe) */
.ptc-lupe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    cursor: zoom-out;
    animation: ptcLupeIn 0.5s ease;
}

.ptc-lupe-overlay.schliesst {
    animation: ptcLupeOut 0.18s ease forwards;
}

.ptc-lupe-inhalt {
    background: #f1f8e7;
    border-radius: 12px;
    padding: 18px;
    max-width: 92vw;
    max-height: 90vh;
    animation: ptcLupeZoom 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ptc-lupe-overlay.schliesst .ptc-lupe-inhalt {
    animation: ptcLupeZoomOut 0.18s ease forwards;
}

@keyframes ptcLupeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ptcLupeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ptcLupeZoom {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ptcLupeZoomOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

.ptc-lupe-inhalt svg {
    width: min(82vw, 520px);
    height: auto;
    display: block;
}

.ptc-lupe-inhalt.ist-palisade svg {
    width: auto;
    height: min(78vh, 520px);
    max-width: 82vw;
}

/* Vergrößerte Kantenprofil-/Kopf-Kacheln (anklickbar wie Skizze/Foto) */
.ptc-lupe-inhalt.ist-kachel svg { width: min(80vw, 360px); height: auto; }
.ptc-lupe-inhalt.ist-kopf svg { width: auto; height: min(60vh, 380px); max-width: 80vw; }
.ptc-lupe-inhalt .ptc-kp-name { display: block; text-align: center; margin-top: 12px; font-size: 16px; color: #2d5016; }

/* Eigene mittige Meldungs-Box (ersetzt native alert() – in allen Browsern gleich zentriert) */
.ptc-meldung-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 20px; animation: ptcLupeIn 0.18s ease; }
.ptc-meldung-box { background: #f1f8e7; border-radius: 12px; border-top: 4px solid #68AB03; padding: 22px 24px 18px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); text-align: center; animation: ptcLupeZoom 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.ptc-meldung-text { font-size: 15px; color: #333; line-height: 1.5; margin-bottom: 16px; }
.ptc-meldung-ok { background: #68AB03; color: #fff; border: none; border-radius: 8px; padding: 9px 30px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; }
.ptc-meldung-ok:hover { background: #5a9603; }

/* === Innerer Rahmen entfernt – mehr Platz in der Chip-Karte ===
   Linke (.ptc-aktion) und rechte (.ptc-info-spalte) Spalte verschmelzen mit der
   Karte (.ptc-detail): kein "Rahmen-im-Rahmen" mehr, kein doppeltes Padding/
   Hintergrund → mehr Platz für alle Positionen. Der ÄUSSERE Rahmen (.ptc-detail)
   bleibt erhalten. Gilt für alle Chip-Karten (Bruch, Platten, Stufen, Randsteine). */
.ptc-detail .ptc-aktion,
.ptc-detail .ptc-info-spalte {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* === Ergiebigkeit unter "Ihr Bedarf in m²" ===
   Normale Zeile (kein Hintergrund, kein Rahmen). Abstand nach unten, damit sie
   NICHT am Button "In Anfrage übernehmen" klebt. */
.ptc-ergiebigkeit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ptc-ergiebigkeit-label,
.ptc-ergiebigkeit-wert {
    white-space: nowrap;
}

/* === Einheitliche Standard-Schrift in den Chip-Karten ===
   Eingabe-/Ergebnis-Zeilen (Menge, Bedarf, Ergiebigkeit, Auswahl, Maße) in
   normaler Standardgröße (15px), NICHT fett, NICHT dezent, NICHT kleiner.
   Gilt für alle Chip-Karten. AUSNAHME: die Hinweis-Texte (.ptc-note,
   .ptc-hinweis) bleiben bewusst klein & grau. */
.ptc-input-label,
.ptc-result-label,
.ptc-calc,
.ptc-bedarf-wert,
.ptc-ergiebigkeit-label,
.ptc-ergiebigkeit-wert,
.ptc-select-row label,
.ptc-platten-titel,
.ptc-platten-calc {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Einleitungszeile über den Bearbeitungs-Auswahlfeldern (Stufen/Palisaden):
   Label "Ausführung:" links (wie die anderen Labels), der Satz beginnt bündig
   über dem Auswahlfeld "Bitte wählen". Normale Standardschrift. */
.ptc-ausfuehrung {
    align-items: baseline;
    margin-bottom: 18px;   /* mehr Abstand zum ersten Auswahlfeld */
}
.ptc-ausfuehrung label {
    flex: 0 0 auto;   /* "Ausführung:" nur so breit wie nötig → Satz passt in EINE Zeile daneben */
}

/* "zzgl. Transportkosten." in der Warenpreis-Zeile NICHT fett + kleinere Unterzeile */
.ptc-zzgl,
.ptc-menge-zeile {
    font-weight: 400;
    font-size: 13px;
}
.ptc-ausfuehrung-text {
    flex: 1;
    font-size: 14px;
    color: #333;
}

/* Preiszeile in der Stufen-Calc-Box (Laban-2-Rechner) hervorheben */
.ptc-preis-zeile {
    font-weight: 600;
    margin-top: 4px;
}
.ptc-preis-zeile .ptc-stufen-preis,
.ptc-preis-zeile .ptc-palisaden-preis,
.ptc-preis-zeile .ptc-randsteine-preis {
    font-weight: 700;
    color: #333;
}

/* Service-Hinweise rechts unter dem Warenpreis (Aufschlag / im Preis enthalten).
   Dezent grau; das ✓ in Markengrün signalisiert "inklusive/kostenlos". */
.ptc-rows td.ptc-service-hinweis {
    padding: 6px 0 2px;
    font-size: 12px;
    color: #777;
    line-height: 1.8;
}
.ptc-rows td.ptc-service-hinweis .fa-check {
    color: #68AB03;
    margin-right: 5px;
}

/* Leuchtende Glühbirne vor dem Transport-Hinweis – weckt dezent Aufmerksamkeit */
.ptc-bulb {
    color: #E0A800;
    margin-right: 5px;
    animation: ptc-bulb-glow 1.9s ease-in-out infinite;
}
@keyframes ptc-bulb-glow {
    0%, 100% { text-shadow: 0 0 2px rgba(224, 168, 0, 0.35); opacity: 0.8; }
    50%      { text-shadow: 0 0 9px rgba(224, 168, 0, 0.95); opacity: 1; }
}
/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .ptc-bulb { animation: none; text-shadow: 0 0 6px rgba(224, 168, 0, 0.6); }
}

/* Mindestabrechnung-Hinweis (Granitplatten): gut lesbar, schwarz, im abgerundeten
   Kasten mit der Warenkorb-Spaltenkopf-Farbe (#e9e6e0). Rundung wie die Dropdowns. */
.ptc-min-hinweis {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #e9e6e0;
    color: #000;
    /* gleiche Schrift wie die Warenpreis-Zeile ("tramor" = Montserrat), nur etwas kleiner */
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    padding: 6px 10px;
    border: 1px solid #c9c5bb;
    border-radius: 0; /* eckig */
    margin-top: 6px;
    line-height: 1.3;
}

/* Aufklappbarer Hinweis "Ein Wort zu Sonderanfertigung" – Header im FAQ-Stil (grüner Verlauf,
   grünlicher Hover #d4edda). Panel = OVERLAY (absolut) → überdeckt den Bereich darunter inkl.
   "Ihre Anfrageliste", ohne die Karte zu vergrößern. Auf UND zu sanft per CSS-Transition. */
.ptc-sonder { position: relative; margin-top: 8px; }
.ptc-sonder-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    background: linear-gradient(to bottom, #f1f8f4, #ffffff);
    border: 1px solid #28a745;
    border-radius: 8px;
    font-weight: 600;
    color: #4a4a4a;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.ptc-sonder-header:hover { background: #d4edda; color: #1a1a1a; }
.ptc-sonder-header:focus { outline: none; box-shadow: none; }
.ptc-sonder-header .ptc-sonder-titel { display: flex; align-items: center; gap: 6px; }
.ptc-sonder-header::after {
    content: '\f078'; /* chevron-down */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    color: #28a745;
    font-size: 0.85rem;
    margin-left: auto;
    padding-left: 10px;
    transition: transform 0.3s ease;
}
.ptc-sonder.is-open .ptc-sonder-header::after { transform: rotate(180deg); }
.ptc-sonder-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #fffdf3;
    border: 1px solid #28a745;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    clip-path: inset(0 0 100% 0); /* geschlossen: von unten weggeklippt */
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.55s ease, opacity 0.55s ease;
}
.ptc-sonder.is-open .ptc-sonder-panel {
    clip-path: inset(0 0 0 0); /* offen: rollt sanft herab */
    opacity: 1;
    pointer-events: auto;
}
.ptc-sonder-text { padding: 10px 12px; font-size: 0.85rem; line-height: 1.45; color: #333; }

/* „Eingaben noch nicht gespeichert"-Meldung im Webseiten-Stil (ersetzt das graue confirm()).
   Teil des gemeinsamen Datenverlust-Schutzes (Infrastruktur) → karten-übergreifend. */
.ptc-verlassen-overlay {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.ptc-verlassen-box {
    background: #ffffff;
    border: 1px solid #28a745;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    max-width: 430px; width: 100%;
    padding: 18px 20px 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ptc-verlassen-titel {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 1.05rem; color: #2d5016;
    margin-bottom: 8px;
}
.ptc-verlassen-titel i { color: #E0A800; }
.ptc-verlassen-text { font-size: 0.92rem; line-height: 1.5; color: #333; margin-bottom: 16px; }
.ptc-verlassen-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ptc-verlassen-knoepfe button {
    border-radius: 8px; padding: 8px 14px;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease;
}
.ptc-verlassen-abbrechen { background: #f1f1f1; border-color: #cccccc; color: #333333; }
.ptc-verlassen-abbrechen:hover { background: #e3e3e3; }
.ptc-verlassen-weiter { background: #68AB03; border-color: #68AB03; color: #ffffff; }
.ptc-verlassen-weiter:hover { background: #5a9403; }

/* Leuchtende Birne (langsam + dezent) */
.ptc-bulb-glow { color: #E0A800; animation: ptcBulbGlow 3.5s ease-in-out infinite; }
@keyframes ptcBulbGlow {
    0%, 100% { color: #E0A800; text-shadow: 0 0 1px rgba(224,168,0,0.25); }
    50%      { color: #EBAE00; text-shadow: 0 0 5px rgba(255,193,7,0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .ptc-bulb-glow { animation: none; }
    .ptc-sonder-panel { transition: none; }
}

/* Überschriften der Chip-Karte in Schwarz (bessere Lesbarkeit) */
.ptc-platten-titel { color: #000 !important; }

/* === NUR Granitplatten (.ptc-platten): Hinweise + Maß-Bereiche besser lesbar ===
   Nutzer-Vorgabe 26.06.2026: auf Tablet/Handy waren grau+klein schwer lesbar →
   schwarz (#000) und etwas größer. Bewusst getrennt von Stufen/Palisaden. */
.ptc-platten .ptc-rows td.ptc-hinweis,
.ptc-platten .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-platten .ptc-note {
    color: #000;
    font-size: 14px;
}
.ptc-platten .ptc-masse-feld label small {
    color: #000;
    font-size: 13px;
}

/* Granitplatten: alle Auswahlfelder exakt gleich breit. Das lange Kantenprofil
   ("Kante oben und unten gerundet") darf das Feld nicht breiter ziehen bzw. auf dem
   Handy aus dem Layout ragen. min-width:0 lässt das Select auf die normale Feldbreite
   (wie die 6 anderen) schrumpfen; langer Text im geschlossenen Feld wird mit … gekürzt
   (voller Name im aufgeklappten Menü + in der 2×2-Kantenprofil-Übersicht darunter). */
.ptc-platten .ptc-select-row select {
    min-width: 0;
    text-overflow: ellipsis;
}

/* Granitplatten: der Klammer-Hinweis im Kantenprofil-Titel steht in einer EIGENEN Zeile
   unter "Kantenprofile" (sonst bricht nur das letzte Wort um). Nur Platten. */
.ptc-platten .ptc-kp-hinweis {
    display: block;
}
/* Tropfkanten-Kachel (nur Platten): sitzt als letzte Kachel neben „Rundstab" im Kantenprofil-Raster.
   Optik wie die Kantenprofile; per Dropdown „ja" grüner Zickzack-Rahmen (.ptc-kp-aktiv). Nicht klickbar. */
.ptc-platten .ptc-tropfkante-option { cursor: zoom-in; } /* anklickbar zum Vergrößern (Lupe) wie die Kantenprofil-Kacheln */

/* === NUR Granitstufen (.ptc-stufen): von .ptc-platten gespiegelt, BEWUSST GETRENNT.
   Eigener Scope, damit Stufen unabhängig divergieren kann; Platten bleibt unberührt.
   (Stufen-Karte trägt die Klasse ptc-stufen via karteBauenStufen.) === */
.ptc-stufen .ptc-kp-block.ptc-kp-gesperrt { opacity: 1; }
.ptc-stufen .ptc-rows td.ptc-hinweis,
.ptc-stufen .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}

.ptc-bruch .ptc-rows td.ptc-hinweis,
.ptc-bruch .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-stufen .ptc-note {
    color: #000;
    font-size: 14px;
}
.ptc-stufen .ptc-masse-feld label small {
    color: #000;
    font-size: 13px;
}
.ptc-stufen .ptc-select-row select {
    min-width: 0;
    text-overflow: ellipsis;
}
.ptc-stufen .ptc-kp-hinweis {
    display: block;
}

/* === NUR Granitpalisaden (.ptc-palisaden): eigener, VOLLSTÄNDIGER Regelsatz.
   Von Stufen gespiegelt, aber BEWUSST GETRENNT – Palisaden hängt an KEINER fremden
   Karten-Regel. So kann Palisaden später frei ausgebaut ODER gelöscht werden, ohne
   dass andere Karten kaputtgehen. (Karte trägt ptc-palisaden via karteBauenPalisaden.) === */
.ptc-palisaden .ptc-kp-block.ptc-kp-gesperrt { opacity: 1; }
.ptc-palisaden .ptc-rows td.ptc-hinweis,
.ptc-palisaden .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-palisaden .ptc-note {
    color: #000;
    font-size: 14px;
}
.ptc-palisaden .ptc-masse-feld label small {
    color: #000;
    font-size: 13px;
}
.ptc-palisaden .ptc-select-row select {
    min-width: 0;
    text-overflow: ellipsis;
}
.ptc-palisaden .ptc-kp-hinweis {
    display: block;
}

/* === NUR Granitrandsteine (.ptc-randsteine): eigener, VOLLSTÄNDIGER Regelsatz.
   Von Palisaden gespiegelt, aber BEWUSST GETRENNT – Randsteine hängt an KEINER fremden
   Karten-Regel. So kann Randsteine später frei ausgebaut ODER gelöscht werden, ohne
   dass andere Karten kaputtgehen. (Karte trägt ptc-randsteine via karteBauenRandsteine.) === */
.ptc-randsteine .ptc-kp-block.ptc-kp-gesperrt { opacity: 1; }
.ptc-randsteine .ptc-rows td.ptc-hinweis,
.ptc-randsteine .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-randsteine .ptc-note {
    color: #000;
    font-size: 14px;
}
.ptc-randsteine .ptc-masse-feld label small {
    color: #000;
    font-size: 13px;
}
.ptc-randsteine .ptc-select-row select {
    min-width: 0;
    text-overflow: ellipsis;
}
.ptc-randsteine .ptc-kp-hinweis {
    display: block;
}


/* Hinweise – pro Chip-Karte EIGENE Regel (getrennt steuerbar) */
/* platten */
.ptc-platten-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-platten-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-platten-hint > span { flex: 1 1 auto; min-width: 0; }
/* stufen */
.ptc-stufen-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-stufen-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-stufen-hint > span { flex: 1 1 auto; min-width: 0; }
/* palisaden */
.ptc-palisaden-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-palisaden-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-palisaden-hint > span { flex: 1 1 auto; min-width: 0; }
/* randsteine */
.ptc-randsteine-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-randsteine-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-randsteine-hint > span { flex: 1 1 auto; min-width: 0; }
/* bruch */
.ptc-bruch-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-bruch-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-bruch-hint > span { flex: 1 1 auto; min-width: 0; }

/* Bruch: 20px Abstand über dem „Ihre Anfrageliste"-Button. Eigene Bruch-Klasse +
   .ptc-bruch-Scope (Spezifität 0,0,3,0 schlägt das Desktop-margin-top:auto). Trifft KEINE andere Karte. */
.ptc-bruch .ptc-info-spalte .ptc-bruch-anfrage { margin-top: 20px; } /* Handy: fester Abstand */
/* Desktop (≥992px): Anfrage-Button ganz unten (auto) → bündig auf EINER Linie mit
   „In Anfrage übernehmen" (17.07.2026, Kundenwunsch — wie Pflaster/Mauerstein; die
   20px-Handy-Regel überstimmte sonst das generische margin-top:auto der Info-Spalte).
   Gilt für Granit- UND Sandstein-Bruch (je eigene Karte, gleiche Anfrage-Klasse). */
@media (min-width: 992px) {
    .ptc-bruch .ptc-info-spalte .ptc-bruch-anfrage { margin-top: auto; padding-top: 40px; }
    .ptc-sst-bruch .ptc-info-spalte .ptc-bruch-anfrage { margin-top: auto; padding-top: 40px; }
    /* 17.07.2026 (Kundenwunsch): Luft ÜBER der Button-Zeile wie beim Sandstein-Bruch (~55px).
       Die linke Granit-Spalte ist voller → der Auto-Abstand fiel dort auf ~11px zusammen;
       das Polster gleicht die Differenz aus (auto hält die Buttons weiter unten bündig). */
    .ptc-bruch .ptc-aktion .ptc-button-row { padding-top: 44px; }
}

/* Stufen: Handy = 20px Abstand; Desktop (≥992px) = auto + MINDEST-Luft 40px (17.07.2026,
   Kundenwunsch Konsistenz): padding-top garantiert die Luft über dem Button, wenn die
   rechte Spalte knapp wird — hat die Spalte ohnehin Überschuss (z. B. Randsteine ~54px),
   schluckt der auto-Abstand das Polster und NICHTS ändert sich. Buttons bleiben so
   IMMER unten bündig auf einer Linie. Eigene Stufen-Klasse. */
.ptc-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: 20px; }
@media (min-width: 992px) {
    .ptc-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: auto; padding-top: 40px; }
}

/* Palisaden: Handy 20px / Desktop auto + Mindest-Luft 40px (Mechanik siehe Stufen). Eigene Palisaden-Klasse. */
.ptc-palisaden .ptc-info-spalte .ptc-palisaden-anfrage { margin-top: 20px; }
@media (min-width: 992px) {
    .ptc-palisaden .ptc-info-spalte .ptc-palisaden-anfrage { margin-top: auto; padding-top: 40px; }
}

/* Randsteine: Handy 20px / Desktop auto + Mindest-Luft 40px (Mechanik siehe Stufen). Eigene Randstein-Klasse. */
.ptc-randsteine .ptc-info-spalte .ptc-randsteine-anfrage { margin-top: 20px; }
@media (min-width: 992px) {
    .ptc-randsteine .ptc-info-spalte .ptc-randsteine-anfrage { margin-top: auto; padding-top: 40px; }
}

/* === NUR Granitpflaster (.ptc-pflaster): eigener, getrennter Regelsatz.
   Karte trägt ptc-pflaster via karteBauenPflaster. Keine Vermischung mit anderen Karten. === */
.ptc-pflaster .ptc-info-spalte .ptc-pflaster-anfrage { margin-top: 20px; } /* Handy: fester Abstand zum Submit-Button */
/* Desktop (≥992px): Anfrage-Button ganz unten (auto) → bündig auf EINER Linie mit
   „In Anfrage übernehmen" (gleiche Logik wie Mauerstein-Block; linke Spalte ist höher). */
@media (min-width: 992px) {
    /* 25.07.2026: padding-top = GARANTIERTER Mindestabstand zum Hinweistext darüber
       (wie Sandstein-Pflaster/Stufen/Bruch) — der längere Kombinieren-Hinweis ließ
       den Auto-Abstand sonst auf 0 zusammenfallen (Text klebte am Button). */
    .ptc-pflaster .ptc-info-spalte .ptc-pflaster-anfrage { margin-top: auto; padding-top: 40px; }
}
/* Größen-Chips RECHTECKIG (wie Mauersteine/Eingabefelder) statt Pillenform */
.ptc-pflaster .ptc-chips { gap: 6px; }
.ptc-pflaster .ptc-chip { border-radius: 8px; padding: 8px 12px; }
/* Hinweise gut lesbar (14px schwarz statt 12px blass) – wie Stufen/Platten/Mauersteine */
.ptc-pflaster .ptc-rows td.ptc-hinweis,
.ptc-pflaster .ptc-rows td.ptc-service-hinweis { color: #000; font-size: 14px; }
.ptc-pflaster .ptc-note { color: #000; font-size: 14px; }
/* Eigene Hinweis-Flex-Klasse (Icon + Text sauber untereinander umbrechend) */
.ptc-pflaster-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-pflaster-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-pflaster-hint > span { flex: 1 1 auto; min-width: 0; }
/* Erster Info-Satz eine Zeile tiefer → mehr Abstand zu „1 Tonne ergibt ca.". Der
   Anfrage-Button bleibt unten (margin-top:auto), verschiebt sich also nicht. */
.ptc-pflaster-hint-abstand { margin-top: 18px; }
/* Rechte Info-Spalte: „Handelsgröße: 4/6 cm" und „1 Tonne ergibt ca.: 8,0 m²"
   – Label und Wert direkt nebeneinander (kein großer horizontaler Abstand),
   je Zeile EINE Zelle statt Label-Spalte + rechtsbündiger Wert-Spalte. */
.ptc-pflaster .ptc-info-spalte .ptc-rows td.ptc-pflaster-datenzeile { padding: 3px 0; }
/* Label + Wert wie die Artikel-Nr.: 14px, normal (nicht fett), gut lesbar #333
   – nicht blass/grau, damit beide klar zu lesen sind. */
.ptc-pflaster-datenzeile .ptc-pf-label,
.ptc-pflaster-datenzeile .ptc-pf-wert { font-size: 14px; font-weight: 400; color: #333; }
/* Kleiner Rundungs-Hinweis unter „Ihr Bedarf in Tonnen" (nur sichtbar bei Aufrundung). */
.ptc-pflaster .ptc-rundung-hinweis { font-size: 12px; color: #333; font-style: italic; text-align: right; margin: -4px 0 6px; }

/* --- Mengenstaffel-Box „Ihre Mengenvorteile" (23.07.2026, NUR Granitpflaster).
   Aufklappbares Panel im Stil der Seiten-FAQ (.faq-header): startet ZUGEKLAPPT,
   Kunde klappt bei Interesse auf. Sitzt direkt unter dem Tonnen/m²-Umschalter;
   zeigt die Staffelstufen und hebt die aktive Stufe hervor. Eigene ptc-mv-* Klassen. */
.ptc-mengenvorteile { margin: 8px 0 12px; }
/* Kopfzeile = Klappschalter, optisch wie .faq-header (grüner Rahmen, Farbverlauf, Pfeil). */
.ptc-mv-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left;
    background: linear-gradient(to bottom, #f1f8f4, #ffffff);
    border: 1px solid #28a745; border-radius: 8px;
    padding: 4px 14px; cursor: pointer;
    transition: background 0.2s ease;
}
.ptc-mv-header:hover { background: #d4edda; }
.ptc-mv-header:focus { outline: none; box-shadow: none; }
.ptc-mv-header::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900;
    color: #28a745; font-size: 0.85rem; margin-left: 10px; flex: 0 0 auto;
    transition: transform 0.3s ease;
}
.ptc-mengenvorteile.is-offen .ptc-mv-header::after { transform: rotate(180deg); }
.ptc-mv-kopf { display: flex; align-items: center; gap: 8px; }
.ptc-mv-icon { flex: 0 0 auto; display: block; }
.ptc-mv-titel { font-size: 15px; font-weight: 700; color: #2f5d1e; }
/* Inhalt startet zu (Höhe 0) und klappt WEICH auf (wie die Seiten-FAQ, kein Springen):
   die Höhe wird per JS animiert (0 ⇄ Inhaltshöhe, danach „auto"). Padding liegt auf
   .ptc-mv-inner, damit es beim Zuklappen sauber mit weggeclippt wird. */
.ptc-mv-body { height: 0; overflow: hidden; transition: height 0.35s ease; }
.ptc-mv-inner { padding: 6px 12px 2px; }
.ptc-mv-stufen { display: flex; flex-direction: column; gap: 3px; }
.ptc-mv-stufe {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 3px 10px;
    background: #fff; border: 1px solid #e2ecd3; border-left: 3px solid #cfe3b3;
    border-radius: 6px;
    font-size: 14px; color: #333;
    transition: background .15s, border-color .15s;
}
.ptc-mv-stufe .ptc-mv-ab { font-weight: 400; }
/* Zusatz „(Mindestabnahmemenge)" hinter der untersten Stufe – klein und dezent. */
.ptc-mv-mindest { font-size: 11px; color: #6b6b6b; font-weight: 400; }
.ptc-mv-stufe .ptc-mv-preis { font-weight: 600; white-space: nowrap; }
/* Aktive Stufe (Menge fällt in diese Stufe) klar hervorgehoben. */
.ptc-mv-stufe.is-aktiv {
    background: #e4f2d2; border-color: #8bbf5a; border-left-color: #5a9c26;
}
.ptc-mv-stufe.is-aktiv .ptc-mv-ab,
.ptc-mv-stufe.is-aktiv .ptc-mv-preis { color: #2f5d1e; font-weight: 700; }
.ptc-mv-fuss { margin-top: 5px; font-size: 11px; color: #555; line-height: 1.3; }
/* Rabatt-Badge „[↓ X %]" vor Tonnen-/m²-Preis (25.07.2026, Kundenwunsch; erscheint
   nur bei aktiver Staffel-Stufe unter Grundpreis, Opt-in je Builder via rabattProzent).
   Feinschliff 25.07.: KEINE Fettschrift; Klammern normal groß, Inhalt etwas kleiner;
   Luft zum Preis per margin; Preis in fester Mindestbreite (rechtsbündig) → die
   Badges der Tonnen- und m²-Zeile stehen exakt untereinander (bündig). */
/* Größen 25.07. (Kundenwunsch): Klammern 16px, Inhalt „↓ X %" 13px */
.ptc-mv-rabatt { color: #28a745; font-weight: 400; margin-right: 12px; font-size: 16px; }
/* Feinschliff 25.07.: Luft zwischen Klammern und Inhalt „[  ↓ 7 %  ]" — besser lesbar */
.ptc-mv-rabatt .ptc-mv-rabatt-wert { font-size: 13px; padding: 0 6px; letter-spacing: 0.5px; }
.ptc-mv-preiswert { display: inline-block; min-width: 84px; text-align: right; }
/* Spannen-Teile („149,00 €" / „- 134,00 €") nie mitten im Preis umbrechen */
.ptc-mv-spannewert { white-space: nowrap; }
/* HANDY (26.07.2026, Kundenwunsch): der Preis bleibt auf der Zeile der Beschriftung,
   das Rabatt-Badge „[↓ X %]" rutscht UNTER den Preis (rechtsbündig). Vorher stand das
   Badge über dem Preis und schob ihn aus der Beschriftungszeile. Technik: die Wert-
   Zelle wird zur Flex-Spalte, das Badge per order ans Ende — gilt für ALLE Karten
   mit Staffel-Badge (Pflaster/Bruch/Mauersteine, Granit + Sandstein). */
@media (max-width: 767px) {
    :is(td, span, div):has(> .ptc-mv-rabatt) {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .ptc-mv-rabatt { display: block; margin-right: 0; order: 2; margin-top: 1px; }
    .ptc-mv-preiswert { min-width: 0; white-space: nowrap; order: 1; }
}

/* === NUR Granitmauersteine (.ptc-mauersteine): eigener, getrennter Regelsatz.
   Karte trägt ptc-mauersteine via karteBauenMauersteine. Keine Vermischung mit anderen Karten. === */
.ptc-mauersteine .ptc-info-spalte .ptc-mauersteine-anfrage { margin-top: 20px; } /* Handy: fester Abstand zum Submit-Button */
/* Desktop (≥992px): NUR bei den Blöcken den Anfrage-Button ganz unten (auto) → bündig mit
   „In Anfrage übernehmen" (die linke Block-Spalte ist höher). Die normale Karte behält den
   festen 20px-Abstand (sonst klebt der Button dort am Hinweis). */
@media (min-width: 992px) {
    .ptc-mauerstein-block .ptc-info-spalte .ptc-mauersteine-anfrage { margin-top: auto; }
}
/* Größen-Chips RECHTECKIG (wie die Eingabefelder, border-radius 8px) statt Pillenform +
   kompakter → alle Größen passen in eine Zeile. Nur die Mauerstein-Karte betroffen. */
.ptc-mauersteine .ptc-chips { gap: 6px; }
.ptc-mauersteine .ptc-chip { border-radius: 8px; padding: 8px 12px; }
.ptc-mauersteine .ptc-chip-block { border-style: dashed; }                        /* Granitblöcke (Endung 5–7) optisch abheben */
.ptc-mauersteine .ptc-mbreite { background: #f0f0f0; color: #555; text-align: center; } /* feste Blockbreite, nicht editierbar */
/* "Menge für Gr. …:" + Stück-Feld + Wort "Stück" in EINER Zeile (Nutzer-Vorgabe).
   Das Stück-Feld liegt jetzt außerhalb von .ptc-masse-feld → eigene Feld-Optik. */
.ptc-mauersteine .ptc-mauerstein-ausfuehrung { margin-bottom: 20px; } /* größerer Touch-Abstand zum Stück-Feld (Handy/Tablet) */
/* Ausführung-Dropdown: Label nur so breit wie nötig, Select füllt bis zum rechten
   Spaltenrand → bündig mit den Werten darunter, kein Überlauf (langer Optionstext). */
.ptc-mauersteine .ptc-mauerstein-ausfuehrung label { flex: 0 0 auto; }
.ptc-mauersteine .ptc-mauerstein-ausfuehrung select { flex: 1 1 auto; min-width: 0; }
.ptc-mauerstein-masshinweis { font-size: 15px; font-weight: 400; color: #333; margin: 0 0 10px; } /* Maß-Reihenfolge (Höhe/Breite/Länge) – normale, gut lesbare Schrift + Abstand */
.ptc-mauersteine .ptc-mauerstein-blockgroesse { font-size: 15px; font-weight: 700; color: #000; margin: 0 0 8px; } /* Größen-Zeile direkt unter Ausführung (normale Größe 15px, fett) */
.ptc-mauersteine .ptc-block-masse .ptc-masse-feld { flex: 0 0 120px; } /* Eingabefelder deutlich schmaler → klar zwei getrennte Einzelwerte */
.ptc-mauersteine .ptc-mauerstein-menge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ptc-mauersteine .ptc-mauerstein-menge-label { font-weight: 600; color: #333; }
.ptc-mauersteine .ptc-mauerstein-menge .ptc-stueck { width: 90px; height: 38px; text-align: center; font-size: 15px; border: 1px solid #c8c8c8; border-radius: 8px; margin-left: auto; }
.ptc-mauersteine .ptc-mauerstein-menge .ptc-stueck:focus { outline: none; border-color: #68AB03; box-shadow: 0 0 0 3px rgba(104, 171, 3, 0.15); }
.ptc-mauersteine .ptc-mauerstein-stueck-wort { color: #333; }
/* Aufrundungs-Hinweis unter den Bedarf-Zeilen (nur m²-Modus, wenn auf ganze Steine aufgerundet wurde) */
.ptc-mauersteine .ptc-mauerstein-rundung { font-size: 12px; color: #333; font-style: italic; text-align: right; margin: -4px 0 6px; }
/* „Format:" fett (nur das Wort, Größe + Legende bleiben normal) */
.ptc-mauersteine .ptc-mauerstein-format-label { font-weight: 700; }
/* Abstand zwischen der Format-Zeile und dem Umschalter (nur Normalsteine haben den Umschalter) */
.ptc-mauersteine .ptc-toggle { margin-top: 20px; }
/* Technische Ausführungs-Skizze NEBEN dem Foto (Größe erbt von .ptc-card-stufen .ptc-skizze svg,
   wie bei Stufen/Platten). Darunter der erklärende Kurztext. Nicht klickbar → normaler Cursor. */
.ptc-mauersteine .ptc-mauerstein-skizze-box { cursor: zoom-in; } /* Klick → vergrößerte Skizze (Lupe) */
/* Kurztext unter der Skizze – gleiche Formatierung wie die Stufen-Notiz „[Rückseite: …]“
   (eckige Klammern kommen aus dem Text; schwarz, fett, etwas größer, zentriert). */
.ptc-mauersteine .ptc-mauerstein-skizze-note-zelle { padding: 6px 0 2px; }
.ptc-mauersteine .ptc-mauerstein-skizze-note { font-size: 12px; color: #111; font-weight: 700; line-height: 1.35; text-align: center; } /* volle Zeile → Text bleibt Zweizeiler */
/* Hinweise unter der Skizze (Transport/Anfrage): 14px schwarz statt 12px blass – wie
   bei Granitstufen/-platten (Nutzer-Vorgabe: auf Tablet/Handy besser lesbar). */
.ptc-mauersteine .ptc-rows td.ptc-hinweis,
.ptc-mauersteine .ptc-rows td.ptc-service-hinweis { color: #000; font-size: 14px; }
.ptc-mauersteine .ptc-note { color: #000; font-size: 14px; }
.ptc-mauersteine .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }

/* ===========================================================================
   Granitrandsteine – Wunschmaße kompakt (EIGENE Klassen, nur diese Karte).
   Höhe/Breite/Länge als schmale Felder mit −/+ links & rechts, alle drei in
   EINER Zeile; Menge in Stück als eigene Zeile (wie Granitmauersteine).
   =========================================================================== */
.ptc-randstein-masse {
    flex-wrap: nowrap;      /* die drei Felder bleiben in einer Zeile */
    gap: 6px;
    align-items: flex-end;
}
.ptc-randstein-masse .ptc-masse-feld {
    flex: 1 1 0;
    min-width: 0;           /* Felder dürfen schmal werden → passen nebeneinander */
}
.ptc-randstein-masse .ptc-randstein-stepper {
    gap: 3px;
    justify-content: center;   /* [− Feld +] mittig im Spaltenfeld → Label sitzt mittig darüber */
}
.ptc-randstein-masse .ptc-randstein-stepper .ptc-step {
    width: 26px;            /* schmalere −/+-Knöpfe, damit drei Felder in eine Zeile passen */
    height: 36px;
    font-size: 17px;
    flex: 0 0 auto;
}
.ptc-randstein-masse .ptc-randstein-stepper input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;            /* überschreibt .ptc-masse-feld input (100%) */
    height: 36px;
    text-align: center;
    font-size: 14px;
    padding: 0 2px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}
/* native Zahl-Pfeilchen ausblenden – die −/+-Knöpfe ersetzen sie und sparen Breite */
.ptc-randstein-masse .ptc-randstein-stepper input::-webkit-outer-spin-button,
.ptc-randstein-masse .ptc-randstein-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ptc-randstein-masse .ptc-randstein-stepper input {
    -moz-appearance: textfield;
}
/* Stück-Zeile (Label + −/+ Stepper wie Mauerstein) mit etwas Luft nach oben */
.ptc-randstein-stueck-row {
    margin-top: 2px;
}

/* ALLE Geräte (≥320px, also auch Handy): H/B/L als 3-Spalten-Raster, Input bis 62px
   („9999,99"), schrumpft bei schmaler Spalte. Knöpfe überall 26px, Stück-Feld
   deckungsgleich unter Länge. So sind Handy und Desktop konsistent. */
@media (min-width: 320px) {
    /* H/B/L als 3-Spalten-Raster (gleich breite Spalten). Jeder Stepper füllt seine
       Spalte, der Input bis 62px („9999,99"), schrumpft bei schmaler Spalte. */
    .ptc-randstein-masse {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .ptc-randstein-masse .ptc-masse-feld {
        min-width: 0;          /* Feld füllt die Rasterspalte, darf schrumpfen */
    }
    .ptc-randstein-masse .ptc-randstein-stepper input {
        flex: 0 1 62px;        /* bis 62px, schrumpft bei Bedarf */
        width: auto;
    }
    /* Stück-Zeile: GLEICHES 3-Spalten-Raster → Label über Spalte 1+2, das Feld in
       Spalte 3, also deckungsgleich unter „Länge". Feld schrumpft genau wie Länge = gleiche Breite. */
    .ptc-randstein-stueck-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: center;
    }
    .ptc-randstein-stueck-row .ptc-input-label {
        grid-column: 1 / 3;    /* über Spalte 1+2 → genug Platz, bleibt einzeilig */
        justify-self: start;
        font-size: 13px;       /* wie die H/B/L-Labels */
        line-height: 1.25;
    }
    .ptc-randstein-stueck-row .ptc-stepper {
        grid-column: 3;        /* exakt unter Länge */
        justify-content: center;
        gap: 3px;
    }
    .ptc-randstein-stueck-row .ptc-stepper .ptc-menge {
        flex: 0 1 62px;        /* schrumpft genau wie die Breite-Spalte → gleiche Breite */
        width: auto;
        min-width: 0;
        height: 36px;
    }
    .ptc-randstein-stueck-row .ptc-step {
        width: 26px;
        height: 36px;
        font-size: 17px;
        flex: 0 0 auto;
    }
}

/* ===========================================================================
   Granitplatten – Wunschmaße kompakt (EIGENE Klassen, nur diese Karte).
   Höhe/Breite/Länge als schmale Felder mit −/+; Menge in Stück unter „Länge".
   =========================================================================== */
.ptc-platten-masse {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-end;
}
.ptc-platten-masse .ptc-masse-feld {
    flex: 1 1 0;
    min-width: 0;
}
.ptc-platten-masse .ptc-platten-stepper {
    gap: 3px;
    justify-content: center;
}
.ptc-platten-masse .ptc-platten-stepper .ptc-step {
    width: 26px;
    height: 36px;
    font-size: 17px;
    flex: 0 0 auto;
}
.ptc-platten-masse .ptc-platten-stepper input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 36px;
    text-align: center;
    font-size: 14px;
    padding: 0 2px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}
.ptc-platten-masse .ptc-platten-stepper input::-webkit-outer-spin-button,
.ptc-platten-masse .ptc-platten-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ptc-platten-masse .ptc-platten-stepper input {
    -moz-appearance: textfield;
}
.ptc-platten-stueck-row {
    margin-top: 2px;
}
@media (min-width: 320px) {
    .ptc-platten-masse {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .ptc-platten-masse .ptc-masse-feld {
        min-width: 0;
    }
    .ptc-platten-masse .ptc-platten-stepper input {
        flex: 0 1 62px;
        width: auto;
    }
    .ptc-platten-stueck-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: center;
    }
    .ptc-platten-stueck-row .ptc-input-label {
        grid-column: 1 / 3;
        justify-self: start;
        font-size: 13px;
        line-height: 1.25;
    }
    .ptc-platten-stueck-row .ptc-stepper {
        grid-column: 3;        /* exakt unter Länge */
        justify-content: center;
        gap: 3px;
    }
    .ptc-platten-stueck-row .ptc-stepper .ptc-menge {
        flex: 0 1 62px;
        width: auto;
        min-width: 0;
        height: 36px;
    }
    .ptc-platten-stueck-row .ptc-step {
        width: 26px;
        height: 36px;
        font-size: 17px;
        flex: 0 0 auto;
    }
}

/* ===========================================================================
   Granitstufen – Wunschmaße kompakt (EIGENE Klassen, nur diese Karte).
   Höhe/Tiefe/Breite als schmale Felder mit −/+; Menge in Stück unter „Breite".
   =========================================================================== */
.ptc-stufen-masse {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-end;
}
.ptc-stufen-masse .ptc-masse-feld {
    flex: 1 1 0;
    min-width: 0;
}
.ptc-stufen-masse .ptc-stufen-stepper {
    gap: 3px;
    justify-content: center;
}
.ptc-stufen-masse .ptc-stufen-stepper .ptc-step {
    width: 26px;
    height: 36px;
    font-size: 17px;
    flex: 0 0 auto;
}
.ptc-stufen-masse .ptc-stufen-stepper input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 36px;
    text-align: center;
    font-size: 14px;
    padding: 0 2px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}
.ptc-stufen-masse .ptc-stufen-stepper input::-webkit-outer-spin-button,
.ptc-stufen-masse .ptc-stufen-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ptc-stufen-masse .ptc-stufen-stepper input {
    -moz-appearance: textfield;
}
.ptc-stufen-stueck-row {
    margin-top: 2px;
}
@media (min-width: 320px) {
    .ptc-stufen-masse {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .ptc-stufen-masse .ptc-masse-feld {
        min-width: 0;
    }
    .ptc-stufen-masse .ptc-stufen-stepper input {
        flex: 0 1 62px;
        width: auto;
    }
    .ptc-stufen-stueck-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: center;
    }
    .ptc-stufen-stueck-row .ptc-input-label {
        grid-column: 1 / 3;
        justify-self: start;
        font-size: 13px;
        line-height: 1.25;
    }
    .ptc-stufen-stueck-row .ptc-stepper {
        grid-column: 3;        /* exakt unter Breite */
        justify-content: center;
        gap: 3px;
    }
    .ptc-stufen-stueck-row .ptc-stepper .ptc-menge {
        flex: 0 1 62px;
        width: auto;
        min-width: 0;
        height: 36px;
    }
    .ptc-stufen-stueck-row .ptc-step {
        width: 26px;
        height: 36px;
        font-size: 17px;
        flex: 0 0 auto;
    }
}

/* ===========================================================================
   Granitpalisaden – Wunschmaße kompakt (EIGENE Klassen, nur diese Karte).
   Höhe/Tiefe/Breite als schmale Felder mit −/+; Menge in Stück unter „Breite".
   =========================================================================== */
.ptc-palisaden-masse {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-end;
}
.ptc-palisaden-masse .ptc-masse-feld {
    flex: 1 1 0;
    min-width: 0;
}
.ptc-palisaden-masse .ptc-palisaden-stepper {
    gap: 3px;
    justify-content: center;
}
.ptc-palisaden-masse .ptc-palisaden-stepper .ptc-step {
    width: 26px;
    height: 36px;
    font-size: 17px;
    flex: 0 0 auto;
}
.ptc-palisaden-masse .ptc-palisaden-stepper input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 36px;
    text-align: center;
    font-size: 14px;
    padding: 0 2px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}
.ptc-palisaden-masse .ptc-palisaden-stepper input::-webkit-outer-spin-button,
.ptc-palisaden-masse .ptc-palisaden-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ptc-palisaden-masse .ptc-palisaden-stepper input {
    -moz-appearance: textfield;
}
.ptc-palisaden-stueck-row {
    margin-top: 2px;
}
@media (min-width: 320px) {
    .ptc-palisaden-masse {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .ptc-palisaden-masse .ptc-masse-feld {
        min-width: 0;
    }
    .ptc-palisaden-masse .ptc-palisaden-stepper input {
        flex: 0 1 62px;
        width: auto;
    }
    .ptc-palisaden-stueck-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: center;
    }
    .ptc-palisaden-stueck-row .ptc-input-label {
        grid-column: 1 / 3;
        justify-self: start;
        font-size: 13px;
        line-height: 1.25;
    }
    .ptc-palisaden-stueck-row .ptc-stepper {
        grid-column: 3;        /* exakt unter Breite */
        justify-content: center;
        gap: 3px;
    }
    .ptc-palisaden-stueck-row .ptc-stepper .ptc-menge {
        flex: 0 1 62px;
        width: auto;
        min-width: 0;
        height: 36px;
    }
    .ptc-palisaden-stueck-row .ptc-step {
        width: 26px;
        height: 36px;
        font-size: 17px;
        flex: 0 0 auto;
    }
}

/* =====================================================================
   SANDSTEIN-KARTEN — eigener, von GRANIT komplett getrennter Regelsatz
   (Nutzer-Regel 09.07.2026: Materialien nie kombinieren/verschachteln).
   Bewusste Duplikate der Granit-Regeln, damit Sandstein später eigen-
   ständig angepasst werden kann, ohne Granit zu berühren.
   ===================================================================== */

/* === NUR Sandstein-Bruch (.ptc-sst-bruch), Builder karteBauenSandsteinBruch === */
.ptc-sst-bruch .ptc-rows td.ptc-hinweis,
.ptc-sst-bruch .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-sst-bruch-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-sst-bruch-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-sst-bruch-hint > span { flex: 1 1 auto; min-width: 0; }
/* 20px Abstand über dem „Ihre Anfrageliste"-Button (wie Granit-Bruch, eigen gescopt) */
.ptc-sst-bruch .ptc-info-spalte .ptc-bruch-anfrage { margin-top: 20px; }
@media (min-width: 992px) {
    /* 24.07.2026 (Konsistenz-Fix): Desktop → Anfrage-Button ganz unten (auto), bündig
       auf EINER Linie mit „In Anfrage übernehmen" (wie Granit-Bruch). Diese Regel MUSS
       NACH der 20px-Handy-Regel oben stehen, sonst überstimmte 20px das auto (gleiche
       Spezifität, Quell-Reihenfolge) → Button blieb auf dem Desktop oben hängen. */
    .ptc-sst-bruch .ptc-info-spalte .ptc-bruch-anfrage { margin-top: auto; padding-top: 40px; }
    /* 24.07.2026: Luft ÜBER der Button-Zeile wie bei Granit-Bruch (Zeile ~1344).
       Die Staffel-Box hat die linke Spalte höher gemacht → der Auto-Abstand rechts
       fiel auf ~0 zusammen, der Hinweistext „…keine Bestellung aus." klebte am Button.
       Das Polster macht die linke Spalte wieder höher → auto öffnet den Abstand rechts,
       Buttons bleiben unten bündig. Nur .ptc-sst-bruch, trifft keine andere Karte. */
    .ptc-sst-bruch .ptc-aktion .ptc-button-row { padding-top: 44px; }
}

/* === NUR Sandstein-Pflaster (.ptc-sst-pflaster), Builder karteBauenPflasterSandstein === */
.ptc-sst-pflaster .ptc-info-spalte .ptc-pflaster-anfrage { margin-top: 20px; } /* Handy: fester Abstand zum Submit-Button */
@media (min-width: 992px) {
    /* Desktop: Anfrage-Button ganz unten (auto) → bündig mit „In Anfrage übernehmen";
       + Mindest-Luft 40px (17.07.2026, Mechanik wie Stufen/Platten: Polster greift nur
       bei knapper Spalte, bei Überschuss schluckt es der auto-Abstand). */
    .ptc-sst-pflaster .ptc-info-spalte .ptc-pflaster-anfrage { margin-top: auto; padding-top: 40px; }
}
/* Größen-Chips rechteckig (wie Granit-Pflaster) */
.ptc-sst-pflaster .ptc-chips { gap: 6px; }
.ptc-sst-pflaster .ptc-chip { border-radius: 8px; padding: 8px 12px; }
/* Hinweise gut lesbar (14px schwarz) */
.ptc-sst-pflaster .ptc-rows td.ptc-hinweis,
.ptc-sst-pflaster .ptc-rows td.ptc-service-hinweis { color: #000; font-size: 14px; }
.ptc-sst-pflaster .ptc-note { color: #000; font-size: 14px; }
/* Eigene Hinweis-Flex-Klasse */
.ptc-sst-pflaster-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-sst-pflaster-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-sst-pflaster-hint > span { flex: 1 1 auto; min-width: 0; }
.ptc-sst-pflaster-hint-abstand { margin-top: 18px; }
/* Rechte Info-Spalte: Datenzeilen kompakt */
.ptc-sst-pflaster .ptc-info-spalte .ptc-rows td.ptc-pflaster-datenzeile { padding: 3px 0; }
/* Rundungs-Hinweis unter „Ihr Bedarf in Tonnen" */
.ptc-sst-pflaster .ptc-rundung-hinweis { font-size: 12px; color: #333; font-style: italic; text-align: right; margin: -4px 0 6px; }


/* === NUR Sandstein-Mauersteine (.ptc-sst-mauersteine), Builder karteBauenMauersteineSandstein.
   Bewusstes Duplikat des Granit-Regelsatzes (Material-Trennung 09.07.2026). === */
.ptc-sst-mauersteine .ptc-info-spalte .ptc-mauersteine-anfrage { margin-top: 20px; } /* Handy: fester Abstand zum Submit-Button */
.ptc-sst-mauersteine .ptc-chips { gap: 6px; }
.ptc-sst-mauersteine .ptc-chip { border-radius: 8px; padding: 8px 12px; }
.ptc-sst-mauersteine .ptc-chip-block { border-style: dashed; }                        /* Blöcke gibt es bei Sandstein nicht (inaktiv) */
.ptc-sst-mauersteine .ptc-mbreite { background: #f0f0f0; color: #555; text-align: center; } /* feste Blockbreite, nicht editierbar */
.ptc-sst-mauersteine .ptc-mauerstein-ausfuehrung { margin-bottom: 20px; } /* größerer Touch-Abstand zum Stück-Feld (Handy/Tablet) */
.ptc-sst-mauersteine .ptc-mauerstein-ausfuehrung label { flex: 0 0 auto; }
.ptc-sst-mauersteine .ptc-mauerstein-ausfuehrung select { flex: 1 1 auto; min-width: 0; }
.ptc-sst-mauersteine .ptc-mauerstein-blockgroesse { font-size: 15px; font-weight: 700; color: #000; margin: 0 0 8px; } /* Größen-Zeile direkt unter Ausführung (normale Größe 15px, fett) */
.ptc-sst-mauersteine .ptc-block-masse .ptc-masse-feld { flex: 0 0 120px; } /* Eingabefelder deutlich schmaler → klar zwei getrennte Einzelwerte */
.ptc-sst-mauersteine .ptc-mauerstein-menge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ptc-sst-mauersteine .ptc-mauerstein-menge-label { font-weight: 600; color: #333; }
.ptc-sst-mauersteine .ptc-mauerstein-menge .ptc-stueck { width: 90px; height: 38px; text-align: center; font-size: 15px; border: 1px solid #c8c8c8; border-radius: 8px; margin-left: auto; }
.ptc-sst-mauersteine .ptc-mauerstein-menge .ptc-stueck:focus { outline: none; border-color: #68AB03; box-shadow: 0 0 0 3px rgba(104, 171, 3, 0.15); }
.ptc-sst-mauersteine .ptc-mauerstein-stueck-wort { color: #333; }
.ptc-sst-mauersteine .ptc-mauerstein-rundung { font-size: 12px; color: #333; font-style: italic; text-align: right; margin: -4px 0 6px; }
.ptc-sst-mauersteine .ptc-mauerstein-format-label { font-weight: 700; }
.ptc-sst-mauersteine .ptc-toggle { margin-top: 20px; }
.ptc-sst-mauersteine .ptc-mauerstein-skizze-box { cursor: zoom-in; } /* Klick → vergrößerte Skizze (Lupe) */
.ptc-sst-mauersteine .ptc-mauerstein-skizze-note-zelle { padding: 6px 0 2px; }
.ptc-sst-mauersteine .ptc-mauerstein-skizze-note { font-size: 12px; color: #111; font-weight: 700; line-height: 1.35; text-align: center; } /* volle Zeile → Text bleibt Zweizeiler */
.ptc-sst-mauersteine .ptc-rows td.ptc-hinweis,
.ptc-sst-mauersteine .ptc-rows td.ptc-service-hinweis { color: #000; font-size: 14px; }
.ptc-sst-mauersteine .ptc-note { color: #000; font-size: 14px; }
.ptc-sst-mauersteine .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ptc-sst-mauersteine-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-sst-mauersteine-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-sst-mauersteine-hint > span { flex: 1 1 auto; min-width: 0; }

/* === NUR Sandstein-Stufen (.ptc-sst-stufen), Builder karteBauenStufenSandstein.
   Bewusstes Duplikat des Granit-Stufen-Regelsatzes (Material-Trennung 09.07.2026). === */
.ptc-sst-stufen .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ptc-sst-stufen .ptc-select-row select:hover:not(:disabled) { border-color: #68AB03; background: #eef6e0; }
.ptc-sst-stufen .ptc-kp-block.ptc-kp-gesperrt { opacity: 1; }
.ptc-sst-stufen .ptc-rows td.ptc-hinweis,
.ptc-sst-stufen .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-sst-stufen .ptc-note {
    color: #000;
    font-size: 14px;
}
.ptc-sst-stufen .ptc-masse-feld label small {
    color: #000;
    font-size: 13px;
}
.ptc-sst-stufen .ptc-select-row select {
    min-width: 0;
    text-overflow: ellipsis;
}
.ptc-sst-stufen .ptc-kp-hinweis {
    display: block;
}
.ptc-sst-stufen-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-sst-stufen-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-sst-stufen-hint > span { flex: 1 1 auto; min-width: 0; }
/* Sandstein-Stufen: Handy 20px / Desktop auto + Mindest-Luft 40px (Mechanik wie Granit-Stufen). Eigen gescopt. */
.ptc-sst-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: 20px; }
@media (min-width: 992px) {
    .ptc-sst-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: auto; padding-top: 40px; }
}

/* === NUR Sandstein-Platten (.ptc-sst-platten), Builder karteBauenPlattenSandstein.
   Bewusstes Duplikat des Granitplatten-Regelsatzes (Material-Trennung 09.07.2026). === */
.ptc-sst-platten .ptc-kp-block.ptc-kp-gesperrt { opacity: 1; }
.ptc-sst-platten .ptc-select-row select:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ptc-sst-platten .ptc-select-row select:hover:not(:disabled) { border-color: #68AB03; background: #eef6e0; }
.ptc-sst-platten .ptc-rows td.ptc-hinweis,
.ptc-sst-platten .ptc-rows td.ptc-service-hinweis {
    color: #000;
    font-size: 14px;
}
.ptc-sst-platten .ptc-note {
    color: #000;
    font-size: 14px;
}
.ptc-sst-platten .ptc-masse-feld label small {
    color: #000;
    font-size: 13px;
}
.ptc-sst-platten .ptc-select-row select {
    min-width: 0;
    text-overflow: ellipsis;
}
.ptc-sst-platten .ptc-kp-hinweis {
    display: block;
}
.ptc-sst-platten .ptc-tropfkante-option { cursor: zoom-in; } /* anklickbar zum Vergrößern (Lupe) wie die Kantenprofil-Kacheln */
.ptc-sst-platten-hint { display: flex; align-items: baseline; gap: 6px; padding-left: 0; }
.ptc-sst-platten-hint > i { flex: 0 0 15px; margin: 0; text-align: left; }
.ptc-sst-platten-hint > span { flex: 1 1 auto; min-width: 0; }
/* Sandstein-Platten: Handy 20px / Desktop auto + Mindest-Luft 40px (Mechanik wie Granit-Platten). Eigen gescopt. */
.ptc-sst-platten .ptc-info-spalte .ptc-platten-anfrage { margin-top: 20px; }
@media (min-width: 992px) {
    .ptc-sst-platten .ptc-info-spalte .ptc-platten-anfrage { margin-top: auto; padding-top: 40px; }
}

/* === Sandstein-Platten: Stepper-Regeln (Duplikat der Granitplatten-Stepper,
   eigene Klasse ptc-sst-platten-stepper — Material-Trennung 10.07.2026).
   Ohne diese Regeln sahen die −/+-Felder ungestylt aus (Nutzer-Fund). === */
.ptc-platten-masse .ptc-sst-platten-stepper {
    gap: 3px;
    justify-content: center;
}

.ptc-platten-masse .ptc-sst-platten-stepper .ptc-step {
    width: 26px;
    height: 36px;
    font-size: 17px;
    flex: 0 0 auto;
}

.ptc-platten-masse .ptc-sst-platten-stepper input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 36px;
    text-align: center;
    font-size: 14px;
    padding: 0 2px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}

.ptc-platten-masse .ptc-sst-platten-stepper input::-webkit-outer-spin-button,
.ptc-platten-masse .ptc-sst-platten-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ptc-platten-masse .ptc-sst-platten-stepper input {
    -moz-appearance: textfield;
}

    @media (min-width: 320px) {
    .ptc-platten-masse .ptc-sst-platten-stepper input {
        flex: 0 1 62px;
        width: auto;
    }
}


/* ==========================================================================
   AKTION (Preisnachlass) — Phase 3 Admin-Vereinigung (10.07.2026)
   Streichpreis (alt) + roter Aktionspreis (neu) + Badge in der Warenpreis-Zeile.
   Bewusst JE KARTE eigene Klassen (keine geteilten Styling-Klassen — Projektregel).
   ========================================================================== */

/* --- Granitstufen-Karte --- */
.ptc-aktion-alt-stufen { text-decoration: line-through; color: #767676; font-weight: 400; }
.ptc-aktion-neu-stufen { color: #d62828; font-weight: 700; margin-right: 6px; }
.ptc-aktion-badge-stufen { display: inline-block; background: #d62828; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.82em; font-weight: 700; margin-left: 8px; white-space: nowrap; }

/* --- Granitplatten-Karte --- */
.ptc-aktion-alt-platten { text-decoration: line-through; color: #767676; font-weight: 400; }
.ptc-aktion-neu-platten { color: #d62828; font-weight: 700; margin-right: 6px; }
.ptc-aktion-badge-platten { display: inline-block; background: #d62828; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.82em; font-weight: 700; margin-left: 8px; white-space: nowrap; }

/* --- Granitpalisaden-Karte --- */
.ptc-aktion-alt-palisaden { text-decoration: line-through; color: #767676; font-weight: 400; }
.ptc-aktion-neu-palisaden { color: #d62828; font-weight: 700; margin-right: 6px; }
.ptc-aktion-badge-palisaden { display: inline-block; background: #d62828; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.82em; font-weight: 700; margin-left: 8px; white-space: nowrap; }

/* --- Granitrandsteine-Karte --- */
.ptc-aktion-alt-randsteine { text-decoration: line-through; color: #767676; font-weight: 400; }
.ptc-aktion-neu-randsteine { color: #d62828; font-weight: 700; margin-right: 6px; }
.ptc-aktion-badge-randsteine { display: inline-block; background: #d62828; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.82em; font-weight: 700; margin-left: 8px; white-space: nowrap; }

/* --- SANDSTEIN-Stufen-Karte --- */
.ptc-aktion-alt-sst-stufen { text-decoration: line-through; color: #767676; font-weight: 400; }
.ptc-aktion-neu-sst-stufen { color: #d62828; font-weight: 700; margin-right: 6px; }
.ptc-aktion-badge-sst-stufen { display: inline-block; background: #d62828; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.82em; font-weight: 700; margin-left: 8px; white-space: nowrap; }

/* --- SANDSTEIN-Platten-Karte --- */
.ptc-aktion-alt-sst-platten { text-decoration: line-through; color: #767676; font-weight: 400; }
.ptc-aktion-neu-sst-platten { color: #d62828; font-weight: 700; margin-right: 6px; }
.ptc-aktion-badge-sst-platten { display: inline-block; background: #d62828; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.82em; font-weight: 700; margin-left: 8px; white-space: nowrap; }

/* Anfrage-Button-Zeile als Flex (11.07.2026: der frühere „Natursteine Ratgeber"-
   Zwillings-Button wurde auf Nutzerwunsch wieder entfernt — Ersatz ist der
   Skizzen-Teaser „Passend aus unserem Ratgeber" unten auf den Produktseiten). */
.ptc-anfrage-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}


/* =====================================================================
   RAHMEN + HINTERGRUND DER CHIP-KARTEN — 21.07.2026 (Kundenwunsch)
   ---------------------------------------------------------------------
   Bisher zeichnete .ptc-detail den Rahmen. Die Auswahlzeile („Bitte Format /
   Größe wählen:", „Verfügbare Handelsgrößen:", „Bitte Farbe / Sorte wählen:")
   samt Chips steht davor und lag damit optisch AUSSERHALB der Karte.
   Jetzt trägt die Karte selbst den Rahmen — die Auswahl liegt drin —, und der
   Detailbereich gibt Rahmen/Polsterung ab (Innenabstand bleibt dadurch gleich).
   Zusätzlich Kartenhintergrund #F1FBF0 (bessere Orientierung für Kunden).

   ⚠️ BEWUSST JE KARTE EIN EIGENER BLOCK (Trennungs-Prinzip, Nutzer-Vorgabe):
   Jede Chip-Karte bleibt einzeln änderbar. Beim Anpassen also gezielt den
   jeweiligen Block bearbeiten — NIEMALS per Suchen-und-Ersetzen über alle.
   ===================================================================== */

/* --- Granitpflaster --- */
.ptc-card.ptc-pflaster {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-pflaster .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-pflaster::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Karte mit Mengenstaffel (23.07.2026): Kopfzeile weist auf die Staffelpreise hin. */
.ptc-card.ptc-pflaster.ptc-hat-staffel::before {
    content: "- BEDARFSRECHNER MIT STAFFELPREISEN -";
}
/* 25.07.2026: Granit-Mauersteine mit Stück-Staffel — gleiche Kopfzeile */
.ptc-card.ptc-mauersteine.ptc-hat-staffel::before {
    content: "- BEDARFSRECHNER MIT STAFFELPREISEN -";
}
/* Chips kompakter: Innenabstand halbiert (war 8px 12px) – Schriftgröße unverändert. */
.ptc-card.ptc-pflaster .ptc-chip {
    padding: 4px 6px;
}

/* --- Sandsteinpflaster --- */
.ptc-card.ptc-sst-pflaster {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-sst-pflaster .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-sst-pflaster::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Karte mit Mengenstaffel (24.07.2026): Kopfzeile weist auf die Staffelpreise hin. */
.ptc-card.ptc-sst-pflaster.ptc-hat-staffel::before {
    content: "- BEDARFSRECHNER MIT STAFFELPREISEN -";
}
/* Chips kompakter: Innenabstand halbiert (war 8px 12px) – Schriftgröße unverändert. */
.ptc-card.ptc-sst-pflaster .ptc-chip {
    padding: 4px 6px;
}

/* --- Granitmauersteine --- */
.ptc-card.ptc-mauersteine {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-mauersteine .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-mauersteine::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 8px 12px) – Schriftgröße unverändert. */
.ptc-card.ptc-mauersteine .ptc-chip {
    padding: 4px 6px;
    order: 1; /* normale Formate zuerst (siehe Umbruch unten) */
}
/* 21.07.2026 (Kundenwunsch): ZWEIZEILIG — Zeile 1 die normalen Formate
   (10/20/40 … 20/20/20 cm), Zeile 2 die Granitblöcke (30/30/60-140 …
   50/50/60-140 cm, gestrichelt). Der Umbruch entsteht durch ein leeres
   Flex-Element (::after) zwischen beiden Gruppen — kein Eingriff in den
   Mauerstein-Builder nötig. Gilt NUR für diese Karte. */
.ptc-card.ptc-mauersteine .ptc-chips::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 2;
}
.ptc-card.ptc-mauersteine .ptc-chip-block {
    order: 3; /* Blockgrößen hinter den Umbruch → eigene Zeile */
}

/* --- Sandsteinmauersteine --- */
.ptc-card.ptc-sst-mauersteine {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-sst-mauersteine .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-sst-mauersteine::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 8px 12px) – Schriftgröße unverändert. */
.ptc-card.ptc-sst-mauersteine .ptc-chip {
    padding: 4px 6px;
}

/* --- Granitrandsteine --- */
.ptc-card.ptc-randsteine {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-randsteine .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-randsteine::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-randsteine .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Granitstufen --- */
.ptc-card.ptc-stufen {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-stufen .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-stufen::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-stufen .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Sandsteinstufen --- */
.ptc-card.ptc-sst-stufen {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-sst-stufen .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-sst-stufen::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-sst-stufen .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Granitplatten --- */
.ptc-card.ptc-platten {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-platten .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-platten::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-platten .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Sandsteinplatten --- */
.ptc-card.ptc-sst-platten {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-sst-platten .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-sst-platten::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-sst-platten .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Granitpalisaden --- */
.ptc-card.ptc-palisaden {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-palisaden .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-palisaden::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-palisaden .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Granitbruchsteine --- */
.ptc-card.ptc-bruch {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-bruch .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-bruch::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Karte mit Mengenstaffel (24.07.2026): Kopfzeile weist auf die Staffelpreise hin. */
.ptc-card.ptc-bruch.ptc-hat-staffel::before {
    content: "- BEDARFSRECHNER MIT STAFFELPREISEN -";
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-bruch .ptc-chip {
    padding: 4.5px 8px;
}

/* --- Sandsteinbruchsteine --- */
.ptc-card.ptc-sst-bruch {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #F1FBF0;
    padding: 14px 16px;
}
.ptc-card.ptc-sst-bruch .ptc-detail {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* Kopfzeile „- BEDARFSRECHNER -" (21.07.2026, Kundenwunsch): grauer Streifen
   über die volle Kartenbreite. Die negativen Ränder heben die Innenpolsterung
   der Karte auf, damit der Streifen bis an den Rahmen reicht. */
.ptc-card.ptc-sst-bruch::before {
    content: "- BEDARFSRECHNER -";
    display: block;
    margin: -14px -16px 14px;
    padding: 7px 10px;
    background: #E6E8DD;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* Sperrschrift statt echter Leerzeichen: sieht wie „B E D A R F S…" aus,
       bleibt aber EIN Wort (Vorlese-Programme buchstabieren nicht, Suchfunktion
       findet den Begriff). text-indent gleicht den Abstand hinter dem letzten
       Buchstaben aus, damit die Zeile optisch mittig bleibt. */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    border-radius: 9px 9px 0 0;
}
/* Karte mit Mengenstaffel (24.07.2026): Kopfzeile weist auf die Staffelpreise hin. */
.ptc-card.ptc-sst-bruch.ptc-hat-staffel::before {
    content: "- BEDARFSRECHNER MIT STAFFELPREISEN -";
}
/* Chips kompakter: Innenabstand halbiert (war 9px 16px) – Schriftgröße unverändert. */
.ptc-card.ptc-sst-bruch .ptc-chip {
    padding: 4.5px 8px;
}

/* =====================================================================
   GRANITMAUERSTEINE — rechte Spalte startet GANZ OBEN (21.07.2026, Kundenwunsch)
   ---------------------------------------------------------------------
   Bisher lief die Größen-Auswahl über die volle Kartenbreite; rechts daneben
   blieb Platz ungenutzt und die Überschrift „Granitmauersteine …" begann erst
   auf Höhe der Ausführungs-Zeile. Jetzt bildet die KARTE selbst das zweispaltige
   Raster: links Auswahl + Eingabe, rechts durchgehend die Info-Spalte ab der
   ersten Zeile.

   Technik: Der namenlose Zwischen-Container und .ptc-detail geben ihre eigene
   Box per display:contents ab, damit Eingabe- und Info-Block direkte Felder des
   Karten-Rasters werden. Selektoren wie „.ptc-detail > .ptc-aktion" greifen
   dabei unverändert weiter — display:contents ändert nur die Box, nicht den DOM.

   Buttons unten bleiben auf EINER Linie: Die Eingabe-Spalte füllt die letzte
   Rasterzeile (1fr) und die Info-Spalte überspannt alle Zeilen — beide enden
   damit an der Kartenunterkante; die vorhandenen „margin-top:auto"-Regeln
   schieben die Knöpfe wie gewohnt ans jeweilige Spaltenende.

   NUR diese Karte (.ptc-mauersteine). Erst ab 992px, darunter bleibt die Karte
   wie bisher einspaltig.
   ===================================================================== */
@media (min-width: 992px) {
    .ptc-card.ptc-mauersteine {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    /* Zwischen-Container und Detail-Raster ihre Box abgeben */
    .ptc-card.ptc-mauersteine > div:not(.ptc-chips),
    .ptc-card.ptc-mauersteine .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-mauersteine .ptc-chips-label { grid-area: label; }
    .ptc-card.ptc-mauersteine .ptc-chips      { grid-area: chips; }
    .ptc-card.ptc-mauersteine .ptc-aktion     { grid-area: aktion; }
    .ptc-card.ptc-mauersteine::before        { grid-area: kopf; }
    .ptc-card.ptc-mauersteine .ptc-info-spalte { grid-area: info; }

    /* Anfrage-Knopf ans Spaltenende (bündig mit „In Anfrage übernehmen").
       Vorher stand hier ein FESTER Abstand von 20px — der passte nur, solange
       beide Spalten gleich hoch waren. Seit die Info-Spalte oben beginnt, ist sie
       höher; „auto" schiebt den Knopf jetzt zuverlässig nach unten, das
       padding-top hält den Mindestabstand zum Hinweistext, falls es eng wird. */
    .ptc-card.ptc-mauersteine .ptc-info-spalte .ptc-mauersteine-anfrage {
        margin-top: auto;
        padding-top: 20px;
    }
}

/* =====================================================================
   GRANITMAUERSTEINE — Größen-Auswahl auf Handy/Tablet in GENAU ZWEI ZEILEN
   (21.07.2026, Kundenwunsch; vorher vier Zeilen à 2/2/2/1)
   ---------------------------------------------------------------------
   Auf 375px stehen der Auswahl nur ~285px zur Verfügung. Einzeilig gesetzt ist
   ein normales Format 93px breit (4 Stück + Abstände = 390px) — das passt nicht.
   Statt die Schrift zu verkleinern (bleibt bewusst bei 14px) bekommt die Leiste
   ein festes 12-Spalten-Raster: die vier normalen Formate je 3 Spalten (= 4 in
   Zeile 1), die drei Blockgrößen je 4 Spalten (= 3 in Zeile 2). Die Beschriftung
   darf dafür im Knopf umbrechen („10/20/40" / „cm").
   Ab 992px gilt weiterhin die Flex-Darstellung mit dem Umbruch-Element.
   NUR diese Karte (.ptc-mauersteine).
   ===================================================================== */
@media (max-width: 991px) {
    .ptc-card.ptc-mauersteine .ptc-chips {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 21.07.2026 (Kundenwunsch): ZEILENabstand größer (10px) — mit dem Finger
           trifft man die schmalen Knöpfe sonst leicht in die falsche Reihe.
           SPALTENabstand bleibt bei 3px: mehr Luft seitlich, und „cm" passt nicht
           mehr in dieselbe Zeile (die Knöpfe sind auf 375px genau ausgereizt). */
        gap: 10px 3px;
    }
    /* Das Umbruch-Element der Desktop-Ansicht würde hier eine Rasterzelle
       belegen und die Blockgrößen verschieben. */
    .ptc-card.ptc-mauersteine .ptc-chips::after {
        display: none;
    }
    .ptc-card.ptc-mauersteine .ptc-chip {
        grid-column: span 3;
        /* 21.07.2026 (Kundenwunsch): Schrift kleiner, damit „cm" in DIESELBE Zeile
           passt (gemessen: bei 375px bleiben je Knopf 69px, „10/20/40 cm" braucht
           bei 11px genau 68px). Bewusst OHNE nowrap: auf schmaleren Geräten
           (360px, 320px) reicht der Platz nicht — dort bricht die Beschriftung
           wieder um, statt aus dem Knopf zu laufen. */
        font-size: 11px;
        padding: 4px 2px;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
    }
    .ptc-card.ptc-mauersteine .ptc-chip-block {
        grid-column: span 4;
    }
}


/* =====================================================================
   RECHTE SPALTE STARTET GANZ OBEN — 21.07.2026 (Kundenwunsch)
   für Granitpflaster, -randsteine, -stufen, -platten, -palisaden sowie
   Sandsteinpflaster, -mauersteine, -stufen, -platten.
   (Granitmauersteine hat weiter oben bereits einen eigenen Block; die
   Bruch-Karten haben keine Auswahl-Leiste und bleiben unverändert.)
   ---------------------------------------------------------------------
   Wie bei den Granitmauersteinen: Die KARTE bildet das zweispaltige Raster,
   links Auswahl + Eingabe, rechts durchgehend die Info-Spalte ab der ersten
   Zeile. Zwischen-Container und .ptc-detail geben ihre Box per display:contents
   ab; vorhandene Selektoren („.ptc-detail > .ptc-aktion" usw.) greifen weiter.

   Buttons unten bleiben auf EINER Linie: die Eingabe-Spalte füllt die letzte
   Rasterzeile (1fr), die Info-Spalte überspannt alle Zeilen — beide enden an der
   Kartenunterkante, die vorhandenen „margin-top:auto"-Regeln je Karte schieben
   die Knöpfe ans Spaltenende.

   ⚠️ JE KARTE EIN EIGENER BLOCK (Trennungs-Prinzip): einzeln änderbar,
   NICHT per Suchen-und-Ersetzen über alle bearbeiten.
   Erst ab 992px; darunter bleibt jede Karte einspaltig wie bisher.
   ===================================================================== */

/* --- Granitpflaster --- */
@media (min-width: 992px) {
    .ptc-card.ptc-pflaster {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-pflaster > div:not(.ptc-chips),
    .ptc-card.ptc-pflaster .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-pflaster .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-pflaster .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-pflaster .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-pflaster::before        { grid-area: kopf; }
    .ptc-card.ptc-pflaster .ptc-info-spalte  { grid-area: info; }
}

/* --- Granitrandsteine --- */
@media (min-width: 992px) {
    .ptc-card.ptc-randsteine {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-randsteine > div:not(.ptc-chips),
    .ptc-card.ptc-randsteine .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-randsteine .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-randsteine .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-randsteine .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-randsteine::before        { grid-area: kopf; }
    .ptc-card.ptc-randsteine .ptc-info-spalte  { grid-area: info; }
}

/* --- Granitstufen --- */
@media (min-width: 992px) {
    .ptc-card.ptc-stufen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-stufen > div:not(.ptc-chips),
    .ptc-card.ptc-stufen .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-stufen .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-stufen .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-stufen .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-stufen::before        { grid-area: kopf; }
    .ptc-card.ptc-stufen .ptc-info-spalte  { grid-area: info; }
}

/* --- Granitplatten --- */
@media (min-width: 992px) {
    .ptc-card.ptc-platten {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-platten > div:not(.ptc-chips),
    .ptc-card.ptc-platten .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-platten .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-platten .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-platten .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-platten::before        { grid-area: kopf; }
    .ptc-card.ptc-platten .ptc-info-spalte  { grid-area: info; }
}

/* --- Granitpalisaden --- */
@media (min-width: 992px) {
    .ptc-card.ptc-palisaden {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-palisaden > div:not(.ptc-chips),
    .ptc-card.ptc-palisaden .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-palisaden .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-palisaden .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-palisaden .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-palisaden::before        { grid-area: kopf; }
    .ptc-card.ptc-palisaden .ptc-info-spalte  { grid-area: info; }
}

/* --- Sandsteinpflaster --- */
@media (min-width: 992px) {
    .ptc-card.ptc-sst-pflaster {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-sst-pflaster > div:not(.ptc-chips),
    .ptc-card.ptc-sst-pflaster .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-sst-pflaster .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-sst-pflaster .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-sst-pflaster .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-sst-pflaster::before        { grid-area: kopf; }
    .ptc-card.ptc-sst-pflaster .ptc-info-spalte  { grid-area: info; }
}

/* --- Sandsteinmauersteine --- */
@media (min-width: 992px) {
    .ptc-card.ptc-sst-mauersteine {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-sst-mauersteine > div:not(.ptc-chips),
    .ptc-card.ptc-sst-mauersteine .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-sst-mauersteine .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-sst-mauersteine .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-sst-mauersteine .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-sst-mauersteine::before        { grid-area: kopf; }
    .ptc-card.ptc-sst-mauersteine .ptc-info-spalte  { grid-area: info; }

    /* Diese Karte hatte als einzige der neun noch KEINE „auto"-Regel für den
       Anfrage-Knopf (nur den festen 20px-Abstand vom Handy). Seit die Info-Spalte
       oben beginnt, ist sie höher — ohne „auto" stünden die Knöpfe versetzt. */
    .ptc-card.ptc-sst-mauersteine .ptc-info-spalte .ptc-mauersteine-anfrage {
        margin-top: auto;
        padding-top: 20px;
    }
}

/* --- Sandsteinstufen --- */
@media (min-width: 992px) {
    .ptc-card.ptc-sst-stufen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-sst-stufen > div:not(.ptc-chips),
    .ptc-card.ptc-sst-stufen .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-sst-stufen .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-sst-stufen .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-sst-stufen .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-sst-stufen::before        { grid-area: kopf; }
    .ptc-card.ptc-sst-stufen .ptc-info-spalte  { grid-area: info; }
}

/* --- Sandsteinplatten --- */
@media (min-width: 992px) {
    .ptc-card.ptc-sst-platten {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kopf   kopf"
            "label  info"
            "chips  info"
            "aktion info";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 28px;
        align-items: stretch;
    }
    .ptc-card.ptc-sst-platten > div:not(.ptc-chips),
    .ptc-card.ptc-sst-platten .ptc-detail {
        display: contents;
    }
    .ptc-card.ptc-sst-platten .ptc-chips-label  { grid-area: label; }
    .ptc-card.ptc-sst-platten .ptc-chips        { grid-area: chips; }
    .ptc-card.ptc-sst-platten .ptc-aktion       { grid-area: aktion; }
    .ptc-card.ptc-sst-platten::before        { grid-area: kopf; }
    .ptc-card.ptc-sst-platten .ptc-info-spalte  { grid-area: info; }
}


/* Granit-Mauersteine (26.07.2026): Tonnen-Zusatz hinter dem Gesamtgewicht —
   Staffelstufen sind in to, der Klammerwert zeigt die Nähe zur nächsten Stufe. */
.ptc-card.ptc-mauersteine .ptc-mst-gewicht-tonnen { color: #5c7a52; }

/* Sandstein-Mauersteine (26.07.2026): Stück-Staffel — Kopfzeile wie bei Granit,
   aber über den EIGENEN Karten-Selektor (strikte Karten-Trennung). */
.ptc-card.ptc-sst-mauersteine.ptc-hat-staffel::before {
    content: "- BEDARFSRECHNER MIT STAFFELPREISEN -";
}
/* Sandstein-Mauersteine: Tonnen-Zusatz hinter dem Gesamtgewicht (Stufen zählen in to) */
.ptc-card.ptc-sst-mauersteine .ptc-sst-mst-gewicht-tonnen { color: #5c7a52; }