/* =========================================================================
   gm-Theme — Content-Goldstandard
   Hebt die migrierten Startseiten-Contentbereiche auf ein edles Niveau:
   konsistenter Sektions-Rhythmus + aufgewertete Einzel-Komponenten
   (Stellen, Video, Textbloecke). Greift auf den migrierten FlatCore-Markup.
   ========================================================================= */

/* ---- Stellen-Sektion: "Wir suchen Verstaerkung" ---- */
/* btn-group (verbundene dunkle Balken) -> getrennte, edle Karten */
.btn-group.w-100 {
  display: flex !important; flex-wrap: wrap; gap: 1rem;
  border-radius: 0; box-shadow: none; max-width: 820px; margin: 0 auto;
}
.btn-group.w-100 > .btn {
  flex: 1 1 300px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: left; padding: 1.15rem 1.45rem;
  border-radius: var(--gm-radius) !important;
  background: #fff !important; color: var(--gm-primary) !important;
  border: 1px solid var(--gm-border) !important;
  box-shadow: 0 1px 3px rgba(20,30,45,.08);
  font-weight: 600; font-size: 1rem; letter-spacing: 0;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.btn-group.w-100 > .btn::after {
  content: "\203A"; color: var(--gm-sea); font-size: 1.4rem; line-height: 1; flex: 0 0 auto;
  transition: transform .2s ease;
}
.btn-group.w-100 > .btn:hover {
  box-shadow: 0 4px 14px rgba(20,30,45,.12);
  border-color: var(--gm-sea) !important; background: #fff !important; color: var(--gm-primary) !important;
}
.btn-group.w-100 > .btn:hover::after { transform: translateX(4px); }

/* Ueberschrift "Wir suchen Verstaerkung" (p davor) edler */
.btn-group.w-100 + p, /* falls Folgetext */
p.text-center.font-weight-bold.mb-2 {
  font-family: var(--gm-font-head); font-size: 1.5rem; font-weight: 800 !important;
  color: var(--gm-primary); margin-bottom: 1.25rem !important;
}

/* ---- Stellen-Sektion Goldstandard (Snippet "stellen") ---- */
.gm-jobs { background: #fff; padding: 56px 0; text-align: center; }
@media (max-width: 767px){ .gm-jobs { padding: 40px 0; } }
.gm-jobs-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gm-sea); margin: 0 0 .35rem; }
.gm-jobs-title { font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary); margin: 0 0 1.75rem; }
.gm-jobs-list { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; max-width: 760px; margin: 0 auto; }
.gm-job {
  flex: 1 1 300px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: left; padding: 1.15rem 1.4rem; background: #fff; color: var(--gm-primary);
  border: 1px solid var(--gm-border); border-radius: 8px; text-decoration: none;
  box-shadow: 0 1px 3px rgba(20,30,45,.08); transition: box-shadow .2s ease, border-color .2s ease;
}
.gm-job:hover, .gm-job:focus-visible { box-shadow: 0 4px 14px rgba(20,30,45,.12); border-color: var(--gm-sea); }
.gm-job-role { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.gm-job-type { font-weight: 400; color: var(--gm-text); }
.gm-job i { color: var(--gm-sea); flex: 0 0 auto; transition: transform .2s ease; }
.gm-job:hover i { transform: translateX(4px); }

/* =========================================================================
   Hero -> 4-Kachel-System: EINE saubere Card pro Kachel (.gm-tile)
   Klickbare Card (Bild -> Body -> CTA), gleiche Hoehen via flex,
   ein Schatten/Radius, Bild-Zoom + Lift beim Hover.
   ========================================================================= */
/* Slider-Indikatoren sauber am unteren Hero-Rand */
.main-slider .carousel-indicators { bottom: 28px; }

/* Kachel-Leiste: klarer Schnitt direkt unter dem Hero (Purismus, kein Ueberlappen) */
.gm-tiles { position: relative; background: #fff; padding: 72px 0 16px; }
@media (max-width: 991px){ .gm-tiles { padding: 48px 0 8px; } }

/* Eine Card pro Kachel — flach, ruhig, kein Hover-Schnickschnack */
.gm-tile {
  display: flex; flex-direction: column; height: 100%;
  background: var(--gm-primary); color: #fff; text-decoration: none;
  border-radius: 8px; overflow: hidden;
}
.gm-tile:focus-visible { outline: 3px solid var(--gm-sea); outline-offset: 3px; }
.gm-tile-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.gm-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.gm-tile-body { display: flex; flex-direction: column; flex: 1 1 auto; align-items: center; text-align: center; padding: 1.85rem 1.5rem 1.65rem; }
.gm-tile-ico { font-size: 1.85rem; line-height: 1; color: var(--gm-teal); margin-bottom: .7rem; }
.gm-tile-title { font-family: var(--gm-font-head); font-weight: 800; font-size: 1.5rem; line-height: 1.15; margin: 0 0 1rem; padding-bottom: .85rem; position: relative; }
.gm-tile-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 3px; background: var(--gm-teal); }
.gm-tile-text { flex: 1 1 auto; margin: 0; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.88); }
.gm-tile-cta { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gm-teal); }
.gm-tile-cta i { transition: transform .2s ease; }
.gm-tile:hover .gm-tile-cta i { transform: translateX(4px); }

/* ---- Konsistenter Sektions-Rhythmus ---- */
/* Haupt-Content-Wrapper: grosszuegiger, gleichmaessiger vertikaler Abstand */
section.no-padding > .container { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 767px){ section.no-padding > .container { padding-top: 44px; padding-bottom: 44px; } }
/* <br>-Spacer-Hacks im Flaechen-Content neutralisieren (erzeugten Leerraum-Chaos) */
section.no-padding > .container > br { display: none; }
/* Themen-Bloecke (rows) bekommen gleichmaessigen Abstand */
section.no-padding > .container > .row { margin-top: 2.5rem; margin-bottom: 2.5rem; }
section.no-padding > .container > .row:first-child { margin-top: 0; }

/* ---- Video-Sektion: edle Cards statt BS-Rahmen ---- */
.video-container .card, .row.video-container .card {
  border: 0 !important; border-radius: var(--gm-radius); overflow: hidden;
  background: #fff; box-shadow: 0 1px 3px rgba(20,30,45,.08);
  transition: box-shadow .2s ease;
}
.video-container .card:hover { box-shadow: 0 4px 14px rgba(20,30,45,.12); }
.video-container .card .card-title, .video-container .card h4, .video-container .card h5 {
  font-family: var(--gm-font-head); color: var(--gm-primary);
}
/* grosses Hauptvideo: abgerundet + Schatten, sauberes Play-Overlay */
.thumbnail-wrapper { position: relative; border-radius: var(--gm-radius); overflow: hidden; box-shadow: 0 1px 4px rgba(20,30,45,.10); }
.thumbnail-wrapper img { display: block; width: 100%; height: auto; }
.thumbnail-wrapper .play-button {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(50,62,82,.82); color: #fff; border-radius: 50%;
  transition: background .2s ease, transform .2s ease;
}
.thumbnail-wrapper:hover .play-button { background: var(--gm-primary); transform: scale(1.06); }

/* =========================================================================
   Veranstaltungstipps-Teaser (Snippet "veranstaltungstipps")
   Naechste vier Events in einer Row; gm-Goldstandard: ruhig, dezent, #323E52.
   ========================================================================= */
.gm-events { background: #fff; padding: 64px 0; }
@media (max-width: 767px){ .gm-events { padding: 44px 0; } }
.gm-events-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.gm-events-title { font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary); margin: 0; }
.gm-events-all { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary); white-space: nowrap; }
.gm-events-all i { transition: transform .2s ease; }
.gm-events-all:hover i { transform: translateX(4px); }
.gm-events-empty { text-align: center; color: var(--gm-text); margin: 0; }

/* Eine Event-Karte — flach, dezenter Rahmen + Schatten (Purismus, kein Lift) */
.gm-event-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; color: var(--gm-text); text-decoration: none;
  border: 1px solid var(--gm-border); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,30,45,.08); transition: box-shadow .2s ease;
}
.gm-event-card:hover, .gm-event-card:focus-visible { box-shadow: 0 4px 14px rgba(20,30,45,.12); }
.gm-event-card:focus-visible { outline: 3px solid var(--gm-sea); outline-offset: 2px; }
.gm-event-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gm-white); }
.gm-event-media img { width: 100%; height: 100%; object-fit: cover; }
.gm-event-credit {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px; font-size: .72rem; line-height: 1.3; color: #fff;
  background: linear-gradient(to top, rgba(20,30,45,.78), rgba(20,30,45,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help;
}
.gm-event-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem; }
.gm-event-date { color: var(--gm-primary); font-size: .85rem; font-weight: 700; margin-bottom: .45rem; }
.gm-event-title { font-family: var(--gm-font-head); color: var(--gm-primary); font-weight: 800; font-size: 1.15rem; line-height: 1.25; flex: 1 1 auto;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gm-event-cta { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary); }
.gm-event-cta i { transition: transform .2s ease; }
.gm-event-card:hover .gm-event-cta i { transform: translateX(4px); }
.row-eq-height { display: flex; flex-wrap: wrap; }
.row-eq-height > [class*='col-'] { display: flex; flex-direction: column; }

/* ---- Interaktive Karte (MapLibre GL + OpenFreeMap, ersetzt Google Maps) ---- */
.gm-map-wrap { position: relative; }
.gm-map { height: 440px; width: 100%; border-radius: 8px; border: 1px solid var(--gm-border); overflow: hidden; z-index: 0; background: var(--gm-cream); }
@media (max-width: 767px){ .gm-map { height: 340px; } }
/* DSGVO-Gate: Overlay bis zur Einwilligung (Karte/Tiles laden erst bei Klick) */
.gm-map-consent {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: var(--gm-cream); border: 1px solid var(--gm-border); border-radius: 8px; padding: 1.5rem; text-align: center;
}
.gm-map-consent-box { max-width: 440px; }
.gm-map-consent-box i { display: block; font-size: 2.2rem; color: var(--gm-sea); margin-bottom: .7rem; }
.gm-map-consent-box p { font-size: .86rem; color: var(--gm-text); line-height: 1.55; margin: 0 0 1.1rem; }
.gm-map-attribution { font-size: .72rem; color: var(--gm-text); margin: .5rem 0 0; }
.leaflet-container { font-family: var(--gm-font-body); background: var(--gm-cream); }
.leaflet-popup-content { font-family: var(--gm-font-body); color: var(--gm-primary); }

/* ============================================================
   Super-Service-Panel — zentrales Vollbild-Overlay (aus Menü).
   Ersetzt die fruehere "Hilfreiche/Externe Links"-Sidebar.
   ============================================================ */
.gm-service { position: fixed; inset: 0; z-index: 3000; display: flex;
  align-items: flex-start; justify-content: center; padding: clamp(.75rem, 3vw, 2.5rem);
  opacity: 0; transition: opacity .28s ease; }
.gm-service.is-open { opacity: 1; }
.gm-service[hidden] { display: none; }
.gm-service-backdrop { position: absolute; inset: 0; background: rgba(35,46,60,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gm-service-dialog { position: relative; width: min(960px, 100%); max-height: 100%;
  display: flex; flex-direction: column; background: var(--gm-white);
  border-radius: var(--gm-radius, 14px); box-shadow: 0 24px 60px rgba(35,46,60,.45);
  overflow: hidden; transform: translateY(14px) scale(.985);
  transition: transform .28s ease; }
.gm-service.is-open .gm-service-dialog { transform: none; }
.gm-service-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem clamp(1rem, 3vw, 1.75rem); background: var(--gm-primary);
  color: var(--gm-white); }
.gm-service-title { margin: 0; font-family: var(--gm-font-head); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.15; color: var(--gm-white); }
.gm-service-title i { color: var(--gm-teal); margin-right: .4rem; }
/* Hint »alphabetisch sortiert« steht auf dem dunkelblauen Balken -> hell statt --gm-text */
.gm-service-bar .gm-service-hint { color: var(--gm-white); opacity: .72; }
.gm-service-close { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.12); color: var(--gm-white);
  font-size: 1.25rem; cursor: pointer; transition: background .2s ease; }
.gm-service-close:hover { background: rgba(255,255,255,.24); }
.gm-service-body { padding: clamp(1.25rem, 3vw, 2rem); overflow-y: auto; }

.gm-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.gm-service-col { min-width: 0; }
.gm-service-h { margin: 0 0 1rem; font-family: var(--gm-font-head); font-weight: 600;
  font-size: 1.15rem; color: var(--gm-primary); padding-bottom: .55rem;
  border-bottom: 2px solid var(--gm-sand); }
.gm-service-h i { color: var(--gm-sea); margin-right: .45rem; }
.gm-service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.gm-service-list a { display: flex; align-items: center; gap: .85rem; padding: .6rem .7rem;
  border-radius: 10px; color: var(--gm-ink); text-decoration: none; font-weight: 500;
  transition: background .18s ease, transform .18s ease; }
.gm-service-list a:hover, .gm-service-list a:focus-visible { background: var(--gm-cream);
  transform: translateX(3px); }
.gm-service-ic { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem;
  height: 2.4rem; border-radius: 50%; background: var(--gm-teal-light);
  color: var(--gm-primary); font-size: 1.05rem; }
.gm-service-list a:hover .gm-service-ic { background: var(--gm-teal); }
.gm-service-tx { flex: 1 1 auto; }
.gm-service-ext { flex: 0 0 auto; color: var(--gm-sea); font-size: .8rem; opacity: .7; }

@media (max-width: 640px) {
  .gm-service-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-service, .gm-service-dialog, .gm-service-list a { transition: none; }
  .gm-service-dialog { transform: none; }
}

/* ============================================================
   Startseite-Sektionen (Goldstandard): Region, HdG, Hours, Video
   gemeinsames Kopf-Muster (eyebrow + title) wie gm-jobs/gm-tiles
   ============================================================ */
.gm-region, .gm-hdg, .gm-vid { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.gm-sec-eyebrow, .gm-region-eyebrow, .gm-hdg-eyebrow, .gm-vid-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gm-sea); margin: 0 0 .35rem; text-align: center; }
.gm-region-title, .gm-hdg-title, .gm-vid-title {
  font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary);
  text-align: center; text-wrap: balance; margin: 0 0 2.25rem; font-size: var(--gm-fs-h2); }

/* ---- Region (4 Argumente + Signet) ---- */
.gm-region { background: var(--gm-cream); }
.gm-region-card { height: 100%; background: var(--gm-white); border-radius: var(--gm-radius, 14px);
  padding: 1.6rem 1.5rem; box-shadow: 0 6px 22px rgba(35,46,60,.07);
  border-top: 3px solid var(--gm-teal); transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; }
/* Button-Absatz nach unten -> alle Karten-Buttons auf gleicher Hoehe (Karten ohne Button unberuehrt) */
.gm-region-card p:has(.btn) { margin-top: auto; padding-top: 1rem; }
/* .gm-tag-Absatz ebenso an den Kartenboden pinnen -> Etikett springt nicht je nach
   Beschreibungslaenge (unterschiedlich viele Zeilen in Karten derselben Reihe) */
.gm-region-card p:has(.gm-tag) { margin-top: auto; padding-top: .75rem; }
/* direkte Bilder (z.B. Zertifikats-Logos) nicht durch flex-stretch verzerren */
.gm-region-card img { align-self: flex-start; max-width: 100%; }
/* Zertifikats-/Partner-Logos in Karten (z.B. "Reisen fuer Alle") — ersetzt Inline-Styles */
.gm-region-card-logo { max-height: 70px; width: auto; margin-bottom: .8rem; }
.gm-region-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(35,46,60,.13); }
.gm-region-ico { font-size: 1.9rem; color: var(--gm-sea); margin-bottom: .7rem; display: block; }
/* Pressemappe: Nummer (gm-tag) direkt vor dem PDF-Icon, eine Zeile */
.gm-pdf-num-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; }
.gm-pdf-num-row .gm-region-ico { margin-bottom: 0; }
.gm-region-h { font-family: var(--gm-font-head); font-weight: 700; font-size: 1.18rem;
  color: var(--gm-primary); margin: 0 0 .55rem; }
.gm-region-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--gm-text); }
.gm-region-signet { text-align: center; margin: 2.25rem 0 0; }
.gm-region-signet img { transition: transform .25s ease; }
.gm-region-signet a:hover img { transform: scale(1.04); }

/* ---- Haus des Gastes ---- */
/* Spalten NICHT auf gleiche Höhe strecken -> Karte = Inhaltshöhe, Schatten
   sitzt gleichmäßig am Inhalt (nicht unter gestrecktem Leerraum). */
.gm-hdg .row { align-items: flex-start; }
.gm-hdg-card { background: var(--gm-white); border-radius: var(--gm-radius, 14px); overflow: hidden;
  box-shadow: 0 1px 4px rgba(35,46,60,.10), 0 12px 36px rgba(35,46,60,.17); height: auto; }
.gm-hdg-media img { width: 100%; height: 220px; object-fit: cover; object-position: center 62%; display: block; }
/* Schatten der Karte nicht am Bereichsrand abschneiden lassen */
.gm-hdg, .gm-hdg .container, .gm-hdg .row { overflow: visible; }
.gm-hdg-body { padding: 1.4rem 1.5rem 1.6rem; }
.gm-hdg-h { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  font-size: 1.25rem; margin: 0 0 .8rem; }
.gm-hdg-h-mt { margin-top: 2rem; }
.gm-hdg-adr { color: var(--gm-text); margin: 0 0 1rem; }
.gm-hdg-adr i, .gm-hdg-phone label i { color: var(--gm-sea); margin-right: .35rem; }
.gm-hdg-phone label { display: block; font-weight: 600; font-size: .85rem; color: var(--gm-primary); margin-bottom: .3rem; }
.gm-hdg-seals { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; }
.gm-hdg-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.gm-hdg-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--gm-text); line-height: 1.55; }
.gm-hdg-list i { flex: 0 0 auto; margin-top: .3em; color: var(--gm-green, var(--gm-sea)); }
.gm-hdg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .5rem; }
.gm-hdg-text { color: var(--gm-text); line-height: 1.65; }

/* ---- Öffnungszeiten ---- */
.gm-hours { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.gm-hours-card { background: var(--gm-white); border-radius: var(--gm-radius, 14px);
  box-shadow: 0 6px 22px rgba(35,46,60,.08); overflow: hidden; height: 100%; }
.gm-hours-h { background: var(--gm-primary); color: var(--gm-white); margin: 0;
  font-family: var(--gm-font-head); font-weight: 600; font-size: 1.15rem; padding: 1rem 1.4rem; }
.gm-hours-h i { color: var(--gm-teal); margin-right: .5rem; }
.gm-hours-h span { display: block; font-size: .85rem; font-weight: 400; opacity: .85; }
.gm-hours-list { list-style: none; margin: 0; padding: .6rem 1.4rem; }
.gm-hours-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--gm-border); }
.gm-hours-list li:last-child { border-bottom: 0; }
.gm-hours-list span { color: var(--gm-text); }
.gm-hours-list strong { color: var(--gm-primary); }
.gm-hours-foot { margin: 0; padding: .4rem 1.4rem 1.2rem; color: var(--gm-sea); font-weight: 600; }

/* ---- Video-Karten (natives <video>) ---- */
.gm-vid { background: var(--gm-cream); }
.gm-vid-card { margin: 0; }
/* klickbare Poster-Karte mit Play-Overlay -> öffnet Lightbox */
.gm-vid-trigger { display: block; position: relative; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--gm-primary); border-radius: var(--gm-radius, 14px); overflow: hidden;
  box-shadow: 0 6px 18px rgba(35,46,60,.12); }
.gm-vid-trigger img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  transition: transform .35s ease; }
.gm-vid-trigger:hover img, .gm-vid-trigger:focus-visible img { transform: scale(1.05); }
.gm-vid-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* Deckende Markenfarbe (kein Backdrop-Blur) -> Play-Button sieht auf JEDEM
   Hintergrund identisch aus (grün, lila, Foto – egal). */
.gm-vid-play i { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--gm-primary); color: #fff; font-size: 1.4rem; padding-left: .15em;
  box-shadow: 0 4px 14px rgba(20,30,45,.35);
  transition: background .25s ease, transform .25s ease; }
.gm-vid-trigger:hover .gm-vid-play i, .gm-vid-trigger:focus-visible .gm-vid-play i {
  background: var(--gm-primary-hover); transform: scale(1.08); }
.gm-vid-trigger:focus-visible { outline: 3px solid var(--gm-sea); outline-offset: 3px; }
.gm-vid-cap { margin: .8rem 0 0; text-align: center; font-family: var(--gm-font-head);
  font-weight: 600; font-size: 1.1rem; color: var(--gm-primary); }
.gm-vid-credit { text-align: center; margin: 1.75rem 0 0; font-size: .85rem; color: var(--gm-text); }

/* Video-Lightbox (bildschirmfüllend) */
.gm-vlb { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center;
  background: rgba(10,15,22,.93); padding: clamp(.5rem, 3vw, 2.5rem);
  opacity: 0; transition: opacity .28s ease; }
.gm-vlb.is-open { opacity: 1; }
.gm-vlb[hidden] { display: none; }
.gm-vlb-stage { width: min(1100px, 100%); }
.gm-vlb-stage video { width: 100%; max-height: 85vh; display: block; border-radius: 10px;
  background: #000; box-shadow: 0 24px 64px rgba(0,0,0,.6); }
.gm-vlb-close { position: absolute; top: clamp(.75rem, 2vw, 1.25rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font-size: 1.4rem; cursor: pointer; transition: background .2s ease; }
.gm-vlb-close:hover, .gm-vlb-close:focus-visible { background: rgba(255,255,255,.3); }

@media (prefers-reduced-motion: reduce) {
  .gm-vid-trigger img, .gm-vid-play i, .gm-vlb { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-region-card, .gm-region-signet img { transition: none; }
}

/* ============================================================
   Einheitliches Unterseiten-System (Goldstandard)
   - Lightbox-Bild, TOC-Sidebar, Media-Blöcke, Prose-Typografie
   ============================================================ */
/* Bild in der Lightbox */
.gm-vlb-stage img { width: 100%; max-height: 85vh; object-fit: contain; display: block;
  border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,.5); background: #000; }

/* ---- TOC-Sidebar (Untermenü) — stylt toc.tpl-Klassen ohne tpl-Eingriff ---- */
.categories { background: var(--gm-white); border-radius: var(--gm-radius, 14px); overflow: hidden;
  box-shadow: 0 6px 22px rgba(35,46,60,.08); }
@media (min-width: 992px) { .categories { position: sticky; top: 1.5rem; } }
.categories > h3 { background: var(--gm-primary); color: var(--gm-white); margin: 0;
  font-family: var(--gm-font-head); font-weight: 600; letter-spacing: .02em;
  font-size: 1rem; padding: .95rem 1.15rem; }
.toc-category { list-style: none; margin: 0; padding: .35rem 0; box-shadow: none; }
.toc-category li { margin: 0; }
.toc-category a { display: block; padding: .6rem 1.15rem; color: var(--gm-ink); text-decoration: none;
  border-left: 3px solid transparent; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.toc-category a:hover, .toc-category a:focus-visible { background: var(--gm-cream);
  color: var(--gm-primary); border-left-color: var(--gm-teal); }
.toc-category a.active, .toc-category li.current > a, .toc-category .active > a {
  background: var(--gm-cream); color: var(--gm-primary); border-left-color: var(--gm-sea); font-weight: 600; }

/* ---- Prose-Typografie (einheitlicher Fließtext der Unterseiten) ---- */
.gm-subpage { padding: 3rem 0 4.5rem; }
.gm-prose h2 { font-family: var(--gm-font-head); color: var(--gm-primary); font-weight: 700;
  font-size: var(--gm-fs-h3, 1.55rem); margin: 0 0 1rem; }
/* Heading-Order-Fix (2026-07-03): Tag = Semantik, Klasse = Optik. Die
   Optik-Klasse (.h5) muss die Kontextregel .gm-prose h2 (0,1,1) schlagen. */
.gm-prose h2.h5 { font-size: var(--gm-fs-h5, 1.15rem); }
.gm-prose p { line-height: 1.7; color: var(--gm-text); margin: 0 0 1rem; }
.gm-prose p:last-child { margin-bottom: 0; }
.gm-prose a:not(.btn) { color: var(--gm-sea); }
.gm-prose a:not(.btn):hover { color: var(--gm-primary); }

/* ---- Media-Block (Bild + Text, alternierend) ---- */
.gm-media { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin: 0 0 clamp(3.25rem, 6vw, 5.5rem); }
.gm-media:last-child { margin-bottom: 0; }
.gm-media-figure { margin: 0; }
.gm-media:nth-of-type(even) .gm-media-figure { order: 2; }
.gm-media-zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--gm-radius, 14px); overflow: hidden; box-shadow: 0 6px 18px rgba(35,46,60,.12); }
.gm-media-zoom img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s ease; }
.gm-media-zoom:hover img, .gm-media-zoom:focus-visible img { transform: scale(1.05); }
.gm-media-zoom-ico { position: absolute; top: .75rem; right: .75rem; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center; border-radius: 50%; background: rgba(35,46,60,.55); color: #fff;
  opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.gm-media-zoom:hover .gm-media-zoom-ico, .gm-media-zoom:focus-visible .gm-media-zoom-ico { opacity: 1; }
.gm-media-zoom:focus-visible { outline: 3px solid var(--gm-sea); outline-offset: 3px; }
.gm-media-title { font-family: var(--gm-font-head); color: var(--gm-primary); font-weight: 700;
  font-size: var(--gm-fs-h3, 1.55rem); margin: 0 0 1rem; }
.gm-media-body > p { line-height: 1.7; color: var(--gm-text); margin: 0 0 1rem; }
.gm-media-body > p:last-child { margin-bottom: 0; }
.gm-media-sub { font-family: var(--gm-font-head); color: var(--gm-sea); font-weight: 600;
  font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
/* Block ohne Bild (z. B. Kurabgabe-Hinweis) -> volle Breite */
.gm-media.gm-media-textonly { grid-template-columns: 1fr; }
@media (max-width: 767px) {
  .gm-media { grid-template-columns: 1fr; gap: 1.25rem; }
  .gm-media:nth-of-type(even) .gm-media-figure { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .gm-media-zoom img { transition: none; } }

/* Navigation nie unterstreichen — Override der A11y-Fließtext-Regel (gm.css),
   die in section.no-padding alle li>a unterstreicht (trifft TOC + Service-Panel). */
.toc-category a, .gm-service-list a { text-decoration: none !important; }

/* Unterseiten-Hero (wie Live): Signet als Badge mittig auf der Naht zwischen
   Bild-Banner und Claim-Balken. Container height:0 -> kein Fluss-Raum, Bild und
   Claim stossen DIREKT aneinander (kein weisser Spalt); Signet absolut auf der
   Naht zentriert (überlappt beide, unabhängig von der Signet-Höhe). */
.gm-subhero-signet { position: relative; height: 0; text-align: center; z-index: 3; }
.gm-subhero-signet img { position: absolute; left: 50%; top: -34px; transform: translate(-50%, -50%);
  width: 92px; height: auto; }
/* Claim-Balken (dunkelblau, nicht kursiv) */
.gm-claim { background: var(--gm-primary); text-align: center; margin: 0 0 3rem;
  padding: 0.7rem 1rem 1.6rem; }
@media (max-width: 767px) { .gm-claim { padding: 1.5rem 1rem; } }
.gm-claim-title { color: #fff; font-family: var(--gm-font-head); font-style: normal;
  font-weight: 700; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.35rem); line-height: 1.15;
  margin: 0; text-wrap: balance; }

/* TOC-Überschrift als Link zur Bereichsseite (weiß, kein Underline) */
.gm-toc-headlink { color: var(--gm-white) !important; text-decoration: none !important; }
.gm-toc-headlink:hover, .gm-toc-headlink:focus-visible { color: var(--gm-teal) !important; }

/* TOC ein-/ausklappbar — Desktop immer offen, mobil kompakt (nicht dominant) */
.gm-toc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.gm-toc-toggle { display: none; }
@media (max-width: 991.98px) {
  .gm-toc-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; flex: 0 0 auto; border: 0; border-radius: 6px;
    background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
    transition: background .2s ease; }
  .gm-toc-toggle:hover, .gm-toc-toggle:focus-visible { background: rgba(255,255,255,.28); }
  .gm-toc-toggle i { transition: transform .25s ease; }
  #gmToc.is-open .gm-toc-toggle i { transform: rotate(180deg); }
  /* Liste mobil standardmäßig zu -> nur die Überschrift (kompakt) */
  #gmToc .toc-category { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  #gmToc.is-open .toc-category { max-height: 1600px; }
  #gmToc { position: static; }   /* kein sticky auf Mobile */
}
@media (prefers-reduced-motion: reduce) {
  .gm-toc-toggle i, #gmToc .toc-category { transition: none; }
}

/* ============================================================
   USP-Seite (Rhododendronpark u. a.): Aufmacher-Galerie, Statband,
   Lead, Park-Events — Goldstandard mit WOW.
   ============================================================ */
.gm-usp-title { font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem); line-height: 1.08; margin: 2rem 0 .6rem; text-wrap: balance; }
.gm-usp-lead { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); line-height: 1.55; color: var(--gm-sea);
  font-weight: 500; margin: 0 0 1.25rem; }
.gm-usp-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; }

/* Aufmacher-Galerie: 1 großes + 2 kleine Bilder (alle zoombar -> Lightbox) */
.gm-gallery-3 { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: .9rem; margin: 0 0 2rem; }
.gm-gallery-3 > :first-child { grid-row: 1 / 3; }
.gm-gallery-3 .gm-media-zoom { height: 100%; }
.gm-gallery-3 .gm-media-zoom img { height: 100%; aspect-ratio: auto; min-height: 150px; }
@media (max-width: 575px) {
  .gm-gallery-3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gm-gallery-3 > :first-child { grid-row: auto; grid-column: 1 / 3; }
  .gm-gallery-3 .gm-media-zoom img { aspect-ratio: 4/3; height: auto; }
}

/* USP-Statband: die beeindruckenden Zahlen */
.gm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin: 2.25rem 0; }
.gm-stat { text-align: center; padding: 1.5rem 1rem; background: var(--gm-cream);
  border-radius: var(--gm-radius, 14px); border-top: 3px solid var(--gm-teal); }
.gm-stat-num { display: block; font-family: var(--gm-font-head); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.5rem); line-height: 1; color: var(--gm-primary); }
.gm-stat-num small { font-size: .52em; font-weight: 600; color: var(--gm-sea); }
.gm-stat-label { display: block; margin-top: .45rem; font-size: .88rem; line-height: 1.3; color: var(--gm-text); }

/* Park-Veranstaltungen */
.gm-parkevents { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem; margin: 1.25rem 0 1.5rem; }
.gm-parkevent { text-align: center; padding: 1.6rem 1.2rem; background: var(--gm-white);
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius, 14px);
  transition: transform .2s ease, box-shadow .2s ease; }
.gm-parkevent:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35,46,60,.12); }
.gm-parkevent i { color: var(--gm-sea); font-size: 1.5rem; margin-bottom: .6rem; }
.gm-parkevent-name { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  margin: 0 0 .3rem; line-height: 1.25; }
.gm-parkevent-date { margin: 0; color: var(--gm-sea); font-weight: 600; }
.gm-usp-sub { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  text-align: center; font-size: var(--gm-fs-h3, 1.5rem); margin: 5rem 0 1.75rem; }
/* Konterregel analog zu .gm-prose h2.h5 (siehe oben): .gm-prose h2 (0,1,1) schlaegt
   sonst .gm-usp-sub (0,1,0) und kollabiert margin-top auf 0 — Befund 2026-07-04,
   404-Seite: Ueberschrift "Oder direkt dorthin…" klebte an den Buttons darueber. */
.gm-prose h2.gm-usp-sub { margin-top: 5rem; }
@media (prefers-reduced-motion: reduce) { .gm-parkevent { transition: none; } }

/* ---- USP-Bausteine: Feature-Karten (Waldbereiche) + Sinnes-Stationen ---- */
.gm-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin: 2.5rem 0 4.5rem; }
/* nutzt .gm-region-card (Icon + h3 + Text, Border-top teal) */
.gm-features .gm-region-card { margin: 0; }

.gm-sense { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  margin: 1.75rem 0; text-align: center; }
.gm-sense-item i { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto;
  border-radius: 50%; background: var(--gm-teal-light); color: var(--gm-primary); font-size: 1.4rem; }
.gm-sense-item span { display: block; margin-top: .55rem; font-weight: 600; color: var(--gm-primary); font-size: .95rem; }
@media (max-width: 575px) { .gm-sense { grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1rem; } }

/* Komoot-Consent-Platzhalter im Marken-Look */
#komoot-placeholder { background: var(--gm-cream) !important; border: 1px solid var(--gm-border) !important;
  border-radius: var(--gm-radius, 14px) !important; height: auto !important; min-height: 320px; padding: 2rem !important; }
#komoot-placeholder .btn { background: var(--gm-primary); color: #fff; border: 0; }
#komoot-placeholder .btn:hover { background: var(--gm-primary-hover); }

/* ---- Grün-Akzent (Schema) — opt-in pro Seite via .gm-green am gm-subpage.
   Markenfarbe #323E52 bleibt für Titel; nur sea/teal-Akzente werden grün
   (z. B. Kurwald). ---- */
.gm-green .gm-usp-lead { color: var(--gm-green-dark); }
.gm-green .gm-stat { border-top-color: var(--gm-green); }
.gm-green .gm-stat-num small { color: var(--gm-green); }
.gm-green .gm-region-card { border-top-color: var(--gm-green); }
.gm-green .gm-region-ico { color: var(--gm-green); }
.gm-green .gm-sense-item i { background: var(--gm-green-light); color: var(--gm-green-dark); }
.gm-green a:not(.btn) { color: var(--gm-green-dark); }
.gm-green a:not(.btn):hover { color: var(--gm-green); }

/* Video-Einbettung von der Grün-Färbung ausnehmen -> Video überall identisch
   (Credit-Link bleibt neutral, nicht grün auf .gm-green-Seiten). */
.gm-green .gm-vid-credit a { color: var(--gm-sea); }
.gm-green .gm-vid-credit a:hover { color: var(--gm-primary); }

/* strandinfo: Siegel-Reihe, Verhaltensregeln, Foto-Credit */
.gm-media-seals { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.gm-media-seals img { height: 70px; width: auto; }
.gm-rules { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.gm-rules li { display: flex; align-items: flex-start; gap: .6rem; color: var(--gm-text); line-height: 1.5; }
.gm-rules i { flex: 0 0 auto; margin-top: .25em; color: var(--gm-sea); }
.gm-media-credit { font-size: .8rem; color: var(--gm-text); opacity: .8; margin: .5rem 0 0; }

/* Prominente, klickbare Info-Grafik (z. B. Badezonenkennzeichnung) — ganze
   Grafik sichtbar (kein Beschnitt), gross, per Klick in die Lightbox. */
.gm-bigfig { margin: 2.5rem auto; max-width: 480px; }
.gm-bigfig.gm-bigfig-wide { max-width: 900px; }
/* Partner-/Anbieter-Logo (lokal gehostet) – dezent, nicht zoombar */
.gm-prose .gm-partner-logo { max-width: 190px; height: auto; margin: .5rem 0 0; }

/* Einzelnes, container-füllendes Bild (volle Breite, zoombar, natürliches Seitenverhältnis) */
.gm-media-full { margin: 0 0 2.5rem; }
.gm-media-full .gm-media-zoom img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
/* Kleineres, linksbündiges Einzelbild (zoombar) */
.gm-media-left { max-width: 360px; margin: .5rem 0 1.75rem; }
.gm-media-left .gm-media-zoom img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }

/* Anreise: Verkehrsmittel-Karte (Icon + Titel + Text) */
.gm-travel { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; align-items: start;
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius, 14px); padding: 1.5rem 1.75rem;
  margin: 0 0 1.25rem; background: var(--gm-white); }
.gm-travel-ico { font-size: 2.6rem; color: var(--gm-sea); text-align: center; line-height: 1; }
.gm-travel-body h3 { font-family: var(--gm-font-head); color: var(--gm-primary); font-weight: 700;
  font-size: 1.2rem; margin: 0 0 .6rem; }
.gm-travel-body p { line-height: 1.65; color: var(--gm-text); margin: 0 0 .8rem; }
.gm-travel-body p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .gm-travel { grid-template-columns: 1fr; } .gm-travel-ico { text-align: left; } }

/* Dezenter Disclaimer-Hinweis (»Angaben ohne Gewähr« o. Ä.) */
.gm-disclaimer { font-size: .82rem; color: var(--gm-text); opacity: .75; line-height: 1.5;
  margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--gm-border); }
.gm-disclaimer i { margin-right: .35rem; color: var(--gm-sea); }

/* Parken: Adresszeile in der Parkplatz-/Ladesaeulen-Karte */
.gm-park-addr { font-size: .9rem; color: var(--gm-sea); font-weight: 500; margin: 0 0 .6rem; }
.gm-park-addr i { margin-right: .35rem; }

/* Anreise: Navigations-CTA (iOS / Android / OpenStreetMap) */
.gm-nav-cta { background: var(--gm-cream); border-radius: var(--gm-radius, 14px); padding: 1.5rem 1.75rem; margin: 1.5rem 0 2.5rem; }
.gm-nav-cta-lead { font-weight: 600; color: var(--gm-primary); margin: 0 0 .9rem; }
.gm-nav-cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

/* Externe Embeds: Click-to-load Consent-Gate (laedt 3rd-Party erst nach Zustimmung) */
.gm-embed-consent { background: var(--gm-cream); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius, 14px); padding: 2.75rem 1.5rem; margin: 2.5rem 0; }
.gm-embed-consent-inner { max-width: 34rem; margin: 0 auto; display: grid; gap: .8rem; justify-items: center; text-align: center; }
.gm-embed-consent-inner > i { font-size: 2.6rem; color: var(--gm-sea); }
.gm-embed-consent-lead { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary); font-size: 1.2rem; margin: 0; }
.gm-embed-consent-txt { color: var(--gm-text); font-size: .9rem; line-height: 1.6; margin: 0; }
/* Link im Hinweistext: nicht nur per Farbe unterscheidbar (WCAG 1.4.1) */
.gm-embed-consent-txt a { text-decoration: underline; }
.gm-embed-consent-load { margin-top: .4rem; }
/* Button-Rahmen auf Cream sichtbar machen (Default #dee2e6 = 1,16:1 unsichtbar) */
.gm-embed-consent .gm-embed-consent-load { --bs-btn-border-color: var(--gm-primary); --bs-btn-color: var(--gm-primary); }
.gm-embed-holder { margin: 2.5rem 0; }
/* Hoehe so, dass outdooractive-Embed (Tour-Card + Karte, flexView) komplett sichtbar ist –
   das Embed meldet keine Hoehe per postMessage, daher fest. */
.gm-embed-holder iframe { width: 100%; height: 720px; border: 0; border-radius: var(--gm-radius, 14px); display: block; }
@media (max-width: 767px) { .gm-embed-holder iframe { height: 680px; } }
/* --flow: Script-Widgets (DS-IBE, TMV, Livespotting) rendern in den Seitenfluss –
   keine feste Rahmenhoehe; iframes darin (Eventim) behalten 720px, bis das
   anbietereigene Resize-Script (el-shop.js) die Hoehe setzt. */
.gm-embed-holder--flow { margin: 2.5rem 0; }

/* Klangwelt: atmosphärisches Audio-Panel in Markenfarbe (zentriert, ruhig).
   Optional Themenfoto als Hintergrund (Modifier gm-klangwelt--*) mit dunkelblauem
   Overlay, damit der weisse Text lesbar bleibt (WCAG). */
.gm-klangwelt { position: relative; overflow: hidden; background: var(--gm-primary); color: var(--gm-white);
  border-radius: var(--gm-radius, 14px); padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  text-align: center; margin: 2.5rem auto; max-width: 700px; background-size: cover; background-position: center; }
/* dunkelblaues Overlay ueber dem Foto (nur wenn ein Foto gesetzt ist) */
.gm-klangwelt[class*="gm-klangwelt--"]::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(35,46,60,.82), rgba(35,46,60,.9)); z-index: 0; }
.gm-klangwelt > * { position: relative; z-index: 1; }
.gm-klangwelt--ostsee { background-image: url('/assets/images/RGB-Strand-Gutmann.jpg'); }
.gm-klangwelt--park { background-image: url('/assets/images/Klangwelt-Park-AP-TuK.jpg'); }
.gm-klangwelt--wald { background-image: url('/assets/images/Klangwelt-Wald-Moor-AP-TuK.jpg'); }
.gm-klangwelt h2 { font-family: var(--gm-font-head); color: var(--gm-white); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 .35rem; }
.gm-klangwelt-sub { color: var(--gm-teal); font-size: 1.02rem; letter-spacing: .03em; margin: 0 0 1.6rem; }
.gm-klangwelt-lead { color: var(--gm-white); opacity: .92; font-size: 1.1rem; line-height: 1.65;
  max-width: 38rem; margin: 0 auto 2rem; }
/* Fließtext im Panel weiss erzwingen — .gm-prose p (0,1,1) wuerde sonst gewinnen (Grau) */
.gm-prose .gm-klangwelt p { color: var(--gm-white); }
.gm-prose .gm-klangwelt .gm-klangwelt-sub { color: var(--gm-teal); }
.gm-klangwelt audio { width: 100%; max-width: 440px; margin: 0 auto; display: block; }
.gm-klangwelt-credit { font-size: .8rem; opacity: .72; line-height: 1.5; margin: 1.75rem 0 0; }
.gm-klangwelt-cta { margin: 2rem 0 0; }
.gm-klangwelt-cta .btn { border-color: rgba(255,255,255,.65); color: var(--gm-white); }
.gm-klangwelt-cta .btn:hover, .gm-klangwelt-cta .btn:focus-visible { background: var(--gm-white); color: var(--gm-primary); border-color: var(--gm-white); }

/* Gastgeber-/Anbieter-Karten (Unterkunfts-Anzeigen mit Schema.org LocalBusiness) */
.gm-host-group { font-family: var(--gm-font-head); color: var(--gm-primary); font-weight: 600;
  font-size: 1.1rem; margin: 2.5rem 0 1.25rem; display: flex; align-items: center; gap: .5rem; }
.gm-host-group i { color: var(--gm-sea); }
.gm-host-card { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: start;
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius, 14px); padding: 1.25rem;
  margin: 0 0 1.5rem; background: var(--gm-white); }
.gm-host-card .gm-host-media { display: block; }
.gm-host-card .gm-host-media img { width: 100%; height: auto; border-radius: 10px; display: block; }
.gm-host-card h3 { font-family: var(--gm-font-head); color: var(--gm-primary); font-weight: 700;
  font-size: 1.2rem; margin: 0 0 .6rem; }
.gm-host-card p { line-height: 1.65; color: var(--gm-text); margin: 0 0 1rem; }
.gm-host-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 !important; }
.gm-host-tools .gm-hund { height: 44px; width: auto; }
@media (max-width: 600px) { .gm-host-card { grid-template-columns: 1fr; } }
.gm-bigfig .gm-media-zoom { background: #fff; }
.gm-bigfig .gm-media-zoom img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.gm-bigfig-cap { margin: .55rem 0 0; font-size: .85rem; color: var(--gm-text); text-align: center; }
.gm-bigfig-cap i { color: var(--gm-sea); margin-right: .35rem; }

/* btn-outline-secondary an die Marke: dezenter Outline, beim Hover gefüllt
   #323E52 mit weissem Text (statt grauem BS-Default mit hellgrauem Text). */
.btn-outline-secondary {
  --bs-btn-color: var(--gm-primary);
  --bs-btn-border-color: var(--gm-border);
  --bs-btn-hover-bg: var(--gm-primary);
  --bs-btn-hover-border-color: var(--gm-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--gm-primary-hover);
  --bs-btn-active-border-color: var(--gm-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 62,141,174;
}

/* Kontakt-Body in gm-hours-card (Heimatmuseum o.ä.) */
.gm-contact-body { padding: .8rem 1.4rem 1.2rem; }
.gm-contact-body p { margin: 0 0 .8rem; color: var(--gm-text); line-height: 1.5; }
.gm-contact-body p:last-child { margin-bottom: 0; }
.gm-contact-body i { color: var(--gm-sea); margin-right: .35rem; }

/* Betreiber-Regel: kein Blocksatz — Fliesstext immer linksbündig. */
.text-justify, [style*="text-align: justify"], [style*="text-align:justify"] { text-align: left !important; }

/* zentrierter Aktions-Absatz unter zentrierten Figures */
.gm-figure-actions { text-align: center; margin: 0 0 1.5rem; }

/* ============================================================
   Chronik / Timeline (geschichte) — vertikale Zeitachse
   ============================================================ */
.gm-timeline { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.gm-tl-item { position: relative; padding: 0 0 1.75rem 5.75rem; }
/* vertikale Linie */
.gm-tl-item::before { content: ""; position: absolute; left: 4.5rem; top: .5rem; bottom: -.4rem;
  width: 2px; background: var(--gm-sand); }
.gm-tl-item:last-child::before { display: none; }
/* Marker-Punkt auf der Linie */
.gm-tl-item::after { content: ""; position: absolute; left: calc(4.5rem - 5px); top: .45rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--gm-sea); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--gm-sand); }
.gm-tl-year { position: absolute; left: 0; top: .1rem; width: 3.6rem; text-align: right;
  font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary); font-size: 1.05rem; }
.gm-tl-text { margin: 0; }
.gm-tl-text p { margin: 0 0 .3rem; line-height: 1.55; color: var(--gm-text); }
.gm-tl-text p:last-child { margin-bottom: 0; }
@media (max-width: 575px) {
  .gm-tl-item { padding-left: 4.25rem; }
  .gm-tl-item::before { left: 3.1rem; }
  .gm-tl-item::after { left: calc(3.1rem - 5px); }
  .gm-tl-year { width: 2.5rem; font-size: .95rem; }
}

/* ============================================================
   Ort der Literaten — Dichter-Übersicht + Sektionen
   ============================================================ */
.gm-literaten-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin: 1.75rem 0 1rem; }
.gm-lit-card { display: block; text-align: center; padding: 1.6rem 1rem; background: var(--gm-cream);
  border-radius: var(--gm-radius, 14px); text-decoration: none; border-top: 3px solid var(--gm-sea);
  transition: transform .2s ease, box-shadow .2s ease; }
.gm-lit-card:hover, .gm-lit-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35,46,60,.13); }
.gm-lit-card i { font-size: 1.7rem; color: var(--gm-sea); margin-bottom: .5rem; }
.gm-lit-card-name { display: block; font-family: var(--gm-font-head); font-weight: 700;
  color: var(--gm-primary); font-size: 1.15rem; line-height: 1.15; }
/* Reihenfolge: Name › Lebensdaten (dezent) › Trennlinie › Verortung (Pin).
   Pin macht eindeutig: ein ORT; die getrennte Lebensspanne suggeriert keine Aufenthaltsdauer. */
.gm-lit-card-life { display: block; font-size: .82rem; color: var(--gm-text); opacity: .55;
  margin-top: .25rem; font-variant-numeric: tabular-nums; }
.gm-lit-card-place { display: block; font-size: .92rem; color: var(--gm-sea); font-weight: 600;
  margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--gm-border); }
.gm-lit-card-place i { font-size: .8rem !important; margin-right: .15rem; margin-bottom: 0; vertical-align: baseline; }

/* Sprungmarken-Offset (fixe Kopfleiste): ersetzt Inline-padding/negative-margin-Hacks */
.gm-anchor-offset { scroll-margin-top: 125px; }

.gm-literat { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--gm-sand); scroll-margin-top: 1.5rem; }
.gm-literat-head { font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary);
  font-size: var(--gm-fs-h2, 1.9rem); margin: 0 0 .35rem; }
.gm-literat-bezug { color: var(--gm-sea); font-weight: 600; margin: 0 0 1.25rem; }
.gm-literat .gm-media { margin-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .gm-lit-card { transition: none; } }

/* ============================================================
   Bereichsmenü (TOC) — horizontale Leiste oben, Content volle Breite
   ============================================================ */
.gm-toc-bar { display: flex; align-items: center; gap: 1rem; margin: 0 0 2.25rem; }
.gm-toc-bar-home { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto;
  font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  font-size: 1.15rem; text-decoration: none; white-space: nowrap;
  padding-right: 1rem; border-right: 2px solid var(--gm-sand); align-self: stretch; }
.gm-toc-bar-home i { color: var(--gm-sea); font-size: 1.05em; }
.gm-toc-bar-home:hover { color: var(--gm-sea); }
/* eine Zeile, horizontal scrollbar (kein Umbruch-Chaos), Fade an den Rändern */
.gm-toc-bar-list { display: flex; flex-wrap: nowrap; gap: .5rem; list-style: none; margin: 0;
  padding: .35rem .25rem .75rem; min-width: 0; overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: var(--gm-sand) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%); }
.gm-toc-bar-list::-webkit-scrollbar { height: 5px; }
.gm-toc-bar-list::-webkit-scrollbar-thumb { background: var(--gm-sand); border-radius: 3px; }
.gm-toc-bar-list li { flex: 0 0 auto; }
.gm-toc-bar-list a { display: inline-block; padding: .5rem 1.05rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--gm-border); color: var(--gm-primary); text-decoration: none;
  font-size: .92rem; font-weight: 600; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gm-toc-bar-list a:hover, .gm-toc-bar-list a:focus-visible { background: var(--gm-primary);
  border-color: var(--gm-primary); color: #fff; box-shadow: 0 4px 12px rgba(35,46,60,.18); }
.gm-toc-bar-list a[class*="active"] { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }
@media (max-width: 575px) {
  .gm-toc-bar { gap: .6rem; }
  .gm-toc-bar-home { font-size: 1rem; padding-right: .6rem; }
}
/* Richtungspfeile (per navigation.js eingefügt) — zeigen Scrollbarkeit an
   und animieren zum Benutzen. Nur sichtbar, wenn die Pill-Leiste überläuft. */
.gm-toc-bar-nav { flex: 0 0 auto; display: none; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; padding: 0; border-radius: 999px; border: 1px solid var(--gm-border);
  background: #fff; color: var(--gm-primary); cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; }
.gm-toc-bar.is-scrollable .gm-toc-bar-nav { display: inline-flex; }
.gm-toc-bar-nav:hover, .gm-toc-bar-nav:focus-visible { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }
.gm-toc-bar-nav:disabled { opacity: .25; cursor: default; pointer-events: none; }
.gm-toc-bar-nav i { font-size: .9rem; }
/* der »weiter«-Pfeil wippt dezent, solange rechts noch Inhalt verborgen ist */
.gm-toc-bar-next.is-hint { animation: gmTocNudge 1.5s ease-in-out infinite;
  border-color: var(--gm-sea); color: var(--gm-sea); }
/* Hover/Fokus schlaegt den is-hint-Farbton: Schrift/Pfeil weiss (gleiche Spezifitaet,
   spaeter im Stylesheet -> gewinnt) */
.gm-toc-bar-next.is-hint:hover, .gm-toc-bar-next.is-hint:focus-visible {
  background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }
@keyframes gmTocNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .gm-toc-bar-next.is-hint { animation: none; } }

/* 404-Seite: grosse Kennzahl, gleitende Moewe, ruhige Aktionen */
.gm-404 { text-align: center; padding: 2.5rem 1rem 4rem; }
/* Spezifitaet .gm-prose p schlagen (sonst gewinnt deren Textfarbe) */
.gm-prose .gm-404-code, .gm-404-code { font-family: var(--gm-font-head); font-size: clamp(6rem, 14vw, 10rem);
  font-weight: 600; line-height: 1; color: var(--gm-sea); margin: 0; letter-spacing: .04em; }
.gm-404-moewe { width: 84px; display: block; margin: .75rem auto 1.5rem;
  animation: gm404Glide 6s ease-in-out infinite; }
@keyframes gm404Glide { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .gm-404-moewe { animation: none; } }
.gm-404 .gm-usp-lead { max-width: 38rem; margin-inline: auto; }
.gm-404-txt { max-width: 38rem; margin: .75rem auto 0; }
.gm-404-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
/* Beliebte-Ziele-Kacheln: Region-Card als Link (kein Unterstrich, Karte hebt sich) */
.gm-404 .gm-features { text-align: left; margin-top: 2.5rem; }
a.gm-404-card { display: block; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.gm-404-card:hover, a.gm-404-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(35,46,60,.14); }
a.gm-404-card .gm-region-h { color: var(--gm-primary); }

/* Akkordeon (natives details/summary, JS-frei) — Langtexte/Portraits (z. B. ilgm).
   Ersetzt Bootstrap-Collapse-Bedarf; Fokus bleibt sichtbar (kein outline:none!). */
.gm-acc { border: 1px solid var(--gm-border); border-radius: var(--gm-radius, 14px);
  background: var(--gm-white); margin: 0 0 .9rem; }
.gm-acc summary { display: flex; align-items: baseline; gap: .35rem .75rem; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 1.05rem 1.25rem; }
.gm-acc summary::-webkit-details-marker { display: none; }
.gm-acc summary:focus-visible { outline: 3px solid var(--gm-primary); outline-offset: 2px;
  border-radius: var(--gm-radius, 14px); }
.gm-acc-name { font-weight: 700; color: var(--gm-primary); }
.gm-acc-sub { color: var(--gm-text); font-size: .85rem; }
.gm-acc-ico { margin-left: auto; color: var(--gm-sea); transition: transform .18s ease; align-self: center; }
.gm-acc[open] .gm-acc-ico { transform: rotate(180deg); }
.gm-acc[open] summary { border-bottom: 1px solid var(--gm-border); margin-bottom: 1rem; }
.gm-acc-body { padding: 0 1.25rem 1.1rem; }
.gm-acc-body h3 { font-size: 1.15rem; }
.gm-acc-isbn { font-size: .85rem; color: var(--gm-text); border-top: 1px solid var(--gm-border);
  padding-top: .75rem; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .gm-acc-ico { transition: none; } }

/* Kleines Etikett (Kategorie/Genre/Kooperationshinweis) — markenfarben statt
   Bootstraps grauer/gelber .badge-Palette. */
.gm-tag { display: inline-block; background: var(--gm-cream); color: var(--gm-primary);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px;
  padding: .25rem .7rem; }

/* Retrospektive/Bildstrecke: modernes Bootstrap-5-Carousel im Markenlook
   (ersetzt Alt-ilgm-Vollbreiten-Carousel, eigenstaendiges --ilgm-*-Design). */
.gm-carousel { border-radius: var(--gm-radius, 14px); overflow: hidden; margin: 0 0 1.25rem;
  box-shadow: 0 12px 32px rgba(35,46,60,.16); }
.gm-carousel .carousel-item img { width: 100%; height: min(58vh, 520px); object-fit: cover; display: block; }
.gm-carousel .carousel-caption { text-align: left; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(35,46,60,.82), rgba(35,46,60,0)); padding: 2.75rem 1.5rem 1rem; }
.gm-carousel .carousel-caption p { margin: 0; font-size: .85rem; color: var(--gm-white); }
.gm-carousel .carousel-indicators { margin-bottom: .75rem; gap: .4rem; }
.gm-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%;
  background-color: var(--gm-white); opacity: .55; border: 0; }
.gm-carousel .carousel-indicators [data-bs-target].active { opacity: 1; background-color: var(--gm-sea); }
.gm-carousel .carousel-indicators [data-bs-target]:focus-visible { outline: 3px solid var(--gm-sea); outline-offset: 2px; }
.gm-carousel .carousel-control-prev, .gm-carousel .carousel-control-next { width: 3.25rem; opacity: 1; }
.gm-carousel .carousel-control-prev-icon, .gm-carousel .carousel-control-next-icon {
  width: 2.25rem; height: 2.25rem; background-color: rgba(35,46,60,.55); border-radius: 999px;
  background-size: 45%; transition: background-color .18s ease; }
.gm-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.gm-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--gm-primary); }
.gm-carousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.gm-carousel .carousel-control-next:focus-visible .carousel-control-next-icon { outline: 3px solid var(--gm-white); outline-offset: 2px; }
@media (max-width: 575px) { .gm-carousel .carousel-item img { height: 260px; } }
@media (prefers-reduced-motion: reduce) { .gm-carousel .carousel-item { transition: none; } }

/* Geo-Modal (parken/): »Lage auf der Karte« im Service-Panel-Stil statt externem
   OSM-Link — natives <dialog> (Top-Layer, ESC, Fokus-Restore), Karte lokal
   (MapLibre) mit OpenFreeMap-Tiles erst nach Zustimmung im Modal. */
.gm-geo-modal { border: 0; border-radius: var(--gm-radius, 14px); padding: 0;
  width: min(92vw, 860px); }
.gm-geo-modal::backdrop { background: rgba(35,46,60,.55); }
.gm-geo-modal-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; background: var(--gm-primary); color: var(--gm-white); padding: .9rem 1.25rem; }
/* .gm-prose h2 schlagen (sonst Markenblau auf Markenblau = unsichtbar) */
.gm-prose .gm-geo-modal-title, .gm-geo-modal-title { margin: 0; font-family: var(--gm-font-body);
  font-size: 1.05rem; font-weight: 600; color: var(--gm-white); }
.gm-geo-modal-close { background: transparent; border: 1px solid rgba(255,255,255,.55);
  color: var(--gm-white); border-radius: 999px; width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gm-geo-modal-close:hover, .gm-geo-modal-close:focus-visible { background: rgba(255,255,255,.15); }
.gm-geo-map { width: 100%; height: min(62vh, 520px); background: var(--gm-cream); }
.gm-geo-consent { display: grid; gap: .8rem; justify-items: center; align-content: center;
  text-align: center; height: 100%; padding: 2rem 1.5rem; }
.gm-geo-consent p { max-width: 34rem; margin: 0; color: var(--gm-text); font-size: .9rem; line-height: 1.6; }
.gm-geo-modal-foot { padding: .7rem 1.25rem; font-size: .8rem; color: var(--gm-text);
  background: var(--gm-white); }

/* Goldstandard-Content (.gm-subpage) überläuft nicht -> overflow sichtbar lassen,
   sonst clippt body section.no-padding{overflow:hidden} die Karten-Schatten am Rand. */
body section.no-padding:has(.gm-subpage) { overflow: visible !important; }

/* Literaten: kleine zoombare Bild-Galerie pro Dichter + Intro-Lead */
.gm-lit-intro { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); line-height: 1.6; color: var(--gm-primary); }
.gm-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem; margin: 3.5rem 0 4.5rem; }
.gm-gallery-thumbs .gm-media-zoom { box-shadow: 0 4px 14px rgba(35,46,60,.12); }
.gm-gallery-thumbs .gm-media-zoom img { aspect-ratio: 4/3; }
.gm-literat .gm-prose-p { line-height: 1.7; color: var(--gm-text); margin: 0 0 1rem; }

/* ============================================================
   Literaten-Seite — literarisch-editoriale Typografie (gescopet via .gm-lit-page)
   ============================================================ */
/* Intro als editorialer Vorspann, mit klassischer Initiale (Drop-Cap) */
.gm-lit-page .gm-lit-intro { font-family: var(--gm-font-head);
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.62; color: var(--gm-primary); }
.gm-lit-page .gm-lit-intro::first-letter { float: left; font-family: var(--gm-font-head);
  font-weight: 700; color: var(--gm-sea); font-size: 3.6em; line-height: .76;
  margin: .04em .1em -.04em 0; }

/* Dichter-Sektion: ruhiger Abstand + zentrierter Diamant-Trenner (reines CSS, kein Glyph) */
.gm-lit-page .gm-literat { position: relative; border-top: 1px solid var(--gm-sand);
  margin-top: 4rem; padding-top: 3.25rem; }
.gm-lit-page .gm-literat::before { content: ""; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px;
  background: var(--gm-cream); border: 1px solid var(--gm-sea); }
.gm-lit-page .gm-literat:first-of-type { margin-top: 1.5rem; padding-top: 0; border-top: none; }
.gm-lit-page .gm-literat:first-of-type::before { content: none; }

/* Sektionskopf: Ort als feines Eyebrow-Label DRÜBER, Name groß, Lebensdaten dezent.
   Entkoppelt »JAHRE · ORT« — die Lebensspanne suggeriert so keine Aufenthaltsdauer mehr. */
.gm-lit-page .gm-literat-eyebrow { display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gm-sea); margin: 0 0 .5rem; }
.gm-lit-page .gm-literat-eyebrow::before { content: ""; width: 1.6rem; height: 2px;
  background: var(--gm-sea); opacity: .5; }
.gm-lit-page .gm-literat-head { font-size: clamp(1.95rem, 1.55rem + 1.7vw, 2.7rem);
  letter-spacing: -.012em; line-height: 1.08; margin-bottom: .25rem; }
.gm-lit-page .gm-literat-life { font-size: .9rem; color: var(--gm-text); opacity: .55;
  font-variant-numeric: tabular-nums; margin: 0 0 1.25rem; }
/* »nach oben«-Pfeil je Dichter -> zurück zur Übersicht.
   Eingerückt vom Rand (right:.5rem), damit nichts angeschnitten wird. */
.gm-lit-page .gm-literat { overflow: visible; }
.gm-lit-top { position: absolute; top: 2.75rem; right: .5rem; width: 2.15rem; height: 2.15rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid var(--gm-border); background: #fff; color: var(--gm-primary);
  transition: background .18s ease, color .18s ease, border-color .18s ease; z-index: 2; }
.gm-lit-top:hover, .gm-lit-top:focus, .gm-lit-top:focus-visible {
  background: var(--gm-primary); border-color: var(--gm-primary); color: #fff !important; }
.gm-lit-top i { font-size: .9rem; }
.gm-lit-page .gm-literat:first-of-type .gm-lit-top { top: 0; }

/* Ruhige, buchnahe Lesetypo */
.gm-lit-page .gm-media-body p, .gm-lit-page .gm-prose-p { line-height: 1.8; }
.gm-lit-page .gm-media-body p { max-width: 38rem; }

/* TOC-Pills nie unterstreichen (überschreibt jede Fließtext-/Hover-Regel) */
.gm-toc-bar a, .gm-toc-bar a:hover, .gm-toc-bar a:focus { text-decoration: none !important; }
/* Hover/aktiv: Schrift WEISS (sonst gewinnt der globale Akzent-Hover aus gm.css) */
.gm-toc-bar-list a:hover, .gm-toc-bar-list a:focus, .gm-toc-bar-list a:focus-visible,
.gm-toc-bar-list a[class*="active"] { color: #fff !important; }

/* ============================================================
   Wetter-Widget (Open-Meteo) — Webcam-Seite
   ============================================================ */
.gm-weather { background: var(--gm-cream); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius, 14px); padding: 1.1rem 1.25rem; }
.gm-weather-head { display: flex; align-items: center; gap: .9rem; }
.gm-weather-ico { font-size: 2.4rem; color: var(--gm-sea); line-height: 1; }
.gm-weather-temp { display: block; font-family: var(--gm-font-head); font-weight: 700;
  font-size: 1.9rem; color: var(--gm-primary); line-height: 1.05; }
.gm-weather-desc { display: block; color: var(--gm-text); font-size: .95rem; }
.gm-weather-grid { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem .9rem;
  border-top: 1px solid var(--gm-border); }
.gm-weather-grid li { display: flex; align-items: center; gap: .5rem; color: var(--gm-text);
  font-size: .92rem; }
.gm-weather-grid li i { color: var(--gm-sea); width: 1.2rem; text-align: center; }
.gm-weather-grid li b { margin-left: auto; color: var(--gm-primary); font-variant-numeric: tabular-nums; }
.gm-weather-err { color: var(--gm-text); margin: 0; }

/* Webcam-Player (livespotting/Clappr) — volle Container-Breite, 16:9, randlos */
.lsplayer-container { max-width: 100%; margin: 0 0 .9rem; }
.lsplayer-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--gm-primary); border-radius: var(--gm-radius, 14px); overflow: hidden; }
/* Player-DOM + Video den Rahmen FÜLLEN lassen (kein Letterbox-/Pillarbox-Schwarzrand) */
.lsplayer-wrapper > *, .lsplayer-wrapper [data-player], .lsplayer-wrapper .player-wrapper,
.lsplayer-wrapper video {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.lsplayer-wrapper video { object-fit: cover !important; }

/* ============================================================
   Externer-Link-Hinweis (Modal) — globale Regel vor dem Verlassen
   ============================================================ */
body.gm-noscroll { overflow: hidden; }
.gm-extlink[hidden] { display: none; }
.gm-extlink { position: fixed; inset: 0; z-index: 4000; display: flex;
  align-items: center; justify-content: center; padding: 1rem; }
.gm-extlink-backdrop { position: absolute; inset: 0; background: rgba(35,46,60,.55);
  backdrop-filter: blur(2px); }
.gm-extlink-box { position: relative; background: #fff; border-radius: var(--gm-radius, 14px);
  max-width: 460px; width: 100%; padding: 2rem 1.9rem 1.7rem; text-align: center;
  box-shadow: 0 18px 50px rgba(35,46,60,.28); }
.gm-extlink-ico { font-size: 2.2rem; color: var(--gm-sea); margin-bottom: .6rem; }
.gm-extlink-title { font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary);
  font-size: 1.4rem; margin: 0 0 .7rem; }
.gm-extlink-text { color: var(--gm-text); line-height: 1.6; margin: 0 0 .9rem; }
.gm-extlink-url { font-size: .85rem; color: var(--gm-sea); word-break: break-all;
  background: var(--gm-cream); border-radius: 8px; padding: .5rem .7rem; margin: 0 0 1.3rem; }
.gm-extlink-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.gm-extlink-actions .btn { min-width: 140px; }
@media (max-width: 575px) { .gm-extlink-actions .btn { width: 100%; } }

/* Check-Liste (z. B. Heilanzeigen) — mehrspaltig, mit Häkchen */
.gm-checks { list-style: none; padding: 0; margin: 1rem 0 1.4rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .45rem 1.2rem; }
.gm-checks li { display: flex; align-items: flex-start; gap: .6rem; color: var(--gm-text); line-height: 1.5; }
.gm-checks li i { color: var(--gm-sea); margin-top: .2em; flex: 0 0 auto; }

/* Altersangabe in Spielplatz-/Zielgruppen-Karten */
.gm-region-age { font-size: .78rem; font-weight: 700; color: var(--gm-sea);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }

/* ============================================================
   gm-Tabs — interaktive Reiter (z. B. »Natur erleben« auf der Kinder-Seite)
   ============================================================ */
.gm-tabs { margin: 4rem 0 5rem; }
.gm-tabs-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.gm-tab-btn { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  border: 1px solid var(--gm-border); background: #fff; color: var(--gm-primary);
  font-family: inherit; font-weight: 600; font-size: .95rem; padding: .6rem 1.25rem;
  border-radius: 999px; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gm-tab-btn i { color: var(--gm-sea); font-size: 1em; transition: color .18s ease; }
.gm-tab-btn:hover { border-color: var(--gm-sea); box-shadow: 0 3px 10px rgba(35,46,60,.10); }
.gm-tab-btn.is-active { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }
.gm-tab-btn.is-active i { color: var(--gm-teal); }
.gm-tab-panel { display: none; }
.gm-tab-panel.is-active { display: block; animation: gmTabFade .35s ease; }
.gm-tab-panel > h3:first-child { margin-top: 0; }
.gm-tab-panel p { line-height: 1.8; }
@keyframes gmTabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gm-tab-panel.is-active { animation: none; } }

/* ============================================================
   Barrierefreier Urlaub — Icon-Feature-Liste (grosse Icons, linksbuendig)
   ============================================================ */
.gm-bf-list { display: flex; flex-direction: column; gap: 1.6rem; margin: 1.75rem 0 2.25rem; }
.gm-bf-item { display: flex; gap: 1.35rem; align-items: flex-start; text-align: left; }
.gm-bf-ico { flex: 0 0 auto; display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
  border-radius: 50%; background: var(--gm-teal-light); color: var(--gm-primary); font-size: 2rem; }
.gm-bf-body { flex: 1 1 auto; min-width: 0; }
.gm-bf-h { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  font-size: 1.45rem; line-height: 1.25; margin: .2rem 0 .55rem; text-align: left; }
.gm-bf-body p { margin: 0; line-height: 1.7; color: var(--gm-text); text-align: left; }
@media (max-width: 575px) {
  .gm-bf-item { gap: 1rem; }
  .gm-bf-ico { width: 3.5rem; height: 3.5rem; font-size: 1.55rem; }
  .gm-bf-h { font-size: 1.25rem; }
}
/* abgesetzter Call-to-action */
.gm-bf-cta { background: var(--gm-cream); border-left: 4px solid var(--gm-primary);
  border-radius: 10px; padding: 1.6rem 1.7rem; margin: 2.25rem 0; text-align: left; }
.gm-bf-cta-h { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  font-size: 1.4rem; margin: 0 0 .6rem; text-align: left; }
.gm-bf-cta p { margin: 0 0 1.1rem; line-height: 1.7; color: var(--gm-text); text-align: left; }
.gm-bf-cta .btn { margin: 0; }

/* Service-Panel: externe Links als eigener Bereich (3. Spalte) */
.gm-service-grid-3{grid-template-columns:1fr 1fr 1fr;}
.gm-service-col-ext{border-left:1px solid var(--gm-border);padding-left:clamp(1rem,2vw,1.5rem);}
.gm-service-colhead{font-family:var(--gm-font-head);font-size:.92rem;font-weight:700;color:var(--gm-primary);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .7rem;}
@media (max-width:767px){.gm-service-grid-3{grid-template-columns:1fr;}.gm-service-col-ext{border-left:0;padding-left:0;border-top:1px solid var(--gm-border);padding-top:1.2rem;}}

/* ============================================================
   TMV Event-Widget (dataCycle) — Theming ueber CSS-Custom-Properties.
   WICHTIG: Das Widget-Bundle definiert seine EIGENEN Default-Werte ueber exakt
   denselben Selektor (":host,datacycle-widget,.dataCycle-widget{--dc-collection-
   card-bg:#f4f4f5;--dc-widget-header-bg:#a1a1aa;...}", im Bundle gefunden). Gleiche
   Spezifitaet -> je nach Ladezeitpunkt gewinnt das Widget zurueck (das erklaerte den
   grauen Rohlook trotz gesetzter Variablen). Deshalb hier zwingend !important, exakt
   wie beim .btn-primary-Schutz gegen zur Laufzeit injizierten Stil. KEIN eigener
   Schatten/Weiss-Kasten drumherum (Wunsch: Widget soll sich einfach farblich
   einfuegen, nicht wie eine zusaetzliche Box wirken). Zentral hier statt 3x pro Seite
   dupliziert (vorher: events/, eventkalender/, events-umland/ hatten je eigene
   <style>-Bloecke, teils widerspruechlich). */
.dataCycle-widget {
  --dc-color-primary: var(--gm-primary) !important;
  --dc-color-on-primary: var(--gm-white) !important;
  --dc-color-secondary: var(--gm-teal) !important;
  --dc-color-on-secondary: var(--gm-primary) !important;
  --dc-font-family: var(--gm-font-body) !important;
  --dc-font-family-headline: var(--gm-font-head) !important;
  --dc-font-color: var(--gm-text) !important;
  --dc-border-radius: var(--gm-radius) !important;
  --dc-button-border-radius: var(--gm-radius) !important;
  --dc-input-border-radius: var(--gm-radius) !important;
  --dc-collection-card-image-border-radius: var(--gm-radius) !important;
  --dc-collection-card-tag-border-radius: var(--gm-radius) !important;
  --dc-collection-card-bg: var(--gm-white) !important;
  --dc-button-primary-bg: var(--gm-primary) !important;
  --dc-button-primary-bg-hover: var(--gm-primary-hover) !important;
  --dc-button-primary-text-color: var(--gm-white) !important;
  --dc-button-primary-text-color-hover: var(--gm-white) !important;
  --dc-button-secondary-bg: var(--gm-cream) !important;
  --dc-button-secondary-bg-hover: var(--gm-teal-light) !important;
  --dc-button-secondary-text-color: var(--gm-primary) !important;
  --dc-button-secondary-text-color-hover: var(--gm-primary) !important;
  --dc-event-main-date-bg: var(--gm-primary) !important;
  --dc-event-main-date-bg-grid: var(--gm-primary) !important;
  --dc-event-main-date-text-color: var(--gm-white) !important;
  --dc-event-main-date-text-color-grid: var(--gm-white) !important;
  /* Event-/Card-Tags (dc-collection-card__tag) bewusst NICHT einfaerben (Betreiber-Vorgabe) */
  --dc-icon-color: var(--gm-sea) !important;
  --dc-map-color-primary: var(--gm-primary) !important;
  --dc-map-primary-color: var(--gm-primary) !important;
  --dc-map-secondary-color: var(--gm-sea) !important;
  --dc-widget-header-bg: var(--gm-cream) !important;
  --dc-search-result-icon-color: var(--gm-sea) !important;
}
/* Toolbar (Suche + Datum + Aktionen) war auf weissem Grund komplett unsichtbar: das
   Bundle setzt Such-/Datumsfeld selbst randlos (".dc-fulltext-search input" ohne Border,
   ".dc-date-search .dp__input{border:none}") und verlaesst sich auf --dc-widget-header-bg
   als einzige Abgrenzung. Mit --gm-white als Wert (siehe oben, alter Stand) verschwand die
   gesamte Leiste vor dem ebenfalls weissen Seitenhintergrund -> Suchfeld (flex-grow:1 im
   Bundle) und Datum/Buttons wirkten wie zusammenhangslos ueber die Breite verstreut.
   Fix: --dc-widget-header-bg auf Creme (sichtbare Leiste, siehe oben) + eigene weisse,
   umrandete Eingabefelder darauf -> normales, erkennbares Toolbar-Muster. */
.dataCycle-widget .dc-fulltext-search input,
.dataCycle-widget .dc-date-search .dp__input {
  background-color: var(--gm-white) !important;
  border: 1px solid var(--gm-border) !important;
  border-radius: var(--gm-radius) !important;
  padding: .55rem .75rem !important;
}
/* Schutz falls das Widget zur Laufzeit eigene Font-Angaben setzt (wie beim
   .btn-primary-Leak schon einmal beobachtet) — Farben laufen ueber die
   --dc-*-Variablen oben (praeziser als pauschales !important je Buttonklasse). */
.dataCycle-widget, .dataCycle-widget * { font-family: var(--dc-font-family); }
.dataCycle-widget .dc-collection-card__heading { font-family: var(--dc-font-family-headline); }
/* Copyright-Praefix "(c)" der Kartenzuordnung optisch ausblenden (Duplikat-Anzeige) */
.dataCycle-widget small[itemprop="copyrightNotice"]::before { content: "(c)"; visibility: hidden; }

/* Direkte Klassen-Overrides (zusaetzlich zu den --dc-*-Variablen oben): die Basisklasse
   ".dc-button" im Bundle setzt einen FEST CODIERTEN Schwarz-Hintergrund
   (".dc-button{background-color:#000}") NICHT ueber eine Variable, ausserdem nutzt die
   Hover-Regel (".dc-button:hover{background-color:var(--dc-color-secondary)}") eine
   ANDERE Variable als die --dc-button-*-hover-Variablen -> beides von Variablen allein
   nicht zuverlaessig erreichbar. Deshalb hier direkt auf Klassenebene erzwingen. */
.dataCycle-widget .dc-button { background-color: var(--gm-primary) !important; color: var(--gm-white) !important; box-shadow: none !important; }
.dataCycle-widget .dc-button:hover, .dataCycle-widget .dc-button:focus-visible { background-color: var(--gm-primary-hover) !important; }
.dataCycle-widget .dc-button--secondary { background-color: var(--gm-cream) !important; color: var(--gm-primary) !important; }
.dataCycle-widget .dc-button--secondary:hover, .dataCycle-widget .dc-button--secondary:focus-visible { background-color: var(--gm-teal-light) !important; }
.dataCycle-widget .dc-button--text { background-color: transparent !important; color: var(--gm-primary) !important; }
.dataCycle-widget .dc-button--text:hover, .dataCycle-widget .dc-button--text:focus-visible { background-color: var(--gm-cream) !important; }
.dataCycle-widget .dc-button--link { background-color: transparent !important; color: var(--gm-sea) !important; }

/* Feiner Rahmen um jede Ergebniszeile (per Live-DOM bestaetigt: <li><article
   class="dc-collection-card">…</article></li>, Karte selbst ohne Rahmen). */
.dataCycle-widget .dc-collection__list > li {
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius); overflow: hidden;
}

/* Datums-Badge: Tag/Monat sollen auf dem dunklen --dc-event-main-date-bg immer weiss
   bleiben, unabhaengig vom geerbten color (per Live-DOM bestaetigt: <p class=
   "dc-collection-event-date-container__month">). */
.dataCycle-widget .dc-collection-event-date-container__day,
.dataCycle-widget .dc-collection-event-date-container__month { color: var(--gm-white) !important; }

/* Preis-/Angebots-Badge auf dem Bild (dunkler Grund) — Text (auch Kinder wie strong,
   "Kostenlos"-Variante etc.) muss immer weiss bleiben. */
.dataCycle-widget .dc-offers-card,
.dataCycle-widget .dc-offers-card * { color: var(--gm-white) !important; }

/* Ueberschriften/Links im Widget nie unterstreichen (Bundle-Fallback bei fehlender
   eigener Regel kann sonst Browser-Default „unterstrichener Link" durchscheinen lassen). */
.dataCycle-widget .dc-collection-card__heading,
.dataCycle-widget .dc-collection-card__heading a { text-decoration: none !important; }

/* ============================================================
   Bürgerbus-Teaser — horizontale Karte (Icon + Text), ersetzt Inline-Styles
   ============================================================ */
.gm-teaser-card { overflow: hidden; margin: 2rem 0; }
.gm-teaser-card .gm-teaser-link { gap: 1rem; padding: 1.1rem 1.3rem; }
.gm-teaser-card img { width: 72px; height: auto; flex-shrink: 0; }
.gm-teaser-card p { line-height: 1.55; }

/* ============================================================
   "Public Viewing"-Werbebanner (saisonal, z. B. Fussballsommer) —
   FLACHE Karte wie ueberall sonst im Goldstandard (weiss, duenner Schatten,
   Farbbalken oben, wie .gm-region-card/.gm-hours-card) — bewusst KEINE
   Verlaufs-/Deko-Ebenen mehr (Sky/Sea-Layer entfernt: passte stilistisch nicht
   zur Karten-Sprache des Rests der Seite, wirkte wie ein Fremdkoerper).
   ============================================================ */
.gm-viewing-banner { position: relative; overflow: hidden; border-radius: var(--gm-radius, 14px);
  box-shadow: 0 6px 22px rgba(35,46,60,.08); background: var(--gm-white);
  border-top: 3px solid var(--gm-teal); margin: 2rem 0; }
.gm-prose .dataCycle-widget { margin: 2rem 0; }
.gm-viewing-content { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; }
.gm-viewing-col-main, .gm-viewing-col-locations { padding: 2rem clamp(1.3rem, 3vw, 2.2rem); }
.gm-viewing-col-locations { background: var(--gm-cream); border-left: 1px solid var(--gm-border); }
.gm-viewing-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gm-primary); margin-bottom: .7rem; }
.gm-viewing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gm-sun); flex: 0 0 auto;
  animation: gm-viewing-pulse 1.8s ease-in-out infinite; }
@keyframes gm-viewing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.gm-viewing-headline { font-family: var(--gm-font-head); font-weight: 800; color: var(--gm-primary);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.2; margin: 0 0 .5rem; }
.gm-viewing-headline .accent { color: var(--gm-sea); }
.gm-viewing-subline { font-weight: 600; color: var(--gm-text); margin-bottom: 1rem; }
.gm-viewing-desc { color: var(--gm-text); line-height: 1.65; margin: 0; max-width: 46ch; }
.gm-viewing-col-locations h3 { font-family: var(--gm-font-head); font-weight: 700; color: var(--gm-primary);
  font-size: 1.15rem; margin: 0 0 1.1rem; }
.gm-viewing-col-locations h3 i { color: var(--gm-sea); margin-right: .4rem; }
.gm-viewing-loc { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; }
.gm-viewing-loc:last-child { margin-bottom: 0; }
.gm-viewing-pin { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--gm-teal-light); color: var(--gm-primary); font-size: .85rem; }
.gm-viewing-name { font-weight: 700; color: var(--gm-primary); }
.gm-viewing-addr { color: var(--gm-text); font-size: .92rem; }
.gm-viewing-addr-sub { opacity: .75; }
.gm-viewing-footer-strip { position: relative; z-index: 1; background: var(--gm-primary); color: var(--gm-white);
  text-align: center; padding: .6rem 1rem; font-weight: 600; font-size: .88rem; letter-spacing: .02em; }
.gm-viewing-footer-strip i { margin-right: .4rem; }
@media (max-width: 767px) {
  .gm-viewing-content { grid-template-columns: 1fr; }
  .gm-viewing-col-locations { border-left: 0; border-top: 1px solid rgba(35,46,60,.08); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-viewing-dot { animation: none; }
}

/* ============================================================
   se_sitemap-Plugin (/sitemap/) — Alias-Schicht statt Datei-Overrides.
   Das Plugin-CSS (plugins/se_sitemap/assets/css/sitemap.css, 384 Zeilen) ist bereits
   durchgehend variablenbasiert und nutzt schon gm-Klassennamen, referenziert aber
   TOKEN-NAMEN, die es in tokens.css nie gab (--gm-ocean/-forest/-fern/-dune,
   --font-heading/-body, --color-muted/-danger/-tier-*, --nav-height, --weather-bar-
   height) -> ohne Fallback (z.B. Gold/Silber/Bronze-Badges) faellt das komplett
   transparent aus. Fix hier als Alias auf die ECHTEN Tokens statt die Plugin-Datei
   zu editieren (die wird bei jedem Zip-Reinstall ueberschrieben, s. v1.1.0->v1.1.1). */
.gm-sitemap {
  --gm-ocean: var(--gm-text);
  --gm-forest: var(--gm-primary);
  --gm-fern: var(--gm-sea);
  --gm-dune: var(--gm-border);
  --font-heading: var(--gm-font-head);
  --font-body: var(--gm-font-body);
  --color-muted: var(--gm-text);
  --color-danger: var(--gm-danger);
  --color-tier-bronze: #B08D57;
  --color-tier-silver: #9AA5B1;
  --color-tier-gold: var(--gm-sun);
  --nav-height: 92px;
  --weather-bar-height: 54px;
}
/* Zwei box-shadow-Regeln im Plugin-CSS nutzen HARTCODIERTES rgba(52,98,77,...) —
   die RGB-Zerlegung des nie existenten "gm-forest" (#34624D, gruenlich), NICHT ueber
   eine Variable, also von der Alias-Schicht oben unerreichbar. Rand/Text daneben nutzt
   korrekt unser Marine (--gm-primary via Alias) -> sichtbarer Farbbruch zwischen Rand
   und Schattenglow. Direkt auf rgb(50,62,82) = --gm-primary #323E52 korrigiert. */
.gm-sitemap-search input:focus { box-shadow: 0 4px 14px rgba(50, 62, 82, .18); }
.gm-sitemap-hub-tile:hover { box-shadow: 0 8px 22px -10px rgba(50, 62, 82, .25); }

/* Hero ohne Schatten — nur eine feine Rahmenlinie statt Box-Shadow. */
.gm-sitemap-hero {
  box-shadow: none !important; border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius, 14px); padding: clamp(1.5rem, 4vw, 2.75rem) 1.5rem;
}

/* ============================================================
   se_atoz-Plugin (A-bis-Z-Verzeichnis) — Alias-Schicht statt Datei-Overrides.
   Gleiche Krankheit wie se_sitemap oben: das Plugin-CSS referenziert Token-
   Namen, die es in tokens.css nie gab (--gm-ocean/-forest/-fern/-dune/-sand/
   -sage/-forest-deep/-fern-deep, --font-heading/-body, --color-danger/-ok/
   -*-bg). Ohne Alias faellt Fliesstext (zirkulaerer --gm-ocean-Fallback) und
   der Hover/Active-Zustand des Primaer-Buttons (kein Fallback fuer
   -forest-deep/-fern-deep -> "guaranteed-invalid", Hintergrund wird
   transparent) komplett aus. Card-Namen/Buttons liefen bisher in Gruen
   (#34624D-Fallback) statt der echten Markenfarbe -> hier auf --gm-primary
   umgehaengt, analog zu .gm-host-card h3 / .gm-prose h2. */
.atoz-app, .atoz-card, dialog.atoz-modal {
  --gm-ocean: var(--gm-text);
  --gm-forest: var(--gm-primary);
  --gm-forest-deep: var(--gm-primary-hover);
  --gm-fern: var(--gm-sea);
  --gm-fern-deep: var(--gm-sea);
  --gm-dune: var(--gm-border);
  --gm-sand: var(--gm-cream);
  --gm-sage: var(--gm-teal-light);
  --font-heading: var(--gm-font-head);
  --font-body: var(--gm-font-body);
  --color-danger: var(--gm-danger);
  --color-danger-bg: color-mix(in srgb, var(--gm-danger) 12%, white);
  --color-ok: var(--gm-green-dark);
  --color-ok-bg: color-mix(in srgb, var(--gm-green-dark) 12%, white);
}

/* ============================================================
   Bürgerbus (/buergerbus/) — Goldstandard-Komponenten.
   Ersetzt die frueheren inline head_styles (hartkodierte Bootstrap-Farben
   #d4edda/#155724/thead-dark) durch token-basierte, wiederverwendbare Klassen.
   ============================================================ */

/* ── Bild-Galerie (3 gleichwertige Bilder -> #gmLightbox) ── */
.gm-bb-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2.5rem; }
.gm-bb-gallery .gm-media-zoom { border-radius: var(--gm-radius, 14px); overflow: hidden;
  background: var(--gm-white); box-shadow: 0 6px 18px rgba(35, 46, 60, .12); }
.gm-bb-gallery .gm-media-zoom img { aspect-ratio: 4/3; object-fit: cover; }
/* SVG-Streckenplan nicht beschneiden -> contain auf weissem Grund */
.gm-bb-gallery .gm-bb-svg img { object-fit: contain; padding: .6rem; background: var(--gm-white); }
@media (max-width: 767px) { .gm-bb-gallery { grid-template-columns: 1fr; } }

/* ── Veranstaltungsplan-Button (Signalfarbe Sonne, vollbreit) ── */
.gm-planbtn { display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: 1rem 1.25rem; margin: 0 0 1.75rem; background: var(--gm-sun);
  color: var(--gm-ink); border: 0; border-radius: var(--gm-radius, 14px);
  font-family: var(--gm-font-body); font-weight: 700; font-size: 1.05rem; cursor: pointer;
  text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.gm-planbtn:hover, .gm-planbtn:focus-visible { background: var(--gm-sun-light); color: var(--gm-ink);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(35, 46, 60, .18); }
.gm-planbtn:focus-visible { outline: 3px solid var(--gm-sea); outline-offset: 3px; }
.gm-planbtn i { font-size: 1.1rem; }

/* ── Hinweis-Box (ersetzt Bootstrap .alert-warning) ── */
.gm-note { display: flex; gap: .7rem; align-items: flex-start; background: var(--gm-cream);
  border-left: 4px solid var(--gm-sun); border-radius: var(--gm-radius, 14px);
  padding: .9rem 1.1rem; margin: 1.5rem 0; color: var(--gm-text); line-height: 1.55; }
.gm-note i { color: var(--gm-primary); font-size: 1.05rem; margin-top: .15rem; flex: 0 0 auto; }
.gm-note strong { color: var(--gm-primary); }

/* ── Fahrplan: EINE responsive Tabelle (mobil per data-label zu Cards) ── */
.gm-fahrplan { width: 100%; margin: 1.25rem 0 2rem; }
.gm-fahrplan table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gm-fahrplan thead th { background: var(--gm-primary); color: var(--gm-white); text-align: left;
  font-family: var(--gm-font-body); font-weight: 700; padding: .8rem 1rem; }
.gm-fahrplan thead th.gm-fp-hl { background: var(--gm-green-dark); }
.gm-fahrplan tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--gm-border);
  color: var(--gm-text); vertical-align: top; }
.gm-fahrplan tbody tr:nth-child(even) td { background: var(--gm-cream); }
.gm-fahrplan tbody tr:hover td { background: var(--gm-teal-light); }
.gm-fp-stop { font-weight: 700; color: var(--gm-primary); }
.gm-fp-stop small { display: block; font-weight: 400; color: var(--gm-text); font-size: .82rem; }
.gm-fp-stop i { color: var(--gm-sea); margin-right: .4rem; }
.gm-fahrplan td.gm-fp-hl { background: var(--gm-green-light) !important; color: var(--gm-green-dark); font-weight: 700; }
.gm-fahrplan tr.gm-fp-alt td { background: var(--gm-sand) !important; font-style: italic; }
.gm-fahrplan tr.gm-fp-alt td.gm-fp-hl { background: var(--gm-sun-light) !important; color: var(--gm-ink); }

@media (max-width: 575px) {
  .gm-fahrplan thead { display: none; }
  .gm-fahrplan table, .gm-fahrplan tbody, .gm-fahrplan tr, .gm-fahrplan td { display: block; width: 100%; }
  .gm-fahrplan tr { border: 1px solid var(--gm-border); border-radius: var(--gm-radius, 14px);
    overflow: hidden; margin-bottom: .75rem; }
  .gm-fahrplan tbody tr:nth-child(even) td, .gm-fahrplan tbody tr:hover td { background: transparent; }
  .gm-fahrplan td { border-bottom: 1px solid var(--gm-border); padding: .5rem .85rem; }
  .gm-fahrplan tr td:last-child { border-bottom: 0; }
  .gm-fahrplan td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gm-sea); margin-bottom: .15rem; }
  .gm-fahrplan td.gm-fp-hl { background: var(--gm-green-light) !important; }
  .gm-fahrplan tr.gm-fp-alt td.gm-fp-hl { background: var(--gm-sun-light) !important; }
}