/* ============================================================
   ADAMI Gastro Planner – Global Stylesheet
   Premium Editorial Look (Cream + Gold + Charcoal)
   ------------------------------------------------------------
   Struktur:
     01  Google Fonts
     02  Reset & Base
     03  CSS Variables (Design Tokens)
     04  Typografie
     05  App-Layout
     06  Sidebar
     07  Topbar
     08  Cards
     09  Stats
     10  Buttons
     11  Forms
     12  Tables
     13  Alerts
     14  Empty-State
     15  Modals
     16  Toasts
     17  Tabs
     18  Badges & Helper
     19  Rezept-Spezifisch
     20  Login
     21  Wizard
     22  Tischplan-Editor
     23  Animations
     24  Responsive (Mobile Drawer)
     25  Print
   ============================================================ */


/* ============================================================
   01  GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600;700&display=swap');


/* ============================================================
   02  RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
hr { border: none; border-top: 1px solid var(--border); }

::selection { background: var(--gold-soft); color: var(--text); }


/* ============================================================
   03  CSS VARIABLES (DESIGN TOKENS)
   ============================================================ */
:root {
    /* ---- Farben: Warm Editorial Palette ---- */
    --cream:          #FBF8F2;   /* Page-Hintergrund  */
    --cream-deep:     #F5F0E4;   /* Leicht dunkler, Hover/Alt */
    --warm:           #F5EDD8;   /* Subtiler Warm-Ton, z.B. Table-Header */
    --card:           #FFFFFF;
    --border:         #EDE6D6;   /* Standard-Border */
    --border-soft:    #F1EADB;
    --border-strong:  #E2D9C4;

    /* Gold-Palette (Primary) */
    --gold:           #B8924A;
    --gold-dk:        #9A7A3C;
    --gold-lt:        #D4B479;
    --gold-soft:      #F5EDD8;
    --gold-glow:      rgba(184, 146, 74, 0.18);

    /* Text */
    --text:           #1F1B14;   /* Charcoal */
    --text-2:         #2A2418;
    --muted:          #76695A;
    --muted-2:        #857968;
    --inverse:        #FBF8F2;

    /* Akzent-Status */
    --burgundy:       #8B2438;
    --burgundy-soft:  #F5E3E6;
    --sage:           #5A7A4F;
    --sage-soft:      #E6EFDF;
    --amber:          #B88A1A;
    --amber-soft:     #FBF1D1;
    --ink-blue:       #2C4A6B;
    --ink-blue-soft:  #E0E8F1;

    /* Status-Farben */
    --status-anfrage:       var(--amber);
    --status-planung:       #e07a1f;
    --status-bestaetigt:    var(--sage);
    --status-abgeschlossen: var(--muted);
    --status-storniert:     var(--burgundy);
    --success:              #10B981;
    --danger:               #DC2626;
    --warning:              #D97706;

    /* Dark-Sidebar Farbverlauf */
    --nav-bg:         #1F1B14;
    --nav-bg-2:       #26211A;
    --nav-hover:      rgba(255, 255, 255, 0.05);
    --nav-active-bg:  rgba(184, 146, 74, 0.12);
    --nav-text:       rgba(251, 248, 242, 0.72);
    --nav-text-dim:   rgba(251, 248, 242, 0.38);
    --nav-border:     rgba(251, 248, 242, 0.08);

    /* Schatten – warm getönt */
    --shadow-xs:      0 1px 2px rgba(44, 36, 22, 0.04);
    --shadow:         0 2px 12px rgba(44, 36, 22, 0.06);
    --shadow-md:      0 6px 20px rgba(44, 36, 22, 0.08);
    --shadow-lg:      0 12px 40px rgba(44, 36, 22, 0.12);
    --shadow-xl:      0 20px 60px rgba(44, 36, 22, 0.18);
    --shadow-hover:   0 8px 28px rgba(184, 146, 74, 0.18);
    --shadow-inset:   inset 0 1px 2px rgba(44, 36, 22, 0.04);

    /* Radius */
    --radius-xs:      4px;
    --radius-sm:      8px;
    --radius:         12px;
    --radius-lg:      16px;
    --radius-xl:      24px;
    --radius-pill:    999px;

    /* Spacing-Scale (für inline-styles, primär aber Utility-Klassen) */
    --space-1:        4px;
    --space-2:        8px;
    --space-3:        12px;
    --space-4:        16px;
    --space-5:        24px;
    --space-6:        32px;
    --space-7:        48px;
    --space-8:        64px;
    --space-9:        96px;

    /* Schriftarten */
    --serif:          'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --sans:           'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Schriftgrößen */
    --fs-xs:          0.72rem;
    --fs-sm:          0.82rem;
    --fs-base:        0.95rem;
    --fs-md:          1.05rem;
    --fs-lg:          1.25rem;
    --fs-xl:          1.6rem;
    --fs-2xl:         2rem;
    --fs-3xl:         2.6rem;
    --fs-4xl:         3.4rem;

    /* Transitions */
    --t-fast:         0.15s ease;
    --t:              0.25s ease;
    --t-slow:         0.4s ease;

    /* Layout */
    --nav-w:          248px;
    --nav-w-mobile:   280px;
    --topbar-h:       72px;
    --content-pad:    40px;
    --content-max:    1440px;

    /* Focus-Ring */
    --focus-ring:     0 0 0 3px var(--gold-glow);
}


/* ============================================================
   04  TYPOGRAFIE
   ============================================================ */
body {
    font-family: var(--sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text);
    background: var(--cream);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    color: var(--text);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-3xl); font-weight: 500; }
h2 { font-size: var(--fs-2xl); font-weight: 500; }
h3 { font-size: var(--fs-xl); font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; }
h5 { font-size: var(--fs-md); font-weight: 600; }
h6 {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--sans);
    color: var(--muted);
}

p { line-height: 1.65; }

a {
    color: var(--gold-dk);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--gold); }

small { font-size: var(--fs-xs); color: var(--muted); }

code, kbd, samp {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.88em;
    background: var(--cream-deep);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-xs);
    color: var(--text);
}


/* ============================================================
   05  APP-LAYOUT
   ============================================================ */
.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--cream);
}

.main-content {
    margin-left: var(--nav-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;   /* wichtig gegen Overflow-Bugs */
}

.content, main {
    padding: var(--content-pad);
    flex: 1;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}


/* ============================================================
   06  SIDEBAR
   ============================================================ */
.sidebar {
    width: var(--nav-w);
    background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
    color: var(--nav-text);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    padding: 0 0 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* Logo-Bereich */
.sidebar-logo {
    padding: 2rem 1.5rem 1.75rem;
    border-bottom: 1px solid var(--nav-border);
    margin-bottom: 1.25rem;
}
.sidebar-logo a { display: block; text-decoration: none; }
.sidebar-logo .logo-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sidebar-logo .logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(184, 146, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    letter-spacing: -0.02em;
}
.sidebar-logo .logo-text {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--inverse);
    letter-spacing: -0.01em;
    display: block;
    line-height: 1.1;
}
.sidebar-logo .logo-sub {
    display: block;
    font-size: 0.62rem;
    color: var(--nav-text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 500;
}

/* Nav Section Labels */
.nav-section-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nav-text-dim);
    padding: 0.9rem 1.5rem 0.45rem;
    font-weight: 600;
}

/* Nav-Links */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.68rem 1.5rem;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 400;
    transition: background var(--t-fast), color var(--t-fast);
    border-left: 3px solid transparent;
    margin: 1px 0;
    line-height: 1.3;
}
.nav-link:hover {
    color: var(--inverse);
    background: var(--nav-hover);
}
.nav-link.active {
    color: var(--gold-lt);
    border-left-color: var(--gold);
    background: rgba(184, 146, 74, 0.18);
    font-weight: 600;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    opacity: 0.4;
}
.nav-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}
.nav-link.active .nav-icon { opacity: 1; }

.nav-badge {
    margin-left: auto;
    background: var(--gold, #B8924A);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 0 6px;
    letter-spacing: 0;
}

/* Footer / User */
.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1rem 0;
    border-top: 1px solid var(--nav-border);
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast);
}
.user-chip:hover { background: var(--nav-hover); }
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(184, 146, 74, 0.3);
}
.user-info { flex: 1; min-width: 0; }
.user-name {
    font-size: 0.82rem;
    color: var(--inverse);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.user-role {
    font-size: 0.68rem;
    color: var(--nav-text-dim);
    margin-top: 2px;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}


/* ============================================================
   07  TOPBAR
   ============================================================ */
.topbar {
    border-bottom: 1px solid var(--border-soft);
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--topbar-h);
    gap: 1rem;
    backdrop-filter: saturate(180%) blur(6px);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    background: rgba(251, 248, 242, 0.85);
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    flex: 1;
}
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.page-title {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-title small {
    display: block;
    font-size: 0.72rem;
    font-family: var(--sans);
    color: var(--muted);
    font-weight: 500;
    margin-left: 0;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Hamburger (mobile) */
.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.15rem;
    color: var(--text);
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.hamburger:hover {
    background: var(--cream-deep);
    border-color: var(--gold);
    color: var(--gold);
}


/* ============================================================
   08  CARDS
   ============================================================ */
.card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}
.card.card-hover:hover,
.card.card-hover:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(43,36,24,.12);
    border-color: var(--gold-lt);
}

.card-header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(180deg, var(--cream) 0%, var(--card) 100%);
}
.card-title {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.card-body { padding: 1.75rem; }
.card-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--border-soft);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}


/* ============================================================
   09  STATS
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--gold-lt);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 100%);
}
.stat-value {
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.stat-icon {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    color: var(--gold);
    opacity: 0.85;
}


/* ============================================================
   10  BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all var(--t-fast);
    border: 1.5px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    user-select: none;
    position: relative;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Primary */
.btn-primary {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    box-shadow: 0 2px 6px rgba(184, 146, 74, 0.25);
}
.btn-primary:hover {
    background: var(--gold-dk);
    border-color: var(--gold-dk);
    box-shadow: 0 6px 18px rgba(184, 146, 74, 0.38);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(184, 146, 74, 0.3); }

/* Outline */
.btn-outline {
    background: var(--card);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-outline:hover {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--gold-dk);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--cream-deep);
    color: var(--gold-dk);
}

/* Danger */
.btn-danger {
    background: var(--burgundy-soft);
    color: var(--burgundy);
    border-color: #EAC8CD;
}
.btn-danger:hover {
    background: var(--burgundy);
    color: #fff;
    border-color: var(--burgundy);
    box-shadow: 0 6px 18px rgba(139, 36, 56, 0.3);
    transform: translateY(-1px);
}

/* Grün / Erfolg */
.btn-green {
    background: var(--sage-soft);
    color: var(--sage);
    border-color: #CFDFC3;
}
.btn-green:hover {
    background: var(--sage);
    color: #fff;
    border-color: var(--sage);
    transform: translateY(-1px);
}

/* Größen */
.btn-sm {
    padding: 0.42rem 0.9rem;
    font-size: 0.78rem;
    gap: 0.4rem;
}
.btn-lg {
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    gap: 0.6rem;
}
.btn-icon {
    padding: 0.45rem 0.55rem;
    width: 36px;
    height: 36px;
}

/* Gruppe */
.btn-group {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* States */
.btn:disabled, .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
.btn.loading,
.btn.is-loading {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}
.btn.loading::after,
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.btn-outline.loading::after,
.btn-ghost.loading::after,
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after { border-color: var(--gold); border-right-color: transparent; }

/* Card-/Section-level Loading-Overlay. Elternelement braucht `position:relative`. */
.is-loading-overlay {
    position: relative;
    pointer-events: none;
}
.is-loading-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(251, 248, 242, 0.65);
    backdrop-filter: blur(1px);
    border-radius: inherit;
    z-index: 5;
}
.is-loading-overlay::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border: 2.5px solid var(--gold);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    z-index: 6;
}


/* ============================================================
   11  FORMS
   ============================================================ */
.form-grid { display: grid; gap: 1.5rem; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
}

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=time], input[type=number], input[type=password], input[type=search],
input[type=url], select, textarea {
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text);
    background: var(--card);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    width: 100%;
    outline: none;
    line-height: 1.4;
}
input:hover, select:hover, textarea:hover {
    border-color: var(--gold-lt);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold);
    box-shadow: var(--focus-ring);
    background: var(--card);
}
input::placeholder, textarea::placeholder {
    color: var(--muted-2);
    opacity: 0.75;
}
input:disabled, select:disabled, textarea:disabled, input[readonly] {
    background: var(--cream-deep);
    color: var(--muted);
    cursor: not-allowed;
    border-color: var(--border);
}
input[type=date], input[type=time] { min-height: 44px; }
textarea { resize: vertical; min-height: 110px; }
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2376695A' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
input[type=checkbox], input[type=radio] {
    width: auto;
    accent-color: var(--gold);
    cursor: pointer;
}
.form-hint {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.25rem;
}


/* ============================================================
   12  TABLES
   ============================================================ */
.table-wrap {
    position: relative;
    overflow-x: auto;
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}
.table-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.8));
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.table-wrap.is-scrollable::after {
    opacity: 1;
}
table, .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
thead th {
    background: var(--cream);
    padding: 0.95rem 1.25rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1.5px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
tbody tr {
    border-bottom: 1px solid var(--border-soft);
    transition: background var(--t-fast);
}
tbody tr:hover, .data-table tbody tr:hover {
    background: var(--cream);
}
tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    color: var(--text);
    line-height: 1.5;
}
tbody tr:last-child { border-bottom: none; }


/* ============================================================
   13  ALERTS
   ============================================================ */
.alert {
    padding: 1rem 1.25rem 1rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    line-height: 1.55;
}
.alert-success {
    background: var(--sage-soft);
    color: #2F4728;
    border-color: #D1DDC4;
    border-left-color: var(--sage);
}
.alert-error {
    background: var(--burgundy-soft);
    color: #5C1825;
    border-color: #E8CED2;
    border-left-color: var(--burgundy);
}
.alert-info {
    background: var(--ink-blue-soft);
    color: #1A2E44;
    border-color: #C9D6E3;
    border-left-color: var(--ink-blue);
}
.alert-warning, .alert-warn {
    background: var(--amber-soft);
    color: #5C4408;
    border-color: #EDD9A4;
    border-left-color: var(--amber);
}


/* ============================================================
   14  EMPTY-STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 4.5rem 2rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 0.75rem;
    opacity: 0.35;
    line-height: 1;
    color: var(--gold);
}
.empty-state .empty-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}
.empty-state .empty-text {
    font-size: 0.9rem;
    max-width: 440px;
    margin: 0 auto 1rem;
    line-height: 1.65;
    color: var(--muted);
}
.empty-state .empty-actions {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ============================================================
   15  MODALS
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31, 27, 20, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1.5rem;
    animation: fade-in var(--t);
}
.modal-overlay.open {
    display: flex;
}
.modal {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.25rem;
    position: relative;
    animation: modal-in var(--t);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-soft);
}
.modal-title {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--muted);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-xs);
    line-height: 1;
    transition: all var(--t-fast);
}
.modal-close:hover {
    background: var(--cream-deep);
    color: var(--text);
}


/* ============================================================
   16  TOASTS
   ============================================================ */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 380px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.95rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: var(--text);
    animation: toast-in var(--t);
    min-width: 280px;
    line-height: 1.5;
}
.toast.toast-out { animation: toast-out var(--t) forwards; }
.toast-icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--gold);
}
.toast-msg { flex: 1; line-height: 1.45; }
.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.2rem;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color var(--t-fast);
}
.toast-close:hover { color: var(--text); }

.toast-success { border-left-color: var(--sage); }
.toast-success .toast-icon { color: var(--sage); }
.toast-error { border-left-color: var(--burgundy); }
.toast-error .toast-icon { color: var(--burgundy); }
.toast-info { border-left-color: var(--ink-blue); }
.toast-info .toast-icon { color: var(--ink-blue); }
.toast-warning { border-left-color: var(--amber); }
.toast-warning .toast-icon { color: var(--amber); }


/* ============================================================
   17  TABS
   ============================================================ */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 1.5rem;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.tab-link:hover { color: var(--text); }
.tab-link.active {
    color: var(--gold-dk);
    border-bottom-color: var(--gold);
    font-weight: 600;
}
.tab-badge {
    background: var(--border);
    color: var(--muted);
    border-radius: var(--radius-pill);
    padding: 0 8px;
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
    line-height: 1.6;
}
.tab-link.active .tab-badge { background: var(--gold); color: #fff; }


/* ============================================================
   18  BADGES & HELPER
   ============================================================ */
.text-muted { color: var(--muted); font-size: 0.85rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-gold { color: var(--gold-dk); }

.role-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(184, 146, 74, 0.2);
    color: var(--gold-lt);
    line-height: 1.5;
    border: 1px solid rgba(184, 146, 74, 0.3);
}

.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.75rem 0;
}

/* Utility Flex/Grid */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }


/* ============================================================
   19  REZEPT-SPEZIFISCH
   ============================================================ */
.recipe-cover {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
    display: block;
}
.recipe-cover-placeholder {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: linear-gradient(135deg, var(--cream-deep) 0%, var(--gold-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--gold);
}
.step-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    padding: 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    align-items: start;
}
.step-card:last-child { border-bottom: none; }
.step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(184, 146, 74, 0.3);
}
.step-img {
    width: 100%;
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-top: 0.85rem;
}
.ingredient-row {
    display: flex;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.92rem;
}
.ingredient-row:last-child { border-bottom: none; }
.ing-amount {
    font-weight: 500;
    min-width: 90px;
    color: var(--gold-dk);
    font-family: var(--serif);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.ing-name { flex: 1; }
.ing-group {
    padding: 0.75rem 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    margin-top: 0.85rem;
}
.recipe-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.upload-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--t);
    background: var(--card);
}
.upload-zone:hover {
    border-color: var(--gold);
    background: var(--cream);
}
.upload-zone input[type=file] { display: none; }
.img-preview {
    max-width: 100%;
    border-radius: var(--radius-sm);
    max-height: 220px;
    object-fit: cover;
}


/* ============================================================
   20  LOGIN
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    background-image:
        radial-gradient(circle at 20% 80%, rgba(184, 146, 74, 0.1) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(44, 36, 22, 0.05) 0%, transparent 55%);
    padding: 1.5rem;
}
.login-box {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 3.25rem;
    width: 100%;
    max-width: 440px;
}
.login-logo { text-align: center; margin-bottom: 2.5rem; }
.login-logo .logo-main {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.login-logo .logo-tagline {
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    font-weight: 500;
}
.login-logo .logo-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 1.25rem auto;
}


/* ============================================================
   21  WIZARD
   ============================================================ */
.wizard-steps {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wizard-step {
    flex: 1;
    min-width: 120px;
    padding: 1rem 1.25rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.wizard-step:hover { color: var(--text); }
.wizard-step.active {
    color: var(--gold-dk);
    border-bottom-color: var(--gold);
    font-weight: 600;
}
.wizard-step.done {
    color: var(--sage);
    border-bottom-color: var(--sage);
}
.wizard-step.done::before { content: '✓ '; }

.wizard-panel {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
    margin-top: 1.5rem;
}
.wizard-courses {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.course-group {
    background: var(--cream);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
}
.course-group > h4 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.menu-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.menu-item-row:last-child { border-bottom: none; }
.mi-info { flex: 1; min-width: 0; }
.mi-price {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--gold-dk);
    font-weight: 600;
    white-space: nowrap;
}
.mi-qty {
    width: 80px;
    text-align: center;
}
.wizard-radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    background: var(--card);
}
.wizard-radio:hover { border-color: var(--gold-lt); background: var(--cream); }
.wizard-radio input[type=radio] { accent-color: var(--gold); }
.wizard-menu-summary {
    background: var(--gold-soft);
    border: 1px solid var(--gold-lt);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}


/* ============================================================
   22  TISCHPLAN-EDITOR
   ============================================================ */
.floor-plan-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fp-topbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    flex-wrap: wrap;
}
.fp-title-input {
    padding: 0.5rem 0.85rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--sans);
}
.fp-save-indicator {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--sage-soft);
}
.fp-save-saving { background: var(--amber-soft); }
.fp-save-ok     { background: var(--sage); }
.fp-save-error  { background: var(--burgundy); }

.fp-workspace {
    display: flex;
    gap: 1rem;
    min-height: 600px;
}
.fp-palette {
    width: 190px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: var(--shadow-xs);
}
.fp-palette-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 0.35rem;
    padding: 0 0.25rem;
}
.fp-palette-item {
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-soft);
    background: var(--cream);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    transition: all var(--t-fast);
}
.fp-palette-item:hover {
    background: var(--gold-soft);
    border-color: var(--gold-lt);
    color: var(--gold-dk);
}
.fp-palette-sep {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

.fp-canvas-wrap {
    flex: 1;
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
.fp-canvas {
    position: relative;
    background-image:
        linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
    background-size: 10px 10px, 10px 10px;
}

.fp-element {
    position: absolute;
    border: 2px solid var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    background: var(--cream-deep);
    transform-origin: center center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
    transition: box-shadow .15s ease;
}
.fp-element::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.6rem, 28%, 3.2rem);
    opacity: .22;
    font-weight: 400;
    line-height: 1;
    z-index: 0;
}
.fp-element .fp-label {
    position: relative;
    z-index: 1;
    padding: 0 0.35rem;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
.fp-element.fp-editable { cursor: move; touch-action: none; }
.fp-element.fp-editable:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.08); }
.fp-element.selected { outline: 2px dashed var(--gold); outline-offset: 3px; box-shadow: 0 6px 20px rgba(184,146,74,.35); }
.fp-element .fp-seats {
    position: absolute;
    z-index: 2;
    bottom: 3px; right: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--card);
    color: var(--gold-dk);
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ── Runder Tisch: echter Kreis mit Stuhl-Andeutung am Rand ──────────────── */
.fp-element-table_round {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFBEC 0%, var(--gold-soft) 55%, #E9D6A8 100%);
    border: 3px solid var(--gold-dk);
    box-shadow:
        0 3px 10px rgba(0,0,0,.12),
        inset 0 0 0 6px rgba(255,255,255,.4),
        inset 0 -8px 16px rgba(154,122,60,.18);
}
.fp-element-table_round::before { content: '◍'; color: var(--gold-dk); font-size: clamp(1.8rem, 38%, 4rem); opacity: .15; }

/* ── Rechteck-Tisch: Holzplatte mit warmem Gradient ──────────────────────── */
.fp-element-table_rect {
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(90deg, var(--gold-soft) 0%, #EFD9A5 50%, var(--gold-soft) 100%);
    border: 3px solid var(--gold-dk);
    box-shadow: 0 3px 10px rgba(0,0,0,.12), inset 0 -4px 10px rgba(154,122,60,.15);
}
.fp-element-table_rect::before { content: '▭'; color: var(--gold-dk); opacity: .18; }

/* ── Bar: dunkle Theke mit goldener Oberkante ────────────────────────────── */
.fp-element-bar {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 6px, #2A2418 6px, #1F1B14 100%);
    border: 2px solid #0F0D08;
    border-radius: 4px;
    color: var(--gold-lt);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 -3px 8px rgba(0,0,0,.4);
}
.fp-element-bar::before { content: '🍸'; opacity: .35; font-size: clamp(1.4rem, 32%, 2.6rem); }
.fp-element-bar .fp-label { color: var(--gold-lt); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fp-element-bar .fp-seats { background: var(--gold); color: #1F1B14; border-color: var(--gold-dk); }

/* ── DJ-Pult: Plattenspieler-Look, konzentrische Kreise ──────────────────── */
.fp-element-dj {
    background:
        radial-gradient(circle at center, #4A2D6B 0%, #4A2D6B 18%, #2A1A3D 18%, #2A1A3D 24%, #4A2D6B 24%, #4A2D6B 32%, #2A1A3D 32%, #2A1A3D 38%, #6B3F9B 38%, #6B3F9B 100%);
    border: 2px solid #1F0F33;
    border-radius: 8px;
    color: #F0E6FF;
    box-shadow: 0 4px 14px rgba(75,45,107,.35), inset 0 0 12px rgba(0,0,0,.4);
}
.fp-element-dj::before { content: '🎧'; opacity: .55; font-size: clamp(1.4rem, 36%, 2.8rem); }
.fp-element-dj .fp-label { color: #F0E6FF; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* ── Bühne: warmer Spot-Light-Gradient mit Mikrofon ──────────────────────── */
.fp-element-stage {
    background:
        radial-gradient(ellipse at center top, rgba(255,225,150,.6) 0%, rgba(255,225,150,0) 60%),
        linear-gradient(180deg, #6B5638 0%, #4A3A24 100%);
    border: 2px solid #2A1F10;
    border-radius: 4px 4px 12px 12px;
    color: #FFF4D6;
    box-shadow: 0 5px 16px rgba(0,0,0,.3), inset 0 8px 20px rgba(255,225,150,.2);
}
.fp-element-stage::before { content: '🎤'; opacity: .55; font-size: clamp(1.5rem, 38%, 3rem); }
.fp-element-stage .fp-label { color: #FFF4D6; text-shadow: 0 1px 3px rgba(0,0,0,.8); font-weight: 700; }

/* ── Tanzfläche: Schachbrett-Parkett mit Glanz ───────────────────────────── */
.fp-element-dancefloor {
    background:
        linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 50%),
        repeating-conic-gradient(#E8C9A5 0% 25%, #C9A56B 0% 50%);
    background-size: auto, 40px 40px;
    border: 3px solid #8B6B3A;
    border-radius: 6px;
    color: #3A2A14;
    box-shadow: 0 5px 16px rgba(0,0,0,.2), inset 0 0 20px rgba(255,255,255,.3);
}
.fp-element-dancefloor::before { content: '✦'; color: #FFF; opacity: .5; font-size: clamp(1.6rem, 42%, 3.4rem); text-shadow: 0 0 10px rgba(255,255,255,.8); }
.fp-element-dancefloor .fp-label { color: #1F1B14; font-weight: 700; text-shadow: 0 1px 3px rgba(255,255,255,.8); }

/* ── Eingang: Tür mit Pfeil ──────────────────────────────────────────────── */
.fp-element-entrance {
    background: linear-gradient(180deg, var(--sage-soft) 0%, #C9DEB8 100%);
    border: 2px dashed var(--sage);
    border-radius: 4px;
    color: #2F4A24;
}
.fp-element-entrance::before { content: '🚪'; opacity: .5; font-size: clamp(1.4rem, 36%, 2.8rem); }
.fp-element-entrance .fp-label { color: #2F4A24; font-weight: 700; }

/* ── Buffet: Wärmebehälter mit Amber-Gradient ────────────────────────────── */
.fp-element-buffet {
    background:
        linear-gradient(180deg, #FBF1D1 0%, #E8C975 60%, #D4AB45 100%);
    border: 2px solid #8B6B1A;
    border-radius: 6px;
    color: #4A3614;
    box-shadow: 0 4px 12px rgba(184,138,26,.25), inset 0 -4px 8px rgba(139,107,26,.3), inset 0 2px 4px rgba(255,255,255,.4);
}
.fp-element-buffet::before { content: '🍽'; opacity: .55; font-size: clamp(1.4rem, 32%, 2.6rem); }
.fp-element-buffet .fp-label { color: #4A3614; font-weight: 700; }

/* ── Text-Element: minimal, dezent ───────────────────────────────────────── */
.fp-element-text {
    background: rgba(255,255,255,.6);
    border: 1px dashed var(--muted);
    border-radius: 2px;
    color: var(--text);
    box-shadow: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
}
.fp-element-text::before { content: ''; }
.fp-element-text:hover { box-shadow: 0 0 0 2px var(--gold-soft); }

.fp-handle {
    position: absolute;
    width: 12px; height: 12px;
    background: var(--gold);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.fp-handle-resize { right: -8px; bottom: -8px; cursor: nwse-resize; }
.fp-handle-rotate { left: 50%; top: -18px; transform: translateX(-50%); cursor: grab; }

.fp-properties {
    width: 260px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--shadow-xs);
}
.fp-properties label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.fp-properties input {
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-xs);
    font-size: 0.9rem;
    color: var(--text);
}


/* ============================================================
   23  ANIMATIONS
   ============================================================ */
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(110%); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 146, 74, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(184, 146, 74, 0); }
}

.fade-in   { animation: fade-in var(--t); }
.slide-up  { animation: slide-up var(--t); }


/* ============================================================
   24  RESPONSIVE
   ============================================================ */

/* Sidebar-Backdrop (nur Mobile) */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31, 27, 20, 0.55);
    z-index: 95;
    transition: opacity var(--t);
    opacity: 0;
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.open {
    display: block;
    opacity: 1;
}

/* ≤ 1200px – kompakteres Content-Padding */
@media (max-width: 1200px) {
    :root { --content-pad: 32px; }
    .topbar { padding: 1.1rem 2rem; }
}

/* ≤ 1024px – Dashboard 2-Spalten-Grid umbrechen */
@media (max-width: 1024px) {
    .responsive-grid { grid-template-columns: 1fr !important; }
}

/* ≤ 900px – Sidebar wird zum Drawer */
@media (max-width: 900px) {
    :root { --content-pad: 20px; --topbar-h: 64px; }

    .sidebar {
        width: var(--nav-w-mobile);
        transform: translateX(-100%);
        transition: transform var(--t);
        z-index: 200;
        box-shadow: var(--shadow-xl);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    .main-content { margin-left: 0; }

    .topbar {
        padding: 0.9rem 1.1rem;
        gap: 0.75rem;
    }
    .topbar .page-title { font-size: 1.3rem; }
    .topbar .page-title small { font-size: 0.65rem; }

    .hamburger { display: inline-flex; }

    .form-row, .form-row-3 { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
    .stat-card { padding: 1.25rem; }
    .stat-value { font-size: 2rem; }

    .card-header { padding: 1rem 1.25rem; }
    .card-body { padding: 1.25rem; }
    .card-footer { padding: 0.85rem 1.25rem; }

    .modal {
        margin: 0;
        padding: 1.5rem;
        max-height: calc(100vh - 2rem);
        border-radius: var(--radius);
    }
    .modal-title { font-size: 1.4rem; }

    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-link { padding: 0.7rem 1rem; font-size: 0.8rem; }

    .toast-container {
        left: 1rem;
        right: 1rem;
        top: 1rem;
        max-width: none;
    }
    .empty-state { padding: 3rem 1rem; }
    .empty-state .empty-icon { font-size: 3.5rem; }

    .fp-workspace { flex-direction: column; }
    .fp-palette, .fp-properties { width: 100%; }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    /* Mobile Touch-Targets: mindestens 44x44px fuer bessere Bedienbarkeit */
    .btn-sm, .btn-icon { min-height: 44px; min-width: 44px; }
}

/* ≥ 901px – Drawer-Elemente verstecken */
@media (min-width: 901px) {
    .hamburger { display: none !important; }
    .sidebar-backdrop { display: none !important; }
}

/* ≤ 600px */
@media (max-width: 600px) {
    :root { --content-pad: 16px; }
    .stats-grid { grid-template-columns: 1fr; }
    .topbar {
        padding: 0.75rem 1rem;
    }
    .topbar .page-title { font-size: 1.15rem; }
    .content, main { padding: 1rem; }
    .wizard-panel { padding: 1.25rem; }
    .login-box { padding: 2rem 1.5rem; }
    .login-logo .logo-main { font-size: 2.1rem; }
}

/* ≤ 400px – sehr kleine Geräte */
@media (max-width: 400px) {
    :root { --content-pad: 12px; }
    .card-body { padding: 1rem; }
    .card-header { padding: 0.85rem 1rem; }
    .modal { padding: 1.15rem; }
    .stat-value { font-size: 1.75rem; }
    .btn { padding: 0.6rem 1rem; font-size: 0.82rem; }
    .btn-sm { padding: 0.38rem 0.75rem; }
    h1 { font-size: 1.75rem; }
    .page-title { font-size: 1.1rem; }
}


/* ============================================================
   24b  ADMIN PANEL — Sidebar-Theme, Banner & KPI-Karten
   ============================================================ */

/* ── Admin-Sidebar ──────────────────────────────────────────
   Baut auf der Standard-Sidebar auf (bereits charcoal).
   Der Admin-Mode betont Unterschied durch:
   - Tieferes, fast schwarzes Gradient
   - Gold-Akzentleiste oben
   - „PLATFORM ADMIN"-Badge über dem Logo
   - Goldene Logo-Sub-Schrift
   Farben hier dürfen konkret sein (Theme-Override). */
.sidebar.sidebar-admin {
    background: linear-gradient(180deg, #17130C 0%, #1F1B14 100%);
    border-right: 1px solid rgba(184, 146, 74, 0.22);
    box-shadow: inset 0 3px 0 0 #B8924A, 4px 0 24px rgba(0, 0, 0, 0.35);
}
.sidebar.sidebar-admin .sidebar-logo {
    border-bottom-color: rgba(184, 146, 74, 0.22);
    padding-top: 1.1rem;
}
.sidebar.sidebar-admin .sidebar-logo .logo-sub {
    color: #D4B479;
    letter-spacing: 0.18em;
    font-weight: 600;
}
.sidebar.sidebar-admin .nav-section-label {
    color: rgba(212, 180, 121, 0.55);
}
.sidebar.sidebar-admin .nav-link:hover {
    background: rgba(184, 146, 74, 0.10);
}
.sidebar.sidebar-admin .nav-link.active {
    background: rgba(184, 146, 74, 0.18);
    color: #F5E6C0;
    border-left-color: #D4B479;
}
.sidebar.sidebar-admin .sidebar-footer {
    border-top-color: rgba(184, 146, 74, 0.22);
}
.sidebar.sidebar-admin .user-chip:hover {
    background: rgba(184, 146, 74, 0.10);
}

/* „PLATFORM ADMIN"-Badge über dem Logo */
.platform-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    padding: 0.28rem 0.7rem;
    background: linear-gradient(135deg, #B8924A 0%, #9A7A3C 100%);
    color: #17130C;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(184, 146, 74, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-admin-badge::before {
    content: "⚿";
    font-size: 0.75rem;
    line-height: 1;
}

/* ── „Zurück zum Admin-Panel"-Banner (Tenant-Mode für Platform-Admins) ── */
.admin-tenant-banner {
    position: sticky;
    top: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dk) 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.admin-tenant-banner .atb-icon {
    font-size: 0.95rem;
    opacity: 0.9;
}
.admin-tenant-banner strong {
    font-family: var(--serif);
    font-weight: 600;
    font-style: italic;
    font-size: 1rem;
    color: #fff;
}
.admin-tenant-banner .atb-back {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.admin-tenant-banner .atb-back:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
    transform: translateY(-1px);
}

/* ── Admin-Dashboard KPI-Karten ──────────────────────────────
   Baut auf .stat-card auf und fügt goldene Akzente hinzu. */
.admin-stat-card {
    background: linear-gradient(180deg, var(--card) 0%, var(--cream) 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #17130C 0%, var(--gold) 60%, var(--gold-lt) 100%);
}
.admin-stat-card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
    pointer-events: none;
}
.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--gold-lt);
}
.admin-stat-card .stat-value {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.admin-stat-card .stat-label {
    font-size: 0.68rem;
    color: var(--gold-dk);
    margin-top: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.admin-stat-card .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
    color: var(--gold);
    opacity: 0.9;
}

/* ── Admin-Restaurant-Tabellen-Zeilen ──────────────────────── */
.admin-restaurant-row {
    transition: background var(--t-fast);
}
.admin-restaurant-row:hover {
    background: var(--cream-deep);
}
.admin-restaurant-row td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft);
}
.admin-restaurant-row .rest-name {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
}
.admin-restaurant-row .rest-slug {
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Login: dezenter Plattform-Hinweis */
.login-platform-hint {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed #EADFC0;
    text-align: center;
    font-size: 0.7rem;
    color: #8B7A5E;
    letter-spacing: 0.06em;
    line-height: 1.5;
}
.login-platform-hint strong {
    color: #7A5E20;
    font-weight: 600;
}


/* ============================================================
   24c  GLOBAL FOCUS-VISIBLE (Accessibility)
   ============================================================ */
/* Tastatur-Navigation: goldene Outline nur bei echten Keyboard-Fokus
   (Mouse-Klicks triggern kein :focus-visible). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}
/* `.btn` hat eigenen Focus-Ring via box-shadow — Outline dort vermeiden. */
.btn:focus-visible { outline: none; }

/* ── Admin-Sidebar im Mobile-Drawer ──────────────────────────
   Der Drawer (max-width: 900px) schiebt `.sidebar` per translateX.
   Durch die höhere Spezifität von `.sidebar.sidebar-admin` bleibt
   der Charcoal-Gradient automatisch erhalten — wir forcieren aber
   das Box-Shadow und einen dunkleren Backdrop explizit, damit der
   Drawer-Schatten sich auf dunklem BG noch absetzt. */
@media (max-width: 900px) {
    .sidebar.sidebar-admin {
        box-shadow: inset 0 3px 0 0 #B8924A,
                    8px 0 32px rgba(0, 0, 0, 0.55);
    }
    /* Backdrop im Admin-Modus tiefer tönen.
       Nutzt :has()-Selector (Chromium/Safari/FF ≥ 121), fällt sonst
       auf den Standard-Backdrop zurück — keine Regression. */
    .app-layout:has(.sidebar.sidebar-admin) .sidebar-backdrop {
        background: rgba(10, 8, 4, 0.72);
    }
}


/* ============================================================
   25  PRINT
   ============================================================ */
@media print {
    @page { size: A4; margin: 1.5cm; }

    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    body { background: #fff !important; color: #000; font-size: 11pt; }

    .sidebar,
    .sidebar-backdrop,
    .topbar,
    .hamburger,
    .toast-container,
    .modal-overlay,
    .fp-palette,
    .fp-properties,
    .fp-topbar,
    .fp-handle,
    .wizard-nav,
    .btn,
    .upload-zone,
    .admin-tenant-banner,
    .platform-admin-badge,
    .flash-message,
    .confirm-overlay,
    .breadcrumbs {
        display: none !important;
    }

    .main-content { margin-left: 0 !important; }
    .content, main { padding: 0 !important; max-width: none !important; }
    .app-layout { display: block !important; }

    .card,
    .stat-card,
    .wizard-panel {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    /* Floor-plan print */
    @page { size: A4 landscape; margin: 1cm; }
    .fp-canvas-wrap { border: none; overflow: visible; }
    .floor-plan-editor { display: block; }
    .fp-element.selected { outline: none; }

    a { color: #000; text-decoration: none; }
    h1, h2, h3 { page-break-after: avoid; }
    tr, .step-card { page-break-inside: avoid; }

    /* ── Floor-Plan Elements: monochrom & druckfreundlich ────────
       Alle dekorativen Gradients/Pattern/Schatten entfernen, damit
       Elemente auf Papier klar lesbar sind. Border-Radius bleibt
       erhalten (runde Tische bleiben rund). */
    .fp-element,
    .fp-element-table_round,
    .fp-element-table_rect,
    .fp-element-bar,
    .fp-element-dj,
    .fp-element-stage,
    .fp-element-dancefloor,
    .fp-element-entrance,
    .fp-element-buffet,
    .fp-element-text {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        font-family: 'Jost', system-ui, sans-serif !important;
        font-style: normal !important;
        font-weight: 600 !important;
    }
    .fp-element-table_round { border-radius: 50% !important; }
    .fp-element-table_rect { border-radius: 6px !important; }
    .fp-element-text {
        border: 1px dashed #000 !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
    }

    /* Icon (::before): schwarz, dezent aber sichtbar */
    .fp-element::before {
        color: #000 !important;
        opacity: 0.5 !important;
        text-shadow: none !important;
    }

    /* Label: schwarz, vollständig lesbar */
    .fp-element .fp-label {
        color: #000 !important;
        text-shadow: none !important;
        font-weight: 600 !important;
    }

    /* Seats-Badge: weißer Kreis mit schwarzem Border statt Gold */
    .fp-element .fp-seats {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
        font-weight: 700 !important;
    }

    /* Zusätzlicher Typ-Titel per ::after — hilft bei S/W-Druck,
       da Icons allein schwer unterscheidbar sind. Wird klein unter
       das Label gesetzt und nimmt keinen Element-Fokus weg. */
    .fp-element-bar::after,
    .fp-element-dj::after,
    .fp-element-stage::after,
    .fp-element-dancefloor::after,
    .fp-element-entrance::after,
    .fp-element-buffet::after {
        position: absolute;
        z-index: 1;
        bottom: 3px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #000;
        opacity: 0.65;
        pointer-events: none;
    }
    .fp-element-bar::after        { content: 'BAR'; }
    .fp-element-dj::after         { content: 'DJ'; }
    .fp-element-stage::after      { content: 'BÜHNE'; }
    .fp-element-dancefloor::after { content: 'TANZFLÄCHE'; }
    .fp-element-entrance::after   { content: 'EINGANG'; }
    .fp-element-buffet::after     { content: 'BUFFET'; }
}


/* ============================================================
   26  LOADING SKELETONS
   ============================================================
   Dezente Shimmer-Placeholder für First-Load-Feedback.
   Verwendung: `<div class="skeleton skeleton-card"></div>` oder
   auf bestehenden Elementen die Klasse `.skeleton` hinzufügen,
   bis Content bereit ist. Text im Element wird unsichtbar. */
.skeleton {
    background: linear-gradient(90deg,
        var(--cream-deep) 0%,
        var(--card) 50%,
        var(--cream-deep) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    min-height: 1em;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.skeleton * { visibility: hidden; }
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text    { height: 1em; border-radius: 4px; }
.skeleton-text-lg { height: 1.6em; border-radius: 4px; }
.skeleton-card    { min-height: 120px; border-radius: 10px; }
.skeleton-avatar  { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-line    { height: 0.75em; border-radius: 3px; margin: .35em 0; }

/* KPI-Karten Skeleton (fuer AJAX-Nachladen) */
.kpi-skeleton {
    background: linear-gradient(90deg, var(--cream-deep) 25%, var(--cream) 50%, var(--cream-deep) 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius);
    min-height: 100px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.kpi-skeleton .stat-value,
.kpi-skeleton .stat-label,
.kpi-skeleton .stat-icon { visibility: hidden; }


/* ============================================================
   27  ACCESSIBILITY — Focus-Visible für Nav/Tabs/Palette
   ============================================================
   Tastatur-User müssen sehen, wo sie sind. Die globalen
   :focus-visible-Rules decken `a/button/[tabindex]` ab — hier
   spezifisch sichtbare Ringe für interaktive Komponenten, die
   sonst von eigenen Backgrounds überlagert werden. */
.nav-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    background: var(--nav-hover);
    color: var(--inverse);
}
.tab-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}
.fp-palette-item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(184, 146, 74, 0.18);
}
.card[role="button"]:focus-visible,
.card[onclick]:focus-visible,
.stat-card[onclick]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(184, 146, 74, 0.15);
}

/* ── Reduced-Motion: System-Präferenz respektieren ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Windows High-Contrast / Forced-Colors ─────────────────── */
@media (forced-colors: active) {
    .btn,
    .card,
    .stat-card,
    .fp-element,
    .fp-palette-item {
        border: 1px solid CanvasText;
    }
    .nav-link.active {
        border-left-color: Highlight;
    }
    .btn:focus-visible,
    a:focus-visible,
    button:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}


/* ============================================================
   28  ADMIN-PANEL UI-ERWEITERUNGEN
   ============================================================ */

/* ── Admin KPI-Cards (modernisiert) ────────────────────────── */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.admin-kpi-card {
    background: linear-gradient(180deg, var(--card) 0%, var(--cream) 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.75rem 1.6rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.admin-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 100%);
}
.admin-kpi-card::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    pointer-events: none;
}
.admin-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--gold-lt);
}
.admin-kpi-card--primary::after { background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%); }
.admin-kpi-card--success::after { background: radial-gradient(circle, rgba(22, 163, 74, 0.1) 0%, transparent 70%); }
.admin-kpi-card--warning::after { background: radial-gradient(circle, rgba(217, 119, 6, 0.1) 0%, transparent 70%); }
.admin-kpi-card--danger::after  { background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, transparent 70%); }
.admin-kpi-card--primary::before { background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%); }
.admin-kpi-card--success::before { background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%); }
.admin-kpi-card--warning::before { background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%); }
.admin-kpi-card--danger::before  { background: linear-gradient(90deg, #dc2626 0%, #f87171 100%); }

.admin-kpi-icon {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
    line-height: 1;
}
.admin-kpi-card--primary .admin-kpi-icon { color: #2563eb; }
.admin-kpi-card--success .admin-kpi-icon { color: #16a34a; }
.admin-kpi-card--warning .admin-kpi-icon { color: #d97706; }
.admin-kpi-card--danger .admin-kpi-icon  { color: #dc2626; }

.admin-kpi-value {
    font-family: var(--serif);
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.admin-kpi-label {
    font-size: 0.68rem;
    color: var(--gold-dk);
    margin-top: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.admin-kpi-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.35rem;
    font-style: italic;
}

/* ── Admin Quick-Actions ───────────────────────────────────── */
.admin-quick-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.admin-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.25rem;
    background: var(--card);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: all var(--t-fast);
    cursor: pointer;
}
.admin-quick-action:hover {
    border-color: var(--gold);
    color: var(--gold-dk);
    background: var(--cream);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 146, 74, 0.15);
}
.admin-quick-action .qa-icon {
    font-size: 1.15rem;
    opacity: 0.85;
}

/* ── System-Status Grid ────────────────────────────────────── */
.sys-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.35rem 0.9rem;
}
.sys-status-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.82rem;
}
.sys-status-item:last-child { border-bottom: none; }
.sys-status-label { color: var(--muted); }
.sys-status-value {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 500;
}
.sys-status-ok { color: #16a34a; }
.sys-status-warn { color: #d97706; }
.sys-status-err { color: #dc2626; }

/* ── Restaurant-Cards Grid ─────────────────────────────────── */
.restaurant-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.restaurant-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.65rem 1.5rem;
    position: relative;
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    display: flex;
    flex-direction: column;
}
.restaurant-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--gold-lt);
}
.restaurant-card--active {
    border: 2px solid var(--gold);
    box-shadow: 0 4px 18px rgba(184, 146, 74, 0.18);
}
.restaurant-card__badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--gold);
    color: #fff;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.restaurant-card__logo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.restaurant-card__logo--img {
    background: #fff;
    border: 1px solid var(--border);
    padding: 0.4rem;
}
.restaurant-card__logo--letter {
    background: linear-gradient(135deg, var(--gold), #8a6a32);
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
}
.restaurant-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    padding: 0.75rem;
    background: var(--warm);
    border-radius: var(--radius-sm);
}
.restaurant-card__stat {
    text-align: center;
}
.restaurant-card__stat-value {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}
.restaurant-card__stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* ── Admin-Detail Tabs ─────────────────────────────────────── */
.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 1.5rem;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-left: none;
    border-top: none;
    border-right: none;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
    color: var(--gold-dk);
    border-bottom-color: var(--gold);
    font-weight: 600;
}
.admin-tab__count {
    background: var(--border);
    color: var(--muted);
    border-radius: var(--radius-pill);
    padding: 0 8px;
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
    line-height: 1.6;
}
.admin-tab.active .admin-tab__count {
    background: var(--gold);
    color: #fff;
}
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

/* ── Toggle-Switch (Boolean-Einstellungen) ─────────────────── */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch__slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-strong);
    border-radius: 12px;
    transition: background var(--t-fast);
    flex-shrink: 0;
}
.toggle-switch__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--card);
    border-radius: 50%;
    transition: transform var(--t-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle-switch input:checked + .toggle-switch__slider {
    background: var(--gold);
}
.toggle-switch input:checked + .toggle-switch__slider::after {
    transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-switch__slider {
    box-shadow: var(--focus-ring);
}
.toggle-switch__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}
.toggle-switch__hint {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* ── Settings-Section ──────────────────────────────────────── */
.settings-section {
    margin-bottom: 2rem;
}
.settings-section__title {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.settings-section__desc {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}
.settings-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .settings-grid-2col { grid-template-columns: 1fr; }
}

/* ── Search & Filter Bar ───────────────────────────────────── */
.filter-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
}
.filter-bar__search {
    flex: 1;
    min-width: 220px;
    max-width: 300px;
}
.filter-bar__count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ── Status-Filter-Pills ───────────────────────────────────── */
.status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--t-fast);
    border: 1.5px solid var(--border-strong);
    background: var(--card);
    color: var(--text);
}
.status-pill:hover {
    border-color: var(--gold);
    color: var(--gold-dk);
}
.status-pill.active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}
.status-pill__count {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Event Cards ───────────────────────────────────────────── */
.event-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}
.event-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--t), box-shadow var(--t);
    overflow: hidden;
}
.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(43, 36, 24, 0.12);
}
.event-card__date {
    flex-shrink: 0;
    text-align: center;
    min-width: 64px;
    padding: 0.5rem 0.25rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.event-card__date-day {
    font-family: var(--serif);
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1;
}
.event-card__date-month {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.25rem;
}
.event-card__status-badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.event-card__footer {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.7rem 1.35rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.015);
}

/* ── Recipe Cards Grid ─────────────────────────────────────── */
.recipe-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.recipe-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(43, 36, 24, 0.14);
}
.recipe-card__cover {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(184, 146, 74, 0.08);
}
.recipe-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.recipe-card:hover .recipe-card__cover img {
    transform: scale(1.05);
}
.recipe-card__cover--placeholder {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(184, 146, 74, 0.14), rgba(184, 146, 74, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
}
.recipe-card__cover--placeholder .recipe-card__cover-icon {
    font-family: var(--serif);
    font-size: 3.5rem;
    color: var(--gold);
    opacity: 0.55;
}
.recipe-card__body {
    padding: 1.25rem 1.35rem 0.5rem;
    flex: 1;
}
.recipe-card__title {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.15;
}
.recipe-card__meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.recipe-card__tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
}
.recipe-card__tag {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
}
.recipe-card__tag--time {
    background: rgba(184, 146, 74, 0.1);
    color: var(--gold);
}
.recipe-card__tag--steps {
    background: rgba(0, 0, 0, 0.04);
    color: var(--muted);
}
.recipe-card__actions {
    display: flex;
    gap: 0.35rem;
    padding: 0.75rem 1.35rem 1rem;
    margin-top: auto;
}

/* ── Recipe Detail Hero ────────────────────────────────────── */
.recipe-hero {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.75rem;
}
.recipe-hero__image {
    position: relative;
}
.recipe-hero__image img {
    width: 100%;
    height: clamp(280px, 42vw, 460px);
    object-fit: cover;
    display: block;
}
.recipe-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 24, 16, 0) 45%, rgba(28, 24, 16, 0.85) 100%);
}
.recipe-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 2.75rem;
    color: #fff;
}

/* ── Recipe 2-Column Layout ────────────────────────────────── */
.recipe-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.75rem;
    align-items: start;
}
.recipe-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 900px) {
    .recipe-layout { grid-template-columns: 1fr; }
    .recipe-sidebar { position: static; }
}

/* ── Recipe Edit Allergen-Chips ─────────────────────────────── */
.allergen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0;
}
.allergen-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--card);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    user-select: none;
}
.allergen-chip:hover {
    border-color: var(--gold-lt);
    background: var(--cream);
}
.allergen-chip.selected {
    background: #FEF3C7;
    border-color: #F59E0B;
    color: #92400E;
}
.allergen-chip input[type="checkbox"] {
    display: none;
}

/* ── Page Hero (reusable) ──────────────────────────────────── */
.page-hero {
    margin: 0 0 2rem;
    padding: 1rem 0 0;
}
.page-hero__eyebrow {
    font-family: var(--serif);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 1rem;
}
.page-hero__title {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 0.9rem;
    color: var(--text);
    letter-spacing: -0.01em;
}
.page-hero__subtitle {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--muted);
    max-width: 640px;
}
.page-hero__divider {
    height: 1px;
    background: linear-gradient(to right, var(--gold) 0, var(--gold) 60px, var(--border) 60px, var(--border) 100%);
    margin-top: 1.75rem;
}

/* ── Sortable Table Headers ────────────────────────────────── */
th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast);
}
th.sortable:hover {
    color: var(--gold-dk);
}
th.sortable::after {
    content: ' ⇅';
    opacity: 0.4;
    font-size: 0.75em;
}
th.sortable.sort-asc::after {
    content: ' ↑';
    opacity: 0.8;
    color: var(--gold);
}
th.sortable.sort-desc::after {
    content: ' ↓';
    opacity: 0.8;
    color: var(--gold);
}

/* ── Timeline Style (Activity Log) ─────────────────────────── */
.activity-timeline {
    position: relative;
    padding-left: 2rem;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border);
}
.activity-timeline__item {
    position: relative;
    padding-bottom: 1.25rem;
}
.activity-timeline__item:last-child { padding-bottom: 0; }
.activity-timeline__dot {
    position: absolute;
    left: -1.55rem;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 2px var(--border);
}
.activity-timeline__time {
    font-size: 0.72rem;
    color: var(--muted);
    font-family: ui-monospace, monospace;
    margin-bottom: 0.2rem;
}
.activity-timeline__text {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
}

/* ── Responsive: Admin-KPI auf kleinen Screens ─────────────── */
@media (max-width: 900px) {
    .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
    .admin-kpi-value { font-size: 2rem; }
    .restaurant-cards-grid { grid-template-columns: 1fr; }
    .event-cards-grid { grid-template-columns: 1fr; }
    .recipe-cards-grid { grid-template-columns: 1fr; }
    .admin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-tab { padding: 0.7rem 1rem; font-size: 0.8rem; }
    .settings-grid-2col { grid-template-columns: 1fr; }
    .admin-quick-actions { flex-direction: column; }
    .admin-quick-action { width: 100%; }
}
@media (max-width: 600px) {
    .admin-kpi-grid { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar__search { max-width: none; }
    .filter-bar input[type="date"] { width: 100% !important; }
}

/* ── Bulk-Selection Toolbar ─────────────────────────────────── */
.bulk-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(251,248,242,.98), rgba(245,237,216,.95));
    backdrop-filter: blur(8px);
    border: 1px solid var(--gold-dk, #8a6a2d);
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 4px 14px rgba(184,146,74,.2);
    animation: bulk-slide-in 0.25s ease;
    transform-origin: top center;
}
@keyframes bulk-slide-in {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}
.bulk-bar-count {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--gold-dk, #8a6a2d);
}
.bulk-bar-count strong { font-size: 1.6rem; color: var(--text, #2b2418); }
.bulk-bar-actions { display: flex; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.bulk-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--gold, #b8924a);
}
tr.bulk-selected { background: rgba(245,237,216,.6) !important; }
.card.bulk-selected {
    box-shadow: 0 0 0 2px var(--gold, #b8924a), 0 12px 28px rgba(184,146,74,.22) !important;
}
.bulk-row-toggle { padding: 0 0.5rem; }
@media (max-width: 640px) {
    .bulk-bar { flex-direction: column; align-items: stretch; }
    .bulk-bar-actions { margin-left: 0; flex-direction: column; }
    .bulk-bar-actions .btn { width: 100%; }
}

/* ── Keyboard Shortcut Help Overlay ─────────────────────────── */
.shortcut-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31,27,20,.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: sh-fade-in 0.2s ease;
}
@keyframes sh-fade-in { from { opacity: 0; } to { opacity: 1; } }
.shortcut-help-overlay[hidden] { display: none; }
.shortcut-help-panel {
    background: var(--cream, #FBF8F2);
    border: 2px solid var(--gold, #b8924a);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 640px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.shortcut-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #e5d9c2);
}
.shortcut-help-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text, #2b2418);
}
.shortcut-help-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--muted, #8b8578);
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 50%;
    transition: background 0.15s;
}
.shortcut-help-close:hover { background: var(--cream-deep, #f5edd8); color: var(--text, #2b2418); }
.shortcut-help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.shortcut-section-title {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold, #b8924a);
    font-weight: 600;
    margin-bottom: 0.8rem;
}
.shortcut-section dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.88rem;
    margin: 0;
}
.shortcut-section dt { display: flex; gap: 0.25rem; align-items: center; margin: 0; }
.shortcut-section dd { color: var(--muted, #8b8578); margin: 0; }
kbd {
    display: inline-block;
    padding: 0.18rem 0.5rem;
    background: var(--card, #fff);
    border: 1px solid var(--border-strong, #c9b88f);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--text, #2b2418);
    font-weight: 600;
    min-width: 1.4rem;
    text-align: center;
}
@media (max-width: 640px) {
    .shortcut-help-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .shortcut-help-panel { padding: 1.5rem; }
}


/* ============================================================
   29  FLASH MESSAGES
   ============================================================
   Fixierte Banner oben, pro Typ gefärbt. Slide-in von oben,
   auto-fadeout nach 5s via CSS-Animation. Close-Button rechts. */
.flash-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    animation: flash-slide-in 0.35s ease, flash-fade-out 0.5s ease 4.5s forwards;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.flash-message .flash-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--t-fast);
    line-height: 1;
    padding: 0 0.25rem;
    color: inherit;
}
.flash-message .flash-close:hover { opacity: 1; }
.flash-message .flash-icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
}

.flash-success {
    background: var(--sage-soft);
    color: #2F4728;
    border-bottom: 3px solid var(--sage);
}
.flash-error {
    background: var(--burgundy-soft);
    color: #5C1825;
    border-bottom: 3px solid var(--burgundy);
}
.flash-warning {
    background: var(--amber-soft);
    color: #5C4408;
    border-bottom: 3px solid var(--amber);
}
.flash-info {
    background: var(--ink-blue-soft);
    color: #1A2E44;
    border-bottom: 3px solid var(--ink-blue);
}

@keyframes flash-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes flash-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-100%); }
}


/* ============================================================
   30  CONFIRM MODAL
   ============================================================
   Wiederverwendbarer Bestaetigungsdialog als Ersatz fuer
   native confirm()-Dialoge. */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 27, 20, 0.5);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1.5rem;
    animation: fade-in var(--t);
}
.confirm-box {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 440px;
    padding: 2rem 2.25rem;
    animation: modal-in var(--t);
}
.confirm-title {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}
.confirm-text {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .confirm-box { padding: 1.5rem; max-width: none; }
    .confirm-actions { flex-direction: column-reverse; }
    .confirm-actions .btn { width: 100%; }
}


/* ============================================================
   31  BREADCRUMBS
   ============================================================ */
.breadcrumbs {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 8px 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.6;
}
.breadcrumbs a {
    color: var(--gold-dk);
    text-decoration: none;
    transition: color var(--t-fast);
}
.breadcrumbs a:hover {
    color: var(--gold);
    text-decoration: underline;
}
.breadcrumb-sep {
    margin: 0 6px;
    color: var(--border-strong);
    font-size: 0.9rem;
}
.breadcrumb-current {
    color: var(--text);
    font-weight: 500;
}


/* ============================================================
   32  PAGINATION
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.pagination__info {
    font-size: 0.82rem;
    color: var(--muted);
}
.pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    border: 1.5px solid var(--border-strong);
    text-decoration: none;
    white-space: nowrap;
    background: var(--card);
    color: var(--text);
}
.pagination__btn:hover {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--gold-dk);
}
.pagination__btn:disabled,
.pagination__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--cream-deep);
}


/* ============================================================
   33  STATUS-BADGES (einheitlich)
   ============================================================
   Werden von statusBadge() als CSS-Klassen referenziert. */
.status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}
.status-badge--anfrage {
    background: #DBEAFE;
    color: #1D4ED8;
}
.status-badge--planung {
    background: #FEF3C7;
    color: #B45309;
}
.status-badge--bestaetigt {
    background: #D1FAE5;
    color: #065F46;
}
.status-badge--abgeschlossen {
    background: #F3F4F6;
    color: #374151;
}
.status-badge--storniert {
    background: #FEE2E2;
    color: #991B1B;
}


/* ============================================================
   34  REQUIRED-FELD-MARKIERUNG
   ============================================================ */
label.required::after {
    content: ' *';
    color: var(--burgundy);
    font-weight: 700;
}


/* ============================================================
   35  ALLERGEN-INPUT (Chip-Editor)
   ============================================================ */
.allergen-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    min-height: 42px;
    align-items: center;
    background: var(--card);
    cursor: text;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.allergen-input-wrapper:focus-within {
    border-color: var(--gold);
    box-shadow: var(--focus-ring);
}
.allergen-input-chip {
    background: var(--amber-soft);
    color: #92400E;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.5;
    animation: fade-in var(--t-fast);
}
.allergen-input-chip__remove {
    cursor: pointer;
    font-weight: bold;
    opacity: 0.6;
    transition: opacity var(--t-fast);
    font-size: 0.9rem;
    line-height: 1;
}
.allergen-input-chip__remove:hover { opacity: 1; }
.allergen-input-field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
    font-size: 0.88rem;
    flex: 1;
    min-width: 100px;
    background: transparent !important;
}


/* ============================================================
   36  UPLOAD-VORSCHAU
   ============================================================ */
.upload-preview {
    display: none;
    max-width: 260px;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-top: 0.5rem;
}


/* Sektion 37 entfernt: Ungenutzte BEM- und Bindestrich-Varianten
   der Empty-State-Klassen. Alle Templates nutzen .empty-state .empty-icon etc.
   (definiert in Sektion 14). */


/* ============================================================
   38  RESPONSIVE TABELLEN (Card-Layout auf Mobile)
   ============================================================ */
@media (max-width: 600px) {
    .responsive-table thead { display: none; }
    .responsive-table tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 12px;
        background: var(--card);
    }
    .responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none;
    }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
        margin-right: 1rem;
    }
    .responsive-table td:last-child { padding-bottom: 0; }

    /* Tabs: scrollbar auf Mobile verstecken */
    .tabs::-webkit-scrollbar { display: none; }
    .tabs { scrollbar-width: none; }
}

/* ── v26: Allergen-Filter Badges ─────────────────────────── */
.allergen-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 500;
  background: rgba(153, 27, 27, .08);
  color: #991B1B;
  border: 1px solid rgba(153, 27, 27, .15);
}

/* ── v26: Search result counts ───────────────────────────── */
.search-show-all {
  padding: .75rem 1.4rem;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,.05);
}
.search-show-all a {
  font-size: .82rem;
  color: var(--gold, #B8924A);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .02em;
}
.search-show-all a:hover {
  text-decoration: underline;
}

/* ── v26: Client notes preview ───────────────────────────── */
.client-notes-preview {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(0,0,0,.04);
  font-size: .76rem;
  color: var(--muted, #6B5F4F);
  line-height: 1.45;
  font-style: italic;
}

/* ── v26: Offer discount row ─────────────────────────────── */
.totals-row.discount {
  color: var(--gold, #B8924A);
  font-weight: 500;
}

/* ── v26: Trend-Indikatoren (Stats KPIs) ─────────────────── */
.trend-up {
  color: #10B981;
  font-size: .78rem;
  font-weight: 600;
  margin-top: .5rem;
}
.trend-down {
  color: #EF4444;
  font-size: .78rem;
  font-weight: 600;
  margin-top: .5rem;
}
.trend-neutral {
  color: var(--muted, #6B5F4F);
  font-size: .78rem;
  font-weight: 500;
  margin-top: .5rem;
}

/* ── v28: Payment/Finance Styles ─────────────────────────── */
.payment-progress {
  background: var(--warm, #FBF8F2);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
.payment-progress-bar {
  background: linear-gradient(90deg, #10B981, #059669);
  height: 100%;
  border-radius: 4px;
  transition: width .3s;
}
.payment-overdue {
  background: rgba(220, 38, 38, .05);
}
.service-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(29, 78, 216, .08);
  color: #1D4ED8;
  border: 1px solid rgba(29, 78, 216, .15);
}

/* ── Screen-Reader Only (Accessibility) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Task-Group Rows ──────────────────────────────────────── */
.task-group-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    transition: background var(--t-fast);
}
.task-group-row:hover,
.task-group-row:focus-visible {
    background: var(--warm);
}
.task-group-row + .task-group-row {
    border-top: 1px solid var(--border);
}

/* ── Section Eyebrow & Heading ────────────────────────────── */
.section-eyebrow {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: .25rem;
}
.section-heading {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: -.01em;
}

/* ── Page Header Editorial ────────────────────────────────── */
.page-header-editorial {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.page-header-editorial__title {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--text);
}

/* ============================================================
   DARK MODE (Vorbereitung)
   Aktivieren: data-theme="dark" auf <html> setzen
   ============================================================ */
/*
[data-theme="dark"] {
    --cream:         #1a1714;
    --cream-deep:    #211e18;
    --warm:          #2a261e;
    --card:          #242018;
    --border:        #3a3428;
    --border-soft:   #2e2a22;
    --border-strong: #4a4238;
    --text:          #f0ece4;
    --text-2:        #e0dcd4;
    --muted:         #9a8e80;
    --muted-2:       #807468;
    --inverse:       #1a1714;
    --nav-bg:        #111;
    --nav-bg-2:      #161412;
}
*/