/*!
 * 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 {
    border: 1px solid #dcebc6;
    border-radius: 10px;
    background: #f1f8e7;
    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; }
.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;
}

/* 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;
    background: #5EA53F;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease;
}

/* 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;
}

.ptc-submit:hover {
    background: #4f9034;
}

.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). */
.ptc-anfrage-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #68AB03;
    border-radius: 8px;
    background: transparent;
    color: #2d5016;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ptc-anfrage-link a:hover {
    background: #fdf3d4; /* dezenter gelblicher Hover-Hintergrund – auf allen Chip-Karten */
    color: #0066cc;
    border-color: #0066cc;
    text-decoration: none;
}

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

.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, werden Schrift, Icon und
   Rahmen gelb (gut lesbar auf hellem Hintergrund). */
.ptc-anfrage-link.hat-anfrage a,
.ptc-anfrage-link.hat-anfrage i {
    color: #F57C00;
}

.ptc-anfrage-link.hat-anfrage a {
    border-color: #F57C00;
}

/* Hover bleibt auch im aktiven (gelben) Zustand blau – wie die Menü-Links oben */
.ptc-anfrage-link.hat-anfrage a:hover {
    color: #0066cc;
    border-color: #0066cc;
}

.ptc-anfrage-link.hat-anfrage a:hover i {
    color: #0066cc;
}

/* 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;
    background: #f1f8e7;
    border: 1px solid #dcebc6;
    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;
}

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

.ptc-toggle-btn.is-active {
    background: #5EA53F;
    color: #ffffff;
    font-weight: 400;
}

/* Gleicher Maus-Over-Effekt wie beim "In Anfrage übernehmen"-Knopf */
.ptc-toggle-btn:hover {
    background: #4f9034;
    color: #ffffff;
}

.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;
        background: #f1f8e7;
        border: 1px solid #dcebc6;
        border-radius: 10px;
    }

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

    /* Platten: Foto macht die rechte Spalte hoch genug – Button näher an den
       Hinweis rücken (kleiner fester Abstand statt „ganz unten"). */
    .ptc-platten .ptc-info-spalte .ptc-platten-anfrage {
        margin-top: 20px;
    }

    /* 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; }

/* Stufen: 20px Abstand über dem „Ihre Anfrageliste"-Button. Eigene Stufen-Klasse +
   .ptc-stufen-Scope. Trifft KEINE andere Karte. */
.ptc-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: 20px; } /* fester Abstand wie Platten – nicht zusammengequetscht (gilt Desktop + Handy) */

/* Palisaden: 20px Abstand über dem „Ihre Anfrageliste"-Button. Eigene Palisaden-Klasse + .ptc-palisaden-Scope. */
.ptc-palisaden .ptc-info-spalte .ptc-palisaden-anfrage { margin-top: 20px; } /* fester Abstand wie Platten – nicht zusammengequetscht (gilt Desktop + Handy) */

/* Randsteine: 20px Abstand über dem „Ihre Anfrageliste"-Button. Eigene Randstein-Klasse. */
.ptc-randsteine .ptc-info-spalte .ptc-randsteine-anfrage { margin-top: 20px; } /* fester Abstand wie Platten – nicht zusammengequetscht (gilt Desktop + Handy) */

/* === 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) {
    .ptc-pflaster .ptc-info-spalte .ptc-pflaster-anfrage { margin-top: auto; }
}
/* 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; }

/* === 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; }

/* === 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" */
    .ptc-sst-pflaster .ptc-info-spalte .ptc-pflaster-anfrage { margin-top: auto; }
}
/* 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; }
.ptc-sst-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: 20px; } /* fester Abstand wie Platten – nicht zusammengequetscht (gilt Desktop + Handy) */
/* 20px Abstand über dem Anfrage-Link (wie Granit-Stufen, eigen gescopt) */
.ptc-sst-stufen .ptc-info-spalte .ptc-stufen-anfrage { margin-top: 20px; }

/* === 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; }
/* Anfrage-Link-Abstand (wie Granitplatten, eigen gescopt) */
.ptc-sst-platten .ptc-info-spalte .ptc-platten-anfrage { margin-top: 20px; }

/* === 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; margin-right: 6px; }
.ptc-aktion-neu-stufen { color: #d62828; font-weight: 700; }
.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; margin-right: 6px; }
.ptc-aktion-neu-platten { color: #d62828; font-weight: 700; }
.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; margin-right: 6px; }
.ptc-aktion-neu-palisaden { color: #d62828; font-weight: 700; }
.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; margin-right: 6px; }
.ptc-aktion-neu-randsteine { color: #d62828; font-weight: 700; }
.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; margin-right: 6px; }
.ptc-aktion-neu-sst-stufen { color: #d62828; font-weight: 700; }
.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; margin-right: 6px; }
.ptc-aktion-neu-sst-platten { color: #d62828; font-weight: 700; }
.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; }

/* ==========================================================================
   „Allg. Natursteine Ratgeber"-Button (10.07.2026) — blauer Zwilling neben
   „Ihre Anfrageliste", öffnet das passende Blog-Kapitel im NEUEN Tab
   (Rechner-Eingaben bleiben erhalten, darum keine Verlassen-Warnung nötig).
   Modifier-Klassen ptc-ratgeber-<karte> je Chip-Karte (für spätere
   Karten-Feinheiten reserviert, Projektregel „strikt pro Karte").
   ========================================================================== */
/* Beide Buttons sauber auf EINER Linie: der Absatz wird zur Flex-Zeile
   (umbrehbar auf schmalen Bildschirmen), Abstand über gap statt margin. */
.ptc-anfrage-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Gefüllter Blau-Button (#26A6F4, Nutzer-Wunsch 10.07.2026) — fällt sofort ins Auge */
.ptc-anfrage-link a.ptc-ratgeber-btn {
    background: #26A6F4;
    border-color: #26A6F4;
    color: #fff;
}
.ptc-anfrage-link a.ptc-ratgeber-btn i { color: #fff; }
/* Gelb-Status (Anfrageliste gefüllt) gilt NICHT für den Ratgeber-Button */
.ptc-anfrage-link.hat-anfrage a.ptc-ratgeber-btn { color: #fff; border-color: #26A6F4; }
.ptc-anfrage-link.hat-anfrage a.ptc-ratgeber-btn i { color: #fff; }
.ptc-anfrage-link a.ptc-ratgeber-btn:hover,
.ptc-anfrage-link.hat-anfrage a.ptc-ratgeber-btn:hover {
    background: #1b8fd8;
    border-color: #1b8fd8;
    color: #fff;
}
.ptc-anfrage-link a.ptc-ratgeber-btn:hover i { color: #fff; }