/* Hoope Park: Handy-Menü nach dem Vorbild gimar.co.uk.
   Gilt nur bis 1109 px — an genau diesem Punkt schaltet dieses Projekt vom
   Desktop-Menü (Liste 16) auf das Handy-Menü (Liste 64) um, siehe
   `hoope-zweimenue` im mu-Plugin. Die Desktop-Leiste bleibt unberührt.

   Farben aus dem Avada-Farbsatz dieser Seite, am 30.08.2026 gemessen:
   --awb-color1 #ffffff · color2 #f7f7f7 · color4 #fe2e2e (CI-Rot) · color8 #222222.
   Schrift: Montserrat 700. */

@media (max-width: 1109px) {

	/* ------------------------------------------------------------------
	   Die aufgeklappte Liste. Sie bleibt, wo sie ist: absolut positioniert
	   unter dem Logo, über der Seite. Kein Vollbild — anders als bei GIMAR,
	   wo der Kopfbereich mit übernommen wurde.
	   ------------------------------------------------------------------ */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] {
		background: #ffffff !important;
		border-top: 3px solid #fe2e2e !important;
		box-shadow: 0 14px 28px rgba(0, 0, 0, .22) !important;
		padding-bottom: 0 !important;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li.awb-menu__main-li {
		border: 0 !important;
		border-bottom: 1px solid #ececec !important;
		background: transparent !important;
		position: relative;
	}

	/* ------------------------------------------------------------------
	   Hauptpunkte: zentriert und deutlich größer.
	   Gemessen am 30.08.2026 vorher: 18 px, linksbündig, 65 px Zeilenhöhe.
	   Neu: bis 25 px, zentriert, 54 px — die Liste wird dadurch trotz
	   größerer Schrift kürzer und die Schaltfläche darunter bleibt sichtbar.
	   Ein Punkt, dessen längstes Wort nicht in die Zeile passt, wird vom
	   Skript einzeln verkleinert; alle anderen bleiben groß.
	   ------------------------------------------------------------------ */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > a.awb-menu__main-a {
		display: block !important;
		text-align: center !important;
		font-size: var(--hoope-menue-groesse, clamp(19px, 6.2vw, 25px)) !important;
		line-height: 1.15 !important;
		font-weight: 700 !important;
		color: #222222 !important;
		padding: 0.72rem 3.4rem !important;
		min-height: 0 !important;
		height: auto !important;
		border: 0 !important;
		text-decoration: none !important;
		overflow-wrap: break-word;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > a.awb-menu__main-a .menu-text {
		display: inline !important;
	}

	/* Avada legt hinter jeden Punkt zwei Farbflächen. Sie sind für die
	   Desktop-Leiste gedacht und würden hier über die Trennlinien laufen. */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > .awb-menu__main-background-default,
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > .awb-menu__main-background-active {
		display: none !important;
	}

	/* Die Seite, auf der man steht: nur Schriftfarbe, keine Fläche. Flächig
	   rot bleibt der Kontakt-Schaltfläche vorbehalten, sonst konkurrieren zwei
	   rote Blöcke in derselben Liste. */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li.current-menu-item > a.awb-menu__main-a,
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li.current-menu-ancestor > a.awb-menu__main-a {
		background: none !important;
		color: #fe2e2e !important;
	}

	/* Rückmeldung beim Antippen: ohne sie bleibt bis zum Seitenwechsel offen,
	   ob der Klick angekommen ist. */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] a:active {
		background: #fe2e2e !important;
		color: #ffffff !important;
	}

	/* ------------------------------------------------------------------
	   Der Haken rechts für aufklappbare Punkte. Avada bringt ihn als eigenen
	   Knopf mit — der bleibt, er wird nur größer, rot und mittig.
	   ------------------------------------------------------------------ */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > button.awb-menu__open-nav-submenu_mobile {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 3.4rem !important;
		height: 100% !important;
		max-height: 3.6rem !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: none !important;
		border: 0 !important;
		color: #fe2e2e !important;
		cursor: pointer;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > button.awb-menu__open-nav-submenu_mobile::before {
		font-size: 26px !important;
		line-height: 1 !important;
		color: #fe2e2e !important;
		transition: transform .25s ease;
	}

	/* Aufgeklappt zeigt der Haken nach oben. Avada markiert den offenen Zweig
	   über `aria-expanded` am Knopf selbst. */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li > button.awb-menu__open-nav-submenu_mobile[aria-expanded="true"]::before {
		transform: rotate(180deg);
	}

	/* ------------------------------------------------------------------
	   Untermenü: helle Fläche, kleinere zentrierte Punkte.
	   Das Auf- und Zuklappen macht weiterhin Avada — hier wird nur das
	   Aussehen gesetzt, damit die Theme-Mechanik unangetastet bleibt.
	   ------------------------------------------------------------------ */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] ul.awb-menu__sub-ul {
		background: #f7f7f7 !important;
		border: 0 !important;
		padding: 0.35rem 0 0.5rem !important;
		box-shadow: none !important;
		max-width: none !important;
		width: 100% !important;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] ul.awb-menu__sub-ul li {
		border: 0 !important;
		background: transparent !important;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] ul.awb-menu__sub-ul a.awb-menu__sub-a {
		display: block !important;
		text-align: center !important;
		font-size: 16.5px !important;
		line-height: 1.3 !important;
		font-weight: 500 !important;
		color: #444444 !important;
		padding: 0.58rem 1.2rem !important;
		min-height: 0 !important;
		height: auto !important;
		border: 0 !important;
		background: transparent !important;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] ul.awb-menu__sub-ul li.current-menu-item > a.awb-menu__sub-a {
		color: #fe2e2e !important;
		font-weight: 700 !important;
	}

	/* ------------------------------------------------------------------
	   Fußbereich: Kontakt-Schaltfläche und Sprachwahl.
	   Er ist der letzte Listeneintrag, weil die aufgeklappte Liste absolut
	   positioniert über der Seite liegt — alles außerhalb läge dahinter.
	   ------------------------------------------------------------------ */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li.hoope-menue-fuss {
		display: block !important;
		list-style: none !important;
		border: 0 !important;
		background: #ffffff !important;
		padding: 0.9rem 1.1rem 1.2rem !important;
		text-align: center !important;
	}

	/* Die Schaltfläche in der Hausfarbe. Sie ist der einzige flächig rote
	   Block in der Liste und trägt dadurch den Blick. */
	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li.hoope-menue-fuss a.hoope-menue-cta {
		display: block !important;
		background: #fe2e2e !important;
		color: #ffffff !important;
		font-size: 20px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.045em !important;
		padding: 0.85rem 1.2rem !important;
		border: 0 !important;
		border-radius: 3px !important;
		text-decoration: none !important;
	}

	.awb-menu.hoope-menue-mobil ul[id^="menu-hoope-mobil"] > li.hoope-menue-fuss a.hoope-menue-cta:active {
		background: #c11a1a !important;
		color: #ffffff !important;
	}

	/* Sprachwahl */
	.hoope-menue-sprachen {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 1.15rem !important;
		margin-top: 1rem !important;
	}

	/* 🔴 `flex` und `width` müssen ausdrücklich gesetzt werden: Avada gibt jedem
	   <a> in der Menüliste die volle Breite. Die drei <span> ohne Übersetzung
	   waren dadurch richtig schmal, die verlinkte Flagge dagegen 395 px breit —
	   der Rahmen der aktiven Sprache lief quer über den halben Fußbereich. */
	.awb-menu.hoope-menue-mobil .hoope-menue-sprachen .hoope-flagge {
		display: block !important;
		flex: 0 0 auto !important;
		width: auto !important;
		height: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		background: none !important;
		line-height: 0 !important;
		padding: 3px !important;
		border: 2px solid transparent !important;
		border-radius: 3px !important;
		text-decoration: none !important;
	}

	/* Die Sprache, die gerade ausgeliefert wird, bekommt einen Rahmen. */
	.awb-menu.hoope-menue-mobil .hoope-menue-sprachen .hoope-flagge-aktiv {
		border-color: #fe2e2e !important;
	}

	/* 🔴 Solange es die Übersetzung nicht gibt, ist die Flagge sichtbar, aber
	   kein Link — ein Klick liefe sonst auf einen 404. */
	.awb-menu.hoope-menue-mobil .hoope-menue-sprachen .hoope-flagge-inaktiv {
		opacity: .38 !important;
		cursor: default !important;
	}

	.hoope-menue-sprachen svg {
		width: 44px;
		height: 29px;
		display: block;
		border: 1px solid rgba(0, 0, 0, .14);
	}
}

/* Auf dem Desktop trägt die Liste 16 das Menü; der Fußbereich gehört dort
   nicht hin und wäre in der waagerechten Leiste ohnehin ein Fremdkörper. */
@media (min-width: 1110px) {
	.hoope-menue-fuss {
		display: none !important;
	}
}

/* ==================================================================
   Beitragstitel: H1 statt H2, aber in der bisherigen Größe.

   🔴 Der Titel im Avada-Layout „Single Post Page PTB" stand als H2 — jeder
   Beitrag hatte dadurch **keine einzige H1**, gemessen am 31.08.2026 über alle
   18 Beiträge in allen drei Sprachen. Mit `size="1"` im Baustein steht die H1,
   Avada setzt dann aber seine H1-Typografie ein: `--fontSize` sprang von 54
   auf 72. Hier zurück auf den gewohnten Wert — die Auszeichnung ändert sich,
   das Aussehen nicht.
   ================================================================== */
/* ★ `!important` ist hier nötig, nicht bequem: Avada schreibt `--fontSize:72`
   als **Inline-Style** an das Element, und ein Inline-Wert schlägt jede Regel
   aus einer Datei — außer sie trägt `!important`. */
.single-post .fusion-title h1.fusion-title-heading {
	--fontSize: 54 !important;
	font-size: 54px !important;
	line-height: 1.3 !important;
}

@media (max-width: 800px) {
	.single-post .fusion-title h1.fusion-title-heading {
		font-size: 34px !important;
	}
}

/* ==================================================================
   Sprachlasche am rechten Rand, Vorbild edirtarena.de.
   Dort gemessen am 31.08.2026: Kachel 58 × 47 px, Radius 10 px,
   `position:fixed; right:8px`.

   Zwei Abweichungen vom Vorbild, beide gewollt:
   • Alle drei Flaggen stehen dauerhaft untereinander statt bei Hover
     aufzuklappen — Vorgabe vom 31.08.2026.
   • Die Kachel steht in #222222 (--awb-color8) statt in E-Dirts
     #0e1418; die aktuelle Sprache trägt den roten CI-Rand.
   ================================================================== */

/* Unter 1110 px stehen die Flaggen schon im Handy-Menü. */
.hoope-sprachlasche {
	display: none;
}

@media (min-width: 1110px) {

	.hoope-sprachlasche {
		display: block;
		position: fixed;
		right: 8px;
		/* 🔴 Fester Abstand von oben, NICHT `calc(50% - x)`.
		   Der Pfeil des Kalender-Sliders (`.hoope-slider__pfeil--vor`) sitzt am
		   selben rechten Rand und steht bei **jeder** Fensterhöhe auf y 434–486
		   — er hängt am Slider, nicht am Fenster. Eine an 50 % gekoppelte
		   Lasche wandert dagegen mit: gemessen am 31.08.2026 über sieben Höhen
		   lag sie bis 900 px frei, ab 1000 px genau auf dem Pfeil (in Firefox
		   auf großen Monitoren also regelmäßig).
		   Mit dem festen Wert steht sie auf y 200–347, rund 87 px über dem
		   Pfeil — unabhängig davon, wie hoch das Fenster ist. */
		top: 200px;
		/* 🔴 Über dem Kopfbereich: dessen Container trägt --awb-z-index:20051.
		   Mit einem kleineren Wert verschwindet die Lasche hinter der
		   Kopfgrafik, sobald man nach oben scrollt. */
		z-index: 20060;
		line-height: 0;
	}

	.hoope-sprachlasche .hsl-liste {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.hoope-sprachlasche .hsl-flagge {
		display: block;
		background: #222222;
		border: 2px solid transparent;
		border-radius: 10px;
		padding: 8px 10px;
		box-shadow: -3px 3px 12px rgba(0, 0, 0, .28);
		line-height: 0;
		text-decoration: none;
		transition: background .18s ease;
	}

	/* Die Sprache, die gerade ausgeliefert wird. */
	.hoope-sprachlasche .hsl-aktuell {
		border-color: #fe2e2e;
	}

	.hoope-sprachlasche a.hsl-flagge:hover,
	.hoope-sprachlasche a.hsl-flagge:focus {
		background: #fe2e2e;
	}

	/* Ohne Übersetzung: sichtbar, aber kein Ziel. */
	.hoope-sprachlasche .hsl-inaktiv {
		opacity: .45;
		cursor: default;
	}

	.hoope-sprachlasche svg {
		width: 38px;
		height: 25px;
		display: block;
		border: 1px solid rgba(255, 255, 255, .25);
	}

	@media (prefers-reduced-motion: reduce) {
		.hoope-sprachlasche .hsl-flagge {
			transition: none;
		}
	}
}