/* Menü x-mind.de (seit 25.10.2026): Vollbild, Kreis öffnet sich am Menü-Knopf, Kopf zeigt nur Logo und Kreuz,
   Leistungen in Stufen (Desktop als Spalte neben den Hauptpunkten, schmaler zum Aufklappen am Punkt „Leistungen“).
   Lädt nach rahmen.css und überschreibt dessen ältere Menüregeln (gleiche Selektoren, spätere Datei).
   Markup: teile/kopf.php, Verhalten: assets/js/rahmen.js. Quelle: _wordpress/theme/quelle/menue.css (baue.py kopiert sie
   unverändert, nicht verkleinert, damit wp_write_file sie sicher übertragen kann). Herleitung: _wordpress/menue/ */

/* ── Tokens des Menüs (Maße am Kopf ausgerichtet: Leiste 30 + 67 px, Handy 20 + 73 px) ── */
.xm {
  --menue-kopf: 97px;
  --menue-kopf-mobil: 93px;
  --menue-rand: 280px;
  --menue-rand-tablet: 80px;
  --menue-rand-mobil: 40px;
  --menue-einzug: 10px;
  --menue-einzug-mobil: 26px;
  --menue-einzug-rechts-mobil: 13px;
  --menue-knopf: 48px;
  --menue-zeile: 40px;
  --menue-icon-s: 16px;
  --menue-icon-m: 18px;
  --menue-icon-l: 20px;
  --menue-hub: 14px;
  --menue-schub: 8px;
  --menue-pfeil: 6px;
  --menue-kreuz: 7px;
  --menue-luft-oben: clamp(24px, 6vh, 80px);
  --menue-luft-unten: clamp(40px, 7vh, 80px);
  --menue-spalte-luft: clamp(32px, 4vw, 72px);
  --menue-gruppen-zeile: clamp(28px, 3.4vh, 44px);
  --menue-gruppen-spalte: clamp(24px, 3vw, 56px);
  --menue-kreis-x: calc(100% - 60px);
  --menue-kreis-y: 60px;
  --fs-menue: clamp(2.5rem, 1.45rem + 2.5vw, 4.25rem);
  --fs-menue-mobil: 2.25rem;
  --fs-menue-unter: 1.125rem;
  --fs-menue-unter-mobil: 1.0625rem;
  --menue-dur-raus: 90ms;
  --menue-dur-zu: 200ms;
  --menue-dur-auf: 700ms;
  --menue-dur-ein: 360ms;
  --menue-dur-weg: 600ms;
  --menue-dur-dreh: 300ms;
  --menue-dur-hover: 260ms;
  --menue-dur-linie: 700ms;
  --menue-start: 150ms;
  --menue-takt: 45ms;
  --menue-sofort: 0s;
  --menue-weg: calc(var(--menue-dur-raus) + var(--menue-dur-zu));
}

/* ── Fläche ── */
.xm .menue {
  --menue-breite: min(var(--container-wide), 100% - var(--menue-rand));
  --menue-links: var(--menue-einzug);
  --menue-rechts: 0px;
  --menue-oben: calc(var(--menue-kopf) + var(--menue-luft-oben));
  --menue-maske: calc(var(--menue-kopf) + var(--s-24));
  inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: var(--menue-maske);
  scrollbar-width: thin;
  scrollbar-color: var(--white-35) transparent;
  background: var(--grad-section);
  color: var(--white);
  visibility: hidden;
  opacity: 0;
  clip-path: circle(0 at var(--mx, var(--menue-kreis-x)) var(--my, var(--menue-kreis-y)));
  /* Schließen: erst die Texte (--menue-dur-raus), dann die Fläche; der Kreis springt danach zurück */
  transition:
    opacity var(--menue-dur-zu) ease var(--menue-dur-raus),
    visibility var(--menue-sofort) linear var(--menue-weg),
    clip-path var(--menue-sofort) linear var(--menue-weg);
}
.xm .menue.is-offen {
  visibility: visible;
  opacity: 1;
  /* Radius bis zur fernsten Ecke setzt rahmen.js (--mr) */
  clip-path: circle(var(--mr, 150vmax) at var(--mx, var(--menue-kreis-x)) var(--my, var(--menue-kreis-y)));
  transition: clip-path var(--menue-dur-auf) var(--ease-inout), opacity var(--menue-sofort), visibility var(--menue-sofort);
}
.xm .menue.is-offen.is-ganz { clip-path: none; }
.xm .menue ::selection { background: var(--orange); color: var(--white); }

/* Maske unter dem Kopf: gescrollter Inhalt läuft nicht unter Logo und Kreuz */
.xm .menue::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 1;
  flex: none;
  height: var(--menue-maske);
  margin-bottom: calc(-1 * var(--menue-maske));
  background: linear-gradient(var(--navy-deep) 78%, transparent);
  pointer-events: none;
}

.xm .menue__nav {
  flex: none;
  width: var(--menue-breite);
  margin-inline: auto;
  padding: var(--menue-oben) var(--menue-rechts) var(--menue-luft-unten) var(--menue-links);
}

/* ── Hauptpunkte ── */
.xm .menue__liste {
  position: relative;
  display: block;
  align-self: auto;
  width: auto;
  margin: 0;
  /* Desktop: Höhe der daneben stehenden Leistungsspalte, gemessen von rahmen.js */
  min-height: var(--menue-spalte-h, 0px);
}
.xm .menue__liste > li { width: 44%; }
.xm .menue__liste .menue__punkt {
  display: inline-block;
  padding-block: 0.04em;
  font-size: var(--fs-menue);
  line-height: 1.1;
  letter-spacing: var(--track-head);
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  transition: color var(--dur-1) linear, transform var(--menue-dur-hover) var(--ease-out);
}
.xm .menue__liste a:hover { transform: none; }
/* Hier bin ich: weiß mit orangem Punkt (wie der Punkt vor der Telefonnummer); Orange als Farbe bleibt dem Hover */
.xm .menue__liste .menue__punkt[aria-current] { color: var(--white); }
.xm .menue__punkt[aria-current]::after {
  content: "";
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.18em;
  border-radius: var(--radius-round);
  background: var(--orange);
  vertical-align: 0.12em;
}

/* ── Leistungen in vier Stufen (Desktop: Spalte rechts, Höhe der Liste setzt rahmen.js) ── */
.xm .menue__leistungen {
  position: absolute;
  top: 0.6rem;
  left: 46%;
  right: 0;
  padding-left: var(--menue-spalte-luft);
}
.xm .menue__leistungen::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--white-20);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--menue-sofort) linear var(--menue-weg);
}
.xm .menue.is-offen .menue__leistungen::before {
  transform: none;
  transition: transform var(--menue-dur-linie) var(--ease-out) var(--menue-start);
}
.xm .menue__stufen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--menue-gruppen-zeile) var(--menue-gruppen-spalte);
}
.xm .menue__stufe-name {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  padding-bottom: var(--s-12);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--white-20);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--track-sub);
  color: var(--white-81);
}
.xm .menue__nr { color: var(--orange); font-variant-numeric: tabular-nums; }
.xm .menue__stufe ul { list-style: none; display: grid; }
.xm .menue__stufe a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-8);
  min-height: var(--menue-zeile);
  font-size: var(--fs-menue-unter);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: var(--track-sub);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-1) linear;
}
.xm .menue__stufe a .icon {
  width: var(--menue-icon-s);
  height: var(--menue-icon-s);
  color: var(--orange);
  opacity: 0;
  transform: translate(calc(-1 * var(--menue-pfeil)), var(--menue-pfeil));
  transition: opacity var(--dur-1) linear, transform var(--menue-dur-hover) var(--ease-out);
}
.xm .menue__stufe a[aria-current] { color: var(--white); text-decoration-color: var(--orange); }
.xm .menue__auf { display: none; }

/* ── Kontaktzeile (Linie bündig mit dem Inhalt) ── */
.xm .menue__unten {
  flex: none;
  width: calc(var(--menue-breite) - var(--menue-links) - var(--menue-rechts));
  margin: 0 auto 0 calc((100% - var(--menue-breite)) / 2 + var(--menue-links));
  padding: var(--s-20) 0 var(--s-24);
  border-top: 1px solid var(--white-20);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-32);
  color: var(--white-81);
  font-size: var(--fs-body);
}
.xm .menue__unten > a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: var(--ziel);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  font-variant-numeric: tabular-nums;
  transition: text-decoration-color var(--dur-1) linear;
}
.xm .menue__unten > a .icon { width: var(--menue-icon-m); height: var(--menue-icon-m); color: var(--white-60); }
.xm .menue__social { margin-left: auto; }

/* ── Kopf, solange das Menü offen ist: nur Logo und Kreuz ── */
html.xm-menue-sichtbar .xm .kopf { z-index: 10055; }
/* Die Rinne des Scrollbalkens (scrollbar-gutter in rahmen.css) zeigt sonst den weißen Seitengrund */
html.xm-menue-offen { background: linear-gradient(143deg, #062633 46%, #104b62 100%) fixed; } /* ds-allow-hardcode: Werte von --navy-deep und --petrol, die Tokens liegen auf .xm und gelten auf html nicht */
.xm .logo-mind { transition: fill var(--menue-dur-zu) linear var(--menue-dur-raus), stroke var(--menue-dur-zu) linear var(--menue-dur-raus); }
.xm .kopf__glas { transition: opacity var(--dur-2) linear, background-color var(--menue-dur-zu) linear var(--menue-dur-raus), box-shadow var(--menue-dur-zu) linear var(--menue-dur-raus); }
.xm .kopf__tel,
.xm .kopf__sag,
.xm .kopf__rund { transition: opacity var(--menue-dur-zu) linear var(--menue-dur-raus), visibility var(--menue-sofort), background-color var(--dur-2) linear; }
html.xm-menue-offen .xm .kopf__tel,
html.xm-menue-offen .xm .kopf__sag,
html.xm-menue-offen .xm .kopf__rund {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--menue-dur-zu) linear, visibility var(--menue-sofort) linear var(--menue-dur-zu);
}
/* Pille (gescrollt) bleibt als dunkle Glasleiste */
html.xm-menue-offen .xm .kopf .kopf__glas { background: var(--white-10); box-shadow: inset 0 0 0 1px var(--white-20); -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity var(--dur-2) linear, background-color var(--menue-dur-zu) linear, box-shadow var(--menue-dur-zu) linear; }
html.xm-menue-offen .xm .logo-mind { fill: var(--white); stroke: var(--white); transition: fill var(--menue-dur-zu) linear, stroke var(--menue-dur-zu) linear; }
html.xm-menue-offen .xm .kopf :focus-visible { outline-color: var(--white); }

/* Menü-Knopf wird zum Schließen-Kreuz, an derselben Stelle */
.xm .kopf__burger { position: relative; }
.xm .kopf__burger i { transition: transform var(--menue-dur-dreh) var(--ease-out), opacity var(--menue-dur-zu) linear, background-color var(--menue-dur-zu) linear var(--menue-dur-raus); }
html.xm-menue-offen .xm .kopf__burger i { background: var(--white); transition: transform var(--menue-dur-dreh) var(--ease-out), opacity var(--menue-dur-zu) linear, background-color var(--menue-dur-zu) linear; }
html.xm-menue-offen .xm .kopf__burger i:nth-child(1) { transform: translateY(var(--menue-kreuz)) rotate(45deg); }
html.xm-menue-offen .xm .kopf__burger i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
html.xm-menue-offen .xm .kopf__burger i:nth-child(3) { transform: translateY(calc(-1 * var(--menue-kreuz))) rotate(-45deg); }
.xm .kopf__burger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 0 1px var(--white-35);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--menue-dur-zu) linear, transform var(--menue-dur-dreh) var(--ease-out), box-shadow var(--menue-dur-zu) linear;
}
html.xm-menue-offen .xm .kopf__burger::before { opacity: 1; transform: none; }

/* ── Ein- und Ausblenden der Inhalte ── */
.xm .menue .ein {
  opacity: 0;
  transform: translateY(var(--menue-hub));
  transition: opacity var(--menue-dur-raus) linear, transform var(--menue-sofort) linear var(--menue-weg);
}
.xm .menue.is-offen .ein {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--menue-dur-ein) ease calc(var(--menue-start) + var(--i, 0) * var(--menue-takt)),
    transform var(--menue-dur-weg) var(--ease-out) calc(var(--menue-start) + var(--i, 0) * var(--menue-takt));
}
/* Ein transform am Punkt „Leistungen“ wäre Bezugsrahmen der absolut stehenden Leistungsspalte: Sie säße während des
   Einblendens schmal links und spränge danach nach rechts. Dort hebt sich deshalb nur der Link (eigene Eigenschaft
   translate, verträgt sich mit dem transform des Hovers). */
.xm .menue .menue__mit-unter.ein,
.xm .menue.is-offen .menue__mit-unter.ein { transform: none; }
.xm .menue .menue__mit-unter > .menue__punkt {
  translate: 0 var(--menue-hub);
  transition: color var(--dur-1) linear, transform var(--menue-dur-hover) var(--ease-out), translate var(--menue-sofort) linear var(--menue-weg);
}
.xm .menue.is-offen .menue__mit-unter > .menue__punkt {
  translate: none;
  transition:
    color var(--dur-1) linear,
    transform var(--menue-dur-hover) var(--ease-out),
    translate var(--menue-dur-weg) var(--ease-out) calc(var(--menue-start) + var(--i, 0) * var(--menue-takt));
}

/* ── Hover (nur Maus) und Tastaturfokus: eine Sprache, Orange nur als Akzent ── */
.xm .menue__liste .menue__punkt:focus-visible { color: var(--orange); }
.xm .menue__stufe a:focus-visible { text-decoration-color: var(--orange); }
.xm .menue__stufe a:focus-visible .icon { opacity: 1; transform: none; }
.xm .menue__unten > a:focus-visible { text-decoration-color: var(--orange); }
@media (hover: hover) and (pointer: fine) {
  .xm .menue__liste .menue__punkt:hover { color: var(--orange); transform: translateX(var(--menue-schub)); }
  .xm .menue__stufe a:hover { text-decoration-color: var(--orange); }
  .xm .menue__stufe a:hover .icon { opacity: 1; transform: none; }
  .xm .menue__unten > a:hover { color: var(--white); text-decoration-color: var(--orange); }
  .xm .menue__social a:hover { background: var(--white); border-color: var(--white); color: var(--navy); transform: none; }
  html.xm-menue-offen .xm .kopf__burger:hover::before { box-shadow: inset 0 0 0 1px var(--white-60); }
}
.xm .menue__social a:focus-visible { background: var(--white); border-color: var(--white); color: var(--navy); }

/* ── Niedrige Fenster (Laptop 720 px): Abstände enger ── */
@media (min-width: 768px) and (max-height: 760px) {
  .xm .menue { --menue-luft-oben: clamp(16px, 3vh, 80px); --menue-luft-unten: clamp(24px, 4vh, 80px); }
}

@media (max-width: 1024px) {
  .xm .menue { --menue-breite: calc(100% - var(--menue-rand-tablet)); }
}

/* Schmaler Desktop (iPad quer, Laptop 1366): mehr Platz für die Spalte, sonst brechen lange Namen um */
@media (min-width: 960px) and (max-width: 1400px) {
  .xm .menue__liste > li { width: 34%; }
  .xm .menue__leistungen { left: 36%; }
}

/* ── Schmaler als 960 px: Leistungen klappen am Punkt „Leistungen“ auf ── */
@media (max-width: 959px) {
  .xm .menue { --menue-luft-unten: var(--s-40); }
  .xm .menue__liste { min-height: 0; }
  .xm .menue__liste > li { width: auto; }
  .xm .menue__mit-unter { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-12); }
  .xm .menue__auf {
    display: grid;
    place-items: center;
    width: var(--menue-knopf);
    height: var(--menue-knopf);
    border-radius: var(--radius-round);
    box-shadow: inset 0 0 0 1px var(--white-35);
    color: var(--white);
    cursor: pointer;
    transition: background-color var(--dur-1) linear, transform var(--dur-1) var(--ease-out);
  }
  .xm .menue__auf .icon { width: var(--menue-icon-l); height: var(--menue-icon-l); transition: transform var(--menue-dur-dreh) var(--ease-out); }
  .xm .menue__auf[aria-expanded="true"] { background: var(--white-10); }
  .xm .menue__auf[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .xm .menue__auf:active { transform: scale(0.95); }
  .xm .menue__leistungen {
    position: static;
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    visibility: hidden;
    transition: grid-template-rows var(--dur-2) var(--ease-out), visibility var(--menue-sofort) linear var(--dur-2);
  }
  .xm .menue__leistungen::before { display: none; }
  .xm .menue__auf[aria-expanded="true"] + .menue__leistungen {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--dur-2) var(--ease-out), visibility var(--menue-sofort);
  }
  .xm .menue__klapp { min-height: 0; overflow: hidden; }
  .xm .menue__stufen { gap: var(--s-24) var(--s-32); padding: var(--s-16) 0 var(--s-24); }
  .xm .menue__stufe a { min-height: var(--ziel); }
}

/* ── Handy ── */
@media (max-width: 767px) {
  .xm .menue {
    --menue-breite: calc(100% - var(--menue-rand-mobil));
    --menue-links: var(--menue-einzug-mobil);
    --menue-rechts: var(--menue-einzug-rechts-mobil);
    --menue-oben: calc(var(--menue-kopf-mobil) + var(--s-24));
    --menue-maske: calc(var(--menue-kopf-mobil) + var(--s-24));
  }
  .xm .menue__liste .menue__punkt { font-size: var(--fs-menue-mobil); line-height: 1.2; }
  .xm .menue__stufen { grid-template-columns: minmax(0, 1fr); gap: var(--s-20); }
  .xm .menue__stufe a { font-size: var(--fs-menue-unter-mobil); }
  .xm .menue__stufe a .icon { display: none; }
  .xm .menue__unten { gap: 0 var(--s-24); padding-top: var(--s-16); }
  .xm .menue__adresse { flex-basis: 100%; padding-block: var(--s-8); font-size: var(--fs-small); color: var(--white-60); }
  .xm .menue__social { margin-left: 0; }

  /* Glasleiste wird im offenen Menü durchsichtig */
  .xm .kopf__leiste { transition: background-color var(--menue-dur-zu) linear var(--menue-dur-raus), box-shadow var(--menue-dur-zu) linear var(--menue-dur-raus); }
  html.xm-menue-offen .xm .kopf__leiste { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color var(--menue-dur-zu) linear, box-shadow var(--menue-dur-zu) linear; }
}

/* ── Weniger Bewegung: nur Überblenden ── */
@media (prefers-reduced-motion: reduce) {
  .xm .menue,
  .xm .menue.is-offen { clip-path: none; }
  .xm .menue.is-offen { transition: opacity var(--menue-dur-zu) ease, visibility var(--menue-sofort); }
  .xm .menue .ein,
  .xm .menue.is-offen .ein { transform: none; }
  .xm .menue .menue__mit-unter > .menue__punkt { translate: none; }
  .xm .menue__leistungen::before,
  .xm .menue.is-offen .menue__leistungen::before { transform: none; transition: none; }
}