/* ═══════════════════════════════════════════════
   KHB-Auktion – Responsive Stylesheet
   Mobile-First
   ═══════════════════════════════════════════════ */

@font-face {
    font-family: "DIN";
    src: url("fonts/din-condensed_vf.woff") format("woff2"),
        url("fonts/din-condensed_vf.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Snug";
    src: url("fonts/SnugLowCompact-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
    --clr-emphasis: var(--clr-primary);
    /* Einzige Text-Betonungsfarbe (kein fatter Text) */
    --clr-primary: #7a74fe;
    --clr-primary-h: #89ba10;
    --clr-accent: #e8a838;
    --clr-accent-h: #c98d20;
    --clr-success: #89ba10;
    --clr-danger: #c0392b;
    --clr-info: #2980b9;
    --clr-bg: #7a74fe;
    --clr-card: #ffffff;
    --clr-text: #222;
    --clr-muted: #555555;
    --clr-border: #dce2e8;
    --radius: 10px;
    --shadow: 0 2px 12px rgba(0, 0, 0, .08);
    --font: 'DIN', system-ui, -apple-system, sans-serif;

    /* ── Globale Schrift-Skalierung ─────────────────────────
       Einziges Regler: hier den Multiplikator ändern.
       Alle Inhalte skalieren im Verhältnis (1 = Basis, 1.2 = +20 %, 0.9 = -10 %).
       ────────────────────────────────────────────────────── */
    --scale: 1.2;

    /* ── Raster-System ──────────────────────────────
       Alle Inhalte stapeln sich in einer zentralen Spalte;
       Panels haben identische Randabstände, sodass die
       Boxen sich wie Bausteine im selben Raster anfühlen.
       ─────────────────────────────────────────────── */
    --col-width: 440px;
    /* Spaltenbreite aller Panels (Mobile) */
    --col-width-lg: 640px;
    --panel-pad: 1.5rem;
    /* Innenabstand aller Panels */
    --gap: 1.25rem;
    /* Abstand zwischen den Panels */
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Anordnung statt Fettdruck: <strong> erhält kein fettes Schriftgewicht,
   sondern wird durch die Akzentfarbe betont. */
strong {
    font-weight: normal;
    color: var(--clr-emphasis);
}



body {
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    min-height: 100vh;
    /* Grund-Schriftgröße: 1em (16px) × Skalierung → Basis für alle em-Vertreter */
    font-size: calc(var(--scale) * 1em);
}

/* ── Layout ────────────────────────── */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-container {
    max-width: 1100px;
}

.admin-body {
    background: var(--clr-border);
}

/* ── Header ────────────────────────── */
.site-header {
    text-align: center;
    margin-bottom: 0;
}

.site-header h1 {
    font-size: calc(var(--scale) * 1.5em);
    font-family: "Snug";
    color: var(--clr-card);
    margin-bottom: .75rem;
}
.admin-body .site-header h1 {
    color: var(--clr-text);
}

.logo-img {
    width: 100%;
    max-width: 640px;
    margin-top: -180px;
}

.object-img {
    width: 100%;
    max-width: 640px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.header-image {
    margin: 1rem 0;
}

/* ── Pages ─────────────────────────── */
.page {
    width: 100%;
    max-width: var(--col-width);
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* Gemeinsame Panel-Karte: Countdown, Gebots-Display, Formular,
   User-Bar, Status-Notices sehen aus wie Bausteine desselben Rasters. */
.panel {
    width: 100%;
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--panel-pad);
}

/* Formular innerhalb einer Admin-Karte: keine doppelte Kartonschattierung
   (die .card liefert bereits Hintergrund + Schatten). */
.card .form {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ── Bid Display (wird als .panel gerendert) ─── */
.bid-display {
    text-align: center;
    padding: var(--panel-pad);
}

.bid-display.mini {
    padding: calc(var(--panel-pad) * .6);
}

.bid-label {
    display: block;
    font-size: calc(var(--scale) * 1em);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--clr-muted);
    margin-bottom: .25rem;
}

.bid-amount {
    display: block;
    font-size: calc(var(--scale) * 3em);
    color: var(--clr-primary);
}

.bid-display.mini .bid-amount {
    font-size: calc(var(--scale) * 1.4em);
}

.bid-bidder {
    display: block;
    margin-top: .25rem;
    color: var(--clr-muted);
    font-size: calc(var(--scale) * .95em);
}

/* ── Countdown (direkt über der Gebots-Box, als Panel) ── */
.countdown-box {
    text-align: center;
    padding: var(--panel-pad);
    font-size: calc(var(--scale) * 3em);
    text-shadow: 0 0 1.5em var(--clr-card), 0 0 0.3em var(--clr-card);
    color: var(--clr-card);
    background-color: transparent;
    box-shadow: none;
}

.countdown-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: calc(var(--scale) * .8em);
    opacity: .85;
    margin-bottom: .25em;
}

.countdown {
    display: block;
    font-size: calc(var(--scale) * 2.4em);
    color: var(--clr-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ── CTA / Buttons ─────────────────── */
.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.logged-as {
    width: 100%;
    text-align: center;
    font-size: calc(var(--scale) * .9em);
    color: var(--clr-card);
}

.btn {
    display: inline-block;
    padding: .65rem 1.5rem;
    border: none;
    border-radius: var(--radius);
    font-size: calc(var(--scale) * 1em);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .15s, transform .1s;
}

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

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--clr-card);
    color: var(--clr-primary);
    border: 2px solid var(--clr-bg);
}

.btn-primary:hover {
    background: var(--clr-primary-h);
    color: var(--clr-card);
    border: 2px solid var(--clr-primary-h);
}

.btn-secondary {
    border: 2px solid var(--clr-card);
    color: var(--clr-card);
}

.btn-secondary:hover {
    background: var(--clr-primary-h);
}

.btn-ter {
    background: var(--clr-bg);
    color: var(--clr-card);
}

.btn-ter:hover {
    background: var(--clr-primary-h);
    color: var(--clr-card);
}

.btn-ter2 {
    background: transparent;
    color: var(--clr-card);
    border: 2px solid var(--clr-card);
}
.btn-ter2:hover {
    background: var(--clr-card);
    color: var(--clr-bg);
    border: 2px solid var(--clr-bg);
}

.btn-danger {
    background: var(--clr-danger);
    color: #fff;
}

.btn-danger:hover {
    background: #a93226;
}

.btn-success {
    background: var(--clr-success);
    color: #fff;
}

.btn-success:hover {
    background: #257a4a;
}

.btn-small {
    padding: .4rem .8rem;
    font-size: calc(var(--scale) * .85em);
    background-color: var(--clr-card);
    color: var(--clr-bg);
}

/* ── Forms (Panel) ─────────────────── */
.form {
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--panel-pad);
    max-width: 100%;
}

.form h2,
.page>h2 {
    font-size: calc(var(--scale) * 1.3em);
    margin-bottom: .75rem;
    color: var(--clr-primary);
    text-align: center;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: calc(var(--scale) * .9em);
    margin-bottom: .3rem;
    color: var(--clr-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    font-size: calc(var(--scale) * 1em);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(26, 58, 92, .15);
}

.form-msg {
    margin-top: .75rem;
    font-size: calc(var(--scale) * .95em);
    text-align: center;
    min-height: 1.4em;
}

.form-msg.success {
    color: var(--clr-success);
}

.form-msg.error {
    color: var(--clr-danger);
}

.form-hint {
    text-align: center;
    color: var(--clr-card);
    font-size: calc(var(--scale) * .9em);
}

.login-link {
    text-align: center;
    font-size: calc(var(--scale) * .9em);
    color: var(--clr-card);
}

.login-link a {
    color: var(--clr-card);
}

/* ── Notices (Panel) ───────────────── */
.notice {
    padding: var(--panel-pad);
    border-radius: var(--radius);
    font-size: calc(var(--scale) * .95em);
}

.notice-info {
    background: #e8f4fd;
    color: var(--clr-info);
    border-left: 4px solid var(--clr-info);
}

.notice-success {
    background: #e6f7ed;
    color: var(--clr-success);
    border-left: 4px solid var(--clr-success);
}

.notice-error {
    background: #fde8e6;
    color: var(--clr-danger);
    border-left: 4px solid var(--clr-danger);
}

.notice-end {
    background: #fef9e7;
    color: #8a6d1a;
    border-left: 4px solid var(--clr-accent);
}

.notice-end h2 {
    margin-bottom: .4rem;
}

/* ── Info-Box (Übersicht) ───────────── */
.info-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    border: 2px solid var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: calc(var(--panel-pad) * .6) var(--panel-pad);
    font-size: calc(var(--scale));
    color: var(--clr-card);
}

/* ── User Bar (Bid-Page) ───────────── */
.user-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    border: 2px solid var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: calc(var(--panel-pad) * .6) var(--panel-pad);
    font-size: calc(var(--scale) * .75em);
    color: var(--clr-card);
}

/* ── Footer ────────────────────────── */
.site-footer {
    text-align: center;
    padding: 1.5rem 0 .75rem;
    font-size: calc(var(--scale) * .8em);
    color: var(--clr-card);
}

/* ═══════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════ */

.admin-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    margin: .75rem 0;
}

.badge {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 20px;
    font-size: calc(var(--scale) * .8em);
    text-transform: uppercase;
}

.badge-active {
    background: #e6f7ed;
    color: var(--clr-success);
}

.badge-ended {
    background: #fde8e6;
    color: var(--clr-danger);
}

.badge-not_started {
    background: #e8f4fd;
    color: var(--clr-info);
}

.form-inline {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: .5rem 0;
}

/* ── Admin Grid ────────────────────── */
.admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.card {
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.card h2 {
    font-size: calc(var(--scale) * 1.1em);
    margin-bottom: .75rem;
    color: var(--clr-primary);
}

.card-wide {
    grid-column: 1 / -1;
}

.big-amount {
    font-size: calc(var(--scale) * 2em);
    color: var(--clr-primary);
}

/* Kurz blinken, wenn sich das Höchstgebot per Auto-Refresh ändert */
.big-amount.flash-update {
    animation: bid-flash 1.5s ease;
}

@keyframes bid-flash {
    0%   { color: #d4a017; transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ── Table ─────────────────────────── */
.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(var(--scale) * .88em);
}

.table th {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 2px solid var(--clr-border);
    color: var(--clr-muted);
    white-space: nowrap;
}

.table td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--clr-border);
}

.table tbody tr:hover {
    background: #f8fafc;
}

.td-amount {
    color: var(--clr-primary);
    white-space: nowrap;
}

.text-small {
    font-size: calc(var(--scale) * .8em);
    color: var(--clr-muted);
}

.text-center {
    text-align: center;
}

.table .btn-small {
    padding: .25rem .5rem;
    font-size: calc(var(--scale) * .78em);
}

/* ── Edit-Form (inline in table) ───── */
.edit-form {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}

.edit-form input {
    width: 100px;
    padding: .3rem .5rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    font-size: calc(var(--scale) * .85em);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE – Tablet & Desktop
   ═══════════════════════════════════════════════ */

@media (min-width: 640px) {
    .site-header h1 {
        font-size: calc(var(--scale) * 1.8em);
    }

    .bid-amount {
        font-size: calc(var(--scale) * 3em);
        text-shadow: 0 0 1.5em var(--clr-bg), 0 0 0.7em var(--clr-bg);
    }

    /* Frontend-Spalte auf Tablet/Desktop etwas breiter */
    .page {
        max-width: var(--col-width-lg);
    }

    /* Admin-Bereich behält sein 2-spaltiges Raster (ausgenommen) */
    .admin-grid {
        grid-template-columns: 1fr 1fr;
    }

    .card-wide {
        grid-column: 1 / -1;
    }

    .logo-img {
        margin-top: -350px;
    }
}

@media (min-width: 900px) {
    .container {
        padding: 2rem;
    }

    .admin-container {
        padding: 2rem;
    }

    .site-header h1 {
        font-size: calc(var(--scale) * 2em);
    }
}
/* ═══════════════════════════════════════════════
   CUSTOM STEPPER FOR BID INPUT
   ═══════════════════════════════════════════════ */

.bid-stepper {
     display: flex;
     align-items: center;
     gap: 0.5rem;
}

.bid-stepper input {
     flex: 1;
     min-width: 120px;
     padding: 0.5rem 0.75rem;
     border: 2px solid var(--clr-border);
     border-radius: 0;
     font-size: 1.1em;
     font-family: var(--font);
     text-align: center;
     transition: border-color 0.2s;
}

.bid-stepper input:focus {
     outline: none;
     border-color: var(--clr-primary);
}

.bid-stepper-btn {
     width: 44px;
     height: 44px;
     border: 2px solid var(--clr-border);
     border-radius: var(--radius);
     background: var(--clr-card);
     color: var(--clr-primary);
     font-size: 1.5em;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
}

.bid-stepper-btn:hover {
     background: var(--clr-primary);
     color: var(--clr-card);
     border-color: var(--clr-primary);
     transform: scale(1.05);
}

.bid-stepper-btn:active {
     transform: scale(0.95);
}

.bid-stepper-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
}

.bid-stepper-btn--up {
     border-radius: 0 var(--radius) var(--radius) 0;
}

.bid-stepper-btn--down {
     border-radius: var(--radius) 0 0 var(--radius);
}

/* Hide native number input spinners if used elsewhere */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

input[type="number"] {
     -moz-appearance: textfield;
}