/* Handy-Menü als Rolltor (26.10.2026, Micha: „wenn man auf dem Handy das Burger-Menü aufklappt, soll es richtig geil
   animiert sein“). Aufbau aus store.js (buildMenu): nav.mobile-nav > m-tor (das Tor, darin m-foto) + m-liste (Einträge,
   darin m-schlitz > m-wort mit dem Text, dazu die Nummer als span, unten m-tag mit dem Graffiti und m-fuss).
   Seit 27.10.2026 ist das Tor ein Plakat nach Michas Vorlage: Arc'teryx-Foto in Schwarzweiß mit Korn und gerissenem Rand,
   Nummern über den Wörtern in schmaler Plakatschrift (Anton), „Shop“ auf einem gerissenen Zettel mit Pfeil, „BETTER
   STORIES.“ nur noch einmal (die Tropfen hängen frei, ein Hauch Sprühnebel), unten Fußzeile mit Socials. Das Plakat
   bleibt auch im hellen Modus dunkel.
   Auf: Seite dunkelt ab, Tor fällt aus der Kopfzeile und federt zweimal am Boden nach, das Foto setzt sich, Einträge steigen
   aus ihren Schlitzen, Linien ziehen sich von links, Nummern klappern (store.js), das Graffiti wird aufgesprüht und läuft.
   Zu (.is-zu): Graffiti und Einträge von unten nach oben weg, dann rollt das Tor hoch.
   Nur transform und opacity am großen Tor (das iPhone malt nichts neu), clip-path nur am kleinen Graffiti.
   Eigene Tags statt span, damit ältere Regeln wie „.mobile-nav a span“ nicht greifen. Wird nach handy.css geladen. */

@font-face { font-family: "Anton Menue"; src: url("assets/fonts/anton-menue.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }

@media (max-width: 680px) {
  /* Die Seite darunter steht still, solange das Tor unten ist. */
  html.menue-offen { overflow: hidden; }

  /* ---------- Rahmen: füllt alles unter der Kopfzeile, malt selbst nichts, schneidet das Tor oben ab ---------- */
  html:root .mobile-nav:not([hidden]) {
    position: absolute; top: 100%; right: 0; left: 0; display: block; height: var(--menue-h, calc(100dvh - 54px)); max-height: none;
    padding: 0; overflow: hidden; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    --menue-papier: #f1f1ec; --menue-tinte: #0b0b0b; --menue-rand: clamp(22px, 10vw, 40px);
  }
  /* Schleier über der Seite, solange das Tor noch fällt */
  .mobile-nav::before { position: absolute; inset: 0; background: rgba(4, 4, 4, .72); content: ""; }

  /* ---------- Das Plakat: Foto rechts, links dunkel für die Schrift, Korn drüber, Ränder gerissen ---------- */
  m-tor { position: absolute; inset: 0; display: block; isolation: isolate; overflow: hidden; background: #070707; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
  /* Das Foto ist eineinhalbmal so breit wie das Handy: Kapuze und Brille oben rechts neben den Wörtern, das Logo auf der
     Brust bleibt frei zwischen den Einträgen und dem Graffiti. Die Höhe folgt der Breite (margin-top in % = Breite). */
  m-foto {
    position: absolute; top: 0; left: -7%; display: block; width: 150%; aspect-ratio: 3 / 4; margin-top: calc(34px - 45%);
    background: url("assets/menue/wolkengrat.webp") 50% 0 / cover no-repeat; transform-origin: 60% 30%;
  }
  /* Unten läuft das Foto ins Schwarz aus, darunter stehen Graffiti und Fußzeile */
  m-foto::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, #070707 96%); content: ""; }
  m-tor::before {
    position: absolute; z-index: 1; inset: 0; content: "";
    background:
      url("assets/menue/rand-links.svg") 0 0 / 14px 520px repeat-y,
      url("assets/menue/rand-rechts.svg") 100% 0 / 14px 520px repeat-y,
      linear-gradient(180deg, rgba(7, 7, 7, .8), rgba(7, 7, 7, 0) 24%),
      linear-gradient(90deg, rgba(7, 7, 7, .84), rgba(7, 7, 7, .5) 34%, rgba(7, 7, 7, .12) 62%, rgba(7, 7, 7, 0) 82%);
  }
  m-tor::after { position: absolute; z-index: 2; inset: 0; background: url("assets/menue/korn.webp") 0 0 / 192px 192px; content: ""; mix-blend-mode: overlay; opacity: .7; }

  /* ---------- Einträge: Nummer klein darüber, Wort groß und schmal, kurze Linie darunter ---------- */
  m-liste {
    position: relative; display: flex; height: 100%; flex-direction: column;
    padding: clamp(6px, 1.6vh, 16px) var(--menue-rand) calc(6px + env(safe-area-inset-bottom));
    overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html .mobile-nav m-liste > :is(a, button) {
    position: relative; isolation: isolate; display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: clamp(3px, .9vh, 8px);
    padding: clamp(8px, 1.8vh, 15px) 0 clamp(9px, 2vh, 16px); border: 0; color: var(--menue-papier); background: none;
    font: 400 min(12.4vw, 6.3vh, 54px)/1 "Anton Menue", Impact, "Futura-CondensedExtraBold", var(--display); letter-spacing: .004em; text-align: left; text-transform: uppercase;
    font-synthesis: none; -webkit-tap-highlight-color: transparent;
  }
  /* kopfzeile.css macht „Shop“ fett; Anton hat nur einen Schnitt, der Browser würde ihn künstlich verdicken */
  html .mobile-nav m-liste > a[href="/shop"] { font-weight: 400; }
  /* Kurze Linie unter jedem Eintrag (das Foto rechts bleibt frei), zieht sich beim Öffnen von links */
  html .mobile-nav m-liste > :is(a, button)::after {
    position: absolute; bottom: 0; left: 0; width: 63%; height: 1px; background: rgba(241, 241, 236, .2); content: ""; transform-origin: 0 50%;
  }
  /* Platz über den Großbuchstaben für Umlaute, unten für den Schwanz des Q */
  m-schlitz { display: block; min-width: 0; margin: -.17em 0 -.07em; padding: .17em 0 .07em; overflow: hidden; }
  /* Drehpunkt links unten: Beim Aufsteigen hängt die rechte Seite tiefer, links lugt nichts vorzeitig aus dem Schlitz */
  m-wort { display: block; overflow-wrap: anywhere; transform-origin: 0 100%; }
  html .mobile-nav m-liste > a > span { order: -1; flex: none; margin: 0; color: rgba(241, 241, 236, .48); font: 11px/1 var(--mono); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
  /* „Suche öffnen“ ist eine Handlung, kein Ziel: kleiner, in Schreibmaschine, Pfeil daneben */
  html .mobile-nav m-liste > button.mobile-search { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 18px 0; font: 11px/1.2 var(--mono); letter-spacing: .12em; }
  html .mobile-nav m-liste > button.mobile-search > span { color: rgba(241, 241, 236, .48); font: 13px/1 var(--mono); }
  /* Der Sprachschalter steht seit 04.11.2026 hier statt in der Kopfzeile (handy.css): rechts in der Zeile von „Suche öffnen“,
     so bleibt er ohne Rollen sichtbar und das Menü wird nicht höher (ganz unten lag er auf dem iPhone unter der Kante).
     „.mobile-nav button“ in styles.css gäbe den Knöpfen sonst Linie und Abstand der Einträge. Hier ist Platz für die Flaggen. */
  html .mobile-nav m-liste > .language-switch { flex: none; align-self: flex-end; margin-top: -47px; border-color: rgba(241, 241, 236, .28); background: rgba(7, 7, 7, .55); }
  html .mobile-nav .sprache-pille { background: var(--menue-papier); }
  html .mobile-nav .language-choice { min-width: 58px; min-height: 40px; justify-content: center; gap: 6px; padding: 3px 7px; border: 0; color: rgba(241, 241, 236, .72); font: 11px/1 var(--mono); letter-spacing: .08em; }
  html .mobile-nav .language-choice.is-active { color: var(--menue-tinte); }
  html .mobile-nav m-liste .language-choice > .flagge { display: inline-flex; }
  /* „Shop“ sticht heraus (27.10.2026, Micha): Das Wort steht auf einem gerissenen Zettel in Gegenfarbe, leicht schief
     aufgeklebt, rechts der Pfeil. Links ragt der Zettel in den Rand, damit das Wort mit den anderen Einträgen fluchtet. */
  html .mobile-nav m-liste > a[href="/shop"] m-schlitz {
    display: flex; align-items: center; justify-content: space-between; gap: .5em; min-width: 3.5em;
    margin: .02em 0 .02em -.2em; padding: .22em .3em .18em .2em; color: var(--menue-tinte);
    background: linear-gradient(104deg, #f5f5f0, #e4e4dd) 0 0 / 100% 100% no-repeat; transform: rotate(-2.2deg); transform-origin: 0 100%;
    clip-path: polygon(1.2% 4%, 17% 1.4%, 44% 3.2%, 70% .6%, 99.2% 2.6%, 98% 15%, 99.8% 28%, 98.4% 42%, 99.6% 57%, 97.8% 71%, 99.4% 85%, 98.6% 98.4%, 76% 96.6%, 50% 99.4%, 24% 97%, .6% 99%, 1.8% 86%, 0 72%, 1.5% 58%, .2% 44%, 2% 30%, .5% 17%);
  }
  .m-pfeil { flex: none; width: .44em; height: .44em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; }

  /* Antippen: der Eintrag läuft voll, die Schrift dreht in die Gegenfarbe */
  html .mobile-nav m-liste > a::before {
    position: absolute; z-index: -1; inset: 2px calc(var(--menue-rand) * -1) 0; background: var(--menue-papier); content: ""; transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .2s cubic-bezier(.7, 0, .2, 1);
  }
  html .mobile-nav m-liste > a.is-gewaehlt::before { transform: scaleX(1); }
  html .mobile-nav m-liste > a.is-gewaehlt, html .mobile-nav m-liste > a.is-gewaehlt > span { color: var(--menue-tinte); transition: color .12s .06s; }
  html .mobile-nav m-liste > a:active m-wort { translate: 6px 0; transition: translate .12s; }

  /* ---------- Graffiti unten aufs Plakat ---------- */
  /* Zeilenabstand 1: Die Tropfen von BETTER hängen frei über STORIES., statt hineinzulaufen. Der weiche Schein ist der
     Sprühnebel um die Farbe. */
  m-tag {
    display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding: clamp(14px, 3vh, 28px) 0 0 2px;
    color: #f3f3ee; font: min(15.6vw, 8.2vh, 68px)/1 "Rubik Wet Paint", Impact, var(--display); letter-spacing: -.005em;
    text-shadow: 0 0 .04em rgba(255, 255, 255, .45), 0 0 .24em rgba(236, 238, 234, .2);
    transform: rotate(-6deg); transform-origin: 0 100%; pointer-events: none; user-select: none; -webkit-user-select: none;
  }
  /* Die Maske ist doppelt so breit wie die Zeile mit weichem Übergang in der Mitte: so hat der Sprühstoß einen Nebelrand
     statt einer harten Kante. In Ruhe steht sie ganz links, die Zeile ist voll sichtbar. Der Innenabstand von .3em hält
     den Sprühnebel in der Maske (sonst schneidet sie ihn als helles Rechteck ab), der Außenabstand gleicht ihn aus. */
  m-zeile {
    display: block; margin: -.3em; padding: .3em;
    -webkit-mask: linear-gradient(90deg, #000 38%, transparent 62%) 0 0 / 260% 100% no-repeat;
    mask: linear-gradient(90deg, #000 38%, transparent 62%) 0 0 / 260% 100% no-repeat;
  }
  m-zeile:last-child { margin-top: -.3em; margin-left: .2em; }

  /* ---------- Fußzeile ---------- */
  m-fuss {
    display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(4px, 1.4vh, 14px);
    color: rgba(241, 241, 236, .5); font: 10px/1.2 var(--mono); letter-spacing: .2em; white-space: nowrap;
  }
  /* „html .mobile-nav“ schlägt die alte Regel für Menülinks in styles.css (Linie unten, Abstand, Farbe aus dem Modus) */
  html .mobile-nav m-fuss a {
    display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0; border: 0; color: rgba(241, 241, 236, .78);
    font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent;
  }
  m-fuss svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
  html .mobile-nav m-fuss a:active { color: var(--menue-papier); }
  /* Auf niedrigen Bildschirmen (Handy quer) bleibt das Tor ohne Graffiti, die Einträge haben Vorrang */
  @media (max-height: 560px) { m-tag { display: none; } m-fuss { margin-top: auto; } }

  /* ---------- Burger zum Kreuz: erst zusammenziehen, dann über das Ziel hinaus drehen und einrasten ---------- */
  html .menu-toggle span { transition: none; }
  .menu-toggle.hat-gedreht[aria-expanded="true"] span:first-child { animation: burger-oben-zu .5s both; }
  .menu-toggle.hat-gedreht[aria-expanded="true"] span:last-child { animation: burger-unten-zu .5s both; }
  .menu-toggle.hat-gedreht[aria-expanded="false"] span:first-child { animation: burger-oben-auf .42s both; }
  .menu-toggle.hat-gedreht[aria-expanded="false"] span:last-child { animation: burger-unten-auf .42s both; }

  /* ---------- Auf ---------- */
  .mobile-nav:not([hidden]):not(.is-zu)::before { animation: menue-schleier .32s ease both; }
  .mobile-nav:not([hidden]):not(.is-zu) m-tor { animation: tor-runter .78s both; }
  /* Das Foto kommt etwas größer mit und setzt sich, während das Tor nachfedert */
  .mobile-nav:not([hidden]):not(.is-zu) m-foto { animation: foto-setzt 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .mobile-nav:not([hidden]):not(.is-zu) m-wort { animation: eintrag-steigt .62s cubic-bezier(.2, .9, .25, 1) calc(.3s + var(--n) * 70ms) both; }
  .mobile-nav:not([hidden]):not(.is-zu) m-liste > :is(a, button)::after { animation: linie-zieht .7s cubic-bezier(.65, 0, .25, 1) calc(.34s + var(--n) * 70ms) both; }
  .mobile-nav:not([hidden]):not(.is-zu) m-liste > :is(a, button) > span { animation: nummer-da .2s ease calc(.3s + var(--n) * 70ms) both; }
  /* Shop-Zettel: streicht sich von links auf, das Wort steigt darin hoch, dann kippt der Zettel mit kleinem Nachschwingen
     und der Pfeil zeigt hinaus */
  .mobile-nav:not([hidden]):not(.is-zu) m-liste > a[href="/shop"] m-schlitz { animation: schild-streicht .36s cubic-bezier(.65, 0, .25, 1) calc(.24s + var(--n) * 70ms) both, schild-kippt .5s cubic-bezier(.3, 1.8, .5, 1) calc(.66s + var(--n) * 70ms) both; }
  .mobile-nav:not([hidden]):not(.is-zu) .m-pfeil { animation: pfeil-zeigt .42s cubic-bezier(.2, .9, .25, 1) calc(.62s + var(--n) * 70ms) both; }
  /* Sprühen bewegt nur die Maske, Laufen nur den Schnitt unter den Buchstaben: so können beide „both“ füllen */
  .mobile-nav:not([hidden]):not(.is-zu) m-zeile { animation: tag-spruehen .5s cubic-bezier(.45, 0, .55, 1) calc(.62s + var(--eintraege) * 70ms) both, tag-laeuft 1.3s cubic-bezier(.3, .55, .4, 1) calc(1.1s + var(--eintraege) * 70ms) both; }
  .mobile-nav:not([hidden]):not(.is-zu) m-zeile:last-child { animation-delay: calc(.9s + var(--eintraege) * 70ms), calc(1.34s + var(--eintraege) * 70ms); }
  .mobile-nav:not([hidden]):not(.is-zu) m-fuss { animation: nummer-da .4s ease calc(.7s + var(--eintraege) * 70ms) both; }
  .mobile-nav:not([hidden]):not(.is-zu) .language-switch { animation: nummer-da .3s ease calc(.3s + var(--eintraege) * 70ms) both; }

  /* ---------- Zu ---------- */
  .mobile-nav.is-zu::before { animation: menue-schleier .3s ease .26s reverse both; }
  .mobile-nav.is-zu m-tor { animation: tor-hoch .44s cubic-bezier(.7, 0, .3, 1) .14s both; }
  .mobile-nav.is-zu m-wort { animation: eintrag-geht .24s cubic-bezier(.6, 0, .8, .4) calc(var(--rueck) * 28ms) both; }
  .mobile-nav.is-zu m-wort[data-zurueck] { animation-name: eintrag-zurueck; }
  .mobile-nav.is-zu m-liste > :is(a, button)::after { animation: linie-geht .24s cubic-bezier(.6, 0, .8, .4) calc(var(--rueck) * 28ms) both; }
  .mobile-nav.is-zu m-liste > :is(a, button) > span { animation: nummer-da .14s ease reverse both; }
  .mobile-nav.is-zu m-liste > a[href="/shop"] m-schlitz { animation: schild-weg .22s cubic-bezier(.6, 0, .8, .4) calc(60ms + var(--rueck) * 28ms) both; }
  .mobile-nav.is-zu .m-pfeil { animation: tag-weg .12s ease both; }
  .mobile-nav.is-zu :is(m-tag, m-fuss, .language-switch) { animation: tag-weg .16s ease both; }
  .mobile-nav.is-zu m-liste > a.is-gewaehlt::before { transform: scaleX(1); transform-origin: 100% 50%; animation: linie-geht .26s cubic-bezier(.6, 0, .8, .4) both; }

  @keyframes menue-schleier { from { opacity: 0; } }
  /* Fällt schwer, schlägt auf, federt zweimal nach */
  @keyframes tor-runter {
    0% { transform: translateY(-100%); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
    52% { transform: translateY(0); animation-timing-function: cubic-bezier(.15, .6, .4, 1); }
    66% { transform: translateY(-16px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    79% { transform: translateY(0); animation-timing-function: cubic-bezier(.15, .6, .4, 1); }
    88% { transform: translateY(-4px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    100% { transform: translateY(0); }
  }
  @keyframes tor-hoch { to { transform: translateY(-100%); } }
  @keyframes foto-setzt { from { transform: scale(1.09) translateY(-1.5%); } }
  @keyframes eintrag-steigt { from { transform: translateY(125%) skewY(7deg); } }
  @keyframes eintrag-geht { to { transform: translateY(-125%); } }
  @keyframes eintrag-zurueck { to { transform: translateY(125%) skewY(7deg); } }
  @keyframes linie-zieht { from { transform: scaleX(0); } }
  @keyframes linie-geht { to { transform: scaleX(0); } }
  @keyframes nummer-da { from { opacity: 0; } }
  @keyframes schild-streicht { from { background-size: 0% 100%; } }
  @keyframes schild-kippt { from { transform: rotate(0); } }
  @keyframes schild-weg { to { background-size: 0% 100%; } }
  @keyframes pfeil-zeigt { from { opacity: 0; transform: translate(-.3em, .3em); } }
  /* Erst die Buchstaben ohne Tropfen von links nach rechts, dann laufen die Tropfen nach unten aus. Der Schnitt steht
     anfangs knapp unter der Grundlinie (27 % der Zeile mit ihrem Innenabstand), die Tropfen reichen .24em darunter. */
  @keyframes tag-spruehen { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
  @keyframes tag-laeuft { from { clip-path: inset(-10% -10% 27% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
  @keyframes tag-weg { to { opacity: 0; } }
  @keyframes burger-oben-zu {
    0% { transform: translateY(-4px); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    38% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
    100% { transform: translateY(0) rotate(45deg); }
  }
  @keyframes burger-unten-zu {
    0% { transform: translateY(4px); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    38% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
    100% { transform: translateY(0) rotate(-45deg); }
  }
  @keyframes burger-oben-auf {
    0% { transform: translateY(0) rotate(45deg); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    45% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
    100% { transform: translateY(-4px) rotate(0); }
  }
  @keyframes burger-unten-auf {
    0% { transform: translateY(0) rotate(-45deg); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    45% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
    100% { transform: translateY(4px) rotate(0); }
  }

  /* ---------- Heller Modus: nur der Schleier ist hell, das Plakat bleibt dunkel ---------- */
  :root[data-theme="light"] .mobile-nav::before { background: rgba(239, 238, 233, .82); }
}

/* Weniger Bewegung: Menü geht ohne Fahrt auf und zu, das Graffiti steht gleich da. */
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .mobile-nav::before, .mobile-nav *, .mobile-nav *::before, .mobile-nav *::after, .menu-toggle span { animation: none !important; transition: none !important; }
}

/* Bei offenem Menü hat der schwebende „SHOP ANSEHEN“-Knopf (shop-eingang.js) nichts darüber verloren (27.10.2026, Micha:
   „das darf nicht sein“). Gilt für jede Breite, in der das Menü aufgeht (store.js setzt html.menue-offen). */
html.menue-offen .shop-schwebe.is-sichtbar { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s .2s; }