/* Allesnetz Verkauf - mobile Ansicht (Handy 360-430 px, Tablet 768 px).
   Wird nur unterhalb von 1130 px Breite geladen (media-Attribut am <link>); das freigegebene Desktop-Layout bleibt unveraendert.
   Alle Regeln stehen zusaetzlich in @media-Bloecken. */

@media (max-width:1129px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  img,svg,iframe{max-width:100%}

  /* ---- Kopfzeile ---- */
  .head{height:auto;flex-wrap:wrap;gap:8px 8px;padding:8px 12px}
  .head .back{order:1}
  .modules{order:2;margin:0 auto}
  .right{order:3;margin-left:0;width:auto;height:auto;align-items:flex-end}
  .right .hm{margin:0;height:auto}
  .logout{height:32px;background-position:0 center;padding-top:0;padding-bottom:0}
  .back.main-item{height:17px;padding-top:11px;padding-bottom:11px;margin-bottom:0}
  .main-item{padding-top:11px;padding-bottom:11px}

  /* ---- Titel- und Schalterleiste ---- */
  .title{padding:8px 12px;flex-wrap:wrap}
  .title h1{min-width:0;overflow-wrap:anywhere}
  .tool{padding:8px 12px;gap:6px}
  .btn{height:40px;margin:0}
  .btn.p,.tool .btn:has(use[href="#ex"]),.btn.nav.r,.tool.neu>.btn:first-child,.tool .btn.bl:first-of-type{margin:0}
  .btn:has(svg.i),.btn[class*="ik-"]{background-position:8px 12px}
  td .btn:has(svg.i){height:auto;min-height:36px;min-width:36px;justify-content:center}
  button.cmdb{height:40px}

  /* ---- Eingaben: 16 px (kein Zoom in iOS), grosse Tippflaechen ---- */
  input,select,textarea{font-size:16px}
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),select{min-height:40px;padding:4px 6px}
  textarea{padding:6px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  input[type=file]{max-width:100%;min-height:40px}
  .fz a.lupe,.fz a.kal,a.gk,a.gl,.fi,a.pen,table.bt a.pdel{padding:8px;margin:-4px 0 -4px 0!important;display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;line-height:0}
  .fz a.lupe img,.fz a.kal img{margin-left:0}

  /* ---- Reiter: umbrechen ---- */
  .rt{flex-wrap:wrap;height:auto;overflow:visible;padding:6px 10px 0;gap:4px 4px}
  .rt a{height:auto;min-height:38px;display:flex;align-items:center;line-height:1.2}

  /* ---- Kacheln: Tablet 3 Spalten ---- */
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
  .tile{margin:14px 0 0;min-width:0}
  .tile h2{white-space:normal;height:auto;min-height:32px;padding-right:8px}
  .tile>a,.tile>.leer{height:auto;min-height:36px;white-space:normal;display:flex;align-items:center;padding:4px 10px;overflow:visible}
  .tile>.leer{display:none}
  .kachelfeld{padding:1px 12px 12px}

  /* ---- Inhalt, Meldungen ---- */
  .content,.binc,.stk,.stc{margin-left:12px;margin-right:12px}
  .meldung{margin:12px}
  .content{overflow-wrap:break-word}
  .tw{max-width:100%;-webkit-overflow-scrolling:touch}
  .binc{overflow-x:auto}
  .split{grid-template-columns:minmax(0,1fr)}
  .stsplit{flex-direction:column;gap:0;margin:1em 12px 0;flex-wrap:wrap}
  .stsplit .stl .stk{min-width:0}
  .stsplit .stc,.stsplit .stk{margin:0}
  .tot{width:100%}
  iframe.vorschau{height:70vh;min-height:360px}
  .sum{gap:6px}

  /* ---- Formulare (.form): Label ueber dem Feld, Felder in 1-2 Spalten ---- */
  .form,.form.two,.form.one,.form.f4{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))!important;column-gap:16px;row-gap:6px;
    padding:12px 12px 12px;justify-content:stretch;align-items:start}
  .form>div:not(.row){display:none}
  .form>div.fz,.form>.fz{display:flex}
  .row,.form .row,.form.st .row.ws{display:block!important;grid-column:auto!important;grid-template-columns:none!important;padding-right:0;min-height:0}
  .row.breit,.row.voll,.form.st .row.ws,.row:has(textarea){grid-column:1/-1!important}
  .row>span:first-child{display:block;min-height:0;padding:0 0 2px}
  .row>:nth-child(2),.row>div:nth-child(2),.row>span:nth-child(2){padding:1px 0;max-width:100%}
  .row .fc{display:flex;flex-wrap:nowrap;align-items:center;white-space:normal;gap:2px 0;min-width:0}
  .form.st .row>.fc{min-width:0}
  .row .fc>*{flex:none}
  .row .fc>.sx{flex:0 1 auto}
  .row .fc>input:not([type=checkbox]):not([type=radio]),.row .fc>select,.row .fc>textarea{flex:1 1 0;min-width:0;width:auto;max-width:100%}
  .row>input:not([type=checkbox]):not([type=radio]),.row>select,.row>textarea{width:100%;max-width:100%;justify-self:stretch;margin:0}
  #suche .row>input:not([type=checkbox]):not([type=radio]),#suche .row>select{margin:0}
  .row textarea,.row textarea[cols],.row textarea.cols{width:100%;min-width:0;max-width:100%}
  .row .fz{display:flex;width:100%}
  .row .fz>input,.row>div>.fz>input{flex:1 1 auto;min-width:0;width:100%}
  .row>div>.fz{display:flex}
  .row .sx,.row .zus{margin:0 0 0 6px;line-height:1.3}
  .row .fc>input[type=checkbox],.row>input[type=checkbox],#suche .row>input[type=checkbox]{margin:4px 0;flex:none}
  .row:has(>input[type=checkbox]),.row:has(>.fc>input[type=checkbox]:only-child){display:flex!important;justify-content:space-between;align-items:center;gap:12px;min-height:40px}
  .row:has(>input[type=checkbox])>span:first-child,.row:has(>.fc>input[type=checkbox]:only-child)>span:first-child{padding:0}

  /* ---- Belegmasken (table.bf): Zeilen untereinander, Label ueber dem Feld ---- */
  .bpct{padding:12px}
  table.bf,table.bf tbody{display:block;width:100%;border-spacing:0}
  table.bf tr{display:block;margin:0}
  table.bf td{display:block;box-sizing:border-box;width:100%;white-space:normal;padding:0}
  table.bf td.lc{height:auto;padding:8px 0 2px;width:100%}
  table.bf td.fc{padding:0 0 2px;width:100%;min-height:0}
  table.bf td[nowrap]{white-space:normal}
  table.bf td.fc>input:not([type=checkbox]):not([type=radio]),table.bf td.fc>select,table.bf td.fc>textarea,table.bf td.fc .fz>input,table.bf td.fc>.fz{width:100%;max-width:100%}
  table.bf td.fc .fz{display:flex;flex-wrap:nowrap;width:100%;align-items:center}
  table.bf td.fc .fz{flex-wrap:wrap}
  table.bf td.fc .fz .nm{margin:2px 0 0 0;white-space:normal;flex:1 1 100%;order:5}
  table.bf td.fc .fz>input{flex:1 1 0}
  table.bf textarea{width:100%;max-width:100%;min-width:0}
  table.bf textarea+a.lupe{margin-top:0}
  table.bf td.lc:has(+td.fc>input[type=checkbox]:only-child){width:auto}
  table.bf td.fc>input[type=checkbox]{margin:6px 0}
  .bpct>table.bf+br,.binc>br{display:none}

  /* ---- Tabellen allgemein: eigener Scrollbereich ---- */
  table.bt,table.dt,table.gtd,table.gfi{max-width:100%}
  .binc>table.bt:not(.bpos),.binc>table.dt,.gtd{display:block;overflow-x:auto;white-space:nowrap}
  .gtd td{white-space:normal}

  /* ---- Anmeldung ---- */
  .login{margin:6vh auto}
  .login .btn{height:46px;font-size:16px}
  .login input{min-height:44px}

  /* ---- Lupen-Ebene und Vorschlagsliste ---- */
  .ac-box{left:8px;right:8px;top:8px;bottom:8px;min-height:0;padding:50px 6px 6px}
  .ac-zu{width:36px;height:36px;right:8px;top:7px}
  .ac-list{max-width:calc(100vw - 16px)}
  .ac-combo{white-space:normal}
  .ac-combo tr{display:block;min-height:44px}
  .ac-combo td{padding:8px 10px 0;display:block}
  .ac-combo td+td{width:auto;padding:0 10px;border-bottom:8px solid transparent;color:#666;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .ac-combo tr.ac-hi td{color:#fff}
  .ac-combo tr+tr{border-top:1px solid #ddd}
  html.lupe-popup .head{display:none}
}

/* ---- Tablet bis Handy: Kacheln 2 Spalten ---- */
@media (max-width:699px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Handy ---- */
@media (max-width:599px){
  .head{padding:8px 10px;gap:8px}
  .head .back{order:1}
  .right{order:2;margin-left:auto}
  .modules{order:3;flex:1 1 100%;margin:0;width:100%}
  a.topmenu{font-size:1em}
  .modules .main-item{flex:1 1 0;min-width:0;padding-left:2px;padding-right:2px}
  .back.main-item{min-width:80px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tool .btn{flex:0 1 auto;max-width:100%;white-space:normal;height:auto;min-height:40px;padding-top:4px;padding-bottom:4px}
  .title h1{font-size:1.3em}
  .title .hint{display:none}
  .form,.form.two,.form.one,.form.f4{grid-template-columns:minmax(0,1fr)!important}
  .rt{padding:6px 8px 0}
  .rt a{padding:4px 10px}
  .content,.binc,.stk,.stc{margin-left:10px;margin-right:10px}
  .abschnitt,.binc>p.tabcap{font-size:1.2em}
  .meldung{margin:10px}
  .ac-box{left:4px;right:4px;top:4px;bottom:4px}
}

/* ---- Beleg-Positionstabelle: je Position eine gestapelte Karte ---- */
@media (max-width:899px){
  .binc{overflow-x:visible}
  table.bt.bpos,table.bt.bpos tbody{display:block;width:100%}
  table.bt.bpos tr:first-child{display:none}
  table.bt.bpos tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;margin:0 0 12px;padding:10px;background:#f3f1ec;border:1px solid #c7c7c6;border-radius:6px;position:relative}
  table.bt.bpos tr:has(>td[colspan]){display:block;padding:0;margin:0;background:none;border:0}
  table.bt.bpos tr:has(>td[colspan]):has(hr){display:block}
  table.bt.bpos td{display:block;padding:0;border:0;min-width:0;white-space:normal;text-align:left}
  table.bt.bpos td:empty{display:none}
  table.bt.bpos td[data-l]::before{content:attr(data-l);display:block;color:#666;font-size:.85em;padding-bottom:2px}
  table.bt.bpos td[data-l="Bezeichnung"],table.bt.bpos td[data-l="Produkt"],table.bt.bpos td[data-l="Summe"]{grid-column:1/-1}
  table.bt.bpos td[data-l="Pos"]{grid-column:1}
  table.bt.bpos td[data-l="Typ"]{grid-column:2}
  table.bt.bpos td.r[data-l="Menge"]{text-align:left}
  table.bt.bpos td[data-l="Wert"]{text-align:left;align-self:end}
  table.bt.bpos td.pdc{position:absolute;right:6px;bottom:6px}
  table.bt.bpos td.pdc a.pdel{margin:0;width:auto}
  table.bt.bpos td input:not([type=checkbox]):not([type=hidden]),table.bt.bpos td select,table.bt.bpos td textarea{width:100%;max-width:100%;min-width:0}
  table.bt.bpos td.pn .fz,table.bt.bpos td .fz{display:flex;width:100%}
  table.bt.bpos td .fz>input{flex:1 1 auto;width:100%}
  table.bt.bpos td.r:not([data-l]){display:block;text-align:right;white-space:normal}
  /* Summenzeilen unterhalb: Text links, Betrag rechts */
  table.bt.bpos tr:has(>td[colspan]) td[colspan]{display:block}
  table.bt.bpos tr:has(>td.r[colspan]){display:flex;justify-content:space-between;gap:12px;padding:2px 0}
  table.bt.bpos tr:has(>td.r[colspan]) td{display:block}
}

@media (max-width:1129px){
  .stk{overflow-x:auto}
  .stk table.liste input:not([type=checkbox]){min-width:140px}
}

@media (max-width:1129px){
  select{max-width:100%}
  .content>table.liste,.content>table.ml,.inc>table.ml{display:block;overflow-x:auto;width:100%}
  table.gfi,table.gfi tbody{display:block;width:100%;border-spacing:0}
  table.gfi tr{display:block}
  table.gfi td{display:block;height:auto;padding:0 0 2px;white-space:normal}
  table.gfi td.lc{padding:8px 0 2px}
  table.gfi td.fc{padding-right:0}
  table.gfi td.fc>input:not([type=checkbox]):not([type=radio]),table.gfi td.fc>select,table.gfi td.fc>textarea{width:100%}
}