/*
 * langify Design-System – gemeinsame Tokens und Komponenten für ly-poker, Pro und Booster.
 * Vorbild ist die langify-App (MUI-Theme in v2.langify/src/theme.js), Polaris-nah.
 * Eine Datei, keine Abhängigkeiten. Alles trägt das Präfix "ly-".
 *
 * Dark Mode: folgt dem System (prefers-color-scheme), lässt sich aber per
 * <html data-theme="light"> bzw. <html data-theme="dark"> festlegen.
 */

/* ---------- Tokens (hell) ---------- */
:root {
  color-scheme: light;

  /* Marke */
  --ly-primary: #3a20cd;
  --ly-primary-hover: #2a1790;
  --ly-primary-soft: #ece9fb;
  --ly-on-primary: #fff;
  --ly-secondary: #5c6bc0;
  --ly-accent: #9f2ccc;
  --ly-gold: #ffab00;
  --ly-gold-soft: #fff4d6;
  --ly-gold-text: #9f6000; /* dunkles Amber, lesbar auf hellem Grund */

  /* Flächen und Text */
  --ly-bg: #f4f5fa;
  --ly-surface: #fff;
  --ly-surface-2: #f8f8fc;
  --ly-border: #e1e3ec;
  --ly-border-strong: rgba(0, 0, 0, .23); /* Rahmen von Eingabefeldern (MUI outlined) */
  --ly-text: rgba(0, 0, 0, .87);
  --ly-text-2: rgba(0, 0, 0, .6);
  --ly-disabled-bg: rgba(0, 0, 0, .12);
  --ly-disabled-text: rgba(0, 0, 0, .38);
  --ly-inverse: #323232; /* Snackbar/Toast */
  --ly-on-inverse: #fff;
  --ly-backdrop: rgba(0, 0, 0, .5);

  /* Status */
  --ly-success: #2e7d32;
  --ly-warning: #ed6c02;
  --ly-error: #d32f2f;
  --ly-success-soft: #edf7ed;
  --ly-warning-soft: #fff4e5;
  --ly-error-soft: #fdeded;
  --ly-warning-text: #9f6000;

  /* Form */
  --ly-radius: 8px;
  --ly-radius-lg: 12px;
  --ly-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
  --ly-shadow-lg: 0 12px 32px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);

  /* Abstände */
  --ly-s1: 4px;
  --ly-s2: 8px;
  --ly-s3: 12px;
  --ly-s4: 16px;
  --ly-s5: 24px;
  --ly-s6: 32px;

  /* Schrift */
  --ly-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ly-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Spielkarten (gleich in hell und dunkel: ein Blatt bleibt weiß) */
  --ly-card-paper: #fff;
  --ly-card-black: #1a1a1f;
  --ly-card-red: #d32f2f;
  --ly-card-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 6px 14px rgba(16, 24, 40, .14);
  --ly-card-back: linear-gradient(145deg, #3a20cd, #9f2ccc);
  --ly-joker-common: linear-gradient(160deg, #6a50e0, #3a20cd 55%, #2a1790);
  --ly-joker-common-glow: rgba(58, 32, 205, .55);
  --ly-joker-rare: linear-gradient(160deg, #ffd666, #ffab00 55%, #b37400);
  --ly-joker-rare-text: #2b1a00;
  --ly-joker-rare-glow: rgba(255, 171, 0, .7);
}

/* ---------- Tokens (dunkel) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ly-bg: #121212;
    --ly-surface: #1e1e1e;
    --ly-surface-2: #252525;
    --ly-border: #333;
    --ly-border-strong: rgba(255, 255, 255, .23);
    --ly-text: rgba(255, 255, 255, .87);
    --ly-text-2: rgba(255, 255, 255, .6);
    --ly-primary: #8b74f0;
    --ly-on-primary: #14102e; /* dunkle Schrift auf hellem Violett: 5,1:1 */
    --ly-primary-hover: #a594f5;
    --ly-primary-soft: rgba(139, 116, 240, .16);
    --ly-gold-soft: rgba(255, 171, 0, .14);
    --ly-gold-text: #ffc94d;
    --ly-disabled-bg: rgba(255, 255, 255, .12);
    --ly-disabled-text: rgba(255, 255, 255, .38);
    --ly-inverse: #f5f5f5;
    --ly-on-inverse: rgba(0, 0, 0, .87);
    --ly-backdrop: rgba(0, 0, 0, .7);
    /* Statusfarben aufgehellt (MUI-Dark-Defaults), sonst zu wenig Kontrast auf dunklem Grund */
    --ly-success: #66bb6a;
    --ly-warning: #ffa726;
    --ly-error: #f44336;
    --ly-success-soft: rgba(102, 187, 106, .14);
    --ly-warning-soft: rgba(255, 167, 38, .14);
    --ly-error-soft: rgba(244, 67, 54, .14);
    --ly-warning-text: #ffb74d;
    --ly-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
    --ly-shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ly-bg: #121212;
  --ly-surface: #1e1e1e;
  --ly-surface-2: #252525;
  --ly-border: #333;
  --ly-border-strong: rgba(255, 255, 255, .23);
  --ly-text: rgba(255, 255, 255, .87);
  --ly-text-2: rgba(255, 255, 255, .6);
  --ly-primary: #8b74f0;
  --ly-on-primary: #14102e; /* dunkle Schrift auf hellem Violett: 5,1:1 */
  --ly-primary-hover: #a594f5;
  --ly-primary-soft: rgba(139, 116, 240, .16);
  --ly-gold-soft: rgba(255, 171, 0, .14);
  --ly-gold-text: #ffc94d;
  --ly-disabled-bg: rgba(255, 255, 255, .12);
  --ly-disabled-text: rgba(255, 255, 255, .38);
  --ly-inverse: #f5f5f5;
  --ly-on-inverse: rgba(0, 0, 0, .87);
  --ly-backdrop: rgba(0, 0, 0, .7);
  --ly-success: #66bb6a;
  --ly-warning: #ffa726;
  --ly-error: #f44336;
  --ly-success-soft: rgba(102, 187, 106, .14);
  --ly-warning-soft: rgba(255, 167, 38, .14);
  --ly-error-soft: rgba(244, 67, 54, .14);
  --ly-warning-text: #ffb74d;
  --ly-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  --ly-shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------- Seite ---------- */
/* auf <body class="ly-page">: Grundfarbe, Schrift, Text */
.ly-page {
  margin: 0;
  background: var(--ly-bg);
  color: var(--ly-text);
  font-family: var(--ly-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Fokus: 2px Outline in primary mit 2px Abstand (geringe Spezifität, Komponenten dürfen überschreiben) */
:where(.ly-page) :where(a, button, select, summary, [tabindex]):focus-visible,
:where(.ly-btn, .ly-select, .ly-badge, .ly-card):focus-visible {
  outline: 2px solid var(--ly-primary);
  outline-offset: 2px;
}

/* ---------- Topbar ---------- */
/* Logo + Titel links, Sprache/Sound rechts */
.ly-topbar {
  --ly-topbar-max: 1280px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ly-s3); flex-wrap: wrap;
  min-height: 56px; box-sizing: border-box;
  padding: var(--ly-s2) max(var(--ly-s4), calc((100% - var(--ly-topbar-max)) / 2 + var(--ly-s4)));
  background: var(--ly-surface); border-bottom: 1px solid var(--ly-border); color: var(--ly-text);
}
.ly-topbar__brand {
  display: flex; align-items: center; gap: var(--ly-s2);
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.ly-topbar__title { color: var(--ly-primary); }
/* Logo über eine Maske, damit es die primary-Farbe des Modus annimmt */
.ly-topbar__logo {
  width: 26px; height: 24px; flex: none; background: var(--ly-primary);
  -webkit-mask: url("../img/langify-icon.svg") center / contain no-repeat;
  mask: url("../img/langify-icon.svg") center / contain no-repeat;
}
.ly-topbar__actions { display: flex; align-items: center; gap: var(--ly-s2); }

/* ---------- Karte (Fläche) ---------- */
.ly-card {
  background: var(--ly-surface); border: 1px solid var(--ly-border); border-radius: var(--ly-radius-lg);
  box-shadow: var(--ly-shadow); padding: var(--ly-s5); color: var(--ly-text); box-sizing: border-box;
}

/* ---------- Buttons ---------- */
.ly-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ly-s2);
  min-height: 36px; padding: 6px 16px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--ly-radius);
  background: var(--ly-primary); color: var(--ly-on-primary);
  font-family: var(--ly-font); font-size: 14px; font-weight: 500; line-height: 1.43;
  letter-spacing: .01em; text-transform: none; text-decoration: none; text-align: center;
  cursor: pointer; box-shadow: var(--ly-shadow);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ly-btn:hover { background: var(--ly-primary-hover); }
.ly-btn:active { box-shadow: none; }
.ly-btn:disabled, .ly-btn[aria-disabled="true"] {
  background: var(--ly-disabled-bg); color: var(--ly-disabled-text); box-shadow: none; cursor: not-allowed;
}
/* outlined */
.ly-btn--secondary {
  background: transparent; color: var(--ly-primary); border-color: var(--ly-primary); box-shadow: none;
}
.ly-btn--secondary:hover { background: var(--ly-primary-soft); }
.ly-btn--secondary:disabled, .ly-btn--secondary[aria-disabled="true"] {
  background: transparent; border-color: var(--ly-disabled-bg);
}
/* nur Text */
.ly-btn--text {
  background: transparent; color: var(--ly-primary); box-shadow: none; padding-inline: var(--ly-s2);
}
.ly-btn--text:hover { background: var(--ly-primary-soft); }
.ly-btn--text:disabled, .ly-btn--text[aria-disabled="true"] { background: transparent; }

/* ---------- Eingabefelder ---------- */
.ly-field { display: grid; gap: var(--ly-s1); }
.ly-field > label, .ly-field__label { font-size: 14px; font-weight: 500; color: var(--ly-text); }
.ly-field input, .ly-field textarea, .ly-input {
  box-sizing: border-box; min-width: 0; min-height: 36px; padding: 6px 12px;
  font-family: var(--ly-font); font-size: 15px; color: var(--ly-text);
  background: var(--ly-surface); border: 1px solid var(--ly-border-strong); border-radius: var(--ly-radius);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.ly-field input::placeholder, .ly-input::placeholder { color: var(--ly-text-2); opacity: 1; }
.ly-field input:hover, .ly-input:hover { border-color: var(--ly-text); }
/* Fokus: Rahmen in primary, 2px stark (1px Rahmen + 1px Schatten, ohne Springen) */
.ly-field input:focus, .ly-field textarea:focus, .ly-input:focus {
  border-color: var(--ly-primary); box-shadow: 0 0 0 1px var(--ly-primary);
}
.ly-field__help { font-size: 13px; color: var(--ly-text-2); }

/* Auswahlfeld, z. B. Sprache in der Topbar */
.ly-select {
  box-sizing: border-box; min-height: 36px; padding: 6px 32px 6px 12px;
  font-family: var(--ly-font); font-size: 14px; color: var(--ly-text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--ly-border-strong); border-radius: var(--ly-radius);
  background: var(--ly-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.ly-select:hover { border-color: var(--ly-text); }
.ly-select option { background: var(--ly-surface); color: var(--ly-text); }

/* ---------- Schritt-Hinweis ---------- */
/* <div class="ly-hint"><span class="ly-hint__icon">1</span><div>Text</div></div> */
.ly-hint {
  display: flex; align-items: flex-start; gap: var(--ly-s3);
  padding: var(--ly-s3) var(--ly-s4); border-radius: var(--ly-radius);
  background: var(--ly-primary-soft); color: var(--ly-text); font-size: 14px; line-height: 1.5;
}
.ly-hint__icon {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ly-primary); color: var(--ly-on-primary); font-size: 12px; font-weight: 600; line-height: 1;
}

/* ---------- Banner ---------- */
.ly-banner {
  --_edge: var(--ly-primary); --_bg: var(--ly-primary-soft);
  display: flex; align-items: flex-start; gap: var(--ly-s3);
  padding: var(--ly-s3) var(--ly-s4); border-radius: var(--ly-radius);
  border-left: 4px solid var(--_edge); background: var(--_bg); color: var(--ly-text); font-size: 14px; line-height: 1.5;
}
.ly-banner--info { --_edge: var(--ly-primary); --_bg: var(--ly-primary-soft); }
.ly-banner--success { --_edge: var(--ly-success); --_bg: var(--ly-success-soft); }
.ly-banner--warning { --_edge: var(--ly-warning); --_bg: var(--ly-warning-soft); }
.ly-banner--critical { --_edge: var(--ly-error); --_bg: var(--ly-error-soft); }
.ly-banner > :first-child { margin-top: 0; }
.ly-banner > :last-child { margin-bottom: 0; }

/* ---------- Badge ---------- */
.ly-badge {
  display: inline-flex; align-items: center; gap: var(--ly-s1); box-sizing: border-box;
  min-height: 22px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--ly-surface-2); border: 1px solid var(--ly-border); color: var(--ly-text-2);
  font-family: var(--ly-font); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .02em;
}
/* TESTMODE */
.ly-badge--test { background: var(--ly-warning-soft); border-color: var(--ly-warning); color: var(--ly-warning-text); font-weight: 600; }

/* ---------- Schrittanzeige 1-2-3 ---------- */
/* <ol class="ly-steps"><li class="ly-steps__item ly-steps__item--done">…</li><li class="ly-steps__item" aria-current="step">…</li>… */
.ly-steps {
  display: flex; align-items: center; gap: var(--ly-s2); margin: 0; padding: 0; list-style: none; counter-reset: ly-step;
}
.ly-steps__item {
  counter-increment: ly-step; display: flex; align-items: center; gap: var(--ly-s2); flex: 1 1 auto; min-width: 0;
  font-size: 14px; color: var(--ly-text-2);
}
.ly-steps__item::before {
  content: counter(ly-step); flex: none; display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box;
  border-radius: 50%; border: 1px solid var(--ly-border-strong); font-size: 12px; font-weight: 600; line-height: 1;
}
/* Verbindungslinie zum nächsten Schritt */
.ly-steps__item:not(:last-child)::after {
  content: ""; flex: 1 1 var(--ly-s4); min-width: var(--ly-s3); height: 1px; background: var(--ly-border);
}
.ly-steps__item--active, .ly-steps__item[aria-current="step"] { color: var(--ly-text); font-weight: 500; }
.ly-steps__item--active::before, .ly-steps__item[aria-current="step"]::before {
  background: var(--ly-primary); border-color: var(--ly-primary); color: var(--ly-on-primary);
}
.ly-steps__item--done::before { content: "✓"; background: var(--ly-primary-soft); border-color: transparent; color: var(--ly-primary); }
.ly-steps__item--done:not(:last-child)::after { background: var(--ly-primary); }

/* ---------- Spielkarten-Basis ---------- */
/*
 * <div class="ly-playing-card">A♠</div>, rot: ly-playing-card--red,
 * Rückseite: ly-playing-card--back, Joker: ly-playing-card--joker + --common|--rare|--legendary.
 * Größe über --ly-pc-w. Die Poker-Seite nutzt dieselben Tokens (--ly-card-…, --ly-joker-…) für ihre 3D-Karten.
 */
.ly-playing-card {
  --ly-pc-w: 120px;
  position: relative; display: grid; place-items: center; box-sizing: border-box; overflow: hidden;
  width: var(--ly-pc-w); aspect-ratio: 5 / 7; border-radius: calc(var(--ly-pc-w) * .08);
  background: var(--ly-card-paper); color: var(--ly-card-black); box-shadow: var(--ly-card-shadow);
  font-family: var(--ly-font); font-weight: 700; font-size: calc(var(--ly-pc-w) * .3); line-height: 1;
}
.ly-playing-card--red { color: var(--ly-card-red); }
.ly-playing-card--back { background: var(--ly-card-back); border: calc(var(--ly-pc-w) * .05) solid var(--ly-card-paper); }
.ly-playing-card--back::before { /* langify-Logo, weiß über eine Maske */
  content: ""; width: 42%; aspect-ratio: 400 / 360; background: #fff; opacity: .92;
  -webkit-mask: url("../img/langify-icon.svg") center / contain no-repeat;
  mask: url("../img/langify-icon.svg") center / contain no-repeat;
}
.ly-playing-card--joker {
  color: #fff; border: calc(var(--ly-pc-w) * .04) solid var(--ly-card-paper);
  box-shadow: 0 0 0 2px var(--ly-gold), var(--ly-card-shadow), 0 0 32px var(--ly-pc-glow, transparent);
}
.ly-playing-card--common { background: var(--ly-joker-common); --ly-pc-glow: var(--ly-joker-common-glow); }
.ly-playing-card--rare { background: var(--ly-joker-rare); color: var(--ly-joker-rare-text); --ly-pc-glow: var(--ly-joker-rare-glow); }
.ly-playing-card--legendary {
  background: conic-gradient(from var(--ly-a, 0deg), #ff4d6d, #ffb703, #3ddc97, #4cc9f0, #7b5cff, #ff4d6d);
  animation: ly-spin 3s linear infinite; --ly-pc-glow: rgba(255, 255, 255, .8);
}
@property --ly-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ly-spin { to { --ly-a: 360deg; } }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="ly-"], [class*="ly-"]::before, [class*="ly-"]::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  }
}

/* ---------- Seitennavigation „Spiele“ (js/nav.js) ---------- */
/*
 * nav.js baut <nav class="ly-sidenav">, den Menü-Button .ly-sidenav-toggle (in .ly-topbar__brand) und
 * .ly-sidenav-backdrop selbst ein und setzt <body class="ly-has-sidenav">.
 * Desktop (≥ 1024px): feste Spalte, die Seite rückt um --ly-sidenav-w nach rechts.
 * Darunter: Schublade von links mit Abdunkelung, geöffnet über den Menü-Button.
 * --ly-sidenav-w (auf :root) ist die belegte Breite: 232px auf Desktop, sonst 0 – für Layouts, die mit 100vw rechnen.
 */
:root { --ly-sidenav-w: 0px; }

.ly-sidenav {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
  display: flex; flex-direction: column; box-sizing: border-box; width: 232px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ly-surface); border-right: 1px solid var(--ly-border); color: var(--ly-text);
  font-family: var(--ly-font); font-size: 14px; line-height: 1.4;
}
.ly-sidenav__head {
  display: flex; align-items: center; gap: var(--ly-s2); flex: none;
  min-height: 56px; box-sizing: border-box; padding: var(--ly-s2) var(--ly-s4);
  border-bottom: 1px solid var(--ly-border);
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.ly-sidenav__logo {
  width: 26px; height: 24px; flex: none; background: var(--ly-primary);
  -webkit-mask: url("../img/langify-icon.svg") center / contain no-repeat;
  mask: url("../img/langify-icon.svg") center / contain no-repeat;
}
.ly-sidenav__title { color: var(--ly-primary); }
.ly-sidenav__list { margin: 0; padding: var(--ly-s2) var(--ly-s2) var(--ly-s4) 0; list-style: none; display: grid; gap: 2px; }
.ly-sidenav__link {
  position: relative; display: flex; align-items: center; gap: var(--ly-s3);
  min-height: 40px; box-sizing: border-box; padding: var(--ly-s2) var(--ly-s3) var(--ly-s2) var(--ly-s4);
  border-radius: 0 var(--ly-radius) var(--ly-radius) 0;
  color: var(--ly-text); text-decoration: none; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.ly-sidenav__link:hover { background: var(--ly-primary-soft); }
.ly-sidenav__link:focus-visible { outline: 2px solid var(--ly-primary); outline-offset: -2px; }
.ly-sidenav__link[aria-current="page"] {
  background: var(--ly-primary-soft); color: var(--ly-primary); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ly-primary);
}
.ly-sidenav__icon { flex: none; width: 20px; height: 20px; }
.ly-sidenav__label { min-width: 0; overflow-wrap: anywhere; }
.ly-sidenav__link--minor { min-height: 34px; padding-block: 6px; font-size: 13px; font-weight: 400; color: var(--ly-text-2); }
.ly-sidenav__link--minor[aria-current="page"] { font-weight: 600; }
.ly-sidenav__sep { height: 1px; margin: var(--ly-s2) 0 var(--ly-s2) var(--ly-s4); background: var(--ly-border); }

/* Menü-Button (nur unter 1024px sichtbar) */
.ly-sidenav-toggle {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: calc(var(--ly-s2) * -1); padding: 0;
  border: 0; border-radius: var(--ly-radius); background: transparent; color: var(--ly-text); cursor: pointer;
  transition: background-color .15s;
}
.ly-sidenav-toggle:hover { background: var(--ly-primary-soft); }
.ly-sidenav-toggle:focus-visible { outline: 2px solid var(--ly-primary); outline-offset: 2px; }
/* ohne Topbar: schwebend oben links */
.ly-sidenav-toggle--float {
  position: fixed; top: var(--ly-s2); left: var(--ly-s2); z-index: 95; margin: 0;
  background: var(--ly-surface); border: 1px solid var(--ly-border); box-shadow: var(--ly-shadow);
}
.ly-sidenav-backdrop { display: none; }

@media (min-width: 1024px) {
  :root:has(> body.ly-has-sidenav) { --ly-sidenav-w: 232px; }
  body.ly-has-sidenav { padding-left: 232px; }
  /* das Logo steht schon in der Leiste */
  .ly-has-sidenav .ly-topbar__logo { display: none; }
  .ly-sidenav-toggle { display: none; }
}

@media (max-width: 1023.98px) {
  .ly-sidenav {
    z-index: 1001; width: min(280px, 85vw); border-right: 0;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .ly-sidenav.is-open { transform: none; visibility: visible; box-shadow: var(--ly-shadow-lg); transition: transform .22s ease; }
  .ly-sidenav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1000; background: var(--ly-backdrop);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s linear .22s;
  }
  .ly-sidenav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .22s; }
  /* Seite hinter der offenen Schublade scrollt nicht mit */
  .ly-sidenav-lock, .ly-sidenav-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ly-sidenav, .ly-sidenav.is-open, .ly-sidenav-backdrop, .ly-sidenav-backdrop.is-open { transition: none; }
}