.hidden{display:none!important}
button,a,select,input,textarea{touch-action:manipulation}

@media(min-width:1024px){
  .app-shell{grid-template-columns:248px minmax(0,1fr)}
  .app-sidebar{position:sticky;top:0;height:100vh;min-height:100vh;flex-direction:column}
  .app-nav,.app-profile{display:block!important}
  .app-menu-toggle{display:none!important}
}

.breadcrumb-home{color:#666;text-decoration:none;transition:color .15s}.breadcrumb-home:hover{color:#000;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1023px){
  body{overflow-x:hidden}
  aside{min-height:auto!important;position:relative!important;top:auto!important;padding:16px 20px!important}
  aside .sidebar-brand img{width:34px;height:34px}
  aside .sidebar-brand{min-width:0}
  #nav{padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
  #nav .nav-item{min-height:44px}
  main>header{top:0!important;min-height:64px;height:auto;padding:12px 24px;gap:16px}
  main>header>p{min-width:0}
  .modal-panel{max-width:680px}
  main>header{align-items:center;padding:11px 20px}
  main>header>p{font-size:12px;line-height:1.4}
  main>header .btn-primary{max-width:155px;padding:9px 11px;text-align:center;font-size:12px;line-height:1.35}
  main>.p-6{padding:22px 20px}
  main>.p-6>section:first-child{margin-bottom:24px}
  main>.p-6>section:first-child h1{font-size:30px;line-height:1.15}
  main>.p-6>section:first-child>div:last-child{font-size:13px}
  .search{width:100%}.search input{width:100%;min-width:0}

  #reports>.p-5{padding:18px}
  #reports>.p-5>div:last-child{width:100%}
  #reports>.overflow-x-auto{overflow:visible}
  #reports table,#reports tbody,#reports tr,#reports td{display:block;width:100%}
  #reports table{min-width:0!important}
  #reports thead{display:none}
  #reports tbody{padding:10px;background:#f7f7f5}
  #reports tbody tr{margin:0 0 10px;padding:16px;border:1px solid #e4e4e1;border-radius:12px;background:#fff}
  #reports tbody tr:last-child{margin-bottom:0}
  #reports tbody tr:hover{background:#fff}
  #reports td{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border:0}
  #reports td:first-child{display:block;padding-top:0;padding-bottom:13px;border-bottom:1px solid #eee}
  #reports td:before{content:attr(data-label);color:#888;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
  #reports td:first-child:before{display:none}
  #reports td:last-child{padding-bottom:0}
  #reports>.px-6{align-items:flex-start;flex-direction:column;gap:5px;padding:14px 18px}

  .modal{align-items:flex-end}
  .modal-panel,.credential-modal-panel,.mcp-modal-panel{width:100%!important;max-width:none!important;height:min(92dvh,820px);max-height:92dvh;margin:auto 0 0;border-radius:18px 18px 0 0}
  .modal-panel>div:first-child,.credential-modal-panel>div:first-child{padding:18px 20px}
  .modal-panel form,.credential-modal-panel form{padding:18px 20px}
  .modal-actions{align-items:stretch;flex-direction:column-reverse;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .modal-actions>button,.modal-actions>div,.modal-actions>div>button{width:100%}
  .modal-actions>div{display:grid;grid-template-columns:1fr}
  .modal-actions button{min-height:44px;white-space:normal}
  .source-option{grid-template-columns:auto 1fr}
  .source-option>input{grid-row:1}.source-option>.source-logo{grid-row:1}.source-option>span{grid-column:2}
  .tag-input input{min-width:150px}
  .grid.grid-cols-2{grid-template-columns:1fr}

  .customer-grid{grid-template-columns:1fr}
  .customer-card{padding:18px}.customer-card-actions{flex-wrap:wrap}.customer-card-actions button{min-height:38px}
  .customer-template-head,.customer-template-footer{align-items:flex-start;flex-direction:column}
  .customer-template-box textarea{min-height:220px}
  .credential-card{padding:20px}
  .mcp-card{grid-template-columns:auto minmax(0,1fr)}
  .mcp-card>.status{grid-column:2;width:max-content}
  .mcp-details,.mcp-actions{grid-column:1/-1}
  .mcp-actions{align-items:flex-start;flex-direction:column;gap:10px}
  .mcp-actions>div{flex-wrap:wrap}
  .policy-stats{width:100%}
  .backlog-item{grid-template-columns:auto minmax(0,1fr)}
  .backlog-stats strong{font-size:19px}
  .todo{grid-template-columns:1fr;gap:8px}.todo>.priority{width:max-content}.todo>span:last-child{display:block}
}

@media(max-width:420px){
  .brand-lockup strong,.sidebar-brand strong{font-size:15px}
  main>header{padding-inline:16px}
  main>.p-6{padding-inline:16px}
  main>header .btn-primary{max-width:142px}
  .scope-toggle{width:100%}.scope-toggle button{flex:1}
  .backlog-stats{gap:10px}.backlog-stats span{font-size:11px}.backlog-stats strong{display:block;margin-bottom:3px}
  .backlog-toolbar{padding:16px}.backlog-filters{width:100%}
  .backlog-content h3{font-size:15px}
  #reports td{grid-template-columns:92px minmax(0,1fr)}
}

/* ---------------------------------------------------------------------------
   Bedienbarkeit auf Touchgeräten

   Drei Regeln gelten unterhalb von 1024 Pixeln durchgängig:
   1. Alles Antippbare misst mindestens 44 Pixel in der Höhe.
   2. Eingabefelder tragen 16 Pixel Schrift, sonst zoomt iOS Safari beim Fokus.
   3. Beschriftungen, Auszeichnungen und Zähler bleiben bei mindestens 11 Pixeln.
   --------------------------------------------------------------------------- */

@media(max-width:1023px){
  /* Die Kontozeile teilt sich den Schalter mit der Navigation, damit Abmelden
     ohne dauerhaft sichtbare Seitenleiste erreichbar bleibt. */
  .app-profile{width:100%;margin-top:14px}
  .app-profile .user-avatar{flex:none}
  .app-profile .user-avatar b{font-size:11px}
  .project-favicon b{font-size:11px}
  .project-favicon--inline b{font-size:8px}
  .app-profile form button{display:grid;place-items:center;min-width:44px;min-height:44px;font-size:18px}
  .lang-switch a{min-height:38px;display:inline-flex;align-items:center;padding:5px 14px}
  .app-sidebar{align-items:flex-start;flex-wrap:wrap}
  .app-sidebar>.w-full{min-width:0}

  .btn-primary,.btn-secondary{min-height:44px}
  .icon-btn{min-width:44px;height:44px}

  /* Suchfelder sind bis hierhin nur so hoch wie ihre Schrift. */
  .search{height:46px;padding:0 12px}
  .search input{width:100%;min-width:0;height:100%;font-size:16px}

  .field input,.field select,.field textarea,.source-option select,
  input[type=text],input[type=email],input[type=search],input[type=password],
  input[type=number],input[type=url],input[type=date],input[type=time],
  select,textarea{min-height:46px;font-size:16px}
  textarea{min-height:120px;line-height:1.5}
  /* Eine Mehrfachauswahl zeigt ihre Optionen; eine feste Zeilenhoehe wuerde
     sie auf eine Zeile zusammenziehen. */
  select[multiple]{min-height:140px;height:auto;padding:6px}
  select[multiple] option{padding:9px 6px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .tag-input{min-height:52px}
  .tag-input input{min-height:38px;min-width:0;font-size:16px}

  .scope-toggle button{min-height:44px;padding-inline:14px}
  /* Der Verbindungshinweis im Seitenkopf ist ein Link zur Statusseite und
     braucht deshalb ebenfalls eine Fingerfläche. */
  .system-status{min-height:44px}
  .backlog-link,.analytics-link{display:inline-flex;align-items:center;min-height:44px}
  /* Der Reporttitel oeffnet die Detailansicht und ist damit die wichtigste
     Schaltflaeche der Karte. */
  .report-title{display:flex;align-items:center;width:100%;min-height:44px;padding-block:2px}
  .nav-item{min-height:46px}

  /* Aufklappbare Abschnitte tragen die Bedienfläche im summary. */
  summary{min-height:44px;display:flex;align-items:center}

  /* Auszeichnungen und Zähler bleiben lesbar. */
  .eyebrow{font-size:11.5px}
  .priority{font-size:11px;padding:.3rem .5rem}
  .status,.badge{font-size:11px}
  .badge{font-size:11px!important}
  .avatar{width:30px;height:30px;font-size:11px}
  .metric p{font-size:12.5px}
  .metric>span:last-child{font-size:11.5px}
  .todo p{font-size:12px}
  .todo>span:last-child{font-size:11.5px}
  .connection p{font-size:12px}
  .source-option>span strong,.source-option>span small{font-size:12.5px}
  .recipient-tag{font-size:12px;padding:.4rem .55rem}
  .recipient-tag button{min-width:24px;min-height:24px}

  /* Umbruchsichere Ausgabe langer Domains, Adressen und Token. */
  code,.break-anywhere,td a,.connection strong,.customer-card strong{overflow-wrap:anywhere}
}

/* Telefone: Aktionsreihen stapeln, damit keine Schaltfläche schmaler wird als
   ein Finger breit ist. */
@media(max-width:640px){
  .users-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px;width:100%}
  .users-actions button{width:100%;min-height:44px;padding:6px 8px;font-size:12px;white-space:normal}
  .users-project-option{min-height:52px}
  .mcp-actions>div{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
  .mcp-actions button{width:100%;min-height:44px}
  .backlog-comment-actions>button,.backlog-comments summary,.backlog-reply summary{min-height:44px}
  .backlog-comment-form button{width:100%;min-height:46px;justify-self:stretch}
  .modal-actions button{min-height:46px}
}



/* Querformat auf dem Telefon: die Höhe ist der knappe Platz. Dialoge nutzen
   die volle Fläche und legen ihre Schaltflächen nebeneinander, damit vom
   Formular mehr als eine Zeile sichtbar bleibt. */
@media(max-height:560px) and (orientation:landscape){
  .modal-panel,.credential-modal-panel,.mcp-modal-panel{height:100dvh;max-height:100dvh;border-radius:0}
  .modal-panel>div:first-child,.credential-modal-panel>div:first-child{padding:12px 20px}
  .modal-panel>div:first-child h3,.modal-panel>div:first-child h2{font-size:17px}
  .modal-actions{align-items:center;flex-direction:row;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .modal-actions>button,.modal-actions>div,.modal-actions>div>button{width:auto}
  .modal-actions>div{display:flex;grid-template-columns:none;gap:8px}
  .modal-panel>div:last-child,.credential-modal-panel>div:last-child,.mcp-modal-panel>div:last-child{flex-wrap:nowrap}
}