/* Import der Schriftarten */
@import url('fonts.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Grundlegende Body-Einstellungen */
html, body {
    margin: 0; /* Kein Außenabstand */
    padding: 0; /* Kein Innenabstand */
    width:  100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    overflow-x: hidden; /* Horizontalen Scrollbalken verhindern */
    background-color: #D4EAE7; /* Hintergrundfarbe */
    color: #2B3534; /* Standardtextfarbe */
    hyphens: auto; /* Automatische Silbentrennung */
    word-break: normal; /* Standardmäßiges Wortverhalten */
    overflow-wrap: break-word; /* Bessere Umbrüche bei langen Wörtern */
}

/* Responsive Zeilenumbruch <br class>*/
	.mobile-break {
	  display: none; /* Standardmäßig ausblenden */
	}

	.tablet-break {
	  display: none; /* Standardmäßig ausblenden */
	}

/* Globale Einstellungen für Textblöcke */
p, div, ul, li {
    text-align: justify; /* Blocksatz */
	padding: 0.3125rem 0.625rem; 
	margin: 0;
}

/* Standard Größen */
body { font-size: 16px; padding: 0; margin: 0; } /* Basisschriftgröße, kein Padding und kein Margin */
h1 { font-size: clamp(2rem, 5vw, 2.5rem); padding: 0.3125rem 0.625rem; margin: 0; } /* 32px - 40px */
h2 { font-size: clamp(1.75rem, 4.5vw, 2rem); padding: 0.3125rem 0.625rem; margin: 0; } /* 28px - 32px */
h3 { font-size: clamp(1.5rem, 4vw, 1.75rem); padding: 0.3125rem 0.625rem; margin: 0; } /* 24px - 28px */
h4 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); padding: 0.3125rem 0.625rem; margin: 0; } /* 20px - 24px */
h5 { font-size: clamp(1rem, 3vw, 1.25rem); padding: 0.3125rem 0.625rem; margin: 0; } /* 16px - 20px */
h6 { font-size: clamp(0.875rem, 2.5vw, 1rem); padding: 0.3125rem 0.625rem; margin: 0; } /* 14px - 16px */



/* Standard-Schriftarten für Überschriften */
h1, h2 {
    font-family: 'WixMadeforDisplay-Bold', sans-serif; /* Schriftart */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

h3, h4, h5, h6 {
    font-family: 'WorkSans-Light', sans-serif; /* Schriftart */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Alternativgrößen für Dreaming Outloud */
h1.h_dol { color: #2B3534; font-family: 'DreamingOutloudSans-Caps', sans-serif; }
h2.h_dol { color: #2B3534; font-family: 'DreamingOutloudSans-Caps', sans-serif; }
h3.h_dol { color: #2B3534; font-family: 'DreamingOutloudSans-Caps', sans-serif; }
h4.h_dol { color: #2B3534; font-family: 'DreamingOutloudSans-Regular', sans-serif; }
h5.h_dol { color: #2B3534; font-family: 'DreamingOutloudSans-Regular', sans-serif; }
h6.h_dol { color: #2B3534; font-family: 'DreamingOutloudSans-Regular', sans-serif; }

/* Standard-Fließtext */
.text-1, p, div, ul, ol, li {
    font-family: 'WorkSans-Light', sans-serif; /* Schriftart */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    overflow-wrap: anywhere; /* Bessere Umbrüche */
}

/* Betonter Text */
.text-2, .bold-text {
    font-family: 'WixMadeforText-Bold', sans-serif; /* Schriftart */
    margin: 0; /* Kein Außenabstand */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Sekundärer Text */
.text-3, .secondary-text {
    font-family: 'WixMadeforText-Regular', sans-serif; /* Schriftart */
    margin: 0; /* Kein Außenabstand */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Alternative Schriftarten für Dreaming Outloud */
.t_dol .text-1, .t_dol p, .t_dol div, .t_dol ul, .t_dol ol, .t_dol li {
    font-family: 'DreamingOutloudSans-Regular', sans-serif; /* Schriftart */
}

.t_dol .text-2, .t_dol .bold-text {
    font-family: 'DreamingOutloudSans-Bold', sans-serif; /* Schriftart */
}

.t_dol .text-3, .t_dol .secondary-text {
    font-family: 'DreamingOutloudSans-Italic', sans-serif; /* Schriftart */
}

/* Listenstile */
ul, ol {
    font-family: 'DreamingOutloudSans-Regular', sans-serif; /* Schriftart */
    list-style-position: inside; /* Bullet Points außerhalb */
    padding-left: 1.875rem; /* Einrückung */
    margin: 0.625rem 0; /* Abstand über und unter Listen */
    max-width: 90vw; /* Maximale Breite */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Verschachtelte Listen */
ul ul, ol ol, ul ol, ol ul {
    padding-left: 1.875rem; /* Einrückung erhöhen */
    max-width: 90vw; /* Maximale Breite */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Listenelemente */
li {
    padding-left: 0.3125rem; /* Kleiner Abstand */
    max-width: 90vw; /* Maximale Breite */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    text-align: justify; /* Blocksatz */
}

/* Verschachtelte Listenelemente */
ul ul li, ol ol li, ul ol li, ol ul li {
    padding-left: 0.9375rem; /* Zusätzliche Einrückung */
}

/* Bullet Points */
li::marker {
    font-size: 1em; /* Einheitliche Größe */
}

/* Tief verschachtelte Listen */
ul ul ul, ol ol ol, ul ol ul, ol ul ol {
    padding-left: 1.875rem; /* Einheitliche Einrückung */
}

/* Allgemeine Links */
a {
    font-family: 'WixMadeforText-ExtraBold', sans-serif; /* Schriftart */
    color: #5C7F7B; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    transition: color 0.3s ease-in-out; /* Sanfter Farbübergang */
    font-weight: bold; /* Fettdruck */
}

/* Hover-Effekt für Links */
a:hover {
    color: #2B3534; /* Dunklere Farbe */
    text-decoration: underline; /* Unterstreichung */
}

/* Links in Listen */
ul li a {
    font-size: 115%; /* Schriftgröße */
    font-weight: bold; /* Fettdruck */
}

ul li a:hover {
    color: #2B3534; /* Hover-Farbe */
    text-decoration: underline; /* Unterstreichung */
}

/* Links in Buttons */
.nav-button a {
    font-size: 1.125rem; /* Schriftgröße */
    font-weight: normal; /* Normaler Schriftstil */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    font-family: 'WorkSans-Light', sans-serif; /* Schriftart */
	padding: 0.625rem;
}

.nav-button a:hover {
    color: #D4EAE7; /* Hover-Farbe */
}

/* Links im Footer */
.footer-nav a {
    color: #5C7F7B; /* Linkfarbe */
    font-size: 115%; /* Schriftgröße */
}

.footer-nav a:hover {
    color: #2B3534; /* Hover-Farbe */
    text-decoration: underline; /* Unterstreichung */
}

/* Zitate */
.quote {
    font-family: 'DreamingOutloudSans-Slanted', sans-serif; /* Schriftart */
    font-size: 125%; /* Schriftgröße */
}

/* Hervorgehobener Text */
.highlight {
    font-family: 'DreamingOutloudScript-Regular', sans-serif; /* Schriftart */
    font-size: 125%; /* Schriftgröße */
    font-weight: bold; /* Fettdruck */
}

/* Doodles */
.doodles {
    font-family: 'DreamingOutloudSans-Doodles', sans-serif; /* Schriftart */
}

/* Weihnachts-Doodles */
.christmas-doodles {
    font-family: 'DreamingOutloudSans-ChristmasDoodles', sans-serif; /* Schriftart */
}

/* HEADER-STIL */
header {
    background-color: #ADD4D0; /* Hintergrundfarbe */
    margin: 0; /* Kein Außenabstand */
    padding: 0; /* Kein Innenabstand */
    overflow-x: hidden; /* Horizontalen Scrollbalken verhindern */
    border-bottom: 0.0625rem solid rgba(85, 98, 97, 0.3); /* Transparente Trennlinie */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Container für Logo und Text */
.header-container {
    display: flex; /* Flexbox-Layout */
    align-items: center; /* Vertikale Ausrichtung */
    justify-content: center; /* Zentrierung */
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    max-width:  100%; /* Breite mit Scrollbar-Berechnung */ /* Maximale Breite */
    margin: 0 auto; /* Horizontale Zentrierung */
    padding: 0.625rem 1.25rem; /* Innenabstand */
    margin-top: 0.625rem; /* Abstand nach oben */
	flex-wrap: wrap; /* Zeilenumbrüche */
	gap: 1.5rem;
}

/* Logo */
.logo img {
    height: 25vh; /* Höhe */
    width: auto; /* Automatische Breite */
    margin-right: 1.25rem; /* Abstand nach rechts */
}

.standard-img { display: block; }
.responsive-img { display: none; }

/* Header-Text */
.header-text {
    text-align: center; /* Linksbündiger Text */
    
}

.header-text h2 {
    margin: 0; /* Kein Außenabstand */
    color: #2B3534; /* Textfarbe */
    font-weight: bold; /* Fettdruck */
}

/* Standard-Styles für Navigationsleiste */
.main-nav {
	display: grid; /* Grid-Layout */
	grid-template-columns: repeat(4, 1fr); /* Vier gleich große Spalten */
	gap: 0.5rem; /* Abstand zwischen den Buttons */
	justify-content: center; /* Zentriert die Buttons */
	align-items: center; /* Alle Boxen gleich hoch */
	white-space: nowrap; /* Kein Zeilenumbruch im Text */
	padding: 0.625rem 0.625rem;
	max-width: 60%;
	margin: 0 auto;
}

.nav-button {
	font-family: 'WorkSans-ExtraLight', sans-serif;
	text-align: center; /* Zentrierter Text */
	padding: 0.3125rem 0.3125rem;
	border-radius: 0.125rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
	background: transparent;
	display: block;
	width: 100%; /* Volle Breite innerhalb der Grid-Zelle */
}

.nav-button.active {
    font-weight: bold;
    color: #556261;
    background: rgba(92, 127, 123, 0.3);
	outline: 0.0125rem solid rgba(85, 98, 97, 0.5); /* Dezenter Rahmen */
}

.nav-button:hover {
    background: #5C7F7B;
    color: #D4EAE7;	
	outline: 0.0125rem solid rgba(85, 98, 97, 0.5); /* Dezenter Rahmen */
}

/* Mobile: Menü-Icon */
.menu-icon {
    display: none;
    cursor: pointer;
    color: #5C7F7B;
}

/* Dropdown-Menü */
.dropdown-menu {
    display: none; /* Anfangs versteckt */
    position: absolute;
    top: 3rem;
    right: 0;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
}

.dropdown-menu a {
    display: block;
    padding: 1rem;
    text-align: center;
    color: #5C7F7B;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background: #5C7F7B;
    color: #D4EAE7;
}

/* MAIN-BEREICH MIT HINTERGRUNDBILD */
main {
    background: url("../images/regenbogen_background_pastell_quer.png") no-repeat center; /* Hintergrundbild */
    background-size: cover; /* Vollständige Abdeckung */
    min-width: 100%; /* Volle Breite */
    max-width: 100%);
    min-height: auto; /* Minimale Höhe */
    overflow-x: hidden; /* Horizontalen Scrollbalken verhindern */
    margin: 0; /* Kein Außenabstand */
	padding: 0;
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    overflow-y: hidden; /* Vertikalen Scrollbalken verhindern */
}

//* 🔹 Standard-Styling für Abschnitte */
.section {
    width: 100%; /* Breite mit Scrollbar-Berechnung */
    max-width: 100%; /* Maximale Breite */
    overflow-x: hidden; /* Horizontalen Scrollbalken verhindern */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    border-top: 0.0625rem solid rgba(85, 98, 97, 0.2); /* Dezente Trennlinie */
    display: flex;
    justify-content: center; /* Zentrierung */
	margin: 0 !important;
	padding: 0 !important;
}

/* 🔹 Erste Section ohne obere Linie */
.section:first-of-type {
    border-top: none;
    display: flex;
    justify-content: center;
}

/* 🔹 Container für Boxen */
.section-box-container {
    margin: 0.625rem;
    flex-wrap: wrap; /* Zeilenumbrüche */
    gap: 1.5rem; /* Abstand zwischen den Boxen */
    padding: 1rem;
    align-items: stretch; /* Gleiche Höhe */
	}

/* 🔹 Einzelne Boxen */
.content-box {
    background-color: #D4EAE7;
    padding: 1rem;
    text-align: justify;
    box-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
    color: #2B3534;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 25%; /* Standard: Drei Spalten */
    max-width: 100%;
    border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* 🔹 Boxen mit unterschiedlichen Breiten */
.content-box.m { flex: 0 0 60%; max-width: 60%; } 
.content-box.xs { flex: 0 0 40%; max-width: 40%; } 
.content-box.xxs { flex: 0 0 25%; max-width: 25%; } 
.content-box.s { flex: 0 0 50%; max-width: 50%; } 
.content-box.l { flex: 0 0 70%; max-width: 70%; } 
.content-box.xl { flex: 0 0 85%; max-width: 85%; }

/* Linker Bereich (Text) nimmt den verfügbaren Platz ein */
.section-box-container .right {
    flex: 1 1 60%; /* Nimmt 60% des Containers, passt sich aber an */
    max-width: 70%;
}

/* Rechter Bereich (Widget) nimmt nur so viel Platz wie nötig */
.section-box-container .left {
    flex: 0 1 fit-content; /* Nimmt nur so viel Platz wie nötig */
    max-width: fit-content;
    align-self: flex-start;
    display: flex;
    justify-content: center;
}

/* 🔹 Manueller Umbruch */
.break {
    flex-basis: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* 🔹 Box mit Regenbogen-Hintergrund */
.content-box-2 {
    background: url("../images/regenbogen_background_pastell_quer.png") no-repeat center;
    background-size: cover;
    padding: 1.25rem;
    text-align: left;
    box-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
    color: #2B3534;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
    max-width: 80%;
    border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* 🔹 Erste Box in der zweiten Variante */
.content-box-2.first {
    flex: 0 0 60%;
    max-width: 60%;
    background-size: cover;
    border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* 🔹 Container */
.section-box-container-3 {
    background-color: #D4EAE7;
    display: flex;
    flex-wrap: wrap;
	gap: 0.75rem;
    justify-content: center;
    padding: 1.25rem;
    align-items: flex-start;
    border-bottom: 0.0625rem solid rgba(85, 98, 97, 0.2);
}

/* 🔹 Boxen */
.content-box-3 {
    background: url("../images/regenbogen_background_pastell_quer.png") no-repeat center;
    background-size: cover;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(33.333% - 1rem);
    max-width: 100%;
    border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Linker Bereich (Text) nimmt den verfügbaren Platz ein */
.section-box-container right {
    flex: 1 1 60%; /* Nimmt 60% des Containers, passt sich aber an */
    max-width: 70%;
}

/* Rechter Bereich (Widget) nimmt nur so viel Platz wie nötig */
.section-box-container left {
    flex: 0 1 fit-content; /* Nimmt nur so viel Platz wie nötig */
    max-width: fit-content;
    align-self: flex-start;
    display: flex;
    justify-content: center;
}

/* Standard-Abschnitt mit Standardhintergrund */
.section-standard {
    position: relative; /* Relative Positionierung */
    background-color: #D4EAE7; /* Hintergrundfarbe */
    max-width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Maximale Breite */
    margin: 0 auto; /* Zentrierung */
    padding: 1.25rem 1.25rem; /* Innenabstand */
    border-top: 0.0625rem solid rgba(85, 98, 97, 0.2); /* Dezente Trennlinie */
    display: block; /* Block-Element */
    display: flex; /* Flexbox-Layout */
    flex-direction: column; /* Vertikale Anordnung */
}

/* Überschriften im Standard-Abschnitt */
.section-standard h2 {
    text-align: center; /* Zentrierter Text */
}

/* Text im Standard-Abschnitt */
.section-standard p {
    text-align: left; /* Linksbündiger Text */
}

/* Listen im Standard-Abschnitt */
.section-standard ul {
    text-align: left; /* Linksbündiger Text */
}

/* Listenelemente im Standard-Abschnitt */
.section-standard li {
    text-align: left; /* Linksbündiger Text */
}

/* Abschnitt mit Regenbogenhintergrund */
.section-rainbow {
    background-color: transparent !important; /* Transparenter Hintergrund */
    position: relative; /* Relative Positionierung */
    max-width: 80vw; /* Maximale Breite */
    margin: 0 auto; /* Zentrierung */
    display: flex; /* Flexbox-Layout */
    flex-direction: column; /* Vertikale Anordnung */
    border-top: 0.0625rem solid rgba(85, 98, 97, 0.2); /* Dezente Trennlinie */
    padding: 1.25rem 1.25rem; /* Innenabstand */
	margin-bottom: 0.625rem;
}

/* TEAM-BEREICH */
.team {
    background: transparent; /* Transparenter Hintergrund */
    background-size: cover; /* Vollständige Abdeckung */
    position: relative; /* Relative Positionierung */
    max-width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Maximale Breite */
    margin: 0 auto; /* Zentrierung */
    display: flex; /* Flexbox-Layout */
    flex-direction: column; /* Vertikale Anordnung */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Überschrift im Team-Bereich */
.team h2 {
    text-align: center; /* Zentrierter Text */
    color: #2B3534; /* Textfarbe */
    margin-bottom: 0.625rem; /* Abstand nach unten */
}

/* Inhalt im Team-Bereich */
.team-content {
    display: flex; /* Flexbox-Layout */
    flex-direction: column; /* Vertikale Anordnung */
    justify-content: center; /* Zentrierung */
    align-items: center; /* Zentrierung */
    max-width: 1200px; /* Maximale Breite absolut */
	height: 100%;
    margin: 0 auto; /* Zentrierung */
    padding: 0px; /* Kein Innenabstand */
	box-sizing: border-box;
	min-width: 85%; /* Min Breite */
}

/* Teammitglieder */
.team-member {
    display: flex;
    align-items: stretch; /* Spalten gleich hoch */
    width: 100%;
    margin-bottom: 1.25rem;
    background-color: #D4EAE7;
    border-radius: 0.625rem;
    box-shadow: 0px 4px 0.375rem rgba(0, 0, 0, 0.1);
    height: auto;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Bildspalte */
.pic-column {
    width: 33%;
    min-width: 33%;
    max-width: 400px;
    height: auto; /* Höhe passt sich dynamisch an */
    min-height: 100%; /* Mindestens so hoch wie .team-member */
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: left;
    justify-content: center;
    background-color: #D4EAE7;
    position: relative;
    box-sizing: border-box;
	border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Bild in der Bildspalte */
.pic-column img {
    width: 100%; /* Volle Breite des Containers */
    height: 100%; /* Volle Höhe des Containers */
    object-fit: cover; /* Bild füllt den Container */
    border-radius: 0.625rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
}

/* Textspalte */
.text-column {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: right;
    min-width: 67%; /* % der Breite des .team-member */
    max-width: 1200px; /* Maximale Breite beibehalten */
    height: auto; /* Höhe basierend auf dem Inhalt */
    min-height: 100%; /* Mindesthöhe auf 100% setzen */
    padding: 0 1.875rem; /* Innenabstand nur links und rechts */
	
}

/* Slider-Container */
.slider-container {
    min-width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Minimale Breite */
    height: 100%; /* Volle Höhe */
    display: block; /* Block-Element */
    flex-direction: column; /* Vertikale Anordnung */
    justify-content: center; /* Zentrierung */
    overflow-y: auto; /* Vertikaler Scrollbalken */
    background: url("../images/regenbogen_background_pastell_quer.png") no-repeat center; /* Hintergrundbild */
    background-size: cover; /* Vollständige Abdeckung */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    position: relative; /* Relative Positionierung */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    padding: 0.625rem 0.625rem; /* Innenabstand */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); /* Schatten */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Einzelne Slides */
.slide {
    display: none; /* Standardmäßig ausgeblendet */
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    height: 100%; /* Volle Höhe */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    padding: 0.625rem 0.625rem; /* Innenabstand */
}

/* Aktiver Slide */
.slide.active {
    display: block; /* Sichtbar */
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    height: 100%; /* Volle Höhe */
}

/* Text in den Slides */
.slide p, h3, h4, h5, h5.h_dol {
    padding: 0.625rem 0.625rem; /* Innenabstand */
}

/* Navigation für den Slider (Dots) */
.dots-container {
    display: flex; /* Flexbox-Layout */
    justify-content: center; /* Zentrierung */
    flex-direction: row; /* Horizontale Anordnung */
    gap: 0.625rem; /* Abstand zwischen den Dots */
    margin-top: 0.625rem; /* Abstand nach oben */
    position: absolute; /* Absolute Positionierung */
    bottom: 0px; /* Position am unteren Rand */
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    text-align: center; /* Zentrierter Text */
}

/* Einzelner Dot */
.dot {
    height: 0.625rem; /* Höhe */
    width: 0.625rem; /* Breite */
    border-radius: 50%; /* Runde Form */
    background-color: rgba(92, 127, 123, 0.5); /* Hintergrundfarbe */
    transition: background-color 0.3s; /* Sanfte Animation */
}

/* Aktiver Dot */
.dot.active {
    background-color: #5C7F7B; /* Hintergrundfarbe */
}

/* Navigation-Pfeile */
.prev, .next {
    position: absolute; /* Absolute Positionierung */
    top: 50%; /* Position in der Mitte */
    transform: translateY(-50%); /* Zentrierung */
    background-color: #5C7F7B; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    cursor: pointer; /* Zeiger-Cursor */
    width: 2.5rem; /* Breite */
    height: 2.5rem; /* Höhe */
    display: flex; /* Flexbox-Layout */
    align-items: center; /* Zentrierung */
    justify-content: center; /* Zentrierung */
    border-radius: 50%; /* Runde Form */
}

.prev { left: 0px; } /* Linker Pfeil */
.next { right: 0px; } /* Rechter Pfeil */

/* Allgemeine Tabellenstile */
.table {
    width: 90%; /* Breite */
    border-collapse: collapse; /* Zusammenfallende Rahmen */
    background-color: transparent; /* Transparenter Hintergrund */
    margin: 0.1875rem auto; /* Zentrierung */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); /* Schatten */
    padding: 1.875rem; /* Innenabstand */
    border-radius: 0.625rem; /* Abgerundete Ecken */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Tabellenkopf */
.table th, td {
    padding: 0.1875rem 0.1875rem; /* Innenabstand */
    text-align: left; /* Linksbündiger Text */
}

/* Kopfzeile */
.table th {
    background-color: #8CB7B1; /* Hintergrundfarbe */
    font-weight: bold; /* Fettdruck */
}

/* Alternierende Zeilenfarben */
.table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.25); /* Hintergrundfarbe */
}

/* Bildbereich */
.image-section {
}

/* Bildcontainer */
.image-container {
    display: flex; /* Flexbox-Layout */
    justify-content: center; /* Zentrierung */
    gap: 1.25rem; /* Abstand zwischen den Bildern */
    max-width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Maximale Breite */
	height: 100%;
    margin: 0 auto; /* Zentrierung */
    padding: 0px; /* Kein Innenabstand */
	box-sizing: border-box;
	align-items: center; /* Zentrierung */
}

/* Bilder im Container */
.image-container img {
    width: 30vw; /* Breite */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); /* Schatten */
	max-width: 400px;	
	max-height: none; /* Feste Höhe entfernen */
    height: auto; /* Automatische Höhe */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* SCHACHMUSTER-BEREICH */
.section-chess {
    background-color: #D4EAE7 !important; /* Hintergrundfarbe */
    display: grid; /* Grid-Layout */
    grid-template-columns: repeat(2, 1fr); /* Zwei gleich breite Spalten */
    gap: 0; /* Kein Abstand zwischen den Spalten */
    align-items: stretch; /* Gleiche Höhe */
    width: 98%; /* Volle Breite */
    max-width: 1200px; /* Maximale Breite */
    min-height: 100%; /* Minimale Höhe */
    border-bottom: 0.0625rem solid rgba(85, 98, 97, 0.2); /* Dezente Trennlinie unten */
    margin: 0 auto; /* Zentrierung */
    overflow: hidden; /* Verhindert, dass Inhalte über die Box hinausragen */
    outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); /* Schatten */
    padding: 0; /* Kein Innenabstand */
}

.section-chess:last-of-type {
    margin-bottom: 1rem; /* Nur die letzte Section bekommt den Abstand */
}

/* LINKER BEREICH (TEXT) */
.chess-box.text {
    background-color: #D4EAE7; /* Hintergrundfarbe */
    text-align: justify; /* Blocksatz */
    display: flex; /* Flexbox-Layout */
	flex-direction: column;
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    padding: 2rem; /* Innenabstand für den Text */
    margin: 0; /* Kein Außenabstand */
	word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Alternativ für Browser-Kompatibilität */
    white-space: normal; /* Stellt sicher, dass Umbrüche erlaubt sind */
}

/* RECHTER BEREICH (BILD) */
.chess-box.image {
    display: flex; /* Flexbox für Zentrierung des Bildes */
    justify-content: center; /* Zentrierung horizontal */
    align-items: center; /* Zentrierung vertikal */
    background-color: #D4EAE7; /* Hintergrundfarbe */
    height: 100%; /* Volle Höhe */
    width: 100%; /* Volle Breite */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    margin: 0 !important; /* Kein Außenabstand */
    padding: 0 !important; /* Kein Innenabstand */
    overflow: hidden; /* Verhindert, dass das Bild über die Box hinausgeht */
    outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* In jeder zweiten Zeile die Reihenfolge umkehren */
.chess-box:nth-child(4n+3) { order: 2; } /* Text rechts */
.chess-box:nth-child(4n+4) { order: 1; } /* Bild links */


/* Bild im rechten Bereich */
.chess-box.image img {
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
    object-fit: cover; /* Bild füllt den Container komplett aus */
}

/* =========================
   FAQ-BEREICH CSS
   ========================= */

/* Container für den gesamten FAQ-Bereich */
.section-faq {
    max-width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Maximale Breite */
    padding: 1.25rem; /* Innenabstand */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* Container für die FAQ-Elemente */
#faq-container {
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    max-width: 75vw; /* Maximale Breite */
    margin: 1.25rem auto; /* Zentrierung */
    padding: 0.625rem; /* Innenabstand */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}

/* FAQ-Suchleiste */
.faq-search {
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    max-width: 50vw; /* Maximale Breite */
    padding: 0.625rem; /* Innenabstand */
    margin: 0.625rem auto; /* Zentrierung */
    outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    outline: none; /* Kein Outline */
    display: block; /* Block-Element */
}

/* Fokus auf die Suchleiste */
.faq-search:focus {
    border-color: #1d5b6e; /* Rahmenfarbe ändern */
}

/* FAQ-Struktur */
.faq-category > .faq-question > .faq-answer,
.faq-subquestion > .faq-answer {
    display: none; /* Standardmäßig ausgeblendet */
}

/* Sichtbarkeit aktivieren */
.faq-question.active .faq-answer,
.faq-subquestion.active .faq-answer {
    display: block; /* Sichtbar */
}

/* Bereich (1. Ebene) */
.faq-bereich {
    display: block !important; /* Immer sichtbar */
    margin-bottom: 0.625rem; /* Abstand nach unten */
    background-color: #B0DCD2; /* Hintergrundfarbe */
    border-radius: 0.625rem; /* Abgerundete Ecken */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Überschrift im Bereich */
.faq-bereich > h2 {
    padding: 0.625rem; /* Innenabstand */
    color: #2B3534; /* Textfarbe */
    text-align: center; /* Zentrierter Text */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    cursor: pointer; /* Zeiger-Cursor */
}

/* Hover-Effekt für Überschrift */
.faq-bereich > h2:hover {
    background-color: #A0C4B8; /* Hintergrundfarbe ändern */
    transition: background-color 0.3s ease; /* Sanfte Animation */
}

/* Kategorie (2. Ebene) */
.faq-category {
    margin-bottom: 0.9375rem; /* Abstand nach unten */
    padding: 0.625rem; /* Innenabstand */
    background-color: #C7E4DF; /* Hintergrundfarbe */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    border-radius: 0.625rem; /* Abgerundete Ecken */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Überschrift in der Kategorie */
.faq-category > h3 {
    margin-bottom: 0.625rem; /* Abstand nach unten */
    padding: 0.3125rem; /* Innenabstand */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    cursor: pointer; /* Zeiger-Cursor */
    color: #2B3534; /* Textfarbe */
}

/* Hover-Effekt für Kategorie-Überschrift */
.faq-category > h3:hover {
    background-color: #BFDCD7; /* Hintergrundfarbe ändern */
    transition: background-color 0.3s ease; /* Sanfte Animation */
}

/* Frage (3. Ebene) */
.faq-question {
    margin-bottom: 0.625rem; /* Abstand nach unten */
    padding: 0.5rem; /* Innenabstand */
    background-color: #DDEEF1; /* Hintergrundfarbe */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Überschrift in der Frage */
.faq-question > h4 {
    margin: 0; /* Kein Außenabstand */
    padding: 0.3125rem; /* Innenabstand */
    cursor: pointer; /* Zeiger-Cursor */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    color: #2B3534; /* Textfarbe */
}

/* Hover-Effekt für Frage-Überschrift */
.faq-question > h4:hover {
    background-color: #BFDCD7; /* Hintergrundfarbe ändern */
    transition: background-color 0.3s ease; /* Sanfte Animation */
}

/* Subfrage (4. Ebene) */
.faq-subquestion {
    margin-left: 1.25rem; /* Einrückung */
    margin-bottom: 0.625rem; /* Abstand nach unten */
    padding: 0.3125rem; /* Innenabstand */
    background-color: #DDEEF1; /* Hintergrundfarbe */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Überschrift in der Subfrage */
.faq-subquestion > h5 {
    margin: 0; /* Kein Außenabstand */
    padding: 0.3125rem; /* Innenabstand */
    cursor: pointer; /* Zeiger-Cursor */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    color: #2B3534; /* Textfarbe */
}

/* Hover-Effekt für Subfrage-Überschrift */
.faq-subquestion > h5:hover {
    background-color: #BFDCD7; /* Hintergrundfarbe ändern */
    transition: background-color 0.3s ease; /* Sanfte Animation */
}

/* FAQ-Antworten */
.faq-answer {
    display: none; /* Standardmäßig ausgeblendet */
    padding: 0.625rem 1.25rem; /* Innenabstand */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
    border-top: 0.0625rem solid rgba(85, 98, 97, 0.3); /* Dezente Trennlinie */
    color: #2B3534; /* Textfarbe */
    background-color: #F3F8FA; /* Hintergrundfarbe */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    margin-top: 0.625rem; /* Abstand nach oben */
}

/* Sichtbare Antworten */
.faq-question.active .faq-answer,
.faq-subquestion.active .faq-answer {
    display: block; /* Sichtbar */
}

/* Toggle-Effekt */
.faq-toggle {
    transition: background-color 0.3s ease; /* Sanfte Animation */
    padding: 0.9375rem; /* Innenabstand */
    border-radius: 0.625rem; /* Abgerundete Ecken */
}

/* Hover-Effekt für Toggle */
.faq-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Hintergrundfarbe ändern */
}

/* Anpassungen für die Suchleiste */
.faq-search {
    width: 100%; /* Breite mit Scrollbar-Berechnung */ /* Volle Breite */
    max-width: 50vw; /* Maximale Breite */
    padding: 0.75rem 1.25rem; /* Innenabstand */
    margin: 1.25rem auto; /* Zentrierung */
    display: block; /* Block-Element */
    border: 0.125rem solid #5C7F7B; /* Rahmen */
    border-radius: 1.5625rem; /* Abgerundete Ecken */
    outline: none; /* Kein Outline */
    transition: all 0.3s ease; /* Sanfte Animation */
}

/* Fokus auf die Suchleiste */
.faq-search:focus {
    border-color: #2B3534; /* Rahmenfarbe ändern */
    box-shadow: 0 0 0.5rem rgba(43, 53, 52, 0.3); /* Schatten */
}



/* Container für Text und Button */
.text-container {
    background-color: #D4EAE7; /* Hintergrundfarbe */
    padding: 1.25rem; /* Innenabstand */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); /* Schatten */
    margin: 1.25rem 0; /* Abstand nach oben und unten */
    max-width: 80vw; /* Maximale Breite */
    margin-left: auto;
    margin-right: auto; /* Zentrierung */
}

/* Textinhalt */
.text-content {
    font-family: 'WorkSans-Light', sans-serif; /* Schriftart */
    color: #2B3534; /* Textfarbe */
    line-height: 1.6; /* Zeilenabstand */
    margin: 0; /* Kein Außenabstand */
}

/* Ausgeblendeter Text */
.more-text {
    display: none; /* Standardmäßig ausgeblendet */
    margin-top: 0.625rem; /* Abstand nach oben */
}

/* Button "Mehr lesen" */
.read-more-btn {
    font-family: 'WixMadeforText-Bold', sans-serif; /* Schriftart */
    color: #5C7F7B; /* Textfarbe */
    background-color: transparent; /* Transparenter Hintergrund */
    border: 0.125rem solid #5C7F7B; /* Rahmen */
    border-radius: 0.625rem; /* Abgerundete Ecken */
    padding: 0.625rem 1.25rem; /* Innenabstand */
    margin-top: 0.625rem; /* Abstand nach oben */
    cursor: pointer; /* Zeiger-Cursor */
    transition: all 0.3s ease; /* Sanfte Animation */
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Hover-Effekt für Button */
.read-more-btn:hover {
    background-color: #5C7F7B; /* Hintergrundfarbe ändern */
    color: #D4EAE7; /* Textfarbe ändern */
}

/* Aktiver Zustand des Buttons */
.read-more-btn.active {
    background-color: #5C7F7B; /* Hintergrundfarbe ändern */
    color: #D4EAE7; /* Textfarbe ändern */
}

/* FOOTER INHALT IN 4 SPALTEN */
footer {
    background-color: #add4d0; /* Hintergrundfarbe */
    padding: 1.875rem 0; /* Innenabstand oben und unten */
}

/* Wrapper für den Footer */
.footer-container {
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentrierung */
    padding: 0 1.25rem; /* Innenabstand links und rechts */
}

/* 4-Spalten-Layout für Desktop */
.footer-content {
    display: grid; /* Grid-Layout */
    grid-template-columns: repeat(4, 1fr); /* Vier gleich große Spalten */
    gap: 1.25rem; /* Abstand zwischen den Spalten */
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentrierung */
}

/* Footer-Boxen */
.footer-box {
    text-align: left; /* Linksbündiger Text */
    width: auto; /* Automatische Breite */
    padding: 0.625rem; /* Innenabstand */
	align-items: flex-start; 
}

/* Überschriften in den Boxen */
.footer-box h5 {
    padding-left: 0.3125rem; /* Innenabstand links */
    padding-right: 0.3125rem; /* Innenabstand rechts */
    color: #2B3534; /* Textfarbe */
    margin-bottom: 0.125rem; /* Abstand nach unten */
}


/* Text und Links in den Boxen */
.footer-box p, 
.footer-box a {
    color: #5C7F7B; /* Textfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    line-height: 1.6; /* Zeilenabstand */
    display: block; /* Block-Element */
    margin-bottom: 0.5rem; /* Abstand nach unten */
}

/* Hover-Effekt für Links */
.footer-box a:hover {
    color: #2B3534; /* Dunklere Farbe beim Hover */
    text-decoration: underline; /* Unterstreichung */
}

/* Social Media Icons */
.footer-icons {
    display: flex; /* Flexbox-Layout */
    align-items: center; /* Vertikale Zentrierung */
    gap: 0.625rem; /* Abstand zwischen den Icons */
}

.footer-icons img {
    width: 1.875rem; /* Breite */
    height: 1.875rem; /* Höhe */
    transition: transform 0.2s ease-in-out; /* Sanfte Animation */
}

/* Hover-Effekt für Icons */
.footer-icons img:hover {
    transform: scale(1.1); /* Vergrößern */
}

/* Footer-Widget */
.footer-widget {
    text-align: center; /* Zentrierter Text */
    margin-top: 1.25rem; /* Abstand nach oben */
	border-radius: 0.625rem !important; /* Abgerundete Ecken */
}


/* Trennlinie */
.footer-divider {
    border: none; /* Kein Rahmen */
    height: 0.0625rem; /* Höhe */
    background: rgba(85, 98, 97, 0.2); /* Hintergrundfarbe */
    margin: 1.25rem 0; /* Abstand nach oben und unten */
}

/* Copyright und Links im unteren Bereich */
.footer-bottom {
    display: flex; /* Flexbox-Layout */
    justify-content: space-between; /* Platz zwischen den Elementen */
    align-items: center; /* Vertikale Zentrierung */
    flex-wrap: wrap; /* Zeilenumbruch bei Bedarf */
	gap: 1.5rem; /* Abstand zwischen den Boxen */
    padding: 0.625rem 0; /* Innenabstand oben und unten */
}

/* Copyright-Text */
.footer-copyright {
    color: #556261; /* Textfarbe */
    margin: 0; /* Kein Außenabstand */
}

/* Navigationslinks im Footer */
.footer-nav {
    display: flex; /* Flexbox-Layout */
    gap: 0.9375rem; /* Abstand zwischen den Links */
}

.footer-nav a {
    color: #5C7F7B; /* Textfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    transition: color 0.3s ease; /* Sanfte Animation */
}

/* Hover-Effekt für Navigationslinks */
.footer-nav a:hover {
    color: #2B3534; /* Dunklere Farbe beim Hover */
    text-decoration: underline; /* Unterstreichung */
}

/* COOKIE-BANNER */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 50%; /* Ausgangspunkt in der Mitte */
    transform: translateX(-50%); /* Exakte Zentrierung */
    width: 75%;
    background: #5C7F7B; /* Harmonisch ins Farbschema */
    color: #D4EAE7;
    text-align: center;
    padding: 1rem;
	margin: 1rem;
    display: flex;
    justify-content: center; /* Zentrierter Inhalt */
    align-items: center;
    z-index: 1000;
    box-shadow: 0 0.125rem 0.375rem rgba(255, 255, 255, 0.5); /* Schatten */
    outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
    flex-wrap: wrap; /* Falls Platz eng wird */
    gap: 1rem; /* Abstand zwischen Elementen */
	border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Text */
.cookie-banner p {
    margin: 0;
    flex-grow: 1;
    padding: 0 1rem;
    font-size: 1rem;
    color: #D4EAE7;
}

/* Buttons */
.cookie-banner button {
    font-family: 'WixMadeforText-ExtraBold', sans-serif; /* Schriftart */
    display: block;
    padding: 0.3125rem 0.625rem;
    background: transparent;
    color: #D4EAE7;
    transition: all 0.3s ease;
    border-radius: 0.625rem;
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

/* Hover-Effekt */
.cookie-banner button:hover {
    background: #add4d0;
    color: #5C7F7B;	
	outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
}

.cookie-banner a {
    color: #D4EAE7;
}

#faq-form {
  max-width: 80vw;
  margin: 1.25rem auto;
  text-align: center; /* Zentriert den gesamten Inhalt innerhalb des Containers */
  background-color: #D4EAE7;
  padding: 1.25rem;
  border-radius: 0.625rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
  outline: 0.0125rem solid rgba(85, 98, 97, 0.2);
}

/* Das Formular selbst als Inline-Block, damit es zentriert wird */
#faq-form form {
  display: inline-block;
  text-align: left; /* Innerhalb des Formulars können die Labels linksbündig sein */
  width: 100%;
  max-width: 600px;
}

/* Standard-Felder */
#faq-form label {
  font-family: 'WorkSans-Light', sans-serif;
  color: #2B3534;
  font-weight: bold;
  display: block;
  margin-top: 0.75rem;
}

#faq-form input[type="text"],
#faq-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border: 0.125rem solid rgba(85, 98, 97, 0.2);
  border-radius: 0.625rem;
  font-family: 'WorkSans-Light', sans-serif;
  font-size: 1rem;
  color: #2B3534;
  background-color: #fff;
}

/* Submit-Button optisch angepasst */
#faq-form input[type="submit"] {
  display: inline-block;
  padding: 5px 10px; /* Nur so groß wie nötig zzgl. 5px Padding */
  background-color: #5C7F7B;
  color: #D4EAE7;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  font-family: 'WixMadeforText-ExtraBold', sans-serif;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-top: 1rem;
}

/* Hover-Zustand für den Submit-Button */
#faq-form input[type="submit"]:hover {
  background-color: #2B3534;
  transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
}
}