/* ================================================================
   kgs-heide.de – Standard.css
   Neu strukturiert nach MOBILE-FIRST-Prinzip (August 2026)

   Aufbau:
   1. Basis / Reset / Typografie          (gilt ab kleinstem Screen)
   2. Layout (Wrapper, Header, Footer)
   3. Navigation
   4. Content-Komponenten (Akkordeon, Listen, Formulare ...)
   5. Bilder & Galerien (inkl. Gallery Creator)
   6. Kalender & News
   7. Utility-Klassen
   8. Sonderelemente (Weihnachtsbrief, Sondermeldung, Video-Popup ...)
   9. BREAKPOINT ≥ 768px  (Tablet)
   10. BREAKPOINT ≥ 1200px (Desktop)

   Hinweis zu Vereinfachungen gegenüber der alten Datei:
   - iPad-Sonderregeln (768–1080px) und allgemeine Tablet-Landscape-
     Regeln wurden zu EINER ≥768px-Stufe zusammengeführt.
   - "orientation:landscape/portrait"-Bedingungen wurden entfernt
     (reine Breiten-Breakpoints statt Ausrichtung).
   → Bitte auf echtem iPad / Tablet gegentesten.
   ================================================================ */


/* ================================================================
   1. BASIS / RESET / TYPOGRAFIE (Mobile Default)
   ================================================================ */

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('/files/fonts/raleway/raleway-v22-latin-regular.woff2') format('woff2'),
		url('/files/fonts/raleway/raleway-v22-latin-regular.woff') format('woff');
}

h1, h2, h3, h4, h5, p, a, ul, li, ol {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

body {
	width: calc(100vw - 15%);
	font-variant-numeric: lining-nums;
	margin-right: auto;
	margin-left: auto;
	font-family: 'Raleway', sans-serif, Arial;
	color: #032236;
	background-color: #830000;
}

h1 {
	margin-bottom: 2rem;
	color: #032236;
}

h2 {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	color: #830000;
}

h3 {
	font-size: 1.1rem;
	line-height: 1.3rem;
	margin-bottom: 1.5rem;
	font-weight: 600;
}

h4 {
	font-size: 1rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

p {
	font-size: 1.4em;
	line-height: 1.5em;
	margin-bottom: 1em;
	letter-spacing: 0.05em;
}

a {
	color: #032236;
	letter-spacing: 0.05rem;
}

a.hyperlink_txt {
	font-size: 1rem;
	line-height: 1.5rem;
}


/* ================================================================
   2. LAYOUT (Wrapper, Header, Footer)
   ================================================================ */

#main div.inside {
	display: flex;
	flex-direction: column;
}

/* Reihenfolge auf der Startseite: mobil = Mitte zuerst */
.startseite #main-left  { order: 2; }
.startseite #main-center { order: 1; }
.startseite #main-right { order: 3; }

#wrapper {
	background-color: #fafafa;
	padding-left: 4vw;
	padding-right: 4vw;
	padding-top: 1vw;
}

/* --- Header --- */

#header-desktop,
#image-film-desktop {
	display: none;
}

.startseite #header {
	height: auto;
}

.folgeseite #header {
	height: 43rem;
}

/* Bereich nur für Startseite sichtbar */
.folgeseite #image-film-desktop,
.folgeseite #image-film {
	display: none;
}

#header .content-text {
	text-align: center;
}

#header-mobil-img {
	display: flex;
	justify-content: space-around;
}
#header-mobil.content-text .rte p{
	font-size:1rem;
}

#header h1,
#header h1 a {
	font-family: "Times New Roman", Times, serif;
	text-decoration: none;
	color: #032236;
	font-size: calc(24px + (48 - 24) * ((100vw - 480px) / (1600 - 480)));
}

#header h2 {
	color: #032236;
}

#header .hovertext figcaption.caption a i.fas:before {
	margin-right: 0.5rem;
}

.caption {
	font-size: 0.8rem;
	text-align: center;
	margin-top: 0.5rem;
	line-height: 1.5rem;
}

/* Bild im Header klickbar machen – visuelles Feedback */
.header_thumbnail a {
	display: block;
	position: relative;
	cursor: zoom-in;
	overflow: hidden;
}

.header_thumbnail a img {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.header_thumbnail a:hover img {
	transform: scale(1.05);
	opacity: 0.9;
}

/* --- Main / Content --- */

#main-center {
	text-align: center;
}

#main-left h2,
#main-right h2,
#main-left h2.content-headline,
#left-custom h2.content-headline,
.mod_newslist h2,
.minical h2,
.cal-list h2
{
	font-size: 1rem !important;
	font-weight: 600;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-block: 1px solid #ddd;
}



#main-left p,
#main-right p,
.mod_newslist.vorschau p,
.event.layout_upcoming a,
.vorschau {
	font-size: 0.9rem;
	line-height: 1.2rem;
}

#main-left .mod_eventlist,
#main-left .ce_image,
#main-left .mod_newslist {
	margin-bottom: 2rem;
}

#main ol,
#main ul {
	margin-bottom: 1rem;
	padding-left: 1rem;
}

#main ul li,
#main ol li,
#main div.content_text ul li,
li.download-element {
	margin-bottom: 1rem;
	font-size: 1rem;
	line-height: 1.5rem;
}

#main div.content-text ul li {
	list-style-type: square;
}

#main .ce_slick-slider {
	margin-bottom: 2rem;
}

#main-center.mod_article .content-text {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* --- Footer --- */

#footer .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-top: 1px solid #ddd;
	padding-top: 0.5rem;
	margin-top: 2rem;
}

#footer .column {
	flex: 1 1 calc(50% - 2px);
	box-sizing: border-box;
	padding: 2px;
	text-align: center;
}

#footer .column:nth-child(3) {
	flex: 1 1 100%;
}

#footer p {
	font-size: 0.8rem;
	margin-bottom: 0;
}


/* ================================================================
   3. NAVIGATION
   ================================================================ */

#nav.mod_navigation {
	display: none;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	border-bottom: 1px solid #032236;
	overflow: visible;
}

#nav strong.active {
	color: #830000;
}

#nav.mod_navigation ul.level_1 {
	display: flex;
	justify-content: space-around;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

#nav ul.level_1 > li,
#nav ul.level_1 > li a {
	font-weight: 300;
	font-size: 1.1rem;
	color: #032236;
	text-decoration: none;
}

#nav.mod_navigation ul.level_1 li.submenu.trail a.submenu.trail span {
	color: #830000;
	font-weight: 600;
}

/* Submenü ausfahren */
#nav .level_2 {
	position: absolute;
	max-height: 0;
	z-index: 1001;
	opacity: 0;
	overflow: hidden;
	margin-top: 1rem;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	white-space: nowrap;
	border: 1px solid rgba(111, 112, 139, 0.2);
	background-color: #fff;
	box-shadow: 0 7px 50px rgba(111, 112, 139, 0.1);
	border-radius: 4px;
	padding: 0;
}

#nav .level_2::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 15%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	margin-bottom: -4px;
	background-color: #ffffff;
	border-top: 1px solid rgba(111, 112, 139, 0.2);
	border-right: 1px solid rgba(111, 112, 139, 0.2);
	transform: rotate(-45deg);
}

#nav .level_2.expanded {
	position: absolute;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	z-index: 1002;
	opacity: 1;
	max-height: 85rem;
	transition-delay: 0s;
	overflow: visible;
}

#nav .level_2 li {
	border-bottom: 1px dotted #333;
	padding: 0.7rem;
}

#nav .level_3 li {
	border: none;
	list-style-type: disc;
	list-style-position: inside;
	padding: 0.5rem;
}

#nav .level_3 {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	min-width: 100%;
}

#nav .level_3.expanded {
	opacity: 1;
	max-height: 100%;
	overflow: visible;
	top: 100%;
}

#nav li.submenu > a::after {
	font-weight: bold;
	float: right;
	content: '';
	margin-left: 10px;
	margin-top: 5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #005952;
	border-bottom: 5px solid transparent;
}

/* Sticky Nav (ab Desktop-Anzeige relevant, Regel selbst breakpointunabhängig) */
#nav.sticky {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	z-index: 99;
	width: 100%;
	background-color: #fff;
	margin-top: 0 !important;
}

nav#nav.mod_navigation.sticky ul.level_1 {
	padding-right: 2rem;
	padding-left: 2rem;
}

/* --- Mobiles Menü (mmenu) --- */


#mobilNav:not(.mm-menu) {
	display: none;
}

.kontakt.mm-listitem a.mm-btn.mm-btn--next.mm-listitem__btn,
.aktuelles.mm-listitem a.mm-btn.mm-btn--next.mm-listitem__btn,
.schulleben.mm-listitem a.mm-btn.mm-btn--next.mm-listitem__btn,
.termine.mm-listitem a.mm-btn.mm-btn--next.mm-listitem__btn,
.termine-leser.mm-listitem a.mm-btn.mm-btn--next.mm-listitem__btn {
	display: none;
}

.mm-listitem:has(> a[href="/kontakt-antwort.html"]) {
	display: none;
}

/* Fix: rote Rand-Streifen (siehe body-Regel oben, calc(100vw - 15%))
   dauerhaft über das mmenu-Panel legen, damit dort nie Menü/Content
   durchscheint – unabhängig vom offen/geschlossen-Zustand von mmenu.
   Panel-Breite ist über mmenu-eigene CSS-Variablen (--mm-size etc.)
   an den echten Viewport gekoppelt, Content/Blocker aber an den
   schmaleren, eingerückten body – daher die Lücke ohne diesen Fix. */
htmlhtml::before,
html::after {
	content: '';
	position: fixed;
	top: 0;
	width: 7.5vw;
	height: 100vh;
	background-color: #830000;
	z-index: 99999;
	pointer-events: none;
}

html::before { left: 0; }
html::after  { right: 0; }

/* Bei geöffnetem Menü sitzt links echter Menü-Inhalt im
   Randbereich – dort darf der Deckel-Streifen nicht drüberliegen */
html.mm-wrapper--opened::before {
	display: none;
}

/* --- Custom-Nav (Meta-Navigation, z. B. Cookie-Link) --- */

.mod_customnav {
	display: none;
}

.mod_customnav,
.mod_customnav ul{
	display: flex;
	justify-content: flex-end;
	gap: 1em 2em;
}

.mod_customnav ul.level_1 li,
.mod_customnav ul.level_1 li a,
.mod_customnav.block ul.level_1 li.active,
#metanav_cookie .mod_cookiebarOpener a {
	color: #333;
	text-decoration: none;
	font-size: 0.8rem;
}

.mod_customnav ul.level_1 li a {
	text-decoration: none;
}

#metanav_cookie {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	color: #888;
}

/* --- Suche --- */

#suchform > div > div.widget.widget-text.textfeld {
	width: auto;
	display: flex;
	margin-top: .9rem;
	align-items: center;
}

#suchform > div > div.widget.widget-text.textfeld > label {
	display: none;
}

#suchform input {
	width: auto;
	position: relative;
	padding: 5px;
	font-size: .8rem;
	border-bottom-color: #5B7EC0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

#navi-suche-container .formbody {
	display: flex;
}

#suchform input.submit {
	margin-top: .9rem;
	margin-left: -3rem;
	border: 0px;
	font-size: 2rem;
	color: #5B7EC0;
}

#mn_inline {
	padding: 10px;
}

#naviMiniMobile a span.fa.fa-bars {
	color: #830;
	border: 1px solid #830;
	border-radius: 0.1rem;
	padding: 0.2rem;
	font-size: 2rem;
}

/* --- Breadcrumb --- */

.mod_breadcrumb > ul:nth-child(1) {
	padding-left: 0 !important;
}

.mod_breadcrumb li {
	display: inline-block;
}

.mod_breadcrumb li:after {
	content: " >> ";
}

.mod_breadcrumb li.active:after {
	content: "";
}

.mod_breadcrumb.block ul li a {
	text-decoration: none;
	font-weight: bold;
	color: #ababab;
}

.mod_breadcrumb.block ul li.active.last {
	color: #830000;
}


/* ================================================================
   4. CONTENT-KOMPONENTEN
   ================================================================ */

/* --- Akkordeon --- */

.ce_accordion .toggler {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: .5rem;
	color: #fff;
	cursor: pointer;
	transition: all 0.4s ease;
}

.ce_accordion .toggler::before {
	font-family: 'Font Awesome 5 free';
	font-size: 0.8rem;
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
	color: #830;
	content: '\f107';
}

.ce_accordion .toggler.active::before {
	font: .8rem 'Font Awesome 5 free';
	font-weight: 900;
	content: '\f106';
}

.ce_accordion .toggler::after {
	font-family: 'Font Awesome 5 free';
	font-size: 0.8rem;
	display: inline-block;
	padding-left: 3px;
	font-weight: 900;
	color: #830;
	content: '\f073';
}

/* --- Nummerierte Listen mit Verschachtelung --- */

ol.ebene1 {
	counter-reset: listenpunkt_ebene1;
	list-style-type: none;
	padding-left: 0px !important;
}

ol.ebene1 li:before {
	content: counter(listenpunkt_ebene1) ". ";
	counter-increment: listenpunkt_ebene1;
}

ol.ebene2 {
	counter-reset: listenpunkt_ebene2;
	list-style-type: none;
	margin-top: 1rem !important;
}

ol.ebene2 li:before {
	content: counter(listenpunkt_ebene1) "." counter(listenpunkt_ebene2, decimal) ". ";
	counter-increment: listenpunkt_ebene2;
}

ul.ebene3 li:before {
	content: none !important;
}

/* --- Downloads --- */

.ce_downloads ul {
	padding-left: 0 !important;
	margin-left: 1rem;
}

/* --- Formulare --- */

.ce_form .kontaktform {
	width: 100% !important;
}

input[type="text"],
input[type="password"],
input[type="email"] {
	height: 2.75em;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea,
.kontaktform div.formbody div.widget.widget-submit button.submit {
	background-color: rgba(67, 75, 86, 0.05);
	border-radius: 4px;
	border: solid 1px rgba(67, 75, 86, 0.25);
	color: inherit;
	display: block;
	outline: 0;
	padding: 0.5rem 1rem;
}

textarea {
	padding: 0.75em 1em;
	height: 5rem;
}

input[type="radio"],
input[type="checkbox"] {
	margin: 0 5px 0 0;
}

.kontaktform div.formbody div.widget.widget-submit button.submit {
	padding: 0.4rem;
}


/* ================================================================
   5. BILDER & GALERIEN
   ================================================================ */

/* --- Allgemeine Bild-Hilfsklassen --- */

.img-max-width-25 img {
	max-width: 25%;
	margin: 0 auto;
}

.img-max-width-30vw-center {
	max-width: 30vw;
	display: block;
	margin: 0 auto;
}

.img-max-width-40vw-center {
	max-width: 40vw;
	display: block;
	margin: 0 auto;
}

.gal-max-height img {
	max-width: 50vh;
	height: auto;
	display: block;
	margin: 0 auto;
}

.vh50_auto img {
	height: 50vh;
	width: auto;
}

.gal-max-height20vh img,
.ce_gallery_creator_ce_news img {
	height: 20vh;
	width: auto;
	display: block;
	margin: 0 auto;
}

.gal-max-height25vh img {
	height: 25vh;
	width: auto;
	display: block;
	margin: 0 auto;
}

.gal-max-height30vh img {
	height: 30vh;
	width: auto;
	display: block;
	margin: 0 auto;
}

.gal-max-width25vw img {
	max-width: 25vw;
	height: auto;
	display: block;
	margin: 0 auto;
}

.gal-max-width img,
.img-max-width img {
	max-width: 50vw;
	height: auto;
	display: block;
	margin: 0 auto;
}

.gal-max-width75pc img {
	max-width: 75%;
	margin: 0 auto;
}

.ce_image.single {
	text-align: center;
}

.single img {
	max-width: 400px;
	height: auto;
}

.w-40vw img {
	width: 40vw;
	height: auto;
}

.h-25vh img {
	height: 25vh;
	width: auto;
}

.img-aufhellen,
.img-aufhellen img {
	filter: brightness(1.1);
}

/* --- Colorbox / Lightbox --- */

.cboxIframe {
	background: #000;
}

.cboxElement img {
	border: 1px solid rgba(136, 51, 0, .3);
	border-radius: 0.2rem;
	padding: 0.2rem;
	margin: 0 auto;
	display: block;
}

.white .cboxElement img {
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 0.2rem;
	padding: 0.2rem;
}

/* --- Contao-Kern-Galerie (ce_gallery, NICHT Gallery Creator) --- */

.ce_gallery ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	flex-wrap: wrap;
}

.ce_gallery .caption {
	text-align: center;
}

/* Bildunterschrift nicht auf Startseite */
.startseite .mod_newslist.vorschau .caption {
	display: none;
}

/* --- Gallery Creator (markocupic) – neue gc-*-Klassen Contao 5 --- */

.gc-album-list-view {
	width: 100%;
}

.gc-album-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 1rem;
	padding-left: 0 !important;
	margin-left: 0;
}

.gc-album-list-item {
	width: 100%;
	background-color: #fff;
	box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
	border: none;
}

.gc-album-list-inner {
	display: flex;
	flex-direction: column;
}

.gc-album-list-figure {
	margin: 0;
}

.gc-album-list-figure img {
	width: 100%;
	display: block;
}

.gc-album-list-facts {
	padding: 0.5rem;
}

.gc-album-list-name {
	margin: 0 0 0.3rem 0;
	font-size: 1rem;
	font-weight: 600;
}

.gc-album-list-date,
.gc-album-list-picture-count,
.gc-album-list-visitors {
	font-size: 0.8rem;
	line-height: 1rem;
	color: #333;
	margin-bottom: 0;
}

.gc-album-list a {
	text-decoration: none !important;
}

/* TODO prüfen: Klassenname für Album-Kommentar in Contao 5 noch
   nicht bestätigt (im Beispiel-HTML nicht enthalten) */
.gallery_creator .album_comment {
	display: none;
}

.gc-album-detail-view {
	width: 100%;
}

.gc-album-detail-back-link {
	margin-bottom: 1rem;
}

.gc-album-detail-back-link a {
	text-decoration: none;
}

.gc-album-detail-name {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	color: #032236;
	font-size: 1.2rem;
}

.gc-album-detail-date {
	font-size: 0.9rem;
	color: #333;
	margin-bottom: 1rem;
}

.gc-album-detail-picture-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0 !important;
	margin: 0;
}

.gc-album-detail-picture-list-item {
	margin: 0;
}

.gc-album-detail-picture-list-item figure {
	margin: 0;
}

.gc-album-detail-picture-list-item img {
	display: block;
	border: 1px solid rgba(136, 51, 0, 0.3);
	border-radius: 0.2rem;
	padding: 0.2rem;
	transition: transform 0.3s ease;
}

.gc-album-detail-picture-list-item a:hover img {
	transform: scale(1.05);
}

/* Gallery Creator – Einbindung in Newsartikeln (altes Markup,
   noch nicht mit neuem Contao-5-HTML bestätigt) */
.ce_gallery_creator_ce_news h2,
.mod_newsreader .ce_gallery_creator_ce_news.gallery_creator h3 {
	display: none;
}

.ce_gallery_creator_ce_news.gallery_creator ul.album_preview {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	flex-wrap: wrap;
}

ul.album_preview {
	padding-left: 0px !important;
}

/* --- Video --- */

.video-thumb {
	width: 50%;
}

.video-thumbs {
	height: 100px;
}

.video_container video {
	height: 120px;
}

.film-info::before {
	font-family: "Font Awesome 5 Free";
	content: "\f008";
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
}

p.film-info {
	font-size: 0.8rem;
}

.audio::before {
	font-family: "Font Awesome 5 Free";
	content: "\f1c7";
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
	font-size: 1rem;
}

p.audio {
	color: #000;
}

.header-filme {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 10%;
	flex-wrap: wrap;
	border-top: 1px solid #ddd;
	padding-top: 0.5rem;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.5rem;
	color: #032236;
}

.header-filme p {
	line-height: 1rem;
}

.header-filme img {
	width: 100px;
}

/* Video-Popup Startseite */
#video-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

#video-popup video {
	width: 80%;
	max-height: 80%;
}


/* ================================================================
   6. KALENDER & NEWS
   ================================================================ */

.mod_newslist h3,
.minical h3 {
	font-size: 1rem;
	line-height: 1.3rem;
	margin-bottom: 0.5rem;
}

.mod_newsarchive h2 {
	margin-bottom: 1rem;
}

.mod_newsarchive h2 a {
	text-decoration: none;
	color: #333;
	font-size: 1.5rem;
}

.mod_newslist.vorschau p {
	font-size: 0.9rem;
	line-height: 1.5rem;
}

.mod_newslist h3 a {
	color: #333;
	line-height: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.05rem;
}

.mod_newslist p.more a {
	color: #333;
	border: 1px solid;
	border-radius: 2em;
	cursor: pointer;
	display: inline-block;
	font-size: 0.875em;
	font-weight: bold;
	height: 1.2em;
	line-height: 1.2em;
	padding: 0 1.8em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.mod_newslist p.more a:hover {
	color: #830000;
	transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.aktuelles .layout_latest {
	margin-bottom: 1rem;
}

/* --- Kalender allgemein --- */

.minicalendar thead tr th.head.current,
.minicalendar thead tr th.head.previous a,
.minicalendar thead tr th.head.next a,
.calendar thead tr th.head.current,
.calendar thead tr th.head.previous a,
.calendar thead tr th.head.next a {
	vertical-align: middle;
	color: #830000;
	font-size: 1rem;
}

.mod_calendar a {
	line-height: 0.8rem;
}
table.calendar {
  table-layout: fixed;
  width: 100%;
}
.mod_calendar thead tr th.head.previous { width: 28.57%; }
.mod_calendar thead tr th.head.current  { width: 42.86%; }
.mod_calendar thead tr th.head.next     { width: 28.57%; }

.mod_calendar.cal_desktop .days,
.mod_calendar .label {
	width: 15%;
	padding: 0.5rem;
}

.mod_calendar tbody .weekend {
	background-color: #F2F2F2;
}

.calendar .weekend {
	width: 10% !important;
}

/* Terminwiederholung am Wochenende ausblenden / einblenden */
.weekend.upcomming .weekend-hidden.upcoming a {
	visibility: hidden;
}

.weekend-visible a {
	visibility: visible;
}

.calendar .ferien a {
	color: #3f7ff6 !important;
}

.calendar .ferien.upcoming a span {
	color: rgb(12, 46, 110);
}

.mod_calendar thead th {
	padding: 5px;
	text-align: center;
}

.mod_calendar thead tr th.head.previous a,
.mod_calendar thead tr th.head.current,
.mod_calendar thead tr th.head.next a {
	color: #fff;
}

.cal_desktop {
	display: none;
}

.cal_desktop table.calendar tbody tr td.active.today{
	background-color: yellow;
	padding-left: 0.3rem;
	padding-right:0.3rem;
	/*padding-top: 0.2rem;*/
	/*padding-bottom: 0.2rem;*/
	border: 2px solid #830;
	/*width: 10%;*/
	font-weight: 600;
}
.cal_desktop table.calendar tbody tr td.active{
	padding-left:0.3rem;
	padding-right:0.3rem;
}

.cal_desktop .upcoming a {
	line-height: 1.3rem;
	color: #333;
	text-decoration: none;
}

.cal_desktop .event a {
	display: block;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.cal_desktop .upcoming a:before,
.cal_desktop .bygone a:before,
.cal_desktop .today a:before,
.cal_desktop .current a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
}

/* Link-Farben im Kalender */
.red.upcoming a {
	color: #830000;
}

.green.upcoming a {
	color: #087608;
}

.blue.upcoming a {
	color: #003eaa;
}

/* --- Mini-Kalender --- */

.minical {
	margin-bottom: 2rem;
}

.minical td {
	padding: 0.5rem;
}

.minical current {
	text-align: center;
}

.minicalendar thead tr th.head a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

/* --- Mobile Kalenderliste --- */

.mod_eventlist.cal-list-mobil .event.layout_upcoming {
	display: flex;
	flex-direction: column;
	padding-top: 1rem;
	padding-bottom: 1rem;
	gap: 0.5rem;
}

.mod_eventlist.cal-list .upcoming,
.mod_eventlist.cal-list .current {
	display: flex;
	flex-direction: column;
	line-height: 1.5rem;
	margin-bottom: 1rem;
}

.mod_newslist.vorschau time {
	line-height: 1.5rem;
}


/* ================================================================
   7. UTILITY-KLASSEN
   ================================================================ */

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

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex05 { flex: 0.5; }
.flex1  { flex: 1; }
.flex2  { flex: 2; }
.flex3  { flex: 3; }

.no-wrap {
	white-space: nowrap;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.unsichtbar {
	display: none;
}

.div-center {
	display: table;
	margin: 0 auto;
}

.row-gap1 {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

.row-gap5 {
	display: flex;
	flex-direction: column !important;
	gap: 1rem !important;
	margin-bottom: 1rem !important;
}

.row-gap5 p {
	line-height: 1rem;
}

.border-dotted-top {
	border-top: 1px dotted #888;
	padding-top: 1.5rem;
}

.border-dotted-bt {
	border-bottom: 1px dotted #888;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
}

.bd-left1 {
	border-left: 1px solid #ddd;
	padding-left: 0.5rem;
}

.kasten {
	border: 1px solid #333;
	padding: 1rem 1rem 0.5rem 1rem;
	margin-bottom: 2rem;
}

.mt1 { margin-top: 1rem; }
.mb1 { margin-bottom: 1rem; }
.mb0 { margin-bottom: 0px; }

.dl::before {
	font-family: "Font Awesome 5 Free";
	content: "\f358";
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
}

.arrow-right::before {
	font-family: "Font Awesome 5 Free";
	content: "\f35a";
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
}

li.arrow-right {
	list-style-type: none !important;
}

li.arrow-right::before {
	font-family: "Font Awesome 5 Free";
	content: "\f061";
	display: inline-block;
	padding-right: 3px;
	font-weight: 900;
}

/* --- Zweispalten-Liste (Grid-Layout) --- */

.zweispalten-liste {
	max-width: 500px;
	margin: 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.zweispalten-liste__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.4rem 0;
	border-bottom: 2px solid #333;
}

.zweispalten-liste__items {
	list-style: none;
	margin: 0;
	padding-left: 0 !important;
}

.zweispalten-liste__items li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid #eee;
	font-size: 0.9rem;
}

.zweispalten-liste__spalte2 {
	font-weight: 600;
}


/* ================================================================
   8. SONDERELEMENTE
   ================================================================ */

.sondermeldung {
	background-color: #830000;
	color: #fff;
	margin-bottom: 1rem;
	padding-top: 1rem;
	font-size: 80%;
}

.sondermeldung.block ul li.download-element.ext-pdf a {
	font-size: 80%;
	color: #fff;
}

/* Überschrift Weihnachtsbrief Startseite */
.weihnacht {
	font-size: 1.5em;
	color: #007d48;
	border-style: inset;
	padding-top: 1em;
	margin-bottom: 2em;
	border-color: #b63400 #b63400 #007d48 #007d48;
}

.weihnacht a {
	margin-left: 1em;
	margin-right: 1em;
	color: #007d48;
	text-decoration: none;
}

.weihnacht .fa-gift { color: #b63400; }
.weihnacht .fa-snowflake { color: #084675; }
.weihnacht .fa-snowman { color: #E0860D; }

/* Kooperations-Bilder / Urkunden */

.koop-img img {
	height: 150px;
	width: auto;
	border: 1px solid #ddd;
	border-radius: 0.2rem;
	padding: 0.5rem;
}

.koop-urk img {
	height: 250px;
	width: auto;
	border: 1px solid #ddd;
	border-radius: 0.2rem;
	padding: 0.5rem;
}

.ce_gallery.koop-urk ul {
	justify-content: flex-start;
}

/* Bedarfsfeld */

.bedarfsfeld {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
	background-color: #830000;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.5rem;
}

/* Bedarfsfeld automatisch ausblenden, wenn gerade keine
   veröffentlichte Meldung drin steht (Contao gibt dann nur
   ein leeres div.inside innerhalb von #bedarf aus) */
#bedarf:has(.inside:empty) {
	display: none;
}

.bedarfsfeld h2 {
	color: #fff;
}

.schulzeit-right h2 {
	padding-left: 0.5rem;
}

.schulzeit-left h2 {
	border-right: 1px solid #ddd;
}

.koll-list p {
	margin: 0.5rem 0;
}


/* ================================================================
   9. BREAKPOINT ≥ 768px (Tablet)
   ================================================================ */

@media only screen and (min-width: 768px) {

	/* #header-desktop, #nav.mod_navigation und .mod_customnav bleiben
	   hier bewusst unangetastet: sie sind bereits in der Basis (Mobile)
	   ausgeblendet und werden erst in der ≥1200px-Stufe wieder
	   eingeblendet. Ein erneutes "!important" hier würde diese
	   spätere Einblendung blockieren. */

	.cal-list-mobil {
		display: none;
	}

	#header h1,
	#header h1 a {
		font-size: 2rem;
	}

	#naviMiniMobile a span.fa.fa-bars {
		font-size: 1.5rem;
	}

	p {
		font-size: 1rem;
	}

	.gc-album-list {
		flex-direction: row;
	}

	.gc-album-list-item {
		width: calc(50% - 0.5rem);
	}

	.zweispalten-liste__header,
	.zweispalten-liste__items li {
		font-size: 1rem;
		gap: 1rem;
	}
}


/* ------------------------------------------------------------
   Header-Höhe Folgeseiten – NUR im Tablet-Bereich (768–1199px).
   Bewusst mit max-width begrenzt: ab 1200px soll wieder der
   Inline-Wert aus dem Theme (25rem) greifen, ohne dass hier eine
   Regel dazwischenfunkt.
   ------------------------------------------------------------ */
@media only screen and (min-width: 700px) and (max-width: 1199px) {

	.folgeseite #header {
		height: 34rem;
	}
}


/* ================================================================
   10. BREAKPOINT ≥ 1200px (Desktop)
   ================================================================ */

@media only screen and (min-width: 1200px) {

	.folgeseite #header {
		height: 25rem;
	}

	nav#mobilNav.mod_mmenu,
	#header-mobil,
	#header-mobil-img,
	#naviMiniMobile,
	.cal-list-mobil {
		display: none !important;
	}

	#nav.mod_navigation,
	.mod_customnav {
		display: block;
	}

	.mod_customnav {
		display: flex;
	}

	.cal_desktop {
		display: block;
	}

	.startseite #main .inside {
		display: flex;
		flex-direction: row;
	}

	#header-desktop {
		display: flex;
		margin-top: 2rem;
		text-align: center;
	}

	#header h1,
	#header h1 a {
		font-size: 3rem;
	}

	#header h2 {
		font-size: 1.5rem;
	}

	#header .ce_gallery ul {
		display: flex;
		justify-content: center;
		gap: 2rem 4rem;
	}

	.header-filme p {
		font-weight: 600;
	}

	.startseite #main-left {
		order: 1 !important;
	}

	.startseite #main-center {
		order: 2;
	}

	.startseite #main-right {
		order: 3;
	}

	.startseite #main-left,
	.startseite #main-right,
	.folgeseite #main #left-custom,
	.aktuelles-archiv #main #left-custom {
		flex: 0.8;
		hyphens: auto;
		word-wrap: break-word;
	}

	#main-center {
		flex: 2.2;
		margin-left: 1rem;
		margin-right: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: center;
	}

	#main-center.mod_article .content-text {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.folgeseite #container,
	.aktuelles-archiv #container {
		margin-top: 1rem;
	}

	.folgeseite #main,
	.aktuelles-archiv #main {
		display: flex;
		flex-direction: row-reverse;
		gap: 0rem 2rem;
	}

	.folgeseite #main div.inside,
	.aktuelles-archiv #main .inside {
		flex: 3.2;
	}

	.koll-list {
		display: flex;
		align-items: center;
		border-bottom: 1px dotted #830;
		padding-bottom: 0.5rem;
	}

	.gc-album-list-item {
		width: calc(25% - 0.75rem);
	}
	
	#footer .column {
	flex: 1 ;
	}

  #footer .column:nth-child(3) {
	flex: 1 ;
   }
}