/* Menueleiste neu gedacht (11.11.2026). Tim: "können wir unsere menü leiste auf der webseite neu denken ?"
   Vier Punkte statt sieben. Die Leiste klappt zu einem Blatt auf (details/summary: Klick und Tastatur, auch ohne Skript;
   nichts haengt an der Maus). Unten in der Leiste laeuft der Faden als Lesefortschritt mit. Beim Herunterscrollen zieht
   sich die Leiste zurueck, beim Hochscrollen kommt sie wieder. Am Handy ein Vollbild in der Farbe des Finales.
   Ruhezustand = sichtbar: ohne kante-menue.js bleibt die Leiste stehen und alle Blaetter lassen sich oeffnen. */
.kopf { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.kopf.m-weg { transform: translateY(-120%); }
.kopf-leiste { position: relative; }
.kopf-leiste::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--faden); transform: scaleX(var(--gelesen, 0)); transform-origin: 0 50%; pointer-events: none; }
html.k-ende .kopf-leiste::after { background: #14161A; }

.m-nav { display: flex; align-items: center; gap: var(--a1); margin-left: auto; }
.m-punkt > summary, .m-direkt { display: block; list-style: none; cursor: pointer; padding: var(--a1) 14px; border-radius: 999px; font-size: var(--t2); color: var(--leise); text-decoration: none; transition: color .2s, background-color .2s; }
.m-punkt > summary::-webkit-details-marker { display: none; }
.m-punkt > summary::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.18em) rotate(45deg); transition: transform .25s ease; }
.m-punkt[open] > summary::after { transform: translateY(.08em) rotate(-135deg); }
.m-punkt > summary:hover, .m-direkt:hover, .m-punkt[open] > summary, .m-punkt > summary[aria-current], .m-direkt[aria-current] { color: var(--text); background: var(--fuell); }
.m-punkt > summary:focus-visible, .m-direkt:focus-visible { outline: 2px solid var(--faden); outline-offset: 2px; }

/* Das Blatt: so breit wie die Leiste, haengt unter ihr */
.m-blatt { position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: var(--a4); border-radius: var(--r-gross); background-color: var(--grund); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.m-punkt[open] > .m-blatt { animation: m-auf .4s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 0; }
@keyframes m-auf { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.m-punkt[open] .m-spalte, .m-punkt[open] .m-karten li { animation: m-ein .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
@keyframes m-ein { from { opacity: 0; transform: translateY(14px); } }
.m-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.m-spalte { padding: var(--a3); border-radius: var(--r); background: var(--fuell); }
.m-kopf { display: block; text-decoration: none; color: var(--text); }
.m-kopf strong { display: block; font: 600 var(--t4)/1.15 Clash, sans-serif; letter-spacing: -.015em; }
.m-spalte ul { list-style: none; margin: var(--a2) 0 0; padding: var(--a2) 0 0; border-top: 1px solid var(--linie, rgba(20, 22, 26, .12)); display: grid; gap: 2px; }
.m-spalte li a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a2); padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; font-size: var(--t2); color: var(--text); }
.m-spalte li a small { color: var(--leise); font-size: var(--t1); }
.m-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); }
.m-karten--klein { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-karten a { display: flex; align-items: center; gap: var(--a2); height: 100%; padding: var(--a2) var(--a3); border-radius: var(--r); background: var(--fuell); text-decoration: none; color: var(--text); }
.m-karten .zeichen--gross { margin: 0; }
.m-karten strong { font: 600 var(--t3)/1.2 DM, sans-serif; }
.m-kopf, .m-spalte li a, .m-karten a { transition: background-color .2s, transform .25s ease; }
.m-spalte li a:hover, .m-spalte li a:focus-visible, .m-spalte li a[aria-current] { background: var(--glas-stark); }
.m-karten a:hover, .m-karten a:focus-visible { transform: translateY(-3px); }
.m-karten a[aria-current] { outline: 2px solid var(--faden); }
.m-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); margin: var(--a3) 0 0; font-size: var(--t2); }
.m-fuss a { text-decoration: none; color: var(--text); }
.m-fuss > a { font-weight: 600; }
.m-fuss > span { display: flex; gap: var(--a3); }
.m-fuss > span a { color: var(--leise); }
.m-fuss a:hover { text-decoration: underline; }
/* Im Finale ist die Leiste hell auf Orange; das Blatt bleibt dicht und lesbar */
html.k-ende .m-blatt { --text: #14161A; --leise: #434C5B; background-color: #FFF7F0; }

@media (max-width: 1080px) {
  .m-nav { display: none; }
  /* Vollbild am Handy: Flaeche in der Farbe des Finales, grosse Woerter, unten Telefon und E-Mail.
     Die Leiste hat backdrop-filter und ist damit Bezugsrahmen; deshalb absolut und ueber 100vw aufgezogen. */
  html:has(.mobil[open]) { overflow: hidden; }
  .mobil { position: static; }
  .mobil summary { position: relative; z-index: 2; }
  .mobil[open] summary { background: #14161A; }
  .mobil[open] summary span { background: #FF7120; }
  .mobil-nav { position: absolute; z-index: 1; left: 50%; right: auto; top: -12px; width: 100vw; height: 100dvh; max-height: none; transform: translateX(-50%); overflow: auto; border-radius: 0;
    display: flex; flex-direction: column; gap: var(--a2); padding: 96px var(--a3) var(--a4); background: #FF7120; color: #14161A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobil[open] .mobil-nav { animation: m-kreis .55s cubic-bezier(.3, 0, .2, 1); }
  @keyframes m-kreis { from { clip-path: circle(0 at calc(100% - 46px) 46px); } to { clip-path: circle(150% at calc(100% - 46px) 46px); } }
  .mobil[open] .mobil-nav > div { animation: m-ein .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms + 180ms); }
  .kopf-leiste:has(.mobil[open]) > .kopf-marke { z-index: 0; }
  .mobil-nav { counter-reset: mobil; }
  .mobil-haupt { display: flex; align-items: baseline; }
  .mobil-haupt::before { counter-increment: mobil; content: counter(mobil, decimal-leading-zero); flex: none; min-width: 2.4em; font: 400 13px/1 DM, sans-serif; letter-spacing: .08em; }
  .mobil-haupt { padding: 0; font: 600 clamp(26px, 7.6vw, 40px)/1.08 Clash, sans-serif; letter-spacing: -.02em; color: #14161A; }
  .mobil-unter { padding: 6px 0 0; gap: 4px var(--a2); color: #14161A; font-size: var(--t2); }
  .mobil-unter a { padding: 4px 0; text-decoration: underline; text-decoration-color: rgba(20, 22, 26, .35); text-underline-offset: 3px; }
  .mobil-fuss { margin: auto 0 0; padding-top: var(--a3); display: grid; gap: var(--a1); font-size: var(--t3); }
  .mobil-fuss a { color: #14161A; text-decoration: none; }
  .mobil-fuss .knopf { background: #14161A; color: #fff; justify-content: center; margin: 0 0 var(--a1); }
}
@media (prefers-reduced-motion: reduce) {
  .kopf { transition: none; }
  .m-punkt[open] > .m-blatt, .m-punkt[open] .m-spalte, .m-punkt[open] .m-karten li, .mobil[open] .mobil-nav, .mobil[open] .mobil-nav > div { animation: none; }
}

/* ---- Buehne (11.11.2026, Tim: "und kann man ein innovativeres menü nehmen ?"): das Blatt geht ueber die ganze Breite des Fensters,
   Flaeche in Tinte. Links die Eintraege in grosser Schrift mit Nummer, rechts die Vorschau des Eintrags, auf dem Zeiger oder
   Tastaturfokus steht (kante-menue.js; ohne Skript bleibt die erste Vorschau stehen). Die Leiste selbst bleibt oben lesbar,
   mit vertrauten Punkten und "Anmelden" (Jakobs Gesetz: man findet sich sofort zurecht). ---- */
.kopf-anmelden { padding: var(--a1) 12px; border-radius: 999px; }
.kopf-anmelden:hover, .kopf-anmelden:focus-visible { background: var(--fuell); }
html { overflow-x: clip; }
.kopf-leiste > .kopf-marke, .kopf-leiste > .kopf-anmelden, .kopf-leiste > .knopf, .m-direkt { position: relative; z-index: 2; }
.m-punkt > summary { position: relative; z-index: 2; }
.m-blatt.m-buehne { left: 50%; right: auto; top: -12px; width: 100vw; transform: translateX(-50%); padding: 108px 0 var(--a6); border: 0; border-radius: 0 0 36px 36px; background-color: #14161A; color: #F5F4F0;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .28); z-index: 1; max-height: 100dvh; overflow: auto; }
.m-punkt[open] > .m-blatt.m-buehne { animation: m-buehne .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes m-buehne { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.m-buehne-innen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--a6) var(--a8); align-items: start; }
.m-gross { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a3); }
.m-gross--dicht { gap: 2px; }
.m-gross > li { animation: none; }
.m-punkt[open] .m-gross > li { animation: m-ein .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms + 160ms); }
.m-wort { display: flex; align-items: baseline; gap: .5em; padding: .12em 0; color: #F5F4F0; text-decoration: none; font: 600 clamp(28px, 3.3vw, 52px)/1.08 Clash, sans-serif; letter-spacing: -.025em; transition: color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.m-gross--dicht .m-wort { font-size: clamp(26px, 2.9vw, 44px); }
.m-nr { font: 400 var(--t1)/1 DM, sans-serif; letter-spacing: .08em; color: #8C919C; min-width: 2.2em; }
.m-wort:hover, .m-wort:focus-visible, .m-gross > li.ist-da > .m-wort, .m-wort[aria-current] { color: var(--faden); transform: translateX(10px); }
.m-wort:focus-visible, .m-klein a:focus-visible, .m-buehne .m-fuss a:focus-visible { outline: 2px solid var(--faden); outline-offset: 4px; border-radius: 6px; }
.m-klein { list-style: none; margin: 4px 0 0; padding: 0 0 0 calc(2.2em + .5em * 1); display: flex; flex-wrap: wrap; gap: 4px var(--a3); font-size: var(--t2); }
.m-klein { padding-left: 62px; }
.m-klein a { color: #C9CCD3; text-decoration: none; padding: 4px 0; }
.m-klein a:hover, .m-klein a[aria-current] { color: #F5F4F0; text-decoration: underline; text-underline-offset: 4px; }
.m-vorschau { position: relative; min-height: 300px; border-radius: 26px; background: #1E2127; overflow: hidden; }
.m-vor { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--a2); padding: var(--a4); opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.m-vor.ist-da { opacity: 1; transform: none; }
.m-vor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-vor img + .m-vor-satz { position: relative; padding: var(--a2) var(--a3); margin: 0; border-radius: 16px; background: rgba(20, 22, 26, .82); }
.m-vor .zeichen--gross { width: 72px; height: 72px; padding: 17px; border-radius: 20px; margin: 0 0 auto; }
.m-vor-satz { margin: 0; color: #F5F4F0; font: 600 clamp(18px, 1.6vw, 24px)/1.25 Clash, sans-serif; letter-spacing: -.01em; }
.m-buehne .m-fuss { grid-column: 1 / -1; margin: 0; padding-top: var(--a3); border-top: 1px solid rgba(245, 244, 240, .16); }
.m-buehne .m-fuss a { color: #F5F4F0; }
.m-buehne .m-fuss > span a { color: #C9CCD3; }
/* Ist ein Blatt offen, liegt die Tinte hinter der Leiste: Schrift hell, Logo in der hellen Fassung, Knopf in Fadenfarbe */
.kopf-leiste:has(.m-punkt[open]) { --text: #F5F4F0; --leise: #C9CCD3; --fuell: rgba(245, 244, 240, .12); border-color: transparent; box-shadow: none; }
.kopf-leiste:has(.m-punkt[open]) .kopf-marke img { content: url(/marke/svg/logo-reversed.svg); }
.kopf-leiste:has(.m-punkt[open]) > .knopf { background: var(--faden); color: #14161A; }
.kopf-leiste:has(.m-punkt[open])::after { opacity: 0; }
html.k-ende .m-blatt.m-buehne { background-color: #14161A; --text: #F5F4F0; --leise: #C9CCD3; }
@media (max-width: 1240px) { .kopf-anmelden { display: block; } }
@media (max-width: 1080px) { .kopf-leiste > .kopf-anmelden { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-punkt[open] > .m-blatt.m-buehne, .m-punkt[open] .m-gross > li { animation: none; } .m-vor { transition: none; } }