/* ===== Smooth-Verhalten fuer PVT RADOST ===== */

/* Sanftes Scrollen bei Ankerlinks / ToTop */
html {
  scroll-behavior: smooth;
}

/* Weiche Uebergaenge fuer Links und Buttons */
a,
.btn,
.navbar-nav > li > a,
.inline-list a {
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

/* Bilder sanft beim Hover */
.row img,
.index-list img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.row img:hover,
.index-list img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Buttons dezent beim Hover */
.btn {
  transition: background-color 0.25s ease, transform 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

/* Formularfelder sanfter Fokus */
input,
textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Barrierefrei: Bewegung reduzieren wenn vom System gewuenscht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ===== Parallax-Banner: Text lesbar (leichter Schleier + Textschatten) ===== */
/* Variante C: Bild bleibt fast unveraendert, dezenter Schleier plus
   kraeftige Textschatten sorgen fuer Kontrast auf hellem Hintergrund. */
.parallax {
  position: relative;
}
.parallax .container,
.parallax_cnt,
.parallax blockquote {
  position: relative;
  z-index: 2;
}
.parallax:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 24, 28, 0.32);
  z-index: 1;
  pointer-events: none;
}
.parallax h1,
.parallax h2,
.parallax h3,
.parallax h4,
.parallax h5,
.parallax h6,
.parallax p,
.parallax q,
.parallax blockquote {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* Weisser Fliesstext braucht auf sehr hellem Hintergrund etwas mehr */
.parallax h6,
.parallax q,
.parallax blockquote p {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
  font-weight: 500;
}

/* ===== Kontaktformular: Felder sauber in EINE Reihe ===== */
/* inline-block-Whitespace-Bug: drei 31%-Felder + Abstaende passen
   knapp nicht in die Zeile. Flexbox loest das robust und exakt. */
.mailform fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 23px 3%;
  line-height: normal;
}
.mailform label {
  width: 31.333%;
  margin: 0 !important;
  flex: 0 0 31.333%;
}
.mailform label.textarea {
  width: 100%;
  flex: 0 0 100%;
}
.mailform .mfControls {
  width: 100%;
  flex: 0 0 100%;
}

/* Auf Handy: alle Felder untereinander */
@media (max-width: 767px) {
  .mailform label,
  .mailform label.textarea {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* ===== Home "About us"-Sektion ===== */

/* Drei Bilder gleich hoch, formatfuellend */
.bg-dark .col-md-8 .row img,
.bg-dark .col-md-9 .row img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Alles nur ab Desktop-Breite, wo die Spalten nebeneinander stehen */
@media (min-width: 992px) {
  /* "ABOUT US" so gross wie die 01-Nummer und oben buendig mit links */
  .bg-dark .col-md-8 > h3:first-child,
  .bg-dark .col-md-9 > h3:first-child {
    font-size: 65px;
    line-height: 61px;
    padding-bottom: 6px;
    margin-top: 0;
    text-transform: uppercase;
  }

  /* Linker Text: leicht groesser */
  .bg-dark .index-list li p {
    font-size: 16px;
    line-height: 27px;
  }

  /* Roter Einleitungstext: normale Gross-/Kleinschreibung, duenner,
     etwas groesser, damit Unterkante mit RENEWABLE-Header abschliesst.
     Farbe bleibt rot (aus dem Original). */
  .bg-dark .col-md-8 h6,
  .bg-dark .col-md-9 h6 {
    font-weight: 300;
    text-transform: none;
    font-size: 18px;
    line-height: 30px;
    margin-top: 0;
  }

  /* Grauer Fliesstext: groesser (fuellt die Luecke zu den Bildern),
     Start fluchtet mit dem linken Text */
  .bg-dark .col-md-8 > p,
  .bg-dark .col-md-9 > p {
    font-size: 18px;
    line-height: 31px;
    position: relative;
    top: 4px;
  }

  /* Bilder: Oberkante auf die vertikale Mitte der 02-Nummer */
  .bg-dark .col-md-8 > .row:last-child,
  .bg-dark .col-md-9 > .row:last-child {
    margin-top: 74px;
  }
}



/* ===== About-Seite: 3 Info-Spalten optisch gleiche Abstaende ===== */
/* Die Bilder sind gleichmaessig verteilt und bleiben unangetastet.
   Nur der Text der mittleren Spalte wird leicht nach rechts geschoben,
   damit die sichtbaren Luecken zwischen den Textbloecken gleich wirken
   (Spalte1-Text laeuft weit nach rechts, Spalte2-Text beginnt daher
   optisch zu frueh). */
@media (min-width: 992px) {
  .well.bg-primary .row .col-md-4:nth-child(2) > h3,
  .well.bg-primary .row .col-md-4:nth-child(2) > p {
    position: relative;
    left: 12px;
  }
}