/* TB2B Kopfzeile mit Megamenü (04.10.2026)
   Markup: inc/komponenten/tb2b-kopfzeile.php. Lädt nur, wenn die aktive
   Kopfvorlage dieses Element enthält. Wurzel .mh (Kleben, Fläche, Unterkante,
   Sprachwahl aus dem Projekt-CSS), alles Weitere unter .kopf.
   Feste Pixelwerte: eigene Bausteine sollen nicht von der Wurzelschrift abhängen.
   Desktop ab 1024px, darunter Schublade. */

.kopf {
  --kopf-achse: 1080px;
  --kopf-icon-flaeche: rgba(0, 82, 255, .08);
  font-family: var(--body);
}
@media (min-width: 1500px) { .kopf { --kopf-achse: 1240px; } }
@media (min-width: 1800px) { .kopf { --kopf-achse: 1340px; } }

.kopf .kopf__innen {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 24px; max-width: var(--kopf-achse); margin: 0 auto; padding: 14px 32px; min-height: 80px;
}
.kopf .kopf__logo { display: inline-flex; align-items: center; justify-self: start; }
.kopf .kopf__logo img { height: 36px; width: auto; min-width: 120px; display: block; object-fit: contain; }
.kopf .kopf__burger { display: none; }
.kopf ul { list-style: none; margin: 0; padding: 0; }

/* Desktop: nav löst sich ins Raster auf (Menü Mitte, Aktionen rechts) */
.kopf .kopf__nav { display: contents; }
.kopf .kopf__menue { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 2.6vw, 40px); }
.kopf .kopf__aktionen { display: flex; align-items: center; gap: 20px; justify-self: end; }

/* Erste Ebene: sichtbar und in Tinte, Satzschreibung */
.kopf .kopf-oben {
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: 0;
  text-transform: none; color: var(--ink); text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 10px 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease;
}
.kopf .kopf-oben--knopf::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-premium);
}
.kopf .kopf-oben--knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.kopf .kopf-oben:hover,
.kopf .kopf-oben[aria-expanded="true"] { color: var(--signal); }
.kopf .kopf-oben[aria-current="page"],
.kopf .kopf-oben.ist-aktiv {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.kopf .kopf-oben:focus-visible,
.kopf .kopf-link:focus-visible,
.kopf .kopf-kachel:focus-visible,
.kopf .kopf__burger:focus-visible,
.kopf .kopf-knopf:focus-visible,
.kopf .kopf__logo:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-s);
}

/* Terminknopf: Kontur wie bisher, Größe passend zur neuen Navigation */
.kopf .kopf-knopf {
  font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2;
  padding: 12px 22px; border-radius: var(--r-s); border: 1px solid var(--signal);
  color: var(--signal); background: transparent; text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease-premium), color .3s var(--ease-premium);
}
.kopf .kopf-knopf:hover,
.kopf .kopf-knopf:focus-visible { background: var(--signal); color: #fff; }

/* ── Panels ─────────────────────────────────────────────────────────── */
.kopf .kopf-panel {
  position: absolute; z-index: 5; background: #fff;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .22s var(--ease-premium), visibility 0s linear .22s;
}
.kopf .kopf-panel.ist-offen {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .22s var(--ease-premium), visibility 0s;
}
/* Brücke über den Spalt, damit der Zeiger das Panel auf dem Weg nicht verliert */
.kopf .kopf-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }

/* Megapanel: volle Kopfbreite, Inhalt auf der Achse */
.kopf .kopf-panel--mega {
  left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  box-shadow: 0 28px 48px -28px rgba(11, 28, 48, .28);
  max-height: calc(100vh - 81px); overflow-y: auto; overscroll-behavior: contain;
}
.kopf .kopf-panel--mega .kopf-panel__innen {
  max-width: var(--kopf-achse); margin: 0 auto; padding: 32px 32px 36px;
  display: grid; grid-template-columns: 1.3fr 1.2fr .8fr 280px; gap: 28px;
}

/* Wissen: kompakt unter seinem Punkt */
.kopf .kopf-punkt { position: static; }
.kopf .kopf-punkt--kompakt { position: relative; }
.kopf .kopf-panel--kompakt {
  left: 50%; top: calc(100% + 22px); width: 400px; translate: -50% 0;
  border: 1px solid var(--hair); border-radius: var(--r-m);
  box-shadow: 0 24px 48px -24px rgba(11, 28, 48, .28);
}
.kopf .kopf-panel--kompakt::before { top: -24px; height: 24px; }
.kopf .kopf-panel--kompakt .kopf-panel__innen { padding: 12px; }

/* Spalten */
.kopf .kopf-spalte__titel {
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.3;
  color: var(--grey); text-transform: none; letter-spacing: 0; margin: 0 0 10px;
}
.kopf .kopf-liste { display: grid; gap: 2px; }
.kopf .kopf-spalte .kopf-liste { margin-inline: -12px; }

/* Link mit Icon, Titel und einer Zeile Beschreibung */
.kopf .kopf-link {
  display: flex; align-items: flex-start; gap: 14px; padding: 10px 12px;
  border-radius: var(--r-s); border: 1px solid transparent; text-decoration: none; color: var(--ink);
  transition: background-color .2s ease, border-color .2s ease;
}
.kopf .kopf-link:hover { background: var(--paper); border-color: var(--hair); }
.kopf .kopf-icon {
  flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 9px; background: var(--kopf-icon-flaeche);
}
.kopf .kopf-icon svg {
  width: 20px; height: 20px; fill: none; stroke: var(--signal); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.kopf .kopf-link__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.kopf .kopf-link__titel {
  font-family: var(--display); font-weight: 700; font-size: 16.5px; line-height: 1.3; color: var(--ink);
  transition: color .2s ease;
}
.kopf .kopf-link__info { font-size: 14px; line-height: 1.45; color: var(--grey); }
.kopf .kopf-link:hover .kopf-link__titel { color: var(--signal); }
.kopf .kopf-link[aria-current="page"] .kopf-link__titel {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* Orte kompakter, die Spalte soll auch mit sechs Städten tragen */
.kopf .kopf-spalte--orte .kopf-link { padding-block: 8px; align-items: center; }
.kopf .kopf-spalte--orte .kopf-icon { width: 32px; height: 32px; border-radius: 8px; }
.kopf .kopf-spalte--orte .kopf-icon svg { width: 17px; height: 17px; }
.kopf .kopf-spalte--orte .kopf-link__titel { font-size: 16px; }
.kopf .kopf-spalte--orte .kopf-link__info { font-size: 13.5px; }

/* Hervorgehobene Kachel: Tinte mit Rasterpapier, reagiert über Kante und Schatten */
.kopf .kopf-kachel {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-m);
  background-color: var(--ink); color: #fff; text-decoration: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 20px 20px; border: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.kopf .kopf-kachel:hover { border-color: rgba(255, 255, 255, .3); box-shadow: 0 22px 48px -18px rgba(11, 28, 48, .45); }
.kopf .kopf-kachel__kicker { font-family: var(--display); font-weight: 600; font-size: 14px; color: #c9d3e2; }
.kopf .kopf-kachel__titel { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.25; color: #fff; }
.kopf .kopf-kachel__text { font-size: 14px; line-height: 1.5; color: #c9d3e2; }
.kopf .kopf-kachel__skala {
  display: block; height: 10px; margin-top: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 12px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, #8fb4e8 0 1px, transparent 1px 48px) bottom / 100% 10px no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.kopf .kopf-kachel__mehr { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: 15px; color: #8fb4e8; }
.kopf .kopf-kachel__mehr span { display: inline-block; transition: transform .3s var(--ease-premium); }
.kopf .kopf-kachel:hover .kopf-kachel__mehr { color: #fff; }
.kopf .kopf-kachel:hover .kopf-kachel__mehr span { transform: translateX(4px); }

/* Schmalere Desktops: drei Spalten, Kachel als Band darunter */
@media (min-width: 1024px) and (max-width: 1199px) {
  .kopf .kopf-panel--mega .kopf-panel__innen { grid-template-columns: 1.2fr 1.15fr .85fr; gap: 24px; }
  .kopf .kopf-kachel { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 24px; row-gap: 4px; padding: 18px 24px; }
  .kopf .kopf-kachel__kicker { grid-column: 1; }
  .kopf .kopf-kachel__titel { grid-column: 2; font-size: 18px; }
  .kopf .kopf-kachel__text { grid-column: 2; }
  .kopf .kopf-kachel__mehr { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .kopf .kopf-kachel__skala { display: none; }
  .kopf .kopf-oben { font-size: 18px; }
}

/* ── Schublade unter 1024px ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  .kopf .kopf__innen { grid-template-columns: auto 1fr; padding: 12px 32px; min-height: 68px; }
  .kopf .kopf__logo { position: relative; z-index: 3; }
  .kopf .kopf__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin: 0 -10px 0 0; justify-self: end;
    background: none; border: 0; border-radius: var(--r-s); cursor: pointer; position: relative; z-index: 3;
  }
  .kopf .kopf__burger span { display: block; height: 2px; background: var(--ink); transition: transform .3s, opacity .3s; }
  .kopf .kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .kopf .kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .kopf .kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .kopf .kopf__nav {
    display: flex; flex-direction: column; gap: 28px;
    position: fixed; inset: 0; z-index: 2; padding: 84px 32px 40px;
    background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .kopf .kopf__nav.ist-offen { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .kopf .kopf__menue { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; border-top: 1px solid var(--hair); }
  .kopf .kopf-punkt { border-bottom: 1px solid var(--hair); }
  .kopf .kopf-oben { width: 100%; justify-content: space-between; font-size: 21px; padding: 17px 0; }
  .kopf .kopf-oben--knopf::after { width: 9px; height: 9px; margin-right: 4px; }

  .kopf .kopf-panel,
  .kopf .kopf-panel--kompakt {
    position: static; display: none; opacity: 1; visibility: visible; transform: none; translate: none;
    width: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .kopf .kopf-panel.ist-offen { display: block; }
  .kopf .kopf-panel::before { display: none; }
  .kopf .kopf-panel--mega .kopf-panel__innen,
  .kopf .kopf-panel--kompakt .kopf-panel__innen { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 2px 0 22px; max-width: none; }
  .kopf .kopf-spalte__titel { font-size: 14px; margin-bottom: 6px; }
  .kopf .kopf-spalte .kopf-liste,
  .kopf .kopf-panel--kompakt .kopf-liste { margin-inline: 0; gap: 0; }
  .kopf .kopf-link { padding: 9px 0; gap: 12px; align-items: center; border: 0; }
  .kopf .kopf-link:hover { background: none; }
  .kopf .kopf-link__info { display: none; }
  .kopf .kopf-link__titel { font-family: var(--body); font-weight: 400; font-size: 17px; }
  .kopf .kopf-icon { width: 32px; height: 32px; border-radius: 8px; }
  .kopf .kopf-icon svg { width: 17px; height: 17px; }
  /* Städte als Pillen */
  .kopf .kopf-spalte--orte .kopf-liste { display: flex; flex-wrap: wrap; gap: 8px; }
  .kopf .kopf-spalte--orte .kopf-link { padding: 8px 16px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; }
  .kopf .kopf-spalte--orte .kopf-icon { display: none; }
  .kopf .kopf-spalte--orte .kopf-link__titel { font-size: 15.5px; }
  .kopf .kopf-kachel { display: none; }

  .kopf .kopf__aktionen { flex-direction: column; align-items: stretch; gap: 18px; justify-self: auto; }
  .kopf .kopf__aktionen .mh__sprache { justify-content: flex-start; }
  .kopf .kopf-knopf { display: block; text-align: center; padding: 15px 20px; font-size: 17px; background: var(--signal); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .kopf *, .kopf *::before, .kopf *::after { transition: none !important; }
}

/* Stand 04.10.2026 (Oliver): Hauptpunkte in Versalien wie bei Jung & Banse,
   bewusste Ausnahme von „Satzschreibung statt Versalien“ nur fuer diese Ebene.
   Panel „Leistungen“ mit zwei Spalten ohne Kachel. */
.kopf .kopf-oben { text-transform: uppercase; letter-spacing: .03em; font-size: 17px; }
.kopf .kopf-panel--mega .kopf-panel__innen--schlicht { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; column-gap: 48px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .kopf .kopf-oben { font-size: 16px; }
  .kopf .kopf-panel--mega .kopf-panel__innen--schlicht { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .kopf .kopf-oben { font-size: 19px; }
  .kopf .kopf-panel--mega .kopf-panel__innen--schlicht { grid-template-columns: 1fr; }
}


/* Phosphor Duotone (04.10.2026): Strich in Tinte, Fläche in Signalblau,
   beim Überfahren und auf der aktiven Seite wird der Strich blau.
   Kachel bleibt hell. Ersetzt die Strichregeln der alten Linien-Icons. */
.kopf .kopf-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--kopf-icon-flaeche); color: var(--ink); transition: color .2s ease; }
.kopf .kopf-icon svg.ph { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.kopf .kopf-icon .ph-flaeche { fill: var(--signal); }
.kopf .kopf-link:hover .kopf-icon,
.kopf .kopf-link:focus-visible .kopf-icon,
.kopf .kopf-link[aria-current="page"] .kopf-icon { color: var(--signal); }
.kopf .kopf-spalte--orte .kopf-icon { width: 34px; height: 34px; border-radius: 9px; }
.kopf .kopf-spalte--orte .kopf-icon svg.ph { width: 19px; height: 19px; }
@media (max-width: 1023px) {
  .kopf .kopf-icon { width: 34px; height: 34px; border-radius: 9px; }
  .kopf .kopf-icon svg.ph { width: 19px; height: 19px; }
}

/* Wissen-Panel buendig an der Kopfzeile (04.10.2026, Oliver: „little gap“).
   Der Menuepunkt ist in der 80px-Zeile senkrecht zentriert, seine Hoehe
   schwankt mit der Schriftrundung. top = halbe Punkthoehe (50 %) plus halbe
   Zeilenhoehe (40px) landet unabhaengig davon auf der Unterkante. */
@media (min-width: 1024px) {
  .kopf .kopf-panel--kompakt { top: calc(50% + 40px); border-radius: 0 0 var(--r-m) var(--r-m); }
}

/* Angemeldet: die Admin-Leiste (46px am Telefon, 32px darueber) schiebt die
   Kopfzeile nach unten, die Schublade beginnt aber oben am Fenster. Ohne
   Ausgleich rutschte „Leistungen“ unter das Logo (Oliver 04.10.2026). */
@media (max-width: 1023px) {
  body.admin-bar .kopf .kopf__nav { padding-top: calc(84px + var(--wp-admin--admin-bar--height, 46px)); }
}

/* Megapanel ruhiger (13.10.2026, Oliver: „how to make the megamenu more refined?“, „keep it low key“):
   Karte buendig unter der Kopfzeile wie das Wissen-Panel statt vollbreitem Band,
   Zeilen ohne Kastenrand beim Ueberfahren, Spaltentitel leiser. Nur Desktop. */
@media (min-width: 1024px) {
  .kopf .kopf-panel--mega {
    left: 50%; right: auto; translate: -50% 0; width: min(960px, calc(100vw - 48px));
    top: calc(100% - 1px); border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m);
    box-shadow: 0 24px 48px -24px rgba(11, 28, 48, .28);
  }
  .kopf .kopf-panel--mega .kopf-panel__innen--schlicht { max-width: none; padding: 26px 28px 28px; column-gap: 32px; }
  .kopf .kopf-spalte__titel { font-size: 13.5px; margin-bottom: 8px; }
  .kopf .kopf-link { border-color: transparent; }
  .kopf .kopf-link:hover,
  .kopf .kopf-link:focus-visible { background: var(--paper); border-color: transparent; }
}

/* Feinschliff Megamenue (13.10.2026, Oliver: „i want it to be more refined“, „do it!“). Nur Desktop.
   Zeilen bauen sich beim Oeffnen kurz nacheinander auf, ein kleiner Pfeil gleitet in die ueberfahrene
   Zeile, „Neu“ markiert die aktuelle Studie. Das verzoegerte Oeffnen/Schliessen steckt schon im Skript. */
.kopf .kopf-neu{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#e6edff;color:var(--signal,#0052ff);font:700 11px/1.3 var(--display);letter-spacing:.02em;vertical-align:2px}
@media (min-width: 1024px) {
  .kopf .kopf-panel .kopf-liste > li{opacity:0;transform:translateY(4px);transition:opacity .22s ease, transform .3s var(--ease-premium, ease)}
  .kopf .kopf-panel.ist-offen .kopf-liste > li{opacity:1;transform:none}
  .kopf .kopf-panel.ist-offen .kopf-liste > li:nth-child(1){transition-delay:.03s}
  .kopf .kopf-panel.ist-offen .kopf-liste > li:nth-child(2){transition-delay:.06s}
  .kopf .kopf-panel.ist-offen .kopf-liste > li:nth-child(3){transition-delay:.09s}
  .kopf .kopf-panel.ist-offen .kopf-liste > li:nth-child(4){transition-delay:.12s}
  .kopf .kopf-panel.ist-offen .kopf-liste > li:nth-child(n+5){transition-delay:.15s}
  .kopf .kopf-link{position:relative;padding-right:36px}
  .kopf .kopf-link::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;opacity:0;transform:translateX(-6px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' stroke='%230052ff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:opacity .2s ease, transform .25s var(--ease-premium, ease)}
  .kopf .kopf-link:hover::after,.kopf .kopf-link:focus-visible::after{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce) {
  .kopf .kopf-panel .kopf-liste > li{opacity:1;transform:none;transition:none}
}