/* === 1. Basislayout === */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  background: #fff;
  color: #000;
}

/* === 1a. Globale Listenformatierung === */
ul {
  padding-left: 1.2em;        /* Einrückung der Liste nach links – sichtbar bei list-style */
  margin-bottom: 1em;         /* Abstand unterhalb der Liste – trennt sie vom folgenden Element */
}

li {
  margin-bottom: 0.5em;       /* Abstand zwischen Listenpunkten */
  line-height: 1.3;           /* Etwas mehr Zeilenhöhe für bessere Lesbarkeit */
}

/* === 2. Top-Bar (Kontaktzeile) === */
.top-bar {
  background: #777;
  color: #fff;
  font-size: 0.75em;
  height: 30px;
  line-height: 30px;
  padding: 0 1em;
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.contact-item {
  white-space: nowrap;
}

.top-bar a {
  color: inherit;            /* Übernimmt die Schriftfarbe von .top-bar (weiß) */
  text-decoration: none;     /* Keine Unterstreichung */
}

.top-bar a:visited {
  color: inherit;            /* Gleiche Farbe wie im Normalzustand */
}

.top-bar a:hover,
.top-bar a:focus {
  text-decoration: none; /* Optional: underline=leichte Rückmeldung beim Überfahren */
}

/* === 3. Header mit Logo === */
header {
background: #fff; /* Hintergrundfarbe: reines Weiß (#ffffff) – sorgt für einen klaren, neutralen Hintergrund im Headerbereich */
padding: 0.5em;  /* 0.8 vorher Innenabstand: auf allen Seiten (oben, rechts, unten, links) 1em (~16px) – sorgt dafür, dass der Inhalt (z.B. das Logo) nicht direkt am Rand klebt */
text-align: center; /* Textausrichtung: zentriert – betrifft inline-Inhalte wie Texte und Bilder, z. B. das zentrierte Schul-Logo im Header */
margin-bottom: 0.1em; /* Außenabstand NACH UNTEN: 1.5em (~24px) – schafft Abstand zum folgenden Element (z. B. Menü oder Inhaltsbereich) */
margin-top: 0.1em; /* Fügt 2em Abstand nach oben ein */

}
/* === Header - Logo ALT, ZENTRIERT === */
header img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* === Header - Logo NEU LINKSBÜNDIG === */
header img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: 0.1em; /* oder z. B. 1em */
}

@media (min-width: 769px) {
  header img {
    width: 60%;
  }
}

/* === 4. Menü-Logik (Toggle für Mobil) === */
#toggle-menu {
  display: none;
}

/* Menü-Symbol für Mobil */
.menu-icon {
  display: none;              /* Standardmäßig ausgeblendet – wird per Media Query sichtbar gemacht */
  font-size: 1.2em;           /* Schriftgröße für das Menülabel und ggf. das Symbol */
  /*padding: 0 1em; */        /* Alte Padding-Variante (auskommentiert) */
  padding: 0 1em 0 0;         /* Innenabstand: oben = 0, rechts = 1em, unten = 0, links = 0 */
  height: 50px;               /* Höhe des gesamten Menübereichs */
  line-height: 50px;          /* Vertikale Ausrichtung des Texts innerhalb der Höhe */
/* Vorherige Hintergrundfarbe (auskommentiert als Hinweis) */
  background: #ccc;
/* Aktuelle Hintergrundfarbe: helles Mintgrün */
  background: #e9f5f0;  
  color: #666;                /* Text- und Symbolfarbe: dunkles Grau */
  cursor: pointer;            /* Cursor wird zur Hand – signalisiert Klickbarkeit */
  /*display: flex; */         /* Flexbox auskommentiert – war evtl. vorher aktiv */
  align-items: center;        /* Vertikale Ausrichtung der Inhalte (falls Flex aktiv ist) */
  gap: 0.5em;                 /* Abstand zwischen Menütext und Symbol (falls beides verwendet wird) */
}

.menu-label {
  font-weight: bold;
}

/* Menüleiste (Wrapper) */
/* 1. alte Version grau ohne Schatten */
.menu-wrapper {
  height: 50px;
  display: flex;
  align-items: center;
  background: #e9f5f0;
  background: #ccc; /* grauton, ehemalig Menüleiste (Wrapper) */
  padding: 0 1em;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* ganz dezenter Schatten */
  border-radius: 0 0 8px 8px; /* nur unten abgerundet */
}
/* 2. neu mit Schatten */ 
.menu-wrapper {
  height: 50px;
  display: flex;
  align-items: center;
  background: #e9f5f0; /* heller Mint-Ton */
  padding: 0 1em;
/* Ausrichtung Navigationsleiste */
  justify-content: center;
  justify-content: flex-start; /* linksbündig */
/* Ausrichtung Navigationsleister */
  position: relative; /* wichtig für Schatten + Radius */
  z-index: 2;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* kräftigerer Schatten sichtbar */
  border-radius: 0 0 12px 12px; /* unten abgerundet */
}

/* === 5. Navigation Desktop === */

nav.menu {
  background: transparent; /* Hintergrundfarbe für die Hauptmenüpunkte > TRanparent, damit einfacher (Desktop) */
  position: relative; /* für menu-wrapper 2. neu mit Schatten */ 
}

nav.menu ul {
  list-style: none; /* Entfernt Standard-Aufzählungszeichen */
  margin: 0; /* Kein äußerer Abstand */
  padding: 0; /* Kein innerer Abstand */
  display: flex; /* Menüpunkte nebeneinander anzeigen */
  flex-wrap: wrap; /* Menüzeile darf umbrechen, falls nötig */
  justify-content: center; /* Zentrierte Ausrichtung der Menüeinträge */
}

nav.menu li {
  position: relative; /* Notwendig für absolute Positionierung der Submenüs */
}

nav.menu a {
  display: block; /* Vergrößert den Klickbereich auf gesamten Linkbereich */
  padding: 0.3em 0.75em; /* Abstand oben/unten und links/rechts Menü Desktop */
  font-size: 1.0em; /* Schriftgröße OBERNAVIGATION  */
  text-decoration: none; /* Kein Unterstreichen standardmäßig */
  color:#1E73BE; /* Linkfarbe im Menü  */
  transition: background 0.2s; /* Weicher Übergang bei Hover */
  line-height: 1.15; /* Zeilenabstand Menü Desktop */
}

nav.menu a:hover {
  background:#dcebe4; /* Hintergrundfarbe bei Hover vorher #ccc*/
  text-decoration: underline; /* Unterstreichen bei Hover zur besseren Orientierung */
}

/* Submenüs */
nav.menu ul ul {
  display: none; /* Untermenüs standardmäßig ausgeblendet */
  position: absolute; /* Absolut positioniert relativ zum Elternelement */
  top: 100%; /* Direkt unter dem Hauptmenüpunkt */
  left: 0; /* Linksbündig ausgerichtet */
  background:#dcebe4; /* Hellgrauer Hintergrund für Untermenüs vorher #ddd*/
  min-width: 420px; /* Mindestbreite der Dropdowns */
  z-index: 1000; /* Überlagert anderen Inhalt */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leichter Schlagschatten für Tiefe */
}

nav.menu ul ul a {
  font-size: 0.95em;        /* Kleinere Schriftgröße für UNTERMENÜ-LINKS */
  font-weight: normal;      /* Optional: nicht fett */
  color: #1E73BE;           /* wie in nav.menu a */
  display: block;           /* Vollständiger Klickbereich */
  padding: 0.4em 0.75em;    /* Gleichmäßiger Abstand */
  border-bottom: 1px solid #ccc; /* Hauchdünner Trennstrich unten */
}

nav.menu li:hover > ul {
  display: block; /* Zeigt das Submenü an, wenn man mit der Maus über den Menüpunkt fährt */
}

/* Dropdown-Pfeil */
nav.menu li.has-submenu > a::after {
  content: ' ▼'; /* Pfeil als visueller Hinweis auf ein Untermenü */
  font-size: 0.7em; /* Etwas kleiner als normaler Text */
  margin-left: 0.25em; /* Abstand zum Linktext */
  color: inherit; /* Pfeil übernimmt die Schriftfarbe */
}

/* === 6. Responsive Menü (Mobil) === */
@media (max-width: 768px) { /* Aktiviert Regeln für Geräte mit max. 768px Breite */

	.menu-icon {
	  display: flex;              /* Flexbox aktivieren */
	  align-items: center;        /* Vertikal zentrieren */
	  height: 40px;
	  line-height: 50px;
	}
	
	.top-bar {
	  position: fixed;        /* Fixiert die Kontaktzeile am oberen Bildschirmrand */
	  top: 0;                 /* Position: ganz oben */
	  left: 0;                /* Linksbündig */
	  width: 100%;            /* Über gesamte Bildschirmbreite */
	  z-index: 1001;          /* Höchster Stapelwert – liegt über allem */
	}
	
	.menu-wrapper {
	  display: flex;              /* Flexbox aktivieren */
	  align-items: center;        /* Vertikale Zentrierung */
	  height: 40px;               /* Gleiche Höhe wie .menu-icon */
	  padding: 0 1em;
/* Hintergrundfarbe Menüstreifen ALT */
	  background: #ccc;
/* Hintergrundfarbe Menüstreifen NEU */
  	  background: #e9f5f0;
	  justify-content: flex-start; /* Linksbündig in Mobilansicht */
	  position: fixed;            /* Fixiert die Menüleiste direkt unter der .top-bar */
	  top: 30px;                  /* Sitzt unterhalb der .top-bar (30px hoch) */
	  left: 0;
	  width: 100%;
	  z-index: 1000;              /* Direkt unter der .top-bar, aber über dem Inhalt */
	}
	
	body {
	  padding-top: 70px;          /* Schafft Platz oberhalb des Inhalts, damit nichts unter .top-bar und .menu-wrapper verschwindet */
	}

  nav.menu {
    display: none; /* Menü standardmäßig ausgeblendet */
    position: fixed; /* Fixierte Position im Viewport */
    top: 70px; /* Startet 80px unter dem oberen Rand (z.B. unter einem Header) */
    left: 0; /* Links an Bildschirmkante ausgerichtet */
    width: 95vw; /* Menü nimmt gesamte Bildschirmbreite ein */
    height: calc(100vh - 70px); /* Höhe angepasst an den verbleibenden Viewport unterhalb des Headers */
    background: #f0f0f0; /* Oberpunkte Menü Heller grauer Hintergrund */
    overflow-y: auto; /* Vertikales Scrollen bei Überlänge */
    z-index: 1000; /* Hoher Stapelindex, damit Menü über anderem Inhalt liegt */
    flex-direction: column; /* Menüelemente werden untereinander dargestellt */
  }

  #toggle-menu:checked ~ nav.menu {
    display: flex; /* Menü wird eingeblendet, wenn Checkbox aktiviert ist */
  }

  nav.menu ul {
    flex-direction: column; /* Listenelemente untereinander anordnen */
    align-items: stretch; /* Menüeinträge über volle Breite strecken */
  }

  nav.menu ul ul {
    position: static; /* Untermenüs im normalen Dokumentfluss */
    display: block; /* Untermenüs immer sichtbar (kein Dropdown) */
    padding-left: 1.5em; /* Einrückung für Untermenüs */
	border-left: 0px solid #ccc; /* Linke graue Linie zur optischen Trennung */
    background: #f0f0f0; /* Hintergrund für Untermenüs */
	box-shadow: none;
  }
  
  nav.menu ul ul a {
  color: #555;           /* Schriftfarbe Unternemü */
  }

  nav.menu a {
    padding: 0.55em; /* Großzügiger Innenabstand für Touchfreundlichkeit */
    border-bottom: 1px solid #ccc; /* Trennlinie zwischen Menüeinträgen */
    line-height: 1.05; /* Geringer Zeilenabstand für kompaktes Layout */
	color: #666; /* Beispiel: Dunkelgrau – gut lesbar auf hellgrauem Hintergrund */
  }
}

	/* === 7. Hauptbereich + Sidebar === */
	.content-wrapper {
	  display: flex;                /* Flexbox-Layout: Hauptinhalt und Sidebar nebeneinander anordnen */
	  flex-wrap: wrap;             /* Zeilenumbruch erlauben, falls der Platz nicht reicht (z. B. auf kleinen Bildschirmen) */
	  gap: 1em;                    /* Abstand zwischen den Flex-Kindern (main und aside) – sowohl horizontal als auch vertikal bei Umbruch */
	  padding: 1em;                /* Innenabstand: schafft Puffer zum Rand des content-wrapper-Containers */
	  border: 0px solid #ccc;      /* Dünner grauer Rahmen um den gesamten Inhaltsbereich */
	}
	
	main {
	  flex: 2;                     /* Hauptinhalt nimmt den doppelten Platz im Verhältnis zur Sidebar ein (2:1 Verhältnis) */
	  background: #fff;            /* Hintergrundfarbe: Weiß für guten Kontrast und Lesbarkeit */
	  padding: 1em;                /* Innenabstand: Puffer zwischen Inhalt (Text) und dem Rand des main-Bereichs */
	}
	
	aside {
	  flex: 1;                     /* Sidebar nimmt einfachen Platzanteil – also halb so viel wie main */
	}
	
	.sidebar-box {
	  margin-bottom: 1em;          /* Abstand nach unten: trennt mehrere Boxen visuell voneinander */
	  background: #f9f9f9;         /* Heller grauer Hintergrund für jede Box – hebt sich vom weißen main ab */
	  padding: 0.75em;             /* Innenabstand: sorgt für Luft um den Text in der Box */
	  border-radius: 4px;          /* Abgerundete Ecken: optisch weicher, moderner Look */
	}
	
	.sidebar-box h3 {
	  margin-top: 0;               /* Entfernt oberen Außenabstand – verhindert überflüssigen Abstand zur Boxkante */
	  font-size: 1.1em;            /* Etwas größere Schrift für Zwischenüberschrift – klarer sichtbar als Fließtext */
	}
	
	.sidebar-box p {
	  font-size: 0.8em; /* ca. 14,4px bei Standardgröße 16px */
	  line-height: 1.2; /* etwas kompakter, aber noch gut lesbar */
	}
	
	
	/* === 8. Footer === */
	footer {
	  background: #ccc;
	  padding: 1em;
	  text-align: center;
	  margin-top: 2em;
	}
	
	/* === 9. Zusatzstile für Stilklassen === */
	.Stil1 {
	  color: #4caf50;
	}
	
	.Stil2 {
	  color: #4caf50;
	  font-weight: bold;
	}
	
	h1.Stil2 {
	  font-size: 1.17em; /* Gleiche Größe wie h3 standardmäßig */
	  margin-top: 0;
	}
	
	/* === 10. Inhalte === */
	
	.inhalt_artikel {
	  margin-bottom: 2em; /* Abstand zwischen mehreren Artikeln – sorgt für klare Trennung */
	}
	
	.inhalt_datum {
	  font-size: 0.75em; /* Sehr kleine Schriftgröße – ideal für Metainfos wie Datum */
	  color: #000; /* Schwarze Schriftfarbe – dezent und gut lesbar */
	  margin-bottom: 0em; /* Geringer Abstand zur Überschrift – optisch eng verbunden */
	}
	
	.inhalt_überschrift {
	  font-size: 1em;       /* Gleiche Größe wie h1 */
	  font-weight: bold;    /* Gleiche Stärke ODER bold */
	  color: #05689b;         /* Wunschfarbe: kräftiges Blau  Schwarz #fff */
	  margin-top: 0;        /* Abstand nach oben optional anpassen */
	  margin-bottom: 0.1em; /* Abstand zum Text darunter */
	}

.inhalt_inhalte {
  font-size: 1em; /* Standard-Schriftgröße wie <p> */
  color: #000; /* Standard-Schriftfarbe */
  line-height: 1.2; /* Standard-Zeilenhöhe aus body */
  margin-top: 0; /* Optional: kein Abstand zur Überschrift */
  margin-bottom: 0.7em; /* Abstand nach unten zum nächsten Artikel */

  /* --- Ergänzungen für Links --- */
}

.inhalt_inhalte a,
.inhalt_inhalte a:visited,
.inhalt_inhalte a:hover,
.inhalt_inhalte a:focus {
  color: rgba(0, 0, 0, 0.6);   /* 80 % Schwarz */
  text-decoration: underline; /* Immer unterstrichen */
}

	.inhalt_überschrift_kurz {
	  font-size: 1em;       /* Gleiche Größe wie h1 */
	  font-weight: normal;    /* Gleiche Stärke ODER bold */
	  color: #05689b;         /* Wunschfarbe: kräftiges Blau  Schwarz #fff */
	  margin-top: 0;        /* Abstand nach oben optional anpassen */
	  margin-bottom: 0em; /* Abstand zum Text darunter */
	}
	
	.inhalt_artikel_kurz {
	  margin-bottom: 0.4em;   /* Deutlich kleinerer Abstand zwischen Artikeln als bei der Vollansicht */
	  padding: 0.2em 0;       /* Vertikaler Innenabstand: sorgt für etwas "Luft" oben und unten im Artikelblock */
	}
	
	.artikel_kurz_link {
	  display: block;
	  text-decoration: none; /* keine Unterstreichung */
	  color: inherit;         /* übernimmt die normale Textfarbe */
	}
	
	.artikel_kurz_link:hover,
	.artikel_kurz_link:focus,
	.artikel_kurz_link:visited {
	  text-decoration: none;  /* auch bei Hover/Fokus keine Unterstreichung */
	  color: inherit;         /* keine Farbänderung bei Hover */
	}

	.inhalt_bild {
	  margin-bottom: 0.5em;
	}
	.inhalt_bild img { /* bezieht sich auf Bilder allgemein im Content-wrapper */
	  display: block;
	  max-width: 100%;
	  height: auto;
	}
	
.inhalt_inhalte img { /* bezieht sich auf Bilder im Bereich inhalte_inhalte, also Datenbankeinträge/Artikel  */
  display: block;
  width: 100%;        /* Füllt den Container vollständig aus */
  max-width: 100%;    /* Keine Begrenzung durch Bildgröße */
  height: auto;       /* Verhältnis bleibt erhalten */
  object-fit: cover;  /* Optional: Bild beschneiden statt verzerren */
}

	/* --- Buttons: Inhalt mehr --- */
	
	.inhalt_mehr {
	  margin-top: 0.1em; /* Etwas Abstand über dem Button – trennt ihn vom vorherigen Absatz */
	}
	
	.mehrlink {
	  display: inline-block;        /* Verhält sich wie ein Button, aber bleibt innerhalb des Fließtextes */
	  font-size: 0.8em;             /* Kleinere Schriftgröße – wirkt dezent, nicht aufdringlich */
	  color: #05689b;               /* Blau passend zur Überschriftfarbe – optisch konsistent */
	  text-decoration: none;        /* Kein Unterstreichen standardmäßig – wirkt wie ein Button */
	  background: #eee;             /* Heller Hintergrund – dezent sichtbar als Klickfläche */
	  padding: 0.3em 0.75em;        /* Innenabstand: oben/unten, links/rechts – sorgt für Luft um den Text */
	  border-radius: 3px;           /* Leicht abgerundete Ecken – moderner Buttonstil */
	  transition: background 0.2s ease; /* Sanfter Übergang bei Hover – erhöht Benutzerfreundlichkeit */
	}
	
	.mehrlink:hover {
	  background: #ddd;             /* Etwas dunklerer Hintergrund beim Überfahren – visuelles Feedback */
	  text-decoration: underline;   /* Unterstreichung beim Hover – signalisiert Linkcharakter */
	}
	
	/* === 11. Termine === */
	.termine {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}
	
	.termin {
	  margin-bottom: 1em;
	  padding: 0.75em 1em;
	  background: #f3f3f3;            /* Etwas dunkler als #f9f9f9 für besseren Kontrast */
	  border-left: 6px solid #4caf50; /* Gut sichtbare grüne Linie links */
	  border-radius: 4px;
	}
	
	/* Gemeinsame Zeile für Datum und Ort */
	.termin_zeile {
	  display: flex;
	  gap: 0.3em;                 /* Abstand zwischen Datum und Ort */
	  align-items: baseline;    /* Einheitliche Ausrichtung an der Textgrundlinie */
	  flex-wrap: wrap;          /* Optional: Umbruch bei kleinen Bildschirmen */
	}
	
	.termin_datum,
	.termin_ort,
	.termin_beschreibung {
	  font-size: 0.8em;         /* Einheitliche kleinere Schriftgröße */
	  line-height: 1.2;
	  color: #000;
	}
	
	.termin_datum {
	  font-weight: bold;
	  color: #05689b;           /* Blau hervorgehoben für Fokus */
	}
	
	.termin_ort {
	  color: #555;              /* Dezentes Grau für den Ort */
	}
	
	.termin_beschreibung {
	  margin-top: 0.4em;        /* Abstand zur Zeile darüber */
	}

@media (max-width: 768px) {
  .inhalt_überschrift {
    font-size: 0.9em; /* z. B. etwas kleiner als am Desktop */
  }

  .inhalt_inhalte {
    font-size: 0.9em; /* optional kleiner, je nach Lesbarkeit */
  }
  
  .inhalt_überschrift_kurz {
	  font-size: 0.9em;       /* Gleiche Größe wie h1 */
}