/*
 Fête de la Musique Hannover – Theme-Styles (fdlm_hannover_27)
*/

/* ======================================================
   FONTS
   Nur zwei Schriften, beide aus dem Adobe-Fonts-Kit "vaq7nqv"
   (eingebunden in functions.php -> fete_enqueue_scripts):
   - 'Massilia'          : Überschriften, Buttons, Badge (400/500/700/800)
   - 'Massilia-Variable' : Fließtext, Formulare (200–900)
====================================================== */

/* ======================================================
   ROOT / DESIGN TOKENS
====================================================== */

:root {
	--black: #1C1C1C;
	--white: #FAF4E9;

	--green: #b0cd56;
	--dark-green: #144a23;
	--orange: #e9541d;
	--pink: #e83082;
	--violet: #baa1e2;
	--blue: #A6D9E8;

	--radius: 12px;

	--max-width: 1300px;

	--transition: 0.25s ease;

	interpolate-size: allow-keywords;
	/* 👈 */
}


/* ======================================================
   RESET / BASE
====================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	line-height: normal;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.post,
.page {
	margin: 0;
}

body {
	font-family: 'Massilia-Variable', system-ui, sans-serif;
	background: var(--white);
	color: var(--black);
	line-height: 1.5;
	width: 100%;
	overflow-x: hidden;
	font-size: 18px;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

.wrapper {
	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: minmax(0, 1fr); /* Inhalt darf die Seite nie breiter als den Bildschirm machen */
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

h1,
h2,
h3 {
	font-weight: 800;
	margin-bottom: .5em;
}

img {
	max-width: 100%;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

a {
	color: inherit;
	text-decoration: none;
}

.page-content {
	padding: 0 20px;
	max-width: 1300px;
	margin: 20px auto;
}

.partner-logos {
	max-width: 1300px;
	margin: 50px auto;
}

body.page-template-archive-partner {
	background: var(--white);
}

/* ======================================================
   ACCESSIBILITY
====================================================== */

/* Glow-Farben: EIN Wert pro Zustand für die ganze Seite.
   Aufbau: dünner Ring (1px) + weicher Schein (6px Unschärfe, 1px Ausbreitung).
   --focus-glow  schwarz (--black #1c1c1c) = Feld ist angeklickt
   --valid-glow  grün  (--green #b0cd56) = Formularfeld ausgefüllt und korrekt
   --error-glow  rot   (#e51919, Forminators Fehlerfarbe) = Formularfeld falsch ausgefüllt */
:root {
	--focus-glow: 0 0 0 1px rgba(28, 28, 28, 0.6), 0 0 6px 1px rgba(28, 28, 28, 0.35);
	--valid-glow: 0 0 0 1px rgba(176, 205, 86, 0.9), 0 0 6px 1px rgba(176, 205, 86, 0.8);
	--error-glow: 0 0 0 1px rgba(229, 25, 25, 0.6), 0 0 6px 1px rgba(229, 25, 25, 0.5);
}

/* Fokus: schwarzer Glow statt fester Linie */
:focus-visible {
	outline: none;
	box-shadow: var(--focus-glow);
}

/* Automatisch ausgefüllte Felder (Browser-Autofill) weiß statt hellblau */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: var(--black);
}

input:-webkit-autofill:focus-visible,
textarea:-webkit-autofill:focus-visible,
select:-webkit-autofill:focus-visible,
.fdlm-filled input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset, var(--focus-glow);
	box-shadow: 0 0 0 1000px #fff inset, var(--focus-glow);
}

/* ------------------------------------------------------
   Forminator-Formulare
   - alle Felder in jedem Zustand weiß (kein Blau/Grau von Forminator)
   - Glow beim Anklicken UND solange etwas eingetragen/ausgewählt ist
     (Klasse .fdlm-filled setzt js/form-glow.js)
   !important nötig, weil Forminator seine Farben mit ID-Selektoren setzt
   (#forminator-module-XXXX in uploads/forminator/.../css/style-XXXX.css).
------------------------------------------------------ */

/* Ruhezustand + Hover: weiß, grauer Rahmen statt blauem */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui .select2-selection,
.forminator-ui .forminator-radio-bullet,
.forminator-ui .forminator-checkbox-box {
	background-color: #fff !important;
	border-color: #777771 !important;
	transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Angeklickt oder ausgefüllt: weißer Rahmen + Fokus-Glow (schwarz; ausgefüllt wird unten grün/rot) */
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui .select2-selection:focus,
.forminator-ui .select2-container--open .select2-selection,
.forminator-ui .fdlm-filled .forminator-input,
.forminator-ui .fdlm-filled .forminator-textarea,
.forminator-ui .fdlm-filled .select2-selection {
	outline: none !important;
	border-color: #fff !important;
	-webkit-box-shadow: var(--focus-glow) !important;
	box-shadow: var(--focus-glow) !important;
}

/* Instagram-Feld (Custom-Class "fdlm-instagram", js/form-glow.js):
   Der Rahmen um "instagram.com/" + Eingabe ist das sichtbare Feld und bekommt den Glow */
.forminator-ui .fdlm-insta-wrap {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #777771;
	border-radius: 4px;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.forminator-ui .fdlm-insta-prefix {
	padding-left: 12px;
	font-size: 1rem; /* gleiche Größe wie der eingetippte Text */
	color: #777771;
	white-space: nowrap;
	user-select: none;
}

.forminator-ui .fdlm-insta-wrap .forminator-input {
	flex: 1;
	min-width: 0;
	padding-left: 1px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.forminator-ui .fdlm-insta-wrap:focus-within,
.forminator-ui .fdlm-filled .fdlm-insta-wrap {
	border-color: #fff;
	box-shadow: var(--focus-glow);
}

/* Auswahlfelder und Datei-Felder nie breiter als ihre Spalte
   (lange Genre-Namen haben sonst die ganze Seite auf dem Handy breiter gemacht) */
.forminator-ui select,
.forminator-ui .select2-container,
.forminator-ui input[type="file"] {
	max-width: 100% !important;
}

/* Abgerundete Ecken wie die grünen Info-Boxen (6px) für alle Formular-Boxen;
   Häkchen-Kästchen 4px (6px wäre bei der kleinen Größe fast ein Kreis) */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select,
.forminator-ui .select2-selection,
.forminator-ui .fdlm-insta-wrap,
.forminator-ui .forminator-button-upload,
.forminator-ui .forminator-button-submit {
	border-radius: 6px !important;
}

.forminator-ui .fdlm-insta-wrap .forminator-input {
	border-radius: 0 6px 6px 0 !important; /* inneres Feld im Instagram-Rahmen */
}

.forminator-ui .forminator-checkbox-box {
	border-radius: 4px !important;
}

/* "Absenden": grün wie die Info-Boxen, dunkle Schrift */
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus {
	background-color: var(--green) !important;
	color: var(--black) !important;
	font-weight: 700 !important;
}

.forminator-ui .forminator-button-submit:hover {
	filter: brightness(0.92); /* etwas dunkler beim Drüberfahren */
}

/* "Datei auswählen"-Button: pink mit weißer Schrift statt Forminator-Grün */
.forminator-ui .forminator-button-upload,
.forminator-ui .forminator-button-upload:hover,
.forminator-ui .forminator-button-upload:focus {
	background-color: var(--pink) !important;
	color: var(--white) !important;
}

.forminator-ui .forminator-button-upload:hover {
	filter: brightness(0.92); /* etwas dunkler beim Drüberfahren */
}

/* Upload-Zeile: Button nur so breit wie sein Text (war auf Tablets fast volle Breite),
   Dateiname daneben gut lesbar; auf schmalen Handys rutscht der Dateiname unter den Button */
.forminator-ui .forminator-file-upload {
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.forminator-ui .forminator-file-upload .forminator-button-upload {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	padding-left: 22px !important;
	padding-right: 22px !important;
	min-height: 44px; /* Mindestgröße zum Antippen */
}

.forminator-ui .forminator-file-upload > span {
	flex: 1 1 140px;
	min-width: 0;
	font-size: 15px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Links in Feld-Hinweisen (z. B. "General Agreement (PDF) öffnen"): dunkel + unterstrichen statt Forminator-Blau */
.forminator-ui .forminator-description a {
	color: var(--black) !important;
	text-decoration: underline !important;
	font-weight: 600;
}

/* Hinweis unter dem Foto-Upload während/nach der JPG-Umwandlung (js/form-photo-jpg.js) */
.forminator-ui .fdlm-photo-status {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #777771;
}

.forminator-ui .fdlm-photo-status.is-ok {
	color: var(--dark-green);
}

.forminator-ui .fdlm-photo-status.is-error {
	color: #e51919;
}

/* Zeichenzähler unter Textfeldern mit Mindestlänge ("fdlm-min-60", js/form-glow.js) */
.forminator-ui .fdlm-min-counter {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #777771;
	text-align: right;
}

.forminator-ui .fdlm-min-counter.is-ok {
	color: var(--dark-green);
}

/* Zwischenüberschrift im Formular (HTML-Feld mit <p class="fdlm-form-subtitle">):
   wenig Abstand nach unten, damit Überschrift und Felder darunter zusammengehören */
.forminator-ui .fdlm-form-subtitle {
	margin: 12px 0 0;
	font-size: 16px; /* war 18px und wirkte neben den Feldern (v. a. mobil) zu wuchtig */
	line-height: 1.45;
}

.forminator-ui .forminator-row:has(.fdlm-form-subtitle) {
	margin-bottom: 15px !important;
}

/* Formular-Abschnitte (HTML-Feld mit <div class="fdlm-form-section"><h2>…</h2></div>):
   H2-Überschrift mit grüner Linie darüber, optional Hinweis <p class="fdlm-form-note"> */
.forminator-ui .fdlm-form-section {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 2px solid var(--green);
}

.forminator-ui .fdlm-form-section--first {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.forminator-ui .fdlm-form-section h2 {
	margin: 0;
	font-family: 'Massilia', sans-serif;
	font-weight: 800;
	font-size: 26px;
	/* Schmale Handys: kleiner, damit "Geschlechterverteilung" (ein Wort, ~10,9 × Schriftgröße breit) in die Zeile passt */
	font-size: clamp(20px, 6.7vw, 26px);
	line-height: 1.1;
	color: var(--black);
	overflow-wrap: break-word; /* Notbremse: lieber umbrechen als über den Rand ragen */
	hyphens: auto;
}

.forminator-ui .fdlm-form-section .fdlm-form-note {
	margin: 4px 0 0;
	font-size: 15px;
}

.forminator-ui .forminator-row:has(.fdlm-form-section) {
	margin-bottom: 15px !important;
}

/* Radio-Buttons / Checkboxen: Markierung pink statt blau (weiß wäre auf weiß unsichtbar),
   Glow beim Anklicken und wenn ausgewählt */
.forminator-ui .forminator-radio-bullet:before {
	background-color: var(--pink) !important;
}

.forminator-ui .forminator-checkbox-box {
	color: var(--pink) !important;
}

.forminator-ui .forminator-radio input:checked + .forminator-radio-bullet,
.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box,
.forminator-ui .forminator-radio input:focus-visible + .forminator-radio-bullet,
.forminator-ui .forminator-checkbox input:focus-visible + .forminator-checkbox-box {
	outline: none !important;
	border-color: #fff !important;
	box-shadow: var(--focus-glow) !important;
}

/* Status-Glow (Reihenfolge wichtig, spätere Regeln gewinnen):
   1. schwarz = gerade angeklickt (Regeln oben)
   2. grün  = ausgefüllt/ausgewählt und korrekt, Feld wieder verlassen
   3. rot   = Forminator meldet einen Fehler (.forminator-has_error; Fehlertext bleibt wie er ist)
             oder Instagram-Name ungültig (.fdlm-invalid, js/form-glow.js) */
.forminator-ui .fdlm-filled .forminator-input:not(:focus),
.forminator-ui .fdlm-filled .forminator-textarea:not(:focus),
.forminator-ui .fdlm-filled .select2-selection,
.forminator-ui .fdlm-filled .fdlm-insta-wrap:not(:focus-within),
.forminator-ui .forminator-radio input:checked:not(:focus-visible) + .forminator-radio-bullet,
.forminator-ui .forminator-checkbox input:checked:not(:focus-visible) + .forminator-checkbox-box {
	border-color: #fff !important;
	-webkit-box-shadow: var(--valid-glow) !important;
	box-shadow: var(--valid-glow) !important;
}

.forminator-ui .forminator-field.forminator-has_error .forminator-input,
.forminator-ui .forminator-field.forminator-has_error .forminator-textarea,
.forminator-ui .forminator-field.forminator-has_error .select2-selection,
.forminator-ui .forminator-field.forminator-has_error .fdlm-insta-wrap,
.forminator-ui .forminator-field.fdlm-invalid .fdlm-insta-wrap,
.forminator-ui .forminator-field.forminator-has_error .forminator-radio-bullet,
.forminator-ui .forminator-field.forminator-has_error .forminator-checkbox-box {
	border-color: #fff !important;
	-webkit-box-shadow: var(--error-glow) !important;
	box-shadow: var(--error-glow) !important;
}

button:focus-visible,
a:focus-visible {
	border-radius: var(--radius);
}

/* ======================================================
   LAYOUT HELPERS
====================================================== */

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}


/* ======================================================
   Fullscreen Preloader
====================================================== */
#preloader {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--violet);
	/* lila */
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: opacity 0.8s ease;
}

#preloader.fade-out {
	opacity: 0;
	pointer-events: none;
}

#preloader .hero {
	position: relative;
	width: 100%;
	height: 100%;
}

#preloader svg#curvePath {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#preloader .center-container {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--white);
}

#preloader h1 {
	font-size: 2.5rem;
}

/* Optional: SVG Pfad Layer */
#preloader path.cls-1 {
	stroke: var(--green);
}

.cls-1 {
	fill: none;
	stroke: #b1cd56;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 115px;
}

/* ================= CENTER CONTAINER (Hand + H1) ================= */

.center-container {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 15;
}

.center-container .hand-center {
	width: 300px !important;
	margin-bottom: -30px !important;
	/* Hand sitzt am oberen Rand des H1 */
	transition: transform 0.3s ease;
	z-index: 99;
}

.center-container h1,
.error-404 h1 {
	font-family: 'Massilia', system-ui, sans-serif;
	background: var(--pink);
	color: var(--white);
	font-size: 48px;
	line-height: 48px;
	font-weight: 800;
	/* ExtraBold */
	padding: 5px 10px;
	border-radius: 10px;
	text-align: center;
	z-index: 5;
	width: fit-content;
	margin: 0 auto;
}


.page-template-page-faq .title-group {
	background: var(--dark-green);
}

.page-template-page-faq .title-group-title h1 {
	background: var(--violet);
	color: var(--black);
}

.page-template-archive-partner .title-group {
	background: var(--blue);
}

.page-template-archive-partner .title-group-title h1 {
	background: var(--orange);
}


/* ======================================================
   HEADER (angepasst an neues Design)
====================================================== */

.site-header {
	background: var(--white);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 9999;
	max-width: 100vw;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
}

.logo {
	z-index: 10000;
	flex: 0 1 auto; /* darf auf sehr schmalen Handys (320px) schrumpfen */
	min-width: 0;
}

.logo img {
	max-width: min(250px, 100%);
	height: auto;
}

.nav-toggle {
	font-size: 32px;
	z-index: 10000;
	/* Allgemeiner Button-Stil gab 32px Innenabstand links/rechts -> Button 93px breit,
	   Logo + Button passten auf 320–360px nicht nebeneinander (Seite seitlich scrollbar) */
	flex: 0 0 auto;
	padding: 6px 8px;
	min-width: 44px;
	min-height: 44px; /* Mindestgröße zum Antippen */
	margin-left: 12px;
	line-height: 1;
}

/* Desktop Nav */
.main-nav {
	display: none;
}

.main-nav ul {
	list-style: none;
	/* FIX: Bulletpoints entfernen */
	margin: 0;
	padding: 0;
}

/* Eltern-Element vorbereiten */
.main-nav li {
	position: relative;
}

/* Submenu verstecken */
.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	/* wichtig für Animation/Position */
	opacity: 0;
	pointer-events: none;
	background: var(--white);
	min-width: 180px;
	transition: opacity 0.2s ease;
	z-index: 999;
	border-radius: 8px;
}

/* Submenu-Items untereinander */
.main-nav .sub-menu li {
	display: block;
}

/* Links im Submenu */
.main-nav .sub-menu a {
	display: block;
	padding: 8px 15px;
	background: none;
	color: var(--black);
}

/* Hover: Submenu anzeigen */
.main-nav li:hover>.sub-menu {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile Nav Overlay */
.mobile-nav {
	position: fixed;
	inset: 0;
	background: var(--white);
	z-index: 9999;

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.mobile-nav.open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav li {
	margin: 5px 0;
}

.mobile-nav a {
	background: var(--black);
	color: var(--white);
	font-weight: 300;
	font-size: 16px;
	/* kleiner -> kein Umbruch */
	white-space: nowrap;
	/* verhindert Zeilenbruch */
	border-radius: 8px;
	padding: 0px 10px 4px;
	font-size: 25px;
}

.mobile-nav a:hover {
	background: var(--green);
	color: var(--black);
}

/* Mobiles Menü: Liste unterhalb des Logos beginnen statt vertikal zentriert
   (mit vielen Einträgen rutschte sie sonst bis ans Logo). Header mobil ≈ 128px hoch. */
.mobile-nav {
	align-items: flex-start;
	padding: 160px 20px 40px;
	overflow-y: auto;
	overscroll-behavior: contain; /* Wischen im Menü scrollt nicht die Seite dahinter */
}

/* Menü offen: Seite dahinter nicht scrollbar (Klasse setzt js/custom-script.js) */
html:has(body.no-scroll),
body.no-scroll {
	overflow: hidden;
}

/* Eingeloggt: WordPress-Adminleiste (46px bzw. 32px) kommt oben noch dazu */
.admin-bar .mobile-nav {
	padding-top: 206px;
}

@media (min-width: 783px) {
	.admin-bar .mobile-nav {
		padding-top: 192px;
	}
}

/* Menüpunkt "Bewerbungsformular" hervorheben: pink statt schwarz, Hover bleibt grün.
   Die Klasse "nav-bewerbung" wird im Menü vergeben (Design → Menüs → Eintrag → CSS-Klassen). */
.main-nav .nav-bewerbung > a,
.mobile-nav .nav-bewerbung > a {
	background: var(--pink);
	color: var(--white);
}

.main-nav .nav-bewerbung > a:hover,
.main-nav .nav-bewerbung > a:focus-visible,
.mobile-nav .nav-bewerbung > a:hover,
.mobile-nav .nav-bewerbung > a:focus-visible {
	background: var(--green);
	color: var(--black);
}

.main-nav a {
	border-radius: 8px;
	padding: 0px 10px 4px;
}

/* Menü-Hover: Dunkle Schrift auf hellem Grün wirkt dünner als helle Schrift auf Schwarz.
   Ein haarfeiner Rand gleicht das aus, ohne dass der Button breiter wird (anders als font-weight). */
.main-nav a,
.mobile-nav a {
	-webkit-text-stroke: 0 transparent;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
	-webkit-text-stroke: 0.35px currentColor;
}

/* DESKTOP NAV FIX */
@media (min-width: 900px) {

	.main-nav {
		display: block;
	}

	.main-nav ul {
		display: flex;
		gap: 10px;
		flex-wrap: nowrap;
		/* verhindert Umbruch */
	}

	.main-nav a {
		background: var(--black);
		color: var(--white);
		font-weight: 300;
		font-size: 18px;
		/* kleiner -> kein Umbruch */
		white-space: nowrap;
		/* verhindert Zeilenbruch */
	}

	.main-nav a:hover {
		background: var(--green);
		color: var(--black);
	}

	.nav-toggle {
		display: none;
	}
}

/* ======================================================
   STARTSEITE (FINAL FIX)
====================================================== */

.map-location-section {
	display: flex;
	flex-direction: column;
}

/* SIDEBAR */
.map-sidebar {
	background: linear-gradient(180deg, #bfa8e6 0%, #a78ed6 100%);
	padding: 25px 20px;
}

/* Sidebar-Container */
.sidebar-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	/* für Flexbox overflow */
	overflow: scroll;
	/* verhindert, dass etwas überläuft */
}

.sidebar-inner::-webkit-scrollbar {
	display: none;
}

/* Location-Liste */
.sidebar-top {
	flex: 0 1 auto;
	/* nur so groß wie nötig, schrumpft bei Platzbedarf */
	overflow-y: auto;
	/* scrollt, falls viele Locations */
	min-height: 0;
}

.page-template-page-startseite .sidebar-top {
	flex: none;
	overflow: inherit;
}

/* Grußwort-Container mit Buttons */
.sidebar-bottom {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	/* Buttons immer sichtbar */
}

/* Ein einzelnes Grußwort */
.grusswort {
	display: none;
	/* standardmäßig eingeklappt */
	flex: 1 1 auto;
	/* füllt den restlichen Platz von sidebar-inner */
	min-height: 0;
	/* sehr wichtig für Flexbox + scroll */
	overflow-y: auto;
	/* Scrollbar innerhalb des Grußwortes */
	margin-top: 10px;
	background: var(--white);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
}

body .grusswort {
	
	position: relative;
	width: 100%;

	&:hover {
		cursor: pointer;
	}
}

/* Wenn Grußwort geöffnet wird */
.grusswort.open {
	display: flex;
}

.grusswort .gruss {
	/* display: none; */
}

.grusswort:hover .gruss {
	height: auto;
	overflow: clip;
}

body .grusswort::after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 20%;
}

/* Optional: Scrollbar unsichtbar für cleaner Look */
.sidebar-top::-webkit-scrollbar,
.sidebar-bottom::-webkit-scrollbar {
	display: none;
}

.map-title {
	display: inline-block;
	background: var(--pink);
	color: var(--white);
	padding: 0px 15px;
	border-radius: 12px;
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 20px;
	width: fit-content;
	padding-bottom: 6px;
}

.sidebar-top::-webkit-scrollbar,
.sidebar-bottom::-webkit-scrollbar {
	display: none;
}

/* WICHTIG: LISTE WIEDER SICHTBAR */
#location-list,
#artist-list {
	display: grid;
	margin: 0;
	margin-bottom: 20px;
	margin: 0 20px 20px;
}

ul.location-list {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin: 0;
	list-style: none;
	column-gap: 8px;
	row-gap: 8px;
	padding: 10px 0;
}

#location-list .location-item {
	display: inline-block;
}

#location-list .location-link {
	background: var(--white);
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
}

.location-list li {
	height: fit-content;
}

.location-list li a {
	background: var(--white);
	color: var(--black);
	padding: 0px 10px 2px;
	font-weight: 400;
	font-size: 18px;
	white-space: nowrap;
	border-radius: 8px;
}

.location-list li a:hover {
	background: var(--green);
}

ul.location-list li.hovered a {
	background: var(--green);
}

/* FILTER AUSBLENDEN */
.area-button {
	display: none !important;
}

/* GRUSSWORTE */
.gruss-buttons {
	margin-top: 10px;
}

.gruss-pill {
	display: flex;
	background: var(--black);
	color: var(--white);
	padding: 0px 12px 5px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 25px;
	margin-right: 24px;
	width: 100%;
	text-align: left;
	justify-content: space-between;
	align-items: center;
}

/* GRUSSWORT KONTAINER */
.grusswort {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: 12px;
	padding: 16px;
	margin-top: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* OBERE ZEILE: BILD + NAME/ROLLE */
.gruss-top {
	display: flex;
	gap: 16px;
	/* Abstand zwischen Bild und Text */
	margin-bottom: 12px;
}

/* BILD */
.gruss-top .bild {
	flex: 0 0 200px;
	/* feste Breite für Bild */
	height: 200px;
	/* Höhe anpassen */
	overflow: hidden;
	border-radius: 8px;
}

.gruss-top .bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bild passt sich an */
}

/* NAME UND ROLLE */
.gruss-container .namen {
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: normal;
}

.gruss-container .title {
	font-size: larger;
	background: var(--blue);
	padding: 5px 15px;
	border-radius: 10px;
	margin-bottom: 5px;
}

.gruss-container .rolle {
	font-weight: 300;
	font-size: 16px;
	color: #555;
}

/* TEXT UNTEN */
.gruss .grusstext {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

/* RESPONSIVE: kleiner Bildschirm */
@media (max-width: 600px) {
	.gruss-top {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
    
    body .grusswort {
    	width: 100%;
    }

	.gruss-pill {
		width: 100%;
	}

	.gruss .title {
		font-size: 16px;
	}

	.gruss .rolle {
		font-size: 13px;
	}
}

/* ======================================================
   MAP FINAL FIX
====================================================== */

.map-container {
	width: 100%;
	height: 100%;
}

#festival-map {
	width: 100%;
	height: 100%;
	min-height: 500px;
}

/* DESKTOP */
@media (min-width: 900px) {

	.map-container {
		flex: 1;
		height: auto;
	}

	#festival-map {
		height: 100%;
		min-height: unset;
	}
}

/* MAP FIX: KEIN ASPECT RATIO MEHR */
#festival-map {
	width: 100%;
	height: 100%;
	min-height: 500px;
}

/* DESKTOP */
@media (min-width: 900px) {

	.map-location-section {
		flex-direction: row;
		height: 80vh;
	}

	.map-sidebar {
		/*flex: 0 0 55%;*/
		flex: 0 0 35%;
		padding: 30px;
		padding-left: 42px;
	}

	.map-container {
		flex: 1;
		padding: 0;
		/* padding entfernt -> full width */
	}

	#festival-map {
		height: 100%;
		min-height: unset;
	}

	.map-title {
		font-size: 32px;
	}
}

/* ======================================================
   TILE SYSTEM (FIXED)
====================================================== */

.tile-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.location-tile {
	display: block;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	position: relative;
	transition: .25s;
}

.location-tile:hover img {
	filter: brightness(0.5);
}

/* 1:1 */
.location-tile img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	padding-top: 25px;
}

/* OVERLAY TITLE */
.location-info {
	font-size: 26px;
	line-height: 26px;
	position: absolute;
	margin: auto;
	width: fit-content;
	top: 0;
	left: 10px;
	right: 10px;

	padding: 6px 12px;
	border-radius: 15px;

	font-weight: 800;
	text-align: center;
	color: var(--black);
	z-index: 2;
}

/* Farben */
.location-item.r .location-info {
	background: var(--pink);
}

.location-item.o .location-info {
	background: var(--orange);
}

.location-item.l .location-info {
	background: var(--green);
}

/* =========================
   ALL ARCHIVE (GLOBAL)
========================= */

.all-archive-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.archive-title h1 {
	background: var(--pink);
	color: var(--white);
	padding: 6px 14px;
	border-radius: 15px;
	font-size: 30px;
	font-weight: 800;
}

.all-archive-bottom {
	max-width: 1300px;
	margin: auto;
}

.all-archive-bottom:not(.artist) {
	margin: 40px auto;
}

/* =========================
   TILE SYSTEM (SHARED)
========================= */

.archive-item {
	position: relative;
}

/* =========================
   LOCATIONS ARCHIVE (NEW SYSTEM)
========================= */

.all-archive.location .all-archive-top {
	position: relative;
}

a.archive-tile {
	border-radius: 0;
}

.title-group {
	width: 100%;
	display: flex;
	justify-content: center;
	background: var(--green);
	align-items: center;
}


.title-group svg {
	padding: 10px;
}

/* GRÜNER BALKEN */
.location-title-group {
	width: 100%;
	display: flex;
	justify-content: center;
	background: var(--green);
}

/* TITLE WRAPPER */
.all-archive.location .archive-title,
.all-archive.artist .archive-title,
.title-group-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 30px;
	position: relative;
}

/* TITLE STYLE */
.all-archive .archive-title h1,
.title-group-title h1,
.timetable-hero h1 {
	padding: 10px 12px;
	border-radius: 9px;
	font-family: 'Massilia', system-ui, sans-serif;
	font-size: 30px;
	font-weight: 800;
	margin: -40px 0 0;
}

.all-archive.location .archive-title h1,
.title-group-title h1,
.timetable-hero h1 {
	background: var(--pink);
	color: var(--white);
}

.all-archive.artist .archive-title h1 {
	background: var(--orange);
	color: var(--white);
}

/* HÄNDE ICON */
.all-archive.location .archive-title::before,
.all-archive.artist .archive-title::before,
.title-group-title::before,
.timetable-hero:before {
	content: "";
	width: 200px;
	height: 130px;
	background: url(https://fete-hannover.de/wp-content/uploads/2026/04/hand-herz-glitzer-scaled.png) no-repeat center/contain;
	z-index: 99;
	transform: translateY(-6px); /* Hand-Herz etwas höher, damit der Titel lesbar bleibt */
}

/* HÄNDE ICON */
.page-template-page-faq .title-group-title::before {
	background: url(https://fete-hannover.de/wp-content/uploads/2026/04/hand-herz-glitzer2-scaled.png) no-repeat center/contain;
}


/* DOWNLOAD BUTTON */
.download-all-button {
	display: inline-block;
	padding: 12px 20px;
	background: var(--black);
	color: var(--white);
	border-radius: 999px;
	font-weight: 700;
}

/* HOVER ARROW */
.archive-item a::before {
	content: "";
	position: absolute;
	width: 50px;
	height: 40px;
	background: url(https://fete-hannover.de/wp-content/uploads/2026/03/arrow.png) no-repeat center/contain;
	display: none;
	z-index: 2;
	inset: 0;
	margin: auto;
}

/* BLAUER BALKEN */
.artist-title-group {
	width: 100%;
	display: flex;
	justify-content: center;
	background: var(--blue);
}


.archive-item:hover img {
	filter: brightness(0.5);
}

.archive-item:hover a::before {
	display: block;
}

.archive-tile {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
}

.archive-tile img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	padding-top: 15px;
}

.archive-info {
	position: absolute;
	background: var(--white);
	border-radius: 999px;
	padding: 6px 10px;
	text-align: center;
	font-weight: 800;
}

/* ROL COLORS */
.archive-item.b .archive-info {
	background: var(--blue);
	color: black
}

.archive-item.o .archive-info {
	background: var(--orange);
	color: white
}

.archive-item.g .archive-info {
	background: var(--green);
	color: black
}

.archive-item.p .archive-info {
	background: var(--pink);
	color: white
}

.archive-item.v .archive-info {
	background: var(--violet);
	color: black
}

.archive-item.d .archive-info {
	background: var(--dark-green);
	color: white
}


.artist .archive-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 6px 10px;
	text-align: center;
	font-weight: 800;
	border-radius: 0;
}

.location .archive-info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0px 6px;
	text-align: center;
	font-weight: 800;
	border-radius: 0;
	width: fit-content;
	margin: auto;
	border-radius: 10px;
	font-size: 27px;
	line-height: 34px;
}

.location .archive-info span {
	position: relative;
	top: -2px;
}


/* =========================
   ARTIST FILTER
========================= */

.artist-filter-form {
	display: flex;
	gap: 10px;
	width: 100%;
	padding: 0 20px;
	max-width: 1300px;
}

.artist-filter-form input {
	flex: 1;
	height: 50px;
	border-radius: 12px;
	border: 1px solid #ccc;
	padding: 0 15px;
}

/* DROPDOWN FIX */
.custom-dropdown {
	position: relative;
	flex: 1;
}

.dropdown-toggle {
	height: 50px;
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	background: var(--white);
	cursor: pointer;
	border-radius: 12px;
	border: 1px solid #ccc;
	padding: 0 15px;
	font-family: 'Massilia-Variable', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: gray;
}

/* WICHTIG: default hidden */
.dropdown-menu {
	display: none;
	position: absolute;
	top: 110%;
	left: 0;
	width: 100%;
	background: var(--white);
	border-radius: 15px;
	padding: 10px;
	z-index: 100;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* nur wenn open */
.custom-dropdown.open .dropdown-menu {
	display: block;
}

.dropdown-menu label {
	display: flex;
	gap: 10px;
	padding: 5px 0;
	justify-content: flex-start;
	align-items: center;
}

.dropdown-menu input {
	width: 15px;
	height: 15px;
	max-width: 15px;
}

.selected-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	max-width: 1300px;
	justify-content: flex-start;
	padding: 0 20px;
}

.genre-pill {
	display: flex;
	gap: 10px;
	background: #111;
	color: var(--white);
	padding: 5px 10px 5px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	align-items: center;
}

.genre-pill button {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: #f3eee3;
	color: #111;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	max-width: 10px;
	padding: 17px 10px 3px;
}

.genre-pill span {
	margin-bottom: 2px;
}

/* =========================
   PARTNERS
========================= */

.partner-logos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: center;
}

.partner-logos img {
	width: 100%;
	max-height: 80px;
	object-fit: contain;
}

/* =========================
   SINGLE ARTIST
========================= */

.artist-links a {
	display: inline-block;
	background: var(--black);
	color: var(--white);
	padding: 10px 18px;
	border-radius: 15px;
	font-weight: 700;
}

.artist-links li {
	list-style: none;
}

.artist-links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	padding: 0 30px;
}

.artist-genre {
	border: 2px solid;
	border-radius: 7px;
	padding: 0px 5px 2px;
	line-height: normal;
}

.artist-content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.artist-photo img {
	width: 100%;
	border-radius: var(--radius);
}

.artist-timetable-list {
	list-style: none;
	padding: 0;
}

.artist-timetable {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

.favorite-btn {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
}

/* ======================================================
   SINGLE LOCATION (FINAL)
====================================================== */

/* BACKGROUND */
.location-single.color-orange {
	background: var(--orange);
}

.location-single.color-orange:not(.artist) .location-text {
	color: var(--white);
}

.location-single.color-pink {
	background: var(--pink);
}

.location-single.color-pink:not(.artist) .location-text {
	color: var(--white);
}

.location-single.color-green {
	background: var(--green);
}

.location-single.color-violet {
	background: var(--violet);
}

/* ARTIST */
.location-single.artist {
	background: var(--white);
}

.location-single.artist.color-orange .location-title-badge {
	background: var(--orange);
	color: var(--white);
}

.location-single.artist.color-pink .location-title-badge {
	background: var(--pink);
	color: var(--white);
}

.location-single.artist.color-green .location-title-badge {
	background: var(--green);
}

.location-single.artist.color-violet .location-title-badge {
	background: var(--violet);
}

/* LAYOUT */
.location-hero {
	display: flex;
	min-height: 85vh;
}

.location-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 25px;
	justify-content: space-between;
}

main.artist .location-left {
	justify-content: flex-start;
}

.location-right {
	flex: 1;
	position: relative;
}

.location-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* TITLE BADGE */
.location-title-badge {
	background: #fff;
	padding: 10px 20px;
	width: fit-content;
	border-radius: 12px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
}

.location-title-badge.artist {
	background: #fff;
	padding: 20px;
	padding-left: 42px;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	border-radius: 0;
	align-items: center;
	gap: 20px;
}

.location-title-badge h1 {
	margin: 0;
	font-size: 32px;
	line-height: 32px;
	margin-top: -3px;
}

/* TEXT */
.location-text {
	font-weight: 400;
	text-align: left;
	line-height: 1.6;
}

main.artist .location-text,
main.artist .location-timetable-list {
	padding: 0 30px;
	padding-left: 42px;
}

/* SCROLL CONTAINER */
.location-timetable-scroll {
	max-height: 260px;
	overflow-y: auto;
	padding-right: 6px;
}

/* LIST RESET */
.location-timetable-list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
	/*max-height: 200px;*/
	overflow: scroll;
}

/* ITEM */
.location-timetable {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--white);
	border-radius: 10px;
	margin-bottom: 10px;
}

main.artist .location-timetable {
	background: none;
	border: solid 2px;
}

main.artist .location-timetable a span:last-child {
	border-radius: 8px;
}

li.location-timetable:not(.personal):hover {
	background-color: var(--black);
}

li.location-timetable:hover a {
	color: var(--white);
}

li.location-timetable:hover a span:first-child {
	color: var(--white);
}

li.location-timetable:hover a span:last-child {
	color: var(--black);
	background-color: var(--white);
}

li.location-timetable:hover .favorite-btn {
	color: var(--white);
}

/* LINK (TEXT + TIME WRAPPER) */
.location-timetable a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--white);
	width: inherit;
}

/* TIME BADGE (LEFT BLACK BOX) */
.location-timetable a span:last-child {
	order: -1;
	/* zieht Zeit nach links */
	background: var(--black);
	color: var(--white);
	padding: 6px 10px;
	border-radius: 10px;
	font-weight: bold;
	width: 80px;
	text-align: center;
}

/* ARTIST NAME */
.location-timetable a span:first-child {
	font-size: 16px;
	color: var(--black);
}

/* FAVORITE BUTTON (HEART RIGHT) */
.favorite-btn {
	background: none;
	border: none;
	font-size: 25px;
	cursor: pointer;
	color: var(--black);
	padding: 0 10px;
}

.favorite-btn.is-favorite {
	color: var(--pink);
}

/* OPTIONAL: SCROLLBAR STYLING */
.location-timetable-scroll::-webkit-scrollbar {
	width: 6px;
}

.location-timetable-scroll::-webkit-scrollbar-thumb {
	background: #111;
	border-radius: 10px;
}

.location-timetable-scroll::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
}

/* MAP BUTTON */
.map-button {
	display: inline-block;
	background: var(--black);
	color: #fff;
	padding: 10px 18px 12px;
	border-radius: 12px;
	font-weight: 700;
	width: fit-content;
}

a.map-button:hover,
a.map-button:focus,
a.map-button:active,
a.map-button:visited {
	color: #fff;
}

ul.partner-list {
	list-style: none;
	margin: 0;
	display: flex;
	align-items: center;
	width: 100%;
	background: white;
	justify-content: space-around;
}

ul.partner-list li {
	padding: 10px;
}

.partner-list img {
	max-height: 100px;
	padding: 20px;
}

.location-left-info {
	padding: 50px 30px 0 42px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.location-timetable-list::-webkit-scrollbar {
	display: none;
}

/* PARTNERS */
.location-partners {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.location-partners img {
	height: 40px;
	object-fit: contain;
}

/* RESPONSIVE */
.mobile-only {
	display: none;
}

@media (max-width: 900px) {

	.location-hero {
		flex-direction: column-reverse;
	}

	.location-right img {
		aspect-ratio: 1/1;
	}

	.location-right {
		flex: none;
	}

	.desktop-only {
		display: none;
	}

	.mobile-only {
		display: block;
		position: absolute;
		top: 15px;
		left: 15px;
		z-index: 2;
	}

	.location-text {
		max-width: 100%;
	}

	.artist-filter-form {
		flex-direction: column;
	}

	.artist-filter-form input {
		flex: auto;
	}
}

/* ======================================================
   STICKER PAGE
====================================================== */

.sticker-page {
	padding: 30px 20px 60px;
	max-width: 1300px;
	margin: 0 auto;
}

/* INTRO */

.intro {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}

.intro h1 {
	font-family: 'Massilia', system-ui, sans-serif;
	font-size: 28px;
	margin-bottom: 10px;
	line-height: 28px;
}

.intro p {
	max-width: 600px;
	opacity: 0.8;
}

.license-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	height: 100px;
	background: var(--orange);
	color: var(--white);
	justify-content: center;
}

.license-inner {
	width: 100%;
	max-width: 1300px;
	padding: 0 20px;
}

.license ul {
	position: relative;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 20px;
}

.license ul li {
	width: 30%;
	margin: 10px 0;
	display: flex;
	align-items: center;
	line-height: normal;
}

.license li::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(https://fete-hannover.de/wp-content/uploads/2026/03/arrow.png) no-repeat center / contain;
	margin: auto;
	filter: brightness(0);
	margin-left: -30px;
}

/* ======================================================
   FILTER BUTTONS
====================================================== */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 25px;
}

.filters button {
	padding: 6px 14px 8px;
	border-radius: 8px;
	background: var(--black);
	color: var(--white);
	font-size: 14px;
	transition: var(--transition);
}

.filters button.active {
	background: var(--green);
	color: var(--black);
}

.filters button:hover {
	opacity: 0.8;
}


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

.sticker-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.sticker-item {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--transition);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0;
}

.sticker-item:hover {
	transform: scale(1.03);
}

/* HOVER ACTIONS */

.hover-actions {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: white;

	opacity: 0;
	transition: var(--transition);
}

.sticker-item:hover .hover-actions {
	opacity: 1;
}

.hover-actions span {
	background: var(--white);
	padding: 8px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
}


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

.popup {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.popup-inner {
	background: var(--white);
	padding: 20px;
	border-radius: var(--radius);
	text-align: center;
	max-width: 90%;
	position: relative;
}

.popup-inner img {
	margin-bottom: 15px;
	background-color: var(--violet);
}

.popup-inner button,
.popup-inner a {
	display: block;
	width: fit-content;
	margin: 0px auto;
	padding: 10px;
	border-radius: 10px;
	background: var(--black);
	color: var(--white);
}

.popup-inner button:hover,
.popup-inner a:hover {
	background: var(--green);
	color: var(--black);
}

button#close {
	position: absolute;
	right: 10px;
	width: 35px;
	height: 35px;
	text-align: center;
}


/* ======================================================
   LICENSE
====================================================== */

.license {
	margin-top: 50px;
}

.license h2 {
	font-size: 22px;
	margin-bottom: 20px;
}

.license-box {
	display: grid;
	gap: 10px;
	font-size: 14px;
}

/* ======================================================
   PERSONAL TIMETABLE
====================================================== */

main.timetable-page {
	height: 100%;
	background: var(--white);
}

/* ======================================================
   LAYOUT
====================================================== */

.timetable-layout {
	display: grid;
	grid-template-columns: 700px 1fr;
	min-height: 100%;
}

/* ======================================================
   LEFT SIDE
====================================================== */

.timetable-left {
	background: var(--white);

	display: flex;
	flex-direction: column;

	overflow-y: auto;
}

/* ======================================================
   HERO
====================================================== */

.timetable-hero {
	background: var(--dark-green);

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 40px;
	flex-direction: column;
}

.timetable-hero img {
	width: 100%;
	max-width: 420px;
	height: auto;
	display: block;
}

/* ======================================================
   RIGHT SIDE (MAP)
====================================================== */

.timetable-map {
	position: relative;
	min-height: 100%;
}

.timetable-map #festival-map {
	width: 100%;
	height: 100%;
}

/* ======================================================
   TOP
====================================================== */

.timetable-top {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	gap: 20px;

	padding: 34px 40px 10px;
}

/* ======================================================
   SORT WRAP
====================================================== */

.timetable-sort-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-direction: row-reverse;
	width: 100%;
	justify-content: space-between;
}

/* ======================================================
   DOWNLOAD ICON BUTTON
====================================================== */

.download-icon-button,
form.download-all button {
	width: fit-content;
	height: 52px;
	border: none;
	border-radius: 999px;
	background: var(--black);
	color: var(--white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	transition: 0.2s;
	padding: 5px 20px;
	font-size: larger;
}

.download-icon-button:hover {
	transform: scale(1.05);
}

form.download-all {
	padding: 0 40px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 30px 0;
}

/* ======================================================
   SELECT
====================================================== */

#sort-select {
	height: 42px;

	border: 2px solid var(--black);
	border-radius: 12px;

	background: var(--white);

	padding: 0 16px;

	font-size: 20px;
	font-weight: 700;

	cursor: pointer;

	outline: none;
}

/* ======================================================
   LIST
====================================================== */

.timetable-list {
	list-style: none;

	padding: 20px 40px 40px;
	margin: 0;

	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ======================================================
   ITEM
====================================================== */

.location-timetable {
	width: 100%;
}

.timetable-item-link {
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	min-height: 30px;

	border: 2px solid var(--black);
	border-radius: 10px;

	background: var(--white);

	overflow: hidden;

	color: var(--black);
	text-decoration: none;

	transition: 0.2s;
}

.timetable-item-link:hover {
	transform: translateY(-1px);
}

.tt-row {
	display: flex;
	width: 100%;
	gap: 15px;
	line-height: normal;
}

a.tt-location {
	background: var(--black);
	flex: 0.3;
	border-radius: 15px;
	text-align: center;
	justify-content: center;
}

/* ======================================================
   LEFT CONTENT
====================================================== */

.tt-left {
	display: flex;
	align-items: center;
	flex: 1;
	border: solid 2px;
	border-radius: 16px;
	overflow: hidden;
	justify-content: space-between;
}

/* ======================================================
   TIME
====================================================== */

.ti-time {
	width: 86px;
	min-width: 86px;
	height: 100%;
	background: var(--black);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

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

.tt-content {
	display: flex;
	align-items: center;
	gap: 12px;

	padding: 0 18px;

	flex-wrap: wrap;
}

.ti-artist {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	padding: 5px;
}

.ti-location {
	font-size: 18px;
	opacity: 0.7;
}

/* ======================================================
   REMOVE BUTTON
====================================================== */

.remove-btn {
	width: 58px;
	min-width: 58px;
	height: 30px;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--black);
	font-size: 28px;
	line-height: 1;
	transition: 0.2s;
	display: flex;
	padding: 0;
	align-items: center;
	justify-content: center;
	margin-top: -5px;
}


.remove-btn:hover {
	transform: scale(1.1);
}

/* ======================================================
   EMPTY
====================================================== */

.timetable-list .empty {
	padding: 20px 0;
	opacity: 0.6;
	font-size: 18px;
}

/* ======================================================
   DOWNLOAD ALL BUTTON
====================================================== */

.download-all-button {
	margin: 0 40px 40px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;

	padding: 0 20px;

	border-radius: 8px;

	background: var(--black);
	color: var(--pink);

	text-align: center;
	text-decoration: none;

	font-size: 20px;
	font-weight: 400;
	line-height: 1;

	transition: 0.2s;
}

.download-all-button:hover {
	transform: translateY(-1px);
}

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

@media (max-width: 1100px) {

	.timetable-layout {
		grid-template-columns: 1fr;
	}

	.timetable-map {
		height: 60vh;
	}

}

@media (max-width: 900px) {

	.timetable-left {
		width: 100%;
	}

	.timetable-top {
		padding: 24px 20px 0;
	}

	.timetable-list {
		padding: 20px;
	}

	.download-all-button {
		margin: 0 20px 20px;
	}

	.license ul li {
		width: 100%;
	}

	.tt-row {
		flex-direction: column;
		gap: 0;
	}

	.tt-left {
		border-radius: 10px 10px 0 0;
	}

	a.tt-location {
		border-radius: 0 0 10px 10px;
	}

}

@media (max-width: 700px) {

	.timetable-hero {
		padding: 24px;
	}

	.timetable-sort-wrap {
		width: 100%;
	}

	#sort-select {
		width: 100%;
		font-size: 18px;
	}

	.tt-content {
		padding: 0 12px;
	}

	.ti-artist {
		font-size: 20px;
	}

	.ti-location {
		font-size: 14px;
	}

	.ti-time {
		background: none;
		color: var(--black);
	}

	.remove-btn {
		width: 48px;
		min-width: 48px;
	}

}

/* ======================================================
   FAQ
====================================================== */

/* Container max-width */
.faq-page {
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}

.faq-intro p.p1,
.faq-rules p.p1 {
	font-size: 18px;
	margin-bottom: 20px;
}

.faq-intro p.p1 {
	font-size: 26px;
}

.faq-list {
	margin-bottom: 85px;
}

.faq-awareness-left {
	flex: 1;
}

.col {
	width: 100%;
}

.faq-item {
	border: solid;
	padding: 10px 20px;
	border-radius: 12px;
}

.faq-item ul,
.faq-rules ul {
	margin: 0 20px;
}

/* Intro / Regeln */
.faq-intro,
.faq-rules-wrapper {
	margin-bottom: 30px;
}

#regeln ol {
	margin: 0 30px;
}

#regeln li {
	margin-bottom: 8px;
}

/* Toggle Leichte Sprache */
.faq-toggle {
	text-align: right;
	margin-bottom: 20px;
}

.faq-rules {
	flex: 1;
}

#toggle-leichte-sprache {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	padding: 8px 12px 8px 40px;
	/* Platz für Icon links */
	cursor: pointer;
	border: 1px solid var(--black);
	border-radius: 4px;
	background-color: var(--white);
	position: relative;
	transition: background 0.3s ease;
}

/* Icon als Hintergrund links */
#toggle-leichte-sprache::before {
	content: "";
	position: absolute;
	left: 8px;
	width: 24px;
	height: 24px;
	background-image: url('https://fete-hannover.de/wp-content/uploads/2026/03/leichtesprache.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Hover-Farbe */
#toggle-leichte-sprache:hover {
	background-color: #f0f0f0;
}

/* FAQ Fragen/Antworten */
.faq-item {
	margin-bottom: 10px;
}

.faq-question {
	font-weight: bold;
	cursor: pointer;
	position: relative;
	padding-right: 20px;
	font-size: 28px;
	line-height: 28px;
	margin: 0;
}

.faq-question::after {
	content: "▼";
	position: absolute;
	right: 0;
	transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.faq-answer {
	display: none;
	margin-bottom: 1rem;
}

.faq-item.active .faq-answer {
	display: block;
}

/* Hidden-Klasse für Toggle */
.hidden {
	display: none;
}

/* Hr-Abstände */
.faq-list hr,
.faq-intro hr,
.faq-rules hr {
	margin: 20px 0;
	border: none;
	border-top: 1px solid #ccc;
}

/* Skip Link */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000;
	color: var(--white);
	padding: 8px;
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}

/* Screenreader */
.sr-only {
	position: absolute;
	left: -9999px;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
	.col {
		width: 100%;
	}
}

/* ======================================================
   FOOTER (FINAL)
====================================================== */

.site-footer {
	background: #fff;
	padding: 40px 30px;
	font-size: 14px;
	box-shadow: 0px 15px 40px gray;
	position: relative;
}

/* Desktop: 4 Spalten gleichmäßig verteilt
   (Rechtliches | Folge uns | Design | Veranstaltet von) */
.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	align-items: start;
	gap: 40px;
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 180px;
}

.footer-copy {
	margin: 0 0 10px 0;
	font-weight: 600;
}

.footer-col strong {
	font-weight: 700;
	font-size: 14px;
}

.footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav li {
	margin-bottom: 6px;
}

.footer-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--black);
	opacity: 0.8;
}

.footer-nav a:hover,
.footer-nav a:focus {
	opacity: 1;
	text-decoration: underline;
}

/* SOCIAL ICONS */
.social-nav .icon {
	display: inline-flex;
}

/* LOGOS: nebeneinander statt untereinander */
.footer-logos {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

footer img {
	max-width: 140px;
	height: auto;
	padding: 5px;

}

/* MOBILE */
@media (max-width: 900px) {
	/* Footer mobil: "Folge uns" + "Design" nebeneinander,
	   darunter "Veranstaltet von" (Logos nebeneinander), ganz unten © + Impressum/Datenschutz */
	.footer-inner {
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
		gap: 30px 20px;
	}

	.footer-col {
		min-width: 0;
	}

	.footer-col--social {
		order: 1;
	}

	.footer-col--design {
		order: 2;
	}

	.footer-col--org {
		order: 3;
		grid-column: 1 / -1;
	}

	.footer-col--legal {
		order: 4;
		grid-column: 1 / -1;
		padding-top: 20px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	div.badge-container {
		top: 70%;
	}

	.title-group .kringel-arrow__svg,
	.title-group .sterne-oben__svg {
		width: 100px;
		max-height: fit-content;
	}

	.title-group {
		flex-direction: column;
	}
}

/* ======================================================
   TABLET
====================================================== */

@media (min-width: 600px) {

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

	.intro h1 {
		font-size: 36px;
	}

	.tile-list,
	#location-list {
		grid-template-columns: repeat(2, 1fr);
	}

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


/* ======================================================
   DESKTOP
====================================================== */

@media (min-width: 900px) {

	.header {
		padding: 20px 40px;
	}

	.main-nav {
		display: block;
	}

	.main-nav ul {
		display: flex;
		gap: 15px;
	}

	.main-nav a {
		background: var(--black);
		color: var(--white);
		font-weight: 300;
	}

	.main-nav .cta-btn a:hover {
		background: var(--green);
		color: var(--black);
	}

	.main-nav .cta-btn a {
		background: var(--white);
		color: var(--black);
		font-weight: 300;
		border: 1px solid var(--black);
	}

	.main-nav a:hover {
		background: var(--green);
		color: var(--black);
	}

	.nav-toggle {
		display: none;
	}

	.map-container {
		flex: 1;
		height: auto;
	}

	#festival-map {
		height: 100%;
	}

	.map-title {
		font-size: 32px;
	}

	.area-pill {
		padding: 8px 16px;
	}

	.sticker-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 20px;
	}

	.popup-inner {
		max-width: 400px;
	}

	.tile-list,
	#location-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}

	.artist-content-wrapper,
	.location-content-wrapper {
		flex-direction: row;
	}

	.artist-info,
	.location-info {
		flex: 1;
	}

	.artist-photo,
	.location-photo {
		flex: 1;
	}

	.partner-logos {
		grid-template-columns: repeat(5, 1fr);
	}

	.footer-container {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}


.floating-badges {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9998;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap-reverse;
	align-content: flex-end;
}

.floating-badge {
	position: relative;

	display: flex;
	align-items: center;

	width: 80px;
	height: 80px;

	background: #fff;
	border-radius: 12px 0 0 12px;
	overflow: hidden;

	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);

	transition: width .3s ease;
}

.floating-badge img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	flex-shrink: 0;
	padding: 10px;
}

.floating-badge-tooltip {
	opacity: 0;
	padding: 0 20px 0 10px;
	transition: opacity .2s ease;
	line-height: normal;
	color: var(--black);
}

/* Desktop */
.floating-badge:hover {
	width: 320px;
}

.floating-badge:hover .floating-badge-tooltip {
	opacity: 1;
}

/* Mobile */
.floating-badge.opened {
	width: 320px;
}

.floating-badge.opened .floating-badge-tooltip {
	opacity: 1;
}

.merch-box {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 12px;
	max-width: 700px;
	margin: 0 auto 30px;
}

.merch-box__image {
	width: 50%;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.merch-box__text {
	flex: 1;
}


/* ======================================================
   Map Amenity Icons (WC / Trinkwasser)
====================================================== */

.map-amenity-icon {
	background: transparent !important;
	border: none !important;
}

.map-amenity-icon__svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #5b2a86;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	color: #5b2a86;
	font-size: 18px;
	line-height: 1;
	overflow: hidden;
}

.map-amenity-icon__svg svg {
	width: 18px;
	height: 18px;
	display: block;
}

.map-amenity-icon--wc .map-amenity-icon__svg {
	background: #3a86ff;
	border-color: #1f5fc4;
	color: #fff;
}

.map-amenity-icon--water .map-amenity-icon__svg {
	background: #06d6a0;
	border-color: #04a87a;
	color: #fff;
}

.map-amenity-icon__svg svg {
	width: 18px;
	height: 18px;
	display: block;
}

@media (max-width: 500px) {
	.map-amenity-icon__svg {
		width: 28px;
		height: 28px;
	}
	.map-amenity-icon__svg svg {
		width: 16px;
		height: 16px;
	}
}

.location-note {
	display: none;
}
body .leaflet-marker-pane {
	z-index: 200;
}

/* ======================================================
   DANKE SEITE
====================================================== */

.danke-page {
	max-width: 1300px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}


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

.danke-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 50px;
}


.danke-header .stars {
	display: inline-flex;
	background: var(--pink);
	color: var(--white);

	font-size: 42px;
	font-weight: 800;
	line-height: 1;

	padding: 10px 20px 14px;
	border-radius: 14px;

	margin-bottom: 30px;
}


.danke-text {
	max-width: 800px;
	font-size: 22px;
	line-height: 1.5;
}


.danke-text p {
	margin-bottom: 20px;
}



/* ======================================================
   GALERIE
====================================================== */

.danke-gallery {
	margin: 50px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 35px;
}


.gallery-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}


.gallery-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--white);
}


.gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .3s ease;
}


.gallery-item:hover img {
	transform: scale(1.03);
}


/* Copyright */

.gallery-item figcaption {
	padding: 8px 10px;

	font-size: 13px;
	line-height: 1.2;
	text-align: right;

	color: rgba(28,28,28,.65);
}



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

.danke-gallery .button,
.danke-buttons .button {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: var(--black);
	color: var(--white);

	padding: 8px 18px 10px;

	border-radius: 999px;

	font-size: 22px;
	font-weight: 700;

	transition: var(--transition);
}


.danke-gallery .button:hover,
.danke-buttons .button:hover {

	background: var(--green);
	color: var(--black);

}



/* ======================================================
   BUTTON BLOCK
====================================================== */

.danke-buttons {

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	gap: 15px;

	margin-top: 60px;
}



/* ======================================================
   TABLET
====================================================== */

@media (min-width:600px) {

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

}



/* ======================================================
   DESKTOP
====================================================== */

@media (min-width:900px) {


	.danke-page {
		padding-top: 70px;
	}


	.danke-header .stars {

		font-size: 56px;

	}


	.danke-text {

		font-size: 26px;

	}


	.gallery-grid {

		grid-template-columns: repeat(5, 1fr);
		gap: 25px;

	}


	.gallery-item:nth-child(even) {
		margin-top: 40px;
	}


	.danke-buttons {

		gap: 25px;

	}


}