body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
.mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

@charset "UTF-8";
/* ==========================================================================
   EntdeckerTouren (der diakademie) – Website-Stylesheet
   VERSION: 2026-09-05 22:23 CEST  (diese Zeile bei jeder Änderung aktualisieren
   – zum schnellen Abgleich: Datei direkt im Browser öffnen und ganz oben
   nachsehen, ob dieser Stand ankam)
   Fonts werden selbst gehostet (kein Google-Fonts-Aufruf, DSGVO-konform).
   Passe die Pfade unten an, falls deine Ordnerstruktur abweicht:
   Erwartet wird: css/style.css  und  fonts/  als Geschwister-Ordner.
   ========================================================================== */

@font-face{
  font-family:'Baloo 2';
  src:url('../../files/entdeckertouren/fonts/Baloo2-Variable.woff2') format('woff2-variations'),
      url('../../files/entdeckertouren/fonts/Baloo2-Variable.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('../../files/entdeckertouren/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('../../files/entdeckertouren/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('../../files/entdeckertouren/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('../../files/entdeckertouren/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --bg: #F5F7F0;
  --bg-alt: #E9F0E1;
  --surface: #FFFFFF;
  --surface-purple: #880370;
  --text: #23281C;
  --text-muted: #545C48;
  --on-purple: #FBEFF8;
  --on-purple-muted: #E3B9DA;
  --green: #03881B;
  --green-strong: #026B14;
  --purple: #880370;
  --on-accent: #FFFFFF;
  --border: rgba(24,40,10,0.14);
  --focus: #026B14;
  --shadow: 0 1px 2px rgba(20,30,10,0.06);
  --radius: 14px;
  --maxw: 74rem;
  --measure: 62ch;
}

/* --on-accent: Textfarbe für helle Flächen wie Buttons/Avatare, deren
   Hintergrund --green-strong oder --purple ist. Im hellen Modus sind diese
   Hintergründe dunkel (kräftiges Grün/Lila) → Weiß passt. Im Dark Mode
   werden --green-strong/--purple bewusst aufgehellt, damit sie als TEXT auf
   dunklem Grund lesbar bleiben – als BUTTON-Hintergrund wären sie mit
   weißer Schrift dann aber viel zu kontrastarm (z. B. nur 1,75:1 statt der
   geforderten 4,5:1). Deshalb kippt --on-accent im Dark Mode auf dunkel. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #12160E;
    --bg-alt: #1A2013;
    --surface: #1E2417;
    --surface-purple: #5C0250;
    --text: #ECF1E4;
    --text-muted: #B3BCA5;
    --on-purple: #FBEFF8;
    --on-purple-muted: #E7C7DF;
    --green: #4CCB63;
    --green-strong: #3FE05A;
    --purple: #E56BCB;
    --on-accent: #12160E;
    --border: rgba(230,240,215,0.16);
    --focus: #4CCB63;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --bg: #12160E;
  --bg-alt: #1A2013;
  --surface: #1E2417;
  --surface-purple: #5C0250;
  --text: #ECF1E4;
  --text-muted: #B3BCA5;
  --on-purple: #FBEFF8;
  --on-purple-muted: #E7C7DF;
  --green: #4CCB63;
  --green-strong: #3FE05A;
  --purple: #E56BCB;
  --on-accent: #12160E;
  --border: rgba(230,240,215,0.16);
  --focus: #4CCB63;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; }
/* Contaos eigenes CSS (layout.min.css & Co.) setzt auf manchen Themes eine
   abweichende Root-Schriftgröße (z. B. 62.5% statt der Browser-Vorgabe
   16px) – dann werden alle rem-Werte hier im Stylesheet (Überschriften,
   Abstände, Tags …) auf der Live-Seite kleiner dargestellt als in
   vorlage.html, obwohl die CSS identisch ist. Diese Zeile erzwingt wieder
   1rem = 16px, egal was Contaos CSS vorgibt: */
html{ font-size:16px !important; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
/* Sprungziele nicht unter dem sticky Header verschwinden lassen */
/* War zuvor "section[id]" – traf auf der echten Contao-Seite nichts, weil
   dort nicht <section id="..."> im Markup steht, sondern der Contao-Artikel
   selbst die ID trägt (<div id="team" class="mod_article ...">). Deshalb
   griff der Ausgleich für den sticky Header nie, und Anker-Klicks (z. B. im
   Menü auf "Team") landeten mit der Überschrift verdeckt unter dem Header.
   Fix: allgemein auf [id] umgestellt, damit es auf beiden Strukturen
   (vorlage.html UND Contao) greift. Wert leicht erhöht (5rem -> 6.5rem),
   die reale Header-Höhe liegt bei ca. 100px/6,25rem. */
[id]{ scroll-margin-top:6.5rem; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Atkinson Hyperlegible', 'Segoe UI', Verdana, system-ui, sans-serif;
  font-size:18px;
  line-height:1.65;
}
img{ max-width:100%; display:block; }
h1,h2,h3{
  font-family:'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight:700;
  line-height:1.15;
  text-wrap:balance;
  margin:0 0 0.5em 0;
  color:var(--purple);
}
h1{ font-size:clamp(2.1rem, 4.5vw, 3.2rem); }
h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em 0; max-width:var(--measure); }
a{ color:var(--green-strong); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--purple); }
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background:var(--green-strong); color:var(--on-accent);
  padding:0.75rem 1.25rem; border-radius:8px;
  font-weight:700; z-index:100;
  transition:top .15s ease;
}
.skip-link:focus{ top:1rem; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem; }

/* header */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:0.75rem;
}
.logo-link{ display:block; flex-shrink:0; }
.logo-link img{ height:40px; width:auto; }
nav.main-nav ul{
  display:flex; gap:1.75rem; list-style:none; margin:0; padding:0;
}
nav.main-nav a{
  color:var(--text); font-weight:700; text-decoration:none;
  font-family:'Baloo 2', ui-rounded, sans-serif; font-size:1.05rem;
}
nav.main-nav a:hover{ color:var(--green-strong); }
.nav-toggle{
  display:none;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:10px;
  padding:0.5rem 0.75rem; font-weight:700; font-family:inherit; font-size:1rem;
  color:var(--text); cursor:pointer;
}
/* Breakpoint bewusst auf 767px gelegt, damit er exakt zur "Auf Smartphones
   anzeigen"-Grenze des codefog/contao-mobile_menu-Moduls passt: unterhalb
   davon übernimmt das Mobile-Menu-Modul, oberhalb die normale .main-nav. */
@media (max-width: 47.9375rem){
  .nav-toggle{ display:block; }
  nav.main-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
  }
  nav.main-nav.is-open{ display:block; }
  nav.main-nav ul{ flex-direction:column; gap:0; padding:0.5rem 1.5rem 1rem; }
  nav.main-nav li{ border-top:1px solid var(--border); }
  nav.main-nav a{ display:block; padding:0.85rem 0; }
}
/* Produktiv-Einbau ohne eigenen Toggle (das codefog-Modul übernimmt das
   mobile Menü separat): das <nav class="main-nav"> der Desktop-Navigation
   wird oberhalb 767px normal angezeigt, darunter greift die Regel oben
   (display:none) automatisch – kein zusätzliches CSS nötig. */

section{ padding-block:clamp(2.5rem, 6vw, 4.5rem); }
.bg-alt{ background:var(--bg-alt); }

/* .section: Universal-Klasse für Contao-Zeilen/-Elemente (RockSolid-Zeile,
   einzelnes Text-/Bild-/HTML-Element), die kein eigenes <section>-Tag
   ausgeben. Übernimmt zugleich das, was in vorlage.html das ".wrap"-Div pro
   Abschnitt erledigt (Innenabstand + Höchstbreite + Zentrierung) – bei
   Contao-Elementen darum bitte KEINE zusätzliche "wrap"-Klasse/-div mehr
   verwenden, sonst wird doppelt eingerückt. Einfach bei jeder Zeile ins Feld
   "CSS-Klasse" mindestens "section" eintragen (bzw. "bg-alt section" für
   die farbigen Abschnitte) – das ist die vom dir gewünschte "generelle
   Wrapper-Klasse, die alles vom Rand fernhält". */
.section{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:1.5rem;
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
}
/* Damit ".section" (auf var(--maxw) begrenzt) UND ein randloser Farbhinter-
   grund gleichzeitig funktionieren, malt dieser bekannte CSS-Trick die
   Hintergrundfarbe per Box-Shadow bis über den Bildschirmrand hinaus: */
.section.bg-alt{
  background:var(--bg-alt);
  box-shadow:0 0 0 100vmax var(--bg-alt);
  clip-path:inset(0 -100vmax);
}
/* Sicherheitsnetz gegen Doppel-Einrückung: laut deinem letzten Quellcode
   trägt der Hero-Abschnitt die Klasse "section" gleich zweimal – einmal am
   <div class="mod_article"> (das Feld "CSS-ID/Klasse" unter
   "Experteneinstellungen" im Artikel) UND einmal an der RockSolid-Zeile
   selbst (<div class="rs-columns ... hero section">). Dadurch addierten
   sich Innenabstand und Randabstand zweimal – daher wirkte alles enger/
   kleiner als in vorlage.html. Diese Regel neutralisiert ein verschachteltes
   zweites ".section" automatisch, falls dir das nochmal passiert: */
.section .section{
  max-width:none; margin-inline:0; padding-inline:0; padding-block:0;
}

/* hero (Variante A: vollständig von Hand geschriebenes HTML wie in
   vorlage.html – <section class="hero"><div class="wrap">…</div></section>
   als direktes Kind) */
.hero > .wrap{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
@media (max-width:48rem){ .hero > .wrap{ grid-template-columns:1fr; } }
.hero-art{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
.hero-art img{ display:block; width:100%; height:100%; object-fit:cover; }

/* hero (Variante B: bestätigt anhand des echten Seitenquelltexts vom
   05.09.2026 – RockSolid-Columns-Zeile mit 2 Spalten, je ein natives
   Contao-Inhaltselement: Text links, Bild rechts. Die Klasse "hero" sitzt
   jetzt (nach dem Aufräumen, siehe Anleitung Abschnitt 6) nur noch am
   Artikel/mod_article, NICHT mehr an der RockSolid-Zeile selbst – darum hier
   ".hero …" als Vorfahren-Selektor statt ".rs-columns.hero", sonst greifen
   diese Regeln gar nicht mehr (genau das war der Grund für die zuletzt
   fehlenden abgerundeten Ecken beim Hero-Bild). Das Nebeneinander/Umbrechen
   der beiden .rs-column-Elemente liefert RockSolid selbst mit, hier nur
   Feinschliff): */
.hero .rs-columns{ align-items:center; }
.hero .content-image figure{ margin:0; line-height:0; }
.hero .content-image img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
/* Sicherheitsnetz, falls im Text-Element noch der alte <section><div
   class="wrap"> …</div></section>-Code aus vorlage.html steckt (nicht mehr
   nötig, siehe Anleitung – am besten dort entfernen): verhindert doppelten
   Innenabstand/doppelte Begrenzung gegenüber der schon begrenzten Zeile. */
.hero .content-text section{ padding-block:0; }
.hero .content-text .wrap{
  max-width:none; margin-inline:0; padding-inline:0;
}

/* Unterstützer-Logos (Update 05.09.2026, echter Quellcode): jetzt als
   natives Contao-Bildergalerie-Element umgesetzt statt der ursprünglich
   angenommenen .funding-logos-Struktur – Contao liefert dafür
   <div class="content-gallery content-gallery--cols-2"><ul><li><figure>
   <img></figure></li>…</ul>. Die alten .funding-logos-Regeln oben bleiben
   für vorlage.html (dort noch mit reinem <img>) unverändert bestehen. */
.funding .rs-columns{ align-items:center; }
.funding .content-gallery ul{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:2rem; list-style:none; margin:0; padding:0;
}
.funding .content-gallery li{ margin:0; }
.funding .content-gallery figure{ margin:0; line-height:0; }
.funding .content-gallery img{
  height:72px; width:auto; display:block;
  border-radius:var(--radius);
}
/* Die Aktion-Mensch-Grafik ist als JPG mit weißem Hintergrund angelegt
   (kein Freistellen) – bekommt zusätzlich etwas weißes Polster, damit die
   Rundung nicht mitten im Bild, sondern außen um die weiße Fläche verläuft,
   genau wie die weiße Karte in vorlage.html (.am-logo). Das diakademie-Logo
   bleibt unverändert, weil es schon zur Lila-Fläche passt. Höhe von 56px auf
   72px (bzw. 60px + Polster) erhöht – wirkten in der großen Lila-Fläche zu
   klein (Update 05.09., bestätigt per Firefox-Vergleich ohne Zoom-Effekt). */
.funding .content-gallery img[src*="aktion-mensch-logo"]{
  background:#fff;
  padding:0.4rem 0.75rem;
  height:60px;
}
.eyebrow{
  display:inline-block; font-family:'Baloo 2',sans-serif; font-weight:700;
  color:var(--green-strong); letter-spacing:0.04em; margin-bottom:0.75rem;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1.05rem;
  padding:0.85rem 1.5rem; border-radius:999px; text-decoration:none;
  min-height:44px; border:2px solid transparent;
}
.btn-primary{ background:var(--green-strong); color:var(--on-accent); }
.btn-primary:hover{ background:var(--purple); color:var(--on-accent); }
.btn-outline{
  background:transparent; color:var(--purple); border-color:var(--purple);
}
.btn-outline:hover{ background:var(--purple); color:var(--on-accent); }

/* values */
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
@media (max-width:48rem){ .values-grid{ grid-template-columns:1fr; } }
.value-item .tag{
  display:inline-block; font-family:'Baloo 2',sans-serif; font-weight:800;
  color:var(--surface); background:var(--green-strong);
  padding:0.2rem 0.75rem; border-radius:999px; font-size:0.95rem; margin-bottom:0.75rem;
}
.value-item:nth-child(2) .tag{ background:var(--purple); }
.value-item:nth-child(3) .tag{ background:var(--green-strong); }

/* info cards: wann/wo */
.info-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.5rem;
}
.info-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow);
}
.info-card .label{
  font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--green-strong);
  text-transform:uppercase; letter-spacing:0.06em; font-size:0.85rem; margin-bottom:0.4rem; display:block;
}
.info-card p{ margin:0; max-width:none; }

/* team */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.5rem;
}
.team-card{ text-align:center; }
.avatar{
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.6rem;
  color:var(--on-accent); margin:0 auto 0.85rem;
}
.team-card:nth-child(1) .avatar{ background:var(--green-strong); }
.team-card:nth-child(2) .avatar{ background:var(--purple); }
.team-card:nth-child(3) .avatar{ background:var(--green-strong); }
.team-card h3{ margin-bottom:0; color:var(--text); }

/* contact */
.contact-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.5rem); box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
}
@media (max-width:48rem){ .contact-panel{ grid-template-columns:1fr; } }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ margin-bottom:1rem; }
.contact-list .label{ display:block; font-weight:700; color:var(--text-muted); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.05em; }
.contact-list a{ font-size:1.1rem; font-weight:700; }
.contact-actions{ display:flex; flex-direction:column; gap:0.85rem; justify-content:center; }
.contact-actions .btn{ justify-content:center; }

/* funding band */
.funding{
  background:var(--surface-purple); color:var(--on-purple);
}
/* Vollflächiges Lila statt eingerückter Box: "funding" trägt jetzt zugleich
   die Klasse "section" (also max-width + Innenabstand), ohne diesen Trick
   bliebe der Lila-Hintergrund auf die begrenzte Breite reduziert – derselbe
   Kniff wie bei .section.bg-alt, nur mit der Lila-Fläche als Farbe: */
.section.funding{
  box-shadow:0 0 0 100vmax var(--surface-purple);
  clip-path:inset(0 -100vmax);
}
.funding .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:2rem; justify-content:space-between;
}
.funding p{ color:var(--on-purple-muted); max-width:32ch; margin:0; }
.funding-logos{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.funding-logos img{ height:46px; width:auto; }
.funding-logos .am-logo{ background:#fff; padding:0.4rem 0.75rem; border-radius:8px; }

/* footer */
.site-footer{
  background:var(--bg-alt); border-top:1px solid var(--border);
  padding-block:2rem;
}
.site-footer .wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:0.95rem; color:var(--text-muted);
}
.footer-links{ display:flex; gap:1.5rem; list-style:none; padding:0; margin:0; }
.footer-links a{ color:var(--text-muted); font-weight:700; }

.note{
  font-size:0.9rem; color:var(--text-muted); border-left:3px solid var(--green-strong);
  padding-left:0.85rem; margin-top:1rem;
}

/* ==========================================================================
   Anpassung an das echte Live-Markup von entdeckertouren-diakademie.de
   (Header-Region "#header" + codefog/contao-mobile_menu), ermittelt am
   05.09.2026 aus dem tatsächlichen Seitenquelltext. Diese Regeln docken an
   die vorhandenen IDs/Klassen des Themes an, es müssen dafür keine
   zusätzlichen CSS-Klassen-Felder in Contao gesucht werden.
   ========================================================================== */
#header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
#header .inside{
  max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:1.1rem; flex-wrap:wrap; position:relative;
}
/* Sobald das Logo eingefügt ist (Bild oder verlinktes Bild als erstes Kind
   im Kopfbereich), bekommt es hier automatisch die richtige Höhe.
   Höhe auf 64px erhöht, damit die zweizeilige Logo-Variante mit Unterzeile
   ("der diakademie") nicht mehr unten abgeschnitten wirkt – dafür auch der
   Innenabstand des Kopfbereichs oben etwas größer (0.75rem -> 1.1rem). */
#header .inside > a:first-child{ display:block; flex-shrink:0; }
#header .inside > a:first-child img,
#header .inside > img:first-child{ height:64px; width:auto; max-width:none; }
/* Mobil ca. 10% kleiner (64px -> 58px; zunächst 5%/61px probiert, das war
   laut Rückmeldung noch nicht genug), etwas kompakter neben dem fest
   verankerten Menü-Button. */
@media (max-width:47.9375rem){
  #header .inside > a:first-child img,
  #header .inside > img:first-child{ height:58px; }
}

/* Desktop-Navigation (Klasse main-nav muss im HTML-Modul ergänzt werden,
   siehe Anleitung) */
#header nav.main-nav ul{
  display:flex; gap:1.75rem; list-style:none; margin:0; padding:0;
}
#header nav.main-nav a{
  color:var(--text); font-weight:700; text-decoration:none;
  font-family:'Baloo 2', ui-rounded, sans-serif; font-size:1.05rem;
}
#header nav.main-nav a:hover{ color:var(--green-strong); }
@media (max-width:47.9375rem){
  #header nav.main-nav{ display:none; }
}
/* Grund für "Nav ist nicht mehr rechts": #header .inside hat
   justify-content:space-between und laut echtem Seitenquelltext DREI
   direkte Kind-Elemente: das Logo, <nav class="main-nav"> UND den
   kompletten <div class="mod_mobile_menu">-Wrapper (der auch am
   Desktop im DOM steht, nur sein Trigger-Button ist dort per CSS
   versteckt). Space-between verteilt dann alle drei gleichmäßig, die Nav
   landet dadurch in der Mitte statt außen rechts. Fix: den ganzen
   Mobile-Menu-Wrapper am Desktop komplett aus dem Layout nehmen (nicht nur
   den Trigger-Button), dann bleiben wieder nur 2 Elemente übrig und die Nav
   springt zurück an den rechten Rand. */
@media (min-width:48rem){
  #header .mod_mobile_menu{ display:none; }
}

/* Mobile: Menü-Button fest oben rechts verankern statt im Flex-Fluss.
   Grund: #header .inside ist flex + flex-wrap:wrap; passen Logo (bewusst in
   voller gewünschter Größe belassen) und Menü-Button nicht beide in eine
   Zeile (z. B. iPhone SE3, ~327px nutzbare Breite), wirft flex-wrap den
   Button in eine zweite Zeile UNTER das Logo. Fix: den kompletten
   mod_mobile_menu-Wrapper aus dem Flex-Fluss herausnehmen (position:absolute)
   und rechts vertikal mittig im Kopfbereich verankern – dann konkurriert er
   nicht mehr um die Zeilenbreite und sitzt zuverlässig NEBEN dem Logo, egal
   wie breit die Logo-Grafik genau ist. #header .inside hat bereits
   position:relative, das ist die nötige Voraussetzung dafür. */
@media (max-width:47.9375rem){
  #header .mod_mobile_menu{
    position:absolute;
    top:0; bottom:0; right:1.5rem;
    margin:auto 0; /* vertikal zentriert, OHNE transform (wichtig, siehe unten) */
    height:max-content;
  }
}
/* Aufgeklapptes Menü: zwei Probleme nacheinander behoben.
   1) "extrem eng": .mod_mobile_menu hat als position:absolute-Element keine
      eigene feste Breite mehr, das Panel ".mobile_menu" hängt als normales
      Kind direkt darunter und übernahm diese Schrumpf-Breite.
   2) Panel erschien nur oben auf der Seite sichtbar bzw. nur zur Hälfte
      abgeschnitten, sobald man weiter unten auf der Seite auf "Menü"
      klickte: Ursache war "transform:translateY(-50%)" auf dem Wrapper
      oben – ein Element mit transform wird zum Bezugsrahmen (containing
      block) für absolut/fix positionierte Kind-Elemente. In Kombination
      mit dem sticky Header (position:sticky) hat das zu falscher
      Positionsberechnung geführt, je nachdem wie weit gescrollt war.
      Fix: den Wrapper ohne transform zentrieren (top:0;bottom:0;margin:auto
      0; siehe oben) UND das Panel per position:fixed direkt am Viewport
      verankern (statt am Wrapper) – dadurch immer an derselben Stelle
      unter dem Button, unabhängig vom Scroll-Stand. */
@media (max-width:47.9375rem){
  #header .mobile_menu,
  #mobile-menu-1.mobile_menu{
    position:fixed !important;
    top:6rem; right:1.5rem; margin-top:0 !important;
    width:max(12rem, 60vw);
    max-width:calc(100vw - 3rem);
    z-index:2147483647; /* maximal möglicher Wert, s. Hinweis unten */
  }
}
/* WICHTIG – bitte in Contao "Menü an der Position behalten" WIEDER
   AUSSCHALTEN (also wieder so wie ganz am Anfang, unangehakt):
   Solange dieser Haken AN ist, bleibt das Panel ".mobile_menu" im DOM ein
   Kind von "#header". #header selbst hat position:sticky + z-index:20 und
   bildet damit einen eigenen Stapelkontext (stacking context). Das kappt
   ALLES, was innerhalb von #header liegt, auf dessen Ebene (20) – ganz
   egal wie hoch man z-index beim Panel selbst schraubt (auch 99999 bringt
   dann nichts, das Panel bleibt hinter allem, was außerhalb von #header
   einen höheren z-index hat, z. B. das Abdunkel-Overlay des Moduls).
   Da unser Panel jetzt aber ohnehin per position:fixed mit festen
   Bildschirm-Koordinaten (oben/rechts) positioniert wird – unabhängig
   davon, wo es im DOM-Baum hängt – brauchen wir die Verschachtelung in
   #header nicht mehr. Mit ausgeschaltetem Haken verschiebt das Modul das
   Panel wieder ans Ende von <body>, dort ist es ein direktes Geschwister
   von #header statt ein Kind davon, entkommt damit dessen Stapelkontext-
   Deckel und kann sich gegen das Overlay ganz normal über z-index
   durchsetzen. Die Selektoren oben funktionieren so oder so (die ID-
   Variante "#mobile-menu-1.mobile_menu" greift unabhängig von der Position
   im DOM). */
/* Hinweis: ein zuerst hier ergänztes "Sicherheitsnetz" (max-width auf das
   Logo-Bild, um ein theoretisches Überlappen mit dem Button zu vermeiden)
   wurde wieder entfernt – es hat das Logo unproportional gestaucht, weil
   die Höhe an anderer Stelle fest auf 64px steht (height:64px; width:auto)
   und max-width dann nur die Breite gekappt hätte, ohne die Höhe
   mitzuskalieren. Laut Screenshot gibt es ohne dieses Sicherheitsnetz auch
   auf dem iPhone SE3 keine echte Überlappung – Logo bleibt daher in voller,
   unverzerrter Originalgröße. */

/* Mobile-Menu-Modul (codefog/contao-mobile_menu) */
.mobile_menu_trigger{
  display:none;
  align-items:center; gap:0.4rem;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:10px;
  padding:0.5rem 0.75rem; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1rem;
  color:var(--text); cursor:pointer;
}
@media (max-width:47.9375rem){
  .mobile_menu_trigger{ display:inline-flex; }
}
/* Dark Mode: Button hat sich nicht vom Kopfbereich abgesetzt (nachgemessen:
   Button-Hintergrund --bg-alt vs. Kopfbereich-Hintergrund --surface nur
   1,05:1 Kontrast, der dezente Rahmen sogar nur ca. 1,6:1 – WCAG verlangt
   für UI-Umrandungen mind. 3:1). Fix: im Dark Mode bekommt der Rahmen die
   Akzentfarbe --green-strong (dort hell/leuchtend) und etwas mehr Stärke,
   dadurch klar als eigene Fläche erkennbar (Kontrast zum Kopfbereich dann
   ca. 7,6:1). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mobile_menu_trigger{
    border-color:var(--green-strong); border-width:1.5px;
  }
}
:root[data-theme="dark"] .mobile_menu_trigger{
  border-color:var(--green-strong); border-width:1.5px;
}
/* !important nötig: das Modul bringt eigenes CSS mit (vermutlich über die
   ID #mobile-menu-1 skaliert), das schlägt eine reine Klassen-Regel sonst –
   sichtbar daran, dass zuvor nur :hover (Grün) durchkam, die Grundfarben
   (schwarzer Hintergrund, graue Schrift) aber vom Modul-Default kamen. */
/* Zusätzlich über die konkrete ID (#mobile-menu-1) angesprochen: falls das
   Modul selbst mit einer ID-Regel und/oder !important arbeitet, gewinnt eine
   reine Klassen-Regel das Spezifitäts-Duell sonst nicht, selbst mit
   !important. Passe "mobile-menu-1" an, falls bei euch eine andere Nummer
   im id-Attribut steht (im Quelltext nachsehen: id="mobile-menu-X"). */
#mobile-menu-1.mobile_menu,
.mobile_menu{
  background:var(--surface) !important;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-top:0.5rem; overflow:hidden;
  height:auto !important; max-height:none !important;
}
/* Der Wrapper ".inner" hatte per Modul-Default einen eigenen schwarzen
   Hintergrund (per Konsolen-Check am 05.09.2026 bestätigt: rgb(0,0,0)) –
   war bisher nicht angesprochen, deckte das weiße Panel dahinter ab. */
#mobile-menu-1.mobile_menu .inner,
.mobile_menu .inner{ background:transparent !important; }
.mobile_menu .inner ul{ list-style:none; margin:0; padding:0.5rem 1rem; }
.mobile_menu .inner li{ border-top:1px solid var(--border); }
.mobile_menu .inner li:first-child{ border-top:none; }
#mobile-menu-1.mobile_menu .inner a,
.mobile_menu .inner a{
  display:block; padding:0.85rem 0;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--text) !important; text-decoration:none;
  background:transparent !important;
}
#mobile-menu-1.mobile_menu .inner a:hover,
.mobile_menu .inner a:hover{ color:var(--green-strong) !important; }
/* Abgedunkelter Hintergrund bei geöffnetem Menü (overlay:true). Klassenname
   per DevTools bestätigt: "mobile_menu_overlay". Zusätzlich über die ID
   #mobile-menu-1-overlay angesprochen + !important, aus demselben Grund wie
   beim Panel selbst (das Modul-CSS gewinnt sonst das Spezifitäts-Duell). */
#mobile-menu-1-overlay.mobile_menu_overlay,
.mobile_menu_overlay{
  background:rgba(20,30,10,0.45) !important;
}