/* Einheitlicher Seitenkopf fuer alle Seiten (seit 01.10.2026).
   Eigene Klassennamen (sh-*), kein <nav>-Element: viele Seiten haben
   globale nav{...}-Regeln, die sonst greifen wuerden.
   .site-head ohne .solid = hell ueber dem dunklen Startbild (nur Startseite).
   js/header.js setzt .solid beim Scrollen bzw. auf Seiten ohne .hero. */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 5vw, 4rem);
  color: #f5f3ef; font-family: 'DM Sans', sans-serif; font-weight: 300;
  transition: background .4s, padding .4s, color .4s, box-shadow .4s;
  /* iPhone: Kopf reicht unter die Statusleiste (viewport-fit=cover), damit
     dort beim Scrollen kein Inhalt durchscheint */
  padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
  padding-left: max(clamp(1rem, 5vw, 4rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1rem, 5vw, 4rem), env(safe-area-inset-right, 0px));
}
.site-head.solid {
  background: #f5f3ef; color: #1a1916; /* deckend: sonst scheint am iPhone oben Inhalt durch */
  padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); padding-bottom: .7rem; box-shadow: 0 1px 0 rgba(26,25,22,.1);
}
.site-head a { color: inherit; text-decoration: none; }
.sh-logo { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.sh-logo svg { height: 26px; width: auto; display: block; }
.sh-logo .f { fill: currentColor; }
.sh-logo .fs { fill: currentColor; stroke: currentColor; stroke-width: .5px; }
.sh-logo .s { stroke: currentColor; stroke-width: 30px; }
.sh-word { font-size: .78rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; line-height: 1; }
.sh-right { display: flex; align-items: center; gap: 2.2rem; }
.sh-links { display: flex; align-items: center; gap: 2.2rem; }
.sh-links a { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; transition: opacity .3s, color .3s; }
.sh-links a:hover, .sh-links a[aria-current="page"] { opacity: 1; color: #b8956a; }
.sh-portal {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; white-space: nowrap;
  border-radius: 999px; background: #b8956a; color: #1a1916 !important;
  font-size: .7rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s, transform .3s;
}
.sh-portal:hover { background: #cfae84; transform: translateY(-1px); }
.sh-burger {
  display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.sh-burger span { display: block; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px; }

/* Menue am Handy */
.sh-menu {
  position: fixed; inset: 0; z-index: 950; display: none;
  flex-direction: column; justify-content: center; gap: .3rem;
  padding: 6rem clamp(1.5rem, 8vw, 3rem) 3rem;
  background: #1a1916; color: #f5f3ef; font-family: 'DM Sans', sans-serif;
}
.sh-menu.open { display: flex; animation: shIn .4s cubic-bezier(.22,.61,.36,1); }
@keyframes shIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sh-menu a { color: inherit; text-decoration: none; }
.sh-menu .sh-m-link {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.25; padding: .2rem 0;
  border-bottom: 1px solid rgba(245,243,239,.08);
}
.sh-menu .sh-m-link:hover, .sh-menu .sh-m-link[aria-current="page"] { color: #cfae84; font-style: italic; }
.sh-menu .sh-portal { align-self: flex-start; margin-top: 2rem; min-height: 52px; padding: 0 1.6rem; font-size: .74rem; }
.sh-close {
  position: absolute; top: calc(1.1rem + env(safe-area-inset-top, 0px)); right: clamp(1rem, 5vw, 4rem);
  min-height: 44px; padding: 0 .4rem; border: 0; background: none; cursor: pointer;
  color: rgba(245,243,239,.6); font: 400 .7rem 'DM Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.sh-close:hover { color: #cfae84; }
html.sh-lock, html.sh-lock body { overflow: hidden; }

@media (max-width: 900px) {
  .sh-links { display: none; }
  .sh-right { gap: .6rem; }
  .sh-burger { display: flex; }
  .sh-right > .sh-portal { padding: 0 1rem; font-size: .66rem; }
}
@media (max-width: 380px) {
  .sh-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-head, .sh-portal { transition: none; }
  .sh-menu.open { animation: none; }
}

/* Sprungziele nicht unter dem festen Kopf verstecken */
[id] { scroll-margin-top: 84px; }

/* viewport-fit=cover: im Querformat nichts unter der Kamera-Aussparung */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* Kundenportal am Handy kleiner; Tippflaeche bleibt ueber ::after 44px hoch */
@media (max-width: 600px) {
  .sh-right > .sh-portal { position: relative; min-height: 34px; padding: 0 .85rem; font-size: .6rem; letter-spacing: .14em; }
  .sh-right > .sh-portal::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
}