:root {
            --primary: #c98a45;
            --primary-hover: #b3773a;
            --bg: #16171c;
            --card-bg: #1c1e25;
            --text: #f5f5f7;
            --text-light: #9a9aa5;
            --border: #2a2d36;
            --border-strong: #3a3d47;
            --danger: #ff4757;
            --danger-hover: #ff6b81;
            --success: #2ecc71;
        }
		/* Einheitliche Icon-Grafiken (bilder/icons/ICON_*.png) als Emoji-Ersatz. Skaliert per
		   em-Einheit automatisch mit der Schriftgröße der Umgebung mit (Buttons, Überschriften,
		   Labels usw.), genau wie ein Emoji-Zeichen es tun würde - kein Layout-Anpassungsbedarf
		   an den jeweiligen Einsatzstellen nötig. */
		.icon-img {
			width: 1em;
			height: 1em;
			object-fit: contain;
			vertical-align: -0.15em;
			display: inline-block;
		}
		/* Verhindert das 300ms Delay und den Zoom bei schnellen Taps */
		* {
			touch-action: manipulation;
		}
		body {
			font-family: 'Segoe UI', Arial, sans-serif;
			color: var(--text);
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			background: var(--bg);
		}

		/* Nur auf profile.php: body bleibt komplett fest stehen (kein eigenes Scrollen/Bounce),
		   #profileScrollWrapper darin übernimmt das Scrollen. Dadurch bleibt das per JS gesetzte
		   Hintergrundbild von body auf allen Geräten wirklich fixiert, auch am Handy. */
		body.page-fixed-shell {
			height: 100vh;
			overflow: hidden;
		}
		#profileScrollWrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.body-no-scroll {
			position: fixed;
			width: 100%;
			overflow: hidden;
		}
		
		/*TOPBAR*/
		.topbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 60px;
			background: var(--bg);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			z-index: 1000;
			transition: transform 0.3s ease;
		}
		.topbar.topbar-hidden {
			transform: translateY(-100%);
		}
		/* Nur auf der Startseite: Topbar ohne eigene Hintergrundfarbe, damit das Hero-Bild direkt
		   dahinter durchscheint statt von einem festen dunklen Balken verdeckt zu werden. */
		body.is-home .topbar {
			background: transparent;
		}
		/* Logo-Container stylen */
		.logo img.logo-img {
			height: 80px;      /* Passe die Höhe an deine Topbar an */
			width: auto;       /* Behält das Seitenverhältnis bei */
			display: block;
			cursor: pointer;
		}

		/* Optional: Padding für den Logo-Bereich */
		.logo {
			display: flex;
			align-items: center;
			padding: 5px 15px;
		}
		.topbar-right {
			display: flex;
			align-items: center;
			gap: 15px; /* Abstand zwischen Suche und Button */
			flex-grow: 1;
			justify-content: flex-end; /* Zwingt alles nach rechts */
		}
		.search-input {
			max-width: 150px; /* Hier kannst du die Breite begrenzen */
			margin-bottom: 0; /* Wichtig: margin aus dem anderen CSS überschreiben */
			box-sizing: border-box;
			background: #20202a;
			border: 1px solid var(--border);
			border-radius: 6px; 
            padding: 8px 16px;
			color: white;
			font-size: 1.1rem;
			box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
        }
		.dropdown-menu {
			position: fixed;
			top: 60px;
			left: 0;
			width: 100%;
			background: var(--bg);
			/* Höher als die schwebende Bottom-Nav-Pille (z-index:999) - sonst liegt die Pille über
			   dem unteren Teil des Formulars (z.B. Speichern-Button) und verdeckt ihn auf dem Handy. */
			z-index: 1050;
			box-shadow: 0 10px 20px rgba(0,0,0,0.5);
			/* Höhe wird per JS live auf den tatsächlichen Inhalt gesetzt (siehe burger-app.js) */
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
			pointer-events: none;
		}
		.dropdown-menu.is-open {
			opacity: 1;
			pointer-events: auto;     /* Menü wieder anklickbar machen */
			overflow-y: auto;
		}
		.menu-section input, .menu-section select {
			background: #20202a;
			border: 1px solid var(--border);
			color: white;
			padding: 10px;
			border-radius: 6px;
			width: 100%;
			margin-bottom: 10px;
		}

		/* Inhalt im Dropdown */
		.menu-content {
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			overflow: hidden;
			min-height: 0;
		}

		.menu-section {
			width: 100%;
		}

		#itemFormCard {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			box-sizing: border-box;
		}

		#authCard,
		#actionArea {
			width: 100%;
			max-width: 400px;
			margin: 0 auto;
			box-sizing: border-box;
		}

		/*STARTSEITE*/
		.hero {
			background: linear-gradient(to bottom, rgba(22,23,28,0.35) 0%, rgba(22,23,28,0.75) 55%, var(--bg) 100%), url('../bilder/STARTBG.png');
			background-size: cover;
    		background-position: center;
    		background-repeat: no-repeat;
			background-attachment: fixed;
			color: #ffffff;
			padding: 80px 0;
			font-family: sans-serif;
			min-height: 100vh;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.hero-container { width: 100%; max-width: 900px; margin: 0 auto; text-align: left; box-sizing: border-box; }
		.hero {
			transition: min-height 0.7s cubic-bezier(0.4, 0, 0.2, 1), padding 0.7s ease;
			will-change: min-height;
		}
		.hero.hero-compact {
			min-height: 42vh;
			padding: 100px 0 40px;
		}
		.hero h1 {
			transition: font-size 0.5s ease;
		}
		.hero.hero-compact h1 {
			font-size: 2.2rem;
		}
		.hero .hero-subtext {
			transition: opacity 0.3s ease;
		}
		.hero.hero-compact .hero-subtext {
			opacity: 0;
			/* Hebt die "both"-Einblendeanimation beim Laden wieder auf (die würde die Opacity sonst
			   dauerhaft auf 1 fixieren und dieses Ausblenden beim Suchen verhindern). */
			animation: none;
		}

		.hero-search-results {
			display: grid;
			grid-template-rows: 0fr;
			overflow: hidden;
			transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
			background: none;
			border: none;
		}
		/* .main-content wird seitenweit mit eigenem padding (siehe generische .main-content-Regeln)
		   verwendet - das würde hier auch im eingeklappten Zustand (grid-template-rows:0fr) echte
		   Höhe erzeugen, da Padding sich nicht durch min-height:0 wegkürzen lässt. Deshalb hier
		   gezielt auf 0 überschrieben, damit der Block im Ruhezustand wirklich 0px hoch ist statt
		   als sichtbarer Balken in der Seitenhintergrundfarbe stehen zu bleiben. */
		.hero-search-results > .main-content {
			overflow: hidden;
			min-height: 0;
			opacity: 0;
			padding: 0;
			margin: 0;
			transition: opacity 0.4s ease, padding 0.4s ease;
		}
		/* Kein Hintergrund, kein Schleier - weder im Ruhezustand noch bei aktiver Suche.
		   Der Block bleibt immer vollständig hintergrundlos, es scheint nur die normale
		   Seiten-Hintergrundfarbe (--bg) durch. */
		.hero-search-results.is-visible {
			grid-template-rows: 1fr;
			background: none;
		}
		.hero-search-results.is-visible > .main-content {
			opacity: 1;
			padding: 40px 20px;
			transition: opacity 0.4s ease 0.2s, padding 0.4s ease;
		}
		h1 { font-size: 3.5rem; line-height: 1.2; margin-bottom: 20px; }
		.accent { color: var(--primary); }

		.search-bar {
			display: flex;
			background: var(--card-bg);
			color: var(--text);
			margin: 40px 0;
			align-items: center;
			border-radius: 10px;
			border: 1px solid var(--border);
    		overflow: hidden;
		}
		.search-field { display: flex; align-items: center; padding: 15px; flex: 1; }
		.search-field input { border: none; outline: none; margin-left: 10px; width: 100%; background: transparent; color: var(--text); font-size: 1rem; }
		.search-field input::placeholder { color: var(--text-light); }
		.divider { width: 1px; height: 30px; background: var(--border); }
		.search-submit { background: var(--primary); color: #fff; border: none; padding: 20px 40px; align-self: stretch; display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; transition: background 0.2s ease; }
		.search-submit:hover { background: var(--primary-hover); }
		.search-map-btn {
			background: var(--border-strong);
			color: #fff;
			border: none;
			padding: 20px 28px;
			align-self: stretch;
			box-sizing: border-box;
			cursor: pointer;
			font-family: inherit;
			font-size: 1rem;
			font-weight: 600;
			text-decoration: none;
			white-space: nowrap;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.2s ease;
		}
		.search-map-btn:hover {
			background: #4a4d57;
		}

		/* Kategorien */
		.category-grid { 
			display: flex; 
			gap: 15px; 
			margin-bottom: 60px; 
			max-width: 900px; /* Begrenze die Breite, damit es zentriert bleibt */
			margin-left: auto;
			margin-right: auto;
		}

		.category-grid a.cat-item {
			text-decoration: none;
		}

		.cat-item { 
			flex: 1; /* Sorgt dafür, dass alle Elemente exakt die gleiche Breite haben */
			background: rgba(0, 0, 0, 0.5); /* Transparentes Weiß/Grau für den Look */
			padding: 20px 15px; 
			text-align: center; 
			border: 1px solid rgba(255, 255, 255, 0.05); /* Dezenter Rahmen */
			border-radius: 6px;
			cursor: pointer;
			transition: background 0.3s;
			color: #ffffff;
		}
		/* Icon-Grafik über dem Label zentrieren - .cat-icon hatte am PC bisher gar keine eigene
		   Größe (nur die Mobile-Version weiter unten setzt 52px/32px), dadurch fiel die Icon-Grafik
		   auf die winzige geerbte Standard-Schriftgröße zurück statt wie das Emoji vorher großzügig
		   zu wirken. */
		.cat-item .cat-icon {
			display: block;
			margin: 0 auto 8px;
			width: 42px;
			height: 42px;
		}
		.cat-item .cat-icon .icon-img {
			width: 42px;
			height: 42px;
		}
		.cat-item .cat-label {
			display: block;
			margin-top: 6px;
		}

		.cat-item:hover {
			background: rgba(255, 255, 255, 0.1); /* Leichter Effekt beim Drüberfahren */
		}

		/* Community-Stats: eigener Abschnitt unter dem Hero mit Karten-Look */
		.community-stats {
			position: relative;
			width: 100%;
			padding: 64px 20px 76px;
			text-align: center;
			box-sizing: border-box;
			overflow: hidden;
			background:
				radial-gradient(ellipse 600px 300px at 15% 0%, rgba(201,138,69,0.10), transparent 60%),
				radial-gradient(ellipse 600px 300px at 85% 100%, rgba(201,138,69,0.08), transparent 60%),
				var(--bg);
		}
		.community-stats-header h2 {
			font-size: 1.9rem;
			margin: 0 0 10px;
		}
		.community-stats-header p {
			color: var(--text-light);
			margin: 0 0 42px;
			font-size: 0.95rem;
		}
		.stats-bar {
			display: flex; align-items: stretch; justify-content: center;
			flex-wrap: wrap; gap: 0;
			width: 100%; max-width: 1040px; margin: 0 auto;
			box-sizing: border-box;
			position: relative;
			z-index: 1;
		}
		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: 16px;
			padding: 30px 26px;
			width: 210px;
			box-sizing: border-box;
			transition: transform 0.2s ease, border-color 0.2s ease;
		}
		.stat-item:hover {
			transform: translateY(-4px);
			border-color: var(--border-strong);
		}
		.stat-item .stat-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px; height: 44px;
			margin-bottom: 14px;
		}
		.stat-item .stat-icon .icon-img {
			width: 30px; height: 30px;
		}
		.stat-item strong {
			font-size: 2.1rem;
			line-height: 1.1;
			color: var(--text);
		}
		.stat-item .stat-label {
			display: block;
			margin-top: 6px;
			font-weight: 600;
			color: var(--primary);
			font-size: 0.95rem;
		}
		.stat-item .stat-desc {
			display: block;
			margin-top: 6px;
			color: var(--text-light);
			font-size: 0.78rem;
			line-height: 1.4;
		}
		.stat-dot {
			align-self: center;
			width: 6px; height: 6px;
			border-radius: 50%;
			background: var(--primary);
			margin: 0 18px;
			flex-shrink: 0;
			opacity: 0.7;
		}

		/* Zwischenbreite (Tablet / schmaleres Fenster): 4 Karten passen nicht mehr nebeneinander
		   in eine Reihe, würden aber als "3 + 1 allein" umbrechen und wirken dadurch unausgewogen.
		   Deshalb hier sauber auf ein 2x2-Raster wechseln, bevor es dazu kommt. Die Punkte zwischen
		   den Karten ergeben in einem Raster keinen Sinn und werden ausgeblendet. */
		@media (min-width: 769px) and (max-width: 1023px) {
			.stats-bar {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
				max-width: 620px;
			}
			.stat-item {
				width: 100%;
			}
			.stat-dot {
				display: none;
			}
		}

		/* Startseite: gestaffelter Einblendungs-Effekt beim Laden, damit die Seite sich modern
		   "aufbaut" statt einfach schlagartig da zu sein. Reine CSS-Animation (kein JS nötig,
		   läuft automatisch beim Rendern), mit einer sanften Ease-Out-Kurve für den professionellen
		   Look. Nur auf der Startseite relevant, da .hero/.category-grid/.stats-bar nur hier vorkommen. */
		@keyframes heroFadeInUp {
			from { opacity: 0; transform: translateY(22px); }
			to { opacity: 1; transform: translateY(0); }
		}
		.hero-container > h1 {
			opacity: 0;
			animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
		}
		.hero-container > .hero-subtext {
			opacity: 0;
			animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
		}
		.hero-container > .search-bar {
			opacity: 0;
			animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
		}
		.category-grid > .cat-item {
			opacity: 0;
			animation: heroFadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
		}
		.category-grid > .cat-item:nth-child(1) { animation-delay: 0.46s; }
		.category-grid > .cat-item:nth-child(2) { animation-delay: 0.51s; }
		.category-grid > .cat-item:nth-child(3) { animation-delay: 0.56s; }
		.category-grid > .cat-item:nth-child(4) { animation-delay: 0.61s; }
		.category-grid > .cat-item:nth-child(5) { animation-delay: 0.66s; }
		.category-grid > .cat-item:nth-child(6) { animation-delay: 0.71s; }
		.category-grid > .cat-item:nth-child(7) { animation-delay: 0.76s; }
		.category-grid > .cat-item:nth-child(8) { animation-delay: 0.81s; }
		.stats-bar > .stat-item {
			opacity: 0;
			animation: heroFadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
		}
		.stats-bar > .stat-item:nth-of-type(1) { animation-delay: 0.92s; }
		.stats-bar > .stat-item:nth-of-type(2) { animation-delay: 0.97s; }
		.stats-bar > .stat-item:nth-of-type(3) { animation-delay: 1.02s; }
		.stats-bar > .stat-item:nth-of-type(4) { animation-delay: 1.07s; }
		/* Wer Animationen reduziert haben möchte (Betriebssystem-Einstellung), bekommt die Seite
		   sofort komplett sichtbar ohne Bewegung - kein Ausschluss, sondern Barrierefreiheit. */
		@media (prefers-reduced-motion: reduce) {
			.hero-container > h1,
			.hero-container > .hero-subtext,
			.hero-container > .search-bar,
			.category-grid > .cat-item,
			.stats-bar > .stat-item {
				animation: none;
				opacity: 1;
			}
		}
		/*END*/

		/* Der neue Header */
		.page-header {
			width: 100%;
			min-height: 220px;
			background: linear-gradient(to right,
                var(--bg) 0%,
                var(--bg) 50%,
                rgba(22, 23, 28, 0.4) 60%),
                var(--page-header-image, url('/bilder/HINTERGRUND.png'));
			background-size: cover;
			background-position: center;
			margin-top: 60px;
			display: flex;
			justify-content: center; /* Zentriert alles horizontal */
			align-items: center;     /* Zentriert alles vertikal */
			position: relative;
			overflow: hidden; /* Verhindert Überlaufen */
		}
		/* Weicher Übergang unten in den Seiten-Hintergrund, statt eines harten Schlagschattens */
		.page-header::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 50px;
			background: linear-gradient(to top, var(--bg) 0%, rgba(22, 23, 28, 0) 100%);
			pointer-events: none;
		}
		.header-content {
			width: 95%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 28px 0;
			display: grid;
			/* Wir definieren 3 Spalten: 1. Icon (fest), 2. Text (variabel bis 600px), 3. Leerraum */
			grid-template-columns: 80px minmax(0, 400px) 1fr;
			grid-template-rows: auto auto;
			gap: 14px;
		}
		.header-icon {
			font-size: 46px; /* Die Größe vom Burger */
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding-top: 4px;
		}
		.header-text {
			grid-column: 2 / 3; /* Bleibt bei Spalte 2 */
		}
		.header-text h1 {
			font-size: 2.2rem;
			margin: 0 0 8px;
			line-height: 1.2;
		}
		.header-text p {
			font-size: 0.9rem;
			line-height: 1.4;
			margin: 0;
		}

		.header-bottom-row {
			grid-column: 1 / 4; /* Spannt nun über ALLE 3 Spalten */
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 14px;
			padding-top: 14px;
		}
		#burgerCountDisplay {
			grid-column: 1 / 2; /* Linke Hälfte */
			text-align: left;
		}
		.mobile-category-tag {
			display: none; /* nur auf Mobile sichtbar, siehe Media Query */
		}
        /* FILTER-BAR GRID */
		.header-bottom-row .search-input {
			max-width: 220px;
		}
		.filter-bar {
			grid-column: unset;
			justify-self: unset;
			margin-bottom: 0;
			width: 300px; /* Platz für Dropdown + Karte-Button in einer Reihe */
			display: flex;
			align-items: center;
			gap: 8px;
		}
        .sort-select {
            flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: #20202a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23c9915a'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
            background-position: right 20px center;
            border: 1px solid var(--border); padding: 12px 16px; border-radius: 6px; color: white;
            font-size: 0.9rem; padding-left: 20px; cursor: pointer; appearance: none; -webkit-appearance: none;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
        }
        .sort-select:focus { outline: none; border-color: var(--primary); }

        /* Natives <select> kann keine Icons in <option> zeigen - das native Element bleibt
           (visuell versteckt) für die JS-Logik bestehen, daneben steht dieses Custom-Widget. */
        .visually-hidden-select {
            position: absolute !important;
            width: 1px; height: 1px;
            padding: 0; margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        }
        .custom-select-wrap {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
        }
        .custom-select-btn {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 8px;
            background: #20202a;
            border: 1px solid var(--border);
            padding: 12px 16px;
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;
            cursor: pointer;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
            text-align: left;
        }
        .custom-select-btn span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .custom-select-btn::after {
            content: '';
            flex-shrink: 0;
            width: 0; height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #c9915a;
            transition: transform 0.15s ease;
        }
        .custom-select-btn.is-open::after { transform: rotate(180deg); }
        .custom-select-btn:hover { border-color: var(--primary); }
        .custom-select-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background: #20202a;
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.35);
            z-index: 50;
            overflow: hidden;
        }
        .custom-select-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            font-size: 0.88rem;
            color: var(--text);
            cursor: pointer;
        }
        .custom-select-option:hover { background: rgba(201,138,69,0.12); }
        .custom-select-option.is-selected { color: var(--primary); font-weight: 600; }

        /* === Split-Map Ansicht (nur Kategorieseiten: Burger/Pizza/Café/Restaurants) === */
        .btn-map-split-toggle {
            flex: 0 0 auto;
            width: auto;
            white-space: nowrap;
            padding: 12px 16px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: #20202a;
            color: #fff;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .btn-map-split-toggle:hover {
            border-color: var(--primary);
        }
        .btn-map-split-toggle.is-active {
            background: var(--primary);
            color: #16171c;
            border-color: var(--primary);
        }
        .category-split-map {
            display: none;
        }
        body.map-split-open .main-content {
            max-width: none;
            width: 100%;
            box-sizing: border-box;
        }
        body.map-split-open .category-split-layout {
            display: flex;
            align-items: flex-start;
            gap: 24px;
        }
        body.map-split-open .category-split-list {
            flex: 1 1 auto;
            min-width: 0;
        }
        body.map-split-open .category-split-map {
            display: block;
            flex: 0 0 46vw;
            max-width: 46vw;
            position: sticky;
            top: 96px;
            height: calc(100vh - 116px);
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 8px 24px rgba(0,0,0,0.35);
            animation: slideInMapPanel 0.32s ease;
        }
        @keyframes slideInMapPanel {
            from { transform: translateX(40px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        #categorySplitMap {
            width: 100%;
            height: 100%;
        }
        #categorySplitMap .leaflet-marker-icon.map-marker-highlighted {
            filter: hue-rotate(200deg) saturate(3) drop-shadow(0 0 6px rgba(255,255,255,0.9));
            transform-origin: center bottom;
            z-index: 1000 !important;
        }
        .post-card.is-map-highlighted {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary);
        }

        /* === Umkreissuche ("in der Nähe von...") - Pin-Button + Popover neben dem Suchfeld,
           per JS auf jeder Seite mit einem Suchfeld eingefügt (siehe initLocationFilterWidget) === */
        /* Suchfeld + Pin-Button gemeinsam wie EIN Bedienelement (Kategorieseiten) */
        .search-input-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .search-input-wrap .icon-search {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            font-size: 1.1rem;
        }
        .search-input-wrap .search-input {
            max-width: 220px;
        }
        .loc-filter-btn {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: #20202a;
            color: var(--text);
            font-size: 1.05rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s, background 0.2s;
        }
        .loc-filter-btn:hover { border-color: var(--primary); }
        .loc-filter-btn.is-active {
            background: var(--primary);
            border-color: var(--primary);
        }
        /* position:fixed statt absolute - .page-header/.search-bar haben overflow:hidden und
           würden ein verschachteltes Popover abschneiden. Top/Left werden per JS (positionPanel)
           anhand der Button-Position gesetzt. */
        .loc-filter-panel {
            position: fixed;
            z-index: 3000;
            width: 260px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        .loc-filter-label {
            display: block;
            font-size: 0.78rem;
            color: var(--text-light);
            margin: 10px 0 6px;
        }
        .loc-filter-label:first-child { margin-top: 0; }
        .loc-filter-input {
            width: 100%;
            box-sizing: border-box;
            background: #20202a;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px 12px;
            color: white;
            font-size: 0.9rem;
        }
        .loc-filter-input:focus { outline: none; border-color: var(--primary); }
        .loc-filter-mylocation {
            width: 100%;
            margin-top: 8px;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: #20202a;
            color: var(--text);
            font-size: 0.82rem;
            cursor: pointer;
            text-align: left;
        }
        .loc-filter-mylocation:hover { border-color: var(--primary); }
        .loc-filter-slider {
            width: 100%;
            accent-color: var(--primary);
            cursor: pointer;
        }
        .loc-filter-status {
            font-size: 0.76rem;
            color: var(--text-light);
            min-height: 14px;
            margin: 8px 0 0;
        }
        .loc-filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 10px;
        }
        .loc-filter-apply {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            background: var(--primary);
            color: #16171c;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
        }
        .loc-filter-apply:hover { background: var(--primary-hover); }
        .loc-filter-clear {
            padding: 8px 16px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-light);
            font-size: 0.85rem;
            cursor: pointer;
        }
        .loc-filter-clear:hover { border-color: var(--danger); color: var(--danger); }

        /* === Melden/Einspruch-Dialog (siehe window.openReportDialog in burger-app.js) === */
        .report-dialog-overlay {
            position: fixed;
            inset: 0;
            background: rgba(10, 10, 14, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 4000;
            padding: 20px;
            box-sizing: border-box;
        }
        .report-dialog {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 22px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 12px 32px rgba(0,0,0,0.45);
        }
        .report-dialog-hint {
            color: var(--text-light);
            font-size: 0.85rem;
            margin: 0 0 12px;
            line-height: 1.5;
        }
        .report-dialog textarea {
            width: 100%;
            box-sizing: border-box;
            background: #20202a;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 12px;
            color: white;
            font-family: inherit;
            font-size: 0.9rem;
            resize: vertical;
        }
        .report-dialog textarea:focus { outline: none; border-color: var(--primary); }
        .report-dialog-status {
            font-size: 0.82rem;
            min-height: 16px;
            margin: 8px 0 0;
        }
        .report-dialog-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 14px;
        }

        .follow-list-dialog {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            width: 100%;
            max-width: 380px;
            max-height: 70vh;
            display: flex;
            flex-direction: column;
        }
        .follow-list-title { margin: 0 0 14px; font-size: 1.05rem; }
        .follow-list-items { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: -4px; padding: 4px; }
        .follow-list-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 6px;
            border-radius: 8px;
            text-decoration: none;
            color: var(--text);
        }
        .follow-list-row:hover { background: rgba(255,255,255,0.04); }
        .follow-list-avatar {
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--primary); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
            background-size: cover; background-position: center;
        }
        .follow-list-username { font-weight: 600; font-size: 0.9rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .follow-list-unfollow-btn {
            flex-shrink: 0;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-light);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
        }
        .follow-list-unfollow-btn:hover { color: var(--danger); border-color: var(--danger); }
        .follow-list-empty { color: var(--text-light); font-size: 0.85rem; text-align: center; padding: 20px 0; }

		.main-content {
			padding-top: 40px; 
		}
		
		/* --- BOTTOM-NAV (nur mobil sichtbar) --- */
		.bottom-nav {
			display: none;
		}

		/* --- HANDY-ANPASSUNG --- */
		
        /* HAUPTBEREICH STYLES */
        .main-content {
			margin: 0 auto;           /* Zentriert den Inhalt perfekt in der Mitte */
			padding: 80px 20px 40px;  /* 80px Platz nach oben für die Topbar */
			max-width: 1200px;        /* Maximalbreite bleibt erhalten */
			width: 95%;               /* Nimmt auf kleinen Bildschirmen 95% Breite ein */
			box-sizing: border-box;
		}
		/* Folgt der Content direkt auf den Kategorie-Header (Burger/Pizza/Café/Restaurants), braucht
		   er die 80px Topbar-Abstand nicht extra - der Header hat ja schon selbst margin-top:60px
		   dafür. Deutlich weniger Abstand, damit es näher am Header dran ist. */
		.page-header + .main-content {
			padding-top: 8px;
		}
		.topbar-btn-outline,
		.topbar-btn-primary {
			padding: 9px 20px;
			border-radius: 6px;
			font-weight: 600;
			font-size: 0.9rem;
			cursor: pointer;
			white-space: nowrap;
			transition: all 0.2s ease;
			line-height: 1.2;
		}
		.topbar-btn-outline {
			background: transparent;
			color: var(--text);
			border: 1px solid var(--border-strong);
		}
		.topbar-btn-outline:hover {
			border-color: var(--text-light);
		}
		.topbar-btn-primary {
			background: var(--primary);
			color: #ffffff;
			border: none;
		}
		.topbar-btn-primary:hover {
			background: var(--primary-hover);
		}
		@media (max-width: 640px) {
			.topbar-btn-outline, .topbar-btn-primary { padding: 8px 12px; font-size: 0.85rem; }
		}

		.profile-menu-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			gap: 4px;
		}
		.topbar-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: var(--primary);
			color: #fff;
			text-decoration: none;
			font-weight: 700;
			font-size: 1.05rem;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: box-shadow 0.2s ease;
		}
		.topbar-avatar:hover {
			box-shadow: 0 0 0 3px rgba(226, 150, 47, 0.3);
		}
		.profile-hover-dropdown {
			position: absolute;
			top: calc(100% + 12px);
			right: 0;
			min-width: 220px;
			background: var(--bg);
			border: 1px solid var(--border);
			border-radius: 10px;
			box-shadow: 0 10px 25px rgba(0,0,0,0.5);
			padding: 14px;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-8px);
			transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
			z-index: 1001;
		}
		.profile-menu-wrapper:hover .profile-hover-dropdown,
		.profile-menu-wrapper.is-open .profile-hover-dropdown {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
		.profile-hover-header {
			font-size: 0.85rem;
			color: var(--text-light);
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid var(--border);
		}
		.profile-hover-header b {
			color: var(--text);
			font-size: 0.95rem;
		}
		.profile-hover-link {
			display: block;
			color: var(--text);
			text-decoration: none;
			font-size: 0.9rem;
			padding: 8px 4px;
			border-radius: 6px;
			transition: background 0.15s ease;
		}
		.profile-hover-link:hover {
			background: #20202a;
		}
		.profile-hover-link-icon {
			width: 14px;
			height: 14px;
			vertical-align: -2px;
			margin-right: 3px;
		}
		.profile-hover-logout {
			display: block;
			text-align: center;
			color: var(--danger);
			text-decoration: none;
			font-size: 0.85rem;
			margin-top: 8px;
			padding: 8px;
			border: 1px solid var(--danger);
			border-radius: 6px;
			transition: background 0.15s ease;
		}
		.profile-hover-logout:hover {
			background: rgba(255, 71, 87, 0.1);
		}
        /* GEMEINSAME ELEMENTE */
        .btn-toggle, .btn-small {
            background-color: var(--primary); color: #ffffff; border: none; padding: 12px 24px;
            border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
            width: 100%; box-sizing: border-box;
        }
        .btn-toggle:hover { background-color: var(--primary-hover); transform: none; }
        
        .btn-danger {
            background-color: transparent; color: var(--danger); border: 1px solid var(--danger); padding: 12px 24px;
            border-radius: 6px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
            width: 100%; box-sizing: border-box;
        }
        .btn-danger:hover { background-color: rgba(255, 71, 87, 0.12); transform: none; }

        /* "Als Entwurf speichern" - bewusst deutlich anders als der primäre Speichern-Button
           (gestrichelter Rand, gedämpfte Farbe), damit man beide nicht verwechselt. */
        .btn-save-draft {
            background-color: transparent; color: var(--text-light); border: 1px dashed var(--border);
            padding: 12px 24px; border-radius: 6px; font-weight: 500; cursor: pointer;
            transition: all 0.2s ease; width: 100%; box-sizing: border-box; margin-top: 10px;
        }
        .btn-save-draft:hover { background-color: rgba(255,255,255,0.04); border-color: var(--text-light); color: var(--text); }
        .btn-save-draft:disabled { opacity: 0.6; cursor: default; }

        .card {
            background: var(--card-bg); border-radius: 10px; padding: 25px;
            margin-bottom: 25px; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }

        .hidden { display: none !important; }
        
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
        
        .form-group { display: flex; flex-direction: column; margin-bottom: 10px; }
        .form-group label { font-size: 0.85rem; color: var(--text-light); margin-bottom: 5px; }
        .form-group input, .form-group textarea { background: #20202a; border: 1px solid var(--border); padding: 12px; border-radius: 6px; color: white; font-family: inherit; }
        
        .rating-section { background: #20202a; padding: 15px; border-radius: 6px; margin-bottom: 15px; }
        .rating-title { font-size: 0.9rem; color: var(--primary); font-weight: bold; margin-bottom: 5px; text-transform: uppercase; }
        .rating-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
        
        .stars { display: flex; flex-direction: row-reverse; }
        .stars input { display: none; }
        .stars label { font-size: 1.4rem; color: #4a4a5a; cursor: pointer; padding: 0 3px; }
        .stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--primary); }
        
		.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--card-bg); padding: 35px; border-radius: 10px; max-width: 950px; width: 85%; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); position: relative; }

/* --- Login/Registrierung-Popup (#authModal) - zweispaltig: links Branding/Bild/Vorteile auf
   dunklerem Hintergrund, rechts das Formular auf normaler Karten-Hintergrundfarbe. Ersetzt padding
   von .modal-content komplett durch 0, da beide Spalten selbst bis an den Rand gehen sollen. */
.auth-modal-content {
    padding: 0;
    max-width: 880px;
    width: 92%;
    overflow: hidden;
}
.auth-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}
.auth-modal-side {
    background: #07090b;
    padding: 32px 34px;
    display: flex;
    flex-direction: column;
}
.auth-modal-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 26px;
}
.auth-modal-logo-pin { width: 34px; height: 34px; object-fit: contain; }
.auth-modal-heading {
    font-size: 1.7rem;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--text);
}
.auth-modal-subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 20px;
}
.auth-modal-illustration {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 22px;
    display: block;
    object-fit: cover;
    max-height: 190px;
}
.auth-modal-features { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.auth-modal-feature { display: flex; align-items: flex-start; gap: 12px; }
.auth-modal-feature-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: rgba(201, 138, 69, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-modal-feature-icon .icon-img { width: 16px; height: 16px; }
.auth-modal-feature strong { display: block; color: var(--text); font-size: 0.88rem; margin-bottom: 2px; }
.auth-modal-feature p { margin: 0; color: var(--text-light); font-size: 0.78rem; line-height: 1.4; }

.auth-modal-form-col {
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-modal-form-col .form-group { margin-bottom: 14px; }
.auth-modal-form-col .form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
}
.auth-password-wrap { position: relative; display: flex; align-items: center; }
.auth-password-wrap input { padding-right: 42px !important; }
.auth-password-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
.auth-password-eye:hover { color: var(--text); }
.auth-password-eye.is-visible { color: var(--primary); }
.auth-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 18px;
    font-size: 0.8rem;
}
.auth-remember-label { display: flex; align-items: center; gap: 6px; color: var(--text-light); cursor: pointer; }
.auth-remember-label input { width: auto; margin: 0; }
.auth-modal-row a { color: var(--text-light); text-decoration: none; }
.auth-modal-row a:hover { color: var(--primary); }
.auth-submit-btn { border-radius: 8px; padding: 12px; font-size: 0.95rem; }
.auth-modal-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    margin: 18px 0;
}
.auth-modal-divider::before, .auth-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-modal-divider span { padding: 0 12px; }
.auth-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #20202a;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 11px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-oauth-btn:hover { background: #262632; border-color: var(--border-strong); }
.auth-modal-toggle-text { text-align: center; margin: 16px 0 0; font-size: 0.82rem; }
.auth-modal-toggle-text a { color: var(--text-light); text-decoration: none; }
.auth-modal-toggle-text a:hover { color: var(--primary); }
.auth-modal-forgot-heading { margin: 0 0 8px; color: var(--primary); font-size: 1.15rem; }
.auth-modal-forgot-text { color: var(--text-light); font-size: 0.85rem; margin: 0 0 18px; line-height: 1.5; }

@media (max-width: 720px) {
    .auth-modal-grid { grid-template-columns: 1fr; min-height: 0; }
    .auth-modal-side { display: none; }
    .auth-modal-form-col { padding: 30px 22px; }
}

/* --- Lade-Overlay während des Speicherns (Item/Entwurf/Unternehmen) --- */
.saving-overlay { z-index: 2000; } /* über allen anderen Modals/Dropdowns */
.saving-overlay-content {
    text-align: center;
    padding: 38px 40px;
    max-width: 320px;
    width: auto;
}
.saving-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: savingSpin 0.8s linear infinite;
}
@keyframes savingSpin {
    to { transform: rotate(360deg); }
}
.saving-overlay-text { margin: 0 0 6px; font-weight: 600; color: var(--text); font-size: 1rem; }
.saving-overlay-subtext { margin: 0; font-size: 0.8rem; color: var(--text-light); line-height: 1.4; }

/* --- Item-Modal (Detailansicht eines Spots) --- */
/* Desktop: Bild links, Titel/Sterne/Buttons rechts daneben - beides in einer Reihe.
   Quickfacts/Bewertungen/Karte/Footer folgen darunter in voller Breite (siehe .im-body). */
.im-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 22px;
    align-items: stretch;
}
.im-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.im-hero {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.im-hero-img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    background-color: #333;
}
.im-hero .rank-badge {
    top: 15px;
    left: 15px;
}
/* Speichern-Button als reines Icon, direkt neben Liken in der Aktionsreihe (statt Text-Tile oder
   Kreis-Icon über dem Bild) - eckig/leicht abgerundet wie alle anderen Action-Buttons im Stil der
   Seite, nur ohne Label. Gilt sowohl im Item-Popup (.im-actions) als auch auf der
   Unternehmensseite (.biz-header-actions, dort zusätzlich mit .im-action-btn-compact kombiniert). */
.im-action-btn-iconly {
    flex: 0 0 auto;
}
.im-action-btn-iconly svg {
    width: 16px;
    height: 16px;
}
.im-action-btn-iconly.is-active { border-color: var(--primary); color: var(--primary); }
.im-hero-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 6px;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
    overflow-x: auto;
}
.im-hero-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #333;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}
.im-hero-thumb.is-active { border-color: var(--primary); }
.im-hero-thumb:hover { border-color: rgba(255,255,255,0.6); }
.im-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.im-title {
    margin: 0;
    font-size: 1.6rem;
    color: var(--text);
}
.im-category {
    margin: 2px 0 0;
    color: var(--text-light);
    font-size: 0.95rem;
}
.im-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    color: var(--text-light);
}
.im-stars { display: inline-flex; gap: 3px; }
.im-star { color: #4a4a5a; font-size: 1.5rem; }
.im-star.filled { color: var(--primary); }
.im-rating-row strong { color: var(--text); font-size: 1.2rem; }

.im-actions {
    /* War ein Grid mit großen quadratischen Kacheln (Icon oben, Label darunter) - deutlich
       dezenter/kompakter als schlichte Reihe kleiner Pillen, wie auf der Unternehmensseite. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.im-action-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.im-action-icon {
    font-size: 1rem;
    line-height: 1;
}
.im-action-label {
    line-height: 1;
}
.im-action-btn:hover { border-color: var(--border-strong, #4a4a5a); }
.im-action-btn.is-active { border-color: var(--primary); color: var(--primary); }
.im-action-btn-primary {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(201,138,69,0.08);
}
.im-action-btn-primary:hover { background: rgba(201,138,69,0.16); }

.im-quickfacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.im-quickfact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.im-qf-icon { font-size: 1.2rem; flex-shrink: 0; }
.im-qf-label { display: block; font-size: 0.72rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.03em; }
.im-qf-value { display: block; font-size: 0.92rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.biz-qf-rating { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.biz-qf-rating .im-stars { font-size: 0.85rem; }
.biz-qf-score { color: var(--primary); font-size: 1.84rem; font-weight: 400; line-height: 1.1; }
.biz-qf-count { color: var(--text-light); font-weight: 400; font-size: 0.75rem; }
.biz-qf-price-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.biz-qf-price-tier { color: var(--primary); font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.biz-qf-price-range { color: var(--text-light); font-weight: 400; font-size: 0.75rem; }
.biz-qf-categories-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.biz-qf-category-icons { font-size: 1.2rem; display: flex; gap: 4px; justify-content: center; }
/* Eigene Quickfact-Spalte für die Unternehmen-Kriterien (Service/Ambiente/...), rechts neben
   der Sterne-Bewertung, auf einer Höhe mit Preisniveau/Kategorie - dieselbe Idee wie die
   Detail-Bewertungen im Item-Modal, nur kompakter für die schmale Spaltenbreite. */
.biz-quickfacts-cols { grid-template-columns: repeat(5, 1fr); }
/* Alle Spalten (Bewertung/Balken/Score/Preis/Kategorie) einheitlich mittig zentriert. */
.biz-quickfacts-cols .im-quickfact { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
/* Klickbar - öffnet das "So entsteht der Score"-Overlay (siehe openScoreExplainerModal) */
.biz-qf-spotrank-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; cursor: pointer; }
.biz-qf-spotrank-label { color: var(--text-light); text-align: center; text-transform: none; }
.biz-qf-spotrank-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.biz-qf-spotrank-wrap:hover .biz-qf-spotrank-circle {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(201,138,69,0.18);
    background: rgba(201,138,69,0.08);
}
.biz-qf-spotrank-wrap:hover .biz-qf-spotrank-label { color: var(--primary); }
.biz-qf-spotrank-score-value { color: var(--primary); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.biz-qf-spotrank-score-max { color: var(--text-light); font-size: 0.6rem; line-height: 1; margin-top: 1px; }
.biz-qf-spotrank-tier { font-size: 0.8rem; font-weight: 700; text-align: center; }
.biz-qf-spotrank-tier.is-excellent { color: var(--success); }
.biz-qf-spotrank-tier.is-verygood { color: #f1c40f; }
.biz-qf-spotrank-tier.is-good { color: #e67e22; }
.biz-qf-spotrank-percentile { font-size: 0.68rem; color: var(--text-light); text-align: center; line-height: 1.3; }
.biz-qf-bars { width: 100%; display: flex; flex-direction: column; gap: 6px; justify-content: center; height: 100%; }
.biz-qf-bar-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-light); }
.biz-qf-bar-label { width: 60px; flex-shrink: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-qf-bar-track { flex: 1; height: 6px; background: #262932; border-radius: 6px; overflow: hidden; }
.biz-qf-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; }
.biz-qf-bar-value { width: 24px; flex-shrink: 0; text-align: right; }
.biz-header-actions .btn-toggle { color: #1a1a1a; }

/* --- "So entsteht der Score"-Overlay (Klick auf den SpotRank-Score im Unternehmensprofil,
   oder Hinweislink auf der Startseite) --- */
.score-explainer-content { max-width: 400px; padding: 32px 28px; text-align: center; }
.score-explainer-badge {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.score-explainer-intro { color: var(--text); font-size: 0.88rem; line-height: 1.6; margin: 0 0 20px; text-align: left; }
.score-explainer-scorerow { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 6px; }
.score-explainer-scorenum { font-size: 3.2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.score-explainer-scoremax { font-size: 1.1rem; color: var(--text-light); font-weight: 600; }
.score-explainer-subtitle { color: var(--text-light); font-size: 0.85rem; margin: 0 0 22px; text-align: left; }
.score-explainer-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.score-explainer-bar-row { display: flex; align-items: center; gap: 10px; }
.score-explainer-bar-label { width: 110px; flex-shrink: 0; text-align: left; font-size: 0.82rem; color: var(--text); }
.score-explainer-bar-track { flex: 1; height: 8px; background: #262932; border-radius: 6px; overflow: hidden; }
.score-explainer-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; }
.score-explainer-bar-value { width: 30px; flex-shrink: 0; text-align: right; font-size: 0.82rem; color: var(--text-light); }
.score-explainer-footnote { text-align: left; font-size: 0.78rem; color: var(--text-light); line-height: 1.5; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }

/* Hinweislink unter dem Hero-Text auf der Startseite */
.hero-score-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--text-light);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.hero-score-hint:hover { color: var(--primary); }

.im-details-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: stretch;
}
/* Auf der Unternehmensseite: "Über diesen Spot" schmäler, "Standort & Öffnungszeiten" breiter,
   da dort zusätzlich die Karte Platz braucht. */
.biz-page-content .im-details-grid {
    grid-template-columns: 0.8fr 1.3fr;
}
@media (max-width: 900px) {
    .biz-page-content .im-details-grid { grid-template-columns: 1fr; }
}
.im-panel-title { margin: 0 0 12px; font-size: 1rem; color: var(--text); }

/* Gemeinsamer grauer Kasten-Stil für Detail-Bewertungen, Kurzfazit und Standort */
.im-panel-box {
    background: #20202a;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.im-rating-bars { display: flex; flex-direction: column; gap: 10px; }
.im-rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-light); }
.im-rbr-label { width: 130px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.im-rating-bar-track { flex: 1; height: 8px; background: #262932; border-radius: 6px; overflow: hidden; }
.im-rating-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; }
.im-rbr-value { width: 32px; text-align: right; color: var(--text); font-weight: 600; }

.im-rating-chips { display: none; }

.im-quote-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.im-quote-mark { font-size: 1.6rem; color: var(--primary); line-height: 1; }
.im-quote-text { margin: -8px 0 0; font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.im-quote-author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.im-quote-author:hover span { text-decoration: underline; text-underline-offset: 2px; }
.im-quote-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
    background-size: cover; background-position: center;
}
.im-quote-author span { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.im-add-review-link {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.im-add-review-link:hover { color: var(--primary-hover); }

.im-map-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); position: relative; }
/* Karten dezent an das dunkle Design angleichen: nur abgedunkelt/entsättigt (kein Farbumkehr-Hack
   mehr, der komisch aussah) + ein leichter dunkler Schleier drüber. Gilt einheitlich für die
   eingebetteten OSM-Vorschauen (iframe: Item-Modal, Unternehmensseite, Adress-Vorschlagsliste)
   UND für die echten Leaflet-Kacheln (große Karte, Standort-Picker) - dasselbe Rezept überall,
   damit es auf jeder Seite gleich aussieht. */
iframe[src*="openstreetmap.org/export/embed"],
.leaflet-tile-pane {
    filter: grayscale(0.55) brightness(0.72);
}
/* Leaflets Standard-Pin einfach in Gelb einfärben statt eines eigenen Icon-Designs. */
.leaflet-marker-icon {
    filter: hue-rotate(200deg) saturate(3);
}
.im-map-frame::after,
.leaflet-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.28);
    pointer-events: none;
    z-index: 2;
}
.im-map-expand {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 0.95rem;
}
.im-map-link { display: inline-block; margin-top: 8px; font-size: 0.8rem; color: var(--primary); text-decoration: none; }

/* --- Unternehmensseite (unternehmen.php) - eigene Profilseite statt Karte im Modal --- */
/* Dunkler Karten-Hintergrund für den gesamten Seiteninhalt, damit Elemente ohne eigene
   graue Box (Name, Kontaktzeile, Quickfacts...) nicht frei auf dem Seitenhintergrund schweben. */
.biz-page-content {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 24px;
    padding-top: 0;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    /* .main-content liefert auf Handy schon 15px Rand-Abstand - hier nicht nochmal draufpacken,
       sonst wird der Inhalt unnötig schmal/gequetscht. Nur oben/unten etwas Luft lassen. */
    .biz-page-content { padding: 0 0 16px; border-radius: 10px; }
}
/* Vollbreiter Banner: bricht per vw-Trick aus der zentrierten, breitenbegrenzten
   .main-content/.biz-page-content aus und spannt sich über die komplette Bildschirmbreite,
   direkt unter der Topbar. */
.biz-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    height: 260px;
    background-size: cover;
    background-position: center;
    background-color: #333;
    margin-bottom: 14px;
}
/* Innerer Wrapper im Banner, auf dieselbe Breite/Zentrierung wie der restliche Content begrenzt -
   damit Logo & Name (die im Banner überlappen) trotz Vollbild-Banner an derselben Stelle sitzen
   wie der Rest des Seiteninhalts, statt links am Bildschirmrand zu kleben. */
.biz-banner-inner {
    max-width: 1200px;
    width: 95%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
/* Schatten-Übergang: blendet vom Headerbild sanft in den Kartenhintergrund über,
   statt hart abzuschneiden. */
.biz-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--card-bg) 100%);
    pointer-events: none;
    z-index: 1;
}
.biz-logo {
    position: absolute;
    left: 24px;
    bottom: -50px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    border: 5px solid var(--card-bg);
    background-size: cover;
    background-position: center;
    z-index: 2;
}
.biz-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: -55px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}
/* Name/Tagline/Bewertung stehen rechts neben dem überlappenden Logo, nicht darunter -
   padding-left schiebt den Text so weit rein, dass er neben dem Logo beginnt. min-height +
   flex/justify-content:center sorgen dafür, dass die Spalte IMMER genug Höhe reserviert (so viel
   wie mit Premium-Badge + Tagline) - sonst rutscht ohne die beiden (kürzerer Inhalt = kürzere
   Zeile/Block) alles Nachfolgende (z.B. der Standort in .biz-contact-row) hoch und verschwindet
   unter dem überlappenden Logo. */
.biz-name-col {
    padding-left: 164px;
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
@media (max-width: 768px) {
    /* Kleineres Logo auf Handy (100px + 24px Abstand vom Rand) - Name rutscht direkt daneben,
       genau wie am PC, statt weit darunter zu landen. */
    .biz-name-col { padding-left: 124px; margin-top: 0; min-height: 50px; }
}
.biz-name { margin: 0; font-size: 1.7rem; color: var(--text); }
.biz-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--text-light);
    font-size: 0.95rem;
}
.biz-header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.biz-header-actions .im-action-btn {
    flex-direction: row;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.75rem;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
}
.biz-header-actions .im-action-btn .im-action-icon { font-size: 1rem; }
.biz-header-actions .im-action-btn-compact { padding: 0 11px; }
.biz-header-actions .btn-toggle { font-size: 0.85rem; }
.biz-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 20px;
    color: var(--text-light);
    font-size: 0.9rem;
}
.biz-contact-row a { color: var(--text-light); text-decoration: none; }
.biz-contact-row a:hover { color: var(--primary); }
.biz-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 4px 0;
    color: var(--text-light);
}
.biz-hours-row strong { color: var(--text); font-weight: 600; }
.biz-open-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    margin-left: 6px;
    vertical-align: middle;
}
.biz-open-status.is-open { color: var(--success); }
.biz-open-status.is-closed { color: var(--danger); }

/* Kompakte Öffnungszeiten-Anzeige (Unternehmensseite): klickbare Pille mit Status + Uhrzeit und
   farbiger Umrandung - Klick öffnet das angedockte Popover mit allen 7 Tagen (siehe
   openHoursPopover/.biz-hours-popover in burger-app.js). */
.biz-hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201, 138, 69, 0.08);
    border: 1px solid var(--primary);
    color: var(--text);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
}
.biz-hours-badge:hover {
    background: rgba(201, 138, 69, 0.16);
    transform: translateY(-1px);
}
.biz-hours-badge img { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.biz-hours-badge-text { font-weight: 600; }
.biz-hours-badge.is-closed {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.03);
}
.biz-hours-badge.is-closed .biz-hours-badge-text { color: var(--text-light); }
.biz-hours-badge-chevron {
    color: var(--primary);
    font-size: 1.05rem;
    line-height: 1;
    margin-left: 2px;
}

/* Popover mit allen 7 Tagen - dieselbe fixed+JS-Positionierung wie .loc-filter-panel, direkt an
   <body> gehängt statt verschachtelt (sonst von overflow:hidden-Eltern abgeschnitten). */
.biz-hours-popover {
    position: fixed;
    z-index: 1200;
    width: 280px;
    max-width: calc(100vw - 20px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.biz-hours-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}
.biz-hours-popover-close {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px;
    line-height: 1;
}
.biz-hours-popover-close:hover { color: var(--text); }
.biz-hours-popover-note {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0 0 10px;
}
.biz-hours-popover-list .biz-hours-row { padding: 5px 0; }

/* === Öffnungszeiten-Editor (Unternehmen anlegen/bearbeiten) - siehe buildOpeningHoursEditorHtml
   in burger-app.js === */
.hours-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hours-day-row {
    background: #20202a;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.hours-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hours-day-header strong { font-size: 0.88rem; color: var(--text); }
.hours-closed-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-light);
    cursor: pointer;
}
.hours-closed-toggle input { width: auto; }
.hours-spans-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.hours-span-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hours-span-row input[type="time"] {
    background: #16171c;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    color: white;
    font-family: inherit;
    font-size: 0.85rem;
}
.hours-span-sep { color: var(--text-light); }
.hours-span-remove {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
}
.hours-span-remove:hover { color: var(--danger); }
.hours-span-add {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--primary);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    margin-top: 2px;
}
.hours-span-add:hover { border-color: var(--primary); }

/* === Öffnungszeiten-Filter-Popover (siehe initOpeningHoursFilterWidget in burger-app.js) === */
.hours-filter-radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text);
    padding: 6px 0;
    cursor: pointer;
}
.hours-filter-radio-row input { width: auto; }
.hours-filter-custom-fields {
    display: flex;
    gap: 8px;
    margin: 6px 0 4px;
}
.hours-filter-custom-fields .loc-filter-input { flex: 1 1 auto; }
.biz-review-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.biz-review-item:last-child { border-bottom: none; }
.biz-review-header { display: flex; align-items: center; gap: 10px; }
.biz-review-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
    background-size: cover; background-position: center;
}
.biz-review-username { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.biz-review-stars { color: var(--primary); font-size: 0.9rem; }
.biz-review-comment { margin: 0; color: var(--text); font-size: 0.9rem; line-height: 1.5; }
.biz-empty-reviews { color: var(--text-light); font-size: 0.9rem; text-align: center; padding: 20px 0; }

/* Aufklappbare Bewertungen: Klick auf den Header zeigt die Kriterien-Aufschlüsselung darunter -
   genau wie bei den Detail-Bewertungen bei Items, nur eben pro einzelner Unternehmens-Bewertung. */
.biz-review-item-expandable .biz-review-header { cursor: pointer; }
.biz-review-expand-arrow {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-left: 6px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.biz-review-expand-arrow.is-open { transform: rotate(180deg); }
.biz-review-detail {
    margin-top: 4px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.biz-review-price-note { margin: 10px 0 0; color: var(--text-light); font-size: 0.82rem; }

/* Fotos, die ein Nutzer seiner Bewertung beigefügt hat - kleine Thumbnails, Klick öffnet das
   Originalbild in einem neuen Tab. */
.biz-review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
.biz-review-photo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
    display: block;
}

/* Premium-Spot-Badge (nur vom Admin setzbar) - Chip direkt über dem Namen */
.biz-premium-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(201,138,69,0.16);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.76rem;
    padding: 5px 11px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.biz-premium-badge-placeholder { visibility: hidden; }

.profile-stat-box-clickable {
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.profile-stat-box-clickable:hover {
    border-color: var(--primary) !important;
    background: rgba(201,138,69,0.08);
    transform: translateY(-2px);
}

.notif-bell-wrapper { position: relative; display: flex; align-items: center; }
.notif-bell-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.08); }
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.notif-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    max-width: min(340px, calc(100vw - 24px));
    max-height: 420px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 1200;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.notif-dropdown.is-open { display: flex; }
.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.notif-mark-all-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
}
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-item.is-unread { background: rgba(201,138,69,0.08); }
.notif-item-text { flex: 1; font-size: 0.83rem; line-height: 1.4; min-width: 0; }
.notif-item-time { font-size: 0.72rem; color: var(--text-light); margin-top: 3px; display: block; }
.notif-item-delete {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    line-height: 1;
}
.notif-item-delete:hover { color: var(--danger); }
.notif-empty { color: var(--text-light); font-size: 0.85rem; text-align: center; padding: 30px 14px; margin: 0; }
@media (max-width: 640px) {
    .notif-dropdown { right: -60px; }
}
.biz-tagline { margin: 4px 0 0; color: var(--text-light); font-size: 0.88rem; }

/* Liken/Teilen kompakt (nur Icon, Beschriftung als Tooltip) - Bewertung abgeben/Speichern
   bleiben die Hauptaktionen und behalten ihre normale Größe. */
.im-action-btn-compact { flex-direction: row; padding: 10px 14px; gap: 0; }
.im-action-btn-compact .im-action-icon { font-size: 1.1rem; }
.im-action-btn-compact .im-action-label { display: none; }
/* Ausnahme: der Liken-Button auf der Unternehmensseite ist zwar "compact", soll aber die
   Like-Anzahl sichtbar zeigen (nicht nur als Hover-Tooltip) - genau wie beim Item-Modal. */
#bizLikeBtn.im-action-btn-compact .im-action-label { display: inline; margin-left: 6px; }
/* Verifiziert-Haken (nur vom Admin setzbar) - direkt neben dem Namen */
.biz-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
}
.post-verified-badge.biz-verified-badge {
    width: 22px;
    height: 22px;
}

/* "Ist das dein Spot?" Claim-Banner */
.biz-claim-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(201,138,69,0.08);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.biz-claim-banner-left { display: flex; align-items: center; gap: 14px; }
.biz-claim-banner-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(201,138,69,0.16); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.biz-claim-banner-title { margin: 0; font-weight: 700; color: var(--text); font-size: 0.98rem; }
.biz-claim-banner-text { margin: 2px 0 0; color: var(--text-light); font-size: 0.82rem; }

/* Tags/Schlagworte (Halal/Vegetarisch/Vegan) als kleine Badges */
.biz-tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.biz-tag-badge {
    background: #262932;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
}

/* Zahlungsmethoden-Icons (bilder/icons/ICONS_Zahlungsmethoden) haben den Schriftzug schon
   eingebaut (z.B. "PayPal", "Apple Pay") - deshalb kein Text mehr daneben nötig. Die Grafiken
   sind aber breiter als hoch (Wortmarken statt quadratischer Icons), daher eigene Klasse statt
   .icon-img: feste Höhe, Breite passt sich automatisch an statt gequetscht zu werden. */
.payment-icon-img {
    height: 1.5em;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* Nicht akzeptierte Zahlungsart: gedämpft/rötlich markiert, damit sofort klar ist, dass dieses
   Unternehmen diese Zahlungsart NICHT anbietet. Kein text-decoration mehr möglich, da hier nur
   noch ein Icon (kein Text) steht - stattdessen Graustufen-Filter auf dem Icon selbst. */
.biz-tag-badge-unavailable {
    background: rgba(220, 76, 76, 0.08);
    border-color: rgba(220, 76, 76, 0.35);
    color: var(--text-light);
    opacity: 0.7;
}
.biz-tag-badge-unavailable .payment-icon-img {
    filter: grayscale(1);
}

/* Fotogalerie: Bilder, die Nutzer beim Bewerten der verknüpften Items hochgeladen haben */
.biz-img-preview-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.item-existing-img-chip { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.item-existing-img-chip .item-img-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-color: #2a2d36;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}
.item-existing-img-chip .item-img-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.item-existing-img-chip .item-img-delete-btn:hover { background: var(--danger-hover); }

/* Eigener, zum dunklen Theme passender Auslöse-Button für Datei-Uploads statt des altbackenen
   nativen Browser-"Datei auswählen"-Buttons. Der echte <input type="file"> bleibt technisch
   vorhanden und funktional (Klick auf das <label for="..."> öffnet ganz normal den Datei-Dialog),
   wird aber nur unsichtbar/aus dem Layout genommen statt mit display:none - manche Browser
   ignorieren Klicks auf ein Label, das zu einem display:none-Input gehört. */
.file-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #20202a;
    border: 1px dashed var(--border-strong);
    color: var(--text-light);
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}
.file-upload-btn:hover {
    background: rgba(201,138,69,0.08);
    border-color: var(--primary);
    color: var(--text);
}
.file-upload-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.biz-img-preview-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-color: #2a2d36;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.biz-items-list { display: flex; flex-direction: column; gap: 4px; }
.biz-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.biz-item-row:hover { background: rgba(255,255,255,0.04); }
.biz-item-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #2a2d36;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.biz-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.biz-item-name { font-weight: 600; color: var(--text); font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-item-meta { font-size: 0.82rem; color: var(--text-light); }
.biz-item-score { display: flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; font-size: 0.95rem; flex-shrink: 0; }
/* Etwas knapperes Innen-Padding als die übrigen im-panel-box, damit die Fotos mehr Platz im
   Kasten einnehmen und nicht so viel Rand zwischen Foto und Box-Rand entsteht. */
.biz-photos-box { padding: 4px; }
/* Flex statt Grid mit minmax: so bleiben IMMER alle Vorschaubilder in einer einzigen Reihe,
   egal wie breit die Box ist - sie werden bei Bedarf einfach gemeinsam schmaler, statt in eine
   zweite Zeile umzubrechen. */
.biz-photos-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}
.biz-photo-thumb {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* Ohne Deckel würde z.B. ein einziges Foto per flex-grow die ganze Zeilenbreite ausfüllen -
       durch aspect-ratio 1:1 wird die Box dann genauso hoch wie breit (bei einem Foto in einer
       breiten Spalte schnell 600px+). max-width/-height begrenzen das auf max. 250px, auch wenn
       nur ein einziges Foto da ist. */
    max-width: 250px;
    max-height: 250px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #20202a;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
@media (max-width: 768px) {
    /* Am Handy nicht alle Fotos in eine einzige, immer schmaler werdende Reihe zwängen - stattdessen
       auf 3 pro Reihe begrenzen (größer, besser erkennbar) und den Rest in weitere Reihen umbrechen,
       wodurch die Box bei mehr als 3 Fotos automatisch höher wird. */
    .biz-photos-grid {
        flex-wrap: wrap;
    }
    .biz-photo-thumb {
        flex: 0 0 calc((100% - 2 * 6px) / 3);
        max-width: none;
    }
}
.biz-photo-thumb:hover { opacity: 0.85; }
/* Letztes Vorschaubild, wenn es noch mehr Fotos gibt: abgedunkelt mit "+N Alle Fotos ansehen"
   statt eines separaten Textlinks über dem Raster. */
.biz-photo-thumb-more::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.6);
    border-radius: 6px;
}
.biz-photo-more-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    text-align: center;
    padding: 6px;
}
.biz-photo-more-count { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.biz-photo-more-label { font-size: 0.7rem; line-height: 1.2; }

/* Foto-Galerie & Einzelbild-Viewer (Popup) */
.biz-photo-modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
    max-width: 1000px;
    padding: 35px 20px;
}
.biz-photo-modal-title { color: var(--text); margin: 0 0 16px; text-align: center; }
.biz-photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 75vh;
    overflow-y: auto;
    padding: 4px;
}
.biz-photo-gallery-thumb { }
.biz-photo-viewer-view {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 60vh;
}
.biz-photo-viewer-img { max-width: 100%; max-height: 80vh; border-radius: 10px; object-fit: contain; }
.biz-photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.2s ease;
}
.biz-photo-nav:hover { background: rgba(0,0,0,0.8); }
.biz-photo-nav-prev { left: 0; }
.biz-photo-nav-next { right: 0; }
.biz-photo-viewer-counter {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-light);
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    .biz-photo-nav { width: 38px; height: 38px; font-size: 1.4rem; }
}

.biz-review-time { color: var(--text-light); font-size: 0.78rem; margin-left: auto; }

/* Standort-Karte: Karte links, Adresse/Öffnungszeiten/Kontakt rechts daneben */
.biz-location-split {
    display: flex;
    gap: 18px;
    align-items: stretch;
}
.biz-location-map-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.biz-location-info-col { flex: 1; min-width: 0; }
/* Karte wächst mit der Infospalte (Öffnungszeiten können lang werden) auf deren volle Höhe,
   statt auf der festen Iframe-Höhe von 180px stehen zu bleiben. */
.biz-location-map-col .im-map-frame {
    flex: 1;
    min-height: 180px;
}
.biz-location-map-col .im-map-frame iframe,
.biz-location-map-col .im-map-frame #bizLocationMapPreview {
    height: 100% !important;
}
@media (max-width: 900px) {
    .biz-location-split { flex-direction: column; }
    .biz-location-map-col .im-map-frame { flex: none; height: 220px; }
}

@media (max-width: 768px) {
    .biz-banner { height: 160px; margin-bottom: 60px; }
    .biz-logo { width: 100px; height: 100px; font-size: 2rem; bottom: -75px; left: 10px; }
    .biz-name { font-size: 1.3rem; }
    /* Name bleibt - wie am PC - direkt neben dem Profilbild statt weit darunter. Zusätzlich
       kräftiger nach oben gezogen als am PC, damit der Name-Block wie das Profilbild zur Hälfte
       ins Banner reinragt statt komplett darunter zu kleben. */
    .biz-header-row { margin-top: -85px; }
    .biz-header-actions { width: 100%; }
    .biz-header-actions .btn-toggle, .biz-header-actions .im-action-btn { flex: 1; }
    /* Icon-only Speichern-Button soll auch mobil kompakt/quadratisch bleiben statt wie die
       Text-Buttons gleichmäßig in die Breite gezogen zu werden. */
    .biz-header-actions .im-action-btn-iconly { flex: 0 0 auto; }
}

.im-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.im-footer-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.im-tag {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #20202a;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.78rem;
    color: var(--text-light);
}
.im-tag strong { color: var(--text); font-size: 0.88rem; }
.im-route-btn {
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.im-route-btn:hover { background: var(--primary-hover); }

#itemMapPicker {
    touch-action: none;
}
#itemMapPicker .leaflet-container {
    touch-action: none;
}
.close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    color: white;
    z-index: 5;
    transition: background 0.2s ease;
}
.close-modal:hover {
    background: rgba(0,0,0,0.8);
}
        /* BURGER LISTE - KORRIGIERTES GRID */
        .burger-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
            width: 100%;
        }
		/* Animation für das Erscheinen der Karten */
		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.item-card {
			background: var(--card-bg);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			border: 1px solid var(--border);
			overflow: hidden;
			position: relative;
			cursor: pointer;
			transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.5s ease;
			opacity: 1;
		}
		.fade-in-animation {
			animation: fadeInUp 0.5s ease forwards;
		}
		.item-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 16px rgba(0,0,0,0.25);
			border-color: var(--border-strong, #4a4a5a);
		}
		.item-card:active {
			transform: translateY(1px);
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		}
		.card-hidden {
			opacity: 0;
		}
		.card-visible {
			opacity: 1;
		}
		.rank-badge {
			position: absolute; /* Löst es aus dem Textfluss */
			top: 15px;          /* Abstand von oben */
			left: 15px;         /* Abstand von links */
			z-index: 10;

			/* Design */
			background: var(--primary);
			color: #ffffff;
			font-weight: 700;
			font-size: 0.95rem;
			min-width: 26px;
			height: 26px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 8px;
			border-radius: 6px;
			pointer-events: none;
		}
		.favorite-btn {
			position: absolute;
			top: 12px;
			right: 12px;
			z-index: 10;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: rgba(0,0,0,0.5);
			border: none;
			color: #fff;
			font-size: 1.2rem;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s ease;
		}
		.favorite-btn:hover {
			background: rgba(0,0,0,0.75);
			transform: scale(1.1);
		}
		.favorite-btn.is-favorited {
			color: #ff4757;
			background: rgba(0,0,0,0.6);
		}
        .item-image {
            width: 100%; /* Volle Breite */
            min-width: 100%;
            height: 300px; /* Feste Höhe für den Bilder-Bereich */
            background-size: cover;
            background-position: center;
            background-color: #333;
        }

        .item-details {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 0px; /* Abstand zwischen Textzeilen */
        }
		.item-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
		}
		.item-restaurant {
			margin: 0;
			font-size: 0.85rem;
			color: var(--text-light);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.item-price-badge {
			flex-shrink: 0;
			background: #262932;
			color: var(--primary);
			font-size: 0.78rem;
			font-weight: 600;
			padding: 3px 10px;
			border-radius: 20px;
		}
		.item-name {
			margin: 8px 0 4px 0;
			font-size: 1.15rem;
			font-weight: 600;
			color: var(--text);
		}
		.item-location, .item-author {
			margin: 2px 0;
			font-size: 0.85rem;
			color: var(--text-light);
			line-height: 1.3;
		}

        .score-box {
            /* Hier ändern wir es zu einer Leiste unter den Infos */
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
        }

        .score-star-display {
			display: flex;
			align-items: center;
			gap: 6px;
			font-weight: 600;
			font-size: 1.05rem;
			color: var(--primary);
		}

		.star-icon {
			font-size: 1.1rem;
			color: var(--primary);
		}

		.action-buttons {
			display: flex;
			gap: 6px;
		}
		.btn-action {
			background: #262932;
			border: 1px solid var(--border);
			color: var(--text);
			width: 30px;
			height: 30px;
			border-radius: 6px;
			cursor: pointer;
			font-size: 0.9rem;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s ease;
		}
		.btn-edit-item:hover {
			border-color: var(--primary);
			color: var(--primary);
		}
		.btn-delete-item:hover {
			border-color: var(--danger);
			color: var(--danger);
		}

		.user-status-card {
			width: 100%;
			max-width: 400px;
			margin: 0 auto;
			box-sizing: border-box;
		}
		.user-status-header {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 15px;
		}
		.user-avatar {
			width: 42px;
			height: 42px;
			min-width: 42px;
			border-radius: 50%;
			background: var(--primary);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 1.1rem;
		}
		.user-status-label {
			font-size: 0.75rem;
			color: var(--text-light);
		}
		.user-status-name {
			font-size: 1.05rem;
			font-weight: 700;
			color: var(--text);
		}
		.user-status-links {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 15px;
		}
		.user-status-link {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #20202a;
			border: 1px solid var(--border);
			padding: 10px 14px;
			border-radius: 6px;
			color: var(--text);
			text-decoration: none;
			font-size: 0.9rem;
			transition: border-color 0.2s ease;
		}
		.user-status-link:hover {
			border-color: var(--primary);
		}
		.user-status-link span {
			color: var(--primary);
		}
		.user-status-logout {
			display: block;
			text-align: center;
			color: var(--danger);
			font-size: 0.85rem;
			text-decoration: none;
			padding: 8px;
			border: 1px solid var(--danger);
			border-radius: 6px;
			transition: background 0.2s ease;
		}
		.user-status-logout:hover {
			background: rgba(255, 71, 87, 0.1);
		}

		/* Listing-Karten im Stil klassischer Bewertungsportale - der einheitliche Stil für alle
		   Ranglisten (Startseite/Suche, Burger, Café, Profilseite: Beiträge/Bewertungen/Favoriten) */
		.post-card {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: 14px;
			overflow: hidden;
			cursor: pointer;
			transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.4s ease;
		}
		.post-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 16px rgba(0,0,0,0.25);
			border-color: var(--border-strong, #4a4a5a);
		}
		.post-card:active {
			transform: translateY(1px);
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		}
		.post-image {
			position: relative;
			width: 100%;
			aspect-ratio: 4 / 3;
			background-size: cover;
			background-position: center;
			background-color: #333;
			cursor: pointer;
		}
		.post-rating-badge {
			position: absolute;
			top: 10px;
			left: 10px;
			display: flex;
			align-items: center;
			gap: 4px;
			background: linear-gradient(135deg, #e0a84f, var(--primary));
			color: #241a0e;
			font-weight: 700;
			font-size: 0.78rem;
			padding: 4px 10px;
			border-radius: 6px;
			box-shadow: 0 2px 6px rgba(0,0,0,0.35);
		}
		.post-rating-badge .star-icon {
			font-size: 0.72rem;
			color: #000;
		}
		.post-save-btn {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: rgba(20,20,25,0.5);
			backdrop-filter: blur(3px);
			border: none;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			padding: 0;
			transition: background 0.2s ease, transform 0.15s ease;
		}
		.post-save-btn svg {
			width: 16px;
			height: 16px;
		}
		.post-save-btn:hover {
			background: rgba(20,20,25,0.75);
			transform: scale(1.08);
		}
		.post-save-btn.is-active {
			color: var(--primary);
		}
		.post-manage-menu {
			position: absolute;
			bottom: 10px;
			right: 10px;
			display: flex;
			gap: 6px;
		}
		.post-manage-menu .btn-action {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background: rgba(20,20,25,0.5);
			backdrop-filter: blur(3px);
			border: none;
			color: #fff;
			font-size: 0.72rem;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			padding: 0;
			transition: background 0.2s ease;
		}
		.post-manage-menu .btn-action:hover {
			background: rgba(20,20,25,0.75);
		}
		.post-body {
			padding: 12px 14px 14px;
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.post-title-row {
			display: flex;
			align-items: center;
			gap: 6px;
			min-width: 0;
		}
		.post-name {
			margin: 0;
			font-size: 1rem;
			font-weight: 700;
			color: var(--text);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			min-width: 0;
		}
		/* Das ICON_VERIFIZIERT.png ist selbst schon ein fertiges Siegel/Badge-Motiv (Kreis mit
		   Zackenrand + Haken) - keine zusätzliche Kreis-Hintergrundfarbe mehr nötig wie beim
		   früheren reinen Text-Häkchen, nur noch eine Größen-Box drumherum. */
		.post-verified-badge {
			flex-shrink: 0;
			width: 16px;
			height: 16px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
		}
		.post-verified-badge img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		.post-restaurant-name {
			margin: 3px 0 0;
			font-size: 0.72rem;
			color: var(--text-light);
			opacity: 0.75;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.post-restaurant-closed {
			font-style: italic;
			opacity: 0.6;
		}
		.post-location {
			margin: 4px 0 0;
			font-size: 0.78rem;
			color: var(--text-light);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.post-desc {
			margin: 6px 0 0;
			font-size: 0.8rem;
			line-height: 1.4;
			color: var(--text-light);
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.post-meta-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			margin-top: auto;
			padding-top: 10px;
			border-top: 1px solid var(--border);
			font-size: 0.78rem;
		}
		.post-meta-left {
			color: var(--text-light);
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.post-meta-right {
			display: flex;
			align-items: center;
			gap: 4px;
			flex-shrink: 0;
			color: var(--text-light);
			font-size: 0.78rem;
		}
		.post-like-icon {
			color: #ff4757;
			font-size: 0.85rem;
		}

		.profile-banner {
			width: 100%;
			height: 180px;
			border-radius: 10px;
			background: linear-gradient(135deg, #2a2a35, #1c1e25);
			background-size: cover;
			background-position: center;
			position: relative;
			border: 1px solid var(--border);
		}
		.profile-banner-avatar-wrap {
			position: absolute;
			bottom: -40px;
			left: 24px;
		}
		.profile-banner-avatar {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: var(--primary);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2.2rem;
			font-weight: 700;
			border: 4px solid var(--bg);
			background-size: cover;
			background-position: center;
		}

		.profile-tabs {
			display: flex;
			gap: 8px;
			border-bottom: 1px solid var(--border);
			overflow-x: auto;
		}
		.profile-tab {
			background: none;
			border: none;
			color: var(--text-light);
			font-size: 0.95rem;
			font-weight: 600;
			padding: 10px 16px;
			cursor: pointer;
			white-space: nowrap;
			border-bottom: 2px solid transparent;
			transition: all 0.2s ease;
		}
		.profile-tab:hover {
			color: var(--text);
		}
		.profile-tab.active {
			color: var(--primary);
			border-bottom-color: var(--primary);
		}

		/* --- Entwürfe-Tab im Profil (Spots/Produkte, die noch nicht veröffentlicht sind) --- */
		/* #rankingList ist ein Grid (.burger-grid) - dieser Wrapper spannt als einzelnes Kind die
		   volle Breite, damit Sub-Tabs/Liste/Tipp/Button untereinander statt nebeneinander stehen. */
		.drafts-tab-content {
			grid-column: 1 / -1;
			display: flex;
			flex-direction: column;
		}
		.drafts-subtabs {
			display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
		}
		.drafts-subtab {
			background: none; border: none; color: var(--text-light); font-size: 0.9rem; font-weight: 600;
			padding: 8px 4px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease;
		}
		.drafts-subtab:hover { color: var(--text); }
		.drafts-subtab.active { color: var(--primary); border-bottom-color: var(--primary); }

		.draft-row {
			display: flex; align-items: center; gap: 16px; background: var(--card-bg);
			border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px;
			flex-wrap: wrap;
		}
		.draft-row-thumb {
			width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px; background-size: cover;
			background-position: center; background-color: #262932; display: flex; align-items: center;
			justify-content: center; font-size: 1.6rem;
		}
		.draft-row-info { flex: 1; min-width: 160px; }
		.draft-row-name { font-weight: 700; color: var(--text); font-size: 1rem; }
		.draft-row-meta { color: var(--text-light); font-size: 0.85rem; margin-top: 2px; }
		.draft-row-badges { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
		.draft-badge {
			background: rgba(201,138,69,0.16); color: var(--primary); font-size: 0.72rem; font-weight: 700;
			padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.03em;
		}
		.draft-row-date { color: var(--text-light); font-size: 0.78rem; }
		.draft-row-progress { min-width: 160px; }
		.draft-progress-label { color: var(--text-light); font-size: 0.78rem; margin-bottom: 6px; }
		.draft-progress-bar { width: 100%; height: 6px; background: #262932; border-radius: 20px; overflow: hidden; }
		.draft-progress-fill { height: 100%; background: var(--primary); border-radius: 20px; }
		.draft-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
		.draft-row-actions .btn-action, .draft-row-actions .btn-danger {
			width: auto; padding: 8px 14px; font-size: 0.82rem; white-space: nowrap;
		}
		.drafts-tip {
			background: rgba(201,138,69,0.08); border: 1px solid rgba(201,138,69,0.25); color: var(--text-light);
			border-radius: 10px; padding: 14px 16px; font-size: 0.85rem; margin-top: 8px;
		}
		.drafts-tip strong { color: var(--text); }
		.drafts-actions-row { display: flex; justify-content: flex-end; margin-top: 16px; }

		@media (max-width: 900px) {
			#profileTopGrid {
				grid-template-columns: 1fr !important;
			}
		}

		.admin-user-block {
			padding: 12px 0;
			border-bottom: 1px solid var(--border);
		}
		.admin-user-block:last-child {
			border-bottom: none;
		}
		.user-items-list {
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px dashed var(--border);
		}
		.user-items-list ul {
			list-style: none;
		}
		.user-items-list li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 6px;
			font-size: 0.85rem;
			color: var(--text-light);
		}

		/* Tag-Pill, z.B. für eine Küchen-/Kategorie-Kennzeichnung unten in der Karte */
		.tag-pill {
			display: inline-block;
			background: #262932;
			color: var(--text-light);
			font-size: 0.78rem;
			font-weight: 500;
			padding: 4px 12px;
			border-radius: 20px;
			margin: 8px 15px 0;
			width: fit-content;
		}
html, body {
    max-width: 100%;
    background: var(--bg);
}
html {
    /* Nur auf html, nicht auf body: overflow-x:hidden auf BEIDEN Elementen macht body zu einem
       eigenen Scroll-Container (overflow-x auf einer Achse erzwingt computed overflow-y:auto auf
       der anderen) - das killt position:sticky innerhalb von body (Karte in der Split-Ansicht
       scrollte mit statt stehen zu bleiben). html allein reicht, um das seitliche Scrollen zu
       verhindern. */
    overflow-x: hidden;
}

* {
    box-sizing: border-box; /* Sorgt dafür, dass Padding nicht die Breite vergrößert */
}
		@media (max-width: 768px) {
			.main-content {
				margin-left: 0 !important;
				width: 100% !important;
				padding: 90px 15px 15px !important;
			}
			/* Seiten mit eigenem page-header (Burger, Cafés...) brauchen den 90px-Abstand nicht nochmal - der Header regelt die Topbar-Freifläche schon selbst */
			.page-header + .main-content {
				padding-top: 15px !important;
			}
			/* Unternehmensseite hat ihren eigenen Banner direkt unter der Topbar - 90px wären hier
			   ein unnötiger Spalt zwischen Topbar und Banner, 60px reichen. Seitlich außerdem
			   deutlich schmalerer Rand als der generelle 15px-Gutter (NUR mobil, NUR diese Seite) -
			   die Panel-Boxen (Bewertungen, Standort, Fotos...) sollen auf dem Handy viel mehr von
			   der Breite nutzen statt links/rechts Platz zu verschwenden. */
			.biz-main-content {
				padding-top: 60px !important;
				padding-left: 6px !important;
				padding-right: 6px !important;
			}

			/* Box zum Anlegen eines Items ("+ Spot hinzufügen") lässt auf dem Handy viel zu viel
			   Abstand zum Rand (20px Menü-Padding + 25px Card-Padding = 45px pro Seite) - deutlich
			   schmaler machen, damit die Box viel breiter wirkt. */
			.menu-content {
				padding: 12px;
			}
			#itemFormCard {
				padding: 14px;
			}

			/* Bottom-Nav einblenden - schwebende "Glas"-Pille im Apple-Liquid-Glass-Look:
			   durchscheinend, verschwommener Hintergrund, abgerundet, mit Abstand zum Rand */
			.bottom-nav {
				display: flex;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom: max(14px, calc(10px + env(safe-area-inset-bottom)));
				width: calc(100% - 28px);
				max-width: 420px;
				background: rgba(28, 30, 37, 0.55);
				backdrop-filter: blur(20px) saturate(180%);
				-webkit-backdrop-filter: blur(20px) saturate(180%);
				border: 1px solid rgba(255, 255, 255, 0.08);
				border-radius: 999px;
				box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
				justify-content: space-between;
				align-items: center;
				gap: 2px;
				padding: 8px 10px;
				z-index: 999;
			}
			.bottom-nav-item {
				background: none;
				border: none;
				color: var(--text-light);
				display: flex;
				flex: 1 1 0;
				min-width: 0;
				flex-direction: column;
				align-items: center;
				gap: 2px;
				font-size: 0.62rem;
				padding: 5px 2px;
				border-radius: 999px;
				cursor: pointer;
				text-decoration: none;
				text-align: center;
				transition: background 0.2s ease, color 0.2s ease;
			}
			.bottom-nav-item span {
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.bottom-nav-item.active {
				color: var(--primary);
				background: rgba(201, 138, 69, 0.15);
			}
			.bottom-nav-item svg {
				width: 21px;
				height: 21px;
			}
			.bottom-nav-add svg {
				background: var(--primary);
				color: #fff;
				border-radius: 50%;
				padding: 8px;
				width: 36px;
				height: 36px;
				box-sizing: border-box;
				margin-top: -14px;
				box-shadow: 0 4px 10px rgba(0,0,0,0.4);
			}

			/* Platz am unteren Seitenrand, damit Inhalte nicht hinter der schwebenden Bottom-Nav
			   verschwinden. Bewusst NICHT auf body/#profileScrollWrapper (das würde nur einen
			   Streifen im normalen Seitenhintergrund freilassen, der farblich nicht zum dunklen
			   Footer passt und wie ein Bruch aussieht) - stattdessen bekommt der Footer selbst
			   diesen Puffer, damit sein dunkler Hintergrund bis unten durchgezogen wird. */
			#profileScrollWrapper {
				box-sizing: border-box;
			}
			.site-footer {
				padding-bottom: 90px;
			}

			/* Topbar: nur Logo + Menü-Icon, Rest wandert in die Bottom-Nav/das Dropdown */
			#loginBtn, .topbar-btn-primary {
				display: none !important;
			}

			/* Hero-Suche: Felder stapeln statt nebeneinander */
			.search-bar {
				flex-direction: column;
				align-items: stretch;
				background: transparent;
				border: none;
				gap: 10px;
			}
			.search-field {
				width: 100%;
				box-sizing: border-box;
				background: var(--card-bg);
				border: 1px solid var(--border);
				border-radius: 6px;
				padding: 12px 15px;
			}
			.divider {
				display: none;
			}
			.search-submit {
				width: 100%;
				box-sizing: border-box;
				border-radius: 6px;
				padding: 14px;
				justify-content: center;
			}
			.search-map-btn {
				width: 100%;
				box-sizing: border-box;
				border-radius: 6px;
				padding: 14px;
				justify-content: center;
			}

			/* Genug Abstand zum Bildschirmrand */
			.hero-container {
				padding-left: 20px;
				padding-right: 20px;
				box-sizing: border-box;
			}

			/* Community-Stats: Karten untereinander stapeln, Trennpunkte werden waagerecht */
			.community-stats {
				padding: 48px 20px 56px;
			}
			.community-stats-header h2 {
				font-size: 1.4rem;
			}
			.stats-bar {
				flex-direction: column;
				align-items: center;
				gap: 14px;
			}
			.stat-item {
				width: 100%;
				max-width: 320px;
			}
			.stat-dot {
				width: 100%;
				max-width: 320px;
				height: 1px;
				border-radius: 0;
				background: var(--border);
				opacity: 1;
				margin: 0;
			}

			/* Kategorie-Icons: runde Avatare, horizontal scrollbar */
			.category-grid {
				flex-wrap: nowrap;
				overflow-x: auto;
				justify-content: flex-start;
				gap: 12px;
				padding: 0 20px 4px;
				margin: 0 -20px;
				-ms-overflow-style: none;
				scrollbar-width: none;
			}
			.category-grid::after {
				content: '';
				flex: 0 0 8px;
			}
			.category-grid::-webkit-scrollbar {
				display: none;
			}
			.cat-item {
				flex: 0 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: none;
				border: none;
				padding: 0;
				width: 62px;
			}
			.cat-item .cat-icon {
				width: 52px;
				height: 52px;
				border-radius: 50%;
				background: rgba(255,255,255,0.08);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.3rem;
			}
			/* Icon-Grafiken füllen den 52px-Kreis deutlich weniger aus als ein Emoji-Zeichen bei
			   gleicher font-size - deshalb hier eine feste, großzügigere Größe statt der 1em-Regel
			   aus .icon-img. */
			.cat-item .cat-icon .icon-img {
				width: 32px;
				height: 32px;
			}
			.cat-item .cat-label {
				margin-top: 6px;
				font-size: 0.72rem;
				white-space: nowrap;
			}

			/* Karten-Layout auf Handy: wieder die kompakte Zeilenansicht wie vorher
			   (kleines Vorschaubild links, Infos rechts) statt der großen Bild-Kachel */
			.burger-grid {
				grid-template-columns: 1fr !important;
				gap: 12px;
			}
			.post-card {
				display: grid;
				grid-template-columns: 100px minmax(0, 1fr);
				grid-template-areas: "image body";
			}
			.post-image {
				grid-area: image;
				aspect-ratio: auto;
				width: 100px;
				min-width: 0;
			}
			.post-rating-badge {
				top: 6px;
				left: 6px;
				padding: 3px 7px;
				font-size: 0.68rem;
			}
			.post-save-btn {
				top: 6px;
				right: 6px;
				width: 26px;
				height: 26px;
			}
			.post-save-btn svg {
				width: 13px;
				height: 13px;
			}
			.post-manage-menu {
				bottom: 6px;
				right: 6px;
			}
			.post-manage-menu .btn-action {
				width: 24px;
				height: 24px;
			}
			.post-body {
				grid-area: body;
				padding: 8px 10px;
				min-width: 0;
			}
			.post-name,
			.post-location {
				max-width: 100%;
			}
			.post-desc {
				-webkit-line-clamp: 2;
			}
			.post-meta-row {
				margin-top: 6px;
				padding-top: 6px;
			}

			/* Detail-Modal breiter und mit weniger Rand-Padding */
			.modal-content {
				width: 95%;
				max-width: 95%;
				padding: 20px;
				max-height: 85vh;
			}
			.im-top-grid {
				grid-template-columns: 1fr;
				gap: 16px;
			}
			.im-hero-img {
				height: 200px;
				min-height: 0;
			}
			.im-title {
				font-size: 1.25rem;
			}
			.im-quickfacts {
				grid-template-columns: 1fr;
				gap: 10px;
			}
			/* Unternehmensseite: SpotRank Score und Preisniveau nebeneinander in einer Reihe unter
			   den Balken (Service/Ambiente/...), statt beide einzeln je eine volle Zeile zu
			   verschwenden. Bewertung, Balken und Kategorien bleiben je eine volle Zeile. Höhere
			   Spezifität (zwei Klassen) als .im-quickfacts oben, damit das hier sicher gewinnt. */
			.im-quickfacts.biz-quickfacts-cols {
				grid-template-columns: 1fr 1fr;
				gap: 14px;
			}
			.biz-quickfacts-cols .im-quickfact:nth-child(1),
			.biz-quickfacts-cols .im-quickfact:nth-child(2),
			.biz-quickfacts-cols .im-quickfact:nth-child(5) {
				grid-column: 1 / -1;
			}
			.im-details-grid {
				grid-template-columns: 1fr;
				gap: 18px;
			}
			.im-rating-chip {
				background: #20202a;
				border: 1px solid var(--border);
				border-radius: 10px;
				padding: 10px 6px;
				text-align: center;
				font-size: 0.7rem;
				color: var(--text-light);
			}
			.im-chip-icon {
				font-size: 1.1rem;
				display: block;
				margin-bottom: 4px;
			}
			.im-chip-value {
				display: block;
				margin-top: 2px;
				color: var(--text);
				font-weight: 700;
				font-size: 0.85rem;
			}
			.im-footer {
				flex-direction: column;
				align-items: stretch;
			}
			.im-route-btn {
				justify-content: center;
			}

			/* Hero-Text kompakter machen */
			.hero h1 {
				font-size: 1.8rem !important;
				line-height: 1.25 !important;
			}
			.hero-subtext {
				font-size: 0.9rem;
			}
			.hero {
				padding: 90px 0 30px !important;
				min-height: auto !important;
			}

			/* Sicherstellen, dass der Toggle-Button sichtbar ist */

			/* Kategorie-Seiten-Header kompakter machen, kein großes Hintergrundbild */
			.page-header {
				min-height: auto;
				background: var(--bg) !important;
				padding: 10px 0;
			}
			.page-header::after {
				display: none;
			}
			.header-content {
				grid-template-columns: 1fr;
				padding: 0;
				gap: 10px;
			}
			.header-text {
				display: none; /* Komplett leer (Titel+Text schon einzeln versteckt) - ganze Zeile spart sich damit auch Innenabstand/Grid-Lücke */
			}
			.header-icon {
				display: none; /* Titel ist eh weg, Icon steckt jetzt im Kategorie-Tag */
			}
			.header-text h1 {
				display: none; /* Ersetzt durch das kompakte Kategorie-Tag neben der Eintragszahl */
			}
			.header-text p {
				font-size: 0.8rem;
				display: none; /* Langtext spart Platz auf kleinen Screens */
			}
			.mobile-category-tag {
				display: inline-block;
				background: #20202a;
				border: 1px solid var(--border);
				color: var(--primary);
				font-size: 0.78rem;
				font-weight: 600;
				padding: 4px 10px;
				border-radius: 20px;
				white-space: nowrap;
			}
			.header-bottom-row {
				flex-direction: column;
				align-items: stretch;
				gap: 10px;
				margin-top: 12px;
			}
			.header-bottom-row .search-input {
				max-width: 100%;
			}
			.filter-bar {
				width: 100%;
			}
			.search-input-wrap {
				flex: 1 1 auto;
			}
			.search-input-wrap .search-input {
				max-width: 100%;
				flex: 1 1 auto;
			}
			.loc-filter-panel {
				width: min(260px, calc(100vw - 20px));
			}
			.btn-map-split-toggle {
				display: none; /* Kein Platz für die Split-Ansicht auf kleinen Screens */
			}
		}

		/* --- FOOTER --- */
		.site-footer {
			background: #101115;
			border-top: 1px solid var(--border);
			margin-top: 60px;
			padding-top: 40px;
		}
		/* Community-Stats hat unten bereits genug eigenen Abstand (padding-bottom) -
		   der Footer soll direkt anschliessen statt zusaetzlich Abstand aufzureissen. */
		.community-stats ~ .site-footer {
			margin-top: 0;
		}
		.footer-inner {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px 30px;
			display: grid;
			grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
			gap: 30px;
		}
		.footer-logo-img {
			height: 45px;
			margin-bottom: 12px;
		}
		.footer-tagline {
			color: var(--text-light);
			font-size: 0.85rem;
			line-height: 1.5;
			margin: 0 0 15px;
		}
		.footer-social {
			display: flex;
			gap: 10px;
		}
		.footer-social a {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background: #1c1e25;
			border: 1px solid var(--border);
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			font-size: 1rem;
			transition: border-color 0.2s ease;
		}
		.footer-social a:hover {
			border-color: var(--primary);
		}
		.footer-col h4 {
			color: var(--text);
			font-size: 0.95rem;
			margin: 0 0 14px;
		}
		.footer-col ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.footer-col ul li {
			margin-bottom: 10px;
		}
		.footer-col ul li a,
		.footer-address a {
			color: var(--text-light);
			text-decoration: none;
			font-size: 0.88rem;
			transition: color 0.2s ease;
		}
		.footer-col ul li a:hover,
		.footer-address a:hover {
			color: var(--primary);
		}
		.footer-address {
			font-style: normal;
			color: var(--text-light);
			font-size: 0.88rem;
			line-height: 1.6;
		}
		.footer-bottom {
			border-top: 1px solid var(--border);
			padding: 18px 20px;
			text-align: center;
		}
		.footer-bottom p {
			margin: 0;
			color: var(--text-light);
			font-size: 0.8rem;
		}

		.ranking-disclaimer {
			color: var(--text-light);
			font-size: 0.8rem;
			font-style: italic;
			margin: -10px 0 15px;
		}

		/* --- SUPPORT-SEITE --- */
		.support-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			margin-bottom: 25px;
		}
		.support-card {
			display: flex;
			flex-direction: column;
			margin-bottom: 0;
		}
		.support-card h3 {
			margin: 0 0 4px;
		}
		.support-card-sub {
			color: var(--text-light);
			font-size: 0.85rem;
			margin: 0 0 18px;
		}
		.support-icon {
			width: 46px;
			height: 46px;
			border-radius: 50%;
			background: #20202a;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.3rem;
			margin-bottom: 14px;
		}
		.support-contact-item {
			display: flex;
			align-items: flex-start;
			gap: 12px;
		}
		.support-contact-icon {
			font-size: 1.1rem;
			margin-top: 2px;
		}
		.support-contact-link {
			color: var(--primary);
			text-decoration: none;
			font-weight: 600;
			font-size: 0.92rem;
		}
		.support-contact-link:hover {
			text-decoration: underline;
		}
		.support-contact-note {
			color: var(--text-light);
			font-size: 0.8rem;
			margin: 3px 0 0;
			line-height: 1.4;
		}
		.support-divider {
			border: none;
			border-top: 1px solid var(--border);
			margin: 16px 0;
		}
		.support-faq-list {
			list-style: none;
			padding: 0;
			margin: 0 0 16px;
			flex-grow: 1;
		}
		.support-faq-list li a {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: var(--text);
			text-decoration: none;
			font-size: 0.88rem;
			padding: 9px 0;
			border-bottom: 1px solid var(--border);
			transition: color 0.15s ease;
		}
		.support-faq-list li:last-child a {
			border-bottom: none;
		}
		.support-faq-list li a:hover {
			color: var(--primary);
		}
		.support-faq-list li a span {
			color: var(--text-light);
		}
		.support-check-list {
			list-style: none;
			padding: 0;
			margin: 0 0 16px;
			flex-grow: 1;
		}
		.support-check-list li {
			color: var(--text-light);
			font-size: 0.88rem;
			padding: 6px 0;
		}
		.support-card-link {
			color: var(--primary);
			text-decoration: none;
			font-size: 0.88rem;
			font-weight: 600;
			margin-top: auto;
		}
		.support-card-link:hover {
			text-decoration: underline;
		}

		.support-cta-bar {
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: 10px;
			padding: 25px 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 20px;
		}

		.faq-accordion {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
		.faq-item {
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: 10px;
			overflow: hidden;
		}
		.faq-question {
			width: 100%;
			background: none;
			border: none;
			color: var(--text);
			font-size: 0.95rem;
			font-weight: 600;
			text-align: left;
			padding: 16px 18px;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.faq-toggle-icon {
			color: var(--primary);
			font-size: 1.2rem;
			transition: transform 0.2s ease;
			flex-shrink: 0;
			margin-left: 12px;
		}
		.faq-item.open .faq-toggle-icon {
			transform: rotate(45deg);
		}
		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.25s ease;
			color: var(--text-light);
			font-size: 0.88rem;
			line-height: 1.6;
		}
		.faq-answer p {
			margin: 0;
			padding: 0 18px 16px;
		}
		.faq-item.open .faq-answer {
			max-height: 300px;
		}

		@media (max-width: 900px) {
			.support-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		@media (max-width: 600px) {
			.support-grid {
				grid-template-columns: 1fr;
			}
			.support-cta-bar {
				flex-direction: column;
				align-items: flex-start;
			}
		}

		.cookie-notice {
			position: fixed;
			bottom: 20px;
			left: 20px;
			right: 20px;
			max-width: 600px;
			margin: 0 auto;
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: 10px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.5);
			padding: 18px 20px;
			z-index: 1200;
			display: flex;
			align-items: center;
			gap: 16px;
			flex-wrap: wrap;
		}
		.cookie-notice p {
			flex: 1;
			min-width: 200px;
			margin: 0;
			font-size: 0.85rem;
			color: var(--text-light);
			line-height: 1.5;
		}
		.cookie-notice p a {
			color: var(--primary);
		}
		.cookie-notice-btn {
			white-space: nowrap;
			background: var(--primary);
			color: #ffffff;
			border: none;
			padding: 9px 20px;
			border-radius: 6px;
			font-weight: 600;
			font-size: 0.9rem;
			cursor: pointer;
		}
		.cookie-notice-btn:hover {
			background: var(--primary-hover);
		}

		#spotMap {
			width: 100%;
			height: calc(100vh - 60px);
			margin-top: 60px;
		}
		.map-pin-count-badge {
			position: fixed;
			top: 75px;
			left: 15px;
			z-index: 900;
			background: var(--card-bg);
			border: 1px solid var(--border);
			border-radius: 20px;
			padding: 8px 16px;
			font-size: 0.8rem;
			color: var(--text-light);
			box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		}
		@media (max-width: 768px) {
			#spotMap {
				height: calc(100vh - 60px - 70px); /* 60px Topbar + 70px Bottom-Nav */
			}
		}
		@media (max-width: 500px) {
			.cookie-notice {
				left: 12px;
				right: 12px;
				bottom: 80px; /* über der Bottom-Nav auf Mobile */
				flex-direction: column;
				align-items: stretch;
			}
		}

		@media (max-width: 900px) {
			.footer-inner {
				grid-template-columns: repeat(2, 1fr);
			}
			.footer-brand {
				grid-column: 1 / -1;
			}
		}
		@media (max-width: 500px) {
			/* Einspaltig gestapelt: alles zentrieren statt links gequetscht mit viel Leerraum
			   rechts - eine einzelne linksbündige Spalte in voller Breite sah unausgewogen aus. */
			.footer-inner {
				grid-template-columns: 1fr;
				text-align: center;
				gap: 34px;
			}
			.footer-col {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.footer-brand {
				align-items: center;
			}
			.footer-social {
				justify-content: center;
			}
			.footer-address {
				text-align: center;
			}
		}

/* --- Unternehmen-Suche im Item-Formular ("wo gab's das?") --- */
.business-suggestions {
	margin-top: 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	max-height: 320px;
	overflow-y: auto;
}
.business-suggestion-item {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	background: #20202a;
}
.business-suggestion-item:last-child { border-bottom: none; }
.business-suggestion-item:hover { background: #262632; }
.business-suggestion-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.business-suggestion-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.business-suggestion-sub { color: var(--text-light); font-size: 0.78rem; margin-top: 2px; }
.business-suggestion-preview-btn {
	background: none;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 0.9rem;
	flex-shrink: 0;
}
.business-suggestion-preview { margin-top: 8px; }
/* Von OpenStreetMap vorgeschlagene, bei SpotRank noch nicht angelegte Orte - eigene Gruppe unter
   den bereits vorhandenen SpotRank-Treffern. */
.business-suggestion-osm-label {
	padding: 8px 12px 4px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: #20202a;
	border-bottom: 1px solid var(--border);
}
.business-suggestion-osm-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(59,158,255,0.15);
	color: #3b9eff;
	font-size: 0.68rem;
	font-weight: 700;
	vertical-align: middle;
}
.business-suggestion-create-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	background: rgba(201,138,69,0.1);
	border: none;
	color: var(--primary);
	font-weight: 600;
	font-size: 0.88rem;
	font-family: inherit;
	padding: 12px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.business-suggestion-create-btn:hover { background: rgba(201,138,69,0.18); }
.business-suggestion-create-btn span { font-size: 1.05rem; font-weight: 700; }

/* "Neues Restaurant anlegen"-Grundgerüst: bewusst deutlich abgesetzt (eigener Rahmen in
   Primärfarbe + Titel-Zeile) statt nur ein zusätzlicher Block, der unauffällig unter die Suche
   gehängt wird - soll klar als eigener Schritt wahrgenommen werden, nicht als "die Liste wurde länger". */
.business-create-panel {
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid var(--primary);
	background: rgba(201, 138, 69, 0.05);
	border-radius: 8px;
}
.business-create-panel-title {
	margin: 0 0 10px;
	color: var(--primary);
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Adresse-Eingabe + "Übernehmen"-Button als eine zusammenhängende Pille (wie die Suchleiste im
   Hero) statt zwei lose nebeneinanderstehender Elemente - macht optisch klar, dass beides
   zusammengehört. Button bewusst in --border-strong statt Orange (das ist schon die Farbe vom
   "Unternehmen anlegen & auswählen"-Button darunter, zwei orangene Buttons direkt übereinander
   sähen wie dieselbe Aktion aus, sind aber inhaltlich unterschiedliche Schritte). */
.address-input-wrap {
	display: flex;
	align-items: stretch;
	background: #20202a;
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
}
.address-input-wrap input {
	flex: 1 1 auto;
	min-width: 0;
	border: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.address-input-wrap input:focus { outline: none; }
.address-input-wrap button {
	flex: 0 0 auto;
	border: none;
	background: var(--border-strong);
	color: #fff;
	padding: 0 18px;
	font-weight: 600;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}
.address-input-wrap button:hover { background: #4a4d57; }