/* Handy (bis 720 px, Mathai 01.11.2026): kompakte Kopfleiste, Menü als eine wischbare Zeile (statt „Mehr“-Klappmenü),
   nichts breiter als der Bildschirm – Knöpfe und Umschalter brechen um, Karten mit schmalem Rand. */
@media (max-width:720px){
  main{padding:18px 12px 70px}
  .kopfleiste{flex-wrap:wrap;height:auto;gap:6px 10px;padding:8px 12px 0}
  .kopfleiste .logo{height:26px}
  .wer{margin-left:auto;gap:5px;font-size:12px;flex-wrap:wrap;justify-content:flex-end}
  .wer button,.filial-pill{padding:4px 9px}
  .nav,.kopfleiste.eng .nav{order:3;flex:1 0 100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;margin:0 -12px;padding:0 6px;height:42px;scrollbar-width:none}
  .kopfleiste.eng{padding:8px 12px 0}
  .kopfleiste.eng .nav-mehr{position:static;flex:0 0 auto}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;padding:0 10px;font-size:14px;height:42px}
  .nav a .k{display:none}
  .nav-mehr summary{display:none}
  .nav-mehr>div{position:static;display:flex;border:0;box-shadow:none;padding:0;min-width:0;background:transparent;border-radius:0}
  .nav-mehr>div a{border-radius:0;padding:0 10px;margin:0;white-space:nowrap;display:flex;align-items:center}
  .nav-mehr>div a:hover{background:transparent}
  .nav-mehr>div a[aria-current="page"]{background:transparent;color:var(--ink);border-bottom:2px solid var(--gold)}

  .raster,.start-unten,.kunde-start{grid-template-columns:minmax(0,1fr)}
  .seitlich{position:static}
  .karte{padding:16px 14px;border-radius:12px;margin-bottom:14px}
  .karte-kopf{flex-wrap:wrap;gap:8px}
  .karte-kopf h2{font-size:18px}
  .knopfreihe{flex-wrap:wrap}
  .btn{white-space:normal;text-align:center}
  .segment{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .seitenkopf h1,h1{font-size:28px;line-height:1.15}
  .seitenkopf{flex-wrap:wrap;gap:12px}
  .filterleiste{flex-wrap:wrap}
  table{font-size:13px}
  .tabelle-weit,.tabelle{display:block;overflow-x:auto}

  .kurs{padding:10px 12px}
  .kurs .wert{font-size:20px}
  .kurs .wert small{font-size:12px}

  dialog{max-width:100vw;max-height:100dvh;border-radius:14px}
  .scan-schritte{flex-wrap:wrap;gap:6px}
  .scan-schritte li{padding:6px 9px;font-size:12px;gap:6px}
  .scan-bilder{gap:8px}

  /* Nur die Menüzeile darf seitlich wischen – die Seite selbst nie (iPhone-Datumsfeld war breiter als der Bildschirm). */
  html,body{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
  input,select,textarea{min-width:0;max-width:100%}
  input,select{height:40px;font-size:16px;padding:0 11px}
  input[type=date],input[type=month],input[type=time]{-webkit-appearance:none;appearance:none;display:block;text-align:left}
  input::-webkit-date-and-time-value{text-align:left}
  /* Kompakter: kurze Felder paarweise nebeneinander, kleinere Abstände und Beschriftungen. */
  .felder{gap:8px 10px;align-items:end}
  .f{gap:3px}
  .f label{font-size:12.5px}
  .f.s2{grid-column:span 4}
  .f,.f.s3,.f.s4,.f.s5,.f.s6{grid-column:span 6}
  .f.s8,.f.s9,.f.s12{grid-column:span 12}
  .f:has(> textarea),.f:has(> [name=strasse]),.f:has(> [name=email]),.f:has(> [name=iban]),.f:has(> [name=firma]){grid-column:span 12}
  .f:has(> [name=ort]){grid-column:span 8}
  .feldhilfe{font-size:12px}
  kbd,.k{display:none}
  .scan-knopf{padding:10px 12px;gap:10px}
  .scan-knopf svg{width:34px;height:34px}
  .scan-knopf small{font-size:12px}
  .trenner{margin:12px 0 6px}
  /* Ausweisfotos nebeneinander, Produkt-Knöpfe kleiner. */
  .fotoleiste{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .fotoleiste .foto,.fotoleiste .foto.ausweis{width:auto;height:84px}
  .chips{gap:5px}
  .chip{height:32px;padding:0 11px;font-size:13px}
}