/* OneQrew v7 — Header und Footer.
   Phase 0 reserviert nur Hoehen, damit im v7-Modus kein Layout Shift
   entsteht, solange das Chrome noch v6-Markup rendert.
   Aenderungen immer auch in chrome.min.css. */

.oq-v7 .header__ticker {
  min-height: 32px;
  display: none;
}

.oq-v7 .header__top-menu {
  min-height: 24px;
  display: none;
}

.oq-v7 .header__main-menu {
  min-height: 56px;
}

.oq-v7 .header_ticker .wrapper {
  min-height: 32px;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .oq-v7 .header__ticker,
  .oq-v7 .header__top-menu {
    display: block;
  }
}

@media (min-width: 1280px) {
  .oq-v7 .header__main-menu {
    min-height: 64px;
  }
}

.oq-v7 .skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background-color: var(--oq-farbe-text);
  color: var(--oq-farbe-marke-kontrast);
  z-index: 9999;
}

.oq-v7 .skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 10px 20px;
  margin: 0;
  overflow: visible;
  clip-path: none;
}

/* ============================================================================
   Footer (Element 19) — vorbereitet, aber inaktiv. Rendert nur, wenn
   src/ui/shell/footer/footer.twig den v7-Zweig nimmt (oq_chrome_is_v7, siehe
   StyleLoader::CHROME_IS_V7). Solange die Konstante false ist, treffen diese
   Regeln kein Markup im DOM — tote, aber harmlose CSS-Vorbereitung, analog
   zur Hoehenreservierung des Headers oben. Nach Vorgabe
   "taifun-element-19-footer.html", siehe docs/superpowers/specs/
   2026-08-20-v7-footer-design.md. */

.oq-v7 .oq-fuss-abschluss {
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
}

.oq-v7 .oq-fuss-abschluss__in {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(34px, 4vw, 52px) clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}

.oq-v7 .oq-fuss-abschluss h2 {
  font-family: var(--oq-schrift-display);
  font-weight: var(--oq-display-gewicht);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.oq-v7 .oq-fuss-abschluss p {
  color: color-mix(in oklab, var(--oq-farbe-marke-kontrast) 87%, transparent);
  font-size: 1rem;
  margin-top: 7px;
  max-width: 44ch;
}

.oq-v7 .oq-fuss-abschluss__akt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: inherit;
  font-weight: 650;
  font-size: 1.02rem;
  min-height: var(--oq-tap-min);
  padding: 15px 28px;
  border-radius: var(--oq-radius-akt, var(--oq-radius-mittel));
  text-decoration: none;
  background: var(--oq-farbe-marke-kontrast);
  color: var(--oq-farbe-marke);
  flex: none;
  transition: opacity var(--oq-transition);
}

.oq-v7 .oq-fuss-abschluss__akt:hover {
  opacity: 0.88;
}

.oq-v7 .oq-fuss-abschluss__pfeil {
  width: 17px;
  height: 10px;
  flex: none;
  position: relative;
  transition: transform var(--oq-transition);
}

.oq-v7 .oq-fuss-abschluss__pfeil::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4.5px;
  width: 17px;
  height: 2px;
  background: currentColor;
}

.oq-v7 .oq-fuss-abschluss__pfeil::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.5px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.oq-v7 .oq-fuss-abschluss__akt:hover .oq-fuss-abschluss__pfeil {
  transform: translateX(6px);
}

.oq-v7 .oq-fuss {
  background: var(--oq-farbe-dunkel-alt, var(--oq-farbe-dunkel));
  color: var(--oq-farbe-dunkel-text);
  padding-block: clamp(44px, 5vw, 72px) 0;
  container-type: inline-size;
}

.oq-v7 .oq-fuss__in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.oq-v7 .oq-fuss__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  padding-bottom: clamp(32px, 3.6vw, 44px);
  border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-dunkel-text) 20%, transparent));
}

.oq-v7 .oq-fuss__marke {
  display: block;
  width: max-content;
}

.oq-v7 .oq-fuss__satz {
  margin-top: 16px;
  font-size: 0.98rem;
  max-width: 42ch;
  color: color-mix(in oklab, var(--oq-farbe-dunkel-text) 76%, transparent);
}

.oq-v7 .oq-fuss__kontakt {
  display: grid;
  gap: 9px;
  align-content: start;
  font-size: 0.92rem;
}

.oq-v7 .oq-fuss__kontakt h3 {
  font-size: 0.74rem;
  font-weight: 650;
  color: color-mix(in oklab, var(--oq-farbe-dunkel-text) 62%, transparent);
  letter-spacing: 0.01em;
}

.oq-v7 .oq-fuss__kontakt a {
  color: var(--oq-farbe-dunkel-text);
  font-weight: 600;
  text-decoration: none;
}

.oq-v7 .oq-fuss__kontakt a:hover {
  color: var(--oq-farbe-akzent);
}

.oq-v7 .oq-fuss__spalten {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  padding-block: clamp(20px, 2.2vw, 28px);
}

.oq-v7 .oq-fuss__sp > details {
  display: contents;
}

.oq-v7 .oq-fuss__sp summary {
  display: none;
}

.oq-v7 .oq-fuss__sp h3 {
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--oq-farbe-dunkel-text);
  margin-bottom: 8px;
}

.oq-v7 .oq-fuss__sp ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.oq-v7 .oq-fuss__sp a {
  display: block;
  padding: 5px 8px;
  margin-inline: -8px;
  border-radius: var(--oq-radius-klein);
  font-size: 0.88rem;
  text-decoration: none;
  color: color-mix(in oklab, var(--oq-farbe-dunkel-text) 80%, transparent);
  min-height: 30px;
  transition: background-color var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-fuss__sp a:hover {
  background: color-mix(in oklab, var(--oq-farbe-dunkel-text) 8%, transparent);
  color: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-fuss__chev {
  width: 9px;
  height: 9px;
  border: 2px solid var(--oq-farbe-akzent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--oq-transition);
}

.oq-v7 .oq-fuss__unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding-block: 13px;
  border-top: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-dunkel-text) 20%, transparent));
  font-size: 0.82rem;
  color: color-mix(in oklab, var(--oq-farbe-dunkel-text) 62%, transparent);
}

.oq-v7 .oq-fuss__rechtlich {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.oq-v7 .oq-fuss__rechtlich a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.oq-v7 .oq-fuss__rechtlich a:hover {
  color: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-fuss__sozial {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.oq-v7 .oq-fuss__sozial a {
  width: 34px;
  height: 34px;
  border-radius: var(--oq-radius-klein);
  display: grid;
  place-items: center;
  color: color-mix(in oklab, var(--oq-farbe-dunkel-text) 76%, transparent);
  transition: background-color var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-fuss__sozial a:hover {
  background: color-mix(in oklab, var(--oq-farbe-dunkel-text) 8%, transparent);
  color: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-fuss__partner {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-dunkel-text) 20%, transparent));
}

.oq-v7 .oq-fuss__partner-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: color-mix(in oklab, var(--oq-farbe-dunkel-text) 76%, transparent);
}

.oq-v7 .oq-fuss__partner-eintrag a {
  color: inherit;
  text-decoration: none;
}

@container (max-width: 1000px) {
  .oq-v7 .oq-fuss__spalten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 760px) {
  .oq-v7 .oq-fuss__kopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .oq-v7 .oq-fuss__spalten {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 8px;
  }

  .oq-v7 .oq-fuss__sp > details {
    display: block;
    border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-dunkel-text) 20%, transparent));
  }

  .oq-v7 .oq-fuss__sp > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    padding: 16px 2px;
    min-height: 58px;
    font-size: 1rem;
    font-weight: 650;
    color: var(--oq-farbe-dunkel-text);
  }

  .oq-v7 .oq-fuss__sp > details > summary::-webkit-details-marker {
    display: none;
  }

  .oq-v7 .oq-fuss__sp > details[open] > summary .oq-fuss__chev {
    transform: rotate(-135deg);
  }

  .oq-v7 .oq-fuss__sp h3 {
    display: none;
  }

  .oq-v7 .oq-fuss__sp ul {
    padding-bottom: 14px;
  }

  .oq-v7 .oq-fuss__unten {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@container (max-width: 760px) {
  .oq-v7 .oq-fuss__sp a {
    padding: 11px 12px;
    margin-inline: -12px;
    min-height: 46px;
    font-size: 0.98rem;
  }

  .oq-v7 .oq-fuss__rechtlich a {
    min-height: 44px;
  }

  .oq-v7 .oq-fuss__sozial a {
    width: 44px;
    height: 44px;
  }

  .oq-v7 .oq-fuss__unten {
    padding-block: 16px;
  }
}

/* ============================================================================
   Header (Element 16) — vorbereitet, aber inaktiv. Rendert nur, wenn
   src/ui/shell/header/header.twig den v7-Zweig nimmt (oq_chrome_is_v7, siehe
   StyleLoader::CHROME_IS_V7, derselbe Riegel wie beim Footer). Nach Vorgabe
   "taifun-element-16-header.html". Bedienung in dist/js/v7-header.js. */

.oq-v7 .oq-kopf__springen {
  position: absolute;
  left: 20px;
  top: 12px;
  z-index: 210;
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
  font-weight: 650;
  padding: 12px 20px;
  border-radius: var(--oq-radius-akt, var(--oq-radius-mittel));
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--oq-transition);
}

.oq-v7 .oq-kopf__springen:focus {
  transform: translateY(0);
}

.oq-v7 .oq-kopf__melde {
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
  font-size: 0.92rem;
}

.oq-v7 .oq-kopf__melde-in {
  max-width: 1320px;
  margin-inline: auto;
  padding: 10px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.oq-v7 .oq-kopf__melde-zu {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--oq-radius-klein);
  position: relative;
  flex: none;
}

.oq-v7 .oq-kopf__melde-zu::before,
.oq-v7 .oq-kopf__melde-zu::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 17px;
  width: 14px;
  height: 2px;
  background: currentColor;
}

.oq-v7 .oq-kopf__melde-zu::before {
  transform: rotate(45deg);
}

.oq-v7 .oq-kopf__melde-zu::after {
  transform: rotate(-45deg);
}

/* Ticker-Inhalt: Redesign ohne Tailwind-Abhaengigkeit (das alte
   header-ticker.twig haengt an .rounded-[4px]/.text-white & Co., die auf
   reinen v7-Seiten evtl. gar nicht laden — selbes Prinzip wie der
   Search-Icon-Bug). Zwei Modi ueber options.top_navigation.header_ticker_marquee:
   laufend (--lauf, doppelte Spur + Animation) oder still/umbrechend (--fest). */
.oq-v7 .oq-kopf__melde-label {
  font-weight: 650;
  letter-spacing: 0.02em;
  flex: none;
  white-space: nowrap;
}

.oq-v7 .oq-kopf__melde-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.oq-v7 .oq-kopf__melde-spur-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.oq-v7 .oq-kopf__melde-ticker--fest .oq-kopf__melde-spur-wrap {
  overflow: visible;
}

.oq-v7 .oq-kopf__melde-ticker--fest .oq-kopf__melde-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.oq-v7 .oq-kopf__melde-ticker--lauf .oq-kopf__melde-spur {
  display: flex;
  width: max-content;
  animation: oq-kopf-melde-lauf 26s linear infinite;
}

.oq-v7 .oq-kopf__melde-ticker--lauf .oq-kopf__melde-inhalt {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  flex: none;
  white-space: nowrap;
}

@keyframes oq-kopf-melde-lauf {
  to {
    transform: translateX(-50%);
  }
}

.oq-v7 .oq-kopf__melde-eintrag a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .oq-v7 .oq-kopf__melde-ticker--lauf .oq-kopf__melde-spur {
    animation: none;
  }
}

/* Topbar/Serviceleiste (taifun-element-16-header.html: .oben) — exklusiv
   zum Ticker (kopf_breit-Kommentar in header.twig), scrollt mit der Seite
   weg statt sticky zu sein. Links: freies Snippet-Feld (Shortcode/HTML),
   rechts: bestehender header_top_items-Repeater. */
.oq-v7 .oq-kopf__oben {
  background: color-mix(in oklab, var(--oq-farbe-flaeche) 96%, var(--oq-farbe-text));
  border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
  font-size: 0.86rem;
}

.oq-v7 .oq-kopf__oben-in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px 22px;
  flex-wrap: wrap;
}

.oq-v7 .oq-kopf__oben-in.oq-kopf__in--breit {
  max-width: 1480px;
}

.oq-v7 .oq-kopf__oben-snippet {
  color: var(--oq-farbe-text-leise);
  display: flex;
  align-items: center;
  gap: 8px;
}

.oq-v7 .oq-kopf__oben-items {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin-left: auto;
}

.oq-v7 .oq-kopf__oben-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: var(--oq-radius-klein);
  color: var(--oq-farbe-text-leise);
  text-decoration: none;
  font-weight: 550;
  transition: background-color var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-kopf__oben-item:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-kopf__oben-icon {
  width: 15px;
  height: 15px;
  flex: none;
  object-fit: contain;
}

.oq-v7 .oq-kopf {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--oq-farbe-flaeche);
  border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
  transition: box-shadow var(--oq-transition);
}

/* WP-Adminleiste ist #wpadminbar { position: fixed; top: 0 }. Ohne Offset
   klebt der Header beim eingeloggten Zustand auf derselben Position und
   liegt unter der Leiste. Selbe Werte/Breakpoint wie beim v6-Header
   (.admin-bar .header, header.scss) — WP wechselt bei 782px von 46px auf
   32px Leistenhoehe. */
body.admin-bar .oq-v7 .oq-kopf {
  top: 46px;
}

@media (min-width: 783px) {
  body.admin-bar .oq-v7 .oq-kopf {
    top: 32px;
  }
}

/* Beim Herunterscrollen wird die Leiste flacher (78px -> 64px) und bekommt
   einen Schatten — Klasse .is-geklebt setzt v7-header.js ueber einen
   IntersectionObserver an einer 1px-Wache am Seitenanfang. */
.oq-v7 .oq-kopf.is-geklebt {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}

.oq-v7 .oq-kopf__in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  padding-block: 0.5rem;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  transition: min-height var(--oq-transition);
}

/* Breiter Container: Backend-Schalter ODER mehr als 5 Hauptpunkte
   (header.twig, kopf_breit). 1480px ist kein v7-Token, sondern exakt der
   Live-Wert von v6 (.header__top-menu>.container.container__wide,
   taifun-software.de, auch _resets.scss .container__wide) — bewusst kein
   --oq-container (1600px), das waere breiter als das Referenzdesign. */
.oq-v7 .oq-kopf__in--breit {
  max-width: 1480px;
}

.oq-v7 .oq-kopf.is-geklebt .oq-kopf__in {
  min-height: 64px;
}

.oq-v7 .oq-kopf__marke {
  display: flex;
  align-items: center;
  flex: none;
}

/* v6 begrenzte den Logo-Wrapper ueber eine Tailwind-Utility im Markup
   (max-w-[320px]), die beim v7-Umbau nicht mitkam. Ohne eigene Groesse
   greift :where(img,picture,video,svg){max-width:100%} (kern.css) ins
   Leere — 100% eines unbeschraenkten Flex-Items ist die Bildgroesse selbst,
   das Logo rendert in seiner vollen Quellaufloesung. Hoehenbegrenzung statt
   Breite: robust unabhaengig vom Seitenverhaeltnis der hochgeladenen Datei. */
.oq-v7 .oq-kopf__marke img {
  max-height: 40px;
  width: auto;
}

.oq-v7 .oq-kopf__haupt {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  list-style: none;
}

.oq-v7 .oq-kopf__punkt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--oq-farbe-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  min-height: var(--oq-tap-min);
  border-radius: var(--oq-radius-klein);
  text-decoration: none;
  transition: background-color var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-kopf__punkt:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
}

.oq-v7 .oq-kopf__punkt[aria-expanded="true"] {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

.oq-v7 .oq-kopf__punkt--aktiv {
  position: relative;
}

.oq-v7 .oq-kopf__punkt--aktiv::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  border-radius: 2px;
}

.oq-v7 .oq-kopf__chev {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--oq-transition);
  flex: none;
}

.oq-v7 .oq-kopf__punkt[aria-expanded="true"] .oq-kopf__chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.oq-v7 .oq-kopf__mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 190;
  background: var(--oq-farbe-flaeche);
  border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--oq-transition), transform var(--oq-transition);
}

.oq-v7 .oq-kopf__mega[hidden] {
  display: none;
}

.oq-v7 .oq-kopf__mega--offen {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .oq-v7 .oq-kopf__mega {
    transition: none;
  }
}

.oq-v7 .oq-kopf__mega-in {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(20px, 2.6vw, 32px) clamp(20px, 4vw, 56px);
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  align-items: flex-start;
}

.oq-v7 .oq-kopf__mega-gruppen {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px 24px;
}

.oq-v7 .oq-kopf__mega-gruppe ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oq-v7 .oq-kopf__mega-titel {
  font-weight: 650;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  color: var(--oq-farbe-text);
  margin: 0 0 8px;
  padding: 0 12px;
}

.oq-v7 .oq-kopf__mega-hinweis {
  font-size: 0.86rem;
  color: color-mix(in oklab, var(--oq-farbe-text) 68%, transparent);
  margin: -4px 0 10px;
  padding: 0 12px;
}

.oq-v7 .oq-kopf__mega-gruppe a {
  display: block;
  padding: 9px 12px;
  margin-inline: -12px;
  border-radius: var(--oq-radius-klein);
  text-decoration: none;
  font-size: 0.99rem;
  font-weight: 400;
  min-height: 42px;
  color: var(--oq-farbe-text);
  transition: background-color var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-kopf__mega-gruppe a:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

.oq-v7 .oq-kopf__mega-gruppe a[aria-current="page"] {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  font-weight: 650;
}

.oq-v7 .oq-kopf__mega-teaser {
  flex: 0 0 clamp(240px, 24vw, 320px);
}

.oq-v7 .oq-kopf__mega-teaser-bild-wrap {
  margin-bottom: 16px;
}

.oq-v7 .oq-kopf__mega-teaser-bild {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--oq-radius-gross);
  display: block;
}

/* Imagify-Kompatibilitaet: ein nacktes <img> wird zu <picture> gewrappt,
   Klasse und style wandern aufs <picture> (siehe stage.css fuer die
   ausfuehrliche Begruendung). <picture> ist kein ersetztes Element, object-fit
   greift dort nicht — diese Regeln reichen Breite/Hoehe/Radius/Beschnitt ans
   innere <img> weiter. */
.oq-v7 picture.oq-kopf__mega-teaser-bild {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: var(--oq-radius-gross);
  overflow: hidden;
}

.oq-v7 picture.oq-kopf__mega-teaser-bild > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.oq-v7 .oq-kopf__mega-teaser-dach {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--oq-farbe-text) 68%, transparent);
  margin: 0 0 6px;
}

.oq-v7 .oq-kopf__mega-teaser-titel {
  font-family: var(--oq-schrift-display, inherit);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 0 0 8px;
}

.oq-v7 .oq-kopf__mega-teaser-text {
  font-size: 0.92rem;
  color: color-mix(in oklab, var(--oq-farbe-text) 78%, transparent);
  margin: 0 0 16px;
}

@media (max-width: 1080px) {
  .oq-v7 .oq-kopf__mega-teaser {
    display: none;
  }
}

.oq-v7 .oq-kopf__werkzeuge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.oq-v7 .oq-kopf__rund {
  width: var(--oq-tap-min);
  height: var(--oq-tap-min);
  border-radius: var(--oq-radius-klein);
  background: transparent;
  border: 0;
  color: var(--oq-farbe-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--oq-transition);
}

.oq-v7 .oq-kopf__rund:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
}

/* Lupe als reines CSS-Icon, gleiche Machart wie .oq-kopf__chev — keine
   Schriftart-Abhaengigkeit: das FA-Fallback (fa-regular) blieb unsichtbar,
   weil app.css (Font-Face + .fa-Klassen) auf reinen v7-Seiten nicht mehr
   mitlaedt (EnqueueProvider::enqueueStyles(), $skipLegacyStyles). */
.oq-v7 .oq-kopf__lupe {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.oq-v7 .oq-kopf__lupe::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 7px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  transform-origin: right center;
}

.oq-v7 .oq-kopf__akt-btn {
  min-height: 46px;
}

.oq-v7 .oq-kopf__burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--oq-radius-klein);
  background: transparent;
  border: 0;
  color: var(--oq-farbe-text);
  cursor: pointer;
  position: relative;
  flex: none;
}

.oq-v7 .oq-kopf__burger span,
.oq-v7 .oq-kopf__burger::before,
.oq-v7 .oq-kopf__burger::after {
  position: absolute;
  left: 12px;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--oq-transition), opacity var(--oq-transition);
}

.oq-v7 .oq-kopf__burger::before {
  content: "";
  top: 15px;
}

.oq-v7 .oq-kopf__burger span {
  top: 22px;
}

.oq-v7 .oq-kopf__burger::after {
  content: "";
  top: 29px;
}

.oq-v7 .oq-kopf__burger[aria-expanded="true"]::before {
  top: 22px;
  transform: rotate(45deg);
}

.oq-v7 .oq-kopf__burger[aria-expanded="true"] span {
  opacity: 0;
}

.oq-v7 .oq-kopf__burger[aria-expanded="true"]::after {
  top: 22px;
  transform: rotate(-45deg);
}

.oq-v7 .oq-kopf__suche {
  border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
  background: var(--oq-farbe-flaeche-alt);
}

.oq-v7 .oq-kopf__suche[hidden] {
  display: none;
}

.oq-v7 .oq-kopf__suche-in {
  max-width: 1320px;
  margin-inline: auto;
  padding: 18px clamp(20px, 4vw, 56px);
  display: flex;
  gap: 12px;
}

.oq-v7 .oq-kopf__suche-in input {
  flex: 1;
  min-height: 52px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1.04rem;
  color: var(--oq-farbe-text);
  background: var(--oq-farbe-flaeche);
  border: 1.5px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 32%, transparent));
  border-radius: var(--oq-radius-akt, var(--oq-radius-mittel));
}

.oq-v7 .oq-kopf__panel {
  position: fixed;
  inset: 0;
  top: 78px;
  z-index: 190;
  background: var(--oq-farbe-flaeche);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px clamp(20px, 4vw, 56px) 40px;
}

.oq-v7 .oq-kopf__panel[hidden] {
  display: none;
}

.oq-v7 .oq-kopf__panel-nav {
  list-style: none;
  border-top: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
}

.oq-v7 .oq-kopf__panel-nav > li {
  border-bottom: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
}

.oq-v7 .oq-kopf__p-punkt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: inherit;
  font-size: 1.14rem;
  font-weight: 400;
  letter-spacing: -0.016em;
  color: var(--oq-farbe-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 18px 4px;
  min-height: 62px;
  text-align: left;
  text-decoration: none;
}

.oq-v7 .oq-kopf__p-punkt .oq-kopf__chev {
  transform: rotate(-45deg);
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

.oq-v7 .oq-kopf__p-punkt[aria-expanded="true"] .oq-kopf__chev {
  transform: rotate(45deg);
}

.oq-v7 .oq-kopf__p-unter {
  list-style: none;
  padding: 0 0 16px 4px;
  display: grid;
  gap: 1px;
}

.oq-v7 .oq-kopf__p-unter[hidden] {
  display: none;
}

.oq-v7 .oq-kopf__p-unter a {
  display: block;
  padding: 12px 14px;
  margin-inline: -14px;
  border-radius: var(--oq-radius-klein);
  font-size: 1.02rem;
  font-weight: 400;
  color: color-mix(in oklab, var(--oq-farbe-text) 80%, transparent);
  text-decoration: none;
  min-height: 48px;
}

.oq-v7 .oq-kopf__p-unter a:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  color: var(--oq-farbe-text);
}

/* Topbar-Inhalte im Burger-Panel (header.twig __panel-service) — .oq-kopf__oben
   verschwindet unter 1080px komplett aus dem Header, hier bleibt der
   Inhalt erreichbar statt zu fehlen. */
.oq-v7 .oq-kopf__panel-service {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--oq-farbe-linie, color-mix(in oklab, var(--oq-farbe-text) 14%, transparent));
}

.oq-v7 .oq-kopf__panel-service-snippet {
  font-size: 0.94rem;
  color: var(--oq-farbe-text-leise);
  margin-bottom: 8px;
}

.oq-v7 .oq-kopf__panel-service-items {
  list-style: none;
  display: grid;
  gap: 1px;
}

.oq-v7 .oq-kopf__panel-service-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  margin-inline: -14px;
  border-radius: var(--oq-radius-klein);
  font-size: 1.02rem;
  color: color-mix(in oklab, var(--oq-farbe-text) 80%, transparent);
  text-decoration: none;
  min-height: 48px;
}

.oq-v7 .oq-kopf__panel-service-item:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-kopf__panel-service-icon {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

.oq-v7 .oq-kopf__panel-fuss {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.oq-v7 .oq-kopf__akt-btn--voll {
  width: 100%;
}

@media (max-width: 1080px) {
  .oq-v7 .oq-kopf__haupt,
  .oq-v7 .oq-kopf__rund {
    display: none;
  }

  /* .oq-kopf__haupt traegt margin-left:auto (siehe oben) und schiebt damit
     normalerweise CTA+Burger an den rechten Rand. Ausgeblendet wie hier
     zaehlt der Rand-Schub nicht mehr mit, .oq-kopf__werkzeuge rueckt sonst
     direkt hinter das Logo statt ganz nach rechts — deshalb hier eigener
     margin-left:auto auf .oq-kopf__werkzeuge. */
  .oq-v7 .oq-kopf__werkzeuge {
    margin-left: auto;
  }

  .oq-v7 .oq-kopf__burger {
    display: block;
  }

  .oq-v7 .oq-kopf__mega {
    display: none !important;
  }

  /* Wie v6 (top-menu.twig, "hidden sm:block"): kein Mobil-Duplikat der
     Topbar-Links, sie stehen nur im Desktop-Streifen. */
  .oq-v7 .oq-kopf__oben {
    display: none;
  }
}

@media (min-width: 1081px) {
  .oq-v7 .oq-kopf__panel {
    display: none;
  }
}