/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    /* Hier drin landet nur CSS, das AUSSCHLIESSLICH auf dem Handy gelten soll */

} /* Diese Klammer schließt den mobilen Bereich jetzt mathematisch korrekt ab! */


/* ==========================================================================
   B2B PLATFORM PREMIUM DESIGN SHEET - FLATSOME CHILD (GLOBAL FÜR ALLE GERÄTE)
   ========================================================================== */

:root {
    --mein-brand-blau: #0056b3;
    --mein-brand-gold: #d4af37;
    --mein-hintergrund-grau: #f8f9fa;
/* ==========================================================================
   TEIL 1: PORTAL-BRANDING (HEADER MAIN = WEISS & FOOTER)
   ========================================================================== */

/* Haupt-Header (Header Main) auf reines Weiß setzen für das Logo */
.header-main, #header .header-main {
    background-color: #ffffff !important;
}

/* Texte, Menülinks und Icons im weißen Haupt-Header auf dunkles Petrol setzen */
.header-main p, .header-main a, .header-main .header-nav > li > a, .header-main i {
    color: #025f71 !important;
}

/* Hover-Effekt im Haupt-Header: Leichtes Aufhellen bei Mauszeiger */
.header-main .header-nav > li > a:hover {
    color: #014350 !important;
    opacity: 0.8;
}

/* Optionale Absicherung für die obere Leiste (Top Bar) im Marken-Petrol */
.header-top, #header .header-top {
    background-color: #025f71 !important;
}
.header-top a, .header-top p, .header-top span {
    color: #ffffff !important;
}

/* Die allerletzte Fußzeile (Absolute Footer / Copyright-Bereich) im Marken-Petrol */
.absolute-footer, .footer-2 {
    background-color: #025f71 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Copyright-Schriftzug und Links auf reines Weiß setzen (Damit man alles sieht!) */
.absolute-footer, .absolute-footer p, .copyright-footer, .absolute-footer a {
    color: #ffffff !important;
}

.absolute-footer a:hover {
    color: #f1f2f6 !important;
    text-decoration: underline !important;
}

/* WARENKORB-RESTE IM HEADER FÜR REINEN B2B-BETRIEB RESTLOS AUSBLENDEN */
.header-cart, .cart-item, .header-button .icon-shopping-cart, .cart-link { 
    display: none !important; 
}
/* ==========================================================================
   TEIL 2: B2B FAHRZEUGDATEN, SICHERHEITS-SPERREN & PROFI-ÜBERSCHRIFTEN
   ========================================================================== */

/* --- BRANDNEU: DIE PREMIUM-ÜBERSCHRIFTEN (STARTSEITEN-EFFEKT AUF SEITE 78) --- */
/* Die Haupt-Überschrift (H1) im modernen B2B-Tech-Look */
.page-id-78 h1.b2b-main-title {
    font-family: 'Arial', sans-serif !important;
    color: #2c3e50 !important; /* Kühles, edles Schiefergrau für den Haupttext */
    font-weight: 800 !important;
    font-size: 2.2em !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    margin-top: 30px !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid #025f71 !important; /* Dicker, edler Balken in deinem Marken-Petrol */
    display: inline-block !important; /* Der Balken geht nur so lang wie der Text */
}

/* Macht das Wort "Asset- & Verwertungsmanagement" komplett Petrol */
.page-id-78 h1.b2b-main-title span.brand-color {
    color: #025f71 !important; /* Dein exklusives B2B-Petrol */
}

/* Die normalen Zwischenüberschriften (H2) auf der Seite */
.page-id-78 h2 {
    color: #025f71 !important;
    font-weight: 700 !important;
    font-size: 1.5em !important;
    letter-spacing: -0.5px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
}

/* Der wichtige rechtliche Hinweis bekommt das markante B2B-Signal-Rot */
.page-id-78 .b2b-warn-title {
    color: #c0392b !important; /* Ernstes Verwertungs-Rot */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.2em !important;
    letter-spacing: 0.5px !important;
    border-left: 4px solid #c0392b !important; /* Eleganter linker Begrenzungsbalken */
    padding-left: 12px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
}

/* --- FAHRZEUGDATEN & BIET-SYSTEM MATRIX --- */
.b2b-main-price { font-weight: 800; color: #2c3e50; font-size: 1.2em; }
.b2b-price-badge { font-size: 0.55em; color: #888; font-weight: 500; vertical-align: middle; margin-left: 6px; background: #f5f5f5; padding: 3px 8px; border-radius: 3px; }

/* Biet-Box Akkordeon Button (Das Tor zu Formular 45) */
.b2b-premium-trigger { 
    background: linear-gradient(135deg, #025f71 0%, #014552 100%) !important; color: #ffffff !important; padding: 16px 24px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 1.15em !important; list-style: none !important; outline: none !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; box-shadow: 0 4px 15px rgba(2,95,113,0.3) !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; cursor: pointer; 
}
.b2b-premium-trigger::-webkit-details-marker { display: none !important; }
.b2b-premium-trigger:hover { box-shadow: 0 8px 25px rgba(2,95,113,0.45) !important; transform: translateY(-2px); filter: brightness(1.1); }
details[open] .b2b-premium-trigger { background: #2c3e50 !important; box-shadow: none !important; border-radius: 8px 8px 0 0 !important; }
.b2b-accordion-content { padding: 20px; background: #fafafa; cursor: default; }
.b2b-form-notice { font-size: 0.85em; color: #666; margin-top: 0; margin-bottom: 15px; line-height: 1.4; }

/* Modernes Daten-Grid für Fahrzeugdaten */
.b2b-modern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 15px 0; }
.b2b-grid-card { background: #fdfdfd; border: 1px solid #eef2f5; border-radius: 8px; padding: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: all 0.2s ease; display: flex; flex-direction: column; justify-content: center; }
.b2b-grid-card:hover { border-color: #025f71; box-shadow: 0 4px 12px rgba(2,95,113,0.08); transform: translateY(-1px); }
.b2b-grid-card .card-label { font-size: 0.85em; text-transform: uppercase; color: #7f8c8d; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.b2b-grid-card .card-value { font-size: 1.2em; color: #2c3e50; font-weight: 700; }
.b2b-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.9em; font-weight: 700; text-transform: uppercase; }
.b2b-badge-green { background: #eef9f0; color: #2ecc71; border: 1px solid #c2eed0; }
.b2b-badge-blue { background: #ebf5fb; color: #2980b9; border: 1px solid #d4e6f1; }

/* FIN Abschirmung & Sperrseiten */
.b2b-fin-area { margin-top: 20px; }
.b2b-fin-box { padding: 16px; border-radius: 6px; font-weight: 700; font-size: 1em; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.b2b-fin-success { background: #eef9f0; border-left: 4px solid #2ecc71; color: #27ae60; }
.b2b-fin-locked { background: #fdf2f2; border-left: 4px solid #e74c3c; color: #c0392b; }
.mono-text { font-family: monospace; font-size: 1.1em; margin-left: 5px; }

.b2b-sperrseite-wrapper { text-align: center; font-family: sans-serif; padding: 50px; color: #2c3e50; background: #fafafa; border-radius: 8px; max-width: 600px; margin: 60px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.b2b-sperrseite-wrapper .lock-icon { font-size: 4em; }
.b2b-sperrseite-wrapper h2 { font-weight: 700; margin-top: 20px; letter-spacing: -0.5px; }
.b2b-sperrseite-wrapper p { max-width: 500px; margin: 20px auto; line-height: 1.6; color: #7f8c8d; font-size: 1.05em; }
.b2b-sperrseite-wrapper hr { border: 0; border-top: 1px solid #eee; margin: 25px 0; }
.btn-kontakt { color: #025f71; font-weight: bold; text-decoration: none; background: #e6f2f5; padding: 10px 20px; border-radius: 4px; display: inline-block; }

.b2b-tab-lock-notice { padding: 30px; text-align: center; background: #fdf2f2; border: 1px solid #f5c6cb; border-radius: 8px; max-width: 600px; margin: 30px auto; box-shadow: 0 4px 12px rgba(231,76,60,0.08); }
.lock-icon-large { font-size: 2.5em; margin-bottom: 10px; }
.b2b-tab-lock-notice h3 { color: #721c24; margin-top: 0; font-weight: 700; }
.b2b-tab-lock-notice p { color: #721c24; font-size: 0.95em; line-height: 1.5; margin-bottom: 0; }

/* Schadens-Mängelkarten & Gutachten-Buttons */
.b2b-secure-tab-content { max-width: 700px; margin: 0 auto; padding: 10px 0; }
.b2b-mangel-card { background: #fff; border: 1px solid #eef2f5; padding: 20px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.01); }
.mangel-header { margin: 0 0 8px 0; font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; }
.mangel-optisch .mangel-header { color: #e67e22; }
.mangel-technisch .mangel-header { color: #c0392b; }
.mangel-text { margin: 0; color: #34495e; font-size: 1.05em; line-height: 1.5; }

.b2b-gutachten-buttons-wrapper { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.b2b-btn { display: inline-flex; align-items: center; gap: 8px; color: #fff; padding: 12px 24px; border-radius: 6px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: all 0.2s; }
.b2b-btn-dark { background: #2c3e50; }
.b2b-btn-dark:hover { background: #1a252f; }
.b2b-btn-petrol { background: #025f71; }
.b2b-btn-petrol:hover { background: #014552; }

.b2b-sensible-photo-box { margin-top: 25px; background: #fbfbfc; border: 1px dashed #ced6e0; padding: 20px; border-radius: 8px; text-align: center; }
.b2b-sensible-photo-box p { margin: 0 0 12px 0; color: #2c3e50; font-weight: 700; font-size: 0.95em; }
.b2b-photo-link { display: inline-block; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.b2b-photo-link img { max-width: 100%; max-height: 350px; display: block; transition: transform 0.3s; }
.b2b-photo-link img:hover { transform: scale(1.03); }
	/* ==========================================================================
   TEIL 3: DIE HÄNDLER-AKKREDITIERUNG (FORMINATOR DESIGN)
   ========================================================================= */

.forminator-custom-form {
    font-family: 'Arial', sans-serif !important;
    max-width: 650px !important;
    margin: 30px auto !important;
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #eef2f3 !important;
}

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form .forminator-select {
    font-size: 15px !important;
    color: #333333 !important;
    background-color: #fcfcfc !important;
    border: 1px solid #cccccc !important;
    border-radius: 3px !important;
    padding: 14px 15px !important;
    height: auto !important;
    transition: all 0.2s ease-in-out !important;
}

.forminator-custom-form .forminator-input:focus {
    border-color: #025f71 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(2, 95, 113, 0.1) !important;
}

.forminator-custom-form .forminator-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #444444 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 8px !important;
    margin-top: 15px !important;
}

.forminator-custom-form .forminator-file-upload {
    border: 2px dashed #025f71 !important;
    background: #fdfefe !important;
    padding: 25px !important;
    text-align: center !important;
    border-radius: 4px !important;
    margin-top: 10px !important;
}

.forminator-custom-form .forminator-button-submit {
    background-color: #025f71 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 30px !important;
    border: none !important;
    border-radius: 3px !important;
    width: 100% !important;
    cursor: pointer !important;
    margin-top: 25px !important;
    transition: background-color 0.2s ease !important;
}

.forminator-custom-form .forminator-button-submit:hover {
    background-color: #014350 !important;
}

.forminator-custom-form .forminator-response-message.forminator-success {
    background-color: #fffaf0 !important;
    border-left: 5px solid #d35400 !important;
    color: #222222 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 25px !important;
    border-radius: 3px !important;
    margin-top: 25px !important;
}
/* ==========================================================================
   TEIL 4: CUSTOM BUBBLE TITLE, QUICK-VIEW & LUPEN-ZOOM (MARKEN-LOOK)
   ========================================================================== */

/* 4.1 DIE HAUPT-BLASEN (BUBBLES & BADGES) */
.badge-inner.on-sale,
.badge-inner,
.badge-circle .badge-inner,
.out-of-stock-label,
.featured-label {
    background-color: #025f71 !important; /* Dein edles Marken-Petrol */
    color: #ffffff !important;           /* Strahlend weiße Schrift */
    font-weight: 700 !important;          /* Schön fett und lesbar */
    text-transform: uppercase !important; /* Reine Großbuchstaben */
    letter-spacing: 0.5px !important;     
    border-radius: 3px !important;        /* Matte B2B-Ecken */
    box-shadow: 0 2px 6px rgba(2, 95, 113, 0.15) !important; 
    border: none !important;
}

/* Hover-Effekt für die Bubbles */
.product-box:hover .badge-inner {
    background-color: #014350 !important; /* Tieferes Dunkel-Petrol */
    transform: scale(1.03) !important;     
    transition: all 0.2s ease-in-out !important;
}

/* 4.2 DIE LUPE & DER BILD-ZOOM (PRODUCT IMAGE TOOLS) */
/* Die kleine Lupe und das Zoom-Icon farblich auf Petrol anpassen */
.quick-view, 
.product-zoom-button i,
.image-tools .icon-search,
.product-image-container .quick-view i {
    color: #025f71 !important;
    background-color: #ffffff !important; /* Weißer Kreis für maximalen Kontrast */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* Hover-Effekt: Wenn man über die Lupe/Zoom fährt */
.quick-view:hover, 
.product-zoom-button:hover i,
.image-tools .icon-search:hover {
    background-color: #025f71 !important; /* Dreht sich um: Hintergrund wird Petrol */
    color: #ffffff !important;             /* Icon wird weiß */
}

/* 4.3 DER HINWEIS UND BUTTON FÜR DIE SCHNELLANSICHT (QUICK VIEW) */
/* Der Quick-View-Button unter oder auf dem Produktbild */
.quick-view-button,
.flatsome-quick-view-link,
html .button.quick-view {
    background-color: #025f71 !important; /* Marken-Petrol */
    color: #ffffff !important;             /* Weiße Schrift */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

/* Hover-Effekt für den Schnellansicht-Button */
.quick-view-button:hover,
.flatsome-quick-view-link:hover,
html .button.quick-view:hover {
    background-color: #014350 !important; /* Dunkleres Profil-Petrol */
    box-shadow: 0 4px 12px rgba(2, 95, 113, 0.3) !important;
}

/* Das Quick-View Pop-up-Fenster (Falls geöffnet, die Lade-Animation anpassen) */
.mfp-content .loading-spin {
    border-left-color: #025f71 !important;
}
/* ==========================================================================
   TEIL 5: FARBLICHE ANPASSUNG & PREMIUM-ÜBERSCHRIFTEN (PROFI-LOOK)
   ========================================================================== */

/* Die absolute Haupt-Überschrift (H1) im modernen B2B-Tech-Look */
.page-id-akkreditierung h1.b2b-main-title {
    font-family: 'Arial', sans-serif !important;
    color: #2c3e50 !important; /* Kühles, edles Schiefergrau für den Haupttext */
    font-weight: 800 !important;
    font-size: 2.2em !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    margin-top: 30px !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid #025f71 !important; /* Dicker, edler Balken in deinem Marken-Petrol */
    display: inline-block !important; /* Der Balken geht nur so lang wie der Text */
}

/* Die magische farbliche Trennung: Macht das Wort "Asset- & Verwertungsmanagement" komplett Petrol */
.page-id-akkreditierung h1.b2b-main-title span.brand-color {
    color: #025f71 !important; /* Dein exklusives B2B-Petrol */
}

/* Die normalen Zwischenüberschriften (H2) auf der Seite (z.B. "Wie kann ich mich registrieren?") */
.page-id-akkreditierung h2 {
    color: #025f71 !important;
    font-weight: 700 !important;
    font-size: 1.5em !important;
    letter-spacing: -0.5px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
}

/* Der wichtige rechtliche Hinweis bekommt das markante B2B-Signal-Rot */
.page-id-akkreditierung .b2b-warn-title {
    color: #c0392b !important; /* Ernstes Verwertungs-Rot */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.2em !important;
    letter-spacing: 0.5px !important;
    border-left: 4px solid #c0392b !important; /* Eleganter linker Begrenzungsbalken */
    padding-left: 12px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
}