/* ============================================================
   PB Mega-Menü · Styles (Theme-Asset)
   Geladen vom Theme „professionellbewerben" via wp_enqueue_style
   ('pb-mega-menu-css', assets/mega-menu.css) — siehe functions.php.
   ============================================================ */

/* ============================================================
   Tokens (Land-Rover-gemessen — 1:1 aus Live-DOM via Chrome MCP)
   ============================================================ */
:root {
  /* CI-Farben */
  --pb-c-anthrazit:  #282828;
  --pb-c-ci:         #2CA4D9;
  --pb-c-bg:         #FFFFFF;
  /* Komponenten-spezifische Töne — Astra hat dafür keine Tokens */
  --pb-c-grau:       #4A4F54;
  --pb-c-grau-light: #8A8F94;
  --pb-c-line:       rgba(74, 79, 84, 0.1);
  --pb-c-line-soft:  rgba(74, 79, 84, 0.06);
  --pb-c-bg-soft:    #F8F9F9;          /* Card-Panel-Bühne */
  --pb-c-bg-hover:   #F1F2F2;

  --pb-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-792.27%201024.00%20704.53'%3E%3Cpath%20d%3D'M641-777L641-777Q630-765%20632-746Q634-727%20645-714L645-714L878-480L36-480Q20-480%2010-467Q0-454%200-438L0-438Q0-422%2011.50-409Q23-396%2036-396L36-396L878-396L645-166Q634-153%20632-136Q630-119%20641-103L641-103Q652-90%20667-88Q682-86%20696-99L696-99L1009-404Q1012-408%201013-410.50Q1014-413%201017-413L1017-413L1020-417Q1023-420%201023.50-425.50Q1024-431%201024-434L1024-434Q1024-437%201023.50-442Q1023-447%201020-450L1020-450Q1020-450%201019.50-452.50Q1019-455%201017-455L1017-455Q1014-458%201013-460.50Q1012-463%201009-463L1009-463L692-781Q681-794%20665.50-792Q650-790%20641-777L641-777Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
  --pb-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-422.00%20265.00%20451.00'%3E%3Cpath%20d%3D'M265-197L264-196L265-196L40%2029L0-11L186-197L0-382L40-422L265-197Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
  --pb-header-h: 72px;
  --pb-ease: cubic-bezier(.4, 0, .2, 1);
  --pb-fade: 180ms;
}

/* ============================================================
   Sanftes In-Page-Scrolling — animierter Übergang bei JEDEM Anker-Link
   (z.B. Hero-CTA -> Sektion weiter unten). Site-weit, da diese Datei
   als Additional CSS auf allen Seiten geladen wird.
   - scroll-padding-top hält das Ziel frei unter dem sticky Header
     (zieht via --pb-header-h automatisch auf 72px/48px responsiv mit).
   - scroll-behavior nur bei prefers-reduced-motion: no-preference
     (WCAG 2.3.3 — kein erzwungenes Scroll-Movement für empfindliche Nutzer).
   ============================================================ */
html { scroll-padding-top: calc(var(--pb-header-h) + 16px); overflow-x: clip; scrollbar-gutter: stable; }
/* scrollbar-gutter:stable reserviert den Scrollbalken-Platz auch auf Seiten ohne
   Scrollbalken (z.B. 404): sonst ist der Viewport dort breiter und das per Grid
   zentrierte Header-Logo springt beim Seitenwechsel um die halbe Scrollbar-Breite. */
/* overflow-x:clip kappt den horizontalen Mini-Scroll, den der 100vw-Full-Bleed-Hero
   ueber den Scrollbar-Versatz (~7-8px) erzeugt. Bewusst 'clip', NICHT 'hidden':
   hidden wuerde einen Scroll-Container aufmachen und den position:sticky-Header brechen;
   clip kappt nur und laesst sticky + vertikales Scrollen intakt. Global, alle Seiten. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.pb-mega-header *,
.pb-mega-header *::before,
.pb-mega-header *::after,
.pb-mega-drawer *,
.pb-mega-drawer *::before,
.pb-mega-drawer *::after { box-sizing: border-box; }

/* ============================================================
   Header (sticky)
   ============================================================ */
.pb-mega-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pb-c-bg);
  border-bottom: 1px solid var(--pb-c-line);
  font-family: var(--pb-font);
  color: var(--pb-c-anthrazit);
  font-size: 14px;
  line-height: 19px;
  letter-spacing: normal;
}
.pb-mega-header a { color: inherit; text-decoration: none; }
.pb-mega-header button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pb-mega-header ul { list-style: none; margin: 0; padding: 0; }

.pb-mega-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--pb-header-h);
  padding: 0 32px;
  max-width: 1600px;
  margin: 0 auto;
  gap: 32px;
}

/* >=1600px: Header bleibt full-width — Logo mittig, CTA rechts am freien Rand
   (weg vom Model). Die Nav rueckt per margin auf die zentrierte 1600er-Hero-Achse,
   sodass "Leistungen" exakt unter dem Hero-Text "Karriere selbst bestimmen" sitzt.
   padding = Hero-edge minus 8px (Scrollbar-Versatz des 100vw-Hero-Full-Bleed). */
@media (min-width: 1600px) {
  .pb-mega-header__inner {
    max-width: none;
    padding-left: clamp(32px, calc(2.5vw - 8px), 64px);
    padding-right: clamp(32px, calc(2.5vw - 8px), 64px);
  }
  /* Nav auf die Hero-Text-Achse (linke Kante des zentrierten 1600er-Rasters) einruecken */
  .pb-mega-nav { margin-left: max(0px, calc((100vw - 1600px) / 2)); }
  /* CTA spiegelbildlich auf die rechte Achse: flex/flex-end macht den Button flush
     zur Container-Rechtskante, dieselbe margin-Formel rueckt ihn symmetrisch zur Nav
     ein -> "Erstgespraech" rechts so weit vom Rand wie "Leistungen" links. */
  .pb-mega-utility {
    display: flex;
    justify-content: flex-end;
    margin-right: max(0px, calc((100vw - 1600px) / 2));
  }
}

.pb-mega-nav ul {
  display: flex;
  gap: 32px;
  align-items: center;
}
.pb-mega-nav__link,
.pb-mega-trigger {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--pb-c-anthrazit);
  height: var(--pb-header-h);
  position: relative;
  transition: color 0.2s var(--pb-ease);
}
.pb-mega-nav__link::after,
.pb-mega-trigger::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--pb-c-ci);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s var(--pb-ease);
}
.pb-mega-nav__link:hover::after,
.pb-mega-trigger:hover::after,
.pb-mega-trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.pb-mega-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pb-mega-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.pb-mega-utility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pb-mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  color: var(--pb-c-anthrazit);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  transition: color 0.2s var(--pb-ease);
}
.pb-mega-cta::before { content: ""; width: 22px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: var(--pb-arrow) no-repeat center / contain; mask: var(--pb-arrow) no-repeat center / contain; }
.pb-mega-cta:hover { background: none; color: var(--pb-c-ci); }

/* Burger (≤1024px) */
.pb-mega-burger {
  display: none;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 4px;
  justify-self: start;
}
.pb-mega-burger__icon {
  position: relative;
  width: 18px;
  height: 14px;
  flex-shrink: 0;
}
.pb-mega-burger__icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--pb-c-anthrazit);
  transition: transform 0.25s var(--pb-ease), opacity 0.2s var(--pb-ease);
}
.pb-mega-burger__icon span:nth-child(1) { top: 0; }
.pb-mega-burger__icon span:nth-child(2) { top: 6px; }
.pb-mega-burger__icon span:nth-child(3) { top: 12px; }
.pb-mega-burger[aria-expanded="true"] .pb-mega-burger__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pb-mega-burger[aria-expanded="true"] .pb-mega-burger__icon span:nth-child(2) { opacity: 0; }
.pb-mega-burger[aria-expanded="true"] .pb-mega-burger__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pb-mega-burger__label {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--pb-c-anthrazit);
  line-height: 1;
}

/* ============================================================
   Mega-Panel
   ============================================================ */
.pb-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pb-c-bg);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 0 30px 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--pb-ease),
              transform 0.25s var(--pb-ease),
              visibility 0s linear 0.25s;
}
.pb-mega-panel[data-pb-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--pb-ease),
              transform 0.25s var(--pb-ease),
              visibility 0s linear 0s;
}
.pb-mega-panel__close {
  position: absolute;
  top: 8px;
  right: 32px;
  width: 20px;
  height: 20px;
  color: var(--pb-c-grau);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s var(--pb-ease);
  padding: 0;
}
.pb-mega-panel__close svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pb-mega-panel__close:hover { color: var(--pb-c-ci); }

.pb-mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 52px 0 48px;
}
.pb-mega-head { text-align: center; margin: 0 0 44px; }
.pb-mega-pill {
  display: inline-flex;
  background: var(--pb-c-bg-soft);
  border-radius: 6px;
  padding: 5px;
}
.pb-mega-panel .pb-mega-pill .pb-mega-pill-btn {
  border: 0;
  background: none;
  padding: 11px 26px;
  border-radius: 4px;
  font-family: var(--pb-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--pb-c-grau);
  cursor: pointer;
  transition: background 0.2s var(--pb-ease), color 0.2s var(--pb-ease);
  white-space: nowrap;
}
.pb-mega-panel .pb-mega-pill .pb-mega-pill-btn[aria-selected="true"] {
  background: var(--pb-c-bg);
  color: var(--pb-c-anthrazit);
  box-shadow: 0 1px 4px rgba(40, 40, 40, 0.12);
  font-weight: 500;
}
.pb-mega-pillsub {
  font-size: clamp(0.4rem, 2.1vw, 0.8125rem);
  font-weight: 400;
  color: var(--pb-c-grau);
  margin: 16px 0 0;
  white-space: nowrap;
}
.pb-mega-pane[hidden] { display: none; }
.pb-mega-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3vw, 56px);
}
.pb-mega-card {
  display: flex;
  flex-direction: column;
  color: var(--pb-c-anthrazit);
  text-decoration: none;
}
.pb-mega-card:visited { color: var(--pb-c-anthrazit); }
.pb-mega-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background-color: #E5E7E9;
}
.pb-mega-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.2, 0, .2, 1);
}
.pb-mega-card:hover .pb-mega-card__img img { transform: scale(1.04); }
.pb-mega-card__body {
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pb-mega-card__name {
  font-size: 20px;
  font-weight: 400;
  color: var(--pb-c-anthrazit);
  line-height: 1.25;
  margin: 0 0 7px;
}
.pb-mega-card__usp {
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--pb-c-ci);
  margin: 0 0 13px;
}
.pb-mega-card__desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: #1F1F1F; /* Body-Token: Lauftext dunkel, nicht grau — #4A4F54 nur fuer Mikro-/Meta-Zeilen */
  margin: 0 0 18px;
}
.pb-mega-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pb-c-anthrazit);
}
.pb-mega-card__link::before {
  content: "";
  width: 17px;
  height: 12px;
  flex: none;
  position: relative;
  top: -1px;
  background-color: var(--pb-c-ci);
  -webkit-mask: var(--pb-arrow) no-repeat center / contain;
  mask: var(--pb-arrow) no-repeat center / contain;
  transition: transform 0.25s var(--pb-ease);
}
.pb-mega-card:hover .pb-mega-card__link::before { transform: translateX(4px); }

/* ============================================================
   (USP-Bar entfernt — Menü nutzt jetzt das Karten-Grid)
   ============================================================ */
/* ============================================================
   Mobile Drawer (≤1024px)
   ============================================================ */
.pb-mega-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--pb-c-bg);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s var(--pb-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  font-family: var(--pb-font);
}
.pb-mega-drawer a { color: inherit; text-decoration: none; }
.pb-mega-drawer button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pb-mega-drawer[data-pb-open="true"] { transform: translateX(0); }
.pb-mega-drawer__head {
  padding: 16px 18px 4px;
  border-bottom: 1px solid var(--pb-c-line);
}
.pb-mega-drawer__pill {
  display: flex;
  width: 100%;
  background: var(--pb-c-bg-soft);
  border-radius: 6px;
  padding: 4px;
}
.pb-mega-drawer .pb-mega-drawer__pill .pb-mega-drawer__pill-btn {
  flex: 1;
  padding: 11px 6px;
  border-radius: 4px;
  font-family: var(--pb-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--pb-c-grau);
  white-space: nowrap;
  transition: background 0.2s var(--pb-ease), color 0.2s var(--pb-ease);
}
.pb-mega-drawer .pb-mega-drawer__pill .pb-mega-drawer__pill-btn[aria-selected="true"] {
  background: var(--pb-c-bg);
  color: var(--pb-c-anthrazit);
  box-shadow: 0 1px 4px rgba(40, 40, 40, 0.12);
  font-weight: 500;
}
.pb-mega-drawer__pillsub {
  font-size: clamp(0.4rem, 2.1vw, 0.8125rem);
  color: var(--pb-c-grau);
  margin: 12px 0 6px;
  white-space: nowrap;
  text-align: center;
}
.pb-mega-drawer__list { padding: 6px 18px 8px; }
.pb-mega-drawer__pane[hidden] { display: none; }
.pb-mega-drawer__service {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pb-c-line);
}
.pb-mega-drawer__service:last-child { border-bottom: 0; }
.pb-mega-drawer__service-thumb {
  width: 88px;
  aspect-ratio: 16 / 9;   /* 16:9 statt 4:3 — Deliverable-Bild wird nicht mehr seitlich beschnitten.
                             Breite bleibt (nur flacher), damit der Text daneben nicht auf 2 Zeilen umbricht. */
  border-radius: 4px;
  background-color: var(--pb-c-bg-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.pb-mega-drawer__service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-mega-drawer__service-meta { flex: 1; min-width: 0; }
.pb-mega-drawer__service-name {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pb-c-anthrazit);
  line-height: 1.25;
}
.pb-mega-drawer__service-usp {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--pb-c-ci);
  line-height: 1.3;
  margin-top: 3px;
}
/* Kein Pfeil-Indikator im Mobile-Drawer (Kundenwunsch: ruhiger/professioneller).
   Die ganze Service-Zeile bleibt klickbar; die Textspalte nutzt den frei
   gewordenen Platz. Desktop-Mega-Menue unberuehrt. */
.pb-mega-drawer__secondary {
  margin-top: auto;
  border-top: 1px solid var(--pb-c-line);
}
.pb-mega-drawer__secondary a {
  display: block;
  padding: 14px 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--pb-c-anthrazit);
  border-bottom: 1px solid var(--pb-c-line-soft);
}
.pb-mega-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 24px 24px;
  text-align: center;
  background: var(--pb-c-anthrazit);
  color: #fff !important;
  padding: 16px 24px;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  border-radius: 4px;
  line-height: 1;
}
/* Kein Pfeil vor dem Mobile-Drawer-CTA (Kundenwunsch: ruhiger). Text bleibt
   zentriert. Desktop-Header-CTA (.pb-mega-cta::before, Z.171) bleibt unberuehrt. */
.pb-mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 28, 0.45);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--pb-ease);
}
.pb-mega-backdrop[data-pb-open="true"] { opacity: 1; pointer-events: auto; }
/* Scroll-Lock beim offenen Mobile-Drawer — greift am <html> (scroll-bestimmendes
   Element). body{overflow:hidden} allein propagiert NICHT zum Viewport, weil html
   overflow-x:clip traegt und damit die Overflow-Propagation body->Viewport abfaengt.
   overflow:hidden friert die Scroll-Position in-place ein -> der sticky Header bleibt
   an seiner geklebten Position (top:0) sichtbar. NICHT fixieren: position:fixed naehme
   den Header aus dem Fluss und liesse den Content um die Header-Hoehe nach oben springen. */
html.pb-mega-locked { overflow: hidden; overscroll-behavior: none; }

/* ============================================================
   Responsive ≤1024px
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pb-header-h: 48px; }
  .pb-mega-header__inner { grid-template-columns: 1fr auto 1fr; padding: 0 16px; gap: 12px; }
  .pb-mega-nav, .pb-mega-utility { display: none; }
  .pb-mega-burger { display: inline-flex; grid-column: 3; justify-self: end; }
  .pb-mega-logo { grid-column: 1; justify-self: start; }
  .pb-mega-logo img { height: 32px; }
  .pb-mega-panel { display: none; }
}
@media (min-width: 1025px) {
  .pb-mega-drawer, .pb-mega-backdrop { display: none !important; }
}

/* ============================================================
   CTA-Farb-Overrides gegen Astra-Default-Link-Farbe
   ============================================================ */
.pb-mega-drawer__cta, .pb-mega-drawer__cta:hover, .pb-mega-drawer__cta:visited {
  color: #fff !important;
}
.pb-mega-nav__link, .pb-mega-nav__link:visited, .pb-mega-trigger { color: var(--pb-c-anthrazit); }
.pb-mega-drawer__service, .pb-mega-drawer__service:visited { color: var(--pb-c-anthrazit); }

/* Z-Index fix gegen Astra-Hero-Stacking */
.pb-mega-header { isolation: isolate; z-index: 999; }
.pb-mega-panel { z-index: 999; background: var(--pb-c-bg) !important; }
.pb-mega-drawer { z-index: 9999; }
.pb-mega-backdrop { z-index: 9998; }

/* FAQ-Accordion: Offset, damit beim Aufklapp-Scroll (Mobile) der sticky Header die Frage nicht überdeckt.
   --pb-header-h ist responsiv (48px ≤1024px). Scroll selbst via mega-menu.js (toggle -> scrollIntoView). */
.pb-faq details, details.pb-s-faq { scroll-margin-top: calc(var(--pb-header-h, 72px) + 14px); }

/* Trigger-Button-Override gegen Astra-Button-Reset (font-size: 14px) */
.pb-mega-nav .pb-mega-trigger { font-size: 16px; font-weight: 400; line-height: 19px; letter-spacing: normal; }

/* Trigger-Open-State-Override: Unterstrich sichtbar bleiben + CI-Blau wenn Menü offen */
.pb-mega-trigger::after, .pb-mega-nav__link::after { z-index: 1001; }
.pb-mega-trigger[aria-expanded="true"] { color: var(--pb-c-ci); }

/* === Responsive-Pack-2026 === */

/* Smallest Mobile (320-379px): super-kompakt */
@media (max-width: 379px) {
  .pb-mega-header__inner { padding: 0 12px !important; gap: 8px; }
  .pb-mega-logo img { height: 28px; }
  .pb-mega-burger__label { font-size: 7px; }
  .pb-mega-drawer__head { padding: 10px 16px; }
  .pb-mega-drawer__service { padding: 12px 0; gap: 12px; }
  .pb-mega-drawer__service-thumb { width: 72px; }  /* aspect-ratio 16/9 vererbt -> 72x40,5 */
  .pb-mega-drawer__cta { margin: 12px 16px 16px; padding: 14px 20px; }
  .pb-mega-drawer__secondary a { padding: 12px 16px; }
}

/* Tablet (600-1024px): breiterer Drawer */
@media (min-width: 600px) and (max-width: 1024px) {
  .pb-mega-drawer { max-width: 480px; }
}

/* (Alt-Iteration "Mega-Wide padding: 0 40px" entfernt — sie ueberschrieb das
   clamp()-Padding der >=1600-Regel oben und zerstoerte die Scrollbar-Kompensation
   (-8px), wodurch Nav und Hero-Text bei breiten Viewports nicht mehr fluchteten.) */

/* Touch-Targets (Touch-Geräte ohne Hover) */
@media (hover: none) and (pointer: coarse) {
  .pb-mega-burger { min-width: 44px; min-height: 44px; }
}

/* === Mobile-Header-Grid-Fix (Logo links, Burger rechts, beide vertikal zentriert) === */
@media (max-width: 1024px) {
  .pb-mega-header__inner { grid-template-rows: var(--pb-header-h); align-items: center; }
  .pb-mega-burger { grid-row: 1; grid-column: 3; align-self: center; justify-self: end; }
  .pb-mega-logo { grid-row: 1; align-self: center; }
}

/* === Drawer (Mobile) ===
   Width-Endstand steht weiter unten (.pb-mega-drawer 100% !important). Die fruehen
   %-Iterationen (85/92/70, 78/88/60) waren allesamt davon ueberschrieben — entfernt. */

/* Sticky-Header läuft über .pb-mega-header (position:sticky, z-index:999) — kein separater Wrapper-Fix nötig. */

/* === Drawer-Premium-Polish (Mixed-Case statt UPPERCASE, kompaktere Tabs) === */
.pb-mega-drawer__service-name { text-transform: none !important; font-size: 16px; font-weight: 400; line-height: 1.2; }
.pb-mega-drawer__service-usp { font-size: 13px; }
.pb-mega-drawer__secondary a { text-transform: none !important; font-size: 14px; font-weight: 400; letter-spacing: normal; padding: 14px 20px; }

/* (Alt-Iteration "Drawer-Final-Tweaks" entfernt: tote Width-Werte + totes
   __head/__head-title/__close-Cluster — diese Klassen existieren im HTML nicht.) */

/* === RangeRover-Drawer-Pattern (100% Width, Burger als Close, größere Cards) === */
.pb-mega-drawer { width: 100% !important; max-width: none !important; top: var(--pb-header-h) !important; }
@media (max-width: 379px) { .pb-mega-drawer { width: 100% !important; max-width: none !important; } }
@media (min-width: 600px) and (max-width: 1024px) { .pb-mega-drawer { width: 100% !important; max-width: none !important; } }
.pb-mega-backdrop { display: none !important; }
.pb-mega-burger[aria-expanded="true"] .pb-mega-burger__label { display: none; }
.pb-mega-burger[aria-expanded="true"]::after { content: "SCHLIESSEN"; font-size: 8px; font-weight: 500; letter-spacing: normal; color: var(--pb-c-anthrazit); }

/* === Drawer-AdminBar-Offset (eingeloggte User mit WP-Adminbar) === */
body.admin-bar .pb-mega-drawer { top: calc(var(--pb-header-h) + 32px) !important; }
@media (max-width: 782px) { body.admin-bar .pb-mega-drawer { top: calc(var(--pb-header-h) + 46px) !important; } }


/* === CTA-Size-Match-Nav (Erstgespräch auf gleicher Größe wie Leistungen / Über uns / Blog) === */
.pb-mega-cta { font-size: 16px !important; line-height: 19px !important; }
.pb-mega-cta::before { width: 22px !important; height: 15px !important; }

/* === Nav-Hover-CI-Blau (Leistungen/Über uns/Blog hover wie CTA) === */
.pb-mega-nav__link:hover, .pb-mega-trigger:hover { color: var(--pb-c-ci) !important; }

/* === Header-Hintergrund ===
   Default (alle Unterseiten wie /kontakt/): opak weiss mit Hairline — dort gibt es
   keinen Hero, ein transparenter Header wirkt kaputt.
   NUR Startseite (body.home): initial transparent ueber dem Hero; opak-weiss bei:
   1. Scroll > 50px  (.is-scrolled wird von mega-menu.js gesetzt)
   2. Mega-Panel offen  (per :has() auf data-pb-open)
   3. Mobile-Drawer offen  (per :has() auf body) */
.pb-mega-header {
  background: #ffffff;
  border-bottom-color: transparent; /* Theme-Border aus — Trennung macht allein die 1px-Schatten-Hairline (wie im Sticky-Zustand) */
  box-shadow: 0 1px 0 rgba(40, 40, 40, .08);
  transition: background .3s ease, box-shadow .3s ease, border-bottom-color .3s ease;
}
body.home .pb-mega-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.home .pb-mega-header.is-scrolled,
body.home .pb-mega-header:has([data-pb-panel][data-pb-open="true"]),
body.home:has([data-pb-drawer][data-pb-open="true"]) .pb-mega-header {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(40, 40, 40, .08);
}

/* === Mobile-Logo-Animation:
   Initial: Kurz-Logo LINKS im Header (Burger sitzt rechts).
   Scroll (.is-scrolled): Lang-Logo, BLEIBT links, nur leicht skaliert (kein Schwenk zur Mitte).
   Specificity erhöht via img.pb-mega-logo__* — sonst gewinnt .pb-mega-logo img. */
.pb-mega-logo img.pb-mega-logo__short { display: none; }   /* Default Desktop: kurz aus */

@media (max-width: 1024px) {
  .pb-mega-header__inner { position: relative; }

  /* Logo aus Grid raus, absolute positionieren LINKS (Burger sitzt rechts) */
  .pb-mega-logo {
    position: absolute !important;
    top: 50%;
    left: 16px;
    right: auto;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    grid-column: unset !important;
    justify-self: unset !important;
    z-index: 2;
    display: inline-flex;
    align-items: center;
  }

  /* Mobile: kurz sichtbar, lang aus */
  .pb-mega-logo img.pb-mega-logo__short { display: block; }
  .pb-mega-logo img.pb-mega-logo__long  { display: none; }

  /* Mobile beim Scroll: Lang sichtbar, kurz aus. Logo BLEIBT links, nur leichte Skalierung. */
  .pb-mega-header.is-scrolled .pb-mega-logo {
    transform: translateY(-50%) scale(1.1);
  }
  .pb-mega-header.is-scrolled .pb-mega-logo img.pb-mega-logo__short { display: none; }
  .pb-mega-header.is-scrolled .pb-mega-logo img.pb-mega-logo__long  { display: block; }
}