/**
 * Anfrage-Warenkorb - Darstellung
 *
 * Farben und Masse stammen aus dem freigegebenen Claude-Design-Export
 * (Produktkatalog.dc.html / Anfrage.dc.html). Alles laeuft ueber
 * CSS-Variablen, damit sich das Erscheinungsbild zentral anpassen laesst,
 * ohne die Regeln anzufassen.
 */

:root {
    --anfrage-akzent:        #b11915;
    --anfrage-akzent-dunkel: #8f120f;
    --anfrage-akzent-soft:   #F7E9E8;

    --anfrage-karte:      #FFFFFF;
    --anfrage-flaeche:    #FCFCFB;
    --anfrage-linie:      #E4E7E4;
    --anfrage-linie-soft: #EEF0ED;
    --anfrage-linie-hover:#CDD1CE;

    --anfrage-text:       #1A1D1C;
    --anfrage-text-stark: #141714;
    --anfrage-text-muted: #6C726F;
    --anfrage-text-leise: #9AA09B;

    --anfrage-gruen:      #1F7A47;
    --anfrage-gruen-soft: #E7F1EB;
    --anfrage-grau:       #6C726F;
    --anfrage-grau-soft:  #ECEEEB;

    --anfrage-radius:     11px;
    --anfrage-radius-gr:  16px;

    --anfrage-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* =========================================================================
 * Hilfsklassen
 * ====================================================================== */

.anfrage-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sichtbarer Tastaturfokus - bewusst kraeftig, damit er nicht untergeht. */
.anfrage-add:focus-visible,
.anfrage-stepper__btn:focus-visible,
.anfrage-stepper__eingabe:focus-visible,
.anfrage-zeile__entfernen:focus-visible,
.anfrage-pdf:focus-visible,
.anfrage-warenkorb__leer-link:focus-visible {
    outline: 2px solid var(--anfrage-akzent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =========================================================================
 * Hinzufuegen-Button
 * ====================================================================== */

.anfrage-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 17px;
    border: 1px solid var(--anfrage-akzent);
    border-radius: 9px;
    background: transparent;
    color: var(--anfrage-akzent);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.anfrage-add:hover {
    background: var(--anfrage-akzent-soft);
}

.anfrage-add.is-hinzugefuegt {
    background: var(--anfrage-akzent);
    border-color: var(--anfrage-akzent);
    color: #fff;
}

.anfrage-add.is-hinzugefuegt:hover {
    background: var(--anfrage-akzent-dunkel);
    border-color: var(--anfrage-akzent-dunkel);
}

.anfrage-add__icon {
    display: inline-flex;
    flex: none;
}

.anfrage-add__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* =========================================================================
 * Anfrage-Button im Kopfbereich (roter Button mit Badge)
 * ====================================================================== */

.anfrage-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
    height: 46px;
    padding: 0 18px;
    border-radius: 9px;
    background: var(--anfrage-akzent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease;
}

.anfrage-link:hover,
.anfrage-link:focus {
    background: var(--anfrage-akzent-dunkel);
    color: #fff;
}

/* =========================================================================
 * Zaehler-Badge
 * ====================================================================== */

.anfrage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .20);
    font-family: var(--anfrage-mono);
    font-size: 12.5px;
    line-height: 1;
}

/* Steht das Badge nicht im roten Button, braucht es eigene Farben. */
.anfrage-count:not(.anfrage-link .anfrage-count) {
    background: var(--anfrage-akzent);
    color: #fff;
}

.anfrage-link .anfrage-count {
    background: rgba(255, 255, 255, .20);
    color: #fff;
}

.anfrage-count[data-leer="1"] {
    opacity: .65;
}

/* =========================================================================
 * Warenkorb auf der Anfrage-Seite
 * ====================================================================== */

.anfrage-warenkorb {
    background: var(--anfrage-karte);
    border: 1px solid var(--anfrage-linie);
    border-radius: var(--anfrage-radius-gr);
    padding: 6px 24px 22px;
    color: var(--anfrage-text);
}

.anfrage-warenkorb__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0 4px;
}

.anfrage-warenkorb__titel {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--anfrage-text-stark);
}

.anfrage-warenkorb__positionen {
    font-family: var(--anfrage-mono);
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--anfrage-text-leise);
}

/* ---- Einzelne Zeile ---- */

.anfrage-zeile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid var(--anfrage-linie-soft);
    flex-wrap: wrap;
}

.anfrage-zeile__info {
    flex: 1;
    min-width: 180px;
}

.anfrage-zeile__nummer {
    font-family: var(--anfrage-mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--anfrage-text-leise);
}

.anfrage-zeile__name {
    margin: 5px 0 9px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.3;
    color: var(--anfrage-text-stark);
}

.anfrage-zeile__merkmale {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Typ-Chip ---- */

.anfrage-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border: 1px solid #ECEEEA;
    border-radius: 16px;
    background: var(--anfrage-flaeche);
    font-family: var(--anfrage-mono);
    /* Lange Typ-Werte wie "PA66 verstaerkt 40% und mehr (GF, GK, MF, CF)"
       duerfen umbrechen statt die Zeile zu sprengen. */
    max-width: 100%;
}

.anfrage-chip__label {
    flex: none;
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--anfrage-text-leise);
}

.anfrage-chip__wert {
    font-size: 12px;
    letter-spacing: .02em;
    font-weight: 500;
    color: var(--anfrage-text);
    overflow-wrap: anywhere;
}

/* ---- Bestandsstatus ---- */

.anfrage-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    white-space: nowrap;
}

.anfrage-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.anfrage-status--vorraetig {
    background: var(--anfrage-gruen-soft);
    color: var(--anfrage-gruen);
}

.anfrage-status--auf_anfrage {
    background: var(--anfrage-grau-soft);
    color: var(--anfrage-grau);
}

/* ---- Mengen-Stepper ---- */

.anfrage-zeile__aktionen {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.anfrage-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--anfrage-linie);
    border-radius: var(--anfrage-radius);
    overflow: hidden;
    background: #fff;
}

.anfrage-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* flex: none ist wichtig: sobald der Stepper auf Mobil die volle Breite
       einnimmt, wuerde das Eingabefeld die Buttons sonst unter die
       Mindestgroesse fuer Touch-Ziele zusammendruecken. */
    flex: none;
    width: 38px;
    height: 42px;
    border: 0;
    background: #fff;
    color: var(--anfrage-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.anfrage-stepper__btn:first-child { border-right: 1px solid var(--anfrage-linie); }
.anfrage-stepper__btn:last-child  { border-left:  1px solid var(--anfrage-linie); }
.anfrage-stepper__btn:hover       { background: #F5F6F4; }

.anfrage-stepper__eingabe {
    /* Kompakt: die Zahl braucht selten mehr als vier Stellen. */
    width: 46px;
    padding: 0;
    border: 0;
    background: #fff;
    text-align: center;
    font-family: var(--anfrage-mono);
    font-size: 13.5px;
    color: var(--anfrage-text);
    -moz-appearance: textfield;
}

.anfrage-stepper__eingabe::-webkit-outer-spin-button,
.anfrage-stepper__eingabe::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Feste Breite, damit "kg" und "Stk" gleich viel Platz einnehmen und die
   Stepper aller Zeilen exakt gleich breit sind. Inhalt mittig, damit die
   Einheit unabhaengig von ihrer Laenge an derselben Stelle sitzt. */
.anfrage-stepper__einheit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    /* Kein einseitiger Innenabstand - der wuerde den zentrierten Inhalt
       wieder aus der Mitte schieben. */
    padding: 0;
    background: #fff;
    font-family: var(--anfrage-mono);
    font-size: 12.5px;
    color: var(--anfrage-text-leise);
}

/* Die Einheit ist durch das Produkt vorgegeben und wird nur angezeigt -
   kein Auswahlfeld. */

/* ---- Entfernen ---- */

.anfrage-zeile__entfernen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--anfrage-linie);
    border-radius: 10px;
    background: #fff;
    color: var(--anfrage-text-leise);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.anfrage-zeile__entfernen:hover {
    border-color: #e2b6b4;
    color: var(--anfrage-akzent);
    background: #FBF1F0;
}

.anfrage-zeile__entfernen svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---- Leerzustand ---- */

.anfrage-warenkorb__leer {
    padding: 40px 20px;
    border-top: 1px solid var(--anfrage-linie-soft);
    text-align: center;
}

.anfrage-warenkorb__leer-titel {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--anfrage-text-muted);
}

.anfrage-warenkorb__leer-text {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--anfrage-text-leise);
}

.anfrage-warenkorb__leer-link {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    background: var(--anfrage-akzent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.anfrage-warenkorb__leer-link:hover {
    background: var(--anfrage-akzent-dunkel);
    color: #fff;
}

/* ---- Gesamtmenge ---- */

.anfrage-warenkorb__summe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--anfrage-linie);
}

.anfrage-warenkorb__summe-label {
    font-size: 13.5px;
    color: var(--anfrage-text-muted);
}

.anfrage-warenkorb__summe-wert {
    font-family: var(--anfrage-mono);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--anfrage-text-stark);
}

/* =========================================================================
 * PDF-Button und Formularfehler
 * ====================================================================== */

.anfrage-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 48px;
    border: 1px solid #E2E5E2;
    border-radius: var(--anfrage-radius);
    background: #fff;
    color: var(--anfrage-text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
}

.anfrage-pdf:hover {
    border-color: var(--anfrage-linie-hover);
    background: #FAFBFA;
}

.anfrage-pdf svg {
    width: 17px;
    height: 17px;
    display: block;
}

.anfrage-formfehler {
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid #e2b6b4;
    border-radius: 10px;
    background: #FBF1F0;
    color: var(--anfrage-akzent);
    font-size: 14px;
    line-height: 1.45;
}

/* =========================================================================
 * Mobil
 * ====================================================================== */

@media (max-width: 640px) {
    .anfrage-warenkorb {
        padding: 6px 16px 18px;
    }

    .anfrage-zeile {
        gap: 14px;
    }

    /* Mengensteuerung unter die Bezeichnung, volle Breite. */
    .anfrage-zeile__aktionen {
        width: 100%;
        justify-content: space-between;
    }

    .anfrage-stepper {
        flex: 1;
    }

    /* Auf dem Touchscreen etwas grosszuegiger als die 38px im Desktop-Design. */
    .anfrage-stepper__btn {
        width: 44px;
        height: 46px;
    }

    .anfrage-stepper__eingabe {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 46px;
        text-align: center;
    }

    .anfrage-zeile__entfernen {
        width: 44px;
        height: 44px;
        flex: none;
    }

    .anfrage-add {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================================
 * Druck / PDF
 *
 * Gedruckt wird ausschliesslich der eigens aufgebaute Bereich
 * #anfrage-druck (Produktauswahl + Kontaktdaten). Alles andere - Kopf-
 * und Fussbereich des Themes, Navigation, Bedienelemente - bleibt aussen
 * vor. Der Bereich existiert nur waehrend des Druckvorgangs.
 * ====================================================================== */

/* Der Druckbereich ist am Bildschirm unsichtbar. Die Gestaltung darunter
   steht bewusst ausserhalb von @media print: so gelten dieselben Regeln
   auch, wenn der Bereich einmal sichtbar gemacht wird - und sie muessen
   nicht doppelt gepflegt werden. */
.anfrage-druck {
    display: none;
    padding: 0;
    color: #000;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11pt;
    line-height: 1.45;
}

@media print {
    /* Alles ausblenden ... */
    body > * {
        display: none !important;
    }

    /* ... ausser dem Druckbereich. */
    body > .anfrage-druck {
        display: block !important;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    @page {
        margin: 18mm 16mm;
    }
}

    /* ---- Briefkopf: Logo links, Absender rechts ---- */

    .anfrage-druck__briefkopf {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 26px;
    }

    .anfrage-druck__logo img {
        display: block;
        width: 52mm;
        max-width: 100%;
        height: auto;
        /* Ohne das lassen einige Browser die Logofarbe im Druck weg. */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .anfrage-druck__absender {
        display: flex;
        flex-direction: column;
        flex: none;
        text-align: right;
        font-style: normal;
        font-size: 8.5pt;
        line-height: 1.5;
        color: #333;
    }

    .anfrage-druck__absender-name {
        margin-bottom: 2px;
        font-size: 9.5pt;
        font-weight: 600;
        color: #000;
    }

    .anfrage-druck__kopf {
        margin-bottom: 22px;
        padding-bottom: 12px;
        border-bottom: 2px solid #000;
    }

    .anfrage-druck__titel {
        margin: 0 0 4px;
        font-size: 20pt;
        font-weight: 600;
        letter-spacing: -.01em;
    }

    .anfrage-druck__datum {
        margin: 0;
        font-size: 10pt;
        color: #444;
    }

    .anfrage-druck__ueberschrift {
        margin: 22px 0 10px;
        font-size: 12pt;
        font-weight: 600;
    }

    .anfrage-druck__tabelle {
        width: 100%;
        border-collapse: collapse;
        font-size: 10pt;
    }

    .anfrage-druck__tabelle th {
        padding: 7px 8px;
        border-bottom: 1px solid #000;
        text-align: left;
        font-size: 8.5pt;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .anfrage-druck__tabelle td {
        padding: 8px;
        border-bottom: 1px solid #ddd;
        vertical-align: top;
    }

    .anfrage-druck__tabelle tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .anfrage-druck__nr,
    .anfrage-druck__menge {
        font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
        white-space: nowrap;
    }

    .anfrage-druck__menge {
        text-align: right;
    }

    .anfrage-druck__summe {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin: 12px 0 0;
        padding-top: 10px;
        border-top: 2px solid #000;
        font-size: 10.5pt;
    }

    .anfrage-druck__kontakt {
        margin: 0;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .anfrage-druck__kontakt dt {
        margin-top: 8px;
        font-size: 8.5pt;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #444;
    }

    .anfrage-druck__kontakt dd {
        margin: 2px 0 0;
        font-size: 10.5pt;
    }