/* Handy-Menü (bis 860 px), von Lukas abgenommen am 11.10.2026 (Mockup A2, mockups/handy-menue-2026-10-11/):
   rechts im Kopf „Demo buchen“ und ein Menüknopf, der zum Kreuz wird; darunter eine dunkle Karte in der Optik der App,
   die Seite bleibt abgedunkelt sichtbar. Gilt für beide Kopfarten: .kopf (Start, Preise, Gründer) und .nav (Rechtsseiten).
   Schrift und Farben stehen hier ausdrücklich, weil die Rechtsseiten eigene Variablen haben (--display ist dort Bricolage). */
.mk-rechts, .mk-schleier, .mk-karte { display: none; }

@media (max-width: 860px) {
  /* Kopf: Logo links, rechts Demo + Menüknopf; Desktop-Navigation, Sprachauswahl und alter Burger der Rechtsseiten weg */
  .kopf .kopf-innen, .nav .nav__in { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-block: 0; gap: 12px; }
  .nav, .nav.scrolled { padding-block: 0; background: rgba(250, 250, 252, 0.84); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
  .kopf-innen > .kopf-nav, .kopf-innen > .lang-switch, .nav__in > .nav__links, .nav__in > .lang-switch, .nav__in > .burger { display: none; }
  .kopf .logo, .nav .logo { gap: 10px; }
  .kopf .logo svg, .nav .logo svg { width: 32px; height: 28px; }
  .kopf .logo span, .nav .logo { font: 600 22px/1 'Outfit', system-ui, sans-serif; letter-spacing: -0.04em; color: #0D0F16; }

  /* Steht im HTML vor dem Logo (ersetzt das alte Menü an derselben Stelle), darum per order nach rechts */
  .mk-rechts { display: flex; align-items: center; gap: 8px; order: 2; }
  .mk-demo { padding: 9px 14px; border-radius: 10px; background: #0D0F16; color: #fff; font: 500 14.5px 'Outfit', system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
  .mk-knopf { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #D4D7E2; border-radius: 12px; background: #fff; color: #0D0F16; cursor: pointer; }
  .mk-knopf svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .mk-zu-symbol { opacity: 0; transform: rotate(-45deg); }
  .mk-knopf[aria-expanded="true"] .mk-auf-symbol { opacity: 0; transform: rotate(45deg); }
  .mk-knopf[aria-expanded="true"] .mk-zu-symbol { opacity: 1; transform: none; }
  .mk-demo:focus-visible, .mk-knopf:focus-visible { outline: 2px solid #3B38F5; outline-offset: 3px; }

  /* Offen: Seite steht still, Kopf wird deckend (sonst grauen ihn Schleier und Durchsicht mit) und liegt über dem Schleier */
  html.menue-offen { overflow: hidden; }
  html.menue-offen .kopf, html.menue-offen .nav { background: #FAFAFC; }
  html.menue-offen .kopf { z-index: 96; }
  .mk-schleier { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(13, 15, 22, 0.34); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s; }
  .mk-schleier.ist-offen { opacity: 1; visibility: visible; transition: opacity 0.25s; }

  /* top/max-height setzt handy-menue.js aus der echten Kopfhöhe; 73 px = 64 px Kopf + 1 px Rand + 8 px Abstand */
  .mk-karte { display: block; position: fixed; top: 73px; left: 8px; right: 8px; z-index: 95; max-height: calc(100dvh - 89px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 16px; border-radius: 24px; color: #fff;
    background: radial-gradient(ellipse at 100% -10%, rgba(122, 92, 255, 0.5), transparent 58%), radial-gradient(ellipse at -20% 120%, rgba(59, 56, 245, 0.45), transparent 62%), #0D0F16;
    box-shadow: 0 0 0 1px rgba(13, 15, 22, 0.08), 0 30px 70px -20px rgba(13, 15, 22, 0.55);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right;
    transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
  .mk-karte.ist-offen { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
  .mk-karte:focus { outline: none; }

  .mk-seiten { display: grid; gap: 2px; }
  .mk-seiten a { display: block; padding: 14px; border-radius: 14px; font: 500 18px/1.25 'Outfit', system-ui, sans-serif; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
  .mk-seiten a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: #B9B0FF; }
  /* Sprache als stille letzte Zeile: ein Tipp wechselt in die andere Sprache (DE/EN-Schalter wirkte fehl am Platz) */
  .mk-seiten a.mk-sprache { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 16px; font-weight: 400; color: #C4C8D5; }
  .mk-sprache svg { flex: none; width: 18px; height: 18px; color: #B9B0FF; }

  .mk-aktionen { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 10px; padding: 14px 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .mk-login, .mk-demo-gross { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 11px; font: 500 15px 'Outfit', system-ui, sans-serif; text-decoration: none; }
  .mk-login { background: rgba(255, 255, 255, 0.08); color: #E9E7FF; }
  .mk-demo-gross { background: #fff; color: #0D0F16; font-weight: 600; }
  .mk-karte a:focus-visible { outline: 2px solid #B9B0FF; outline-offset: 2px; }
}

@media (max-width: 374px) {
  .kopf .logo, .nav .logo { gap: 8px; }
  .kopf .logo svg, .nav .logo svg { width: 28px; height: 25px; }
  .kopf .logo span, .nav .logo { font-size: 20px; }
  .mk-demo { padding: 9px 11px; font-size: 14px; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .mk-karte, .mk-karte.ist-offen, .mk-schleier, .mk-schleier.ist-offen, .mk-knopf svg { transition: none; }
}