/* ======================================================
   HOME MODERN (NUR STARTSEITE)
   - CTA als blaue Kacheln
   - Mobile: weniger Text (modern / nicht billig)
   - Desktop: Carbon bleibt + Text-Karte sitzt "im" Carbon
   ====================================================== */

body.home-page{
  --ncc-accent:#1c3d5a;
  --ncc-accent-border: rgba(28,61,90,.28);
  --ncc-accent-bg: rgba(28,61,90,.08);
}

/* Desktop: Carbon unten länger + Textbox reinziehen */
@media (min-width: 992px){
  body.home-page{ --ncc-carbon-extend: 260px; } /* wenn du mehr willst: 300/340 */

  body.home-page .ncc-carbon-hero{
    padding-bottom: calc(40px + var(--ncc-carbon-extend)) !important;
    margin-bottom: 0 !important;
  }

  body.home-page .ncc-hero-body{
    margin-top: calc(-1 * var(--ncc-carbon-extend)) !important;
  }
}

/* Hero-Textbox (Desktop + Mobile hübscher) */
body.home-page .ncc-hero-body{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.96)) !important;
  border: 1px solid rgba(15,19,26,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.14) !important;
  padding: 18px 18px 20px !important;

  width: min(1100px, calc(100% - 96px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 991px){
  body.home-page .ncc-hero-body{
    width: calc(100% - 32px) !important;
    margin: 0 16px 16px !important;
    padding: 16px 14px 18px !important;
    border-radius: 18px !important;
  }
}

/* Copy: Desktop lang / Mobile kurz */
body.home-page .ncc-copy-mobile{ display:none; }

@media (max-width: 991px){
  body.home-page .ncc-copy-desktop{ display:none; }
  body.home-page .ncc-copy-mobile{ display:block; }
}

/* Mobile: moderne "Chips" statt Textwand */
body.home-page .ncc-chip-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  list-style:none;
  padding:0;
  margin: 10px 0 8px;
}
body.home-page .ncc-chip-list li{
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(28,61,90,.22);
  font-weight: 800;
  font-size: 14px;
  color:#0f131a;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
body.home-page .ncc-mobile-note{
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,19,26,.78) !important;
}

/* Leasing-Check als schöner Pill-Button */
body.home-page .ncc-pill-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin: 12px auto 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(28,61,90,.25);
  box-shadow: 0 12px 22px rgba(0,0,0,.08);
  color: var(--ncc-accent) !important;
  font-weight: 900;
  text-decoration: none !important;
  transition: transform .18s ease, opacity .18s ease;
}
body.home-page .ncc-pill-link:hover{
  transform: translateY(-1px);
  opacity:.95;
}

/* CTA als blaue Kacheln */
body.home-page .ncc-cta-grid{
  margin: 14px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
}

@media (max-width: 991px){
  body.home-page .ncc-cta-grid{
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

body.home-page .ncc-cta-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .6em;

  padding: 14px 18px;
  border-radius: 16px;

  background: var(--ncc-accent-bg);
  border: 1px solid var(--ncc-accent-border);

  color: var(--ncc-accent) !important;
  font-weight: 900;
  text-decoration: none !important;

  box-shadow: 0 12px 22px rgba(0,0,0,.08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body.home-page .ncc-cta-card:hover{
  transform: translateY(-1px);
  background: rgba(28,61,90,.11);
  border-color: rgba(28,61,90,.38);
}
/* home-modern.css – NUR DESKTOP (PC) */
@media (min-width: 992px){

  body.home-page{
    --ncc-blue:#1c3d5a;
    --ncc-blue-border: rgba(28,61,90,.30);
    --ncc-carbon-extend: 260px; /* wenn du mehr brauchst: 300 / 340 */
  }

  /* Carbon-Block nach unten verlängern, damit die Intro-Box "drin" sitzt */
  body.home-page .ncc-carbon-hero{
    padding-bottom: calc(40px + var(--ncc-carbon-extend)) !important;
    margin-bottom: 0 !important;
    position: relative;
    overflow: visible !important;
  }

  /* Intro-Box in den Carbon-Bereich reinziehen + lesbar machen */
  body.home-page .ncc-hero-body{
    width: min(1100px, calc(100% - 96px)) !important;
    margin: calc(-1 * var(--ncc-carbon-extend)) auto 24px !important;

    padding: 22px 26px 26px !important;
    border-radius: 18px !important;

    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(15,19,26,.10) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;

    text-align: center !important;
    color: #0f131a !important;

    /* das killt dieses "vernebelte" */
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  body.home-page .ncc-hero-body *{
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  /* Links blau statt gelb */
  body.home-page .ncc-hero-body a,
  body.home-page .ncc-hero-body a.ncc-inline-link{
    color: var(--ncc-blue) !important;
    border-bottom-color: rgba(28,61,90,.25) !important;
  }

  /* HR-Linien im Desktop ausblenden (Mobile bleibt wie es ist) */
  body.home-page .ncc-cta-row hr{
    display: none !important;
  }

  /* CTA-Row als 2 moderne "Kacheln" */
  body.home-page .ncc-cta-row{
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    max-width: 760px !important;
  }

  body.home-page .ncc-cta-row a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .6em !important;

    padding: 14px 18px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-weight: 900 !important;

    background: linear-gradient(180deg, #ffffff, #f2f6ff) !important;
    border: 1px solid var(--ncc-blue-border) !important;
    color: var(--ncc-blue) !important;

    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }

  body.home-page .ncc-cta-row a:hover{
    transform: translateY(-1px);
    border-color: rgba(28,61,90,.45) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.14) !important;
  }
}
/* =========================================================
   home-modern.css  (NUR DESKTOP / PC)
   - Mobile bleibt komplett unberührt (Datei wird nur >=992px geladen)
   - Fix: Texte auf PC wieder dunkel (nicht blass)
   - Fix: Gelb überall -> Blau (Nav aktiv, Hover, Buttons, Linien)
   - CTA ("So finden Sie uns" / "Foto...") als moderne blaue Kacheln
   ========================================================= */

@media (min-width: 992px){

  body.home-page{
    --ncc-blue: #1c3d5a;
    --ncc-blue2:#2a8cff;
    --ncc-line: rgba(28,61,90,.35);
    --ncc-shadow: 0 18px 40px rgba(0,0,0,.12);
  }

  /* -----------------------------------------
     1) DESKTOP: Text war blass -> hart fixen
     ----------------------------------------- */
  body.home-page .ncc-hero-body,
  body.home-page .ncc-hero-body *{
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  body.home-page .ncc-hero-body{
    color: #0f131a !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(15,19,26,.12) !important;
    box-shadow: var(--ncc-shadow) !important;
    border-radius: 20px !important;
    padding: 24px 30px 22px !important;

    /* modern + sauber */
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 50 !important;
  }

  /* -----------------------------------------
     2) Carbon + Textblock: schöner Overlap (WOW)
     (Wenn dir der Überlapp zu viel/zu wenig ist:
      - 180px -> 140 oder 220)
     ----------------------------------------- */
  body.home-page{
    --ncc-overlap: 180px;
  }

  body.home-page .ncc-carbon-hero{
    margin-bottom: 0 !important;
    padding-bottom: calc(40px + var(--ncc-overlap)) !important;
  }

  body.home-page .ncc-hero-body{
    margin-top: calc(-1 * var(--ncc-overlap)) !important;
    margin-bottom: 26px !important;
  }

  /* -----------------------------------------
     3) Gelbe Linie unter "Herzlich willkommen" -> Blau
     ----------------------------------------- */
  body.home-page .ncc-intro-title{
    color:#0f131a !important;
  }

  body.home-page .ncc-intro-title::after{
    background: linear-gradient(90deg, var(--ncc-blue), var(--ncc-blue2)) !important;
    box-shadow: 0 10px 22px rgba(42,140,255,.22) !important;
  }

  /* -----------------------------------------
     4) Links in Blau (nicht gelb)
     ----------------------------------------- */
  body.home-page .ncc-hero-body a,
  body.home-page .ncc-hero-body a:visited{
    color: var(--ncc-blue) !important;
  }
  body.home-page .ncc-hero-body a:hover{
    color: var(--ncc-blue2) !important;
  }

  body.home-page .ncc-inline-link{
    border-bottom-color: rgba(28,61,90,.35) !important;
  }

  /* -----------------------------------------
     5) CTA Bereich: Abstände + "blaue Kacheln"
     Du nutzt aktuell .ncc-cta-row + hr + 2 Links
     -> Wir machen daraus moderne Cards und verstecken hr
     ----------------------------------------- */
  body.home-page .ncc-cta-row{
    margin-top: 16px !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;

    align-items: stretch !important;
    justify-content: center !important;
  }

  body.home-page .ncc-cta-row hr{
    display:none !important;
  }

  body.home-page .ncc-cta-row a,
  body.home-page a.ncc-cta,
  body.home-page a.ncc-btn--ghost{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding: 14px 16px !important;
    border-radius: 14px !important;

    background: rgba(28,61,90,.06) !important;
    border: 1px solid rgba(28,61,90,.35) !important;

    color: var(--ncc-blue) !important;
    font-weight: 900 !important;
    text-decoration:none !important;

    box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  body.home-page .ncc-cta-row a:hover,
  body.home-page a.ncc-cta:hover,
  body.home-page a.ncc-btn--ghost:hover{
    transform: translateY(-1px);
    background: rgba(28,61,90,.10) !important;
    border-color: rgba(28,61,90,.55) !important;
  }

  body.home-page .ncc-cta-row a:focus-visible,
  body.home-page a.ncc-cta:focus-visible,
  body.home-page a.ncc-btn--ghost:focus-visible{
    outline: 3px solid rgba(42,140,255,.35) !important;
    outline-offset: 3px !important;
  }

  /* -----------------------------------------
     6) Kacheln (Bilder): Hover/Click darf nicht gelb werden
     ----------------------------------------- */
  body.home-page .leistung a:focus,
  body.home-page .leistung a:active{
    outline: none !important;
  }

  body.home-page .leistung:hover,
  body.home-page .leistung:focus-within{
    border-color: rgba(28,61,90,.55) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.12) !important;
  }

  body.home-page .leistung .cap:before{
    background: linear-gradient(90deg, var(--ncc-blue), var(--ncc-blue2)) !important;
  }

  /* -----------------------------------------
     7) NAV: "Startseite" Active gelb -> blau
     ----------------------------------------- */
  body.home-page header.page-header .navbar-nav>li.active>a,
  body.home-page header.page-header .navbar-nav>li.active>a:focus,
  body.home-page header.page-header .navbar-nav>li.active>a:hover{
    background: var(--ncc-blue) !important;
    color: #fff !important;
  }

  body.home-page header.page-header .navbar-nav>li>a:hover,
  body.home-page header.page-header .navbar-nav>li>a:focus{
    background: rgba(28,61,90,.55) !important;
    color: #fff !important;
  }

  /* -----------------------------------------
     8) Call Button: Desktop gelb -> blau
     ----------------------------------------- */
  body.home-page a.call-button{
    background: linear-gradient(135deg, var(--ncc-blue), var(--ncc-blue2)) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
  }
}
/* =========================================
   DESKTOP: Text in der Welcome-Box immer dunkel
   (Mobile bleibt unberührt, weil nur >= 992px)
   ========================================= */
@media (min-width: 992px){

  /* Alles in der Welcome-Box: volle Deckkraft + schwarz */
  body.home-page .ncc-hero-body,
  body.home-page .ncc-hero-body *{
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  body.home-page .ncc-hero-body,
  body.home-page .ncc-hero-body p,
  body.home-page .ncc-hero-body .ncc-intro-text,
  body.home-page .ncc-hero-body .ncc-text-main,
  body.home-page .ncc-hero-body .ncc-text-sub,
  body.home-page .ncc-hero-body strong,
  body.home-page .ncc-hero-body span,
  body.home-page .ncc-hero-body li{
    color: #0f131a !important;
    -webkit-text-fill-color: #0f131a !important;
  }

  /* Links bleiben blau (nicht gelb), aber nicht blass */
  body.home-page .ncc-hero-body a,
  body.home-page .ncc-hero-body a:visited{
    color: #1c3d5a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #1c3d5a !important;
  }
}
/* =========================================================
   HOME MODERN – DESKTOP ONLY (PC)
   Startseite: alles schön + WOW
   WICHTIG: Mobile bleibt unberührt (min-width: 992px)
   ========================================================= */
@media (min-width: 992px){

  body.home-page{
    --ncc-blue: #1c3d5a;     /* dein dunkles Blau */
    --ncc-blue-2: #2a8cff;   /* Akzent-Blau */
    --ncc-text: #0f131a;

    /* Wie weit die weiße Box in den Carbon-Bereich „rein“ soll */
    --ncc-carbon-extend: 220px; /* wenn du mehr willst: 260 / 300 */
  }

  /* =========================================
     1) TEXT-PROBLEM: alles schwarz + volle Lesbarkeit
     ========================================= */
  body.home-page .ncc-hero-body,
  body.home-page .ncc-hero-body *{
    color: var(--ncc-text) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  /* =========================================
     2) Carbon länger + weiße Box „Premium Card“
     ========================================= */
  body.home-page .ncc-carbon-hero{
    padding-bottom: calc(40px + var(--ncc-carbon-extend)) !important;
    margin-bottom: 0 !important;
  }

  body.home-page .ncc-hero-body{
    width: min(1100px, calc(100% - 96px)) !important;
    margin: calc(-1 * var(--ncc-carbon-extend)) auto 26px !important;

    padding: 26px 30px 22px !important;
    text-align: center !important;

    background: linear-gradient(180deg,
      rgba(255,255,255,.99),
      rgba(246,249,255,.99)
    ) !important;

    border: 1px solid rgba(15,19,26,.12) !important;
    border-radius: 20px !important;

    box-shadow:
      0 18px 40px rgba(0,0,0,.16),
      0 1px 0 rgba(255,255,255,.65) inset !important;
  }

  /* Überschrift schärfer + moderner */
  body.home-page .ncc-intro-title{
    font-weight: 900 !important;
    letter-spacing: .2px !important;
  }

  /* Linie unter der Überschrift: NICHT gelb -> blau (modern) */
  body.home-page .ncc-intro-title::after{
    width: 110px !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--ncc-blue-2), var(--ncc-blue)) !important;
    box-shadow: 0 10px 18px rgba(42,140,255,.22) !important;
  }

  /* Wenn du die Linie komplett weg willst: */
  /* body.home-page .ncc-intro-title::after{ display:none !important; } */

  /* =========================================
     3) Links überall blau statt gelb
     ========================================= */
  body.home-page .ncc-hero-body a{
    color: var(--ncc-blue) !important;
  }

  /* =========================================
     4) CTA Bereich: Abstand + „Kacheln“ (nicht eng, nicht billig)
     ========================================= */
  /* Falls alte <hr> noch drin sind -> weg */
  body.home-page .ncc-hero-body hr{
    display: none !important;
  }

  /* Unterstützt beide Varianten:
     - .ncc-cta-row a   (deine alte Version)
     - .ncc-cta-grid / .ncc-cta-card (deine neuere Version)
  */

  body.home-page .ncc-cta-row{
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  body.home-page .ncc-cta-grid{
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  body.home-page .ncc-cta-row a,
  body.home-page .ncc-cta-card{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 14px 16px !important;
    border-radius: 16px !important;

    background: rgba(28,61,90,.06) !important;
    border: 1px solid rgba(28,61,90,.30) !important;

    color: var(--ncc-blue) !important;
    font-weight: 900 !important;
    text-decoration: none !important;

    box-shadow: 0 10px 20px rgba(0,0,0,.08) !important;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }

  body.home-page .ncc-cta-row a:hover,
  body.home-page .ncc-cta-card:hover{
    transform: translateY(-1px);
    background: rgba(28,61,90,.10) !important;
    border-color: rgba(28,61,90,.55) !important;
    box-shadow: 0 14px 26px rgba(0,0,0,.10) !important;
  }

  /* =========================================
     5) Kacheln unten: Hover/Klick NIE gelb -> blau
     ========================================= */
  body.home-page .leistungen-grid .leistung a:hover,
  body.home-page .leistungen-grid .leistung a:focus,
  body.home-page .leistungen-grid .leistung a:active{
    outline: none !important;
    text-decoration: none !important;
  }

  /* Schöner Fokus-Ring (blau) statt Theme-Gelb */
  body.home-page .leistungen-grid .leistung:focus-within{
    border-color: rgba(42,140,255,.70) !important;
    box-shadow:
      0 0 0 4px rgba(42,140,255,.18),
      0 12px 28px rgba(0,0,0,.12) !important;
  }

  /* Falls Theme eine gelbe „Markierung/Line“ in der Kachel setzt -> blau */
  body.home-page .leistung .cap:before{
    background: linear-gradient(90deg, var(--ncc-blue-2), var(--ncc-blue)) !important;
  }

  /* =========================================
     6) NAV oben: aktive Startseite nicht gelb -> blau (nur Startseite)
     ========================================= */
  body.home-page header.page-header .nav > li.active > a,
  body.home-page header.page-header .nav > li > a:hover,
  body.home-page header.page-header .nav > li > a:focus{
    background: rgba(42,140,255,.18) !important;
    color: #fff !important;
  }
  body.home-page header.page-header .nav > li.active > a span,
  body.home-page header.page-header .nav > li > a:hover span{
    color: #fff !important;
  }
}