/* ============================================
   TRAUERHILFE GÖCK, Hauptstylesheet
   Variante A · Layout-/Interaktionsvorlage: Trauerhilfe Littig
   Farben auf die Göck-CI umgestellt (Navy #1C244B, Hellblau #BEDCEE, Gold #A18036)
   ============================================ */

/* ============================================
   SELBST GEHOSTETE SCHRIFTEN (kein Google-Server-Kontakt)
   ============================================ */

/* Inter, Fließtext (300 bis 600, variable font) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/inter-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat, Akzente / Navigation (200 bis 500, variable font) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3, Überschriften (300 bis 700, variable font)
   Humanistische Grotesk in der Anmutung der Logoschrift, SIL Open Font
   License, liegt lokal in fonts/. Kein Kontakt zu fremden Servern. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === VARIABLEN === */
:root {
  /* --- Göck CI --- */
  --dark:        #1C244B;   /* CI Primär, Dunkelblau */
  --dark-mid:    #26305e;
  --dark-light:  #324A6D;   /* CI Text, Mittelblau */
  --primary:     #BEDCEE;   /* CI Akzent, Hellblau */
  --primary-dark:#93c3de;
  --primary-light:#dceaf6;
  --cream:       #F3F5F8;   /* CI Sekundär */
  --warm-white:  #F9FAFD;
  --text-body:   #1d2333;
  --mid-gray:    #324A6D;
  --soft-gray:   #7d8ba4;
  --border:      rgba(190,220,238,0.45);
  --border-light:rgba(190,220,238,0.22);
  --shadow-sm:   0 4px 16px rgba(28,36,75,0.07);
  --shadow-md:   0 12px 40px rgba(28,36,75,0.10);
  --shadow-lg:   0 24px 80px rgba(28,36,75,0.15);
  --radius:      12px;
  --radius-lg:   20px;
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --transition:  all 0.35s var(--ease);
  --navy:        #1C244B;
  --gold:        #A18036;   /* CI Gold */
  --gold-light:  #ECBF5C;
  --gold-dark:   #7d6228;

  /* --- Umstellung: was vorher dunkelblau war, ist jetzt hellblau ---
     Der Kopfbereich (Navigation, Hero mit Foto) bleibt bewusst dunkel. */
  --flaeche:       #BEDCEE;   /* Flaechen, die vorher dunkelblau waren */
  --flaeche-stark: #93c3de;   /* Hover/Aktiv dieser Flaechen, sonst ist kein Zustand sichtbar */
  --auf-flaeche:   #1C244B;   /* Text auf diesen hellblauen Flaechen */
  --ueberschrift:  #BEDCEE;   /* h1 bis h5 auf hellem Grund */
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--warm-white);
  color: var(--text-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* clip statt hidden: hidden macht den Body zum Scrollcontainer und
     position: sticky im Kopfbereich funktioniert dann nicht mehr.
     Ältere Browser bleiben bei der Zeile darüber. */
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* === TYPOGRAFIE === */
h1, h2, h3, h4, h5 {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ueberschrift);
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.2rem; }
p { color: var(--mid-gray); line-height: 1.8; }

/* === NAVIGATION, Logo links · Pill rechts (Flex, kein Überlappen) ===
   Früher lag das Logo absolut links und die Pill zentriert. Zwischen 1100 und
   1400 px schob sich die Pill über das Logo. Jetzt sitzen beide in einer
   Flex-Zeile mit space-between, die Pill darf schrumpfen. */
#main-nav {
  position: fixed;
  top: 0.75rem;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  transition: top 0.4s cubic-bezier(0.4,0,0.2,1),
              background 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s cubic-bezier(0.4,0,0.2,1),
              padding 0.35s cubic-bezier(0.4,0,0.2,1);
}

#main-nav.scrolled {
  top: 0.5rem;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  position: relative;
  height: 60px;
}

/* Logo, feste Größe, schrumpft nie unter die Lesbarkeit */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  z-index: 2;
}

.nav-logo-icon {
  height: clamp(32px, 3.2vw, 44px);
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), filter 0.45s cubic-bezier(0.4,0,0.2,1);
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}

#main-nav.scrolled .nav-logo-icon {
  height: clamp(30px, 2.8vw, 38px);
}

/* Pill, schwebt über dem Foto, enthält alle Links + Telefon */
.nav-pill {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  border-radius: 100px;
  background: rgba(28,36,75,0.34);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 8px 40px rgba(28,36,75,0.20), inset 0 1px 0 rgba(255,255,255,0.22);
  padding: 0 0.4rem;
  height: 50px;
  transition: background 0.5s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.5s cubic-bezier(0.4,0,0.2,1),
              border-color 0.5s cubic-bezier(0.4,0,0.2,1),
              height 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Fallback ohne backdrop-filter: deckende Füllung statt durchsichtigem Glas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-pill { background: rgba(28,36,75,0.88); }
  #main-nav.nav-light .nav-pill { background: rgba(255,255,255,0.97); }
}

#main-nav.scrolled .nav-pill {
  height: 44px;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  min-width: 0;
}

.nav-links li a {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.64rem, 0.72vw, 0.72rem);
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  padding: 0.4rem clamp(0.6rem, 1.05vw, 1.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
  position: relative;
  white-space: nowrap;
}


.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: clamp(0.5rem, 0.9vw, 1rem);
  right: clamp(0.5rem, 0.9vw, 1rem);
  height: 1px;
  background: rgba(255,255,255,0.7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease), background 0.4s var(--ease);
}


.nav-links li a:hover { color: #fff; opacity: 1; }
.nav-links li a:hover::after,
.nav-links li a.active::after { transform: scaleX(1); }
.nav-links li a.active { color: #fff; }

/* Pill-Divider, dünner Trenner zwischen Links und Telefon */
.nav-pill-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.22);
  margin: 0 0.3rem;
  flex-shrink: 0;
}

/* Telefon innerhalb der Pill */
.nav-phone-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.62rem, 0.68vw, 0.68rem);
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  padding: 0.32rem clamp(0.55rem, 0.8vw, 0.85rem);
  margin: 0 0.2rem;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 100px;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.08);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap;
}

.nav-phone-pill:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.50);
  color: #fff;
}

.nav-phone-pill svg { flex-shrink: 0; opacity: 0.72; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 50px;
  transition: var(--transition);
}

.nav-hamburger:hover { background: rgba(255,255,255,0.14); }

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
  transition: background 0.45s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}


.nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* === NAV ÜBER HELLEM HINTERGRUND (deckend, damit sie auf jeder Sektion trägt) === */
#main-nav.nav-light .nav-pill {
  background: rgba(255,255,255,0.96);
  border-color: rgba(28,36,75,0.10);
  box-shadow: 0 8px 30px rgba(28,36,75,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
}

#main-nav.nav-light .nav-links li a {
  color: rgba(28,36,75,0.72);
}

#main-nav.nav-light .nav-links li a:hover,
#main-nav.nav-light .nav-links li a.active {
  color: var(--dark);
  opacity: 1;
}

#main-nav.nav-light .nav-links li a::after {
  background: rgba(28,36,75,0.65);
}

#main-nav.nav-light .nav-pill-divider {
  background: rgba(28,36,75,0.14);
}

#main-nav.nav-light .nav-phone-pill {
  color: rgba(28,36,75,0.72);
  border-color: rgba(28,36,75,0.13);
  background: rgba(28,36,75,0.05);
}

#main-nav.nav-light .nav-phone-pill:hover {
  color: var(--dark);
  background: rgba(28,36,75,0.09);
  border-color: rgba(28,36,75,0.22);
}

#main-nav.nav-light .nav-hamburger span {
  background: var(--dark);
}

#main-nav.nav-light .nav-hamburger:hover {
  background: rgba(28,36,75,0.07);
}

#main-nav.nav-light .nav-logo-icon {
  filter: drop-shadow(0 1px 5px rgba(28,36,75,0.14));
}

/* Mobile Menu, elegant slide in from right */
.nav-mobile {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 100vw);
  z-index: 999;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 5.5rem 2.5rem 3rem;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1), box-shadow 0.45s ease;
  /* Schatten nur im geöffneten Zustand, sonst ragt er am rechten Rand ins Bild */
  box-shadow: none;
}


.nav-mobile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--dark);
}

.nav-mobile.open { transform: translateX(0); box-shadow: -16px 0 80px rgba(28,36,75,0.28); }

.nav-mobile a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  color: var(--dark);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(28,36,75,0.12);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.3s var(--ease);
}

.nav-mobile.open a {
  opacity: 1;
  transform: translateX(0);
}

.nav-mobile.open a:nth-child(1) { transition-delay: 0.12s; }
.nav-mobile.open a:nth-child(2) { transition-delay: 0.19s; }
.nav-mobile.open a:nth-child(3) { transition-delay: 0.26s; }
.nav-mobile.open a:nth-child(4) { transition-delay: 0.33s; }
.nav-mobile.open a:nth-child(5) { transition-delay: 0.40s; }
.nav-mobile.open a:nth-child(6) { transition-delay: 0.47s; }
.nav-mobile.open a:nth-child(7) { transition-delay: 0.54s; }
.nav-mobile.open a:nth-child(8) { transition-delay: 0.61s; }
.nav-mobile.open a:nth-child(9) { transition-delay: 0.68s; }
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile a:hover { color: var(--dark-mid); }

.nav-mobile .mobile-divider {
  width: 100%;
  height: 1px;
  background: rgba(28,36,75,0.15);
  margin: 1.25rem 0;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.4s var(--ease) 0.52s, transform 0.4s var(--ease) 0.52s;
}

.nav-mobile.open .mobile-divider { opacity: 1; transform: translateX(0); }

.nav-mobile-phone {
  font-size: 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  letter-spacing: 0.06em !important;
  padding: 0 !important;
  border-bottom: none !important;
  opacity: 0 !important;
  transform: translateX(24px) !important;
  transition: opacity 0.4s var(--ease) 0.72s, transform 0.4s var(--ease) 0.72s, color 0.3s var(--ease) !important;
}

.nav-mobile.open .nav-mobile-phone {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Mobile overlay backdrop */
.nav-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(28,36,75,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.nav-mobile-backdrop.open { opacity: 1; pointer-events: all; }

/* === FOOTER === */
#main-footer {
  background: #BEDCEE;
  color: var(--mid-gray);
  padding: 2rem 0 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(28,36,75,0.12);
}
.footer-logo-col .footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.footer-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.footer-logo-col p {
  color: var(--mid-gray);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(28,36,75,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid-gray);
  transition: var(--transition);
  font-size: 0.8rem;
}
.footer-social a:hover { background: var(--flaeche-stark); border-color: var(--flaeche-stark); color: var(--auf-flaeche); }

.footer-col h5 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark-mid);
  margin-bottom: 1.5rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.75rem; }
.footer-col ul li a {
  color: var(--mid-gray);
  font-size: 0.9rem;
  transition: var(--transition);
}
.footer-col ul li a:hover { color: var(--dark); padding-left: 6px; }
.footer-col address {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--mid-gray);
  line-height: 2;
}
.footer-col address a { color: var(--dark-mid); }
.footer-col address a:hover { text-decoration: underline; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  font-size: 0.8rem;
  color: var(--mid-gray);
}
.footer-bottom a { color: var(--mid-gray); transition: var(--transition); }
.footer-bottom a:hover { color: var(--dark); }
.footer-bottom-links { display: flex; gap: 1.5rem; }

/* === LAYOUT UTILITIES === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 3rem; }
.section { padding: 1.25rem 0; }
.section-sm { padding: 0.85rem 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 1.25rem;
}
.tag::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dark);
  border-radius: 2px;
}

.section-header { margin-bottom: 1rem; }
.section-header p { max-width: 540px; margin-top: 1rem; font-size: 1.05rem; }
.section-header.centered { text-align: center; }
.section-header.centered p { margin: 1rem auto 0; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: var(--transition);
  cursor: pointer;
}
/* CI-Regel für Buttons und Flächen mit Hover:
   Grundzustand hellblau, beim Überfahren dunkelblau. */
.btn-primary {
  background: var(--primary);
  color: var(--dark);
  border: 2px solid var(--primary);
}
.btn-primary:hover {
  background: var(--flaeche-stark);
  border-color: var(--flaeche-stark);
  color: var(--auf-flaeche);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28,36,75,0.28);
}
.btn-outline-dark {
  background: rgba(190,220,238,0.45);
  color: var(--dark);
  border: 2px solid var(--dark);
}
.btn-outline-dark:hover {
  background: var(--flaeche-stark);
  border-color: var(--flaeche-stark);
  color: var(--auf-flaeche);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28,36,75,0.22);
}
/* Auf den Fotokoepfen (Hero) bleibt der Outline-Button hell lesbar */
.hero .btn-outline-dark,
.page-hero .btn-outline-dark,
.khero .btn-outline-dark {
  background: rgba(190,220,238,0.20);
  border-color: rgba(190,220,238,0.55);
  color: #fff;
}
.hero .btn-outline-dark:hover,
.page-hero .btn-outline-dark:hover,
.khero .btn-outline-dark:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
}
/* Auf dem Foto darf der Hover nicht ins Dunkle kippen,
   sonst verschwindet der Button. Dort bleibt die helle Kante sichtbar. */
.hero .btn-primary:hover,
.page-hero .btn-primary:hover,
.khero .btn-primary:hover {
  background: var(--dark-mid);
  border-color: var(--primary);
  color: #fff;
}
/* Auf den hellblauen Flaechen braucht der Button eine dunkle Fuellung,
   sonst geht er im Untergrund unter. */
.bento-dark .btn-primary,
.calc-invite .btn-primary,
[style*="var(--flaeche)"] .btn-primary {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.bento-dark .btn-primary:hover,
.calc-invite .btn-primary:hover,
[style*="var(--flaeche)"] .btn-primary:hover {
  background: var(--dark-mid);
  border-color: var(--dark-mid);
  color: #fff;
}
.bento-dark .btn-outline-dark,
.calc-invite .btn-outline-dark,
[style*="var(--flaeche)"] .btn-outline-dark {
  background: transparent;
  border-color: rgba(28,36,75,0.38);
  color: var(--dark);
}
.bento-dark .btn-outline-dark:hover,
.calc-invite .btn-outline-dark:hover,
[style*="var(--flaeche)"] .btn-outline-dark:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.btn-icon {
  width: 18px; height: 18px;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn-icon { transform: translateX(4px); }

/* Liquid Glass Buttons, für Hero CTAs */
.btn-glass {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 4px 20px rgba(28,36,75,0.16), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.04);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.50);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(28,36,75,0.22), inset 0 1px 0 rgba(255,255,255,0.42);
}
.btn-glass-accent {
  background: rgba(190,220,238,0.18);
  border-color: rgba(190,220,238,0.42);
  color: white;
}
.btn-glass-accent:hover {
  background: rgba(190,220,238,0.30);
  border-color: rgba(190,220,238,0.62);
  color: white;
}

/* === HERO === */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
/* Hintergrund-Slides: liegen gestapelt, blenden per .is-active ineinander */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  will-change: opacity, transform;
}
.hero-bg.is-active { opacity: 1; }
.hero.loaded .hero-bg { transition: opacity 1.6s var(--ease), transform 9s ease; }
.hero.loaded .hero-bg.is-active { transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Scrim deutlich leichter, damit die Motive sichtbar bleiben.
     Lesbarkeit kommt aus dem weichen Verlauf hinter der Textspalte
     plus Textschatten auf Titel und Fließtext. */
  /* Der Text steht mittig, deshalb liegt der Filter gleichmäßig über dem
     Bild statt diagonal. Eine Spur kräftiger als zuvor, damit die Schrift
     auch über hellen Stellen ruhig lesbar bleibt. */
  background:
    linear-gradient(
      180deg,
      rgba(24,31,66,0.46) 0%,
      rgba(24,31,66,0.40) 40%,
      rgba(24,31,66,0.60) 100%
    ),
    radial-gradient(
      ellipse 120% 85% at 50% 42%,
      rgba(14,19,42,0.30) 0%,
      rgba(14,19,42,0.46) 100%
    );
}
.hero .container { max-width: 1440px; }
.hero-content {
  position: relative;
  z-index: 2;
  max-width: min(980px, 100%);
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(6rem, 20vh, 12rem);
  text-shadow: 0 1px 3px rgba(14,19,42,0.55), 0 2px 24px rgba(14,19,42,0.45);
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.3s forwards;
}
.hero-tag::before {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--primary);
}
.hero-title {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: 0.005em;
  color: white;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.5s forwards;
}
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--primary-light);
}
.hero-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0 auto 2.5rem;
  max-width: 660px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.7s forwards;
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.9s forwards;
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1s var(--ease) 1.4s forwards;
}
.hero-scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.6); }
}

/* === TRUST BAR === */
.trust-bar {
  background: var(--cream);
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border-light);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 2.5rem;
  border-right: 1px solid var(--border);
}
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: none; }
.trust-icon {
  width: 48px; height: 48px;
  background: var(--primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dark);
  transition: var(--transition);
}
.trust-item:hover .trust-icon { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.trust-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.1rem;
}
.trust-text span {
  font-size: 0.8rem;
  color: var(--soft-gray);
}

/* === ABOUT TEASER (Homepage) === */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.about-split-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}
/* Variante für Querformat-Motive (z. B. Teamaufnahme) */
.about-split-img--wide { aspect-ratio: 3/2; }
/* Gesichter sitzen im oberen Drittel, Beschnitt von unten, nicht mittig */
.about-split-img--wide img { object-position: center 34%; }
.about-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.about-split-img:hover img { transform: scale(1.03); }
.about-split-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.2);
  pointer-events: none;
}
.img-badge {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: var(--flaeche);
  color: var(--auf-flaeche);
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
.img-badge strong {
  display: block;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  color: var(--dark);
  line-height: 1;
}
.img-badge span { font-size: 0.8rem; color: rgba(28,36,75,0.72); }

.about-text .tag { margin-bottom: 1.25rem; }
.about-text h2 { margin-bottom: 1.5rem; }
.about-text p { margin-bottom: 1.25rem; }
.about-text .values {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}
.values {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.value-dot {
  width: 8px; height: 8px;
  background: var(--primary-dark);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.value-item p { margin: 0; }
.value-item strong { display: block; color: var(--dark); font-size: 0.95rem; margin-bottom: 0.15rem; }

/* === SERVICES SECTION === */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  border: 1px solid var(--border-light);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flaeche-stark), var(--primary));
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
  transform-origin: left;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 56px; height: 56px;
  background: var(--primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  margin-bottom: 1.5rem;
  transition: var(--transition);
}
.service-card:hover .service-icon { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.service-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-dark);
  transition: var(--transition);
}
.service-link svg { transition: transform 0.3s var(--ease); }
.service-link:hover { color: var(--dark); }
.service-link:hover svg { transform: translateX(4px); }

/* === QUOTE SECTION === */
.quote-section {
  background: #BEDCEE;
  padding: 2.25rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.quote-icon {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 8rem;
  line-height: 0.6;
  color: var(--dark);
  opacity: 0.15;
  margin-bottom: 2rem;
  display: block;
}
.quote-text {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--dark);
  max-width: 780px;
  margin: 0 auto 2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}
.quote-author {
  font-size: 0.85rem;
  color: var(--dark-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* === CTA SECTION === */
.cta-section {
  background: var(--cream);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 4.5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.cta-text h2 { font-size: 2rem; margin-bottom: 0.75rem; }
.cta-text p { font-size: 1rem; }
.cta-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-shrink: 0;
}

/* === IMAGE GALLERY === */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 260px;
  gap: 1rem;
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }

/* === LEISTUNGEN PAGE === */
.leistung-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border-light);
}
.leistung-block:last-child { border-bottom: none; }
.leistung-block.reverse .leistung-img { order: 2; }
.leistung-block.reverse .leistung-text { order: 1; }
.leistung-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.leistung-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.leistung-block:hover .leistung-img img { transform: scale(1.03); }
.leistung-number {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--border);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.leistung-text h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.leistung-text p { margin-bottom: 1rem; }
.leistung-features {
  list-style: none;
  margin: 1.5rem 0;
}
.leistung-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--mid-gray);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}
.leistung-features li:last-child { border-bottom: none; }
.leistung-features li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--primary-dark);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Leistungen Hero Cards */
.leistungen-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.overview-item {
  background: rgba(190,220,238,0.30);
  padding: 2rem 2.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.overview-item:hover { background: var(--flaeche-stark); border-color: var(--flaeche-stark); }
.overview-item:hover strong,
.overview-item:hover span,
.overview-item:hover p { color: var(--auf-flaeche); }
.overview-item-icon {
  width: 44px; height: 44px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  flex-shrink: 0;
  transition: var(--transition);
}
.overview-item:hover .overview-item-icon { background: rgba(190,220,238,0.22); color: var(--primary); }
.overview-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--dark);
  font-weight: 600;
}
.overview-item span { font-size: 0.8rem; color: var(--soft-gray); }

/* === KONTAKT PAGE === */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact-form-wrap {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 3rem;
  border: 1px solid var(--border-light);
}
.contact-form-wrap h2, .contact-form-wrap h3 { margin-bottom: 0.5rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.contact-form-wrap > p { margin-bottom: 2rem; font-size: 0.9rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid rgba(28,36,75,0.12);
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text-body);
  background: white;
  outline: none;
  transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(190,220,238,0.25);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-submit { width: 100%; justify-content: center; padding: 1rem; }

.contact-info { padding-top: 1rem; }
.contact-info h2, .contact-info h3 { margin-bottom: 0.5rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.contact-info > p { margin-bottom: 2.5rem; }
.info-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.info-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  transition: var(--transition);
}
.info-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary-dark); }
.info-card-icon {
  width: 44px; height: 44px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  flex-shrink: 0;
  transition: var(--transition);
}
.info-card:hover .info-card-icon { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.info-card-text strong {
  display: block;
  font-size: 0.85rem;
  color: var(--dark);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.info-card-text span, .info-card-text a {
  font-size: 0.95rem;
  color: var(--mid-gray);
}
.info-card-text a { color: var(--gold-dark); font-weight: 600; }
.info-card-text a:hover { text-decoration: underline; }

.hours-table { width: 100%; }
.hours-table tr {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
}
.hours-table tr:last-child { border-bottom: none; }
.hours-table .day { color: var(--dark); font-weight: 500; }
.hours-table .time { color: var(--mid-gray); }
.hours-highlight {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(190,220,238,0.15);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary-dark);
  font-size: 0.85rem;
  color: var(--dark);
  font-weight: 500;
}

/* === PAGE HERO (Unterseiten) === */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 46vh, 480px);
  padding: clamp(7.5rem, 15vh, 10rem) 0 clamp(2.75rem, 6vh, 4rem);
  background: var(--dark);
  overflow: hidden;
}
/* Das Motiv liegt offen da, nur ein Verlauf hält den Text lesbar. */
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transform: scale(1.06);
  animation: khero-settle 18s var(--ease-soft) forwards;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  /* Der Filter liegt nicht mehr über dem ganzen Bild, sondern nur dort, wo
     Schrift steht: eine dichte Bahn hinter der Textspalte, die sich nach
     rechts fast vollständig öffnet, dazu eine leichte Bodenkante unter der
     Zahlenleiste. Die obere rechte Hälfte des Motivs bleibt ungefiltert. */
  background:
    linear-gradient(
      99deg,
      rgba(14,19,42,0.88) 0%,
      rgba(14,19,42,0.84) 30%,
      rgba(14,19,42,0.74) 46%,
      rgba(14,19,42,0.50) 60%,
      rgba(14,19,42,0.22) 74%,
      rgba(14,19,42,0.05) 88%,
      rgba(14,19,42,0.00) 100%
    ),
    linear-gradient(
      to top,
      rgba(14,19,42,0.62) 0%,
      rgba(14,19,42,0.44) 15%,
      rgba(14,19,42,0.18) 34%,
      rgba(14,19,42,0.04) 54%,
      rgba(14,19,42,0.00) 70%
    );
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Der Kopf traegt jetzt auch kleine Versalien. Die brauchen einen zweiten,
     weichen Schatten, sonst franst die Zeile ueber hellen Stellen im Motiv aus. */
  text-shadow: 0 1px 3px rgba(14,19,42,0.55), 0 2px 18px rgba(14,19,42,0.38);
}
.page-hero-content .tag { color: var(--primary); }
.page-hero-content .tag::before { background: var(--primary); }
.page-hero-content h1 {
  color: #fff;
  margin-bottom: 1rem;
  /* Laeuft die Ueberschrift weiter nach rechts, steht sie auf dem offenen
     Teil des Motivs. Lieber zwei Zeilen als eine schlecht lesbare. */
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero-content .article-meta-row { color: rgba(255,255,255,0.82); }
.page-hero-content .article-meta-row .dot { background: var(--primary); }
.page-hero-content .lead {
  font-size: 1.12rem;
  color: rgba(255,255,255,0.86);
  max-width: 620px;
  line-height: 1.75;
}

/* --- Handlungsaufforderung im Kopf ---------------------------------------
   Zwei Schaltflaechen nebeneinander: die Handlung der Seite zuerst, das
   Telefon daneben. Auf jeder Unterseite an derselben Stelle. */
.page-hero .hero-cta,
.khero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 3.2vw, 2.4rem);
}
.page-hero .hero-cta .btn,
.khero .hero-cta .btn { padding: 0.9rem 1.9rem; }
/* Der Sprungpfeil steht auf der Kostenseite mit in der Reihe und darf
   dort keinen eigenen Abstand nach oben mehr mitbringen. */
.hero-cta .khero-cue { margin-top: 0; }

/* Zusicherung unter den Schaltflaechen, eine ruhige Zeile ohne Kasten. */
.page-hero .hero-assurance,
.khero .hero-assurance {
  margin-top: 1.1rem;
  /* Harte Grenze: laeuft die Zeile weiter nach rechts, steht sie auf dem
     ungefilterten Teil des Motivs und ist nicht mehr sicher lesbar. */
  max-width: 620px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

/* --- Zahlenleiste im Kopf -------------------------------------------------
   Getrennt wird ueber Haarlinien, nicht ueber Flaechen. Kaesten wuerden den
   Kopf in Kartenoptik kippen lassen. Die Zahlen zaehlen ueber [data-count]
   hoch, sobald sie im Bild sind.

   Nicht jede Seite hat vier Zahlen. Die Spaltenzahl steht als Klasse am
   Element (--2, --3, --4) und begrenzt zugleich die Breite der Leiste. Ohne
   diese Begrenzung zoege sich die Linie bei zwei Zahlen quer ueber die halbe
   leere Seite. Kein fit-content: bei umbrechendem Flex rechnen Browser die
   Breite zu klein und die letzte Zahl faellt in eine zweite Reihe.

   Die Innenabstaende stehen links und rechts. Frueher klebte die Zahl direkt
   an der Trennlinie der Nachbarspalte. */
.page-hero .hero-figures,
.khero .hero-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 976px;
  margin-top: clamp(2.25rem, 4.6vw, 3.25rem);
  border-top: 1px solid rgba(255,255,255,0.30);
}
.page-hero .hero-figures--3,
.khero .hero-figures--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 732px;
}
.page-hero .hero-figures--2,
.khero .hero-figures--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 488px;
}
.page-hero .hero-figures > div,
.khero .hero-figures > div {
  min-width: 0;
  padding: 1.55rem 1.85rem 0.45rem;
  border-right: 1px solid rgba(255,255,255,0.30);
}
/* Die erste Zahl steht buendig unter der Ueberschrift, die letzte braucht
   rechts keinen Abstand mehr, dort ist keine Linie. */
.page-hero .hero-figures > div:first-child,
.khero .hero-figures > div:first-child { padding-left: 0; }
.page-hero .hero-figures > div:last-child,
.khero .hero-figures > div:last-child { border-right: 0; padding-right: 0; }
.page-hero .hero-figures b,
.khero .hero-figures b {
  display: block;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.page-hero .hero-figures b span,
.khero .hero-figures b span { display: inline; }
.page-hero .hero-figures .figure-suffix,
.khero .hero-figures .figure-suffix { color: var(--primary); }
.page-hero .hero-figures > div > span,
.khero .hero-figures > div > span {
  display: block;
  margin-top: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.84);
  line-height: 1.65;
}

/* Auf schmalen Bildschirmen zwei Spalten, unabhaengig von der Klasse. Die
   Haarlinien wandern mit, sonst haengt in der zweiten Reihe eine Linie ins
   Leere. */
@media (max-width: 860px) {
  .page-hero .hero-figures,
  .khero .hero-figures,
  .page-hero .hero-figures--3,
  .khero .hero-figures--3,
  .page-hero .hero-figures--2,
  .khero .hero-figures--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
  .page-hero .hero-figures > div,
  .khero .hero-figures > div { padding: 1.35rem 1.25rem 0.35rem; }
  .page-hero .hero-figures > div:nth-child(odd),
  .khero .hero-figures > div:nth-child(odd) { padding-left: 0; }
  .page-hero .hero-figures > div:nth-child(even),
  .khero .hero-figures > div:nth-child(even) { border-right: 0; padding-right: 0; }
  .page-hero .hero-figures > div:nth-child(n+3),
  .khero .hero-figures > div:nth-child(n+3) {
    margin-top: 1.3rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(255,255,255,0.30);
  }
  .page-hero .hero-figures--3 > div:nth-child(3),
  .khero .hero-figures--3 > div:nth-child(3) {
    grid-column: 1 / -1;
    border-right: 0;
    padding-right: 0;
  }
}
@media (max-width: 640px) {
  .page-hero .hero-cta,
  .khero .hero-cta { gap: 0.65rem; }
  .page-hero .hero-cta .btn,
  .khero .hero-cta .btn { padding: 0.85rem 1.4rem; font-size: 0.82rem; }
  .page-hero .hero-assurance,
  .khero .hero-assurance { letter-spacing: 0.12em; font-size: 0.64rem; }
  .page-hero .hero-figures > div > span,
  .khero .hero-figures > div > span { font-size: 0.6rem; letter-spacing: 0.11em; }
}
@media (max-width: 520px) {
  .page-hero .hero-cta,
  .khero .hero-cta { flex-direction: column; align-items: stretch; }
  .page-hero .hero-cta .btn,
  .khero .hero-cta .btn,
  .hero-cta .khero-cue { justify-content: center; }
}

/* Auf schmalen Bildschirmen steht der Text ueber die volle Breite. Eine Bahn
   von links traegt ihn dort nicht mehr, es filtert nur der Verlauf von unten.
   Der muss kraeftiger sein als am Rechner: gemessen braucht weisse Schrift
   ueber einer hellen Stelle im Motiv mindestens 0.59 Deckung, sonst faellt
   der Kontrast unter 4.5:1. Offen bleibt das obere Fuenftel. */
@media (max-width: 860px) {
  .page-hero-overlay {
    background: linear-gradient(
      to top,
      rgba(14,19,42,0.86) 0%,
      rgba(14,19,42,0.80) 30%,
      rgba(14,19,42,0.72) 55%,
      rgba(14,19,42,0.62) 75%,
      rgba(14,19,42,0.44) 92%,
      rgba(14,19,42,0.34) 100%
    );
  }
}

/* === ANIMATIONS === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }


/* === INLINE-GRID KLASSEN (responsive ersatz für inline styles) === */
.transport-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .container { padding: 0 2rem; }
  .about-split { gap: 4rem; }
  .leistung-block { gap: 3.5rem; }
  .contact-grid { gap: 3rem; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-grid > .footer-logo-col { grid-column: span 1; }
}

/* Stufe 1: ab 1400 px enger setzen, damit die Pill früh Platz spart */
@media (max-width: 1400px) {
  .nav-links li a { letter-spacing: 0.09em; }
}

/* Stufe 2: ab 1200 px zeigt die Telefon-Pill nur noch das Symbol */
@media (max-width: 1200px) {
  .nav-phone-pill { font-size: 0; gap: 0; padding: 0.42rem 0.55rem; }
  .nav-phone-pill svg { width: 15px; height: 15px; opacity: 0.9; }
}

/* Stufe 3: ab 1080 px auf das Burger-Menü umschalten */
@media (max-width: 1080px) {
  #main-nav { top: 0.5rem; padding: 0 1.25rem; }

  /* Scrolled: deckende weiße Leiste, Logo und Hamburger sichtbar */
  #main-nav.scrolled {
    top: 0;
    background: #fff;
    box-shadow: 0 2px 20px rgba(28,36,75,0.09);
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }

  .nav-links, .nav-phone-pill, .nav-pill-divider { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-icon { height: 38px; }

  #main-nav.scrolled .nav-logo-icon {
    height: 34px;
    filter: drop-shadow(0 1px 4px rgba(28,36,75,0.12));
  }

  /* Hamburger-Balken dunkel auf weißem Hintergrund */
  #main-nav.scrolled .nav-hamburger span { background: var(--dark); }
  #main-nav.scrolled .nav-hamburger:hover { background: rgba(28,36,75,0.07); }

  /* Nav-Inner: Logo links, Hamburger rechts */
  .nav-inner {
    height: 56px;
    justify-content: space-between;
  }

  /* Pill-Rahmen auf mobil entfernen, Hamburger steht frei */
  #main-nav .nav-pill,
  #main-nav.nav-light .nav-pill,
  #main-nav.scrolled .nav-pill {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    height: auto;
  }
}

@media (max-width: 640px) {
  .nav-logo-icon { height: 34px; }
  #main-nav.scrolled .nav-logo-icon { height: 30px; }
  .nav-inner { height: 50px; }

  /* Kleinere Schrift im mobilen Menü damit alles passt */
  .nav-mobile {
    padding: 5rem 1.75rem 2rem;
  }
  .nav-mobile a {
    font-size: 1.15rem;
    padding: 0.65rem 0;
  }
  .hero-scroll { bottom: 0.75rem; }
  .hero-scroll .scroll-line { height: 30px; }
  .hero-sub { margin-bottom: 1.5rem; }
  .hero-tag::before { display: none; }
}

@media (max-width: 900px) {

  .trust-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .trust-item { border-right: none; padding: 0; }

  .about-split { grid-template-columns: 1fr; gap: 3rem; }
  .about-split-img { aspect-ratio: 16/9; max-height: 420px; }
  /* Querformat-Variante behält 3/2, 16/9 würde die Köpfe anschneiden */
  .about-split-img--wide { aspect-ratio: 3/2; }
  .about-split-img--wide .img-badge {
    bottom: 1rem;
    left: 1rem;
    padding: 0.7rem 1.1rem;
  }
  .about-split-img--wide .img-badge strong { font-size: 1.1rem; }
  .about-split-img--wide .img-badge span { font-size: 0.7rem; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .leistungen-overview { grid-template-columns: repeat(2, 1fr); }
  .leistung-block { grid-template-columns: 1fr; gap: 2.5rem; }
  .leistung-block.reverse .leistung-img { order: 0; }
  .leistung-block.reverse .leistung-text { order: 0; }

  .contact-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; gap: 2rem; padding: 3.5rem 2rem; }

  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item:first-child { grid-column: span 2; grid-row: span 1; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-inner { padding: 0 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

}

@media (max-width: 768px) {
  .about-split { gap: 2.5rem; }
  .leistung-block { gap: 2rem; }
  .contact-grid { gap: 2rem; }

  .transport-cards { grid-template-columns: 1fr 1fr; }

  .page-hero { padding: 6.5rem 0 2.75rem; }

  .hero-actions { flex-wrap: wrap; gap: 0.75rem; }

}

@media (max-width: 640px) {
  .section { padding: 1rem 0; }
  .container { padding: 0 1.25rem; }
  .services-grid { grid-template-columns: 1fr; }
  .leistungen-overview { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:first-child { grid-column: span 1; }
  h1 { font-size: 2.2rem; }

  .transport-cards { grid-template-columns: 1fr; }
    .page-hero { padding: 6rem 0 2.5rem; }
  .page-hero-content h1 { font-size: 2rem; }

  .cta-inner { text-align: center; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { justify-content: center; }

  .leistung-number { font-size: 3rem; }
  h4 { font-size: 1.05rem; }
}

/* === GENERIC RESPONSIVE TWO-COL GRID === */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

@media (max-width: 900px) {
  .two-col-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================
   DROPDOWN NAVIGATION
   ============================================ */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Unsichtbare Brücke füllt den Spalt zwischen Trigger und Panel */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 12px;
  background: transparent;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.64rem, 0.72vw, 0.72rem);
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  padding: 0.4rem clamp(0.6rem, 1.05vw, 1.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  background: none;
  border: none;
  outline: none;
}

.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: clamp(0.5rem, 0.9vw, 1rem);
  right: clamp(0.5rem, 0.9vw, 1rem);
  height: 1px;
  background: rgba(255,255,255,0.7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease), background 0.4s var(--ease);
}

.nav-dropdown:hover .nav-dropdown-trigger { color: #fff; }
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown-trigger.dd-open::after { transform: scaleX(1); }

.nav-dropdown-trigger .chev {
  width: 9px; height: 9px;
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.nav-dropdown:hover .nav-dropdown-trigger .chev,
.nav-dropdown-trigger.dd-open .chev { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  /* Hellblau und weitgehend deckend, damit der Text klar lesbar bleibt */
  background: rgba(190,220,238,0.97);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(28,36,75,0.26), inset 0 1px 0 rgba(255,255,255,0.75);
  min-width: 210px;
  padding: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease,
              background 0.5s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.5s cubic-bezier(0.4,0,0.2,1),
              border-color 0.5s cubic-bezier(0.4,0,0.2,1);
  z-index: 20;
}

.nav-dropdown-panel::before { display: none; }

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown-panel.dd-open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Items, dunkler Text auf hellblauem Grund.
   .nav-dropdown davor, sonst gewinnt .nav-links li a mit der Textfarbe. */
.nav-dropdown .nav-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28,36,75,0.88);
  transition: background 0.14s ease, color 0.14s ease;
  border-radius: 13px;
  white-space: nowrap;
}

.nav-dropdown .nav-dropdown-panel a:hover {
  background: rgba(28,36,75,0.10);
  color: var(--dark);
}

.dd-icon {
  width: 24px; height: 24px;
  background: rgba(28,36,75,0.10);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(28,36,75,0.62);
  flex-shrink: 0;
  transition: background 0.14s ease, color 0.14s ease;
}

.nav-dropdown .nav-dropdown-panel a:hover .dd-icon {
  background: rgba(28,36,75,0.18);
  color: var(--dark);
}

/* === Scrolled-Zustand: gleicher hellblauer Grund, voll deckend === */
#main-nav.nav-light .nav-dropdown-panel {
  background: rgba(190,220,238,1);
  border-color: rgba(255,255,255,0.70);
  box-shadow: 0 10px 32px rgba(28,36,75,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
}

#main-nav.nav-light .nav-dropdown-panel a {
  color: rgba(28,36,75,0.88);
}

#main-nav.nav-light .nav-dropdown-panel a:hover {
  background: rgba(28,36,75,0.10);
  color: var(--dark);
}

#main-nav.nav-light .dd-icon {
  background: rgba(28,36,75,0.10);
  color: rgba(28,36,75,0.62);
}

#main-nav.nav-light .nav-dropdown-panel a:hover .dd-icon {
  background: rgba(28,36,75,0.18);
  color: var(--dark);
}

#main-nav.nav-light .nav-dropdown-trigger { color: rgba(28,36,75,0.72); }
#main-nav.nav-light .nav-dropdown:hover .nav-dropdown-trigger { color: var(--dark); }
#main-nav.nav-light .nav-dropdown-trigger::after { background: rgba(28,36,75,0.65); }

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.75rem;
}

.faq-category {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.faq-cat-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border-light);
}

.faq-cat-icon {
  width: 40px; height: 40px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  flex-shrink: 0;
  transition: var(--transition);
}

.faq-cat-header h2, .faq-cat-header h3 {
  font-size: 1rem;
  margin: 0;
  color: var(--dark);
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
}
.faq-item:last-child { border-bottom: none; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark);
  transition: color 0.25s var(--ease);
  user-select: none;
}

.faq-q:hover { color: var(--gold-dark); }
.faq-item.open .faq-q { color: var(--gold-dark); }

.faq-chev {
  width: 16px; height: 16px;
  color: var(--soft-gray);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.faq-item.open .faq-chev { transform: rotate(180deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease);
}
.faq-item.open .faq-a { max-height: 900px; }

.faq-a-inner {
  padding: 0 2rem 1.25rem;
}
.faq-a-inner p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--mid-gray);
}
.faq-a-inner ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}
.faq-a-inner ul li {
  font-size: 0.86rem;
  color: var(--mid-gray);
  margin-bottom: 0.3rem;
  line-height: 1.7;
}

/* ============================================
   RESPONSIVE, WEITERE SEITEN
   ============================================ */
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================
   BLOG / RATGEBER
   ============================================ */

.blog-intro { padding-top: 4.5rem; padding-bottom: 1rem; }

/* Kategorie-Filterleiste */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 3.5rem;
}
.blog-chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid-gray);
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: 0.55rem 1.3rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.blog-chip:hover {
  border-color: var(--primary-dark);
  color: var(--dark);
}
.blog-chip.active {
  background: var(--flaeche-stark);
  border-color: var(--flaeche-stark);
  color: var(--auf-flaeche);
}

/* Featured / Aufmacher-Beitrag */
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 4.5rem;
  transition: var(--transition);
}
.blog-featured:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}
.blog-featured-img {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.blog-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-body {
  padding: 3rem 3rem 3rem 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 1rem 0 1rem;
  line-height: 1.25;
}
.blog-featured-body p {
  font-size: 1.02rem;
  margin-bottom: 1.75rem;
}

/* Kategorie-Badge */
.blog-badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(28,36,75,0.12);
}
.blog-featured-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-featured-flag::before {
  content: '';
  width: 22px; height: 1.5px;
  background: var(--primary-dark);
}

/* Meta-Zeile (Datum · Lesezeit) */
.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--soft-gray);
  margin-bottom: 0.4rem;
}
.blog-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--primary-dark);
  flex-shrink: 0;
}

/* Beitrags-Raster */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}
.blog-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card-body h3 {
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0.55rem 0 0.6rem;
  transition: color 0.3s var(--ease);
}
.blog-card:hover .blog-card-body h3 { color: var(--dark-mid); }
.blog-card-body p {
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}
.blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: auto;
  transition: var(--transition);
}
.blog-readmore svg { transition: transform 0.3s var(--ease); }
.blog-card:hover .blog-readmore { color: var(--dark); }
.blog-card:hover .blog-readmore svg { transform: translateX(4px); }

/* Soft ausblenden beim Filtern */
.blog-card.is-hidden { display: none; }

@media (max-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .blog-filter { margin-bottom: 2.5rem; }
}

/* ============================================
   ÜBER-UNS, Redesign (Willkommen · Vertrauen · Team)
   ============================================ */

/* --- Familienbild (Seitenkopf, ersetzt den Header) --- */
.uu-family {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.uu-family img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Wer wir sind (zentrierter Textblock) --- */
.uu-story {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.uu-story h2 { margin-bottom: 1.5rem; }
.uu-story p { margin-bottom: 1.25rem; }
.intro-signature {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--dark);
  margin-top: 1rem;
}

@media (max-width: 560px) {
    /* Schriftzug nicht mehr mitten im Bild, sondern als Leiste am unteren Rand */
  .uu-family .img-badge {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 0.7rem 1.1rem;
    background: rgba(28,36,75, 0.82);
    backdrop-filter: blur(8px);
  }
  .uu-family .img-badge strong { font-size: 1.15rem; }
  .uu-family .img-badge span { font-size: 0.72rem; }
}

/* --- Vertrauens-Leiste --- */
.uu-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2.75rem 1.5rem;
}
.uu-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}
.uu-trust-item + .uu-trust-item { border-left: 1px solid var(--border-light); }
.uu-trust-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--dark);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uu-trust-item strong {
  display: block;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.15rem;
  color: var(--dark);
  margin-bottom: 0.4rem;
}
.uu-trust-item span {
  font-size: 0.9rem;
  color: var(--mid-gray);
  line-height: 1.55;
}

/* --- Team (moderne Porträts) --- */
.team-modern {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.team-member {
  flex: 0 1 280px;
  max-width: 300px;
  text-align: center;
}
.team-member-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.team-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease);
}
.team-member:hover .team-member-photo img { transform: scale(1.04); }
.team-member h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.team-member .team-role { margin-bottom: 0; }

/* Zitat einzelner Kolleginnen und Kollegen, ruhig unter der Rolle.
   Linksbündig, weil zentrierter Fließtext ab drei Zeilen schwer zu lesen ist. */
.team-member .team-quote {
  margin: 1.15rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mid-gray);
  quotes: "\201E" "\201C" "\201A" "\2018";
}
.team-member .team-quote::before { content: open-quote; }
.team-member .team-quote::after  { content: close-quote; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .uu-trust { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .uu-trust-item:nth-child(odd) { border-left: none; }
}
@media (max-width: 560px) {
  .uu-trust { grid-template-columns: 1fr; gap: 2rem; }
  .uu-trust-item { border-left: none !important; }
  .team-member { flex-basis: 100%; max-width: 340px; }
  .intro-signature { font-size: 1.35rem; }
}

/* ============================================
   BLOG-ARTIKEL / RATGEBER-DETAILSEITEN
   ============================================ */
.article-section { background: var(--warm-white); padding: 1.25rem 0 1.5rem; }

.article-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

/* --- Inhaltsverzeichnis (klickbar, sticky) --- */
.article-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}
.article-toc-inner {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.article-toc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.article-toc nav ul { list-style: none; margin: 0; padding: 0; }
.article-toc nav li { margin: 0; }
.article-toc nav li.toc-sub a { padding-left: 1.6rem; font-size: 0.82rem; color: var(--mid-gray); }
.article-toc nav a {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--dark-mid);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: all 0.2s ease;
  text-decoration: none;
}
.article-toc nav a:hover,
.article-toc nav a.active {
  color: var(--dark);
  background: var(--cream);
  border-left-color: var(--gold);
}

/* --- Artikel-Fließtext --- */
.article-body { max-width: 760px; min-width: 0; }
.article-body > * + * { margin-top: 1.25rem; }
.article-body .article-lead {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--dark-mid);
  font-weight: 400;
}
.article-body h2 {
  scroll-margin-top: 95px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: 2.75rem;
  padding-top: 0.5rem;
}
.article-body h2:first-of-type { margin-top: 1.5rem; }
.article-body h3 {
  scroll-margin-top: 95px;
  font-size: 1.3rem;
  margin-top: 1.75rem;
  color: var(--dark-mid);
}
.article-body p { font-size: 1.02rem; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin-top: 1rem; }
.article-body li { color: var(--mid-gray); line-height: 1.75; margin-bottom: 0.5rem; }
.article-body strong { color: var(--dark); font-weight: 600; }
.article-body a:not(.btn) { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}


/* --- Kosten-/Hinweis-Box --- */
.article-callout {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.article-callout p { margin: 0; }
.article-callout p + p { margin-top: 0.75rem; }
.article-price {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  color: var(--dark);
}

/* --- Vergleichstabelle --- */
.article-table-wrap { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}
.article-table th, .article-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.article-table thead th {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--cream);
}
.article-table tbody th {
  font-weight: 600;
  color: var(--dark-mid);
  font-family: 'Inter', sans-serif;
}
.article-table td { color: var(--mid-gray); }
.article-table tr:last-child td, .article-table tr:last-child th { border-bottom: none; }

/* --- FAQ innerhalb des Artikels --- */
.article-faq { margin-top: 2.5rem; }
.article-faq .faq-item { border-bottom: 1px solid var(--border); }

/* --- Artikel-Kopf / Meta --- */
.article-meta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--mid-gray);
  margin-bottom: 1.5rem;
}
.article-meta-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--primary-dark); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .article-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .article-toc { order: -1; position: static; }
  .article-toc-inner { position: static; }
  .article-toc nav ul { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 560px) {
  .article-toc nav ul { columns: 1; }
  .article-body { max-width: 100%; }
}

/* ============================================
   GÖCK-ERGÄNZUNGEN, Bildkarten & Zertifikate
   ============================================ */

/* --- Orientierungs-Bildkarten (Bestattungsarten / -orte / Checkliste) --- */
.orient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.orient-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  color: inherit;
}
.orient-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}
.orient-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
}
.orient-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.orient-card:hover .orient-card-img img { transform: scale(1.05); }
.orient-card-body {
  padding: 1.9rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.orient-card-body h3 { font-size: 1.2rem; margin-bottom: 0.7rem; }
.orient-card-body p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.4rem;
  flex: 1;
}

/* --- Zertifikats-Reihe --- */
.cert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  padding: 1rem 0 0.5rem;
}
.cert-row img {
  height: 92px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  filter: grayscale(0.15);
  transition: var(--transition);
}
.cert-row img:hover { opacity: 1; filter: none; }

@media (max-width: 900px) {
  .orient-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .cert-row { gap: 2.25rem; }
  .cert-row img { height: 70px; }
}

/* --- Navigation: breites Göck-Wortmarken-Logo (5,8:1) --------------------
   Littig nutzt eine kompakte Bildmarke und zentriert die Pill.
   Die Göck-Wortmarke ist deutlich breiter -> Logo links, Pill rechts. */
@media (min-width: 1101px) {
  .nav-inner { justify-content: space-between; }
  .nav-logo { position: static; transform: none; }
  .nav-logo-icon { height: 36px; }
  #main-nav.scrolled .nav-logo-icon { height: 32px; }
  .nav-links li a { padding: 0.4rem 1.1rem; }
}

/* --- Galerie mit 5 Motiven (1 groß + 4 klein) --- */
.gallery-grid.gallery-5 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .gallery-grid.gallery-5 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .gallery-grid.gallery-5 .gallery-item { aspect-ratio: 4/3; }
  .gallery-grid.gallery-5 .gallery-item:first-child { grid-column: span 2; grid-row: span 1; }
}

/* --- Team auf der Seite Über uns: hochkant runde Köpfe statt zehn
       bildschirmbreiter Portraits untereinander --- */
@media (max-width: 560px) {
  #team .team-modern { gap: 2rem; }
  #team .team-member { flex-basis: 100%; max-width: 420px; }
  #team .team-member-photo {
    width: 112px;
    height: 112px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 0 auto 0.9rem;
  }
}

/* --- Team: vier Personen in einer Reihe --- */
.team-modern.team-4 { gap: 1.6rem; }
.team-modern.team-4 .team-member { flex: 0 1 248px; max-width: 260px; }
@media (max-width: 1100px) {
  .team-modern.team-4 .team-member { flex: 0 1 220px; }
}
@media (max-width: 560px) {
  .team-modern.team-4 .team-member { flex-basis: 100%; max-width: 320px; }
}

/* ============================================================================
   MOTION-SYSTEM · SCROLL-EFFEKTE · MOTION GRAPHICS
   Ruhige Bewegung: nur transform und opacity, Distanz höchstens 40 px,
   Dauer 0,9 bis 1,2 s. Alles wird über prefers-reduced-motion abgeschaltet.
   ============================================================================ */

:root {
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-soft:   cubic-bezier(.22,1,.36,1);
}

/* --- Reveal-Grundsystem ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.visible,
.reveal.in { opacity: 1; transform: none; will-change: auto; }

.reveal-left  { transform: translateX(-34px); }
.reveal-right { transform: translateX(34px); }
.reveal-scale { transform: scale(0.955); }
.reveal-fade  { transform: none; }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }
.reveal-d6 { transition-delay: .48s; }

/* Automatische Staffelung für Kinder eines Containers */
.reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.reveal-group.visible > *,
.reveal-group.in > * { opacity: 1; transform: none; }
.reveal-group.visible > *:nth-child(1) { transition-delay: .00s; }
.reveal-group.visible > *:nth-child(2) { transition-delay: .07s; }
.reveal-group.visible > *:nth-child(3) { transition-delay: .14s; }
.reveal-group.visible > *:nth-child(4) { transition-delay: .21s; }
.reveal-group.visible > *:nth-child(5) { transition-delay: .28s; }
.reveal-group.visible > *:nth-child(6) { transition-delay: .35s; }
.reveal-group.visible > *:nth-child(7) { transition-delay: .42s; }
.reveal-group.visible > *:nth-child(8) { transition-delay: .49s; }

/* --- Bild-Vorhang: Motiv wird aufgedeckt, Foto zoomt leicht zurück --------- */
.img-curtain { position: relative; overflow: hidden; }
.img-curtain > img { transform: scale(1.09); transition: transform 1.6s var(--ease-soft); }
.img-curtain::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--cream);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1.05s var(--ease-soft);
  z-index: 2;
}
.img-curtain.visible > img { transform: scale(1); }
.img-curtain.visible::after { transform: scaleX(0); }

/* --- Zeilenweiser Textaufbau (per js/motion.js in .sline zerlegt) ---------- */
/* Etwas Luft, damit Ober- und Unterlängen beim Aufbau nicht abgeschnitten werden */
.split-line { display: block; overflow: hidden; padding: 0.08em 0 0.14em; margin-bottom: -0.12em; }
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-soft);
}
.split-ready.visible .split-line > span { transform: translateY(0); }
.split-ready.visible .split-line:nth-child(2) > span { transition-delay: .09s; }
.split-ready.visible .split-line:nth-child(3) > span { transition-delay: .18s; }
.split-ready.visible .split-line:nth-child(4) > span { transition-delay: .27s; }

/* --- Lesefortschritt am oberen Rand --------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--primary) 0%, var(--gold-light) 100%);
  z-index: 1200;
  pointer-events: none;
}

/* --- Parallax-Ebenen (Faktor per data-parallax, gesteuert in motion.js) ---- */
.parallax { will-change: transform; }

/* --- Animierte Zahlen ------------------------------------------------------ */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.counter-item { text-align: center; padding: 1.75rem 1rem; }
.counter-value {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.counter-suffix { color: var(--gold); }
.counter-label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft-gray);
}
.counter-grid.on-dark .counter-value { color: var(--auf-flaeche); }
.counter-grid.on-dark .counter-label { color: rgba(28,36,75,0.68); }

/* --- Laufband der Einzugsgebiete ------------------------------------------ */
.marquee {
  overflow: hidden;
  padding: 1.15rem 0;
  background: var(--flaeche);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-run 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(28,36,75,0.78);
  white-space: nowrap;
}
.marquee-track span::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dark);
  opacity: 0.45;
  flex-shrink: 0;
}
@keyframes marquee-run {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* --- Rosette: das Logo-Motiv als gezeichnete Motion Graphic --------------- */
.rosette {
  width: clamp(150px, 20vw, 260px);
  height: auto;
  color: var(--primary);
  opacity: 0.9;
}
.rosette circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 2.2s var(--ease-soft);
}
.rosette.visible circle { stroke-dashoffset: 0; }
.rosette.visible circle:nth-child(2) { transition-delay: .14s; }
.rosette.visible circle:nth-child(3) { transition-delay: .28s; }
.rosette.visible circle:nth-child(4) { transition-delay: .42s; }
.rosette.visible circle:nth-child(5) { transition-delay: .56s; }
.rosette.visible circle:nth-child(6) { transition-delay: .70s; }
.rosette.visible circle:nth-child(7) { transition-delay: .84s; }
.rosette-spin { animation: rosette-turn 90s linear infinite; transform-origin: 50% 50%; }
@keyframes rosette-turn { to { transform: rotate(360deg); } }

/* --- Rosette als großflächiger Hintergrund, rechts angeschnitten ---------- */
.rosette-stage { position: relative; overflow: hidden; }
.rosette-stage > .container { position: relative; z-index: 1; }
.rosette-bg {
  position: absolute;
  top: 50%;
  right: clamp(-460px, -16vw, -140px);
  transform: translateY(-50%);
  width: clamp(620px, 68vw, 1180px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.rosette-bg .rosette {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  color: var(--primary-dark);
}
.rosette-bg .rosette circle { stroke-width: 0.5; }

@media (max-width: 900px) {
  .rosette-bg {
    right: -32vw;
    width: 110vw;
  }
  .rosette-bg .rosette { opacity: 0.35; }
}

/* --- Schwebende Lichtpunkte im Hero --------------------------------------- */
.hero-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-motes i {
  position: absolute;
  bottom: -12%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(190,220,238,0.55);
  filter: blur(0.5px);
  animation: mote-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes mote-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .75; }
  80%  { opacity: .5; }
  100% { transform: translate3d(28px, -108vh, 0) scale(1.15); opacity: 0; }
}

/* --- Weiche Sektionsübergänge --------------------------------------------- */
.wave-top, .wave-bottom { display: block; width: 100%; height: clamp(38px, 5vw, 72px); }
.wave-top   { margin-bottom: -1px; }
.wave-bottom{ margin-top: -1px; }

/* --- Buttons mit Lichtkante ----------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { left: 135%; }
.btn > * { position: relative; z-index: 1; }

/* --- Karten heben sich beim Zeigen ---------------------------------------- */
.lift { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ============================================================================
   STICKY-AKTIONSLEISTE (mobil)
   ============================================================================ */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 990;
  display: none;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transform: translateY(105%);
  transition: transform .4s var(--ease-out);
}
.action-bar.show { transform: translateY(0); }
.action-bar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.action-bar .ab-call  { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.action-bar .ab-calc  { background: var(--flaeche); color: var(--auf-flaeche); }
@media (max-width: 780px) { .action-bar { display: flex; } }

/* ============================================================================
   BREADCRUMB
   ============================================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.1rem;
}
.breadcrumb a { color: rgba(255,255,255,0.6); transition: color .25s var(--ease); }
.breadcrumb a:hover { color: var(--primary); }
/* Brotkrumen auf hellem Grund, wenn kein Kopfbild darüber liegt */
.section > .container > .breadcrumb,
.section > .breadcrumb { color: var(--mid-gray); }
.section > .container > .breadcrumb a,
.section > .breadcrumb a { color: var(--mid-gray); }
.section > .container > .breadcrumb a:hover { color: var(--dark); }
.section > .container > .breadcrumb .current { color: var(--dark); font-weight: 600; }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--primary); }

/* ============================================================================
   KOSTEN-SEITE
   ============================================================================ */
.khero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  padding: clamp(7.5rem, 13vh, 10rem) 0 clamp(3.5rem, 6vh, 5rem);
}
.khero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0.24;
  transform: scale(1.06);
  animation: khero-settle 16s var(--ease-soft) forwards;
}
@keyframes khero-settle { to { transform: scale(1); } }
.khero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(190,220,238,0.20), transparent 55%),
    linear-gradient(160deg, rgba(28,36,75,0.62) 0%, rgba(16,22,48,0.94) 100%);
}
.khero h1 { color: #fff; max-width: 17ch; margin-bottom: 1.2rem; text-wrap: balance; }
.khero h1 em { font-style: italic; color: var(--primary); }
.khero .lead { color: rgba(255,255,255,0.84); max-width: 56ch; font-size: 1.05rem; line-height: 1.8; }
.khero .tag { color: var(--primary); }
.khero .tag::before { background: var(--primary); }

.khero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(190,220,238,0.20);
}
.khero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
}
.khero-trust-item svg { color: var(--primary); flex-shrink: 0; }

.khero-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.4rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(190,220,238,0.34);
  border-radius: 40px;
  background: rgba(190,220,238,0.08);
  color: #fff;
  font-size: 0.86rem;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.khero-cue:hover { background: rgba(190,220,238,0.18); border-color: rgba(190,220,238,0.6); transform: translateY(-2px); }
.khero-cue svg { color: var(--primary); animation: cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Preistabelle */
.price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  margin-top: 1.75rem;
}
.price-table th {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.95rem 1.2rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.price-table td {
  padding: 1rem 1.2rem;
  font-size: 0.94rem;
  color: var(--mid-gray);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.price-table tr:last-child td { border-bottom: none; }
.price-table tbody tr { transition: background .25s var(--ease); }
.price-table tbody tr:hover { background: rgba(190,220,238,0.10); }
.price-table .pt-name { font-weight: 600; color: var(--dark); display: block; margin-bottom: 0.2rem; }
.price-table .pt-note { font-size: 0.78rem; color: var(--soft-gray); line-height: 1.5; }
.price-table .price {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.1rem;
  color: var(--dark);
  white-space: nowrap;
}
.price-hint { font-size: 0.8rem; color: var(--soft-gray); margin-top: 1rem; line-height: 1.7; }

/* Versprechen-Kasten */
.kosten-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.kosten-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.8rem;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.kosten-aside-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.kosten-aside-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.promise-item { display: flex; align-items: flex-start; gap: 0.9rem; }
.promise-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark);
}
.promise-item strong { display: block; font-size: 0.9rem; color: var(--dark); margin-bottom: 0.2rem; }
.promise-item span { font-size: 0.82rem; color: var(--mid-gray); line-height: 1.6; }

/* Kalkulator-Einladung */
.calc-invite {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--flaeche);
  color: var(--auf-flaeche);
  border-radius: clamp(18px, 2.5vw, 28px);
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.calc-invite::before {
  content: '';
  position: absolute;
  top: -40%; right: -12%;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 68%);
  pointer-events: none;
}
.calc-invite h2 { color: var(--auf-flaeche); margin-bottom: 1rem; }
.calc-invite h2 em { font-style: italic; color: var(--dark-light); }
.calc-invite p { color: var(--mid-gray); }
.calc-invite .tag { color: var(--dark); }
.calc-invite .tag::before { background: var(--dark); }
.calc-list { list-style: none; margin: 1.5rem 0 2rem; display: grid; gap: 0.7rem; }
.calc-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--mid-gray);
}
.calc-list svg { color: var(--dark); flex-shrink: 0; }
.calc-panel {
  position: relative;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(28,36,75,0.12);
  border-radius: 18px;
  padding: 1.75rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.calc-panel-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.calc-panel-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(28,36,75,0.10);
  color: var(--dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.calc-panel h3 { color: var(--auf-flaeche); font-size: 1.15rem; margin-bottom: 0.15rem; }
.calc-panel-top span { font-size: 0.78rem; color: var(--soft-gray); }
.calc-panel p { font-size: 0.88rem; margin-bottom: 1.35rem; }
.calc-panel .btn { width: 100%; justify-content: center; }

/* ============================================================================
   ABLAUF-ZEITSTRAHL
   ============================================================================ */
.timeline { position: relative; margin-top: 1.25rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 23px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--primary), var(--border-light));
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--dark);
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.timeline-item:hover .timeline-dot { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.timeline-body h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.timeline-body p { font-size: 0.95rem; }

/* ============================================================================
   BENTO-RASTER
   ============================================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.bento-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.bento-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border); }
.bento-card .bento-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--primary);
  color: var(--dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.35rem;
  transition: var(--transition);
}
.bento-card:hover .bento-icon { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.bento-dark:hover .bento-icon { background: rgba(28,36,75,0.20); color: var(--dark); }
.bento-card h3 { font-size: 1.18rem; }
.bento-card p { font-size: 0.92rem; margin: 0; }
.bento-card .service-link { margin-top: auto; padding-top: 0.85rem; }
.bento-wide { grid-column: span 2; }
.bento-dark { background: var(--flaeche); border-color: transparent; }
.bento-dark h3 { color: var(--auf-flaeche); }
.bento-dark p { color: var(--mid-gray); }
.bento-dark .bento-icon { background: rgba(28,36,75,0.12); color: var(--dark); }
.bento-dark .service-link { color: var(--dark); }

/* ============================================================================
   NOTFALL-BANNER
   ============================================================================ */
.emergency-bar { background: var(--gold); padding: 1.1rem 0; }
.emergency-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  text-align: center;
}
.emergency-inner strong { color: var(--navy); font-size: 0.95rem; font-weight: 700; }
.emergency-inner a {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(28,36,75,0.35);
  transition: border-color .25s var(--ease);
}
.emergency-inner a:hover { border-color: var(--navy); }

/* ============================================================================
   STANDORT-KARTEN
   ============================================================================ */
.standort-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.standort-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.standort-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.standort-card-head {
  background: var(--primary);
  color: var(--dark);
  padding: 1.15rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: var(--transition);
}
.standort-card-head h3 { color: var(--dark); font-size: 1.2rem; margin: 0; transition: var(--transition); }
.standort-card-head svg { color: var(--dark); flex-shrink: 0; transition: var(--transition); }
.standort-card:hover .standort-card-head { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.standort-card:hover .standort-card-head h3 { color: var(--auf-flaeche); }
.standort-card:hover .standort-card-head svg { color: var(--auf-flaeche); }
.standort-card-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.standort-card-body address { font-style: normal; color: var(--mid-gray); line-height: 1.8; font-size: 0.95rem; }
.standort-card-body .tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--dark);
  font-size: 1rem;
}
.standort-card-body .tel svg { color: var(--gold); }
.standort-note {
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--soft-gray);
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-light);
}

/* ============================================================================
   HINWEIS- UND ZITATBLÖCKE
   ============================================================================ */
.note-box {
  background: var(--cream);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.note-box strong { display: block; color: var(--dark); margin-bottom: 0.4rem; }
.note-box p { margin: 0; font-size: 0.95rem; }

/* ============================================================================
   DOWNLOAD- UND CHECKLISTENKARTEN
   ============================================================================ */
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.doc-item:hover { border-color: var(--dark); transform: translateY(-3px); }
.doc-check {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: var(--transition);
}
.doc-item:hover .doc-check { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.doc-item strong { display: block; color: var(--dark); font-size: 0.98rem; margin-bottom: 0.25rem; }
.doc-item span { font-size: 0.86rem; color: var(--mid-gray); line-height: 1.6; }

/* ============================================================================
   VIDEO-EINBLICK
   ============================================================================ */
.video-split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.video-frame {
  position: relative;
  border-radius: clamp(18px, 2.5vw, 26px);
  overflow: hidden;
  aspect-ratio: 9/16;
  max-height: 620px;
  box-shadow: var(--shadow-lg);
  background: var(--flaeche);
}
.video-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(28,36,75,0.12) 0%, transparent 32%, transparent 62%, rgba(28,36,75,0.45) 100%);
  pointer-events: none;
}
.video-caption {
  position: absolute;
  left: 1.5rem; bottom: 1.4rem;
  z-index: 2;
  color: #fff;
}
.video-split p + p { margin-top: 1rem; }
.video-caption strong { display: block; font-size: 1rem; }
.video-caption span { font-size: 0.82rem; color: rgba(255,255,255,0.75); }

/* ============================================================================
   RESPONSIVE FÜR DIE NEUEN BAUSTEINE
   ============================================================================ */
@media (max-width: 1000px) {
  .kosten-grid { grid-template-columns: 1fr; }
  .calc-invite { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento-wide { grid-column: span 2; }
  .standort-grid { grid-template-columns: 1fr; }
  .video-split { grid-template-columns: 1fr; }
  .video-frame { max-width: 380px; margin: 0 auto; }
  .counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
  .doc-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 40px 1fr; gap: 1rem; }
  .timeline-dot { width: 40px; height: 40px; font-size: 0.95rem; }
  .timeline::before { left: 19px; }
  .khero { padding-top: 6.5rem; }
  .emergency-inner { gap: 0.5rem; }
}

/* ============================================================================
   BEWEGUNG REDUZIEREN
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-group > *, .img-curtain > img { opacity: 1 !important; transform: none !important; }
  .img-curtain::after { display: none; }
  .split-line > span { transform: none !important; }
  .rosette circle { stroke-dashoffset: 0 !important; }
  .rosette-spin { animation: none !important; }
  .hero-motes { display: none; }
  .marquee-track { animation: none !important; transform: none !important; }
  .parallax { transform: none !important; }
  .hero-bg { transition: none !important; transform: none !important; }
  .scroll-line { animation: none !important; }
  .khero-bg, .page-hero-bg { animation: none !important; transform: none !important; }
  .btn::before { display: none; }
}

/* ============================================================================
   MOBILES MENÜ: Gruppentitel und gestaffelter Aufbau
   ============================================================================ */
.nav-mobile-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(28,36,75,0.45);
  margin: 1.35rem 0 0.35rem;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.nav-mobile.open .nav-mobile-title { opacity: 1; transform: translateX(0); }
.nav-mobile-title:first-child { margin-top: 0; }

.nav-mobile a {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  padding: 0.62rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-mobile a.active { color: var(--dark); font-weight: 400; }
.nav-mobile a.active::before {
  content: '';
  width: 14px; height: 1.5px;
  background: var(--dark);
  margin-right: 0.6rem;
  flex-shrink: 0;
}

/* Staffelung über alle Kinder, unabhängig von Gruppentiteln */
.nav-mobile.open > *:nth-child(1)  { transition-delay: .10s; }
.nav-mobile.open > *:nth-child(2)  { transition-delay: .14s; }
.nav-mobile.open > *:nth-child(3)  { transition-delay: .18s; }
.nav-mobile.open > *:nth-child(4)  { transition-delay: .22s; }
.nav-mobile.open > *:nth-child(5)  { transition-delay: .26s; }
.nav-mobile.open > *:nth-child(6)  { transition-delay: .30s; }
.nav-mobile.open > *:nth-child(7)  { transition-delay: .34s; }
.nav-mobile.open > *:nth-child(8)  { transition-delay: .38s; }
.nav-mobile.open > *:nth-child(9)  { transition-delay: .42s; }
.nav-mobile.open > *:nth-child(10) { transition-delay: .46s; }
.nav-mobile.open > *:nth-child(11) { transition-delay: .50s; }
.nav-mobile.open > *:nth-child(12) { transition-delay: .54s; }
.nav-mobile.open > *:nth-child(13) { transition-delay: .58s; }
.nav-mobile.open > *:nth-child(14) { transition-delay: .62s; }
.nav-mobile.open > *:nth-child(15) { transition-delay: .66s; }
.nav-mobile.open > *:nth-child(16) { transition-delay: .70s; }
.nav-mobile.open > *:nth-child(17) { transition-delay: .74s; }
.nav-mobile.open > *:nth-child(18) { transition-delay: .78s; }
.nav-mobile.open > *:nth-child(19) { transition-delay: .82s; }
.nav-mobile.open > *:nth-child(20) { transition-delay: .86s; }
.nav-mobile a:last-of-type { border-bottom: 1px solid rgba(28,36,75,0.12); }
.nav-mobile .nav-mobile-phone { border-bottom: none !important; }

@media (max-width: 640px) {
  .nav-mobile a { font-size: 0.98rem; padding: 0.55rem 0; }
  .nav-mobile-title { margin-top: 1.1rem; }
}

/* Sichtbarer Tastaturfokus überall */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ankerziele nicht unter dem festen Kopf verstecken */
[id] { scroll-margin-top: 96px; }

/* ============================================================================
   KARTE MIT VORSCHALTUNG (erst laden, wenn jemand darauf klickt)
   ============================================================================ */
.map-consent {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background:
    linear-gradient(rgba(28,36,75,0.72), rgba(28,36,75,0.82)),
    var(--cream);
}
.map-consent-inner { max-width: 460px; }
.map-consent h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.75rem; }
.map-consent p { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin-bottom: 1.5rem; }
.map-consent p a { color: var(--primary); text-decoration: underline; }
.map-consent iframe { border-radius: var(--radius-lg); }

/* ============================================================================
   FRAGENLISTE ohne Kategorie-Karte
   ============================================================================ */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border-light);
}
.faq-list .faq-item { border-bottom: 1px solid var(--border-light); }

/* ============================================================================
   SPRUNGMARKE FÜR TASTATUR UND SCREENREADER
   ============================================================================ */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--dark);
  color: #fff;
  border-radius: 0 0 10px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ============================================================================
   MOBIL: Eingabefelder mindestens 16 px, sonst zoomt iOS beim Antippen hinein
   ============================================================================ */
@media (max-width: 768px) {
  input, select, textarea,
  .kfg-input, .kfg-textarea, .modal-input {
    font-size: 16px !important;
  }
}

/* ============================================================================
   ABSATZRHYTHMUS
   Aufeinanderfolgende Absätze in Textspalten brauchen Luft. Global gesetzte
   Abstände würden Karten und Listen zerreißen, deshalb gezielt.
   ============================================================================ */
.two-col-grid p + p,
.kosten-grid p + p,
.uu-story p + p,
.calc-invite p + p,
.section-header p + p,
.timeline-body p + p,
.map-consent p + p { margin-top: 1rem; }

.two-col-grid > div > p:first-of-type { margin-top: 1.25rem; }
.two-col-grid ul + p,
.two-col-grid p + ul { margin-top: 1rem; }

/* Listen in Textspalten */
.two-col-grid ul:not([class]),
.kosten-grid ul:not([class]) {
  padding-left: 1.25rem;
  margin: 1rem 0;
}
.two-col-grid ul:not([class]) li,
.kosten-grid ul:not([class]) li {
  color: var(--mid-gray);
  line-height: 1.75;
  margin-bottom: 0.5rem;
}

/* Sehr schmale Geräte: die Zahlenreihe bricht auf eine Spalte um */
@media (max-width: 460px) {
  .counter-grid { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .counter-item { padding: 1.1rem 0.5rem; }
  .counter-label { font-size: 0.76rem; letter-spacing: 0.08em; }
}

/* ============================================================================
   BREADCRUMB AUF HELLEM SEITENKOPF
   Der Standard ist hell und liegt auf dunklem Grund. Der Seitenkopf der
   Unterseiten ist hellblau, dort braucht die Zeile dunkle Schrift.
   ============================================================================ */
.page-hero-content .breadcrumb { color: rgba(255,255,255,0.72); }
.page-hero-content .breadcrumb a { color: rgba(255,255,255,0.72); }
.page-hero-content .breadcrumb a:hover { color: var(--primary); }
.page-hero-content .breadcrumb .sep { color: rgba(255,255,255,0.45); opacity: 1; }
.page-hero-content .breadcrumb .current { color: #fff; font-weight: 600; }

/* Etwas mehr Deckkraft für das Motiv im Seitenkopf, damit es sichtbar bleibt */

/* ============================================================================
   EINBLICKE, Bildkonfigurator für die Gestaltung der Trauerfeier
   Aufbau: Umschalter (Erwachsene / Kinder), Themenliste links, Bühne rechts.
   Farblogik wie überall: Grundzustand hellblau, aktiv und Hover dunkelblau.
   ============================================================================ */
.ek-switch {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  background: rgba(190,220,238,0.38);
  border-radius: 50px;
}
.ek-switch button {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dark);
  padding: 0.62rem 1.7rem;
  border-radius: 50px;
  transition: var(--transition);
}
.ek-switch button:hover { background: rgba(28,36,75,0.10); }
.ek-switch button[aria-pressed="true"] { background: var(--flaeche-stark); color: var(--auf-flaeche); }

.ek-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  margin-top: 1.25rem;
}

/* Themenliste */
.ek-kats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 34rem;
  overflow-y: auto;
  padding-right: 0.4rem;
  scrollbar-width: thin;
}
.ek-kat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.85rem 0.5rem 0.5rem;
  border-radius: 14px;
  background: rgba(190,220,238,0.32);
  transition: var(--transition);
}
.ek-kat img {
  width: 58px; height: 44px;
  object-fit: cover;
  border-radius: 9px;
  flex-shrink: 0;
}
.ek-kat b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
  transition: var(--transition);
}
.ek-kat small {
  display: block;
  font-size: 0.74rem;
  color: var(--soft-gray);
  transition: var(--transition);
}
.ek-kat:hover { background: var(--flaeche-stark); }
.ek-kat:hover b, .ek-kat:hover small { color: var(--auf-flaeche); }
.ek-kat[aria-current="true"] { background: var(--flaeche-stark); }
.ek-kat[aria-current="true"] b { color: var(--auf-flaeche); }
.ek-kat[aria-current="true"] small { color: rgba(28,36,75,0.72); }

/* Bühne */
.ek-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-md);
  cursor: zoom-in;
}
.ek-figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 0.35s var(--ease);
  position: relative;
  z-index: 1;
}
/* Hochformate füllen den 3:2-Rahmen nicht aus. Damit daneben keine leeren
   Flächen stehen, liegt dasselbe Bild unscharf dahinter. */
.ek-figure .ek-hg {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(28px) saturate(1.1);
  opacity: 0.5;
}
.ek-figure.ek-laedt .ek-bild { opacity: 0; }
.ek-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  z-index: 2;
}
.ek-pfeil:hover { background: var(--flaeche-stark); color: var(--auf-flaeche); }
.ek-pfeil[disabled] { opacity: 0.35; cursor: default; }
.ek-pfeil[disabled]:hover { background: var(--primary); color: var(--dark); }
.ek-vor  { right: 1rem; }
.ek-zurueck { left: 1rem; }
.ek-zaehler {
  position: absolute;
  right: 1rem; bottom: 1rem;
  background: rgba(28,36,75,0.82);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  z-index: 2;
}
.ek-lupe {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.86);
  color: var(--dark);
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  border-radius: 50px;
  z-index: 2;
}

.ek-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
.ek-thumbs button {
  flex: 0 0 auto;
  width: 96px; height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: var(--transition);
}
.ek-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.ek-thumbs button:hover { opacity: 1; border-color: var(--primary-dark); }
.ek-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--dark); }

.ek-info { margin-top: 1.6rem; max-width: 62ch; }
.ek-info h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.ek-info p { margin: 0; }

/* Vollbild */
.ek-box {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(14,19,42,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.ek-box.offen { display: flex; }
.ek-box img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: 12px;
  object-fit: contain;
}
.ek-box .ek-pfeil { background: rgba(190,220,238,0.9); }
.ek-box-zu {
  position: absolute;
  top: 1.2rem; right: 1.4rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.ek-box-zu:hover { background: var(--primary); color: var(--dark); }
.ek-box-titel {
  position: absolute;
  left: 0; right: 0; bottom: 1.4rem;
  text-align: center;
  color: rgba(255,255,255,0.78);
  font-size: 0.85rem;
}

/* Statische Liste, wenn kein JavaScript läuft */
.ek-ohne-js { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; margin-top: 2rem; }
.ek-ohne-js figure { margin: 0; }
.ek-ohne-js img { width: 100%; border-radius: var(--radius); }
.ek-ohne-js figcaption { font-size: 0.85rem; color: var(--mid-gray); margin-top: 0.4rem; }

@media (max-width: 1000px) {
  .ek-layout { grid-template-columns: 1fr; }
  .ek-kats {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
  }
  .ek-kat { flex: 0 0 auto; width: 15.5rem; }
  .ek-ohne-js { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .ek-figure { aspect-ratio: 4 / 3; }
  .ek-pfeil { width: 40px; height: 40px; }
  .ek-lupe { display: none; }
  .ek-thumbs button { width: 76px; height: 56px; }
  .ek-ohne-js { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ek-figure img { transition: none; }
}

/* ============================================================================
   ERSTE SEKTION OHNE KOPFBILD
   Steht bewusst am Dateiende: weiter oben setzen Media Queries padding als
   Kurzform auf .section und würden den oberen Abstand sonst überschreiben.
   ============================================================================ */
.section-erste { padding-top: clamp(6rem, 7vw, 6.5rem); }
@media (max-width: 1080px) { .section-erste { padding-top: 6rem; } }
@media (max-width: 640px)  { .section-erste { padding-top: 5.5rem; } }

/* ============================================================================
   KOPFBEREICH BLEIBT STEHEN, AUF ALLEN SEITEN
   Der Kopf klebt oben, der Inhalt schiebt sich beim Scrollen darüber.
   Dafür braucht der Inhalt einen eigenen Stapel über dem Kopf und einen
   deckenden Hintergrund, sonst scheint der Kopf durch.

   Seit die Unterseiten Schaltflächen und eine Zahlenleiste im Kopf tragen,
   kann ein Kopf höher sein als das Fenster. Dann rastet er unterkantenbündig
   ein statt oben, sonst wäre die Zahlenleiste nie ganz zu sehen. Die Höhe
   misst js/motion.js und legt sie als --kopf-h am Element ab. Die erste
   Zeile ist der Rückfall für Browser ohne svh.
   ============================================================================ */
.hero,
.page-hero,
.khero {
  position: sticky;
  top: 0;
  top: min(0px, calc(100svh - var(--kopf-h, 100svh)));
  z-index: 0;
}
main {
  position: relative;
  z-index: 1;
  background: var(--warm-white);
  /* weiche Kante, damit der Inhalt sichtbar über dem Kopf liegt */
  box-shadow: 0 -22px 45px rgba(28,36,75,0.13);
}
#main-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero, .page-hero, .khero { position: relative; }
}

/* ============================================================================
   HINWEISBAND: NEUES BESTATTUNGSGESETZ RHEINLAND-PFALZ
   Liegt auf var(--flaeche), damit die bestehende Ausnahmeliste der
   Schaltflächen greift (siehe [style*="var(--flaeche)"] weiter oben).
   ============================================================================ */
.gesetz-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 2.75rem 0;
}
.gesetz-band-text h2 {
  color: var(--auf-flaeche);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.gesetz-band-text > p {
  color: rgba(28, 36, 75, 0.82);
  max-width: 46ch;
  font-size: 1.02rem;
}
.gesetz-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.gesetz-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.gesetz-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(28, 36, 75, 0.10);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.gesetz-liste li > span:last-child {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mid-gray);
  min-width: 0;
}
.gesetz-liste strong {
  display: block;
  color: var(--dark);
  font-weight: 600;
  font-size: 0.97rem;
  margin-bottom: 0.15rem;
}
.gesetz-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--primary);
}

@media (max-width: 900px) {
  .gesetz-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2rem 0;
  }
}
@media (max-width: 560px) {
  .gesetz-band-actions .btn { width: 100%; justify-content: center; }
}

/* Schmaler Hinweis auf die neue Rechtslage (Vorsorge) */
.gesetz-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 1.75rem;
  padding: 1.4rem 1.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.gesetz-hinweis strong {
  display: block;
  color: var(--dark);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.gesetz-hinweis p {
  font-size: 0.97rem;
  color: var(--mid-gray);
  margin-bottom: 0.75rem;
  max-width: 68ch;
}
@media (max-width: 560px) {
  .gesetz-hinweis { flex-direction: column; gap: 0.9rem; padding: 1.2rem 1.25rem; }
}