/* ========================================
   Poppins Font Family - Lokal gehostet
   WOFF2 (latin-Subset, gwfh v24) statt TTF: ~7-8 KB je Schnitt statt 70-80 KB
   ======================================== */

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins-v24-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins-v24-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins-v24-latin-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins-v24-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins-v24-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins-v24-latin-700.woff2') format('woff2');
    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;
}


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

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

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

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


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


/* ========================================
   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,
:is(.catalog-category-view, .catalogsearch-result-index) .products-grid .product-image-photo,
.block.related .product-image-photo,
.block.upsell .product-image-photo {
    border-radius: 8px;
}


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


/* ========================================
   Marken-Radius (8px) auf Formular-Textfelder
   Porto laesst input/select/textarea eckig (radius 0 bzw. 9px bei
   textarea) - gegen die 8px-Radius-Sprache des Themes (Buttons,
   Bildecken, Karten schon 8px, s. Block oben). Vereinheitlicht alle
   Standard-Eingabefelder shopweit (Login, Registrierung, Checkout,
   Kontakt, Warenkorb, Adresse ...).
   Bewusst AUSGENOMMEN:
   - Mengen-Stepper (.input-text.qty) - schmal/eckig, Teil der +/- Optik.
   - Header-Suchfeld (#search) - dessen runder Look kommt vom Container
     (10px, s. Radius-Kommentar oben); das Input selbst bleibt unberuehrt.
   !important, da Porto spaeter im Bundle laedt und textarea einen eigenen
   9px-Wert setzt ([[porto-css-override-important]]).
   ======================================== */
.input-text:not(.qty):not(#search),
select,
textarea {
    border-radius: 8px !important;
}


/* ========================================
   Fokus-Zustand fuer Formularfelder: EIN Ring shopweit
   Vorher inkonsistent: Suchfeld/Warenkorb = knackiger Ring (0 0 0 4px),
   Checkout/Registrierung/Konto = diffuser 0 2px 10px, der von Porto
   weggeraeumt wurde (Border wurde nur gruen, KEIN sichtbarer Glow) -
   Ursache: der Schatten stand ohne !important. Login = gar kein Fokus.
   Jetzt ueberall der Preset-Ring: gruen fuer valide Felder, rot passend
   zur Pflichtfeld-Meldung (#e02b27) bei .mage-error (Fokus bleibt sicht-
   bar UND fehlerkonsistent, WCAG 2.4.7 + 3.3.1). Dezent (16% Alpha,
   Industriestandard), markenkonform.
   Ausnahmen wie beim Radius: qty-Stepper und #search haben eigene
   Container-Ringe (:focus-within) - kein doppelter innerer Ring.
   !important, da Porto den Input-Fokus-Schatten sonst wegraeumt.
   ======================================== */
.input-text:not(.qty):not(#search):not(.mage-error):focus,
select:not(.mage-error):focus,
textarea:not(.mage-error):focus {
    border-color: var(--theme-color, #179c80) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color, #179c80) 16%, transparent) !important;
}
.input-text.mage-error:focus,
select.mage-error:focus,
textarea.mage-error:focus {
    border-color: #e02b27 !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, #e02b27 16%, transparent) !important;
}


/* ========================================
   Body-Text auf Haus-Ink (#2f2f2f) statt Porto-#777
   Critique 2026-07-19: Detector fand 117 graue Textknoten allein auf der
   Kategorieseite; Portos body-color #777 liegt bei exakt 4.5:1 (null
   AA-Reserve) und faellt bei Schriften <14px faktisch durch. Preset-Regel:
   Ink #2f2f2f fuer Fliesstext, nie #777. Ein Wurzel-Fix statt Dutzender
   Einzelregeln: Elemente ERBEN jetzt Ink; Porto-Regeln mit eigenem
   expliziten Grau bleiben unberuehrt und werden dort gefixt, wo sie
   nachweislich AA reissen (grndlist/SKU in product-page.css).
   !important, da Porto spaeter im Bundle laedt.
   ======================================== */
body {
    color: #2f2f2f !important;
}


/* ========================================
   Sichtbarer Tastatur-Fokus fuer Links & Buttons (WCAG 2.4.7)
   Critique 2026-07-19 (P1): Porto raeumt outline auf Links/CTAs ab -
   Formularfelder haben Ringe (Block oben), alles andere war fuer
   Tastatur-/Switch-Nutzer unsichtbar. :focus-visible statt :focus,
   damit Maus-Klicks keinen Ring hinterlassen. Markenfarbe + Offset
   analog zum Formular-Fokusring (eine Fokus-Sprache shopweit).
   ======================================== */
a:focus-visible,
button:focus-visible,
.action:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme-color, #179c80) !important;
    outline-offset: 2px;
}


/* ========================================
   Trusted-Shops-Badge im Katalog: Ueberdeckungs-Fix
   Critique 2026-07-19 (P0): das fixed Badge (93x146px, rechts unten)
   verdeckt auf der PDP die Grundpreis-Spalte der Kauftabelle (PAngV-
   Pflichtangabe!), auf Kategorieseiten die 4. Produktspalte und mobil
   sogar das geoeffnete Off-Canvas-Menue. Gleiche sync-sichere CSS-
   Loesung wie im Checkout (checkout.css "Trusted-Shops-Badge", dort
   ausfuehrlich begruendet inkl. der > div > div-Struktur-Falle):
   Desktop nach links unten (Sidebar-/Beschreibungs-Auslauf, keine
   Kaufinformation), mobil ganz aus. Scope: Katalog + CMS/Home -
   Checkout/Cart behalten ihre eigenen, identisch aufgebauten Regeln.
   ======================================== */
.catalog-product-view div[id^="trustbadge-container"] > div > div,
.catalog-category-view div[id^="trustbadge-container"] > div > div,
.catalogsearch-result-index div[id^="trustbadge-container"] > div > div,
.cms-index-index div[id^="trustbadge-container"] > div > div {
    right: auto !important;
    left: 16px !important;
}
@media (max-width: 991px) {
    .catalog-product-view div[id^="trustbadge-container"],
    .catalog-category-view div[id^="trustbadge-container"],
    .catalogsearch-result-index div[id^="trustbadge-container"],
    .cms-index-index div[id^="trustbadge-container"] {
        display: none !important;
    }
}


/* ========================================
   Primary-CTA: AA-Kontrast + Satzschreibung
   Critique 2026-07-19 (P1): Weiss auf var(--theme-color) #179c80 =
   3.4:1 bei 14px - der wichtigste Button des Shops ("In den Warenkorb",
   "Suchen") lag unter AA. color-mix 85% Marke + 15% Schwarz ergibt
   ~4.6:1 und bleibt erkennbar Markengruen; der Token adaptiert naturteil
   automatisch. Dazu text-transform:none (Haus-Register: keine ALL-CAPS-
   Lautstaerke; konsistent mit dem Checkout-CTA, s. checkout.css) und
   15px fuer Lesbarkeit. Hover/Focus im selben Zug (BEIDE Regeln
   brauchen !important, sonst gewinnt Portos Ruhe- ODER Hover-Regel).
   Checkout-eigene CTA-Regeln (checkout.css laedt spaeter) gewinnen dort
   weiterhin - gewollt.
   ======================================== */
button.action.primary,
.action.primary,
.action.tocart.primary {
    background-color: color-mix(in srgb, var(--theme-color, #179c80) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--theme-color, #179c80) 85%, #000) !important;
    color: #fff !important;
    text-transform: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
button.action.primary:hover,
.action.primary:hover,
.action.tocart.primary:hover,
button.action.primary:focus,
.action.primary:focus,
.action.tocart.primary:focus {
    background-color: color-mix(in srgb, var(--theme-color, #179c80) 72%, #000) !important;
    border-color: color-mix(in srgb, var(--theme-color, #179c80) 72%, #000) !important;
    color: #fff !important;
}


/* ========================================
   Breadcrumbs entfetten (Header-Prototyp e6a531be)
   Vorher: ALLE Ebenen 12px/700 in #161616 - Breadcrumb konkurriert mit
   der Nav. Jetzt: vorherige Ebenen 13px/400 muted, nur die aktuelle
   Seite (strong) in Ink/500; Separator-Chevron (porto-icons ::after
   auf li:not(:last-child)) hell. Hintergrund bleibt bewusst WEISS
   (User-Entscheid 2026-07-21: kein Tint-Balken wie im Prototyp).
   !important gegen spaeter ladendes Porto-Bundle; Hover/Ruhe-Paar
   braucht BEIDE !important. Weitere Breadcrumb-Regeln (Hoehe/Padding)
   leben in category-listing.css/checkout.css - hier NUR Typografie.
   ======================================== */
.page-wrapper > .breadcrumbs .items {
    font-size: 13px !important;
}
.page-wrapper > .breadcrumbs .items a {
    color: #6b6b6b !important;
    font-weight: 400 !important;
    transition: color .15s;
}
.page-wrapper > .breadcrumbs .items a:hover,
.page-wrapper > .breadcrumbs .items a:focus-visible {
    color: var(--theme-color, #179c80) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.page-wrapper > .breadcrumbs .items strong {
    color: #2f2f2f !important;
    font-weight: 500 !important;
}
.page-wrapper > .breadcrumbs .items li::after {
    color: #b0b8b4 !important;
}


/* ========================================
   Fliesstext-Links erkennbar machen (Kategorie-/SEO-Content)
   Vorher: Links in purem Markengruen ohne Underline und OHNE Hover-
   Effekt - im grauen Fliesstext quasi unsichtbar ("versteckte Links").
   WCAG 1.4.1/G183: ohne Underline braeuchte es 3:1 zum Text PLUS
   Hover-Indikator; 1.4.3 AA: --theme-color auf Weiss nur 3,44:1.
   Loesung: abgedunkeltes Markengruen (80% -> ~#127d66, 4,7:1 auf
   Weiss) + dezente halbtransparente Unterstreichung, die beim Hover
   zusammen mit der Farbe auf volles Markengruen anzieht.
   Token-basiert -> naturteil adaptiert automatisch.
   ======================================== */
.ownmag2ext-optionsetting-cms a,
.ownmag2ext-optionsetting-left a,
.category-description a {
    color: color-mix(in srgb, var(--theme-color, #179c80) 80%, #000) !important;
    /* Longhands, KEIN text-decoration-Shorthand: der Shorthand expandiert
       mit !important auch auf -color:currentcolor !important und wuerde
       die dezente 45%-Linie darunter selbst wieder ueberschreiben. */
    text-decoration-line: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: color-mix(in srgb, var(--theme-color, #179c80) 45%, transparent) !important;
    transition: color .15s, text-decoration-color .15s;
}
.ownmag2ext-optionsetting-cms a:hover,
.ownmag2ext-optionsetting-left a:hover,
.category-description a:hover,
.ownmag2ext-optionsetting-cms a:focus-visible,
.ownmag2ext-optionsetting-left a:focus-visible,
.category-description a:focus-visible {
    color: var(--theme-color, #179c80) !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor;
}


/* ========================================
   Seitentitel der Gebrauchsseiten wie im Kundenkonto
   (customer-account.css: "Ink statt Gruen-Deko"). Warenkorb, Suche und
   Merkzettel hatten noch Portos Standard-Titel: Markengruen, 20px, leicht
   - konkurrierte mit den gruenen Knoepfen darunter. Markengruen bleibt
   den Aktionen vorbehalten. Gleiche Werte wie body.account, damit der
   Merkzettel-Titel beim Anmelden nicht springt.
   ======================================== */
body:is(.checkout-cart-index, .catalogsearch-result-index, .merkzettel-index-index) .page-title-wrapper .page-title {
    color: #222529 !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    text-transform: none !important;
}