/**
 * Shop2 – schwarz/weiß wie Shop1, EIN verbundenes Linien-Grid (Best-Made-Stil), 1200px.
 */

:root {
    --ff-shop2-max: 1200px;
    --ff-shop2-gutter: clamp(16px, 3vw, 28px);
    --ff-shop2-line: #ffffff;
    --ff-shop2-font: 'Roboto Condensed', system-ui, sans-serif;
    --ff-shop2-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body.ff-shop2-shell {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #000;
    color: #fff;
    font-family: var(--ff-shop2-font);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    scrollbar-color: #b43526 #000;
}

body.ff-shop2-shell a {
    color: #fff;
    text-decoration: none;
}

body.ff-shop2-shell img {
    display: block;
    max-width: 100%;
    height: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ff-shop2-wrap {
    width: min(var(--ff-shop2-max), calc(100% - 2 * var(--ff-shop2-gutter)));
    margin-inline: auto;
}

/* ── Header (Höhe/Typo wie Shop1) ── */
.ff-shop2-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #000;
}

.ff-shop2-header__inner {
    width: min(var(--ff-shop2-max), calc(100% - 2 * var(--ff-shop2-gutter)));
    margin-inline: auto;
}

.ff-shop2-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 4vw, 44px) 0 clamp(18px, 3vw, 36px);
    min-height: clamp(80px, 12vw, 158px);
}

.ff-shop2-header__left {
    justify-self: start;
}

.ff-shop2-header__center {
    justify-self: center;
}

.ff-shop2-header__right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ff-shop2-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 33px;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

.ff-shop2-back__arrow {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #fff;
}

.ff-shop2-back:hover,
.ff-shop2-back:focus-visible {
    color: rgba(255, 255, 255, 0.85);
}

.ff-shop2-logo__img {
    width: min(540px, 56vw);
    height: auto;
}

.ff-shop2-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
}

.ff-shop2-icon:hover,
.ff-shop2-icon:focus-visible {
    color: rgba(255, 255, 255, 0.85);
}

body.ff-shop2-shell .ff-shop2-icon.ff-profile-dual {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
}

body.ff-shop2-shell .ff-profile-dual .ff-icon-profile {
    grid-area: 1 / 1;
    display: block;
    width: 20px;
    height: 20px;
    max-width: none;
    filter: brightness(0) invert(1);
}

body.ff-shop2-shell .ff-profile-dual .ff-icon-profile--meinff {
    display: none;
}

body.ff-shop2-shell.ff-meinff-on .ff-profile-dual .ff-icon-profile--default {
    display: none;
}

body.ff-shop2-shell.ff-meinff-on .ff-profile-dual .ff-icon-profile--meinff {
    display: block;
}

body.ff-shop2-shell .ff-profile-dual .ff-icon-profile--default.ff-icon-profile--guest path,
body.ff-shop2-shell .ff-profile-dual .ff-icon-profile--default.ff-icon-profile--session path {
    fill: #000;
    stroke: #fff;
    stroke-width: 0.5px;
}

body.ff-shop2-shell .ff-profile-dual .ff-icon-profile--meinff path {
    fill: #fff;
    stroke: #b43526;
    stroke-width: 0.5px;
}

.ff-shop2-search {
    display: inline-flex;
    align-items: center;
}

.ff-shop2-search__form {
    overflow: hidden;
    max-width: 0;
    transition: max-width 0.3s var(--ff-shop2-ease);
}

.ff-shop2-search.is-open .ff-shop2-search__form {
    max-width: 200px;
}

.ff-shop2-search__input {
    width: 190px;
    padding: 6px 10px;
    border: none;
    background: #fff;
    color: #000;
    font-family: var(--ff-shop2-font);
    font-size: 15px;
}

.ff-shop2-search__input:focus {
    outline: none;
}

.ff-shop2-search__btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.ff-shop2-search__icon path {
    stroke: #fff;
}

/* ── Nav wie Shop1 ── */
.ff-shop2-nav {
    border-bottom: 2px solid #333;
    overflow-x: auto;
    scrollbar-width: none;
}

.ff-shop2-nav::-webkit-scrollbar {
    display: none;
}

.ff-shop2-nav__list {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: min(var(--ff-shop2-max), calc(100% - 2 * var(--ff-shop2-gutter)));
    margin: 0 auto;
    padding: 14px 0 0;
    list-style: none;
    min-height: 56px;
}

.ff-shop2-nav__item {
    flex: 0 0 auto;
}

.ff-shop2-nav__item a {
    display: inline-block;
    padding: 0 0 12px;
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    white-space: nowrap;
}

.ff-shop2-nav__item a::after {
    content: attr(data-text);
    display: block;
    font-weight: 600;
    font-size: inherit;
    line-height: 24px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .ff-shop2-nav__item a:hover {
        font-weight: 600;
        background-image: linear-gradient(#fff, #fff);
        background-size: 100% 2px;
        background-position: bottom center;
        background-repeat: no-repeat;
    }
}

.ff-shop2-nav__item.is-active a {
    font-weight: 600;
    background-image: linear-gradient(#fff, #fff);
    background-size: 100% 2px;
    background-position: bottom center;
    background-repeat: no-repeat;
}

body.ff-shop2-shell .ff-shop2-tilt-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Main ── */
.ff-shop2-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(36px, 6vw, 72px) 0 0;
}

.ff-shop2-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Reveal: minimal & clean, leicht unterschiedlich pro Typ ── */
[data-reveal="title"] {
    opacity: 0;
    transition: opacity 0.7s ease-out;
}

[data-reveal="title"].is-visible {
    opacity: 1;
}

[data-reveal="product"] {
    opacity: 1;
}

[data-reveal="product"] .ff-shop2-cell__img,
[data-reveal="product"] .ff-shop2-cell__badge {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="product"].is-visible .ff-shop2-cell__img,
[data-reveal="product"].is-visible .ff-shop2-cell__badge {
    opacity: 1;
}

[data-reveal="filler"] {
    opacity: 0;
    transition: opacity 0.75s ease-out;
}

[data-reveal="filler"].is-visible {
    opacity: 1;
}

[data-reveal="meta"] {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

[data-reveal="meta"].is-visible {
    opacity: 1;
}

[data-reveal="ef-title"] {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 1s ease-out,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="ef-title"].is-visible {
    opacity: 1;
    transform: none;
}

[data-reveal="page"] {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 0.65s ease-out,
        transform 0.65s ease-out;
}

[data-reveal="page"].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        clip-path: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-reveal="product"] .ff-shop2-cell__img,
    [data-reveal="product"] .ff-shop2-cell__badge,
    [data-ef-grid] .ff-shop2-ef-grid__img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══ Layout-Block: Grid + Footer, Seitenlinien bis Seitenende ══ */
.ff-shop2-layout-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--ff-shop2-line);
    border: 1px solid var(--ff-shop2-line);
    border-bottom: none;
    min-height: 100%;
}

.ff-shop2-layout-block > .ff-shop2-home,
.ff-shop2-layout-block > .ff-shop2-placeholder {
    flex: 0 0 auto;
    background: #000;
    min-width: 0;
}

.ff-shop2-layout-block__tail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #000;
}

.ff-shop2-layout-block__fill {
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
}

/* ══ EIN verbundenes Linien-Grid ══ */
.ff-shop2-grid {
    display: grid;
    gap: 1px;
    background: var(--ff-shop2-line);
    border: none;
}

.ff-shop2-grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ff-shop2-cell {
    min-width: 0;
    background: #000;
}

/* volle Breite */
.ff-shop2-cell--title,
.ff-shop2-cell--hero,
.ff-shop2-cell--marquee,
.ff-shop2-cell--covers,
.ff-shop2-cell--ffplus {
    grid-column: 1 / -1;
}

.ff-shop2-cell--bundle {
    position: relative;
    z-index: 1;
    grid-column: span 2;
    overflow: visible;
    min-height: 560px;
}

.ff-shop2-cell--bundle:hover,
.ff-shop2-cell--bundle:focus-within {
    z-index: 4;
}

.ff-shop2-cell--bundle .ff-shop2-cell__link {
    min-height: 560px;
    overflow: visible;
}

.ff-shop2-cell--product {
    position: relative;
    overflow: visible;
}

.ff-shop2-cell--product .ff-shop2-cell__media {
    aspect-ratio: auto;
    min-height: clamp(260px, 26vw, 340px);
    padding: clamp(22px, 3vw, 40px);
}

.ff-shop2-cell--product .ff-shop2-cell__img {
    max-height: clamp(220px, 22vw, 300px);
}

.ff-shop2-cell--filler .ff-shop2-filler {
    min-height: 100%;
    padding: clamp(22px, 3vw, 40px);
}

/* ── Titel-Kachel: Caps, bold, Buchstaben über volle Breite verteilt ── */
.ff-shop2-cell--title {
    padding: clamp(18px, 3vw, 34px) clamp(16px, 2.5vw, 32px);
}

.ff-shop2-cell--title-hero {
    --ff-hero-title-h: clamp(96px, 18vw, 220px);
    --ff-hero-ghost-shift: 0.07em;
    position: relative;
    height: var(--ff-hero-title-h);
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ff-shop2-titlecell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    width: 100%;
    font-size: clamp(34px, 6.5vw, 88px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
}

.ff-shop2-titlecell span {
    flex: 0 0 auto;
}

/* Neuheiten-Hero: Haupttext + flaches Outline-Echo */
.ff-shop2-hero-title__ghost {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    margin: 0;
    white-space: nowrap;
    font-family: 'Barlow Condensed', var(--ff-shop2-font);
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.34);
    transform: translate(-50%, calc(-50% - var(--ff-hero-ghost-shift)));
    transform-origin: center center;
    pointer-events: none;
    user-select: none;
}

.ff-shop2-hero-title {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0;
    white-space: nowrap;
    font-family: 'Barlow Condensed', var(--ff-shop2-font);
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ff-shop2-hero-title__main {
    display: block;
    color: #fff;
}

/* ── Hero: Editorial-Text + 3D-Buch ── */
.ff-shop2-cell--hero {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 48px);
    min-height: clamp(440px, 52vw, 620px);
    padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
    overflow: hidden;
}

.ff-shop2-hero__content {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 2.8vw, 28px);
    max-width: min(360px, 100%);
    margin: 0;
}

.ff-shop2-hero__head {
    width: 100%;
}

.ff-shop2-cell--hero .ff-shop-hero__issue {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 1.2vw, 12px);
    margin: 0;
}

.ff-shop2-cell--hero .ff-shop-hero__issue-no {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    align-self: flex-start;
    transform: translateY(-0.12em);
    font-family: var(--ff-shop2-font);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(28px, 3.2vw, 36px);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 100% 1.5px;
    background-position: 0 calc(1em - 2px);
}

.ff-shop2-cell--hero .ff-shop-hero__issue-num {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--ff-shop2-font);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(52px, 7.5vw, 72px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #fff;
}

.ff-shop2-hero__pricing {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ff-shop2-cell--hero .ff-shop-hero__price {
    margin: 0;
    font-family: var(--ff-shop2-font);
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
}

.ff-shop2-cell--hero .ff-shop-hero__tax {
    margin: 0;
    padding: 0;
    font-family: var(--ff-shop2-font);
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

.ff-shop2-cell--hero .ff-shop2-hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ff-shop2-cell--hero .ff-shop-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Barlow Condensed', var(--ff-shop2-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background 0.22s var(--ff-shop2-ease),
        color 0.22s var(--ff-shop2-ease),
        border-color 0.22s var(--ff-shop2-ease),
        transform 0.22s var(--ff-shop2-ease);
}

.ff-shop2-cell--hero .ff-shop-hero__btn--view {
    min-width: 0;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.88);
    color: #fff !important;
}

.ff-shop2-cell--hero .ff-shop-hero__btn--cart {
    min-width: 0;
    background: #fff;
    border-color: #fff;
    color: #000 !important;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.ff-shop2-cell--hero .ff-shop-hero__btn--view:hover,
.ff-shop2-cell--hero .ff-shop-hero__btn--view:focus-visible {
    background: #fff;
    color: #000 !important;
    opacity: 1;
}

.ff-shop2-cell--hero .ff-shop-hero__btn--cart:hover,
.ff-shop2-cell--hero .ff-shop-hero__btn--cart:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    color: #000 !important;
    opacity: 1;
}

body.ff-shop2-shell .ff-shop2-hero__media-wrap {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2vw, 20px);
    pointer-events: none;
}

body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__media {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: min(380px, 46vw);
    height: min(530px, 64vw);
    max-width: 100%;
    margin: 0;
    pointer-events: none;
}

/* Shop1-Hero-Shader (Fog + Pyro) – volle Hero-Kachel */
body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #000;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__smoke {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    background: #000;
    transform: translateZ(0);
    contain: layout style paint;
}

body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__smoke > * {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__pyro {
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    filter: saturate(1.12) contrast(1.1);
    image-rendering: auto;
}

body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__smoke--fallback {
    background:
        radial-gradient(ellipse 95% 65% at 50% 100%, rgba(216, 80, 50, 0.5) 0%, rgba(180, 53, 38, 0.28) 24%, rgba(80, 20, 14, 0.12) 52%, transparent 80%),
        radial-gradient(ellipse 130% 100% at 50% 110%, #3a0c06 0%, #1d0503 42%, #0a0201 74%, #000000 100%);
}

.ff-shop2-hero__rotate-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition:
        background 0.22s var(--ff-shop2-ease),
        color 0.22s var(--ff-shop2-ease),
        transform 0.22s var(--ff-shop2-ease);
}

.ff-shop2-hero__rotate-btn:hover,
.ff-shop2-hero__rotate-btn:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    transform: scale(1.04);
}

.ff-shop2-hero__rotate-btn:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.ff-shop2-hero__rotate-icon {
    display: block;
    flex: 0 0 auto;
    transition: transform 0.4s var(--ff-shop2-ease);
}

.ff-shop2-hero__rotate-btn:hover .ff-shop2-hero__rotate-icon {
    transform: rotate(90deg);
}

body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__book {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: 100%;
    pointer-events: none;
}

body.ff-shop2-shell .ff-shop-hero__book-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

/* ── Produkt-Kacheln ── */
.ff-shop2-cell--product,
.ff-shop2-cell--bundle {
    position: relative;
}

.ff-shop2-cell__actions {
    position: absolute;
    right: 8px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0;
}

.ff-shop2-cell__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    line-height: 0;
}

.ff-shop2-cell__action-icon {
    display: block;
    max-width: none;
}

.ff-shop2-cell__action:hover,
.ff-shop2-cell__action:focus-visible {
    opacity: 0.72;
}

.ff-shop2-cell__action--wish.is-active svg path {
    fill: #fff;
}

.ff-shop2-cell__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ff-shop2-cell__meta {
    padding: 14px 64px 16px 16px;
    border-top: 1px solid var(--ff-shop2-line);
}

.ff-shop2-cell__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    aspect-ratio: 1 / 1;
    padding: clamp(18px, 2.5vw, 32px);
    overflow: hidden;
}

.ff-shop2-cell__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s var(--ff-shop2-ease);
}

.ff-shop2-cell__link:hover .ff-shop2-cell__img,
.ff-shop2-cell__link:focus-visible .ff-shop2-cell__img,
.ff-shop2-cell--product:hover .ff-shop2-cell__img,
.ff-shop2-cell--product:focus-within .ff-shop2-cell__img {
    transform: scale(1.04);
}

.ff-shop2-cell__badge {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 4px 8px;
    background: #fff;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    pointer-events: none;
}

.ff-shop2-cell__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.ff-shop2-cell__title-line {
    display: block;
}

.ff-shop2-cell__title-line2,
.ff-shop2-cell__title .ff-shop2-cell__title-line + .ff-shop2-cell__title-line {
    font-size: 0.85em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.ff-shop2-cell--bundle .ff-shop2-cell__title {
    text-align: center;
}

.ff-shop2-cell--bundle .ff-shop2-cell__meta {
    padding-left: 64px;
}

.ff-shop2-cell--bundle .ff-shop2-cell__price {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.ff-shop2-cell__desc {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
}

.ff-shop2-cell__price {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Weiße Füll-Kachel ── */
.ff-shop2-cell--filler {
    background: #fff;
}

.ff-shop2-filler {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 100%;
    padding: clamp(18px, 2.5vw, 32px);
    color: #000;
    background: #fff;
    transition: letter-spacing 0.3s var(--ff-shop2-ease);
}

.ff-shop2-filler__big {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    line-height: 1.02;
    text-transform: uppercase;
    color: #000;
}

.ff-shop2-filler__arrow {
    margin-top: 14px;
    color: #000;
    transition: transform 0.3s var(--ff-shop2-ease);
}

.ff-shop2-filler:hover .ff-shop2-filler__arrow,
.ff-shop2-filler:focus-visible .ff-shop2-filler__arrow {
    transform: translateX(10px);
}

/* ── Marquee-Kachel ── */
.ff-shop2-cell--marquee {
    overflow: hidden;
    min-height: clamp(88px, 12vw, 140px);
    padding: clamp(18px, 2.4vw, 28px) 0;
}

.ff-shop2-marquee {
    display: flex;
    width: max-content;
    animation: ff-shop2-marquee var(--ff-marquee-duration, 24s) linear infinite;
}

@keyframes ff-shop2-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ff-shop2-marquee {
        animation: none;
    }
}

.ff-shop2-marquee__group {
    display: flex;
    align-items: baseline;
    flex: 0 0 auto;
}

.ff-shop2-marquee__word {
    flex: 0 0 auto;
    padding: 0 22px;
    font-size: clamp(44px, 7vw, 88px);
    font-weight: 600;
    line-height: 1.02;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.ff-shop2-marquee__word--outline {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.ff-shop2-marquee__star {
    flex: 0 0 auto;
    font-size: clamp(30px, 4.8vw, 52px);
    color: #fff;
    align-self: center;
}

.ff-shop2-cell--marquee-bundles {
    min-height: clamp(120px, 16vw, 188px);
    padding: clamp(24px, 3.2vw, 36px) 0;
}

.ff-shop2-cell--marquee-bundles .ff-shop2-marquee__word {
    font-size: clamp(58px, 9.5vw, 118px);
}

.ff-shop2-cell--marquee-bundles .ff-shop2-marquee__word--outline {
    -webkit-text-stroke: 1.5px #fff;
}

.ff-shop2-cell--marquee-bundles .ff-shop2-marquee__star {
    font-size: clamp(40px, 6.2vw, 68px);
}

.ff-shop2-cell--marquee-light {
    background: #fff;
}

.ff-shop2-cell--marquee-light .ff-shop2-marquee__word {
    color: #000;
}

.ff-shop2-cell--marquee-light .ff-shop2-marquee__word--outline {
    color: transparent;
    -webkit-text-stroke: 1px #000;
}

.ff-shop2-cell--marquee-light .ff-shop2-marquee__star {
    color: #000;
}

/* ── Bundles: hohe Kästen, große Cover mittig, Stapel-Hover ── */
.ff-shop2-cell__media--bundle {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 420px;
    padding: clamp(28px, 3.5vw, 44px);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-shop2-cell--bundle-first .ff-shop2-cell__media--bundle {
    padding-left: clamp(44px, 5.5vw, 64px);
}

.ff-shop2-stack {
    --ff-stack-slot-offset: 0;
    position: relative;
    width: min(240px, 64%);
    aspect-ratio: 203 / 293;
    margin: 0 auto;
    overflow: visible;
}

body.ff-shop2-shell .ff-shop2-stack__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    transform:
        translateX(calc(var(--ff-stack-slot, var(--ff-stack-slot-offset, 0)) * 18px))
        translateY(calc(var(--ff-stack-slot, var(--ff-stack-slot-offset, 0)) * -9px))
        rotate(calc(-4deg + var(--ff-stack-slot, var(--ff-stack-slot-offset, 0)) * 2.8deg));
    transform-origin: center bottom;
    transition: transform 0.45s var(--ff-shop2-ease), box-shadow 0.45s ease;
}

.ff-shop2-cell--bundle .ff-shop2-cell__link:hover .ff-shop2-stack__cover,
.ff-shop2-cell--bundle .ff-shop2-cell__link:focus-visible .ff-shop2-stack__cover {
    transform:
        translateX(calc(var(--ff-stack-slot, var(--ff-stack-slot-offset, 0)) * 26px))
        translateY(calc(var(--ff-stack-slot, var(--ff-stack-slot-offset, 0)) * -16px))
        rotate(calc(-6deg + var(--ff-stack-slot, var(--ff-stack-slot-offset, 0)) * 3.5deg));
}

.ff-shop2-cell--bundle .ff-shop2-cell__link:hover .ff-shop2-stack__cover:last-child,
.ff-shop2-cell--bundle .ff-shop2-cell__link:focus-visible .ff-shop2-stack__cover:last-child {
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.65);
}

/* ── FFplus Promo ── */
.ff-shop2-cell--ffplus {
    overflow: hidden;
    padding: 0;
    background: #fff;
}

.ff-shop2-ffplus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(20px, 3vw, 32px);
    min-height: clamp(300px, 30vw, 400px);
    padding: clamp(36px, 4.5vw, 56px) clamp(32px, 5vw, 64px);
    background: #fff;
    color: #000;
}

.ff-shop2-ffplus__logo {
    display: block;
    width: clamp(80px, 9vw, 110px);
    height: auto;
    max-width: none;
}

.ff-shop2-ffplus__title {
    display: block;
    margin: 0;
    max-width: 100%;
    font-size: clamp(22px, 3.2vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #000;
}

.ff-shop2-ffplus__line-mask {
    display: block;
    overflow: hidden;
}

.ff-shop2-ffplus__line-mask + .ff-shop2-ffplus__line-mask {
    margin-top: 0.06em;
}

.ff-shop2-ffplus__line {
    display: block;
    white-space: nowrap;
    transform: translate3d(0, 110%, 0);
    will-change: transform;
}

@keyframes ff-shop2-line-rise {
    from {
        transform: translate3d(0, 110%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.ff-shop2-ffplus__title.is-animating .ff-shop2-ffplus__line-mask:nth-child(1) .ff-shop2-ffplus__line {
    animation: ff-shop2-line-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0ms;
}

.ff-shop2-ffplus__title.is-animating .ff-shop2-ffplus__line-mask:nth-child(2) .ff-shop2-ffplus__line {
    animation: ff-shop2-line-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 110ms;
}

.ff-shop2-ffplus__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    flex-wrap: wrap;
    width: 100%;
    max-width: min(920px, 100%);
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.ff-shop2-ffplus__foot.is-visible {
    opacity: 1;
    transform: none;
}

.ff-shop2-ffplus__price {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 400;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.82);
}

body.ff-shop2-shell a.ff-shop2-ffplus__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 32px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

body.ff-shop2-shell a.ff-shop2-ffplus__btn:hover,
body.ff-shop2-shell a.ff-shop2-ffplus__btn:focus-visible {
    background: rgba(0, 0, 0, 0.86);
    color: #fff;
}

@media (max-width: 720px) {
    .ff-shop2-ffplus__foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-shop2-ffplus__title.is-animating .ff-shop2-ffplus__line,
    .ff-shop2-ffplus__line {
        animation: none;
        transform: none;
    }

    [data-ffplus-extra] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Letzte EF-Ausgaben: 4-Spalten-Grid, große Cover ── */
.ff-shop2-cell--covers {
    overflow: hidden;
    min-width: 0;
    padding: 0;
    background: var(--ff-shop2-line);
}

.ff-shop2-ef-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--ff-shop2-line);
}

.ff-shop2-ef-grid__item {
    display: block;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.ff-shop2-ef-grid__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(300px, 32vw, 380px);
    padding: clamp(22px, 3.2vw, 40px);
    overflow: hidden;
}

body.ff-shop2-shell .ff-shop2-ef-grid__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(280px, 28vw, 340px);
    object-fit: contain;
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.97);
    transition:
        opacity 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.82s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--ef-reveal-delay, 0ms);
    will-change: transform, opacity;
}

[data-ef-grid].is-revealing .ff-shop2-ef-grid__img {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.ff-shop2-ef-grid__item:hover .ff-shop2-ef-grid__img,
.ff-shop2-ef-grid__item:focus-visible .ff-shop2-ef-grid__img {
    transition-delay: 0ms;
    transition-duration: 0.45s;
    transform: scale(1.04) translateY(-6px);
}

/* ── Placeholder ── */
.ff-shop2-placeholder {
    padding: clamp(64px, 10vw, 90px) clamp(16px, 2.5vw, 28px);
    text-align: center;
}

.ff-shop2-placeholder__title {
    margin: 0 0 12px;
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
}

.ff-shop2-placeholder__text {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.75);
}

.ff-shop2-placeholder__back {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* ── Footer: kompakter Kasten unten am Rand, Linien laufen im Tail weiter ── */
.ff-shop2-footer {
    flex: 0 0 auto;
    padding: clamp(20px, 2.5vw, 28px) clamp(16px, 2.5vw, 28px) clamp(14px, 1.8vw, 20px);
    background: #000;
}

.ff-shop2-footer__inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.ff-shop2-footer__wordmark-link {
    display: block;
    margin: 0 0 clamp(18px, 2.5vw, 28px);
    text-decoration: none;
}

.ff-shop2-footer__wordmark {
    display: block;
    width: 100%;
    max-width: 1281.47px;
    height: auto;
    margin: 0;
}

.ff-shop2-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
}

.ff-shop2-footer__links,
.ff-shop2-footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-shop2-footer__links {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.ff-shop2-footer__links a {
    font-family: 'Barlow Condensed', var(--ff-shop2-font);
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.ff-shop2-footer__links a:hover,
.ff-shop2-footer__links a:focus-visible {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ff-shop2-footer__social {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 14px;
}

.ff-shop2-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.ff-shop2-footer__social a:hover,
.ff-shop2-footer__social a:focus-visible {
    opacity: 0.75;
}

.ff-shop2-footer__social img {
    display: block;
    width: 20px;
    height: 20px;
    max-width: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ff-shop2-grid--home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ff-shop2-cell--bundle {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .ff-shop2-back__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .ff-shop2-logo__img {
        width: min(220px, 52vw);
    }

    .ff-shop2-nav__list {
        justify-content: flex-start;
        gap: 20px;
        width: 100%;
        padding-inline: var(--ff-shop2-gutter);
    }

    .ff-shop2-cell--hero {
        flex-direction: column;
        gap: 20px;
        min-height: 0;
    }

    .ff-shop2-hero__content {
        max-width: 100%;
    }

    .ff-shop2-cell--hero .ff-shop2-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ff-shop2-cell--hero .ff-shop-hero__btn {
        width: 100%;
    }

    body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__media {
        width: min(340px, 100%);
        height: auto;
        aspect-ratio: 308 / 430;
        justify-self: center;
    }

    body.ff-shop2-shell .ff-shop2-cell--hero .ff-shop-hero__book {
        width: 100%;
        height: 100%;
    }

    .ff-shop2-cell--bundle,
    .ff-shop2-cell--bundle .ff-shop2-cell__link {
        min-height: 480px;
    }

    .ff-shop2-cell__media--bundle {
        min-height: 340px;
    }

    .ff-shop2-ef-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ff-shop2-ef-grid__media {
        min-height: 260px;
    }

    .ff-shop2-footer__bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .ff-shop2-footer__social {
        justify-content: flex-start;
    }

    .ff-shop2-grid--home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}