/**
 * Pesch Familienwerk – öffentliche Design-Tokens (Phase A).
 *
 * Einbindung: letztes Stylesheet in public/base.html und account/base.html.
 * Admin lädt nur admin.css und bleibt unberührt.
 *
 * Keine globalen Regeln für .btn, .btn-primary, .card, .product-card, .buybox
 * oder .account-*. Header und Footer nur über .pf-header und .pf-footer.
 * Die Kasse wird nur unter .checkout-page gestaltet, der Warenkorb nur unter
 * .cart-page, Anmeldung und Passwort nur unter .login-page,
 * das angemeldete Konto nur unter .account-page,
 * Kontakt und Support nur unter .contact-page und .support-page,
 * das eingebettete Login nur unter .login-inline.
 * Kontoformulare und Produktdetail behalten ihre Felder.
 * Bestehende funktionale Selektoren in public.css und blocks.css bleiben gültig.
 * Neue Bausteine heißen .pf-*.
 *
 * Variablen heißen --pf-*, damit --color-primary, --bg, --accent und --radius
 * aus public.css / blocks.css nicht umgebogen werden.
 *
 * Schriften: Systemstack. Kein Font-CDN, kein @font-face.
 * Liegen später Dateien unter /static/fonts/, kann der Stack um den lokalen
 * Familiennamen ergänzt werden. Solange die Dateien fehlen, würde ein
 * @font-face nur 404-Anfragen erzeugen.
 *
 * Logo: kein url() und kein Dateiname. Der Header (Phase B) nutzt weiter
 * logo_path aus dem Shop-Kontext: /static/{{ logo_path }}.
 *
 * home.css liegt nur auf dem Produktiv-Host und wird dort nicht verändert.
 * Die Startseite bindet sie nicht mehr ein. Ihre Regeln (Vollbild-Hero mit
 * dunklem Verlauf) würden dem neuen Layout widersprechen. Die Startseiten-
 * Klassen .pf-home stehen in diesem Blatt und sind im Worktree versionierbar.
 */

:root {
    --pf-color-cream: #F7F3EC;
    --pf-color-beige: #EFE6D8;
    --pf-color-paper: #FFFCF7;
    --pf-color-ink: #3E2C22;
    --pf-color-ink-soft: #5C4638;
    --pf-color-fir: #1F3A2E;
    --pf-color-fir-hover: #173026;
    --pf-color-sage: #7A8F7A;
    --pf-color-sage-soft: #E7EFE6;
    --pf-color-brown: #6B4A32;
    --pf-color-brown-soft: #8C6A4A;
    --pf-color-line: #E4D9C8;
    --pf-color-focus: #1F3A2E;

    --pf-font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --pf-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;

    --pf-size-body: 1.0625rem;
    --pf-size-small: 0.9375rem;
    --pf-size-title: clamp(2rem, 4vw, 3.25rem);
    --pf-size-section: 1.75rem;
    --pf-leading-body: 1.7;
    --pf-leading-tight: 1.2;

    --pf-space-2xs: 0.25rem;
    --pf-space-xs: 0.5rem;
    --pf-space-sm: 0.75rem;
    --pf-space-md: 1rem;
    --pf-space-lg: 1.5rem;
    --pf-space-xl: 2rem;
    --pf-space-2xl: 3rem;

    --pf-radius-sm: 8px;
    --pf-radius-md: 12px;
    --pf-radius-lg: 16px;

    --pf-control-height: 46px;
    --pf-shadow: 0 8px 24px rgba(62, 44, 34, 0.06);
    --pf-focus-ring: 0 0 0 3px rgba(31, 58, 46, 0.28);
}

/*
 * Fläche und Leseschrift. display, Höhe und overflow bleiben bei public.css,
 * damit der Sticky-Footer und die Kassen-Layouts nicht kippen.
 */
body {
    background-color: var(--pf-color-cream);
    color: var(--pf-color-ink);
    font-family: var(--pf-font-body);
    line-height: var(--pf-leading-body);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: var(--pf-color-beige);
    color: var(--pf-color-ink);
}

/*
 * Fokus nur dort, wo noch kein stärkeres Stylesheet einen Rahmen setzt.
 * :where() hat Spezifität 0 und überstimmt keine Checkout-Fokusregeln.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

/* ---------- Buttons (opt-in) ---------- */
.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pf-space-xs);
    min-height: var(--pf-control-height);
    padding: 0 1.125rem;
    border-radius: var(--pf-radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pf-btn-primary {
    background: var(--pf-color-fir);
    border-color: var(--pf-color-fir);
    color: var(--pf-color-cream);
}

.pf-btn-primary:hover {
    background: var(--pf-color-fir-hover);
    border-color: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
}

.pf-btn-secondary {
    background: transparent;
    border-color: var(--pf-color-brown);
    color: var(--pf-color-ink);
}

.pf-btn-secondary:hover {
    background: var(--pf-color-beige);
    border-color: var(--pf-color-brown);
    color: var(--pf-color-ink);
}

.pf-btn:focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
    box-shadow: var(--pf-focus-ring);
}

.pf-btn:disabled,
.pf-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .pf-btn {
        transition: none;
    }
}

/* ---------- Karten (opt-in) ---------- */
.pf-card {
    background: var(--pf-color-paper);
    color: var(--pf-color-ink);
    border: 1px solid var(--pf-color-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow);
    padding: var(--pf-space-lg);
}

.pf-card-title {
    margin: 0 0 var(--pf-space-xs);
    font-family: var(--pf-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-ink);
}

.pf-card-text {
    margin: 0;
    font-size: var(--pf-size-small);
    line-height: var(--pf-leading-body);
    color: var(--pf-color-ink-soft);
}

/* ---------- Formulare (opt-in, nicht input/select/textarea global) ---------- */
.pf-form {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-md);
}

.pf-field {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-2xs);
}

.pf-label {
    font-size: var(--pf-size-small);
    font-weight: 600;
    color: var(--pf-color-ink);
}

.pf-hint {
    font-size: 0.8125rem;
    color: var(--pf-color-ink-soft);
}

.pf-control {
    width: 100%;
    min-height: var(--pf-control-height);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--pf-color-line);
    border-radius: var(--pf-radius-sm);
    background: var(--pf-color-paper);
    color: var(--pf-color-ink);
    font-size: 1rem;
    line-height: 1.4;
}

textarea.pf-control {
    min-height: 8.5rem;
    resize: vertical;
}

.pf-control:focus {
    outline: none;
    border-color: var(--pf-color-fir);
    box-shadow: var(--pf-focus-ring);
}

.pf-control:disabled {
    background: var(--pf-color-beige);
    cursor: not-allowed;
}

/* ---------- Header (Phase B) ----------
 * public.css setzt .header-nav und footer per !important auf #595959.
 * Die überschreibenden Hintergründe brauchen deshalb ebenfalls !important
 * und eine höhere Spezifität. max-height/opacity des Mobilmenüs bleiben
 * in public.css, damit .nav-open weiter auf- und zuklappt.
 */

.pf-header.site-header {
    background: var(--pf-color-paper);
    color: var(--pf-color-ink);
    border-bottom: 1px solid var(--pf-color-line);
    position: relative;
    top: auto;
    z-index: 20;
    box-shadow: none;
}

.pf-info-bar {
    background: var(--pf-color-fir);
    color: #f6f1e8;
    overflow-x: clip;
    max-width: 100%;
}

.pf-info-bar__perks li.pf-info-bar__perk--free,
.pf-info-bar__perks li.pf-info-bar__perk--free .pf-info-bar__item,
.pf-info-bar__perks li.pf-info-bar__perk--free span {
    white-space: normal;
    cursor: default;
    text-decoration: none;
}

.pf-info-bar__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0.32rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.pf-info-bar__perks {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.28rem 1.15rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-info-bar__perks li,
.pf-info-bar__item,
.pf-info-bar__perks a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    color: #f6f1e8;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.pf-header .pf-info-bar a {
    color: #f6f1e8;
    text-decoration: none;
}

.pf-info-bar__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: #e4c27a;
}

.pf-info-bar__icon svg {
    width: 0.95rem;
    height: 0.95rem;
    max-width: none;
}

.pf-info-bar__service {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(246, 241, 232, 0.28);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.pf-header .pf-info-bar a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.pf-header .pf-info-bar a:focus-visible {
    outline: 2px solid #e4c27a;
    outline-offset: 3px;
    border-radius: 4px;
}

.pf-header .pf-bar {
    background: var(--pf-color-paper);
    color: var(--pf-color-ink);
    border-bottom: 0;
}

.pf-header.site-header + main.shell-container {
    margin-top: 0.65rem;
}

.pf-header.site-header .header-top-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0.15rem 1.25rem 0.2rem;
    gap: 0.5rem 1.25rem;
}

.pf-header .pf-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--pf-color-ink);
    text-decoration: none;
}

.pf-header .pf-logo img {
    display: block;
    height: 112px;
    width: auto;
    max-width: min(280px, 34vw);
    object-fit: contain;
    object-position: left center;
}

.pf-header .pf-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0.2rem 0.25rem 0.2rem 1rem;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 999px;
    box-shadow: none;
}

.pf-header .pf-search input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pf-color-ink);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    appearance: none;
}

.pf-header .pf-search input::placeholder {
    color: var(--pf-color-ink-soft);
    opacity: 0.85;
}

.pf-header .pf-search input:focus {
    outline: 0;
}

.pf-header .pf-search:focus-within {
    border-color: var(--pf-color-fir);
    box-shadow: var(--pf-focus-ring);
}

.pf-header .pf-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    cursor: pointer;
}

.pf-header .pf-search__btn svg {
    display: block;
    fill: none;
    stroke: currentColor;
}

.pf-header .pf-search__btn:hover {
    background: var(--pf-color-fir-hover);
}

.pf-header .pf-logo-text {
    font-family: var(--pf-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-color-ink);
    line-height: 1.2;
}

.pf-header .pf-tools {
    margin-left: auto;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.pf-header .pf-tools .header-link,
.pf-header.site-header .pf-tools a {
    color: var(--pf-color-ink);
    font-weight: 600;
    text-decoration: none;
}

.pf-header .pf-tools .header-link:hover,
.pf-header.site-header .pf-tools a:hover {
    color: var(--pf-color-fir);
}

.pf-header .cart-badge {
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
}

.pf-header .pf-menu-toggle {
    border: 1px solid var(--pf-color-line);
    background: var(--pf-color-paper);
    color: var(--pf-color-ink);
    border-radius: var(--pf-radius-sm);
    cursor: pointer;
}

.pf-header .pf-nav,
.pf-header .header-nav {
    background: var(--pf-color-paper) !important;
    background-color: var(--pf-color-paper) !important;
    color: var(--pf-color-ink);
    border-top: 1px solid var(--pf-color-line);
    box-shadow: none !important;
    padding-top: 0;
    padding-bottom: 0;
}

.pf-header.site-header nav a,
.pf-header.site-header nav.header-nav a.nav-link {
    color: var(--pf-color-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--pf-radius-sm);
}

.pf-header.site-header nav a:hover,
.pf-header.site-header nav.header-nav a.nav-link:hover {
    color: var(--pf-color-fir);
    background: var(--pf-color-beige);
}

.pf-header.site-header nav a.active,
.pf-header.site-header nav.header-nav a.nav-link.active {
    color: var(--pf-color-fir);
    background: var(--pf-color-sage-soft);
}

.pf-header.site-header nav a.active::after,
.pf-header.site-header nav.header-nav a.nav-link.active::after {
    background: var(--pf-color-fir);
}

.pf-header .nav-dropdown {
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: var(--pf-radius-md);
    box-shadow: var(--pf-shadow);
}

.pf-header .nav-dropdown-link {
    color: var(--pf-color-ink);
}

.pf-header .nav-dropdown-link:hover,
.pf-header .nav-dropdown-link.active {
    background: var(--pf-color-beige);
    color: var(--pf-color-fir);
}

.pf-header .nav-dropdown-toggle {
    color: var(--pf-color-ink);
}

.pf-header .nav-dropdown-toggle:hover,
.pf-header .nav-dropdown-toggle:focus-visible {
    background: var(--pf-color-beige);
    outline: none;
}

.pf-header .nav-dropdown-toggle:focus-visible {
    box-shadow: var(--pf-focus-ring);
}

.pf-header .nav-dropdown-toggle svg {
    width: 0.85rem;
    height: 0.85rem;
    max-width: none;
    display: block;
}

.pf-header .nav-item--dropdown.is-open > .nav-dropdown-toggle svg {
    transform: rotate(180deg);
}

.pf-header .nav-dropdown {
    z-index: 30;
}

.pf-header .nav-dropdown .nav-item {
    display: flex;
    align-items: center;
    width: 100%;
}

.pf-header .nav-dropdown .nav-link {
    flex: 1 1 auto;
}

.pf-header .nav-dropdown .nav-dropdown {
    top: 0;
    left: 100%;
    margin-top: 0;
    display: none;
}

.pf-header .nav-dropdown.is-flip {
    left: auto;
    right: 0;
}

.pf-header .nav-dropdown .nav-dropdown.is-flip {
    left: auto;
    right: 100%;
}

@media (min-width: 769px) {
    .pf-header .pf-nav,
    .pf-header .header-nav,
    .pf-header .header-nav-inner {
        overflow: visible;
    }

    .pf-header .nav-dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.4rem;
        height: 1.4rem;
        padding: 0;
        color: var(--pf-color-ink);
    }

    .pf-header .nav-item--dropdown:hover > .nav-dropdown,
    .pf-header .nav-item--dropdown.is-open > .nav-dropdown,
    .pf-header .nav-item--dropdown:focus-within > .nav-dropdown {
        display: block;
    }

    .pf-header .nav-item--dropdown.is-suppress-hover:not(.is-open):not(:focus-within) > .nav-dropdown {
        display: none;
    }

    .pf-header .nav-dropdown .nav-dropdown {
        display: none;
    }

    .pf-header .nav-dropdown .nav-item--dropdown:hover > .nav-dropdown,
    .pf-header .nav-dropdown .nav-item--dropdown.is-open > .nav-dropdown,
    .pf-header .nav-dropdown .nav-item--dropdown:focus-within > .nav-dropdown {
        display: block;
    }
}

@media (max-width: 768px) {
    .pf-header.site-header.nav-open .header-nav {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .pf-header.site-header .nav-item--dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .pf-header.site-header .nav-item--dropdown > .nav-link {
        width: auto;
        flex: 1 1 auto;
    }

    .pf-header.site-header .nav-item--dropdown > .nav-dropdown-toggle {
        flex: 0 0 44px;
        margin-left: 0.35rem;
    }

    .pf-header.site-header .nav-item--dropdown > .nav-dropdown {
        flex: 1 0 100%;
    }

    .pf-header .nav-item--dropdown.is-open > .nav-dropdown {
        display: block;
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.25rem;
        box-shadow: none;
    }

    .pf-header .nav-dropdown .nav-dropdown {
        display: none;
        position: static;
        left: auto;
        width: 100%;
        margin-left: 0.75rem;
    }

    .pf-header .nav-dropdown .nav-item--dropdown.is-open > .nav-dropdown {
        display: block;
    }
}

@media (min-width: 769px) {
    .pf-header.site-header .header-top-inner {
        display: grid;
        grid-template-columns: auto minmax(12rem, 1fr) auto;
        align-items: center;
        column-gap: 1.6rem;
    }

    .pf-header .pf-logo {
        padding: 0.15rem 0;
    }

    .pf-header .pf-tools {
        justify-self: end;
        margin-left: 0;
    }

    .pf-header .header-nav-inner {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.1rem 0.15rem;
        padding-top: 0.2rem;
        padding-bottom: 0.28rem;
    }
}

@media (max-width: 699px) {
    .pf-info-bar__perks li.pf-info-bar__perk--desk {
        display: none;
    }

    .pf-info-bar__perks li.pf-info-bar__perk--free {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .pf-info-bar__inner {
        padding: 0.38rem 0.75rem;
        gap: 0.55rem 0.75rem;
    }

    .pf-info-bar__perks {
        justify-content: flex-start;
        gap: 0.3rem 0.8rem;
    }

    .pf-info-bar__perks li,
    .pf-info-bar__item,
    .pf-info-bar__perks a,
    .pf-info-bar__service {
        font-size: 0.72rem;
    }

    .pf-header.site-header .header-top-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.28rem 0.75rem 0.4rem;
        gap: 0.35rem 0.5rem;
    }

    .pf-header .pf-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pf-header .pf-logo img {
        width: auto;
        height: auto;
        max-height: 76px;
        max-width: min(190px, 58vw);
    }

    .pf-header.site-header {
        position: relative;
        top: auto;
        box-shadow: none;
    }

    .pf-header .pf-search {
        flex: 1 0 100%;
        order: 4;
        max-width: none;
    }

    .pf-header .pf-tools {
        flex: 0 0 auto;
        gap: 0.15rem;
    }

    .pf-header .header-nav-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .pf-header .header-nav-inner > a,
    .pf-header .header-nav .nav-item {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .pf-header .pf-tools .header-link .label,
    .pf-header .mobile-nav-toggle__label {
        display: none;
    }
}

@media (max-width: 480px) {
    .pf-info-bar__inner {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .pf-info-bar__perks {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .pf-info-bar__service {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* ---------- Footer (Phase B) ---------- */

.pf-footer.site-footer.public-footer {
    background: var(--pf-color-beige) !important;
    background-color: var(--pf-color-beige) !important;
    color: var(--pf-color-ink);
    border-top: 1px solid var(--pf-color-line);
    /* Der Consent-Knopf liegt fest unten links und darf die letzte Linkzeile nicht überdecken. */
    padding: 2.5rem 0 7rem;
    overflow-x: clip;
    max-width: 100%;
}

.pf-footer .pf-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.pf-footer .footer-col.pf-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: start;
    justify-self: end;
    grid-column: 5;
    grid-row: 1;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: right;
}

.pf-footer .footer-logo,
.pf-footer .pf-footer__logo {
    display: inline-block;
    max-width: min(280px, 100%);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
}

.pf-footer .footer-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(280px, 100%);
    max-height: 156px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    object-fit: contain;
}

.pf-footer .footer-logo-text,
.pf-footer .pf-logo-text {
    font-family: var(--pf-font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pf-color-ink);
}

.pf-footer.public-footer .pf-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(9.5rem, 1.15fr) minmax(7.5rem, 10.5rem);
    grid-template-areas: "legal info service social logo";
    align-items: start;
    gap: 2rem 1.75rem;
    max-width: none;
    margin: 0;
    padding: 0;
}

.pf-footer .pf-footer__col--legal { grid-area: legal; }
.pf-footer .pf-footer__col--info { grid-area: info; }
.pf-footer .pf-footer__col--service { grid-area: service; }

.pf-footer .footer-col.footer-col-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: social;
    min-width: 0;
}

.pf-footer .footer-col,
.pf-footer .footer-col-social {
    align-items: flex-start;
}

.pf-footer .footer-heading,
.pf-footer h4 {
    margin: 0 0 0.75rem;
    color: var(--pf-color-ink);
    font-family: var(--pf-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pf-footer .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
}

.pf-footer .footer-nav a[href^="mailto:"],
.pf-footer .footer-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pf-footer .footer-mail__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.pf-footer .footer-nav a,
.pf-footer.site-footer a,
.pf-footer.public-footer a {
    color: var(--pf-color-ink-soft);
    text-decoration: none;
    font-size: 0.9375rem;
}

.pf-footer .footer-nav a:hover,
.pf-footer.site-footer a:hover,
.pf-footer.public-footer a:hover {
    color: var(--pf-color-fir);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-footer .footer-nav a.active {
    color: var(--pf-color-fir);
    font-weight: 600;
}

.pf-footer .footer-social {
    flex-direction: row;
    gap: 0.65rem;
}

.pf-footer .footer-icon {
    color: var(--pf-color-ink);
}

.pf-footer .footer-withdrawal-btn {
    display: inline;
    margin: 0 0 0.35rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--pf-color-ink-soft) !important;
    font-weight: 600;
}

.pf-footer .footer-withdrawal-btn:hover {
    color: var(--pf-color-fir) !important;
    opacity: 1;
}

.pf-footer .pf-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    margin: 0.85rem 0 0;
    padding: 0;
    border: 0;
}

.pf-footer .pf-pay__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-color-ink-soft);
}

.pf-footer .pf-pay__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-footer .pf-pay__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pf-color-ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.pf-footer .pf-pay__item img {
    display: block;
    width: auto;
    height: 22px;
    max-width: 72px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 1099px) {
    .pf-footer.public-footer .pf-footer__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "legal info"
            "service social"
            "logo logo";
    }

    .pf-footer .footer-col.pf-footer__brand {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: end;
    }
}

@media (max-width: 680px) {
    .pf-footer.site-footer.public-footer {
        padding-top: 2rem;
    }

    .pf-footer.public-footer .pf-footer__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "legal"
            "info"
            "service"
            "social"
            "logo";
    }

    .pf-footer .footer-col.footer-col-social {
        align-items: flex-start;
    }

    .pf-footer .footer-col.pf-footer__brand {
        grid-column: 1;
        grid-row: 5;
        align-items: center;
        justify-self: center;
        text-align: center;
    }

    .pf-footer .footer-logo,
    .pf-footer .pf-footer__logo,
    .pf-footer .footer-logo img {
        max-width: min(220px, 70vw);
        max-height: 124px;
    }
}

/* ---------- Startseite (Phase C) ----------
 * Liegt in theme.css, nicht in der unversionierten home.css.
 * Alte Klassen (.hero-machine, .what-we-do) werden auf der Startseite
 * nicht mehr verwendet, damit keine zweite Hero-Darstellung greift.
 */

.pf-home {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
}

.pf-home-section {
    padding: 1.15rem 0;
}

.pf-home-title {
    margin: 0 0 1.25rem;
    font-family: var(--pf-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 600;
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-ink);
}

.pf-home-hero {
    padding: 0.15rem 0 0;
}

.pf-home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(115deg, var(--pf-color-cream) 0%, #f4eee4 46%, var(--pf-color-beige) 100%);
    border: 1px solid var(--pf-color-line);
    border-radius: 22px;
}

.pf-home-hero__copy {
    min-width: 0;
    padding: 1.35rem 1.15rem 1.25rem;
}

.pf-home-hero__eyebrow {
    margin: 0 0 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--pf-color-fir);
}

.pf-home-hero__title {
    margin: 0 0 0.75rem;
    font-family: var(--pf-font-heading);
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--pf-color-ink);
}

.pf-home-hero__text {
    margin: 0 0 1.15rem;
    max-width: 36rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--pf-color-ink-soft);
}

.pf-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.pf-home-hero .pf-btn {
    min-height: 48px;
    padding: 0 1.2rem;
}

.pf-home-hero .pf-btn-primary {
    color: #fff;
}

.pf-home-hero .pf-btn-secondary {
    background: var(--pf-color-paper);
    border-color: var(--pf-color-line);
    color: var(--pf-color-ink);
}

.pf-home-hero .pf-btn-secondary:hover {
    background: #fff;
    border-color: var(--pf-color-brown-soft);
    color: var(--pf-color-fir);
}

.pf-home-hero__trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem 0.85rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.pf-home-hero__trust li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pf-color-ink);
}

.pf-home-hero__trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
}

.pf-home-hero__trust-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    max-width: none;
}

.pf-home-hero__media {
    position: relative;
    min-height: 14.5rem;
    background: var(--pf-color-beige);
}

.pf-home-hero__media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 22%;
    background: linear-gradient(180deg, rgba(239, 230, 216, 0.92), rgba(239, 230, 216, 0));
    pointer-events: none;
}

.pf-home-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 14.5rem;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.pf-home-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem 1.25rem;
}

.pf-home-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
}

.pf-home-benefit__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
}

.pf-home-benefit__icon svg {
    width: 1.15rem;
    height: 1.15rem;
    max-width: none;
}

.pf-home-benefit__title {
    margin: 0 0 0.2rem;
    font-family: var(--pf-font-heading);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pf-color-ink);
}

.pf-home-benefit__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--pf-color-ink-soft);
}

.pf-home-work {
    background: #f3eee6;
    box-shadow: 0 0 0 100vmax #f3eee6;
    clip-path: inset(0 -100vmax);
}

.pf-home-work__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.pf-home-work .pf-home-title {
    margin-bottom: 0.55rem;
}

.pf-home-work__text {
    margin: 0;
    max-width: 38rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--pf-color-ink);
}

.pf-home-work__media {
    overflow: hidden;
    border-radius: 16px;
    background: var(--pf-color-beige);
}

.pf-home-work__media img {
    display: block;
    width: 100%;
    height: 11.5rem;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.pf-home-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.pf-home-cat {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(160deg, #e7d7c2 0%, #8d6b4a 58%, #1f3a2e 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--pf-shadow);
    min-width: 0;
}

.pf-home-cat__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform 0.35s ease;
}

.pf-home-cat__shade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 52%;
    background: linear-gradient(180deg, rgba(31, 42, 34, 0) 0%, rgba(22, 32, 26, 0.82) 100%);
}

.pf-home-cat__name {
    position: absolute;
    right: 2.9rem;
    bottom: 0.7rem;
    left: 0.7rem;
    z-index: 1;
    font-family: var(--pf-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    white-space: normal;
    overflow-wrap: normal;
}

.pf-home-cat__arrow {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.94);
    color: var(--pf-color-fir);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.pf-home-cat__arrow svg {
    width: 1.05rem;
    height: 1.05rem;
}

.pf-home-cat:hover,
.pf-home-cat:focus-visible {
    color: #fff;
    text-decoration: none;
}

.pf-home-cat:hover .pf-home-cat__photo {
    transform: scale(1.045);
}

.pf-home-cat:hover .pf-home-cat__arrow,
.pf-home-cat:focus-visible .pf-home-cat__arrow {
    background: #fff;
    transform: translateX(3px);
}

.pf-home-cat:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 3px;
}

.pf-home-cats__hint {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--pf-color-ink-soft);
}

.pf-home-products__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem 1.5rem;
    margin-bottom: 1.15rem;
}

.pf-home-products__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--pf-color-fir);
}

.pf-home-products__head .pf-home-title {
    margin: 0;
    max-width: 18em;
}

.pf-home-products__all {
    flex: 0 0 auto;
}

.pf-home-products {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
}

.pf-home-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 16px;
    overflow: hidden;
    color: var(--pf-color-ink);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(62, 44, 34, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pf-home-product:hover,
.pf-home-product:focus-visible {
    color: var(--pf-color-ink);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(62, 44, 34, 0.1);
}

.pf-home-product:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 3px;
}

.pf-home-product--sold-out {
    opacity: 0.72;
}

.pf-home-product__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--pf-color-beige);
}

.pf-home-product__media img,
.pf-home-product__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.pf-home-product__placeholder {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 252, 247, 0.75), transparent 26%),
        linear-gradient(160deg, #efe6d8 0%, #c9b49a 100%);
}

.pf-home-product:hover .pf-home-product__media img {
    transform: scale(1.04);
}

.pf-home-product__body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
    padding: 0.85rem 0.9rem 0.9rem;
}

.pf-home-product__title {
    margin: 0;
    min-height: 2.6em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pf-color-ink);
}

.pf-home-product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

.pf-home-product__go {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--pf-color-fir);
    color: #fff;
    transition: background-color 0.15s ease;
}

.pf-home-product__go svg {
    width: 1rem;
    height: 1rem;
}

.pf-home-product:hover .pf-home-product__go,
.pf-home-product:focus-visible .pf-home-product__go {
    background: var(--pf-color-fir-hover);
}

.pf-home-product__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: center;
    min-height: 1.5rem;
    font-size: 0.8125rem;
    color: var(--pf-color-ink-soft);
}

.pf-home-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    font-weight: 600;
}

.pf-home-badge--low {
    background: var(--pf-color-beige);
    color: var(--pf-color-brown);
}

.pf-home-badge--out {
    background: var(--pf-color-beige);
    color: var(--pf-color-ink-soft);
}

.pf-home-product__price {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pf-color-ink);
}

main.shell-container:has(#home-idea) {
    padding-bottom: 0;
}

main.shell-container:has(#home-idea) + footer.pf-footer {
    margin-top: 0;
}

.pf-home-perks {
    margin-top: 0.25rem;
    padding: 1rem 0 1.05rem;
    background: #f3eee6;
    box-shadow: 0 0 0 100vmax #f3eee6;
    clip-path: inset(0 -100vmax);
}

.pf-home-perks__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-home-perks__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: var(--pf-color-ink);
    text-decoration: none;
}

a.pf-home-perks__item:hover strong,
a.pf-home-perks__item:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a.pf-home-perks__item:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 3px;
    border-radius: 8px;
}

.pf-home-perks__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
}

.pf-home-perks__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.pf-home-perks__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pf-home-perks__copy strong {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-color-ink);
}

.pf-home-perks__copy span {
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--pf-color-ink-soft);
}

.pf-home-idea {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.pf-home-idea .pf-home-title {
    margin-bottom: 0.45rem;
    max-width: 16ch;
}

.pf-home-idea__text {
    margin: 0 0 0.9rem;
    max-width: 28rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pf-color-ink-soft);
}

.pf-home-idea__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.pf-home-idea__ig {
    color: var(--pf-color-fir);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.pf-home-idea__ig:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.pf-home-idea__collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
    max-width: 22rem;
    justify-content: start;
}

.pf-home-idea__collage img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: none;
    object-fit: cover;
    border-radius: 12px;
    background: var(--pf-color-beige);
}

.pf-home-cta {
    position: relative;
    text-align: left;
}

.pf-home-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--pf-color-beige);
}

.pf-home-cta__text {
    margin: 0 0 1.25rem;
    max-width: 38rem;
    font-size: 1.0625rem;
    line-height: var(--pf-leading-body);
    color: var(--pf-color-ink-soft);
}

.pf-home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .pf-home-section {
        padding: 1.45rem 0;
    }

    .pf-home-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem 1.25rem;
    }

    .pf-home-work__grid,
    .pf-home-idea {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 1.25rem 1.75rem;
    }

    .pf-home-idea {
        align-items: stretch;
    }

    .pf-home-idea__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .pf-home-idea__collage {
        max-width: none;
        height: 100%;
        min-height: 16rem;
        align-self: stretch;
        grid-template-rows: 1fr 1fr;
    }

    .pf-home-idea__collage img {
        height: 100%;
        min-height: 7.5rem;
        aspect-ratio: auto;
    }

    .pf-home-work__media img {
        height: 13.5rem;
    }

    .pf-home-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 480px) {
    .pf-home-hero__trust {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 769px) {
    .pf-home-hero {
        padding: 0.2rem 0 0;
    }

    .pf-home-hero__grid--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 28rem;
    }

    .pf-home-hero__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 1.75rem 2rem 2.15rem;
    }

    .pf-home-hero__media {
        min-height: 28rem;
    }

    .pf-home-hero__media::after {
        inset: 0 auto 0 0;
        width: 22%;
        height: auto;
        background: linear-gradient(90deg, rgba(244, 238, 228, 0.96), rgba(244, 238, 228, 0));
    }

    .pf-home-hero__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 699px) {
    .pf-home-cat__name {
        right: 2.15rem;
        left: 0.55rem;
        bottom: 0.55rem;
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .pf-home-cat__arrow {
        width: 1.5rem;
        height: 1.5rem;
        right: 0.35rem;
        bottom: 0.4rem;
    }

    .pf-home-cat__arrow svg {
        width: 0.9rem;
        height: 0.9rem;
    }
}

@media (min-width: 700px) {
    .pf-home-perks__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-home-cats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .pf-home-perks {
        padding: 1.05rem 0;
    }

    .pf-home-perks__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem 1rem;
    }
}

@media (min-width: 1100px) {
    .pf-home-cats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }

    .pf-home-cat {
        flex: initial;
        max-width: none;
    }

    .pf-home-cat__name {
        font-size: 1.2rem;
    }

    .pf-home-cats__hint {
        display: none;
    }
}

@media (min-width: 1200px) {
    .pf-home-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1680px) {
    .pf-home-products {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-home-cat__photo,
    .pf-home-cat__arrow,
    .pf-home-product,
    .pf-home-product__media img,
    .pf-home-product__go {
        transition: none;
    }
}

/* ---------- Produktdetail ---------- */

.pf-product {
    padding-top: 0.85rem;
    padding-bottom: 1.25rem;
}

.pf-product .breadcrumb {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--pf-color-ink-soft);
}

.pf-product .breadcrumb a {
    color: var(--pf-color-ink-soft);
    text-decoration: none;
}

.pf-product .breadcrumb a:hover {
    color: var(--pf-color-fir);
}

.pf-product .product-top {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(16.5rem, 24rem);
    gap: 1.35rem;
    align-items: start;
}

.pf-product .product-media-main {
    aspect-ratio: 1 / 1;
    max-height: 460px;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 16px;
    overflow: hidden;
}

.pf-product .product-media-main img,
.pf-product .gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--pf-color-paper);
    cursor: zoom-in;
}

.pf-product .product-media-thumbs {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.55rem;
    overflow-x: auto;
}

.pf-product .gallery-thumb {
    flex: 0 0 auto;
    width: 4.25rem;
    height: 4.25rem;
    padding: 0.2rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 10px;
    background: var(--pf-color-paper);
    cursor: pointer;
}

.pf-product .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pf-product .gallery-thumb.active {
    border-color: var(--pf-color-fir);
    box-shadow: 0 0 0 2px var(--pf-color-fir);
}

.pf-product .buybox-card {
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 16px;
    box-shadow: none;
    padding: 1.1rem 1.15rem 1.15rem;
}

.pf-product .product-buybox-title {
    font-family: var(--pf-font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--pf-color-ink);
    margin: 0 0 0.45rem;
}

.pf-product .pf-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin: 0 0 0.2rem;
}

.pf-product .pf-product-price__unit,
.pf-product #live-unit-price {
    font-family: var(--pf-font-heading);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--pf-color-fir);
    line-height: 1.1;
}

.pf-product .pf-product-price__meta {
    color: var(--pf-color-ink-soft);
    font-size: 0.92rem;
}

.pf-product .price-note {
    margin: 0 0 0.65rem;
    color: var(--pf-color-ink-soft);
    font-size: 0.8rem;
}

.pf-product .pf-product-stock {
    margin: 0 0 0.7rem;
}

.pf-product .product-stock-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    font-size: 0.82rem;
    font-weight: 650;
}

.pf-product .product-stock-badge.badge-warning {
    background: var(--pf-color-beige);
    color: var(--pf-color-brown);
}

.pf-product .product-stock-badge.badge-muted {
    background: var(--pf-color-beige);
    color: var(--pf-color-ink-soft);
}

.pf-product .pf-product-lead {
    margin: 0 0 0.9rem;
    color: var(--pf-color-ink-soft);
    line-height: 1.45;
}

.pf-product .buybox-no-personalization {
    margin: 0 0 0.75rem;
    color: var(--pf-color-ink-soft);
    font-size: 0.9rem;
}

.pf-product .form-group {
    margin: 0 0 0.7rem;
}

.pf-product .buybox-card label {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--pf-color-ink);
}

.pf-product .buybox-card input,
.pf-product .buybox-card select,
.pf-product .buybox-card textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--pf-color-line);
    border-radius: 10px;
    background: #fff;
    color: var(--pf-color-ink);
    padding: 0.55rem 0.7rem;
    font: inherit;
}

.pf-product .pf-product-qty {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.pf-product .pf-product-qty label {
    margin: 0;
}

.pf-product .pf-product-qty input {
    width: 5.5rem;
    max-width: 5.5rem;
}

.pf-product #add-to-cart-btn {
    width: 100%;
    min-height: 3rem;
    margin-top: 0.15rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
}

.pf-product #add-to-cart-btn:hover {
    background: var(--pf-color-fir-hover);
}

.pf-product #add-to-cart-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pf-product #add-to-cart-btn:focus-visible,
.pf-product .gallery-thumb:focus-visible,
.pf-product .buybox-card input:focus-visible,
.pf-product .buybox-card select:focus-visible,
.pf-product .buybox-card textarea:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.pf-product-info {
    max-width: 1200px;
    margin: 1.35rem auto 0;
    padding: 0 20px;
}

.pf-product-info__title {
    margin: 0 0 0.75rem;
    font-family: var(--pf-font-heading);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 600;
    color: var(--pf-color-ink);
}

.pf-product-folds {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0;
}

.pf-product-fold {
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    padding: 0 0.95rem;
}

.pf-product-fold summary {
    cursor: pointer;
    font-weight: 650;
    color: var(--pf-color-ink);
    padding: 0.72rem 0;
    list-style: none;
}

.pf-product-fold summary::-webkit-details-marker {
    display: none;
}

.pf-product-fold summary::after {
    content: "";
    float: right;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.35rem;
    border-right: 2px solid var(--pf-color-ink-soft);
    border-bottom: 2px solid var(--pf-color-ink-soft);
    transform: rotate(45deg);
}

.pf-product-fold[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 0.5rem;
}

.pf-product-fold__body {
    padding: 0 0 0.85rem;
    color: var(--pf-color-ink-soft);
    line-height: 1.5;
    white-space: pre-line;
}

.pf-product-fold__body p,
.pf-product-fold__body ul {
    margin: 0 0 0.45rem;
}

.pf-product-fold__body a {
    color: var(--pf-color-fir);
}

.pf-product-faq {
    margin-top: 0;
    font-size: 0.95rem;
    white-space: normal;
}

.pf-product-faq p {
    margin: 0.2rem 0;
}

.pf-product-faq a {
    color: var(--pf-color-fir);
    text-decoration: none;
}

.pf-product-faq a:hover {
    text-decoration: underline;
}

.similar-products {
    max-width: 1200px;
    margin: 2.25rem auto 1.5rem;
    padding: 1.35rem 20px 0;
    border-top: 1px solid var(--pf-color-line);
}

.similar-products-title {
    font-family: var(--pf-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--pf-color-ink);
    margin: 0 0 0.7rem;
}

.similar-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.similar-products .product-card {
    display: flex;
    flex-direction: column;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--pf-color-ink);
}

.similar-products .product-card-image {
    aspect-ratio: 1 / 1;
    background: var(--pf-color-beige);
}

.similar-products .product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.similar-products .product-card-body {
    padding: 0.65rem 0.75rem 0.8rem;
}

.similar-products .product-card-title {
    display: block;
    font-weight: 650;
}

.similar-products .product-card-price {
    color: var(--pf-color-fir);
}

@media (max-width: 900px) {
    .pf-product .product-top {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pf-product .product-media-main {
        width: min(100%, 420px);
        max-height: none;
        margin-inline: auto;
    }

    .similar-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .similar-products-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    .pf-product .product-buybox-title {
        font-size: 1.55rem;
    }
}

/* ---------- Kasse (Phase G1, nur .checkout-page) ---------- */

.checkout-page {
    padding-top: 0.85rem;
    padding-bottom: 1.5rem;
    color: var(--pf-color-ink);
}

.checkout-page .product-buybox-title {
    font-family: var(--pf-font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--pf-color-ink);
    margin: 0 0 0.85rem;
}

.checkout-page .product-buybox-subtitle {
    font-family: var(--pf-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--pf-color-brown);
    margin: 0 0 0.7rem;
}

.checkout-page .buybox-card {
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 16px;
    box-shadow: none;
    padding: 1.05rem 1.1rem 1.1rem;
}

.checkout-page .checkout-layout {
    gap: 1.25rem;
}

.checkout-page .checkout-card + .checkout-card {
    margin-top: 0.85rem;
}

.checkout-page .checkout-card > .product-buybox-subtitle + .checkout-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.checkout-page .checkout-aside .cart-note {
    margin: 0.65rem 0 0;
}

.checkout-page .checkout-main,
.checkout-page .checkout-aside,
.checkout-page .checkout-row,
.checkout-page .checkout-field {
    min-width: 0;
}

.checkout-page .checkout-field {
    margin-bottom: 0.7rem;
}

.checkout-page .checkout-row {
    gap: 0.7rem;
}

.checkout-page .checkout-field > label {
    margin: 0 0 0.28rem;
    color: var(--pf-color-ink);
    font-size: 0.88rem;
    font-weight: 650;
}

.checkout-page .buybox-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.checkout-page .buybox-card select,
.checkout-page .buybox-card textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--pf-control-height);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 10px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    box-shadow: none;
}

.checkout-page .buybox-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.checkout-page .buybox-card select:focus,
.checkout-page .buybox-card textarea:focus {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
    border-color: var(--pf-color-fir);
    background: #fff;
    box-shadow: none;
}

.checkout-page .buybox-card input[type="checkbox"],
.checkout-page .buybox-card input[type="radio"] {
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0.15rem 0 0;
    background: transparent;
    box-shadow: none;
    accent-color: var(--pf-color-fir);
}

.checkout-page .buybox-card input[type="checkbox"]:focus,
.checkout-page .buybox-card input[type="radio"]:focus {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
    box-shadow: none;
}

.checkout-page .buybox-card label.checkout-confirm {
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.45rem;
    font-weight: 500;
    line-height: 1.4;
}

.checkout-page .muted,
.checkout-page .cart-muted,
.checkout-page .cart-note {
    color: var(--pf-color-ink-soft);
}

.checkout-page a {
    color: var(--pf-color-fir);
}

.checkout-page a:hover {
    color: var(--pf-color-fir-hover);
}

.checkout-page .buybox-card label.checkout-pay-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    background: #fff;
    font-weight: 500;
    color: var(--pf-color-ink);
}

.checkout-page .checkout-pay-option + .checkout-pay-option {
    margin-top: 0.45rem;
}

.checkout-page .checkout-pay-option:hover {
    background: var(--pf-color-beige);
}

.checkout-page .checkout-pay-option:has(input:checked) {
    border-color: var(--pf-color-fir);
    background: var(--pf-color-sage-soft);
    box-shadow: inset 0 0 0 1px var(--pf-color-fir);
}

.checkout-page .checkout-pay-option:focus-within {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.checkout-page .buybox-card .checkout-pay-option input[type="radio"]:focus {
    outline: none;
}

.checkout-page .checkout-shipping-price {
    margin-left: auto;
    color: var(--pf-color-fir);
    font-weight: 650;
    white-space: nowrap;
}

.checkout-page .checkout-section {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top-color: var(--pf-color-line);
}

.checkout-page .checkout-summary-rows {
    gap: 0.65rem;
}

.checkout-page .checkout-line {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--pf-color-line);
}

.checkout-page .checkout-line__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: start;
}

.checkout-page .checkout-line__title {
    min-width: 0;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.checkout-page .checkout-line__sum {
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 390px) {
    .checkout-page .checkout-line__head {
        column-gap: 0.75rem;
    }

    .checkout-page .checkout-line__title {
        font-size: 0.95rem;
    }
}

.checkout-page .checkout-line__meta {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--pf-color-ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.checkout-page .checkout-summary-row {
    gap: 0.65rem;
    color: var(--pf-color-ink);
}

.checkout-page .checkout-summary-row > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.checkout-page .checkout-summary-row > span:last-child {
    flex: 0 0 auto;
}

.checkout-page .checkout-summary-row--total {
    margin-top: 0.35rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--pf-color-line);
}

.checkout-page .checkout-summary-total {
    font-family: var(--pf-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--pf-color-fir);
}

.checkout-page .buybox-card .btn,
.checkout-page .buybox-card button[type="submit"] {
    width: 100%;
    min-height: 3rem;
    margin-top: 0.85rem;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    font-size: 1rem;
    font-weight: 650;
    box-shadow: none;
}

.checkout-page .buybox-card .btn:hover,
.checkout-page .buybox-card button[type="submit"]:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
}

.checkout-page .buybox-card .btn:focus-visible,
.checkout-page .buybox-card button[type="submit"]:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.checkout-page .alert {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    line-height: 1.45;
}

.checkout-page .alert-error {
    background: #f8efea;
    color: #5c2e24;
    border: 1px solid #e4c8bc;
}

.checkout-page .alert-success {
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    border: 1px solid #c9d8c8;
}

.checkout-page .alert a {
    font-weight: 650;
}

.checkout-page .alert ul {
    margin: 0.35rem 0 0;
}

@media (min-width: 901px) {
    .checkout-page .checkout-layout {
        grid-template-columns: minmax(0, 1fr) 22.5rem;
    }

    .checkout-page .checkout-aside {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 900px) {
    .checkout-page .checkout-layout {
        gap: 0.85rem;
    }

    .checkout-page .checkout-aside {
        order: -1;
    }
}

@media (max-width: 768px) {
    .checkout-page .buybox-card {
        padding: 0.9rem 0.85rem;
    }
}

@media (max-width: 390px) {
    .checkout-page .product-buybox-title {
        font-size: 1.55rem;
    }

    .checkout-page .product-buybox-subtitle {
        font-size: 1.1rem;
    }
}

.checkout-page .checkout-field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.3rem 0 0;
    color: #7a332c;
    font-size: 0.82rem;
    line-height: 1.35;
    position: relative;
    z-index: 1;
    scroll-margin: 5rem;
}

.checkout-page .checkout-field-error-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    background: #8f3d32;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.checkout-page .checkout-field--invalid > input:not([type="checkbox"]):not([type="radio"]),
.checkout-page .checkout-field--invalid > select,
.checkout-page .checkout-field--invalid > textarea {
    border-color: #8f3d32;
}

.checkout-page .checkout-section.checkout-field--invalid .checkout-pay-option {
    border-color: #8f3d32;
}

.checkout-page label.checkout-field--invalid {
    outline: 1px solid #8f3d32;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Warenkorb (Phase H2, nur .cart-page) ---------- */

.cart-page {
    padding-top: 0.85rem;
    padding-bottom: 1.5rem;
    color: var(--pf-color-ink);
}

.cart-page .product-buybox-title {
    font-family: var(--pf-font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--pf-color-ink);
    margin: 0 0 0.85rem;
}

.cart-page .product-buybox-subtitle {
    font-family: var(--pf-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--pf-color-brown);
    margin: 0 0 0.7rem;
}

.cart-page .buybox-card {
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 16px;
    box-shadow: none;
    padding: 1.05rem 1.1rem 1.1rem;
}

.cart-page .cart-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.cart-page .cart-items-section,
.cart-page .cart-aside,
.cart-page .cart-main,
.cart-page .cart-item-right {
    min-width: 0;
}

.cart-page .cart-aside {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: static;
}

.cart-page .cart-checkout-card {
    margin-top: 0;
}

.cart-page .cart-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem 0.9rem;
    align-items: start;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--pf-color-line);
}

.cart-page .cart-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.cart-page .cart-item-left {
    display: contents;
}

.cart-page .cart-thumb-wrap {
    display: block;
}

.cart-page .cart-thumb,
.cart-page .cart-thumb--placeholder {
    width: 4.5rem;
    height: 4.5rem;
    min-width: 4.5rem;
    border-radius: 10px;
    border: 1px solid var(--pf-color-line);
    object-fit: cover;
    background: var(--pf-color-beige);
    color: var(--pf-color-brown);
}

.cart-page .cart-title {
    color: var(--pf-color-ink);
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.cart-page .cart-title:hover {
    color: var(--pf-color-fir);
    text-decoration: underline;
}

.cart-page .cart-muted,
.cart-page .muted,
.cart-page .cart-note,
.cart-page .cart-user-note {
    color: var(--pf-color-ink-soft);
    overflow-wrap: anywhere;
}

.cart-page .cart-personal-note {
    margin: 0.35rem 0 0;
    color: #7a332c;
}

.cart-page .cart-unit {
    margin-top: 0.35rem;
    color: var(--pf-color-brown);
    font-size: 0.92rem;
}

.cart-page .cart-stock-badge {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
}

.cart-page .cart-item-right {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.cart-page .cart-qty-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.cart-page .cart-qty-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cart-page .cart-qty-input {
    width: 4.75rem;
    max-width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 10px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    text-align: right;
    box-shadow: none;
}

.cart-page .cart-qty-input:focus {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
    border-color: var(--pf-color-fir);
}

.cart-page .cart-qty-form .btn {
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--pf-color-fir);
    border-radius: 10px;
    background: transparent;
    color: var(--pf-color-fir);
    box-shadow: none;
    transform: none;
    white-space: nowrap;
}

.cart-page .cart-qty-form .btn:hover {
    background: var(--pf-color-beige);
    color: var(--pf-color-fir);
    transform: none;
    box-shadow: none;
}

.cart-page .cart-line-sum {
    margin-left: auto;
    color: var(--pf-color-ink);
    font-weight: 650;
    white-space: nowrap;
}

.cart-page .cart-remove-btn {
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e4c8bc;
    border-radius: 10px;
    background: #fff;
    color: #7a332c;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
}

.cart-page .cart-remove-btn:hover {
    background: #f8efea;
    color: #7a332c;
    text-decoration: none;
}

.cart-page .cart-remove-btn:focus-visible,
.cart-page .cart-qty-form .btn:focus-visible,
.cart-page .cart-cta-btn:focus-visible,
.cart-page .cart-checkout-btn:focus-visible,
.cart-page .cart-empty-btn:focus-visible,
.cart-page .cart-continue:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.cart-page .cart-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cart-page .cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    color: var(--pf-color-ink);
}

.cart-page .cart-summary-row > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cart-page .cart-summary-row > span:last-child {
    flex: 0 0 auto;
    text-align: right;
}

.cart-page .cart-summary-row--total {
    margin-top: 0.35rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--pf-color-line);
}

.cart-page .cart-summary-total {
    font-family: var(--pf-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--pf-color-fir);
}

.cart-page .cart-note {
    margin: 0.65rem 0 0;
}

.cart-page .cart-user-note {
    margin: 0.55rem 0 0;
    font-size: 0.88rem;
}

.cart-page a.cart-cta-btn,
.cart-page a.cart-checkout-btn.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 0.85rem;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    box-shadow: none;
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
    transform: none;
}

.cart-page a.cart-cta-btn:hover,
.cart-page a.cart-checkout-btn.btn-primary:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
    transform: none;
    box-shadow: none;
}

.cart-page a.cart-checkout-btn.btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 0.45rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--pf-color-fir);
    border-radius: 12px;
    background: transparent;
    color: var(--pf-color-fir);
    box-shadow: none;
    font-weight: 650;
    text-decoration: none;
    transform: none;
}

.cart-page a.cart-checkout-btn.btn-outline:hover {
    background: var(--pf-color-beige);
    color: var(--pf-color-fir);
    transform: none;
    box-shadow: none;
}

.cart-page .cart-checkout-options .muted {
    margin: 0.7rem 0 0.35rem;
    font-size: 0.9rem;
}

.cart-page .cart-checkout-options .muted:first-child {
    margin-top: 0;
}

.cart-page .cart-continue {
    color: var(--pf-color-fir);
    font-weight: 650;
    text-decoration: none;
}

.cart-page .cart-continue:hover {
    color: var(--pf-color-fir-hover);
    text-decoration: underline;
}

.cart-page .cart-empty-card {
    max-width: 28rem;
}

.cart-page .cart-empty-card .muted {
    margin: 0;
}

.cart-page a.cart-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.85rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--pf-color-fir);
    border-radius: 12px;
    background: transparent;
    color: var(--pf-color-fir);
    font-weight: 650;
    text-decoration: none;
    box-shadow: none;
}

.cart-page a.cart-empty-btn:hover {
    background: var(--pf-color-beige);
    color: var(--pf-color-fir);
}

.cart-page .alert {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    line-height: 1.45;
}

.cart-page .alert-error {
    background: #f8efea;
    color: #5c2e24;
    border: 1px solid #e4c8bc;
}

.cart-page .cart-info {
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    border: 1px solid #c9d8c8;
}

.cart-page .login-inline {
    max-width: 100%;
    box-sizing: border-box;
}

.cart-page .login-inline button.btn-primary {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    box-shadow: none;
}

@media (min-width: 701px) {
    .cart-page .cart-item {
        grid-template-columns: 5.25rem minmax(0, 1fr) auto;
    }

    .cart-page .cart-thumb,
    .cart-page .cart-thumb--placeholder {
        width: 5.25rem;
        height: 5.25rem;
        min-width: 5.25rem;
    }

    .cart-page .cart-item-right {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .cart-page .cart-line-sum {
        margin-left: 0;
        text-align: right;
    }
}

@media (min-width: 901px) {
    .cart-page .cart-layout {
        grid-template-columns: minmax(0, 1fr) 22.5rem;
        gap: 1.25rem;
    }

    .cart-page .cart-aside {
        position: sticky;
        top: 1rem;
        align-self: start;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

@media (max-width: 900px) {
    .cart-page .cart-aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .cart-page .buybox-card {
        padding: 0.9rem 0.85rem;
    }

    .cart-page .cart-checkout-card {
        position: static;
        bottom: auto;
        z-index: auto;
    }
}

@media (max-width: 390px) {
    .cart-page .product-buybox-title {
        font-size: 1.55rem;
    }

    .cart-page .product-buybox-subtitle {
        font-size: 1.1rem;
    }

    .cart-page .cart-item {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .cart-page .cart-thumb,
    .cart-page .cart-thumb--placeholder {
        width: 4.5rem;
        height: 4.5rem;
        min-width: 4.5rem;
    }
}

/* ---------- Anmeldung (Phase I2, nur .login-page) ---------- */

.login-page {
    align-self: center;
    width: min(28rem, calc(100% - 2rem));
    max-width: 100%;
    margin: 1.25rem auto 2.5rem;
    padding: 0;
    color: var(--pf-color-ink);
    box-sizing: border-box;
}

.login-page .login-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 1.35rem 1.25rem 1.15rem;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-beige);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow);
}

.login-page .login-title {
    margin: 0 0 0.85rem;
    font-family: var(--pf-font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--pf-color-brown);
    overflow-wrap: anywhere;
}

.login-page .login-note {
    margin: 0 0 1rem;
    color: var(--pf-color-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.login-page form ~ .login-note {
    margin: 0.75rem 0 0;
}

.login-page .login-field {
    margin: 0 0 0.85rem;
    min-width: 0;
}

.login-page .login-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pf-color-ink);
    font-size: 0.95rem;
    font-weight: 650;
}

.login-page .login-field input:not([type="checkbox"]) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.3;
}

.login-page .login-field input:not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--pf-color-fir);
    box-shadow: var(--pf-focus-ring);
}

.login-page .login-hint {
    margin-top: 0.3rem;
    color: var(--pf-color-ink-soft);
    font-size: 0.875rem;
}

.login-page .login-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.login-page .login-field label.login-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

.login-page .login-check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--pf-color-fir);
}

.login-page .login-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.login-page .register-address-fields {
    margin: 0.2rem 0 0.85rem;
    padding: 0.75rem 0 0.1rem 0.85rem;
    border-left: 2px solid var(--pf-color-beige);
}

.login-page .register-address-fields--hidden {
    display: none;
}

.login-page .login-actions {
    margin-top: 0.35rem;
}

.login-page .login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

.login-page .login-submit:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
    text-decoration: none;
}

.login-page .login-submit:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.login-page .login-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 1rem 0 0;
    font-size: 0.95rem;
}

.login-page .login-links a {
    color: var(--pf-color-fir);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.login-page .login-links a:hover {
    color: var(--pf-color-fir-hover);
}

.login-page .login-alert {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.login-page .alert-error {
    background: #f8efea;
    color: #5c2e24;
    border: 1px solid #e4c8bc;
}

.login-page .alert-success {
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    border: 1px solid #c9d8c8;
}

@media (max-width: 520px) {
    .login-page .login-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

@media (max-width: 390px) {
    .login-page {
        width: min(28rem, calc(100% - 1.25rem));
        margin-top: 0.85rem;
    }

    .login-page .login-card {
        padding: 1rem 0.85rem 0.95rem;
    }

    .login-page .login-title {
        font-size: 1.55rem;
    }
}

/* ---------- Konto (Phase I3, nur .account-page) ---------- */

.account-page {
    padding-top: 0.85rem;
    padding-bottom: 2rem;
    color: var(--pf-color-ink);
}

.account-page .account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 0.5rem;
    align-items: start;
}

.account-page .account-main,
.account-page .account-content,
.account-page .account-sidebar-wrap,
.account-page .buybox-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.account-page .account-main {
    padding-bottom: 0;
}

.account-page .account-sidebar-wrap {
    position: static;
    padding: 0.75rem 0.75rem 0.65rem;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-beige);
    border-radius: 16px;
    box-shadow: none;
}

.account-page .account-nav-card-inner {
    gap: 0.45rem;
}

.account-page .account-nav-title {
    margin: 0 0.15rem 0.15rem;
    font-family: var(--pf-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pf-color-brown);
}

.account-page .account-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.account-page .account-nav a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--pf-color-ink);
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
}

.account-page .account-nav a:hover {
    background: var(--pf-color-beige);
    color: var(--pf-color-fir);
    text-decoration: none;
}

.account-page .account-nav a.active {
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-left: 0;
    border-bottom: 0;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
}

.account-page .account-nav a.active:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
}

.account-page .account-nav a:focus-visible,
.account-page .account-nav button.account-nav-logout:focus-visible,
.account-page .btn:focus-visible,
.account-page input:focus-visible,
.account-page select:focus-visible,
.account-page textarea:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.account-page .account-nav-logout-form {
    display: flex;
    margin: 0;
    padding: 0;
}

.account-page a.account-nav-logout,
.account-page button.account-nav-logout {
    width: auto;
    color: var(--pf-color-brown);
    border-color: var(--pf-color-beige);
    background: var(--pf-color-paper);
}

.account-page button.account-nav-logout {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--pf-color-beige);
    border-radius: 10px;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.account-page a.account-nav-logout:hover,
.account-page button.account-nav-logout:hover {
    background: var(--pf-color-beige);
    color: var(--pf-color-brown);
}

.account-page .account-topbar {
    margin-bottom: 0.85rem;
}

.account-page .product-buybox-title {
    margin: 0;
    font-family: var(--pf-font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--pf-color-brown);
    overflow-wrap: anywhere;
}

.account-page .product-buybox-subtitle {
    font-family: var(--pf-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pf-color-brown);
}

.account-page .buybox-card {
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-beige);
    border-radius: 16px;
    box-shadow: none;
    padding: 1.05rem 1.1rem 1.1rem;
}

.account-page .account-content-cards {
    gap: 0.85rem;
}

.account-page .checkout-card + .checkout-card {
    margin-top: 0.85rem;
}

.account-page .account-section-card,
.account-page .account-form-card {
    width: 100%;
    max-width: none;
}

.account-page .checkout-field {
    margin-bottom: 0.85rem;
    min-width: 0;
}

.account-page .checkout-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.account-page .checkout-field > label,
.account-page .form-group > label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pf-color-ink);
    font-weight: 650;
}

.account-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.account-page select,
.account-page textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.3;
}

.account-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.account-page select:focus,
.account-page textarea:focus {
    outline: none;
    border-color: var(--pf-color-fir);
    box-shadow: var(--pf-focus-ring);
}

.account-page .input-readonly {
    background: var(--pf-color-cream);
    color: var(--pf-color-ink-soft);
}

.account-page .muted,
.account-page .login-card-intro {
    color: var(--pf-color-ink-soft);
}

.account-page .btn {
    box-sizing: border-box;
    text-decoration: none;
}

.account-page .btn-primary {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    font-weight: 650;
    box-shadow: none;
}

.account-page .btn-primary:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
    text-decoration: none;
}

.account-page .btn-secondary,
.account-page .btn-outline {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--pf-color-fir);
    border-radius: 12px;
    background: transparent;
    color: var(--pf-color-fir);
    font-weight: 650;
    box-shadow: none;
}

.account-page .btn-secondary:hover,
.account-page .btn-outline:hover {
    background: var(--pf-color-beige);
    color: var(--pf-color-fir);
    text-decoration: none;
}

.account-page .btn-danger {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border: 1px solid #e4c8bc;
    border-radius: 12px;
    background: transparent;
    color: #7a332c;
    font-weight: 650;
    box-shadow: none;
}

.account-page .address-actions .btn,
.account-page .order-row-actions .btn {
    width: auto;
    min-height: 44px;
}

.account-page .address-item-card {
    background: #fff;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
}

.account-page .address-item--default {
    border-left: 3px solid var(--pf-color-fir);
}

.account-page .order-row {
    border-bottom-color: var(--pf-color-line);
}

.account-page .alert,
.account-page .login-alert {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.account-page .alert-error,
.account-page .alert-danger {
    background: #f8efea;
    color: #5c2e24;
    border: 1px solid #e4c8bc;
}

.account-page .alert-success {
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    border: 1px solid #c9d8c8;
}

.account-page .alert-warning {
    background: #f8f1e4;
    color: #6b4a32;
    border: 1px solid var(--pf-color-beige);
}

.account-page .checkout-layout {
    gap: 1.25rem;
}

@media (min-width: 901px) {
    .account-page .account-layout {
        grid-template-columns: 16rem minmax(0, 1fr);
        gap: 1.25rem;
        padding: 0 1.25rem 0.5rem;
    }

    .account-page .account-sidebar-wrap {
        position: sticky;
        top: 1rem;
        align-self: start;
    }

    .account-page .account-nav {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .account-page .account-nav a,
    .account-page .account-nav-logout-form,
    .account-page a.account-nav-logout,
    .account-page button.account-nav-logout {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .account-page .checkout-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    .account-page .account-layout {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .account-page .product-buybox-title {
        font-size: 1.55rem;
    }

    .account-page .buybox-card,
    .account-page .account-sidebar-wrap {
        padding: 0.85rem 0.75rem;
    }
}

/* ---------- Eingebettetes Login (Phase I4, nur .login-inline) ---------- */

.login-inline {
    box-sizing: border-box;
    width: min(28rem, 100%);
    max-width: 100%;
    margin: 0.75rem auto 1.25rem;
    padding: 1.35rem 1.25rem 1.15rem;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-beige);
    border-radius: 16px;
    color: var(--pf-color-ink);
    box-shadow: var(--pf-shadow);
}

.login-inline .login-inline-title {
    margin: 0 0 0.85rem;
    font-family: var(--pf-font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pf-color-brown);
    overflow-wrap: anywhere;
}

.login-inline .login-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e4c8bc;
    border-radius: 12px;
    background: #f8efea;
    color: #5c2e24;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.login-inline .login-inline-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    background: #7a332c;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.login-inline .login-inline-field {
    margin: 0 0 0.85rem;
    min-width: 0;
}

.login-inline .login-inline-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pf-color-ink);
    font-size: 0.95rem;
    font-weight: 650;
}

.login-inline input[type="email"],
.login-inline input[type="password"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.3;
}

.login-inline input[type="email"]:focus,
.login-inline input[type="password"]:focus {
    outline: none;
    border-color: var(--pf-color-fir);
    box-shadow: var(--pf-focus-ring);
}

.login-inline .login-submit,
.cart-page .login-inline button.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0.15rem 0 0;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
    cursor: pointer;
}

.login-inline .login-submit:hover,
.cart-page .login-inline button.btn-primary:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
}

.login-inline .login-submit:focus-visible,
.login-inline input:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.login-inline .login-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 1rem 0 0;
    font-size: 0.95rem;
}

.login-inline .login-inline-links a {
    color: var(--pf-color-fir);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.login-inline .login-inline-links a:hover {
    color: var(--pf-color-fir-hover);
}

@media (max-width: 390px) {
    .login-inline {
        width: min(28rem, calc(100% - 1.25rem));
        padding: 1rem 0.85rem 0.95rem;
    }

    .cart-page .login-inline {
        width: 100%;
    }

    .login-inline .login-inline-title {
        font-size: 1.55rem;
    }
}

/* ---------- Bestellungen (Phase I4, nur .account-page) ---------- */

.account-page .account-orders {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-page .account-order-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem 1rem;
    align-items: center;
    margin: 0;
}

.account-page .account-order-id {
    margin: 0;
    font-family: var(--pf-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pf-color-brown);
    overflow-wrap: anywhere;
}

.account-page .account-order-date {
    margin: 0.15rem 0 0.4rem;
}

.account-page .account-order-badges,
.account-page .order-detail-header-top,
.account-page .order-payment-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.account-page .account-order-total {
    text-align: right;
    white-space: nowrap;
}

.account-page .account-order-total strong,
.account-page .order-summary-total strong {
    font-family: var(--pf-font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--pf-color-fir);
}

.account-page .account-order-actions,
.account-page .order-detail-header + .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.account-page .account-order-actions {
    grid-column: 1 / -1;
}

.account-page .account-order-actions .btn,
.account-page .order-detail-layout .btn,
.account-page .order-detail-header + .form-actions .btn {
    min-height: 44px;
}

.account-page .badge {
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.3;
}

.account-page .badge-success,
.account-page .badge-status-shipped {
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
}

.account-page .badge-status-in-progress,
.account-page .badge-status-ready,
.account-page .badge-warn,
.account-page .badge-warning {
    background: #f8f1e4;
    color: #8a5a12;
}

.account-page .badge-status-cancelled {
    background: #f8efea;
    color: #7a332c;
}

.account-page .badge-muted,
.account-page .badge-status-received {
    background: var(--pf-color-beige);
    color: var(--pf-color-ink-soft);
}

.account-page .order-item-name,
.account-page .order-item-variant,
.account-page .account-order-personal,
.account-page .order-shipping-address {
    overflow-wrap: anywhere;
}

.account-page .account-order-personal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.65rem;
    margin-top: 0.25rem;
}

.account-page .order-item-row {
    border-bottom-color: var(--pf-color-line);
}

.account-page .order-summary-row {
    gap: 0.75rem;
}

.account-page .order-summary-total {
    border-top-color: var(--pf-color-line);
}

.account-page .order-timeline-list {
    border-left-color: var(--pf-color-beige);
}

.account-page .order-timeline-list li::before {
    background: var(--pf-color-fir);
}

.account-page .account-order-k {
    display: none;
}

.account-page .empty-orders-card {
    max-width: 28rem;
    margin: 0;
    padding: 1.15rem 1.1rem;
    text-align: left;
}

.account-page .empty-orders-card .btn {
    min-height: 44px;
    margin-top: 0.35rem;
}

@media (max-width: 640px) {
    .account-page .account-order-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-page .account-order-total {
        text-align: left;
    }

    .account-page .account-order-k {
        display: inline;
        margin-right: 0.35rem;
        color: var(--pf-color-ink-soft);
        font-weight: 650;
    }
}

@media (max-width: 390px) {
    .account-page .account-order-id {
        font-size: 1.1rem;
    }

    .account-page .account-order-actions .btn,
    .account-page .order-detail-layout .btn {
        width: 100%;
    }
}

/* ---------- Profil, Passwort, Adressen (Phase I5, nur .account-page) ---------- */

.account-page a.account-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.15rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid #c98b82;
    border-radius: 12px;
    background: #f8efea;
    color: #7a332c;
    font-weight: 650;
    text-decoration: none;
}

.account-page a.account-delete-btn:hover {
    background: #f3e4de;
    color: #7a332c;
    text-decoration: none;
}

.account-page .address-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.account-page .address-item-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 0.85rem;
    background: #fff;
    border: 1px solid var(--pf-color-beige);
    border-radius: 12px;
}

.account-page .address-item-body {
    min-width: 0;
    margin-bottom: 0.65rem;
}

.account-page .address-item-name,
.account-page .address-item-text,
.account-page .address-item-phone {
    overflow-wrap: anywhere;
}

.account-page .address-item--default {
    border-left: 3px solid var(--pf-color-fir);
}

.account-page .address-actions {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: auto;
}

.account-page .address-action-form {
    display: inline-flex;
    margin: 0;
}

.account-page .address-actions .btn,
.account-page .address-actions button.btn {
    min-height: 44px;
}

.account-page .account-form-card .form-actions,
.account-page .account-content-cards > .buybox-card > .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.account-page .account-delete-warning p {
    margin: 0;
}

.account-page .account-delete-warning p + p {
    margin-top: 0.35rem;
}

.account-page .account-delete-form .form-group {
    margin: 0 0 0.85rem;
}

.account-page .account-delete-form label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

.account-page .account-delete-form label.checkbox input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--pf-color-fir);
}

.account-page .account-delete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.25rem;
}

.account-page .account-delete-actions .btn {
    min-height: 44px;
}

@media (max-width: 390px) {
    .account-page .address-actions,
    .account-page .account-delete-actions,
    .account-page .account-form-card .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .account-page .address-action-form,
    .account-page .address-actions .btn,
    .account-page .address-actions button.btn,
    .account-page .account-delete-actions .btn,
    .account-page .account-form-card .form-actions .btn,
    .account-page a.account-delete-btn {
        width: 100% !important;
    }
}

/* ---------- Kontakt und Support (Phase D1) ---------- */

.contact-page,
.support-page {
    box-sizing: border-box;
    width: min(960px, 100%);
    max-width: 100%;
    margin: 1.25rem auto 2.5rem;
    color: var(--pf-color-ink);
    overflow-wrap: anywhere;
}

.contact-page *,
.support-page * {
    box-sizing: border-box;
}

.contact-page h1,
.support-page h1,
.contact-page h2,
.support-page h2 {
    margin: 0;
    font-family: var(--pf-font-heading);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--pf-color-brown);
}

.contact-page h1,
.support-page h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.contact-intro,
.support-intro {
    margin-bottom: 1.15rem;
}

.contact-intro p,
.support-intro p,
.contact-aside p,
.support-note {
    margin: 0.55rem 0 0;
    color: var(--pf-color-ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 19.5rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.contact-page .contact-card,
.support-page .support-card,
.support-page .support-reply {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1.25rem 1.15rem;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-beige);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow);
    position: static;
}

.contact-aside h2,
.support-reply h2 {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.contact-aside a,
.support-page a {
    color: var(--pf-color-fir);
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.contact-layout > * {
    min-width: 0;
}

.contact-page .contact-email {
    min-width: 0;
    max-width: 100%;
}

.contact-page .contact-email a {
    display: inline;
    overflow-wrap: break-word;
}

.contact-page .contact-alert,
.support-page .contact-alert {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    line-height: 1.45;
}

.contact-page .contact-alert--error,
.support-page .contact-alert--error {
    background: #f8efea;
    color: #5c2e24;
    border: 1px solid #e4c8bc;
}

.contact-page .contact-alert--success,
.support-page .contact-alert--success {
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    border: 1px solid #c9d8c8;
}

.contact-page .contact-field,
.support-page .contact-field {
    margin: 0 0 0.9rem;
    min-width: 0;
}

.contact-page .contact-field label,
.support-page .contact-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pf-color-ink);
    font-size: 0.95rem;
    font-weight: 650;
}

.contact-page .contact-field input,
.contact-page .contact-field textarea,
.support-page .contact-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

.contact-page .contact-field input {
    min-height: 46px;
}

.contact-page .contact-field textarea,
.support-page .contact-field textarea {
    min-height: 9rem;
    resize: vertical;
}

.contact-page .contact-field input:focus,
.contact-page .contact-field textarea:focus,
.support-page .contact-field textarea:focus {
    outline: none;
    border-color: var(--pf-color-fir);
    box-shadow: var(--pf-focus-ring);
}

.contact-page .contact-hint,
.support-page .contact-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--pf-color-ink-soft);
    font-size: 0.875rem;
}

.contact-page .contact-honeypot,
.support-page .contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-page .contact-privacy {
    margin: 0 0 1rem;
    color: var(--pf-color-ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.contact-page .contact-submit,
.support-page .contact-submit,
.contact-page a.contact-submit,
.support-page a.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

.contact-page button.contact-submit,
.support-page button.contact-submit {
    width: 100%;
}

.contact-page .contact-submit:hover,
.support-page .contact-submit:hover {
    background: var(--pf-color-fir-hover);
    color: var(--pf-color-cream);
    text-decoration: none;
}

.contact-page .contact-submit:focus-visible,
.support-page .contact-submit:focus-visible {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
}

.contact-page .contact-actions,
.support-page .contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.contact-page .contact-actions a,
.support-page .contact-actions a {
    flex: 1 1 12rem;
}

.contact-page a.contact-secondary,
.support-page a.contact-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--pf-color-beige);
    border-radius: 12px;
    background: var(--pf-color-paper);
    color: var(--pf-color-brown);
    font-weight: 650;
    text-decoration: none;
}

.support-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.support-kicker {
    margin: 0.4rem 0 0;
    color: var(--pf-color-ink-soft);
    font-size: 0.95rem;
}

.support-status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    margin: 0;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--pf-color-sage-soft);
    color: var(--pf-color-fir);
    font-size: 0.9rem;
    font-weight: 650;
}

.support-status--closed {
    background: var(--pf-color-beige);
    color: var(--pf-color-brown);
}

.support-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
}

.support-meta div {
    min-width: 0;
}

.support-meta dt {
    margin: 0;
    color: var(--pf-color-ink-soft);
    font-size: 0.8rem;
    font-weight: 650;
}

.support-meta dd {
    margin: 0.15rem 0 0;
    color: var(--pf-color-ink);
    font-size: 0.98rem;
}

.support-page .support-thread {
    max-width: none;
    margin: 0;
}

.support-page .chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
}

.support-page .chat-bubble {
    max-width: min(36rem, 100%);
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--pf-color-beige);
    border-radius: 16px;
    background: var(--pf-color-paper);
    color: var(--pf-color-ink);
    box-shadow: none;
    line-height: 1.5;
}

.support-page .chat-bubble.is-customer {
    align-self: flex-start;
    border-top-left-radius: 6px;
}

.support-page .chat-bubble.is-admin {
    align-self: flex-end;
    border-color: var(--pf-color-fir);
    background: var(--pf-color-fir);
    color: var(--pf-color-cream);
    border-top-right-radius: 6px;
}

.support-page .chat-bubble .meta {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

.support-page .chat-bubble .text {
    white-space: pre-wrap;
}

.support-page .support-reply {
    margin-top: 0.25rem;
}

.support-page .support-closed-note {
    margin: 0 0 0.85rem;
    color: var(--pf-color-ink-soft);
}

@media (max-width: 800px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    .contact-page,
    .support-page {
        margin-top: 0.85rem;
    }

    .contact-page .contact-card,
    .support-page .support-card,
    .support-page .support-reply {
        padding: 1rem 0.85rem;
    }

    .contact-page .chat-bubble,
    .support-page .chat-bubble {
        max-width: 100%;
    }

    .contact-page .contact-actions a,
    .support-page .contact-actions a {
        flex-basis: 100%;
    }
}

/* ---------- R6c: Kartenbilder, Widerruf, Tablet-Logo ---------- */

@media (min-width: 769px) and (max-width: 1024px) {
    .pf-header .pf-logo img {
        height: 88px;
        max-width: min(210px, 28vw);
    }

    .pf-header.site-header .header-top-inner {
        column-gap: 1rem;
    }
}

.product-list .product-card-image,
.similar-products .product-card-image,
.similar-products .card-img,
.similar-products--compact .product-card .card-img,
.similar-products--compact .product-card .product-card-image {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--pf-color-beige);
}

.product-list .product-card-image img,
.product-list .product-card-img,
.similar-products .product-card-image img,
.similar-products .card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: transparent;
}

.product-list .product-card-image.variant-wide img,
.product-list .product-card-image.variant-wide .product-card-img,
.product-list .product-card-image.variant-wide-high img,
.product-list .product-card-image.variant-wide-high .product-card-img {
    object-fit: contain;
    object-position: center center;
}

@media (max-width: 768px) {
    .product-list .product-card-image {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .product-list .product-card-img,
    .product-list .product-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .product-list .product-card-image.variant-wide img,
    .product-list .product-card-image.variant-wide .product-card-img,
    .product-list .product-card-image.variant-wide-high img,
    .product-list .product-card-image.variant-wide-high .product-card-img {
        object-fit: contain !important;
    }
}

.pf-withdraw {
    width: min(40rem, 100%);
    margin: 1.25rem auto 2rem;
    min-width: 0;
}

.pf-withdraw__head h1 {
    margin: 0 0 0.45rem;
    font-family: var(--pf-font-heading);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 600;
    color: var(--pf-color-ink);
}

.pf-withdraw__head p,
.pf-withdraw__privacy,
.pf-withdraw__identity p {
    margin: 0 0 0.85rem;
    color: var(--pf-color-ink-soft);
    line-height: 1.5;
}

.pf-withdraw a {
    color: var(--pf-color-fir);
}

.pf-withdraw__form {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.25rem 1.15rem 1.35rem;
    background: var(--pf-color-paper);
    border: 1px solid var(--pf-color-line);
    border-radius: 16px;
}

.pf-withdraw__identity {
    margin: 0.4rem 0 0.85rem;
    padding: 0.85rem 0.9rem 0.35rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 12px;
    background: var(--pf-color-cream);
}

.pf-withdraw__identity legend {
    padding: 0 0.3rem;
    font-weight: 650;
    color: var(--pf-color-ink);
}

.pf-withdraw__hp {
    position: absolute;
    left: -9999px;
}

.pf-withdraw__ref {
    font-size: 1.05rem;
    color: var(--pf-color-ink);
}

.pf-withdraw .btn {
    align-self: flex-start;
    margin-top: 0.35rem;
}

.pf-withdraw .checkout-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 0.7rem;
}

.pf-withdraw .checkout-field > label {
    margin: 0 0 0.28rem;
    color: var(--pf-color-ink);
    font-size: 0.88rem;
    font-weight: 650;
}

.pf-withdraw input:not([type="hidden"]),
.pf-withdraw select,
.pf-withdraw textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--pf-control-height);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--pf-color-line);
    border-radius: 10px;
    background: #fff;
    color: var(--pf-color-ink);
    font: inherit;
    box-shadow: none;
}

.pf-withdraw textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.pf-withdraw input:not([type="hidden"]):focus,
.pf-withdraw select:focus,
.pf-withdraw textarea:focus {
    outline: 2px solid var(--pf-color-fir);
    outline-offset: 2px;
    border-color: var(--pf-color-fir);
}

@media (max-width: 640px) {
    .pf-withdraw {
        margin-top: 0.85rem;
    }

    .pf-withdraw__form {
        padding: 1rem 0.85rem 1.1rem;
    }

    .pf-withdraw .btn {
        width: 100%;
    }
}