/* 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-dark-blue: #1E4081; /* Dark-Mode: Header-Gradient oben, DateBar-Hintergrund */
    --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);
    /* Halbtransparente Ringe um .popover-image-circle (Event/POI/Sight/Podcast):
       Farbe = Popover-Hintergrund, damit das Icon auf der Popover-Kante verschmilzt */
    --color-popover-ring:         rgba(255, 255, 255, 0.7);
    --color-popover-ring-glow:    rgba(255, 255, 255, 0.3);

    /* === 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);
    /* Pin-Beschriftung der neuen Darstellung: bewusst neutral statt Markenfarbe.
       Die Farbe lebt im Pin, nicht in der Schrift — sonst konkurrieren 16
       Gruppenfarben um Aufmerksamkeit.
       Kein Dark-Mode-Override: der Kartenstil bleibt auch dunkel geschaltet
       hell, Schwarz auf Weiß-Halo trägt also in beiden Themes. */
    --color-event-pin-text:       var(--black);
	--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-fair:        var(--buzz-500); /* Brand-Pink — ehemals Türkis, Farbe vom ausgelagerten Kostenlos-Chip übernommen */
    --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;
    --color-group-festival:    #6523F9;

    /* === 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;
}

/* ==============================================
   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);
    }

    /* Quer ist Bildschirmhöhe das knappe Gut. Das Logo war mit 80×72 px der
       einzige Grund, warum die Brand-Zeile 78 px hoch war — Stadt-Auswahl
       (35 px) und die Icons rechts (40 px) brauchen nur die Hälfte. Auf 44 px
       Breite skaliert kommt es auf 39 px Höhe und liegt damit auf einer Linie
       mit den übrigen Kopfzeilen-Elementen. Der Header schrumpft dadurch von
       117 auf 84 px, die Karte gewinnt 33 px.
       Höhe bleibt auto: die Seitenverhältnisse stecken im SVG. */
    .header-brand img {
        width: 44px;
    }
}
/* ===== 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;
    }
}

/* Phone-Querformat: vertikale Paddings verkleinern, damit die DateBar
   flacher wird. Der Überstand des gewählten Tags kommt aus dem negativen
   margin-bottom (-spacing-lg) und bleibt unverändert. */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .date-bar-icon-btn {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .date-btn {
        padding-top: var(--spacing-xs);
    }

    .date-btn.selected {
        padding-top: 0.65rem;
        padding-bottom: var(--spacing-sm);
    }
}

/* ==============================================
   ZURÜCK-ZU-HEUTE BUTTON (Karten-Control links oben)
   ============================================== */

/* Erscheint als MapLibre-Control links oben auf der Karte, sobald in der
   DateBar nicht „heute" gewählt ist (backToTodayControl.js). Optik bewusst
   identisch mit dem „Mein Standort"-Button rechts
   (03-components/geolocation.css). */
.back-to-today-control.maplibregl-ctrl-group {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.back-to-today-control.hidden {
    display: none;
}

.back-to-today-control.maplibregl-ctrl button {
    width: auto;
    height: 38px;
    padding: 0 var(--spacing-sm) 0 var(--spacing-xs);
    font-size: 14px;
    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);
}

.back-to-today-control.maplibregl-ctrl button svg {
    flex-shrink: 0;
}

@media (hover: hover) {
    .back-to-today-control button:hover {
        background-color: var(--color-brand-subtle) !important;
    }
}

/* Touch-Geräte: MapLibres eigene :hover-Regel (rgb(0 0 0/5%), nicht
   hover-gekapselt) klebt am iPhone nach dem Tap — gleiches Muster wie
   beim Geolocation-Button übersteuern. */
@media (hover: none) {
    .back-to-today-control.maplibregl-ctrl button:hover {
        background-color: var(--color-bg-surface);
    }
}

/* Kurzer Puls beim Erscheinen: macht den (oft automatischen)
   Datumswechsel sichtbar. Klasse entfernt backToTodayControl.js
   nach animationend wieder. */
.back-to-today-control button.pulse {
    animation: back-to-today-pulse 0.7s ease-out 2;
}

@keyframes back-to-today-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: none;
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 6px var(--color-brand-subtle);
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-today-control button.pulse {
        animation: none;
    }
}

/* 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;
}

.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;
}

.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;
}

.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-Reihe rechts unten
   Fixe, rechtsbündige Reihe über der Kategorie-
   Chip-Leiste: Einstellungen- (Veranstaltungen-),
   Favoriten- und Kostenlos-Button (gerendert von
   categoryChipBar.js) plus der statische Such-FAB
   (index.html). Der FAB öffnet das Such-/Browse-
   Overlay; bei offenem Overlay morpht die Lupe zum X
   (Klasse .search-fab--close, gesetzt von
   headerSearch.js in openSearch/closeSearch).
   ============================================== */

.map-fab-row {
    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) */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.search-fab {
    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;
}

/* ==============================================
   RUNDE BUTTONS (Einstellungen + Favoriten)
   Hergezogen aus category-chip-bar.css — die Buttons
   lebten früher ganz links in der Chip-Leiste.
   Weiß fix wie die Chip-Farben (kein Theme-Token).
   ============================================== */

.fab-row-events-btn,
.fab-row-favorites-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--color-text-brand);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

/* Favoriten-Button: Anker für das Zähler-Badge; JS blendet ihn per
   .hidden aus, solange kein Favorit existiert (categoryChipBar.js) */
.fab-row-favorites-btn {
    position: relative;
}

.fab-row-favorites-btn.hidden {
    display: none;
}

/* Zähler-Badge (Muster vom früheren Header-Herz) — gleiche Optik für den
   Favoriten- und den Kostenlos-Zähler (Wunsch Reinhard) */
.fab-row-favorites-count,
.fab-row-free-btn__count {
    position: absolute;
    top: -3px;
    right: -3px;
    background-color: var(--color-brand);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.fab-row-favorites-count.hidden,
.fab-row-free-btn__count.hidden {
    display: none;
}

/* Puls beim Favorisieren (Keyframes hergezogen aus header.css —
   das Header-Herz ist ausgebaut, das Feedback lebt jetzt hier) */
.fab-row-favorites-count.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);
    }
}

/* ==============================================
   KOSTENLOS-PILL
   Der ausgelagerte free-today-Chip (categoryChipBar.js,
   external): weiß mit Brand-Text — bewusst invers zu den
   farbigen Leisten-Chips, weil er Kategorie-übergreifend
   filtert. Maße/Typo wie .category-bar-chip.
   ============================================== */

.fab-row-free-btn {
    position: relative; /* Anker für das Eck-Badge (__count) */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 46px;
    border: none;
    border-radius: var(--radius-full);
    padding: 0 var(--spacing-md);
    background: #fff;
    color: var(--color-text-brand);
    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);
}

/* 0 Gratis-Events am gewählten Datum: sichtbar, aber gedimmt
   (gleiche Geste wie .category-bar-chip--empty) */
.fab-row-free-btn--empty {
    opacity: 0.55;
}

/* Aktiv: Ring in Brand-Farbe mit hellem Zwischenraum
   (gleiche Geste wie .category-bar-chip--active) */
.fab-row-free-btn--active {
    box-shadow: 0 0 0 2px var(--color-bg-surface),
                0 0 0 4px var(--color-brand),
                var(--shadow-md);
}

@media (hover: hover) {
    /* Weiße Flächen: sanfter abdunkeln als die farbigen Chips
       (gleiche Geste wie .search-fab:hover) */
    .fab-row-events-btn:hover,
    .fab-row-favorites-btn:hover,
    .fab-row-free-btn:hover {
        filter: brightness(0.92);
        transform: translateY(-2px);
    }
}

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

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

/* Smartphone Landscape */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .map-fab-row {
        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);
    }
}

/* Smartphone Landscape
   Wichtig: Panel bleibt rechts verankert. Ein `left` zusätzlich zum `right: 0`
   der Basis überbestimmt die Box — max-width gewinnt, `right` wird verworfen,
   und das translateX(100%) schiebt das Panel dann nicht mehr aus dem Bild,
   sondern mitten auf die Karte. Genau so war die Legende quer von Anfang an
   sichtbar. Gleiches gilt für den Button: `top` der Basis muss explizit
   zurückgesetzt werden, sonst säße er quer bei 485px weit unterhalb des
   Bildschirms. */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    .map-legend-btn {
        top: auto;
        right: auto;
        bottom: 90px;
        left: 16px;
    }

    .map-legend-panel {
        top: calc(var(--datebar-bottom, 159px) + 4px);
        bottom: 90px;
    }
}
/* ===== 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-Reihe ausblenden während Toast sichtbar */
.category-chip-bar,
.map-fab-row {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

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

/* Toast mit Action-Button (z.B. Undo, Radar-Einladung) */
.toast-with-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: left;
    width: 600px;            /* Snackbar-üblich: feste Breite am Desktop */
    max-width: 600px;        /* übersteuert die 400px der Basis-.toast */
}

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

/* Gefüllter weißer Button, damit die Aktion klar als Button lesbar ist */
.toast-action-btn {
    background: var(--color-white);
    color: var(--color-secondary-blue);
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
    .toast-action-btn:hover {
        background: var(--color-secondary-blue-subtle);
    }
}

.toast-action-btn:active {
    background: var(--color-secondary-blue-muted);
    transform: scale(0.97);
}
/* ===== 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: 6px solid var(--color-popover-ring);
    box-shadow: 0 0 0 10pt var(--color-popover-ring-glow);
}

.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: Text oben, Toggle-Button rechtsbündig darunter (im Textfluss,
   damit der Button nie Beschreibungstext verdeckt) */
.event-subtitle-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.event-subtitle-toggle {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.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="fair"]      { --group-color: var(--color-group-fair); }
.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[data-group-id="festival"]  { --group-color: var(--color-group-festival); }

.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;
}

/* ==============================================
   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: 38px;
    padding: 0 var(--spacing-sm) 0 var(--spacing-xs);
    font-size: 14px;
    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;
}

/* Dark Mode: Icon in Textfarbe; der Active-Zustand (Ortung läuft)
   behält weiter unten sein Blau als Statussignal. */
@media (prefers-color-scheme: dark) {
    .geolocation-control.maplibregl-ctrl button svg {
        color: var(--color-text-primary);
    }
}

@media (hover: hover) {
    .geolocation-control button:hover {
        background-color: var(--color-brand-subtle) !important;
        border-color: #4285F4;
    }

    .geolocation-control button.active.centered:hover {
        background-color: #3367D6 !important;
    }
}

/* Touch-Geräte: MapLibres eigene :hover-Regel (rgb(0 0 0/5%), nicht
   hover-gekapselt) klebt am iPhone nach dem Tap und gewinnt per
   Spezifität gegen unsere Basis-Regel — der Button wird durchsichtig.
   Hier mit dem jeweiligen Zustands-Hintergrund übersteuern. */
@media (hover: none) {
    .geolocation-control.maplibregl-ctrl button:hover {
        background-color: var(--color-bg-surface);
    }

    .geolocation-control.maplibregl-ctrl button.active.centered:hover {
        background-color: #4285F4;
    }
}

/* Aktiv, aber Karte vom Standort weggeschoben: Klick springt zurück */
.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));
}

/* Aktiv & zentriert: Karte folgt dem Standort, Klick beendet die Ortung */
.geolocation-control button.active.centered {
    background-color: #4285F4;
    border-color: #4285F4;
    color: var(--white);
}

.geolocation-control button.active.centered svg {
    color: var(--white);
    filter: none;
}
/* ===== 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: var(--color-bg-surface);
    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-Reihe verstecken wenn Panel offen */
body.suggestions-open .category-chip-bar,
body.suggestions-open .map-fab-row {
    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 + FAB-Reihe 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 .map-fab-row {
    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 {
    position: relative; /* Anker für das Zähler-Eck-Badge (__count) */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    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;
}

/* Zähler als Eck-Badge oben rechts statt Inline-Pill — gleiche
   Badge-Sprache wie Favoriten-/Kostenlos-Zähler (fab.css), macht
   jeden Chip um die Pill-Breite schmaler. Passt in den Scroll-
   Container, weil dessen padding-top den 3px-Überstand abdeckt. */
.category-bar-chip__count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #fff;
    color: var(--chip-color);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.category-bar-chip__count.hidden {
    display: none;
}

/* Helle Chipfarben: chip-farbene Zahl wäre auf Weiß unlesbar →
   dunkler Text wie das Chip-Label (--light-bg setzt render()) */
.category-bar-chip--light-bg .category-bar-chip__count {
    color: #1f2937;
}

/* 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;
}

/* Abo-Karte am Listenende (im Scroll-Container): Kategorie-Abo
   (Wochen-Update) — nur bei Abo-fähigen Chips sichtbar, öffnet das
   Radar-Overlay. Ganze Karte klickbar (Tap-Target), der Button-Klick
   bubbelt zum Container. Brand-Töne aus den Tokens, Dark Mode automatisch.
   Abstand nach oben liefert das padding-bottom der Liste; nach unten
   eigener Rand inkl. Safe-Area (iPhone-Home-Indicator). */
.category-event-notify {
    margin: 0 var(--spacing-md) calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
    background: var(--color-brand-subtle);
    border: 1px solid var(--color-brand-muted);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
}

.category-event-notify-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-brand);
}

.category-event-notify-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.category-event-notify-text {
    margin: var(--spacing-xs) 0 var(--spacing-sm);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.category-event-notify-btn {
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
}

.category-event-notify.hidden {
    display: none;
}

@media (hover: hover) {
    .category-event-notify:hover {
        background: var(--color-brand-muted);
    }

    .category-event-notify-btn:hover {
        background: var(--color-btn-primary-bg-hover);
    }
}

/* ==============================================
   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);
    /* Datums-Bereiche („28. Sep.–2. Okt.", Messen-Vorschau) nicht umbrechen —
       der Titel daneben kürzt sich stattdessen per Ellipsis */
    white-space: nowrap;
}

.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);
}

/* Messen-Vorschau: nur AKTUELL LAUFENDE bleiben in Brandfarbe/fett —
   kommende Zeiträume neutral (Primärfarbe folgt dem Dark Mode) */
.category-event-item-time--upcoming {
    font-weight: 400;
    color: var(--color-text-primary);
}

/* 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);
}

/* Gruppen-Überschrift „außerhalb von {Stadt}" — steht nur in der Liste,
   wenn die Außerhalb-Gruppe Einträge hat (JS hängt sie bedingt ein) */
.category-event-group-header {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xs);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    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);
    }
}

/* ==============================================
   DESKTOP: Sheet als rechtes Seitenpanel
   Gleiche Geste wie .base-popover (modals.css Z. 154 ff.):
   dockt unten rechts an und slidet von rechts rein.
   .hidden behält display:block, damit die transform-
   Transition beim Öffnen UND Schließen greift —
   visibility schaltet erst nach der Transition um
   (Muster aus modals.css).
   ============================================== */
@media (min-width: 1024px) {
    .category-event-panel {
        transition: visibility 0s linear 0.3s;
    }

    .category-event-panel:not(.hidden) {
        transition: visibility 0s linear 0s;
    }

    .category-event-panel.hidden {
        display: block;
        visibility: hidden;
    }

    .category-event-sheet {
        margin: 0 var(--spacing-md) var(--spacing-md) auto;
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
        transform: translateX(calc(100% + var(--spacing-md)));
        transition: height 0.3s ease, transform var(--transition-slow);
    }

    /* Gleiche Höhe wie das Event-Kategorien-Overlay
       (.base-popover .popover-content in modals.css: 100vh - 150px) —
       die half/full-Zustände fallen am Desktop zusammen. peek bleibt
       96px: das Panel weicht so dem Event-Popover aus (beide docken
       rechts unten an), categoryEventPanel.js setzt peek beim Klick
       auf einen Listeneintrag. */
    .category-event-panel[data-state="half"] .category-event-sheet,
    .category-event-panel[data-state="full"] .category-event-sheet {
        height: calc(100vh - 150px);
    }

    .category-event-panel:not(.hidden) .category-event-sheet {
        transform: translateX(0);
    }
}

/* ===== 03-components/favorites-panel.css ===== */
/* =============================================
   FAVORITEN-PANEL (Bottom Sheet)

   Alle Favoriten als Liste, zwei Zustände half / full —
   Muster wie category-event-panel.css, ohne peek.
   Gerendert von favoritesPanel.js, geöffnet vom
   Herz-Button der Chip-Leiste (categoryChipBar.js).
   ============================================= */

.favorites-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000; /* wie category-event-panel */
    pointer-events: none;
}

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

.favorites-panel-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;
}

.favorites-panel[data-state="half"] .favorites-panel-sheet {
    height: 45vh;
}

.favorites-panel[data-state="full"] .favorites-panel-sheet {
    height: 90vh;
}

/* ==============================================
   DRAG HANDLE + HEADER
   ============================================== */

.favorites-panel-drag-handle {
    display: flex;
    justify-content: center;
    padding: var(--spacing-sm) 0 var(--spacing-xs);
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
}

.favorites-panel-drag-bar {
    width: 40px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-default);
}

.favorites-panel-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 */
}

.favorites-panel-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.favorites-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.favorites-panel-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.favorites-panel-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)
   ============================================== */

.favorites-panel-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;
}

.favorites-panel-list {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
}

/* Zeile: Visual | Titel/Untertitel | Icon-Buttons.
   --fav-color kommt inline aus favoritesPanel.js (Gruppen-/Typ-Farbe,
   datengetrieben — bewusst kein Farb-Token, wie die Chip-Leiste). */
.favorites-panel-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-default);
    border-left: 3px solid var(--fav-color);
    /* Typ-Farbe sehr transparent als Zeilen-Hintergrund — Hex8-Werte
       (--fav-bg/--fav-bg-hover) setzt favoritesPanel.js inline */
    background: var(--fav-bg, transparent);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
}

/* Vergangene Favoriten (aufgeklappt über den Toggle): gedimmt */
.favorites-panel-item--past {
    opacity: 0.6;
}

/* Toggle „Vergangene Favoriten anzeigen/ausblenden" am Listenende
   (gleiche Geste wie .category-event-back im Chip-Panel) */
.favorites-panel-past-toggle {
    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;
}

/* Visual links: Datum (Event/Route) bzw. Icon/Bild (Ort) */
.favorites-panel-item-visual {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--fav-color);
}

.favorites-panel-item-day {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.favorites-panel-item-month {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.favorites-panel-item-mode {
    margin-top: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--fav-color);
    border-radius: var(--radius-full);
    padding: 1px 6px;
}

.favorites-panel-item-visual img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* POI-Icons sind weiße Glyphen → farbiger Kreis dahinter */
.favorites-panel-item-visual--poi img {
    background: var(--fav-color);
    padding: 6px;
}

.favorites-panel-item-bezirk {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fav-color);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.favorites-panel-item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.favorites-panel-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-panel-item-sub {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Runde Icon-Buttons (Benachrichtigen/Entfernen) — bewusst dezent,
   damit die Zeile selbst das primäre Tap-Ziel bleibt */
.favorites-panel-item-actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--spacing-xs);
}

.favorites-panel-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* ==============================================
   DESKTOP: Sheet als rechtes Seitenpanel
   Gleiche Geste wie .base-popover (modals.css Z. 154 ff.):
   dockt unten rechts an und slidet von rechts rein.
   .hidden behält display:block, damit die transform-
   Transition beim Öffnen UND Schließen greift —
   visibility schaltet erst nach der Transition um
   (Muster aus modals.css).
   ============================================== */
@media (min-width: 1024px) {
    .favorites-panel {
        transition: visibility 0s linear 0.3s;
    }

    .favorites-panel:not(.hidden) {
        transition: visibility 0s linear 0s;
    }

    .favorites-panel.hidden {
        display: block;
        visibility: hidden;
    }

    .favorites-panel-sheet {
        margin: 0 var(--spacing-md) var(--spacing-md) auto;
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
        transform: translateX(calc(100% + var(--spacing-md)));
        transition: height 0.3s ease, transform var(--transition-slow);
    }

    /* Gleiche Höhe wie das Event-Kategorien-Overlay
       (.base-popover .popover-content in modals.css: 100vh - 150px) —
       die half/full-Zustände fallen am Desktop zusammen */
    .favorites-panel[data-state="half"] .favorites-panel-sheet,
    .favorites-panel[data-state="full"] .favorites-panel-sheet {
        height: calc(100vh - 150px);
    }

    .favorites-panel:not(.hidden) .favorites-panel-sheet {
        transform: translateX(0);
    }
}

@media (hover: hover) {
    .favorites-panel-item:hover {
        background: var(--fav-bg-hover, rgba(0, 0, 0, 0.04));
    }

    .favorites-panel-icon-btn--notify:hover {
        color: var(--color-brand);
        border-color: var(--color-brand);
    }

    .favorites-panel-icon-btn--remove:hover {
        color: #dc2626;
        border-color: #dc2626;
    }
}

/* ===== 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;
	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: 44px;
    height: 44px;
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: 6px;
}

/* MapLibre liefert seine Icons als feste 29×29-Hintergrundbilder — ohne
   background-size blieben sie beim größeren Button stehen und wirkten
   verloren. Anteilig mitskaliert (29/36 der Buttonbreite). */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    background-size: 35px 35px;
}

/* Tilt-Umschalter (pitchControl.js): beschriftet mit „2D"/„3D" statt Icon,
   daher in Textfarbe — ohne den invert-Hack der MapLibre-Icons weiter unten. */
.pitch-control.maplibregl-ctrl button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}

/* Nur bei echtem Hover (Maus/Trackpad): iOS lässt :hover nach einem Tap
   kleben und würde sonst z. B. den gefüllten Geolocation-Button grau
   übermalen (Regel 10.2). */
@media (hover: hover) {
    .maplibregl-ctrl-group button:hover {
        background-color: var(--color-bg-subtle) !important;
    }
}

/* Touch-Geräte: iOS lässt :hover nach dem Tap kleben, und MapLibres eigene
   Regel (button:not(:disabled):hover → 5% Schwarz) schlägt per Spezifität
   unsere Basisfarbe — der Button bleibt danach fast durchsichtig stehen.
   Gleiches Gegenmittel wie bei den Pill-Buttons (geolocation.css); der
   Selektor spiegelt MapLibres Spezifität, main.css lädt später und gewinnt. */
@media (hover: none) {
    .maplibregl-ctrl-group button:not(:disabled):hover {
        background-color: var(--color-bg-surface);
    }
}

/* Dark Mode: MapLibre liefert seine Icons (Zoom, Kompass, Fullscreen) als
   dunkle SVG-Hintergrundbilder — auf dunklen Buttons unsichtbar. invert
   hellt sie auf, hue-rotate stellt Farbtöne (rote Kompassnadel) wieder her. */
@media (prefers-color-scheme: dark) {
    .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* 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;
}

/* Die Kartenseite braucht diese Höhe nicht: #map-container und
   #map-touch-guard sind beide position: fixed — main ist auch mit Höhe 0 nicht
   leerer als vorher. Die tote Höhe machte das Dokument aber 620 px hoch bei
   428 px Fensterhöhe, die Seite war also scrollbar, obwohl es auf der Karte
   nichts zu scrollen gibt. Aufräumen, kein Fix: den Versatz unten hat das
   allein nicht behoben (am Gerät geprüft). */
main:has(> #map-container) {
    height: 0;
}

/* Querformat-Versatz in der Home-Bildschirm-Web-App (standalone).
   Dort bleibt nach dem Drehen ein negativer Scroll-Offset hängen — am Gerät
   gemessen: scrollY=-47, visualViewport.offsetTop=-47, html.top=47. Alles im
   Dokumentfluss rendert dadurch 47 px zu tief; `position: fixed` bleibt
   unbeeindruckt am Bildschirm kleben. Im selben Screenshot saßen Karte und
   Chip-Leiste (beide fixed) korrekt, nur Header und DateBar (beide sticky)
   waren verschoben — man sah die Karte über dem Header.
   Auf der Kartenseite scrollt nichts, sticky war hier immer nur ein fixed mit
   Umweg über den Dokumentfluss. Inhaltsseiten bleiben sticky: dort trägt der
   Fluss echten Inhalt.
   Achtung: Die DateBar hängt damit nicht mehr automatisch unter dem Header —
   wächst er (aufgeklappte Suche), führt der ResizeObserver in dateBar.js ihr
   `top` nach. */
body:has(#map-container) .site-header,
body:has(#map-container) .date-bar {
    position: fixed;
}

/* ==============================================
   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-top-left {
        top: 195px;
        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-top-left {
        top: 195px;
    }

    .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-top-left {
        top: 230px;
    }

    .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-top-left {
        top: 230px;
        left: 55px; /* gleicher Randabstand wie -top-right */
    }

    .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;
    }
}

/* Wenig Bauhöhe (iPhone SE/8 und Co., niedrige Browserfenster):
   Der Such-FAB sitzt 164px über der Unterkante, der Button-Stapel endet sonst
   bei 533px — ab ~700px Viewport-Höhe laufen beide ineinander. Statt die
   Buttons zu verkleinern, wird die Luft zwischen ihnen zusammengeschoben:
   MapLibre gibt jeder Control-Gruppe 10px margin-top, dazu 6px unter jedem
   Button. Schwelle bei 740px, damit auch knapp darüber genug Abstand bleibt.
   Der Offset oben bleibt bei 195px: die Unterkante der DateBar wandert mit der
   Gerätebreite (181px bei 375er-Phones, 195px bei 414ern), näher heranzurücken
   ließe den Stapel auf breiteren Geräten in die DateBar laufen.
   Muss vor der Landscape-Regel stehen — die überschreibt hier top und margin. */
@media (max-height: 740px) {
    .maplibregl-ctrl-top-right .maplibregl-ctrl,
    .maplibregl-ctrl-top-left .maplibregl-ctrl {
        margin-top: 4px;
    }

    .maplibregl-ctrl-group button {
        margin-bottom: 4px;
    }

    .geolocation-control.maplibregl-ctrl-group {
        margin-bottom: 4px;
    }

    .geolocation-control.maplibregl-ctrl button,
    .back-to-today-control.maplibregl-ctrl button {
        height: 34px;
    }
}

/* Smartphone Landscape */
@media (max-height: 640px) and (orientation: landscape) and (pointer: coarse) {
    /* Die Reihe sitzt direkt unter der DateBar und ist rechts bündig mit dem
       Such-FAB (right: 16px). Der FAB beginnt quer erst bei y≈245 (bottom:84
       + 64px Höhe), die Reihe endet bei y≈207 — sie passt also darüber, statt
       seitlich am FAB vorbeizulaufen.
       --datebar-bottom setzt dateBar.js bei load/resize auf die tatsächliche
       Unterkante von Header + DateBar; der Fallback entspricht dem gemessenen
       Wert quer (84px Header + 76px DateBar, minus 1px Überlappung). Feste
       Pixel wären hier trügerisch: die frühere Annahme „208px" stammte aus
       einer Messung im Hochformat, und die 159 verschieben sich wieder, sobald
       sich Logo- oder Tagline-Größe ändert. */
    .maplibregl-ctrl-top-right {
        top: calc(var(--datebar-bottom, 159px) + 4px);
        right: 16px;
    }

    .maplibregl-ctrl-top-left {
        top: calc(var(--datebar-bottom, 159px) + 4px);
        left: 16px;
    }

    /* Quer bleiben zwischen DateBar und Chip-Leiste nur gut 120px Kartenhöhe —
       ein Button-Turm läuft dort in jeder Größe unten hinaus. Breite ist
       dagegen reichlich da, also die Controls in eine Reihe legen.
       MapLibre positioniert sie per float; display:flex hebelt das aus. */
    .maplibregl-ctrl-top-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .maplibregl-ctrl-top-right .maplibregl-ctrl {
        margin: 0;
    }

    .maplibregl-ctrl-top-right .maplibregl-ctrl-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    /* Der vertikale Abstand der Turm-Ansicht würde die Reihe verschieben */
    .maplibregl-ctrl-top-right .maplibregl-ctrl-group button {
        margin-bottom: 0;
    }
}

/* ==============================================
   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) .map-fab-row {
    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 .map-fab-row {
    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);
}

/* Aktions-Zeile am unteren Rand der Info: Radar-Chip + Entfernen */
.favorite-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

/* „Bescheid geben"-Link — gleicher Stil wie „Favorit entfernen",
   Hover in secondary-blue (Radar-Familie) statt Rot */
.favorite-card-notify {
    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);
}

.favorite-card-notify:hover {
    color: var(--color-secondary-blue);
}

.favorite-card-remove {
    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);
}

.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(--vibe-dark-blue);
        --color-header-bg-bottom: var(--buzz-500);
        --color-header-text:  var(--beton-100);
        --color-header-icon:  var(--beton-100);
        --color-header-hover: var(--beton-700);

        /* === DATE BAR === */
        /* Icon-Buttons (Datum/Ebenen) behalten bewusst die Light-Mode-Tokens */
        --color-datebar-bg: var(--vibe-dark-blue);
        --color-datebar-text: var(--white);
        --color-datebar-border: var(--vibe-dark-blue);
        --color-datebar-selected-bg: var(--buzz-500);
        --color-datebar-selected-text: var(--white);
        --color-datebar-hover: #D800AF44;

        /* === OVERLAYS & PANELS === */
        --color-overlay-bg:       var(--beton-800);
        --color-overlay-backdrop: rgba(0, 0, 0, 0.7);
        --color-panel-border:     var(--beton-700);
        /* beton-800 als rgba — Ringfarbe folgt dem dunklen Popover-Hintergrund */
        --color-popover-ring:      rgba(44, 64, 77, 0.7);
        --color-popover-ring-glow: rgba(44, 64, 77, 0.3);

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

        /* === EVENTS === */
        --color-smallevent-bg:     var(--beton-700);
        --color-smallevent-border: var(--beton-600);
        --color-smallevent-hover:  var(--beton-600);
        --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-fair:      var(--buzz-400); /* helleres Brand-Pink, wie die übrigen Gruppen-Aufhellungen */
        --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;
        --color-group-festival:  #8A5CFA;

        /* === 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);
    }
}