@charset "UTF-8";

/* --------------------------
   Basis & Typo
--------------------------- */

/* Fonts */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jizYRExUiTo99u79D0e0x8mIAjcQ-w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jizdRExUiTo99u79D0e8fOydLxUd0TA7iw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jizaRExUiTo99u79D0KExcOPIDU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design-Variablen */
:root{
  --c-bg:#EBF7FD;
  --c-brand:#448D3D;
  --c-brand-2:#3a7c35;  /* dunkler für Submenüs mobil */
  --c-accent:#40B0E4;
  --c-text:#111827;
  --c-muted:#6a9998;
  --shadow:0 6px 16px rgba(0,0,0,.15);
  --radius:10px;
}

/* Reset/Box-Sizing */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ background-color:var(--c-bg); }
body{
  font-family:"PT Sans", sans-serif;
  font-size:1.1em;
  background-color:var(--c-bg);
  margin:0 auto;
  padding:0;
  max-width:1280px;
  color:var(--c-text);
}

/* --------------------------
   Header
--------------------------- */

#header{
  display:block;
  margin:0 auto;
  padding:0;
  height:85px;
  max-width:1024px;
}

#header #logo{
  width:30%;
  margin:0;
  padding:0;
  text-align:left;
  float:left;
}
#header #logo img{
  max-width:240px;
  margin:10px 0 0 20px;
}

#header #header_navi{
  float:right;
  height:75px;
  margin:10px 30px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#header_navi a,
#footer a{
  color:var(--c-brand);
  display:inline-block;
  padding-left:20px;
  text-decoration:none;
}
#footer a{
  color:white;
}
#header_navi a:hover,
#footer a:hover{ text-decoration:underline; }

/* --------------------------
   Banner
--------------------------- */

#banner,
#banner img{
  padding:0;
  margin:0 auto;
  max-width:1280px;
  width:100%;
  display:block;
}
#banner{
  height:auto; /* keine fixe Höhe */
}

/* --------------------------
   Layout Content
--------------------------- */

#header,
#inhalt{
  width:100%;
  max-width:1024px;
  margin:0 auto;
  padding:0;
}
#inhalt{
  padding:10px 15px 20px;
  width:auto;
}
#inhalt a{ color:var(--c-brand); }
#inhalt li{ padding-bottom:10px; }
#inhalt .mitarbeitendeul{
  margin:0;
  padding:0;
  text-align:center;
}
#inhalt li.mitarbeitende,
#inhalt div.block{
  display:inline-block;
  width:300px;
  padding:10px 10px 10px 0;
  margin:10px 10px 10px 0;
}
#inhalt div.center{ text-align:center; }

/* --------------------------
   Navigation (Desktop default)
--------------------------- */

#main_navi{
  margin:0 auto;
  padding:0;
  background-color:var(--c-brand);
  text-align:center;
}

#navibutton{ display:none; } /* wird nur mobil gezeigt */

#main_navi ul{
  margin:0 auto;
  padding:0;
  list-style:none;
}

#main_navi > ul{
  display:flex;
  gap:0;
  justify-content:center;
  position:relative;
  z-index:1000;
}

#main_navi li{
  position:relative;
  color:white;
  margin:0;
}

#main_navi a{
  display:block;
  color:white;
  text-decoration:none;
  line-height:1.3;
  padding:12px 18px; /* bessere Tap-Ziele */
}

#main_navi a:hover{ text-decoration:underline; cursor:pointer; }

/* Submenüs (Desktop) */
#main_navi ul ul{
  position:absolute;
  top:100%;
  left:0;
  display:none;
  min-width:220px;
  margin:0;
  padding:4px 0 0 0;
  text-align:left;
  background:var(--c-brand);
  box-shadow:var(--shadow);
  border-radius:0;
}
#main_navi ul li:hover > ul,
#main_navi li:focus-within > ul{ display:block; }

#main_navi ul ul li a{
  padding:9px 30px;
  background:var(--c-brand);
}
#main_navi ul ul li a:hover{
  background:var(--c-accent);
  color:white;
}

/* Hover-Hintergrund auf Top-Level */
#main_navi > ul > li:hover{
  background:var(--c-accent);
  color:#fff;
  cursor:pointer;
}

/* Tastatur-Fokus sichtbar */
#main_navi a:focus{
  outline:2px solid var(--c-accent);
  outline-offset:2px;
}

/* Caret-Label standardmäßig am Desktop ausblenden */
.submenu-caret{ display:none; }

/* --------------------------
   Footer
--------------------------- */

p#footer{
  clear:both;
  margin:0 auto;
  padding:15px 0;
  background-color:var(--c-brand);
  text-align:center;
  color:white;
  font-size:.8em;
}

/* --------------------------
   Headlines
--------------------------- */

h1{ color:var(--c-brand); }
h1#ausgabe{
  text-align:center;
  color:var(--c-muted);
  padding:10px;
  margin:10px;
}
h1#ueberschrift{
  text-align:center;
  padding:0 10px 5px;
  margin:5px;
  color:var(--c-muted);
  font-weight:normal;
}
h3{ margin-top:35px; }
h3#ueberschrift2{
  text-align:center;
  padding:0 10px 5px;
  margin:0;
  color:var(--c-muted);
  font-weight:normal;
}

/* --------------------------
   Startseite Kacheln
--------------------------- */

#startseite{ margin:10px auto; text-align:center; }
#startseitegruppe{ display:inline-block; }
#startseitegruppe div{
  text-align:center;
  background-color:var(--c-brand);
  color:white;
  padding:10px;
  margin:10px 20px;
  max-width:240px;
  float:left;
  min-height:400px;
  border-radius:20px;
}
#startseite img{
  width:100%;
  display:inline-block;
  padding:10px 0;
  height:150px;
}
#startseite a{ color:white; text-decoration:none; }
#startseite a:hover{ text-decoration:underline; }

/* --------------------------
   Bilder/Utilities
--------------------------- */

.beitragsbild{
  text-align:center;
  padding:6px 3px;
  margin:10px;
  max-width:100%;
}
.beitragsbild img{
  max-width:100%;
  width:90%;
  box-shadow:0 0 1px 1px rgba(0,0,0,1);
  border-radius:3px;
}

img.logos{ display:inline-block; padding:5px 5px 10px 0; max-height:120px; max-width:300px; height:auto; width:auto; }
img.klein{ max-height:150px; max-width:150px; height:auto; width:auto; }
img.mittel{ max-height:400px; max-width:400px; height:auto; width:auto; }
img.hoch{ max-width:300px; height:auto; width:auto; }
img.floatleft{ float:left; display:inline-block; padding:0 25px 15px 0; }
img.floatright{ float:right; display:inline-block; padding:0 0 15px 25px; }

/* --------------------------
   Aktuelles-Komponenten
--------------------------- */

.aktuelles{
  --ak-bg:#EBF7FD;
  --ak-text:#111827;
  --ak-muted:#6b7280;
  --ak-accent:#2563eb;
  --ak-border:#e5e7eb;
  --ak-card:#ffffff;
  --ak-shadow:0 6px 20px rgba(0,0,0,.06);
  --ak-radius:14px;
  --ak-maxw:800px;
  color:var(--ak-text);
  font-family:"PT Sans", sans-serif;
  background:var(--ak-bg);
}
.aktuelles *{ box-sizing:border-box; }
.aktuelles a{ color:inherit; }
.aktuelles__header{ max-width:var(--ak-maxw); margin:32px auto 16px; padding:0 16px; }
.aktuelles__title{ font-size:clamp(26px,4vw,36px); margin:0 0 6px; letter-spacing:.2px; }
.aktuelles__subtitle{ color:var(--ak-muted); margin:0; font-size:15px; }
.aktuelles__toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.aktuelles__chip{ background:#f3f4f6; border:1px solid var(--ak-border); padding:6px 10px; border-radius:999px; color:#111827; font-size:13px; }

.aktuelles__grid{ max-width:var(--ak-maxw); margin:0 auto 64px; padding:0 16px; display:grid; grid-template-columns:1fr; gap:24px; }
.aktuelles-card{ background:var(--ak-card); border:1px solid var(--ak-border); border-radius:var(--ak-radius); overflow:hidden; box-shadow:var(--ak-shadow); display:flex; flex-direction:column; }
.aktuelles-card__media{ width:100%; background:#f8fafc; }
.aktuelles-card__media img{ display:block; width:100%; height:auto; }
.aktuelles-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#f8fafc; overflow:hidden; }
.aktuelles-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.aktuelles-card__body{ padding:18px 18px 14px; display:flex; flex-direction:column; gap:12px; }
.aktuelles-card__title{ font-size:22px; font-weight:700; margin:0; line-height:1.35; }
.aktuelles-card__meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--ak-muted); }
.aktuelles-card__badge{ padding:4px 8px; border-radius:999px; border:1px solid var(--ak-border); background:#f9fafb; color:#374151; font-size:12px; letter-spacing:.2px; }
.aktuelles-card__texts p{ margin:0 0 8px; }
.aktuelles-card__section{ margin-bottom:14px; }
.aktuelles-card__image-block{ margin:8px 0 16px; }
.aktuelles-card__image-block img{ display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--ak-border); background:#f8fafc; }
.aktuelles-card__footer{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:6px; }
.aktuelles-card__link{ text-decoration:none; color:var(--ak-accent); font-weight:600; }
.aktuelles-card__link:hover{ text-decoration:underline; }
.aktuelles__placeholder{ color:var(--ak-muted); font-style:italic; grid-column:1/-1; }
.aktuelles--section{ padding:8px 0 12px; }

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

@media (max-width: 768px){

  /* Header kompakter + Logo mit 20px Rand links/rechts */
  #header{
    height:auto;
    padding:8px 0;
  }
  #header #logo{
    width:100%;
    float:none;
    text-align:center;
    padding:0 20px;          /* 20px links/rechts */
    box-sizing:border-box;
  }
  #header #logo img{
    display:block;
    width:100%;
    max-width:520px;         /* optionales Hard-Limit, kannst du anpassen/entfernen */
    height:auto;
    margin:0 auto;
  }
  #header #header_navi{
    float:none;
    height:auto;
    margin:10px;
  }

  /* Toggle-Button sichtbar */
  #navibutton{
    display:inline-block;
    font-size:1.1em;
    border:1px solid var(--c-brand);
    border-radius:var(--radius);
    color:var(--c-brand);
    padding:9px 12px;
    margin:12px;
    background:#fff;
    cursor:pointer;
    user-select:none;
  }

  /* Standard: Navigation zu – per Checkbox auf
     WICHTIG: #nav-toggle muss direkt vor #main_navi im DOM stehen */
  #main_navi{
    display:none;
    text-align:left;
    background:var(--c-brand);
  }
  #nav-toggle:checked + #main_navi{ display:block; }

  /* Vertikale Liste */
  #main_navi > ul{
    display:block;
    margin:0;
    padding:0;
  }
  #main_navi > ul > li{
    border-top:1px solid rgba(255,255,255,.15);
  }

  /* Links mobil als Flex-Zeile mit Caret am Ende (kein Umbruch des Carets) */
  #main_navi a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 16px;
    font-weight:600;
    text-decoration:none;
  }
  /* Nur Menüpunkte MIT Untermenü bekommen den Caret */
  #main_navi a.has-submenu::after{
    content:"▸";
    font-size:.9em;
    margin-left:auto;        /* Caret ganz rechts, kein Zeilenwechsel */
    flex:0 0 auto;
  }

  /* Untermenüs = Akkordeon (geschlossen bis Checkbox aktiv) */
  #main_navi ul ul{
    position:static;
    background:var(--c-brand-2);
    box-shadow:none;
    margin:0;
    padding:0;
    display:none;
  }
  #main_navi ul ul li a{
    background:transparent;
    font-weight:500;
    padding:12px 20px 12px 28px;
  }

  /* Checkbox steuert Caret + Untermenü
     HTML-Struktur: <input.submenu-toggle> + <a class="has-submenu"> + <ul class="main_navi_sub"> */
  .submenu-toggle:checked + a.has-submenu::after{ content:"▾"; }
  .submenu-toggle:checked + a.has-submenu + ul{ display:block; }

  /* Hover entschärfen (Touch) */
  #main_navi > ul > li:hover{ background:var(--c-brand); }
  #main_navi a:hover{ text-decoration:none; }

  /* Footer-Links untereinander */
  #footer a{ display:block; padding-top:15px; }
}