/* ========== 0) Baseline: fluid & mobile-first ohne Markup-Änderung ========== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Sichere Klickziele auf Touch */
:root { --tap: 44px; }
button, .btn-neon, .icon-btn { min-height: var(--tap); min-width: var(--tap); }

/* Überschriften skalieren auf kleinen Screens automatisch (keine Klassen nötig) */
h1 { font-size: clamp(1.6rem, 4.5vw + 1rem, 2.4rem); }
h2 { font-size: clamp(1.4rem, 3.8vw + .8rem, 2rem); }
h3 { font-size: clamp(1.2rem, 3.2vw + .6rem, 1.6rem); }

/* Sektionen bekommen auf Phones etwas mehr Rand */
section { padding-left: min(5vw, 24px); padding-right: min(5vw, 24px); scroll-margin-top: 4.5rem; }

/* Videos 16:9 ohne Markup */
.video-el, video[autoplay] { aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@supports not (aspect-ratio: 1 / 1) {
  .video-el, video[autoplay] { width: 100%; height: auto; }
}

/* ========== 1) Sidebar automatisch als Off-Canvas unter 640px ========== */
@media (max-width: 639.98px) {
  /* Erstes <aside> als Off-Canvas behandeln – ohne HTML ändern zu müssen */
  body.has-oc aside:first-of-type {
    position: fixed; inset: 0 auto 0 0; width: 18rem; max-width: 85%;
    background: #111827; color: #fff; transform: translateX(-100%);
    transition: transform .2s ease; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  body.has-oc.oc-open aside:first-of-type { transform: translateX(0); }
  /* Main-Content soll darunter klickbar bleiben */
  body.has-oc .oc-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    backdrop-filter: saturate(120%) blur(2px); z-index: 40; display: none;
  }
  body.has-oc.oc-open .oc-backdrop { display: block; }
}

/* Floating FAB (Hamburger) – wird per JS eingefügt, kein HTML nötig */
.fab-menu {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  background: var(--neon); color: #000; border: 2px solid #000;
  width: 52px; height: 52px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.fab-menu svg { width: 26px; height: 26px; }

/* ========== 2) Karten/Grids: automatisch stapeln auf Phones ========== */
@media (max-width: 639.98px) {
  /* Deine Step-Layouts */
  .step-row { display: block !important; }
  .step-title { margin-bottom: .35rem; }
  .step-grid { display: grid; gap: 1rem; grid-template-columns: 1fr !important; }

  /* Häufige generische Grids sauber stapeln (non-invasiv, aber vorsichtig) */
  .grid { grid-template-columns: 1fr !important; }
  /* Falls du Tailwind-Spalten-Klassen nutzt, helfen folgende Soft-Resets: */
  [class*="grid-cols-"] { grid-template-columns: 1fr !important; }
}

/* ========== 3) Tabellen & Code-Blöcke: horizontal scrollbar statt Layoutbruch ========== */
.table-frame, .panel-soft table, table {
  width: 100%; overflow-x: auto; display: block; -webkit-overflow-scrolling: touch;
}
table thead th, table tbody td { white-space: nowrap; }

/* ========== 4) Formulare: Inputs/Selects auf 100% Breite, bessere Touch-Abstände ========== */
input[type="text"], input[type="number"], input[type="file"], textarea, select {
  width: 100%; max-width: 100%;
}
@media (max-width: 639.98px) {
  .form-row, .form-grid { display: block !important; }
  .form-row > * { width: 100% !important; }
  label { display: block; margin-bottom: .25rem; }
}

/* ========== 5) Charts (Chart.js & Co.) automatisch fluid ========== */
canvas { max-width: 100% !important; height: auto !important; }

/* ========== 6) Buttons: Abstand & Wrap auf Phones ========== */
@media (max-width: 639.98px) {
  .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
  .btn-neon { width: auto; padding: .5rem 1rem; }
}

/* ========== 7) Dark-Mode Feinschliff für mobile Panels ========== */
@media (max-width: 639.98px) {
  [data-theme="dark"] .panel-soft { background-color: var(--panel); border-color: var(--panel-border); }
}