/*-------------------------------------------------------------------------------*/
/*																				 */
/* CSS-File: 	category.css	                                                 */
/* Version:		001													   			 */
/*																				 */
/* Datum:		20/05/2026														 */
/*																				 */
/* Author:		B&B US Bikes													 */
/* Purpose:		cannondale e-bikes main categorien								 */
/*              für Übersicht in cannondale.htm und ebike.htm                    */
/* MOD:        															    	 */
/*             																	 */
/*-------------------------------------------------------------------------------*/

.model-finder-section {
    max-width: 95%; /* Erhöht für 5 Spalten */
    margin: 40px auto;
    padding: 0 20px;
    text-align: left;
}

.btn-finder-tech {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
    z-index:99999;

}

.btn-finder-tech:hover {
    background: #ffcc00;
    color: #000;
}

.finder-overlay {
    display: none;
    background: #f4f4f4;
    border: 1px solid #ddd;
    margin-top: 10px;
    padding: 40px;
}

.finder-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Auf 5 Spalten geändert */
    gap: 20px; /* Gap leicht verringert für Platz */
}

.finder-col h3 {
    font-size: 14px; /* Etwas kleiner für 5 Spalten */
    font-weight: 800;
    margin: 5px 0 15px 0;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.cat-id {
    font-family: monospace;
    font-size: 10px;
    color: #999;
}

.link-list a {
    display: block;
    text-decoration: none;
    color: #444;
    font-size: 13px; /* Schriftgröße leicht reduziert */
    padding: 6px 0;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s;
}

.link-list a:hover {
    color: #000;
    background: #fff;
    padding-left: 5px;
}

/* Mobile Anpassung */
@media (max-width: 1024px) {
    .finder-grid { grid-template-columns: repeat(3, 1fr); } /* 3 Spalten auf Tablets */
}

@media (max-width: 768px) {
    .finder-grid { grid-template-columns: 1fr; } /* 1 Spalte auf Handys */
    .finder-overlay { padding: 20px; }
}

/*------------------ INTRO ---------------*/
.intro-technical {
    max-width: 1100px;
    /*margin: 60px auto;*/
    padding: 0 20px;
    color: #1a1a1a;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.tech-header {
    border-bottom: 2px solid #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    margin-bottom: 35px;
}

.tech-header h1 {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.model-year {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: #888;
    font-weight: bold;
}

.tech-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 50px;
}

.tech-main-text {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    text-align: justify;
}

.tech-specs {
    border-left: 1px solid #1a1a1a;
    padding-left: 40px;
}

.spec-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

.spec-item .label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1.5px;
    margin-bottom: 3px;
}

.spec-item .value {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

/* Spezial-Markierung für die Garantie */
.spec-item:first-child .value {
    color: #ffcc00; /* Cannondale Gelb als technischer Akzent */
}

@media (max-width: 768px) {
    .tech-grid { grid-template-columns: 1fr; gap: 30px; }
    .tech-specs { border-left: none; padding-left: 0; border-top: 2px solid #1a1a1a; padding-top: 20px; }
    .tech-header { flex-direction: column; gap: 10px; }
}




/*---------------------- Ziel Seite Info unten ----------------*/
.intro-technical-plakativ-white {
    max-width: 1200px;
    margin: 10px auto;
	padding: 10px 40px 40px 40px;     
	background: #ffffff; /* Weißer Hintergrund */
    color: #000000;      /* Schwarze Schrift */
    font-family: 'Arial Black', Gadget, sans-serif;
    /*border: 4px solid #000000;*/
}

    color: #000000;      /* Schwarze Schrift */
    font-family: 'Arial Black', Gadget, sans-serif;
    /*border: 4px solid #000000;*/
}

.tech-header-large {
    border-bottom: 8px solid #ffcc00; /* Cannondale Gelb */
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.brand-badge {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #888;
    font-weight: bold;
}

.tech-header-large h1 {
    font-size: 50px;
    margin: 0;
    letter-spacing: -2px;
    color: #000;
}

.hero-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}

.big-statement {
    font-size: 42px;
    line-height: 0.9;
    color: #000;
    grid-column: 1 / -1;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.tech-description {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    font-weight: normal;
}

.spec-sidebar-plakativ {
    background: #f9f9f9; /* Sehr helles Grau für Abhebung */
    padding: 25px;
    border-left: 10px solid #ffcc00;
}

.big-spec {
    margin-bottom: 25px;
}

.big-spec .label {
    display: block;
    font-size: 10px;
    color: #999;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.big-spec .value {
    font-size: 22px;
    font-weight: 900;
    display: block;
    color: #000;
}

.big-spec .value.yellow-accent {
    color: #000;
    background-color: #ffcc00; /* Gelber Textmarker-Effekt */
    display: inline-block;
    padding: 0 5px;
}

.footer-data {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #bbb;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.bike-overview-accent {
    border-bottom-color: #7f8c8d !important; /* Technisches Aluminium-Silbergrau */
}

.bike-overview-sidebar {
    border-left-color: #7f8c8d !important;
}

/* Der Textmarker-Effekt für die analoge Gesamtübersicht */
.bike-overview-sidebar .yellow-accent {
    background-color: #7f8c8d !important;
    color: #ffffff !important;
}

/* Nutze deine bestehenden Styles und ergänze diese Klassen für Road */

.road-accent {
    border-bottom-color: #e31837 !important; /* Rennrad-Rot statt Gelb */
}

.road-sidebar {
    border-left-color: #e31837 !important;
}

/* Der Textmarker-Effekt für Road */
.road-sidebar .yellow-accent {
    background-color: #e31837 !important;
    color: #fff !important; /* Weißer Text auf Rot wirkt kräftiger */
}

/* Ergänze diese Klassen in deinem Stylesheet */

.gravel-accent {
    border-bottom-color: #6d8d24 !important; /* Klassisches Topstone-Grün */
}

.gravel-sidebar {
    border-left-color: #6d8d24 !important;
}

/* Der Textmarker-Effekt für Gravel */
.gravel-sidebar .yellow-accent {
    background-color: #6d8d24 !important;
    color: #fff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.trail-accent {
    border-bottom-color: #007aff !important; /* Dynamisches Trail-Blau */
}

.trail-sidebar {
    border-left-color: #007aff !important;
}

/* Der Textmarker-Effekt für Trail */
.trail-sidebar .yellow-accent {
    background-color: #007aff !important;
    color: #fff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.habit-ht-accent {
    border-bottom-color: #333333 !important; /* Technisches Anthrazit */
}

.habit-ht-sidebar {
    border-left-color: #333333 !important;
}

/* Der Textmarker-Effekt für Habit HT */
.habit-ht-sidebar .yellow-accent {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.jekyll-accent {
    border-bottom-color: #6a0dad !important; /* Sattes Enduro-Violett */
}

.jekyll-sidebar {
    border-left-color: #6a0dad !important;
}

/* Der Textmarker-Effekt für Jekyll */
.jekyll-sidebar .yellow-accent {
    background-color: #6a0dad !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.trail-hardtail-accent {
    border-bottom-color: #2e4d32 !important; /* Robustes Dunkelgrün */
}

.trail-hardtail-sidebar {
    border-left-color: #2e4d32 !important;
}

/* Der Textmarker-Effekt für Trail Hardtails */
.trail-hardtail-sidebar .yellow-accent {
    background-color: #2e4d32 !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.dave-accent {
    border-bottom-color: #00ffff !important; /* Strahlendes Cyan/Electric Blue */
}

.dave-sidebar {
    border-left-color: #00ffff !important;
}

/* Der Textmarker-Effekt für Dave */
.dave-sidebar .yellow-accent {
    background-color: #00ffff !important;
    color: #000000 !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.supersix-accent {
    border-bottom-color: #cc0000 !important; /* Klassisches Pro-Tour Rot */
}

.supersix-sidebar {
    border-left-color: #cc0000 !important;
}

/* Der Textmarker-Effekt für SuperSix */
.supersix-sidebar .yellow-accent {
    background-color: #cc0000 !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.ebike-overview-accent {
    border-bottom-color: #1a1a1a !important; /* Minimalistisches, mattes Schwarz */
}

.ebike-overview-sidebar {
    border-left-color: #1a1a1a !important;
}

/* Der Textmarker-Effekt für die Gesamtübersicht */
.ebike-overview-sidebar .yellow-accent {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.emtb-accent {
    border-bottom-color: #ffcc00 !important; /* Klassisches Cannondale Gelb */
}

.emtb-sidebar {
    border-left-color: #ffcc00 !important;
}

/* Der Textmarker-Effekt für E-Bikes */
.emtb-sidebar .yellow-accent {
    background-color: #ffcc00 !important;
    color: #000000 !important; /* Schwarze Schrift auf Gelb für maximalen Kontrast */
}

/* Ergänze diese Klassen in deinem Stylesheet */

.synapse-accent {
    border-bottom-color: #003366 !important; /* Elegantes Navy-Blau */
}

.synapse-sidebar {
    border-left-color: #003366 !important;
}

/* Der Textmarker-Effekt für Synapse */
.synapse-sidebar .yellow-accent {
    background-color: #003366 !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.caad-accent {
    border-bottom-color: #555555 !important; /* Industrial Grey */
}

.caad-sidebar {
    border-left-color: #555555 !important;
}

/* Der Textmarker-Effekt für CAAD */
.caad-sidebar .yellow-accent {
    background-color: #555555 !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.ecity-accent {
    border-bottom-color: #b5a27f !important; /* Elegantes Champagner-Gold */
}

.ecity-sidebar {
    border-left-color: #b5a27f !important;
}

/* Der Textmarker-Effekt für City E-Bikes */
.ecity-sidebar .yellow-accent {
    background-color: #b5a27f !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.flyingv-accent {
    border-bottom-color: #000000 !important; /* Minimalistisches Schwarz als Kontrast */
}

.flyingv-sidebar {
    border-left-color: #000000 !important;
}

/* Der Textmarker-Effekt für das Flying-V */
.flyingv-sidebar .yellow-accent {
    background-color: #000000 !important;
    color: #ffffff !important; /* Weißer Text auf schwarzem Grund */
}

/* Ergänze diese Klassen in deinem Stylesheet */

.mavaro-accent {
    border-bottom-color: #8c765c !important; /* Edles, mattes Trekking-Kupfer/Bronze */
}

.mavaro-sidebar {
    border-left-color: #8c765c !important;
}

/* Der Textmarker-Effekt für das Mavaro Neo */
.mavaro-sidebar .yellow-accent {
    background-color: #8c765c !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.esynapse-accent {
    border-bottom-color: #3d5afe !important; /* Dynamisches, elektrisches Indigo-Blau */
}

.esynapse-sidebar {
    border-left-color: #3d5afe !important;
}

/* Der Textmarker-Effekt für das Synapse Neo */
.esynapse-sidebar .yellow-accent {
    background-color: #3d5afe !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.ecargo-accent {
    border-bottom-color: #ff6600 !important; /* Kräftiges Industrie-/Utility-Orange */
}

.ecargo-sidebar {
    border-left-color: #ff6600 !important;
}

/* Der Textmarker-Effekt für E-Cargo */
.ecargo-sidebar .yellow-accent {
    background-color: #ff6600 !important;
    color: #ffffff !important;
}

/* Ergänze diese Klassen in deinem Stylesheet */

.gt-accent {
    border-bottom-color: #ddff00 !important; /* GT Bicycles typisches Neon-Gelb */
}

.gt-sidebar {
    border-left-color: #ddff00 !important;
}

/* Der Textmarker-Effekt für den GT-Hinweis */
.gt-sidebar .yellow-accent {
    background-color: #ddff00 !important;
    color: #000000 !important; /* Schwarzer Text auf Neon für maximale Lesbarkeit */
}

@media (max-width: 768px) {
    .tech-header-large h1 { font-size: 32px; }
    .hero-main-grid { grid-template-columns: 1fr; }
    .big-statement { font-size: 30px; }
}

/* --- KATEGORIE-Banner --- */

:root {
    --accent-color: #ffcc00; /* Standard: Cannondale Gelb */
}

/* Themes für andere Kategorien (einfach Klasse am Banner tauschen) */
.road-theme { --accent-color: #ff3300; }   /* z.B. Rot für Rennrad */
.gravel-theme { --accent-color: #228b22; } /* z.B. Grün für Gravel */


.category-banner {
    max-width: 1550px;
    margin: 40px auto 20px;
    padding: 0 20px;
}

.banner-content {
    position: relative;
}

.banner-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #999;
    display: block;
    margin-bottom: 5px;
}

.category-banner h1 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 28px;
    font-weight: 300; /* Dünne Schrift für Unauffälligkeit */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: #1a1a1a;
}

.banner-line {
    width: 60px;
    height: 3px;
    background-color: var(--accent-color); /* Nutzt die Variable */
    margin-top: 10px;
    transition: width 0.3s ease;
}

/* Dezenter Hover-Effekt */
.category-banner:hover .banner-line {
    width: 100px;
}

/*----------------- CAT WRAPPER --------*/
/* --- KATEGORIE-BEREICH (Bike-Cat) --- */
.cat-wrapper {
    width: 100%;
    padding: 60px 0;
    overflow: visible !important; /* Erlaubt das Rausragen beim Zoomen */
}

.cat-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 95%;
    margin: 0 auto;
}

.bike-cat {
    flex: 1;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.img-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* Button bleibt innerhalb des Bildes */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.bike-cat img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease;
}

/* Der "Jetzt entdecken" Button */
.cat-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%); /* Startet unterhalb der Mitte */
    background-color: #ffcc00; /* Cannondale Gelb */
    color: #000;
    padding: 10px 18px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
    z-index: 2;
}

/* HOVER EFFEKTE (PC) */
.bike-cat:hover {
    transform: scale(1.10); /* Zoom auf Betrachter */
    z-index: 100;
}

.bike-cat:hover .cat-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); /* Rutscht exakt in die Mitte */
}

.bike-cat:hover img {
    filter: brightness(0.7); /* Bild abdunkeln für Fokus auf Button */
}

.bike-cat p {
    margin-top: 15px;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

/* --- MOBILE ANPASSUNG --- */
@media (max-width: 768px) {
    .cat-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 15px 20px 15px;
    }
    
    .bike-cat {
        flex: 0 0 300px; /* Feste Breite für wischbare Kacheln original= 150px */
    }

    .cat-btn { 
        opacity: 1; 
        visibility: visible; 
        top: auto; 
        bottom: 10px; 
        transform: translateX(-50%); 
        font-size: 11px;
        padding: 6px 12px;
    }
}

/*------------------- cannondale --------------------------------*/
.brand-story {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    line-height: 1.6;
    color: #444;
}

.brand-story h2 {
    font-size: 28px;
    text-transform: uppercase;
    border-left: 5px solid #ffcc00; /* Cannondale Gelb */
    padding-left: 15px;
    margin-bottom: 25px;
}

.highlight-box {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
    margin: 30px 0;
    border-right: 2px solid #eee;
}

.highlight-box h3 {
    margin-top: 0;
    color: #fff;
    font-size: 20px;
}

.brand-story strong {
    color: #000;
}