/* =====================================================================
   Zeitlos Bestattungen — Main Stylesheet
   Glass + Drift + warme Erdtöne. Tokens stehen in style.css.
   ===================================================================== */

/* ---------- 0a. Self-hosted Italianno (verhindert Google-Fonts-Flash) ---------- */

@font-face {
  font-family: 'Italianno';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/italianno.woff2') format('woff2');
  font-display: swap;
  /* swap: zeigt erst Fallback, swappt sobald Italianno geladen.
     Da Italianno jetzt vom selben Server kommt (~36KB), passiert das in <50ms.
     Kein DNS-Lookup zu Google mehr → kein langer Comic-Sans-Flash. */
}

/* ---------- 0. Reset & Basics ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Spacer für fixed site-top */
  padding-top: var(--zl-top-h, 0px);
}

/* Fullscreen-Pages (Sternenhimmel, Kundenportal) brauchen keinen Spacer */
body.sky-fullscreen,
body.bkp-portal-body {
  padding-top: 0;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-text); }

::selection { background: var(--color-accent); color: #fff; }

/* ---------- 1. Typografie ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--ls-title);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; letter-spacing: var(--ls-wide); text-transform: uppercase; }

p { margin: 0 0 1.2em; }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--color-text-soft);
  font-weight: 300;
}

blockquote {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-text-soft);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

hr.zl-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-line), transparent);
  margin: var(--space-6) auto;
  max-width: 320px;
}

/* ---------- 2. Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container.narrow { max-width: var(--container-narrow); }
.container.text   { max-width: var(--container-text); }

.section {
  padding: var(--section-py) 0;
  position: relative;
}

@media (max-width: 768px) {
  .section { padding: var(--section-py-mobile) 0; }
}

.section.surface-alt { background: var(--color-bg-alt); }
.section.surface-deep { background: var(--color-bg-deep); }

/* ---------- 3. Hintergrund-Layer (Begleiter-Drift, Erdton-Variante) ---------- */

.bg-layers {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-layers > div {
  position: absolute;
  inset: -10%;
}
.bg-radial-accent {
  background-image: radial-gradient(
    circle at 75% 80%,
    var(--bg-radial-accent) 0%,
    transparent 55%
  );
}
.bg-radial-soft {
  background-image: radial-gradient(
    circle at 20% 30%,
    var(--bg-radial-soft) 0%,
    transparent 55%
  );
}
.bg-radial-warm {
  background-image: radial-gradient(
    circle at 90% 0%,
    var(--bg-radial-warm) 0%,
    transparent 50%
  );
}
.bg-radial-subtle {
  background-image: radial-gradient(
    circle at 50% 100%,
    var(--bg-radial-subtle) 0%,
    transparent 55%
  );
}
.bg-grain {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.bg-drift { animation: drift 42s ease-in-out infinite alternate; }

@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.10); }
}

/* ---------- 4. Glass-Card ---------- */

.card {
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.92) 0%,
              rgba(255, 255, 255, 0.82) 100%);
  border: 1px solid rgba(23, 23, 78, 0.18);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card-glass);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.card:hover { box-shadow: var(--shadow-hover-glass); }

.card.tight { padding: var(--space-4); }
.card.relaxed { padding: var(--space-6); }
.card.interactive { cursor: pointer; }
.card.interactive:hover { transform: translateY(-2px); }

.surface-soft {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(23, 23, 78, 0.16);
  border-radius: var(--radius-m);
  padding: var(--space-4);
}
.surface-tint {
  background: rgba(23, 23, 78, 0.05);
  border: 1px solid rgba(23, 23, 78, 0.15);
  border-radius: var(--radius-m);
  padding: var(--space-4);
}

/* ---------- 5. Buttons ---------- */

.btn,
button.btn,
input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--ls-title);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), filter var(--t-base), box-shadow var(--t-base), background var(--t-base), color var(--t-base);
  text-decoration: none;
  line-height: 1.2;
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #FFF;
  border-color: rgba(13, 13, 54, 0.4);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); color: #FFF; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-accent-dark);
  border-color: rgba(23, 23, 78, 0.32);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  border-color: rgba(13, 13, 54, 0.45);
}

.btn-quiet {
  background: transparent;
  color: var(--color-text-soft);
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
}
.btn-quiet:hover { color: var(--color-accent-dark); }

.btn-emergency {
  background: var(--color-emergency);
  color: #FFF;
  border-color: rgba(168, 92, 74, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 6px rgba(168, 92, 74, 0.15),
    0 12px 24px -10px rgba(168, 92, 74, 0.50);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.btn-emergency:hover { color: #FFF; filter: brightness(1.06); transform: translateY(-1px); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.92rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ---------- 6. Header / Notfall-Banner ---------- */

/* ── Topbar / Notfall-Bar ──────────────────────────────────────────── */
.notfall-bar {
  position: relative;
  background:
    linear-gradient(180deg, rgba(13, 13, 54, 0.96), rgba(23, 23, 78, 0.96));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

/* Goldener Hairline-Akzent unten */
.notfall-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 95, 0.55) 30%,
    rgba(212, 175, 95, 0.55) 70%,
    transparent 100%);
  pointer-events: none;
}

.notfall-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.55rem var(--space-4);
}

/* Notfall-Badge mit pulsierendem Dot */
.notfall-bar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.notfall-bar__pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5b48;
  box-shadow: 0 0 8px rgba(255, 91, 72, 0.6);
}
.notfall-bar__pulse::before,
.notfall-bar__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff5b48;
  opacity: 0.6;
  animation: zl-notfall-pulse 2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.notfall-bar__pulse::after { animation-delay: 1s; }

@keyframes zl-notfall-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.notfall-bar strong {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.10em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.notfall-bar__text {
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  font-family: var(--ff-italic, 'Cormorant Garamond', serif);
  font-size: 0.98rem;
  position: relative;
  padding-left: 1rem;
}
.notfall-bar__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
}

/* CTA-Pill mit Telefon */
.notfall-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.85rem 0.32rem 0.7rem;
  background: rgba(212, 175, 95, 0.14);
  border: 1px solid rgba(212, 175, 95, 0.45);
  border-radius: 999px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  white-space: nowrap;
}
.notfall-bar__cta svg { color: rgba(212, 175, 95, 0.95); transition: color 220ms ease; }
.notfall-bar__cta:hover,
.notfall-bar__cta:focus-visible {
  background: rgba(212, 175, 95, 0.92);
  border-color: rgba(212, 175, 95, 1);
  color: var(--color-accent-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(212, 175, 95, 0.45);
  outline: none;
}
.notfall-bar__cta:hover svg,
.notfall-bar__cta:focus-visible svg { color: var(--color-accent-dark); }

/* Mobile: kompakter */
@media (max-width: 640px) {
  .notfall-bar__inner { gap: 0.6rem; padding: 0.5rem var(--space-3); }
  .notfall-bar__text { display: none; }
  .notfall-bar__cta { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .notfall-bar__pulse::before,
  .notfall-bar__pulse::after { animation: none; opacity: 0; }
}

/* Notfall-Bar + Site-Header als fixed-Group, damit beide IMMER oben kleben.
   Body bekommt padding-top = Höhe von .site-top (per JS gesetzt). */
.site-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
}

.site-header {
  position: relative;
  background: rgba(245, 241, 234, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(23, 23, 78, 0.14);
  transition: background var(--t-base), border-color var(--t-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* horizontales Padding NICHT auf 0 setzen — sonst klebt der Header am Rand */
  padding: var(--space-3) var(--space-4);
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--color-text);
}
.site-logo__title {
  font-family: var(--ff-heading);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
}
.site-logo__subtitle {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-top: 4px;
}
.site-logo img { max-height: 56px; }

/* Main Nav */
.main-nav { display: flex; align-items: center; gap: var(--space-4); }
.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.main-nav__list li { position: relative; }
.main-nav__list a {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  color: var(--color-text);
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.main-nav__list a:hover,
.main-nav__list .current-menu-item > a,
.main-nav__list .current-menu-parent > a,
.main-nav__list .current-menu-ancestor > a {
  background: rgba(23, 23, 78, 0.10);
  color: var(--color-accent-dark);
}
.main-nav__list .menu-item-has-children > a::after {
  content: " ⌄";
  font-size: 0.7em;
  position: relative;
  top: -2px;
  opacity: 0.55;
}
.main-nav__list ul.sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(23, 23, 78, 0.18);
  border-radius: var(--radius-m);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  backdrop-filter: blur(12px);
}
.main-nav__list li:hover > ul.sub-menu,
.main-nav__list li:focus-within > ul.sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.main-nav__list ul.sub-menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  border-radius: var(--radius-s);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--color-accent);
  padding: 6px;
  border-radius: var(--radius-m);
  cursor: pointer;
  line-height: 0;
}
.menu-toggle svg { width: 28px; height: 28px; display: block; }
.menu-toggle:hover { color: var(--color-accent-dark); }

/* Header rechte Seite — runde Action-Buttons (Kontakt + Telefon) */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 23, 78, 0.25);
  color: var(--color-accent);
  text-decoration: none;
  position: relative;
  box-shadow: 0 2px 8px rgba(23, 23, 78, 0.06);
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms ease,
    color 220ms ease;
}
.header-action svg { display: block; }

.header-action:hover,
.header-action:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(23, 23, 78, 0.45);
  outline: none;
}

/* Telefon-Button bekommt einen sanften Pulse-Akzent */
.header-action--tel {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border-color: rgba(13, 13, 54, 0.45);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(23, 23, 78, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.header-action--tel:hover,
.header-action--tel:focus-visible {
  filter: brightness(1.08);
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border-color: rgba(13, 13, 54, 0.6);
  color: #fff;
}

/* Mobile Nav */
@media (max-width: 992px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: rgba(245, 241, 234, 0.98); border-bottom: 1px solid rgba(23, 23, 78, 0.18); padding: var(--space-3) var(--space-4); display: none; flex-direction: column; align-items: stretch; backdrop-filter: blur(12px); }
  .main-nav.is-open { display: flex; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav__list a { padding: 0.85rem 0.5rem; border-radius: 0; border-bottom: 1px solid rgba(23, 23, 78, 0.10); }
  .main-nav__list ul.sub-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 var(--space-3);
  }
  .header-action { width: 38px; height: 38px; }
  .header-action svg { width: 18px; height: 18px; }
}

/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 9vw, 120px);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 992px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.hero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.hero__title em {
  font-style: italic;
  color: var(--color-accent-dark);
}
.hero__lead {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--color-text-soft);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-hover-glass);
  aspect-ratio: 4 / 5;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(42, 37, 32, 0.25) 100%);
  pointer-events: none;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 8. Section-Titel / Eyebrow ---------- */

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-6);
}
.section-head .eyebrow { text-align: center; }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { color: var(--color-text-soft); }

.divider-floral {
  width: 60px;
  height: 14px;
  margin: var(--space-3) auto;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' fill='none' stroke='%2317174e' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 7 H22'/%3E%3Ccircle cx='30' cy='7' r='3'/%3E%3Cpath d='M27 7 a3 3 0 0 0 6 0' fill='%2317174e'/%3E%3Cpath d='M38 7 H60'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}

/* ---------- 9. Service / Bestattungsart Cards ---------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.service-card .card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  color: #FFF;
  box-shadow: 0 8px 18px -8px rgba(13, 13, 54, 0.45);
}
.service-card .card-icon svg { width: 28px; height: 28px; }
.service-card h3 {
  font-size: 1.35rem;
  margin: 0;
}
.service-card p { color: var(--color-text-soft); flex: 1; }
.service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: var(--ls-title);
  color: var(--color-accent-dark);
}
.service-card .card-link::after {
  content: "→";
  transition: transform var(--t-fast);
}
.service-card:hover .card-link::after { transform: translateX(4px); }

/* Bestattungsart-spezifische Karten — leichter, mit Bild */
.bestattung-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bestattung-card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg-deep));
  position: relative;
}
.bestattung-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bestattung-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.bestattung-card__body h3 {
  font-size: 1.4rem;
  margin: 0;
}
.bestattung-card__body p {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}
.bestattung-card__link {
  color: var(--color-accent-dark);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: var(--ls-title);
  margin-top: var(--space-2);
}

/* ---------- 10. Standort / Kontakt-Card ---------- */

.standort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.standort-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.standort-card h3 {
  font-size: 1.3rem;
  margin: 0 0 var(--space-2);
}
.standort-card .addr {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.5;
}
.standort-card .hours {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.standort-card .actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- 11. CTA-Streifen ---------- */

.cta-strip {
  background: linear-gradient(135deg, rgba(23, 23, 78, 0.08), rgba(58, 58, 120, 0.10));
  border-block: 1px solid rgba(23, 23, 78, 0.18);
  padding: var(--space-7) 0;
  text-align: center;
}
.cta-strip h2 { margin-bottom: var(--space-3); }
.cta-strip p { color: var(--color-text-soft); max-width: 56ch; margin: 0 auto var(--space-4); }

/* ---------- 12. Inhalts-Seite (page.php / single.php) ---------- */

.page-hero {
  padding: var(--space-7) 0 var(--space-5);
  text-align: center;
}
.page-hero .breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.page-hero .breadcrumb a { color: var(--color-text-muted); }
.page-hero .breadcrumb a:hover { color: var(--color-accent-dark); }
.page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.page-hero .lead { max-width: 60ch; margin: var(--space-3) auto 0; }

.content-prose {
  max-width: var(--container-text);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
}
.content-prose > * + * { margin-top: 1.4em; }
.content-prose h2 { font-size: 1.9rem; margin-top: 2em; margin-bottom: 0.6em; }
.content-prose h3 { font-size: 1.4rem; margin-top: 1.8em; margin-bottom: 0.5em; }
.content-prose img, .content-prose figure {
  border-radius: var(--radius-l);
  overflow: hidden;
  margin: var(--space-5) 0;
  box-shadow: var(--shadow-card-glass);
}
.content-prose figure figcaption {
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-text-muted);
  padding-top: var(--space-2);
}
.content-prose ul, .content-prose ol { padding-left: 1.3em; }
.content-prose li { margin-bottom: 0.4em; }
.content-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 0.95rem;
}
.content-prose th, .content-prose td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-line);
}
.content-prose th { font-weight: 600; color: var(--color-text); background: rgba(255, 255, 255, 0.5); }

/* Side-by-side Layout für längere Themenseiten */
.layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.layout-aside aside {
  position: sticky;
  top: 100px;
  align-self: start;
}
@media (max-width: 992px) {
  .layout-aside { grid-template-columns: 1fr; }
  .layout-aside aside { position: static; }
}

/* ---------- 13. Formulare (für WPForms + native) ---------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="password"],
textarea, select,
.wpforms-field-text input, .wpforms-field-email input, .wpforms-field-phone input,
.wpforms-field-textarea textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 23, 78, 0.28);
  border-radius: var(--radius-m);
  padding: 0.85rem 1rem;
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--ff-body);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-base);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #FFF;
  box-shadow: 0 0 0 3px rgba(23, 23, 78, 0.16);
}
textarea { min-height: 140px; resize: vertical; }
label { display: block; font-size: 0.88rem; letter-spacing: 0.03em; color: var(--color-text-soft); margin-bottom: 0.4rem; font-weight: 500; }

.wpforms-submit-container button.wpforms-submit {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  color: #FFF !important;
  border: 1px solid rgba(13, 13, 54, 0.4) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.85rem 2rem !important;
  font-weight: 500 !important;
  font-family: var(--ff-body) !important;
  letter-spacing: var(--ls-title) !important;
  box-shadow: var(--shadow-btn) !important;
  cursor: pointer !important;
  transition: transform var(--t-fast), filter var(--t-base) !important;
}
.wpforms-submit-container button.wpforms-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* =====================================================================
   13b. WPForms · vollständiger Theme-Look
   ===================================================================== */

/* Container als Glass-Card */
.wpforms-container,
div.wpforms-container-full {
  max-width: 720px !important;
  margin: var(--space-5) auto var(--space-6) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.55)) !important;
  border: 1px solid rgba(23, 23, 78, 0.12) !important;
  border-radius: var(--radius-l) !important;
  padding: clamp(1.5rem, 4vw, 2.5rem) !important;
  box-shadow:
    0 20px 50px -20px rgba(23, 23, 78, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Form-Wrapper resetten */
.wpforms-form { font-family: var(--ff-body) !important; }
.wpforms-field-container { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; }

/* Einzelne Felder */
.wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
}

/* Labels */
.wpforms-field label.wpforms-field-label,
.wpforms-field-label {
  display: block !important;
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-soft) !important;
  margin-bottom: 0.5rem !important;
}

/* Pflichtfeld-Sternchen */
.wpforms-field label .wpforms-required-label,
.wpforms-required-label {
  color: var(--color-accent) !important;
  margin-left: 0.25rem !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}

/* Alle Input-Felder einheitlich */
.wpforms-container input.wpforms-field-medium,
.wpforms-container input.wpforms-field-large,
.wpforms-container input.wpforms-field-small,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container input[type="date"],
.wpforms-container textarea,
.wpforms-container select,
.wpforms-field-name .wpforms-field-row input,
.wpforms-field-date-time input.wpforms-datepicker {
  width: 100% !important;
  max-width: 100% !important;
  background: #fff !important;
  border: 1px solid rgba(23, 23, 78, 0.22) !important;
  border-radius: var(--radius-m) !important;
  padding: 0.9rem 1.1rem !important;
  color: var(--color-text) !important;
  font-size: 1rem !important;
  font-family: var(--ff-body) !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 2px rgba(23, 23, 78, 0.04) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(23, 23, 78, 0.14) !important;
}

.wpforms-container textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Number-Stepper sauber */
.wpforms-container input[type="number"] {
  max-width: 100% !important;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Name-Field (Simple): voll genutzt */
.wpforms-field-name.format-simple .wpforms-field-row { width: 100% !important; }

/* Sublabels (Name/Email-Combos) */
.wpforms-field-sublabel {
  font-size: 0.75rem !important;
  color: var(--color-text-soft) !important;
  margin-top: 0.3rem !important;
  letter-spacing: 0.02em !important;
}

/* Submit-Container: zentriert + Abstand */
.wpforms-submit-container {
  margin-top: 1.5rem !important;
  text-align: center !important;
}

/* Datepicker-Icon im Date-Field */
.wpforms-field-date-time {
  position: relative;
}
.wpforms-field-date-time .flatpickr-input {
  padding-right: 2.6rem !important;
}

/* Flatpickr-Kalender im Markenstil */
.flatpickr-calendar {
  border-radius: var(--radius-m) !important;
  border: 1px solid rgba(23, 23, 78, 0.18) !important;
  box-shadow: 0 24px 48px -16px rgba(23, 23, 78, 0.28) !important;
  font-family: var(--ff-body) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.flatpickr-day.today {
  border-color: var(--color-accent) !important;
}

/* Fehler-States */
.wpforms-container .wpforms-error-container,
.wpforms-container label.wpforms-error {
  color: #b54a3a !important;
  font-size: 0.85rem !important;
  margin-top: 0.4rem !important;
}
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error {
  border-color: #b54a3a !important;
}

/* Bestätigungs-Box nach Submit */
.wpforms-confirmation-container-full,
div[id^="wpforms-confirmation"] {
  background: linear-gradient(135deg, rgba(58, 58, 120, 0.08), rgba(23, 23, 78, 0.12)) !important;
  border: 1px solid rgba(23, 23, 78, 0.22) !important;
  border-radius: var(--radius-l) !important;
  padding: clamp(1.5rem, 4vw, 2.5rem) !important;
  color: var(--color-text) !important;
  text-align: center !important;
}
.wpforms-confirmation-container-full p { margin: 0 !important; font-size: 1.05rem; }

/* ---------- 14. Footer ---------- */

.site-footer {
  background: var(--color-bg-deep);
  border-top: 1px solid rgba(23, 23, 78, 0.18);
  padding: var(--space-7) 0 var(--space-5);
  margin-top: 0;
  color: var(--color-text-soft);
  font-size: 0.92rem;
}
.site-footer h4 {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 992px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
.site-footer a { color: var(--color-text-soft); }
.site-footer a:hover { color: var(--color-accent-dark); }

/* Footer-Logo (statt Text-Schriftzug) */
.footer-logo {
  display: inline-block;
  max-width: 200px;
}
.footer-logo__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .footer-logo { max-width: 160px; }
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 0.45rem; }

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(23, 23, 78, 0.18);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ---------- 15. Animationen ---------- */

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.fade-up { animation: fadeUp 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.fade-in { animation: fadeIn 700ms ease both; }
.fade-up-delay-1 { animation-delay: 120ms; }
.fade-up-delay-2 { animation-delay: 240ms; }
.fade-up-delay-3 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .bg-drift, .fade-up, .fade-in { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- 16. Utilities ---------- */

.text-center { text-align: center; }
.text-soft { color: var(--color-text-soft); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent-dark); }
.text-emergency { color: var(--color-emergency); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

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

/* =====================================================================
   17. FULLWIDTH HERO-BANNER (mit Video oder Bild als Hintergrund)
   ===================================================================== */

.hero-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(420px, 60vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-banner.short  { min-height: clamp(320px, 42vh, 460px); }
.hero-banner.tall   { min-height: clamp(540px, 80vh, 900px); }

.hero-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-banner__bg img,
.hero-banner__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* natürliches Foto — nur leichte Abdunklung fürs Textkontrast, keine Entsättigung */
  filter: brightness(0.9);
  transform: scale(1.04);
  animation: heroPan 28s ease-in-out infinite alternate;
}

@keyframes heroPan {
  0%   { transform: scale(1.04) translate3d(-1%, 0, 0); }
  100% { transform: scale(1.08) translate3d(1%, -1%, 0); }
}

.hero-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* nur ruhiger dunkler Verlauf fürs Textkontrast — kein heller Beige-Schleier mehr
     (der ließ das Foto ausgeblichen/milchig wirken) */
  background:
    linear-gradient(180deg, rgba(20, 18, 26, 0.24) 0%, rgba(20, 18, 26, 0.52) 100%);
  pointer-events: none;
}

.hero-banner__content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: #FFF;
}
.hero-banner__content .eyebrow {
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.2em;
}
.hero-banner__content h1,
.hero-banner__content h2 {
  color: #FFF;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  font-weight: 400;
  margin-bottom: var(--space-3);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
}
.hero-banner__content h1 em,
.hero-banner__content h2 em {
  color: #E4DAC8;
  font-style: italic;
}
.hero-banner__content p {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 56ch;
  margin: 0 auto var(--space-4);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}
.hero-banner__content .btn-row {
  justify-content: center;
}
.hero-banner__content .btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
}
.hero-banner__content .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFF;
}

.hero-banner.left .hero-banner__content { text-align: left; margin-right: auto; padding-left: max(var(--space-4), 8vw); padding-right: var(--space-4); }
.hero-banner.left .hero-banner__content .btn-row { justify-content: flex-start; }
.hero-banner.left .hero-banner__content p { margin-left: 0; }

/* Floral-Divider in weiß */
.hero-banner__content .divider-floral {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' fill='none' stroke='%23E4DAC8' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 7 H22'/%3E%3Ccircle cx='30' cy='7' r='3'/%3E%3Cpath d='M27 7 a3 3 0 0 0 6 0' fill='%23E4DAC8'/%3E%3Cpath d='M38 7 H60'/%3E%3C/svg%3E");
  opacity: 0.9;
}

/* =====================================================================
   18. SECTION-TINTS — leichte farbliche Trennung benachbarter Sections
   ===================================================================== */

.section.tint-1 {
  background:
    linear-gradient(180deg, rgba(244, 232, 213, 0.55), rgba(244, 232, 213, 0.35)),
    radial-gradient(ellipse at 80% 0%, rgba(58, 58, 120, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(23, 23, 78, 0.10) 0%, transparent 60%);
  position: relative;
}
.section.tint-2 {
  background:
    linear-gradient(180deg, rgba(237, 230, 219, 0.60), rgba(228, 218, 200, 0.45)),
    radial-gradient(ellipse at 10% 20%, rgba(23, 23, 78, 0.14) 0%, transparent 60%);
  position: relative;
}
.section.tint-3 {
  background:
    linear-gradient(180deg, rgba(228, 218, 200, 0.55), rgba(237, 230, 219, 0.35)),
    radial-gradient(ellipse at 70% 90%, rgba(58, 58, 120, 0.16) 0%, transparent 55%);
  position: relative;
}
.section.tint-warm {
  background:
    linear-gradient(135deg, rgba(58, 58, 120, 0.20), rgba(244, 232, 213, 0.35)),
    radial-gradient(ellipse at 30% 50%, rgba(168, 92, 74, 0.05) 0%, transparent 55%);
  position: relative;
}

/* Übergangs-Wellen zwischen Sections */
.section::before,
.section::after {
  content: none;
}
.section.has-wave-top::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 32px;
  background: inherit;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 50%);
          mask: linear-gradient(180deg, transparent 0%, #000 50%);
  pointer-events: none;
}

/* =====================================================================
   19. SECTION mit zarter Hintergrund-Foto
   ===================================================================== */

.section.bg-photo {
  position: relative;
  overflow: hidden;
}
.section.bg-photo > .container { position: relative; z-index: 2; }
.section.bg-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--bg-photo-url, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.10;
  filter: saturate(0.7);
}
.section.bg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--color-bg) 0%, transparent 12%, transparent 88%, var(--color-bg) 100%);
  pointer-events: none;
}

@media (max-width: 992px) {
  .section.bg-photo::before { background-attachment: scroll; opacity: 0.12; }
}

/* =====================================================================
   20. Glow / Glitter-Effekte für Cards & Buttons
   ===================================================================== */

.card.glow-hover { position: relative; }
.card.glow-hover::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(58, 58, 120, 0.45), transparent 40%, transparent 60%, rgba(23, 23, 78, 0.35));
  opacity: 0;
  z-index: -1;
  transition: opacity var(--t-base);
  filter: blur(14px);
}
.card.glow-hover:hover::after { opacity: 0.9; }

.btn-primary {
  position: relative;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity var(--t-base);
}
.btn-primary:hover::before { opacity: 0.6; }

/* Reveal-Animation (kommt bei scroll-in dazu, JS setzt is-visible) */
/* Standard: sichtbar. Nur wenn JS die Animation freischaltet (html.zl-anim)
   werden noch-nicht-sichtbare Elemente ausgeblendet — so bleibt bei JS-/
   Observer-Problemen nichts unsichtbar hängen. */
.reveal { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
/* Versteckter Zustand OHNE Opacity — nur leichte Verschiebung. So bleibt der
   Inhalt immer voll sichtbar, selbst wenn der Reveal nie feuert. */
html.zl-anim .reveal:not(.is-visible) { transform: translateY(16px); }

/* =====================================================================
   21. ORNAMENTE — florale Ecken, Filigran, vintage Luxus
   ===================================================================== */

/* --- Großer florale Section-Divider (zwischen Sections) --- */
.divider-baroque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  margin: var(--space-5) auto;
  color: var(--color-accent);
}
.divider-baroque::before,
.divider-baroque::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
  opacity: 0.45;
}
.divider-baroque svg {
  width: 64px;
  height: 28px;
  flex-shrink: 0;
}

.divider-vine {
  height: 56px;
  margin: var(--space-4) auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  max-width: 380px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 56' fill='none' stroke='%2317174e' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M10 28 Q60 18 100 28 T190 28 T280 28 T370 28'/%3E%3Ccircle cx='190' cy='28' r='5' fill='%2317174e' opacity='0.6'/%3E%3Cpath d='M188 23 Q190 16 192 23 M188 33 Q190 40 192 33 M183 28 Q176 26 180 32 M197 28 Q204 26 200 32' opacity='0.7'/%3E%3Cpath d='M50 28 Q40 18 30 22 M50 28 Q40 38 30 34' opacity='0.5'/%3E%3Cpath d='M330 28 Q340 18 350 22 M330 28 Q340 38 350 34' opacity='0.5'/%3E%3Ccircle cx='100' cy='28' r='2' fill='%2317174e' opacity='0.5'/%3E%3Ccircle cx='280' cy='28' r='2' fill='%2317174e' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.85;
}

/* Inline-Variante (kleiner Akzent neben Headings) */
.flourish-inline {
  display: inline-block;
  width: 84px;
  height: 14px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
}
.flourish-inline.flip { transform: scaleX(-1); }

/* --- Ornate Section-Corner-Decorations --- */
.section.ornate {
  position: relative;
}
.section.ornate > .ornament-corner {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
}
.section.ornate > .ornament-corner.tl { top: 12px;    left: 12px;   }
.section.ornate > .ornament-corner.tr { top: 12px;    right: 12px;  transform: scaleX(-1); }
.section.ornate > .ornament-corner.bl { bottom: 12px; left: 12px;   transform: scaleY(-1); }
.section.ornate > .ornament-corner.br { bottom: 12px; right: 12px;  transform: scale(-1, -1); }

.section.ornate > .container { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .section.ornate > .ornament-corner { width: 70px; height: 70px; opacity: 0.4; }
}

/* --- Headline ruhig zentriert, kein flex, kein Schnörkel --- */
.heading-ornate {
  display: block;
  text-align: center;
  position: relative;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* --- Drop-Cap im Fließtext (erste Absatz-Letter groß und ornamental) --- */
.has-dropcap p:first-of-type::first-letter,
.dropcap::first-letter {
  font-family: var(--ff-heading);
  font-size: 4.6rem;
  font-weight: 500;
  line-height: 0.88;
  float: left;
  padding: 4px 12px 0 0;
  margin-top: 4px;
  color: var(--color-accent-dark);
  text-shadow: 1px 1px 0 rgba(58, 58, 120, 0.5);
}

/* --- Pull-Quote / Großes Zitat im vintage Stil --- */
.pull-quote {
  position: relative;
  text-align: center;
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.35;
  color: var(--color-text);
  max-width: 720px;
  margin: var(--space-7) auto;
  padding: var(--space-5) var(--space-5);
}
.pull-quote::before,
.pull-quote::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' fill='none' stroke='%2317174e' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 14 Q8 4 16 8 Q24 12 28 14 Q32 16 40 12 Q48 8 54 14'/%3E%3Ccircle cx='28' cy='14' r='2' fill='%2317174e'/%3E%3Cpath d='M26 12 Q28 8 30 12 M26 16 Q28 20 30 16' opacity='0.7'/%3E%3C/svg%3E");
  opacity: 0.7;
}
.pull-quote::before { top: 0; left: 50%; transform: translateX(-50%); }
.pull-quote::after  { bottom: 0; left: 50%; transform: translateX(-50%) scaleY(-1); }
.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--ff-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* --- Eyebrow mit Sternchen / Diamantpunkten --- */
.eyebrow.ornate::before,
.eyebrow.ornate::after {
  content: "❖";
  display: inline-block;
  margin: 0 8px;
  color: var(--color-accent);
  font-size: 0.7em;
  opacity: 0.7;
  vertical-align: middle;
}

/* --- Ornate Card Frame: subtile Goldlinie + Eckakzente --- */
.card.ornate-frame {
  position: relative;
  padding: var(--space-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84));
}
.card.ornate-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(23, 23, 78, 0.25);
  border-radius: calc(var(--radius-l) - 6px);
  pointer-events: none;
}
.card.ornate-frame .ornament-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
  opacity: 0.75;
}
.card.ornate-frame .ornament-corner.tl { top: 4px;    left: 4px; }
.card.ornate-frame .ornament-corner.tr { top: 4px;    right: 4px; transform: scaleX(-1); }
.card.ornate-frame .ornament-corner.bl { bottom: 4px; left: 4px;  transform: scaleY(-1); }
.card.ornate-frame .ornament-corner.br { bottom: 4px; right: 4px; transform: scale(-1, -1); }

/* --- Aufwendiger Hero-Frame innerhalb hero-banner --- */
.hero-banner__frame {
  position: absolute;
  inset: 36px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  pointer-events: none;
  z-index: 1;
}
.hero-banner__frame::before,
.hero-banner__frame::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M0 8 Q4 4 8 0 M0 16 Q8 16 16 8 Q16 0 24 0 M8 0 Q16 8 8 16 M16 8 Q24 8 24 16 Q32 16 32 8 Q32 4 28 4'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23ffffff' opacity='0.7'/%3E%3C/svg%3E");
}
.hero-banner__frame::before { top: -4px; left: -4px; }
.hero-banner__frame::after  { top: -4px; right: -4px; transform: scaleX(-1); }

.hero-banner__frame-b::before,
.hero-banner__frame-b::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M0 8 Q4 4 8 0 M0 16 Q8 16 16 8 Q16 0 24 0 M8 0 Q16 8 8 16 M16 8 Q24 8 24 16 Q32 16 32 8 Q32 4 28 4'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23ffffff' opacity='0.7'/%3E%3C/svg%3E");
}
.hero-banner__frame-b {
  position: absolute;
  inset: 36px;
  pointer-events: none;
  z-index: 1;
}
.hero-banner__frame-b::before { bottom: -4px; left: -4px;  transform: scaleY(-1); }
.hero-banner__frame-b::after  { bottom: -4px; right: -4px; transform: scale(-1, -1); }

@media (max-width: 768px) {
  .hero-banner__frame { inset: 16px; }
  .hero-banner__frame-b { inset: 16px; }
}

/* --- Floating-Ranken (kleine SVG-Elemente die vor Sections rotieren) --- */
.floating-leaf {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  opacity: 0.35;
  animation: floatLeaf 18s ease-in-out infinite alternate;
}
.floating-leaf.l1 { top: 8%;  left: 4%;  }
.floating-leaf.l2 { top: 60%; right: 5%; animation-delay: -6s; }
.floating-leaf.l3 { bottom: 8%; left: 12%; animation-delay: -12s; transform: rotate(40deg); }

@keyframes floatLeaf {
  0%   { transform: translate3d(0, 0, 0)   rotate(0deg)  scale(1.0); }
  100% { transform: translate3d(8px, -10px, 0) rotate(8deg) scale(1.06); }
}

/* --- Side-Ranken am Section-Rand (vertikal, links/rechts) --- */
.section.has-side-vines::before,
.section.has-side-vines::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 120px;
  height: 80%;
  max-height: 600px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.42;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 600' fill='none' stroke='%2317174e' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M60 0 Q40 50 60 100 Q80 150 60 200 Q40 250 60 300 Q80 350 60 400 Q40 450 60 500 Q80 550 60 600'/%3E%3Cpath d='M60 50 Q30 50 24 38 Q22 28 32 30 M60 50 Q40 36 44 22' opacity='0.7'/%3E%3Cpath d='M60 150 Q90 150 96 138 Q98 128 88 130 M60 150 Q80 136 76 122' opacity='0.7'/%3E%3Cpath d='M60 250 Q30 250 24 238 Q22 228 32 230 M60 250 Q40 236 44 222' opacity='0.7'/%3E%3Cpath d='M60 350 Q90 350 96 338 Q98 328 88 330 M60 350 Q80 336 76 322' opacity='0.7'/%3E%3Cpath d='M60 450 Q30 450 24 438 Q22 428 32 430 M60 450 Q40 436 44 422' opacity='0.7'/%3E%3Cpath d='M60 550 Q90 550 96 538 Q98 528 88 530 M60 550 Q80 536 76 522' opacity='0.7'/%3E%3Ccircle cx='60' cy='100' r='4' fill='%2317174e' opacity='0.5'/%3E%3Ccircle cx='60' cy='300' r='4' fill='%2317174e' opacity='0.5'/%3E%3Ccircle cx='60' cy='500' r='4' fill='%2317174e' opacity='0.5'/%3E%3C/svg%3E");
}
.section.has-side-vines::before { left: -40px; }
.section.has-side-vines::after  { right: -40px; transform: translateY(-50%) scaleX(-1); }

@media (max-width: 1100px) {
  .section.has-side-vines::before,
  .section.has-side-vines::after { display: none; }
}

/* --- Sektion: ornamental separator above (decorative top accent) --- */
.section-ornament-top {
  text-align: center;
  margin: 0 auto var(--space-4);
  width: 100%;
}
.section-ornament-top svg {
  width: 200px;
  height: 36px;
  opacity: 0.7;
  color: var(--color-accent);
}

/* --- "Card.feature" für besonders auffällige Service-Cards --- */
.card.feature {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
    radial-gradient(circle at 50% 0%, rgba(58, 58, 120, 0.20), transparent 60%);
  border-color: rgba(23, 23, 78, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 30px 60px -30px rgba(13, 13, 54, 0.30),
    0 0 0 1px rgba(58, 58, 120, 0.20),
    0 0 40px -8px rgba(58, 58, 120, 0.45);
}

/* =====================================================================
   22. Spalten-Layout-Helper für Hero-Sektionen + Standorte
   ===================================================================== */
.zl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 992px) {
  .zl-split { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* =====================================================================
   23. CLEANUP — ALLE Ornamente raus, egal wo sie auftauchen
   ===================================================================== */
.ornament-corner,
.floating-leaf,
.divider-baroque,
.divider-floral,
.divider-vine,
.flourish-inline,
.section-ornament-top,
.section.has-side-vines::before,
.section.has-side-vines::after,
.card.ornate-frame::before,
.eyebrow.ornate::before,
.eyebrow.ornate::after,
.hero-banner__frame,
.hero-banner__frame-b,
.pull-quote::before,
.pull-quote::after,
hr.zl-divider {
  display: none !important;
}

/* Pull-Quote ohne Schnörkel: ruhig zentriertes Italic-Zitat */
.pull-quote {
  border: 0;
  padding: var(--space-5) 0;
  background: transparent;
}

/* Eyebrow ruhiger, ohne Diamond-Symbole */
.eyebrow.ornate {
  letter-spacing: 0.2em;
}

.card.ornate-frame {
  padding: var(--space-5);
}

/* =====================================================================
   24. HEADER-FIX — Logo, Menu-Nowrap, Mobile-Breakpoint 1200px
   ===================================================================== */
.site-logo {
  flex-shrink: 0;
  min-width: 0;
}
.site-logo__img {
  height: 60px;
  width: auto;
  max-width: 240px;
  display: block;
}
.site-logo__title { white-space: nowrap; }
.site-logo__subtitle { display: none; }
@media (min-width: 1400px) {
  .site-logo__subtitle { display: block; white-space: nowrap; }
}

.main-nav__list a {
  white-space: nowrap;
  padding: 0.55rem 0.7rem;
  font-size: 0.93rem;
}

.header-actions { flex-shrink: 0; }

/* Ab hier klappt das Desktop-Mega-Menü komplett weg — das eigene, aufgeräumte
   Mobile-Off-Canvas (#mobile-menu) übernimmt die Navigation. */
@media (max-width: 1200px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .main-nav { display: none !important; }
  /* Quick-Action-Icons weg → Burger sitzt ganz rechts.
     Anrufen bleibt über die Notfall-Bar oben + im Menü erreichbar. */
  .header-actions { display: none; }
}

/* =====================================================================
   24b. MOBILE-MENÜ — eigenständiges Off-Canvas-Panel (neu, aufgeräumt)
   ===================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}
.mobile-menu.is-open { display: block; }
/* Über 1200px existiert das Panel nie sichtbar (Desktop-Menü greift) */
@media (min-width: 1201px) {
  .mobile-menu { display: none !important; }
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 54, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 280ms ease;
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(88vw, 400px);
  background: var(--color-bg, #F5F1EA);
  box-shadow: -20px 0 60px -20px rgba(13, 13, 54, 0.45);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid rgba(23, 23, 78, 0.12);
  flex-shrink: 0;
}
.mobile-menu__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.mobile-menu__brand img { height: 46px; width: auto; max-width: 220px; display: block; }
.mobile-menu__brand .custom-logo { height: 46px; width: auto; }
.mobile-menu__brand-txt {
  font-family: var(--ff-heading);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-accent);
}
.mobile-menu__brand-txt em { font-style: italic; }
.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(23, 23, 78, 0.18);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: background 200ms, transform 200ms;
}
.mobile-menu__close:hover { background: rgba(23, 23, 78, 0.06); transform: rotate(90deg); }

.mobile-menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) 0;
}
.mobile-menu__list,
.mobile-menu__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu__list li { border-bottom: 1px solid rgba(23, 23, 78, 0.08); }
.mobile-menu__list a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 1.08rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 160ms, color 160ms;
}
.mobile-menu__list a:hover,
.mobile-menu__list .current-menu-item > a { color: var(--color-accent); background: rgba(23, 23, 78, 0.04); }

/* Zeile mit Titel + Aufklapp-Button für Einträge mit Untermenü */
.mobile-menu__list .menu-item-has-children { position: relative; }
.mobile-menu__list .menu-item-has-children > a { padding-right: 60px; }
.mm-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 52px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(23, 23, 78, 0.08);
  color: var(--color-accent);
  cursor: pointer;
}
.mm-submenu-toggle svg { transition: transform 260ms ease; }
.mm-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Untermenü: zugeklappt per max-height, ohne Beschreibungen */
.mobile-menu__list .sub-menu {
  max-height: 0;
  overflow: hidden;
  background: rgba(23, 23, 78, 0.03);
  transition: max-height 320ms ease;
}
.mobile-menu__list .menu-item-has-children.is-expanded > .sub-menu { max-height: 1200px; }
.mobile-menu__list .sub-menu a {
  padding-left: calc(var(--space-5) + var(--space-3));
  font-size: 0.98rem;
  color: var(--color-text-soft);
}
.mobile-menu__list .sub-menu li:last-child { border-bottom: 0; }

.mobile-menu__actions {
  flex-shrink: 0;
  padding: var(--space-4);
  border-top: 1px solid rgba(23, 23, 78, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mobile-menu__btn {
  display: block;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  text-decoration: none;
  transition: background 200ms, transform 120ms;
}
.mobile-menu__btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.mobile-menu__btn--primary:hover { background: var(--color-accent-dark); }
.mobile-menu__btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(23, 23, 78, 0.22);
  color: var(--color-accent);
  background: transparent;
}
.mobile-menu__btn--ghost svg { flex-shrink: 0; }
.mobile-menu__btn--ghost:hover { background: rgba(23, 23, 78, 0.05); }
.mobile-menu__tel-row { display: flex; gap: var(--space-3); }
.mobile-menu__tel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.7rem 0.5rem;
  border: 1px solid rgba(23, 23, 78, 0.18);
  border-radius: var(--radius-m);
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.2;
}
.mobile-menu__tel svg { margin-bottom: 2px; }
.mobile-menu__tel--emergency {
  border-color: rgba(168, 92, 74, 0.4);
  color: var(--color-emergency);
}
.mobile-menu__tel-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Scroll-Sperre wenn Menü offen */
body.mm-open { overflow: hidden; }

/* =====================================================================
   25. MEGA-MENU — Bild-Vorschau links, stabiler Hover
   ===================================================================== */
.main-nav__list li.menu-item-has-children { position: relative; }

/* Hover-Bridge: kein echter Gap mehr zwischen Item und Submenu */
.main-nav__list ul.sub-menu {
  top: 100% !important;
  padding-top: 12px !important;
  margin-top: 0 !important;
}
/* unsichtbare Hover-Brücke direkt unter dem Top-Item */
.main-nav__list li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 14px;
  display: none;
}
.main-nav__list li.menu-item-has-children:hover::after,
.main-nav__list li.menu-item-has-children:focus-within::after {
  display: block;
}

@media (min-width: 1201px) {
  .main-nav__list ul.sub-menu.mega-menu {
    min-width: 740px;
    max-width: 860px;
    padding: 20px;
    padding-top: 20px !important;
    margin-top: 12px !important;
    top: 100% !important;
    display: flex;
    gap: 20px;
    background: #ffffff;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-hover-glass);
  }

  /* Bild links — fixe Höhe, nicht stretchend */
  .main-nav__list ul.sub-menu.mega-menu .mega-preview {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    flex: 0 0 240px;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-alt);
    align-self: stretch;
    max-height: 360px;
  }
  .main-nav__list ul.sub-menu.mega-menu .mega-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 320ms ease;
  }
  .main-nav__list ul.sub-menu.mega-menu .mega-preview-img:not([src]),
  .main-nav__list ul.sub-menu.mega-menu .mega-preview-img[src=""] { opacity: 0; }

  /* Rechte Spalte: Wrapper-LI mit Grid für Links + Info unten */
  .main-nav__list ul.sub-menu.mega-menu .mega-links-cell {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
  }
  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid > li {
    list-style: none;
    margin: 0;
    min-width: 0;
  }
  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid > li > a {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: normal !important;  /* override .main-nav__list a nowrap */
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid > li > a:hover,
  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid > li > a:focus {
    background: rgba(23, 23, 78, 0.07);
  }

  .mega-item-title {
    display: block;
    font-family: var(--ff-heading);
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text);
    line-height: 1.2;
  }
  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid > li > a:hover .mega-item-title,
  .main-nav__list ul.sub-menu.mega-menu .mega-links-grid > li > a:focus .mega-item-title {
    color: var(--color-accent);
  }
  .mega-item-desc {
    display: block;
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-style: normal;
    color: var(--color-text-soft);
    line-height: 1.4;
    margin-top: 3px;
    letter-spacing: 0;
  }

  /* Info am Boden der rechten Spalte */
  .main-nav__list ul.sub-menu.mega-menu .mega-info {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(23, 23, 78, 0.10);
    font-family: var(--ff-heading);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-soft);
  }
}

/* =====================================================================
   26. SIGNET als dezenter Watermark in einigen Sektionen
   (icon_neu.svg auf der alten/neuen Seite)
   ===================================================================== */
.section.has-signet-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section.has-signet-bg::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: clamp(280px, 32vw, 520px);
  aspect-ratio: 1;
  background-image: url('/wp-content/uploads/2025/11/icon_neu.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.section.has-signet-bg.left::after { right: auto; left: -8%; }
.section.has-signet-bg > .container { position: relative; z-index: 2; }

/* =====================================================================
   28. LIVING BACKGROUNDS — animierte Mesh-Gradients in allen Tints
   ===================================================================== */
.section.tint-1,
.section.tint-2,
.section.tint-3,
.section.tint-warm {
  position: relative;
  overflow: hidden;
}
.section.tint-1::before,
.section.tint-2::before,
.section.tint-3::before,
.section.tint-warm::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  animation: meshSlow 32s ease-in-out infinite alternate;
}
.section.tint-1::before {
  background:
    radial-gradient(circle at 30% 20%, rgba(23, 23, 78, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(58, 58, 120, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(244, 232, 213, 0.30) 0%, transparent 60%);
}
.section.tint-2::before {
  background:
    radial-gradient(circle at 20% 70%, rgba(23, 23, 78, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(58, 58, 120, 0.10) 0%, transparent 55%);
}
.section.tint-3::before {
  background:
    radial-gradient(circle at 60% 40%, rgba(23, 23, 78, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(58, 58, 120, 0.10) 0%, transparent 50%);
}
.section.tint-warm::before {
  background:
    radial-gradient(circle at 40% 60%, rgba(244, 232, 213, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(23, 23, 78, 0.10) 0%, transparent 50%);
}
.section.tint-1 > .container,
.section.tint-2 > .container,
.section.tint-3 > .container,
.section.tint-warm > .container,
.section.tint-1 > .section-video,
.section.tint-2 > .section-video,
.section.tint-3 > .section-video,
.section.tint-warm > .section-video {
  position: relative;
  z-index: 1;
}

@keyframes meshSlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.08); }
}

/* =====================================================================
   29. SECTION VIDEO-BG — Video oder Bild als Hintergrund mit Opacity
   ===================================================================== */
.section.has-video-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  z-index: 0;
  filter: saturate(0.7);
  pointer-events: none;
}
.section-video-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  z-index: 0;
  filter: saturate(0.55) blur(1px);
  pointer-events: none;
  animation: kenBurns 32s ease-in-out infinite alternate;
}
.section.has-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, transparent 18%, transparent 82%, var(--color-bg) 100%);
  z-index: 1;
  pointer-events: none;
}
.section.has-video-bg > .container {
  position: relative;
  z-index: 2;
}

@keyframes kenBurns {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.5%, -1%); }
  100% { transform: scale(1.05) translate(2%, 1%); }
}

/* =====================================================================
   30. MARQUEE — endlos laufendes Wertestreif-Band
   ===================================================================== */
.marquee-strip {
  overflow: hidden;
  padding: var(--space-4) 0;
  border-block: 1px solid rgba(23, 23, 78, 0.10);
  background: var(--color-bg-alt);
  position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
}
.marquee-strip::before { left: 0;  background: linear-gradient(90deg, var(--color-bg-alt), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--color-bg-alt), transparent); }

.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: marqueeScroll 48s linear infinite;
  font-family: var(--ff-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-style: italic;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-left: var(--space-6);
  opacity: 0.6;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================================
   31. STATS / NUMBER COUNTER
   ===================================================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  text-align: center;
}
.stat-item { padding: var(--space-3); }
.stat-num {
  font-family: var(--ff-heading);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
  display: block;
  letter-spacing: -0.01em;
}
.stat-label {
  display: block;
  font-size: 0.84rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* =====================================================================
   32. STEP-FLOW (animierter Verbinder zwischen Step-Karten)
   ===================================================================== */
.steps-flow {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: var(--space-3);
  max-width: 920px;
  margin: 0 auto;
}
.steps-connector {
  height: 2px;
  background-image: linear-gradient(90deg, var(--color-accent) 50%, transparent 50%);
  background-size: 14px 100%;
  background-repeat: repeat-x;
  animation: dashMove 1.6s linear infinite;
  opacity: 0.6;
}
@keyframes dashMove {
  0%   { background-position: 0 0; }
  100% { background-position: -14px 0; }
}
@media (max-width: 768px) {
  .steps-flow { grid-template-columns: 1fr; }
  .steps-connector { width: 2px; height: 50px; background-image: linear-gradient(180deg, var(--color-accent) 50%, transparent 50%); background-size: 100% 14px; justify-self: center; }
}

/* =====================================================================
   33. IMAGE-ZOOM auf Hover für Cards/Galerien
   ===================================================================== */
.img-zoom {
  overflow: hidden;
  position: relative;
}
.img-zoom img {
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.img-zoom:hover img { transform: scale(1.08); }

/* =====================================================================
   34. CURSOR-SPOTLIGHT auf besonderen Sektionen
   ===================================================================== */
.section.has-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section.has-spotlight::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  left: var(--cursor-x, 50%);
  top: var(--cursor-y, 50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 23, 78, 0.10) 0%, transparent 60%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
  mix-blend-mode: multiply;
}
.section.has-spotlight > .container { position: relative; z-index: 2; }

/* =====================================================================
   35. STAGGER-REVEAL (Cards in Grid kommen versetzt rein)
   ===================================================================== */
.reveal-stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Verschiebung ohne Opacity — Karten bleiben immer sichtbar, auch ohne Reveal */
html.zl-anim .reveal-stagger:not(.is-visible) > * {
  transform: translateY(16px);
}
.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 450ms; }
.reveal-stagger.is-visible > *:nth-child(n+7) { opacity: 1; transform: translateY(0); transition-delay: 540ms; }

/* =====================================================================
   36. ANIMATED LINK UNDERLINE
   ===================================================================== */
.content-prose a:not(.btn) {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.content-prose a:not(.btn):hover {
  background-size: 100% 2px;
}

/* =====================================================================
   38. FLOATING ACTION BUTTONS (24h Notfall + WhatsApp)
   ===================================================================== */
.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(23, 23, 78, 0.45), 0 0 0 1px rgba(255,255,255,0.10) inset;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms;
  text-decoration: none;
  position: relative;
}
.fab svg { width: 24px; height: 24px; }
.fab:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 32px -8px rgba(23, 23, 78, 0.55);
  color: #fff !important;
}
.fab-emergency {
  background: var(--color-emergency);
}
.fab-emergency::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(168, 92, 74, 0.7);
  animation: pulseRing 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(168, 92, 74, 0.6); }
  70%  { box-shadow: 0 0 0 18px rgba(168, 92, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 92, 74, 0); }
}
.fab-whatsapp { background: #25D366; }

.fab-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(42, 37, 32, 0.92);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.fab:hover .fab-label { opacity: 1; }

@media (max-width: 768px) {
  .floating-actions { bottom: 16px; right: 16px; gap: 10px; }
  .fab { width: 50px; height: 50px; }
  .fab-label { display: none; }
}

/* =====================================================================
   39. SCROLL-PROGRESS-BAR oben
   ===================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  z-index: 9999;
  transition: width 60ms linear;
  pointer-events: none;
}

/* =====================================================================
   40. SCROLL-HINT im Hero
   ===================================================================== */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  animation: bobble 2.6s ease-in-out infinite;
  pointer-events: none;
}
.hero-scroll-arrow {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
}
@keyframes bobble {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 0.45; }
}

/* =====================================================================
   42. FLIPCARDS — 3D-Flip mit Bild vorne, Text hinten
   ===================================================================== */
.flipcards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.flipcard {
  perspective: 1400px;
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.flipcard:hover .flipcard-inner,
.flipcard:focus-visible .flipcard-inner,
.flipcard.is-flipped .flipcard-inner {
  transform: rotateY(180deg);
}

.flipcard-front,
.flipcard-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 48px -24px rgba(23, 23, 78, 0.30),
    0 4px 12px -4px rgba(23, 23, 78, 0.10);
}
.flipcard-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

/* ── Front: Bild mit Gradient + Titel unten ── */
.flipcard-front {
  background: var(--color-bg-deep);
}
.flipcard-front-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flipcard:hover .flipcard-front-img { transform: scale(1.05); }

.flipcard-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(23, 23, 78, 0.20) 60%, rgba(13, 13, 54, 0.80) 100%);
  pointer-events: none;
}

.flipcard-front-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5) var(--space-4);
  color: #fff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.flipcard-front-content .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  margin: 0;
}
.flipcard-front-content h3 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  line-height: 1.05;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100%;
}
.flipcard-front-content .flipcard-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms, transform 400ms;
}
.flipcard:hover .flipcard-hint {
  opacity: 1;
  transform: translateY(0);
}
.flipcard-hint::after { content: "→"; }

.flipcard-front-corner {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flipcard:hover .flipcard-front-corner { transform: rotate(45deg) scale(1.06); }

/* ── Back: Akzent-Farbe Marineblau, Text zentriert ── */
.flipcard-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.flipcard-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.06), transparent 50%);
  pointer-events: none;
}
.flipcard-back > * { position: relative; z-index: 1; }

.flipcard-back .card-icon {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
  color: #fff;
}

.flipcard-back h3 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
}
.flipcard-back p {
  color: rgba(255, 255, 255, 0.90);
  font-size: 0.93rem;
  margin: 0;
  line-height: 1.55;
}
.flipcard-back .flipcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  padding: 0.55rem 1.2rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  transition: background 240ms, transform 240ms;
}
.flipcard-back .flipcard-cta::after { content: "→"; transition: transform 240ms; }
.flipcard:hover .flipcard-back .flipcard-cta::after,
.flipcard.is-flipped .flipcard-back .flipcard-cta::after { transform: translateX(4px); }

/* ── Touch-Geräte: kein Flip, statisches Layout ── */
@media (hover: none) {
  .flipcard { aspect-ratio: auto; }
  .flipcard-inner { transform: none !important; transform-style: flat; }
  .flipcard-front,
  .flipcard-back {
    position: relative;
    inset: auto;
    backface-visibility: visible;
    transform: none !important;
  }
  .flipcard-front {
    aspect-ratio: 4/3;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
  .flipcard-back {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    padding: var(--space-4);
    text-align: center;
    align-items: center;
    justify-content: flex-start;
  }
  .flipcard-back::before { display: none; }
  .flipcard-back h3 { color: var(--color-text); text-align: center; }
  .flipcard-back p { color: var(--color-text-soft); }
  .flipcard-back .card-icon {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    color: #fff;
    margin: 0 auto var(--space-2);
  }
  .flipcard-back .flipcard-cta {
    background: transparent;
    border: 0;
    color: var(--color-accent);
    padding: 0;
    margin-top: var(--space-2);
  }
  .flipcard-front-content .flipcard-hint { display: none; }
}

/* =====================================================================
   44. FIX: .card-icon Basis-Breite (sonst dehnt sich der Block auf 100%)
   ===================================================================== */
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  color: #FFF;
  box-shadow: 0 8px 18px -8px rgba(13, 13, 54, 0.45);
  flex-shrink: 0;
}
.card-icon svg { width: 28px; height: 28px; }

/* =====================================================================
   45. SCRIPT-FONT für Überschriften — Italianno (kalligraphisch, lesbar)
   ===================================================================== */
:root {
  /* WICHTIG: kein `cursive` im Fallback — Windows rendert das als Comic Sans MS!
     Wenn Italianno noch nicht geladen ist, fällt der Browser auf Cormorant Italic
     oder Georgia zurück. Sieht edel aus statt Comic-Sans-Flash. */
  --ff-display: 'Italianno', 'Cormorant Garamond', 'Apple Chancery', 'Snell Roundhand', Georgia, serif;
}

h1, h2,
.hero-banner__content h1,
.hero-banner__content h2,
.section-head h2,
.heading-ornate {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.05;
}

h1, h2, h3, h4, h5, h6,
.heading-ornate {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal;
  overflow-wrap: normal;
}

h1 { font-size: clamp(2.8rem, 6vw, 5rem); overflow-wrap: break-word; }
h2 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); overflow-wrap: break-word; }

.hero-banner__content h1 { font-size: clamp(4rem, 9vw, 7rem); line-height: 0.95; }
.hero-banner__content h2 { font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 0.95; }

/* Subpage-Inhalte (page.php): H2 in Sektionen größer */
.section .content-prose h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  text-align: center;
  margin: 0 auto var(--space-4);
  max-width: 20ch;
}
.section .content-prose h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-family: var(--ff-heading);
  font-style: italic;
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

/* H2 in section-head zentriert + max-width für saubere Umbrüche */
.section-head h2 {
  text-align: center;
  margin-inline: auto;
  max-width: 18ch;
}

/* em im script-Heading: andere Farbe statt Italic */
h1 em, h2 em,
.hero-banner__content h1 em,
.hero-banner__content h2 em {
  font-style: normal;
  color: var(--color-accent);
}
.hero-banner__content h1 em,
.hero-banner__content h2 em {
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 4px;
}

/* heading-ornate max-width für Skript leicht anpassen */
.heading-ornate {
  max-width: none;
}

/* H3+ bleiben Cormorant (Serif) für Lesbarkeit auf Karten */
h3, h4, h5, h6 {
  font-family: var(--ff-heading);
}

/* In Flipcards die H3 kleiner + Wort-Wrap (lange Wörter) */
.flipcard-front-content h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

.flipcard-back h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  line-height: 1.05;
  overflow-wrap: break-word;
  max-width: 100%;
  text-align: center;
}

/* =====================================================================
   46. STEP-CARDS (Erste Schritte) mit großem Script-Numeral statt Icon-Box
   ===================================================================== */
.step-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  overflow: hidden;
}
.step-card .step-num {
  position: absolute;
  top: -8px;
  right: var(--space-4);
  font-family: var(--ff-display);
  font-size: clamp(7rem, 12vw, 11rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}
.step-card.step-emergency .step-num { color: var(--color-emergency); }
.step-card h3 {
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}
.step-card p {
  position: relative;
  z-index: 1;
}
.step-card .step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(23, 23, 78, 0.08);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.step-card.step-emergency .step-icon {
  background: rgba(168, 92, 74, 0.10);
  color: var(--color-emergency);
}
.step-card .step-icon svg { width: 20px; height: 20px; }

/* Erste-Schritte-Grid: 2 Spalten Desktop, 1 Spalte auf Handy (ersetzt frühere Inline-Styles) */
.steps-grid {
  max-width: 920px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   48. MUSIC-PLAYER — Apple-Music-Stil mit iPhone-Frame
   ===================================================================== */
.music-section .section-head { margin-bottom: var(--space-6); }

.music-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-7);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .music-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ── Linke Spalte: Horizontaler Coverslider ── */
.music-slider-wrap {
  min-width: 0;
  width: 100%;
}

.cover-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: var(--space-3);
}
.cover-slider-label {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.cover-slider-count {
  font-family: var(--ff-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.slider-nav {
  display: flex;
  gap: 8px;
}
.slider-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(23, 23, 78, 0.18);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 200ms, transform 100ms, color 200ms;
}
.slider-btn:hover:not(:disabled) {
  background: var(--color-accent);
  color: #fff;
  transform: scale(1.05);
}
.slider-btn:active:not(:disabled) { transform: scale(0.95); }
.slider-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.cover-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 23, 78, 0.18) transparent;
  padding: 6px 2px 18px;
  outline: none;
}
.cover-slider::-webkit-scrollbar { height: 6px; }
.cover-slider::-webkit-scrollbar-track { background: transparent; }
.cover-slider::-webkit-scrollbar-thumb {
  background: rgba(23, 23, 78, 0.18);
  border-radius: 3px;
}
.cover-slider::-webkit-scrollbar-thumb:hover { background: rgba(23, 23, 78, 0.30); }

.cover-tile {
  flex: 0 0 150px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--ff-body);
  color: var(--color-text);
}
.cover-tile:hover { transform: translateY(-4px); }

.cover-tile__img-wrap {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px -10px rgba(23, 23, 78, 0.35), 0 2px 6px rgba(23, 23, 78, 0.10);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
}
.cover-tile__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cover-tile:hover .cover-tile__img-wrap img { transform: scale(1.07); }

.cover-tile__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.65);
}

.cover-tile__num {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  padding: 3px 7px;
  border-radius: 4px;
  z-index: 2;
}

.cover-tile__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(23, 23, 78, 0.10) 0%, rgba(23, 23, 78, 0.50) 100%);
  opacity: 0;
  transition: opacity 240ms;
  color: #fff;
  z-index: 1;
}
.cover-tile__play .icon-pause { display: none; }
.cover-tile:hover .cover-tile__play { opacity: 1; }
.cover-tile.is-playing .cover-tile__play {
  opacity: 1;
  background: linear-gradient(180deg, rgba(23, 23, 78, 0.30) 0%, rgba(23, 23, 78, 0.65) 100%);
}
.cover-tile.is-playing .cover-tile__play .icon-play { display: none; }
.cover-tile.is-playing .cover-tile__play .icon-pause { display: block; }

.cover-tile.is-playing .cover-tile__img-wrap {
  box-shadow:
    0 0 0 2px var(--color-accent),
    0 16px 32px -10px rgba(23, 23, 78, 0.45),
    0 0 24px -4px rgba(23, 23, 78, 0.30);
}

.cover-tile__title {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: 0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cover-tile.is-playing .cover-tile__title {
  color: var(--color-accent);
  font-weight: 500;
}

.cover-tile__artist {
  font-size: 0.76rem;
  color: var(--color-text-soft);
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Rechte Spalte: iPhone-Frame ── */
.music-player {
  display: flex;
  justify-content: center;
  position: relative;
}

.iphone-frame {
  width: 340px;
  max-width: 100%;
  aspect-ratio: 380 / 780;
  border-radius: 50px;
  background:
    linear-gradient(145deg, #2a2a2e 0%, #1a1a1e 60%, #2a2a2e 100%);
  padding: 11px;
  position: relative;
  box-shadow:
    0 60px 120px -30px rgba(23, 23, 78, 0.45),
    0 20px 40px -10px rgba(23, 23, 78, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 3px #0a0a0d;
}

/* Side buttons (cosmetic) */
.iphone-side {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.iphone-side-left { left: -2px; top: 22%; }
.iphone-side-right { right: -2px; top: 25%; }
.iphone-btn {
  background: linear-gradient(90deg, #1a1a1e, #303034);
  display: block;
  border-radius: 1px;
}
.iphone-btn-silent { width: 3px; height: 28px; margin-bottom: 8px; }
.iphone-btn-volup,
.iphone-btn-voldown { width: 3px; height: 38px; }
.iphone-btn-power { width: 3px; height: 60px; }

.iphone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0a14 0%, #1a1a2e 50%, #2a1a3e 100%);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  padding: 56px 24px 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
}

/* iPhone-Dynamic-Island + Status-Bar */
.iphone-statusbar {
  position: absolute;
  top: 14px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  z-index: 3;
}
.iphone-dynamic-island {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 30px;
  background: #000;
  border-radius: 16px;
}
.sb-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sb-icons svg { color: #fff; }

/* Player Layout */
.player-header {
  text-align: center;
  margin-bottom: 16px;
  margin-top: 8px;
}
.player-meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.player-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 24px;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 16px 40px -12px rgba(0, 0, 0, 0.55),
    0 6px 18px -6px rgba(0, 0, 0, 0.35);
}
.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 320ms ease;
}
.cover-glow {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 60px rgba(255, 255, 255, 0.04);
}

.player-info { margin-bottom: 18px; }
.player-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.player-title-wrap { flex: 1; min-width: 0; }
.player-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.player-artist {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-fav {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  transition: color 200ms, transform 200ms;
  flex-shrink: 0;
}
.player-fav:hover { color: #ff5d6c; transform: scale(1.1); }
.player-fav.is-fav {
  color: #ff5d6c;
}
.player-fav.is-fav svg { fill: currentColor; }

/* Progress */
.player-progress { margin-bottom: 22px; }
.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-bottom: 8px;
  transition: height 200ms;
}
.progress-bar:hover { height: 6px; }
.progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  width: 0%;
  transition: width 120ms linear;
}
.progress-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 200ms;
  pointer-events: none;
}
.progress-bar:hover .progress-knob { transform: translate(-50%, -50%) scale(1); }
.progress-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Controls */
.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.ctrl-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 200ms, transform 100ms;
}
.ctrl-btn:hover { background: rgba(255, 255, 255, 0.10); }
.ctrl-btn:active { transform: scale(0.92); }
.ctrl-btn.ctrl-play {
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.15);
}
.ctrl-btn.ctrl-play:hover { background: rgba(255, 255, 255, 0.22); }

/* Footer (volume) */
.player-footer {
  margin-top: auto;
  padding-top: 18px;
}
.player-vol-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.55);
}
.vol-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.vol-fill {
  display: block;
  height: 100%;
  width: 60%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

/* =====================================================================
   50. PAGE-GALLERY — Masonry-Strip am Ende von Subpages
   ===================================================================== */
.page-gallery-section { padding: var(--space-8) 0; }

.page-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.page-gallery-item {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card-glass);
  cursor: zoom-in;
  background: var(--color-bg-deep);
}
.page-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-gallery-item:hover img { transform: scale(1.08); }
.page-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(23, 23, 78, 0.25));
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.page-gallery-item:hover::after { opacity: 1; }

/* Verschiedene Aspect-Ratios für mehr Masonry-Gefühl */
.page-gallery-item:nth-child(7n+1) { aspect-ratio: 1; }
.page-gallery-item:nth-child(7n+2) { aspect-ratio: 4/5; }
.page-gallery-item:nth-child(7n+3) { aspect-ratio: 1; }
.page-gallery-item:nth-child(7n+4) { aspect-ratio: 3/4; }
.page-gallery-item:nth-child(7n+5) { aspect-ratio: 1; }
.page-gallery-item:nth-child(7n+6) { aspect-ratio: 4/5; }
.page-gallery-item:nth-child(7n+7) { aspect-ratio: 1; }

/* =====================================================================
   52. STERNENHIMMEL — Gedenkportal-Einstieg als Nachthimmel
   ===================================================================== */
.sternenhimmel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(720px, 100vh, 980px);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.sternenhimmel + * { position: relative; z-index: 2; }
.site-footer ~ .sternenhimmel { display: none; } /* safety */

/* ── BG Layers ── */
.sky-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.sky-bg-grad {
  position: absolute;
  inset: 0;
  background-color: #02020c;
  background-image: url('../images/night-sky.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Hintergrund-Sterne (dekorativ, kleine Punkte) */
.sky-bg-stars {
  position: absolute;
  inset: -20%;
  background-repeat: repeat;
  background-size: 360px 360px;
}
.sky-bg-stars-1 {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 92% 90%, rgba(255,255,255,0.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.sky-bg-stars-2 {
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.55) 50%, transparent 100%),
    radial-gradient(2px 2px at 65% 78%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 50% 80%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 22% 65%, rgba(255,255,255,0.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 35%, rgba(255,255,255,0.5) 50%, transparent 100%);
  background-size: 420px 420px;
  background-position: 80px 40px;
  animation: twinkle 7s ease-in-out infinite alternate-reverse;
  opacity: 0.7;
}

/* Layer 3 — sehr dichtes, feines Hintergrund-Sternenfeld (Universum-Tiefe) */
.sky-bg-stars-3 {
  background-image:
    radial-gradient(0.5px 0.5px at 5% 5%, rgba(255,255,255,0.65) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 15% 25%, rgba(200,210,255,0.55) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 28% 8%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 45% 30%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 58% 12%, rgba(220,200,255,0.5) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 72% 28%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 88% 6%, rgba(255,240,200,0.65) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 96% 18%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 3% 48%, rgba(255,255,255,0.55) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 18% 56%, rgba(180,200,255,0.5) 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 34% 62%, rgba(255,255,255,0.65) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 48% 42%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 62% 58%, rgba(220,210,255,0.55) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 78% 50%, rgba(255,255,255,0.55) 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 90% 65%, rgba(255,235,200,0.6) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 6% 88%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 28% 95%, rgba(200,210,255,0.5) 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 52% 86%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 74% 92%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 92% 96%, rgba(220,210,255,0.55) 50%, transparent 100%);
  background-size: 280px 280px;
  background-position: 0 0;
  opacity: 0.55;
  animation: twinkle 9s ease-in-out infinite alternate;
}

/* Milchstraße / Galaxie-Band — diagonal verlaufender heller Nebel */
.sky-bg-galaxy {
  position: absolute;
  inset: -15%;
  background:
    /* Hauptband der Milchstraße */
    linear-gradient(115deg,
      transparent 30%,
      rgba(150, 170, 255, 0.06) 42%,
      rgba(200, 180, 255, 0.10) 48%,
      rgba(255, 220, 200, 0.08) 52%,
      rgba(180, 200, 255, 0.06) 58%,
      transparent 70%),
    /* Helle Knoten in der Galaxie */
    radial-gradient(ellipse 40% 18% at 35% 45%, rgba(180, 200, 255, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 35% 14% at 65% 55%, rgba(255, 215, 180, 0.14) 0%, transparent 70%),
    radial-gradient(circle 200px at 22% 38%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    radial-gradient(circle 240px at 72% 48%, rgba(200, 180, 255, 0.10) 0%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: galaxyDrift 80s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes galaxyDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-2%, -1%) rotate(0.5deg); }
}

@keyframes twinkle {
  0%   { opacity: 0.55; }
  50%  { opacity: 0.95; }
  100% { opacity: 0.65; }
}

/* Sanfter Nebel-Layer */
.sky-bg-mist {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(58, 58, 120, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(23, 23, 78, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
  animation: meshSlow 60s ease-in-out infinite alternate;
}

/* ── Header ── */
.sky-header {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(60px, 10vh, 120px) var(--space-4) var(--space-4);
}
.sky-header h1 {
  color: #fff;
  font-size: clamp(3.6rem, 8vw, 6.5rem);
  margin: 0 0 var(--space-3);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.sky-header p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto;
}
.sky-stats {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}

/* ── Canvas mit Sternen ── (Stadt-Silhouette weg → Sterne dürfen weiter unten sein) */
.sky-canvas {
  position: absolute;
  inset: 14% 5% 14%;
  z-index: 2;
  pointer-events: none;
}

.sky-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--size, 1) * 20px);
  height: calc(var(--size, 1) * 20px);
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  text-decoration: none;
  display: grid;
  place-items: center;
}

.star-core,
.star-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.star-core {
  background: radial-gradient(circle, #fff 0%, rgba(255, 245, 220, 0.95) 30%, rgba(255, 230, 180, 0.4) 55%, transparent 75%);
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 14px rgba(255, 230, 180, 0.6))
    drop-shadow(0 0 24px rgba(255, 200, 120, 0.35));
  animation: starTwinkle 4s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.star-glow {
  inset: -80%;
  background:
    radial-gradient(circle, rgba(255, 240, 200, 0.55) 0%, rgba(180, 200, 255, 0.25) 35%, transparent 65%);
  opacity: 0.7;
  transition: opacity 400ms, transform 400ms;
  animation: starGlowPulse 5s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes starTwinkle {
  0%   { opacity: 0.78; transform: scale(0.95); }
  50%  { opacity: 1.0;  transform: scale(1.12); }
  100% { opacity: 0.88; transform: scale(1.02); }
}
@keyframes starGlowPulse {
  0%   { opacity: 0.5; transform: scale(0.9); }
  100% { opacity: 0.85; transform: scale(1.15); }
}

.sky-star:hover .star-core,
.sky-star:focus .star-core {
  filter:
    drop-shadow(0 0 18px #fff)
    drop-shadow(0 0 36px rgba(255, 240, 200, 0.85))
    drop-shadow(0 0 60px rgba(255, 200, 120, 0.55));
  animation: none;
  transform: scale(1.8);
}
.sky-star:hover .star-glow,
.sky-star:focus .star-glow {
  opacity: 1;
  transform: scale(1.7);
  animation: none;
}
.sky-star:focus { outline: none; }

/* ── Hover-Karte: Foto-Kreis mit Gold-Rand + Name darunter ── */
.sky-card {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 180px;
  padding: 16px 14px 14px;
  background: rgba(20, 20, 40, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(212, 175, 95, 0.35);
  border-radius: 14px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(212, 175, 95, 0.18);
  pointer-events: none;
  transition: opacity 240ms;
  color: #fff;
}
.sky-card[hidden] { display: none; }

.sky-card__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #d4af5f;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.20));
  box-shadow:
    0 0 0 1px rgba(212, 175, 95, 0.5) inset,
    0 0 28px rgba(212, 175, 95, 0.38),
    0 8px 18px rgba(0, 0, 0, 0.40);
}
/* Fallback wenn kein Foto: subtiler Gold-Kreis */
.sky-card__photo:not([src]),
.sky-card__photo[src=""] {
  background:
    radial-gradient(circle, rgba(212, 175, 95, 0.35) 0%, rgba(20, 20, 40, 0.85) 70%);
}

.sky-card__text {
  text-align: center;
  width: 100%;
}
.sky-card__name {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.01em;
}
.sky-card__dates {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 5px;
}

/* ── Suche unten ── */
.sky-search {
  position: absolute;
  bottom: clamp(40px, 7vh, 90px);
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 90%);
  z-index: 4;
}
.sky-search__field {
  position: relative;
  display: flex;
  align-items: center;
}
.sky-search__icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.sky-search__input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 14px 24px 14px 52px;
  font-size: 1rem;
  color: #fff;
  font-family: var(--ff-body);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
}
.sky-search__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.sky-search__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.sky-search__loader {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.sky-search.is-loading .sky-search__loader { opacity: 1; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

.sky-search__results {
  list-style: none;
  margin: 12px 0 0;
  padding: 8px;
  background: rgba(20, 20, 40, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.sky-search__results[hidden] { display: none; }

.sky-search__results li { margin: 0; }
.sky-search__results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: background 150ms;
}
.sky-search__results a:hover,
.sky-search__results a:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.sky-search__results img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sky-search__results img:not([src]),
.sky-search__results img[src=""] { display: none; }
.sky-search__results .res-name {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.sky-search__results .res-dates {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}
.sky-search__results .res-empty {
  padding: 16px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-style: italic;
}

.sky-search__hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  margin-top: 14px;
  letter-spacing: 0.02em;
}

/* Content unter dem Himmel (optional) */
.sky-content-below {
  position: relative;
  z-index: 3;
  padding: var(--space-7) 0 var(--space-9);
}

/* Mobile */
@media (max-width: 768px) {
  .sky-canvas { inset: 18% 3% 32%; }
  .sky-star { width: calc(var(--size, 1) * 22px); height: calc(var(--size, 1) * 22px); }
  .sky-card { width: 200px; }
  .sky-header { padding-top: 60px; }
}

/* =====================================================================
   54. STERNENHIMMEL · FULLSCREEN-MODE
   ===================================================================== */
body.sky-fullscreen {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #02020c;
}
body.sky-fullscreen .site-header,
body.sky-fullscreen .site-footer,
body.sky-fullscreen .notfall-bar,
body.sky-fullscreen .bg-layers,
body.sky-fullscreen .floating-actions,
body.sky-fullscreen .scroll-progress { display: none !important; }

.sternenhimmel.sky-full {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

/* Stern-Layer höher als Stadt */
.sternenhimmel.sky-full .sky-canvas { z-index: 4; }
.sternenhimmel.sky-full .sky-bg { z-index: 0; }
.sternenhimmel.sky-full .sky-cityline { z-index: 2; }

/* Stars im Fullscreen-Modus: heller, prominenter, mit Halo */
.sternenhimmel.sky-full .sky-star {
  width: calc(var(--size, 1) * 26px);
  height: calc(var(--size, 1) * 26px);
}
.sternenhimmel.sky-full .star-core {
  filter:
    drop-shadow(0 0 10px #fff)
    drop-shadow(0 0 22px rgba(255, 240, 200, 0.75))
    drop-shadow(0 0 40px rgba(255, 200, 120, 0.45));
}

/* ── Zurück-Button (top-left) ── */
.sky-back {
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 240ms, color 240ms, transform 200ms;
}
.sky-back:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateX(-2px);
}
.sky-back svg { display: block; }

/* ── Musik-Toggle (top-right) ── */
.sky-music {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  font-family: var(--ff-body);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 240ms, color 240ms;
}
.sky-music:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sky-music__icon { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.sky-music__icon .ico-mute { display: none; }
.sky-music__icon .ico-on   { display: block; }
.sky-music[data-state="muted"] .ico-on   { display: none; }
.sky-music[data-state="muted"] .ico-mute { display: block; }
.sky-music[data-state="playing"] {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ── Header in Ecke top-right (unter Music-Button) — Legacy ── */
.sky-header.sky-header-corner {
  position: absolute;
  top: 90px;
  right: 32px;
  text-align: right;
  padding: 0;
  z-index: 5;
  max-width: 380px;
}
.sky-header.sky-header-corner h1 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  margin: 6px 0;
  line-height: 0.95;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.sky-header.sky-header-corner p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 10px;
  max-width: none;
  margin-left: auto;
}
.sky-header.sky-header-corner .eyebrow {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
}
.sky-header.sky-header-corner .sky-stats {
  margin-top: 6px;
  display: inline-flex;
  font-size: 0.72rem;
  padding: 4px 12px;
}

/* ── Bottom-Stack: Header + Text + Suche zentriert als Block ── */
.sky-bottom-stack {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 7vh, 80px);
  transform: translateX(-50%);
  width: min(680px, 92%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 1rem);
  pointer-events: none;
}
.sky-bottom-stack > * { pointer-events: auto; }

/* Signet über dem Titel */
.sky-signet {
  display: block;
  width: clamp(56px, 7vw, 84px);
  height: auto;
  margin: 0 auto;
  opacity: 0.95;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 12px rgba(255, 245, 220, 0.45))
    drop-shadow(0 0 28px rgba(180, 200, 255, 0.25));
  animation: skySignetGlow 6s ease-in-out infinite alternate;
}
@keyframes skySignetGlow {
  0%   { opacity: 0.85; }
  100% { opacity: 1; }
}

.sky-header.sky-header-center {
  text-align: center;
  padding: 0;
  width: 100%;
}
.sky-header.sky-header-center h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.6rem);
  margin: 0 0 0.6rem;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  color: #fff;
}
.sky-header.sky-header-center p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
  max-width: 540px;
  line-height: 1.55;
}

/* Search-Field innerhalb des Stacks: keine eigene Absolute-Positionierung mehr */
.sky-bottom-stack .sky-search {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
}

/* ── Sternschnuppen ── */
.sky-shooting {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.shooting-star {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 245, 220, 0.85) 80%,
    #ffffff 98%,
    transparent 100%);
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 10px rgba(255, 230, 180, 0.5));
  opacity: 0;
  will-change: transform, opacity;
}

/*
 * 4 Sternschnuppen-Varianten — jede mit anderem Pfad und Richtung:
 *  ss-1: oben-links → unten-rechts (klassisch ↘)
 *  ss-2: oben-rechts → unten-links (↙, Trail dreht sich um)
 *  ss-3: oben-mitte → unten-links (steiler ↙)
 *  ss-4: oben-links → unten-rechts, flacher Winkel
 */
.shooting-star.ss-1 {
  top: 12%;
  left: -20%;
  animation: ssShoot1 24s linear infinite;
  animation-delay: 2s;
}
.shooting-star.ss-2 {
  top: 8%;
  right: -20%;
  left: auto;
  width: 200px;
  animation: ssShoot2 32s linear infinite;
  animation-delay: 13s;
}
.shooting-star.ss-3 {
  top: 6%;
  right: 20%;
  left: auto;
  width: 150px;
  animation: ssShoot3 28s linear infinite;
  animation-delay: 21s;
}
.shooting-star.ss-4 {
  top: 32%;
  left: -20%;
  width: 180px;
  animation: ssShoot4 36s linear infinite;
  animation-delay: 30s;
}

/*
 * Wichtig: Die Element-Default-Orientierung ist horizontal mit hellem Kopf rechts (→).
 * rotate(deg) ist die Richtung, in die der Kopf zeigt — muss exakt zur translate-
 * Richtung passen, sonst sieht der Schweif rückwärts aus.
 * Auf einem 16:9-Display (häufigster Fall) gilt:
 *   actual_angle = atan2(dy_px, dx_px) = atan2(dy_vh * 1080/100, dx_vw * 1920/100)
 */
@keyframes ssShoot1 {
  /* ↘ rechts-runter: dx=+85vw, dy=+42vh → ~15° */
  0%   { opacity: 0; transform: translate(0, 0) rotate(15deg); }
  3%   { opacity: 0.95; }
  9%   { opacity: 1; transform: translate(85vw, 42vh) rotate(15deg); }
  10%  { opacity: 0; transform: translate(95vw, 47vh) rotate(15deg); }
  100% { opacity: 0; transform: translate(95vw, 47vh) rotate(15deg); }
}
@keyframes ssShoot2 {
  /* ↙ links-runter: dx=-90vw, dy=+55vh → ~161° */
  0%   { opacity: 0; transform: translate(0, 0) rotate(161deg); }
  4%   { opacity: 0.95; }
  9%   { opacity: 1; transform: translate(-90vw, 55vh) rotate(161deg); }
  10%  { opacity: 0; transform: translate(-98vw, 60vh) rotate(161deg); }
  100% { opacity: 0; transform: translate(-98vw, 60vh) rotate(161deg); }
}
@keyframes ssShoot3 {
  /* ↙ steiler links-runter: dx=-45vw, dy=+70vh → ~139° */
  0%   { opacity: 0; transform: translate(0, 0) rotate(139deg); }
  3%   { opacity: 0.9; }
  7%   { opacity: 1; transform: translate(-45vw, 70vh) rotate(139deg); }
  8%   { opacity: 0; transform: translate(-52vw, 78vh) rotate(139deg); }
  100% { opacity: 0; transform: translate(-52vw, 78vh) rotate(139deg); }
}
@keyframes ssShoot4 {
  /* ↘ flacher rechts-runter: dx=+95vw, dy=+22vh → ~7° */
  0%   { opacity: 0; transform: translate(0, 0) rotate(7deg); }
  3%   { opacity: 0.85; }
  9%   { opacity: 1; transform: translate(95vw, 22vh) rotate(7deg); }
  10%  { opacity: 0; transform: translate(105vw, 25vh) rotate(7deg); }
  100% { opacity: 0; transform: translate(105vw, 25vh) rotate(7deg); }
}

/* Reduced-Motion: Sternschnuppen aus */
@media (prefers-reduced-motion: reduce) {
  .shooting-star { animation: none !important; opacity: 0 !important; }
}

/* ── Sterne-Counter Badge: bottom-right ── */
.sky-stats--corner {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}

/* ── Runde Control-Buttons (bottom-left) ── */
.sky-controls {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sky-circle-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 240ms ease, color 240ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 280ms ease, border-color 240ms ease;
  font: inherit;
  padding: 0;
}
.sky-circle-btn svg { display: block; }
.sky-circle-btn:hover,
.sky-circle-btn:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.55);
  outline: none;
}

/* Music-Button als Circle-Button: Position-Override (sky-music war absolute top-right) */
.sky-controls .sky-music,
.sky-controls .sky-back {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
}
.sky-controls .sky-music__label,
.sky-controls .sky-back span:not(.sky-music__icon) {
  display: none !important;
}

/* Music-Button: aktive playing-state in goldgelb */
.sky-circle-btn.sky-music[data-state="playing"] {
  background: rgba(212, 175, 95, 0.85);
  border-color: rgba(212, 175, 95, 1);
  color: #2a2010;
}

/* Mobile: kleiner */
@media (max-width: 768px) {
  .sky-controls { left: 16px; bottom: 16px; gap: 8px; }
  .sky-circle-btn { width: 44px; height: 44px; }
  .sky-bottom-stack { bottom: clamp(80px, 12vh, 120px); width: 88%; }
  .sky-header.sky-header-center h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .sky-header.sky-header-center p { font-size: 0.88rem; }
  .sky-stats--corner { right: 16px; bottom: 16px; font-size: 0.66rem; padding: 6px 12px; }
}

/* ── Stadt-Silhouette ── */
.sky-cityline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 200px);
  pointer-events: none;
  z-index: 2;
}
.sky-cityline svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sky-cityline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(2, 2, 8, 0.5) 60%, #02020c 100%);
  pointer-events: none;
}

/* ── Search neu positionieren (über der Stadt, mittig) ── */
/* Legacy: greift nicht mehr, da .sky-search jetzt im .sky-bottom-stack liegt.
   Falls eine alte Markup-Variante ohne Stack vorkommt, bleibt die Regel als Fallback. */
.sternenhimmel.sky-full > .sky-search {
  bottom: clamp(140px, 22vh, 240px);
  z-index: 6;
}

/* ── Canvas darf voll spannen (keine Stadt mehr) ── */
.sternenhimmel.sky-full .sky-canvas {
  inset: 10% 5% 12%;
}

/* Mobile: Buttons kleiner */
@media (max-width: 768px) {
  .sky-back, .sky-music { top: 16px; padding: 8px 14px; font-size: 0.85rem; }
  .sky-back { left: 16px; }
  .sky-music { right: 16px; }
  .sky-music__label { display: none; }
  .sky-header.sky-header-corner { top: 70px; right: 16px; max-width: 70vw; }
  .sky-header.sky-header-corner h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .sternenhimmel.sky-full .sky-canvas { inset: 18% 3% 18%; }
  .sternenhimmel.sky-full > .sky-search { bottom: clamp(120px, 18vh, 160px); }
  .sky-card { width: 150px; padding: 12px; }
  .sky-card__photo { width: 64px; height: 64px; }
}

/* Touch-Geräte: Sternenkarte nicht hover-only, dauerhaft sichtbar zeigen */
@media (hover: none) {
  .sky-star { width: calc(var(--size, 1) * 18px); height: calc(var(--size, 1) * 18px); }
}

/* =====================================================================
   56. FOTO-GALERIE mit Flip + Lightbox
   ===================================================================== */
.gallery-flip-section { padding: var(--space-9) 0; }

.gallery-flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

.gflip {
  position: relative;
  perspective: 1200px;
  aspect-ratio: 4 / 5;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}

.gflip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gflip:hover .gflip__inner,
.gflip:focus-visible .gflip__inner {
  transform: rotateY(180deg);
}

.gflip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card-glass);
}
.gflip__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gflip:hover .gflip__face img { transform: scale(1.04); }

.gflip__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.20));
  opacity: 0;
  transition: opacity 400ms;
  pointer-events: none;
}
.gflip:hover .gflip__face::after { opacity: 1; }

.gflip__front { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.gflip__back  { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }

.gflip__zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  display: grid;
  place-items: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms;
}
.gflip:hover .gflip__zoom { opacity: 1; }

@media (hover: none) {
  .gflip__inner { transform: none !important; }
  .gflip__back { display: none; }
}

/* ── Lightbox ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(2, 2, 12, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  animation: lbFade 280ms ease;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-m);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: lbZoom 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes lbZoom { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: background 200ms, transform 200ms;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.20); transform: scale(1.06); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 768px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev  { left: 8px; }
  .lightbox-next  { right: 8px; }
}

/* =====================================================================
   57. ZIMMER-ANFRAGE / BUCHUNGS-TOOL
   ===================================================================== */
.booking-section { padding: var(--space-9) 0; }

.booking-card {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(23, 23, 78, 0.18);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-glass);
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .booking-form { grid-template-columns: 1fr; }
}
.booking-form .field-full { grid-column: 1 / -1; }

.booking-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 6px;
  font-weight: 500;
}

.booking-form input[type="date"],
.booking-form input[type="number"],
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(23, 23, 78, 0.22);
  border-radius: var(--radius-m);
  padding: 0.85rem 1rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 200ms, box-shadow 200ms;
}
.booking-form input:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(23, 23, 78, 0.12);
}

.booking-form .number-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(23, 23, 78, 0.22);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.booking-form .number-stepper button {
  width: 44px;
  height: 48px;
  background: transparent;
  border: 0;
  color: var(--color-accent);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 200ms;
}
.booking-form .number-stepper button:hover { background: rgba(23, 23, 78, 0.08); }
.booking-form .number-stepper input {
  flex: 1;
  text-align: center;
  border: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0;
}
.booking-form .number-stepper input:focus { box-shadow: none; }

.booking-submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.booking-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.booking-success {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(107, 142, 90, 0.15), rgba(107, 142, 90, 0.05));
  border: 1px solid rgba(107, 142, 90, 0.35);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  font-size: 0.95rem;
  color: var(--color-success);
}

/* =====================================================================
   57b. PAGE.PHP — Unterseiten-Layouts (Split, BG-Section, Quote-Banner)
   ===================================================================== */

/* Intro-Block etwas luftiger als normale Sections */
.section.page-intro {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Split-Sections für Unterseiten: 1:1 mit Bild rechts/links */
.section.page-split {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.section.page-split .zl-split {
  gap: var(--space-7);
  align-items: center;
}
.section.page-split .zl-split-text > :first-child {
  margin-top: 0;
}
.section.page-split .zl-split-text h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Bild-Frame im Split: gerahmt, leicht angehoben */
.zl-split-media__frame {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  box-shadow:
    0 32px 60px -20px rgba(23, 23, 78, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateZ(0);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 600ms;
}
.zl-split-media__frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: calc(var(--radius-l) - 6px);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}
.zl-split-media__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(23, 23, 78, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}
.zl-split-media__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.zl-split:hover .zl-split-media__frame img { transform: scale(1.04); }
.zl-split:hover .zl-split-media__frame {
  box-shadow:
    0 40px 80px -20px rgba(23, 23, 78, 0.45),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Mobile: Bild immer ZUERST, dann Text */
@media (max-width: 992px) {
  .section.page-split .zl-split,
  .section.page-split .zl-split-left,
  .section.page-split .zl-split-right {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .section.page-split .zl-split-right .zl-split-media,
  .section.page-split .zl-split-left  .zl-split-media {
    order: -1;
  }
  .zl-split-media__frame { aspect-ratio: 16 / 11; }
}

/* BG-Photo-Section auf Unterseiten: stärkeres Bild, ruhiger Content */
.section.page-bg-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  position: relative;
}
.section.page-bg-section::before {
  opacity: 0.18;
  filter: saturate(0.85) brightness(0.95);
}
.section.page-bg-section .content-prose h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

/* =====================================================================
   QUOTE-BANNER · mid-page CTA · HELL, ohne Kasten, großzügig
   ===================================================================== */
.quote-banner {
  position: relative;
  padding: clamp(var(--space-8), 11vw, calc(var(--space-9) * 1.3)) 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(244, 240, 232, 0.55) 50%, var(--color-bg) 100%);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Zarter Signet-Watermark als Atmosphäre, ersetzt den vorherigen Foto-BG */
.quote-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('/wp-content/uploads/2025/11/icon_neu.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(420px, 60vw, 720px);
  opacity: 0.05;
  pointer-events: none;
}

/* Feine horizontale Hairlines oben + unten als ruhige Section-Trennung */
.quote-banner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(440px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 23, 78, 0.25), transparent);
}

.quote-banner__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Quote-Banner: blockquote-Default-Kasten zurücksetzen */
.quote-banner blockquote.quote-banner__text {
  all: unset;
  display: block;
}

.quote-banner__mark {
  display: block;
  margin: 0 auto var(--space-5);
  color: var(--color-accent);
  opacity: 0.22;
}

.quote-banner__text {
  font-family: var(--ff-display, 'Italianno', 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  line-height: 1.16;
  font-style: normal;
  font-weight: 400;
  margin: 0 0 var(--space-4);
  color: var(--color-accent);
  letter-spacing: 0.003em;
  max-width: 18ch;
}

/* dezenter Trenner zwischen Quote und Cite */
.quote-banner__cite-row {
  width: 56px;
  height: 1px;
  background: rgba(23, 23, 78, 0.35);
  margin: var(--space-2) 0 var(--space-3);
}

.quote-banner__cite {
  display: block;
  font-family: var(--ff-italic, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-6);
}

.quote-banner__cta {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================================================================
   BILDER · global sanft abgerundet
   ===================================================================== */

img {
  border-radius: var(--radius-m);
}

/* Ausnahmen: full-bleed Hintergründe, Logos, Icons, schon gerahmte Bilder */
.hero-banner__bg img,
.hero-banner img,
.section-video,
.section-video-img,
.site-logo img,
.site-logo svg,
.zl-logo,
.zl-signet,
.notfall-bar img,
.site-header img,
.site-footer img,
.flipcard-front-img,
.flipcard-back img,
.gflip__face img,
.zl-split-media__frame img,
.standort-card img,
.card.ornate-frame img,
.page-gallery-item img,
.sky-card__photo,
.sky-star img,
.music-cover img,
.cover-tile img,
img.no-radius,
img[src$=".svg"],
.icon img,
.icon svg,
.card-icon img,
.card-icon svg,
.step-icon img,
.step-icon svg {
  border-radius: 0;
}

/* Featured-Bild im Content (z.B. Post-Thumbnails inline) */
.content-prose img,
.entry-content img,
article img,
.zl-split-text img {
  border-radius: var(--radius-m);
}

/* =====================================================================
   CTA-FINALE · Letzte Section vor dem Footer
   Warmes Cream, geht visuell sauber in den Footer über (kein weißer Bruch)
   ===================================================================== */
.cta-finale {
  position: relative;
  padding: clamp(var(--space-7), 9vw, var(--space-9)) 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(23, 23, 78, 0.06), transparent 70%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-deep) 100%);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

/* Signet als atmosphärischer Watermark */
.cta-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('/wp-content/uploads/2025/11/icon_neu.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(380px, 50vw, 620px);
  opacity: 0.05;
  pointer-events: none;
}

/* Feiner Trenner oben */
.cta-finale::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 23, 78, 0.25), transparent);
}

.cta-finale__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.cta-finale .eyebrow {
  margin-bottom: var(--space-2);
}

.cta-finale__title {
  font-family: var(--ff-display, 'Italianno', 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.1;
  margin: 0;
  color: var(--color-accent);
  font-weight: 400;
}

.cta-finale__title em {
  font-style: normal;
  color: var(--color-accent);
}

.cta-finale__lead {
  max-width: 56ch;
  margin: 0 auto var(--space-3);
  color: var(--color-text-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.cta-finale .btn-row {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- 58. Print ---------- */

@media print {
  .site-header, .site-footer, .notfall-bar, .bg-layers { display: none !important; }
  body { background: #FFF; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .quote-banner__bg, .quote-banner__overlay { display: none !important; }
  .quote-banner { color: #000; }
}

/* =====================================================================
   FIX: bg-photo-Overlays IMMER hinter den Inhalt legen.
   Der beige ::after-Verlauf (oben/unten) hatte denselben z-index wie der
   Content-Container und wurde dadurch DARÜBER gemalt → Überschrift und
   Rand-Karten sahen ausgeblichen aus. Content klar nach vorne holen.
   (Am Dateiende, damit es die bg-photo/ornate-Pseudo-Kaskade sicher gewinnt.)
   ===================================================================== */
.section.bg-photo::before,
.section.bg-photo::after {
  z-index: 0;
}
.section.bg-photo > .container {
  position: relative;
  z-index: 3;
}