/**
 * Flavor Theme - Minimalist Dark Theme
 * Mit CSS-Variablen für Theme Editor
 */

/* ============================================
   Local Font Loading (keine CDNs!)
   ============================================ */

/* Inter - Variable Font (100-900) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    src: url('/assets/fonts/Inter/inter-variable.woff2') format('woff2-variations');
    font-display: swap;
}

/* Poppins - Alle Gewichte */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/Poppins/poppins-100.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('/assets/fonts/Poppins/poppins-200.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/Poppins/poppins-300.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Poppins/poppins-v20-latin-ext_latin_devanagari-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/Poppins/poppins-500.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/Poppins/poppins-600.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Poppins/poppins-v20-latin-ext_latin_devanagari-700.woff2') format('woff2');
    font-display: swap;
}

/* Roboto - Alle Gewichte */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/Roboto/roboto-100.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/Roboto/roboto-300.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Roboto/roboto-400.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/Roboto/roboto-500.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Roboto/roboto-700.woff2') format('woff2');
    font-display: swap;
}

/* Lato - Alle Gewichte */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/Lato/lato-100.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/Lato/lato-300.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Lato/lato-400.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Lato/lato-700.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: url('/assets/fonts/Lato/lato-900.woff2') format('woff2');
    font-display: swap;
}

/* Open Sans */
@font-face { font-family: 'Open Sans'; font-weight: 400; src: url('/assets/fonts/OpenSans/opensans-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-weight: 600; src: url('/assets/fonts/OpenSans/opensans-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-weight: 700; src: url('/assets/fonts/OpenSans/opensans-700.woff2') format('woff2'); font-display: swap; }

/* Nunito */
@font-face { font-family: 'Nunito'; font-weight: 200; src: url('/assets/fonts/Nunito/nunito-200.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 300; src: url('/assets/fonts/Nunito/nunito-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 400; src: url('/assets/fonts/Nunito/nunito-400.woff2') format('woff2'); font-display: swap; }

/* ============================================
   CSS Variables (Theme Editor)
   ============================================ */
:root {
    /* Layout */
    --flavor-header-height: 64px;
    --flavor-container-width: 1200px;
    --flavor-logo-height: 48px;
    --flavor-border-radius: 6px;
    --flavor-menu-gap: 2rem;
    --flavor-content-padding: 1rem;
    --flavor-content-padding-md: 1.5rem;
    --flavor-content-padding-lg: 2rem;

    /* Farben - Hintergrund */
    --flavor-bg-body: #000;
    --flavor-bg-header: #0a0a0a;
    --flavor-bg-dropdown: #18181b;
    --flavor-bg-hover: #1a1a1a;
    --flavor-bg-submenu: #111;
    --flavor-bg-footer: #0a0a0a;

    /* Farben - Text */
    --flavor-text-primary: #e4e4e7;
    --flavor-text-secondary: #a1a1aa;
    --flavor-text-muted: #71717a;
    --flavor-text-footer: #52525b;
    --flavor-text-heading: #ffffff;
    --flavor-text-link: #e4e4e7;
    --flavor-text-link-hover: #ffffff;

    /* Farben - Menü */
    --flavor-menu-text: #a1a1aa;
    --flavor-menu-hover: #ffffff;
    --flavor-menu-active: #ffffff;

    /* Farben - Slider */
    --flavor-slider-title: #ffffff;
    --flavor-slider-text: #a1a1aa;
    --flavor-slider-overlay: #000000;

    /* Farben - Statistik */
    --flavor-stats-text: #ffffff;
    --flavor-stats-number: #ffffff;

    /* Farben - Buttons Primary */
    --flavor-btn-primary-bg: #fff;
    --flavor-btn-primary-text: #000;
    --flavor-btn-primary-hover: #e4e4e7;

    /* Farben - Buttons Secondary */
    --flavor-btn-secondary-bg: #1a1a1a;
    --flavor-btn-secondary-text: #ffffff;
    --flavor-btn-secondary-hover: #3f3f46;
    --flavor-btn-secondary-border: #3f3f46;
    --flavor-btn-secondary-3d-shadow: #27272a;

    /* Button-Style spezifische Farben */
    --flavor-btn-gradient-start: #667eea;
    --flavor-btn-gradient-end: #764ba2;
    --flavor-btn-glow-color: #3b82f6;
    --flavor-btn-3d-shadow: #999999;

    /* Farben - Sonstige */
    --flavor-border-color: #1a1a1a;
    --flavor-border-light: #27272a;
    --flavor-danger: #ef4444;
    --flavor-danger-hover: #f87171;

    /* Typografie - Body */
    --flavor-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --flavor-font-weight: 400;

    /* Typografie - Überschriften */
    --flavor-heading-font-family: 'Poppins', sans-serif;
    --flavor-heading-font-weight: 300;

    /* Typografie - Slider */
    --flavor-slider-font-family: 'Poppins', sans-serif;
    --flavor-slider-title-weight: 200;
    --flavor-slider-desc-weight: 300;

    /* Transitions */
    --flavor-transition: 0.15s ease;
}

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

html, body {
    height: 100%;
}

.flavor-theme {
    background-color: var(--flavor-bg-body);
    color: var(--flavor-text-primary);
    font-family: var(--flavor-font-family);
    font-weight: var(--flavor-font-weight, 400);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typografie - Überschriften (Basis) */
.flavor-theme h1,
.flavor-theme h2,
.flavor-theme h3,
.flavor-theme h4,
.flavor-theme h5,
.flavor-theme h6 {
    font-family: var(--flavor-heading-font-family);
    color: var(--flavor-text-heading);
}

/* Separate Font Weights für H1-H6 */
.flavor-theme h1, h1, .h1 { font-weight: var(--flavor-h1-font-weight, 100); }
.flavor-theme h2, h2, .h2 { font-weight: var(--flavor-h2-font-weight, 300); }
.flavor-theme h3, h3, .h3 { font-weight: var(--flavor-h3-font-weight, 400); }
.flavor-theme h4, h4, .h4 { font-weight: var(--flavor-h4-font-weight, 500); }
.flavor-theme h5, h5, .h5 { font-weight: var(--flavor-h5-font-weight, 600); }
.flavor-theme h6, h6, .h6 { font-weight: var(--flavor-h6-font-weight, 600); }

/* Typografie - Links */
.flavor-theme a {
    color: var(--flavor-text-link);
    text-decoration: none;
    transition: color var(--flavor-transition);
}

.flavor-theme a:hover {
    color: var(--flavor-text-link-hover);
}

/* ============================================
   Flowbite Utility Classes
   ============================================ */
.hidden {
    display: none !important;
}

.flex {
    display: flex !important;
}

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

/* Responsive Utilities (md = 768px) */
@media (min-width: 768px) {
    .md\:flex {
        display: flex !important;
    }
    .md\:hidden {
        display: none !important;
    }
    .md\:block {
        display: block !important;
    }
}

/* ============================================
   Container
   ============================================ */
.container {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Header
   ============================================ */
.flavor-header {
    background-color: var(--flavor-bg-header);
    border-bottom: 1px solid var(--flavor-border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.flavor-nav {
    max-width: var(--flavor-container-width);
    margin: 0 auto;
    padding: 0 var(--flavor-content-padding);
}

@media (min-width: 768px) {
    .flavor-nav {
        padding: 0 var(--flavor-content-padding-md);
    }
}

@media (min-width: 1400px) {
    .flavor-nav {
        padding: 0 var(--flavor-content-padding-lg);
    }
}

.flavor-nav-inner {
    display: flex;
    align-items: center;
    height: var(--flavor-header-height);
    gap: 1rem;
}

/* ============================================
   Logo
   ============================================ */
.flavor-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.flavor-logo img {
    height: var(--flavor-logo-height);
    width: auto;
}

.flavor-logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--flavor-text-heading);
    letter-spacing: -0.02em;
}

/* ============================================
   Desktop Navigation
   ============================================ */
.flavor-menu {
    display: none;
    align-items: center;
    gap: var(--flavor-menu-gap, 2rem);
    flex: 1;
    justify-content: flex-start;
    padding-left: 2rem;
}

@media (min-width: 1024px) {
    .flavor-menu {
        display: flex;
    }
}

/* Menu Alignment (muss nach .flavor-menu Definition kommen) */
.flavor-menu-left .flavor-menu {
    justify-content: flex-start;
}

.flavor-menu-center .flavor-menu {
    justify-content: center;
    padding-left: 0;
}

.flavor-menu-right .flavor-menu {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 2rem;
}

/* Page Width Layout - Full Width */
.flavor-layout-fullwidth .flavor-nav,
.flavor-layout-fullwidth .flavor-main,
.flavor-layout-fullwidth .flavor-footer-inner,
.flavor-layout-fullwidth .flavor-section,
.flavor-layout-fullwidth .flavor-content,
.flavor-layout-fullwidth .container,
.flavor-layout-fullwidth .flavor-welcome-grid,
.flavor-layout-fullwidth .flavor-block .container {
    max-width: 100% !important;
    padding-left: var(--flavor-content-padding);
    padding-right: var(--flavor-content-padding);
}

@media (min-width: 768px) {
    .flavor-layout-fullwidth .flavor-nav,
    .flavor-layout-fullwidth .flavor-main,
    .flavor-layout-fullwidth .flavor-footer-inner,
    .flavor-layout-fullwidth .container,
    .flavor-layout-fullwidth .flavor-welcome-grid,
    .flavor-layout-fullwidth .flavor-block .container {
        padding-left: var(--flavor-content-padding-md);
        padding-right: var(--flavor-content-padding-md);
    }
}

@media (min-width: 1400px) {
    .flavor-layout-fullwidth .flavor-nav,
    .flavor-layout-fullwidth .flavor-main,
    .flavor-layout-fullwidth .flavor-footer-inner,
    .flavor-layout-fullwidth .container,
    .flavor-layout-fullwidth .flavor-welcome-grid,
    .flavor-layout-fullwidth .flavor-block .container {
        padding-left: var(--flavor-content-padding-lg);
        padding-right: var(--flavor-content-padding-lg);
    }
}

.flavor-menu-item {
    color: var(--flavor-menu-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color var(--flavor-transition);
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1.25;
}

/* Button-Dropdown gleiche Höhe wie Links */
button.flavor-menu-item {
    line-height: 1.25;
    font-family: inherit;
}

.flavor-menu-item:hover {
    color: var(--flavor-menu-hover);
}

.flavor-menu-item.active {
    color: var(--flavor-menu-active);
}

.flavor-menu-dropdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ============================================
   Menu Item Styles
   ============================================ */

/* CSS Variables for Menu Styles */
:root {
    --flavor-menu-underline-color: #ffffff;
    --flavor-menu-pill-bg: #27272a;
    --flavor-menu-glow-color: #3b82f6;
}

/* Minimal (Default) - nur Farbwechsel */
.flavor-menu-style-minimal .flavor-menu-item {
    /* Standard Verhalten */
}

/* Underline - Unterstrich bei Hover/Aktiv */
.flavor-menu-style-underline .flavor-menu-item {
    position: relative;
}

.flavor-menu-style-underline .flavor-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--flavor-menu-underline-color);
    transition: width 0.3s ease;
}

.flavor-menu-style-underline .flavor-menu-item:hover::after,
.flavor-menu-style-underline .flavor-menu-item.active::after {
    width: 100%;
}

/* Pill - Hintergrund-Pill bei Hover */
.flavor-menu-style-pill .flavor-menu-item {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.flavor-menu-style-pill .flavor-menu-item:hover,
.flavor-menu-style-pill .flavor-menu-item.active {
    background-color: var(--flavor-menu-pill-bg);
}

/* Border - Border-Bottom bei Aktiv */
.flavor-menu-style-border .flavor-menu-item {
    position: relative;
    padding-bottom: 0.75rem;
}

.flavor-menu-style-border .flavor-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.flavor-menu-style-border .flavor-menu-item:hover::after {
    background-color: var(--flavor-menu-hover);
}

.flavor-menu-style-border .flavor-menu-item.active::after {
    background-color: var(--flavor-menu-active);
}

/* Glow - Subtiler Glow-Effekt */
.flavor-menu-style-glow .flavor-menu-item {
    transition: all 0.3s ease;
}

.flavor-menu-style-glow .flavor-menu-item:hover,
.flavor-menu-style-glow .flavor-menu-item.active {
    text-shadow: 0 0 10px var(--flavor-menu-glow-color), 0 0 20px var(--flavor-menu-glow-color);
    color: var(--flavor-menu-hover);
}

/* ============================================
   Header Styles
   ============================================ */

/* CSS Variables for Header Styles */
:root {
    --flavor-header-gradient-start: #0a0a0a;
    --flavor-header-gradient-end: #1a1a1a;
    --flavor-header-blur: 10px;
}

/* Solid (Default) */
.flavor-header-style-solid .flavor-header {
    background-color: var(--flavor-bg-header);
}

/* Transparent */
.flavor-header-style-transparent .flavor-header {
    background-color: transparent;
    border-bottom-color: transparent;
}

.flavor-header-style-transparent .flavor-header:hover {
    background-color: rgba(10, 10, 10, 0.8);
}

/* Gradient */
.flavor-header-style-gradient .flavor-header {
    background: linear-gradient(135deg, var(--flavor-header-gradient-start), var(--flavor-header-gradient-end));
}

/* Glass - Frosted Glass Effekt */
.flavor-header-style-glass .flavor-header {
    background-color: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(var(--flavor-header-blur));
    -webkit-backdrop-filter: blur(var(--flavor-header-blur));
}

/* ============================================
   Card Styles (Flowbite-inspired)
   ============================================ */
/* CSS Variables for Card Styles */
:root {
    --flavor-card-bg: #18181b;
    --flavor-card-border: #27272a;
    --flavor-card-shadow: rgba(0, 0, 0, 0.25);
    --flavor-card-radius: 8px;
    --flavor-card-padding: 1.5rem;
}

/* Base Card Styling */
.flavor-card {
    background-color: var(--flavor-card-bg);
    border-radius: var(--flavor-card-radius);
    padding: var(--flavor-card-padding);
    transition: all 0.2s ease;
}

/* Card Style: Default (subtle background) */
.flavor-card-style-default .flavor-card {
    background-color: var(--flavor-card-bg);
    border: 1px solid transparent;
    box-shadow: 0 1px 3px var(--flavor-card-shadow);
}

/* Card Hover - für alle Card-Styles */
.flavor-card:hover,
.flavor-post-card:hover .flavor-card,
a:hover > .flavor-card {
    background-color: var(--flavor-card-hover-bg, var(--flavor-card-bg));
    border-color: var(--flavor-card-hover-border, var(--flavor-card-border));
}

/* Card Style: Bordered (visible border) */
.flavor-card-style-bordered .flavor-card {
    background-color: var(--flavor-card-bg);
    border: 1px solid var(--flavor-card-border);
    box-shadow: none;
}

/* Card Style: Elevated (strong shadow) */
.flavor-card-style-elevated .flavor-card {
    background-color: var(--flavor-card-bg);
    border: 1px solid transparent;
    box-shadow: 0 4px 6px -1px var(--flavor-card-shadow), 0 2px 4px -2px var(--flavor-card-shadow);
}

.flavor-card-style-elevated .flavor-card:hover {
    box-shadow: 0 10px 15px -3px var(--flavor-card-shadow), 0 4px 6px -4px var(--flavor-card-shadow);
    transform: translateY(-2px);
}

/* Card Style: Glass (frosted glass effect) */
.flavor-card-style-glass .flavor-card {
    background-color: rgba(24, 24, 27, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px var(--flavor-card-shadow);
}

/* Card Style: Minimal (very subtle) */
.flavor-card-style-minimal .flavor-card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid var(--flavor-card-border);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Card Style: Outline (border only, no background) */
.flavor-card-style-outline .flavor-card {
    background-color: transparent;
    border: 2px solid var(--flavor-card-border);
    box-shadow: none;
}

.flavor-card-style-outline .flavor-card:hover {
    border-color: var(--flavor-card-hover-border, var(--flavor-text-primary));
}

/* Apply card styles to common elements */
.flavor-card-style-default .flavor-mini-stat,
.flavor-card-style-bordered .flavor-mini-stat,
.flavor-card-style-elevated .flavor-mini-stat,
.flavor-card-style-glass .flavor-mini-stat,
.flavor-card-style-minimal .flavor-mini-stat,
.flavor-card-style-outline .flavor-mini-stat {
    /* Mini-stats übernehmen Card-Style */
}

/* ============================================
   Icons
   ============================================ */
.flavor-chevron {
    width: 1rem;
    height: 1rem;
}

.flavor-icon-user {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--flavor-text-muted);
}

.flavor-icon-menu {
    width: 1.5rem;
    height: 1.5rem;
}

.flavor-mobile-danger {
    color: var(--flavor-danger) !important;
}

/* ============================================
   Auth Buttons
   ============================================ */
.flavor-auth-buttons {
    display: none;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

@media (min-width: 1024px) {
    .flavor-auth-buttons {
        display: flex;
    }
}

/* Header Login Button - verhält sich wie flavor-btn-secondary */
.flavor-btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--flavor-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}
.flavor-btn-login:hover {
    color: var(--flavor-menu-hover);
}

/* Header Register Button - verhält sich wie flavor-btn-primary */
.flavor-btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
    padding: 0.5rem 1rem;
    border-radius: var(--flavor-border-radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
}
.flavor-btn-register:hover {
    background-color: var(--flavor-btn-primary-hover);
}

/* Header Buttons - Style Overrides */
.flavor-btn-style-outline .flavor-btn-register {
    background-color: transparent;
    border: 2px solid var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-bg);
}
.flavor-btn-style-outline .flavor-btn-register:hover {
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
}

.flavor-btn-style-gradient .flavor-btn-register {
    background: linear-gradient(135deg, var(--flavor-btn-gradient-start) 0%, var(--flavor-btn-gradient-end) 100%);
    color: var(--flavor-btn-primary-text);
}
.flavor-btn-style-gradient .flavor-btn-register:hover {
    filter: brightness(0.9);
}

.flavor-btn-style-pill .flavor-btn-register {
    border-radius: 50px;
}

.flavor-btn-style-glow .flavor-btn-register {
    background-color: var(--flavor-btn-glow-color);
    color: var(--flavor-btn-primary-text);
    box-shadow: 0 0 15px color-mix(in srgb, var(--flavor-btn-glow-color) 50%, transparent);
}
.flavor-btn-style-glow .flavor-btn-register:hover {
    box-shadow: 0 0 25px color-mix(in srgb, var(--flavor-btn-glow-color) 70%, transparent);
}

.flavor-btn-style-3d .flavor-btn-register {
    box-shadow: 0 3px 0 var(--flavor-btn-3d-shadow);
    transform: translateY(-1px);
}
.flavor-btn-style-3d .flavor-btn-register:hover {
    transform: translateY(0);
    box-shadow: 0 1px 0 var(--flavor-btn-3d-shadow);
}

/* ============================================
   Mobile Menu Button
   ============================================ */
.flavor-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--flavor-menu-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--flavor-transition);
}

@media (min-width: 1024px) {
    .flavor-mobile-btn {
        display: none;
    }
}

.flavor-mobile-btn:hover {
    color: var(--flavor-menu-hover);
    background-color: var(--flavor-bg-hover);
}

/* ============================================
   Mobile Menu
   ============================================ */
.flavor-mobile-menu {
    background-color: var(--flavor-bg-header);
    border-top: 1px solid var(--flavor-border-color);
    padding: 0.5rem 0;
}

@media (min-width: 1024px) {
    .flavor-mobile-menu {
        display: none !important;
    }
}

.flavor-mobile-menu-item {
    display: block;
    padding: 0.875rem 1.5rem;
    color: var(--flavor-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--flavor-transition);
}

.flavor-mobile-menu-item:hover {
    background-color: var(--flavor-bg-hover);
    color: var(--flavor-menu-hover);
}

.flavor-mobile-divider {
    border: none;
    border-top: 1px solid var(--flavor-border-color);
    margin: 0.5rem 0;
}

/* Mobile Submenu */
.flavor-mobile-submenu {
    width: 100%;
}

.flavor-mobile-menu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.flavor-mobile-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.flavor-chevron-open {
    transform: rotate(180deg);
}

.flavor-mobile-submenu-items {
    background-color: var(--flavor-bg-submenu);
    overflow: hidden;
}

.flavor-mobile-submenu-item {
    display: block;
    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
    color: var(--flavor-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all var(--flavor-transition);
}

.flavor-mobile-submenu-item:hover {
    background-color: var(--flavor-bg-hover);
    color: var(--flavor-menu-hover);
}

/* ============================================
   Mobile Drawer (Sidebar von rechts)
   ============================================ */
.flavor-drawer {
    background-color: var(--flavor-drawer-bg, #1a1a1a);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

/* Drawer Header */
.flavor-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--flavor-drawer-header-bg, #111);
    flex-shrink: 0;
}

.flavor-drawer-logo {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.flavor-drawer-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}

.flavor-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    transition: all var(--flavor-transition);
}

.flavor-drawer-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Drawer Navigation */
.flavor-drawer-nav {
    flex: 1;
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
    min-height: 0;
}

.flavor-drawer-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.25rem;
    color: var(--flavor-drawer-text, #ccc);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--flavor-transition);
    border: none;
    background-color: var(--flavor-drawer-item-bg, rgba(255, 255, 255, 0.03));
    border-radius: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.flavor-drawer-item:hover {
    background-color: var(--flavor-drawer-item-hover-bg, rgba(255, 255, 255, 0.08));
    color: var(--flavor-drawer-text-hover, #fff);
    border-left-color: rgba(255, 255, 255, 0.3);
}

/* Aktiver Menüpunkt */
.flavor-drawer-item.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--flavor-drawer-text-hover, #fff);
    border-left-color: var(--flavor-drawer-active-border, #f3c27a);
}

.flavor-drawer-item-icon svg {
    flex-shrink: 0;
    opacity: 0.7;
    color: #999;
}

.flavor-drawer-item-icon:hover svg {
    opacity: 1;
    color: #fff;
}

/* Drawer Toggle (für Submenus) */
.flavor-drawer-toggle {
    justify-content: space-between;
}

.flavor-drawer-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.6;
    color: #888;
}

[aria-expanded="true"] > .flavor-drawer-chevron {
    transform: rotate(180deg);
}

/* Drawer Subitems */
.flavor-drawer-subitems {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 8px 8px;
    margin-top: -0.25rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
}

.flavor-drawer-subitem {
    display: block;
    padding: 0.625rem 1rem 0.625rem 2rem;
    color: #aaa;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all var(--flavor-transition);
    border-left: 2px solid transparent;
}

.flavor-drawer-subitem:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.2);
}

/* Drawer Footer */
.flavor-drawer-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Drawer Danger Item (Logout) */
.flavor-drawer-danger {
    color: #f87171 !important;
    border-left-color: transparent !important;
}

.flavor-drawer-danger:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-left-color: #ef4444 !important;
}

/* Drawer Highlight Item (Register) */
.flavor-drawer-highlight {
    color: var(--flavor-drawer-highlight, #f3c27a) !important;
}

.flavor-drawer-highlight:hover {
    border-left-color: var(--flavor-drawer-highlight, #f3c27a) !important;
}

/* Drawer Backdrop (wird von Flowbite automatisch generiert) */
[drawer-backdrop] {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Hide on Desktop */
@media (min-width: 768px) {
    .flavor-drawer {
        display: none !important;
    }
}

/* ============================================
   Dropdowns
   ============================================ */
.flavor-dropdown {
    position: relative;
}

.flavor-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    min-width: 180px;
    background-color: var(--flavor-bg-dropdown);
    border: 1px solid var(--flavor-border-light);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 0;
    z-index: 200;
}

.flavor-dropdown-right {
    left: auto;
    right: 0;
}

.flavor-dropdown-item {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--flavor-text-primary);
    text-decoration: none;
    transition: all var(--flavor-transition);
}

.flavor-dropdown-item:hover {
    background-color: var(--flavor-border-light);
    color: var(--flavor-menu-hover);
}

.flavor-dropdown-divider {
    border: none;
    border-top: 1px solid var(--flavor-border-light);
    margin: 0.5rem 0;
}

.flavor-dropdown-danger {
    color: var(--flavor-danger);
}

.flavor-dropdown-danger:hover {
    background-color: var(--flavor-border-light);
    color: var(--flavor-danger-hover);
}

/* ============================================
   User Button
   ============================================ */
.flavor-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--flavor-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.375rem;
    border-radius: 8px;
    transition: all var(--flavor-transition);
}

.flavor-user-btn:hover {
    color: var(--flavor-menu-hover);
    background-color: var(--flavor-bg-hover);
}

.flavor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.flavor-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--flavor-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flavor-username {
    font-weight: 500;
}

/* ============================================
   Main Content
   ============================================ */
.flavor-main {
    flex: 1;
    max-width: var(--flavor-container-width);
    margin: 0 auto;
    padding: 0 var(--flavor-content-padding) 2rem; /* Kein Abstand oben zur Menüleiste */
    width: 100%;
}

@media (min-width: 768px) {
    .flavor-main {
        padding: 0 var(--flavor-content-padding-md) 2rem;
    }
}

@media (min-width: 1400px) {
    .flavor-main {
        padding: 0 var(--flavor-content-padding-lg) 2rem;
    }
}

/* ============================================
   Footer - Legal Sub-Footer Styling
   ============================================ */
.flavor-theme .legal-sub-footer {
    background-color: var(--flavor-bg-footer);
    border-top: 1px solid var(--flavor-border-color);
    padding: 0.4rem var(--flavor-content-padding);
}

@media (min-width: 768px) {
    .flavor-theme .legal-sub-footer {
        padding: 0.4rem var(--flavor-content-padding-md);
    }
}

@media (min-width: 1400px) {
    .flavor-theme .legal-sub-footer {
        padding: 0.4rem var(--flavor-content-padding-lg);
    }
}

.flavor-theme .flavor-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: var(--flavor-container-width);
    margin: 0 auto;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .flavor-theme .flavor-footer-row {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    .flavor-theme .legal-sub-footer .legal-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0;
    }
    .flavor-theme .legal-sub-footer .legal-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    .flavor-theme .legal-sub-footer .separator {
        display: none;
    }
    .flavor-theme .flavor-copyright {
        font-size: 0.7rem;
    }
}

.flavor-theme .legal-sub-footer .legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    gap: 0;
}

.flavor-theme .legal-sub-footer .legal-link {
    color: var(--flavor-text-footer);
    padding: 0.125rem 0.75rem;
}

.flavor-theme .legal-sub-footer .legal-link:hover {
    color: var(--flavor-text-primary);
}

.flavor-theme .legal-sub-footer .separator {
    color: var(--flavor-text-muted);
}

.flavor-theme .flavor-copyright {
    color: var(--flavor-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ============================================
   Welcome Section (kompakt, 2-spaltig)
   ============================================ */
.flavor-welcome {
    border-bottom: 1px solid var(--flavor-border-color);
    padding: 2rem 0;
}

.flavor-welcome-grid {
    max-width: var(--flavor-container-width);
    margin: 0 auto;
    padding: 0 var(--flavor-content-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 768px) {
    .flavor-welcome-grid {
        padding: 0 var(--flavor-content-padding-md);
    }
}

@media (min-width: 1400px) {
    .flavor-welcome-grid {
        padding: 0 var(--flavor-content-padding-lg);
    }
}

/* Fullwidth-Variante: keine max-width Beschränkung */
.flavor-welcome-fullwidth .flavor-welcome-grid,
.flavor-layout-fullwidth .flavor-welcome-grid {
    max-width: none;
}

@media (min-width: 768px) {
    .flavor-welcome-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Links: Text */
.flavor-welcome-text h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--flavor-text-heading);
    margin: 0 0 0.75rem 0;
}

.flavor-welcome-content {
    color: var(--flavor-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.flavor-welcome-content p {
    margin: 0 0 0.5rem 0;
}

/* Rechts: Stats */
.flavor-welcome-right {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.flavor-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.flavor-mini-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.flavor-mini-stat svg {
    width: 28px;
    height: 28px;
    color: var(--flavor-text-footer);
    flex-shrink: 0;
}

.flavor-mini-stat > div {
    display: flex;
    flex-direction: column;
}

.flavor-mini-label {
    font-size: 0.75rem;
    color: var(--flavor-text-muted);
}

.flavor-mini-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--flavor-stats-number);
}

/* Buttons - Grid passend zu Mini-Stats */
.flavor-welcome-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.flavor-welcome-buttons .flavor-btn-primary,
.flavor-welcome-buttons .flavor-btn-secondary {
    text-align: center;
    justify-content: center;
}

/* ============================================
   ALLE BUTTONS - Gemeinsame Basis
   flavor-btn-primary, flavor-btn-secondary, flavor-btn
   Alle reagieren auf den im Theme Editor gewählten Style!
   ============================================ */
.flavor-btn-primary,
.flavor-btn-secondary,
.flavor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* ============================================
   DEFAULT / SOLID Style (Standard)
   ============================================ */
.flavor-btn-primary,
.flavor-btn,
.flavor-btn-style-solid .flavor-btn-primary,
.flavor-btn-style-solid .flavor-btn {
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-primary:hover,
.flavor-btn:hover,
.flavor-btn-style-solid .flavor-btn-primary:hover,
.flavor-btn-style-solid .flavor-btn:hover {
    background-color: var(--flavor-btn-primary-hover);
    color: var(--flavor-btn-primary-text);
}

/* Secondary Button - Basis-Styles (werden durch flavor-btn-secondary-style-{style} gesteuert) */
.flavor-btn-secondary {
    background-color: var(--flavor-btn-secondary-bg);
    color: var(--flavor-btn-secondary-text);
    border: 2px solid var(--flavor-btn-secondary-border);
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-secondary:hover {
    background-color: var(--flavor-btn-secondary-hover);
    border-color: var(--flavor-btn-secondary-text);
}

/* ============================================
   OUTLINE Style
   ============================================ */
.flavor-btn-style-outline .flavor-btn-primary,
.flavor-btn-style-outline .flavor-btn {
    background-color: transparent;
    color: var(--flavor-btn-primary-text);
    border: 2px solid var(--flavor-btn-primary-bg);
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-style-outline .flavor-btn-primary:hover,
.flavor-btn-style-outline .flavor-btn:hover {
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
}

/* ============================================
   GRADIENT Style
   ============================================ */
.flavor-btn-style-gradient .flavor-btn-primary,
.flavor-btn-style-gradient .flavor-btn {
    background: linear-gradient(135deg, var(--flavor-btn-gradient-start) 0%, var(--flavor-btn-gradient-end) 100%);
    color: var(--flavor-btn-primary-text);
    border-radius: var(--flavor-border-radius);
    border: none;
}
.flavor-btn-style-gradient .flavor-btn-primary:hover,
.flavor-btn-style-gradient .flavor-btn:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

/* ============================================
   PILL Style (abgerundet)
   ============================================ */
.flavor-btn-style-pill .flavor-btn-primary,
.flavor-btn-style-pill .flavor-btn {
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
    border-radius: 50px;
}
.flavor-btn-style-pill .flavor-btn-primary:hover,
.flavor-btn-style-pill .flavor-btn:hover {
    background-color: var(--flavor-btn-primary-hover);
    transform: translateY(-1px);
}

/* ============================================
   GHOST Style (nur Text)
   ============================================ */
.flavor-btn-style-ghost .flavor-btn-primary,
.flavor-btn-style-ghost .flavor-btn {
    background-color: transparent;
    color: var(--flavor-btn-primary-text);
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-style-ghost .flavor-btn-primary:hover,
.flavor-btn-style-ghost .flavor-btn:hover {
    background-color: var(--flavor-btn-primary-hover);
}

/* ============================================
   GLOW Style (leuchtend)
   ============================================ */
.flavor-btn-style-glow .flavor-btn-primary,
.flavor-btn-style-glow .flavor-btn {
    background-color: var(--flavor-btn-glow-color);
    color: var(--flavor-btn-primary-text);
    border-radius: var(--flavor-border-radius);
    box-shadow: 0 0 15px color-mix(in srgb, var(--flavor-btn-glow-color) 50%, transparent);
}
.flavor-btn-style-glow .flavor-btn-primary:hover,
.flavor-btn-style-glow .flavor-btn:hover {
    box-shadow: 0 0 25px color-mix(in srgb, var(--flavor-btn-glow-color) 70%, transparent);
    transform: translateY(-1px);
}

/* ============================================
   3D Style (plastisch)
   ============================================ */
.flavor-btn-style-3d .flavor-btn-primary,
.flavor-btn-style-3d .flavor-btn {
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
    border-radius: var(--flavor-border-radius);
    box-shadow: 0 4px 0 var(--flavor-btn-3d-shadow);
    transform: translateY(-2px);
}
.flavor-btn-style-3d .flavor-btn-primary:hover,
.flavor-btn-style-3d .flavor-btn:hover {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--flavor-btn-3d-shadow);
}
.flavor-btn-style-3d .flavor-btn-primary:active,
.flavor-btn-style-3d .flavor-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* ============================================
   MINIMAL Style (Unterstreichung)
   ============================================ */
.flavor-btn-style-minimal .flavor-btn-primary,
.flavor-btn-style-minimal .flavor-btn {
    background-color: transparent;
    color: var(--flavor-btn-primary-text);
    border-radius: 0;
    border-bottom: 2px solid var(--flavor-btn-primary-bg);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.flavor-btn-style-minimal .flavor-btn-primary:hover,
.flavor-btn-style-minimal .flavor-btn:hover {
    color: var(--flavor-btn-primary-hover);
    border-bottom-color: var(--flavor-btn-primary-hover);
}

/* ============================================
   SECONDARY BUTTON STYLES (Unabhängig von Primary)
   Body-Klassen: flavor-btn-secondary-style-{style}
   ============================================ */

/* Solid - Standard gefüllter Button */
.flavor-btn-secondary-style-solid .flavor-btn-secondary {
    background-color: var(--flavor-btn-secondary-bg);
    color: var(--flavor-btn-secondary-text);
    border: 2px solid var(--flavor-btn-secondary-border);
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-secondary-style-solid .flavor-btn-secondary:hover {
    background-color: var(--flavor-btn-secondary-hover);
    border-color: var(--flavor-btn-secondary-hover);
}

/* Outline - Transparenter Button mit Rahmen */
.flavor-btn-secondary-style-outline .flavor-btn-secondary {
    background-color: transparent;
    color: var(--flavor-btn-secondary-text);
    border: 2px solid var(--flavor-btn-secondary-border);
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-secondary-style-outline .flavor-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Pill - Abgerundete Ecken */
.flavor-btn-secondary-style-pill .flavor-btn-secondary {
    background-color: var(--flavor-btn-secondary-bg);
    color: var(--flavor-btn-secondary-text);
    border: 2px solid var(--flavor-btn-secondary-border);
    border-radius: 50px;
}
.flavor-btn-secondary-style-pill .flavor-btn-secondary:hover {
    background-color: var(--flavor-btn-secondary-hover);
    border-color: var(--flavor-btn-secondary-hover);
}

/* Ghost - Nur Text ohne Hintergrund */
.flavor-btn-secondary-style-ghost .flavor-btn-secondary {
    background-color: transparent;
    color: var(--flavor-btn-secondary-text);
    border: none;
    border-radius: var(--flavor-border-radius);
}
.flavor-btn-secondary-style-ghost .flavor-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 3D - 3D-Effekt mit Schatten */
.flavor-btn-secondary-style-3d .flavor-btn-secondary {
    background-color: var(--flavor-btn-secondary-bg);
    color: var(--flavor-btn-secondary-text);
    border: none;
    border-radius: var(--flavor-border-radius);
    box-shadow: 0 4px 0 var(--flavor-btn-secondary-3d-shadow);
    transform: translateY(-2px);
    transition: all 0.15s ease;
}
.flavor-btn-secondary-style-3d .flavor-btn-secondary:hover {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--flavor-btn-secondary-3d-shadow);
    background-color: var(--flavor-btn-secondary-hover);
}
.flavor-btn-secondary-style-3d .flavor-btn-secondary:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Minimal - Nur Unterstrich */
.flavor-btn-secondary-style-minimal .flavor-btn-secondary {
    background-color: transparent;
    color: var(--flavor-btn-secondary-text);
    border: none;
    border-radius: 0;
    border-bottom: 2px solid var(--flavor-btn-secondary-border);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.flavor-btn-secondary-style-minimal .flavor-btn-secondary:hover {
    color: var(--flavor-btn-secondary-hover);
    border-bottom-color: var(--flavor-btn-secondary-hover);
}

/* ============================================
   Header Icons (Sprache + Login/User) - Desktop & Mobile
   ============================================ */
.flavor-header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Mobile: Icons näher am Hamburger */
@media (max-width: 768px) {
    .flavor-nav-inner {
        gap: 0.25rem;
    }
    .flavor-header-icons {
        gap: 2px;
        margin-right: 0;
    }
    .flavor-header-icon-btn {
        padding: 2px 4px;
        font-size: 7px;
        min-height: 36px;
    }
    .flavor-flag {
        width: 16px;
        height: 11px;
    }
    .flavor-header-icon-svg {
        width: 16px;
        height: 16px;
    }
}

.flavor-header-icon {
    position: relative;
}

.flavor-header-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--flavor-menu-text);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all var(--flavor-transition);
    min-height: 42px;
}

.flavor-header-icon-btn:hover {
    color: var(--flavor-menu-hover);
    background-color: var(--flavor-bg-hover);
}

.flavor-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    margin-bottom: 2px;
}

.flavor-header-icon-svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}

.flavor-header-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2px;
}

.flavor-header-username {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .flavor-header-username {
        display: none;
    }
}

.flavor-header-icon-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 160px;
    background-color: var(--flavor-bg-dropdown);
    border: 1px solid var(--flavor-border-light);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 0;
    z-index: 200;
}

.flavor-header-icon-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--flavor-text-primary);
    text-decoration: none;
    transition: all var(--flavor-transition);
}

.flavor-header-icon-dropdown-item:hover {
    background-color: var(--flavor-border-light);
    color: var(--flavor-menu-hover);
}

.flavor-header-dropdown-divider {
    border: none;
    border-top: 1px solid var(--flavor-border-light);
    margin: 0.5rem 0;
}

.flavor-header-dropdown-danger {
    color: var(--flavor-danger);
}

.flavor-header-dropdown-danger:hover {
    color: var(--flavor-danger-hover);
}

/* ============================================
   Alpine.js
   ============================================ */
[x-cloak] {
    display: none !important;
}

/* ============================================
   Slider
   ============================================ */
.flavor-slider {
    position: relative;
    width: 100%;
    height: var(--slider-height, 60vh);
    overflow: hidden;
    background-color: var(--flavor-bg-body);
}

/* Slider Breiten-Varianten */
.flavor-slider-contained {
    max-width: var(--flavor-container-width);
    margin: 0 auto;
    border-radius: var(--flavor-border-radius);
}

.flavor-slider-fullwidth {
    /* Aus Container ausbrechen für volle Breite */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
}

.flavor-slider-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Flowbite Carousel Items */
.flavor-slider-inner > [data-carousel-item] {
    position: absolute;
    inset: 0;
    transition: transform 0.7s ease-in-out;
}

.flavor-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Caption */
.flavor-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

.flavor-slide-content {
    max-width: var(--flavor-container-width);
    margin: 0 auto;
}

/* Caption Positionen */
.flavor-caption-left .flavor-slide-content {
    text-align: left;
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
}

.flavor-caption-center .flavor-slide-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.flavor-caption-right .flavor-slide-content {
    text-align: right;
    max-width: 600px;
    margin-right: 0;
    margin-left: auto;
}

.flavor-caption-fullwidth .flavor-slide-content {
    text-align: center;
    max-width: 100%;
}

.flavor-slide-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--flavor-slider-title);
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    line-height: 1.2;
}

.flavor-slide-description {
    font-size: 1.125rem;
    color: var(--flavor-slider-text);
    line-height: 1.6;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

.flavor-fsk18-blur {
    filter: blur(8px);
}

/* Navigation Arrows */
.flavor-slider-prev,
.flavor-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    color: var(--flavor-slider-title);
    cursor: pointer;
    transition: all var(--flavor-transition);
    z-index: 10;
    opacity: 0;
}

.flavor-slider:hover .flavor-slider-prev,
.flavor-slider:hover .flavor-slider-next {
    opacity: 1;
}

.flavor-slider-prev:hover,
.flavor-slider-next:hover {
    background-color: rgba(255,255,255,0.2);
}

.flavor-slider-prev {
    left: 1.5rem;
}

.flavor-slider-next {
    right: 1.5rem;
}

.flavor-slider-prev svg,
.flavor-slider-next svg {
    width: 24px;
    height: 24px;
}

/* Indicators */
.flavor-slider-indicators {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.flavor-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: all var(--flavor-transition);
}

.flavor-slider-dot:hover {
    background-color: rgba(255,255,255,0.7);
}

.flavor-slider-dot.active {
    background-color: var(--flavor-btn-primary-bg);
    transform: scale(1.2);
}

/* New unified indicator class */
.flavor-slider-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: all var(--flavor-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.flavor-slider-indicator:hover {
    background-color: rgba(255,255,255,0.7);
}

.flavor-slider-indicator.active,
.flavor-slider-indicator[aria-current="true"] {
    background-color: var(--flavor-btn-primary-bg);
    transform: scale(1.2);
}

/* Number Indicators */
.flavor-indicators-numbers .flavor-slider-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--flavor-slider-title);
    background-color: rgba(0,0,0,0.5);
}

.flavor-indicators-numbers .flavor-slider-indicator.active,
.flavor-indicators-numbers .flavor-slider-indicator[aria-current="true"] {
    background-color: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
    transform: scale(1.1);
}

/* Arrow visibility variants */
.flavor-arrows-always .flavor-slider-prev,
.flavor-arrows-always .flavor-slider-next {
    opacity: 1;
}

.flavor-arrows-hover .flavor-slider-prev,
.flavor-arrows-hover .flavor-slider-next {
    opacity: 0;
}

.flavor-arrows-hover:hover .flavor-slider-prev,
.flavor-arrows-hover:hover .flavor-slider-next {
    opacity: 1;
}

/* ============================================
   Split Layout: Text links, Bild rechts
   ============================================ */
.flavor-slider-split {
    display: flex;
    flex-direction: column;
}

.flavor-slider-split-inner {
    display: flex;
    height: 100%;
    gap: 2rem;
}

/* Linke Seite: Text */
.flavor-slider-text {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

.flavor-slider-logo {
    margin-bottom: 2rem;
}

.flavor-slider-logo img {
    max-height: 80px;
    width: auto;
}

.flavor-slider-text-content {
    position: relative;
}

.flavor-text-left {
    text-align: left;
}

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

.flavor-text-right {
    text-align: right;
}

.flavor-text-fullwidth {
    text-align: left;
}

.flavor-slider-text .flavor-slide-title {
    text-shadow: none;
    color: var(--flavor-text-primary);
}

.flavor-slider-text .flavor-slide-description {
    text-shadow: none;
    color: var(--flavor-text-secondary);
}

/* Rechte Seite: Bilder */
.flavor-slider-images {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--flavor-border-radius);
}

.flavor-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flavor-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--flavor-border-radius);
}

.flavor-slide-image.flavor-slide-first {
    position: relative;
}

/* Navigation im Split Layout */
.flavor-slider-split .flavor-slider-prev,
.flavor-slider-split .flavor-slider-next {
    z-index: 10;
}

.flavor-slider-split .flavor-slider-prev {
    left: 0.5rem;
}

.flavor-slider-split .flavor-slider-next {
    right: 0.5rem;
}

/* Indicators im Split Layout */
.flavor-slider-split .flavor-slider-indicators {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    justify-content: center;
    padding: 1rem 0;
}

/* Mobile Split Layout - Text als Overlay über Bild */
@media (max-width: 768px) {
    .flavor-slider-split {
        height: var(--slider-height, 60vh);
    }

    .flavor-slider-split-inner {
        flex-direction: column;
        position: relative;
        height: 100%;
    }

    /* Text-Bereich wird Overlay über dem Bild */
    .flavor-slider-text {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex: none;
        padding: 2rem 1.5rem;
        z-index: 20;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.3) 0%,
            rgba(0,0,0,0.5) 50%,
            rgba(0,0,0,0.7) 100%
        );
    }

    /* Text-Carousel im Overlay - WICHTIG: Flowbite Override */
    .flavor-slider-text #flavor-text-carousel {
        width: 100%;
        max-width: 90%;
        position: relative;
    }

    /* Override Flowbite's absolute positioning for carousel items */
    .flavor-slider-text #flavor-text-carousel .relative.overflow-hidden {
        position: relative;
        min-height: 200px;
    }

    .flavor-slider-text .flavor-slider-text-content {
        text-align: center;
        /* Override Flowbite absolute positioning - use static for mobile */
        position: relative !important;
        transform: none !important;
        inset: auto !important;
    }

    /* Hide non-active items */
    .flavor-slider-text .flavor-slider-text-content:not([data-carousel-item="active"]) {
        display: none !important;
    }

    .flavor-slider-text .flavor-slider-text-content[data-carousel-item="active"] {
        display: block !important;
    }

    .flavor-slider-text .flavor-slide-title {
        color: var(--flavor-slider-title);
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .flavor-slider-text .flavor-slide-description {
        color: var(--flavor-slider-text);
        text-shadow: 0 1px 5px rgba(0,0,0,0.5);
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Bilder nehmen volle Höhe ein */
    .flavor-slider-images {
        position: relative;
        flex: none;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .flavor-slider-logo {
        display: none;
    }

    /* Indicators über dem Overlay */
    .flavor-slider-split .flavor-slider-indicators {
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 30;
    }
}

/* Mobile Slider */
@media (max-width: 768px) {
    .flavor-slider {
        height: calc(var(--slider-height, 60vh) - 10vh);
    }

    .flavor-slide-caption {
        padding: 2rem 1rem;
    }

    .flavor-slide-title {
        font-size: 1.5rem;
    }

    .flavor-slide-description {
        font-size: 0.9375rem;
    }

    .flavor-slider-prev,
    .flavor-slider-next {
        width: 36px;
        height: 36px;
        opacity: 1;
    }

    .flavor-slider-prev {
        left: 0.75rem;
    }

    .flavor-slider-next {
        right: 0.75rem;
    }

    .flavor-slider-prev svg,
    .flavor-slider-next svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   Front-Page Block Wrapper (Theme Editor Blocks)
   ============================================ */
.flavor-above-fold,
.flavor-below-fold {
    display: flex;
    flex-direction: column;
}

.flavor-block-wrapper {
    padding-top: 1.5rem;
}

@media (min-width: 768px) {
    .flavor-block-wrapper {
        padding-top: 2rem;
    }
}

@media (min-width: 1024px) {
    .flavor-block-wrapper {
        padding-top: 2.5rem;
    }
}

/* ============================================
   Front-Page Content Sections
   ============================================ */
.flavor-page-section {
    padding: 2.5rem var(--flavor-content-padding);
    max-width: var(--flavor-container-width);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .flavor-page-section {
        padding: 4rem var(--flavor-content-padding-md);
    }
}

@media (min-width: 1400px) {
    .flavor-page-section {
        padding: 4rem var(--flavor-content-padding-lg);
    }
}

.flavor-page-section:nth-child(even) {
    background-color: var(--flavor-bg-header);
}

.flavor-page-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.flavor-page-row.reverse {
    direction: rtl;
}

.flavor-page-row.reverse > * {
    direction: ltr;
}

.flavor-page-image {
    width: 100%;
    border-radius: var(--flavor-border-radius);
    overflow: hidden;
}

.flavor-page-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.flavor-page-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--flavor-text-primary);
    margin-bottom: 1rem;
}

.flavor-page-content p {
    color: var(--flavor-text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.flavor-page-content a.flavor-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--flavor-btn-primary-bg);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--flavor-transition);
}

.flavor-page-content a.flavor-read-more:hover {
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .flavor-page-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .flavor-page-row.reverse {
        direction: ltr;
    }

    .flavor-page-content h2 {
        font-size: 1.375rem;
    }
}

/* ============================================
   SLIDER EFFEKTE & ANIMATIONEN
   ============================================ */

/* CSS Variablen für Animationen (werden via Blade überschrieben) */
:root {
    --slider-transition-duration: 700ms;
    --slider-text-delay: 300ms;
    --slider-easing: ease-out;
}

/* Basis-Zustand für Text-Animation */
.flavor-slider-text-content.animate-text {
    opacity: 0;
    transform: translateY(0);
    transition: opacity var(--slider-transition-duration) var(--slider-easing),
                transform var(--slider-transition-duration) var(--slider-easing);
}

/* Fade In Animation */
.flavor-slider-text-content.animate-text.text-anim-fade {
    opacity: 0;
}

.flavor-slider-text-content.animate-text.text-anim-fade.text-visible {
    opacity: 1;
}

/* Slide Up Animation */
.flavor-slider-text-content.animate-text.text-anim-slide-up {
    opacity: 0;
    transform: translateY(30px);
}

.flavor-slider-text-content.animate-text.text-anim-slide-up.text-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flowbite Carousel Fade-Effekt Override */
.flavor-slider[data-slider-animation="fade"] [data-carousel-item] {
    opacity: 0;
    transition: opacity var(--slider-transition-duration) var(--slider-easing);
    transform: none !important;
}

.flavor-slider[data-slider-animation="fade"] [data-carousel-item="active"] {
    opacity: 1;
}

/* Flowbite Carousel Slide-Effekt mit smooth easing */
.flavor-slider[data-slider-animation="slide"] [data-carousel-item] {
    transition: transform var(--slider-transition-duration) var(--slider-easing),
                opacity 300ms var(--slider-easing);
}

/* Verbesserte Smooth Transitions für alle Carousel-Items */
#flavor-image-carousel [data-carousel-item] {
    transition: transform var(--slider-transition-duration) var(--slider-easing),
                opacity 300ms var(--slider-easing),
                z-index 0ms;
}

/* Text-Container Animation */
.flavor-slider-text-content {
    transition: opacity var(--slider-transition-duration) var(--slider-easing),
                transform var(--slider-transition-duration) var(--slider-easing);
}

/* Mobile: Text-Animation */
@media (max-width: 768px) {
    .flavor-slider-text .flavor-slider-text-content.animate-text.text-anim-slide-up {
        transform: translateY(20px);
    }
    
    .flavor-slider-text .flavor-slider-text-content.animate-text.text-anim-slide-up.text-visible {
        transform: translateY(0);
    }
}

/* ============================================
   Post Card Styles (News Block)
   ============================================ */
.flavor-post-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.flavor-post-card .flavor-card {
    padding: 0; /* Override default padding for image cards */
    transition: all 0.2s ease;
    /* Background, border, shadow werden von Card Styles kontrolliert */
}

.flavor-post-card .flavor-card-body {
    padding: 1.25rem;
}

.flavor-post-card .flavor-card-title {
    color: var(--flavor-text-heading);
    margin: 0;
}

.flavor-post-card:hover .flavor-card-title {
    color: var(--flavor-text-link-hover);
}

.flavor-post-card .flavor-card-text {
    color: var(--flavor-text-secondary);
    line-height: 1.6;
}

.flavor-post-card .flavor-text-muted {
    color: var(--flavor-text-muted);
}

.flavor-post-card .flavor-read-more {
    color: var(--flavor-text-link);
}

.flavor-post-card:hover .flavor-read-more {
    text-decoration: underline;
}

.flavor-post-card-pinned .flavor-card {
    border-color: var(--flavor-btn-primary-bg);
}

/* Block Section Styling */
.flavor-block-posts {
    background-color: var(--flavor-bg-body);
}

.flavor-block-posts h2 {
    color: var(--flavor-text-heading);
}

.flavor-block-posts > div > div > p {
    color: var(--flavor-text-muted);
}

/* "Alle Beiträge" Button Container */
.flavor-all-posts-btn {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
}

/* Block Container - konsistentes Padding wie Welcome Section */
.flavor-block-container {
    max-width: var(--flavor-container-width);
    margin: 0 auto;
    padding: 0 var(--flavor-content-padding);
}

@media (min-width: 768px) {
    .flavor-block-container {
        padding: 0 var(--flavor-content-padding-md);
    }
}

@media (min-width: 1400px) {
    .flavor-block-container {
        padding: 0 var(--flavor-content-padding-lg);
    }
}

/* Kein doppeltes Padding wenn Block-Container in Main ist */
.flavor-main .flavor-block-container,
.flavor-main .flavor-welcome-grid {
    padding-left: 0;
    padding-right: 0;
}

/* Fullwidth: Block Container ohne max-width */
.flavor-layout-fullwidth .flavor-block-container {
    max-width: 100% !important;
}

/* Posts Grid - smooth transitions */
.flavor-posts-grid {
    width: 100%;
}

.flavor-posts-grid .flavor-post-card {
    transition: all 0.3s ease;
    width: 100%;
}

/* ============================================
   Single Article / Page Styles
   ============================================ */
.flavor-single-article {
    padding-top: 1rem;
    width: 100%;
}

.flavor-article-wrapper {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
}

.flavor-article-content {
    width: 100%;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--flavor-text-primary);
}

/* Featured image ausgenommen, Grids bekommen explizit 100% */
.flavor-article-content > .flavor-grid-2,
.flavor-article-content > .flavor-grid-3,
.flavor-article-content > .flavor-grid-4 {
    width: 100%;
}

/* Kompakter Header */
.flavor-article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--flavor-border-color);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.flavor-article-header .flavor-article-title {
    font-size: 1.25rem;
    font-weight: var(--flavor-h1-font-weight);
    color: var(--flavor-text-heading);
    margin: 0;
    line-height: 1.3;
}

.flavor-article-header .flavor-article-date {
    font-size: 0.875rem;
    color: var(--flavor-text-muted);
}

/* Article Content Headings - use individual H1-H6 weights */
.flavor-article-content h1 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: var(--flavor-h1-font-weight);
}

.flavor-article-content h2 {
    font-size: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: var(--flavor-h2-font-weight);
}

.flavor-article-content h3 {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: var(--flavor-h3-font-weight);
}

.flavor-article-content h4 {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: var(--flavor-h4-font-weight);
}

.flavor-article-content h5 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: var(--flavor-h5-font-weight);
}

.flavor-article-content h6 {
    font-size: 0.875rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: var(--flavor-h6-font-weight);
}

.flavor-article-content h1,
.flavor-article-content h2,
.flavor-article-content h3,
.flavor-article-content h4,
.flavor-article-content h5,
.flavor-article-content h6 {
    color: var(--flavor-text-heading);
}

.flavor-article-content p {
    margin-bottom: 1rem;
}

.flavor-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--flavor-border-radius);
    margin: 1rem 0;
}

.flavor-article-content a {
    color: var(--flavor-text-link);
}

.flavor-article-content ul,
.flavor-article-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.flavor-article-content li {
    margin-bottom: 0.25rem;
}

/* Flavor-specific content classes from AI wizard */
.flavor-article-content .flavor-page-section,
.flavor-article-content .flavor-page-row {
    margin-bottom: 1rem;
}

.flavor-article-content .flavor-card,
.flavor-article-content .flavor-highlight-box {
    padding: 1rem;
    margin-bottom: 1rem;
    /* Background, border, shadow werden von Card Styles kontrolliert */
}

.flavor-article-content .flavor-btn-primary {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--flavor-btn-primary-bg);
    color: var(--flavor-btn-primary-text);
    border-radius: var(--flavor-border-radius);
    text-decoration: none;
    font-weight: 500;
}

.flavor-article-content .flavor-btn-primary:hover {
    background: var(--flavor-btn-primary-hover);
    color: var(--flavor-btn-primary-text);
    text-decoration: none;
}

/* Navigation */
.flavor-article-navigation {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--flavor-border-color);
}

/* Center text elements from AI */
.flavor-article-content .text-center {
    text-align: center;
}

/* Reduzierte Abstände für AI-Content */
.flavor-article-content .mb-4 {
    margin-bottom: 0.5rem;
}

.flavor-article-content .mt-3 {
    margin-top: 0.5rem;
}

.flavor-article-content .lead {
    font-size: 1rem;
    color: var(--flavor-text-secondary);
    margin-bottom: 0.5rem;
}

.flavor-article-content .img-fluid {
    max-width: 100%;
    height: auto;
}

/* Intro & CTA - Volle Breite */
.flavor-article-content .flavor-intro,
.flavor-article-content .flavor-cta {
    margin-bottom: 1.5rem;
}

.flavor-article-content .flavor-cta {
    clear: both;
    text-align: center;
    padding: 1.5rem;
    background: var(--flavor-bg-hover);
    border-radius: var(--flavor-border-radius);
}

/* Grid Layouts - VOLLE BREITE (überall verwendbar) */
.flavor-grid-2,
.flavor-grid-3,
.flavor-grid-4 {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .flavor-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .flavor-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .flavor-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .flavor-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .flavor-article-content .flavor-page-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .flavor-article-content .flavor-page-section > .flavor-page-row:first-child,
    .flavor-article-content .flavor-page-section > h1,
    .flavor-article-content .flavor-page-section > h2,
    .flavor-article-content .flavor-page-section > .text-center {
        grid-column: 1 / -1;
    }

    .flavor-article-content .flavor-card,
    .flavor-article-content .flavor-highlight-box {
        margin-bottom: 0;
    }
}

/* Cards füllen ihre Grid-Zelle komplett */
.flavor-article-content .flavor-grid-2 > .flavor-card,
.flavor-article-content .flavor-grid-3 > .flavor-card,
.flavor-article-content .flavor-grid-4 > .flavor-card {
    width: 100%;
    margin-bottom: 0;
    height: 100%;
}

/* Weniger Abstand zwischen Überschriften */
.flavor-article-content h1 + h2,
.flavor-article-content h2 + p,
.flavor-article-content h1 + p {
    margin-top: 0.25rem;
}

/* Logo kleiner auf Desktop */
.flavor-article-content img[alt*="Logo"] {
    max-width: 120px;
    margin: 0.5rem auto;
}

/* ============================================
   Single Post Styles (Blog Posts)
   ============================================ */
.flavor-single-post {
    min-height: 100vh;
}

/* Hero Section */
.flavor-post-hero {
    position: relative;
    height: 50vh;
    min-height: 300px;
    max-height: 500px;
    overflow: hidden;
}

.flavor-post-hero-image {
    position: absolute;
    inset: 0;
}

.flavor-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Section für Content Pages (AI Wizard generiert) */
.flavor-hero-section {
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    border-radius: var(--flavor-border-radius, 8px);
}

.flavor-hero-section img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.flavor-hero-section.flavor-hero-full {
    max-height: 60vh;
    border-radius: 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* Platzhalter für Header-Bild (AI Wizard generiert) */
.flavor-hero-section.flavor-hero-placeholder {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--flavor-bg-secondary, rgba(255,255,255,0.05));
    border: 2px dashed var(--flavor-border-color, rgba(255,255,255,0.2));
}

.flavor-hero-section.flavor-hero-placeholder p {
    margin: 0;
    padding: 2rem;
    font-size: 1.1rem;
}

.flavor-hero-section.flavor-hero-full img {
    max-height: 60vh;
}

@media (max-width: 768px) {
    .flavor-hero-section img {
        max-height: 250px;
    }
    .flavor-hero-section.flavor-hero-full img {
        max-height: 40vh;
    }
}

/* ============================================
   AI WIZARD - Zusätzliche Utility-Klassen
   ============================================ */

/* Section Container */
.flavor-section {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
}

/* Divider / Trennlinie */
.flavor-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--flavor-border-color, rgba(255,255,255,0.1)), transparent);
    margin: 2rem 0;
}

.flavor-divider-solid {
    background: var(--flavor-border-color, rgba(255,255,255,0.2));
}

.flavor-divider-dotted {
    background: none;
    border-bottom: 2px dotted var(--flavor-border-color, rgba(255,255,255,0.2));
}

/* Quote / Zitat-Box */
.flavor-quote {
    position: relative;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
    background: var(--flavor-bg-secondary, rgba(255,255,255,0.05));
    border-left: 4px solid var(--flavor-primary, #e91e63);
    border-radius: 0 var(--flavor-border-radius, 8px) var(--flavor-border-radius, 8px) 0;
    font-style: italic;
}

.flavor-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    color: var(--flavor-primary, #e91e63);
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 1;
}

.flavor-quote p {
    margin: 0;
    position: relative;
    z-index: 1;
}

.flavor-quote cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--flavor-text-muted, rgba(255,255,255,0.6));
}

/* Feature List mit Checkmarks */
.flavor-feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.flavor-feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.flavor-feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--flavor-success, #4caf50);
    font-weight: bold;
    font-size: 1.1rem;
}

.flavor-feature-list.flavor-feature-list-x li::before {
    content: '✗';
    color: var(--flavor-danger, #f44336);
}

/* Info Box (bereits vorhanden, hier erweitert) */
.flavor-info-box {
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--flavor-info-bg, rgba(33, 150, 243, 0.1));
    border: 1px solid var(--flavor-info-border, rgba(33, 150, 243, 0.3));
    border-radius: var(--flavor-border-radius, 8px);
    border-left: 4px solid var(--flavor-info, #2196f3);
}

.flavor-info-box p {
    margin: 0;
}

.flavor-info-box-muted {
    background: var(--flavor-bg-secondary, rgba(255,255,255,0.05));
    border-color: var(--flavor-border-color, rgba(255,255,255,0.1));
    border-left-color: var(--flavor-text-muted, rgba(255,255,255,0.4));
}

.flavor-info-box-warning {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.3);
    border-left-color: #ff9800;
}

.flavor-info-box-success {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
    border-left-color: #4caf50;
}

.flavor-info-box-danger {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
    border-left-color: #f44336;
}

/* Highlight Box - eigene Theme-Editor Variablen */
.flavor-highlight-box {
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: linear-gradient(135deg, var(--flavor-highlight-bg, #667eea) 0%, var(--flavor-highlight-bg-end, #764ba2) 100%);
    border-radius: var(--flavor-border-radius, 8px);
    color: var(--flavor-highlight-text, #ffffff);
    text-align: center;
}

.flavor-highlight-box h1,
.flavor-highlight-box h2,
.flavor-highlight-box h3,
.flavor-highlight-box h4,
.flavor-highlight-box h5,
.flavor-highlight-box h6 {
    color: var(--flavor-highlight-heading, inherit);
    margin-bottom: 0.5rem;
}

.flavor-highlight-box p {
    margin: 0;
    opacity: 0.95;
}

/* Text Utilities */
.flavor-text-center {
    text-align: center;
}

.flavor-text-left {
    text-align: left;
}

.flavor-text-right {
    text-align: right;
}

.flavor-text-muted {
    color: var(--flavor-text-muted, rgba(255,255,255,0.6)) !important;
}

.flavor-text-primary {
    color: var(--flavor-primary, #e91e63) !important;
}

.flavor-text-success {
    color: var(--flavor-success, #4caf50) !important;
}

.flavor-text-warning {
    color: var(--flavor-warning, #ff9800) !important;
}

.flavor-text-danger {
    color: var(--flavor-danger, #f44336) !important;
}

/* ============================================
   Ende AI WIZARD Utility-Klassen
   ============================================ */

.flavor-post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}

.flavor-post-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0;
    color: #fff;
}

.flavor-post-hero-content .flavor-post-title {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: var(--flavor-h1-font-weight);
}

.flavor-post-hero-content .flavor-post-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.125rem;
    margin-top: 0.5rem;
}

/* Content Wrapper */
.flavor-post-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

/* Header (wenn kein Hero) */
.flavor-post-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--flavor-border-color);
}

.flavor-post-header .flavor-post-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: var(--flavor-h1-font-weight);
    color: var(--flavor-text-heading);
    margin: 0;
    line-height: 1.3;
}

.flavor-post-header .flavor-post-subtitle {
    font-size: 1.125rem;
    color: var(--flavor-text-secondary);
    margin-top: 0.75rem;
}

/* Post Meta */
.flavor-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--flavor-border-color);
    font-size: 0.875rem;
    color: var(--flavor-text-muted);
}

.flavor-post-tags .label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--flavor-bg-hover);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--flavor-text-secondary);
    margin-right: 0.5rem;
    text-decoration: none;
}

.flavor-post-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Post Content */
.flavor-post-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--flavor-text-primary);
}

.flavor-post-content h1,
.flavor-post-content h2,
.flavor-post-content h3,
.flavor-post-content h4,
.flavor-post-content h5,
.flavor-post-content h6 {
    color: var(--flavor-text-heading);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.flavor-post-content h1 { font-size: 2rem; font-weight: var(--flavor-h1-font-weight); }
.flavor-post-content h2 { font-size: 1.5rem; font-weight: var(--flavor-h2-font-weight); }
.flavor-post-content h3 { font-size: 1.25rem; font-weight: var(--flavor-h3-font-weight); }
.flavor-post-content h4 { font-size: 1.125rem; font-weight: var(--flavor-h4-font-weight); }
.flavor-post-content h5 { font-size: 1rem; font-weight: var(--flavor-h5-font-weight); }
.flavor-post-content h6 { font-size: 0.875rem; font-weight: var(--flavor-h6-font-weight); }

.flavor-post-content p {
    margin-bottom: 1.25rem;
}

.flavor-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--flavor-border-radius);
    margin: 1.5rem 0;
}

/* Zentrierte Bilder (text-center oder inline style) - mit !important wegen Tailwind/Flowbite Überschreibung */
.flavor-post-content .text-center img,
.flavor-post-content p[style*="text-align: center"] img,
.flavor-post-content p[style*="text-align:center"] img,
.flavor-post-content p.text-center img,
/* Auch für TinyMCE Editor */
.mce-content-body .text-center img,
.mce-content-body p[style*="text-align: center"] img,
.mce-content-body p[style*="text-align:center"] img,
.mce-content-body p.text-center img,
/* Generische Regel für alle zentrierten Container */
.text-center img,
p[style*="text-align: center"] img,
p[style*="text-align:center"] img,
p.text-center img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.flavor-post-content a {
    color: var(--flavor-text-link);
    text-decoration: underline;
}

.flavor-post-content a:hover {
    color: var(--flavor-text-link-hover);
}

.flavor-post-content ul,
.flavor-post-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.flavor-post-content li {
    margin-bottom: 0.5rem;
}

.flavor-post-content blockquote {
    border-left: 4px solid var(--flavor-btn-primary-bg);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--flavor-text-secondary);
}

/* Post Navigation */
.flavor-post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--flavor-border-color);
}

.flavor-icon {
    flex-shrink: 0;
}

/* ============================================
   Auth Pages (Login, Forgot-Password, Signup)
   NUR für Seiten mit .form-signin Container!
   ============================================ */

/* Body NUR wenn form-signin vorhanden - via CSS :has() */
body:has(.form-signin) {
    font-family: 'Poppins', sans-serif;
    background-color: #000000 !important;
    font-size: 15px;
    color: #fff;
}

/* Form-Signin Container - mit eigenem Rahmen */
.form-signin {
    width: 100%;
    max-width: 450px;
    margin: 50px auto;
    background-color: #480916;
    border: 2px solid #F3C27A;
    border-radius: 25px;
    padding: 20px 20px;
}

@media (min-height: 700px) {
    .form-signin {
        transform: translate(-50%, -50%);
        top: 50%;
        position: absolute;
        left: 50%;
        margin: 0;
    }
}

/* Alle Styles NUR innerhalb .form-signin */
.form-signin .btn-primary {
    color: #F3C27A !important;
    background: #480916 !important;
    border-color: #480916 !important;
}

.form-signin .btn-primary:hover,
.form-signin .btn-primary:active,
.form-signin .btn-primary:focus {
    color: #fff !important;
    background-color: #730931 !important;
    border-color: #730931 !important;
}

/* Cards NUR innerhalb .form-signin */
.form-signin .card {
    background: #1d1d1d94 !important;
    border: 1px solid #6f1225 !important;
}

.form-signin .card-header {
    background: #480916 !important;
    border-bottom: 1px solid #F3C27A !important;
    color: #F3C27A !important;
}

.form-signin .card-header.bg-dark {
    background: #480916 !important;
    color: #F3C27A !important;
}

.form-signin .card-body {
    background: #1d1d1d94 !important;
    color: #fff !important;
}

/* Form-Elemente NUR innerhalb .form-signin */
.form-signin .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #6f1225 !important;
    color: #fff !important;
}

.form-signin .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.form-signin .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #F3C27A !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(243, 194, 122, 0.25) !important;
}

/* Browser-Autofill Styling */
.form-signin .form-control:-webkit-autofill,
.form-signin .form-control:-webkit-autofill:hover,
.form-signin .form-control:-webkit-autofill:focus,
.form-signin .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1) inset !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #6f1225 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form-signin .input-group-text {
    background-color: #480916 !important;
    border-color: #6f1225 !important;
    color: #F3C27A !important;
}

.form-signin .card a {
    color: #F3C27A !important;
}

.form-signin .card a:hover {
    color: #d4a860 !important;
}

/* Custom Checkbox Labels */
.form-signin .custom-control-label {
    color: #F3C27A !important;
}

.form-signin .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #F3C27A !important;
    border-color: #F3C27A !important;
}

/* Toggle Password Button */
.form-signin .btn-toggle-password {
    background-color: #480916 !important;
    border-color: #6f1225 !important;
    color: #F3C27A !important;
}

.form-signin .btn-toggle-password:hover {
    color: #fff !important;
}

/* Links außerhalb Cards aber innerhalb form-signin */
.form-signin > a {
    color: #F3C27A !important;
}

.form-signin > a:hover {
    color: #d4a860 !important;
}

/* Text Utilities NUR in form-signin */
.form-signin .text-danger {
    color: #dc3545 !important;
}

/* =============================================
   Post Featured Image - Bild links, Text rechts
   ============================================= */
.flavor-post-featured-image {
    float: left;
    width: 280px;
    margin: 0 1.5rem 1rem 0;
    flex-shrink: 0;
}

.flavor-post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0;
}

/* Intro: Text fließt um das Bild herum */
.flavor-post-featured-image + .flavor-intro {
    /* Kein overflow: auto - damit Text um Bild fließt */
}

/* Grids immer unter dem Bild */
.flavor-article-content > .flavor-grid-2,
.flavor-article-content > .flavor-grid-3,
.flavor-article-content > .flavor-grid-4 {
    clear: both;
}

/* Clearfix */
.flavor-article-content::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 768px) {
    /* Auf Mobile: Float deaktivieren, Bild volle Breite */
    .flavor-post-featured-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
    }

    .flavor-post-featured-image img {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
}

/* H2 neben Featured Image: kein oberer Abstand */
.flavor-post-featured-image + .flavor-intro h2:first-child,
.flavor-post-featured-image + div h2:first-child {
    margin-top: 0;
}

/* ============================================
   Alert Styles für Flavor Theme
   ============================================ */

.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--flavor-border-radius, 8px);
    border: 1px solid transparent;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-success {
    /* Fallback für ältere Browser */
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
    border-color: rgba(34, 197, 94, 0.3);
    /* Moderne Browser mit CSS-Variablen */
    background: linear-gradient(135deg, color-mix(in srgb, var(--flavor-alert-success-bg, #22c55e) 15%, transparent) 0%, color-mix(in srgb, var(--flavor-alert-success-bg, #22c55e) 8%, transparent) 100%);
    border-color: color-mix(in srgb, var(--flavor-alert-success-bg, #22c55e) 30%, transparent);
    color: var(--flavor-alert-success-text, #4ade80);
}

.alert-success::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: rgba(34, 197, 94, 0.2);
    background: color-mix(in srgb, var(--flavor-alert-success-bg, #22c55e) 20%, transparent);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.875rem;
    color: var(--flavor-alert-success-bg, #22c55e);
}

.alert-danger {
    /* Fallback für ältere Browser */
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    /* Moderne Browser mit CSS-Variablen */
    background: linear-gradient(135deg, color-mix(in srgb, var(--flavor-alert-danger-bg, #ef4444) 15%, transparent) 0%, color-mix(in srgb, var(--flavor-alert-danger-bg, #ef4444) 8%, transparent) 100%);
    border-color: color-mix(in srgb, var(--flavor-alert-danger-bg, #ef4444) 30%, transparent);
    color: var(--flavor-alert-danger-text, #f87171);
}

.alert-danger::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: rgba(239, 68, 68, 0.2);
    background: color-mix(in srgb, var(--flavor-alert-danger-bg, #ef4444) 20%, transparent);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.875rem;
    color: var(--flavor-alert-danger-bg, #ef4444);
}

.alert-warning {
    /* Fallback für ältere Browser */
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    /* Moderne Browser mit CSS-Variablen */
    background: linear-gradient(135deg, color-mix(in srgb, var(--flavor-alert-warning-bg, #f59e0b) 15%, transparent) 0%, color-mix(in srgb, var(--flavor-alert-warning-bg, #f59e0b) 8%, transparent) 100%);
    border-color: color-mix(in srgb, var(--flavor-alert-warning-bg, #f59e0b) 30%, transparent);
    color: var(--flavor-alert-warning-text, #fbbf24);
}

.alert-warning::before {
    content: "⚠";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: rgba(245, 158, 11, 0.2);
    background: color-mix(in srgb, var(--flavor-alert-warning-bg, #f59e0b) 20%, transparent);
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--flavor-alert-warning-bg, #f59e0b);
}

.alert-info,
.alert-site-color {
    /* Fallback für ältere Browser */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    /* Moderne Browser mit CSS-Variablen */
    background: linear-gradient(135deg, color-mix(in srgb, var(--flavor-alert-info-bg, #3b82f6) 15%, transparent) 0%, color-mix(in srgb, var(--flavor-alert-info-bg, #3b82f6) 8%, transparent) 100%);
    border-color: color-mix(in srgb, var(--flavor-alert-info-bg, #3b82f6) 30%, transparent);
    color: var(--flavor-alert-info-text, #60a5fa);
}

.alert-info::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: rgba(59, 130, 246, 0.2);
    background: color-mix(in srgb, var(--flavor-alert-info-bg, #3b82f6) 20%, transparent);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--flavor-alert-info-bg, #3b82f6);
}

.alert .close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
}

.alert .close:hover {
    opacity: 1;
}

.alert ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.alert ul li {
    margin-bottom: 0.25rem;
}

.alert strong {
    font-weight: 600;
}

/* ============================================
   SIGNUP PAGE
   ============================================ */

.flavor-signup-page {
    padding: 2rem 0;
    background: var(--flavor-bg-body, #000);
}

.flavor-signup-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.flavor-signup-header {
    text-align: center;
    margin-bottom: 2rem;
}

.flavor-signup-title {
    font-size: 2rem;
    font-weight: var(--flavor-h1-font-weight, 600);
    color: var(--flavor-text-heading, #fff);
    margin: 0 0 0.5rem;
}

.flavor-signup-subtitle {
    font-size: 1rem;
    color: var(--flavor-text-secondary, #a1a1aa);
    margin: 0;
}

.flavor-signup-card {
    background: var(--flavor-bg-dropdown, #18181b);
    border-radius: var(--flavor-border-radius, 8px);
    border: 1px solid var(--flavor-border-color, #27272a);
    overflow: hidden;
}

.flavor-signup-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--flavor-bg-header, #0a0a0a);
    border-bottom: 1px solid var(--flavor-border-color, #27272a);
}

.flavor-signup-logo img {
    height: var(--flavor-logo-height, 48px);
    width: auto;
}

.flavor-signup-body {
    padding: 2rem;
}

.flavor-signup-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.flavor-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .flavor-form-row {
        grid-template-columns: 1fr;
    }
}

.flavor-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    overflow: hidden;
}

.flavor-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-label-centered {
    text-align: center;
}

.flavor-required {
    color: var(--flavor-danger, #ef4444);
}

.flavor-input,
.flavor-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    color: var(--flavor-text-primary, #e4e4e7);
    background: var(--flavor-bg-body, #000);
    border: 1px solid var(--flavor-border-color, #27272a);
    border-radius: var(--flavor-border-radius, 8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.flavor-input:focus,
.flavor-select:focus {
    outline: none;
    border-color: var(--flavor-btn-primary-bg, #fff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.flavor-input::placeholder {
    color: var(--flavor-text-muted, #71717a);
}

.flavor-input-group {
    position: relative;
    display: flex;
}

.flavor-input-group .flavor-input {
    padding-right: 3rem;
}

.flavor-input-addon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--flavor-text-muted, #71717a);
    cursor: pointer;
    transition: color 0.2s ease;
}

.flavor-input-addon:hover,
.flavor-input-addon.active {
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-error-text {
    font-size: 0.8rem;
    color: var(--flavor-danger, #ef4444);
    margin: 0.25rem 0 0;
}

/* Gender & Interest Sections */
.flavor-gender-section {
    text-align: center;
}

.flavor-gender-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.flavor-gender-row .flavor-label {
    margin: 0;
}

.flavor-gender-row .flavor-select {
    width: auto;
    min-width: 200px;
}

.flavor-interest-section {
    text-align: center;
}

.flavor-checkbox-group {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Custom Checkbox */
.flavor-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.flavor-checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--flavor-border-color, #3f3f46);
    border-radius: 4px;
    background: var(--flavor-bg-body, #000);
    transition: all 0.2s ease;
    position: relative;
    margin-top: 2px;
}

.flavor-checkbox:checked + .flavor-checkbox-custom {
    background: var(--flavor-btn-primary-bg, #fff);
    border-color: var(--flavor-btn-primary-bg, #fff);
}

.flavor-checkbox:checked + .flavor-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--flavor-btn-primary-text, #000);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.flavor-checkbox-text {
    line-height: 1.4;
}

/* Terms Section */
.flavor-terms-section {
    background: var(--flavor-bg-hover, #1a1a1a);
    border-radius: var(--flavor-border-radius, 8px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.flavor-link {
    color: var(--flavor-text-link, #e4e4e7);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.flavor-link:hover {
    color: var(--flavor-text-link-hover, #fff);
}

/* Submit Button */
.flavor-btn-full {
    width: 100%;
}

.flavor-btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
}

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

/* Footer */
.flavor-signup-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--flavor-border-color, #27272a);
    color: var(--flavor-text-secondary, #a1a1aa);
}

.flavor-signup-footer p {
    margin: 0;
}

/* Modal Styles for Signup */

/* Flowbite Modal Wrapper - nach unten verschieben wegen Navbar */
.flavor-modal {
    padding-top: 80px; /* Platz für Navbar */
    background-color: rgba(0, 0, 0, 0.7);
}

.flavor-modal-container {
    margin: 0 auto;
}

.flavor-modal-content {
    background: var(--flavor-bg-dropdown, #18181b);
    border: 1px solid var(--flavor-border-color, #27272a);
    border-radius: var(--flavor-border-radius, 8px);
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-modal-close-btn {
    background: transparent;
    border: none;
    color: var(--flavor-text-muted, #71717a);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.flavor-modal-close-btn:hover {
    background: var(--flavor-bg-hover, #27272a);
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-modal-text {
    color: var(--flavor-text-secondary, #a1a1aa);
    line-height: 1.6;
}

.flavor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--flavor-border-color, #27272a) !important;
    background: var(--flavor-bg-dropdown, #18181b);
}

.flavor-modal-header h3 {
    color: var(--flavor-text-heading, #fff);
    margin: 0;
}

.flavor-modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--flavor-text-heading, #fff);
    margin: 0;
}

.flavor-modal-close {
    background: none;
    border: none;
    color: var(--flavor-text-muted, #71717a);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.flavor-modal-close:hover {
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-modal-body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--flavor-bg-dropdown, #18181b);
}

.flavor-modal-body h3,
.flavor-modal-body h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--flavor-text-heading, #fff);
    margin: 0 0 1rem;
}

.flavor-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--flavor-border-color, #27272a) !important;
    display: flex;
    justify-content: flex-end;
    background: var(--flavor-bg-dropdown, #18181b);
}

/* ============================================
   Legal Popup Modal (Vanilla JS)
   ============================================ */
.flavor-legal-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

.flavor-legal-modal.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.flavor-legal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.flavor-legal-dialog {
    position: relative;
    background-color: var(--flavor-bg-dropdown, #18181b);
    border: 1px solid var(--flavor-border-color);
    border-radius: var(--flavor-border-radius, 8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.flavor-legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--flavor-border-color);
}

.flavor-legal-header h3 {
    color: var(--flavor-text-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.flavor-legal-close {
    color: var(--flavor-text-muted);
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.flavor-legal-close:hover {
    color: var(--flavor-text-primary);
    background-color: var(--flavor-bg-hover);
}

.flavor-legal-body {
    padding: 1.5rem;
    overflow-y: auto;
    color: var(--flavor-text-primary);
    line-height: 1.6;
}

.flavor-legal-body h1,
.flavor-legal-body h2,
.flavor-legal-body h3,
.flavor-legal-body h4 {
    color: var(--flavor-text-heading);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.flavor-legal-body h1:first-child,
.flavor-legal-body h2:first-child,
.flavor-legal-body h3:first-child {
    margin-top: 0;
}

.flavor-legal-body p {
    margin-bottom: 1rem;
}

.flavor-legal-body ul,
.flavor-legal-body ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.flavor-legal-body a {
    color: var(--flavor-link-color, var(--flavor-primary));
}

.flavor-legal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--flavor-border-color);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .flavor-legal-modal {
        padding: 0.5rem;
    }

    .flavor-legal-dialog {
        max-height: 95vh;
    }

    .flavor-legal-header {
        padding: 0.75rem 1rem;
    }

    .flavor-legal-header h3 {
        font-size: 1.1rem;
    }

    .flavor-legal-body {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .flavor-legal-footer {
        padding: 0.75rem 1rem;
    }
}

/* Event-Karten Styling */
.flavor-event-card {
    background: var(--flavor-card-bg, #18181b);
    border: 1px solid var(--flavor-card-border, #27272a);
    border-radius: var(--flavor-card-radius, 8px);
    color: var(--flavor-text-primary, #e4e4e7);
    transition: all 0.2s ease;
}

.flavor-event-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: var(--flavor-btn-primary-bg);
    transform: translateY(-3px);
}

.flavor-event-card .event-card-title {
    color: var(--flavor-text-heading, #fff);
}

.flavor-event-card .event-card-meta {
    color: var(--flavor-text-muted, #71717a);
}

.flavor-event-card .event-card-excerpt {
    color: var(--flavor-text-secondary, #a1a1aa);
}

.flavor-date-badge {
    background: var(--flavor-card-bg, #18181b);
    border: 1px solid var(--flavor-card-border, #27272a);
}

.flavor-date-badge .date-day {
    color: var(--flavor-menu-active, #f3c27a);
}

.flavor-date-badge .date-month {
    color: var(--flavor-text-muted, #71717a);
}

.flavor-image-placeholder {
    background: var(--flavor-bg-hover, #27272a);
    color: var(--flavor-text-muted, #71717a);
}

/* Einheitliche Bildgröße für horizontale Event-Karten */
@media (min-width: 768px) {
    .flavor-event-card .flavor-image-placeholder.flex-shrink-0 {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
    }
}

/* Mobile: Event-Bilder zentriert und volle Breite */
@media (max-width: 767px) {
    .flavor-event-card .flavor-image-placeholder.flex-shrink-0 {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
}

.event-card-content {
    padding: 12px 16px;
}

/* Event Single Page - User Tags (Registered Users) */
.flavor-event-user-tag a {
    color: var(--flavor-accent, #d4a574);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.flavor-event-user-tag a:hover {
    color: var(--flavor-accent-hover, #e8c49a);
    text-decoration-style: solid;
}

/* ============================================
   Confirmation Code / Verification Inputs
   ============================================ */
.flavor-verification-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 1.5rem 0;
}

.flavor-verification-group {
    display: flex;
    gap: 10px;
}

.flavor-verification-input {
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border: 2px solid var(--flavor-border-color, #27272a);
    border-radius: var(--flavor-border-radius, 8px);
    transition: all 0.2s ease;
    background: var(--flavor-bg-input, #18181b);
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-verification-input:focus {
    outline: none;
    border-color: var(--flavor-btn-primary-bg);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.flavor-verification-input:not(:placeholder-shown) {
    border-color: var(--flavor-btn-primary-bg);
}

.flavor-verification-separator {
    font-size: 32px;
    font-weight: bold;
    color: var(--flavor-text-muted, #71717a);
    user-select: none;
}

.flavor-info-box {
    background: var(--flavor-bg-hover, #27272a);
    border: 1px solid var(--flavor-border-color, #3f3f46);
    border-radius: var(--flavor-border-radius, 8px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--flavor-text-secondary, #a1a1aa);
    line-height: 1.6;
}

.flavor-info-box-muted {
    background: transparent;
    border: 1px dashed var(--flavor-border-color, #3f3f46);
}

.flavor-info-box p {
    margin: 0 0 0.75rem;
}

.flavor-info-box p:last-child {
    margin-bottom: 0;
}

.flavor-confirm-form {
    margin: 1.5rem 0;
}

.flavor-form-actions {
    margin-top: 1.5rem;
}

@media (max-width: 576px) {
    .flavor-verification-input {
        width: 40px;
        height: 50px;
        font-size: 20px;
    }

    .flavor-verification-group {
        gap: 6px;
    }

    .flavor-verification-container {
        gap: 10px;
    }
}

/* ============================================
   Newsletter Form Styles
   ============================================ */
.flavor-static-value {
    background: var(--flavor-bg-hover, #27272a);
    border: 1px solid var(--flavor-border-color, #3f3f46);
    border-radius: var(--flavor-border-radius, 8px);
    padding: 0.75rem 1rem;
    color: var(--flavor-text-primary, #e4e4e7);
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: break-word;
    min-width: 0;
}

.flavor-newsletter-item {
    background: var(--flavor-bg-hover, #27272a);
    border: 1px solid var(--flavor-border-color, #3f3f46);
    border-radius: var(--flavor-border-radius, 8px);
    padding: 1rem;
    margin-bottom: 1rem;
}

.flavor-newsletter-item .flavor-label {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.flavor-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.flavor-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
}

.flavor-radio {
    display: none;
}

.flavor-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--flavor-border-color, #3f3f46);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

.flavor-radio:checked + .flavor-radio-custom {
    border-color: var(--flavor-btn-primary-bg);
}

.flavor-radio:checked + .flavor-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--flavor-btn-primary-bg);
    border-radius: 50%;
}

.flavor-radio-text {
    color: var(--flavor-text-primary, #e4e4e7);
}

.flavor-newsletter-terms {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flavor-newsletter-terms li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.flavor-newsletter-terms li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--flavor-btn-primary-bg);
    border-radius: 50%;
}

.flavor-text-muted {
    color: var(--flavor-text-muted, #71717a);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.flavor-input-disabled {
    background: var(--flavor-bg-hover, #27272a) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* ============================================
   Dynamic Content Alignment (Theme Settings)
   Body-Klassen steuern die Ausrichtung
   ============================================ */

/* --- Intro Text Alignment --- */
body.flavor-intro-align-left .flavor-intro {
    text-align: left;
}

body.flavor-intro-align-center .flavor-intro {
    text-align: center;
}

body.flavor-intro-align-right .flavor-intro {
    text-align: right;
}

/* --- CTA (Call-to-Action) Alignment --- */
body.flavor-cta-align-left .flavor-cta {
    text-align: left;
}

body.flavor-cta-align-center .flavor-cta {
    text-align: center;
}

body.flavor-cta-align-right .flavor-cta {
    text-align: right;
}

/* --- Card Text Alignment --- */
body.flavor-card-text-align-left .flavor-card {
    text-align: left;
}

body.flavor-card-text-align-center .flavor-card {
    text-align: center;
}

body.flavor-card-text-align-right .flavor-card {
    text-align: right;
}

/* Card Title und Description folgen dem Card-Alignment */
body.flavor-card-text-align-center .flavor-card .flavor-card-title,
body.flavor-card-text-align-center .flavor-card .flavor-card-description {
    text-align: center;
}

body.flavor-card-text-align-right .flavor-card .flavor-card-title,
body.flavor-card-text-align-right .flavor-card .flavor-card-description {
    text-align: right;
}

/* --- General Content Alignment --- */
body.flavor-content-align-left .flavor-article-content {
    text-align: left;
}

body.flavor-content-align-center .flavor-article-content {
    text-align: center;
}

body.flavor-content-align-right .flavor-article-content {
    text-align: right;
}

/* Section und Divider auch dem Content-Alignment folgend */
body.flavor-content-align-center .flavor-section {
    text-align: center;
}

body.flavor-content-align-right .flavor-section {
    text-align: right;
}

/* --- Grid Items: Card-Alignment hat Priorität --- */
body.flavor-card-text-align-center .flavor-grid-2 .flavor-card,
body.flavor-card-text-align-center .flavor-grid-3 .flavor-card,
body.flavor-card-text-align-center .flavor-grid-4 .flavor-card {
    text-align: center;
}

body.flavor-card-text-align-right .flavor-grid-2 .flavor-card,
body.flavor-card-text-align-right .flavor-grid-3 .flavor-card,
body.flavor-card-text-align-right .flavor-grid-4 .flavor-card {
    text-align: right;
}

/* --- Info Boxes folgen Content-Alignment --- */
body.flavor-content-align-center .flavor-info-box,
body.flavor-content-align-center .flavor-highlight-box {
    text-align: center;
}

body.flavor-content-align-right .flavor-info-box,
body.flavor-content-align-right .flavor-highlight-box {
    text-align: right;
}

/* --- Quote bleibt immer zentriert (Design-Entscheidung) --- */
.flavor-quote {
    text-align: center;
}

/* --- Feature List bleibt links (für Checkmarks) --- */
.flavor-feature-list {
    text-align: left;
}

/* --- Block Headings folgen Intro-Alignment --- */
body.flavor-intro-align-left .flavor-block h2,
body.flavor-intro-align-left .flavor-block h2 + p,
body.flavor-intro-align-left .flavor-block-header {
    text-align: left;
}

body.flavor-intro-align-center .flavor-block h2,
body.flavor-intro-align-center .flavor-block h2 + p,
body.flavor-intro-align-center .flavor-block-header {
    text-align: center;
}

body.flavor-intro-align-right .flavor-block h2,
body.flavor-intro-align-right .flavor-block h2 + p,
body.flavor-intro-align-right .flavor-block-header {
    text-align: right;
}

/* --- Welcome/Stats Section folgt Intro-Alignment --- */
body.flavor-intro-align-left .flavor-welcome-text,
body.flavor-intro-align-left .flavor-welcome-text h2,
body.flavor-intro-align-left .flavor-welcome-content {
    text-align: left;
}

body.flavor-intro-align-center .flavor-welcome-text,
body.flavor-intro-align-center .flavor-welcome-text h2,
body.flavor-intro-align-center .flavor-welcome-content {
    text-align: center;
}

body.flavor-intro-align-right .flavor-welcome-text,
body.flavor-intro-align-right .flavor-welcome-text h2,
body.flavor-intro-align-right .flavor-welcome-content {
    text-align: right;
}

/* --- Welcome/Stats RECHTE Seite: Bleibt IMMER linksbündig (Design-Entscheidung) ---
   Stats und Buttons sehen im linken Grid-Layout am besten aus.
   Alignment-Einstellungen betreffen nur die LINKE Seite (Text/Excerpt). */

/* ============================================
   Event Single Page Styles
   ============================================ */

/* Hide elements until Alpine.js initializes */
[x-cloak] { display: none !important; }

/* Event Single Page Layout */
.flavor-event-single {
    padding: 2rem 0;
}
.flavor-event-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--flavor-text-muted, #9ca3af);
}
.flavor-event-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--flavor-text-muted, #9ca3af);
    text-decoration: none;
    transition: color 0.2s;
}
.flavor-event-breadcrumb a:hover {
    color: var(--flavor-text-link, #d4a574);
}
.flavor-event-breadcrumb svg {
    width: 12px;
    height: 12px;
    opacity: 0.5;
}
.flavor-event-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.flavor-event-main {
    flex: 1;
    min-width: 0;
}
.flavor-event-sidebar {
    flex-shrink: 0;
    width: 320px;
    position: sticky;
    top: 100px;
}
@media (max-width: 1024px) {
    .flavor-event-layout {
        flex-direction: column;
    }
    .flavor-event-sidebar {
        width: 100%;
        position: static;
    }
}

/* Event Image - optimiert für 16:9 Bilder */
.flavor-event-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #1a1a1a;
}
.flavor-event-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    max-height: 500px;
}
.flavor-event-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #dc2626;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Event Title */
.flavor-event-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--flavor-text-heading, #ffffff);
    margin-bottom: 0.5rem;
}
.flavor-event-subtitle {
    font-size: 1.125rem;
    color: var(--flavor-text-muted, #9ca3af);
    margin-bottom: 1.5rem;
}

/* Content Card - Event Single Page */
.flavor-event-single .flavor-event-card {
    background: var(--flavor-card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--flavor-card-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.flavor-event-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--flavor-text-heading, #ffffff);
    margin-bottom: 1rem;
}
.flavor-event-card-title svg {
    width: 20px;
    height: 20px;
    color: var(--flavor-text-link, #d4a574);
}
.flavor-event-content {
    color: var(--flavor-text-secondary, #d1d5db);
    line-height: 1.7;
}
.flavor-event-content p {
    margin-bottom: 1rem;
}

/* Registered Users */
.flavor-event-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.flavor-event-user-tag {
    background: var(--flavor-bg-hover, rgba(255,255,255,0.1));
    color: var(--flavor-text-primary, #f3f4f6);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: default;
    position: relative;
}

/* Sidebar Card */
.flavor-sidebar-card {
    background: var(--flavor-card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--flavor-card-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 1.5rem;
}
.flavor-event-date-badge {
    text-align: center;
    background: var(--flavor-bg-hover, rgba(255,255,255,0.1));
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.flavor-event-date-day {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--flavor-text-link, #d4a574);
    line-height: 1;
}
.flavor-event-date-month {
    font-size: 0.875rem;
    color: var(--flavor-text-muted, #9ca3af);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Sidebar Info Items */
.flavor-sidebar-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.flavor-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.flavor-sidebar-icon {
    width: 40px;
    height: 40px;
    background: var(--flavor-bg-hover, rgba(255,255,255,0.1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.flavor-sidebar-icon svg {
    width: 18px;
    height: 18px;
    color: var(--flavor-text-muted, #9ca3af);
}
.flavor-sidebar-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--flavor-text-primary, #f3f4f6);
}
.flavor-sidebar-value {
    font-size: 0.875rem;
    color: var(--flavor-text-muted, #9ca3af);
}
.flavor-sidebar-time {
    color: var(--flavor-text-link, #d4a574);
}

/* Past Event Banner */
.flavor-past-banner {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    color: #fca5a5;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Action Buttons */
.flavor-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--flavor-border-color, rgba(255,255,255,0.1));
}

/* Share Section */
.flavor-share-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--flavor-border-color, rgba(255,255,255,0.1));
}
.flavor-share-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--flavor-text-primary, #f3f4f6);
    margin-bottom: 0.75rem;
}
.flavor-share-buttons {
    display: flex;
    gap: 0.5rem;
}
.flavor-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: opacity 0.2s;
}
.flavor-share-btn:hover {
    opacity: 0.8;
}
.flavor-share-btn.facebook { background: #1877f2; }
.flavor-share-btn.twitter { background: #1da1f2; }
.flavor-share-btn.whatsapp { background: #25d366; }
.flavor-share-btn.copy {
    background: var(--flavor-bg-hover, rgba(255,255,255,0.1));
    color: var(--flavor-text-muted, #9ca3af);
}

/* Booking Tabs */
.flavor-booking-tabs {
    display: flex;
    border-bottom: 1px solid var(--flavor-border-color, rgba(255,255,255,0.1));
    margin: -1.5rem -1.5rem 1.5rem;
    padding: 0 1.5rem;
}
.flavor-booking-tab {
    flex: 1;
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--flavor-text-muted, #9ca3af);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    text-decoration: none;
}
.flavor-booking-tab:hover {
    color: var(--flavor-text-primary, #f3f4f6);
}
.flavor-booking-tab.active {
    color: var(--flavor-text-link, #d4a574);
    border-bottom-color: var(--flavor-text-link, #d4a574);
}
.flavor-booking-tab svg {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Form Styles */
.flavor-form-group {
    margin-bottom: 1.5rem;
}
.flavor-form-row {
    display: flex;
    gap: 1rem;
}
.flavor-form-row > * {
    flex: 1;
}
@media (max-width: 768px) {
    .flavor-form-row {
        flex-direction: column;
    }
}
.flavor-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--flavor-text-primary, #f3f4f6);
    margin-bottom: 0.5rem;
}
.flavor-form-hint {
    font-size: 0.75rem;
    color: var(--flavor-text-muted, #9ca3af);
    margin-left: 0.5rem;
}
.flavor-form-input,
.flavor-form-select,
.flavor-form-textarea {
    width: 100%;
    padding: 0.375rem 0.5rem;
    background: var(--flavor-bg-hover, rgba(255,255,255,0.05));
    border: 1px solid var(--flavor-border-color, rgba(255,255,255,0.1));
    border-radius: 4px;
    color: var(--flavor-text-primary, #f3f4f6);
    font-size: 0.8125rem;
    line-height: 1.4;
    transition: border-color 0.2s;
}
.flavor-form-input:focus,
.flavor-form-select:focus,
.flavor-form-textarea:focus {
    outline: none;
    border-color: var(--flavor-text-link, #d4a574);
}
.flavor-form-input::placeholder,
.flavor-form-textarea::placeholder {
    color: var(--flavor-text-muted, #9ca3af);
}
.flavor-form-error {
    color: #f87171;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Ticket Grid */
.flavor-ticket-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.flavor-ticket-grid .flavor-ticket-item {
    flex: 1 1 auto;
    min-width: 120px;
}
@media (max-width: 480px) {
    .flavor-ticket-grid .flavor-ticket-item {
        flex: 1 1 45%;
    }
}
.flavor-ticket-item {
    background: var(--flavor-bg-hover, rgba(255,255,255,0.05));
    border-radius: 4px;
    padding: 0.5rem 0.625rem;
}
/* Compact Attendee Row */
.flavor-attendee-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.flavor-attendee-row label {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--flavor-text-primary, #f3f4f6);
    white-space: nowrap;
}
.flavor-attendee-row select {
    width: 60px;
    text-align: center;
    padding: 0.25rem 0.375rem;
}
.flavor-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.flavor-ticket-name {
    font-weight: 500;
    color: var(--flavor-text-primary, #f3f4f6);
}
.flavor-ticket-subtotal {
    font-size: 0.875rem;
    color: var(--flavor-text-muted, #9ca3af);
}
.flavor-ticket-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.flavor-ticket-price {
    font-size: 0.875rem;
    color: var(--flavor-text-muted, #9ca3af);
}

/* Total Box */
.flavor-total-box {
    background: var(--flavor-bg-hover, rgba(255,255,255,0.1));
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}
.flavor-total-label {
    font-weight: 600;
    color: var(--flavor-text-primary, #f3f4f6);
}
.flavor-total-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--flavor-text-link, #d4a574);
}

/* Form Footer */
.flavor-form-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--flavor-border-color, rgba(255,255,255,0.1));
    margin-top: 1.5rem;
}

/* Success Message */
.flavor-success-message {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
}
.flavor-success-message svg {
    width: 20px;
    height: 20px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 2px;
}
.flavor-success-title {
    font-weight: 500;
    color: #86efac;
    margin-bottom: 0.25rem;
}
.flavor-success-text {
    font-size: 0.875rem;
    color: #86efac;
}

/* Empty State */
.flavor-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}
.flavor-empty-state svg {
    width: 48px;
    height: 48px;
    color: var(--flavor-text-muted, #9ca3af);
    margin-bottom: 1rem;
}
.flavor-empty-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--flavor-text-primary, #f3f4f6);
    margin-bottom: 0.5rem;
}
.flavor-empty-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--flavor-text-link, #d4a574);
    text-decoration: none;
}
.flavor-empty-link:hover {
    text-decoration: underline;
}

/* ============================================
   Contact Form Styles
   ============================================ */

/* Contact Form Card - Theme Editor Colors */
.contact-form-card {
    background: var(--flavor-card-bg, #18181b);
    border: 1px solid var(--flavor-card-border, #27272a);
    border-radius: var(--flavor-card-radius, 8px);
    padding: 1.25rem 1.5rem;
    max-width: 600px;
}

/* Content Alignment from Theme Editor */
body.flavor-content-align-center .contact-form-card,
body.flavor-content-align-center .contact-info-bar,
body.flavor-content-align-center .map-container {
    margin-left: auto;
    margin-right: auto;
}

body.flavor-content-align-right .contact-form-card,
body.flavor-content-align-right .contact-info-bar,
body.flavor-content-align-right .map-container {
    margin-left: auto;
    margin-right: 0;
}

/* Form Rows */
.contact-form-card .form-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.contact-form-card .form-field {
    flex: 1;
    min-width: 0;
}

.contact-form-card .form-field.full-width {
    margin-bottom: 0.75rem;
}

/* Labels - compact */
.contact-form-card label {
    display: block;
    font-size: 0.75rem;
    color: var(--flavor-text-muted, #71717a);
    margin-bottom: 0.25rem;
}

.contact-form-card .req {
    color: var(--flavor-danger, #ef4444);
}

/* Inputs - Bootstrap-like compact style */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card textarea {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    background: var(--flavor-bg-body, #000);
    border: 1px solid var(--flavor-border-color, #333);
    border-radius: 4px;
    color: var(--flavor-text-primary, #e4e4e7);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
    outline: none;
    border-color: var(--flavor-btn-primary-bg, #fff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: var(--flavor-text-muted, #71717a);
    opacity: 0.6;
}

.contact-form-card textarea {
    resize: vertical;
    min-height: 80px;
}

/* Error messages */
.contact-form-card .field-error {
    display: block;
    color: var(--flavor-danger, #ef4444);
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

/* Captcha & Submit Row */
.captcha-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--flavor-border-color, #333);
}

.captcha-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.captcha-label {
    font-size: 0.8rem;
    color: var(--flavor-text-muted, #71717a);
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.captcha-box .captcha {
    width: 160px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.05) !important;
    padding: 0 10px !important;
    border: 1px solid var(--flavor-border-color, #333) !important;
}

.captcha-box .captcha:before {
    font-size: 1.5em !important;
    letter-spacing: 4px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.captcha-inputs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 44px;
}

.captcha-inputs input {
    width: 52px !important;
    height: 36px !important;
    padding: 0.25rem 0.35rem !important;
    text-align: center;
    font-size: 0.9rem !important;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid var(--flavor-border-color, #333);
    background: var(--flavor-bg-body, #000);
    color: var(--flavor-text-primary, #e4e4e7);
    border-radius: 4px;
}

.captcha-inputs .sep {
    color: var(--flavor-text-muted, #71717a);
    font-size: 1rem;
    font-weight: 500;
}

.submit-section .flavor-btn {
    white-space: nowrap;
}

/* Contact Info Bar */
.contact-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--flavor-bg-hover, rgba(255,255,255,0.03));
    border-radius: var(--flavor-border-radius, 6px);
    max-width: 600px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--flavor-text-secondary, #a1a1aa);
    text-decoration: none;
    transition: color 0.2s;
}

a.contact-link:hover {
    color: var(--flavor-text-link-hover, #fff);
}

.contact-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Map */
.map-container {
    margin-top: 1rem;
    border-radius: var(--flavor-border-radius, 6px);
    overflow: hidden;
    border: 1px solid var(--flavor-border-color, #333);
    max-width: 600px;
}

.map-container iframe {
    display: block;
}

/* Captcha reload link */
.captcha-box .flavor-captcha-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    color: var(--flavor-text-secondary, #a1a1aa);
    background: var(--flavor-bg-hover, rgba(255,255,255,0.08));
    border: 1px solid var(--flavor-border-color, #333);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.captcha-box .flavor-captcha-reload:hover {
    color: var(--flavor-text-primary, #e4e4e7);
    background: rgba(255,255,255,0.12);
}

/* Contact Form Mobile */
@media (max-width: 640px) {
    .contact-form-card {
        padding: 1rem;
    }

    .contact-form-card .form-row {
        flex-direction: column;
        gap: 0;
    }

    .contact-form-card .form-field {
        margin-bottom: 0.75rem;
    }

    .captcha-submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .captcha-section {
        justify-content: center;
    }

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

    .contact-info-bar {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   Utility Classes (Tailwind-compatible)
   ============================================ */

/* Margin Top */
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }

/* Margin Bottom */
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

/* Margin Y (top + bottom) */
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }

/* Gap */
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Width/Height */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }

/* Flexbox */
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* ============================================
   Auth Pages (Login, Signup Confirm, etc.)
   Bootstrap-Kompatibilität für Legacy-Templates
   ============================================ */

/* Layout - Padding für Header-Abstand */
.flavor-main.flavor-auth-page {
    padding-top: 120px;
}

/* Bootstrap Utility Classes Kompatibilität */
.flavor-auth-page .bg-white { background: var(--flavor-card-bg, #1a1a1a) !important; }
.flavor-auth-page .bg-light { background: rgba(255,255,255,0.05) !important; }
.flavor-auth-page .p-3 { padding: 1rem !important; }
.flavor-auth-page .p-4 { padding: 1.5rem !important; }
.flavor-auth-page .mb-3 { margin-bottom: 1rem !important; }
.flavor-auth-page .mb-4 { margin-bottom: 1.5rem !important; }
.flavor-auth-page .rounded { border-radius: var(--flavor-border-radius, 8px) !important; }
.flavor-auth-page .font-weight-bold { font-weight: 600 !important; }
.flavor-auth-page .text-center { text-align: center !important; }
.flavor-auth-page .text-danger { color: var(--flavor-danger, #ef4444) !important; }
.flavor-auth-page .text-success { color: #22c55e !important; }
.flavor-auth-page .text-muted { color: var(--flavor-text-muted, #888) !important; }

/* Form Inputs */
.flavor-auth-page .form-control,
.flavor-auth-page input[type="text"],
.flavor-auth-page input[type="email"],
.flavor-auth-page input[type="password"],
.flavor-auth-page input[type="number"] {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--flavor-border-color, #333);
    color: var(--flavor-text-primary, #fff);
    border-radius: var(--flavor-border-radius, 8px);
    padding: 0.75rem 1rem;
    width: 100%;
}

.flavor-auth-page .form-control:focus,
.flavor-auth-page input:focus {
    outline: none;
    border-color: var(--flavor-btn-primary-bg, #c9a227);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2);
}

/* Buttons */
.flavor-auth-page .btn,
.flavor-auth-page button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--flavor-border-radius, 8px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.flavor-auth-page .btn-primary,
.flavor-auth-page button[type="submit"] {
    background: var(--flavor-btn-primary-bg, #c9a227);
    color: var(--flavor-btn-primary-text, #000);
}

.flavor-auth-page .btn-primary:hover,
.flavor-auth-page button[type="submit"]:hover {
    background: var(--flavor-btn-primary-hover, #b8931f);
}

/* Button zentriert */
.flavor-auth-page #submit-btn,
.flavor-auth-page button[type="submit"].btn-lg {
    display: block;
    margin: 1.5rem auto 0;
}

/* Verification Code Input */
.flavor-auth-page .verification-code-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.flavor-auth-page .verification-code-input {
    width: 3rem !important;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 2px solid var(--flavor-border-color, #333);
    border-radius: var(--flavor-border-radius, 8px);
    color: var(--flavor-text-primary, #fff);
}

.flavor-auth-page .verification-code-input:focus {
    border-color: var(--flavor-btn-primary-bg, #c9a227);
    outline: none;
}

/* Alert Boxes */
.flavor-auth-page .alert {
    padding: 1rem;
    border-radius: var(--flavor-border-radius, 8px);
    margin-bottom: 1rem;
}

.flavor-auth-page .alert-success {
    background: var(--flavor-alert-success-bg, rgba(34, 197, 94, 0.1));
    color: var(--flavor-alert-success-text, #22c55e);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.flavor-auth-page .alert-danger {
    background: var(--flavor-alert-danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--flavor-alert-danger-text, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Maintenance Badge */
.flavor-auth-page .badge {
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 9999;
}

.flavor-auth-page .badge-danger {
    background: var(--flavor-danger, #ef4444);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Label über Verification Code zentriert */
.flavor-auth-page label.font-weight-bold {
    display: block;
    text-align: center;
    margin-bottom: 1.5rem;
}