/* /docs/css/mobile.css — unified mobile-only CSS (clean cut) */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden !important; }
  html.mnav-open, body.mnav-open { overflow: hidden; touch-action: none; overscroll-behavior: contain; }

  /* Burger (links, unter Mini-Header) */
  .mnav-toggle {
    position: fixed; left: 12px; top: 56px;
    z-index: 1501; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
    background: rgba(0,0,0,.55); color:#fff; backdrop-filter: blur(6px);
  }
  .mnav-toggle::before { content: "≡"; font-size: 20px; }

  /* Verstecke Menu-Button im geöffneten Zustand */
  .mnav-toggle[aria-expanded="true"], .menu-toggle[aria-expanded="true"] {
    display: none !important;
  }

  /* Drawer + Overlay (über TOC) */
  .mnav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 1490; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .mnav-overlay.is-active { opacity: 1; pointer-events: auto; }

  .mnav-drawer {
    position: fixed; top: 0; left: 0; width: min(86vw, 320px); height: 100dvh;
    z-index: 1500; background: var(--neutral); border-right: 1px solid var(--line,rgba(0,0,0,.12));
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
    transform: translateX(-100%); transition: transform .28s ease;
    display: grid; grid-template-rows: auto 1fr auto;
  }
  .mnav-drawer.is-open { transform: translateX(0); }

  .mnav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--line,rgba(0,0,0,.12)); background: var(--card,#fff);
  }
  .mnav-close {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line,rgba(0,0,0,.12));
    background: rgba(255,255,255,.96); font-size: 18px;
  }

  .mnav-list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; }
  .mnav-list li { list-style: none; }
  .mnav-list li::marker { content: none; }
  .mnav-list a {
    display: block; padding: 12px 10px; border-radius: 10px;
    color: var(--muted,#333); text-decoration: none; border: 1px solid transparent; background: none;
  }
  .mnav-list a::before, .mnav-list a::after, .mnav-list a .icon { display: none !important; }
  .mnav-list a:hover { background: rgba(11,67,101,.06); color: var(--secondary,#0b4365); }
  .mnav-list a[aria-current="page"] {
    background: rgba(88,199,218,.10); color: var(--primary,#7aa61d); border-color: rgba(88,199,218,.30); font-weight: 600;
  }

  .mnav-foot {
    display: flex; gap: 10px; justify-content: center; align-items: center;
    padding: 12px; border-top: 1px solid var(--line,rgba(0,0,0,.12));
  }
  .mnav-foot a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; }
  .mnav-foot .icon { width: 22px; height: 22px; display: block; }

  /* Mini-Header (wenn Seite selbst keinen sichtbaren Header hat) */
  header.mobile-brandbar {
    position: sticky; top: 0; z-index: 1495;
    height: 48px; display:flex; align-items:center; gap:10px;
    padding: 6px 10px; background: var(--card,#fff); border-bottom: 1px solid var(--line,rgba(0,0,0,.1));
  }
  .brand-mini { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }

  /* Docs: rechter TOC unter Hauptmenü halten & Pfeile setzen */
  .toc-toggle {
    position: fixed; right: 12px; top: 112px; z-index: 1400;
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: rgba(0,0,0,.55); color:#fff; backdrop-filter: blur(6px);
  }
  .toc-toggle::before { content: "◀"; font-size: 18px; } /* Pfeil statt Hamburger */

  .toc-flyout, .toc-drawer {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(82vw, 320px);
    background: var(--neutral); border-left:1px solid var(--line,rgba(0,0,0,.12));
    box-shadow: -2px 0 22px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .25s ease; z-index: 1401;
    display: grid; grid-template-rows: auto 1fr auto;
  }
  .toc-flyout.is-active, .toc-drawer.open { transform: translateX(0); }
  .toc-overlay { position: fixed; inset: 0; z-index: 1390; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s }
  .toc-overlay.active { opacity: 1; pointer-events: auto; }

  /* (Optional) Linker Docs-Drawer (falls verwendet) */
  .docs-left-toggle{
    position: fixed; top: 112px; left: 12px; z-index: 1605;
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: rgba(0,0,0,.55); color:#fff; backdrop-filter: blur(6px);
  }
  .docs-left-toggle::before{ content: "▶"; font-size: 18px; }
  html.docs-left-open .docs-left-toggle::before{ content: "◀"; }
  .docs-left-toggle[aria-expanded="true"] { display: none !important; }
  html.mnav-open .docs-left-toggle { display: none !important; }

  .docs-left-drawer{
    position: fixed; top: 0; left: 0; height: 100dvh; width: min(82vw, 320px);
    background: var(--neutral); border-right:1px solid var(--line,rgba(0,0,0,.12));
    box-shadow: 2px 0 22px rgba(0,0,0,.12);
    transform: translateX(-100%); transition: transform .25s ease; z-index: 1600;
    display: grid; grid-template-rows: auto 1fr; overflow-y: auto;
  }
  .docs-left-drawer.is-open{ transform: translateX(0); }
  .docs-left-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1595; opacity:0; pointer-events:none; transition: opacity .2s }
  .docs-left-overlay.is-active{ opacity:1; pointer-events:auto; }
}

@media (min-width: 1024px) {
  .mnav-toggle, .mnav-drawer, .mnav-overlay,
  .docs-left-toggle, .docs-left-drawer, .docs-left-overlay { display: none !important; }
}

/* Suppress 404 decorative SVG icons in docs left drawer */
.docs-left-drawer img[src$=".svg"] { display: none !important; }

/* === MOBILE-ONLY: Header/Drawer Ordnung & keine Desktop-Header erzwingen === */
@media (max-width: 1023px) {
  /* Wichtig: Desktop-Header NICHT auf Mobile zwangs-aktivieren */
  header.desktop-only { display: none !important; }
  header.mobile-brandbar { display: flex !important; }

  /* Z-Index-Hierarchie: Menü über TOC, logisch sortiert */
  .mnav-overlay  { z-index: 1490 !important; }
  .mnav-drawer   { z-index: 1500 !important; }

  .toc-toggle    { z-index: 1400 !important; }
  .toc-overlay   { z-index: 1390 !important; }
  .toc-flyout,
  .toc-drawer    { z-index: 1401 !important; }

  /* Drawer-Listen: keine Pseudo-/Marker-Icons (verhindert blaue Kästchen) */
  .mnav-list, .mnav-list li { list-style: none !important; }
  .mnav-list li::marker { content: none !important; }
  .mnav-list a::before,
  .mnav-list a::after,
  .mnav-list a .icon { display: none !important; }
}

/* === Zeige den Seiten-Header auch mobil, damit der Burger dort sitzt === */
@media (max-width: 1023px) {
  header.desktop-only { display: block !important; }
  /* Optional: gleiche paddings/border wie Docs-Header */
  header.site-header, header.mobile-brandbar { /* statt globalem header */
    min-height:48px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line,rgba(0,0,0,.1));
    background:var(--card,#fff);
  }

  /* Burger im Header links ausrichten */
  .mnav-toggle {
    position: relative; /* im Header-Flow */
    left: 0; top: 0;
    margin-left: 8px;
  }

  /* Synapse grid: stack vertically on mobile */
  .synapse-main .grid {
    display: block;
  }
  .synapse-main .grid > * {
    margin-bottom: 12px;
  }

  /* Chip elements: prevent overflow */
  .chip {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  /* Grid4: single column on mobile */
  .grid4 {
    grid-template-columns: 1fr !important;
  }

  /* HUD: allow wrapping to prevent horizontal overflow */
  .hud {
    flex-wrap: wrap;
  }

  /* Nav bar in header: wrap on small screens */
  nav.row {
    flex-wrap: wrap;
  }

  /* Input fields: remove min-width to allow shrinking */
  .input {
    min-width: 0;
  }

  /* Universal max-width to prevent overflow */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Prevent long text horizontal overflow in meta and inputs */
  .meta span, .hud-item, .price-big, .input {
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  /* Hero spacing and layout adjustments */
  .hero-tech.card {
    padding: var(--space-md) !important;
  }
  .hero-tech .hero-inner {
    gap: var(--space-sm) !important;
  }
  .hero-tech .hero-copy h1 {
    font-size: var(--fs-xl) !important;
    line-height: 1.2 !important;
  }
  .hero-tech .hero-copy p {
    font-size: var(--fs-sm) !important;
    line-height: 1.4 !important;
  }
  .hero-tech .hero-lottie {
    align-self: center !important;
    width: 220px !important;
    min-width: 200px !important;
  }

  .hero-copy p {
    max-width: 100% !important;
  }

}