@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}

/* =============================================================================
   Radl Shop Weis – style.css
   ============================================================================= */

:root {
    /* Farben */
    --color-primary:       #155dfc;
    --color-primary-light: #2b7fff;
    --color-primary-bg:    #eff6ff;
    --color-primary-bg2:   #dbeafe;

    --color-dark:          #0f172b;
    --color-dark-2:        #1d293d;
    --color-dark-3:        #314158;

    --color-text:          #45556c;
    --color-text-light:    #90a1b9;

    --color-border:        #e2e8f0;
    --color-border-light:  #cad5e2;

    --color-bg:            #ffffff;
    --color-bg-light:      #f8fafc;
    --color-bg-subtle:     #f1f5f9;

    --color-green:         #00a63e;
    --color-green-bg:      #dcfce7;
    --color-orange:        #f54900;
    --color-orange-bg:     #fff;

    /* Typografie */
    --font-family:         'Inter', sans-serif;
    --font-size-xs:        14px;
    --font-size-sm:        16px;
    --font-size-md:        18px;
    --font-size-lg:        20px;
    --font-size-xl:        24px;
    --font-size-2xl:       30px;
    --font-size-3xl:       36px;
    --font-size-4xl:       48px;

    /* Abstände */
    --spacing-xs:  8px;
    --spacing-sm:  16px;
    --spacing-md:  24px;
    --spacing-lg:  32px;
    --spacing-xl:  48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;

    /* Layout */
    --container-max: 1280px;
    --container-pad: 2rem;
    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     16px;

    /* Schatten */
    --shadow-sm: 0 1px 3px rgba(15, 23, 43, 0.08), 0 1px 2px rgba(15, 23, 43, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 43, 0.07), 0 2px 4px rgba(15, 23, 43, 0.06);
    --shadow-lg: 0 10px 15px rgba(15, 23, 43, 0.08), 0 4px 6px rgba(15, 23, 43, 0.05);

    /* Transitions */
    --transition: 0.2s ease;
}

/* -------------------------
   2. RESET & BASIS
   ------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

address {
    font-style: normal;
}

/* -------------------------
   3. LAYOUT: CONTAINER
   ------------------------- */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* -------------------------
   4. SCROLL-OFFSET (für sticky Header)
   ------------------------- */
section[id] {
    scroll-margin-top: 112px;
}

/* -------------------------
   5. TYPOGRAFIE-HELFER
   ------------------------- */
.section-header {
    margin-bottom: var(--spacing-xl);
}

.section-header--centered {
    text-align: center;
}

.section-heading {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

.section-heading-sm {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-xs);
}

.section-subtext {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    max-width: 600px;
}

.section-header--centered .section-subtext {
    margin-inline: auto;
}

/* -------------------------
   5. BUTTONS
   ------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
}

.btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.btn--outline {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* -------------------------
   6. HEADER
   ------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition);
}

.site-header--scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-dark);
    white-space: nowrap;
}

/* Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}

.nav-link:hover,
.nav-link--active {
    color: var(--color-primary);
}

/* -------------------------
   7. HERO
   ------------------------- */
.hero {
    position: relative;
    min-height: 741px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(15, 23, 43, 0.85) 0%,
        rgba(15, 23, 43, 0.75) 50%,
        rgba(15, 23, 43, 0.70) 100%
    );
}

.hero .container {
    position: relative;
    z-index: 1;
    padding-block: var(--spacing-3xl);
}

.hero-content {
    max-width: 640px;
}

.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: var(--spacing-md);
}

.hero-desc {
    font-size: var(--font-size-md);
    color: var(--color-bg-subtle);
    line-height: 1.65;
    margin-bottom: var(--spacing-lg);
}

/* Hero Features */
.hero-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.hero-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hero-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-feature-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: #fff;
}

.hero-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-feature-text strong {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.hero-feature-text span {
    font-size: var(--font-size-sm);
    color: var(--color-border);
    line-height: 1.5;
}

/* CTA Buttons */
.hero-cta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* -------------------------
   8. MARKEN (BRANDS)
   ------------------------- */
.brands {
    padding-block: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.brands-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.brand-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 112px;
    padding: 2px;
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}



.brand-box img {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
}

/* -------------------------
   9. SERVICE
   ------------------------- */
.service {
    padding-block: var(--spacing-3xl);
    background-color: var(--color-bg);
}

/* Karussell */
.carousel {
    position: relative;
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg-light);
}

.carousel-track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.carousel-slide--active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition);
    z-index: 2;
}

.carousel-btn:hover {
    background-color: #fff;
}

.carousel-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-dark);
}

.carousel-btn--prev { left: 16px; }
.carousel-btn--next { right: 16px; }

.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color var(--transition), width var(--transition);
    padding: 0;
}

.carousel-dot--active {
    width: 32px;
    border-radius: 4px;
    background-color: #fff;
}

/* Service Karten */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.service-card {
    padding: var(--spacing-lg);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.service-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-bg2);
}

.service-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-primary-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.service-card-icon svg,
.service-card-icon img {
    width: 24px;
    height: 24px;
}

.service-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-xs);
}

.service-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.65;
}

/* -------------------------
   10. BIKE-LEASING
   ------------------------- */
.leasing {
    padding-block: var(--spacing-3xl);
    background: linear-gradient(161deg, var(--color-primary-bg) 0%, var(--color-bg-light) 100%);
}

.section-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: var(--spacing-sm);
}

.section-icon svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.leasing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.leasing-box {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.leasing-box h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.leasing-box > p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.65;
    margin-top: var(--spacing-sm);
}

/* Checkliste */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--spacing-md);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--font-size-sm);
    color: var(--color-dark);
    line-height: 1.5;
}

.check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--color-green-bg);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a63e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    margin-top: 2px;
}

.leasing-info-label {
    text-decoration: underline;
    font-weight: 600;
}

.leasing-info {
    background-color: #EFF6FF;
    border: 1px solid #BEDBFF;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Leasing Partner */
.leasing-partners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: var(--spacing-md);
}

.partner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--spacing-sm);
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-dark);
    text-align: center;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}


/* -------------------------
   11. KONTAKT
   ------------------------- */
.contact {
    padding-block: var(--spacing-3xl);
    background-color: var(--color-bg);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
}

.contact-grid {
    gap: var(--spacing-md);
}

.contact-card--blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.contact-card--green {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.contact-card--orange {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

.contact-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    align-self: center;
}

.contact-icon img {
    width: 28px;
    height: 28px;
}

.contact-icon--blue  { background-color: var(--color-primary); }
.contact-icon--green { background-color: var(--color-green); }
.contact-icon--orange { background-color: var(--color-orange); }

.contact-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
    align-self: center;
    text-align: center;
}

.contact-card address,
.contact-card p {
    font-size: var(--font-size-sm);
    color: var(--color-dark-3);
    line-height: 1.8;
}

.contact-phone {
    display: block;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-dark-3);
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition);
    align-self: center;
}

.contact-phone:hover {
    color: var(--color-primary);
}

.hours-list {
    font-size: var(--font-size-sm);
    color: var(--color-dark-3);
    line-height: 1.9;
}

.hours-list strong {
    font-weight: 600;
}

/* -------------------------
   12. FOOTER
   ------------------------- */
.site-footer {
    background-color: var(--color-dark-2);
    color: var(--color-text-light);
    padding-top: var(--spacing-2xl);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer Marke */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-xs);
}

.footer-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.footer-logo span {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #fff;
}

.footer-brand > p {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    max-width: 400px;
}

/* Footer Impressum */
.footer-impressum h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--spacing-sm);
    padding-left: 48px;
}

.footer-impressum address {
    font-size: var(--font-size-xs);
    line-height: 1.9;
    padding-left: 48px;
}

.footer-impressum address a {
    color: var(--color-text-light);
    transition: color var(--transition);
}

.footer-impressum address a:hover {
    color: var(--color-primary-light);
}

/* Footer Copyright */
.footer-bottom {
    padding-block: var(--spacing-sm);
    text-align: center;
}

.footer-bottom p {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/* -------------------------
   13. LEGAL PAGE
   ------------------------- */
.legal-page {
    padding-top: 120px;
    padding-bottom: var(--spacing-2xl);
    background:
        radial-gradient(circle at top left, rgba(21, 93, 252, 0.10), transparent 32%),
        linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%);
}

.legal-hero {
    padding-block: 0;
    background: transparent;
}

.legal-page-header {
    margin-bottom: var(--spacing-xl);
}

.legal-content {
    display: grid;
    gap: var(--spacing-md);
}

.legal-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
}

.legal-card--highlight {
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, #ffffff 100%);
}

.legal-card h2 {
    font-size: var(--font-size-lg);
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

.legal-card p,
.legal-card li,
.legal-card address {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text);
}

.legal-card address {
    font-style: normal;
}

.legal-card ul {
    margin-top: var(--spacing-sm);
    padding-left: 1.25rem;
}

.legal-card a {
    color: var(--color-primary);
}

.legal-card p + p,
.legal-card p + ul,
.legal-card ul + p {
    margin-top: var(--spacing-sm);
}

/* -------------------------
   14. RESPONSIVE
   ------------------------- */
@media (max-width: 1024px) {
    :root {
        --font-size-4xl: 40px;
        --font-size-3xl: 30px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .leasing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --container-pad: 1.25rem;
        --font-size-4xl: 32px;
        --font-size-3xl: 26px;
    }

    .header-inner {
        height: 72px;
    }

    .logo-img {
        width: 48px;
        height: 48px;
    }

    .logo-text {
        font-size: var(--font-size-lg);
    }

    .main-nav {
        gap: var(--spacing-xs);
    }

    .nav-link {
        font-size: var(--font-size-xs);
    }

    .hero {
        min-height: auto;
    }

    .hero .container {
        padding-block: var(--spacing-2xl);
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .footer-impressum h4,
    .footer-impressum address {
        padding-left: 0;
    }

    .legal-page {
        padding-top: 104px;
    }

    .legal-card {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .brands-grid {
        gap: var(--spacing-xs);
    }

    .brand-box {
        width: 130px;
        height: 90px;
    }

    .leasing-partners {
        grid-template-columns: 1fr;
    }
}