/* =========================================================================
   gm-Theme — Branding-Layer auf Bootstrap 5 (SwiftyEdit-Basis)
   Legt den gm-Look (Marineblau, Serifen-Headlines) ueber das default-Theme.
   Inkl. A11y-Korrekturen aus dem Audit (Fokus, Kontrast, reduce-motion).
   ========================================================================= */

body {
  font-family: var(--gm-font-body);
  color: var(--gm-text);
  line-height: var(--gm-lh-body);
}

/* Headings: EB Garamond, Marineblau */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--gm-font-head);
  color: var(--gm-heading);
  font-weight: var(--gm-fw-titel);
  line-height: var(--gm-lh-titel);
}
h1, .h1 { font-size: var(--gm-fs-h1); }
h2, .h2 { font-size: var(--gm-fs-h2); }
h3, .h3 { font-size: var(--gm-fs-h3); }
h4, .h4 { font-size: var(--gm-fs-h4); }
h5, .h5 { font-size: var(--gm-fs-h5); }
h6, .h6 { font-size: var(--gm-fs-h6); }

/* Links — kein Underline-Hover (nur Farbwechsel zum Akzent).
   Buttons (.btn) ausgenommen -> behalten ihren Bootstrap-Hover. */
a { color: var(--gm-primary); text-decoration: none; }

/* Pep 1+2 (20.08.2026): Satzbild + Markierungsfarbe.
   pretty: keine Hurenkinder im Fliesstext (Progressive Enhancement, aeltere
   Browser ignorieren es). balance fuer Titel liegt in gm-content.css bei den
   Titel-Regeln. ::selection in Markenfarbe statt Systemblau — text-shadow:none
   ist Pflicht: Hero-/Buehnentitel tragen Foto-Schatten, der markierte Text
   wirkte sonst schmutzig. Kontrast ink auf teal-light 9,93:1 (AAA). */
p, li, dd, figcaption { text-wrap: pretty; }
::selection { background: var(--gm-teal-light); color: var(--gm-ink); text-shadow: none; }
a:not(.btn):not(.gmbtn):not(.gm-tile):not(.se-download):not(.gm-festband-link):not(.gm-topbar-weather):not(.gm-topbar-lang):not(.gm-header-lang):not(.gm-hero-scroll):not(.gm-events-tickets):hover, a:not(.btn):not(.gmbtn):not(.gm-tile):not(.se-download):not(.gm-festband-link):not(.gm-topbar-weather):not(.gm-topbar-lang):not(.gm-header-lang):not(.gm-hero-scroll):not(.gm-events-tickets):focus { color: var(--gm-primary-hover); text-decoration: none; } /* WCAG 1.4.3: --gm-accent(=sea) nur 3.73:1 im Hover; primary-hover ~12:1. gm-festband-link ausgenommen: heller Text auf dunklem Band, Hover dort = Creme (gm-content.css). gm-topbar-weather ausgenommen: weiß auf dunkler Topbar, bewusst ganz ohne Hover-Effekt (Nutzer-Entscheid 12.08.2026) — primary-hover wäre dort unsichtbar. gm-topbar-lang (Sprachumschalter) aus demselben Grund ausgenommen, 01.09.2026: diese Kette hat durch acht :not() eine so hohe Spezifität, dass sie jede Regel in gm-header.css schlägt — ein neues Topbar-Element muss hier eingetragen werden, sonst bekommt es dunkles primary-hover auf dunklem Grund. */

/* Fließtext-Links: unterstrichen + fett (WCAG 1.4.1). Farbe allein genügt auf hellem
   Grund mit dunklem Text nicht (kein Ton schafft ≥4,5:1 zum bg UND ≥3:1 zum Text),
   daher Unterstreichung als verlässliches, nicht-farbliches Merkmal.
   Navigation/Buttons/Karten/CTAs ausgenommen (per :not() + Nicht-Fließtext-Kontext). */
section.no-padding :is(p, li, td, dd, address) a:not(.btn):not(.gmbtn):not(.gm-tile):not(.gm-event-card):not(.gm-events-all):not(.gm-link-arrow),
#content :is(p, li, td, dd, address) a:not(.btn):not(.gmbtn):not(.gm-tile):not(.gm-event-card):not(.gm-events-all):not(.gm-link-arrow) {
  text-decoration: underline;
  font-weight: var(--gm-fw-betont);
}
/* Externe Fließtext-Links (target=_blank): ↗-Icon als »öffnet in neuem Tab«-Hinweis
   (WCAG G201) zusätzlich zur Unterstreichung. Nur Classic Light (\f08e = arrow-up-right-from-square). */
section.no-padding :is(p, li, td, dd, address) a[target="_blank"]:not(.btn):not(.gmbtn):not(.gm-tile):not(.gm-event-card):not(.gm-events-all):not(.gm-link-arrow)::after,
#content :is(p, li, td, dd, address) a[target="_blank"]:not(.btn):not(.gmbtn):not(.gm-tile):not(.gm-event-card):not(.gm-events-all):not(.gm-link-arrow)::after {
  content: "\f08e";
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-size: .8em;
  margin-left: .3em;
  display: inline-block;
  text-decoration: none;
  vertical-align: baseline;
  color: inherit;
}
/* generell: niemals Unterstreichung auf Links */
a, a:hover, a:focus { text-decoration: none; }

/* Primaer-Flächen/Buttons (Bootstrap-Komponenten auf gm-Farbe) */
.bg-theme, .bg-primary { background-color: var(--gm-flaeche-marke) !important; color: var(--gm-text-invers); }
.text-theme-color, .text-primary { color: var(--gm-primary) !important; }
/* Prefooter: Marken-Verlauf statt einfarbig (nur diese bg-theme-Fläche; Navbar bleibt einfarbig) */
.bg-theme.gm-prefooter { background: var(--gm-flaeche-marke-verlauf) !important; }

/* .btn-primary: BS5 nutzt feste Komponenten-Build-Variablen (--bs-btn-bg:#32477a),
   NICHT --bs-primary. Auf die verbindliche Markenfarbe #323E52 mappen. */
.btn-primary {
  --bs-btn-bg: var(--gm-primary);
  --bs-btn-border-color: var(--gm-primary);
  --bs-btn-hover-bg: var(--gm-primary-hover);
  --bs-btn-hover-border-color: var(--gm-primary-hover);
  --bs-btn-active-bg: var(--gm-primary-hover);
  --bs-btn-active-border-color: var(--gm-primary-hover);
  --bs-btn-disabled-bg: var(--gm-primary);
  --bs-btn-disabled-border-color: var(--gm-primary);
  /* Schutz gegen zur Laufzeit injizierten BS4-Stil (.btn-primary{background:#007bff}):
     Markenfarbe direkt + !important erzwingen, nicht nur via BS5-Variable. */
  background-color: var(--gm-flaeche-marke) !important;
  border-color: var(--gm-primary) !important;
  color: var(--gm-text-invers) !important;
}
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active {
  background-color: var(--gm-primary-hover) !important;
  border-color: var(--gm-primary-hover) !important;
  color: var(--gm-text-invers) !important;
}

/* Press-Feedback (Emil Kowalski »design engineering«): pressbare Buttons reagieren
   spürbar auf :active. transform bleibt GPU-only; der reduced-motion-Killswitch
   weiter unten setzt transition-duration auf ~0 → Scale wird dann instant. */
.btn {
  transition: color .15s var(--gm-ease-out), background-color .15s var(--gm-ease-out),
              border-color .15s var(--gm-ease-out), box-shadow .15s var(--gm-ease-out),
              transform var(--gm-dur-press) var(--gm-ease-out);
}
.btn:active, .gmbtn:active { transform: scale(.97); }

/* === DS-IBE-Widget: Schutz gegen Widget->Host-Leak ===
   Das Widget injiziert zur Laufzeit ein globales <style> in den Body mit u.a.
   `.container{padding:0!important}` (fuer seine Buchungsseite gedacht) und zerstoert
   damit ALLE Host-Container (Topbar-Inhalte kleben am Rand). Host-Container-Padding
   mit hoeherer Spezifitaet zuruecksetzen (Widget selbst nutzt twng-, kein .container). */
/* Hero-/Content-.container gegen den Widget-Leak schuetzen (Topbar/Header nutzen
   stattdessen .gm-container und sind dadurch ohnehin immun). */
body .container { padding-left: 25px !important; padding-right: 25px !important; }
@media (max-width:575px){ body .container { padding-left: 15px !important; padding-right: 15px !important; } }
/* Widget-Leak des Widget-Blocks bändigen, ABER Karten-Schatten nicht am Rand
   abschneiden: clip mit 32px Margin -> Schatten (max ~24px) bleibt sichtbar,
   horizontaler Ueberlauf wird trotzdem verhindert (clip erlaubt kein Scrollen). */
body section.no-padding { overflow: clip !important; overflow-clip-margin: 32px; }

/* gm-eigener Button (kommt im migrierten Content vor) */
.gmbtn {
  display: inline-block;
  background: var(--gm-flaeche-marke);
  color: var(--gm-text-invers);
  font-weight: var(--gm-fw-label);
  letter-spacing: 1px;
  font-size: var(--gm-fs-kompakt);
  padding: 12px 28px;
  border-radius: var(--gm-radius);
  text-transform: uppercase;
  border: 1px solid var(--gm-primary);
  transition: background-color var(--gm-dur-fast) ease, color var(--gm-dur-fast) ease, transform var(--gm-dur-press) var(--gm-ease-out);
}
.gmbtn:hover, .gmbtn:focus { background: var(--gm-primary-hover); border-color: var(--gm-primary-hover); color: var(--gm-text-invers); text-decoration: none; }
.gmbtn.white { background: #fff; color: var(--gm-primary); }
.gmbtn.white:hover { background: var(--gm-flaeche-marke); color: var(--gm-text-invers); }
.gmbtn.transparent { background: transparent; color: var(--gm-primary); border-color: var(--gm-border); }
.gmbtn.transparent:hover { background: var(--gm-flaeche-marke); color: var(--gm-text-invers); }
.gmbtn.small { padding: 8px 18px; }

/* Navigation: gm-Marineblau-Balken */
.menu_area, .navbar.bg-theme { background: var(--gm-flaeche-marke); }
.navbar .nav-link { color: var(--gm-text-invers); text-transform: uppercase; font-weight: 500; font-size: var(--gm-fs-kompakt); }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: rgba(255,255,255,.8); }

/* Footer (Kontrast A11y-konform) */
.footer-area, footer { background: var(--gm-footer-bg); color: var(--gm-footer-text); }
/* footer h3 wird vollstaendig in gm-layout.css (Footer-Goldstandard) gestylt */

/* A11y: sichtbarer Tastatur-Fokus (Audit A12 — kein outline:0!) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .gmbtn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--gm-focus-width) solid var(--gm-fokus);
  outline-offset: var(--gm-focus-offset);
}

/* A11y: Bewegung reduzieren (Audit A16) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.container { max-width: 1200px; }

/* =========================================================================
   REGEL: FontAwesome ausschliesslich Classic Light.
   Erzwingt Light (weight 300, Family "Font Awesome 7 Pro") fuer ALLE
   Icon-Stilklassen — auch fuer migrierten Alt-Content (fas/far/fa-solid …).
   Ausnahme: .fab/.fa-brands (Marken-Logos existieren nur als Brands).
   ========================================================================= */
.fa, .fas, .far, .fal, .fat, .fad,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone,
.fa-sharp, .fa-sharp-solid, .fa-sharp-regular, .fa-sharp-light, .fa-sharp-thin,
i[class*="fa-"]:not(.fab):not(.fa-brands) {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 300 !important;
  --fa-style: 300;
  --fa-family: "Font Awesome 7 Pro";
}
/* Brands behalten ihre eigene Familie */
.fab, .fa-brands {
  font-family: "Font Awesome 7 Brands" !important;
  font-weight: 400 !important;
}

/* sr-only: visuell versteckt, aber fuer Screenreader/Suchmaschinen vorhanden
   (.visually-hidden ist im gepurgten default.css nicht enthalten). */
.gm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* A11y (WCAG 2.4.1): Skip-Link — erstes fokussierbares Element (index.tpl),
   springt zu <main id="main">. Unsichtbar bis Tastatur-Fokus, dann als Pill
   oben links UEBER der fixierten Topbar/Navbar (deshalb hoher z-index). */
.gm-skip-link{position:fixed;top:-100px;left:var(--gm-space-md);z-index:2147483600;background:var(--gm-flaeche-marke);color:var(--gm-text-invers);font-weight:var(--gm-fw-betont);padding:.7rem 1.2rem;border-radius:0 0 var(--gm-radius) var(--gm-radius);transition:top .15s ease;}
.gm-skip-link:focus,.gm-skip-link:focus-visible{top:0;color:var(--gm-text-invers);}
/* Sprungziel: kein Outline auf dem gesamten <main> nach programmatischem Fokus */
/* programmatisches Sprungziel, kein interaktives Element — Ring auf ganzem <main> waere stoerend */
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
#main:focus{outline:none;}

/* Seiten-Eyebrow: sichtbares seitenspezifisches h1 am Kopf des dunklen Claim-Balkens —
   zentriert, weisse Outline-Pill mit weisser Schrift, softes Einblenden (Betreiber-Vorgabe). */
.gm-page-eyebrow{text-align:center;background:transparent;margin:0;padding:calc(2.6rem + 10px) 0 1rem;}
.gm-page-eyebrow h1{display:inline-block;margin:0;font-family:var(--gm-font-body);font-style:normal;font-weight:var(--gm-fw-text);font-size:.9rem;letter-spacing:.02em;text-transform:none;color:var(--gm-text-invers);background:transparent;border:1px solid var(--gm-text-invers);padding:.35rem .9rem;border-radius:var(--gm-radius-round);animation:gmEyebrowIn .7s ease-out both;}
@keyframes gmEyebrowIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.gm-page-eyebrow h1{animation:none;}}

/* Service-Panel: dezenter Zusatz-Hinweis neben dem Titel */
.gm-service-hint{font-family:var(--gm-font-body,inherit);font-size:.7rem;font-weight:var(--gm-fw-text);text-transform:none;letter-spacing:0;color:var(--gm-text);white-space:nowrap;}

/* Ticket-CTA der Veranstaltungstipps (21.08.2026): GLOBAL in K1, weil der Button
   nicht nur im Startseiten-Snippet 147 erscheint, sondern auch auf Event-Detailseiten
   (z. B. /webcam-graal-mueritz/) via events-loader.js — dort fehlte der Stil, solange
   er nur im Snippet lag (Betreiber-Befund 2026-08-21). Kanon-Fassung, Tokens, Bestandsmotion. */
.gm-events-actions { display: flex; align-items: center; gap: var(--gm-space-md) var(--gm-space-lg); flex-wrap: wrap; }
.gm-events-tickets {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .72rem 1.35rem; background: var(--gm-flaeche-marke); color: var(--gm-text-invers);
  font-weight: var(--gm-fw-betont); font-size: var(--gm-fs-kompakt); letter-spacing: .01em;
  border: 1px solid var(--gm-primary); border-radius: var(--gm-radius); text-decoration: none;
  box-shadow: var(--gm-shadow-card);
  transition: background-color var(--gm-dur-fast) var(--gm-ease-out), box-shadow var(--gm-dur-fast) var(--gm-ease-out), transform var(--gm-dur-press) var(--gm-ease-out);
}
.gm-events-tickets i { color: var(--gm-sun); font-size: 1.05em; transition: transform var(--gm-dur-fast) var(--gm-ease-out); }
.gm-events-tickets:hover, .gm-events-tickets:focus-visible {
  background: var(--gm-primary-hover); border-color: var(--gm-primary-hover);
  color: var(--gm-text-invers); box-shadow: var(--gm-shadow-card-hover);
}
.gm-events-tickets:hover i, .gm-events-tickets:focus-visible i { transform: translateX(3px); }
.gm-events-tickets:active { transform: scale(.985); }
.gm-events-tickets:focus-visible { outline: var(--gm-focus-width) solid var(--gm-fokus); outline-offset: var(--gm-focus-offset); }
@media (prefers-reduced-motion: reduce) {
  .gm-events-tickets, .gm-events-tickets i { transition: none; }
  .gm-events-tickets:active { transform: none; }
  .gm-events-tickets:hover i, .gm-events-tickets:focus-visible i { transform: none; }
}