/* ===== KOMPAKTERES DESIGN & HELLERE FARBEN ===== */

/* ===== HELLERE & FREUNDLICHERE FARBEN FÜR LIGHT MODE ===== */
:root {
    /* Hellere, freundlichere Farbpalette */
    --title-gradient-start: #3A3A4E;
    --title-gradient-mid: #A89464;
    --title-gradient-end: #C4AB7A;

    /* Hellere Text-Farben */
    --text-primary: #2A2A3A;
    --text-secondary: #5A5A6A;
    --text-tertiary: #7A7A8A;
}

[data-theme="dark"] {
    /* Dark Mode mit hellerer Schrift */
    --title-gradient-start: #FFFFFF;
    --title-gradient-mid: #B8984E;
    --title-gradient-end: #C9A75F;

    /* Hellere Text-Farben für Dark Mode */
    --text-primary: #E5E5E5;
    --text-secondary: #C5C5C5;
    --text-tertiary: #A5A5A5;
}

/* ===== REDUZIERTES SPACING ===== */

/* Hero Section kompakter */
.hero {
    padding: 5rem 0 4rem;
    min-height: 700px;
}

.hero .container {
    gap: 3rem;
}

.hero-title {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

/* Hero Title Anpassung für "Agentur" klein, "Alex Busch" groß */
.hero-subtitle-small {
    font-size: 2rem;
    font-weight: 600;
    display: block;
    opacity: 0.7;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.hero-placeholder {
    min-height: 450px;
}

/* Sections kompakter */
.introduction,
.services,
.about,
.reviews,
.contact {
    padding: 4rem 0;
}

/* Section Header kompakter */
.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.0625rem;
}

/* Service Cards kompakter */
.services-grid {
    gap: 2rem;
}

.service-card {
    padding: 2.5rem 2rem;
}

.service-icon {
    width: 75px;
    height: 75px;
    margin-bottom: 1.5rem;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Review Cards kompakter */
.reviews-grid {
    gap: 2rem;
}

.review-card {
    padding: 2rem;
}

.review-avatar {
    width: 60px;
    height: 60px;
}

/* Intro Cards kompakter */
.intro-content {
    gap: 2.5rem;
}

.intro-card {
    padding: 2.5rem 2rem;
}

.intro-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

.intro-card h4 {
    font-size: 1.25rem;
    margin: 1.5rem 0 1rem 0;
}

.intro-card p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.intro-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
}

.quote-box {
    padding: 1rem 1.75rem;
    margin: 1.5rem 0;
}

.quote-box::before {
    font-size: 3rem;
    top: -5px;
}

.quote-box p {
    font-size: 1rem;
    line-height: 1.5;
}

.competence-list,
.benefit-list,
.target-list {
    margin: 1.25rem 0;
}

.competence-list li,
.benefit-list li,
.target-list li {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.cta-box {
    padding: 2rem;
    margin-top: 1.5rem;
}

.cta-box p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

/* Contact Section kompakter */
.contact-grid {
    gap: 3rem;
}

.contact-item {
    margin-bottom: 2rem;
}

.contact-form {
    padding: 2.5rem;
}

.contact-icon {
    width: 60px;
    height: 60px;
}

/* Footer kompakter */
.footer {
    padding: 3rem 0 2rem;
}

.footer-content {
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-bottom {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

/* ===== HELLERE TITEL & TEXT FARBEN ===== */

/* Titel mit hellerem Gradient */
.hero-title,
.section-title,
.logo-text {
    background: linear-gradient(135deg,
        var(--title-gradient-start) 0%,
        var(--title-gradient-mid) 60%,
        var(--title-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.intro-card h3 {
    background: linear-gradient(135deg,
        var(--title-gradient-start) 0%,
        var(--title-gradient-mid) 80%,
        var(--title-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hellere Standard-Texte */
.hero-subtitle,
.section-subtitle,
.intro-card p,
p {
    color: var(--text-secondary);
}

/* Gold für Akzente bleibt */
.intro-card h4,
.gold-accent,
.competence-list li strong,
.benefit-list li strong {
    color: var(--gold);
}

/* Quote-Box Text heller */
.quote-box p {
    color: var(--text-primary);
}

/* ===== KOMPAKTERE BUTTONS ===== */
.btn {
    padding: 1rem 2.25rem;
    font-size: 1rem;
}

.hero-buttons {
    gap: 1rem;
}

/* ===== KOMPAKTERE BADGES ===== */
.section-badge {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

/* ===== MOBILE NOCH KOMPAKTER ===== */
@media (max-width: 768px) {
    .hero {
        padding: 4rem 0 3rem;
    }

    .hero-title {
        font-size: 2.75rem;
        margin-bottom: 1.25rem;
    }

    .hero-subtitle-small {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
        margin-bottom: 1.75rem;
    }

    .hero-placeholder {
        min-height: 350px;
    }

    .introduction,
    .services,
    .about,
    .reviews,
    .contact {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-title {
        font-size: 2.25rem;
        margin-bottom: 0.75rem;
    }

    .intro-content {
        gap: 2rem;
    }

    .intro-card {
        padding: 2rem 1.5rem;
    }

    .intro-card h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .intro-card h4 {
        font-size: 1.125rem;
        margin: 1.25rem 0 0.75rem 0;
    }

    .intro-card p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .intro-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1.25rem;
    }

    .quote-box {
        padding: 1.5rem;
        margin: 1.25rem 0;
    }

    .quote-box::before {
        font-size: 3rem;
    }

    .quote-box p {
        font-size: 1rem;
    }

    .service-card,
    .review-card {
        padding: 2rem 1.5rem;
    }

    .service-icon {
        width: 65px;
        height: 65px;
        margin-bottom: 1.25rem;
    }

    .services-grid,
    .reviews-grid {
        gap: 1.5rem;
    }

    .contact-form {
        padding: 2rem;
    }

    .cta-box {
        padding: 1.75rem;
        margin-top: 1.25rem;
    }

    .cta-box p {
        font-size: 1.0625rem;
        margin-bottom: 1.25rem;
    }

    .footer {
        padding: 2.5rem 0 1.5rem;
    }

    .footer-content {
        gap: 2.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 3rem 0 2.5rem;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-subtitle-small {
        font-size: 1.25rem;
    }

    .hero-placeholder {
        min-height: 300px;
    }

    .introduction,
    .services,
    .about,
    .reviews,
    .contact {
        padding: 2.5rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .intro-card {
        padding: 1.75rem 1.25rem;
    }

    .intro-card h3 {
        font-size: 1.375rem;
    }

    .intro-icon {
        width: 55px;
        height: 55px;
    }

    .service-icon {
        width: 60px;
        height: 60px;
    }

    .service-card,
    .review-card {
        padding: 1.75rem 1.25rem;
    }

    .quote-box {
        padding: 1.25rem;
    }

    .cta-box {
        padding: 1.5rem;
    }

    .btn {
        padding: 0.875rem 2rem;
        font-size: 0.9375rem;
    }
}

/* ===== OPTIMIERTE ABSTÄNDE ZWISCHEN SECTIONS ===== */
section + section {
    margin-top: -2rem;
}

/* ===== REDUZIERTE SCHATTEN FÜR WENIGER "SCHWERE" ===== */
:root {
    --shadow-soft: rgba(0, 0, 0, 0.04);
}

.service-card,
.review-card,
.intro-card {
    box-shadow:
        0 6px 24px var(--shadow-soft),
        inset 0 0 30px rgba(255, 255, 255, 0.04);
}

.service-card:hover,
.review-card:hover,
.intro-card:hover {
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.1),
        0 0 50px rgba(184, 152, 78, 0.15),
        inset 0 0 50px rgba(255, 255, 255, 0.08);
}

/* ===== NAVBAR KOMPAKTER ===== */
.nav-content {
    padding: 0.75rem 0;
}

.navbar {
    backdrop-filter: blur(var(--blur-md));
}

/* ===== LISTE ICONS KLEINER ===== */
.list-icon {
    font-size: 1.25rem;
}