/* =========================================
   STYLE.CSS - MP KFZ Technik
   ========================================= */

/* manrope-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url('../webfonts/manrope-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('../webfonts/manrope-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/manrope-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/manrope-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/manrope-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/manrope-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('../webfonts/manrope-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




:root {
    /* --- FARBPALETTE --- */
    --primary-color: #d27129;   /* Dein Orange: Buttons, Highlights, Wichtiges */
    --accent-color: #97cbea;    /* Dein Hellblau: Icons, Details */
    --text-main: #fbfaf2;       /* Dein Creme-Weiß: Haupttext */
    
    /* --- DARK THEME BASIS --- */
    --bg-body: #121212;         /* Haupt-Hintergrund (sehr dunkel) */
    --bg-element: #1e1e1e;      /* Hintergrund für Karten & Menüs */
    --bg-darker: #0a0a0a;       /* Hintergrund für Footer & Kontrast-Sektionen */
    --text-muted: #bbbbbb;      /* Farbe für Nebentexte */
    --border-color: #333333;    /* Dezente Rahmenfarbe */
}

/* =========================================
   BASIS & TYPOGRAFIE (Manrope)
   ========================================= */

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 400; /* Normaler Lesetext */
    line-height: 1.6;
}

/* Überschriften: Kräftig und technisch */
h1, h2, h3, h4, h5, h6, 
.uk-heading-medium, 
.uk-heading-line {
    color: var(--text-main);
    font-family: 'manrope', sans-serif;
    font-weight: 700; 
    letter-spacing: -0.5px; /* Moderner, kompakter Look */
}

/* Links allgemein */
a {
    color: var(--primary-color);
    transition: all 0.3s ease;
    text-decoration: none;
}

a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* Horizontale Linien */
hr {
    border-top-color: var(--border-color);
}

/* =========================================
   NAVIGATION
   ========================================= */

.uk-navbar-container {
    background: rgba(30, 30, 30, 0.95); /* Leicht transparent */
    border-bottom: 2px solid var(--primary-color); /* Orange Linie unten */
    backdrop-filter: blur(10px); /* Milchglas-Effekt */
}

.uk-navbar-nav > li > a {
    color: var(--text-main);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    transition: color 0.3s;
}

/* Hover & Aktiver Zustand im Menü */
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li:hover > a {
    color: var(--primary-color);
}

/* Mobile Menü Button */
.uk-navbar-toggle {
    color: var(--text-main);
}

/* Mobile Offcanvas Leiste */
.uk-offcanvas-bar {
    background-color: var(--bg-element);
    border-right: 3px solid var(--primary-color);
    font-family: 'Manrope', sans-serif;
}

/* =========================================
   BUTTONS
   ========================================= */

/* Haupt-Button (Orange gefüllt) */
.uk-button-primary {
    background-color: var(--primary-color);
    color: #fff; /* Weißer Text auf Orange */
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.uk-button-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
}

/* Sekundär-Button (Outline / Rahmen) */
.uk-button-default {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--text-main);
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.uk-button-default:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* =========================================
   KARTEN & BOXEN (Leistungen)
   ========================================= */

.uk-card-default {
    background-color: var(--bg-element);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    box-shadow: none; /* Flaches Design */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.uk-card-title {
    color: var(--text-main) !important;
    font-weight: 600;
}

/* Hover-Effekt: Karte hebt sich leicht und bekommt orangen Rahmen */
.uk-card-default:hover {
    border-color: var(--primary-color);
	background-color: var(--bg-element);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* =========================================
   HILFSKLASSEN & FARBEN
   ========================================= */

/* Text in Orange erzwingen */
.text-primary {
    color: var(--primary-color) !important;
}

/* Text in Hellblau erzwingen */
.text-accent {
    color: var(--accent-color) !important;
}

/* Label (Badges) Farben anpassen */
.uk-label-success {
    background-color: var(--primary-color);
}
.uk-label-warning {
    background-color: var(--accent-color);
    color: #000; /* Schwarzer Text auf Hellblau für Lesbarkeit */
}

/* =========================================
   SEKTIONEN & BACKGROUNDS
   ========================================= */

/* Standard Sektion (Dunkelgrau) */
.uk-section-muted {
    background-color: var(--bg-body);
}

/* Kontrast Sektion (Fast Schwarz) */
.uk-section-secondary {
    background-color: var(--bg-darker);
}

/* Footer Links */
.uk-link-muted a {
    color: var(--text-muted);
}
.uk-link-muted a:hover {
    color: var(--primary-color);
}

/* =========================================
   SPEZIAL: SERVICE KARTEN HOVER EFFEKTE
   ========================================= */

/* Basis-Stil für die Karte anpassen, damit das Bild gut aussieht */
.service-card {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.4s ease-in-out;
    /* Position relative wichtig für Overlay falls gewünscht */
    position: relative; 
    z-index: 1;
}

/* Beim Hover wird der Text weiß, damit man ihn auf dem Foto lesen kann */
.service-card:hover h3, 
.service-card:hover p, 
.service-card:hover .uk-icon {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Schatten für Lesbarkeit */
}

.service-card:hover {
    border-color: var(--primary-color);
    transform: scale(1.02); /* Leichtes Vergrößern */
}

/* --- INDIVIDUELLE HINTERGRUNDBILDER --- */
/* Wir nutzen linear-gradient, um das Bild abzudunkeln, damit Text lesbar bleibt */

/* 1. Inspektion */
.card-inspektion:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/service-inspektion.jpg');
}

/* 2. Diagnose */
.card-diagnose:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/service-diagnose.jpg');
}

/* 3. Bremsen */
.card-bremsen:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/service-bremsen.jpg');
}

/* 4. Auspuff */
.card-auspuff:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/service-auspuff.jpg');
}

/* 5. Fahrwerk */
.card-fahrwerk:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/service-fahrwerk.jpg');
}

/* 6. Reifen */
.card-reifen:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/service-reifen.jpg');
}
	
/* 6. TÜV*/
.card-tuev:hover {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('../img/tuev.jpg');
}