/* Hauptmenü. Signatur: die dreifarbige Leiste des Vergütungsmix (Fixum, Bonus, Langfristvergütung). */

.logo { position: relative; }
.logo-hell { display: none; }

/* Signaturleiste: drei Segmente im Verhältnis 35 / 25 / 40, wachsen beim Öffnen ein */
.signatur-leiste { display: flex; gap: 3px; height: 4px; }
.signatur-leiste i { display: block; height: 100%; transform-origin: 0 50%; transition: transform .9s var(--ease); }
.signatur-leiste i:nth-child(1) { flex: 35; background: var(--c-navy); }
.signatur-leiste i:nth-child(2) { flex: 25; background: var(--c-akzent); transition-delay: .08s; }
.signatur-leiste i:nth-child(3) { flex: 40; background: var(--c-seg-lti); transition-delay: .16s; }

.menue { margin-left: auto; }
.menue-liste { display: flex; align-items: center; gap: .25rem; }
.menue-link, .menue-schalter {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem; border: 0; border-radius: var(--radius-button);
  font: 500 var(--fs-body)/1.2 var(--f-text); color: var(--c-tinte);
  background: transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.menue-link:hover, .menue-schalter:hover, .menue-schalter[aria-expanded="true"] { background: var(--c-flaeche); color: var(--c-navy); }
.schalter-zahl { display: none; }
.schalter-pfeil {
  width: .45rem; height: .45rem; margin-top: -.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease);
}
.menue-schalter[aria-expanded="true"] .schalter-pfeil { transform: rotate(225deg); margin-top: .25rem; }
.menue-kontakt, .mega-kopf, .menue-leiste, .ml-bild, .mega-reiter { display: none; }

/* ================= Megamenü (Desktop) ================= */
@media (min-width: 64.01rem) {
  .hat-mega { position: static; }
  .menue-schalter { position: relative; }
  .menue-schalter[aria-expanded="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.6rem; }
  .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-weiss);
    box-shadow: 0 2.5rem 4rem -1.5rem rgb(15 29 51 / .28);
    max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-.5rem);
    transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .mega > .signatur-leiste { position: sticky; top: 0; z-index: 1; }
  .mega > .signatur-leiste i { transform: scaleX(0); }
  .menue-schalter[aria-expanded="true"] + .mega,
  html:not(.js) .hat-mega:hover .mega,
  html:not(.js) .hat-mega:focus-within .mega {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s;
  }
  .menue-schalter[aria-expanded="true"] + .mega > .signatur-leiste i,
  html:not(.js) .hat-mega:hover .mega > .signatur-leiste i { transform: none; }

  .mega-innen {
    display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 3.5rem;
    max-width: var(--seite); margin-inline: auto; padding: 2.5rem var(--rand) 2.75rem;
  }
  .mega-zwei { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) minmax(0, 1fr); }
  .mega-eins { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) minmax(0, 17rem); }

  /* Vorschau: großes Bild mit langsamem Zoom beim Wechsel */
  .mv-bild { position: relative; aspect-ratio: 4 / 3; margin-bottom: 1.1rem; overflow: hidden; border-radius: var(--radius-karte); background: var(--c-grau); }
  .mv-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform 2.4s var(--ease); }
  .mv-bild img.ist-aktiv { opacity: 1; transform: scale(1); }
  .mv-bild img[data-bild="dirk-filbert"] { object-position: 52% 0%; }
  html:not(.js) .mv-bild { display: none; }
  .mv-titel { font-family: var(--f-titel); font-size: var(--fs-h3); line-height: 1.2; color: var(--c-navy); margin-bottom: .3rem; }
  .mv-kurz { font-size: var(--fs-small); color: var(--c-tinte-70); }

  .mega-gruppe { font-size: var(--fs-small); font-weight: 600; color: var(--c-akzent); margin: 0 0 .6rem; padding-left: 1.1rem; }
  .mega-spalte a {
    position: relative; display: block; padding: .75rem .9rem .75rem 1.1rem; border-radius: var(--radius-button);
    text-decoration: none; transition: background-color .25s;
  }
  .mega-spalte a:hover, .mega-spalte a:focus-visible, .mega-spalte a.ist-aktiv { background: var(--c-grau); }
  .ml-titel { display: block; font-family: var(--f-titel); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--c-navy); transition: color .2s; }
  .ml-kurz { display: block; margin-top: .2rem; font-size: var(--fs-small); color: var(--c-tinte-70); }
  .mega-spalte a:hover .ml-titel, .mega-spalte a.ist-aktiv .ml-titel { color: var(--c-akzent); }

  /* Kontaktkarte, dunkel mit Porträt */
  .mega-kontakt { align-self: start; padding: 1.6rem; background: var(--c-navy); color: #dce4f1; border-radius: var(--radius-karte); }
  #mega-ueber .mk-foto { display: none; }
  .mk-foto { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; object-position: 52% 0%; margin-bottom: 1rem; background: var(--c-navy-tief); }
  .mk-titel { font-family: var(--f-titel); font-size: var(--fs-h3); line-height: 1.2; color: var(--c-weiss); margin-bottom: .5rem; }
  .mk-text { font-size: var(--fs-small); color: #c6d2e6; margin-bottom: 1.25rem; }
  .mega-kontakt .btn { width: 100%; }
  .mk-mail { display: block; margin-top: .9rem; font-size: var(--fs-small); text-align: center; color: var(--c-akzent-hell); }
  .mk-mail:hover { color: var(--c-weiss); }
  .mega-kontakt :focus-visible { outline-color: var(--c-akzent-hell); }
}
@media (min-width: 64.01rem) and (max-width: 75rem) {
  .ml-kurz { display: none; }
  .mega-innen { gap: 2.5rem; }
}

/* ================= Vollbild-Menü (Handy und Tablet) ================= */
@media (max-width: 64rem) {
  html.menue-offen { overflow: hidden; }
  .kopf { z-index: 60; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
  html.menue-offen .kopf { background: var(--c-navy-tief); border-bottom-color: rgb(255 255 255 / .12); }
  html.menue-offen .logo-dunkel { visibility: hidden; }
  html.menue-offen .logo-hell { display: block; position: absolute; left: 0; top: 50%; width: 100px; height: auto; transform: translateY(-50%); }
  html.menue-offen .burger { background: transparent; border-color: rgb(255 255 255 / .3); }
  html.menue-offen .burger-linien::before, html.menue-offen .burger-linien::after { background: var(--c-weiss); }

  .menue {
    position: fixed; inset: var(--kopf-hoehe) 0 0 0; z-index: 50;
    display: flex; flex-direction: column; margin: 0; overflow: hidden;
    background: linear-gradient(170deg, var(--c-navy-tief) 0%, var(--c-navy) 100%);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .menue.offen { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
  .menue-leiste { display: flex; flex: none; }
  .menue-leiste i:nth-child(1) { background: var(--c-weiss); }
  .menue:not(.offen) .menue-leiste i { transform: scaleX(0); }

  .menue-liste { display: block; flex: 1; overflow-y: auto; padding: 1.25rem var(--rand) 1rem; }
  .menue-punkt { border-bottom: 1px solid rgb(255 255 255 / .12); }
  .menue-link, .menue-schalter {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    padding: 1rem .15rem; border-radius: var(--radius-button);
    font: 400 var(--fs-h2)/1.1 var(--f-titel); color: var(--c-weiss);
  }
  .menue-link:hover, .menue-schalter:hover, .menue-schalter[aria-expanded="true"] { background: transparent; color: var(--c-akzent-hell); }
  .schalter-text { flex: 1; text-align: left; }
  .schalter-zahl { display: inline; font: 600 var(--fs-small)/1 var(--f-text); color: var(--c-akzent-hell); font-variant-numeric: tabular-nums; }
  .schalter-pfeil { width: .55rem; height: .55rem; margin: 0 .35rem 0 0; transform: rotate(-45deg); }
  .menue-schalter[aria-expanded="true"] .schalter-pfeil { transform: rotate(-45deg); margin: 0 .35rem 0 0; }
  .menue :focus-visible, .kopf :focus-visible { outline-color: var(--c-akzent-hell); }

  /* Zweite Ebene: schiebt sich von rechts über die Liste */
  .mega {
    position: absolute; inset: 4px 0 0 0; z-index: 2;
    display: flex; flex-direction: column; overflow-y: auto;
    background: var(--c-navy-tief);
    transform: translateX(100%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
  }
  .menue-schalter[aria-expanded="true"] + .mega { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .mega > .signatur-leiste { display: none; }
  .mega-kopf { display: block; padding: .6rem var(--rand) 0; }
  .mega-zurueck {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .15rem;
    border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-button);
    font: 400 var(--fs-h3)/1.1 var(--f-titel); color: var(--c-weiss);
  }
  .mega-zurueck:hover { color: var(--c-akzent-hell); }
  .zurueck-pfeil { width: .5rem; height: .5rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .mega-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mega-innen { display: block; padding: .25rem var(--rand) 5.25rem; }
  .mega-vorschau, .mega-kontakt, .mega-gruppe { display: none; }

  /* Umschalter für Gruppen mit zwei Spalten */
  .mega-reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; margin-top: .6rem; padding: .25rem; background: rgb(255 255 255 / .07); border-radius: var(--radius-button); }
  .mega-reiter button {
    min-height: 2.5rem; padding: .4rem .5rem; border: 0; border-radius: var(--radius-button); cursor: pointer;
    font: 600 var(--fs-small)/1.2 var(--f-text); color: #c6d2e6; background: transparent; white-space: nowrap;
    transition: background-color .25s, color .25s;
  }
  .mega-reiter button[aria-pressed="true"] { background: var(--c-weiss); color: var(--c-navy); }
  .mega-spalte { display: none; }
  .mega-spalte.ist-gewaehlt { display: block; }

  /* Einträge als Bildzeilen */
  .mega-spalte ul { display: grid; gap: .5rem; margin-top: .75rem; }
  .mega-spalte a {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) .55rem; gap: .9rem; align-items: center;
    padding: .45rem .75rem .45rem .45rem; border-radius: var(--radius-karte);
    background: rgb(255 255 255 / .05); text-decoration: none;
    transition: background-color .25s, transform .2s var(--ease);
  }
  .mega-spalte a::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid var(--c-akzent-hell); border-bottom: 1.5px solid var(--c-akzent-hell); transform: rotate(-45deg); }
  .mega-spalte a:hover, .mega-spalte a:focus-visible { background: rgb(255 255 255 / .1); }
  .mega-spalte a:active { transform: scale(.985); background: rgb(255 255 255 / .14); }
  .ml-bild { display: block; width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius-button); background: var(--c-navy); }
  .ml-bild[data-src*="dirk-filbert"], .ml-bild[src*="dirk-filbert"] { object-position: 52% 0%; }
  .ml-text { min-width: 0; }
  .ml-titel { display: block; font: 500 var(--fs-h4)/1.25 var(--f-titel); color: var(--c-weiss); }
  .ml-kurz { display: block; margin-top: .1rem; font-size: var(--fs-small); line-height: 1.3; color: #b9c7de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .menue-kontakt {
    display: block; position: relative; z-index: 3; flex: none;
    padding: .9rem var(--rand) calc(.9rem + env(safe-area-inset-bottom));
    background: var(--c-navy-tief); border-top: 1px solid rgb(255 255 255 / .12);
  }
  .mk-satz { display: none; }
  .mk-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
  .mk-buttons .btn { padding-inline: .6rem; font-size: var(--fs-small); }
  .mk-buttons .btn-rand { background: transparent; color: var(--c-weiss); border-color: rgb(255 255 255 / .5); }
  .mk-buttons .btn-rand:hover { background: rgb(255 255 255 / .08); color: var(--c-weiss); }

  html:not(.js) .burger { display: none; }
  html:not(.js) .menue { position: static; opacity: 1; visibility: visible; flex-basis: 100%; }
  html:not(.js) .kopf-zeile { flex-wrap: wrap; }
  html:not(.js) .mega { position: static; transform: none; visibility: visible; display: none; }
  html:not(.js) .hat-mega:focus-within .mega { display: flex; }
}
@media (max-width: 64rem) and (prefers-reduced-motion: no-preference) {
  /* Nur der Button bewegt sich, nicht der Listenpunkt: sonst würde er zum Bezugsrahmen der zweiten Ebene */
  .menue-punkt > .menue-link, .menue-punkt > .menue-schalter { opacity: 0; transform: translateX(-.75rem); transition: opacity .4s var(--ease), transform .55s var(--ease), color .2s; }
  .menue.offen .menue-punkt > .menue-link, .menue.offen .menue-punkt > .menue-schalter { opacity: 1; transform: none; }
  .menue.offen .menue-punkt:nth-child(1) > * { transition-delay: .12s; }
  .menue.offen .menue-punkt:nth-child(2) > * { transition-delay: .17s; }
  .menue.offen .menue-punkt:nth-child(3) > * { transition-delay: .22s; }
  .menue.offen .menue-punkt:nth-child(4) > * { transition-delay: .27s; }
  .menue.offen .menue-punkt:nth-child(5) > * { transition-delay: .32s; }
  .menue.offen .menue-punkt > .mega { transition-delay: 0s; }
}
@media (max-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .mega-spalte li { opacity: 0; transform: translateX(1.25rem); transition: opacity .35s var(--ease), transform .5s var(--ease); }
  .menue-schalter[aria-expanded="true"] + .mega .mega-spalte li { opacity: 1; transform: none; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-spalte li:nth-child(1) { transition-delay: .14s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-spalte li:nth-child(2) { transition-delay: .19s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-spalte li:nth-child(3) { transition-delay: .24s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-spalte li:nth-child(4) { transition-delay: .29s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-spalte li:nth-child(5) { transition-delay: .34s; }
}
@media (max-width: 22rem) {
  .mk-buttons { grid-template-columns: minmax(0, 1fr); }
}
/* Megamenü am Desktop: Das Panel öffnet sich von oben wie ein Vorhang, danach kommen Vorschau,
   Spalten und Kontaktkarte nacheinander ruhig herauf. Schließen geht schnell und ohne Staffel. */
@media (min-width: 64.01rem) and (prefers-reduced-motion: no-preference) {
  .mega {
    transform: none; clip-path: inset(0 0 100% 0);
    transition: opacity .2s var(--ease), clip-path .25s var(--ease), visibility 0s linear .25s;
  }
  .menue-schalter[aria-expanded="true"] + .mega,
  html:not(.js) .hat-mega:is(:hover, :focus-within) .mega {
    clip-path: inset(0 0 -5rem 0);
    transition: opacity .3s var(--ease), clip-path .6s var(--ease), visibility 0s;
  }
  .mega-innen > * { opacity: 0; transform: translateY(.6rem); transition: opacity .15s, transform 0s linear .15s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-innen > *,
  html:not(.js) .hat-mega:is(:hover, :focus-within) .mega-innen > * {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .7s var(--ease);
  }
  .menue-schalter[aria-expanded="true"] + .mega .mega-innen > :nth-child(1) { transition-delay: .12s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-innen > :nth-child(2) { transition-delay: .2s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-innen > :nth-child(3) { transition-delay: .28s; }
  .menue-schalter[aria-expanded="true"] + .mega .mega-innen > :nth-child(4) { transition-delay: .36s; }
}

/* Die Leiste läuft nur beim ersten Öffnen ein, danach steht sie ruhig */
html.leiste-gesehen .signatur-leiste i { transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mega, .menue, .mv-bild img, .schalter-pfeil, .signatur-leiste i { transition: none !important; }
  .mv-bild img { transform: none !important; }
}