/* ==========================================================================
   REPARATURCAFÉ LEOPOLDSHAFEN – STYLESHEET
   Light & Dark Mode, ruhige Flächen, gezielte Akzente.

   Hinweis zur Performance: backdrop-filter liegt bewusst nur noch auf der
   Navigationsleiste. Zuvor war der Filter auf über zwanzig Elementen
   gleichzeitig aktiv (u. a. auf allen zwölf Terminkarten), was auf Mobil-
   geräten für jedes einzelne eine eigene Compositing-Ebene erzwungen hat.
   ========================================================================== */

/* ==========================================
   1. DESIGN-TOKENS
   ========================================== */
:root {
  color-scheme: light;

  /* Flächen */
  --bg-page: #f8fafc;
  --bg-light: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-inset: #f1f5f9;
  --bg-blur: rgba(248, 250, 252, 0.82);

  /* Text */
  --text-dark: #0f172a;
  --text-body: #475569;
  --text-muted: #5c6b7f;

  /* Akzente */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: rgba(37, 99, 235, 0.08);
  --primary-ring: rgba(37, 99, 235, 0.35);

  --danger: #b91c1c;

  --accent-text: #92400e;
  --accent-light: rgba(180, 83, 9, 0.09);
  --accent-border: rgba(180, 83, 9, 0.26);

  --success: #047857;
  --success-text: #036049;
  --success-glow: rgba(4, 120, 87, 0.09);
  --success-border: rgba(4, 120, 87, 0.22);

  /* Linien */
  --border-subtle: rgba(15, 23, 42, 0.09);
  --border-card: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.2);
  /* Rand von Bedienelementen, die sonst nur der Rand vom Hintergrund
     abgrenzt (WCAG 1.4.11 verlangt dort 3:1). --border-subtle kam auf 1,2:1
     und liess Knoepfe auf weissen Abschnitten praktisch verschwinden.
     #6b7280 gegen #ffffff: 4,8:1. Fuer Zierlinien bleibt --border-subtle. */
  --border-control: #6b7280;

  /* Radien */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Schrift & Bewegung */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
    "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s var(--ease-out);

  /* Hero & Buttons */
  --hero-gradient: linear-gradient(180deg, #0f172a 0%, #334155 100%);
  --btn-primary-bg: #0f172a;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #1e293b;

  /* Footer – diese vier Variablen fehlten bisher, wodurch der Footertext
     die Body-Farbe geerbt hat: 2,4:1 auf dunklem Grund. */
  --footer-bg: #0f172a;
  --footer-title: #ffffff;
  --footer-text: #cbd5e1;
  --footer-border: rgba(255, 255, 255, 0.14);

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
  --box-shadow-glass: 0 10px 30px rgba(15, 23, 42, 0.06);
  --glow-shadow: 0 0 0 1px var(--primary-ring), 0 12px 32px rgba(37, 99, 235, 0.16);

  --carousel-bg: #e2e8f0;
  --focus-ring: 0 0 0 3px var(--bg-page), 0 0 0 5px var(--primary);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #0a0a0c;
  --bg-light: #121214;
  --bg-card: #17171a;
  --bg-card-hover: #1f1f24;
  --bg-inset: #1c1c20;
  --bg-blur: rgba(10, 10, 12, 0.78);

  --text-dark: #f5f5f7;
  --text-body: #a8a8b3;
  --text-muted: #8b8b96;

  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-light: rgba(96, 165, 250, 0.12);
  --primary-ring: rgba(96, 165, 250, 0.45);

  --danger: #f87171;

  --accent-text: #fcd34d;
  --accent-light: rgba(252, 211, 77, 0.11);
  --accent-border: rgba(252, 211, 77, 0.28);

  --success: #34d399;
  --success-text: #6ee7b7;
  --success-glow: rgba(52, 211, 153, 0.1);
  --success-border: rgba(52, 211, 153, 0.24);

  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.24);
  /* #7b7b88 gegen die Kartenflaeche #17171a: 4,1:1 */
  --border-control: #7b7b88;

  --hero-gradient: linear-gradient(180deg, #ffffff 0%, #9ca3af 100%);
  --btn-primary-bg: #f5f5f7;
  --btn-primary-text: #0a0a0c;
  --btn-primary-hover: #ffffff;

  --footer-bg: #000000;
  --footer-title: #ffffff;
  --footer-text: #a8a8b3;
  --footer-border: rgba(255, 255, 255, 0.09);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.6);
  --box-shadow-glass: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 20px 40px rgba(0, 0, 0, 0.45);
  --glow-shadow: 0 0 0 1px var(--primary-ring), 0 0 40px rgba(96, 165, 250, 0.22);

  --carousel-bg: #000000;
}

/* ==========================================
   2. RESET & GRUNDLAGEN
   ========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  color: var(--text-body);
  background-color: var(--bg-page);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele nicht unter der festen Navigationsleiste parken */
  scroll-padding-top: 88px;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg-page);
}

/* Sperrt das Scrollen, solange das mobile Menü offen ist */
body.nav-open {
  overflow: hidden;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 15% 45%, rgba(96, 165, 250, 0.055) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(96, 165, 250, 0.04) 0%, transparent 45%);
  background-attachment: fixed;
}

[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 15% 45%, rgba(37, 99, 235, 0.035) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(37, 99, 235, 0.025) 0%, transparent 45%);
  background-attachment: fixed;
}

/* height: auto ist nicht optional: die Bilder tragen width/height im HTML
   (Layoutsprung vermeiden), und ohne height: auto quetscht max-width sie
   auf schmalen Displays vertikal zusammen statt sie zu skalieren. */
img,
svg {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--primary);
  color: #ffffff;
}

/* Sichtbarer Fokus für alle Bedienelemente – vorher gab es nur den
   Browser-Standard, der auf getönten Flächen kaum zu erkennen war. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2000;
  transform: translate(-50%, -120%);
  padding: 12px 24px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  box-shadow: none;
}

/* ==========================================
   3. LAYOUT-HILFSKLASSEN
   ========================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.max-w-700 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================
   4. EINBLENDEN BEIM SCROLLEN
   Startzustand nur setzen, wenn JS es auch wieder aufheben kann.
   ========================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Nach dem Einblenden keine Schicht mehr halten. Die Klasse setzt
   js/app.js, sobald der Uebergang durchgelaufen ist - stuende
   transition: none schon in .is-revealed, gaebe es gar keine
   Einblendung, weil genau diese Klasse sie ausloest. */
.js [data-reveal].is-revealed.is-settled {
  transition: none;
  will-change: auto;
}

/* ==========================================
   5. BADGES & TAGS
   ========================================== */
.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dark);
  background: var(--bg-card);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* ==========================================
   6. NAVIGATION
   ========================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: var(--bg-blur);
  /* 12px statt 20px: Der Weichzeichner muss bei jedem Scroll-Bild neu
     gegen den durchscheinenden Inhalt gerechnet werden, und die Leiste
     steht dauerhaft im Bild. Hinter einer zu 82 Prozent deckenden Flaeche
     ist der Unterschied zu 20px nicht zu sehen, die Rechenzeit halbiert
     sich aber. */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

/* Auf Telefonen ganz ohne Weichzeichner: dort kostet er am meisten und
   dort ist die Leiste am schmalsten. Deckende Flaeche statt halbdurch-
   sichtiger, sonst wird die Navigation ueber Fotos unlesbar. */
@media (max-width: 900px) {
  .navbar {
    background: var(--bg-page);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Falls der Browser kein backdrop-filter kann: deckende Fläche statt
   halbtransparenter, dann unlesbarer Leiste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar {
    background: var(--bg-page);
  }
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  transition: opacity 0.25s ease;
}

.brand-logo:hover {
  opacity: 0.72;
}

.brand-logo-img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.brand-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-subtext {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  position: relative;
  text-decoration: none;
  color: var(--text-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: color var(--transition-smooth), background-color var(--transition-smooth);
}

.nav-link:hover {
  color: var(--text-dark);
  background-color: var(--bg-inset);
}

/* Markiert den Abschnitt, in dem man sich gerade befindet */
.nav-link.is-current {
  color: var(--primary);
  background-color: var(--primary-light);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition-smooth), transform var(--transition-smooth);
}

.theme-toggle:hover {
  background: var(--bg-inset);
  transform: scale(1.08);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.theme-toggle .sun-icon {
  display: none;
}
.theme-toggle .moon-icon {
  display: block;
}
[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}
[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

.mobile-toggle {
  display: none;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.mobile-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background-color: var(--text-dark);
  transition: transform var(--transition-smooth), opacity 0.2s ease;
}

.mobile-toggle.is-active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-toggle.is-active .bar:nth-child(2) {
  opacity: 0;
}
.mobile-toggle.is-active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================
   7. HERO
   ========================================== */
.hero {
  position: relative;
  padding: clamp(140px, 18vh, 190px) 0 clamp(72px, 10vh, 110px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  top: 28%;
  left: 50%;
  z-index: -1;
  width: min(70vw, 660px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 68%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  margin-bottom: 24px;
  background: var(--success-glow);
  color: var(--success-text);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--success-border);
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 auto 24px;
  max-width: 900px;
  color: var(--text-dark);
  background: var(--hero-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fallback: ohne background-clip:text bliebe die Überschrift unsichtbar */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.subtitle {
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  color: var(--text-body);
  max-width: 660px;
  margin: 0 auto 44px;
  line-height: 1.55;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

/* Datum im Kopf-Knopf: wird per JavaScript nachgetragen und bleibt sonst leer.
   Der Flex-Abstand des Knopfes wuerde sonst den Doppelpunkt abtrennen. */
.btn-date {
  margin-left: -10px;
  white-space: nowrap;
}

/* Die Zusagen gehoeren unter die Knoepfe, nicht in ein Abzeichen darueber -
   dort, wo der Besucher gerade zoegert. */
.hero-cta-hint {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Hilfstext direkt unter einem Handlungsknopf */
.cta-hint {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ==========================================
   8. BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-smooth), background-color var(--transition-smooth),
    box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-dark);
  border-color: var(--border-control);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Kalender-Export */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-smooth), border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.btn-ghost:hover {
  background: var(--bg-inset);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.btn-ghost svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.calendar-hint {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================
   9. ABSCHNITTE & TYPOGRAFIE
   ========================================== */
.section {
  position: relative;
  padding: clamp(72px, 11vh, 118px) 0;
}

.bg-light {
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.section h2 {
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
  text-wrap: balance;
}

.section p {
  margin-bottom: 20px;
  font-size: 1.075rem;
  line-height: 1.65;
}

.section p:last-child {
  margin-bottom: 0;
}

.section-lead {
  font-size: 1.15rem;
  color: var(--text-body);
}

/* ==========================================
   10. GALERIE
   Seitenverhältnis 3:2 statt 21:9 – die Fotos sind 4:3 und verlieren bei
   21:9 gut 43 % Höhe, samt Köpfen am Bildrand.
   ========================================== */
.gallery-carousel-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 52px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--carousel-bg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

/* Der globale Fokusring liegt aussen und wuerde am overflow: hidden des
   Wrappers abgeschnitten - deshalb hier ein Ring nach innen. */
.gallery-carousel-wrapper:focus-visible {
  box-shadow: var(--shadow-lg), inset 0 0 0 3px var(--bg-page),
    inset 0 0 0 6px var(--primary);
}

.gallery-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s;
}

.gallery-slide.active {
  opacity: 1;
  visibility: visible;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Platzhalterfarbe je Bild, damit vor dem Laden keine weiße Fläche steht */
  background-color: var(--slide-bg, var(--carousel-bg));
}

/* Platzhalterfarbe je Bild - liegt hier statt als style-Attribut im Markup,
   damit die Content-Security-Policy ohne 'unsafe-inline' auskommt.
   Die Werte sind die Durchschnittsfarbe des jeweiligen Fotos. */
.slide-radio img { --slide-bg: #807063; }
.slide-messen img { --slide-bg: #8d7c71; }
.slide-fernseher img { --slide-bg: #806f4a; }
.slide-kaffee img { --slide-bg: #99938d; }

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 72px 24px 26px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 100%);
  color: #ffffff;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 500;
  text-align: center;
  /* Platz für die Punktreihe darunter */
  padding-bottom: 54px;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--transition-smooth), transform var(--transition-smooth);
}

.gallery-nav-btn:hover {
  background: rgba(0, 0, 0, 0.68);
  transform: translateY(-50%) scale(1.08);
}

.gallery-nav-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 0 0 5px #ffffff;
}

.gallery-prev {
  left: 16px;
}
.gallery-next {
  right: 16px;
}

/* Anhalten/Weiterlaufen – WCAG 2.2.2 verlangt eine erreichbare
   Pausemöglichkeit; Pausieren bei Mouseover allein genügt nicht. */
.gallery-play-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Wie die uebrigen Galerie-Knoepfe: 44 px Mindestziel fuer den Finger */
  width: 44px;
  height: 44px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--transition-smooth);
}

.gallery-play-btn:hover {
  background: rgba(0, 0, 0, 0.68);
}

.gallery-play-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 0 0 5px #ffffff;
}

.gallery-play-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.gallery-play-btn .icon-play {
  display: none;
}
.gallery-play-btn.is-paused .icon-play {
  display: block;
}
.gallery-play-btn.is-paused .icon-pause {
  display: none;
}

.gallery-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  /* Die 44-px-Flaechen trennen die 7-px-Punkte optisch schon ausreichend */
  gap: 0;
  z-index: 10;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.34);
  border-radius: var(--radius-full);
}

/* Der Punkt bleibt klein (7 px via ::after), die Klickflaeche traegt die
   44 px. Nebeneinander liegende Tippziele unter 44 px erzeugen Fehlgriffe. */
.gallery-dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.gallery-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: background-color var(--transition-smooth), width var(--transition-smooth);
}

.gallery-dot.active::after {
  background: #ffffff;
  width: 20px;
  border-radius: var(--radius-full);
}

.gallery-dot:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 0 4px #ffffff;
}

/* ==========================================
   11. COUNTDOWN
   ========================================== */
.next-event-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 52px auto 0;
}

.countdown-circle-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(280px, 78vw, 360px);
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 50%;
  box-shadow: var(--box-shadow-glass);
}

.countdown-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}

.countdown-circle-bg {
  fill: none;
  stroke: var(--border-card);
  stroke-width: 4;
}

.countdown-circle-bar {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}

.countdown-circle-content {
  position: relative;
  z-index: 2;
  padding: 24px;
  text-align: center;
}

.countdown-badge {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: 12px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-ring);
}

.countdown-date-title {
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  color: var(--text-dark);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.countdown-time-tag {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.countdown-timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}

.timer-value {
  font-size: clamp(1.7rem, 5.5vw, 2.15rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
  line-height: 1;
}

.timer-label {
  margin-top: 7px;
  /* 0.58rem waren rund 9 px - in --text-muted nicht mehr lesbar */
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Vorher stand hier die Rahmenfarbe (8 % Deckkraft) – die Doppelpunkte
   waren praktisch unsichtbar. */
.timer-divider {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.55;
}

.countdown-status {
  margin-top: 22px;
  padding: 9px 18px;
  max-width: 480px;
  text-align: center;
  font-weight: 500;
  font-size: 0.975rem;
  color: var(--success-text);
  background: var(--success-glow);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
}

.countdown-status:empty {
  display: none;
}

.countdown-status.is-neutral {
  color: var(--text-body);
  background: var(--bg-inset);
  border-color: var(--border-card);
}

.schedule-subheading {
  margin-top: 68px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

/* ==========================================
   12. TERMINRASTER
   ========================================== */
.dates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.date-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
}

.date-item:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.date-item.is-next {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--glow-shadow);
}

.next-pill-badge {
  align-self: flex-start;
  padding: 3px 10px;
  margin-bottom: 10px;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: var(--radius-full);
}

/* Vergangene Termine: gedämpft, aber noch lesbar. grayscale(1) plus
   opacity 0.5 hatte den Text unter jede Kontrastschwelle gedrückt. */
.date-item.is-past {
  background: var(--bg-inset);
  box-shadow: none;
}

.date-item.is-past .date-month,
.date-item.is-past .date-day,
.date-item.is-past .date-time {
  color: var(--text-muted);
}

.date-item.is-past .date-day {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.date-month {
  margin-bottom: 3px;
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.date-day {
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.date-time {
  font-size: 0.875rem;
  color: var(--text-body);
}

/* Abgesagte Termine: sichtbar bleiben, aber klar gekennzeichnet. Die Karte
   verschwinden zu lassen wäre schlechter - dann fragen sich Besucher, ob sie
   den Termin übersehen haben. */
.date-item.is-cancelled {
  background: var(--bg-inset);
  border-color: var(--border-card);
  box-shadow: none;
}

.date-item.is-cancelled .date-day {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--danger);
}

.date-item.is-cancelled .date-month,
.date-item.is-cancelled .date-time {
  color: var(--text-muted);
}

.date-flag {
  align-self: flex-start;
  padding: 3px 10px;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: var(--radius-full);
}

.date-flag-cancelled {
  background: var(--danger);
  color: #ffffff;
}

.date-flag-changed {
  background: var(--accent-light);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}

/* Freier Hinweistext auf einer Terminkarte, z. B. "Raum belegt" */
.date-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-card);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-body);
}

/* ==========================================
   13. KARTEN
   ========================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.card {
  padding: 34px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  font-size: 1.65rem;
  line-height: 1;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.card h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
}

.card p {
  margin-bottom: 0;
  font-size: 1rem;
}

/* ==========================================
   13b. ZAHLEN (WIRKUNG)
   ========================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 52px;
  padding: 0;
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 18px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-wrap: balance;
}

.stats-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ==========================================
   13c. AKTUELLES & PRESSE
   ========================================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 48px;
}

.news-toggle {
  align-self: center;
  margin-top: 6px;
  /* Die Meldungen bekommen per JS order 0..n - der Button muss dahinter
     bleiben, sonst rutscht er zwischen die Eintraege. */
  order: 9999;
}

/*
  Wird von JS gesetzt, sobald mehr als drei Meldungen vorhanden sind.
  Ohne JS greift die Regel nie - dann bleiben alle Eintraege sichtbar.
*/
.news-item[hidden] {
  display: none;
}

.news-item {
  padding: 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  /* Farbiger Streifen links, damit die Einträge als Liste lesbar bleiben */
  border-left: 3px solid var(--primary);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.news-date {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.news-tag {
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  color: var(--text-body);
  border: 1px solid var(--border-card);
}

.news-tag-presse {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-ring);
}

.news-tag-aktion {
  background: var(--accent-light);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

.news-tag-dank {
  background: var(--success-glow);
  color: var(--success-text);
  border-color: var(--success-border);
}

.news-title {
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  text-wrap: balance;
}

.news-item p {
  margin-bottom: 0;
  font-size: 1rem;
}

.news-links {
  margin-top: 12px !important;
}

/* ==========================================
   13d. MITMACHEN
   ========================================== */
.card-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.join-card {
  display: flex;
  flex-direction: column;
}

.join-card p {
  font-size: 1rem;
}

/* Die Schaltfläche unten halten, damit beide Karten gleich aussehen */
.join-card p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 18px;
}

.join-card .btn {
  width: 100%;
  padding: 13px 24px;
  font-size: 0.95rem;
}

/* ==========================================
   14. ANFAHRT
   ========================================== */
.contact-box {
  margin-top: 36px;
  padding: clamp(24px, 4vw, 44px);
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.location-details > * {
  margin-bottom: 28px;
}
.location-details > *:last-child {
  margin-bottom: 0;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 22px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-card);
}

.location-address strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
}

.address-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-body);
}

.map-app-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Feste min-width auf einem Flex-Kind sticht overflow-x: hidden am Body
     aus - deshalb gedeckelt auf die verfuegbare Breite. */
  min-width: min(196px, 100%);
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-dark);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-smooth), transform var(--transition-smooth);
}

.map-btn:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.direction-guide {
  padding: 20px 22px;
  background: var(--bg-inset);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.direction-guide strong {
  color: var(--text-dark);
  font-weight: 600;
}

.direction-guide > strong {
  display: block;
  margin-bottom: 8px;
}

.direction-guide p {
  font-size: 1rem;
}

.accessibility-guide {
  background: var(--success-glow);
  border-left-color: var(--success);
}

.accessibility-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.accessibility-title strong {
  color: var(--success-text);
}

.accessibility-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.accessibility-maps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--success-border);
}

.link-inline {
  color: var(--success-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Steht ein solcher Link allein in seiner Zeile, ist er nur so hoch wie
   der Text (21-25 px). inline-flex plus min-height macht daraus ein
   Tippziel, ohne den Fliesstext daneben zu verschieben. */
.news-links .link-inline,
.accessibility-maps .link-inline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Die Telefonnummer steht mitten im Absatz (nach einem <br>), darf also
   nicht umgebrochen werden - deshalb nur senkrechte Polsterung. */
.cta-hint .link-inline {
  display: inline-block;
  padding: 11px 0;
}

.link-inline:hover {
  text-decoration-thickness: 2px;
}

.link-divider {
  color: var(--text-muted);
}

.contact-email a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Lange E-Mail-Adressen dürfen auf schmalen Displays umbrechen */
  word-break: break-word;
  /* Mitten im Absatz: nur senkrecht polstern, damit die Trefferflaeche
     waechst, der Zeilenabstand aber nicht auseinanderfaellt. */
  display: inline-block;
  padding: 11px 0;
}

.contact-email a:hover,
.legal-box a:hover {
  color: var(--primary-hover);
}

/* ==========================================
   15. RECHTLICHE SEITEN
   ========================================== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--text-dark);
}

.legal-box {
  padding: clamp(26px, 5vw, 56px);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.legal-box h1 {
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.legal-box h2 {
  margin-top: 36px;
  margin-bottom: 14px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
}

.legal-box h3 {
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.legal-box p,
.legal-box li {
  font-size: 1.02rem;
  line-height: 1.7;
}

.legal-box ul {
  margin: 0 0 20px 22px;
}

.legal-box li {
  margin-bottom: 7px;
}

.legal-box a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.legal-divider {
  height: 1px;
  margin: 34px 0;
  border: 0;
  background: var(--border-card);
}

/* Hervorgehobener Hinweis in rechtlichen Texten.
   Art. 21 Abs. 4 DSGVO verlangt fuer das Widerspruchsrecht einen von den
   uebrigen Informationen getrennten, deutlich hervorgehobenen Hinweis -
   daher der Farbbalken und der abgesetzte Hintergrund. Beide Farben kommen
   aus den Theme-Variablen, damit heller und dunkler Modus mitlaufen. */
.legal-callout {
  margin: 30px 0 24px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--border-card);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--bg-light);
}

.legal-callout h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-stand {
  font-size: 0.92rem;
}

/* ==========================================
   16. FOOTER
   ========================================== */
.footer {
  padding: 52px 0 34px;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-brand {
  text-align: center;
}

.footer-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--footer-title);
}

.footer-desc {
  margin-top: 7px;
  color: var(--footer-text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--footer-border);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 22px;
}

.footer-links a {
  /* Textgrosse Links sind das haeufigste zu kleine Tippziel: inline-block,
     damit die vertikale Polsterung ueberhaupt wirkt. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--footer-text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--footer-title);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer :focus-visible {
  box-shadow: 0 0 0 3px var(--footer-bg), 0 0 0 5px var(--footer-title);
}

/* ==========================================
   17. FEHLERSEITE
   ========================================== */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: 120px 0 80px;
  text-align: center;
}

.error-code {
  font-size: clamp(4rem, 16vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--primary);
  opacity: 0.28;
}

.error-page h1 {
  margin: 12px 0 14px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.error-page p {
  max-width: 460px;
  margin: 0 auto 32px;
  font-size: 1.075rem;
}

/* Zweite Ebene nach den Buttons: die vier Abschnitte, nach denen am
   haeufigsten gesucht wird. Eine Suchmaske waere hier wirkungslos - die
   ganze Seite ist ein Onepager mit wenigen Ankern. */
.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  max-width: 520px;
  margin: 8px auto 0;
}

.error-links a {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.error-links a:hover,
.error-links a:focus-visible {
  border-bottom-color: currentColor;
}

.error-page .error-contact {
  margin: 36px auto 0;
  font-size: 0.975rem;
  color: var(--text-muted);
}

.error-page .error-contact a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================
   18. RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 76px;
  }

  .mobile-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    /* Direkt unter der Leiste beginnen und den Rest füllen – dvh, damit die
       Adressleiste mobiler Browser die Höhe nicht überzeichnet. */
    top: var(--navbar-height, 62px);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--navbar-height, 62px));
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 22px clamp(20px, 4vw, 40px) 40px;
    overflow-y: auto;
    background: var(--bg-page);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out),
      visibility 0.28s;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-link {
    padding: 14px 12px;
    font-size: 1.45rem;
    font-weight: 600;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 640px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn {
    width: 100%;
    padding: 16px 24px;
  }

  .gallery-carousel {
    /* Auf schmalen Displays näher am Originalformat der Fotos */
    aspect-ratio: 4 / 3;
  }

  .gallery-nav-btn {
    /* Nicht unter 44 px: schmale Displays werden ausschliesslich per
       Finger bedient, da ist gerade hier das groessere Ziel noetig. */
    width: 44px;
    height: 44px;
  }

  .gallery-prev {
    left: 10px;
  }
  .gallery-next {
    right: 10px;
  }

  .gallery-caption {
    padding: 56px 16px 50px;
  }

  .map-app-links {
    width: 100%;
  }

  .calendar-actions .btn-ghost {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Unter 480 px war bisher nichts geregelt. Kritisch ist allein der
   Countdown-Kreis: clamp() haelt ihn bei 280 px fest, und bei 325 px
   Viewport bleiben nach dem Containerrand nur noch 285 px uebrig. */
@media (max-width: 480px) {
  .countdown-circle-wrapper {
    width: min(280px, 100%);
  }
}

/* ==========================================
   19. BEWEGUNG REDUZIEREN
   Bisher gab es dafür keine Rücksicht: dauerhaft laufende Galerie,
   1,2-Sekunden-Überblendungen und weiches Scrollen.
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .btn-ghost:hover,
  .card:hover,
  .date-item:hover,
  .map-btn:hover,
  .theme-toggle:hover,
  .gallery-nav-btn:hover {
    transform: none;
  }
}

/* ==========================================
   20. HOHER KONTRAST
   ========================================== */
@media (prefers-contrast: more) {
  :root {
    --text-body: #1e293b;
    --text-muted: #334155;
    --border-card: rgba(15, 23, 42, 0.25);
    --border-subtle: rgba(15, 23, 42, 0.25);
  }

  [data-theme="dark"] {
    --text-body: #e4e4e7;
    --text-muted: #c4c4cc;
    --border-card: rgba(255, 255, 255, 0.3);
    --border-subtle: rgba(255, 255, 255, 0.3);
  }
}

/* ==========================================
   21. DRUCK
   Adresse, Anfahrt und Termine sollen auf Papier brauchbar sein.
   ========================================== */
@media print {
  .navbar,
  .hero-buttons,
  .gallery-carousel-wrapper,
  .gallery-dots,
  .calendar-actions,
  .theme-toggle,
  .mobile-toggle,
  .skip-link,
  .countdown-svg {
    display: none !important;
  }

  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .section {
    padding: 18px 0;
    break-inside: avoid;
  }

  .hero {
    padding: 0 0 18px;
  }

  .hero h1 {
    -webkit-text-fill-color: #000000;
    background: none;
    font-size: 22pt;
  }

  .contact-box,
  .legal-box,
  .card,
  .date-item,
  .countdown-circle-wrapper {
    border: 1px solid #999999 !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .countdown-circle-wrapper {
    width: auto;
    aspect-ratio: auto;
    border-radius: var(--radius-md);
  }

  .dates-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Auf Papier trägt Farbe nicht - Absagen deshalb ausschreiben */
  .date-item.is-cancelled .date-day::after {
    content: ' (ABGESAGT)';
    font-size: 9pt;
    font-weight: 700;
  }

  .footer {
    background: #ffffff !important;
    color: #000000 !important;
    border-top: 1px solid #999999;
  }

  .footer-title,
  .footer-desc,
  .footer-links a {
    color: #000000 !important;
  }

  /* Zieladressen ausschreiben, Links sind auf Papier sonst wertlos */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }
}