html,body{width:100%;max-width:100%;overflow-x:clip}
body *{min-width:0}
img,svg,video,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}
p,li,td,th,small,strong,a{overflow-wrap:anywhere}
.app-shell,.app-shell>main{width:100%;max-width:100%}
.app-shell>main>div{width:100%}
.overflow-x-auto{max-width:100%}
.modal-panel,.credential-modal-panel,.mcp-modal-panel{max-width:100%}
.field input,.field select,.field textarea,.source-option select,.source-text-input{width:100%}
/* Ankreuzfelder sind keine Textfelder: die volle Breite wuerde sie ueber die
   ganze Zeile ziehen und die Beschriftung wegdruecken. */
.field input[type=checkbox],.field input[type=radio]{width:auto;height:auto;flex:none}
@media(max-width:1023px){.field input[type=checkbox],.field input[type=radio]{width:20px;height:20px}}

@media(max-width:1023px){
  .app-shell{display:block!important}
  .app-sidebar{width:100%;max-width:none}
  .app-sidebar>div:first-child{width:100%}
  .app-sidebar .mb-10{margin-bottom:0}
  .app-menu-toggle{display:grid!important;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.18);border-radius:9px;font-size:20px}
  #nav{width:100%;margin-top:14px}
  #nav.hidden{display:none!important}
  #nav:not(.hidden){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #nav .nav-item{margin:0}
  main>header{position:sticky;width:100%}
  main>.p-6{width:100%;max-width:100%}
  .mcp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credential-card{min-height:auto}
  .backlog-toolbar{flex-wrap:wrap}
  .backlog-filters{flex:1 1 320px;justify-content:flex-end}
  .backlog-filters label{flex:1;min-width:140px}
  .backlog-filters select{width:100%;min-width:0}
  .run-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Querformat auf dem Telefon: die Hoehe ist der knappe Platz, die Kopfzeile
   blaettert deshalb mit. Die Regel muss nach dem sticky oben stehen. */
@media(max-height:560px) and (orientation:landscape){
  main>header{position:static}
}

@media(max-width:800px){
  .mcp-grid{grid-template-columns:1fr}
  .run-summary{grid-template-columns:1fr}
  .backlog-toolbar{align-items:stretch;flex-direction:column}
  .backlog-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .backlog-stats span{padding:10px;border-radius:8px;background:#f7f7f5;text-align:center}
  .backlog-filters{width:100%;justify-content:stretch}
  .logbook-table,.logbook-table tbody,.logbook-table tr,.logbook-table td{display:block;width:100%}
  .logbook-table{min-width:0!important}
  .logbook-table thead{display:none}
  .logbook-table tbody{padding:10px;background:#f7f7f5}
  .logbook-table tr{margin-bottom:10px;padding:15px;border:1px solid #e4e4e1;border-radius:10px;background:#fff}
  .logbook-table td{display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px;padding:7px 0;border:0}
  .logbook-table td:before{content:attr(data-label);color:#888;font-size:11px;font-weight:700;text-transform:uppercase}
}

@media(max-width:640px){
  body:not(.authenticated)>main{grid-template-columns:1fr}
  body>main>section{padding:24px 18px}
  body>main>section:first-child{min-height:auto}
  body>main>section:first-child .py-20{padding-top:48px;padding-bottom:48px}
  body>main>section:first-child h1{font-size:clamp(2rem,10vw,2.75rem)}
  .app-sidebar{padding:12px 14px!important}
  #nav:not(.hidden){grid-template-columns:1fr}
  main>header{flex-wrap:wrap;padding:10px 16px}
  main>header>p{flex:1 1 150px}
  main>header .btn-primary{flex:0 1 auto;max-width:145px}
  main>.p-6{padding:18px 14px}
  main>.p-6>section:first-child h1{font-size:clamp(1.75rem,9vw,2.2rem)}
  .modal{padding:0}
  .modal-panel,.credential-modal-panel,.mcp-modal-panel{height:min(94dvh,900px);max-height:94dvh;border-radius:16px 16px 0 0}
  .modal-panel>div:last-child,.credential-modal-panel>div:last-child,.mcp-modal-panel>div:last-child{flex-wrap:wrap;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .modal-panel>div:last-child button,.credential-modal-panel>div:last-child button,.mcp-modal-panel>div:last-child button{min-height:42px;flex:1}
  .customer-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-card-actions button{width:100%;white-space:normal;line-height:1.25}
  .mcp-policy-bar{padding:14px}
  .policy-stats{justify-content:space-between}
  .mcp-card{padding:14px}
  .mcp-actions>div{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcp-actions button{white-space:normal;line-height:1.25}
  .backlog-filters{display:grid;grid-template-columns:1fr}
  .backlog-stats{gap:5px}
  .backlog-stats span{font-size:11.5px}
  .backlog-item{padding:14px 12px;gap:10px}
  .backlog-item-head{align-items:flex-start}
  .backlog-effort{width:100%}
  .logbook-table td{grid-template-columns:88px minmax(0,1fr)}
  .settings-editor textarea,.customer-template-box textarea{min-height:180px}
  .knowledge-file{max-width:100%}
  .knowledge-file strong{max-width:min(180px,50vw)}
}

@media(max-width:380px){
  main>header .btn-primary{width:100%;max-width:none}
  .backlog-stats{grid-template-columns:1fr}
  .customer-card-actions,.mcp-actions>div{grid-template-columns:1fr}
  .logbook-table td{display:block}
  .logbook-table td:before{display:block;margin-bottom:4px}
}