678ad3fa-ab08-4264-b73b-383c58bdaf75.png
bd2c8acf-ab07-4e21-bd19-ab24f4f0e6e0.png
wir müssen noch den zindex oderso nachschauen weil bei manchen internetbrowsern irgendwie das popupfenster und der header nicht wie bei mir gleichmäßig hinter der nav angezeigt werden

Ja, das sieht tatsächlich nach einem Stacking-/z-index-Problem aus.

In deiner aktuellen custom.css steht der Header bei:

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	...
}


Gleichzeitig haben wir im Hero mehrere eigene Ebenen; beim gefilterten Hero z. B. Bild 0, Filter 1, Inhalt 2. 

 Das Popover besitzt nochmals eigene positionierte Elemente. Dadurch können insbesondere durch transform, backdrop-filter und eigene z-index-Werte zusätzliche Stacking Contexts entstehen, die Browser etwas unterschiedlich behandeln.

Ich würde deshalb nicht einfach blind 999 auf 99999 erhöhen, sondern die Ebenen einmal sauber festlegen:

Navigation/Header       10000
Dropdown-Menüs          10100

Hero insgesamt          0
Hero Bild               0
Hero Filter             1
Hero Text               2
Hero Popover            z. B. 20
Dann liegt alles vom Hero einschließlich des geöffneten Formulars sicher unter der Navigation.

Damit ich dir das direkt korrekt und wieder als vollständige Dateien geben kann, schick mir bitte noch die aktuelle:

W:\8.4\ragbit_829170\typo3conf\ext\ragbittest\Resources\Public\Css\hero-popover.css

Die ist hier gerade die entscheidende Datei, weil wir ihren aktuellen z-index noch prüfen müssen. Danach passe ich hero-popover.css und custom.css zusammen an.



hero-popover.css
Datei

Ja, ich sehe jetzt die Stelle. Im Popover selbst steht z-index: 50. 

 Der Desktop-Header hat derzeit z-index: 999, mobil sogar 4000. 

 


Nur die Zahlen sind aber nicht das eigentliche Problem. backdrop-filter, transform und das animierte Popover erzeugen eigene Stacking Contexts. Deshalb kann das browserabhängig unterschiedlich aussehen.

Sauber wäre:

.site-header {
	z-index: 10000;
	isolation: isolate;
}

section.hero {
	z-index: 0;
	isolation: isolate;
}
Damit wird der gesamte Hero inklusive Textblock, Popover, Sprechblase und Formular in eine Ebene eingeschlossen und kann niemals über den Header gelangen. Der Popover darf intern weiterhin z-index: 50 haben. Das ist sogar besser, weil er dann innerhalb des Heros vor dessen anderen Inhalten bleibt. 


Das Untermenü können wir zusätzlich innerhalb des Headers auf z-index: 100 belassen – da der gesamte Header bereits auf Ebene 10000 liegt, ist das ausreichend.

Ich würde daher hero-popover.css gar nicht ändern. Die Korrektur gehört zentral in:

W:\8.4\ragbit_829170\typo3conf\ext\ragbittest\Resources\Public\Css\custom.css

Schick mir bitte noch deine aktuelle custom.css. Dann gebe ich sie dir komplett angepasst zurück, damit wir nicht versehentlich mit der älteren Version arbeiten.



custom(4).css
Datei


Analysiert
from pathlib import Path

source = Path("/mnt/data/custom(4).css")
text = source.read_text(encoding="utf-8", errors="replace")

# Die hochgeladene Datei enthält vor dem eigentlichen CSS noch alten Chat-/Arbeitsinhalt.
# Wir übernehmen deshalb nur den tatsächlichen CSS-Teil ab dem BASIS-Block.
start_marker = "/* =========================\n   BASIS\n   ========================= */"
start = text.find(start_marker)
if start == -1:
    raise RuntimeError("Der Beginn des eigentlichen CSS wurde nicht gefunden.")

css = text[start:]

old_header = """\.site-header {
	position: sticky;
	top: 0;
	z-index: 999;

	width: 100%;"""
# normal string without escaping dot
old_header = """.site-header {
	position: sticky;
	top: 0;
	z-index: 999;

	width: 100%;"""

new_header = """.site-header {
	position: sticky;
	top: 0;

	z-index: 10000;
	isolation: isolate;

	width: 100%;"""

if old_header not in css:
    raise RuntimeError("Der erwartete .site-header-Block wurde nicht gefunden.")
css = css.replace(old_header, new_header, 1)

old_hero = """section.hero {
	position: relative;

	display: flex;"""

new_hero = """section.hero {
	position: relative;

	/*
	 * Der komplette Hero bildet einen eigenen
	 * Stacking Context unterhalb des Headers.
	 * Dadurch können Hero-Content und Popover
	 * auch mit eigenem z-index nicht über die
	 * Navigation gelangen.
	 */
	z-index: 0;
	isolation: isolate;

	display: flex;"""

if old_hero not in css:
    raise RuntimeError("Der erwartete section.hero-Block wurde nicht gefunden.")
css = css.replace(old_hero, new_hero, 1)

output = Path("/mnt/data/custom_zindex_fixed.css")
output.write_text(css, encoding="utf-8")

print(f"Erstellt: {output}")
print(f"Zeilen: {css.count(chr(10)) + 1}")
STDOUT/STDERR
Erstellt: /mnt/data/custom_zindex_fixed.css
Zeilen: 1440
<>:15: SyntaxWarning: invalid escape sequence '\.'
<>:15: SyntaxWarning: invalid escape sequence '\.'
/tmp/ipykernel_309/3477697311.py:15: SyntaxWarning: invalid escape sequence '\.'
  old_header = """\.site-header {
Ich habe die komplette Datei angepasst. 


Dabei habe ich:

Header von z-index: 999 auf 10000 gesetzt und mit isolation: isolate abgesichert.

section.hero mit z-index: 0 und isolation: isolate zu einem eigenen Stacking Context gemacht. Damit können Hero-Inhalt und Popover trotz z-index: 50 nicht mehr über die Navigation kommen.

hero-popover.css musste dafür nicht verändert werden.

Außerdem enthielt deine hochgeladene custom(4).css vor dem eigentlichen CSS noch alten Chat-/Arbeitsinhalt. Den habe ich aus der bereinigten Datei entfernt.

Ersetze damit komplett:

W:\8.4\ragbit_829170\typo3conf\ext\ragbittest\Resources\Public\Css\custom.css


Danach Flush TYPO3 and PHP Cache und dann am besten einmal in deinem Browser und in dem Browser testen, in dem der Fehler vorher auftrat. Analyze Database Structure ist hier nicht nötig. 



Bibliothek
/
Typo3-Anwendung
/
custom_zindex_fixed.css


/* =========================
   BASIS
   ========================= */

body {
	font-family: 'Noto Sans';
}


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

.site-header {
	position: sticky;
	top: 0;

	z-index: 10000;
	isolation: isolate;

	width: 100%;

	background: rgba(255, 255, 255, 0.50);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 2rem;

	width: 100%;

	padding: 1.2rem 2rem;

	box-sizing: border-box;

	animation: header-shrink linear both;
	animation-timeline: scroll(root);
}


/* =========================
   LOGO
   ========================= */

.site-logo {
	display: block;

	flex: 0 0 auto;
}


.site-logo img {
	display: block;

	width: auto;
	height: 70px;
	max-width: 100%;

	animation: logo-shrink linear both;
	animation-timeline: scroll(root);
}


@keyframes header-shrink {

	to {
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
	}

}


@keyframes logo-shrink {

	to {
		transform: scale(0.8);
	}

}


/* =========================
   NAVIGATION
   ========================= */

.main-navigation {
	flex: 1 1 auto;
}


.main-navigation > ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;

	gap: 1.5rem;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;

	box-sizing: border-box;
}


.main-navigation > ul > li {
	position: relative;

	margin: 0;
	padding: 0;
}


.main-navigation ul li::before {
	display: none;
}


.main-navigation > ul > li > a {
	display: inline-block;

	padding: 0.5rem 1rem;

	color: inherit;
	text-decoration: none;

	border-radius: 10px;

	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}


.main-navigation > ul > li > a:hover {
	background-color: var(--logo-color-1-dark);

	color: #ffffff;
}


.main-navigation > ul > li.active > a {
	background-color: var(--logo-color-1-light);
}


/* =========================
   UNTERMENÜ
   ========================= */

.main-navigation ul ul {
	display: none;

	position: absolute;

	top: 100%;
	right: 0;

	z-index: 100;

	min-width: 200px;

	margin: 0;
	padding: 0.5rem;

	background: #ffffff;

	list-style: none;
}


.main-navigation li:hover > ul {
	display: block;
}


.main-navigation ul ul li {
	padding: 0;
}


.main-navigation ul ul a {
	display: block;

	padding: 0.5rem 1rem;

	color: inherit;
	text-decoration: none;

	white-space: nowrap;
}


/* =========================
   CONTENT BLOCK SPACING
   ========================= */

:root {
	--content-block-padding-y: 4rem;
}


/*
 * Alle Content-Elemente:
 * keine vertikalen Margins,
 * stattdessen identisches Padding
 * oben und unten.
 */

.page-content .frame {
	margin-top: 0 !important;
	margin-bottom: 0 !important;

	padding-top: var(--content-block-padding-y) !important;
	padding-bottom: var(--content-block-padding-y) !important;

	box-sizing: border-box;
}


/* =========================
   GALLERIES
   ========================= */

/*
 * Vertikale Gallery-Margins komplett entfernen.
 * margin-inline:auto bleibt bestehen,
 * damit die Galerie weiterhin zentriert ist.
 */

.gallery-justified,
.gallery-grid,
.gallery-masonry {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* =========================
   TYPOGRAFIE
   ========================= */

h1 {
	font-family: 'Oranienbaum';
}


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

section.hero {
	position: relative;

	/*
	 * Der komplette Hero bildet einen eigenen
	 * Stacking Context unterhalb des Headers.
	 * Dadurch können Hero-Content und Popover
	 * auch mit eigenem z-index nicht über die
	 * Navigation gelangen.
	 */
	z-index: 0;
	isolation: isolate;

	display: flex;
	justify-content: center;

	width: 100%;

	overflow: hidden;
}


.hero-image {
	display: block;

	width: 100%;
	height: auto;
	max-width: 100%;

	object-fit: cover;
}


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

.hero-content {
	position: absolute;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	width: 90%;
	max-width: 800px;

	padding: 2.5rem;

	box-sizing: border-box;

	background-color: rgba(0, 0, 0, 0.40);

	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	border-radius: var(--border-radius);

	color: #ffffff;
}


.hero-content h1 {
	margin-bottom: 1rem;
}


.hero-content p {
	font-weight: 300;

	line-height: 1.6;
}


/* =========================
   HERO GRÖSSEN
   ========================= */

.hero-large {
	aspect-ratio: 2 / 1;
}


.hero-small {
	aspect-ratio: 4 / 1;
}


.hero-large .hero-image,
.hero-small .hero-image {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


.hero-small .hero-content {
	padding: 1.5rem 2rem;
}


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

.hero-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 0.5rem;

	margin-top: 0.5rem;
	padding: 0.7rem 1.2rem;

	background-color: var(--logo-color-1-dark);
	color: var(--bg-color);

	text-decoration: none;

	border-radius: var(--border-radius);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}


.hero-button:hover {

	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}


.hero-button-text {
	color: inherit;
}


.hero-button-icon {
	display: block;

	width: 1em;
	height: 1em;

	flex: 0 0 auto;

	color: inherit;
}


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

main .image-embed-item {
	border-radius: var(--border-radius);

	overflow: hidden;
}


main .image-caption {
	margin-top: 0.3rem;

	font-size: 0.65rem;
	line-height: 1.2;
}


/* =========================
   SOCIAL MEDIA
   ========================= */

.social-media-links {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 0.75rem;
}


.social-media-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	color: var(--font-color);

	text-decoration: none;
}


.social-media-icon {
	display: block;

	width: 28px;
	height: 28px;

	background: currentColor;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-size: contain;
	mask-size: contain;
}


/* =========================
   INSTAGRAM
   ========================= */

.social-media-link[href*="instagram.com"] .social-media-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm0 2h10c1.66 0 3 1.34 3 3v10c0 1.66-1.34 3-3 3H7c-1.66 0-3-1.34-3-3V7c0-1.66 1.34-3 3-3zm11 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm0 2h10c1.66 0 3 1.34 3 3v10c0 1.66-1.34 3-3 3H7c-1.66 0-3-1.34-3-3V7c0-1.66 1.34-3 3-3zm11 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E");
}


/* =========================
   FACEBOOK
   ========================= */

.social-media-link[href*="facebook.com"] .social-media-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3l1-4h-4V9c0-.7.3-1 1-1z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3l1-4h-4V9c0-.7.3-1 1-1z'/%3E%3C/svg%3E");
}


/* =========================
   LINKEDIN
   ========================= */

.social-media-link[href*="linkedin.com"] .social-media-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM2 9h4v13H2V9zm7 0h4v2c1-1.5 2.5-2.5 4.5-2.5 4 0 4.5 3 4.5 6.5v7h-4v-6.5c0-1.5 0-3.5-2.2-3.5S13 13.7 13 15.4V22H9V9z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM2 9h4v13H2V9zm7 0h4v2c1-1.5 2.5-2.5 4.5-2.5 4 0 4.5 3 4.5 6.5v7h-4v-6.5c0-1.5 0-3.5-2.2-3.5S13 13.7 13 15.4V22H9V9z'/%3E%3C/svg%3E");
}


/* =========================
   YOUTUBE
   ========================= */

.social-media-link[href*="youtube.com"] .social-media-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2c-.2-1.2-1.2-2.2-2.4-2.4C17.4 4.4 14.6 4.3 12 4.3s-5.4.1-7.2.5C3.6 5 2.6 6 2.4 7.2 2.1 8.8 2 10.4 2 12s.1 3.2.4 4.8c.2 1.2 1.2 2.2 2.4 2.4 1.8.4 4.6.5 7.2.5s5.4-.1 7.2-.5c1.2-.2 2.2-1.2 2.4-2.4.3-1.6.4-3.2.4-4.8s-.1-3.2-.4-4.8zM10 15.5v-7l6 3.5-6 3.5z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2c-.2-1.2-1.2-2.2-2.4-2.4C17.4 4.4 14.6 4.3 12 4.3s-5.4.1-7.2.5C3.6 5 2.6 6 2.4 7.2 2.1 8.8 2 10.4 2 12s.1 3.2.4 4.8c.2 1.2 1.2 2.2 2.4 2.4 1.8.4 4.6.5 7.2.5s5.4-.1 7.2-.5c1.2-.2 2.2-1.2 2.4-2.4.3-1.6.4-3.2.4-4.8s-.1-3.2-.4-4.8zM10 15.5v-7l6 3.5-6 3.5z'/%3E%3C/svg%3E");
}


/* =========================
   X
   ========================= */

.social-media-link[href*="x.com"] .social-media-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5.2l3.8 5.1L17.5 3H20l-5.8 6.8L21 21h-5.2l-4.3-5.8L6.5 21H4l6.3-7.5L4 3zm3.1 2L17 19h1.9L9 5H7.1z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5.2l3.8 5.1L17.5 3H20l-5.8 6.8L21 21h-5.2l-4.3-5.8L6.5 21H4l6.3-7.5L4 3zm3.1 2L17 19h1.9L9 5H7.1z'/%3E%3C/svg%3E");
}


/* =========================
   MASTODON
   ========================= */

.social-media-link[href*="mastodon"] .social-media-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 6c-.4-3-3-4-8-4S4.4 3 4 6c-.3 2-.3 5 0 7 .5 3.7 3.2 5 6 5.4 1.5.2 2.9.1 4.2-.3l-.1-2.3c-1.2.3-2.5.4-3.7.2-1.7-.2-2.2-1-2.4-2 1.1.3 2.5.4 4 .4 5 0 7.5-1.7 8-5.3.2-1 .2-2.1 0-3.1zM9.5 12H7V7.5C7 5.8 8 5 9.5 5c1 0 1.8.4 2.5 1.2C12.7 5.4 13.5 5 14.5 5 16 5 17 5.8 17 7.5V12h-2.5V7.7c0-.7-.3-1.1-.9-1.1-.7 0-1 .5-1 1.4v2.4h-1.2V8c0-.9-.3-1.4-1-1.4-.6 0-.9.4-.9 1.1V12z'/%3E%3C/svg%3E");

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 6c-.4-3-3-4-8-4S4.4 3 4 6c-.3 2-.3 5 0 7 .5 3.7 3.2 5 6 5.4 1.5.2 2.9.1 4.2-.3l-.1-2.3c-1.2.3-2.5.4-3.7.2-1.7-.2-2.2-1-2.4-2 1.1.3 2.5.4 4 .4 5 0 7.5-1.7 8-5.3.2-1 .2-2.1 0-3.1zM9.5 12H7V7.5C7 5.8 8 5 9.5 5c1 0 1.8.4 2.5 1.2C12.7 5.4 13.5 5 14.5 5 16 5 17 5.8 17 7.5V12h-2.5V7.7c0-.7-.3-1.1-.9-1.1-.7 0-1 .5-1 1.4v2.4h-1.2V8c0-.9-.3-1.4-1-1.4-.6 0-.9.4-.9 1.1V12z'/%3E%3C/svg%3E");
}


/* =========================
   FOOTER
   ========================= */


.site-footer {
	padding-block: 2rem;

	background-color: var(--logo-color-1-light);
}

.site-footer .frame {
	padding-top: 0;
}

.site-footer-columns,
.site-footer-meta {
	width: 1500px;
	max-width: calc(100% - 4rem);

	margin-inline: auto;
}


/* =========================
   FOOTER SPALTEN
   ========================= */

.site-footer-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 2rem;

	align-items: stretch;
}

.site-footer-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;

	padding-block-start: 3rem;
}


/*
 * Content-Element als Ganzes innerhalb
 * der jeweiligen Footer-Spalte zentrieren.
 * Text innerhalb des Elements bleibt linksbündig.
 */

.site-footer-column .frame {
	width: fit-content;
	max-width: 100%;

	text-align: left;
}


/* Bilder zentrieren */

.site-footer-column figure,
.site-footer-column .ce-gallery,
.site-footer-column .ce-image {
	margin-left: auto;
	margin-right: auto;
}

.site-footer-column img {
	display: block;

	max-width: 100%;

	margin-left: auto;
	margin-right: auto;
}


/*
 * TYPO3 Content-Elemente innerhalb der
 * Footer-Spalten ebenfalls zentrieren.
 */

.site-footer-column > * {
	max-width: 100%;
}

.site-footer-column .frame {
	width: auto;
	max-width: 100%;
}

.site-footer-column figure,
.site-footer-column .ce-gallery,
.site-footer-column .ce-image {
	margin-left: auto;
	margin-right: auto;
}

.site-footer-column img {
	display: block;

	max-width: 100%;

	margin-left: auto;
	margin-right: auto;
}


.site-footer-columns ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.site-footer-columns li::before {
	display: none;
}


/* =========================
   FOOTER LINK LIST
   ========================= */

.footer-link-list ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.footer-link-list li::before {
	display: none;
}

.footer-link-list a {
	color: var(--font-color);

	text-decoration: none;
}


/* =========================
   FOOTER META
   ========================= */

.site-footer-meta {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin-block-start: 3rem;

	text-align: center;
}

.site-footer-meta > * {
	width: 100%;
}

.site-footer-meta .footer-link-list ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	gap: 1.5rem;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}

.site-footer-meta .footer-link-list li::before {
	display: none;
}

.site-footer-meta .social-media-links {
	width: 100%;

	margin-top: 1.25rem;
}


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

@media (max-width: 900px) {

	.site-footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 600px) {

	.site-footer-columns,
	.site-footer-meta {
		max-width: calc(100% - 2rem);
	}

	.site-footer-columns {
		grid-template-columns: 1fr;
	}

	.site-footer-column {
		padding-block-start: 2rem;
	}

	.site-footer-meta .footer-link-list ul {
		flex-direction: column;

		gap: 0.5rem;
	}

}

/* =========================
   CONTENT BACKGROUND COLORS
   ========================= */

/*
 * Der eigentliche Content bleibt
 * in seiner normalen Wrapperbreite.
 *
 * Der Hintergrund wird über ::before
 * auf die komplette Browserbreite gezogen.
 */

.frame-bg-logo-color-1,
.frame-bg-logo-color-1-light,
.frame-bg-logo-color-1-dark,
.frame-bg-logo-color-2,
.frame-bg-neutral-color-light,
.frame-bg-neutral-color-dark,
.frame-bg-white {
	position: relative;
	background: transparent;
	color: var(--frame-text);
	isolation: isolate;
}


/* =========================
   FARBEN DEFINIEREN
   ========================= */

.frame-bg-logo-color-1 {
	--frame-background: var(--logo-color-1);
	--frame-text: var(--font-color-light);
}

.frame-bg-logo-color-1-light {
	--frame-background: var(--logo-color-1-light);
	--frame-text: var(--font-color-dark);
}

.frame-bg-logo-color-1-dark {
	--frame-background: var(--logo-color-1-dark);
	--frame-text: var(--font-color-light);
}

.frame-bg-logo-color-2 {
	--frame-background: var(--logo-color-2);
	--frame-text: var(--font-color-dark);
}

.frame-bg-neutral-color-light {
	--frame-background: var(--neutral-color-light);
	--frame-text: var(--font-color-dark);
}

.frame-bg-neutral-color-dark {
	--frame-background: var(--neutral-color-dark);
	--frame-text: var(--font-color-light);
}

.frame-bg-white {
	--frame-background: rgb(var(--bg-color-rgb));
	--frame-text: var(--font-color-dark);
}


/* =========================
   FULL-WIDTH BACKGROUND
   ========================= */

.frame-bg-logo-color-1::before,
.frame-bg-logo-color-1-light::before,
.frame-bg-logo-color-1-dark::before,
.frame-bg-logo-color-2::before,
.frame-bg-neutral-color-light::before,
.frame-bg-neutral-color-dark::before,
.frame-bg-white::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: var(--frame-background);
	z-index: -1;
	pointer-events: none;
}


/* =========================
   AUTOMATISCHE TEXTFARBEN
   ========================= */

.frame-bg-logo-color-1 h1,
.frame-bg-logo-color-1 h2,
.frame-bg-logo-color-1 h3,
.frame-bg-logo-color-1 h4,
.frame-bg-logo-color-1 h5,
.frame-bg-logo-color-1 h6,
.frame-bg-logo-color-1-light h1,
.frame-bg-logo-color-1-light h2,
.frame-bg-logo-color-1-light h3,
.frame-bg-logo-color-1-light h4,
.frame-bg-logo-color-1-light h5,
.frame-bg-logo-color-1-light h6,
.frame-bg-logo-color-1-dark h1,
.frame-bg-logo-color-1-dark h2,
.frame-bg-logo-color-1-dark h3,
.frame-bg-logo-color-1-dark h4,
.frame-bg-logo-color-1-dark h5,
.frame-bg-logo-color-1-dark h6,
.frame-bg-logo-color-2 h1,
.frame-bg-logo-color-2 h2,
.frame-bg-logo-color-2 h3,
.frame-bg-logo-color-2 h4,
.frame-bg-logo-color-2 h5,
.frame-bg-logo-color-2 h6,
.frame-bg-neutral-color-light h1,
.frame-bg-neutral-color-light h2,
.frame-bg-neutral-color-light h3,
.frame-bg-neutral-color-light h4,
.frame-bg-neutral-color-light h5,
.frame-bg-neutral-color-light h6,
.frame-bg-neutral-color-dark h1,
.frame-bg-neutral-color-dark h2,
.frame-bg-neutral-color-dark h3,
.frame-bg-neutral-color-dark h4,
.frame-bg-neutral-color-dark h5,
.frame-bg-neutral-color-dark h6,
.frame-bg-white h1,
.frame-bg-white h2,
.frame-bg-white h3,
.frame-bg-white h4,
.frame-bg-white h5,
.frame-bg-white h6,
.frame-bg-logo-color-1 a,
.frame-bg-logo-color-1-light a,
.frame-bg-logo-color-1-dark a,
.frame-bg-logo-color-2 a,
.frame-bg-neutral-color-light a,
.frame-bg-neutral-color-dark a,
.frame-bg-white a {
	color: inherit;
}


/* =========================
   MANUELLE CONTENT FONT COLORS
   ========================= */

/*
 * Diese Regeln stehen bewusst nach den
 * Hintergrundfarben.
 *
 * Die manuell gewählte Schriftfarbe hat
 * dadurch Vorrang vor der automatischen
 * Schriftfarbe des Hintergrunds.
 */

.frame.frame-layout-101 {
	--frame-text: var(--font-color-light);
	color: var(--frame-text);
}

.frame.frame-layout-102 {
	--frame-text: var(--font-color-dark);
	color: var(--frame-text);
}

.frame.frame-layout-103 {
	--frame-text: var(--logo-color-1);
	color: var(--frame-text);
}

.frame.frame-layout-104 {
	--frame-text: var(--logo-color-1-light);
	color: var(--frame-text);
}

.frame.frame-layout-105 {
	--frame-text: var(--logo-color-1-dark);
	color: var(--frame-text);
}

.frame.frame-layout-106 {
	--frame-text: var(--logo-color-2);
	color: var(--frame-text);
}

.frame.frame-layout-107 {
	--frame-text: var(--neutral-color-light);
	color: var(--frame-text);
}

.frame.frame-layout-108 {
	--frame-text: var(--neutral-color-dark);
	color: var(--frame-text);
}

.frame.frame-layout-101 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-102 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-103 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-104 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-105 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-106 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-107 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td),
.frame.frame-layout-108 :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, span, small, figcaption, th, td) {
	color: inherit;
}


/* =========================
   STICKY CTA
   ========================= */

.sticky-cta {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;

	z-index: 1000;

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

	gap: 0.45rem;

	padding: 0.55rem 0.9rem;

	background-color: var(--logo-color-1-dark);
	color: var(--bg-color);

	border-radius: var(--border-radius);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);

	font-size: 0.9rem;
	line-height: 1;

	text-decoration: none;
	white-space: nowrap;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}


.sticky-cta:hover {
	color: var(--bg-color);
	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}


/* ICON */

.sticky-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 1.1rem;
	height: 1.1rem;

	flex: 0 0 auto;
}


.sticky-cta-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* TEXT */

.sticky-cta-text {
	color: inherit;
}


/* MOBILE */

@media (max-width: 600px) {

	.sticky-cta {
		right: 1rem;
		bottom: 1rem;

		padding: 0.5rem 0.75rem;

		font-size: 0.85rem;
	}

	.sticky-cta-icon {
		width: 1rem;
		height: 1rem;
	}
}
/* =========================
   TEXT + BILD
   ========================= */

/*
 * Seitliche Text/Bild-Kombinationen:
 * Bild und Text vertikal zentrieren
 * und einen einheitlichen Abstand setzen.
 */

.ce-textpic.ce-intext.ce-nowrap {
	display: flex;
	align-items: center;

	gap: 3rem;
}


/* Bild links */

.ce-textpic.ce-left.ce-intext.ce-nowrap {
	flex-direction: row;
}


/* Bild rechts */

.ce-textpic.ce-right.ce-intext.ce-nowrap {
	flex-direction: row-reverse;
}


/*
 * Alte TYPO3-Abstände/Floats entfernen,
 * damit nur unser gap zuständig ist.
 */

.ce-textpic.ce-intext.ce-nowrap .ce-gallery {
	float: none;
	margin: 0 !important;

	flex: 0 0 auto;
}


.ce-textpic.ce-intext.ce-nowrap .ce-bodytext {
	flex: 1 1 auto;
	min-width: 0;
}


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

@media (max-width: 800px) {

	.ce-textpic.ce-intext.ce-nowrap,
	.ce-textpic.ce-left.ce-intext.ce-nowrap,
	.ce-textpic.ce-right.ce-intext.ce-nowrap {
		flex-direction: column;

		align-items: stretch;

		gap: 1.5rem;
	}


	.ce-textpic.ce-intext.ce-nowrap .ce-gallery {
		width: 100%;
	}

}

/* =========================
   CONTENT BACKGROUND IMAGE
   ========================= */

/*
 * Hintergrundbild hat Vorrang vor
 * einer zusätzlich ausgewählten Hintergrundfarbe.
 */

.page-content .frame:has(.content-background-image)::before {
	display: none !important;
}


/*
 * Durch die dunkle Bildüberlagerung
 * wird Text bei Hintergrundbildern hell dargestellt.
 */

.page-content .frame:has(.content-background-image) {
	color: var(--font-color-light);
}

.page-content .frame:has(.content-background-image) h1,
.page-content .frame:has(.content-background-image) h2,
.page-content .frame:has(.content-background-image) h3,
.page-content .frame:has(.content-background-image) h4,
.page-content .frame:has(.content-background-image) h5,
.page-content .frame:has(.content-background-image) h6,
.page-content .frame:has(.content-background-image) a {
	color: inherit;
}
/*
 * Content-Block muss Bezugspunkt
 * für das Hintergrundbild sein.
 */


.process-section,
.icon-lists {
	position: relative;
	isolation: isolate;
}


/*
 * Hintergrundbild über die komplette
 * Browserbreite ziehen.
 */

.content-background-image {
	position: absolute;

	top: 0;
	bottom: 0;

	left: 50%;

	width: 100vw;

	transform: translateX(-50%);

	overflow: clip;
	contain: paint;

	z-index: -1;

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* Hintergrundbild abdunkeln */

.content-background-image::after {
	content: "";

	position: absolute;
	inset: 0;

	background: rgba(0, 0, 0, 0.20);

	pointer-events: none;
}


/*
 * Das eigentliche Bild:
 * gleiche Blur-Stärke wie bei deinem Hero.
 */

.content-background-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	filter: blur(5px);

	/*
	 * Verhindert helle Ränder durch den Blur.
	 */
	transform: scale(1.03);
}


/*
 * Wenn ein Hintergrundbild vorhanden ist,
 * darf eine Frame-Hintergrundfarbe
 * nicht darüber liegen.
 */

.process-section:has(.content-background-image),
.icon-lists:has(.content-background-image) {
	background: transparent;
}
.page-content .frame.has-content-background-image {
	position: relative;
	isolation: isolate;
}
.page-content .frame.has-content-background-image::before {
	display: none !important;
}
/* =========================
   STICKY CTA CONTACT MENU
   ========================= */

.sticky-cta-contact {
	--sticky-cta-bottom: 1.5rem;

	position: fixed;

	right: 1.5rem;
	bottom: var(--sticky-cta-bottom);

	z-index: 1000;
}


/*
 * Der eigentliche Kontakt-Button liegt jetzt
 * innerhalb des fixierten Containers.
 */

.sticky-cta-contact > .sticky-cta {
	position: relative;

	right: auto;
	bottom: auto;

	cursor: pointer;

	list-style: none;
}


/* Standard-Pfeil von <details> entfernen */

.sticky-cta-contact > summary::-webkit-details-marker {
	display: none;
}

.sticky-cta-contact > summary::marker {
	content: "";
}


/* =========================
   AUFKLAPPMENÜ
   ========================= */

.sticky-cta-contact-menu {
	position: absolute;

	right: 0;
	bottom: calc(100% + 0.6rem);

	display: flex;
	flex-direction: column;

	min-width: 250px;

	overflow: hidden;

	background-color: var(--logo-color-1-dark);

	border-radius: var(--border-radius);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}


/* TELEFON / MAIL */

.sticky-cta-contact-link {
	display: flex;
	align-items: center;

	gap: 0.75rem;

	padding: 0.75rem 1rem;

	color: var(--bg-color);

	text-decoration: none;

	white-space: nowrap;

	transition: background-color 0.2s ease;
}


.sticky-cta-contact-link + .sticky-cta-contact-link {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}


.sticky-cta-contact-link:hover {
	color: var(--bg-color);

	background-color: rgba(255, 255, 255, 0.1);

	text-decoration: none;
}


/* ICONS */

.sticky-cta-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 1.1rem;
	height: 1.1rem;

	flex: 0 0 1.1rem;
}


.sticky-cta-contact-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* MOBILE */

@media (max-width: 600px) {

	.sticky-cta-contact {
		--sticky-cta-bottom: 1rem;

		right: 1rem;
	}


	.sticky-cta-contact-menu {
		min-width: 220px;
	}

}