/* ===========================================
   Zündler MM – Grayscale-Struktur + Pyronix-Töne
   =========================================== */

/* Farbvariablen (dunkel + feurige Akzente) */
:root{
  --bg: #0a0a0b;          /* Haupt-Hintergrund */
  --surface: #0f1012;     /* Sektionen dunkel */
  --surface-2: #131417;   /* Alternierende Fläche */
  --border: #24262b;      /* zarte Kanten */
  --text: #e6e7ea;        /* Haupttext */
  --muted: #a6aab2;       /* Sekundärtext */
  --primary: #ff4a1f;     /* Feuer-Orange */
  --primary-700: #d33a18; /* dunkleres Orange/Rot */
  --accent: #ff8a3c;      /* warme Akzentfarbe */
  --gold: #f5c26b;        /* goldener Schein */
  --shadow: rgba(0,0,0,0.6);
}

/* Grundlayout */
html, body{
  background: var(--bg);
  color: var(--text);
}
a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{
  color: var(--gold);
  text-decoration: underline;
}

/* Navbar */
#mainNav{
  background: linear-gradient(180deg, rgba(10,10,11,0.95), rgba(10,10,11,0.65));
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(4px);
}
.navbar-brand, .nav-link{
  color: var(--text) !important;
}
.nav-link:hover{
  color: var(--accent) !important;
}

/* Masthead mit Video */
#bg-video{
  object-fit: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: brightness(55%);
}
.masthead{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
.masthead::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%),
    radial-gradient(60% 40% at 50% 20%, rgba(255,74,31,0.18), transparent 60%);
  z-index: 1;
}
.masthead .text-center,
.masthead .container{
  position: relative;
  z-index: 2;
}

/* Sektionen nach Grayscale-Aufbau */
.about-section{
  padding: 6rem 0;
  background: var(--surface);
}
.projects-section{
  padding: 6rem 0;
  background: var(--surface-2);
}
.signup-section{
  padding: 6rem 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contact-section{
  padding: 6rem 0;
  background: var(--surface-2);
}

/* Typografie */
.text-white-50{ color: rgba(230,231,234,0.6) !important; }

/* Karten/Kacheln im Kontaktbereich */
.card{
  background: linear-gradient(180deg, #15171b, #101114);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px -10px var(--shadow);
}
.card .small{ color: var(--muted); }

/* Projektbilder */
img.rounded-3{
  border-radius: 0.75rem;
}
img.shadow{
  box-shadow: 0 10px 30px -12px var(--shadow);
}

/* Buttons – feurige Akzente */
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-700);
  --bs-btn-hover-border-color: var(--primary-700);
  --bs-btn-focus-shadow-rgb: 255,74,31;
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
  color: #111;
  border: none;
  box-shadow: 0 6px 20px -6px rgba(255,74,31,0.5);
}
.btn-primary:hover{
  box-shadow: 0 10px 28px -10px rgba(255,74,31,0.65);
}

/* Footer */
.footer{
  background: #0b0c0e;
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}

/* Helferklassen */
.small.text-muted{
  color: var(--muted) !important;
}

/* Responsive Feintuning */
@media (max-width: 991.98px){
  .masthead{ height: 85vh; }
  .projects-section, .about-section, .signup-section, .contact-section{
    padding: 4.5rem 0;
  }
}

/* Utility für Marken-Orange (nur Icon, kein Button-Background) */
.text-brand {
  color: var(--primary, #ff4a1f) !important;
}