/* ============================================================================
   tiefe_layer.css — Richtung „Tiefe"
   Yaska Germany · Child-Template yaska_tiefe · v1.0.0

   Wird NACH themes/tiefe/custom.css geladen (siehe template.xml → Minify).
   Die bestehende custom.css bleibt unangetastet; diese Datei stimmt die
   vorhandenen --ys-*-Tokens neu ab und ergänzt die neuen Flächen.
   Entfernen dieser Datei aus der template.xml stellt den alten Look her.

   Aufbau
     1  Tokens
     2  Bewegungsgrundsätze
     3  Wellen-Signatur
     4  Kopfbanderole
     5  Flächen: Karten, Schaltflächen, Formulare
     6  Produktdetail
     7  Fuß
     8  Rücksichtnahme (reduced motion, Tastatur, Touch)
   ========================================================================= */

/* ── 1  Tokens ─────────────────────────────────────────────────────────────
   Nur Werte, keine neuen Namen: die bestehende custom.css arbeitet bereits
   mit diesen Variablen und übernimmt die Änderungen dadurch automatisch. */
:root {
    --ys-ocean:       #004F9E;
    --ys-ocean-mid:   #0070CC;
    --ys-ocean-dark:  #002D5C;
    --ys-ocean-deep:  #041A33;
    --ys-abyss:       #020D1C;   /* neu: Tiefpunkt des Verlaufs */
    --ys-aqua:        #63C6FF;
    --ys-aqua-light:  #E8F6FF;
    --ys-cta:         #FF6B00;
    --ys-cta-dark:    #D95A00;
    --ys-text:        #0B1A2C;
    --ys-text-soft:   #4A5C74;
    --ys-muted:       #7A8AA0;
    --ys-border:      #DCE8F6;
    --ys-bg-soft:     #EDF5FE;   /* war #F0F6FF — kühler, näher am Wasser */
    --ys-footer-bg:   #060F1C;

    /* Weicher und tiefer als vorher: die Karten sollen über dem Grund schweben */
    --ys-shadow:      0 2px 14px rgba(0, 45, 92, .07);
    --ys-shadow-md:   0 18px 44px rgba(0, 45, 92, .18);
    --ys-r:           14px;      /* war 8px */
    --ys-r-sm:        10px;

    /* Emil Kowalski: die eingebauten CSS-Kurven sind zu schwach. */
    --ys-ease-out:    cubic-bezier(.23, 1, .32, 1);
    --ys-ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* Der Seitengrund trägt die Wasserfarbe, nicht mehr reines Weiß */
body { background-color: var(--ys-bg-soft); }

/* ── 2  Bewegungsgrundsätze ────────────────────────────────────────────────
   Ein- und Austritte laufen ease-out (sofort sichtbare Reaktion),
   Dauerbewegung linear, alles unter 300 ms außer der Ambient-Welle. */

/* ── 3  Wellen-Signatur ───────────────────────────────────────────────────
   Markup: snippets/tiefe_wave.tpl, eingebunden als LETZTES Kind von
   .ys-hero2 (snippets/yaska_hero.tpl).

   Der Anker muss der Hero sein, nicht der Header: <header> ist hier eine
   sticky Navigationsleiste, und die Welle lag als Geschwister daneben —
   ohne positionierten Vorfahren rutscht sie ans Ende des Ansichtsfensters
   und landet mitten auf der Seite. .ys-hero2 ist bereits position:relative;
   die Regel steht hier nur zur Absicherung. */
.ys-hero2 { position: relative; }

.ys-sea {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 170px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.ys-layer { position: absolute; inset: 0; }

.ys-drift {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    will-change: transform;
    animation: ys-drift linear infinite;
}

.ys-bob {
    position: absolute;
    inset: 0;
    will-change: transform;
    animation: ys-bob ease-in-out infinite alternate;
}

/* overflow sichtbar: die Fläche läuft unter den Container hinaus,
   sonst reißt das Wiegen an der Unterkante einen Spalt auf. */
.ys-drift svg { display: block; width: 100%; height: 100%; overflow: visible; }

@keyframes ys-drift { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes ys-bob   { from { transform: translate3d(0, 9px, 0); }  to { transform: translate3d(0, -9px, 0); } }

/* Unterschiedliche Geschwindigkeiten je Ebene ergeben die Tiefe.
   Die Dauern sind teilerfremd gewählt, damit sich das Muster nicht
   sichtbar wiederholt. */
.ys-l1 .ys-drift { animation-duration: 34s; }
.ys-l1 .ys-bob   { animation-duration: 9s; }
.ys-l1 path      { fill: rgba(0, 112, 204, .34); }

.ys-l2 .ys-drift { animation-duration: 23s; animation-direction: reverse; }
.ys-l2 .ys-bob   { animation-duration: 7s; }
.ys-l2 path      { fill: rgba(99, 198, 255, .20); }

/* Die vorderste Ebene trägt die Farbe des folgenden Abschnitts —
   dadurch IST die Welle der Übergang und liegt nicht bloß davor. */
.ys-l3 .ys-drift { animation-duration: 17s; }
.ys-l3 .ys-bob   { animation-duration: 5.5s; }
.ys-l3 path      { fill: var(--ys-bg-soft); }

@media (max-width: 767.98px) {
    .ys-sea { height: 110px; }
}

/* ── 3b  Welle auf der Kategorieseite ─────────────────────────────────────
   Hier geht kein Markup: `.ys-cat-hero` stammt aus der Kategorie­beschreibung
   in der DB, nicht aus einer TPL. Die Welle entsteht deshalb aus zwei
   Pseudoelementen mit inline-SVG als Hintergrund — animiert wird wieder nur
   transform, also GPU-kompositiert wie die Markup-Variante.

   Anders als auf der Startseite trägt die vorderste Ebene KEINE Deckfarbe:
   der Kategorie-Hero ist eine abgerundete Karte (14 px, overflow:hidden),
   darunter folgt mit .ys-usp-bar eine eigene Fläche. Eine „übergebende"
   Welle würde dort eine Kante erzeugen. Also durchscheinendes Wasser,
   das im Bild endet.

   Kachelung: Element ist 200 % breit, background-size 50 % → eine Kachel
   entspricht genau der Hero-Breite, translateX(-50 %) läuft nahtlos. */
.ys-cat-hero::before,
.ys-cat-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 118px;
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 50% 100%;
    will-change: transform;
    animation: ys-drift linear infinite;
}

/* hintere, ruhigere Ebene */
.ys-cat-hero::before {
    animation-duration: 31s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C120,70 240,70 360,100 C480,130 600,130 720,100 C840,70 960,70 1080,100 C1200,130 1320,130 1440,100 L1440,200 L0,200 Z' fill='%23004F9E' fill-opacity='0.42'/%3E%3C/svg%3E");
}

/* vordere Ebene, schneller und gegenläufig — erzeugt die Tiefe */
.ys-cat-hero::after {
    animation-duration: 19s;
    animation-direction: reverse;
    height: 96px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,130 C120,84 240,84 360,130 C480,176 600,176 720,130 C840,84 960,84 1080,130 C1200,176 1320,176 1440,130 L1440,200 L0,200 Z' fill='%230070CC' fill-opacity='0.5'/%3E%3C/svg%3E");
}

/* Titel und CTA müssen über dem Wasser liegen */
.ys-cat-hero__inner { position: relative; z-index: 3; }

@media (max-width: 767.98px) {
    .ys-cat-hero::before { height: 74px; }
    .ys-cat-hero::after  { height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .ys-cat-hero::before,
    .ys-cat-hero::after { animation: none !important; }
}

/* ── 3c  Welle auf eigenen Seiten MIT Banner (B2B, OEM) ───────────────────
   `.ys-bpage__hero` ist eine volle Sektion ohne Radius, der Folgeabschnitt
   ist weiß. Hier trägt die vorderste Ebene deshalb Deckweiß und übergibt an
   den nächsten Abschnitt — wie auf der Startseite, anders als beim
   Kategorie-Hero (abgerundete Karte, siehe 3b). */
/* overflow-x: clip ist Pflicht — die Ebenen sind 200 % breit und liefen
   sonst über die Bannerbreite hinaus und machten die Seite seitlich
   scrollbar. `clip` statt `hidden`, damit position:sticky im Inhalt
   weiter funktioniert. */
.ys-bpage__hero { position: relative; overflow-x: clip; }

.ys-bpage__hero::before,
.ys-bpage__hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;          /* 1 px Überlappung gegen Subpixel-Fugen */
    width: 200%;
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 50% 100%;
    will-change: transform;
    animation: ys-drift linear infinite;
}

.ys-bpage__hero::before {
    height: 132px;
    animation-duration: 29s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C120,70 240,70 360,100 C480,130 600,130 720,100 C840,70 960,70 1080,100 C1200,130 1320,130 1440,100 L1440,200 L0,200 Z' fill='%2363C6FF' fill-opacity='0.28'/%3E%3C/svg%3E");
}

.ys-bpage__hero::after {
    height: 104px;
    animation-duration: 18s;
    animation-direction: reverse;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,130 C120,84 240,84 360,130 C480,176 600,176 720,130 C840,84 960,84 1080,130 C1200,176 1320,176 1440,130 L1440,200 L0,200 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.ys-bpage__hero-inner { position: relative; z-index: 3; }

/* ── 3d  Welle unter dem Megamenü — Seiten OHNE jeden Banner ──────────────
   Betrifft Produktdetail, Wir-über-uns, Kontakt, Versandinfos usw.
   Die Welle hängt direkt unter der blauen Navigation und läuft in die
   Seitenfarbe aus.

   KEIN dunkler Streifen hier: das Altbestand-CSS setzt den Hintergrund von
   <main> und gewinnt, ausserdem müsste dann der Breadcrumb hell werden —
   und der liegt je nach Seite gar nicht im Streifen. Zwei durchscheinende
   Wasserebenen auf hellem Grund lösen dasselbe, ohne gegen Fremd-CSS zu
   kämpfen.

   overflow-x: clip ist Pflicht — die Ebenen sind 200 % breit und würden
   sonst die Seite seitlich scrollbar machen. `clip` statt `hidden`, damit
   position:sticky im Inhalt weiter funktioniert.

   Abgegrenzt per :has(): greift nur, wenn KEIN Hero und KEIN Banner in der
   Seite steckt — Startseite, Kategorie und Bannerseiten bleiben unberührt. */
main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero)) {
    position: relative;
    overflow-x: clip;
}

main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero))::before,
main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero))::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 50% 100%;
    will-change: transform;
    animation: ys-drift linear infinite;
}

main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero))::before {
    height: 112px;
    animation-duration: 27s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,110 C120,84 240,84 360,110 C480,136 600,136 720,110 C840,84 960,84 1080,110 C1200,136 1320,136 1440,110 L1440,0 L0,0 Z' fill='%23004F9E' fill-opacity='0.30'/%3E%3C/svg%3E");
}

main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero))::after {
    height: 84px;
    animation-duration: 17s;
    animation-direction: reverse;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,120 C120,94 240,94 360,120 C480,146 600,146 720,120 C840,94 960,94 1080,120 C1200,146 1320,146 1440,120 L1440,0 L0,0 Z' fill='%230070CC' fill-opacity='0.22'/%3E%3C/svg%3E");
}

/* Inhalt liegt über dem Wasser */
main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero)) > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero))::before { height: 74px; }
    main:not(:has(.ys-hero2)):not(:has(.ys-cat-hero)):not(:has(.ys-bpage__hero))::after  { height: 56px; }
    .ys-bpage__hero::before { height: 84px; }
    .ys-bpage__hero::after  { height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
    .ys-bpage__hero::before,
    .ys-bpage__hero::after,
    main::before,
    main::after { animation: none !important; }
}

/* ── 4  Kopfbereich ───────────────────────────────────────────────────────
   KEINE dunkle Banderole hier. Der <header> dieses Shops ist eine sticky
   Navigationsleiste (.sticky-top.fixed-navbar) — ein Verlauf plus
   padding-bottom reißt darunter nur ein leeres dunkles Band auf und
   verschiebt den Hero nach unten. Die dunkle Wasserfläche ist der Hero
   selbst; er bringt sein Foto und seinen Verlauf schon mit.

   Der Hero-Inhalt muss über der Welle liegen. */
.ys-hero2__inner { position: relative; z-index: 3; }

/* ── 5  Flächen ───────────────────────────────────────────────────────────
   Karten schweben und heben sich beim Zeigen leicht an; das Bild zieht
   dabei minimal nach. Beides nur transform — kein Layout, keine Farbe. */
.product-wrapper,
.productbox,
.card {
    border-radius: var(--ys-r);
    border: 0;
    box-shadow: var(--ys-shadow);
    overflow: hidden;
    transition: transform 260ms var(--ys-ease-out), box-shadow 260ms var(--ys-ease-out);
}

.product-wrapper img,
.productbox img { transition: transform 420ms var(--ys-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .product-wrapper:hover,
    .productbox:hover {
        transform: translateY(-6px);
        box-shadow: var(--ys-shadow-md);
    }
    .product-wrapper:hover img,
    .productbox:hover img { transform: scale(1.05); }
}

/* Schaltflächen: Pillenform, und sie müssen sich beim Drücken melden.
   0.97 ist spürbar, ohne dass der Text springt. */
.btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform 160ms ease-out, background-color 180ms ease-out, box-shadow 220ms ease-out;
}

.btn:active { transform: scale(.97); }

/* Orange ist die Handlungsfarbe und bleibt EINER Aktion vorbehalten:
   in den Warenkorb legen. Alle übrigen .btn-primary bleiben ozeanblau —
   sonst verliert Orange seine Bedeutung.

   `!important` ist hier nötig, nicht bequem: die bestehende custom.css
   setzt `.btn-primary { background-color: var(--ys-ocean) !important }`,
   dagegen kommt keine Spezifität an. Betrifft Produktdetail
   (.product-buy) und Artikelliste (.yaska-btn-cart) — dieselbe Aktion
   soll nicht je nach Seite die Farbe wechseln.
   Der PayPal-Express-Button hat eigene Klassen und bleibt unberührt. */
.product-detail .product-buy .btn-primary,
.product-detail .js-cfg-validate.btn-primary,
.yaska-btn-cart.btn-primary {
    background-color: var(--ys-cta) !important;
    border-color: var(--ys-cta) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(255, 107, 0, .26);
}

@media (hover: hover) and (pointer: fine) {
    .product-detail .product-buy .btn-primary:hover,
    .product-detail .js-cfg-validate.btn-primary:hover,
    .yaska-btn-cart.btn-primary:hover {
        background-color: var(--ys-cta-dark) !important;
        border-color: var(--ys-cta-dark) !important;
        box-shadow: 0 14px 40px rgba(255, 107, 0, .38);
    }
}

/* Fokusring muss auf Orange sichtbar bleiben — Aqua verschwindet darauf */
.product-detail .product-buy .btn-primary:focus-visible,
.yaska-btn-cart.btn-primary:focus-visible {
    outline: 2px solid var(--ys-ocean-deep);
    outline-offset: 3px;
}

.btn-outline-primary { border-color: var(--ys-ocean); color: var(--ys-ocean); }

.form-control,
.custom-select,
.form-select {
    border-radius: var(--ys-r-sm);
    border-color: var(--ys-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ys-ocean-mid);
    box-shadow: 0 0 0 3px rgba(0, 112, 204, .16);
}

/* Filterspalte und Nebenflächen als eigene Karten statt nackter Kästen */
.filter-wrapper,
.box .card,
#sidepanel-left .card {
    border-radius: var(--ys-r);
    box-shadow: var(--ys-shadow);
    border: 0;
}

/* ── 6  Produktdetail ─────────────────────────────────────────────────────*/
.product-detail .price,
.product-detail .price-note + .price,
.preis-detail {
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.product-gallery img,
.productdetails-image-main img { border-radius: var(--ys-r); }

.nav-tabs { border-bottom-color: var(--ys-border); }

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    color: var(--ys-text-soft);
    transition: color 160ms ease-out, border-color 160ms ease-out;
}

.nav-tabs .nav-link.active {
    color: var(--ys-ocean);
    border-bottom-color: var(--ys-ocean);
    background: transparent;
}

/* ── 7  Fuß ───────────────────────────────────────────────────────────────*/
footer,
.footer-blocks {
    background-color: var(--ys-footer-bg);
}

/* ── 8  Rücksichtnahme ────────────────────────────────────────────────────
   Reduzierte Bewegung heißt weniger und sanfter, nicht gar nichts:
   Farb- und Deckkraftwechsel bleiben, Ortsveränderungen entfallen. */
@media (prefers-reduced-motion: reduce) {
    .ys-drift,
    .ys-bob { animation: none !important; }

    .product-wrapper,
    .productbox,
    .card,
    .product-wrapper img,
    .productbox img,
    .btn { transition-duration: 1ms !important; }

    .product-wrapper:hover,
    .productbox:hover { transform: none; }
}

/* Tastaturfokus muss sichtbar bleiben — der Shop steht auf 100/100,
   das darf diese Datei nicht kaputtmachen. */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--ys-aqua);
    outline-offset: 3px;
}

/* Auf dem dunklen Kopf braucht der Fokusring den hellen Ton */
header.d-print-none a:focus-visible,
header.d-print-none button:focus-visible {
    outline-color: #FFFFFF;
}

/* Druckausgabe: keine Welle, kein dunkler Kopf */
@media print {
    .ys-sea { display: none; }
    header.d-print-none { background: none; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Vorbestellung (Artikel ausverkauft, aber ueber den Lagerbestand hinaus kaufbar)
   -------------------------------------------------------------------------- */
.productbox-image { position: relative; }

.yaska-preorder-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
    display: inline-block;
    padding: .22em .7em;
    border-radius: 999px;
    background: var(--ys-ocean, #0b5c8a);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .02em;
    white-space: nowrap;
}

.delivery-status .status-preorder {
    color: var(--ys-ocean, #0b5c8a);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Zweiter Kaufweg: Vorbestellung (Plugin yaska_preorder)
   -------------------------------------------------------------------------- */
.yaska-buy-hint {
    margin: .35rem 0 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--ys-muted, #5a6b7a);
    text-align: center;
}

.yaska-buy-hint--preorder {
    margin-bottom: .25rem;
}

.yaska-preorder-btn {
    margin-top: .85rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    font-weight: 600;
}

.yaska-preorder-btn__price {
    font-weight: 700;
    white-space: nowrap;
}

.yaska-card__preorder-price {
    margin-top: .2rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--ys-ocean, #0b5c8a);
}

.yaska-preorder-cart-note {
    margin-bottom: 1rem;
}