/* ============================================================
   Bauer Blumen – Bestattung (heller, warmer Look)
   Gemeinsames Design für alle Bestattungs-Seiten.
   Alles unter .be-page gescoped, damit es andere Seiten nicht beeinflusst.
   ============================================================ */

.be-page {
  /* Aubergine ist die Bereichsfarbe fuer Bestattung. Die Flaechen sind
     ein sehr helles, leicht violett gebrochenes Papier, die Akzente
     kommen aus derselben Familie. Gold und Gruen laufen ueber die
     Token unten mit, damit die alten Regeln nichts mehr aufreissen. */
  --be-cream:       #f7f3f5;   /* Grund-Hintergrund */
  --be-cream-soft:  #fdfbfc;   /* hellere Karten und Flaechen */
  --be-blush:       #f1e6ec;   /* zarte Toenung */
  --be-blush-deep:  #d9bccd;   /* kraeftigerer Akzent */
  --be-sage:        #f0ecf0;   /* ruhige Zwischenflaeche */
  --be-ink:         #2b2229;   /* Dunkel fuer Text */
  --be-soft-line:   rgba(70,45,60,0.11);

  /* Akzente */
  --be-akzent:      #8d6a80;   /* Linien, Eyebrows, feine Marken */
  --be-akzent-mid:  #704861;   /* Buttons, Links, Markenton */
  --be-akzent-tief: #472c3d;   /* Ueberschriften, dunkle Flaechen */
  --be-akzent-hell: #d6aec6;   /* auf dunklem Grund */

  background: var(--be-cream);
}

/* Der Hauptknopf ist seitenweit gruen. Im Bestattungsbereich waere das
   ein Fremdkoerper, deshalb bekommt er hier den Bereichston. */
.be-page {
  --btn-ton:      #704861;
  --btn-ton-tief: #33202c;
}
.be-page .section-eyebrow { color: var(--be-akzent); }

/* ── Nav: auf hellem Header sofort dunkel ─────────────────── */
.be-page #main-nav {
  background: rgba(252,248,242,0.94);
  box-shadow: 0 1px 0 rgba(141,106,128,0.18), 0 6px 40px rgba(60,45,25,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.be-page #main-nav .nav-logo .logo-light { display: none; }
.be-page #main-nav .nav-logo .logo-dark  { display: block; }
.be-page #main-nav .nav-trigger          { color: #3a3530; }
.be-page #main-nav .nav-trigger:hover,
.be-page #main-nav .nav-trigger[aria-expanded="true"] { color: var(--be-akzent-tief); }
.be-page #main-nav .nav-item + .nav-item::before { color: rgba(0,0,0,0.12); }
.be-page #main-nav .nav-contact       { border-color: rgba(141,106,128,0.55); color: var(--be-akzent-tief); }
.be-page #main-nav .nav-contact:hover { background: var(--be-akzent-tief); border-color: var(--be-akzent-tief); color: var(--white); }
.be-page #main-nav .nav-hamburger span { background: var(--dark); }

/* ── HERO (zweispaltig, hell) ─────────────────────────────── */
.be-hero {
  position: relative;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(231,201,191,0.45) 0%, transparent 55%),
    linear-gradient(180deg, var(--be-cream-soft) 0%, var(--be-cream) 100%);
  padding: 132px 6vw 52px;
  overflow: hidden;
}
.be-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.be-hero-text { max-width: 600px; }
.be-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.be-hero-tag::before {
  content: '';
  width: 34px; height: 1px;
  background: var(--be-akzent);
  flex-shrink: 0;
}
.be-hero-tag span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--be-akzent);
}
.be-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 300;
  color: var(--be-akzent-tief);
  line-height: 1.06;
  margin: 0 0 26px;
}
.be-hero h1 em { font-style: italic; color: var(--be-akzent-mid); }
.be-hero-sub {
  font-size: 1.06rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.85;
  margin: 0 0 38px;
  max-width: 500px;
}
.be-hero-actions { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; }
.be-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--be-akzent-tief);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.be-hero-phone:hover { border-color: var(--be-akzent); }
.be-hero-phone svg { width: 17px; height: 17px; stroke: var(--be-akzent); }

/* Hero-Bild */
.be-hero-media {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  box-shadow: 0 30px 70px -28px rgba(70,52,30,0.45);
}
.be-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.be-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(71,44,61,0.10) 100%);
}

/* ── FLORISTEN-PERSPEKTIVE (Signatur-Band, ganz oben) ─────── */
.be-floral {
  background:
    linear-gradient(180deg, var(--be-cream) 0%, var(--be-blush) 100%);
  padding: clamp(56px, 7vw, 67px) 6vw;
}
.be-floral-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.be-floral-mark {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--be-akzent);
  opacity: 0.6;
  margin-bottom: 8px;
}
/* Die Regel .be-floral p weiter unten ist spezifischer und hat die
   Schriftgroesse hier bisher ueberschrieben. Deshalb mitgescoped. */
.be-floral .be-floral-lead {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--be-akzent-tief);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 auto 30px;
  max-width: 820px;
  text-wrap: balance;
}
.be-floral-lead strong { font-weight: 500; font-style: normal; }
.be-floral p {
  font-size: 1.02rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.85;
  max-width: 680px;
  margin: 0 auto;
}
.be-floral p + p { margin-top: 1.1rem; }
.be-floral .be-floral-signature {
  margin-top: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--be-akzent);
}

/* ── Generische helle Section ─────────────────────────────── */
.be-section { padding: clamp(64px, 8vw, 78px) 6vw; }
.be-section.alt { background: var(--be-cream-soft); }
.be-section.sage { background: var(--be-sage); }
.be-section-inner { max-width: 1160px; margin: 0 auto; }
.be-section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.be-section-head.left { margin-left: 0; text-align: left; }
.be-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--be-akzent);
  margin-bottom: 14px;
}
.be-section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 300;
  color: var(--be-akzent-tief);
  line-height: 1.18;
  margin: 0 0 18px;
}
.be-section-head h2 em { font-style: italic; color: var(--be-akzent-mid); }
.be-section-head p {
  font-size: 1.02rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.8;
  margin: 0;
}

/* ── PROZESS / ERSTE SCHRITTE (nummerierte Karten) ────────── */
.be-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.be-step {
  background: var(--be-cream-soft);
  border: 1px solid var(--be-soft-line);
  border-radius: 20px;
  padding: 36px 28px 32px;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.be-step:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(70,52,30,0.40); }
.be-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--be-blush);
  color: var(--be-akzent-tief);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  margin-bottom: 20px;
}
.be-step h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--be-akzent-tief);
  margin: 0 0 10px;
}
.be-step p {
  font-size: 0.92rem;
  font-weight: 300;
  color: #6b645b;
  line-height: 1.75;
  margin: 0;
}

/* ── FEATURE-KARTEN (3 Spalten, hell) ─────────────────────── */
.be-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.be-card {
  background: var(--be-cream-soft);
  border: 1px solid var(--be-soft-line);
  border-radius: 20px;
  padding: 40px 34px 42px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.be-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(70,52,30,0.40); }
.be-card-icon {
  font-size: 1.7rem;
  margin-bottom: 16px;
  display: block;
}
.be-card h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--be-akzent-tief);
  margin: 0 0 12px;
}
.be-card p {
  font-size: 0.94rem;
  font-weight: 300;
  color: #6b645b;
  line-height: 1.8;
  margin: 0;
}

/* ── SPLIT-Inhaltsreihe (Text + Bild abwechselnd) ─────────── */
.be-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
.be-split.reverse .be-split-media { order: -1; }
.be-split-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 300;
  color: var(--be-akzent-tief);
  line-height: 1.2;
  margin: 12px 0 20px;
}
.be-split-text h2 em { font-style: italic; color: var(--be-akzent-mid); }
.be-split-text p {
  font-size: 1rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.85;
  margin: 0 0 1.1rem;
}
.be-split-media {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 26px 56px -28px rgba(70,52,30,0.42);
}
.be-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aufzählung mit Häkchen */
.be-list { list-style: none; margin: 8px 0 0; padding: 0; }
.be-list li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--be-soft-line);
  font-size: 0.98rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.6;
}
.be-list li:last-child { border-bottom: none; }
.be-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 17px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--be-akzent);
  border-bottom: 2px solid var(--be-akzent);
  transform: rotate(-45deg);
}
.be-list li strong { color: var(--be-akzent-tief); font-weight: 600; }

/* ── CTA-Band (warm, hell) ────────────────────────────────── */
.be-cta {
  background:
    radial-gradient(100% 120% at 50% 0%, rgba(231,201,191,0.55) 0%, transparent 60%),
    var(--be-sage);
  padding: clamp(52px, 9vw, 84px) 6vw;
  text-align: center;
}
.be-cta-divider { width: 46px; height: 1px; background: var(--be-akzent); margin: 0 auto 30px; }
.be-cta h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 300;
  color: var(--be-akzent-tief);
  line-height: 1.18;
  margin: 0 auto 20px;
  max-width: 680px;
}
.be-cta h2 em { font-style: italic; color: var(--be-akzent-mid); }
.be-cta p {
  font-size: 1.04rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.8;
  max-width: 540px;
  margin: 0 auto 40px;
}
.be-cta-actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; }
.be-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--be-akzent-tief);
  text-decoration: none;
  border-bottom: 1px solid var(--be-akzent);
  padding-bottom: 3px;
}
.be-cta-phone:hover { color: var(--be-akzent-mid); }

/* ── Weiterführender Link (Pille) ─────────────────────────── */
.be-nextlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--be-akzent-tief);
  text-decoration: none;
  background: var(--be-cream-soft);
  border: 1px solid var(--be-soft-line);
  border-radius: 999px;
  padding: 12px 22px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.be-nextlink:hover { background: var(--be-blush); transform: translateX(3px); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .be-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .be-hero-media { aspect-ratio: 16 / 11; max-height: 460px; }
  .be-steps { grid-template-columns: repeat(2, 1fr); }
  .be-cards { grid-template-columns: 1fr; }
  .be-split { grid-template-columns: 1fr; }
  .be-split.reverse .be-split-media { order: 0; }
}
@media (max-width: 640px) {
  .be-hero { padding: 116px 6vw 56px; }
  .be-steps { grid-template-columns: 1fr; }
}

/* ── KOMPAKTES KONTAKTFORMULAR (auf allen Bestattungs-Seiten) ── */
.be-formband {
  background:
    radial-gradient(110% 120% at 15% 0%, rgba(231,201,191,0.45) 0%, transparent 55%),
    var(--be-sage);
  padding: clamp(64px, 8vw, 77px) 6vw;
}
.be-formband-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.be-formband-text .be-eyebrow { color: var(--be-akzent); }
.be-formband-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 300;
  color: var(--be-akzent-tief);
  line-height: 1.18;
  margin: 0 0 18px;
}
.be-formband-text h2 em { font-style: italic; color: var(--be-akzent-mid); }
.be-formband-text p {
  font-size: 1.02rem;
  font-weight: 300;
  color: #5c554c;
  line-height: 1.8;
  margin: 0 0 22px;
}
.be-formband-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.be-formband-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--be-akzent-tief);
  text-decoration: none;
}
.be-formband-contact a svg { width: 17px; height: 17px; stroke: var(--be-akzent); flex-shrink: 0; }
.be-formband-contact a:hover { color: var(--be-akzent-mid); }

/* Karte */
.be-form {
  background: var(--be-cream-soft);
  border: 1px solid var(--be-soft-line);
  border-radius: 22px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: 0 30px 60px -34px rgba(70,52,30,0.45);
}
.be-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.be-field { display: flex; flex-direction: column; }
.be-field.full { grid-column: 1 / -1; }
.be-field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--be-akzent-tief);
  margin-bottom: 7px;
}
.be-field input,
.be-field textarea {
  font-family: var(--font);
  font-size: 0.98rem;
  color: var(--be-ink);
  background: #fff;
  border: 1px solid rgba(60,50,40,0.16);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.be-field input::placeholder,
.be-field textarea::placeholder { color: #aaa49b; }
.be-field input:focus,
.be-field textarea:focus {
  outline: none;
  border-color: var(--be-akzent);
  box-shadow: 0 0 0 3px rgba(141,106,128,0.16);
}
.be-field textarea { min-height: 120px; resize: vertical; }
.be-form-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
}
.be-form-check input { margin-top: 3px; accent-color: var(--be-akzent-tief); flex-shrink: 0; }
.be-form-check label { font-size: 0.82rem; font-weight: 300; color: #6b645b; line-height: 1.5; }
.be-form-check a { color: var(--be-akzent-mid); }
.be-form button[type="submit"] {
  grid-column: 1 / -1;
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}
.be-form-status {
  grid-column: 1 / -1;
  display: none;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 13px 16px;
  border-radius: 12px;
  margin-top: 4px;
}
.be-form-status.success { background: rgba(91,121,54,0.10); border-left: 3px solid var(--be-akzent-mid); color: var(--be-akzent-tief); }
.be-form-status.error   { background: rgba(200,104,48,0.10); border-left: 3px solid var(--orange); color: var(--orange); }

/* Honeypot */
.be-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .be-formband-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .be-form-grid { grid-template-columns: 1fr; }
}

/* ── BILD-GALERIE (Trauerfloristik-Kategorien) ────────────── */
.be-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.be-gallery-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 22px 48px -28px rgba(70,52,30,0.45);
  display: block;
  text-decoration: none;
}
.be-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.be-gallery-item:hover img { transform: scale(1.06); }
.be-gallery-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(28,38,18,0.82) 100%);
}
.be-gallery-cap h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
}
.be-gallery-cap p {
  font-size: 0.86rem;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) { .be-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .be-gallery { grid-template-columns: 1fr; } }