/* ==========================================================================
   Ammersee-Gymnasium Dießen — Theme "amseegym"
   Nachbau der alten Jevelin/WordPress-Seite (amseegym.de, Stand 15.07.2026).
   Alle Kernwerte stammen aus dem Live-CSS der alten Seite:
   - jevelin-dynamic-styles.css  → [dynamic]
   - Inline-Styles der VC-Sektionen (Hero, Headings) → [vc]
   - ICS-Calendar-Plugin (Monatsansicht) → [r34ics]
   Keine externen Ressourcen, keine Frameworks, keine Google Fonts.
   ========================================================================== */

@import url('fonts.css');

/* -------------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Akzentfarbe des alten Themes (Links, aktive Dots, Titel-Hover) */
  --color-brand: #96b8cd;           /* [dynamic] accent/link color */
  --color-brand-100: #e4ecf1;
  --color-brand-50:  #f3f7f9;
  --color-brand-600: #3d6a85;       /* abgedunkelter Ableger für kleine Akzente */

  /* Kern-Textfarben exakt aus dem alten Theme */
  --color-text: #515151;            /* [dynamic] html body color */
  --color-heading: #3f3f3f;         /* [dynamic] styling_headings.color */
  --color-heading-alt: #403f52;     /* [vc] Sektions-Headings Startseite */
  --color-white: #ffffff;

  --color-bg: var(--color-white);
  --color-bg-alt: #f7f7f7;
  --color-border: #e5e5e5;          /* [jevelin_options] content_border */
  --color-link: var(--color-brand); /* [dynamic] link + hover identisch */
  --color-link-hover: var(--color-brand);
  --color-focus: #ffb703;

  /* Header */
  --color-header-bg: #ffffff;
  --color-header-border: rgba(0,0,0,0.08);     /* [dynamic] */
  --color-nav-text: rgba(61,61,61,0.69);       /* [dynamic] header_nav_color */
  --color-nav-text-hover: rgba(61,61,61,0.80); /* [dynamic] header_nav_hover_color */
  --color-dropdown-bg: #96b8cd;                /* [header-builder] dropdown bg */
  --color-dropdown-text: #ffffff;
  --color-mobile-nav-bg: #232323;              /* [dynamic] mobile menu background */
  --color-mobile-nav-border: #303030;
  --color-mobile-nav-text: #ffffff;

  /* Footer ("MainPage footer": 3 Spalten auf #F5F5F5, 80px Padding) */
  --color-footer-bg: #f5f5f5;
  --color-footer-text: #515151;
  --color-footer-heading: #3f3f3f;
  --color-footer-link-muted: #848496;          /* [footer] Info-Links */
  --color-footer-link-muted-hover: #515164;

  /* Sekundär-/Ghost-Buttons */
  --color-btn-ghost-bg: #f2f2f2;
  --color-btn-ghost-bg-hover: #e5e5e5;
  --color-btn-ghost-text: #6b6b6b;

  /* Neutrale Grautöne */
  --color-gray-900: #262626;
  --color-gray-700: #4a4a4a;
  --color-gray-500: #6b6b6b;
  --color-gray-300: #cfcfcf;
  --color-gray-100: #f0f0f0;

  /* Fonts: die alte Seite nutzt durchgehend Raleway ([dynamic]) */
  --font-sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container-width: 1170px;        /* Bootstrap-Container des alten Themes */
  --radius-sm: 3px;
  --radius-md: 6px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* -------------------------------------------------------------------------
   2. Reset & Grundlagen
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 14px;                  /* [dynamic] html body font-size */
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;                 /* [dynamic] headings weight */
  line-height: 1.3;
  color: var(--color-heading);
  text-wrap: balance;
}
/* Größen 1:1 aus dem Customizer-Output des alten Themes */
h1 { font-size: 30px; }
h2 { font-size: 24px; margin-top: var(--space-7); margin-bottom: var(--space-4); }
h3 { font-size: 21px; margin-top: var(--space-6); margin-bottom: var(--space-3); }
h4 { font-size: 18px; margin-top: var(--space-5); margin-bottom: var(--space-2); }
h5 { font-size: 16px; margin-top: var(--space-4); margin-bottom: var(--space-2); }
h6 { font-size: 14px; margin-top: var(--space-4); margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-4); }
ul, ol { padding-left: 1.25em; margin-bottom: var(--space-4); }
li + li { margin-top: 0.35em; }

a {
  color: var(--color-link);
  text-decoration: none;            /* wie im alten Theme: Links ohne Unterstrich */
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }

strong, b { font-weight: 700; }

figure { margin: var(--space-5) 0; }
figcaption {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-top: var(--space-2);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
th { font-weight: 700; color: var(--color-heading); }

blockquote {
  border-left: 4px solid var(--color-brand);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-5) 0;
  color: var(--color-heading);
  background: var(--color-brand-50);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

/* -------------------------------------------------------------------------
   3. Barrierefreiheit / Utilities
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  background: var(--color-heading);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition-fast);
  font-weight: 700;
}
.skip-link:focus {
  top: var(--space-3);
  color: var(--color-white);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  padding: 0.7em 1.3em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.btn-primary { background: var(--color-brand); color: var(--color-white); }
.btn-primary:hover { background: var(--color-brand-600); color: var(--color-white); text-decoration: none; }
.btn-ghost { background: var(--color-btn-ghost-bg); color: var(--color-btn-ghost-text); }
.btn-ghost:hover { background: var(--color-btn-ghost-bg-hover); color: var(--color-heading); text-decoration: none; }

/* display:inline-block überschreibt das globale `svg { display:block }` —
   sonst rutschen Icons hinter Links (z. B. externe Links im Dropdown) in
   die nächste Zeile. */
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -0.125em; }
.icon-lg { width: 1.5rem; height: 1.5rem; }

/* -------------------------------------------------------------------------
   4. Header & Navigation — zentriertes Layout wie das alte
      Jevelin-Header-Builder-"layout3": Logo oben, Navigation darunter.
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
}

/* ---- Sticky Header (Schalter: sticky_header in amseegym.yaml) ----------
   Header bleibt oben stehen; beim Scrollen verdichtet er sich leicht und
   bekommt einen Schatten (Klasse .is-scrolled via js/main.js). ----------- */
.sticky-header .site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  transition: box-shadow var(--transition-base);
}
.sticky-header .site-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}
/* Verdichtungs-Animation NUR auf Desktop: auf Mobil dürfen die Menülinks
   keine height/line-height-Transition haben (sonst kurzes "Wachsen" beim
   Scroll-Reflow der Adressleiste). */
@media (min-width: 992px) {
  /* Verdichtung betrifft NUR die oberste Menüzeile — Dropdown-Einträge sind
     ebenfalls .main-nav__link und dürfen beim Scrollen nicht mitwachsen! */
  .sticky-header .site-logo img,
  .sticky-header .header-logo-row,
  .sticky-header .main-nav__list > .main-nav__item > .main-nav__link { transition: height var(--transition-base), padding var(--transition-base), line-height var(--transition-base); }
  .sticky-header .site-header.is-scrolled .site-logo img { height: 38px; }
  .sticky-header .site-header.is-scrolled .header-logo-row { padding-block: var(--space-2) 0; }
  .sticky-header .site-header.is-scrolled .main-nav__list > .main-nav__item > .main-nav__link { line-height: 46px; }
}
/* Anker-Sprünge (z. B. /#termine) landen nicht unter dem fixierten Band */
html:has(body.sticky-header) { scroll-padding-top: 165px; }
@media (max-width: 991px) {
  html:has(body.sticky-header) { scroll-padding-top: 96px; }
}

.header-logo-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;         /* Logo mittig — auch mobil */
  padding-block: var(--space-4) var(--space-2);
}
/* Burger-Button rechts, ohne das zentrierte Logo zu verschieben */
.header-logo-row .nav-toggle {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 992px) {
  .header-logo-row { padding-block: var(--space-5) 0; }
}

.site-logo { display: block; }
.site-logo img { height: 54px; width: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-nav-text);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--color-nav-text-hover); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.header-nav-row { position: relative; }

.main-nav { display: none; }
/* globale li+li-Abstände gelten nicht im Menü (führten zu vertikalem Versatz) */
.main-nav li + li { margin-top: 0; }
.main-nav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-mobile-nav-bg);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);   /* dvh: stabil trotz ein-/ausklappender Browser-Leiste */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;      /* Scroll-Impuls bleibt im Menü, greift nicht auf die Seite durch */
  z-index: 100;
}
/* Seite sperren, solange das Menü offen ist — verhindert das Reflowen des
   Inhalts hinter dem Menü (u. a. die "Items werden höher"-Beobachtung auf
   Mobilgeräten mit ein-/ausklappender Adressleiste). */
body.nav-open { overflow: hidden; }

.main-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-5);
}
/* Mobil: Link und Ausklapp-Chevron in EINER Zeile (li als Flex-Zeile,
   das Untermenü bricht als volle Breite darunter um) */
.main-nav__item {
  border-top: 1px solid var(--color-mobile-nav-border);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.main-nav__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 9px var(--space-2);
  color: var(--color-mobile-nav-text);
  font-weight: 600;
  text-decoration: none;
}
.main-nav__link:hover { color: var(--color-brand); text-decoration: none; }
.main-nav__link[aria-current="page"] { color: var(--color-brand); }

.main-nav__toggle {
  background: none;
  border: none;
  flex: 0 0 auto;
  padding: 8px var(--space-3);
  cursor: pointer;
  color: var(--color-mobile-nav-text);
}
.main-nav__toggle .icon { transition: transform var(--transition-fast); }
.main-nav__item.is-open > .main-nav__toggle .icon { transform: rotate(180deg); }

.main-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-4);
  display: none;
  flex-basis: 100%;   /* Untermenü bricht unter Link+Chevron um */
}
.main-nav__item.is-open > .main-nav__submenu { display: block; }
.main-nav__submenu a {
  display: block;
  padding: var(--space-2);
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-weight: 500;
}
.main-nav__submenu a:hover { color: var(--color-white); text-decoration: none; }

@media (min-width: 992px) {
  .nav-toggle { display: none; }

  .main-nav {
    display: block !important;
    position: static;
    background: transparent;
    max-height: none;
    overflow: visible;
  }

  .main-nav__list {
    display: flex;
    align-items: stretch;
    justify-content: center;   /* Navigation zentriert wie im alten Header */
    gap: 0;
    padding: 0;
  }
  .main-nav__item {
    border-top: none;
    display: flex;
    align-items: center;
  }
  .main-nav__link {
    padding: 0 18px;
    line-height: 60px;          /* [dynamic] nav row height (70px inkl. Logo-Abstand) */
    color: var(--color-nav-text);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14px;            /* [dynamic] .sh-nav > li > a */
  }
  .main-nav__link:hover { color: var(--color-nav-text-hover); background: transparent; text-decoration: none; }
  .main-nav__link[aria-current="page"] { color: var(--color-nav-text-hover); }

  /* Chevron neben Elternpunkten, wie im alten Menü */
  .main-nav__toggle {
    display: inline-flex;
    align-items: center;
    color: var(--color-nav-text);
    padding: 0;
    margin: 0 0 0 -8px;
    pointer-events: none;       /* Desktop: hover öffnet; Button nur Deko */
  }
  .main-nav__toggle .icon { width: 0.9em; height: 0.9em; }

  .main-nav__item.has-children { position: relative; }
  /* Nachlauf beim Verlassen: Das Untermenü bleibt 0,05 s stehen, damit man beim
     Hinsteuern nicht "danebenfährt" — vor allem beim seitlichen Wechsel in die
     vierte Ebene. Über visibility/opacity gelöst statt über display, weil
     display nicht animierbar ist und keine Verzögerung kennt.
     Wichtig: KEIN pointer-events: none im Ruhezustand — sonst gingen die
     Mausereignisse während der Nachlaufzeit durch das Menü hindurch und ein
     Zurückfahren würde es gar nicht erst wieder öffnen. Das Abschirmen
     übernimmt visibility: hidden, das erst am Ende der Verzögerung greift. */
  .main-nav__item.has-children:hover > .main-nav__submenu,
  .main-nav__item.has-children:focus-within > .main-nav__submenu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease 0s, visibility 0s linear 0s;   /* öffnet sofort */
  }
  .main-nav__submenu {
    display: block;
    opacity: 0;
    visibility: hidden;
    /* 0,05 s stehen lassen, dann in 0,15 s ausblenden */
    transition: opacity 0.15s ease 0.05s, visibility 0s linear 0.2s;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--color-dropdown-bg);
    border: none;
    box-shadow: var(--shadow-md);
    padding: var(--space-2) 0;
    z-index: 50;
  }
  /* verschachtelte Untermenüs klappen seitlich aus */
  .main-nav__submenu .main-nav__item.has-children > .main-nav__submenu {
    top: 0;
    left: 100%;
  }
  .main-nav__submenu .main-nav__item { display: block; }
  .main-nav__submenu a {
    color: var(--color-dropdown-text);
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
  }
  .main-nav__submenu a:hover { background: rgba(255,255,255,0.18); color: var(--color-white); text-decoration: none; }
  .main-nav__submenu .main-nav__toggle { color: rgba(255,255,255,0.85); margin: 0; padding: 4px; position: absolute; right: 8px; top: 4px; }
}

/* Reduzierte Bewegung: Nachlaufzeit bleibt (sie ist Bedienkomfort, keine
   Animation), aber ohne Ein-/Ausblenden — das Menü springt nach 0,05 s weg. */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .main-nav__submenu {
    transition: opacity 0s linear 0.05s, visibility 0s linear 0.05s;
  }
  .main-nav__item.has-children:hover > .main-nav__submenu,
  .main-nav__item.has-children:focus-within > .main-nav__submenu {
    transition: opacity 0s, visibility 0s;
  }
}

/* -------------------------------------------------------------------------
   5. Hero (Startseite) — Nachbau der alten VC-Sektion:
      Steg-Foto, "AMMERSEE / GYMNASIUM" (Raleway 72px/900, weiß),
      "Die Schule am See" (600, letter-spacing 10px), Squiggle, weißes Logo.
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #9db6c6;
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;   /* wie die alte Seite: viel Himmel, Steg im unteren Drittel */
}
.hero__bg--mobile { display: none; }

.hero__content {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;   /* alte VC-Spalten col-sm-8 / col-sm-4 */
  gap: var(--space-6);
  padding-block: 122px 385px;       /* [vc] 100px+300px Padding + Empty-Spaces */
}

/* Der alte Hero-Text sitzt ~135px vom Container-Rand eingerückt
   (verschachtelte VC-Container); gemessen an der Live-Seite. */
@media (min-width: 1025px) {
  .hero__text { padding-left: 135px; }
}

.hero__title {
  font-family: var(--font-heading);
  font-size: 72px;              /* [vc] #heading-rCa5z2jShN */
  line-height: 70px;
  font-weight: 900;
  color: var(--color-white);
  margin: 0 0 30px;
}
.hero__title span { display: block; }

.hero__subtitle {
  font-size: 18px;              /* [vc] size-m */
  font-weight: 600;             /* [vc] #heading-wdlJovhq7Q */
  letter-spacing: 10px;
  color: var(--color-white);
  margin: 0 0 30px;
}

.hero__squiggle { width: 155px; height: 11px; }

.hero__mark { justify-self: start; padding-top: 6px; }

/* Parallax: Foto, Text und Logo scrollen unterschiedlich schnell und geben
   dem Hero Tiefe. Umgesetzt mit scroll-getriebenen Animationen — die laufen
   im Compositor (flüssig, kein Haupt-Thread) und brauchen keine Zeile JS.
   Browser ohne Unterstützung zeigen den Hero unverändert statisch; deshalb
   steht auch das Bild-Übermaß im @supports-Block (sonst wäre dort nur der
   Bildausschnitt verschoben, ohne dass sich etwas bewegt).
   Aus: bei prefers-reduced-motion (Parallax kann Schwindel auslösen) und
   auf Handys, wo der Hero fast den ganzen Schirm füllt. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
    /* Das Foto (2560×1707) ist relativ höher als der Hero-Rahmen: object-fit
       schneidet ohnehin rund 100 px oben/unten ab. Wir wandern durch diesen
       vorhandenen Ausschnitt, statt das Bild zu vergrößern — dadurch bleibt
       der Maßstab exakt wie bisher und es kann per Definition keine leere
       Kante entstehen (cover deckt den Rahmen immer vollständig ab). */
    .hero__bg { animation: hero-bg-parallax linear both; }
    .hero__text { animation: hero-text-parallax linear both; }
    .hero__mark { animation: hero-mark-parallax linear both; }

    .hero__bg,
    .hero__text,
    .hero__mark {
      /* Bewusst scroll(root) statt view(): .hero hat overflow: hidden und wäre
         damit selbst ein Scroll-Container — eine View-Timeline bezöge sich auf
         diesen nie scrollenden Bereich und stünde still. Die Strecke einer
         Bildschirmhöhe deckt den Hero ab (er ist niedriger) und passt sich
         von selbst an, statt an eine feste Pixelhöhe gebunden zu sein. */
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

/* Tiefenwirkung: Der Hintergrund bleibt zurück, der Vordergrund zieht davon.
   Das Foto startet bei 12 % — dem bisherigen Bildausschnitt, der Hero sieht
   bei Scrollposition 0 also unverändert aus — und wandert Richtung 0 %:
   dadurch rutscht das Bild gegenüber der Seite nach unten und hinkt nach. */
@keyframes hero-bg-parallax   { from { object-position: 50% 12%; } to { object-position: 50% 0%; } }
@keyframes hero-text-parallax { from { transform: translateY(0); }   to { transform: translateY(-58px); } }
@keyframes hero-mark-parallax { from { transform: translateY(0); }   to { transform: translateY(-92px); } }

@media (max-width: 1024px) {
  .hero__title { font-size: 46px; line-height: 1.05; }  /* [vc] mobile override */
}
@media (max-width: 800px) {
  .hero__bg--desktop { display: none; }
  .hero__bg--mobile { display: block; object-position: 50% 100%; }
  .hero__content { grid-template-columns: 1fr; padding-block: 170px 80px; }
  /* wie alt: weißes Logo unterhalb des Texts (eigene "Spalte" im Stack) */
  .hero__mark { padding-top: 70px; }
  .hero__subtitle { letter-spacing: 6px; }
}

/* -------------------------------------------------------------------------
   6. Startseiten-Sektionen (Amseeticker, Termine)
   ------------------------------------------------------------------------- */
.home-section { padding-block: 70px; }

.home-section__title {
  font-size: 37px;              /* [vc] Sektions-Headings */
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-heading-alt);
  text-align: center;
  margin: 0 0 var(--space-7);
}
@media (max-width: 1024px) {
  .home-section__title { font-size: 30px; }
}

/* ---- Amseeticker-Carousel (3 Karten pro Seite, Punkte darunter) ---- */
.ticker-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 3);
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
.ticker-track::-webkit-scrollbar { display: none; }
.ticker-track > * { scroll-snap-align: start; }

@media (max-width: 960px) {
  .ticker-track { grid-auto-columns: calc((100% - 30px) / 2); }
}
@media (max-width: 640px) {
  .ticker-track { grid-auto-columns: 100%; }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-6);
}
.carousel-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: #cccccc;
  cursor: pointer;
  padding: 0;
}
.carousel-dot.is-active { background: var(--color-brand); }  /* [dynamic] slick-dots */

/* -------------------------------------------------------------------------
   7. Beitrags-Karten (Jevelin-Blog-Cards)
   ------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  height: 100%;
}
.post-card__media {
  display: block;
  aspect-ratio: 16/9;           /* [jevelin] ratio-container 56% */
  overflow: hidden;
  background: var(--color-gray-100);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body {
  padding: 32px 42px 38px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card__meta {
  font-size: 12px;
  color: var(--color-gray-500);
  margin: 0 0 var(--space-2);
}
.post-card__meta .post-card__author { color: var(--color-gray-700); }
.post-card__meta .post-card__date { margin-left: 10px; }
.post-card__title { font-size: 24px; line-height: 1.3; margin: 0 0 var(--space-3); }
.post-card__title a { color: var(--color-heading-alt); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:hover { color: var(--color-brand); }   /* [dynamic] post-title hover */
.post-card__excerpt { color: var(--color-text); font-size: 14px; margin: 0 0 var(--space-4); }
.post-card__tags {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   8. Termine-Monatskalender (Nachbau der ICS-Calendar-Monatsansicht)
   ------------------------------------------------------------------------- */
.kalender__select-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}
.kalender__select {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.kalender__monat { display: none; }
.kalender__monat.is-active { display: block; }

.kalender__monat-label {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

.kalender__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
  background: var(--color-white);
}
.kalender__grid th {
  background: var(--color-gray-100);          /* [r34ics] Kopfzeile */
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-700);
  text-align: center;
  padding: 9px 4px;
}
.kalender__dow-kurz { display: none; }

.kalender__grid td {
  border: 1px solid var(--color-border);
  vertical-align: top;
  padding: 6px 8px 10px;
  height: 88px;
}
.kalender__grid td.pad { background: var(--color-bg-alt); }
.kalender__grid td.is-today { background: #f4f8fb; }

.kalender__tag {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}
.kalender__tag-voll { display: none; }   /* nur in der mobilen Agenda sichtbar */
.kalender__grid td.is-today .kalender__tag { color: var(--color-brand-600); }

.kalender__events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kalender__events li + li { margin-top: 6px; }

.kalender__event { font-size: 12px; line-height: 1.45; }
.kalender__event-zeit {
  display: block;
  font-weight: 700;
  color: var(--color-heading);
}
.kalender__event-title { display: block; color: var(--color-text); overflow-wrap: break-word; }

/* Ganztägige Einträge: "GANZTÄGIG"-Label wie im alten Kalender */
.kalender__event-allday {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}
.kalender__event.is-allday .kalender__event-title { font-weight: 700; color: var(--color-heading); }

/* Nur MEHRtägige Einträge werden zum durchlaufenden grauen Balken */
.kalender__event.is-multi {
  background: #7d7d7d;
  color: var(--color-white);
  padding: 4px 8px;
  border-radius: 2px;
}
.kalender__event.is-multi .kalender__event-title { color: var(--color-white); font-weight: 600; }
.kalender__event.is-multi .kalender__event-allday { color: rgba(255,255,255,0.85); }
/* Mehrtägige Balken laufen optisch durch die Zellen durch; auf den
   Fortsetzungs-Segmenten (mid/last) versteckt das Raster Label + Titel
   (Titel steht nur am ersten Tag) — die mobile Agenda zeigt beides. */
.kalender__event.is-multi-first { border-radius: 2px 0 0 2px; margin-right: -9px; }
.kalender__event.is-multi-mid   { border-radius: 0; margin-inline: -9px; min-height: 24px; }
.kalender__event.is-multi-last  { border-radius: 0 2px 2px 0; margin-left: -9px; min-height: 24px; }
.kalender__event.is-multi-mid > span,
.kalender__event.is-multi-last > span { display: none; }

/* Mobil: Agenda-Ansicht statt Monatsraster (wie das alte ICS-Calendar-Plugin
   auf Phones) — nur Tage MIT Terminen, volles Datum als Überschrift. Kein
   Quetschen von "Ganztägig" & Co. in schmale Spalten. */
@media (max-width: 800px) {
  .kalender__grid, .kalender__grid tbody, .kalender__grid tr { display: block; border: none; }
  .kalender__grid thead { display: none; }
  .kalender__grid td { display: none; }
  .kalender__grid td.has-events {
    display: block;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px 14px;
    margin-bottom: 10px;
    background: var(--color-white);
  }
  .kalender__grid td.is-today { background: #f4f8fb; }
  .kalender__tag { text-align: left; margin-bottom: 8px; }
  .kalender__tag-nr { display: none; }
  .kalender__tag-voll {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-brand-600);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
  }
  .kalender__event { font-size: 13px; }
  .kalender__events li + li { margin-top: 8px; }
  /* Mehrtägige Termine: mobil normale Kacheln mit sichtbarem Titel an
     JEDEM Tag (kein durchlaufender Balken, kein Zellen-Bleed) */
  .kalender__event.is-multi-first,
  .kalender__event.is-multi-mid,
  .kalender__event.is-multi-last { margin-inline: 0; border-radius: 2px; min-height: 0; }
  .kalender__event.is-multi-mid > span,
  .kalender__event.is-multi-last > span { display: block; }
  .kalender__monat-label { font-size: 15px; }
}

/* ---- Terminliste auf /termine (einfaches Listen-Layout) ---- */
.termine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.termine-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.termine-item__date {
  flex: 0 0 auto;
  width: 64px;
  text-align: center;
  background: var(--color-brand);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 0;
}
.termine-item__date .day { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.termine-item__date .month { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.termine-item__body { flex: 1; min-width: 0; }
.termine-item__title { font-weight: 700; color: var(--color-heading); margin: 0; }
.termine-item__meta { font-size: 0.875rem; color: var(--color-gray-500); display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 2px 0 0; }
.termine-item__meta span { display: inline-flex; align-items: center; gap: 4px; }

.termine-month + .termine-month { margin-top: var(--space-7); }
.termine-month__title {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  color: var(--color-heading);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------------------
   9. Titelleiste + Seiteninhalt (Unterseiten)
   ------------------------------------------------------------------------- */
.titlebar { background: transparent; }
.titlebar__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-6) var(--space-5);
}
.titlebar__title { font-size: 26px; margin: 0; }
/* Signatur der Designsprache "Am See": Wellen-Ornament unter dem Seitentitel
   (Echo des Hero-Squiggles und der Wellen im ASG-Logo). */
.titlebar__wave {
  display: block;
  color: var(--color-brand);
  margin-top: 10px;
}

.breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--color-gray-500);
}
/* globale li+li-Abstände gelten hier nicht (führten zu vertikalem Versatz
   des ersten Eintrags gegenüber den restlichen Crumbs) */
.breadcrumbs li + li { margin-top: 0; }
.breadcrumbs li:not(:last-child)::after { content: '>'; margin-left: 0.5em; color: var(--color-gray-300); }
.breadcrumbs a { color: var(--color-gray-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-brand); }

.page-main { padding-block: var(--space-4) var(--space-8); }

/* -------------------------------------------------------------------------
   10. Downloads — Aufklapp-Rubriken (native <details>) + Datei-Zeilen
   ------------------------------------------------------------------------- */
.dl-rubrik {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.dl-rubrik[open] { border-color: var(--color-brand); }

.dl-rubrik summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;              /* Standard-Dreieck ausblenden */
  font-weight: 700;
  font-size: 16px;
  color: var(--color-heading);
  user-select: none;
  transition: background-color var(--transition-fast);
}
.dl-rubrik summary::-webkit-details-marker { display: none; }
.dl-rubrik summary:hover { background: var(--color-brand-50); }
.dl-rubrik[open] summary { border-bottom: 1px solid var(--color-border); background: var(--color-brand-50); }

.dl-rubrik__titel { flex: 1; }
.dl-rubrik__anzahl {
  background: var(--color-brand);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
}
.dl-rubrik__chevron { display: inline-flex; color: var(--color-gray-500); transition: transform var(--transition-base); }
.dl-rubrik[open] .dl-rubrik__chevron { transform: rotate(180deg); }

.dl-rubrik__intro {
  padding: 12px 18px 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-500);
}

.dl-liste { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dl-liste li + li { margin-top: 0; }

.dl-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: var(--color-heading);
  transition: background-color var(--transition-fast);
}
.dl-item:hover { background: var(--color-brand-50); color: var(--color-heading); }

.dl-item__icon { color: var(--color-brand-600); flex-shrink: 0; }
.dl-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dl-item__titel { font-weight: 600; font-size: 14px; line-height: 1.4; overflow-wrap: break-word; }
.dl-item__beschreibung { font-size: 12.5px; color: var(--color-gray-500); line-height: 1.5; }
.dl-item__info { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.dl-item__format { font-size: 11px; letter-spacing: 0.04em; color: var(--color-gray-500); white-space: nowrap; }
.dl-item__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-brand-100);
  color: var(--color-brand-600);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dl-item:hover .dl-item__action { background: var(--color-brand); color: var(--color-white); }

@media (max-width: 560px) {
  .dl-item__format { display: none; }
}

/* -------------------------------------------------------------------------
   11. Pagination
   ------------------------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); list-style: none; padding: 0; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-gray-700);
  font-weight: 700;
}
.pagination a:hover { background: var(--color-brand-50); text-decoration: none; }
.pagination .is-current { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* -------------------------------------------------------------------------
   12. Footer — 3 Spalten auf #F5F5F5 wie der alte "MainPage footer"
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  margin-top: var(--space-9);
}

.footer-cols {
  padding-block: 80px;          /* [footer] vc_custom padding */
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }

.footer-col h3 {
  font-family: var(--font-heading);
  color: var(--color-footer-heading);
  font-size: 20px;              /* [footer] heading size/weight */
  font-weight: 600;
  margin: 0 0 30px;
}
.footer-col address { font-style: normal; line-height: 1.9; }
.footer-col address a { color: var(--color-footer-text); }
.footer-col address a:hover { color: var(--color-brand); }

.footer-info-links { list-style: none; margin: 0; padding: 0; }
.footer-info-links li + li { margin-top: 13px; }
.footer-info-links a {
  color: var(--color-footer-link-muted);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}
.footer-info-links a:hover { color: var(--color-footer-link-muted-hover); text-decoration: none; }

/* -------------------------------------------------------------------------
   12b. Formulare (Grav Form-Plugin, z. B. /wifi)
   ------------------------------------------------------------------------- */
.page-form {
  max-width: 620px;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.page-form form > div { margin-bottom: var(--space-4); }
.page-form label {
  display: block;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 4px;
}
.page-form label.inline { display: inline; font-weight: 400; color: var(--color-text); margin: 0 0 0 6px; }
/* Alle Eingabetypen teilen eine Optik (nicht nur text/email) */
.page-form input[type="text"],
.page-form input[type="email"],
.page-form input[type="tel"],
.page-form input[type="url"],
.page-form input[type="password"],
.page-form input[type="date"],
.page-form input[type="time"],
.page-form input[type="number"],
.page-form textarea,
.page-form select {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.page-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.page-form textarea:focus,
.page-form select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(150, 184, 205, 0.35);
}
/* Schmale Feldtypen: Die Breite folgt dem Inhalt, nicht der Formularbreite.
   Datum/Uhrzeit/Zahl sind kurz, Telefonnummern mittellang; Auswahlfelder
   so breit wie ihre längste Option. In Spalten (s. u.) füllen alle Felder
   ihre Spalte. */
.page-form input[type="date"],
.page-form input[type="time"] { width: auto; min-width: 170px; }
.page-form input[type="number"] { max-width: 200px; }
.page-form input[type="tel"] { max-width: 300px; }
.page-form select { width: auto; min-width: 230px; max-width: 100%; }
.page-form .form-columns input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.page-form .form-columns select { width: 100%; max-width: none; min-width: 0; }
.page-form input[type="checkbox"],
.page-form input[type="radio"] { accent-color: var(--color-brand); }
.page-form .form-input-wrapper { margin-bottom: var(--space-3); }
.page-form .required { color: #b3261e; margin-left: 2px; }
/* Abschnitts-Überschriften im Formular (display-Feld mit "### …"):
   gleiche Rolle wie H3 im Fließtext, mit feiner Trennlinie darüber */
.page-form h3 {
  font-size: 17px;
  color: var(--color-heading);
  margin: var(--space-6) 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.page-form form > div:first-child h3 { margin-top: 0; padding-top: 0; border-top: none; }
/* Hilfetexte: das Form-Plugin liefert sie nur als Hover-Tooltip im Label —
   auf Touch-Geräten unsichtbar. main.js (initFormHilfe) hängt den Text als
   sichtbare Zeile .feld-hilfe ans Label-Ende (nach dem Pflicht-Sternchen). */
.page-form .feld-hilfe {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-gray-500);
  margin: 1px 0 3px;
}
/* Datei-Uploads (Dropzone) im Am-See-Look */
.page-form .dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  min-height: 88px;
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.page-form .dropzone:hover,
.page-form .dropzone.dz-drag-hover {
  border-color: var(--color-brand);
  background: var(--color-brand-50);
}
.page-form .dropzone .dz-message {
  color: var(--color-gray-500);
  font-size: 13.5px;
  text-align: center;
  margin: var(--space-3) 0;
}
/* Dropzone rendert den Hinweis als <button> — ohne Zurücksetzen sieht er wie
   ein grauer Systemknopf aus. Stattdessen: Icon über kurzem Text. */
.page-form .dropzone .dz-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.page-form .dropzone:hover .dz-button { color: var(--color-brand-600); }
.page-form .dropzone .dz-button::before {
  content: '';
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15V4M12 4l-4 4M12 4l4 4M4 15v3a2 2 0 002 2h12a2 2 0 002-2v-3" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15V4M12 4l-4 4M12 4l4 4M4 15v3a2 2 0 002 2h12a2 2 0 002-2v-3" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') center/contain no-repeat;
}
.page-form button[type="submit"],
.page-form input[type="submit"] {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-brand);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 26px;
  cursor: pointer;
  margin-top: var(--space-3);
}
.page-form button[type="submit"]:hover,
.page-form input[type="submit"]:hover { background: var(--color-brand-600); }

/* -------------------------------------------------------------------------
   12c. "Seite bearbeiten"-Button (nur für angemeldete Admins, via JS)
   ------------------------------------------------------------------------- */
.edit-page-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--color-brand-600);
  color: var(--color-white) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.edit-page-btn:hover { background: var(--color-heading-alt); transform: translateY(-1px); }
.edit-page-btn svg { flex-shrink: 0; }
@media print { .edit-page-btn { display: none; } }

/* -------------------------------------------------------------------------
   13. Alerts / Notices (Grav flash messages)
   ------------------------------------------------------------------------- */
.notices { list-style: none; padding: 0; margin: var(--space-4) 0; }
.notices li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  background: var(--color-brand-50);
  color: var(--color-heading);
  border: 1px solid var(--color-brand);
}
.notices .error { background: #fdecea; color: #7a271a; border-color: #f4b8ae; }

/* -------------------------------------------------------------------------
   14. Content-Designsprache "Am See" (alle Unterseiten)
   Prinzipien: Lesemaß ~76ch für Text, Raleway-Rollen (H2 Anthrazit /
   H3 kompakt / H4 = Tiefblau-Label), Seeblau als einziger Akzent,
   Welle als Signatur (Titelleiste + wellige Link-Unterstreichung bei Hover).
   Referenz und Beispiele: /styleguide
   ------------------------------------------------------------------------- */
/* Bühnen-Layout: alle Unterseiten leben auf einer zentrierten Bühne
   (--stage); Text & Standard-Elemente stehen darin im zentrierten Lesemaß
   (--measure). Breite Elemente (Galerien, Banner-Reihen, Karten-Grids)
   "brechen aus" auf die volle Bühne, bleiben aber zentriert. Alles skaliert
   über max-width automatisch mit der Viewport-Breite. */
:root {
  --stage: 1080px;
  --measure: 800px;
}

.page-main { max-width: var(--stage); margin-inline: auto; }
/* Titelleiste teilt sich die linke Kante mit der Textsäule — Titel und
   Text stehen auf derselben Achse. (+ Container-Padding, das bei
   box-sizing: border-box innerhalb der max-width liegt) */
.titlebar__inner { max-width: calc(var(--measure) + 2 * var(--space-4)); margin-inline: auto; }

/* Elemente direkt in der Bühne (z. B. Artikel-Meta, Beitragsbild,
   Blog-Kartenliste) laufen ebenfalls in der Textsäule */
.page-main > * { max-width: var(--measure); margin-inline: auto; }
.page-main > .content { max-width: none; }

.content {
  font-size: 15px;
  line-height: 1.8;
}
/* Alles im Lesemaß, zentriert — auch Galerien, Banner-Reihen und
   Karten-Grids bleiben in der Textsäule (eine ruhige Spalte pro Seite). */
.content > * { max-width: var(--measure); margin-inline: auto; }

.content img { height: auto; }

/* Überschriften-Rollen im Inhalt */
.content h2 {
  font-size: 22px;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.content h3 { font-size: 17px; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.content h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-600);
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
}
.content > h1:first-child, .content > h2:first-child { margin-top: 0; }

/* Einleitungssatz (erste dicke Zeile) — optional per Klasse */
.lead { font-size: 17px; color: var(--color-gray-500); }

/* Links im Fließtext: feine Unterstreichung, beim Hover wird sie zur Welle */
.content a {
  color: var(--color-brand-600);
  text-decoration: underline;
  text-decoration-color: rgba(150, 184, 205, 0.7);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.content a:hover {
  color: var(--color-brand-600);
  text-decoration-style: wavy;
  text-decoration-color: var(--color-brand);
}

/* Listen: Seeblau-Marker */
.content ul li::marker,
.content ol li::marker { color: var(--color-brand); font-weight: 700; }
.content li + li { margin-top: 0.45em; }

/* Linkliste: Listenpunkte, die NUR aus einem Link bestehen ("- [Titel](url)"),
   werden zu Link-Zeilen im Stil der Download-Liste — mit Pfeil, bei externen
   Zielen zusätzlich mit Extern-Symbol. Teil der Designsprache (/styleguide). */
.content ul > li:has(> a:only-child) {
  list-style: none;
  margin: 0 0 6px calc(-1.25em);   /* Listen-Einzug neutralisieren */
}
.content ul > li:has(> a:only-child) + li:has(> a:only-child) { margin-top: 0; }
.content ul > li:has(> a:only-child) > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.content ul > li:has(> a:only-child) > a:hover {
  background: var(--color-brand-50);
  border-color: var(--color-brand);
  color: var(--color-brand-600);
}
/* Variante mit Beschreibung: Listenpunkt beginnt mit dem Link, danach folgt
   nach einem Zeilenumbruch der erklärende Text ("- [Titel](url)" + zwei
   Leerzeichen am Zeilenende + Beschreibung). Der Zeilenumbruch (<br>) ist
   das Unterscheidungsmerkmal zu normalem Fließtext mit Links. */
.content ul > li:has(> a:first-child):has(> br) {
  list-style: none;
  margin: 0 0 6px calc(-1.25em);
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-gray-500);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.content ul > li:has(> a:first-child):has(> br):hover {
  background: var(--color-brand-50);
  border-color: var(--color-brand);
}
.content ul > li:has(> a:first-child):has(> br) > a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  color: var(--color-heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
}
.content ul > li:has(> a:first-child):has(> br):hover > a { color: var(--color-brand-600); }
.content ul > li:has(> a:first-child):has(> br) > br { display: none; }

/* Pfeil ganz rechts (order 99: hinter Text und Extern-Symbol) */
.content ul > li:has(> a:only-child) > a::after,
.content ul > li:has(> a:first-child):has(> br) > a::after {
  content: '→';
  order: 99;
  margin-left: auto;
  color: var(--color-brand);
  font-weight: 700;
  transition: transform var(--transition-fast);
}
.content ul > li:has(> a:only-child) > a:hover::after,
.content ul > li:has(> a:first-child):has(> br):hover > a::after { transform: translateX(3px); }
/* Extern-Symbol direkt hinter dem Linktext */
.content ul > li:has(> a:only-child) > a[href^="http"]::before,
.content ul > li:has(> a:first-child):has(> br) > a[href^="http"]::before {
  content: '';
  order: 1;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 5h5v5M19 5l-9 9M8 5H6a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1v-2" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 5h5v5M19 5l-9 9M8 5H6a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1v-2" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') center/contain no-repeat;
}

/* Hinweis-/Infobox: Standard-Element für Hinweise, Sprechzeiten, Kontakte */
.content blockquote {
  border-left: 3px solid var(--color-brand);
  background: var(--color-brand-50);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
  font-size: 14px;
}
.content blockquote p { margin-bottom: var(--space-2); }
.content blockquote p:last-child { margin-bottom: 0; }
/* Echte Zitate: Quellenangabe als <cite> in eigener Zeile mit Gedankenstrich */
.content blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: 13px;
  color: var(--color-gray-500);
}
.content blockquote cite::before { content: "\2014\00A0"; }

/* Tabellen: ruhig, mit Nebel-Kopfzeile */
.content table {
  font-size: 14px;
  border: 1px solid var(--color-border);
}
.content th {
  background: var(--color-bg-alt);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-700);
}
.content th, .content td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.content tr:last-child td { border-bottom: none; }

/* Bilder & Bildunterschriften */
.content figure { margin-block: var(--space-5); }
.content figcaption { font-size: 13px; color: var(--color-gray-500); margin-top: var(--space-2); }
.post-figure { margin-block: 0 var(--space-6); }
.post-figure img { max-height: 640px; width: auto; max-width: 100%; }

/* Trennlinie: kurz und Seeblau statt seitenbreit */
.content hr {
  width: 64px;
  margin-block: var(--space-7);
  border: none;
  border-top: 2px solid var(--color-brand);
}

/* ---- Bilder: Galerie-Raster, Solo-Figuren, Lightbox ----
   Markup entsteht serverseitig (amseegym.php): >=2 Bilder in Folge werden
   zum Thumbnail-Raster, einzelne Bilder zur zentrierten Figur. */
.bild-galerie {
  display: grid;
  /* auto-fit statt auto-fill: wenige Bilder füllen die Säule ganz aus
     (keine leeren Spuren rechts), volle Reihen bleiben unverändert */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-block: var(--space-5) var(--space-6);
}
.bild-galerie .galerie-bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
}
.bild-galerie .galerie-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.bild-galerie .galerie-bild:hover img { transform: scale(1.04); opacity: 0.92; }

/* Eingebettete Videos: zentriert wie Solo-Bilder */
.video-solo {
  margin-block: var(--space-5) var(--space-6);
  text-align: center;
}
/* nahtlos "wie eingebettet": kein Hintergrund, keine Rundung, kein Rahmen */
.video-solo video {
  max-width: 100%;
  max-height: 560px;
  background: transparent;
}

.bild-solo {
  margin-block: var(--space-5) var(--space-6);
  text-align: center;
}
.bild-solo .galerie-bild { display: inline-block; cursor: zoom-in; }
.bild-solo img {
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(23, 30, 36, 0.93);
  padding: var(--space-5);
}
.lightbox.is-open { display: flex; }
.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__caption { color: rgba(255,255,255,0.85); font-size: 14px; text-align: center; }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,0.22); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
}

/* Rechtstext zum Aufklappen (z. B. Datenschutzhinweise nach Art. 13 DSGVO im
   Gastschüler-Formular). Wie die Karteikarten ein natives <details>: klappt
   auch ohne JavaScript auf, Tastaturbedienung inklusive. */
.rechtstext {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  margin: var(--space-4) 0;
}
.rechtstext__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading);
  transition: background-color var(--transition-fast);
}
.rechtstext__titel::-webkit-details-marker { display: none; }
.rechtstext__titel:hover { background: var(--color-brand-50); }
/* Pfeil rechts, dreht sich beim Aufklappen */
.rechtstext__titel::after {
  content: '';
  margin-left: auto;
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 6px solid var(--color-gray-500);
  transition: transform var(--transition-base);
}
.rechtstext[open] .rechtstext__titel::after { transform: rotate(180deg); }

.rechtstext__inhalt {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text);
}
.rechtstext__inhalt h4 {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-brand-600);
  margin: var(--space-4) 0 var(--space-2);
}
.rechtstext__inhalt > h4:first-child { margin-top: 0; }
.rechtstext__inhalt p { margin-bottom: var(--space-3); }
.rechtstext__inhalt > :last-child { margin-bottom: 0; }
.rechtstext__stand {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-gray-500);
}

/* Karteikarten (Markup aus amseegym.php, Quelle: [karteikarten]-Abschnitt).
   Frage ist die <summary>, Antwort der aufklappbare Inhalt — funktioniert
   dadurch auch ohne JavaScript. Beispiel: /grundwissenskatalog */
.karteikarten {
  /* margin-inline: auto — sonst überschreibt die Kurzform das Zentrieren
     aus der Bühnen-Regel (.content > *) und der Block hängt links. */
  margin: var(--space-5) auto var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.karteikarten__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}
.karteikarten__alle {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-btn-ghost-text);
  background: var(--color-btn-ghost-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.karteikarten__alle:hover { background: var(--color-brand-50); border-color: var(--color-brand); }

.karteikarte {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.karteikarte[open] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.karteikarte__frage {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--color-heading);
  transition: background-color var(--transition-fast);
}
.karteikarte__frage::-webkit-details-marker { display: none; }
.karteikarte__frage:hover { background: var(--color-brand-50); }
.karteikarte__nr {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-brand-100);
  color: var(--color-heading-alt);
  font-size: 12px;
  font-weight: 700;
}
.karteikarte__vorderseite { flex: 1; min-width: 0; }
.karteikarte__titel { display: block; }
.karteikarte__vorderseite > p { font-weight: 400; margin: var(--space-2) 0 0; }
.karteikarte__vorderseite > :last-child { margin-bottom: 0; }
.karteikarte__vorderseite figure,
.karteikarte__vorderseite .bild-solo { margin: var(--space-3) 0 0; max-width: 100%; }
/* Diagramme auf der Vorderseite werden in der Höhe gedeckelt, damit die
   Karten überschaubar bleiben — sonst füllt ein Schaubild den Bildschirm. */
.karteikarte__vorderseite img {
  width: auto;
  max-width: 100%;
  max-height: 240px;
  height: auto;
  object-fit: contain;
  object-position: left;
}
/* Umdreh-Hinweis: Pfeil dreht sich beim Aufklappen */
.karteikarte__hinweis {
  flex-shrink: 0;
  align-self: center;
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 6px solid var(--color-gray-500);
  transition: transform var(--transition-base);
}
.karteikarte[open] .karteikarte__hinweis { transform: rotate(180deg); }

.karteikarte__antwort {
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 24px + var(--space-3));
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  font-size: 15px;
}
.karteikarte__antwort > :first-child { margin-top: 0; }
.karteikarte__antwort > :last-child { margin-bottom: 0; }
/* Antworten bestehen oft aus vielen kurzen Zeilen (je ein Absatz) —
   engerer Abstand hält sie als Block zusammen. */
.karteikarte__antwort p { margin-bottom: var(--space-2); white-space: pre-line; }
.karteikarte__antwort ol,
.karteikarte__antwort ul { margin-bottom: var(--space-2); }
/* Bilder in Antworten bleiben im Kartenmaß */
.karteikarte__antwort .bild-solo,
.karteikarte__antwort figure { margin: var(--space-3) 0; max-width: 100%; }
.karteikarte__antwort img { max-width: 100%; height: auto; }
@media (max-width: 575px) {
  .karteikarte__antwort { padding-left: var(--space-4); }
}

/* Sprach-Toggle (z. B. Gastschüler DE/EN): Pill-Schalter rechtsbündig */
.sprach-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  margin-bottom: var(--space-4);
}
.sprach-toggle a {
  padding: 4px 14px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.sprach-toggle a:first-child { border-radius: 999px 0 0 999px; }
.sprach-toggle a:last-child { border-radius: 0 999px 999px 0; border-left: none; }
.sprach-toggle a.aktiv {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  font-weight: 600;
}
.sprach-toggle a:not(.aktiv):hover { background: var(--color-brand-50); }

/* Formular-Spalten (type: columns im Formular): Felder nebeneinander */
.form-columns { display: flex; gap: var(--space-4); }
.form-columns .form-column { flex: 1; min-width: 0; }
@media (max-width: 575px) { .form-columns { flex-direction: column; gap: 0; } }

/* Banner-Reihen (verlinkte Bild-Kacheln, Markup aus amseegym.php):
   zentriertes Spalten-Grid wie die wp-block-columns der alten Seite. */
.banner-reihe {
  display: grid;
  /* 1fr statt fester Maximalbreite: auto-fit zählt Spalten nach der
     Mindestbreite — so passen drei Kacheln ins Lesemaß. Die Kachelbreite
     selbst deckelt das max-width auf dem Link (wie vorher 330px). */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: var(--space-5) auto var(--space-6);
}
.banner-reihe a { display: block; max-width: 330px; width: 100%; justify-self: center; }
/* max-height fängt Hochformat-Grafiken (z. B. Logos) ein, ohne Querformat-Banner
   zu beschneiden — object-fit: contain wahrt immer das Seitenverhältnis */
.banner-reihe img { width: 100%; height: auto; max-height: 170px; object-fit: contain; transition: opacity var(--transition-fast); }
.banner-reihe a:hover img { opacity: 0.85; }

/* Unterseiten-Karten für Hub-Seiten (frontmatter: show_children: true) */
.child-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 640px) { .child-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .child-grid { grid-template-columns: repeat(3, 1fr); } }

.child-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  padding-right: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  text-decoration: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.child-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.child-card__title { font-weight: 700; font-size: 15px; color: var(--color-heading); }
.child-card:hover .child-card__title { color: var(--color-brand-600); }
.child-card__summary { font-size: 13px; color: var(--color-gray-500); line-height: 1.6; }
.child-card__arrow {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-brand);
  font-size: 18px;
  transition: transform var(--transition-fast);
}
.child-card:hover .child-card__arrow { transform: translateY(-50%) translateX(3px); }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-4) 0; }
.tag-list a {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: var(--color-brand-50);
  color: var(--color-brand-600);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
}
.tag-list a:hover { background: var(--color-brand-100); text-decoration: none; }

.post-meta { color: var(--color-gray-500); font-size: 13px; margin-bottom: var(--space-5); }
.post-meta__author { color: var(--color-gray-700); }

.empty-state {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-gray-500);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}