/* ============================================================
   Reiseblog — Frontend
   Borna (atipo foundry) — self-hosted, eine Familie fuer alles
   ============================================================ */

/* Self-hosted Borna — 4 Schnitte + Kursive. Loeste am 22.08.2026 das
   bisherige Paar Fraunces (Display) + Satoshi (Text) ab; seitdem traegt EINE
   Familie die ganze Seite, die Hierarchie kommt allein aus Groesse/Gewicht.
   Lizenz: atipo foundry Webfont-Lizenz (PDF liegt beim Original-Kit, bewusst
   nicht im oeffentlich ausgelieferten fonts/-Ordner). */
@font-face { font-family: 'Borna'; src: url('/fonts/borna-400.woff2')        format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-500.woff2')        format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-600.woff2')        format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-700.woff2')        format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('/fonts/borna-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Bug-Report 2026-07-29 (Andreas): das hidden-Attribut auf .comment-form
   (Kommentar-Schreibformular) und .notify-push (Push-Bereich im
   "Benachrichtige mich"-Overlay) wurde von JS korrekt gesetzt, blieb aber
   wirkungslos -- eine simple Autoren-Regel wie display:flex auf derselben
   Klasse schlaegt die UA-Default-Regel [hidden]{display:none} IMMER,
   unabhaengig von Spezifitaet (Autoren-Styles stehen in der Kaskade
   grundsaetzlich ueber User-Agent-Styles). admin/app.css hat genau dafuer
   schon seit Laengerem diese globale Ausnahme -- hier fehlte das Pendant
   fuer die oeffentliche Seite komplett. */
[hidden] { display: none !important; }

:root {
  color-scheme: light dark;   /* Formularelemente/Scrollbalken drehen mit */

  --bg:        #ffffff;
  --surface:   #f8f7f4;
  --border:    #ece9e2;
  --text:      #141310;
  --muted:     #7c7870;
  --dim:       #b7b3aa;
  --accent:    #155567;
  --on-accent: #ffffff;   /* Text/Icons AUF einer Akzentflaeche (Pins, Box) */
  --text-body: #45423b;   /* Fliesstext, etwas heller als die Ueberschrift */

  /* Von --accent ABGELEITETE Kartenfarben (Wunsch 22.08.2026): Pins,
     Routenlinie und Popup-Links sollen sich mitaendern, wenn oben eine andere
     Akzentfarbe steht — vorher standen dort feste Rosttoene (#af3d2b/#c9a89f),
     die nach einem Farbwechsel nicht mitzogen. color-mix wird in diesem
     Projekt bereits genutzt (admin/app.css), ist hier also gesetzt. */
  --accent-muted: color-mix(in srgb, var(--accent) 38%, var(--bg));  /* inaktive Pins */
  --accent-line:  color-mix(in srgb, var(--accent) 55%, var(--bg));  /* Routenlinie */

  --nav-bg:    rgba(255, 255, 255, 0.9);
  --chip-bg:   rgba(20, 19, 16, 0.05);

  /* EINE Schrift fuer alles: Borna. --display/--sans/--mono/--serif bleiben
     als getrennte Variablen bestehen (an ~46 Stellen im CSS verwendet), zeigen
     aber jetzt alle auf dieselbe Familie — so bleibt ein spaeterer Wechsel
     zurueck auf zwei Schriften eine Aenderung an genau dieser Stelle. */
  --sans:    'Borna', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: var(--sans);
  --mono:    var(--sans); /* Datum/Zahlen/Koordinaten — Borna hat Tabellenziffern */
  --serif:   var(--sans);

  --text-xs:   11px;
  --text-s:    13px;
  --text-base: clamp(16px, 1.05rem, 18px);
  --text-m:    clamp(17px, 1.1rem, 19px);
  --text-l:    clamp(19px, 1.25rem, 21px);
  --text-xl:   clamp(26px, 2.2vw, 34px);
  --text-xxl:  clamp(40px, 6vw, 80px);

  --radius-pill: 999px;

  /* Zeilenhoehe des Lesetextes. Steht als Token da, weil das Feed-Karussell
     damit rechnet ("Textfeld = 3 Zeilen hoch") — nicht nur .article-content
     benutzt den Wert. */
  --article-line-h: 1.75;

  /* Bedienelemente, die AUF einem Foto oder AUF der Karte liegen (Karussell-
     Pfeile, Zoom-Knopf der Mini-Karte): helle Scheibe, dunkles Zeichen.
     Bewusst EIGENE Tokens statt --bg/--text: die Flaeche ist gross genug,
     dass sie im Dark Mode mitdrehen muss (weisse Scheibe auf dunklem Foto
     blendet), das Zeichen darf aber nie --text sein -- das kippt im Dark
     Mode auf Hell und war dann weiss auf weiss (Bug-Report 23.08.2026). */
  --photo-ctrl-bg: rgba(255, 255, 255, 0.92);
  --photo-ctrl-fg: #141310;
}

/* ── DARK MODE ────────────────────────────────────────────────────────────
   Folgt der Systemeinstellung (prefers-color-scheme), kein Umschalter.
   Es werden AUSSCHLIESSLICH Tokens ueberschrieben — alles Weitere (auch die
   abgeleiteten Kartenfarben oben) ergibt sich daraus von selbst.

   Zwei bewusste Entscheidungen:
   1. --accent wird HELLER statt dunkler. Das dunkle Petrol (#155567) waere auf
      dunklem Grund fast unsichtbar, und die Kartenpins liegen im Dark Mode auf
      dunklen Kartenkacheln (siehe TILES in index.php/map.js/map-modal.js).
      Weil eine helle Akzentflaeche keinen weissen Text mehr traegt, kippt
      --on-accent gleichzeitig auf Dunkel.
   2. Bedienelemente auf einem Foto sind zweigeteilt (Stand 23.08.2026):
      - Die KLEINEN, flaechigen bleiben absichtlich hell (Hero-Pfeile,
        Hero-Zaehler, .card-pin, Karussell-Punkte): ihr Hintergrund ist das
        Bild, nicht die Seite. Ihr Zeichen steht fest auf #111, dreht also
        nicht mit -- sie tauchen hier gar nicht auf.
      - Die RUNDEN Scheiben (Karussell-Pfeile, Zoom-Knopf der Mini-Karte)
        drehen dagegen ueber --photo-ctrl-bg/-fg mit: sie sind gross genug,
        dass eine weisse Scheibe auf dunklem Foto blendet, und ihr Zeichen
        hing frueher an --text -- im Dark Mode also weiss auf weiss. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #12171a;
    --surface:   #1a2125;
    --border:    #2a3338;
    --text:      #e8e6e1;
    --text-body: #c3c8cb;
    --muted:     #8f9599;
    --dim:       #5d666b;
    --accent:    #6fb3c9;
    --on-accent: #0d1418;

    --nav-bg:    rgba(18, 23, 26, 0.9);
    --chip-bg:   rgba(255, 255, 255, 0.07);

    --photo-ctrl-bg: rgba(26, 33, 37, 0.86);
    --photo-ctrl-fg: #e8e6e1;
  }
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── PAGE TRANSITIONS ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 0.26s ease both; }
::view-transition-new(root) { animation: page-in  0.26s ease both; }
@keyframes page-out { to   { opacity: 0; transform: translateY(5px); } }
@keyframes page-in  { from { opacity: 0; transform: translateY(-5px); } }

/* ── TOP NAV ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
  /* Kompass-Marke neben dem Schriftzug (Wunsch 22.08.2026) */
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.site-logo-mark {
  width: 21px; height: 21px;
  flex: 0 0 auto;
  color: var(--accent);
}

.site-nav.reveal-on-scroll {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.site-nav.reveal-on-scroll.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-back {
  padding: 6px 4px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s;
  flex-shrink: 0;
}
.btn-back:hover { color: var(--text); }

.site-nav.article-nav { padding: 0; }
.nav-inner {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}
.nav-link {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-link:hover { color: var(--text); }

/* Rebecca-Wunsch 2026-07-28: statt "Benachrichtige mich!" als Text nur noch
   ein kleines Glocken-Icon -- die Newsletter-Box im Feed deckt die
   E-Mail-Anmeldung jetzt ab, dieser Button bleibt nur noch der (einzige)
   Zugang zur Push-Aktivierung im selben Overlay. */
.notify-btn { display: inline-flex; align-items: center; }
.notify-btn svg { width: 18px; height: 18px; }
.notify-btn.is-on { color: var(--accent); }
.notify-btn.is-on svg { fill: var(--accent); stroke: var(--accent); }

/* Seit 23.08.2026 ist die Leiste rechts eine reine Zeichenreihe (Glocke,
   Info, Bildmarke) -- der weite Wortabstand von 28px war fuer Textlinks
   gedacht und trieb die drei Zeichen auseinander. */
.nav-links { gap: 20px; }
.nav-icon { display: inline-flex; align-items: center; }
.nav-icon svg { width: 18px; height: 18px; }
/* Die Bildmarke ist hochkant (83.5 x 144) -- nur die Hoehe vorgeben, die
   Breite ergibt sich, sonst wird sie gestaucht. Genau so hoch wie die
   Kompass-Marke am anderen Ende der Leiste (Wunsch 23.08.2026): die beiden
   Bildmarken sollen sich entsprechen, die Strichzeichen dazwischen (Glocke,
   Info) bleiben bei ihren 18px. Wert deshalb an .site-logo-mark angelehnt --
   wer den dort aendert, muss hier mit. */
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo svg { height: 21px; width: auto; display: block; }

/* ── MAP MODAL ── */
.map-modal { display: none; position: fixed; inset: 0; z-index: 100; }
.map-modal.open { display: block; }
.map-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.52); }
.map-modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 94vw);
  height: min(640px, 88vh);
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 96px rgba(0,0,0,0.24);
}
.map-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.map-modal-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.map-modal-close {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.map-modal-close:hover { background: var(--surface); }
.map-modal-map { flex: 1; }
.map-modal-map .leaflet-popup-content a { color: var(--text); font-weight: 700; }

.map-pin {
  width: 28px; height: 34px;
  background: var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.map-pin span {
  transform: rotate(45deg);
  color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1;
}

/* Minimal single locator pin — a simple red dot */
.rg-pin-dot {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}
/* Other stops on the article map — small, muted */
.rg-pin-dot--muted {
  width: 11px; height: 11px;
  background: var(--accent-muted);
  border-width: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

@media (max-width: 600px) {
  .map-modal-panel { width: 100vw; height: 100vh; top: 0; left: 0; transform: none; }
}

/* Very narrow phones (≤400px): tighten the nav so the links never clip. */
@media (max-width: 400px) {
  .site-nav { padding: 0 16px; }
  .nav-links { gap: 15px; }
  .home .site-nav .site-logo { max-width: 62vw; line-height: 1.15; }
}

/* ── LIST VIEW (Homepage) — single calm reading column ── */
.list-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 160px;
}

.list-top-links {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 24px 0 0;
}

.list-heading {
  font-family: var(--display);
  font-size: var(--text-xxl);
  font-weight: 600;
  letter-spacing: -0.04em;
  padding: 72px 0 16px;
  line-height: 1.0;
}

.list-sub {
  color: var(--muted);
  font-size: var(--text-base);
  padding: 0 0 64px;
}

/* Rebecca-Wunsch 2026-07-26: Sortierfilter oben im Feed (Standard: neuster
   Artikel zuerst, umschaltbar auf aeltester zuerst). */
.feed-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 32px 0 0;
  font-family: var(--sans);
  font-size: var(--text-s);
}
/* Pfeil-Icon + Textlabel ("Neuste zuerst"/"Älteste zuerst") nebeneinander --
   war kurzzeitig nur Icon (2026-07-28), auf Rebecca-Wunsch wieder mit Text. */
.feed-sort-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 2px 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.feed-sort-opt:hover { color: var(--text); }
.feed-sort-opt.is-active { color: var(--text); border-bottom-color: var(--accent); }

.feed-sentinel { height: 0; }

/* Rebecca-Wunsch 2026-07-27: Newsletter-Anmeldebox unter dem neuesten
   Artikel (Vorbild mediale-kommunikation.de/blog, hier in den eigenen
   Schriften/Farben des Blogs statt dessen Optik). */
.newsletter-box {
  background: var(--accent);
  color: var(--on-accent);
  padding: 22px 22px;
  margin: 48px 0;
}
.newsletter-box-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
  line-height: 1.1;
}
.newsletter-box-text {
  font-family: var(--sans);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--on-accent) 85%, transparent);
  margin-bottom: 14px;
  line-height: 1.4;
}
.newsletter-box-form { display: flex; gap: 6px; }
.newsletter-box-form input {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 40%, transparent);
  background: color-mix(in srgb, var(--on-accent) 10%, transparent);
  color: var(--on-accent);
  padding: 9px 10px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.15s, background 0.15s;
}
.newsletter-box-form input::placeholder { color: color-mix(in srgb, var(--on-accent) 65%, transparent); }
.newsletter-box-form input:focus { border-color: var(--on-accent); background: color-mix(in srgb, var(--on-accent) 16%, transparent); }
.newsletter-box-btn {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  padding: 9px 13px;
  border: 1px solid var(--on-accent);
  background: var(--on-accent);
  color: var(--accent);
  cursor: pointer;
  transition: opacity 0.15s;
}
.newsletter-box-btn:hover { opacity: 0.82; }
.newsletter-box-btn:disabled { opacity: 0.6; cursor: default; }
.newsletter-box-msg { margin-top: 10px; font-family: var(--sans); font-size: 12px; color: var(--on-accent); line-height: 1.4; }
@media (max-width: 560px) {
  .newsletter-box { padding: 20px 18px; }
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Photos keep their original proportions — never cropped, only height-capped */
.card-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--surface);
  line-height: 0;
}
.card-media img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  transition: transform 0.6s ease;
}
.card:hover .card-media img { transform: scale(1.03); }

.card-pin {
  position: absolute;
  left: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #111;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
}
.card-pin svg { width: 11px; height: 11px; flex-shrink: 0; }

.card-body { padding: 20px 0 0; }

.card-date {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.card-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}

.card-excerpt {
  font-size: var(--text-m);
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .list-heading { padding-top: 96px; }
}

/* ── HOME: reading column over a full-screen background map ── */
body.home { background: var(--surface); }
.home-map {
  position: fixed; inset: 0; z-index: 0;
  background: var(--surface);
}
/* Blog title over the map, top-left (desktop only) */
.home-map-title {
  display: none;
  position: fixed; top: 24px; left: 34px; z-index: 2;
  font-family: var(--sans); font-weight: 700; font-size: 26px;
  letter-spacing: -0.02em; color: var(--text); text-decoration: none;
  max-width: 30vw; line-height: 1.1;
}
/* Blog wordmark in the feed nav (first row of the white column). Rebecca-
   Wunsch 2026-07-28: groesser als die winzige urspruengliche Nav-Link-Groesse
   (11px) -- seit "Benachrichtige mich!" nur noch ein kleines Icon ist, ist
   ohnehin mehr Platz dafuer da. */
.home .site-nav .site-logo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
/* Big title on the map removed on purpose — the small wordmark in the nav is
   the branding now. (.home-map-title stays display:none.) */
.home-feed {
  position: relative; z-index: 1;
  /* Wunsch 22.08.2026: Lesespalte linksbuendig am Fensterrand, Karte rechts
     daneben — und beide exakt gleich breit (50:50) statt der frueheren festen
     720px-Spalte.
     WICHTIG: die Karte ist weiterhin ein fixed Vollbild-Layer HINTER der
     Spalte — nicht der rechte Teil eines Grids. Der sichtbare Kartenstreifen
     ist also der Bereich rechts der Spalte, und initHomeMap() (index.php)
     verschiebt das Kartenzentrum genau um die halbe Spaltenbreite nach
     LINKS, damit die Pins in diesem Streifen landen statt unter der Spalte.
     applyWindowView() (index.php) MISST diese Breite zur Laufzeit — sie darf
     sich hier also aendern, ohne dass dort etwas nachgezogen werden muss.

     Wunsch 23.08.2026: KEINE Bildschirmbreite darf den Feed auf beigem Grund
     stehen lassen. Frueher lief zwischen 761 und 1079px eine mittig gesetzte
     720px-Spalte ohne Karte — links und rechts blieb --surface stehen. Jetzt
     gilt die Seitenkarte schon ab 761px, und statt der Spalte gibt die KARTE
     nach: max() haelt die Lesespalte bei mindestens 480px, der Kartenstreifen
     rechts wird dafuer schmaler als 50%. Ab ~960px sind es wieder saubere
     50:50, der Uebergang ist stufenlos (kein Sprung an der Grenze). */
  width: max(50%, 480px);
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  background: var(--bg);
  min-height: 100vh;
  box-shadow: 0 0 90px rgba(0,0,0,0.12);
}
/* --feed-pad: das seitliche Polster der Lesespalte als Variable. Das
   randabfallende Karussell (mobil) hebt es mit einem negativen Rand
   exakt wieder auf und holt es sich fuer den Text zurueck — beides muss
   denselben Wert benutzen, sonst steht der Karusselltext nicht mehr
   buendig unter dem Titel. */
.home .list-wrap { max-width: none; --feed-pad: 40px; padding: 0 var(--feed-pad) 120px; }
.home .site-nav { background: var(--bg); }

/* The big blog title takes too much room — hide it on the feed (it's still in
   the nav). Keep the subtitle as a small intro. */
.home .list-heading { display: none; }
.home .list-sub { padding-top: 40px; }

/* Optionale Einleitung ueber dem ersten Beitrag (Wunsch 08.09.2026). Die
   Ueberschrift der Lesespalte ist auf dem Feed ausgeblendet, die Einleitung
   ist also das erste Sichtbare — sie bekommt deshalb denselben Abstand nach
   oben wie eine Artikelkarte. Typografie kommt von .article-content (im
   Markup mitgegeben), damit Einleitung und Artikeltext gleich lesen. */
.home-intro { padding: 72px 0 0;}
.home-intro .article-content {
    font-size: var(--text-l); }
.home-intro .article-content > p:last-child { margin-bottom: 0; }

.home-article { padding: 72px 0 0; scroll-margin-top: 84px; }
.home-article + .home-article { margin-top: 24px; }
.home-article-head { margin-bottom: 28px; }
/* Number above the title, date+location line below — all identical cut/size */
/* Wunsch 22.08.2026: Nummer und Datum in einer Zeile, durch "|" getrennt.
   Nur die Nummer traegt Gewicht und Akzentfarbe, das Datum laeuft im normalen
   Schnitt mit — sonst konkurrieren zwei Fettungen direkt ueber der
   Ueberschrift. */
.home-article-kicker {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0.03em;
}
.home-article-num {
  font-weight: 700;
  color: var(--accent);
}
.home-article-sep { color: var(--dim); font-weight: 400; }
.home-article-date {font-weight: 400;/* color: var(--muted); */}
/* Unter der Ueberschrift: Kompass, nautische Koordinaten, Ort (Wunsch
   22.08.2026). flex-wrap, damit die lange Koordinatenangabe auf schmalen
   Displays umbrechen darf, statt die Karte zu sprengen. */
.home-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--sans);
  font-size: var(--text-s);
  letter-spacing: 0.03em;
  color: var(--muted);
}
/* "Karte"-Knopf am rechten Rand der Koordinatenzeile (Wunsch 23.08.2026).
   margin-left:auto schiebt ihn nach rechts, ohne die Zeile auf
   space-between umzustellen -- die wuerde bei umgebrochenen Koordinaten
   die Reste auseinanderziehen. */
.home-map-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-s); font-weight: 600;
  letter-spacing: 0.03em; color: var(--muted);
  transition: color 0.15s;
}
.home-map-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.home-map-btn:hover,
.home-map-btn[aria-expanded="true"] { color: var(--accent); }
/* Koordinaten mit Tabellenziffern, damit die Zahlenkolonnen mehrerer
   Beitraege im Feed untereinander nicht zappeln. */
.home-meta-coords {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-meta-place {font-weight: 700;/* color: var(--text); */}
.home-article-title {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 800;             /* semibold — markant, aber gesetzt */
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 0;
  /* Rebecca-Wunsch 2026-07-26: lange deutsche Komposita (z.B. "Stadtphilosophie")
     sollen auf schmalen Bildschirmen an echten Silbengrenzen umbrechen statt
     roh ueberzulaufen — nutzt die (dank lang="de") deutsche Trennregeln des
     Browsers. overflow-wrap greift nur als Netz, falls ein Wort trotzdem
     nicht in eine Zeile passt (z.B. sehr schmales Geraet + sehr langes Wort). */
  /* hyphens: auto; 
  -webkit-hyphens: auto; */
  overflow-wrap: break-word;
  text-wrap: balance;
}
.home-article-hero {
  display: block;
  margin-bottom: 32px;
  line-height: 0;
}
.home-article-hero img {
  width: 100%; height: auto;
  max-height: 78vh; object-fit: contain;
  display: block;
}
/* Inside the feed, images stay within the column (no gutter bleed over the map).
   Higher specificity (body.home …) so it beats the article-view bleed rule. */
.home .home-article-content figure {
  width: 100%;
  margin-left: 0;
  transform: none;
  margin-top: 2em; margin-bottom: 2em;
}
.home .home-article-content figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 82vh;   /* portraits never exceed the screen height */
}
.home-article-more {
  display: inline-block;
  margin-top: 24px;
  font-size: var(--text-s);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.home-article-more:hover { text-decoration: underline; }

/* Inline engagement bar */
.home-engage {
  display: flex; align-items: center; gap: 20px;
  margin-top: 22px;
}
.fe-like, .fe-comment-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-s); font-weight: 600;
  color: var(--muted); padding: 6px 2px;
  transition: color 0.15s;
}
.fe-like svg, .fe-comment-toggle svg { width: 17px; height: 17px; flex-shrink: 0; }
.fe-like:hover, .fe-comment-toggle:hover { color: var(--accent); }
.fe-like.liked { color: var(--accent); }
.fe-like.liked svg { fill: currentColor; }
.fe-like-count { font-family: var(--mono); }

.home-comments { margin-top: 24px; }
.comment-loading, .comment-empty { color: var(--muted); font-size: var(--text-s); padding: 8px 0; }
.fe-msg { color: var(--accent); font-size: var(--text-s); margin-top: 8px; }
.fe-msg[hidden] { display: none; }
/* Kein Abstand nach unten: direkt unter dem letzten Kommentar steht der
   "Kommentieren +"-Schalter, der bringt seinen eigenen margin-top mit. */
.home-comments .comment-list { margin-bottom: 0; }

/* "Kommentieren +" unter dem letzten Kommentar (Wunsch 23.08.2026) --
   zeigt/versteckt das Schreibformular. Sieht wie ein Link aus, ist aber
   ein <button>: er schaltet etwas, er navigiert nicht. */
.fe-form-toggle {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-top: 18px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-s); font-weight: 600;
  color: var(--accent); letter-spacing: 0.01em;
}
/* Bewusst OHNE text-decoration (Wunsch 23.08.2026) -- die Rueckmeldung
   kommt ueber die Deckkraft, der Unterstrich hat neben dem Plus unruhig
   gewirkt. */
.fe-form-toggle { text-decoration: none; transition: opacity 0.15s; }
.fe-form-toggle:hover { opacity: 0.7; }
/* Das Plus dreht sich beim Aufklappen zum x -- gleiche Marke, anderer
   Zustand, ohne dass der Text springt (ein Wechsel auf "Abbrechen"
   haette die Zeilenbreite veraendert). */
.fe-form-toggle-plus {
  display: inline-block; font-size: 1.15em; line-height: 1;
  transition: transform 0.18s ease;
}
.fe-form-toggle[aria-expanded="true"] .fe-form-toggle-plus { transform: rotate(45deg); }
.home-comments .comment-form { margin-top: 20px; }

/* Einblenden beim Aufklappen (Wunsch 23.08.2026). Bewusst eine CSS-
   ANIMATION, keine Transition: beide Boxen haengen am hidden-Attribut, und
   eine Transition kann aus display:none heraus nicht starten -- eine
   Animation dagegen laeuft jedes Mal neu an, sobald das Element wieder
   gerendert wird. Genau dieses Muster nutzt schon das Ueber-Overlay
   (aboutFade), es funktioniert damit auch auf aelterem iOS-Safari, ohne
   @starting-style/allow-discrete.
   Nur REIN, nicht raus: ein Ausblenden muesste JS ueber animationend
   verzoegern (sonst ist das Element sofort weg) -- den Aufwand ist das
   Zuklappen nicht wert. */
@keyframes feFade { from { opacity: 0; transform: translateY(6px); } }
.home-comments,
.home-comments .comment-form { animation: feFade 0.24s ease; }
/* Die Kommentare selbst kommen leicht versetzt hinterher, damit die Box
   nicht als ein Block aufploppt. */
.home-comments .comment-item { animation: feFade 0.3s ease backwards; }
.home-comments .comment-item:nth-child(2) { animation-delay: 0.05s; }
.home-comments .comment-item:nth-child(3) { animation-delay: 0.1s; }
.home-comments .comment-item:nth-child(n+4) { animation-delay: 0.14s; }
@media (prefers-reduced-motion: reduce) {
  .fe-form-toggle-plus { transition: none; }
  .home-comments,
  .home-comments .comment-form,
  .home-comments .comment-item { animation: none; }
}

/* Numbered red pin on the background map */
.home-pin {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1;
  border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.home-pin--muted {
  width: 18px; height: 18px; font-size: 10px;
  background: var(--accent-muted); box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Routenlinie und Popup-Link der Leaflet-Karten. Bewusst ueber CSS statt ueber
   die JS-Option color: Leaflet setzt seine Farbe als SVG-Praesentations-
   attribut (stroke="..."), und CSS schlaegt Praesentationsattribute immer —
   die Linie folgt damit automatisch --accent, ohne dass JavaScript irgendeine
   Farbe kennen muss. Die Klasse wird per { className: 'rg-route' } gesetzt
   (index.php, map.js, map-modal.js). */
.rg-route      { stroke: var(--accent-line); }
.rg-route--bold{ stroke: var(--accent); }
.rg-popup-link { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Clickable pin popup — flat & minimal (overrides Leaflet defaults) */
.leaflet-popup-content-wrapper {
  border-radius: 0;
  background: var(--bg);
  box-shadow: 0 6px 28px rgba(0,0,0,0.14);
  padding: 4px;
}
.leaflet-popup-content { margin: 14px 16px; }
.leaflet-popup-tip { background: var(--bg); box-shadow: none; }
.leaflet-container a.leaflet-popup-close-button { color: var(--dim); font-weight: 400; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--text); }

/* Per-article mini map (mobile only) */
/* isolation: Leaflets interne z-indexe (bis 1000) bleiben IM Kartenkasten —
   sonst überdecken die Karten beim Scrollen die Sticky-Menüleiste (z 30).
   Steht jetzt VOR der Like/Kommentar-Zeile, dicht am Text — die Engage-Zeile
   schließt den Beitrag ab (Zugehörigkeit über Abstand, keine Trennlinie). */
/* Seit 23.08.2026 keine dauerhaft sichtbare Mini-Karte mehr, sondern eine
   Ebene UEBER dem Karussell (inset:0 im .carousel, deckt Foto und Text).
   isolation:isolate sperrt Leaflets eigene z-Indexe ein, sonst schieben sie
   sich beim Scrollen ueber die Sticky-Menueleiste (z 30). */
.home-mini {
  position: absolute; inset: 0; z-index: 6;
  isolation: isolate;
  background: var(--surface);
  animation: feFade 0.2s ease;
}
.home-mini[hidden] { display: none !important; }
.home-mini-map { width: 100%; height: 100%; background: var(--surface); overflow: hidden; }
.home-mini-close,
.home-mini-zoom {
  position: absolute; top: 10px; z-index: 500;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--photo-ctrl-bg); border: none; border-radius: 8px; cursor: pointer;
  color: var(--photo-ctrl-fg); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.home-mini-close { right: 10px; }
.home-mini-zoom  { right: 52px; }
.home-mini-close svg,
.home-mini-zoom svg { width: 17px; height: 17px; }
/* Below the side-map breakpoint (tablet + mobile): centered reading column,
   inline per-article mini-maps, no cramped background map beside the feed. */
/* Sobald die grosse Hintergrundkarte rechts neben der Lesespalte liegt (ab
   761px), sind "Karte"-Knopf und Karten-Ebene doppelt gemoppelt und fallen
   weg (Wunsch 23.08.2026). Exaktes Gegenstueck zu .home-map, das unterhalb
   dieser Grenze ausgeblendet wird: entweder die eine Karte oder die andere,
   nie beide.
   Die Grenze lag bis 23.08.2026 bei 1080px — dazwischen stand eine mittig
   gesetzte Spalte ohne Karte auf beigem Grund. Wer sie verschiebt, muss die
   drei matchMedia-Abfragen in index.php mitziehen. */
@media (min-width: 761px) {
  .home-map-btn,
  .home-mini { display: none; }
}
@media (max-width: 760px) {
  .home-map  { display: none; }
  /* width:auto MUSS hier zurueckgesetzt werden: die Basisregel oben setzt
     fuer die Desktopaufteilung eine feste Spaltenbreite, das wuerde sonst
     auch am Handy greifen und die Lesespalte quetschen (die max-width-Regel
     darunter allein verhindert das nicht). */
  .home-feed { width: auto; margin: 0 auto; box-shadow: none; max-width: 100%; }
  .home .list-wrap { --feed-pad: 22px; padding: 0 var(--feed-pad) 96px; }
}

/* ── FEED-KARUSSELL ──────────────────────────────────────────────────────
   Wunsch 22.08.2026: statt Fliesstext mit Bildern dazwischen ein wischbares
   Karussell mit einem Text pro Bild. Drei bewusste Festlegungen:

   1. WISCHEN laeuft ueber natives CSS-Scroll-Snap, nicht ueber JS-Transforms.
      Damit funktioniert das Blaettern auch, wenn carousel.js (defer) noch
      nicht geladen oder fehlgeschlagen ist — die Slides sind dann einfach ein
      horizontal scrollbarer Streifen. carousel.js ergaenzt nur Pfeile, Punkte
      und Tastatur.
   2. BILDRAHMEN fest 4:3 mit object-fit:contain — die Fotos werden EINGEPASST,
      nie beschnitten. Die vorhandenen Aufnahmen sind alle 4:3 quer und fuellen
      den Rahmen damit exakt aus. Der feste Rahmen bleibt trotzdem wichtig:
      ein kuenftiges Hochformat wird eingepasst (Balken in Papierfarbe
      --surface) statt das Karussell in der Hoehe springen zu lassen.
   3. TEXTHOEHE fest (nicht mitwachsend) — sonst aendert die Karte beim Wischen
      ihre Hoehe und der ganze Feed darunter springt. Seit 23.08.2026 sind das
      genau DREI Zeilen; laengere Texte bekommen einen "mehr"-Schalter, der
      das Feld auf den laengsten Text DIESES Karussells aufzieht (nicht nur
      auf den der aktuellen Slide — sonst springt die Karte beim Weiterwischen
      im aufgeklappten Zustand). Gemessen wird in carousel.js. */
.carousel {
  position: relative;
  margin-top: 4px;
  /* EINE Quelle fuer die Texthoehe: Pfeile und Punkte rechnen unten damit,
     damit sie am Bild bleiben und nicht am Textfeld. Eingeklappt sind das
     drei Zeilen Lesetext plus das obere Polster; aufgeklappt ueberschreibt
     carousel.js --carousel-text-h inline mit dem gemessenen Maximum —
     genau deshalb rechnet hier alles mit DIESER einen Variablen weiter. */
  --carousel-text-lines: 3;
  --carousel-text-pad: 18px;
  /* Seitliches Polster INNERHALB des Karussells. Am Desktop fast null (die
     Lesespalte hat ihren eigenen Rand), am Handy laeuft das Karussell
     randabfallend ueber die volle Breite -- dort muss der Text sich seinen
     Rand selbst holen, sonst klebt er am Displayrand. */
  --carousel-edge: 2px;
  --carousel-line-h: calc(var(--article-line-h) * var(--text-base));
  --carousel-text-h: calc(var(--carousel-text-pad) + var(--carousel-text-lines) * var(--carousel-line-h));
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;                   /* sonst sprengt langer Text die Slide-Breite */
  scroll-snap-align: start;
  scroll-snap-stop: always;       /* nie zwei Slides auf einmal ueberspringen */
}

/* Bildrahmen: festes 4:5, Foto vollstaendig eingepasst */
.carousel-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  overflow: hidden;
}
.carousel-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;                /* oeffnet die Lightbox */
}

/* Textfeld mit fester Hoehe — Kartenhoehe bleibt ueber alle Slides gleich */
.carousel-text {
  position: relative;
  height: var(--carousel-text-h);
  padding: var(--carousel-text-pad) var(--carousel-edge) 0;
  transition: height 0.28s ease;
}
.carousel-text-inner {
  /* Traegt zusaetzlich .article-content (siehe _home_article.php) — Schrift,
     Zeilenhoehe, Farbe und overflow-wrap kommen von dort, damit Feed und
     Artikelseite exakt dieselbe Lesetypografie haben. Hier deshalb bewusst
     KEIN font-size/line-height: .article-content steht weiter unten in dieser
     Datei und wuerde es bei gleicher Spezifitaet ohnehin ueberschreiben. */
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 6px;
}
.carousel-text-inner::-webkit-scrollbar { width: 3px; }
.carousel-text-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* Der Absatzabstand des LETZTEN Absatzes muss weg: er zaehlt sonst in die
   gemessene Texthoehe hinein — ein exakt dreizeiliger Text galte damit als
   zu lang und bekaeme einen "mehr"-Schalter, der nichts freilegt. */
.carousel-text-inner > :last-child { margin-bottom: 0; }

/* Verlauf am unteren Rand: zeigt an, dass der Text weitergeht. Gilt nur
   OHNE carousel.js — dann wird im Feld gescrollt wie vor dem mehr-Schalter.
   Mit JS uebernimmt der Schalter diese Aufgabe und bringt seinen eigenen
   Verlauf mit; der ganzflaechige hier wuerde die dritte Zeile ausgrauen. */
.carousel-text::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.carousel[data-carousel-ready="1"] .carousel-text::after { content: none; }
/* Eingeklappt wird beschnitten statt gescrollt — aber erst, wenn JS den
   Schalter auch wirklich anbieten kann. */
.carousel[data-carousel-ready="1"]:not(.is-expanded) .carousel-text-inner { overflow: hidden; }

/* "mehr" / "weniger" — EIN Schalter je Karussell, kein Exemplar je Slide:
   alle Slides sind gleich hoch, er sitzt also immer an derselben Stelle.
   Er liegt auf dem Ende der letzten Zeile (Instagram-Anmutung), der
   Verlauf nach links blendet den abgeschnittenen Text darunter aus. */
.carousel-more {
  position: absolute; right: var(--carousel-edge); bottom: 0; z-index: 3;
  border: none; cursor: pointer; padding: 0 2px 0 40px;
  font-family: var(--sans); font-size: var(--text-base); font-weight: 600;
  line-height: var(--carousel-line-h);
  color: var(--accent);
  background: linear-gradient(to right, transparent, var(--bg) 30px);
  transition: opacity 0.15s;
}
.carousel-more:hover { opacity: 0.7; }
.carousel-more[hidden] { display: none !important; }

/* Waehrend carousel.js misst, darf die Hoehen-Transition nicht mitlaufen —
   ein synchron gelesenes clientHeight liefert sonst den Zwischenwert der
   laufenden Animation und "passt der Text in drei Zeilen?" faellt falsch aus
   (reproduziert beim Groessenaendern waehrend des Aufklappens). */
.carousel.is-measuring .carousel-text { transition: none; }

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

/* Pfeile — nur auf Zeigergeraeten, am Handy wird gewischt */
.carousel-nav {
  position: absolute; top: 0; z-index: 3;
  height: calc(100% - var(--carousel-text-h));  /* nur neben dem Bild, nicht neben dem Text */
  width: 56px;
  display: none;
  align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--photo-ctrl-fg); opacity: 0; transition: opacity 0.18s ease;
}
.carousel-prev { left: 0;  justify-content: flex-start; padding-left: 10px; }
.carousel-next { right: 0; justify-content: flex-end;   padding-right: 10px; }
.carousel-nav svg {
  width: 34px; height: 34px; padding: 7px;
  background: var(--photo-ctrl-bg);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 5px rgba(0,0,0,0.16);
}
.carousel-nav[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .carousel-nav { display: flex; }
  .carousel:hover .carousel-nav { opacity: 1; }
  .carousel-nav:focus-visible { opacity: 1; }
}

/* Punkte */
.carousel-dots {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(100% - var(--carousel-text-h) - 22px);  /* knapp ueber der Bildunterkante */
  display: flex; justify-content: center; gap: 6px;
  pointer-events: none;
}
/* Die Punkte liegen direkt AUF dem Foto: weiss mit 1px Rand in --accent
   (Wunsch 31.08.2026). Davor drei Anlaeufe, die alle am selben Punkt
   scheiterten — weiss mit Schlagschatten ging auf hellem Sand unter,
   --accent auf dunklem Wasser, und die Inversion (backdrop-filter) hat um
   mittleres Grau einen Fixpunkt, an dem sie den Ausgangswert auf sich selbst
   abbildet. Die jetzige Fassung traegt beide Kontraste gleichzeitig: heller
   Kern gegen dunkle Motive, dunkler Rand gegen helle.
   Der Rand ist ein blurfreier box-shadow und KEIN border: so bleibt der
   weisse Kern volle 6px, waehrend ein border ihn auf 4px zusammenzoege.
   Kein Schatten mehr — .carousel-dots traegt deshalb auch kein filter. */
.carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 0 1px var(--accent);
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.is-active { background: #fff; transform: scale(1.35); }

/* Bildzaehler "3/12" (Wunsch 31.08.2026) — rechte untere Ecke DES FOTOS, auf
   derselben Hoehe wie die Punkte. Beide rechnen mit --carousel-text-h und
   bleiben deshalb auch beim Aufklappen des Textes an der Bildkante.
   --photo-ctrl-bg/-fg statt fester Farben: er liegt auf einem Foto und muss
   mit dem Schema drehen wie die Karussell-Pfeile daneben (siehe Dark-Mode-
   Block oben). */
.carousel-count {
  position: absolute; right: 10px; z-index: 3;
  bottom: calc(var(--carousel-text-h) + 10px);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--photo-ctrl-bg);
  color: var(--photo-ctrl-fg);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0,0,0,0.16);
  pointer-events: none;
}
.carousel-count[hidden] { display: none !important; }

@media (max-width: 760px) {
  /* Am Handy ist die Spalte schmaler, derselbe Text braucht also mehr Zeilen
     — angezeigt werden trotzdem drei, den Rest holt der "mehr"-Schalter.
     Nur das obere Polster wird knapper; die Hoehe rechnet sich daraus. */
  .carousel { --carousel-text-pad: 15px; }

  /* Randabfallend (Wunsch 23.08.2026): das Karussell hebt das Polster der
     Lesespalte mit einem negativen Rand auf und laeuft von Displaykante zu
     Displaykante.
     BEWUSST ueber --feed-pad statt ueber 100vw/calc(50% - 50vw): 100vw
     zaehlt eine sichtbare Scrollleiste MIT, das Karussell stand dadurch
     gemessene 7px zu weit links und erzeugte waagerechtes Scrollen der
     ganzen Seite (verifiziert). Der negative Rand kennt dieses Problem
     nicht, weil er sich auf die Spalte bezieht, nicht auf das Fenster.
     Der TEXT darf nicht mitwandern: er holt sich ueber --carousel-edge
     genau dasselbe Polster zurueck und bleibt so buendig unter Titel und
     Koordinaten. */
  .carousel {
    margin-inline: calc(-1 * var(--feed-pad, 22px));
    --carousel-edge: var(--feed-pad, 22px);
  }
}

/* ── ARTICLE VIEW ── */
.hero-gallery {
  position: relative;
  width: 100%;
  max-height: 82vh;
  background: var(--bg);
  overflow: hidden;
  line-height: 0;
}

.hero-spacer { display: none; }

.page-content { background: var(--bg); }

.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero-slide img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.hero-counter {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #111;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}

.hero-dots {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 7px;
}
.hero-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.hero-dot.active { background: #fff; transform: scale(1.45); }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px; height: 38px;
  border: none;
  background: rgba(255,255,255,0.84);
  color: #111;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.hero-gallery:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: #fff; }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }
.hero-arrow svg { width: 15px; height: 15px; }
@media (hover: none) { .hero-arrow { display: none; } }

/* Article head — title + date first, before the image */
.article-head {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 24px 40px;
}
.article-head .article-title { margin-bottom: 20px; }
.article-head .article-meta { margin-bottom: 0; }

/* Article body — narrow reading column (~66 characters) */
.article-body {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px 128px;
}

.article-title {
  font-family: var(--display);
  font-size: clamp(34px, 5.5vw, 68px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px;
}

.article-date {
  font-family: var(--sans);
  font-size: var(--text-s);
  color: var(--muted);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.article-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: var(--text-s);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.article-location-pill:hover { color: var(--text); }
.article-location-pill svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Geo card (legacy inline) */
.geo-card {
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 52px;
}
/* Full-width map at the very end of the article */
.geo-full {
  width: 100%;
  margin-top: 120px;
}
.geo-map {
  width: 100%; height: 220px;
  background: var(--surface);
  isolation: isolate; /* Leaflet-z-indexe einsperren (s. .home-mini) */
}
.geo-full .geo-map { height: min(52vh, 460px); }
.geo-map .leaflet-control-attribution { font-size: 10px; }
.geo-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
}
.geo-full .geo-info {
  max-width: 780px;
  margin: 0 auto;
  padding: 18px 24px;
}
.geo-place {
  font-weight: 600;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  gap: 7px;
}
.geo-place svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
.geo-link {
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.geo-link:hover { color: var(--text); }

/* Article content */
.article-content {
  font-family: var(--sans);
  font-size: var(--text-base);   /* kleiner, ruhiger */
  line-height: var(--article-line-h);
  color: var(--text-body);       /* etwas heller als die Ueberschrift */
  /* Bug-Audit Runde 10: ein einzelnes langes, ununterbrochenes "Wort" (eine
     ohne Leerzeichen eingefuegte URL, ein sehr langes Kompositum) sprengte
     bisher die ganze Seitenbreite auf Mobilgeraeten (verifiziert bis auf
     ~2x Viewport-Breite) statt einfach umzubrechen. */
  overflow-wrap: anywhere;
}
.article-content p  { margin-bottom: 1.3em; }
.article-content h2 {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 600;
  margin: 2.2em 0 0.5em;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.article-content h3 { font-family: var(--sans); font-size: 1.05em; font-weight: 700; margin: 1.6em 0 0.4em; }
.article-content a  { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-content ul,
.article-content ol { list-style: revert; padding-left: 1.5em; margin-bottom: 1.3em; }
.article-content li { margin-bottom: 0.35em; }
.article-content blockquote {
  border-left: 2px solid var(--dim);
  padding-left: 1.5em;
  color: var(--muted);
  margin: 1.8em 0;
  font-style: italic;
}
/* Figures bleed slightly wider than the text column (Medium/Substack style),
   always keeping the photo's original proportions — never cropped. */
.article-content figure {
  width: min(880px, 92vw);
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 2.6em; margin-bottom: 2.6em;
}
.article-content figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 86vh;   /* tall portraits never exceed the screen */
  width: auto;
  height: auto;       /* keep natural aspect ratio, no cropping */
  border-radius: 3px;
}
.article-content figcaption {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
  padding: 0 24px;
  letter-spacing: 0.02em;
}

/* ── LIKE (inline with the comments heading) ── */
.engage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-s);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.12s;
}
.like-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.like-btn:hover { color: var(--accent); background: var(--surface); }
.like-btn:active { transform: scale(0.92); }
.like-btn.liked { color: var(--accent); }
.like-btn.liked svg { fill: currentColor; }
.like-count { font-family: var(--mono); }

/* ── COMMENTS ── */
.comments { padding: 60px 0 8px; }
.comments-heading {
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}
.comments-count { font-size: var(--text-m); font-weight: 400; font-family: var(--sans); color: var(--muted); }
.comment-list { margin-bottom: 44px; }
.comment-item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.comment-item:first-child { padding-top: 0; }
.comment-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.comment-name { font-weight: 700; font-size: var(--text-base); }
.comment-date { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.comment-text { font-size: var(--text-base); }
.comment-reply {
  margin-top: 14px;
  margin-left: 18px;
  padding: 12px 16px;
  background: var(--surface);
  border-left: 3px solid var(--text);
}
.comment-reply-name {
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 5px;
}
.comment-form { display: flex; flex-direction: column; gap: 12px; }
/* Pillenform (Wunsch 23.08.2026). Das horizontale Polster waechst
   dabei mit: an einer runden Kante saehe Text auf Anschlag geklebt aus. */
.comment-form input,
.comment-form textarea {
  font-family: var(--sans);
  font-size: var(--text-base);
  border: 1px solid var(--border);
  padding: 13px 22px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  border-radius: var(--radius-pill);
}
/* Das Textfeld bekommt bewusst einen festen grossen Radius statt der vollen
   Pille: bei mehreren Zeilen wuerde die Rundung (halbe Feldhoehe) die
   erste und letzte Zeile anschneiden. So bleibt es in derselben Formen-
   familie und trotzdem lesbar. */
.comment-form textarea { min-height: 96px; border-radius: 22px; }
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--text); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit {
  align-self: flex-start;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--text-base);
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0.02em;
}
.btn-submit:hover { opacity: 0.78; }

/* ── ABOUT PAGE ── */
.about-body { padding-top: 72px; }
.about-lead {
  font-family: var(--serif);
  font-size: var(--text-l);
  color: var(--muted);
  margin-bottom: 44px;
  line-height: 1.75;
}
.about-portrait {
  width: 100%; max-width: 360px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  margin: 0 0 44px;
  border-radius: 10px;
}
.about-back-link {
  display: inline-flex; align-items: center;
  margin-top: 48px;
  font-family: var(--sans); font-size: var(--text-s); font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent); text-decoration: none;
  transition: opacity 0.15s;
}
.about-back-link:hover { opacity: 0.7; }

/* ── NEXT STATION ── */
.next-stop {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-top: 120px;
}
.next-stop-media {
  width: 100%;
  height: min(44vh, 360px);
  overflow: hidden;
}
.next-stop-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.next-stop:hover .next-stop-media img { transform: scale(1.04); }
.next-stop-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 32px 52px;
}
.next-stop-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.next-stop-title {
  display: block;
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.next-stop-date {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 600px) {
  .list-wrap    { padding: 0 52px 180px; }
  .article-body { padding: 64px 52px 128px; }
  .site-nav     {padding: 0 40px;}
  .nav-inner    { padding: 0 52px; }
  .next-stop-body { padding: 26px 52px 64px; }
}

/* ── FOOTER ── */
.site-footer {
  padding: 64px 24px;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer-rss { color: var(--dim); text-decoration: none; transition: color 0.15s; }
.footer-rss:hover { color: var(--accent); }

/* ── Foto-Lightbox ──────────────────────────────────────────────────────── */
.home-article-hero img,
.home-article-content img,
.hero-gallery img,
.article-content img { cursor: zoom-in; }

/* Randabfallend und wischbar (26.08.2026). Vorher stand das Foto als
   einzelnes <img> mit 24/16 px Polster, 4 px Radius und Schlagschatten
   mittig auf dunklem Grund, und ein Wisch SPRANG per JS zum naechsten Bild.
   Jetzt fuellt es die Flaeche bis an die Kante, und gewischt wird ueber
   natives CSS-Scroll-Snap — dieselbe Mechanik wie beim Feed-Karussell
   (carousel.js): das Foto folgt dem Finger, statt erst am Ende der Geste zu
   springen, und die Traegheit kommt vom Browser. */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  background: rgba(20, 19, 16, 0.95);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.lb.is-open { display: block; }
.lb-track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* kein Weiterziehen der Seite dahinter */
  scrollbar-width: none;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: center;
  /* Ein Wisch = ein Foto: ohne "always" fliegt ein kraeftiger Wisch ueber
     mehrere Bilder hinweg, was bei ganzflaechigen Fotos die Orientierung
     kostet. */
  scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}
/* object-fit: contain, nie cover — ein Foto wird eingepasst, nicht
   beschnitten (gleiche Haltung wie im Feed-Karussell). Bei einem Bildformat,
   das nicht zum Bildschirm passt, bleiben oben/unten Streifen des Grundes
   stehen; die Breite laeuft immer bis an beide Kanten. */
.lb-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  cursor: default;
}
/* Beschriftung und Zaehler liegen jetzt AUF dem Foto — deshalb der Verlauf
   nach unten, sonst steht heller Text auf hellem Motiv. */
.lb-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 40px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55));
  pointer-events: none;
}
.lb-cap {
  color: rgba(255,255,255,0.9); font-family: var(--sans);
  font-size: 14px; text-align: center; max-width: 640px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.lb-close, .lb-nav {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer;
  border-radius: 50%; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.15s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,0.24); }
.lb-close {
  top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
  width: 42px; height: 42px; font-size: 26px; line-height: 1;
}
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-count {
  color: rgba(255,255,255,0.75); font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
@media (max-width: 600px) {
  .lb-nav { display: none !important; } /* auf dem Handy wird gewischt */
}


/* ── "Über" overlay (opens from the nav instead of a separate page) ───────── */
.about-overlay { position: fixed; inset: 0; z-index: 120; }
body.about-open { overflow: hidden; }
.about-overlay-backdrop {
  position: absolute; inset: 0; background: rgba(20,19,16,0.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: aboutFade .2s ease;
}
.about-overlay-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(620px, 92vw); max-height: 88vh;
  background: var(--bg); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  overflow: hidden; animation: aboutPop .22s cubic-bezier(.2,.7,.2,1);
}
.about-overlay-scroll {
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 40px clamp(22px,5vw,48px) 44px;
}
.about-overlay-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: var(--surface); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.about-overlay-close:hover { background: var(--border); }
.about-overlay-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px,4vw,36px); line-height: 1.1; margin: 0 0 14px;
}
.about-overlay-lead { font-size: var(--text-m); color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
.about-overlay-photo { width: 100%; max-width: 320px; border-radius: 12px; margin: 0 0 22px; display: block; }
.about-overlay-text p { margin: 0 0 15px; line-height: 1.7; }
.about-overlay-text p:last-child { margin-bottom: 0; }
@keyframes aboutFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aboutPop {
  from { opacity: 0; transform: translate(-50%,-48%) scale(.98); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@media (max-width: 600px) {
  .about-overlay-panel {
    top: 0; left: 0; transform: none;
    width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0;
    animation: aboutFade .2s ease;
  }
  .about-overlay-scroll { max-height: 100vh; padding: 60px 22px 44px; }
}

/* ── "Benachrichtige mich!" overlay (email signup + push) ────────────────── */
.notify-inner {
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 44px clamp(22px,5vw,44px) 36px; text-align: center;
}
.notify-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px,4vw,32px); line-height: 1.12; margin: 0 0 12px;
}
.notify-sub { font-size: var(--text-m); color: var(--muted); line-height: 1.55; margin: 0 0 26px; }
.notify-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.notify-form input[type="text"], .notify-form input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 13px 15px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
}
.notify-form input:focus { outline: none; border-color: var(--accent); }
.notify-submit {
  margin-top: 4px; padding: 14px 20px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 700;
  transition: opacity .15s;
}
.notify-submit:hover { opacity: .9; }
.notify-submit:disabled { opacity: .6; cursor: default; }
.notify-msg { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #2e7d4f; text-align: center; }
.notify-msg.is-error { color: var(--accent); }
.notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notify-push { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.notify-or {
  position: relative; width: 100%; text-align: center; color: var(--muted); font-size: 13px;
}
.notify-or::before, .notify-or::after {
  content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--border);
}
.notify-or::before { left: 0; } .notify-or::after { right: 0; }
.notify-push-btn {
  padding: 12px 22px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  background: var(--bg); color: var(--text); font-size: 14.5px; font-weight: 650;
  transition: background .15s;
}
.notify-push-btn:hover { background: var(--surface); }
.notify-push-hint { margin: 0; font-size: 13.5px; color: #2e7d4f; font-weight: 600; }
.notify-privacy { margin: 24px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .notify-inner { max-height: 100vh; padding: 64px 22px 40px; }
}

/* ── "Weitere Beiträge laden" (feed pagination) ──────────────────────────── */
.feed-more { display: flex; justify-content: center; padding: 22px 0 44px; }
.feed-more-btn {
  font-family: var(--sans); font-size: var(--text-s);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 13px 28px; cursor: pointer; transition: background .15s, color .15s;
}
.feed-more-btn:hover { background: var(--text); color: var(--bg); }


/* ── "Über": Foto als Hero mit dunklem Overlay + weissem Titel ───────────── */
.about-hero {
  position: relative; width: 100%; min-height: 240px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.about-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,16,0.12) 0%, rgba(20,19,16,0.66) 100%);
}
.about-hero-title {
  position: relative; z-index: 1; margin: 0;
  padding: 26px clamp(22px,5vw,40px);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px,4.6vw,40px); line-height: 1.08;
  color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,0.4);
}
.about-overlay-inner { padding: 24px clamp(22px,5vw,44px) 40px; }
.about-hero--page { min-height: 300px; border-radius: 14px; overflow: hidden; margin: 0 0 26px; }
.about-overlay-scroll:has(.about-hero) { padding: 0; }
@media (max-width: 600px) { .about-overlay-scroll:has(.about-hero) { padding: 0; } }