/* safeSALE v220 – additive Bildschirmdarstellung, keine Beleg-/Preislogik.
 * Ausschließlich an data-ss-responsive gebunden; die vorhandenen Module bleiben erhalten.
 * Weder feste Desktop-Verkleinerung/zoom noch globales Abschneiden von overflow.
 */
body[data-ss-responsive="220"] { --ss220-nav-height: 72px; }
body[data-ss-responsive="220"] .wrap {
    width:100%; max-width:none; min-width:0; margin-inline:0;
    padding-inline:clamp(8px, 1.25vw, 20px); box-sizing:border-box;
}
body[data-ss-responsive="220"] .wrap :is(.card,.full,.two,.grid,.grid-3,.form-grid,.form-grid-2,.form-grid-3,
    .lead-compact-grid,.lead-layout-grid,.lead-section-layout-host,.pro-inner-grid,.ss218-config-grid,
    .ss218-fields,.ss218-group-card,.offer-builder-workspace) { min-width:0; max-width:100%; }
body[data-ss-responsive="220"] :is(.two,.grid,.grid-3,.form-grid,.form-grid-2,.form-grid-3,
    .lead-compact-grid,.lead-layout-grid,.lead-section-layout-host,.pro-inner-grid,
    .ss218-config-grid,.ss218-fields,.offer-builder-workspace) > * { min-width:0; }
body[data-ss-responsive="220"] .wrap :is(input,select,textarea) { box-sizing:border-box; max-width:100%; }
body[data-ss-responsive="220"] .wrap :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { min-width:0; }
body[data-ss-responsive="220"] .wrap :is(h1,h2,h3,h4,label,.muted,.small,.lead-compact-main,.lead-compact-sub) {
    overflow-wrap:anywhere;
}
body[data-ss-responsive="220"] .wrap :is(.btn,.ss218-tabs button) { white-space:normal; overflow-wrap:anywhere; }
body[data-ss-responsive="220"] .wrap :is(.split-head,.section-title,.offer-workspace-title,.offer-config-head,
    .ss218-search,.ss218-tabs,.ss218-group-footer) { flex-wrap:wrap; }
body[data-ss-responsive="220"] .wrap :is(.split-head,.section-title,.offer-workspace-title,.offer-config-head,
    .ss218-head,.ss218-group-footer) > * { min-width:0; max-width:100%; }

/* Die allgemeine Eingabefeldregel darf Radio/Checkbox nicht auf Kartenbreite ziehen.
 * Insbesondere Safari behandelt padding/min-height auf nativen Radios anders als Chrome.
 * Keine Berechtigungs-/required-/checked-Attribute und keine Werte werden angefasst.
 */
body[data-ss-responsive="220"] :is(.billing-model-choice,.shop-option-card-head,.ss-required-control,.ss218-check)
    > input:is([type="radio"],[type="checkbox"]) {
    appearance:auto; -webkit-appearance:auto; display:inline-block;
    flex:0 0 18px; width:18px!important; min-width:18px!important; max-width:18px!important;
    height:18px!important; min-height:18px!important; max-height:18px!important;
    padding:0!important; margin:2px 0 0!important; border:initial; border-radius:initial;
    background:initial; box-shadow:none;
}
body[data-ss-responsive="220"] .billing-model-choice {
    display:grid!important; grid-template-columns:18px minmax(0,1fr)!important;
    align-items:start!important; gap:10px; min-width:0; width:auto;
    height:auto!important; min-height:0!important; margin:0;
}
body[data-ss-responsive="220"] .billing-model-choice > span {
    display:block; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
body[data-ss-responsive="220"] .billing-model-choice:focus-within {
    outline:2px solid var(--accent,#2f6fed); outline-offset:2px;
}
body[data-ss-responsive="220"] .ss220-billing-model-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
body[data-ss-responsive="220"] .offer-meta-card {
    container:ss220-meta / inline-size; overflow:visible;
}
body[data-ss-responsive="220"] .form-grid,
body[data-ss-responsive="220"] .form-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-ss-responsive="220"] .form-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Angebotsarbeitsplatz: drei Bereiche erst bei genügend echter Browserbreite. */
body[data-ss-responsive="220"] .offer-builder-workspace {
    grid-template-columns:minmax(280px,24%) minmax(0,1fr) minmax(240px,20%);
    grid-template-areas:"catalog positions summary"; gap:14px; align-items:start;
}
body[data-ss-responsive="220"] .offer-builder-catalog { grid-area:catalog; }
body[data-ss-responsive="220"] .offer-builder-main { grid-area:positions; }
body[data-ss-responsive="220"] .offer-builder-summary { grid-area:summary; }
body[data-ss-responsive="220"] :is(.offer-builder-catalog,.offer-builder-summary) {
    top:calc(var(--ss220-nav-height) + 12px);
}
body[data-ss-responsive="220"] .offer-position-list-card { container:ss220-positions / inline-size; }
body[data-ss-responsive="220"] .offer-position-card {
    grid-template-columns:28px minmax(0,1fr) 76px 90px 76px 106px 96px;
}
body[data-ss-responsive="220"] .offer-position-card > * { min-width:0; }
body[data-ss-responsive="220"] .offer-position-actions { grid-column:auto; flex-wrap:wrap; }
body[data-ss-responsive="220"] .offer-position-total { white-space:normal; overflow-wrap:anywhere; }
body[data-ss-responsive="220"] .shop-option-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
body[data-ss-responsive="220"] .article-catalog-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
body[data-ss-responsive="220"] .offer-catalog-actions { grid-template-columns:minmax(0,1fr) auto; }
body[data-ss-responsive="220"] .offer-catalog-list .article-check-qty-wrap {
    grid-template-columns:36px minmax(55px,70px) minmax(0,1fr);
}

/* Formulare und native Datumsfelder bleiben nativ: keine Kalenderdaten/Picker ersetzen. */
body[data-ss-responsive="220"] input:is([type="date"],[type="datetime-local"],[type="time"]) {
    width:100%; min-width:0; max-width:100%; color-scheme:light;
}
body[data-ss-responsive="220"] input::-webkit-date-and-time-value { text-align:left; min-width:0; }
body[data-ss-responsive="220"] :is(.google-address-box,.google-address-autocomplete) {
    width:100%; min-width:0; max-width:100%; overflow:visible; box-sizing:border-box;
}
/* Öffentlich unterstütztes Host-Styling; kein Zugriff auf Googles Shadow-DOM. */
body[data-ss-responsive="220"] gmp-place-autocomplete {
    display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box;
    color-scheme:light!important; background-color:#fff; color:var(--text,#172033);
}

/* Tabellen bleiben echte Tabellen. Nur ihre eigene Region scrollt, nicht die ganze Seite. */
body[data-ss-responsive="220"] :is(.ss220-table-scroll,.ss218-scroll,.contact-table-wrap,.lead-import-preview) {
    min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
}
body[data-ss-responsive="220"] .ss220-table-scroll:focus-visible { outline:2px solid var(--accent,#2f6fed); outline-offset:2px; }
body[data-ss-responsive="220"] .ss220-table-scroll > table { width:100%; }

/* Rechnung und Gutschrift: dieselben Komponenten; vorhandene Preis-JS bleibt unverändert. */
body[data-ss-responsive="220"] .ss218-fields {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}
body[data-ss-responsive="220"] .ss218-config-grid {
    grid-template-columns:minmax(260px,32%) minmax(0,1fr);
}
body[data-ss-responsive="220"] .ss218-builder { container:ss220-document / inline-size; }
body[data-ss-responsive="220"] .ss218-group-card { container:ss220-document-position / inline-size; }
body[data-ss-responsive="220"] .ss218-option { grid-template-columns:minmax(0,1fr) 85px 85px; }
body[data-ss-responsive="220"] .ss218-option > * { min-width:0; }
body[data-ss-responsive="220"] .ss218-option small { overflow-wrap:anywhere; }
body[data-ss-responsive="220"] .ss218-catalog button > * { min-width:0; overflow-wrap:anywhere; }
body[data-ss-responsive="220"] .ss218-catalog strong { white-space:normal; text-align:right; }
body[data-ss-responsive="220"] :is(.ss218-live-total,.ss218-totals>div,.offer-summary-line) { flex-wrap:wrap; }
body[data-ss-responsive="220"] .ss218-live-total > * { min-width:0; overflow-wrap:anywhere; }
body[data-ss-responsive="220"] .ss218-tabs { gap:4px; }
body[data-ss-responsive="220"] .ss218-kpis { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }

/* Navigationshöhe folgt dem Zeilenumbruch. Menüs bleiben per Layout-JS im Sichtbereich. */
body[data-ss-responsive="220"] .nav { max-width:100%; flex-wrap:wrap; gap:10px 14px; }
body[data-ss-responsive="220"] .nav-dropdown-menu {
    max-width:calc(100vw - 24px); max-height:var(--ss220-menu-height,70vh);
    overflow-y:auto; transform:translateX(var(--ss220-menu-shift,0px));
}
body[data-ss-responsive="220"] .nav-dropdown-menu a { white-space:normal; overflow-wrap:anywhere; }

@media(max-width:1499px) {
    body[data-ss-responsive="220"] .offer-builder-workspace {
        grid-template-columns:minmax(260px,30%) minmax(0,1fr);
        grid-template-areas:"catalog positions" "summary positions";
    }
    body[data-ss-responsive="220"] :is(.offer-builder-catalog,.offer-builder-summary) { position:static; }
    body[data-ss-responsive="220"] .ss220-billing-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1100px) {
    body[data-ss-responsive="220"] .form-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:999px) {
    body[data-ss-responsive="220"] .offer-builder-workspace {
        grid-template-columns:minmax(0,1fr); grid-template-areas:"catalog" "positions" "summary";
    }
    body[data-ss-responsive="220"] .ss218-config-grid { grid-template-columns:minmax(0,1fr); }
    body[data-ss-responsive="220"] .offer-catalog-list { max-height:350px; }
    body[data-ss-responsive="220"] .ss218-catalog { max-height:300px; }
    body[data-ss-responsive="220"] .ss218-savebar { position:static; }
}
@media(max-width:640px) {
    body[data-ss-responsive="220"] :is(.form-grid,.form-grid-2,.form-grid-3,.ss220-billing-model-grid) { grid-template-columns:minmax(0,1fr); }
    body[data-ss-responsive="220"] .nav { padding:10px 12px; }
    body[data-ss-responsive="220"] .nav .safesale-brand { flex-basis:100%; }
    body[data-ss-responsive="220"] .wrap .card { padding:12px; }
    body[data-ss-responsive="220"] .ss218-inline input[name="reason"] { min-width:0; flex-basis:100%; }
    body[data-ss-responsive="220"] .wrap :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea) { font-size:16px; }
    body[data-ss-responsive="220"] .ss218-search > * { flex:1 1 180px; }
}
/* Kurze Fenster/hoher Zoom: keine festhängenden Seitenleisten, die den Inhalt verdecken. */
@media(max-height:700px) {
    body[data-ss-responsive="220"] :is(.offer-builder-catalog,.offer-builder-summary,.ss218-savebar) { position:static; }
}

/* Reale Containerbreite ist entscheidend, nicht Monitorauflösung. */
@container ss220-meta (max-width:1000px) {
    body[data-ss-responsive="220"] :is(.ss220-billing-model-grid,.offer-meta-card .form-grid-3) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container ss220-meta (max-width:600px) {
    body[data-ss-responsive="220"] :is(.ss220-billing-model-grid,.offer-meta-card .form-grid-3) { grid-template-columns:minmax(0,1fr); }
}
@container ss220-positions (max-width:850px) {
    body[data-ss-responsive="220"] .offer-position-card { grid-template-columns:28px repeat(3,minmax(0,1fr)); }
    body[data-ss-responsive="220"] .offer-position-name { grid-column:2/-1; }
    body[data-ss-responsive="220"] .offer-position-card > .offer-line-field:nth-child(3) { grid-column:2; }
    body[data-ss-responsive="220"] .offer-position-total { grid-column:2/4; text-align:left; }
    body[data-ss-responsive="220"] .offer-position-actions { grid-column:4; }
}
@container ss220-positions (max-width:430px) {
    body[data-ss-responsive="220"] .offer-position-card { grid-template-columns:28px repeat(2,minmax(0,1fr)); }
    body[data-ss-responsive="220"] .offer-position-card > .offer-line-field:nth-child(5) { grid-column:2; }
    body[data-ss-responsive="220"] .offer-position-total { grid-column:3; text-align:right; }
    body[data-ss-responsive="220"] .offer-position-actions { grid-column:2/-1; justify-content:flex-end; }
}
@container ss220-document-position (max-width:420px) {
    body[data-ss-responsive="220"] .ss218-option { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body[data-ss-responsive="220"] .ss218-option > :first-child { grid-column:1/-1; }
}
/* Alte Browser ohne Container Queries erhalten ein konservatives gestapeltes Positionslayout. */
@supports not (container-type:inline-size) {
    body[data-ss-responsive="220"] .offer-position-card { grid-template-columns:28px repeat(2,minmax(0,1fr)); }
    body[data-ss-responsive="220"] .offer-position-name { grid-column:2/-1; }
    body[data-ss-responsive="220"] .offer-position-card > .offer-line-field:nth-child(3),
    body[data-ss-responsive="220"] .offer-position-card > .offer-line-field:nth-child(5) { grid-column:2; }
    body[data-ss-responsive="220"] .offer-position-total { grid-column:3; text-align:right; }
    body[data-ss-responsive="220"] .offer-position-actions { grid-column:2/-1; }
    body[data-ss-responsive="220"] .ss218-option { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body[data-ss-responsive="220"] .ss218-option > :first-child { grid-column:1/-1; }
}
/* Freies Lead-Layout: nur Ansicht bei Platzmangel stapeln, gespeicherte Koordinaten erhalten. */
body[data-ss-responsive="220"] .lead-section-layout-host.is-free-layout.ss220-stack-layout {
    display:grid!important; grid-template-columns:minmax(0,1fr)!important;
    height:auto!important; min-height:0!important; gap:12px!important;
}
body[data-ss-responsive="220"] .lead-section-layout-host.is-free-layout.ss220-stack-layout > .lead-section-layout-item {
    position:relative!important; left:auto!important; top:auto!important;
    width:auto!important; max-width:100%!important; min-width:0!important; min-height:0!important;
}
@media print {
    body[data-ss-responsive="220"] .ss220-table-scroll { overflow:visible; }
    body[data-ss-responsive="220"] :is(.offer-builder-catalog,.offer-builder-summary,.ss218-savebar) { position:static; }
    body[data-ss-responsive="220"] .wrap input { font-size:inherit; }
}