/* ==========================================================================
   4T6W Glass — Komponenten
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Buttons sind nie kleiner als ein Fingerziel */
    min-height: var(--tap);
    padding: 12px 22px;
    border: 0.5px solid var(--card-border-top);
    border-radius: var(--radius-pill);
    background: var(--card-solid);
    color: var(--txt);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast), opacity var(--t-fast);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    border-color: transparent;
    color: var(--accent-txt);
}

.btn-block { width: 100%; }

.btn[disabled],
.btn.loading {
    opacity: 0.55;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    z-index: var(--z-content);
    margin-bottom: 26px;
    padding: 30px 20px 32px;
    border-radius: var(--radius-lg);
    border: 0.5px solid var(--card-border-top);
    background: var(--card);
    box-shadow: var(--card-shadow);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
    backdrop-filter: blur(var(--blur)) saturate(var(--sat));
    text-align: center;
}

.hero-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--card-border-top);
    background: var(--card-sm);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--txt2);
}

.hero h1 {
    font-size: var(--fs-hero);
    font-weight: 900;
    margin-bottom: 12px;
    /* Balance verhindert einzeln umbrechende Schlusswörter */
    text-wrap: balance;
}

.hero p {
    max-width: 46ch;
    margin: 0 auto 22px;
    font-size: var(--fs-body);
    color: var(--txt2);
    text-wrap: pretty;
}

@media (min-width: 900px) {
    .hero { padding: 54px 40px 58px; }
}

/* --------------------------------------------------------------------------
   Abschnittstitel
   -------------------------------------------------------------------------- */

.sect-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sect-title .sect-meta {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--txt3);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Produktkarte
   -------------------------------------------------------------------------- */

/*
 * Produktkacheln ohne backdrop-filter auf Mobilgeräten.
 *
 * Das ist der größte Hebel für flüssiges Scrollen. Bei 16 Kacheln muss der
 * Browser sonst 16 große Weichzeichnungen bei jedem Frame neu berechnen —
 * genau daran ruckelt Glassmorphism auf Telefonen.
 *
 * Sichtbar ist der Unterschied kaum: die Kachel ist zu drei Vierteln vom
 * Produktfoto ausgefüllt, geblurrt wird also fast nur der eigene Rand. Die
 * Fläche übernimmt --card-solid, ab 900px kommt der Blur zurück.
 */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 0.5px solid var(--card-border-top);
    background: var(--card-solid);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--t) var(--ease);
}

@media (min-width: 900px) {
    .pcard {
        background: var(--card);
        -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
        backdrop-filter: blur(var(--blur)) saturate(var(--sat));
    }
}

/* Hover-Anhebung nur wo es einen echten Zeiger gibt — auf Touch bleibt
   der Zustand sonst nach dem Antippen kleben */
@media (hover: hover) and (pointer: fine) {
    .pcard:hover { transform: translateY(-4px); }
}

.pcard-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.pimg {
    position: relative;
    /* Feste Bildproportion: das Grid springt nicht, während Bilder laden */
    aspect-ratio: 3 / 4;
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.13));
    overflow: hidden;
}

.pimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Platzhalter, solange keine echten Produktfotos hochgeladen sind */
.pimg-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    text-align: center;
    background: linear-gradient(135deg, #2f2f33, #5c5c62);
    color: #fff;
}

.pimg-placeholder .ph-name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

.pimg-placeholder .ph-hint {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.65;
}

.pbadge {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.pbadge-sold {
    background: rgba(180, 30, 30, 0.85);
}

/* Schnellansicht-Auslöser: liegt über dem Bild, aber unter dem Kartenlink */
/* Grundzustand ist der Touch-Fall: sichtbar und 44px groß.
   Verkleinert und auf Hover versteckt wird nur dort, wo es einen echten
   Zeiger gibt — umgekehrt herum liefern manche Browser bei emulierten
   Viewports weiterhin pointer:fine und der Button bliebe zu klein. */
.pquick {
    position: absolute;
    bottom: 9px;
    right: 9px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    cursor: pointer;
    opacity: 1;
    transition: opacity var(--t), transform var(--t-fast);
}

.pquick svg { width: 17px; height: 17px; }
.pquick:active { transform: scale(0.9); }

@media (hover: hover) and (pointer: fine) {
    .pquick {
        width: 36px;
        height: 36px;
        opacity: 0;
    }

    .pcard:hover .pquick,
    .pquick:focus-visible { opacity: 1; }
}

.pinfo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px 13px;
}

.pbrand {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--txt2);
    /* Marke immer einzeilig, sonst wackeln die Kartenhöhen */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pname {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
    /* Zwei Zeilen, dann Auslassungspunkte: alle Karten bleiben gleich hoch */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* Kurzbeschreibung auf der Kachel — zwei Zeilen, dann Auslassungspunkte.
   Ohne die Begrenzung wären die Kacheln im Grid unterschiedlich hoch, weil
   die Texte zwischen 27 und 64 Zeichen schwanken. */
.pexcerpt {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--txt2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

@media (min-width: 600px) {
    .pexcerpt { font-size: var(--fs-sm); }
}

.prow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.pprice {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.pprice del { font-weight: 500; opacity: 0.45; font-size: 0.85em; }
.pprice ins { text-decoration: none; }

/* Preishinweis nach PAngV direkt am Preis */
.ptax {
    font-size: 9px;
    line-height: 1.3;
    color: var(--txt3);
}

.pcard .add-to-cart-wrap { padding: 0 12px 12px; }

.pcard .btn-cart {
    width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* --------------------------------------------------------------------------
   Kategorie-Kopf & Filter
   -------------------------------------------------------------------------- */

.cat-hdr { margin-bottom: 18px; }

.crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-bottom: 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--txt2);
    text-decoration: none;
}

.cat-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.cat-meta {
    font-size: var(--fs-sm);
    color: var(--txt2);
}

.fgroups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.fgroup {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Filterzeilen wischen horizontal statt umzubrechen */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Rand ausgleichen, damit Chips bis an die Kante scrollen */
    margin: 0 calc(var(--page-pad) * -1);
    padding: 2px var(--page-pad);
}

.flabel {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--txt3);
}

.filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    /* 44px Höhe — vorher waren die Chips 33px und damit zu klein */
    min-height: var(--tap);
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--card-border-top);
    background: var(--card-solid);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--txt2);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.filter:active { transform: scale(0.96); }

.filter.active {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    border-color: transparent;
    color: var(--accent-txt);
}

.cat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sort {
    min-height: var(--tap);
    padding: 0 34px 0 14px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--card-border-top);
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px;
    -webkit-appearance: none;
    appearance: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--txt);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Schnellansicht — mobil als Bottom-Sheet, ab Tablet als zentrierte Karte
   -------------------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    /* Blur erst im sichtbaren Zustand — unsichtbare Weichzeichner
       kosten auf manchen Geräten trotzdem Rechenzeit. */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* dvh statt vh: vh rechnet auf iOS die Fläche hinter der einfahrenden
       Adressleiste mit — der Kaufbutton am unteren Rand wäre nicht erreichbar */
    max-height: 92dvh;
    padding-bottom: var(--safe-b);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 0.5px solid var(--card-border-top);
    border-bottom: 0;
    background: var(--card-opaque);
    box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(var(--blur-veil)) saturate(var(--sat));
    backdrop-filter: blur(var(--blur-veil)) saturate(var(--sat));
    overflow: hidden;
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease-out);
}

.modal-overlay.show .modal-card { transform: translateY(0); }

/* Greifleiste als visueller Hinweis, dass sich das Sheet schließen lässt */
.modal-grip {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 9px auto 3px;
    border-radius: var(--radius-pill);
    background: var(--txt3);
}

@media (min-width: 900px) {
    .modal-grip { display: none; }
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 0.5px solid var(--card-border-top);
    border-radius: var(--radius-pill);
    background: var(--card-opaque);
    color: var(--txt);
    cursor: pointer;
}

.modal-close svg { width: 19px; height: 19px; }

/* Der Inhalt ist dieselbe Detailkarte wie auf der Produktseite
   (siehe detail.css). Das Modal liefert nur die Hülle. */
.modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Verhindert, dass die Seite hinter dem Sheet mitscrollt */
    overscroll-behavior: contain;
}

.modal-body > .detail-media { flex: 0 0 auto; }

.modal-body > .detail-info {
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
}

.modal-body .detail-scroll { padding: 18px 16px 6px; }

.modal-body .detail-actions {
    padding: 14px 16px calc(14px + var(--safe-b));
    background: var(--card-opaque);
}

@media (min-width: 900px) {
    .modal-body {
        flex-direction: row;
        overflow: hidden;
    }

    .modal-body > .detail-media { flex: 1 1 52%; min-width: 0; }

    .modal-body > .detail-info {
        flex: 1 1 48%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-body .detail-stage { aspect-ratio: auto; height: 100%; }

    .modal-body .detail-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 24px 24px 6px;
    }

    .modal-body .detail-actions { padding: 16px 24px 20px; }
}

.modal-gallery { flex: 0 0 auto; }

.modal-main-img {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.16));
    overflow: hidden;
}

.modal-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    background-color: var(--card-sm);
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--t-fast), border-color var(--t-fast);
}

.modal-thumb.active { opacity: 1; border-color: var(--accent1); }

/* Einzelnes Bild braucht keine Thumbnail-Leiste */
.modal-thumbs:has(.modal-thumb:only-child) { display: none; }

.modal-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
}

.modal-brand {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--txt2);
}

.modal-name {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 1.4vw, 1.6rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.modal-price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 6px;
}

.modal-tax {
    font-size: var(--fs-xs);
    color: var(--txt2);
    line-height: 1.5;
}

.modal-attrs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
    border-top: 0.5px solid var(--line);
}

.modal-attr {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--line);
    font-size: var(--fs-sm);
}

.modal-attr dt {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--txt2);
}

.modal-attr dd { text-align: right; }

.modal-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px calc(14px + var(--safe-b));
    border-top: 0.5px solid var(--line);
    background: var(--card-opaque);
}

.modal-empty {
    padding: 34px 16px;
    text-align: center;
    color: var(--txt2);
    font-size: var(--fs-sm);
}

@media (min-width: 900px) {
    .modal-overlay {
        align-items: center;
        padding: 28px;
    }

    .modal-card {
        flex-direction: row;
        /* Feste Zielbreite statt width:auto — sonst schrumpft die Karte auf
           die Inhaltsbreite und wirkt neben der Produktseite zu schmal. */
        width: min(960px, 100% - 56px);
        max-width: 960px;
        /* Dieselbe Deckelung wie die Detailkarte der Produktseite, damit
           beide Ansichten gleich proportioniert wirken. */
        max-height: min(680px, 86dvh);
        padding-bottom: 0;
        border-radius: var(--radius-lg);
        border-bottom: 0.5px solid var(--card-border-top);
        transform: scale(0.96);
        opacity: 0;
        transition: transform var(--t-slow) var(--ease-out), opacity var(--t);
    }

    .modal-overlay.show .modal-card { transform: scale(1); opacity: 1; }

    .modal-body {
        flex-direction: row;
        overflow: hidden;
        width: 100%;
    }

    .modal-gallery {
        flex: 1 1 52%;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .modal-main-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }

    .modal-thumbs { padding: 10px 12px 12px; }

    .modal-detail {
        flex: 1 1 48%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow-y: auto;
    }

    .modal-actions { padding: 14px 16px 18px; }
}

/* --------------------------------------------------------------------------
   Kontaktpanel (früher: Chat)
   -------------------------------------------------------------------------- */

.chat-fab {
    position: fixed;
    /* Sitzt über der Tab-Leiste und über dem Home-Indicator */
    bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
    right: max(14px, var(--safe-r));
    z-index: var(--z-fab);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0.5px solid var(--card-border-top);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: var(--accent-txt);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform var(--t-fast);
}

.chat-fab svg { width: 23px; height: 23px; }
.chat-fab:active { transform: scale(0.93); }

@media (min-width: 900px) {
    .chat-fab { bottom: calc(24px + var(--safe-b)); right: 24px; }
}

.chat-panel {
    position: fixed;
    z-index: var(--z-fab);
    /* Mobil bodenbündig über die volle Breite — ein 320px-Panel mit
       Außenabständen wäre auf einem 360px-Gerät unbrauchbar schmal */
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    max-height: 82dvh;
    padding-bottom: var(--safe-b);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 0.5px solid var(--card-border-top);
    border-bottom: 0;
    background: var(--card-opaque);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(var(--blur-veil)) saturate(var(--sat));
    backdrop-filter: blur(var(--blur-veil)) saturate(var(--sat));
    transform: translateY(101%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
}

.chat-panel.open { transform: translateY(0); visibility: visible; }

@media (min-width: 900px) {
    .chat-panel {
        inset: auto 24px 88px auto;
        width: 342px;
        max-height: min(560px, 74dvh);
        padding-bottom: 0;
        border-radius: var(--radius-lg);
        border-bottom: 0.5px solid var(--card-border-top);
    }
}

.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--line);
}

.chat-title {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 800;
}

.chat-sub {
    font-size: var(--fs-xs);
    color: var(--txt2);
    line-height: 1.4;
}

.chat-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.field { display: flex; flex-direction: column; gap: 5px; }

.field label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--txt2);
}

.field input,
.field textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 11px 13px;
    border: 0.5px solid var(--card-border-top);
    border-radius: var(--radius-sm);
    background: var(--card-sm);
    /* 16px: alles darunter löst auf iOS einen Auto-Zoom beim Fokus aus */
    font-size: 16px;
    outline: none;
    transition: border-color var(--t-fast);
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field textarea:focus { border-color: var(--accent1); }

@media (min-width: 900px) {
    .field input,
    .field textarea { font-size: var(--fs-sm); }
}

.form-note {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--txt2);
}

.form-status {
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.form-status[data-state="ok"] {
    background: color-mix(in srgb, var(--ok) 15%, transparent);
    color: var(--ok);
}

.form-status[data-state="err"] {
    background: color-mix(in srgb, var(--err) 15%, transparent);
    color: var(--err);
}

.form-status:empty { display: none; }

/* Honeypot — für Menschen unsichtbar, für Bots ein Köder */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Paginierung
   -------------------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin: 26px 0 8px;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 13px;
    border: 0.5px solid var(--card-border-top);
    border-radius: var(--radius-pill);
    background: var(--card-solid);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--txt2);
}

.pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    border-color: transparent;
    color: var(--accent-txt);
}

/* --------------------------------------------------------------------------
   Dunkelmodus — folgt der Systemeinstellung des Geräts.

   Kein Umschalter, keine Klasse, kein localStorage. Stellt jemand sein
   iPhone oder Samsung auf Dunkel, zieht die Seite mit; stellt er zurück,
   auch. Das ist der Grund, warum diese Regeln in einer Medienabfrage
   stehen und nicht hinter .dark.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
}