/* buzz.city - Main CSS File */

/* 0. Framework (muss ZUERST geladen werden) */
/* ===== 00-framework/tailwind-minimal.css ===== */
/* Minimal Tailwind CSS - nur verwendete Klassen */
/* Normalize/Reset */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
::before,::after{–tw-content:’’}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,“Helvetica Neue”,Arial,“Noto Sans”,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”,“Noto Color Emoji”;font-feature-settings:normal;font-variation-settings:normal}
body{margin:0;line-height:inherit}

/* Layout */
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:0}
.top-0{top:0}
.right-0{right:0}
.left-0{left:0}
.top-4{top:1rem}
.left-4{left:1rem}
.right-4{right:1rem}
.top-16{top:4rem}
.top-12{top:50%}
.right-3{right:0.75rem}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}

/* Display */
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}
.hidden{display:none}

/* Flexbox */
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

/* Spacing */
.m-4{margin:1rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:0.5rem}
.mb-4{margin-bottom:1rem}
.mr-2{margin-right:0.5rem}
.mt-2{margin-top:0.5rem}
.mt-4{margin-top:1rem}
.mt-12{margin-top:3rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.pr-8{padding-right:2rem}
.pl-3{padding-left:0.75rem}

/* Sizing */
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-12{height:3rem}
.h-16{height:4rem}
.h-full{height:100%}
.h-screen{height:100vh}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-12{width:3rem}
.w-full{width:100%}
.w-80{width:20rem}
.max-w-7xl{max-width:80rem}
.max-w-md{max-width:28rem}
.max-w-300px{max-width:300px}
.max-h-200px{max-height:200px}
.min-h-500px{min-height:500px}

/* Colors - Primary Theme */
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-black{background-color:#000}
.bg-primary-500{background-color:#3b82f6}
.bg-primary-600{background-color:#2563eb}
.text-white{color:#fff}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-900{color:#111827}
.text-blue-600{color:#2563eb}
.text-primary-500{color:#3b82f6}
.text-primary-600{color:#2563eb}

/* Borders */
.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-gray-200{border-color:#e5e7eb}
.border-gray-300{border-color:#d1d5db}
.rounded{border-radius:0.25rem}
.rounded-lg{border-radius:0.5rem}
.rounded-full{border-radius:9999px}

/* Effects */
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}

/* Typography */
.text-xs{font-size:0.75rem}
.text-sm{font-size:0.875rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,“Helvetica Neue”,Arial,“Noto Sans”,sans-serif}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}

/* Transforms */
.transform{transform:translate(var(–tw-translate-x),var(–tw-translate-y)) rotate(var(–tw-rotate)) skewX(var(–tw-skew-x)) skewY(var(–tw-skew-y)) scaleX(var(–tw-scale-x)) scaleY(var(–tw-scale-y))}
.-translate-y-12{–tw-translate-y:-50%}
.translate-x-full{–tw-translate-x:100%}
.translate-x-0{–tw-translate-x:0px}

/* Transitions */
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}
.ease-in-out{transition-timing-function:cubic-bezier(0.4,0,0.2,1)}

/* Animations */
.animate-spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Interactive States */
.hover:bg-gray-100:hover{background-color:#f3f4f6}
.hover:bg-primary-600:hover{background-color:#2563eb}
.hover:text-white:hover{color:#fff}
.hover:text-primary-600:hover{color:#2563eb}
.hover:text-primary-800:hover{color:#1e40af}
.hover:border-gray-400:hover{border-color:#9ca3af}

/* Focus States */
.focus:ring-2:focus{–tw-ring-offset-shadow:var(–tw-ring-inset) 0 0 0 var(–tw-ring-offset-width) var(–tw-ring-offset-color);–tw-ring-shadow:var(–tw-ring-inset) 0 0 0 calc(2px + var(–tw-ring-offset-width)) var(–tw-ring-color);box-shadow:var(–tw-ring-offset-shadow),var(–tw-ring-shadow),var(–tw-shadow,0 0 #0000)}
.focus:ring-primary-500:focus{–tw-ring-color:#3b82f6}
.focus:border-transparent:focus{border-color:transparent}

/* Overflow */
.overflow-y-auto{overflow-y:auto}

/* Responsive */
@media (max-width: 768px) {
.md:hidden{display:none}
.md:block{display:block}
}

/* Custom utility classes */
.space-x-2 > :not([hidden]) ~ :not([hidden]){–tw-space-x-reverse:0;margin-right:calc(0.5rem * var(–tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(–tw-space-x-reverse)))}
.space-x-4 > :not([hidden]) ~ :not([hidden]){–tw-space-x-reverse:0;margin-right:calc(1rem * var(–tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(–tw-space-x-reverse)))}
.space-y-2 > :not([hidden]) ~ :not([hidden]){–tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(–tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(–tw-space-y-reverse))}

/* Appearance */
.appearance-none{appearance:none}

/* Cursor */
.cursor-pointer{cursor:pointer}

/* 1. Base Styles */
/* ===== 01-base/colors.css ===== */
/* =============================================
   BUZZ.CITY - Rohfarben-Palette (Schicht 1)
   
   Diese Datei enthält NUR die Farbdefinitionen.
   Keine semantischen Bedeutungen hier!
   
   Namenskonvention:
   - 50 = sehr hell (Backgrounds)
   - 500 = Basisfarbe
   - 900 = sehr dunkel
   ============================================= */

:root {
    /* === BUZZ (Primary Pink) === */
    /* Brand Primary: --buzz-500 (#D800AF) */
    --buzz-50:  #FDF2F9;
    --buzz-100: #FCE7F4;
    --buzz-200: #F8CAE8;
    --buzz-300: #F4A3D9;
    --buzz-400: #EE70C6;
    --buzz-500: #D800AF;
    --buzz-600: #BF009C;
    --buzz-700: #A30085;
    --buzz-800: #83006B;
    --buzz-900: #680050;

    /* === VIBE (Header Gradient) === */
    --vibe-gradient-1: #9D48D0;
    --vibe-gradient-2: #7467E7;
    --vibe-gradient-3: #4786FF;
    --vibe-gradient-4: #821E99;
    --vibe-gradient-1-transparent: #9D48D022;
    --vibe-gradient-2-transparent: #7467E722;
    --vibe-gradient-3-transparent: #4786FF22;
    --vibe-gradient-4-transparent: #821E9922;
    
    /* === WATER (Secondary Blue) === */
    --water-50:  #F0F6FE;
    --water-100: #E1EDFD;
    --water-200: #C3DBFB;
    --water-300: #95C0FB;
    --water-400: #6E9CDA;
    --water-500: #396EB2;
    --water-600: #195096;
    --water-700: #00357B;
    --water-800: #00185C;
    --water-900: #000039;

    /* === PARK (Secondary Green) === */
    --park-50:  #F2F9F5;
    --park-100: #E5F3EB;
    --park-200: #CBE7D7;
    --park-300: #ABD9BA;
    --park-400: #84B599;
    --park-500: #4F8771;
    --park-600: #2F6955;
    --park-700: #144E3A;
    --park-800: #00311B;
    --park-900: #001100;

    /* === BETON (Neutral Grey) === */
    --beton-50:  #F4F7F9;
    --beton-100: #E9EEF1;
    --beton-200: #DEE8EC;
    --beton-300: #CED9DD;
    --beton-400: #9EAEB8;
    --beton-500: #8296A3;
    --beton-600: #627887;
    --beton-700: #475D6C;
    --beton-800: #2C404D;
    --beton-900: #10202A;

    /* === ABSOLUT (Schwarz & Weiß) === */
    --white: #FFFFFF;
    --black: #000000;

    /* === STATUS === */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
}
/* ===== 01-base/tokens.css ===== */
/* =============================================
   BUZZ.CITY - Semantische Tokens (Schicht 2)
   
   Diese Datei vergibt BEDEUTUNGEN an Farben.
   Hier wird definiert, WOFÜR Farben verwendet werden.
   
   Für Dark Mode: Tokens werden in dark.css überschrieben
   ============================================= */

:root {
    /* === HINTERGRÜNDE === */
    --color-bg-page:        var(--beton-50);
    --color-bg-surface:     var(--white);
    --color-bg-elevated:    var(--white);
    --color-bg-subtle:      var(--beton-100);
    --color-bg-muted:       var(--beton-200);
    --color-bg-inverse:     var(--beton-900);

    /* === TEXT === */
    --color-text-primary:   var(--beton-900);
    --color-text-secondary: var(--beton-700);
    --color-text-secondary-blue: var(--water-500);
    --color-text-muted:     var(--beton-500);
    --color-text-disabled:  var(--beton-400);
    --color-text-inverse:   var(--white);
    --color-text-brand:     var(--buzz-500);

    /* === BORDERS === */
    --color-border-default: var(--beton-300);
    --color-border-subtle:  var(--beton-200);
    --color-border-strong:  var(--beton-400);
    --color-border-brand:   var(--buzz-500);

    /* === INTERAKTIVE ELEMENTE === */
    --color-interactive:          var(--buzz-500);
    --color-interactive-hover:    var(--buzz-600);
    --color-interactive-active:   var(--buzz-700);
    --color-interactive-disabled: var(--beton-300);

    /* === BUTTONS (Primary) === */
    --color-btn-primary-bg:       var(--buzz-500);
    --color-btn-primary-bg-hover: var(--buzz-600);
    --color-btn-primary-text:     var(--white);

    /* === BUTTONS (Primary Blue — gefüllt, secondary-blue) === */
    --color-btn-primary-blue-bg:       var(--water-500);
    --color-btn-primary-blue-bg-hover: var(--water-600);
    --color-btn-primary-blue-text:     var(--white);

    /* === BUTTONS (Secondary/Outline) === */
    --color-btn-secondary-bg:        transparent;
    --color-btn-secondary-bg-hover:  var(--buzz-50);
    --color-btn-secondary-border:    var(--buzz-500);
    --color-btn-secondary-text:      var(--buzz-500);

    /* === BUTTONS (Ghost/Tertiary) === */
    --color-btn-ghost-bg:         transparent;
    --color-btn-ghost-bg-hover:   var(--beton-100);
    --color-btn-ghost-text:       var(--beton-700);

    /* === FORMULARE === */
    --color-input-bg:             var(--white);
    --color-input-border:         var(--beton-300);
    --color-input-border-hover:   var(--beton-400);
    --color-input-border-focus:   var(--buzz-500);
    --color-input-placeholder:    var(--beton-400);
    --color-input-text:           var(--beton-900);
    --color-checkbox-accent:      var(--buzz-500);

    /* === STATUS === */
    --color-status-success:       var(--success);
    --color-status-warning:       var(--warning);
    --color-status-error:         var(--error);
    --color-status-info:          var(--water-500);

    /* === BRAND === */
    --color-brand:                var(--buzz-500);
    --color-brand-hover:          var(--buzz-600);
    --color-brand-subtle:         var(--buzz-50);
    --color-brand-muted:          var(--buzz-100);

    --color-secondary-blue:        var(--water-500);
    --color-secondary-blue-hover:  var(--water-600);
    --color-secondary-blue-subtle: var(--water-50);
    --color-secondary-blue-muted:  var(--water-100);

    --color-secondary-green:        var(--park-500);
    --color-secondary-green-hover:  var(--park-600);
    --color-secondary-green-subtle: var(--park-50);
    --color-secondary-green-muted:  var(--park-100);

    /* === HEADER === */
    --color-header-bg-top:        var(--vibe-gradient-3);
    --color-header-bg-bottom:     var(--vibe-gradient-1);
    --color-header-text:          var(--white);
    --color-header-icon:          var(--white);
    --color-header-hover:         rgba(255, 255, 255, 0.15);

    /* === OVERLAYS & PANELS === */
    --color-overlay-bg:           var(--white);
    --color-overlay-backdrop:     rgba(0, 0, 0, 0.5);
    --color-panel-border:         var(--beton-200);

    /* === SCROLLBAR === */
    --color-scrollbar-track:      var(--beton-100);
    --color-scrollbar-thumb:      var(--beton-400);
    --color-scrollbar-thumb-hover: var(--beton-500);

    /* === KARTE (Map-spezifisch) === */
    --color-map-water:                 var(--water-500);
    --color-map-park:                  var(--park-500);
    --color-map-graetzl:               var(--buzz-300);
    --color-map-graetzl-center-circle: var(--buzz-500);
    --color-map-graetzl-waves:         var(--buzz-300);
    --color-map-graetzl-waves-border:  var(--buzz-500);
    --color-map-graetzl-text:          var(--buzz-500);

    /* === EVENTS === */
	--color-event-today:          var(--buzz-500);
	--color-event-today-accent:   var(--white);
    --color-event-future:         var(--white);
    --color-event-future-accent:  var(--buzz-500);
    --color-event-text:           var(--buzz-500);
    --color-event-text-outline:   var(--white);
	--color-smallevent-bg:        var(--beton-50);
	--color-smallevent-border:    var(--beton-500);
	--color-smallevent-hover:    var(--beton-200);

    /* Event-Gruppen-Farben */
    --color-group-music:       #8B5CF6;
    --color-group-flea-market: var(--vibe-gradient-4);
    --color-group-stage:       #DC2626;
    --color-group-culture:     #047857;
    --color-group-cinema:      #60A5FA;
    --color-group-knowledge:   #B27708;
    --color-group-tour:        var(--buzz-400);
    --color-group-nightlife:   #1E40AF;
    --color-group-heuriger:    #86A12B;
    --color-group-markets:     #FACC15;
    --color-group-family:      #F59E0B;
    --color-group-sports:      #16A34A;
    --color-group-other:       #D417B1;
    --color-group-queer:       #9B2FAE;

    /* === ROUTE SUGGESTIONS === */
    --color-route-suggestion:        var(--buzz-500);
    --color-route-suggestion-dark:   var(--buzz-700);
    --color-route-suggestion-stroke: var(--white);

    /* === DATE BAR === */
    --color-datebar-bg: var(--white);
    --color-datebar-text: var(--vibe-gradient-1);
    --color-datebar-border: var(--vibe-gradient-1);
    --color-datebar-selected-bg: var(--vibe-gradient-1);
    --color-datebar-selected-text: var(--white);
    --color-datebar-hover: var(--vibe-gradient-1-transparent);
    --color-datebar-icon-bg: var(--vibe-gradient-4);
    --color-datebar-icon-text: var(--white);

    /* === SHADOWS (als Tokens für Konsistenz) === */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-popup: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/* ===== 01-base/theme.css ===== */
/* =============================================
   BUZZ.CITY - Theme Compatibility Layer
   
   ÜBERGANGSPHASE: Diese Datei mappt alte Variablen
   auf das neue Token-System.
   
   TODO: Nach vollständiger Migration entfernen
   und Komponenten direkt auf tokens.css umstellen.
   ============================================= */

:root {
    /* === ALTE PINK-SKALA → NEUE BUZZ-SKALA === */
    /* Alt: 50=dunkel, 950=hell | Neu: 50=hell, 900=dunkel */
    --color-pink-50:  var(--buzz-900);
    --color-pink-100: var(--buzz-800);
    --color-pink-200: var(--buzz-700);
    --color-pink-300: var(--buzz-600);
    --color-pink-400: var(--buzz-600);
    --color-pink-500: var(--buzz-500);
    --color-pink-600: var(--buzz-400);
    --color-pink-700: var(--buzz-300);
    --color-pink-800: var(--buzz-200);
    --color-pink-900: var(--buzz-100);
    --color-pink-950: var(--buzz-50);

    /* === MARKEN-FARBEN (Legacy) === */
    --brand-primary:          var(--color-brand);
    --brand-secondary:        var(--buzz-600);
    --brand-accent:           var(--buzz-400);
    --brand-background-light: var(--color-brand-subtle);
    --brand-background-dark:  var(--buzz-700);

    /* === AUTOMATISCH GENERIERTE FARBEN (Legacy) === */
    --brand-primary-50:  var(--buzz-50);
    --brand-primary-100: var(--buzz-100);
    --brand-primary-200: var(--buzz-200);
    --brand-primary-300: var(--buzz-300);
    --brand-primary-600: var(--buzz-600);
    --brand-primary-700: var(--buzz-700);
    --brand-primary-800: var(--buzz-800);

    /* === HOVER-ZUSTÄNDE (Legacy) === */
    --brand-primary-hover:   var(--color-brand-hover);
    --brand-secondary-hover: var(--buzz-700);

    /* === TEXT-FARBEN (Legacy) === */
    --brand-text-light: var(--buzz-100);
    --brand-text-dark:  var(--buzz-800);

    /* === GRAUE FARBEN → BETON === */
    --color-white:    var(--white);
    --color-gray-50:  var(--beton-50);
    --color-gray-100: var(--beton-100);
    --color-gray-200: var(--beton-200);
    --color-gray-300: var(--beton-300);
    --color-gray-400: var(--beton-400);
    --color-gray-500: var(--beton-500);
    --color-gray-600: var(--beton-600);
    --color-gray-700: var(--beton-700);
    --color-gray-900: var(--beton-900);
    --color-black:    var(--black);

    /* === EVENT COLORS (Legacy) === */
    --event-today:        var(--color-event-today);
    --event-today-accent: var(--color-event-today-text);
    --event-future:       var(--color-event-future);
    --event-future-accent: var(--color-event-future-text);
    --event-text:         var(--color-text-brand);
    --event-text-outline: var(--white);

    /* === PRIORITY COLORS (Legacy) === */
    --priority-high:   var(--buzz-400);
    --priority-medium: var(--buzz-600);
    --priority-low:    var(--buzz-700);

    /* === IMAGE COLORS (Legacy) === */
    --image-blue-50:  var(--water-100);
    --image-blue-200: var(--water-300);
    --image-blue-500: var(--water-500);
    --image-blue-800: var(--water-800);

    /* === GRAETZL-KREIS-FARBEN (Legacy) === */
    --graetzl-center-circle: var(--color-brand);
    --graetzl-waves:         var(--buzz-200);
    --graetzl-waves-border:  var(--color-brand);
    --graetzl-text:          var(--color-brand);

    /* === HEADER COLORS (Legacy) === */
    --header-background:         var(--color-header-bg-top);
    --header-text:               var(--color-header-text);
    --header-icon:               var(--color-header-icon);
    --header-hover-bg:           var(--color-header-hover);
    --header-search-bg:          var(--color-header-hover);
    --header-search-border:      var(--white);
    --header-search-text:        var(--white);
    --header-search-placeholder: var(--white);
    --header-search-focus-border: var(--white);

    /* === STATUS-FARBEN (Legacy) === */
    --color-success: var(--color-status-success);
    --color-warning: var(--color-status-warning);
    --color-error:   var(--color-status-error);
}
/* ===== 01-base/variables.css ===== */
/* =============================================
   BUZZ.CITY - Layout & Utility Variablen
   
   Diese Datei enthält NUR nicht-farbbezogene Variablen:
   - Abstände, Größen, Radien
   - Schatten, Übergänge
   - Scrollbar-Dimensionen
   
   Farben sind in colors.css und tokens.css definiert.
   ============================================= */

:root {
    /* === ABSTÄNDE & GRÖSSEN === */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;

    /* === BORDER RADIUS === */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* === ÜBERGÄNGE === */
    --transition-fast:   0.15s ease-in-out;
    --transition-normal: 0.2s ease-in-out;
    --transition-slow:   0.3s ease-in-out;

    /* === SCROLLBAR === */
    --scrollbar-width: 6px;

    /* === MAP-SPEZIFISCH === */
    --popup-min-width: 200px;

    /* === Z-INDEX SKALA === */
    --z-base:    1;
    --z-dropdown: 10;
    --z-sticky:  15;
    --z-fixed:   30;
    --z-modal-backdrop: 40;
    --z-modal:   50;
    --z-popover: 60;
    --z-tooltip: 70;
}
/* ===== 01-base/base.css ===== */
/* =============================================
   BUZZ.CITY - Basis-Styles
   
   Globale Styles für HTML-Elemente.
   Verwendet semantische Tokens aus tokens.css.
   ============================================= */

/* === HTML & BODY === */
html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    position: relative;
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
}

/* === MAPLIBRE === */
.maplibregl-map {
    font-family: inherit;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

/* === FOKUS-STATES === */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-interactive);
    outline-offset: 2px;
}

/* === SELECTION === */
::selection {
    background-color: var(--color-brand-muted);
    color: var(--color-text-primary);
}

/* === LINKS === */
a {
    color: var(--color-interactive);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-interactive-hover);
}

/* === BILDER === */
img {
    max-width: 100%;
    height: auto;
}

/* 2. Layouts */
/* ===== 02-layouts/sidebar.css ===== */
/* Sidebar Animations */
#favorites-sidebar {
	transform: translateX(100%);
	/* Initial geschlossen */
	transition: transform var(--transition-normal);
}

#favorites-sidebar.open {
	transform: translateX(0);
	/* Geöffnet */
}

/* Mobile Sidebar Sizing */
@media (max-width: 768px) {
	#favorites-sidebar {
		width: 100%;
		max-width: 320px;
	}
}

/* Favorites List Scrolling */
#favorites-list::-webkit-scrollbar {
	width: var(--scrollbar-width);
}

#favorites-list::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: 3px;
}

#favorites-list::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 3px;
}

#favorites-list::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}
/* ===== 02-layouts/header.css ===== */
/* ==============================================
   BUZZ.CITY - Header
   Migriert auf Token-System + Gradient
   ============================================== */

/* ==============================================
   HEADER BASIS-STYLING
   ============================================== */

.site-header {
    background: linear-gradient(to bottom, var(--color-header-bg-top), var(--color-header-bg-bottom));
    z-index: var(--z-fixed);
    overflow: visible;
    padding: var(--spacing-sm) var(--spacing-sm) 0.3rem var(--spacing-sm);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

/* ==============================================
   HEADER CONTAINER LAYOUT
   ============================================== */

.header-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "brand right"
        "tagline tagline";
    align-items: center;
    min-height: 48px;
    gap: 0;
}

/* ==============================================
   HEADER BEREICHE
   ============================================== */

/* Logo + City Selector (zentriert) */
.header-brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
}

.header-brand img {
    width: 80px;
    height: auto;
}

/* Search Button (rechts) */
.header-actions-right {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs);
}

/* Tagline - volle Breite */
.header-tagline {
    grid-area: tagline;
    color: var(--color-header-text);
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
    padding: var(--spacing-xs) 0;
}

/* ==============================================
   HEADER SEARCH
   ============================================== */

.header-search {
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.header-search.active {
    display: block;
    opacity: 1;
    overflow: visible;
    padding: 0.2rem 0 var(--spacing-sm) 0;
}

.search-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    transition: all var(--transition-slow);
}

.search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 4.5rem;
    border: 1px solid var(--color-header-text);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.15) !important;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--white) !important;
    caret-color: var(--white);
    -webkit-text-fill-color: var(--white);
    transition: all var(--transition-normal);
}

.search-input::placeholder {
    color: var(--color-header-text);
    opacity: 0.8;
}

.search-input:hover {
    border: 1px solid var(--white) !important;
}

.search-input:focus {
    border: 1px solid var(--white) !important;
    box-shadow: inset 0 0 0 2px var(--white);
}

.search-input:focus::placeholder {
    color: var(--color-text-disabled);
}

/* Chip-Mode: Padding-Left erweitern, damit Lupe + Chip Platz haben.
   --chip-zone-width wird zur Laufzeit von headerSearch.js gesetzt,
   sobald das Chip-Label rendert und seine Breite messbar ist.
   Fallback 13rem deckt den Worst-Case (lange Kategorie + lange Sprache)
   für den initialen Render-Frame ab, bevor JS die Variable überschreibt.
   text-indent: 0 verhindert iOS-spezifisches Default-Indent. */
.search-container.back-mode .search-input {
    padding-left: var(--chip-zone-width, 13rem);
    text-indent: 0;
}

/* Icon-Button im Suchfeld (umschließt Lupen-/Zurück-Icon) */
.search-container .search-icon-btn {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-header-text);
    opacity: 0.8;
    cursor: default;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast);
}

/* Die beiden Icons: standardmäßig wird das Lupen-Icon angezeigt */
.search-container .search-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* ==============================================
   KATEGORIE-CHIP (Browse-Listen-Modus)
   Sichtbar nur, wenn .search-container .back-mode trägt.
   Zeigt: ← [Kategorie-Name] als klickbares Pill,
   ersetzt die linke "Lupe + Padding"-Zone des Inputs.
   ============================================== */

.search-container .search-category-chip {
    /* Im Standard-Modus unsichtbar */
    display: none;
}

.search-container.back-mode .search-category-chip {
    /* Absolut über das Input gelegt, links bündig nach der Lupe */
    position: absolute;
    left: 3.5rem; /* Lupe ist auf 1.25rem mit 2rem Breite → endet bei ca. 3.25rem */
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 2rem;
    padding: 0 var(--spacing-sm) 0 6px;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

@media (hover: hover) {
    .search-container.back-mode .search-category-chip:hover {
        background-color: rgba(255, 255, 255, 0.35);
        border-color: var(--white);
    }
}

.search-category-chip-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.search-category-chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

/* ==============================================
   HEADER BUTTONS
   ============================================== */

.header-btn {
    padding: var(--spacing-sm);
    color: var(--color-header-icon);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn:hover {
    background-color: var(--color-header-hover);
}

#search-button svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* ==============================================
   FAVORITES ICON + BADGE
   ============================================== */

.header-favorites-btn {
    position: relative;
}

.header-favorites-btn .favorites-icon-outline,
.header-favorites-btn .favorites-icon-filled {
    width: 1.5rem;
    height: 1.5rem;
}

.header-favorites-btn .favorites-icon-filled {
    color: var(--color-header-icon);
}

.header-favorites-btn .hidden {
    display: none;
}

.favorites-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--color-brand);
    color: var(--white);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.favorites-badge.hidden {
    display: none;
}

.favorites-badge.pulse {
    animation: badgePulse 0.6s ease-out;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(4.0);
    }
    60% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* ==============================================
   CITY SELECTOR
   ============================================== */

.header-city-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.city-selector-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal);
}

.city-selector-button:hover {
    background-color: var(--color-header-hover);
}

.city-name {
    color: var(--color-header-text);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    white-space: nowrap;
}

.city-dropdown-arrow {
    color: var(--color-header-icon);
    transition: transform var(--transition-normal);
}

.city-selector-button:hover .city-dropdown-arrow {
    transform: translateY(2px);
}

.city-selector-button.open .city-dropdown-arrow {
    transform: rotate(180deg);
}

/* ==============================================
   CITY DROPDOWN MENU
   ============================================== */

.city-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    left: 0;
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    max-height: 320px;
    overflow: hidden;
    z-index: var(--z-dropdown);
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.city-dropdown-menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.city-dropdown-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.city-dropdown-item {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.city-dropdown-item:hover {
    background-color: var(--color-bg-subtle);
}

.city-dropdown-item.active {
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.city-dropdown-item.active:hover {
    background-color: var(--color-brand-hover);
}

.city-dropdown-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==============================================
   LANGUAGE SELECTOR
   ============================================== */

.header-lang-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.header-lang-selector svg {
    width: 1.5rem;
    height: 1.25rem;
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    right: 0;
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    overflow: hidden;
    z-index: var(--z-dropdown);
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.lang-dropdown-menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* Mobile (Standard - kein Media Query nötig für Grid) */

.header-container.search-active {
    grid-template-areas:
        "brand right"
        "search search";
}

.header-container.search-active .header-tagline {
    display: none;
}

.header-container.search-active .header-search {
    grid-area: search;
}

/* Tablet & Desktop */
@media (min-width: 769px) {
    .site-header {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
    }

    .header-container {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "brand right"
            "tagline tagline";
        gap: 0;
    }

    .header-tagline {
        font-size: 1.1rem;
    }

    .search-container {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .header-container {
        min-height: 56px;
    }

    .header-tagline {
        font-size: 1.2rem;
    }

    .search-container {
        max-width: 500px;
    }
}

/* Smartphone Landscape */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .site-header {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}
/* ===== 02-layouts/side-menu.css ===== */
/* ==============================================
   BUZZ.CITY - Side Menu
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   SIDE MENU OVERLAY
   ============================================== */

.side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay-backdrop);
    z-index: 100;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.side-menu-overlay.hidden {
    display: none;
}

.side-menu-overlay.visible {
    opacity: 1;
}

/* ==============================================
   SIDE MENU CONTAINER
   ============================================== */

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    max-width: 400px;
    background-color: var(--color-bg-surface);
    z-index: 101;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.side-menu.visible {
    transform: translateX(0);
}

/* ==============================================
   SIDE MENU HEADER
   ============================================== */

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.side-menu-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-brand);
}

.side-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.side-menu-close:hover {
    background-color: var(--color-bg-muted);
}

.side-menu-close svg {
    color: var(--color-text-secondary);
}

/* ==============================================
   SIDE MENU CONTENT
   ============================================== */

.side-menu-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ==============================================
   MENU ITEMS
   ============================================== */

.side-menu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.0625rem;
    font-weight: 600;
    transition: color var(--transition-normal), background-color var(--transition-normal);
    border-radius: var(--radius-md);
}

.side-menu-link-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    transition: color var(--transition-normal);
}

.side-menu-link-label {
    flex: 1;
}

.side-menu-link-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    transition: transform var(--transition-normal), color var(--transition-normal);
}

@media (hover: hover) {
    .side-menu-link:hover {
        color: var(--color-text-brand);
        background-color: var(--color-brand-subtle);
    }

    .side-menu-link:hover .side-menu-link-icon,
    .side-menu-link:hover .side-menu-link-chevron {
        color: var(--color-text-brand);
    }

    .side-menu-link:hover .side-menu-link-chevron {
        transform: translateX(2px);
    }
}

.side-menu-subtitle {
    display: block;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
    margin-top: var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.side-menu-divider {
    height: 1px;
    margin: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-border-subtle);
}

/* ==============================================
   MENU BUTTONS
   ============================================== */

.side-menu-buttons {
    margin-top: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.side-menu-btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
}

.side-menu-btn-primary {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border-color: var(--color-btn-primary-bg);
}

.side-menu-btn-primary:hover {
    background-color: var(--color-btn-primary-bg-hover);
    border-color: var(--color-btn-primary-bg-hover);
}

.side-menu-btn-outline {
    background-color: var(--color-bg-surface);
    color: var(--color-btn-secondary-text);
    border-color: var(--color-border-brand);
}

.side-menu-btn-outline:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

/* ==============================================
   SPECIAL STATES
   ============================================== */

.side-menu-link.active {
    color: var(--color-text-brand);
    background-color: var(--color-brand-subtle);
}

.side-menu-link.active .side-menu-link-icon,
.side-menu-link.active .side-menu-link-chevron {
    color: var(--color-text-brand);
}

/* ==============================================
   FOOTER NAVIGATION (3er-Grid am unteren Rand)
   ============================================== */

.side-menu-footer-nav {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.side-menu-footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xs);
    text-decoration: none;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: color var(--transition-normal), background-color var(--transition-normal);
    text-align: center;
}

.side-menu-footer-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    transition: background-color var(--transition-normal);
}

.side-menu-footer-icon-wrap svg {
    width: 22px;
    height: 22px;
    color: var(--color-text-secondary);
    transition: color var(--transition-normal);
}

.side-menu-footer-label {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-secondary);
    transition: color var(--transition-normal);
}

@media (hover: hover) {
    .side-menu-footer-link:hover .side-menu-footer-icon-wrap {
        background-color: var(--color-brand-subtle);
    }

    .side-menu-footer-link:hover .side-menu-footer-icon-wrap svg,
    .side-menu-footer-link:hover .side-menu-footer-label {
        color: var(--color-text-brand);
    }
}

.side-menu-footer-link.active .side-menu-footer-icon-wrap {
    background-color: var(--color-brand-subtle);
}

.side-menu-footer-link.active .side-menu-footer-icon-wrap svg,
.side-menu-footer-link.active .side-menu-footer-label {
    color: var(--color-text-brand);
}

/* ==============================================
   DISCLAIMER
   ============================================== */

.side-menu-disclaimer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xs) 0;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ===== 02-layouts/date-bar.css ===== */
/* ==============================================
   BUZZ.CITY - Date Bar
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   DATE BAR BASIS-STYLING
   ============================================== */

.date-bar {
    background-color: var(--color-datebar-bg);
    border-bottom: 2px solid var(--color-datebar-border);
    border-top: none;
    z-index: var(--z-sticky);
    padding: 0;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.date-bar.hidden {
    opacity: 0;
    visibility: hidden;
}

.date-bar.dropdown-open {
    z-index: var(--z-dropdown);
}

/* ==============================================
   DATE BAR CONTAINER
   ============================================== */

.date-bar-container {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ==============================================
   DATE BUTTONS CONTAINER
   ============================================== */

.date-buttons-container {
    display: flex;
    flex: 1;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--spacing-lg);
    margin-bottom: calc(var(--spacing-lg) * -1);
    touch-action: pan-x;
    transform: translateZ(0);
}

.date-buttons-container::-webkit-scrollbar {
    display: none;
}

/* ==============================================
   ICON BUTTONS
   ============================================== */

.date-bar-icon-btn {
    flex-shrink: 0;
    padding: var(--spacing-md) var(--spacing-md);
    background-color: var(--color-datebar-icon-bg);
    border: none;
    color: var(--color-datebar-icon-text);
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    border-radius: 8px;
    margin: 3px;
}

.date-bar-icon-btn:hover {
    background-color: var(--color-datebar-icon-bg);
    opacity: 0.85;
}

.date-bar-icon-btn:active {
    background-color: var(--color-datebar-icon-bg);
    opacity: 0.75;
    transform: scale(0.95);
}

/* Filter Counter unter Routes Icon */
.routes-filter-count {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 0.125rem;
    color: var(--color-datebar-icon-text);
}

/* Statische Labels unter Icons */
.date-bar-icon-label {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-datebar-icon-text);
}

/* Layers Number + Badge */
.layers-number-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.layers-icon {
    display: block;
    color: var(--color-datebar-icon-text);
}

.layers-active-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: var(--white);
    color: var(--color-datebar-icon-bg);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ==============================================
   DATE BUTTONS
   ============================================== */

.date-btn {
    flex: 0 0 auto;
    min-width: 4.5rem;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
    background: none;
    border: none;
    color: var(--color-datebar-text);
    cursor: pointer;
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 600;
}

.date-btn:hover {
    background-color: var(--color-datebar-hover);
}

.date-btn:active {
    background-color: var(--color-datebar-hover);
    transform: scale(0.95);
}

/* Datum-Zahl */
.date-number {
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Wochentag */
.date-weekday {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.125rem;
    transition: all var(--transition-normal);
}

/* Monat */
.date-month {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 0.125rem;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all var(--transition-normal);
}

/* ==============================================
   MONTH SEPARATOR
   ============================================== */

.date-month-separator {
    flex: 0 0 auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-datebar-text);
    font-size: 1.1rem;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}

/* ==============================================
   SELECTED STATE
   ============================================== */

.date-btn.selected {
    background-color: var(--color-datebar-selected-bg);
    color: var(--color-datebar-selected-text);
    border-left: 2px solid var(--color-datebar-bg);
    border-right: 2px solid var(--color-datebar-bg);
    border-bottom: 2px solid var(--color-datebar-bg);
    padding-bottom: var(--spacing-md);
    padding-top: 1.05rem;
    margin-bottom: calc(var(--spacing-lg) * -1);
    z-index: 1;
}

.date-btn.selected .date-month {
    opacity: 1;
    height: auto;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 768px) {
    .date-btn {
        min-width: 0;
    }

    .date-bar-icon-btn {
        padding: var(--spacing-sm) var(--spacing-md);
}
}

@media (min-width: 1024px) {
    .date-btn {
        padding: var(--spacing-sm) var(--spacing-sm);
        min-width: 4.5rem;
    }

    .date-number {
        font-size: 1.25rem;
    }
}

@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .date-bar {
        padding: 0;
    }
}

/* 3. Components */
/* ===== 03-components/locationSEO.css ===== */
/* =============================================
   BUZZ.CITY — Location-/Cinema-Page SEO Content
   
   Wird von der location-meta Edge Function vor </body>
   ins HTML injiziert. Sichtbar bis LocationLayerService
   beim SPA-Boot übernimmt (siehe locationLayerService.js).
   
   Zweck: Crawler-lesbarer Inhalt + akzeptable
   visuelle Darstellung während des SPA-Boots.
   ============================================= */

.location-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Breadcrumb === */
.location-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.location-seo__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.location-seo__breadcrumb a:hover {
    color: var(--color-text-brand);
    text-decoration: underline;
}

/* === Hero Image === */
.location-seo__image {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    display: block;
}

/* === Heading & Subtext === */
.location-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.location-seo__address {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.location-seo__description {
    font-size: 1.0625rem;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
}

/* === Meta-Block (Hours / Website / Wikipedia) === */
.location-seo__meta {
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.location-seo__meta p {
    margin: 0;
    font-size: 0.9375rem;
}

.location-seo__meta a {
    color: var(--color-text-brand);
    text-decoration: none;
}

.location-seo__meta a:hover {
    text-decoration: underline;
}

.location-seo__hours strong {
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-right: var(--spacing-xs);
}

/* === Events Block === */
.location-seo__events {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.location-seo__events h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.location-seo__events--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* === Events List === */
.location-seo__events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.location-seo__event {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.location-seo__event-main {
    color: inherit;
    text-decoration: none;
    display: block;
}

.location-seo__event-main:hover .location-seo__event-title {
    color: var(--color-text-brand);
}

.location-seo__event-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.location-seo__event-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.location-seo__event-date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.location-seo__event-tickets {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-top: var(--spacing-xs);
}

.location-seo__event-tickets:hover {
    text-decoration: underline;
}

.location-seo__event-free {
    align-self: flex-start;
    display: inline-block;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
}

/* === Back Link === */
.location-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.location-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.location-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile Anpassungen === */
@media (max-width: 640px) {
    .location-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .location-seo__title {
        font-size: 1.625rem;
    }

    .location-seo__image {
        max-height: 240px;
        border-radius: var(--radius-md);
    }
}
/* ===== 03-components/graetzlSEO.css ===== */
/* =============================================
   BUZZ.CITY — Grätzl-Page SEO Content
   
   Wird von der neighbourhood-meta Edge Function vor </main>
   ins HTML injiziert. Sichtbar bis LocationLayerService._removeSeoContent()
   beim SPA-Boot das Element mit [data-seo-content] entfernt.
   
   Zweck: Crawler-lesbarer Inhalt + akzeptable
   visuelle Darstellung während des SPA-Boots.
   ============================================= */

.graetzl-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Heading === */
.graetzl-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.2;
}

/* === Intro / eigener Grätzl-Kurztext (#4) === */
.graetzl-seo__intro {
    font-size: 1.0625rem;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    max-width: 65ch;
}

/* === Events Block === */
.graetzl-seo__events {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.graetzl-seo__events h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.graetzl-seo__window {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: var(--spacing-xs);
}

.graetzl-seo__events--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* === Events List === */
.graetzl-seo__events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.graetzl-seo__event {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.graetzl-seo__event-main {
    color: inherit;
    text-decoration: none;
    display: block;
}

.graetzl-seo__event-main:hover .graetzl-seo__event-title {
    color: var(--color-text-brand);
}

.graetzl-seo__event-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.graetzl-seo__event-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.graetzl-seo__event-date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.graetzl-seo__event-tickets {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-top: var(--spacing-xs);
}

.graetzl-seo__event-tickets:hover {
    text-decoration: underline;
}

.graetzl-seo__event-free {
    align-self: flex-start;
    display: inline-block;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
}

/* === Back Link === */
.graetzl-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.graetzl-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.graetzl-seo__back a:hover {
    text-decoration: underline;
}

/* === Grätzl-Radar (Abo-Formular, No-JS/Crawler — neighbourhood-meta.js) === */
.graetzl-seo__radar {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg, 12px);
}

.graetzl-seo__radar h2 {
    margin: 0 0 var(--spacing-xs);
    font-size: 1.0625rem;
}

.graetzl-seo__radar > p {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.graetzl-seo__radar form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.graetzl-seo__radar label {
    font-size: 0.875rem;
    font-weight: 600;
}

.graetzl-seo__radar input[type="email"] {
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-surface);
    color: var(--color-text);
}

.graetzl-seo__radar-newsletter {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.graetzl-seo__radar button {
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white, #fff);
    background: var(--color-brand);
    border: none;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
}

.graetzl-seo__radar-trust {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* === Mobile Anpassungen === */
@media (max-width: 640px) {
    .graetzl-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .graetzl-seo__title {
        font-size: 1.625rem;
    }

    .graetzl-seo__window {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }
}
/* ===== 03-components/eventSEO.css ===== */
/* =============================================
   BUZZ.CITY — Event-Page SEO Content

   Wird von der event-meta Edge Function vor </main>
   ins HTML injiziert. Sichtbar bis die SPA beim Boot
   übernimmt (_removeSeoContent() entfernt [data-seo-content]).

   Zweck: Crawler-lesbarer Inhalt + akzeptable
   visuelle Darstellung während des SPA-Boots.
   ============================================= */

.event-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Breadcrumb === */
.event-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.event-seo__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.event-seo__breadcrumb a:hover {
    color: var(--color-text-brand);
    text-decoration: underline;
}

/* === Heading & Subtext === */
.event-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.event-seo__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.event-seo__intro {
    font-size: 1.0625rem;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

/* === Reihen-Zeile (Link zur EventSeries-Seite, Reihen-Abo Gate 4) === */
.event-seo__series {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.event-seo__series a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.event-seo__series a:hover {
    text-decoration: underline;
}

/* === Datum === */
.event-seo__date {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

/* === Ort === */
.event-seo__location {
    font-size: 0.9375rem;
    margin: 0 0 var(--spacing-md) 0;
}

.event-seo__location a {
    color: var(--color-text-brand);
    text-decoration: none;
}

.event-seo__location a:hover {
    text-decoration: underline;
}

/* === Tickets / Eintritt frei === */
.event-seo__tickets {
    display: inline-block;
    font-size: 0.9375rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
}

.event-seo__tickets:hover {
    text-decoration: underline;
}

.event-seo__free {
    display: inline-block;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-bottom: var(--spacing-md);
}

/* === Termin-Radar (Abo-Formular, No-JS/Crawler — event-meta.js) === */
.event-seo__radar {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg, 12px);
}

.event-seo__radar h2 {
    margin: 0 0 var(--spacing-xs);
    font-size: 1.0625rem;
}

.event-seo__radar > p {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.event-seo__radar form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.event-seo__radar label {
    font-size: 0.875rem;
    font-weight: 600;
}

.event-seo__radar input[type="email"] {
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-surface);
    color: var(--color-text);
}

.event-seo__radar-newsletter {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.event-seo__radar button {
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white, #fff);
    background: var(--color-brand);
    border: none;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
}

.event-seo__radar-trust {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* === Back Link === */
.event-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.event-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.event-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile Anpassungen === */
@media (max-width: 640px) {
    .event-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .event-seo__title {
        font-size: 1.625rem;
    }
}

/* ===== 03-components/seriesSEO.css ===== */
/* =============================================
   BUZZ.CITY — Reihen-Page SEO Content (Reihen-Abo Gate 4)

   Wird von der series-meta Edge Function vor </main> ins HTML injiziert
   (/{lang}/vienna/series/{slug}). Sichtbar bis der SPA-Boot das Element
   mit [data-seo-content] entfernt. Aufbau/Token-Nutzung analog
   graetzlSEO.css / eventSEO.css.
   ============================================= */

.series-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

.series-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.series-seo__breadcrumb a {
    color: var(--color-text-brand);
    text-decoration: none;
}

.series-seo__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.2;
}

.series-seo__intro {
    font-size: 1.0625rem;
    margin: 0 0 var(--spacing-lg) 0;
    max-width: 65ch;
}

/* === Kommende Ausgaben === */
.series-seo__upcoming {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.series-seo__upcoming h2,
.series-seo__past h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
}

.series-seo__upcoming--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.series-seo__events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.series-seo__event {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.series-seo__event-main {
    color: inherit;
    text-decoration: none;
    display: block;
}

.series-seo__event-main h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.series-seo__event-main:hover h3 {
    color: var(--color-text-brand);
}

.series-seo__event-date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.series-seo__date-count {
    color: var(--color-text-secondary);
}

.series-seo__tickets {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-top: var(--spacing-xs);
}

.series-seo__free {
    align-self: flex-start;
    display: inline-block;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
}

/* === Vergangene Ausgaben === */
.series-seo__past {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.series-seo__past ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.9375rem;
}

.series-seo__past a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.series-seo__past a:hover {
    color: var(--color-text-brand);
}

.series-seo__past-year,
.series-seo__past-more {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* === Venue-Zeile === */
.series-seo__venue {
    margin-top: var(--spacing-lg);
    font-size: 0.9375rem;
}

.series-seo__venue a {
    color: var(--color-text-brand);
    text-decoration: none;
}

/* === Termin-Radar (Formular-Optik identisch graetzl-seo__radar) === */
.series-seo__radar {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg, 12px);
}

.series-seo__radar h2 {
    margin: 0 0 var(--spacing-xs);
    font-size: 1.0625rem;
}

.series-seo__radar > p {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.series-seo__radar form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.series-seo__radar label {
    font-size: 0.875rem;
    font-weight: 600;
}

.series-seo__radar input[type="email"] {
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-surface);
    color: var(--color-text);
}

.series-seo__radar-newsletter {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.series-seo__radar button {
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white, #fff);
    background: var(--color-brand);
    border: none;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
}

.series-seo__radar-trust {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* === Back Link === */
.series-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.series-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.series-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile === */
@media (max-width: 640px) {
    .series-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .series-seo__title {
        font-size: 1.625rem;
    }
}

/* ===== 03-components/categorySEO.css ===== */
/* =============================================
   BUZZ.CITY — Category-Page SEO Content

   Wird von der category-meta Edge Function vor </main>
   ins HTML injiziert. Sichtbar bis die SPA beim Boot
   übernimmt (_removeSeoContent() entfernt [data-seo-content]).
   ============================================= */

.category-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Breadcrumb === */
.category-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.category-seo__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.category-seo__breadcrumb a:hover {
    color: var(--color-text-brand);
    text-decoration: underline;
}

/* === Heading === */
.category-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.2;
}

/* === Unterkategorien === */
.category-seo__subcats {
    margin-bottom: var(--spacing-xl);
}

.category-seo__subcats h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.category-seo__subcats ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.category-seo__subcats a {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text-brand);
    text-decoration: none;
    font-size: 0.9375rem;
}

.category-seo__subcats a:hover {
    border-color: var(--color-text-brand);
}

/* === Events Block === */
.category-seo__events {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.category-seo__events h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.category-seo__window {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.category-seo__events--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* === Events List === */
.category-seo__events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.category-seo__event {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.category-seo__event-main {
    color: inherit;
    text-decoration: none;
    display: block;
}

.category-seo__event-main:hover .category-seo__event-title {
    color: var(--color-text-brand);
}

.category-seo__event-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.category-seo__event-subtitle,
.category-seo__event-loc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.category-seo__event-date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.category-seo__event-tickets {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-top: var(--spacing-xs);
}

.category-seo__event-tickets:hover {
    text-decoration: underline;
}

.category-seo__event-free {
    align-self: flex-start;
    display: inline-block;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
}

/* === Back Link === */
.category-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.category-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.category-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile === */
@media (max-width: 640px) {
    .category-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    .category-seo__title {
        font-size: 1.625rem;
    }
}

/* ===== 03-components/timeSEO.css ===== */
/* =============================================
   BUZZ.CITY — Time-Page SEO Content (heute / Wochenende)

   Wird von der time-meta Edge Function vor </main>
   ins HTML injiziert. Sichtbar bis die SPA beim Boot
   übernimmt (_removeSeoContent() entfernt [data-seo-content]).
   ============================================= */

.time-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Breadcrumb === */
.time-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.time-seo__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.time-seo__breadcrumb a:hover {
    color: var(--color-text-brand);
    text-decoration: underline;
}

/* === Heading === */
.time-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.2;
}

/* === Events Block === */
.time-seo__events {
    margin-top: var(--spacing-lg);
}

.time-seo__events h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.time-seo__window {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.time-seo__events--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* === Events List === */
.time-seo__events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.time-seo__event {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.time-seo__event-main {
    color: inherit;
    text-decoration: none;
    display: block;
}

.time-seo__event-main:hover .time-seo__event-title {
    color: var(--color-text-brand);
}

.time-seo__event-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.time-seo__event-subtitle,
.time-seo__event-loc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.time-seo__event-date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.time-seo__event-tickets {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-top: var(--spacing-xs);
}

.time-seo__event-tickets:hover {
    text-decoration: underline;
}

.time-seo__event-free {
    align-self: flex-start;
    display: inline-block;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
}

/* === Querverlink zur anderen Zeit-Seite === */
.time-seo__cross {
    margin-top: var(--spacing-xl);
}

.time-seo__cross a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.time-seo__cross a:hover {
    text-decoration: underline;
}

/* === Back Link === */
.time-seo__back {
    margin-top: var(--spacing-md);
    text-align: center;
}

.time-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.time-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile === */
@media (max-width: 640px) {
    .time-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    .time-seo__title {
        font-size: 1.625rem;
    }
}

/* ===== 03-components/cinemaSEO.css ===== */
/* =============================================
   BUZZ.CITY — Cinema-Page SEO Content

   Wird von der cinema-meta Edge Function vor </main>
   ins HTML injiziert. Sichtbar bis die SPA beim Boot
   übernimmt (_removeSeoContent() entfernt [data-seo-content]).
   ============================================= */

.cinema-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Breadcrumb === */
.cinema-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.cinema-seo__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.cinema-seo__breadcrumb a:hover {
    color: var(--color-text-brand);
    text-decoration: underline;
}

/* === Heading & Stammdaten === */
.cinema-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.cinema-seo__address {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.cinema-seo__accessible {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

/* === Programm === */
.cinema-seo__program {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.cinema-seo__program h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.cinema-seo__program--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* === Film-Liste === */
.cinema-seo__movies {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cinema-seo__movie {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.cinema-seo__movie-main {
    color: inherit;
    text-decoration: none;
    display: block;
}

.cinema-seo__movie-main:hover .cinema-seo__movie-title {
    color: var(--color-text-brand);
}

.cinema-seo__movie-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.cinema-seo__movie-meta {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
}

/* === Spielzeiten === */
.cinema-seo__showtimes {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.cinema-seo__showtimes li {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-muted);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.cinema-seo__version {
    color: var(--color-text-brand);
    font-weight: 600;
}

/* === Back Link === */
.cinema-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.cinema-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.cinema-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile === */
@media (max-width: 640px) {
    .cinema-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    .cinema-seo__title {
        font-size: 1.625rem;
    }
}

/* ===== 03-components/filmSEO.css ===== */
/* =============================================
   BUZZ.CITY — Film-Page SEO Content

   Wird von der film-meta Edge Function vor </main>
   ins HTML injiziert. Sichtbar bis die SPA beim Boot
   übernimmt (_removeSeoContent() entfernt [data-seo-content]).
   ============================================= */

.film-seo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* === Breadcrumb === */
.film-seo__breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.film-seo__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.film-seo__breadcrumb a:hover {
    color: var(--color-text-brand);
    text-decoration: underline;
}

/* === Heading & Meta === */
.film-seo__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.film-seo__year {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.film-seo__meta {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

/* === Cover === */
.film-seo__cover {
    float: right;
    width: 180px;
    height: auto;
    max-width: 40%;
    border-radius: var(--radius-md);
    margin: 0 0 var(--spacing-md) var(--spacing-lg);
}

.film-seo__description {
    font-size: 1.0625rem;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
}

/* === Kinos === */
.film-seo__cinemas {
    clear: both;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-subtle);
}

.film-seo__cinemas h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.film-seo__cinemas--empty p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.film-seo__cinema-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.film-seo__cinema {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.film-seo__cinema-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-brand);
    text-decoration: none;
}

.film-seo__cinema-name:hover {
    text-decoration: underline;
}

.film-seo__cinema-addr {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
}

/* === Spielzeiten === */
.film-seo__showtimes {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.film-seo__showtimes li {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-muted);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.film-seo__version {
    color: var(--color-text-brand);
    font-weight: 600;
}

/* === Back Link === */
.film-seo__back {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.film-seo__back a {
    color: var(--color-text-brand);
    text-decoration: none;
    font-weight: 500;
}

.film-seo__back a:hover {
    text-decoration: underline;
}

/* === Mobile === */
@media (max-width: 640px) {
    .film-seo {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    .film-seo__title {
        font-size: 1.625rem;
    }
    .film-seo__cover {
        width: 130px;
    }
}

/* ===== 03-components/buttons.css ===== */
/* ==============================================
   BUZZ.CITY - Buttons
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   POPUP FAVORITE BUTTON
   ============================================== */

.popup-favorite-btn {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.popup-favorite-btn:hover {
    background-color: var(--color-btn-primary-bg-hover);
}

.popup-favorite-btn.favorited {
    background-color: var(--color-status-error);
}

.popup-favorite-btn.favorited:hover {
    background-color: #DC2626;
}

/* ==============================================
   REMOVE BUTTON (Favorites)
   ============================================== */

.favorite-item .remove-btn {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-status-error);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.favorite-item .remove-btn:hover {
    background-color: #DC2626;
}

/* ==============================================
   MOBILE SEARCH TOGGLE
   ============================================== */

#mobile-search-toggle {
    transition: all var(--transition-fast);
}

#mobile-search-toggle:hover {
    background-color: var(--color-bg-subtle);
}

/* ==============================================
   SHOW IDEAS BUTTON (Primary Large)
   ============================================== */

.show-ideas-btn {
    width: 100%;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.show-ideas-btn:hover {
    background-color: var(--color-btn-primary-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

/* ==============================================
   SHOW IDEAS BUTTON (Primary Large)
   ============================================== */

.btn-primary {
    width: 100%;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.btn-primary:hover {
    background-color: var(--color-btn-primary-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Blaue Primary-Variante — z. B. „Benachrichtigen" im Event-Overlay */
.btn-primary--blue {
    background-color: var(--color-btn-primary-blue-bg);
    color: var(--color-btn-primary-blue-text);
}

@media (hover: hover) {
    .btn-primary--blue:hover {
        background-color: var(--color-btn-primary-blue-bg-hover);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-secondary-blue) 30%, transparent);
    }
}

/* ==============================================
   SECONDARY BUTTON (Outline)
   ============================================== */

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.btn-secondary:hover {
    background: var(--color-btn-secondary-bg-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-brand-hover);
}

.btn-secondary svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ==============================================
   SECONDARY BUTTON FULL WIDTH
   ============================================== */

.btn-secondary-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-secondary-full:hover {
    background: var(--color-btn-secondary-bg-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-brand-hover);
}

.btn-secondary-full svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.btn-secondary-full span {
    display: inline-block;
    flex-shrink: 0;
}


/* ===== 03-components/fab.css ===== */
/* ==============================================
   BUZZ.CITY - FAB "Suchen + Entdecken"
   Floating Action Button rechts unten über der
   Kategorie-Chip-Leiste. Öffnet das Such-/Browse-
   Overlay; bei offenem Overlay morpht die Lupe zum X
   (Klasse .search-fab--close, gesetzt von
   headerSearch.js in openSearch/closeSearch).
   ============================================== */

.search-fab {
    position: fixed;
    /* über der Chip-Leiste (~76px hoch am Desktop) */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    /* Desktop: bündig mit dem rechten Ende des 48rem-Chip-Bereichs */
    right: max(20px, calc((100% - 48rem) / 2));
    z-index: 47; /* über Chip-Leiste (--z-fixed: 30), unter Modals (--z-modal: 50) */
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    padding: 0;
}

@media (hover: hover) {
    .search-fab:hover {
        background-color: var(--color-brand-hover);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px color-mix(in srgb, var(--color-brand) 30%, transparent);
    }
}

.search-fab:active {
    transform: translateY(0);
}

.search-fab svg {
    width: 28px;
    height: 28px;
    color: var(--color-text-inverse);
}

/* Icon-Morph: Lupe ↔ X */
.search-fab .search-fab-icon-close {
    display: none;
}

.search-fab--close .search-fab-icon-search {
    display: none;
}

.search-fab--close .search-fab-icon-close {
    display: block;
}

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

/* Smartphone Portrait: Chip-Leiste hat höheren Sockel (40px) */
@media (max-width: 640px) {
    .search-fab {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        right: 16px;
    }
}

/* Smartphone Landscape */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .search-fab {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        right: 16px;
    }
}

/* ===== 03-components/legend.css ===== */
/* ==============================================
   BUZZ.CITY - Legend
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   LEGEND BUTTON
   ============================================== */

.map-legend-btn {
    position: fixed;
    top: 485px;
    right: 20px;
    background-color: var(--color-bg-surface);
    color: var(--color-text-brand);
    border: 2px solid var(--color-border-brand);
    border-radius: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    z-index: 45;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.map-legend-btn:hover {
    background-color: var(--color-brand-subtle);
    border: 2px solid var(--color-border-brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.map-legend-btn.hidden {
    display: none;
}

/* ==============================================
   LEGEND PANEL
   ============================================== */

.map-legend-panel {
    position: fixed;
    top: 245px;
    right: 0px;
    bottom: 20px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 46;
    min-width: 200px;
    max-width: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-legend-panel.open {
    transform: translateX(0);
}

/* ==============================================
   LEGEND HEADER
   ============================================== */

.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.legend-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legend-close-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.legend-close-btn:hover {
    color: var(--color-text-primary);
    transform: scale(1.1);
}

.legend-close-btn svg {
    width: 20px;
    height: 20px;
}

/* ==============================================
   LEGEND SCROLL CONTAINER
   ============================================== */

.legend-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-md);
    position: relative;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    max-height: calc(100vh - 265px);
    overscroll-behavior: contain;
}

/* ==============================================
   LEGEND CONTENT
   ============================================== */

.legend-content {
    display: block;
}

.legend-section {
    margin-bottom: var(--spacing-md);
}

.legend-section:last-child {
    margin-bottom: 0;
}

.legend-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.legend-section-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.legend-section-item:last-child {
    margin-bottom: 0;
}

.legend-color-indicator {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

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

@media (max-width: 640px) {
    .map-legend-btn {
        top: 445px;
        right: 20px;
        padding: var(--spacing-sm) 14px;
        font-size: 12px;
    }

    .map-legend-panel {
        top: 230px;
        bottom: 20px;
        right: 0px;
        min-width: 180px;
        max-width: 240px;
        display: flex;
        flex-direction: column;
    }

    .legend-scroll-container {
        padding: var(--spacing-sm);
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .map-legend-btn {
        top: 445px;
        right: 20px;
        padding: var(--spacing-sm) 14px;
        font-size: 12px;
    }

    .map-legend-panel {
        top: 230px;
        bottom: 0px;
        right: 0px;
        min-width: 180px;
        max-width: 240px;
        display: flex;
        flex-direction: column;
    }

    .legend-scroll-container {
        padding: var(--spacing-sm);
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .map-legend-btn {
        top: 465px;
        right: 20px;
        padding: var(--spacing-sm) 14px;
        font-size: 12px;
    }

    .map-legend-panel {
        top: 245px;
        bottom: 0px;
        right: 0px;
        min-width: 180px;
        max-width: 240px;
        display: flex;
        flex-direction: column;
    }

    .legend-scroll-container {
        padding: var(--spacing-sm);
    }
}

@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .map-legend-btn {
        bottom: 20px;
        left: 220px;
    }

    .map-legend-panel {
        bottom: 70px;
        left: 220px;
        display: flex;
        flex-direction: column;
    }
}
/* ===== 03-components/forms.css ===== */
/* ==============================================
   BUZZ.CITY - Formulare
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   CUSTOM SELECT (City Selector etc.)
   ============================================== */

.city-selector {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23627887' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacing-sm) center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: var(--spacing-2xl);
}

/* ==============================================
   CHECKBOX & TOGGLE STYLES
   ============================================== */

.layer-toggle input[type="checkbox"] {
    accent-color: var(--color-checkbox-accent);
}

/* ==============================================
   ALLGEMEINE INPUT STYLES
   ============================================== */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    color: var(--color-input-text);
    transition: border-color var(--transition-fast);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
    border-color: var(--color-input-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-input-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 15%, transparent);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-input-placeholder);
}

/* ==============================================
   FORM LAYOUT (Kontakt-Formular & ähnliche)
   ============================================== */

.form-stack {
    max-width: 700px;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: 1rem;
    font-family: inherit;
}

.form-control--textarea {
    min-height: 8rem;
    resize: vertical;
}

/* Honeypot: unsichtbar, aber für Bots zugänglich */
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: -10000px;
    visibility: hidden;
}

.form-required-note {
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ==============================================
   FORM FEEDBACK (Success / Error)
   ============================================== */

.form-feedback {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    line-height: 1.6;
}

.form-feedback strong {
    display: block;
    margin-bottom: var(--spacing-xs);
}

.form-feedback--success {
    background-color: color-mix(in srgb, var(--color-status-success) 15%, transparent);
    border: 1px solid var(--color-status-success);
    color: var(--color-status-success);
}

.form-feedback--error {
    background-color: color-mix(in srgb, var(--color-status-error) 15%, transparent);
    border: 1px solid var(--color-status-error);
    color: var(--color-status-error);
}

/* ===== 03-components/toast.css ===== */
/* ==============================================
   BUZZ.CITY - Toast Notifications
   ============================================== */

.toast-container {
    position: fixed;
    bottom: var(--spacing-2xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--spacing-xs);
    pointer-events: none;
}

.toast {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    box-shadow: var(--shadow-lg);
    text-align: center;
    width: fit-content;      /* Breite folgt dem Text statt fixem Wert */
    max-width: 400px;        /* mittlere & große Auflösungen */
}

/* Kleine Auflösungen: max. 80% der verfügbaren Breite */
@media (max-width: 768px) {
    .toast {
        max-width: 80vw;
    }
}

.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Typen */
.toast-success {
    background-color: var(--color-brand);
}

.toast-info {
    background-color: var(--color-secondary-blue);
}

.toast-warning {
    background-color: #F59E0B;
}

.toast-error {
    background-color: #DC2626;
}

/* Persistenter Toast (mit Spinner) */
.toast-persistent {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: left;
}

.toast-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: toast-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes toast-spin {
    to { transform: rotate(360deg); }
}

.toast-message {
    flex: 1;
}

/* Kategorie-Chips + FAB ausblenden während Toast sichtbar */
.category-chip-bar,
.search-fab {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body.toast-active .category-chip-bar,
body.toast-active .search-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

/* Toast mit Action-Button (z.B. Undo) */
.toast-with-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: left;
}

.toast-action-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    padding: var(--spacing-2xs) var(--spacing-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.toast-action-btn:active {
    background: rgba(255, 255, 255, 0.35);
}
/* ===== 03-components/modals.css ===== */
/* ==============================================
   BUZZ.CITY - Modals & Popovers
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   MAPLIBRE POPUP STYLES
   ============================================== */

.maplibregl-popup-content {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    min-width: 200px;
}

.maplibregl-popup-close-button {
    font-size: 20px;
    padding: var(--spacing-xs);
    color: var(--color-text-muted);
}

@media (hover: hover) {
    .maplibregl-popup-close-button:hover {
        background-color: var(--color-bg-subtle);
        color: var(--color-text-secondary);
    }
}

/* ==============================================
   POPUP CONTENT
   ============================================== */

.popup-content h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.popup-content p {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ==============================================
   ANIMATIONS
   ============================================== */

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

/* ==============================================
   SIDEBAR OVERLAY
   ============================================== */

#sidebar-overlay {
    background-color: var(--color-overlay-backdrop);
    transition: opacity var(--transition-normal);
    backdrop-filter: blur(2px);
}

#sidebar-overlay.hidden {
    display: none;
}

/* ==============================================
   BASE POPOVER COMPONENT
   ============================================== */

.base-popover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Sichtbarkeit über visibility steuern, damit transform-Transition
   beim Öffnen UND Schließen sauber greift. display:none würde die
   Animation killen. visibility erst NACH der Transition umschalten. */
.base-popover {
    transition: visibility 0s linear 0.3s;
}

.base-popover:not(.hidden) {
    transition: visibility 0s linear 0s;
}

.base-popover.hidden {
    visibility: hidden;
    pointer-events: none;
}

.popover-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay-backdrop);
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.base-popover:not(.hidden) .popover-backdrop {
    opacity: 1;
}

.popover-content {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 600px;
    width: 100%;
    margin: 0 var(--spacing-md);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform var(--transition-slow);
    position: relative;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.base-popover:not(.hidden) .popover-content {
    transform: translateY(0);
}

.popover-content.dragging {
    transition: none;
}

/* ==============================================
   DESKTOP: Overlay als rechtes Seitenpanel
   Ab Laptop-Breite (1024px) dockt das Overlay rechts an,
   dunkelt den Screen NICHT ab und lässt die restliche
   Karte bedienbar. Gilt für ALLE .base-popover-Overlays
   (Event, Cluster, Sight, POI, Grätzl, City).
   ============================================== */
@media (min-width: 1024px) {
    /* Container: unten rechts andocken; Klicks außerhalb des Panels
       gehen an die Karte durch (pointer-events: none) */
    .base-popover {
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
    }

    /* Kein Abdunkeln des Screens */
    .base-popover .popover-backdrop {
        display: none;
    }

    /* Sheet → schwebendes Seitenpanel: kommt von rechts rein, Höhe vom
       Inhalt bestimmt, max. bis kurz unter die Datebar. overflow:visible
       lässt das über den oberen Rand ragende Bild sichtbar. */
    .base-popover .popover-content {
        margin: 0 var(--spacing-md) var(--spacing-md) 0;
        height: auto;
        max-height: calc(100vh - 150px);
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
        overflow: visible;
        transform: translateX(calc(100% + var(--spacing-md)));
        pointer-events: auto;
    }

    .base-popover:not(.hidden) .popover-content {
        transform: translateX(0);
    }
}

/* ==============================================
   POPOVER SCROLL CONTAINER (Utility)
   Wird an einen Popover-Body angehängt, wenn
   der Inhalt scrollbar sein soll (z.B. Event-
   Popover mit vielen Vorstellungen).
   Arbeitet mit SwipeHandler zusammen:
   Pull-to-close greift nur bei scrollTop === 0.
   ============================================== */

.popover-scroll {
    flex: 1;
    min-height: 0;                       /* erlaubt flex-shrinking in Safari */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;   /* momentum scrolling iOS */
    overscroll-behavior: contain;        /* kein Bounce auf die Seite */
    touch-action: pan-y;                 /* explizit nur vertikal scrollen */
    transform: translateZ(0);            /* Hardware-Beschleunigung iOS */
}

/* ==============================================
   POPOVER HEADER
   ============================================== */

.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.popover-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-brand) !important;
}

.popover-close {
    background: none;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: all var(--transition-normal);
}

@media (hover: hover) {
    .popover-close:hover {
        background-color: var(--color-bg-subtle);
        color: var(--color-text-primary);
    }
}

.popover-description {
    padding: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.popover-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.popover-top-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 var(--spacing-lg);
    margin-top: -80px;
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 200;
    pointer-events: none;       /* leerer Bereich blockiert keine Klicks (z.B. auf darunterliegende Bilder) */
}

/* Buttons innerhalb der Top-Actions-Leiste sollen weiterhin klickbar sein */
.popover-top-actions > * {
    pointer-events: auto;
}

.popover-icon-btn {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition-normal);
}

@media (hover: hover) {
    .popover-icon-btn:hover {
        background: var(--color-bg-muted);
        color: var(--color-text-primary);
    }
}

/* ==============================================
   THEME & OPTION CHIPS
   ============================================== */

.theme-chips,
.option-chips,
.content-chips,
.character-chips,
.env-chips,
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.theme-chip,
.option-chip,
.content-chip,
.character-chip,
.env-chip,
.category-chip {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    line-height: 1.5;
    border: 2px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .theme-chip:hover,
    .option-chip:hover,
    .content-chip:hover,
    .character-chip:hover,
    .env-chip:hover,
    .category-chip:hover {
        border-color: var(--color-brand-hover);
        background-color: var(--color-bg-subtle);
    }
}

.theme-chip.active,
.option-chip.active,
.content-chip.active,
.character-chip.active,
.env-chip.active,
.category-chip.active {
    border-color: var(--color-border-brand);
    background-color: var(--color-brand-subtle);
    color: var(--color-text-brand);
}

/* ==============================================
   SHOW IDEAS BUTTON (in modals)
   ============================================== */

.show-ideas-btn {
    width: 100%;
    background-color: var(--color-btn-primary-bg) !important;
    color: var(--color-btn-primary-text) !important;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

@media (hover: hover) {
    .show-ideas-btn:hover {
        background-color: var(--color-btn-primary-bg-hover) !important;
        color: var(--color-btn-primary-text) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand) 30%, transparent);
    }
}

.show-ideas-btn:active {
    transform: translateY(0);
}

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

/* ==============================================
   QUESTION SECTIONS (Miss the Buzz)
   ============================================== */

.question-section {
    margin-bottom: var(--spacing-xl);
}

.question-section:last-of-type {
    margin-bottom: var(--spacing-xl);
}

.question-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.4;
}

/* ==============================================
   CUSTOM SLIDER
   ============================================== */

.slider-container {
    width: 100%;
}

.custom-slider {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    outline: none;
    opacity: 0.8;
    transition: opacity var(--transition-normal);
    margin-bottom: var(--spacing-md);
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-x;
    cursor: pointer;
}

@media (hover: hover) {
    .custom-slider:hover {
        opacity: 1;
    }
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-brand) !important;
    cursor: pointer;
    border: 2px solid var(--white);
    box-shadow: none !important;
    transition: all var(--transition-normal);
}

@media (hover: hover) {
    .custom-slider::-webkit-slider-thumb:hover {
        background: var(--color-brand-hover) !important;
        transform: scale(1.1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 20%, transparent) !important;
    }
}

.custom-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-brand) !important;
    cursor: pointer;
    border: 2px solid var(--white);
    box-shadow: none !important;
    transition: all var(--transition-normal);
}

@media (hover: hover) {
    .custom-slider::-moz-range-thumb:hover {
        background: var(--color-brand-hover) !important;
        transform: scale(1.1);
    }
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.slider-value {
    font-weight: 600;
    color: var(--color-text-brand);
    background: var(--color-brand-subtle);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-brand-muted);
}

/* ==============================================
   ERROR MODAL
   ============================================== */

#error-modal .modal-content {
    animation: modalSlideIn var(--transition-normal) ease-out;
}

#error-close {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

@media (hover: hover) {
    #error-close:hover {
        background-color: var(--color-btn-primary-bg-hover);
    }
}

/* ==============================================
   IMAGE POPOVER
   ============================================== */

.image-popover-content {
    max-width: 600px;
    padding: 0;
}

.image-circle-container {
    display: flex;
    justify-content: center;
    margin-top: -40px;
    margin-bottom: var(--spacing-md);
    z-index: 20;
    position: relative;
}

.popover-image-circle {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    object-fit: contain;
    background-color: var(--color-bg-surface);
    /* border: 4px solid var(--white); */
    border: 6px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 10pt rgba(255, 255, 255, .3);
}

.image-popover-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
}

.image-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
}

.image-wikipedia {
    padding: var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.image-wikipedia p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.image-wikipedia a {
    color: var(--color-interactive);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .image-wikipedia a:hover {
        text-decoration: underline;
    }
}

/* ==============================================
   ACTION BUTTONS
   ============================================== */

.website-btn {
    width: 100%;
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-brand);
    color: var(--color-text-brand);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--spacing-lg);
}

@media (hover: hover) {
    .website-btn:hover {
        background: var(--color-brand-subtle);
    }
}

.website-route-btn {
    width: 100%;
    background: var(--color-btn-primary-bg) !important;
    border: 2px solid var(--color-brand);
    color: var(--color-btn-primary-text) !important;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--spacing-lg);
}

@media (hover: hover) {
    .website-route-btn:hover {
        background: var(--color-brand-subtle);
    }
}

/* ==============================================
   INFO GRID
   ============================================== */

.image-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md) var(--spacing-sm);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    word-break: break-word;
}

.info-website {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    word-break: break-word;
}

@media (hover: hover) {
    .info-website a:hover {
        color: var(--color-interactive-hover) !important;
    }
}

/* ==============================================
   GRAETZL POPOVER
   ============================================== */

.graetzl-popover-content {
    max-width: 600px;
    padding: 0;
}

.graetzl-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.graetzl-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: left;
}

.graetzl-header-text {
    flex: 1;
    min-width: 0;
}

.graetzl-popover-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

@media (hover: hover) {
    .graetzl-popover-close:hover {
        background: var(--color-bg-muted);
        color: var(--color-text-primary);
    }
}

.graetzl-popover-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg);
}

.graetzl-vibe {
    margin: var(--spacing-xs) 0 0 0;
    color: var(--color-text-muted);
    font-family: var(--font-family-primary, system-ui);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}

.graetzl-vibe[hidden] {
    display: none;
}

.graetzl-wikipedia {
    padding: var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.graetzl-wikipedia #graetzl-wikipedia-excerpt {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.graetzl-wikipedia a {
    color: var(--color-interactive);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .graetzl-wikipedia a:hover {
        text-decoration: underline;
    }
}

/* Fallback-Modus: Das #graetzl-wikipedia-excerpt-<p> wird zum Flex-Container
   für Header (Badge + Notice), Original-Text und Translate-Button.
   Wird gesetzt von graetzlRenderer.js, wenn Wiki nur in Default-Sprache verfügbar ist. */
.graetzl-wikipedia--fallback #graetzl-wikipedia-excerpt {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ==============================================
   GRAETZL EVENTS SECTION
   ============================================== */

.graetzl-events-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.graetzl-events-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.graetzl-events-count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.graetzl-events-empty {
    margin: 0;
    padding: var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.graetzl-events-upcoming {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.graetzl-events-upcoming-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.graetzl-events-upcoming-when {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-brand);
    white-space: nowrap;
}

.graetzl-events-upcoming:active {
    background: var(--color-bg-muted, var(--color-bg-subtle));
}

.graetzl-events-upcoming:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

@media (hover: hover) {
    .graetzl-events-upcoming:hover {
        background: var(--color-bg-muted, var(--color-bg-subtle));
        border-color: var(--color-brand);
    }
}

/* ==============================================
   CITY POPOVER
   ============================================== */

.city-popover-content {
    max-width: 600px;
    max-height: 75vh;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.city-wikipedia {
    padding: var(--spacing-lg);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xl);
}

.city-wikipedia p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.6;
}

.city-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.city-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    text-align: center;
}

/* Verlinkte Kacheln (Grätzl, Sehenswürdigkeiten) */
a.city-stat {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

@media (hover: hover) {
    a.city-stat:hover {
        border-color: var(--color-border-brand);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.city-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-brand);
}

.city-stat__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.city-stat__sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Leere Sub-Zeile (z. B. keine Events) erzeugt keine Lücke */
.city-stat__sub:empty {
    display: none;
}

.city-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl) var(--spacing-lg);
}

.info-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.info-section h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-brand);
    border-bottom: 2px solid var(--color-brand-subtle);
    padding-bottom: var(--spacing-sm);
}

.info-section p,
.info-section div {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.info-section ul {
    margin: 0;
    padding-left: var(--spacing-md);
    list-style-type: disc;
}

.info-section li {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
}

/* ==============================================
   EVENT POPOVER
   ============================================== */

/* Event-Popover liegt über Cluster-Liste wenn beide offen */
#event-popover {
    z-index: 1001;
}

/* ---------------------------------------------------------------
   Block-Spacing im Event-Overlay
   Zwei Stellschrauben statt verstreuter margins:
   --event-gap-inner = Abstand innerhalb eines Blocks
   --event-gap-block = Abstand zwischen den Blöcken
   Nur auf #event-popover gescoped, damit POI/Sights/Grätzl
   (gleiche .image-popover-body / .image-title) unberührt bleiben.
   --------------------------------------------------------------- */
#event-popover .image-popover-body {
    --event-gap-inner: var(--spacing-sm);
    --event-gap-block: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--event-gap-block);
}

.event-block {
    display: flex;
    flex-direction: column;
    gap: var(--event-gap-inner);
}

/* Beschreibungs-Block ausblenden, wenn kein Text vorhanden ist
   (sonst entstünde ein leerer Block-Abstand) */
.event-block--description:not(:has(.event-subtitle:not(:empty))) {
    display: none;
}

/* Geteilte Klassen nur im Event-Popover neutralisieren –
   das Block-Spacing übernimmt jetzt den Abstand */
#event-popover .location-page-link {
    margin: 0;
}

.event-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.event-subtitle:empty {
    display: none;
}

.event-subtitle.expanded {
    -webkit-line-clamp: unset;
    display: block;
}

/* Wrapper: Positions-Anker für den Toggle-Button */
.event-subtitle-wrapper {
    position: relative;
}

.event-subtitle-toggle {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--color-bg-subtle);
    border: none;
    color: var(--color-text-brand);
    font-weight: 600;
    font-size: 0.85rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    /* Sanfter Fade vom Text zum Button */
    box-shadow: -12px 0 12px 0 var(--color-bg-subtle);
}

.event-time-info {
    font-size: 0.95rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 3px solid currentColor;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    display: none;
}

.event-time-info:empty {
    display: none;
}

.event-info-columns {
    display: flex;
    gap: var(--spacing-md);
}

.event-info-columns > * {
    flex: 1;
    margin-bottom: 0;
}

.event-location-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.event-location-info {
    flex: 1;
    min-width: 0;
}

.event-time-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.event-time-info-block {
    flex: 1;
    min-width: 0;
}

.event-time-info-block .info-value {
    white-space: pre-line;
}

.event-action-button-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
}

.event-action-button-row > * {
    flex: 1;
    margin-bottom: 0;
}

.event-favorite-btn-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    margin: var(--spacing-md) 0;
    transition: background var(--transition-normal);
}

@media (hover: hover) {
    .event-favorite-btn-full:hover {
        background: var(--color-btn-primary-bg-hover);
    }
}

.event-favorite-btn-full svg {
    flex-shrink: 0;
}

/* ==============================================
   MOBILE RESPONSIVE
   ============================================== */

@media (max-width: 480px) {
    .popover-content {
        margin: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .popover-header,
    .popover-body {
        padding: var(--spacing-md);
    }

    .theme-chip,
    .option-chip,
    .content-chip,
    .character-chip,
    .env-chip,
    .category-chip {
        font-size: 0.85rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .question-title {
        font-size: 1rem;
    }

    .slider-labels {
        font-size: 0.8rem;
    }

    .slider-value {
        padding: 0.2rem var(--spacing-sm);
        font-size: 0.8rem;
    }

    .image-popover-content {
        margin: 0;
        max-width: none;
    }

    .image-info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .city-popover-content {
        margin: 0;
        max-width: none;
    }

    .city-info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .city-wikipedia {
        padding: var(--spacing-md);
    }

    .city-stats {
        gap: var(--spacing-sm);
    }

    .city-stat {
        padding: var(--spacing-sm);
    }

    .city-stat__value {
        font-size: 1.4rem;
    }
}

/* ===== 03-components/imageLightbox.css ===== */
/* ==============================================
   IMAGE LIGHTBOX
   Generischer Fullscreen-Image-Viewer.
   Wird aktuell von Film-Postern genutzt (Klick auf event-popover-icon).
   Wiederverwendbar für POI-Fotos, Location-Fotos etc.

   API: window.imageLightbox.open(src, alt) / window.imageLightbox.close()
   ============================================== */

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1500;                              /* über allen Popovers (z-index: 1000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background-color: rgba(0, 0, 0, 0.92);      /* dunkler Backdrop für Bildbetrachtung */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

/* Hidden-Zustand: komplett aus dem Layout */
.image-lightbox.hidden {
    display: none;
}

/* Sichtbar-Zustand: einblenden */
.image-lightbox:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Bild: zentriert, max. 90% Viewport, Aspect-Ratio bewahrt */
.image-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    /* Klick auf Bild soll NICHT schließen — nur Backdrop & Close-Button */
    cursor: default;
}

/* Close-Button: oben rechts, dezent über Backdrop */
.image-lightbox-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.image-lightbox-close:hover,
.image-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    outline: none;
}

.image-lightbox-close svg {
    width: 24px;
    height: 24px;
}

/* ===== 03-components/calendar-popover.css ===== */
/* ==============================================
   BUZZ.CITY - Calendar Popover
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   CALENDAR POPOVER CONTAINER
   ============================================== */

.calendar-popover {
    position: fixed;
    top: 180px;
    right: 180px;
    z-index: var(--z-popover);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-lg);
    min-width: 320px;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.calendar-popover.hidden {
    display: none;
}

/* ==============================================
   CALENDAR HEADER
   ============================================== */

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.calendar-nav-btn {
    padding: var(--spacing-sm);
    background: none;
    border: none;
    color: var(--color-text-brand);
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.calendar-nav-btn:hover {
    background-color: var(--color-brand-muted);
}

.calendar-month-year {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
}

/* ==============================================
   WEEKDAYS HEADER
   ============================================== */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: var(--spacing-sm) 0;
}

/* ==============================================
   CALENDAR DAYS GRID
   ============================================== */

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.calendar-day {
    aspect-ratio: 1 / 1;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day.selected {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.calendar-day.originally-selected {
    border: 2px solid var(--color-border-brand);
    background: transparent;
}

.calendar-day.originally-selected.selected {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-border-brand);
}

.calendar-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.calendar-day.empty {
    visibility: hidden;
}

/* ==============================================
   CALENDAR ACTIONS
   ============================================== */

.calendar-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-subtle);
}

.calendar-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
}

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

.calendar-btn-today {
    background: var(--color-brand-muted);
    color: var(--color-text-brand);
    border: 2px solid var(--color-border-brand);
}

.calendar-btn-cancel {
    background: transparent;
    border: 2px solid var(--color-border-brand);
    color: var(--color-text-brand);
}

.calendar-btn-ok {
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

/* ==============================================
   HOVER STATES (nur Pointer-Geräte)
   Verhindert sticky :hover auf Touch-Geräten (iOS)
   ============================================== */
@media (hover: hover) {
    .calendar-nav-btn:hover {
        background-color: var(--brand-primary-100);
    }

    .calendar-day:hover:not(.disabled) {
        background: var(--brand-primary-100);
    }

    .calendar-btn-today:hover {
        background: var(--brand-primary-200);
    }

    .calendar-btn-cancel:hover {
        background: var(--brand-primary-50);
    }

    .calendar-btn-ok:hover {
        background: var(--brand-primary-600);
    }
}

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

@media (max-width: 768px) {
    .calendar-popover {
        right: var(--spacing-md);
        left: var(--spacing-md);
        top: 240px;
        min-width: auto;
    }
}
/* ===== 03-components/filter-overlay.css ===== */
/* ==============================================
   FILTER POPOVER SPECIFIC
   ============================================== */

.filter-popover-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
}

/* Filter Scroll Container */
.filter-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    max-height: calc(100vh - 200px);
    overscroll-behavior: contain;
}

.filter-scroll-content {
    padding: 20px;
}

/* ==============================================
   FILTER CHECKBOX LIST
   ============================================== */

.filter-checkbox-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    align-items: start;
}

/* ==============================================
   FILTER SECTIONS & ICON BUTTONS
   ============================================== */

/* Filter Section Container */
.filter-section {
    margin-bottom: var(--spacing-lg);
}

.filter-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* Filter Section Header mit All/None Buttons */
.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.filter-section-header .filter-section-title {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: none;
    letter-spacing: normal;
}

.filter-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-action-btn {
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.filter-action-btn:hover {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border-strong);
}

.filter-action-btn:active {
    background-color: var(--color-bg-muted);
}

/* ==============================================
   FILTER GROUP ACCORDION
   ============================================== */

/* Gruppe Container */
.filter-group {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

/* Gruppe Header (Checkbox + Name + Pfeil) */
.filter-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--color-bg-subtle);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.filter-group-header:hover {
    background-color: var(--color-bg-muted);
}

/* Gruppen-Farben via CSS-Tokens */
.filter-group[data-group-id="music"]     { --group-color: var(--color-group-music); }
.filter-group[data-group-id="stage"]     { --group-color: var(--color-group-stage); }
.filter-group[data-group-id="culture"]   { --group-color: var(--color-group-culture); }
.filter-group[data-group-id="cinema"]    { --group-color: var(--color-group-cinema); }
.filter-group[data-group-id="knowledge"] { --group-color: var(--color-group-knowledge); }
.filter-group[data-group-id="nightlife"] { --group-color: var(--color-group-nightlife); }
.filter-group[data-group-id="markets"]   { --group-color: var(--color-group-markets); }
.filter-group[data-group-id="family"]    { --group-color: var(--color-group-family); }
.filter-group[data-group-id="sports"]    { --group-color: var(--color-group-sports); }
.filter-group[data-group-id="other"]     { --group-color: var(--color-group-other); }
.filter-group[data-group-id="queer"]     { --group-color: var(--color-group-queer); }

.filter-group-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--group-color, var(--color-checkbox-accent));
    flex-shrink: 0;
}

/* Touch-Target für Checkbox */
.filter-checkbox-touch-target {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin: -0.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

.filter-group-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-primary);
    user-select: none;
}

.filter-group-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.filter-group.expanded .filter-group-toggle {
    transform: rotate(180deg);
}

/* Kategorie-Liste (aufklappbar) */
.filter-category-list {
    display: none;
    padding: 0.5rem 0.75rem 0.75rem 2.75rem;
    background-color: var(--color-bg-default);
    border-top: 1px solid var(--color-border-default);
}

.filter-group.expanded .filter-category-list {
    display: block;
}

/* Einzelne Kategorie */
.filter-category-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    cursor: pointer;
}

.filter-category-item:hover {
    color: var(--color-primary);
}

.filter-category-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--group-color, var(--color-checkbox-accent));
    flex-shrink: 0;
}

.filter-category-name {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    user-select: none;
}

.filter-category-item:hover .filter-category-name {
    color: var(--color-text-primary);
}

/* Indeterminate State Styling */
.filter-group-checkbox:indeterminate {
    opacity: 0.7;
}

/* Gruppe deaktiviert (alle Kategorien aus) */
.filter-group.all-hidden .filter-group-name {
    color: var(--color-text-muted);
}

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

@media (max-width: 400px) {
    .filter-checkbox-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .filter-popover-content {
        margin: 0;
        max-width: none;
    }
}
/* ===== 03-components/map-layers.css ===== */
/* ==============================================
   BUZZ.CITY - Map Layers Panel
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   MAP LAYERS PANEL
   ============================================== */

.map-layers-panel {
    position: fixed;
    top: 180px;
    right: 0;
    bottom: 80px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 46;
    min-width: 220px;
    max-width: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-layers-panel.open {
    transform: translateX(0);
}

.map-layers-panel.hidden {
    display: none;
}

/* ==============================================
   MAP LAYERS HEADER
   ============================================== */

.map-layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.map-layers-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.map-layers-close-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.map-layers-close-btn:hover {
    color: var(--color-text-primary);
    transform: scale(1.1);
}

.map-layers-close-btn svg {
    width: 20px;
    height: 20px;
}

/* ==============================================
   SCROLL CONTAINER
   ============================================== */

.map-layers-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-md);
    position: relative;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    max-height: calc(100vh - 300px);
    overscroll-behavior: contain;
}

/* ==============================================
   MAP LAYERS CONTENT
   ============================================== */

.map-layers-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.map-layers-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-subtle);
}

.map-layers-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ==============================================
   CHECKBOX ITEMS
   ============================================== */

.map-layers-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal);
}

.map-layers-item:hover {
    background-color: var(--color-bg-subtle);
}

.map-layers-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-checkbox-accent);
    flex-shrink: 0;
}

.map-layers-item-label {
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

/* ==============================================
   AKTIONS-BUTTON „VERANSTALTUNGEN“
   Öffnet das Filter-Overlay (ehem. „Meine Vorlieben“
   im Such-Overlay). Optik wie ein Checkbox-Item.
   ============================================== */

.map-layers-action {
    background: none;
    border: none;
    width: 100%;
    font: inherit;
    text-align: left;
}

.map-layers-action svg {
    color: var(--color-text-brand);
    flex-shrink: 0;
}

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

@media (max-width: 640px) {
    .map-layers-panel {
        top: 160px;
        bottom: 70px;
        min-width: 200px;
        max-width: 260px;
    }

    .map-layers-scroll-container {
        padding: var(--spacing-sm);
        max-height: calc(100vh - 280px);
    }

    .map-layers-item-label {
        font-size: 13px;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .map-layers-panel {
        top: 170px;
        bottom: 70px;
        min-width: 200px;
        max-width: 260px;
    }

    .map-layers-scroll-container {
        padding: var(--spacing-sm);
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .map-layers-panel {
        top: 180px;
        bottom: 60px;
        min-width: 220px;
        max-width: 280px;
    }

    .map-layers-scroll-container {
        padding: 14px;
    }
}

@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .map-layers-panel {
        top: 80px;
        bottom: 20px;
        min-width: 180px;
        max-width: 240px;
    }
}
/* ===== 03-components/bikePaths.css ===== */
/* ==============================================
   BUZZ.CITY - Bike Paths
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   COMFORT LEVEL COLORS
   ============================================== */

:root {
    --bike-comfort-5: #12873d;
    --bike-comfort-4: #22c55e;
    --bike-comfort-3: #79e8a2;
    --bike-comfort-2: #fbbf24;
    --bike-comfort-1: #ef4444;
    --bike-comfort-0: #FF00FF;
}

/* ==============================================
   BIKE PATH LEGEND
   ============================================== */

.bike-path-legend {
    background-color: var(--color-brand-subtle);
    border: 1px solid var(--color-border-brand);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}

.bike-path-legend-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-brand);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bike-path-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.bike-path-legend-color {
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

.bike-path-legend-color.comfort-5 {
    background-color: var(--bike-comfort-5);
}

.bike-path-legend-color.comfort-4 {
    background-color: var(--bike-comfort-4);
}

.bike-path-legend-color.comfort-3 {
    background-color: var(--bike-comfort-3);
}

.bike-path-legend-color.comfort-2 {
    background-color: var(--bike-comfort-2);
}

.bike-path-legend-color.comfort-1 {
    background-color: var(--bike-comfort-1);
}

.bike-path-legend-color.comfort-0 {
    background-color: var(--bike-comfort-0);
}
/* ===== 03-components/subway.css ===== */
/* ============================================
   U-Bahn Layers (Mapbox Styles werden über JS gesteuert)
   ============================================ */

/* Falls du später UI-Elemente für Subway brauchst, kommen sie hier rein */

/* Beispiel: Wenn du einen Subway-Toggle-Button stylst */
.subway-toggle {
    /* Styling für potentielle UI-Elemente */
}
/* ===== 03-components/geolocation.css ===== */
/* ==============================================
   BUZZ.CITY - Geolocation
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   USER LOCATION MARKER
   ============================================== */

.user-location-marker {
    width: 20px;
    height: 20px;
    border: 3px solid var(--white);
    border-radius: var(--radius-full);
    position: relative;
    box-shadow: 0 0 8px rgba(66, 133, 244, 0.6);
    pointer-events: none;
}

.user-location-dot {
    width: 14px;
    height: 14px;
    background-color: #4285F4;
    border-radius: var(--radius-full);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==============================================
   GEOLOCATION CONTROL
   ============================================== */

.geolocation-control.maplibregl-ctrl-group {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 10px;
}

.geolocation-control.maplibregl-ctrl button {
    width: auto;
    height: 32px;
    padding: 0 var(--spacing-sm) 0 var(--spacing-xs);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-default);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.geolocation-control.maplibregl-ctrl button svg {
    color: #4285F4;
    flex-shrink: 0;
}

@media (hover: hover) {
    .geolocation-control button:hover {
        background-color: var(--color-brand-subtle) !important;
        border-color: #4285F4;
    }
}

.geolocation-control button.active {
    background-color: var(--color-bg-surface);
    border-color: #4285F4;
}

.geolocation-control button.active svg {
    color: #4285F4;
    filter: drop-shadow(0 0 3px rgba(66, 133, 244, 0.5));
}
/* ===== 03-components/graetzl.css ===== */
/* Graetzl text labels on map */
.maplibregl-map .graetzl-label {
    font-family: var(--font-family-primary, 'Segoe UI', system-ui);
    font-weight: 500;
    font-size: 14px;
    /* color: #6F5B03; */
    text-shadow: 
        2px 2px 0 white,
        -2px -2px 0 white,
        2px -2px 0 white,
        -2px 2px 0 white;
    pointer-events: none;
    user-select: none;
}

/* Responsive text sizing */
@media (max-width: 768px) {
    .maplibregl-map .graetzl-label {
        font-size: 12px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .maplibregl-map .graetzl-label {
        text-shadow: 
            3px 3px 0 white,
            -3px -3px 0 white,
            3px -3px 0 white,
            -3px 3px 0 white;
    }
}
/* ===== 03-components/graetzlCircles.css ===== */
/* Graetzl Circle Overlay */
#graetzl-circles-overlay {
	overflow: hidden;
}

/* Circle Group Container */
.graetzl-circle-group {
	position: absolute;
	transform: translate(-50%, -50%); /* Center on coordinates */
	pointer-events: none;
}

/* Central solid circle */
.graetzl-circle-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 140, 0, 0.3); /* Semi-transparent orange */
	pointer-events: none;
	will-change: transform;
}

/* Individual Pulsing Rings */
.graetzl-circle-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 3px solid rgba(255, 140, 0, 0.8); /* Orange/vibrant color */
	background: radial-gradient(
		circle at center,
		rgba(255, 140, 0, 0.2) 0%,
		rgba(255, 140, 0, 0.05) 60%,
		transparent 100%
	);
	animation: graetzl-pulse 3s ease-out infinite;
	will-change: transform, opacity;
}

/* Staggered animation for multiple rings */
.graetzl-circle-ring.ring-0 {
	animation-delay: 0s;
}

.graetzl-circle-ring.ring-1 {
	animation-delay: 0.8s;
}

.graetzl-circle-ring.ring-2 {
	animation-delay: 1.6s;
}

/* Pulse Animation */
@keyframes graetzl-pulse {
	0% {
		transform: translate(-50%, -50%) scale(0.3);
		opacity: 0;
	}
	10% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

/* Responsive sizing based on zoom level */
@media (max-width: 768px) {
	.graetzl-circle-ring {
		border-width: 2px;
	}
}

/* ===== 03-components/events.css ===== */
/* ==============================================
   BUZZ.CITY - Event Signs
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   EVENT SIGN BASE
   ============================================== */

.event-sign {
    background: var(--color-bg-surface);
    border: 2px solid var(--black);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-sm);
    text-align: center;
    position: relative;
    min-width: 120px;
    box-shadow: var(--shadow-md);
}

.event-sign::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--black);
}

.event-sign::before {
    content: attr(data-icon);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--color-brand);
    border: 2px solid var(--black);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
}

/* ==============================================
   EVENT SIGN CONTENT
   ============================================== */

.event-schedule-info {
    font-size: 10px;
    color: var(--color-text-muted);
    line-height: 1.2;
    margin-bottom: 2px;
}

.event-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
    margin: 0;
    
    /* Begrenzung auf 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-category {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Quelle-Hinweis: „Quelle: <domain> · abgerufen am <datum>" */
.event-source-note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
}

/* Subcategory-Badge (z. B. queere Events: Pride/Arts/Kultur/Social/Party) */
.event-subcategory-badge {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-group-queer);
    border: 1px solid var(--color-group-queer);
}
.event-subcategory-badge[hidden] { display: none; }

/* Festival-Badge (Event gehört zu einem Festival, z. B. „Grafenegg Festival 2026") */
.event-festival-badge {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
}
.event-festival-badge[hidden] { display: none; }
/* Klickbar, wenn das Festival gerade läuft (Chip existiert) → springt zur Festival-Ansicht */
.event-festival-badge--link { cursor: pointer; }
@media (hover: hover) {
    .event-festival-badge--link:hover { text-decoration: underline; }
}

/* Accessibility-Badges (Barrierefreiheit) */
.event-accessibility {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0;
}
.event-accessibility[hidden] { display: none; }
.event-accessibility-badge {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-muted);
}

/* Favorit-Button aktiver Zustand, greift auch für Favoriten-Buttons von Grätzl, Images, POI */
.btn-primary.is-favorited {
    background-color: var(--color-brand);
    color: var(--color-white);
}

/* ==============================================
   EVENT CLUSTER LIST
   ============================================== */

.event-list-popover-content {
    max-width: 600px;
    padding: 0 0 var(--spacing-md) 0;
}

.event-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.event-list-header-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.event-list-header-info h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.event-list-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Feature-spezifische Ergänzungen zum Scroll-Container.
   Das iOS-Scroll-Pattern kommt von .popover-scroll (siehe modals.css). */
.event-list-scroll {
    position: relative;
    max-height: 60vh;
}

.event-list-items {
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* Einzelne Event-Card */
.event-list-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-smallevent-border);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--color-smallevent-bg);
}

.event-list-card:last-child {
    margin-bottom: 0;
}

@media (hover: hover) {
    .event-list-card:hover {
        border-color: var(--color-brand-hover);
        background: var(--color-smallevent-hover);
    }
}

.event-list-card:active {
    transform: scale(0.98);
    border-color: var(--color-brand);
    background:  var(--color-smallevent-hover);
}

.event-list-more-toggle:active,
.location-page-link:active {
    background-color: var(--color-bg-subtle);
}

.event-list-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
}

.event-list-card-body {
    flex: 1;
    min-width: 0;
}

.event-list-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.event-list-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: 2px;
}

.event-list-card-category {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.event-list-card-time {
    font-size: 0.8rem;
    color: var(--color-text-brand);
    font-weight: 500;
}

.event-list-card-arrow {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Datums-Trenner in Location-Events */
.location-events-date-separator {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: var(--spacing-md) 0 var(--spacing-xs) 0;
    margin-bottom: var(--spacing-sm);
}

.location-events-date-separator:first-child {
    padding-top: 0;
}

/* Loading State */
.location-events-loading {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* === LOCATION PAGE LINK (in Popovers) === */

.location-page-link {
    display: block;
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-interactive);
    text-decoration: none;
    transition: background-color var(--transition-normal);
}

@media (hover: hover) {
    .location-page-link:hover {
        background-color: var(--color-bg-subtle);
    }
}

/* === ARCHIV (vergangene Events) === */

.location-archive-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-lg);
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    background: none;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-normal);
}

.location-archive-toggle:hover {
    color: var(--color-text-secondary);
}

.location-archive-toggle svg {
    transition: transform var(--transition-normal);
}

.location-archive-toggle.open svg {
    transform: rotate(180deg);
}

/* === MEHR-ZEIGEN-TOGGLE (Limit für Upcoming-Events) === */

.event-list-more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-sm);
    border: none;
    background: none;
    color: var(--color-interactive);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

@media (hover: hover) {
    .event-list-more-toggle:hover {
        background-color: var(--color-bg-subtle);
    }
}

.event-list-more-container[hidden] {
    display: none;
}

.location-archive-list {
    padding-bottom: var(--spacing-lg);
}

.location-archive-card {
    opacity: 0.55;
}

/* === AUFKLAPPBARE EVENT-GRUPPEN (Multi-Termin) === */

/* Karte wird als aufklappbar markiert */
.event-list-card-expandable .event-list-card-arrow {
    transition: transform var(--transition-normal);
    transform: rotate(90deg);
}

.event-list-card-expandable.is-expanded .event-list-card-arrow {
    transform: rotate(-90deg);
}

/* Container für die Termin-Liste einer Gruppe */
.event-list-termine {
    margin: calc(var(--spacing-sm) * -1) 0 var(--spacing-sm) calc(36px + var(--spacing-md));
    padding-left: var(--spacing-md);
    border-left: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
}

.event-list-termine[hidden] {
    display: none;
}

/* Einzelner Termin-Eintrag in der Gruppe */
.event-list-termin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background var(--transition-normal);
}

@media (hover: hover) {
    .event-list-termin-row:hover {
        background: var(--color-bg-subtle);
    }
}

.event-list-termin-row:active {
    transform: scale(0.98);
}

.event-list-termin-date {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.event-list-termin-time {
    font-size: 0.8rem;
    color: var(--color-text-brand);
    font-weight: 500;
    flex-shrink: 0;
}

/* Vergangene Termine innerhalb einer Gruppe (gedämpft) */
.event-list-termin-row.is-past {
    opacity: 0.5;
}

.event-list-termin-row.is-past .event-list-termin-time {
    color: var(--color-text-muted);
}

/* === SKELETON LOADING === */

@keyframes location-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.location-skeleton-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-sm);
}

.location-skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-border-subtle) 50%, var(--color-bg-subtle) 75%);
    background-size: 800px 100%;
    animation: location-shimmer 1.5s infinite ease-in-out;
    flex-shrink: 0;
}

.location-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.location-skeleton-line {
    height: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-border-subtle) 50%, var(--color-bg-subtle) 75%);
    background-size: 800px 100%;
    animation: location-shimmer 1.5s infinite ease-in-out;
}

.location-skeleton-line:first-child {
    width: 65%;
    height: 14px;
}

.location-skeleton-line:last-child {
    width: 40%;
}

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

@media (max-width: 480px) {
    .event-list-popover-content {
        margin: 0;
        max-width: none;
    }

    .event-list-card {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .event-sign {
        min-width: 100px;
        padding: var(--spacing-sm) var(--spacing-sm);
    }

    .event-schedule-info {
        font-size: 9px;
    }

    .event-title {
        font-size: 11px;
        
        /* Begrenzung auf 2 Zeilen auch mobil */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* ===== 03-components/event-links.css ===== */
/* ============================================
   EVENT-LINKS — Icon-Button-Reihe im Event-Overlay
   Befüllt von eventRenderer.renderEventLinks().
   Typen: homepage, facebook, instagram, twitter, email, phone, source
   ============================================ */

.event-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.event-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-subtle);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

.event-link-btn svg {
    display: block;
}

/* Hover nur auf echten Hover-Geräten (iOS-Pattern) */
@media (hover: hover) {
    .event-link-btn:hover {
        background-color: var(--color-brand);
        color: var(--color-text-inverse);
        border-color: var(--color-brand);
    }
}

/* Tastatur-Fokus sichtbar */
.event-link-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* Homepage- & Quelle-Button: Icon + Text, breiter statt quadratisch */
.event-link-btn--homepage,
.event-link-btn--source {
    width: auto;
    border-radius: 20px;
    padding: 0 var(--spacing-sm) 0 10px;
    gap: 6px;
}

.event-link-btn__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* ===== 03-components/eventFilm.css ===== */
/* ==============================================
   EVENT FILM DETAILS
   Popover-Erweiterung für Film-Events (type === 'film')
   Wird von eventRenderer.js befüllt & sichtbar gemacht
   ============================================== */

/* [hidden] muss display:inline-block der Badge überschreiben können */
.event-film-festival-badge[hidden] {
    display: none;
}

/* Modifier: Cover-Bild (z.B. Film-Poster) im Header-Kreis statt Event-Icon.
   Wird in eventRenderer.js beim Öffnen eines Film-Popovers gesetzt.
   Enthält zusätzlich Klick-Affordance (cursor + hover-pop) — der eigentliche
   Lightbox-Trigger wird in eventRenderer.js (onclick) gebunden.
   Basis-Regel .popover-image-circle steht in modals.css. */
.popover-image-circle--cover {
    object-fit: cover;
    cursor: pointer;
    transition: transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

/* Hover-Pop: signalisiert Klickbarkeit */
.popover-image-circle--cover:hover {
    transform: scale(1.03);
}

/* Film-Details-Container (enthält nur noch Meta-Panel) */
.event-film-details {
    margin: 0;
}

/* Festival-Badge: Pill neben den Genre-Pills */
.event-film-festival-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--color-brand);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta-Panel */
.event-film-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Genre-Pills */
.event-film-genres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: 0;
}

/* [hidden] muss display:flex überschreiben können */
.event-film-genres[hidden] {
    display: none;
}

.event-film-genre {
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: var(--color-brand-subtle);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ==============================================
   FILM SHOWTIMES
   Strukturierte Showtime-Liste im #event-schedule-info-Container
   Ersetzt bei type === 'film' den plain-text scheduleText
   ============================================== */

/* Tages-Gruppe (eine pro Datum) */
.event-film-showtime-day {
    margin-bottom: var(--spacing-sm);
}

.event-film-showtime-day:last-child {
    margin-bottom: 0;
}

/* Datums-Zeile über den Zeiten (z.B. "Sa, 14. Feb") */
.event-film-showtime-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

/* Container für die Zeit-Pills eines Tages */
.event-film-showtime-times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

/* Eine Showtime (Pill mit Zeit + optional Format-Badge) */
.event-film-showtime {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 8px;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    background: var(--color-brand-subtle);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums; /* gleichbreite Ziffern für saubere Zeitalignment */
}

/* Badges in der Showtime: Format (IMAX/3D) & Sprachfassung (OmU/OV).
   Gemeinsamer Pill-Look, getrennte Typografie. */
.event-film-format,
.event-film-version {
    font-weight: 600;
    padding: 1px 5px;
    color: var(--color-brand);
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-brand);
}

/* Format-Token (IMAX, 3D, 4DX): kompakt, Großbuchstaben */
.event-film-format {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Versions-Badge (kombiniert: "OmU · IMAX 3D", ggf. freier Hinweis).
   Kein uppercase — version_note kann gemischter Freitext sein. */
.event-film-version {
    font-size: 0.7rem;
}

/* Reguläre Event-Termin-Zeile (fixed_dates, strukturiert statt Plain-Text) */
.event-schedule-day {
    margin-bottom: var(--spacing-xs);
}

/* Toggle-Link "Weitere Tage/Termine anzeigen" — einmaliges Ausklappen.
   Geteilt von Film-Showtimes und regulären Event-Terminen. */
.event-more-toggle {
    display: block;
    background: none;
    border: none;
    padding: var(--spacing-xs) 0;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
}

/* Ausgeklappte Folgetermine (Film-Tage bzw. Event-Termine) */
.event-collapsible-rest[hidden] {
    display: none;
}

.event-collapsible-rest {
    margin-top: var(--spacing-sm);
}

/* ==============================================
   FILM BONUS-FEATURES
   Klickbare Festival-Badge · Secondary-Meta · Trailer-Link
   ============================================== */

/* Sekundäre Meta-Zeile: Altersfreigabe · Land · usw. */
.event-film-secondary-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    order: 999;        /* immer als letztes Element rendern, unabhängig von DOM-Reihenfolge */
}

/* Festival-Badge: Underline weg (kommt vom Anchor-Default) */
.event-film-festival-badge {
    text-decoration: none;
}

/* Hover/Focus nur wenn href gesetzt — signalisiert Klickbarkeit */
.event-film-festival-badge[href]:hover,
.event-film-festival-badge[href]:focus-visible {
    background: var(--color-brand-hover);
    outline: none;
}

/* ===== 03-components/cityLabel.css ===== */
/* ==============================================
   BUZZ.CITY - City Labels
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   CITY LABEL BASE
   ============================================== */

.maplibregl-map .city-label {
    font-family: var(--font-family-primary, 'Segoe UI', system-ui);
    font-weight: 700;
    font-size: 32px;
    color: var(--color-text-brand);
    text-shadow: 
        2px 2px 0 var(--white),
        -2px -2px 0 var(--white),
        2px -2px 0 var(--white),
        -2px 2px 0 var(--white),
        0 0 4px rgba(255, 255, 255, 0.8);
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    transition: all var(--transition-slow);
}

.maplibregl-map .city-label:hover {
    transform: scale(1.05);
    color: var(--color-brand-hover);
    text-shadow: 
        3px 3px 0 var(--white),
        -3px -3px 0 var(--white),
        3px -3px 0 var(--white),
        -3px 3px 0 var(--white),
        0 0 8px rgba(255, 255, 255, 0.9);
}

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

@media (max-width: 768px) {
    .maplibregl-map .city-label {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .maplibregl-map .city-label {
        font-size: 20px;
    }
}

/* ==============================================
   HIGH CONTRAST MODE
   ============================================== */

@media (prefers-contrast: high) {
    .maplibregl-map .city-label {
        text-shadow: 
            4px 4px 0 var(--white),
            -4px -4px 0 var(--white),
            4px -4px 0 var(--white),
            -4px 4px 0 var(--white);
    }
}

/* ==============================================
   ANIMATION
   ============================================== */

@keyframes cityLabelFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.maplibregl-map .city-label {
    animation: cityLabelFadeIn 0.5s ease-out;
}
/* ===== 03-components/routing.css ===== */
/* ==============================================
   BUZZ.CITY - Routing Popover
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   ROUTE POPOVER
   ============================================== */

.route-popover {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-lg);
    z-index: var(--z-popover);
    transform: translateY(100%);
    transition: transform var(--transition-slow);
    max-height: 60vh;
}

.route-popover.open {
    transform: translateY(0);
}

/* ==============================================
   ROUTE HEADER
   ============================================== */

.route-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.route-close-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-normal);
}

.route-close-btn:hover {
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
}

/* ==============================================
   ROUTE INFO GRID
   ============================================== */

.route-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.route-info-item {
    text-align: center;
}

.route-info-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 0.1rem;
    display: block;
}

.route-info-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ==============================================
   TRANSPORT MODE SELECTOR
   ============================================== */

.transport-mode-selector {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    background: var(--color-bg-subtle);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}

.transport-mode-btn {
    flex: 1;
    padding: var(--spacing-sm);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.transport-mode-btn:hover {
    background: var(--color-bg-muted);
}

.transport-mode-btn.active {
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.transport-mode-icon {
    width: 24px;
    height: 24px;
}

.transport-mode-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ==============================================
   START ROUTE BUTTON
   ============================================== */

.start-route-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.start-route-btn:hover {
    background: var(--color-btn-primary-bg-hover);
}

.start-route-btn:active {
    transform: scale(0.98);
}

/* ==============================================
   HEADER & DATE-BAR HIDING
   ============================================== */

.routing-active .site-header {
    transform: translateY(-100%);
    transition: transform var(--transition-slow);
}

.routing-active .date-bar {
    position: fixed;
    transform: translateY(-400%);
    transition: transform var(--transition-slow);
}
/* ===== 03-components/routeLoading.css ===== */
/* Route Loading Overlay */
.route-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
}

.route-loading-overlay.hidden {
	display: none;
}

.route-loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.route-loading-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.route-loading-text {
	color: #ffffff;
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
/* ===== 03-components/suggestions-panel.css ===== */
/* ==============================================
   BUZZ.CITY - Suggestions Bottom Sheet
   Drei Zustände: peek / half / full
   ============================================== */

/* ==============================================
   PANEL BASE
   ============================================== */

.suggestions-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
}

.suggestions-panel.hidden {
    display: none;
}

/* ==============================================
   SHEET CONTAINER
   ============================================== */

.suggestions-sheet {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: height 0.3s ease;
    overflow: hidden;
    will-change: height;
}

/* ==============================================
   SHEET STATES (gesteuert via data-state)
   ============================================== */

/* Peek: ~120px — Route-Name + Primary CTA */
.suggestions-panel[data-state="peek"] .suggestions-sheet {
    height: 130px;
}

/* Half: ~45vh — Stops + alle Buttons */
.suggestions-panel[data-state="half"] .suggestions-sheet {
    height: 45vh;
}

/* Full: ~90vh — Detail + Edit */
.suggestions-panel[data-state="full"] .suggestions-sheet {
    height: 90vh;
}

/* ==============================================
   STATE-ABHÄNGIGE SICHTBARKEIT
   ============================================== */

/* Scroll-Content: nur in Half + Full */
.suggestions-panel[data-state="peek"] .suggestions-scroll-container {
    display: none;
}

/* Dismiss + Favorite: nur in Half + Full */
.suggestions-panel[data-state="peek"] .suggestions-btn-dismiss,
.suggestions-panel[data-state="peek"] .suggestions-btn-share,
.suggestions-panel[data-state="peek"] .suggestions-btn-favorite {
    display: none;
}

/* Stop-Begründungen: ab Half sichtbar (in Peek ausgeblendet) */
.suggestion-stop-reason {
    display: none;
}

.suggestions-panel:not([data-state="peek"]) .suggestion-stop-reason {
    display: block;
}

/* Stop Edit-Controls (Drag + Remove + Add): nur in Half + Full */
.suggestion-stop-drag,
.suggestion-stop-remove,
.add-stop-wrapper {
    display: none;
}

.suggestions-panel[data-state="half"] .suggestion-stop-drag,
.suggestions-panel[data-state="half"] .suggestion-stop-remove,
.suggestions-panel[data-state="full"] .suggestion-stop-drag,
.suggestions-panel[data-state="full"] .suggestion-stop-remove,
.suggestions-panel[data-state="full"] .add-stop-wrapper {
    display: flex;
}

/* ==============================================
   DRAG HANDLE
   ============================================== */

.suggestions-drag-handle {
    display: flex;
    justify-content: center;
    padding: var(--spacing-md) 0 var(--spacing-xs);
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}

.suggestions-drag-handle:active {
    cursor: grabbing;
}

.suggestions-drag-bar {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
    transition: background var(--transition-normal);
}

.suggestions-drag-handle:hover .suggestions-drag-bar {
    background: var(--color-border-default);
}

/* ==============================================
   ROUTE NAVIGATION (Pfeile)
   ============================================== */

.suggestions-route-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md) var(--spacing-xs);
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
}

.suggestions-route-nav:active {
    cursor: grabbing;
}

.suggestions-nav-arrow {
    touch-action: manipulation;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.suggestions-nav-arrow:hover {
    background: var(--color-bg-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.suggestions-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.suggestions-route-info {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.suggestions-route-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestions-route-duration {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-brand);
}

/* ==============================================
   INDICATORS (Dots)
   ============================================== */

.suggestions-indicators {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    flex-shrink: 0;
}

.suggestions-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.suggestions-indicator.active {
    background: var(--color-brand);
    width: 24px;
}

/* ==============================================
   SCROLL CONTAINER (iOS-sicher)
   ============================================== */

.suggestions-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.suggestions-scroll-content {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

/* ==============================================
   DESCRIPTION
   ============================================== */

.suggestions-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.4;
}

/* ==============================================
   STOPS LIST
   ============================================== */

.suggestions-stops {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.suggestion-stop {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.suggestion-stop-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.suggestion-stop-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.suggestion-stop-number {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.suggestion-stop-name {
    line-height: 1.3;
}

.suggestion-stop-type {
    font-size: 0.7rem;
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: var(--color-secondary-blue-muted);
    color: var(--color-secondary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.suggestion-stop-type.event {
    background: var(--color-brand-muted);
    color: var(--color-text-brand);
}

.suggestion-stop-type.favorite {
    background: #fff3cd;
    color: #856404;
}

/* Begründung (ab Half sichtbar — Sichtbarkeit + Padding via State oben) */
.suggestion-stop-reason {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Connector (Distanz zwischen Stops) */
.suggestion-stop-connector {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px 0 2px calc(32px + var(--spacing-sm));
    margin: calc(-1 * var(--spacing-xs)) 0;
}

.connector-walk-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    opacity: 0.6;
}

.connector-text {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 0.3px;
}

/* Edit Controls (nur in Full sichtbar — via State oben) */
.suggestion-stop-drag {
    color: var(--color-text-muted);
    cursor: grab;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.5;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-normal);
}

.suggestion-stop-drag:active {
    opacity: 1;
}

.suggestion-stop-drag svg {
    width: 18px;
    height: 18px;
}

.suggestion-stop-remove {
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-normal);
}

.suggestion-stop-remove:hover {
    color: var(--color-error);
    background: var(--color-bg-subtle);
}

/* SortableJS Drag States */
.suggestion-stop.sortable-ghost {
    opacity: 0.3;
}

.suggestion-stop.sortable-chosen {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ==============================================
   ADD STOP UI
   ============================================== */

.add-stop-wrapper {
    flex-direction: column;
    margin-top: var(--spacing-sm);
}

/* Trigger-Button */
.add-stop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm);
    background: none;
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.add-stop-btn:active {
    border-color: var(--color-border-brand);
    color: var(--color-text-brand);
    background: var(--color-brand-subtle);
}

/* Options Popover (inline) */
.add-stop-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xs);
    border: 1px solid var(--color-border-subtle);
}

.add-stop-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-normal);
}

.add-stop-option:active {
    background: var(--color-bg-surface);
}

.add-stop-option.disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.add-stop-option.disabled:active {
    background: none;
}

.add-stop-cancel {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    justify-content: center;
    margin-top: 2px;
    border-top: 1px solid var(--color-border-subtle);
}

.add-stop-maxed {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: var(--spacing-sm);
    font-style: italic;
}

/* Search Field */
.add-stop-search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.add-stop-search-field {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--color-bg-subtle);
    border: 2px solid var(--color-border-brand);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.add-stop-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--color-text-primary);
    outline: none;
    min-width: 0;
}

.add-stop-input::placeholder {
    color: var(--color-text-muted);
}

.add-stop-search-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-2xs);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--transition-normal);
}

.add-stop-search-close:active {
    color: var(--color-text-primary);
}

/* Search Results */
.add-stop-results {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.add-stop-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-normal);
}

.add-stop-result:last-child {
    border-bottom: none;
}

.add-stop-result:active {
    background: var(--color-bg-subtle);
}

.add-stop-result-name {
    font-size: 0.85rem;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-stop-result-type {
    font-size: 0.65rem;
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: var(--color-secondary-blue-muted);
    color: var(--color-secondary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.add-stop-loading,
.add-stop-no-results {
    padding: var(--spacing-md);
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ==============================================
   ACTION BUTTONS
   ============================================== */

.suggestions-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-subtle);
}

.suggestions-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    border: none;
}

.suggestions-btn-primary {
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.suggestions-btn-primary:hover {
    background: var(--color-btn-primary-bg-hover);
}

.suggestions-btn-secondary {
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-subtle);
}

.suggestions-btn-secondary:hover {
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.suggestions-btn-favorite.is-saved {
    color: var(--color-text-brand);
    border-color: var(--color-border-brand);
    background: var(--color-brand-subtle);
}

.suggestions-btn-favorite.is-saved svg {
    fill: currentColor;
}

.suggestions-btn-share,
.suggestions-btn-favorite {
    flex: 0 0 auto;
    padding: var(--spacing-sm);
}

.suggestions-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==============================================
   ERROR STATE
   ============================================== */

.suggestions-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
}

.suggestions-error-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.suggestions-error-text {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-lg) 0;
}

.suggestions-retry-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg-subtle);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.suggestions-retry-btn:hover {
    border-color: var(--color-border-brand);
    background: var(--color-brand-subtle);
}

/* ==============================================
   SPECIAL WISHES INPUT (in Overlays)
   ============================================== */

.special-wishes-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    resize: none;
    transition: border-color var(--transition-normal);
}

.special-wishes-input:focus {
    outline: none;
    border-color: var(--color-border-brand);
}

.special-wishes-input::placeholder {
    color: var(--color-text-muted);
}

/* Kategorie-Chips + FAB verstecken wenn Panel offen */
body.suggestions-open .category-chip-bar,
body.suggestions-open .search-fab {
    display: none;
}

/* ==============================================
   DESKTOP LAYOUT
   ============================================== */

@media (min-width: 768px) {
    .suggestions-sheet {
        max-width: 500px;
    }
}

@media (min-width: 1024px) {
    .suggestions-panel {
        left: auto;
        right: var(--spacing-xl);
        bottom: var(--spacing-xl);
        top: auto;
    }

    .suggestions-sheet {
        max-width: 400px;
        border-radius: var(--radius-xl);
    }

    .suggestions-panel[data-state="peek"] .suggestions-sheet {
        height: 130px;
    }

    .suggestions-panel[data-state="half"] .suggestions-sheet {
        height: 50vh;
    }

    .suggestions-panel[data-state="full"] .suggestions-sheet {
        height: 70vh;
    }
}

/* ==============================================
   MOBILE RESPONSIVE
   ============================================== */

@media (max-width: 480px) {
    .suggestions-sheet {
        margin: 0;
        max-width: 100%;
    }

    .suggestions-route-name {
        font-size: 0.9rem;
    }

    .suggestions-btn {
        font-size: 0.8rem;
        padding: var(--spacing-sm);
    }
}

/* ==============================================
   iOS SAFARI FIXES
   ============================================== */

@supports (-webkit-touch-callout: none) {
    .suggestions-scroll-container {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
        touch-action: pan-y;
    }

    .suggestions-sheet {
        -webkit-transform: translateZ(0);
    }
}
/* ===== 03-components/routePlanner.css ===== */
/* ==============================================
   BUZZ.CITY - Route Planner Popover
   Einstufige Auswahl (zwei Gruppen). Migriert auf Token-System.

   Hinweis: Chips (content/character/env/category/option), Slider,
   Show-Ideas-Button und question-section/-title nutzen die gemeinsamen
   Styles aus modals.css. Hier nur Route-Planner-Spezifika.
   ============================================== */

/* ==============================================
   HEADER LAYOUT
   ============================================== */

.route-planner-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.route-planner-header-text {
    flex: 1;
    min-width: 0; /* erlaubt Text-Truncation in Flex-Children */
}

.route-planner-header-text .popover-description {
    margin: 2px 0 0;
}

/* ==============================================
   EVENT-KATEGORIEN (Aufklappung unter der Events-Pille)
   ============================================== */

.route-planner-categories {
    margin-top: var(--spacing-md);
    animation: routePlannerCategoriesIn 0.4s ease-out;
}

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

.route-planner-categories.hidden {
    display: none;
}

.route-planner-categories-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.route-planner-categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* Kategorie-Chips etwas kompakter als die Haupt-Pillen */
.category-chip {
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* ==============================================
   TAG- & STANDORT-CHECKBOXEN
   ============================================== */

.route-planner-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    cursor: pointer;
    padding: var(--spacing-xs) 0;
    -webkit-tap-highlight-color: transparent;
}

.route-planner-checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--color-border-brand);
    cursor: pointer;
}

.route-planner-day-picker {
    margin: var(--spacing-xs) 0 var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.route-planner-day-picker.hidden {
    display: none;
}
/* ===== 03-components/locationLayer.css ===== */
/* ==============================================
   BUZZ.CITY - Location Bottom Sheet
   Drei Zustände: peek / half / full
   Spiegelt das Pattern von suggestions-panel.css
   ============================================== */

/* ==============================================
   PANEL BASE
   ============================================== */

.location-layer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
}

.location-layer.hidden {
    display: none;
}

/* ==============================================
   SHEET CONTAINER
   ============================================== */

.location-layer-sheet {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: height 0.3s ease;
    overflow: hidden;
    will-change: height;
}

/* ==============================================
   SHEET STATES (gesteuert via data-state)
   ============================================== */

.location-layer[data-state="peek"] .location-layer-sheet {
    height: 130px;
}

.location-layer[data-state="half"] .location-layer-sheet {
    height: 45vh;
}

.location-layer[data-state="full"] .location-layer-sheet {
    height: 90vh;
}

/* Scroll-Container nur in Half + Full sichtbar */
.location-layer[data-state="peek"] .location-layer-scroll-container {
    display: none;
}

/* ==============================================
   DRAG HANDLE
   ============================================== */

.location-layer-drag-handle {
    display: flex;
    justify-content: center;
    padding: var(--spacing-md) 0 var(--spacing-xs);
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}

.location-layer-drag-handle:active {
    cursor: grabbing;
}

.location-layer-drag-bar {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
    transition: background var(--transition-normal);
}

.location-layer-drag-handle:hover .location-layer-drag-bar {
    background: var(--color-border-default);
}

/* ==============================================
   HEADER (Titel, Adresse, Favorite-Button)
   ============================================== */

.location-layer-header {
    position: relative;
    flex-shrink: 0;
    padding: 0 calc(var(--spacing-lg) + 3.5rem) var(--spacing-sm) var(--spacing-lg);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.location-layer-header:active {
    cursor: grabbing;
}

.location-layer-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

/* ==============================================
   CLOSE BUTTON (oben rechts im Header)
   ============================================== */

.location-layer-close {
    position: absolute;
    top: 0;
    right: var(--spacing-md);
    z-index: 2;
    touch-action: auto;
}

/* ==============================================
   SCROLL CONTAINER (iOS Safari Pattern)
   Genau ein Scroll-Container für gesamten Inhalt
   ============================================== */

.location-layer-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.location-layer-scroll-content {
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xl);
}

/* ==============================================
   SKELETT LOADING STATE
   ============================================== */

.location-layer.is-loading .location-layer-scroll-content > *:not(.location-layer-skeleton) {
    display: none;
}

.location-layer-skeleton {
    display: none;
}

.location-layer.is-loading .location-layer-skeleton {
    display: block;
}

.location-layer-skeleton-line {
    height: 14px;
    border-radius: var(--radius-sm);
    background: var(--color-border-subtle);
    margin-bottom: var(--spacing-sm);
    opacity: 0.6;
    animation: location-layer-pulse 1.4s ease-in-out infinite;
}

.location-layer-skeleton-line.short { width: 40%; }
.location-layer-skeleton-line.medium { width: 70%; }
.location-layer-skeleton-line.long { width: 95%; }

@keyframes location-layer-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ==============================================
   HEADER ZUSATZ (Events-Counter im peek)
   ============================================== */

.location-layer-events-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
}

/* ==============================================
   SECTIONS
   ============================================== */

.location-layer-section {
    margin-bottom: var(--spacing-lg);
}

.location-layer-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--spacing-xs);
}

.location-layer-description {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    line-height: 1.5;
}

.location-layer-hours {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    white-space: pre-line;
}

.location-layer-website {
    font-size: var(--font-size-md);
    color: var(--color-accent);
    text-decoration: none;
    word-break: break-all;
}

.location-layer-website:hover {
    text-decoration: underline;
}

/* ==============================================
   ACTIONS (Favorite Button)
   ============================================== */

.location-layer-actions {
    margin-bottom: var(--spacing-lg);
}

.location-layer-action-row {
    margin-bottom: var(--spacing-sm);
}

.location-layer-favorite-btn {
    width: 100%;
    margin-bottom: var(--spacing-xl);
}

/* ==============================================
   EVENTS SECTION (Filter + Liste)
   Detail-Styling kommt in Teilschritt 4c
   ============================================== */

.location-layer-events-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-md) 0;
    text-align: center;
}
/* ===== 03-components/filmLayer.css ===== */
/* ==============================================
   BUZZ.CITY - Film Bottom Sheet (Phase 5b)
   Drei Zustände: peek / half / full
   Spiegelt das Pattern von locationLayer.css
   ============================================== */

/* ===== PANEL BASE ===== */
.film-layer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
}

.film-layer.hidden {
    display: none;
}

/* Fokus-Modus: bei offenem Film-Overlay gehört die Karte den Kinos dieses
   Films — Kategorie-Chips raus (gleiches Muster wie body.suggestions-open).
   Die Event-Pins/-Dots blendet filmLayerService._setMapFocusMode() aus. */
body.film-focus .category-chip-bar {
    display: none;
}

/* ===== SHEET CONTAINER ===== */
.film-layer-sheet {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: height 0.3s ease;
    overflow: visible;
    will-change: height;
}

/* ===== SHEET STATES (data-state) ===== */
.film-layer[data-state="peek"] .film-layer-sheet { height: 130px; }
.film-layer[data-state="half"] .film-layer-sheet { height: 45vh; }
.film-layer[data-state="full"] .film-layer-sheet { height: 90vh; }

/* Scroll-Container nur in Half + Full sichtbar */
.film-layer[data-state="peek"] .film-layer-scroll-container { display: none; }

/* ===== DRAG HANDLE ===== */
.film-layer-drag-handle {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xs) 0 var(--spacing-xs);
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}

.film-layer-drag-handle:active { cursor: grabbing; }

.film-layer-drag-bar {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
    transition: background var(--transition-normal);
}

.film-layer-drag-handle:hover .film-layer-drag-bar {
    background: var(--color-border-default);
}

/* ===== HEADER ===== */
.film-layer-header {
    position: relative;
    flex-shrink: 0;
    padding: 0 var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.film-layer-circle-container {
    margin-top: -40px;
    margin-bottom: var(--spacing-sm);
    z-index: 20;
    position: relative;
}

.film-layer-header:active { cursor: grabbing; }

.film-layer-header-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.film-layer-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    text-align: center;
}


/* ===== CLOSE BUTTON ===== */
.film-layer-close {
    position: absolute;
    top: 0;
    right: var(--spacing-md);
    /* Über dem Bild-Kreis (.film-layer-circle-container, z-index: 20), sonst
       fängt der volle-Breite-Kreis-Container den Klick auf das X ab */
    z-index: 210;
    touch-action: auto;
}

/* ===== SCROLL CONTAINER (iOS Safari Pattern) ===== */
.film-layer-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.film-layer-scroll-content {
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xl);
}

/* ===== SKELETON LOADING ===== */
.film-layer.is-loading .film-layer-scroll-content > *:not(.film-layer-skeleton) {
    display: none;
}

.film-layer-skeleton { display: none; }
.film-layer.is-loading .film-layer-skeleton { display: block; }

.film-layer-skeleton-line {
    height: 14px;
    border-radius: var(--radius-sm);
    background: var(--color-border-subtle);
    margin-bottom: var(--spacing-sm);
    opacity: 0.6;
    animation: film-layer-pulse 1.4s ease-in-out infinite;
}

.film-layer-skeleton-line.short { width: 40%; }
.film-layer-skeleton-line.medium { width: 70%; }
.film-layer-skeleton-line.long { width: 95%; }

@keyframes film-layer-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ===== META-BLOCK (5b.3) ===== */
.film-layer-meta {
    margin-bottom: var(--spacing-lg);
}

.film-layer-cover {
    width: 100%;
    max-width: 180px;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    display: block;
}

.film-layer-secondary-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm);
}

.film-layer-genres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.film-layer-description-wrapper {
    position: relative;
    margin: 0 0 var(--spacing-md);
}

.film-layer-description {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.film-layer-description.expanded {
    -webkit-line-clamp: unset;
    display: block;
}

.film-layer-description-toggle {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--color-bg-subtle);
    border: none;
    color: var(--color-text-brand);
    font-weight: 600;
    font-size: 0.85rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: -12px 0 12px 0 var(--color-bg-subtle);
}

.film-layer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.film-layer-link {
    font-size: var(--font-size-md);
    color: var(--color-brand);
    text-decoration: underline;
}

.film-layer-link:hover {
    text-decoration: underline;
}

/* Quelle-/Attributionshinweis (Werk & Bild: TMDB · Spielzeiten: …) */
.film-layer-source-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md);
}

/* ===== SCREENINGS (5b.4) ===== */
.film-layer-screenings {
    margin-bottom: var(--spacing-lg);
}

.film-layer-cinema {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-subtle);
}

.film-layer-cinema:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.film-layer-cinema-name {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    cursor: pointer;
    text-align: left;
}

.film-layer-cinema-name:disabled {
    color: var(--color-text-primary);
    cursor: default;
}

@media (hover: hover) {
    .film-layer-cinema-name:not(:disabled):hover {
        text-decoration: underline;
    }
}

.film-layer-cinema-address {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 var(--spacing-sm);
}

.film-layer-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-md) 0;
    text-align: center;
}

/* Hinweis: am gewählten Tag läuft der Film nirgends → gezeigt wird der
   nächste Spieltag (ersetzt .film-layer-no-today, das je Kino stand) */
.film-layer-fallback-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Toggle-Link "Weitere Tage anzeigen" / "Weniger anzeigen" */
.film-layer-more {
    background: none;
    border: none;
    padding: var(--spacing-xs) 0;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
}

/* Eingeklappte kommende Tage */
.film-layer-future[hidden] {
    display: none;
}

.film-layer-future {
    margin-top: var(--spacing-sm);
}
/* ===== 03-components/search-dropdown.css ===== */
/* ==============================================
   BUZZ.CITY - Search Dropdown
   Suchergebnisse unter dem Suchfeld
   ============================================== */

/* ==============================================
   DROPDOWN CONTAINER
   ============================================== */

.search-dropdown {
    position: fixed;
    max-height: calc(100vh - var(--dropdown-top, 120px) - 200px);
    background: var(--color-bg-surface);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: var(--z-dropdown);
    display: none;
    touch-action: pan-y;
    overscroll-behavior: contain;
    transform: translateZ(0);
}

.search-dropdown.active {
    display: block;
}

/* ==============================================
   KATEGORIE-GRUPPEN
   ============================================== */

.search-group-label {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
}

.search-group-label:first-child {
    border-top: none;
}

/* ==============================================
   EINZELNES ERGEBNIS
   ============================================== */

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.highlighted {
    background-color: var(--color-bg-subtle);
}

.search-result-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

/* Event-Pin als echtes Bild statt Emoji */
img.search-result-icon {
    object-fit: contain;
}

.search-result-text {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-date {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-right: var(--spacing-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==============================================
   CLEAR-BUTTON (X) IM SUCHFELD
   ============================================== */

.search-clear-btn {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-header-text);
    opacity: 0.6;
    padding: 0;
    border-radius: 50%;
    transition: opacity var(--transition-fast);
}

.search-clear-btn:hover {
    opacity: 1;
}

.search-clear-btn.visible {
    display: flex;
}

/* ==============================================
   LEER / LOADING STATES
   ============================================== */

.search-empty-state {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.search-loading {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ==============================================
   INPUT MIT CLEAR-BUTTON: PADDING ANPASSEN
   ============================================== */

.search-input.has-value {
    padding-right: 3rem;
}

/* ==============================================
   SHOW MORE
   ============================================== */

.search-result-hidden {
    display: none;
}

.search-show-more {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent, #007aff);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--transition-fast);
}

.search-show-more:hover {
    background-color: var(--color-bg-subtle);
}

/* ==============================================
   BROWSE-STATE: DISTANZ-ZEILE
   Zeigt z.B. "250 m entfernt" unter Nearby-Events
   ============================================== */

.search-result-distance {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==============================================
   BROWSE-STATE: KATEGORIEN-ZEILE
   "Locations (245)", "Sehenswürdigkeiten (87)" etc.
   Wiederverwendet die Layout-Logik von .search-result-item,
   aber mit Counter rechts statt Datum/Subtitle.
   ============================================== */

.search-browse-category {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
}

.search-browse-category:last-child {
    border-bottom: none;
}

.search-browse-category:hover,
.search-browse-category.highlighted {
    background-color: var(--color-bg-subtle);
}

.search-browse-count {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    min-width: 2rem;
    text-align: center;
}

.search-browse-category:hover .search-browse-count,
.search-browse-category.highlighted .search-browse-count {
    background: var(--color-bg-surface);
}

/* ==============================================
   BROWSE-STATE: CTA-ZEILE
   Erscheint statt der Nearby-Liste, wenn keine Geolocation
   aktiv ist. Triggert beim Klick den GeolocationControl.
   Visuell konsistent mit .search-browse-category, aber
   ohne Counter und mit dezenterem Text-Stil (Hinweis-Charakter).
   ============================================== */

.search-browse-cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.search-browse-cta:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .search-browse-cta:hover {
        background-color: var(--color-bg-subtle);
        color: var(--color-text-primary);
    }
}

/* Linkes Pin-Icon (gedeckt, im Hinweis-Ton) */
.search-browse-cta-icon {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button rechts: nutzt den blauen Brand-Stil des Map-Geolocation-Buttons */
.search-browse-cta-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 var(--spacing-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.search-browse-cta-btn svg {
    color: #4285F4;
    flex-shrink: 0;
}

@media (hover: hover) {
    .search-browse-cta-btn:hover {
        background-color: var(--color-brand-subtle);
        border-color: #4285F4;
    }
}

/* ==============================================
   BROWSE-STATE: AKTIONS-BUTTON
   "Route planen" (ehem. Action-Bar) an oberster Stelle
   des Browse-Overlays. Format wie .search-browse-cta-btn,
   Farben der ehem. Action-Bar: weißer Grund, brand-pinke
   Border + Text.
   ============================================== */

.search-browse-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.search-browse-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 var(--spacing-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-brand);
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-brand);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.search-browse-action-btn svg {
    color: var(--color-text-brand);
    flex-shrink: 0;
}

@media (hover: hover) {
    .search-browse-action-btn:hover {
        background-color: var(--color-brand-subtle);
    }
}

/* ==============================================
   BROWSE-STATE: DISCOVER-LINKS
   Verlinkungen aus dem Seitenmenü (Heute, Wochenende,
   alle Events, Filme, Kinos). Zeilen-Format wie
   .search-browse-category, aber echte <a>-Navigation.
   ============================================== */

.search-browse-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}

.search-browse-link:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .search-browse-link:hover {
        background-color: var(--color-bg-subtle);
    }
}

/* ==============================================
   INLINE-LISTE: LISTEN-HEADER (Phase 4a)
   Variation von .search-group-label für Kategorie-Listen.
   Etwas prominenter, da es der Hauptkontext der Ansicht ist.
   ============================================== */

.search-list-header {
    font-size: 0.8rem;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-primary);
}

/* ==============================================
   INLINE-LISTE: "ALLE ANZEIGEN"-FOOTER (Phase 4a)
   Klickbarer Footer am Ende einer Kategorie-Liste mit Pfeil rechts.
   Visuell stärker als .search-show-more (führt zu eigener Seite,
   nicht nur "mehr aufklappen").
   ============================================== */

.search-show-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    cursor: pointer;
    color: var(--color-accent, #007aff);
    font-size: 0.9rem;
    font-weight: 600;
    border-top: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
}

.search-show-all:hover,
.search-show-all.highlighted {
    background-color: var(--color-bg-subtle);
}

.search-show-all-text {
    flex: 1;
}

.search-show-all-arrow {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.search-show-all:hover .search-show-all-arrow,
.search-show-all.highlighted .search-show-all-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ==============================================
   GRÄTZL-COUNTER IM SEARCH-RESULT
   Sekundärzeile statt PLZ: Event- + Sight-Counts.
   Wird vom NeighbourhoodCountService befüllt (async).
   Solange leer: kein Platz, Titel bleibt vertikal zentriert zum Icon.
   Sobald Counts da: Zeile erscheint, Flexbox rückt Titel automatisch nach oben.
   ============================================== */

.search-result-graetzl-counter {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Events-Teil: hervorgehoben in Brand-Farbe, wenn heute etwas läuft */
.search-result-graetzl-counter-events {
    font-weight: 500;
}

.search-result-graetzl-counter-events.has-events {
    color: var(--color-text-brand);
}

/* Sights-Teil: dezent, gleiche Sekundär-Farbe wie Distanz-Labels */
.search-result-graetzl-counter-sights {
    font-weight: 400;
}

/* Trenner zwischen Events und Sights (Bullet) */
.search-result-graetzl-counter-separator {
    opacity: 0.6;
}

/* Skeleton-Platzhalter: reserviert die Counter-Zeilenhöhe, während
   neighbourhoodCountService lädt → kein Layout-Sprung beim Nachfüllen.
   Nutzt die bestehende buzz-shimmer-Animation (critical.css). */
.search-result-graetzl-counter-skeleton {
    display: inline-block;
    width: 8rem;
    height: 0.7rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-bg-subtle) 0%,
        var(--color-bg-muted)  50%,
        var(--color-bg-subtle) 100%
    );
    background-size: 800px 100%;
    animation: buzz-shimmer 1.5s infinite linear;
}
/* ===== 03-components/wiki-fallback.css ===== */
/* ==============================================
   WIKIPEDIA FALLBACK — Generisches UI-Pattern
   
   Wird genutzt, wenn ein Wikipedia-Artikel nur in der
   Default-Sprache der Stadt verfügbar ist (z.B. DE bei
   englischer UI). Zeigt Sprach-Badge, Hinweis-Text, den
   Original-Auszug und einen Translate-Button.
   
   Verwendung:
   <div data-wiki-slot>
     <span class="wiki-fallback__header">
       <span class="wiki-fallback__badge">DE</span>
       <span class="wiki-fallback__notice">Only available in German:</span>
     </span>
     <span class="wiki-fallback__text" data-wiki-text>…Auszug…</span>
     <button class="wiki-fallback__translate" data-translate-btn
             data-source-lang="de">Translate</button>
   </div>
   ============================================== */

.wiki-fallback__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wiki-fallback__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    /* nicht kursiv, auch wenn Parent kursiv wäre */
    font-style: normal;
}

.wiki-fallback__notice {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.wiki-fallback__text {
    /* Erbt Font-Größe/Farbe vom Parent-Container */
    font-style: normal;
}

.wiki-fallback__translate {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 2px 0;
    margin: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    /* Über dem Parent-Hover liegen, damit Hover separat funktioniert */
    position: relative;
    z-index: 1;
    transition: color var(--transition-normal);
}

@media (hover: hover) {
    .wiki-fallback__translate:hover {
        color: var(--color-text-brand);
    }
}

.wiki-fallback__translate:focus-visible {
    outline: 2px solid var(--color-text-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

.wiki-fallback__translate--loading {
    color: var(--color-text-muted);
    cursor: wait;
    text-decoration: none;
}

.wiki-fallback__translate--loading::after {
    content: '…';
}
/* ===== 03-components/podcast-popover.css ===== */
/* ============================================================================
   Podcast-Popover (Grätzlgeschichten)
   Nutzt die geteilten .base-popover / .popover-content / .image-circle-container
   Styles; hier nur die podcast-spezifischen Ergänzungen.
   ============================================================================ */

.podcast-popover-content {
	text-align: center;
}

.podcast-popover-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0 1.25rem 1.25rem;
}

.podcast-episode {
	display: inline-block;
	align-self: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.podcast-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-text, #1f2937);
}

.podcast-summary {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-text-secondary, #4b5563);
	text-align: left;
}

/* „Anhören" — primärer Link-Button; Farbe kommt aus .btn-primary (Brand-Token),
   hier nur die Anker-spezifische Anpassung. */
.podcast-listen-btn {
	text-decoration: none;
}

.podcast-listen-btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

.podcast-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* ===== 03-components/category-chip-bar.css ===== */
/* =============================================
   KATEGORIE-CHIP-LEISTE (unterer Kartenrand)

   Horizontal scrollbare Pill-Buttons je Event-Gruppe,
   gerendert von categoryChipBar.js. Die Chip-Farbe kommt
   als --chip-color inline aus eventTypes.js (Gruppenfarben,
   datengetrieben — bewusst kein Farb-Token).

   Klassenname .category-bar-chip (NICHT .category-chip):
   .category-chip ist in modals.css/routePlanner.css bereits
   für die Overlay-Auswahl-Chips vergeben.
   ============================================= */

.category-chip-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    max-width: 48rem; /* zentrale Bottom-UI-Breite (daran richtet sich auch der FAB aus) */
    margin: 0 auto;
    display: flex;
    gap: var(--spacing-sm);
    /* 28px Sockel hält die iOS Home-Bar frei — env() liefert ohne
       viewport-fit=cover im Meta-Tag immer 0 und greift nur im PWA-Fall */
    padding: var(--spacing-sm) var(--spacing-lg)
             calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    /* Fade-Kante rechts: signalisiert "da kommt noch mehr" */
    -webkit-mask-image: linear-gradient(to right,
        #000 0%, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right,
        #000 0%, #000 calc(100% - 40px), transparent 100%);
}

/* Chips + Such-FAB erst mit den Events einblenden.
   body.events-pending steht ab dem ersten Paint im HTML (index.html) und wird
   in main.js entfernt, sobald 'eventsRendered' feuert. Gleiche Optik wie das
   Ausblenden bei aktivem Toast — die Transition für beide Elemente ist in
   03-components/toast.css deklariert. */
body.events-pending .category-chip-bar,
body.events-pending .search-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.category-chip-bar::-webkit-scrollbar {
    display: none;
}

/* Ende erreicht (Klasse setzt categoryChipBar.js): Fade-Kante weg */
.category-chip-bar--at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.category-bar-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    border: none;
    border-radius: var(--radius-full);
    padding: 0.75rem var(--spacing-md); /* höhere Touch-Fläche (~40px) */
    background: var(--chip-color);
    /* Textfarbe fix, nicht Theme-abhängig — Hintergrund ist immer die Gruppenfarbe */
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: opacity var(--transition-normal), filter var(--transition-fast),
                transform var(--transition-fast);
}

/* Helle Gruppenfarben (z. B. Familie, Kino) bekommen dunklen Text */
.category-bar-chip--light-bg {
    color: #1f2937;
}

.category-bar-chip__count {
    background: rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-full);
    padding: 2px 7px;
    font-size: 0.75rem;
    font-weight: 700;
}

.category-bar-chip--light-bg .category-bar-chip__count {
    background: rgba(0, 0, 0, 0.15);
}

/* 0 Events am gewählten Datum: sichtbar lassen (User lernt das Angebot), aber gedimmt */
.category-bar-chip--empty {
    opacity: 0.55;
}

/* Aktiver Chip: Ring in Chipfarbe mit hellem Zwischenraum */
.category-bar-chip--active {
    box-shadow: 0 0 0 2px var(--color-bg-surface),
                0 0 0 4px var(--chip-color),
                var(--shadow-md);
}

/* Während ein Chip aktiv ist, treten die übrigen zurück */
.category-chip-bar--has-active .category-bar-chip:not(.category-bar-chip--active) {
    opacity: 0.45;
}

@media (hover: hover) {
    /* Chipfarbe bleibt erhalten, abgedunkelt + leicht angehoben
       (gleiche Geste wie .search-fab:hover in fab.css) */
    .category-bar-chip:hover {
        filter: brightness(0.85);
        transform: translateY(-2px);
    }
}

/* Mobil: Leiste höher setzen, damit sie nicht mit der
   MapTiler-Attribution am unteren Kartenrand kollidiert.
   Fade-Kante nur am Desktop — am Phone dürfen die Chips
   bis zum Rand laufen (angeschnittener Chip = Scroll-Hinweis) */
@media (max-width: 640px) {
    .category-chip-bar {
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ===== 03-components/category-event-panel.css ===== */
/* =============================================
   KATEGORIE-EVENT-PANEL (Bottom Sheet)

   Event-Liste der aktiven Chip-Kategorie, drei Zustände
   peek / half / full — Muster wie suggestions-panel.css.
   Gerendert von categoryEventPanel.js.
   ============================================= */

.category-event-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000; /* wie suggestions-panel */
    pointer-events: none;
}

.category-event-panel.hidden {
    display: none;
}

.category-event-sheet {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: height 0.3s ease;
    overflow: hidden;
    will-change: height;
}

/* Zustände — Peek-Höhe muss zu PEEK_HEIGHT in categoryEventPanel.js passen */
.category-event-panel[data-state="peek"] .category-event-sheet {
    height: 96px;
}

.category-event-panel[data-state="half"] .category-event-sheet {
    height: 45vh;
}

.category-event-panel[data-state="full"] .category-event-sheet {
    height: 90vh;
}

/* Liste nur in half + full */
.category-event-panel[data-state="peek"] .category-event-scroll-container {
    display: none;
}

/* ==============================================
   DRAG HANDLE + HEADER
   ============================================== */

.category-event-drag-handle {
    display: flex;
    justify-content: center;
    padding: var(--spacing-sm) 0 var(--spacing-xs);
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
}

.category-event-drag-bar {
    width: 40px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-default);
}

.category-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg) var(--spacing-sm);
    flex-shrink: 0;
    touch-action: none; /* Header ist Drag-Zone */
}

.category-event-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.category-event-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.category-event-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.category-event-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
}

/* ==============================================
   SCROLLBARE LISTE (iOS-Pattern, CLAUDE.md 10.1)
   ============================================== */

.category-event-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.category-event-list {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
}

.category-event-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--color-border-default);
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
}

.category-event-item-time {
    flex-shrink: 0;
    min-width: 5.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-brand);
}

.category-event-item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.category-event-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-event-item-venue {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-event-item-free {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.category-event-empty {
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Festival-Liste: Zukunfts-Datum in der Zeit-Spalte (statt Tages-Anzahl) */
.category-event-item-time--date {
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* Festival-Liste: Pfeil-Affordanz rechts + Rücksprung-Zeile im Drill-down */
.category-event-item-chevron {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--color-text-secondary);
}

.category-event-back {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--color-border-default);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-brand);
    cursor: pointer;
}

/* Empty-State-Ausbau: Sprung zum nächsten Termin der Kategorie */
.category-event-next-date {
    display: block;
    margin: var(--spacing-md) auto 0;
    border: 2px solid var(--color-border-brand);
    background: transparent;
    color: var(--color-text-brand);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
}

@media (hover: hover) {
    .category-event-next-date:hover {
        background: var(--color-brand-subtle);
    }
}

@media (hover: hover) {
    .category-event-item:hover {
        background: rgba(0, 0, 0, 0.04);
    }
}

/* ===== 03-components/notify-popover.css ===== */
/* ============================================================================
   Notify-Popover — Abo „Benachrichtigen" (Event-Reihe, Ausbaustufe 1)
   Nutzt die geteilten .base-popover / .popover-content Styles; hier nur die
   abo-spezifischen Ergänzungen (Formular + Feedback).
   ============================================================================ */

/* Termin-Radar-Bereich im Event-Popover: Situations-Headline + Text + Button.
   Variante (1 läuft / 2 verpasst / 3 ausverkauft) setzt eventRenderer. */
.event-notify-radar {
	margin-top: 0.75rem;
	padding: 0.9rem 1rem;
	border-radius: 12px;
	background: var(--color-bg-subtle, #f3f4f6);
	text-align: left;
}

.event-notify-radar-headline {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-text, #1f2937);
}

.event-notify-radar-text {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--color-text-secondary, #4b5563);
}

.event-notify-radar .btn-primary {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* Wird AUS dem Event-Popover (z-index 1001) heraus geöffnet → muss darüber
   liegen, sonst erscheint es unsichtbar dahinter. */
#notify-popover {
	z-index: 1002;
}

.notify-popover-content {
	max-width: 420px;
}

/* Die geteilte .popover-top-actions zieht sich mit margin-top: -80px über den
   oberen Rand — gedacht für Popovers mit überlappendem Bild-Kreis
   (image-circle-container). Den gibt es hier nicht → zurücksetzen, sonst
   ragen Schließen-Button und Titel aus der weißen Fläche heraus. */
.notify-popover-content .popover-top-actions {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--spacing-sm, 0.5rem);
}

/* iOS-Scroll-Pattern (CLAUDE.md 10.1): EIN scrollender Container */
.notify-scroll-container {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
	transform: translateZ(0);
	touch-action: pan-y;
	overscroll-behavior: contain;
	max-height: calc(100vh - 160px);
}

.notify-scroll-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0 1.25rem 1.25rem;
}

.notify-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-text, #1f2937);
}

.notify-event-name {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-brand);
}

.notify-intro {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-secondary, #4b5563);
}

#notify-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.notify-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text, #1f2937);
}

.notify-input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	border: 1px solid var(--color-border, #d1d5db);
	border-radius: 8px;
	background: var(--color-surface, #ffffff);
	color: var(--color-text, #1f2937);
}

.notify-input:focus {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

.notify-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--color-text-secondary, #4b5563);
	cursor: pointer;
}

.notify-checkbox input {
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.notify-submit {
	width: 100%;
}

.notify-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.notify-feedback {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text, #1f2937);
}

.notify-feedback.is-error {
	color: var(--color-error, #dc2626);
}

.notify-privacy {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-text-secondary, #6b7280);
}


/* 4. Pages */
/* ===== 04-pages/map.css ===== */
/* ==============================================
   BUZZ.CITY - Map Styles
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   CUSTOM MAP CONTROLS
   ============================================== */

.maplibregl-ctrl-group {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.maplibregl-ctrl-group button {
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: 6px;
}

.maplibregl-ctrl-group button:hover {
    background-color: var(--color-bg-subtle) !important;
}

/* Info Panel */
#info-panel {
    max-width: 300px;
    max-height: 200px;
    overflow-y: auto;
}

/* ==============================================
   MAP CONTAINER
   ============================================== */

#map-container {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-base);
}

main {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ==============================================
   MAP TOUCH-GUARD (untere Sperrzone)
   Verhindert versehentliches Karten-Verschieben am
   unteren Rand (iOS Home-Indicator + Action-Buttons).
   Nur auf Touch-Geräten aktiv.
   ============================================== */

#map-touch-guard {
    display: none; /* Desktop: deaktiviert, dort ist Pan unten ok */
}

@media (pointer: coarse) {
    #map-touch-guard {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Höhe = Button-Zone + Home-Indicator; bei Bedarf justieren */
        height: calc(150px + env(safe-area-inset-bottom, 0px));
        z-index: 5; /* über Karte (--z-base:1), unter Chip-Leiste (30) + FAB (47) */
        background: transparent;
        touch-action: none;    /* schluckt Pan/Zoom-Gesten in dieser Zone */
        pointer-events: auto;  /* fängt Touches ab, bevor sie die Karte erreichen */
    }
}

/* ==============================================
   MAP CONTROLS POSITIONING
   ============================================== */

@media (max-width: 640px) {
    .maplibregl-ctrl-top-right {
        top: 195px;
        right: 0px;
        z-index: 60;
    }

    .maplibregl-ctrl-bottom-left {
        bottom: 0px !important;
        position: fixed !important;
        left: 0px !important;
        right: auto !important;
        z-index: 999 !important;
    }

    .maplibregl-ctrl-bottom-right {
        bottom: 0px !important;
        position: fixed !important;
        right: 0px !important;
        left: auto !important;
        z-index: 999 !important;
        max-width: 320px;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .maplibregl-ctrl-top-right {
        top: 195px;
        right: 0px;
    }

    .maplibregl-ctrl-bottom-left {
        bottom: 0px !important;
        position: fixed !important;
        left: 0px !important;
        right: auto !important;
        z-index: 999 !important;
    }

    .maplibregl-ctrl-bottom-right {
        bottom: 10px !important;
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        z-index: 999 !important;
        max-width: 320px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .maplibregl-ctrl-top-right {
        top: 230px;
        right: 0px;
    }

    .maplibregl-ctrl-bottom-left {
        bottom: 0px !important;
        position: fixed !important;
        left: 0px !important;
        right: auto !important;
        z-index: 999 !important;
    }

    .maplibregl-ctrl-bottom-right {
        bottom: 10px !important;
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        z-index: 999 !important;
        max-width: 320px;
    }
}

@media (min-width: 1024px) {
    .maplibregl-ctrl-top-right {
        top: 230px;
        right: 55px;
    }

    .maplibregl-ctrl-bottom-left {
        bottom: 0px !important;
        position: fixed !important;
        left: 0px !important;
        right: auto !important;
        z-index: 999 !important;
    }

    .maplibregl-ctrl-bottom-right {
        bottom: 10px !important;
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        z-index: 999 !important;
        max-width: 320px;
    }
}

/* Smartphone Landscape */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .maplibregl-ctrl-top-right {
        top: 160px;
        right: 10px;
    }
}

/* ==============================================
   FULLSCREEN MODE
   ============================================== */

body:has(.maplibregl-fullscreen) .site-header,
body:has(.maplibregl-fullscreen) .date-bar,
body:has(.maplibregl-fullscreen) .category-chip-bar,
body:has(.maplibregl-fullscreen) .search-fab {
    display: none !important;
}
/* ===== 04-pages/fullscreen.css ===== */
/* Pseudo-Fullscreen für mobile Geräte */
.mobile-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

/* UI-Elemente im Fullscreen verstecken */
body.fullscreen-active .site-header,
body.fullscreen-active .date-bar,
body.fullscreen-active .search-fab {
    display: none !important;
}

/* Nur GEÖFFNETE Popovers im Fullscreen anzeigen */
body.fullscreen-active .base-popover:not(.hidden) {
    z-index: 10001 !important;
}

/* Route Popover im Fullscreen anzeigen */
body.fullscreen-active .route-popover:not(.hidden) {
    z-index: 10001 !important;
}

/* Close Button für Fullscreen */
.fullscreen-close-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
}

body.fullscreen-active .fullscreen-close-btn {
    display: flex;
}

.fullscreen-close-btn:active {
    background-color: rgba(255, 255, 255, 1);
}
/* ===== 04-pages/content.css ===== */
/* ==============================================
   BUZZ.CITY - Content Pages
   Migriert auf Token-System
   ============================================== */

/* ==============================================
   CONTENT PAGE LAYOUT
   ============================================== */

.content-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-page);
}

.content-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    min-height: 0;
    transform: translateZ(0);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.content-scroll-wrapper {
    padding-top: 140px;
    padding-bottom: var(--spacing-2xl);
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (min-width: 640px) {
    .content-container {
        padding: 0 var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .content-container {
        padding: 0 var(--spacing-xl);
    }
}

/* ==============================================
   BACK TO MAP NAVIGATION
   ============================================== */

.back-to-map {
    margin-bottom: var(--spacing-lg);
}

.back-to-map-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--transition-normal);
}

.back-to-map-link:hover {
    color: var(--color-text-brand);
}

.back-to-map-link svg {
    flex-shrink: 0;
}

/* ==============================================
   CONTENT HEADER
   ============================================== */

.content-header {
    margin-bottom: var(--spacing-2xl);
    text-align: center;
}

.content-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-brand);
    margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
    .content-title {
        font-size: 3rem;
    }
}

.content-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

/* Listen-Seiten (events/heute/wochenende/filme/kinos) haben linksbündige
   Header — dort den Subtitle nicht zentrieren, sondern bündig zum Titel. */
.events-list__header-text .content-subtitle,
.movies-list__header-text .content-subtitle,
.cinemas-list__header-text .content-subtitle {
    max-width: none;
    margin: 0;
}

/* ==============================================
   CONTENT BODY
   ============================================== */

.content-body {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
    .content-body {
        padding: var(--spacing-2xl);
    }
}

/* ==============================================
   TYPOGRAPHY
   ============================================== */

.content-body h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.content-body h2:first-child {
    margin-top: 0;
}

.content-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.content-body p {
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin-bottom: var(--spacing-md);
}

.content-body ul,
.content-body ol {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.content-body li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.75;
}

.content-body a {
    color: var(--color-interactive);
    text-decoration: underline;
    transition: color var(--transition-normal);
}

.content-body a:hover {
    color: var(--color-interactive-hover);
}

/* ==============================================
   HIGHLIGHT BOX
   ============================================== */

.content-highlight {
    background-color: var(--color-brand-subtle);
    border-left: 4px solid var(--color-brand);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-xl) 0;
}

.content-highlight p:last-child {
    margin-bottom: 0;
}

/* ==============================================
   CONTENT GRID
   ============================================== */

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

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

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

.content-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: box-shadow var(--transition-normal);
}

.content-card:hover {
    box-shadow: var(--shadow-md);
}

.content-card h3 {
    margin-top: 0;
    color: var(--color-text-brand);
}

/* ==============================================
   CONTENT FOOTER
   ============================================== */

.content-footer {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--spacing-2xl);
}

.content-footer a {
    color: var(--color-interactive);
    text-decoration: none;
}

.content-footer a:hover {
    text-decoration: underline;
}

/* Datenquellen / TMDB-Attribution */
.about-attribution {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.about-tmdb-logo {
    height: 48px;
    width: auto;
    flex-shrink: 0;
}
/* ===== 04-pages/favorites.css ===== */
/* ==============================================
   BUZZ.CITY - Favorites Page
   ============================================== */

/* === FILTER BAR === */

.favorites-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.favorites-filter-buttons {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.favorites-filter-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 2px solid var(--color-border-default);
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.favorites-filter-btn:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.favorites-filter-btn.active {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text-inverse);
}

.favorites-sort-select {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-surface);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* === FAVORITES LIST === */

.favorites-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* === FAVORITE CARD === */

.favorite-card {
    display: flex;
    align-items: stretch;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--transition-normal);
}

.favorite-card:hover {
    box-shadow: var(--shadow-md);
}

.favorite-card:active {
    box-shadow: var(--shadow-sm);
}

/* Datum-Block links */
.favorite-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: var(--spacing-md) var(--spacing-sm);
    background-color: var(--favorite-card-color, var(--color-bg-subtle));
    text-align: center;
    flex-shrink: 0;
}

.favorite-card-date-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-inverse);
}

.favorite-card-date-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

.favorite-card-date-year {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.7);
}

.favorite-card-date-time {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--spacing-xs);
}

/* Recurring-Label statt Tag/Monat */
.favorite-card-date-recurring {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-inverse);
    line-height: 1.3;
}

/* === VISUELLER BLOCK (nicht-Event-Typen) === */

.favorite-card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    max-width: 72px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Image: Thumbnail */
.favorite-card-visual--image {
    background-color: var(--color-bg-subtle);
}

.favorite-card-visual--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* POI: Icon auf farbigem Hintergrund */
.favorite-card-visual--poi {
    background-color: color-mix(in srgb, var(--poi-card-color, #6B7280) 15%, white);
}

.favorite-card-visual--poi img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Grätzl: Stilisierter Kreis */
.favorite-card-visual--graetzl {
    background-color: color-mix(in srgb, var(--color-brand) 10%, white);
}

.favorite-card-graetzl-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-brand) 20%, white);
    border: 2px solid var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-card-graetzl-bezirk {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-brand);
}

/* Fallback Emoji (wenn Icon fehlt) */
.favorite-card-visual-emoji {
    font-size: 1.5rem;
}

/* Info-Block Mitte */
.favorite-card-info {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.favorite-card-category {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--favorite-card-color, var(--color-text-muted));
    margin: 0;
}

.favorite-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-card-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-card-location {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-card-location svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.favorite-card-saved {
    font-size: 0.6875rem;
    color: var(--color-text-disabled);
    margin: 0;
    margin-top: auto;
    padding-top: var(--spacing-xs);
}

/* Remove-Button am unteren Rand der Info */
.favorite-card-remove {
    margin-top: var(--spacing-sm);
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-normal);
    align-self: flex-start;
}

.favorite-card-remove:hover {
    color: var(--color-status-error, #DC2626);
}

/* Pfeil rechts */
.favorite-card-arrow {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    color: var(--color-text-disabled);
    flex-shrink: 0;
}

.favorite-card-arrow svg {
    width: 20px;
    height: 20px;
}

/* === EMPTY STATE === */

.favorites-empty {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
}

.favorites-empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

.favorites-empty h2 {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.favorites-empty p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.favorites-empty-link {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
}

.favorites-empty-link:hover {
    background-color: var(--color-interactive-hover);
}

/* Location/Venue Visual */
.favorite-card-visual--location {
    background-color: var(--color-brand-subtle);
    color: var(--color-brand);
}

/* === ROUTE CARD === */

/* Mode-Badge im Datum-Block */
.favorite-card-route-mode {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-top: var(--spacing-xs);
}

.favorite-card-route-mode.route-hype {
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--color-text-inverse);
}

.favorite-card-route-mode.route-miss {
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--color-text-inverse);
}

/* Route-Details (Stops · Dauer) */
.favorite-card-route-details {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
}
/* ===== 04-pages/sightsPage.css ===== */
/* ==============================================
   BUZZ.CITY — Sights Page
   Vollseite mit Card-Grid für Sehenswürdigkeiten
   Wird unter /de/sights und /en/sights gerendert.
   ============================================== */

/* ==============================================
   COUNTER (Anzahl Items, dezent über dem Grid)
   ============================================== */

.sights-counter {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-lg) 0;
    text-align: center;
}

/* ==============================================
   GRID (responsive: 1 → 2 → 3 → 4 Spalten)
   ============================================== */

.sights-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

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

/* ==============================================
   CARD
   ============================================== */

.sights-card {
    margin: 0;
}

.sights-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal),
                transform var(--transition-normal),
                border-color var(--transition-normal);
}

.sights-card__link:hover,
.sights-card__link:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-brand-subtle, var(--color-border));
    outline: none;
}

.sights-card__link:focus-visible {
    outline: 2px solid var(--color-text-brand);
    outline-offset: 2px;
}

@media (min-width: 600px) {
    .sights-card__link {
        flex-direction: row;
    }
}

/* ==============================================
   CARD IMAGE
   GIF-Icons sind klein und transparent — wir packen sie
   auf einen dezent gefärbten Hintergrund, damit sie als
   eigener Block wirken statt zu "schweben".
   ============================================== */

.sights-card__image-wrap {
    background-color: var(--color-bg-subtle);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--spacing-md);
}

@media (min-width: 600px) {
    .sights-card__image-wrap {
        flex: 0 0 140px;       /* feste Breite, kein Schrumpfen */
        aspect-ratio: auto;    /* Höhe richtet sich nach Card-Body */
        align-self: stretch;
    }
}

.sights-card__image {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.sights-card__link:hover .sights-card__image,
.sights-card__link:focus-visible .sights-card__image {
    transform: scale(1.08);
}

.sights-card__image--placeholder {
    width: 60%;
    height: 60%;
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-md);
}

/* ==============================================
   CARD BODY
   ============================================== */

.sights-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
}

.sights-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
    /* Lange Namen sauber begrenzen — max 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sights-card__cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-normal);
}

@media (hover: hover) {
    .sights-card__link:hover .sights-card__cta,
    .sights-card__link:focus-visible .sights-card__cta {
        color: var(--color-text-primary);
    }
}

/* ==============================================
   WIKIPEDIA EXCERPT
   ============================================== */

.sights-card__wiki {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
    margin: 0;
    /* Max. 3 Zeilen, dann ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sights-card__wiki--loading,
.sights-card__wiki--unavailable {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Fallback-Modus: Container wechselt zu Stack-Layout (Badge, Notice, Text, Button).
   Das 3-Zeilen-Clamp wandert vom Container auf den .wiki-fallback__text. */
.sights-card__wiki--fallback {
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}

/* Line-Clamp im Fallback-Modus auf den Text-Teil verlagern */
.sights-card__wiki--fallback .wiki-fallback__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==============================================
   STATES: LOADING, EMPTY, ERROR
   ============================================== */

.sights-loading,
.sights-empty,
.sights-error {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.sights-error {
    color: var(--color-text-brand);
}
/* ===== 04-pages/neighbourhoodsPage.css ===== */
/* ==============================================
   BUZZ.CITY — Neighbourhoods Page
   Vollseite mit Bezirks-gruppierten Cards für Grätzl
   Wird unter /de/neighbourhoods und /en/neighbourhoods gerendert.
   ============================================== */

/* ==============================================
   COUNTER (gleich wie bei Sights, aber eigene Klasse
   damit Stil später unabhängig variierbar bleibt)
   ============================================== */

.neighbourhoods-counter {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-2xl) 0;
    text-align: center;
}

/* ==============================================
   BEZIRKS-SECTION
   ============================================== */

.neighbourhoods-district {
    margin-bottom: var(--spacing-2xl);
}

.neighbourhoods-district:last-child {
    margin-bottom: 0;
}

.neighbourhoods-district__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
    .neighbourhoods-district__title {
        font-size: 1.5rem;
    }
}

/* ==============================================
   CARD-GRID (kompakter als Sights — mehr Spalten)
   ============================================== */

.neighbourhoods-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

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

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

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

/* ==============================================
   CARD
   ============================================== */

.neighbourhoods-card {
    margin: 0;
}

.neighbourhoods-card__link {
    display: block;
    height: 100%;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal),
                transform var(--transition-normal),
                border-color var(--transition-normal);
}

.neighbourhoods-card__link:hover,
.neighbourhoods-card__link:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-brand-subtle, var(--color-border));
    outline: none;
}

.neighbourhoods-card__link:focus-visible {
    outline: 2px solid var(--color-text-brand);
    outline-offset: 2px;
}

/* ==============================================
   CARD BODY
   ============================================== */

.neighbourhoods-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
}

.neighbourhoods-card__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background-color: var(--color-bg-subtle);
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

.neighbourhoods-card__link:hover .neighbourhoods-card__badge,
.neighbourhoods-card__link:focus-visible .neighbourhoods-card__badge {
    background-color: var(--color-brand-subtle, var(--color-bg-muted));
    color: var(--color-text-primary);
}

.neighbourhoods-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
    /* Lange Namen wie "Russisch-Orthodoxe Kathedrale..." → max 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.neighbourhoods-card__desc {
    margin: var(--spacing-xs) 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary, var(--color-text-muted));
    /* Voll ausschreiben — die Texte sind kurz (~35 Wörter), kein Clamp. */
}

.neighbourhoods-card__cta {
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--transition-normal);
}

.neighbourhoods-card__link:hover .neighbourhoods-card__cta,
.neighbourhoods-card__link:focus-visible .neighbourhoods-card__cta {
    color: var(--color-text-brand);
}

/* ==============================================
   STATES: LOADING, EMPTY, ERROR
   ============================================== */

.neighbourhoods-loading,
.neighbourhoods-empty,
.neighbourhoods-error {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.neighbourhoods-error {
    color: var(--color-text-brand);
}

/* ==============================================
   COUNTER (Heute + 7 Tage pro Card)
   FOMO-orientiert: heutiger Wert groß + Brand-Farbe + Pulse-Dot
   ============================================== */

.neighbourhoods-card__counter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--spacing-xs);
}

/* Heute-Block: große Zahl + Label */
.neighbourhoods-card__counter-today {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.neighbourhoods-card__counter-num {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    transition: color var(--transition-normal);
}

.neighbourhoods-card__counter-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 7-Tage Sekundär-Zeile */
.neighbourhoods-card__counter-week {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    opacity: 0.85;
}

/* HAS-EVENTS: Heute-Wert in Brand-Farbe + Pulse */
.neighbourhoods-card__counter.has-events .neighbourhoods-card__counter-num {
    color: var(--color-text-brand);
}

.neighbourhoods-card__counter.has-events .neighbourhoods-card__counter-label {
    color: var(--color-text-secondary);
}

/* NO-EVENTS: dezent, kein Pulse, gedämpfte Farben (Standard-Werte aus oben) */
.neighbourhoods-card__counter.no-events .neighbourhoods-card__counter-week {
    opacity: 0.6;
}

/* ==============================================
   PULSE-DOT (nur wenn heute Events anstehen)
   ============================================== */

.neighbourhoods-card__pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-text-brand);
    animation: neighbourhoods-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes neighbourhoods-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.85); }
}

/* Pulse-Dot aus bei reduzierter Bewegungspräferenz */
@media (prefers-reduced-motion: reduce) {
    .neighbourhoods-card__pulse-dot {
        animation: none;
    }
}

/* ==============================================
   SIGHTS COUNTER (Sehenswürdigkeiten im Umkreis)
   Raumbezogen statt zeitbezogen: gleiche Größe wie
   Event-Counter, aber blauer Akzent + Stern statt Pulse.
   ============================================== */

.neighbourhoods-card__sights-counter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--spacing-xs);
}

/* Main-Block: große Zahl + Label */
.neighbourhoods-card__sights-counter-main {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.neighbourhoods-card__sights-counter-num {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    transition: color var(--transition-normal);
}

.neighbourhoods-card__sights-counter-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Sekundär-Zeile: Raum-Bezug */
.neighbourhoods-card__sights-counter-radius {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    opacity: 0.85;
}

/* Stern-Icon (statt Pulse-Dot beim Event-Counter) */
.neighbourhoods-card__sights-icon {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--color-text-secondary-blue);
}

/* HAS-SIGHTS: Zahl in Secondary-Blue */
.neighbourhoods-card__sights-counter.has-sights .neighbourhoods-card__sights-counter-num {
    color: var(--color-text-secondary-blue);
}

.neighbourhoods-card__sights-counter.has-sights .neighbourhoods-card__sights-counter-label {
    color: var(--color-text-secondary);
}

/* NO-SIGHTS: dezent (Standard-Werte aus oben) */
.neighbourhoods-card__sights-counter.no-sights .neighbourhoods-card__sights-counter-radius {
    opacity: 0.6;
}

/* LOADING-State: keine Klicks während Skeleton angezeigt wird */
.neighbourhoods-card__sights-counter.is-loading {
    pointer-events: none;
}

/* ==============================================
   SKELETON-LOADING (während RPC läuft)
   ============================================== */

.neighbourhoods-card__counter.is-loading {
    pointer-events: none;
}

.neighbourhoods-card__skeleton-num,
.neighbourhoods-card__skeleton-label,
.neighbourhoods-card__skeleton-week {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--color-bg-subtle) 0%,
        var(--color-bg-muted, var(--color-border-subtle)) 50%,
        var(--color-bg-subtle) 100%
    );
    background-size: 200% 100%;
    animation: neighbourhoods-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent;
}

.neighbourhoods-card__skeleton-num {
    width: 2.2rem;
    height: 2rem;
    line-height: 1;
}

.neighbourhoods-card__skeleton-label {
    width: 3.5rem;
    height: 0.85rem;
    border-radius: var(--radius-sm);
}

.neighbourhoods-card__skeleton-week {
    width: 70%;
    height: 0.85rem;
    margin-top: 4px;
}

@keyframes neighbourhoods-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton-Animation aus bei reduzierter Bewegungspräferenz */
@media (prefers-reduced-motion: reduce) {
    .neighbourhoods-card__skeleton-num,
    .neighbourhoods-card__skeleton-label,
    .neighbourhoods-card__skeleton-week {
        animation: none;
    }
}
/* ===== 04-pages/eventsListPage.css ===== */
/* ==============================================
   BUZZ.CITY — Events List Page
   Eigenständige „Alle Events"-Seite unter /{lang}/vienna/events
   mit Filterleiste (Kategorie / Zeitraum / Datum / gratis) + Karten.
   Klassen werden auch von der SEO-Edge-Function (events-list-meta)
   für die crawlbare Initialliste genutzt.
   ============================================== */

/* ==============================================
   HEADER
   ============================================== */
.events-list__header {
    margin-bottom: var(--spacing-lg);
}

.events-list__header-text {
    min-width: 0;
}

/* ==============================================
   FILTERLEISTE
   ============================================== */
.events-list__filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.events-list__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Segment-Umschalter Events | Kino — zwei sich ausschließende Ansichten */
.events-list__segment {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl, 999px);
}

.events-list__segment-btn {
    appearance: none;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-xl, 999px);
    padding: 0.4rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

@media (hover: hover) {
    .events-list__segment-btn:hover {
        color: var(--color-text-primary);
    }
}

.events-list__segment-btn.is-active {
    background-color: var(--color-interactive);
    color: #fff;
}

/* Kategorie-Chips + Zeitraum-Presets teilen sich den Pill-Look */
.events-list__chip,
.events-list__preset {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-xl, 999px);
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal);
}

.events-list__preset {
    border-radius: var(--radius-md);
}

@media (hover: hover) {
    .events-list__chip:hover,
    .events-list__preset:hover {
        border-color: var(--color-interactive);
        color: var(--color-text-primary);
    }
}

.events-list__chip.is-active,
.events-list__preset.is-active {
    background-color: var(--color-interactive);
    border-color: var(--color-interactive);
    color: #fff;
}

/* Datums-Bereich + Gratis-Toggle */
.events-list__dates {
    gap: var(--spacing-md);
}

.events-list__date {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.events-list__date input[type="date"] {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.5rem;
    font: inherit;
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.events-list__free {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* ==============================================
   ERGEBNIS-ZÄHLER
   ============================================== */
.events-list__count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-md) 0;
}

/* ==============================================
   ERGEBNIS-LISTE + KARTEN
   ============================================== */
.events-list__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

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

.events-list__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-normal),
                transform var(--transition-normal),
                border-color var(--transition-normal);
}

@media (hover: hover) {
    .events-list__card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--color-interactive);
        transform: translateY(-2px);
    }
}

.events-list__card-main {
    display: block;
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
}

.events-list__badge {
    display: inline-block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Farbe je Kategorie über --badge-color (var(--color-group-<gruppe>)),
       inline gesetzt in renderCard — analog favorite-card-category. */
    color: var(--badge-color, var(--color-text-muted));
}

.events-list__card-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.events-list__card-subtitle {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.events-list__card-date {
    margin: 0 0 2px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-brand);
}

.events-list__card-loc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Ticket-Link / Gratis-Badge (unten in der Karte) */
.events-list__tickets,
.events-list__free-badge {
    display: inline-block;
    margin: 0 var(--spacing-md) var(--spacing-md);
    font-size: 0.8rem;
    font-weight: 600;
}

.events-list__tickets {
    color: var(--color-text-brand);
    text-decoration: none;
}

@media (hover: hover) {
    .events-list__tickets:hover {
        text-decoration: underline;
    }
}

.events-list__free-badge {
    color: #1a7f4b;
}

/* ==============================================
   „MEHR LADEN" + Status-Zustände
   ============================================== */
.events-list__more {
    display: flex;
    justify-content: center;
    margin: var(--spacing-xl) 0 var(--spacing-lg);
}

.events-list__more-btn {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--color-interactive);
    background-color: var(--color-bg-surface);
    color: var(--color-text-brand);
    border-radius: var(--radius-md);
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.events-list__more-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (hover: hover) {
    .events-list__more-btn:not(:disabled):hover {
        background-color: var(--color-interactive);
        color: #fff;
    }
}

.events-list__loading,
.events-list__empty,
.events-list__error {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.events-list__error {
    color: var(--color-text-secondary);
}

/* ===== 04-pages/moviesListPage.css ===== */
/* ==============================================
   BUZZ.CITY — Movies List Page
   „Aktuelle Filme in Wien" unter /de/vienna/filme · /en/vienna/movies
   Cover-Karten-Grid mit Suche, Genre-Chips und Sortierung.
   ============================================== */

/* ==============================================
   HEADER
   ============================================== */
.movies-list__header {
    margin-bottom: var(--spacing-lg);
}

.movies-list__header-text {
    min-width: 0;
}

/* ==============================================
   FILTERLEISTE
   ============================================== */
.movies-list__filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.movies-list__search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.85rem;
    font: inherit;
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.movies-list__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.movies-list__chip,
.movies-list__sort {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-xl, 999px);
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal);
}

.movies-list__sort { border-radius: var(--radius-md); }

@media (hover: hover) {
    .movies-list__chip:hover,
    .movies-list__sort:hover {
        border-color: var(--color-interactive);
        color: var(--color-text-primary);
    }
}

.movies-list__chip.is-active,
.movies-list__sort.is-active {
    background-color: var(--color-interactive);
    border-color: var(--color-interactive);
    color: #fff;
}

/* ==============================================
   ZÄHLER
   ============================================== */
.movies-list__count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-md) 0;
}

/* ==============================================
   GRID + KARTEN (Cover oben, Body unten)
   ============================================== */
.movies-list__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (min-width: 600px) {
    .movies-list__grid { grid-template-columns: repeat(3, 1fr); }
}

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

.movies-list__card {
    margin: 0;
}

.movies-list__card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal),
                transform var(--transition-normal),
                border-color var(--transition-normal);
}

@media (hover: hover) {
    .movies-list__card-link:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--color-interactive);
        transform: translateY(-2px);
    }
}

.movies-list__cover {
    position: relative;
    aspect-ratio: 2 / 3;
    background-color: var(--color-bg-muted, #e9e9ee);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.movies-list__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.movies-list__cover-fallback {
    font-size: 2.2rem;
    opacity: 0.5;
}

.movies-list__card-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.movies-list__card-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.movies-list__card-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.movies-list__card-next {
    margin: var(--spacing-xs) 0 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
}

.movies-list__next-label {
    font-weight: 600;
    color: var(--color-text-brand);
}

.movies-list__version {
    display: inline-block;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-brand);
    background-color: var(--color-brand-subtle);
    border-radius: var(--radius-md);
}

.movies-list__card-count {
    margin: 2px 0 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ==============================================
   STATUS-ZUSTÄNDE
   ============================================== */
.movies-list__loading,
.movies-list__empty,
.movies-list__error {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.movies-list__error { color: var(--color-text-secondary); }

/* ===== 04-pages/cinemasListPage.css ===== */
/* ==============================================
   BUZZ.CITY — Cinemas List Page
   „Kinos in Wien" (inkl. Umland) unter /de/vienna/kinos · /en/vienna/cinemas
   Karten-Liste mit Suche, „nur mit Programm"-Filter und Sortierung.
   ============================================== */

/* ==============================================
   HEADER
   ============================================== */
.cinemas-list__header {
    margin-bottom: var(--spacing-lg);
}

.cinemas-list__header-text {
    min-width: 0;
}

/* ==============================================
   FILTERLEISTE
   ============================================== */
.cinemas-list__filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.cinemas-list__search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.85rem;
    font: inherit;
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.cinemas-list__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: space-between;
}

.cinemas-list__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.cinemas-list__sorts {
    display: flex;
    gap: var(--spacing-sm);
}

.cinemas-list__sort {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal);
}

@media (hover: hover) {
    .cinemas-list__sort:hover {
        border-color: var(--color-interactive);
        color: var(--color-text-primary);
    }
}

.cinemas-list__sort.is-active {
    background-color: var(--color-interactive);
    border-color: var(--color-interactive);
    color: #fff;
}

/* ==============================================
   ZÄHLER
   ============================================== */
.cinemas-list__count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-md) 0;
}

/* ==============================================
   LISTE + KARTEN
   ============================================== */
.cinemas-list__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

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

.cinemas-list__card { margin: 0; }

.cinemas-list__card-link {
    display: block;
    height: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-normal),
                transform var(--transition-normal),
                border-color var(--transition-normal);
}

@media (hover: hover) {
    .cinemas-list__card-link:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--color-interactive);
        transform: translateY(-2px);
    }
}

.cinemas-list__card-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.cinemas-list__card-address {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.cinemas-list__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.cinemas-list__badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.cinemas-list__badge--program {
    color: var(--color-text-brand);
    background-color: var(--color-brand-subtle);
}

.cinemas-list__badge--a11y {
    color: #1a5fb4;
    background-color: rgba(26, 95, 180, 0.1);
}

.cinemas-list__badge--muted {
    color: var(--color-text-muted);
    background-color: var(--color-bg-muted, #ececf1);
}

/* ==============================================
   STATUS-ZUSTÄNDE
   ============================================== */
.cinemas-list__loading,
.cinemas-list__empty,
.cinemas-list__error {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.cinemas-list__error { color: var(--color-text-secondary); }


/* 5. Utilities */
/* ===== 05-utilities/animations.css ===== */
/* Loading States */
.loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--color-neutral-200);
	border-radius: 50%;
	border-top-color: var(--primary-500);
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
/* ===== 05-utilities/accessibility.css ===== */
/* Accessibility Verbesserungen */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.site-header {
		border-bottom: 2px solid white;
	}

	#language-toggle {
		border-width: 2px;
		border-color: white;
	}

	#search-input {
		border-width: 2px;
	}
}

/* Screen Reader Only - Visuell versteckt, aber für Screenreader und SEO zugänglich */
.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;
}
/* ===== 05-utilities/side-panel-dock.css ===== */
/* ==============================================
   BUZZ.CITY - Utility: Desktop Side-Panel Dock
   Wird auf Bottom-Drawer-Sheets angewandt
   (.film-layer-sheet, .location-layer-sheet).
   Ab Laptop-Breite (1024px) dockt der Drawer als
   schwebende Karte unten rechts an — statt volle
   Breite unten. Die peek/half/full-Höhen und der
   Drag-Handle bleiben unverändert; die Höhe wird nur
   nach oben gedeckelt (kurz unter der Datebar).
   Breakpoint muss mit modals.css übereinstimmen.
   ============================================== */
@media (min-width: 1024px) {
    .side-panel-dock {
        /* auto links → nach rechts schieben; Gaps unten + rechts */
        margin: 0 var(--spacing-md) var(--spacing-md) auto;
        /* Deckel: Oberkante bleibt kurz unter der Datebar (Feinjustier-Wert) */
        max-height: calc(100vh - 150px);
        /* schwebender Look statt Bottom-Sheet */
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    }
}


/* 6. Themes */
/* ===== 06-themes/dark.css ===== */
/* =============================================
   BUZZ.CITY - Dark Mode
   
   Überschreibt die semantischen Tokens für Dark Mode.
   Wird automatisch aktiviert wenn das System auf 
   Dark Mode steht (prefers-color-scheme: dark).
   
   Die Rohfarben (colors.css) bleiben unverändert,
   nur die Token-Zuweisungen ändern sich.
   ============================================= */

@media (prefers-color-scheme: dark) {
    :root {
        /* === HINTERGRÜNDE === */
        --color-bg-page:      var(--beton-900);
        --color-bg-surface:   var(--beton-800);
        --color-bg-elevated:  var(--beton-700);
        --color-bg-subtle:    var(--beton-800);
        --color-bg-muted:     var(--beton-700);
        --color-bg-inverse:   var(--beton-100);

        /* === TEXT === */
        --color-text-primary:   var(--beton-100);
        --color-text-secondary: var(--beton-300);
        --color-text-secondary-blue: var(--water-300);
        --color-text-muted:     var(--beton-400);
        --color-text-disabled:  var(--beton-600);
        --color-text-inverse:   var(--beton-900);
        --color-text-brand:     var(--buzz-400);

        /* === BORDERS === */
        --color-border-default: var(--beton-600);
        --color-border-subtle:  var(--beton-700);
        --color-border-strong:  var(--beton-500);
        --color-border-brand:   var(--buzz-500);

        /* === INTERAKTIVE ELEMENTE === */
        --color-interactive:          var(--buzz-400);
        --color-interactive-hover:    var(--buzz-300);
        --color-interactive-active:   var(--buzz-500);
        --color-interactive-disabled: var(--beton-600);

        /* === BUTTONS (Primary) === */
        --color-btn-primary-bg:       var(--buzz-500);
        --color-btn-primary-bg-hover: var(--buzz-400);
        --color-btn-primary-text:     var(--white);

        /* === BUTTONS (Primary Blue — gefüllt, secondary-blue) === */
        --color-btn-primary-blue-bg:       var(--water-500);
        --color-btn-primary-blue-bg-hover: var(--water-400);
        --color-btn-primary-blue-text:     var(--white);

        /* === BUTTONS (Secondary/Outline) === */
        --color-btn-secondary-bg:        transparent;
        --color-btn-secondary-bg-hover:  var(--buzz-900);
        --color-btn-secondary-border:    var(--buzz-400);
        --color-btn-secondary-text:      var(--buzz-400);

        /* === BUTTONS (Ghost/Tertiary) === */
        --color-btn-ghost-bg:         transparent;
        --color-btn-ghost-bg-hover:   var(--beton-700);
        --color-btn-ghost-text:       var(--beton-300);

        /* === FORMULARE === */
        --color-input-bg:             var(--beton-800);
        --color-input-border:         var(--beton-600);
        --color-input-border-hover:   var(--beton-500);
        --color-input-border-focus:   var(--buzz-400);
        --color-input-placeholder:    var(--beton-500);
        --color-input-text:           var(--beton-100);
        --color-checkbox-accent:      var(--buzz-400);

        /* === BRAND === */
        --color-brand:        var(--buzz-400);
        --color-brand-hover:  var(--buzz-300);
        --color-brand-subtle: var(--buzz-900);
        --color-brand-muted:  var(--buzz-800);

        /* === HEADER === */
        --color-header-bg-top:    var(--beton-800);
        --color-header-bg-bottom: var(--beton-700);
        --color-header-text:  var(--beton-100);
        --color-header-icon:  var(--beton-100);
        --color-header-hover: var(--beton-700);

        /* === OVERLAYS & PANELS === */
        --color-overlay-bg:       var(--beton-800);
        --color-overlay-backdrop: rgba(0, 0, 0, 0.7);
        --color-panel-border:     var(--beton-700);

        /* === SCROLLBAR === */
        --color-scrollbar-track:       var(--beton-800);
        --color-scrollbar-thumb:       var(--beton-600);
        --color-scrollbar-thumb-hover: var(--beton-500);

        /* === EVENTS === */
        --color-event-today:        var(--buzz-500);
        --color-event-today-text:   var(--white);
        --color-event-future:       var(--beton-800);
        --color-event-future-text:  var(--buzz-400);
        --color-event-future-border: var(--buzz-500);

        --color-group-music:     #A78BFA;
        --color-group-stage:     #F87171;
        --color-group-culture:   #34D399;
        --color-group-cinema:    #93C5FD;
        --color-group-knowledge: #22D3EE;
        --color-group-nightlife: #60A5FA;
        --color-group-heuriger:  #A3CF52;
        --color-group-markets:   #FDE047;
        --color-group-family:    #FBBF24;
        --color-group-sports:    #4ADE80;
        --color-group-other:     #f71ecf;
        --color-group-queer:     #C661D6;

        /* === SHADOWS (stärker im Dark Mode) === */
        --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.3);
        --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.4);
        --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.5);
        --shadow-popup: 0 10px 25px rgba(0, 0, 0, 0.5);
    }
}