/* ============================================================
   lead-system / assets / admin.css
   Einheitliches Stylesheet für Admin-Dashboard + Bestellformular
   ============================================================ */

/* --- Reset & Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand-Palette – Corporate Slate
       Navy #1c3a0e · Slate #85858a · Slate-Light #c9c9cc
       Hell-Theme fuer Admin-Tabellen + Formulare (Lesbarkeit),
       Akzentfarbe = Brand-Navy.
    */
    --c-bg:          #f6f6f5;      /* sehr helles Slate-Grau */
    --c-surface:     #ffffff;
    --c-border:      #d9d9d7;      /* Slate-Light */
    --c-border-md:   #c7c7c5;      /* Slate */
    --c-text:        #1a1a1c;
    --c-text-muted:  #66666a;
    --c-text-faint:  #a3a3a3;
    --c-accent:      #1c3a0e;      /* Brand-Navy */
    --c-accent-bg:   #eaf3df;      /* Navy-Tint */
    --c-accent-hover:#2c5e12;      /* Navy heller */
    --c-secondary:   #85858a;      /* Slate fuer sekundaere Akzente */
    --c-secondary-bg:#f0f0ef;      /* Slate-Tint */
    --c-green:       #1a8c4e;
    --c-green-bg:    #e8f5ee;
    --c-amber:       #a05a00;
    --c-amber-bg:    #fff3dc;
    --c-red:         #c0392b;
    --c-red-bg:      #fdecea;
    --c-sidebar-w:   200px;
    --c-topbar-h:    52px;
    --radius-sm:     6px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    font-size:       15px;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.55;
    min-height: 100vh;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Admin Layout ----------------------------------------- */
.admin-wrap {
    display: grid;
    grid-template-columns: var(--c-sidebar-w) 1fr;
    grid-template-rows: var(--c-topbar-h) 1fr;
    min-height: 100vh;
}

/* Topbar */
.admin-topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.admin-topbar__logo {
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.admin-topbar__logo:hover { color: var(--c-accent); }
.admin-topbar__mark {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--c-accent);            /* Navy */
    border: 1px solid var(--c-accent-hover);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 10px; font-weight: 500;
    color: #c9c9cc;                          /* Slate-Light */
    letter-spacing: .04em;
}
.admin-topbar__name {
    font-size: 13px; font-weight: 600;
    color: var(--c-text); letter-spacing: -.01em;
}
.admin-topbar__badge {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 9px;
    color: var(--c-text-muted);
    background: var(--c-secondary-bg);
    border: 1px solid var(--c-border);
    border-radius: 5px;
    padding: 2px 7px;
    letter-spacing: .07em;
    margin-left: 4px;
}
/* Legacy: span direkt unter __logo (Fallback fuer alte Markup-Varianten) */
.admin-topbar__logo > span:not([class]) {
    font-size: 11px;
    font-weight: 400;
    color: var(--c-text-muted);
    padding: 2px 7px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
}
.admin-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--c-text-muted);
}
.admin-topbar__logout {
    font-size: 12px;
    padding: 4px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
}
.admin-topbar__logout:hover { background: var(--c-bg); text-decoration: none; }

/* Sidebar */
.admin-sidebar {
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    padding: 1rem 0;
    position: sticky;
    top: var(--c-topbar-h);
    height: calc(100vh - var(--c-topbar-h));
    overflow-y: auto;
}
.admin-sidebar__section {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-text-faint);
    padding: 10px 16px 4px;
    margin-top: 4px;
}
.admin-sidebar__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--c-text-muted);
    border-left: 2px solid transparent;
    transition: background .12s, color .12s;
}
.admin-sidebar__item:hover {
    background: var(--c-bg);
    color: var(--c-text);
    text-decoration: none;
}
.admin-sidebar__item.is-active {
    color: var(--c-text);
    font-weight: 500;
    background: var(--c-accent-bg);
    border-left-color: var(--c-accent);
}
.admin-sidebar__icon { font-size: 14px; width: 16px; text-align: center; }

/* Main content */
.admin-main {
    padding: 1.5rem 2rem;
    overflow-x: hidden;
}

/* --- Page header ------------------------------------------ */
.admin-page-head {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-page-head h1 { font-size: 22px; font-weight: 600; }
.admin-page-head p  { color: var(--c-text-muted); font-size: 13px; margin-top: 2px; }
.admin-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-text-faint);
    display: block;
    margin-bottom: 2px;
}

/* --- KPI Grid -------------------------------------------- */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 1.5rem;
}
.admin-kpi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.admin-kpi-card__label {
    font-size: 11px;
    color: var(--c-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
    display: block;
}
.admin-kpi-card__value {
    font-size: 24px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1;
}
.admin-kpi-card__sub {
    font-size: 11px;
    margin-top: 4px;
    color: var(--c-text-muted);
}
.admin-kpi-card__sub--up   { color: var(--c-green); }
.admin-kpi-card__sub--warn { color: var(--c-amber); }
.admin-kpi-card--accent { background: var(--c-accent-bg); border-color: #d6eaae; }

/* --- Cards ----------------------------------------------- */
.admin-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.admin-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-card--flush {
    padding: 0;
    overflow: hidden;
}
.admin-card--flush .admin-card__header {
    padding: 1.25rem 1.5rem 0;
    margin-bottom: 0;
}
.admin-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.admin-hint {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 400;
}
.admin-hint code {
    font-size: 11px;
    background: var(--c-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

/* Bestellformular-Vorschau (iframe im Admin) */
.admin-form-preview {
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
}
.admin-form-preview__iframe {
    display: block;
    width: 100%;
    min-height: min(85vh, 900px);
    height: 85vh;
    border: 0;
}
.admin-card__header h2 { font-size: 15px; font-weight: 600; }

/* --- Tables ---------------------------------------------- */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}
.admin-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-border);
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--c-bg); }
.admin-table__cell--numeric { text-align: right; }

/* RE-Nummer chip */
.re-chip {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    color: var(--c-text);
    white-space: nowrap;
}

/* Avatar initials */
.av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-accent-bg);
    color: var(--c-accent);
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.av--green  { background: var(--c-green-bg);  color: var(--c-green); }
.av--amber  { background: var(--c-amber-bg);  color: var(--c-amber); }
.av--muted  { background: var(--c-bg);         color: var(--c-text-muted); }

/* --- Badges ---------------------------------------------- */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.badge--green  { background: var(--c-green-bg);  color: var(--c-green); }
.badge--amber  { background: var(--c-amber-bg);  color: var(--c-amber); }
.badge--red    { background: var(--c-red-bg);    color: var(--c-red); }
.badge--blue   { background: var(--c-accent-bg); color: var(--c-accent); }
.badge--gray   { background: var(--c-bg);         color: var(--c-text-muted); border: 1px solid var(--c-border); }

/* Status-Badge Klassen (kompatibel zu bestehender PHP-Logik) */
.admin-badge                { background: var(--c-bg);         color: var(--c-text-muted); }
.admin-badge--neu           { background: var(--c-bg);         color: var(--c-text-muted); border: 1px solid var(--c-border); }
.admin-badge--wartet        { background: var(--c-amber-bg);   color: var(--c-amber); }
.admin-badge--bezahlt       { background: var(--c-green-bg);   color: var(--c-green); }
.admin-badge--aktiv         { background: var(--c-green-bg);   color: var(--c-green); }
.admin-badge--storniert     { background: var(--c-red-bg);     color: var(--c-red); }
.admin-badge--abgeschlossen { background: var(--c-accent-bg);  color: var(--c-accent); }

/* --- Delivery Progress bar ------------------------------- */
.prog-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.prog-bar  { flex: 1; height: 6px; border-radius: 3px; background: var(--c-border); overflow: hidden; }
.prog-fill { height: 100%; border-radius: 3px; background: var(--c-green); }
.prog-fill--partial { background: var(--c-amber); }
.prog-fill--zero    { background: var(--c-border-md); }
.prog-pct  { font-size: 11px; min-width: 30px; text-align: right; color: var(--c-text-muted); }

/* --- Filters / Toolbar ----------------------------------- */
.admin-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.admin-toolbar input,
.admin-toolbar select {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
}
.admin-toolbar input  { width: 200px; }
.admin-toolbar select { width: 150px; }

/* --- Forms (admin) --------------------------------------- */
.admin-form-grid { display: flex; flex-direction: column; gap: 1rem; }
.form-grid--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.field--full { grid-column: 1 / -1; }
.field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text-muted);
    margin-bottom: 4px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--c-surface);
    color: var(--c-text);
    font-family: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.field--error label { color: var(--c-red); }
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--c-red); }
.field-error { font-size: 12px; color: var(--c-red); margin-top: 3px; }
small { font-size: 11px; color: var(--c-text-muted); margin-top: 3px; display: block; }

/* Definition list */
.admin-definition-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.admin-definition-list > div {
    display: contents;
}
.admin-definition-list dt {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
}
.admin-definition-list dd {
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
}
.admin-definition-list--single { grid-template-columns: 200px 1fr; }

/* --- Buttons --------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--c-accent);
    color: #fff;
    transition: opacity .15s;
}
.button:hover { opacity: .88; text-decoration: none; }
.button--secondary {
    background: var(--c-surface);
    color: var(--c-text-muted);
    border-color: var(--c-border);
}
.button--secondary:hover { background: var(--c-bg); }
.button--danger { background: var(--c-red); }

/* --- Alert ----------------------------------------------- */
.alert {
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert--error   { background: var(--c-red-bg);   border-color: #f5c0bc; color: var(--c-red); }
.alert--success { background: var(--c-green-bg);  border-color: #a8dfc0; color: var(--c-green); }
.alert h2 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }

/* --- Login page ------------------------------------------ */
.admin-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    padding: 2rem;
}
.admin-login-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-sm);
}
.admin-login-card__intro { margin-bottom: 1.5rem; }
.admin-login-card__intro h1 { font-size: 20px; font-weight: 600; }
.admin-login-card__intro p  { font-size: 13px; color: var(--c-text-muted); margin-top: 4px; }

/* --- Empty state ----------------------------------------- */
.admin-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 14px;
}
.admin-link { color: var(--c-accent); font-size: 13px; }
.admin-break { word-break: break-all; }

/* ============================================================
   PUBLIC BESTELLFORMULAR
   ============================================================ */
.order-shell {
    min-height: 100vh;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem 4rem;
}
.order-container {
    width: 100%;
    max-width: 640px;
}
.order-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-border);
    text-align: center;
}
.order-header__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-text-faint);
    margin-bottom: 4px;
}
.order-header h1 { font-size: 22px; font-weight: 600; }
.order-header p  { font-size: 13px; color: var(--c-text-muted); margin-top: 3px; }

/* Step indicator */
.step-bar {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}
.step-bar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-text-faint);
}
.step-bar__item.is-active { color: var(--c-text); font-weight: 500; }
.step-bar__item.is-done   { color: var(--c-green); }
.step-bar__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--c-border-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.step-bar__item.is-active .step-bar__dot { background: var(--c-accent); color: #fff; border-color: transparent; }
.step-bar__item.is-done   .step-bar__dot { background: var(--c-green);  color: #fff; border-color: transparent; }
.step-bar__line { flex: 1; height: 1px; background: var(--c-border); margin: 0 8px; }

/* Order card */
.order-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.order-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-text-faint);
    margin-bottom: 12px;
}
.order-section-title + .order-section-title { margin-top: 1.25rem; }

/* Lead type buttons */
.lt-group { display: flex; gap: 8px; }
.lt-btn {
    flex: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-family: inherit;
    transition: all .15s;
}
.lt-btn:hover { border-color: var(--c-border-md); color: var(--c-text); }
.lt-btn.is-active { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-accent); font-weight: 500; }

/* Package cards – Brand-Navy mehr eingesetzt */
.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pkg-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    position: relative;
    background: var(--c-accent-bg);     /* leichter Navy-Tint als Default */
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.pkg-card:hover {
    border-color: var(--c-accent);
    background: #e5e5e6;                /* etwas staerkerer Navy-Hover */
}
.pkg-card.is-active {
    border: 2px solid var(--c-accent);
    background: linear-gradient(135deg, #e5e5e6 0%, var(--c-accent-bg) 100%);
    box-shadow: 0 4px 16px rgba(28,58,14,.18);
}
.pkg-card__tag {
    position: absolute;
    top: -10px;
    right: 10px;
    background: var(--c-accent);
    color: #fff;
    font-size: 10px;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(28,58,14,.25);
}
.pkg-card__tag--gray {
    background: var(--c-text-muted);
    box-shadow: 0 2px 6px rgba(107,104,96,.2);
}
.pkg-card__name  { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--c-accent); }
.pkg-card__price { font-size: 22px; font-weight: 700; color: var(--c-accent); }
.pkg-card__price small { font-size: 12px; font-weight: 400; color: var(--c-text-muted); }
.pkg-card__desc  { font-size: 12px; color: var(--c-text-muted); margin-top: 6px; line-height: 1.45; }
.pkg-card__features { list-style: none; font-size: 12px; color: var(--c-text); margin-top: 10px; }
.pkg-card__features li { margin-bottom: 4px; }
.pkg-card__features li::before { content: "✓ "; color: var(--c-accent); font-weight: 700; }
.pkg-card__features li:not(.ok)::before { content: "– "; color: var(--c-text-faint); font-weight: 400; }
.pkg-card__features li:not(.ok) { color: var(--c-text-faint); }

/* Quantity block */
.qty-block {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.qty-row + .qty-row { border-top: 1px solid var(--c-border); }
.qty-row__label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.qty-row__right { display: flex; align-items: center; gap: 10px; }
.qty-row__sub   { font-size: 12px; color: var(--c-text-muted); min-width: 120px; text-align: right; }
.qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--c-border-md);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.qty-stepper__btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 17px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}
.qty-stepper__btn:disabled { color: var(--c-text-faint); cursor: not-allowed; }
.qty-stepper__input {
    width: 52px;
    height: 32px;
    border: none;
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    background: var(--c-surface);
    color: var(--c-text);
    -moz-appearance: textfield;
    font-family: inherit;
}
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-totbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border-md);
}
.qty-totbar__label { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.qty-totbar__badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 500;
}
.qty-totbar__badge--ok   { background: var(--c-green-bg); color: var(--c-green); }
.qty-totbar__badge--warn { background: var(--c-amber-bg); color: var(--c-amber); }
.qty-totbar__total { font-size: 16px; font-weight: 600; color: var(--c-accent); }
.qty-min-warn {
    display: none;
    align-items: center;
    gap: 7px;
    background: var(--c-amber-bg);
    border: 1px solid #f5d88a;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 12px;
    color: var(--c-amber);
    margin-top: 8px;
}
.qty-min-warn.is-visible { display: flex; }

/* Region buttons */
.region-group { display: flex; gap: 7px; flex-wrap: wrap; }
.region-btn {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-family: inherit;
    transition: all .15s;
}
.region-btn.is-active { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-accent); }

/* Summary */
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 14px;
}
.summary-row:last-child { border-bottom: none; }
.summary-row__label { color: var(--c-text-muted); }
.summary-row--total { font-weight: 600; font-size: 15px; }

/* RE-Nummer Box */
.re-box {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
}
.re-box__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-faint); margin-bottom: 5px; }
.re-box__number {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: .04em;
}
.re-box__hint { font-size: 12px; color: var(--c-text-muted); margin-top: 5px; line-height: 1.5; }

/* Payment info */
.pay-box {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 13px;
    color: var(--c-text-muted);
    line-height: 1.9;
    margin-top: .9rem;
}
.pay-box strong { color: var(--c-text); }
.pay-box--compact { line-height: 1.85; }
.pay-box__next {
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--c-border);
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.5;
}

/* Form actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border);
}

/* Success */
.success-box { text-align: center; padding: 1.5rem .5rem; }
.success-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--c-green-bg);
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--c-green);
}
.vw-table { width: 100%; font-size: 13px; margin-top: .75rem; border-collapse: collapse; }
.vw-table td { padding: 6px 0; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.vw-table tr:last-child td { border-bottom: none; }
.vw-table .vk { color: var(--c-text-muted); width: 150px; font-size: 12px; }
.vw-table .vv { font-weight: 500; }
.vw-table .vv--re { font-family: 'SF Mono', 'Consolas', monospace; color: var(--c-accent); font-size: 16px; }

/* Checkbox row */
.check-row { display: flex; align-items: flex-start; gap: 8px; margin-top: .9rem; }
.check-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.check-row label { font-size: 13px; color: var(--c-text-muted); cursor: pointer; }

/* Grid helpers */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g3 { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 10px; }

/* --- Responsive ------------------------------------------ */
@media (max-width: 760px) {
    .admin-wrap { grid-template-columns: 1fr; }
    .admin-sidebar { display: none; }
    .admin-main { padding: 1rem; }
    .form-grid--2col { grid-template-columns: 1fr; }
    .admin-kpi-grid { grid-template-columns: 1fr 1fr; }
    .pkg-grid { grid-template-columns: 1fr; }
    .g2, .g3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Bestellabschluss – Schritt 4 Status-/Dankeseite
   ============================================================ */

/* ── Status-Seite (Schritt 4) ───────────────────────────────── */
.payment-status {
    text-align: center;
}
.payment-status .summary-row {
    text-align: left;
}

.payment-status__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
}
.payment-status__icon--ok   { background: var(--c-green); }
.payment-status__icon--wait { background: var(--c-amber); }
.payment-status__icon--fail { background: var(--c-red); }
.payment-status__icon--warn { background: var(--c-amber); }

/* ============================================================
   Login / Create-Admin (schlichter, zentrierter Card-Screen)
   ============================================================ */
.login-body {
    background: var(--c-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-wrap {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.login-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-sm);
}
.login-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.login-brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: -.01em;
}
.login-sub {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.login-card .field {
    margin-bottom: 1rem;
}
.login-card .field input {
    width: 100%;
}
.login-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 12px;
    color: var(--c-text-muted);
}
.login-foot a { color: var(--c-accent); }

/* Success-Alert (fuer create_admin.php) */
.alert--success {
    background: var(--c-green-bg);
    border-left: 3px solid var(--c-green);
    color: var(--c-green);
}
.alert--success p { color: var(--c-text); }