/* PES 35 – globale responsive Darstellung
   Reine Darstellungsschicht. Keine Funktions-, Daten- oder Navigationslogik. */

html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0}
*,*::before,*::after{box-sizing:border-box}
img,picture,video,svg{max-width:100%;height:auto}
canvas{max-width:100%}
iframe{max-width:100%;border:0}
button,input,select,textarea{max-width:100%;min-width:0}
input,select,textarea{font-size:16px}
main,.app,.section,.card,.form-card,.modal-card,.training-modal,.training-sheet,.task-shell,.workflow-panel,.notice,.toolbar,.grid,.row{min-width:0}
h1,h2,h3,h4,p,li,label,strong,span{overflow-wrap:anywhere}

/* Tabellen bleiben vollständig, werden auf schmalen Displays horizontal bedienbar. */
.table-wrap,[class*="table-wrap"],.source-doc,.source-table{max-width:100%}
.table-wrap,[class*="table-wrap"]{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.table-wrap table,[class*="table-wrap"] table{width:max-content;min-width:100%;max-width:none}

/* Eingebettete Studienunterlagen: Wörter und Tabellen auf Mobilgeräten lesbar halten.
   Die globale Notfall-Regel overflow-wrap:anywhere darf die Dokumenttabellen nicht
   auf buchstabenbreite Spalten zusammenschieben. */
.source-doc{overflow-x:hidden!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
.source-doc,.source-doc *{overflow-wrap:break-word!important;word-break:normal!important;hyphens:none}
/* Jede Dokumenttabelle scrollt ausschließlich in ihrem eigenen Bereich.
   Dadurch verschiebt ein horizontaler Wisch niemals Absätze oder Überschriften des Dokuments. */
.source-doc center:has(> .source-table){display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.source-doc center:has(> .source-table) > .source-table{margin-left:0;margin-right:0}
.source-doc .source-table{table-layout:auto!important}
.source-doc .source-table td,.source-doc .source-table th{vertical-align:top}
#docModal .modal-head h3{min-width:0;overflow-wrap:break-word!important;word-break:normal!important}
#docModal .modal-head .btn{flex:0 0 auto}

@media(max-width:640px){
  /* Zweispaltige Dokumenttabellen bleiben ohne horizontales Scrollen lesbar. */
  .source-doc .source-table:not(:has(tr > :nth-child(3))){width:100%!important;max-width:100%!important}
  .source-doc .source-table:not(:has(tr > :nth-child(3))) tr > :first-child:not([colspan]){width:34%;min-width:112px}

  /* Drei- und vierspaltige Tabellen benötigen auf Smartphones eine echte Mindestbreite.
     Dadurch wird horizontal gescrollt, statt Überschriften mitten im Wort zu zerlegen. */
  .source-doc .source-table:has(tr > :nth-child(3)){width:520px!important;min-width:520px!important;max-width:none!important}
  .source-doc .source-table:has(tr > :nth-child(4)){width:640px!important;min-width:640px!important;max-width:none!important}
}

/* Dialoge und Bottom-Sheets dürfen niemals über den sichtbaren Bereich hinausragen. */
.modal,.first-login-guide,.ctrl-period-sheet,.fix-day-sheet,.investor-section-menu,.acuity-test-modal{max-width:100vw;max-height:100dvh}
.modal-card,.first-login-guide-card,.ctrl-period-panel,.fix-day-panel,.investor-section-sheet{max-width:100%;max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
.modal-body,.ctrl-period-options,.fix-day-options{min-width:0;-webkit-overflow-scrolling:touch}

/* Flexible Karten und Aktionszeilen. */
.page-title,.page-nav-actions,.header-main,.header-actions,.doc-actions,.training-actions-bottom,.completion-downloads,.fix-control-actions,.acuity-calibration-actions{min-width:0}
.page-title>*{min-width:0}
.btn,.navbtn,.portal-access-btn{white-space:normal}

@media(max-width:1024px){
  main{padding-left:12px;padding-right:12px}
  .card,.form-card{padding:14px}
  .page-title h2{line-height:1.12}
}

@media(max-width:820px){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .app-header{position:sticky;top:0}
  .header-main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .navbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .page-title{gap:9px}
  .page-title h2{font-size:clamp(22px,6.4vw,30px)}
  .notice{padding:12px 13px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
  .completion-grid,.completion-results{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
  .first-login-guide{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
}

@media(max-width:640px){
  main{padding:12px 8px calc(28px + env(safe-area-inset-bottom))}
  .card,.form-card,.workflow-panel{border-radius:13px;padding:12px}
  .page-nav-actions{grid-template-columns:1fr!important}
  .page-nav-actions .btn{min-height:46px}
  .toolbar,.training-actions-bottom,.completion-downloads,.fix-control-actions,.acuity-calibration-actions{width:100%}
  .training-actions-bottom,.completion-downloads,.fix-control-actions,.acuity-calibration-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px}
  .training-actions-bottom .btn,.completion-downloads .btn,.fix-control-actions .btn,.acuity-calibration-actions .btn{width:100%}
  .control-flow-grid,.control-flow-actions,.control-two-col,.control-answer-sides,.training-meta-grid,.package-toolbar,.fix-voice-summary,.fix-voice-actions{grid-template-columns:1fr!important}
  .control-results{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .control-side-answer-left,.control-side-answer-right{grid-template-columns:1fr!important}
  .control-side-choice{width:100%!important;min-height:52px!important}
  .acuity-eye-grid{grid-template-columns:1fr!important}
  .acuity-response-controls{gap:14px}
  .acuity-test-head{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .investor-section-grid{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .login-screen{padding:max(8px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
  .login-card{width:100%;padding:14px 11px;border-radius:15px}
  #loginScreen .portal-entry-header{padding-left:11px;padding-right:11px}
  #loginScreen .portal-language-options{gap:7px}
  #loginScreen .portal-language-option{min-width:0}
  #loginScreen .portal-language-name{font-size:clamp(17px,5.1vw,21px)}
  #loginScreen .portal-language-state{font-size:clamp(12px,3.5vw,14px)}
  #loginScreen .portal-access-btn{width:100%;min-width:0}
  #loginScreen .portal-access-label{font-size:clamp(18px,5.6vw,22px)}
  .navbar-primary{grid-template-columns:1fr 1fr}
  .navbar-system-actions{grid-template-columns:1fr 1fr}
  .navbtn,.system-navbtn{min-width:0}
  .control-results{grid-template-columns:1fr!important}
  .completion-hero{padding:18px 14px}
  .ctrl-period-panel-head,.fix-day-panel-head{padding:13px 14px}
  .ctrl-period-option,.fix-day-option{padding:13px 14px}
}

@media(max-width:340px){
  #loginScreen .portal-language-options{grid-template-columns:1fr}
  #loginScreen .portal-language-option{min-height:74px}
  .navbar-primary,.navbar-system-actions{grid-template-columns:1fr}
  .page-title h2{font-size:21px}
  .btn{padding-left:10px;padding-right:10px}
}

/* Niedrige Querformat-Displays: Inhalt priorisieren und Header verdichten. */
@media(max-height:620px) and (orientation:landscape){
  .app-header{position:relative}
  .header-main{padding-top:9px;padding-bottom:8px}
  .navbar{padding-bottom:8px}
  .navbtn{min-height:42px}
  .modal-card{max-height:100dvh}
  .first-login-guide-card{max-height:96dvh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}