/* ================================================================
   BAUER BLUMEN — BEREICHS-NAVIGATION (Vorschlag)
   Drei Geschäftsfelder, farblich + durch Balken thematisch getrennt.

   1  Bereichs-Tokens
   2  Utility-Topbar
   3  Haupt-Nav (3 Zustände: Glass / scrolled / no-backdrop-Fallback)
   4  Bereichs-Gruppen + Farbbalken
   5  Mega-Panels je Bereich
   6  Mobile-Navigation
   7  Bereichs-Sektion auf der Startseite
   8  Responsive + prefers-reduced-motion
   ================================================================ */

:root {
  /* --- Bereich 1: Blumenladen / Floristik — Grün ----------------- */
  --flor:        #5b7936;
  --flor-deep:   #2d4a1e;
  --flor-ink:    #4f6b2f;   /* Textfarbe auf Weiß — 5.6:1          */
  --flor-lite:   #b3cd88;   /* auf dunklem Foto                    */
  --flor-tint:   #eef3e6;

  /* --- Bereich 2: Bestattung — Aubergine (Memoro-Ton) ------------ */
  --best:        #704861;
  --best-deep:   #472c3d;
  --best-ink:    #704861;   /* Markenton direkt — 7.5:1 auf Weiß   */
  --best-lite:   #d6aec6;
  --best-tint:   #f4eef1;

  /* --- Bereich 3: Dauergrabpflege — Bronze / Ocker --------------- */
  --grab:        #96703c;
  --grab-deep:   #684e28;
  --grab-ink:    #85622f;   /* 5.4:1 auf Weiß                      */
  --grab-lite:   #e3c48a;
  --grab-tint:   #f6efe3;

  --nav-h:        86px;
  --nav-h-small:  66px;
}

/* Bereichs-Variablen pro Kontext (Gruppe, Panel, Karte, Mobile)
   --area-rgb traegt denselben Ton als Komponenten, damit sich daraus
   getoente Glasflaechen in beliebiger Deckkraft mischen lassen. */
[data-area="flor"] {
  --area: var(--flor); --area-deep: var(--flor-deep); --area-ink: var(--flor-ink);
  --area-lite: var(--flor-lite); --area-tint: var(--flor-tint);
  --area-rgb: 91, 121, 54;
}
[data-area="best"] {
  --area: var(--best); --area-deep: var(--best-deep); --area-ink: var(--best-ink);
  --area-lite: var(--best-lite); --area-tint: var(--best-tint);
  --area-rgb: 112, 72, 97;
}
[data-area="grab"] {
  --area: var(--grab); --area-deep: var(--grab-deep); --area-ink: var(--grab-ink);
  --area-lite: var(--grab-lite); --area-tint: var(--grab-tint);
  --area-rgb: 150, 112, 60;
}


/* ----------------------------------------------------------------
   2. FARBLEISTE — durchgezogen über die volle Breite, ganz oben.
   Die drei Bereichsfarben gehen weich ineinander über, es gibt
   keine harte Trennung zwischen den Segmenten.
---------------------------------------------------------------- */
.areanav-topline {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--flor)  0%,
    var(--flor) 26%,
    var(--best) 40%,
    var(--best) 60%,
    var(--grab) 74%,
    var(--grab) 100%);
}


/* Sicherheits-Scrim unter der transparenten Nav.
   Fängt ab, was eine Messung nicht abdecken kann: wechselnde
   Video-Frames und helle Stellen in Hero-Fotos. Auf Seiten mit
   deckender Nav wird er ausgeblendet. */
.areanav-scrim {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 168px;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14,10,6,0.50) 0%,
    rgba(14,10,6,0.34) 38%,
    rgba(14,10,6,0.12) 68%,
    rgba(14,10,6,0) 100%);
  opacity: 1;
  transition: opacity 0.35s ease;
}
body.nav-solid .areanav-scrim { opacity: 0; }


/* ----------------------------------------------------------------
   3. HAUPT-NAV
   Zustand 1: transparent über dem Hero (wie die Original-Nav).
   Lesbarkeit kommt aus dem Pflicht-Scrim des Heros, nicht aus einer
   eigenen Fläche — deshalb hat .hero-overlay oben einen kräftigen
   Verlauf. Nav ohne Hero-Scrim wäre ein Regelverstoß.
---------------------------------------------------------------- */
#area-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  padding: 3px 3vw 0;   /* 3 px oben = Platz für die Farbleiste */
  height: var(--nav-h);
  background: transparent;
  transition: background 0.35s ease, height 0.35s var(--ease),
              box-shadow 0.35s ease;
}

/* Zustand 2: nach dem Scrollen — deckendes Papier */
#area-nav.scrolled {
  height: var(--nav-h-small);
  background: rgba(254,253,251,0.97);
  box-shadow: 0 1px 0 rgba(200,169,110,0.18), 0 8px 30px rgba(0,0,0,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Zustand 3: Fallback ohne backdrop-filter — deckend füllen */
@supports not (backdrop-filter: blur(1px)) {
  #area-nav.scrolled { background: #fefdfb; }
}

.areanav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  padding-right: clamp(12px, 2vw, 34px);
}
.areanav-logo img {
  height: clamp(34px, 3.2vw, 44px);
  width: auto;
  transition: height 0.35s var(--ease);
}
#area-nav.scrolled .areanav-logo img { height: 34px; }
.areanav-logo .logo-dark  { display: none; }
#area-nav.scrolled .areanav-logo .logo-light { display: none; }
#area-nav.scrolled .areanav-logo .logo-dark  { display: block; }


/* ----------------------------------------------------------------
   4. BEREICHS-GRUPPEN — die drei Welten
---------------------------------------------------------------- */
/* Die Gruppen sitzen mittig zwischen Logo und Kontakt und nehmen
   genau die Breite ihrer Beschriftung ein.

   Frueher stand hier flex:1 mit gleich breiten Gruppen. Auf schmalen
   Notebooks wurde eine Gruppe damit schmaler als ihr eigener Titel,
   der Titel steht aber auf nowrap: er lief nach rechts aus der Gruppe
   heraus und schob sich unter den Kontakt-Button. Mit Inhaltsbreite
   kann das nicht mehr passieren. */
/* Die Gruppen nehmen die Breite zwischen Logo und Kontakt ein und
   verteilen sich darin gleichmaessig. space-evenly setzt auch den
   Abstand hinter der letzten Gruppe, dadurch steht der Kontakt im
   selben Rhythmus wie die drei Bereiche.

   Jede Gruppe behaelt Inhaltsbreite. Frueher stand hier flex:1 mit
   gleich breiten Gruppen: auf schmalen Notebooks wurde eine Gruppe
   damit schmaler als ihr eigener Titel, der Titel steht aber auf
   nowrap und lief unter den Kontakt-Button. */
.areanav-groups {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.areagroup {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}
/* Die senkrechten Trennstriche sind entfallen. Bei diesem Abstand
   trennt der Weissraum deutlich genug, die Striche haben die drei
   Bereiche nur zu einem Block zusammengeschnuert. */

.areagroup-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 0.8vw, 11px);
  width: 100%;
  padding: 0 clamp(10px, 1.6vw, 30px);
  border: none;
  background: none;
  font-family: var(--font);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Farbpunkt als schneller visueller Anker */
.areagroup-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--area-lite);
  flex-shrink: 0;
  transition: background 0.32s ease, transform 0.32s var(--ease);
}
#area-nav.scrolled .areagroup-dot { background: var(--area); }
.areagroup-trigger:hover .areagroup-dot { transform: scale(1.4); }

.areagroup-title {
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: var(--fw-regular);
  letter-spacing: clamp(0.11em, 0.18vw, 0.20em);
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  transition: color 0.32s ease;
}
.areagroup-trigger:hover .areagroup-title,
.areagroup-trigger[aria-expanded="true"] .areagroup-title { color: var(--area-lite); }
#area-nav.scrolled .areagroup-title { color: #3a3530; }
#area-nav.scrolled .areagroup-trigger:hover .areagroup-title,
#area-nav.scrolled .areagroup-trigger[aria-expanded="true"] .areagroup-title { color: var(--area-ink); }

.areagroup-chevron {
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  transition: transform 0.32s var(--ease), color 0.32s ease;
}
#area-nav.scrolled .areagroup-chevron { color: var(--area); }
.areagroup-trigger[aria-expanded="true"] .areagroup-chevron {
  transform: rotate(-135deg) translateY(2px);
}

/* Zustandsanzeige — die Bereichsfarbe sitzt jetzt oben in der
   durchgezogenen Leiste; hier markiert sie nur noch Hover und
   die aktuelle Seite. */
.areagroup-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--area-lite);
  opacity: 0;
  transition: width 0.42s var(--ease), opacity 0.3s ease,
              background 0.35s ease, bottom 0.35s var(--ease);
  pointer-events: none;
}
#area-nav.scrolled .areagroup-bar { background: var(--area); bottom: 16px; }
.areagroup-trigger:hover ~ .areagroup-bar,
.areagroup-trigger[aria-expanded="true"] ~ .areagroup-bar,
.areagroup.is-current .areagroup-bar {
  width: calc(100% - clamp(20px, 3.2vw, 60px));
  opacity: 1;
}

/* Kontakt — vierter Punkt der Reihe, kein abgesetzter Knopf mehr.
   Der Rahmen hat ihn frueher vom Rest abgetrennt. Jetzt traegt er
   dieselbe Schrift, denselben Punkt und denselben Unterstrich wie die
   drei Bereiche, nur in Gold statt in einer Bereichsfarbe. */
.areanav-more {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  /* Damit greifen die vorhandenen Punkt-Regeln der Bereiche. */
  --area:      var(--gold);
  --area-lite: var(--gold-light);
  --area-ink:  #7a5a2c;
}

.areanav-contact {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 11px);
  padding: 0 clamp(10px, 1.6vw, 26px);
  border: none;
  background: none;
  font-family: var(--font);
  color: rgba(255,255,255,0.85);
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: var(--fw-regular);
  letter-spacing: clamp(0.11em, 0.18vw, 0.20em);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.32s ease;
}
.areanav-contact:hover,
.areanav-contact[aria-expanded="true"] { color: var(--gold-light); }
#area-nav.scrolled .areanav-contact { color: #3a3530; }
#area-nav.scrolled .areanav-contact:hover,
#area-nav.scrolled .areanav-contact[aria-expanded="true"] { color: var(--area-ink); }

/* Derselbe Unterstrich wie bei den Bereichen. */
.areanav-contact::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--gold-light);
  opacity: 0;
  transition: width 0.42s var(--ease), opacity 0.3s ease,
              background 0.35s ease, bottom 0.35s var(--ease);
  pointer-events: none;
}
#area-nav.scrolled .areanav-contact::after { background: var(--gold); bottom: 16px; }
.areanav-contact:hover::after,
.areanav-contact[aria-expanded="true"]::after,
.areanav-contact[aria-current="page"]::after {
  width: calc(100% - clamp(20px, 3.2vw, 52px));
  opacity: 1;
}

.areanav-contact .areagroup-chevron { color: currentColor; opacity: 0.65; }
.areanav-contact[aria-expanded="true"] .areagroup-chevron {
  transform: rotate(-135deg) translateY(2px);
}

/* Das Dropdown selbst — kompakt, rechtsbündig, kein Backdrop */
.util-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 996;
  width: 252px;
  max-width: calc(100vw - 24px);
  padding: 10px 0 12px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 90% 0%, rgba(200,169,110,0.20) 0%, rgba(200,169,110,0) 62%),
    linear-gradient(180deg, rgba(254,253,251,0.92) 0%, rgba(254,253,251,0.96) 100%);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-top: 2px solid var(--gold);
  box-shadow: 0 20px 50px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.6);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s var(--ease);
  text-align: left;
}
.util-panel.open { opacity: 1; transform: translateY(0); pointer-events: all; }
@supports not (backdrop-filter: blur(1px)) {
  .util-panel { background: #fdfcfa; }
}
/* unsichtbare Brücke, damit der Hover die 10-px-Lücke überspringt */
.util-panel::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

.util-panel a {
  display: block;
  padding: 9px 22px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: #555;
  text-decoration: none;
  transition: color 0.24s ease, background 0.24s ease;
}
.util-panel a:hover { color: var(--dark); background: rgba(200,169,110,0.09); }
.util-panel a.is-lead { font-weight: var(--fw-regular); color: var(--flor-deep); }

.util-panel-sep {
  height: 1px;
  margin: 9px 22px;
  background: rgba(0,0,0,0.07);
}
.util-panel-label {
  margin: 4px 0 2px;
  padding: 0 22px;
  font-size: 0.58rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(107,107,107,0.6);
}
.util-panel-tel {
  display: block;
  padding: 4px 22px 8px;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  color: #7a5a2c;          /* Goldton, aber AA-lesbar auf Weiß */
  text-decoration: none;
}
.util-panel-tel:hover { color: var(--flor-deep); }

.areanav-burger {
  display: none;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 46px; height: 46px;
  border: none;
  background: none;
  cursor: pointer;
}
.areanav-burger span {
  display: block;
  height: 1.5px;
  background: #fff;
  transition: transform 0.35s var(--ease), opacity 0.25s ease, width 0.35s var(--ease);
}
.areanav-burger span:nth-child(1) { width: 26px; }
.areanav-burger span:nth-child(2) { width: 18px; }
.areanav-burger span:nth-child(3) { width: 26px; }
#area-nav.scrolled .areanav-burger span { background: var(--dark); }
.areanav-burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.areanav-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.areanav-burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); width: 26px; }


/* ----------------------------------------------------------------
   5. MEGA-PANELS — nehmen die Bereichsfarbe auf
---------------------------------------------------------------- */
.area-backdrop {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(10,10,8,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.area-backdrop.visible { opacity: 1; pointer-events: all; }

/* Getoentes Glas statt weisser Flaeche. Jeder Bereich faerbt sein
   Panel im eigenen Ton ein, damit man beim Aufklappen sofort sieht,
   in welcher Abteilung man ist. Die Faerbung liegt als weiche
   Diagonale oben auf, darunter haelt eine fast deckende Papierschicht
   den Text lesbar. */
.area-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 995;
  display: flex;
  /* Die Faerbung ist links am kraeftigsten, dort steht kein Fliesstext.
     Ueber den Linkspalten laeuft sie auf einen ruhigen Rest aus, damit
     der Kontrast auch dann sicher haelt, wenn hinter dem Glas gerade
     ein dunkles Hero-Foto steht. Gemessen: 8.7:1 fuer die Links. */
  background:
    linear-gradient(112deg,
      rgba(var(--area-rgb), 0.34) 0%,
      rgba(var(--area-rgb), 0.20) 22%,
      rgba(var(--area-rgb), 0.11) 48%,
      rgba(var(--area-rgb), 0.09) 100%),
    linear-gradient(180deg,
      rgba(254,253,251,0.92) 0%,
      rgba(254,253,251,0.95) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 3px solid var(--area);
  box-shadow: 0 32px 80px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.5);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s var(--ease), top 0.45s var(--ease);
}
/* Ohne Backdrop-Filter wuerde die Seite durch das Panel schimmern. */
@supports not (backdrop-filter: blur(1px)) {
  .area-panel {
    background:
      linear-gradient(112deg,
        rgba(var(--area-rgb), 0.22) 0%,
        rgba(var(--area-rgb), 0.10) 55%,
        rgba(var(--area-rgb), 0.14) 100%),
      #fdfcfa;
  }
}
#area-nav.scrolled ~ .area-panel { top: var(--nav-h-small); }
.area-panel.open { opacity: 1; transform: translateY(0); pointer-events: all; }
/* Beim direkten Wechsel schaltet das neue Panel ohne Übergang auf.
   Siehe die Begründung in components/nav-bereiche.js. */
.area-panel.is-instant { transition: none !important; }

/* ----------------------------------------------------------------
   Panel-Inhalt: EIN Highlight links, zwei ruhige Spalten rechts,
   Nebenpunkte als feine Zeile darunter. Die frueher dunkle
   Textspalte ist entfallen, sie hat nur Flaeche gekostet.
---------------------------------------------------------------- */

/* --- Bildspalte links, bewusst ohne Text ---------------------
   Das Foto stimmt auf den Bereich ein, mehr soll es nicht. Alles
   Lesbare steht rechts, dort sucht das Auge es ohnehin. */
.area-panel-media {
  flex: 0 0 clamp(230px, 21vw, 400px);
  min-height: 330px;
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Weicher Uebergang ins Panel, damit die Kante nicht schneidet. */
.area-panel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--area-rgb),0.18) 0%, rgba(var(--area-rgb),0.06) 55%,
                    rgba(254,253,251,0.55) 100%);
}

/* --- Die Linkspalten ----------------------------------------- */
.area-panel-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 40px clamp(34px, 4.5vw, 78px) 26px clamp(30px, 3.2vw, 54px);
}
/* Highlight links, danach die Unterseiten. Alle drei Spalten
   beginnen auf derselben Hoehe. */
.area-panel-grid {
  flex: 1;
  display: grid;
  grid-template-columns: clamp(186px, 15vw, 244px) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 48px);
  align-items: start;
}
.area-panel-col { min-width: 0; }

/* --- Der Highlight-Button ------------------------------------ */
.area-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 20px 20px 18px;
  border-radius: 16px;
  text-decoration: none;
  background: linear-gradient(158deg,
    rgba(var(--area-rgb), 0.96) 0%,
    rgba(var(--area-rgb), 0.80) 100%);
  box-shadow: 0 10px 26px rgba(var(--area-rgb), 0.30),
              inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.area-highlight:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(var(--area-rgb), 0.38),
              inset 0 1px 0 rgba(255,255,255,0.28);
}
.area-highlight-tag {
  font-size: 0.54rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 10px;
}
.area-highlight-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 9px;
}
.area-highlight-text {
  font-size: 0.8rem;
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  margin-bottom: 16px;
}
.area-highlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.62rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transition: gap 0.4s var(--ease), background 0.35s ease;
}
.area-highlight:hover .area-highlight-cta { gap: 13px; background: rgba(255,255,255,0.26); }

.area-panel-col-title {
  font-size: 0.58rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--area-ink);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.area-panel-col a {
  display: flex;
  align-items: center;
  padding: 9px 0;
  font-size: 0.94rem;
  font-weight: var(--fw-light);
  color: #3f3a35;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.35s var(--ease);
}
.area-panel-col a:hover { color: var(--area-ink); transform: translateX(4px); }

.area-panel-col a.is-urgent {
  align-items: flex-start;
  color: var(--area-ink);
  font-weight: var(--fw-medium);
}

/* --- Nebenpunkte als feine Zeile -----------------------------
   Hier steht, was das Haus sonst noch fuehrt. Die Zeile ist bewusst
   leise gesetzt, sie soll neugierig machen, nicht ablenken. */
.area-panel-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--area-rgb), 0.16);
}
.area-panel-more-label {
  font-size: 0.54rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--area-ink);
  opacity: 0.75;
  white-space: nowrap;
}
.area-panel-more a {
  font-size: 0.8rem;
  font-weight: var(--fw-light);
  color: #7d746b;
  text-decoration: none;
  transition: color 0.25s ease;
}
.area-panel-more a:hover { color: var(--area-ink); }
.area-panel-more a.is-tel {
  margin-left: auto;
  font-weight: var(--fw-medium);
  color: var(--area-ink);
  white-space: nowrap;
}

/* Der Notruf-Eintrag bekommt einen ruhig pulsierenden Punkt, damit das Auge
   ihn im Panel zuerst findet. Ohne Farbschrei, es bleibt ein Trauerkontext.
   Der Punkt sitzt auf der ersten Zeile, nicht mittig zwischen zwei Zeilen. */
.area-panel-col a.is-urgent::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-top: 0.58em;
  border-radius: 50%;
  background: var(--area);
  margin-right: 10px;
  opacity: 0.9;
  animation: navPulse 2.6s ease-in-out infinite;
}
.area-panel-col a.is-urgent:hover::before { width: 7px; margin-right: 10px; }
@keyframes navPulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.5); opacity: 0.45; }
}

/* Mobile: das Highlight steht als eigene Karte ganz oben im Bereich. */
.amnav-feature {
  display: block;
  margin: 4px 0 22px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
}
.amnav-feature::before { display: none !important; }
.amnav-feature-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.54rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.amnav-feature strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.24rem;
  font-style: italic;
  font-weight: var(--fw-light);
  line-height: 1.25;
  color: #fff;
  margin-bottom: 12px;
}
.amnav-feature-cta {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* Nebenpunkte gedraengt, damit die Liste kurz bleibt. */
.amnav-more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.amnav-more a {
  padding: 6px 0 !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.52) !important;
}
.amnav-more a::before { display: none !important; }

.amnav-sub a.is-urgent { color: #fff; font-weight: var(--fw-medium); }

/* ----------------------------------------------------------------
   6. MOBILE-NAVIGATION — drei farbige Blöcke
---------------------------------------------------------------- */
#area-mobile {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: #16130f;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease), visibility 0.35s;
}
#area-mobile.open { opacity: 1; visibility: visible; transform: translateY(0); }

.amnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 6vw;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.amnav-head img { height: 32px; width: auto; display: block; }
.amnav-close {
  min-width: 44px; min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  background: none;
  color: rgba(255,255,255,0.7);
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.amnav-close:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

.amnav-hint {
  padding: 20px 6vw 6px;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.amnav-area { border-bottom: 1px solid rgba(255,255,255,0.07); }
.amnav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  padding: 18px 6vw;
  border: none;
  background: none;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
/* farbiger Balken links = Bereichskennung */
.amnav-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--area);
}
.amnav-btn[aria-expanded="true"] { background: rgba(255,255,255,0.04); }
.amnav-btn-text { display: flex; flex-direction: column; gap: 5px; }
.amnav-btn-title {
  font-size: 1.02rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
  color: #fff;
}
.amnav-btn[aria-expanded="true"] .amnav-btn-title { color: var(--area-lite); }
.amnav-btn-sub {
  font-size: 0.72rem;
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.45);
}
.amnav-btn-arrow {
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1px solid var(--area-lite);
  border-bottom: 1px solid var(--area-lite);
  transform: rotate(45deg);
  transition: transform 0.32s var(--ease);
}
.amnav-btn[aria-expanded="true"] .amnav-btn-arrow { transform: rotate(-135deg); }

.amnav-sub { display: none; background: rgba(0,0,0,0.28); }
.amnav-sub.open { display: block; }
.amnav-sub a {
  display: block;
  padding: 15px 6vw 15px calc(6vw + 18px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.92rem;
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  position: relative;
}
.amnav-sub a::before {
  content: '';
  position: absolute;
  left: 6vw; top: 50%;
  width: 8px; height: 1px;
  background: var(--area);
}
.amnav-sub a:hover { color: #fff; background: rgba(255,255,255,0.03); }
.amnav-sub-group {
  padding: 18px 6vw 8px;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--area-lite);
  opacity: 0.75;
}

.amnav-foot { padding: 26px 6vw 44px; }
.amnav-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 24px; }
.amnav-links a {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.amnav-links a:hover { color: #fff; }
.amnav-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 16px 22px;
  border: 1px solid rgba(200,169,110,0.5);
  color: var(--gold-light);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.amnav-cta:hover { background: rgba(200,169,110,0.12); }
.amnav-addr {
  margin: 18px 0 0;
  font-size: 0.72rem;
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.35);
}


/* ----------------------------------------------------------------
   7. BEREICHS-SEKTION AUF DER STARTSEITE
   Wiederholt dieselben drei Farben — das macht die Nav lernbar.
---------------------------------------------------------------- */
.areas {
  padding: 73px 8vw 78px;
  background: #f4f1ec;
}
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
}
.area-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  text-decoration: none;
  color: inherit;
  border-top: 5px solid var(--area);
  overflow: hidden;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.area-card:hover { transform: translateY(-6px); }
.area-card-img {
  height: 230px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.area-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,10,0.06) 0%, rgba(15,15,10,0.42) 100%);
}
.area-card-num {
  position: absolute;
  left: 22px; bottom: 18px;
  z-index: 2;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}
.area-card-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.area-card-label {
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--area-ink);
  margin-bottom: 10px;
}
.area-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.24;
  color: var(--dark);
  margin: 0 0 12px;
}
.area-card p {
  font-size: 0.9rem;
  font-weight: var(--fw-light);
  line-height: 1.72;
  color: var(--grey);
  margin: 0 0 18px;
}
.area-card-list {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.area-card-list li {
  padding: 5px 11px;
  background: var(--area-tint);
  color: var(--area-ink);
  font-size: 0.7rem;
  font-weight: var(--fw-light);
  letter-spacing: 0.04em;
}
.area-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.66rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--area-ink);
  transition: gap 0.32s var(--ease);
}
.area-card:hover .area-card-cta { gap: 13px; }

/* Legende: erklärt das Farbsystem in einer Zeile */
.areas-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0 auto 52px;
}
.areas-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--area-ink);
}
.areas-legend-item::before {
  content: '';
  width: 22px; height: 4px;
  background: var(--area);
}


/* ----------------------------------------------------------------
   8. RESPONSIVE
---------------------------------------------------------------- */
/* 13-Zoll-Notebooks: zwischen 1180 und 1400 px wird es eng. Statt die
   Navigation umzubrechen, ruecken Beschriftung und Innenabstaende
   stufenweise zusammen. Geprueft bei 1200, 1280, 1366 und 1440 px. */
@media (max-width: 1440px) {
  #area-nav { padding-left: 2.4vw; padding-right: 2.4vw; }
  .areanav-logo { padding-right: clamp(10px, 1.4vw, 20px); }
  .areagroup-trigger { padding: 0 clamp(9px, 1.2vw, 20px); }
  .areagroup-title { letter-spacing: 0.12em; }
  .areanav-contact { padding: 10px 16px; letter-spacing: 0.16em; }
  .area-panel-media { flex-basis: clamp(200px, 17vw, 300px); }
}
@media (max-width: 1300px) {
  .areanav-logo img { height: 34px; }
  .areagroup-trigger { padding: 0 10px; gap: 7px; }
  .areagroup-title { font-size: 0.66rem; letter-spacing: 0.09em; }
  .areanav-contact { padding: 9px 13px; letter-spacing: 0.13em; }
  .area-panel-grid { grid-template-columns: clamp(170px, 15vw, 210px) minmax(0,1fr) minmax(0,1fr); }
  .area-panel-media { display: none; }
}

@media (max-width: 1180px) {
  .areanav-groups,
  .areanav-more,
  .area-panel,
  .util-panel { display: none !important; }
  .areanav-burger { display: flex; }
  #area-nav { justify-content: space-between; padding: 0 5vw; }
  .areanav-logo { padding-right: 0; }
}

@media (max-width: 900px) {
  .areas-grid { grid-template-columns: 1fr; gap: 18px; }
  .areas { padding: 61px 6vw 68px; }
}

@media (max-width: 768px) {
  :root { --nav-h: 74px; --nav-h-small: 64px; }
  .areanav-logo img { height: 34px; }
  .areas-legend { gap: 10px 18px; margin-bottom: 34px; }
  .areas-legend-item { font-size: 0.6rem; }
  .area-card-img { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  #area-nav,
  #area-mobile,
  .area-panel,
  .util-panel,
  .areagroup-bar,
  .area-card,
  .areagroup-dot { transition: none !important; }
  .area-card:hover { transform: none; }
}