/* ==========================================================================
   Arrahmanmoschee Münster — Relaunch-Demo
   Design-Tokens zuerst, danach Komponenten. Kein Wert wird hartkodiert,
   alles referenziert die Variablen unten.
   ========================================================================== */

:root {
  /* Farben, abgeleitet aus dem Moschee-Logo (Blau der Kuppel, Grün der Figuren) */
  --color-blue-900: hsl(200 72% 14%);
  --color-blue-700: hsl(199 66% 24%);
  --color-blue-600: hsl(198 62% 32%);
  --color-blue-400: hsl(197 55% 52%);
  --color-blue-200: hsl(197 55% 88%);

  --color-green-800: hsl(146 42% 16%);
  --color-green-700: hsl(146 40% 23%);
  --color-green-600: hsl(146 38% 29%);
  --color-green-300: hsl(146 32% 78%);

  --color-gold-600: hsl(38 52% 48%);
  --color-gold-300: hsl(40 60% 85%);

  --color-paper: hsl(42 38% 97%);
  --color-paper-dim: hsl(40 30% 93%);
  --color-paper-deep: hsl(38 24% 89%);

  --color-ink: hsl(210 22% 14%);
  --color-ink-soft: hsl(212 12% 36%);
  --color-ink-faint: hsl(212 10% 52%);

  --color-border: hsl(38 20% 83%);
  --color-border-strong: hsl(38 18% 72%);

  --color-white: hsl(0 0% 100%);

  /* Spacing-Skala */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Typo-Skala */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Radius */
  --radius-base: 10px;
  --radius-sm: 6px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Schatten, ein abgestuftes Set */
  --shadow-sm: 0 1px 2px hsl(210 30% 15% / 0.06), 0 1px 1px hsl(210 30% 15% / 0.04);
  --shadow-md: 0 8px 24px -8px hsl(205 45% 20% / 0.18);
  --shadow-lg: 0 24px 60px -20px hsl(205 50% 15% / 0.28);

  /* Motion-Tokens */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --dur-reveal: 640ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --header-h: 0px;
  --header-h-scrolled: 0px;
  --content-max: 1180px;
}
@media (min-width: 1400px) { :root { --content-max: min(92vw, 2400px); } }

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

html { scroll-behavior: smooth; }

html { background-color: var(--color-blue-900); } /* Statusleiste/Überscroll oben passt zum dunklen Hero */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-blue-900);
  color: var(--color-ink);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  color: var(--color-blue-900);
}

h1 { font-size: var(--fs-48); }
h2 { font-size: var(--fs-36); }
h3 { font-size: var(--fs-22); }
h4 { font-size: var(--fs-18); }

p { margin: 0 0 var(--sp-4); color: var(--color-ink-soft); }

.lede { font-size: var(--fs-18); color: var(--color-ink-soft); max-width: 62ch; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

section { padding-block: 2rem; }

.section-tight { padding-block: 1.75rem; }
.page-hero + section { padding-top: var(--sp-6); }
section:not(.bg-alt):not(.bg-deep):not(.page-hero):not(.hero) + section:not(.bg-alt):not(.bg-deep) { padding-top: 0; }
.hero + section { padding-top: var(--sp-6); }

.section-head {
  max-width: 680px;
  margin-bottom: var(--sp-6);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green-700);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  background: var(--color-blue-900);
  color: var(--color-white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  z-index: 300;
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 2px solid var(--color-blue-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Kopfleiste: schlichte, schwebende Pille mit Links */
.site-header {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 6px 5px 10px;
  border-radius: var(--radius-pill);
  background: hsl(42 40% 98% / 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid hsl(38 20% 83% / 0.7);
  box-shadow: 0 8px 22px -16px hsl(205 45% 20% / 0.35);
}

@media (prefers-reduced-transparency: reduce) {
  .header-inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-paper); }
}

.brand { display: flex; align-items: center; text-decoration: none; margin-right: var(--sp-2); }
.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.header-inner .brand-mark { width: 34px; height: 34px; border-radius: 9px; padding: 2px; box-shadow: none; }
.brand-text { display: none; }
/* Logo nur in schmalen Ansichten (neben dem Menü-Button) */
@media (min-width: 1041px) { .header-inner .brand { display: none; } }

.main-nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; font-size: 12.5px; font-weight: 500; }
.nav-list a {
  display: block;
  text-decoration: none;
  color: var(--color-ink);
  opacity: 0.62;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-list a:hover { opacity: 1; background: hsl(200 40% 20% / 0.06); }
.nav-list a[aria-current="page"] { opacity: 1; background: var(--color-blue-600); color: var(--color-white); }
.header-cta { display: flex; }
.header-cta .btn {
  padding: 6px 14px; font-size: 12px; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-green-700); border: 1px solid var(--color-green-600); box-shadow: none;
}
.header-cta .btn:hover { background: var(--color-green-700); color: var(--color-white); }

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  position: relative;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .header-inner { gap: var(--sp-3); }
  .brand { margin-right: var(--sp-4); }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute; top: calc(100% + 8px); left: 50%;
    width: min(300px, calc(100vw - 24px));
    flex-direction: column; align-items: stretch; gap: var(--sp-2);
    padding: var(--sp-3);
    background: hsl(42 40% 98% / 0.97);
    border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-lg);
    transform: translate(-50%, -8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  }
  .main-nav.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-list { flex-direction: column; gap: 0; font-size: var(--fs-16); }
  .nav-list a { padding: 12px 14px; opacity: 0.8; }
  .header-cta { display: block; }
  .header-cta .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: var(--fs-14); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-green-700);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-green-800); box-shadow: var(--shadow-md); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-blue-900);
}
.btn-secondary:hover { background: var(--color-white); border-color: var(--color-blue-600); }

.btn-ghost {
  background: hsl(0 0% 100% / 0.6);
  color: var(--color-blue-900);
  border-color: hsl(0 0% 100% / 0.8);
}
.btn-ghost:hover { background: var(--color-white); }

.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-12); }

/* ==========================================================================
   Hero (Startseite) + Carousel
   ========================================================================== */

.hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(78vh, 680px);
  display: flex;
  align-items: center;
  padding-block: 0;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-blue-900);
}

.hero-slides {
  position: absolute;
  top: 0; right: 0;
  width: 66%;
  height: 100%;
}
.hero-slide { position: absolute; inset: 0; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--sp-8) var(--sp-5);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
.hero-content > * { max-width: 560px; }

.hero-content .eyebrow { color: var(--color-gold-300); }
.hero-content h1 { color: var(--color-white); font-size: clamp(var(--fs-36), 4.4vw, var(--fs-64)); }
.hero-content .lede { color: hsl(42 30% 94% / 0.92); }

@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-slides { position: relative; width: 100%; height: calc(260px + env(safe-area-inset-top, 0px)); order: -1; }
  .hero-slide img {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
  .hero-content { padding-top: 0; padding-bottom: var(--sp-7); margin-top: calc(-1 * var(--sp-4)); }
}

.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }


.page-hero {
  margin-top: var(--header-h);
  position: relative;
  min-height: 340px;
  padding-block: 0;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: var(--color-blue-900);
  overflow: hidden;
}
.page-hero img {
  position: absolute;
  top: 0; right: 0;
  width: 72%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--sp-7) var(--sp-5);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
.page-hero-content > * { max-width: 520px; }
.page-hero-content h1 { color: var(--color-white); font-size: clamp(var(--fs-36), 4vw, var(--fs-48)); }
.page-hero-content .lede { color: hsl(42 30% 94% / 0.9); margin-bottom: 0; }
@media (max-width: 860px) {
  .page-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .page-hero img {
    position: relative; width: 100%; height: 200px; order: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
  .page-hero-content { padding-top: 0; padding-bottom: var(--sp-6); margin-top: calc(-1 * var(--sp-4)); }
}

/* ==========================================================================
   Reveal-Animation (ein Muster für die ganze Seite)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition-duration: 1ms !important; opacity: 1; transform: none; }
  .hero-slide { transition-duration: 1ms !important; }
  * { animation-duration: 1ms !important; }
}

/* ==========================================================================
   Grids, Cards
   ========================================================================== */

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: hsl(38 20% 90%); }

.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-deep); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }

.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-green-700);
  background: var(--color-green-300);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
}
.card-body h3 { margin-bottom: var(--sp-1); }
.card-body p { font-size: var(--fs-14); margin-bottom: 0; }
.card-meta { font-size: var(--fs-12); color: var(--color-ink-faint); }

/* ==========================================================================
   Prayer widget
   ========================================================================== */

.prayer-panel {
  background: var(--color-blue-900);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.prayer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 100% 0%, hsl(146 40% 26% / 0.55), transparent 60%);
  pointer-events: none;
}
.prayer-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); position: relative; z-index: 1; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.prayer-panel-head h3 { color: var(--color-white); margin: 0; }
.prayer-next { font-size: var(--fs-12); color: var(--color-gold-300); letter-spacing: 0.04em; }
.prayer-next strong { font-size: var(--fs-18); color: var(--color-white); display: block; }

.prayer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); position: relative; z-index: 1; }
.prayer-cell {
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.12);
  border-radius: var(--radius-base);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.prayer-cell.is-next { background: hsl(146 40% 30% / 0.55); border-color: hsl(146 40% 50% / 0.5); }
.prayer-cell-name { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.06em; color: hsl(42 30% 94% / 0.7); margin-bottom: var(--sp-2); }
.prayer-cell-time { font-family: var(--font-display); font-size: var(--fs-22); }


.prayer-table-wrap { overflow-x: auto; }
table.prayer-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
table.prayer-table th, table.prayer-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--color-border); font-size: var(--fs-14); }
table.prayer-table th { background: var(--color-blue-900); color: var(--color-white); font-weight: 600; }
table.prayer-table tr:last-child td { border-bottom: none; }
table.prayer-table tr.is-today { background: var(--color-green-300); }

/* ==========================================================================
   Formulare
   ========================================================================== */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-14); font-weight: 600; color: var(--color-blue-900); }
.field label .opt { font-weight: 400; color: var(--color-ink-faint); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-blue-600);
  box-shadow: 0 0 0 3px hsl(198 62% 32% / 0.15);
  outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--sp-4) + 28px); background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 12px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23566' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.field[hidden] { display: none; }

.form-tabs { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-6) 0 var(--sp-4); border-bottom:1px solid var(--color-border); }
.form-tab { appearance:none; border:0; border-bottom:3px solid transparent; background:transparent; padding:var(--sp-3) var(--sp-4); color:var(--color-ink-soft); font:600 var(--fs-16) var(--font-body); cursor:pointer; }
.form-tab.is-active { color:var(--color-blue-900); border-color:var(--color-green-600); }
.form-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-6); }
.form-option { display:flex; flex-direction:column; align-items:flex-start; gap:4px; border:1px solid var(--color-border); border-radius:var(--radius-base); background:#fff; color:var(--color-ink); padding:var(--sp-4); text-align:left; cursor:pointer; }
.form-option strong { color:var(--color-blue-900); }
.form-option span { color:var(--color-ink-faint); font-size:var(--fs-14); }
.form-option.is-active { border-color:var(--color-green-600); box-shadow:0 0 0 2px hsl(145 38% 42% / .14); }
.form-entry { max-width:820px; padding:var(--sp-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm); }
.form-entry h2 { margin-bottom:var(--sp-2); color:var(--color-blue-900); }
.form-entry form { margin-top:var(--sp-5); }
.sat-talks { padding:var(--sp-7) 0; }
.sat-talks .container { display:grid; gap:var(--sp-5); }
.sat-talks-head { margin-bottom:0; }
.sat-talks-head .sat-lede { margin:var(--sp-3) 0 0; color:var(--color-ink-soft); max-width:60ch; }
.sat-talks-head > span { color:var(--color-green-700); font-size:var(--fs-14); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sat-talks-head h2 { margin:var(--sp-2) 0 0; color:var(--color-ink); }
.sat-talks-head h2 span { font-weight:400; }
.sat-talks-flyers { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,380px)); gap:var(--sp-5); }
.sat-talks-flyers a { display:block; overflow:hidden; border-radius:var(--radius-base); background:#fff; box-shadow:var(--shadow-sm); }
.sat-talks-flyers img { display:block; width:100%; height:auto; }
@media(max-width:640px) { .form-entry { padding:var(--sp-4); } }

.form-note { font-size: var(--fs-12); color: var(--color-ink-faint); margin-top: var(--sp-3); }

.form-success {
  display: none;
  background: var(--color-green-300);
  border: 1px solid var(--color-green-600);
  color: var(--color-green-800);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-base);
  margin-top: var(--sp-5);
  font-size: var(--fs-14);
}
.form-success.is-visible { display: block; }

/* ==========================================================================
   Platzhalter-Kennzeichnung
   ========================================================================== */

.placeholder-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-gold-600);
  background: var(--color-gold-300);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}

.notice-box {
  border: 1px dashed var(--color-border-strong);
  background: var(--color-paper-dim);
  border-radius: var(--radius-base);
  padding: var(--sp-5);
  font-size: var(--fs-14);
  color: var(--color-ink-soft);
}

/* ==========================================================================
   FAQ (Der Islam)
   ========================================================================== */

.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-q { margin: 0; }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--sp-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--color-blue-900);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.faq-question .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  position: relative;
}
.faq-question .icon::before,
.faq-question .icon::after {
  content: "";
  position: absolute;
  background: var(--color-blue-900);
  transition: opacity var(--dur-fast) var(--ease);
}
.faq-question .icon::before { width: 10px; height: 1.5px; }
.faq-question .icon::after { width: 1.5px; height: 10px; }
.faq-item.is-open .faq-question .icon { transform: rotate(45deg); background: var(--color-green-300); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p { padding-bottom: var(--sp-5); max-width: 68ch; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-blue-900);
  color: hsl(42 30% 94% / 0.85);
  position: relative;
  padding-block: var(--sp-7) var(--sp-6);
}
/* dezente Linie über dem Footer: nur links, mit Abstand zum Rand, ca. ein Drittel der Breite */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: calc(max(0px, (100% - var(--content-max)) / 2) + var(--sp-5)); width: 30%; height: 1px;
  background: hsl(0 0% 100% / 0.16);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid hsl(0 0% 100% / 0.12);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-brand .brand-mark { background: hsl(0 0% 100% / 0.95); }
.footer-brand strong { color: var(--color-white); font-family: var(--font-display); font-size: var(--fs-18); }
.footer-mishkat { display: inline-flex; align-items: center; margin-left: auto; width: 64px; height: 64px; border-radius: 14px; background: #fff; padding: 5px; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.footer-mishkat img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-footer h4 { color: var(--color-white); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-14); }
.site-footer a { text-decoration: none; color: inherit; transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover { color: var(--color-white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-12);
  color: hsl(42 30% 94% / 0.55);
}
.social-row { display: flex; gap: var(--sp-3); }
.social-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 8px -3px hsl(0 0% 0% / 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.social-row a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -4px hsl(0 0% 0% / 0.5); }
.social-row svg { width: 22px; height: 22px; display: block; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stat-row { display: flex; gap: var(--sp-7); flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
@media (max-width: 520px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat strong { display: block; font-family: var(--font-display); font-size: var(--fs-36); color: var(--color-blue-900); }
.stat span { font-size: var(--fs-14); color: var(--color-ink-faint); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.split-top { align-items: start; }
.split-top .form-grid { grid-template-columns: 1fr; }
.split-top .eyebrow { display: block; }
.form-demo-note { font-size: var(--fs-14); color: var(--color-ink-faint); }
.split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: none; display: block; }

.donate-box {
  background: linear-gradient(160deg, var(--color-blue-700), var(--color-blue-900));
  color: var(--color-white);
  border-radius: 28px; box-shadow: var(--shadow-md);
  padding: clamp(2rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.donate-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.donate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-2); }
.donate-link { color: var(--color-white); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: hsl(0 0% 100% / .4); }
.donate-link:hover { text-decoration-color: var(--color-gold-300); color: var(--color-gold-300); }
.donate-media { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -16px hsl(0 0% 0% / .5); }
.donate-media img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
@media (max-width: 860px) { .donate-box { grid-template-columns: 1fr; } }
.donate-box .eyebrow { color: var(--color-gold-300); }
.donate-box h2 { color: var(--color-white); max-width: 16ch; font-size: clamp(2rem, 4.5vw, 3.5rem); margin: 0; }
.donate-box p { color: hsl(42 30% 94% / .85); max-width: 56ch; margin: 0; }
.donate-box .btn-primary { background: var(--color-white); color: var(--color-blue-900); }
.donate-box .btn-primary:hover { background: var(--color-gold-300); }

.project-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1000px; margin-inline: auto; overflow: hidden; }
.project-card:hover { transform: none; }
.project-media { min-height: 100%; background: var(--color-paper-deep); }
.project-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 5 / 4; }
.project-card:hover .project-media img { transform: none; }
.project-body { padding: var(--sp-7); justify-content: center; }
@media (max-width: 860px) {
  .project-card { grid-template-columns: 1fr; }
  .project-body { padding: var(--sp-5); }
}

.bg-alt { background: var(--color-paper-dim); }

/* Weicher Übergang zwischen den beiden Beigetönen (kurz, 48px); an Blau (Hero, bg-deep, Footer) bleibt die Kante hart */
section.bg-alt, section:not(.bg-alt):not(.bg-deep):not(.page-hero):not(.hero) { position: relative; isolation: isolate; }
section.bg-alt::before,
section.bg-alt + section:not(.bg-alt):not(.bg-deep):not(.page-hero):not(.hero)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: -1; pointer-events: none;
}
section:not(.bg-alt):not(.bg-deep):not(.page-hero):not(.hero) + section.bg-alt::before { background: linear-gradient(to bottom, var(--color-paper), var(--color-paper-dim)); }
section.bg-alt + section:not(.bg-alt):not(.bg-deep):not(.page-hero):not(.hero)::before { background: linear-gradient(to bottom, var(--color-paper-dim), var(--color-paper)); }
/* kein Verlauf, wenn davor Blau oder gar nichts liegt */
.page-hero + section.bg-alt::before, .hero + section.bg-alt::before, .bg-deep + section.bg-alt::before, section.bg-alt:first-child::before { content: none; }
.bg-deep { background: var(--color-blue-900); color: var(--color-white); }
.bg-deep h2, .bg-deep h3 { color: var(--color-white); }
.bg-deep p { color: hsl(42 30% 94% / 0.82); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .split.reverse .split-media { order: -1; }
  .form-grid { grid-template-columns: 1fr; }
  .prayer-grid { grid-template-columns: repeat(3, 1fr); }
  h1 { font-size: var(--fs-36); }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .prayer-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding-inline: var(--sp-4); }
  .gh-viewport { margin-inline: calc(-1 * var(--sp-4)); }
  .gh-track { padding-inline: var(--sp-4); }
  .hero-content, .page-hero-content { padding-inline: var(--sp-4); }
}

/* Terminlisten (Aktivitäten, Start) */
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 820px; }
.event {
  display: flex; align-items: center; gap: var(--sp-5);
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
}
.event-date {
  flex: none; width: 64px; text-align: center; padding: var(--sp-2) 0;
  background: var(--color-blue-200); color: var(--color-blue-900); border-radius: var(--radius-base);
  display: flex; flex-direction: column; line-height: 1.1;
}
.event-date strong { font-family: var(--font-display); font-size: var(--fs-28); }
.event-date span { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .08em; }
.event-body { display: flex; flex-direction: column; gap: 2px; }
.event-body > strong { font-weight: 600; }
.event-sub { font-size: var(--fs-14); color: var(--color-ink-faint); }
@media (max-width: 560px) { .event { gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); } .event-date { width: 56px; } }


/* Bildplatzhalter */
.img-placeholder {
  width: 100%; height: 100%; min-height: 220px; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--radius-lg); border: 1px dashed var(--color-border-strong);
  background: repeating-linear-gradient(135deg, var(--color-paper-dim) 0 12px, var(--color-paper-deep) 12px 24px);
  color: var(--color-ink-faint); text-align: center;
}
.img-placeholder span { font-family: var(--font-display); font-size: var(--fs-28); color: var(--color-ink-soft); }
.img-placeholder small { font-size: var(--fs-12); letter-spacing: .06em; text-transform: uppercase; }

/* Kontakt */
.contact-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.contact-people li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--color-paper); border-radius: var(--radius-base); font-size: var(--fs-14); }
.contact-people strong { font-size: var(--fs-16); }
.org-head { display: flex; align-items: center; gap: var(--sp-3); }
.org-head h3 { margin-bottom: 0; }
.org-logo { flex: none; width: 64px; height: 64px; padding: 5px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); object-fit: contain; }
.org-logo-lg { width: 120px; height: 120px; padding: 10px; }
.bank-row { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

/* Karte */
.map-frame { height: 420px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.map-frame .maplibregl-map { font-family: var(--font-body); }
.map-frame .maplibregl-popup-content { border-radius: var(--radius-base); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); line-height: 1.5; }
.map-pin { width: 44px; height: 44px; }
.map-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.map-pin-dot { display: block; width: 36px; height: 36px; margin: 4px; border-radius: 50% 50% 50% 0; background: var(--color-green-700); border: 3px solid var(--color-white); box-shadow: var(--shadow-md); transform: rotate(-45deg); position: relative; }
.map-pin-dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-white); }


/* Hover-Katalog (Grundpfeiler) */
.gh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.gh-title { max-width: 680px; font-size: var(--fs-28); line-height: 1.35; margin: 0; }
.gh-title span { display: block; font-family: var(--font-body); font-size: var(--fs-16); font-weight: 400; color: var(--color-ink-faint); margin-top: var(--sp-2); }
.gh-nav { display: flex; gap: var(--sp-2); }
.gh-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-white); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.gh-btn:hover:not(:disabled) { background: var(--color-paper-dim); border-color: var(--color-blue-600); }
.gh-btn:disabled { opacity: .35; cursor: default; }
.gh-viewport { margin-inline: calc(-1 * var(--sp-5)); }
.gh-track { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-4); display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gh-track::-webkit-scrollbar { display: none; }
.gh-item { flex: 0 0 min(350px, 82vw); scroll-snap-align: start; }
.gh-card { position: relative; display: block; height: 350px; border-radius: 24px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-white); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); }
.gh-media { height: 100%; transition: height .5s var(--ease); }
.gh-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); display: block; }
.gh-media .img-placeholder { border-radius: 0; border: 0; min-height: 0; aspect-ratio: auto; height: 100%; }
.gh-text { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); background: hsl(42 40% 98% / .96); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.gh-text h3 { margin: 0; font-size: var(--fs-22); }
.gh-text p { margin: 0; font-size: var(--fs-14); color: var(--color-ink-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; padding-right: 40px; }
.gh-arrow { position: absolute; right: var(--sp-3); bottom: var(--sp-3); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--color-green-700); transition: transform .5s var(--ease); }
.gh-card:hover .gh-media, .gh-card:focus-visible .gh-media { height: 50%; }
.gh-card:hover .gh-text, .gh-card:focus-visible .gh-text { opacity: 1; transform: none; }
.gh-card:hover .gh-arrow, .gh-card:focus-visible .gh-arrow { transform: rotate(-45deg); }
@media (hover: none) {
  .gh-media { height: 50%; }
  .gh-text { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gh-media, .gh-text, .gh-arrow { transition: none; } }

/* Iqama und Freitagsgebet */
.prayer-cell-iqama { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid hsl(0 0% 100% / .14); font-size: var(--fs-12); color: hsl(42 30% 94% / .75); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.prayer-cell-iqama strong { color: var(--color-gold-300); font-size: var(--fs-16); font-weight: 600; margin-left: 4px; }
.prayer-cell-iqama small { font-size: 11px; opacity: .8; }
.prayer-cell.is-sunrise { background: hsl(0 0% 100% / .03); }
.prayer-friday { position: relative; z-index: 1; margin-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-base); border: 1px solid hsl(40 60% 85% / .35); background: hsl(40 60% 85% / .08); font-size: var(--fs-14); }
.prayer-friday.is-today { background: hsl(40 60% 85% / .2); border-color: hsl(40 60% 85% / .6); }
.prayer-friday-name { font-family: var(--font-display); font-size: var(--fs-18); color: var(--color-gold-300); margin-right: auto; }
.prayer-friday small { color: hsl(42 30% 94% / .7); margin-right: 4px; }
.prayer-friday strong { font-family: var(--font-display); font-size: var(--fs-22); font-weight: 500; }
.pt-iqama { display: block; font-size: var(--fs-12); color: var(--color-ink-faint); }
.pt-friday { font-weight: 600; }
.pt-none { color: var(--color-ink-faint); }
table.prayer-table tbody th { background: transparent; color: var(--color-ink); text-align: left; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
table.prayer-table tbody tr:last-child th { border-bottom: none; }

/* Sprach-Badges */
.cal-lang { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; vertical-align: middle; }
.cal-lang.l-de { color: var(--color-blue-700); background: var(--color-blue-200); }
.cal-lang.l-ar { color: var(--color-green-700); background: var(--color-green-300); }
.cal-lang.l-both { color: var(--color-ink-soft); background: var(--color-paper-deep); }
.cal-lang.l-en { color: var(--color-ink-soft); background: var(--color-paper-deep); }
.lang-key { list-style: none; display: flex; gap: var(--sp-5); margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-14); color: var(--color-ink-soft); }
.lang-key li { display: inline-flex; align-items: center; gap: 6px; }

/* Wochenplan */
.week-plan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.wp-day { display: flex; flex-direction: column; gap: var(--sp-2); }
.wp-head { font-size: var(--fs-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-faint); padding-left: 2px; }
.wp-day.is-today .wp-head { color: var(--color-blue-700); }
.wp-item { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: var(--sp-3); background: var(--color-white); border: 1px solid var(--color-border); border-top: 3px solid var(--color-blue-600); border-radius: var(--radius-base); font-size: var(--fs-14); line-height: 1.35; }
.wp-item.l-ar { border-top-color: var(--color-green-600); }
.wp-item strong { font-weight: 600; }
.wp-when { color: var(--color-ink-soft); font-size: var(--fs-12); }
.wp-sheikh { color: var(--color-ink-faint); font-size: var(--fs-12); margin-top: auto; }
.wp-item.is-empty { background: transparent; border-style: dashed; border-top-width: 1px; align-items: center; justify-content: center; }
.wp-none { color: var(--color-ink-faint); font-size: var(--fs-12); text-align: center; }
.wp-day.is-today .wp-item { box-shadow: var(--shadow-md); }
@media (max-width: 1040px) {
  .week-plan { grid-template-columns: 1fr; }
  .wp-day { flex-direction: row; align-items: stretch; gap: var(--sp-3); }
  .wp-head { width: 92px; flex: none; padding-top: var(--sp-3); }
  .wp-item { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); }
  .wp-sheikh { margin-top: 0; }
}


.site-footer p { color: inherit; }

/* Flyer-Fächer */
.fan-section { overflow: hidden; }
.fan {
  --ch: clamp(380px, min(66vw, 62vh), 540px);
  --step: clamp(70px, 12vw, 190px);
  position: relative; width: 100%; height: var(--ch);
  touch-action: pan-y; user-select: none;
}
.fan .c {
  position: absolute; left: 50%; bottom: 0;
  height: var(--ch); width: calc(var(--ch) * var(--r)); margin-left: calc(var(--ch) * var(--r) / -2);
  border: 4px solid #fff; border-radius: 14px; overflow: hidden; background: #fff;
  transform-origin: center bottom; cursor: pointer;
  box-shadow: 0 36px 60px -30px hsl(205 45% 20% / .5), 0 2px 8px hsl(205 45% 20% / .1);
  will-change: transform, opacity;
}
.fan .c.is-center { cursor: zoom-in; }
.fan .c img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; pointer-events: none; -webkit-user-drag: none; }
.fan .c:focus-visible { outline: 3px solid var(--color-blue-600); outline-offset: 3px; }
.fan-ui { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.fan-cap { min-width: min(320px, 56vw); text-align: center; line-height: 1.35; }
.fan-cap b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-18); }
.fan-cap small { color: var(--color-ink-faint); font-size: var(--fs-12); }
.fan-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background var(--dur-base) var(--ease); }
.fan-btn:hover { background: var(--color-paper-dim); }
dialog.flyer-viewer { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; margin: auto; overflow: visible; text-align: center; }
dialog.flyer-viewer::backdrop { background: hsl(203 60% 10% / .82); backdrop-filter: blur(5px); }
dialog.flyer-viewer[open] { animation: cal-pop var(--dur-base) var(--ease); }
.flyer-viewer img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 12px; box-shadow: var(--shadow-lg); display: block; margin: 0 auto; }
.flyer-viewer p { color: #fff; margin: var(--sp-3) 0 0; font-size: var(--fs-14); }
.flyer-close { position: absolute; top: -14px; right: -6px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); }
@keyframes cal-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .fan .c { transition: none; } }

.card-when { font-size: var(--fs-12); color: var(--color-ink-faint); letter-spacing: .02em; }

.card-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-14); color: var(--color-ink-soft); }
.card-list li { position: relative; padding-left: 14px; }
.card-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-ink-faint); }

.grid-4 .card-body h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-18); white-space: nowrap; }

/* Hero-Widgets (Start) */
.hero-content > .hero-widgets { max-width: 760px; }
.hero-widgets { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.hw {
  color: var(--color-white);
  background: hsl(0 0% 100% / .09);
  border: 1px solid hsl(0 0% 100% / .2);
  border-radius: 16px;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  padding: var(--sp-4) var(--sp-5);
}
.hw-kicker { display: block; font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; color: hsl(42 30% 94% / .7); }
.hw-prayer { display: flex; flex-direction: column; gap: 2px; width: 260px; }
.hw-name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-18); }
.hw-count { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .01em; margin: 2px 0; }
.hw-sub { font-size: var(--fs-12); color: hsl(42 30% 94% / .75); }
.hw-prayer.is-iqama { border-color: hsl(40 60% 85% / .65); background: hsl(40 60% 85% / .12); }
.hw-address { display: flex; align-items: center; gap: var(--sp-4); }
.hw-logo { flex: none; width: 76px; height: 76px; padding: 6px; background: var(--color-paper); border-radius: 14px; box-shadow: var(--shadow-md); }
.hw-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hw-mishkat-logo { flex: none; width: 76px; height: 76px; padding: 6px; background: var(--color-paper); border-radius: 14px; box-shadow: var(--shadow-md); object-fit: contain; align-self: center; }
.hw-address-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-14); }
.hw-address-text strong { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-16); }
.hw-address-text address { font-style: normal; color: hsl(42 30% 94% / .85); line-height: 1.4; }
.hw-link { margin-top: var(--sp-1); color: var(--color-gold-300); font-size: var(--fs-12); text-decoration: none; border-bottom: 1px solid hsl(40 60% 85% / .4); align-self: flex-start; }
.hw-link:hover { border-bottom-color: var(--color-gold-300); }
@media (max-width: 560px) { .hw { flex: 1 1 100%; } .hw-count { font-size: 2rem; } }

/* Willkommen: nebeneinander angeordnete Karten, aktive Karte klappt auf */
.ex-cards {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 8px;
  height: 700px; grid-template-columns: 1fr; grid-template-rows: repeat(8, 1fr);
  transition: grid-template-columns .55s var(--ease), grid-template-rows .55s var(--ease);
}
.ex-card { position: relative; overflow: hidden; border-radius: 16px; cursor: pointer; min-width: 0; min-height: 0; background: var(--color-blue-900); outline-offset: 3px; }
.ex-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ex-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, hsl(0 0% 0% / .8), hsl(0 0% 0% / .35) 45%, transparent); pointer-events: none; }
.ex-text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-5); color: var(--color-white); }
.ex-short { margin: 0; font-family: var(--font-body); font-size: var(--fs-14); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: hsl(0 0% 100% / .85); opacity: 1; transition: opacity .25s ease; white-space: nowrap; }
.ex-cat, .ex-title { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--ease); }
.ex-cat { margin: 0; font-size: var(--fs-14); font-weight: 500; color: hsl(0 0% 100% / .85); }
.ex-title { margin: 0; color: var(--color-white); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -.01em; max-width: 16ch; }
.ex-card[data-active="true"] .ex-short { opacity: 0; position: absolute; }
.ex-card[data-active="false"] .ex-text { justify-content: center; padding-block: 0; }
.ex-card[data-active="false"] .ex-cat, .ex-card[data-active="false"] .ex-title { position: absolute; left: var(--sp-5); right: var(--sp-5); pointer-events: none; }
.ex-card[data-active="true"] .ex-cat { opacity: 1; transform: none; transition-delay: .2s; }
.ex-card[data-active="true"] .ex-title { opacity: 1; transform: none; transition-delay: .28s; }
@media (min-width: 768px) {
  .ex-card[data-active="false"] .ex-text { justify-content: flex-end; padding-block: var(--sp-5); }
  .ex-cards { height: 640px; grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr; }
  /* Bild behält in allen Karten dieselbe Größe (Breite der aufgeklappten Karte), beim Zuklappen wird nur der Rand weggeschnitten */
  .ex-card img { width: var(--exw, 100%); left: 50%; transform: translateX(-50%); }
  .ex-short { position: absolute; left: var(--sp-5); bottom: var(--sp-5); transform-origin: left bottom; transform: rotate(-90deg) translateX(0); writing-mode: initial; }
  .ex-card[data-active="true"] .ex-short { position: absolute; }
}
@media (prefers-reduced-motion: reduce) { .ex-cards, .ex-card img, .ex-short, .ex-cat, .ex-title { transition: none; } }

/* ==========================================================================
   Anfahrt: aufklappbare Orts-Karte (.expand-map), aufgeklappt mit echter MapLibre-Karte
   ========================================================================== */
.expand-map { position: relative; width: 100%; height: 160px; transition: height .55s var(--ease); perspective: 1000px; cursor: pointer; user-select: none; outline-offset: 6px; border-radius: 20px; }
.expand-map.is-expanded { height: 440px; cursor: default; user-select: auto; }
.xm-card {
  position: relative; overflow: hidden; border-radius: 20px;
  width: 240px; height: 140px; background: var(--color-white); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); transform-style: preserve-3d; will-change: transform;
  transition: width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease);
}
.expand-map.is-expanded .xm-card { width: 100%; height: 100%; transform: none !important; }
.xm-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, hsl(40 30% 93% / .3), transparent 50%, hsl(40 30% 93% / .6)); pointer-events: none; }
.xm-grid { position: absolute; inset: 0; opacity: .05; transition: opacity .3s; }
.expand-map.is-expanded .xm-grid, .expand-map.is-expanded .xm-card::before { opacity: 0; }
.xm-map { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .15s ease; background: var(--color-paper-dim); }
.expand-map.is-expanded .xm-map { opacity: 1; pointer-events: auto; transition: opacity .35s ease .22s; }
.xm-card .xm-map { position: absolute; inset: 0; }
.xm-map .maplibregl-map { font-family: var(--font-body); }
.xm-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; pointer-events: none; transition: padding .55s var(--ease); }
.xm-top { display: flex; align-items: flex-start; justify-content: space-between; }
.xm-icon { color: var(--color-green-600); transition: opacity .3s, filter .3s; filter: drop-shadow(0 0 4px hsl(146 38% 29% / .3)); }
.expand-map.is-hovered .xm-icon { filter: drop-shadow(0 0 8px hsl(146 38% 29% / .6)); }
.expand-map.is-expanded .xm-icon { opacity: 0; }
.xm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: hsl(210 22% 14% / .05); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-soft); transition: transform .2s, background .2s, opacity .2s; }
.expand-map.is-hovered .xm-badge { transform: scale(1.05); background: hsl(210 22% 14% / .08); }
.xm-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-green-600); }
.expand-map.is-expanded .xm-badge { opacity: 0; transform: scale(.9); }
.xm-close { display: block; opacity: 0; transform: scale(.7); visibility: hidden; transition: opacity .15s, transform .25s var(--ease), visibility 0s .15s; pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--color-white); color: var(--color-ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); position: absolute; top: 12px; left: 12px; z-index: 3; }
.expand-map.is-expanded .xm-close { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease .3s, transform .35s var(--ease) .3s, visibility 0s; }
.xm-close:hover { background: var(--color-paper-dim); }
.xm-bottom { align-self: flex-start; }
.xm-bottom { padding: 10px 14px; margin: -10px -14px; border-radius: 12px; background: hsl(0 0% 100% / 0); box-shadow: 0 0 0 hsl(0 0% 0% / 0); transition: background .25s, box-shadow .25s; }
.expand-map.is-expanded .xm-bottom { background: hsl(0 0% 100% / .92); box-shadow: var(--shadow-md); transition-delay: .3s; }
.xm-title { margin: 0; font-family: var(--font-body); font-size: var(--fs-14); font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); transition: transform .3s var(--ease); }
.expand-map.is-hovered:not(.is-expanded) .xm-title { transform: translateX(4px); }
.xm-coords { margin: 0; max-height: 0; opacity: 0; overflow: hidden; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-ink-soft); transition: max-height .25s, opacity .25s; }
.expand-map.is-expanded .xm-coords { max-height: 24px; opacity: 1; }
.xm-line { display: block; height: 1px; margin-top: 4px; background: linear-gradient(to right, hsl(146 38% 29% / .5), hsl(146 38% 29% / .25), transparent); transform: scaleX(.3); transform-origin: left; transition: transform .4s ease-out, opacity .2s; }
.expand-map.is-hovered .xm-line, .expand-map.is-expanded .xm-line { transform: scaleX(1); }
.expand-map.is-expanded .xm-line { opacity: 0; }
.xm-hint { position: absolute; left: 0; width: 240px; top: 154px; text-align: center; font-size: 10px; color: var(--color-ink-faint); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.expand-map.is-hovered:not(.is-expanded) .xm-hint { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .expand-map.is-expanded { height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .expand-map, .xm-card, .xm-map, .xm-coords, .xm-line { transition: none; }
}
.expand-map.is-expanded .xm-content { padding: 22px 22px 44px; }

.jumua-list { margin: 0 0 var(--sp-4); padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.jumua-list li::marker { color: var(--color-green-600); }

.flyer-viewer img { touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
.flyer-nav { position: absolute; top: 42%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: hsl(0 0% 100% / .9); color: var(--color-ink); font-size: 1.7rem; line-height: 1; padding: 0 0 3px; cursor: pointer; box-shadow: var(--shadow-md); transition: background var(--dur-fast); }
.flyer-nav:hover { background: #fff; }
.flyer-prev { left: -8px; }
.flyer-next { right: -8px; }
@media (min-width: 900px) { .flyer-prev { left: -64px; } .flyer-next { right: -64px; } }

/* Mobil: monatliche Treffen einspaltig, lange Überschriften brechen nicht aus */
@media (max-width: 560px) {
  section { padding-block: 2rem; }
  .section-tight { padding-block: 1.5rem; }
  .grid-4 { grid-template-columns: 1fr; }
  .section-head h2 { font-size: min(var(--fs-36), 8vw); overflow-wrap: break-word; hyphens: manual; }
  .site-footer::before { width: 34%; }
}

/* iOS färbt Buttons ohne eigene Farbe blau: Textfarbe erben */
button { color: inherit; }
.gh-track { scroll-padding-inline: var(--sp-5); }

/* & in der Display-Schrift wirkt verschnörkelt: in der Textschrift setzen */
.amp { font-family: var(--font-body); font-weight: 600; }

/* Bild neben Text: so hoch wie der Textbereich (mindestens 320 px), Seitenverhältnis bleibt */
.split-media img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
@media (min-width: 861px) {
  .split-media { align-self: stretch; min-height: 320px; contain: size; display: flex; justify-content: center; }
  .split-media img { height: 100%; width: auto; max-height: 100%; margin: 0; }
}
@media (max-width: 860px) {
  .split-media img { max-height: 420px; }
}
/* Freitagspredigten: das Bild wird nie beschnitten, es passt sich immer an seine ganze Größe an */
.split-media[data-live="freitag-themen"] { align-self: start; min-height: 0; contain: none; display: block; }
.split-media[data-live="freitag-themen"] img { width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; margin: 0; }

/* Säulen-Detailansicht (Der Islam) */
dialog.pillar-viewer { border: 0; padding: 0; background: var(--color-white); border-radius: 24px; width: min(960px, 94vw); max-height: 88vh; margin: auto; overflow: visible; box-shadow: var(--shadow-lg); }
dialog.pillar-viewer::backdrop { background: hsl(203 60% 10% / .82); backdrop-filter: blur(5px); }
dialog.pillar-viewer[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); animation: cal-pop var(--dur-base) var(--ease); }
.pv-media { position: relative; border-radius: 24px 0 0 24px; overflow: hidden; background: var(--color-paper-deep); min-height: 420px; }
.pv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-body { padding: var(--sp-7) var(--sp-6) var(--sp-6); overflow-y: auto; max-height: 88vh; border-radius: 0 24px 24px 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.pv-head { display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); }
.pv-head p, .pv-head h3 { margin: 0; }
.pv-eyebrow { font-size: var(--fs-12); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--color-green-600); }
.pv-head h3 { font-size: var(--fs-36); line-height: 1.1; }
.pv-sub { font-family: var(--font-display); font-size: var(--fs-18); color: var(--color-ink-soft); }
.pv-intro { margin: 0; font-size: var(--fs-16); color: var(--color-ink); }
.pv-facts { display: grid; gap: var(--sp-3); }
.pv-fact { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--color-paper); border-left: 3px solid var(--color-green-600); border-radius: 0 var(--radius-base) var(--radius-base) 0; font-size: var(--fs-14); line-height: 1.5; }
.pv-fact strong { font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-faint); }
.pv-label { margin: 0 0 calc(-1 * var(--sp-2)); font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-faint); }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-14); line-height: 1.5; color: var(--color-ink-soft); }
.pv-list li { position: relative; padding-left: 30px; }
.pv-list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border-radius: 50%; background: var(--color-green-300); }
.pv-list li::after { content: ""; position: absolute; left: 6px; top: calc(.1em + 4px); width: 4px; height: 8px; border: solid var(--color-green-700); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.9); }
.pv-list strong { color: var(--color-ink); }
.pv-close { position: absolute; top: -14px; right: -10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); }
.pv-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0; background: hsl(0 0% 100% / .92); font-size: 1.7rem; line-height: 1; padding: 0 0 3px; cursor: pointer; box-shadow: var(--shadow-md); }
.pv-prev { left: -22px; }
.pv-next { right: -22px; }
@media (max-width: 860px) {
  dialog.pillar-viewer[open] { grid-template-columns: 1fr; width: min(520px, 94vw); overflow-y: auto; max-height: 90vh; }
  .pv-media { border-radius: 24px 24px 0 0; min-height: 0; height: 200px; }
  .pv-body { padding: var(--sp-5); max-height: none; overflow: visible; border-radius: 0 0 24px 24px; }
  .pv-head h3 { font-size: var(--fs-28); }
  .pv-close { top: 10px; right: 10px; }
  .pv-prev { left: 10px; top: 100px; }
  .pv-next { right: 10px; top: 100px; }
}
.gh-card { cursor: pointer; }

main { background: var(--color-paper); }

/* ==========================================================================
   Terminformular (Eingabefelder, Knöpfe und Kästen im Stil des Dashboards:
   weiche Glasflächen, Pillen-Knöpfe in Türkis, Felder ohne Rand)
   ========================================================================== */
.termin-app {
  --t-teal-700: hsl(205 70% 26%); --t-teal-600: hsl(205 68% 34%); --t-teal-100: hsl(205 60% 94%);
  --t-soft: hsl(210 30% 50% / 0.08); --t-soft-2: hsl(210 30% 50% / 0.13);
  --t-glass: hsl(200 45% 99% / 0.86); --t-glass-border: hsl(0 0% 100% / 0.65);
  --t-shadow: 0 24px 60px -24px hsl(205 60% 15% / 0.35), inset 0 1px 0 hsl(0 0% 100% / 0.7);
  --t-ring: 0 0 0 2px var(--t-teal-600), 0 0 0 5px hsl(205 68% 34% / 0.15);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5);
}
.termin-app > *, .t-step { min-width: 0; }
.t-step, .t-set, .t-done, .t-summary { background: var(--t-glass); border: 1px solid var(--t-glass-border); border-radius: 20px; box-shadow: var(--t-shadow); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
.t-step { padding: var(--sp-5) var(--sp-6); }
.t-step h2 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); font-size: var(--fs-22); }
.t-step h2 span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t-teal-600); color: #fff; font: 600 var(--fs-14) var(--font-body); flex: none; }
.t-hint { margin: 0 0 var(--sp-3); color: var(--color-ink-soft); font-size: var(--fs-14); }
.t-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Auswahl-Knöpfe: Glas-Pille, gewählt = Türkis */
.t-chip, .t-cal-nav { appearance: none; border: 0; cursor: pointer; height: 40px; padding: 0 var(--sp-5); border-radius: 999px; background: hsl(0 0% 100% / 0.85); color: var(--color-ink); font: 600 var(--fs-14) var(--font-body); box-shadow: 0 2px 8px -3px hsl(205 50% 20% / 0.35); transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.t-chip:hover, .t-cal-nav:hover:not(:disabled) { background: #fff; box-shadow: 0 4px 12px -4px hsl(205 50% 20% / 0.4); }
.t-chip.is-on { background: var(--t-teal-600); color: #fff; box-shadow: 0 2px 8px -3px var(--t-teal-600); }
.t-chip:focus-visible, .t-cal-nav:focus-visible, .t-cal-day:focus-visible { outline: none; box-shadow: var(--t-ring); }
/* Anrede: Auswahl mit Chips, das Auswahlfeld selbst ist unsichtbar, bleibt aber bedienbar und prüfbar */
.anrede-regler { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.anrede-regler legend { font-size: var(--fs-14); font-weight: 600; color: var(--color-blue-900); padding: 0; margin-bottom: var(--sp-2); }
.anrede-regler label.t-chip { position: relative; display: inline-flex; align-items: center; }
.anrede-regler input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.anrede-regler label.t-chip:focus-within { box-shadow: var(--t-ring); }
/* Gewählte Anrede: dunkelblau mit weißer Schrift (die Türkis-Variable gibt es nur im Terminformular) */
.anrede-regler .t-chip.is-on { background: hsl(212 70% 28%); color: #fff; box-shadow: 0 2px 8px -3px hsl(212 70% 28%); }
/* Abholtermin: gewähltes Datum und gewählte Uhrzeit ebenso dunkelblau (die Türkis-Variable gibt es hier nicht) */
.formulare-app .t-cal-day.is-on, .formulare-app .t-chip.is-on { background: hsl(212 70% 28%); color: #fff; box-shadow: 0 2px 8px -3px hsl(212 70% 28%); }
/* Kalender */
.t-cal { max-width: 420px; width: 100%; box-sizing: border-box; padding: var(--sp-4); border-radius: 16px; background: var(--t-soft); }
.t-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.t-cal-head strong { font: 600 var(--fs-18) var(--font-display); color: var(--color-blue-900); }
.t-cal-nav { width: 40px; padding: 0; font-size: var(--fs-18); line-height: 1; }
.t-cal-nav:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.t-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.t-cal-wd { text-align: center; font-size: var(--fs-12); font-weight: 600; color: var(--color-ink-faint); padding: 4px 0; }
.t-cal-day { appearance: none; border: 0; aspect-ratio: 1; border-radius: 12px; background: transparent; color: hsl(210 10% 60%); font: 500 var(--fs-14) var(--font-body); cursor: default; position: relative; }
.t-cal-day.is-free { background: hsl(0 0% 100% / 0.9); color: var(--t-teal-700); font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px -4px hsl(205 50% 20% / 0.4); }
.t-cal-day.is-free:hover { background: var(--t-teal-100); }
.t-cal-day.is-on { background: var(--t-teal-600); color: #fff; }
/* Gewählter Tag bleibt blau, auch unter dem Mauszeiger (sonst gewinnt der Hover der freien Tage) */
.t-cal-day.is-free.is-on, .t-cal-day.is-free.is-on:hover { background: var(--t-teal-600); color: #fff; }
.formulare-app .t-cal-day.is-free.is-on, .formulare-app .t-cal-day.is-free.is-on:hover { background: hsl(212 70% 28%); color: #fff; }
.t-cal-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .6; }
/* Felder: weiche Fläche, kein Rand */
/* Angaben wie im Formular-Bereich: keine Karte um jede Person, Überschrift als Legende, Felder wie in den Formularen */
.termin-app fieldset.t-set { margin: var(--sp-6) 0 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; min-width: 0; }
.termin-app fieldset.t-set > legend { padding: 0; margin-bottom: var(--sp-4); font-size: var(--fs-16); font-weight: 600; color: var(--color-blue-900); }
.t-set { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); border-style: solid; }
.t-set legend { padding: 0 var(--sp-3); font-weight: 700; color: var(--color-blue-900); background: transparent; }
.t-ausweis { margin-top: var(--sp-3); }
.t-prev[hidden] { display: none; }
.t-prev { max-width: 260px; border-radius: 12px; margin-top: var(--sp-2); box-shadow: 0 6px 18px -8px hsl(205 50% 20% / 0.3); }
.t-summary { margin: var(--sp-5) 0 var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--t-teal-100); color: var(--color-blue-900); box-shadow: none; }
.t-check { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); font-size: var(--fs-14); }
.t-check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid hsl(210 16% 70%); background: hsl(0 0% 100% / 0.7) center / 12px no-repeat; cursor: pointer; }
.t-check input:checked { background-color: var(--t-teal-600); border-color: var(--t-teal-600); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.4l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.t-check input:focus-visible { outline: none; box-shadow: var(--t-ring); }
.termin-app .btn { height: 44px; padding: 0 var(--sp-6); border: 0; border-radius: 999px; font-size: var(--fs-16); }
.termin-app .btn-primary { background: var(--t-teal-600); color: #fff; box-shadow: 0 2px 8px -3px var(--t-teal-600); }
.termin-app .btn-primary:hover { background: var(--t-teal-700); box-shadow: 0 4px 12px -4px var(--t-teal-600); }
.termin-app .btn-secondary { background: hsl(0 0% 100% / 0.85); color: var(--color-ink); box-shadow: 0 2px 8px -3px hsl(205 50% 20% / 0.35); }
.termin-app .btn-secondary:hover { background: #fff; }
.termin-app .btn[disabled] { opacity: .5; cursor: not-allowed; }
.form-abholung { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); }
.form-abholung h3 { margin: 0; font-size: var(--fs-16); color: var(--color-blue-900); }
.form-hint { margin: 0; font-size: var(--fs-14); color: var(--color-ink-soft); }
.form-error { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: hsl(2 70% 94%); color: hsl(2 60% 32%); font-size: var(--fs-14); }
.t-done { padding: var(--sp-6); background: hsl(146 40% 95% / 0.9); }
.t-done h2 { margin-top: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .t-step { padding: var(--sp-4); } }

/* Willkommen: Karten werden dezent von links nach rechts eingeblendet */
.ex-cards.reveal { opacity: 1; transform: none; }
.ex-cards.reveal:not(.is-visible) .ex-card { opacity: 0; }
.ex-cards.reveal.is-visible .ex-card { animation: ex-in .7s var(--ease) both; }
.ex-cards.reveal.is-visible .ex-card:nth-child(1) { animation-delay: .05s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(2) { animation-delay: .15s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(3) { animation-delay: .25s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(4) { animation-delay: .35s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(5) { animation-delay: .45s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(6) { animation-delay: .55s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(7) { animation-delay: .65s; }
.ex-cards.reveal.is-visible .ex-card:nth-child(8) { animation-delay: .75s; }
@keyframes ex-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { @keyframes ex-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } }
@media (prefers-reduced-motion: reduce) { .ex-cards.reveal .ex-card { animation: none !important; opacity: 1 !important; } }

.contact-people li.oez-heute { border: 1px solid var(--color-green-600); }
#oez-woche li > strong { font-weight: 400; font-size: var(--fs-14); color: var(--color-ink-soft); }
#oez-woche li > span { font-weight: 700; font-size: var(--fs-16); }

/* Kontaktkarten: Überschrift, Text und Telefon/E-Mail liegen auf gleicher Höhe (ab Tablet-Breite) */
@media (min-width: 900px) {
  .contact-grid { grid-template-rows: auto auto auto; }
  .contact-grid > .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .contact-grid > .card > .card-body { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
}

/* Breite Ansicht: Bild neben Text größer, füllt die Spalte */
@media (min-width: 1400px) {
  .split:has(.split-media) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split-media { min-height: 480px; }
  .split-media img { width: 100%; object-fit: cover; }
}
@media (min-width: 1700px) {
  .split-media { min-height: 560px; }
}