@charset "UTF-8";/* ============================================================
   SCHRIFTEN — lokal gehostet, niemals per CDN (DSGVO)
   Dateien gehören nach fonts/. Fehlen sie, greift der
   Fallback-Stack und die Seite bleibt intakt.
   ============================================================ */
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-400-latin-ext.woff2') format('woff2'); font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-400-latin.woff2') format('woff2'); font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-600-latin-ext.woff2') format('woff2'); font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-600-latin.woff2') format('woff2'); font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-700-latin-ext.woff2') format('woff2'); font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-700-latin.woff2') format('woff2'); font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2'); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-condensed-600-latin.woff2') format('woff2'); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2'); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-condensed-700-latin.woff2') format('woff2'); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-condensed-800-latin-ext.woff2') format('woff2'); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {src: url('https://all-inkl.metropoljournal.com/templates/mj2026/fonts/barlow-condensed-800-latin.woff2') format('woff2'); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   MetropolJournal — Startseite
   Gestaltung: geh-online.eu

   Grundgedanke: Jede Meldung traegt einen Ort. Der Ort ist
   deshalb kein Beiwerk, sondern das Ordnungsprinzip der Seite —
   er steht in einer eigenen Spalte und bildet beim Ueberfliegen
   ein Verzeichnis der Region.

   Ein Farbsystem, nicht zwei: die Rubrikfarbe traegt alles.
   Kein JavaScript
   in der Seite, deshalb laeuft auch das Menue ueber CSS.
   ============================================================ */

:root {
  /* --- Grundfarben --- */
  --tinte:       #101A2B;   /* Text. Kein Schwarz — Marine wirkt gedruckt. */
  --tinte-weich: #55617A;   /* Nebentext, 4.9:1 auf Weiss */
  --blau:        #1D3F7A;   /* Marke */
  --blau-tief:   #101F3D;   /* Kopfbereich */
  --rot:         #D6060E;   /* Nachrichtenfarbe */
  --orange:      #F5A623;   /* nur E-Paper und Fokus */

  --papier:      #FFFFFF;
  --flaeche:     #EEF1F5;   /* Baender zwischen den Abschnitten */
  --flaeche-tief:#E4E9F0;
  --linie:       #D9DFE8;
  --linie-zart:  #E8ECF2;

  /* --- Schrift --- */
  --schrift-titel: 'Barlow Condensed','Oswald','Bahnschrift SemiCondensed','Arial Narrow',sans-serif;
  --schrift-text:  'Barlow','Segoe UI',system-ui,-apple-system,Arial,sans-serif;

  /* Groessen. Der Sprung vom Aufmacher zur Kachel ist der
     wichtigste Wert der Seite — vorher fehlte er ganz. */
  --gr-aufmacher: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  --gr-gross:     clamp(1.55rem, 1.18rem + 1.3vw, 2.05rem);
  --gr-kachel:    1.26rem;
  --gr-liste:     1.12rem;
  --gr-marke:     .82rem;    /* Ortsmarke, Zeiten, Rubriketiketten */

  /* --- Raster --- */
  --breite:   1240px;
  --ortsbahn: 132px;         /* Breite der Ortsspalte */
  --luft:     clamp(26px, 3vw, 40px);

  /* --- Rubrikfarbe --- */
  --akzent:      var(--rot);
  --akzent-hell: #FF6B70;
}

/* Module tragen ihre Rubrikfarbe ueber die Modulklasse — in
   Joomla das Feld "Modulklassen-Suffix". */
[data-rubrik="sport"],    .rubrik-sport    { --akzent: #127A3F; --akzent-hell: #4ADE80; }
[data-rubrik="ratgeber"], .rubrik-ratgeber { --akzent: #0B6E82; --akzent-hell: #2DD4BF; }
[data-rubrik="magazin"], .rubrik-magazin { --akzent: #7B2D8E; --akzent-hell: #C084FC; }
/* Events in Gold. Zwei Werte, weil die Farbe an zwei sehr verschiedenen
   Orten steht:

   --akzent-hell (#C39841) traegt den Strich im blauen Menue. Dort wirkt
   dieses waermere Gold deutlich besser als ein reines Gelb — 3,86:1 gegen
   den Balken, das reicht fuer eine Flaeche.

   --akzent (#896A2E) traegt die Rubrikueberschrift auf Weiss. Es ist
   dasselbe Gold, nur abgedunkelt — Farbton 40 Grad wie #C39841, auf die
   Null genau. #C39841 kaeme auf Weiss auf 2,66:1 und waere nicht lesbar,
   dieses hier auf 5,04:1.

   Die Farbe haengt an der Rubrik, nicht an einer einzelnen Seite: Sie
   gilt damit auch auf allen Event-Unterseiten. */
[data-rubrik="events"], .rubrik-events { --akzent: #896A2E; --akzent-hell: #C39841; }
[data-rubrik="gewinnen"], .rubrik-gewinnen { --akzent: #A81A5B; --akzent-hell: #F472B6; }

/* Start und Lokales hatten beide das Signalrot, Stars und
   Freizeit & Reisen beide das Violett. Durchgerechnet auf groessten
   Mindestabstand: Start bekommt Graphit, Freizeit ein Blau.

   Start ist keine Rubrik, sondern der Weg zurueck — ein neutraler
   Ton sagt genau das. Beere waere ebenso weit entfernt gewesen,
   haette sich aber mit "Gewinnen" gebissen, das direkt darueber in
   der Servicezeile steht. */
[data-rubrik="start"],   .rubrik-start   { --akzent: #3F4A5A; --akzent-hell: #94A3B8; }
[data-rubrik="lokales"], .rubrik-lokales { --akzent: #D6060E; --akzent-hell: #FF6B6B; }
[data-rubrik="reisen"],  .rubrik-reisen  { --akzent: #1D4ED8; --akzent-hell: #7DA2FF; }

/* ---------- Grundregeln ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* Zwei Ringe, nicht einer.
   Gemessen: Das Orange hat auf Weiss 2,03:1 und verfehlt damit die
   Anforderung an nicht-textliche Kontraste (3:1). Auf der blauen
   Leiste ist dasselbe Orange dagegen mit 7,9:1 die beste Wahl. Eine
   einzelne Farbe kann beides nicht leisten — deshalb aussen Orange
   und direkt am Element ein marineblauer Ring, der auf hellem Grund
   traegt. */
/* Das Sprungziel bekommt den Fokus per Skript zugewiesen; ein Rahmen
   um den halben Bildschirm waere dort nur ein Aufblitzen. */
main:focus { outline: none; box-shadow: none; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--tinte);
}

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 22px; }

.nur-mobil { display: none; }

.skip {
  position: absolute; left: -9999px;
  background: #fff; color: var(--blau-tief);
  padding: 12px 20px; z-index: 999; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Die Ortsmarke ----------
   Das Kennzeichen der Seite. Ueberall gleich gesetzt: schmal,
   versal, weit gesperrt, mit einem kurzen Strich in der
   Rubrikfarbe davor. */
/* Block statt Flex-Kasten.
   Der Grund ist nicht die Optik, sondern text-overflow: In einem
   Flex-Kasten liegt der Text in einer namenlosen Box, und ein
   Auslassungszeichen laesst sich daran nicht setzen. Gemessen ging
   "Mannheim/Ludwigshafen" bei 200 % Textzoom als "Mannheim/Ludwig" zu
   Ende - 101 px fehlten, ohne dass man es sah. Ein Ortsname, der
   stillschweigend zu einem anderen Ort wird, ist schlimmer als einer,
   der sichtbar gekuerzt ist.
   Der Strich davor wird dafuer zu einem inline-block; das Ergebnis
   sieht genauso aus. */
.kicker, .ort {
  font-family: var(--schrift-titel);
  font-size: var(--gr-marke);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0;
  display: block;
  min-width: 0;
  line-height: 1.2;
}
.kicker::before, .ort::before {
  content: "";
  display: inline-block;
  width: 14px; height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: currentColor;
}

/* Zeitangabe — leise, aber immer an derselben Stelle */
.zeit {
  font-family: var(--schrift-titel);
  font-size: var(--gr-marke);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--tinte-weich);
  margin: 0;
}

/* ---------- Schlagzeilen ---------- */
.hl {
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--tinte);
  line-height: 1.09;
  letter-spacing: -.005em;
  margin: 0;
  /* Umbruch: verhindert die einsame letzte Silbe */
  text-wrap: balance;
}

/* Unterstreichung beim Zeigen.
   Bewusst ueber text-decoration und nicht ueber ein
   Hintergrundbild: bei mehrzeilig abgeschnittenen Schlagzeilen
   (-webkit-line-clamp) landet ein Hintergrundstreifen mitten im
   Text statt unter der letzten Zeile. */
.hl {
  text-decoration: underline transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .22s ease;
}
a:hover .hl, a:focus-visible .hl { text-decoration-color: var(--akzent); }

@media (prefers-reduced-motion: reduce) {
  .hl { transition: none; }
}

/* ---------- Bildflaechen ----------
   Platzhalter im Entwurf. Im Betrieb steht hier ein <img>. */
.ph {
  display: block;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      var(--flaeche) 0 9px, var(--flaeche-tief) 9px 18px);
  aspect-ratio: 3 / 2;
  width: 100%;
}
.ph::after {
  content: attr(data-format);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  white-space: pre-line; text-align: center;
  font-family: var(--schrift-titel);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #8B96A8;
}
.ph.klein { aspect-ratio: 3 / 2; }

/* ============================================================
   KOPFBEREICH
   Drei Zeilen: Service, Marke, Navigation. Auf dem Handy
   schrumpft er auf ein Viertel — dort zaehlt jede Zeile, bis
   die erste Schlagzeile kommt.
   ============================================================ */

/* ---------- Servicezeile ---------- */
.service {
  background: var(--blau-tief);
  color: #9FB0CC;
  font-size: .8rem;
}
.service .wrap {
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap;
  min-height: 34px; padding-top: 5px; padding-bottom: 5px;
}
.service nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.service a {
  display: inline-flex; align-items: center;
  min-height: 34px;
  transition: color .18s;
}
.service a:hover { color: #fff; }
.service .epaper {
  background: var(--orange); color: #1A1D22;
  font-family: var(--schrift-titel); font-weight: 800;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px 3px; border-radius: 2px;
}
.service .epaper:hover { background: #FFB93D; color: #1A1D22; }

/* ---------- Markenzeile ---------- */
.brand { background: var(--papier); border-bottom: 1px solid var(--linie-zart); }
.brand .wrap {
  display: flex; align-items: center; gap: 26px;
  padding-top: 20px; padding-bottom: 20px;
}
.logo {
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .92;
  color: var(--blau);
  text-transform: uppercase;
}
.logo em { font-style: normal; font-weight: 400; color: var(--tinte); }

.claim {
  font-size: .82rem; line-height: 1.35; color: var(--tinte-weich);
  margin: 0; padding-left: 26px;
  border-left: 1px solid var(--linie);
  align-self: stretch; display: flex; align-items: center;
}

.suche { margin-left: auto; display: flex; flex: 0 1 auto; min-width: 0; }
.suche input {
  font-family: var(--schrift-text); font-size: .92rem;
  border: 1px solid var(--linie); border-right: 0;
  padding: 10px 15px; width: 320px; max-width: 100%; border-radius: 2px 0 0 2px;
  background: var(--papier); color: var(--tinte);
}
.suche input::placeholder { color: #6E7787; }
.suche button {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--blau); color: #fff; border: 0;
  padding: 0 18px; cursor: pointer; border-radius: 0 2px 2px 0;
  transition: background .18s;
}
.suche button:hover { background: var(--blau-tief); }

/* ---------- Hauptnavigation ---------- */

/* DER KOPFBEREICH IST KEIN KASTEN MEHR, SONDERN NUR NOCH EINE HUELLE.
   Ein klebendes Element klebt nur INNERHALB seines Elternelements.
   Gemessen an der laufenden Seite: Der Kopfbereich war 209 px hoch
   (Servicezeile 55, Marke 99, Menue 54), die Leiste 54. Sie konnte
   also genau 155 px weit kleben und scrollte dann mit dem Kopf davon.

   Sichtbare Folge: Die Leiste war ab dem ersten Wisch verschwunden,
   und mit ihr das Logo, das genau in diesem Fenster (70-165 px)
   einfaehrt. Es fuhr ein und im selben Moment aus dem Bild.

   display: contents loest den Kasten auf: Die drei Kinder werden
   direkte Kinder von <body>, und .haupt klebt ueber die ganze Seite.
   Gefahrlos, weil der Kopfbereich gemessen keine eigene Optik hat -
   kein Hintergrund, kein Rahmen, kein Polster, kein Rand.

   Die Landmark banner bleibt trotzdem: Sie steht als role="banner"
   im HTML, nicht am Kasten. */
.kopfbereich { display: contents; }

.haupt {
  background: var(--blau);
  position: sticky; top: 0; z-index: 60;
}
.haupt .wrap { display: flex; align-items: stretch; }

.menu-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.punkte { display: flex; align-items: stretch; gap: 0; }

.punkt {
  display: flex; align-items: center;
  font-family: var(--schrift-titel);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #EAF0FA;
  padding: 15px 17px;
  position: relative;
  transition: color .18s, background .18s;
}
.punkt::after {
  content: ""; position: absolute;
  left: 17px; right: 17px; bottom: 0; height: 3px;
  background: var(--akzent-hell);
  transform: scaleX(1); transform-origin: left;
  opacity: .4;
  transition: opacity .2s, transform .24s cubic-bezier(.22,1,.36,1);
}
.punkt:hover, .punkt:focus-visible { color: #fff; background: rgba(255,255,255,.07); }
.punkt:hover::after, .punkt:focus-visible::after, .punkt.aktiv::after { opacity: 1; }
.punkt.aktiv { color: #fff; }

/* Rubrikfarbe im Menue: jeder Punkt traegt seine eigene.
   Ohne Rubrik (Lokales, Startseite) bleibt das Signalrot. */
.punkt:not([data-rubrik])::after { background: var(--signal, #D62828); }

.panel-kopf, .panel-fuss { display: none; }
.menu-zu { display: none; }

/* ---------- Megamenue „Lokales" ----------
   Haengt am Kopfbereich, nicht am Menuepunkt — sonst ist es nur
   so breit wie das Wort. (Das war schon einmal kaputt.) */
.mega-halter { display: flex; }

.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--papier);
  border-top: 3px solid var(--rot);
  box-shadow: 0 22px 44px -18px rgba(16,26,43,.4);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 70;
}
.mega-halter:hover > .mega,
.mega-halter:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }

.mega .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.25fr;
  gap: 34px;
  padding-top: 28px; padding-bottom: 30px;
}
.mega h3 {
  font-family: var(--schrift-titel); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot); margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--linie);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a {
  display: flex; align-items: center;
  min-height: 30px; padding: 3px 0;
  font-size: .96rem;
  color: var(--tinte);
  transition: color .16s, padding-left .16s;
}
.mega li a:hover { color: var(--blau); padding-left: 5px; }
.mega .alle {
  display: inline-flex; align-items: center;
  min-height: 32px; margin-top: 6px;
  font-weight: 600; color: var(--blau); font-size: .88rem;
}
.mega .alle:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega .vorschau { border-left: 1px solid var(--linie); padding-left: 30px; }
.mega .kopf {
  font-family: var(--schrift-titel); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-weich); margin: 0 0 12px;
}
.mega .vorschau > a {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px;
  align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--linie-zart);
  font-family: var(--schrift-titel); font-size: .98rem;
  font-weight: 700; line-height: 1.16;
}
.mega .vorschau > a:last-child { border-bottom: 0; }
.mega .vorschau .ph { aspect-ratio: 3/2; }
.mega .vorschau .ph::after { font-size: 0; }

/* ---------- Hamburger (nur Handy) ---------- */
.hamburger { display: none; }
.overlay { display: none; }

/* ---------- Eilmeldung ---------- */
.eil {
  background: var(--rot); color: #fff;
  font-size: .94rem;
}
.eil .wrap {
  display: flex; align-items: center; gap: 16px;
  padding-top: 10px; padding-bottom: 10px;
}
.eil .marke {
  font-family: var(--schrift-titel); font-weight: 800;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  background: #fff; color: var(--rot);
  padding: 3px 10px 2px; border-radius: 2px; flex: none;
}
.eil p { margin: 0; font-weight: 600; }
.eil a { font-weight: 600; }
.eil a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eil .zeit { color: rgba(255,255,255,.78); margin-left: auto; flex: none; }

/* ============================================================
   HAUPTTEIL
   ============================================================ */

main { padding-bottom: 10px; }

.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: var(--luft);
  align-items: start;
}

/* Ohne Seitenspalte gibt es auch keine zweite Rasterspalte. index.php
   haengt dafuer die Klasse an, im Stylesheet stand bisher nichts dazu:
   Sobald ein Menuepunkt keine Module in "right" hat - oder das letzte
   Bannermodul dort ablaeuft -, stand der Inhalt in einer um 316 px
   verschmaelerten Spalte, daneben ein leerer Streifen ueber die ganze
   Seitenhoehe. Faellt heute nicht auf, weil ueberall Module haengen;
   faellt am Tag der Umstellung auf. */
.spalten.ohne-spalte { grid-template-columns: minmax(0, 1fr); }

/* ---------- Rubrikkopf ----------
   Der Balken traegt die Rubrikfarbe. Er ist das einzige
   Element, das die Farbe flaechig zeigt — deshalb faellt sie auf,
   ohne dass die Seite bunt wird. */
.rubrik {
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tinte);
}
.rubrik h2 {
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.rubrik h2::before {
  content: ""; position: absolute;
  left: 0; top: .12em; bottom: .12em;
  width: 7px; background: var(--akzent);
}
.mehr {
  margin-left: auto;
  font-family: var(--schrift-titel);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--akzent);
  white-space: nowrap;
  transition: gap .2s;
}
.mehr {
  display: inline-flex; align-items: center;
  min-height: 32px;
}
.mehr:hover { text-decoration: underline; text-underline-offset: 4px; }

.abschnitt { margin-top: calc(var(--luft) + 8px); }

/* ---------- Aufmacher ----------
   Das groesste Bild der Seite, darunter die Schlagzeile in voller
   Groesse. Text nicht ins Bild: auf Pressefotos ist selten Platz,
   und die Zeile muss auch bei unruhigem Motiv lesbar sein. */
.aufmacher {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 0 30px;
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linie);
}
.aufmacher .ph {
  grid-column: 1; grid-row: 1 / span 3;
  aspect-ratio: 16 / 9;
  margin: 0;
}
.aufmacher .ph::after { font-size: .8rem; }
.aufmacher .kicker { grid-column: 2; grid-row: 1; margin-top: 2px; }
.aufmacher .zeit   { grid-column: 2; grid-row: 3; align-self: start; }
.aufmacher .hl {
  grid-column: 2; grid-row: 2;
  font-size: var(--gr-aufmacher);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 12px 0 12px;
}
.aufmacher .kicker { font-size: .82rem; }
.aufmacher .zeit { font-size: .82rem; }

/* Bild waechst beim Zeigen leicht — das einzige Bewegungsspiel
   an den Kacheln. */
.aufmacher .ph, .kachel .ph { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.aufmacher:hover .ph, .kachel:hover .ph { transform: scale(1.025); }

@media (prefers-reduced-motion: reduce) {
  .aufmacher .ph, .kachel .ph { transition: none; }
  .aufmacher:hover .ph, .kachel:hover .ph { transform: none; }
}

/* ---------- Kachelraster ---------- */
.raster2, .raster3 {
  display: grid;
  gap: 26px 24px;
}
.raster2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kachel { display: block; }
.kachel .ph { margin-bottom: 12px; }
.kachel .kicker { margin-bottom: 7px; }
.kachel .hl {
  font-size: var(--gr-kachel);
  margin-bottom: 7px;
}
.raster2 + .raster2 { margin-top: 26px; }
.native + .raster2 { margin-top: 26px; }

/* ---------- Die Ortsspalte ----------
   Das Kennzeichen der Seite. Links eine feste Bahn nur fuer
   Ortsnamen — untereinander gelesen ergibt sie ein Verzeichnis
   der Region. Rechts davon Bild und Schlagzeile. */
.titelliste {
  margin-top: 30px;
  border-top: 2px solid var(--tinte);
}
.titelliste a {
  display: grid;
  grid-template-columns: var(--ortsbahn) 108px minmax(0, 1fr);
  gap: 0 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie-zart);
}
.titelliste a > span:last-child { display: contents; }
.titelliste .ort {
  grid-column: 1; grid-row: 1;
  justify-content: flex-end;
  text-align: right;
  padding-right: 18px;
  border-right: 1px solid var(--linie);
  align-self: stretch;
}
.titelliste .ort::before { order: 2; width: 10px; }
.titelliste .ph { grid-column: 2; grid-row: 1; }
.titelliste .hl {
  grid-column: 3; grid-row: 1;
  font-size: var(--gr-liste);
  line-height: 1.2;
}
.titelliste a:hover { background: var(--flaeche); }
.titelliste a:hover .ort { border-right-color: var(--akzent); }

/* ---------- Anzeige im Beitragsstrom ---------- */
.native {
  margin: 30px 0;
  padding: 16px 18px;
  background: var(--flaeche);
  border-left: 4px solid var(--tinte-weich);
}
.native .reihe {
  display: grid; grid-template-columns: 170px 1fr; gap: 18px;
  align-items: center;
}
.native .titel {
  font-family: var(--schrift-titel); font-size: 1.1rem;
  font-weight: 700; margin: 0 0 4px;
}
.native p { margin: 0; font-size: .94rem; color: var(--tinte-weich); }

.anzeige-label {
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #6E7787;
  margin: 0 0 7px;
}

.werbeblock { margin: 26px 0; text-align: center; }
main > .wrap > .werbeblock:first-child { margin-top: 18px; }
.anzeige {
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche);
  border: 1px dashed #C3CBD8;
  font-family: var(--schrift-titel);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #8B96A8;
  text-align: center; line-height: 1.5;
  margin: 0 auto;
}
.anz-leader   { max-width: 970px; height: 90px; }
.anz-billboard{ max-width: 970px; height: 250px; }
.anz-rect     { max-width: 300px; height: 250px; }
.anz-sky      { max-width: 160px; height: 600px; }

/* ---------- Meistgelesen ----------
   Die Zahl ist gross und in der Rubrikfarbe — sie ist hier die
   Information, nicht Schmuck. */
.meist ol { list-style: none; margin: 0; padding: 0; }
.meist li { border-bottom: 1px solid var(--linie-zart); }
.meist a {
  display: grid;
  grid-template-columns: 52px 92px minmax(0, 1fr);
  gap: 0 16px; align-items: center;
  padding: 11px 0;
}
.meist .nr {
  font-family: var(--schrift-titel);
  font-size: 2.1rem; font-weight: 800;
  line-height: 1; text-align: center;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.meist .hl { font-size: var(--gr-liste); line-height: 1.2; }
.meist a:hover { background: var(--flaeche); }

/* ---------- Ortsleiste ---------- */
.orte {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: -6px 0 20px;
}
.orte a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  font-family: var(--schrift-titel);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-weich);
  padding: 7px 13px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  transition: all .16s;
}
.orte a:hover { border-color: var(--akzent); color: var(--akzent); }
.orte a.aktiv {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}

/* ============================================================
   SEITENSPALTE
   ============================================================ */

.sidebar { display: flex; flex-direction: column; gap: var(--luft); }
.sidebar .werbeblock { margin: 0; }

/* Eigenwerbung — fuellt jeden Platz, der gerade nicht verkauft
   ist. In Joomla ein Banner mit niedrigster Prioritaet. */
.werben {
  background: var(--blau-tief);
  color: #fff;
  padding: 26px 24px 24px;
  position: relative;
  overflow: hidden;
}
.werben::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--orange);
}
.werben .klein {
  font-family: var(--schrift-titel);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 10px;
}
.werben .gross {
  font-family: var(--schrift-titel);
  font-size: 1.72rem; font-weight: 800;
  line-height: 1.03; letter-spacing: -.01em;
  margin: 0 0 12px;
}
.werben .text {
  font-size: .92rem; line-height: 1.45;
  color: #B9C7DF; margin: 0 0 18px;
}
.werben .cta { background: var(--orange); color: #1A1D22; }
.werben .cta:hover { background: #FFB93D; }

.kasten {
  border: 1px solid var(--linie);
  padding: 20px 20px 22px;
}
.kasten h3 {
  font-family: var(--schrift-titel);
  font-size: 1.16rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinte); margin: 0 0 14px;
  padding-bottom: 9px; border-bottom: 2px solid var(--tinte);
}
.kasten .ph { aspect-ratio: 3 / 4; margin-bottom: 16px; }

.cta {
  display: block; text-align: center;
  font-family: var(--schrift-titel);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--blau); color: #fff;
  padding: 12px 16px; border-radius: 2px;
  transition: background .18s;
}
.cta:hover { background: var(--blau-tief); }

/* Skyscraper laeuft mit */
.sidebar .werbeblock:last-child { position: sticky; top: 86px; }

/* ============================================================
   FIRMENVERZEICHNIS
   Ruhig gehalten. Es soll nach Rubrik aussehen, nicht nach
   Angebot — bei Branchenbucheintraegen ist Misstrauen der
   Normalfall, und das zu Recht.
   ============================================================ */

.verzeichnis .firmen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1px;
  background: var(--linie-zart);
  border: 1px solid var(--linie-zart);
}
.verzeichnis .firmen > a, .verzeichnis .firmen > div {
  background: var(--papier);
  padding: 15px 17px;
  font-size: .95rem;
}
.verzeichnis .firmen b {
  font-family: var(--schrift-titel);
  font-size: 1.08rem; font-weight: 700;
  display: block; margin-bottom: 2px;
}
.verzeichnis .firmen span { color: var(--tinte-weich); font-size: .88rem; }
.verzeichnis .firmen > a:hover { background: var(--flaeche); }

.eintrag {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px;
  gap: 34px; align-items: center;
  margin-top: 22px; padding: 24px 26px;
  background: var(--flaeche);
  border-left: 5px solid var(--akzent);
}
.eintrag .frage {
  font-family: var(--schrift-titel);
  font-size: 1.32rem; font-weight: 800;
  margin: 0 0 8px;
}
.eintrag .antwort { margin: 0 0 14px; font-size: .96rem; line-height: 1.5; }
.zusagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zusagen li {
  font-size: .9rem; color: var(--tinte-weich);
  padding-left: 24px; position: relative;
}
.zusagen li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: #127A3F; font-weight: 700;
}
.knopf {
  display: block; text-align: center;
  font-family: var(--schrift-titel);
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--tinte); color: #fff;
  padding: 15px 18px; border-radius: 2px;
  transition: background .18s;
}
.knopf:hover { background: var(--blau); }
.knopf-zusatz {
  margin: 9px 0 0; text-align: center;
  font-size: .82rem; color: var(--tinte-weich);
}

/* ============================================================
   FUSSZEILE
   ============================================================ */

footer {
  background: var(--blau-tief); color: #9FB0CC;
  margin-top: var(--luft);
  padding: 34px 0 30px;
  font-size: .9rem;
}
/* Nur die alte flache Linkleiste, nicht die Spalten des Fussmenues.
   Ohne den Ausschluss macht diese Regel aus Ueberschrift und Liste eine
   waagerechte Reihe: Die Ueberschrift steht dann neben den Verweisen und
   frisst die halbe Spalte. */
footer nav:not(.fuss-spalte) {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  padding-bottom: 20px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
footer nav:not(.fuss-spalte) a {
  display: inline-flex; align-items: center;
  min-height: 36px;
}
footer a:hover { color: #fff; }
footer .rechts { margin: 0; font-size: .82rem; color: #8B9DB8; }

/* ============================================================
   BEWEGUNG
   Ohne JavaScript, ueber Scroll-Animationen des Browsers.
   Kann er es nicht, steht einfach alles sofort da.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    @keyframes auftauchen {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
    .abschnitt > .rubrik,
    .raster2 > .kachel,
    .raster3 > .kachel,
    .titelliste > a {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

/* ============================================================
   KLEINERE BILDSCHIRME
   Media-Bloecke stehen bewusst am Ende der Datei: eine
   @media-Regel gewinnt nicht automatisch, sie braucht die
   spaetere Position.
   ============================================================ */

@media (max-width: 1080px) {
  :root { --ortsbahn: 108px; }
  .spalten { grid-template-columns: minmax(0, 1fr) 280px; }
  .mega .wrap { grid-template-columns: repeat(3, 1fr); }
  .mega .vorschau { display: none; }
}

@media (max-width: 980px) {
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    flex-direction: row; flex-wrap: wrap;
    align-items: flex-start;
  }
  .sidebar > * { flex: 1 1 280px; }
  .sidebar .werbeblock:last-child { position: static; }
  .anz-sky { display: none; }
}

/* ---------- Ab hier Hamburger ---------- */
@media (max-width: 900px) {
  .nur-desktop { display: none !important; }
  .nur-mobil { display: inline; }

  .brand .wrap { padding-top: 10px; padding-bottom: 10px; gap: 14px; }
  .logo { font-size: 1.86rem; }
  .claim { display: none; }
  .suche { display: none; }

  .haupt .wrap { padding-top: 0; padding-bottom: 0; }

  /* Schalter */
  .hamburger {
    display: flex; align-items: center; gap: 11px;
    margin-left: auto;
    padding: 14px 2px 14px 14px;
    cursor: pointer;
    color: #fff;
    font-family: var(--schrift-titel);
    font-size: .92rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    min-height: 48px;
  }
  .hamburger .balken,
  .hamburger .balken::before,
  .hamburger .balken::after {
    display: block; width: 24px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s;
  }
  .hamburger .balken { position: relative; }
  .hamburger .balken::before { content: ""; position: absolute; top: -7px; }
  .hamburger .balken::after  { content: ""; position: absolute; top: 7px; }

  .menu-schalter:checked ~ .wrap .hamburger .balken { background: transparent; }
  .menu-schalter:checked ~ .wrap .hamburger .balken::before { transform: translateY(7px) rotate(45deg); }
  .menu-schalter:checked ~ .wrap .hamburger .balken::after  { transform: translateY(-7px) rotate(-45deg); }

  /* Schleier */
  .overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(16,26,43,.6);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 80;
  }
  .menu-schalter:checked ~ .overlay { opacity: 1; visibility: visible; }

  /* Das Panel faehrt von rechts ein */
  .punkte {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(330px, 86vw);
    background: var(--blau-tief);
    flex-direction: column;
    align-items: stretch;
    padding: 22px 0 26px;
    overflow-y: auto;
    transform: translateX(100%);
    /* Verschoben heisst nicht weg: Die Links im geschlossenen Panel
       waren weiter per Tabulator erreichbar — der Fokus wanderte in
       einen Bereich ausserhalb des Bildschirms, und niemand sah,
       wo er steht. visibility nimmt sie aus der Reihenfolge.
       Die Verzoegerung von .34s laesst die Schliessbewegung noch
       zu Ende laufen. */
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                visibility 0s linear .34s;
    z-index: 90;
    box-shadow: -18px 0 40px -20px rgba(0,0,0,.6);
  }
  .menu-schalter:checked ~ .wrap .punkte {
    transform: none;
    visibility: visible;
    transition: transform .34s cubic-bezier(.22,1,.36,1), visibility 0s;
  }

  /* Der sichtbare Ausweg aus dem Panel.
     Ganz oben, weil der Daumen dort landet, wenn das Panel von rechts
     einfaehrt — und weil er dann ueber allen Menuepunkten steht statt
     unter ihnen, wo man erst scrollen muesste. */
  .menu-zu {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px;
    margin: 0 0 8px; padding: 12px 22px;
    min-height: 48px;                 /* Tippflaeche, nicht nur Symbol */
    cursor: pointer;
    color: #9FB2D0;
    font-family: var(--schrift-titel);
    font-size: .74rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    transition: color .18s;
  }
  .menu-zu:hover { color: #fff; }

  /* Das Kreuz aus zwei Linien statt aus dem Zeichen "x": In einer
     schmalen Schrift sitzt das Zeichen zu klein und zu hoch. */
  .menu-zu-kreuz { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
  .menu-zu-kreuz::before,
  .menu-zu-kreuz::after {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 18px; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .menu-zu-kreuz::before { transform: rotate(45deg); }
  .menu-zu-kreuz::after  { transform: rotate(-45deg); }

  /* TASTATUR: Der Fokus sitzt auf der Checkbox, und die ist 1 px gross
     und durchsichtig — ohne diese Regel sieht niemand, wo er steht.
     Der Ring erscheint deshalb an dem Element, das der Schalter gerade
     BEDIENT: geschlossen am Hamburger, offen am Schliessen-Knopf. */
  .menu-schalter:focus-visible ~ .wrap .hamburger,
  .menu-schalter:focus-visible ~ .wrap .menu-zu {
    outline: 3px solid var(--akzent-hell, #FF6B6B);
    outline-offset: -3px;
  }

  .panel-kopf {
    display: block;
    font-family: var(--schrift-titel);
    font-size: .74rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #6E82A6; margin: 0 22px 10px;
  }

  .punkt {
    padding: 14px 22px;
    min-height: 50px;
    font-size: 1.12rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #E4EBF6;
  }
  .punkt::after {
    left: 0; right: auto; top: 0; bottom: 0;
    width: 4px; height: auto;
    transform: scaleY(1); transform-origin: top;
    background: var(--akzent-hell);
    opacity: .55;
    transition: opacity .2s;
  }
  .punkt:hover::after, .punkt.aktiv::after { opacity: 1; }
  .punkt { color: #F2F6FC; }

  /* Aufklappmenue im Panel: nur die drei Bundeslaender.
     Fuenfzehn Ortslinks waeren wieder das Problem, das der
     Hamburger gerade geloest hat. */
  .mega-halter { display: block; }
  .mega {
    position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border-top: 0;
    background: rgba(0,0,0,.22);
  }
  .mega .wrap {
    display: block; padding: 8px 22px 12px; max-width: none;
  }
  .mega h3 {
    color: #8FA4C6; border-bottom: 0;
    margin: 10px 0 2px; padding: 0;
    font-size: .72rem; letter-spacing: .16em;
  }
  .mega ul { display: none; }
  .mega .alle {
    display: block; color: #E4EBF6; padding: 9px 0;
    font-size: 1rem; margin: 0;
    min-height: 44px;
  }
  .mega .vorschau { display: none; }

  .panel-fuss {
    display: block; margin: auto 22px 0; padding-top: 22px;
  }
  .panel-epaper {
    display: block; text-align: center;
    background: var(--orange); color: #1A1D22;
    font-family: var(--schrift-titel); font-weight: 800;
    font-size: .96rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 13px; border-radius: 2px;
  }
  .panel-service {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 16px; font-size: .88rem;
  }
  .panel-service a { color: #9FB0CC; padding: 6px 0; }

  /* Inhalt */
  /* Eilmeldung: Marke und Zeile, keine Uhrzeit. Drei Umbrueche
     in einer Zeile haben den halben Kopfbereich gekostet. */
  .eil .wrap { flex-wrap: wrap; gap: 6px 10px; padding-top: 8px; padding-bottom: 8px; }
  .eil { font-size: .9rem; }
  .eil .zeit { display: none; }
  .eil p {
    line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .raster3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eintrag { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .anz-billboard { height: 180px; }
}

@media (max-width: 640px) {
  :root { --luft: 26px; }

  .service .wrap { min-height: 30px; gap: 10px; }
  .service nav { gap: 14px; }
  .service a { min-height: 30px; }
  .orte a { min-height: 44px; }

  .raster2, .raster3 { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  .aufmacher {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
  }
  .aufmacher .ph   { grid-column: 1; grid-row: auto; margin-bottom: 14px; }
  .aufmacher .kicker, .aufmacher .hl, .aufmacher .zeit { grid-column: 1; grid-row: auto; }
  .aufmacher .hl { margin: 8px 0 10px; }

  /* Ortsspalte wird zur Ortszeile — die feste Bahn kostet auf
     dem Handy zu viel Breite. */
  .titelliste a {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 13px 0;
    align-items: start;
  }
  .titelliste .ph { grid-column: 1; grid-row: 1 / span 2; }
  .titelliste .ort {
    grid-column: 2; grid-row: 1;
    justify-content: flex-start; text-align: left;
    padding-right: 0; border-right: 0;
    margin-bottom: 5px;
  }
  .titelliste .ort::before { order: -1; }
  .titelliste .hl { grid-column: 2; grid-row: 2; }

  .meist a { grid-template-columns: 38px 74px minmax(0, 1fr); gap: 0 12px; }
  .meist .nr { font-size: 1.6rem; }

  .native .reihe { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .sidebar > * { flex: 1 1 100%; }

  .verzeichnis .firmen { grid-template-columns: minmax(0, 1fr); }

  footer nav { gap: 10px 18px; }
}

@media (max-width: 380px) {
  .titelliste a { grid-template-columns: 74px minmax(0, 1fr); }
  .logo { font-size: 1.72rem; }
}

/* ============================================================
   BEITRAGSSEITE
   Die wichtigste Ansicht. Hier kommt der Verkehr aus Google und
   Facebook an — der Aufbau folgt dem Lesen, nicht der Marke.
   ============================================================ */

.beitrag { max-width: 760px; }
.spalten .beitrag { max-width: none; }

.beitrag-kopf { margin-bottom: 22px; }

.beitrag-titel {
  font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 10px 0 14px;
}

.beitrag-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-weich);
}
.meta-rubrik { color: var(--akzent); font-weight: 700; }
.meta-rubrik:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Der Verfasser. Bewusst NICHT in der Rubrikfarbe: In dieser Zeile
   traegt die Farbe schon die Rubrik, und zwei farbige Elemente
   nebeneinander lesen sich wie zwei Links. Der Name steht dunkler als
   der Rest der Zeile, damit er sich abhebt, ohne zu schreien. */
.meta-autor {
  color: var(--tinte-weich);
  /* gap statt Leerzeichen: .meta-autor ist weiter unten inline-flex (fuer
     die 26-px-Tippflaeche). In einem Flex-Container wird der Text "Von"
     zu einem eigenen Element, und das Leerzeichen dazwischen faellt weg —
     auf dem Bildschirm stand "VONLOTHAR BINDER". */
  gap: .35em;
}
.meta-autor .autor-name { color: var(--tinte); font-weight: 700; }

.lesezeit { margin-left: auto; }

.beitrag-bild { margin: 0 0 24px; }
.beitrag-bild img { width: 100%; }
.beitrag-bild figcaption {
  margin-top: 8px;
  font-size: .86rem; line-height: 1.4;
  color: var(--tinte-weich);
  padding-left: 12px;
  border-left: 3px solid var(--linie);
}

/* Fliesstext. 66 Zeichen je Zeile ist die Spanne, in der laenger
   gelesen wird — deshalb die Begrenzung, auch wenn die Spalte
   breiter waere. */
.beitrag-text {
  max-width: 66ch;
  font-size: 1.15rem;
  line-height: 1.68;
}
.beitrag-text p { margin: 0 0 1.15em; }
.beitrag-text h2, .beitrag-text h3 {
  font-family: var(--schrift-titel);
  font-weight: 800; letter-spacing: -.005em;
  line-height: 1.14;
  margin: 1.7em 0 .5em;
}
.beitrag-text h2 { font-size: 1.6rem; }
.beitrag-text h3 { font-size: 1.3rem; }
.beitrag-text a {
  color: var(--blau); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.beitrag-text a:hover { color: var(--rot); }
.beitrag-text img { margin: 1.4em 0; }
.beitrag-text ul, .beitrag-text ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.beitrag-text li { margin-bottom: .4em; }
.beitrag-text blockquote {
  margin: 1.5em 0; padding: 2px 0 2px 20px;
  border-left: 4px solid var(--akzent);
  font-size: 1.16rem; line-height: 1.45;
  font-family: var(--schrift-titel); font-weight: 600;
}
/* Aus Word eingefuegte Schriftgroessen abfangen */
.beitrag-text [style*="font-size"] { font-size: inherit !important; }
.beitrag-text [style*="font-family"] { font-family: inherit !important; }

.beitrag-fuss {
  margin-top: 30px; padding-top: 20px;
  border-top: 2px solid var(--tinte);
}
.schlagworte { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.schlagworte a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-family: var(--schrift-titel);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-weich);
  padding: 5px 12px; border: 1px solid var(--linie); border-radius: 999px;
}
.schlagworte a:hover { border-color: var(--akzent); color: var(--akzent); }

.zurueck {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--schrift-titel);
  font-size: .95rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent);
}
.zurueck:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   KLEINIGKEITEN, DIE SONST STOEREN
   ============================================================ */

/* Beitrag ohne Bild: keine Streifenflaeche, sondern gar nichts.
   Eine leere Flaeche sieht nach Fehler aus, eine fehlende nicht. */
/* Beitrag ohne Bild: die Marke statt grauer Streifen.
   Die Streifen sahen nach Ladefehler aus — besonders als Aufmacher, wo
   die Flaeche am groessten ist. Ein Beitrag ohne Bild ist aber kein
   Fehler, sondern ein Normalfall: Polizeimeldungen kommen oft ohne.
   Das Zeichen macht daraus etwas Gewolltes.

   Als Hintergrund, nicht als <img>: Es traegt keine Information, die
   eine Sprachausgabe vorlesen muesste. */
.ph:has(.ph-leer) { background: #17356b; }
.ph:has(.ph-leer)::before {
  content: "";
  position: absolute; inset: 0;
  background: url("https://all-inkl.metropoljournal.com/templates/mj2026/images/favicon-64.png") center / auto 44% no-repeat;
}
/* In der schmalen Titelliste ist die Flaeche zu klein fuer ein Zeichen —
   dort bleibt es beim bisherigen Verhalten: gar keine Bildspalte. */
.titelliste .ph:has(.ph-leer) { background: none; }
.titelliste .ph:has(.ph-leer)::before { content: none; }

.ph-leer { display: none; }
.kachel .ph:empty, .titelliste .ph:empty { display: none; }
.titelliste a:has(.ph:empty) { grid-template-columns: var(--ortsbahn) 0 minmax(0, 1fr); }

/* Module ohne Inhalt hinterlassen keinen leeren Kasten */
.kasten:not(:has(*)), .kasten:empty { display: none; }
.sidebar .kasten:has(> h3:only-child) { display: none; }

/* Unterrubriken und Blaetterung */
.unterrubriken { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.unterrubriken a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--schrift-titel);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-weich);
  padding: 7px 13px; border: 1px solid var(--linie); border-radius: 999px;
}
.unterrubriken a:hover { border-color: var(--akzent); color: var(--akzent); }

.blaettern { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--linie); }
.blaettern ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.blaettern a, .blaettern span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 12px;
  font-family: var(--schrift-titel); font-weight: 700;
  border: 1px solid var(--linie);
  color: var(--tinte);
}
.blaettern a:hover { border-color: var(--akzent); color: var(--akzent); }
.blaettern .active span { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.leer { padding: 30px 0; color: var(--tinte-weich); }

/* Fehlerseite */
.fehlerseite main { padding: 60px 0 80px; }
.fehler-titel { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin: 8px 0 14px; }
.fehler-text { max-width: 52ch; margin: 0 0 24px; font-size: 1.05rem; }
.fehler-cta { display: inline-block; }

@media (max-width: 640px) {
  .beitrag-text { font-size: 1.04rem; }
  .lesezeit { margin-left: 0; }
}

/* ============================================================
   WERBEPLAETZE
   ============================================================ */

/* Ein Bannerplatz ohne gebuchte Anzeige hinterlaesst sonst einen
   leeren Rahmen. Bis der Eigenwerbe-Banner mit niedrigster
   Prioritaet eingerichtet ist, wird er ausgeblendet.
   Auf der Startseite sind das derzeit fuenf Plaetze. */
.kasten:has(.mod-banners):not(:has(.mod-banners__item)),
.abschnitt:has(.mod-banners):not(:has(.mod-banners__item)),
.werbeblock:has(.mod-banners):not(:has(.mod-banners__item)) { display: none; }

.mod-banners { display: grid; gap: 14px; }
.mod-banners__item { text-align: center; }
.mod-banners img { width: auto; max-width: 100%; margin: 0 auto; }
.mod-banners .bannerfooter { display: none; }

/* Kennzeichnung als Anzeige — Trennungsgebot.
   Sie haengt am Bannermodul SELBST, nicht am umgebenden Kasten.
   Dadurch bekommt jeder neue Banner sie automatisch, egal an
   welcher Position er spaeter eingehaengt wird. */
.mod-banners::before {
  content: "Anzeige";
  display: block;
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #6E7787;
  margin-bottom: 2px;
  text-align: left;
}
.kasten:has(.mod-banners) { border: 0; padding: 0; }

/* In der Servicezeile ist die Kennzeichnung kleiner und steht daneben */
.service .mod-banners { grid-auto-flow: column; align-items: center; gap: 10px; }
.service .mod-banners::before { margin: 0; font-size: .62rem; color: #A8BBD8; }

/* ============================================================
   SCHLAGZEILEN IN DER VORSCHAU BEGRENZEN
   Ohne Begrenzung entscheidet die Laenge der Schlagzeile ueber
   die Hoehe der Kachel — bei 50 Beitraegen am Tag franst das
   Raster dann taeglich anders aus. Deshalb feste Zeilenzahl:
   abgeschnitten wird mit Auslassungszeichen, nicht mitten im Wort.

   Die Mindesthoehe haelt die Grundlinien beieinander, auch wenn
   eine Schlagzeile nur eine Zeile braucht.
   ============================================================ */

.hl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  hyphens: auto;
}

/* Aufmacher: drei Zeilen. Mehr traegt die Groesse nicht. */
.aufmacher .hl {
  -webkit-line-clamp: 3;
  min-height: calc(2 * 1.02em);
}

/* Kachel: drei Zeilen, mindestens zwei */
.kachel .hl {
  -webkit-line-clamp: 3;
  min-height: calc(2 * 1.09em);
}

/* Ortsspalte und Meistgelesen: zwei Zeilen, die Zeile ist schmal */
.titelliste .hl,
.meist .hl {
  -webkit-line-clamp: 2;
  min-height: calc(1 * 1.2em);
}

/* Ortsname selbst nie umbrechen lassen — er ist die Ordnung.
   Reicht der Platz nicht, endet er mit einem Auslassungszeichen, damit
   die Kuerzung sichtbar ist. */
.kicker, .ort {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Damit die Kacheln einer Zeile auf gleicher Hoehe enden */
.raster2, .raster3 { align-items: stretch; }
.kachel { display: flex; flex-direction: column; }
.kachel .zeit { margin-top: auto; padding-top: 4px; }

@media (max-width: 640px) {
  /* Auf dem Handy ist Platz kostbar: zwei Zeilen reichen */
  .kachel .hl { -webkit-line-clamp: 3; min-height: 0; }
  .aufmacher .hl { -webkit-line-clamp: 4; min-height: 0; }
  .titelliste .hl { -webkit-line-clamp: 3; }
}

/* ============================================================
   SOFORTSUCHE
   Ohne JavaScript bleibt es ein normales Suchformular, das an
   die Joomla-Suche abschickt. Mit JavaScript kommen die Treffer
   waehrend des Tippens — samt Ortsmarke.
   ============================================================ */

.mjsuche { position: relative; display: flex; margin-left: auto; }

.mjsuche-feld {
  font-family: var(--schrift-text); font-size: .92rem;
  border: 1px solid var(--linie); border-right: 0;
  padding: 10px 14px; width: 230px;
  border-radius: 2px 0 0 2px;
  background: var(--papier); color: var(--tinte);
  transition: width .25s cubic-bezier(.22,1,.36,1), border-color .18s;
}
.mjsuche-feld::placeholder { color: #6E7787; }
.mjsuche-feld:focus { width: 300px; border-color: var(--blau); outline-offset: 1px; }
.mjsuche-feld::-webkit-search-cancel-button { cursor: pointer; }

.mjsuche-knopf {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--blau); color: #fff; border: 0;
  padding: 0 18px; cursor: pointer; border-radius: 0 2px 2px 0;
  transition: background .18s;
}
.mjsuche-knopf:hover { background: var(--blau-tief); }

.mjsuche-treffer {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: min(430px, 92vw);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  box-shadow: 0 20px 44px -18px rgba(16,26,43,.45);
  /* Ueber der klebenden Menueleiste. Die steht ab 901 px auf z-index 500
     — mit 100 lag der Trefferkasten dahinter, und die erste Zeile
     verschwand unter dem Blau. Gemessen: 54 px Ueberdeckung. */
  z-index: 600;
  max-height: 70vh; overflow-y: auto;
}

.mjsuche-eintrag {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie-zart);
}
.mjsuche-eintrag:last-of-type { border-bottom: 0; }
.mjsuche-eintrag img { width: 72px; height: 48px; object-fit: cover; object-position: center 42%; }
.mjsuche-ohnebild { width: 72px; height: 48px; background: var(--flaeche); }
.mjsuche-text { display: block; min-width: 0; }

.mjsuche-ort {
  display: block;
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 2px;
}
.mjsuche-titel {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--schrift-titel);
  font-size: var(--gr-liste); font-weight: 700; line-height: 1.2;
  color: var(--tinte);
}
.mjsuche-zeit {
  display: block; margin-top: 3px;
  font-family: var(--schrift-titel); font-size: .72rem;
  letter-spacing: .06em; color: var(--tinte-weich);
}

/* Gemessen: Die Flaeche allein bringt gegen die weissen Nachbarzeilen
   nur 1,13:1 - noetig sind 3:1. Der Balken traegt die Markierung, die
   Flaeche unterstuetzt sie. Und "Alle Treffer anzeigen" hatte gar keine
   Markierung, obwohl die Pfeiltasten dorthin fuehren. */
.mjsuche-eintrag:hover,
.mjsuche-eintrag.ist-aktiv,
.mjsuche-alle.ist-aktiv {
  background: var(--flaeche);
  box-shadow: inset 4px 0 0 var(--blau);
}
.mjsuche-eintrag.ist-aktiv .mjsuche-titel { color: var(--blau); }

.mjsuche-alle {
  display: block; padding: 12px 14px;
  background: var(--flaeche);
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent); text-align: center;
}
.mjsuche-alle:hover { background: var(--flaeche-tief); }

.mjsuche-leer { margin: 0; padding: 16px 14px; color: var(--tinte-weich); font-size: .94rem; }

/* Statusmeldung nur fuer Screenreader */
.mjsuche-status {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .mjsuche { display: none; }
}

/* ============================================================
   MEISTGELESEN
   Die Zahl ist die Information: sie sagt, was gelesen wurde.
   Deshalb gross und in der Rubrikfarbe, nicht als Aufzaehlungspunkt.
   ============================================================ */

.meistgelesen {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.meistgelesen li { border-bottom: 1px solid var(--linie-zart); }
.meistgelesen a {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 14px; align-items: baseline;
  padding: 12px 0;
}
.meistgelesen .nr {
  font-family: var(--schrift-titel);
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  text-align: right;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.meist-text { display: block; min-width: 0; }
.meistgelesen .ort {
  display: flex; margin-bottom: 3px;
  font-size: var(--gr-marke); letter-spacing: .13em;
}
.meistgelesen .hl {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--gr-liste); line-height: 1.25;
}
.meistgelesen a:hover { background: var(--flaeche); }

/* ============================================================
   FUSSZEILE — Pflichtangaben
   Impressum und Datenschutz muessen von jeder Seite aus in einem
   Klick erreichbar sein. Deshalb stehen sie zuerst und werden
   nicht kleiner gesetzt als der Rest.
   ============================================================ */

footer .mod-menu {
  list-style: none; margin: 0 0 18px; padding: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 2px 26px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
footer .mod-menu a {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: .9rem;
  transition: color .16s;
}
footer .mod-menu a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Die ersten beiden sind die Pflichtangaben */
footer .mod-menu li:nth-child(1) a,
footer .mod-menu li:nth-child(2) a { color: #DCE6F5; font-weight: 600; }

footer .custom { font-size: .88rem; line-height: 1.5; }
footer .custom p { margin: 0 0 .6em; }
footer .custom a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .meistgelesen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .meistgelesen .nr { font-size: 1.5rem; }
  .meistgelesen a { grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; }
  footer .mod-menu { gap: 0 18px; }
}

/* ============================================================
   WERBEPLAETZE IM BEITRAGSSTROM
   Google Ads und andere Skript-Anzeigen laden verzoegert. Ohne
   reservierte Hoehe springt der Inhalt beim Nachladen — genau das
   misst Google als Layout-Verschiebung und rechnet es der Seite an.
   Deshalb bekommt jeder Platz seine Hoehe VORHER.

   Die Hoehe wird ueber das Modulklassen-Suffix gesetzt, damit die
   Redaktion sie je Platz waehlen kann.
   ============================================================ */

.werbung-strom {
  margin: 30px 0;
  display: flex; flex-direction: column; align-items: center;
}

/* Nur beschriften, wenn kein Bannermodul darin steckt: Das bringt seine
   eigene Kennzeichnung mit, und "Anzeige" stand dadurch zweimal
   uebereinander. */
.werbung-strom:not(:has(.mod-banners))::before {
  content: "Anzeige";
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #98A2B3;
  margin-bottom: 8px;
  align-self: flex-start;
}

/* Platz reservieren — Werte nach den ueblichen Anzeigenformaten.
   Wird als Modulklassen-Suffix gesetzt, z. B. "anzeige-970x250". */
.werbung-strom > * { width: 100%; display: flex; justify-content: center; }

.anzeige-970x250 { min-height: 250px; }
.anzeige-970x90,
.anzeige-728x90  { min-height: 90px; }
.anzeige-300x250,
.anzeige-336x280 { min-height: 280px; }
.anzeige-fluid   { min-height: 120px; }

/* Auf dem Handy passen die grossen Formate nicht. Google liefert
   dort 320x100 oder 300x250 aus — entsprechend weniger reservieren,
   sonst klafft eine Luecke. */
@media (max-width: 760px) {
  .anzeige-970x250 { min-height: 250px; }
  .anzeige-970x90,
  .anzeige-728x90  { min-height: 100px; }
  .werbung-strom { margin: 24px 0; }
}

/* Anzeigen duerfen die Seite nie breiter machen */
.werbung-strom iframe,
.werbung-strom ins,
.werbung-strom img { max-width: 100%; }

/* ============================================================
   SUCHERGEBNISSEITE
   Laeuft ohne JavaScript und ohne Suchindex — die Abfrage geht
   direkt auf die Beitraege.
   ============================================================ */

.suchseite { max-width: 860px; }

.suchseite-form {
  display: flex; gap: 0;
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--tinte);
}
.suchseite-form .mjsuche-feld {
  flex: 1 1 auto; width: auto;
  font-size: 1.06rem; padding: 13px 16px;
}
.suchseite-form .mjsuche-feld:focus { width: auto; }
.suchseite-form .mjsuche-knopf { padding: 0 24px; font-size: .9rem; }

.suchseite-anzahl {
  margin: 0 0 6px;
  font-family: var(--schrift-titel);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--tinte-weich);
}
.suchseite-anzahl strong { color: var(--tinte); font-weight: 800; }

.suchseite-hinweis {
  margin: 0; padding: 26px 0;
  font-size: 1.05rem; line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 54ch;
}
.suchseite-hinweis strong { color: var(--tinte); }

/* Die Trefferliste ist dieselbe Ortsspalte wie auf der Startseite */
.suchseite-treffer { margin-top: 14px; }
.suchseite-treffer .ph:empty { background: var(--flaeche); }

@media (max-width: 640px) {
  .suchseite-form { flex-wrap: wrap; gap: 8px; }
  .suchseite-form .mjsuche-feld { flex: 1 1 100%; border-right: 1px solid var(--linie); border-radius: 2px; }
  .suchseite-form .mjsuche-knopf { flex: 1 1 100%; padding: 13px; border-radius: 2px; }
}

/* ============================================================
   SERVICEZEILE — Anzeige mittig, E-Paper ganz rechts
   Die Kennzeichnung "Anzeige" ist Pflicht (§ 6 TMG / Trennungs-
   gebot) und muss lesbar sein, nicht nur formal vorhanden.
   ============================================================ */

/* Links stehen links, der Werbeplatz rechts. Bei flex-start klebten
   beide aneinander und der Werbeplatz bekam keinen eigenen Raum. */
.service .wrap { justify-content: space-between; gap: 10px 24px; }
.service > .wrap > nav:first-child { margin-right: auto; }

.service-anzeige {
  display: flex; align-items: center; gap: 10px;
  /* Frueher stand hier flex: 0 1 auto mit min-width: 0 — gegen einen
     Ueberlauf von 8 px. Die Regel hat den Werbeplatz auf JEDER Breite
     auf 0 px zusammengedrueckt: Das Banner wurde geladen und mitgezaehlt,
     war aber unsichtbar. Ein gebuchter Platz, den niemand sieht.

     Jetzt gibt der Platz nicht mehr nach — schrumpfen darf stattdessen
     die Linkleiste daneben, die das ohne Verlust vertraegt. */
  flex: 0 0 auto;
  /* Feste Untergrenze. Ohne sie loeste der Browser die Breite mit 0
     auf — das Banner wurde geladen, gezaehlt und war unsichtbar.
     Unterhalb von 900 px ist der Platz ohnehin ausgeblendet. */
  min-width: 330px;
  max-width: 480px;
  justify-content: flex-end;
}
/* Die Linkleiste darf schrumpfen, aber nicht wachsen: Mit flex: 1 nahm
   sie sich die ganze Zeile und klemmte den Werbeplatz daneben ab. */
.service-links {
  flex: 0 1 auto;
  min-width: 0;
}
/* Frueher stand hier max-width: 100% auf den Kindern. Das laesst deren
   Eigenbreite gegen die Breite des Elternteils laufen — und die ergibt
   sich wieder aus den Kindern. Diese Schleife loest der Browser mit 0
   auf: Der Werbeplatz war auf jeder Bildschirmbreite unsichtbar.
   Begrenzt wird jetzt nur das Bild, und zwar gegen einen festen Wert. */
.service-anzeige .mod-banners,
.service-anzeige .mod-banners__item,
.service-anzeige a { min-width: 0; }
.anzeige-marke {
  font-family: var(--schrift-titel);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #A8BBD8;
  white-space: nowrap;
  flex: none;
}
.service-anzeige img { max-height: 40px; max-width: 468px; width: auto; height: auto; }

.service-rechts { flex: none; }

@media (max-width: 900px) {
  .service-anzeige { display: none; }   /* im schmalen Kopf kein Platz */
}

/* ============================================================
   FORMULARE UND SCHALTFLAECHEN
   Joomlas eigene Ansichten (Kontakt, Login, Suche, Beitrag
   einreichen) benutzen Bootstrap-Klassen. Statt dafuer 200 KB
   Framework zu laden, sind hier genau die Klassen gesetzt, die
   auf dieser Seite wirklich vorkommen: btn, btn-primary,
   btn-secondary, btn-sm, badge.
   ============================================================ */

.btn,
button:not(.mjsuche-knopf):not(.hamburger),
input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 22px;
  font-family: var(--schrift-titel);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--blau); color: #fff;
  border: 1px solid var(--blau); border-radius: 2px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  text-decoration: none;
}
.btn:hover,
button:not(.mjsuche-knopf):not(.hamburger):hover,
input[type="submit"]:hover { background: var(--blau-tief); border-color: var(--blau-tief); color: #fff; }

.btn-secondary {
  background: transparent; color: var(--blau); border-color: var(--linie);
}
.btn-secondary:hover { background: var(--flaeche); color: var(--blau-tief); border-color: var(--blau); }

.btn-sm { min-height: 36px; padding: 7px 14px; font-size: .8rem; }

.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-family: var(--schrift-titel);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .06em;
  background: var(--flaeche); color: var(--tinte-weich);
  border-radius: 999px;
}
.bg-info { background: var(--flaeche-tief); color: var(--blau-tief); }

/* Eingabefelder */
input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="password"], input[type="number"],
input[type="date"], select, textarea {
  font-family: var(--schrift-text); font-size: 1rem;
  width: 100%; max-width: 100%;
  padding: 11px 14px;
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: 2px;
  transition: border-color .18s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blau); }
textarea { min-height: 160px; line-height: 1.5; resize: vertical; }

label {
  display: block; margin-bottom: 5px;
  font-family: var(--schrift-titel);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-weich);
}
label.skip { display: block; }

.control-group, .form-group, fieldset > div { margin-bottom: 18px; }
fieldset { border: 0; margin: 0 0 22px; padding: 0; }
legend {
  font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: 14px; padding: 0;
}
.required, .star { color: var(--rot); }

/* ============================================================
   KONTAKTSEITE
   ============================================================ */

.com-contact { max-width: 760px; }
.com-contact h1, .com-contact h2 {
  font-family: var(--schrift-titel); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.06;
  margin: 0 0 16px;
}
.com-contact h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }

.com-contact__address, .contact-address {
  background: var(--flaeche);
  border-left: 5px solid var(--akzent);
  padding: 20px 22px;
  margin: 0 0 26px;
  font-size: 1.02rem; line-height: 1.6;
}
.contact-name {
  font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 800;
  margin: 0 0 8px;
}
.contact-street, .contact-suburb, .contact-postcode, .contact-country { display: block; }
.com-contact dl { margin: 0; }
.com-contact dt { font-weight: 600; }
.com-contact dd { margin: 0 0 8px; }

/* ============================================================
   KATEGORIELISTE
   ============================================================ */

.com-content-categories { max-width: 900px; }
.categories-list, .com-content-categories__children { list-style: none; margin: 0; padding: 0; }
.com-content-categories__item {
  border-bottom: 1px solid var(--linie-zart);
  padding: 12px 0;
}
.com-content-categories__item-title { margin: 0; }
.com-content-categories__item-title a {
  font-family: var(--schrift-titel);
  font-size: 1.18rem; font-weight: 700;
  color: var(--tinte);
}
.com-content-categories__item-title a:hover { color: var(--akzent); }
.com-content-categories__children { margin: 8px 0 0 18px; }
.com-content-categories__children .com-content-categories__item-title a { font-size: 1rem; font-weight: 600; color: var(--tinte-weich); }

/* ============================================================
   ANMELDUNG
   ============================================================ */

.com-users-login { max-width: 440px; }
.com-users-login__submit { margin-top: 6px; }
.com-users-login__options { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.com-users-login__options ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.com-users-login__options a { color: var(--blau); text-decoration: underline; text-underline-offset: 2px; }
.com-users-login__remember { display: flex; align-items: center; gap: 8px; }
.com-users-login__remember label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--schrift-text); font-weight: 400; font-size: .95rem; color: var(--tinte); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--blau); }

/* Weiterlesen am Ende des Beitrags. Der Block darf breiter sein als
   der Fliesstext — er wird nicht gelesen, sondern ueberflogen. */
.weiterlesen { margin-top: 36px; }
.beitrag .weiterlesen { max-width: none; }

/* ============================================================
   PHOCA DOWNLOAD — Archiv der Printausgaben
   Fremd-Erweiterung mit eigenen Klassen. Statt sie umzubauen,
   wird sie hier in unsere Typografie geholt.
   ============================================================ */

.pd-category-view { max-width: 860px; }

.pd-ctitle {
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800; letter-spacing: .01em; text-transform: uppercase;
  color: var(--tinte);
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--tinte);
  position: relative;
}

.pd-cdesc { margin: 0 0 22px; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; }
.pd-cdesc > div { margin: 0 !important; }
.pd-cdesc p { margin: 0 0 .8em; }

.ph-top { margin-bottom: 16px; }

/* Jahresordner als Raster statt als Liste untereinander */
.pd-category { display: block; }
.pd-subcategory {
  display: inline-block; width: 100%;
}
.pd-category-view .pd-subcategory + .pd-subcategory { margin-top: 0; }

.pd-subcategory a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--linie);
  border-radius: 2px;
  font-family: var(--schrift-titel);
  font-size: 1.08rem; font-weight: 700;
  color: var(--tinte);
  transition: border-color .16s, background .16s;
}
.pd-subcategory a:hover { border-color: var(--akzent); background: var(--flaeche); color: var(--akzent); }
.pd-subcategory small {
  font-family: var(--schrift-text); font-size: .84rem;
  font-weight: 400; color: var(--tinte-weich);
}

/* Dateiliste */
.pd-filename, .pd-filenamebox-bt {
  font-family: var(--schrift-titel);
  font-size: 1.02rem; font-weight: 700;
}
.pd-document16, .pd-cb { border-bottom: 1px solid var(--linie-zart); padding: 11px 0; }
.pd-float { float: none; }
.pd-cv-paginaton { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linie); }
.pd-button-box-bt .btn { min-height: 40px; padding: 9px 16px; font-size: .84rem; }

/* Die Erweiterung bringt englische Beschriftungen mit.
   "Categories" heisst hier "Alle Jahrgaenge". */
.ph-top .btn-primary { font-size: 0; }
.ph-top .btn-primary::after {
  content: "Alle Jahrgänge";
  font-size: .92rem;
}
.ph-top .btn-primary .icon-arrow-left { display: none; }

@media (min-width: 620px) {
  /* Nur die Jahrgangsordner stehen im Raster. Alles andere — auch
     die Dateiliste darunter — laeuft ueber die volle Breite, sonst
     stufen sich die Zeilen im Raster ab. */
  .pd-category { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .pd-category > *:not(.pd-subcategory) { grid-column: 1 / -1; }
  .pd-category > .row { margin-top: 0; }
  .pd-category > .pd-hr-cb { margin-top: 18px; border-top: 2px solid var(--tinte); padding-top: 6px; }
}

/* ============================================================
   BOOTSTRAP-RASTER — nur so viel wie noetig
   Phoca Download baut seine Dateiliste mit row/col-*. Ohne
   Bootstrap laufen die Bloecke sonst ineinander. Statt 200 KB
   Framework zurueckzuholen, hier die vier Zeilen, die den Fall
   abdecken. Bewusst auf den Inhaltsbereich begrenzt.
   ============================================================ */

main .row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 16px;
  border-bottom: 1px solid var(--linie-zart);
  padding: 8px 0;
}
main .row > [class*="col-"] { flex: 1 1 260px; min-width: 0; }
main .row > [class*="col-"]:last-child { flex: 0 0 auto; display: flex; gap: 8px; }

/* Die Erweiterung setzt das PDF-Symbol als Hintergrundbild und
   braucht dafuer Platz auf der linken Seite. */
.pd-document16 { padding-left: 24px; background-size: 16px 16px !important; }
.pd-filename a { font-family: var(--schrift-titel); font-weight: 700; color: var(--tinte); }
.pd-filename a:hover { color: var(--akzent); }
.pd-filenamebox-bt, .pd-document16 { border: 0; padding-top: 0; padding-bottom: 0; }

.pd-button-box-bt { margin: 0; }
.btn-success { background: #127A3F; border-color: #127A3F; }
.btn-success:hover { background: #0E6132; border-color: #0E6132; }
.btn-info { background: transparent; color: var(--blau); border-color: var(--linie); }
.btn-info:hover { background: var(--flaeche); color: var(--blau-tief); border-color: var(--blau); }

@media (max-width: 560px) {
  main .row > [class*="col-"]:last-child { flex: 1 1 100%; }
}

/* Der Rubriklink in der Metazeile war 20 px hoch — zu klein zum
   Antippen. Die Zeile insgesamt bleibt dadurch gleich hoch, weil
   der Innenabstand nach oben und unten geht. */
.meta-rubrik, .beitrag-meta time, .beitrag-meta .lesezeit,
.beitrag-meta .meta-autor {
  display: inline-flex; align-items: center; min-height: 26px;
}
.meta-rubrik { padding: 2px 0; }

/* Tippflaechen in den Listen der Fremd- und Kernansichten.
   Fliesstextlinks bleiben unberuehrt — die sind von der Vorgabe
   ausgenommen, weil sie in einem Satz stehen. Hier geht es um
   Listeneintraege, und die tippt man an. */
.com-content-categories__item-title a,
.pd-float a,
.pd-filename a,
.contact-webpage a,
.contact-emailto a,
joomla-hidden-mail {
  display: inline-flex; align-items: center;
  min-height: 28px;
}
.contact-webpage a, .contact-emailto a, joomla-hidden-mail {
  word-break: break-word;
}

/* Die Hauptueberschrift der Seite sieht aus wie ein Rubrikkopf —
   sie ist einer. Nur ausgezeichnet ist sie als h1. */
.rubrik h1 {
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.rubrik h1::before {
  content: ""; position: absolute;
  left: 0; top: .12em; bottom: .12em;
  width: 7px; background: var(--akzent);
}

/* Hauptueberschriften, die aus Joomlas eigenen Ansichten kommen —
   Kategorieliste, Kontakt, Anmeldung, Phoca Download. Sie sehen
   aus wie unsere Rubrikkoepfe, damit die Seite eine Handschrift hat. */
main > .wrap h1:not(.beitrag-titel):not(.fehler-titel),
.page-header h1,
.com-content-categories > h1,
.com-contact > h1,
.com-users-login > h1,
.pd-category-view > h1 {
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0 0 22px;
  padding: 0 0 10px 18px;
  border-bottom: 2px solid var(--tinte);
  position: relative;
}
main > .wrap h1:not(.beitrag-titel):not(.fehler-titel)::before,
.page-header h1::before {
  content: ""; position: absolute;
  left: 0; top: .1em; height: .82em;
  width: 7px; background: var(--akzent);
}
/* Der Rubrikkopf bringt seinen Rahmen schon selbst mit */
.rubrik h1 { border-bottom: 0; margin: 0; padding-bottom: 0; }
.rubrik h1::before { top: .12em; bottom: .12em; height: auto; }

/* Joomlas Kategorieansicht versteckt Unterkategorien hinter einem
   Aufklapp-Schalter, der Bootstrap-JavaScript braucht. Das laden wir
   nicht — der Schalter waere also ein Knopf, der nichts tut, und die
   Unterkategorien blieben unerreichbar. Deshalb: immer offen,
   Schalter weg. */
/* Joomlas Kategorie-Aufklapper funktionieren mit eigenem
   JavaScript — sie muessen also bleiben. Ihr Symbol kommt aber aus
   einer Icon-Schrift, die wir nicht laden: ohne Ersatz waeren es
   leere Kaesten. Deshalb ein Zeichen aus der Schrift selbst. */
.com-content-categories button[data-category-id] {
  background: transparent !important;
  color: var(--blau) !important;
  border: 1px solid var(--linie) !important;
  min-width: 40px; min-height: 40px; padding: 0 !important;
  font-size: 0;
}
.com-content-categories button[data-category-id]::before {
  content: "+";
  font-family: var(--schrift-titel);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--blau);
}
.com-content-categories button[data-category-id][aria-expanded="true"]::before { content: "–"; }
.com-content-categories button[data-category-id]:hover {
  border-color: var(--akzent) !important;
}
.com-content-categories button[data-category-id]:hover::before { color: var(--akzent); }

.com-content-categories__item .badge {
  margin-left: 8px;
  font-size: .7rem;
  vertical-align: middle;
}

/* Blaetterung der Suchergebnisse. Bewusst mit "Neuere" und "Ältere"
   statt "Zurueck" und "Weiter": Bei Nachrichten sagt die Richtung in
   der Zeit mehr als die Richtung in der Liste. */
.suchseite-blaettern {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.suchseite-blaettern a {
  display: inline-flex; align-items: center;
  min-height: 46px; padding: 0 20px;
  font-family: var(--schrift-titel);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent);
  border: 1px solid var(--linie);
  border-radius: 2px;
  transition: border-color .16s, background .16s;
}
.suchseite-blaettern a:hover { border-color: var(--akzent); background: var(--flaeche); }
.suchseite-blaettern a[rel="next"] { margin-left: auto; }
.blaettern-stand {
  font-family: var(--schrift-titel);
  font-size: .84rem; letter-spacing: .06em;
  color: var(--tinte-weich);
  order: 1; width: 100%; text-align: center;
}

@media (min-width: 560px) {
  .blaettern-stand { order: 0; width: auto; }
}

/* Eingebettete Rahmen — Flipbook, Karten, Videos. Fremd-Erweiterungen
   setzen dort feste Breiten in Pixeln. Auf 320 px schiebt das die
   ganze Seite zur Seite. */
main iframe, main embed, main object, main video {
  max-width: 100%;
  height: auto;
}
main iframe[width][height] { aspect-ratio: attr(width) / attr(height); }

/* ============================================================
   SYMBOLE AUS JOOMLAS ICON-SCHRIFT
   Joomlas eigene Ansichten setzen <span class="icon-...">.
   Die Schrift dazu laden wir nicht — ohne Ersatz waeren das leere
   Kaesten in der Blaetterung und in der Kontaktliste.
   Ersetzt sind genau die zwoelf, die auf dieser Seite vorkommen;
   gezaehlt, nicht geraten.
   ============================================================ */

[class^="icon-"], [class*=" icon-"] {
  font-style: normal; font-weight: 400;
  line-height: 1;
  display: inline-block;
}
[class^="icon-"]::before, [class*=" icon-"]::before {
  font-family: var(--schrift-text);
}

.icon-angle-left::before        { content: "‹"; font-size: 1.3em; }
.icon-angle-right::before       { content: "›"; font-size: 1.3em; }
.icon-angle-double-left::before { content: "«"; font-size: 1.1em; }
.icon-angle-double-right::before{ content: "»"; font-size: 1.1em; }
.icon-plus::before              { content: "+"; font-size: 1.2em; }
.icon-home::before              { content: "⌂"; }
.icon-phone::before             { content: "Tel."; font-family: var(--schrift-titel); font-size: .7em; letter-spacing: .06em; }
.icon-fax::before               { content: "Fax"; font-family: var(--schrift-titel); font-size: .7em; letter-spacing: .06em; }
.icon-envelope::before          { content: "@"; }
.icon-address::before           { content: "▸"; }
.icon-eye::before               { content: "◉"; }
.icon-fw { width: 1.1em; text-align: center; }

/* Blaetterung von Joomla — dieselbe Optik wie unsere eigene */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.page-item { display: block; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  font-family: var(--schrift-titel); font-weight: 700;
  color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 2px;
  transition: border-color .16s, color .16s, background .16s;
}
a.page-link:hover { border-color: var(--akzent); color: var(--akzent); background: var(--flaeche); }
.page-item.active .page-link {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
.page-item.disabled .page-link { color: #B4BECC; border-color: var(--linie-zart); }
.pagination__wrapper { margin: 0; }
.counter { font-family: var(--schrift-titel); font-size: .84rem; color: var(--tinte-weich); }

/* Die Kategorielisten-Ansicht setzt eine englische Zwischenueberschrift
   "Categories" ueber die Liste. Sie sagt nichts, was die Seite nicht
   schon sagt — die Hauptueberschrift steht darueber. */
.com-content-categories > h2:first-of-type,
.categories-list > h2:first-of-type { display: none; }

/* ============================================================
   EIGENWERBUNG — füllt jeden unverkauften Platz
   Ein Banner für alle Formate. Er richtet sich nach der Breite
   SEINES PLATZES, nicht nach der des Bildschirms — deshalb
   Container-Abfragen. Vom 970×90-Leaderboard bis zum
   160×600-Skyscraper dieselbe Datei.
   ============================================================ */

.mod-banners { container-type: inline-size; container-name: werbeplatz; }

.hausanzeige {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  background: var(--blau-tief);
  color: #fff;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  text-align: left;
  min-height: 90px;
  transition: background .2s;
}
.hausanzeige::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange);
}
.hausanzeige:hover { background: #16294D; }

.hausanzeige-klein {
  font-family: var(--schrift-titel);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange);
}
.hausanzeige-gross {
  font-family: var(--schrift-titel);
  font-size: 1.3rem; font-weight: 800;
  line-height: 1.04; letter-spacing: -.01em;
}
.hausanzeige-text {
  font-size: .84rem; line-height: 1.4;
  color: #B9C7DF;
}
.hausanzeige-cta {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 36px; padding: 0 16px; margin-top: 6px;
  font-family: var(--schrift-titel);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--orange); color: #1A1D22;
  border-radius: 2px;
}

/* Breiter, flacher Platz (Leaderboard): alles nebeneinander */
@container werbeplatz (min-width: 620px) {
  .hausanzeige {
    flex-direction: row; align-items: center; gap: 18px;
    min-height: 90px; padding: 10px 20px;
  }
  .hausanzeige-klein { flex: none; writing-mode: horizontal-tb; }
  .hausanzeige-gross { font-size: 1.24rem; flex: none; }
  .hausanzeige-text  { flex: 1 1 auto; }
  .hausanzeige-cta   { margin-top: 0; flex: none; }
}

/* Schmaler Platz (Rectangle, Skyscraper): der Anrisstext fliegt raus,
   dort zählt jede Zeile */
@container werbeplatz (max-width: 260px) {
  .hausanzeige { padding: 14px; }
  .hausanzeige-gross { font-size: 1.12rem; }
  .hausanzeige-text { display: none; }
}

/* Sehr kleiner Platz (180×150): nur die Aussage und der Knopf */
@container werbeplatz (max-width: 200px) {
  .hausanzeige-gross { font-size: 1rem; }
  .hausanzeige-cta { font-size: .72rem; padding: 0 10px; min-height: 32px; }
}

/* Kein Browser mit Container-Abfragen: der senkrechte Aufbau
   funktioniert überall, nur ohne Feinschliff. */
@supports not (container-type: inline-size) {
  .hausanzeige-text { display: block; }
}

/* Ortsleiste unter der Hauptüberschrift. Sie ist Navigation, kein
   Schmuck: Der Leser aus Speyer soll nicht erst ins Menü müssen. */
.blog-neu > .orte {
  margin: -6px 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linie-zart);
}
.orte-alle {
  border-color: transparent !important;
  color: var(--akzent) !important;
  font-weight: 700;
}
.orte-alle:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) {
  /* Auf dem Handy waagerecht wischbar statt in vier Zeilen umbrechen —
     hier ist das richtig, weil jede Schaltfläche für sich steht und
     die erste Reihe schon die größten Orte zeigt. */
  .blog-neu > .orte {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -22px; margin-right: -22px;
    padding-left: 22px; padding-right: 22px;
  }
  .blog-neu > .orte::-webkit-scrollbar { display: none; }
  .blog-neu > .orte a { flex: none; }
}

/* ============================================================
   LOGO
   Als Bilddatei, nicht als Schriftzug: Eine Marke darf nicht davon
   abhängen, ob eine Schriftdatei geladen wurde. Die Textfassung
   bleibt als Rückfall, falls die Datei einmal fehlt.
   ============================================================ */

.logo { display: block; flex: none; }
.logo img {
  display: block;
  height: clamp(38px, 2.2vw + 24px, 58px);
  width: auto;
  max-width: 100%;
}
.logo-ersatz {
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 800; letter-spacing: -.018em; line-height: .92;
  text-transform: uppercase; color: var(--blau);
}
.logo-ersatz em { font-style: normal; font-weight: 400; color: var(--tinte); }

@media (max-width: 900px) {
  .logo img { height: 34px; }
}

/* Werbeplatz nach dem Beitrag. Er steht bewusst VOR den Weiterlesen-
   Vorschlägen: wer zu Ende gelesen hat, ist aufmerksam — danach
   entscheidet er, ob er weiterliest. */
.werbung-nach-beitrag { margin: 32px 0 0; }
.beitrag + .werbung-nach-beitrag { margin-top: 24px; }

/* ==========================================================================
   ANZEIGENBAND — die Loesung fuer den Leerraum

   Die Seitenspalte war auf jeder Seite gleich hoch (2984 px), egal wie viel
   auf der Seite stand. Auf "Gewinnen" standen 819 px Inhalt gegen 2984 px
   Spalte: ueber zwei Bildschirmhoehen Loch.

   Jetzt bleiben oben drei Kaesten stehen, der Rest steht als Band unter dem
   Inhalt. Das Band ist immer voll, weil es die Breite hat, die es braucht —
   ein Raster, das sich selbst auffuellt. Keine Anzeige geht verloren.
   ========================================================================== */
.anzeigenband {
  /* Spaltensatz statt Raster: Die Anzeigen sind unterschiedlich hoch —
     ein Logo neben einem Kasten mit vier Zeilen Text. In einem Raster
     bestimmt das hoechste Feld die ganze Reihe, und daneben steht Luft.
     Im Spaltensatz laufen sie einfach weiter, bis die Spalte voll ist. */
  columns: 4 200px;
  column-gap: 26px;
  margin: 40px 0 8px;
  padding-top: 26px;
  border-top: 2px solid var(--linie, #E3E7EE);
}
.anzeigenband > * {
  margin: 0 0 24px;
  break-inside: avoid;          /* keine Anzeige ueber zwei Spalten reissen */
  -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%;
}
.anzeigenband img { max-width: 100%; height: auto; }

/* Die Spalte selbst laeuft ueber die volle Hoehe — sichtbar ist sie nicht,
   sie ist nur der Raum, in dem die letzte Anzeige mitwandern kann. */
.sidebar { align-self: stretch; }

/* Sind wenige Anzeigen da, bleibt die letzte beim Weiterlesen stehen,
   statt oben aus dem Bild zu laufen. Kein Overlay, sie verdeckt nichts —
   deshalb auch mit Google-Anzeigen zulaessig. Nur am Rechner: auf dem
   Handy laege sie ueber dem Text, und das verbietet Google zu Recht. */
@media (min-width: 901px) {
  .sidebar > *:last-child { position: sticky; top: 88px; }
}

/* ==========================================================================
   BILD IM BEITRAG
   Die Bildzeile stand vorher frei im Weissraum und wirkte verloren. Jetzt
   ist sie eine Leiste, die sichtbar zum Bild gehoert: buendig, mit einer
   Kante in der Rubrikfarbe.
   ========================================================================== */
.beitrag-bild { margin: 0 0 28px; }
.beitrag-bild .rahmen {
  display: block; overflow: hidden;
  background: #EDF0F5;
  border-radius: 2px;
}
.beitrag-bild img { width: 100%; height: auto; display: block; }

.bildzeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-top: 0;
  padding: 9px 13px 10px;
  background: #F4F6FA;
  border-left: 3px solid var(--akzent, #D62828);
  font-size: .82rem; line-height: 1.45;
  color: #4A566B;
}
.bildzeile .bildtext { flex: 1 1 240px; min-width: 0; }
.bildzeile .bildquelle {
  flex: 0 0 auto;
  font-family: var(--schrift-titel);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #7A8699;
}

/* KI-Kennzeichnung nach Artikel 50 der KI-Verordnung, Pflicht seit dem
   2. August 2026. Sie steht als Text in der Bildzeile, nicht als Schild:
   Ein Warnschild an einem Symbolbild waere lauter als die Nachricht
   daneben — und wuerde jedes Foto verdaechtig machen, das keines hat. */
.ki-hinweis {
  flex: 0 0 auto;
  font-style: italic;
  color: #6E7A8C;
}
.ki-hinweis::before { content: "· "; font-style: normal; color: #A9B3C2; }

/* ==========================================================================
   BILDER IN KACHELN — ruhiger Zoom beim Zeigen.
   Nur dort, wo auch wirklich ein Link dahintersteht: eine Bewegung, die
   nichts verspricht, irritiert.
   ========================================================================== */
.kachel .ph, .liste .ph, .aufmacher .ph { overflow: hidden; }
.kachel .ph img, .liste .ph img, .aufmacher .ph img {
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.kachel:hover .ph img,
.liste a:hover .ph img,
.aufmacher:hover .ph img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .kachel .ph img, .liste .ph img, .aufmacher .ph img { transition: none; }
  .kachel:hover .ph img, .liste a:hover .ph img, .aufmacher:hover .ph img { transform: none; }
}

/* ==========================================================================
   FREMDKOMPONENTEN
   Phoca Download legt seine Dialoge als normale Absaetze in die Seite. Ohne
   Bootstrap davor standen auf der Mediadaten-Seite "Title", "Close",
   "Details", "Play" und "Preview" mitten im Inhalt.
   ========================================================================== */
.modal, .ph-modal, #pdCategoryModal, #phModalDetail, #phModalPlay, #phModalPreview { display: none; }
.ph-top, .pd-csv-paginaton { margin: 0 0 18px; }

/* ==========================================================================
   WERBUNG AUF DEM HANDY
   Bannerbilder sind fast nie so breit wie die Spalte und fast nie gleich
   gross. Ohne feste Regel steht mal eines randlos, mal eines mit 80 px
   Rand daneben. Deshalb: alle mittig, alle auf Spaltenbreite gedeckelt.
   ========================================================================== */
@media (max-width: 860px) {
  .anzeigenband { columns: 2 150px; column-gap: 16px; margin-top: 30px; }
  .anzeigenband > * { margin-bottom: 16px; }
  .werbeblock, .werbung-strom { margin-left: 0; margin-right: 0; }
  .werbeblock img, .anzeigenband img, .sidebar img { max-width: 100%; height: auto; }
  .mod-banners { text-align: center; }
  .mod-banners img { margin-inline: auto; }
  .bildzeile { font-size: .8rem; padding: 8px 11px 9px; }
  .bildzeile .bildquelle { flex-basis: 100%; }
}
@media (max-width: 359px) {
  .anzeigenband { columns: 1; }
}

/* ==========================================================================
   BILDER IM BEITRAGSTEXT

   Die Redaktion setzt Bilder einfach in den Text — mal eines, mal fuenf
   untereinander, oft mit einer festen Breite aus dem Editor. Die Masse aus
   dem Editor entfernt die Vorlage bereits serverseitig; hier steht, wie das
   Ergebnis aussieht. Die Regeln greifen unabhaengig davon, was jemand im
   Editor eingestellt hat.
   ========================================================================== */
.einzelbild { margin: 26px 0; }
.einzelbild img { width: 100%; height: auto; display: block; border-radius: 2px; }

/* Mehrere Bilder hintereinander werden zur Galerie: gleich hohe Kacheln
   statt einer Kette unterschiedlich hoher Bloecke. */
.bildergruppe {
  display: grid; gap: 10px;
  margin: 26px 0;
  grid-template-columns: repeat(2, 1fr);
}
.bildergruppe[data-anzahl="3"] { grid-template-columns: repeat(3, 1fr); }
.bildergruppe[data-anzahl="5"],
.bildergruppe[data-anzahl="6"] { grid-template-columns: repeat(3, 1fr); }

/* Das erste Bild einer grossen Galerie bekommt mehr Gewicht — sonst sind
   sechs gleich grosse Kacheln eine Tapete ohne Aussage. */
.bildergruppe[data-anzahl="5"] .gbild:first-child,
.bildergruppe[data-anzahl="6"] .gbild:first-child {
  grid-column: span 2; grid-row: span 2;
}

.bildergruppe .gbild { margin: 0; min-width: 0; }
.bildergruppe .gross { display: block; overflow: hidden; border-radius: 2px; background: #EDF0F5; }
.bildergruppe .gross img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.bildergruppe[data-anzahl="5"] .gbild:first-child .gross img,
.bildergruppe[data-anzahl="6"] .gbild:first-child .gross img { aspect-ratio: 4 / 3.2; }
.bildergruppe .gross:hover img, .bildergruppe .gross:focus-visible img { transform: scale(1.05); }

.einzelbild .gross { display: block; overflow: hidden; border-radius: 2px; }
.einzelbild .gross img { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.einzelbild .gross:hover img { transform: scale(1.02); }

.gzeile {
  margin: 7px 0 0;
  font-size: .82rem; line-height: 1.45; color: #5A667B;
  border-left: 3px solid var(--akzent, #D62828); padding-left: 10px;
}

/* Zaehler auf der Galerie, damit man sieht, dass es mehr zu sehen gibt. */
.bildergruppe { position: relative; }
.bildergruppe::after {
  content: attr(data-anzahl) " Bilder";
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(12,22,42,.78);
  padding: 4px 9px; border-radius: 2px;
  pointer-events: none;
}

/* ---------- Grossansicht ----------
   Ueber :target, also ohne eine Zeile Skript. Ohne Treffer in der
   Adresse ist der Kasten schlicht nicht da. */
.leuchtkasten { display: none; }
.leuchtkasten:target {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 900;
  padding: 24px;
  background: rgba(8,14,28,.93);
}
.lk-hinter { position: absolute; inset: 0; cursor: zoom-out; }
.lk-inhalt {
  position: relative; z-index: 1;
  max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lk-inhalt img {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  display: block; border-radius: 2px;
}
.lk-zeile { margin: 0; color: #C7D2E4; font-size: .88rem; text-align: center; max-width: 70ch; }
.lk-zu {
  font-family: var(--schrift-titel);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #0C162A; background: #fff;
  padding: 9px 20px; border-radius: 2px;
}
.lk-zu:hover, .lk-zu:focus-visible { background: var(--signal, #D62828); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bildergruppe .gross img, .einzelbild .gross img { transition: none; }
  .bildergruppe .gross:hover img, .einzelbild .gross:hover img { transform: none; }
}

@media (max-width: 640px) {
  .bildergruppe,
  .bildergruppe[data-anzahl="3"],
  .bildergruppe[data-anzahl="5"],
  .bildergruppe[data-anzahl="6"] { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .bildergruppe[data-anzahl="5"] .gbild:first-child,
  .bildergruppe[data-anzahl="6"] .gbild:first-child { grid-column: span 2; grid-row: auto; }
  .leuchtkasten:target { padding: 12px; }
  .lk-inhalt img { max-height: 68vh; }
}

/* ==========================================================================
   KOPF AUF DEM HANDY
   Das Logo stand in einer eigenen weissen Zeile ueber der Menueleiste und
   wirkte dort verloren — eine halbe Bildschirmhoehe fuer eine Marke, die
   niemand sucht. Unterhalb des Umbruchpunkts steht es deshalb in der
   Menueleiste selbst, links, mit dem Menue rechts daneben.
   ========================================================================== */
.logo-leiste { display: none; }

@media (max-width: 900px) {
  .brand { display: none; }

  .haupt .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
  }
  .logo-leiste {
    display: block; flex: 0 1 auto; min-width: 0;
    padding: 9px 0;
  }
  .logo-leiste img {
    height: 38px; width: auto; max-width: 100%; display: block;
  }
  .logo-leiste .logo-ersatz { color: #fff; font-size: 1.3rem; }
  .hamburger { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .logo-leiste img { height: 30px; }
}

/* ==========================================================================
   LUFT UNTER DER MENUELEISTE
   Die Ortsmarke der Beitraege ("— HOCKENHEIM") sass direkt auf der blauen
   Leiste. Eine Ueberschrift braucht Raum ueber sich, sonst liest sie sich
   als Teil der Navigation und nicht als Anfang des Beitrags.
   ========================================================================== */
#inhalt > .wrap > .spalten { margin-top: 26px; }
#inhalt > .wrap > .werbeblock:first-child { margin-top: 20px; }

@media (max-width: 860px) {
  #inhalt > .wrap > .spalten { margin-top: 18px; }
}

/* Bildunterschrift einer Galerie steht unter der ganzen Gruppe. */
.gzeile-gruppe { margin-top: 4px; }

/* ==========================================================================
   IM BLICKPUNKT — die Hauptbeitraege ganz oben auf der Startseite

   Kein Karussell. Was durchlaeuft, sieht niemand: Bei Startseiten-Slidern
   entfallen fast alle Klicks auf das erste Bild, alles danach ist
   verschenkter Platz. Acht sichtbare Meldungen schlagen acht versteckte.

   Der erste Beitrag ist gross, die uebrigen sind Kacheln. Die letzten
   werden so weit gezogen, bis die Reihe aufgeht — sonst stuende am Ende
   des Rasters wieder ein Loch.
   ========================================================================== */
.blickpunkt { margin: 0 0 42px; }

.blick-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 14px;
}

.blick-kachel {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #0C162A;
  border-radius: 2px;
  color: #fff;
  text-decoration: none;
}
.blick-kachel.gross { grid-column: span 2; grid-row: span 2; }

.blick-kachel .ph { display: block; width: 100%; height: 100%; }
.blick-kachel .ph img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.blick-kachel.gross .ph img { aspect-ratio: 4 / 3; }
.blick-kachel:hover .ph img { transform: scale(1.05); }

/* Der Text liegt auf dem Bild. Damit er auf jedem Foto lesbar bleibt —
   auch auf einem hellen Himmel — steht ein Verlauf darunter, kein
   halbdurchsichtiger Kasten: Der Verlauf verdeckt das Motiv nicht. */
.blick-kachel .text {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  padding: 44px 14px 13px;
  /* Gemessen: Der Kicker sitzt bei 56-66 % der Kastenhoehe. Der alte
     Verlauf deckte dort nur 45-59 % - auf einem hellen Himmel blieben
     fuer die Rubrikfarbe 1,13:1. Der Knick wandert deshalb hoch, ueber
     den Kicker. Ein Foto ist redaktionell nicht kontrollierbar; der
     unguenstigste Fall ist der Massstab. */
  background: linear-gradient(to top,
              rgba(6,12,24,.95) 0%,
              rgba(6,12,24,.92) 62%,
              rgba(6,12,24,.80) 74%,
              rgba(6,12,24,0)  100%);
}
.blick-kachel .kicker {
  display: block;
  font-family: var(--schrift-titel);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  /* Eigene, hellere Stufe fuer Text auf Bild: --akzent-hell traegt den
     Strich im blauen Menue, dort genuegen 3:1 - hier braucht es 4,5:1. */
  color: var(--akzent-bild, #FF9094);
  margin-bottom: 5px;
}
.blick-kachel .hl {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700; line-height: 1.16;
  font-size: 1.02rem;
  color: #fff;
  /* Zwei Zeilen. Eine dritte wuerde die Kachel darunter nach unten
     druecken und das Raster zerreissen. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blick-kachel.gross .hl { font-size: 1.72rem; -webkit-line-clamp: 3; }
.blick-kachel .zeit {
  display: block; margin-top: 6px;
  font-size: .74rem; color: #A9B8CE;
}

/* Eine Kante in der Rubrikfarbe, damit man auch im Blickpunkt sieht,
   woher eine Meldung kommt. */
.blick-kachel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; z-index: 1;
  background: var(--akzent, #D62828);
}

.blick-kachel:focus-visible { outline: 3px solid var(--akzent-hell, #FF6B6B); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .blick-kachel .ph img { transition: none; }
  .blick-kachel:hover .ph img { transform: none; }
}

@media (max-width: 1000px) {
  .blick-raster { grid-template-columns: repeat(3, 1fr); }
  .blick-kachel.gross .hl { font-size: 1.44rem; }
}

@media (max-width: 700px) {
  .blick-raster { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .blick-kachel.gross { grid-column: span 2; grid-row: span 1; }
  .blick-kachel .hl { font-size: .94rem; }
  .blick-kachel.gross .hl { font-size: 1.3rem; -webkit-line-clamp: 3; }
  .blick-kachel .text { padding: 34px 11px 11px; }
}

@media (max-width: 420px) {
  .blick-raster { grid-template-columns: 1fr; }
  .blick-kachel.gross { grid-column: span 1; }
}

/* Aufmacherbild: Es ist jetzt ein Link auf die Grossansicht, deshalb darf
   es sich beim Zeigen bewegen. Eine Animation auf einem Bild, das nichts
   tut, verspricht etwas, das nicht kommt — das ist der Unterschied. */
a.rahmen { cursor: zoom-in; }
a.rahmen img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
a.rahmen:hover img, a.rahmen:focus-visible img { transform: scale(1.03); }
a.rahmen:focus-visible { outline: 3px solid var(--akzent, #D62828); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  a.rahmen img { transition: none; }
  a.rahmen:hover img { transform: none; }
}

/* ==========================================================================
   MITLAUFENDE MENUELEISTE MIT LOGO (Desktop)

   Die Leiste bleibt beim Scrollen oben stehen, und sobald die Markenzeile
   darueber weggescrollt ist, faehrt das Logo daneben ein. Die Marke ist
   damit immer sichtbar, ohne dass sie doppelt dasteht, solange man oben ist.

   Gemacht ueber eine scrollgesteuerte Animation — ohne eine Zeile Skript.
   Wo der Browser das noch nicht kann (Firefox),
   bleibt die Leiste einfach oben stehen, ohne Logo: Die Seite verliert
   nichts, sie kann nur eine Kleinigkeit weniger.
   ========================================================================== */
@media (min-width: 901px) {
  .haupt {
    position: sticky; top: 0; z-index: 500;
    /* Damit die Leiste beim Ueberdecken nicht flach wirkt. */
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
  .haupt .wrap { display: flex; align-items: stretch; }
  .punkte { flex: 1 1 auto; }

  .logo-leiste {
    display: flex; align-items: center;
    flex: 0 0 auto;
    width: 0; opacity: 0; margin-right: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .logo-leiste img {
    height: 34px; width: auto; display: block;
    /* Ohne das staucht das Bild, waehrend die Flaeche aufgeht: Der
       Container waechst von 0 auf 210 px, und max-width: 100% zwingt
       das Logo, jede Zwischenbreite mitzumachen. Es soll aber
       freigelegt werden, nicht gequetscht. */
    max-width: none;
  }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 901px) {
    .logo-leiste {
      animation: logo-einfahren linear both;
      animation-timeline: scroll(root block);
      /* Erst wenn die Markenzeile oben wirklich weg ist. */
      animation-range: 70px 165px;
      pointer-events: auto;
    }
  }

  @keyframes logo-einfahren {
    from { width: 0;     opacity: 0; margin-right: 0; }
    to   { width: 122px; opacity: 1; margin-right: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Kein Ein- und Ausfahren, aber sichtbar bleiben soll es trotzdem. */
    .logo-leiste { animation: none; width: 122px; opacity: 1; margin-right: 24px; pointer-events: auto; }
  }
}

/* Auf schmalen Desktopbreiten darf das Suchfeld schrumpfen, statt die
   Markenzeile aufzureissen — aber nie unter das, was der Hinweistext
   braucht. Darunter greift ohnehin die Handyansicht. */
@media (max-width: 1080px) and (min-width: 901px) {
  .suche input { width: 240px; }
  .claim { display: none; }
}

/* ==========================================================================
   MENUEPUNKTE BRECHEN NICHT UM
   Sobald das Logo in die Leiste einfaehrt, wird der Platz fuer die Punkte
   enger. "FREIZEIT & REISEN" ist dann in zwei Zeilen gesprungen und hat
   die ganze Leiste hoeher gemacht — mitten in der Scrollbewegung.
   Also: nie umbrechen, stattdessen enger setzen, wenn es eng wird.
   ========================================================================== */
.punkt { white-space: nowrap; }

@media (min-width: 901px) and (max-width: 1260px) {
  .punkt { padding: 15px 12px; font-size: .95rem; letter-spacing: .03em; }
  .punkt::after { left: 12px; right: 12px; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .punkt { padding: 15px 9px; font-size: .88rem; letter-spacing: .02em; }
  .punkt::after { left: 9px; right: 9px; }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 901px) and (max-width: 1120px) {
    /* Bei wenig Platz faehrt das Logo kleiner ein, damit die Punkte
       nicht gequetscht werden. */
    @keyframes logo-einfahren {
      from { width: 0;     opacity: 0; margin-right: 0; }
      to   { width: 104px; opacity: 1; margin-right: 14px; }
    }
  }
}

/* ==========================================================================
   ANZEIGE IM RASTER — als Querbanner ueber die ganze Reihe

   Erster Versuch war, die Anzeige in das freie Feld am Ende einer
   Dreierreihe zu setzen. Das geht nur auf, wenn das Banner auch
   Querformat hat. Ein Hochkantbanner in einem Feld, das fuer ein
   liegendes Bild gebaut ist, steht dort verloren — und genau die
   Hochkantbanner sind es, die uebrig bleiben.

   Deshalb laeuft die Anzeige jetzt ueber die volle Breite der Reihe.
   Jedes Format sitzt darin mittig und sieht gewollt aus.
   ========================================================================== */
.kachel-anzeige {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: 16px 0 4px;
  border-top: 1px solid var(--linie-zart, #E8EBF0);
}
.kachel-anzeige img { max-width: 100%; height: auto; }

/* Anzeigen, die zwischen den Bloecken stehen: ruhig, mittig, nicht
   breiter als noetig. Sie sollen im Lesefluss liegen, nicht ihn stauen. */
.werbung-verteilt {
  display: flex; flex-direction: column; align-items: center;
  margin: 26px 0;
}
.werbung-verteilt img { max-width: 100%; height: auto; }

.liste-anzeige { margin: 18px 0; }

@media (max-width: 700px) {
  .kachel-anzeige { padding: 12px 0 2px; }
  .werbung-verteilt { margin: 20px 0; }
}

/* ==========================================================================
   KENNZEICHNUNG AUCH FUER FREMDE ANZEIGEN (Google Ads & Co.)

   Die Regel oben haengt am Bannermodul von Joomla. Eine Google-Anzeige
   kommt aber nicht als Bannermodul, sondern als Modul mit eigenem HTML —
   und Google selbst beschriftet nichts. Die Kennzeichnungspflicht liegt
   beim Herausgeber (Trennungsgebot, § 6 TMG, Pressekodex Ziffer 7), nicht
   beim Vermarkter.

   Deshalb traegt ab hier die Werbeflaeche selbst die Kennzeichnung —
   ausser sie enthaelt schon ein Bannermodul, das sie mitbringt. Sonst
   stuende "Anzeige" zweimal uebereinander.
   ========================================================================== */
.werbeblock:not(:has(.mod-banners))::before,
.kachel-anzeige:not(:has(.mod-banners))::before,
.anzeigenband > *:not(:has(.mod-banners)):not(.mod-banners)::before {
  content: "Anzeige";
  display: block;
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #6E7787;
  margin-bottom: 2px;
  text-align: left;
}

/* Eine Flaeche, in der gar nichts steht, wird nicht beschriftet: Ein
   "Anzeige" ueber weissem Nichts sieht nach Fehler aus. */
.werbeblock:empty::before,
.kachel-anzeige:empty::before { content: none; }

/* ==========================================================================
   ZAEHLPIXEL VON JOOMLAS BANNERVERWALTUNG

   Neben jedem Werbemittel gibt Joomla ein 46 x 4 Pixel grosses Bild aus,
   ueber das es die Einblendungen zaehlt. In der Anzeigenflaeche sass es
   als winziger Strich unter der Beschriftung "Anzeige" — sichtbar und
   unerklaerlich.

   Entfernen darf man es nicht: Dann zaehlt Joomla nicht mehr und der
   Kunde bekommt falsche Zahlen in seinem Bericht. Es bleibt also im
   Quelltext und wird nur aus dem Bild genommen.
   ========================================================================== */
.mod-banners img[width="46"],
.mod-banners img[height="4"],
.werbeblock img[width="1"],
.werbeblock img[height="1"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
/* ==========================================================================
   EIN FORMAT FUER DIE BAENDER ZWISCHEN DEN BLOECKEN

   Die Banner kommen in unterschiedlichen Groessen herein — 728 x 90,
   970 x 90, 970 x 250. Ohne feste Regel sitzt jedes anders, und die Seite
   wirkt zusammengewuerfelt.

   Festgelegt: 970 px Breite, mittig. Das ist das Format, das die groessten
   Kunden ohnehin liefern (rnv, Ellin). Kleinere Banner werden nicht
   hochskaliert — sie stehen mittig in derselben Flaeche und sitzen damit
   trotzdem auf einer Linie mit allen anderen.

   Fuer die Mediadaten heisst das: Grossformat 970 x 250, Standardband
   970 x 90, ersatzweise 728 x 90.
   ========================================================================== */
.werbung-verteilt,
.kachel-anzeige,
.werbung-oben,
.werbung-mitte {
  display: flex; flex-direction: column; align-items: center;
}
.werbung-verteilt > *,
.kachel-anzeige > *,
.werbung-oben > *,
.werbung-mitte > * {
  width: 100%; max-width: 970px;
  display: flex; justify-content: center;
}
.werbung-verteilt img,
.kachel-anzeige img,
.werbung-oben img,
.werbung-mitte img {
  max-width: min(100%, 970px); height: auto;
}

/* Die Beschriftung steht linksbuendig ueber der Flaeche, nicht mittig:
   Sie gehoert zur Seite, nicht zur Anzeige. */
.werbung-verteilt::before,
.kachel-anzeige::before,
.werbung-oben::before,
.werbung-mitte::before { align-self: flex-start; }

/* ==========================================================================
   KLEINE ANZEIGEN IN DER SPALTE

   Mehrere Werbekunden liefern nur ein Logo — Fakt-in, FM-PRO,
   Metropolregion.TV. Steht so ein Logo in einem Kasten, der fuer ein
   Rectangle gebaut ist, sitzt es in viel Weissraum und wirkt verloren.
   Der Kasten soll sich um das Motiv legen, nicht umgekehrt.
   ========================================================================== */
.sidebar .mod-banners { margin-bottom: 26px; }
.sidebar .mod-banners img { max-width: 100%; height: auto; display: block; }

/* Kein zusaetzlicher Innenabstand um ein Bild, das ohnehin Rand mitbringt. */
.sidebar .kasten:has(.mod-banners) { padding: 0; border: 0; }
.sidebar .banneritem { margin: 0; }
.sidebar .banneritem + .banneritem { margin-top: 18px; }
/* ==========================================================================
   EIGENANZEIGE IM QUERFORMAT

   Steht zwischen zwei Rubriken, wo kein Platz verkauft ist. Sie hat die
   Proportion eines Leaderboards (970 x 90 bis 970 x 130), damit sie
   spaeter nahtlos durch ein gebuchtes Banner ersetzt werden kann, ohne
   dass die Seite springt.

   Bewusst kein Bild: Ein Motiv mit fester Groesse sitzt auf jeder zweiten
   Breite falsch. Dieser Block passt sich an, bleibt auf jedem Bildschirm
   scharf und laedt nichts nach.
   ========================================================================== */
.platz-frei-halter { margin: 34px 0; }

.platz-frei {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 26px;
  width: 100%; max-width: 970px;
  min-height: 96px;
  padding: 18px 24px;
  background: var(--tinte, #0C162A);
  border-top: 3px solid var(--gold, #E8A33D);
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s;
}
.platz-frei:hover, .platz-frei:focus-visible { background: #142542; }

.platz-frei .pf-marke {
  grid-column: 1 / 3; grid-row: 1;
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold, #E8A33D);
}
.platz-frei .pf-titel {
  grid-column: 1; grid-row: 2;
  font-family: var(--schrift-titel);
  font-size: 1.32rem; font-weight: 700; line-height: 1.15;
  color: #fff; white-space: nowrap;
}
.platz-frei .pf-text {
  grid-column: 2; grid-row: 2;
  font-size: .9rem; line-height: 1.45;
  color: #B8C6DC;
  min-width: 0;
}
.platz-frei .pf-knopf {
  grid-column: 3; grid-row: 1 / 3;
  align-self: center;
  font-family: var(--schrift-titel);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0C162A; background: var(--gold, #E8A33D);
  padding: 11px 20px; border-radius: 2px;
  white-space: nowrap;
}
.platz-frei:hover .pf-knopf { background: #F5B855; }

/* Unter 760 px steht der Text unter der Zeile statt daneben: Nebeneinander
   blieben fuer die Beschreibung sonst keine 40 Zeichen je Zeile. */
@media (max-width: 760px) {
  .platz-frei {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
    min-height: 0;
  }
  .platz-frei .pf-marke,
  .platz-frei .pf-titel,
  .platz-frei .pf-text,
  .platz-frei .pf-knopf { grid-column: 1; grid-row: auto; }
  .platz-frei .pf-titel { font-size: 1.16rem; white-space: normal; }
  .platz-frei .pf-knopf { justify-self: start; margin-top: 4px; }
  .platz-frei-halter { margin: 26px 0; }
}

/* ==========================================================================
   WERBEPLATZ IN DER SERVICEZEILE — abschliessende Festlegung

   Vorgeschichte, damit das nicht noch einmal passiert: Joomlas Bannermodul
   ist hier ein Raster mit grid-auto-flow: column. Zusammen mit der
   Kennzeichnung als zweitem Rasterfeld liess sich seine Breite weder
   sauber begrenzen noch sauber ermitteln — mal war der Platz 0 px breit
   (Banner geladen, gezaehlt, unsichtbar), mal schob er die Seite um
   342 px zur Seite.
   
   Deshalb hier keine Feinsteuerung mehr, sondern eine Festlegung: feste
   Bildgroesse (468 x 60 auf 312 x 40), Flexlayout statt Raster, und der
   Kasten ergibt sich daraus. Das Format ist ohnehin fest — es ist ein
   Header-Bar-Banner, und das ist bei jedem Kunden 468 x 60.
   ========================================================================== */
.service-anzeige {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  justify-content: flex-end;
}
.service .mod-banners,
.service-anzeige .mod-banners {
  display: flex;
  grid-auto-flow: row;            /* Rasterfluss des Moduls abschalten */
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: none;
}
.service-anzeige .mod-banners__item,
.service-anzeige .banneritem,
.service-anzeige a { flex: 0 0 auto; min-width: 0; max-width: none; }

.service-anzeige img {
  width: 312px; height: 40px;
  max-width: 312px; max-height: 40px;
  object-fit: contain;
  display: block;
}

/* Zwischen 901 und 1120 px wird es eng: Dann traegt die Zeile das Banner,
   aber nicht mehr die Beschriftung daneben. */
@media (min-width: 901px) and (max-width: 1120px) {
  .service-anzeige img { width: 260px; height: 33px; max-width: 260px; }
  .service .mod-banners::before { display: none; }
}

/* Feste Breite statt Feinsteuerung. Joomlas Bannerlayout meldet in dieser
   Zeile keine brauchbare Eigenbreite — der Kasten blieb bei 0 px, waehrend
   das Bild daneben aus der Seite lief. Ein Header-Bar-Banner ist bei jedem
   Kunden 468 x 60; die Breite steht also fest und muss nicht ermittelt
   werden. Unter 901 px ist der Platz ausgeblendet. */
@media (min-width: 1121px) {
  .service-anzeige { width: 322px; flex: 0 0 322px; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .service-anzeige { width: 270px; flex: 0 0 270px; }
}
.service-anzeige .mod-banners { width: 100%; justify-content: flex-end; }

/* ==========================================================================
   FUSSBEREICH

   Die Partnerlogos liegen in einem Custom-Modul, jedes in einem eigenen
   Absatz. Untereinander gestapelt sahen sie aus wie eine vergessene Liste,
   und der ganze Fussbereich hoerte einfach auf.

   Jetzt drei klare Teile: Links, Partnerleiste, Zeile mit dem Copyright.
   Die Logos stehen auf weissen Kacheln gleicher Hoehe — die Motive kommen
   in verschiedenen Formaten und mit verschiedenen Hintergruenden herein
   (Maruba weiss, Sparkasse rot, DEMA weiss). Ohne gemeinsame Flaeche
   springt jede Kachel anders.
   ========================================================================== */
footer .wrap {
  display: flex; flex-direction: column; gap: 26px;
}

/* ---------- Links ---------- */
footer .mod-menu {
  display: flex; flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0; padding: 0; list-style: none;
}
footer .mod-menu li { margin: 0; }

/* ---------- Partnerleiste ---------- */
footer .mod-custom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: flex-start;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
footer .mod-custom p { margin: 0; display: contents; }

footer .mod-custom a {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 150px; height: 74px;
  padding: 9px 12px;
  background: #fff;
  border-radius: 3px;
  transition: transform .2s, box-shadow .2s;
}
footer .mod-custom a:hover,
footer .mod-custom a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
footer .mod-custom img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* Eine Ueberschrift ueber der Leiste, damit klar ist, was das ist.
   Ohne sie stehen dort drei Logos ohne jede Erklaerung. */
footer .mod-custom::before {
  /* Nicht "Partner der Region": Dort stehen gebuchte Flaechen (Metropol-
     region TV, Fakt-in, FM-PRO). Eine bezahlte Flaeche als Partnerschaft
     auszugeben, ist genau die Vermischung, die das Trennungsgebot
     untersagt - die uebrigen Werbeflaechen der Seite sind bereits
     korrekt mit "Anzeige" gekennzeichnet. */
  content: "Anzeigen";
  flex: 0 0 100%;
  font-family: var(--schrift-titel);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #8B9DB8;
  margin-bottom: 2px;
}

/* ---------- Schlusszeile ---------- */
footer .rechts {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 700px) {
  footer .wrap { gap: 20px; }
  footer .mod-menu { gap: 10px 18px; }
  footer .mod-menu a { font-size: .9rem; }
  footer .mod-custom { gap: 10px; justify-content: center; }
  footer .mod-custom a { width: calc(50% - 5px); height: 62px; }
  footer .mod-custom::before { text-align: center; }
  footer .rechts { text-align: center; }
}

/* ==========================================================================
   RUBRIKUEBERSCHRIFT IN DER RUBRIKFARBE

   Bisher trug nur der Balken links die Farbe, die Schrift blieb dunkelblau.
   Jetzt traegt auch die Ueberschrift sie — Lokales rot, Sport gruen,
   Events gold. So sieht man beim Scrollen an der Ueberschrift selbst,
   in welchem Ressort man ist, ohne sie lesen zu muessen.

   Nur die Ueberschrift, nicht der Fliesstext darunter: Farbiger Fliesstext
   liest sich schlechter, und die Rubrikfarben liegen alle knapp ueber der
   Kontrastgrenze — das traegt eine Zeile Versalien, aber keinen Absatz.
   ========================================================================== */
.rubrik h2,
.rubrik h1 { color: var(--akzent, var(--tinte)); }

/* Die Linie unter der Ueberschrift nimmt die Farbe gedaempft auf. Voll
   gefaerbt waere sie so kraeftig wie die Schrift und wuerde mit ihr
   konkurrieren. */
.rubrik { border-bottom-color: color-mix(in srgb, var(--akzent, var(--tinte)) 45%, #FFFFFF); }

/* Kein Ausschluss noetig: --akzent wird vom Rubrikblock vererbt und ist
   sonst das Signalrot aus :root. Ein .rubrik:not([data-rubrik]) haette
   hier alles wieder auf Dunkelblau gezogen — die Rubrikbloecke tragen
   ihre Farbe naemlich ueber eine Klasse (.rubrik-sport), nicht ueber das
   Attribut, und die Klasse hat die geringere Spezifitaet. */

/* Wo der Browser color-mix nicht kann, bleibt die alte dunkle Linie. */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .rubrik { border-bottom-color: var(--tinte); }
}

/* ==========================================================================
   KEINE HALBE REIHE AUF TABLET UND HANDY

   In der Zweierreihe bleibt die letzte Kachel allein stehen, wenn die
   Anzahl nicht aufgeht — daneben ein leeres Feld, das bei einem hohen
   Bild sehr gross wird. Dann laeuft sie ueber die ganze Breite.

   Die Rechnung dahinter:
   - Im normalen Raster belegt jede Kachel ein Feld. Die letzte steht
     allein, wenn die Anzahl ungerade ist -> :nth-child(odd).
   - Im Top-Themen-Raster belegt die erste Kachel zwei Felder. Damit sind
     bis zur letzten 2 + (n-1) Felder belegt; die letzte steht allein,
     wenn diese Summe ungerade ist, also wenn n gerade ist
     -> :nth-child(even).
   ========================================================================== */
/* Obergrenze 900, nicht 1100: Die Regel darunter rechnet mit ZWEI Spalten,
   .raster3 wird aber erst ab 900 px zweispaltig. Gemessen bei 1000 px:
   drei Spalten zu je 194 px, die dritte Kachel wurde 631 px breit und
   rutschte allein in eine zweite Zeile - die dritte Spalte blieb leer.
   Fehlbereich exakt 901-1100 px; das iPad quer liegt mit 1024 px mittendrin. */
@media (max-width: 900px) and (min-width: 641px) {
  .raster3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 700px) and (min-width: 421px) {
  .blick-raster > *:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* Ueber die volle Breite braucht die Kachel ein flacheres Bild —
     sonst wird aus einer Luecke ein zwei Bildschirme hoher Klotz. */
  .blick-raster > *:last-child:nth-child(even) .ph img { aspect-ratio: 16 / 7; }
}

/* Dasselbe im Beitragsraster (Weiterlesen-Vorschlaege). */
/* Obergrenze 900, nicht 1100: Die Regel darunter rechnet mit ZWEI Spalten,
   .raster3 wird aber erst ab 900 px zweispaltig. Gemessen bei 1000 px:
   drei Spalten zu je 194 px, die dritte Kachel wurde 631 px breit und
   rutschte allein in eine zweite Zeile - die dritte Spalte blieb leer.
   Fehlbereich exakt 901-1100 px; das iPad quer liegt mit 1024 px mittendrin. */
@media (max-width: 900px) and (min-width: 641px) {
  .weiterlesen .raster3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .weiterlesen .raster3 > *:last-child:nth-child(odd) .ph img { aspect-ratio: 16 / 7; }
}

/* Nachtrag: Steht am Ende des Rasters ein Werbeband ueber die volle
   Breite, ist die allein stehende Kachel nicht mehr die letzte, sondern
   die vorletzte. Die Regel oben greift dann nicht. */
/* Obergrenze 900, nicht 1100: Die Regel darunter rechnet mit ZWEI Spalten,
   .raster3 wird aber erst ab 900 px zweispaltig. Gemessen bei 1000 px:
   drei Spalten zu je 194 px, die dritte Kachel wurde 631 px breit und
   rutschte allein in eine zweite Zeile - die dritte Spalte blieb leer.
   Fehlbereich exakt 901-1100 px; das iPad quer liegt mit 1024 px mittendrin. */
@media (max-width: 900px) and (min-width: 641px) {
  .raster3 > .kachel:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
  .raster3 > .kachel:nth-last-child(2):nth-child(odd) .ph img { aspect-ratio: 16 / 7; }
}

/* ==========================================================================
   WETTER IM KOPF

   Zeigt den Ort, in dem der Leser gerade ist. Geholt wird serverseitig,
   damit die IP-Adresse des Lesers nicht beim Wetterdienst landet — genau
   derselbe Grund, aus dem die Schriften lokal liegen.
   ========================================================================== */
.wetter {
  display: flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  font-family: var(--schrift-titel);
  font-size: .8rem;
  color: #C6D4EC;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.16);
  white-space: nowrap;
}
.wetter-bild { flex: none; color: #E8A33D; }
.wetter-grad { font-weight: 700; color: #fff; letter-spacing: .01em; }
.wetter-ort {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8FA6C8;
}

/* Auf schmalen Bildschirmen bleibt der Wert, der Ortsname faellt weg —
   wer auf der Weinheim-Seite ist, weiss, wo er ist. */
@media (max-width: 720px) {
  .wetter { padding-left: 12px; }
  .wetter-ort { display: none; }
}
/* Die Grenze lag bei 380 px — knapp neben dem Punkt, an dem die Zeile
   umbrach (gemessen: 381 px). Auf 400 gezogen, damit dazwischen nichts
   mehr kippen kann. */
@media (max-width: 399px) {
  .wetter { display: none; }
}

/* Der Werbeplatz in der Servicezeile braucht Platz fuer die Kennzeichnung.
   Nachgemessen: Das Wort "Anzeige" ist dort 41 px breit, das Banner 312 px,
   dazu 10 px Abstand — macht 363 px. Bei 322 px blieben der Kennzeichnung
   10 px, und sie lag auf dem Banner. */
@media (min-width: 1121px) {
  .service-anzeige { width: 366px; flex: 0 0 366px; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  /* Hier ist die Kennzeichnung ausgeblendet, es zaehlt nur das Bild. */
  .service-anzeige { width: 266px; flex: 0 0 266px; }
}

/* Die Kennzeichnung wird NICHT ausgeblendet, auch nicht auf schmalen
   Desktopbreiten. Sie ist Pflicht (Trennungsgebot, § 6 TMG), und der Platz
   ist da: Bei 910 px Fensterbreite belegen Links, Wetter, Abstaende und
   Werbeplatz zusammen 821 von 895 px. */
@media (min-width: 901px) and (max-width: 1120px) {
  .service .mod-banners::before { display: block; }
  .service-anzeige { width: 366px; flex: 0 0 366px; }
  .service-anzeige img { width: 312px; height: 40px; max-width: 312px; }
}

/* ==========================================================================
   RUHIGE TOENUNG FUER SERVICE-BLOECKE

   Ein bis zwei getönte Bänder pro Seite sind ein aktuelles Strukturmittel
   — Spiegel und Stern setzen ihre Service-Bereiche genauso ab. Was billig
   wirkt, ist die Uebertreibung: viele Baender, kraeftige Farben, ein Band
   pro Rubrik. Dann ist nichts mehr hervorgehoben.

   Deshalb hier genau eine Regel, und sie greift nur bei Bloecken ohne
   Rubrikfarbe. Das ist auf der Startseite ausschliesslich "Beliebteste
   Artikel" — Service, kein Nachrichtenstrom.

   Kein 100vw und kein negativer Aussenabstand: Beides ergibt auf Seiten
   mit Bildlaufleiste einen seitlichen Ueberlauf. Das Band ist so breit wie
   die Inhaltsspalte, und das reicht: Es soll den Abschnitt absetzen, nicht
   die Seite zerschneiden.
   ========================================================================== */
.abschnitt.dienst {
  background: #F4F6FA;
  border-radius: 3px;
  padding: 26px 26px 22px;
  /* Etwas mehr Luft nach oben als zwischen zwei Nachrichtenbloecken —
     der Wechsel soll als Wechsel lesbar sein. */
  margin-top: 44px;
}

/* Die Ueberschriftlinie darf im getoenten Feld nicht verschwinden. */
.abschnitt.dienst .rubrik { border-bottom-color: #D8DEE9; }

/* Kacheln im Band bekommen weissen Grund, sonst verschwimmen sie
   mit der Toenung. */
.abschnitt.dienst .kachel,
.abschnitt.dienst .titelliste > a { background: #fff; }

@media (max-width: 700px) {
  .abschnitt.dienst {
    padding: 20px 16px 16px;
    margin-top: 32px;
    border-radius: 2px;
  }
}


/* ==========================================================================
   VORSPANN

   Der erste Absatz eines Beitrags traegt die Zusammenfassung. Die Redaktion
   setzt ihn nicht als solchen aus — sie formatiert ihn von Hand, in jedem
   Beitrag ein wenig anders. Die Vorlage entfernt diese Handformatierung
   inzwischen serverseitig; hier bekommt der Absatz stattdessen die Form,
   die ein Vorspann haben soll.

   Kein !important noetig: Die Angaben aus dem Editor sind zu diesem
   Zeitpunkt schon entfernt.
   ========================================================================== */
.beitrag-text > p:first-of-type {
  font-size: 1.24rem;
  line-height: 1.48;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: 1.4em;
}

@media (max-width: 700px) {
  .beitrag-text > p:first-of-type { font-size: 1.14rem; }
}
/* Facebook und Instagram als Zeichen statt als Wort. Sie sind schneller zu
   erkennen und brauchen weniger Platz — in der Servicezeile ist beides
   knapp. Die Beschriftung steht im aria-label, Screenreader lesen sie vor. */
.service-links .sozial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: #C6D4EC;
  transition: background .18s, color .18s;
}
.service-links .sozial:hover,
.service-links .sozial:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.service-links .sozial svg { display: block; }

@media (max-width: 720px) {
  /* Auf dem Handy groessere Flaeche zum Tippen — 30 px sind mit dem
     Daumen zu wenig, empfohlen sind mindestens 44. */
  .service-links .sozial { width: 44px; height: 44px; }
}


/* ==========================================================================
   FUSSSPALTEN

   Vierzehn Verweise standen dort als eine Linkwolke ueber zwei Zeilen —
   man findet darin nichts. Jetzt vier benannte Spalten nebeneinander:
   Verlag, Werben, Ausgaben & Archiv, Mehr.

   Die Zuordnung passiert in der Vorlage (html/mod_menu/default.php), nicht
   im Joomla-Menue: An den Menuepunkten haengen die Adressen.
   ========================================================================== */
.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 34px;
  width: 100%;
}

.fuss-spalte { min-width: 0; }

.fuss-kopf {
  margin: 0 0 12px;
  font-family: var(--schrift-titel);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #8B9DB8;
}

.fuss-spalte ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}

.fuss-spalte a {
  color: #C6D4EC;
  font-size: .92rem; line-height: 1.35;
  text-decoration: none;
}
.fuss-spalte a:hover,
.fuss-spalte a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Die alte flache Liste wird nicht mehr ausgegeben; die Regeln dafuer
   duerfen die neuen Spalten nicht mehr treffen. */
footer .mod-menu:not(.fuss-spalten) { display: contents; }

@media (max-width: 640px) {
  .fuss-spalten { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .fuss-spalte a { font-size: .88rem; }
}

@media (max-width: 380px) {
  .fuss-spalten { grid-template-columns: 1fr; }
}
/* Die Spalten stehen fuer sich — Ueberschrift oben, Verweise darunter,
   keine Trennlinie. Die Linien zwischen den Spalten haben die Flaeche
   zerschnitten, ohne etwas zu ordnen. */
footer .fuss-spalte {
  display: block;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
footer .fuss-spalte a { display: inline; min-height: 0; }

/* ==========================================================================
   VORSCHAUBILDER — ein Zuschnitt für alle

   Nachgemessen: Die Bilder standen auf object-fit: fill. Das ist der
   Standardwert, wenn nichts gesetzt ist — und er zieht das Motiv auf die
   Kachelgroesse, ohne das Seitenverhaeltnis zu wahren. Ein Hochformat
   wurde also breitgequetscht, ein Panorama gestaucht. Genau das laesst ein
   Vorschaubild "verloren" wirken: Es stimmt etwas nicht, aber man sieht
   nicht was.

   Mit cover wird stattdessen zugeschnitten. Der Bildausschnitt sitzt
   etwas ueber der Mitte (42 %), weil auf Pressefotos die Gesichter dort
   liegen — mittig zugeschnitten wuerde man Stirnen abschneiden.

   Die Redaktion muss dafuer nichts tun. Genau das war die Vorgabe: Bilder
   werden nicht zugeschnitten, nur mindestens 1200 px breit geliefert.
   ========================================================================== */
.ph img,
.ph .bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* Ein einheitliches Verhaeltnis in jedem Raster. Springt es innerhalb
   einer Reihe zwischen 3:2 und 4:3, franst die Reihe aus — gemessen war
   genau das der Fall. */
.kachel .ph,
.nachschub .ph,
.weiterlesen .ph { aspect-ratio: 3 / 2; }

.titelliste .ph { aspect-ratio: 3 / 2; }

/* ==========================================================================
   BEITRAGSTYPOGRAFIE

   Nachgemessen war der Fliesstext 17,3 px gross bei 67 bis 83 Zeichen je
   Zeile. Beides liegt daneben: Ab etwa 75 Zeichen verliert das Auge beim
   Zeilenwechsel den Anschluss und muss suchen — man liest langsamer, ohne
   zu wissen warum. Spiegel und Zeit setzen 18 bis 19 px auf rund 65
   Zeichen.

   Begrenzt wird die ZEILE, nicht die Spalte: Bilder, Galerien und
   Werbeplaetze laufen weiter ueber die volle Breite. Sonst haette der
   Beitrag ploetzlich zwei verschiedene Kanten.
   ========================================================================== */
.beitrag-text {
  font-size: 1.125rem;          /* 18 px */
  line-height: 1.68;
}

.beitrag-text > p,
.beitrag-text > ul,
.beitrag-text > ol,
.beitrag-text > blockquote,
.beitrag-text > h2,
.beitrag-text > h3,
.beitrag-text > h4,
.beitrag-text > section > p,
.beitrag-text > section > ul,
.beitrag-text > section > ol,
.beitrag-text > section > h2,
.beitrag-text > section > h3 {
  /* 54ch, nicht 66: Die Einheit ch bemisst sich an der Ziffer Null,
     und die ist breiter als der Durchschnitt der Buchstaben. 66ch
     ergaben gemessene 83 Zeichen je Zeile — deutlich zu viel. */
  max-width: 54ch;
}

.beitrag-text > p,
.beitrag-text > section > p { margin: 0 0 1.15em; }

/* ---------- Zwischenueberschriften ----------
   Sie sollen den Text gliedern, nicht mit der Schlagzeile konkurrieren.
   Deshalb deutlich kleiner als die Ueberschrift oben, dafuer mit klarem
   Abstand davor: Der Abstand macht den Absatz, nicht die Groesse. */
.beitrag-text h2,
.beitrag-text h3,
.beitrag-text h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.22;
  color: var(--tinte);
  margin: 1.9em 0 .5em;
}
.beitrag-text h2 { font-size: 1.42rem; }
.beitrag-text h3 { font-size: 1.22rem; }
.beitrag-text h4 { font-size: 1.08rem; }

/* Eine feine Marke in der Rubrikfarbe. Nur ein Strich, keine Flaeche —
   im Fliesstext soll die Farbe fuehren, nicht auffallen. */
.beitrag-text h2::before {
  content: "";
  display: block;
  width: 34px; height: 3px;
  background: var(--akzent, var(--rot));
  margin-bottom: .55em;
}

/* ---------- Hervorgehobene Kaesten ----------
   Die Redaktion setzt Zeugenaufrufe und Rueckfragen in Zitatkaesten.
   Die bekommen eine Kante in der Rubrikfarbe statt eines grauen Rahmens. */
.beitrag-text blockquote {
  margin: 1.7em 0;
  padding: 1em 1.2em;
  background: #F4F6FA;
  border-left: 4px solid var(--akzent, var(--rot));
  font-style: normal;
  font-size: .98rem;
  color: #3A4557;
}
.beitrag-text blockquote p:last-child { margin-bottom: 0; }

/* ---------- Listen ---------- */
.beitrag-text ul,
.beitrag-text ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.beitrag-text li { margin-bottom: .45em; }

/* ---------- Verweise im Text ----------
   Unterstrichen, nicht nur eingefaerbt: Farbe allein reicht als Merkmal
   nicht aus, wenn jemand Farben schlecht unterscheidet. */
.beitrag-text a {
  color: var(--blau);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--blau) 45%, transparent);
}
.beitrag-text a:hover,
.beitrag-text a:focus-visible {
  color: var(--rot);
  text-decoration-color: currentColor;
}

@media (max-width: 700px) {
  .beitrag-text { font-size: 1.06rem; line-height: 1.62; }
  .beitrag-text h2 { font-size: 1.26rem; }
  .beitrag-text h3 { font-size: 1.12rem; }
}


/* ==========================================================================
   SUCHE AUF DEM HANDY
   .brand ist unterhalb von 900 px ausgeblendet — die Suche war dort also
   nicht versteckt, sondern gar nicht vorhanden. Bei 43.000 Beitraegen ist
   sie der wichtigste Weg ins Archiv, deshalb steht sie jetzt oben in der
   Schublade, ueber den Rubriken.

   Die Regeln stehen am Dateiende, weil eine @media-Regel nicht von allein
   gewinnt: .mjsuche { display: none } weiter oben trifft sonst auch diese
   Ausgabe.
   ========================================================================== */

.suche-mobil { display: none; }

@media (max-width: 900px) {
  .suche-mobil {
    display: block;
    padding: 0 22px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .suche-mobil .mjsuche {
    display: flex; position: relative;
    /* Der Trefferkasten ist im Panel ein Flex-Element wie Feld und
       Knopf. Ohne Umbruch teilt er sich die Zeile mit ihnen und war
       gemessen 130 px breit statt 323. */
    flex-wrap: wrap;
    width: 100%; margin: 0;
  }
  .suche-mobil .mjsuche-feld {
    /* Basis 0, nicht auto: Mit auto bemisst sich das Feld an der
       Breite des Platzhaltertextes, und der Knopf rutscht mit
       flex-wrap in die naechste Zeile. */
    flex: 1 1 0; width: auto; min-width: 0;
    /* Unter 16px zoomt iOS beim Antippen in das Feld hinein und die
       Seite steht danach verschoben. */
    font-size: 1rem;
    padding: 12px 14px;
    transition: border-color .18s;
  }
  .suche-mobil .mjsuche-feld:focus { width: auto; }
  .suche-mobil .mjsuche-knopf {
    flex: 0 0 auto; min-height: 46px; padding: 0 16px;
  }
  /* Im Panel schwebt nichts: Der Trefferkasten steht in der Schublade
     und schiebt die Rubriken nach unten, statt sie zu ueberdecken. */
  .suche-mobil .mjsuche-treffer {
    position: static;
    flex: 1 0 100%;
    width: auto; margin-top: 8px;
    max-height: 46vh;
  }
}


/* ==========================================================================
   AUFKLAPPMENUE SCHLIESSEN
   Das Menue haengt an :hover und :focus-within. Wer es mit Escape
   schliesst, hat den Fokus danach auf dem Menuepunkt — und der liegt im
   selben Element, also bliebe es offen. Diese Klasse setzt das Skript,
   und sie steht hier am Dateiende, weil sie die Regel weiter oben
   ueberstimmen muss.
   ========================================================================== */

.mega-halter.mega-zu > .mega {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}


/* ==========================================================================
   SERVICEZEILE — DER UMBRUCH DARF NICHT WACKELN
   Gemessen bei 381 px Fensterbreite: Die Zeile braucht 346 px, verfuegbar
   sind 337. Neun Pixel. Genau deshalb sprang sie beim Schriftwechsel von
   einer Zeile auf zwei und wieder zurueck — ein Layoutsprung von 0,357,
   der hoechste Wert der ganzen Seite.

   Die Loesung ist nicht, die neun Pixel zu suchen, sondern den Umbruch
   eindeutig zu machen: Unterhalb von 400 px bekommt das Wetter immer eine
   eigene Zeile, oberhalb passt immer alles in eine. Dazwischen gibt es
   nichts, was kippen koennte.

   Rechnung fuer die eine Zeile: 214 px Inhalt + 30 px Abstaende + 10 px
   + 65 px Wetter = 319 px. Bei 400 px Fenster stehen 356 px zur
   Verfuegung — 37 px Luft, genug fuer jede Ersatzschrift.
   ========================================================================== */

@media (max-width: 640px) {
  .service .wrap { column-gap: 10px; min-height: 44px; }
  .service nav { gap: 10px; }
  /* Feste Zeilenhoehe: Sonst aendert der Schriftwechsel die Hoehe der
     Leiste um ein paar Pixel, und der Sprung ist wieder da. */
  .wetter { min-height: 30px; align-items: center; }
}

@media (min-width: 400px) and (max-width: 640px) {
  .service .wrap { flex-wrap: nowrap; }
}

/* Unterhalb von 400 px steht in der Zeile nur noch die Servicenavigation
   — eine Zeile, feste Hoehe, nichts, was umbrechen koennte. Die zweite
   Zeile fuer das Wetter waere 94 px hoch gewesen: zu viel fuer eine
   Angabe, die auf kleinen Geraeten ohnehin entfaellt. */
@media (max-width: 399px) {
  .service .wrap { flex-wrap: nowrap; }
}


/* ==========================================================================
   TOP-THEMEN — DAS RASTER GEHT IMMER AUF
   Der Block zeigt 1 bis 8 Hauptbeitraege, und das Raster hat je nach
   Fensterbreite 4, 3, 2 oder 1 Spalte. Beides zusammen sind 32 Faelle, und
   in den meisten bleibt eine Luecke, wenn man nichts tut: Bei drei Spalten
   und zwei Beitraegen waren es gemessen 215 px.

   Deshalb rechnet blog.php fuer jede Spaltenzahl aus, welche Kacheln
   breiter werden muessen, und schreibt das Ergebnis als data-b4, data-b3
   und data-b2 an die Kachel. Hier wird nur noch ausgewaehlt, welche der
   drei Angaben gilt.

   Sonderfaelle:
     data-voll   — eine einzige Kachel, ueber alle Spalten (1 / -1 gilt
                   fuer jede Spaltenzahl, deshalb ohne Media Query)
     data-hoch4  — zwei Kacheln bei vier Spalten: Verbreitern allein
                   reicht dort nicht, die zweite Kachel braucht auch die
                   doppelte Hoehe.
   ========================================================================== */

.blick-kachel[data-voll="1"] { grid-column: 1 / -1; }

@media (min-width: 1001px) {
  .blick-kachel[data-b4="2"]   { grid-column: span 2; }
  .blick-kachel[data-hoch4="2"] { grid-column: span 2; grid-row: span 2; }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .blick-kachel[data-b3="2"]   { grid-column: span 2; }
  .blick-kachel[data-v3="3"]   { grid-column: span 3; }
  .blick-kachel[data-hoch3="2"] { grid-row: span 2; }
}

@media (min-width: 421px) and (max-width: 700px) {
  .blick-kachel[data-b2="2"] { grid-column: span 2; }
}


/* ==========================================================================
   RUBRIKFARBE AUF EINEM FOTO
   Auf weissem Grund reichen die Rubrikfarben (alle ueber 5:1). Auf einem
   Foto liegen sie hinter einem Verlauf, und dort braucht es eine hellere
   Stufe. Fehlt sie fuer eine Rubrik, greift der Wert aus :root.
   ========================================================================== */

:root                      { --akzent-bild: #FF9094; }
[data-rubrik="sport"]      { --akzent-bild: #86EFAC; }
[data-rubrik="ratgeber"]   { --akzent-bild: #7DD3D8; }
[data-rubrik="magazin"]    { --akzent-bild: #C4A5F0; }
[data-rubrik="events"]     { --akzent-bild: #F0C070; }
[data-rubrik="gewinnen"]   { --akzent-bild: #F0A0C8; }