/* ============================================================
   mobile.css – Handy, iPad und kleine Fenster
   Ergänzt das Grundlayout, ohne es auf großen Schirmen zu ändern.
   ============================================================ */

/* Sicherheitsabstände für iPhone-Notch/Home-Indikator */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-left: max(var(--sp-3), env(safe-area-inset-left)); }
}

/* Werbebanner – klein, aber sichtbar, unten am Grundriss */
.promo {
  position: absolute;
  left: var(--sp-3);
  bottom: calc(var(--sp-3) + 6px);
  max-width: min(360px, 70vw);
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.35;
  color: var(--c-text);
  z-index: 6;
}
.promo__label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  display: block;
  margin-bottom: 2px;
}
.promo strong { color: var(--c-accent); }
.promo a { color: var(--c-accent); font-weight: 600; text-decoration: none; }
.promo__close {
  border: 0;
  background: none;
  color: var(--c-text-faint);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.promo[hidden] { display: none; }

/* Umschalt-Knopf für die Eigenschaftenleiste – nur auf schmalen Schirmen */
.panel-toggle {
  display: none;
  position: absolute;
  right: var(--sp-3);
  bottom: calc(var(--sp-3) + 6px);
  z-index: 7;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ---------- Tablet und schmale Fenster ---------- */
@media (max-width: 980px) {
  :root { --inspector-w: 280px; --toolbar-w: 60px; }
  .tool__label { display: none; }        /* nur Symbole */
  .topbar__name input { width: 120px; }
}

/* ---------- Handy und Hochkant-Tablet ---------- */
@media (max-width: 720px) {
  :root { --toolbar-w: 52px; }

  /* Kopfleiste seitlich scrollbar: alle Aktionen per Wisch erreichbar */
  .topbar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-2);
  }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar > * { flex: 0 0 auto; }
  .topbar__spacer { flex: 0 0 var(--sp-1); }
  .topbar__brand span:not(.topbar__version) { display: none; }  /* nur Logo, spart Platz */

  /* Auf dem Handy ist die Eigenschaften-Leiste eine Schublade (nicht im Raster).
     „Werkzeugleiste aus" darf deshalb keine leere Spalte hinterlassen. */
  body.hide-toolbar .workspace,
  body.hide-toolbar.hide-inspector .workspace { grid-template-columns: 1fr; }

  /* Eigenschaftenleiste wird zur einblendbaren Schublade von rechts */
  .workspace { grid-template-columns: var(--toolbar-w) 1fr; }
  .inspector {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: min(92vw, 360px);
    border-left: 1px solid var(--c-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.show-inspector .inspector { transform: none; }

  .panel-toggle { display: block; }
  body.show-inspector .panel-toggle { right: calc(min(92vw, 360px) + var(--sp-2)); }

  /* Werkzeugleiste schlank, Symbole untereinander scrollbar */
  .toolbar { padding: var(--sp-1) 2px; gap: 1px; }
  .tool { min-height: 42px; }

  /* HUD-Chips kompakter, damit sie nicht die halbe Fläche verdecken */
  .hud { gap: var(--sp-1); top: var(--sp-2); }
  .hud--left { left: var(--sp-2); }
  .hud--right { right: var(--sp-2); }
  .chip { font-size: 12px; }

  .promo { max-width: 78vw; font-size: 11.5px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  .topbar { gap: var(--sp-2); }
  .topbar__name input { width: 92px; }
}

/* Sehr kleine Telefone: Werbung über dem Umschaltknopf stapeln */
@media (max-width: 420px) {
  .topbar__version { display: none; }
}