/* === main.css === */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/montserrat-v30-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/montserrat-v30-latin-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/montserrat-v30-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/montserrat-v30-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}




body {
	font-family: 'Montserrat', system-ui, sans-serif;
	align-items: center;
	background-color: #fff;
	color: #fff;
	margin:0;
}

h1, h2, h3 {
	font-weight: 700;
}

h1 {
	color: #0088cc;
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

a {
	color: #cc0000;
	text-decoration: none;
}

ol li {
    margin-bottom: 20px;
}


.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}



#line-overlay {
  z-index: 5;       /* Header hat 1000, bleibt darüber */
}

/* Oberer Header-Bereich */


.site-header {
  position: sticky;
  top: 0;  /* wichtig */
  left: 0;
  right: 0;
  background: #fff;
  width: 100%; 
  z-index: 1000;
}


.top-header {
  position: relative; /* Bezugspunkt für .main-navigation */
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 16px;
  background: transparent;
}

.top-header__logo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-right: auto;
}
.top-header__logo img {
    position: absolute;       /* bleibt immer absolute */
    left: 0;
    bottom: -130px;
    height: 230px;
    transform-origin: left bottom;
    transition: transform 0.3s ease;  /* nur transform animieren */
    z-index: 10;
}
.site-header.scrolled .top-header__logo img {
    transform: translateY(-85px) scale(0.40);
}
.top-header__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	margin-left: auto;
}


.top-header__phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: #e50060;
	font-weight: 600;
	font-size: 1rem;
}

.icon-phone {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-image: url('../icons/icon_phone.svg');
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	top: 6px;
}

/*============================= Burger-Menü ==================================================*/
.burger {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	margin-top: 10px;
	background: url('../icons/icon_navigation.svg') center center no-repeat;
	background-size: contain;
	border: none;
	cursor: pointer;
}

.burger.open {
	/* 🛈 Platzhalter für späteres X-Symbol – aktuell ebenfalls Burger-Icon */
	background-image: url('../icons/icon_navigation.svg'); /* später ersetzen durch icon_close.svg */
}

/* Navigation (Dropdown-Styling) */
.main-navigation {
  display: none;
  width: 100%; /* jetzt bezogen auf .top-header, nicht auf den Viewport */
  background-color: #fff;
  flex-direction: column;
  padding: 1rem 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  border-top: 1px solid #e50051; /* wie gehabt */
  max-height: 75vh;                 /* oder 70–80vh nach Geschmack */
  overflow-y: auto;                  /* eigener Scroll */
  -webkit-overflow-scrolling: touch; /* smooth auf iOS */
  overscroll-behavior: contain; 
}

.main-navigation.open {
	display: flex;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	border-top: none; 
}

.main-navigation li:last-child {
	border-bottom: 1px solid #e50051;
}

.main-navigation a {
	color: #2d2c80;
	text-decoration: none;
	display: block;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	transition: background-color 0.2s ease;
}

.main-navigation a:hover {
	background-color: #fbe4ec;
}

/* Submenü */
.main-navigation .sub-menu {
	display: none;
	margin-left: 1.5rem;
	padding-left: 0.5rem;
	border-left: 2px solid #e50051;
	border-top: none;
}

.main-navigation .sub-menu li {
	border: none; 
	padding-left: 0.5rem;
}

.main-navigation li.menu-item-has-children {
	border-bottom: 1px solid #e50051;
	position: relative;
}

.main-navigation .menu-item-has-children {
	position: relative;
}
.main-navigation .menu-item-has-children.open > a::after {
	content: '-';
}
/* Sub-Sub-Menüs: kein +/- Symbol */
.main-navigation .sub-menu .menu-item-has-children.open > a::after {
	content: none;
}

.menu-link-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 2.5rem; /* Platz schaffen für das Symbol */
}

.menu-link-wrapper a {
	flex: 1;
	display: block;
	padding: 0.75rem 1rem;
}
.submenu-toggle {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #e50051;
	font-weight: bold;
	font-size: 1.3rem;
	user-select: none;
	line-height: 1;
}
.main-navigation .submenu-toggle:focus {
	outline: 2px solid #e50051;
	outline-offset: 2px;
}
.main-navigation .menu-item-has-children.open > .sub-menu {
	display: block;
}


/* Sub-Sub-Menüs: untere horizontale Linie entfernen */
.main-navigation .sub-menu .menu-item-has-children {
    border-bottom: none;
}

/* Suche innerhalb Menü */
.menu-search {
	display: none;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border-bottom: 1px solid #e50051;
}

.main-navigation.open .menu-search {
	display: flex;
}

.menu-search__field {
	flex: 1;
	padding: 0.5rem 1rem;
	border: 1px solid #e50051;
	border-radius: 4px 0 0 4px;
	font-size: 1rem;
	color: #2d2c80;
}

.menu-search__submit {
	width: 2.5rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e50051;
	border: none;
	border-radius: 0 4px 4px 0;
	background-image: url('../icons/weisse-lupe.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.2rem;
	cursor: pointer;
}


/* ============== ENDE Burger-Menu ========================================*/


/* === FOOTER === */
.site-footer-outer {
	background-color: #2d2c80;
	color: #fff;
	padding: 4rem 1rem 2rem;
	box-sizing: border-box;
	max-width: 1400px;
	margin: 0 auto;
	margin-top: -20px;
}


.site-footer {
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.footer-inner {
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.footer-col h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.footer-col p,
.footer-col a {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #fff;
	text-decoration: none;
}

.footer-col a:hover {
	text-decoration: underline;
}

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

.footer-menu li {
	margin-bottom: 0.5rem;
}

.footer-menu a {
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
}

.footer-menu a:hover {
	text-decoration: underline;
}



.error-nav-links .button {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border: 2px solid #2d2c80;
	color: #2d2c80;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	transition: all 0.3s ease;
}

.error-nav-links .button:hover {
	background-color: #2d2c80;
	color: #fff;
}


/* ===== BEITRAG ===== */
.beitrag-bereich {
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
	color: #2d2c80;
}

.beitrag-bereich__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 220px) 2fr 1fr minmax(0, 220px);
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.beitrag-bereich__content {
	grid-column: 2 / 4;
	padding: 3rem 2rem;
	box-sizing: border-box;
	color: #2d2c80;
}

.beitrag-inhalt h2,
.beitrag-inhalt h3,
.beitrag-inhalt p {
	margin-bottom: 1.5rem;
}



.footer-social .social-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.footer-social .social-item {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	transition: opacity 0.2s ease;
}

.footer-social .social-item:hover {
	opacity: 0.8;
}

.footer-social .social-item img {
	width: 24px;
	height: 24px;
	margin-right: 12px;
	display: inline-block;
}




/* Responsive Verhalten */
@media (max-width: 1224px) {
	.beitrag-bereich__wrapper {
		grid-template-columns: minmax(0, 110px) 2fr 1fr minmax(0, 110px);
	}
}

@media (max-width: 579px) {
	.beitrag-bereich__wrapper {
		grid-template-columns: 0 1fr 1fr 0;
	}
}






/* Responsive Footer */
@media (max-width: 768px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 500px) {
	.footer-inner {
		grid-template-columns: 1fr;
	}
}





/* === hero.css === */
/* HERO-BEREICH – Designanpassung laut Screenshot */
.hero {
	display: grid;
	grid-template-columns: minmax(0, 220px) 2fr 1fr minmax(0, 220px);
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}


.hero__left {
	background-color: #e50051;
	width: 100%;
	height: 100%;
}

.hero__right {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1rem;
	background-color: #2d2c80;
	position: relative;
}

.hero__image {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: flex;
	align-items: stretch;
}

.hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__text {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 3rem 1rem 1rem 2rem; /* oben/rechts/unten/links */
	background-color: #2d2c80;
	width: 100%;
	color: #fff;
	box-sizing: border-box;
}


.hero__inner {
	display: flex;
	flex-direction: column;
	max-width: 320px;
	width: 100%;
	gap: 1.5rem;
}

.hero__inner h1{
	color: #fff;
}

.hero__headline {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.hero__subline {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* Buttons */
.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Standard Button */
.hero__button {
	background-color: transparent;
	color: #fff;
	border: 1px solid #fff;
	padding: 0.6rem 1.2rem;
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 0px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.hero__button:hover {
	background-color: #fff;
	color: #2d2c80;
}

/* Online-Termin Button */
.hero__button--secondary {
	position: absolute;
	right: 0rem;
	bottom: 0rem;
	width: 152px;
	height: 35px;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0.75rem 1rem 0.75rem 3.2rem;
	background-color: #e50051;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.9rem;
	text-align: left;
	border: none;
	border-radius: 0;
	background-image: url('../icons/icon_onlinetermin.svg');
	background-repeat: no-repeat;
	background-position: 1rem center;
	background-size: 1.6rem;
	cursor: pointer;
}

.hero__button--secondary:hover {
	opacity: 0.85;
	background-color: #f36d97;
	color: #fff;
	
}

/* Responsive Fallback */
@media (max-width: 991px) {
	.hero {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
	}

	.hero__left {
		display: none;
	}

	.hero__image {
		grid-row: 1;
	}

	.hero__text {
		grid-row: 2;
		padding: 2rem;
	}

	.hero__right {
		grid-row: 3;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		background-color: #2d2c80;
		height: 50px;
		position: relative;
	}
	.hero__headline {
	font-size: 1.7rem;
	}
}
/* === rosa-bereich.css === */
/* ===== ROSA BEREICH – exakt ausgerichtet am Hero-Bereich ===== */
.rosa-bereich {
	font-family: 'Montserrat', system-ui, sans-serif;
	color: #2d2c80;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative; /* für fliese unten */
}

/* Wrapper: 4-Spalten wie Hero */
.rosa-bereich__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 220px) 2fr 1fr minmax(0, 220px);
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	align-items: stretch;
	box-sizing: border-box;
}

/* ==== Fliesen-Bereich mit vertikaler Wiederholung ==== */
.rosa-bereich__fliese {
	/*background-image: url('../img/fliesen-grau-versatz.png');*/
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
	width: 100%;
}

/* Content block (nimmt Spalte 2 bis 3 ein, wie im Hero) */
.rosa-bereich__content {
	grid-column: 2 / 4;
	background-color: #f9c1cd;
	padding: 3rem 2rem;	
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	position: relative;
}

/* Inneres Grid: umgekehrtes Verhältnis (Headline schmal, Text breit) */
.rosa-bereich__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Headline */
.rosa-bereich__headline {
	grid-column: 1 / 2;
	align-self: start;
	font-size: 1.8rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

/* Text */
.rosa-bereich__text {
	grid-column: 2 / 3;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

/* ===== Fliesen wechseln bei schmalerem Viewport (unter 1225px) ===== */
@media (max-width: 1224px) {
	.rosa-bereich__wrapper {
		grid-template-columns: minmax(0, 110px) 2fr 1fr minmax(0, 110px);
	}

	.rosa-bereich__fliese {
		/*background-image: url('../img/fliese_grau.png');*/
	}
}

/* ===== Fliesen komplett ausblenden unter 580px ===== */
@media (max-width: 579px) {
	.rosa-bereich__wrapper {
		grid-template-columns: 0 1fr 1fr 0;
	}

	.rosa-bereich__fliese {
		display: none;
	}
	.rosa-bereich__content {
	padding-bottom: calc(3rem + 49px);
	}
	
	/* Fliese unten hinzufügen */
	.rosa-bereich__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 49px;
		/*background-image: url('../img/fliese-rosa.png');*/
		background-repeat: repeat-x;
		background-size: auto 100%;
		background-position: bottom center;
		pointer-events: none;
	}
}

/* ===== Responsive Inhalt: Headline über Text unter 900px ===== */
@media (max-width: 900px) {
	.rosa-bereich__inner {
		grid-template-columns: 1fr;
	}

	.rosa-bereich__headline,
	.rosa-bereich__text {
		grid-column: auto;
	}

	.rosa-bereich__headline {
		margin-bottom: 1.5rem;
		font-size: 1.4rem;
	}
}

/* === rosa-block.css === */
.rosa-block {
	font-family: 'Montserrat', sans-serif;
	padding: 4rem 1rem;
	box-sizing: border-box;
}

.rosa-block__inner {
	max-width: 960px;
	margin: 0 auto;
	background-color: #f9c1cd;
	color: #2d2c80;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	padding: 2rem;
	box-sizing: border-box;
	position: relative;
	padding-bottom: calc(2rem + 49px);
}

.rosa-block__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.5rem;
	margin: 0;
}

.rosa-block__textcontent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.rosa-block__text {
	font-size: 1rem;
	line-height: 1.5;
	margin-top: -0.8rem;
}

.rosa-block__button {
	display: inline-block;
	padding: 0.7rem 1.2rem;
	border: 2px solid #2d2c80;
	color: #2d2c80;
	text-decoration: none;
	font-weight: 500;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.rosa-block__button:hover {
	background-color: #2d2c80;
	color: #fff;
}

.rosa-block__inner::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese-rosa.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
	.rosa-block__inner {
		grid-template-columns: 1fr;
	}
	.rosa-block__headline {
		font-size: 1.4rem;
	}
	.rosa-block__textcontent {
		align-items: stretch;
	}
}

/* === news-modul.css === */
.news-modul {
	padding: 4rem 1rem;
	box-sizing: border-box;
}

.news-modul__inner {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}

.news-modul__content {
	background-color: #fff35f;
	color: #2d2c80;
	font-family: 'Montserrat', sans-serif;
	padding: 2rem;
	box-sizing: border-box;
	position: relative;
	padding-bottom: calc(2rem + 49px);
}

.news-modul__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese_gelb.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.news-modul__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.8rem;
	margin-bottom: 2rem;
}

.news-modul__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.news-modul__item {
	display: flex;
	flex-direction: column;
}

.news-modul__image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.news-modul__date {
	font-size: 0.9rem;
	margin: 0.5rem 0;
}

.news-modul__title {
	font-weight: 600;
	color: #2d2c80;
	font-size: 1rem;
	margin: 0 0 0.5rem 0;
}

.news-modul__excerpt {
	font-size: 0.9rem;
	line-height: 1.4;
	margin-bottom: auto;
}

.news-modul__more {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: #2d2c80;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.news-modul__grid {
		grid-template-columns: 1fr;
	}
}

/* === karten-bereich.css === */
.karten-bereich {
	max-width: 960px;
	margin: 150px auto 0;
	padding: 0 1rem;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

.karten-bereich__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.karten-bereich__karte {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}


.karten-bereich__image-wrapper {
	width: 100%;
	max-height: 300px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}


.karten-bereich__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.karten-bereich__content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
}

/* === INDIVIDUELLE KARTENFARBEN === */

.karten-bereich__karte--gruen .karten-bereich__content {
	background-color: #cae2bd;
	color: #2d2c80;
}

.karten-bereich__karte--blau .karten-bereich__content {
	background-color: #00b4cd;
	color: #ffffff;
}

/* === TYPO === */

.karten-bereich__headline {
	font-weight: 600;
	font-size: 1.4rem;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.karten-bereich__text {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.5rem;
}

.karten-bereich__button {
	display: inline-block;
	text-transform: uppercase;
	padding: 0.6rem 1.2rem;
	border: 2px solid currentColor;
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	transition: background 0.3s, color 0.3s;
	align-self: flex-start;
}

.karten-bereich__button:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

/* === FLIESEN === */

.karten-bereich__fliese {
	width: 100%;
	height: 48px;
	background-repeat: repeat-x;
	background-position: top;
	background-size: contain;
}

.karten-bereich__fliese--gruen {
	/*background-image: url('../img/fliesen-gruen-vierfach.png');*/
}

.karten-bereich__fliese--blau {
	/*background-image: url('../img/fliesen-blau-vierfach.png');*/
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
	.karten-bereich__wrapper {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* === top-leistungen.css === */
.top-leistungen {
	color: #2d2c80;
	padding: 4rem 1rem;
	margin-top: 100px;
	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
}

.top-leistungen__inner {
	max-width: 960px;
	margin: 0 auto;
	text-align: left;
	background-color: #fff35f;
	padding: 2rem;
	box-sizing: border-box;
	position: relative;
	padding-bottom: calc(2rem + 49px);
}

/* Fliesenreihe bündig am unteren Rand */
.top-leistungen__inner::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliesen-gelb-versatz-klein.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}


.top-leistungen__headline {
	font-weight: 600; /* Montserrat Semibold */
	text-transform: uppercase;
	font-size: 1.8rem;
	margin-bottom: 2rem;
}

.top-leistungen__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem 2rem;
	justify-content: center;
}

.top-leistungen__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	padding: 0.5rem;
	border-radius: 8px;
}


.top-leistungen__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
	background-color: rgba(255, 255, 255, 0.2);
}

.top-leistungen__icon-wrapper {
	width: 170px;
	height: 170px;
	margin-bottom: 0.8rem;
}

.top-leistungen__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.top-leistungen__label {
	font-weight: 600; /* Montserrat Semibold */
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: 0.3rem;
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.top-leistungen__arrow {
	font-size: 0.9rem;
	color: inherit;
	transition: transform 0.3s ease;
}

.top-leistungen__item:hover .top-leistungen__arrow {
	transform: translateX(4px);
}

@media (max-width: 960px) {
	.top-leistungen__grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
}



/* === karriere-modul.css === */
.karriere-modul {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	padding: 4rem 1rem;
	box-sizing: border-box;
}

.karriere-modul__inner {
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 2.5rem;
	background-color: #2d2c80;
	padding: 2rem; /* wie im rosa Bereich etc. */
	box-sizing: border-box;
	position: relative;
	padding-bottom: calc(2rem + 49px);
}

.karriere-modul__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.8rem;
	margin: 0 0 1rem 0;
}

.karriere-modul__bilder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.karriere-modul__bild img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: 0; /* abgerundete Ecken entfernt */
}

.karriere-modul__textblock {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	align-items: start;
}


.karriere-modul__subheadline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.2rem;
	margin: 0 0 0.5rem 0;
}

.karriere-modul__text {
	font-size: 1rem;
	line-height: 1.4;
	margin-top: -0.8rem;
}

.karriere-modul__button {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.7rem 1.2rem;
	border: 2px solid #fff;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.karriere-modul__button:hover {
	background-color: #fff;
	color: #2d2c80;
}

.karriere-modul__textcontent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.karriere-modul__inner::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese_dunkelblau.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.karriere-modul__buttons {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}


/* Responsiv */
@media (max-width: 768px) {
	.karriere-modul__bilder {
		grid-template-columns: 1fr;
	}

	.karriere-modul__textblock {
		grid-template-columns: 1fr;
	}
}

/* === kontakt-modul.css === */
.kontakt-modul {
	background-color: #fff; /* Weiß als Außenfarbe */
	color: #2d2c80;
	padding: 0;
	box-sizing: border-box;
	margin-top:50px;
}

.kontakt-modul__inner {
	background-color: #f9c1cd; /* Rosa nur hier */
	padding: 4rem 2rem calc(2rem + 49px);
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	position: relative;
	box-sizing: border-box;
}


.kontakt-modul__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.8rem;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
}

.kontakt-modul__text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.6;
	font-size: 1rem;
}

.kontakt-modul__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.kontakt-modul__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.kontakt-modul__left,
.kontakt-modul__right {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kontakt-modul__left input,
.kontakt-modul__right textarea {
	padding: 0.7rem 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	border: 2px solid #fff;
	background: #fff;
	color: #2d2c80;
	box-sizing: border-box;
	width: 100%;
}

.kontakt-modul__right textarea {
	min-height: 160px;
	resize: vertical;
}

.kontakt-modul__footer {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kontakt-modul__checkbox {
	font-size: 0.85rem;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.kontakt-modul__checkbox input[type="checkbox"] {
	margin-top: 0.3rem;
}

.kontakt-modul__submit {
	background: none;
	color: #2d2c80;
	border: 2px solid #2d2c80;
	padding: 0.7rem 2rem;
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
	width: fit-content;
}

.kontakt-modul__submit:hover {
	background-color: #2d2c80;
	color: #fff;
}

.kontakt-modul__inner::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese-rosa.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

/* Fehler-/Erfolgsmeldungen */
.message-container {
	margin-top: 1rem;
	font-size: 0.95rem;
}

.message-container.error-message {
	color: red;
}

.message-container.success-message {
	color: green;
}

/* Responsive */
@media (max-width: 768px) {
	.kontakt-modul__grid {
		flex-direction: column;
	}
}

/* === bild-links-text.css === */
/* === Modul: Bild links, Text rechts === */
.modul--bild-links-text {
  font-family: 'Montserrat', sans-serif;
  padding: 4rem 1rem;
  box-sizing: border-box;
}

.modul--bild-links-text .bild-text-grid {
  max-width: 960px;
  margin: 0 auto;
  background-color: #f9c1cd; /* Rosa wie rosa-block */
  color: #2d2c80;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  padding-bottom: calc(2rem + 49px);
}

.modul--bild-links-text .bild img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

.modul--bild-links-text .text {
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modul--bild-links-text .bild-text-grid::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  /*background-image: url('../img/fliese-rosa.png');*/
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: bottom center;
  pointer-events: none;
}

.bild-links-text--rosa .bild-text-grid {
	background-color: #f9c1cd;
	color: #2d2c80;
}

.bild-links-text--rosa .bild-text-grid::after {
	/*background-image: url('../img/fliese-rosa.png');*/
}

.bild-links-text--dunkelblau .bild-text-grid {
	background-color: #2d2c80;
	color: #fff;
}

.bild-links-text--dunkelblau .bild-text-grid::after {
	/*background-image: url('../img/fliese_dunkelblau.png');*/
}

.bild-links-text--gelb .bild-text-grid {
	background-color: #fff35f;
	color: #2d2c80;
}

.bild-links-text--gelb .bild-text-grid::after {
	/*background-image: url('../img/fliese_gelb.png');*/
}

.bild-links-text--tuerkis .bild-text-grid {
	background-color: #00b4cd;
	color: #fff;
}

.bild-links-text--tuerkis .bild-text-grid::after {
	/*background-image: url('../img/fliesen-blau-vierfach.png');*/
}

.bild-links-text--gruen .bild-text-grid {
	background-color: #cae2bd;
	color: #2d2c80;
}

.bild-links-text--gruen .bild-text-grid::after {
	/*background-image: url('../img/fliesen-gruen-vierfach.png');*/
}
.bild-links-text__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.5rem;
	margin-bottom: 0;
	margin-top: 0; /* NEU: sorgt für optisches Gleichgewicht */
}

.modul--bild-links-text .text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0; /* NEU: leichtes optisches Absenken */
}


/* Responsive */
@media (max-width: 768px) {
  .modul--bild-links-text .bild-text-grid {
    grid-template-columns: 1fr;
  }

  .modul--bild-links-text .text {
    padding-top: 1rem;
  }
}

/* === text-bild-rechts.css === */
/* === Modul: Text links, Bild rechts === */
.modul--text-bild-rechts {
  font-family: 'Montserrat', sans-serif;
  padding: 4rem 1rem;
  box-sizing: border-box;
}

.modul--text-bild-rechts .bild-text-grid {
  max-width: 960px;
  margin: 0 auto;
  background-color: #f9c1cd; /* Standardfarbe, wird durch Farbklasse überschrieben */
  color: #2d2c80;
  display: grid;
  grid-template-columns: 2fr 1fr; /* TEXT | BILD */
  gap: 2rem;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  padding-bottom: calc(2rem + 49px);
}

.modul--text-bild-rechts .bild img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

.modul--text-bild-rechts .text {
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modul--text-bild-rechts .bild-text-grid::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  /*background-image: url('../img/fliese-rosa.png');*/
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: bottom center;
  pointer-events: none;
}

/* Farbhintergründe – exakt wie beim Bild-links-Modul */
.bild-links-text--rosa .bild-text-grid {
  background-color: #f9c1cd;
  color: #2d2c80;
}

.bild-links-text--rosa .bild-text-grid::after {
  /*background-image: url('../img/fliese-rosa.png');*/
}

.bild-links-text--dunkelblau .bild-text-grid {
  background-color: #2d2c80;
  color: #fff;
}

/* Links im dunkelblauen Modul gut lesbar machen */
.bild-links-text--dunkelblau .bild-text-grid a {
  color: #7deaff; /* heller türkiser Link */
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.bild-links-text--dunkelblau .bild-text-grid a:hover {
  color: #ffffff; /* weißer Hover */
  text-decoration: underline;
  text-decoration-color: #ffffff;
}



.bild-links-text--dunkelblau .bild-text-grid::after {
  /*background-image: url('../img/fliese_dunkelblau.png');*/
}

.bild-links-text--gelb .bild-text-grid {
  background-color: #fff35f;
  color: #2d2c80;
}

.bild-links-text--gelb .bild-text-grid::after {
  /*background-image: url('../img/fliese_gelb.png');*/
}

.bild-links-text--tuerkis .bild-text-grid {
  background-color: #00b4cd;
  color: #fff;
}

/* Lesbare Links im Modul mit türkisem Hintergrund */
.bild-links-text--tuerkis .bild-text-grid a {
    color: #fff35f; /* helles Branding-Gelb */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.bild-links-text--tuerkis .bild-text-grid a:hover {
    color: #ffffff; /* Weiß beim Hover */
    text-decoration: underline;
    text-decoration-color: #ffffff;
}


.bild-links-text--tuerkis .bild-text-grid::after {
  /*background-image: url('../img/fliesen-blau-vierfach.png');*/
}

.bild-links-text--gruen .bild-text-grid {
  background-color: #cae2bd;
  color: #2d2c80;
}

.bild-links-text--gruen .bild-text-grid::after {
  /*background-image: url('../img/fliesen-gruen-vierfach.png');*/
}

.bild-links-text__headline {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 0;
  margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .modul--text-bild-rechts .bild-text-grid {
    grid-template-columns: 1fr;
  }

  /* Bild soll nach oben */
  .modul--text-bild-rechts .bild {
    order: 1;
  }

  .modul--text-bild-rechts .text {
    order: 2;
    padding-top: 1rem;
  }
}

/* === textblock.css === */
.modul--textblock {
	font-family: 'Montserrat', sans-serif;
	padding: 4rem 1rem;
	box-sizing: border-box;
}

.textblock__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 2rem;
	padding-bottom: calc(2rem + 49px);
	box-sizing: border-box;
	position: relative;
}

.textblock__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.textblock__content {
	font-size: 1rem;
	line-height: 1.6;
}

/* Farbspezifisch */

.textblock--rosa .textblock__inner {
	background-color: #f9c1cd;
	color: #2d2c80;
}

.textblock--rosa .textblock__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese-rosa.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.textblock--dunkelblau .textblock__inner {
	background-color: #2d2c80;
	color: #fff;
}

.textblock--dunkelblau .textblock__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese_dunkelblau.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.textblock--gelb .textblock__inner {
	background-color: #fff35f;
	color: #2d2c80;
}

.textblock--gelb .textblock__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese_gelb.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.textblock--tuerkis .textblock__inner {
	background-color: #00b4cd;
	color: #fff;
}

.textblock--tuerkis .textblock__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliesen-blau-vierfach.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.textblock--gruen .textblock__inner {
	background-color: #cae2bd;
	color: #2d2c80;
}

.textblock--gruen .textblock__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliesen-gruen-vierfach.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}






/* Responsiv */
@media (max-width: 768px) {
	.textblock__inner {
		padding: 2rem 1rem;
	}
}

/* === einleitung.css === */
/* ===== EINLEITUNG – basiert auf rosa-bereich, aber farbvariabel ===== */
.einleitung {
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
}

.einleitung__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 220px) 2fr 1fr minmax(0, 220px);
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	align-items: stretch;
	box-sizing: border-box;
}

.einleitung__fliese {
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
	width: 100%;
}

.einleitung__content {
	grid-column: 2 / 4;
	padding: 3rem 2rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	position: relative;
}

.einleitung__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.einleitung__headline {
	grid-column: 1 / 2;
	align-self: start;
	font-size: 1.8rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

.einleitung__text {
	grid-column: 2 / 3;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

.einleitung__text > *:first-child {
	margin-top: 0;
}

.einleitung__text > *:last-child {
	margin-bottom: 0;
}


/* ===== Viewport-Anpassungen ===== */
@media (max-width: 1224px) {
	.einleitung__wrapper {
		grid-template-columns: minmax(0, 110px) 2fr 1fr minmax(0, 110px);
	}
}

@media (max-width: 579px) {
	.einleitung__wrapper {
		grid-template-columns: 0 1fr 1fr 0;
	}
	.einleitung__fliese {
		display: none;
	}
	.einleitung__headline {
		font-size: 1.4rem;
	}
	.einleitung__content {
		padding-bottom: calc(3rem + 49px);
	}
	.einleitung__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 49px;
		background-repeat: repeat-x;
		background-size: auto 100%;
		background-position: bottom center;
		pointer-events: none;
	}
}

@media (max-width: 900px) {
	.einleitung__inner {
		grid-template-columns: 1fr;
	}
	.einleitung__headline {
		margin-bottom: 1.5rem;
	}
	.einleitung__headline,
	.einleitung__text {
		grid-column: auto;
	}
}

/* ===== Farbvarianten inkl. Fliesen-Umschaltung ===== */

/* Rosa */
.einleitung--rosa .einleitung__content {
	background-color: #f9c1cd;
	color: #2d2c80;
}
.einleitung--rosa .einleitung__fliese {
	/*background-image: url('../img/fliese-grau-doppelt.png');*/
}
@media (max-width: 1224px) {
	.einleitung--rosa .einleitung__fliese {
		/*background-image: url('../img/fliese_grau.png');*/
	}
}
.einleitung--rosa .einleitung__content::after {
	/*background-image: url('../img/fliese-rosa.png');*/
}

/* Dunkelblau */
.einleitung--dunkelblau .einleitung__content {
	background-color: #2d2c80;
	color: #fff;
}

/* Einleitung – Dunkelblau: lesbare, moderne Linkfarbe */
.einleitung--dunkelblau .einleitung__content a {
    color: #7deaff; /* helles Türkis */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.einleitung--dunkelblau .einleitung__content a:hover {
    color: #ffffff; /* Weiß beim Hover */
    text-decoration: underline;
    text-decoration-color: #ffffff;
}


.einleitung--dunkelblau .einleitung__fliese {
	/*background-image: url('../img/fliese-grau-doppelt.png');*/
}
@media (max-width: 1224px) {
	.einleitung--dunkelblau .einleitung__fliese {
		/*background-image: url('../img/fliese_grau.png');*/
	}
}
.einleitung--dunkelblau .einleitung__content::after {
	/*background-image: url('../img/fliese_dunkelblau.png');*/
}

/* Gelb */
.einleitung--gelb .einleitung__content {
	background-color: #fff35f;
	color: #2d2c80;
}
.einleitung--gelb .einleitung__fliese {
	/*background-image: url('../img/fliese-grau-doppelt.png');*/
}
@media (max-width: 1224px) {
	.einleitung--gelb .einleitung__fliese {
		/*background-image: url('../img/fliese_grau.png');*/
	}
}
.einleitung--gelb .einleitung__content::after {
	/*background-image: url('../img/fliese_gelb.png');*/
}

/* Türkis (verwendet fliese_blau.png) */
.einleitung--tuerkis .einleitung__content {
	background-color: #00b4cd;
	color: #fff;
}

/* Einleitung – Türkis: warme, kontrastreiche Linkfarbe */
.einleitung--tuerkis .einleitung__content a {
    color: #fff35f; /* Branding-Gelb */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.einleitung--tuerkis .einleitung__content a:hover {
    color: #ffffff; /* Weiß beim Hover */
    text-decoration: underline;
    text-decoration-color: #ffffff;
}

.einleitung--tuerkis .einleitung__fliese {
	/*background-image: url('../img/fliese-grau-doppelt.png');*/
}
@media (max-width: 1224px) {
	.einleitung--tuerkis .einleitung__fliese {
		/*background-image: url('../img/fliese_grau.png');*/
	}
}
.einleitung--tuerkis .einleitung__content::after {
	/*background-image: url('../img/fliese_blau.png');*/
}

/* Grün */
.einleitung--gruen .einleitung__content {
	background-color: #cae2bd;
	color: #2d2c80;
}
.einleitung--gruen .einleitung__fliese {
	/*background-image: url('../img/fliese-grau-doppelt.png');*/
}
@media (max-width: 1224px) {
	.einleitung--gruen .einleitung__fliese {
		/*background-image: url('../img/fliese_grau.png');*/
	}
}
.einleitung--gruen .einleitung__content::after {
	/*background-image: url('../img/fliese_gruen.png');*/
}

/* === unterseiten-teaser.css === */
/* ===== EINLEITUNG (optional, wenn vorhanden) ===== */
.uebersicht-einleitung {
	font-family: 'Montserrat', sans-serif;
	padding: 3rem 1rem 2rem;
	text-align: center;
	color: #2d2c80;
}

.uebersicht-einleitung__headline {
	font-size: 2rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.uebersicht-einleitung__text {
	font-size: 1.1rem;
	font-weight: 400;
	max-width: 960px;
	margin: 0 auto;
	line-height: 1.6;
}

/* ===== GRID DER TEASERKACHELN ===== */
.unterseiten-teaser {
	padding: 2rem 1rem 4rem;
	background-color: #fff;
}

.unterseiten-teaser__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 10px;
	max-width: 960px;
	margin: 0 auto;
}


/* ===== EINZELKACHEL ===== */
.unterseiten-teaser__item {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	color: #2d2c80;
	text-align: left;
}

/* ===== BILD ===== */
.unterseiten-teaser__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
}

.unterseiten-teaser__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===== TEXTBEREICH ===== */
.unterseiten-teaser__content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0 0;
	box-sizing: border-box;
}

.unterseiten-teaser__content h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.unterseiten-teaser__content p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* ===== BUTTON ===== */
.unterseiten-teaser__button {
	margin-top: 1rem;
}

.unterseiten-teaser__button a {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 1px solid #2d2c80;
	color: #2d2c80;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.unterseiten-teaser__button a:hover {
	background-color: #2d2c80;
	color: #fff;
}

	.unterseiten-teaser__item {
		margin-bottom: 2.5rem;
	}

@media (max-width: 985px) {

}

/* === suchergebnisse.css === */
/* ===== SUCHERGEBNISSE ===== */
.suchergebnisse-bereich {
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
}

.suchergebnisse-bereich__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 220px) 2fr 1fr minmax(0, 220px);
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.suchergebnisse-bereich__content {
	grid-column: 2 / 4;
	padding: 3rem 2rem;
	box-sizing: border-box;
}

/* Headline */
.suchergebnisse-header {
	margin-bottom: 2rem;
}

.suchergebnisse-titel {
	font-size: 1.8rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #2d2c80;
	margin: 0;
}

.suchergebnisse-text{
	color: #2d2c80;
}

/* Ergebnisliste */
.suchergebnisse-liste {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Optional: Pagination anpassen */
.navigation.posts-navigation {
	margin-top: 2rem;
	text-align: center;
}


/* Nur Suchformular auf der Suchergebnisseite */
.suchergebnisse-formular {
	color: #2d2c80;
}

.suchergebnisse-formular .menu-search__field {
	color: #2d2c80;
	background-color: #fff;
	border: 1px solid #e50051;
}

.suchergebnisse-formular .menu-search__submit {
	filter: none;
}

.suchergebnisse-formular-wrapper {
	padding: 2rem;
	background: #f3f3f3;
	border: 2px dashed #e50051;
	box-sizing: border-box;
	margin-top: 1rem;
}

.suchergebnisse-formular {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.suchergebnisse-formular__feld {
	flex: 1;
	padding: 0.5rem 1rem;
	border: 1px solid #e50051;
	border-radius: 4px 0 0 4px;
	font-size: 1rem;
	color: #2d2c80;
	background-color: #fff;
}

.suchergebnisse-formular__button {
	width: 2.5rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e50051;
	border: none;
	border-radius: 0 4px 4px 0;
	background-image: url('../icons/weisse-lupe.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.2rem;
	cursor: pointer;
}


.suchergebnisse-formular .menu-search__field {
	border: 1px solid #e50051; /* oder keine */
	background-color: #fff;
	color: #2d2c80;
}

/* Optional: Strich unter dem Inputfeld entfernen */
.suchergebnisse-formular {
	border-bottom: none !important;
	box-shadow: none !important;
}

/* Optional: Andere padding/margin nur für Suchseite */
.suchergebnisse-formular .menu-search__submit {
	filter: none;
}


/* Responsive Verhalten */
@media (max-width: 1224px) {
	.suchergebnisse-bereich__wrapper {
		grid-template-columns: minmax(0, 110px) 2fr 1fr minmax(0, 110px);
	}
}

@media (max-width: 579px) {
	.suchergebnisse-bereich__wrapper {
		grid-template-columns: 0 1fr 1fr 0;
	}
}

/* === galerie-modul.css === */
/* === Modul: Galerie mit Bild, Name, Aufgabe === */
.modul--galerie {
	font-family: 'Montserrat', sans-serif;
	padding: 4rem 1rem;
	box-sizing: border-box;
	position: relative;
	max-width: 960px;
	margin: 80px auto 100px;
}

.galerie-headline {
	font-size: 1.8rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 1rem 2rem;
}

/* === Gitterlayout === */
.galerie-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	padding: 2rem;
	box-sizing: border-box;
	padding-bottom: calc(2rem + 49px);
}

/* === Karte === */
.galerie-item {
	background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid currentColor;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	overflow: hidden;
	position: relative;
}

/* === Bildbereich === */
.galerie-img {
	width: 100%;
	aspect-ratio: 1 / 1; /* 1:1 Bildformat – 500x500 bei großer Fläche */
	overflow: hidden;
}

.galerie-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
}

/* === Textbereich === */
.galerie-meta {
	padding: 1rem;
	color: inherit;
}

.galerie-name {
	font-weight: 600;
	font-size: 1.1rem;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.galerie-aufgabe {
	font-weight: 400;
	font-size: 0.95rem;
	margin-top: 0.3rem;
}

/* === Listen: moderner Bulletpunkt === */
.galerie-aufgabe ul {
	padding-left: 0.4em;
	margin: 0.5em 0;
	list-style: none;
}
.galerie-aufgabe ul li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 0.4em;
}
.galerie-aufgabe ul li::before {
	content: "»";
	position: absolute;
	left: 0;
	top: -0.3em;
	color: currentColor;
	font-weight: 600;
	font-size: 1.5em;
}

/* === CTA / Button (Karriere-Stil, aber dynamisch) === */
.galerie-meta .galerie-cta {            /* Button in der Karte: zentriert */
  margin-top: 1.5rem;
  text-align: center;
}

/* Basisstil: Outline wie im Karriere-Modul */
.btn {
  /* Standard: Button-Farbe nutzt die Modul-Schriftfarbe.
     Klassen .btn--rosa|… überschreiben --btn-fg. */
  --btn-fg: var(--mod-fg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 0px;                   /* dezente Ecken */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid var(--btn-fg);
  color: var(--btn-fg);
  background: transparent;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.btn:hover,
.btn:focus {
  background: var(--btn-fg);            /* invertiert wie im Karriere-Modul */
  color: var(--mod-bg);                 /* Text wird zur Modul-Hintergrundfarbe */
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--btn-fg);
  outline-offset: 2px;
}

/* Farbwahl über das globale Button-Feld (PHP vergibt .btn--rosa|…)
   → setzt nur die Vordergrundfarbe; Rest kommt aus .btn */
.btn--rosa       { --btn-fg: #f9c1cd; }
.btn--dunkelblau { --btn-fg: #2d2c80; }
.btn--gelb       { --btn-fg: #fff35f; }
.btn--tuerkis    { --btn-fg: #00b4cd; }
.btn--gruen      { --btn-fg: #cae2bd; }
.btn--standard   { --btn-fg: #000000; }

/* Optional: falls die PHP-Klasse btn--outline noch gesetzt wird, kein Sonderverhalten nötig. */
.btn--outline {}

/* === Fliesenabschluss unten === */
.modul--galerie::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

/* === Farbhintergründe & Fliesen (mit Variablen) === */
.galerie--rosa {
	--mod-bg: #f9c1cd;
	--mod-fg: #2d2c80;
	background-color: var(--mod-bg);
	color: var(--mod-fg);
}
.galerie--rosa::after {
	/*background-image: url('../img/fliese-rosa.png');*/
}

.galerie--dunkelblau {
	--mod-bg: #2d2c80;
	--mod-fg: #ffffff;
	background-color: var(--mod-bg);
	color: var(--mod-fg);
}

/* Lesbare Links in dunkelblauer Galerie */
.galerie--dunkelblau a {
    color: #7deaff; /* heller Türkis */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.galerie--dunkelblau a:hover {
    color: #ffffff; /* weiß bei Hover */
    text-decoration: underline;
    text-decoration-color: #ffffff;
}


.galerie--dunkelblau::after {
	/*background-image: url('../img/fliese_dunkelblau.png');*/
}

.galerie--gelb {
	--mod-bg: #fff35f;
	--mod-fg: #2d2c80;
	background-color: var(--mod-bg);
	color: var(--mod-fg);
}
.galerie--gelb::after {
	/*background-image: url('../img/fliese_gelb.png');*/
}

.galerie--tuerkis {
	--mod-bg: #00b4cd;
	--mod-fg: #ffffff;
	background-color: var(--mod-bg);
	color: var(--mod-fg);
}
.galerie--tuerkis::after {
	/*background-image: url('../img/fliesen-blau-vierfach.png');*/
}

.galerie--gruen {
	--mod-bg: #cae2bd;
	--mod-fg: #2d2c80;
	background-color: var(--mod-bg);
	color: var(--mod-fg);
}
.galerie--gruen::after {
	/*background-image: url('../img/fliesen-gruen-vierfach.png');*/
}

.galerie--standard {
	--mod-bg: #e0e0e0;
	--mod-fg: #000000;
	background-color: var(--mod-bg);
	color: var(--mod-fg);
}
.galerie--standard::after {
	display: none;
}

/* === Responsive === */
@media (max-width: 768px) {
	.galerie-grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

/* === bewerbungsmodul.css === */
.bewerbungsmodul {
	background-color: #fff;
	color: #2d2c80;
	padding: 0;
	box-sizing: border-box;
	margin-top:50px;
}

.bewerbungsmodul__inner {
	background-color: #f9c1cd;
	padding: 4rem 2rem calc(2rem + 49px);
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	position: relative;
	box-sizing: border-box;
}

.bewerbungsmodul__headline {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.8rem;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
}

.bewerbungsmodul__text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.6;
	font-size: 1rem;
}

.bewerbungsmodul__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bewerbungsmodul__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.bewerbungsmodul__left,
.bewerbungsmodul__right {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bewerbungsmodul__left input,
.bewerbungsmodul__right input,
.bewerbungsmodul__right textarea {
	padding: 0.7rem 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	border: 2px solid #fff;
	background: #fff;
	color: #2d2c80;
	box-sizing: border-box;
	width: 100%;
}


.bewerbungsmodul__right textarea {
	min-height: 160px;
	resize: vertical;
}

.bewerbungsmodul__footer {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bewerbungsmodul__checkbox {
	font-size: 0.85rem;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.bewerbungsmodul__checkbox input[type="checkbox"] {
	margin-top: 0.3rem;
}

.bewerbungsmodul__submit {
	background: none;
	color: #2d2c80;
	border: 2px solid #2d2c80;
	padding: 0.7rem 2rem;
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
	width: fit-content;
}

.bewerbungsmodul__submit:hover {
	background-color: #2d2c80;
	color: #fff;
}


/* === Farbvarianten & Fliesen === */

.bewerbungsmodul--rosa .bewerbungsmodul__inner {
	background-color: #f9c1cd;
	color: #2d2c80;
}
.bewerbungsmodul--rosa .bewerbungsmodul__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese-rosa.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.bewerbungsmodul--gelb .bewerbungsmodul__inner {
	background-color: #fff35f;
	color: #2d2c80;
}
.bewerbungsmodul--gelb .bewerbungsmodul__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese_gelb.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.bewerbungsmodul--tuerkis .bewerbungsmodul__inner {
	background-color: #00b4cd;
	color: #fff;
}
.bewerbungsmodul--tuerkis .bewerbungsmodul__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliesen-blau-vierfach.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.bewerbungsmodul--gruen .bewerbungsmodul__inner {
	background-color: #cae2bd;
	color: #2d2c80;
}
.bewerbungsmodul--gruen .bewerbungsmodul__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliesen-gruen-vierfach.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

.bewerbungsmodul--dunkelblau .bewerbungsmodul__inner {
	background-color: #2d2c80;
	color: #fff;
}
.bewerbungsmodul--dunkelblau .bewerbungsmodul__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 49px;
	/*background-image: url('../img/fliese_dunkelblau.png');*/
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom center;
	pointer-events: none;
}

/* Links farblich sichtbar auf dunklen Farben */
.bewerbungsmodul--dunkelblau a,
.bewerbungsmodul--tuerkis a {
	color: #fff;
	text-decoration: underline;
}


/* === Button-Anpassung auf dunkelblauem Hintergrund === */
.bewerbungsmodul--dunkelblau .bewerbungsmodul__submit {
	background-color: #fff;
	color: #2d2c80;
	border: 2px solid #fff;
}

.bewerbungsmodul--dunkelblau .bewerbungsmodul__submit:hover {
	background-color: #2d2c80;
	color: #fff;
	border-color: #fff;
}



/* === Upload-Bereich (Bewerbungsmodul) === */

.bewerbungsmodul__textarea {
	margin-top: 2rem;
}
.bewerbungsmodul__textarea textarea {
	width: 100%;
	padding: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	border: 2px solid #fff;
	background: #fff;
	color: #2d2c80;
	box-sizing: border-box;
	resize: vertical;
	min-height: 160px;
}

.bewerbungsmodul__upload {
	margin-top: 2rem;
}

/* Beschreibungstext über dem Button */
.bewerbungsmodul__upload-text {
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

/* Verstecke das native Upload-Feld */
.bewerbungsmodul__upload input[type="file"] {
	display: none;
}

/* Benutzerdefinierter Button */
.bewerbungsmodul__upload-button {
	display: inline-block;
	background-color: #fff;
	color: #2d2c80;
	border: 2px solid #2d2c80;
	padding: 0.5rem 1.2rem;
	font-size: 1rem;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.bewerbungsmodul__upload-button:hover {
	background-color: #2d2c80;
	color: #fff;
}

/* Dateiname rechts neben Button */
.bewerbungsmodul__upload-filename {
	margin-left: 1rem;
	font-size: 0.9rem;
	font-style: italic;
	color: inherit;
}








/* Responsive */
@media (max-width: 768px) {
	.bewerbungsmodul__grid {
		flex-direction: column;
	}
}

/* === u-bahn-linien.css === */
.line-test-wrapper {
    position: relative;
    padding: 100px 0;
}

.line-section {
    width: 300px;
    height: 150px;
    margin: 200px auto;
    text-align: center;
    line-height: 150px;
    background: #eee;
    border-radius: 10px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

#line-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Mobile: bestimmte Linien ausblenden */
@media (max-width: 1050px) {
  #line-overlay #linie-green,
  #line-overlay #linie-yellow-2,
  #line-overlay #linie-cyan-2,
  #line-overlay #linie-cyan-4,
  #line-overlay #linie-blue-2 {
    display: none;
  }
	#line-overlay #linie-cyan-3 {
		
	}
  /* Falls Marker auf diesen Pfaden liegen könnten, auch Marker ausblenden: */
  #line-overlay #marker,
  #line-overlay #marker-blue {
    display: none;
  }
}