@charset "UTF-8";

/* =====================================================================
   Klickdummy — Evangelische Fachschule für Soziale Berufe Wolmirstedt
   mummert.media

   Aufbau dieser Datei entspricht der Partial-Reihenfolge des Playbooks
   „Basis-Setup Contao 5.7“ und ist 1:1 nach scss/ übertragbar:

     _tokens · _fonts · _base · _typo · _grid · _boxes
     _menu · _layout · _forms · _animations · _print
   ===================================================================== */


/* ##################################################### */
/* ############## _tokens — Farben ##################### */
/* ##################################################### */
/* Aus dem Logo werden bewusst nur zwei Farben geführt: das dunklere Blau
   und das dunklere Lila. Magenta und Himmelblau der Bildmarke bleiben dem
   Logo vorbehalten. Kontraste auf Weiß: color1 6,6:1 · color2 6,4:1. */

body {
	--color1: #005EA8; /* Blau — Primärfarbe: Überschriften, Navigation, Links */
	--color2: #923E89; /* Lila — Sekundärfarbe: Buttons, CTA, Akzente */
	--color3: #004A85; /* Blau dunkel — Hover auf Blau */
	--color4: #75306E; /* Lila dunkel — Hover auf Lila */
	--color5: #003A6B; /* Blau tief — Footer, dunkle Flächen */

	--color10: #FFFFFF; /* Weiß */
	--color11: #EFF3F7; /* Heller Flächenton */
	--color12: #1D1D1B; /* Fließtext — Schwarzton aus dem Logo */
	--color13: #C9D2DC; /* Rahmen, Trennlinien */
	--color14: #57616C; /* Sekundärtext, Labels */

	--base-font-color: var(--color12);
	--base-heading-color: var(--color1);

	--link-color: var(--color1);
	--link-hover-color: var(--color2);

	--button-background: var(--color2);
	--button-color: var(--color10);
	--button-hover-background: var(--color4);
	--button-hover-color: var(--color10);

	--input-background: var(--color10);
	--input-color: var(--base-font-color);
	--input-border: var(--color13);
	--input-focus-border: var(--color1);
	--label-color: var(--color14);

	--focus-border: var(--color2);
	--focus-border-offset: 2px;

	--shadow-box: 0 18px 44px rgba(0,58,107,.16);
	--shadow-card: 0 2px 10px rgba(0,58,107,.07);
	--shadow-card-hover: 0 14px 30px rgba(0,58,107,.15);
	--shadow-header: 0 1px 0 var(--color13);
	--shadow-header-sticky: 0 6px 22px rgba(0,58,107,.13);
}


/* ##################################################### */
/* ############## _tokens — Schrift ##################### */
/* ##################################################### */
/* h1 endet bei 42px, alle weiteren Größen sind davon abgeleitet. */

body {
	--font-base: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-heading: var(--font-base);

	--fs-base: 1.0625rem;
	--fs-lead: clamp(1.08rem, 1.02rem + .28vw, 1.2rem);
	--fs-small: .9375rem;
	--fs-mini: .8125rem;

	--fs-h1: clamp(1.85rem, 1.42rem + 1.5vw, 2.625rem); /* 29,6 – 42 px */
	--fs-h2: clamp(1.45rem, 1.24rem + .75vw, 1.875rem); /* 23,2 – 30 px */
	--fs-h3: clamp(1.1rem, 1.03rem + .26vw, 1.25rem);   /* 17,6 – 20 px */
	--fs-h4: 1rem;

	--lh-text: 1.7;
	--lh-heading: 1.2;
}


/* ##################################################### */
/* ############## _tokens — Maße & Abstände ############# */
/* ##################################################### */

body {
	--gap-tiny: 10px;
	--gap-small: 20px;
	--gap-medium: 35px;
	--gap-gutter: 30px;
	--gap-big: 50px;
	--gap-bigger: 60px;
	--gap-huge: 100px;

	--width-max: 1440px;
	--width-sidebar: 340px;
	--width-narrow: 820px;
	--width-text: 68ch;

	--header-height: 84px;
	--header-height-small: 66px;
}
@media (min-width: 917px) { body { --header-height: 108px; } }


/* ##################################################### */
/* ############## _tokens — Transitions ################ */
/* ##################################################### */

body {
	--trans-color: color .2s ease-in-out, background-color .2s ease-in-out;
	--trans-all: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
	--trans-transform: transform .25s ease-in-out;
	--trans-header: height .25s ease-in-out, box-shadow .25s ease-in-out;
	--trans-fade: opacity .8s ease-in-out;
	--trans-reveal: opacity .6s ease-out, transform .6s ease-out;
	--trans-card: box-shadow .25s ease-in-out, transform .25s ease-in-out;

	--slide-duration: 7s; /* muss zum Intervall in main.js passen */
}


/* ##################################################### */
/* ############## _fonts ############################### */
/* ##################################################### */
/* Open Sans Variable, selbst gehostet — eine Familie für alles.
   Frutiger Next Pro kommt ausschließlich im Logo-SVG vor. */

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Variable.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Italic-Variable.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-stretch: 75% 125%;
	font-style: italic;
	font-display: swap;
}


/* ##################################################### */
/* ############## _base ################################ */
/* ##################################################### */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height-small) + 20px); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; font-family: var(--font-base); font-size: var(--fs-base); line-height: var(--lh-text); color: var(--base-font-color); background: var(--color10); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6, li, dd, dt { overflow-wrap: break-word; }
ul, ol { padding: 0; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus-border); outline-offset: var(--focus-border-offset); }
::selection { background: var(--color2); color: var(--color10); }
hr { height: 1px; border: 0; background: var(--color13); }


/* ##################################################### */
/* ############## _typo ################################ */
/* ##################################################### */

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--base-heading-color); line-height: var(--lh-heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; }

/* Dezente Marke über Abschnittsüberschriften — kurzes Rechteck in der
   Sekundärfarbe. Entfällt, wenn direkt darüber schon eine .subline steht. */
.content h2::before, .narrow h2::before, .band-head h2::before { content: ''; display: block; width: 44px; height: 3px; margin-bottom: 18px; background: var(--color2); }
.subline + h2::before { display: none; }
.band-head-center h2::before, .center h2::before { margin-inline: auto; }
h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--color2); }
h4 { font-size: var(--fs-h4); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color14); }

p { max-width: var(--width-text); }
p + p { margin-top: 1.05em; }
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--color12); }
.subline { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color2); }
.subline::before { content: ''; flex: 0 0 auto; width: 26px; height: 3px; background: currentColor; }
.subline-center { justify-content: center; }

a { color: var(--link-color); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: var(--trans-color); }
a:hover { color: var(--link-hover-color); }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }
.icon-inline { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; }

.list-check { list-style: none; margin: 0; }
.list-check li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color13); }
.list-check li:last-child { border-bottom: 0; }
.list-check .icon { margin-top: .3em; font-size: 18px; color: var(--color2); }

.list-plain { list-style: none; margin: 0; }
.list-plain li { position: relative; padding: 4px 0 4px 22px; }
.list-plain li::before { content: ''; position: absolute; top: 15px; left: 0; width: 9px; height: 9px; background: var(--color2); }

/* Textlink mit Pfeil — der Pfeil rückt beim Hover nach rechts */
.link-arrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; }
.link-arrow .icon { font-size: 17px; transition: var(--trans-transform); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(4px); }


/* ##################################################### */
/* ############## _grid & Hilfsklassen ################# */
/* ##################################################### */

.max { width: 100%; max-width: var(--width-max); margin-inline: auto; }
.sidepadding { padding-left: var(--gap-small); padding-right: var(--gap-small); }
@media (min-width: 640px) { .sidepadding { padding-left: var(--gap-medium); padding-right: var(--gap-medium); } }
@media (min-width: 917px) { .sidepadding { padding-left: var(--gap-big); padding-right: var(--gap-big); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }


/* ##################################################### */
/* ############## _boxes — Icons ####################### */
/* ##################################################### */
/* Konventionelle Piktogramme: Pfeil für Links, Kasten mit Pfeil für externe
   Ziele, Plus/Minus für Akkordeons, Lupe für die Suche, Pfeil nach unten für
   Downloads. Die Bildmarke des Logos wird nicht als Icon zweckentfremdet —
   sie erscheint nur im Logo selbst und als Wasserzeichen. */

.icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; }


/* ##################################################### */
/* ############## _boxes — Wasserzeichen ############### */
/* ##################################################### */
/* Bildmarke des Logos, einfarbig, stark zurückgenommen und immer leicht
   gedreht, damit sie als Flächenmotiv und nicht als zweites Logo liest. */

.watermark { position: absolute; z-index: 0; width: 210px; height: 210px; transform: rotate(-9deg); pointer-events: none; }
@media (min-width: 640px) { .watermark { width: 300px; height: 300px; } }
@media (min-width: 917px) { .watermark { width: 420px; height: 420px; } }
.watermark-light { color: rgba(0,94,168,.06); }
.watermark-dark { color: rgba(255,255,255,.075); }


/* ##################################################### */
/* ############## _boxes — Buttons & CTA ############### */
/* ##################################################### */

.btn { display: inline-flex; align-items: center; gap: 13px; padding: 15px 24px; background: var(--button-background); color: var(--button-color); font-weight: 600; line-height: 1.3; text-decoration: none; border: 0; cursor: pointer; transition: var(--trans-color); }
.btn:hover { background: var(--button-hover-background); color: var(--button-hover-color); }
.btn .icon { font-size: 18px; transition: var(--trans-transform); }
.btn:hover .icon { transform: translateX(4px); }
.btn-invert { background: var(--color10); color: var(--color2); }
.btn-invert:hover { background: var(--color11); color: var(--color4); }
.btn-outline { background: transparent; color: var(--color1); box-shadow: inset 0 0 0 2px var(--color1); }
.btn-outline:hover { background: var(--color3); color: var(--color10); box-shadow: inset 0 0 0 2px var(--color3); }
.btn-ghost { background: rgba(255,255,255,.14); color: var(--color10); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.btn-ghost:hover { background: var(--color10); color: var(--color1); box-shadow: inset 0 0 0 2px var(--color10); }

/* Durchgehender Farbbalken mit abgesetzter Icon-Kachel — Signatur von es-moritzburg.de */
.cta { display: flex; align-items: stretch; text-decoration: none; background: var(--button-background); color: var(--button-color); transition: var(--trans-color); }
.cta:hover { background: var(--button-hover-background); color: var(--button-hover-color); }
.cta-text { flex: 1 1 auto; align-self: center; padding: 18px var(--gap-small); font-weight: 600; }
.cta-icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 60px; background: rgba(0,0,0,.17); font-size: 22px; }
.cta-icon .icon { transition: var(--trans-transform); }
.cta:hover .cta-icon .icon { transform: translateX(4px); }


/* ##################################################### */
/* ############## _boxes — Teaser ###################### */
/* ##################################################### */

.teasers { display: grid; grid-template-columns: 1fr; gap: var(--gap-medium); }
@media (min-width: 640px) { .teasers { grid-template-columns: repeat(2, 1fr); gap: var(--gap-gutter); } }
@media (min-width: 917px) { .teasers { grid-template-columns: repeat(3, 1fr); } }
.teasers-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .teasers-2 { grid-template-columns: repeat(2, 1fr); } }

.teaser { display: flex; flex-direction: column; background: var(--color10); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: var(--trans-card); }
.teaser:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); color: inherit; }
.teaser img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.teaser-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--gap-tiny); padding: var(--gap-small); }
@media (min-width: 917px) { .teaser-body { padding: var(--gap-medium) var(--gap-small); } }
.teaser-body h3 { color: var(--color1); }
.teaser:hover .teaser-body h3 { color: var(--color2); }
.teaser-body p { max-width: none; font-size: var(--fs-small); line-height: 1.6; color: var(--color14); }
.teaser-go { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: var(--gap-tiny); font-size: var(--fs-small); font-weight: 600; color: var(--color2); }
.teaser-go .icon { font-size: 17px; transition: var(--trans-transform); }
.teaser:hover .teaser-go .icon { transform: translateX(4px); }
.teaser-date { display: flex; align-items: center; gap: 11px; font-size: var(--fs-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color14); }
.teaser-date::before { content: ''; flex: 0 0 auto; width: 22px; height: 3px; background: var(--color2); }
.teaser-flat { background: var(--color11); box-shadow: none; }
.teaser-flat:hover { box-shadow: var(--shadow-card); }


/* ##################################################### */
/* ############## _boxes — Download ##################### */
/* ##################################################### */

.download { display: flex; align-items: center; text-align: left; gap: var(--gap-small); max-width: 520px; padding: 16px var(--gap-small); background: var(--color11); color: inherit; text-decoration: none; border-left: 4px solid var(--color2); transition: var(--trans-color); }
.download:hover { background: var(--color1); color: var(--color10); }
.download .icon { font-size: 26px; color: var(--color2); transition: color .2s ease-in-out, transform .25s ease-in-out; }
.download:hover .icon { color: var(--color10); transform: translateY(3px); }
.download strong { display: block; font-weight: 600; line-height: 1.35; }
.download span { display: block; font-size: var(--fs-mini); color: var(--color14); }
.download:hover span { color: rgba(255,255,255,.85); }
.download-center { margin-inline: auto; }


/* ##################################################### */
/* ############## _boxes — Karten ###################### */
/* ##################################################### */

.card { padding: var(--gap-small); background: var(--color11); }
.card > * + * { margin-top: var(--gap-tiny); }
.card h2 { font-size: 1.2rem; }
.card h3 { font-size: 1.05rem; color: var(--color1); }
.card p, .card dl, .card ul { font-size: var(--fs-small); }
.card p { max-width: none; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; line-height: 1.55; }
.card dt { color: var(--color14); }
.card dd { margin: 0; font-weight: 600; }
.card-accent { background: var(--color5); color: var(--color10); }
.card-accent h2, .card-accent h3 { color: var(--color10); }
.card-accent a { color: var(--color10); }
.card-accent a:hover { color: rgba(255,255,255,.75); }
.card-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--color13); }

/* Ansprechpartner in der rechten Spalte */
.person { text-align: left; }
.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%; margin-bottom: var(--gap-small); }
.person-name { font-size: 1.1rem; font-weight: 700; color: var(--color1); }
.person-role { font-size: var(--fs-small); color: var(--color14); margin-bottom: var(--gap-tiny); }
.person-contact { font-size: var(--fs-small); line-height: 1.9; }


/* ##################################################### */
/* ############## _boxes — Akkordeon ################### */
/* ##################################################### */

.accordion { border-top: 1px solid var(--color13); }
.acc { border-bottom: 1px solid var(--color13); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-small); padding: 17px 2px; font-size: 1.05rem; font-weight: 600; color: var(--color1); cursor: pointer; list-style: none; transition: var(--trans-color); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--color2); }
.acc-pm { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.acc-pm .pm-v { transform-origin: 12px 12px; transition: transform .25s ease-in-out, opacity .25s ease-in-out; }
.acc[open] .pm-v { transform: scaleY(0); opacity: 0; }
.acc-body { padding: 0 2px 20px; }
.acc-body p { font-size: var(--fs-small); color: var(--color14); }
.acc[open] .acc-body { animation: accOpen .3s ease-out; }


/* ##################################################### */
/* ############## _boxes — Tabelle ##################### */
/* ##################################################### */

.tablewrap { overflow-x: auto; }
.datatable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.datatable th, .datatable td { padding: 13px var(--gap-tiny) 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color13); }
.datatable thead th { color: var(--color1); border-bottom: 3px solid var(--color2); white-space: nowrap; }
.datatable tbody th { font-weight: 600; color: var(--color12); }


/* ##################################################### */
/* ############## _boxes — Kartenplatzhalter ########### */
/* ##################################################### */
/* Im Livebetrieb MapLibre mit Protomaps über maps.mummert.media — kein
   Google Maps, keine Cookies, keine Einwilligung nötig. */

.mapbox { position: relative; aspect-ratio: 16 / 10; background: var(--color11); }
@media (min-width: 640px) { .mapbox { aspect-ratio: 16 / 9; } }
.mapbox canvas { outline: none; }
.map-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: var(--gap-small); border: 1px dashed var(--color13); text-align: center; }
.map-fallback p { max-width: 36ch; font-size: var(--fs-small); color: var(--color14); }
.map-fallback .icon { font-size: 30px; color: var(--color2); }
.mapbox.is-ready .map-fallback { display: none; }
.map-note { margin-top: var(--gap-tiny); font-size: var(--fs-mini); color: var(--color14); }
.map-note a { color: var(--color14); }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-popup-content { padding: 12px 14px; font-family: var(--font-base); font-size: var(--fs-small); line-height: 1.5; border-radius: 0; box-shadow: var(--shadow-card-hover); }
.maplibregl-popup-content strong { display: block; color: var(--color1); }


/* ##################################################### */
/* ############## _menu — Header ####################### */
/* ##################################################### */

.skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 14px 22px; background: var(--color1); color: var(--color10); font-weight: 600; }
.skiplink:focus { left: 12px; top: 12px; }

.header { position: sticky; top: 0; z-index: 50; background: var(--color10); box-shadow: var(--shadow-header); transition: var(--trans-header); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-small); height: var(--header-height); transition: var(--trans-header); }
@media (min-width: 1060px) { .header-inner { gap: var(--gap-gutter); } }

/* Beim Scrollen schrumpft der Header — Signatur von es-moritzburg.de */
body.is-scrolled .header { box-shadow: var(--shadow-header-sticky); }
body.is-scrolled .header-inner { height: var(--header-height-small); }

.logo { display: block; width: 190px; flex: 0 0 auto; transition: var(--trans-transform); transform-origin: left center; }
@media (min-width: 917px) { .logo { width: 210px; } }
@media (min-width: 1200px) { .logo { width: 226px; } }
body.is-scrolled .logo { transform: scale(.62); }


/* ##################################################### */
/* ############## _menu — Hauptnavigation ############## */
/* ##################################################### */

.header-tools { display: flex; align-items: center; gap: 4px; }
@media (min-width: 1060px) { .header-tools { gap: var(--gap-tiny); } }

.nav-main { display: none; }
@media (min-width: 1060px) { .nav-main { display: block; } }
.nav-main ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; }
.nav-main a { position: relative; display: block; padding: 12px 13px; font-size: .97rem; font-weight: 600; color: var(--color1); text-decoration: none; transition: var(--trans-color); }
@media (min-width: 1200px) { .nav-main a { padding: 12px 15px; font-size: 1rem; } }
.nav-main a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .22s ease-in-out; }
@media (min-width: 1200px) { .nav-main a::after { left: 15px; right: 15px; } }
.nav-main a:hover { color: var(--color2); }
.nav-main a:hover::after { transform: scaleX(1); }
.nav-main .active > a, .nav-main .trail > a { color: var(--color2); }
.nav-main .active > a::after, .nav-main .trail > a::after { transform: scaleX(1); }

.iconbutton { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: transparent; color: var(--color1); border: 0; font-size: 23px; cursor: pointer; transition: var(--trans-color); }
.iconbutton:hover { background: var(--color11); color: var(--color2); }
.iconbutton .icon-off { display: none; }
.iconbutton[aria-expanded="true"] { background: var(--color11); color: var(--color2); }
.iconbutton[aria-expanded="true"] .icon-on { display: none; }
.iconbutton[aria-expanded="true"] .icon-off { display: block; }

.burger { display: flex; }
@media (min-width: 1060px) { .burger { display: none; } }


/* ##################################################### */
/* ############## _menu — Mobilnavigation ############## */
/* ##################################################### */
/* Am Header verankert, nicht am Viewport — sonst verdeckt das Menü die Kopfzeile. */

.nav-mobile { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; display: flex; flex-direction: column; gap: var(--gap-small); padding: var(--gap-tiny) var(--gap-small) var(--gap-medium); background: var(--color10); border-top: 1px solid var(--color13); box-shadow: var(--shadow-header-sticky); animation: panelDown .25s ease-out; }
@media (min-width: 640px) { .nav-mobile { padding-left: var(--gap-medium); padding-right: var(--gap-medium); } }
@media (min-width: 1060px) { .nav-mobile { display: none; } }
.nav-mobile[hidden] { display: none; }
.nav-mobile ul { list-style: none; margin: 0; }
.nav-mobile li + li { border-top: 1px solid var(--color13); }
.nav-mobile a { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-small); padding: 14px 2px; font-size: 1.1rem; font-weight: 600; color: var(--color1); text-decoration: none; transition: var(--trans-color); }
.nav-mobile a:hover { color: var(--color2); }
.nav-mobile .active > a, .nav-mobile .trail > a { color: var(--color2); }
.nav-mobile .icon { font-size: 16px; color: var(--color13); transition: color .2s ease-in-out, transform .25s ease-in-out; }
.nav-mobile a:hover .icon { color: var(--color2); transform: translateX(4px); }
.nav-mobile-meta { padding-top: var(--gap-small); border-top: 1px solid var(--color13); font-size: var(--fs-small); line-height: 1.75; color: var(--color14); }


/* ##################################################### */
/* ############## _layout — Hero ####################### */
/* ##################################################### */
/* Achtung: aspect-ratio zusammen mit max-height verkleinert die BREITE.
   Auf großen Schirmen wird die Höhe deshalb über height gedeckelt. */

.hero { position: relative; background: var(--color10); }
.hero-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color5); }
@media (min-width: 640px) { .hero-media { aspect-ratio: 16 / 10; } }
@media (min-width: 917px) { .hero-media { aspect-ratio: auto; height: min(38.1vw, 620px); } }
.hero-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: var(--trans-fade); }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); }
.hero-slide.is-active img { animation: heroZoom var(--slide-duration) ease-out both; }
/* Der Verlauf gehört in den Slide, nicht auf die Bühne — sonst liegt er über der Bildunterschrift. */
.hero-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(170deg, rgba(0,58,107,.30) 0%, rgba(0,58,107,0) 45%, rgba(0,58,107,.40) 100%); pointer-events: none; }

.hero-box { position: relative; z-index: 3; }
/* Die Textkästen liegen im selben Rasterfeld übereinander: gleiche Höhe für
   alle Slides, kein Springen beim Wechsel — und kein JavaScript im Markup. */
.hero-copies { display: grid; max-width: 660px; margin-top: -48px; }
@media (min-width: 917px) { .hero-copies { margin-top: -132px; } }
.hero-copy { grid-area: 1 / 1; padding: var(--gap-medium); background: var(--color10); box-shadow: var(--shadow-box); animation: heroBox .7s .1s ease-out both; }
@media (min-width: 917px) { .hero-copy { padding: var(--gap-big) var(--gap-bigger) var(--gap-big) var(--gap-big); } }
.hero-copies .hero-copy { opacity: 0; visibility: hidden; transition: var(--trans-fade), visibility .8s; }
.hero-copies .hero-copy.is-active { opacity: 1; visibility: visible; }
.hero-copy h1, .hero-copy h2 { margin-bottom: 16px; }
.hero-copy h2 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.015em; }
.hero-copy h2::before { display: none; }
.hero-copy p { font-size: var(--fs-lead); color: var(--color14); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--gap-tiny); margin-top: var(--gap-small); }
@media (min-width: 640px) { .hero-actions { gap: 14px; margin-top: var(--gap-medium); } }

/* Quadrate im Rhythmus der Logoflächen, die zugleich den Fortschritt zeigen:
   die aktive Fläche läuft von links nach rechts weiß voll. Die Dauer muss zum
   Intervall in main.js passen. Der Schlagschatten hält die Bullets auch auf
   hellen Bildstellen sichtbar.
   Unter 917px ragt der Headline-Kasten 48px ins Bild, die Bullets bleiben darüber. */
.hero-dots { position: absolute; right: var(--gap-small); bottom: 66px; z-index: 4; display: flex; gap: 5px; }
@media (min-width: 640px) { .hero-dots { right: var(--gap-medium); } }
@media (min-width: 917px) { .hero-dots { right: var(--gap-big); bottom: var(--gap-medium); } }
.hero-dots button { position: relative; width: 20px; height: 20px; padding: 0; overflow: hidden; border: 0; background: rgba(255,255,255,.32); box-shadow: 0 1px 8px rgba(0,30,58,.45); cursor: pointer; transition: var(--trans-color); }
@media (min-width: 917px) { .hero-dots button { width: 24px; height: 24px; } }
.hero-dots button:hover { background: rgba(255,255,255,.5); }
.hero-dots button::after { content: ''; position: absolute; inset: 0; background: var(--color10); transform: scaleX(0); transform-origin: left center; }
.hero-dots button[aria-current="true"]::after { animation: slideProgress var(--slide-duration) linear forwards; }
body.is-paused .hero-dots button::after, body.is-paused .hero-slide img { animation-play-state: paused; }


/* ##################################################### */
/* ############## _layout — Hero der Unterseiten ####### */
/* ##################################################### */
/* Flacher, panoramaartig. Die Bildunterschrift liegt im Bild, nicht darunter. */

.hero-flat .hero-media { aspect-ratio: 16 / 9; }
@media (min-width: 640px) { .hero-flat .hero-media { aspect-ratio: 21 / 9; } }
@media (min-width: 917px) { .hero-flat .hero-media { aspect-ratio: auto; height: min(26vw, 430px); min-height: 290px; } }
.hero-flat .hero-slide::after { background: linear-gradient(100deg, rgba(0,42,78,.80) 0%, rgba(0,42,78,.52) 38%, rgba(0,42,78,.14) 70%, rgba(0,42,78,.32) 100%); }
.hero-flat .hero-dots { bottom: var(--gap-small); }
@media (min-width: 917px) { .hero-flat .hero-dots { bottom: var(--gap-medium); } }

.hero-caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; color: var(--color10); }
.hero-caption h1, .hero-caption h2 { max-width: 20ch; color: var(--color10); text-shadow: 0 2px 18px rgba(0,30,58,.4); }
.hero-caption h2 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.015em; }
.hero-caption p { max-width: 42ch; margin-top: var(--gap-tiny); font-size: var(--fs-lead); color: rgba(255,255,255,.94); text-shadow: 0 2px 14px rgba(0,30,58,.45); }
.hero-caption .btn { margin-top: var(--gap-small); }
.hero-caption-inner { max-width: 620px; }


/* ##################################################### */
/* ############## _layout — Faktenleiste ############### */
/* ##################################################### */
/* Die Einträge sind <div>, nicht <p> — sonst greift `p + p { margin-top }`
   und der erste Eintrag sitzt 18px höher als die drei anderen. */

.facts { border-bottom: 1px solid var(--color13); }
.facts-inner { display: grid; grid-template-columns: 1fr; gap: var(--gap-small) var(--gap-medium); padding-top: var(--gap-medium); padding-bottom: var(--gap-medium); }
@media (min-width: 640px) { .facts-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 917px) { .facts-inner { grid-template-columns: repeat(4, 1fr); gap: var(--gap-big); } }
.fact { display: flex; min-width: 0; align-items: flex-start; gap: 13px; margin: 0; }
.fact .icon { margin-top: 3px; font-size: 21px; color: var(--color2); }
.fact strong { display: block; font-size: 1.02rem; color: var(--color1); line-height: 1.35; }
.fact span { display: block; font-size: var(--fs-small); color: var(--color14); }
.facts-tint { background: var(--color11); border-bottom: 0; }


/* ##################################################### */
/* ############## _layout — Breadcrumb ################# */
/* ##################################################### */
/* Eigene helle Leiste direkt unter dem Hero — Signatur von es-moritzburg.de */

.breadcrumb { background: var(--color11); border-bottom: 1px solid var(--color13); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding-top: 13px; padding-bottom: 13px; font-size: var(--fs-small); color: var(--color14); }
.breadcrumb li + li::before { content: '›'; margin-right: 8px; color: var(--color13); }
.breadcrumb a { color: var(--color14); }
.breadcrumb a:hover { color: var(--color2); }


/* ##################################################### */
/* ############## _layout — Abschnitte ################# */
/* ##################################################### */

.band { padding-top: var(--gap-bigger); padding-bottom: var(--gap-bigger); }
@media (min-width: 917px) { .band { padding-top: var(--gap-huge); padding-bottom: var(--gap-huge); } }
.band-tint { background: var(--color11); }
.band-dark { background: var(--color5); color: var(--color10); }
.band-dark h2, .band-dark h3 { color: var(--color10); }
.band-dark a { color: var(--color10); }
.band-mark { position: relative; overflow: hidden; }
.band-mark > .max { position: relative; z-index: 1; }

.narrow { max-width: var(--width-narrow); margin-inline: auto; }
.narrow > * + * { margin-top: var(--gap-small); }
.narrow p { max-width: none; }
.center { text-align: center; }
.band-head { max-width: 720px; margin-bottom: var(--gap-medium); }
.band-head p { max-width: none; color: var(--color14); }
.band-head-center { margin-inline: auto; text-align: center; }
.band-head-center .subline { justify-content: center; }
.band-foot { display: flex; justify-content: center; margin-top: var(--gap-medium); }

.section > * + * { margin-top: var(--gap-small); }
.section + .section { margin-top: var(--gap-bigger); padding-top: var(--gap-bigger); border-top: 1px solid var(--color13); }
@media (min-width: 917px) { .section + .section { margin-top: var(--gap-huge); padding-top: var(--gap-huge); } }
.section img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.section > img + h2, .section > .figure + h2 { margin-top: var(--gap-medium); }
.section > * + .cta, .section > * + .accordion, .section > * + .teasers, .section > * + .tablewrap { margin-top: var(--gap-medium); }
.section h3 { margin-top: var(--gap-small); }

.figure { margin: 0; }
.figure img { width: 100%; }
.figure figcaption { padding-top: 10px; font-size: var(--fs-small); color: var(--color14); }


/* ##################################################### */
/* ############## _layout — Zweispalter ################ */
/* ##################################################### */

.main-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-bigger); padding-top: var(--gap-big); padding-bottom: var(--gap-bigger); }
@media (min-width: 1060px) { .main-grid { grid-template-columns: minmax(0,1fr) var(--width-sidebar); gap: var(--gap-huge); padding-top: var(--gap-bigger); padding-bottom: var(--gap-huge); } }

.sidebar > * + * { margin-top: var(--gap-big); }
.sidebar h2 { font-size: 1.35rem; }
.sidebar-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-small); margin-bottom: var(--gap-small); padding-bottom: var(--gap-tiny); border-bottom: 3px solid var(--color2); }
.sidebar-head .link-arrow { font-size: var(--fs-small); }


/* ##################################################### */
/* ############## _layout — Nachrichten ################ */
/* ##################################################### */

.news-list > * + * { margin-top: var(--gap-medium); padding-top: var(--gap-medium); border-top: 1px solid var(--color13); }
.news-entry { display: grid; grid-template-columns: 1fr; gap: var(--gap-small); }
@media (min-width: 640px) { .news-entry { grid-template-columns: 280px minmax(0,1fr); gap: var(--gap-medium); align-items: start; } }
.news-entry img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.news-entry h2 { font-size: 1.4rem; margin-top: var(--gap-tiny); margin-bottom: var(--gap-tiny); }
.news-entry h2 a { color: inherit; text-decoration: none; }
.news-entry h2 a:hover { color: var(--color2); }
.news-date { display: flex; align-items: center; gap: 11px; font-size: var(--fs-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color14); }
.news-date::before { content: ''; flex: 0 0 auto; width: 22px; height: 3px; background: var(--color2); }


/* ##################################################### */
/* ############## _layout — Stellenangebote ############ */
/* ##################################################### */
/* Anriss der Plenta-Jobs-Liste */

.jobs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gap-small); margin-bottom: var(--gap-medium); }
.jobs-head p { margin-top: var(--gap-tiny); color: var(--color14); }
.jobs-list { display: grid; grid-template-columns: 1fr; gap: 2px; }
.job { display: grid; grid-template-columns: 1fr; gap: 5px; padding: var(--gap-small); background: var(--color10); text-decoration: none; transition: var(--trans-color); }
@media (min-width: 917px) { .job { grid-template-columns: minmax(0,2fr) minmax(0,1fr) auto; align-items: center; gap: var(--gap-small); padding: var(--gap-small) var(--gap-medium); } }
.job:hover { background: var(--color2); color: var(--color10); }
.job:hover .job-title, .job:hover .job-meta { color: inherit; }
.job-title { font-size: 1.1rem; font-weight: 600; color: var(--color1); }
.job-meta { font-size: var(--fs-small); color: var(--color14); }
.job-go { display: flex; align-items: center; gap: 11px; font-size: var(--fs-small); font-weight: 600; }
.job-go .icon { font-size: 17px; transition: var(--trans-transform); }
.job:hover .job-go .icon { transform: translateX(4px); }


/* ##################################################### */
/* ############## _layout — Kontaktstreifen ############ */
/* ##################################################### */

.contactstrip { position: relative; overflow: hidden; background: var(--color2); color: var(--color10); }
.contactstrip .watermark { top: 50%; left: -46px; width: 200px; height: 200px; transform: translateY(-50%) rotate(-9deg); }
@media (min-width: 917px) { .contactstrip .watermark { left: -62px; width: 280px; height: 280px; } }
.contactstrip-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--gap-medium); align-items: center; }
@media (min-width: 917px) { .contactstrip-inner { grid-template-columns: minmax(0,1fr) auto; gap: var(--gap-bigger); } }
.contactstrip h2 { color: var(--color10); }
.contactstrip p { margin-top: 14px; color: rgba(255,255,255,.92); }
.contactstrip .subline { color: rgba(255,255,255,.8); }
.contactstrip .btn-invert { white-space: nowrap; }


/* ##################################################### */
/* ############## _layout — Footer ##################### */
/* ##################################################### */

.footer { background: var(--color5); color: var(--color10); padding-top: var(--gap-bigger); }
@media (min-width: 917px) { .footer { padding-top: var(--gap-huge); } }
.footer a { color: var(--color10); }
.footer a:hover { color: rgba(255,255,255,.72); }
.footer h2 { font-size: 1.15rem; color: var(--color10); margin-bottom: var(--gap-tiny); }
.footer h2::after { content: ''; display: block; width: 48px; height: 3px; margin-top: 12px; background: rgba(255,255,255,.4); }
.footer address { font-style: normal; line-height: 1.9; }
.footer address em { display: block; font-size: var(--fs-small); color: rgba(255,255,255,.72); }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-medium); padding-bottom: var(--gap-bigger); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-big); } }
@media (min-width: 917px) { .footer-grid { grid-template-columns: 1.35fr 1fr 1fr; gap: var(--gap-bigger); } }
.footer-logo { width: 240px; max-width: 100%; margin-bottom: var(--gap-small); filter: brightness(0) invert(1); }
.footer-claim { max-width: 34ch; font-size: var(--fs-small); color: rgba(255,255,255,.8); }

.footer-social { display: flex; gap: 10px; margin-top: var(--gap-small); }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(255,255,255,.1); transition: background-color .2s ease-in-out, transform .2s ease-in-out; }
.footer-social a:hover { background: rgba(255,255,255,.22); color: var(--color10); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }

.footer-nav { list-style: none; margin: 0; font-size: var(--fs-small); line-height: 2.1; }

.footer-meta { display: flex; flex-wrap: wrap; gap: var(--gap-tiny) var(--gap-small); padding-top: var(--gap-small); padding-bottom: var(--gap-small); border-top: 1px solid rgba(255,255,255,.22); font-size: var(--fs-small); list-style: none; margin: 0; }

.footer-traeger { display: grid; grid-template-columns: 1fr; gap: var(--gap-medium); align-items: center; padding-top: var(--gap-medium); padding-bottom: var(--gap-medium); border-top: 1px solid rgba(255,255,255,.22); font-size: var(--fs-small); }
@media (min-width: 917px) { .footer-traeger { grid-template-columns: auto minmax(0,1fr) auto; gap: var(--gap-bigger); } }
.footer-traeger p { margin: 0; max-width: 42ch; color: rgba(255,255,255,.82); }
.traeger-logo { display: block; width: 250px; max-width: 100%; filter: brightness(0) invert(1); opacity: .9; transition: opacity .2s ease-in-out; }
.traeger-link:hover .traeger-logo { opacity: 1; }
.badge-azav { display: flex; flex-direction: column; justify-content: center; gap: 2px; justify-self: start; padding: 12px 18px; background: var(--color10); color: var(--color5); text-align: center; }
@media (min-width: 917px) { .badge-azav { justify-self: end; } }
.badge-azav strong { font-size: 1.05rem; letter-spacing: .04em; }
.badge-azav span { font-size: var(--fs-mini); color: var(--color14); }


/* ##################################################### */
/* ############## _forms — Suche ####################### */
/* ##################################################### */
/* Das Suchfeld ist nicht dauerhaft sichtbar, sondern klappt über das
   Lupensymbol als eigene Leiste unter dem Header auf. */

.search-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 46; padding-top: var(--gap-small); padding-bottom: var(--gap-small); background: var(--color11); border-top: 1px solid var(--color13); box-shadow: var(--shadow-header-sticky); animation: panelDown .25s ease-out; }
.search-panel[hidden] { display: none; }
.search-form { display: flex; align-items: stretch; gap: 8px; }
.search-form input { flex: 1 1 auto; min-width: 0; padding: 14px 18px; background: var(--input-background); color: var(--input-color); border: 1px solid var(--input-border); }
.search-form input::placeholder { color: var(--label-color); }
.search-form input:focus { outline: none; border-color: var(--input-focus-border); box-shadow: inset 0 0 0 1px var(--input-focus-border); }
.search-form .btn { white-space: nowrap; }
.search-hint { max-width: none; margin-top: var(--gap-tiny); font-size: var(--fs-mini); color: var(--color14); }


/* ##################################################### */
/* ############## _forms — Formulare ################### */
/* ##################################################### */

.form { max-width: 720px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--gap-small); }
@media (min-width: 640px) { .form-row-2 { grid-template-columns: repeat(2, 1fr); } }
.form > * + * { margin-top: var(--gap-small); }
.widget { display: flex; flex-direction: column; gap: 7px; }
.widget label { font-size: var(--fs-small); font-weight: 600; color: var(--label-color); }
.widget label .mandatory { color: var(--color2); }
.widget input, .widget textarea, .widget select { width: 100%; padding: 13px 15px; background: var(--input-background); color: var(--input-color); border: 1px solid var(--input-border); }
.widget textarea { min-height: 150px; resize: vertical; }
.widget input:focus, .widget textarea:focus, .widget select:focus { outline: none; border-color: var(--input-focus-border); box-shadow: inset 0 0 0 1px var(--input-focus-border); }
.widget-file input { padding: 11px 15px; background: var(--color11); }
.widget-hint { font-size: var(--fs-mini); color: var(--color14); }
.widget-checkbox { flex-direction: row; align-items: flex-start; gap: 12px; }
.widget-checkbox input { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--color2); }
.widget-checkbox label { font-weight: 400; font-size: var(--fs-small); color: var(--color12); }
.widget-honeypot { position: absolute; left: -9999px; }
.captcha-placeholder { display: flex; align-items: center; gap: 14px; max-width: 340px; padding: 14px 16px; background: var(--color11); border: 1px dashed var(--color13); font-size: var(--fs-small); color: var(--color14); }
.captcha-placeholder .icon { font-size: 20px; color: var(--color2); }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-small); }


/* ##################################################### */
/* ############## _animations ########################## */
/* ##################################################### */

@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes slideProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes heroBox { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes panelDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes accOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Inhalte blenden beim Scrollen dezent ein. Ohne JavaScript bleibt alles sichtbar. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: var(--trans-reveal); }
.js .reveal.is-visible { opacity: 1; transform: none; }

.totop { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color1); color: var(--color10); text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility .25s, background-color .2s ease-in-out; }
@media (min-width: 917px) { .totop { right: 24px; bottom: 24px; } }
body.is-scrolled .totop { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--color2); color: var(--color10); }
.totop .icon { font-size: 21px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js .reveal { opacity: 1; transform: none; }
	.hero-slide.is-active img { animation: none; }
	.hero-dots button[aria-current="true"]::after { animation: none; transform: scaleX(1); }
}


/* ##################################################### */
/* ############## _print ############################### */
/* ##################################################### */

@media print {
	.header, .nav-mobile, .search-panel, .hero-dots, .totop, .cta, .contactstrip, .watermark, .footer-social { display: none !important; }
	body { font-size: 11pt; color: #000; background: #fff; }
	.js .reveal { opacity: 1; transform: none; }
	.main-grid { display: block; padding: 0; }
	.sidebar { margin-top: 1.5cm; }
	.section img, .teaser img, .news-entry img, .hero { display: none; }
	.acc-body { display: block !important; }
	.band, .band-tint { padding: 0; background: none; }
	.footer { padding: 0; background: none; color: #000; }
	.footer a, .footer h2 { color: #000; }
	.footer-logo, .traeger-logo { filter: none; }
	a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
	h1, h2, h3 { break-after: avoid; }
	p, li { break-inside: avoid; }
}