/* ── VIDEO SECTION ───────────────────────────────────────────── */
.video-section {
    max-width: var(--max);
    margin:    0 auto;
    padding:   5rem var(--pad) 6rem;
}

.video-card {
    border-radius:  28px;
    overflow:       hidden;
    position:       relative;
    display:        flex;
    flex-direction: column;
    color:          #fff;
}

.video-embed {
    width:         100%;
    position:      relative;
    overflow:      hidden;
    min-height:    500px;
}
.video-embed video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.video-sound-hint {
    position:                absolute;
    bottom:                  1.2rem;
    right:                   1.2rem;
    display:                 flex;
    align-items:             center;
    gap:                     0.4rem;
    padding:                 0.45rem 0.8rem;
    background:              rgba(0,0,0,0.5);
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius:           980px;
    color:                   rgba(255,255,255,0.85);
    font-size:               0.7rem;
    font-weight:             500;
    pointer-events:          none;
    transition:              opacity 0.3s ease;
}
.video-sound-hint.is-muted           { opacity: 1; }
.video-sound-hint:not(.is-muted) span { display: none; }
.video-sound-hint:not(.is-muted) svg  { stroke: rgba(255,255,255,0.9); }
.video-sound-hint:not(.is-muted)::after { content: 'Ton an'; font-size: 0.7rem; }

.video-read-btn,
.fc-card-read {
    height:                  32px;
    border:                  1px solid rgba(255,255,255,0.25);
    background:              rgba(255,255,255,0.08);
    border-radius:           16px;
    display:                 flex;
    align-items:             center;
    gap:                     6px;
    padding:                 0 14px 0 16px;
    cursor:                  pointer;
    color:                   rgba(255,255,255,0.9);
    transition:              background 0.2s, border-color 0.2s, transform 0.2s;
    z-index:                 3;
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.video-read-btn {
    align-self:              flex-end;
    margin-top:              auto;
}
.fc-card-read {
    position:                absolute;
    bottom:                  1.25rem;
    right:                   1.25rem;
}
.video-read-btn:hover,
.fc-card-read:hover {
    background:   rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
    transform:    translateX(-2px);
}

.video-content {
    padding:         2rem 2.5rem 2rem;
    text-align:      left;
    max-width:       none;
    flex-shrink:     0;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
}

.video-eyebrow {
    font-size:      0.7rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity:        0.4;
    margin-bottom:  0.75rem;
}

.video-title {
    font-size:      3.2rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.08;
    margin-bottom:  1rem;
}

.video-text {
    font-size:   1rem;
    font-weight: 300;
    line-height: 1.75;
    opacity:     0.55;
}

/* ── BANNER CTA ──────────────────────────────────────────────── */
.banner-section {
    max-width: var(--max);
    margin:    0 auto;
    padding:   5rem var(--pad) 6rem;
}

.banner-card {
    border-radius: 28px;
    background:    var(--ink);
    padding:       6rem 3rem;
    text-align:    center;
    color:         #fff;
}

.banner-title {
    font-size:      3.2rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.08;
    margin-bottom:  1rem;
}

.banner-eyebrow {
    font-size:      0.7rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity:        0.35;
    margin-bottom:  1rem;
}

.banner-text {
    font-size:     1rem;
    font-weight:   300;
    line-height:   1.75;
    opacity:       0.5;
    max-width:     480px;
    margin:        0 auto 2.5rem;
}

.banner-cta {
    display:       flex;
    gap:           0;
    max-width:     420px;
    margin:        0 auto;
    border-radius: 14px;
    overflow:      hidden;
    border:        1px solid rgba(255,255,255,0.12);
}

.banner-input {
    flex:       1;
    padding:    1rem 1.3rem;
    border:     none;
    background: rgba(255,255,255,0.06);
    color:      #fff;
    font-size:  0.9rem;
    outline:    none;
}
.banner-input:focus       { background: rgba(255,255,255,0.1); }
.banner-input::placeholder { color: rgba(255,255,255,0.3); }

.banner-btn {
    padding:     1rem 2rem;
    border:      none;
    background:  var(--blue);
    color:       #fff;
    font-size:   0.88rem;
    font-weight: 600;
    cursor:      pointer;
    transition:  background 0.2s;
    white-space: nowrap;
}
.banner-btn:hover { background: #0060C0; }

/* ── DESKTOP VIDEO 16:12 ───────────────────────────────────────── */
@media (min-width: 769px) {
    .video-embed              { min-height: 500px; }
}

/* ── RESPONSIVE VIDEO & BANNER ────────────────────────────────── */
@media (max-width: 768px) {
    .video-content            { padding: 1.5rem 1.5rem 1rem; }
    .video-title              { font-size: 2rem; }
    .banner-card              { padding: 4rem 2rem; }
    .banner-title             { font-size: 2rem; }
    .banner-cta               { flex-direction: column; border-radius: 14px; }
    .banner-input             { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .video-section,
    .banner-section           { padding: 3rem var(--pad) 4rem; }
}

@media (max-width: 480px) {
    .video-section           { padding: 2rem var(--pad) 2.5rem; }
    .video-card              { border-radius: 18px; }
    .video-embed             { min-height: 300px; }
    .video-content           { padding: 1.25rem 1rem 1rem; }
    .video-title             { font-size: 1.5rem; }
    .video-text              { font-size: 0.85rem; }
    .video-sound-hint        { bottom: 0.75rem; right: 0.75rem; }

    .banner-section          { padding: 2rem var(--pad) 2.5rem; }
    .banner-card             { padding: 3rem 1.5rem; border-radius: 18px; }
    .banner-title            { font-size: 1.5rem; }
    .banner-text             { font-size: 0.88rem; margin-bottom: 1.5rem; }
    .banner-cta              { max-width: 100%; border-radius: 12px; }
    .banner-input            { padding: 0.8rem 1rem; font-size: 0.82rem; }
    .banner-btn              { padding: 0.8rem 1.2rem; font-size: 0.82rem; }
}

/* ── FEATURE CARDS CAROUSEL ─────────────────────────────────── */
.feature-carousel-section {
    max-width: var(--max);
    margin:    5rem auto 0;
    padding:   0 var(--pad);
}
.fc-header       { margin-bottom: 1.8rem; }
.fc-section-title {
    font-size:      2.8rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--ink);
}
.fc-track-wrapper { overflow: hidden; }
.fc-track {
    display:                    flex;
    gap:                        24px;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    padding-bottom:             8px;
}
.fc-track::-webkit-scrollbar { display: none; }

.fc-card {
    position:          relative;
    flex:              0 0 calc((100% - 48px) / 3);
    min-height:        620px;
    border-radius:     24px;
    overflow:          hidden;
    display:           flex;
    flex-direction:    column;
    scroll-snap-align: start;
    cursor:            default;
}
.fc-card-text {
    position: relative;
    z-index:  2;
    padding:  2.2rem 2.2rem 0;
}
.fc-card-eyebrow {
    font-size:      0.65rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.5);
    margin-bottom:  0.6rem;
}
.fc-card-title {
    font-size:      1.75rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.12;
    color:          #fff;
}
.fc-card-video-embed {
    flex:     1;
    position: relative;
    overflow: hidden;
    margin:   1rem 0 0;
}
.fc-card-video-embed video {
    position:       absolute;
    inset:          -10%;
    width:          120%;
    height:         120%;
    object-fit:     cover;
    pointer-events: none;
}



/* Product Text Card */
.fc-prod-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        1.2rem 2.2rem 3.5rem;
}
.fc-prod-marke {
    font-size:      0.6rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    margin-bottom:  0.8rem;
}
.fc-prod-desc {
    font-size:     0.88rem;
    font-weight:   300;
    line-height:   1.7;
    color:         rgba(255,255,255,0.6);
    margin-bottom: 1.6rem;
}
.fc-prod-notes {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin-bottom:  auto;
}
.fc-prod-note {
    display:       flex;
    align-items:   baseline;
    gap:           0.6rem;
    padding:       0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fc-prod-note:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.fc-prod-note-label {
    font-size:      0.55rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    min-width:      60px;
    flex-shrink:    0;
}
.fc-prod-note-value {
    font-size:   0.78rem;
    font-weight: 400;
    color:       rgba(255,255,255,0.65);
    line-height: 1.4;
}
.fc-prod-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      1.4rem;
    padding-top:     1rem;
    padding-bottom:  2.5rem;
    border-top:      1px solid rgba(255,255,255,0.06);
}
.fc-prod-konz { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1.2rem; }
.fc-prod-konz-pill {
    padding:        4px 10px;
    background:     rgba(255,255,255,0.07);
    border:         1px solid rgba(255,255,255,0.08);
    border-radius:  100px;
    font-size:      0.6rem;
    font-weight:    500;
    color:          rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}
.fc-prod-preis {
    font-size:   0.92rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.85);
}

/* Text-Only Lab Card */
.fc-card-lab {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         0 2.2rem 3.5rem;
}
.fc-lab-grid {
    display:        flex;
    flex-direction: column;
    gap:            0;
}
.fc-lab-item {
    padding:       1.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fc-lab-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.fc-lab-label {
    font-size:      0.58rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    margin-bottom:  0.5rem;
}
.fc-lab-name {
    font-size:      1.1rem;
    font-weight:    600;
    color:          rgba(255,255,255,0.95);
    letter-spacing: -0.01em;
    margin-bottom:  0.5rem;
}
.fc-lab-notes {
    font-size:     0.78rem;
    color:         rgba(255,255,255,0.4);
    line-height:   1.7;
    font-weight:   300;
    margin-bottom: 0.4rem;
}
.fc-lab-preis {
    font-size:   0.85rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.7);
}
.fc-lab-vs {
    text-align:     center;
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.18);
    padding:        0.8rem 0;
}

.fc-card-plus {
    position:        absolute;
    bottom:          1.25rem;
    right:           1.25rem;
    width:           36px;
    height:          36px;
    border:          none;
    background:      rgba(255,255,255,0.12);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background 0.2s ease, transform 0.2s ease;
    z-index:         3;
    padding:         0;
}
.fc-card-plus:hover { background: rgba(255,255,255,0.28); transform: scale(1.1); }

.fc-card-read-label {
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fc-arrows {
    display:         flex;
    justify-content: flex-end;
    gap:             0.5rem;
    margin-top:      1.25rem;
}

/* ── RESPONSIVE FEATURE CARDS ────────────────────────────────── */
@media (max-width: 1024px) {
    .fc-card { flex: 0 0 calc((100% - 24px) / 2); min-height: 540px; }
}
@media (max-width: 700px) {
    .fc-card              { flex: 0 0 100%; min-height: 480px; }
    .fc-section-title     { font-size: 2rem; }
    .fc-card-title        { font-size: 1.4rem; }
    .fc-card-text         { padding: 1.6rem 1.6rem 0; }
    .fc-prod-body         { padding: 1rem 1.6rem 2.5rem; }
    .fc-card-lab          { padding: 0 1.6rem 2.5rem; }
    .feature-carousel-section { margin-top: 3rem; }
}

@media (max-width: 480px) {
    .feature-carousel-section { margin-top: 2rem; }
    .fc-header            { margin-bottom: 1.2rem; }
    .fc-section-title     { font-size: 1.6rem; }
    .fc-card              { min-height: 400px; border-radius: 18px; }
    .fc-card-title        { font-size: 1.2rem; }
    .fc-card-text         { padding: 1.2rem 1.2rem 0; }
    .fc-prod-body         { padding: 0.8rem 1.2rem 2rem; }
    .fc-card-lab          { padding: 0 1.2rem 2rem; }
    .fc-track             { gap: 12px; }
    .fc-arrows            { gap: 0.35rem; margin-top: 0.75rem; }
    .passt-section        { margin-top: 2.5rem; padding: 0 var(--pad) 2.5rem; }
    .passt-title          { font-size: 1.6rem; margin-bottom: 1.2rem; }
    .passt-card           { border-radius: 18px; height: auto; min-height: 400px; }
    .passt-left           { padding: 1.5rem; }
    .passt-item-name      { font-size: 1.05rem; }
    .passt-item-text      { font-size: 0.85rem; }
}

/* ── PASST PERFEKT ACCORDION ───────────────────────────────── */
.passt-section {
    max-width: var(--max);
    margin:    5rem auto 0;
    padding:   0 var(--pad) 4rem;
}
.passt-title {
    font-size:      2.8rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--ink);
    margin-bottom:  2rem;
}
.passt-card {
    background:            var(--bg);
    border-radius:         28px;
    overflow:              hidden;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    height:                580px;
}
@media (max-width: 768px) {
    .passt-card  { grid-template-columns: 1fr; height: 580px; }
    .passt-right { display: none; }
}
.passt-left {
    display:         flex;
    flex-direction:  column;
    padding:         2.5rem 2.5rem 2.5rem 3rem;
    justify-content: center;
    overflow:        hidden;
}
.passt-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.passt-item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }
.passt-item-header {
    display:     flex;
    align-items: center;
    padding:     1.4rem 0;
    cursor:      pointer;
    gap:         0.75rem;
    user-select: none;
}
.passt-item-name {
    font-size:      1.25rem;
    font-weight:    600;
    letter-spacing: -0.01em;
    color:          var(--ink-soft);
    flex:           1;
    transition:     color 0.25s;
}
.passt-item.offen .passt-item-name { color: var(--ink); }
.passt-chevron {
    color:       var(--ink-soft);
    flex-shrink: 0;
    transition:  transform 0.35s var(--ease);
}
.passt-item.offen .passt-chevron { transform: rotate(180deg); color: var(--ink); }
.passt-item-body {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.4s var(--ease), padding 0.3s ease;
}
.passt-item.offen .passt-item-body {
    max-height:     280px;
    padding-bottom: 1.5rem;
}
.passt-item-text {
    font-size:   0.95rem;
    font-weight: 300;
    color:       var(--ink-soft);
    line-height: 1.7;
    max-width:   420px;
}
.passt-item-link {
    display:     inline-block;
    margin-top:  0.8rem;
    font-size:   0.85rem;
    font-weight: 500;
    color:       var(--blue);
    cursor:      pointer;
    transition:  opacity 0.15s;
}
.passt-item-link:hover { opacity: 0.7; }
.passt-right {
    position:        relative;
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg);
    transition:      background 0.5s ease;
}
@media (max-width: 768px) {
    .passt-right { display: none !important; }
}
.passt-right img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}