/* ============================================================================
   Renault Markenauftritt – /renault
   Gilt ausschliesslich innerhalb von .renault-page. Struktur/Layout kommt aus
   css/brand-shared.css (identisch fuer /renault und /dacia) – hier werden
   ausschliesslich Farben und Fonts auf dieselben Klassennamen gesetzt.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Fonts – nouvel'R (offizielle Renault-Dateien liegen in /renault/*.ttf)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "nouvelR";
    src: url("../renault/NouvelRLight.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "nouvelR";
    src: url("../renault/NouvelRBook.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "nouvelR";
    src: url("../renault/NouvelRRegular.ttf") format("truetype");
    font-weight: 450;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "nouvelR";
    src: url("../renault/NouvelRSemibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "nouvelR";
    src: url("../renault/NouvelRBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "nouvelR";
    src: url("../renault/NouvelRExtrabold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens (Renault Farbpalette)
   -------------------------------------------------------------------------- */
.renault-page {
    --rn-white: #FFFFFF;
    --rn-black: #000000;
    --rn-yellow: #EFDF00;
    --rn-yellow-hover: #F8EB4C;
    --rn-grey-100: #D9D9D6;
    --rn-grey-200: #BBBCBC;
    --rn-grey-300: #888B8D;
    --rn-text-secondary: #3E3F40;
    --rn-text-tertiary: #656666;
    --rn-ev-base: #1885D1;
    --rn-ev-mid: #1FA2C8;
    --rn-ev-light: #2597BE;
    --rn-alert: #E91630;
    --rn-warning: #F7A84B;
    --rn-success: #40D37C;
    --rn-info: #1E8FCE;
    --rn-disabled-bg: #F2F2F2;
    --rn-font: "nouvelR", "Segoe UI", Arial, sans-serif;

    background-color: var(--rn-white);
    font-family: var(--rn-font);
}

/* Icon-Fonts (FontAwesome/Flaticon) explizit ausgenommen – sonst ueberschreibt
   die Wildcard-Regel deren Icon-Font und die Glyphen (u.a. Dropdown-Pfeile im
   Header, Fahrzeug-Card-Icons) rendern nicht mehr. */
.renault-page *:not([class*="fa-"], [class^="flaticon"], [class*=" flaticon"]) {
    font-family: var(--rn-font);
}

.renault-page h1,
.renault-page h2,
.renault-page h3,
.renault-page h4,
.renault-page h5,
.renault-page h6 {
    font-family: var(--rn-font);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. Header – Farben (Struktur siehe css/brand-shared.css .brand-header)
   -------------------------------------------------------------------------- */
.renault-page .brand-header {
    background-color: var(--rn-white);
    border-bottom: 1px solid var(--rn-grey-100);
}

/* Emblem-Mindestgrösse gemäss Digital Standards (min. H40/W50px). Das
   19:20-Icon braucht ~53px Höhe, um beide Minima gleichzeitig zu erreichen. */
.renault-page .brand-header .logo-inner .logo img {
    height: 53px;
}

/* Modellnamen in Navigation/Dropdowns: fett + Grossbuchstaben.
   !important noetig, da style.css ".header-style-v1 ... .dropdown li a
   { text-transform: capitalize }" durch die vielen Klassen im Selektor
   (0,8,2) hoehere Spezifitaet hat als diese Regel hier (0,4,2). */
.renault-page .brand-header .navigation .dropdown li a {
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.renault-page .brand-header .logo-inner .brand-location {
    color: var(--rn-black);
}

/* !important noetig, da style.css ".main-menu .navigation>li>a{color:#fff}"
   fuer den (eigentlich transparenten/dunklen) Autofrank-Header vorsieht. */
.renault-page .brand-header .navigation > li > a,
.renault-page .brand-header .navigation > li > span {
    color: var(--rn-black) !important;
}

.renault-page .brand-header .navigation > li > a:hover,
.renault-page .brand-header .navigation > li:hover > span,
.renault-page .brand-header .navigation > li.current > a {
    color: var(--rn-ev-base) !important;
}

.renault-page .brand-header .navigation > li > span i {
    color: var(--rn-black) !important;
}

.renault-page .brand-header .navigation .current-dropdown .dropdown {
    border: 1px solid var(--rn-grey-100);
}

.renault-page .brand-header .navigation .current-dropdown .dropdown li a {
    color: var(--rn-black) !important;
}

.renault-page .brand-header .navigation .current-dropdown .dropdown li a:hover {
    color: var(--rn-ev-base) !important;
}

.renault-page .brand-header .dealer-link {
    border-left: 1px solid var(--rn-grey-100);
}

.renault-page .brand-header .dealer-text strong {
    color: var(--rn-black);
}

.renault-page .brand-header .dealer-text small {
    color: var(--rn-text-tertiary);
}

.renault-page .brand-header .mobile-navigation svg rect {
    fill: var(--rn-black) !important;
}

/* Header-CTA: schwarzer Button, Hover Gelb (Header ist weiss – Standard-
   Button aus style.css ist weiss auf weiss und unsichtbar). */
.renault-page .brand-header .btn .header-btn-two {
    background-color: var(--rn-black) !important;
    color: var(--rn-white) !important;
}

.renault-page .brand-header .btn .header-btn-two:hover {
    background-color: var(--rn-yellow) !important;
    color: var(--rn-black) !important;
}

/* Mobile-Menu-Drawer (#nav-mobile, von mmenu.js befuellt) */
.renault-page .mm-menu a,
.renault-page .mm-menu a:active,
.renault-page .mm-menu a:link,
.renault-page .mm-menu a:visited {
    color: var(--rn-text-secondary);
}

.renault-page .mm-menu a:hover {
    color: var(--rn-black);
}

.renault-page .mm-menu li.current > a {
    background-color: var(--rn-yellow) !important;
    color: var(--rn-black) !important;
}

.renault-page .mm-panels > .mm-panel .mm-navbar {
    border-bottom-color: var(--rn-grey-100);
}

.renault-page .mm-panels > .mm-panel .mm-navbar .mm-title,
.renault-page .mm-navbar__title {
    color: var(--rn-black) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons (tf-btn / btn / theme-btn) – Renault-Farben statt Standardblau
   -------------------------------------------------------------------------- */

/* Button-Höhe gemäss Digital Standards: 46px statt der 54px aus style.css
   (13px Padding oben/unten + 26px Line-Height + Border). */
.renault-page .tf-btn {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}

.renault-page .tf-btn.primary,
.renault-page .tf-btn.primary-hover {
    background-color: var(--rn-black);
    border-color: var(--rn-black);
    color: var(--rn-white);
}

.renault-page .tf-btn.primary:hover,
.renault-page .tf-btn.primary:focus,
.renault-page .tf-btn.primary:active {
    background-color: var(--rn-yellow) !important;
    border-color: var(--rn-yellow) !important;
    color: var(--rn-black) !important;
}

.renault-page .tf-btn.secondary {
    background-color: var(--rn-white);
    border-color: var(--rn-black);
    color: var(--rn-black);
}

.renault-page .tf-btn.secondary:hover,
.renault-page .tf-btn.secondary:focus,
.renault-page .tf-btn.secondary:active {
    background-color: var(--rn-black) !important;
    border-color: var(--rn-black) !important;
    color: var(--rn-white) !important;
}

.renault-page .brand-boxcar-banner-section .content-column .inner-column .btn {
    background-color: var(--rn-yellow);
    color: var(--rn-black);
}

.renault-page .brand-boxcar-banner-section .content-column .inner-column .btn svg path {
    fill: var(--rn-black);
}

.renault-page .brand-boxcar-banner-section .content-column .inner-column .btn:hover {
    background-color: var(--rn-yellow-hover) !important;
    color: var(--rn-black) !important;
}

.renault-page .contact-us-section .calculater-sec .content-column form .theme-btn {
    background-color: var(--rn-black);
}

.renault-page .contact-us-section .calculater-sec .content-column form .theme-btn:hover,
.renault-page .contact-us-section .calculater-sec .content-column form .theme-btn:focus,
.renault-page .contact-us-section .calculater-sec .content-column form .theme-btn:active {
    background-color: var(--rn-yellow);
    color: var(--rn-black);
}

/* --------------------------------------------------------------------------
   5. Hero (boxcar-banner-section-two) – schwarzes statt navy Overlay
   -------------------------------------------------------------------------- */
.renault-page .boxcar-banner-section-two .banner-slider .banner-slide:before {
    background: var(--rn-black);
}

.renault-page .boxcar-banner-section-two .banner-slider .banner-slide .right-box .content-box .sub-title {
    color: var(--rn-yellow);
}

/* --------------------------------------------------------------------------
   6. brand-boxcar-banner-section – schwarzer statt navy Hintergrund
   -------------------------------------------------------------------------- */
.renault-page .brand-boxcar-banner-section {
    background-color: var(--rn-black);
}

.renault-page .brand-occasionen-teaser.brand-boxcar-banner-section {
    background-color: var(--rn-black);
}

.renault-page .brand-occasionen-teaser .content-column .inner-column .title {
    color: var(--rn-white) !important;
}

.renault-page .brand-occasionen-teaser .content-column .inner-column .btn {
    background-color: var(--rn-yellow);
    color: var(--rn-black);
}

.renault-page .brand-occasionen-teaser .content-column .inner-column .btn svg path {
    fill: var(--rn-black);
}

.renault-page .brand-occasionen-teaser .content-column .inner-column .btn:hover {
    background-color: var(--rn-yellow-hover) !important;
    color: var(--rn-black) !important;
}

.renault-page .brand-occasionen-teaser .content-column .inner-column .btn:hover svg path {
    fill: var(--rn-black) !important;
}

/* --------------------------------------------------------------------------
   7. Modellübersicht & Fahrzeug-Cards
   -------------------------------------------------------------------------- */
.renault-page .brand-model-tile .inner-box,
.renault-page .brand-vehicles .car-block-four .inner-box {
    background-color: var(--rn-white);
    border: 1px solid var(--rn-grey-100);
    box-shadow: none;
}

.renault-page .brand-model-tile .image-box {
    background-color: var(--rn-grey-100);
}

.renault-page .brand-model-tile .title,
.renault-page .brand-model-tile .title a,
.renault-page .brand-vehicles .car-block-four .title,
.renault-page .brand-vehicles .car-block-four .title a {
    color: var(--rn-black);
}

.renault-page .brand-model-tile .brand-model-price {
    color: var(--rn-black);
}

.renault-page .brand-model-tile .brand-model-price small {
    color: var(--rn-text-tertiary);
}

.renault-page .brand-vehicles .car-block-four .vehicle-tag {
    background-color: var(--rn-black);
    color: var(--rn-white);
}

.renault-page .brand-vehicles .car-block-four .vehicle-tag--new {
    background-color: var(--rn-yellow);
    color: var(--rn-black);
}

.renault-page .brand-vehicles .car-block-four .btn-box small {
    color: var(--rn-black);
}

.renault-page .brand-vehicles .car-block-four .details:hover {
    color: var(--rn-ev-base);
}

.renault-page .brand-vehicles-state,
.renault-page .occ-empty-hint {
    color: var(--rn-text-tertiary);
}

.renault-page .brand-group-heading {
    color: var(--rn-text-secondary);
}

/* --------------------------------------------------------------------------
   8. Services (why-choose-us-section) – Gelb-Akzent
   -------------------------------------------------------------------------- */
.renault-page .why-choose-us-section .choose-us-block .inner-box:hover {
    border-color: var(--rn-yellow);
}

/* --------------------------------------------------------------------------
   9. Footer – Farben unverändert (footer-style-two: weisser Grund, dunkler
      Text), nur Link-Hover in Renault-Blau statt Standardblau.
   -------------------------------------------------------------------------- */
.renault-page .renault-footer .user-links a:hover {
    color: var(--rn-ev-base);
}

/* --------------------------------------------------------------------------
   10. Occasionen-Filterseite – nutzt .cheak-box/.categories-box/.drop-menu/
       .pagination-sec aus /fahrzeuge, nur Akzentfarbe angepasst.
   -------------------------------------------------------------------------- */
.renault-page .categories-box .contain input:checked ~ .checkmark {
    background-color: var(--rn-black);
    border-color: var(--rn-black);
}

/* --------------------------------------------------------------------------
   11. Fahrzeug-Detailseite
   -------------------------------------------------------------------------- */
.renault-page .brand-fahrzeug-back {
    color: var(--rn-text-secondary);
}

.renault-page .brand-fahrzeug-back:hover {
    color: var(--rn-ev-base);
}

.renault-page .brand-fahrzeug-gallery-item img {
    background-color: var(--rn-grey-100);
}

.renault-page .brand-fahrzeug-tag.vehicle-tag {
    background-color: var(--rn-yellow);
    color: var(--rn-black);
}

.renault-page .brand-fahrzeug-title {
    color: var(--rn-black);
}

.renault-page .brand-fahrzeug-version {
    color: var(--rn-text-secondary);
}

.renault-page .brand-fahrzeug-price {
    color: var(--rn-black);
}

.renault-page .brand-fahrzeug-price small {
    color: var(--rn-text-tertiary);
}

.renault-page .brand-fahrzeug-details {
    background-color: #F7F7F6;
}

.renault-page .brand-fahrzeug-table {
    background-color: var(--rn-white);
}

.renault-page .brand-fahrzeug-table th,
.renault-page .brand-fahrzeug-table td {
    border-bottom: 1px solid var(--rn-grey-100);
}

.renault-page .brand-fahrzeug-table th {
    color: var(--rn-text-secondary);
}

.renault-page .brand-fahrzeug-table td {
    color: var(--rn-black);
}

/* --------------------------------------------------------------------------
   12. Mobile – Touch-Targets min. 48x48px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .renault-page .tf-btn {
        min-height: 48px;
    }
}