/*
 * BIDUP.CH — placeholder stylesheet for the Phase 3 / Step 2 technical
 * proof-of-life page only. NOT the Modernist design (comes later, task §14).
 */
:root {
    color-scheme: light dark;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 40rem;
    margin: 4rem auto;
    padding: 0 1.5rem;
    line-height: 1.5;
}

code {
    background: rgba(127, 127, 127, 0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
}

dt {
    font-weight: 600;
}

/*
 * Phase 3 / Step 6 — functional customer flow (submission/bid/checkout).
 * Deliberately minimal: no framework, no icon set, no webfont (task §14 /
 * §10) — system font stack (already set on body above), plain CSS only.
 * This is NOT the final Claude-Modernist visual design (comes later).
 */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.nav a {
    color: inherit;
}

.nav-brand {
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
}

.nav-links {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
}

.nav-lang {
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
    border: 1px solid rgba(127, 127, 127, 0.35);
}

.nav-lang[aria-current="true"] {
    background: rgba(127, 127, 127, 0.15);
    font-weight: 600;
}

.card {
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.field {
    margin-bottom: 1.25rem;
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-radius: 0.35rem;
    font: inherit;
    background: transparent;
    color: inherit;
}

.field textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.field-hint {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-top: 0.3rem;
}

.field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.field-checkbox input {
    margin-top: 0.2rem;
}

.field-checkbox label {
    font-weight: 400;
}

fieldset {
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.35rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem 1.1rem;
}

fieldset legend {
    font-weight: 600;
    padding: 0 0.4rem;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.radio-row label {
    font-weight: 400;
}

button,
.button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    background: #111;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] .button {
    background: #eee;
    color: #111;
}

@media (prefers-color-scheme: dark) {
    button,
    .button {
        background: #eee;
        color: #111;
    }
}

button.secondary,
.button.secondary {
    background: transparent;
    color: inherit;
    border-color: rgba(127, 127, 127, 0.4);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.alert-error {
    background: rgba(200, 60, 60, 0.12);
    border: 1px solid rgba(200, 60, 60, 0.35);
}

.alert-info {
    background: rgba(80, 130, 200, 0.12);
    border: 1px solid rgba(80, 130, 200, 0.35);
}

.price-box {
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 0.5rem;
    padding: 1.1rem 1.25rem;
    margin: 1rem 0 1.25rem;
}

.price-box .price-label {
    font-size: 0.85rem;
    opacity: 0.75;
    margin: 0 0 0.25rem;
}

.price-box .price-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.price-disclaimer,
.small-note {
    font-size: 0.8rem;
    opacity: 0.75;
}

@media (max-width: 30rem) {
    body {
        margin: 1.5rem auto;
    }

    .card {
        padding: 1.1rem;
    }
}

/*
 * Phase 3 / Step 7 — Owner Mini-Dashboard (§8) + listing edit. Reuses
 * .card/.field/fieldset/.button/.alert above; only the dl/dt/dd stat
 * layout the dashboard panels use is new here — same minimal, no-
 * framework approach as Step 6 (task §18).
 */
.card dl {
    margin: 0 0 1rem;
}

.card dt {
    font-size: 0.85rem;
    opacity: 0.75;
    font-weight: 400;
}

.card dd {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/*
 * Phase 3 / Step 8 — Admin Dashboard + Moderation (§B16). Deliberately
 * simple, functional-first, no framework/icon set/webfont (task B16/B19),
 * reusing every class above (.nav/.card/.field/fieldset/.button/.alert)
 * — only a wider body container (Admin tables need more horizontal room
 * than the ~40rem customer-facing pages above) and table/badge styles are
 * new here.
 */
body.admin {
    max-width: 75rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-stat {
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
}

.admin-stat .stat-label {
    font-size: 0.8rem;
    opacity: 0.75;
    margin: 0 0 0.3rem;
}

.admin-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.admin-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table.admin-table th,
table.admin-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
    white-space: nowrap;
}

table.admin-table th {
    font-weight: 600;
    font-size: 0.8rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-live,
.badge-paid,
.badge-pass {
    background: rgba(60, 160, 90, 0.15);
    color: #1f7a3f;
}

.badge-review,
.badge-pending,
.badge-pending_payment,
.badge-pending_screening,
.badge-technical_retry {
    background: rgba(200, 150, 40, 0.18);
    color: #8a6414;
}

.badge-blocked,
.badge-block,
.badge-failed,
.badge-cancelled,
.badge-disputed {
    background: rgba(200, 60, 60, 0.15);
    color: #a53131;
}

.badge-hidden {
    background: rgba(127, 127, 127, 0.2);
    color: #555;
}

@media (prefers-color-scheme: dark) {
    .badge-live, .badge-paid, .badge-pass { color: #6fdc93; }
    .badge-review, .badge-pending, .badge-pending_payment, .badge-pending_screening, .badge-technical_retry { color: #e0b84a; }
    .badge-blocked, .badge-block, .badge-failed, .badge-cancelled, .badge-disputed { color: #ef8080; }
    .badge-hidden { color: #ccc; }
}

.admin-filters {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.admin-filters a {
    padding: 0.25rem 0.65rem;
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(127, 127, 127, 0.3);
}

.admin-filters a[aria-current="true"] {
    background: rgba(127, 127, 127, 0.18);
    font-weight: 600;
}

.inline-form {
    display: inline;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =========================================================================
 * Phase 3 / Step 10 — Claude Modernist public design system (§4/§29).
 *
 * Swiss / modern / clean / minimal / confident, ranking-first — not a
 * pixel-copy of any reference site (task instruction, LOCKED). Design
 * tokens (custom properties) + a small, reusable component set, on top of
 * — never replacing — every class above: submission/bid/checkout/owner/
 * admin all keep working unchanged, and this section's own components
 * (.site-header/.site-footer/.hero/etc.) are additionally used by those
 * existing pages for header/footer integration (task §37) without
 * touching their controllers or business logic.
 *
 * No framework, no icon font, no webfont — system font stack only (task
 * §28/§29, PRAKTIK 100MB constraint).
 * ======================================================================= */

:root {
    /* --- Color tokens (light) --- */
    --bidup-ink: #16181d;
    --bidup-ink-soft: #4b4f58;
    --bidup-paper: #fafaf8;
    --bidup-surface: #ffffff;
    --bidup-border: rgba(22, 24, 29, 0.12);
    --bidup-border-strong: rgba(22, 24, 29, 0.22);
    --bidup-accent: #d8232a;
    --bidup-accent-ink: #ffffff;
    --bidup-accent-soft: rgba(216, 35, 42, 0.08);
    --bidup-focus: #1959d1;
    --bidup-gold: #9a6b00;

    /* --- Type scale --- */
    --bidup-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bidup-size-xs: 0.78rem;
    --bidup-size-sm: 0.88rem;
    --bidup-size-base: 1rem;
    --bidup-size-md: 1.15rem;
    --bidup-size-lg: 1.5rem;
    --bidup-size-xl: 2rem;
    --bidup-size-xxl: 2.75rem;

    /* --- Spacing scale --- */
    --bidup-space-1: 0.25rem;
    --bidup-space-2: 0.5rem;
    --bidup-space-3: 0.75rem;
    --bidup-space-4: 1rem;
    --bidup-space-5: 1.5rem;
    --bidup-space-6: 2rem;
    --bidup-space-7: 3rem;

    --bidup-radius: 0.6rem;
    --bidup-radius-sm: 0.4rem;
    --bidup-radius-pill: 999px;

    --bidup-container: 68rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bidup-ink: #f2f3f5;
        --bidup-ink-soft: #b7bac2;
        --bidup-paper: #121317;
        --bidup-surface: #1a1c22;
        --bidup-border: rgba(255, 255, 255, 0.12);
        --bidup-border-strong: rgba(255, 255, 255, 0.22);
        --bidup-accent: #ff5a60;
        --bidup-accent-ink: #16181d;
        --bidup-accent-soft: rgba(255, 90, 96, 0.14);
        --bidup-focus: #6fa1ff;
        --bidup-gold: #e0b84a;
    }
}

:root[data-theme="dark"] {
    --bidup-ink: #f2f3f5;
    --bidup-ink-soft: #b7bac2;
    --bidup-paper: #121317;
    --bidup-surface: #1a1c22;
    --bidup-border: rgba(255, 255, 255, 0.12);
    --bidup-border-strong: rgba(255, 255, 255, 0.22);
    --bidup-accent: #ff5a60;
    --bidup-accent-ink: #16181d;
    --bidup-accent-soft: rgba(255, 90, 96, 0.14);
    --bidup-focus: #6fa1ff;
    --bidup-gold: #e0b84a;
}

body.public {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--bidup-paper);
    color: var(--bidup-ink);
    font-family: var(--bidup-font);
}

body.public :focus-visible {
    outline: 3px solid var(--bidup-focus);
    outline-offset: 2px;
}

.wrap {
    max-width: var(--bidup-container);
    margin: 0 auto;
    padding: 0 var(--bidup-space-5);
}

@media (max-width: 30rem) {
    .wrap {
        padding: 0 var(--bidup-space-4);
    }
}

/* --- Site header --- */
.site-header {
    border-bottom: 1px solid var(--bidup-border);
    background: var(--bidup-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bidup-space-4);
    padding-top: var(--bidup-space-3);
    padding-bottom: var(--bidup-space-3);
    flex-wrap: wrap;
}

.site-brand {
    font-weight: 800;
    font-size: var(--bidup-size-md);
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--bidup-ink);
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.site-brand .flag {
    font-size: 0.85em;
}

/* "bid" + "up" (accent) + ".ch" wordmark (Public Presentation Polish v1) —
   inherits .site-brand's existing color/weight/size, only "up" repaints. */
.site-brand-accent {
    color: var(--bidup-accent);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--bidup-space-5);
    font-size: var(--bidup-size-sm);
    flex-wrap: wrap;
}

.site-nav a {
    color: var(--bidup-ink-soft);
    text-decoration: none;
    font-weight: 600;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--bidup-ink);
}

/* --- DE|EN language switch (Public UI Polish v1.2 §1): plain text, no
   pill/button chrome — a muted inactive code, a bolder ink-colored active
   code, and a thin non-interactive "|" separator (a real element, not
   ::before/::after content on the link itself, so it is never announced as
   part of either link's accessible name). Routing/aria-current logic is
   entirely unchanged — see partials/header.php. */
.site-nav .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.site-nav .lang-switch a {
    padding: 0.1rem 0.05rem;
    border: none;
    border-radius: var(--bidup-radius-sm);
    background: none;
    font-weight: 400;
    color: var(--bidup-ink-soft);
}

.site-nav .lang-switch a[aria-current="true"] {
    background: none;
    font-weight: 700;
    color: var(--bidup-ink);
}

.site-nav .lang-switch-sep {
    color: var(--bidup-border-strong);
    font-size: var(--bidup-size-sm);
    line-height: 1;
}

.cta-primary {
    display: inline-block;
    background: var(--bidup-accent);
    color: var(--bidup-accent-ink);
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border-radius: var(--bidup-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    /* Public UI Hover/Interaction Polish v1.3 §2: page-content primary CTAs
       ("Website eintragen", "Platz #1 sichern", etc. — every .cta-primary
       NOT inside .site-header, which keeps its own outline→fill treatment
       below) get a very small hover scale on top of the existing
       brightness bump. transform/filter only, no shadow/movement of
       surrounding content (inline-block, transform doesn't affect layout). */
    transition: transform 0.15s ease, filter 0.15s ease;
}

.cta-primary:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: scale(1.02);
}

/* Mobile nav: a native <details> disclosure — zero JS (task §26/§30). */
.mobile-nav-toggle {
    display: none;
}

@media (max-width: 44rem) {
    .site-nav-desktop {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
        width: 100%;
    }

    .mobile-nav-toggle summary {
        cursor: pointer;
        list-style: none;
        font-weight: 700;
        padding: 0.4rem 0;
    }

    .mobile-nav-toggle summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-toggle[open] summary::after {
        content: '▲';
    }

    .mobile-nav-toggle summary::after {
        content: '▼';
        float: right;
    }

    .mobile-nav-toggle .site-nav {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--bidup-space-3) 0 var(--bidup-space-4);
        gap: var(--bidup-space-3);
    }

    .mobile-nav-toggle .lang-switch {
        border-left: none;
        padding-left: 0;
    }
}

/* --- Hero / positioning (compact — task §5, LOCKED: not a huge first-viewport marketing block) --- */
.hero {
    position: relative;
    overflow: hidden;
    padding: var(--bidup-space-6) 0 var(--bidup-space-5);
    border-bottom: 1px solid var(--bidup-border);
}

/* Oversized "#1" watermark — CSS-only (generated content, no image), purely
   decorative (aria-hidden via pointer-events/no semantic content), clipped
   to the hero box so it never causes horizontal overflow. Represents "paid
   placement", not "best company" — task: Public Presentation Polish v1. */
.hero::before {
    content: "#1";
    position: absolute;
    top: 50%;
    right: -0.5rem;
    transform: translateY(-50%);
    font-size: clamp(7rem, 20vw, 15rem);
    font-weight: 800;
    line-height: 1;
    color: var(--bidup-accent);
    opacity: 0.07;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.hero > .wrap {
    position: relative;
    z-index: 1;
}

@media (max-width: 30rem) {
    .hero::before {
        opacity: 0.05;
    }
}

.hero-claim {
    font-size: var(--bidup-size-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 var(--bidup-space-2);
    max-width: 40rem;
}

.hero-positioning {
    font-size: var(--bidup-size-md);
    color: var(--bidup-ink-soft);
    margin: 0 0 var(--bidup-space-4);
    max-width: 42rem;
}

.transparency-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--bidup-size-xs);
    font-weight: 700;
    color: var(--bidup-ink-soft);
    background: var(--bidup-surface);
    border: 1px solid var(--bidup-border-strong);
    padding: 0.3rem 0.7rem;
    border-radius: var(--bidup-radius-pill);
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: var(--bidup-space-4);
    flex-wrap: wrap;
    margin-top: var(--bidup-space-5);
}

.hero-price-callout {
    font-size: var(--bidup-size-sm);
    color: var(--bidup-ink-soft);
}

.hero-price-callout strong {
    color: var(--bidup-ink);
    font-size: var(--bidup-size-md);
}

/* --- Axis switch (HEUTE/GESAMT) --- */
.axis-switch {
    display: inline-flex;
    border: 1px solid var(--bidup-border-strong);
    border-radius: var(--bidup-radius-pill);
    padding: 0.2rem;
    gap: 0.2rem;
    background: var(--bidup-surface);
}

.axis-switch a {
    padding: 0.4rem 1rem;
    border-radius: var(--bidup-radius-pill);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--bidup-size-sm);
    color: var(--bidup-ink-soft);
}

.axis-switch a[aria-current="true"] {
    background: var(--bidup-ink);
    color: var(--bidup-paper);
}

.countdown {
    font-size: var(--bidup-size-xs);
    color: var(--bidup-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.countdown time,
.countdown .countdown-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--bidup-ink);
}

/* --- Category navigation (pills, horizontal-scroll safe on mobile — task §8/§26) --- */
.category-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: var(--bidup-space-4) 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.category-nav a {
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    border-radius: var(--bidup-radius-pill);
    border: 1px solid var(--bidup-border-strong);
    text-decoration: none;
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.category-nav a[aria-current="true"] {
    background: var(--bidup-accent);
    border-color: var(--bidup-accent);
    color: var(--bidup-accent-ink);
}

/* --- Ranking list / listing cards (task §10, LOCKED: primary content of the page) --- */
.ranking-section {
    padding: var(--bidup-space-5) 0 var(--bidup-space-7);
}

.ranking-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bidup-space-3);
    margin-bottom: var(--bidup-space-4);
    flex-wrap: wrap;
}

.ranking-heading h1,
.ranking-heading h2 {
    margin: 0;
    font-size: var(--bidup-size-lg);
    letter-spacing: -0.01em;
}

.ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bidup-space-3);
}

.ranking-row {
    display: grid;
    grid-template-columns: 2.75rem auto 1fr auto;
    align-items: center;
    gap: var(--bidup-space-4);
    background: var(--bidup-surface);
    border: 1px solid var(--bidup-border);
    border-radius: var(--bidup-radius);
    padding: var(--bidup-space-4);
}

.ranking-row.is-top3 {
    border-color: var(--bidup-border-strong);
    box-shadow: 0 1px 0 var(--bidup-border-strong);
}

.ranking-row.is-top1 {
    border-color: var(--bidup-accent);
}

.rank-number {
    font-size: var(--bidup-size-lg);
    font-weight: 800;
    color: var(--bidup-ink-soft);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ranking-row.is-top3 .rank-number {
    color: var(--bidup-ink);
}

.ranking-row.is-top1 .rank-number {
    color: var(--bidup-accent);
}

.listing-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bidup-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--bidup-size-md);
    color: #fff;
    flex: 0 0 auto;
}

.listing-main {
    min-width: 0;
}

.listing-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.listing-name {
    font-weight: 700;
    font-size: var(--bidup-size-base);
    color: var(--bidup-ink);
    text-decoration: none;
}

.listing-name:hover {
    text-decoration: underline;
}

.listing-domain {
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-xs);
}

.listing-description {
    margin: 0.2rem 0 0;
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-meta {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.3rem;
    font-size: var(--bidup-size-xs);
    color: var(--bidup-ink-soft);
    flex-wrap: wrap;
}

.listing-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    text-align: right;
}

.listing-amount {
    font-weight: 800;
    font-size: var(--bidup-size-md);
    color: var(--bidup-ink);
    white-space: nowrap;
}

.listing-actions {
    display: flex;
    gap: 0.4rem;
}

.btn-sm {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: var(--bidup-radius-sm);
    font-size: var(--bidup-size-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.btn-sm.btn-visit {
    background: var(--bidup-ink);
    color: var(--bidup-paper);
}

.btn-sm.btn-outbid {
    border: 1px solid var(--bidup-border-strong);
    color: var(--bidup-ink);
}

@media (max-width: 40rem) {
    .ranking-row {
        grid-template-columns: 2.25rem auto 1fr;
        grid-template-areas:
            "rank avatar main"
            "side side side";
    }

    .rank-number { grid-area: rank; }
    .listing-avatar { grid-area: avatar; width: 2.25rem; height: 2.25rem; font-size: var(--bidup-size-base); }
    .listing-main { grid-area: main; }
    .listing-side {
        grid-area: side;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        margin-top: var(--bidup-space-2);
        padding-top: var(--bidup-space-2);
        border-top: 1px solid var(--bidup-border);
    }
}

/* --- Empty / cold-start state (task §12, LOCKED: attractive, never fake data) --- */
.empty-ranking {
    text-align: center;
    padding: var(--bidup-space-7) var(--bidup-space-4);
    border: 1px dashed var(--bidup-border-strong);
    border-radius: var(--bidup-radius);
    background: var(--bidup-surface);
}

.empty-ranking .rank-number {
    font-size: var(--bidup-size-xxl);
    color: var(--bidup-accent);
}

.empty-ranking h2 {
    margin: var(--bidup-space-2) 0 var(--bidup-space-1);
}

.empty-ranking p {
    color: var(--bidup-ink-soft);
    margin: 0 0 var(--bidup-space-4);
}

/* --- "So funktioniert's" 3-step --- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bidup-space-4);
    padding: var(--bidup-space-6) 0;
}

@media (max-width: 40rem) {
    .steps {
        grid-template-columns: 1fr;
    }
}

.step {
    padding: var(--bidup-space-4);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bidup-ink);
    color: var(--bidup-paper);
    font-weight: 800;
    margin-bottom: var(--bidup-space-2);
}

.step h3 {
    margin: 0 0 0.3rem;
    font-size: var(--bidup-size-base);
}

.step p {
    margin: 0;
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-sm);
}

/* --- Activity feed --- */
.activity-feed {
    padding: var(--bidup-space-5) 0 var(--bidup-space-6);
    border-top: 1px solid var(--bidup-border);
}

.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activity-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: var(--bidup-size-sm);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bidup-border);
}

.activity-item .activity-time {
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-xs);
    white-space: nowrap;
}

.empty-activity {
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-sm);
    padding: var(--bidup-space-4) 0;
}

/* --- "BIDUP in Zahlen" / "BIDUP in numbers" (Public UI Polish v1.2 §2):
   deliberately restrained — no card/shadow/dashboard look, just a
   border-top rule (matching .activity-feed's own separator convention
   directly above) and three equal-weight number+label pairs. Homepage-only,
   and only rendered at all when $statsVisible is true (App\Http\
   Controllers\HomeController::publicStats() — hidden entirely at true
   all-zero real data, per the LOCKED display rule). Reuses existing type/
   spacing/color tokens only — no new colors. */
.stats-section {
    padding: var(--bidup-space-5) 0 var(--bidup-space-6);
    border-top: 1px solid var(--bidup-border);
}

.stats-heading {
    font-size: var(--bidup-size-md);
    margin: 0 0 var(--bidup-space-4);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bidup-space-5);
}

@media (max-width: 40rem) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--bidup-space-3);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-value {
    font-size: var(--bidup-size-xl);
    font-weight: 800;
    color: var(--bidup-ink);
    letter-spacing: -0.01em;
}

.stat-label {
    font-size: var(--bidup-size-sm);
    color: var(--bidup-ink-soft);
}

/* --- Site footer --- */
.site-footer {
    border-top: 1px solid var(--bidup-border);
    padding: var(--bidup-space-6) 0;
    margin-top: var(--bidup-space-6);
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-sm);
}

.site-footer .footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bidup-space-5);
    justify-content: space-between;
}

.site-footer a {
    color: var(--bidup-ink-soft);
}

.footer-links {
    display: flex;
    gap: var(--bidup-space-4);
    flex-wrap: wrap;
}

.footer-legal-note {
    font-size: var(--bidup-size-xs);
    margin-top: var(--bidup-space-3);
    opacity: 0.8;
}

/* --- Listing detail page --- */
.listing-detail-header {
    display: flex;
    align-items: center;
    gap: var(--bidup-space-4);
    padding: var(--bidup-space-6) 0 var(--bidup-space-4);
}

.listing-detail-avatar {
    width: 4rem;
    height: 4rem;
    font-size: var(--bidup-size-xl);
    border-radius: var(--bidup-radius);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--bidup-space-3);
    margin: var(--bidup-space-4) 0;
}

.stat-tile {
    border: 1px solid var(--bidup-border);
    border-radius: var(--bidup-radius-sm);
    padding: var(--bidup-space-3);
    background: var(--bidup-surface);
}

.stat-tile .stat-label {
    font-size: var(--bidup-size-xs);
    color: var(--bidup-ink-soft);
    margin: 0 0 0.2rem;
}

.stat-tile .stat-value {
    font-size: var(--bidup-size-md);
    font-weight: 800;
    margin: 0;
}

/* --- Generic public content page (rules, etc.) --- */
.content-page {
    padding: var(--bidup-space-6) 0 var(--bidup-space-7);
    max-width: 42rem;
}

.content-page h1 {
    font-size: var(--bidup-size-xl);
    margin-bottom: var(--bidup-space-4);
}

.content-page h2 {
    font-size: var(--bidup-size-md);
    margin-top: var(--bidup-space-6);
}

.content-page p,
.content-page li {
    color: var(--bidup-ink-soft);
    line-height: 1.6;
}

/* --- Submission flow stage indicator (Step 10 §16) --- */
.step-indicator {
    font-size: var(--bidup-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bidup-accent);
    margin: 0 0 var(--bidup-space-2);
}

/* --- Owner dashboard (Step 10 §37, visual polish only) --- */
.owner-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: var(--bidup-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--bidup-space-3);
}

dl.owner-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem var(--bidup-space-3);
    margin: 0 0 var(--bidup-space-4);
}

dl.owner-stats dt {
    color: var(--bidup-ink-soft);
    font-size: var(--bidup-size-sm);
}

dl.owner-stats dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

/* --- Public error / empty states --- */
.error-page {
    padding: var(--bidup-space-7) 0;
    text-align: center;
}

.error-page .error-code {
    font-size: var(--bidup-size-xxl);
    font-weight: 800;
    color: var(--bidup-accent);
}

/* =========================================================================
 * Public Presentation Polish v1 — public form components (Modernist tokens)
 *
 * Scoped to body.public only: .card/.field/fieldset/button/.button/.alert
 * above are the older Phase 3 / Step 6-8 styles, still shared with Admin
 * (body.admin). Admin's visual design is explicitly out of scope for this
 * pass (only the public submission/bid/owner/listing forms are touched),
 * so every rule here is prefixed with body.public and Admin is left
 * byte-for-byte visually unchanged. No validation/behavior changes — visual
 * only (spacing, color tokens, hover/focus/disabled states).
 * ======================================================================= */
body.public .card {
    border: 1px solid var(--bidup-border);
    background: var(--bidup-surface);
    border-radius: var(--bidup-radius);
    padding: var(--bidup-space-5);
    margin-bottom: var(--bidup-space-5);
}

body.public .field label {
    font-weight: 600;
    color: var(--bidup-ink);
    margin-bottom: var(--bidup-space-2);
}

body.public .field input[type="text"],
body.public .field input[type="email"],
body.public .field input[type="url"],
body.public .field input[type="number"],
body.public .field input[type="password"],
body.public .field select,
body.public .field textarea {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bidup-border-strong);
    border-radius: var(--bidup-radius-sm);
    background: var(--bidup-paper);
    color: var(--bidup-ink);
    transition: border-color 0.15s ease;
}

body.public .field input:hover,
body.public .field select:hover,
body.public .field textarea:hover {
    border-color: var(--bidup-ink-soft);
}

body.public .field input:focus-visible,
body.public .field select:focus-visible,
body.public .field textarea:focus-visible {
    border-color: var(--bidup-focus);
}

body.public .field input:disabled,
body.public .field select:disabled,
body.public .field textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--bidup-border);
}

body.public .field-hint {
    color: var(--bidup-ink-soft);
    opacity: 1;
}

body.public fieldset {
    border: 1px solid var(--bidup-border);
    border-radius: var(--bidup-radius-sm);
    padding: var(--bidup-space-4) var(--bidup-space-4) var(--bidup-space-5);
}

body.public fieldset legend {
    font-weight: 700;
    color: var(--bidup-ink);
    padding: 0 var(--bidup-space-2);
}

body.public .price-box {
    border: 1px solid var(--bidup-border-strong);
    background: var(--bidup-surface);
    border-radius: var(--bidup-radius);
}

body.public .price-box .price-value {
    color: var(--bidup-ink);
}

body.public .alert-error {
    background: var(--bidup-accent-soft);
    border: 1px solid var(--bidup-accent);
    color: var(--bidup-ink);
    border-radius: var(--bidup-radius-sm);
}

body.public .alert-info {
    background: var(--bidup-surface);
    border: 1px solid var(--bidup-border-strong);
    color: var(--bidup-ink-soft);
    border-radius: var(--bidup-radius-sm);
}

/* :not(.cta-primary) so the existing accent CTA button (styled separately,
   above) keeps winning — these rules would otherwise out-specificity it. */
body.public button:not(.cta-primary),
body.public .button:not(.cta-primary) {
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    border-radius: var(--bidup-radius-sm);
    border: 1px solid var(--bidup-ink);
    background: var(--bidup-ink);
    color: var(--bidup-paper);
    transition: filter 0.15s ease, background 0.15s ease;
}

body.public button:not(.cta-primary):hover,
body.public .button:not(.cta-primary):hover {
    filter: brightness(1.15);
}

body.public button.secondary:not(.cta-primary),
body.public .button.secondary:not(.cta-primary) {
    background: transparent;
    color: var(--bidup-ink);
    border-color: var(--bidup-border-strong);
}

body.public button.secondary:not(.cta-primary):hover,
body.public .button.secondary:not(.cta-primary):hover {
    background: var(--bidup-surface);
    filter: none;
}

body.public button:not(.cta-primary):disabled,
body.public .button:not(.cta-primary):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}

/* --- Mobile category-pill scroll discoverability (edge fade) ---
   .category-nav already scrolls horizontally (overflow-x: auto, task
   §8/§26); on narrow viewports this adds a subtle fade at the right edge
   so a partially-cut-off pill hints that more categories are scrollable,
   without any JS or added markup. */
@media (max-width: 30rem) {
    .category-nav {
        position: relative;
        margin-right: calc(var(--bidup-space-4) * -1);
        padding-right: var(--bidup-space-4);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent 100%);
    }
}

/* --- Footer operator info (Public Presentation Polish v1) — factual legal
   operator identification, deliberately small/unobtrusive; see
   partials/footer.php. Does not alter the Impressum/Datenschutz/AGB draft
   pages themselves. --- */
.footer-operator {
    font-size: var(--bidup-size-xs);
    color: var(--bidup-ink-soft);
    opacity: 0.85;
    margin: var(--bidup-space-2) 0 0;
}

/* ============================================================
   Public Visual Polish v1.1 — brand-mark, theme toggle, header
   CTA restyle, sitewide hover/focus interaction polish.
   ============================================================ */

/* --- Header brand-mark (H3 FINAL, approved production master, viewBox
   "0 0 88 112" — locked geometry, see design/h3-master/). Fixed accent
   color regardless of theme: PRIMARY is defined as "BIDUP red symbol" in
   the locked color system, not an ink/paper-following tone. H3 is taller
   than wide (88:112), unlike the old square v1.1 mark, so height is set
   off the wordmark's font-size as before and width is derived from H3's
   exact aspect ratio instead of forced square — same sizing behavior,
   never stretches the locked geometry. --- */
.site-brand-mark {
    height: 1.5em;
    width: calc(1.5em * 88 / 112);
    color: var(--bidup-accent);
    flex: 0 0 auto;
    align-self: center;
}

/* --- Header utility group (theme toggle + DE|EN), set apart from the
   nav links/CTA with the single separator the two controls now share
   (previously on .lang-switch alone — task §5 groups them together). --- */
.header-utility {
    display: inline-flex;
    align-items: center;
    gap: var(--bidup-space-3);
    border-left: 1px solid var(--bidup-border);
    padding-left: var(--bidup-space-4);
}

/* --- Manual theme toggle (task §5): compact icon button, same visual
   weight as the DE|EN control beside it. Icon shown is decided purely by
   CSS from the data-theme attribute / OS media query — the same pair of
   selectors style.css already uses to swap the color tokens themselves
   (see :root[data-theme="dark"] and the prefers-color-scheme block near
   the top of this file) — so the icon is already correct on first paint,
   before public.js attaches its click handler. */
/* Specificity note: body.public's generic `button:not(.cta-primary)` reset
   (above) is `body.public button:not(.cta-primary)` — (0,2,1) — which
   otherwise beats a plain `.theme-toggle` rule `(0,1,0)`. Matching that
   exact selector shape here (button.theme-toggle, scoped under
   body.public) wins on specificity instead of relying on source order. */
body.public button.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--bidup-radius-sm);
    background: none;
    font-weight: normal;
    color: var(--bidup-ink-soft);
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

body.public button.theme-toggle:hover {
    color: var(--bidup-ink);
    background: var(--bidup-border);
    filter: none;
}

.theme-toggle svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
}

.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: inline-flex;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: inline-flex;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun {
        display: inline-flex;
    }

    :root:not([data-theme="light"]) .theme-toggle .icon-moon {
        display: none;
    }
}

/* --- Header CTA restyle (task §6): the HEADER submission link only —
   scoped to .site-header so page-content CTAs ("Website eintragen",
   "Platz #1 sichern" etc., built from the same .cta-primary class) keep
   their strong filled-red treatment untouched. Default: outlined, on the
   header's own background. Hover: fills solid, matching the page-content
   CTA look for that one moment of interaction. Focus keeps the sitewide
   :focus-visible ring (body.public :focus-visible, near the top of this
   file) — no override needed. Active: a subtle pressed state. */
.site-header .cta-primary {
    background: transparent;
    color: var(--bidup-accent);
    border: 1.5px solid var(--bidup-accent);
    padding: calc(0.55rem - 1.5px) calc(1.1rem - 1.5px);
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.05s ease;
}

.site-header .cta-primary:hover {
    background: var(--bidup-accent);
    color: var(--bidup-accent-ink);
}

.site-header .cta-primary:active {
    transform: translateY(1px);
}

/* --- Sitewide hover/focus interaction polish (task §7): subtle, fast
   (150-200ms), color/background/border/opacity only — no movement,
   scaling, shadows or glow. Added as transitions on existing selectors
   rather than new hover rules where a hover effect already exists
   (.site-nav a, .listing-name, .category-nav a[aria-current], the
   .button/.secondary block above already has its own transition). Touch/
   mobile never depends on these for functionality — every element here
   is already fully operable without hover (plain links/buttons). */
.site-nav a,
.axis-switch a,
.category-nav a,
.site-nav .lang-switch a,
.footer-links a,
.site-footer a,
.btn-sm,
.listing-name {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

/* Public UI Hover/Interaction Polish v1.3 §1: secondary/filter controls
   (GESAMT|HEUTE axis switch, category chips) get a subtle background tint
   on top of their existing hover color/border change — reuses the same
   --bidup-border token already used elsewhere in this file for exactly
   this "light grey wash" hover surface (e.g. the theme-toggle button
   below). :not([aria-current="true"]) already guards every one of these
   so the ACTIVE/selected chip or axis (filled solid, see the
   [aria-current="true"] rules above) can never be hover-styled into
   looking weaker than an unselected one. */
.axis-switch a:not([aria-current="true"]):hover {
    color: var(--bidup-ink);
    background: var(--bidup-border);
}

.category-nav a:not([aria-current="true"]):hover {
    color: var(--bidup-ink);
    background: var(--bidup-border);
    border-color: var(--bidup-border-strong);
}

.site-nav .lang-switch a:not([aria-current="true"]):hover {
    color: var(--bidup-ink);
}

.site-footer a:hover {
    color: var(--bidup-ink);
}

.btn-sm.btn-visit:hover {
    opacity: 0.85;
}

.btn-sm.btn-outbid:hover {
    color: var(--bidup-accent);
    border-color: var(--bidup-accent);
}

/* Respect reduced-motion: collapse every transition added/touched by this
   section (and the pre-existing form-control ones) to effectively instant
   rather than removing the resulting state change. */
@media (prefers-reduced-motion: reduce) {
    body.public button.theme-toggle,
    .cta-primary,
    .site-header .cta-primary,
    .site-nav a,
    .axis-switch a,
    .category-nav a,
    .site-nav .lang-switch a,
    .footer-links a,
    .site-footer a,
    .btn-sm,
    .listing-name,
    body.public button:not(.cta-primary),
    body.public .button:not(.cta-primary) {
        transition-duration: 0.001ms;
    }
}