/* =============================
   Root-Variablen (Schwarz-Weiß-Variante)
   ============================= */
:root {
  /* Neutralfarben */
  --color-text-base:      #111111;
  --color-text-light:     #222222;
  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F5F5F5;
  --color-bg-muted:       #E0E0E0;
  --color-border:         #CCCCCC;

  /* Header/Footer */
  --color-header-bg:      #111111;
  --color-header-text:    #FFFFFF;
  --color-footer-bg:      #222222;
  --color-footer-text:    #DDDDDD;

  /* Formular & Buttons */
  --color-input-bg:       #FFFFFF;
  --color-input-border:   #CCCCCC;
  --color-input-focus:    #111111;
  --color-btn-bg:         #111111;
  --color-btn-text:       #FFFFFF;
  --color-btn-hover-bg:   #333333;

  /* Feedback */
  --color-success:        #28A745;
  --color-error:          #DC3545;

  /* Typografie */
  --font-sans:            'Roboto', sans-serif;
  --font-heading:         'Poppins', sans-serif;
}

/* =============================
   Reset & Basis
   ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  font-size: 100%;
}
body {
  background-color: var(--color-bg-white);
  color: var(--color-text-base);
  line-height: 1.6;
}

/* =============================
   Container
   ============================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* =============================
   Typografie
   ============================= */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--color-text-base);
  margin-bottom: 1rem;
  line-height: 1.2;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--color-text-light);
}

/* =============================
   Buttons
   ============================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-icon {
  margin-right: 0.5rem;
}
.btn-primary {
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.btn-primary:hover {
  background-color: var(--color-btn-hover-bg);
}

/* =============================
   Header & Navigation
   ============================= */
header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
header .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
header .logo {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-header-text);
  text-decoration: none;
}
header .logo:hover {
  color: var(--color-btn-hover-bg);
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
nav ul li a {
  color: var(--color-header-text);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s;
}
nav ul li a:hover,
nav ul li a.active {
  background-color: var(--color-btn-hover-bg);
  color: var(--color-btn-text);
}
.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-header-text);
}

/* =============================
   Hero-Sektion
   ============================= */
/* ——— Hero zentrieren ——— */
/* 1. Hero-Section mit korrektem Bildpfad */
.hero-section {
  position: relative;
  height: 70vh;
  background: url('/assets/images/startseite2.jpg') center 20%/cover no-repeat;
  overflow: hidden;
}

/* Overlay für Kontrast */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

/* 2. Content absolut zentrieren */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  text-align: center;
  padding: 0 2rem;
  color: #fff;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: rgba(255,255,255,0.85);
}

/* =============================
   3. Buttons (Hero Section)
   ============================= */
/* 3. Buttons (Hero Section) */
.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;           /* mehr Abstand zwischen den Buttons */
  margin-top: 2.5rem;  /* etwas Luft nach oben */
  padding: 0 1rem;     /* verhindert, dass Buttons am Seitenrand kleben */
}

/* Basis-Styles für alle Buttons */
.hero-buttons .btn {
  min-width: 240px;    /* gleiche Mindestbreite */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 2rem;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Primär-Button: jetzt mit 90°-Gradient für gleichmäßigere Farbe */
.hero-buttons .btn-primary {
  background: linear-gradient(90deg, #0066FF 0%, #3399FF 100%);
  color: #FFF;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
}

/* Hover- und Fokus-Effekte */
.hero-buttons .btn-primary:hover,
.hero-buttons .btn-primary:focus {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 102, 255, 0.4);
  background: linear-gradient(90deg, #338FFF 0%, #66B2FF 100%);
}

/* Icon-Bewegung on-hover */
.hero-buttons .btn-primary .btn-icon {
  transition: transform 0.3s ease;
}
.hero-buttons .btn-primary:hover .btn-icon {
  transform: translateX(4px) scale(1.1);
}

/* Sekundär-Button */
.hero-buttons .btn-secondary {
  background: transparent;
  color: #FFF;
  border: 2px solid rgba(255,255,255,0.8);
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero-buttons .btn-secondary:hover,
.hero-buttons .btn-secondary:focus {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}



/* 4. Animation-Container */
.hero-animation-container {
  position: absolute;
  bottom: 0; right: 0;
  z-index: 0;
}
#hero-animation {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* =============================
   Allgemeine Sektionen
   ============================= */
.section-padding {
  padding: 4rem 0;
}
.bg-light {
  background-color: var(--color-bg-light);
}
.bg-muted {
  background-color: var(--color-bg-muted);
}
.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-base);
  margin-bottom: 1rem;
  text-align: center;
}
.section-subtitle {
  font-size: 1rem;
  color: var(--color-text-light);
  max-width: 800px;
  margin: 0 auto 2rem;
  text-align: center;
}

/* =============================
   Über uns (USP-Items)
   ============================= */
#ueber-uns .usp-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
.usp-item {
  background-color: var(--color-bg-white);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.usp-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.usp-icon-wrapper {
  background-color: var(--color-bg-muted);
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  transition: background-color 0.2s;
}
.usp-item:hover .usp-icon-wrapper {
  background-color: var(--color-btn-bg);
}
.usp-icon {
  font-size: 1.5rem;
  color: var(--color-text-base);
  transition: color 0.2s;
}
.usp-item:hover .usp-icon {
  color: var(--color-btn-text);
}
.usp-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-base);
}
.about-us-image {
  display: block;
  max-width: 600px;
  width: 100%;
  margin: 2rem auto 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* =============================
   Leistungen
   ============================= */
#leistungen .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 2rem;
}
.service-card {
  background-color: var(--color-bg-white);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.service-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-text-base);
}
.service-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text-base);
}
.service-description {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* =============================
   Projekte & Referenzen
   ============================= */
#projekte .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 2rem;
}
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.project-image {
  display: block;
  width: 100%;
  height: 400px;      /* hier die gewünschte Höhe festlegen */
  object-fit: cover;  /* Bild skaliert und zentriert sich ohne Verzerrung */
  transition: transform 0.2s;
}

.project-card:hover .project-image {
  transform: scale(1.03);
}
.project-overlay {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-color:rgba(0,0,0,0);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: background-color 0.2s, opacity 0.2s;
}
.project-card:hover .project-overlay {
  background-color:rgba(0,0,0,0.6);
  opacity:1;
}
.project-overlay-content {
  text-align:center;
  color: var(--color-btn-text);
  max-width:90%;
}
.project-title {
  font-size:1.25rem; font-weight:700;
  margin-bottom:0.5rem;
}
.project-description {
  font-size:1rem; margin-bottom:1rem; color:#EEEEEE;
}
.project-tech-icons i {
  font-size:1.25rem; margin:0 0.25rem; color:#FFFFFF;
}
.section-cta-container {
  text-align:center; margin-top:2rem;
}

/* =============================
   Testimonials
   ============================= */
#testimonials .testimonial-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 2rem;
}
.testimonial-card {
  background-color: var(--color-bg-white);
  padding:1.5rem; border-radius:0.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  text-align:center; transition: transform 0.2s, box-shadow 0.2s;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.testimonial-image {
  width:80px; height:80px; border-radius:50%;
  margin:0 auto 1rem; border:2px solid var(--color-text-base);
  object-fit:cover;
}
.testimonial-quote {
  font-style:italic; font-size:1rem;
  color: var(--color-text-light); margin-bottom:1rem;
}
.testimonial-author {
  font-size:0.875rem; font-weight:700;
  color: var(--color-text-base); margin-bottom:0.25rem;
}
.testimonial-company {
  font-size:0.75rem; color:#777777;
}

/* =============================
   Prozess & Timeline
   ============================= */
#prozess .timeline {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
}
.timeline-step {
  background-color: var(--color-bg-white);
  padding:1rem; border-radius:0.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  flex:1 1 18%; min-width:200px; text-align:center;
  position:relative; transition: transform 0.2s, box-shadow 0.2s;
}
.timeline-step:hover {
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.timeline-icon-wrapper {
  background-color: var(--color-bg-muted);
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; transition:background-color 0.2s;
}
.timeline-step:hover .timeline-icon-wrapper {
  background-color: var(--color-btn-bg);
}
.timeline-icon { font-size:1.5rem; color: var(--color-text-base); }
.timeline-title {
  font-size:1.125rem; font-weight:700;
  color: var(--color-text-base); margin-bottom:0.5rem;
}
.timeline-description {
  font-size:0.875rem; color: var(--color-text-light);
  line-height:1.6;
}
@media (min-width:768px) {
  #prozess .timeline-step:not(:last-child)::after {
    content:''; position:absolute;
    top:50%; right:-1rem; width:2rem; height:2px;
    background-color: var(--color-bg-muted);
    transform: translateY(-50%);
  }
}

/* =============================
   Kontaktformular
   ============================= */
#kontakt { text-align:center; }
#kontakt .section-title { color: var(--color-text-base); margin-bottom:2rem; }
.contact-form {
  background-color: var(--color-bg-white);
  padding:2.5rem; border-radius:0.5rem;
  max-width:700px; margin:0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  text-align:left;
}
.form-label {
  display:block; font-size:0.9rem; font-weight:700;
  color: var(--color-text-base); margin-bottom:0.25rem;
}
.form-input, .form-input:focus, .form-input:active {
  width:100%; padding:1rem; margin-bottom:1rem;
  border:1px solid var(--color-input-border);
  border-radius:0.5rem; font-size:1rem;
  background-color: var(--color-input-bg);
  color: var(--color-text-base);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  outline:none;
  border-color: var(--color-input-focus);
  box-shadow:0 0 0 2px rgba(17,17,17,0.2);
}
.input-error { border-color: var(--color-error) !important; }
.error-text {
  font-size:0.75rem; color: var(--color-error);
  margin: -0.75rem 0 1rem;
}
.success-message, .error-message {
  background-color: var(--color-bg-white);
  padding:1rem; margin-bottom:1rem; border-radius:0.5rem;
}
.success-message {
  border:1px solid var(--color-success);
  color: var(--color-success);
}
.error-message {
  border:1px solid var(--color-error);
  color: var(--color-error);
}
#ajax-feedback { margin-bottom:1rem; }
#kontakt .btn-primary {
  width:100%; text-align:center; margin-top:1rem;
}

/* =============================
   Footer
   ============================= */
footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding:2rem 1rem;
}
footer .container {
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-start; gap:2rem;
}
.footer-col { flex:1 1 200px; }
.footer-col.branding { flex:2 1 300px; }
footer h3,h4 {
  color: var(--color-footer-text); margin-bottom:1rem;
}
footer p, footer li, footer a {
  font-size:0.9rem; color: var(--color-footer-text);
  text-decoration:none;
}
footer ul { list-style:none; padding:0; }
footer ul li {
  display:inline-block; margin-right:1rem;
}
footer ul li:last-child { margin-right:0; }
footer ul li a:hover { color: var(--color-btn-hover-bg); }
.footer-social {
  display:flex; gap:1rem; margin-top:1rem;
}
.footer-social a {
  background-color: var(--color-bg-muted);
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: background-color 0.2s;
}
.footer-social a i {
  font-size:1rem; color: var(--color-header-text);
}
.footer-social a:hover {
  background-color: var(--color-btn-bg);
}
.footer-social a:hover i {
  color: var(--color-btn-text);
}
.footer-bottom {
  text-align:center; width:100%;
  margin-top:2rem; font-size:0.8rem;
  color:#888888;
}

/* =============================
   Responsives Design
   ============================= */
/* Mobile (≤ 767px) */
@media (max-width:767px) {
  nav ul { display:none; }
  .hamburger { display:block; }
  .hero-section {
    flex-direction:column; text-align:center;
    padding:3rem 0;
  }
  .hero-title { font-size:2.25rem; }
  .hero-subtitle { font-size:1.125rem; }
  .hero-buttons { flex-direction:column; gap:1rem; }
  #leistungen .grid-container,
  #projekte .grid-container,
  #testimonials .testimonial-container {
    grid-template-columns:1fr;
  }
  #prozess .timeline {
    display:block;
  }
  #prozess .timeline-step {
    width:100%; margin-bottom:2rem;
  }
  #prozess .timeline-step::after { display:none; }
  footer .container {
    flex-direction:column; align-items:center; text-align:center;
  }
  footer .footer-col { flex:1 1 100%; }
  footer ul li { display:block; margin:0.5rem 0; }
}

/* Tablet (768–1023px) */
@media (min-width:768px) and (max-width:1023px) {
  nav ul { display:flex; }
  .hamburger { display:none; }
  .hero-section { flex-direction:column; text-align:center; }
  .hero-content, .hero-animation-container { width:100%; }
  .hero-animation-container { margin-top:2rem; }
  #leistungen .grid-container,
  #projekte .grid-container,
  #testimonials .testimonial-container {
    grid-template-columns:repeat(2,1fr);
  }
  #prozess .timeline {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
  }
  #prozess .timeline-step::after { display:none; }
  footer .container {
    flex-wrap:wrap; justify-content:space-between;
  }
  footer .footer-col { flex:1 1 45%; }
}

/* Desktop (≥ 1024px) */
@media (min-width:1024px) {
  nav ul { display:flex; }
  .hamburger { display:none; }
  .hero-section { flex-direction:row; text-align:left; }
  #leistungen .grid-container,
  #projekte .grid-container,
  #testimonials .testimonial-container {
    grid-template-columns:repeat(3,1fr);
  }
  #prozess .timeline { display:flex; gap:2rem; }
  #prozess .timeline-step::after {
    content:''; position:absolute;
    top:50%; right:-1rem; width:2rem; height:2px;
    background-color: var(--color-bg-muted);
    transform:translateY(-50%);
  }
  footer .container { flex-wrap:nowrap; }
  footer .footer-col { flex:1 1 30%; }
  footer .footer-col.branding { flex:2 1 40%; }
}

/* =============================
   Hero-Primary-Button: Solide Farbe & Override
   ============================= */
.hero-buttons {
  padding: 0 1rem;    /* verhindert am Rand kleben */
  gap: 2rem;          /* großzügiger Abstand */
  margin-top: 2.5rem;
}

/* Hero-Primary-Button: cooler Gradient mit Glanz */
.hero-buttons .btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  min-width: 260px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #FFF;
  border: none;
  border-radius: 2rem;
  background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 8px 24px rgba(79,70,229,0.3);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* subtiler Lichtstreifen-Glanz */
.hero-buttons .btn-primary::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
  transform: rotate(35deg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-buttons .btn-primary:hover::before {
  opacity: 1;
}

/* Hover- und Fokus-Zustand */
.hero-buttons .btn-primary:hover,
.hero-buttons .btn-primary:focus {
  transform: translateY(-4px);
  background: linear-gradient(90deg, #5A50E0 0%, #7A73E8 100%);
  box-shadow: 0 12px 32px rgba(79,70,229,0.4);
}

/* Icon-Animation */
.hero-buttons .btn-primary .btn-icon {
  transition: transform 0.3s ease;
}
.hero-buttons .btn-primary:hover .btn-icon {
  transform: translateX(6px) scale(1.15);
}