/* ============================================================
   HEADER - fester Balken
   Eine Quelle fuer alle Seiten.

   Durchgehende helle Flaeche ueber die volle Breite, unten von
   einer Haarlinie abgeschlossen. Sie steht immer, auch beim
   Runterscrollen: der Termin soll an jeder Stelle der Seite
   einen Klick entfernt sein.

   Zwei Zustaende, und nur die Startseite kennt beide: ueber dem
   Hero liegt der Balken ohne Flaeche auf dem Bild, danach legt
   sich die helle Flaeche darunter. Siehe crw-nav--over-hero.

   Bewusst self-contained: die Rechtsseiten fuehren eine eigene
   Palette (mauve/cream) und kennen die Markentokens nicht.
   Deshalb stehen hier eigene Werte, die vorhandene Tokens nur
   als Fallback nutzen.
   ============================================================ */
:root{
  --nav-truffle:#3D2820;
  --nav-truffle-rgb:61,40,32;
  --nav-cream:#EAE9E4;
  --nav-cream-rgb:234,233,228;
  --nav-rose-deep:#8A5A4E;
  /* Der Ton des Hero-Hintergrunds, fuer den Verlauf im
     transparenten Zustand. Entspricht --crw-ink in index.html. */
  --nav-ink-rgb:36,31,26;
  --nav-h:4.5rem;
}

.crw-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  background-color:rgba(var(--nav-cream-rgb),1);
  border-bottom:1px solid rgba(var(--nav-truffle-rgb),.09);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}

/* Verlauf fuer den transparenten Zustand. Liegt als eigene Ebene
   darunter, weil ein Farbverlauf sich nicht auf eine Vollflaeche
   ueberblenden laesst - so wird der Wechsel weich statt hart. */
.crw-nav::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  /* Reicht bewusst unter den Balken hinaus. Nur so darf er stark
     genug sein: der Hero wird in der Gold-Phase so hell, dass
     Creme sonst auf 3,7:1 faellt. Ueber 150px laeuft er weich
     aus und liest sich als Licht, nicht als zweite Kante. */
  height:150px;
  background:linear-gradient(to bottom,
    rgba(var(--nav-ink-rgb),.74) 0%,
    rgba(var(--nav-ink-rgb),.32) 48%,
    rgba(var(--nav-ink-rgb),0) 100%);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
/* Ganz oben liegt nichts unter dem Balken, also braucht er keine
   Kante. Sobald Inhalt darunter durchlaeuft, bekommt er eine:
   ueber den cremefarbenen Abschnitten hat er sonst exakt die
   Farbe der Seite und verschwindet. Geschaltet in
   assets/js/nav.js. */
.crw-nav.is-elevated{
  border-bottom-color:rgba(var(--nav-truffle-rgb),.15);
  box-shadow:0 6px 20px -12px rgba(var(--nav-truffle-rgb),.30);
}

/* ── Ueber dem Hero ──────────────────────────────────────────
   Nur Seiten mit dunklem Hero tragen crw-nav--over-hero. Dort
   liegt der Balken ohne Flaeche auf dem Bild, bis der Hero durch
   ist; danach schiebt sich die helle Flaeche darunter.

   Bewusst am Markup festgemacht und nicht per JS erraten: die
   Rechts- und Shopseiten starten auf hellem Grund, dort waere
   heller Text auf heller Flaeche unlesbar.

   Der Verlauf ist kein Dekor. Der Hero ist an dieser Stelle hell
   genug, dass Creme darauf sonst unter 4,5:1 faellt.
   ------------------------------------------------------------ */
.crw-nav--over-hero:not(.is-elevated){
  background-color:rgba(var(--nav-cream-rgb),0);
  border-bottom-color:transparent;
}
.crw-nav--over-hero:not(.is-elevated)::before{opacity:1}

.crw-nav--over-hero:not(.is-elevated) .crw-brand img{filter:brightness(0) invert(1)}
.crw-nav--over-hero:not(.is-elevated) .crw-nav-links a{
  color:var(--nav-cream);
  text-shadow:0 1px 14px rgba(var(--nav-ink-rgb),.7);
}
.crw-nav--over-hero:not(.is-elevated) .crw-nav-links a::after{background:var(--nav-cream)}
.crw-nav--over-hero:not(.is-elevated) .crw-nav-cta{
  background:var(--nav-cream);
  color:var(--nav-truffle);
}
.crw-nav--over-hero:not(.is-elevated) .crw-burger span{
  background:var(--nav-cream);
  box-shadow:0 1px 10px rgba(var(--nav-ink-rgb),.6);
}

.crw-nav-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
  width:100%;
  max-width:76rem;
  height:var(--nav-h);
  margin:0 auto;
  padding:0 clamp(1.15rem,4vw,2.5rem);
}

.crw-brand{flex:0 0 auto;display:inline-flex;align-items:center;border-radius:6px}
/* Auf heller Flaeche in Originalfarbe. Ueber dem Hero wird es
   invertiert, wie im Footer. */
.crw-brand img{
  height:clamp(1.7rem,2.4vw,2.1rem);
  width:auto;
  display:block;
  opacity:1;
  transition:filter .3s ease;
}
.crw-brand:focus-visible{outline:2px solid var(--nav-rose-deep);outline-offset:4px}

.crw-nav-links{
  display:none;
  align-items:center;
  gap:clamp(1.15rem,2.4vw,2.1rem);
  margin:0;padding:0;
  list-style:none;
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.01em;
}
.crw-nav-links a{
  display:inline-block;
  padding:.45rem .05rem;
  color:rgba(var(--nav-truffle-rgb),.82);
  white-space:nowrap;
  text-decoration:none;
  transition:color .3s ease,text-shadow .3s ease;
}
.crw-nav-links a:hover,
.crw-nav-links a[aria-current]{color:var(--nav-truffle)}
.crw-nav-links a:focus-visible{outline:2px solid var(--nav-rose-deep);outline-offset:3px;border-radius:3px}

.crw-nav-right{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}

.crw-nav-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  background:var(--nav-truffle);
  color:var(--nav-cream);
  padding:.72rem 1.5rem;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .3s ease,color .3s ease,transform .22s ease;
}
.crw-nav-cta:hover{background:var(--nav-rose-deep);transform:translateY(-1px)}
.crw-nav-cta:active{transform:translateY(0)}
.crw-nav-cta:focus-visible{outline:2px solid var(--nav-rose-deep);outline-offset:3px}

/* Zurueckhaltende Variante fuer Seiten ohne Verkaufsabsicht,
   etwa die Rechtstexte. */
.crw-nav-back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1.15rem;
  border-radius:999px;
  font-size:.8125rem;
  font-weight:500;
  color:rgba(var(--nav-truffle-rgb),.82);
  border:1px solid rgba(var(--nav-truffle-rgb),.16);
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
.crw-nav-back svg{width:.9rem;height:.9rem;flex:0 0 auto}
.crw-nav-back:hover{color:var(--nav-cream);background:var(--nav-truffle);border-color:var(--nav-truffle)}
.crw-nav-back:focus-visible{outline:2px solid var(--nav-rose-deep);outline-offset:3px}

/* Menue-Schalter, aus CSS gezeichnet statt als Icon-Font. Traegt
   die bestehende ID mobile-menu-btn, damit vorhandene Overlay-Logik
   unveraendert weiterlaeuft. Drei Balken, weil das Kreuz in
   assets/css/motion.css genau diese drei bewegt. */
.crw-burger{
  position:relative;width:2.4rem;height:2.4rem;flex:0 0 auto;
  border:0;padding:0;background:transparent;cursor:pointer;border-radius:999px;
}
.crw-burger:focus-visible{outline:2px solid var(--nav-rose-deep);outline-offset:2px}
.crw-burger span{
  position:absolute;left:50%;width:1.2rem;height:1.5px;margin-left:-.6rem;
  border-radius:1px;
  background:var(--nav-truffle);
  transition:background-color .3s ease,box-shadow .3s ease;
}
.crw-burger span:nth-child(1){top:calc(50% - 5px)}
.crw-burger span:nth-child(2){top:50%}
.crw-burger span:nth-child(3){top:calc(50% + 5px)}

/* Auf schmalen Geraeten teilen sich Logo, Termin und Schalter eine
   Zeile. Der Termin gibt Platz ab, statt zu brechen. */
@media (max-width:599px){
  :root{--nav-h:3.75rem}
  .crw-nav-inner{gap:.7rem}
  .crw-nav-cta{padding:.6rem 1.05rem;font-size:.75rem}
  .crw-nav-back{padding:.55rem .95rem;font-size:.75rem}
  .crw-burger{width:2.2rem;height:2.2rem}
}

@media (min-width:900px){
  .crw-nav-links{display:flex}
  .crw-burger{display:none}
}
@media (prefers-reduced-motion:reduce){
  .crw-nav,.crw-nav::before,.crw-brand img,.crw-nav-links a,
  .crw-nav-cta,.crw-nav-back,.crw-burger span{transition:none}
}