/* ── DRAWER SHARED ───────────────────────────────────────────── */

/* Unified modal header bar (drag + title + close) */
.modal-bar {
    flex-shrink:             0;
    position:                sticky;
    top:                     0;
    z-index:                 10;
    background:              rgba(255,255,255,0.72);
    backdrop-filter:         var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-bottom:           1px solid var(--border);
    border-radius:           20px 20px 0 0;
    cursor:                  grab;
    user-select:             none;
    touch-action:            none;
}
.modal-bar:active { cursor: grabbing; }

.modal-bar-grab {
    display:         flex;
    justify-content: center;
    padding:         10px 0 0;
}
.modal-bar-pill {
    width:         40px;
    height:        5px;
    border-radius: 3px;
    background:    rgba(0,0,0,0.18);
    transition:    background 0.15s;
}
.modal-bar:hover .modal-bar-pill { background: rgba(0,0,0,0.3); }

.modal-bar-content {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.6rem 1.5rem 0.75rem;
}

.modal-bar-title {
    font-size:      1.15rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--ink);
    margin:         0;
}

.modal-bar-close,
.drawer-close {
    border-radius:   50%;
    border:          none;
    background:      rgba(0,0,0,0.06);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ink);
    padding:         0;
    transition:      background 0.15s;
    flex-shrink:     0;
}
.modal-bar-close       { width: 32px; height: 32px; }
.drawer-close          { width: 36px; height: 36px; position: relative; z-index: 5; }
.modal-bar-close:hover,
.drawer-close:hover    { background: rgba(0,0,0,0.10); }

.drawer-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         1.5rem 2rem;
    border-bottom:   1px solid var(--border);
    flex-shrink:     0;
}
.drawer-header h2 {
    font-size:      1.2rem;
    font-weight:    700;
    letter-spacing: -0.01em;
}

#auth-backdrop,
#cart-backdrop {
    position:                fixed;
    inset:                   0;
    z-index:                 700;
    background:              rgba(0,0,0,0.3);
    backdrop-filter:         blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#auth-backdrop.hidden,
#cart-backdrop.hidden { display: none; }

#auth-drawer,
#cart-drawer {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    width:      420px;
    max-width:  100vw;
    background: var(--white);
    z-index:    800;
    display:    flex;
    transition: transform 0.35s var(--ease);
    overflow:   hidden;
}
#auth-drawer { flex-direction: row; }
#cart-drawer { flex-direction: row; }

/* Auth side drag strip (like cart) */
.auth-drag-strip {
    flex-shrink:             0;
    width:                   20px;
    display:                 flex;
    align-items:             center;
    justify-content:         center;
    cursor:                  grab;
    user-select:             none;
    touch-action:            none;
    background:              rgba(255,255,255,0.72);
    backdrop-filter:         var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-right:            1px solid var(--border);
}
.auth-drag-strip:active { cursor: grabbing; }
.auth-drag-strip-bar {
    width:         5px;
    height:        40px;
    border-radius: 3px;
    background:    rgba(0,0,0,0.18);
    transition:    background 0.15s;
}
.auth-drag-strip:hover .auth-drag-strip-bar { background: rgba(0,0,0,0.3); }

.auth-main {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
}

/* Cart side drag strip */
.cart-drag-strip {
    flex-shrink:             0;
    width:                   20px;
    display:                 flex;
    align-items:             center;
    justify-content:         center;
    cursor:                  grab;
    user-select:             none;
    touch-action:            none;
    background:              rgba(255,255,255,0.72);
    backdrop-filter:         var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-right:            1px solid var(--border);
}
.cart-drag-strip:active { cursor: grabbing; }
.cart-drag-strip-bar {
    width:         5px;
    height:        40px;
    border-radius: 3px;
    background:    rgba(0,0,0,0.18);
    transition:    background 0.15s;
}
.cart-drag-strip:hover .cart-drag-strip-bar { background: rgba(0,0,0,0.3); }

.cart-main {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    min-width:       0;
}

/* ── INFO MODAL (bottom sheet) ───────────────────────────────── */
.info-backdrop {
    position:                fixed;
    inset:                   0;
    z-index:                 700;
    background:              rgba(0,0,0,0.35);
    backdrop-filter:         blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.info-backdrop.hidden { display: none; }

.info-modal {
    position:        fixed;
    inset:           0;
    z-index:         710;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    pointer-events:  none;
}
.info-modal.hidden { display: none; }

.info-inner {
    width:           100%;
    max-width:       1200px;
    height:          88%;
    background:      var(--white);
    border-radius:   20px 20px 0 0;
    pointer-events:  auto;
    box-shadow:      0 -10px 60px rgba(0,0,0,0.15);
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    will-change:     transform;
}

.info-scroll {
    flex:                1;
    overflow-y:          auto;
    overflow-x:          hidden;
    overscroll-behavior: contain;
    scrollbar-width:     none;
}
.info-scroll::-webkit-scrollbar { display: none; }

.info-body {
    padding:     2rem 3rem 4rem;
    line-height: 1.75;
    color:       var(--ink);
}
.info-body h3 {
    font-size:      1.3rem;
    font-weight:    700;
    margin:         2rem 0 0.75rem;
    letter-spacing: -0.02em;
}
.info-body h3:first-child { margin-top: 0; }
.info-body p {
    font-size:   0.92rem;
    font-weight: 300;
    color:       var(--ink-soft);
    margin:      0 0 1rem;
}
.info-body ul {
    padding-left: 1.5rem;
    margin:       0 0 1rem;
}
.info-body li {
    font-size:   0.92rem;
    font-weight: 300;
    color:       var(--ink-soft);
    margin:      0.4rem 0;
}
.info-body strong { font-weight: 600; color: var(--ink); }
.info-body a { color: var(--blue); text-decoration: underline; }

@media (max-width: 768px) {
    .info-inner  {
        max-width:     100%;
        border-radius: 0;
        height:        100%;
    }
    .info-inner .modal-bar {
        border-radius:       0;
        padding-top:         env(safe-area-inset-top, 0px);
    }
    .info-body {
        padding:        1.5rem 1.5rem 3rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    /* Drawers full-width + full-height on mobile */
    #auth-drawer,
    #cart-drawer        {
        width:  100vw;
    }
    .drawer-header      {
        padding:     1rem 1.25rem;
        padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    }
    .drawer-header h2   { font-size: 1.05rem; }

    /* Hide drag strip on cart/auth drawers on mobile */
    .cart-drag-strip    { display: none; }
    .auth-drag-strip    { display: none; }

    /* Info modal */
    .info-body          { padding: 1.25rem 1.25rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
    .info-body h3       { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; }
    .info-body p,
    .info-body li       { font-size: 0.85rem; }
    .modal-bar-content  { padding: 0.5rem 1rem 0.6rem; }
    .modal-bar-title    { font-size: 1rem; }

    /* Cart */
    #cart-items         { padding: 0.75rem 1.25rem; }
    #cart-footer        { padding: 1rem 1.25rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
    .checkout-body      { padding: 0.5rem 1.25rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
    .checkout-handle    { padding: 0.75rem 1.25rem 0.4rem; }

    /* Auth */
    .auth-form-body     { padding: 1.25rem 1.25rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
    .user-tabs          { padding: 0 1.25rem; }
    .user-tab-content   { padding: 1rem 1.25rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

    /* Admin */
    .admin-inner        { padding: 0 1rem; padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
    .admin-header       { padding: 1.25rem 0 1rem; margin-bottom: 1rem; }
    .admin-header h2    { font-size: 1.15rem; }

    /* Tabs: horizontal scroll if needed */
    .admin-tabs         { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; margin-bottom: 1.25rem; }
    .admin-tab          { font-size: 0.78rem; padding: 0.65rem 0.75rem; white-space: nowrap; }

    /* Forms */
    .admin-neu-form     { padding: 1rem; }
    .admin-form-grid    { grid-template-columns: 1fr; }
    .admin-form-grid-3  { grid-template-columns: 1fr; }

    /* Filter bar */
    .admin-filter-bar   { flex-direction: column; gap: 0.5rem; }
    .admin-search-wrap  { min-width: 100%; }
    .admin-filter-select { max-width: 100%; width: 100%; }

    /* Tables: scrollable container */
    .admin-tab-content  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Detail view */
    .admin-detail-head  { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .admin-detail-head h3 { font-size: 1.1rem; }
    .admin-detail-meta  { font-size: 0.75rem; }
    .admin-section      { padding: 1rem; margin-bottom: 1rem; }
    .admin-section h4   { font-size: 0.85rem; }
    .admin-section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* Concentration cards */
    .admin-konz-card    { padding: 1rem; }
    .admin-konz-head h5 { font-size: 0.88rem; }
    .admin-konz-bild-row { flex-direction: column; align-items: stretch; }
    .admin-konz-thumb   { width: 44px; height: 44px; }
    .admin-textarea     { font-size: 0.82rem; min-height: 50px; }

    /* Variant rows */
    .admin-var-header   { grid-template-columns: 42px 1fr 1fr 28px; font-size: 0.62rem; }
    .admin-var-row      { grid-template-columns: 42px 1fr 1fr 28px; }
    .admin-var-ml       { font-size: 0.75rem; }
    .admin-input-sm     { font-size: 0.75rem; padding: 0.3rem 0.4rem; }
    .admin-var-add      { grid-template-columns: 42px 1fr auto; }

    /* Buttons */
    .admin-btn-sm       { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
    .admin-back-btn     { font-size: 0.8rem; }
}

/* ── MAGAZINE ARTICLE STYLES (Transparent Lab) ───────────────── */
.mag-article { padding: 0; }

.mag-hero {
    position:        relative;
    padding:         6rem 3rem 4rem;
    color:           #fff;
    overflow:        hidden;
}
.mag-hero-inner {
    max-width:  660px;
    margin:     0 auto;
}
.mag-kicker {
    display:        inline-block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.5);
    margin-bottom:  1rem;
}
.mag-hero-title {
    font-size:      3rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    line-height:    1.05;
    margin:         0 0 1.5rem;
}
.mag-hero-sub {
    font-size:      1.05rem;
    font-weight:    300;
    line-height:    1.65;
    color:          rgba(255,255,255,0.6);
    max-width:      480px;
}

.mag-body {
    max-width:   660px;
    margin:      0 auto;
    padding:     3rem 3rem 5rem;
}
.mag-body h2 {
    font-size:      1.4rem;
    font-weight:    700;
    letter-spacing: -0.025em;
    line-height:    1.2;
    color:          var(--ink);
    margin:         3rem 0 1rem;
}
.mag-body h2:first-child { margin-top: 0; }

.mag-body p {
    font-size:      0.93rem;
    font-weight:    300;
    line-height:    1.85;
    color:          var(--ink-soft);
    text-align:     justify;
    hyphens:        auto;
    -webkit-hyphens: auto;
    margin:         0 0 1.25rem;
}
.mag-intro {
    font-size:   1.08rem !important;
    font-weight: 400 !important;
    color:       var(--ink) !important;
    line-height: 1.8 !important;
    margin-bottom: 2.5rem !important;
}

/* Figures */
.mag-fig {
    margin:        2.5rem -1.5rem;
    border-radius: 14px;
    overflow:      hidden;
}
.mag-fig-wide {
    margin-left:  -3rem;
    margin-right: -3rem;
    border-radius: 0;
}
.mag-fig img,
.mag-fig video {
    width:      100%;
    height:     auto;
    display:    block;
    object-fit: cover;
}
.mag-fig figcaption {
    font-size:   0.75rem;
    font-weight: 400;
    color:       var(--ink-muted);
    padding:     0.75rem 1.5rem 0.5rem;
    text-align:  center;
    line-height: 1.5;
}
.mag-fig-wide figcaption { padding: 0.75rem 3rem 0.5rem; }

/* Pull quote */
.mag-quote {
    margin:      2.5rem 0;
    padding:     0 0 0 1.5rem;
    border-left: 2px solid var(--ink);
}
.mag-quote p {
    font-size:      1.15rem !important;
    font-weight:    500 !important;
    font-style:     italic;
    color:          var(--ink) !important;
    line-height:    1.6 !important;
    text-align:     left !important;
    margin-bottom:  0.5rem !important;
}
.mag-quote cite {
    font-size:   0.78rem;
    font-weight: 400;
    font-style:  normal;
    color:       var(--ink-muted);
}

/* Divider */
.mag-divider {
    width:      60px;
    height:     1px;
    background: var(--border);
    margin:     3rem auto;
}

/* Stats row */
.mag-stats {
    display:       flex;
    gap:           2rem;
    margin:        2.5rem 0;
    padding:       2rem 0;
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mag-stat {
    flex:           1;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}
.mag-stat-num {
    font-size:      1.8rem;
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          var(--ink);
    font-variant-numeric: tabular-nums;
}
.mag-stat-label {
    font-size:   0.72rem;
    font-weight: 500;
    color:       var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Test / numbered items */
.mag-test {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    margin:         2rem 0;
}
.mag-test-q {
    display:  flex;
    gap:      1.25rem;
    align-items: flex-start;
}
.mag-test-num {
    font-size:      0.72rem;
    font-weight:    700;
    color:          var(--ink-muted);
    letter-spacing: 0.05em;
    min-width:      1.5rem;
    padding-top:    0.15rem;
    font-variant-numeric: tabular-nums;
}
.mag-test-q p {
    text-align: left !important;
    margin:     0 !important;
}

/* Rules */
.mag-rules {
    display:        flex;
    flex-direction: column;
    gap:            2rem;
    margin:         2rem 0;
}
.mag-rule {
    display:     flex;
    gap:         1.25rem;
    align-items: flex-start;
}
.mag-rule-num {
    font-size:      1.2rem;
    font-weight:    300;
    color:          var(--ink-muted);
    min-width:      1.5rem;
    font-style:     italic;
    font-family:    Georgia, serif;
}
.mag-rule h3 {
    font-size:      0.95rem;
    font-weight:    700;
    color:          var(--ink);
    margin:         0 0 0.35rem;
    letter-spacing: -0.01em;
}
.mag-rule p {
    font-size:   0.88rem !important;
    margin:      0 !important;
}

/* Brand list */
.mag-brands {
    display:        flex;
    flex-direction: column;
    gap:            2rem;
    margin:         2rem 0;
}
.mag-brand h3 {
    font-size:      1rem;
    font-weight:    700;
    color:          var(--ink);
    margin:         0 0 0.35rem;
}
.mag-brand p {
    font-size: 0.88rem !important;
    margin:    0 !important;
}

/* Comparison */
.mag-compare {
    display: flex;
    gap:     2rem;
    margin:  2rem 0;
}
.mag-compare-col {
    flex:           1;
    padding:        1.5rem;
    border-radius:  14px;
    background:     var(--bg);
}
.mag-compare-col h3 {
    font-size:      0.85rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--ink);
    margin:         0 0 1rem;
}
.mag-compare-col ul {
    list-style: none;
    padding:    0;
    margin:     0;
}
.mag-compare-col li {
    font-size:      0.85rem;
    font-weight:    300;
    color:          var(--ink-soft);
    padding:        0.4rem 0;
    border-bottom:  1px solid var(--border);
}
.mag-compare-col li:last-child { border-bottom: none; }

/* Pyramid */
.mag-pyramid {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin:         2rem 0;
}
.mag-pyramid-level {
    padding:       1.5rem;
    text-align:    center;
}
.mag-pyramid-level h3 {
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--ink);
    margin:         0 0 0.5rem;
}
.mag-pyramid-level p {
    font-size:      0.85rem !important;
    text-align:     center !important;
    margin:         0 !important;
    max-width:      420px;
    margin-left:    auto !important;
    margin-right:   auto !important;
}
.mag-pyramid-top  { background: rgba(0,113,227,0.06); border-radius: 14px 14px 0 0; }
.mag-pyramid-mid  { background: rgba(0,113,227,0.03); }
.mag-pyramid-base { background: var(--bg); border-radius: 0 0 14px 14px; }

/* Glossary */
.mag-glossary dl {
    margin:  0;
    padding: 0;
}
.mag-glossary dt {
    font-size:      0.92rem;
    font-weight:    700;
    color:          var(--ink);
    margin-top:     1.25rem;
}
.mag-glossary dt:first-child { margin-top: 0; }
.mag-glossary dd {
    font-size:   0.88rem;
    font-weight: 300;
    color:       var(--ink-soft);
    margin:      0.25rem 0 0;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .mag-hero        { padding: 4rem 1.5rem 2.5rem; }
    .mag-hero-title  { font-size: 2.2rem; }
    .mag-body        { padding: 2rem 1.5rem 4rem; }
    .mag-fig         { margin-left: -1.5rem; margin-right: -1.5rem; border-radius: 0; }
    .mag-fig-wide    { margin-left: -1.5rem; margin-right: -1.5rem; }
    .mag-fig-wide figcaption { padding: 0.75rem 1.5rem 0.5rem; }
    .mag-stats       { flex-direction: column; gap: 1.5rem; }
    .mag-compare     { flex-direction: column; }
}

@media (max-width: 480px) {
    .mag-hero         { padding: 2.5rem 1rem 2rem; }
    .mag-hero-title   { font-size: 1.7rem; }
    .mag-hero-sub     { font-size: 0.9rem; }
    .mag-body         { padding: 1.5rem 1rem 3rem; }
    .mag-body p       { font-size: 0.88rem; }
    .mag-quote        { font-size: 1.1rem; padding: 1.25rem 1.5rem; }
    .mag-fig          { margin-left: -1rem; margin-right: -1rem; }
    .mag-fig-wide     { margin-left: -1rem; margin-right: -1rem; }
}

/* ── MOBILE FULL-BLEED KAUFEN BUTTON ─────────────────────────── */
@media (max-width: 480px) {

    .info-body .merge-kaufen-btn {
        display: block;
        width: calc(100% + 2.5rem);   /* gleicht parent padding (1.25rem links + rechts) aus */
        margin-left: -1.25rem;        /* zieht bis ganz links */
        margin-right: -1.25rem;
        border-radius: 0;             /* edge-to-edge */
    }

}

/* ── AUTH DRAWER ─────────────────────────────────────────────── */
#auth-drawer.auth-closed { transform: translateX(100%); }
#auth-drawer.auth-open   { transform: translateX(0); }

.auth-view        { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.auth-view.hidden { display: none; }

.auth-form-body {
    padding:        1.5rem 2rem 2rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    flex:           1;
}

.auth-field        { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-field label  { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; }

.auth-field input {
    font-size:     0.88rem;
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       0.65rem 0.9rem;
    outline:       none;
    color:         var(--ink);
    background:    var(--white);
    width:         100%;
    transition:    border-color 0.15s;
}
.auth-field input:focus { border-color: var(--blue); }

.auth-fehler {
    font-size:     0.8rem;
    color:         #FF3B30;
    background:    rgba(255,59,48,0.06);
    padding:       0.5rem 0.75rem;
    border-radius: 8px;
}
.auth-fehler.hidden { display: none; }

.auth-switch { font-size: 0.82rem; color: var(--ink-soft); text-align: center; }
.auth-switch span { color: var(--blue); cursor: pointer; font-weight: 500; }
.auth-switch span:hover { opacity: 0.7; }

.auth-divider { border: none; border-top: 1px solid var(--border); }
.auth-hint    { font-size: 0.72rem; color: var(--ink-muted); text-align: center; font-family: var(--font-mono); }

.btn-logout {
    font-size:     0.85rem;
    font-weight:   500;
    background:    transparent;
    color:         #FF3B30;
    border:        1px solid rgba(255,59,48,0.25);
    border-radius: 980px;
    padding:       0.6rem 1.2rem;
    cursor:        pointer;
    transition:    background 0.15s;
    width:         100%;
}
.btn-logout:hover { background: rgba(255,59,48,0.06); }

/* User Tabs */
.user-tabs {
    display:       flex;
    border-bottom: 1px solid var(--border);
    padding:       0 2rem;
    flex-shrink:   0;
}

.user-tab {
    font-size:     0.82rem;
    font-weight:   500;
    background:    none;
    border:        none;
    border-bottom: 2px solid transparent;
    padding:       0.85rem 1rem;
    cursor:        pointer;
    color:         var(--ink-soft);
    margin-bottom: -1px;
    transition:    color 0.15s, border-color 0.15s;
}
.user-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.user-tab:hover  { color: var(--ink); }

.user-tab-content        { flex: 1; overflow-y: auto; padding: 1.25rem 2rem; }
.user-tab-content.hidden { display: none; }

.user-leer { font-size: 0.82rem; font-weight: 300; color: var(--ink-muted); text-align: center; padding: 2.5rem 0; }

.user-list-item {
    display:       flex;
    align-items:   center;
    gap:           0.85rem;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.user-list-thumb     { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.user-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-list-thumb span { font-size: 0.5rem; font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.2; padding: 2px; }
.user-list-info   { flex: 1; cursor: pointer; }
.user-list-name   { font-size: 0.88rem; font-weight: 500; margin-bottom: 0.15rem; }
.user-list-preis  { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.user-list-link   { font-size: 0.7rem; color: var(--blue); font-weight: 500; margin-top: 0.2rem; }
.user-list-info:hover .user-list-link { text-decoration: underline; }

.user-list-remove {
    background:    transparent;
    border:        none;
    color:         var(--ink-muted);
    cursor:        pointer;
    font-size:     0.75rem;
    padding:       0.25rem 0.4rem;
    border-radius: 6px;
    transition:    background 0.15s;
}
.user-list-remove:hover { background: rgba(0,0,0,0.06); }

/* Bestellungen */
.order-item          { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 0.85rem; }
.order-header        { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.order-nr            { font-size: 0.82rem; font-weight: 600; }
.order-datum         { font-size: 0.75rem; color: var(--ink-muted); flex: 1; }
.order-total         { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }
.order-artikel-zeile { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 300; color: var(--ink-soft); padding: 0.2rem 0; }

/* ── WARENKORB DRAWER ────────────────────────────────────────── */
#cart-drawer.cart-closed { transform: translateX(100%); }
#cart-drawer.cart-open   { transform: translateX(0); }

#cart-items { flex: 1; overflow-y: auto; padding: 1rem 2rem; }

.cart-empty { font-size: 0.85rem; font-weight: 300; color: var(--ink-muted); text-align: center; padding: 3rem 0; }

.cart-item {
    display:       flex;
    align-items:   flex-start;
    gap:           0.85rem;
    padding:       0.9rem 0;
    border-bottom: 1px solid var(--border);
}

.cart-item-thumb       { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.cart-item-thumb img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-placeholder { font-size: 0.55rem; font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.2; padding: 2px; overflow: hidden; }

.cart-item-info    { flex: 1; min-width: 0; }
.cart-item-name    { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.3rem; }
.cart-item-details { margin-top: 0.35rem; }
.cart-item-konz    { font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 0.25rem; font-weight: 500; }

.cart-groesse-row { display: flex; gap: 4px; flex-wrap: wrap; }

.cart-groesse-opt {
    font-size:     0.65rem;
    font-weight:   500;
    background:    var(--bg);
    color:         var(--ink-soft);
    border:        1px solid var(--border);
    border-radius: 5px;
    padding:       0.15rem 0.4rem;
    cursor:        pointer;
    transition:    background 0.12s;
}
.cart-groesse-opt:hover  { background: #EBEBED; color: var(--ink); }
.cart-groesse-opt:active { transform: scale(0.94); }
.cart-groesse-opt.aktiv  { background: var(--ink); color: #fff; border-color: var(--ink); }

.cart-item-right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            0.35rem;
    flex-shrink:    0;
}

.cart-item-preis { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 500; }

.cart-menge-ctrl { display: flex; align-items: center; gap: 0.3rem; }

.cart-menge-btn {
    width:           22px;
    height:          22px;
    border-radius:   50%;
    border:          1px solid var(--border);
    background:      var(--bg);
    color:           var(--ink);
    font-size:       0.9rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    padding:         0;
    transition:      background 0.12s;
    line-height:     1;
}
.cart-menge-btn:hover  { background: #EBEBED; }
.cart-menge-btn:active { transform: scale(0.92); }
.cart-menge-btn-max, .cart-menge-btn:disabled {
    opacity:        0.35;
    cursor:         not-allowed;
    pointer-events: none;
}

.cart-stock-hint {
    font-size:   0.65rem;
    color:       #FF3B30;
    font-weight: 500;
    margin-top:  0.15rem;
    text-align:  right;
}

.cart-menge-zahl { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; min-width: 16px; text-align: center; }

.cart-remove {
    font-size:  0.7rem;
    color:      var(--ink-muted);
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0;
    transition: color 0.15s;
}
.cart-remove:hover { color: #FF3B30; }

/* Cart Footer */
#cart-footer {
    padding:     1.25rem 2rem 1rem;
    border-top:  1px solid var(--border);
    flex-shrink: 0;
}
#cart-footer.hidden { display: none; }

.cart-total-row {
    display:         flex;
    justify-content: space-between;
    font-size:       0.88rem;
    color:           var(--ink-soft);
    margin-bottom:   0.85rem;
}
.cart-total-price { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

.btn-zur-kasse {
    font-size:       0.92rem;
    font-weight:     600;
    background:      var(--ink);
    color:           #fff;
    border:          none;
    border-radius:   14px;
    padding:         0.85rem 1.5rem;
    cursor:          pointer;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    transition:      background 0.15s;
}
.btn-zur-kasse:hover  { background: #2d2d2f; }
.btn-zur-kasse:active { transform: scale(0.98); }

/* ── CHECKOUT PANEL ──────────────────────────────────────────── */
.checkout-panel {
    position:      absolute;
    bottom:        0;
    left:          0;
    right:         0;
    background:    var(--white);
    border-radius: 20px 20px 0 0;
    box-shadow:    0 -8px 40px rgba(0,0,0,0.12);
    transition:    transform 0.4s var(--ease);
    z-index:       10;
    max-height:    90%;
    overflow-y:    auto;
}
.checkout-hidden  { transform: translateY(110%); }
.checkout-visible { transform: translateY(0); }

.checkout-handle {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        1rem 2rem 0.5rem;
    cursor:         pointer;
    gap:            0.5rem;
}
.checkout-handle-bar  { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-muted); opacity: 0.4; }
.checkout-handle span { font-size: 0.75rem; color: var(--blue); font-weight: 500; }

.checkout-body {
    padding:        0.5rem 2rem 2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.checkout-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.25rem; }

.checkout-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.75rem 1rem;
    background:      var(--bg);
    border-radius:   10px;
    font-size:       0.88rem;
    margin-bottom:   0.25rem;
}
.checkout-total-price { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--ink); }

.pay-btn {
    font-size:       0.92rem;
    font-weight:     600;
    border:          none;
    border-radius:   14px;
    padding:         1rem 1.5rem;
    cursor:          pointer;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.6rem;
    transition:      opacity 0.15s;
}
.pay-btn:hover  { opacity: 0.88; }
.pay-btn:active { transform: scale(0.98); }

.pay-apple  { background: var(--ink); color: #fff; }
.pay-card   { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.pay-card:hover { background: var(--bg); opacity: 1; }
.pay-paypal { background: #FFC439; color: #003087; }

.pay-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-muted); font-size: 0.75rem; }
.pay-divider::before, .pay-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.checkout-hinweis { font-size: 0.72rem; color: var(--ink-muted); text-align: center; }

.checkout-success {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        3rem 2rem 3.5rem;
    gap:            0.75rem;
}
.checkout-success-icon {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      #34C759;
    color:           #fff;
    font-size:       1.75rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   0.5rem;
}
.checkout-success h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.checkout-success p  { font-size: 0.82rem; font-weight: 300; color: var(--ink-soft); }

/* ── ADMIN PANEL ─────────────────────────────────────────────── */
#admin-panel { position: fixed; inset: 0; z-index: 900; background: var(--white); overflow-y: auto; }
#admin-panel.hidden { display: none; }

.admin-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem 4rem; }

.admin-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         2rem 0 1.5rem;
    border-bottom:   1px solid var(--border);
    margin-bottom:   1.5rem;
    position:        sticky;
    top:             0;
    background:      var(--white);
    z-index:         10;
}
.admin-header h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }

.admin-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }

.admin-tab {
    font-size:     0.85rem;
    font-weight:   500;
    background:    none;
    border:        none;
    border-bottom: 2px solid transparent;
    padding:       0.75rem 1.25rem;
    cursor:        pointer;
    color:         var(--ink-soft);
    margin-bottom: -1px;
    transition:    color 0.15s, border-color 0.15s;
}
.admin-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.admin-tab:hover  { color: var(--ink); }

.admin-tab-content.hidden { display: none; }

.admin-neu-form    { background: var(--bg); border-radius: 14px; padding: 1.5rem; margin-bottom: 2rem; }
.admin-neu-form h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; }

.admin-form-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   0.75rem;
    margin-bottom:         1rem;
}

.admin-input {
    font-size:     0.85rem;
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       0.55rem 0.75rem;
    outline:       none;
    background:    var(--white);
    color:         var(--ink);
    transition:    border-color 0.15s;
    width:         100%;
}
.admin-input:focus { border-color: var(--blue); }

.admin-table              { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.admin-table th           { text-align: left; padding: 0.6rem 0.75rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--border); }
.admin-table td           { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
.admin-table tr:hover td  { background: var(--bg); }

.admin-del-btn {
    font-size:     0.72rem;
    font-weight:   500;
    background:    transparent;
    color:         #FF3B30;
    border:        1px solid rgba(255,59,48,0.3);
    border-radius: 6px;
    padding:       0.25rem 0.6rem;
    cursor:        pointer;
    transition:    background 0.15s;
}
.admin-del-btn:hover { background: rgba(255,59,48,0.08); }

.rolle-badge { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; letter-spacing: 0.04em; }
.rolle-admin { background: rgba(0,113,227,0.1); color: var(--blue); }
.rolle-user  { background: rgba(0,0,0,0.06); color: var(--ink-soft); }

/* ── ADMIN DETAIL VIEW ─────────────────────────────────────────── */
.admin-row-clickable { cursor: pointer; }
.admin-row-clickable:hover td { background: var(--bg) !important; }

.admin-back-btn {
    font-size: 0.85rem; font-weight: 500; background: none; border: none;
    color: var(--blue); cursor: pointer; padding: 0.5rem 0; margin-bottom: 1rem;
}
.admin-back-btn:hover { text-decoration: underline; }

.admin-detail-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem;
}
.admin-detail-head h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.admin-detail-meta { font-size: 0.8rem; color: var(--ink-soft); }

.admin-section { background: var(--bg); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-section h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 1rem; }

.admin-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.admin-section-head h4 { margin: 0; }

.admin-btn-sm { font-size: 0.78rem; padding: 0.4rem 1rem; }

.admin-konz-card {
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.25rem; margin-bottom: 1rem;
}
.admin-konz-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.admin-konz-head h5 { font-size: 0.95rem; font-weight: 600; margin: 0; }

.admin-konz-bild-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.admin-konz-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.admin-konz-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: var(--ink-muted); background: var(--bg);
}
.admin-input-grow { flex: 1; }

.admin-textarea { width: 100%; min-height: 60px; resize: vertical; margin-bottom: 0.75rem; font-family: inherit; }

.admin-form-grid-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 0.75rem; }

.admin-var-section { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.admin-var-header {
    display: grid; grid-template-columns: 60px 1fr 1fr 28px; gap: 0.5rem;
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft); margin-bottom: 0.4rem; padding: 0 0.25rem;
}
.admin-var-row {
    display: grid; grid-template-columns: 60px 1fr 1fr 28px; gap: 0.5rem;
    align-items: center; margin-bottom: 0.3rem;
}
.admin-var-ml { font-size: 0.82rem; font-weight: 500; }
.admin-input-sm { font-size: 0.8rem; padding: 0.35rem 0.5rem; }

.admin-var-add {
    display: grid; grid-template-columns: 60px 1fr auto; gap: 0.5rem;
    align-items: center; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border);
}

.admin-x-btn {
    width: 24px; height: 24px; font-size: 1.1rem; line-height: 1;
    background: none; border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-x-btn:hover { background: var(--bg); }
.admin-x-red:hover { background: rgba(255,59,48,0.08); color: #FF3B30; border-color: rgba(255,59,48,0.3); }

/* ── ADMIN SEARCH & FILTER BAR ─────────────────────────────────── */
.admin-filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.admin-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.admin-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    pointer-events: none;
}
.admin-search-input {
    padding-left: 2.25rem !important;
    width: 100%;
}
.admin-filter-select {
    min-width: 160px;
    max-width: 220px;
}
.admin-filter-count {
    font-size: 0.75rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* ── ADMIN POSITION BUTTONS ────────────────────────────────────── */
.admin-pos-cell {
    width: 36px;
    padding: 0.3rem !important;
}
.admin-pos-btns {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.admin-pos-btn {
    width: 22px;
    height: 16px;
    font-size: 0.55rem;
    line-height: 1;
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.admin-pos-btn:hover:not(:disabled) {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--ink-soft);
}
.admin-pos-btn:disabled {
    opacity: 0.25;
    cursor: default;
}