/* Mega-Menü (Entwurf, 24.10.2026): Mischung aus BYQ Kelvin 4 (große Einträge mit Nummern, Vorschau, die beim Zeigen wechselt) und Kelvin 5
   (Panel unter der Leiste statt Vollbild), etwa halbe Bildschirmhöhe. Rahmen aus Linien mit Plus wie im Fuß und im Erstgespräch, Grund aus dunklem
   Glas über der abgedunkelten Seite. Rechts unter den Klappen die Einträge, links die Bühne mit einer Tafel je Eintrag (seit 24.10. abends, getauscht spät): Leistungen als Datenblatt
   mit Pixel-Füllung, Für wen als Satz mit Logos, Cases mit Ergebnissatz und Mini-Show. Farben über die Kanäle. Bewegung: quelle/megamenue.js. Am Handy
   klappen die Einträge im Menü auf, ohne Panel. */
.mm-punkt { position: relative; display: flex; }
/* vier Punkte und der Knopf: nichts bricht um; bis 1600 px ist die rechte Spalte so breit wie ihr Inhalt (darüber passt die Teilung des Heros) */
.kopf-r nav, .kopf-r nav a, .mm-ausloeser, .kopf .knopf .text { white-space: nowrap; }
@media (min-width: 861px) { .kopf-r nav { gap: 22px; } }
@media (min-width: 861px) and (max-width: 1599px) { .kopf { grid-template-columns: 1fr auto; } .kopf-r { gap: 28px; } }
.mm-ausloeser { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
                opacity: .78; transition: opacity .2s; }
.mm-ausloeser[aria-expanded="true"] { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .mm-ausloeser:hover { opacity: 1; } }
.mm-pfeil { position: relative; width: 8px; height: 8px; translate: 0 -2px; transition: rotate .35s var(--aus), translate .35s var(--aus); }
.mm-pfeil::before { content: ""; position: absolute; inset: 0; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; rotate: 45deg; }
.mm-ausloeser[aria-expanded="true"] .mm-pfeil { rotate: 180deg; translate: 0 2px; }
.mm-ausloeser[aria-expanded="true"] .mm-pfeil::before { border-color: var(--sonne); }
.mm-mobil { display: none; }

/* Panel unter der Kopfleiste */
.mm { position: absolute; top: var(--kopf); left: var(--rand); right: var(--rand); z-index: -1; height: clamp(420px, 54svh, 580px); color: var(--sand); }
.mm[hidden] { display: none; }
.mm::before { content: ""; position: fixed; inset: var(--kopf) 0 0; background: rgb(var(--hg-k) / .62); opacity: 0; transition: opacity .45s var(--aus); pointer-events: none; }
.mm.da::before { opacity: 1; }
.mm-rahmen { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--mm-rechts, minmax(0, 5fr)); overflow: hidden;
             /* links die Tafel, rechts die Einträge unter den Klappen; die Teilung liegt am Trennstrich der Kopfleiste (--mm-rechts, megamenue.js) */
             border: 1px solid rgb(var(--vg-k) / .14); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
             background: rgb(var(--hg-k) / .9); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
             box-shadow: 0 50px 90px -30px rgb(0 0 0 / .6); clip-path: inset(0 0 100% 0); }
.mm.da .mm-rahmen { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.32, .72, 0, 1); }
.mm.geht .mm-rahmen { clip-path: inset(0 0 100% 0); transition: clip-path .38s cubic-bezier(.55, 0, .9, .45); }

/* rechts unter den Klappen: Einträge mit Nummern, groß, der gezeigte hell, die anderen leise; nur Nummer und Name, damit beim Zeigen nichts verrutscht */
.mm-seite { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; padding: clamp(24px, 3.4vh, 40px) clamp(24px, 2.6vw, 44px) 0; }
.mm-seite[hidden] { display: none; }
.mm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2px, .6vh, 8px); }
.mm-eintrag { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 4px 0; color: inherit; text-decoration: none; }
.mm-nr { align-self: start; margin-top: calc(clamp(30px, 14px + 2.3vw, 58px) * .26); color: rgb(var(--vg-k) / .5); font: 500 12px/1 var(--schrift); font-variant-numeric: tabular-nums; transition: color .3s var(--aus); }   /* an der ersten Zeile, auch wenn der Name umbricht */
.mm-name { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; font: 320 clamp(30px, 14px + 2.3vw, 58px)/1.02 var(--schrift); letter-spacing: -.04em; }
html.hell .mm-name { font-weight: 300; }
.mm-name > span { display: inline-block; color: rgb(var(--vg-k) / .38); transition: color .35s var(--aus), transform .5s var(--sanft); }
.mm-eintrag.jetzt .mm-name > span { color: var(--sand); transform: translateX(10px); }   /* transform, nicht translate: das Einfliegen (mm-steigt) belegt translate, sonst wartet der Hover, bis es fertig ist */
.mm-eintrag.jetzt .mm-nr { color: var(--sonne); }
.mm-eintrag:focus-visible { outline: 2px solid var(--sonne); outline-offset: 4px; border-radius: 2px; }
.mm-alle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: auto calc(clamp(24px, 2.6vw, 44px) * -1) 0; padding: 18px clamp(24px, 2.6vw, 44px);
           border-top: 1px solid var(--zl); color: var(--sand); text-decoration: none; font: 500 15px/1 var(--schrift); }
.mm-alle svg { width: 16px; height: 16px; transition: translate .35s var(--aus); }
@media (hover: hover) and (pointer: fine) { .mm-alle:hover svg { translate: 4px 0; } .mm-alle:hover { background: rgb(var(--vg-k) / .04); } }

/* links: Bühne mit Linien, Plus und Ecken wie im Fuß; je Eintrag eine Tafel (seit 24.10. abends statt Seekarte und Figuren). Die gezeigte blendet
   ein, die anderen sind unsichtbar, auch für Tastatur und Vorleser. Rechts steht nie, was links schon steht. */
.mm-buehne { grid-column: 1; grid-row: 1; position: relative; border-right: 1px solid var(--zl); overflow: hidden; }
.mm-buehne .knoten { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mm-ecke { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; margin: 0; padding: 14px 18px;
           color: var(--leise); font-size: 12px; letter-spacing: .01em; pointer-events: none; }
.mm-tafel { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: clamp(46px, 6.4vh, 60px) clamp(20px, 2vw, 28px) clamp(16px, 2.4vh, 22px);
            visibility: hidden; opacity: 0; transition: opacity .25s var(--aus), visibility 0s .25s; }
.mm-tafel.jetzt { visibility: visible; opacity: 1; transition: opacity .35s var(--aus); }
.mm-ober { margin: 0 0 10px; color: var(--leise); font: 500 13px/1.3 var(--schrift); }   /* Frage der Leistung, Leistungen des Falls */
.mm-tafel.jetzt .mm-ober { animation: mm-blendet .5s var(--aus) both; }
.mm-titel { margin: 0; max-width: 15ch; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em;
            font: 320 clamp(32px, 14px + 2.1vw, 48px)/1.04 var(--schrift); letter-spacing: -.04em; color: var(--sand); text-wrap: balance; }
html.hell .mm-titel { font-weight: 300; }
.mm-titel > span { display: inline-block; }
.mm-tafel.jetzt .mm-titel > span { animation: mm-steigt .7s var(--sanft) both .04s; }

/* Leistungen: Datenblatt nach Kelvin 5. Die Bausteine stehen als Zeilen unten; wer darauf zeigt, füllt die Zeile in Sonne, in Pixelstufen wie
   Herons Knöpfe (die Zellen zeichnet quelle/pixel.js auf .mm-pixel, rechts flimmert ein Saum). Die Schrift kippt auf der Fläche in Nacht. */
.mm-zeilen { list-style: none; margin: auto 0 0; padding: 0; }
.mm-zeile { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(min-content, 4.5fr) minmax(0, 7.5fr) 14px; align-items: baseline; gap: 16px;
            margin: 0 -12px; padding: clamp(11px, 1.7vh, 16px) calc(10% + 6px) clamp(10px, 1.6vh, 15px) 12px;   /* der Pfeil steht vor dem Saum (10 % der Breite, pixel.js) */ color: inherit; text-decoration: none; }
.mm-zeile::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: rgb(var(--vg-k) / .16); }
.mm-pixel { position: absolute; left: 0; top: 0; z-index: -1; width: calc(100% + 16px); height: 100%; pointer-events: none; }   /* 16 px über die Zeile hinaus: dort flimmert der Saum */
/* Pfeil am Zeilenende (Jonah 25.10.: „sollte noch minimal ersichtlich sein, vielleicht mit einem kleinen Pfeil“), wie der Pfeil im Knopf */
.mm-zeile-pfeil { align-self: center; width: 14px; height: 14px; background: currentColor; color: rgb(var(--vg-k) / .42); transition: color .25s var(--aus), translate .35s var(--aus);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .mm-zeile:hover .mm-zeile-pfeil { translate: 3px 0; } }
.mm-zeile-pfeil.dunkel { color: #0c0908; }
.mm-zeile b { font: 320 clamp(26px, 12px + 1.6vw, 38px)/1 var(--schrift); letter-spacing: -.035em; color: var(--sand); }
html.hell .mm-zeile b { font-weight: 300; }
.mm-zeile span { font-size: 14px; line-height: 1.4; color: var(--leise); }
.mm-zeile .dunkel { color: #0c0908; }   /* kippt erst, wenn die Füllung das Wort erreicht hat (megamenue.js) */
.mm-zeile span.dunkel { color: rgb(12 9 8 / .8); }
.mm-zeile:focus-visible { outline: 2px solid var(--sonne); outline-offset: -2px; border-radius: 2px; }
.mm-tafel.jetzt .mm-zeilen li { animation: mm-zeile .55s var(--aus) both; animation-delay: calc(.1s + var(--z, 0) * 55ms); }
@keyframes mm-zeile { from { opacity: 0; translate: 0 10px; } }

/* Webflow-Partner-Badge in der Tafel „Webflow“ als senkrechte Lasche (Jonah 25.10. gewählt aus drei Platzierungen: „Passt da gut rein, sehr subtil“),
   rechts im selben Abstand wie „04 / 04“ darüber, oben auf Höhe der Frage. Nacht die dunkle, Tag die helle Fassung; die Farben des Badges bleiben. */
.mm-lasche { position: absolute; right: 18px; top: clamp(46px, 6.4vh, 60px); z-index: 2; width: 42px; }
.mm-lasche img { display: block; width: 100%; height: auto; }
.mm-lasche .tag, html.hell .mm-lasche .nacht { display: none; }
html.hell .mm-lasche .tag { display: block; }
.mm-tafel.jetzt .mm-lasche { animation: mm-lasche .8s var(--sanft) both .18s; }
@keyframes mm-lasche { from { opacity: 0; clip-path: inset(0 0 100% 0); } }   /* zieht sich von oben auf, wie die Einträge aus ihren Masken */

/* Für wen: der Satz aus 06 groß, darunter die Logos dieser Gruppe in Kacheln wie in 02 */
.mm-gruppe .mm-titel { max-width: 30ch; font-size: clamp(24px, 10px + 1.55vw, 36px); line-height: 1.12; letter-spacing: -.03em; }
.mm-logos { margin-top: auto; padding-top: 20px; }
.mm-logos > p { margin: 0; padding: 12px 0 10px; border-top: 1px solid rgb(var(--vg-k) / .2); color: var(--leise); font: 500 13px/1.3 var(--schrift); }
.mm-logos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-logos li { position: relative; height: clamp(84px, 12vh, 112px); overflow: hidden; border: 1px solid rgb(var(--vg-k) / .12); margin: -1px 0 0 -1px; }
.mm-logos img { position: absolute; left: 0; top: -16%; width: 100%; height: 132%; object-fit: contain; opacity: .86; }   /* die Dateien haben breiten Rand */
html.hell .mm-logos img { filter: brightness(.16); }   /* die Logos liegen in Sand vor, auf hellem Grund in Tinte (wie in 02) */
.mm-tafel.jetzt .mm-logos li { animation: mm-zeile .55s var(--aus) both; animation-delay: calc(.12s + var(--z, 0) * 60ms); }

/* Cases: nach Terminal (Featured) der Ergebnissatz über der Vorschau; die Mini-Show aus 03 läuft im Fenster, das unten aus der Bühne ragt */
.mm-fall { padding-bottom: 0; }
.mm-fallsatz { margin: 0; max-width: 54ch; color: var(--sand); font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.45; text-wrap: pretty; }
.mm-fenster { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: min(88%, 680px); margin: clamp(16px, 2.6vh, 26px) 0 -1px;
              border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
              background: var(--nacht-800); box-shadow: 0 0 0 1px rgb(var(--vg-k) / .14), 0 30px 60px -24px rgb(0 0 0 / .6); }
.mm-fenster-leiste { flex: none; height: 26px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgb(var(--vg-k) / .1);
                     font: 500 12px/1 var(--schrift); color: rgb(var(--vg-k) / .68); }
.mm-fenster video { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; background: var(--nacht-800); }   /* Mitte der Show, dort stehen die Geräte */
.mm-tafel.jetzt .mm-fallsatz { animation: mm-zeile .55s var(--aus) both .04s; }
.mm-tafel.jetzt .mm-fenster { animation: mm-fenster .8s var(--sanft) both .1s; }
@keyframes mm-fenster { from { opacity: 0; translate: 0 36px; } }

/* Auftritt: Einträge steigen aus ihren Masken, Bühne zoomt leicht heran */
.mm.da .mm-seite:not([hidden]) .mm-name > span { animation: mm-steigt .75s var(--sanft) backwards; animation-delay: calc(.08s + var(--i, 0) * 45ms); }
.mm.da .mm-seite:not([hidden]) .mm-nr, .mm.da .mm-seite:not([hidden]) .mm-alle { animation: mm-blendet .6s var(--aus) both; animation-delay: calc(.2s + var(--i, 0) * 45ms); }
.mm.da .mm-buehne { animation: mm-buehne .9s var(--sanft) both .05s; }
.mm-seite.wechsel .mm-name > span { animation: mm-steigt .6s var(--sanft) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes mm-steigt { from { translate: 0 105%; } }   /* backwards statt both: eine Animation, die ihr Ende hält, ließ den Hover-Übergang (translate) springen */
@keyframes mm-blendet { from { opacity: 0; } }
@keyframes mm-buehne { from { opacity: 0; scale: 1.04; } }

@media (max-width: 860px) {
  .mm { display: none !important; }
  .kopf.offen .kopf-r nav { align-items: stretch; }
  .kopf.offen .mm-punkt { flex-direction: column; border-bottom: 1px solid var(--zl); }
  .kopf.offen .mm-ausloeser { justify-content: space-between; width: 100%; padding: 14px 0; font-size: 20px; opacity: 1; }
  .mm-mobil:not([hidden]) { display: grid; list-style: none; margin: 0; padding: 0 0 12px 14px; gap: 2px; }
  .mm-mobil a { display: block; padding: 10px 0 !important; font-size: 17px !important; opacity: .82 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-rahmen, .mm.da .mm-rahmen, .mm.geht .mm-rahmen { clip-path: none; transition: opacity .2s linear; }
  .mm.geht .mm-rahmen { opacity: 0; }
  .mm.da .mm-seite:not([hidden]) .mm-name > span, .mm.da .mm-seite:not([hidden]) .mm-nr, .mm.da .mm-seite:not([hidden]) .mm-alle, .mm.da .mm-buehne, .mm-seite.wechsel .mm-name > span { animation: none; }
  .mm-name > span, .mm-tafel, .mm-zeile b, .mm-zeile span { transition: none; }
  .mm-tafel.jetzt :is(.mm-ober, .mm-titel > span, .mm-zeilen li, .mm-logos li, .mm-fallsatz, .mm-fenster, .mm-lasche) { animation: none; }
}