/* ===============================
   NCC BOX TEXT FIX – FINAL & SAFE
   (fasst NAVI NICHT an!)
   =============================== */

/* Weiße Content-Boxen */
.bg-white,
.white-box,
.repair-box,
.service-box,
.card,
.panel,
.box,
.services-block-alt {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Text IN weißen Boxen */
.bg-white *,
.white-box *,
.repair-box *,
.service-box *,
.card *,
.panel *,
.box *,
.services-block-alt * {
  color: #111111 !important;
}

/* Listen in Boxen */
.bg-white li,
.repair-box li,
.service-box li {
  color: #111111 !important;
}

/* Smart-Repair spezielle Balken */
.marker-list li,
.repair-list li {
  background: #ffffff !important;
  color: #111111 !important;
  border-left: 4px solid #ffc800;
}
/* ===============================
   NCC FINAL STABLE DARK MODE
   (NAVI UNVERÄNDERT)
   =============================== */

/* GLOBAL */
html, body {
  background: #0f131a !important;
  color: #e6e6e6 !important;
}

/* NICHT die Navigation anfassen! */
/* (Kopfbereich bleibt wie er ist) */

/* SEITENHINTERGRUND */
#pageContent,
.section,
.block,
.content,
.container {
  background: transparent !important;
}

/* ÜBERSCHRIFTEN */
h1, h2, h3, h4, h5, h6 {
  color: #ffc800 !important;
}

/* NORMALER TEXT */
p, li, span {
  color: #e6e6e6 !important;
}

/* ===============================
   WEISSE INHALTSBOXEN
   (Smart Repair / Motor / Leasing)
   =============================== */
.bg-white,
.white-box,
.repair-box,
.service-box,
.card,
.panel,
.box {
  background: #ffffff !important;
  color: #111111 !important;
}

.bg-white *,
.white-box *,
.repair-box *,
.service-box *,
.card *,
.panel * {
  color: #111111 !important;
}

/* LISTEN IN WEISSEN BOXEN */
.bg-white li,
.repair-box li,
.service-box li {
  color: #111111 !important;
}

/* BUTTONS */
.btn,
button {
  background: #ffc800 !important;
  color: #000000 !important;
  border: none !important;
}

/* FOOTER */
footer,
.page-footer {
  background: #0f131a !important;
  color: #e6e6e6 !important;
}

footer a {
  color: #ffc800 !important;
}
/* ===============================
   NAVI FINAL LOCK – NICHT MEHR ÄNDERN
   =============================== */

/* kompletter Kopfbereich dauerhaft dunkel */
header,
.page-header,
.navbar,
.navbar-default,
.navbar-inverse,
#slide-nav,
#slidemenu,
#slidemenu .row,
#slidemenu .container,
#slidemenu .navbar-nav {
    background-color: #1a1f2a !important;
}

/* Menü-Links weiß */
#slidemenu .navbar-nav > li > a,
.navbar-nav > li > a {
    color: #ffffff !important;
}

/* Aktiver Menüpunkt gelb */
#slidemenu .navbar-nav > li.active > a,
.navbar-nav > li.active > a {
    background-color: #ffc800 !important;
    color: #000000 !important;
}

/* Hover */
#slidemenu .navbar-nav > li > a:hover,
.navbar-nav > li > a:hover {
    background-color: #2a3040 !important;
    color: #ffffff !important;
}

/* Suchfeld & weiße Leisten killen */
.navbar-collapse,
.navbar-header,
.navbar-form,
.navbar-default .navbar-collapse {
    background-color: #1a1f2a !important;
}
/* =========================================
   FIX NUR FÜR FELGENREPARATUR-SEITE
   ========================================= */

/* Text im Content-Bereich der Felgenreparatur-Seite */
body.felgenreparatur-page p,
body.felgenreparatur-page li,
body.felgenreparatur-page span,
body.felgenreparatur-page .text,
body.felgenreparatur-page .content,
body.felgenreparatur-page .section {
  color: #e6e6e6 !important;
}

/* Überschriften dort klar & gelb */
body.felgenreparatur-page h1,
body.felgenreparatur-page h2,
body.felgenreparatur-page h3 {
  color: #ffc800 !important;
}
/* =========================================
   FELGENREPARATUR – TEXT HELL (NUR DIESE SEITE)
   ========================================= */

body.felgenreparatur-page h1,
body.felgenreparatur-page h2,
body.felgenreparatur-page h3,
body.felgenreparatur-page h4,
body.felgenreparatur-page p,
body.felgenreparatur-page li,
body.felgenreparatur-page span {
  color: #e6e6e6 !important;
}

/* Breadcrumb / kleine Texte */
body.felgenreparatur-page .breadcrumb,
body.felgenreparatur-page .breadcrumb *,
body.felgenreparatur-page .page-title {
  color: #cccccc !important;
}
/* ===============================
   FELGENREPARATUR – TEXT FIX
   =============================== */

body.felgenreparatur-page p,
body.felgenreparatur-page li,
body.felgenreparatur-page span,
body.felgenreparatur-page .block,
body.felgenreparatur-page .services-block-alt,
body.felgenreparatur-page .services-block-alt * {
    color: #e6e6e6 !important;
}

/* Überschriften klar sichtbar */
body.felgenreparatur-page h1,
body.felgenreparatur-page h2,
body.felgenreparatur-page h3 {
    color: #ffc800 !important;
}
/* =====================================
   FELGENREPARATUR – NUR TEXT AUFHELLEN
   ===================================== */

body.felgenreparatur-page p,
body.felgenreparatur-page li,
body.felgenreparatur-page span,
body.felgenreparatur-page .block,
body.felgenreparatur-page .services-block-alt,
body.felgenreparatur-page .services-block-alt * {
    color: #e6e6e6 !important;
}

/* Überschriften klar & edel */
body.felgenreparatur-page h1,
body.felgenreparatur-page h2,
body.felgenreparatur-page h3 {
    color: #ffc800 !important;
}
/* ===============================
   FELGENREPARATUR – TEXT HELL
   =============================== */

body.felgenreparatur-page #pageContent,
body.felgenreparatur-page #pageContent p,
body.felgenreparatur-page #pageContent li,
body.felgenreparatur-page #pageContent span {
  color: #e6e6e6 !important;
}

/* Überschriften edel gelb */
body.felgenreparatur-page h1,
body.felgenreparatur-page h2,
body.felgenreparatur-page h3 {
  color: #ffc800 !important;
}
/* ===============================
   FELGENREPARATUR – TEXT AUF HELL
   =============================== */
body.felgenreparatur-page #pageContent p,
body.felgenreparatur-page #pageContent li,
body.felgenreparatur-page #pageContent span,
body.felgenreparatur-page #pageContent strong {
  color: #e6e6e6 !important;
}
/* ===============================
   FELGENREPARATUR – LEISTUNGEN KÄSTCHEN FIX
   =============================== */

/* Kästchen-Hintergrund bleibt hell */
body.felgenreparatur-page .marker-list li {
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
}

/* Text in den Kästchen DUNKEL */
body.felgenreparatur-page .marker-list li,
body.felgenreparatur-page .marker-list li a {
  color: #111 !important;
  font-weight: 600;
}

/* Hover sauber, nicht ausbleichen */
body.felgenreparatur-page .marker-list li:hover {
  background: #ececec !important;
}
/* =========================================
   FELGENREPARATUR – TEXT SICHTBAR MACHEN
   NUR diese Seite, nichts global
   ========================================= */

body.felgenreparatur-page #pageContent,
body.felgenreparatur-page #pageContent p,
body.felgenreparatur-page #pageContent li,
body.felgenreparatur-page #pageContent span,
body.felgenreparatur-page #pageContent strong {
  color: #eaeaea !important;   /* helles Grau, edel */
}

/* Überschriften auf Felgenreparatur */
body.felgenreparatur-page #pageContent h1,
body.felgenreparatur-page #pageContent h2,
body.felgenreparatur-page #pageContent h3 {
  color: #ffd500 !important;   /* dein Gelb */
}

/* Button: Foto senden & Anfrage stellen */
body.felgenreparatur-page .send-photo-btn {
  color: #000000 !important;   /* Text SCHWARZ */
  background-color: #f1c40f !important;
}

/* Sicherheit: kein Einfluss auf Header / Navi */
body.felgenreparatur-page header,
body.felgenreparatur-page .page-header,
body.felgenreparatur-page #slide-nav {
  color: inherit !important;
}
/* WOW Vorher / Nachher Felgenreparatur */
.wheel-wow {
  max-width: 820px;
  margin: 60px auto;
  text-align: center;
}

.wheel-wow h3 {
  color: #ffd500;
  font-weight: 800;
  margin-bottom: 20px;
}

.compare {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.compare img {
  width: 100%;
  display: block;
}

.compare-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.compare-overlay img {
  width: 200%;
  height: 100%;
  object-fit: cover;
}

.slider {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

.wow-text {
  margin-top: 15px;
  color: #ddd;
  font-size: 15px;
}
/* ===============================
   WOW Vorher / Nachher Slider
   =============================== */

.wheel-wow {
  max-width: 900px;
  margin: 40px auto;
  text-align: center;
}

.wheel-wow h3 {
  color: #ffc800;
  font-weight: 800;
  margin-bottom: 20px;
}

.compare {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.compare img {
  width: 100%;
  display: block;
}

.compare-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}

.compare-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider {
  width: 100%;
  margin-top: 15px;
}

.wow-text {
  color: #ccc;
  font-size: 14px;
  margin-top: 10px;
}
.wheel-wow .compare-labels,
.wheel-wow .wow-text {
  color: #eaeaea;
  font-weight: 600;
}
/* ===============================
   FELGENREPARATUR – TEXT SICHTBAR
   =============================== */

/* Nur auf Felgenreparatur-Seite */
body.felgenreparatur-page #pageContent,
body.felgenreparatur-page #pageContent p,
body.felgenreparatur-page #pageContent li,
body.felgenreparatur-page #pageContent span,
body.felgenreparatur-page #pageContent strong {
  color: #eaeaea !important;
}

/* Überschriften auf Felgenreparatur */
body.felgenreparatur-page #pageContent h1,
body.felgenreparatur-page #pageContent h2,
body.felgenreparatur-page #pageContent h3 {
  color: #ffd500 !important;
}

/* Slider-Text (Vorher / Nachher) */
body.felgenreparatur-page .wheel-wow,
body.felgenreparatur-page .wheel-wow p,
body.felgenreparatur-page .wheel-wow span {
  color: #eaeaea !important;
}
/* ===============================
   DROPDOWN "LEISTUNGEN" – TEXT SICHTBAR AUF ALLEN SEITEN
   =============================== */

/* Dropdown-Hintergrund */
#slidemenu .dropdown-menu,
#slidemenu .dropdown-menu1 {
  background-color: #ffffff !important;
}

/* Dropdown-Links */
#slidemenu .dropdown-menu li a,
#slidemenu .dropdown-menu1 li a {
  color: #000000 !important;
  font-weight: 500;
}

/* Hover-Effekt */
#slidemenu .dropdown-menu li a:hover,
#slidemenu .dropdown-menu1 li a:hover {
  background-color: #f1c40f !important;
  color: #000000 !important;
}

/* Sicherheit: auch auf Unterseiten */
body:not(.home) #slidemenu .dropdown-menu li a,
body:not(.home) #slidemenu .dropdown-menu1 li a {
  color: #000000 !important;
}
/* ===============================
   FIX: DROPDOWN "LEISTUNGEN" – TEXT LESBAR AUF UNTERSEITEN
   =============================== */

/* Hintergrund vom Dropdown */
#slidemenu .dropdown-menu,
#slidemenu .dropdown-menu1 {
  background-color: #ffffff !important;
}

/* Text im Dropdown */
#slidemenu .dropdown-menu li a,
#slidemenu .dropdown-menu1 li a {
  color: #000000 !important;
  font-weight: 500;
}

/* Hover */
#slidemenu .dropdown-menu li a:hover,
#slidemenu .dropdown-menu1 li a:hover {
  background-color: #f1c40f !important;
  color: #000000 !important;
}

/* Extra-Schutz: Unterseiten */
body:not(.home) #slidemenu .dropdown-menu li a,
body:not(.home) #slidemenu .dropdown-menu1 li a {
  color: #000000 !important;
}
/* ===============================
   BEULENDOKTOR – FAQ & LEISTUNGEN FIX
   =============================== */

/* FAQ-Boxen (Häufige Fragen) */
.beulendoktor-page .faq-item,
.beulendoktor-page .faq-item h3,
.beulendoktor-page .faq-item p {
  color: #111 !important;
}

/* Falls die FAQ als Cards / Panels gebaut sind */
.beulendoktor-page .card,
.beulendoktor-page .card h3,
.beulendoktor-page .card p {
  color: #111 !important;
}

/* Unsere Leistungen – kleine helle Kacheln */
.beulendoktor-page .marker-list,
.beulendoktor-page .marker-list li,
.beulendoktor-page .marker-list li a {
  color: #111 !important;
}

/* Sicherheit: Text in hellen Boxen generell dunkel */
.beulendoktor-page .bg-white,
.beulendoktor-page .bg-white * {
  color: #111 !important;
}
/* ===============================
   BEULENDOKTOR – FAQ & LEISTUNGEN FIX
   =============================== */

.beulendoktor-page .faq-item,
.beulendoktor-page .faq-item h3,
.beulendoktor-page .faq-item p {
  color: #111 !important;
}

.beulendoktor-page .card,
.beulendoktor-page .card h3,
.beulendoktor-page .card p {
  color: #111 !important;
}

.beulendoktor-page .marker-list,
.beulendoktor-page .marker-list li,
.beulendoktor-page .marker-list li a {
  color: #111 !important;
}

.beulendoktor-page .bg-white,
.beulendoktor-page .bg-white * {
  color: #111 !important;
}
/* ===============================
   BEULENDOKTOR – FAQ TEXT SICHTBAR
   =============================== */

/* helle FAQ-Boxen */
.beulendoktor-page .block.bg-1,
.beulendoktor-page .block.bg-1 > div,
.beulendoktor-page .block.bg-1 .row > div {
  background: #f2f2f2 !important;
}

/* Text in FAQ-Boxen */
.beulendoktor-page .block.bg-1 h1,
.beulendoktor-page .block.bg-1 h2,
.beulendoktor-page .block.bg-1 h3,
.beulendoktor-page .block.bg-1 p,
.beulendoktor-page .block.bg-1 li,
.beulendoktor-page .block.bg-1 span {
  color: #111 !important;
}
/* ===============================
   BEULENDOKTOR – FAQ FINAL FIX
   =============================== */

/* FAQ-Boxen Hintergrund */
.beulendoktor-page .panel,
.beulendoktor-page .panel-body,
.beulendoktor-page .panel-heading,
.beulendoktor-page .accordion,
.beulendoktor-page .accordion-item {
  background: #f2f2f2 !important;
}

/* FAQ-Überschriften */
.beulendoktor-page .panel-heading,
.beulendoktor-page .panel-title,
.beulendoktor-page .panel-title a {
  color: #111 !important;
  font-weight: 700 !important;
}

/* FAQ-Text */
.beulendoktor-page .panel-body,
.beulendoktor-page .panel-body p,
.beulendoktor-page .panel-body li,
.beulendoktor-page .panel-body span {
  color: #111 !important;
}
/* ===============================
   BEULENDOKTOR FAQ – TEXT SICHTBAR
   =============================== */

.beulendoktor-page .panel,
.beulendoktor-page .panel-heading,
.beulendoktor-page .panel-body {
  background: #f2f2f2 !important;
}

.beulendoktor-page .panel-title,
.beulendoktor-page .panel-title a {
  color: #111 !important;
  font-weight: 700 !important;
}

.beulendoktor-page .panel-body,
.beulendoktor-page .panel-body p,
.beulendoktor-page .panel-body li {
  color: #111 !important;
}
/* ===============================
   BEULENDOKTOR – FAQ TEXT FIX
   =============================== */

.beulendoktor-page .faq,
.beulendoktor-page .faq-box,
.beulendoktor-page .faq-item {
  background: #f2f2f2 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Überschrift in der Box */
.beulendoktor-page .faq h3,
.beulendoktor-page .faq-box h3,
.beulendoktor-page .faq-item h3 {
  color: #d4a100 !important; /* Gelb */
  font-weight: 700;
}

/* TEXT IN DEN BOXEN */
.beulendoktor-page .faq p,
.beulendoktor-page .faq-box p,
.beulendoktor-page .faq-item p,
.beulendoktor-page .faq span,
.beulendoktor-page .faq-box span {
  color: #111111 !important;   /* SCHWARZ */
  text-shadow: none !important;
}
/* ===============================
   FIX: Leistungen Dropdown – Text sichtbar
   Gilt für alle Seiten (auch Autoglas)
   =============================== */

/* Dropdown-Hintergrund */
#slidemenu .dropdown-menu,
#slidemenu .dropdown-menu1 {
  background: #ffffff !important;
}

/* Dropdown-Links */
#slidemenu .dropdown-menu > li > a,
#slidemenu .dropdown-menu1 > li > a {
  color: #111111 !important;
  font-weight: 500;
}

/* Hover-Zustand */
#slidemenu .dropdown-menu > li > a:hover,
#slidemenu .dropdown-menu1 > li > a:hover {
  background: #f2f2f2 !important;
  color: #000000 !important;
}
/* ===============================
   FIX: AUT OGLAS – WEISSEN BEREICH ENTFERNEN
   =============================== */

/* NUR Autoglas-Seite */
body:has(h1:contains("Autoglas")) .block,
body:has(h1:contains("Autoglas")) .bg-white,
body:has(h1:contains("Autoglas")) .content,
body:has(h1:contains("Autoglas")) .container {
  background: transparent !important;
}

/* Text auf Autoglas korrekt dunkel */
body:has(h1:contains("Autoglas")) p,
body:has(h1:contains("Autoglas")) li,
body:has(h1:contains("Autoglas")) span {
  color: #e6e6e6 !important;
}

/* Headline bleibt gelb */
body:has(h1:contains("Autoglas")) h1,
body:has(h1:contains("Autoglas")) h2 {
  color: #ffc800 !important;
}
body.autoglas-page,
body.autoglas-page #pageContent,
body.autoglas-page .block,
body.autoglas-page .content,
body.autoglas-page .container {
  background: #0f131a !important;
}

body.autoglas-page p,
body.autoglas-page li,
body.autoglas-page span {
  color: #e6e6e6 !important;
}

body.autoglas-page h1,
body.autoglas-page h2 {
  color: #ffc800 !important;
}
/* ===============================
   AUT0GLAS – DARK MODE FIX
   =============================== */

body.autoglas-page,
body.autoglas-page #pageContent,
body.autoglas-page .block,
body.autoglas-page section {
  background: #0f131a !important;
  color: #e6e6e6 !important;
}

/* Headline & Text */
body.autoglas-page h1,
body.autoglas-page h2,
body.autoglas-page h3 {
  color: #ffd700 !important;
}

body.autoglas-page p,
body.autoglas-page li,
body.autoglas-page span {
  color: #e6e6e6 !important;
}

/* Falls weiße Boxen vorhanden */
body.autoglas-page .bg-white,
body.autoglas-page .white-box {
  background: #1a1f2a !important;
  color: #e6e6e6 !important;
}
/* ==============================
   GALERIE – FIX (WOW VERSION)
   ============================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 20px;
}

.gallery-item {
  background: transparent;
}

.gallery-item .img-wrap {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item figcaption {
  display: none; /* optional – Galerie clean halten */
}
/* =========================================
   NCC FIX – GALERIE FINAL (STABIL)
   ========================================= */

/* GANZE GALERIE-SEITE dunkel */
body.gallery-page,
body.gallery,
body[class*="gallery"] {
  background-color: #0f131a !important;
  color: #e6e6e6 !important;
}

/* Galerie-Wrapper & Content */
.gallery,
.gallery-container,
.gallery-grid,
#gallery,
#pageContent,
#pageContent .container {
  background-color: transparent !important;
}

/* Galerie-Items (Bilder-Kacheln) */
.gallery-item,
.gallery-box,
.gallery-img,
figure.gallery-item {
  background-color: #1a1f2a !important;
  border-radius: 10px;
}

/* Bildunterschriften */
.gallery-item figcaption,
.gallery-caption,
.gallery-item .caption {
  color: #ffffff !important;
}

/* NAVI & KOPFBEREICH – exakt wie andere Seiten */
header,
.page-header,
.navbar,
#slide-nav,
#slidemenu {
  background-color: #1a1f2a !important;
}

/* Navi-Links */
.navbar-nav > li > a {
  color: #ffffff !important;
}

/* Hover & aktiv */
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  background-color: #ffc800 !important;
  color: #000000 !important;
}
html, body {
  background: #0f131a !important;
}

#gallery,
#pageContent,
.page-content,
.section,
.container,
main,
main#gallery {
  background: transparent !important;
}

.gallery,
.gallery-grid,
.gallery-item,
.gallery-item figure,
.gallery-item .img-wrap {
  background: transparent !important;
}

#gallery h1,
#gallery h2,
#gallery h3,
#gallery p,
#gallery li,
#gallery .breadcrumb,
#gallery .breadcrumb a {
  color: #ffffff !important;
}

footer {
  background: #0f131a !important;
}
/* ===============================
   FORCE FULL DARK BACKGROUND
   =============================== */

html,
body,
body.gallery-page {
  background:#0f131a !important;
}

/* ÄUSSERE WRAPPER KILLEN */
body.gallery-page .page-wrapper,
body.gallery-page .page-content,
body.gallery-page .container,
body.gallery-page .section,
body.gallery-page .content,
body.gallery-page main {
  background:transparent !important;
}

/* FALLS EIN MAX-WIDTH-CONTAINER EXISTIERT */
body.gallery-page .page-wrapper {
  max-width:none !important;
  width:100% !important;
}
/* ================================
   GALERIE – FEINSCHLIFF (FINAL)
   ================================ */

/* Galerie größer & harmonischer */
body.gallery-page .gallery {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px;
  padding: 30px 20px 50px;
}

/* Einzelne Bilder besser sichtbar */
body.gallery-page .gallery-item {
  background: #141b24;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}

body.gallery-page .gallery-item img {
  border-radius: 10px;
}

/* Titelbereich ruhiger */
body.gallery-page #pageTitle {
  background: linear-gradient(
    180deg,
    #1a1f28 0%,
    #0f131a 100%
  ) !important;
}
/* =========================================
   PREMIUM GALERIE – GROSS, EDEL, WOW
   ========================================= */

/* Galerie-Bereich bewusst begrenzen */
body.gallery-page .gallery {
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 20px 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* FIX: große Karten */
  gap: 50px;
}

/* Einzelne Galerie-Karte */
body.gallery-page .gallery-item {
  background: linear-gradient(180deg, #1c222d 0%, #0f131a 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,.85);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Hover = Premium Feeling */
body.gallery-page .gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 40px 120px rgba(0,0,0,.95);
}

/* BILD – JETZT WIRKLICH GROSS */
body.gallery-page .gallery-item img {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* Service-Badge */
body.gallery-page .tag-chip {
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.65);
}

/* =========================
   RESPONSIVE – trotzdem edel
   ========================= */

/* Tablet */
@media (max-width: 1200px) {
  body.gallery-page .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  body.gallery-page .gallery-item img {
    height: 300px !important;
  }
}

/* Handy */
@media (max-width: 768px) {
  body.gallery-page .gallery {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 16px 60px;
  }

  body.gallery-page .gallery-item img {
    height: 260px !important;
  }
}
/* =========================================
   GALERIE – MODERAT GRÖSSER & ELEGANT
   ========================================= */

/* Galerie-Grid: weniger Spalten, größere Bilder */
body.gallery-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 24px 70px;
}

/* Galerie-Karte */
body.gallery-page .gallery-item {
  background: #141b24;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
}

/* Bild: sichtbar größer, aber ruhig */
body.gallery-page .gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  max-width: none;
}

/* Alte Höhen-Logik abschalten */
body.gallery-page .ratio::before {
  display: none;
}

/* Tablet */
@media (max-width: 1200px) {
  body.gallery-page .gallery-item img {
    height: 240px;
  }
}

/* Handy */
@media (max-width: 768px) {
  body.gallery-page .gallery {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 16px 50px;
  }

  body.gallery-page .gallery-item img {
    height: 220px;
  }
}
/* =================================================
   GALERIE – FINAL HARD FIX (THEME-SICHER)
   NUR BILDER – HEADER / NAVI BLEIBEN UNBERÜHRT
   ================================================= */

/* Theme-Spalten & Tricks komplett aus */
body.gallery-page .gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-count: initial !important;
  column-gap: 0 !important;
  gap: 40px !important;

  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 40px 30px 80px !important;
}

/* Galerie-Item */
body.gallery-page .gallery-item {
  width: 100% !important;
  background: #141b24 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.65) !important;
}

/* KLICK-CONTAINER – DAS ENTSCHEIDENDE */
body.gallery-page .gallery-item a,
body.gallery-page .gallery-item a.ratio {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;   /* 🔥 erzwingt Querformat */
  position: relative !important;
  overflow: hidden !important;
}

/* Alte Ratio-Falle TOT */
body.gallery-page .gallery-item a::before,
body.gallery-page .gallery-item a.ratio::before {
  display: none !important;
  content: none !important;
}

/* BILD – JETZT KANN ES NICHT MEHR KLEIN WERDEN */
body.gallery-page .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  transform: none !important;
}

/* Optionaler Hover (nur Optik) */
body.gallery-page .gallery-item:hover img {
  transform: scale(1.04) !important;
}

/* Tablet */
@media (max-width: 1200px) {
  body.gallery-page .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Handy */
@media (max-width: 768px) {
  body.gallery-page .gallery {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: 30px 16px 60px !important;
  }
}
/* =================================================
   KONTAKTSEITE – HEADER / NAVI DUNKEL WIE ANDERE SEITEN
   ================================================= */

/* Falls Kontaktseite eigene Body-Klasse hat */
body.contact-page header,
body.contact-page .page-header,
body.contact-page .navbar,
body.contact-page #slide-nav,

/* Fallback, falls keine spezielle Klasse vorhanden */
body.kontakt-page header,
body.kontakt-page .page-header,
body.kontakt-page .navbar,
body.kontakt-page #slide-nav,

/* Sicher: direkte URL-Variante */
body header.page-header {
  background: #1a1f28 !important;
}

/* Navigationsleiste */
body.contact-page .navbar-nav > li > a,
body.kontakt-page .navbar-nav > li > a {
  color: #ffffff !important;
}

/* Gelbe Linie / Akzent bleibt */
body.contact-page .navbar,
body.kontakt-page .navbar {
  border-bottom: 2px solid #f0c400;
}
/* KONTAKT – Header dunkel erzwingen */
body.kontakt-page .page-header,
body.kontakt-page #slide-nav,
body.kontakt-page .navbar,
body.contact-page .page-header,
body.contact-page #slide-nav,
body.contact-page .navbar {
  background:#1a1f28 !important;
}
/* =================================================
   KONTAKTSEITE – HEADER / NAVI DUNKEL (FINAL)
   ================================================= */

.contact-page .page-header,
.contact-page #slide-nav,
.contact-page .navbar,
.contact-page .header-row,
.contact-page .header-right,
.contact-page .header-right-top,
.contact-page .header-right-bottom {
  background: #1a1f28 !important;
  background-image: none !important;
}

/* Menütexte weiß */
.contact-page .navbar-nav > li > a {
  color: #ffffff !important;
}

/* Gelbe Linie wie bei anderen Seiten */
.contact-page .navbar {
  border-bottom: 2px solid #ffd500 !important;
}
/* =================================================
   KONTAKTSEITE – HEADER ENDGÜLTIG DUNKEL (HARD FIX)
   ================================================= */

/* NUR Kontaktseite */
body header.page-header,
body header.page-header *,
body #slide-nav,
body #slide-nav * {
  background-color: #1a1f28 !important;
  background-image: none !important;
}

/* Menütexte sicher weiß */
body .navbar-nav > li > a {
  color: #ffffff !important;
}

/* Gelbe Trennlinie wie auf anderen Seiten */
body .navbar {
  border-bottom: 2px solid #ffd500 !important;
}
/* ===============================
   DARK THEME – GLOBAL FIX
   =============================== */

body.reifendienst-page,
body.beulendoktor-page,
body.smart-repair-page {
  background:#0f131a !important;
  color:#e6e6e6;
}

main,
section,
.cardbox,
.container {
  background: transparent !important;
}

.section,
.cardbox {
  background:#141b24 !important;
  border:1px solid rgba(255,255,255,.08);
}

h1, h2, h3 {
  color:#ffc800 !important;
}

p, li, span, summary, details div {
  color:#d0d6e0 !important;
}
/* ===================================
   GLOBAL DARK MODE – MOBILE & DESKTOP
   =================================== */

html, body {
  background: #0f131a !important;
  color: #e6e6e6 !important;
}

/* Content-Bereiche */
.page-content,
.content,
.content-wrap,
.container,
.section,
.cardbox {
  background: #141b24 !important;
  color: #e6e6e6 !important;
}

/* Texte */
p, li {
  color: #d0d6e0 !important;
  line-height: 1.75;
}

/* Überschriften */
h1, h2, h3 {
  color: #ffc800 !important;
  font-weight: 700;
}

/* Trennlinien */
hr {
  border-color: rgba(255,255,255,0.15);
}
/* ===============================
   FELGENREPARATUR – MOBILE OPTIK FIX
   =============================== */

/* NUR Mobile */
@media (max-width: 991px) {

  /* Hintergrund bleibt dunkel */
  body {
    background: #0f131a !important;
    color: #e6e6e6 !important;
  }

  /* Text besser lesbar */
  p, li {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: #e6e6e6 !important;
  }

  /* MARKIERTE ÜBERSCHRIFT → GELB */
  h2,
  h3 {
    color: #ffc800 !important;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 14px;
  }

  /* Text-Boxen / Karten */
  .section,
  .content,
  .page-content,
  .card,
  .cardbox {
    background: #141b24 !important;
    border-radius: 14px;
    padding: 18px 16px;
  }

  /* Cookie-Banner */
  .cookie,
  .cookie-consent,
  .cookie-banner {
    background: #0b0f14 !important;
    color: #ffffff !important;
  }

  .cookie button,
  .cookie-consent button {
    background: #ffc800 !important;
    color: #000 !important;
    font-weight: 700;
    border-radius: 8px;
  }
/* ==============================
   MOBILE MENU FIX – STARTSEITE
   ============================== */

@media (max-width: 991px) {

  /* Menü-Button sichtbar machen */
  .home .navbar-toggle,
  body.home .navbar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #ffc800 !important;
    color: #000 !important;
    border-radius: 6px;
    width: 44px;
    height: 44px;
    margin-left: 10px;
  }

  /* Hamburger-Icon sichtbar */
  .home .navbar-toggle i,
  body.home .navbar-toggle i {
    color: #000 !important;
    font-size: 22px;
  }

/* ===============================
   FORCE DARK MODE – MOBILE
   =============================== */
@media (max-width: 991px) {

  body,
  body * {
    background-color: transparent !important;
  }

  body {
    background: #0f131a !important;
    color: #eaeaea !important;
  }

  /* Typische helle Wrapper */
  .page,
  .page-content,
  .content,
  .content-wrap,
  .container,
  .section,
  .section-bg,
  .contact-page,
  .anfahrt-page {
    background: transparent !important;
  }

  /* Text lesbar */
  p, li {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #e6e6e6 !important;
  }

  h1, h2, h3 {
    color: #ffc800 !important;
    font-weight: 700 !important;
  }
}
/* =====================================
   ANFAHRT – DARK MODE (MOBILE + DESKTOP)
   ===================================== */

body.anfahrt-page {
  background: #0f131a !important;
  color: #eaeaea !important;
}

/* Hauptbereich */
body.anfahrt-page main,
body.anfahrt-page .anfahrt-main,
body.anfahrt-page .container {
  background: transparent !important;
}

/* Überschrift */
body.anfahrt-page h2 {
  color: #ffc800 !important;
  font-weight: 800;
  font-size: clamp(22px, 5vw, 32px);
  margin-bottom: 14px;
}

/* Texte besser lesbar (auch für ältere Leute) */
body.anfahrt-page p,
body.anfahrt-page li {
  color: #e0e6ee !important;
  font-size: 17px;
  line-height: 1.65;
}

/* Adress-Blöcke */
body.anfahrt-page strong {
  color: #ffffff;
  font-weight: 700;
}

/* Navi-Box */
body.anfahrt-page .nav-strip {
  background: #141b24 !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Buttons */
body.anfahrt-page .nav-btn.google {
  background: #ffc800 !important;
  color: #000 !important;
  font-weight: 800;
}

body.anfahrt-page .nav-btn.apple {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Google Map Rahmen */
body.anfahrt-page .map-wrap {
  border: 1px solid rgba(255,255,255,0.15);
  background: #0f131a;
}
/* ANFAHRT – Firmenname dunkelblau */
body.anfahrt-page p strong,
body.anfahrt-page p b {
  color: #1c3d5a !important; /* Nano-Car-Blau */
  font-weight: 700;
}
/* ANFAHRT – "Navigation starten" besser lesbar */
body.anfahrt-page .nav-strip .hint {
  color: #000000 !important;
  font-weight: 600;
}  
 <style>
/* ============================
   ANFAHRT – FINAL MOBILE FIX
   ============================ */

/* Hintergrund überall dunkel */
body.anfahrt-page {
  background: #0f131a !important;
  color: #eaeaea !important;
}

/* Inhalt dunkel, kein helles Feld */
body.anfahrt-page .anfahrt-main,
body.anfahrt-page .container {
  background: transparent !important;
}

/* Überschrift */
body.anfahrt-page h2 {
  color: #ffc800 !important;
  font-weight: 800;
}

/* Firmenname dunkelblau */
body.anfahrt-page p strong {
  color: #1c3d5a !important;
  font-weight: 700;
}

/* normaler Text besser lesbar */
body.anfahrt-page p {
  color: #e0e0e0 !important;
  font-size: 16px;
  line-height: 1.6;
}

/* "Navigation starten" schwarz & deutlich */
body.anfahrt-page .nav-strip .hint {
  color: #000 !important;
  font-weight: 600;
}

/* Navigationsbox dunkler */
body.anfahrt-page .nav-strip {
  background: #141b24 !important;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Google Button */
body.anfahrt-page .nav-btn.google {
  background: #ffc800 !important;
  color: #000 !important;
  font-weight: 700;
}

/* Apple Button */
body.anfahrt-page .nav-btn.apple {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.4);
}
</style> 
/* ==================================================
   NCC FIX – ANFAHRT SEITE (DESKTOP + MOBILE)
   ================================================== */

body.anfahrt-page {
  background: #0f131a !important;
  color: #eaeaea !important;
}

/* gesamter Content dunkel */
body.anfahrt-page .anfahrt-main,
body.anfahrt-page main,
body.anfahrt-page .container {
  background: transparent !important;
}

/* Überschrift oben */
body.anfahrt-page h2 {
  color: #fede00 !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
}

/* Adress- & Öffnungszeiten-Text */
body.anfahrt-page p,
body.anfahrt-page strong {
  color: #eaeaea !important;
  font-weight: 500;
}

/* Navigations-Box */
body.anfahrt-page .nav-strip {
  background: #141b24 !important;
  border: 1px solid rgba(255,255,255,0.12);
}

/* "Navigation starten" Text */
body.anfahrt-page .nav-strip .hint {
  color: #ffffff !important;
  font-weight: 600;
}

/* Google Maps Button */
body.anfahrt-page .nav-btn.google {
  background: #fede00 !important;
  color: #000 !important;
  font-weight: 700;
}

/* Apple Karten Button */
body.anfahrt-page .nav-btn.apple {
  background: #1c3d5a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Karte sauber einbetten */
body.anfahrt-page .map-wrap {
  background: #141b24 !important;
  border-radius: 12px;
  overflow: hidden;
}

/* MOBILE ZWANG */
@media (max-width: 768px) {
  body.anfahrt-page,
  body.anfahrt-page .anfahrt-main {
    background: #0f131a !important;
  }
}  
/* =========================================
   ANFAHRT – FINAL DARK FIX (PC + MOBIL)
   ========================================= */

body.anfahrt-page,
body.anfahrt-page html {
  background: #0f131a !important;
  color: #eaeaea !important;
}

/* Hauptbereich */
body.anfahrt-page .anfahrt-main,
body.anfahrt-page main,
body.anfahrt-page .container {
  background: transparent !important;
}

/* Überschrift */
body.anfahrt-page h2 {
  color: #fede00 !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
}

/* Texte */
body.anfahrt-page p,
body.anfahrt-page strong {
  color: #eaeaea !important;
  font-size: 16px;
  line-height: 1.7;
}

/* Adresse: Firmenname leicht blau (wie gewünscht) */
body.anfahrt-page p strong + br + span,
body.anfahrt-page p strong {
  color: #cfd9ff !important;
}

/* Trennlinie */
body.anfahrt-page .thin-divider {
  background: rgba(255,255,255,.15) !important;
}

/* NAVIGATION STARTEN – Box */
body.anfahrt-page .nav-strip {
  background: #141b24 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* Hinweistext */
body.anfahrt-page .nav-strip .hint {
  color: #eaeaea !important;
  font-weight: 600;
}

/* Google Button */
body.anfahrt-page .nav-btn.google {
  background: #fede00 !important;
  color: #000 !important;
  font-weight: 800;
}

/* Apple Button */
body.anfahrt-page .nav-btn.apple {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
}

/* Google Maps Einbettung */
body.anfahrt-page .map-wrap {
  background: #141b24 !important;
  border-color: rgba(255,255,255,.15) !important;
}  

 /* ===============================
   NCC FIX – ANFAHRT DARK MODE
   =============================== */

/* GANZE SEITE */
body.anfahrt-page {
  background:#0f131a !important;
  color:#eaeaea !important;
}

/* MAIN-BEREICH */
body.anfahrt-page .anfahrt-main {
  background:transparent !important;
}

/* TEXT */
body.anfahrt-page h2 {
  color:#ffc800 !important;
  font-weight:800;
}

body.anfahrt-page p,
body.anfahrt-page strong {
  color:#eaeaea !important;
  font-weight:500;
}

/* ADRESSE FIRMA – dunkelblau wie gewünscht */
body.anfahrt-page p strong + br,
body.anfahrt-page p strong {
  color:#1c3d5a !important;
  font-weight:700;
}

/* NAVIGATION STARTEN – LESBAR */
body.anfahrt-page .nav-strip {
  background:#141b24 !important;
  border:1px solid rgba(255,255,255,.12);
}

body.anfahrt-page .nav-strip .hint {
  color:#ffffff !important;
  font-weight:600;
}

/* BUTTONS */
body.anfahrt-page .nav-btn.google {
  background:#ffc800 !important;
  color:#000 !important;
}

body.anfahrt-page .nav-btn.apple {
  background:#0f131a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.25);
} 
/* ================================
   STARTSEITE – WEISSEN BALKEN ENTFERNEN
   ================================ */

/* nur Startseite */
body.home,
body.startseite,
body.index-page {

  /* typische White-Header-Wrapper */
  .page-title,
  .page-title-bar,
  .breadcrumb,
  .breadcrumb-area,
  .header-spacer,
  .section-spacer,
  .container:first-of-type {
    background: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
  }
}

/* Sicherheitsnetz: direkt nach Navbar */
.navbar + .container,
.navbar + section,
header + .container,
header + section {
  background: transparent !important;
}  
/* =========================================
   FIX: Weißer Bereich über dem Footer
   ========================================= */

/* Alles direkt vor dem Footer abdunkeln */
.pageContent,
.page-content,
.section,
.section-bg,
.container,
.container-fluid,
.row,
.row > div {
  background-color: transparent !important;
}

/* Bereich direkt vor Footer erzwingen */
footer,
footer *,
.footer,
.footer-wrapper {
  background-color: #0f131a !important;
}

/* Sicherheitsnetz: letzter Bereich vor Footer */
body > div:last-of-type {
  background-color: #0f131a !important;
}

/* Texte bleiben gut lesbar */
footer,
footer a,
footer span,
footer p {
  color: #e6e6e6 !important;
}  
/* =========================================
   FINAL FIX – WEISSEN STREIFEN UNTER KACHELN
   (Startseite & alle Seiten)
   ========================================= */

/* Body & Haupt-Wrapper */
html, body {
  background-color: #0f131a !important;
}

/* Typische weiße Footer-/Grid-Wrapper */
.page-content,
.page-wrapper,
.page-wrap,
.section,
.section-light,
.section-gray,
.bg-light,
.bg-white,
.container-bg,
.content-bg,
.content-wrap,
#pageContent,
#pageContent * {
  background-color: transparent !important;
}

/* Kachelbereich unter Leistungen */
.services,
.services-grid,
.service-grid,
.service-item,
.service-box,
.cards,
.card,
.card-body {
  background-color: #0f131a !important;
}

/* Footer-Bereich komplett dunkel halten */
footer,
.footer,
.footer-wrapper,
.footer-bottom {
  background-color: #0f131a !important;
}

/* Sicherheit: nichts darf unten wieder weiß werden */
body > div:last-of-type {
  background-color: #0f131a !important;
}  
/* =========================================
   ÜBER UNS – GALERIE FIX (alle Geräte)
   ========================================= */

.gallery-grid .gallery-img {
  width: 100%;
  height: 260px;              /* feste Höhe */
  object-fit: cover;          /* sauberer Zuschnitt */
  border-radius: 12px;
  background-color: #0f131a;  /* Dark Backup */
}

/* Mobile etwas höher für bessere Wirkung */
@media (max-width: 768px) {
  .gallery-grid .gallery-img {
    height: 300px;
  }
}
/* === CONTENT DIREKT UNTER NAVI HOCHZIEHEN === */
#pageTitle,
#pageContent,
.page-content,
.block:first-of-type {
  margin-top: 0 !important;
  padding-top: 25px !important;
}  
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Dezente gelbe Linie unter H1 */
  h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #ffc800;
    margin: 14px auto 0;
    border-radius: 3px;
  }

  /* Mehr Abstand zwischen Blöcken */
  .block,
  section {
    margin-bottom: 28px !important;
  }

  /* CTA / Schaden-Box hervorheben */
  .cta-box,
  .damage-box,
  .upload-box {
    background: #141b24 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.6) !important;
    border-radius: 16px !important;
  }

  /* CTA-Überschrift */
  .cta-box h3,
  .damage-box h3 {
    color: #ffc800 !important;
    font-size: 18px !important;
  }

  /* Button moderner & klickstärker */
  .btn,
  .btn-primary {
    font-size: 16px !important;
    padding: 14px 22px !important;
    border-radius: 999px !important;
  }

  .btn-primary {
    box-shadow: 0 6px 18px rgba(255,200,0,0.35) !important;
  }
}
/* =========================================
   STARTSEITE – MOBILE HERO VERBESSERUNG
   (GARANTIERT WIRKSAM)
   ========================================= */
@media (max-width: 768px) {

  /* Grundhintergrund */
  body,
  html {
    background-color: #0f131a !important;
  }

  /* ERSTER Inhaltsblock unter dem Header */
  #pageContent > .block:first-of-type {
    background: linear-gradient(
      180deg,
      #0f131a 0%,
      #151b24 55%,
      #0f131a 100%
    ) !important;
    padding-top: 36px !important;
    padding-bottom: 32px !important;
    margin-top: -8px !important;
  }

  /* Hauptüberschrift */
  #pageContent > .block:first-of-type h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    position: relative;
  }

  /* Gelbe Linie unter der Headline */
  #pageContent > .block:first-of-type h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: #ffc800;
    margin: 14px auto 0;
    border-radius: 3px;
  }

  /* Text etwas luftiger */
  #pageContent > .block:first-of-type p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Schaden-/CTA-Box */
  #pageContent .cta-box,
  #pageContent .damage-box {
    background: #141b24 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.65) !important;
  }

  /* CTA Button */
  #pageContent .btn,
  #pageContent .btn-primary {
    padding: 14px 24px !important;
    font-size: 16px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(255,200,0,0.35) !important;
  }
}
/* =====================================
   INFOBOX NACH OBEN ZIEHEN
   (Startseite & alle Seiten)
   ===================================== */

/* Abstand unter Menü / PageContent entfernen */
#pageContent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Infobox direkt unter gelben Streifen */
.infobox-wrapper {
  margin-top: 0 !important;
  padding-top: 12px !important;
}

/* Falls noch Wrapper dazwischen funken */
.page-content,
.page-wrapper,
.content,
.content-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ======================================
   PC FIX – SMART REPAIR "UNSERE LEISTUNGEN"
   Text lesbar
   ====================================== */

.smart-repair-page .services-block-alt,
.smart-repair-page .services-block-alt li,
.smart-repair-page .services-block-alt span,
.smart-repair-page .services-block-alt p {
  color: #111111 !important;
}

.smart-repair-page .services-block-alt h3,
.smart-repair-page .services-block-alt strong {
  color: #111111 !important;
  font-weight: 700;
}

.smart-repair-page .services-block-alt i {
  color: #ffc800 !important;
}
<!DOCTYPE html>
<html lang="de">
<head>
  <style>
    #loader-wrapper{ display:none !important; }
  </style>

  <!-- Basis-Meta -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Beulendoktor, Felgenreparatur & Smart Repair in Essen | Nano Car Cosmetic</title>
  <meta name="description" content="Nano Car Cosmetic in Essen: Beulendoktor (Dellendrücken), Felgenreparatur, Smart Repair, Autoglas, Innenraumreparatur und Nano-/Keramikversiegelung. Punktgenaue Instandsetzung – ideal für Leasingrückgabe. Jetzt Termin: 0201-2484-002.">
  <meta name="keywords" content="Beulendoktor Essen, Felgenreparatur Essen, Smart Repair Essen, Autoglas Essen, Innenraumreparatur Essen, Nano Versiegelung Essen, Keramikversiegelung Essen, Leasingrückgabe Essen, Nano Car Cosmetic Essen">
  <link rel="canonical" href="https://www.nano-car-cosmetic.de/">
  <meta name="robots" content="index,follow,max-image-preview:large">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:locale" content="de_DE">
  <meta property="og:site_name" content="Nano Car Cosmetic">
  <meta property="og:title" content="Beulendoktor, Felgenreparatur & Smart Repair in Essen | Nano Car Cosmetic">
  <meta property="og:description" content="Gezielte Instandsetzung statt teurem Austausch – ideal für Leasingrückgabe. Jetzt Termin sichern: 0201-2484-002.">
  <meta property="og:url" content="https://www.nano-car-cosmetic.de/">
  <meta property="og:image" content="https://www.nano-car-cosmetic.de/images/og-cover.jpg">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

  <!-- CSS (Theme/Plugins) -->
  <link href="css/plugins/bootstrap.min.css" rel="stylesheet">
  <link href="css/plugins/bootstrap-submenu.css" rel="stylesheet">
  <link href="css/plugins/animate.min.css" rel="stylesheet">
  <link href="css/plugins/slick.css" rel="stylesheet">
  <link href="css/plugins/bootstrap-datetimepicker.css" rel="stylesheet">
  <link href="css/custom.css?v=3" rel="stylesheet">
  <link href="iconfont/style.css" rel="stylesheet">

  <!-- GA4 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0V6CXBDLBN"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-0V6CXBDLBN');
  </script>

  <!-- Schema -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "AutoRepair",
    "@id": "https://www.nano-car-cosmetic.de/#business",
    "name": "Nano Car Cosmetic",
    "url": "https://www.nano-car-cosmetic.de/",
    "logo": "https://www.nano-car-cosmetic.de/images/logo.png",
    "telephone": "+49-201-2484002",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Hachestraße 74",
      "postalCode": "45127",
      "addressLocality": "Essen",
      "addressCountry": "DE"
    },
    "openingHoursSpecification": [{
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "08:30",
      "closes": "18:00"
    }]
  }
  </script>

  <!-- FIXES (PC Navi / Dropdown / Kacheln / Infobox) -->
  <style>
   /* === FIX: Fließtext unter der Headline (war schwarz auf dunkel) === */
.infobox-wrapper p {
  color: #eaeaea !important;
}
/* Hervorhebung: "Wir reparieren gezielt – statt zu ersetzen." */
.infobox-wrapper p strong {
  color: #ffc107 !important;   /* gleiches Gelb wie Überschrift */
  font-weight: 700;
}    

/* Sicherheit für Inline-Tags */
.infobox-wrapper p span,
.infobox-wrapper p a {
  color: #eaeaea !important;
} 
    html, body { height: 100%; }
    body{
      background:#1c1c1c;
      font-family:'Roboto',sans-serif;
      margin:0;
      overflow-x:hidden;
    }
    /* FIX: "Ihr Spezialist für" in GELB (wie Headline) */
     .infobox-wrapper h2,
     .infobox-wrapper h2 span,
     .infobox-wrapper h2 strong {
     color: #ffc107 !important;
     }

    /* PC: Abstand, damit Infobox nicht hinter Header hängt */
    @media (min-width: 992px){
      body.home #pageContent{
        padding-top: 175px !important;
      }
    }

    /* NAVI: sichtbar + Dropdown sichtbar */
    header.page-header #slidemenu{
      background: rgba(255,255,255,0.96) !important;
    }
    header.page-header #slidemenu .navbar-nav > li > a,
    header.page-header #slidemenu .navbar-nav > li > a span{
      color:#111 !important;
      opacity:1 !important;
      visibility:visible !important;
      text-shadow:none !important;
      font-weight:600 !important;
    }
    header.page-header #slidemenu .dropdown-menu{
      background:#fff !important;
      border:1px solid rgba(0,0,0,0.12) !important;
      z-index:99999 !important;
    }
    header.page-header #slidemenu .dropdown-menu > li > a{
      color:#111 !important;
    }
    header.page-header #slidemenu .dropdown-menu > li > a:hover{
      background:#f1f1f1 !important;
      color:#000 !important;
    }

    .dropdown-submenu{ position: relative; }
    .dropdown-submenu .dropdown-menu1{
      position:absolute;
      display:none;
      top:0;
      left:100%;
      margin:0;
      padding:0;
      min-width:220px;
      list-style:none;
      background:#fff !important;
      border:1px solid rgba(0,0,0,0.12) !important;
      z-index:999999 !important;
    }
    .dropdown-submenu .dropdown-menu1 li a{
      display:block;
      padding:10px 12px;
      color:#111 !important;
      text-decoration:none;
      white-space:nowrap;
    }
    .dropdown-submenu .dropdown-menu1 li a:hover{
      background:#f1f1f1 !important;
      color:#000 !important;
    }

    /* Mobile Menü */
    @media (max-width:768px){
      #slidemenu{
        display:none !important;
        opacity:0 !important;
        height:0 !important;
        overflow:hidden !important;
        visibility:hidden !important;
        pointer-events:none !important;
      }
      body.menu-open #slidemenu{
        display:block !important;
        opacity:1 !important;
        height:auto !important;
        overflow:visible !important;
        visibility:visible !important;
        pointer-events:auto !important;
      }
    }

    /* INFOBOX */
    .infobox-wrapper{
      background:#1c1c1c;
      padding:30px 0 10px;
    }
    .infobox-flex{
      display:flex;
      justify-content:space-between;
      gap:40px;
      align-items:flex-start;
      flex-wrap:wrap;
      padding:40px 20px;
      max-width:1200px;
      margin:0 auto;
      background:#1a1a1a;
      border-radius:10px;
      position:relative;
      z-index:2;
    }
    .info-text{ flex:1; min-width:300px; }
    .info-bild{
      max-width:280px;
      flex-shrink:0;
      margin-top:85px;
      position:relative;
      z-index:5;
    }
    .info-bild img{
      width:100%;
      height:auto;
      display:block;
      border-radius:12px;
    }
    @media (max-width:768px){ .info-bild{ margin-top:10px; } }

    .cta-foto-box{
      margin-top:20px;
      background:#2f2f2f;
      padding:20px;
      border-radius:10px;
      text-align:center;
    }
    .cta-foto-box, .cta-foto-box p, .cta-foto-box strong{ color:#fff !important; }
    .cta-foto-text{ font-size:16px; margin-bottom:10px; line-height:1.4; }
    .cta-foto-button{
      background:#ffc107;
      border:none;
      color:#000 !important;
      padding:12px 25px;
      font-size:16px;
      font-weight:700;
      border-radius:6px;
      box-shadow:0 4px 6px rgba(0,0,0,0.2);
      cursor:pointer;
      transition:.25s;
    }
    .cta-foto-button:hover{ background:#ffde59; box-shadow:0 0 12px #ffc107; }

    /* KACHELN */
    .leistungen-bereich{ background:#1c1c1c; padding:20px 0 35px; }
    .leistungen-grid{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:22px;
      max-width:1250px;
      margin:0 auto;
      padding:0 20px;
    }
    .leistung{
      width:255px;
      flex:0 1 255px;
      text-align:center;
      border-bottom:4px solid transparent;
      transition:.25s;
    }
    .leistung a{ text-decoration:none; color:inherit !important; display:block; }
    .leistung img{
      width:100%;
      height:155px;
      object-fit:cover;
      border-radius:10px;
      transition:.25s;
    }
    .leistung a:hover img{ transform:scale(1.03); box-shadow:0 0 10px rgba(0,0,0,0.35); }
    .leistung:hover{ border-color:#ffcc00; }
    .leistung h3{
      margin:10px 0 0;
      padding:10px 12px;
      background:rgba(0,0,0,0.35);
      border-radius:10px;
      font-size:15px;
      font-weight:700;
      line-height:1.15;
      min-height:46px;
      color:#fff !important;
      text-shadow:0 2px 6px rgba(0,0,0,0.75);
    }
    @media (max-width:600px){
      .leistung{ width:calc(50% - 12px); flex:0 1 calc(50% - 12px); }
      .leistung img{ height:120px; }
      .leistung h3{ font-size:13px; min-height:42px; }
    }

    #footer-placeholder{ background:#1c1c1c; margin:0; padding:0; }

    .call-button{
      position:fixed;
      bottom:20px;
      right:20px;
      background:#1a3ca6;
      color:#fff;
      font-weight:700;
      padding:12px 20px;
      border-radius:30px;
      box-shadow:0 4px 12px rgba(0,0,0,0.3);
      text-decoration:none;
      z-index:9999;
      transition:.25s;
    }
    .call-button:hover{ background:#444; transform:scale(1.05); }
  </style>
</head>
<body class="home-page">
  <!-- Loader -->
  <div id="loader-wrapper">
    <div class="loader">
      <div class="line"></div><div class="line"></div><div class="line"></div>
      <div class="line"></div><div class="line"></div><div class="line"></div>
      <div class="loading">wird geladen</div>
    </div>
  </div>

  <!-- Header -->
  <header class="page-header">
    <nav class="navbar" id="slide-nav">
      <div class="container">
        <div class="header-row">

          <div class="logo">
            <a href="index.html">
              <img src="images/small_logo_Nano_Car.png" alt="Nano Car Cosmetic" style="max-height:60px;">
            </a>
          </div>

          <div class="header-right">
            <button type="button" class="navbar-toggle" aria-label="Menü öffnen">
              <i class="icon icon-lines-menu"></i>
            </button>

            <div class="header-right-top">
              <div class="address">
                Montag - Freitag <span class="custom-color">8:30 - 18:00 Uhr</span>
              </div>
            </div>
             <div class="header-right-top">
              <div class="header-claim">
             <div class="claim-top">Gezielte Instandsetzung statt Austausch</div>
            <div class="claim-bottom">Kostenloser Leasing‑Rückgabe‑Check (20–30 Min.)
            </div>
           </div>
           </div>

        <!-- Menü -->
        <div id="slidemenu">
          <div class="row">

            <div class="col-md-9">
              <div class="close-menu" aria-label="Menü schließen"><i class="icon-close-cross"></i></div>

              <ul class="nav navbar-nav">
                <li class="active"><a href="index.html"><span>Startseite</span></a></li>

                <!-- ✅ LEISTUNGEN mit Dropdown (wie vorher!) -->
                <li class="dropdown">
                  <a href="#" data-toggle="dropdown" data-submenu="">
                    <span>Leistungen</span><span class="ecaret"></span>
                  </a>

                  <ul class="dropdown-menu" role="menu">
                    <li class="dropdown-submenu">
                      <a href="smart-repair.html" class="test">Smart Repair <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="smart-repair.html#lackreparatur">Lackreparatur</a></li>
                        <li><a href="smart-repair.html#felgenreparatur">Felgenreparatur</a></li>
                        <li><a href="smart-repair.html#verchromen">Verchromen</a></li>
                        <li><a href="smart-repair.html#brandlochreparatur">Brandlochreparatur</a></li>
                        <li><a href="smart-repair.html#lederreparatur">Lederreparatur</a></li>
                        <li><a href="smart-repair.html#polsterreparatur">Polsterreparatur</a></li>
                        <li><a href="smart-repair.html#kunststoffreparatur">Kunststoffreparatur</a></li>
                      </ul>
                    </li>

                    <li class="dropdown-submenu">
                      <a class="test" href="beulendoktor.html">Beulendoktor <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="beulendoktor.html#hagelschaden">Hagelschaden</a></li>
                        <li><a href="beulendoktor.html#parkdellen">Parkdellen</a></li>
                        <li><a href="beulendoktor.html#astschaden">Astschaden</a></li>
                        <li><a href="beulendoktor.html#dellendrueken">Dellendrücken</a></li>
                      </ul>
                    </li>

                    <li><a href="autoglas.html">Autoglas</a></li>

                    <li class="dropdown-submenu">
                      <a class="test" href="felgenreparatur.html">Felgenreparatur <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="felgenreparatur.html#bordsteinreparatur">Bordsteinreparatur</a></li>
                        <li><a href="felgenreparatur.html#lackierung">Lackierung</a></li>
                        <li><a href="felgenreparatur.html#verchromen">Verchromen</a></li>
                        <li><a href="felgenreparatur.html#hochglanzpolieren">Hochglanzpolieren</a></li>
                        <li><a href="felgenreparatur.html#glanzdrehen">Glanzdrehen</a></li>
                        <li><a href="felgenreparatur.html#smartrepair">Smart Repair</a></li>
                      </ul>
                    </li>

                    <li class="dropdown-submenu">
                      <a href="lackveredelung.html" class="test">Lackveredelung <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="lackveredelung.html#nanoversiegelung">Lackbehandlung</a></li>
                        <li><a href="lackveredelung.html#cramic-plus">CERAMIC-plus</a></li>
                        <li><a href="lackveredelung.html#kratzerentfernung">Kratzerentfernung</a></li>
                      </ul>
                    </li>

                    <li class="dropdown-submenu">
                      <a href="nanoversiegelung.html" class="test">Nanoversiegelung <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="nanoversiegelung.html#lack">Lack</a></li>
                        <li><a href="nanoversiegelung.html#felgen">Felgen</a></li>
                        <li><a href="nanoversiegelung.html#scheiben">Scheiben</a></li>
                        <li><a href="nanoversiegelung.html#leder">Leder</a></li>
                        <li><a href="nanoversiegelung.html#polster">Polster</a></li>
                      </ul>
                    </li>

                    <li class="dropdown-submenu">
                      <a href="aufbereitung.html" class="test">Aufbereitung <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="aufbereitung.html#fahrzeugaufbereitung">Fahrzeugaufbereitung</a></li>
                        <li><a href="aufbereitung.html#wohnmobilaufbereitung">Wohnmobilaufbereitung</a></li>
                        <li><a href="aufbereitung.html#motorradaufbereitung">Motorradaufbereitung</a></li>
                        <li><a href="aufbereitung.html#busaufbereitung">Bus Aufbereitung</a></li>
                        <li><a href="aufbereitung.html#lkwaufbereitung">LKW Aufbereitung</a></li>
                        <li><a href="aufbereitung.html#scheinwerferaufbereitung">Scheinwerferaufbereitung</a></li>
                        <li><a href="aufbereitung.html#boataufbereitung">Boot Aufbereitung</a></li>
                      </ul>
                    </li>

                    <li class="dropdown-submenu">
                      <a href="innenreinigung.html" class="test">Innenreinigung <span class="caret"></span></a>
                      <ul class="dropdown-menu1">
                        <li><a href="innenreinigung.html#lederreinigung">Lederreinigung</a></li>
                        <li><a href="innenreinigung.html#polsterreinigung">Polsterreinigung</a></li>
                        <li><a href="innenreinigung.html#kunststoffreinigung">Kunststoffreinigung</a></li>
                      </ul>
                    </li>

                    <li><a href="innenraumreparatur.html">Innenraumreparatur</a></li>
                    <li><a href="geruchentfernung.html">Geruchentfernung</a></li>
                    <li><a href="ozonbehandlung.html">Ozonbehandlung</a></li>
                    <li><a href="leasingruecklaeufer.html">Leasingrückläufer</a></li>
                    <li><a href="verchromen.html">Verchromen</a></li>
                    <li><a href="verspiegelung.html">Verspiegelung</a></li>
                  </ul>
                </li>

                <li><a href="reifen.html"><span>Reifenshop</span></a></li>
                <li><a href="about.html"><span>Über uns</span></a></li>
                <li><a href="gallery.php"><span>Galerie</span></a></li>
                <li><a href="motor-getriebe-tuning.html"><span>Motor, Getriebe, Tuning</span></a></li>
                <li><a href="kontakt.php"><span>Kontakt</span></a></li>
              </ul>
            </div>

            <div class="col-md-3">
              <div class="search-container">
                <input placeholder="Suchen" type="text">
                <a class="button"><i class="icon icon-search"></i></a>
              </div>
            </div>

          </div>
        </div>
        <!-- /Menü -->

      </div>
    </nav>
  </header>

  <!-- Content -->
  <div id="pageContent">

    <!-- INFOBOX -->
    <section class="infobox-wrapper">
      <div class="infobox-flex">
        <div class="info-text">

         <h2 style="font-size:28px;color:#f8f8f8;font-weight:700;margin:0 0 15px;line-height:1.15;">
            Ihr Spezialist für <span style="color:#ffc107;">erstklassige Fahrzeugaufbereitung</span>
          </h2>

          <p style="font-size:16px;line-height:1.7;color:#e0e0e0;margin:0 0 14px;">
            Ob Leasingrückgabe, Firmenflotte oder Privatfahrzeug – Nano Car Cosmetic bietet punktgenaue Instandsetzung, professionelle Ergebnisse und klare Kostenvorteile.
          </p>

          <p style="font-size:16px;line-height:1.7;color:#e0e0e0;margin:0;">
            <strong style="color:#ffc107;">Wir reparieren gezielt – statt zu ersetzen.</strong>
          </p>
            
          <p style="font-size:16px;color:#ffc107;font-weight:700;margin:0 0 10px;">
            📍 <a href="anfahrt.html" style="color:#ffc107;text-decoration:underline;">So finden Sie uns – zur Anfahrt</a>
          </p>
          <div class="cta-foto-box">
            <p class="cta-foto-text">
              📸 <strong>Sie haben einen Schaden?</strong><br>
              Klicken Sie unten, um ein Foto hochzuladen und direkt Kontakt aufzunehmen.
            </p>
            <a href="kontakt.php"><button class="cta-foto-button">➕ Foto senden</button></a>
          </div>
           
        </div>

        <div class="info-bild">
          <img src="frau-top-bewertet.png" alt="Top bewertet von Kunden">
        </div>
      </div>
    </section>

    <!-- LEISTUNGEN KACHELN -->
    <section class="leistungen-bereich">
      <div class="leistungen-grid">

        <div class="leistung">
          <a href="felgenreparatur.html">
            <img src="felge1.jpg" alt="Felgenreparatur">
            <h3>Felgenreparatur</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="smart-repair.html">
            <img src="bild11.jpg" alt="Smart Repair">
            <h3>Smart Repair</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="beulendoktor.html">
            <img src="beule1.jpg" alt="Beulendoktor">
            <h3>Beulendoktor</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="nanoversiegelung.html">
            <img src="ferarie.jpg" alt="Nano- & Keramik-Versiegelung">
            <h3>Nano- &amp; Keramik-Versiegelung</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="innenraumreparatur.html">
            <img src="Porsche GT INNEN.jpg" alt="Innenraumreparatur">
            <h3>Innenraumreparatur</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="autoglas.html">
            <img src="ja.jpg" alt="Autoglas">
            <h3>Autoglas</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="aufbereitung.html">
            <img src="sport.jpg" alt="Aufbereitung">
            <h3>Aufbereitung</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="leasingruecklaeufer.html">
            <img src="Nano_2352.jpg" alt="Leasing-Rückläufer">
            <h3>Leasing-Rückläufer</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="motor-getriebe-tuning.html">
            <img src="golf.jpg" alt="Autosoftware Optimierung & Codierung">
            <h3>Autosoftware Optimierung &amp; Codierung</h3>
          </a>
        </div>

        <div class="leistung">
          <a href="reifendienst.html">
            <img src="reifen.jpg" alt="Reifendienst">
            <h3>Reifendienst</h3>
          </a>
        </div>

      </div>
    </section>

    <!-- Footer -->
    <div id="footer-placeholder"></div>

  </div><!-- /#pageContent -->

  <div class="darkout-menu"></div>

  <!-- Call Button -->
  <a href="tel:02012484002" class="call-button" title="Jetzt anrufen">📞 Jetzt anrufen</a>

  <!-- JS -->
  <script src="js/jquery.js"></script>
  <script src="js/plugins/bootstrap.min.js"></script>
  <script src="js/plugins/slick.min.js"></script>
  <script src="js/plugins/jquery.form.js"></script>
  <script src="js/plugins/jquery.validate.min.js"></script>
  <script src="js/plugins/moment.js"></script>
  <script src="js/plugins/bootstrap-datetimepicker.js"></script>
  <script src="js/plugins/jquery.waypoints.min.js"></script>
  <script src="js/plugins/jquery.countTo.js"></script>
  <script src="js/custom.js"></script>
  <script src="js/forms.js"></script>

  <script>
    // Footer laden
    fetch("/includes/footer.html")
      .then(r => r.text())
      .then(html => {
        var el = document.getElementById("footer-placeholder");
        if (el) el.innerHTML = html;
      });

    // Mobile Menü Toggle (body.menu-open)
    document.addEventListener("DOMContentLoaded", function(){
      var btn = document.querySelector(".navbar-toggle");
      var closeBtn = document.querySelector(".close-menu");
      var darkout = document.querySelector(".darkout-menu");
      function closeMenu(){ document.body.classList.remove("menu-open"); }

      if(btn){
        btn.addEventListener("click", function(e){
          e.preventDefault();
          document.body.classList.toggle("menu-open");
        });
      }
      if(closeBtn){
        closeBtn.addEventListener("click", function(e){
          e.preventDefault();
          closeMenu();
        });
      }
      if(darkout){
        darkout.addEventListener("click", closeMenu);
      }
    });

    // Submenu 2. Ebene Hover
    $(document).ready(function(){
      $('.dropdown-submenu a.test').hover(function(e){
        $('.dropdown-menu1').hide();
        $(this).next('.dropdown-menu1').show();
        e.preventDefault();
        e.stopPropagation();
      });
    });
  </script>
<style>
/* ========= ANFAHRT – SAUBERER DARK MODE ========= */

/* Grundlayout */
body.anfahrt-page {
  background:#0f131a !important;
  color:#eaeaea !important;
}

/* Inhalt */
.anfahrt-main {
  background:#0f131a !important;
}

/* Überschrift */
.anfahrt-main h2 {
  color:#ffc800 !important;
  font-weight:800 !important;
  margin-bottom:16px;
}

/* Texte besser lesbar */
.anfahrt-main p {
  font-size:16px;
  line-height:1.8;
  font-weight:500;
}

/* Adresse fett & leicht blau */
.anfahrt-main strong {
  color:#9fb6ff;
  font-weight:700;
}

/* Navigations-Box */
.nav-strip {
  background:#141b24 !important;
  border:1px solid rgba(255,255,255,.1);
}

/* Navigation starten */
.nav-strip .hint {
  color:#bfc7d5 !important;
  font-weight:600;
}

/* Google Button */
.nav-btn.google {
  background:#ffc800 !important;
  color:#000 !important;
  font-weight:700;
}

/* Apple Button */
.nav-btn.apple {
  background:#1b2330 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.2);
}

/* Map Rahmen */
.map-wrap {
  background:#141b24;
  border:1px solid rgba(255,255,255,.1);
}

/* Mobile Feinschliff */
@media (max-width: 991px) {
  .anfahrt-main p {
    font-size:17px;
  }
}
</style>
<style>
/* ================================
   INDEX – FIX WEISSER BALKEN UNTER NAVI
   ================================ */

/* Sicherheit: kompletter Hintergrund */
html, body {
  background:#0f131a !important;
}

/* Alles direkt unter dem Header */
.page-title,
.page-title-wrapper,
.hero,
.hero-section,
.section,
.section-bg,
.content,
.content-wrap,
.container,
.container-fluid,
main {
  background: transparent !important;
}

/* Häufiger Übeltäter: Pseudo-Elemente */
.page-title::before,
.page-title::after,
.hero::before,
.hero::after,
header::after {
  content:none !important;
  background:none !important;
}

/* Falls es ein leerer Abstand ist */
.page-title,
.hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Extra: gelbe Linie bleibt sauber */
.navbar + * {
  background: transparent !important;
}
</style>  
<style>
/* ===== FIX: WEISSEN STREIFEN UNTER NAV ENTFERNEN (STARTSEITE) ===== */

/* Typische Header-Abstände killen */
.page-header + .page-content,
.page-title,
.header-spacer,
.navbar + .container,
.navbar + .page-content {
  display: none !important;
}

/* Sicherheit: alles direkt nach Header dunkel */
.page-header ~ * {
  background-color: #0f131a !important;
}

/* Falls ein leeres Section-Element existiert */
section:empty,
div:empty {
  display: none !important;
}
</style>
 <style>
/* === STARTSEITE: WEISSES BAND UNTER HEADER ENTFERNEN === */
</style>   
body.home .page-title,
body.home .hero,
body.home .section-bg,
body.home .spacer,
body.home .page-header + div {
  display: none !important;
}

/* Falls es nur Höhe ist */
body.home .page-header {
  margin-bottom: 0 !important;
}
</style> 
<script src="js/forms.js"></script>

<!-- HIER EINFÜGEN -->
<style>
/* === FIX: Weißer Streifen unter Navigation (Startseite) === */

body {
  background: #0f131a !important;
}

/* alles direkt unter Header */
.page-header + *,
.navbar + *,
#pageContent,
#pageContent > *,
.hero,
.hero-section,
.section,
.section-bg,
.light,
.bg-light {
  background-color: #0f131a !important;
  background-image: none !important;
}

/* falls ein Spacer / Dummy drin ist */
.page-header + div {
  background: #0f131a !important;
}

/* Sicherheit */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
 
</style>
.section-light,
.section-gray,
.bg-light,
.bg-white,
.container-bg,
.content-bg,
.content-wrap,
#pageContent,
#pageContent * {
  background-color: transparent !important;
}

/* Kachelbereich unter Leistungen */
.services,
.services-grid,
.service-grid,
.service-item,
.service-box,
.cards,
.card,
.card-body {
  background-color: #0f131a !important;
}

/* Footer-Bereich komplett dunkel halten */
footer,
.footer,
.footer-wrapper,
.footer-bottom {
  background-color: #0f131a !important;
}

/* Sicherheit: nichts darf unten wieder weiß werden */
body > div:last-of-type {
  background-color: #0f131a !important;
} 

<style>
/* === STARTSEITE: Inhalt näher an Header ziehen === */
</style>  

/* Hauptbereich der Startseite */
.page-content,
#pageContent,
.home-content,
.start-content {
  margin-top: -60px !important;
}

/* Erster Inhaltsblock ("So finden Sie uns – zur Anfahrt") */
.page-content > section:first-child,
.page-content > div:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

</style>

</body>
</html>  
<body class="felgenreparatur-page">
/* =====================================================
   FINAL FIX – NAVIGATION TEXT IMMER WEISS
   (Desktop + Mobile, alle Seiten außer Startseite)
   ===================================================== */

/* DESKTOP – Navigation */
.page-header .navbar-nav > li > a,
.page-header .navbar-nav > li > a span {
  color: #ffffff !important;
}

/* Breadcrumb / Seitenpfad */
.page-header .breadcrumb,
.page-header .breadcrumb a {
  color: #ffffff !important;
}

/* Hover & aktiv */
.page-header .navbar-nav > li > a:hover,
.page-header .navbar-nav > li.active > a {
  color: #ffffff !important;
  background: transparent !important;
}


/* =====================================================
   MOBILE – HAMBURGER MENÜ (3 gelbe Streifen)
   ===================================================== */
@media (max-width: 991px) {

  /* Menü-Hintergrund */
  #slidemenu {
    background-color: #1a1f2a !important;
  }

  /* Menütexte WEISS */
  #slidemenu .navbar-nav > li > a,
  #slidemenu .navbar-nav > li > a span,
  #slidemenu .dropdown-menu li a {
    color: #ffffff !important;
  }

  /* Pfeile / Carets */
  #slidemenu .caret {
    color: #ffffff !important;
  }

  /* Hover */
  #slidemenu .navbar-nav > li > a:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
  }
}
/* ===== NAVI FINAL – EINHEITLICH DUNKEL + TEXT WEISS ===== */

header.page-header,
#slide-nav,
#slidemenu {
  background: #1a1f2a !important;
}

/* Haupt-Navigation */
#slidemenu .navbar-nav > li > a,
#slidemenu .navbar-nav > li > a span {
  color: #ffffff !important;
  font-weight: 600;
}

/* Hover */
#slidemenu .navbar-nav > li > a:hover {
  background: #2a3040 !important;
  color: #ffffff !important;
}

/* Aktiver Menüpunkt */
#slidemenu .navbar-nav > li.active > a {
  background: #ffc800 !important;
  color: #000000 !important;
}

/* Dropdown */
#slidemenu .dropdown-menu,
#slidemenu .dropdown-menu1 {
  background: #1a1f2a !important;
}

#slidemenu .dropdown-menu li a,
#slidemenu .dropdown-menu1 li a {
  color: #ffffff !important;
}

#slidemenu .dropdown-menu li a:hover,
#slidemenu .dropdown-menu1 li a:hover {
  background: #ffc800 !important;
  color: #000000 !important;
}
/* ===== GLOBAL: Footer Links immer sichtbar (Dark Mode / Mobile) ===== */
#footer-placeholder a,
footer a,
.footer-bottom a{
  color:#ffc107 !important;
  font-weight:800 !important;
}
#footer-placeholder a:hover{ color:#ffde59 !important; text-decoration:underline !important; }

/* ===== GLOBAL: Buttons in Dark Mode gut lesbar ===== */
.btn, button, .cta-foto-button{
  border-radius:999px;
}

/* ===== GLOBAL: Floating Call Button (falls irgendwo fehlt) ===== */
.call-button{
  background:linear-gradient(135deg,#1c3d5a,#2a8cff) !important;
  color:#fff !important;
  font-weight:900 !important;
}
/* ===== GLOBAL: Footer Links immer sichtbar (Dark Mode / Mobile) ===== */
#footer-placeholder a,
footer a,
.footer-bottom a{
  color:#ffc107 !important;
  font-weight:800 !important;
}
#footer-placeholder a:hover{ color:#ffde59 !important; text-decoration:underline !important; }

/* ===== GLOBAL: Buttons in Dark Mode gut lesbar ===== */
.btn, button, .cta-foto-button{
  border-radius:999px;
}

/* ===== GLOBAL: Floating Call Button (falls irgendwo fehlt) ===== */
.call-button{
  background:linear-gradient(135deg,#1c3d5a,#2a8cff) !important;
  color:#fff !important;
  font-weight:900 !important;
}
/* ==============================
   NCC – MODERN HEADER (KOPFBEREICH)
   ============================== */

/* Header „modern glass“ + oben bleiben */
.page-header{
  position: sticky;
  top: 0;
  z-index: 10000;
}

/* Navbar/Wrapper modernisieren */
.page-header .navbar#slide-nav{
  background: rgba(15,19,26,.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
}

/* Alte Deko-Elemente (Dreiecke/Shapes) entfernen, falls vorhanden */
.page-header .header-row:before,
.page-header .header-row:after{
  content: none !important;
  display: none !important;
}

/* Container etwas „premium“ */
.page-header .navbar#slide-nav .container{
  max-width: 1200px;
}

/* Logo + rechte Infos sauber ausrichten */
.page-header .header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 10px;
}

.page-header .logo img{
  max-height: 54px !important;
  height: auto !important;
  width: auto !important;
}

/* rechter Bereich */
.page-header .header-right{
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* Öffnungszeiten als „Pill“ */
.page-header .header-right-top .address{
  font-weight: 900;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.page-header .header-right-top .custom-color{
  color: #ffc107 !important;
}

/* Telefonbereich modern: Text klein, Nummer als Button */
.page-header .header-right-bottom .header-phone{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.page-header .header-right-bottom .header-phone .text{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .45px;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-right: 2px;
}

.page-header .header-right-bottom .header-phone .phone-number{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffc107;
  color: #111 !important;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: .18s ease;
  white-space: nowrap;
}
.page-header .header-right-bottom .header-phone .phone-number:hover{
  background: #ffde59;
  transform: translateY(-1px);
}
.page-header .header-right-bottom .header-phone .phone-number .code{
  color: inherit !important; /* falls vorher extra gefärbt */
}

/* Hamburger Button modern */
.page-header .navbar-toggle{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
}
.page-header .navbar-toggle:hover{
  background: rgba(255,255,255,.12);
}

/* Menü-Zeile */
#slidemenu{
  margin-top: 8px;
  padding: 8px 0 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Hauptmenü als moderne „Pills“ */
#slidemenu .nav.navbar-nav > li > a{
  padding: 10px 12px;
  border-radius: 12px;
  transition: .18s ease;
}
#slidemenu .nav.navbar-nav > li > a span{
  color: rgba(255,255,255,.86);
  font-weight: 900;
}
#slidemenu .nav.navbar-nav > li > a:hover{
  background: rgba(255,255,255,.06);
}
#slidemenu .nav.navbar-nav > li.active > a{
  background: rgba(255,193,7,.12);
  border: 1px solid rgba(255,193,7,.25);
}
#slidemenu .nav.navbar-nav > li.active > a span{
  color: #ffc107;
}

/* Suche moderner */
#slidemenu .search-container{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
#slidemenu .search-container input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  outline: none;
}
#slidemenu .search-container input::placeholder{
  color: rgba(255,255,255,.55);
}
#slidemenu .search-container a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
#slidemenu .search-container a.button:hover{
  background: rgba(255,255,255,.12);
}

/* Dropdowns wie „Cards“ */
.dropdown-menu{
  background: rgba(20,27,36,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.45) !important;
}
.dropdown-menu > li > a{
  color: rgba(255,255,255,.90) !important;
  font-weight: 800;
  padding: 10px 12px !important;
  border-radius: 10px;
}
.dropdown-menu > li > a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 2. Ebene (dropdown-menu1) modern */
.dropdown-submenu .dropdown-menu1{
  background: rgba(20,27,36,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 34px rgba(0,0,0,.45);
}
.dropdown-submenu .dropdown-menu1 li a{
  color: rgba(255,255,255,.90) !important;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 10px;
}
.dropdown-submenu .dropdown-menu1 li a:hover{
  background: rgba(255,255,255,.08);
}

/* Mobile: oben kompakter */
@media(max-width:991px){
  .page-header .header-right-top{display:none;}
  .page-header .header-phone .text{display:none;}
  #slidemenu .col-md-3{display:none;} /* Suche mobil ausblenden (optional) */
  #slidemenu{border-top:none; margin-top:0; padding:0;}
}
/* =====================================================
   NCC HEADER FIX (Startseite + Unterseiten einheitlich)
   - "MACHEN SIE" kaputt -> ausblenden
   - Suche komplett weg
   - Menütexte überall gut lesbar (auch Startseite)
   - Streifen/Trennlinien überall gleich (nicht dick/dünn)
   ===================================================== */

/* 1) Das kaputte "MACHEN / SIE" (Span .text) sauber entfernen */
.page-header .header-phone .text,
.page-header .header-right-bottom .text{
  display:none !important;
}

/* 2) Suche komplett entfernen (Suchfeld + Lupe) */
.page-header #slidemenu .search-container,
.page-header #slidemenu .search-container *{
  display:none !important;
}

/* Wenn die Suche in einer Bootstrap-Spalte sitzt: ganze Spalte ausblenden */
.page-header #slidemenu .col-md-3{
  display:none !important;
}

/* Menü-Spalte dann auf volle Breite ziehen (sonst bleibt rechts "leer") */
.page-header #slidemenu .col-md-9{
  width:100% !important;
  float:none !important;
}

/* 3) Menütexte überall hell/lesbar (Startseite war zu dunkel) */
.page-header #slidemenu .nav.navbar-nav > li > a,
.page-header #slidemenu .nav.navbar-nav > li > a span{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
}

/* Hover: leichte Fläche, modern */
.page-header #slidemenu .nav.navbar-nav > li > a:hover{
  background: rgba(255,255,255,.06) !important;
  border-radius: 12px;
}

/* Aktiv: gelb + leichter Rahmen */
.page-header #slidemenu .nav.navbar-nav > li.active > a{
  background: rgba(255,193,7,.12) !important;
  border: 1px solid rgba(255,193,7,.25) !important;
  border-radius: 12px;
}
.page-header #slidemenu .nav.navbar-nav > li.active > a span{
  color: var(--brand, #ffc107) !important;
}

/* 4) Header-/Menü-Hintergrund & Streifen einheitlich (dick/dünn fix) */
.page-header .navbar#slide-nav{
  background: rgba(15,19,26,.90) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

/* Menüleiste: gleiche Trennlinien auf allen Seiten */
.page-header #slidemenu{
  background: rgba(15,19,26,.78) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* Optional: Dropdown-Menü ebenfalls modern & gut lesbar */
.page-header .dropdown-menu{
  background: rgba(20,27,36,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.45) !important;
}
.page-header .dropdown-menu > li > a{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
.page-header .dropdown-menu > li > a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Telefonlink (falls vorhanden) als Button (wirkt moderner) */
.page-header a.phone-number{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background: var(--brand, #ffc107) !important;
  color:#111 !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  text-decoration:none !important;
}
.page-header a.phone-number:hover{
  background: var(--brand2, #ffde59) !important;
  transform: translateY(-1px);
}
/* ==========================================================
   NCC PREMIUM HEADER (GLOBAL) – einheitlich für ALLE Seiten
   ========================================================== */

/* 0) Brand-Variablen global machen (Startseite hatte sie inline) */
:root{
  --ncc-bg:#0f131a;
  --ncc-surface:#141b24;
  --ncc-surface2:#1a2330;
  --ncc-text:#eaeaea;
  --ncc-muted:#bfc7d5;
  --ncc-brand:#ffc107;
  --ncc-brand2:#ffde59;
  --ncc-line:rgba(255,255,255,.10);
  --ncc-shadow:0 18px 44px rgba(0,0,0,.42);

  /* Kompatibilität zu deinen Startseiten-Variablen */
  --bg:var(--ncc-bg);
  --surface:var(--ncc-surface);
  --surface2:var(--ncc-surface2);
  --text:var(--ncc-text);
  --muted:var(--ncc-muted);
  --brand:var(--ncc-brand);
  --brand2:var(--ncc-brand2);
  --line:var(--ncc-line);
  --shadow:var(--ncc-shadow);
}

/* 1) Header sticky + Premium-Glas */
.page-header{
  position: sticky;
  top: 0;
  z-index: 10000;
}
.page-header .navbar#slide-nav{
  position: relative;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(20,27,36,.92) 0%, rgba(15,19,26,.78) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

/* Goldene „Premium Linie“ unten am Header */
.page-header .navbar#slide-nav:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,193,7,.88) 50%, transparent 100%);
  opacity:.95;
  pointer-events:none;
}

/* 2) Header-Layout (oben) sauber & modern */
.page-header .header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0 10px;
}

.page-header .logo a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none !important;
}

.page-header .logo img{
  max-height:56px !important;
  height:auto !important;
  width:auto !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* 3) Öffnungszeiten als Pill – alte Dreiecke weg */
.page-header .header-right-top .address{
  font-weight: 900;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.page-header .header-right-top .address:before,
.page-header .header-right-top .address:after{
  content:none !important;
  display:none !important;
}
.page-header .header-right-top .custom-color{
  color: var(--brand) !important;
}

/* 4) Der kaputte Satz „Machen Sie…“ (oder alles was umbrechen kann) weg */
.page-header .header-phone .text,
.page-header .header-right-bottom .text{
  display:none !important;
}

/* 5) Telefon IMMER als Premium-Button (egal ob a.phone-number oder tel:-Link) */
.page-header .header-right a[href^="tel"],
.page-header a.phone-number,
.page-header .phone-number{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background: var(--brand) !important;
  color:#111 !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  text-decoration:none !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.28);
  transition: .18s ease;
  white-space: nowrap;
}
.page-header .header-right a[href^="tel"]:hover,
.page-header a.phone-number:hover{
  background: var(--brand2) !important;
  transform: translateY(-1px);
}

/* 6) „TERMIN“ (falls vorhanden) automatisch als Ghost-Button stylen */
.page-header .header-right a:not([href^="tel"]):not(.phone-number):not(.navbar-toggle){
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none !important;
  transition:.18s ease;
  white-space: nowrap;
}
.page-header .header-right a:not([href^="tel"]):not(.phone-number):not(.navbar-toggle):hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* 7) Hamburger Button modern */
.page-header .navbar-toggle{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
.page-header .navbar-toggle:hover{
  background: rgba(255,255,255,.12) !important;
}

/* 8) Suche komplett weg (macht den dicken „Balken“ oft mit) */
.page-header #slidemenu .search-container,
.page-header #slidemenu .search-container *,
.page-header #slidemenu .col-md-3{
  display:none !important;
}
.page-header #slidemenu .col-md-9{
  width:100% !important;
  float:none !important;
}

/* 9) Navigation (Menü) modern & überall gut lesbar */
.page-header #slidemenu{
  margin-top: 8px;
  padding: 8px 0 10px;
  background: rgba(15,19,26,.62) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.page-header #slidemenu .nav.navbar-nav > li > a{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  transition: .18s ease;
}
.page-header #slidemenu .nav.navbar-nav > li > a span{
  color: rgba(255,255,255,.90) !important;
  font-weight: 900 !important;
}
.page-header #slidemenu .nav.navbar-nav > li > a:hover{
  background: rgba(255,255,255,.06) !important;
}

.page-header #slidemenu .nav.navbar-nav > li.active > a{
  background: rgba(255,193,7,.12) !important;
  border: 1px solid rgba(255,193,7,.25) !important;
}
.page-header #slidemenu .nav.navbar-nav > li.active > a span{
  color: var(--brand) !important;
}

/* 10) Dropdowns als Premium-Card */
.page-header .dropdown-menu{
  background: rgba(20,27,36,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.45) !important;
}
.page-header .dropdown-menu > li > a{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
.page-header .dropdown-menu > li > a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 11) Mobile: oben kompakt */
@media(max-width:991px){
  .page-header .header-right-top{display:none !important;}
  .page-header .header-row{padding: 10px 0 8px;}
  .page-header #slidemenu{margin-top:0; border-top:none;}
}
<link href="css/plugins/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css?v=3" rel="stylesheet">

<!-- GANZ AM ENDE -->
<link rel="stylesheet" href="/css/ncc-fix.css?v=20260218">
/* =========================================
   MOBILE FIX: Safari & Chrome gleich
   - Foto senden (Kamera) immer sichtbar
   - Anfahrt als Button/Pill
   - Call-Button wie im 3. Bild + Safe-Area
   ========================================= */

/* 1) NCC Buttons immer stabil (auch wenn Variablen mal nicht greifen) */
.ncc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none !important;
  -webkit-tap-highlight-color: transparent;
}

.ncc-btn.primary{
  background:#ffc107 !important;                 /* Fallback */
  background:var(--brand, #ffc107) !important;   /* Brand */
  color:#111 !important;
  box-shadow:0 10px 20px rgba(0,0,0,.30);
}
.ncc-btn.primary:hover{
  background:#ffde59 !important;
  background:var(--brand2, #ffde59) !important;
  transform: translateY(-1px);
}

.ncc-btn.ghost{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* 2) Startseite: Foto senden & Anfahrt auf Mobile wie im 3. Bild */
@media (max-width: 768px){

  /* Foto senden Button im rechten Kasten: volle Breite & sichtbar */
  .home-hero .hero-mini-card .mini-cta .ncc-btn.primary{
    width:100%;
  }

  /* Kamera-Text erzwingen (auch wenn im HTML noch ➕ steht) */
  .home-hero .hero-mini-card .mini-cta a[href*="aktion=fotos"]{
    font-size:0; /* Text ausblenden */
  }
  .home-hero .hero-mini-card .mini-cta a[href*="aktion=fotos"]::before{
    content:"📸 Foto senden";
    font-size:14px;
    font-weight:900;
  }

  /* Anfahrt-Link als Pill-Button stylen + Text kurz machen */
  .home-hero .hero-mini-card a[href*="anfahrt"]{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin-top:10px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    color:#fff !important;
    text-decoration:none !important;
    font-weight:900;
  }
  .home-hero .hero-mini-card a[href*="anfahrt"]{
    font-size:0; /* langen Text ausblenden */
  }
  .home-hero .hero-mini-card a[href*="anfahrt"]::before{
    content:"📍 Anfahrt";
    font-size:14px;
    font-weight:900;
  }
}

/* 3) Call Button unten: wie im 3. Bild (Gold) + iPhone Safe-Area */
.call-button{
  right:16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  background: var(--brand, #ffc107) !important;
  color:#111 !important;
  box-shadow:0 12px 24px rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.call-button:hover{
  background: var(--brand2, #ffde59) !important;
}
/* =========================================================
   MOBILE PREMIUM HEADER (iPhone Safari + Chrome gleich)
   - Header wird kompakt (kein leerer Block oben)
   - Logo links, Burger rechts
   - Termin + Telefon als saubere Buttons darunter
   - Menü als Offcanvas (nimmt keinen Platz weg)
   ========================================================= */

@media (max-width: 768px){

  /* Header insgesamt kompakter */
  .page-header .navbar#slide-nav{
    padding: 0 !important;
    min-height: 0 !important;
  }
  .page-header .navbar#slide-nav::before,
  .page-header .navbar#slide-nav::after{
    content: none !important;
    display: none !important;
  }
  .page-header .navbar#slide-nav .container{
    padding: 10px 14px !important;
  }

  /* Header-Row sauber (keine riesigen Abstände) */
  .page-header .header-row{
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo: größer + sauber */
  .page-header .logo{
    margin: 0 !important;
    padding: 0 !important;
  }
  .page-header .logo img{
    max-height: 46px !important;
  }

  /* Burger immer oben rechts */
  .page-header .navbar-toggle{
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 10002 !important;

    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }

  /* Öffnungszeiten-Text im Header auf Mobile ausblenden (macht sonst Höhe) */
  .page-header .header-right-top{
    display: none !important;
  }

  /* CTA-Zeile unter dem Logo (Termin + Telefon) */
  .page-header .header-right{
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }
  .page-header .header-right-bottom{
    display: block !important;
  }

  .page-header .header-phone{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* Termin-Button (alle Nicht-Tel Links im Header) */
  .page-header .header-right a:not([href^="tel"]):not(.navbar-toggle){
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.92) !important;

    font-weight: 900 !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

   
/* =====================================================
   HARD FIX: iOS Mobile Header erzwingen (ENDLÖSUNG)
   ===================================================== */

@media (max-width: 768px){

  /* Header darf NICHT wachsen */
  .page-header,
  .page-header .navbar,
  .page-header .navbar#slide-nav,
  .page-header .navbar#slide-nav .container{
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    overflow: hidden !important;
  }

  /* Alles was darunter Platz macht: ABSCHNEIDEN */
  .page-header *{
    max-height: 64px !important;
  }

  /* Logo korrekt links */
  .page-header .logo{
    position: absolute !important;
    left: 14px !important;
    top: 10px !important;
  }
  .page-header .logo img{
    max-height: 40px !important;
  }

  /* Burger IM Header, nicht darunter */
  .page-header .navbar-toggle{
    position: absolute !important;
    right: 14px !important;
    top: 10px !important;
    z-index: 10005 !important;
  }

  /* ALLE Header-Zusatzbereiche auf Mobile komplett aus */
  .page-header .header-right,
  .page-header .header-right-top,
  .page-header .header-right-bottom,
  .page-header .header-phone{
    display: none !important;
  }

  /* Menü ist IMMER Overlay – NIE im Layout */
  @media (max-width: 768px){

  /* Burger: GELB + klar sichtbar */
  .mobile-burger{
    background: #ffc107 !important;
    color: #111 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  }

  .mobile-burger:active{
    transform: scale(0.96);
  }
}

  /* Darkout */
  .darkout-menu{
    display: none !important;
  }
  body.menu-open .darkout-menu{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 10000 !important;
  }
}
/* =====================================================
   FINAL MOBILE BAR – NUKLEARE LÖSUNG (100% stabil)
   ===================================================== */

@media (max-width: 768px){

  /* Alten Header auf Mobile komplett ausblenden */
  .page-header{
    display:none !important;
  }

  /* Platz nach oben freimachen */
  body{
    padding-top:64px !important;
  }

  /* Neue Mobile-Bar */
  body::before{
    content:"";
    position:fixed;
    top:0; left:0; right:0;
    height:64px;
    background: rgba(15,19,26,.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom:1px solid rgba(255,255,255,.12);
    z-index:99999;
  }

  /* Logo */
  body::after{
    content:"";
    position:fixed;
    top:12px; left:14px;
    width:120px; height:40px;
    background:url('/images/small_logo_Nano_Car.png') no-repeat left center;
    background-size:contain;
    z-index:100000;
  }

  /* Call Button */
  .mobile-call{
    position:fixed;
    top:12px;
    right:14px;
    height:40px;
    padding:0 14px;
    border-radius:999px;
    background:#ffc107;
    color:#111;
    font-weight:900;
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    z-index:100001;
    box-shadow:0 10px 20px rgba(0,0,0,.35);
  }

  /* Burger */
  .mobile-burger{
    position:fixed;
    top:12px;
    right:170px;
    width:40px;
    height:40px;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    z-index:100001;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
  }
}
/* Call Button unten – blau & eleganter */
.call-button{
  background: linear-gradient(135deg, #1c3d5a, #2a8cff) !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.35) !important;
}

.call-button:hover{
  opacity: 0.95;
}
/* =====================================
   ALTEN BURGER KOMPLETT AUSBLENDEN
   ===================================== */

@media (max-width: 768px){

  /* Bootstrap / Template Burger */
  .navbar-toggle,
  .navbar-toggle *,
  .icon-lines-menu,
  .icon-lines-menu *,
  .page-header .navbar-toggle,
  .page-header .navbar-toggle i{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
/* =====================================
   NEUER MOBILE BURGER – EINZIGER SICHTBARER
   ===================================== */

@media (max-width: 768px){

  .mobile-burger{
    position: fixed !important;
    top: 12px !important;
    right: 14px !important;

    width: 44px !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #ffc107 !important;
    color: #111 !important;

    font-size: 24px !important;
    font-weight: 900 !important;

    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.35) !important;

    z-index: 100002 !important;
    cursor: pointer !important;
  }

  .mobile-burger::before{
    content: "☰";
    color: #111 !important;
  }
}
/* Kamera / Foto senden IMMER sichtbar auf Mobile */
@media (max-width: 768px){
  a[href*="foto"],
  a[href*="Foto"],
  .foto-senden,
  .send-photo,
  .ncc-btn.primary{
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* Original Burger gelb machen */
@media (max-width: 768px){
  .navbar-toggle,
  .navbar-toggle i,
  .icon-lines-menu{
    background: #ffc107 !important;
    color: #111 !important;
    border-radius: 10px !important;
  }
}
 /* MOBILE: Kamera / Foto senden IMMER sichtbar */
@media (max-width: 768px){

  /* Button selbst */
  a[href*="foto"],
  a[href*="Foto"],
  .ncc-btn.primary,
  .foto-senden,
  .send-photo{
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    background: #ffc107 !important;
    color: #111 !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
  }

  /* Falls Text/Icon per ::before kommt */
  a[href*="foto"]::before{
    content: "📸 Foto senden";
    margin-right: 6px;
  }
}
/* MOBILE: Top-bewertet Bild (Frau) erzwingen */
@media (max-width: 768px){

  .top-bewertet img,
  .top-rated img,
  .mini-top img{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 50% !important;

    background: #fff !important;
  }
  }
/* MOBILE: Foto-senden Button im "Top bewertet" Kasten erzwingen */
@media (max-width: 768px){

  /* der Bereich wo der Button drin ist */
  .hero-mini-card .mini-cta{
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }

  /* Button: volle Sichtbarkeit + gold */
  .hero-mini-card .mini-cta a,
  .hero-mini-card .mini-cta .ncc-btn{
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;

    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;

    background: #ffc107 !important;
    color: #111 !important;
    font-weight: 900 !important;

    padding: 12px 16px !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.35) !important;
  }

  /* Text im Button sicher sichtbar */
  .hero-mini-card .mini-cta a{
    font-size: 0 !important;
  }
  .hero-mini-card .mini-cta a::before{
    content: "📸 Foto senden";
    font-size: 14px !important;
    font-weight: 900 !important;
  }
}
/* Mobile: Leasing-Check + Aufbereitung sauber untereinander */
@media (max-width: 768px){

  /* Trust-Row: untereinander statt nebeneinander */
  .trust-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Jede Pill volle Breite + schöner Text */
  .trust-row .pill{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* Optional: lange Wörter besser umbrechen */
  .trust-row .pill strong{
    word-break: break-word !important;
  }
}
/* =========================================================
   THEME: LIGHT (weiß + dunkelblau)
   Aktivieren: <body class="ncc-light">
   ========================================================= */

:root{
  --ncc-bg: #f6f8fb;           /* Seitenhintergrund (leichtes Off-White) */
  --ncc-card: #ffffff;         /* Karten */
  --ncc-text: #0b1220;         /* Haupttext */
  --ncc-muted: #445066;        /* Nebentext */
  --ncc-border: rgba(15,19,26,.14);
  --ncc-blue: #123a8a;         /* Dunkelblau (Brand) */
  --ncc-blue-2: #1e5eff;       /* Hover/Highlight */
  --ncc-shadow: 0 12px 30px rgba(15,19,26,.10);
}

/* Grundlayout */
body.ncc-light{
  background: var(--ncc-bg) !important;
  color: var(--ncc-text) !important;
}

body.ncc-light p,
body.ncc-light li,
body.ncc-light small,
body.ncc-light .text-muted{
  color: var(--ncc-muted) !important;
}

body.ncc-light h1,
body.ncc-light h2,
body.ncc-light h3,
body.ncc-light h4,
body.ncc-light h5,
body.ncc-light h6{
  color: var(--ncc-text) !important;
}

body.ncc-light a{
  color: var(--ncc-blue) !important;
}
body.ncc-light a:hover{
  color: var(--ncc-blue-2) !important;
}

/* Header / Navigation (Bootstrap + allgemein) */
body.ncc-light header,
body.ncc-light .header,
body.ncc-light .navbar,
body.ncc-light .navbar-default,
body.ncc-light .page-header,
body.ncc-light #slidemenu{
  background: var(--ncc-card) !important;
  border-bottom: 1px solid var(--ncc-border) !important;
}

body.ncc-light .navbar-nav > li > a{
  color: var(--ncc-text) !important;
}
body.ncc-light .navbar-nav > li > a:hover,
body.ncc-light .navbar-nav > .active > a{
  color: var(--ncc-blue) !important;
}

/* Karten/Boxen (damit es “Premium” wirkt) */
body.ncc-light .card,
body.ncc-light .panel,
body.ncc-light .service-box,
body.ncc-light .service-card,
body.ncc-light .glass,
body.ncc-light .box,
body.ncc-light .tile,
body.ncc-light .feature,
body.ncc-light .feature-pill{
  background: var(--ncc-card) !important;
  border: 1px solid var(--ncc-border) !important;
  box-shadow: var(--ncc-shadow) !important;
}

/* Buttons / Akzent */
body.ncc-light .btn,
body.ncc-light .btn-primary,
body.ncc-light button,
body.ncc-light input[type="submit"],
body.ncc-light .mobile-call,
body.ncc-light .mobile-burger{
  background: var(--ncc-blue) !important;
  border-color: var(--ncc-blue) !important;
  color: #fff !important;
}

body.ncc-light .btn:hover,
body.ncc-light .btn-primary:hover,
body.ncc-light button:hover,
body.ncc-light input[type="submit"]:hover,
body.ncc-light .mobile-call:hover,
body.ncc-light .mobile-burger:hover{
  background: var(--ncc-blue-2) !important;
  border-color: var(--ncc-blue-2) !important;
}

/* Gelbe Akzente “einsammeln” (falls irgendwo gelb bleibt) */
body.ncc-light .accent,
body.ncc-light .highlight,
body.ncc-light .badge,
body.ncc-light .tag{
  background: var(--ncc-blue) !important;
  color: #fff !important;
}

/* Footer: hell lassen (wenn du willst) */
body.ncc-light footer,
body.ncc-light .footer{
  background: var(--ncc-card) !important;
  border-top: 1px solid var(--ncc-border) !important;
  color: var(--ncc-muted) !important;
}  
/* =========================================================
   NCC PREMIUM LIGHT THEME (Off-White + Dark Blue)
   Aktivieren pro Seite: <body class="ncc-light">
   ========================================================= */

:root{
  --ncc-bg: #f6f8fb;              /* Off-White Hintergrund */
  --ncc-card: #ffffff;            /* Karten */
  --ncc-text: #0b1220;            /* Text (fast schwarz) */
  --ncc-muted: #46546a;           /* Nebentext */
  --ncc-border: rgba(15,19,26,.14);
  --ncc-shadow: 0 14px 34px rgba(15,19,26,.10);

  --ncc-blue: #123a8a;            /* Haupt-Akzent: Dunkelblau */
  --ncc-blue-2: #1e5eff;          /* Hover/Highlight */
}

/* Basis */
body.ncc-light{
  background: var(--ncc-bg) !important;
  color: var(--ncc-text) !important;
}

body.ncc-light p,
body.ncc-light li,
body.ncc-light small,
body.ncc-light .text-muted{
  color: var(--ncc-muted) !important;
}

body.ncc-light h1,
body.ncc-light h2,
body.ncc-light h3,
body.ncc-light h4,
body.ncc-light h5,
body.ncc-light h6{
  color: var(--ncc-text) !important;
}

/* Links */
body.ncc-light a{ color: var(--ncc-blue) !important; }
body.ncc-light a:hover{ color: var(--ncc-blue-2) !important; }

/* Header / Navbar / Menübereiche (hell + clean) */
body.ncc-light header,
body.ncc-light .header,
body.ncc-light .navbar,
body.ncc-light .navbar-default,
body.ncc-light .page-header,
body.ncc-light #slidemenu{
  background: var(--ncc-card) !important;
  border-bottom: 1px solid var(--ncc-border) !important;
}

/* Nav-Links lesbar */
body.ncc-light .navbar-nav > li > a{
  color: var(--ncc-text) !important;
}
body.ncc-light .navbar-nav > li > a:hover,
body.ncc-light .navbar-nav > .active > a{
  color: var(--ncc-blue) !important;
}

/* Karten/Boxen: Premium Look */
body.ncc-light .card,
body.ncc-light .panel,
body.ncc-light .service-box,
body.ncc-light .service-card,
body.ncc-light .glass,
body.ncc-light .box,
body.ncc-light .tile,
body.ncc-light .feature{
  background: var(--ncc-card) !important;
  border: 1px solid var(--ncc-border) !important;
  box-shadow: var(--ncc-shadow) !important;
  border-radius: 16px !important;
}

/* Buttons: Blau statt Gelb */
body.ncc-light .btn,
body.ncc-light .btn-primary,
body.ncc-light button,
body.ncc-light input[type="submit"],
body.ncc-light .mobile-call,
body.ncc-light .mobile-burger{
  background: var(--ncc-blue) !important;
  border-color: var(--ncc-blue) !important;
  color: #fff !important;
}

body.ncc-light .btn:hover,
body.ncc-light .btn-primary:hover,
body.ncc-light button:hover,
body.ncc-light input[type="submit"]:hover,
body.ncc-light .mobile-call:hover,
body.ncc-light .mobile-burger:hover{
  background: var(--ncc-blue-2) !important;
  border-color: var(--ncc-blue-2) !important;
  color: #fff !important;
}

/* Burger Symbol sicher sichtbar (falls "☰" als Text drin ist) */
body.ncc-light .mobile-burger{
  color: #fff !important;
  font-weight: 800 !important;
}

/* Alles was noch gelb ist -> blau umstellen (Fallback) */
body.ncc-light .yellow,
body.ncc-light .bg-yellow,
body.ncc-light .badge-yellow,
body.ncc-light .btn-warning{
  background: var(--ncc-blue) !important;
  border-color: var(--ncc-blue) !important;
  color: #fff !important;
}

/* Footer hell */
body.ncc-light footer,
body.ncc-light .footer{
  background: var(--ncc-card) !important;
  border-top: 1px solid var(--ncc-border) !important;
  color: var(--ncc-muted) !important;
}
body.ncc-light .hero-pill{
  background: #fff !important;
  border: 1px solid rgba(15,19,26,.14) !important;
  color: #0b1220 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(15,19,26,.08) !important;
  margin: 10px 0 !important;
}  
/* =====================================================
   NCC LIGHT THEME (opt-in)
   Aktivieren mit: <body class="... ncc-light">
===================================================== */

body.ncc-light{
  --ncc-bg: #f6f7fb;                 /* Off-White */
  --ncc-surface: #ffffff;            /* Karten */
  --ncc-text: #0b1220;               /* fast schwarz */
  --ncc-muted: #475569;              /* grau */
  --ncc-border: rgba(15,23,42,.14);  /* border */
  --ncc-primary: #1d4ed8;            /* Blau (Primary) */
  --ncc-primary-dark: #1e40af;       /* Blau Hover */

  background: var(--ncc-bg) !important;
  color: var(--ncc-text) !important;
}

/* Text generell */
body.ncc-light h1,
body.ncc-light h2,
body.ncc-light h3,
body.ncc-light h4,
body.ncc-light h5,
body.ncc-light h6{
  color: var(--ncc-text) !important;
}

body.ncc-light p,
body.ncc-light span,
body.ncc-light li,
body.ncc-light small{
  color: var(--ncc-text) !important;
}

body.ncc-light .text-muted{
  color: var(--ncc-muted) !important;
}

/* Links */
body.ncc-light a{
  color: var(--ncc-primary) !important;
}
body.ncc-light a:hover{
  color: var(--ncc-primary-dark) !important;
}

/* Header / Navbar heller + clean */
body.ncc-light header,
body.ncc-light .page-header,
body.ncc-light .navbar,
body.ncc-light .navbar-default{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--ncc-border) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}

body.ncc-light .navbar a,
body.ncc-light .navbar-nav > li > a{
  color: var(--ncc-text) !important;
}

body.ncc-light .navbar a:hover,
body.ncc-light .navbar-nav > li > a:hover,
body.ncc-light .navbar-nav > .active > a{
  color: var(--ncc-primary) !important;
}

/* Karten/Boxen: statt "dark glass" -> helles Premium */
body.ncc-light .card,
body.ncc-light .panel,
body.ncc-light .glass,
body.ncc-light .glass-card,
body.ncc-light .ncc-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.10) !important;
}

/* Buttons: blau statt gelb */
body.ncc-light .btn-primary,
body.ncc-light .btn-warning,
body.ncc-light .btn-yellow,
body.ncc-light .mobile-call{
  background: var(--ncc-primary) !important;
  border-color: var(--ncc-primary) !important;
  color: #fff !important;
}

body.ncc-light .btn-primary:hover,
body.ncc-light .btn-warning:hover,
body.ncc-light .btn-yellow:hover,
body.ncc-light .mobile-call:hover{
  background: var(--ncc-primary-dark) !important;
  border-color: var(--ncc-primary-dark) !important;
}

/* Footer hell */
body.ncc-light footer,
body.ncc-light .footer,
body.ncc-light .copyright{
  background: #fff !important;
  border-top: 1px solid var(--ncc-border) !important;
  color: var(--ncc-text) !important;
}  
/* =========================================================
   NCC LIGHT THEME (aktiv bei: <body class="... ncc-light">)
   ========================================================= */

body.ncc-light{
  --ncc-bg: #f6f7fb;          /* off-white */
  --ncc-surface: #ffffff;     /* card background */
  --ncc-text: #0b1220;        /* fast schwarz */
  --ncc-muted: #475569;       /* grau */
  --ncc-border: rgba(15,23,42,.12);
  --ncc-accent: #1d4ed8;      /* premium blau */

  background: var(--ncc-bg) !important;
  color: var(--ncc-text) !important;
}

/* Basis-Schriftfarben */
body.ncc-light p,
body.ncc-light li,
body.ncc-light span,
body.ncc-light div{
  color: var(--ncc-text);
}

/* Überschriften */
body.ncc-light h1,
body.ncc-light h2,
body.ncc-light h3,
body.ncc-light h4,
body.ncc-light h5{
  color: var(--ncc-text) !important;
}

/* Links */
body.ncc-light a{
  color: var(--ncc-accent) !important;
}
body.ncc-light a:hover{
  filter: brightness(.92);
}

/* Header / Navigation heller machen */
body.ncc-light header,
body.ncc-light .page-header,
body.ncc-light .navbar,
body.ncc-light .header,
body.ncc-light .header-area{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--ncc-border) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(10px);
}

/* Nav-Links lesbar */
body.ncc-light .navbar a,
body.ncc-light .page-header a,
body.ncc-light header a{
  color: var(--ncc-text) !important;
}
body.ncc-light .navbar a:hover,
body.ncc-light .page-header a:hover,
body.ncc-light header a:hover{
  color: var(--ncc-accent) !important;
}

/* Cards / Boxen: statt „Glass dunkel“ -> helle Premium Cards */
body.ncc-light .card,
body.ncc-light .panel,
body.ncc-light .well,
body.ncc-light .glass,
body.ncc-light .feature,
body.ncc-light .service-card,
body.ncc-light .content-box{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--ncc-border) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.10) !important;
}

/* Buttons: Gelb -> Blau (auch Bootstrap warning als Notlösung) */
body.ncc-light .btn-primary,
body.ncc-light .btn-accent,
body.ncc-light .btn-warning,
body.ncc-light button.btn-warning,
body.ncc-light a.btn-warning{
  background: var(--ncc-accent) !important;
  border-color: var(--ncc-accent) !important;
  color: #fff !important;
}
body.ncc-light .btn-primary:hover,
body.ncc-light .btn-accent:hover,
body.ncc-light .btn-warning:hover{
  filter: brightness(.92);
}

/* Footer heller */
body.ncc-light footer,
body.ncc-light .footer,
body.ncc-light .copyright{
  background: #ffffff !important;
  border-top: 1px solid var(--ncc-border) !important;
  color: var(--ncc-muted) !important;
}  
/* =========================================
   NCC LIGHT THEME (Startseite & global)
   aktiv bei: body.ncc-light
   ========================================= */

body.ncc-light{
  --bg:#f6f7fb;                  /* off-white */
  --surface:#ffffff;
  --surface2:#ffffff;
  --text:#0b1220;                /* schwarz */
  --muted:#475569;
  --brand:#1d4ed8;               /* blau statt gelb */
  --brand2:#2563eb;
  --line:rgba(15,23,42,.12);
  --shadow:0 12px 32px rgba(15,23,42,.12);
}

/* Falls irgendwo noch dunkel festhängt */
body.ncc-light,
body.ncc-light #pageContent{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Hero in hell (deine Startseite) */
body.ncc-light .home-hero{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
}
body.ncc-light .home-hero::before{
  background:
    linear-gradient(90deg,
      rgba(246,247,251,.94) 0%,
      rgba(246,247,251,.84) 55%,
      rgba(246,247,251,.94) 100%
    ),
    url("/Nano_2352.jpg") center/cover no-repeat !important;
  filter: contrast(1.02) saturate(1.02) !important;
}

/* Texte, die du hart auf weiß gesetzt hast -> dunkel */
body.ncc-light .hero-h1,
body.ncc-light .sec-title{
  color: var(--text) !important;
  text-shadow: none !important;
}
body.ncc-light .hero-lead,
body.ncc-light .sec-sub{
  color: var(--muted) !important;
}

/* Pills & Cards hell */
body.ncc-light .pill,
body.ncc-light .hero-pill,
body.ncc-light .hero-mini-card,
body.ncc-light .leistung{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

/* Kacheln */
body.ncc-light .leistung h3{ color: var(--text) !important; }
body.ncc-light .leistung p{ color: var(--muted) !important; }

/* Buttons blau */
body.ncc-light .ncc-btn.primary{
  background: var(--brand) !important;
  color:#fff !important;
}
body.ncc-light .ncc-btn.ghost{
  background: rgba(255,255,255,.92) !important;
  border:1px solid var(--line) !important;
  color: var(--text) !important;
}

/* Dein inline gelber Link (style="color:#ffc107") -> blau erzwingen */
body.ncc-light .mini-lines a{
  color: var(--brand) !important;
}

/* Mini-Strich auf Kacheln: blau */
body.ncc-light .leistung .cap:before{
  background: var(--brand) !important;
  box-shadow: 0 8px 18px rgba(29,78,216,.18) !important;
}  
/* =====================================================
   STARTSEITE – LEISTUNGSKACHELN (FINAL & STABIL)
   NUR Startseite – überschreibt ALLES
===================================================== */

/* 🔧 EINSTELLUNGEN – HIER DARFST DU SPIELEN */
:root{
  --kachel-breite: 240px;   /* Kachel breiter/schmaler (280–380px testen) */
  --kachel-gap: 16px;       /* Abstand zwischen Kacheln */
  --kachel-top: 40px;       /* Kacheln weiter nach unten */
  --bild-hoehe: 90px;      /* Bildhöhe (kleiner = Kachel flacher) */
}

/* GRID – erzwingt 3 nebeneinander */
body.home-page .leistungen-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--kachel-gap) !important;

  max-width: calc(var(--kachel-breite) * 3 + 80px) !important;
  margin: var(--kachel-top) auto 0 !important;
  padding: 0 20px !important;
}

/* KACHEL */
body.home-page .leistung{
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* BILD – NICHT SCHMAL */
body.home-page .leistung img{
  width: 100% !important;
  height: var(--bild-hoehe) !important;
  object-fit: cover !important;
  display: block !important;
}

/* TEXT KOMPAKT */
body.home-page .leistung .cap{
  padding: 10px 12px !important;
}

body.home-page .leistung h3{
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* TEXT AUS (macht Kachel niedriger) */
body.home-page .leistung p{
  display: none !important;
}

/* =========================
   TABLET – 2 nebeneinander
========================= */
@media (max-width: 991px){
  body.home-page .leistungen-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 900px !important;
  }
}

/* =========================
   MOBILE – 2 nebeneinander
========================= */
@media (max-width: 600px){
  body.home-page .leistungen-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 14px !important;
  }

  body.home-page .leistung img{
    height: 120px !important;
  }
}
/* =====================================================
   🔥 FINAL OVERRIDE – STARTSEITE LEISTUNGSKACHELN
   WIRKT GARANTIERT
===================================================== */

/* Grid erzwingen */
body.home-page section.leistungen-bereich .leistungen-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 nebeneinander */
  gap: 14px !important;
  max-width: 900px !important;
  margin: 60px auto 0 !important;
  padding: 0 16px !important;
}

/* Kachel selbst */
body.home-page section.leistungen-bereich .leistung{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Bild → DAS macht sie klein */
body.home-page section.leistungen-bereich .leistung img{
  width: 100% !important;
  height: 100px !important;      /* 🔴 HIER Bildhöhe */
  object-fit: cover !important;
  display: block !important;
}

/* Textbereich flach */
body.home-page section.leistungen-bereich .leistung .cap{
  padding: 6px 8px !important;
}

/* Titel kleiner */
body.home-page section.leistungen-bereich .leistung h3{
  font-size: 13px !important;
  margin: 0 !important;
}

/* Beschreibung AUS */
body.home-page section.leistungen-bereich .leistung p{
  display: none !important;
}

/* Tablet */
@media (max-width: 991px){
  body.home-page section.leistungen-bereich .leistungen-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 700px !important;
  }
}

/* Mobile */
@media (max-width: 600px){
  body.home-page section.leistungen-bereich .leistungen-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}  
/* =========================================
   STARTSEITE – KACHELN NACH RECHTS SCHIEBEN
   ========================================= */

body.home-page .leistungen-grid{
  margin-left: 250px !important;   /* 👉 NACH RECHTS */
  margin-right: auto !important;
}
/* =====================================================
   STARTSEITE – BILDER IN KACHELN NACH RECHTS SCHIEBEN
   (ABSOLUTER FIX – ÜBERSCHREIBT ALLES)
   ===================================================== */

body.home-page .leistung img{
  transform: translateX(15px) !important; /* 👉 HIER nach rechts */
}  
/* =========================================
   STARTSEITE – HERO TITEL FEIN POSITIONIEREN
   Nur "Nano Car Cosmetic UG"
========================================= */

body.home-page .hero-h1{
  position: relative !important;

  left: 100px !important;     /* 👉 nach RECHTS (mehr = weiter rechts) */
  top: -18px !important;     /* 👉 nach OBEN (negativ = höher) */

  color: #123a8a !important; /* 👉 DUNKELBLAU */
}

/* Unterzeile passend mitnehmen */
body.home-page .hero-lead{
  position: relative !important;

  left: 40px !important;     /* gleich wie Titel */
  top: -12px !important;     /* etwas weniger nach oben */

  color: #2b3f63 !important;
} 
/* ===============================
   MODERN HEADER (SAFE OVERRIDE)
   =============================== */

:root{
  --hdr-bg: rgba(15,19,26,.78);
  --hdr-border: rgba(255,255,255,.10);
  --hdr-text: rgba(255,255,255,.92);
  --hdr-muted: rgba(255,255,255,.70);
  --hdr-accent: #2a8cff;
}

/* Sticky + Glass */
.page-header{
  position: sticky;
  top: 0;
  z-index: 5000;
  background: var(--hdr-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdr-border);
}

/* Bootstrap navbar clean */
.page-header .navbar{
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
}

/* Header Layout (Logo links / Info rechts) */
.page-header .header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
}

.page-header .logo img{
  max-height: 54px !important;
  width: auto;
  display:block;
}

/* Right side (Öffnungszeiten + Buttons) */
.page-header .header-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 6px;
}

.page-header .address{
  color: var(--hdr-muted) !important;
  font-weight: 700;
  letter-spacing: .2px;
}

.page-header .address .custom-color{
  color: var(--hdr-accent) !important;
  font-weight: 800;
}

/* Termin + Phone als moderne Pills */
.page-header .header-phone{
  display:flex;
  align-items:center;
  gap: 10px;
}

.page-header .header-phone a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none !important;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--hdr-text) !important;
  background: rgba(0,0,0,.22);
  transition: .18s ease;
}

.page-header .header-phone a:hover{
  transform: translateY(-1px);
  border-color: rgba(42,140,255,.45);
  background: rgba(0,0,0,.30);
}

/* Termin = Primary */
.page-header .header-phone a.ncc-termin{
  background: linear-gradient(135deg, rgba(42,140,255,.95), rgba(42,140,255,.65)) !important;
  border-color: rgba(42,140,255,.55) !important;
  color: #fff !important;
}

/* Phone = clean outline */
.page-header .header-phone a.phone-number{
  background: rgba(0,0,0,.18) !important;
}

/* Burger Button (mobile toggle) moderner */
.page-header .navbar-toggle{
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.22) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
.page-header .navbar-toggle:hover{
  border-color: rgba(42,140,255,.45) !important;
}

/* Menu Bar (links) */
#slidemenu{
  background: transparent !important;
}

/* Nav Links modern */
.page-header .navbar-nav > li > a{
  padding: 10px 10px !important;
  color: var(--hdr-text) !important;
  font-weight: 900;
  letter-spacing: .2px;
}

.page-header .navbar-nav > li > a span{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  transition: .18s ease;
}

/* Hover */
.page-header .navbar-nav > li > a:hover span{
  background: rgba(42,140,255,.14);
  color: #fff !important;
}

/* Active */
.page-header .navbar-nav > li.active > a span{
  background: rgba(42,140,255,.22);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  color: #fff !important;
}

/* Dropdown Menü modern */
.page-header .dropdown-menu,
.page-header .dropdown-menu1{
  background: rgba(15,19,26,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding: 8px !important;
}

.page-header .dropdown-menu li a,
.page-header .dropdown-menu1 li a{
  color: rgba(255,255,255,.92) !important;
  border-radius: 10px;
  padding: 10px 10px !important;
  font-weight: 800;
}

.page-header .dropdown-menu li a:hover,
.page-header .dropdown-menu1 li a:hover{
  background: rgba(42,140,255,.14) !important;
}

/* Mobile: Header nicht „gequetscht“ */
@media (max-width: 900px){
  .page-header .header-row{
    padding: 8px 0;
  }
  .page-header .header-right{
    align-items:flex-end;
  }
  .page-header .address{
    font-size: 13px;
  }
  .page-header .header-phone a{
    padding: 8px 10px;
    font-size: 13px;
  }
}  
/* =========================
   HEADER CLAIM (rechts statt Telefon/Zeiten)
   ========================= */

.page-header .header-claim{
  text-align: right;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-header .header-claim .claim-top{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;
  line-height: 1.15;
}

.page-header .header-claim .claim-bottom{
  margin-top: 3px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
}

/* Mobile: Claim ausblenden, damit nix überlappt – Burger bleibt! */
@media (max-width: 900px){
  .page-header .header-claim{ display:none !important; }
}