/* ==============================================
   CTA-Flaechen-Token: dunklere Variante des Marken-Gruens fuer weisse
   Schrift auf Primaer-CTAs (AA >=4.5:1). var(--theme-color) allein traegt
   Weiss nur mit ~3.44:1. 80% Marke + 20% Schwarz -> fuer edeltee (#179c80)
   ~5:1. Token-basiert, damit naturteil (eigenes --theme-color) mitzieht.
   :root ist global; das Partial laedt via default_head_blocks.xml auf jeder
   Seite, daher hier EINE Definition fuer Checkout + Cart + Minicart. */
:root {
    --cta-surface: color-mix(in srgb, var(--theme-color) 80%, #000);

    /* Z-Skala Checkout (Ist-Ordnung dokumentiert und verankert):
       Header bewusst NICHT in die 900er-Bande heben - Core-Modals
       (agreements/auth, z:900) sollen ihn ueberdecken.
       drawer 1001 == .nav-sections (mobile-menu.css). */
    --z-checkout-header: 9;      /* Porto .header-main fixed (Ist) */
    --z-checkout-core-modal: 900;
    --z-checkout-scrim: 1000;
    --z-checkout-drawer: 1001;
}

/* ==============================================
   Neue/zu bearbeitende Lieferadresse: INLINE-Formular statt Modal-Overlay
   (Paritaet zur Rechnungsadresse im Zahlungsschritt). Umgesetzt via
   shipping-inline-form-mixin.js (getPopUp ohne modal()) + shipping.html
   (eigene Speichern/Abbrechen-Buttons als Sibling). Der fruehere
   .new-shipping-address-modal-Block ist damit entfallen.

   Bewusst KEIN Kasten um das Formular: die Rechnungsadresse rendert ihr
   Inline-Formular als schlichtes Fieldset. Fuer ein einheitliches
   Komponenten-Vokabular (gleiche Form-Optik in beiden Checkout-Schritten)
   traegt hier ebenfalls nur Weissraum die Abgrenzung, kein Rahmen/Grund.
   ============================================== */
.opc-wrapper .shipping-new-address-form {
    margin-top: 1em;
}

.opc-wrapper .shipping-new-address-actions {
    margin-top: 1.25em;
}

.opc-wrapper .shipping-new-address-actions .primary {
    display: flex;
    align-items: center;
    gap: 1.25em;
}

/* Primaeraktion: Marken-Gruen (war Porto-Orange). */
.opc-wrapper .shipping-new-address-actions .action-save-address {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
}

.opc-wrapper .shipping-new-address-actions .action-save-address:hover {
    background: color-mix(in srgb, var(--theme-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color) 85%, black) !important;
}

/* Abbrechen: ruhiger Textlink im Marken-Ton, kein konkurrierender Vollbutton. */
.opc-wrapper .shipping-new-address-actions .action-hide-popup {
    background: transparent !important;
    border: 0 !important;
    padding: 0.5em 0.25em !important;
    color: color-mix(in srgb, var(--theme-color) 72%, black) !important;
    text-decoration: underline;
}

.opc-wrapper .shipping-new-address-actions .action-hide-popup:hover {
    color: var(--theme-color) !important;
}

.opc-wrapper .step-content .actions-toolbar {
    padding: 0 0 1em;
}

/* Primaere Checkout-CTAs ("Weiter", "Login", finaler Bestell-Button):
   Marken-Gruen + 8px-Radius statt Portos Werks-Orange (#f4631b, eckig). Der
   Hover war bereits gruen, aber der Ruhezustand blieb orange - halber Fix, der
   einen knallorangen eckigen Button neben lauter gruenen 8px-CTAs stehen liess.
   Ruhe/Hover-Muster wie .action-save-address oben; !important wie im uebrigen
   Checkout-Button-Override, da Portos kompiliertes CSS spaeter laedt. */
.checkout-index-index .actions-toolbar .action.primary {
    background: var(--cta-surface) !important;
    border-color: var(--cta-surface) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.checkout-index-index .actions-toolbar .action.primary:hover,
.checkout-index-index .actions-toolbar .action.primary:focus,
.checkout-index-index .actions-toolbar .action.primary:active {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.minicart-items .product-item-details .product-item-name {
    line-height: 1;
    font-size: 0.9em;
    font-weight: 400;
    overflow: visible;
}

.minicart-wrapper .block-minicart .subtotal {
    text-transform: none !important;
    line-height: 1.2 !important;
}

/* Abstand nach oben kommt von der agb-notice-Zeile direkt darueber (die
   selbst keinen eigenen margin-top mehr traegt, s. module-checkout-
   customization). 18px statt vormals 8px, damit der Titel nicht mehr an
   der Notice "klebt" (User-Feedback 2026-07-20). */
#checkout-step-payment .step-title {
    margin: 18px 0 0;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-same-as-shipping-block {
    margin: 1em 0 0.5em;
}

/* Linienlogik Payment-Step (Aufraeumen 2026-07): Sektionstitel tragen 1px
   #e7e7e7 (innere Gliederung), Karten-Container 1px #d6d6d6, Markengruen
   NUR an der aktiven Zahlart - drei klar getrennte Bedeutungsebenen. */
.opc-wrapper .step-title {
    border-bottom: 1px solid #e7e7e7;
}


/* ==============================================
   Rechnungsadresse: Button statt Checkbox (Child)
   Standard = Rechnung an Lieferadresse; Button blendet
   das mit "Rechnungsadresse" ueberschriebene Formular ein.
   ============================================== */

:is(.checkout-payment-method, #opc-sidebar) .billing-address-action {
    margin: 0.75em 0;
}

/* Link-Buttons (der primaeren Bestell-CTA bewusst untergeordnet) */
:is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address,
:is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1.3;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--theme-color-text, #0e7560); /* AA auf weiss (5.6:1) */
    transition: color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* "Abweichende Rechnungsadresse angeben" mit fuehrendem + */
:is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address::before {
    content: '+';
    display: inline-block;
    margin-right: 0.4em;
    font-weight: 600;
}

:is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address:hover,
:is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address:focus-visible {
    color: color-mix(in srgb, var(--theme-color) 60%, black);
    text-decoration: underline;
    transform: translateX(2px);
}

/* Zurueck-Link: gedaempfter (sekundaere Aktion) mit fuehrendem ‹ */
:is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address {
    font-weight: 500;
    font-size: 0.9rem;
    color: #6b6b6b; /* AA auf weiss (4.7:1) */
}

:is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address::before {
    content: '\2039';
    margin-right: 0.4em;
}

:is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address:hover,
:is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address:focus-visible {
    color: var(--theme-color-text, #0e7560);
    text-decoration: underline;
    transform: translateX(-2px);
}

/* "Rechnungsadresse"-Ueberschrift ueber dem eingeblendeten Formular.
   ID-Selektor noetig, um #checkout-step-payment .step-title zu schlagen. */
:is(#checkout-step-payment, #opc-sidebar) .billing-address-title.step-title {
    margin: 0.5em 0 0.4em;
    font-size: 1.05rem;
    border-bottom-width: 1px;
}

/* Label ueber der Adress-Zusammenfassung ("Rechnungs- und Lieferadresse"
   bzw. "Rechnungsadresse") — macht eindeutig, WAS die Anschrift ist. */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-summary-label {
    margin: 0.25em 0 0.35em;
    font-weight: 600;
    font-size: 0.9rem;
    color: #2f2f2f;
}

/* Abstand vor der Aktions-Leiste (Aktualisieren/Abbrechen), damit die
   Buttons nicht direkt am letzten Eingabefeld kleben. */
:is(.checkout-payment-method, #opc-sidebar) .checkout-billing-address fieldset .actions-toolbar {
    margin-top: 1.5em;
}

/* PLZ und Ort nebeneinander (PLZ schmal) - Liefer- UND Rechnungsadresse.
   Beide Felder sind direkte Kinder von .fieldset.address; greift erst ab Tablet,
   darunter (Mobil) bleiben sie gestapelt. !important, da Porto spaeter laedt. */
@media (min-width: 768px) {
    .checkout-index-index .fieldset.address > .field[name$=".postcode"],
    .checkout-index-index .fieldset.address > .field[name$=".city"] {
        float: left !important;
        box-sizing: border-box !important;
    }
    .checkout-index-index .fieldset.address > .field[name$=".postcode"] {
        width: 30% !important;
        clear: left !important;
    }
    .checkout-index-index .fieldset.address > .field[name$=".city"] {
        width: 67% !important;
        margin-left: 3% !important;
    }
    /* Folgeelemente nach dem Ort wieder volle Breite */
    .checkout-index-index .fieldset.address > .field[name$=".city"] ~ * {
        clear: both !important;
    }
    /* Floats im Adress-Fieldset einschliessen (Ort kann letztes Feld sein) */
    .checkout-index-index .fieldset.address::after {
        content: "";
        display: block;
        clear: both;
    }
    /* PLZ-Warnhinweis ist sonst auf die schmale Spalte gequetscht; im Fluss
       belassen (schiebt Folgeinhalt nach unten), aber ueber die Zeilenbreite
       aufspannen, damit der Text lesbar bleibt. 320% von 30% ~ volle Zeile. */
    .checkout-index-index .fieldset.address > .field[name$=".postcode"] .message {
        width: 320% !important;
        box-sizing: border-box !important;
    }
}

/* Lade-Spinner waehrend der PLZ-Pruefung NUR auf das PLZ-Feld begrenzen - fuer
   Liefer- (shipping-postcode-spinner-mixin) UND Rechnungsadresse
   (billing-postcode-spinner-mixin). So ueberdeckt die mage/loader-Maske allein
   die PLZ und das daneben liegende Ort-Feld bleibt waehrend der Pruefung
   bedienbar. Die Maske ist sonst position:fixed und wuerde als Vollbild-Overlay
   alle Felder ueberdecken und blockieren. Derselbe Selektor wie die PLZ/Ort-
   Float-Regel deckt beide Formulare ab. !important, da Porto spaeter laedt. */
.checkout-index-index .fieldset.address > .field[name$=".postcode"] {
    position: relative !important;
}
.checkout-index-index .fieldset.address > .field[name$=".postcode"] .loading-mask {
    position: absolute !important;
}

@media (prefers-reduced-motion: reduce) {
    :is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address,
    :is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address {
        transition: color 0.2s ease;
    }
    :is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address:hover,
    :is(.checkout-payment-method, #opc-sidebar) .action-show-billing-address:focus-visible,
    :is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address:hover,
    :is(.checkout-payment-method, #opc-sidebar) .action-use-shipping-address:focus-visible {
        transform: none;
    }
}


/* ==============================================
   Rechnungsadresse: Auswahl als Karten (Parität zur Lieferadresse)
   Ersetzt das native Dropdown durch klickbare Karten in derselben visuellen
   Sprache wie die shipping-address-item-Karten (Rahmen, aktive Karte mit
   Marken-Akzent + Haken). Payment-Schritt-scoped, da die Shipping-Karten-Regeln
   auf .opc-wrapper bzw. den Shipping-Kontext begrenzt sind.
   Markup: theme-porto-child/Magento_Checkout/web/template/billing-address/list.html
   ============================================== */

/* Gruppen-Label unnoetig: Step-Title + Summary-Label existieren bereits */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-cards > .label {
    display: none;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-list {
    display: block;
    margin: 0.25em 0 0.5em;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item {
    /* Akzent = Marken-Grün (dieselbe Quelle wie Aktualisieren-Button & Shipping).
       --om-accent-ink: dunklere Ableitung fuer gruenen Text auf hellem Grund (AA). */
    --om-accent: var(--theme-color);
    --om-accent-ink: color-mix(in srgb, var(--theme-color) 72%, black);
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75em;
    padding: 1em 2.75em 1em 1em; /* rechts Platz fuer den Haken */
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    line-height: 1.5;
    color: #2f2f2f; /* AA auf weiss */
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease,
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item:last-child {
    margin-bottom: 0;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item:hover {
    border-color: var(--om-accent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    transform: translateY(-1px);
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* Aktive Karte: kraeftiger Marken-Rahmen + zarter Tint (wie shipping selected-item).
   padding-Ausgleich, damit der 2px-Rahmen die Karte nicht springen laesst. */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-item.selected-item {
    border-color: var(--om-accent);
    border-width: 2px;
    padding: calc(1em - 1px) calc(2.75em - 1px) calc(1em - 1px) calc(1em - 1px);
    background: color-mix(in srgb, var(--om-accent) 8%, #fff);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--om-accent) 16%, transparent);
}

/* Haken oben rechts auf der aktiven Karte (Parallele zum shipping selected-item::after) */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-item.selected-item::after {
    content: '\2713';
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    background: var(--om-accent);
    border-top-right-radius: 6px;
    border-bottom-left-radius: 8px;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item__name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15em;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item__line {
    display: block;
    font-size: 0.95rem;
    color: #4a4a4a; /* AA auf weiss (7:1) */
}

/* "Neue Rechnungsadresse"-Karte: gestrichelt + Plus-Icon, klar als Aktion lesbar */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-item--new {
    display: flex;
    align-items: center;
    gap: 0.55em;
    border-style: dashed;
    border-color: #c2c2c2;
    background: #fafafa;
    color: var(--om-accent-ink); /* gruener Text, AA-lesbar auf hellem Grund */
    font-weight: 600;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item--new::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item--new.selected-item {
    border-style: solid;
    background: color-mix(in srgb, var(--theme-color-text, #0e7560) 6%, #fff);
}

/* Auf der Neu-Karte traegt den Auswahl-Zustand der Rahmen; kein Haken noetig */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-item--new.selected-item::after {
    content: none;
}

:is(.checkout-payment-method, #opc-sidebar) .billing-address-item__new-label {
    font-size: 0.98rem;
}

@media (prefers-reduced-motion: reduce) {
    :is(.checkout-payment-method, #opc-sidebar) .billing-address-item {
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    :is(.checkout-payment-method, #opc-sidebar) .billing-address-item:hover {
        transform: none;
    }
}

.payment-method-ppcp_card .fieldset .field .label > span {
    font-size: 1rem;
}


/* ==============================================
   Zahlarten als Auswahlkarten (Redesign)
   Gleiche Auswahl-Sprache wie die Adress-Karten im Checkout:
   1px-Rahmen + 8px-Radius, Hover gruen mit Schatten, aktiv
   2px Marken-Rahmen + Tint + Haken-Ecke. Die komplette
   Titelzeile ist klickbar (gestrecktes Label, kein JS).
   ============================================== */

.checkout-payment-method .payment-methods .payment-method {
    --om-accent: var(--theme-color);
    --om-accent-ink: color-mix(in srgb, var(--theme-color) 72%, black);
    position: relative;
    margin: 0 0 0.75em;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.checkout-payment-method .payment-methods .payment-method:last-child {
    margin-bottom: 0;
}

/* Nur nicht-gewaehlte Karten reagieren auf Hover (aktive ist bereits gewaehlt) */
.checkout-payment-method .payment-methods .payment-method:not(._active):hover {
    border-color: var(--om-accent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    transform: translateY(-1px);
}

/* Tastatur-Fokus des (visuell versteckten) Radios auf die Karte spiegeln */
.checkout-payment-method .payment-methods .payment-method:has(.radio:focus-visible) {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* Titelzeile: voller Klickbereich, Porto-Divider raus */
.checkout-payment-method .payment-methods .payment-method .payment-method-title {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 0;
    margin: 0;
    padding: 0.85em 1em;
    cursor: pointer;
}

/* Natives Radio bleibt fokussier-/bedienbar, traegt aber keinen Pixel Layout:
   Auswahlzustand kommunizieren Rahmen, Tint und Haken (wie Adress-Karten). */
.checkout-payment-method .payment-methods .payment-method-title .radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.checkout-payment-method .payment-methods .payment-method-title .label {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-height: 40px; /* Hoehe der Zahlarten-Icons: Karten ohne Icon bleiben gleich hoch */
    font-weight: 600;
    font-size: 1rem;
    color: #2f2f2f;
    cursor: pointer;
    padding-right: 2.25em; /* Platz fuer die Haken-Ecke */
}

/* Gestrecktes Label: macht die gesamte Titelzeile zur Klickflaeche */
.checkout-payment-method .payment-methods .payment-method-title .label::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Echte Links in der Titelzeile (z.B. "Was ist PayPal?") ueber dem Overlay halten */
.checkout-payment-method .payment-methods .payment-method-title a {
    position: relative;
    z-index: 1;
}

/* Aktive Karte: kraeftiger Marken-Rahmen, Titelzeile mit zartem Tint */
.checkout-payment-method .payment-methods .payment-method._active {
    border-color: var(--om-accent);
    border-width: 2px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--om-accent) 16%, transparent);
}

.checkout-payment-method .payment-methods .payment-method._active .payment-method-title {
    background: color-mix(in srgb, var(--om-accent) 7%, #fff);
    border-radius: 6px 6px 0 0;
    padding: calc(0.85em - 1px) calc(1em - 1px);
}

/* Haken-Ecke oben rechts (Parallele zu den Adress-Karten) */
.checkout-payment-method .payment-methods .payment-method._active::after {
    content: '\2713';
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    background: var(--om-accent);
    border-top-right-radius: 6px;
    border-bottom-left-radius: 8px;
}

/* Content der gewaehlten Zahlart lebt IN der Karte, sauber abgetrennt */
.checkout-payment-method .payment-methods .payment-method._active .payment-method-content {
    padding: 1.1em 1.25em 1.25em;
    border-top: 1px solid color-mix(in srgb, var(--om-accent) 22%, #e7e7e7);
    border-radius: 0 0 6px 6px;
}

/* Bestell-CTA ueber die volle Kartenbreite: schliesst die Karte ab,
   groessere Trefferflaeche, konsistent mit dem Mobile-Verhalten */
.checkout-payment-method .payment-method-content .actions-toolbar .primary {
    float: none;
    display: block;
    width: 100%;
}

.checkout-payment-method .payment-method-content .actions-toolbar .primary .action.checkout {
    width: 100%;
    margin: 0;
}

/* Einzige verfuegbare Zahlart: kein Cursor-Koeder auf der Titelzeile */
.checkout-payment-method .payment-methods .payment-method:only-child .payment-method-title,
.checkout-payment-method .payment-methods .payment-method:only-child .payment-method-title .label {
    cursor: default;
}

@media only screen and (max-width: 767px) {
    /* Portos negatives Full-bleed-Margin neutralisieren */
    .checkout-payment-method .payment-methods .payment-method .payment-method-title {
        margin: 0;
        padding: 0.85em 1em;
    }
    .checkout-payment-method .payment-methods .payment-method._active .payment-method-title {
        padding: calc(0.85em - 1px) calc(1em - 1px);
    }
    .checkout-payment-method .payment-methods .payment-method._active .payment-method-content {
        padding: 1em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-payment-method .payment-methods .payment-method {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .checkout-payment-method .payment-methods .payment-method:not(._active):hover {
        transform: none;
    }
}


/* ==============================================
   Adresstyp-Umschalter (Strasse | Packstation | Postfiliale)
   Segmented Control ueber den Adressfeldern; im Stations-Modus
   kompakte Nummernfelder mit Label darueber (wie alle uebrigen
   Checkout-Felder). Markup:
   Magento_Checkout/web/template/form/address-mode.html
   ============================================== */

.om-address-mode {
    margin: 0 0 1.1em;
}

/* Gruppenlabel der street-Gruppe ist per LayoutProcessor-Plugin geleert
   ("Adresse" war mit den Feldlabels doppelt) - leere Huelle ausblenden */
.checkout-index-index .field.street > .label {
    display: none;
}

/* Pflicht-Sternchen fuer "Strasse und Hausnummer": Blanks Selektor
   (.fieldset > .field._required > .label::after) greift nur fuer direkte
   Fieldset-Kinder - street.0 steckt aber in der street-Gruppe. */
.checkout-index-index .field.street .field._required > .label::after {
    content: '*';
    color: #e02b27;
    font-size: 1.2rem;
    margin: 0 0 0 5px;
}

.om-address-mode__switch {
    display: flex;
    width: 100%;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* Spezifitaet 0,3,0: Portos Checkout-Button-Chrome (1px #ccc border rundum,
   28px padding) laedt spaeter und schlaegt sonst unseren Reset — sichtbar als
   zwei verschiedene Grautoene an den Trennlinien (#ccc vs. unser #d6d6d6) und
   ein grauer Rahmen um das aktive gruene Segment. Gleiche Absicherung wie beim
   __help-toggle darunter. */
.checkout-index-index .om-address-mode .om-address-mode__segment {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    margin: 0;
    padding: 0.65em 0.5em;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: #4a4a4a; /* AA auf weiss */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.checkout-index-index .om-address-mode .om-address-mode__segment + .om-address-mode__segment {
    border-left: 1px solid #d6d6d6;
}

.checkout-index-index .om-address-mode .om-address-mode__segment:hover {
    background: color-mix(in srgb, var(--theme-color) 7%, #fff);
    color: color-mix(in srgb, var(--theme-color) 60%, black);
}

.checkout-index-index .om-address-mode .om-address-mode__segment:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: -2px;
}

.checkout-index-index .om-address-mode .om-address-mode__segment._active {
    background: var(--theme-color);
    color: #fff;
}

.om-address-mode__fields {
    margin-top: 0.9em;
}

/* Label ueber dem Feld wie bei allen anderen Checkout-Feldern: Inline-Labels
   ungleicher Laenge liessen die Inputs auf ragged X-Positionen beginnen */
.om-address-mode__row {
    margin: 0 0 0.9em;
}

/* Spezifitaet 0,3,0: ohne explizites color erbt das Label Portos generisches
   #777 und steht damit heller als die Standard-Checkout-Labels (#2f2f2f, z.B.
   "Strasse und Hausnummer" im Strasse-Modus). Gleiche Farbe erzwingen. */
.checkout-index-index .om-address-mode .om-address-mode__label {
    display: block;
    margin: 0 0 8px; /* wie .field > .label der uebrigen Checkout-Felder (400/8px) */
    font-weight: 400;
    color: #2f2f2f;
}

/* Alle Fassaden-Felder sind Pflicht (Packstation: beide, Filiale: beide) -
   gleiche Markierung wie die uebrigen Pflichtfelder des Formulars */
.om-address-mode__label::after {
    content: '*';
    color: #e02b27;
    font-size: 1.2rem;
    margin: 0 0 0 5px;
}

.om-address-mode__input {
    flex: 0 1 auto;
    max-width: 22em; /* E-Mail-Eingabe (Postfiliale) */
}

.om-address-mode__input--nummer {
    max-width: 11em;
}

.om-address-mode__input--station {
    max-width: 6.5em;
}

.om-address-mode__row._error .om-address-mode__input {
    border-color: #e02b27;
}

.om-address-mode__error {
    margin: -0.1em 0 0.5em;
    font-size: 0.9rem;
    color: #e02b27;
}

/* "Keine DHL-Postnummer?"-Disclosure: Link-Optik, kein Button-Chrome */
.om-address-mode__help {
    margin: -0.3em 0 0.9em;
}

/* Spezifitaet 0,3,0: Portos Button-Chrome (border/padding/#777) laedt spaeter */
.checkout-index-index .om-address-mode .om-address-mode__help-toggle {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--theme-color) 80%, black); /* AA auf weiss */
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.checkout-index-index .om-address-mode .om-address-mode__help-toggle:hover {
    background: none;
    color: color-mix(in srgb, var(--theme-color) 60%, black);
}

.checkout-index-index .om-address-mode .om-address-mode__help-toggle:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

.om-address-mode__hint {
    margin: 0.35em 0 0;
    max-width: 46em;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #595959; /* AA auf weiss (7:1) */
}

/* Einwilligung E-Mail-Weitergabe an DHL (Filiale-Modus, nur E-Mail-Pfad):
   Karte wie __suggest; _error = "Weiter" ohne Haken geklickt -> Fehler-Optik.
   Markup: address-mode.html, Pruefung: address-mode.js validateMode */
.om-address-mode__consent {
    margin: 0 0 0.9em;
    padding: 0.75em 0.9em;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada);
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-color) 5%, #fff);
}

.om-address-mode__consent._error {
    border-color: #e02b27;
    background: color-mix(in srgb, #e02b27 4%, #fff);
}

.om-address-mode__consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Spezifitaet 0,2,1 gegen Portos Checkbox-Reset; margin-top richtet die Box
   auf die erste Textzeile des Labels aus */
.checkout-index-index .om-address-mode__consent-checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--theme-color);
    cursor: pointer;
}

/* Kein Pflicht-Sternchen (__label::after) - der Einwilligungstext ist
   selbsterklaerend, ein * am Fliesstext-Ende wirkt wie ein Fussnotenzeichen */
.checkout-index-index .om-address-mode .om-address-mode__consent-label {
    margin: 0;
    max-width: 46em;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.45;
    color: #2f2f2f;
    cursor: pointer;
}

.om-address-mode__consent .om-address-mode__error {
    margin: 0.5em 0 0;
}

/* Stations-Erkennung im Strasse-Modus: Hinweis-Karte mit Wechsel-Button
   (address-mode.js updateSuggestion/acceptSuggestion). _blocked = "Weiter"
   wurde wegen Schluesselwort im Strassenfeld geblockt -> Fehler-Optik. */
.om-address-mode__suggest {
    margin: 0.9em 0 0;
    padding: 0.75em 0.9em;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada);
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-color) 5%, #fff);
}

.om-address-mode__suggest._blocked {
    border-color: #e02b27;
    background: color-mix(in srgb, #e02b27 4%, #fff);
}

.om-address-mode__suggest-text {
    margin: 0 0 0.6em;
    max-width: 46em;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #2f2f2f;
}

/* Spezifitaet 0,3,0: Portos Checkout-Button-Chrome laedt spaeter
   (gleiche Absicherung wie __segment und __help-toggle oben) */
.checkout-index-index .om-address-mode .om-address-mode__suggest-switch {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0.5em 1em;
    border: 1px solid var(--theme-color);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: color-mix(in srgb, var(--theme-color) 80%, black); /* AA auf weiss */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.checkout-index-index .om-address-mode .om-address-mode__suggest-switch:hover {
    background: var(--theme-color);
    color: #fff;
}

.checkout-index-index .om-address-mode .om-address-mode__suggest-switch:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}


/* ==============================================
   Zahlungsarten-Logos im Checkout
   ============================================== */

/* Rechnung (Check/Money Order) */
#checkmo + .label::before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 40px;
    margin-right: 8px;
    background: url('../../images/payment/invoice.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* Vorkasse (Bank Transfer) */
#banktransfer + .label::before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 40px;
    margin-right: 8px;
    background: url('../../images/payment/bank-transfer.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* Optional: Kreditkarte (ppcp_card) - falls gewünscht */
#ppcp_card + .label::before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 40px;
    margin-right: 8px;
    background: url('../../images/payment/credit-card.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* PayPal Logo Größe */
.payment-method-ppcp_paypal .payment-method-title .payment-icon {
    width: 60px !important;
    height: 40px !important;
    object-fit: contain;
}

.payment-methods .payment-group .payment-method-title label img {
    width: 60px;
    margin-right: 8px;
}

/* Kreditkarten Inline-Fehlermeldungen */
.payment-method-ppcp_card .fieldset .field .hosted-error {
    height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 0.9rem;
    /* nur opacity: height 0->auto ist nicht animierbar, die frühere
       height-Transition war toter Code (Layout-Thrash-Risiko ohne Effekt) */
    transition: opacity 0.2s ease-in-out;
}

.payment-method-ppcp_card .fieldset .field._error .hosted-error {
    height: auto;
    opacity: 1;
    font-size: 0.9rem;
}

.payment-method-ppcp_card .field._error label {
    color: #e02b27;
}

/* Hinweis für Pflichtfelder  */
.field-required-notice {
    margin-top: 15px;
    font-size: 0.9em;
    color: #666;
}

.field-required-notice .required-marker {
    color: #e02b27;
    font-weight: bold;
}

/* "In den Warenkorb" Button in der Kategorie ausblenden */
.product-item-info .product-type-advanced .product-item-inner .product-item-actions > .actions-primary .tocart {
    display: none !important;
}

.product-add-form .v_box a {
    color: #777;
}

.product-add-form .v_box a:hover {
    color: var(--theme-color) !important;
}

.footer-middle a:hover, .footer .widget .tagcloud a:hover {
    color: var(--theme-color) !important;
}

.page-wrapper > .breadcrumbs .items>li.home a {
    padding-left: 10px;
}

/* Rechnungsadresse-Formular (Payment-Step): Buttons wie im Shipping-Step
   (.action-save-address/.action-hide-popup oben) - Primaeraktion als gruener
   8px-Vollbutton, Abbrechen als ruhiger Textlink statt konkurrierendem
   Rahmen-Button. !important, da Portos kompiliertes CSS spaeter laedt. */
:is(#checkout-step-payment, #opc-sidebar) .checkout-billing-address button.action-update {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 20px;
}

:is(#checkout-step-payment, #opc-sidebar) .checkout-billing-address button.action-update:hover {
    background: color-mix(in srgb, var(--theme-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color) 85%, black) !important;
}

:is(#checkout-step-payment, #opc-sidebar) .checkout-billing-address button.action-cancel {
    background: transparent !important;
    border: 0 !important;
    padding: 0.5em 0.25em !important;
    color: color-mix(in srgb, var(--theme-color) 72%, black) !important;
    text-decoration: underline;
}

:is(#checkout-step-payment, #opc-sidebar) .checkout-billing-address button.action-cancel:hover {
    color: var(--theme-color) !important;
    background: transparent !important;
}

:is(#checkout-step-payment, #opc-sidebar) .checkout-billing-address .actions-toolbar .primary {
    display: flex;
    align-items: center;
    gap: 1.25em;
    float: none;
}

.page-wrapper > .breadcrumbs .items > li {
    text-transform: none;
}

.page-wrapper > .breadcrumbs .items {
    padding-top: 5px !important;
}


/* ==================================================================
   CHECKOUT — Marken-Veredelung
   Zieht den Checkout (Schritt 1 Versand + Schritt 2 Uebersicht/Zahlung)
   aus der Porto-Luma-Default-Optik in die shopweite Markensprache:
   Akzent ueber var(--theme-color) statt Luma-Orange (#ff5501/#f4631b),
   Sentence-case statt Versalien, AA-Kontrast, sauberer Mobile-Summary.
   Token-basiert -> adaptiert naturteil automatisch auf seinen Akzent.
   ================================================================== */

/* P0 — Bestell-Button shopweit auf Markenfarbe.
   War am Desktop Luma-Orange (#f4631b), mobil schon gruen -> jetzt
   konsistent gruen ueber alle Breakpoints. */
.checkout-index-index .payment-method-content .actions-toolbar .action.primary.checkout,
.checkout-index-index .payment-method-content .actions-toolbar button.action.checkout,
.checkout-index-index button.action.checkout.primary {
    background-color: var(--cta-surface, #127d66) !important;
    border-color: var(--cta-surface, #127d66) !important;
    color: #fff !important;
}
.checkout-index-index .payment-method-content .actions-toolbar .action.primary.checkout:hover,
.checkout-index-index .payment-method-content .actions-toolbar button.action.checkout:hover,
.checkout-index-index button.action.checkout.primary:hover {
    background-color: var(--theme-color, #179c80) !important;
    border-color: var(--theme-color, #179c80) !important;
}

/* P0 — Progress-Stepper Akzent gruen statt Luma-Orange.
   Linie (:before am Item) + Marker-Kreis (> span:before/:after). */
.opc-progress-bar-item._active:before,
.opc-progress-bar-item._complete:before,
.opc-progress-bar-item._active > span:before,
.opc-progress-bar-item._complete > span:before {
    background: var(--theme-color, #179c80) !important;
}
.opc-progress-bar-item._active > span:after,
.opc-progress-bar-item._complete > span:after {
    border-color: var(--theme-color, #179c80) !important;
    color: var(--theme-color, #179c80) !important;
}
/* aktives Step-Label in Markenfarbe (statt Default-Orange-Text) */
.opc-progress-bar-item._active > span {
    color: var(--theme-color, #179c80) !important;
}

/* P1 — Section-Titel Sentence-case statt Versalien.
   HTML-Text ist bereits korrekt geschrieben; nur uppercase-Transform raus
   (konsistent zur shopweiten Versalien-Ruecknahme). */
.opc-wrapper .step-title,
.checkout-payment-method .step-title,
.opc-block-summary > .title,
#co-payment-form > .fieldset > .legend {
    text-transform: none !important;
}

/* P1 — AA-Kontrast: Formular-Labels & Hilfetext von #777 (4.07:1)
   auf dunkles Ink; inaktives Step-Label ebenfalls. */
.checkout-index-index .fieldset > .field > .label,
.checkout-index-index .fieldset > .field .label,
.checkout-index-index .field .note,
.checkout-index-index .opc-wrapper .form .note {
    color: #2f2f2f !important;
}
/* nur der wirklich inaktive Zustand wird abgedunkelt; aktive/erledigte
   Step-Labels bleiben in Markenfarbe (gruen). */
.opc-progress-bar-item:not(._active):not(._complete) > span {
    color: #2f2f2f !important;
}

/* P1 — Mobile: grauen Summary-Block (modal-inner-wrap #f4f4f4) entfernen,
   nur die weisse Card bleibt stehen. Magentos custom-slide-Modal-CSS gibt
   dem inline gerenderten Wrapper zusaetzlich den Overlay-Schatten
   rgba(0,0,0,.35) - der liess die ganze Sidebar wie ein haengengebliebenes
   Popup "schweben" (User-Befund "erhobene Box"). Schatten nur im echten
   Modal-Zustand (._show setzt ihn via eigener Regel wieder). */
@media (max-width: 767px) {
    .checkout-container .opc-sidebar .modal-inner-wrap {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .checkout-container .opc-sidebar._show .modal-inner-wrap {
        box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35) !important;
    }
}

@media (max-width: 991px) {
    /* "Alle <Kategorie> anzeigen" - klar als Navigationseinstieg markiert. */
    .nav-sections .navigation li.o2e-view-all > a {
        gap: 8px;
        color: var(--theme-color, #179c80) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        background: color-mix(in srgb, var(--theme-color, #179c80) 7%, transparent);
    }
    .nav-sections .navigation li.o2e-view-all > a::before {
        content: "\2192"; /* Pfeil nach rechts */
        font-weight: 700;
    }
    .nav-sections .navigation li.o2e-view-all > a::after {
        content: none !important; /* kein Chevron am Link */
    }

    /* Scrim hinter dem Drawer: fokussiert + Tap schliesst. */
    .o2e-nav-scrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: var(--z-checkout-scrim);
    }
    html.nav-open .o2e-nav-scrim {
        opacity: 1;
        visibility: visible;
    }
    /* Seite hinter offenem Menue nicht mitscrollen. */
    html.nav-open,
    html.nav-open body {
        overflow: hidden;
    }
}

/* Injizierter "Alle anzeigen"-Eintrag darf im Desktop-Megamenue NICHT
   auftauchen (gleiche DOM-Knoten). */
@media (min-width: 992px) {
    .nav-sections .navigation li.o2e-view-all {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-sections .navigation li.level0.parent > a.level-top::after,
    .nav-sections .navigation li.level1.parent > a::after,
    .o2e-nav-scrim {
        transition: none !important;
    }
}


/* ==============================================
   Checkout-Sidebar: Lieferadresse + Versandmethode
   als vollwertige Sektionen der Bestelluebersicht.
   Begriffe kommen konsistent aus i18n/de_DE.csv
   ("Ship To:" -> "Lieferadresse", "Shipping Method:"
   -> "Versandmethode" — wie die Step-Titel links).
   Porto rendert die Titel #777/300 (unter AA) mit
   schwebendem Icon-Stift -> wirkt wie eine Fussnote.
   ============================================== */

/* Im Versand-Schritt ist der Block leer (Knockout rendert ship-to/ship-via
   erst im Zahlungsschritt) — ohne Guard staende dort eine leere Karte. */
.opc-block-shipping-information:not(:has(.ship-to, .ship-via)) {
    display: none;
}

/* EINE Kartensprache mit den Zahlarten-Karten (1px #d6d6d6, 8px Hausradius).
   Portos 2px-#e7e7e7-Rahmen auf der Summary wird ueberschrieben (!important
   wegen Porto-Ladereihenfolge). Die Summary-Karte gilt bewusst auf ALLEN
   Breiten - mobil war sie sonst eckig/2px (Inkonsistenz, User 2026-07-20). */
.opc-sidebar .opc-block-summary {
    border: 1px solid #d6d6d6 !important;
    border-radius: 8px;
}

/* Desktop: Recap als eigene Karte. */
@media screen and (min-width: 768px) {
    .opc-block-shipping-information {
        box-sizing: border-box;
        margin-top: 20px;
        background: #fff;
        border: 1px solid #d6d6d6;
        border-radius: 8px;
    }
}

/* Mobil (Sidebar als aufgeklappte Flaeche ueber dem Step-Inhalt):
   Trennlinie statt Karte-in-Karte. Border/Margin sitzen an der Unterkante,
   nicht der Oberkante - der Block steht mobil jetzt VOR der Summary
   (siehe D4-Reorder unten), die Trennlinie muss also zur nachfolgenden
   Summary hin trennen, nicht zu einem nicht mehr vorhandenen Element davor. */
@media only screen and (max-width: 767px) {
    .opc-block-shipping-information {
        border-bottom: 1px solid #d6d6d6;
        margin-bottom: 4px;
    }
}

/* D4 - Payment-Schritt mobil: Adressen-/Versand-Recap VOR der
   Bestell-Zusammenfassung. Live geprueft (Playwright, 375px): #opc-sidebar
   ist bereits ein Flex-Kind von .checkout-container (order:-1, column) und
   enthaelt selbst als Flex-Container zwei Kinder in DOM-Reihenfolge
   .opc-block-summary -> .opc-block-shipping-information. Auf dem
   Versand-Schritt ist .opc-block-shipping-information leer (display:none
   per :not(:has(...)) oben) - order wirkt sich dort nicht sichtbar aus.
   Auf dem Payment-Schritt hat es Inhalt: order:-1 stellt es dann vor die
   Summary. Rein strukturelle CSS-Reorder, keine Template-Aenderung. */
@media (max-width: 991px) {
    #opc-sidebar {
        display: flex;
        flex-direction: column;
    }
    #opc-sidebar > .opc-block-shipping-information {
        order: -1;
    }
}

/* D5 - Payment-Schritt mobil: Rechnungsanschrift zwischen Recap und
   Zusammenfassung. o2e-checkout-payment-expand.js verschiebt den Block bei
   <=991px per echtem DOM-Move aus dem Payment-Formular (.checkout-payment-method,
   Teilbaum von .opc-wrapper) nach #opc-sidebar, direkt HINTER
   .opc-block-shipping-information - ein reines CSS-order haette hier nicht
   gereicht, da .opc-wrapper und #opc-sidebar getrennte Teilbaeume sind (kein
   Flex-Reorder ueber Container-Grenzen moeglich). order:-1 wie der Recap-Block;
   das Skript haengt den Block IMMER direkt NACH shipping-information ein, der
   order-Gleichstand wird also per DOM-Reihenfolge zugunsten von
   shipping-information aufgeloest -> Recap -> Rechnungsanschrift -> Zusammenfassung. */
@media (max-width: 991px) {
    #opc-sidebar > .checkout-billing-address {
        order: -1;
    }
}

/* Sidebar-Kontext (nur mobil relevant, Desktop bleibt im Payment-Formular):
   Einrueckung an den Lieferadress-Recap angleichen (padding 22px 1.5em,
   header-navigation.css) - der reparentete Block klebte sonst an der
   Sidebar-Kante ("nach links eingerueckt", User 2026-07-20). Zur Summary-
   Karte darunter trennt Weissraum statt einer weiteren Linie. */
@media (max-width: 991px) {
    #opc-sidebar > .checkout-billing-address {
        padding-left: 1.5em;
        padding-right: 1.5em;
        margin-bottom: 16px;
    }
}

/* Sektionstitel in der Hierarchie der Step-Titel (#222529/600 + Linie),
   statt Porto-Fussnote. !important gegen Portos spaeter geladene
   abs-checkout-title-Regeln. */
.opc-block-shipping-information .shipping-information-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #222529 !important;
    text-transform: none !important;
    letter-spacing: 0;
    border-bottom: 1px solid #e7e7e7 !important;
    padding-bottom: 0.55em;
    margin: 0 0 0.9em;
}

/* "Bearbeiten" als beschrifteter Gruen-Link (statt nur schwebendem Stift);
   Optik wie die Billing-Aktionslinks (#0e7560, AA auf weiss). */
.opc-block-shipping-information .shipping-information-title .action-edit {
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--theme-color-text, #0e7560) !important;
    text-transform: none;
    transition: color 0.2s ease;
}

.opc-block-shipping-information .shipping-information-title .action-edit:hover,
.opc-block-shipping-information .shipping-information-title .action-edit:focus-visible {
    color: color-mix(in srgb, var(--theme-color) 60%, black) !important;
    text-decoration: underline;
}

/* Portos 28px-Icon auf Textzeilenmass bringen, Farbe mitlaufen lassen */
.opc-block-shipping-information .shipping-information-title .action-edit::before {
    font-size: 15px !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* Vom Icon-Font-Mixin versteckten Buttontext ("Bearbeiten") wieder zeigen */
.opc-block-shipping-information .shipping-information-title .action-edit > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
}

/* Adresse/Versandart lesbar (statt #777): Ink-Farbe, ruhige Zeilen */
.opc-block-shipping-information .shipping-information-content {
    color: #2f2f2f;
    line-height: 1.6;
}

.opc-block-shipping-information .ship-to {
    margin-bottom: 1.6em;
}

.opc-block-shipping-information .ship-via {
    margin-bottom: 0;
}

/* Payment-Step: "Rechnungs- und Lieferadresse" auf Sektionstitel-Niveau
   heben (gleiche Optik wie "Zahlungsmethode"), damit die Rechnungsadresse
   nicht wie eine Nebensache unter der Summary haengt. */
:is(.checkout-payment-method, #opc-sidebar) .billing-address-summary-label {
    margin: 0.5em 0 0.75em;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222529;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 0.55em;
}

@media (prefers-reduced-motion: reduce) {
    .opc-block-shipping-information .shipping-information-title .action-edit {
        transition: none;
    }
}


/* ============================================================
   Checkout „Zusammenfassung der Bestellung" — vollständige
   Artikelliste + Lesbarkeit (Redesign 2026-07).
   Befund CT123: Trunkierung „10 von 12 Artikel" zwang zum
   Warenkorb-Ausstieg (Baymard: Summary dient der Verifikation;
   Ausstiege aus dem Checkout vermeiden) → max_items_display_count
   =100 via DataPatch (SetOrderSummaryMaxItemsDisplayCount), alle
   Positionen in fester Scroll-Box mit CSS-Scroll-Schatten
   (background-attachment:local) statt hartem Zeilen-Cut mitten
   im Artikel. Der Warenkorb-Link bleibt via Template-Override
   summary/cart-items.html als Bearbeiten-Route erhalten.
   Typo-Befund: Name 10.9px, Preis 12px/400 #69696b, Accordion-
   Titel und Totals-Labels #777 (unter AA 4.5:1) → Ink-Farben
   (#222529/#2f2f2f) und Hausgrößen. Mobil ist die Artikelliste
   standardmäßig zugeklappt (cart-items-mixin), die Summe bleibt
   sichtbar — Shopify/WooCommerce-Muster, kurzer Weg zur Zahlart.
   Porto lädt später → !important, wo Porto konkurriert.
   ============================================================ */

/* Accordion-Titelzeile („12 Artikel im Warenkorb"): klarer Toggle
   statt 13px-Fußnote — Tap-Target ≥44px, Chevron in Markenfarbe. */
.opc-block-summary .items-in-cart > .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 2px 10px 0 !important;
    border-bottom: 1px solid #e7e7e7;
    cursor: pointer;
}
.opc-block-summary .items-in-cart > .title strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222529 !important;
}
.opc-block-summary .items-in-cart > .title::after {
    position: static !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--theme-color, #179c80) !important;
}
.opc-block-summary .items-in-cart > .title:focus-visible {
    outline: 2px solid var(--theme-color, #179c80);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scroll-Box: alle Artikel bleiben im Checkout einsehbar; Schatten
   oben/unten signalisieren „mehr Inhalt" und verschwinden an den
   Listenenden (background-attachment:local) — kein harter Cut.
   Dünne native Scrollbar als zweite Scroll-Affordance. */
.opc-block-summary .minicart-items-wrapper {
    max-height: min(45vh, 420px) !important;
    overflow-y: auto;
    margin: 0 !important;
    padding: 2px 10px 2px 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
    background:
        linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top / 100% 36px,
        linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom / 100% 36px,
        radial-gradient(farthest-side at 50% 0, rgba(34, 37, 41, 0.16), transparent) center top / 100% 12px,
        radial-gradient(farthest-side at 50% 100%, rgba(34, 37, 41, 0.16), transparent) center bottom / 100% 12px;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}
@media (max-width: 767px) {
    .opc-block-summary .minicart-items-wrapper {
        max-height: min(42vh, 360px) !important;
    }
}

/* Artikelzeilen: dezente Trenner (nur zwischen Zeilen), lesbare
   Größen statt 10.9px-Name. */
.opc-block-summary .minicart-items .product-item {
    padding: 10px 0 !important;
}
.opc-block-summary .minicart-items .product-item + .product-item {
    border-top: 1px solid #f0f0f0;
}
.opc-block-summary .minicart-items .product-item-name {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #2f2f2f !important;
}
.opc-block-summary .minicart-items .product-item .price {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222529 !important;
}
.opc-block-summary .minicart-items .details-qty {
    margin-top: 2px !important;
    font-size: 12.5px !important;
}
.opc-block-summary .minicart-items .details-qty .label,
.opc-block-summary .minicart-items .details-qty .value {
    color: #6b6b6b !important;
}

/* Thumbnails: Hausradius + zarte Kante gegen Weiß-auf-Weiß.
   padding:0 gegen Portos padding-right:10px (_order-summary.less) —
   das war der Float-Ära-Bildabstand und quetschte das Bild sichtbar
   nach links in den Rahmen (40px Bild + 10px Leerstreifen); der
   Abstand zum Text kommt jetzt vom gap der Flex-Zeile. */
.opc-block-summary .minicart-items .product-image-container {
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    padding: 0 !important;
}

/* Artikelzeile als Flex statt Luma-Float: 12px Luft zwischen Bild und
   Text (die globale product-item-details-Regel oben setzt padding:0
   !important — ohne gap klebte der Name an der Bildkante) und Bild
   vertikal mittig zur Textgruppe statt oben hängend. min-width:0,
   damit lange Teenamen umbrechen statt die Preisspalte zu schieben. */
.opc-block-summary .minicart-items .product-item > .product {
    display: flex;
    align-items: center;
    gap: 12px;
}
.opc-block-summary .minicart-items .product-item > .product > .product-image-container {
    float: none;
    flex: 0 0 auto;
}
.opc-block-summary .minicart-items .product-item .product-item-details {
    flex: 1 1 auto;
    min-width: 0;
}
/* Lumas margin-bottom (6.5px) unter dem inner liess die Textgruppe
   in der zentrierten Details-Box nach oben hängen — Box war mittig,
   Inhalt nicht. */
.opc-block-summary .minicart-items .product-item-inner {
    margin-bottom: 0 !important;
}

/* „Warenkorb ansehen und bearbeiten": sekundäre Bearbeiten-Route in
   der Link-Sprache der Sidebar (wie „Bearbeiten"-Links, AA-Grün). */
.opc-block-summary .actions-toolbar {
    margin: 10px 0 0 !important;
    text-align: left !important;
}
.opc-block-summary .actions-toolbar .action.viewcart {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-color-text, #0e7560) !important;
    transition: color 0.2s ease;
}
.opc-block-summary .actions-toolbar .action.viewcart:hover,
.opc-block-summary .actions-toolbar .action.viewcart:focus-visible {
    color: color-mix(in srgb, var(--theme-color, #179c80) 60%, black) !important;
    text-decoration: underline;
}

/* Totals: Labels aus dem AA-kritischen #777 auf Ink; Bestellsumme
   als klar abgesetzte Abschlusszeile. */
.opc-block-summary .table-totals th.mark,
.opc-block-summary .table-totals td.amount,
.opc-block-summary .table-totals .mark .value {
    color: #2f2f2f !important;
}
.opc-block-summary .table-totals .totals.shipping .mark .value {
    color: #6b6b6b !important;
    font-size: 12px;
}
.opc-block-summary .table-totals .grand th,
.opc-block-summary .table-totals .grand td {
    border-top: 2px solid #e7e7e7;
    padding-top: 12px !important;
}
.opc-block-summary .table-totals .grand th strong,
.opc-block-summary .table-totals .grand .price {
    color: #222529 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

@media (prefers-reduced-motion: reduce) {
    .opc-block-summary .actions-toolbar .action.viewcart {
        transition: none;
    }
}


/* ==================================================================
   CHECKOUT — "Bereits Kunde?"-Zeile (Login-Einstieg)
   Vorher: Core/Porto rendert den Login als 14px-Textlink oben rechts
   neben der Progress-Bar (float:right; margin-top:-95px; max-width:50%)
   — praktisch unsichtbar. Die authentication-Region ist aber das ERSTE
   Element in onepage.html; ohne den Porto-Float-Hack steht sie natuerlich
   ganz oben, volle Breite, vor der Progress-Bar. Dort wird sie zur
   ruhigen Zeile in der Karten-Sprache der Adresskarten (1px Rahmen,
   8px Radius, zarter Marken-Tint), Button oeffnet den unveraenderten
   Login-Dropdown (Modal-Widget, [data-trigger=authentication]) —
   Desktop rechtsbuendig direkt unter dem Button verankert, Mobil
   weiterhin als custom-slide Panel.
   Markup: theme-porto-child/Magento_Checkout/web/template/authentication.html
   Datenschutz: Zeile ist fuer alle Gaeste identisch, KEINE E-Mail-
   Existenz-Erkennung (enable_guest_checkout_login=0 via DataPatch im
   Modul OwnMag2Ext_CheckoutCustomization).
   Token-basiert -> naturteil erbt seinen Akzent automatisch.
   !important gegen spaeter ladendes Porto-CSS (_authentication.less).
   ================================================================== */
.checkout-container .authentication-wrapper {
    --om-accent: var(--theme-color, #179c80);
    --om-accent-ink: color-mix(in srgb, var(--om-accent) 72%, black);
    float: none !important;
    width: 100%;
    max-width: none !important;
    margin: 0 0 22px !important;
    text-align: left !important;
    position: relative;
}

.om-auth-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: color-mix(in srgb, var(--om-accent) 4%, #fff);
}

.om-auth-row__icon {
    flex: 0 0 auto;
    color: var(--om-accent-ink);
}

.om-auth-row__text {
    flex: 1 1 auto;
    margin: 0 !important;
    font-size: 13.5px;
    line-height: 1.45;
    color: #2f2f2f;
}

.om-auth-row__text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #222529;
}

/* Toggle als klarer Outline-Button statt Porto-Textlink
   (Porto: border:0; padding:0; background:none -> alles zuruecksetzen) */
.checkout-container .authentication-wrapper button.action-auth-toggle {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 24px !important;
    border: 1px solid var(--om-accent-ink) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--om-accent-ink) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-container .authentication-wrapper button.action-auth-toggle:hover {
    background: color-mix(in srgb, var(--om-accent) 10%, #fff) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    text-decoration: none !important;
}
.checkout-container .authentication-wrapper button.action-auth-toggle:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* Login-Dropdown am Button verankern statt volle Wrapper-Breite:
   rechtsbuendig, begrenzte Breite, kleiner Abstand zur Zeile. */
@media (min-width: 768px) {
    .checkout-container .authentication-wrapper .authentication-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 460px;
        margin-top: 8px;
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
    }
}

/* Mobil: Zeile bleibt VOR der order:-1-Sidebar (flex-column-Reorder
   der Checkout-Container weiter oben in dieser Datei). */
@media (max-width: 767px) {
    .checkout-container .authentication-wrapper {
        order: -2;
        margin-bottom: 16px !important;
    }
}
@media (max-width: 480px) {
    .om-auth-row {
        gap: 12px;
        padding: 12px 14px;
    }
    .om-auth-row__icon {
        display: none;
    }
    .om-auth-row__hint {
        font-size: 13px;
    }
    .checkout-container .authentication-wrapper button.action-auth-toggle {
        padding: 10px 16px !important;
    }
}

/* Innenleben des Login-Dropdowns/Panels an die Checkout-Markensprache
   angleichen: Titel auf Ink statt Porto-Hellgrau, Submit als gruener
   Primary-CTA (wie Bestell-Button), Radius 8px. */
.block-authentication .block-title strong {
    color: #222529 !important;
    font-weight: 600 !important;
}
.block-authentication .actions-toolbar .action.action-login {
    background: var(--theme-color, #179c80) !important;
    border: 1px solid var(--theme-color, #179c80) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600;
}
.block-authentication .actions-toolbar .action.action-login:hover {
    background: color-mix(in srgb, var(--theme-color, #179c80) 88%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color, #179c80) 88%, black) !important;
}
.block-authentication .actions-toolbar .action.action-login:focus-visible {
    outline: 2px solid var(--theme-color, #179c80);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-container .authentication-wrapper button.action-auth-toggle {
        transition: none;
    }
}

/* -----------------------------------------------------------------------
   Login-Overlay (Modal-Widget, .authentication-dropdown) — drei live auf
   CT123 diagnostizierte Defekte, nur mobil (custom-slide, <=767px) bzw.
   wie vermerkt:

   1) Scrim fehlt mobil: Das Overlay-Element .modal-custom-overlay traegt
      bereits computed position:fixed/inset0/rgba(51,51,51,.55) (Porto),
      steht aber im custom-slide-Modus auf display:none, obwohl das
      Modal-Widget beim Oeffnen "_has-modal-custom _has-auth-shown" auf
      <body> setzt (verifiziert per getComputedStyle/DOM, live) und beim
      Schliessen wieder entfernt. Folge ohne Fix: kein Abdunkeln, Klick
      auf den freien Streifen schliesst nicht, Hamburger bleibt darunter
      klickbar. Fix: Overlay nur in exakt diesem Zustand auf display:block
      zwingen — der bestehende Close-Handler des Modal-Widgets haengt
      ohnehin am Overlay-Element, hier wird nur seine Sichtbarkeit
      repariert. Auf Desktop (>=768px) ist dasselbe Overlay bereits
      transparent und regulaer sichtbar -> bewusst NICHT angefasst.
   2) Schliessen-Button ragt aus dem Viewport: .action-close ist 40x40px
      und um 45 Grad rotiert (Porto-Technik: Box dreht sich, ::before
      (horizontale Linie) + ::after (vertikale Linie) ergeben zusammen
      das Kreuz) — bei top:0/right:0 wandert die rotierte Bounding-Box
      bis x=383 bei 375px Breite, der Fokusring (programmatischer Fokus
      beim Oeffnen) erscheint dadurch als schiefer, abgeschnittener
      Diamant. Fix mobil: Rotation der Box neutralisieren, Box auf
      44x44px (Touch-Target) vergroessern, X-Kreuz stattdessen ueber
      zwei einzeln gegensinnig rotierte Linien nachbauen (Standard-
      Technik) — dafuer bekommt ::after hier dieselbe horizontale
      Geometrie wie ::before statt der vertikalen Desktop-Variante.
   3) X-Glyph zu duenn/klein (13-14px, dünne 1px-Linien) auf beiden
      Breakpoints -> Linien auf 20px Laenge / 2px Staerke in Ink (#2f2f2f)
      angehoben; Zentrierung ueber calc(50%) bleibt unabhaengig von der
      Boxgroesse korrekt (auch nach der 44px-Vergroesserung mobil).
   Token-basiert (var(--theme-color) fuer den Fokusring) -> naturteil
   erbt automatisch. !important gegen spaeter ladendes Porto-CSS.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    body._has-auth-shown .authentication-wrapper .dropdown-overlay.modal-custom-overlay {
        display: block !important;
    }
}

.authentication-dropdown .action-close::before {
    width: 20px !important;
    height: 2px !important;
    top: calc(50% - 1px) !important;
    left: calc(50% - 10px) !important;
    border-top: 2px solid #2f2f2f !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}
.authentication-dropdown .action-close::after {
    width: 2px !important;
    height: 20px !important;
    top: calc(50% - 10px) !important;
    left: calc(50% - 1px) !important;
    border-left: 2px solid #2f2f2f !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}

@media (max-width: 767px) {
    .authentication-dropdown .action-close {
        transform: none !important;
        top: 2px !important;
        right: 2px !important;
        width: 44px !important;
        height: 44px !important;
    }
    .authentication-dropdown .action-close::before,
    .authentication-dropdown .action-close::after {
        width: 20px !important;
        height: 2px !important;
        top: calc(50% - 1px) !important;
        left: calc(50% - 10px) !important;
        border-top: 2px solid #2f2f2f !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }
    .authentication-dropdown .action-close::before {
        transform: rotate(45deg) !important;
    }
    .authentication-dropdown .action-close::after {
        transform: rotate(-45deg) !important;
    }
    .authentication-dropdown .action-close:focus-visible {
        outline: 2px solid var(--theme-color, #179c80) !important;
        outline-offset: 2px !important;
    }
}


/* =====================================================================
   Bestellbestaetigung (checkout/onepage/success)
   Aufgeraeumter Aufbau nach Order-Confirmation-Best-Practices: sichtbare
   Dank-Ueberschrift mit gezeichnetem Haken-Signet, Bestellnummer und
   Mail-Hinweis mittig, Zahlungshinweis-Karte (Vorkasse-Bankdaten),
   Bestelluebersicht als 2-Spalten-Grid (Artikel+Summen | Adressen/
   Versand/Zahlart), EIN gruener Primaer-CTA statt zwei orangen.
   !important dort, wo Portos kompiliertes CSS spaeter laedt (Muster wie
   im uebrigen Checkout-Override weiter oben). */

/* Seitentitel reaktivieren - Magento blendet ihn auf der Success-Seite
   per visually-hidden (clip) aus - und als Bestaetigung inszenieren. */
body.checkout-onepage-success .page-title-wrapper {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 40px auto 10px !important;
    padding: 82px 15px 0;
    overflow: visible !important;
    clip: auto !important;
    text-align: center;
}

body.checkout-onepage-success .page-title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-color) 12%, #fff);
    animation: om-success-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.checkout-onepage-success .page-title-wrapper::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 50%;
    width: 24px;
    height: 12px;
    border-left: 3px solid var(--theme-color);
    border-bottom: 3px solid var(--theme-color);
    transform: translateX(-58%) rotate(-45deg);
    animation: om-success-fade 0.35s ease-out 0.15s both;
}

@keyframes om-success-pop {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
}

@keyframes om-success-fade {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.checkout-onepage-success .page-title-wrapper::before,
    body.checkout-onepage-success .page-title-wrapper::after {
        animation: none;
    }
}

body.checkout-onepage-success .page-title {
    margin: 0;
    font-size: clamp(26px, 4vw, 32px) !important;
    font-weight: 600;
    line-height: 1.25;
    /* Ink statt Portos Theme-Gruen: der Marken-Akzent bleibt Haken + CTA */
    color: #222 !important;
    text-transform: none;
    letter-spacing: normal;
    text-wrap: balance;
}

/* Inhaltsspalte: ruhige, zentrierte Lesebreite statt linksbuendigem
   Vollbreiten-Flattern. */
.om-success {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px 10px;
    color: #333;
}

.om-success-head {
    text-align: center;
    margin: 0 0 30px;
}

.om-success-orderno {
    font-size: 17px;
    color: #222;
    margin: 0 0 6px;
}

.om-success-orderno a {
    color: var(--theme-color);
    text-decoration: underline;
}

.om-success-note {
    color: #555;
    font-size: 15px;
    line-height: 1.55;
    max-width: 62ch;
    margin: 0 auto;
}

/* Zahlungshinweis (Vorkasse: Bankverbindung) - die eine Information, die
   nach der Bestellung wirklich handlungsrelevant ist, daher als getoente
   Karte direkt unter der Bestaetigung. */
.om-success-payinfo {
    border: 1px solid color-mix(in srgb, var(--theme-color) 30%, #fff);
    background: color-mix(in srgb, var(--theme-color) 6%, #fff);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 30px;
}

.om-success-payinfo h2 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 8px;
}

.om-success-payinfo p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* Bestelluebersicht */
.om-success-summary > h2 {
    font-size: 19px;
    font-weight: 600;
    color: #222;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 4px;
    padding: 0 0 10px;
    border-bottom: 2px solid #e7e7e7;
}

.om-success-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px 56px;
}

@media (max-width: 767px) {
    .om-success-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.om-success-itemlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.om-success-itemlist li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    margin: 0;
    border-bottom: 1px solid #ececec;
}

.om-item-name {
    display: block;
    font-weight: 500;
    color: #222;
    line-height: 1.4;
}

.om-item-qty {
    display: block;
    color: #6b6b6b;
    font-size: 13px;
    margin-top: 2px;
}

.om-item-total {
    white-space: nowrap;
    font-weight: 500;
    color: #222;
}

.om-success-totals {
    margin-top: 14px;
}

.om-total-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: #444;
}

.om-total-grand {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid #e7e7e7;
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.om-total-tax {
    text-align: right;
    color: #6b6b6b;
    font-size: 13px;
    margin: 3px 0 0;
}

/* Fakten-Spalte: Adressen, Versand, Zahlung */
.om-fact {
    padding: 13px 0;
    margin: 0;
    border-bottom: 1px solid #ececec;
}

.om-fact:last-child {
    border-bottom: 0;
}

.om-fact h3 {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 4px;
}

.om-fact p {
    margin: 0;
    color: #444;
    line-height: 1.55;
}

/* Aktionen: EIN gruener Primaer-CTA, Beleg-Druck als stiller Link.
   Portos actions-toolbar floatet - fuer die zentrierte Zeile neutralisieren. */
.om-success .om-success-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;
    margin: 34px 0 8px;
}

.om-success .om-success-actions .primary,
.om-success .om-success-actions .secondary {
    float: none !important;
    margin: 0 !important;
}

.om-success .om-success-actions .action.primary.continue {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 36px;
}

.om-success .om-success-actions .action.primary.continue:hover,
.om-success .om-success-actions .action.primary.continue:focus,
.om-success .om-success-actions .action.primary.continue:active {
    background: color-mix(in srgb, var(--theme-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color) 85%, black) !important;
}

.om-success .om-success-actions .action.om-print {
    color: #555;
    text-decoration: underline;
    text-transform: none;
}

.om-success .om-success-actions .action.om-print:hover {
    color: var(--theme-color);
}

.om-success-help {
    text-align: center;
    color: #555;
    font-size: 15px;
    margin: 0 0 34px;
}

.om-success-help a {
    color: var(--theme-color);
    text-decoration: underline;
}

/* Konto-Karte fuer Gaeste (Block checkout.registration): ruhiges Angebot
   mit Outline-Button statt zweitem Primaer-CTA, ohne die sachlich falsche
   Bestellstatus-Behauptung des Vendor-Templates. */
.om-success-register {
    max-width: 860px;
    margin: 0 auto 44px;
    padding: 0 15px;
}

.om-register-card {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 22px 24px;
    text-align: center;
}

.om-register-card h2 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 6px;
}

.om-register-card p {
    color: #555;
    line-height: 1.55;
    max-width: 62ch;
    margin: 0 auto 16px;
}

.om-register-email strong {
    color: #333;
    font-weight: 600;
}

.om-success-register .om-register-action {
    display: inline-block;
    padding: 10px 28px;
    border: 1px solid var(--theme-color);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.om-success-register .om-register-action:hover,
.om-success-register .om-register-action:focus {
    background: color-mix(in srgb, var(--theme-color) 8%, #fff);
    text-decoration: none;
}


/* ============================================================
   Checkout Schritt 1: Versandmethoden-Tabelle
   Bei nur einer Versandart soll die Zeile kompakt LINKS stehen
   (Radio - Preis - "DHL - Paket / Kleinpaket"), nicht ueber die
   volle Breite auseinandergezogen. Portos Bootstrap-.col-Regel
   setzt width:100% auf jede td -> width:100% auf der Tabelle
   drueckt die Spalten dann auseinander. Loesung: Tabelle auf
   Inhaltsbreite (width:auto, linksbuendig) + der width:1% +
   nowrap-Trick schrumpft jede Zelle exakt auf ihren Inhalt
   (kein Umbruch der zusammengelegten Methoden-Zelle,
   Child-Override shipping-method-list/-item.html).
   ============================================================ */
.checkout-index-index .table-checkout-shipping-method {
    width: auto;
}
.checkout-index-index .table-checkout-shipping-method td.col {
    width: 1%;
    white-space: nowrap;
}

/* ==============================================
   Trusted-Shops-Badge: verdeckt auf Checkout+Cart die rechte Betrags-
   spalte. Statt das modul-gesyncte trustbadge-JSON in core_config_data
   zu editieren (TS-Sync ueberschreibt das, Falle
   'trustedshops-easy-integration-install'), hier sync-sicher und
   reversibel per CSS: Badge wandert im Checkout/Cart nach LINKS unten
   (unter den Haupt-CTA, dort ist ohnehin Leerflaeche); mobil (<=991px)
   ausgeblendet, weil keine freie Flaeche existiert und es immer
   Bedienelemente verdeckt. Uebriger Shop bleibt unten rechts.
   Container-ID ist hash-suffigiert -> Attribut-Selektor [id^=]. Verifiziert am
   Live-DOM (CT123, etrusted widget.js/v2): der aeussere trustbadge-container
   ist ein 0x0-Wrapper; das SICHTBARE Badge sitzt auf einem inneren
   position:fixed-Div (rechts unten via right:20px;bottom:54px). Ein
   left/right-Override auf dem Container bewegt daher NICHTS. Der fixed-
   Positionierer ist strukturell container > div > div (genau 1 Treffer,
   Klassen sind CSS-in-JS-Hashes -> nicht selektierbar) und WIRD hierueber
   nach links geschoben (badge x 1327 -> 16, bottom bleibt). Falle: haengt an
   der Verschachtelungstiefe des Widgets, bei TS-Widget-Update pruefen.
   Checkout ist Knockout-SPA -> selber Knoten ueber alle Steps.
   ============================================== */
.checkout-cart-index div[id^="trustbadge-container"] > div > div {
    right: auto !important;
    left: 16px !important;
}
/* Checkout: Badge auf ALLEN Breiten aus. Die Links-Verschiebung lebte von
   der 80px-Leerflaeche unter dem CTA - die wurde mit dem padding-bottom-Fix
   (Issue 03) entfernt, seitdem ueberdeckte das fixed-Badge die
   Rechnungsadresse (P0-Befund Critique 2026-07-20). Im Bezahlschritt gibt
   es keine kollisionsfreie Flaeche; Vertrauensanker bleibt der Shop-Rest. */
.checkout-index-index div[id^="trustbadge-container"] {
    display: none !important;
}
@media (max-width: 991px) {
    .checkout-cart-index div[id^="trustbadge-container"] {
        display: none !important;
    }
}


/* ==============================================
   Checkout-Critique Issue 02: Token-Sweep
   ============================================== */

/* Versandart-Radios: Browser-Blau -> Markenfarbe, 13px -> 18px (Zahlart-Radios sind 1x1px versteckt, brauchen nichts) */
.checkout-index-index .table-checkout-shipping-method input[type="radio"] {
    accent-color: var(--theme-color);
    width: 18px;
    height: 18px;
}

/* Legal-Links im Zahl-Step (Eigenbau a.agb-link / a.widerruf-link): #006bb4 -> Marken-Token; Unterstreichung bleibt; :visited darf nicht abweichen */
.checkout-index-index a.agb-link,
.checkout-index-index a.widerruf-link,
.checkout-index-index a.agb-link:visited,
.checkout-index-index a.widerruf-link:visited {
    color: var(--theme-color) !important;
    text-decoration: underline;
}

/* CTA-Font-Bruch: Checkout-Buttons liefen in Open Sans statt Poppins */
.checkout-index-index button.action {
    font-family: 'Poppins', 'Open Sans', Arial, sans-serif !important;
}

/* Haupt-CTAs: Höhe über vertikales Padding statt starrer height/line-height (mobil sonst gedrungen) */
.checkout-index-index button.action.continue,
.checkout-index-index button.action.primary.checkout {
    padding: 12px 17px !important;
    height: auto !important;
    line-height: 1.3 !important;
    min-height: 48px !important;
}

/* Zahlarten-Instructions (Vorkasse IBAN/BIC): Porto #777 (4.48:1) -> muted-Token */
.checkout-index-index .payment-method-content {
    color: #6b6b6b;
}

/* Versandpreis in den Totals: zahlungsrelevante Zahl gewichten (Farbe war schon Ink) */
.opc-block-summary .totals.shipping .amount,
.opc-block-summary .totals.shipping .amount .price {
    color: #2f2f2f;
    font-weight: 600;
}

/* Magento-Core-Fokus-Glow (#68a8e0, styles-m: ._keyfocus :focus) im Checkout durch den Marken-Ring ersetzen — nie fokuslos */
.checkout-index-index._keyfocus :focus,
.checkout-index-index ._keyfocus :focus,
.checkout-index-index input:not([disabled]):focus,
.checkout-index-index textarea:not([disabled]):focus,
.checkout-index-index select:not([disabled]):focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
}

/* ==== Issue 03 - Checkout mobil: Touch-Ziele, Header-Occlusion, Leerflaeche ==== */

/* Befund 2: Porto macht .header-main beim Scrollen fixed (opak, 60px, z:9)
   und verdeckt die oberste Checkout-Karte (Occlusion, KEIN z-Stack-Konflikt -
   z-index wuerde nichts heilen). Im Funnel kein Sticky noetig ->
   Header scrollt mit. */
@media (max-width: 991px) {
    .checkout-index-index .header-main {
        position: static !important;
    }

    /* Befund 1: "Bearbeiten"-Icon-Buttons (Adresse/Versandart im Recap) sind
       nur 16px hoch. 44px-Trefferflaeche via Padding, negativer Margin
       neutralisiert den Layout-Zuwachs in der Flex-Titelzeile. */
    .checkout-index-index .opc-block-shipping-information .action-edit {
        display: inline-flex !important;
        align-items: center;
        min-height: 44px !important;
        padding: 14px 4px !important;
        margin: -14px 0 !important;
    }
}

/* Knockout blendet den ship-via-Edit bei nur EINER Versandart per
   Inline-display:none aus (visible: hasMultipleShippingRates). Die
   !important-Trefferflaechen-Regel oben schlug diesen Inline-Style und
   machte den Button mobil faelschlich sichtbar (Desktop korrekt versteckt).
   Der [style]-Check stellt das KO-Urteil auf allen Breiten wieder her. */
.checkout-index-index .opc-block-shipping-information .action-edit[style*="none"] {
    display: none !important;
}

/* Befund 3: Leerflaeche CTA->Footer (375: 149px / 1440: 206px). Core stapelt
   padding-bottom:40px auf .page-main UND .column.main (=80px). min-height
   war nicht ursaechlich, defensiv auf 0. Wirkt mobil UND Desktop. */
.checkout-index-index .page-main {
    padding-bottom: 0 !important;
}
.checkout-index-index .column.main {
    padding-bottom: 24px !important;
}
.checkout-index-index .checkout-container {
    min-height: 0 !important;
}

/* ==============================================
   Checkout-Harmonisierung: Billing-Edit-Button + Legal-Modals (AGB/Widerruf)
   ============================================== */

/* Rechnungsadresse-Recap: button.action-edit-address war nie gestylt ->
   Porto-Default (eckig, #777 unter AA). Gleiche Affordanz wie die Recap-Edits
   der Sidebar -> gleiches Gruen-Link-Pattern (#0e7560, AA auf weiss). */
.checkout-index-index .billing-address-details .action-edit-address {
    display: inline-flex;
    align-items: center;
    background: none !important;
    border: 0 !important;
    height: auto !important;
    min-height: 44px;
    margin: 0;
    padding: 0 !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--theme-color-text, #0e7560) !important;
    text-transform: none;
    transition: color 0.2s ease;
}

.checkout-index-index .billing-address-details .action-edit-address:hover,
.checkout-index-index .billing-address-details .action-edit-address:focus-visible {
    color: color-mix(in srgb, var(--theme-color) 60%, black) !important;
    background: none !important;
    text-decoration: underline;
}

/* --- Legal-Modals (Eigenbau CheckoutCustomization, modalClass
   agb-modal-popup / widerruf-modal-popup; Klassen existieren nur dort) --- */

/* Karte auf den 8px-Token statt scharfer Kanten */
.agb-modal-popup .modal-inner-wrap,
.widerruf-modal-popup .modal-inner-wrap {
    border-radius: 8px;
    overflow: hidden;
}

/* Kopf: Titel war 16px/300 (wirkte verloren), das X ein 74px-Klotz, der ueber
   die Modalkante ragte. Titel im Stil der Checkout-Step-Titel (gleicher
   #e7e7e7-Divider), X als 44px-Ziel innerhalb des Kopfs zentriert. */
.agb-modal-popup .modal-header,
.widerruf-modal-popup .modal-header {
    position: relative;
    padding: 24px 72px 0 32px;
}

/* !important: Portos kompilierte .modal-*-Regeln laden spaeter und gewinnen
   sonst bei gleicher/hoeherer Spezifitaet (Titel blieb 16px, X 57px). */
.agb-modal-popup .modal-title,
.widerruf-modal-popup .modal-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: #222529 !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
    border-bottom: 2px solid #e7e7e7 !important;
}

.agb-modal-popup .action-close,
.widerruf-modal-popup .action-close {
    top: 14px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #6b6b6b !important;
    transition: color 0.2s ease;
}

.agb-modal-popup .action-close:hover,
.agb-modal-popup .action-close:focus-visible,
.widerruf-modal-popup .action-close:hover,
.widerruf-modal-popup .action-close:focus-visible {
    color: #1a1d20 !important;
}

/* Inhalt: lief komplett in #777 (4.48:1, unter AA); CMS-Headings kamen in
   Seitengroesse (h1 36px) ins Modal. Zeilenlaenge wird ueber die Rahmenbreite
   (720px, s. Desktop-Block unten) gedeckelt, nicht mehr per 68ch am Textblock —
   der liess rechts ~180px Leerraum im 800px-Rahmen stehen. */
.agb-modal-popup .modal-content,
.widerruf-modal-popup .modal-content {
    color: #2f2f2f;
    padding: 8px 32px 16px;
}

.agb-modal-popup .modal-content-body,
.widerruf-modal-popup .modal-content-body {
    line-height: 1.7;
}

/* Titel-Dedup: die CMS-H1 ("Allgemeine Geschaeftsbedingungen mit
   Kundeninformationen" / "Widerrufsbelehrung & Widerrufsformular") wiederholt
   den Modal-Titel direkt darunter — und war mit 1.45rem groesser als der
   1.25rem-Titel (Hierarchie-Inversion). Der Kopf-Titel ist die eine
   Ueberschrift; die H1 fliegt raus (kein phtml-Override moeglich, Inhalt
   kommt per AJAX aus der CMS-Seite). */
.agb-modal-popup .modal-content-body h1,
.widerruf-modal-popup .modal-content-body h1 {
    display: none;
}

.agb-modal-popup .modal-content-body h2,
.widerruf-modal-popup .modal-content-body h2 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1d20;
    margin: 1.4em 0 0.5em;
}

.agb-modal-popup .modal-content-body h3,
.widerruf-modal-popup .modal-content-body h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #222529;
    margin: 1.3em 0 0.4em;
}

.agb-modal-popup .modal-content-body > :first-child,
.widerruf-modal-popup .modal-content-body > :first-child {
    margin-top: 0;
}

/* Fuss: "Schliessen" traegt .action.primary (mit Leerzeichen!), nicht
   .action-primary -> der Marken-Block in cart-minicart.css griff nie und
   Porto-Werks-Orange blieb stehen. */
.agb-modal-popup .modal-footer .action.primary,
.widerruf-modal-popup .modal-footer .action.primary {
    background: var(--theme-color) !important;
    border: 1px solid var(--theme-color) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.agb-modal-popup .modal-footer .action.primary:hover,
.agb-modal-popup .modal-footer .action.primary:active,
.widerruf-modal-popup .modal-footer .action.primary:hover,
.widerruf-modal-popup .modal-footer .action.primary:active {
    background: color-mix(in srgb, var(--theme-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color) 85%, black) !important;
}

.agb-modal-popup .modal-footer .action.primary:focus-visible,
.widerruf-modal-popup .modal-footer .action.primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent);
}

/* Desktop: Rahmen statt Textblock deckeln. agb-notice.css (Modul) setzt
   max-width:800px auf den Wrap und max-height:60vh auf den Content — beide
   !important-Overrides noetig (gleiche Spezifitaet, Ladereihenfolge der
   kompilierten Bundles nicht garantiert). 720px − 64px Padding ≈ 75ch bei
   16px Poppins → Text fuellt die Karte, bleibt aber im Lesemass. */
@media (min-width: 768px) {
    .agb-modal-popup .modal-inner-wrap,
    .widerruf-modal-popup .modal-inner-wrap {
        max-width: 720px !important;
    }

    .agb-modal-popup .modal-content,
    .widerruf-modal-popup .modal-content {
        max-height: 70vh !important;
    }
}

/* Mobil: vollflaechiges Sheet statt Slide-Panel. Magentos responsive-Modus
   (modal-slide) liess links einen Scrim-Streifen stehen und agb-notice.css
   kappte den Inhalt auf 60vh → 166px Blindflaeche vor dem Footer. Flex-Spalte
   Header–Inhalt–Footer gibt dem Text die volle Resthoehe; X bleibt 44px. */
@media (max-width: 767px) {
    .agb-modal-popup.modal-popup,
    .widerruf-modal-popup.modal-popup {
        left: 0 !important;
    }

    .agb-modal-popup .modal-inner-wrap,
    .widerruf-modal-popup .modal-inner-wrap {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: none !important;
        height: 100%;
        margin: 0 !important;
        border-radius: 0;
    }

    .agb-modal-popup .modal-header,
    .widerruf-modal-popup .modal-header {
        flex: 0 0 auto;
        padding: 18px 64px 0 20px;
    }

    .agb-modal-popup .action-close,
    .widerruf-modal-popup .action-close {
        top: 8px;
        right: 8px;
    }

    .agb-modal-popup .modal-content,
    .widerruf-modal-popup .modal-content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto !important;
        padding: 8px 20px 16px;
    }

    .agb-modal-popup .modal-footer,
    .widerruf-modal-popup .modal-footer {
        flex: 0 0 auto;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .agb-modal-popup .modal-footer .action.primary,
    .widerruf-modal-popup .modal-footer .action.primary {
        width: 100%;
        min-height: 48px;
    }
}


/* ==============================================
   Mobiler Checkout: scroll-padding an der Tastaturkante
   Flankierend zum focusin-Handler (js/o2e-checkout-focus-scroll.js,
   Begruendung + Recherche dort): scroll-padding gilt laut CSS-Scroll-
   Snap-Spec fuer alle scroll-into-view-Operationen, wirkt an der
   Tastaturkante aber nur, wenn der Layout-Viewport resized - also auf
   Android mit interactive-widget=resizes-content (Layout-Head der
   Checkout-Seite). Haelt Browser-eigene Fokus-Scrolls vom Rand weg.
   ============================================== */
@media (max-width: 991px) {
    html:has(body.checkout-index-index) {
        scroll-padding-top: 96px;
        scroll-padding-bottom: 120px;
    }
}


/* ============================================================
   Payment-Step-Aufraeumen (Critique 2026-07-20): Rechnungsadresse
   als gleichwertige Sektion + Adress-Dopplung mobil aufloesen.
   Linien-/Kartenlogik: siehe Kommentar bei .opc-wrapper .step-title.
   ============================================================ */

/* Rechnungsadresse wirkte "nach links gequetscht": kein Binnenabstand,
   Adresse in Porto-Grau. Luft zur Folgesektion + Ink-Farbe/Zeilenmass
   wie der Lieferadress-Recap in der Sidebar. */
.checkout-payment-method .checkout-billing-address {
    margin: 0 0 1.9em;
}
.checkout-index-index .billing-address-details {
    color: #2f2f2f;
    line-height: 1.6;
}

/* Mobil (<=991px) haengt der Block per o2e-checkout-payment-expand.js
   direkt UNTER dem Lieferadress-Recap in #opc-sidebar. Bei "Rechnungs-
   adresse = Lieferadresse" stand dieselbe Anschrift damit zweimal
   unmittelbar untereinander. Die Klasse o2e-billing-same setzt das
   billing-address.html-Template per KO-css-Binding; das Label
   "Rechnungs- und Lieferadresse" + der "+ Abweichende..."-Button bleiben
   als Ein-Zeilen-Aussage stehen. Desktop (Hauptspalte, raeumlich von der
   Sidebar getrennt) zeigt die uebernommene Adresse weiterhin (Baymard:
   Textzusammenfassung der Billing-Adresse beugt Validierungs-Irrtum vor). */
@media (max-width: 991px) {
    #opc-sidebar > .checkout-billing-address.o2e-billing-same .billing-address-details {
        display: none;
    }
}

/* Hinweiszeile "Rechnungsadresse ist gleich Lieferadresse": ersetzt in der
   mobilen Sidebar die dort ausgeblendeten Adress-Details (o2e-billing-same)
   direkt ueber dem "+ Abweichende..."-Link. Desktop zeigt weiterhin die
   uebernommene Adresse selbst -> Zeile dort aus (Basisregel none, das
   KO-visible-Binding steuert zusaetzlich den Same-Zustand). */
.billing-address-same-hint {
    display: none;
    margin: 0 0 0.25em;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b6b6b;
}
@media (max-width: 991px) {
    #opc-sidebar > .checkout-billing-address .billing-address-same-hint {
        display: block;
    }
}


/* ==============================================
   Adresszusatz (street.1) eingeklappt (Baymard: "Address Line 2"
   hinter einem Link verstecken statt immer zwei Strassenfelder
   zu zeigen). Klapplogik steckt in den JS-Komponenten
   (address-line2.js / address-line2-toggle.js), diese Regel ist
   rein optisch - Sicht-/Klappzustand wird ueber Knockout visible
   gesteuert, keine CSS-Hoehen-Transition.
   ============================================== */

/* Spezifitaet 0,3,0 (Klasse verdoppelt statt Container-Pfad: der Button
   sitzt als Fieldset-Geschwister der street-Gruppe, in Shipping UND
   Billing-Formularen): Portos Checkout-Button-Chrome laedt spaeter und
   wuerde den Textlink sonst wieder in einen Kasten-Button zurueckdrehen. */
.checkout-index-index .om-line2-toggle.om-line2-toggle {
    appearance: none;
    text-transform: none;
    -webkit-appearance: none;
    display: inline-block;
    margin: 0 0 0.9em;
    padding: 0.4em 0; /* vertikale Trefferflaeche statt 44px-Mindesthoehe */
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    /* 72%-Mix wie die uebrigen gruenen Textlinks im Checkout: pures
       --theme-color (#179c80) schafft auf Weiss nur ~3,4:1 (AA braucht 4,5:1) */
    color: color-mix(in srgb, var(--theme-color) 72%, black);
    cursor: pointer;
    transition: color 0.2s ease;
}

.checkout-index-index .om-line2-toggle.om-line2-toggle:hover {
    text-decoration: underline;
}

.checkout-index-index .om-line2-toggle.om-line2-toggle:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-index-index .om-line2-toggle.om-line2-toggle {
        transition: none;
    }
}

/* Mobil: Trefferflaeche auf ~44px heben (Desktop-Padding ergab nur ~30px);
   Negativ-Margin oben + kleineres Margin unten gleichen das Padding optisch
   aus, der Feld-Rhythmus bleibt unveraendert. */
@media (max-width: 991px) {
    .checkout-index-index .om-line2-toggle.om-line2-toggle {
        padding: 13px 8px 13px 0;
        margin: -8px 0 0.2em;
    }
}

/* Label "Adresszusatz (optional)" sichtbar machen: der Core versteckt
   Labels zusaetzlicher Strassenzeilen per abs-visually-hidden
   (position:absolute/1px/clip). Nach dem Aufklappen - und besonders im
   Auto-Aufklapp-Fall (gespeicherte Adresse, Reload), wo der Link fehlt -
   braucht das Feld ein sichtbares Label wie alle anderen Checkout-Felder.
   !important, weil das kompilierte Porto-/Blank-CSS spaeter laedt. */
.checkout-index-index .field.street .field.additional > .label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    display: block;
}