/* ruhe.css, 05.10.2026 (Ruhe-Umbau): Desktop-Navigation mit Leistungs-Menue, mobile Ausklappliste,
   kompakte Leistungsliste nach dem Hero, 44-%-Block einklappbar. Nur vorhandene Farben und Schriften. */

/* ---------- Desktop-Navigation ---------- */
.ww-nav { display: none; }
@media (min-width: 1025px) {
  .ww-nav { display: flex; align-items: center; gap: .1rem; margin: 0 auto 0 1.2rem; }
  .ww-header__inner > .ww-nav-actions { margin-left: 0; }
}
.ww-nav__link {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: 500 .92rem/1 var(--font-main); color: var(--t-ink);
  padding: .65rem .85rem; border-radius: .6rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.ww-nav__link:hover { background: color-mix(in srgb, var(--t-ink) 7%, transparent); }
.ww-nav__link:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 2px; }
.ww-nav__pfeil { font-size: .7em; opacity: .6; transition: transform .18s ease; }
.ww-nav__punkt { position: relative; }
.ww-nav__punkt.is-offen .ww-nav__pfeil, .ww-nav__punkt:hover .ww-nav__pfeil { transform: rotate(180deg); }

/* Mega-Menue: ruhig, grosszuegig, weich (opacity + leichtes translateY, 200 ms, kein Bounce).
   Bleibt offen bei Hover auf Punkt ODER Menue (zusammenhaengender Hoverbereich, kein Flackern)
   und bei Tastaturfokus (focus-within). */
.ww-nav__mega {
  position: absolute; left: 50%; top: calc(100% + .4rem); transform: translate(-50%, 6px);
  width: min(720px, calc(100vw - 4rem));
  display: grid; grid-template-columns: 1fr 1fr; gap: .15rem;
  padding: .9rem; border-radius: 1rem;
  background: var(--t-panel, #fff); border: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
  box-shadow: 0 24px 60px -24px rgba(2, 6, 23, .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.ww-nav__punkt::after { /* unsichtbare Bruecke zwischen Knopf und Menue gegen Flackern */
  content: ""; position: absolute; left: -2rem; right: -2rem; top: 100%; height: .6rem;
}
.ww-nav__punkt:hover .ww-nav__mega,
.ww-nav__punkt.is-offen .ww-nav__mega,
.ww-nav__punkt:focus-within .ww-nav__mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .ww-nav__mega { transition: none; transform: translate(-50%, 0); } }
.ww-mega__eintrag {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem;
  padding: .7rem .8rem; border-radius: .7rem; text-decoration: none;
  transition: background-color .15s ease;
}
.ww-mega__eintrag:hover, .ww-mega__eintrag:focus-visible { background: color-mix(in srgb, var(--t-accent-vivid) 9%, transparent); outline: none; }
.ww-mega__nr { grid-row: 1 / 3; align-self: start; font: 600 .66rem/1.9 var(--font-mono); letter-spacing: .12em; color: var(--t-accent-vivid); }
.ww-mega__name { font: 600 .92rem/1.3 var(--font-main); color: var(--t-ink); }
.ww-mega__satz { grid-column: 2; font: 400 .78rem/1.45 var(--font-main); color: var(--t-ink-2); margin-top: .15rem; }

/* ---------- Mobile: Leistungen als Ausklappliste im Burger-Menue ---------- */
.bh-mission--knopf { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; text-align: left; }
.bh-mission__pfeil { margin-left: auto; font-size: .8em; opacity: .6; transition: transform .18s ease; }
.bh-mission--knopf[aria-expanded="true"] .bh-mission__pfeil { transform: rotate(180deg); }
.bh-unter { list-style: none; margin: .2rem 0 .6rem; padding: 0 0 0 2.4rem; display: grid; gap: .1rem; }
.bh-unter__link { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .4rem; border-radius: .5rem; text-decoration: none; font: 500 .95rem/1.3 var(--font-main); color: var(--t-ink); }
.bh-unter__link:hover, .bh-unter__link:focus-visible { background: color-mix(in srgb, var(--t-ink) 7%, transparent); }
.bh-unter__nr { font: 600 .62rem/1 var(--font-mono); letter-spacing: .1em; color: var(--t-accent-vivid); }

/* ---------- Kompakte Leistungsliste nach dem Hero ---------- */
.lw .ww-sheet-inner { padding-top: clamp(2.6rem, 5vw, 4.5rem); padding-bottom: clamp(2.6rem, 5vw, 4.5rem); }
.lw-liste { margin-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent); }
.lw-zeile {
  display: grid; grid-template-columns: 3.2rem minmax(0, .38fr) minmax(0, 1fr) auto;
  align-items: baseline; gap: 1.2rem;
  padding: 1.05rem .4rem; border-bottom: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
  text-decoration: none; transition: background-color .18s ease;
}
.lw-zeile:hover, .lw-zeile:focus-visible { background: color-mix(in srgb, var(--t-accent-vivid) 7%, transparent); outline: none; }
.lw-zeile__nr { font: 600 .7rem/1 var(--font-mono); letter-spacing: .14em; color: var(--t-accent-vivid); }
.lw-zeile__name { font: 600 clamp(1rem, 1.3vw, 1.18rem)/1.3 var(--font-main); color: var(--t-ink); letter-spacing: -.01em; }
.lw-zeile__satz { font: 400 .88rem/1.5 var(--font-main); color: var(--t-ink-2); max-width: 58ch; }
.lw-zeile__pfeil { color: var(--t-accent-vivid); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.lw-zeile:hover .lw-zeile__pfeil, .lw-zeile:focus-visible .lw-zeile__pfeil { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lw-zeile__pfeil { transition: none; transform: none; } }
@media (max-width: 899px) {
  .lw-zeile { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .lw-zeile__satz { grid-column: 2; grid-row: 2; }
  .lw-zeile__pfeil { grid-row: 1; }
}

/* ---------- 44-%-Block einklappbar ---------- */
.ww-metrics--falt { border: 0; }
.ww-metrics__griff { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; padding: .2rem 0; }
.ww-metrics__griff::-webkit-details-marker { display: none; }
.ww-metrics__griff:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 3px; border-radius: .4rem; }
.ww-metrics__pfeil { font-size: .8rem; opacity: .55; transition: transform .18s ease; }
.ww-metrics--falt[open] .ww-metrics__pfeil { transform: rotate(180deg); }
.ww-metrics--falt > .ww-metrics__col { padding-top: .5rem; }

/* Aktuelle Seite im Desktop-Menue */
.ww-nav__link[aria-current="page"] { color: var(--t-accent-vivid); }

/* Wortgruppen nicht trennen (Headline) */
.ww-nobr { white-space: nowrap; }