/* =========================================================
   NCC – CONTACT PAGE WOW (nur Kontaktseite)
   - Gelb raus, Blau rein
   - Premium Glass/Carbon Look
   - Mehr Luft / bessere Typo / moderne Buttons
   ========================================================= */

body.contact-page{
  --ncc-accent: #2a8cff;         /* Brand-Blau */
  --ncc-accent2:#1f3c88;         /* dunkleres Blau */
  --ncc-bg:     #0b0f16;
  --ncc-text:   #e9eef7;
  --ncc-muted:  rgba(233,238,247,.72);
  --ncc-border: rgba(255,255,255,.12);
  --ncc-glass:  rgba(255,255,255,.06);
  --ncc-glass2: rgba(255,255,255,.035);
}

/* Hintergrund sauber */
body.contact-page,
body.contact-page html{
  background: var(--ncc-bg) !important;
}

/* Damit deine alten Wrapper nicht “weiß” drüber malen */
body.contact-page #pageContent,
body.contact-page #pageContent > *{
  background: transparent !important;
}

/* -------------------------
   NAV / HEADER: Gelb → Blau
   ------------------------- */
body.contact-page .custom-color{
  color: var(--ncc-accent) !important;
}

/* Active Menüpunkt “Kontakt” und Hover blau statt gelb */
body.contact-page .navbar-nav > li.active > a,
body.contact-page .navbar-nav > li.active > a:hover,
body.contact-page .navbar-nav > li.active > a:focus{
  background: rgba(42,140,255,.16) !important;
  border-color: rgba(42,140,255,.55) !important;
  color: #fff !important;
}

body.contact-page .navbar-nav > li > a:hover{
  color: #fff !important;
}

/* -------------------------
   HERO: Premium
   ------------------------- */
body.contact-page .contact-hero{
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(42,140,255,.26), transparent 55%),
    radial-gradient(900px 560px at 110% 0%, rgba(31,60,136,.18), transparent 55%),
    linear-gradient(180deg,#0b0f16 0%, #0f1623 100%) !important;

  padding: 56px 20px 26px !important;
  color: var(--ncc-text) !important;
  margin-top: 0 !important;
}

body.contact-page .hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

body.contact-page .hero-title{
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  color: #fff !important;
}

body.contact-page .hero-title span{
  color: var(--ncc-accent) !important;
  text-shadow: 0 10px 30px rgba(42,140,255,.25);
}

/* Linie unter der Headline (blau statt gelb) */
body.contact-page .hero-title::after{
  content:"";
  display:block;
  width: 120px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ncc-accent), rgba(42,140,255,.18));
  box-shadow: 0 12px 26px rgba(42,140,255,.22);
}

/* -------------------------
   WRAP
   ------------------------- */
body.contact-page .contact-wrap{
  background: linear-gradient(180deg,#0b0f16 0%, #0b0f16 20%, #0f1623 100%) !important;
  padding: 18px 20px 80px !important;
}

body.contact-page .contact-wrap .container{
  max-width: 1200px;
  margin: 0 auto;
}

/* -------------------------
   CARD: Glass / Premium
   ------------------------- */
body.contact-page .contact-card{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;

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

  background: linear-gradient(180deg, var(--ncc-glass), var(--ncc-glass2)) !important;
  border: 1px solid var(--ncc-border) !important;

  box-shadow: 0 32px 90px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px);
}

@media (max-width: 980px){
  body.contact-page .contact-card{
    grid-template-columns: 1fr;
    padding: 20px !important;
  }
}

/* -------------------------
   Floating Inputs + Icons
   ------------------------- */
body.contact-page .fl-group{
  position: relative;
}

body.contact-page .fl-group > input,
body.contact-page .fl-group > textarea{
  width: 100%;
  background: rgba(11,15,22,.72) !important;
  color: var(--ncc-text) !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;

  padding: 16px 44px 16px 14px !important; /* Platz rechts für Icon */
  outline: none;

  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.contact-page .fl-group > input:hover,
body.contact-page .fl-group > textarea:hover{
  border-color: rgba(42,140,255,.35) !important;
}

body.contact-page .fl-group > input:focus,
body.contact-page .fl-group > textarea:focus{
  border-color: rgba(42,140,255,.85) !important;
  box-shadow: 0 0 0 4px rgba(42,140,255,.16) !important;
}

/* Label Farbe */
body.contact-page .fl-group > span{
  color: rgba(233,238,247,.65) !important;
}

/* Label aktiv */
body.contact-page .fl-group > input:focus + span,
body.contact-page .fl-group > input:not(:placeholder-shown) + span,
body.contact-page .fl-group > textarea:focus + span,
body.contact-page .fl-group > textarea:not(:placeholder-shown) + span{
  color: var(--ncc-accent) !important;
  background: rgba(11,15,22,.75) !important;
  border-radius: 999px;
}

/* Icons rechts (falls fi-icons geladen sind) */
body.contact-page .fl-group i{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(233,238,247,.35);
  pointer-events: none;
}

/* -------------------------
   Upload Bereich
   ------------------------- */
body.contact-page .upload-panel{
  background: rgba(11,15,22,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
}

/* Upload Buttons */
body.contact-page .ubtn{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--ncc-text) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

body.contact-page .ubtn:hover{
  border-color: rgba(42,140,255,.75) !important;
  box-shadow: 0 0 0 4px rgba(42,140,255,.14) !important;
  transform: translateY(-1px);
}

/* Dropzone */
body.contact-page .dropzone{
  border: 1.5px dashed rgba(255,255,255,.18) !important;
  background: rgba(11,15,22,.55) !important;
  color: rgba(233,238,247,.72) !important;
  border-radius: 14px !important;
}

body.contact-page .dropzone.drag{
  border-color: rgba(42,140,255,.85) !important;
  background: rgba(42,140,255,.10) !important;
}

/* Preview nicer */
body.contact-page .preview-grid img{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* -------------------------
   SEND Button: Blau + Premium
   ------------------------- */
body.contact-page .send-btn{
  background: linear-gradient(90deg, var(--ncc-accent), var(--ncc-accent2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;

  box-shadow: 0 14px 34px rgba(42,140,255,.24) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

body.contact-page .send-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(42,140,255,.30) !important;
  filter: saturate(1.05);
}

/* -------------------------
   Rechte Seite / Info Cards
   ------------------------- */
body.contact-page .info-card{
  background: rgba(11,15,22,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  color: var(--ncc-text) !important;
}

/* Inline styles (gelb) neutralisieren */
body.contact-page .info-card p,
body.contact-page .info-card p a{
  color: var(--ncc-accent) !important;
}

body.contact-page .ic-row{
  border-bottom: 1px dashed rgba(255,255,255,.10) !important;
}

body.contact-page .ic-row a{
  color: var(--ncc-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(42,140,255,.65) !important;
}

body.contact-page .ic-row a:hover{
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.65) !important;
}

/* USP Cards */
body.contact-page .usp{
  background: rgba(11,15,22,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
}

body.contact-page .usp i{
  color: var(--ncc-accent) !important;
}

/* -------------------------
   Toasts (Erfolg/Fehler) modern
   ------------------------- */
body.contact-page .toast-success{
  background: rgba(42,140,255,.12) !important;
  border: 1px solid rgba(42,140,255,.30) !important;
  color: #cfe6ff !important;
}

body.contact-page .toast-error{
  background: rgba(255,77,79,.12) !important;
  border: 1px solid rgba(255,77,79,.35) !important;
  color: #ffd7d7 !important;
}