@font-face {
  font-family: "Montserrat Web";
  src: url("fonts/montserrat-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Web";
  src: url("fonts/montserrat-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif Web";
  src: url("fonts/source-serif-4-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif Web";
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif Web";
  src: url("fonts/source-serif-4-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #C41E3A;
  --secondary: #2E5A3C;
  --text: #202124;
  --text-mittel: #5a5d63;
  --hintergrund: #fff;
  --hellgrau: #f5f4f2;
  --grau: #e2e0dc;
  --schrift-headline: "Montserrat Web", "Segoe UI", Arial, sans-serif;
  --schrift-text: "Source Serif Web", Georgia, serif;
}

* { box-sizing: border-box; }
/* overflow-x:hidden auf beiden - der .vollbild-Trick (100vw) rechnet die Breite der
   Scrollbar selbst mit ein, Prozent-Werte (z.B. die max-width von main) nicht - Chrome/Windows
   reserviert für die Scrollbar echten Platz, dadurch reißt 100vw ein paar Pixel über den
   sichtbaren Bereich hinaus und erzeugt einen minimalen horizontalen Scrollbalken (per
   Live-Test gefunden). Ein paar Pixel Bildrand abzuschneiden fällt bei einem großflächigen
   Foto nicht auf - pragmatischer, robusterer Fix als die Scrollbar-Breite exakt auszurechnen. */
html { overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--schrift-text);
  font-size: 17px;
  color: var(--text);
  background: var(--hintergrund);
  line-height: 1.6;
  hyphens: auto;
}
h1, h2, h3, .kopfzeile-logo, .weiterlesen, .anzeige-label {
  font-family: var(--schrift-headline);
  font-weight: 600;
}
a { color: var(--primary); }
main { max-width: 720px; margin: 0 auto; padding: 0 1.25rem 4rem; }

.kopfzeile {
  padding: 1.1rem 1.25rem;
  border-bottom: 3px solid var(--primary);
}
.kopfzeile-logo {
  font-size: 1.35rem;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.01em;
}

h1 { font-size: 2.1rem; line-height: 1.2; margin: 1.75rem 0 0.6rem; }
h2 {
  font-size: 1.35rem;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.35rem;
  margin-top: 2.75rem;
}
h3 { font-size: 1.12rem; color: var(--secondary); margin-top: 1.75rem; }

/* Vollbreite unabhängig von der max-width des main-Containers (Standard-CSS-Trick: 100vw +
   halbe Viewport-Breite als negativer Rand) - für Cover, Mittelseite und ganzseitige Anzeigen,
   die bewusst mehr Präsenz bekommen sollen als normaler Fließtext-Inhalt (per Nutzer-Feedback
   am echten Live-Content: wirkten vorher klein/lieblos neben den Anzeigen). */
.vollbild { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.vollbild img { width: 100%; display: block; border-radius: 0; }

.cover-bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; }

/* Ab Tablet-Breite: Titelbild, Mittelseite und ganzseitige Anzeigen wirkten auf breiten
   Desktop-Fenstern riesig (Titelbild z.B. 1280x1600px bei 1280px Fensterbreite, mehr als
   doppelt so hoch wie der sichtbare Bildschirm, bevor überhaupt Inhalt zu sehen ist - auf
   schmalen Mobil-Breiten fällt das kaum auf, deshalb hier per Media Query nur ab 700px).
   Titelbild bleibt object-fit:cover (bewusst zugeschnittenes Hero-Bild, kein Fließtext-Risiko).
   Mittelseite/ganzseitige Anzeige dagegen object-fit:contain statt cover - eine bezahlte Anzeige
   oder eine redaktionelle Bildstrecke darf nicht angeschnitten werden, deshalb Kontrastfarbe als
   Rahmen statt Beschnitt. */
@media (min-width: 700px) {
  .cover-bild { max-height: 65vh; }
  .mittelseite.vollbild, .anzeige-vollseite.vollbild { background: var(--hellgrau); padding: 2rem 0; }
  .mittelseite.vollbild .mittelseite-bild, .anzeige-vollseite.vollbild .anzeige-bild {
    max-height: 80vh; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto;
  }
}

.inhaltsverzeichnis ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.25rem 0; }
.inhaltsverzeichnis a { font-family: var(--schrift-headline); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.inhaltsverzeichnis a:hover { text-decoration: underline; }

.artikel-grid, .ausgaben-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
  margin: 1.25rem 0 2rem;
}
.artikel-karte, .ausgabe-karte {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--grau);
  border-radius: 8px;
  overflow: hidden;
  background: var(--hintergrund);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.artikel-karte:hover, .ausgabe-karte:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.artikel-karte img, .ausgabe-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; display: block; }
.artikel-karte h3, .ausgabe-karte h3 { margin: 0.7rem 0.9rem 0.3rem; font-size: 1.05rem; color: var(--text); }
.artikel-karte p, .ausgabe-karte p { margin: 0 0.9rem 0.7rem; color: var(--text-mittel); font-size: 0.92rem; line-height: 1.45; }
.weiterlesen { display: block; margin: 0 0.9rem 0.9rem; color: var(--primary); font-size: 0.88rem; }

/* ".artikel-bild" explizit dazu, nicht nur "article img": Termine/Kontakt/Werbepartner-
   Sammelseiten landen als inline_bloecke direkt auf der Ausgaben-Seite, NICHT innerhalb eines
   <article> - ein Bild dort (z.B. das Schützenfest-Foto bei den Terminen) hatte ohne diese Zeile
   gar keine Breitenbremse und rannte in voller Pixelgröße (bis 1600px) über die Spalte hinaus,
   auf Mobil genauso wie auf Desktop (per Live-Test mit echtem Content gefunden). */
article img, .artikel-bild img, .mittelseite-bild { max-width: 100%; height: auto; border-radius: 6px; }
.bildunterschrift { font-size: 0.85rem; color: var(--text-mittel); margin-top: 0.35rem; }

.foto-galerie { display: grid; gap: 0.6rem; margin: 1.25rem 0; align-items: start; }
.foto-galerie-2, .foto-galerie-4 { grid-template-columns: 1fr 1fr; }
.foto-galerie-3 { grid-template-columns: 1fr 1fr; }
.foto-galerie-3 figure:last-child { grid-column: span 2; }
/* aspect-ratio statt Prozent-Höhe - in einem CSS-Grid wird ein Grid-Item sonst per Default auf
   die Zeilenhöhe gestreckt (align-items:stretch), was bei "figure" (ohne eigene feste Höhe) zu
   einer zirkulären Bezugsgröße für eine Bild-Prozent-Höhe führt - das Bild wird dann höher als
   die sichtbare Zelle und überdeckt die Bildunterschrift darunter. */
.foto-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.foto-galerie figure { margin: 0; }
.foto-galerie figcaption { font-size: 0.82rem; color: var(--text-mittel); margin-top: 0.3rem; }

/* Nur vertikale Margin (keine Kurzschreibweise "margin: 2rem 0") - "0" für margin-left/right
   würde sonst bei .anzeige-vollseite.vollbild den negativen Vollbild-Rand aus .vollbild
   überschreiben (beide Regeln haben dieselbe Spezifität, es gewinnt die spätere im Quelltext -
   per Live-Test gefunden: die ganzseitige Anzeige blieb mittig eingerückt statt randlos). */
.anzeige { margin-top: 2rem; margin-bottom: 2rem; text-align: center; }
/* Karten-Rahmen nur für halbe/viertel Anzeigen (nicht für "anzeige-vollseite" - die hat ihr
   eigenes Vollbild-Rahmen-Konzept via ".vollbild" weiter oben). Grund: mehrere Werbepartner-
   Anzeigen mit völlig unterschiedlichem Eigen-Design (Rahmen/Hintergrundfarbe bereits im Bild
   selbst) standen bisher ohne jede gemeinsame Klammer direkt untereinander - wirkte wie eine
   zusammenhanglose Sammlung statt ein durchdachter Anzeigenblock. Gleiche Karten-Optik wie
   ".artikel-karte"/".ausgabe-karte" oben, bewusst wiederverwendet statt neu erfunden - das
   verankert die Anzeigen optisch in derselben Design-Sprache wie der Rest der Seite. */
.anzeige-halb, .anzeige-viertel {
  box-sizing: border-box;
  border: 1px solid var(--grau);
  border-radius: 8px;
  background: var(--hintergrund);
  padding: 1rem 1rem 0.85rem;
}
/* Basis-Breitenbremse für JEDES Anzeigenbild, unabhängig vom Kontext: Anzeigen aus
   "*b_werbepartner.md"/anzeige_vollseite-Dateien landen als inline_bloecke direkt auf der
   Ausgaben-Übersichtsseite, NICHT innerhalb von <article> - die dortige Regel "article img {
   max-width: 100% }" greift für sie also nicht. Ohne diese Basis-Regel rendert das Bild in
   seiner vollen Pixelbreite (bis 1600px) und sprengt den ~680px breiten Content-Container mit
   horizontalem Scrollbalken (per Live-Test mit einer echten Anzeige gefunden, nicht vermutet). */
.anzeige-bild { max-width: 100%; height: auto; }
.anzeige-label {
  display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mittel); margin-bottom: 0.4rem; font-weight: 600;
}
/* Anzeige verlinkt auf die Sponsoren-Website (sofern gepflegt, siehe html_renderer.render_anzeige_html)
   - Link soll wie die restliche Karte aussehen, kein Standard-Blau/Unterstrich, nur ein dezenter
   Hover-Hinweis, dass etwas Klickbares dahintersteckt (gleiches Prinzip wie .artikel-karte:hover). */
.anzeige a { display: block; color: inherit; text-decoration: none; }
.anzeige-halb a:hover, .anzeige-viertel a:hover { opacity: 0.88; }
.anzeige-vollseite a:hover .anzeige-bild { opacity: 0.92; }
/* inline-block statt Block-Element: zwei aufeinanderfolgende Viertel-Anzeigen (z.B. aus einer
   "*b_werbepartner.md"-Sammelseite) rutschen dadurch von selbst nebeneinander, ohne dass der
   Renderer beim Bauen wissen muss, welche zwei Anzeigen "gepaart" sind (anders als im Druck-
   Pfad, der das explizit per Nachbarschafts-Analyse berechnet, siehe content_parser.py).
   45% + 45% + 4x1.5% Margin = 96%, bewusst mit 4% Luft statt exakt auf 100% gerechnet - der
   Leerraum zwischen zwei inline-block-Elementen im HTML-Quelltext (selbst ganz ohne
   Zeilenumbruch dazwischen, siehe html_renderer.py) braucht sonst minimal mehr Platz, als eine
   exakte 100%-Rechnung hergibt, und die zweite Anzeige rutscht ungewollt in die nächste Zeile
   um (per Live-Test gefunden, nicht nur vermutet). */
.anzeige-viertel { display: inline-block; width: 45%; margin: 1rem 1.5%; vertical-align: top; }
.anzeige-halb img { max-width: 380px; }
.anzeige-viertel img, .anzeige-halb img { width: 100%; height: auto; border-radius: 6px; }

.zitat {
  font-family: var(--schrift-text);
  font-style: italic;
  border-left: 3px solid var(--primary);
  background: var(--hellgrau);
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  border-radius: 0 4px 4px 0;
}

.beitrags-tabelle { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.beitrags-tabelle th, .beitrags-tabelle td { border: 1px solid var(--grau); padding: 0.5rem 0.7rem; text-align: left; }
.beitrags-tabelle th { background: var(--hellgrau); font-family: var(--schrift-headline); font-weight: 600; }

.grusswort { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.grusswort-bildspalte { flex: 0 0 220px; }
.grusswort-bildspalte img { border-radius: 8px; }
.grusswort-textspalte { flex: 1 1 320px; }
.anrede { font-style: italic; color: var(--secondary); font-size: 1.08rem; margin-bottom: 1.1rem; }
.unterschrift { font-style: italic; margin-top: 1.1rem; }

.breadcrumb { font-size: 0.85rem; color: var(--text-mittel); margin-top: 1.25rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.whatsapp-teilen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0.5rem;
  padding: 0.5rem 1rem;
  background: #25d366;
  color: #fff;
  font-family: var(--schrift-headline);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: 999px;
}
.whatsapp-teilen:hover { background: #1ebe5a; }
.whatsapp-teilen::before { content: "↗"; }

.fusszeile {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-mittel);
  padding: 2.5rem 1.25rem;
  border-top: 1px solid var(--grau);
  margin-top: 3.5rem;
}
.sponsor-credit { margin-top: 0.35rem; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
  .foto-galerie-2, .foto-galerie-3, .foto-galerie-4 { grid-template-columns: 1fr; }
  .foto-galerie-3 figure:last-child { grid-column: span 1; }
  .grusswort-bildspalte { flex: 0 0 100%; max-width: 220px; }
  .anzeige-viertel { width: 100%; margin: 0.75rem 0; }
}