/* Retter-Portal v1.2.76 Nur Inhaltsbereich: Smartphone-/Tablet-Stabilität und portalisierte Smart-Suchen. Header-Dateien bleiben bewusst unberührt. */ /* Smart-Suchen werden durch app.js direkt unter eingehängt. Dadurch können Karten, Formulare, Tabellen und die iOS-Tastatur die Trefferliste nicht verdecken. */ html body .smart-select-results.smart-select-popover{ position:fixed!important; left:var(--smart-popover-left)!important; top:var(--smart-popover-top)!important; right:auto!important; bottom:auto!important; width:var(--smart-popover-width)!important; min-width:0!important; max-width:calc(100vw - 20px)!important; max-height:var(--smart-popover-max-height)!important; margin:0!important; padding:8px!important; display:grid!important; gap:6px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; border:1px solid rgba(148,163,184,.28)!important; border-radius:18px!important; background:#111c30!important; box-shadow:0 28px 90px rgba(0,0,0,.48)!important; z-index:2147483646!important; transform:none!important; isolation:isolate!important; -webkit-overflow-scrolling:touch!important; } html body[data-theme="light"] .smart-select-results.smart-select-popover{ background:#fff!important; border-color:rgba(100,116,139,.28)!important; box-shadow:0 28px 80px rgba(15,23,42,.24)!important; } html body .smart-select-results.smart-select-popover .smart-select-option{ width:100%!important; min-width:0!important; max-width:100%!important; padding:11px 12px!important; border-radius:13px!important; text-align:left!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } html body .smart-select-results.smart-select-popover .smart-select-option strong, html body .smart-select-results.smart-select-popover .smart-select-option small{ display:block!important; min-width:0!important; max-width:100%!important; line-height:1.25!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } /* Ein leerer Fahrzeugplatz besitzt nichts, das entfernt werden könnte. */ html body [data-incident-vehicle-remove][hidden]{display:none!important;} /* Robuste Grundregeln ausschließlich im Seiteninhalt. */ html body .app-shell .main .content, html body .app-shell .main .content :where(.card,.form-grid,.form-subcard,.grid,.table-wrap,.data-table-card,.checks-table-wrap,label,.form-section,.actions){ min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } html body .app-shell .main .content :where(input,select,textarea,button,.btn){ min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } html body .app-shell .main .content :where(h1,h2,h3,h4,p,span,strong,small,label,th,td){ word-break:normal!important; overflow-wrap:break-word!important; hyphens:none!important; } html body .app-shell .main .content .form-section{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:12px!important; flex-wrap:wrap!important; } html body .app-shell .main .content .form-section > strong{ flex:0 0 auto!important; line-height:1.25!important; } html body .app-shell .main .content .form-section > span{ flex:1 1 320px!important; min-width:0!important; line-height:1.45!important; } html body .app-shell .main .content :where(.pill,.status,.role){ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:fit-content!important; min-width:0!important; max-width:100%!important; min-height:34px!important; padding:7px 12px!important; line-height:1.12!important; text-align:center!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } /* Tablet: desktopähnlich, aber ohne gequetschte Tabellen/Formulare. */ @media (min-width:761px) and (max-width:1180px){ html body .app-shell .main .content{ padding-left:clamp(16px,2.4vw,24px)!important; padding-right:clamp(16px,2.4vw,24px)!important; } html body .app-shell .main .content :where(.form-grid,.form-grid.two,.form-grid.three,.grid.two,.grid.three){ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; align-items:start!important; } html body .app-shell .main .content :where(.full,.form-subcard,.form-actions,.smart-person-picker){ grid-column:1/-1!important; } html body .app-shell .main .content :where(.card,.form-subcard){ padding:clamp(16px,2.2vw,22px)!important; border-radius:22px!important; } html body .app-shell .main .content :where(.table-wrap,.data-table-card,.checks-table-wrap){ width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:visible!important; -webkit-overflow-scrolling:touch!important; } html body .app-shell .main .content :where(.table-wrap,.data-table-card,.checks-table-wrap) table{ table-layout:auto!important; width:100%!important; min-width:max-content!important; } html body .app-shell .main .content :where(.table-wrap,.data-table-card,.checks-table-wrap) :where(th,td){ min-width:84px!important; max-width:260px!important; padding:12px 10px!important; line-height:1.28!important; vertical-align:middle!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } html body .app-shell .main .content :where(.table-wrap,.data-table-card,.checks-table-wrap) td:has(:is(.pill,.status,.role)){ min-width:130px!important; } html body .app-shell .main .content :where(.pill,.status,.role){ font-size:clamp(.72rem,1.25vw,.86rem)!important; padding:7px 10px!important; } html body .app-shell .main .content .page-head{ gap:18px!important; padding:clamp(22px,3vw,34px)!important; } html body .app-shell .main .content .page-head h1{ font-size:clamp(2.4rem,5.1vw,4.4rem)!important; line-height:.98!important; } html body .app-shell .main .content .incident-vehicle-meta-grid{ grid-template-columns:minmax(170px,240px) minmax(0,1fr)!important; } } /* Smartphone: keine überlappenden Kästchen, keine buchstabenweisen Umbrüche. */ @media (max-width:760px){ html body .app-shell .main .content{ padding:14px!important; overflow-x:hidden!important; } html body .app-shell .main .content :where(.card,.form-subcard,.table-wrap,.data-table-card,.checks-table-wrap){ width:100%!important; max-width:100%!important; padding:16px!important; border-radius:20px!important; overflow:visible!important; } html body .app-shell .main .content :where(.form-grid,.form-grid.two,.form-grid.three,.form-grid.four,.grid.two,.grid.three,.incident-vehicle-meta-grid,.incident-vehicle-row-head,.incident-crew-grid,.unit-choice-grid){ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:13px!important; align-items:start!important; } html body .app-shell .main .content :where(.full,.form-subcard,.form-actions,.smart-person-picker){ grid-column:1!important; } html body .app-shell .main .content label{ display:grid!important; width:100%!important; min-width:0!important; gap:7px!important; line-height:1.25!important; } html body .app-shell .main .content :where(input,select,textarea){ width:100%!important; min-width:0!important; max-width:100%!important; font-size:16px!important; /* verhindert iOS-Zoom und Layoutsprünge */ } html body .app-shell .main .content .form-section{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:6px!important; } html body .app-shell .main .content .form-section > :where(strong,span){ width:100%!important; min-width:0!important; max-width:100%!important; } html body .app-shell .main .content .incident-vehicle-row{ padding:13px!important; gap:13px!important; border-radius:18px!important; } html body .app-shell .main .content .incident-vehicle-row-head .incident-vehicle-remove, html body .app-shell .main .content [data-incident-vehicle-remove]{ justify-self:start!important; width:auto!important; } html body .app-shell .main .content .smart-select-field{ position:relative!important; z-index:auto!important; overflow:visible!important; } html body .app-shell .main .content .smart-select-field.is-open{ z-index:2147483000!important; } html body .app-shell .main .content :where(.pill,.status,.role){ min-height:36px!important; padding:8px 11px!important; font-size:.83rem!important; line-height:1.15!important; } html body .app-shell .main .content .page-head{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px!important; padding:20px!important; } html body .app-shell .main .content .page-head h1{ font-size:clamp(2rem,10vw,3.2rem)!important; line-height:1!important; } html body .app-shell .main .content .page-head .actions, html body .app-shell .main .content .form-actions{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:9px!important; width:100%!important; } html body .app-shell .main .content .page-head .actions .btn, html body .app-shell .main .content .form-actions .btn{ width:100%!important; justify-content:center!important; } }