/* Mehrseitige Anwendung (kein SPA) — jeder Klick lädt ein neues Dokument,
   Browser reißt den alten Inhalt ab und baut den neuen progressiv auf
   ("Titel baut sich neu auf", #388). Cross-Document View Transitions lassen
   unterstützende Browser weich überblenden statt hart zu wechseln; wo nicht
   unterstützt, einfach normale Navigation wie bisher (progressive
   Verbesserung, kein JS nötig). */
@view-transition {
  navigation: auto;
}

/* Variante „Modern“ — eigenständiges Mini-Designsystem (kein Broadsheet) */
:root {
  --color-bg: #f7f9fa;
  --color-text: #20272c;
  --color-accent: #2a4861;
  --color-accent-600: color-mix(in oklch, #2a4861 85%, black);
  --color-accent-700: color-mix(in oklch, #2a4861 66%, black);
  --color-accent-100: color-mix(in oklch, #2a4861 10%, white);
  --color-accent-200: color-mix(in oklch, #2a4861 22%, white);
  --color-accent-2: #cfe2eb;
  --color-process-yellow: #cfe2eb;
  --color-neutral-100: #e9eef1;
  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-heading-weight: 700;
  --radius-sm: 10px;
  --radius-md: 16px;
  --space-3: 12px;
  --space-4: 16px;
  --shadow-sm: 0 1px 3px rgba(32,39,44,0.08), 0 4px 14px rgba(32,39,44,0.06);
  --shadow-lg: 0 12px 40px rgba(32,39,44,0.28);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-600); }
::selection { background: color-mix(in srgb, var(--color-accent-2) 35%, transparent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1.2 var(--font-body); cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.btn-primary { background: var(--color-accent); color: #f7f9fa; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-secondary { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-accent-100); }
.btn-ghost { background: transparent; color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn:disabled { opacity: .45; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; letter-spacing: .01em; }
.input { width: 100%; box-sizing: border-box; background: #fff; border: 1.5px solid #ccd6dc; border-radius: 12px; padding: 10px 14px; font: 400 15px/1.5 var(--font-body); color: var(--color-text); }
.input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.card { background: #fff; border-radius: var(--radius-md); padding: 24px; }
.elev-sm { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: 26px; padding: 14px 24px; background: var(--color-accent); color: #e7eef3; }
.nav a { color: inherit; text-decoration: none; font-size: 15px; font-weight: 600; opacity: .85; }
.nav a:hover { opacity: 1; color: #fff; }
.nav a[aria-current="page"] { opacity: 1; color: var(--color-accent-2); }
.nav .btn-primary { background: var(--color-accent-2); color: #20303f; }
.nav .btn-primary:hover { background: color-mix(in oklch, var(--color-accent-2) 88%, black); }
.nav .btn-ghost { color: #e7eef3; }
.nav .btn-ghost:hover { background: rgba(255,255,255,0.14); }

/* Responsive Navigation: Desktop-Links ≥640px, Burger darunter.
   Ersetzt die JS-Breakpoint-Umschaltung des Prototyps. */
.nav-desktop { display: flex; align-items: center; gap: 26px; }
.nav-mobile { display: none; align-items: center; gap: 14px; }
.mobile-menu { display: none; }
/* .mobile-menu ist jetzt Kind von .nav (Positionierungskontext fürs Overlay)
   und würde sonst .nav a { color: inherit } erben — helle Nav-Schrift auf
   hellem Overlay-Hintergrund. Eigene Farben statt Nav-Vererbung. */
.mobile-menu a { color: var(--color-text); opacity: 1; }
.mobile-menu a:hover { color: var(--color-accent-600); }
.mobile-menu a[aria-current="page"] { color: var(--color-accent-700); }
@media (max-width: 639px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
  /* Overlay statt In-Flow-Block: verschiebt beim Öffnen weder <main> noch
     triggert Scroll-Anchoring-Sprünge (#386). position:sticky auf .nav
     liefert den Positionierungskontext. */
  .mobile-menu.open {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
  }
}

/* Neuigkeiten: Hero-Bild + Zusatzbilder. Desktop zeigt alle Zusatzbilder als
   Grid darunter; Handy zeigt nur das Hero-Bild mit einem Zähler-Badge —
   Klick öffnet die Lightbox-Galerie mit allen Bildern (Pfeile/Wischgeste
   zum Blättern, siehe app.js). */
.news-hero {
  position: relative;
  margin: 0;
}
.news-hero-badge {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(32,39,44,0.68);
  color: #fff;
  font: 600 12px/1.4 var(--font-body);
  letter-spacing: 0.01em;
  pointer-events: none;
}
.news-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.news-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  border-radius: 10px;
}
@media (max-width: 639px) {
  .news-thumbs { display: none; }
  .news-hero-badge { display: inline-flex; }
}

/* Lightbox-Galerie: Vor/Zurück + Zähler, nur bei >1 Bild eingeblendet (JS).
   Padding maximiert die Bildgröße; auf schmalen ODER kurzen (Quer-)Viewports
   deutlich enger als auf Desktop — zwei Breakpoints statt einem, damit auch
   ein gedrehtes Handy (breit, aber niedrig) den engen Wert bekommt. */
#lightbox { padding: 32px; }
@media (max-width: 639px), (max-height: 500px) {
  #lightbox { padding: 6px; }
}

.lightbox-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.26); }
.lightbox-nav-prev { left: 12px; }
.lightbox-nav-next { right: 12px; }
.lightbox-counter {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font: 600 13px/1.4 var(--font-body);
}

/* „Ältere Beiträge“: standardmäßig nur die ersten 8 sichtbar. */
.news-extra { display: none; }
.news-list.show-all .news-extra { display: block; }