/* ==========================================================
   Responsive Upgrade 2026
   Ergänzungsdatei für erfolgreich-bewerben.jetzt / qoun.de
   Diese Datei überschreibt nur problematische alte Regeln.
   ========================================================== */

html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
}

/* Bilder dürfen nicht mehr grundsätzlich verzerrt werden. */
img {
  max-width: 100%;
  height: auto;
}

.logo,
.navbar-brand img,
.social img,
.icon img,
.process-image,
.nbs-flexisel-item img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Header/Hero: auf Desktop wieder deutlich höher und hochwertiger. */
.banner {
  min-height: 82vh !important;
  height: 82vh !important;
  background-size: cover !important;
  background-position: center top;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.banner-pattern {
  min-height: 82vh !important;
  height: 82vh !important;
}

.banner .container {
  background: none !important;
  width: 100%;
}

.banner h1 {
  font-size: clamp(36px, 5vw, 68px) !important;
  line-height: 1.12 !important;
  letter-spacing: 1px;
  margin-bottom: 26px;
}

#aboutme,
#aboutme li {
  font-size: clamp(20px, 2.3vw, 34px) !important;
  line-height: 1.25 !important;
}

/* Navigation lesbarer und weniger gedrängt. */
.navbar {
  width: 100%;
}

.navbar .navbar-brand img.logo {
  max-height: 38px;
}

.navbar-collapse {
  max-height: calc(100vh - 80px) !important;
}

/* Parallax-Sektionen: keine Bildwiederholung mehr. */
.parallax-bg {
  width: 100% !important;
  height: 100% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top;
  background-attachment: fixed !important;
}

.getInTouch {
  height: 480px !important;
  min-height: 480px !important;
}

.getInTouch h1 {
  font-size: clamp(30px, 4.2vw, 56px) !important;
  line-height: 1.15 !important;
  padding: 0 15px;
}

/* Große Überschriften responsiv machen. */
section h1,
#about h1,
#process h1,
#services h1,
#testimonials h1,
#contact h1 {
  font-size: clamp(34px, 4.5vw, 66px) !important;
  line-height: 1.18 !important;
  word-break: normal;
  overflow-wrap: normal;
}

section h2,
#process h2,
#services h2,
#contact h2 {
  font-size: clamp(20px, 2.2vw, 32px) !important;
  line-height: 1.35 !important;
}

p,
li {
  overflow-wrap: break-word;
}

/* Service-Kacheln ohne starre Breite. */
#our-service-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.our-service {
  width: calc(33.333% - 20px) !important;
  max-width: 360px;
  min-width: 260px;
  float: none !important;
  margin: 10px !important;
}

/* Testimonials/Slider robuster machen. */
.da-slider {
  min-width: 0 !important;
  width: 100% !important;
}

.da-slide .block-cite,
.da-slide blockquote {
  white-space: normal !important;
}

/* Formulare und Buttons auf Touch-Geräten besser bedienbar. */
input,
textarea,
select,
button,
.btn {
  max-width: 100%;
}

.btn,
button,
.navbar-toggle {
  touch-action: manipulation;
}

/* Tablets */
@media only screen and (max-width: 991px) {
  .banner {
    min-height: 78vh !important;
    height: 78vh !important;
  }

  .banner-pattern {
    min-height: 78vh !important;
    height: 78vh !important;
  }

  .getInTouch {
    height: 420px !important;
    min-height: 420px !important;
  }

  .our-service {
    width: calc(50% - 20px) !important;
  }
}

/* Smartphones */
@media only screen and (max-width: 767px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }

  .navbar {
    padding: 10px 0 !important;
  }

  .navbar .navbar-brand {
    margin-left: 0 !important;
  }

  .navbar .navbar-brand img.logo {
    max-width: 220px !important;
    max-height: 34px !important;
  }

  .navbar .navbar-nav li {
    margin-left: 0 !important;
  }

  .navbar .navbar-nav li a {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Auf iPhones verursacht echtes fixed-parallax oft Bildfehler.
     Deshalb Desktop-Parallax behalten, mobil stabil als großes Bild anzeigen. */
  .banner {
    min-height: 78vh !important;
    height: 78vh !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .banner-pattern {
    min-height: 78vh !important;
    height: 78vh !important;
  }

  .banner .container {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  .banner h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.12 !important;
  }

  #aboutme,
  #aboutme li {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  .social .sideline {
    width: 45px !important;
  }

  .icon-circle.large {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }

  .parallax-bg {
    position: absolute !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  .getInTouch {
    height: 360px !important;
    min-height: 360px !important;
    margin-top: 3.5em !important;
  }

  .getInTouch h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  #about,
  #process,
  #services,
  #testimonials,
  #contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pad40 {
    padding-bottom: 24px !important;
  }

  p {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  .our-service {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 18px 0 !important;
  }

  #process-steps .icon,
  .process-block {
    max-width: 25% !important;
  }

  .da-slider {
    height: auto !important;
    min-height: 420px !important;
    margin-bottom: 20px !important;
  }

  .da-slide .block-cite,
  .da-slide blockquote,
  .da-slide .da-link,
  .da-slide .da-img {
    max-width: 100% !important;
  }

  li.slide article,
  #blogpost li.slide article {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Kleine Smartphones */
@media only screen and (max-width: 480px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .navbar .navbar-brand img.logo {
    max-width: 185px !important;
  }

  .banner {
    min-height: 78vh !important;
    height: 78vh !important;
  }

  .banner-pattern {
    min-height: 78vh !important;
    height: 78vh !important;
  }

  .social .sideline {
    display: none !important;
  }

  section h1,
  #about h1,
  #process h1,
  #services h1,
  #testimonials h1,
  #contact h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .getInTouch {
    height: 330px !important;
    min-height: 330px !important;
  }
}


/* Desktop-Parallax wieder aktivieren:
   Wichtig: background-position darf hier NICHT !important sein,
   sonst kann das vorhandene Parallax-JavaScript die Bildposition nicht bewegen. */
@media only screen and (min-width: 768px) {
  .banner,
  .parallax-bg {
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 0;
  }
}


/* Social Icons Update: X-Logo als Textsymbol, passend zu FontAwesome-Icons */
.social-x-icon {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.social-links .social-x-icon {
  font-size: 24px;
}

/* v6-Lieblingsdetail: aktive Menüpunkte rot hinterlegen, ohne das alte Design zu verändern */
.navbar .navbar-nav .active,
.navbar .navbar-nav > .active,
.navbar .navbar-nav > li.active {
  background-color: #f6464a !important;
  color: #ffffff !important;
}

.navbar .navbar-nav .active > a,
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > li.active > a,
.navbar .navbar-nav .active > a:hover,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > li.active > a:hover,
.navbar .navbar-nav .active > a:focus,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > li.active > a:focus {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* v5c: Rote Akzente im Bereich "Leistungen & Preise" */
#services {
  background-color: #f7f7f7 !important;
  color: #333333 !important;
}

#services h1 {
  color: #333333 !important;
}

#services h1::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  margin: 18px auto 0;
  background: #f6464a;
  border-radius: 4px;
}

#services hr {
  border-top-color: #f6464a !important;
}

#services .service-column,
#services .our-service {
  background: #fff5f5 !important;
  border: 1px solid rgba(246, 70, 74, 0.35) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#services .service-column::before {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: #f6464a;
}

#services .service-column:hover,
#services .our-service:hover {
  background: #ffffff !important;
  border-color: #f6464a !important;
  box-shadow: 0 14px 30px rgba(246, 70, 74, 0.22);
  transform: translateY(-4px);
}

#services .service-content h2 {
  color: #f6464a !important;
}

#services .service-content p {
  color: #444444 !important;
}

#services .service-icon {
  background-color: #f6464a !important;
  box-shadow: inset 0 0 0 50px #f6464a !important;
}

#services .service-icon i {
  color: #ffffff !important;
}

#services .btn-outline-white {
  background-color: #f6464a !important;
  border-color: #f6464a !important;
  color: #ffffff !important;
}

#services .btn-outline-white:hover {
  background-color: #d9363a !important;
  border-color: #d9363a !important;
  color: #ffffff !important;
}

@media only screen and (max-width: 767px) {
  #services .service-column,
  #services .our-service {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }

  #services .service-column:hover,
  #services .our-service:hover {
    transform: none;
  }
}


/* v5d: Leistungen & Preise - weiße gleich große Kacheln mit roten Akzenten */
#services .service-column,
#services .our-service {
  background: #ffffff !important;
  border: 1px solid rgba(246, 70, 74, 0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09) !important;
  overflow: hidden !important;
  min-height: 305px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#services .service-column::before,
#services .our-service::before {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: #f6464a;
  flex: 0 0 auto;
}

#services .service-column:hover,
#services .our-service:hover {
  background: #ffffff !important;
  border-color: #f6464a !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 32px rgba(246, 70, 74, 0.20) !important;
  transform: translateY(-4px);
}

#services .service-icon {
  margin-top: 34px !important;
  flex: 0 0 auto;
}

#services .service-content {
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 20px 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#services .service-content h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

#services .service-content h2:nth-of-type(2) {
  color: #f6464a !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

#services .service-content p {
  margin-bottom: 0 !important;
}

@media only screen and (min-width: 992px) {
  #our-service-container {
    align-items: stretch !important;
  }

  #services .our-service {
    width: calc(33.333% - 20px) !important;
    max-width: 360px !important;
  }
}

@media only screen and (max-width: 991px) {
  #services .service-column,
  #services .our-service {
    min-height: 290px !important;
  }
}

@media only screen and (max-width: 767px) {
  #services .service-column,
  #services .our-service {
    width: 100% !important;
    max-width: 420px !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }

  #services .service-column:hover,
  #services .our-service:hover {
    transform: none !important;
  }
}