/* Erzeugt von tools/build-assets.php — nicht von Hand ändern. */

/* --- css/fonts.css --- */
/* Literata, selbst gehostet (DSGVO). Variabel: Gewicht 200–900, optische
   Größe 7–72, aufrecht und kursiv. Quelle: Google Fonts, Subsets latin und
   latin-ext. Ersetzt den Google-Fonts-Link aus dem Design-System. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/literata-normal-latin.woff2) format("woff2");
  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 {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/literata-normal-latin-ext.woff2) format("woff2");
  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 {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/literata-italic-latin.woff2) format("woff2");
  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 {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/literata-italic-latin-ext.woff2) format("woff2");
  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;
}

/* --- css/tokens.css --- */
/* perlen.an.der.ruhr – Design-Tokens. Quelle: design-system/index.html, Stand 24.09.2026 */
:root {
  /* --- Farben: Figma-Collection „Colors", 16 Variablen, Namen 1:1 übernommen --- */
  --mint-light:         #def2ed;
  --mint-default:       #aadace;
  --mint-dark:          #246051;
  --coral-light:        #f8e7e2;
  --coral-default:      #e9b5a5;
  --coral-dark:         #913c27;
  --ochre-light:        #f8f0dd;
  --ochre-default:      #e8d19c;
  --ochre-dark:         #795515;
  --lavender-light:     #e8eaf7;
  --lavender-default:   #b5bbe3;
  --lavender-dark:      #2d3776;
  --neutral-bg:         #fcfbf8;
  --neutral-bg-warm:    #eae6e1;
  --neutral-text:       #1c1a17;  /* Vorschlag Fast-Schwarz; in Figma noch #000000 */
  --neutral-text-muted: #5c5750;

  /* --- Semantische Zuordnung --- */
  --bg-page:        var(--neutral-bg);
  --bg-section:     var(--ochre-light);
  --bg-card:        var(--lavender-dark);
  --bg-tile:        var(--lavender-light);
  --bg-highlight:   var(--mint-default);
  --text-default:   var(--neutral-text);
  --text-muted:     var(--neutral-text-muted);
  --text-on-dark:   var(--neutral-bg);      /* auf lavender/dark immer neutral/bg, nie Weiß */
  --text-on-tint:   var(--neutral-text);    /* auf allen light/default-Flächen immer neutral/text */

  /* --- Rückmeldungen (Formulare) --- */
  --color-error:      var(--coral-dark);    /* Fehler: Text, Rahmen */
  --color-error-bg:   var(--coral-light);   /* Fehler: Fläche */
  --color-success:    var(--mint-dark);     /* Erfolg: Text, Rahmen */
  --color-success-bg: var(--mint-light);    /* Erfolg: Fläche */

  /* --- Typografie --- */
  --font-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* Größenreihe Desktop: 8 Stufen, Zeilenhöhen auf 20-px-Vielfachen */
  --text-display: 80px;  --leading-display: 80px;   /* Flusskilometer-Zahl, Initial */
  --text-logo:    50px;  --leading-logo:    60px;   /* Wortmarke, Claim, Teaser-Zahl */
  --text-h1:      40px;  --leading-h1:      40px;   /* Seitentitel, Sektionstitel */
  --text-h2:      35px;  --leading-h2:      40px;   /* Kartentitel, Box-Titel */
  --text-lead:    30px;  --leading-lead:    40px;   /* Hero-Copy */
  --text-body:    25px;  --leading-body:    40px;   /* Fließtext, Tag */
  --text-small:   20px;  --leading-small:   40px;   /* Karten-Copy */
  --text-label:   16px;  --leading-label:   20px;   /* Label, Breadcrumb */

  /* --- Raster: 40px-Basis --- */
  --unit:       40px;
  --space-1-4:  10px;
  --space-1-2:  20px;
  --space-1:    40px;
  --space-2:    80px;
  --space-3:    120px;
  --space-4:    160px;
  --space-6:    240px;

  --page-width:     1512px;  /* Figma-Artboard Desktop */
  --content-width:  1280px;  /* 32 Einheiten */
  --page-margin:    116px;   /* (1512 − 1280) / 2 */
  --grid-columns:   6;
  --grid-gutter:    40px;
  --grid-column:    180px;   /* (1280 − 5 × 40) / 6 */

  --page-margin-mobile: 20px; /* halbe Einheit, Basis bleibt 40 */


  /* --- Spots: feste Kennfarbe je Spot, Stand 25.09.2026 (siehe components/spots.html) ---
     Reihenfolge flussaufwärts. Nur default- und dark-Stufen, light-Stufen bleiben Sektionsgrund. */
  --spot-muelheim:   var(--coral-dark);      --spot-muelheim-fg:   var(--neutral-bg);    /* Wasserbahnhof Mülheim, km 12 */
  --spot-baldeney:   var(--lavender-default);--spot-baldeney-fg:   var(--neutral-text);  /* Baldeneysee, km 25 */
  --spot-kemnade:    var(--lavender-dark);   --spot-kemnade-fg:    var(--neutral-bg);    /* Kemnader See, km 72 */
  --spot-harkort:    var(--ochre-default);   --spot-harkort-fg:    var(--neutral-text);  /* Harkortsee, km 90 */
  --spot-hengstey:   var(--mint-default);    --spot-hengstey-fg:   var(--neutral-text);  /* Hengsteysee, km 96 */
  --spot-arnsberg:   var(--coral-default);   --spot-arnsberg-fg:   var(--neutral-text);  /* Arnsberg, km 160 */
  --spot-hennesee:   var(--ochre-dark);      --spot-hennesee-fg:   var(--neutral-bg);    /* Hennesee, km 180 */
  --spot-ruhrquelle: var(--mint-dark);       --spot-ruhrquelle-fg: var(--neutral-bg);    /* Ruhrquelle, km 219 */

  /* --- Kategorien: Kennfarbe für Punkte am Fluss, Filter-Chips und Menü-Band, Stand 25.09.2026.
     Die Kachel selbst trägt die Spot-Farbe, die Kategorie zeigt sich dort nur als Muster. --- */
  --cat-wassersport: var(--mint-default);    --cat-wassersport-fg: var(--neutral-text);
  --cat-kultur:      var(--lavender-default);--cat-kultur-fg:      var(--neutral-text);
  --cat-essen:       var(--coral-default);   --cat-essen-fg:       var(--neutral-text);
  --cat-sport:       var(--ochre-dark);      --cat-sport-fg:       var(--neutral-bg);
  --cat-natur:       var(--mint-dark);       --cat-natur-fg:       var(--neutral-bg);

  --radius: 0;  /* Es gibt keine gerundeten Ecken. */
}

/* =========================================================
   Größenreihe Tablet und Mobil
   Alle Zeilenhöhen bleiben Vielfache von 20.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --text-display: 60px;  --leading-display: 60px;
    --text-logo:    40px;  --leading-logo:    40px;
    --text-h1:      35px;  --leading-h1:      40px;
    --text-h2:      30px;  --leading-h2:      40px;
    --text-lead:    25px;  --leading-lead:    40px;
    --text-body:    22px;  --leading-body:    40px;
    --text-small:   20px;  --leading-small:   40px;
    --text-label:   16px;  --leading-label:   20px;
  }
}
@media (max-width: 767px) {
  :root {
    --text-display: 50px;  --leading-display: 60px;
    --text-logo:    32px;  --leading-logo:    40px;
    --text-h1:      30px;  --leading-h1:      40px;
    --text-h2:      25px;  --leading-h2:      40px;
    --text-lead:    22px;  --leading-lead:    40px;
    --text-body:    20px;  --leading-body:    40px;
    --text-small:   16px;  --leading-small:   20px;
    --text-label:   14px;  --leading-label:   20px;
  }
}

/* --- css/base.css --- */
/* =========================================================
   Seitengerüst  (perlen.an.der.ruhr)
   Was in den Beispielseiten des Design-Systems im <style> der Seite
   steht: Grundfarben, vertikaler Rhythmus in <main>, Abstände vor dem
   Footer. Plus Skip-Link und Hilfsklassen.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--neutral-bg);
  color: var(--neutral-text);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; }

/* Vertikaler Rhythmus: 80 zwischen allen Blöcken in <main> */
main > * + * { margin-top: var(--space-2); }
.site-footer { margin-top: var(--space-3); }
.teaser-group--panel { margin-top: var(--space-3); }

/* Skip-Link: erst bei Tastaturfokus sichtbar */
.skip-link {
  position: absolute;
  left: 20px;
  top: -200px;
  z-index: 300;
  padding: 10px 20px;
  background: var(--lavender-dark);
  color: var(--neutral-bg);
  font-weight: var(--font-weight-bold);
}
.skip-link:focus { top: 20px; }

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

/* Tote CONTENT:-Links (Freezed rendert sie als span) bleiben unauffällig */
.dead-link { text-decoration: none; }

/* Seitentitel für Ordner-Seiten ohne Hero */
.page-title {
  max-width: 840px;
  margin: var(--space-1) auto 0;
  padding: 0 20px;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--font-weight-black);
}

/* --- css/components/links.css --- */
/* =========================================================
   Stilelement: Links  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css. Wird überall vor den Komponenten geladen.
   Normal: Textfarbe, dünne Unterstreichung (1 px). Hover: dicke
   Unterstreichung (3 px). Ausnahmen ohne Unterstreichung im Normal-
   zustand: Links mit Pfeil, ganz verlinkte Boxen und Kacheln, Buttons,
   Logo, Icon-Buttons, Punkte am Fluss.
   ========================================================= */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 2px; }

/* Ausnahmen: keine Unterstreichung im Normalzustand */
.btn, .btn:hover,
.share__btn, .share__btn:hover,
.site-header__logo, .site-footer__logo,
.breadcrumb__home,
.river-point,
.teaser, .footer-tile, .infobox--big,
.teaser-list__link, .infobox__links a,
.mega-menu__title,
.footer-tile:hover, .infobox--big:hover, .teaser:hover, .teaser-list__link:hover, .infobox__links a:hover {
  text-decoration: none;
}
/* Bei verlinkten Boxen und Pfeil-Links unterstreicht Hover nur den Titel (3 px), Regeln in den Komponenten. */

/* --- css/components/panel.css --- */
/* =========================================================
   Stilelement: Fläche  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css
   Farbflächen sind nie exakt rechtwinklig. Die Kanten sitzen um
   zwei bis drei Pixel schief, leicht angedeutet. Gilt nur für Farbflächen,
   nicht für Bilder und nicht für Karten.
   In Figma: Rechteck mit 10-px-Kontur in gleicher Farbe, leicht
   gegen die Fläche versetzt. Hier: clip-path mit festen Pixel-
   Offsets, damit der Effekt bei jeder Größe gleich stark bleibt.
   ========================================================= */

.panel {
  --panel-bg: var(--ochre-light);
  --panel-fg: var(--neutral-text);
  background: var(--panel-bg);
  color: var(--panel-fg);
  /* Kanten leicht angedeutet: Offsets 2 bis 3 px. Variante 1 */
  clip-path: polygon(0 2px, calc(100% - 3px) 0, 100% calc(100% - 2px), 3px 100%);
}
.panel--skew-2 { clip-path: polygon(3px 0, 100% 2px, calc(100% - 2px) 100%, 0 calc(100% - 3px)); }
.panel--skew-3 { clip-path: polygon(0 0, 100% 3px, calc(100% - 3px) calc(100% - 2px), 2px 100%); }
.panel--skew-4 { clip-path: polygon(2px 2px, 100% 0, calc(100% - 2px) 100%, 0 calc(100% - 3px)); }

/* Farbvarianten. dark-Stufen tragen neutral/bg, alle anderen neutral/text. */
.panel--ochre          { --panel-bg: var(--ochre-light); }
.panel--ochre-default  { --panel-bg: var(--ochre-default); }
.panel--mint           { --panel-bg: var(--mint-light); }
.panel--mint-default   { --panel-bg: var(--mint-default); }
.panel--lavender       { --panel-bg: var(--lavender-light); }
.panel--lavender-default { --panel-bg: var(--lavender-default); }
.panel--coral          { --panel-bg: var(--coral-light); }
.panel--coral-default  { --panel-bg: var(--coral-default); }
.panel--navy           { --panel-bg: var(--lavender-dark); --panel-fg: var(--neutral-bg); }
.panel--mint-dark      { --panel-bg: var(--mint-dark);     --panel-fg: var(--neutral-bg); }
.panel--coral-dark     { --panel-bg: var(--coral-dark);    --panel-fg: var(--neutral-bg); }
.panel--ochre-dark     { --panel-bg: var(--ochre-dark);    --panel-fg: var(--neutral-bg); }

/* Bilder und Karten: gerade Kanten, kein Skew */
.panel--image, .panel--straight { clip-path: none; }
.panel--image { background: var(--lavender-light); }
.panel--image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- css/components/header.css --- */
/* =========================================================
   Komponente: Header  (perlen.an.der.ruhr)
   Sticky, Fläche ochre/light auf Unterseiten und sobald gescrollt wird.
   Startseite: oben durchsichtig auf dem Fluss-Hero, gescrollt ochre/light.
   Abhängig von ../tokens.css
   Breakpoints: mobil < 768, tablet 768–1023, desktop ≥ 1024
   ========================================================= */

.site-header {
  --header-height: 80px;          /* mobil: 2 Einheiten */
  --header-inline: 20px;          /* mobil: halbe Einheit */
  --logo-height: 40px;
  --burger-size: 40px;
  --burger-line-width: 32px;
  --burger-line-gap: 8px;
  --burger-line-thickness: 3px;

  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ochre-light);         /* Unterseiten und gescrollt: ochre/light, wie Fluss-Hero, Menü und Footer */
  color: var(--neutral-text);
  font-family: var(--font-serif);
  transition: background-color .2s ease;
}
/* Startseite: Header liegt durchsichtig auf der Fläche des Intro-Heros */
.site-header--overlay:not(.is-scrolled):not(.is-open) { background: transparent; }

/* gescrollt: halbe Höhe, Logo und Burger rutschen mit nach oben, feine Kante */
.site-header.is-scrolled { --header-height: 60px; box-shadow: 0 1px 0 var(--ochre-default); }
.site-header__inner { transition: height .2s ease; }
/* Menü offen: Header nimmt die Farbe des Mega-Menüs an */
.site-header.is-open { background: var(--ochre-light); box-shadow: none; }

.site-header__inner {
  box-sizing: border-box;
  height: var(--header-height);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--header-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

/* --- Logo --- */
.site-header__logo {
  display: block;
  line-height: 0;
  color: var(--neutral-text);
  outline-offset: 6px;
}
.site-header__logo svg {
  display: block;
  width: 260px;                    /* Mindestbreite der Wortmarke; mobil ergibt das 41 hoch */
  height: auto;
}
@media (min-width: 768px) {
  .site-header__logo svg { height: var(--logo-height); width: auto; }   /* 48 hoch = 305 breit, Desktop 60 = 382 */
}
.site-header__logo:focus-visible { outline: 3px solid var(--lavender-dark); }

/* --- Burger --- */
.site-header__burger {
  box-sizing: border-box;
  width: var(--burger-size);
  height: var(--burger-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--neutral-text);
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
}
.site-header__burger:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 4px; }
.site-header__burger:hover { color: var(--lavender-dark); }

.site-header__burger-lines {
  position: relative;
  width: var(--burger-line-width);
  height: calc(3 * var(--burger-line-thickness) + 2 * var(--burger-line-gap));
}
.site-header__burger-lines::before,
.site-header__burger-lines::after,
.site-header__burger-lines span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--burger-line-thickness);
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.site-header__burger-lines::before { top: 0; }
.site-header__burger-lines span    { top: calc(50% - var(--burger-line-thickness) / 2); }
.site-header__burger-lines::after  { top: calc(100% - var(--burger-line-thickness)); }

/* geöffnet: X */
.site-header__burger[aria-expanded="true"] .site-header__burger-lines::before {
  top: calc(50% - var(--burger-line-thickness) / 2);
  transform: rotate(45deg);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-lines::after {
  top: calc(50% - var(--burger-line-thickness) / 2);
  transform: rotate(-45deg);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-lines span { opacity: 0; }

/* --- Tablet --- */
@media (min-width: 768px) {
  .site-header {
    --header-height: 120px;       /* 3 Einheiten */
    --header-inline: 40px;        /* 1 Einheit */
    --logo-height: 48px;
    --burger-size: 60px;
    --burger-line-width: 36px;
    --burger-line-gap: 9px;
  }
  .site-header.is-scrolled { --header-height: 60px; }
}

/* --- Desktop --- */
@media (min-width: 1024px) {
  .site-header {
    --header-height: 160px;       /* 4 Einheiten */
    --header-inline: 40px;
    --logo-height: 60px;
    --burger-size: 60px;          /* Klickfläche */
    --burger-line-width: 40px;    /* etwa Schrifthöhe der Wortmarke */
    --burger-line-gap: 10px;
  }
  .site-header.is-scrolled { --header-height: 80px; }
  /* auf dem 1512er Artboard ergibt sich der Rand 116 aus max-width 1280 */
  .site-header__inner { padding: 0; }
}
@media (min-width: 1024px) and (max-width: 1359px) {
  .site-header__inner { padding: 0 var(--header-inline); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__inner { transition: none; }
  .site-header__burger-lines::before,
  .site-header__burger-lines::after,
  .site-header__burger-lines span { transition: none; }
}

/* --- css/components/menu.css --- */
/* =========================================================
   Komponente: Mega-Menü  (perlen.an.der.ruhr)
   Abhängig von pattern.css (Kategorie-Band) und ../tokens.css und header.css
   Öffnet als Vollfläche in ochre/light unter dem Header.
   Oben Spots als kleine Kacheln, darunter die Kategorien mit Unterpunkten.
   Desktop: fünf nebeneinander. Tablet: drei + zwei. Mobil: Liste.
   ========================================================= */

.mega-menu {
  position: fixed;
  inset: 0;
  z-index: 90;                          /* unter dem Header (100) */
  background: var(--ochre-light);
  color: var(--neutral-text);
  font-family: var(--font-serif);
  overflow-y: auto;
  padding-top: var(--header-height, 80px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease;
}
body.menu-open { overflow: hidden; }

.mega-menu__inner {
  box-sizing: border-box;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-1) 20px var(--space-2);
  display: grid;
  gap: var(--space-2);
}

/* --- Abschnitt mit Überschrift --- */
.mega-menu__section { display: grid; gap: var(--space-1-2); }
.mega-menu__heading {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin: 0;
  padding-bottom: var(--space-1-4);
  border-bottom: 3px solid var(--neutral-text);
}

/* --- Spots: kleine Kacheln (Karten, gerade Kanten) --- */
.mega-menu__spots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1-4);
}
.mega-menu__spots > li { display: flex; }
.mega-menu__spot {
  --panel-bg: var(--lavender-dark);
  --panel-fg: var(--neutral-bg);
  flex: 1;
  box-sizing: border-box;
  min-height: 80px;
  padding: var(--space-1-4) var(--space-1-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  text-decoration: none;
}
.mega-menu__spot-title {
  font-size: var(--text-small);
  line-height: 20px;
  font-weight: var(--font-weight-black);
  text-decoration: underline transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  transition: text-decoration-color .15s ease;
}
.mega-menu__spot-km {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  opacity: .85;
}
.mega-menu__spot:hover .mega-menu__spot-title, .mega-menu__spot:focus-visible .mega-menu__spot-title { text-decoration-color: currentColor; }
.mega-menu__spot:focus-visible { outline: 3px solid var(--neutral-text); outline-offset: 3px; }

/* --- Kategorien --- */
.mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
}
.mega-menu__title {
  display: flex;
  align-items: flex-end;                 /* Überschriften auf gleicher Höhe */
  min-height: 40px;
  font-size: 25px;
  line-height: 30px;
  font-weight: var(--font-weight-black);
  color: inherit;
  text-decoration: none;
  padding-bottom: var(--space-1-4);
}
.mega-menu__title:hover { color: var(--lavender-dark); text-decoration: none; }
.mega-menu__band {                       /* Kategorie-Streifen unter dem Titel, ersetzt die Linie: Farbe und Muster der Kategorie */
  height: 20px;
  background: var(--cat-bg, var(--lavender-light));
  --pattern-color: var(--cat-fg, var(--neutral-text));
  --pattern-opacity: .3;
  margin-bottom: var(--space-1-4);
}
.mega-menu__title:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 4px; }

.mega-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega-menu__sub a {
  display: block;
  font-size: var(--text-label);
  line-height: 20px;
  padding: 10px 0;                       /* Klickhöhe 40 */
  color: inherit;
}
.mega-menu__sub a:hover { color: var(--lavender-dark); }
.mega-menu__sub a:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 2px; }

/* --- Tablet: drei + zwei --- */
@media (min-width: 768px) {
  .mega-menu__inner { padding: var(--space-1) 40px var(--space-2); }
  .mega-menu__spots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1-2); }
  .mega-menu__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-1); }
  .mega-menu__title { min-height: 70px; }
}

/* --- Desktop: fünf nebeneinander --- */
@media (min-width: 1024px) {
  .mega-menu__inner { padding: var(--space-2) 40px var(--space-3); }
  .mega-menu__spots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1-2); }
  .mega-menu__spot { min-height: 100px; }
  .mega-menu__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }  /* 5 × 224 + 4 × 40 = 1280 */
  .mega-menu__title { min-height: 70px; }    /* zwei Zeilen à 30 + Abstand: alle Linien auf einer Höhe */
}
@media (min-width: 1360px) {
  .mega-menu__inner { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu, .mega-menu.is-open { transition: none; }
}

/* --- css/components/breadcrumb.css --- */
/* =========================================================
   Komponente: Breadcrumb  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css
   Optional pro Seite (Startseite: keine). Scrollt mit, nicht sticky.
   Mobil: nur Home-Kreis und Elternseite.
   Home = Kreis in mint/default statt Schriftzug.
   ========================================================= */

.breadcrumb {
  font-family: var(--font-serif);
  font-size: var(--text-label);          /* 16 */
  line-height: var(--leading-label);     /* 20 */
  font-weight: var(--font-weight-light);
  color: var(--neutral-text);
  max-width: var(--content-width);
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1-2) auto;      /* Zeile 20 hoch, 20 Luft zum Header und zum ersten Element, kollabiert; Desktop 40 */
  padding: 0 20px;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1-4);
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0 var(--space-1-4);
}
/* Trenner vor jedem Eintrag außer dem ersten */
.breadcrumb li + li::before {
  content: "/";
  color: var(--neutral-text-muted);
}
.breadcrumb a {
  color: inherit;
  display: inline-block;
  padding: var(--space-1-4) 0;           /* Klickhöhe 40 */
  margin: calc(-1 * var(--space-1-4)) 0;
}
.breadcrumb a:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 2px; }
.breadcrumb [aria-current="page"] { font-weight: var(--font-weight-regular); }

/* Home: Kreis in mint/default, 20 px, Klickfläche 40 × 40 */
.breadcrumb .breadcrumb__home {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -10px 0 -10px -10px;
  padding: 0;
  border-radius: 50%;
}
.breadcrumb .breadcrumb__home::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mint-default);
  transition: transform .15s ease, background-color .15s ease;
}
.breadcrumb .breadcrumb__home:hover { text-decoration: none; }
.breadcrumb .breadcrumb__home:hover::before { background: var(--mint-dark); }
.breadcrumb .breadcrumb__home:focus-visible { outline-offset: 0; }

/* Mobil: nur Home-Kreis und die Seite direkt über der aktuellen */
@media (max-width: 767px) {
  .breadcrumb li { display: none; }
  .breadcrumb li:first-child,
  .breadcrumb li:nth-last-child(2) { display: flex; }
  /* Bei nur einer Ebene (Home + aktuelle Seite) bleibt allein der Kreis */
}

@media (min-width: 768px) {
  .breadcrumb { padding: 0 40px; }
}
@media (min-width: 1024px) {
  .breadcrumb { margin: var(--space-1) auto; }   /* gleicher Abstand zum Header wie zum Hero: 40 */
}
@media (min-width: 1360px) {
  .breadcrumb { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .breadcrumb .breadcrumb__home::before { transition: none; }
}

/* --- css/components/hero.css --- */
/* =========================================================
   Komponente: Hero  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css und km.css (Kachel)
   Varianten: hero--image-right (Surfschule), hero--image-left
   (Kemnader See), hero--no-image. Farbfläche über panel--*.
   Flusskilometer optional als Kachel (hero__km). Die Spanne ist ein
   eigenes Element, siehe km.css.
   ========================================================= */

.hero {
  --hero-pad: 20px;                      /* Seitenrand, für die Kachel-Position auf der Nahtstelle */
  font-family: var(--font-serif);
  color: var(--neutral-text);
  max-width: var(--content-width);
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1-2) auto 0;       /* 20 zum Breadcrumb, kollabiert mit dessen 20 */
  padding: 0 var(--hero-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
@media (min-width: 768px)  { .hero { --hero-pad: 40px; } }
@media (min-width: 1360px) { .hero { --hero-pad: 0px; } }

.hero__image { aspect-ratio: 7 / 4; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__panel {
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1-2);
  min-height: 240px;
  box-sizing: border-box;
}
.hero__title {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--font-weight-black);
  margin: 0;
}
.hero__title--initial::first-letter { font-size: 2em; line-height: 1; }
.hero__text {
  font-size: var(--text-body);           /* Body, nicht Lead: Lead war in der Fläche zu groß */
  line-height: var(--leading-body);
  margin: 0;
}

/* --- Mobil / Tablet (< 1024): gestapelt, Fläche je 20 schmaler als das Bild, schiebt sich 40 ins Bild --- */
.hero--image-right .hero__panel,
.hero--image-left .hero__panel {
  margin: -40px 20px 0;
  position: relative;
  z-index: 1;
}
.hero__km {
  width: auto;
  position: absolute;
  top: var(--space-1-2);
  right: 10px;
  z-index: 2;
}
@media (min-width: 768px) { .hero__km { right: 30px; } }

/* --- Desktop: Raster mit 6 Spalten, Fläche überlappt Bild --- */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    grid-template-rows: 40px 1fr 40px;
    margin-top: var(--space-1);
  }
  .hero__image { grid-row: 1 / 3; aspect-ratio: 7 / 4; }
  /* Fläche beginnt 40 unter der Bildoberkante und endet 40 unter der Bildunterkante (Figma).
     margin: 0 hebt den negativen Rand der gestapelten Ansicht auf, sonst rutscht sie bündig nach oben. */
  .hero__panel,
  .hero--image-right .hero__panel,
  .hero--image-left .hero__panel { grid-row: 2 / 4; margin: 0; min-height: 0; z-index: 1; }

  /* Bild rechts (Surfschule): Bild Spalten 3–6, Fläche 1–2 plus Überlappung 40 */
  .hero--image-right .hero__image { grid-column: 3 / 7; }
  .hero--image-right .hero__panel { grid-column: 1 / 3; margin-right: calc(-1 * var(--space-2)); }

  /* Bild links (Kemnader See): Bild Spalten 1–4, Fläche 5–6 plus Überlappung 40 */
  .hero--image-left .hero__image { grid-column: 1 / 5; }
  .hero--image-left .hero__panel { grid-column: 5 / 7; margin-left: calc(-1 * var(--space-2)); }

  /* Kachel sitzt auf der Nahtstelle von Fläche und Bild: 100 auf der Fläche, 60 im Bild.
     Rasterspalte c = (Inhaltsbreite - 5 Rinnen) / 6; 100% ist hier die Breite inklusive Seitenrand. */
  .hero { --hero-col: calc((100% - 2 * var(--hero-pad) - 5 * var(--grid-gutter)) / 6); }
  .hero__km { width: auto; z-index: 3; }
  /* Text links (Surfschule): Naht rechts der Fläche bei 2 Spalten + 1 Rinne + 80 Überlappung; Kachel ragt 20 über das Bild hinaus */
  .hero--image-right .hero__km {
    top: -20px;
    right: auto;
    left: calc(var(--hero-pad) + 2 * var(--hero-col) + var(--grid-gutter) + 80px - 100px);
  }
  /* Text rechts (Restaurant): Naht links der Fläche bei 4 Spalten + 4 Rinnen - 80 Überlappung; Kachel ragt 40 über das Bild hinaus */
  .hero--image-left .hero__km {
    top: calc(-1 * var(--space-1));
    right: auto;
    left: calc(var(--hero-pad) + 4 * var(--hero-col) + 4 * var(--grid-gutter) - 80px - 60px);
  }

  /* Ohne Bild: Fläche über die volle Breite, Kachel rechts oben */
  .hero--no-image { grid-template-rows: auto; }
  .hero--no-image .hero__panel { grid-column: 1 / 7; grid-row: 1; min-height: 320px; padding: var(--space-2) var(--space-1) var(--space-1); }
  .hero--no-image .hero__km { top: 40px; right: -20px; }
  .hero--no-image .hero__text { max-width: 840px; }
}
@media (max-width: 1023px) {
  .hero--no-image .hero__panel { min-height: 200px; padding-top: var(--space-2); }
  .hero--no-image .hero__km { top: 0; right: 10px; }
}

/* --- css/components/km.css --- */
/* =========================================================
   Komponente: Flusskilometer  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css und panel.css
   km-tile: Kachel mit Wert, optional Label. Wird im Hero als hero__km
   platziert, steht sonst frei.
   km-range: eigenes Element, Spanne „72 bis 97", zentriert, mit Label.
   ========================================================= */

.km-tile {
  font-family: var(--font-serif);
  min-width: 120px;                      /* wächst bei drei Ziffern */
  height: 100px;
  box-sizing: border-box;
  padding: 10px 15px 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.km-tile__label {
  display: block;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--font-weight-regular);
}
.km-tile__value {
  display: block;
  font-size: 50px;
  line-height: 60px;
  font-weight: var(--font-weight-black);
}
/* Kachel ohne Label: Wert mittig */
.km-tile--value-only { justify-content: center; padding-top: 0; }

.km-range {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  text-align: center;
  max-width: var(--content-width);
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1) auto;
  padding: 0 20px;
}
.km-range__label {
  display: block;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-1-2);
}
.km-range__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1-2);
}
/* Feine Striche: laufen links und rechts von den Kacheln bis zum Rand weiter, und „bis" trägt sie auf beiden Seiten */
.km-range__row::before, .km-range__row::after,
.km-range__sep::before, .km-range__sep::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--neutral-text);
  opacity: .3;
}
.km-range__row::before, .km-range__row::after { flex: 1; }
.km-range__sep {
  display: flex;
  align-items: center;
  gap: var(--space-1-2);
  font-size: 50px;
  line-height: 60px;
  font-weight: var(--font-weight-light);
}
.km-range__sep::before, .km-range__sep::after { width: 20px; }
/* Mobil: kleiner, damit die Kacheln nicht am Rand kleben (335 breit: 100 + 10 + 85 + 10 + 100) */
@media (max-width: 767px) {
  .km-range__row { gap: var(--space-1-4); }
  .km-range .km-tile { min-width: 100px; padding-left: 10px; padding-right: 10px; }
  .km-range__sep { font-size: 30px; line-height: 40px; gap: var(--space-1-4); }
  .km-range__sep::before, .km-range__sep::after { width: 10px; }
}
/* Hochzählen beim Aufruf (km.js): Ziffern tabellarisch, damit nichts springt */
.km-range .km-tile__value { font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  .km-tile { min-width: 160px; height: 120px; padding: 10px 20px 0; }
  .km-tile--value-only { padding-top: 0; }
  .km-tile__value { font-size: var(--text-display); line-height: var(--leading-display); }
  .km-range { margin: var(--space-2) auto; padding: 0 40px; }
  .km-range__sep { font-size: var(--text-display); line-height: var(--leading-display); gap: var(--space-1); }
  .km-range__sep::before, .km-range__sep::after { width: 40px; }
}

/* --- css/components/text.css --- */
/* =========================================================
   Komponente: Text  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css und panel.css
   Fließtext mit Zwischenüberschriften, Listen, Links, Fett,
   großen Zitaten und Tabellen. Optional auf heller Farbfläche
   (text--panel + panel--*). Breite: 4 Spalten = 840.
   ========================================================= */

.text {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  font-size: var(--text-body);         /* 20 / 22 / 25 auf 40 */
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  max-width: 840px;
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1) auto;
  padding: 0 20px;
}
.text > * { margin: 0 0 var(--space-1-2); }
.text > *:last-child { margin-bottom: 0; }

/* --- Zwischenüberschriften --- */
.text h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin-top: var(--space-1);
  margin-bottom: var(--space-1-2);
}
.text h3 {
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--font-weight-bold);
  margin-top: var(--space-1);
  margin-bottom: 0;
}
.text > h2:first-child, .text > h3:first-child { margin-top: 0; }

/* --- Auszeichnung --- */
.text strong, .text b { font-weight: var(--font-weight-bold); }
.text em, .text i { font-style: italic; }
.text a { color: inherit; }         /* Linkstil aus links.css: dünn, Hover dick */

/* --- Listen --- */
.text ul, .text ol { padding-left: var(--space-1); }
.text li { margin-bottom: var(--space-1-4); }
.text li::marker { color: var(--lavender-dark); }
.text ul { list-style: none; padding-left: var(--space-1); }
.text ul > li { position: relative; }
.text ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-1));
  top: calc((var(--leading-body) - 12px) / 2);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint-default);
}
.text ol { list-style: decimal; }
.text ol > li::marker { font-weight: var(--font-weight-black); color: var(--neutral-text); }
.text ul ul, .text ol ol, .text ul ol, .text ol ul { margin-top: var(--space-1-4); margin-bottom: 0; }

/* --- Großes Zitat --- */
.text blockquote {
  margin: var(--space-1) 0;
  padding: 0 0 0 var(--space-1);
  border-left: 3px solid var(--mint-default);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: 200;
  font-style: italic;
}
.text blockquote p { margin: 0; }
.text blockquote footer, .text blockquote cite {
  display: block;
  margin-top: var(--space-1-4);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  color: var(--neutral-text-muted);
}

/* --- Tabelle --- */
.text .table-wrap { overflow-x: auto; margin: var(--space-1) 0; }
.text table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.text th, .text td { text-align: left; vertical-align: top; padding: var(--space-1-4) var(--space-1-2) var(--space-1-4) 0; }
.text thead th { font-weight: var(--font-weight-bold); border-bottom: 3px solid var(--neutral-text); }
.text tbody td, .text tbody th { border-bottom: 1px solid var(--lavender-light); }
.text tbody th { font-weight: var(--font-weight-bold); }
.text caption { text-align: left; font-weight: var(--font-weight-bold); padding-bottom: var(--space-1-4); }
.text td.num, .text th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Trenner, Bild --- */
.text hr { border: 0; border-top: 3px solid var(--neutral-text); width: 80px; margin: var(--space-1) 0; }
.text img { max-width: 100%; height: auto; display: block; }
.text figcaption { font-size: var(--text-label); line-height: var(--leading-label); color: var(--neutral-text-muted); margin-top: var(--space-1-4); }

/* --- Auf heller Farbfläche --- */
.text--panel {
  padding: var(--space-1);
  max-width: 840px;
}
.text--panel tbody td, .text--panel tbody th { border-bottom-color: rgba(28, 26, 23, .15); }

/* --- Desktop --- */
@media (min-width: 1024px) {
  .text { margin: var(--space-2) auto; padding: 0 40px; }
  .text h2 { margin-top: var(--space-2); }
  .text h3 { margin-top: var(--space-1); }
  .text blockquote { font-size: 40px; line-height: 60px; margin: var(--space-2) 0; }
  .text--panel { padding: var(--space-2); }
}
@media (min-width: 1360px) {
  .text { padding-left: 0; padding-right: 0; }
  .text--panel { padding: var(--space-2); }
}

/* --- css/components/button.css --- */
/* =========================================================
   Komponente: Button  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css und panel.css
   Zwei Stile: btn--solid (flächig) und btn--ghost (Kontur). Buttons haben
   immer gerade Kanten, kein Skew.
   Höhe 40 mobil, 60 ab Tablet. Nie kleiner als 40 × 40 Klickfläche.
   ========================================================= */

.btn {
  --btn-bg: var(--lavender-dark);
  --btn-fg: var(--neutral-bg);
  --btn-border: var(--neutral-text);
  font-family: var(--font-serif);
  font-size: var(--text-small);
  line-height: 20px;
  font-weight: var(--font-weight-bold);
  min-height: 40px;
  padding: 10px 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 4px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }

/* --- flächig: gerade Kanten --- */
.btn--solid {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn--solid:hover { --btn-bg: var(--mint-dark); }
.btn--solid:active { --btn-bg: var(--neutral-text); }

/* Farbvarianten flächig */
.btn--solid.btn--mint   { --btn-bg: var(--mint-default);   --btn-fg: var(--neutral-text); }
.btn--solid.btn--mint:hover { --btn-bg: var(--mint-dark); --btn-fg: var(--neutral-bg); }
.btn--solid.btn--ochre  { --btn-bg: var(--ochre-default);  --btn-fg: var(--neutral-text); }
.btn--solid.btn--ochre:hover { --btn-bg: var(--ochre-dark); --btn-fg: var(--neutral-bg); }
.btn--solid.btn--coral  { --btn-bg: var(--coral-default);  --btn-fg: var(--neutral-text); }
.btn--solid.btn--coral:hover { --btn-bg: var(--coral-dark); --btn-fg: var(--neutral-bg); }
.btn--solid.btn--light  { --btn-bg: var(--lavender-light); --btn-fg: var(--neutral-text); }
.btn--solid.btn--light:hover { --btn-bg: var(--lavender-dark); --btn-fg: var(--neutral-bg); }

/* --- Kontur: gerade Kante, 3 px --- */
.btn--ghost {
  border: 3px solid var(--btn-border);
  color: var(--btn-border);
  padding: 7px 17px;
}
.btn--ghost:hover { background: var(--btn-border); color: var(--neutral-bg); }
.btn--ghost:active { --btn-border: var(--lavender-dark); }
/* auf dunkler Fläche */
.btn--ghost.btn--on-dark { --btn-border: var(--neutral-bg); }
.btn--ghost.btn--on-dark:hover { color: var(--neutral-text); }

/* --- Ladezustand für „mehr anzeigen" --- */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --- ab Tablet: 60 hoch --- */
@media (min-width: 768px) {
  .btn { min-height: 60px; padding: 20px 40px; }
  .btn--ghost { padding: 17px 37px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn[aria-busy="true"]::after { animation: none; }
}

/* --- css/components/teaser.css --- */
/* =========================================================
   Komponente: Teaser-Gruppe  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css, km.css, button.css
   Sektionstitel + Einleitung, Kacheln (teaser) im Raster, optional
   Farbhintergrund, optional Bild und Flusskilometer je Kachel,
   optional kompakte Liste für weitere Einträge, optional Button.
   Kacheln sind Karten: gerade Kanten, kein Skew.
   ========================================================= */

.teaser-group {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  margin: var(--space-1) 0;              /* ohne Fläche: Abstand als Margin, kollabiert mit Nachbarn */
  padding: 0;
}
.teaser-group--panel {                   /* mit Fläche: Luft innerhalb der Fläche als Padding, außen Margin */
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
}
.teaser-group__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}
.teaser-group__title {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-1-2);
}
.teaser-group__intro {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-1);
  max-width: 840px;
}

/* --- Kacheln --- */
.teaser-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  align-items: stretch;                  /* Kacheln einer Reihe gleich hoch */
}
.teaser-grid > li { display: flex; }
.teaser-grid > li > .teaser { flex: 1; min-width: 0; }   /* sonst hält der Titel die Kachel breiter als die Spalte */
.teaser {
  --panel-bg: var(--lavender-dark);
  --panel-fg: var(--neutral-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  color: var(--panel-fg);
  text-decoration: none;
  clip-path: none;                       /* Karte: gerade Kanten */
}
.teaser__image {
  aspect-ratio: 7 / 4;
  overflow: hidden;
  background: var(--lavender-light);
}
.teaser__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teaser__body {
  padding: var(--space-1-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-2);
  flex: 1;
}
.teaser__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin: 0;
  hyphens: auto;                         /* nur Wörter ab 10 Zeichen, mindestens 4 Zeichen vor und nach dem Strich: „Bade-saison", nicht „Surfschu-le" */
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;
  text-decoration: underline transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}
/* Platz für die Kilometer-Marke nur in der ersten Zeile: ein unsichtbarer Float rechts, 40 hoch */
.teaser__title::before { content: ""; float: right; width: 40px; height: 40px; }
.teaser--image .teaser__title::before, .teaser--call .teaser__title::before { content: none; }
.teaser:hover .teaser__title, .teaser:focus-visible .teaser__title { text-decoration-color: currentColor; }
.teaser:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 4px; }
.teaser__text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  margin: 0;                             /* mobil direkt unter dem Titel */
}

/* Flusskilometer-Marke: kleine Kachel rechts oben, ragt 10 heraus, mit Skew */
.teaser__km {
  --panel-bg: var(--lavender-light);
  --panel-fg: var(--neutral-text);
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 60px;                       /* wächst bei drei Ziffern */
  height: 60px;
  padding: 0 10px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  line-height: 30px;
  font-weight: var(--font-weight-black);
  background: var(--panel-bg);
  color: var(--panel-fg);
  z-index: 1;
}
.teaser__km small {
  display: block;
  font-size: 10px;
  line-height: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: .02em;
}
.teaser--image .teaser__km { top: 10px; right: 10px; }

/* --- Kompakte Liste für weitere Einträge --- */
.teaser-list {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-1);
}
.teaser-list__item {
  border-top: 1px solid rgba(28, 26, 23, .2);
}
.teaser-list__item:last-child { border-bottom: 1px solid rgba(28, 26, 23, .2); }
.teaser-list__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-2);
  padding: var(--space-1-4) 0;
  color: inherit;
  text-decoration: none;
  min-height: 40px;
}
.teaser-list__title {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-bold);
  flex: 1;
}
.teaser-list__meta {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--neutral-text-muted);
  white-space: nowrap;
}
.teaser-list__km {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  white-space: nowrap;
}
.teaser-list__km b { font-weight: var(--font-weight-black); font-size: var(--text-body); }
.teaser-list__link::after { content: "→"; font-weight: var(--font-weight-light); }
.teaser-list__link:hover .teaser-list__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.teaser-list__link:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 2px; }

/* --- Button --- */
.teaser-group__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-1);
}
.teaser-grid [hidden] { display: none; }

/* --- Tablet: 2 Spalten, feste Mindesthöhe, Text unten --- */
@media (min-width: 768px) {
  .teaser-group__inner { padding: 0 40px; }
  .teaser { min-height: 280px; }
  .teaser__text { margin-top: auto; }
  .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser-list__item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid rgba(28, 26, 23, .2); }
}

/* --- Desktop: 3 Spalten à 2 Rasterspalten = 400 --- */
@media (min-width: 1024px) {
  .teaser-group { margin: var(--space-2) 0; }
  .teaser-group--panel { margin: var(--space-3) 0; padding: var(--space-3) 0; }
  .teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teaser { min-height: 400px; }
  .teaser__body { padding: var(--space-1); }
  .teaser__title::before { width: 50px; }
  .teaser__km { min-width: 80px; height: 80px; font-size: 35px; line-height: 40px; }
  .teaser__km small { font-size: 12px; line-height: 14px; }
  .teaser-group__more { margin-top: var(--space-2); }
  .teaser-list { margin-top: var(--space-2); }
}
@media (min-width: 1360px) {
  .teaser-group__inner { padding: 0; }
}

/* --- Optional: Muster als Kategorie-Kennung (siehe spots.html, pattern.css) --- */
.teaser__pattern { aspect-ratio: 7 / 4; }                                        /* ohne Bild: Band oben, wo sonst das Bild sitzt */
.teaser--image .teaser__pattern { aspect-ratio: auto; height: 40px; order: 10; } /* mit Bild: Streifen unten, 40 hoch */

/* --- Aufruf-Kachel am Ende einer Liste: „Dein Lieblingsort fehlt? Schreib uns!" --- */
.teaser--call { --panel-bg: var(--ochre-default); --panel-fg: var(--neutral-text); }
.teaser--call .teaser__text { font-size: var(--text-body); line-height: var(--leading-body); }
.teaser--call .teaser__text::after { content: " →"; font-weight: var(--font-weight-light); }

/* --- News-Kachel: Datum oben, Titel, Text, Pfeil unten wie bei der großen Info-Box --- */
.teaser--news .teaser__title::before { content: none; }   /* keine Kilometer-Marke */
.teaser__date {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: .02em;
  opacity: .85;
  margin: 0;
}
.teaser--news .teaser__text { margin-top: 0; }
.teaser__arrow {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-light);
  margin-top: auto;                      /* sitzt unten in der Kachel */
  transition: transform .15s ease;
}
.teaser--news:hover .teaser__arrow, .teaser--news:focus-visible .teaser__arrow { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .teaser__arrow { transition: none; } }

/* --- css/components/figure.css --- */
/* =========================================================
   Komponente: Bild  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css und panel.css
   Drei Varianten: figure--side (Bild mit Titel daneben, Richtung
   tauschbar), figure--pair (zwei Bilder nebeneinander),
   figure--full (Bild über die volle Inhaltsbreite).
   Bilder haben gerade Kanten, kein Skew.
   Abstand oben und unten als Margin (40, Desktop 80), kollabiert mit
   Nachbarn und Seitenraster. Eine Bildunterschrift unter dem Bild
   (figure__caption direkt im figure) liegt absolut in diesem
   Zwischenraum und verlängert das Element nicht.
   ========================================================= */

.figure {
  --figure-pad: 20px;                    /* Seitenrand, folgt dem Raster */
  font-family: var(--font-serif);
  color: var(--neutral-text);
  max-width: var(--content-width);
  margin: var(--space-1) auto;
  padding: 0 var(--figure-pad);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1-2) var(--space-1);
}
.figure__image {
  background: var(--lavender-light);
  aspect-ratio: 7 / 4;
  overflow: hidden;
  margin: 0;
}
.figure__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Text neben dem Bild */
.figure__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;             /* unten bündig mit dem Bild */
  gap: var(--space-1-4);
}
.figure__title {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.figure__copy {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
}

/* Bildunterschrift */
.figure__caption {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--neutral-text-muted);
  margin: 0;
}
/* Unterschrift unter dem ganzen Bild: sitzt im Abstand zur nächsten Sektion, 10 unter dem Bild */
.figure > .figure__caption {
  position: absolute;
  top: calc(100% + var(--space-1-4));
  left: var(--figure-pad);
  right: var(--figure-pad);
}

/* --- Varianten --- */
.figure--full .figure__image { aspect-ratio: 2 / 1; }
.figure--pair .figure__image { aspect-ratio: 7 / 4; }
.figure--pair figure { margin: 0; display: grid; gap: var(--space-1-4); }

/* --- Tablet --- */
@media (min-width: 768px) {
  .figure { --figure-pad: 40px; }
  .figure--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure--side { grid-template-columns: 2fr 1fr; align-items: end; }
  .figure--side .figure__image { grid-row: 1; grid-column: 1; }
  .figure--side .figure__text  { grid-row: 1; grid-column: 2; }
  .figure--side.figure--reverse { grid-template-columns: 1fr 2fr; }
  .figure--side.figure--reverse .figure__image { grid-column: 2; }
  .figure--side.figure--reverse .figure__text  { grid-column: 1; }
}

/* --- Desktop: 6-Spalten-Raster --- */
@media (min-width: 1024px) {
  .figure { margin: var(--space-2) auto; }
  .figure--side { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .figure--side .figure__image { grid-column: 3 / 7; grid-row: 1; }     /* 4 Spalten = 840 × 480 */
  .figure--side .figure__text  { grid-column: 1 / 3; grid-row: 1; }     /* 2 Spalten = 400 */
  .figure--side.figure--reverse .figure__image { grid-column: 1 / 5; }
  .figure--side.figure--reverse .figure__text  { grid-column: 5 / 7; }
  .figure--side .figure__caption { grid-column: 3 / 7; }
  .figure--side.figure--reverse .figure__caption { grid-column: 1 / 5; }
}
@media (min-width: 1360px) {
  .figure { --figure-pad: 0px; }
}

/* --- css/components/share.css --- */
/* =========================================================
   Komponente: Share-Leiste  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css
   Label „Teilen" plus Buttons: WhatsApp, Facebook, X, LinkedIn,
   E-Mail, Link kopieren, Systemdialog (wenn verfügbar).
   Reine Links ohne Netzwerk-Skripte. Kontur-Stil wie Button.
   ========================================================= */

.share {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  max-width: var(--content-width);
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1) auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-2);
}
.share__label {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-bold);
  margin: 0 var(--space-1-4) 0 0;
}
.share__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-4);
}
.share__btn {
  --share-fg: var(--neutral-text);
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 3px solid var(--share-fg);
  background: transparent;
  color: var(--share-fg);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--font-weight-bold);
  transition: background-color .15s ease, color .15s ease;
}
.share__btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.share li:has(> [hidden]) { display: none; }   /* Systemdialog-Button: ohne ihn keine Lücke in der Reihe */
.share__btn:hover { background: var(--share-fg); color: var(--neutral-bg); }
.share__btn:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 3px; }
.share__btn[hidden] { display: none; }

/* mit Beschriftung */
.share--labels .share__btn { width: auto; padding: 0 15px 0 12px; }
.share--labels .share__btn span { display: inline; }
.share__btn span { display: none; }


/* auf dunkler Fläche */
.share--on-dark { color: var(--neutral-bg); }
.share--on-dark .share__btn { --share-fg: var(--neutral-bg); }
.share--on-dark .share__btn:hover { color: var(--neutral-text); }
.share--on-dark 
@media (min-width: 768px) {
  .share { padding: 0 40px; }
  .share__btn { width: 60px; height: 60px; }
  .share__btn svg { width: 24px; height: 24px; }
  .share--labels .share__btn { padding: 0 20px 0 17px; }
}
@media (min-width: 1360px) {
  .share { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .share__btn { transition: none; } }

/* --- css/components/ruhr.css --- */
/* =========================================================
   Stilelement: Ruhr-Linie  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css
   Der Flussverlauf als Grafik. Datei: assets/ruhr-line.svg (gefüllt,
   handgezeichnet) und assets/ruhr-line-stroke.svg (Linie 3 px).
   Farbe über currentColor, Standard lavender/dark.
   ========================================================= */

.ruhr-line {
  display: block;
  color: var(--lavender-dark);
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}
.ruhr-line svg, .ruhr-line img { display: block; width: 100%; height: auto; }

/* Größen */
.ruhr-line--full  { max-width: 1280px; }   /* 6 Spalten, Höhe ca. 342 */
.ruhr-line--wide  { max-width: 920px; }    /* Originalgröße aus Figma, im Header-Band der Startseite */
.ruhr-line--half  { max-width: 620px; }    /* 3 Spalten */
.ruhr-line--small { max-width: 400px; }    /* 2 Spalten, Karten und Slider */

/* Farben */
.ruhr-line--mint   { color: var(--mint-dark); }
.ruhr-line--coral  { color: var(--coral-dark); }
.ruhr-line--ochre  { color: var(--ochre-dark); }
.ruhr-line--paper  { color: var(--neutral-bg); }   /* auf lavender/dark */
.ruhr-line--ink    { color: var(--neutral-text); }

/* --- css/components/footer.css --- */
/* =========================================================
   Komponente: Footer  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css, ruhr.css
   Beige Fläche (ochre/light) mit drei bis fünf kleinen Kacheln für
   Seiten, die wir pushen, darunter Wortmarke, Service-Navigation
   und Ruhr-Linie (gefüllte Variante in mint/default, dem Logo-Ton).
   ========================================================= */

.site-footer {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  background: var(--ochre-light);
  padding: var(--space-3) 0 var(--space-1);   /* innen oben 120 auf allen Breiten, mobil war 80 zu wenig */
  margin-top: var(--space-2);
}
.site-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}
.site-footer__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-1-2);
}

/* --- Kacheln: 3 bis 5 Seiten --- */
.footer-tiles {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1-2);
}
.footer-tiles > li { display: flex; }
.footer-tile {
  --panel-bg: var(--lavender-dark);
  --panel-fg: var(--neutral-bg);
  flex: 1;
  box-sizing: border-box;
  min-height: 80px;
  padding: var(--space-1-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  text-decoration: none;
  clip-path: none;                       /* Karte: gerade Kanten */
}
.footer-tile__title {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-black);
  text-decoration: underline transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}
.footer-tile__hint {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  opacity: .85;
}
.footer-tile:hover .footer-tile__title, .footer-tile:focus-visible .footer-tile__title { text-decoration-color: currentColor; }
.footer-tile:focus-visible { outline: 3px solid var(--neutral-text); outline-offset: 3px; }

/* --- Variante Newsletter: statt Kacheln Text mit drei Punkten und das Anmeldeformular --- */
.footer-newsletter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}
.footer-newsletter__intro {                     /* Small statt Body: der Footer ist Beiwerk, Zeile 30 statt 40 */
  font-size: var(--text-small);
  line-height: 30px;
  margin: 0 0 var(--space-1-2);
}
.footer-newsletter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-label);
  line-height: var(--leading-label);
}
.footer-newsletter__list li { position: relative; padding-left: 20px; margin-top: var(--space-1-4); }
.footer-newsletter__list li::before {           /* Perle als Aufzählungspunkt */
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint-default);
}
.footer-newsletter .form { margin: 0; padding: 0; max-width: none; }   /* das Formular liegt im Raster des Footers */
.footer-newsletter .field--short .field__input { max-width: none; }
.footer-newsletter .field__label { font-size: var(--text-small); line-height: 30px; }
.footer-newsletter .form { gap: var(--space-1-2); }

/* --- Untere Zeile: Wortmarke, Service-Navigation, Ruhr-Linie --- */
.site-footer__bottom {
  border-top: 3px solid var(--neutral-text);
  padding-top: var(--space-1);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  align-items: end;
}
.site-footer__logo { display: block; line-height: 0; color: var(--neutral-text); width: 260px; }   /* Mindestbreite der Wortmarke */
.site-footer__logo svg { display: block; width: 100%; height: auto; }
.site-footer__logo:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 6px; }

.service-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-4) var(--space-1);
}
.service-nav a {
  display: inline-block;
  font-size: var(--text-small);
  line-height: 20px;
  font-weight: var(--font-weight-bold);
  color: inherit;
  padding: 10px 0;                       /* Klickhöhe 40 */
}
.service-nav a[aria-current="page"] { text-decoration-thickness: 3px; }

.site-footer__ruhr { color: var(--mint-default); max-width: 400px; }   /* gefüllte, handgezeichnete Ruhr im hellen Logo-Ton */
.site-footer__ruhr svg { display: block; width: 100%; height: auto; }

.site-footer__meta {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--neutral-text-muted);
  margin: var(--space-1) 0 0;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .site-footer__inner { padding: 0 40px; }
  .footer-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
  .footer-tile { min-height: 120px; }
  .footer-newsletter { grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .site-footer__bottom { grid-template-columns: auto 1fr; }
  .site-footer__ruhr { grid-column: 1 / -1; }
  .service-nav ul { justify-content: flex-end; }
}

/* --- Desktop --- */
@media (min-width: 1024px) {
  .site-footer { margin-top: var(--space-3); }
  .footer-tiles { grid-template-columns: repeat(var(--footer-tiles, 5), minmax(0, 1fr)); }  /* 5 × 224 + 4 × 40 = 1280 */
  .footer-tile { min-height: 160px; padding: var(--space-1-2) var(--space-1-2); }
  .footer-newsletter { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* Text 3 Spalten, Formular 3 Spalten */
  .footer-newsletter__text { grid-column: 1 / 4; }
  .footer-newsletter__form { grid-column: 4 / 7; }
  .site-footer__bottom { grid-template-columns: auto 1fr auto; padding-top: var(--space-1); }
  .site-footer__ruhr { grid-column: auto; width: 400px; }
}
@media (min-width: 1360px) {
  .site-footer__inner { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .footer-tile__title { transition: none; } }

/* --- css/components/river-hero.css --- */
/* =========================================================
   Komponente: Startseiten-Hero  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css, km.css, button.css
   Die Ruhr groß in der Mitte auf ochre/light. Beim Überfahren (Maus
   oder Finger) erscheint die Flusskilometer-Kachel mit feiner Linie
   zum Fluss. Punkte markieren Einträge, Spots sind größer und Links.
   Darunter Filter-Buttons nach Kategorie. Punkte, Chips und Muster
   tragen die Kategorie-Farbe und das Kategorie-Muster (pattern.css,
   Klassen cat--…, Tokens --cat-… in tokens.css). Spot-Punkte tragen
   die Spot-Farbe.
   Abhängig zusätzlich von pattern.css.
   ========================================================= */

.river-hero {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  background: var(--ochre-light);
  overflow: hidden;                      /* Kachel, Punkte und Beschriftungen am Flussende dürfen die Seite nicht breiter machen */
  padding: var(--space-1) 0 var(--space-2);
  --river-color: var(--lavender-dark);
  --point-color: var(--lavender-default);   /* Rückfall, wenn ein Eintrag keine Kategorie hat */
  --spot-color: var(--mint-default);        /* Rückfall, wenn ein Spot keinen spotKey hat */
  --point-offset: 22px;                  /* Abstand der Punkte neben dem Fluss */
}
.river-hero__inner { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; }

/* --- Startseite: Fläche läuft unter den Header, Hero höchstens 70dvh --- */
.river-hero--under-header {
  margin-top: -80px;                     /* Header-Höhe mobil */
  padding-top: 80px;
}
.river-hero--fit { padding-bottom: var(--space-1); }
.river-hero--fit .river-filter { margin-top: var(--space-1); }
/* quer: Fluss so breit, dass Header + Kachel-Zone + Fluss + Filter in 70dvh passen */
.river-hero--fit .river-stage:not(.is-vertical) .river-stage__art {
  width: min(100%, calc((70dvh - 420px) * 3.75));   /* Seitenverhältnis 918 : 245 */
  margin: 0 auto;
}
.river-hero--fit .river-stage:not(.is-vertical) { padding-top: 120px; }

/* --- Bühne: Kachel-Zone oben, Fluss darunter --- */
.river-stage {
  position: relative;
  padding-top: 140px;                    /* Platz für Kachel (100/120) + Linie */
  touch-action: pan-y;
  cursor: crosshair;
}
.river-stage__art { position: relative; color: var(--river-color); }
.river-stage__art svg { display: block; width: 100%; height: auto; }
.river-stage__measure { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* --- Kilometer-Anzeige --- */
.river-km {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);           /* quer setzt das Skript left in px und nimmt den Transform weg: am Rand 20 px Abstand */
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 3;
}
.river-km.is-visible { opacity: 1; }
.river-km .km-tile { min-width: 120px; height: 100px; }
.river-km__line {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  background: var(--neutral-text);
  opacity: .5;
}

/* --- Punkte --- */
.river-points { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.river-points > li {
  position: absolute;
  transform: translate(-50%, calc(-50% - var(--point-offset)));   /* quer: oberhalb des Flusses */
}
.river-stage.is-vertical .river-points > li {
  transform: translate(calc(-50% + var(--point-offset)), -50%);   /* hochkant: rechts vom Fluss */
}
.river-point {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--cat-bg, var(--point-color));   /* Kategorie-Farbe, das Skript setzt cat--… auf das li */
  text-decoration: none;
  position: relative;
}
.river-point::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .15s ease;
}
.river-point:hover::before, .river-point:focus-visible::before, .river-point.is-active::before { transform: scale(1.5); }

/* Spots: größer, Link */
.river-point--spot {
  color: var(--spot-color);                   /* Spot-Farbe kommt per style="color: var(--spot-…)" aus dem Skript */
  cursor: pointer;
}
.river-point--spot::after {                   /* Kern mit Ring in derselben Farbe, 3 px, Lücke 4 px */
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px currentColor;
  pointer-events: none;
}
.river-point--spot::before { width: 22px; height: 22px; }
.river-point--spot:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 0; border-radius: 50%; }

/* Beschriftung beim Überfahren */
.river-point__label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-text);
  background: var(--neutral-bg);
  padding: 0 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 4;
}
.river-point:hover .river-point__label, .river-point:focus-visible .river-point__label, .river-point.is-active .river-point__label { opacity: 1; }
.river-points > li[hidden] { display: none; }

/* --- Filter: Chips in Kategorie-Farbe, ohne Muster (auf Buttons zu unruhig, 25.09.2026).
   Kein „Alle": ein gedrückter Chip wird durch erneutes Klicken gelöst. --- */
.river-filter {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-4);
  justify-content: center;
}
.river-filter .btn {
  --chip-bg: var(--cat-bg, var(--lavender-light));
  --chip-fg: var(--cat-fg, var(--neutral-text));
  min-height: 40px;
  padding: 10px 20px;
  border: 0;
  font-size: var(--text-label);
  line-height: 20px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}
.river-filter .btn:hover { --chip-bg: var(--neutral-text); --chip-fg: var(--neutral-bg); }
.river-filter .btn[aria-pressed="true"] { --chip-bg: var(--neutral-text); --chip-fg: var(--neutral-bg); }
.river-filter__count { font-weight: var(--font-weight-regular); opacity: .7; }
/* Ist ein Filter aktiv, treten die anderen Chips zurück */
.river-filter.has-filter .btn[aria-pressed="false"] { opacity: .6; }
.river-filter.has-filter .btn[aria-pressed="false"]:hover { opacity: 1; }

/* --- Mobil: Filter ausgeblendet, Fluss bleibt quer --- */
@media (max-width: 767px) {
  .river-filter { display: none; }
  .river-points > li:not(.is-spot) { display: none; }   /* nur Spots, sonst wird es auf 335 px zu dicht */
}

/* --- Hochkant-Variante (Klasse is-vertical): seit 25.09.2026 nicht mehr aktiv, Skript schaltet sie nicht mehr ein --- */
.river-stage.is-vertical { padding-top: 0; padding-left: 140px; cursor: default; }
.river-stage.is-vertical .river-km { top: 0; left: 0; transform: translateY(-50%); }
.river-stage.is-vertical .river-km__line { top: 50%; left: 100%; width: auto; height: 1px; }

/* --- Tablet / Desktop --- */
@media (min-width: 768px) {
  .river-hero__inner { padding: 0 40px; }
  .river-hero { padding: var(--space-2) 0 var(--space-3); }
  .river-hero--under-header { margin-top: -120px; padding-top: 120px; }
  .river-hero--fit { padding-bottom: var(--space-1); }
  .river-stage { padding-top: 160px; }
  .river-km .km-tile { min-width: 160px; height: 120px; }
  .river-filter { gap: var(--space-1-2); margin-top: var(--space-2); }
}
@media (min-width: 1024px) {
  .river-hero--under-header { margin-top: -160px; padding-top: 160px; }
}
@media (min-width: 1360px) { .river-hero__inner { padding: 0; } }
@media (prefers-reduced-motion: reduce) {
  .river-km, .river-point::before, .river-point__label { transition: none; }
}

/* --- css/components/km-hero.css --- */
/* =========================================================
   Komponente: Flusskilometer-Hero  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css, hero.css, pattern.css (Kategorie-Farben)
   Hero der Seitenart „Flusskilometer N" (perlen.an.der.ruhr/km-80/):
   links statt Bild eine Farbfläche mit dem Ausschnitt der gezeichneten
   Ruhr um Kilometer N. Der Abschnitt N ± 5 ist voll gefärbt, der Rest
   leicht transparent. Punkte für Einträge und Spots neben dem Fluss,
   keine Filter. Rechts die Fläche mit Titel und Text.
   Layout kommt von hero.css (hero--image-left), km-hero.js setzt
   Ausschnitt, Maske und Punkte. Maße in Einheiten des Ausschnitts:
   Desktop 1 Einheit ≈ 4,2 px, mobil ≈ 1,7 px.
   ========================================================= */

.hero__river {                          /* nimmt den Platz des Bildes ein */
  aspect-ratio: 7 / 4;
  overflow: hidden;
  --river-color: var(--lavender-dark);
}
.hero__river svg { display: block; width: 100%; height: 100%; }

/* Unsichtbare Linie als Maßstab */
.km-hero__measure { fill: none; stroke: none; }

/* Gezeichnete Ruhr: außerhalb des Abschnitts leicht transparent, innerhalb voll (per Maske) */
.km-hero__fill { fill: var(--river-color); }
.km-hero__fill--outside { opacity: .3; }

/* Grenzen des Abschnitts: Strich quer über den Fluss mit Kilometerzahl */
.km-hero__tick { stroke: var(--neutral-text); stroke-width: .8; }
.km-hero__tick-label { font: 400 5px/1 var(--font-serif); fill: var(--neutral-text-muted); text-anchor: middle; }

/* Punkte neben dem Fluss: Einträge oben in Kategorie-Farbe, Spots unten in Spot-Farbe mit Ring und Namen */
.km-hero__point { fill: var(--cat-bg, var(--lavender-default)); }
.km-hero__point--spot { fill: var(--spot); }
.km-hero__ring { fill: none; stroke: var(--spot); stroke-width: .8; }
.km-hero__label {
  font: 700 5px/1 var(--font-serif);
  fill: var(--neutral-text);
  paint-order: stroke;
  stroke: var(--panel-bg, var(--lavender-light));
  stroke-width: 2px;
  stroke-linejoin: round;
}
.km-hero__entry--outside { opacity: .55; }   /* Spots im Blick, aber außerhalb des Abschnitts */
.km-hero__entry a:focus-visible .km-hero__point { stroke: var(--neutral-text); stroke-width: 1; }

/* --- css/components/motion.css --- */
/* =========================================================
   Stilelement: Bewegung  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css. Verhalten in motion.js.
   Zwei Dinge: Einblenden beim Scrollen (Kacheln und Boxen von unten,
   alles andere nur weich) und der Aufbau des Startseiten-Heros
   (Fluss zeichnet sich, Punkte tauchen auf).

   Regeln. Alles nur unter zwei Bedingungen: JavaScript läuft
   (html.has-js) und die Person hat keine reduzierte Bewegung
   eingestellt. Sonst steht alles sofort da. Es wird nur opacity und
   transform bewegt, nie Layout, nie display oder visibility: Inhalt
   bleibt für Screenreader, Suchmaschinen und KI-Crawler jederzeit
   im DOM, nichts wird nachgeladen oder umgebaut. Dauer höchstens 0,5 s.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* --- Einblenden beim Scrollen --- */
  .has-js [data-reveal] {
    opacity: 0;
    transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .has-js [data-reveal="up"] { transform: translateY(20px); }   /* Kacheln, Boxen: von unten */
  .has-js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Beim Fokus per Tastatur sofort sichtbar, auch wenn noch nicht gescrollt */
  .has-js [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }

  /* --- Startseiten-Hero: Fluss zeichnet sich, dann die Punkte --- */
  .has-js .river-hero.is-drawing .river-point { opacity: 0; }
  .has-js .river-hero .river-point.is-in { animation: river-point-in .3s cubic-bezier(.2, .9, .3, 1.25) both; }
  @keyframes river-point-in {
    from { opacity: 0; scale: .3; }
    to   { opacity: 1; scale: 1; }
  }
  /* Filter-Chips erst nach den Punkten */
  .has-js .river-hero.is-drawing .river-filter { opacity: 0; }
  .has-js .river-hero .river-filter { transition: opacity .5s ease-out; }
}

/* --- css/components/spots.css --- */
/* =========================================================
   Stilelement: Spot-Farbe  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css und panel.css. Nach teaser.css und menu.css laden,
   damit die Spot-Farbe deren Standard-Kachelfarbe überschreibt.
   Jeder Spot hat eine feste Kennfarbe. Die Klasse setzt --panel-bg
   und --panel-fg, funktioniert also auf allem, was Fläche ist:
   Kachel (teaser), Mega-Menü-Kachel, Hero-Fläche, Footer-Kachel.
   Zuordnung in tokens.css, Doku in spots.html.
   ========================================================= */

.spot--muelheim   { --panel-bg: var(--spot-muelheim);   --panel-fg: var(--spot-muelheim-fg); }
.spot--baldeney   { --panel-bg: var(--spot-baldeney);   --panel-fg: var(--spot-baldeney-fg); }
.spot--kemnade    { --panel-bg: var(--spot-kemnade);    --panel-fg: var(--spot-kemnade-fg); }
.spot--harkort    { --panel-bg: var(--spot-harkort);    --panel-fg: var(--spot-harkort-fg); }
.spot--hengstey   { --panel-bg: var(--spot-hengstey);   --panel-fg: var(--spot-hengstey-fg); }
.spot--arnsberg   { --panel-bg: var(--spot-arnsberg);   --panel-fg: var(--spot-arnsberg-fg); }
.spot--hennesee   { --panel-bg: var(--spot-hennesee);   --panel-fg: var(--spot-hennesee-fg); }
.spot--ruhrquelle { --panel-bg: var(--spot-ruhrquelle); --panel-fg: var(--spot-ruhrquelle-fg); }
.spot--none       { --panel-bg: var(--lavender-light);   --panel-fg: var(--neutral-text); }  /* Eintrag ohne Spot: neutral */

/* Elemente, die --panel-bg nicht selbst lesen (Chips, Punkte): Farbe direkt */
[class*="spot--"] { background: var(--panel-bg); color: var(--panel-fg); }

/* --- css/components/pattern.css --- */
/* =========================================================
   Stilelement: Muster  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css
   Wiederholende, abstrakte Muster als CSS-Maske. Die Farbe kommt aus
   --pattern-color (Standard: --panel-fg), die Deckkraft aus
   --pattern-opacity. Alle Muster liegen auf dem 40er-Raster
   (Zelle 20 oder 40), Strich 2 px, Perle Ø 8.
   Die Klassen cat--… setzen zusätzlich --cat-bg und --cat-fg
   (Kategorie-Farbe aus tokens.css) für Chips, Punkte und Menü-Band.
   Erzeugt aus tools/gen_patterns.py, nicht von Hand ändern.
   ========================================================= */

.pattern {
  --pattern-color:   var(--panel-fg, var(--neutral-text));
  --pattern-opacity: .3;
  --pattern-size:    20px 20px;
  position: relative;
}
.pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pattern-color);
  opacity: var(--pattern-opacity);
  -webkit-mask-image: var(--pattern-image);
          mask-image: var(--pattern-image);
  -webkit-mask-size: var(--pattern-size);
          mask-size: var(--pattern-size);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
.pattern > * { position: relative; z-index: 1; }   /* Inhalt liegt über dem Muster */

/* --- Muster. Die fünf Kategorien haben zusätzlich die Klasse cat--…, entschieden 25.09.2026.
   Die übrigen sind Reserve für weitere Kategorien. --- */
.cat--wassersport, .pattern--wellen { /* Wassersport = Wellen: Sinuslinie, Länge 40, Abstand 20 */
  --cat-bg: var(--cat-wassersport);
  --cat-fg: var(--cat-wassersport-fg);
  --pattern-size: 40px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 10 Q10 0 20 10 T40 10' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cat--kultur, .pattern--funken { /* Kultur = Funken: Sternchen aus vier Strichen */
  --cat-bg: var(--cat-kultur);
  --cat-fg: var(--cat-kultur-fg);
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 4 V16 M4 10 H16 M6 6 L14 14 M14 6 L6 14' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.cat--essen, .pattern--perlen-versetzt { /* Essen & Trinken = Perlen versetzt: Punktraster auf Lücke */
  --cat-bg: var(--cat-essen);
  --cat-fg: var(--cat-essen-fg);
  --pattern-size: 40px 40px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/svg%3E");
}
.cat--sport, .pattern--striche { /* Sport & Spiel = Striche: kurze Striche 45°, wie Regen */
  --cat-bg: var(--cat-sport);
  --cat-fg: var(--cat-sport-fg);
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 14 L14 6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.cat--natur, .pattern--blatt-kontur { /* Natur = Blatt, Kontur: offenes Blatt mit Mittelrippe */
  --cat-bg: var(--cat-natur);
  --cat-fg: var(--cat-natur-fg);
  --pattern-size: 40px 40px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 -3 C18 3 18 17 10 23 C2 17 2 3 10 -3 Z M10 0 V20' transform='rotate(45 10 10)' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 17 C38 23 38 37 30 43 C22 37 22 23 30 17 Z M30 20 V40' transform='rotate(45 30 30)' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pattern--perlen { /* Perlen: Punktraster, Ø 8, Abstand 20 */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3C/svg%3E");
}
.pattern--ringe { /* Ringe: offene Perlen, Ø 12 */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.pattern--schuppen { /* Schuppen: Bögen auf Lücke, wie Fischschuppen oder Buhnen */
  --pattern-size: 40px 40px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 A20 20 0 0 1 40 20 M-20 40 A20 20 0 0 1 20 40 M20 40 A20 20 0 0 1 60 40 M-20 0 A20 20 0 0 1 20 0 M20 0 A20 20 0 0 1 60 0' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.pattern--quadrate { /* Quadrate: gefüllt, 8 × 8, Abstand 20 */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='8' height='8'/%3E%3C/svg%3E");
}
.pattern--quadrate-kontur { /* Quadrate, Kontur: offen, 12 × 12, Abstand 20 */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='4' y='4' width='12' height='12' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.pattern--rauten { /* Rauten: gefüllt, auf der Spitze */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 L17 10 L10 17 L3 10 Z'/%3E%3C/svg%3E");
}
.pattern--dreiecke { /* Dreiecke: gefüllt, Spitze oben */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3 16 L10 4 L17 16 Z'/%3E%3C/svg%3E");
}
.pattern--zickzack { /* Zickzack: Linie, Höhe 10, Abstand 20 */
  --pattern-size: 40px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 15 L10 5 L20 15 L30 5 L40 15' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.pattern--plus { /* Kreuze: Plus, 10 × 10, Abstand 20 */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 5 V15 M5 10 H15' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.pattern--tropfen { /* Tropfen: gefüllt, Abstand 20 */
  --pattern-size: 20px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 C10 3 15 9 15 12.5 A5 5 0 0 1 5 12.5 C5 9 10 3 10 3 Z'/%3E%3C/svg%3E");
}
.pattern--ziegel { /* Ziegel: Mauerwerk, Stein 20 × 10 */
  --pattern-size: 40px 20px;
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 5 H40 M0 15 H40 M20 5 V15 M0 15 V25 M0 -5 V5 M40 15 V25 M40 -5 V5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* --- css/components/infobox.css --- */
/* =========================================================
   Komponente: Info-Boxen  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css
   Farbflächen mit Inhalt: Text, Liste, Links, Kontakt, Bild oder Karte
   (vollständig oder 50/50 mit Text), großer Text. Im 3er-Raster frei kombinierbar (1 bis 3 Spalten, 1 bis 2
   Zeilen). Boxen sind Farbflächen mit Skew und meist nicht klickbar.
   Die Variante „groß" ist als Ganzes ein Link, dann Karte ohne Skew.
   ========================================================= */

.infobox-grid {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  max-width: var(--content-width);
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1) auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(200px, auto);
  grid-auto-flow: dense;
  gap: var(--space-1-2);
}

.infobox {
  box-sizing: border-box;                /* Farbe kommt von panel--*, Standard ochre/light aus panel.css */
  padding: var(--space-1-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-2);
  min-height: 200px;
  background: var(--panel-bg);
  color: var(--panel-fg);
}
.infobox__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin: 0;
}
.infobox__text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  margin: 0;
}
.infobox__text + .infobox__text { margin-top: calc(-1 * var(--space-1-4)); }
.infobox__foot { margin-top: auto; }

/* --- Definitionsliste (Parkplätze, Öffnungszeiten) --- */
.infobox__dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-1-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.infobox__dl dt { font-weight: var(--font-weight-bold); }
.infobox__dl dd { margin: 0; }

/* --- Linkliste (extern) --- */
.infobox__links { list-style: none; margin: 0; padding: 0; }
.infobox__links li + li { border-top: 1px solid rgba(28, 26, 23, .2); }
.infobox__links a {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-2);
  padding: var(--space-1-4) 0;
  min-height: 40px;
  box-sizing: border-box;
  font-size: var(--text-small);
  line-height: 20px;
  font-weight: var(--font-weight-bold);
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}
.infobox__links a span:first-child { flex: 1; }
.infobox__links a::after { content: "↗"; font-weight: var(--font-weight-light); }
.infobox__links a[href^="mailto"]::after, .infobox__links a[href^="tel"]::after, .infobox__links a.is-internal::after { content: "→"; }
.infobox__links a:hover span:first-child { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.infobox__links a:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 2px; }
.infobox__links small { display: block; font-weight: var(--font-weight-regular); font-size: var(--text-label); line-height: var(--leading-label); opacity: .8; }

/* Einzelner Link als Fläche („www.surfschule-westufer.de") */
.infobox--link { justify-content: center; }
.infobox--link .infobox__links li { border: 0; }
.infobox--link .infobox__links a { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--font-weight-black); min-height: 0; padding: 0; }

/* --- Bild oder Karte, vollständig --- */
.infobox--image { padding: 0; gap: 0; clip-path: none; }        /* Bild: gerade Kanten */
.infobox__image { flex: 1; min-height: 200px; position: relative; }
.infobox__image img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.infobox__caption {
  padding: var(--space-1-4) var(--space-1-2);
  font-size: var(--text-label);
  line-height: var(--leading-label);
}
.infobox__caption a { font-weight: var(--font-weight-bold); }

/* --- Bild oder Karte 50/50 mit Text --- */
.infobox--split { padding: 0; gap: 0; }
.infobox--split .infobox__image { flex: 1 1 50%; min-height: 200px; }
.infobox--split .infobox__body {
  flex: 1 1 50%;
  padding: var(--space-1-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-2);
}
.infobox--split.infobox--image-right .infobox__image { order: 2; }

/* --- Großer Text, ganze Box ist Link (Karte: kein Skew) --- */
.infobox--big {
  clip-path: none;
  text-decoration: none;
  justify-content: flex-end;
}
.infobox--big:not([class*="panel--"]) { --panel-bg: var(--lavender-dark); --panel-fg: var(--neutral-bg); }
.infobox--big .infobox__title { font-size: var(--text-h1); line-height: var(--leading-h1); }
.infobox--big .infobox__claim {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: 200;
  font-style: italic;
  margin: 0;
}
.infobox--big .infobox__arrow {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-light);
  margin-top: var(--space-1-4);
  transition: transform .15s ease;
}
.infobox--big:hover .infobox__arrow, .infobox--big:focus-visible .infobox__arrow { transform: translateX(10px); }
.infobox--big:hover .infobox__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.infobox--big:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 4px; }

/* --- Spannen --- */
@media (min-width: 768px) {
  .infobox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-1) auto; padding: 0 40px; }
  .infobox { padding: var(--space-1); }
  .infobox--image, .infobox--split { padding: 0; }
  .infobox--split .infobox__body { padding: var(--space-1); }
  .infobox--split.infobox--w2, .infobox--split.infobox--w3 { flex-direction: row; }   /* breit: nebeneinander */
  .infobox--w2, .infobox--w3 { grid-column: span 2; }
  .infobox--h2 { grid-row: span 2; }
}
@media (min-width: 1024px) {
  .infobox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); margin: var(--space-2) auto; }
  .infobox { min-height: 240px; }
  .infobox--w2 { grid-column: span 2; }
  .infobox--w3 { grid-column: span 3; }
  .infobox--big .infobox__claim { font-size: var(--text-lead); }
}
@media (min-width: 1360px) { .infobox-grid { padding-left: 0; padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .infobox--big .infobox__arrow { transition: none; } }

/* --- Eingebettete Karte mit Zustimmung --- */
.infobox--map { padding: 0; gap: 0; clip-path: none; }
.infobox--map .infobox__consent {
  flex: 1;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1-2);
  padding: var(--space-1-2);
  background: var(--panel-bg);
}
.infobox--map .infobox__consent p { margin: 0; font-size: var(--text-label); line-height: var(--leading-label); }
.infobox--map .infobox__frame { flex: 1; min-height: 240px; }
.infobox--map .infobox__frame iframe { display: block; width: 100%; height: 100%; min-height: 240px; border: 0; }
.infobox--map[data-loaded="true"] .infobox__consent { display: none; }
.infobox--map:not([data-loaded="true"]) .infobox__frame { display: none; }
@media (min-width: 768px) { .infobox--map .infobox__consent { padding: var(--space-1); } }

/* --- css/components/form.css --- */
/* =========================================================
   Komponente: Formular  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css, button.css
   Wenige Felder, sichtbare Labels, klare Fehler, Danke-Nachricht.
   Fehler in coral/dark auf coral/light, Erfolg in mint/dark auf
   mint/light. Nie Farbe allein: immer Text und Zeichen dazu.
   ========================================================= */

.form {
  font-family: var(--font-serif);
  color: var(--neutral-text);
  max-width: 840px;                      /* 4 Spalten wie Text */
  /* Abstand oben/unten als Margin, nicht Padding: kollabiert mit Nachbarn und Seitenraster */
  margin: var(--space-1) auto;
  padding: 0 20px;
  display: grid;
  gap: var(--space-1);
}
.form__intro { font-size: var(--text-body); line-height: var(--leading-body); margin: 0; }
.form__hint  { font-size: var(--text-label); line-height: var(--leading-label); color: var(--neutral-text-muted); margin: 0; }

.form [hidden] { display: none !important; }

/* --- Feld --- */
.field { display: grid; gap: var(--space-1-4); }
.field__label {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-bold);
}
.field__label .optional { font-weight: var(--font-weight-regular); color: var(--neutral-text-muted); }
.field__help {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--neutral-text-muted);
  margin: 0;
}
.field__input, .field__select, .field__textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  font: inherit;
  font-size: var(--text-small);
  line-height: 20px;
  color: var(--neutral-text);
  background: #fff;
  border: 3px solid var(--neutral-text);
  border-radius: 0;
  appearance: none;
}
.field__textarea { min-height: 200px; resize: vertical; line-height: var(--leading-small); }
.field__select {
  padding-right: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><path d='M2 2l8 8 8-8' fill='none' stroke='%231c1a17' stroke-width='3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.field__input:focus-visible, .field__select:focus-visible, .field__textarea:focus-visible {
  outline: 3px solid var(--lavender-dark);
  outline-offset: 3px;
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--neutral-text-muted); opacity: 1; }
.field__input[disabled], .field__select[disabled], .field__textarea[disabled] { opacity: .4; }
.field--short .field__input { max-width: 400px; }

/* --- Fehler am Feld --- */
.field.is-invalid .field__input, .field.is-invalid .field__select, .field.is-invalid .field__textarea {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}
.field__error {
  display: none;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
  margin: 0;
}
.field.is-invalid .field__error { display: block; }
.field__error::before { content: "! "; }

/* --- Gruppen: Radio, Checkbox --- */
.field__group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-1-4); }
.field__group legend { padding: 0; margin-bottom: var(--space-1-4); }
.choice {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-1-2);
  align-items: start;
  min-height: 40px;
  padding: 8px 0;
  font-size: var(--text-small);
  line-height: 24px;
  cursor: pointer;
}
.choice input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 3px solid var(--neutral-text);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--neutral-text);
  transform: scale(0);
  transition: transform .1s ease;
}
.choice input[type="radio"]::before { border-radius: 50%; }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 3px; }
.field.is-invalid .choice input { border-color: var(--color-error); }

/* --- Fehlerübersicht oben --- */
.form__summary {
  --panel-bg: var(--color-error-bg);
  --panel-fg: var(--neutral-text);
  padding: var(--space-1-2);
  border-left: 6px solid var(--color-error);
  background: var(--panel-bg);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.form__summary h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-1-4);
  color: var(--color-error);
}
.form__summary ul { margin: 0; padding-left: 1.2em; }
.form__summary a { color: inherit; font-weight: var(--font-weight-bold); }
.form__summary:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 3px; }
.form__summary[hidden] { display: none; }

/* --- Danke-Nachricht --- */
.form__success {
  --panel-bg: var(--color-success-bg);
  --panel-fg: var(--neutral-text);
  padding: var(--space-1);
  background: var(--panel-bg);
  display: grid;
  gap: var(--space-1-2);
}
.form__success h2 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--font-weight-black);
  margin: 0;
  color: var(--color-success);
}
.form__success p { font-size: var(--text-body); line-height: var(--leading-body); margin: 0; }
.form__success:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 3px; }
.form__success[hidden] { display: none; }

/* --- Aktionen --- */
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-1-2); align-items: center; }
.form__required-note { font-size: var(--text-label); line-height: var(--leading-label); color: var(--neutral-text-muted); }

/* Honeypot: für Menschen unsichtbar, für Bots ein Feld */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 768px) { .form { padding: 0 40px; } }
@media (min-width: 1024px) { .form { margin: var(--space-2) auto; } }
@media (min-width: 1360px) { .form { padding-left: 0; padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .choice input::before { transition: none; } }

/* --- css/components/modal.css --- */
/* =========================================================
   Komponente: Störer  (perlen.an.der.ruhr)
   Abhängig von ../tokens.css, panel.css, button.css (und form.css, wenn ein
   Formular drin steht). Verhalten in modal.js.
   Ein natives <dialog>, das sich manchmal über die Seite legt, etwa für
   den Newsletter. Fläche mit Skew, Schließen-Kreuz rechts oben, Inhalt
   frei. Öffnet per Button, oder von selbst nach einer Wartezeit; wer es
   schließt, sieht es eine Weile nicht wieder (localStorage).
   Barrierefrei über das native Dialog: Fokus bleibt drin, Esc schließt,
   Fokus kehrt zurück, Hintergrund ist für Hilfstechnik inert.
   ========================================================= */

.modal {
  --modal-max: 620px;                    /* 3 Spalten */
  border: 0;
  padding: 0;
  margin: auto;
  max-width: min(var(--modal-max), calc(100vw - 40px));
  width: 100%;
  background: transparent;
  color: var(--neutral-text);
  font-family: var(--font-serif);
  overflow: visible;
}
.modal::backdrop { background: rgba(28, 26, 23, .5); }
.modal__panel {
  --panel-bg: var(--mint-light);
  --panel-fg: var(--neutral-text);
  position: relative;
  padding: var(--space-1) var(--space-1-2) var(--space-1-2);
  display: grid;
  gap: var(--space-1-2);
}
.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font: var(--font-weight-light) 35px/40px var(--font-serif);
  cursor: pointer;
}
.modal__close:hover { background: var(--neutral-text); color: var(--neutral-bg); }
.modal__close:focus-visible { outline: 3px solid var(--neutral-text); outline-offset: -3px; }
.modal__kicker { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--font-weight-bold); letter-spacing: .02em; margin: 0; padding-right: 40px; }
.modal__title { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--font-weight-black); margin: 0; padding-right: 40px; }
.modal__text { font-size: var(--text-small); line-height: 30px; margin: 0; }
.modal .form { margin: 0; padding: 0; max-width: none; gap: var(--space-1-2); }
.modal .form .field--short .field__input { max-width: none; }
.modal .field__label { font-size: var(--text-small); line-height: 30px; }

/* Einblenden */
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in .25s ease-out; }
  .modal[open]::backdrop { animation: modal-backdrop-in .25s ease-out; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(20px); } }
  @keyframes modal-backdrop-in { from { opacity: 0; } }
}

@media (min-width: 768px) {
  .modal__panel { padding: var(--space-1); }
  .modal__close { width: 60px; height: 60px; font-size: 40px; line-height: 60px; }
  .modal__kicker, .modal__title { padding-right: 60px; }
}

/* --- css/site.css --- */
/* =========================================================
   Ergänzungen für die Site  (perlen.an.der.ruhr)
   Was das Design-System als Inline-Stil in den Beispielseiten zeigt,
   hier als Klassen; plus Elemente, die es dort noch nicht gibt.
   ========================================================= */

/* Spot-Themen statt Farbe je Spot (Lookup::SPOT_THEMES): alle Seen blau,
   Natur grün, Städte ziegelrot, Industriekultur sandgelb. Die Variablen
   --spot-<thema> lesen auch River-Hero und Km-Hero (spotKey). */
:root {
  --spot-see:       var(--lavender-dark);  --spot-see-fg:       var(--neutral-bg);
  --spot-natur:     var(--mint-dark);      --spot-natur-fg:     var(--neutral-bg);
  --spot-stadt:     var(--coral-dark);     --spot-stadt-fg:     var(--neutral-bg);
  --spot-industrie: var(--ochre-default);  --spot-industrie-fg: var(--neutral-text);
}
.spot--see       { --panel-bg: var(--spot-see);       --panel-fg: var(--spot-see-fg); }
.spot--natur     { --panel-bg: var(--spot-natur);     --panel-fg: var(--spot-natur-fg); }
.spot--stadt     { --panel-bg: var(--spot-stadt);     --panel-fg: var(--spot-stadt-fg); }
.spot--industrie { --panel-bg: var(--spot-industrie); --panel-fg: var(--spot-industrie-fg); }

/* Footer-Kacheln der fünf Hauptkategorien, Farben wie in den Beispielseiten */
.footer-tiles > li:nth-child(1) .footer-tile { --panel-bg: var(--lavender-dark);    --panel-fg: var(--neutral-bg); }
.footer-tiles > li:nth-child(2) .footer-tile { --panel-bg: var(--mint-default);     --panel-fg: var(--neutral-text); }
.footer-tiles > li:nth-child(3) .footer-tile { --panel-bg: var(--coral-default);    --panel-fg: var(--neutral-text); }
.footer-tiles > li:nth-child(4) .footer-tile { --panel-bg: var(--lavender-default); --panel-fg: var(--neutral-text); }
.footer-tiles > li:nth-child(5) .footer-tile { --panel-bg: var(--ochre-default);    --panel-fg: var(--neutral-text); }

.site-footer__ruhr img { display: block; width: 100%; height: auto; }

/* Merkmale als Liste in einer Info-Box */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { position: relative; padding-left: 20px; }
.feature-list li + li { margin-top: var(--space-1-4); }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--leading-small) - 10px) / 2);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

/* Kennzeichen „Verifiziert" / „Premium" unter dem Hero (Paketkonzept) */
.badges { max-width: var(--content-width); margin-left: auto; margin-right: auto; padding: 0 20px; display: flex; gap: var(--space-1-4); flex-wrap: wrap; }
.badge {
  display: inline-block;
  padding: 0 var(--space-1-4);
  font-size: var(--text-label);
  line-height: 30px;
  font-weight: var(--font-weight-bold);
  background: var(--mint-light);
  color: var(--mint-dark);
}
.badge--premium { background: var(--lavender-light); color: var(--lavender-dark); }
.badge--ad { background: var(--neutral-bg-warm); color: var(--neutral-text-muted); }

/* „Aktuell"-Meldungen und Artikelkopf */
.article-meta {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--neutral-text-muted);
}

/* Buttons unter dem Text (Website, Reservieren) */
.actions { max-width: 840px; margin-left: auto; margin-right: auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: var(--space-1-2); }

/* Formular-Überschrift (im Design-System als Inline-Stil) */
.form__title { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--font-weight-black); margin: 0; }

/* Sprungziele im Text (/ueber-uns.html#flusskilometer) nicht unter dem Sticky-Header */
.text [id] { scroll-margin-top: calc(60px + var(--space-1-2)); }

/* Bildnachweis unter dem Inhalt (partials/image/credits.html) */
.credits {
  max-width: 840px;
  margin: var(--space-1) auto 0;
  padding: 0 20px;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--neutral-text-muted);
}
.credits__title { font-weight: var(--font-weight-bold); margin: 0 0 var(--space-1-4); }
.credits__list { list-style: none; margin: 0; padding: 0; }
.credits__list li { margin: 0 0 var(--space-1-4); }
.credits a { color: inherit; }
@media (min-width: 768px) { .credits { padding: 0 40px; } }
@media (min-width: 1360px) { .credits { padding: 0; } }

/* Häufige Fragen */
.faq dt { font-weight: var(--font-weight-bold); }
.faq dd { margin: 0 0 var(--space-1-2); }

@media (min-width: 768px) {
  .badges, .actions, .article-meta { padding: 0 40px; }
}
@media (min-width: 880px) {
  .badges { padding: 0; }
}

/* Sechs Hauptkategorien (mit „Reisen“): Mega-Menü und Footer-Kacheln auf dem
   Desktop sechsspaltig, auf dem Tablet zwei Reihen à drei */
@media (min-width: 1024px) {
  .mega-menu__list:has(> li:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .footer-tiles:has(> li:nth-child(6)) { --footer-tiles: 6; column-gap: var(--space-1-2); }
  .footer-tiles:has(> li:nth-child(6)) .footer-tile__title { font-size: var(--text-small); }
}