/* ═══════════════════════════════════════════════════════════════════
   MEMORO — LIQUID GLASS NAV
   Übernommen aus bestattungsverfuegung.de (assets/js/components.js),
   Aufbau, Schichten und Bewegungen unverändert; nur der Wurzelname
   heißt hier .mo-nav statt .bv-nav und die Farben kommen aus der
   Memoro-Palette. Die Wortmarke steht frei oben links, nicht in der
   Leiste — die Leiste selbst schwebt mittig.

   Vier Glasschichten:
     ::before  Grundglas mit Blur, Innenkante, Schlagschatten
     ::after   Glanzverlauf (screen)
     .glass-grain  Korn (Rauschen, overlay)
     .glass-glint  Lichtstreifen, der alle zehn Sekunden durchläuft
   Dazu die .nav-indicator, die dem Zeiger folgt.
   ═══════════════════════════════════════════════════════════════════ */

.mo-nav {
  /* Alle Schichten wechseln mit derselben Dauer und Kurve. Vorher liefen
     Glas (.5s), Schrift (.22s) und Wortmarke (.35s) unterschiedlich
     schnell, dadurch wirkte der Wechsel hell/dunkel wie ein Umspringen. */
  --nav-wechsel:.55s cubic-bezier(.2,.7,.2,1);
  position:fixed; top:20px; left:0; right:0; z-index:100;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
  transition:top .5s cubic-bezier(.2,.8,.2,1);
}
.mo-nav.scrolled { top:12px; }

/* Wortmarke — frei oben links, auf der Höhe der Leiste */
.nav-corner-brand {
  position:fixed; top:20px; left:28px; z-index:101;
  height:48px; display:flex; align-items:center;
  pointer-events:auto; text-decoration:none;
  transition:opacity .25s, top .5s cubic-bezier(.2,.8,.2,1);
  will-change:top;
}
.nav-corner-brand.scrolled { top:12px; }
.nav-corner-brand:hover { opacity:.80; }
.nav-corner-logo {
  display:block; height:clamp(34px, 3.4vw, 46px); width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.28)) drop-shadow(0 0 30px rgba(0,0,0,.10));
  transition:opacity var(--nav-wechsel), filter var(--nav-wechsel);
  /* Die Datei liegt in dreifacher Anzeigegroesse vor, damit sie auf
     feinen Bildschirmen scharf bleibt. */
  backface-visibility:hidden;
}
/* Die Wortmarke liegt zweimal übereinander: weiß auf dunklem Grund,
   Pflaume auf hellem. Umgeschaltet wird über .on-light. */
.nav-corner-logo--hell { position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; }
.nav-corner-inner { position:relative; display:block; }

/* ─── Glaskapsel um die Wortmarke ─────────────────────────────────
   Solange der Kopf steht, schwebt die Wortmarke frei über einem Bild
   oder Film und ist gut zu lesen. Sobald der Kopfbereich weggescrollt
   ist, liegt sie über dem Inhalt — häufig über Fließtext, und dann war
   sie nicht mehr zu erkennen. Ab da bekommt sie dieselbe Glasfläche wie
   die Leiste daneben.

   Die Kapsel ist ein ::before mit negativem inset, kein Innenabstand am
   Element: so bleibt das Bild an seinem Platz und beim Einblenden
   springt nichts. */
.nav-corner-inner::before {
  content:""; position:absolute; inset:-10px -17px; border-radius:999px; z-index:-1;
  opacity:0; transform:scale(.92);
  transition:opacity var(--nav-wechsel), transform var(--nav-wechsel),
             background var(--nav-wechsel), box-shadow var(--nav-wechsel);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(24px) saturate(160%) brightness(1.03) contrast(1.01);
  -webkit-backdrop-filter:blur(24px) saturate(160%) brightness(1.03) contrast(1.01);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.50) inset,
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(30,20,16,.04) inset,
    0 0 0 1px rgba(30,20,16,.04),
    0 28px 56px -24px rgba(46,30,40,.14),
    0 8px 20px -10px rgba(46,30,40,.08);
}
/* .hinter-kopf statt .scrolled: die Kapsel kommt erst, wenn der
   Kopfbereich ganz durch ist, nicht schon nach 60 px Scrollweg.
   .scrolled bleibt dem Hochrücken der Marke vorbehalten. */
.nav-corner-brand.hinter-kopf .nav-corner-inner::before { opacity:1; transform:none; }
/* Auf hellem Grund dieselbe helle Fassung wie bei der Leiste */
.nav-corner-brand.on-light .nav-corner-inner::before {
  background:rgba(250,247,249,.95);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.95) inset,
    0 0 0 1px rgba(112,72,97,.16) inset,
    0 -1px 0 rgba(30,20,16,.05) inset,
    0 0 0 1px rgba(112,72,97,.10),
    0 18px 40px -18px rgba(46,30,40,.22),
    0 6px 16px -8px rgba(46,30,40,.12);
}
/* Ohne Weichzeichner trägt die Kapsel nichts — dann muss sie decken.
   Gilt für alte Browser wie für den Sparbetrieb aus film.js. */
@supports not (backdrop-filter:blur(1px)) {
  .nav-corner-inner::before { background:rgba(30,17,25,.88); }
  .nav-corner-brand.on-light .nav-corner-inner::before { background:#FAF7F9; }
}
html.sparsam .nav-corner-inner::before { background:rgba(30,17,25,.90); }
html.sparsam .nav-corner-brand.on-light .nav-corner-inner::before { background:#FAF7F9; }

/* Pill shell */
.nav-pill {
  pointer-events:auto; position:relative;
  display:flex; align-items:center; gap:2px;
  padding:5px; border-radius:999px; isolation:isolate;
  /* Über der Schublade (z-index 99): sonst deckt die offene Schublade
     den Burger zu und man käme nur über Escape wieder heraus. */
  z-index:100;
}

/* Schicht 1 — Grundglas */
.nav-pill::before {
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-3;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(24px) saturate(160%) brightness(1.03) contrast(1.01);
  -webkit-backdrop-filter:blur(24px) saturate(160%) brightness(1.03) contrast(1.01);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.50) inset,
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(30,20,16,.04) inset,
    0 0 0 1px rgba(30,20,16,.04),
    0 28px 56px -24px rgba(46,30,40,.14),
    0 8px 20px -10px rgba(46,30,40,.08);
  transition:background var(--nav-wechsel), box-shadow var(--nav-wechsel);
}

/* Schicht 2 — Glanzverlauf */
.nav-pill::after {
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,0) 55%, rgba(255,255,255,.08) 80%, rgba(255,255,255,.18) 100%),
    radial-gradient(120% 80% at 50% -10%, rgba(243,236,240,.22), transparent 60%);
  mix-blend-mode:screen;
}

/* Schicht 3 — Korn */
.glass-grain {
  position:absolute; inset:0; border-radius:inherit; z-index:-1;
  pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:160px; mix-blend-mode:overlay;
}

/* Schicht 4 — Lichtstreifen */
.glass-glint { position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:1; }
.glass-glint::before {
  content:""; position:absolute; top:-60%; left:-40%; width:45%; height:200%;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.54) 50%, transparent 70%);
  transform:translateX(-60%); filter:blur(3px);
  animation:lg-glint 10s cubic-bezier(.5,.1,.5,.9) infinite; opacity:0;
}
@keyframes lg-glint {
  0%,12%   { transform:translateX(-60%); opacity:0; }
  20%       { opacity:.8; }
  52%,100%  { transform:translateX(460%); opacity:0; }
}

/* Die mitwandernde Kapsel */
.nav-indicator {
  position:absolute; top:5px; height:calc(100% - 10px);
  border-radius:999px; pointer-events:none; z-index:0;
  opacity:0; transform:translateX(0);
  transition:opacity .22s ease, width .38s cubic-bezier(.4,1.3,.3,1), transform .38s cubic-bezier(.4,1.3,.3,1),
              background var(--nav-wechsel), box-shadow var(--nav-wechsel);
  background:rgba(255,255,255,.26);
  backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, 0 0 0 1px rgba(255,255,255,.38) inset, 0 -1px 0 rgba(30,20,16,.04) inset, 0 4px 10px -4px rgba(46,30,40,.14);
}
.nav-pill[data-active="1"] .nav-indicator { opacity:1; }

/* Links */
.mo-nav ul { display:flex; gap:0; list-style:none; margin:0; padding:0; position:relative; z-index:2; }
.mo-nav ul a { display:inline-block; padding:9px 15px; border-radius:999px; font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.004em; color:rgba(255,255,255,.80); white-space:nowrap; text-decoration:none; transition:color var(--nav-wechsel), text-shadow var(--nav-wechsel); position:relative; text-shadow:0 1px 6px rgba(0,0,0,.18); }
.mo-nav ul a:hover { color:rgba(255,255,255,1); }
/* Der aktive Punkt liegt auf der hellen Kapsel — Altrosa wäre dort zu
   schwach. Eine Stufe heller, der Charakter bleibt. */
.mo-nav ul a.active { color:#F7DCE7; }

/* CTA */
/* Der Knopf trägt die Akzentfarbe der Marke, nicht mehr das dunkle
   Braun der Vorlage. */
.nav-cta { position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 13px; border-radius:999px; margin-left:4px; background:linear-gradient(180deg,#FF8F4D 0%,#F0700F 100%); color:#fff; font-family:var(--sans); font-size:13.5px; font-weight:500; white-space:nowrap; letter-spacing:.006em; text-decoration:none; box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -1px 0 rgba(120,50,0,.28) inset,0 0 0 1px rgba(190,80,10,.28),0 8px 20px -8px rgba(217,96,31,.6); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, background .28s; }
.nav-cta:hover { transform:translateY(-1px); background:linear-gradient(180deg,#FF9E63 0%,#E4650B 100%); box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 -1px 0 rgba(120,50,0,.24) inset,0 0 0 1px rgba(190,80,10,.24),0 14px 32px -10px rgba(217,96,31,.72); }
.nav-cta-dot { width:6px; height:6px; border-radius:50%; background:#fff; flex-shrink:0; box-shadow:0 0 0 2.5px rgba(255,255,255,.42); animation:lg-pulse 2.2s ease infinite; }
@keyframes lg-pulse { 0%,100%{box-shadow:0 0 0 2.5px rgba(255,255,255,.42)} 50%{box-shadow:0 0 0 5px rgba(255,255,255,0)} }
.nav-cta-arr { display:inline-block; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.nav-cta:hover .nav-cta-arr { transform:translateX(2px); }

/* Burger */
.nav-burger { display:none; position:relative; z-index:2; width:38px; height:38px; padding:0; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%); border:1px solid rgba(255,255,255,.38); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:background var(--nav-wechsel), border-color var(--nav-wechsel); }
.nav-burger:hover { background:rgba(255,255,255,.28); }
.nav-burger span { width:15px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s cubic-bezier(.4,1.2,.3,1), opacity .25s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Schublade */
.nav-drawer { pointer-events:none; position:fixed; inset:0; background:rgba(250,247,249,.96); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.97) translateY(-4px); transition:opacity .32s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1); z-index:99; padding:48px 28px; }
.nav-drawer.open { opacity:1; pointer-events:auto; transform:scale(1) translateY(0); }
.nav-drawer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; width:100%; max-width:380px; }
.nav-drawer ul a { display:block; font-family:var(--sans); font-weight:300; font-size:30px; letter-spacing:-.02em; line-height:1.16; padding:14px 0; color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(112,72,97,.12); transition:color .2s, padding-left .2s; }
.nav-drawer ul a:hover { color:var(--plum); padding-left:8px; }

/* Schmale Geräte */
@media (max-width:1180px) { #navList { display:none; } .nav-burger { display:flex; } }
.nav-cta-short { display:none; }
/* Auf schmalen Geräten stünde die mittige Leiste in der Wortmarke.
   Dort rückt sie nach rechts, die Marke behält die linke Seite. */
@media (max-width:900px) {
  .mo-nav { align-items:flex-end; padding-right:18px; }
}
@media (max-width:600px) {
  .nav-cta { padding:9px 13px; }
  .nav-cta-full { display:none; }
  .nav-cta-short { display:inline; }
  .nav-corner-brand { left:18px; }
  /* Etwas größer als die bisherigen 30px: hochkant war die Wortmarke
     neben der Leiste zu zurückhaltend. 36px ist die Obergrenze, ab der
     sie mit der Kontaktkapsel daneben zusammenstoßen würde. */
  .nav-corner-logo { height:36px; }
}
/* Unter 360px stößt die größere Wortmarke an die Leiste daneben —
   dort bleibt sie bei der alten Höhe. */
@media (max-width:359px) {
  .nav-corner-logo { height:30px; }
  /* Enger gefasst: mit dem Abstand vom Desktop stieße die Kapsel
     hochkant fast an den Bildschirmrand. */
  .nav-corner-inner::before { inset:-8px -12px; }
}
.mo-nav.scrolled .nav-pill::before { background:rgba(255,255,255,.07); }

/* ─── Helle Fläche unter der Leiste ───
   Auf Weiß trug das alte Glas nur rgba(255,255,255,.72) und eine
   Haarlinie mit 9 % Schwarz: die Leiste verschwand auf der zweiten
   Sektion beider Seiten. Hier deckt sie deshalb (Papierton, .95) und
   bekommt eine echte Kante samt Schatten. Glas trägt nur auf Foto und
   auf dunklem Grund, auf hellem Papier braucht es eine Fläche. */
.mo-nav.on-light .nav-pill::before {
  background:rgba(250,247,249,.95);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.95) inset,
    0 0 0 1px rgba(112,72,97,.16) inset,
    0 -1px 0 rgba(30,20,16,.05) inset,
    0 0 0 1px rgba(112,72,97,.10),
    0 18px 40px -18px rgba(46,30,40,.22),
    0 6px 16px -8px rgba(46,30,40,.12);
}
@supports not (backdrop-filter:blur(1px)) {
  .nav-pill::before { background:rgba(30,17,25,.88); }
  .mo-nav.on-light .nav-pill::before { background:#FAF7F9; }
}
.mo-nav.on-light ul a { color:rgba(30,20,16,.68); text-shadow:none; }
.mo-nav.on-light ul a:hover,
.mo-nav.on-light ul a.active { color:var(--ink); }
.mo-nav.on-light .nav-burger { background:rgba(255,255,255,.6); border-color:rgba(112,72,97,.18); }
.mo-nav.on-light .nav-burger:hover { background:rgba(255,255,255,.85); }
.mo-nav.on-light .nav-indicator { background:rgba(112,72,97,.12); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(112,72,97,.1) inset; }
/* Auf hellem Grund die pflaumenfarbene Wortmarke */
.nav-corner-brand.on-light .nav-corner-logo--dunkel { opacity:0; }
.nav-corner-brand.on-light .nav-corner-logo--hell { opacity:1; }
/* Auf hellem Grund ohne Schlagschatten: der weiche Schein lag direkt auf
   den Buchstaben und liess die pflaumenfarbene Wortmarke unscharf wirken.
   Die Glaskapsel darunter traegt den Kontrast bereits. */
.nav-corner-brand.on-light .nav-corner-logo { filter:none; }

/* Kopfzeilen-Knopf: Lichtstreifen und tieferer Schein beim Überfahren.
   Gleiche Sprache wie .btn--fill auf der Startseite. */
.nav-cta { overflow:hidden; isolation:isolate; }
.nav-cta::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-115%); opacity:0;
}
@media (hover:hover) and (pointer:fine) {
  .nav-cta:hover { transform:translateY(-2px); }
  .nav-cta:hover::before { animation:nav-cta-glanz .9s cubic-bezier(.2,.7,.2,1) forwards; }
}
.nav-cta:active {
  transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(120,50,0,.34),0 0 0 1px rgba(190,80,10,.3),0 4px 12px -6px rgba(217,96,31,.5);
  transition-duration:.09s;
}
.nav-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@keyframes nav-cta-glanz {
  0% { transform:translateX(-115%); opacity:0; }
  16% { opacity:1; }
  100% { transform:translateX(115%); opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  .glass-glint::before { animation:none; opacity:0; }
  .nav-cta-dot { animation:none; }
  .nav-cta::before { animation:none; opacity:0; }
}

/* ─── Sparbetrieb ────────────────────────────────────────────────
   film.js setzt .sparsam auf <html>, wenn das Gerät oder die
   Einstellungen gegen aufwendige Effekte sprechen. Dort fällt jeder
   backdrop-filter weg — auch der von Leiste, Wortmarke, Burger und
   Schublade, denn die liegen auf Pseudoelementen. Ohne Weichzeichner
   trägt Glas nichts mehr, deshalb brauchen alle vier eine deckende
   Fläche. Sonst stünde weiße Schrift frei auf der Seite. */
html.sparsam .nav-pill::before,
html.sparsam .nav-corner-inner::before { background:rgba(30,17,25,.90); }
html.sparsam .mo-nav.on-light .nav-pill::before,
html.sparsam .nav-corner-brand.on-light .nav-corner-inner::before { background:#FAF7F9; }
html.sparsam .nav-indicator { background:rgba(255,255,255,.26); }
html.sparsam .mo-nav.on-light .nav-indicator { background:rgba(112,72,97,.16); }
html.sparsam .nav-burger { background:rgba(255,255,255,.22); }
html.sparsam .mo-nav.on-light .nav-burger { background:rgba(255,255,255,.9); }
html.sparsam .nav-drawer { background:#FAF7F9; }