:root {
  --color-dark:        #1a2d5a;
  --color-dark-mid:    #1e3560;
  --color-dark-soft:   #253f6e;
  --color-white:       #ffffff;
  --color-cream:       #fdf8f2;
  --color-cream-mid:   #f5ede0;
  --color-gold:        #C9A84C;
  --color-gold-soft:   rgba(201,168,76,0.13);
  --color-gold-border: rgba(201,168,76,0.32);
  --color-white-soft:  rgba(255,255,255,0.45);
  --color-white-subtle:rgba(255,255,255,0.10);
  --color-overlay:     rgba(13,31,60,0.65);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', sans-serif;
  background: #0b1a30;
  color: var(--color-white);
  overflow-x: hidden;
  padding-top: 72px;
}

/* ── PAGE SYSTEM ── */
.page { display: none; }
.page.active { display: block; }

/* ── NAV ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #0a1525;
  border-bottom: 1px solid var(--color-gold-border);
  padding: 0 28px;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.site-nav.nav-hidden {
  transform: translateY(-100%);
}
.site-nav .nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}
.nav-logo-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.nav-logo-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nav-logo-text {
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
}
.nav-logo-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li {
  display: flex;
  align-items: center;
}
.nav-links a, .nav-links .nav-link-btn {
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 4px;
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  border: none;
}
.nav-links a:hover, .nav-links .nav-link-btn:hover {
  color: var(--color-gold);
  background: var(--color-gold-soft);
}
.nav-links a.active-nav { color: var(--color-gold); }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #0a1525;
  border: 1px solid var(--color-gold-border);
  border-radius: 12px;
  min-width: 240px;
  padding: 16px 8px 8px;
  z-index: 999;
  box-shadow: 0 20px 60px rgba(13,31,60,0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease 0.15s, visibility 0.15s ease 0.15s;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.82rem;
  border-radius: 8px;
  color: var(--color-white);
}
.nav-dropdown-menu a:hover { background: var(--color-gold-soft); color: var(--color-gold); }
.nav-dropdown-menu a.active-nav { background: var(--color-gold-soft); color: var(--color-gold); }

.btn-nav-cta {
  background: var(--color-gold) !important;
  color: var(--color-dark) !important;
  border-radius: 5px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  transition: all 0.25s !important;
}
.btn-nav-cta:hover { background: #dbb84e !important; transform: translateY(-1px); }

/* BURGER */
.burger-btn {
  display: none;
  background: none;
  border: 1px solid var(--color-gold-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--color-white);
  font-size: 1.2rem;
}
.mobile-menu {
  display: none;
  background: #0a1525;
  border-top: 1px solid var(--color-gold-border);
  padding: 16px 28px 24px;
}
.mobile-menu.open { display: block; }
.mobile-menu a, .mobile-menu .mob-link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gold-soft);
  color: var(--color-white);
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  text-align: left;
  width: 100%;
}
.mobile-menu a:hover, .mobile-menu .mob-link:hover { color: var(--color-gold); }
.mobile-menu a.active-nav, .mobile-menu .mob-link.active-nav { color: var(--color-gold); }
.mobile-sub { padding-left: 16px; }
.mobile-sub a { font-size: 0.82rem; font-weight: 400; color: rgba(255,255,255,0.75); }

@media(max-width:768px){
  .nav-links { display: none; }
  .burger-btn { display: block; }
}

/* ── TYPOGRAPHY ── */
.h1-hero {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.18;
}
.h2-section {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.25;
}
.h2-section.on-dark  { color: var(--color-white); }
.h2-section.on-light { color: var(--color-dark); }
.h3-card {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.body-text { font-family:'Raleway',sans-serif; font-size:0.95rem; line-height:1.88; }
.body-text.on-dark  { color: rgba(255,255,255,0.88); }
.body-text.on-light { color: var(--color-dark); }
.pull-quote {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--color-gold);
  line-height: 1.7;
}
.label-tag {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 14px;
}
.eyebrow-lined {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.eyebrow-lined::before,
.eyebrow-lined::after {
  content: '';
  flex: 0 0 40px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.5;
  display: block;
}
.label-tag-dark {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
  display: block;
  margin-bottom: 14px;
}

/* ── SECTIONS ── */
.section-dark { background: var(--color-dark); }
.section-dark-mid { background: var(--color-dark-mid); }
.section-white { background: var(--color-white); color: var(--color-dark); }
.section-cream {
  background-color: var(--color-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}
.section-cream-mid { background: var(--color-cream-mid); }

section { padding: 96px 0; }
section.tight { padding: 64px 0; }
section.very-tight { padding: 40px 0; }
.section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b1a30;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, #132240 0%, #0b1a30 60%, #07121f 100%);
}
/* Starfield layer */
@keyframes starsDrift1 {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(14px, -10px); }
  45%  { transform: translate(8px, 18px); }
  70%  { transform: translate(-12px, 6px); }
  100% { transform: translate(0, 0); }
}
@keyframes starsDrift2 {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(-10px, 12px); }
  55%  { transform: translate(16px, 4px); }
  80%  { transform: translate(4px, -14px); }
  100% { transform: translate(0, 0); }
}
@keyframes starsDrift3 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(6px, -16px); }
  50%  { transform: translate(-14px, -4px); }
  75%  { transform: translate(10px, 12px); }
  100% { transform: translate(0, 0); }
}

.hero-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-stars::before {
  content: '';
  position: absolute;
  width: 1px; height: 1px;
  background: transparent;
  animation: starsDrift1 28s ease-in-out infinite;
  box-shadow:
    120px 80px rgba(255,255,255,0.55), 340px 200px rgba(255,255,255,0.35),
    560px 140px rgba(255,255,255,0.45), 780px 320px rgba(255,255,255,0.30),
    920px 90px rgba(255,255,255,0.50), 1080px 250px rgba(255,255,255,0.40),
    200px 420px rgba(255,255,255,0.25), 450px 500px rgba(255,255,255,0.45),
    680px 480px rgba(255,255,255,0.30), 1000px 600px rgba(255,255,255,0.35),
    60px 560px rgba(255,255,255,0.40), 310px 620px rgba(255,255,255,0.25),
    870px 700px rgba(255,255,255,0.45), 1100px 400px rgba(255,255,255,0.30),
    180px 720px rgba(255,255,255,0.35), 720px 760px rgba(255,255,255,0.50),
    490px 260px rgba(255,255,255,0.20), 1160px 150px rgba(255,255,255,0.45),
    35px 350px rgba(255,255,255,0.30), 590px 390px rgba(255,255,255,0.40),
    820px 180px rgba(255,255,255,0.25), 1020px 720px rgba(255,255,255,0.35),
    260px 300px rgba(255,255,255,0.45), 640px 640px rgba(255,255,255,0.30),
    400px 160px rgba(255,255,255,0.55), 960px 540px rgba(255,255,255,0.20),
    80px 680px rgba(255,255,255,0.40), 1140px 580px rgba(255,255,255,0.30),
    500px 740px rgba(255,255,255,0.45), 750px 60px rgba(255,255,255,0.35),
    150px 160px rgba(255,255,255,0.25), 970px 340px rgba(255,255,255,0.50),
    420px 440px rgba(255,255,255,0.30), 1200px 480px rgba(255,255,255,0.40),
    290px 100px rgba(255,255,255,0.45), 660px 200px rgba(255,255,255,0.20),
    1050px 100px rgba(255,255,255,0.35), 380px 580px rgba(255,255,255,0.50),
    830px 440px rgba(255,255,255,0.25), 100px 480px rgba(255,255,255,0.40),
    1240px 300px rgba(255,255,255,0.30), 710px 520px rgba(255,255,255,0.45),
    240px 240px rgba(255,255,255,0.35), 1180px 680px rgba(255,255,255,0.25),
    540px 360px rgba(255,255,255,0.50), 890px 620px rgba(255,255,255,0.40),
    45px 120px rgba(255,255,255,0.30), 760px 400px rgba(255,255,255,0.45),
    1300px 200px rgba(255,255,255,0.35), 600px 700px rgba(255,255,255,0.20);
}
.hero-stars::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  background: transparent;
  animation: starsDrift2 22s ease-in-out infinite;
  box-shadow:
    70px 120px rgba(255,255,255,0.60), 420px 80px rgba(255,255,255,0.50),
    800px 220px rgba(255,255,255,0.55), 1050px 380px rgba(255,255,255,0.45),
    230px 480px rgba(255,255,255,0.60), 650px 560px rgba(255,255,255,0.50),
    930px 160px rgba(255,255,255,0.55), 1200px 640px rgba(255,255,255,0.45),
    360px 340px rgba(255,255,255,0.60), 580px 440px rgba(255,255,255,0.50),
    140px 600px rgba(255,255,255,0.55), 880px 720px rgba(255,255,255,0.45),
    1120px 280px rgba(255,255,255,0.60), 470px 700px rgba(255,255,255,0.50);
}

/* Left-side gradient overlay so text stays readable */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,26,48,0.88) 45%, rgba(11,26,48,0.25) 75%, transparent 100%);
}
.hero-overlay-full {
  position: absolute;
  inset: 0;
  background: rgba(11,26,48,0.60);
}
/* Right-side portrait */
.hero-portrait {
  position: absolute;
  top: 0; right: 0;
  width: 48%;
  height: 100%;
  overflow: hidden;
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-portrait-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #132240 0%, #1a2d5a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  border-left: 1px solid var(--color-gold-border);
}
/* Gradient fade from portrait into left content */
.hero-portrait::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right, rgba(11,26,48,0.75) 0%, transparent 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 28px;
  width: 100%;
}
/* Hero heading parts */
.hero-h1-white {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.18;
  display: block;
}
.hero-h1-gold {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.18;
  display: block;
}
.hero-italic-sub {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(201,168,76,0.75);
  line-height: 1.6;
  margin: 18px 0 0;
  display: block;
}
.hero-body {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-weight: 400;
  color: rgba(255,255,255,0.80);
  line-height: 1.8;
  max-width: 520px;
  margin: 16px 0 32px;
}
.hero-small { min-height: 52vh; }
.hero-small .hero-content { padding: 80px 28px 60px; }
@media(max-width:991px){
  .hero-portrait { display: none; }
  .hero-overlay { background: rgba(11,26,48,0.80); }
  /* Portrait-right: von absolut zu flex-item umschalten */
  .hero {
    flex-direction: column;
    min-height: auto;
  }
  .hero-content { order: 1; }
  .hero-portrait-right {
    position: relative;
    width: 100%;
    height: 260px;
    order: 2;
    right: auto;
    top: auto;
  }
  .hero-portrait-right::before,
  .hero-portrait-right::after { display: none; }
  .hero-scroll-indicator { display: none; }
}
@media(max-width:768px){
  .hero { min-height: auto; }
  .hero-small { min-height: 45vh; }
}

/* ── BUTTONS ── */
.btn-gold {
  background-color: var(--color-gold);
  color: var(--color-dark);
  border-radius: 5px;
  padding: 15px 40px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: all 0.25s ease;
  font-size: 0.9rem;
}
.btn-gold:hover { background-color: #dbb84e; transform: translateY(-2px) scale(1.04); color: var(--color-dark); }
.btn-outline-gold {
  background: transparent;
  color: var(--color-gold);
  border: 2px solid var(--color-gold);
  border-radius: 5px;
  padding: 13px 38px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: all 0.25s ease;
  font-size: 0.9rem;
}
.btn-outline-gold:hover { background: var(--color-gold-soft); color: var(--color-gold); transform: scale(1.04); }
.btn-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-radius: 5px;
  padding: 15px 40px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: all 0.25s ease;
  font-size: 0.9rem;
}
.btn-dark:hover { background-color: var(--color-dark-mid); transform: translateY(-2px) scale(1.04); color: var(--color-white); }

/* ── CARDS & TILES ── */
.card-block { padding: 44px 40px; border-radius: 20px; }
.card-block-small { padding: 28px 28px; border-radius: 16px; }

.tile-dark {
  background: #1e3560;
  border: 1px solid var(--color-gold-border);
  border-radius: 16px;
  padding: 28px 30px;
}
.tile-light {
  background: var(--color-cream);
  border: 1px solid var(--color-gold-border);
  border-radius: 16px;
  padding: 28px 30px;
}
.tile-cream {
  background: var(--color-white);
  border: 1px solid var(--color-gold-border);
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 4px 24px rgba(13,31,60,0.06);
}
.tile-icon {
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-bottom: 12px;
  display: block;
}

/* ── PHOTO PLACEHOLDERS ── */
.foto-placeholder {
  background: linear-gradient(135deg, #253f6e 0%, #2a4470 100%);
  color: var(--color-white-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 20px;
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--color-gold-border);
}
.foto-placeholder.round {
  border-radius: 50%;
  width: 280px;
  height: 280px;
  min-height: unset;
}
.foto-placeholder img, .foto-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── GOLD DIVIDER LINE ── */
.gold-line {
  width: 60px;
  height: 2px;
  background: var(--color-gold);
  margin: 20px 0 28px;
}
.gold-line.centered { margin: 20px auto 28px; }

/* ── BANNER STRIP ── */
.banner-strip {
  background: var(--color-dark-mid);
  border-top: 1px solid var(--color-gold-border);
  border-bottom: 1px solid var(--color-gold-border);
  padding: 32px 28px;
  text-align: center;
}
.banner-strip .pull-quote { margin: 0; }

/* ── QUOTE BLOCK ── */
.quote-block {
  position: relative;
  padding: 52px 48px;
  border-left: 3px solid var(--color-gold);
  background: var(--color-white-subtle);
  border-radius: 0 16px 16px 0;
}
.quote-block.on-light {
  background: var(--color-cream-mid);
  border-left: 3px solid var(--color-gold);
}
.quote-source {
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 18px;
  display: block;
}

/* ── TESTIMONIAL CARDS ── */
.testimonial-card {
  background: var(--color-white-subtle);
  border: 1px solid var(--color-gold-border);
  border-radius: 20px;
  padding: 36px 32px;
}
.testimonial-card.on-light {
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(13,31,60,0.07);
}
.testimonial-stars { color: var(--color-gold); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 16px; }
.testimonial-text {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
}
.testimonial-card.on-light .testimonial-text { color: var(--color-dark); }
.testimonial-author {
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 20px;
}
.testimonial-card.on-light .testimonial-author { color: var(--color-dark); }

/* ── TESTIMONIAL ITEM (ueber-mich) ── */
.testimonial-item {
  padding: 28px 24px;
}
.testimonial-item .testimonial-text {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-dark);
  margin: 0 0 18px;
}
.testimonial-name {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-left: 2px solid var(--color-gold);
  padding-left: 12px;
  margin: 0;
}

/* ── FAQ ── */
.faq-item {
  border-bottom: 1px solid var(--color-gold-border);
  padding: 22px 0;
}
.faq-q {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item.on-light .faq-q { color: var(--color-dark); }
.faq-q .faq-icon { color: var(--color-gold); font-size: 1.1rem; flex-shrink: 0; transition: transform 0.25s; }
.faq-a {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.8);
  padding-top: 14px;
}
.faq-item.on-light .faq-a { color: rgba(13,31,60,0.75); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-item.open .faq-a { display: block; }

/* ── STEP NUMBER ── */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  border: 2px solid var(--color-gold-border);
  font-family: 'Raleway', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-bottom: 14px;
}

/* ── PRICING ── */
.price-card {
  background: var(--color-white);
  border: 1px solid var(--color-gold-border);
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
  box-shadow: 0 4px 32px rgba(13,31,60,0.08);
  position: relative;
  overflow: hidden;
}
.price-card.featured {
  border-color: var(--color-gold);
  box-shadow: 0 8px 48px rgba(201,168,76,0.18);
}
.price-amount {
  font-family: 'Raleway', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
}
.price-currency {
  font-size: 1.2rem;
  font-weight: 400;
  vertical-align: top;
  margin-top: 6px;
  display: inline-block;
}
.price-unit {
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;
  color: rgba(13,31,60,0.5);
  margin-top: 4px;
}
.price-list { list-style: none; text-align: left; margin: 24px 0; }
.price-list li {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  color: rgba(13,31,60,0.75);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-gold-soft);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price-list li i { color: var(--color-gold); margin-top: 2px; flex-shrink: 0; }

/* ── FOOTER ── */
.site-footer {
  background: #0a1525;
  border-top: 1px solid var(--color-gold-border);
  padding: 70px 0 32px;
}
.footer-logo-text {
  font-family: 'Raleway', sans-serif;
  font-size: 1.3rem;
  color: var(--color-white);
  font-weight: 600;
}
.footer-tagline {
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  color: var(--color-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; display: block; }
.footer-links a, .footer-links .fl-btn {
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  display: block;
  width: 100%;
  transition: color 0.2s;
}
.footer-links a:hover, .footer-links .fl-btn:hover { color: var(--color-gold); }
.footer-head {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 18px;
}
.footer-contact {
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 2;
}
.footer-contact a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-contact a:hover { color: var(--color-gold); }
.footer-bottom {
  border-top: 1px solid var(--color-gold-soft);
  padding-top: 24px;
  margin-top: 48px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.footer-strip {
  background: var(--color-gold-soft);
  border-top: 1px solid var(--color-gold-border);
  padding: 22px 28px;
  text-align: center;
}
.footer-strip p {
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  color: var(--color-gold);
  font-style: italic;
  letter-spacing: 0.06em;
}

/* ── PORTRAIT CIRCLE ── */
.portrait-wrap {
  display: flex;
  justify-content: center;
}
.portrait-circle {
  width: 280px; height: 280px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-gold);
  box-shadow: 0 0 0 8px var(--color-gold-soft);
  flex-shrink: 0;
}
.portrait-circle img { width: 100%; height: 100%; object-fit: cover; }

/* ── ANGEBOT CARD ── */
.angebot-card {
  background: var(--color-white);
  border: 1px solid var(--color-gold-border);
  border-radius: 20px;
  padding: 40px 36px;
  height: 100%;
  transition: box-shadow 0.25s;
  box-shadow: 0 2px 16px rgba(13,31,60,0.05);
}
.angebot-card:hover { box-shadow: 0 8px 40px rgba(13,31,60,0.12); }
.angebot-icon {
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: 16px;
}
.angebot-card h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
  color: var(--color-dark);
  margin-bottom: 12px;
}
.angebot-card p {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(13,31,60,0.7);
  margin-bottom: 20px;
}
.angebot-link {
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  transition: gap 0.2s;
}
.angebot-link:hover { gap: 10px; color: var(--color-gold); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s ease both; }
.fade-up-2 { animation: fadeUp 0.7s 0.15s ease both; }
.fade-up-3 { animation: fadeUp 0.7s 0.30s ease both; }
.fade-up-4 { animation: fadeUp 0.7s 0.45s ease both; }

/* ── UTILS ── */
.gold-text { color: var(--color-gold); }
.dark-text { color: var(--color-dark); }
.white-text { color: var(--color-white); }
.text-center-sm { text-align: center; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.mt-40 { margin-top: 40px; }
.note-small {
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  line-height: 1.7;
}
.note-small.on-light { color: rgba(13,31,60,0.45); }

/* IMAGE HELPERS */
.img-fluid-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@media(max-width:768px){
  section { padding: 64px 0; }
  .hero { min-height: auto; }
  .hero-small { min-height: 45vh; }
  .pull-quote { font-size: 1.1rem; }
  .card-block { padding: 28px 22px; }
  .portrait-circle { width: 220px; height: 220px; }
  .foto-placeholder { min-height: 260px; }
  .split-left, .split-right { padding: 56px 24px !important; }
  .hero-centered { min-height: 85vh; }
}

/* ── PAIN ROWS (trauerbegleitung) ── */
.pain-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.pain-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 0.85rem;
  margin-top: 2px;
}
.pain-text {
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  color: rgba(13,31,60,0.78);
  line-height: 1.75;
  margin: 0;
}
.quote-box-dark {
  background: var(--color-dark);
  border-radius: 24px;
  padding: 52px 44px;
}
@media(max-width:768px){
  .quote-box-dark { padding: 32px 24px; }
}

/* ── ÜBER MICH KARTEN (home) ── */
.uebermich-cards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 480px;
}
.uebermich-card-foto {
  flex-shrink: 0;
  width: 400px;
  background: var(--color-cream);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 24px 64px rgba(10,21,37,0.50);
  position: relative;
  z-index: 1;
  margin-right: -70px;
  align-self: stretch;
}
.uebermich-card-text {
  flex: 0 0 520px;
  max-width: 520px;
  background: var(--color-cream);
  border-radius: 20px;
  padding: 48px 44px 44px;
  box-shadow: 0 24px 64px rgba(10,21,37,0.50);
  position: relative;
  z-index: 2;
}
@media(max-width:768px){
  .uebermich-cards {
    flex-direction: column;
    min-height: unset;
    gap: 20px;
  }
  .uebermich-card-foto {
    width: 100%;
    margin-right: 0;
    align-self: auto;
  }
  .uebermich-card-foto > div {
    min-height: 260px !important;
  }
  .uebermich-card-text {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 32px 24px;
  }
}

/* ══ HERO FILMISCH – Vollbild ══ */
.hero-film {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a1525;
}
.hero-film-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-film-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.hero-film-photo-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 50% 48%, #2a4a7a 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 52% 46%, #3a5a8a 0%, transparent 45%),
    linear-gradient(to bottom, #1a3060 0%, #1e3a6e 35%, #1a3060 100%);
  z-index: 0;
}
.hero-film-photo-placeholder::before {
  content: '';
  position: absolute;
  width: 1px; height: 1px;
  background: transparent;
  animation: starsDrift1 28s ease-in-out infinite;
  box-shadow:
    80px 40px rgba(255,255,255,0.55), 200px 25px rgba(255,255,255,0.35),
    360px 65px rgba(255,255,255,0.48), 510px 38px rgba(255,255,255,0.30),
    660px 18px rgba(255,255,255,0.55), 800px 55px rgba(255,255,255,0.42),
    940px 32px rgba(255,255,255,0.48), 1090px 70px rgba(255,255,255,0.32),
    1230px 28px rgba(255,255,255,0.52), 130px 130px rgba(255,255,255,0.28),
    280px 175px rgba(255,255,255,0.42), 440px 145px rgba(255,255,255,0.32),
    590px 185px rgba(255,255,255,0.48), 730px 118px rgba(255,255,255,0.36),
    890px 165px rgba(255,255,255,0.26), 1040px 138px rgba(255,255,255,0.42),
    45px 255px rgba(255,255,255,0.32), 170px 285px rgba(255,255,255,0.48),
    325px 235px rgba(255,255,255,0.22), 480px 272px rgba(255,255,255,0.42);
}
.hero-film-photo-placeholder::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  background: transparent;
  animation: starsDrift2 22s ease-in-out infinite;
  box-shadow:
    135px 55px rgba(255,255,255,0.68), 460px 88px rgba(255,255,255,0.58),
    740px 48px rgba(255,255,255,0.63), 1000px 78px rgba(255,255,255,0.53),
    195px 208px rgba(255,255,255,0.68), 555px 228px rgba(255,255,255,0.58),
    335px 318px rgba(255,255,255,0.68), 685px 338px rgba(255,255,255,0.55);
}
/* Overlay: dunkel über gesamtes Bild */
.hero-film-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(26,45,90,0.45) 0%, rgba(26,45,90,0.45) 100%);
}
/* Placeholder-Label oben rechts */
.hero-film-foto-label {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.20);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  line-height: 2;
}
/* Textblock – zentriert */
.hero-film-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-film-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 20px;
  display: block;
}
.hero-film-h1 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 600;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 6px;
}
.hero-film-h1-gold {
  color: var(--color-gold);
  font-style: italic;
  display: block;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  white-space: nowrap;
}
/* Goldener animierter Strich */
.hero-film-line {
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--color-gold), rgba(201,168,76,0.2));
  margin: 24px 0 28px;
  animation: heroLineGrow 1.4s 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes heroLineGrow {
  from { width: 0; }
  to { width: 280px; }
}
.hero-film-body {
  font-family: 'Raleway', sans-serif;
  font-size: 0.98rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.85;
  max-width: 480px;
  margin: 0 0 36px;
}
.hero-film-italic {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.65);
  display: block;
  margin-bottom: 12px;
}
/* Scroll-Indikator – zentriert unten */
.hero-film-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  z-index: 4;
}
.hero-film-scroll span {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.hero-film-scroll-line {
  width: 1px;
  height: 72px;
  background: rgba(201,168,76,0.18);
  position: relative;
  overflow: hidden;
}
.hero-film-scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
  animation: scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}
@media(max-width:991px){
  .hero-film-scroll { left: 50%; transform: translateX(-50%); bottom: 28px; }
}
@media(max-width:767px){
  .hero-film-content { padding: 0 24px 60px; }
  .hero-film-h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero-film-h1-gold { font-size: clamp(0.95rem, 4.8vw, 1.4rem); }
}
/* ══ END HERO FILMISCH ══ */

/* Hero Portrait – Desktop rechts */
.hero-portrait-right {
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.hero-portrait-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right, rgba(26,45,90,1) 0%, transparent 100%);
  z-index: 2;
}
.hero-portrait-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,45,90,0.28);
  z-index: 1;
}
/* Hero content links auf Desktop */
.hero-content-left {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Auf Desktop: Text in linker Hälfte */
@media(min-width:992px){
  .hero-content-left {
    width: 50%;
    padding: 100px 5vw 80px 7vw;
    align-items: flex-start;
    margin-right: auto;
  }
  .hero-content-left .hero-center-label,
  .hero-content-left p { text-align: left; }
  .hero-content-left h1 span { text-align: left !important; }
}
.hero-content-left .hero-center-label { text-align: center; }
/* Portrait Overlay Mobile */
.hero-portrait-bg-mobile {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(26,45,90,0.55);
}
@media(max-width:991px){
  .hero-content-left {
    padding: 80px 28px !important;
    align-items: center !important;
  }
  .hero-content-left p,
  .hero-content-left .hero-center-label { text-align: center !important; }
  .hero-content-left h1 span { text-align: center !important; }
  .hero-content-left .hero-body,
  .hero-content-left .hero-italic-sub { max-width:580px;margin-left:auto;margin-right:auto; }
  .hero-content-left .fade-up-4 { width:100%;display:flex;justify-content:center; }
}

/* ── SCROLL INDICATOR ── */
.hero-scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.3s ease;
}
.hero-scroll-indicator:hover {
  transform: translateX(-50%) translateY(6px);
}
.hero-scroll-text {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  writing-mode: horizontal-tb;
  text-align: center;
}
.hero-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
  order: -1;
}
@keyframes scrollPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.35; }
  100% { opacity: 1; }
}
@media(max-width:768px){ .hero-scroll-indicator { display: none; } }

/* ── ANGEBOTE ZEILEN ── */
.ang-zeile {
  text-decoration:none;display:flex;align-items:stretch;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 20px rgba(13,31,60,0.10), 0 1px 4px rgba(13,31,60,0.06);
  transition:transform 0.28s ease, box-shadow 0.28s ease;
  border-left:3px solid transparent;
}
.ang-zeile-text { background:#ffffff; }
.ang-zeile:hover {
  transform:scale(1.025);
  box-shadow:0 12px 40px rgba(201,168,76,0.22), 0 2px 8px rgba(13,31,60,0.10);
  border-left:3px solid var(--color-gold);
}
.ang-zeile:hover .ang-zeile-text { background:#fef9f0 !important; }
.ang-zeile:hover .ang-zeile-arrow { transform:translateX(5px); color:#b8902e; }
.ang-zeile-text {
  flex:1;padding:22px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;transition:background 0.25s;
}
.ang-zeile-arrow { color:var(--color-gold);font-size:1rem;flex-shrink:0;transition:transform 0.25s, color 0.25s; }

/* ── ÜBER MICH STERNE ── */
.uebermich-stars-sm { width:1px;height:1px;background:transparent; }
.uebermich-stars-sm::before {
  content:'';position:absolute;width:1px;height:1px;background:transparent;
  animation: starsDrift3 32s ease-in-out infinite;
  box-shadow:
    60px 80px rgba(255,255,255,0.45), 180px 40px rgba(255,255,255,0.30),
    320px 95px rgba(255,255,255,0.42), 480px 55px rgba(255,255,255,0.28),
    640px 30px rgba(255,255,255,0.50), 820px 75px rgba(255,255,255,0.38),
    980px 45px rgba(255,255,255,0.42), 1120px 90px rgba(255,255,255,0.30),
    100px 180px rgba(255,255,255,0.35), 260px 220px rgba(255,255,255,0.45),
    430px 195px rgba(255,255,255,0.28), 590px 240px rgba(255,255,255,0.40),
    760px 160px rgba(255,255,255,0.32), 900px 210px rgba(255,255,255,0.48),
    1060px 175px rgba(255,255,255,0.36), 1200px 230px rgba(255,255,255,0.28),
    40px 320px rgba(255,255,255,0.42), 200px 360px rgba(255,255,255,0.30),
    370px 295px rgba(255,255,255,0.45), 530px 340px rgba(255,255,255,0.28),
    700px 310px rgba(255,255,255,0.38), 860px 355px rgba(255,255,255,0.32),
    1020px 325px rgba(255,255,255,0.42), 1150px 370px rgba(255,255,255,0.26);
}
.uebermich-stars-lg::after {
  content:'';position:absolute;width:2px;height:2px;background:transparent;
  animation: starsDrift1 25s ease-in-out infinite 4s;
  box-shadow:
    120px 65px rgba(255,255,255,0.65), 450px 95px rgba(255,255,255,0.58),
    730px 50px rgba(255,255,255,0.62), 990px 82px rgba(255,255,255,0.55),
    185px 215px rgba(255,255,255,0.65), 540px 240px rgba(255,255,255,0.55),
    850px 195px rgba(255,255,255,0.60), 1140px 225px rgba(255,255,255,0.50),
    310px 335px rgba(255,255,255,0.65), 670px 350px rgba(255,255,255,0.55);
}