/* ========================================
   Poppins Font Family - Lokal gehostet
   ======================================== */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   Poppins global anwenden
   ======================================== */

body {
    font-family: 'Poppins', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif !important;
}

/* ========================================
   Produkt-Beschreibungen mit Icons
   ======================================== */
.header-left a.logo img {
    object-fit: contain !important;
}


.product.attribute.description .value ul {
    padding-left: 0px !important;
    padding-inline-start: 0px !important;
    list-style: none;
}

.product.attribute.description .value ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.product.attribute.description .value ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    font-size: 20px;
    font-weight: 600;
    color: #4CAF50;
}

/* ========================================
   Quelle Input
   ======================================== */

#quelle_dv {
    display: flex;
    align-items: center;
    gap: 10px;
}

#quelle_dv input#quelle {
    width: 3em;
    text-align: center;
}

/* ========================================
   Helper Classes
   ======================================== */

.a-center {
    text-align: center;
}

.a-left {
    text-align: left;
}

.a-right {
    text-align: right;
}

/* ========================================
   Grouped Product Table
   3 Spalten: Name à | Preis | Grundpreis
   Radio-Button versteckt, Zeile klickbar
   ======================================== */

#super-product-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    /* Abschluss-Hairline unter der letzten Zeile: schliesst die Optionsliste
       optisch (die Zwischenlinien kommen aus td{border-top}, unter der letzten
       Zeile fehlte sonst ein Strich) UND reserviert die 1px dauerhaft. Dadurch
       verschmilzt der gruene border-bottom von tr.selected bei der letzten
       Zeile mit dieser Linie statt 1px Hoehe zu addieren -> kein Springen der
       darunterliegenden Buttons mehr. Tabellen-Border hat im collapse-Modell
       die niedrigste Praezedenz, daher gewinnt der gruene Zeilen-Border bei
       Auswahl trotzdem. */
    border-bottom: 1px solid #e7e7e7;
}

#super-product-table td,
#super-product-table th {
    padding: 12px 10px;
    vertical-align: middle;
}

#super-product-table th {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.9rem;
}

.table.grouped thead,
.table.grouped thead th {
    text-transform: none !important;
}

/* Verstecktes per-Zeile-Mengenfeld (number) bleibt off-screen.
   Das Radio wird NICHT mehr versteckt -> sichtbarer Auswahl-Marker (s.u.). */
#super-product-table input[type="number"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Sichtbarer Auswahl-Marker: echtes Radio in Markenfarbe.
   Klarere "markierte Auswahl" als ein Seitenrahmen - der Mechanismus IST
   eine Radio-Single-Select (name=VerpackGroesse). Leerer Kreis = nicht
   gewaehlt, gefuellter gruener Kreis = gewaehlt. Plus Zeilen-Tint + fetter
   gruener Name (s. tr.selected). */
/* Marker = custom Check-Kreis (appearance:none, KEIN natives Radio):
   ungewaehlt zarter grauer Ring, gewaehlt Markengruen gefuellt. Der weisse
   Haken kommt auf DESKTOP als ::before der selektierten Zelle (Poppins-Glyphe
   \2713 - die bevorzugte Optik). MOBIL (<=767px) wird dieses Pseudo vom
   data-th-Killer entfernt (und wuerde dort ohnehin vom Radio uebermalt); dort
   traegt stattdessen das Radio selbst den Haken als background-image-SVG
   (s. Media-Query unten). Absolut in fixer Links-Spalte; Namen bleiben
   rechtsbuendig nah am Preis. */
#super-product-table .hidden-radio {
    appearance: none;
    -webkit-appearance: none;
    position: absolute !important;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 1.5px solid #d2d2d2;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
#super-product-table tbody tr:hover .hidden-radio {
    border-color: color-mix(in srgb, var(--theme-color) 55%, #d2d2d2);
}
#super-product-table .hidden-radio:checked {
    border-color: var(--theme-color);
    background: var(--theme-color); /* gruener Kreis; Haken = ::before (Desktop) bzw. SVG (mobil, s.u.) */
}
#super-product-table td.col-name {
    position: relative;
    padding-left: 44px; /* Platz fuer das absolut positionierte Radio links */
}
/* DESKTOP-Haken: weisse Poppins-Glyphe als ::before der selektierten Zelle,
   z-index ueber dem Radio. Mobil wird dieses Pseudo vom data-th-Killer
   entfernt; dort traegt das Radio-SVG den Haken (s. Media-Query unten). */
#super-product-table tr.selected td.col-name::before {
    content: '\2713'; /* weisser Haken auf dem gruenen Kreis */
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    z-index: 2; /* ueber dem Radio-<input> (sonst verdeckt der gruene Kreis den Haken) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* Spalte 1: Name à */
#super-product-table .col-name,
#super-product-table td.col-name {
    width: 45%;
    text-align: right;
    white-space: nowrap;
}

#super-product-table td.col-name .item-name {
    font-weight: 500;
}

#super-product-table td.col-name .stock-unavailable {
    font-size: 0.8rem;
    color: #c00;
    margin-right: 8px;
}

/* Spalte 2: Preis */
#super-product-table .col-price,
#super-product-table td.col-price {
    width: 25%;
    white-space: nowrap;
    text-align: center;
}

/* Spalte 3: Grundpreis */
#super-product-table .col-baseprice,
#super-product-table td.col-grundpreis {
    width: 30%;
    white-space: nowrap;
    text-align: right;
    font-size: 0.88rem;
}

/* Zeilen-Interaktion
   Marken-Schema (war generisches Blau #eaf3fb/#c8ddf0/#2196F3) ueber
   var(--theme-color)+color-mix -> shop-neutral. KEIN Side-Stripe mehr
   (border-left/right 4px war impeccable-Ban): Selected = flaechiger Tint
   + volle Hairline, klarere "ganze Zeile an"-Affordance. */
#super-product-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#super-product-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--theme-color) 7%, white);
}

/* Ausgewählte Zeile */
#super-product-table tr.selected {
    background-color: color-mix(in srgb, var(--theme-color) 12%, white);
    border-top: 1px solid color-mix(in srgb, var(--theme-color) 32%, white);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 32%, white);
}

#super-product-table tr.selected td.col-name .item-name {
    font-weight: 700;
    color: var(--theme-color, #2196F3);
}

#super-product-table tr.selected:hover {
    background-color: color-mix(in srgb, var(--theme-color) 16%, white);
}

/* Price Styling */
.table.grouped .price-box .price {
    font-size: 1rem;
    font-weight: 600;
}

.table.grouped .price-box {
    margin: 0;
}

/* ========================================
   Custom-Option-Radios (Simple Products, z. B. "Größe")
   Gleiche Form-Control-Sprache wie die Grouped-Radios oben
   (#super-product-table): grauer Kreis -> gruen gefuellt + weisser Haken,
   Hover-Tint, gewaehlte Zeile gruen/fett. KEIN Tabellen-Layout - nur die
   schlanke Optionsliste als selektierbare Reihen veredelt.
   Strikt auf Radio-Optionen begrenzt (:has(> input[type=radio])), damit
   Checkbox-/Dropdown-/Text-Optionen nativ bleiben. */

/* Aufzaehlungsabstaende der Liste zuruecksetzen */
.product-options-wrapper .options-list {
    margin: 0;
}

/* Auswahlzeile: Radio links, Label fuellt den Rest, ganze Zeile als Affordance */
.product-options-wrapper .field.choice:has(> input[type="radio"]) {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px !important;
    padding: 9px 12px 9px 14px !important;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.product-options-wrapper .field.choice:has(> input[type="radio"]):hover {
    background-color: color-mix(in srgb, var(--theme-color) 7%, white);
}

/* Natives Radio -> 20px Kreis (identisch zu .hidden-radio im Grouped-Table) */
.product-options-wrapper .field.choice > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 1.5px solid #d2d2d2;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.product-options-wrapper .field.choice:hover > input[type="radio"] {
    border-color: color-mix(in srgb, var(--theme-color) 55%, #d2d2d2);
}

/* Gewaehlt: gruener Kreis + weisser Haken (SVG, kein Pseudo noetig) */
.product-options-wrapper .field.choice > input[type="radio"]:checked {
    border-color: var(--theme-color);
    background-color: var(--theme-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.4 4.8 8.7 9.5 3.6'/%3E%3C/svg%3E");
}
.product-options-wrapper .field.choice > input[type="radio"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, white);
    outline-offset: 2px;
}

/* Label fuellt die Zeile (Klickflaeche), dunkler lesbarer Text */
.product-options-wrapper .field.choice:has(> input[type="radio"]) > label {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500;
    color: #2f2f2f;
    cursor: pointer;
}

/* Gewaehlte Zeile: flaechiger Tint + volle Hairline + Label gruen/fett */
.product-options-wrapper .field.choice:has(> input[type="radio"]:checked) {
    background-color: color-mix(in srgb, var(--theme-color) 12%, white);
    border-color: color-mix(in srgb, var(--theme-color) 32%, white);
}
.product-options-wrapper .field.choice:has(> input[type="radio"]:checked):hover {
    background-color: color-mix(in srgb, var(--theme-color) 16%, white);
}
.product-options-wrapper .field.choice:has(> input[type="radio"]:checked) > label {
    font-weight: 700;
    color: var(--theme-color);
}

/* Pflicht-Kennzeichnung: das kryptische, unerklaerte "*" (Magento-Standard,
   ohne Legende auf der Seite) -> ruhiges, selbsterklaerendes Wort. NUR in den
   Produktoptionen gescoped; Checkout/Adresse behalten ihr Standard-"*". */
.product-options-wrapper .field.required > label.label::after {
    content: "erforderlich";
    margin-left: 8px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1;
    color: #6f6f6f;
    letter-spacing: .01em;
    vertical-align: 1px;
}

/* Nicht-Auswahl-Meldung als klarer Inline-Hinweis. Strikt nur der
   Meldungsknoten (id endet auf "-error"), NICHT die input.mage-error-Radios
   (sonst wuerde jeder Kreis rot -> liest sich als "alle Optionen kaputt",
   obwohl nur die Gruppe unbeantwortet ist). Die Meldung traegt den Fehler. */
.product-options-wrapper .mage-error[id$="-error"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: color-mix(in srgb, #e02b27 8%, white);
    color: #b3221d;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}
.product-options-wrapper .mage-error[id$="-error"]::before {
    content: "!";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e02b27;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Regression-Fix: der gruene :focus-visible-Ring (Erfolgs-/Auswahlfarbe aus
   dem Radio-Styling oben) darf NICHT auf einem als Fehler fokussierten Radio
   liegen - Magento fokussiert das erste ungueltige Feld. Keine Rotfaerbung der
   Kreise; die Meldung kommuniziert den Fehler. */
.product-options-wrapper .field.choice > input[type="radio"].mage-error,
.product-options-wrapper .field.choice > input[type="radio"].mage-error:focus,
.product-options-wrapper .field.choice > input[type="radio"].mage-error:focus-visible {
    outline: none;
}

/* ========================================
   Versandtabelle
   ======================================== */

.versand {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: block;
    overflow-x: auto;
}

.versand .kopf {
    vertical-align: middle;
    text-align: center;
    border: 1px solid;
    padding: 3px 10px;
}

.versand .mitte {
    vertical-align: middle;
    text-align: center;
    border: 1px solid;
    padding: 3px;
}

.versand .links {
    vertical-align: middle;
    text-align: left;
    border: 1px solid;
    padding: 3px;
}

.v-box {
    font-size: 0.9rem;
}

.lieferung-uebersicht h2 {
    margin: 0px;
}

/* ========================================
   Kategorie- und Produktansicht
   ======================================== */

.breadcrumbs {
    height: 30px;
}

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

.product-item-name a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.minimal-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
}

.minimal-price .price-label,
.minimal-price .price-container {
    display: inline;
}

.catalog-category-view .product-item .price-box .price-label {
    font-size: 1.0rem;
}

/* Einzelpreis (Simple Products) im Kategorie-Grid wie der "Ab x,xx €"-Preis
   gruppierter Produkte darstellen: 14px, font-weight 400 (zurueckhaltend,
   Paritaet zur .minimal-price-Regel weiter unten). Vorher 16px/600 (groesser,
   fett). !important gegen Portos 600-Default. */
.catalog-category-view .price-box .price {
    font-size: 14px !important;
    font-weight: 400 !important;
}

info.type6 .product.name {
    padding-right: 0px;
}

/* ========================================
   Footer
   ======================================== */

.zahlungsarten {
    display: flex;
    flex-wrap: wrap;
    max-height: 40px;
    max-width: 100%;
}

.footer ul {
    display: flex;
    gap: 15px;
}

/* ========================================
   Navigation - Kein Uppercase in Menüs
   ======================================== */

@media (min-width: 992px) {
    .page-header .navigation .level0 > .level-top {
        text-transform: none !important;
    }
}

/* ========================================
   Navigation - Schriftgröße & Gewicht (edler, lesbarer)
   Porto-Default war 13px/700 -> wirkte klein und "gequetscht". 14px/600
   (Semibold) liest ruhiger und wertiger, ohne laut zu sein. 15px wurde
   bewusst verworfen: bei 9 Top-Level-Einträgen bricht die Leiste sonst auf
   gängigen Laptop-Breiten (1280/1200px) in eine zweite Zeile um (live an
   1440/1280/1200 verifiziert). Das horizontale Item-Padding wird passend dazu
   von 16px auf 13px gesenkt -> siehe Regel "breitere Trigger" weiter unten
   (einzige Quelle fuers Padding), damit die groesseren Glyphen einzeilig bleiben.
   !important: Porto lädt später im Bundle ([[porto-css-override-important]]).
   ======================================== */
@media (min-width: 992px) {
    .page-header .navigation .level0 > .level-top {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

/* ========================================
   Navigation - Hover-Unterstreichung (Links → Rechts)
   ======================================== */

@media (min-width: 992px) {
    /* Basis: Kein Standard-Underline, Farb-Transition vorbereiten */
    .page-header .navigation .level0 > .level-top {
        position: relative;
        text-decoration: none !important;
        transition: color 0.25s ease;
    }

    /* Pseudo-Element als animierte Unterstreichung */
    .page-header .navigation .level0 > .level-top::after {
        content: '';
        position: absolute;
        bottom: 14px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--theme-color);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s ease;
    }

    /* Hover: Farbe + Unterstreichung fährt von links nach rechts ein */
    .page-header .navigation .level0 > .level-top:hover {
        color: var(--theme-color) !important;
        text-decoration: none !important;
    }

    .page-header .navigation .level0 > .level-top:hover::after {
        transform: scaleX(1);
    }

    /* Aktive Seite: Unterstreichung und Farbe bleiben dauerhaft */
    .page-header .navigation .level0.active > .level-top,
    .page-header .navigation .level0.ui-state-active > .level-top,
    .page-header .navigation .level0.current > .level-top {
        color: var(--theme-color) !important;
        text-decoration: none !important;
    }

    .page-header .navigation .level0.active > .level-top::after,
    .page-header .navigation .level0.ui-state-active > .level-top::after,
    .page-header .navigation .level0.current > .level-top::after {
        transform: scaleX(1);
    }
}

/* ========================================
   Navigation - Dropdown-/Submenue-Links: moderner Hover
   Porto unterstreicht Submenue-Links beim Hover (oldfashioned). Stattdessen:
   kein Underline mehr, sondern Farb-Shift zur Markenfarbe + Limetten-Tint.
   NUR Text-Links (Kategorie-Ueberschriften + Unterkategorien), NICHT die
   Bild-Kacheln (a.menu-thumb-link) -> kein Hover-BG auf Bildern.
   Text-Farbe via --header-menu-hover-color (folgt Shop-Config automatisch).
   Tint = Limette #acca4c (edeltee-Markenakzent, bewusst hartcodiert -> wirkt
   auch auf naturteils Megamenue; bei Bedarf in edeltee-Overlay verschieben).
   Nur Desktop-Hover; mobil ist es das Klick-Toggle-Menue (kein :hover).
   !important: Porto laedt spaeter im Bundle ([[porto-css-override-important]]).
   ======================================== */
@media (min-width: 992px) {
    nav.navigation .submenu a:not(.menu-thumb-link) {
        text-decoration: none !important;
        border-radius: 3px;
        transition: color 0.2s ease, background-color 0.2s ease;
    }
    nav.navigation .submenu a:not(.menu-thumb-link):hover,
    nav.navigation .submenu a:not(.menu-thumb-link):focus-visible,
    nav.navigation .submenu a:not(.menu-thumb-link):hover span {
        color: var(--header-menu-hover-color, #179c80) !important;
        text-decoration: none !important;
    }
    nav.navigation .submenu a:not(.menu-thumb-link):hover,
    nav.navigation .submenu a:not(.menu-thumb-link):focus-visible {
        background-color: color-mix(in srgb, #acca4c 16%, transparent) !important;
    }
}

/* ========================================
   Grouped Product Table - Responsive
   ======================================== */

.table-wrapper.grouped {
    overflow-x: hidden;
    container-type: inline-size;
    container-name: grouped-table;
}

/* Magento mobile override: Tabelle als Tabelle behalten */
@media (max-width: 767px) {
    #super-product-table,
    #super-product-table thead,
    #super-product-table thead tr,
    #super-product-table thead th,
    #super-product-table tbody,
    #super-product-table tbody tr,
    #super-product-table tbody td {
        display: revert !important;
    }

    /* Killt Portos mobile data-th-Labels (::before) - und damit auch den
       Desktop-Haken-::before, der mobil ohnehin vom Radio uebermalt wuerde. */
    #super-product-table tbody td:before {
        content: none !important;
        display: none !important;
    }

    /* MOBIL-Haken: da das ::before hier weg ist, traegt das Radio selbst den
       Haken als background-image-SVG (gleicher Paint wie der gruene Kreis,
       kein Stacking-Konflikt). Schlichte gleichmaessige Form wie zuvor.
       Steht spaeter im File als die globale :checked-Regel -> gewinnt <=767px. */
    #super-product-table .hidden-radio:checked {
        background: var(--theme-color)
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
            center / 12px no-repeat;
    }
}

/* Container < 400px: kompakter */
@container grouped-table (max-width: 400px) {
    #super-product-table {
        font-size: 0.85rem;
    }

    #super-product-table td,
    #super-product-table th {
        padding: 10px 6px;
    }

    .table.grouped .price-box .price {
        font-size: 0.92rem;
    }

    #super-product-table .col-baseprice,
    #super-product-table td.col-grundpreis {
        font-size: 0.8rem;
    }
}

/* Container < 300px: Grundpreis darf umbrechen */
@container grouped-table (max-width: 300px) {
    #super-product-table {
        font-size: 0.8rem;
    }

    #super-product-table td,
    #super-product-table th {
        padding: 8px 4px;
    }

    #super-product-table .col-name,
    #super-product-table td.col-name {
        white-space: normal;
    }

    #super-product-table .col-baseprice,
    #super-product-table td.col-grundpreis {
        white-space: normal;
        font-size: 0.75rem;
    }

    .table.grouped .price-box .price {
        font-size: 0.85rem;
    }
}

/* =============================================
   HEADER ACCOUNT LINKS - Horizontal mit Pipe
   ============================================= */

/* Äußere Liste horizontal - korrigierter Selektor */
.header-right .panel.header.show-icon-tablet > ul.header.links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Äußere li Elemente */
.header-right .panel.header.show-icon-tablet > ul.header.links > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Innere verschachtelte ul (Mein Konto, Abmelden) */
.header-right .panel.header.show-icon-tablet > ul.header.links > ul.header.links {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Innere li Elemente */
.header-right .panel.header.show-icon-tablet > ul.header.links > ul.header.links > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pipe-Trennung zwischen Willkommen und Mein Konto */
.header-right .panel.header.show-icon-tablet > ul.header.links > li.greet.welcome::after {
    content: "|" !important;
    margin: 0 10px !important;
}

/* Pipe-Trennung zwischen Mein Konto und Abmelden */
.header-right .panel.header.show-icon-tablet > ul.header.links > ul.header.links > li:first-child::after {
    content: "|" !important;
    margin: 0 10px !important;
    color: #999 !important;
}

/* Desktop: top-links-icon ausblenden */
@media (min-width: 768px) {
    .header-right .panel.header.show-icon-tablet .top-links-icon {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .logo {
        max-width: 80px;
    }
}

.section-item-content[id="store.links"] > ul.header.links ~ ul.header.links {
    display: none !important;
}

.minicart-items .product-item-name {
    white-space: normal !important;
}

/* Mobile: Order Summary immer sichtbar statt als Modal */
@media (max-width: 767px) {
    /* Toggle-Button und kompakte Ansicht ausblenden */
    .opc-estimated-wrapper {
        display: none !important;
    }
    
    /* Sidebar als normales Element statt Modal anzeigen */
    .checkout-container .opc-sidebar.opc-summary-wrapper {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
        margin-bottom: 20px;
    }
    
    /* Modal-Header (Schließen-Button) ausblenden */
    .opc-sidebar .modal-header {
        display: none !important;
    }
    
    /* Modal-Content ohne Modal-Styles */
    .opc-sidebar .modal-inner-wrap {
        position: static !important;
        transform: none !important;
        height: auto !important;
    }
    
    /* Overlay verhindern */
    .modal-custom-overlay {
        display: none !important;
    }
    
    /* Sidebar vor dem Zahlungs-Formular positionieren */
    .checkout-container {
        display: flex;
        flex-direction: column;
    }
    
    .checkout-container .opc-sidebar {
        order: -1; /* Vor den anderen Elementen */
    }
}

/* Doppelpunkt nach Labels in Checkout und Mini Cart */
.block-minicart .subtotal .label:after,
.minicart-items .details-qty .label:after,
.minicart-items .price-minicart .label:after,
.order-details-items .order-gift-message .label:after,
.order-details-items .block-order-details-gift-message .label:after,
.block-wishlist-management .wishlist-select .wishlist-name-label:after {
    content: ":\00a0";
}

/* Checkout: Breitere Sidebar und schmalerer Inhalt ab Tablet */
@media screen and (min-width: 768px) {
    .checkout-container .opc-sidebar {
        width: 50%;
    }
    
    .checkout-container .opc-wrapper {
        width: 47%; /* 100% - 50% - etwas Abstand */
    }
}


/* Doppeltes Rechnungsadresse-Label im Dropdown ausblenden */
.checkout-billing-address .field-select-billing > .label {
    display: none;
}

/* Rechnungsadress-Auswahl auf volle Breite (Paritaet zur Lieferadresse).
   Der Porto-Field-Control-Wrapper begrenzte die Karten auf ~500px, wodurch die
   Rechnungsadresse im Zahlungsschritt schmaler wirkte als die Lieferadresse im
   Versandschritt (User-Befund "nicht so breit"). Jetzt nutzen Auswahl und
   Formular die volle Breite ihres Containers. */
.checkout-payment-method .checkout-billing-address .field-select-billing,
.checkout-payment-method .checkout-billing-address .field-select-billing > .control,
.checkout-payment-method .billing-address-list {
    width: 100%;
    max-width: none;
}

/* Legend-Stil an step-title angleichen */
#co-payment-form > .fieldset > .legend {
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    padding-bottom: 10px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}

/* Doppelte Zahlungsmethode-Überschrift aus payment-methods-list ausblenden */
.payment-group > .step-title {
    display: none;
}

.minicart-items .product-item-details {
    max-width: 100% !important;
    padding: 0 !important;
}

.opc-block-shipping-information {
    padding: 22px 1.5em;
}

/* Lieferadress-Karten: identischer Look wie die Rechnungsadress-Karten
   (.billing-address-item) — abgerundete, ganzflaechig klickbare Karten, aktive
   Karte mit Marken-Gruen-Rahmen + Haken + zartem Tint. Akzent = var(--theme-color).
   !important, da Porto die Basis-Kartenregeln (border/padding/display) spaeter setzt.
   Ganzflaechiger Klick + Tastatur via shipping-address-card-mixin;
   Markup: theme-porto-child/.../shipping-address/address-renderer/default.html */
.opc-wrapper .shipping-address-item {
    --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 !important;
    border-radius: 8px;
    background: #fff;
    line-height: 1.5;
    color: #2f2f2f;
    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);
}

.opc-wrapper .shipping-address-item:last-child {
    margin-bottom: 0;
}

.opc-wrapper .shipping-address-item__name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15em;
}

.opc-wrapper .shipping-address-item:hover {
    border-color: var(--om-accent) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    transform: translateY(-1px);
}

.opc-wrapper .shipping-address-item:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* Aktive Karte: kraeftiger Marken-Rahmen + zarter Tint (wie billing selected-item) */
.opc-wrapper .shipping-address-item.selected-item {
    border-color: var(--om-accent) !important;
    border-width: 2px !important;
    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 identisch zur Billing-Karte
   (Porto-Icon-Font-::after vollstaendig ueberschreiben). */
.opc-wrapper .shipping-address-item.selected-item::after {
    content: '\2713' !important;
    font-family: inherit !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--om-accent) !important;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 8px;
}
/* "Hier hin senden"-Button entfaellt: die ganze Karte ist jetzt klickbar
   (wie die Billing-Karten). Klick/Tastatur via shipping-address-card-mixin. */
.opc-wrapper .action-select-shipping-item {
    display: none !important;
}

.table-checkout-shipping-method .col-carrier {
    white-space: nowrap;
}

/* "+ Neue Adresse" als gestrichelte Karte (analog zur Billing-Neue-Adresse-Karte),
   nicht mehr als oranger Porto-Button. */
.opc-wrapper .action-show-popup {
    display: flex !important;
    align-items: center;
    gap: 0.55em;
    width: 100%;
    box-sizing: border-box;
    margin: 0.75em 0 0 !important;
    padding: 1em !important;
    border: 1px dashed #c2c2c2 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    color: color-mix(in srgb, var(--theme-color) 72%, black) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.opc-wrapper .action-show-popup:hover,
.opc-wrapper .action-show-popup:focus-visible {
    border-color: var(--theme-color) !important;
    background: color-mix(in srgb, var(--theme-color) 6%, #fff) !important;
}

.opc-wrapper .action-show-popup::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;
}

/* ==============================================
   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(--theme-color) !important;
    border-color: var(--theme-color) !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: color-mix(in srgb, var(--theme-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color) 85%, black) !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;
}

#checkout-step-payment .step-title {
    margin: 30px 0 0;
}

.checkout-payment-method .billing-address-same-as-shipping-block {
    margin: 1em 0 0.5em;
}

.opc-wrapper .step-title {
    border-bottom: 2px solid #e7e7e7;
}

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

.checkout-payment-method .billing-address-action {
    margin: 0.75em 0;
}

/* Link-Buttons (der primaeren Bestell-CTA bewusst untergeordnet) */
.checkout-payment-method .action-show-billing-address,
.checkout-payment-method .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: #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 + */
.checkout-payment-method .action-show-billing-address::before {
    content: '+';
    display: inline-block;
    margin-right: 0.4em;
    font-weight: 600;
}

.checkout-payment-method .action-show-billing-address:hover,
.checkout-payment-method .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 ‹ */
.checkout-payment-method .action-use-shipping-address {
    font-weight: 500;
    font-size: 0.9rem;
    color: #6b6b6b; /* AA auf weiss (4.7:1) */
}

.checkout-payment-method .action-use-shipping-address::before {
    content: '\2039';
    margin-right: 0.4em;
}

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

/* "Rechnungsadresse"-Ueberschrift ueber dem eingeblendeten Formular.
   ID-Selektor noetig, um #checkout-step-payment .step-title zu schlagen. */
#checkout-step-payment .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. */
.checkout-payment-method .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. */
.checkout-payment-method .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) {
    .checkout-payment-method .action-show-billing-address,
    .checkout-payment-method .action-use-shipping-address {
        transition: color 0.2s ease;
    }
    .checkout-payment-method .action-show-billing-address:hover,
    .checkout-payment-method .action-show-billing-address:focus-visible,
    .checkout-payment-method .action-use-shipping-address:hover,
    .checkout-payment-method .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 */
.checkout-payment-method .billing-address-cards > .label {
    display: none;
}

.checkout-payment-method .billing-address-list {
    display: block;
    margin: 0.25em 0 0.5em;
}

.checkout-payment-method .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);
}

.checkout-payment-method .billing-address-item:last-child {
    margin-bottom: 0;
}

.checkout-payment-method .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);
}

.checkout-payment-method .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. */
.checkout-payment-method .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) */
.checkout-payment-method .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;
}

.checkout-payment-method .billing-address-item__name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15em;
}

.checkout-payment-method .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 */
.checkout-payment-method .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;
}

.checkout-payment-method .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;
}

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

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

.checkout-payment-method .billing-address-item__new-label {
    font-size: 0.98rem;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-payment-method .billing-address-item {
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .checkout-payment-method .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) */
}

/* ==============================================
   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;
    transition: height 0.2s ease-in-out, 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. */
#checkout-step-payment .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;
}

#checkout-step-payment .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;
}

#checkout-step-payment .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;
}

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

#checkout-step-payment .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;
}

/* ========================================
   Header Panel - Gradient von links nach rechts
   Grün (--theme-color) → dunkles Grün
   ======================================== */

.main-panel-top {
    background: linear-gradient(
        to right,
        var(--header-menu-hover-color, #179c80) 0%,
        color-mix(in srgb, var(--theme-color) 55%, black) 100%
    ) !important;
}

.page-header .panel.wrapper {
    background: transparent !important;
    min-height: 20px !important;
}

.header.panel > .header.links > li {
    text-transform: none;
    color: #e7e7e7;
}

/* ========================================
   Header Suchfeld - Orange Design
   ======================================== */

/* Haupt-Container: transparenter Hintergrund, Marken-Rahmen */
.header-center .search-area .block.block-search {
    border: 2px solid color-mix(in srgb, var(--theme-color) 45%, white) !important;
    border-color: color-mix(in srgb, var(--theme-color) 45%, white) !important;
    border-radius: 10px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Fokus: kräftiger Marken-Rahmen + dezenter Glow */
.header-center .search-area .block.block-search:focus-within {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 18%, transparent);
}

.header-center .search-area .minisearch .field.search::before {
    content: '\e884';
    font-family: 'porto-icons';
    color: var(--theme-color);
    font-size: 16px;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}

/* Eingabefeld: transparenter Hintergrund, Platz für Lupe links */
.header-center .search-area .block-search input.input-text {
    background: transparent !important;
    padding-left: 46px !important;
    color: #444;
    font-size: 0.95rem;
}

.header-center .search-area .block-search input.input-text::placeholder {
    color: #bbb;
}

/* Such-Button: Markenfarbe, kompakt (46px), rechte Seite abgerundet.
   top/bottom statt fixer Pixelhöhe: Portos height:48px rundet bei Browser-Zoom
   != 100% anders als die Container-Innenhöhe -> Spalt bzw. abgeschnittene Ecke.
   Aufspannen über beide Kanten leitet die Malkanten aus demselben Box-Modell ab. */
.header-center .search-area .minisearch .actions .action.search {
    background-color: var(--theme-color) !important;
    min-width: 0;
    padding: 0 !important;
    font-weight: normal;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
}

/* Lupe-Icon: sichtbar und weiß */
.header-center .search-area .minisearch .actions .action.search::before {
    display: block !important;
    color: #fff !important;
    font-size: 17px;
    line-height: 1;
}

/* Button-Text "Suchen" ausblenden */
.header-center .search-area .minisearch .actions .action.search > span {
    display: none !important;
}

/* Hover-Effekt Button (dunklere Markenfarbe) */
.header-center .search-area .minisearch .actions .action.search:hover {
    background-color: color-mix(in srgb, var(--theme-color) 82%, black) !important;
}

.page-header.type1, .page-header {
    background-color: transparent !important;
}

/* ========================================
   Header-Right: Links + Minicart - Orange
   ======================================== */

/* Minicart Icon-Link: Porto setzt explizit color:#fff mit 4 Klassen
   Spezifität → mit !important überschreiben */
.header-right .minicart-wrapper .action.showcart,
.header-right .minicart-wrapper .action.showcart::before,
.header-right .minicart-wrapper .action.showcart.active::before {
    color: var(--header-menu-hover-color, #ff6840) !important;
}

/* cart-design-2: Warenkorb-Icon hat einen Rahmen, auch diesen orange */
.header-right .cart-design-2 .action.showcart .minicart-icon {
    border-color: var(--header-menu-hover-color, #ff6840) !important;
}

/* Konto-Icon-Link (porto-icon-user-2): gleiche Mechanik wie der Minicart oben.
   Ohne explizite Farbe auf allen Zustaenden kippt das generische a:visited
   (color:inherit, Z. ~2140) das Icon nach Orange, sobald /customer/account/
   in der Browser-History liegt — Ruhewert auf :visited spiegeln. */
.header-right a.my-account,
.header-right a.my-account:visited,
.header-right a.my-account:hover,
.header-right a.my-account:focus {
    color: var(--header-menu-hover-color, #ff6840) !important;
}

/* ========================================
   Navigation - Rahmenlinien (kein Hintergrund-Tint)
   ======================================== */

@media (min-width: 992px) {
    /* Dezenter Balken oben und unten (Marken-Ton statt warmes Tan) */
    .page-header.type1 .nav-sections {
        border-top: 1px solid color-mix(in srgb, var(--theme-color) 22%, white);
        border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 22%, white);
    }
}

@media (min-width: 992px) {
    .page-header.type1 .nav-sections {
        padding: 0 !important;
    }
}

.page-header.type1 .search-area .minisearch .actions button {
    border-radius: 0 8px 8px 0 !important;
}

/* ========================================
   Mobile Suchfeld - Position korrigieren
   ======================================== */

@media (max-width: 991px) {
    .search-area.show-icon-tablet .block.block-search {
        right: auto !important;
        left: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        min-width: unset !important;
        box-sizing: border-box !important;
    }

    /* Innere Elemente volle Breite */
    .search-area.show-icon-tablet .block.block-search .block-content,
    .search-area.show-icon-tablet .block.block-search .form.minisearch,
    .search-area.show-icon-tablet .block.block-search .field.search,
    .search-area.show-icon-tablet .block.block-search .field.search .control {
        width: 100% !important;
    }

    .search-area.show-icon-tablet .block.block-search .field.search .control input.input-text {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.block-search .action.search {
    right: 0 !important;
}

@media (max-width: 991px) {
    .page-header.type1 .search-area .minisearch .actions button {
        width: 50px !important;
    }
}

/* OwnMag2Ext LayeredNavigation: Kategorie-Seitentitel (H1) wieder einblenden.
   Porto versteckt ihn shop-weit via .catalog-category-view .page-title-wrapper{display:none}.
   body-Prefix erhoeht Specificity (0,3,0) -> schlaegt Porto ohne !important. */
body.catalog-category-view .page-title-wrapper { display: block; }

/* OwnMag2Ext: Kategorie-Seitentitel fluid skalieren statt flachem 36px.
   Der Titel ist ein autorisiertes <h1> in .category-description (Migrations-
   Artefakt; .page-title-wrapper wird auf diesen Seiten gar nicht gerendert).
   Porto/Browser-Default zeigt ihn flach 36px/400 -> auf breitem Desktop
   unterdimensioniert ("manchmal sehr klein"), auf Mobile gross. clamp() gibt
   ihm pro Breakpoint die richtige Praesenz (brand.md: fluide Heading-Skala
   statt flacher Wert; ~30px @375 -> 44px @>=1280). 700 + dunkel = lesbar,
   kohaerent mit dem Produkt-Seitentitel (2rem/700). Zweiter Selektor deckt
   Landing-Kategorien ohne .category-description ab (h1 direkt in column.main). */
body.catalog-category-view .category-description > h1,
body.catalog-category-view .column.main > h1 {
    font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.75rem);
    line-height: 1.15;
    font-weight: 700;
    color: #222529;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

/* ========================================
   OwnMag2Ext LayeredNavigation - Filter-Optik + Hover-UX (Handoff Punkt 3)
   Pill-/Tag-Buttons fuer Single- UND Mehrfachauswahl (kein Radio-Look).
   Moderne Methode statt Sprite: das modul-eigene <a> aus layer/filter.phtml
   wird als Pill gestylt, Zustaende rein ueber :hover / .active.
   Der Klick togglet bereits (ItemUrlPlugin/Reinjection) - das hier ist
   nur Optik + Affordance. Farb-Swatches rendern ueber Porto -> NICHT betroffen.
   ======================================== */

/* Optionsliste als scanbare Reihen (KEINE Pill-Wolke): ein Wert je Zeile,
   volle Breite, Label links / Count rechts. Vertraute Faceted-Search-Optik
   (impeccable Product-Register: "earned familiarity, the tool disappears in
   the task") statt klobiger runder Buttons. */
.filter-options-content .ownmag2ext-filter-items {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.filter-options-content .ownmag2ext-filter-items > .item {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal;
}

/* Native Radio/Checkbox entfaellt - die Zeile IST die Steuerung. */
.filter-options-content .ownmag2ext-filter-option-input {
    display: none !important;
}

/* Die Zeile (Grundzustand): volle Breite, fester Marker-Slot links (damit
   ✓/✕/› zwischen den Zustaenden ohne Text-Sprung erscheinen). */
.filter-options-content .ownmag2ext-filter-option-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px 6px 24px;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #2b2f33 !important;       /* dunkel -> lesbar (vormals #555) */
    line-height: 1.35;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.filter-options-content .ownmag2ext-filter-option-link .label {
    flex: 1 1 auto;
}
.filter-options-content .ownmag2ext-filter-option-link .count {
    flex: 0 0 auto;
    font-size: .85em;
    color: #6b7177;                  /* >=4.5:1 auf Weiss */
}
/* Marker-Slot (leer im Ruhezustand). */
.filter-options-content .ownmag2ext-filter-option-link::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    text-align: center;
    line-height: 1;
    color: var(--theme-color, #179c80);
    font-weight: 700;
}

/* Hover ueber NICHT gewaehlte Zeile -> dezente Akzent-Fuellung + ›-Marker
   ("auswaehlbar", konsistent mit Nav/Megamenue). */
.filter-options-content .ownmag2ext-filter-option-link:not(.active):hover {
    background: color-mix(in srgb, var(--theme-color) 9%, white) !important;
    color: var(--theme-color, #179c80) !important;
}
.filter-options-content .ownmag2ext-filter-option-link:not(.active):hover .count {
    color: var(--theme-color, #179c80);
}
.filter-options-content .ownmag2ext-filter-option-link:not(.active):hover::before {
    content: "\203A";               /* › */
}

/* Gewaehlte Zeile -> ✓ + Akzentfarbe + fett + zarte Toenung (KEINE
   Vollfuellung; Register-Ban auf full-saturation accents). */
.filter-options-content .ownmag2ext-filter-option-link.active {
    background: color-mix(in srgb, var(--theme-color) 12%, white) !important;
    color: var(--theme-color, #179c80) !important;
    font-weight: 700;
}
.filter-options-content .ownmag2ext-filter-option-link.active .count {
    color: var(--theme-color, #179c80);
}
.filter-options-content .ownmag2ext-filter-option-link.active::before {
    content: "\2713";               /* ✓ */
}

/* Hover ueber BEREITS gewaehlte Zeile -> Entfernen-Affordance: ✕ + roter Ton
   (erneuter Klick auf den aktiven Wert entfernt den Filter). */
.filter-options-content .ownmag2ext-filter-option-link.active:hover {
    background: color-mix(in srgb, #cc2200 9%, white) !important;
    color: #cc2200 !important;
}
.filter-options-content .ownmag2ext-filter-option-link.active:hover .count {
    color: #cc2200;
}
.filter-options-content .ownmag2ext-filter-option-link.active:hover::before {
    content: "\2715";               /* ✕ */
    color: #cc2200;
}

/* ========================================
   OwnMag2Ext LayeredNavigation - Aktive Filter ("Einkaufen nach")
   Neu geordnet als kompakte, entfernbare Chip-Reihen: Label (klein, gedaempft,
   normal case) ueber Wert (fett), ✕-Button rechts zum Entfernen. Der Text
   "Dies entfernen" bleibt SR-only erhalten (Barrierefreiheit). "Alles loeschen"
   als dezenter Textbutton. KEIN Side-Stripe-Border (impeccable-Ban).
   Kein display-Override auf .items -> Collapsible-Mechanik bleibt intakt.
   ======================================== */
.block.filter .filter-current {
    margin-bottom: 16px;
}
.block.filter .filter-current .filter-current-subtitle,
.block.filter .filter-current .block-subtitle {
    display: block;
    margin-bottom: 8px;
}
.block.filter .filter-current .items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.block.filter .filter-current .items .item {
    position: relative;
    margin: 0 0 6px !important;
    padding: 8px 32px 8px 12px !important;
    background: color-mix(in srgb, var(--theme-color) 8%, white);
    border-radius: 8px;
    line-height: 1.3;
}
.block.filter .filter-current .items .item .filter-label {
    display: block;
    font-size: .8em;
    color: #6b7177;
    text-transform: none;           /* nicht ALL-CAPS (konsistent mit Theme) */
}
/* Porto haengt ein ": " an das Label (::after) - redundant, da der Wert in
   eigener Zeile darunter steht. */
.block.filter .filter-current .items .item .filter-label::after {
    content: none !important;
}
.block.filter .filter-current .items .item .filter-value {
    display: block;
    font-weight: 700;
    color: #2b2f33;
}
/* ✕-Entfernen-Button rechts; "Dies entfernen"-Text SR-only. */
.block.filter .filter-current .items .item .action.remove {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #8a9097;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.block.filter .filter-current .items .item .action.remove > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
}
.block.filter .filter-current .items .item .action.remove::before {
    content: "\2715";               /* ✕ */
    font-size: 13px;
    line-height: 1;
}
.block.filter .filter-current .items .item .action.remove:hover {
    background: #cc2200;
    color: #fff;
}

/* "Alles loeschen" als dezenter Textbutton (rot beim Hover). */
.block.filter .filter-actions .filter-clear,
.block.filter .action.clear.filter-clear {
    display: inline-block;
    margin-top: 8px;
    color: #6b7177 !important;
    text-decoration: underline;
    font-size: .9em;
}
.block.filter .filter-actions .filter-clear:hover,
.block.filter .action.clear.filter-clear:hover {
    color: #cc2200 !important;
}

/* ========================================
   OwnMag2Ext: Filter-Sidebar auf Kategorieseiten schmaler (20% statt Portos
   25%), damit das Produktgrid mehr Platz bekommt. Porto/Luma setzt die
   25/75-Aufteilung fest im Grid-CSS (styles-l/m.css, @media min-width:992px) -
   das ist KEINE Porto-Admin-Option, daher hier per CSS ueberschrieben. Beide
   Spalten anpassen (sonst summieren sie nicht auf 100%). Nur Desktop
   (>=992px); darunter stapelt das Layout ohnehin auf eine Spalte. Scope strikt
   auf .catalog-category-view, damit Konto-/CMS-2-Spalter (eigene Breiten)
   unberuehrt bleiben. !important: Porto laedt spaeter im Bundle
   ([[porto-css-override-important]]).
   ======================================== */
@media (min-width: 992px) {
    .catalog-category-view.page-layout-2columns-left .sidebar-main {
        width: 20% !important;
    }
    .catalog-category-view.page-layout-2columns-left .column.main {
        width: 80% !important;
    }
}

/* ========================================
   OwnMag2Ext LayeredNavigation - Kategorie-Sidebar
   Darstellung wie das Megamenue (CT118/M1-Parität, gleiche visuelle Sprache
   wie die Hauptnavigation): ›-Chevron als Aufzaehlungszeichen in Akzentfarbe
   STATT disc/circle-Bullets, Hover ruckt den Eintrag 4px nach rechts
   (translateX) + Akzentfarbe, aktuelle Kategorie fett + Akzentfarbe
   ("du bist hier"). Chevron + Hover sind 1:1 zu .sw-megamenu li.level2 > a,
   damit Haupt- und Seitennavigation dasselbe Muster zeigen.
   Active-State bewusst OHNE farbigen Side-Stripe-Border (impeccable-Ban) -
   stattdessen Gewicht + Farbe. Counts bleiben gedaempft (Sekundaer-Metadaten).
   !important: Porto/Smartwave setzen list-style + Link-Farbe spaeter im
   Bundle ([[porto-css-override-important]]).
   ======================================== */
/* Bullets weg + ul-Default-Einrueckung zuruecknehmen */
.ownmag2ext-category-navigation__list,
.ownmag2ext-category-navigation__sublist {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
}
/* Kind-Liste einruecken -> sichtbare Hierarchie */
.ownmag2ext-category-navigation__sublist {
    padding-left: 14px;
}

/* Link als Block: ganze Zeile klickbar, Platz fuer den Chevron, sauberes translateX */
.ownmag2ext-category-navigation__link {
    position: relative;
    display: block;
    padding: 4px 0 4px 16px;
    transition: transform 0.15s ease, color 0.15s ease;
}
/* ›-Chevron als Bullet (identisch zum Megamenue) */
.ownmag2ext-category-navigation__link::before {
    content: "\203A";            /* › Single Right-Pointing Angle Quotation */
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color, #ff6840);
    font-weight: 600;
    line-height: 1;
}

/* Ruhe- UND :visited-Zustand einheitlich dunkel (sonst faerbt der Browser
   unbesuchte Links willkuerlich in der Akzentfarbe, abhaengig vom Verlauf). */
.ownmag2ext-category-navigation__link,
.ownmag2ext-category-navigation__link:visited {
    color: #222529 !important;
}
/* Hover: 4px nach rechts + Akzentfarbe (Muscle-Memory vom Megamenue) */
.ownmag2ext-category-navigation__link:hover {
    transform: translateX(4px);
    color: var(--theme-color, #ff6840) !important;
}

/* Aktuelle Kategorie kenntlich: fett + Akzentfarbe. KEIN Side-Stripe-Border
   (impeccable-Ban) - Gewicht + Farbe reichen. Nur der direkte Link des aktiven
   <li>, nicht dessen Kinder (> Kombinator). */
.ownmag2ext-category-navigation__item.active > .ownmag2ext-category-navigation__link,
.ownmag2ext-category-navigation__item.active > .ownmag2ext-category-navigation__link:visited {
    color: var(--theme-color, #ff6840) !important;
    font-weight: 700;
}

/* Kind-Eintraege visuell untergeordnet (etwas kleiner) */
.ownmag2ext-category-navigation__item--child > .ownmag2ext-category-navigation__link {
    font-size: 0.95em;
}

/* Produktanzahl dezenter: in Klammern + kleiner + gedaempft, damit der
   Kategoriename die Hauptzeile bleibt. Grau passt Kontrast (>4.5:1 auf Weiss). */
.ownmag2ext-category-navigation__count {
    font-size: 0.85em;
    color: #6b7177;
}
.ownmag2ext-category-navigation__count::before {
    content: "(";
}
.ownmag2ext-category-navigation__count::after {
    content: ")";
}

/* Reduced Motion: kein Verschieben, nur Farbwechsel */
@media (prefers-reduced-motion: reduce) {
    .ownmag2ext-category-navigation__link { transition: color 0.15s ease; }
    .ownmag2ext-category-navigation__link:hover { transform: none; }
}

/* ============================================================
   OwnMag2Ext: Besuchte Links shopweit NICHT umfaerben.
   Best Practice fuer Shop-/Marken-Kataloge: der :visited-Hinweis ist eine
   Referenz-/Doku-Site-Affordance; im Katalog ist er nur Rauschen und darf
   Lesbarkeit & Markenfarbe nicht veraendern (ihn zu entfernen ist KEIN
   WCAG-Verstoss). CSS erlaubt auf :visited nur color/background/border-color,
   und getComputedStyle meldet aus Datenschutzgruenden immer den Ruhewert ->
   Verifikation ausschliesslich visuell (Produkt besuchen -> zurueck -> Grid).
   Porto faerbt besuchte Titel/Tabs sonst GRAU (heller, schlechter lesbar):
     .abs-product-link > a:visited           -> #777     (Produkttitel im Grid)
     .product.data.items .switch:visited     -> #c1c1c1  (Produkt-Tab-Titel)
   Diese Regeln haben hoehere Spezifitaet als das generische a:visited und
   gewinnen sonst die Kaskade. Wir spiegeln je Kontext den Ruhezustand. */

/* Generische Inhaltslinks: besucht == Ruhezustand (Markengruen bleibt) */
a:visited,
.alink:visited { color: inherit; }

/* Produkttitel (Grid, Slider, Related/Upsell, Suche): zurueck auf Ruhe-Dunkel.
   #2f2f2f = gemessener Ruhewert des Titels; !important schlaegt Portos #777. */
.product-item-name a:visited,
.product-item-link:visited,
.abs-product-link > a:visited { color: #2f2f2f !important; }

/* Produkt-Tab-Titel (Beschreibung / Mehr Informationen): Ruhewert ist #222529 */
.product.data.items > .item.title > .switch:visited,
.pagebuilder-accordion > .item.title > .switch:visited { color: #222529 !important; }

/* ========================================
   OwnMag2Ext: Kategorie-Grid-Bilder in nativer Groesse (kein Zwangs-Stretch)
   Porto rendert Grid-Bilder als Aspect-Ratio-Box: .product-image-wrapper traegt
   ein inline padding-bottom, .product-image-photo ist position:absolute; width:100%
   -> JEDES Bild wird auf die Spaltenbreite hochskaliert (auch 170er -> unscharf).
   Zusammen mit view.xml frame=0: Bild behaelt native Groesse, wird nur bei
   schmalerer Spalte verkleinert (max-width:100%) und horizontal zentriert.
   Scope strikt auf Kategorie-Grid (Produktdetail/Slider/Widgets unberuehrt).
   ======================================== */
.catalog-category-view .products-grid .product-image-wrapper {
    height: auto !important;       /* Aspect-Ratio-Box (inline padding-bottom) aufheben */
    padding-bottom: 0 !important;
}
.catalog-category-view .products-grid .product-image-photo {
    position: static !important;   /* aus dem absolute-Flow loesen -> bestimmt Wrapper-Hoehe */
    width: auto !important;        /* native Pixelbreite statt erzwungener 100% */
    max-width: 100% !important;    /* nur verkleinern, nie aufblasen */
    height: auto !important;
    margin: 0 auto !important;     /* horizontal zentriert in der Zelle */
    display: block;
}
/* Hover-Zweitbild weiterhin ueberlagernd zentriert (nicht darunter gestapelt) */
.catalog-category-view .products-grid .product-image-photo.hover_image {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto !important;
}

/* ========================================
   OwnMag2Ext: "Verwandte Artikel" / Upsell auf der Produktseite wie das Kategorie-Grid.
   Gleiches Problem wie oben (Porto-Stretch via .product-image-container min-width:100%
   + Aspect-Ratio-Box), aber der Grid-Fix ist auf .catalog-category-view gescoped und
   greift auf .catalog-product-view NICHT. Hier identische Regeln, gescoped auf die
   Upsell-/Related-Bloecke -> native Groesse, zentriert, kein Zwangs-Stretch.
   (view.xml: related_/upsell_products_list = 600x600, frame=0, constrain.)
   ======================================== */
.block.related .product-image-wrapper,
.block.upsell .product-image-wrapper {
    height: auto !important;       /* Aspect-Ratio-Box (inline padding-bottom) aufheben */
    padding-bottom: 0 !important;
}
.block.related .product-image-photo,
.block.upsell .product-image-photo {
    position: static !important;   /* aus dem absolute-Flow loesen -> bestimmt Wrapper-Hoehe */
    width: auto !important;        /* native Pixelbreite statt erzwungener 100% */
    max-width: 100% !important;    /* nur verkleinern, nie aufblasen */
    height: auto !important;
    margin: 0 auto !important;     /* horizontal zentriert in der Zelle */
    display: block;
}
/* Hover-Zweitbild weiterhin ueberlagernd zentriert (nicht darunter gestapelt) */
.block.related .product-image-photo.hover_image,
.block.upsell .product-image-photo.hover_image {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto !important;
}

/* Silbentrennung fuer Short Description im Kategorie-Grid (lang="de" -> hyphens:auto greift) */
.catalog-category-view .products-grid .product-item-description {
    -webkit-hyphens: auto;   /* Safari / aeltere iOS */
    -ms-hyphens: auto;       /* alte Edge/IE-Reste, schadet nicht */
    hyphens: auto;           /* Standard - gewinnt, wo unterstuetzt */
    hyphenate-limit-chars: 6 3 3;   /* min Wortlaenge / min vor / min nach Trennung */
    overflow-wrap: break-word;      /* Fallback fuer extrem lange Woerter/URLs */
    /* Kontrast: Porto-Default #777 ist nur ~4.48:1 @13px (marginaler AA-Fail).
       #2f2f2f (~13:1) ist klar lesbar; Hierarchie traegt Gewicht/Groesse
       (400/13px) ggue. dem 700er Titel, nicht mehr eine grenzwertige Graustufe.
       Projektkonsistent mit Produktseiten-Kurzbeschreibung. */
    color: #2f2f2f;
}
/* Default-Absatzabstand (Porto: p { margin:0 0 20px }) am Beschreibungs-<p>
   entfernen, damit darunter (Preis) kein Extra-Abstand entsteht. */
.catalog-category-view .products-grid .product-item-description p {
    margin: 0 !important;
}


/* Kein Extra-Abstand unter den Bewertungen im Kategorie-Grid (Porto setzt per
   Default ein margin-bottom auf .product-reviews-summary). */
.catalog-category-view .products-grid .product-reviews-summary.short,
.catalog-category-view .products-grid .product-reviews-summary {
    margin: 0;
}

/* Bewertungs-Anzahl "(x)" neben den Sternen im Kategorie-Grid einblenden (Porto blendet .reviews-actions per Default aus) */
.catalog-category-view .products-grid .product-reviews-summary .rating-summary {
    display: inline-block;
    vertical-align: middle;
}
.catalog-category-view .products-grid .product-reviews-summary .reviews-actions {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    font-size: 13px;
    line-height: 1;
}


/* Ganze Produktkarte klickbar - saubere Overlay-Technik: ein echter Link (Titel) + ::after ueber die ganze Karte */
.catalog-category-view .products-grid .product-item-info { position: relative; }
.catalog-category-view .products-grid .product-item-info .product-item-details { position: static; }
.catalog-category-view .products-grid .product-item-link::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
}
/* Hover-Overlay ueber dem Bild durchklickbar machen, echte Buttons/Links darin aktiv lassen */
.catalog-category-view .products-grid .product-item-info .product-item-inner.tb-hover-content { pointer-events: none; }
.catalog-category-view .products-grid .product-item-info .product-item-inner.tb-hover-content button,
.catalog-category-view .products-grid .product-item-info .product-item-inner.tb-hover-content a,
.catalog-category-view .products-grid .product-item-info .product-item-inner.tb-hover-content .actions-primary,
.catalog-category-view .products-grid .product-item-info .product-item-inner.tb-hover-content [data-role="tocart-form"] { pointer-events: auto; }


/* Sterne-/Bewertungsbereich nicht klickbar abfangen lassen -> Klick faellt zum Karten-Link durch (nichts darin ist mehr interaktiv) */
.catalog-category-view .products-grid .product-item-info .product-reviews-summary,
.catalog-category-view .products-grid .product-item-info .product-reviews-summary * { pointer-events: none !important; }


/* Hover-Schatten-Rahmen der Produktkarte mit abgerundeten Ecken: der box-shadow
   sitzt auf dem .product-item (settings_default.css, beim Hover) und folgt dessen
   border-radius. Ohne Radius war der Rahmen eckig, obwohl das Bild 8px rundet. */
.catalog-category-view .products-grid .product-item { border-radius: 8px !important; }


/* ========================================
   OwnMag2Ext: "Verwandte Artikel"/Upsell-Karten wie das Kategorie-Listing.
   Hinweis: Die Related-Checkbox-Mechanik ("Markieren Sie die Artikel ... Alle
   auswaehlen" + Checkbox je Karte) wird NICHT mehr hier per CSS ausgeblendet,
   sondern serverseitig gar nicht erst gerendert - siehe Template-Override
   Magento_Catalog/templates/product/list/items.phtml. Unten nur noch das
   Karten-Styling: ganze Karte inkl. Preis klickbar (Overlay-Technik 1:1 von der
   Category oben). KEIN Hover-Schatten (siehe 2d - clippt im owl-Slider).
   Scope .block.related + .block.upsell.
   ======================================== */
/* (2a) Overlay: ::after auf dem echten Titel-Link spannt ueber die ganze Karte */
.block.related .product-item-info,
.block.upsell .product-item-info { position: relative; }
.block.related .product-item-info .product-item-details,
.block.upsell .product-item-info .product-item-details { position: static; }
.block.related .product-item-link::after,
.block.upsell .product-item-link::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
}
/* (2b) Hover-Content ueber dem Bild durchklickbar, echte Buttons/Links aktiv lassen */
.block.related .product-item-info .product-item-inner.tb-hover-content,
.block.upsell .product-item-info .product-item-inner.tb-hover-content { pointer-events: none; }
.block.related .product-item-info .product-item-inner.tb-hover-content button,
.block.related .product-item-info .product-item-inner.tb-hover-content a,
.block.related .product-item-info .product-item-inner.tb-hover-content .actions-primary,
.block.related .product-item-info .product-item-inner.tb-hover-content [data-role="tocart-form"],
.block.upsell .product-item-info .product-item-inner.tb-hover-content button,
.block.upsell .product-item-info .product-item-inner.tb-hover-content a,
.block.upsell .product-item-info .product-item-inner.tb-hover-content .actions-primary,
.block.upsell .product-item-info .product-item-inner.tb-hover-content [data-role="tocart-form"] { pointer-events: auto; }
/* (2c) Sterne-/Bewertungsbereich Klicks durchfallen lassen -> Karten-Link */
.block.related .product-item-info .product-reviews-summary,
.block.related .product-item-info .product-reviews-summary *,
.block.upsell .product-item-info .product-reviews-summary,
.block.upsell .product-item-info .product-reviews-summary * { pointer-events: none !important; }

/* (2e) Bewertungs-Anzahl "(x)" neben den Sternen einblenden - 1:1 wie im
   Kategorie-Grid (Porto blendet .reviews-actions per Default aus). Greift fuer
   Related/Up-Sell/Cross-Sell. !important wegen Porto-display:none (laedt spaeter). */
.block.related .product-reviews-summary .rating-summary,
.block.upsell .product-reviews-summary .rating-summary,
.block.crosssell .product-reviews-summary .rating-summary {
    display: inline-block !important;
    vertical-align: middle;
}
.block.related .product-reviews-summary .reviews-actions,
.block.upsell .product-reviews-summary .reviews-actions,
.block.crosssell .product-reviews-summary .reviews-actions {
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 4px;
    font-size: 13px;
    line-height: 1;
}

/* (2d) Hover-Schatten NUR seitlich (links/rechts). Grund: Porto rendert
   related/upsell als owl-carousel; dessen .owl-stage-outer{overflow:hidden}
   clippt einen normalen Schatten unten ab. Trick: zwei box-shadows mit
   offset-y:0 + negativem spread -> kein nennenswerter vertikaler Ueberstand,
   also kein unten-Clipping; horizontal ragt der Schatten auf die Nachbarkachel
   (innerhalb der Stage, nicht ueber den Stage-Rand, ausser bei 1./letzter).
   Bild bleibt schattenlos; Porto-Eigenschatten auf info/photo wird ueberschrieben. */
.block.related .product-item-info,
.block.related .product-item-photo,
.block.related .product-item-photo:hover,
.block.upsell .product-item-info,
.block.upsell .product-item-photo,
.block.upsell .product-item-photo:hover { box-shadow: none !important; }
.block.related .product-item-info:hover,
.block.upsell .product-item-info:hover {
    box-shadow: -9px 0 14px -8px rgba(0,0,0,.22), 9px 0 14px -8px rgba(0,0,0,.22) !important;
    z-index: 2;
}

/* (2d2) Innenabstand: Padding gehoert INNEN auf .product-item-info (= das Element
   mit der Hover-Schattenbox aus 2d), damit Titel/Bild/Preis nicht am Schattenrand
   kleben. Porto setzt den Abstand stattdessen AUSSEN auf .product-item (padding:0 10px)
   -> der liegt ausserhalb der Schattenbox und hilft dem Inhalt nicht. Also aussen auf 0
   und nach innen verlagern. Beide Selektoren (0,2,0) schlagen die Porto-Defaults ohne !important. */
.block.related .product-item,
.block.upsell .product-item { padding: 0; }
.block.related .product-item-info,
.block.upsell .product-item-info { padding: 10px; }

/* (2e) Preis zentrieren: der "Ab X,XX EUR"-Preis (.minimal-price) ist ein
   flex-Container -> text-align:center der Karte wirkt NICHT auf die flex-Items
   (Label + Preis), die sonst per justify-content:flex-start links sitzen.
   Einzelpreise (inline) sind via text-align bereits zentriert. */
.block.related .product-item-details .minimal-price,
.block.upsell .product-item-details .minimal-price { justify-content: center; }

/* (2f) Preisgewicht/-groesse wie im Kategorie-Grid: Porto rendert den Related-/
   Upsell-Preis als 18px/600 (zu fett), die Kategorie-Karte dagegen ruhig
   14px/400. Spiegelt die .catalog-category-view .price-box .price-Regel (~Z.383)
   in den Produktseiten-Scope. Deckt Single (.price) UND Grouped ("Ab"-Preis =
   .minimal-price .price) ab. !important gegen Portos 600-Default. */
.block.related .price-box .price,
.block.upsell .price-box .price {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* (2g) Layout-Shift beim Seitenaufbau vermeiden (Carousel-Platz reservieren).
   Porto rendert related/upsell als owl-carousel; dessen Basis-CSS setzt
   .owl-carousel{display:none} bis JS die Klasse .owl-loaded ergaenzt. Bis dahin
   kollabiert der Carousel-Bereich auf 0 -> beim Init springt er auf ~Reihenhoehe
   und schiebt den Footer (und bei langsamer Init je nach Artikelzahl die ganze
   Sektion) ruckartig nach unten. Fix: den Platz EINER Reihe vorab reservieren, damit
   display:none->block in den reservierten Raum faellt statt zu wachsen. Wert =
   gemessene stabile .block-content-Hoehe (Karte ~305 + Dots ~32 + Abstaende):
   ~425 ab Tablet, ~388 mobil. Strikt auf die Produktseite gescoped (kein Eingriff
   in Warenkorb-Cross-/Upsell); greift nur wenn der Block existiert (kein Leerraum
   auf Seiten ohne verwandte Artikel). */
.catalog-product-view .block.related .block-content,
.catalog-product-view .block.upsell .block-content {
    min-height: 388px;
}
@media (min-width: 768px) {
    .catalog-product-view .block.related .block-content,
    .catalog-product-view .block.upsell .block-content {
        min-height: 425px;
    }
}


/* ========================================
   OwnMag2Ext: Kategorie-Grid - gleich hohe Produktkarten je Reihe
   Porto rendert das Grid mit float:left -> jede Karte ist nur so hoch wie ihr
   eigener Inhalt; bei unterschiedlich langer Short Description wird die Reihe
   "ragged" (Karten ungleich hoch, sichtbar an der Box-Hervorhebung).
   Loesung: Container auf Flexbox umstellen -> align-items:stretch (Default)
   zieht alle Karten EINER Reihe auf dieselbe Hoehe. Innerhalb der Karte eine
   Flex-Spalte bis zum Preis, der per margin-top:auto am Kartenboden klebt.
   Effekt: voller Beschreibungstext bleibt erhalten, nur der Leerraum wandert
   zwischen Text und Preis -> Preise aller Karten fluchten unten.
   Scope strikt auf Kategorie-Grid; Spaltenzahl/Responsive-Breiten kommen
   weiterhin von Porto (flex-wrap respektiert die li-Breiten).
   ======================================== */
.catalog-category-view .products-grid .product-items {
    display: flex;
    flex-wrap: wrap;
}
.catalog-category-view .products-grid .product-items > .product-item {
    float: none;
    display: flex;
}
.catalog-category-view .products-grid .product-item > .product-item-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.catalog-category-view .products-grid .product-item-info > .porto-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.catalog-category-view .products-grid .product-item-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Preis erscheint direkt nach der Beschreibung (kein margin-top:auto, das ihn
   sonst an den Kartenboden druecken wuerde). */
/* "Ab xxx EUR" (gruppierte/minimal-price Produkte) rendern eine VERSCHACHTELTE
   .price-box; die innere traegt ein Default-margin-bottom (16px) -> der Preis
   sitzt hoeher als beim normalen Einzelpreis (span.price-container, kein margin).
   Innere Box auf 0 setzen -> Preis-zu-Kartenboden-Abstand fluchtet mit Einzelpreis. */
.catalog-category-view .products-grid .product-item-details .price-box .price-box {
    margin-bottom: 0;
}

/* Linker Kategorie-Content-Block (Modul): Blocksatz + Silbentrennung wie im
   Produkt-Grid. lang="de" auf <html> -> hyphens:auto greift. */
.ownmag2ext-optionsetting-left {
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    overflow-wrap: break-word;
}

/* ========================================
   Megamenue - Hover-Verzoegerung + breitere Trigger ("Tee")
   Das Smartwave-Megamenue oeffnet/schliesst rein per CSS-:hover
   (sw_megamenu.js macht nur Positionierung). Das Panel ist immer
   display:block und wird ueber visibility/opacity ein-/ausgeblendet
   (Theme animiert nur opacity 0.2s). Problem: beim Maus-Verlassen
   verschwindet es praktisch sofort -> kein Weg, die Maus ins Panel
   zu bewegen.
   Fix = asymmetrisches transition-delay:
     - Grundzustand (.submenu): delay 0.4s  -> SCHLIESSEN verzoegert
     - :hover:                  delay 0.12s -> OEFFNEN minimal verzoegert
       (ehrt "einblenden" + verhindert Flackern beim Drueberstreifen,
        als Lag nicht spuerbar)
   visibility MUSS in die transition-Liste, sonst springt es trotz
   opacity-Fade sofort auf hidden und das Panel ist maustot.
   Nur Desktop (>=992px); darunter ist es das Klick-Toggle-Menue.
   ======================================== */
@media (min-width: 992px) {
    /* Grundzustand: Schliessen verzoegert (Top-Panel + Classic-Flyouts 2. Ebene).
       !important noetig: Porto setzt auf .submenu `transition: .2s opacity`
       (ohne visibility, ohne Delay) mit gleicher Spezifitaet -> bei reiner
       Gleich-Spezifitaet gewinnt Porto (laedt spaeter im Bundle). Verifiziert
       per computed style: ohne !important blieb der Ruhewert 0s/opacity, das
       Panel schloss trotz korrekt deployter Regel sofort. */
    .sw-megamenu.navigation li.level0 > .submenu,
    .sw-megamenu.navigation li.level0.classic .subchildmenu .subchildmenu {
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
        transition-delay: 0.4s !important;
    }

    /* Hover: Oeffnen nur minimal verzoegert (kein Lag, aber kein Flackern).
       Ebenfalls !important + hoehere Spezifitaet (:hover) -> gewinnt beim
       OEFFNEN gegen die !important-Ruheregel (0.4s), die nur beim Schliessen
       gelten soll. */
    .sw-megamenu.navigation li.level0:hover > .submenu,
    .sw-megamenu.navigation li.level0.classic .subchildmenu > li:hover > .subchildmenu {
        transition-delay: 0.12s !important;
    }

    /* "Tee" & andere kurze Eintraege sind als Trigger zu schmal (Porto setzt
       horizontales Padding 0; "Tee" ist nur ~24px breit). Breiteres
       horizontales Padding vergroessert die Hover-Flaeche UND die Bruecke zum
       Panel (hilft direkt der Schliess-Verzoegerung oben).
       !important noetig: Porto setzt das Padding mit gleicher Spezifitaet
       (reiner Selektor verliert sonst - genau wie bei der text-transform-Regel
       oben). 13px (vorher 16px): seit die Schrift auf 14px angehoben wurde,
       wuerden 9 Eintraege bei 16px-Padding auf 1280/1200px in eine zweite
       Zeile umbrechen. 13px haelt das Breiten-Budget des alten 13px/16px-Stands
       und laesst die groesseren Glyphen weiter einzeilig (live an 1440/1280/1200
       verifiziert). Einzige Quelle fuers Top-Nav-Padding. */
    .page-header .navigation .level0 > .level-top {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    /* Porto setzt ZUSAETZLICH margin-right:30px pro level0-Item -> doppeltes
       Spacing neben dem 13px-Padding (56px optischer Wortabstand) und 270px
       tote Breite: die 9 Eintraege (882px inkl. Padding) brachen damit bei
       992-1199px (Container 940px) in eine zweite Zeile um. Margin raus -
       das Padding traegt den Abstand allein (26px Wortabstand) und bleibt
       als Hover-Flaeche/Bruecke zum Megamenue-Panel erhalten (Margin zaehlt
       nicht zur Hover-Flaeche, Padding schon).
       !important noetig: Porto setzt den Margin gleichspezifisch. */
    .page-header .navigation li.level0 {
        margin-right: 0 !important;
    }

    /* Nav-Zeile linksbuendig an der Ausrichtungsschiene: Logo, Breadcrumb
       und Seiteninhalt starten alle an der Container-Kante - die Nav folgt
       ihr, "Tee" (Kernkategorie) sitzt am F-Muster-Scan-Start. Zentrierung
       war getestet und wirkte an der 940er-Stufe (28px Seitenluft) wie ein
       Ausrichtungsfehler; Premium-Tee-Referenzen (P&T, Kusmi) sind ebenfalls
       links. Flex statt Float -> Floats der li werden ignoriert.
       Negatives margin-left = Stufen-Padding: die TEXTkante von "Tee" steht
       buendig mit der Container-Kante, nicht die unsichtbare Padding-Box
       (optische Kantenkorrektur; Stufen s.u.). Submenu-Positionierung
       (absolute gegen nav) bleibt unberuehrt. */
    .page-header .navigation > ul {
        display: flex !important;
        justify-content: flex-start;
        margin-left: -13px !important;
    }
}

/* Abstands-Stufen fuer die groesseren Porto-Container (1180/1400px):
   mehr Luft zwischen den 9 Eintraegen, wo das Breiten-Budget es hergibt.
   Bewusst ueber padding (nicht margin/gap): die groessere Flaeche ist
   zugleich Hover-Flaeche und Panel-Bruecke. Text-Summe 648px:
   1200px-Stufe: 648 + 9*44 = 1044px im 1180er-Container (Wortabstand 44px),
   1440px-Stufe: 648 + 9*52 = 1116px im 1400er-Container (Wortabstand 52px).
   Zusammen mit der 13px-Basisregel oben die einzigen Quellen fuers
   Top-Nav-Padding. */
@media (min-width: 1200px) {
    .page-header .navigation .level0 > .level-top {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    .page-header .navigation > ul {
        margin-left: -22px !important;
    }
}
@media (min-width: 1440px) {
    .page-header .navigation .level0 > .level-top {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
    .page-header .navigation > ul {
        margin-left: -26px !important;
    }
}

/* ========================================
   Megamenue - lesbare Unterkategorie-Liste (level2)
   Die Textlink-Unterkategorien (z.B. "Klassisch"/"Bio"/"Aromatisiert"
   unter "Gruener Tee"). Zwei Korrekturen nacheinander:
   1) Porto-Default padding:8px 0 bei 12px/18px = 34px Zeilenhoehe -> zu weit.
   2) Erst auf 3px gesenkt (~24px pitch) -> wirkte dann zu gequetscht/klein.
   Jetzt der Mittelweg: 13px Schrift, line-height 1.5, padding 4px -> ~27px
   pitch. Lesbar und ruhig, ohne luftig zu wirken (live verifiziert).
   Schrift dunkler (#4a4a4a statt #696969) und etwas leichter (500) -> klare
   Hierarchie zum 15px/700-Titel; der ›-Chevron + Hover bleiben unveraendert.
   !important noetig: Porto laedt spaeter im Bundle ([[porto-css-override-important]]).
   ======================================== */
.sw-megamenu.navigation li.level2 > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #4a4a4a !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ========================================
   Megamenue - Unterkategorien wie im M1-Original (CT118):
   ›-Chevron als Aufzaehlungszeichen, Text eingerueckt, beim Hover rueckt
   der ganze Eintrag ~4px nach rechts ein (M1: .with-bullets + left:4px).
   Im M1 hat der Eintrag einen sichtbaren ›-Pfeil + 28px Einrueckung; M2
   (Smartwave) rendert die level2-Links nackt (nur <span>Text</span>).
   Hier den visuellen Effekt nachbauen (kein Klon der Infortis-Internals):
     - ::before content "›" in Theme-Akzentfarbe als Bullet
     - padding-left schafft Platz dafuer
     - transform:translateX beim Hover = das "einruecken" aus M1
   Nur Desktop (>=992px); darunter ist das Menue ein Klick-Toggle.
   !important nur beim padding (Porto setzt es gleichspezifisch).
   ======================================== */
@media (min-width: 992px) {
    .sw-megamenu.navigation li.level2 > a {
        position: relative;
        padding-left: 16px !important;
        transition: transform 0.15s ease, color 0.15s ease;
    }
    .sw-megamenu.navigation li.level2 > a::before {
        content: "\203A";            /* › Single Right-Pointing Angle Quotation */
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--theme-color, #ff6840);
        font-weight: 600;
        line-height: 1;
    }
    .sw-megamenu.navigation li.level2 > a:hover {
        transform: translateX(4px);
        color: var(--theme-color, #ff6840);
    }

    /* Titel "nicht so nah am Bild": Smartwave zieht den Kategorie-Titel mit
       margin-bottom:-5px auf .menu-thumb-img an das Thumbnail heran. Auf 8px
       setzen -> der Titel bekommt spuerbar Luft, ohne dass die Spalte ausein-
       anderfaellt (Mittelweg; 12px wirkte zu luftig, live bestaetigt). */
    .sw-megamenu.navigation .menu-thumb-img {
        margin-bottom: 8px !important;
    }

    /* Kategorie-Titel ("Grüner Tee" ...) im Hover nicht am linken oberen Rand
       kleben lassen. Smartwave setzt auf dem Titel-Link nur padding-bottom:8px
       (top/left = 0) -> der Text sitzt oben-links in der Hover-Markierung.
       padding-top gleich padding-bottom -> Text vertikal mittig im Hover-Block;
       kleines padding-left -> etwas Abstand zur linken Kante. */
    .sw-megamenu.navigation li.level0.fullwidth .submenu li.level1 > a,
    .sw-megamenu.navigation li.level0.staticwidth .submenu li.level1 > a {
        padding-top: 8px !important;
        padding-left: 10px !important;
    }

    /* Etwas Luft zwischen Kategorie-Titel und der Unterkategorie-Liste
       (Default 0 -> Liste klebte am Titel). 2px reichen fuer ruhige Trennung. */
    .sw-megamenu.navigation .submenu li.level1 > ul.subchildmenu {
        margin-top: 2px !important;
    }
}

/* ========================================
   Megamenue - Kategorie-Titel (level1): groesser & wertiger
   Porto-Default 13px/700 wirkte klein. 15px/700 in fast-schwarz (#2a2a2a)
   hebt den Spaltentitel klar von den 13px/500-Unterkategorien ab -> Hierarchie
   ueber drei Achsen (Groesse, Gewicht, Ton). Gilt auch im mobilen Toggle-Menue.
   !important: Porto laedt spaeter im Bundle ([[porto-css-override-important]]).
   ======================================== */
.sw-megamenu.navigation .submenu li.level1 > a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2a2a2a !important;
}

/* ========================================
   Abgerundete Bildecken (border-radius 8px) - moderner, dezenter Look.
   8px statt M1's 5px gewaehlt fuer Konsistenz mit der vorhandenen
   Radius-Sprache des Themes (Buttons 8px, Suchbox 10px) - ein einheitlicher
   Radius statt eines isolierten Werts.
   Gilt fuer: Megamenue-Thumbnails, Kategorie-Grid und Related/Upsell.
   Das Hover-Zweitbild (.hover_image) traegt dieselbe Klasse .product-image-photo
   -> wird automatisch mitgerundet (kein eckiges Overlay).
   Produkt-Hauptbild (Galerie/Zoom) bewusst ausgenommen.
   ======================================== */
.sw-megamenu.navigation .menu-thumb-link img,
.catalog-category-view .products-grid .product-image-photo,
.block.related .product-image-photo,
.block.upsell .product-image-photo {
    border-radius: 8px;
}

/* ========================================
   Category-View: "Ab xx,xx €" (minimal-price gruppierter Produkte) zurueckhaltender.
   Vorher: links (justify:normal), 16px (1.0rem aus eigener Regel oben), fett (600).
   Gewuenscht: mittig, normale Groesse wie der Produkttitel darueber (14px),
   font-weight 400. Farben bleiben. Nur .minimal-price -> Einzelpreise (inline,
   bereits zentriert) bleiben unberuehrt.
   !important, da gegen die bestehende 1.0rem-Regel (gleiche Spezifitaet) gearbeitet wird.
   ======================================== */
.catalog-category-view .products-grid .minimal-price {
    justify-content: center;
}
.catalog-category-view .products-grid .minimal-price .price-label,
.catalog-category-view .products-grid .minimal-price .price {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* ========================================
   Megamenue - "Weihnachtstees / Wintertees" (CMS-Block .menu-bottom-block):
   Hover entfernen. Der CMS-Block rendert einen <a> der per Smartwave-Default
   display:block + volle Panel-Breite (~1140px) hat; eine generische Megamenue-
   Hover-Regel faerbt ihn beim Hover gruen ein -> der Highlight laeuft ungebremst
   ueber das Bild und die ganze Menuebreite. Hover auf den Ruhezustand fixieren
   (transparent + graue Ruhefarbe #696969).
   Der volle Pfad ist noetig: die konkurrierende Smartwave-Regel nutzt !important
   und ist spezifischer als ".menu-bottom-block a:hover" (verifiziert: kurzer
   Selektor verlor trotz !important; mit diesem Pfad greift transparent).
   ======================================== */
.sw-megamenu.navigation li.level0 .submenu .menu-bottom-block a:hover {
    background-color: transparent !important;
    color: #696969 !important;
}

/* ========================================
   Grundpreis (PAngV) bei Single-Produkten
   .grndsingle = Detailseite (unter Hauptpreis)
   .grndlist   = Kategorie-Listing + Related/Up-/Cross-Sell
   Kleiner, gedaempfter Hinweis unter dem Preis (Paritaet zu M1)
   ======================================== */
.grndsingle,
.grndlist {
    display: block;
    font-size: 0.8rem;
    line-height: 1.2;
    /* normal: im Preis-Container wuerde sonst der fette Preis-Font (600) vererbt */
    font-weight: normal;
    color: #777;
    margin-top: 2px;
}

/* ========================================
   Normale Schreibweise statt ALL CAPS (Lesbarkeit)
   Porto setzt text-transform:uppercase und vererbt es auf
   Produkt-Tab-Titel und Megamenue-Dropdown-Links. Versalien
   senken die Lesegeschwindigkeit (Wortform geht verloren),
   darum auf Originalschreibweise zurueck. !important noetig,
   da Porto spaeter im CSS-Bundle laedt ([[porto-css-override-important]]).
   Kleine Status-Badges (.cat-label "Neu"/"Saison") bleiben bewusst
   in Versalien - dort ist Caps als kurzer Marker ueblich.
   ======================================== */
.product.info.detailed .data.item.title > .switch,
.product.info.detailed .data.item.title > .switch > span {
    text-transform: none !important;
}
/* ========================================
   Produkt-Tab-Titel Groesse (Details / Mehr Informationen / Bewertungen)
   Porto setzt sie auf 13px -> 1px KLEINER als der 14px-Body; fuer eine
   Sektions-Ueberschrift ist das rueckwaerts. Auf 15px (ueber Baseline =
   korrekte Hierarchie, keine Insel) + Tracking Richtung normal (Porto-
   Default 0.2px wirkt locker). !important, da Porto spaeter laedt
   ([[porto-css-override-important]]). Tabs sind hier vertikal gestapelt
   (wide_grid) -> kein Tab-Balken-Umbruch-Risiko; responsiv verifiziert.
   ======================================== */
.product.info.detailed .data.item.title > .switch,
.product.info.detailed .data.item.title > .switch > span {
    font-size: 15px !important;
    letter-spacing: normal !important;
}
/* ========================================
   OwnMag2Ext: Vertical-Tab Layout-Shift beim Seitenaufbau vermeiden.
   Porto rendert die aktive Tab-Inhaltsspalte (.data.item.content) als
   position:absolute (left:20%); dadurch ist der Tab-Container server-seitig nur so
   hoch wie die 20%-Titelspalte (~155px). Erst Portos Tab-JS setzt nachtraeglich die
   Container-Hoehe auf die Panel-Hoehe (~239px) -> die ganze "Verwandte Artikel"-
   Sektion darunter ruckt beim Seitenaufbau ~85px nach unten ("Sektion zu weit oben").
   Fix: Titel links floaten (clear:left -> enger linker Stapel), aktive Inhaltsspalte
   RECHTS floaten -> der Container hat schon beim First Paint die finale Hoehe
   max(Titelstapel, Inhalt). Kein JS, kein Magic-Number, content-agnostisch (auch bei
   langen Beschreibungen). KERN-Trick: Titel+Content sind im DOM verschachtelt
   (title->content->title->content); float:right nimmt den Content aus dem Fluss, sodass
   clear:left der Folge-Titel ihn IGNORIERT und die Titel eng stapeln (sonst schoebe
   in-flow-Content jeden Folge-Titel um die Panelhoehe nach unten). Nur >=768px, wo Porto
   das vertikale Absolut-Layout nutzt; mobil (<768px) stehen Titel+Inhalt ohnehin im Fluss
   (Accordion). Inaktive Panels bleiben display:none (0 Hoehe), nur das aktive bemisst. */
@media (min-width: 768px) {
    .catalog-product-view .product.info.detailed.vertical > .product.data.items > .data.item.title {
        float: left;
        clear: left;
        width: 20%;
    }
    .catalog-product-view .product.info.detailed.vertical > .product.data.items > .data.item.content {
        position: static !important;
        float: right;
        width: 80%;
    }
    .catalog-product-view .product.info.detailed.vertical > .product.data.items::after {
        content: "";
        display: block;
        clear: both;
    }
}
nav.navigation .submenu a,
nav.navigation .submenu a span {
    /* direkt auf Link + Text-Span: text-transform vererbt, ein
       Zwischenelement (ul.subchildmenu) setzt uppercase sonst direkt */
    text-transform: none !important;
}
nav.navigation .submenu .cat-label,
nav.navigation .submenu .cat-label span {
    text-transform: uppercase !important;
}

/* ========================================
   Sticky-Menue: Status-Badges ("Neu"/"Saison") ausblenden
   Top-Level-Badges sitzen mit top:-10px ueber dem Link. Im
   Sticky-Header (position:fixed; top:0) ragen sie ueber den
   oberen Viewportrand und werden zur Haelfte abgeschnitten.
   Im gehefteten Zustand daher ausblenden (im normalen Header
   bleiben sie sichtbar). !important, da Porto spaeter laedt
   ([[porto-css-override-important]]).
   ======================================== */
.page-header.sticky-header nav.navigation li.level0 > a > span.cat-label {
    display: none !important;
}

/* ========================================
   Naehrwertangaben-Tabelle (Produkt-Content)
   Content nutzt CSS-Pseudotabelle (.rTable) aus M1.
   Das zugehoerige CSS wurde nie mitmigriert -> hier nachgezogen.
   Paritaet zu M1: 1px solid #333, border-collapse, padding 3px 10px
   ======================================== */
.rTable {
    display: table;
    border-collapse: collapse;
    margin: 5px 0;
}
.rTableRow {
    display: table-row;
}
.rTableCell {
    display: table-cell;
    border: 1px solid #333;
    padding: 3px 10px;
    vertical-align: top;
}

/* ========================================
   Mengenfeld-Fehlermeldung ("Bitte Menge > 0")
   .control ist display:flex -> die Meldungs-Box wird sonst als Flex-Item in
   eine schmale Spalte neben dem Eingabefeld gequetscht.
   WICHTIG: .control bleibt position:relative (Porto-Default) - es ist der Anker
   fuer die absolut positionierten +/- Stepper-Buttons (.qty-changer > a).
   NICHT auf static setzen, sonst ankern Minus/Plus an .box-tocart und springen
   an die aeusseren Raender (Minus links, Plus rechts vom Button).

   ⚠️ NUR div/label.mage-error stylen, NICHT die nackte Klasse:
   jQuery-Validate haengt `mage-error` AUCH an das <input> selbst. Ein Selektor
   `.mage-error` zieht damit das Eingabefeld auf position:absolute -> es
   ueberlagert Plus, Zahl und Button. Tag-Einschraenkung schliesst den Input aus.
   Meldung absolut an .control ankern (linke Kante = Mengenfeld), top:100% = unter
   dem Feld, einzeilig nach rechts auslaufend.
   ======================================== */
.product-add-form .box-tocart .field.qty .control div.mage-error,
.product-add-form .box-tocart .field.qty .control label.mage-error {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    max-width: 320px;
    height: auto;
    margin-top: 5px;
    white-space: normal;
    text-align: left;
    z-index: 2;
}

/* ============================================================
   product-info-main: Modernisierung (P0 Marke+Preis / P1 Ruhe /
   P2 Counter+Navigation+Fokus)
   ------------------------------------------------------------
   Farben NUR ueber var(--theme-color) + color-mix -> shop-neutral
   (edeltee gruen, naturteil eigene Farbe; KEIN Marken-Hex).
   !important, da Porto spaeter im Bundle laedt
   ([[porto-css-override-important]]). Scope: Single-Produkt-Spalte;
   Grouped-Mengen-Tabelle (.table.grouped) bleibt unberuehrt, da
   Stepper-Regeln auf .product-options-bottom .field.qty zielen.
   ============================================================ */

/* --- P0: CTA in Markenfarbe statt Near-Black (#222529) --- */
.product-add-form .box-tocart .action.tocart {
    background: var(--theme-color) !important;
    border-radius: 8px !important;
    transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.product-add-form .box-tocart .action.tocart:hover {
    background: color-mix(in srgb, var(--theme-color) 86%, black) !important;
}
.product-add-form .box-tocart .action.tocart:active {
    transform: translateY(1px);
}
.product-add-form .box-tocart .action.tocart:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 25%, transparent) !important;
}

/* --- P0: Preis als zweitstaerkstes Element (nach Titel).
   KEIN Gradient-Text (Ban) - Gewicht/Groesse statt Farbe. --- */
.product-info-main .product-info-price .price-box .price {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1a1d20 !important;
    letter-spacing: -.02em;
}
/* Sale: durchgestrichener alter Preis bleibt gedaempft, special-price
   bekommt den Marken-Akzent (greift nur wenn old/special vorhanden). */
.product-info-main .product-info-price .old-price .price {
    font-weight: 600 !important;
    color: #a7a7a7 !important;
}
.product-info-main .product-info-price .special-price .price {
    color: var(--theme-color) !important;
}

/* --- P1: Hairline-Suppe entschaerfen ---
   Dekorativer 40px-Strich unter der Bewertung weg (Preis trennt schon). */
.product-info-main .product-reviews-summary:after {
    display: none !important;
}
/* tocart-Band: Doppelborder -> eine zarte, marken-getoente Trennlinie oben. */
.product-add-form .box-tocart {
    border-bottom: none !important;
    border-top: 1px solid color-mix(in srgb, var(--theme-color) 14%, #ededed) !important;
}

/* --- P0-Nicety: Titel gleichmaessiger umbrechen --- */
.product-info-main .page-title-wrapper h1 {
    text-wrap: balance;
}

/* ============================================================
   PRODUKTSEITE: Info-Spalte straffen (gegen den Leerraum unter
   dem Bild). Die Luecke ist primaer strukturell (Bild niedriger
   als die Info-Spalte) -> der Bild-Hebel laeuft separat ueber die
   Magento-Bildgroesse (view.xml). Diese drei Regeln nehmen nur die
   beitragenden Hoehen-/Typo-Faktoren zurueck.
   ============================================================ */

/* --- Kurzbeschreibung: erbte 16px/LH 27px direkt von Porto und wirkte
   dadurch groesser + luftiger als der Detail-Fliesstext (14px). Auf
   15px/1.6 zurueckgenommen = leise Lead-Hierarchie, nicht mehr dominant.
   Farbe auf AA-sicheres Ink: Porto-#777 lag bei 4.49:1 (knapp unter 4.5:1). --- */
.product-info-main .product.attribute.overview {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2f2f2f !important;
}

/* --- Detail-Tab-Fliesstext: gleicher #777->AA-Kontrast-Fix wie bereits
   im "Mehr Informationen"-Tab (#additional, dort schon #2f2f2f). --- */
.product.attribute.description .value,
.product.attribute.description .value p {
    color: #2f2f2f !important;
}

/* --- Auswahltabelle (Grouped): 12px-Zeilenpadding war auf Desktop zu
   hoch (5 Zeilen ~293px). Nur ab >=768px straffen; Mobile behaelt das
   groessere Padding, damit die Auswahlzeilen Tap-Target bleiben
   (~44px, vgl. Touch-Regel). --- */
@media (min-width: 768px) {
    #super-product-table td,
    #super-product-table th {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}

/* --- P2: Counter als zusammenhaengendes Pill-Control ---
   .control: Rahmen + Radius + Fokus-Glow. KEIN overflow:hidden
   (wuerde die absolute Mengen-Fehlermeldung bei top:100% clippen).
   Positionswerte der absoluten ±-Buttons bleiben unangetastet.
   Scope `.box-tocart .field.qty` trifft das Einzel-Mengenfeld (Simple +
   Grouped-Sammelfeld); die Grouped-Zeilen-qtys liegen in `.table.grouped`,
   NICHT in `.box-tocart` -> bleiben unberuehrt. */
.product-add-form .box-tocart .field.qty .control {
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada) !important;
    border-radius: 8px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.product-add-form .box-tocart .field.qty .control:focus-within {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
}
.product-add-form .box-tocart .field.qty .input-text.qty {
    background: transparent !important;
    border: none !important;
    font-weight: 700 !important;
    color: #1a1d20 !important;
}
.product-add-form .box-tocart .field.qty .qty-changer > a {
    color: #888 !important;
    border: none !important; /* Porto-Default #e7e7e7-Kasten raus -> nur der gruene .control-Rahmen bleibt (kein Doppel-Rahmen) */
    transition: background-color .15s ease, color .15s ease;
}
.product-add-form .box-tocart .field.qty .qty-changer > a:hover {
    background: color-mix(in srgb, var(--theme-color) 12%, transparent) !important;
    color: var(--theme-color) !important;
}

/* --- P2: Produkt-Navigation (prev/next) - klare Hover-State --- */
.product-info-main .prev-next-products .product-nav > a {
    border-color: color-mix(in srgb, var(--theme-color) 28%, #e0e0e0) !important;
    color: #555 !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.product-info-main .prev-next-products .product-nav > a:hover,
.product-info-main .prev-next-products .product-nav > a:focus-visible {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
    outline: none;
}

/* --- P2: Grouped-Mengenfeld -> echter Spinner (− Zahl +) ---
   #quelle ist ein nackter Text-Input; grouped.phtml umschliesst ihn jetzt
   mit .qty-stepper (+/- Buttons + JS). Pill-Rahmen am Wrapper, Input randlos
   (kein Doppelrahmen). Fokus-Glow am Wrapper. */
#quelle_dv .qty-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 44px;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#quelle_dv .qty-stepper:focus-within {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent);
}
#quelle_dv .qty-stepper button {
    width: 34px !important;     /* !important: Porto-Button-Styles setzen sonst ~80px (min-width/padding) */
    min-width: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#quelle_dv .qty-stepper button:hover {
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
    color: var(--theme-color);
}
#quelle_dv input#quelle {
    width: 44px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    color: #1a1d20;
    height: auto !important;
    padding: 0;
}

/* --- product-info-main: Abstaende & Stock/SKU einzeilig ---
   Stock + SKU standen 2-zeilig (Porto: .product-info-stock-sku > * display:block)
   -> eine Zeile via flex; SKU ist Sekundaerinfo -> gedimmt. Gilt fuer alle
   Produkttypen. */
.product-info-main .product-info-stock-sku {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.5rem;
    margin: 1em 0;
    /* Normalschreibung statt Versalien (Lesbarkeit, konsistent mit
       [[porto-allcaps-to-normal-and-css-deploy]]); "SKU" bleibt als Akronym. */
    text-transform: none !important;
}
.product-info-main .product-info-stock-sku > * {
    margin-bottom: 0 !important;
}
.product-info-main .product-info-stock-sku .product.attribute.sku {
    flex: 0 0 auto !important; /* Magento setzt flex-basis:100% -> sonst eigene Zeile */
    width: auto !important;
}
.product-info-main .product-info-stock-sku .product.attribute.sku,
.product-info-main .product-info-stock-sku .product.attribute.sku .value {
    color: #9a9a9a !important;
    font-weight: 400 !important;
}

/* Preishinweis "Alle Preise inkl. MwSt., zzgl. Versandkosten" = leise
   Fine-Print direkt am Preis. Gemeinsame Optik fuer Grouped (Preistabelle)
   und Simple (Preis-Container) -> eine Quelle, konsistentes Bild.
   #6f6f6f statt #777: haelt die leise Anmutung, klart aber >=4.5:1 Kontrast. */
.page-product-grouped .v_box,
.product-info-price .price-tax-note {
    font-size: .85rem;
    font-weight: 400;
    color: #6f6f6f;
}
/* PAngV: der Versandkosten-Link MUSS als "sprechender Link" erkennbar bleiben.
   Erkennbarkeit hier ueber abweichende Farbe (Marken-Gruen), bewusst OHNE
   Unterstreichung. #1b8268: heller/auffaelliger als das vorherige #2f6d5c,
   aber noch unter dem lauten Voll-Gruen -> haelt 4.73:1 Kontrast auf Weiss. */
.page-product-grouped .v_box a,
.product-info-price .price-tax-note a {
    color: #1b8268;
    text-decoration: none;
}
/* Grouped: gehoert zur Preistabelle darueber -> Luft NACH UNTEN zum Spinner. */
.page-product-grouped .v_box {
    margin: .25rem 0 1.25rem;
}
/* Simple: sitzt im Preis-Container nach Haupt-/Grundpreis -> kleine Luft nach
   oben vom Preis weg, etwas mehr nach unten zur Mengen-/CTA-Zeile. */
.product-info-price .price-tax-note {
    margin: .5rem 0 0;
}

/* ============================================================
   TOP-BAR: Versandkostenfrei-Hinweis (linke Seite der Willkommens-
   Leiste). Die Leiste hat einen GRUENEN Hintergrund (Marke, via
   Pseudo/Gradient) -> Text muss hell sein. Utility-Links sind #e7e7e7;
   der Benefit bekommt reines Weiss + 500 -> dezent heller, sticht
   minimal hervor, bleibt voll lesbar. 12px wie rechts, vertikal
   zentriert. Bewusst NICHT sticky (spaeter). */
.main-panel-top .header-left .om-topbar-shipping {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 26px;
    color: #fff !important; /* Porto setzt sonst #999 -> Override gewinnt nur mit !important */
    white-space: nowrap;
}

/* ============================================================
   WARENKORB-SEITE (checkout/cart) — Redesign
   ------------------------------------------------------------
   Produkt-Register: die Flaeche DIENT dem Kauf. Ziel = ruhige,
   scanbare Positionsliste, klare Mengen-/Loesch-Affordanzen,
   Konsistenz mit der Produktseite (Marken-Gruen-CTA, Pille-
   Stepper, 8px-Radius, Fokus-Glow). Reine CSS-Loesung auf dem
   Magento/Porto-Default-Markup; qty-Untergrenze 1 wird in
   qty-clamp.js erzwungen, daher ist "Warenkorb aktualisieren"
   redundant (Auto-Update via cart-auto-update.js) und wird
   ausgeblendet. my_custom.css laedt nach Porto -> !important
   nur dort, wo Porto/Magento sonst gewinnt. */

/* --- Seitentitel: etwas Luft nach unten --- */
.checkout-cart-index .page-title-wrapper .page-title { margin-bottom: 1.25rem; }

/* --- Spalten-Kopf der Positionsliste: leise Mikro-Labels --- */
#shopping-cart-table thead .col {
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    color: #6a6a6a !important; /* >=4.5:1 auf Weiss (kleine Labels brauchen vollen Kontrast) */
    border-bottom: 1px solid #ececec !important;
    padding-bottom: .75rem;
}

/* --- Positionszeile als ruhiger Block (kein Tabellengitter) ---
   Jede Position ist ein <tbody class="cart item"> mit item-info +
   item-actions. Trennlinie nur unter der Aktionszeile -> EIN
   Separator pro Position; sanfter Hover ueber den ganzen Block. */
#shopping-cart-table > tbody.cart.item { transition: background-color .15s ease; }
#shopping-cart-table > tbody.cart.item:hover {
    background: color-mix(in srgb, var(--theme-color) 4%, transparent);
}
#shopping-cart-table .cart.item .item-info > .col {
    border-bottom: none !important;
    padding-top: 1.25rem;
    padding-bottom: .4rem;
    vertical-align: middle;
}
#shopping-cart-table .cart.item .item-actions > td {
    border-bottom: 1px solid #ececec !important;
    padding-top: 0;
    padding-bottom: .6rem;
}

/* --- Artikel-Zelle: Bild + Details in einer Reihe --- */
#shopping-cart-table .cart.item .col.item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#shopping-cart-table .cart.item .product-item-photo,
#shopping-cart-table .cart.item .product-image-container {
    width: 88px !important;
    max-width: 88px;
    flex: 0 0 88px;
    position: static;
    padding: 0;
}
#shopping-cart-table .cart.item .product-image-photo {
    width: 88px !important;
    height: 88px !important;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ececec;
}
#shopping-cart-table .cart.item .product-item-details { margin: 0; }
#shopping-cart-table .cart.item .product-item-name { margin: 0; }
#shopping-cart-table .cart.item .product-item-name a {
    color: #1a1d20 !important;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    transition: color .15s ease;
}
#shopping-cart-table .cart.item .product-item-name a:hover { color: var(--theme-color) !important; }

/* --- Preis-Spalten: Einzelpreis leise (>=4.5:1), Zwischensumme als Anker --- */
#shopping-cart-table .cart.item .col.price .price {
    color: #5a5a5a !important;
    font-weight: 500;
}
#shopping-cart-table .cart.item .col.subtotal .price {
    color: #1a1d20 !important;
    font-weight: 700;
    font-size: 1.05rem;
}

/* --- Mengen-Pille (− [n] +) horizontal, identisch zur Produktseite ---
   Porto rendert .field.qty > .control.qty(input) + .qty-changer(2 Links
   mit Pfeil-Icons, vertikal). Hier: EIN Pillen-Container, dec links,
   Zahl mittig, inc rechts (flex order); Pfeil-Glyphen -> klares −/+. */
#shopping-cart-table .field.qty {
    position: relative;
    display: inline-block !important;
    width: 120px;
    height: 42px;
    margin: 0;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#shopping-cart-table .field.qty:focus-within {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent);
}
#shopping-cart-table .field.qty > .label { display: none; }
#shopping-cart-table .field.qty .control.qty {
    /* fuellt die ganze Pille (Porto gab dem Container sonst nur ~104px ->
       Zahl zentrierte ueber zu schmale Flaeche und wirkte nach links versetzt).
       Absolut inset:0; die Buttons liegen per z-index darueber -> Klicks ok. */
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    border: none !important;
}
#shopping-cart-table .field.qty .input-text.qty {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 700;
    color: #1a1d20 !important;
    padding: 0 38px !important;   /* symmetrischer Platz fuer beide Buttons -> Zahl exakt mittig */
    -moz-appearance: textfield;
    appearance: textfield;
}
#shopping-cart-table .field.qty .input-text.qty::-webkit-outer-spin-button,
#shopping-cart-table .field.qty .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;   /* nur -webkit- reicht in aktuellem Chromium nicht -> sonst lugt der native Spinner als zweites "+" hervor */
    display: none;
    margin: 0;
}
/* Buttons absolut links/rechts, per z-index UEBER dem Input -> Klicks treffen
   zuverlaessig (display:contents+flex erzeugte sonst Overlap mit .control.qty,
   und der Input fing die Klicks ab). */
#shopping-cart-table .field.qty .qty-changer > a {
    position: absolute !important;
    top: 0;
    bottom: 0;
    height: auto !important;
    width: 38px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: none !important;
    background: transparent;
    color: #888 !important;
    transition: background-color .15s ease, color .15s ease;
}
#shopping-cart-table .field.qty .qty-changer .qty-dec { left: 0; right: auto; }
#shopping-cart-table .field.qty .qty-changer .qty-inc { right: 0; left: auto; }
#shopping-cart-table .field.qty .qty-changer > a:hover {
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
    color: var(--theme-color) !important;
}
/* Glyphen −/+ DIREKT ueber das vorhandene Porto-<i> rendern (dessen porto-icons-
   Pfeilglyph wir ersetzen) statt ueber ::after. Grund: ::after erzeugte zusammen
   mit einem zweiten Porto-Glyph-Element ein doppeltes Zeichen ("Strich vor dem +").
   EIN Glyph-Element pro Button. font-size:0 am <a>/<i> schaltet den Originalpfeil
   aus; <i>::before bringt unser Zeichen mit eigener Schrift/Groesse. <a>-Pseudos aus. */
#shopping-cart-table .field.qty .qty-changer > a { font-size: 0 !important; }
#shopping-cart-table .field.qty .qty-changer > a::before,
#shopping-cart-table .field.qty .qty-changer > a::after { content: none !important; display: none !important; }
#shopping-cart-table .field.qty .qty-changer > a > i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0 !important;
    font-style: normal;
}
#shopping-cart-table .field.qty .qty-changer .qty-inc > i::before {
    content: "+" !important;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1;
    color: inherit;
}
#shopping-cart-table .field.qty .qty-changer .qty-dec > i::before {
    content: "−" !important;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1;
    color: inherit;
}

/* --- Entfernen / Bearbeiten: beschriftete, klare Controls statt kryptischem × ---
   Magento versteckt das Label per clip-Visually-Hidden; wieder einblenden
   fuer eine echte Affordanz. Icon (porto-icons) bleibt als ::before.
   Rechtsbuendig; funktioniert mit 1 Aktion (nur Loeschen) und 2 (Bearbeiten+Loeschen). */
#shopping-cart-table .cart.item .actions-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
    /* Magento (_actions-toolbar) gibt der Toolbar global padding-bottom:30px ->
       der einzelne "Artikel entfernen"-Button (33px) sass in einer 63px-Toolbar
       und das Aktions-Band frass ~38% der Positionshoehe. Hier nicht gebraucht
       (es gibt nie eine zweite Aktionszeile) -> Geister-Padding entfernen, Band
       schmiegt sich an den Button. min-height ebenfalls neutralisieren. */
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
#shopping-cart-table .action-delete,
#shopping-cart-table .action-edit {
    position: static !important; /* Porto setzt diese im Cart absolut -> wuerden sich
                                    sonst am selben Punkt stapeln; zurueck in den Fluss,
                                    damit die Flex-Toolbar sie nebeneinander anordnet. */
    display: inline-flex !important;
    align-items: center;
    gap: .45em;
    padding: .4rem .7rem;
    margin: 0;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1;
    color: #6a6a6a !important;
    transition: background-color .15s ease, color .15s ease;
}
#shopping-cart-table .action-delete > span,
#shopping-cart-table .action-edit > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    font-size: .85rem;
}
#shopping-cart-table .action-delete:hover {
    background: #fdecea;
    color: #c0392b !important;
}
#shopping-cart-table .action-delete:hover::before { color: #c0392b !important; }
#shopping-cart-table .action-edit:hover {
    background: color-mix(in srgb, var(--theme-color) 10%, transparent);
    color: var(--theme-color) !important;
}
#shopping-cart-table .action-edit:hover::before { color: var(--theme-color) !important; }
#shopping-cart-table .action-delete:focus-visible,
#shopping-cart-table .action-edit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 22%, transparent);
}

/* --- Aktionen unter der Liste: Update raus (Auto-Update aktiv), Weiter-Einkaufen als Link --- */
.cart.main.actions {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
.cart.main.actions .action.update { display: none !important; }
.cart.main.actions .action.continue {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--theme-color) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.cart.main.actions .action.continue:hover { text-decoration: underline; }

/* --- Gutschein-Block: kompakte, integrierte Eingabe + Outline-Button --- */
.cart-container .block.discount {
    margin-top: 1.5rem;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    padding: 1rem 1.25rem;
}
.cart-container .block.discount .title strong {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1d20;
    text-transform: none;
}
.cart-container .block.discount .fieldset.coupon {
    display: flex;
    gap: .5rem;
    align-items: stretch;
    margin-top: .75rem;
}
.cart-container .block.discount .fieldset.coupon .field { flex: 1; margin: 0; }
.cart-container .block.discount #coupon_code {
    width: 100%;
    height: 44px !important;
    border: 1.5px solid #dcdcdc !important;
    border-radius: 8px !important;
    padding: 0 .9rem !important;
    background: #fff;
}
.cart-container .block.discount #coupon_code:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
    outline: none;
}
.cart-container .block.discount .actions-toolbar .action.apply {
    height: 44px;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1.5px solid var(--theme-color) !important;
    color: var(--theme-color) !important;
    font-weight: 600 !important;
    padding: 0 1.2rem !important;
    transition: background-color .2s ease, color .2s ease;
}
.cart-container .block.discount .actions-toolbar .action.apply:hover {
    background: var(--theme-color) !important;
    color: #fff !important;
}

/* --- Zusammenfassung: Karte, klebt auf Desktop --- */
.cart-summary {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.75rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
@media (min-width: 992px) {
    .cart-summary {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}
.cart-summary > .summary.title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1a1d20 !important;
    text-transform: none !important;
    margin-bottom: 1rem;
}
/* Totals-Zeilen: Label leise, Wert ink; Bestellsumme als Anker */
.cart-summary .data.table.totals .mark {
    color: #6a6a6a !important;
    font-weight: 400 !important;
}
.cart-summary .data.table.totals .amount {
    color: #1a1d20 !important;
    font-weight: 600 !important;
    text-align: right;
}
.cart-summary .data.table.totals .grand .mark,
.cart-summary .data.table.totals .grand .amount {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1a1d20 !important;
    padding-top: .75rem;
    border-top: 1px solid #ececec;
}
/* Versand-Schaetzer-Titel: ruhig */
.cart-summary .block.shipping > .title {
    text-transform: none !important;
    font-weight: 600;
    color: #1a1d20;
}

/* --- Haupt-CTA "Zur Kasse gehen" -> Marken-Gruen (Konsistenz mit Produktseite) --- */
.cart-summary .checkout-methods-items .action.primary.checkout {
    width: 100%;
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.cart-summary .checkout-methods-items .action.primary.checkout:hover {
    background: color-mix(in srgb, var(--theme-color) 88%, #000) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-color) 30%, transparent) !important;
}
.cart-summary .checkout-methods-items .action.primary.checkout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 28%, transparent) !important;
}

/* --- Responsive: Mobile (Magento klappt die Tabelle in gestapelte Zeilen) --- */
@media (max-width: 767px) {
    #shopping-cart-table .cart.item .col.item { gap: .75rem; }
    #shopping-cart-table .cart.item .product-item-photo,
    #shopping-cart-table .cart.item .product-image-container,
    #shopping-cart-table .cart.item .product-image-photo {
        width: 72px !important;
        height: 72px !important;
        flex-basis: 72px;
    }
    .cart-summary { margin-top: 1.5rem; }
    .cart.main.actions { flex-direction: column-reverse; align-items: stretch; gap: .75rem; }
    .cart-container .block.discount .fieldset.coupon { flex-direction: column; }
    .cart-container .block.discount .actions-toolbar .action.apply { width: 100%; }
}

/* --- Reduced Motion: Hover-/Fokus-Uebergaenge abschalten --- */
@media (prefers-reduced-motion: reduce) {
    #shopping-cart-table > tbody.cart.item,
    #shopping-cart-table .field.qty,
    #shopping-cart-table .field.qty .qty-changer > a,
    #shopping-cart-table .cart.item .product-item-name a,
    #shopping-cart-table .action-delete,
    #shopping-cart-table .action-edit,
    .cart-container .block.discount .actions-toolbar .action.apply,
    .cart-summary .checkout-methods-items .action.primary.checkout {
        transition: none !important;
    }
}

/* ============================================================
   "Mehr Informationen"-Tab modernisiert (Attribut-Spezifikation +
   Naehrwert-Panel)
   ------------------------------------------------------------
   Core-Template `additional` rendert table.additional-attributes
   (Label/Wert) + teils ein verschachteltes .rTable-Pseudo-Gitter
   (Naehrwertangaben). Beides war generisch: Wert-Text #777 (~4.48:1,
   knapp UNTER 4.5:1 Body-Kontrast) und das Naehrwert-Gitter ein nacktes
   1px-#333-Raster (M1-Altlast, vgl. .rTable oben ~Z.1986).
   Ziel: ruhige, scanbare Spezifikation + modernes Naehrwert-Panel,
   das Transparenz/Vertrauen (Bio, Herkunft, Zutaten, Naehrwerte) staerkt.

   Spezifitaet: alle Selektoren fuehren mit #additional -> schlagen Portos
   klassenbasierte Tabellen-CSS ohne !important (live verifiziert), und der
   enge Scope haelt die Regeln aus Magento-weiten .data.table/.rTable-Stellen
   (Warenkorb, Bestellungen, CMS) heraus. Farben shop-neutral ueber
   var(--theme-color)+color-mix (edeltee gruen, naturteil eigene Farbe),
   8px-Radius = Theme-Standard ([[megamenu-m1-parity-and-radius-standard]]).
   ============================================================ */
/* Volle Inhaltsbreite (KEIN max-width-Cap): die Tabelle war im Original
   voll breit und soll konsistent zur Beschreibung/Seite bleiben - ein Cap
   wirkt als schmale Insel (besonders im vertikalen Tab-Layout). */
#additional .additional-attributes-wrapper {
    max-width: none;
    overflow-x: visible;
    margin-top: 4px;
}
/* Caption "Mehr Informationen" dupliziert den Tab-Titel visuell ->
   ausblenden, aber als zugaenglichen Tabellennamen erhalten (sr-only,
   nicht display:none -> sonst raus aus dem A11y-Baum). */
#additional table.additional-attributes > caption.table-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Werte: Kontrast-Fix (#777 -> #2f2f2f ~13:1) + Leserhythmus, global */
#additional table.additional-attributes td.col.data {
    color: #2f2f2f;
    font-size: 14px;
    line-height: 1.62;
    /* Tracking auf normal: Portos 0.2px-Default wirkt locker; der Prosa-Tab
       (#description p) liegt schon bei ~normal -> konsistent + crisper. */
    letter-spacing: normal;
}
#additional table.additional-attributes td.col.data p {
    margin: 0 0 6px;
    /* 13 -> 14: vermeidet muddy 13/14-Hierarchie zu den Klartext-Werten
       in derselben Spalte; Sekundaer-Rolle traegt die gedaempfte Farbe. */
    font-size: 14px;
    color: #707070;
}
#additional table.additional-attributes td.col.data a {
    color: var(--theme-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
#additional table.additional-attributes td.col.data a:hover {
    color: color-mix(in srgb, var(--theme-color) 70%, #000);
}
/* Siegel/Zertifikate (Bio-Siegel, EU-Bio-Blatt, Logos) als ruhige
   "Stempel" praesentieren -> staerkt Vertrauen, ohne Karte/Side-Stripe.
   Bild direkt getargetet (kein hardcodierter Text -> auch fuer rs1-5/
   maoci-logo unschaedlich), etwas groesser fuer Praesenz. */
#additional table.additional-attributes td.col.data img {
    vertical-align: middle;
    height: 40px;
    width: auto;
    padding: 7px 10px;
    margin: 2px 8px 2px 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* Desktop: zwei Spalten mit Haarlinien, Label gedaempfter Fuehrungstext */
@media (min-width: 768px) {
    #additional table.additional-attributes {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
    }
    #additional table.additional-attributes > tbody > tr {
        border-bottom: 1px solid #ececec;
    }
    #additional table.additional-attributes > tbody > tr:last-child {
        border-bottom: 0;
    }
    #additional table.additional-attributes th.col.label {
        /* Label-Spalte inhaltsbreit (width:1% + nowrap schrumpft auf das
           laengste Label) -> kurze Begriffe vergeuden keinen Raum (kein
           50/50) UND lange Labels brechen auf Desktop NICHT um (der
           Soft-Hyphen-Umbruch war nur fuers Mobile-Stacking gedacht). */
        width: 1%;
        white-space: nowrap;
        padding: 15px 32px 15px 0;
        font-weight: 600;
        /* 13 -> 14 = Body-Baseline (Beschwerde "kleiner als der Rest");
           Sekundaer-Rolle traegt weight 600 + gedaempfte Farbe, nicht Groesse. */
        font-size: 14px;
        letter-spacing: normal;
        color: #6a6a6a;
        text-align: left;
        vertical-align: top;
        line-height: 1.5;
    }
    #additional table.additional-attributes td.col.data {
        padding: 15px 0;
        vertical-align: top;
    }
}

/* Mobile (<768px): Porto blendet <th> aus und zieht das Label aus data-th
   per ::before. Gestapelte Zeilen ruhiger gruppieren, Label als fetter
   Vorlauf. (Hinweis: data-th einiger Attribute enthaelt ein doppelt
   escaptes "&shy;" -> erscheint hier roh; Fix im Attribut-Label, nicht CSS.) */
@media (max-width: 767px) {
    #additional table.additional-attributes td.col.data {
        padding: 10px 0 16px;
        border-bottom: 1px solid #ececec;
    }
    #additional table.additional-attributes > tbody > tr:last-child td.col.data {
        border-bottom: 0;
    }
    #additional table.additional-attributes td.col.data::before {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
        color: #6a6a6a;
    }
}

/* Naehrwert-Panel: aus dem nackten #333-Gitter ein modernes, scanbares
   Panel. Zeilen = Flex (Naehrstoff links / Wert rechts, tabular-nums),
   zarte Marken-Zebra, Brennwert als betonte Kopf-Kennzahl. */
#additional .rTable {
    display: block;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    max-width: 440px;
    margin: 10px 0 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
#additional .rTableBody {
    display: block;
}
#additional .rTableRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 16px;
    border-bottom: 1px solid #f1f1f1;
}
#additional .rTableRow:last-child {
    border-bottom: 0;
}
#additional .rTableRow:nth-child(even) {
    background: color-mix(in srgb, var(--theme-color) 4%, #fff);
}
/* Brennwert = erste Zeile, betonte Kopf-Kennzahl */
#additional .rTableRow:first-child {
    background: color-mix(in srgb, var(--theme-color) 9%, #fff);
}
#additional .rTableCell {
    display: block;
    border: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: normal;
    color: #3a3a3a;
}
#additional .rTableCell:first-child {
    color: #565656;
}
#additional .rTableCell:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    color: #262626;
}
/* Brennwert-Zeile: ruhig abgesetzt ueber getoenten Hintergrund + dunklere
   Farbe, bewusst OHNE Fettung (Zahlen brauchen keine Extra-Hervorhebung). */
#additional .rTableRow:first-child .rTableCell {
    color: #1f1f1f;
}

/* ============================================================
   MINICART-POPUP (.block-minicart, Dropdown-Design) — Redesign
   Schlanke Schnell-Uebersicht statt gequetschtem Mini-Formular:
   - klare Hierarchie (Anzahl = ruhiges Daten-Label, "Zum Warenkorb"
     = erkennbarer Aktions-Link; vorher optisch identisch)
   - keine Versalien (Markenregel), mehr Luft, Marken-Gruen-CTA
   - Menge nur-lesend (Eingabe/"Aktualisieren" im Item-Template entfernt),
     Mengenaenderung laeuft ueber die Warenkorbseite
   Scope bewusst nur Dropdown — Offcanvas (.minicart-offcanvas) unberuehrt.
   Porto laedt spaeter -> gezielt !important (vgl. Projektregel).
   ============================================================ */

/* --- Mehr Atem: breiter + grosszuegigeres Padding (war 300px / 10-15px) --- */
.minicart-wrapper:not(.minicart-offcanvas) .block-minicart {
    width: 360px !important;
    padding: 1.25rem 1.25rem 1.1rem !important;
    color: #2f2f2f !important;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important;
}
@media (max-width: 400px) {
    .minicart-wrapper:not(.minicart-offcanvas) .block-minicart {
        width: calc(100vw - 24px) !important;
    }
}

/* --- Kopfzeile: Anzahl (Daten) vs. "Zum Warenkorb" (Aktion) klar trennen --- */
.block-minicart .total-count {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .9rem !important;
    padding-bottom: .9rem;
    border-bottom: 1px solid #ececec;
}
.block-minicart .total-count .items-total {
    float: none !important;          /* Porto floatet sonst rechts */
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    text-transform: none !important; /* Versalien raus */
    color: #5a5a5a !important;       /* ruhiges Label */
}
.block-minicart .total-count .items-total .count {
    font-weight: 700 !important;
    color: #1a1d20 !important;       /* nur die Zahl betont */
}
.block-minicart .total-count .actions,
.block-minicart .total-count .actions .secondary {
    margin: 0 !important;
    text-align: right;
}
.block-minicart .total-count .action.viewcart {
    display: inline-flex !important;
    align-items: center;
    gap: .25rem;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    /* Gruen, aber dunkel genug fuer AA-Kontrast auf Weiss (~5:1) */
    color: color-mix(in srgb, var(--theme-color) 76%, #000) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease;
}
.block-minicart .total-count .action.viewcart::after {
    content: "\2192";                /* Pfeil -> signalisiert Navigation */
    font-weight: 400;
    transition: transform .2s ease;
}
.block-minicart .total-count .action.viewcart:hover,
.block-minicart .total-count .action.viewcart:focus-visible {
    /* dunkler (nicht heller) -> Feedback OHNE den AA-Kontrast zu verlieren;
       volles var(--theme-color) waere auf Weiss nur 3.44:1 */
    color: color-mix(in srgb, var(--theme-color) 62%, #000) !important;
    text-decoration: underline !important;
}
.block-minicart .total-count .action.viewcart:hover::after {
    transform: translateX(3px);
}

/* --- Artikelliste: mehr Luft, leise Trennlinien, lesbarer Name --- */
.block-minicart .minicart-items-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    /* Porto setzt hier overflow-x:auto -> erzeugte einen 2px-Scrollbalken */
    overflow-x: hidden !important;
}
.block-minicart .minicart-items .product-item {
    position: relative;              /* Anker fuer Entfernen-Button */
    padding: .9rem 0 !important;
    border-bottom: 1px solid #f1f1f1;
}
.block-minicart .minicart-items .product-item:last-child {
    border-bottom: 0;
}
.block-minicart .minicart-items .product-item > .product {
    padding-right: 1.5rem;           /* Platz fuer das x oben rechts */
}
.block-minicart .minicart-items .product-item-photo {
    width: 64px !important;
    margin-right: .9rem;
}
.block-minicart .minicart-items .product-item-photo .product-image-container {
    width: 64px !important;
}
.block-minicart .minicart-items .product-item-name {
    margin: 0 0 .35rem !important;
    line-height: 1.35 !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
}
.block-minicart .minicart-items .product-item-name a {
    color: #2f2f2f !important;
    transition: color .2s ease;
}
.block-minicart .minicart-items .product-item-name a:hover {
    color: var(--theme-color) !important;
}
.block-minicart .minicart-items .price-minicart .price {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--theme-color) !important;
}

/* Menge nur-lesend: ruhiges Label + Wert (kein Eingabefeld mehr) */
.block-minicart .minicart-items .details-qty {
    margin-top: .35rem !important;
    font-size: .85rem;
    color: #5a5a5a;
}
.block-minicart .minicart-items .details-qty .label {
    font-weight: 400;
    color: #6b6b6b;
}
.block-minicart .minicart-items .details-qty .minicart-qty-value {
    font-weight: 700;
    color: #2f2f2f;
}

/* Entfernen (x): dezent oben rechts, in-place (kein Reload) */
.block-minicart .minicart-items .product.actions {
    margin: 0 !important;
}
.block-minicart .minicart-items .product.actions .secondary {
    position: absolute;
    top: .75rem;
    /* 6px vom rechten Rand eingerueckt: der Wrapper hat overflow-y:auto (Scroll
       bei vielen Artikeln) -> CSS erzwingt dann auch overflow-x-Clipping, das
       laesst sich nicht abschalten. Buendig am Rand wuerde der Hover-Kreis/Schatten
       abgeschnitten. Einruecken = saubere Loesung (statt Schatten ueberlaufen lassen). */
    right: 6px;
    margin: 0 !important;
    /* Feste 26x26-Box begrenzt das x exakt (statt inline=20px, wodurch das
       breitere x sonst 6px ueber den rechten Rand ragte) und haelt es rund.
       Bewusst KEIN display:flex hier -> sonst schrumpft das x als Flex-Item
       auf 20x26 (Ellipse statt Kreis). */
    width: 26px;
    height: 26px;
}
.block-minicart .minicart-items .product.actions .action.delete {
    display: flex !important;        /* zentriert das Icon-Glyph zuverlaessig */
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    border-radius: 50%;
    color: #9a9a9a !important;
    transition: background-color .2s ease, color .2s ease;
}
.block-minicart .minicart-items .product.actions .action.delete::before {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.block-minicart .minicart-items .product.actions .action.delete:hover {
    background: #fbecec;
    color: #c0392b !important;
}
/* "Bearbeiten" (nur bei Variantenprodukten): klein + ruhig, nicht aufdraengen */
.block-minicart .minicart-items .product.actions .primary .action.edit {
    color: #8a8a8a !important;
}
.block-minicart .minicart-items .product.actions .primary .action.edit:hover {
    color: var(--theme-color) !important;
}

/* --- Zwischensumme: ruhige Zeile, betonter Betrag, ohne Doppelpunkt-Artefakt --- */
.minicart-wrapper .block-minicart .subtotal {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin: .9rem 0 1rem !important;
    padding-top: .9rem;
    border-top: 1px solid #ececec;
    text-transform: none !important;
    line-height: 1.3 !important;
}
.block-minicart .subtotal .label {
    font-weight: 500 !important;
    color: #5a5a5a !important;
}
.block-minicart .subtotal .label:after {
    content: none !important;        /* haengender Doppelpunkt im Flex-Row raus */
}
.block-minicart .subtotal .amount,
.block-minicart .subtotal .price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1a1d20 !important;
    white-space: nowrap;
}

/* --- Haupt-CTA "Zur Kasse gehen": Marken-Gruen (Konsistenz mit Warenkorbseite/Produktseite) --- */
.block-minicart .block-content > .actions {
    margin: 0 !important;
}
.block-minicart .block-content > .actions .primary {
    margin: 0 !important;
}
.block-minicart .action.primary.checkout {
    display: block;
    width: 100% !important;
    padding: .85rem 1rem !important;
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: none !important; /* Versalien raus */
    letter-spacing: 0 !important;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.block-minicart .action.primary.checkout:hover {
    background: color-mix(in srgb, var(--theme-color) 88%, #000) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-color) 30%, transparent) !important;
}
.block-minicart .action.primary.checkout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 28%, transparent) !important;
}

/* --- Leerer Zustand: ruhig zentriert, sentence-case Sekundaer-Link --- */
.block-minicart .subtitle.empty {
    padding: 1.5rem 0 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #4a4a4a !important;
    text-transform: none !important;
}
.block-minicart .block-content > .actions > .secondary {
    margin: 0 !important;
}
.block-minicart .block-content > .actions > .secondary .action.viewcart {
    display: inline-block !important;
    width: auto !important;
    padding: .6rem 1.25rem !important;
    border: 1px solid var(--theme-color) !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: color-mix(in srgb, var(--theme-color) 80%, #000) !important;
    transition: background-color .2s ease, color .2s ease;
}
.block-minicart .block-content > .actions > .secondary .action.viewcart:hover {
    background: var(--theme-color) !important;
    color: #fff !important;
}

/* --- Reduced Motion: Uebergaenge im Popup abschalten --- */
@media (prefers-reduced-motion: reduce) {
    .block-minicart .total-count .action.viewcart,
    .block-minicart .total-count .action.viewcart::after,
    .block-minicart .minicart-items .product-item-name a,
    .block-minicart .minicart-items .product.actions .action.delete,
    .block-minicart .action.primary.checkout,
    .block-minicart .block-content > .actions > .secondary .action.viewcart {
        transition: none !important;
    }
}

/* ========================================
   Mobiles Off-Canvas-Menue - Accordion (progressive Disclosure)
   --------------------------------------------------------------
   Verhalten/Inject steuert js/mobile-menu.js. Hier die Optik + die
   Klapp-Mechanik via eigener .o2e-open-Klasse. Alles <=991px gescoped,
   damit das Desktop-Megamenue (>=992px) voellig unberuehrt bleibt.
   Hintergrund: die native Theme-Mechanik klappte am Level 0 die komplette
   Unterstruktur auf (~20 Eintraege); das Theme-Toggle (.open-children-toggle)
   wird ausgeblendet, wir besitzen das Accordion selbst.
   ======================================== */
@media (max-width: 991px) {
    /* Drawer: "Vollbreite"-Variante = 90vw + Scrim-Streifen (Material-Drawer).
       width immer 90vw; geschlossen komplett nach links (eigener Offset, da
       Theme-Default nur -336px schiebt). Offen setzt das Theme html.nav-open
       .nav-sections{left:0} -> bleibt erhalten. */
    .nav-sections {
        width: 90vw !important;
        z-index: 1001 !important;
    }
    html:not(.nav-open) .nav-sections {
        left: -90vw !important;
    }

    /* Theme-Chevron (rechte 42px) raus - wir toggeln ueber die ganze Zeile. */
    .nav-sections .navigation .open-children-toggle {
        display: none !important;
    }

    /* Schreibweise normalisieren (Default schrie in ALL-CAPS). */
    .nav-sections .navigation a {
        text-transform: none !important;
    }

    /* Zeilen als komfortable Tap-Targets (>=48px), klare Trennlinien. */
    .nav-sections .navigation li.level0 > a.level-top,
    .nav-sections .navigation li.level1 > a,
    .nav-sections .navigation li.level2 > a,
    .nav-sections .navigation li.o2e-view-all > a {
        display: flex !important;
        align-items: center;
        min-height: 48px;
        box-sizing: border-box;
        padding: 11px 16px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        line-height: 1.35;
    }
    /* Progressive Einrueckung pro Ebene -> sichtbare Hierarchie. */
    .nav-sections .navigation li.level1 > a {
        padding-left: 26px !important;
    }
    .nav-sections .navigation li.level2 > a {
        padding-left: 40px !important;
        font-weight: 400;
        color: #4a4a4a;
    }

    /* Klapp-Mechanik: alle Panels per Default zu, nur .o2e-open zeigt seine
       direkte naechste Ebene. !important schlaegt die Theme-Basisregeln
       (die das Submenu absolut/visibility-hidden positionieren). */
    .nav-sections .navigation li.level0.parent > .submenu,
    .nav-sections .navigation li.level1.parent > ul.subchildmenu {
        display: none !important;
    }
    .nav-sections .navigation li.level0.parent.o2e-open > .submenu {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        /* Theme haelt das Submenu eingeklappt via height:0 + overflow:hidden
           (normal per .opened freigegeben - das wir bewusst nicht nutzen).
           Ohne diese drei Zeilen wird der Inhalt auf 1px weggeclippt. */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .nav-sections .navigation li.level0.parent.o2e-open > .submenu .container {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .nav-sections .navigation li.level1.parent.o2e-open > ul.subchildmenu {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Die Megamenue-Spaltenstruktur (Bootstrap .row + .mega-columns) ist fuer
       horizontale Desktop-Spalten gedacht und traegt im mobilen Block-Fluss
       keine Hoehe (Container kollabiert -> Hit-Test daneben). Mobil: alles als
       vollbreite, gestapelte Bloecke; Kategorie-Thumbnails (teils absolut
       positioniert) raus -> kein unsichtbarer Klick-Faenger. */
    .nav-sections .navigation li.level0.parent.o2e-open > .submenu .row,
    .nav-sections .navigation li.level0.parent.o2e-open > .submenu > .container > .row > ul.subchildmenu {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        columns: auto !important;
    }
    .nav-sections .navigation .submenu li.level1,
    .nav-sections .navigation .submenu li.level2 {
        float: none !important;
        width: auto !important;
        display: block !important;
    }
    .nav-sections .navigation .submenu .menu-thumb-img {
        display: none !important;
    }

    /* Eigener Chevron nur an Eltern-Zeilen (Items MIT Kindern). Border-Dreieck
       in Markengruen, dreht beim Aufklappen. */
    .nav-sections .navigation li.level0.parent > a.level-top::after,
    .nav-sections .navigation li.level1.parent > a::after {
        content: "";
        margin-left: auto;
        flex: none;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--theme-color, #179c80);
        border-bottom: 2px solid var(--theme-color, #179c80);
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }
    .nav-sections .navigation li.level0.parent.o2e-open > a.level-top::after,
    .nav-sections .navigation li.level1.parent.o2e-open > a::after {
        transform: rotate(-135deg);
    }

    /* Theme-Marker (graues "\203A" vor jeder Kategorie) raus -> nur unser
       gruener, rotierender Klapp-Chevron (::after) signalisiert Klappbarkeit;
       zwei Chevrons pro Zeile waeren redundant. Der "->"-Pfeil an
       "Alle anzeigen" (li.o2e-view-all > a::before) bleibt - andere Klasse. */
    .nav-sections .navigation li.level0 > a.level-top::before,
    .nav-sections .navigation li.level1 > a::before,
    .nav-sections .navigation li.level2 > a::before,
    .nav-sections .navigation li:not(.parent) > a::before {
        display: none !important;
    }
}
/* @media(max-width:991px) hier geschlossen: der Checkout-Block laeuft
   bewusst Top-Level (sonst greift er nur mobil, nicht am Desktop). */

/* ==================================================================
   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(--theme-color, #179c80) !important;
    border-color: var(--theme-color, #179c80) !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: color-mix(in srgb, var(--theme-color, #179c80) 88%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color, #179c80) 88%, black) !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. */
@media (max-width: 767px) {
    .checkout-container .opc-sidebar .modal-inner-wrap {
        background: transparent !important;
        padding: 0 !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: 1000;
    }
    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;
    }
}

/* ============================================================
   Bewertungs-Tab (#reviews) — Marken-Veredelung
   Stock-Magento/Porto-Default → edle, grüne Markensprache:
   - letzte Orange-Insel (Submit-Button) auf Marken-Grün gespiegelt
     (identisch zum "In den Warenkorb"-CTA: #179c80 / 8px / 700),
   - Versalien-Legende "SIE BEWERTEN" → Satzschreibung,
   - Kontrast #777 → Marken-Ink #2f2f2f,
   - Listing aus der rohen Tabellen-Optik in eine ruhige,
     scanbare Form (Titel · Sterne · Text · Meta),
   - Eingaben mit 8px-Radius + grünem Fokus-Ring.
   Porto/Smartwave laden spaeter → Overrides brauchen !important.
   ============================================================ */
#reviews {
    --o2e-rev-ink: #2f2f2f;
    --o2e-rev-muted: #6b6b6b;
    --o2e-rev-line: rgba(0, 0, 0, .10);
    --o2e-rev-gold: #f3a712;
    --o2e-rev-green: var(--theme-color, #179c80);
}

/* Sichtbar-versteckt (Screenreader behaelt Text) statt display:none.
   Trifft u. a. das redundante "Bewertung"-Label neben den Sternen im Listing. */
#reviews .o2e-vh,
#reviews .block.review-list .review-ratings .label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* ---------- Section-Ueberschriften (Listing + Formular) ---------- */
#reviews .block.review-list .block-title,
#reviews .block.review-add .block-title {
    display: block !important;
    margin: 0 0 1.25rem !important;
    padding-bottom: .6rem !important;
    border-bottom: 1px solid var(--o2e-rev-line) !important;
}
#reviews .block.review-list .block-title strong,
#reviews .block.review-add .block-title strong {
    color: var(--o2e-rev-ink) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

/* Pager-Limiter ("Anzeigen 10/20/50 pro Seite") ist bei wenigen Bewertungen
   reiner Ballast und zog eine zweite Strich-Linie unter dem Listing → raus,
   Toolbar-Rahmen entfernen, damit nur EIN sauberer Trenner bleibt. */
#reviews .review-toolbar {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#reviews .review-toolbar .limiter { display: none !important; }

/* Trennung Listing ↔ Formular (einziger Trenner) */
#reviews .block.review-add {
    margin-top: 2.75rem !important;
    padding-top: 2.25rem !important;
    border-top: 1px solid var(--o2e-rev-line) !important;
}

/* ---------- Listing: einzelne Bewertung ---------- */
#reviews .review-items {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#reviews .review-item {
    padding: 1.5rem 0 !important;
    border-bottom: 1px solid var(--o2e-rev-line) !important;
}
#reviews .review-item:first-child { padding-top: .25rem !important; }
#reviews .review-item:last-child { border-bottom: 0 !important; }

#reviews .review-title {
    color: var(--o2e-rev-ink) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 .5rem !important;
}

/* Sterne auf eigene Zeile (Porto floatet .review-ratings → Text lief drumherum) */
#reviews .block.review-list .review-ratings,
#reviews .block.review-list .review-ratings .rating-summary {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 .65rem !important;
}
#reviews .block.review-list .review-item { display: block !important; }
#reviews .block.review-list .rating-result > span:before { color: var(--o2e-rev-gold) !important; }

#reviews .review-content {
    color: var(--o2e-rev-ink) !important;
    /* 1rem = native Basisgroesse (16px), nicht kuenstlich verkleinert */
    font-size: 1rem !important;
    line-height: 1.75 !important;
    max-width: none !important;
    margin: 0 0 .65rem !important;
}

/* Details-Tab (#description): Porto rendert die Hauptbeschreibung in 14px,
   also kleiner als die Bewertungen. Auf 1rem (16px) anheben — gleiche Groesse
   wie der Review-Text — fuer einheitliche, gut lesbare Produkttexte. */
#reviews .review-content,
#description,
#description p,
#description li,
#description td {
    font-size: 1rem !important;
}
#description,
#description p,
#description li {
    line-height: 1.75 !important;
}
#reviews .review-details,
#reviews .review-author,
#reviews .review-details .review-details-value,
#reviews .review-details time {
    color: var(--o2e-rev-muted) !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
}
#reviews .review-author { margin: 0 !important; }
#reviews .review-details-label { font-weight: 600 !important; }

/* ---------- Formular ---------- */
#reviews .review-legend {
    text-transform: none !important;
    color: var(--o2e-rev-muted) !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 0 1.5rem !important;
}
#reviews .review-legend > strong {
    color: var(--o2e-rev-ink) !important;
    font-weight: 700 !important;
}

/* Feld-Labels: Satzschreibung, kontrastreich */
#reviews .review-form .label,
#reviews .review-field-ratings > .label {
    text-transform: none !important;
    color: var(--o2e-rev-ink) !important;
    font-weight: 600 !important;
}
#reviews .review-field-ratings > .label {
    font-size: .95rem !important;
    margin-bottom: .5rem !important;
}

/* Eingabefelder: 8px-Radius, gemessene Breite, gruener Fokus-Ring */
#reviews .review-form input[type="text"],
#reviews .review-form textarea {
    border: 1px solid var(--o2e-rev-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--o2e-rev-ink) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
#reviews .review-field-nickname .control,
#reviews .review-field-summary .control { max-width: 520px !important; }
#reviews .review-field-text .control { max-width: 640px !important; }
#reviews .review-form input[type="text"]:focus,
#reviews .review-form textarea:focus {
    border-color: var(--o2e-rev-green) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--o2e-rev-green) 18%, transparent) !important;
    outline: none !important;
}

/* ---------- Submit: identisch zum "In den Warenkorb"-CTA ---------- */
#reviews button.action.submit.primary {
    background-color: var(--o2e-rev-green) !important;
    border-color: var(--o2e-rev-green) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
#reviews button.action.submit.primary:hover {
    background-color: color-mix(in srgb, var(--o2e-rev-green) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--o2e-rev-green) 88%, #000) !important;
}
#reviews button.action.submit.primary:active { transform: translateY(1px) !important; }
#reviews button.action.submit.primary:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--o2e-rev-green) 30%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
    #reviews .review-form input[type="text"],
    #reviews .review-form textarea,
    #reviews button.action.submit.primary { transition: none !important; }
}

/* ============================================================
   Trust-/Reassurance-Zeile unter dem Warenkorb-CTA (.om-trust)
   Block: product.info.trustbadges (trust-badges.phtml), alle Produkttypen.
   Nur universell wahre Claims (kein Bio hier). Markengrün, mobile-first.
   ============================================================ */
.product-info-main .om-trust,
.om-trust {
    display: grid !important;
    grid-template-columns: 1fr; /* nur noch 1 Claim (Versand); Rechnung entfernt, s. trust-badges.phtml */
    gap: 12px 18px;
    margin: 6px 0 6px !important;
    padding: 15px 18px;
    border: 1px solid color-mix(in srgb, var(--theme-color) 22%, #e6e6e6);
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-color) 4%, #fff);
}
.om-trust__item {
    display: flex !important;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.3;
    color: #2f2f2f !important;
    font-weight: 500;
}
.om-trust__item svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--theme-color) !important;
}
.om-trust__item small {
    color: #777;
    font-weight: 400;
    font-size: .82em;
}
/* Phones: einspaltig (scanbar, kein gequetschter Umbruch).
   Spezifitaet muss .product-info-main .om-trust matchen, sonst gewinnt die
   Basisregel trotz Media Query (MQ erhoeht Spezifitaet nicht). */
@media (max-width: 480px) {
    .product-info-main .om-trust,
    .om-trust { grid-template-columns: 1fr !important; gap: 11px; }
}

/* ========================================
   IMPRESSUM  (body.cms-impressum / .impressum)
   Rohes Stock-h3/p/br -> ruhiges, scanbares Vertrauensdokument (SS 5 TMG).
   Markup + page_layout=1column kommen aus apply-impressum-content.php (Phase 7d3);
   die Sidebar-Neutralisierung unten ist defensiv (greift auch im 2col-Altzustand).
   Grün sparsam (Links, Bio-Button, Identity-Panel-Tint); Fliesstext #2f2f2f.
======================================== */
body.cms-impressum {
    --imp-ink: #21262b;   /* Ueberschriften (~13:1) */
    --imp-body: #2f2f2f;  /* Fliesstext (~12.6:1) */
    --imp-muted: #586069; /* Labels/Feinabdruck (~6.4:1) */
    --imp-line: #e7e9ea;  /* Hairlines */
    --imp-tint: color-mix(in srgb, var(--theme-color) 6%, #fff);
    --imp-tint-line: color-mix(in srgb, var(--theme-color) 22%, var(--imp-line));
}

/* Tote linke Spalte killen (1column kommt aus dem Seed; hier defensiv) */
body.cms-impressum .column.main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
}
body.cms-impressum .sidebar-main,
body.cms-impressum .sidebar-additional { display: none !important; }

/* Lese-Container: ruhiges Mass, zentriert */
body.cms-impressum .impressum {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--imp-body);
    font-size: 15px !important;
    line-height: 1.72;
}

/* Kopf */
body.cms-impressum .impressum__head {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--imp-line);
}
body.cms-impressum .impressum__head h1 {
    margin: 0 0 .4rem !important;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--imp-ink) !important;
    text-transform: none !important;
    text-wrap: balance;
}
body.cms-impressum .impressum__sub {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--imp-muted) !important;
}

/* Sektionen */
body.cms-impressum .impressum__section { margin-top: clamp(2rem, 4.5vw, 3rem); }
body.cms-impressum .impressum__section h2 {
    margin: 0 0 1.1rem !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--imp-ink) !important;
    text-transform: none !important;
}
body.cms-impressum .impressum__section > p {
    margin: 0;
    max-width: 68ch;
    color: var(--imp-body);
}

/* Label/Wert-Faktenliste (scanbar statt p+br) */
body.cms-impressum .impressum__facts { margin: 0; }
body.cms-impressum .impressum__facts .fact {
    display: grid;
    grid-template-columns: minmax(180px, 230px) 1fr;
    gap: .3rem 2rem;
    padding: .85rem 0;
    border-top: 1px solid var(--imp-line);
}
body.cms-impressum .impressum__facts .fact:last-child { border-bottom: 1px solid var(--imp-line); }
body.cms-impressum .impressum__facts dt {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--imp-muted);
}
body.cms-impressum .impressum__facts dd {
    margin: 0;
    color: var(--imp-body);
}

/* Identitaetsblock: EIN ruhiges Panel (Pflichtangaben hervorgehoben) */
body.cms-impressum .impressum__identity {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--imp-tint);
    border: 1px solid var(--imp-tint-line);
    border-radius: 8px;
    padding: .25rem clamp(1.1rem, 3vw, 1.75rem) 1.1rem;
}
body.cms-impressum .impressum__identity .fact { border-top-color: color-mix(in srgb, var(--theme-color) 14%, var(--imp-line)); }
body.cms-impressum .impressum__identity .fact:first-child { border-top: 0; }
body.cms-impressum .impressum__identity .fact:last-child { border-bottom: 0; }

/* Links: Marken-Grün + Unterstrich-Affordance (nicht nur Farbe) */
body.cms-impressum .impressum a {
    color: var(--theme-color);
    font-weight: 500;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    transition: color .18s ease, text-decoration-color .18s ease;
}
body.cms-impressum .impressum a:hover { text-decoration-color: var(--theme-color); }

/* Bio-Zertifikat: sekundaerer Outline-Button */
body.cms-impressum .impressum__btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.15rem;
    padding: .7rem 1.15rem;
    border: 1.5px solid var(--theme-color);
    border-radius: 8px;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: var(--theme-color) !important;
    background: #fff;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.cms-impressum .impressum__btn:hover {
    background: var(--theme-color);
    color: #fff !important;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--theme-color) 70%, transparent);
}
body.cms-impressum .impressum__btn-meta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .12rem .42rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--theme-color) 14%, #fff);
    color: var(--theme-color);
}
body.cms-impressum .impressum__btn:hover .impressum__btn-meta { background: rgba(255,255,255,.22); color: #fff; }

/* Bildnachweis: Feinabdruck als Liste */
body.cms-impressum .impressum__credits ul { margin: 0; padding: 0; list-style: none; }
body.cms-impressum .impressum__credits li {
    padding: .5rem 0;
    border-top: 1px solid var(--imp-line);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--imp-muted);
}

/* Mobil: Label ueber Wert stapeln, Button voll */
@media (max-width: 600px) {
    body.cms-impressum .impressum__facts .fact {
        grid-template-columns: 1fr;
        gap: .15rem;
        padding: .8rem 0;
    }
    body.cms-impressum .impressum__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    body.cms-impressum .impressum a,
    body.cms-impressum .impressum__btn { transition: none; }
}

/* ============================================================
   Buy-Box: Menge ÜBER dem Button, "In den Warenkorb" volle Breite.
   Single an Grouped angeglichen -> maximale CTA-Prominenz + Mobil-Tap-Target.
   Scope .box-tocart: stapelt bei Simple qty+actions (Grouped hat qty=#quelle
   ausserhalb -> nur der CTA wird voll breit). qty-Stepper bleibt links/kompakt.
   ============================================================ */
.product-add-form .box-tocart .fieldset {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
}
.product-add-form .box-tocart .actions {
    width: 100% !important;
    display: block !important;
}
.product-add-form .box-tocart .action.tocart {
    width: 100% !important;
}

/* ========================================
   RECHTSSEITEN  (body.cms-agb / cms-datenschutz / cms-widerruf)
   Lange, extern gepflegte Rechtstexte (Haendlerbund-Format, nummerierte
   Abschnitte) -> "Rechnungsrueckseiten"-Look: zweispaltig gesetzt am Desktop
   (column-rule wie ein gesetzter Druck), einspaltig + linksbuendig am Handy.
   NUR CSS (Content extern gepflegt, kein Rewrite). Impressum-Tokens geerbt.
======================================== */
body.cms-agb,
body.cms-datenschutz,
body.cms-widerruf {
    --lg-ink: #21262b;
    --lg-body: #2f2f2f;   /* 12.6:1 auch bei 14px */
    --lg-muted: #586069;
    --lg-line: #dfe2e4;
}

/* Tote linke Spalte killen, volle Breite fuer den Satz */
body.cms-agb .sidebar-main, body.cms-agb .sidebar-additional,
body.cms-datenschutz .sidebar-main, body.cms-datenschutz .sidebar-additional,
body.cms-widerruf .sidebar-main, body.cms-widerruf .sidebar-additional { display: none !important; }

/* Verwaister Magento-Seitentitel ausblenden (echte Ueberschrift = Content-H1;
   nur Datenschutz zeigt ihn redundant ueber der H1) */
body.cms-agb .page-title-wrapper,
body.cms-datenschutz .page-title-wrapper,
body.cms-widerruf .page-title-wrapper { display: none !important; }

body.cms-agb .column.main,
body.cms-datenschutz .column.main,
body.cms-widerruf .column.main {
    width: 100% !important;
    float: none !important;
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.25rem);
    color: var(--lg-body);
    font-size: 14px;
    line-height: 1.62;
}

/* Typo-Hierarchie (gilt ein- wie zweispaltig) */
body.cms-agb .column.main h1,
body.cms-datenschutz .column.main h1,
body.cms-widerruf .column.main h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--lg-ink) !important;
    text-transform: none !important;
    text-align: left;
    margin: 0 0 .25rem !important;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--lg-line);
}
body.cms-agb .column.main h2,
body.cms-datenschutz .column.main h2,
body.cms-widerruf .column.main h2 {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--lg-ink) !important;
    text-transform: none !important;
    margin: 1.5rem 0 .5rem !important;
    break-after: avoid;
    -webkit-column-break-after: avoid;
}
body.cms-agb .column.main h3,
body.cms-datenschutz .column.main h3,
body.cms-widerruf .column.main h3 {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--lg-ink) !important;
    text-transform: none !important;
    margin: 1.1rem 0 .35rem !important;
    break-after: avoid;
    -webkit-column-break-after: avoid;
}
body.cms-agb .column.main p,
body.cms-datenschutz .column.main p,
body.cms-widerruf .column.main p { margin: 0 0 .7rem; }
body.cms-agb .column.main ul, body.cms-agb .column.main ol,
body.cms-datenschutz .column.main ul, body.cms-datenschutz .column.main ol,
body.cms-widerruf .column.main ul, body.cms-widerruf .column.main ol {
    margin: 0 0 .85rem; padding-left: 1.35rem;
}
body.cms-agb .column.main li,
body.cms-datenschutz .column.main li,
body.cms-widerruf .column.main li { margin: 0 0 .3rem; line-height: 1.55; }
body.cms-agb .column.main a,
body.cms-datenschutz .column.main a,
body.cms-widerruf .column.main a {
    color: var(--theme-color);
    text-underline-offset: 2px;
    word-break: break-word;
}

/* Zweispaltiger "Rechnungsrueckseiten"-Satz ab Desktop */
@media (min-width: 992px) {
    body.cms-agb .column.main,
    body.cms-datenschutz .column.main,
    body.cms-widerruf .column.main {
        columns: 2;
        column-gap: 3rem;
        column-rule: 1px solid var(--lg-line);
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    /* h1 spannt beide Spalten (Dokumentkopf) */
    body.cms-agb .column.main > h1,
    body.cms-datenschutz .column.main > h1,
    body.cms-widerruf .column.main > h1 {
        column-span: all;
        -webkit-column-span: all;
        margin-bottom: 1.25rem !important;
        text-align: left;
    }
    /* Absaetze/Listen nicht ueber den Spaltenumbruch zerreissen */
    body.cms-agb .column.main p, body.cms-agb .column.main li,
    body.cms-datenschutz .column.main p, body.cms-datenschutz .column.main li,
    body.cms-widerruf .column.main p, body.cms-widerruf .column.main li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}

/* Handy: eine Spalte, linksbuendig (Mehrspalten brechen hier unleserlich) */
@media (max-width: 991px) {
    body.cms-agb .column.main,
    body.cms-datenschutz .column.main,
    body.cms-widerruf .column.main {
        columns: 1 !important;
        column-rule: none !important;
        text-align: left !important;
        font-size: 15px;
        line-height: 1.7;
    }
}

/* ========================================
   UEBER UNS  (body.cms-ueber-uns)
   Gruender-Geschichte (Brueder Michaelis, seit 2010) -> editoriales,
   ruhiges Marken-Treatment statt nackter Textwand im 3-Spalten-Layout.
   Lead-Standfirst + gruene Initiale, Kapitel-Rhythmus. NUR CSS, kein
   Fake-Foto (CSP blockt extern, keine echten Gruenderfotos vorhanden).
   Impressum-Tokens geerbt.
======================================== */
body.cms-ueber-uns {
    --ub-ink: #21262b;
    --ub-body: #2f2f2f;   /* 12.6:1 */
    --ub-lead: #3c4248;   /* Standfirst, ~9:1 */
    --ub-line: #e7e9ea;
}

/* Tote Spalten des 3-Spalten-Layouts killen */
body.cms-ueber-uns .sidebar-main,
body.cms-ueber-uns .sidebar-additional { display: none !important; }

body.cms-ueber-uns .column.main {
    width: 100% !important;
    float: none !important;
    display: block !important;   /* Porto setzt im 3-Spalten-Layout inline-block -> margin:auto zentriert nur Block */
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--ub-body);
    font-size: 16px;
    line-height: 1.75;
}

body.cms-ueber-uns .column.main h1 {
    font-size: clamp(2rem, 5vw, 2.9rem) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--ub-ink) !important;
    text-transform: none !important;
    text-align: left;
    margin: 0 0 1.2rem !important;
    padding-bottom: 1.05rem;
    border-bottom: 1px solid var(--ub-line);
    text-wrap: balance;
}

/* Lead = erster Absatz (Standfirst) + gruene Initiale */
body.cms-ueber-uns .column.main > p:first-of-type {
    font-size: 1.18rem;
    line-height: 1.62;
    color: var(--ub-lead);
    margin-bottom: 2rem;
}
body.cms-ueber-uns .column.main > p:first-of-type::first-letter {
    float: left;
    font-size: 3.05rem;
    line-height: 0.84;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0.06em 0.12em 0 0;
}

/* Kapitel-Ueberschriften */
body.cms-ueber-uns .column.main h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--ub-ink) !important;
    text-transform: none !important;
    margin: clamp(2.25rem, 4vw, 3rem) 0 0.85rem !important;
    text-wrap: balance;
}

body.cms-ueber-uns .column.main p { margin: 0 0 1.15rem; }
body.cms-ueber-uns .column.main a {
    color: var(--theme-color);
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    transition: text-decoration-color .18s ease;
}
body.cms-ueber-uns .column.main a:hover { text-decoration-color: var(--theme-color); }

@media (max-width: 600px) {
    body.cms-ueber-uns .column.main { font-size: 15.5px; }
    body.cms-ueber-uns .column.main > p:first-of-type { font-size: 1.08rem; }
    body.cms-ueber-uns .column.main > p:first-of-type::first-letter { font-size: 2.7rem; }
}

/* ========================================
   ZAHLUNG  (body.cms-zahlung / .zahlung)
   Float-Layout (inline-style-Logos, <br><br>) -> ruhige, scanbare
   Media-Object-Zeilen (Logo links, Name/Text rechts, Haarlinien-Trenner).
   Markup + page_layout=1column + content_heading='' kommen aus
   apply-zahlung-content.php (Phase 7d4). Token-Vokabular vom Impressum geerbt.
======================================== */
body.cms-zahlung {
    --zl-ink: #21262b;   /* Ueberschriften */
    --zl-body: #2f2f2f;  /* Fliesstext (~12.6:1) */
    --zl-muted: #586069; /* Sub/Feinabdruck */
    --zl-line: #e7e9ea;  /* Hairlines */
}

/* Tote linke Spalte killen + verwaisten Magento-Titel ausblenden (Content bringt eigenes h1) */
body.cms-zahlung .column.main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
}
body.cms-zahlung .sidebar-main,
body.cms-zahlung .sidebar-additional { display: none !important; }
body.cms-zahlung .page-title-wrapper { display: none !important; }

/* Lese-Container */
body.cms-zahlung .zahlung {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--zl-body);
    font-size: 15px !important;
    line-height: 1.72;
}

/* Kopf */
body.cms-zahlung .zahlung__head {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--zl-line);
}
body.cms-zahlung .zahlung__head h1 {
    margin: 0 0 .4rem !important;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--zl-ink) !important;
    text-transform: none !important;
    text-wrap: balance;
}
body.cms-zahlung .zahlung__sub {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--zl-muted) !important;
}
body.cms-zahlung .zahlung__lead {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0 !important;
    max-width: 64ch;
    color: var(--zl-body);
}

/* Methodenliste: Media-Object-Zeilen */
body.cms-zahlung .zahlung__methods {
    list-style: none;
    margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
    padding: 0;
}
body.cms-zahlung .pay {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
    padding: clamp(1.25rem, 3vw, 1.75rem) 0;
    border-top: 1px solid var(--zl-line);
}
body.cms-zahlung .pay:last-child { border-bottom: 1px solid var(--zl-line); }
body.cms-zahlung .pay__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
}
body.cms-zahlung .pay__logo img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
}
body.cms-zahlung .pay__name {
    margin: 0 0 .5rem !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--zl-ink) !important;
    text-transform: none !important;
}
body.cms-zahlung .pay__body p {
    margin: 0;
    color: var(--zl-body);
    max-width: 60ch;
}

/* Mobil: Logo ueber Text stapeln */
@media (max-width: 600px) {
    body.cms-zahlung .pay {
        grid-template-columns: 1fr;
        gap: .85rem;
        padding: 1.35rem 0;
    }
}

/* ========================================
   LIEFERUNG  (body.cms-lieferung / .lieferung)
   <table>-in-<p> + inline-styles + Flaggen-<br>-Listen -> echte <table>
   (thead/tbody), gruener Tabellenkopf, Gratisversand-Zellen gruen, Flaggen-
   Laenderlisten als <ul>. Markup/Layout aus apply-lieferung-content.php (7d5).
======================================== */
body.cms-lieferung {
    --lf-ink: #21262b;
    --lf-body: #2f2f2f;
    --lf-muted: #586069;
    --lf-line: #e7e9ea;
    --lf-head: color-mix(in srgb, var(--theme-color) 78%, black); /* dunkleres Gruen -> Weiss >= 4.5:1 (verifiziert) */
    --lf-free: color-mix(in srgb, var(--theme-color) 78%, black); /* gruener Text, kontraststark */
    --lf-tint: color-mix(in srgb, var(--theme-color) 7%, #fff);
    --lf-tint-line: color-mix(in srgb, var(--theme-color) 28%, var(--lf-line));
}

body.cms-lieferung .column.main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
}
body.cms-lieferung .sidebar-main,
body.cms-lieferung .sidebar-additional { display: none !important; }
body.cms-lieferung .page-title-wrapper { display: none !important; }

body.cms-lieferung .lieferung {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--lf-body);
    font-size: 15px !important;
    line-height: 1.7;
}

/* Kopf */
body.cms-lieferung .lieferung__head {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--lf-line);
}
body.cms-lieferung .lieferung__head h1 {
    margin: 0 0 .4rem !important;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--lf-ink) !important;
    text-transform: none !important;
    text-wrap: balance;
}
body.cms-lieferung .lieferung__sub {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--lf-muted) !important;
}

/* Intro: DHL-Logo + Satz */
body.cms-lieferung .lieferung__intro {
    display: flex;
    align-items: center;
    gap: clamp(.85rem, 2.5vw, 1.5rem);
    flex-wrap: wrap;
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
body.cms-lieferung .lieferung__dhl {
    width: auto;
    max-height: 52px;
    flex: none;
}
body.cms-lieferung .lieferung__intro p { margin: 0; max-width: 56ch; }

/* Gratisversand-Hervorhebung (Schluesselargument) */
body.cms-lieferung .lieferung__free {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0 !important;
    padding: .85rem 1.15rem;
    background: var(--lf-tint);
    border: 1px solid var(--lf-tint-line);
    border-radius: 8px;
    font-weight: 600;
    color: var(--lf-free);
}
body.cms-lieferung .lieferung__free::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-color);
    /* weisser Haken */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

/* Sektionen */
body.cms-lieferung .lieferung__section { margin-top: clamp(2rem, 4.5vw, 3rem); }
body.cms-lieferung .lieferung__section h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.1rem !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--lf-ink) !important;
    text-transform: none !important;
}
body.cms-lieferung .lieferung__section h2 .flag { width: 26px; }
body.cms-lieferung .lieferung__section > p {
    margin: 0 0 1rem;
    max-width: 72ch;
    color: var(--lf-body);
}

/* Tabellen */
body.cms-lieferung .ship-table-wrap {
    border: 1px solid var(--lf-line);
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}
body.cms-lieferung .ship-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
body.cms-lieferung .ship-table--ausland { min-width: 540px; }
body.cms-lieferung .ship-table thead th {
    background: var(--lf-head);
    color: #fff;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .015em;
    line-height: 1.35;
    padding: .8rem 1rem;
    vertical-align: bottom;
}
body.cms-lieferung .ship-table tbody th,
body.cms-lieferung .ship-table tbody td {
    padding: .9rem 1rem;
    border-top: 1px solid var(--lf-line);
    vertical-align: top;
    text-align: left;
    color: var(--lf-body);
}
body.cms-lieferung .ship-table tbody tr:first-child th,
body.cms-lieferung .ship-table tbody tr:first-child td { border-top: 0; }
/* Wert-Spalten zentriert; Beschreibung links */
body.cms-lieferung .ship-table th:not(:first-child),
body.cms-lieferung .ship-table td:not(:first-child) { text-align: center; }
body.cms-lieferung .ship-table .ship-table__country { font-weight: 600; color: var(--lf-ink); white-space: nowrap; }
body.cms-lieferung .ship-table td.is-free {
    color: var(--lf-free);
    font-weight: 700;
    white-space: nowrap;
}
body.cms-lieferung .ship-table .ship-table__days {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--lf-ink);
}
body.cms-lieferung .ship-table--times td:first-child { line-height: 1.6; }

/* Flaggen-Laenderliste in der Auslandstabelle */
body.cms-lieferung .ship-table__countries .ctry {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
body.cms-lieferung .ctry li {
    display: flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
}
body.cms-lieferung .flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.10);
    flex: none;
}

/* Hinweise */
body.cms-lieferung .lieferung__note {
    margin: .9rem 0 0;
    font-size: .9rem;
    color: var(--lf-muted);
    max-width: 72ch;
}
body.cms-lieferung .lieferung__hint {
    margin: .65rem 0 0;
    font-weight: 600;
    color: var(--lf-ink);
}

/* Links: Marken-Gruen mit Unterstrich-Affordance (wie Impressum) */
body.cms-lieferung .lieferung a {
    color: var(--theme-color);
    font-weight: 500;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    transition: color .18s ease, text-decoration-color .18s ease;
}
body.cms-lieferung .lieferung a:hover { text-decoration-color: var(--theme-color); }

@media (max-width: 600px) {
    body.cms-lieferung .ship-table { font-size: .9rem; }
    body.cms-lieferung .ship-table thead th,
    body.cms-lieferung .ship-table tbody th,
    body.cms-lieferung .ship-table tbody td { padding: .7rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.cms-lieferung .lieferung a { transition: none; }
}

/* ========================================
   WIDERRUF  (body.cms-widerruf)
   Formular-tragende Seite -> NICHT in den schmalen, justierten 2-Spalten-Satz
   (dort brachen die Muster-Widerrufsformular-Unterstriche um und das Layout
   zerfiel). Stattdessen voll ausgebreitet + einspaltig + linksbuendig: die
   ___-Laeufe passen so in eine Zeile. Bewusst rein CSS (kein Seiten-JS).
======================================== */
body.cms-widerruf .column.main {
    columns: 1 !important;
    column-rule: none !important;
    text-align: left !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    max-width: 1180px;
}

/* ========================================
   KONTAKTSEITE  (body.contact-index-index)
   Funktionale Flaeche, kein Brand-Hero: Intro + Kontaktformular, einspaltig.
   Google-Map entfernt (porto_settings/contacts/enable=0). Marken-Akzent grun
   (var(--theme-color)) traegt die Wertigkeit, keine Fotografie noetig.
   Submit = Shop-CTA-Grun (kein Orange/keine Versalien).
======================================== */
body.contact-index-index .om-contact {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 16px;
}

/* Seitentitel-H1 (global ausgeblendet) hier gezielt als Intro-Heading zeigen */
body.contact-index-index .page-title-wrapper {
    display: block !important;
    margin: 0 auto 6px;
    max-width: 680px;
}
body.contact-index-index .page-title-wrapper .page-title {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: #2f2f2f;
    text-transform: none;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

body.contact-index-index .om-contact__lead {
    max-width: 60ch;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.65;
    color: #4a4a4a;
    text-wrap: pretty;
}

/* ---- Formular (einspaltig, schmale lesbare Spalte via .om-contact) ---- */
body.contact-index-index .form.contact {
    width: 100%;
    min-width: 0;
}
body.contact-index-index .form.contact .fieldset {
    margin: 0;
}
body.contact-index-index .form.contact .legend {
    width: 100%;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 19px;
    font-weight: 700;
    color: #2f2f2f;
    text-transform: none;
}
body.contact-index-index .form.contact .legend span { border: 0; }

body.contact-index-index .form.contact .field {
    margin: 0 0 16px;
}
body.contact-index-index .form.contact .field > .label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #3a3a3a;
    text-align: left;
    float: none;
    width: auto;
    padding: 0;
}
body.contact-index-index .form.contact .field .om-optional {
    font-weight: 400;
    color: #8a8a8a;
}
/* Pflichtfeld-Stern liefert das Basis-Theme bereits auf .label::after
   (NICHT verdoppeln). Hier nur markenkonform gruen statt Default-Rot. */
body.contact-index-index .form.contact .field.required > .label:after,
body.contact-index-index .form.contact .field._required > .label:after {
    color: var(--theme-color) !important;
}
/* Erklaerung zum Stern, oben im Formular */
body.contact-index-index .form.contact .om-required-hint {
    margin: 0 0 20px;
    font-size: 13px;
    color: #6a6a6a;
}
body.contact-index-index .form.contact .om-required-hint .om-req-star {
    color: var(--theme-color);
    font-weight: 700;
}
body.contact-index-index .form.contact .control {
    width: 100%;
}
body.contact-index-index .form.contact .input-text,
body.contact-index-index .form.contact textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d6d6d6 !important;
    border-radius: 9px !important;
    background: #fff;
    font-size: 15px;
    color: #2f2f2f;
    box-shadow: none;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
body.contact-index-index .form.contact textarea {
    min-height: 168px;
    resize: vertical;
    line-height: 1.55;
}
body.contact-index-index .form.contact .input-text::placeholder,
body.contact-index-index .form.contact textarea::placeholder {
    color: #8a8a8a;
}
body.contact-index-index .form.contact .input-text:focus,
body.contact-index-index .form.contact textarea:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 22%, transparent) !important;
    outline: none;
}

/* ---- Submit: Shop-CTA-Grun, kein Orange, keine Versalien ---- */
body.contact-index-index .form.contact .actions-toolbar {
    margin: 22px 0 0;
    padding: 0;
}
body.contact-index-index .form.contact .actions-toolbar .primary {
    float: none;
}
body.contact-index-index .form.contact button.action.submit.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--theme-color) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-transform: none !important;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 150ms ease-out, transform 120ms ease-out;
}
body.contact-index-index .form.contact button.action.submit.primary:hover {
    background: color-mix(in srgb, var(--theme-color) 86%, #000) !important;
}
body.contact-index-index .form.contact button.action.submit.primary:active {
    transform: translateY(1px);
}
body.contact-index-index .form.contact button.action.submit.primary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #000);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.contact-index-index .form.contact .input-text,
    body.contact-index-index .form.contact textarea,
    body.contact-index-index .form.contact button.action.submit.primary {
        transition: none;
    }
}

/* ========================================
   TEEZUBEREITUNG  (body.cms-teezubereitung / #teezubereitung)
   Langer 7-Kapitel-Ratgeber -> ruhiges, editoriales Long-Read-Treatment
   statt Blocksatz-Textwand im 3-Spalten-Layout. Eine visuelle Sprache mit
   ueber-uns (zentrierte Lesespalte, Lead+gruene Initiale), erweitert um ein
   echtes Kapitel-Register (TOC), Figuren und eine gruen-koepfige Datentabelle.
   NUR CSS. Spezifitaet: Alt-Content hat #teezubereitung (ID=100) + img-inline
   style="float:left" (=1000) -> ALLE Overrides brauchen !important.
   Tokens vom ueber-uns/Impressum geerbt.
======================================== */
body.cms-teezubereitung {
    --tz-ink: #21262b;     /* Ueberschriften */
    --tz-body: #2f2f2f;    /* Fliesstext (~12.6:1) */
    --tz-lead: #3c4248;    /* Lead/Standfirst (~9:1) */
    --tz-muted: #586069;   /* Sub/Bildhinweise */
    --tz-line: #e7e9ea;    /* Hairlines */
    --tz-line-2: #d8dcdf;  /* kraeftigere Linie */
    --tz-tint: #f3f8f6;    /* gruen getoenter Surface (Brand-Hue, nicht warm) */
    --tz-link: #0e7560;    /* dunkleres Grun fuer Inline-Body-Links (~5:1) */
}

/* Tote Spalten des 3-Spalten-Layouts killen, Lesespalte zentrieren.
   h1.page-title BLEIBT (sie IST die Schlagzeile; Content hat kein eigenes h1). */
body.cms-teezubereitung .sidebar-main,
body.cms-teezubereitung .sidebar-additional { display: none !important; }

body.cms-teezubereitung .column.main {
    width: 100% !important;
    float: none !important;
    display: block !important;   /* 3-Spalten-Layout setzt inline-block -> margin:auto greift nur auf block */
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1rem, 2.5vw, 1.6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* --- Schlagzeile (page-title-wrapper liegt AUSSERHALB .column.main, direkt
   unter MAIN.page-main -> selbe 760px-Lesebreite zentrieren, damit Headline
   und Artikel buendig sind) ------------------------------------------------ */
body.cms-teezubereitung .page-title-wrapper {
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(1.25rem, 3.5vw, 2.75rem);
}
body.cms-teezubereitung .page-title-wrapper .page-title {
    position: relative;
    display: block !important;
    font-size: clamp(1.85rem, 3.8vw, 2.55rem) !important;
    line-height: 1.14 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--tz-line);
    text-wrap: balance;
}
body.cms-teezubereitung .page-title-wrapper .page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--theme-color);
    border-radius: 3px;
}

/* --- Lesecontainer ----------------------------------------------------- */
body.cms-teezubereitung #teezubereitung {
    text-align: left !important;   /* Alt-Inline-Style: #teezubereitung{text-align:justify} */
    color: var(--tz-body);
    font-size: 16px;
    line-height: 1.78;
}
body.cms-teezubereitung #teezubereitung::after {
    content: "";
    display: table;
    clear: both;   /* gefloatete Figuren am Ende einfangen */
}
body.cms-teezubereitung #teezubereitung p {
    text-align: left !important;
    margin: 0 0 1.2rem;
    max-width: none;   /* volle Spaltenbreite (860px) -> buendig mit Headline/TOC/Tabelle */
    color: var(--tz-body);
}
body.cms-teezubereitung #teezubereitung strong { color: var(--tz-ink); font-weight: 700; }

/* Lead = erster Absatz (Standfirst) + gruene Initiale */
body.cms-teezubereitung #teezubereitung > p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--tz-lead);
    margin-bottom: 1.4rem;
    max-width: none;   /* Lead ebenfalls volle Spaltenbreite */
}
body.cms-teezubereitung #teezubereitung > p:first-of-type::first-letter {
    float: left;
    font-size: 3.1rem;
    line-height: 0.82;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0.06em 0.14em 0 0;
}

/* --- Kapitel-Register --------------------------------------------------- */
/* Legacy-Markup ist verschachtelt: <ol> > <h4> > <li> > <a>. Jede Registerzeile
   ist ein <h4> (NICHT <li>). Generische h4-Stile hier zuruecksetzen. */
body.cms-teezubereitung #teezubereitung > ol {
    counter-reset: tzc;
    list-style: none !important;
    margin: 2.25rem 0 0.5rem !important;
    padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.9rem) clamp(0.6rem, 1.5vw, 0.9rem) !important;
    background: var(--tz-tint);
    border: 1px solid var(--tz-line);
    border-radius: 10px;
    max-width: none;
}
body.cms-teezubereitung #teezubereitung > ol::before {
    content: "Auf dieser Seite";
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tz-muted);
    margin: 0 0 0.4rem;
}
body.cms-teezubereitung #teezubereitung > ol > h4 {
    counter-increment: tzc;
    position: relative;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-top: 1px solid var(--tz-line);
}
body.cms-teezubereitung #teezubereitung > ol > h4:first-of-type { border-top: 0; }
body.cms-teezubereitung #teezubereitung > ol > h4 > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a {
    position: relative;   /* Bezugsrahmen fuer Nummer + Chevron -> liegen ueber dem Hover-Bg und wandern mit */
    display: block;
    padding: 0.7rem 2rem 0.7rem 2.4rem;
    color: var(--tz-ink) !important;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none !important;
    border-radius: 7px;
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease;
}
/* Kapitelnummer als a::before (counter-increment bleibt auf dem h4) */
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a::before {
    content: counter(tzc);
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--theme-color);
    text-align: left;
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a::after {
    content: "\203A";   /* › */
    position: absolute;
    right: 0.7rem;
    top: 0.62rem;
    color: var(--tz-line-2);
    font-size: 1.1rem;
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover {
    color: var(--theme-color) !important;
    background: #fff;
    transform: translateX(4px);
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover::after {
    color: var(--theme-color);
    transform: translateX(3px);
}

/* --- Kapitel-Ueberschriften (h2.anker traegt schon padding-top:45px = Sticky-
   Header-Scroll-Offset; NICHT verdoppeln, nur margin fuer Rhythmus) --------- */
body.cms-teezubereitung #teezubereitung h2 {
    clear: both !important;   /* gefloatete Figuren des Vorkapitels nicht ueberlaufen lassen */
    font-size: clamp(1.4rem, 2.9vw, 1.85rem) !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem !important;
    max-width: 30ch;
    text-wrap: balance;
}

/* Unterabschnitte (Teekannen-Typen in Kap. 3) */
body.cms-teezubereitung #teezubereitung h4 {
    clear: both !important;
    font-size: clamp(1.08rem, 2vw, 1.22rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(1.75rem, 3.5vw, 2.4rem) 0 0.7rem !important;
}

/* --- Inline-Links im Fliesstext (viele Auto-Produktlinks: Ceylon, Assam ...) */
body.cms-teezubereitung #teezubereitung p a {
    color: var(--tz-link) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--tz-link) 40%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
body.cms-teezubereitung #teezubereitung p a:hover {
    color: var(--theme-color) !important;
    text-decoration-color: var(--theme-color);
}

/* --- Figuren (Alt-Bilder mit inline float:left + fixen w/h) ---------------- */
body.cms-teezubereitung #teezubereitung img {
    float: left !important;
    margin: 0.4rem 1.6rem 1.1rem 0 !important;
    max-width: 45% !important;
    height: auto !important;
    background: #fff;
    border: 1px solid var(--tz-line);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 12px rgba(33, 38, 43, 0.06);
}

/* --- Datentabelle (Mineralwasser, 10 Spalten) ----------------------------- */
body.cms-teezubereitung #teezubereitung .tg {
    clear: both !important;
    width: 100% !important;
    margin: 1.5rem 0 1.75rem !important;
    border-collapse: collapse !important;
    border: 1px solid var(--tz-line) !important;
    font-size: 0.86rem;
    border-radius: 10px;
    overflow: hidden;
}
body.cms-teezubereitung #teezubereitung .tg td,
body.cms-teezubereitung #teezubereitung .tg th {
    border: 1px solid var(--tz-line) !important;
    padding: 9px 11px !important;
    color: var(--tz-body) !important;
    background: #fff !important;
    text-align: center;
    vertical-align: middle;
    word-break: normal;
}
/* Caption-Kopfzeile gruen */
body.cms-teezubereitung #teezubereitung .tg .tg-hgcj {
    background: var(--theme-color) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-align: center !important;   /* sonst greift tr th:first-child -> linksbuendig */
    text-decoration: none !important;
    font-style: normal !important;
    padding: 11px !important;
}
/* Gruppen- und Spaltenkoepfe: getoentes Label-Band, sauber (Underline raus) */
body.cms-teezubereitung #teezubereitung .tg .tg-jxnb,
body.cms-teezubereitung #teezubereitung .tg .tg-ic7p,
body.cms-teezubereitung #teezubereitung .tg .tg-c9cr {
    background: var(--tz-tint) !important;
    color: var(--tz-ink) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-decoration: none !important;
}
/* Erste Spalte der DATENzeilen (Markenname) linksbuendig + betont.
   Nur td.tg-031e -> die gruene Caption (.tg-hgcj) behaelt weiss/zentriert. */
body.cms-teezubereitung #teezubereitung .tg td.tg-031e:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--tz-ink) !important;
}
/* Zeilen-Hover zum Scannen */
body.cms-teezubereitung #teezubereitung .tg tr:hover td { background: var(--tz-tint) !important; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 768px) {
    body.cms-teezubereitung #teezubereitung .tg {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
}
@media (max-width: 600px) {
    body.cms-teezubereitung #teezubereitung { font-size: 15.5px; }
    body.cms-teezubereitung #teezubereitung > p:first-of-type { font-size: 1.1rem; }
    body.cms-teezubereitung #teezubereitung > p:first-of-type::first-letter { font-size: 2.7rem; }
    /* Figuren nicht mehr floaten -> volle, zentrierte Breite */
    body.cms-teezubereitung #teezubereitung img {
        float: none !important;
        display: block;
        margin: 1rem auto 1.4rem !important;
        max-width: 100% !important;
    }
    body.cms-teezubereitung #teezubereitung h2 { max-width: none; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a,
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a::after,
    body.cms-teezubereitung #teezubereitung p a {
        transition: none !important;
    }
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover,
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover::after {
        transform: none !important;
    }
}

/* ========================================
   BIO TEE  (body.cms-bio-tee)
   SEO-Ratgeber-/Kategorie-Landingtext -> selbe editoriale Sprache wie
   teezubereitung/ueber-uns, damit sich die Seite in den Shop einfuegt:
   leere 2-Spalten-Gutter killen, zentrierte Lesespalte, Lead + gruene
   Initiale. Erweitert um ein scanbares Sorten-Register (die 8 Bio-
   Unterkategorie-Links) im Megamenue-/Sidebar-Interaktionsmuster des Shops
   (›-Chevron, translateX(4px), Grun) + CSS-Teeblatt als markentreue Marke.
   NUR CSS. Content = DIREKTE Kinder von .column.main (kein #wrapper) -> ueber
   > p / > h2 / > h3 / > ul selektieren (trifft das versteckte
   #authenticationPopup im DIV-Kind NICHT). Gutter kommt aus
   .column.main{float:right;width:75%} -> float:none + width:100% reclaimt ihn.
   Tokens gespiegelt von teezubereitung; --theme-color = Shop-Akzent.
======================================== */
body.cms-bio-tee {
    --bt-ink: #21262b;     /* Ueberschriften */
    --bt-body: #2f2f2f;    /* Fliesstext (~12.6:1) */
    --bt-lead: #3c4248;    /* Lead/Standfirst (~9:1) */
    --bt-muted: #586069;   /* Sub */
    --bt-line: #e7e9ea;    /* Hairlines */
    --bt-line-2: #d8dcdf;  /* kraeftigere Linie */
    --bt-tint: #f3f8f6;    /* gruen getoenter Surface (Brand-Hue) */
    --bt-link: #0e7560;    /* dunkleres Grun fuer Inline-Body-Links (~5:1) */
}

/* Tote Spalte killen + Lesespalte zentrieren. Sidebar existiert hier nicht
   (no-op, defensiv); der leere Gutter ist Float-Raum von .column.main. */
body.cms-bio-tee .sidebar-main,
body.cms-bio-tee .sidebar-additional { display: none !important; }

body.cms-bio-tee .column.main {
    width: 100% !important;
    float: none !important;
    display: block !important;
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1rem, 2.5vw, 1.6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--bt-body);
    font-size: 16px;
    line-height: 1.78;
}
/* leere CMS-Absaetze (zwischen H3 und UL, am Seitenende) raus */
body.cms-bio-tee .column.main > p:empty { display: none !important; }

/* --- Schlagzeile (page-title-wrapper liegt AUSSERHALB .column.main, direkt
   unter MAIN.page-main -> selbe 860px-Lesebreite zentrieren) -------------- */
body.cms-bio-tee .page-title-wrapper {
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(1.25rem, 3.5vw, 2.75rem);
}
body.cms-bio-tee .page-title-wrapper .page-title {
    position: relative;
    display: block !important;
    font-size: clamp(1.85rem, 3.8vw, 2.55rem) !important;
    line-height: 1.14 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--bt-ink) !important;       /* war #179c80 Link-Grun (~2.9:1) */
    text-transform: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--bt-line);
    text-wrap: balance;
}
body.cms-bio-tee .page-title-wrapper .page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--theme-color);
    border-radius: 3px;
}

/* --- Fliesstext --------------------------------------------------------- */
body.cms-bio-tee .column.main > p {
    text-align: left;
    margin: 0 0 1.2rem;
    max-width: 72ch;
    color: var(--bt-body);
}
body.cms-bio-tee .column.main > p strong,
body.cms-bio-tee .column.main > p b { color: var(--bt-ink); font-weight: 700; }

/* Lead = erster Absatz (Standfirst) + gruene Initiale */
body.cms-bio-tee .column.main > p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--bt-lead);
    margin-bottom: 1.5rem;
    max-width: 64ch;
}
body.cms-bio-tee .column.main > p:first-of-type::first-letter {
    float: left;
    font-size: 3.1rem;
    line-height: 0.82;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0.06em 0.14em 0 0;
}

/* --- Inline-Links im Fliesstext (Gruener Tee Bio, Bio Schwarztee) -------- */
body.cms-bio-tee .column.main > p a {
    color: var(--bt-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--bt-link) 40%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
body.cms-bio-tee .column.main > p a:hover {
    color: var(--theme-color);
    text-decoration-color: var(--theme-color);
}

/* --- Zwischenueberschrift ----------------------------------------------- */
body.cms-bio-tee .column.main > h2 {
    font-size: clamp(1.4rem, 2.9vw, 1.85rem) !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--bt-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem !important;
    max-width: 34ch;
    text-wrap: balance;
}

/* H3 = Kopf des Sorten-Registers, mit gruener Teeblatt-Marke ------------- */
body.cms-bio-tee .column.main > h3 {
    position: relative;
    font-size: clamp(1.12rem, 2.1vw, 1.3rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--bt-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.15rem !important;
    padding-left: 1.55rem;
}
body.cms-bio-tee .column.main > h3::before {
    content: "";                              /* CSS-Teeblatt (Logo ist ein Blatt) */
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 0.85em;
    height: 0.85em;
    background: var(--theme-color);
    border-radius: 0 100% 0 100%;
    transform: rotate(8deg);
}

/* --- Sorten-Register: die 8 Bio-Unterkategorie-Links als scanbares Grid -- */
body.cms-bio-tee .column.main > ul {
    list-style: none !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem;
}
body.cms-bio-tee .column.main > ul > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.cms-bio-tee .column.main > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2.2rem 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--bt-line);
    border-radius: 9px;
    color: var(--bt-ink) !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    transition: color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Teeblatt-Marke vor jedem Sortennamen */
body.cms-bio-tee .column.main > ul > li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    background: var(--theme-color);
    border-radius: 0 100% 0 100%;
    transform: rotate(8deg);
    opacity: 0.85;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* ›-Chevron rechts (Shop-Signatur, wandert beim Hover) */
body.cms-bio-tee .column.main > ul > li > a::after {
    content: "\203A";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-line-2);
    font-size: 1.15rem;
    line-height: 1;
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cms-bio-tee .column.main > ul > li > a:hover {
    color: var(--theme-color) !important;
    border-color: color-mix(in srgb, var(--theme-color) 55%, var(--bt-line));
    box-shadow: 0 4px 16px rgba(33, 38, 43, 0.07);
    transform: translateX(4px);
}
body.cms-bio-tee .column.main > ul > li > a:hover::before {
    opacity: 1;
    transform: rotate(8deg) scale(1.08);
}
body.cms-bio-tee .column.main > ul > li > a:hover::after {
    color: var(--theme-color);
    transform: translateY(-50%) translateX(3px);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
    body.cms-bio-tee .column.main { font-size: 15.5px; }
    body.cms-bio-tee .column.main > p:first-of-type { font-size: 1.1rem; }
    body.cms-bio-tee .column.main > p:first-of-type::first-letter { font-size: 2.7rem; }
    body.cms-bio-tee .column.main > h2 { max-width: none; }
    body.cms-bio-tee .column.main > ul { grid-template-columns: 1fr; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cms-bio-tee .column.main > ul > li > a,
    body.cms-bio-tee .column.main > ul > li > a::before,
    body.cms-bio-tee .column.main > ul > li > a::after,
    body.cms-bio-tee .column.main > p a {
        transition: none !important;
    }
    body.cms-bio-tee .column.main > ul > li > a:hover,
    body.cms-bio-tee .column.main > ul > li > a:hover::before,
    body.cms-bio-tee .column.main > ul > li > a:hover::after {
        transform: none !important;
    }
}

/* =======================================================================
   TEEKANNEN-LANDINGPAGE  (body.cms-tee-kannen / .tk-lp)
   -----------------------------------------------------------------------
   Redesign der CMS-Seite tee-kannen (apply-teekannen-content.php, Phase 7d6):
   Intro-Hero + zwei Material-"Tafeln" (Specimen-Plates). EdelTee-Editorial-
   Sprache wie body.cms-teezubereitung (Poppins, gruener Akzent, viel Air).
   Bilder sind nur 200x210 px -> bewusst klein als gerahmte Tafel statt
   unscharf hochskaliert. Textuelle Gruens auf #0e7560 (~5:1, AA), reines
   --theme-color #179c80 nur fuer dekorative Striche.
   ======================================================================= */
body.cms-tee-kannen {
    --tk-ink: #21262b;     /* Ueberschriften */
    --tk-body: #2f2f2f;    /* Fliesstext (~12.6:1) */
    --tk-lead: #3c4248;    /* Lead/Standfirst (~9:1) */
    --tk-muted: #586069;   /* Sub/Labels neutral */
    --tk-line: #e7e9ea;    /* Hairlines */
    --tk-line-2: #d8dcdf;  /* kraeftigere Linie */
    --tk-tint: #f3f8f6;    /* gruen getoenter Surface (Brand-Hue) */
    --tk-green: #0e7560;   /* AA-sicheres Grun fuer Text/Border (~5:1) */
}

/* tote linke Spalte ist via page_layout=1column schon weg; Container selbst
   zentrieren (nicht .column.main verbiegen). */
body.cms-tee-kannen .sidebar-main,
body.cms-tee-kannen .sidebar-additional { display: none !important; }

body.cms-tee-kannen .tk-lp {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    color: var(--tk-body);
}

/* --- Intro-Hero --------------------------------------------------------- */
body.cms-tee-kannen .tk-lp__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
    position: relative;
}
body.cms-tee-kannen .tk-lp__title {
    font-size: clamp(1.95rem, 1.35rem + 2.7vw, 3rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: var(--tk-ink) !important;
    text-transform: none !important;
    margin: 0 0 1.1rem !important;
    text-wrap: balance;
}
/* zentrierter gruener Akzentstrich (rein dekorativ -> --theme-color erlaubt) */
body.cms-tee-kannen .tk-lp__intro::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--theme-color);
}
body.cms-tee-kannen .tk-lp__lead {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.28rem);
    line-height: 1.62;
    color: var(--tk-lead);
    margin: 0 auto;
    max-width: 56ch;
    text-wrap: pretty;
}

/* --- Material-Tafel (Specimen-Plate) ------------------------------------ */
body.cms-tee-kannen .tk-plate {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
    padding-top: clamp(2rem, 4.5vw, 3.25rem);
    margin-top: clamp(2rem, 4.5vw, 3.25rem);
    border-top: 1px solid var(--tk-line);
}
body.cms-tee-kannen .tk-plate:first-of-type {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

/* Tafel-Figur: Bild in nativer Groesse, gerahmt wie ein Exponat */
body.cms-tee-kannen .tk-plate__fig {
    margin: 0;
    text-align: center;
    position: sticky;
    top: 90px;   /* haelt die Tafel beim Lesen im Blick (Desktop) */
}
body.cms-tee-kannen .tk-plate__frame {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--tk-line-2);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(33, 38, 43, 0.07);
    line-height: 0;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s ease, border-color 0.22s ease;
}
body.cms-tee-kannen .tk-plate__frame img {
    display: block;
    width: 200px;
    height: 210px;
    max-width: 100%;
    border-radius: 5px;
}
body.cms-tee-kannen .tk-plate__frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(33, 38, 43, 0.13);
    border-color: color-mix(in srgb, var(--theme-color) 50%, var(--tk-line-2));
}
/* Tafel-Label (museales Specimen-Etikett) -> AA-Grun #0e7560 */
body.cms-tee-kannen .tk-plate__label {
    margin-top: 0.95rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-green);
}

/* Tafel-Text */
body.cms-tee-kannen .tk-plate__name {
    font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2rem) !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--tk-ink) !important;
    text-transform: none !important;
    margin: 0 0 1.1rem !important;
    text-wrap: balance;
}
body.cms-tee-kannen .tk-plate__sub {
    display: block;
    margin-top: 0.4rem;
    font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.02rem);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tk-green);
}
body.cms-tee-kannen .tk-plate__body p {
    margin: 0 0 1.15rem;
    font-size: 16px;
    line-height: 1.78;
    color: var(--tk-body);
    max-width: 68ch;
}
body.cms-tee-kannen .tk-plate__body p a {
    color: var(--tk-green) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--tk-green) 40%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
body.cms-tee-kannen .tk-plate__body p a:hover {
    color: var(--theme-color) !important;
    text-decoration-color: var(--theme-color);
}

/* CTA-Button: Outline -> Fill bei Hover, Chevron wandert */
body.cms-tee-kannen .tk-plate__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.72rem 1.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1;
    color: var(--tk-green) !important;
    background: transparent;
    border: 1.5px solid var(--tk-green);
    border-radius: 9px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.cms-tee-kannen .tk-plate__chev {
    font-size: 1.15rem;
    line-height: 0;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cms-tee-kannen .tk-plate__cta:hover {
    color: #fff !important;
    background: var(--tk-green);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tk-green) 28%, transparent);
}
body.cms-tee-kannen .tk-plate__cta:hover .tk-plate__chev { transform: translateX(4px); }
body.cms-tee-kannen .tk-plate__cta:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

/* --- Responsive (Tafel ueber Text) -------------------------------------- */
@media (max-width: 768px) {
    body.cms-tee-kannen .tk-plate {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 4vw, 1.75rem);
        justify-items: center;
        text-align: center;
    }
    body.cms-tee-kannen .tk-plate__fig { position: static; }
    body.cms-tee-kannen .tk-plate__body { text-align: left; }
    body.cms-tee-kannen .tk-plate__name { text-align: center; }
    body.cms-tee-kannen .tk-plate__body p { max-width: none; }
    body.cms-tee-kannen .tk-plate__cta { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
    body.cms-tee-kannen .tk-plate__frame img { width: 170px; height: 178px; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cms-tee-kannen .tk-plate__frame,
    body.cms-tee-kannen .tk-plate__cta,
    body.cms-tee-kannen .tk-plate__chev,
    body.cms-tee-kannen .tk-plate__body p a {
        transition: none !important;
    }
    body.cms-tee-kannen .tk-plate__frame:hover { transform: none !important; }
    body.cms-tee-kannen .tk-plate__cta:hover .tk-plate__chev { transform: none !important; }
}

/* =========================================================================
   Teesorten-Landingpage  /tee.html  (CMS-Block teekategorie -> .ts-lp)
   Kategorie "Tee" (display_mode=PAGE) rendert nur diesen Block. Loest das
   krude M1-Inline-Float-Markup ab: poliertes, responsives Teesorten-Register.
   Scope: .category-tee (Body) + .ts-lp (Block). Brand-Sprache wie Megamenue/
   Filter: 8px-Radius, Chevron, Hover translateX(4px), Gruen = var(--theme-color).
   Bilder bleiben nativ 160x100 -> kompakt gerahmt, NICHT hochskaliert.
   ========================================================================= */
.category-tee .ts-lp {
    --ts-ink: #2f2f2f;
    --ts-muted: #636965;
    --ts-line: color-mix(in srgb, var(--theme-color) 15%, #e2e3e0);
    --ts-line-strong: color-mix(in srgb, var(--theme-color) 48%, #ffffff);
    margin: 0 0 0.5rem;
}
.category-tee .ts-lp__intro {
    max-width: 62ch;
    margin: 0 0 clamp(1.25rem, 3.2vw, 2.1rem);
}
.category-tee .ts-lp__title {
    margin: 0 0 0.5em;
    font-size: clamp(1.7rem, 1.05rem + 2.3vw, 2.4rem);
    line-height: 1.12;
    font-weight: 700;
    color: var(--ts-ink);
    text-transform: none;
    text-wrap: balance;
}
.category-tee .ts-lp__lead {
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.12rem);
    line-height: 1.6;
    color: var(--ts-muted);
    text-wrap: pretty;
}

/* --- Grid: viele kleine Spalten -> Thumbs bleiben scharf (~170px @ 160px Quelle) */
.category-tee .ts-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.125rem);
}
.category-tee .ts-grid__cell { margin: 0; }

.category-tee .ts-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease;
}
.category-tee .ts-card__media {
    display: block;
    aspect-ratio: 8 / 5; /* == native 160x100 -> object-fit:cover schneidet nicht */
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-color) 5%, #f3f4f1);
}
.category-tee .ts-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.category-tee .ts-card__name {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.7rem 0.85rem 0.75rem;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ts-ink);
    transition: color 0.2s ease;
}
.category-tee .ts-card__chev {
    margin-left: auto;
    font-weight: 400;
    color: var(--ts-line-strong);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}

/* --- Hover / Focus: Karte hebt, Bild zoomt leicht, Gruen + Chevron translateX */
.category-tee .ts-card:hover,
.category-tee .ts-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--ts-line-strong);
    box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--theme-color) 65%, transparent);
}
.category-tee .ts-card:hover .ts-card__media img,
.category-tee .ts-card:focus-visible .ts-card__media img {
    transform: scale(1.045);
}
.category-tee .ts-card:hover .ts-card__name,
.category-tee .ts-card:focus-visible .ts-card__name {
    color: var(--theme-color);
}
.category-tee .ts-card:hover .ts-card__chev,
.category-tee .ts-card:focus-visible .ts-card__chev {
    color: var(--theme-color);
    transform: translateX(4px);
}
.category-tee .ts-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #ffffff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .category-tee .ts-card,
    .category-tee .ts-card__media img,
    .category-tee .ts-card__chev {
        transition: color 0.2s ease, border-color 0.2s ease;
    }
    .category-tee .ts-card:hover,
    .category-tee .ts-card:focus-visible { transform: none; }
    .category-tee .ts-card:hover .ts-card__media img,
    .category-tee .ts-card:focus-visible .ts-card__media img { transform: none; }
    .category-tee .ts-card:hover .ts-card__chev,
    .category-tee .ts-card:focus-visible .ts-card__chev { transform: none; }
}

/* ==============================================
   Startseite (.cms-home .om-home)
   Hero (Split), Trust-Leiste, Kategorie-Chips,
   Neuheiten-Carousel, Saison-Panel, SEO-Details.
   Markup-Quelle: try_migration_m2/fix-m1-branding/
   apply-homepage.php (Seed Phase 7d8).
   ============================================== */
/* Porto rendert die CMS-Home OHNE aeusseren .container (die Theme-Demos
   wrappen ihre Sektionen selbst) -> das Markup traegt deshalb selbst
   class="om-home container" und erbt Portos gestufte Container-Breiten
   (1200 @1400 / 1420 @1920 / 20px-Raender mobil) samt Header-/Footer-Flucht.
   KEINE eigenen max-width-/padding-inline-Nachbauten hier (waren @1920
   120px schmaler als der Rest der Seite -> wirkte eingerueckt). */
.cms-home .om-home {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 72px);
    padding-block: clamp(16px, 3vw, 40px) clamp(40px, 6vw, 64px);
}
.cms-home .om-home h2 {
    font-size: clamp(21px, 1.1rem + 1vw, 27px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 0 18px;
}

/* --- Hero: Copy links, Bild rechts (Bild 870x387 nativ -> halbe Breite bleibt scharf) --- */
.cms-home .om-hero {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6.5fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.cms-home .om-hero__media { order: 2; }
.cms-home .om-hero__media img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.cms-home .om-hero__copy h1 {
    font-size: clamp(28px, 1.4rem + 2.2vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0 0 14px;
}
.cms-home .om-hero__lead {
    font-size: 16.5px;
    line-height: 1.65;
    color: #4b545e;
    max-width: 46ch;
    margin: 0 0 26px;
}
.cms-home .om-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Buttons (Marken-CTA wie Buy-Box: Gruen, 8px) --- */
.cms-home .om-btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cms-home .om-btn:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}
.cms-home .om-btn--primary,
.cms-home .om-btn--primary:visited {
    background: var(--theme-color);
    color: #fff;
    border: 1px solid var(--theme-color);
}
.cms-home .om-btn--primary:hover,
.cms-home .om-btn--primary:focus-visible {
    background: color-mix(in srgb, var(--theme-color) 82%, #00281f);
    border-color: color-mix(in srgb, var(--theme-color) 82%, #00281f);
    color: #fff;
    text-decoration: none;
}
.cms-home .om-btn--ghost,
.cms-home .om-btn--ghost:visited {
    background: #fff;
    color: color-mix(in srgb, var(--theme-color) 78%, #00281f);
    border: 1px solid color-mix(in srgb, var(--theme-color) 45%, #fff);
}
.cms-home .om-btn--ghost:hover,
.cms-home .om-btn--ghost:focus-visible {
    background: color-mix(in srgb, var(--theme-color) 7%, #fff);
    border-color: var(--theme-color);
    color: color-mix(in srgb, var(--theme-color) 78%, #00281f);
    text-decoration: none;
}

/* --- Trust-Leiste: 4 Spalten -> 2x2 mobil --- */
.cms-home .om-trust {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 20px clamp(16px, 3vw, 28px);
    border-block: 1px solid #e7ebee;
}
.cms-home .om-trust li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.cms-home .om-trust__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-color) 10%, #fff);
    color: var(--theme-color);
}
.cms-home .om-trust__text {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4b545e;
}
.cms-home .om-trust__text strong {
    font-size: 14.5px;
    color: #21293c;
}

/* --- Kategorie-Chips (Megamenue-Sprache: 8px-Radius, Chevron, translateX) --- */
.cms-home .om-cat-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}
.cms-home .om-cat-grid li { margin: 0; }
.cms-home .om-cat-grid a,
.cms-home .om-cat-grid a:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    border: 1px solid #e4e8eb;
    border-radius: 8px;
    color: #21293c;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Fester Bildrahmen + object-fit: normalisiert die gemischten Quellformate
   (160x100 Menuebilder, 170x170 Katalogbild, 870x387 Slide). */
.cms-home .om-cat__media {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}
.cms-home .om-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cms-home .om-cat__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: break-word;
    hyphens: auto;
}
.cms-home .om-cat__chev {
    color: #9aa3ab;
    font-size: 20px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}
.cms-home .om-cat-grid a:hover,
.cms-home .om-cat-grid a:focus-visible {
    border-color: color-mix(in srgb, var(--theme-color) 45%, #fff);
    box-shadow: 0 2px 10px rgba(23, 156, 128, 0.08);
    color: var(--theme-color);
}
.cms-home .om-cat-grid a:hover .om-cat__chev,
.cms-home .om-cat-grid a:focus-visible .om-cat__chev {
    color: var(--theme-color);
    transform: translateX(4px);
}
.cms-home .om-cat-grid a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #fff);
    outline-offset: 2px;
}

/* --- Neuheiten: Section-Head mit "Alle Neuheiten"-Link --- */
.cms-home .om-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cms-home .om-sec-head h2 { margin-bottom: 14px; }
.cms-home .om-sec-head__all,
.cms-home .om-sec-head__all:visited {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--theme-color);
    text-decoration: none;
    white-space: nowrap;
}
.cms-home .om-sec-head__all:hover,
.cms-home .om-sec-head__all:focus-visible {
    color: color-mix(in srgb, var(--theme-color) 78%, #00281f);
    text-decoration: underline;
}

/* Neuheiten-Carousel: owl-nav-Pfeile in Markenfarbe (Porto-Default ist
   Orange rgb(244,99,27); Porto-CSS laedt nach my_custom.css -> !important). */
.cms-home .om-news .owl-carousel .owl-nav button.owl-prev,
.cms-home .om-news .owl-carousel .owl-nav button.owl-next {
    background: var(--theme-color) !important;
    color: #fff !important;
}
.cms-home .om-news .owl-carousel .owl-nav button.owl-prev:hover,
.cms-home .om-news .owl-carousel .owl-nav button.owl-next:hover {
    background: color-mix(in srgb, var(--theme-color) 82%, #00281f) !important;
}
.cms-home .om-news .owl-carousel .owl-nav button.disabled {
    opacity: 0.35;
}

/* --- Saison-Panel (einziger Committed-Color-Block der Seite) --- */
.cms-home .om-season {
    background: #0e6b58;
    border-radius: 8px;
    padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 56px);
    text-align: center;
}
.cms-home .om-season h2 {
    color: #fff;
    margin-bottom: 10px;
}
.cms-home .om-season p {
    color: #d9efe9;
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 auto 22px;
}
.cms-home .om-btn--light,
.cms-home .om-btn--light:visited {
    background: #fff;
    color: #0e6b58;
    border: 1px solid #fff;
}
.cms-home .om-btn--light:hover,
.cms-home .om-btn--light:focus-visible {
    background: #e4f3ee;
    border-color: #e4f3ee;
    color: #0a5445;
    text-decoration: none;
}
.cms-home .om-btn--light:focus-visible { outline-color: #fff; }

/* --- SEO-Text am Ende: 3-Spalten-Register ueber die volle Breite
       (Lead + 2 Themenbloecke, alles sichtbar; Muster wie Rechtsseiten-Multicol) --- */
.cms-home .om-about__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 48px;
    align-items: start;
}
.cms-home .om-about p {
    font-size: 15px;
    line-height: 1.7;
    color: #3c4650;
    text-wrap: pretty;
    margin: 0;
}
.cms-home .om-about__lead {
    font-size: 16px;
    color: #2c343e;
}
.cms-home .om-about h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    text-wrap: balance;
}
@media (max-width: 991px) {
    .cms-home .om-about__cols { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .cms-home .om-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Hero-Split erst ab 992px: bei 768-991 ist die Copy-Spalte zu schmal
       (3-zeilige h1, verlorenes Bild) -> gestapelt, Bild volle Breite. */
    .cms-home .om-hero { grid-template-columns: 1fr; gap: 20px; }
    .cms-home .om-hero__media { order: 0; }
}
@media (max-width: 767px) {
    .cms-home .om-hero__actions .om-btn { flex: 1 1 auto; text-align: center; }
    .cms-home .om-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cms-home .om-cat-grid a { gap: 10px; padding: 8px 12px 8px 8px; }
    /* Kompaktes Quadrat: laesst dem Namen ~100px -> lange Woerter brechen
       an den &shy;-Stellen des Markups statt per Notbruch. */
    .cms-home .om-cat__media { width: 48px; height: 48px; }
    .cms-home .om-cat__name { font-size: 13.5px; }
}
@media (max-width: 479px) {
    /* 2 Spalten lassen dem Namen <70px -> Notbrueche trotz &shy;;
       einspaltig = grosse Tap-Targets, saubere Woerter. */
    .cms-home .om-cat-grid { grid-template-columns: 1fr; gap: 10px; }
    .cms-home .om-trust { gap: 12px 14px; padding-inline: 8px; }
    .cms-home .om-trust__icon { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-home .om-btn,
    .cms-home .om-cat-grid a,
    .cms-home .om-cat__chev { transition: none; }
    .cms-home .om-cat-grid a:hover .om-cat__chev,
    .cms-home .om-cat-grid a:focus-visible .om-cat__chev { transform: none; }
}

/* ==============================================
   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;
}

/* Desktop: eigene Karte in der Kartensprache der Summary-Box
   (2px #e7e7e7 wie .opc-block-summary, 8px Hausradius). */
@media screen and (min-width: 768px) {
    .opc-sidebar .opc-block-summary {
        border-radius: 8px;
    }
    .opc-block-shipping-information {
        box-sizing: border-box;
        margin-top: 20px;
        background: #fff;
        border: 2px solid #e7e7e7;
        border-radius: 8px;
    }
}

/* Mobil (Sidebar als aufgeklappte Flaeche ueber dem Step-Inhalt):
   Trennlinie statt Karte-in-Karte. */
@media only screen and (max-width: 767px) {
    .opc-block-shipping-information {
        border-top: 2px solid #e7e7e7;
        margin-top: 4px;
    }
}

/* 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: 2px 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: #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. */
.checkout-payment-method .billing-address-summary-label {
    margin: 0.5em 0 0.75em;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222529;
    border-bottom: 2px 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: #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;
    }
}

/* ==================================================================
   KUNDENKONTO — Login & Passwort vergessen
   Porto rendert auf /customer/account/login/ zwei identische schwarze
   ALL-CAPS-Bloecke (btn-v-dark): Submit "Anmelden" und den Register-
   LINK "Ein Konto erstellen" — keine Primaer/Sekundaer-Hierarchie,
   Versalien gegen die shopweite Ruecknahme. "Passwort vergessen?" ist
   zwar richtig platziert (direkt am Passwortfeld, NN/g-Empfehlung),
   aber Ink ohne Unterstrich -> nicht als Link erkennbar.
   Jetzt: Submit = gruener Primary (wie Checkout-CTA), Konto erstellen =
   Outline-Sekundaer (Vokabular der "Bereits Kunde?"-Zeile), remind als
   echter Link. /forgotpassword/: Note von #777 (AA-Fail) auf Ink,
   versteckten "Zurueck"-Link (-> Login) wieder einblenden, Submit wie
   Login-Primary. createpassword (Reset-Formular aus der Mail) teilt
   die Selektoren — der Flow bleibt durchgaengig konsistent.
   Token-basiert -> naturteil erbt seinen Akzent automatisch.
   !important gegen Porto-Utility-Klassen (btn-v-dark, py-3, text-md).
   ================================================================== */
body.customer-account-login .column.main,
body.customer-account-forgotpassword .column.main,
body.customer-account-createpassword .column.main {
    --om-accent: var(--theme-color, #179c80);
    --om-accent-ink: color-mix(in srgb, var(--om-accent) 72%, black);
}

/* Primary-Submit: Anmelden / Passwort zuruecksetzen / Passwort setzen */
body.customer-account-login .column.main button.action.login,
body.customer-account-forgotpassword .column.main button.action.submit,
body.customer-account-createpassword .column.main button.action.submit {
    background: var(--om-accent) !important;
    border: 1px solid var(--om-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.customer-account-login .column.main button.action.login:hover,
body.customer-account-forgotpassword .column.main button.action.submit:hover,
body.customer-account-createpassword .column.main button.action.submit:hover {
    background: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    border-color: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    color: #fff !important;
}
body.customer-account-login .column.main button.action.login:focus-visible,
body.customer-account-forgotpassword .column.main button.action.submit:focus-visible,
body.customer-account-createpassword .column.main button.action.submit:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* "Ein Konto erstellen" ist NAVIGATION (Link zur Registrierung) ->
   Outline-Sekundaer, klar vom Primary unterscheidbar, mit Luft dazwischen */
body.customer-account-login .column.main a.action.create {
    background: #fff !important;
    border: 1px solid var(--om-accent-ink) !important;
    color: var(--om-accent-ink) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 14px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
body.customer-account-login .column.main a.action.create:hover {
    background: color-mix(in srgb, var(--om-accent) 10%, #fff) !important;
    color: var(--om-accent-ink) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    text-decoration: none !important;
}
body.customer-account-login .column.main a.action.create:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* "Passwort vergessen?" als erkennbarer Link (war Ink ohne Unterstrich).
   Platzierung direkt unterm Passwortfeld bleibt — die ist best practice. */
body.customer-account-login .column.main a.action.remind {
    color: #0e7560 !important;
    font-size: 14px;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.customer-account-login .column.main a.action.remind:hover {
    color: color-mix(in srgb, #0e7560 80%, black) !important;
}

/* Forgot-Password: Intro-Note von #777 (AA-Fail) auf lesbares Ink */
body.customer-account-forgotpassword .column.main .field.note {
    color: #3c4248 !important;
}

/* Porto versteckt den "Zurueck"-Link (-> /customer/account/login/) —
   wieder einblenden: Nutzer brauchen den Rueckweg ohne Browser-Back */
body.customer-account-forgotpassword .column.main .actions-toolbar .secondary,
body.customer-account-forgotpassword .column.main a.action.back {
    display: inline-block !important;
}
body.customer-account-forgotpassword .column.main a.action.back {
    /* Porto stylt .action.back als dunklen Button -> zum Textlink zuruecksetzen */
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    margin-top: 14px;
    color: #0e7560 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.customer-account-forgotpassword .column.main a.action.back:hover {
    color: color-mix(in srgb, #0e7560 80%, black) !important;
}

/* "* Pflichtfelder"-Hinweis: Signalrot nur fuer Fehler reservieren */
body.customer-account-login .column.main .fieldset:after,
body.customer-account-forgotpassword .column.main .fieldset:after,
body.customer-account-createpassword .column.main .fieldset:after {
    color: #6b6b6b !important;
}

@media (prefers-reduced-motion: reduce) {
    body.customer-account-login .column.main button.action.login,
    body.customer-account-login .column.main a.action.create,
    body.customer-account-forgotpassword .column.main button.action.submit,
    body.customer-account-createpassword .column.main button.action.submit {
        transition: none;
    }
}

/* =====================================================================
   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;
}

/* ==================================================================
   KUNDENKONTO — Eingeloggter Bereich (Dashboard & alle Unterseiten)
   Befund CT123: graue ALL-CAPS-Boxkoepfe (#f5f5f5-Balken, gegen die
   shopweite Versalien-Ruecknahme), Sidebar als Hairline-Liste mit
   14px/#777-Links (AA-grenzwertig), Seitentitel 20px/400 in Gruen
   (Akzent als Deko), orange Porto-CAPS-Buttons (SPEICHERN, NEUE
   ADRESSE HINZUFUEGEN) statt des gruenen Checkout-Primaries, halbleeres
   Dashboard-Layout (Newsletter-Box entfaellt -> Loch rechts).
   Jetzt: Produkt-Register (feste Skala, Restrained, earned familiarity)
   mit Marken-DNA — Sidebar im Megamenue-/LN-Vokabular (›-Chevron,
   translateX(4px), aktiv fett+Akzent), Boxen als ruhige Karten
   (1px Border, 8px Radius, Titel normal geschrieben), Buttons im
   Checkout-Gruen, Tabellen mit klaren Koepfen + sanftem Row-Hover,
   Status als Pille. Scope body.account trifft NUR eingeloggte Seiten
   (Login/Forgot haben die Klasse nicht, s. Login-Sektion weiter oben).
   Token-basiert -> naturteil erbt seinen Akzent automatisch.
   !important nur wo Porto-Utilities oder Inline-Styles dagegenhalten.
   ================================================================== */
body.account .page-main {
    --om-accent: var(--theme-color, #179c80);
    --om-accent-ink: color-mix(in srgb, var(--om-accent) 72%, black);
    --om-ink: #222529;
    --om-line: #e3e6e9;
}

/* --- Seitentitel: Ink statt Gruen-Deko, klare Hierarchie ueber allem --- */
body.account .page-title-wrapper .page-title {
    color: var(--om-ink) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    text-transform: none !important;
}
body.account .page-title-wrapper .order-date {
    color: #6b7177;
    font-size: 14px;
    margin-top: 4px;
}
body.account .page-title-wrapper .order-date .label {
    font-weight: 400;
}

/* Bestellstatus als ruhige Marken-Pille statt grauem CAPS-Rahmen */
body.account .page-title-wrapper .order-status {
    display: inline-block;
    border: 0 !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--om-accent) 12%, #fff);
    color: var(--om-accent-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 4px 12px;
    vertical-align: middle;
}

/* --- Sidebar-Navigation: Megamenue-/LN-Paritaet ---------------------
   Gleiche Sprache wie linke Kategorie-Nav: ›-Chevron als Bullet,
   Hover = 4px nach rechts + Akzent, aktiv = fett + Akzent-Tint.
   Hairlines zwischen jedem Eintrag raus (Hairline-Suppe). */
body.account .block-collapsible-nav .item {
    border: 0 !important;
    margin: 2px 0;
}
body.account .block-collapsible-nav .item a,
body.account .block-collapsible-nav .item.current > strong {
    position: relative;
    display: block;
    padding: 9px 10px 9px 28px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--om-ink, #222529) !important;
    font-weight: 400;
    border: 0 !important;
    border-radius: 8px;
    transition: transform 0.15s ease, color 0.15s ease,
                background-color 0.15s ease;
}
/* Porto-Icon-Dreieck durch den ›-Chevron des Megamenues ersetzen */
body.account .block-collapsible-nav .item a::before,
body.account .block-collapsible-nav .item.current > strong::before {
    content: "\203A" !important;
    font-family: inherit !important;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--om-accent);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
}
body.account .block-collapsible-nav .item a:hover {
    transform: translateX(4px);
    color: var(--om-accent-ink) !important;
    background: color-mix(in srgb, var(--om-accent) 7%, #fff);
    text-decoration: none !important;
}
body.account .block-collapsible-nav .item a:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}
body.account .block-collapsible-nav .item.current > strong {
    color: var(--om-accent-ink) !important;
    font-weight: 700;
    background: color-mix(in srgb, var(--om-accent) 10%, #fff);
}
/* Gruppen-Trenner: eine bewusste Linie statt Hairline pro Eintrag */
body.account .block-collapsible-nav .item .delimiter {
    display: block;
    height: 1px;
    background: #e8ebee;
    border: 0 !important;
    margin: 8px 10px;
}

/* --- Blocks & Boxen: ruhige Karten statt grauer CAPS-Balken --------- */
body.account .column.main .block:not(.widget) {
    margin-bottom: 36px;
}
body.account .column.main .block:not(.widget) > .block-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px;
}
body.account .column.main .block:not(.widget) > .block-title > strong {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--om-ink) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
body.account .column.main .block:not(.widget) > .block-title .action {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-accent-ink) !important;
}
body.account .column.main .block:not(.widget) > .block-title .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Portos Deko-Pseudos am Block-Titel (zentrieren ihn mobil) abschalten —
   der Titel steht links, der Verwalten-Link rechts (space-between) */
body.account .column.main .block:not(.widget) > .block-title::before,
body.account .column.main .block:not(.widget) > .block-title::after {
    content: none !important;
}

/* Boxen nebeneinander ohne Float-Loecher: Grid schliesst das halbleere
   Dashboard (Kontaktinfo-Box spannt allein die volle Breite auf) */
body.account .column.main .block:not(.widget) > .block-content:has(> .box) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
/* Magentos Clearfix-Pseudos (display:table) wuerden im Grid selbst zu
   Grid-Items und belegen Zelle 1 -> Boxen ruecken nach rechts. Weg damit.
   :has(> .box)-Scope: Block-Contents ohne Boxen (z. B. Adressliste mit
   Tabelle + Toolbar) bleiben im Normalfluss, sonst teilen sich Tabelle
   und "Anzeigen"-Limiter zwei Grid-Spalten und ueberlappen. */
body.account .column.main .block:not(.widget) > .block-content:has(> .box)::before,
body.account .column.main .block:not(.widget) > .block-content:has(> .box)::after {
    content: none !important;
}
/* Bestelldetail: 4 kompakte Info-Boxen duerfen enger nebeneinander */
body.account .column.main .block-order-details-view > .block-content {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* Zahlungsart spannt die volle Breite: sie faellt als 4. Box allein in
   Reihe 2 und wuerde dort auf 1/3-Breite mit den Vorkasse-Bankdaten
   (IBAN, Kontoinhaber) unlesbar hoch umbrechen. */
body.account .column.main .block-order-details-view .box-order-billing-method {
    grid-column: 1 / -1;
}
body.account .column.main .block-order-details-view .box-order-billing-method .box-content {
    max-width: 68ch; /* Zeilenlaenge des Hinweistexts trotz voller Boxbreite deckeln */
}

body.account .column.main .box {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--om-line);
    border-radius: 8px;
    padding: 18px 20px;
}
body.account .column.main .box .box-title {
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--om-ink) !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    display: block;
}
body.account .column.main .box .box-content {
    padding: 0 !important;
    background: transparent !important; /* Porto legt #fbfbfb-Innenflaeche an */
    min-height: 0 !important;           /* Porto: 135px -> Leerraum unter Text */
    border: 0 !important;
    font-size: 15px;
    line-height: 1.65;
    color: #3c4248;
    flex: 1 1 auto;
}
body.account .column.main .box .box-actions {
    background: transparent !important;
    padding: 12px 0 0 !important;
    margin-top: 14px;
    border: 0 !important; /* Porto zeichnet sonst ein eigenes Rechteck */
    border-top: 1px solid #eef0f2 !important;
}
body.account .column.main .box .box-actions .action {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-accent-ink) !important;
}
body.account .column.main .box .box-actions .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Buttons: gruener Checkout-Primary statt Porto-Orange-CAPS ------ */
body.account .column.main button.action.primary,
body.account .column.main button.action.save,
body.account .column.main .actions-toolbar .primary .action {
    background: var(--om-accent) !important;
    border: 1px solid var(--om-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 12px 26px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.account .column.main button.action.primary:hover,
body.account .column.main button.action.save:hover,
body.account .column.main .actions-toolbar .primary .action:hover {
    background: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    border-color: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    color: #fff !important;
}
body.account .column.main button.action.primary:focus-visible,
body.account .column.main button.action.save:focus-visible,
body.account .column.main .actions-toolbar .primary .action:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* "Zurueck"-Links in Toolbars: Textlink statt dunkler Porto-Button
   (gleiche Behandlung wie auf /forgotpassword/, s. Login-Sektion) */
body.account .column.main .actions-toolbar .secondary a.action.back {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    color: #0e7560 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.account .column.main .actions-toolbar .secondary a.action.back:hover {
    color: color-mix(in srgb, #0e7560 80%, black) !important;
}

/* --- Tabellen (Bestellungen, Bewertungen, weitere Adressen) --------- */
body.account .column.main .table-wrapper table > thead > tr > th {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-ink);
    text-transform: none !important;
    border-bottom: 1px solid #d9dde1 !important;
    padding: 10px 12px;
}
body.account .column.main .table-wrapper table > tbody > tr > td {
    font-size: 15px;
    color: #3c4248;
    padding: 14px 12px;
    vertical-align: middle;
}
/* Sanfter Row-Hover nur auf Listen-Tabellen (nicht im Bestelldetail) */
body.account .table-wrapper.orders-history tbody tr:hover td,
body.account .table-wrapper.reviews tbody tr:hover td,
body.account .table-wrapper.additional-addresses tbody tr:hover td {
    background: color-mix(in srgb, var(--om-accent) 4%, #fff);
}
/* Aktions-Links in Tabellen: Akzent-Ink, Hover unterstrichen */
body.account .column.main .table-wrapper .action {
    color: var(--om-accent-ink) !important;
    font-weight: 600;
}
body.account .column.main .table-wrapper .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Loeschen bleibt destruktiv-rot — bewusst NICHT gruen */
body.account .column.main .table-wrapper .action.delete {
    color: #b3283e !important;
}
body.account .column.main .table-wrapper .action.delete:hover {
    color: color-mix(in srgb, #b3283e 80%, black) !important;
}

/* --- Bestelldetail --------------------------------------------------- */
/* Reorder/Drucken oben: als klare Textaktionen */
body.account .order-actions-toolbar .action {
    color: var(--om-accent-ink) !important;
    font-weight: 600;
}
body.account .order-actions-toolbar .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Tab-Leiste (Bestellte Artikel / Lieferungen / Rechnungen): moderne
   Unterstrich-Tabs statt Porto-Rahmenkaesten, normal geschrieben */
body.account .items.order-links {
    border-bottom: 1px solid var(--om-line);
}
body.account .items.order-links .item strong,
body.account .items.order-links .item a {
    display: inline-block;
    padding: 10px 14px;
    font-size: 15px;
    text-transform: none !important;
    border: 0 !important;
    background: transparent !important;
}
body.account .items.order-links .item.current strong {
    color: var(--om-ink) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--om-accent);
}
body.account .items.order-links .item a {
    color: #55595e !important;
}
body.account .items.order-links .item a:hover {
    color: var(--om-accent-ink) !important;
    text-decoration: none;
}
/* Preise in Artikelzeilen: Porto skaliert .price auf ~1.4em (20.8px) —
   vier laute Preise pro Zeile gegen 15px-Restzellen. Auf Zeilengroesse
   harmonisieren; nur die Zeilen-Zwischensumme traegt sanfte Betonung,
   die grosse Zahl bleibt der Gesamtsumme (16px/700) vorbehalten. */
body.account .table-order-items tbody .price {
    font-size: 15px !important;
    font-weight: 400;
    color: #3c4248;
}
body.account .table-order-items tbody .col.subtotal .price {
    font-weight: 600;
    color: var(--om-ink);
}

/* Artikel-Container buendig unter die Tabs, Karte wie die Boxen */
body.account .order-details-items {
    border: 1px solid var(--om-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px;
    padding: 18px 20px;
    margin-bottom: 36px;
}

/* --- Formulare (Kontoinformationen, Adresse) ------------------------ */
body.account .column.main .fieldset > .legend {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--om-ink) !important;
    border-bottom: 0 !important;
}
/* "* Pflichtfelder": Signalrot nur fuer Fehler reservieren */
body.account .column.main .fieldset:after {
    color: #6b6b6b !important;
}
/* Fokus-Ring wie im Checkout: Akzent-Border + weicher Schatten */
body.account .column.main input.input-text:focus,
body.account .column.main select:focus,
body.account .column.main textarea:focus {
    border-color: var(--om-accent) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
}

/* --- Mobil: Konto-Navigation VOR den Inhalt -------------------------
   Porto rendert die Sidebar im DOM nach der Hauptspalte -> das
   "Mein Konto"-Akkordeon landet unsichtbar am Seitenende. Nutzer
   brauchen die Bereichs-Navigation oben (Luma-Standardverhalten). */
@media (max-width: 767px) {
    body.account .columns {
        display: flex;
        flex-direction: column;
    }
    body.account .columns .sidebar-main {
        order: 0;
    }
    body.account .columns .column.main {
        order: 1;
    }
    /* Magento setzt die Nav mobil absolute top:0 (Luma-Muster) und
       ueberdeckt damit den Seitentitel -> zurueck in den Normalfluss,
       die Flex-Order oben regelt die Platzierung. */
    body.account .sidebar-main .block-collapsible-nav {
        position: static !important;
        margin-bottom: 16px;
    }
    /* Akkordeon-Kopf als klar erkennbarer Toggle */
    body.account .block-collapsible-nav-title {
        border: 1px solid var(--om-line, #e3e6e9);
        border-radius: 8px;
        padding: 12px 14px !important;
        font-size: 15px;
        margin-bottom: 6px;
    }
    body.account .block-collapsible-nav-title strong {
        font-weight: 600;
        color: #222529;
        text-transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.account .block-collapsible-nav .item a,
    body.account .column.main button.action.primary,
    body.account .column.main button.action.save,
    body.account .column.main .actions-toolbar .primary .action {
        transition: none;
    }
    body.account .block-collapsible-nav .item a:hover {
        transform: none;
    }
}