/* 4-hands.ch — Menüführung: gruppierte Leiste mit Untermenüs,
   Servicezeile darüber, beim Scrollen schrumpfend. */

.hd { position: sticky; top: 0; z-index: 60; }

/* --- Servicezeile --- */
.hd-util {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 48px; overflow: hidden;
  background: oklch(0.11 0.012 45);
  border-bottom: 1px solid oklch(0.24 0.02 50 / 0.7);
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.68 0.02 55);
  transition: height 0.24s ease, opacity 0.2s ease;
}
.hd.small .hd-util { height: 0; opacity: 0; border-bottom-color: transparent; }
.hd-util a { color: oklch(0.78 0.03 55); text-decoration: none; }
.hd-util a:hover { color: oklch(0.82 0.15 48); }
.hd-util .grpset { display: flex; align-items: center; gap: 26px; }
.hd-dot { width: 6px; height: 6px; border-radius: 999px; background: oklch(0.7 0.15 145); box-shadow: 0 0 8px oklch(0.7 0.15 145 / 0.8); }

/* --- Hauptleiste --- */
.hd-main {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 48px; height: 76px;
  background: oklch(0.14 0.01 50 / 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(0.3 0.02 50 / 0.5);
  transition: height 0.24s ease;
}
.hd.small .hd-main { height: 58px; }
.hd-logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.hd-logo img { height: 56px; width: auto; filter: brightness(1.2) drop-shadow(0 2px 8px oklch(0 0 0 / 0.4)); transition: height 0.24s ease; }
.hd.small .hd-logo img { height: 42px; }

.hd-drawer { display: flex; align-items: stretch; justify-content: flex-end; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hd-nav { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hd-nav > li { position: static; display: flex; }
.hd-nav > li > a {
  display: flex; align-items: center; gap: 7px; padding: 0 15px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: 0.03em; text-transform: uppercase; color: oklch(0.93 0.008 60);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.hd-nav > li > a:hover, .hd-nav > li:hover > a, .hd-nav > li:focus-within > a, .hd-nav > li.open > a {
  color: oklch(0.8 0.15 48); border-bottom-color: oklch(0.66 0.17 45);
}
.hd-nav > li.open .hd-caret { transform: rotate(225deg) translate(-2px, -2px); }
.hd-caret { transition: transform 0.2s ease; }
.hd-nav > li > a.on { color: oklch(0.78 0.16 45); border-bottom-color: oklch(0.66 0.17 45); }
.hd-nav > li > a:focus-visible { outline: 2px solid oklch(0.7 0.16 45); outline-offset: -4px; }
.hd-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.65; }

/* --- Untermenü --- */
.hd-panel {
  position: absolute; top: 100%; left: 0;
  display: grid; gap: 26px 40px; padding: 26px 30px;
  background: oklch(0.17 0.012 50);
  border: 1px solid oklch(0.32 0.02 50 / 0.7);
  border-top: 2px solid oklch(0.66 0.17 45);
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.hd-nav > li:hover .hd-panel, .hd-nav > li:focus-within .hd-panel, .hd-nav > li.open .hd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hd-panel.wide { left: 48px; right: 48px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.hd-panel.narrow { grid-template-columns: repeat(2, minmax(196px, 1fr)); left: auto; right: 48px; }
.hd-panel h4 {
  margin: 0 0 9px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.7 0.09 52);
}
.hd-panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.hd-panel a {
  display: block; padding: 6px 10px; margin-left: -10px; border-radius: 3px;
  font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 15px;
  color: oklch(0.88 0.008 60); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.hd-panel a:hover { background: oklch(0.24 0.03 45); color: oklch(0.85 0.14 50); }
.hd-panel a:focus-visible { outline: 2px solid oklch(0.7 0.16 45); outline-offset: 1px; }

.hd-cta {
  flex: 0 0 auto; margin-left: 10px; align-self: center;
  background: oklch(0.6 0.17 45); color: oklch(0.16 0.01 50);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 15px; padding: 12px 22px; border-radius: 2px;
  text-decoration: none; white-space: nowrap;
}
.hd-cta:hover { background: oklch(0.68 0.17 45); color: oklch(0.16 0.01 50); }

.hd-burger { display: none; }

/* ---------------- Handy und kleines Tablet ---------------- */
@media (max-width: 980px) {
  .hd-util { display: none; }
  /* backdrop-filter macht die Leiste zum Bezugsrahmen fuer fest positionierte
     Elemente — die Schublade waere sonst auf die Kopfzeilenhoehe eingesperrt. */
  .hd-main { padding: 0 16px; height: 62px; backdrop-filter: none; background: oklch(0.14 0.01 50 / 0.97); }
  .hd.small .hd-main { height: 62px; }
  .hd-logo img, .hd.small .hd-logo img { height: 44px; }

  .hd-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 48px; height: 48px; flex: 0 0 48px; padding: 0; cursor: pointer;
    background: oklch(0.2 0.015 50 / 0.7);
    border: 1px solid oklch(0.4 0.03 50 / 0.7); border-radius: 4px;
  }
  .hd-burger span { display: block; width: 22px; height: 2px; background: oklch(0.94 0.005 60); transition: transform 0.22s ease, opacity 0.18s; }
  .hd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hd-burger:focus-visible { outline: 2px solid oklch(0.7 0.16 45); outline-offset: 2px; }

  .hd-drawer {
    display: block; flex: none;
    position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 59;
    background: oklch(0.13 0.012 48 / 0.985); backdrop-filter: blur(14px);
    overflow-y: auto; padding: 8px 16px 48px;
    transform: translateX(100%); transition: transform 0.26s ease;
  }
  .hd-drawer.open { transform: translateX(0); }
  body.hd-locked { overflow: hidden; }

  .hd-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .hd-nav > li { display: block; }
  .hd-nav > li > a {
    justify-content: space-between; padding: 16px 4px; font-size: 19px;
    border-bottom: 1px solid oklch(0.3 0.02 50 / 0.55);
  }
  .hd-nav > li > a:hover, .hd-nav > li:hover > a { border-bottom-color: oklch(0.3 0.02 50 / 0.55); }
  .hd-caret { transition: transform 0.22s ease; }
  .hd-nav > li.open > .hd-caret-wrap .hd-caret,
  .hd-nav > li.open > a .hd-caret { transform: rotate(225deg) translate(-2px, -2px); }

  /* Untermenü aufklappbar statt schwebend */
  .hd-panel {
    position: static; display: none; opacity: 1; visibility: visible; transform: none;
    grid-template-columns: 1fr !important; gap: 20px;
    padding: 14px 0 18px 14px; margin: 0;
    background: transparent; border: none; border-left: 2px solid oklch(0.5 0.1 45 / 0.5);
    box-shadow: none;
  }
  .hd-nav > li.open .hd-panel { display: grid; }
  .hd-panel a { font-size: 17px; padding: 10px 10px; }

  .hd-cta { display: block; margin: 24px 0 0; text-align: center; padding: 17px; font-size: 18px; }
}

/* Der Hero liegt unter der Kopfzeile — Versatz und Innenabstand folgen deren Hoehe.
   Inhalt und Scroll-Hinweis stehen untereinander im Fluss, damit sie sich auf
   keiner Bildschirmhoehe ueberlappen koennen (auch im Querformat nicht). */
.hero-top { margin-top: -112px; }
.hero-stage {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 112px 0 40px;
}
.hero-hint { position: static !important; flex: 0 0 auto; }
@media (max-width: 980px) {
  .hero-top { margin-top: -62px; }
  .hero-stage { padding: 62px 0 32px; gap: 24px; }
}
/* Sehr flache Fenster (Handy im Querformat): alles rueckt enger */
@media (max-height: 620px) {
  .hero-stage { gap: 14px; padding-bottom: 16px; }
  .hero-hint { gap: 8px !important; }
  .hero-stage h1 { font-size: clamp(30px, 6vh, 52px) !important; margin-bottom: 12px !important; }
  .hero-stage p { font-size: 17px !important; margin-bottom: 18px !important; }
  .hero-stage h1 + p { margin-top: 0; }
}