/* Geräteübergreifende Ergänzungen – wird bewusst als letzte CSS-Datei geladen. */
html,body{max-width:100%}body{overflow-x:clip}button,input,select,textarea{max-width:100%}button,a,summary{touch-action:manipulation}.pricing-mobile-field:not(.pricing-mobile-field-direct){display:contents}

@media(max-width:1280px){
  .app-shell .portal{grid-template-columns:218px minmax(0,1fr)}
  .app-shell .portal-main{padding:22px 22px 36px}
  .app-shell .dashboard-layout{grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr)}
  .app-shell .portal-head{flex-wrap:wrap}
}

@media(max-width:1100px){
  .app-shell .portal{display:block;min-height:calc(100vh - 64px)}
  .app-shell .sidebar{position:sticky;z-index:16;top:64px;display:flex;width:100%;height:auto;align-items:center;gap:10px;padding:9px 14px;overflow:visible;border-right:0;border-bottom:1px solid var(--app-border);background:rgba(10,13,17,.98);box-shadow:0 8px 24px rgba(0,0,0,.22)}
  .app-shell .sidebar .user-box{display:none}
  .app-shell .sidebar .quick-search{width:min(280px,31vw);flex:0 0 auto;margin:0}
  .app-shell .sidebar .quick-search label{display:none}
  .app-shell .sidebar .side-nav{display:flex;min-width:0;flex:1;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;padding:1px 0 4px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .app-shell .sidebar .side-nav a{min-height:39px;flex:0 0 auto;padding:8px 10px;white-space:nowrap;scroll-snap-align:start}
  .app-shell .sidebar .side-nav a.active:before,.app-shell .sidebar .nav-section{display:none}
  .app-shell .portal-main{padding:20px 18px 34px}
  .app-shell .dashboard-layout,.app-shell .message-layout,.app-shell .report-layout,.app-shell .roles-layout,.app-shell .status-admin-layout{grid-template-columns:1fr}
  .app-shell .dashboard-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .reply-composer,.app-shell .role-editor,.app-shell .status-editor{position:static}
  .document-workspace{padding:16px}
}

@media(max-width:900px){
  .grid-3,.app-shell .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .metric-grid,.app-shell .stat-grid,.app-shell .report-metrics,.app-shell .customer-overview-grid,.app-shell .vehicle-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .grid-2,.app-shell .report-tables{grid-template-columns:1fr}
  .app-shell .portal-head>.actions{max-width:100%}
  .app-shell .portal-head>.actions .btn{white-space:normal;text-align:center}
  .app-shell .tabs,.app-shell .customer-file-tabs{justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .app-shell .tabs button,.app-shell .customer-file-tabs a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .app-shell .detail-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .settings-row{grid-template-columns:1fr 1fr}
  .app-shell .settings-row .btn{grid-column:1/-1;justify-self:start}
  .app-shell .order-reference,.app-shell .inquiry-head,.app-shell .section-heading{align-items:flex-start;flex-wrap:wrap}
  .app-shell .appointment-card-summary,.app-shell .customer-appointment-card .appointment-card-summary{grid-template-columns:130px minmax(180px,1fr) minmax(210px,1.2fr) 105px}
}

@media(max-width:820px){
  .nav-toggle{display:grid;width:42px;height:42px;place-items:center;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:1.35rem;line-height:1;cursor:pointer}
  .main-nav{display:none;position:absolute;z-index:40;top:64px;right:14px;left:14px;max-height:calc(100vh - 82px);align-items:stretch;flex-direction:column;gap:5px;padding:13px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:#14191f;box-shadow:0 24px 60px rgba(0,0,0,.55)}
  .main-nav.open{display:flex}.main-nav>a,.main-nav .header-logout{width:100%;justify-content:flex-start;padding:11px 12px;border-radius:8px;text-align:left}.main-nav>a:hover,.main-nav .header-logout:hover{background:#20262d}.main-nav .logout-form{width:100%}
  .app-shell .header-user{display:flex}
  .calendar-weekdays,.calendar-grid,.app-shell .calendar-weekdays,.app-shell .calendar-grid{min-width:0!important}
  .month-calendar,.app-shell .month-calendar{overflow:hidden}
  .calendar-day,.app-shell .calendar-day{min-height:88px;padding:4px}
  .calendar-event,.app-shell .calendar-event{gap:3px;padding:3px 4px;font-size:.57rem}
  .calendar-event-meta{max-width:100%;text-overflow:ellipsis}
  .calendar-toolbar{gap:10px}.calendar-toolbar .btn{flex:1}.calendar-toolbar h2{order:-1}
  .document-bottom{grid-template-columns:1fr}.totals-panel{position:static;max-width:none}.document-editor>.portal-head{align-items:stretch}.document-editor>.portal-head .actions{width:100%}
}

@media(max-width:820px){
  .container,.app-shell .container{width:calc(100% - 24px)}
  .app-shell .portal-main{padding:16px 12px 28px}
  .app-shell .sidebar{top:64px;align-items:stretch;flex-direction:column;padding:8px 12px}
  .app-shell .sidebar .quick-search{width:100%;max-width:none}
  .app-shell .sidebar .side-nav{width:100%}
  .app-shell .sidebar .side-nav a{min-height:38px}
  .app-shell .portal-head{align-items:stretch;flex-direction:column;gap:10px}
  .app-shell .portal-head h1{font-size:1.28rem;line-height:1.2}
  .app-shell .portal-head>.actions{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px}
  .app-shell .portal-head>.actions .btn:only-child{grid-column:1/-1}
  .app-shell .form-grid,.app-shell .settings-row,.form-grid{grid-template-columns:1fr}
  .app-shell .field-wide{grid-column:auto}
  .app-shell .maintenance-box{align-items:flex-start}
  .app-shell .search-panel,.app-shell .list-filter{align-items:stretch;flex-direction:column}
  .app-shell .search-panel input,.app-shell .search-panel select,.app-shell .list-filter input,.app-shell .list-filter select{width:100%;min-width:0!important}
  .app-shell input,.app-shell select,.app-shell textarea,.public-shell input,.public-shell select,.public-shell textarea{font-size:16px}
  .app-shell .btn,.public-shell .btn{min-height:42px}
  .app-shell .inline-form{align-items:stretch;flex-wrap:wrap}
  .app-shell .inline-form input,.app-shell .inline-form select{min-width:0;flex:1 1 150px}
  .app-shell .report-period{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto 42px}
  .app-shell .report-period input{width:100%}
  .app-shell .report-metrics,.app-shell .expense-metrics{grid-template-columns:1fr}
  .app-shell .report-metric{min-height:96px}
  .app-shell .bar-chart{height:210px;gap:3px;padding-inline:8px}.app-shell .bar-value{display:none}
  .app-shell .distribution-grid{grid-template-columns:1fr}

  .app-shell .responsive-table-wrap{overflow:visible;border:0;background:transparent}
  .app-shell table.responsive-table,.app-shell table.responsive-table tbody,.app-shell table.responsive-table tr,.app-shell table.responsive-table td{display:block;width:100%}
  .app-shell table.responsive-table thead{display:none}
  .app-shell table.responsive-table tbody{display:grid;gap:10px}
  .app-shell table.responsive-table tbody tr{overflow:hidden;border:1px solid var(--app-border);border-radius:9px;background:var(--app-surface);box-shadow:0 7px 20px rgba(0,0,0,.12)}
  .app-shell table.responsive-table tbody tr:hover{background:var(--app-surface)}
  .app-shell table.responsive-table td{padding:9px 11px;border-bottom:1px solid var(--app-border-soft);white-space:normal;overflow-wrap:anywhere;text-align:left!important}
  .app-shell table.responsive-table td:last-child{border-bottom:0}
  .app-shell table.responsive-table td:not([colspan])::before{display:block;margin-bottom:3px;color:#778290;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;content:attr(data-label)}
  .app-shell table.responsive-table td[colspan]{padding:20px;text-align:center!important}
  .app-shell table.responsive-table td .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:3px}
  .app-shell table.responsive-table td .actions>*{min-width:0;margin:0}
  .app-shell table.responsive-table td .actions .btn{width:100%;white-space:normal}
  .app-shell table.responsive-table td .inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .app-shell table.responsive-table .line-clamp,.app-shell table.responsive-table .log-path{max-width:100%;white-space:normal}

  .document-items,.app-shell .document-items{overflow:visible}
  .document-item-head,.app-shell .document-item-head{display:none!important}
  .document-item-row,.app-shell .document-item-row,.document-items[data-pricing-grid] .document-item-row,.app-shell .document-items[data-pricing-grid] .document-item-row,.document-items[data-pricing-grid].show-internal-costs .document-item-row,.app-shell .document-items[data-pricing-grid].show-internal-costs .document-item-row{position:relative;display:grid!important;min-width:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:11px;padding:13px!important;border:1px solid var(--line);border-radius:10px;background:#11151a}
  .pricing-mobile-field,.pricing-mobile-field:not(.pricing-mobile-field-direct){display:grid;min-width:0;gap:4px}
  .pricing-mobile-field::before{display:block;color:#7f8995;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;content:attr(data-mobile-label)}
  .pricing-mobile-field[data-mobile-label="Art / Nummer"],.pricing-mobile-field[data-mobile-label="Bezeichnung"]{grid-column:1/-1}
  .pricing-mobile-field[data-mobile-label="Art / Nummer"]{grid-template-columns:1fr 1fr}.pricing-mobile-field[data-mobile-label="Art / Nummer"]::before{grid-column:1/-1}
  .pricing-mobile-field[data-mobile-label="Bezeichnung"] textarea{height:72px}
  .pricing-mobile-field[data-mobile-label="Gesamt"]{justify-content:end;text-align:right}.pricing-mobile-field[data-mobile-label="Gesamt"] strong{font-size:.9rem}
  .pricing-internal-field{display:none!important}.document-items.show-internal-costs .pricing-internal-field{display:grid!important}
  .document-item-row .remove-row,.app-shell .document-item-row .remove-row{position:absolute;top:8px;right:8px;z-index:2}
  .document-item-row>.pricing-mobile-field:first-child,.app-shell .document-item-row>.pricing-mobile-field:first-child{padding-right:38px}
  .app-shell .order-position-footer,.document-savebar{align-items:stretch;flex-direction:column}
  .app-shell .order-position-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .app-shell .order-position-totals span{display:grid;gap:2px;padding:8px;border:1px solid var(--app-border-soft);border-radius:7px;background:#0d1014}
  .document-savebar{display:grid;grid-template-columns:1fr}.document-savebar .btn{width:100%}
  .app-shell .sticky-actions{display:grid;width:100%;grid-template-columns:1fr;position:static}

  .app-shell .appointment-card-summary,.app-shell .customer-appointment-card .appointment-card-summary{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:13px}
  .app-shell .appointment-manage-form{grid-template-columns:1fr;min-width:0}
  .app-shell .appointment-manage-form .appointment-note,.app-shell .appointment-manage-form .overlap-permission.compact,.app-shell .appointment-manage-form .appointment-save{grid-column:auto}
  .app-shell .appointment-manage-form .appointment-save .btn{width:100%}
}

@media(max-width:680px){
  .app-shell .sidebar{top:58px}
  .main-nav{top:58px}
}

@media(max-width:560px){
  .brand-copy strong{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-copy small{display:none}
  .hero{min-height:auto}.hero-content{padding:58px 0}.hero h1{font-size:clamp(2.25rem,12vw,3.4rem)}.lead{font-size:1rem}.trust-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:34px}
  .section{padding:58px 0}.section-title{margin-bottom:26px}.card{padding:20px}.cta{padding:26px}.cta .btn{width:100%}
  .grid-3,.grid-2,.app-shell .grid-3,.app-shell .grid-2{grid-template-columns:1fr}
  .app-shell .metric-grid,.app-shell .stat-grid,.app-shell .customer-overview-grid,.app-shell .vehicle-card-grid,.app-shell .dashboard-side,.app-shell .detail-strip,.app-shell .access-status{grid-template-columns:1fr}
  .app-shell .portal-head>.actions{grid-template-columns:1fr}
  .app-shell .portal-head>.actions .btn{width:100%}
  .app-shell .dashboard-actions,.app-shell .expense-form-footer,.app-shell .expense-list-heading{align-items:stretch;flex-direction:column}
  .app-shell .dashboard-actions .btn{width:100%}
  .app-shell .quick-action-list{grid-template-columns:1fr}
  .app-shell .tabs{margin-inline:-12px;padding-inline:12px}
  .app-shell .panel{padding:14px}.app-shell .card{padding:14px}
  .app-shell .pagination{gap:5px}.app-shell .pagination a{padding:7px 9px}
  .app-shell .role-card-main,.app-shell .admin-protection,.app-shell .vehicle-manage-row{align-items:flex-start}
  .app-shell .role-card-actions,.app-shell .vehicle-manage-row{flex-wrap:wrap}
  .app-shell .vehicle-manage-main{align-items:flex-start;flex-direction:column}
  .app-shell table.responsive-table td .actions{grid-template-columns:1fr}
  .app-shell .report-period{grid-template-columns:38px minmax(0,1fr) 38px}.app-shell .report-period button{grid-column:1/-1}.app-shell .report-period .btn{padding-inline:8px}
  .calendar-weekdays>div,.app-shell .calendar-weekdays>div{padding:5px 1px;font-size:.58rem}
  .calendar-day,.app-shell .calendar-day{min-height:74px;padding:2px}
  .day-number,.app-shell .day-number{width:22px;height:22px;margin-bottom:2px;font-size:.62rem}
  .calendar-event,.app-shell .calendar-event{display:block;min-height:14px;padding:2px 3px;overflow:hidden;font-size:.5rem;text-overflow:ellipsis}
  .calendar-event-meta{display:none}.calendar-event-time{display:block;overflow:hidden;text-overflow:ellipsis}
  .more-events{font-size:.5rem}
  .calendar-toolbar{display:grid;grid-template-columns:1fr 1fr}.calendar-toolbar h2{grid-column:1/-1;font-size:1.05rem}.calendar-toolbar .btn{width:100%;padding-inline:8px;font-size:.68rem}
  .app-shell .order-position-totals{grid-template-columns:1fr}
  .document-workspace{padding:12px}.document-editor .section{padding-top:8px}
  .pricing-mobile-field[data-mobile-label="Art / Nummer"]{grid-template-columns:1fr}
  .pricing-mobile-field[data-mobile-label="Art / Nummer"]::before{grid-column:auto}
  .public-shell .auth-shell{padding:42px 12px}.public-shell .form-card{padding:22px 18px;border-radius:14px}
}

@media(max-width:380px){
  .container,.app-shell .container{width:calc(100% - 18px)}
  .app-shell .portal-main{padding-inline:9px}
  .brand{gap:8px}.brand-mark{width:34px;height:34px}.brand-copy strong{max-width:175px;font-size:.72rem}
  .trust-row{grid-template-columns:1fr}
  .calendar-day,.app-shell .calendar-day{min-height:68px}
}

/* Wartungsseite auf Smartphones bewusst kompakt halten. */
@media(max-width:640px){
  .maintenance-mode-page .site-header .container{width:calc(100% - 24px)}
  .maintenance-mode-page .site-header .nav-wrap{height:60px;min-height:60px}
  .maintenance-mode-page .site-header .brand{min-width:0;gap:8px}
  .maintenance-mode-page .site-header .brand-mark{width:36px;height:36px;flex:0 0 36px;border-radius:9px;font-size:.78rem}
  .maintenance-mode-page .site-header .brand-copy{min-width:0}
  .maintenance-mode-page .site-header .brand-copy strong{max-width:235px;font-size:.68rem;letter-spacing:.045em}
  .maintenance-mode-page .site-header .nav-toggle{width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#0d1116;font-size:1.15rem}
  .maintenance-mode-page .main-nav{top:58px}
  .maintenance-mode-page main{min-height:calc(100vh - 60px)}
  .maintenance-mode-page .maintenance-stage{min-height:calc(100vh - 60px);padding:22px 12px 16px}
  .maintenance-mode-page .maintenance-shell{width:100%}
  .maintenance-mode-page .maintenance-topline{gap:9px;margin-bottom:14px}
  .maintenance-mode-page .maintenance-status{max-width:100%;padding:7px 10px;font-size:.57rem;letter-spacing:.035em}
  .maintenance-mode-page .maintenance-location{gap:7px;font-size:.55rem}
  .maintenance-mode-page .maintenance-location strong{font-size:.62rem}
  .maintenance-mode-page .maintenance-layout{gap:10px}
  .maintenance-mode-page .maintenance-copy,.maintenance-mode-page .maintenance-info{padding:22px 18px;border-radius:12px}
  .maintenance-mode-page .maintenance-copy:before{width:70px;height:2px}
  .maintenance-mode-page .maintenance-copy:after{right:-25px;bottom:-20px;font-size:9rem}
  .maintenance-mode-page .maintenance-kicker{gap:8px;margin-bottom:17px;font-size:.54rem;letter-spacing:.065em}
  .maintenance-mode-page .maintenance-kicker span{padding-right:8px}
  .maintenance-mode-page .maintenance-copy h1{max-width:100%;margin-bottom:15px;font-size:clamp(1.95rem,8vw,2.25rem);line-height:1.04;letter-spacing:-.045em;overflow-wrap:anywhere;hyphens:auto;text-wrap:wrap}
  .maintenance-mode-page .maintenance-lead{font-size:.86rem;line-height:1.62}
  .maintenance-mode-page .maintenance-process{margin:21px 0 19px;padding:13px 12px}
  .maintenance-mode-page .maintenance-process-head{margin-bottom:9px;font-size:.57rem}
  .maintenance-mode-page .maintenance-process-steps{gap:8px;font-size:.47rem;letter-spacing:.035em}
  .maintenance-mode-page .maintenance-eta{align-items:flex-start;gap:10px;margin-bottom:13px}
  .maintenance-mode-page .maintenance-clock{width:31px;height:31px;flex-basis:31px}
  .maintenance-mode-page .maintenance-eta small{font-size:.5rem;letter-spacing:.05em}
  .maintenance-mode-page .maintenance-eta strong{font-size:.69rem;line-height:1.4}
  .maintenance-mode-page .maintenance-note{font-size:.65rem;line-height:1.55}
  .maintenance-mode-page .maintenance-actions{gap:7px;margin-top:18px}
  .maintenance-mode-page .maintenance-primary,.maintenance-mode-page .maintenance-secondary{min-height:43px;padding:8px 12px;font-size:.67rem;border-radius:7px}
  .maintenance-mode-page .maintenance-primary span{font-size:.52rem}
  .maintenance-mode-page .maintenance-brand-panel{padding-bottom:17px}
  .maintenance-mode-page .maintenance-monogram{width:48px;height:48px;flex-basis:48px;border-radius:10px;font-size:.9rem}
  .maintenance-mode-page .maintenance-contact-list>a,.maintenance-mode-page .maintenance-contact-list>div{padding-block:11px}
  .maintenance-mode-page .maintenance-service-strip{margin-top:10px}
  .maintenance-mode-page .maintenance-service-strip>div{padding:11px 13px}
  .maintenance-mode-page .maintenance-footer{gap:10px;padding-top:14px}
}

@media(max-width:390px){
  .maintenance-mode-page .site-header .brand-copy strong{max-width:205px;font-size:.62rem}
  .maintenance-mode-page .maintenance-status{font-size:.53rem}
  .maintenance-mode-page .maintenance-kicker{align-items:flex-start;flex-direction:column;gap:3px}
  .maintenance-mode-page .maintenance-kicker span{padding-right:0;border-right:0}
  .maintenance-mode-page .maintenance-copy h1{font-size:1.9rem}
  .maintenance-mode-page .maintenance-process-steps span:nth-child(2){text-align:center}
  .maintenance-mode-page .maintenance-process-steps span:last-child{text-align:right}
}