/*
Theme Name: Lindenschule Rebuild
Template: twentytwentyfive
Author: Lindenschule Ostfildern
Description: Child-Theme zur Anpassung des Twenty Twenty-Five Themes für die Lindenschule-Website.
Version: 1.0
*/

/* ==========================================================================
   1. Farbvariablen & globale Reset/Grundwerte
   ========================================================================== */

/* Farben als Variablen, damit’s konsistent bleibt */
:root {
	--ls-green-light:  #DBEF97;  /* alter Haupt-Footer-Grünton */
	--ls-green-bright: #B9E82C;  /* Akzentgrün (z. B. alte Widget-Headlines/Bullets) */
	--ls-green-dark:   #1B6608;  /* dunkles Grün für Text auf hellgrün */
}

/* Lindenschule überschreibt WordPress: Fließtext */
body,
input,
textarea,
select {
	font-family: 'Source Sans Pro', sans-serif !important;
	color: #666 !important;
	line-height: 1.5em !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

/* Überschriften global */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-latest-posts__post-title {
	font-family: 'Francois One', Helvetica, Arial, Lucida, sans-serif !important;
	color: #333 !important;
	font-weight: 500 !important;
	line-height: 1em !important;
	padding-bottom: 10px !important;
	margin-top: 0 !important;
}
p {
	padding-bottom:0.5em;
	padding-top:0.5em;
}
ul {
	padding-right:0.25em !important;
	padding-left:2em !important;
}
/* Links im Hauptcontent (#ls-page), außer WP-Button-Elemente */
#ls-page a:where(:not(.wp-element-button)) {
	color: #6aa54a !important;
	text-decoration: none !important;
}


/* Blogpost-Überschrift in Listen */
.wp-block-latest-posts__post-title {
	font-size: 1.5em !important;
	border-bottom: 1px dotted #ccc !important;
	line-height: 1.1em !important;
	text-decoration: none;
}

/* alte h3-Größe */
h3 {
	font-size: 22px !important;
}

/* Root-Padding von TT25 rausnehmen */
body {
	--wp--style--root--padding-left: 0 !important;
	--wp--style--root--padding-right: 0 !important;
}

/* Basis-Reset: Stelle sicher, dass nichts bricht */
body {
	margin: 0;
	padding: 0;
}

/* Box Shadow um die Seite (alte "Boxed"-Optik) */
.wp-site-blocks {
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 0 10px 0 rgba(0,0,0,.2);
	box-shadow:         0 0 10px 0 rgba(0,0,0,.2);
}

/* alter page-container => jetzt .wp-site-blocks */
.wp-site-blocks {
	display: block;          /* kein TT25-Grid */
	width: 90%;
	max-width: 1425px;
	margin: 0 auto;          /* zentrieren */
	padding: 0;              /* keine Innenabstände */
	position: relative;      /* Anker für absolut positionierte Kinder */
}

/* falls TT25 global padding reinspielt */
.wp-site-blocks,
.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Verhindert vertikale Zentrierung in horizontalen Gruppen */
.is-layout-flex.is-horizontal {
	align-items: flex-start !important;
	align-content: flex-start !important;
}

.is-layout-flex.is-vertical {
	align-items: flex-start !important;
	align-content: flex-start !important;
}

/* erstes Kind im Contentbereich ohne Top-Margin */
.entry-content > *:first-child {
	margin-top: 0 !important;
}

/* ==========================================================================
   2. Generische Container-Helfer
   ========================================================================== */

/* Allgemeiner Container */
.container {
	position: relative;
	text-align: left;
}
/* Layout-Hauptbereich: ls-page enthält Hauptspalte + Marginalspalte */
#ls-page {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	width: 100%;
	max-width: none;
}

/* Spalten innerhalb von ls-page */
#column-34,
#column-marginal {
	display: block;
}


/* Hauptspalte: bekommt den ganzen Restplatz */
#column-34 {
	flex: 1 1 0;       /* Basis 0 = nimmt wirklich den Restplatz */
	min-width: 0;
	max-width: none;
	padding:2%;
}

/* Marginalspalte: feste schmale Spalte rechts */
#column-marginal {
	flex: 0 0 260px;   /* feste Breite */
	max-width: 260px;
}
.wp-block-post-content{
	padding:2%;
}
/*Abstand Bilder in Gallerie*/
#column-marginal img {
	margin: 1rem;
	margin-bottom:10%;
	padding-right:20%;
}

/* ==========================================================================
   3. Header, Logo & Figurenleiste
   ========================================================================== */

/* äußerer Header-Balken */
#ls-header-bar {
	margin: 0 !important;
	position: relative;
	width: 100% !important;
	max-width: inherit !important;
	max-height: 160px;
	background-color: #fff;
	z-index: 9999;
}

/* innerer Balken */
#upper-header {
	margin: 0 !important;
	position: relative;
	width: 100% !important;
	max-width: inherit !important;
	max-height: 160px;
	background-color: #fff;
	z-index: 9999;
}

/* Headerline unter dem Header */
#headerline {
	position: absolute;
	top: 155px;
	left: 0;
	height: 1px;
	width: 100%;
	background-color: #e4e4e4;
}

/* Logo-Bereich */
.logo-inner {
	width: 24%;
	float: left;
	margin-top: 15px;
	margin-left:20px;
}

.logo_container {
	position: relative;
	width: 100% !important;
	min-width: 250px;
	max-width: inherit !important;
	max-height: 180px;
	padding: 10px 0;
	margin: 0 !important;
	height: 180px;
}

/* Logo-Element selbst */
#logo {
	display: block;
	margin: 0;
	padding: 0;
	height: auto;
	max-height: 120px;
	width: auto;
}

img#logo {
	border: none;
	outline: none;
	vertical-align: middle;
}

/* Figuren-Reihe im Header */
#top-illu-content {
	display: flex !important;
	gap: .35rem !important;
	align-items: flex-end !important;

	/* Alt-Seite Verhalten */
	transform: scale(0.7) translateX(-10%) !important;
	min-width: 520px !important;
	max-height: 150px !important;
	position: absolute !important;
	bottom: -20px !important;
}

/* Wrapper für die Figurenleiste */
#svgwrapper {
	display: inline-block !important;
	height: 180px !important;
	padding-top: 20px !important;
}

/* Männchen-Container im Header */
#header-illu {
	position: absolute !important;
	bottom: 10px !important;
	right: 0 !important;
	left: auto !important;
	margin: 0 !important;
	transform: none !important;
	pointer-events: none;
	display: block !important;
	box-sizing: border-box;
	text-align: left !important;
}

/* top-animation-Eigenschaften am Header-Illu */
#header-illu.top-animation {
	width: 76% !important;
	display: block;
	height: 180px !important;
}

/* ==========================================================================
   4. Hauptlayout: Lindenschule-Seiten (mit Sidebar)
   ========================================================================== */

/* zentrierter Bereich unter Header */
.lindenschule-page .ls-main-area {
	max-width: 1425px !important;
}

/* Standard: 2 Spalten (Sidebar links + Content) – jetzt mit Flex */
.lindenschule-page .ls-content-wrap {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-start !important;
	gap: 0;

	width: 100% !important;      /* NEU: volle Breite innerhalb von ls-main-area */
	max-width: none !important;  /* NEU: alignwide / Theme-Begrenzung aushebeln */
}

/* 3 Spalten, wenn rechte Sidebar existiert */
.lindenschule-page .ls-content-wrap:has(> .sidebar-right) {
	grid-template-columns: 260px minmax(0, 1fr) 240px !important;
}

/* Content-Karte */
.lindenschule-page .ls-content {
	background: #fff !important;
	padding: 2.5rem 2.75rem !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 22px rgba(0,0,0,.05) !important;
}

/* WordPress-Auto-Zentrierung im Content abschwächen */
.ls-content-wrap .is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* ls-content soll IMMER den gesamten Platz neben der Sidebar einnehmen */
.ls-content {
	flex: 1 1 auto !important;    /* wächst auf den gesamten Restplatz */
	width: 100% !important;       /* immer volle Breite des Grid-Bereichs */
	max-width: none !important;   /* keine künstliche Begrenzung */
	min-width: 0 !important;      /* verhindert Inhalts-Schrumpf-Begrenzung */
}
/* In ls-content: wp-block-post-content immer volle Kartenbreite nutzen */
.ls-content > .wp-block-post-content {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0;
	margin-right: 0;
}
/*Beitragsseite: Unterstreichung Titel*/
.wp-block-latest-posts__post-title {
	display: inline-block;
	font-size: 1.5em !important;
	line-height: 1.1em !important;
	text-decoration: none;
	border-bottom: 1px dotted #ccc !important;
	padding-bottom: 4px;
}
/* ==========================================================================
   5. Sidebar-Navigation (linke Spalte)
   ========================================================================== */

#sidebar-nav {
	padding: 12px;
}

/* Margin um die Sidebar herum */
div#sidebar-nav.is-layout-flex {
	margin: 15px !important;
}

/* Basis-Stil für vertikales Menü im Sidebar */
#sidebar-nav .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* Gap wirklich überall aus in der Sidebar-Navi */
#sidebar-nav nav.is-layout-flex {
	gap: 0 !important; /* trennt Button vs. Container */
}

#sidebar-nav nav > .wp-block-navigation__container,
#sidebar-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: 0 !important; /* trennt die LI-Items */
}

/* Menüitems */
#sidebar-nav .wp-block-navigation-item {
	position: relative;
	border-bottom: 1px solid #ddd !important;
}

/* Links in der Sidebar */
#sidebar-nav .wp-block-navigation-item__content {
	display: block !important;
	padding: 6px 8px !important;
	color: rgba(71,71,71,0.6);
	font-size: 16px !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* leichte Einrückung in Submenus */
#sidebar-nav .wp-block-navigation__submenu-container a {
	padding-left: 20px !important;
	font-size: 15px !important;
	padding: 5px 20px !important;
	color: #555 !important;
}

/* LI-Elemente sollen volle Breite einnehmen */
#sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
}

/* Hover-Effekt */
#sidebar-nav .wp-block-navigation-item__content:hover {
	color: rgba(71,71,71,0.6) !important;
	background-color: rgba(0,0,0,0.03) !important; /* dezenter Hover-Hintergrund */
}

/* Sidebar: aktuelle Seite markieren */
#sidebar-nav .current-menu-item > .wp-block-navigation-item__content,
#sidebar-nav .wp-block-navigation-item__content[aria-current="page"],
#sidebar-nav .wp-block-navigation-item__content[aria-current="true"] {
	color: #b9e82c !important;
	border-radius: 3px;
}

/* Aktive Seite sicher markieren (verschiedene WP-Klassen) */
#sidebar-nav li.current-menu-item > a.wp-block-navigation-item__content,
#sidebar-nav li.current_page_item > a.wp-block-navigation-item__content,
#sidebar-nav li.current-menu-ancestor > a.wp-block-navigation-item__content,
#sidebar-nav li:has(> a[aria-current]) > a.wp-block-navigation-item__content {
	color: #b9e82c !important;
	border-radius: 3px;
}

/* Sidebar-Submenu-Container Optik */
#sidebar-nav .wp-block-navigation__submenu-container {
	background: #f8f8f8 !important;
	border-left: 2px solid #ccc !important;
	/*padding: 4px 0 !important;*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.08);
	border-color: #b9e82c !important;
	border-top: none;
	border-right:none;
	border-bottom:none;
	border-left-width: 3px;
	border-left-style: solid;
}
/* Sidebar-Submenu: Blatt bei Hover*/
#sidebar-nav .wp-block-navigation__submenu-container li:hover {
	background: url(pix/blatt-s-ico.png) 95% 3px no-repeat;
}
#sidebar-nav .wp-block-navigation__submenu-container li a:hover, .nav ul li a:hover {
	background-color: rgba(217,249,131,.7) !important;
}

/* Sidebar: Dropdown-Pfeil ganz nach rechts */
#sidebar-nav .wp-block-navigation-item.has-child {
	display: flex;
	align-items: center;
	position: relative; /* für den "Brücken"-Hover */
}

#sidebar-nav .wp-block-navigation-item__content {
	flex: 1 1 auto;
}

#sidebar-nav .wp-block-navigation__submenu-icon {
	margin-left: auto;
}

/* Brücke für Hover über den Rand hinaus */
#sidebar-nav .wp-block-navigation-item.has-child::after {
	content: "";
	position: absolute;
	top: 0;
	right: -12px;   /* Breite der Brücke */
	width: 12px;
	height: 100%;
}

/* Anzeigen von Submenus bei Hover oder Toggle (Desktop) */
#sidebar-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
#sidebar-nav .wp-block-navigation-item[aria-expanded="true"] > .wp-block-navigation__submenu-container,
#sidebar-nav .wp-block-navigation-item > .wp-block-navigation__submenu-container:hover {
	display: block;
}

/* Sidebar-Typo etwas fetter */
#sidebar-nav a {
	font-weight: 600 !important;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

/* Widget-Grundstil (keine Position ändernd) */
#footer-widgets .footer-widget {
	margin: 5px 10% 40px 0; /* wie alt */
}

/* Grundabstände wie alt: Container im Footer (derzeit deaktiviert) */
/*
#main-footer .container,
#footer-widgets {
	max-width: 1184px;
	margin: 0 auto;
	/* padding: 25px 20px 0;
	box-sizing: border-box;
	width: 90%;
}
*/

/* Haupt-Footer-Container */
#main-footer {
	max-width: calc(100% + 88px) !important;
	width: calc(100% + 88px) !important;
	position: relative;
	overflow: visible; /* wichtig! */
	margin-left:  -44px;   /* gleicht das horizontale Padding aus */
	margin-right:  -44px;
}

/* Row 1: hellgrün, dunkler Text */
#footer-row-1 {
	background: var(--ls-green-light);
	color: var(--ls-green-dark);
	padding: 14px 16px;
	width: 100%;
}

/* Row 2: dunkleres Grün, weißer Text */
#footer-row-2 {
	background: #97A26D;
	color: #fff;
	padding: 14px 16px;
	width: 100%;
}

/* Footer: Row 1 zweispaltig nebeneinander */
@media (min-width: 720px) {
	#footer-row-1 {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
	}

	#footer-row-1 > #footer-block-1,
	#footer-row-1 > #footer-block-2 {
		flex: 1 1 50%;
		max-width: 50%;
		box-sizing: border-box;
	}
}

/* Footer: Row 2 zweispaltig nebeneinander */
@media (min-width: 720px) {
	#footer-row-2 {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
	}

	#footer-row-2 > #footer-block-3,
	#footer-row-2 > #footer-block-4 {
		flex: 1 1 50%;
		max-width: 50%;
		box-sizing: border-box;
	}
}

/* Positionierung der Blöcke in Row 1 */
#footer-row-1 > div {
	flex: 0 0 25% !important;
	max-width: 25% !important;
	box-sizing: border-box;
}

/* Text im Block 4 rechtsbündig */
#footer-block-4 {
	text-align: right !important;
}

/* Hintergrunderweiterung hinter dem Footer (hellgrün) 
#main-footer::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--ls-green-light);
	left: -1.2rem;
	right: 0;
	z-index: -1;
}*/

/* Block-Gaps im Footer entfernen */
footer#main-footer.wp-block-group.is-layout-flex {
	gap: 0 !important;
}

footer#main-footer.wp-block-group.is-layout-flex,
footer#main-footer :where(.is-layout-flex, .is-layout-grid) {
	gap: 0 !important;
}

/* Margin des Footer-Groups oben entfernen */
.wp-site-blocks > footer#main-footer {
	margin-block-start: 0 !important;
}

/* Linkfarben in den Blöcken */
#footer-block-1 a,
#footer-block-2 a {
	color: var(--ls-green-dark);
	text-decoration: none;
}

#footer-block-3 a,
#footer-block-4 a {
	color: #fff;
	text-decoration: none;
}

#footer-block-1 a:hover,
#footer-block-2 a:hover {
	color: var(--ls-green-bright);
}

#footer-block-3 a:hover,
#footer-block-4 a:hover {
	opacity: .9;
}

/* Footer-Widget-Headlines/Bullets mit Akzentfarbe */
#main-footer .footer-widget h4 {
	color: var(--ls-green-bright);
}

#main-footer .footer-widget li::before {
	border-color: var(--ls-green-bright);
}

/* Unterer Balken (Credits) wie alt: Rechtsbündig, dunkles Grün */
#footer-bottom {
	background: var(--ls-green-dark);
	padding: 12px 0;
	color: #fff;
}

#footer-bottom .credits {
	text-align: right;
	color: #fff;
}



/* ==========================================================================
   7. Content-spezifische Typo (z. B. alte NF-Headlines)
   ========================================================================== */

/* NF-Headlines im Content (z. B. bei Blog) */
.entry-content h2 {
	font-family: Source Sans Pro, Arial, sans-serif !important;
	font-size: 1.5em !important;
	letter-spacing: 0.025em !important;
	color: #888 !important;
	border-bottom: 1px dotted #ccc !important;
	margin-top: 1em !important;
	margin-bottom: 4px !important;
	padding-bottom: 5px !important;
	font-weight: 300 !important;
}

/* Blog Titel faken */
#blog-title {
	font-family: 'Francois One', Helvetica, Arial, Lucida, sans-serif !important;
	color: #333 !important;
	font-weight: 500 !important;
	line-height: 1em !important;
	padding-bottom: 10px !important;
	margin-top: 0 !important;
	font-size: 30px !important;
	
}

/* Dunkles Layout — Divi-Reste, falls genutzt */
.et_pb_bg_layout_dark,
.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark h4,
.et_pb_bg_layout_dark h5,
.et_pb_bg_layout_dark h6 {
	color: #fff !important;
}

/* Boxen mit Farbvarianten */
.et-bio .et-box-content h1,
.et-bio .et-box-content h2,
.et-bio .et-box-content h3,
.et-bio .et-box-content h4,
.et-bio .et-box-content h5,
.et-bio .et-box-content h6 {
	color: #80acb0;
}

.et-shadow .et-box-content h1,
.et-shadow .et-box-content h2,
.et-shadow .et-box-content h3,
.et-shadow .et-box-content h4,
.et-shadow .et-box-content h5,
.et-shadow .et-box-content h6 {
	color: #737373;
}

/* Counters, Module etc. */
.et_pb_circle_counter h1,
.et_pb_number_counter h1 {
	position: relative;
	font-size: 18px;
}

.et_pb_column_1_4 .et_pb_number_counter h1,
.et_pb_column_1_5 .et_pb_number_counter h1,
.et_pb_column_1_6 .et_pb_number_counter h1 {
	padding: 10px 0 0 0;
}

/* Portfolio-Bereich */
.et_pb_fullwidth_portfolio .et_pb_portfolio_image .et_pb_module_header,
.et_pb_fullwidth_portfolio .et_pb_portfolio_image h1 {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 40%;
	padding: 0 5px;
}

.et_pb_fullwidth_portfolio .et_pb_portfolio_image:hover .et_pb_module_header,
.et_pb_fullwidth_portfolio .et_pb_portfolio_image:hover h1 {
	margin-top: 35%;
}

/* Galerie & Portfolio Titel */
.et_pb_gallery_grid .et_pb_gallery_item .et_pb_gallery_title,
.et_pb_gallery_grid .et_pb_gallery_item h1,
.et_pb_portfolio_item .et_pb_module_header,
.et_pb_portfolio_item h2 {
	margin-top: 10px;
}

/* ==========================================================================
   8. Animationen
   ========================================================================== */

@keyframes ls-bob {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

#top-illu-content .svimg:nth-child(odd) img {
	animation: ls-bob 2.6s ease-in-out infinite !important;
}

#top-illu-content .svimg:nth-child(even) img {
	animation: ls-bob 3s ease-in-out .25s infinite !important;
}

/* ==========================================================================
   9. Header-Bar für Desktop (≥ 900px)
   ========================================================================== */

@media (min-width: 900px) {

	/* Desktop: Sidebar-Submenus als Flyout rechts */
	#sidebar-nav .wp-block-navigation__submenu-container {
		position: absolute;
		top: 0;
		left: 100%;
		margin-left: 0;
		display: none; /* Startzustand: versteckt */
	}

	/* äußerer Balken: volle Breite + Schatten */
	.ls-header-bar {
		width: 100%;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0,0,0,.15);
		position: relative;
		z-index: 50;
	}

	/* innerer Container: zentriert wie früher */
	.ls-header-bar .ls-header-inner,
	.ls-header-bar > .wp-block-group,
	.ls-header-bar > .wp-block-group > .wp-block-group {
		max-width: 1180px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		width: 100%;
		flex-wrap: nowrap;
	}
}

/* ==========================================================================
   10. Responsive Tweaks
   ========================================================================== */




/* ==========================================================================
   11. seitenspezifische Anpassungen
   ========================================================================== */
/*=============== Accordion für Schulprofil / alle .ls-accordion ===============*/


/* Haupt-Content-Gruppe voll breit ziehen (horizontale Group im Inhalt) */
.wp-block-post-content .wp-block-group.is-horizontal.is-nowrap.is-layout-flex {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
}
/* Titelzeile: pillenförmiger Balken mit Blatt-Icon */
.ls-accordion summary {
	display: flex;
	align-items: center;
	position: relative;

	padding: 0.5rem 1.25rem;
	padding-right: 3rem; /* Platz für Plus/Minus rechts */
	padding-left: 50px;  /* Platz für das Blatt */

	border-radius: 999px;
	border:none;
	background-color: rgba(234, 254, 158, 0.46); /* wie .et_pb_accordion_0 .et_pb_toggle_close */

	/* Blatt-Icon wie im Original (.et_pb_toggle) */
	background-image: url('pix/blatt-s-ico.png');
	background-repeat: no-repeat;
	background-position: 10px 4px;

	/* Typografie & Breite */
	font-family: 'Francois One', Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: rgba(71,71,71,0.6); /* wie alte Menü-Farbe */
	width: 100%;
	box-sizing: border-box; /* Padding und Border sauber mitrechnen */

	cursor: pointer;
	list-style: none; /* Bullet entfernen (Firefox & Co.) */
	margin-bottom:1em !important;
	
}

/* Standard-Dreieck ausblenden (Chrome/WebKit) */
.ls-accordion summary::-webkit-details-marker {
	display: none;
}



/* Plus/Minus-Kreis rechts */
.ls-accordion summary::after {
	text-shadow: 0 0;
	font-family: "ETmodules" !important;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	text-transform: none;
	speak: none;
	content: "\e050";              /* ETmodules-Plus */
	position: absolute;
	top: 50%;
	right: 2%;
	margin-top: -.5em;             /* wie im alten CSS */
	color: #ccc;
	font-size: 16px;
}

/* Wenn geöffnet: Plus-Icon einfärben statt Kreis/Minus */
.ls-accordion details[open] summary::after {
	color: #b9e82c; /* Akzentgrün wie im Restdesign */
}

/* Inhalt unter der Pille leicht eingerückt */
.ls-accordion details > *:not(summary) {
	margin-top: .5rem;
	padding: .25rem 1.5rem .75rem 1.5rem;
	color: #666; /* Body-Textfarbe aus altem Theme */
}

/* Optional: etwas mehr Luft unten bei geöffneten Einträgen */

/* Accordion Animation (CSS-only, kein JS notwendig)
+ Breite der inneren Gruppe nicht künstlich verengen */
.ls-accordion details > .accordion-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;

	/* NEU: volle Breite, egal was is-layout-constrained vorgibt */
	width: 100%;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
	transition: max-height 0.35s ease,
	opacity 0.25s ease;
}

/* geöffnet */
.ls-accordion details[open] > .accordion-content {
	opacity: 1;
	/* ausreichende maximale Höhe angeben (groß genug für die größten Inhalte) */
	max-height: 1000px;
}
/* ls-accordion: nicht als Flexcontainer behandeln, sondern normal blockig */
.ls-accordion.is-layout-flex {
	display: block !important;
}
/* ls-accordion und direkte Kinder immer volle Breite */
.ls-accordion {
	width: 100%;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
}


/* Wenn WP die Gruppe als "is-layout-constrained" markiert, selber voll breit */
.ls-accordion.is-layout-constrained {
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
}

/* Abstand + Breite für die einzelnen Accordion-Einträge */
.ls-accordion details {
	margin: 0 0 16px;
	display: block;
	width: 100%;
	border: none;          /* Grundzustand: kein Rahmen */
}

/* Geschlossen: Border nur um summary (Pillenform) */
.ls-accordion details:not([open]) > summary {
	border: 1px solid #d5d9c6;
	border-radius: 999px;
}

/* Geöffnet: Border um das gesamte details-Element */
.ls-accordion details[open] {
	border: 1px solid #b9e82c;  /* grün wie bisher */
	border-radius: 32px;       /* gleiche Rundung – keine „Blockform“ */
}

/* Geöffnet: summary selbst hat KEINEN eigenen Rahmen mehr */
.ls-accordion details[open] > summary {
	border: none;
}


.ls-accordion details[open] > summary {
	color: #b9e82c;
	border-radius: 16px 16px 0 0; /* oben abgerundet, unten gerade */
	background-color: rgba(234, 254, 158, 0.46);
}
/* Klick-/Fokus-Effekte: kein anderes Hintergrund-Blitzen */
.ls-accordion summary:focus,
.ls-accordion summary:active {
	outline: none;
	/*background-color: inherit;*/
}

/* Links im Accordion-Inhalt wie im restlichen Design */
.ls-accordion a {
	color: #65d628;
	text-decoration: none;
}

.ls-accordion a:hover {
	color: #b9e82c;
	text-decoration: underline;
}
/*linkbox HG etc.*/
.marginal-linkbox{
	background-color: rgba(217,249,131,0.4);
	padding: 20px;
}
.marginal-linkbox a {
	color: #6aa54a !important;
}

/* ==========================================================================
12. mobile/portrait
========================================================================== */
/* ==========================================================================
12.1 mobile/portrait Topbar/Menü
========================================================================== */
/* Schritt 1: Mobile Grundlayout NUR für kleine Touch-Geräte */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {

	/* 1. Logo oben mittig */
	.logo-inner {
		float: none;            /* float links deaktivieren */
		width: auto;            /* nicht mehr starr 24% */
		margin: 10px auto;      /* zentriert durch auto-Margins */
		text-align: center;     /* Inhalt in diesem Container mittig */
	}

	.logo_container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		height: auto;
		max-height: none;
		padding: 10px 0;
	}

	#logo {
		display: inline-block;
		height: auto;
		max-height: 80px;       /* Logo auf Mobile etwas kleiner */
		width: auto;
	}

	/* 2. Headerline direkt unter dem Header, volle Breite */
	#headerline {
		position: static;       /* nicht mehr bei top:155px festgenagelt */
		width: 100%;
		height: 1px;
		margin: 0;
		background-color: #e4e4e4;
		clear: both;            /* trennt sich sauber vom Header darüber */
	}

	/* 3. Hauptbereich und Sidebar unter dem Header ausrichten */
	.lindenschule-page .ls-main-area {
		margin-top: 0;
	}

	/* Sidebar + Content untereinander stapeln */
	.lindenschule-page .ls-content-wrap {
		flex-direction: column;
	}

	/* Sidebar-Navigation volle Breite unter der Headerline */
	#sidebar-nav {
		position: static;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	/* Header-Männchen auf kleinen Touch-Geräten ausblenden */
	#header-illu {
		display: none !important;
	}
	/* Sidebar-Wrapper: oben keinen Abstand, wenn Menü zu/auf Mobile */
	div#sidebar-nav.is-layout-flex {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Burger-Button: kein Outline-Rahmen auf Mobile */
	button.wp-block-navigation__responsive-container-open {
		outline-style: none;
		outline: none;
	}
}
/* Schritt 2: Sidebar-Navigation & Burger-Button für kleine Touch-Geräte */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {

	#sidebar-nav nav.wp-block-navigation {
	  display: flex !important;
	  flex-direction: column;
	  align-items: stretch !important;  /* Kinder bekommen volle Breite */
	  width: 100% !important;
	}

  /* Burger-Button oben rechts, in Lindenschul-Grün */
  #sidebar-nav .wp-block-navigation__responsive-container-open {
    align-self: stretch;              /* nimmt die ganze Breite von nav ein */
    display: flex;                    /* wird selbst Flex-Container */
    justify-content: flex-end;        /* Icon im Button nach rechts schieben */
    margin: 0 0 0.5rem 0;
    width:95%;
    color: #b9e82c !important;
    border-color: #b9e82c !important;
    background: transparent !important;
  }

  #sidebar-nav .wp-block-navigation__responsive-container-open svg {
    color: #b9e82c !important;
    fill: #b9e82c !important;
  }

  #sidebar-nav .wp-block-navigation__responsive-container-open svg {
    color: #b9e82c !important;
    fill: #b9e82c !important;
  }

  /* Der Responsive-Container (aufgeklapptes Menü) soll die volle Breite nutzen */
  #sidebar-nav .wp-block-navigation__responsive-container {
    width: 100%;
    align-self: stretch;   /* dehnt sich über die ganze Breite, obwohl nav align-items:flex-end hat */
  }

  /* Die eigentliche Menü-Liste darin ebenfalls */
  #sidebar-nav .wp-block-navigation__container {
    width: 100%;
  }
}
/* Schritt 3: Kein Overlay, Menü-Liste direkt unter dem Burger für kleine Touch-Geräte */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {

  /* Auf Touch nur die Burger-Variante benutzen:
     die "normale" Liste direkt im nav ausblenden */
  #sidebar-nav nav.wp-block-navigation.is-responsive > .wp-block-navigation__container {
    display: none;
  }

  /* Responsive-Container nicht als Overlay, sondern normal im Flow */
  #sidebar-nav .wp-block-navigation__responsive-container {
    position: static;
    inset: auto;
    transform: none;
    width: 90%;
    max-width: 90%;
    max-height: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Inhalt des Responsive-Containers ohne Extra-Padding */
  #sidebar-nav .wp-block-navigation__responsive-container-content {
    padding: 0;
  }

  /* Close-Button sichtbar lassen und in Lindenschul-Grün einfärben */
  #sidebar-nav .wp-block-navigation__responsive-container-close {
    display: inline-flex;
    align-self: flex-end;
    margin-bottom: 0.5rem;
    color: #b9e82c !important;
    border-color: #b9e82c !important;
    background: transparent !important;
  }

  #sidebar-nav .wp-block-navigation__responsive-container-close svg {
    color: #b9e82c !important;
    fill: #b9e82c !important;
  }





  /* Submenüs: keine Flyouts, sondern normale eingerückte Liste */
  #sidebar-nav .wp-block-navigation__submenu-container {
    position: static;
    margin: 0;
    padding: 0;
    display: block;
    background: transparent !important;
    border-left: 0 !important;
    box-shadow: none;
  }

  /* Eltern mit Unterpunkten verhalten sich wie normale Listenelemente */
  #sidebar-nav .wp-block-navigation-item.has-child {
    display: block;
    align-items: flex-start;
  }

  /* Hover-Brücke und ähnliches auf Mobile deaktivieren */
  #sidebar-nav .wp-block-navigation-item.has-child::after {
    content: none;
  }

  /* Pfeil-/Toggle-Icon ausblenden – keine extra Ausklapp-Logik mehr */
  #sidebar-nav .wp-block-navigation__submenu-icon {
    display: none;
  }
  html.has-modal-open,
    body.has-modal-open,
    body.has-block-navigation-open {
      overflow: auto !important;
      position: static !important;
      height: auto !important;
    }
}
/* Schritt 4: Feinschliff für Menü-Liste auf kleinen Touch-Geräten */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {

  /* Hauptpunkte: große, gut tippbare Zeilen */
  #sidebar-nav .wp-block-navigation-item__content {
    padding: 10px 12px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Unterpunkte: leicht eingerückt unter ihrem Hauptpunkt */
  #sidebar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-left: 28px !important;   /* Einrückung */
    font-size: 15px !important;
  }

  /* Blatt-Hintergrund & Hover für Submenüs auf Mobile deaktivieren */
  #sidebar-nav .wp-block-navigation__submenu-container li:hover {
    background: none !important;
  }

  #sidebar-nav .wp-block-navigation__submenu-container li a:hover {
    background-color: transparent !important;
  }

  /* Allgemeiner Hover auf Mobile sehr dezent halten */
  #sidebar-nav .wp-block-navigation-item__content:hover {
    background-color: rgba(0,0,0,0.02) !important;
  }
}
/* ==========================================================================
   12.2 mobile Content/ls-page
   ========================================================================== */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
        /* In ls-page: Spalten untereinander statt nebeneinander */
        #ls-page {
          flex-direction: column;
        }

        #column-34,
        #column-marginal {
          flex: 0 0 auto;      /* keine feste Spaltenbreite mehr */
          max-width: 100%;     /* beide volle Breite */
        }
	/* Content-Karte */
	.lindenschule-page .ls-content {
		padding: 0.8rem 0.8rem !important;
	}
        #main-footer {
            margin-left:  -14px !important;   /* gleicht das horizontale Padding aus */
            margin-right: -14px !important;
            width:calc(100% + 28px) !important;
            max-width:calc(100% + 28px) !important;
        }
}
/* ==========================================================================
   12.3 portrait footer
   ========================================================================== */
@media (max-width: 1024px) {

  /* Footer-Sprunglink o.ä. ausblenden wie im alten Layout */
  .footer-skip {
    display: none !important;
  }

  /* Footer-Row-1: statt 4 schmalen Spalten → 2 breitere Spalten */
  #footer-row-1 > div {
    flex: 1 0 25% !important;
    max-width: 50% !important;
    box-sizing: border-box;
  }
  #main-footer {
      margin-left:  -44px;   /* gleicht das horizontale Padding aus */
      margin-right: -44px;
      width:calc(100% + 88px);
      max-width:calc(100% + 88px);
  }
}
/* ==========================================================================
   12.4 portrait 
   ========================================================================== */

/* Header-Männchen bei Breite <1100px ausblenden */
@media (max-width: 1100px) {
    #header-illu {
        display: none !important;
    }
}
/* Spalten-Layout unter 1000px untereinander (unabhängig von Touch) */
@media (max-width: 1000px) {
    #ls-page {
        flex-direction: column;
    }

    #column-34,
    #column-marginal {
        flex: 0 0 auto;
        max-width: 100%;
    }
}


/* ==========================================================================
   12.x mobile/portrait Archiv
   ========================================================================== */
/* Auch im Portrait-Modus: Hauptspalte über Marginalspalte 
@media (orientation: portrait) {


	#ls-page {
		flex-direction: column;
	}

	#column-34,
	#column-marginal {
		flex: 0 0 auto;
		max-width: 100%;
	}
}
*/
/* Männchen im Header bei kleineren Screens ausblenden 
@media (max-width: 1024px) {
	#header-illu {
		display: none !important;
	}
	.footer-skip{
		display:none !important;
	}
	#footer-row-1 > div {
		flex: 1 0 25% !important;
		max-width: 50% !important;
		box-sizing: border-box;
	}
}
/* Mobile Layout (max-width: 900px) 
@media (max-width: 900px) {

	/* Content statt nebeneinander: untereinander stapeln 
	.lindenschule-page .ls-content-wrap {
		flex-direction: column;
	}
	/* Inneres 2-Spalten-Layout in ls-page mobil untereinander 
	#ls-page {
		flex-direction: column;
	}

	#column-34,
	#column-marginal {
		flex: 0 0 auto;
		max-width: 100%;
	}

	/* Logo kleiner
	#logo {
		max-height: 80px;
	}

	/* Headerhöhe darf schrumpfen 
	#upper-header {
		min-height: auto !important;
		padding-bottom: 10px !important;
	}

	/* Sidebar-Submenus: Standard WP-Verhalten, keine Flyouts 
	#sidebar-nav .wp-block-navigation__submenu-container {
		position: static;
		margin-left: 0;
		display: none;
		border-left: 0;
		box-shadow: none;
		background: transparent;
		padding: 0;
	}

	/* Content-Fullwidth 
	.wp-block-post-content {
		max-width: none !important;
		width: 100% !important;
	}

	/* Content-Box etwas kompakter 
	.lindenschule-page .ls-content {
		padding: 2rem !important;
	}

	/* Block-Flexbasis in Content-Grid auf volle Breite 
	.lindenschule-page .ls-content-wrap [class*="wp-container-"] {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

/* Mobile: Seite vollbreit (kein Boxed) 
@media (max-width: 720px) {
	.wp-site-blocks {
		width: 100% !important;
	}
}
*/