/* ---------- Basics ---------- */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;         /* wichtig wegen 100vw im Hero/Footer */
}

body {
  min-height: 100vh;          /* mindestens Bildschirmhöhe */
  display: flex;              /* Body als Spalte */
  flex-direction: column;
  background-color: #fff;
}


/* Platz unter der fixed-top Navbar */
.mt-nav { margin-top: 5.5rem; } /* ca. 88px; bei Bedarf anpassen */

/* ---------- Typo ---------- */
h1 { text-align: center; }
h2 { margin-top: 20px; margin-bottom: 10px; font-weight: bold; }
h3 { text-align: center; }
h5 { margin: 50px 0 20px; text-align: center; }

/* ---------- Navbar ---------- */
.navbar-nav { gap: 45px; }
.navbar .nav-link { font-size: 21px; position: relative; }
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 3px;
  background: rgb(50, 84, 235);
  border-radius: 5px;
  transform: scaleX(0);
  transition: transform .5s;
}
.navbar .nav-link:hover::after { transform: scaleX(1); }

/* ---------- Split Layout ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}
.split-col { min-width: 0; }

@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; }
}

/* Einheitliche Größe für Headline + Text in der Split-Sektion */
.split h2.h3,
.split p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* ---------- Buttons ---------- */
.my-red-btn {
  background-color: red !important;
  border-color: red !important;
  color: #fff !important;
  font-weight: bold;
}

/* ---------- Bilder ---------- */
.img-large { width: 90%; height: auto; margin: 10px; }
.carousel-image { height: 420px; object-fit: cover; width: 100%; }

.equal-height { height: 420px; object-fit: cover; width: 100%; margin: 70px 0; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 200px;
  padding: 25px 150px;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  flex-shrink: 0; 

  /* an Hero anpassen: wirklich über die komplette Breite */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
}

.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer-block { flex: 1; min-width: 240px; max-width: 360px; }
.footer-block h5, .footer-block h4 {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}
.footer-block ul { list-style: none; margin: 0; padding: 0; }
.footer-block ul li { margin-bottom: 8px; }

/* ---------- Formulare ---------- */
form {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
label { display: block; margin-bottom: 10px; }
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc;
}
input[type="submit"] {
  background-color: #4CAF50; color: #fff; padding: 10px 20px;
  border: none; border-radius: 5px; cursor: pointer;
}
input[type="submit"]:hover { background-color: #3e8e41; }

/* ---------- Utilities ---------- */
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  clip: auto !important;
  clip-path: none !important;
  height: auto;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
.split-visual {
  width: 70%;
  max-width: 600px;   /* maximale Breite auf großen Bildschirmen */
}
.service-text p {
  font-size: 1.3rem;   /* Standard ist 1rem = 16px → hier ~19px */
  line-height: 1.6;    /* mehr Zeilenhöhe für bessere Lesbarkeit */
}
hr { display: none; }

.section-gap {
  margin-top: 15rem;
  margin-bottom: 10rem;
}

/* ---------- HERO (vollbreit, gerade, mit Bild + Verlauf) ---------- */

.hero-angled {
  position: relative;
  overflow: hidden;
  margin-top: 4rem;          /* Abstand unter der Navbar */
  padding: 6rem 0;
  color: #fff;

  /* wirklich volle Browserbreite, unabhängig vom Rest-Layout */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  /* Hintergrund: Verlauf + Bild */
  background-image:
    linear-gradient(90deg, rgba(255,34,34,0.92), rgba(255,138,61,0.75)),
    url("MannPC.jpg");       /* dein Bild */
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Inhalt zentriert im normalen Container */
.hero-angled .container {
  position: relative;
  z-index: 2;
}

/* Bild im Hero (falls du das <img> verwendest) */
.hero-image {
  max-height: 380px;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-angled {
    padding: 4rem 1.5rem;
    background-position: center;
    
  }
}

/* ---------- Layout: Footer an den Seitenrand nach unten ---------- */

main {
  flex: 1 0 auto;             /* Hauptinhalt füllt den Platz, drückt Footer nach unten */
}

/* Carousel-Text nach oben setzen */
#myCarousel .carousel-caption {
  top: 10%;      /* Abstand von oben */
  bottom: auto;  /* Standard-Bottom von Bootstrap deaktivieren */
}
/* Schrift im Carousel etwas größer */
#myCarousel .carousel-caption p {
  font-size: 1.1rem;   /* Standard ist ca. 1rem → leicht größer */
  line-height: 1.6;
}
#myCarousel .carousel-caption h3 {
  font-size: 1.5rem;   /* optional: Überschrift etwas größer */
}

/* Schrift im FAQ-Bereich größer */
#faq h2 {
  font-size: 1,5rem;   /* Standard ~2rem → etwas größer */
}

#faq p {
  font-size: 1,5rem;  /* Standard ~1rem → +1–2 Punkte */
}