/* =============================================================
   EINFACHBOOT – MAIN CSS
   Design System für einfachboot.de
   Zielgruppe: 40–60, Premium-Nautik, WooCommerce-Shop
   ============================================================= */

/* ── CSS Custom Properties (Design Tokens) ────────────────── */
:root {
    /* Farben */
    --color-primary:     #1B6FBE;
    --color-primary-dk:  #155A9E;
    --color-primary-lt:  #EBF3FB;
    --color-navy:        #0D1F3C;
    --color-navy-lt:     #162B52;
    --color-gold:        #D97706;
    --color-gold-dk:     #B45309;
    --color-gold-lt:     #FEF3C7;
    --color-white:       #FFFFFF;
    --color-bg:          #F4F7FB;
    --color-bg-alt:      #EEF3F9;
    --color-text:        #2D3748;
    --color-text-muted:  #6B7280;
    --color-text-light:  #9CA3AF;
    --color-border:      #D1DCE8;
    --color-footer:      #0A1628;
    --color-youtube:     #FF0000;
    --color-success:     #22C55E;

    /* Typography */
    --font-base:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:      0.875rem;   /* 14px */
    --font-size-sm:      1rem;       /* 16px */
    --font-size-md:      1rem;       /* 16px - Base für 40-60 */
    --font-size-lg:      1.25rem;    /* 20px */
    --font-size-xl:      1.5rem;     /* 24px */
    --font-size-2xl:     2rem;       /* 32px */
    --font-size-3xl:     2.5rem;     /* 40px */
    --font-size-4xl:     3rem;       /* 48px */
    --font-size-5xl:     3.75rem;    /* 60px */
    --font-size-6xl:     4.5rem;     /* 72px */

    /* Abstände */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Radien */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-full: 9999px;

    /* Schatten */
    --shadow-sm:  0 1px 3px rgba(13,31,60,0.08), 0 1px 2px rgba(13,31,60,0.06);
    --shadow-md:  0 4px 16px rgba(13,31,60,0.10), 0 2px 8px rgba(13,31,60,0.08);
    --shadow-lg:  0 12px 40px rgba(13,31,60,0.14), 0 4px 16px rgba(13,31,60,0.10);
    --shadow-xl:  0 24px 64px rgba(13,31,60,0.18);
    --shadow-gold: 0 8px 32px rgba(232,160,32,0.25);

    /* Transitions – schneller & dynamischer für 40-60 */
    --transition-fast:   120ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;

    /* Layout */
    --container-max:  1200px;
    --container-pad:  var(--space-6);
    --header-height:  72px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-md);
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dk); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ── Container ────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ── Utility: Section Headers ─────────────────────────────── */
.section-eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
.section-eyebrow--light { color: rgba(255,255,255,0.7); }

.section-header {
    text-align: center;
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--space-16);
}

.section-title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1;
    padding: 0.875em 1.75em;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm  { font-size: var(--font-size-xs); padding: 0.625em 1.25em; }
.btn--lg  { font-size: var(--font-size-lg); padding: 1em 2em; }
.btn--xl  { font-size: var(--font-size-xl); padding: 1.1em 2.5em; }

/* Primary – Marineblau */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dk);
    border-color: var(--color-primary-dk);
    color: var(--color-white);
    box-shadow: 0 8px 24px rgba(27,111,190,0.35);
}

/* Gold – CTA (Hauptkauf-Button) */
.btn--gold {
    background: var(--color-gold);
    color: var(--color-navy);
    border-color: var(--color-gold);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.btn--gold:hover {
    background: var(--color-gold-dk);
    border-color: var(--color-gold-dk);
    color: var(--color-navy);
    box-shadow: 0 8px 32px rgba(217,119,6,0.45);
    transform: translateY(-3px);
}

/* Outline Navy */
.btn--outline-navy {
    background: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}
.btn--outline-navy:hover {
    background: var(--color-navy);
    color: var(--color-white);
}

/* Outline White */
.btn--outline-white {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.7);
}
.btn--outline-white:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-white);
    color: var(--color-white);
}

/* Ghost */
.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: transparent;
    padding-inline: var(--space-4);
}
.btn--ghost:hover {
    background: var(--color-primary-lt);
    color: var(--color-primary);
}

/* YouTube */
.btn--youtube {
    background: var(--color-youtube);
    color: var(--color-white);
    border-color: var(--color-youtube);
}
.btn--youtube:hover {
    background: #cc0000;
    border-color: #cc0000;
    color: var(--color-white);
    box-shadow: 0 8px 24px rgba(255,0,0,0.3);
}


/* ═══════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════ */
.topbar {
    background: var(--color-navy);
    color: rgba(255,255,255,0.85);
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: var(--space-2) 0;
}
.topbar__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.topbar__item { display: flex; align-items: center; gap: var(--space-2); }
.topbar__divider { color: rgba(255,255,255,0.3); }


/* ═══════════════════════════════════════════════════════════
   SITE HEADER / NAVIGATION
══════════════════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), background var(--transition-base);
}
.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Logo */
.site-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo-img { height: 48px; width: auto; }
.logo-img--white { display: none; }
.custom-logo { height: 48px; width: auto; }

/* Primary Nav */
.primary-nav { flex: 1; }
.primary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.primary-nav__list a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.primary-nav__list a:hover,
.primary-nav__list li.current-menu-item > a {
    background: var(--color-primary-lt);
    color: var(--color-primary);
}

/* Header Actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.header__shop-btn { display: none; }

@media (min-width: 1024px) {
    .header__shop-btn { display: inline-flex; }
}

.header__cart {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.header__cart:hover { background: var(--color-bg); color: var(--color-primary); }

.cart-count {
    position: absolute;
    top: -2px;
    right: -4px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-size: 11px;
    font-weight: 800;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cart-count:empty,
.cart-count[data-count="0"] { display: none; }

/* Hamburger */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.hamburger:hover { background: var(--color-bg); }
.hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-navy);
    border-radius: 2px;
    transition: all var(--transition-base);
}
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 768px) { .hamburger { display: none; } }

/* Mobile Menu */
.mobile-menu {
    display: none;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: var(--space-6);
}
.mobile-menu.is-open { display: block; }
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-6); }
.mobile-nav__list a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.mobile-nav__list a:hover { background: var(--color-primary-lt); color: var(--color-primary); }
.mobile-nav__cta { width: 100%; justify-content: center; }

@media (min-width: 768px) { .primary-nav { display: block; } }
@media (max-width: 767px)  { .primary-nav { display: none; } }


/* ═══════════════════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-height) - 36px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-navy);
    padding: var(--space-24) 0;
}

.hero__bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.55;
}

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(13,31,60,0.82) 0%,
        rgba(13,31,60,0.65) 50%,
        rgba(13,31,60,0.45) 100%
    );
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
    align-items: center;
}

@media (min-width: 900px) {
    .hero .container {
        grid-template-columns: 1fr 420px;
    }
}

.hero__content { color: var(--color-white); }

.eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    backdrop-filter: blur(8px);
}

.hero__headline {
    font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-6xl));
    font-weight: 900;
    line-height: 1.08;
    color: var(--color-white);
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.headline--accent {
    color: var(--color-gold);
    position: relative;
}

.hero__subline {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.80);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: var(--space-10);
}

.hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.hero__stats {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,0.15);
}
.hero__stat { text-align: center; }
.hero__stat-number {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-gold);
    line-height: 1.2;
}
.hero__stat-label {
    display: block;
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.hero__stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.2);
}

/* Hero Product Teaser */
.hero__product-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}
.hero__product-img {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 1;
    object-fit: cover;
}
.hero__product-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-4);
}
.hero__product-name { color: var(--color-white); font-weight: 700; font-size: var(--font-size-md); }
.hero__product-badge {
    background: var(--color-gold);
    color: var(--color-navy);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scroll Indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.scroll-indicator__line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.3; transform: scaleY(0.5); }
}


/* ═══════════════════════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════════════════════ */
.trust-bar {
    background: var(--color-white);
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}
@media (min-width: 768px) {
    .trust-bar__grid { grid-template-columns: repeat(4, 1fr); }
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.trust-item__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: var(--color-primary-lt);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-item__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-1);
}
.trust-item__text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   PRODUKTE SECTION
══════════════════════════════════════════════════════════ */
.products-section {
    padding: var(--space-24) 0;
    background: var(--color-bg);
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Produkt-Karte */
.product-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.product-card--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md), 0 0 0 2px rgba(27,111,190,0.15);
}

.product-card__image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-alt);
}
.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), opacity var(--transition-base);
}
.product-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.product-card:hover .product-card__img:not(.product-card__img--hover) { opacity: 0; }
.product-card:hover .product-card__img--hover { opacity: 1; }

/* Placeholder für fehlende Bilder */
.product-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    background: var(--color-bg-alt);
    aspect-ratio: 1;
}

.product-card__badges {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: flex;
    gap: var(--space-2);
    z-index: 2;
}
.product-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-badge--bestseller { background: var(--color-gold); color: var(--color-navy); }
.product-badge--new { background: var(--color-primary); color: var(--color-white); }

.product-card__content {
    padding: var(--space-6) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card__category {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}
.product-card__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: var(--space-3);
    line-height: 1.2;
}
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a:hover { color: var(--color-primary); }
.product-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-5);
    flex: 1;
}

.product-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-lt);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.feature-chip svg { color: var(--color-success); }

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}
.product-card__price { display: flex; flex-direction: column; }
.price__amount {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1.2;
}
.price__vat { font-size: 11px; color: var(--color-text-light); }

.products-section__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.products-section__more-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   SPOTLIGHT SECTION (Produkt Detail)
══════════════════════════════════════════════════════════ */
.spotlight {
    padding: var(--space-32) 0;
    background: var(--color-white);
}
.spotlight__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
    align-items: center;
}
@media (min-width: 900px) {
    .spotlight__inner { grid-template-columns: 1fr 1fr; }
}

/* Galerie */
.spotlight__gallery { display: flex; flex-direction: column; gap: var(--space-4); }
.spotlight__main-img-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--color-bg-alt);
    aspect-ratio: 1;
}
.spotlight__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.spotlight__main-img:hover { transform: scale(1.03); }

.spotlight__thumbnails {
    display: flex;
    gap: var(--space-3);
}
.thumb-btn {
    flex: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
    cursor: pointer;
    aspect-ratio: 1;
    background: var(--color-bg-alt);
}
.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumb-btn:hover,
.thumb-btn.active { border-color: var(--color-primary); }

/* Content */
.spotlight__title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 900;
    color: var(--color-navy);
    line-height: 1.1;
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}
.spotlight__lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}
.spotlight__checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-10);
}
.checklist-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.checklist-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--color-success);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.checklist-item strong {
    display: block;
    font-size: var(--font-size-md);
    color: var(--color-navy);
    margin-bottom: var(--space-1);
}
.checklist-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}
.spotlight__cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════
   ÜBER MATTHIAS
══════════════════════════════════════════════════════════ */
.about-matthias {
    padding: var(--space-32) 0;
    background: var(--color-bg);
}
.about-matthias__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
    align-items: center;
}
@media (min-width: 900px) {
    .about-matthias__inner { grid-template-columns: 400px 1fr; }
}

.about-matthias__img-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/5;
    background: var(--color-bg-alt);
}
.about-matthias__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-matthias__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    min-height: 400px;
}

.about-matthias__credentials {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.credential {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.credential svg { color: var(--color-gold); }

.about-matthias__title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 900;
    color: var(--color-navy);
    line-height: 1.1;
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}
.about-matthias__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.about-matthias__text p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: 1.75;
}
.about-matthias__text strong { color: var(--color-navy); }
.about-matthias__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════ */
.testimonials {
    padding: var(--space-24) 0;
    background: var(--color-white);
}
.testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
    .testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

.testimonial-card {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.testimonial-card--featured {
    background: var(--color-navy);
    border-color: var(--color-navy);
}

.testimonial-card__stars { font-size: var(--font-size-xl); color: var(--color-gold); }
.testimonial-card--featured .testimonial-card__stars { color: var(--color-gold); }

.testimonial-card__quote {
    font-size: var(--font-size-md);
    color: var(--color-text);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
    border: none;
    padding: 0;
}
.testimonial-card--featured .testimonial-card__quote { color: rgba(255,255,255,0.90); }

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
}
.testimonial-card__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.testimonial-card--featured .testimonial-card__author-avatar { background: var(--color-gold); color: var(--color-navy); }

.testimonial-card__author strong {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-navy);
}
.testimonial-card--featured .testimonial-card__author strong { color: var(--color-white); }
.testimonial-card__author span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.testimonial-card--featured .testimonial-card__author span { color: rgba(255,255,255,0.6); }

.testimonials__overall { display: flex; justify-content: center; }
.rating-display {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-gold-lt);
    border: 1px solid rgba(232,160,32,0.3);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
}
.rating-display__score { font-size: var(--font-size-3xl); font-weight: 900; color: var(--color-navy); }
.rating-display__stars { font-size: var(--font-size-xl); color: var(--color-gold); }
.rating-display__count { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════
   YOUTUBE SECTION
══════════════════════════════════════════════════════════ */
.youtube-section {
    position: relative;
    padding: var(--space-32) 0;
    overflow: hidden;
}
.youtube-section__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-lt) 100%);
}
.youtube-section .container { position: relative; z-index: 1; }

.youtube-section__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}
@media (min-width: 900px) {
    .youtube-section__inner { grid-template-columns: 1fr 1fr; }
}

.youtube-section__title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}
.youtube-section__text {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}
.youtube-section__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.youtube-section__visual { display: flex; justify-content: center; }
.youtube-section__video-preview {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16/9;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.video-preview__thumb {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    cursor: pointer;
}
.video-preview__play {
    width: 80px;
    height: 80px;
    background: rgba(255,0,0,0.9);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: transform var(--transition-base), background var(--transition-fast);
}
.video-preview__thumb:hover .video-preview__play {
    transform: scale(1.1);
    background: var(--color-youtube);
}
.video-preview__label {
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-sm);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER PRE-CTA
══════════════════════════════════════════════════════════ */
.final-cta {
    padding: var(--space-32) 0;
    background: var(--color-bg);
}
.final-cta__inner {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}
.final-cta__title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 900;
    color: var(--color-navy);
    line-height: 1.2;
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}
.final-cta__text {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-10);
}
.final-cta__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}
.final-cta__guarantee {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}
.final-cta__guarantee svg { color: var(--color-success); }


/* ═══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer-cta {
    background: var(--color-primary);
    padding: var(--space-12) 0;
}
.footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.footer-cta__headline {
    font-size: clamp(var(--font-size-lg), 3vw, var(--font-size-2xl));
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--space-2);
}
.footer-cta__sub { font-size: var(--font-size-sm); color: rgba(255,255,255,0.80); }

.site-footer { background: var(--color-footer); color: rgba(255,255,255,0.7); }

.footer__main { padding: var(--space-16) 0; }
.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }

.footer__tagline {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.60);
    line-height: 1.7;
    margin: var(--space-4) 0;
}
.footer__logo img { height: 40px; width: auto; }
.footer__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.badge--footer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.footer__social { display: flex; gap: var(--space-3); }
.social-link {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.social-link:hover { background: var(--color-youtube); color: var(--color-white); }

.footer__col-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}
.footer__nav-list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__nav-list a {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.60);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer__nav-list a:hover { color: var(--color-white); }
.footer__contact { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__contact-link {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.60);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: block;
}
.footer__contact-link:hover { color: var(--color-white); }

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: var(--space-6) 0;
}
.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.footer__copyright { font-size: var(--font-size-xs); color: rgba(255,255,255,0.45); }
.footer__bottom-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
}
.footer__bottom-links a { color: rgba(255,255,255,0.45); text-decoration: none; }
.footer__bottom-links a:hover { color: rgba(255,255,255,0.80); }
.footer__bottom-links span { color: rgba(255,255,255,0.2); }


/* ═══════════════════════════════════════════════════════════
   GENERIC PAGES (page.php, 404, etc.)
══════════════════════════════════════════════════════════ */
.page-content {
    max-width: 780px;
    margin-inline: auto;
    padding: var(--space-20) var(--container-pad);
}
.page-content h1 { font-size: var(--font-size-3xl); font-weight: 900; color: var(--color-navy); margin-bottom: var(--space-6); }
.page-content h2 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-navy); margin: var(--space-8) 0 var(--space-3); }
.page-content p  { color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.8; }
.page-content ul { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-4); }
.page-content ul li { margin-bottom: var(--space-2); color: var(--color-text-muted); }


/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS (JS-gesteuert)
══════════════════════════════════════════════════════════ */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].is-visible {
    opacity: 1;
    transform: none;
}
[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate-delay="3"] { transition-delay: 0.3s; }
[data-animate-delay="4"] { transition-delay: 0.4s; }


/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
    border-radius: 4px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .scroll-indicator__line { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   LERNEN-SEITE
══════════════════════════════════════════════════════════ */
.lernen-header {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary) 100%);
    color: #fff;
    padding: var(--space-20) 0 var(--space-16);
    text-align: center;
}
.lernen-header__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin: var(--space-4) 0 var(--space-6);
    color: #fff;
}
.lernen-header__text {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

.lernen-section {
    padding: var(--space-16) 0;
    background: var(--color-bg);
}
.lernen-section--alt {
    background: var(--color-bg-alt);
}
.lernen-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}
.lernen-section__icon {
    font-size: 2rem;
    line-height: 1;
}
.lernen-section__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-navy);
    margin: 0 0 var(--space-1);
}
.lernen-section__desc {
    color: var(--color-text-light);
    margin: 0;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 640px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .video-grid { grid-template-columns: repeat(3, 1fr); }
}

.video-card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
}
.video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.video-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--color-navy);
    overflow: hidden;
}
.video-card__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.video-card:hover .video-card__thumb-img {
    transform: scale(1.04);
}
.video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,31,60,0.35);
    border: none;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}
.video-card__play:hover { background: rgba(13,31,60,0.55); }
.video-card__play svg {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.video-card__iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    display: block;
}
.video-card__content {
    padding: var(--space-5) var(--space-6);
}
.video-card__title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-2);
}
.video-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

/* Knotenbrett CTA Box */
.lernen-cta-box {
    margin-top: var(--space-10);
    background: linear-gradient(135deg, var(--color-gold-lt), #fff8e8);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
}
.lernen-cta-box__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.lernen-cta-box__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.lernen-cta-box__text strong {
    font-size: var(--font-size-lg);
    color: var(--color-navy);
}
.lernen-cta-box__text span {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Footer CTA */
.lernen-footer-cta {
    background: var(--color-navy);
    padding: var(--space-12) 0;
    text-align: center;
    color: rgba(255,255,255,0.8);
}
.lernen-footer-cta p {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-lg);
}

/* ═══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print {
    .site-header, .topbar, .hero__scroll-indicator,
    .footer-cta, .footer__social, .final-cta { display: none; }
    body { font-size: 12pt; }
}