/* ═══════════════════════════════════════════════════════
   mobile.css – Smartphone-Variante des Layout Designers
   ═══════════════════════════════════════════════════════
   Greift ab 900 px Breite bzw. auf Touch-Geräten. Die Desktop-Dateien
   (main/canvas/controls.css) bleiben unangetastet; hier wird nur
   umgestellt: Werkzeuge nach unten, Eigenschaften als Bottom-Sheet,
   Canvas bekommt den ganzen Rest.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  html, body {
    overscroll-behavior: none;          /* kein Pull-to-Refresh beim Ziehen */
    -webkit-text-size-adjust: 100%;
  }

  /* ── Startscreen ─────────────────────────────────── */
  .start-body { padding: 18px 16px 90px; }
  .start-title    { font-size: 1.35rem; }
  .start-subtitle { font-size: .88rem; }

  /* minmax(0,1fr) + min-width:0: sonst dürfen Rasterspalten nicht schmaler
     als ihr Inhalt werden. Mit 112 px hohen Vorschauen waren die drei Karten
     auf einem iPhone 6s breiter als der Bildschirm und links/rechts
     abgeschnitten (15.09.2026). Vorschauen deshalb maßstäblich kleiner. */
  .layout-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .layout-card        { padding: 10px 4px; min-width: 0; }
  .layout-card-label  { font-size: .8rem; }
  .layout-card-dims   { font-size: .7rem; white-space: nowrap; }
  .strip-preview      { width: 27px; height: 80px; }
  .landscape-preview  { width: 80px; height: 53px; }
  .portrait-preview   { width: 53px; height: 80px; }

  .photo-count-selector { flex-wrap: wrap; justify-content: center; }
  .count-btn { min-width: 46px; min-height: 46px; }

  .btn-large { width: 100%; min-height: 52px; }

  /* Banner „Nicht gespeichertes Layout gefunden": am Handy OHNE Flexbox.
     main.css legt es als umbrechende Flex-Zeile an (flex-wrap: wrap); die
     frühere Umstellung auf flex-direction: column ergab Spalte + Umbruch –
     älteres Safari (iOS 15, iPhone 6s) berechnet dafür die Höhe zu klein.
     Die Knöpfe hingen unter dem Rand, die Anleitung darunter lag über ihrem
     Text (Rückmeldung 15.09.2026). Normaler Blockfluss hat das Problem nicht.
     .resume-banner.hidden bleibt stärker und blendet weiter aus. */
  .resume-banner  { display: block; }
  .resume-texts   { margin-bottom: 12px; }
  .resume-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .resume-actions button {
    min-height: 44px;
    font-size: .9rem;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ── Vorlagen-Galerie: zwei Spalten ──────────────── */
  .template-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 14px 90px;
  }

  /* ── Editor-Kopfzeile: nur das Nötigste ──────────── */
  .editor-header {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .editor-logo .logo-img--header { height: 22px; }

  /* Layoutname/Datum wandern in das Menü-Sheet */
  .editor-naming { display: none; }
  .editor-naming.mobile-visible {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .editor-actions { gap: 6px; margin-left: auto; }
  /* Auf dem Handy in der Kopfzeile nur: Undo, Redo, Absenden/Export, Menü */
  .editor-actions .separator,
  .editor-actions #btn-new,
  .editor-actions #btn-load,
  .editor-actions #btn-save,
  .editor-actions #btn-export { display: none; }

  .editor-actions .btn-primary {
    padding: 9px 12px;
    font-size: .8rem;
    white-space: nowrap;
  }

  /* ── Grundgerüst: Einfüge-Leiste links, Canvas rechts ─────
     Die Werkzeuge lagen zuerst unten und waren dort nicht zu finden („wo kann
     ich Texte einfügen?"). Jetzt stehen sie als schmale Leiste links – wie am
     Desktop, nur schmaler. Unten bleibt Platz für die Auswahlleiste. */
  /* Sichtbare Fensterhöhe: 100vh ist auf Telefonen die GRÖSSTE Höhe (mit
     eingeklappter Browserleiste) – die unteren Leisten lägen sonst unterhalb
     des Sichtbaren. 100dvh folgt dem, was wirklich zu sehen ist. */
  .screen { height: 100vh; height: 100dvh; }

  /* Raster statt umbrechender Flexzeile: mit flex-wrap bestimmte der INHALT
     der Leiste die Zeilenhöhe – die Leiste endete mitten im Bild und zog die
     unteren Leisten mit hoch. Im Raster füllt die Canvas-Zeile den Rest. */
  .editor-body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    min-height: 0;
  }

  .canvas-area {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    min-width: 0;
  }

  .toolbar-left {
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-right: 1px solid var(--border);
    border-top: none;
    padding: 6px 4px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: var(--bg-panel);
  }
  .toolbar-left::-webkit-scrollbar { display: none; }

  .toolbar-left .tool-group {
    flex-direction: column;
    gap: 4px;
    border: none;
    padding: 0;
    margin: 0;
  }
  .toolbar-left .tool-group + .tool-group {
    margin: 6px 0 0;
    padding: 6px 0 0;
    border-top: 1px solid var(--border);
    border-left: none;
  }

  /* In der Leiste nur das Einfügen: Foto-Dummy, Text, Icon, Bild.
     Alles Übrige steckt hinter „Mehr" (js/mobile.js baut den Knopf). */
  .toolbar-left #tool-select,
  .toolbar-left #tool-frame,
  .toolbar-left #tool-overlay,
  .toolbar-left #tool-preview,
  .toolbar-left #tool-align-h,
  .toolbar-left #tool-align-v,
  .toolbar-left #tool-copy,
  .toolbar-left #tool-paste,
  .toolbar-left .tool-group-bottom { display: none; }

  .toolbar-left .tool-btn {
    flex: 0 0 auto;
    width: 100%;
    min-height: 52px;
    padding: 5px 2px;
    gap: 2px;
    font-size: .56rem;
    line-height: 1.05;
    text-align: center;
  }
  .toolbar-left .tool-btn svg { width: 20px; height: 20px; }

  /* ── Eigenschaften als Bottom-Sheet ──────────────── */
  /* Eigenschaften liegen als Sheet über der Zeichenfläche. Die Höhe kommt aus
     --sheet-h (JS: 46 % zum Schauen, 86 % zum Arbeiten) – nicht höher, damit
     das Element, um das es geht, sichtbar bleibt. */
  .panel-right {
    grid-area: 1 / 1 / 2 / 3;      /* liegt über allem, belegt keine eigene Spur */
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    z-index: 800;
    width: 100%;
    height: var(--sheet-h, 46vh);
    /* Die Tastatur verdeckt den unteren Rand (--kb-h wird von js/mobile.js
       gesetzt): Sheet darüber heben und auf den freien Platz begrenzen. */
    bottom: var(--kb-h, 0px);
    max-height: calc(100vh - var(--kb-h, 0px) - 8px);
    border-left: none;
    border-top: 1px solid var(--gold);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.6);
    padding: 0 16px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(102%);
    transition: transform .22s ease, height .18s ease;
  }

  .panel-right.sheet-open { transform: translateY(0); }

  /* Kopfzeile des Sheets: Greifleiste zum Ziehen + Schließkreuz */
  .sheet-handle {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 0 -16px 8px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    cursor: grab;
    touch-action: none;
  }
  .sheet-grip {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-light, #555);
  }
  .sheet-close {
    position: absolute;
    top: 0;
    right: 4px;
    width: 46px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
  }
  .sheet-close svg { width: 20px; height: 20px; }

  /* Tastatur wieder zumachen – erscheint nur, solange sie offen ist */
  .sheet-done {
    position: absolute;
    top: 0;
    left: 6px;
    display: none;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: .82rem;
    font-weight: 600;
  }
  body.kb-open .sheet-done { display: flex; }

  /* Bei offener Tastatur zählt jeder Pixel: Sheet nutzt den Platz darüber voll */
  body.kb-open .panel-right.sheet-open { height: calc(100vh - var(--kb-h, 0px) - 8px); }

  /* „Kein Element gewählt" braucht auf dem Handy kein Sheet */
  #panel-empty { display: none !important; }

  /* Eingabefelder fingerfreundlich (und ≥16px gegen iOS-Auto-Zoom) */
  .panel-right input[type="text"],
  .panel-right input[type="number"],
  .panel-right input[type="date"],
  .panel-right select,
  .editor-naming input {
    min-height: 44px;
    font-size: 16px;
  }
  .panel-right button { min-height: 44px; }

  /* ── Canvas-Fläche ───────────────────────────────── */
  /* Luft um das Layout, damit sich JEDE Kante in die Bildmitte schieben lässt
     (vorher endete der Schiebeweg am Layoutrand – Elemente am unteren Rand
     waren unter den Leisten nicht erreichbar). js/mobile.js zentriert die
     Ansicht nach jedem Einpassen. */
  .canvas-scroll-container {
    padding: 50vh 35vw;
    touch-action: none;                 /* Gesten macht js/mobile.js selbst */
  }

  .canvas-zoom-controls {
    top: 10px;
    bottom: auto;
    right: 10px;
    padding: 4px 6px;
    gap: 4px;
    opacity: .92;
  }
  .zoom-btn { width: 38px; height: 38px; }
  #zoom-level { min-width: 46px; font-size: .75rem; }

  /* Direkt unter den Zoomknöpfen statt am unteren Rand – dort lag sie den
     Leisten im Weg. */
  .canvas-clip-warning {
    left: 10px;
    right: 10px;
    top: 58px;
    bottom: auto;
    max-width: none;
    font-size: .75rem;
    text-align: left;
  }

  /* ── Dialoge (Text erstellen, Absenden) ──────────────
     .modal-box hat am Desktop feste 400 px – das läuft auf einem 360-px-Handy
     seitlich aus dem Bild. */
  .modal { padding: 16px; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 18px;
  }
  .modal-box textarea {
    font-size: 16px;          /* unter 16px zoomt iOS beim Tippen hinein */
    min-height: 96px;
  }
  .modal-actions { gap: 10px; }
  .modal-actions button { flex: 1 1 0; min-height: 50px; }

  /* ── Menü-Sheet (Neu/Laden/Speichern/Name/Datum) ─── */
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }

  .mobile-menu {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 901;
    background: var(--bg-panel);
    border-top: 1px solid var(--gold);
    border-radius: 16px 16px 0 0;
    padding: 0 16px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(102%);
    transition: transform .22s ease;
  }
  .mobile-menu.open { transform: translateY(0); }

  .mobile-menu h3 {
    margin: 2px 0 12px;
    font-size: .95rem;
    color: var(--gold);
  }
  .mobile-menu .menu-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .mobile-menu .menu-row button { min-height: 48px; width: 100%; }
  .mobile-menu .menu-info {
    color: var(--text-secondary);
    font-size: .8rem;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  /* ── Hinweis: Gerät drehen (Querformat) ──────────── */
  .rotate-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(20,20,24,.92);
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: .75rem;
    white-space: nowrap;
  }
  .rotate-hint.hidden { display: none; }

  /* ── Auswahlleiste über der Werkzeugleiste ───────── */
  /* Erscheint, sobald ein Element gewählt ist, und enthält nur, was mit dem
     Finger am Element selbst schlecht geht. Größe und Position macht man
     direkt am Element – nicht im Formular. */
  .mobile-selbar {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-panel);
    border-top: 1px solid var(--gold);
  }
  .mobile-selbar[hidden] { display: none !important; }

  .selbar-label {
    flex: 0 0 auto;
    max-width: 30%;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(201,169,104,.14);
    border: 1px solid rgba(201,169,104,.45);
    color: var(--gold);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .selbar-actions {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .selbar-actions::-webkit-scrollbar { display: none; }

  .selbar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 46px;
    min-height: 46px;
    padding: 0 10px;
    background: var(--bg-input, #1c1c21);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary, #eaeaea);
  }
  .selbar-btn[hidden]   { display: none !important; }
  .selbar-btn svg       { width: 20px; height: 20px; }
  .selbar-btn span      { font-size: .74rem; white-space: nowrap; }
  .selbar-btn:active    { background: rgba(201,169,104,.18); }
  .selbar-btn--primary  { border-color: var(--gold); color: var(--gold); }
  .selbar-btn--danger   { color: #e08b8b; }
  .selbar-btn--on       { border-color: var(--gold); background: rgba(201,169,104,.2); color: var(--gold); }
  .selbar-btn--danger:active { background: rgba(210,80,80,.2); }

  /* ── Geführter Pfad für Kunden (js/guided.js) ─────── */
  /* Statt der Werkzeugleiste nur: Texte, Hintergrund, Erklärung zu den
     Fotofeldern. Verschieben und Skalieren sind gesperrt. */
  body.guided .toolbar-left { display: none !important; }
  body.guided .mobile-selbar { display: none !important; }

  .guided-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: var(--bg-panel);
    border-top: 1px solid var(--gold);
  }
  .guided-bar[hidden] { display: none !important; }

  .guided-btn {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 6px 4px;
    background: var(--bg-input, #1c1c21);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary, #eaeaea);
    font-size: .72rem;
    line-height: 1.1;
  }
  .guided-btn svg    { width: 22px; height: 22px; }
  .guided-btn:active { background: rgba(201,169,104,.18); }

  /* Textliste im Sheet */
  .guided-row { gap: 6px; }
  .guided-row textarea {
    width: 100%;
    min-height: 58px;
    font-size: 16px;              /* unter 16px zoomt iOS beim Tippen hinein */
    padding: 10px;
  }
  .guided-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .guided-extra span { font-size: .75rem; color: var(--text-secondary); }
  .guided-extra input[type="color"] { width: 64px; min-height: 40px; }

  /* ── Zahlenfelder: große −/+ statt winziger Pfeile ── */
  .panel-right input[type="number"]::-webkit-inner-spin-button,
  .panel-right input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .panel-right input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
  }
  /* Zahlenfeld-Reihen dicht halten: Beschriftung links, die Tastengruppe
     rechts und in sich mittig. Vorher stand die Beschriftung über einer
     Reihe in voller Breite – das kostete pro Wert doppelt so viel Höhe, und
     zum Scrollen blieb kaum Platz. */
  .panel-right .prop-row--num {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .panel-right .prop-row--num > label {
    flex: 1 1 auto;
    margin: 0;
  }

  .panel-right .num-stepper {
    flex: 0 0 auto;
    width: 164px;
    gap: 6px;
    justify-content: center;
  }
  .panel-right .num-stepper > input {
    flex: 1 1 auto;
    min-height: 40px;
    text-align: center;
  }
  .panel-right .num-step {
    flex: 0 0 46px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
    background: var(--bg-input, #1c1c21);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--gold);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  .panel-right .num-step:active { background: rgba(201,169,104,.22); }

  /* Sheet-Inhalt insgesamt dichter – weniger Scrollen im kleinen Fenster */
  .panel-right .panel-title   { margin-bottom: 8px; padding-bottom: 6px; }
  .panel-right .prop-divider  { margin: 10px 0; }
  .panel-right .prop-row      { margin-bottom: 10px; }
  .panel-right .section-label { margin-bottom: 6px; }

  /* Auch Auswahl- und Farbfelder brauchen keine 44 px Höhe mehr */
  .panel-right select,
  .panel-right input[type="color"],
  .panel-right input[type="text"],
  .panel-right input[type="date"] { min-height: 40px; }
  .panel-right button { min-height: 42px; }
  .panel-right .sheet-close { min-height: 0; }

  /* Fußzeile stört im Editor nur */
  .legal-mini { display: none; }
}

/* ══════════════════════════════════════════════════════
   Querformat auf einem HANDY
   ══════════════════════════════════════════════════════
   Nur dort stehen ~400 px Höhe zur Verfügung, und nur dort ist ein Bottom-Sheet
   der falsche Weg: über 86 % der Höhe verdeckt es das Layout vollständig – man
   sieht nicht mehr, was man bearbeitet.

   Die Entscheidung trifft `js/mobile.js` (eine einzige Medienabfrage, inklusive
   `pointer: coarse`) und setzt `body.phone-landscape`. Hier wird nur noch auf
   diese Klasse reagiert – am Desktop (auch im schmalen Fenster) bleibt damit die
   gewohnte Bauform. */
body.phone-landscape .panel-right {
  top: 0;
  right: 0;
  left: auto;
  bottom: var(--kb-h, 0px);
  width: var(--sheet-w, 340px);
  max-width: 62vw;
  height: auto;
  max-height: none;
  border-top: none;
  border-left: 1px solid var(--gold);
  border-radius: 16px 0 0 16px;
  box-shadow: -12px 0 40px rgba(0,0,0,.6);
  transform: translateX(102%);
  transition: transform .22s ease;
  padding: 0 12px 12px;
}
body.phone-landscape .panel-right.sheet-open { transform: translateX(0); }
/* die Höhenregel des Hochformats gilt hier nicht */
body.phone-landscape.kb-open .panel-right.sheet-open { height: auto; }

/* Die Greifleiste wird zur Kopfzeile: Ziehen ergibt seitlich keinen Sinn */
body.phone-landscape .sheet-handle { cursor: default; touch-action: auto; }
body.phone-landscape .sheet-grip   { display: none; }

/* Menü und „Mehr" ebenfalls von der Seite */
body.phone-landscape .mobile-menu {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: min(380px, 70vw);
  max-height: none;
  border-top: none;
  border-left: 1px solid var(--gold);
  border-radius: 16px 0 0 16px;
  transform: translateX(102%);
}
body.phone-landscape .mobile-menu.open { transform: translateX(0); }

/* Kopfzeile und Leisten schlanker – jede Zeile zählt */
body.phone-landscape .editor-header {
  padding: 4px 8px;
  padding-top: max(4px, env(safe-area-inset-top));
}
body.phone-landscape .editor-logo .logo-img--header { height: 18px; }
body.phone-landscape .editor-actions { gap: 4px; }
body.phone-landscape .editor-actions .btn-primary { padding: 7px 10px; font-size: .74rem; }

body.phone-landscape .toolbar-left { width: 50px; padding: 4px 3px; gap: 3px; }
body.phone-landscape .toolbar-left .tool-btn {
  min-height: 42px;
  font-size: .5rem;
  gap: 1px;
  padding: 3px 1px;
}
body.phone-landscape .toolbar-left .tool-btn svg { width: 17px; height: 17px; }

body.phone-landscape .mobile-selbar { padding: 4px 6px; gap: 6px; }
body.phone-landscape .selbar-label  { font-size: .64rem; padding: 3px 7px; max-width: 24%; }
body.phone-landscape .selbar-btn    { min-height: 40px; min-width: 40px; padding: 0 8px; }
body.phone-landscape .selbar-btn svg  { width: 18px; height: 18px; }
body.phone-landscape .selbar-btn span { font-size: .68rem; }

body.phone-landscape .guided-bar { padding: 5px 6px; }
body.phone-landscape .guided-btn { min-height: 44px; font-size: .64rem; }
body.phone-landscape .guided-btn svg { width: 18px; height: 18px; }

body.phone-landscape .canvas-zoom-controls { top: 6px; right: 6px; padding: 3px 5px; }
body.phone-landscape .zoom-btn   { width: 32px; height: 32px; }
body.phone-landscape #zoom-level { min-width: 40px; font-size: .7rem; }

body.phone-landscape .canvas-clip-warning { top: 46px; left: 8px; right: 8px; font-size: .7rem; }

body.phone-landscape .panel-right .prop-row    { margin-bottom: 8px; }
body.phone-landscape .panel-right .num-stepper { width: 150px; }

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .toolbar-left .tool-btn { width: 56px; font-size: .58rem; }
  .editor-actions .btn-primary { padding: 8px 10px; font-size: .74rem; }
}

/* Auf Desktop-Breiten ist alles Mobile unsichtbar */
@media (min-width: 901px) {
  .mobile-only { display: none !important; }
}

/* Umschlag der Zahlenfelder: am Desktop unauffällig (diese Variante wird auch
   am großen Bildschirm getestet), die großen Tasten erscheinen nur am Handy. */
.num-stepper { display: flex; align-items: center; gap: 6px; }
.num-stepper > input { flex: 1 1 auto; min-width: 0; }
@media (min-width: 901px) { .num-step { display: none; } }

/* ── Wegweiser für Kunden am Handy ───────────────────────
   Das Schild „Kundenansicht" sitzt oben (unten liegen die Leisten), die
   Anleitung wird kompakter, und der Rückweg steht im ☰-Menü. */
@media (max-width: 900px) {
  .kundenansicht-hinweis { bottom: auto; top: 8px; }

  .kunden-anleitung { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; }
  .kunden-anleitung h2 { font-size: .85rem; margin-bottom: 10px; }
  .kunden-anleitung li { grid-template-columns: 26px 1fr; gap: 3px 10px; }
  .kunden-anleitung li::before { width: 26px; height: 26px; font-size: .78rem; }
  .kunden-anleitung b    { font-size: .86rem; }
  .kunden-anleitung span { font-size: .8rem; }

  a.zurueck-website { font-size: .8rem; }
  .start-header { text-align: center; }

  /* Auf kleinen Bildschirmen endet die sichtbare Fläche unter der Anleitung –
     der Knopf zeigt, dass es darunter weitergeht, und scrollt dorthin. */
  .kunden-los { display: block; margin-top: 16px; }
}

/* Im Querformat ist oben noch weniger Platz – die Bauform steht als Klasse am
   body (js/mobile.js ist die einzige Quelle dafür, siehe dort). */
body.phone-landscape .kundenansicht-hinweis { top: 4px; padding: 4px 12px; }