/* ═══════════════════════════════════════════
   BASE — Reset, Custom Props, Typography
   ═══════════════════════════════════════════ */

/* Reset handled inline (critical CSS in enqueue.php) */

html, body {
    overflow-x: clip;
}

/* ── Typography ─────────────────────────── */

h1, .l7-h1 { font-size: var(--l7-h1); font-weight: var(--l7-h1-weight, 700); line-height: var(--l7-h1-lh, 1.1); letter-spacing: -0.02em; }
h2, .l7-h2 { font-size: var(--l7-h2); font-weight: var(--l7-h2-weight, 700); line-height: var(--l7-h2-lh, 1.15); letter-spacing: -0.02em; }
h3, .l7-h3 { font-size: var(--l7-h3); font-weight: var(--l7-h3-weight, 600); line-height: var(--l7-h3-lh, 1.2); }
h4, .l7-h4 { font-size: var(--l7-h4); font-weight: var(--l7-h4-weight, 600); line-height: var(--l7-h4-lh, 1.3); }
h5, .l7-h5 { font-size: var(--l7-h5); font-weight: var(--l7-h5-weight, 500); line-height: var(--l7-h5-lh, 1.4); }
h6, .l7-h6 { font-size: var(--l7-h6); font-weight: var(--l7-h6-weight, 500); line-height: var(--l7-h6-lh, 1.4); text-transform: uppercase; letter-spacing: 0.05em; }

p {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.6);
    font-weight: var(--l7-body-weight, 400);
}

p + p { margin-top: var(--l7-gap-sm); }

.l7-statement__text {
    font-size: var(--l7-statement);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ── Links ──────────────────────────────── */

.l7-link {
    color: var(--l7-primary);
    font-weight: 500;
    transition: opacity 0.2s;
}
.l7-link:hover { opacity: 0.7; }

/* ── Buttons ────────────────────────────── */

.l7-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875em 2em;
    font-size: var(--l7-btn-size, 16px);
    font-weight: var(--l7-btn-weight, 500);
    font-family: var(--l7-font-primary);
    letter-spacing: var(--l7-btn-spacing, 0.02em);
    text-transform: var(--l7-btn-transform, none);
    border-radius: var(--l7-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.l7-btn--primary {
    background: var(--l7-cta-color, var(--l7-primary));
    color: var(--l7-text-light, #fff);
    border-color: var(--l7-cta-color, var(--l7-primary));
}
.l7-btn--primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.l7-btn--ghost {
    background: transparent;
    color: var(--l7-text-light, #fff);
    border-color: currentColor;
}
.l7-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.l7-btn--dark {
    background: var(--l7-secondary);
    color: var(--l7-text-light);
    border-color: var(--l7-secondary);
}

.l7-btn--pill {
    /* Em-basiertes Padding skaliert automatisch mit font-size */
    padding: 0.32em 0.4em 0.32em 1em;
    font-family: var(--l7-font-primary);
    font-size: var(--l7-cta-font-size, 18px);
    font-weight: 400;
    border-radius: 50px;
    gap: 0.55em;
    line-height: 1;
    letter-spacing: 0.02em;
    align-items: center;
}

.l7-btn__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.l7-btn--pill:hover .l7-btn__arrow {
    transform: translateX(4px);
}

/* ── Section Label ──────────────────────── */

.l7-section-label {
    display: block;
    font-size: var(--l7-badge);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    color: inherit;
    opacity: 0.55; /* Unified eyebrow opacity — WCAG-friendlier als 0.45, konsistent über alle Sections */
    margin-bottom: var(--l7-gap-sm);
}

/* ── Reveal Animation ───────────────────── */

.l7-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.l7-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Word-Reveal — Wörter schieben sich von unten rein (theme-weit einheitlich).
   JS in main.js wrapped jedes Wort in .l7-word > .l7-word-inner und setzt
   gestaffelte transition-delays. Trigger via .is-visible (revealObserver)
   oder .is-active (z. B. Statement-Snap). */
.l7-word-reveal .l7-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    /* padding-right gibt italic-Buchstaben Luft (sonst schneidet overflow:hidden den Slant ab) */
    padding: 0 0.08em 0.08em 0;
}
.l7-word-reveal .l7-word-inner {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.l7-word-reveal.is-visible .l7-word-inner,
.l7-word-reveal.is-active .l7-word-inner {
    transform: translateY(0);
}

/* Reveal-Loop Cascade — gestaffelte Delays für Card-Listen
   (Testimonials, Portfolio-Mosaic, Cases, Stats-Bar, etc.)
   Ungerade/Gerade-Pattern erzeugt natürlichen Pinterest-Cascade.
   Trigger: data-l7-reveal="loop" + .l7-reveal Klasse */
[data-l7-reveal="loop"].l7-reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(2).is-visible { transition-delay: 0.20s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(3).is-visible { transition-delay: 0.15s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(4).is-visible { transition-delay: 0.30s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(5).is-visible { transition-delay: 0.25s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(6).is-visible { transition-delay: 0.40s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(7).is-visible { transition-delay: 0.35s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(8).is-visible { transition-delay: 0.50s; }
[data-l7-reveal="loop"].l7-reveal:nth-child(9).is-visible { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    [data-l7-reveal="loop"].l7-reveal { transition: none !important; transform: none !important; }
}

/* Blur-Reveal — ein-time blur→sharp Effekt (Footer-Claim) */
.l7-blur-reveal { filter: blur(18px); opacity: 0.3; transition: filter 1.2s ease-out, opacity 1.2s ease-out; }
.l7-blur-reveal.is-revealed { filter: blur(0); opacity: 1; }

/* ── Selection ──────────────────────────── */

::selection {
    background: var(--l7-primary);
    color: var(--l7-text-light);
}