/* =====================================================================
   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.
   ===================================================================== */

/* Auf den Prototyp-Seiten den alten Tabellen-Klick-Hinweis ausblenden,
   da die Tabellen durch die neuen Karten ersetzt werden. */
.table-click-hint,
[id^="table-click-hint"],
[class^="table-click-hint"] {
    display: none !important;
}

/* 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: #68AB03;
    background: #f1f8e7;
}

/* Ausgewähltes Feld (Chip) */
.ptc-chip.is-active {
    border-color: #68AB03;
    background: #68AB03;
    color: #ffffff;
    font-weight: 600;
}

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

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

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

.ptc-rows td.ptc-label {
    color: #666;
    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;
}

/* 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: #2d5016;
}

.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: 4px 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;
}

/* Übernehmen-Knopf (nimmt die übrige Breite ein, daneben der Mülleimer) */
.ptc-submit {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #68AB03;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    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: #5a9603;
}

.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: transparent;
    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: #E0A800;
}

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

/* 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: #555;
    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: #68AB03;
    color: #ffffff;
    font-weight: 500;
}

/* Gleicher Maus-Over-Effekt wie beim "In Anfrage übernehmen"-Knopf */
.ptc-toggle-btn:hover {
    background: #5a9603;
    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;
    }
}

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

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