/* ============================================================
   AQUARUBIN — home.css
   Hero, Image Banner, Sections der Startseite — DARK THEME
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 4.25rem;
}

/* Background real image */
.hero__bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* Multi-layer overlay: fade to near-black on the left for text, darkening overall */
.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(16, 14, 32,0.95) 0%,
            rgba(16, 14, 32,0.80) 45%,
            rgba(16, 14, 32,0.40) 70%,
            rgba(16, 14, 32,0.60) 100%),
        linear-gradient(180deg,
            rgba(16, 14, 32,0.30) 0%,
            rgba(16, 14, 32,0.00) 30%,
            rgba(16, 14, 32,0.00) 70%,
            rgba(16, 14, 32,0.90) 100%);
}

/* Ambient glow orbs layered ON TOP of image */
.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

.hero__orb--ruby {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.14) 0%, transparent 68%);
    top: -150px;
    right: -100px;
    animation: orb-drift 20s ease-in-out infinite alternate;
}

.hero__orb--blue {
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(73, 58, 143, 0.34) 0%, rgba(0, 128, 255, 0.10) 46%, transparent 70%);
    bottom: -80px;
    left: -120px;
    animation: orb-drift 24s ease-in-out infinite alternate-reverse;
}

@keyframes orb-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(24px, -18px) scale(1.08); }
}

/* Layout: left-aligned, no right visual frame */
.hero__inner {
    position: relative;
    z-index: 2;
    padding-block: var(--space-24);
    max-width: 820px;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Entrance animations */
@keyframes hero-appear {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero__title    { animation: hero-appear 0.8s var(--ease-out-expo) 0.05s both; }
.hero__subtitle { animation: hero-appear 0.8s var(--ease-out-expo) 0.20s both; }
.hero__actions  { animation: hero-appear 0.8s var(--ease-out-expo) 0.35s both; }

.hero__title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin-bottom: var(--space-6);
    color: #ffffff;
    text-wrap: balance;
}

/* Gradient accent line */
.hero__title--accent {
    display: block;
    background: linear-gradient(120deg, var(--clr-blue) 0%, var(--clr-violet-light) 48%, var(--clr-ruby) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__subtitle {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(230,238,255,0.75);
    max-width: 540px;
    margin-bottom: var(--space-10);
    line-height: 1.8;
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Scroll indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    animation: hero-appear 0.6s var(--ease-out-expo) 1s both;
}

.hero__scroll-indicator span {
    display: block;
    width: 1.5px;
    height: 44px;
    background: linear-gradient(180deg, var(--clr-blue), var(--clr-ruby), transparent);
    animation: scroll-line 2.2s ease-in-out infinite;
}

@keyframes scroll-line {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============================================================
   IMAGE BANNER — horizontal auto-scroll carousel
   ============================================================ */
.image-banner {
    padding-block: 0;
    overflow: hidden;
    background: var(--clr-bg);
    position: relative;
    /* Subtle top border glow */
    box-shadow:
        inset 0 1px 0 rgba(133,116,216,0.22),
        inset 0 -1px 0 rgba(255,0,255,0.12);
}

/* Fade edges */
.image-banner::before,
.image-banner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.image-banner::before {
    left: 0;
    background: linear-gradient(90deg, var(--clr-bg), transparent);
}
.image-banner::after {
    right: 0;
    background: linear-gradient(270deg, var(--clr-bg), transparent);
}

.image-banner__track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: banner-scroll 75s linear infinite;
}

.image-banner:hover .image-banner__track {
    animation-play-state: paused;
}

@keyframes banner-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.image-banner__item {
    flex-shrink: 0;
    width: clamp(260px, 28vw, 440px);
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
}

.image-banner__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-spring), filter 0.4s;
    filter: brightness(0.88) saturate(1.1);
}

.image-banner__item:hover img {
    transform: scale(1.04);
    filter: brightness(1.05) saturate(1.3);
}

/* Caption overlay on hover */
.image-banner__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(0deg, rgba(16, 14, 32,0.85) 0%, transparent 100%);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out-expo);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.image-banner__item:hover .image-banner__caption {
    transform: translateY(0);
}

/* ============================================================
   SECTION SPACING & BACKGROUNDS
   ============================================================ */
.section-categories,
.section-featured,
.section-why,
.section-topics,
.section-faq {
    padding-block: var(--space-24);
}

.section-categories { background: var(--clr-bg); }

/* Signatur-Band in Indigo (#191733), das sanft zur Basis ausläuft */
.section-featured {
    background: linear-gradient(180deg, var(--clr-bg-3) 0%, var(--clr-bg) 100%);
    position: relative;
    overflow: hidden;
}

.section-featured::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -4%;
    transform: translateY(-50%);
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(133,116,216,0.14) 0%, rgba(255,0,255,0.05) 42%, transparent 68%);
    pointer-events: none;
}

.section-why {
    background: var(--clr-bg);
    position: relative;
    overflow: hidden;
}

.section-why::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 820px;
    height: 820px;
    background: radial-gradient(circle, rgba(73,58,143,0.18) 0%, rgba(0,128,255,0.05) 46%, transparent 66%);
    pointer-events: none;
}

.section-topics {
    background: linear-gradient(180deg, var(--clr-bg-3) 0%, var(--clr-bg) 100%);
    position: relative;
    overflow: hidden;
}

.section-topics::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -4%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(133,116,216,0.13) 0%, rgba(255,0,255,0.045) 45%, transparent 68%);
    pointer-events: none;
}

/* ============================================================
   FAQ — horizontally auto-scrolling cards
   ============================================================ */
.section-faq {
    background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-2) 100%);
    position: relative;
    overflow: hidden;
}

.section-faq::before {
    content: '';
    position: absolute;
    top: 40%;
    right: -6%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(0,128,255,0.10) 0%, rgba(73,58,143,0.06) 46%, transparent 68%);
    pointer-events: none;
}

.faq-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-12);
    position: relative;
    z-index: 1;
}

/* One horizontal row — natively scrollable (touch swipe / drag), scrollbar hidden.
   JS (main.js) auto-scrolls via scrollLeft and wraps seamlessly; the edges fade
   out via a mask so cards appear/vanish softly. */
.faq-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* old Edge */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding-block: var(--space-4);     /* room for the 3D shadow */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.faq-scroller::-webkit-scrollbar { display: none; }   /* Chrome / Safari */
.faq-scroller:active,
.faq-scroller.is-dragging { cursor: grabbing; }

.faq-scroller.is-dragging {
    scroll-behavior: auto;
}

.faq-scroller__track {
    display: inline-flex;
    width: max-content;
}

/* ── Card — dark, 3D depth, gradient-glow border + light sweep (theme colours). ──
   The right margin (not a flex gap) gives the JS carousel one stable unit while
   it recycles cards from one end of a row to the other. */
.faq-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    width: min(360px, 82vw);
    margin-right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(158deg, var(--clr-bg-elevated) 0%, var(--clr-bg-card) 55%, var(--clr-bg-3) 100%);
    box-shadow:
        0 16px 34px rgba(7,5,20,0.55),
        0 3px 10px rgba(7,5,20,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring);
}

/* Gradient glow border — a 1px ring fading blue → violet → ruby (mask trick). */
.faq-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg,
        rgba(64,170,255,0.55) 0%,
        rgba(133,116,216,0.28) 42%,
        rgba(255,85,255,0.42) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Light sweep — a soft diagonal sheen across the top-left, like the reference. */
.faq-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.03) 22%,
        transparent 46%);
    pointer-events: none;
    z-index: 0;
}

.faq-card > * { position: relative; z-index: 1; }

.faq-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 24px 50px rgba(7,5,20,0.62),
        0 6px 16px rgba(0,60,180,0.24),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Icon box — rounded square with an accent glow (like the reference). */
.faq-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    color: var(--clr-blue-light);
    background: linear-gradient(150deg, rgba(0,128,255,0.20), rgba(133,116,216,0.10));
    border: 1px solid var(--clr-border-blue);
    box-shadow: 0 0 22px rgba(0,128,255,0.18), inset 0 1px 0 rgba(255,255,255,0.10);
}

.faq-card__q {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--clr-text);
}

.faq-card__a {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--clr-text-muted);
}

/* Reduced motion: JS skips the auto-scroll; the row stays swipe/drag-scrollable. */
@media (prefers-reduced-motion: reduce) {
    .faq-card { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .hero__inner {
        text-align: left;
        padding-block: var(--space-16);
        max-width: 100%;
    }
    .hero__content { align-items: flex-start; }
    .hero__subtitle { max-width: 100%; }
    .hero { min-height: 90dvh; }
    .hero__watermark { opacity: 0.03; right: -5%; bottom: -2%; }
}

@media (max-width: 768px) {
    .hero__title { font-size: clamp(2.4rem, 9vw, 3.6rem); }
    .image-banner__item { width: clamp(200px, 60vw, 280px); }
    .section-categories,
    .section-featured,
    .section-why,
    .section-topics,
    .section-faq { padding-block: var(--space-16); }
}

@media (max-width: 480px) {
    .hero__actions { flex-direction: column; width: 100%; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .image-banner__item { width: 220px; }
}

/* ============================================================
   BRAND WATERMARK SECTION — großes Logo über dem Footer
   ============================================================ */
.brand-watermark {
    padding-block: var(--space-16) var(--space-8);
    background: var(--clr-bg-2);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ambient glow behind logo */
.brand-watermark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(0,128,255,0.06) 0%,
        rgba(73,58,143,0.10) 38%,
        rgba(255,0,255,0.05) 62%,
        transparent 76%);
    pointer-events: none;
}

.brand-watermark__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-watermark__logo {
    width: clamp(240px, 45vw, 560px);
    height: auto;
    opacity: 0.12;
    /* No filter: invert — SVG has natural blue→pink gradient which looks correct on dark bg */
    display: block;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 768px) {
    .brand-watermark { padding-block: var(--space-12) var(--space-6); }
    .brand-watermark__logo { width: clamp(180px, 60vw, 320px); }
}