/* ======================================================================
   Kyrburg · Header NEU (Oxygen-Header 9882, Klon von 9502) — 2026-09-06
   Farben und Schriften aus ~/Alec-OS/wissen/kyrburg-design-relaunch.md §4.2.
   Zustände (setzt das JavaScript-Element im Template):
     .kyh-header.is-solid   Header hat Papier-Hintergrund (ab 40 px Scroll)
     .kyh-header.is-hidden  beim Runterscrollen weggefahren, beim Hochscrollen zurück
     .kyh-header.is-hell    Seite beginnt hell (kein Hero-Bild): Logo/Striche sofort dunkel
     html.ky-nav-open       Menü offen: Panel von rechts (520 px) über abgedunkelter Seite
   Logo und Striche: hell (Papier) auf transparent · Original bzw. Tinte auf Papier.
   „body“ vor den Klassen ist Absicht: Oxygen gibt jedem Element eine eigene
   Klasse mit gleicher Gewichtung, so gewinnen diese Regeln sicher.
   ====================================================================== */
:root{
  --kyh-papier:#F8F4EC; --kyh-tinte:#1C1814; --kyh-gedaempft:#6F665B;
  --kyh-gold:#8A5F25; --kyh-gruen:#11370B; --kyh-linie:rgba(28,24,20,.14);
  --kyh-h:96px; --kyh-inset:32px; --kyh-logo:60px;
  --kyh-ease:cubic-bezier(.77,0,.175,1);
}
@media (max-width:767px){ :root{ --kyh-h:72px; --kyh-inset:20px; --kyh-logo:44px; } }

/* ---------- Leiste ---------- */
body .kyh-header{
  position:fixed; top:0; left:0; right:0; width:auto; max-width:none; height:var(--kyh-h); z-index:1000;
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  padding:0 var(--kyh-inset); margin:0; box-sizing:border-box;
  background-color:transparent; box-shadow:none;
  transition:transform .45s var(--kyh-ease), background-color .35s ease, box-shadow .35s ease;
}
body .kyh-header.is-hidden{ transform:translateY(-100%); }
body .kyh-header.is-solid{ background-color:var(--kyh-papier); box-shadow:0 1px 0 var(--kyh-linie); }
html.ky-nav-open body .kyh-header{ background-color:var(--kyh-papier); box-shadow:none; transform:none; z-index:10001; }

/* ---------- Logo (zwei Fassungen übereinander, per Zustand überblendet) ---------- */
body .kyh-logo{ position:relative; display:block; height:var(--kyh-logo); width:auto; line-height:0; flex:0 0 auto; padding:0; margin:0; text-decoration:none; }
body .kyh-logo img{ display:block; height:var(--kyh-logo); width:auto; max-width:none; margin:0; transition:opacity .3s ease; }
body .kyh-logo .kyh-logo-dunkel{ position:absolute; top:0; left:0; opacity:0; }
body .kyh-header.is-solid .kyh-logo-hell, body .kyh-header.is-hell .kyh-logo-hell, html.ky-nav-open body .kyh-logo-hell{ opacity:0; }
body .kyh-header.is-solid .kyh-logo-dunkel, body .kyh-header.is-hell .kyh-logo-dunkel, html.ky-nav-open body .kyh-logo-dunkel{ opacity:1; }

/* ---------- Zwei Striche ---------- */
body .kyh-burger{
  position:relative; display:block; width:34px; height:22px; flex:0 0 auto;
  padding:0; margin:0; border:0; border-radius:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent; box-shadow:none;
}
body .kyh-burger:focus-visible{ outline:2px solid var(--kyh-gold); outline-offset:6px; }
body .kyh-burger span{
  position:absolute; left:0; display:block; width:100%; height:2px; margin:0; padding:0;
  background-color:var(--kyh-papier);
  transition:transform .35s var(--kyh-ease), top .35s var(--kyh-ease), bottom .35s var(--kyh-ease), background-color .3s ease;
}
body .kyh-burger .kyh-strich-1{ top:5px; }
body .kyh-burger .kyh-strich-2{ bottom:5px; }
body .kyh-header.is-solid .kyh-burger span, body .kyh-header.is-hell .kyh-burger span, html.ky-nav-open body .kyh-burger span{ background-color:var(--kyh-tinte); }
html.ky-nav-open body .kyh-burger .kyh-strich-1{ top:10px; transform:rotate(45deg); }
html.ky-nav-open body .kyh-burger .kyh-strich-2{ bottom:10px; transform:rotate(-45deg); }

/* ---------- Menü: Panel von rechts (nach Pellicano: 526 px, Off-White, rechtsbündig) ---------- */
html.ky-nav-open{ overflow:hidden; }
body .kyh-overlay{
  position:fixed; top:0; left:0; right:0; bottom:0; width:auto; height:auto; z-index:9998; margin:0; padding:0;
  background-color:rgba(28,24,20,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s;
}
html.ky-nav-open body .kyh-overlay{ opacity:1; visibility:visible; transition:opacity .4s ease; }
body .kyh-menu{
  position:fixed; top:0; right:0; bottom:0; left:auto; width:520px; max-width:calc(100% - 48px); height:auto; z-index:9999;
  display:block; margin:0; padding:0; background-color:var(--kyh-papier); box-shadow:none;
  transform:translateX(100%); visibility:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transition:transform .5s var(--kyh-ease), visibility 0s linear .5s;
}
html.ky-nav-open body .kyh-menu{ transform:translateX(0); visibility:visible; transition:transform .5s var(--kyh-ease); }
html.ky-nav-open body .kyh-header{ z-index:10001; }
body .kyh-menu-innen{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start;
  box-sizing:border-box; width:100%; min-height:100%; margin:0;
  padding:calc(var(--kyh-h) + 28px) 48px 36px 40px;
  opacity:0; transition:opacity .35s ease;
}
html.ky-nav-open body .kyh-menu-innen{ opacity:1; transition:opacity .45s ease .15s; }

/* Hauptpunkte: rechtsbündig, Serife, ruhige Zeilen (Pellicano: 24 px, 16 px Luft) */
body .kyh-liste{ display:flex; flex-direction:column; align-items:flex-end; width:100%; margin:0; padding:0; }
body .kyh-link, body .kyh-kopf{
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end; width:auto; margin:0; padding:11px 0;
  border:0; background:transparent; cursor:pointer; text-align:right; text-decoration:none;
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; font-size:30px; line-height:1.2; letter-spacing:-.1px;
  color:var(--kyh-tinte); transition:color .25s ease;
}
body .kyh-kopftext{ display:inline; margin:0; padding:0; font:inherit; color:inherit; }
body .kyh-link:hover, body .kyh-link:focus-visible, body .kyh-kopf:hover, body .kyh-kopf:focus-visible{ color:var(--kyh-gold); }
body .kyh-link.is-aktuell{ color:var(--kyh-gold); }
body .kyh-kopf:focus-visible, body .kyh-link:focus-visible{ outline:2px solid var(--kyh-gold); outline-offset:4px; }

/* Aufklapper: feiner Winkel links vom Wort, dreht sich beim Öffnen */
body .kyh-gruppe{ display:flex; flex-direction:column; align-items:flex-end; width:100%; margin:0; padding:0; }
body .kyh-chevron{
  display:block; width:8px; height:8px; margin:0 14px 0 0; padding:0; flex:0 0 auto; position:relative; top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg);
  transition:transform .3s var(--kyh-ease), top .3s var(--kyh-ease), color .25s ease; color:var(--kyh-gedaempft);
}
body .kyh-gruppe.is-offen .kyh-chevron{ transform:rotate(-135deg); top:2px; color:var(--kyh-gold); }
body .kyh-unter{
  display:flex; flex-direction:column; align-items:flex-end; width:100%; margin:0; padding:0 0 0 0;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--kyh-ease), opacity .3s ease, padding .3s ease;
}
body .kyh-gruppe.is-offen .kyh-unter{ max-height:420px; opacity:1; padding:2px 0 10px; transition:max-height .45s var(--kyh-ease), opacity .35s ease .1s, padding .3s ease; }
/* Unterpunkte in Jost wie der Fließtext der Seiten (05.11.2026, vorher Spectral aus der alten Instanz).
   Gleiches Paar wie in der Speisekarte: Cormorant oben, Jost darunter. */
body .kyh-unterlink{
  display:block; margin:0; padding:6px 0; text-decoration:none; text-align:right;
  font-family:'Kyrburg Jost', 'Kyrburg Jost Ersatz', 'Helvetica Neue', Arial, sans-serif; font-weight:400; font-size:16px; line-height:1.45; letter-spacing:.01em;
  color:var(--kyh-gedaempft); transition:color .25s ease;
}
body .kyh-unterlink:hover, body .kyh-unterlink:focus-visible{ color:var(--kyh-gold); }
body .kyh-unterlink.is-aktuell{ color:var(--kyh-tinte); }

/* Panel-Fuß: Reservierung, Telefon, Instagram — rechts unten wie bei Pellicano */
body .kyh-fuss{ display:flex; flex-direction:column; align-items:flex-end; gap:18px; width:100%; margin:auto 0 0; padding:36px 0 0; }
/* Reservierung als dieselbe grüne Pille wie die Knöpfe der Seiten (Tenor Sans, Stand 05.11.2026), nicht mehr der eckige Gold-Knopf der alten Instanz */
body .kyh-menu .kyh-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin:0; padding:11px 20px 10px;
  border:1px solid var(--kyh-gruen); border-radius:999px; background-color:var(--kyh-gruen); color:var(--kyh-papier);
  font-family:'Tenor Sans', 'Kyrburg Jost', 'Helvetica Neue', Arial, sans-serif; font-size:13.5px; font-weight:400; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
body .kyh-menu .kyh-cta:hover, body .kyh-menu .kyh-cta:focus-visible{ border-color:var(--kyh-gold); background-color:var(--kyh-gold); color:var(--kyh-papier); }
body .kyh-tel{ display:block; margin:0; padding:0; font-family:'Kyrburg Jost', 'Kyrburg Jost Ersatz', 'Helvetica Neue', Arial, sans-serif; font-size:16px; line-height:1.45; letter-spacing:.02em; color:var(--kyh-tinte); text-decoration:none; transition:color .25s ease; }
body .kyh-tel:hover{ color:var(--kyh-gold); }
body .kyh-social-link{ display:block; line-height:0; margin:0; padding:0; color:var(--kyh-gedaempft); transition:color .25s ease; }
body .kyh-social-link:hover, body .kyh-social-link:focus-visible{ color:var(--kyh-gold); }
body .kyh-social-link svg{ display:block; width:22px; height:22px; fill:currentColor; }
body .kyh-social-link .oxy-svg-icon2{ display:block; line-height:0; }

/* ---------- Handy ---------- */
@media (max-width:767px){
  body .kyh-burger{ width:28px; height:18px; }
  body .kyh-burger .kyh-strich-1{ top:3px; }
  body .kyh-burger .kyh-strich-2{ bottom:3px; }
  html.ky-nav-open body .kyh-burger .kyh-strich-1{ top:8px; }
  html.ky-nav-open body .kyh-burger .kyh-strich-2{ bottom:8px; }
  body .kyh-menu{ width:86vw; max-width:none; }
  body .kyh-menu-innen{ padding:calc(var(--kyh-h) + 14px) 24px 28px 24px; }
  body .kyh-link, body .kyh-kopf{ font-size:27px; padding:9px 0; }
  body .kyh-unterlink{ font-size:15px; padding:5px 0; }
}

/* ---------- Weniger Bewegung, wenn das System es wünscht ---------- */
@media (prefers-reduced-motion:reduce){
  body .kyh-header, body .kyh-burger span, body .kyh-menu, body .kyh-menu-innen, body .kyh-overlay, body .kyh-unter, body .kyh-chevron, body .kyh-logo img{ transition:none !important; }
}