/* modern.css - B&B US Bikes Basis */
#leasing {
    scroll-margin-top: 120px; /* Hier die Höhe deines Headers + Puffer eintragen */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

.site-header {
    background-color: #000;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid #9DCD4A; /* Cannondale Grün */
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo img {
    height: 50px;
    width: auto;
}

.nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-list li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
}

.nav-list li a:hover, .nav-list li a.active {
    color: #9DCD4A;
}

.banner-section {
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.banner-slideshow img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Toggle verstecken für Desktop */
.mobile-toggle {
    display: none;
}

@media (max-width: 768px) {
    .nav-list {
        display: none; /* Einfache Lösung für jetzt, MyJs.js übernimmt meist das Menü */
    }
    .mobile-toggle {
        display: block;
    }
}

/* KONTAKT BAR */

.top-contact-bar {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    font-family: Arial, sans-serif;
}

.contact-flex-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.contact-main, .contact-badges, .contact-hours {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-item {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-large {
    font-size: 1.2em;
    font-weight: bold;
}

.contact-badges img {
    height: 35px;
    width: auto;
}

.txt-link {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #9DCD4A;
}

.contact-hours {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.85em;
    border-left: 2px solid #ddd;
    padding-left: 15px;
}

/* Mobil-Optimierung */
@media (max-width: 768px) {
    .contact-flex-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .contact-hours {
        border-left: none;
        padding-left: 0;
        align-items: center;
    }
}



/*---------------------*/
.contact-bar {
    background: #f4f4f4;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-link, .phone-number {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-number { font-size: 1.2em; }

.social-icon img { width: 40px; transition: 0.3s; }
.social-icon img:hover { opacity: 0.8; }

.business-meta {
    display: flex;
    gap: 30px;
    font-size: 0.9em;
    align-items: center;
}

/* WILLKOMMEN & TEXTE */
.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.main-title {
    color: #000;
    border-bottom: 3px solid #9DCD4A;
    padding-bottom: 10px;
    font-size: 28px;
    margin-bottom: 20px;
}

.sub-title {
    font-size: 22px;
    margin-top: 30px;
    color: #333;
}

.accent-link {
    color: #d9534f;
    font-weight: bold;
    text-decoration: none;
}

.leasing-highlight {
    margin-top: 40px;
}

.leasing-title {
    background-color: #ffcc00;
    color: #000;
    font-size: 22px;
    padding: 15px 25px;
    border-radius: 5px;
    display: inline-block;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
}

.promise-box {
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #ffcc00;
    background-color: #fffdf5;
    border-radius: 5px;
}

.trust-box {
    margin-top: 20px;
    padding: 15px;
    background-color: #f4f4f4;
    border-left: 5px solid #ffcc00;
}

/* ANGEBOTE SEKTION */
.category-title {
    background: #000;
    color: #ffcc00;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 22px;
    margin-bottom: 25px;
}

.offers-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.offer-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.offer-card:hover {
    transform: translateY(-3px);
}

.offer-card.alt-bg {
    background: #fdfdfd;
}

.offer-image {
    flex: 1;
    min-width: 150px;
    max-width: 200px;
}

.offer-image img {
    width: 100%;
    border-radius: 8px;
}

.offer-details {
    flex: 2;
    min-width: 250px;
    padding: 0 25px;
}

.bike-name {
    font-size: 20px;
    color: #000;
    display: block;
    margin-bottom: 8px;
}

.savings-badge {
    background: #e6f4ea;
    color: #1e7e34;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
}

.offer-pricing {
    flex: 1;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.price-uvp {
    color: #888;
    text-decoration: line-through;
    font-size: 14px;
}

.price-sale {
    color: #d9534f;
    font-size: 24px;
    font-weight: bold;
}

.btn-offer {
    background: #ffcc00;
    color: #000;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-offer:hover {
    background: #e6b800;
}

@media (max-width: 600px) {
    .offer-pricing {
        text-align: left;
        margin-top: 15px;
    }
}

/* SPEZIELLES E-BIKE STYLING */
.e-bike-header {
    background: #ffcc00 !important;
    color: #000 !important;
}

.e-bike-card {
    border: 2px solid #ffcc00 !important;
}

/* Platzhalter für den Abstand zwischen den Sektionen */
.offers-section {
    margin-bottom: 60px;
}

/* NEWS SEKTION */
.news-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.news-row.reverse {
    flex-direction: row-reverse;
}

.news-image {
    flex: 1;
    min-width: 300px;
}

.news-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.news-text {
    flex: 1;
    min-width: 300px;
}

.badge-neu {
    width: 80px;
    margin-bottom: 10px;
}

.test-badge {
    background: #ffcc00;
    color: #000;
    display: inline-block;
    padding: 5px 15px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 14px;
}

.news-title {
    font-size: 28px;
    margin: 0 0 15px 0;
    color: #000;
}

.news-slogan {
    font-weight: bold;
    color: #d9534f;
    margin-bottom: 15px;
}

.news-subtitle {
    font-size: 18px;
    color: #666;
    margin-top: 20px;
}

.news-more-link {
    display: inline-block;
    margin-top: 20px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 5px;
    transition: 0.3s;
}

.news-more-link:hover {
    color: #ffcc00;
}

/* Mobil-Fix für Reverse */
@media (max-width: 768px) {
    .news-row.reverse {
        flex-direction: row; /* Auf Handys Bild immer oben lassen */
    }
}

/* LEASING INFO SEKTION */
.anker-point {
    height: 0;
    margin: 0;
}

.highlight-info-box {
    background-color: #f9f9f9;
    border-left: 8px solid #ffcc00;
    padding: 25px;
    margin: 30px 0;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.box-title {
    color: #000;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

.box-subtitle {
    margin-top: 10px;
    color: #555;
    font-style: italic;
    font-size: 16px;
}

.leasing-intro {
    font-size: 16px;
    margin-bottom: 25px;
}

.partner-grid-list {
    list-style-type: square;
    padding-left: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    gap: 10px;
    margin: 0;
}

.partner-grid-list li {
    font-size: 16px;
    color: #333;
    padding: 5px 0;
}

/* Mobil-Anpassung für die Liste */
@media (max-width: 480px) {
    .partner-grid-list {
        grid-template-columns: 1fr; /* Auf kleinen Handys nur eine Spalte */
    }
}

/* INFO GRID SEKTION */
.flex-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.info-card {
    flex: 1;
    min-width: 300px;
    padding: 25px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.light-card { background: #f9f9f9; }
.dark-card { background: #000; color: #fff; text-align: center; }

/* Macht den Standard-Text in der schwarzen Box weiß */
.dark-card p {
    color: #ffffff !important;
    font-size: 16px;
}

/* Macht den kleinen Text unten (meta-text) weiß/hellgrau */
.dark-card .meta-text {
    color: #cccccc !important; /* Etwas dezenteres Hellgrau */
    font-size: 13px;
    margin-top: 15px;
}

/* Die gelbe Überschrift zur Sicherheit fixieren */
.card-title-yellow {
    color: #ffcc00 !important;
    margin-top: 0;
}

.gray-card { background: #f4f4f4; }

.border-accent { border-top: 5px solid #ffcc00; }

.card-title { margin-top: 0; color: #fff; font-size: 20px; }
.card-title-yellow { color: #ffcc00; margin-top: 0; font-size: 24px; }

.card-img { width: 100%; border-radius: 5px; margin: 15px 0; }

.small-text { font-size: 14px; line-height: 1.4; }
.meta-text { font-size: 13px; color: #aaa; margin-top: 20px; }
.footer-note { font-size: 12px; color: #777; text-align: center; margin-top: 10px; }

.service-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.service-title { color: #ffcc00; text-transform: uppercase; font-size: 14px; display: block; margin-bottom: 10px; }

.check-list { list-style: none; padding: 0; font-size: 14px; line-height: 1.8; margin-bottom: 15px; }

.btn-dark { background: #000; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold; }

/* PARTNER BUTTONS */
.partner-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.partner-btn {
    background: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
}

.partner-btn:hover { background: #eee; }

/* QUICK CONTACT */
.quick-contact {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}

.contact-label { font-weight: bold; font-size: 15px; margin-bottom: 10px; color: #333; }

.btn-yellow-full {
    background: #ffcc00;
    color: #000;
    text-align: center;
    padding: 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.btn-outline-full {
    background: #fff;
    color: #000;
    text-align: center;
    padding: 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    border: 1px solid #000;
}

/* MARKEN INFO SEKTION */
.brand-info-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin: 30px auto;
    padding: 25px;
    max-width: 1200px;      /* Gleiche Breite wie der Rest */
    box-sizing: border-box; /* WICHTIG: Padding wird nach innen gerechnet */
    width: 100%;            /* Sorgt für korrekte Darstellung auf Handys */
}

.brand-title {
    color: #000;
    border-left: 5px solid #ffcc00;
    padding-left: 15px;
    margin-bottom: 25px;
    font-size: 24px;
}

.brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.brand-col {
    flex: 1;
    min-width: 300px;
}

.brand-list-box {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-top: 15px;
}

.list-caption {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.simple-list {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.8;
}

.tech-highlight-box {
    margin-top: 20px;
    padding: 20px;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
}

.highlight-label {
    color: #ffcc00;
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}

.highlight-text {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* FOOTER STYLING */
.site-footer {
    background-color: #1a1a1a;
    color: #fff;
    padding: 60px 0 20px 0; /* Padding links/rechts auf 0 setzen */
    margin-top: 50px;
    width: 100%;
    overflow-x: hidden; /* Sicherheit gegen Überlauf */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto; /* Zentriert die Spalten ohne seitlichen Extra-Margin */
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 0 20px; /* Hier das Padding für den Abstand zum Rand auf kleinen Schirmen */
    box-sizing: border-box; /* Wichtig: Padding wird in die Breite eingerechnet */
}

.footer-col {
    flex: 1;
    min-width: 280px;
}

.footer-title {
    color: #ffcc00;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    text-transform: uppercase;
}

.footer-address {
    line-height: 1.6;
    color: #ffcc00;
    margin-bottom: 15px;
}

.map-link {
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

.footer-hours {
    font-size: 14px;
    color: #ccc;
    margin: 15px 0;
}

.footer-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.footer-tel {
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

.footer-mail {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.footer-sub {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 15px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.footer-grid a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-grid a:hover {
    color: #ffcc00;
}

.footer-service-list {
    list-style: none;
    padding: 0;
    font-size: 14px;
    line-height: 2.2;
}

.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 12px;
    color: #777;
}

.footer-bottom a {
    color: #777;
    text-decoration: none;
    margin: 0 10px;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ffcc00;
    color: #000;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/*=------------------------------------------------
 E Bike overview
 /-----------------------------------------------*/
.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.slider-headline-box {
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 8px solid #ffcc00; /* Der auffällige gelbe Balken */
}

.slider-headline-box h2 {
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 5px 0 0 0;
    color: #000;
    font-weight: 900; /* Extra fett */
}

.slider-headline-box .badge {
    background: #000;
    color: #ffcc00;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3px;
}

/* Optional: Für MTB die Farbe auf Grün ändern? */
.mtb-theme { border-left-color: #9DCD4A; }
.mtb-theme .badge { color: #9DCD4A; }


/* OPTIMIERT FÜR 4 KARTEN GLEICHZEITIG */
.ebike-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px; /* Abstand zwischen den Karten */
    padding: 20px 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Normalzustand der Karte */
.slider-card {
    background-color: #ffffff !important; /* Erzwingt Weiß von Beginn an */
    flex: 0 0 calc(25% - 15px);
    min-width: 220px;
    border: 1px solid #eee;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Normalzustand des Bildbereichs */
.slider-card img {
    background-color: #ffffff !important; /* Auch hinter dem Bild Weiß */
    width: 100%;
    height: 180px;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
    border-bottom: 3px solid #ffcc00;
}

/* Hover-Zustand (Bleibt Weiß, kriegt nur Effekte) */
.slider-card:hover {
    background-color: #ffffff !important; /* Verhindert Farbwechsel beim Drüberfahren */
    transform: translateY(-8px);
    border-color: #ffcc00;
    box-shadow: 0 15px 30px rgba(255, 204, 0, 0.2);
}
.slider-card img {
    aspect-ratio: 16 / 9; /* Reserviert den Platz im richtigen Format */
    background: #fff; /* Zeigt eine graue Fläche, solange das Bild lädt */
    content-visibility: auto; /* Optimiert das Rendering von Inhalten außerhalb des Sichtfelds */
}
.card-text {
    padding: 15px;
    text-align: center;
    background-color: #ffffff; /* Sicherstellen, dass auch der Textbereich weiß ist */
}

/* Anpassung für Tablets (3 Karten) */
@media (max-width: 1100px) {
    .slider-card {
        flex: 0 0 calc(33.33% - 15px);
    }
}

/* Anpassung für Handys (1,5 Karten für den "Wisch-Effekt") */
@media (max-width: 700px) {
    .slider-card {
        flex: 0 0 75%;
    }
}

.ebike-slider::-webkit-scrollbar {
    display: none; /* Versteckt Scrollbalken Chrome/Safari */
}

.card-text { padding: 15px; text-align: center; }
.card-text strong { display: block; color: #000; font-size: 16px; }
.card-text span { color: #777; font-size: 13px; }

.slider-card img {
    aspect-ratio: 16 / 9; /* Reserviert den Platz im richtigen Format */
    background: #f0f0f0; /* Zeigt eine graue Fläche, solange das Bild lädt */
    content-visibility: auto; /* Optimiert das Rendering von Inhalten außerhalb des Sichtfelds */
}

/* Pfeile */
.slider-arrow {
    background: #ffcc00;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: absolute;
}

.slider-arrow.left { left: -20px; }
.slider-arrow.right { right: -20px; }

.slider-arrow:hover { background: #000; color: #ffcc00; }

#mtbSlider img { border-bottom: 3px solid #9DCD4A; }

@media (max-width: 768px) {
    .slider-arrow { display: none; } /* Auf Handy einfach wischen */
}

.slider-card:hover {
    transform: translateY(-8px); /* Karte hebt sich ab */
    border-color: #ffcc00; /* Rand wird gelb */
    box-shadow: 0 15px 30px rgba(255, 204, 0, 0.2); /* Gelber Glüheffekt im Schatten */
}

.slider-card:hover img {
    filter: brightness(1.1); /* Bild wird leicht heller */
}
.back-to-top.slider-arrow {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none; /* Wird per JS aktiviert */
    align-items: center;
    justify-content: center;
    
    /* Pfeil nach oben drehen */
    transform: rotate(90deg); 
    
    /* Fix für den Hover-Effekt (damit er nicht schief hüpft) */
    transition: all 0.3s ease;
}

.back-to-top.slider-arrow:hover {
    transform: rotate(90deg) scale(1.1); /* Bleibt gedreht und wird größer */
    background: #000;
    color: #ffcc00;
}