/*
Theme Name: STIERS
Theme URI: https://stiersoel.de
Description: Block-Theme (FSE) Rebuild für STIERS Männerpflege – ohne Elementor, WooCommerce-ready.
Author: Jan
Version: 7.2.3
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: stiers
*/

/* ============================================================
   STIERS – zusätzliche Styles (Feinschliff über theme.json)
   Marken-Dark: #141210 · Poppins
   ============================================================ */

/* Kein horizontales Scrollen */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* WC Mini-Cart Drawer verstecken (wir nutzen eigenen Cart-Link) */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__screen-overlay,
.wp-block-woocommerce-mini-cart-contents {
    display: none !important;
}

/* Hero / Cover Feintuning */
.stiers-hero .wp-block-cover__inner-container {
    max-width: 1140px;
    margin: 0 auto;
}

.stiers-eyebrow {
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-weight: 400;
}

/* Schmale Trennlinie über Eyebrows / Sub-Headlines */
.stiers-rule {
    width: 60px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    margin: 1rem auto;
}

/* Produkt-Showcase Sektionen: großzügige Höhe */
.stiers-product-showcase {
    min-height: 520px;
}

.stiers-product-showcase .wp-block-cover__inner-container {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}

/* Buttons: Figma — border-radius 50px (Pill), alle Varianten */
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    border-radius: 50px !important;
}

/* Sekundär-Button (is-style-stiers): transparent, weißer Rahmen */
.wp-block-button.is-style-stiers .wp-block-button__link {
    background: transparent;
    border: 1px solid rgba(242, 243, 246, 0.8);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 40px;
    transition: all 0.3s ease;
    color: #ffffff;
}

.wp-block-button.is-style-stiers .wp-block-button__link:hover {
    background: rgba(255,255,255,0.1);
}

/* Headings durchgehend leicht (Poppins 300) */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    line-height: 1.1;
}

/* Header / Navigation */
.site-header .wp-block-navigation a {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
}

/* Footer Navigation Links */
footer .wp-block-navigation a,
footer .wp-block-navigation-item__content {
    font-size: 10px !important;
    font-weight: 300 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(255,255,255,0.55) !important;
    text-decoration: none !important;
}

/* Sanfte Bild-Hover in Galerien */
.wp-block-image img {
    transition: transform 0.6s ease;
}

/* WooCommerce Grundton an Dark-Theme angleichen */
.woocommerce-page,
.woocommerce {
    color: inherit;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    text-align: center;
}

.woocommerce span.price,
.woocommerce div.product p.price {
    color: inherit;
    font-weight: 400;
}

/* ============================================================
   HERO — pixelgenau nach Figma (Frame 402x895)
   ============================================================ */
.stiers-hero.wp-block-cover {
    aspect-ratio: 402 / 895;
    min-height: 0;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
}
.stiers-hero .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
.stiers-hero .hero-top {
    position: absolute;
    top: 11.17%;        /* y100 / 895 */
    left: 20px;
    right: 20px;
}
.stiers-hero .hero-eyebrow-top {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.stiers-hero .hero-h1 {
    margin: 5px 0 0 0;
    color: rgba(255,255,255,0.62);
    font-size: 34px;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.stiers-hero .hero-sub {
    position: absolute;
    top: 69.7%;         /* y624 / 895 */
    left: 25px;
    right: 25px;
    text-align: center;
}
.stiers-hero .hero-eyebrow {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.stiers-hero .hero-desc {
    margin: 8px 0 0 0;
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
}
.stiers-hero .hero-btn {
    position: absolute;
    top: 84.1%;         /* y753 / 895 */
    left: 0;
    right: 0;
    text-align: center;
}
.stiers-hero .hero-cta {
    margin: 0;
}
.stiers-hero .hero-cta a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.stiers-hero .hero-arrow {
    margin: 18px 0 0 0;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
}

/* ============================================================
   HEADER — sticky, transparent über Hero, abdunkelt beim Scrollen
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(1, 1, 1, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.3s ease;
}
.site-header.is-scrolled {
    background: rgba(1, 1, 1, 0.65) !important;
}
/* Unterseiten: Platz schaffen (Startseite liegt über Hero) */
body:not(.home) main { padding-top: 72px; }

.stiers-logo-wrap a { display: block; line-height: 0; }

/* Custom Hamburger Button */
.stiers-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    line-height: 0;
}
.stiers-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: opacity 0.2s;
}

/* Mobile Menu Overlay */
.stiers-menu-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.stiers-menu-overlay.is-open {
    transform: translateX(0);
}
.stiers-menu-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #010101;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.stiers-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 11.25rem;
    flex: 1;
}
.stiers-menu-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 47px;
    padding: 10px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #010101 !important;
    text-decoration: none !important;
}
.stiers-menu-nav a:hover { opacity: 0.55; }
.stiers-menu-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 185px;
    height: 55px;
    border: 1.5px solid #010101;
    border-radius: 27.5px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #010101 !important;
    text-decoration: none !important;
    flex-shrink: 0;
}

/* WooCommerce – Kontrast im Dark-Theme */
.woocommerce div.product .product_title,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-Price-amount,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce div.product .woocommerce-product-details__short-description,
.wc-block-components-product-name,
.woocommerce .quantity .qty,
.single-product .wp-block-post-title,
.single-product h1,
.woocommerce-loop-product__title {
    color: #ffffff;
}
.woocommerce .quantity .qty {
    background: #111;
    border: 1px solid rgba(255,255,255,0.3);
}
.woocommerce-breadcrumb { display: none; }

/* ============================================================
   COLLECTION OVERVIEW
   ============================================================ */
.stiers-iconrow.wp-block-columns {
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.stiers-iconrow .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
}
.stiers-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
    opacity: 0.9;
}
.stiers-icon-label {
    margin: 0;
    color: rgba(255,255,255,0.6);
    font-size: 9px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.stiers-eyebrow-c {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.stiers-essence-h {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.stiers-cards.wp-block-columns {
    gap: 0.6rem;
    flex-wrap: nowrap;
}
.stiers-cards .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
}
.stiers-cards .wp-block-image,
.stiers-cards figure {
    margin: 0;
}

/* ============================================================
   UNSER STANDARD — nummerierte Liste
   ============================================================ */
.stiers-num-item { align-items: flex-start; gap: 1rem; }
.stiers-num-item > .wp-block-group:last-child { flex: 1; }
.stiers-num {
    margin: 0;
    flex: 0 0 auto;
    min-width: 46px;
    color: rgba(255,255,255,0.22);
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* ============================================================
   LOVED BY MEN — Testimonial-Karten
   ============================================================ */
.stiers-testimonial {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}
.stiers-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a3a3a, #141414);
    border: 1px solid rgba(255,255,255,0.15);
}
.stiers-tcontent { flex: 1; }
.stiers-stars {
    color: #e8c98a;
    font-size: 12px;
    letter-spacing: 0.15em;
    margin-bottom: 0.3rem;
}
.stiers-quote {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
}

/* Header: von WooCommerce auto-injizierte Account-/Cart-Icons ausblenden (Figma: nur Hamburger) */
.site-header .wp-block-woocommerce-customer-account,
.site-header .wp-block-woocommerce-mini-cart,
.wp-block-navigation .wp-block-woocommerce-customer-account {
    display: none !important;
}
/* Footer linksbündig */
.site-footer-cols .wp-block-column { min-width: 0; }

/* Avatar als echtes Bild */
img.stiers-avatar { object-fit: cover; overflow: hidden; }

/* ============================================================
   ÖLE — Ölnamen overlaid auf Foto (Figma: Ingredients 2576:13122)
   ============================================================ */
.stiers-oele-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
.stiers-oele-img {
    display: block;
    width: 100%;
    height: auto;
}
.stiers-oele-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Labels absolut gemäß Figma (image-relative, skaliert auf oils.webp 402×634 CSS px) */
.stiers-oele-label {
    position: absolute;
    width: 123px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stiers-oele-label.tl { left: 7%;    top: 29.7%; }
.stiers-oele-label.tr { left: 45.8%; top: 31.8%; text-align: right; }
.stiers-oele-label.bl { left: 26.1%; top: 51.3%; }
.stiers-oele-label.br { left: 64.9%; top: 51.3%; text-align: right; }
.stiers-oele-name {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.stiers-oele-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
    margin: 0;
}
.stiers-oele-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================================
   PFLEGE — Wirkstoff-Infografik (Tags um die Flasche)
   ============================================================ */
.stiers-radial { position: relative; margin: 1.5rem 0 0; width: 100vw; left: 50%; transform: translateX(-50%); }
.stiers-radial-img { display: block; width: 100%; }
.stiers-tag { position: absolute; width: 40%; }
.stiers-tag strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.stiers-tag span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.stiers-tag.tl { top: 12%; left: 3%; text-align: left; }
.stiers-tag.tr { top: 12%; right: 3%; text-align: right; }
.stiers-tag.bl { bottom: 14%; left: 3%; text-align: left; }
.stiers-tag.br { bottom: 14%; right: 3%; text-align: right; }

/* Schwebendes Warenkorb-Icon (rechts) */
.stiers-cart {
    position: fixed;
    top: 52%;
    right: 10px;
    z-index: 30;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(20,20,20,0.6);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
    transition: background 0.3s;
}
.stiers-cart:hover { background: rgba(40,40,40,0.85); }

/* Loved by Men: horizontales Karussell (alt, nicht mehr genutzt) */
.stiers-testimonials {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.stiers-testimonials::-webkit-scrollbar { display: none; }
.stiers-testimonials .stiers-testimonial {
    flex: 0 0 84%;
    scroll-snap-align: start;
    margin-bottom: 0;
}

/* ============================================================
   LOVED BY MEN — Figma-Design (2474:8817)
   ============================================================ */
.stiers-loved {
    background: #000;
    color: #fff;
}
.stiers-loved-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
}
.stiers-loved-head {
    text-align: center;
    padding: 0 1.5rem;
}
.stiers-loved-h2 {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0.4rem 0 0;
}
.stiers-carousel-wrap {
    position: relative;
    width: 100%;
}
.stiers-tcarousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 36px 4px 36px;
}
.stiers-tcarousel::-webkit-scrollbar { display: none; }
.stiers-tcard {
    flex: 0 0 270px;
    min-height: 130px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    background: rgba(255,255,255,0.03);
}
.stiers-tavatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.stiers-tcardtext {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stiers-tquote {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    line-height: 1.55;
    margin: 0;
}
.stiers-tstars {
    color: #e8c98a;
    font-size: 11px;
    letter-spacing: 0.12em;
}
.stiers-tarr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(20,20,20,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
    line-height: 1;
}
.stiers-tarr--l { left: 4px; }
.stiers-tarr--r { right: 4px; }
.stiers-tarr:hover { background: rgba(50,50,50,0.95); color: #fff; }
.stiers-loved-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    text-align: center;
    line-height: 1.7;
    margin: 0;
    padding: 0 1.5rem;
}

/* ============================================================
   UNSER STANDARD — Figma-Design (2473:8634) mit Flaschen-Hintergrund
   ============================================================ */
.stiers-standard {
    background: #000;
    color: #fff;
}
.stiers-standard-inner {
    position: relative;
    overflow: hidden;
    /* Figma: list starts at y=239 in 759px section → ~13rem top padding */
    padding: 13rem 1.5rem 3.5rem;
    background: #010101;
}
/* Figma: image 122 at x=-69, y=-330 in 759px section → top=-43%, left=-17%, width=135% */
.stiers-standard-bg {
    position: absolute;
    top: -43%;
    left: -17%;
    width: 135%;
    height: auto;
    opacity: 1;
    filter: brightness(1.6) contrast(0.9);
    pointer-events: none;
    user-select: none;
}
/* Figma "image 130": y=0, h=70px, rgba(0)→rgba(1) */
.stiers-standard-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 0%, rgba(1,1,1,1) 100%);
    z-index: 1;
    pointer-events: none;
}
/* Figma "image 131": y=148, rgba(0)→0.79 at 32%→1 at 71% */
.stiers-standard-inner::after {
    content: '';
    position: absolute;
    top: 148px; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 0%, rgba(1,1,1,0.79) 32%, rgba(1,1,1,1) 71%);
    z-index: 1;
    pointer-events: none;
}
.stiers-standard-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 320px;
}
.stiers-num-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.stiers-num-svg {
    flex-shrink: 0;
    width: auto;
    height: 54px;
    display: block;
    margin-top: 2px;
    opacity: 1;
}
.stiers-num-content {
    flex: 1;
}
.stiers-num-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.3rem;
    line-height: 1.3;
}
.stiers-num-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0;
}

/* Section-Headlines: Figma H2 = 18px, uppercase, 8% letter-spacing */

/* Pflege-Unterüberschrift: kleiner, Versalien */
.stiers-sub-h {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* FAQ: aufgeklappt, ohne Dreiecks-Marker */
.stiers-faq summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.stiers-faq summary::-webkit-details-marker { display: none; }
.stiers-faq summary::marker { content: ""; }

/* Pflege-Infografik: Verbindungslinien-Overlay */
.stiers-radial-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Trim inter-section gap from WordPress default 1.5rem to match Figma page height */
main.wp-block-group > * {
    margin-block-start: 1.3rem !important;
}
main.wp-block-group > :first-child {
    margin-block-start: 0 !important;
}

/* ============================================================
   WERTE-SEITE — pixelgenaues Layout nach Figma
   ============================================================ */

/* Gemeinsame Basis aller Werte-Sektionen */
.stiers-werte-section,
.stiers-werte-hero { margin-block-start: 0 !important; }

/* ---- 1. HERO ---- */
.stiers-werte-hero-inner {
    position: relative;
    width: 100%;
    height: 874px;
    overflow: hidden;
    background: #010101;
}
.stiers-werte-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
.stiers-werte-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1,1,1,0) 0%, rgba(1,1,1,0.5) 48%, rgba(1,1,1,1) 76%);
}
.stiers-werte-hero-top {
    position: absolute;
    top: 100px;
    left: 20px;
    right: 20px;
}
.stiers-werte-eyebrow {
    margin: 0 0 5px 0;
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.stiers-werte-h1 {
    margin: 0;
    color: rgba(255,255,255,0.55);
    font-size: 34px;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.stiers-werte-h1 span { color: #ffffff; }
.stiers-werte-arrow {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- 2. HALTUNG ---- */
.stiers-werte-haltung {
    position: relative;
    width: 100%;
    height: 756px;
    overflow: hidden;
    background: #010101;
}
.stiers-werte-haltung-bg {
    position: absolute;
    left: -102px;
    top: 308px;
    width: 685px;
    height: 443px;
    background-size: cover;
    background-position: center;
}
.stiers-werte-haltung-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1,1,1,0) 0%, rgba(1,1,1,1) 100%);
    top: 554px;
    height: 250px;
}
.stiers-werte-haltung-content {
    position: absolute;
    top: 77px;
    left: 16px;
    right: 16px;
}

/* ---- 3. STANDARD ---- */
.stiers-werte-standard {
    position: relative;
    width: 100%;
    height: 623px;
    overflow: hidden;
    background: #010101;
}
.stiers-werte-standard-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}
.stiers-werte-standard-overlay {
    position: absolute;
    left: 0; right: 0;
    top: 268px;
    height: 355px;
    background: linear-gradient(180deg, rgba(1,1,1,0) 0%, rgba(1,1,1,0.5) 48%, rgba(1,1,1,1) 100%);
}
.stiers-werte-standard-header {
    position: absolute;
    top: 60px;
    left: 16px;
    right: 16px;
}
.stiers-werte-icons {
    position: absolute;
    left: 64px;
    top: 198px;
    width: 273px;
    display: flex;
    flex-direction: column;
    gap: 43px;
}
.stiers-werte-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}
.stiers-werte-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.stiers-icon-title {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}
.stiers-icon-sub {
    margin: 0;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 300;
    line-height: 14px;
    text-align: center;
}

/* ---- 4. KONTROLLE ---- */
.stiers-werte-kontrolle {
    position: relative;
    width: 100%;
    height: 702px;
    overflow: hidden;
    background: #010101;
}
.stiers-werte-kontrolle-bg {
    position: absolute;
    inset: 0;
    top: -48px;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}
.stiers-werte-kontrolle-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1,1,1,0.65) 0%, rgba(1,1,1,0) 75%, rgba(1,1,1,0) 84%, rgba(1,1,1,0.6) 100%);
}
.stiers-werte-kontrolle-content {
    position: absolute;
    left: 64px;
    top: 374px;
    width: 273px;
}

/* ---- 5. BELIEF / UNSERE HALTUNG ---- */
.stiers-werte-belief {
    position: relative;
    width: 100%;
    min-height: 874px;
    overflow: hidden;
    background: #010101;
}
.stiers-werte-belief-bg {
    position: absolute;
    left: -14px; right: 0;
    top: -102px;
    width: 421px;
    height: 632px;
    background-size: cover;
    background-position: center;
}
.stiers-werte-belief-overlay-top {
    position: absolute;
    left: 0; right: 0;
    top: -139px;
    height: 303px;
    background: linear-gradient(180deg, rgba(1,1,1,0) 0%, rgba(1,1,1,1) 100%);
}
.stiers-werte-belief-overlay-bot {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 303px;
    background: linear-gradient(180deg, rgba(1,1,1,0) 0%, rgba(1,1,1,1) 100%);
}
.stiers-werte-bg-h {
    position: absolute;
    top: -16px;
    left: 65px;
    width: 273px;
    color: rgba(255,255,255,0.5);
    font-size: 34px;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    line-height: 1.1;
}
.stiers-werte-belief-content {
    position: absolute;
    top: 451px;
    left: 36px;
    right: 36px;
    text-align: center;
}

/* ---- Gemeinsame Text-Stile ---- */
.stiers-werte-span {
    margin: 0 0 12px 0;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
}
.stiers-werte-h2 {
    margin: 0 0 16px 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}
.stiers-werte-h3 {
    margin: 0 0 12px 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
}
.stiers-werte-body {
    margin: 0;
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    text-align: center;
}

/* ---- Button ---- */
.stiers-werte-btn-wrap {
    text-align: center;
}
.stiers-werte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    height: 55px;
    border: 1px solid rgba(242,243,246,0.8);
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s;
}
.stiers-werte-btn--primary {
    background: #ffffff;
    color: #010101;
    border-color: #ffffff;
}
.stiers-werte-btn:hover { background: rgba(255,255,255,0.12); }
.stiers-werte-btn--primary:hover { background: rgba(255,255,255,0.88); }

/* Position der Buttons in den Sektionen */
.stiers-werte-haltung .stiers-werte-btn-wrap,
.stiers-werte-kontrolle .stiers-werte-btn-wrap {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    padding-bottom: 60px;
}

/* ============================================================
   SHOP PAGE
   ============================================================ */

/* --- 1. Hero --- */
.stiers-shop-hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
}
.stiers-shop-hero-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 60px;
}
.stiers-shop-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
.stiers-shop-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.15) 0%, rgba(1,1,1,0.8) 70%, rgba(1,1,1,0.95) 100%);
}
.stiers-shop-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 28px;
}
.stiers-shop-hero-bottom {
    position: relative;
    z-index: 2;
    padding: 0 24px;
}
.stiers-shop-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 12px;
}
.stiers-shop-h1 {
    font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #fff;
}
.stiers-shop-h1 span {
    color: rgba(255,255,255,0.55);
}
.stiers-shop-sub {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0 0 8px;
}
.stiers-shop-desc {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
    margin: 0 0 24px;
    line-height: 1.6;
}
.stiers-shop-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
}
.stiers-shop-hero-arrow {
    position: relative;
    z-index: 2;
    font-size: 20px;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin-top: 32px;
    animation: stiers-bounce 2s ease-in-out infinite;
}

/* --- 2. Product Cards --- */
.stiers-shop-products {
    background: #010101;
    padding: 24px 16px 48px;
}
.stiers-shop-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.stiers-shop-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    background: #0c1018;
}
.stiers-shop-card--bundle  { background: #14100a; }
.stiers-shop-card--bartoel { background: #0c1018; }
.stiers-shop-card--sackoel { background: #100e06; }
/* left-side gradient so text is always readable against the bottle photo */
.stiers-shop-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(1,1,1,0.85) 40%, rgba(1,1,1,0) 100%);
    z-index: 2;
    pointer-events: none;
}
.stiers-shop-card-bottle {
    position: absolute;
    right: 0;
    top: 0;
    width: 58%;
    height: 55%;
    object-fit: contain;
    object-position: right top;
    z-index: 1;
}
.stiers-card-mark {
    position: absolute;
    right: 12px;
    top: calc(55% - 22px);
    z-index: 1;
    opacity: 0.7;
}
.stiers-shop-card-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    padding: 24px;
}
.stiers-shop-card-top { margin-bottom: 20px; }
.stiers-shop-card-tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0 0 8px;
}
.stiers-shop-card-name {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
    color: #fff;
}
.stiers-shop-card-size {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin: 0 0 12px;
    letter-spacing: 0.05em;
}
.stiers-shop-card-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.stiers-shop-price {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.stiers-shop-price-old {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    text-decoration: line-through;
}
.stiers-shop-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.stiers-shop-card-features li {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
    line-height: 1.8;
}
.stiers-shop-card-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Shop Buttons */
.stiers-shop-btn-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid rgba(242,243,246,0.6);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s;
}
.stiers-shop-btn-sec:hover { background: rgba(255,255,255,0.1); }
.stiers-shop-btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #fff;
    border-radius: 50px;
    background: #fff;
    color: #010101;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.stiers-shop-btn-cta:hover { background: rgba(255,255,255,0.85); }

/* --- 3. Warum Stiers --- */
.stiers-shop-warum {
    background: #010101;
    padding: 60px 0 0;
}
.stiers-shop-warum-inner {
    padding: 0 24px;
}
.stiers-shop-warum-h {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0 0 32px;
}
.stiers-shop-features {
    border-top: 1px solid rgba(255,255,255,0.1);
}
.stiers-shop-feature {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0;
}
.stiers-shop-feature-head {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}
.stiers-shop-feature-icon {
    display: block;
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    flex-shrink: 0;
    align-self: center;
}
.stiers-shop-feature-title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}
.stiers-shop-feature-body {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin: 10px 0 0 32px;
}

/* Testimonials */
.stiers-shop-testimonials {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 40px 0 48px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
}
.stiers-shop-testimonials::-webkit-scrollbar { display: none; }
.stiers-shop-testimonial {
    flex-shrink: 0;
    width: 268px;
    background: rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 20px;
}
.stiers-shop-testi-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.stiers-shop-testi-top img {
    border-radius: 50%;
    object-fit: cover;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.stiers-shop-testi-top .stiers-testi-stars {
    margin: 0;
}
.stiers-testi-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 2px;
}
.stiers-testi-stars {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.stiers-testi-text {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* --- 4. Brand Footer --- */
.stiers-shop-brand {
    background: #010101;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 80px 0;
}
.stiers-shop-brand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    gap: 20px;
}
.stiers-shop-brand-icon {
    display: block;
    opacity: 0.9;
}
.stiers-shop-brand-h {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.25;
    color: #fff;
    margin: 0;
}
.stiers-shop-brand-sub {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0 0 4px;
}

@keyframes stiers-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ============================================================
   PRODUKTSEITEN (Bartöl / Sacköl) — gemeinsame Stile
   ============================================================ */

/* --- Hero --- */
.stiers-prod-hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
}
.stiers-prod-hero-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stiers-prod-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
.stiers-prod-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.1) 0%, rgba(1,1,1,0.7) 100%);
}
.stiers-prod-hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 24px 0;
}
.stiers-prod-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 12px;
}
.stiers-prod-h1 {
    font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}
.stiers-prod-h1 span { color: rgba(255,255,255,0.55); }
.stiers-prod-slogan {
    position: relative;
    z-index: 2;
    padding: 0 24px 48px;
}
.stiers-prod-slogan-name {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0 0 6px;
}
.stiers-prod-slogan-text {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 1.5;
}
.stiers-prod-hero-arrow {
    position: absolute;
    bottom: 16px;
    right: 24px;
    z-index: 2;
    font-size: 20px;
    color: rgba(255,255,255,0.4);
    animation: stiers-bounce 2s ease-in-out infinite;
}

/* --- Benefit --- */
.stiers-prod-benefit {
    position: relative;
    min-height: 520px;
    overflow: hidden;
}
.stiers-prod-benefit-inner {
    position: relative;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stiers-prod-benefit-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-prod-benefit-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.1) 30%, rgba(1,1,1,0.85) 100%);
}
.stiers-prod-benefit-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.stiers-prod-h2 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0;
}
.stiers-prod-h2-left {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    margin: 0;
    line-height: 1.3;
}
.stiers-prod-body {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}
.stiers-prod-note {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.5;
    text-align: center;
}
.stiers-prod-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 10px 40px;
    border: 1px solid rgba(242,243,246,0.6);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    align-self: center;
    transition: background 0.3s;
}
.stiers-prod-btn-sec:hover { background: rgba(255,255,255,0.1); }

/* --- Haltung --- */
.stiers-prod-haltung {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}
.stiers-prod-haltung-inner {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stiers-prod-haltung-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-prod-haltung-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 20%, rgba(1,1,1,0.88) 100%);
}
.stiers-prod-haltung-content {
    position: relative;
    z-index: 2;
    padding: 0 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}
.stiers-prod-haltung-content .stiers-prod-body { text-align: center; }

/* --- Duftprofil --- */
.stiers-prod-duft {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}
.stiers-prod-duft-inner {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stiers-prod-duft-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-prod-duft-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 0%, rgba(1,1,1,0.75) 100%);
}
.stiers-prod-duft-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stiers-prod-duft-label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.stiers-prod-duft-type {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px;
}

/* --- Icons --- */
.stiers-prod-icons {
    background: #010101;
    padding: 0;
}
.stiers-prod-icons-inner {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stiers-prod-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.stiers-prod-icon-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.stiers-prod-icon-title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.stiers-prod-icon-sub {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.5;
    max-width: 280px;
}

/* --- Kauf-Karte --- */
.stiers-prod-buy {
    position: relative;
    min-height: 420px;
    overflow: hidden;
}
.stiers-prod-buy-inner {
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stiers-prod-buy-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-prod-buy-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.1) 0%, rgba(1,1,1,0.92) 100%);
}
.stiers-prod-buy-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.stiers-prod-buy-info { display: flex; flex-direction: column; gap: 4px; }
.stiers-prod-buy-name {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.stiers-prod-buy-size {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin: 0;
}
.stiers-prod-buy-price { margin: 8px 0 4px; }
.stiers-prod-price {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.stiers-prod-buy-tax,
.stiers-prod-buy-unit {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}
.stiers-prod-buy-btns {
    display: flex;
    gap: 10px;
}
.stiers-prod-buy-btns .stiers-shop-btn-sec { flex: 1; }
.stiers-prod-buy-btns .stiers-shop-btn-cta { flex: 2; }

/* --- Essenzen --- */
.stiers-prod-essenzen {
    background: #010101;
}
.stiers-prod-essenzen-inner {
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}


/* ============================================================
   WISSEN-SEITE
   ============================================================ */

/* --- Hero --- */
.stiers-wissen-hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
}
.stiers-wissen-hero-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stiers-wissen-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-wissen-hero-overlay-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(1,1,1,0.5) 0%, rgba(1,1,1,0) 100%);
}
.stiers-wissen-hero-overlay-bot {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(1,1,1,0.9) 0%, rgba(1,1,1,0) 100%);
}
.stiers-wissen-hero-top {
    position: relative;
    z-index: 2;
    padding: 80px 24px 0;
}
.stiers-wissen-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 12px;
}
.stiers-wissen-h1 {
    font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}
.stiers-wissen-h1 span { color: rgba(255,255,255,0.55); }
.stiers-wissen-hero-desc {
    position: relative;
    z-index: 2;
    padding: 0 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stiers-wissen-h2-muted {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
    text-align: left;
}
.stiers-wissen-body {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}
.stiers-wissen-arrow {
    position: absolute;
    bottom: 16px;
    right: 24px;
    z-index: 2;
    font-size: 20px;
    color: rgba(255,255,255,0.4);
    animation: stiers-bounce 2s ease-in-out infinite;
}

/* --- Sections (Öl-Infografik) --- */
.stiers-wissen-section {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}
.stiers-wissen-inner {
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stiers-wissen-img-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-wissen-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 10%, rgba(1,1,1,0.85) 60%, rgba(1,1,1,1) 100%);
}
.stiers-wissen-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.stiers-wissen-oils {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stiers-wissen-oil {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.stiers-wissen-oil-name {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #B7BFCC;
    margin: 0 0 2px;
}
.stiers-wissen-oil--warm .stiers-wissen-oil-name { color: #F3C2B9; }
.stiers-wissen-oil-role {
    font-size: 12px;
    font-weight: 300;
    color: #969DA3;
    margin: 0;
    letter-spacing: 0.03em;
}
.stiers-wissen-oil--warm .stiers-wissen-oil-role { color: #E7D5D1; }
.stiers-wissen-oil-line {
    display: none;
}
.stiers-wissen-desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stiers-wissen-eyebrow-sm {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0;
}
.stiers-wissen-btns { display: flex; }

/* --- Essenz-Grid --- */
.stiers-wissen-essenz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
}
.stiers-wissen-essenz {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 10px;
}
.stiers-wissen-essenz-detail {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(242,243,246,0.7);
    margin: 6px 0 0;
}
.stiers-wissen-zusatz {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* --- Artikel-Karten --- */
.stiers-wissen-artikel {
    background: #010101;
    padding: 48px 0;
}
.stiers-wissen-artikel-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
}
.stiers-wissen-artikel-card {
    background: rgba(255,255,255,0.07);
    border: 0.5px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
}
.stiers-wissen-artikel-tag {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0;
}
.stiers-wissen-artikel-h {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.stiers-wissen-artikel-sub {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.6);
    margin: 0;
    flex: 1;
    line-height: 1.5;
}

/* --- CTA --- */
.stiers-wissen-cta {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}
.stiers-wissen-cta-inner {
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stiers-wissen-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-wissen-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 0%, rgba(1,1,1,0.88) 100%);
}
.stiers-wissen-cta-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.stiers-wissen-cta-h {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   Shop card additions (Figma update)
   ============================================================ */
.stiers-shop-card-sep {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 10px 0;
}
.stiers-shop-card-tagline {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.4;
}
.stiers-shop-card-tax {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin: 4px 0 0;
    letter-spacing: 0.03em;
}
.stiers-shop-card-attrs {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}
.stiers-shop-card-unit {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.03em;
    margin: 2px 0 0;
}
.stiers-shop-card-footer-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stiers-shop-btn-cta--sm {
    flex-shrink: 0;
    width: auto;
    padding: 0 16px;
    height: 40px;
    font-size: 11px;
    white-space: nowrap;
}

/* ============================================================
   Kontakt Page
   ============================================================ */
.stiers-kontakt-hero {
    background: #010101;
}
.stiers-kontakt-hero-inner {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 24px 60px;
}
.stiers-kontakt-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
.stiers-kontakt-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.2) 0%, rgba(1,1,1,0.75) 65%, rgba(1,1,1,0.95) 100%);
}
.stiers-kontakt-hero-content {
    position: relative;
    z-index: 2;
}
.stiers-kontakt-h1 {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.15;
    text-transform: uppercase;
}
.stiers-kontakt-tagline {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
    margin: 0;
}
.stiers-kontakt-arrow {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.4);
    font-size: 20px;
    text-align: center;
    margin-top: 40px;
}
.stiers-kontakt-form-section {
    background: #010101;
    padding: 0 0 60px;
}
.stiers-kontakt-form-inner {
    padding: 40px 24px 0;
}
.stiers-kontakt-email-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}
.stiers-kontakt-email-link {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    letter-spacing: 0.04em;
}
.stiers-kontakt-email-link:hover {
    color: #fff;
}
.stiers-kontakt-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
.stiers-kontakt-input,
.stiers-kontakt-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 0 16px;
    height: 44px;
    outline: none;
    transition: border-color 0.2s;
}
.stiers-kontakt-input::placeholder,
.stiers-kontakt-textarea::placeholder {
    color: rgba(255,255,255,0.35);
}
.stiers-kontakt-input:focus,
.stiers-kontakt-textarea:focus {
    border-color: rgba(255,255,255,0.4);
}
.stiers-kontakt-textarea {
    height: auto;
    padding: 14px 16px;
    resize: vertical;
    min-height: 120px;
    margin-bottom: 12px;
}
.stiers-kontakt-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 50px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    margin-top: 8px;
}
.stiers-kontakt-submit:hover {
    background: rgba(255,255,255,0.1);
}
.stiers-kontakt-success {
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    padding: 40px 0;
}
.stiers-kontakt-error {
    color: #ff6b6b;
    font-size: 13px;
    margin: 0 0 12px;
}

/* ============================================================
   Bundle Page
   ============================================================ */
.stiers-bundle-hero {
    background: #010101;
}
.stiers-bundle-hero-inner {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 24px 60px;
}
.stiers-bundle-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-bundle-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.1) 0%, rgba(1,1,1,0.6) 50%, rgba(1,1,1,0.95) 100%);
}
.stiers-bundle-hero-content {
    position: relative;
    z-index: 2;
}
.stiers-bundle-hero-routine {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0 0 12px;
}
.stiers-bundle-h1 {
    font-size: 44px;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.1;
}
.stiers-bundle-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}
.stiers-bundle-hero-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.03em;
    margin: 0 0 28px;
    line-height: 1.5;
}
.stiers-bundle-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 50px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s;
}
.stiers-bundle-hero-btn:hover { background: rgba(255,255,255,0.1); }
.stiers-bundle-hero-arrow {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.4);
    font-size: 20px;
    text-align: center;
    margin-top: 40px;
}

/* Bundle Architektur / Benefits */
.stiers-bundle-arch {
    background: #010101;
    padding: 0;
}
.stiers-bundle-arch-inner {
    padding: 56px 24px 48px;
}
.stiers-bundle-arch-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 16px;
}
.stiers-bundle-arch-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0 0 40px;
}
.stiers-bundle-benefits {
    display: flex;
    flex-direction: column;
    gap: 28px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 32px;
}
.stiers-bundle-benefit {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stiers-bundle-benefit-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px;
}
.stiers-bundle-benefit-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin: 0;
}

/* Bundle product card (reuses shop card styles + own layer) */
.stiers-bundle-card-section {
    background: #010101;
    padding: 0 16px 40px;
}
.stiers-bundle-card-wrap {
    display: flex;
    flex-direction: column;
}
.stiers-bundle-card-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 4px;
    text-align: center;
}
.stiers-bundle-card-sublabel {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
    text-align: center;
}
.stiers-bundle-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}
.stiers-bundle-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stiers-bundle-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0.05) 0%, rgba(1,1,1,0.75) 55%, rgba(1,1,1,0.95) 100%);
}
.stiers-bundle-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    padding: 24px;
}
.stiers-bundle-card-top { margin-bottom: 16px; }
.stiers-bundle-card-name {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
    color: #fff;
}
.stiers-bundle-card-size {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin: 0;
    letter-spacing: 0.05em;
}
.stiers-bundle-card-sep {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 10px 0;
}
.stiers-bundle-card-tagline {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.4;
}
.stiers-bundle-card-tag {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}
.stiers-bundle-card-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.stiers-bundle-price {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.stiers-bundle-price-old {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    text-decoration: line-through;
}
.stiers-bundle-card-tax {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin: 0;
    letter-spacing: 0.03em;
}
.stiers-bundle-card-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stiers-bundle-card-attrs {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}
.stiers-bundle-btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #fff;
    border-radius: 50px;
    background: #fff;
    color: #010101;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s;
}
.stiers-bundle-btn-cta:hover { background: rgba(255,255,255,0.85); }
.stiers-bundle-btn-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid rgba(242,243,246,0.5);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s;
}
.stiers-bundle-btn-sec:hover { background: rgba(255,255,255,0.1); }

/* Bundle Synergy section */
.stiers-bundle-synergy {
    background: #010101;
    padding: 0;
}
.stiers-bundle-synergy-inner {
    display: flex;
    flex-direction: column;
}
.stiers-bundle-synergy-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.stiers-bundle-synergy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.stiers-bundle-synergy-content {
    padding: 32px 24px 48px;
}
.stiers-bundle-synergy-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 12px;
}
.stiers-bundle-synergy-h {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.2;
}
.stiers-bundle-synergy-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin: 0 0 24px;
}

/* Bundle Apply section */
.stiers-bundle-apply {
    background: #010101;
    padding: 0;
}
.stiers-bundle-apply-h {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 48px 24px 0;
    margin: 0;
}
.stiers-bundle-apply-item {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}
.stiers-bundle-apply-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.stiers-bundle-apply-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.stiers-bundle-apply-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,1,1,0) 50%, rgba(1,1,1,0.8) 100%);
}
.stiers-bundle-apply-content {
    padding: 28px 24px 48px;
}
.stiers-bundle-apply-title {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 6px;
}
.stiers-bundle-apply-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
    margin: 0 0 14px;
}
.stiers-bundle-apply-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0 0 20px;
}

/* Bundle Brand footer */
.stiers-bundle-brand {
    background: #010101;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.stiers-bundle-brand-inner {
    padding: 56px 24px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.stiers-bundle-brand-logo {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.25em;
    color: rgba(255,255,255,0.3);
    margin: 0;
    text-transform: uppercase;
}
.stiers-bundle-brand-h {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}
.stiers-bundle-brand-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

/* ============================================================
   Cart Page (Figma 2379:8935)
   ============================================================ */
.stiers-cartpage {
    background: #010101;
    min-height: 100svh;
}
.stiers-cartpage-inner {
    padding: 20px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* hide floating cart icon on cart + checkout page */
.woocommerce-cart a.stiers-cart,
.woocommerce-checkout a.stiers-cart { display: none !important; }

/* Header row */
.stiers-cart-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 8px;
    height: 60px;
}
.stiers-cart-title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.stiers-cart-refresh {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.2s;
}
.stiers-cart-refresh:hover { background: rgba(255,255,255,0.1); }

/* Item rows */
.stiers-cart-items { display: flex; flex-direction: column; }
.stiers-cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

/* Left group: image + name/size */
.stiers-cart-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.stiers-cart-item-img {
    width: 45px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}
.stiers-cart-item-img a { display: block; width: 45px; height: 65px; }
.stiers-cart-item-img img {
    width: 45px;
    height: 65px;
    object-fit: cover;
    display: block;
}
.stiers-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.stiers-cart-item-name {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: 1.2;
    display: block;
}
.stiers-cart-item-size {
    font-size: 12px;
    color: #4F4F4F;
    letter-spacing: 0.03em;
}

/* Qty stepper column */
.stiers-cart-item-qty {
    flex-shrink: 0;
    width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.stiers-cart-qty-control {
    display: flex;
    align-items: center;
    gap: 7px;
}
.stiers-qty-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: #fff;
    color: #010101;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
}
.stiers-qty-input {
    width: 20px;
    text-align: center;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 0;
    -moz-appearance: textfield;
}
.stiers-qty-input::-webkit-outer-spin-button,
.stiers-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stiers-cart-qty-single {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

/* Price */
.stiers-cart-item-price {
    flex-shrink: 0;
    width: 57px;
    text-align: right;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0;
}
.stiers-cart-item-price .woocommerce-Price-amount,
.stiers-cart-item-price bdi { color: #fff; font-weight: 300; }

/* Remove */
.stiers-cart-item-remove { flex-shrink: 0; }
.stiers-cart-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.stiers-cart-remove:hover { opacity: 0.8; }
.stiers-cart-remove svg { fill: #fff; display: block; }

/* Subtotal */
.stiers-cart-subtotal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 37px;
}
.stiers-cart-subtotal-label {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}
.stiers-cart-subtotal-amount {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}
.stiers-cart-subtotal-amount .woocommerce-Price-amount,
.stiers-cart-subtotal-amount bdi { color: #fff; }

/* Coupon + continue */
.stiers-cart-lower {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-bottom: 32px;
}
.stiers-coupon-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.stiers-coupon-input {
    width: 100%;
    height: 55px;
    background: #151414;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0 24px;
    outline: none;
    box-sizing: border-box;
}
.stiers-coupon-input::placeholder { color: rgba(255,255,255,0.55); }
.stiers-coupon-btn {
    width: 100%;
    height: 55px;
    border-radius: 50px;
    border: 1px solid rgba(242,243,246,0.6);
    background: transparent;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}
.stiers-coupon-btn:hover { background: rgba(255,255,255,0.1); }
.stiers-cart-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px;
    border-radius: 50px;
    background: #fff;
    color: #010101;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}
.stiers-cart-continue:hover { background: rgba(255,255,255,0.85); }

/* Summary box */
.stiers-cart-summary-box {
    background: rgba(255,255,255,0.07);
    border: 0.5px solid rgba(255,255,255,0.18);
    border-radius: 39px;
    padding: 29px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.stiers-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    border-radius: 50px;
    background: #fff;
    color: #010101;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}
.stiers-cart-checkout-btn:hover { background: rgba(255,255,255,0.85); color: #010101; }
.stiers-cart-summary-heading {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.stiers-cart-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.stiers-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}
.stiers-cart-summary-row--total {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-top: 14px;
    border-bottom: none;
}
.stiers-cart-summary-row--total span:last-child {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
}
.stiers-cart-summary-row--tax {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
    border-bottom: none;
    padding-top: 4px;
    padding-bottom: 0;
}
.stiers-cart-summary-row .woocommerce-Price-amount,
.stiers-cart-summary-row bdi { color: inherit; }

/* WC notices on cart page */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    padding: 14px 20px;
    margin-bottom: 16px;
    list-style: none;
}
.woocommerce-notices-wrapper a { color: #fff; }

/* ─── CHECKOUT PAGE ─────────────────────────────────── */

/* Page layout */
.woocommerce-checkout main.wp-block-group {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.woocommerce-checkout .entry-content > .woocommerce {
    padding: 80px 20px 60px;
    max-width: 100%;
}

/* Two columns → single column on mobile */
.woocommerce-checkout .col2-set {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    float: none;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
}
.woocommerce-checkout .col-2 { display: none; } /* hide extra fields */

/* Section headings */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 24px;
    border: none;
}
.woocommerce-checkout #order_review_heading { margin-top: 40px; }

/* Form rows */
.woocommerce-checkout .form-row {
    margin: 0 0 12px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    clear: none;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { clear: none; }

/* Labels */
.woocommerce-checkout .form-row label:not(.screen-reader-text) {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    display: block;
    margin-bottom: 6px;
}
.woocommerce-checkout .required { color: #C50000; }

/* Text inputs */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=password] {
    width: 100% !important;
    height: 52px !important;
    background: #151414 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    padding: 0 20px !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input[type=text]:focus,
.woocommerce-checkout input[type=email]:focus,
.woocommerce-checkout input[type=tel]:focus {
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: none !important;
}

/* Textarea (order notes) */
.woocommerce-checkout textarea,
.woocommerce-checkout textarea.input-text {
    height: auto !important;
    border-radius: 20px !important;
    padding: 14px 20px !important;
    min-height: 90px !important;
    resize: vertical;
}

/* Select2 */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 52px;
    background: #151414;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px;
    display: flex;
    align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    padding: 0 20px;
    line-height: 52px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px;
    right: 16px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255,255,255,0.55) transparent transparent;
}
.select2-dropdown {
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
}
.select2-container--default .select2-results__option {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    padding: 9px 16px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.select2-search--dropdown .select2-search__field {
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
}

/* Coupon toggle */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 14px 20px;
    color: rgba(255,255,255,0.7);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    gap: 10px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner svg { display: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon { color: #fff; }

/* Coupon form */
.woocommerce-checkout .checkout_coupon {
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.woocommerce-checkout .checkout_coupon .form-row { margin: 0 !important; }
.woocommerce-checkout .checkout_coupon .button {
    width: 100%;
    height: 52px;
    border-radius: 50px;
    border: 1px solid rgba(242,243,246,0.6);
    background: transparent;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Order review table */
.woocommerce-checkout #order_review {
    background: rgba(255,255,255,0.07);
    border: 0.5px solid rgba(255,255,255,0.18);
    border-radius: 24px;
    padding: 24px;
    margin-top: 0;
}
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border: none;
}
.woocommerce-checkout-review-order-table thead th {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}
.woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
}
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table tfoot tr:last-child td,
.woocommerce-checkout-review-order-table tfoot tr:last-child th { border-bottom: none; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-top: 14px;
    border-bottom: none;
}
.woocommerce-checkout-review-order-table .order-total td strong {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
}
.woocommerce-checkout-review-order-table .woocommerce-Price-amount { color: inherit; }

/* Payment section */
.woocommerce-checkout #payment {
    background: transparent;
    border: none;
    padding: 20px 0 0;
    margin: 0;
    border-radius: 0;
}
.woocommerce-checkout #payment .wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    overflow: hidden;
}
.woocommerce-checkout #payment .wc_payment_method {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
}
.woocommerce-checkout #payment .wc_payment_method:last-child { border-bottom: none; }
.woocommerce-checkout #payment .wc_payment_method > label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: normal;
    text-transform: none;
    margin: 0;
}
.woocommerce-checkout #payment .wc_payment_method input[type=radio] { display: inline-block; accent-color: #fff; }
.woocommerce-checkout #payment .payment_box {
    background: transparent !important;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    padding: 8px 0 0 26px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.woocommerce-checkout #payment .payment_box p { margin: 0; }
.woocommerce-checkout #payment .payment_box::before { display: none !important; }

/* Privacy policy + place order */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: rgba(255,255,255,0.35);
    text-align: center;
    margin-bottom: 14px;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p { margin: 0; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text a { color: rgba(255,255,255,0.55); }

/* Place order button */
.woocommerce-checkout #place_order {
    width: 100%;
    height: 55px;
    border-radius: 50px;
    background: #fff;
    color: #010101;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
}
.woocommerce-checkout #place_order:hover { background: rgba(255,255,255,0.88); }

/* PayPal express button wrapper */
.ppc-button-wrapper { margin-top: 12px; }

/* Hide WC default proceed-to-checkout button in our custom cart */
.stiers-cart-summary-box .checkout-button,
.stiers-cart-summary-box a.checkout-button { display: none !important; }

/* Style the PPCP PayPal button container in cart summary */
.stiers-cart-summary-box .ppc-button-wrapper {
    width: 100%;
    margin: 0;
}
.stiers-cart-summary-box #ppc-button-ppcp-gateway {
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
}

/* WC notices on checkout */
.woocommerce-checkout .wc-block-components-notice-banner {
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    margin-bottom: 16px;
}

/* Suppress the block-theme top padding that creates empty space */
.woocommerce-checkout [data-block-name="woocommerce/store-notices"] {
    margin-bottom: 0;
}
.woocommerce-checkout [data-block-name="woocommerce/page-content-wrapper"] {
    padding-top: 0 !important;
}
/* Billing section German labels */
.woocommerce-checkout .woocommerce-billing-fields > h3::after { content: ''; }

/* Warenkorb: Gratisversand-Bar */
.stiers-free-shipping-bar {
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1rem;
}
.stiers-free-shipping-bar--active {
    color: #a8d5a2;
    background: rgba(168,213,162,0.08);
}
.stiers-free-shipping-progress {
    margin-top: 0.5rem;
    height: 3px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    overflow: hidden;
}
.stiers-free-shipping-fill {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Warenkorb: Aktualisieren-Button und alle WooCommerce-Hinweise ausblenden */
.stiers-cart-refresh { display: none !important; }
.woocommerce-notices-wrapper,
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info { display: none !important; }

/* Page transitions */
@keyframes stiers-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Cross-fade für Chrome 126+ (MPA View Transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.6s; animation-timing-function: ease; }

/* Fade-in-Fallback für Browser ohne View Transitions */
@supports not (view-transition-name: none) {
    body { animation: stiers-page-in 0.6s ease both; }
}



/* ═══════════════════════════════════════════════════
   CONVERSION HOMEPAGE — /v2
═══════════════════════════════════════════════════ */

/* ── Shared utilities ──────────────────────────── */
.conv-stars-gold { color: #c9933a; }
.conv-stars-sm   { font-size: 12px; letter-spacing: 1px; }
.conv-stars-lg   { font-size: 22px; letter-spacing: 2px; }
.conv-eyebrow    { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
                   color: rgba(255,255,255,0.45); margin: 0 0 0.6rem; }

.conv-btn-primary {
    display: block; text-align: center;
    padding: 0.9rem 1.5rem;
    background: #fff; color: #010101;
    text-decoration: none;
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: opacity 0.2s;
}
.conv-btn-primary:hover { opacity: 0.88; }

.conv-btn-ghost {
    display: block; text-align: center;
    padding: 0.8rem 1.5rem;
    background: transparent; color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.22);
    text-decoration: none;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    transition: border-color 0.2s, color 0.2s;
}
.conv-btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

.conv-btn-sm { padding: 0.7rem 1rem; font-size: 11px; }

/* ── Hero ──────────────────────────────────────── */
.conv-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #010101;
    overflow: hidden;
}
.conv-hero-bg-wrap {
    position: absolute; inset: 0;
}
.conv-hero-bg-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
}
.conv-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(1,1,1,0.9) 0%,
        rgba(1,1,1,0.45) 45%,
        rgba(1,1,1,0.15) 100%
    );
}
.conv-hero-content {
    position: relative; z-index: 2;
    padding: 2rem 1.5rem 3.5rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.conv-hero-trust {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 12px; color: rgba(255,255,255,0.65);
}
.conv-hero-trust-label { letter-spacing: 0.02em; }
.conv-hero-eyebrow {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); margin: 0;
}
.conv-hero-h1 {
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.02em; line-height: 1.08;
    color: #fff; margin: 0.2rem 0;
}
.conv-hero-sub {
    font-size: 13px; color: rgba(255,255,255,0.55);
    line-height: 1.65; margin: 0;
}
.conv-ctas { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }

/* ── Trust Bar ─────────────────────────────────── */
.conv-trustbar { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.06); }
.conv-trustbar-inner {
    display: flex; justify-content: space-between;
    padding: 1.2rem 1rem;
    max-width: 420px; margin: 0 auto;
}
.conv-trust-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.35rem;
    flex: 1;
}
.conv-trust-item + .conv-trust-item {
    border-left: 1px solid rgba(255,255,255,0.07);
}
.conv-trust-icon {
    color: rgba(255,255,255,0.5); flex-shrink: 0;
}
.conv-trust-item span:last-child {
    font-size: 10px; text-align: center; line-height: 1.4;
    color: rgba(255,255,255,0.5); text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Products ──────────────────────────────────── */
.conv-products { background: #010101; }
.conv-products-inner {
    padding: 3.5rem 1.5rem;
    max-width: 420px; margin: 0 auto;
}
.conv-products-head { margin-bottom: 2rem; }
.conv-products-h2 {
    font-size: 1.6rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; color: #fff; margin: 0;
}
.conv-prodgrid { display: flex; flex-direction: column; gap: 1.5rem; }
.conv-prodcard {
    background: #111; border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.conv-prodcard-img-link { display: block; }
.conv-prodcard-img {
    /* Box exakt im Format der shop-card-Bilder (804x854):
       füllt die Kartenbreite komplett, nichts wird beschnitten */
    width: 100%; aspect-ratio: 804/854;
    object-fit: cover; object-position: center;
    display: block;
    transition: transform 0.4s ease;
}
.conv-prodcard:hover .conv-prodcard-img { transform: scale(1.02); }
.conv-prodcard-body { padding: 1.2rem 1rem 1rem; }
.conv-prodcard-top {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 1rem; margin-bottom: 0.6rem;
}
.conv-prodcard-name {
    font-size: 14px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.08em; color: #fff; margin: 0 0 0.2rem;
}
.conv-prodcard-size {
    font-size: 11px; color: rgba(255,255,255,0.35);
    font-weight: 400; letter-spacing: 0;
}
.conv-prodcard-tagline {
    font-size: 11px; color: rgba(255,255,255,0.45);
    margin: 0; letter-spacing: 0.04em;
}
.conv-prodcard-stars-wrap { text-align: right; flex-shrink: 0; }
.conv-prodcard-count {
    display: block; font-size: 10px;
    color: rgba(255,255,255,0.35); margin-top: 2px;
}
.conv-prodcard-desc {
    font-size: 11px; color: rgba(255,255,255,0.4);
    line-height: 1.6; margin: 0 0 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.7rem;
}
.conv-prodcard-footer {
    display: flex; align-items: center;
    justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; /* Preis darf nicht abgeschnitten werden */
}
.conv-prodcard-price {
    font-size: 18px; font-weight: 500; color: #fff;
    white-space: nowrap;
}
.conv-prodcard-price del { color: rgba(255,255,255,0.3); font-size: 13px; }
.conv-prodcard-actions { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.conv-prodcard-details {
    font-size: 11px; text-align: center;
    color: rgba(255,255,255,0.7); text-decoration: none;
    letter-spacing: 0.08em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.6rem 1.1rem;
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s;
}
.conv-prodcard-details:hover { color: #fff; border-color: rgba(255,255,255,0.6); }

/* ── Social Proof ──────────────────────────────── */
.conv-proof { background: #080808; border-top: 1px solid rgba(255,255,255,0.05); }
.conv-proof-inner { padding: 3.5rem 1.5rem; max-width: 420px; margin: 0 auto; }
.conv-proof-counter {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.conv-proof-score {
    font-size: 1.1rem; font-weight: 500; color: #fff; margin: 0;
}
.conv-proof-total {
    font-size: 11px; color: rgba(255,255,255,0.4); margin: 0.1rem 0 0;
}
.conv-proof-grid { display: flex; flex-direction: column; gap: 1rem; }
.conv-proof-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1rem;
}
.conv-proof-card-top {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.conv-proof-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
}
.conv-proof-name {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8);
    margin: 0 0 2px;
}
.conv-proof-quote {
    font-size: 13px; color: rgba(255,255,255,0.55);
    line-height: 1.6; margin: 0; font-style: italic;
}

/* ── Why STIERS ────────────────────────────────── */
.conv-why { background: #010101; border-top: 1px solid rgba(255,255,255,0.05); }
.conv-why-inner { padding: 3.5rem 1.5rem; max-width: 420px; margin: 0 auto; }
.conv-why-h2 {
    font-size: 1.6rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; color: #fff; margin: 0 0 2rem;
}
.conv-why-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.conv-why-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.conv-why-icon {
    color: #c9933a; font-size: 10px; flex-shrink: 0;
    margin-top: 3px; line-height: 1.6;
}
.conv-why-text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.65; }
.conv-why-link { max-width: 220px; }

/* ── Bundle ────────────────────────────────────── */
.conv-bundle { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.conv-bundle-inner {
    padding: 3.5rem 1.5rem;
    max-width: 420px; margin: 0 auto;
    position: relative;
}
.conv-bundle-badge {
    display: inline-block;
    background: #c9933a; color: #010101;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1.5rem;
}
.conv-bundle-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    align-items: center;
}
.conv-bundle-img { width: 100%; display: block; }
.conv-bundle-h2 {
    font-size: 1.4rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; color: #fff;
    margin: 0.3rem 0 0.75rem; line-height: 1.2;
}
.conv-bundle-desc {
    font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; margin: 0 0 1rem;
}
.conv-bundle-pricing { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; }
.conv-bundle-price { font-size: 1.4rem; font-weight: 500; color: #fff; }
.conv-bundle-was {
    font-size: 11px; color: rgba(255,255,255,0.35);
    text-decoration: line-through;
}
.conv-bundle-details { margin-top: 0.6rem; font-size: 11px; }

/* ── Newsletter ────────────────────────────────── */
.conv-newsletter {
    background: #080808;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.conv-newsletter-inner { padding: 3.5rem 1.5rem 4rem; max-width: 420px; margin: 0 auto; }
.conv-newsletter-h2 {
    font-size: 1.6rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; color: #fff; margin: 0 0 0.75rem; line-height: 1.2;
}
.conv-newsletter-sub {
    font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 0 0 1.5rem;
}
.conv-newsletter-row { display: flex; flex-direction: column; gap: 0.6rem; }
.conv-newsletter-input {
    width: 100%; padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-size: 13px;
    outline: none; box-sizing: border-box;
    transition: border-color 0.2s;
}
.conv-newsletter-input::placeholder { color: rgba(255,255,255,0.3); }
.conv-newsletter-input:focus { border-color: rgba(255,255,255,0.35); }
.conv-newsletter-btn { width: 100%; border: none; cursor: pointer; font-family: inherit; }
.conv-newsletter-legal {
    font-size: 10px; color: rgba(255,255,255,0.25); line-height: 1.6;
    margin: 0.75rem 0 0;
}
.conv-newsletter-legal a { color: rgba(255,255,255,0.4); text-decoration: underline; }
.conv-newsletter-success { text-align: center; display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Rechtliche Pflichtangaben ─────────────────── */
.stiers-grundpreis {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.03em;
    margin-top: 2px;
}
.stiers-card-unit {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    margin: 0.3rem 0 0;
    letter-spacing: 0.03em;
}

/* ── Checkout: AGB + Widerruf Checkbox ────────── */
.stiers-consent-wrap {
    margin: 1rem 0 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
}
.stiers-consent-label {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}
.stiers-consent-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    width: 15px;
    height: 15px;
    accent-color: #fff;
    cursor: pointer;
}
.stiers-consent-label a {
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}
.stiers-consent-label .required { color: #c9933a; }

/* ── Checkout: MwSt.-Hinweis unter Gesamtbetrag ─ */
.stiers-tax-note td {
    padding-top: 0.5rem !important;
    font-size: 11px;
    color: rgba(255,255,255,0.35) !important;
    line-height: 1.5;
}
.stiers-tax-note a { color: rgba(255,255,255,0.5); text-decoration: underline; }

/* ── Lieferzeit ────────────────────────────────── */
.stiers-prod-buy-delivery,
.conv-prodcard-delivery {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.04em;
    margin: 0.2rem 0 0;
}
.stiers-prod-buy-tax a,
.stiers-bundle-card-tax a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── ORDER RECEIVED / BESTELLBESTÄTIGUNG ───────────── */
.woocommerce-order-received main.stiers-orec.wp-block-group,
.stiers-orec {
    max-width: 402px;
    margin: 0 auto;
    padding: 110px 20px 60px !important;
    background: #010101;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.stiers-orec > * { margin: 0 !important; }

/* Status-Headline ("Danke. Deine Bestellung ist eingegangen.") */
.stiers-orec .wc-block-order-confirmation-status {
    font-size: 18px !important;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #fff;
    text-align: left;
}
.stiers-orec .wc-block-order-confirmation-status p { margin: 0; font-size: inherit; }
.stiers-orec .wc-block-order-confirmation-status-description {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.45;
    color: rgba(255,255,255,0.7);
    text-transform: none;
    letter-spacing: 0;
}
.stiers-orec .wc-block-order-confirmation-status-description p { margin: 0; }
.stiers-orec .wc-block-order-confirmation-status-description a.button {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    color: #fff;
    text-decoration: underline;
    font-size: inherit;
}

/* Summary-Box (Bestellnummer, Datum, Summe, Zahlungsart) */
.stiers-orec .wc-block-order-confirmation-summary {
    background: rgba(255,255,255,0.07);
    border: 0.5px solid rgba(255,255,255,0.18);
    border-radius: 39px;
    padding: 24px 28px;
}
.stiers-orec .wc-block-order-confirmation-summary-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
.stiers-orec .wc-block-order-confirmation-summary-list-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border: none;
    padding: 0;
    margin: 0;
    flex-basis: auto;
}
/* Ohne min-width:0 koennen Flex-Kinder nicht unter ihre Inhaltsbreite schrumpfen —
   eine lange E-Mail-Adresse sprengte die Zeile, und der Browser brach sie
   mitten im Wort um, sodass der letzte Buchstabe allein stand. */
.stiers-orec .wc-block-order-confirmation-summary-list-item__key,
.stiers-orec .wc-block-order-confirmation-summary-list-item__value {
    min-width: 0;
}
.stiers-orec .wc-block-order-confirmation-summary-list-item__key {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.stiers-orec .wc-block-order-confirmation-summary-list-item__value {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: right;
    /* word-break:break-word trennt an jeder Stelle, auch nach einem einzelnen
       Buchstaben. overflow-wrap:anywhere bricht nur, wenn es sonst nicht passt,
       und bevorzugt vorhandene Trennstellen wie @ oder Punkt. */
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Abschnitts-Überschriften */
.stiers-orec .stiers-orec-h {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px !important;
}

/* Bestellübersicht (Positionen + Summen) */
.stiers-orec .wc-block-order-confirmation-totals table,
.stiers-orec .wc-block-order-confirmation-totals {
    width: 100%;
    border: none;
    border-collapse: collapse;
    font-size: 14px;
    background: none;
}
.stiers-orec .wc-block-order-confirmation-totals th,
.stiers-orec .wc-block-order-confirmation-totals td {
    border: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.12);
    padding: 12px 0;
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    text-align: left;
    background: none;
}
.stiers-orec .wc-block-order-confirmation-totals td:last-child,
.stiers-orec .wc-block-order-confirmation-totals th:last-child { text-align: right; }
.stiers-orec .wc-block-order-confirmation-totals thead th {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.stiers-orec .wc-block-order-confirmation-totals tfoot th,
.stiers-orec .wc-block-order-confirmation-totals tfoot td { font-weight: 400; color: #fff; }
.stiers-orec .wc-block-order-confirmation-totals tfoot tr:last-child th,
.stiers-orec .wc-block-order-confirmation-totals tfoot tr:last-child td {
    border-bottom: none;
    font-size: 16px;
    font-weight: 500;
    padding-top: 16px;
}
.stiers-orec .wc-block-order-confirmation-totals .wc-item-meta { list-style: none; padding: 0; margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,0.55); }
.stiers-orec .wc-block-order-confirmation-totals a { color: #fff; text-decoration: none; }
.stiers-orec .product-quantity { font-weight: 300; color: rgba(255,255,255,0.55); }

/* Adressen */
.stiers-orec .wc-block-order-confirmation-address-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.stiers-orec .wc-block-order-confirmation-shipping-wrapper address,
.stiers-orec .wc-block-order-confirmation-billing-wrapper address {
    font-style: normal;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
}
.stiers-orec .wc-block-order-confirmation-shipping-wrapper .woocommerce-customer-details--phone,
.stiers-orec .wc-block-order-confirmation-billing-wrapper .woocommerce-customer-details--phone,
.stiers-orec .wc-block-order-confirmation-shipping-wrapper .woocommerce-customer-details--email,
.stiers-orec .wc-block-order-confirmation-billing-wrapper .woocommerce-customer-details--email {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.55);
}

/* CTA */
.stiers-orec-cta { display: flex; justify-content: center; padding-top: 8px; }
.stiers-orec-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    min-width: 230px;
    background: #fff;
    color: #010101 !important;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
}

/* Header-Overlay-Fix: Seite beginnt unter dem fixen Header */
.woocommerce-order-received main.wp-block-group { margin-block-start: 0 !important; }
.woocommerce-order-received a.stiers-cart { display: none !important; }


/* ═══════════════════════════════════════════════════
   CONVERSION-LANDINGPAGE — /v4
═══════════════════════════════════════════════════ */

/* ── Shared ────────────────────────────────────── */
.v4-inner {
    padding: 3.5rem 1.5rem;
    max-width: 420px; margin: 0 auto;
}
.v4-h2 {
    font-size: 1.5rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; line-height: 1.25;
    color: #fff; margin: 0 0 0.75rem;
}
.v4-center { text-align: center; }
.v4-btn-gold {
    background: #c9933a; color: #010101;
    font-weight: 600;
}
.v4-btn-gold:hover { background: #d9a44b; }

/* ── Hero ──────────────────────────────────────── */
.v4-hero {
    position: relative;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: #010101; overflow: hidden;
}
/* Überblendung: oben Verlauf für Sterne + Headline, Mitte frei,
   unten Abdunklung für Subline und CTA. */
.v4-hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(1,1,1,0.7) 0%,
            rgba(1,1,1,0.35) 150px,
            rgba(1,1,1,0) 280px
        ),
        linear-gradient(
            to top,
            rgba(1,1,1,0.9) 0%,
            rgba(1,1,1,0.5) 22%,
            rgba(1,1,1,0) 48%
        );
}
.v4-hero-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.5rem 0;
    max-width: 420px; margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}
.v4-hero-trustline {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; margin: 0;
    font-size: 12px; color: rgba(255,255,255,0.75);
}
.v4-hero-content {
    position: relative; z-index: 2;
    padding: 2rem 1.5rem 2.25rem;
    max-width: 420px; margin: 0 auto; width: 100%;
    box-sizing: border-box;
    display: flex; flex-direction: column; gap: 0.9rem;
}
.v4-hero-h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem);
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.02em; line-height: 1.14;
    color: #fff; margin: 0;
    text-wrap: balance;
}
.v4-hero-sub {
    font-size: 13px; color: rgba(255,255,255,0.65);
    line-height: 1.65; margin: 0 0 0.3rem;
}
.v4-hero-more {
    align-self: center;
    margin-top: 0.2rem;
    font-size: 12px; letter-spacing: 0.03em;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-bottom: 2px;
}
.v4-hero-more:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.v4-hero-checks {
    list-style: none; padding: 0; margin: 0.4rem 0 0;
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
}
.v4-hero-checks li {
    font-size: 11px; color: rgba(255,255,255,0.55);
    display: flex; align-items: center; gap: 0.35rem;
}
.v4-hero-checks li::before {
    content: "✓"; color: #c9933a; font-weight: 600;
}
.v4-checks-center { justify-content: center; }

/* ── Problem ───────────────────────────────────── */
.v4-problem { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v4-pain-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.v4-pain {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #111; border: 1px solid rgba(255,255,255,0.07);
    padding: 1.1rem 1rem;
}
.v4-pain-num {
    font-size: 13px; color: #c9933a; font-weight: 600;
    letter-spacing: 0.06em; line-height: 1.6;
}
.v4-pain-h {
    font-size: 14px; font-weight: 500; color: #fff;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 0.3rem;
}
.v4-pain-p { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 0; }
.v4-bridge {
    margin: 1.75rem 0 0; font-size: 14px; line-height: 1.6;
    color: rgba(255,255,255,0.75);
}
.v4-bridge strong { color: #fff; }

/* ── Angebot ───────────────────────────────────── */
.v4-offer { background: #010101; scroll-margin-top: 80px; }
.v4-offer-badge {
    display: inline-block;
    background: #c9933a; color: #010101;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.3rem 0.75rem; margin-bottom: 1.25rem;
}
.v4-offer-sub { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0 0 1.25rem; }
.v4-offer-img-wrap {
    background: #111; border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 1.25rem;
}
.v4-offer-img { width: 100%; display: block; }
.v4-offer-checks { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.v4-offer-checks li {
    font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6;
    padding: 0.45rem 0 0.45rem 1.6rem; position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.v4-offer-checks li::before {
    content: "✓"; position: absolute; left: 0;
    color: #c9933a; font-weight: 600;
}
.v4-offer-checks strong { color: #fff; font-weight: 500; }
.v4-offer-pricing { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; }
.v4-offer-price { font-size: 1.8rem; font-weight: 500; color: #fff; }
.v4-offer-was { font-size: 12px; color: rgba(255,255,255,0.35); text-decoration: line-through; }
.v4-offer-percent {
    font-size: 11px; font-weight: 600; color: #c9933a;
    border: 1px solid #c9933a; padding: 0.1rem 0.4rem;
}
.v4-offer-risk {
    margin: 0.75rem 0 0; font-size: 11.5px; text-align: center;
    color: rgba(255,255,255,0.45);
}

/* ── Steps ─────────────────────────────────────── */
.v4-steps { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v4-steps-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.v4-step { display: flex; gap: 1.1rem; align-items: flex-start; }
.v4-step-num {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #c9933a; color: #c9933a;
    font-size: 14px; font-weight: 600;
}
.v4-step-h {
    font-size: 14px; font-weight: 500; color: #fff;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0.2rem 0 0.3rem;
}
.v4-step-p { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 0; }

/* ── Garantie ──────────────────────────────────── */
.v4-guarantee { background: #010101; }
.v4-guarantee .v4-inner { text-align: center; }
.v4-guarantee-seal { margin-bottom: 1rem; }
.v4-guarantee-p {
    font-size: 13.5px; color: rgba(255,255,255,0.6);
    line-height: 1.7; margin: 0 0 1.5rem;
}
.v4-guarantee-list {
    list-style: none; padding: 0; margin: 0;
    text-align: left; display: inline-block;
}
.v4-guarantee-list li {
    font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.6;
    padding: 0.4rem 0 0.4rem 1.6rem; position: relative;
}
.v4-guarantee-list li::before {
    content: "✓"; position: absolute; left: 0;
    color: #c9933a; font-weight: 600;
}

/* ── FAQ ───────────────────────────────────────── */
.v4-faq { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v4-faq-list { margin-top: 1.5rem; }
.v4-faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.v4-faq-q {
    cursor: pointer; list-style: none;
    font-size: 13.5px; font-weight: 500; color: #fff;
    padding: 1rem 2rem 1rem 0;
    position: relative;
}
.v4-faq-q::-webkit-details-marker { display: none; }
.v4-faq-q::after {
    content: "+"; position: absolute; right: 0.25rem; top: 50%;
    transform: translateY(-50%);
    color: #c9933a; font-size: 18px; font-weight: 400;
    transition: transform 0.2s ease;
}
.v4-faq-item[open] .v4-faq-q::after { content: "–"; }
.v4-faq-a {
    font-size: 12.5px; color: rgba(255,255,255,0.55);
    line-height: 1.7; margin: 0; padding: 0 0 1.1rem;
}

/* ── Finaler CTA ───────────────────────────────── */
.v4-final { background: #010101; border-top: 1px solid rgba(255,255,255,0.05); }
.v4-final .v4-inner { padding-bottom: 7rem; } /* Platz für Sticky-Leiste */
.v4-final-sub {
    font-size: 13px; color: rgba(255,255,255,0.55);
    line-height: 1.65; margin: 0 0 1.25rem;
}
.v4-final-pricing {
    display: flex; align-items: center; justify-content: center;
    gap: 0.6rem; margin-bottom: 1.25rem;
}
.v4-final-rating { font-size: 12px; color: rgba(255,255,255,0.55); }
.v4-final-alt {
    display: block; margin-top: 0.9rem;
    font-size: 12px; color: rgba(255,255,255,0.5);
    text-decoration: underline; text-underline-offset: 3px;
}
.v4-final-alt:hover { color: #fff; }

/* ── Sticky Kaufleiste ─────────────────────────── */
.v4-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    max-width: 420px; margin: 0 auto;
    padding: 0.7rem 1rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(13,13,13,0.97);
    border-top: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
}
.v4-sticky-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.v4-sticky-name {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.6); white-space: nowrap;
}
.v4-sticky-price { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.v4-sticky-price s { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.35); margin-left: 0.3rem; }
.v4-sticky-btn {
    flex-shrink: 0;
    background: #c9933a; color: #010101;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    text-decoration: none;
    padding: 0.75rem 1.1rem;
}
.v4-sticky-btn:hover { background: #d9a44b; }

/* V6: Upsell-Section optisch von der Solo-Offer absetzen */
.v6-upsell { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }

/* ═══ V7: Buttons mit runden Ecken wie auf der Startseite (theme.json: 50px) ═══ */
.v7-page .conv-btn-primary,
.v7-page .conv-btn-ghost,
.v7-page .v4-sticky-btn { border-radius: 50px; }

/* ═══ V7: Hero-Typo & Hintergrundbild wie auf der Startseite (.sx-hero) ═══ */
.v7-page .v4-hero-h1 {
    font-weight: 300; font-size: 34px;
    line-height: 1.22; letter-spacing: 0.05em;
    color: rgba(255,255,255,0.55);
}
.v7-page .v4-hero-sub {
    font-weight: 300; font-size: 14px;
    color: rgba(255,255,255,0.55);
}
.v7-page .conv-hero-bg-img { object-position: center; }
.v7-page .v4-hero-overlay { display: none; }

/* ═══ V7: System-Section — Zwei Zonen (Rot = privat, Blau = sichtbar) ═══ */
.v7-system { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); scroll-margin-top: 80px; }
.v7-badge-rot { background: #C50000; color: #fff; }
.v7-zones { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.v7-zone {
    background: #111; border: 1px solid rgba(255,255,255,0.07);
    border-top: 2px solid transparent;
    padding: 1.2rem 1rem 1.1rem;
}
.v7-zone--rot  { border-top-color: #C50000; }
.v7-zone--blau { border-top-color: #193D83; }
.v7-zone-kicker {
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); margin: 0 0 0.35rem;
}
.v7-zone-h {
    font-size: 15px; font-weight: 500; color: #fff;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 0 0 0.4rem;
}
.v7-zone-p { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.65; margin: 0 0 0.8rem; }
.v7-zone-link {
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.6); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px;
}
.v7-zone-link:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.v7-bridge-center { text-align: center; }

/* ═══════════════════════════════════════════════════
   V8 — Conversion-Max Variante (Teardown-Learnings:
   Meridian, balls.co — Preisanker, Announcement-Bar,
   Vergleich, Capture; kein Fake-Urgency)
═══════════════════════════════════════════════════ */

.v8-page .conv-btn-primary,
.v8-page .conv-btn-ghost,
.v8-page .v4-sticky-btn { border-radius: 50px; }

/* ── Announcement-Bar (fixiert, Header rückt darunter) ── */
.v8-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    height: 34px; display: flex; align-items: center; justify-content: center;
    background: #c9933a; color: #010101;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 1rem; text-align: center;
}
body:has(.v8-page) .site-header.sx-header { top: 34px; }
.v8-page .v4-hero-top { padding-top: calc(1.1rem + 34px); }

/* ── Warum STIERS (3 Benefits) ── */
.v8-why { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v8-why-grid { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.6rem; }
.v8-why-item { display: flex; gap: 1rem; align-items: flex-start; }
.v8-why-item img { width: 30px; height: 30px; flex: none; margin-top: 2px; }
.v8-why-h {
    font-size: 14px; font-weight: 600; color: #fff;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.3rem;
}
.v8-why-p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }

/* ── Produkt-Rating-Zeile ── */
.v8-rating {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 12px; color: rgba(255,255,255,0.65); margin: 0 0 0.8rem;
}

/* ── Vergleichstabelle ── */
.v8-compare table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: 12px; }
.v8-compare th, .v8-compare td {
    padding: 0.7rem 0.4rem; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.v8-compare th:first-child, .v8-compare td:first-child {
    text-align: left; color: rgba(255,255,255,0.75); padding-left: 0;
}
.v8-compare th {
    font-size: 10.5px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.45);
}
.v8-compare th.v8-col-stiers { color: #c9933a; font-weight: 600; }
.v8-compare td.v8-col-stiers { background: rgba(201,147,58,0.08); color: #c9933a; font-weight: 600; }
.v8-cross { color: rgba(255,255,255,0.25); }

/* ── Preisanker / Ersparnis ── */
.v8-save {
    display: inline-block; vertical-align: middle;
    background: #C50000; color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem; border-radius: 50px; margin-left: 0.6rem;
}

/* ── Manufaktur / Story ── */
.v8-founder { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v8-founder-img { width: 100%; height: auto; display: block; border-radius: 4px; margin: 1.4rem 0 1.2rem; }
.v8-founder-p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 1rem; }

/* ── E-Mail-Capture ── */
.v8-capture { background: #141210; border-top: 1px solid rgba(201,147,58,0.3); }
.v8-capture-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }
.v8-capture-input {
    padding: 0.85rem 1.3rem; border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05); color: #fff;
    font-size: 14px; font-family: inherit;
}
.v8-capture-input::placeholder { color: rgba(255,255,255,0.35); }
.v8-capture-note { font-size: 10.5px; color: rgba(255,255,255,0.35); line-height: 1.5; margin: 0.5rem 0 0; }
.v8-capture-code {
    margin-top: 1.2rem; padding: 1rem;
    border: 1px dashed #c9933a; border-radius: 8px;
    text-align: center; color: #c9933a;
    font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
}
.v8-capture-code small { display: block; margin-top: 0.4rem; font-weight: 400; letter-spacing: 0.02em; color: rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════════════
   V9 — Hybrid aus Figma "Rework Home" + V8-Mechanik
═══════════════════════════════════════════════════ */

.v9-page .conv-btn-primary,
.v9-page .conv-btn-ghost,
.v9-page .v4-sticky-btn { border-radius: 50px; }

/* Hero-Typografie wie Startseite/Figma (leichte Poppins) */
.v9-page .v4-hero-h1 {
    font-weight: 300; font-size: 34px;
    line-height: 1.22; letter-spacing: 0.05em;
    color: rgba(255,255,255,0.92);
}
.v9-page .v4-hero-sub { font-weight: 300; font-size: 14px; color: rgba(255,255,255,0.6); }
.v9-hero-eyebrow {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); margin: 0 0 0.2rem;
}
.v9-hero-kicker {
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: #c9933a; margin: 0.5rem 0 0.2rem;
}
.v9-hero-label {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); margin: 0 0 0.2rem;
}

/* ── Aktions-Banner ── */
.v9-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    min-height: 34px; display: flex; align-items: center; justify-content: center;
    background: #c9933a; color: #141210;
    font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.4rem 1rem; text-align: center; line-height: 1.4;
}
.v9-bar strong { font-weight: 700; }
body:has(.v9-page) .site-header.sx-header { top: 42px; }
.v9-page .v4-hero-top { padding-top: calc(1.1rem + 42px); }

/* ── 2×2 Foto-Grid ── */
.v9-grid-sec { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v9-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.6rem; }
.v9-grid-tile {
    position: relative; aspect-ratio: 171/256; overflow: hidden; border-radius: 4px;
    display: flex; align-items: flex-end;
}
.v9-grid-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v9-grid-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(1,1,1,0.85) 0%, rgba(1,1,1,0.15) 60%, rgba(1,1,1,0) 100%);
}
.v9-grid-text {
    position: relative; z-index: 2; margin: 0; padding: 0.9rem;
    font-size: 13px; font-weight: 500; line-height: 1.35; color: #fff;
}

/* ── Featured-Karte: nur Rating-Helper ── */
.v9-featured .v8-rating,
.v9-page .v8-rating {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 12px; color: rgba(255,255,255,0.65); margin: 0 0 0.8rem;
}

/* ── Produkt-Karussell ── */
.v9-carousel-sec { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.05); }
.v9-carousel {
    display: flex; gap: 0.9rem; margin-top: 1.4rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.25rem 1rem; scrollbar-width: none;
}
.v9-carousel::-webkit-scrollbar { display: none; }
.v9-card {
    position: relative; flex: 0 0 75%; max-width: 280px;
    scroll-snap-align: start;
    background: #111; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 1rem 1rem 1.2rem;
    display: flex; flex-direction: column;
}
.v9-card-badge {
    position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
    background: #c9933a; color: #141210;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 50px;
}
.v9-card-badge--out { background: rgba(255,255,255,0.2); color: #fff; }
.v9-card-img { aspect-ratio: 1/1.3; border-radius: 6px; overflow: hidden; margin-bottom: 0.8rem; }
.v9-card-img img { width: 100%; height: 100%; object-fit: cover; }
.v9-card-name { font-size: 15px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.25rem; }
.v9-card-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 0 0 0.7rem; min-height: 2.6em; }
.v9-card-price { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 0.8rem; }
.v9-card-price s { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.4); margin-left: 0.3rem; }
.v9-card-btn { margin-top: auto; padding: 0.7rem 1rem; font-size: 11px; }
.v9-card-btn--ghost { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); }
.v9-card-btn--ghost:hover { background: rgba(255,255,255,0.06); }
.v9-card--soldout .v9-card-img img { opacity: 0.55; }

/* ── Testimonials: Meta-Zeile ── */
.v9-proof-meta { font-size: 11px; color: rgba(255,255,255,0.4); margin: 0.6rem 0 0; letter-spacing: 0.02em; }

/* ── Inhaltsstoffe ── */
.v9-ing-img-wrap { margin: 1.5rem 0 1.2rem; border-radius: 6px; overflow: hidden; }
.v9-ing-img { width: 100%; height: auto; display: block; }
.v9-ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.v9-ing-item { border-left: 2px solid #c9933a; padding-left: 0.7rem; }
.v9-ing-name { font-size: 13px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.15rem; }
.v9-ing-role { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.4; margin: 0; }
.v9-ing-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.v9-ing-checks li { position: relative; padding-left: 1.5rem; font-size: 12.5px; color: rgba(255,255,255,0.7); }
.v9-ing-checks li::before { content: "✓"; position: absolute; left: 0; color: #c9933a; font-weight: 700; }

/* ── Finaler CTA mit Hintergrundbild ── */
.v9-final { position: relative; overflow: hidden; }
.v9-final-bg { position: absolute; inset: 0; z-index: 0; }
.v9-final-bg img { width: 100%; height: 100%; object-fit: cover; }
.v9-final-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(1,1,1,0.55) 0%, rgba(1,1,1,0.82) 55%, rgba(1,1,1,0.95) 100%); }
.v9-final-inner { position: relative; z-index: 2; }
.v9-final-badges {
    list-style: none; padding: 0; margin: 1rem 0 1.4rem;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem;
}
.v9-final-badges li { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.v9-final-badges li::before { content: "✓ "; color: #c9933a; }