.splitscreen-line {
  height: 200px!important;
}

.row.teaser-items .operations {
  background: var(--st-blue-light);
}

.row.teaser-items .consulting {
  background: var(--st-green-base);
}

.powermail_fieldwrap_type_submit {
  margin-top: 15px;
}
/*
.main-navigation li.active a.active {
  display: none;
}*/

.tab-container h4 {
  min-height: 70px;
}

p.lead {
  color: var(--st-green-base);
  margin-bottom: 0;
}

p.lead:last-child {
  margin-bottom: 1.5rem;
}

p.lead strong {
  font-weight: 700;
}

.frame-layout-2 {
  position: relative;
  background: #f7f7f7;
  padding: 4rem 3rem 2.5rem 3rem;
  max-width: 75%;
  border-radius: 7px;
}

.frame-layout-2::before {
  content:'';
  position: absolute;
  right: 3rem;
  top: -1.75rem;
  width: 3.5rem;
  height: 3.5rem;
  background: #6CBE43 url(../img/alarm.svg) no-repeat center;
  background-size: 60%;
  border-radius: 50rem;
  display: block;
}

.frame-layout-2 a {
  font-size: 1rem!important;
  margin-top: 2.5rem;
  display: inline-block;
  min-width: 200px;
  background: var(--st-green-base);
  color: var(--st-green-dark);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom-right-radius: var(--st-border-radius);
  transition: all 0.3s ease;
  text-align: center!important;
}

.operations .frame-type-text a {
  color: var(--st-blue-light)!important;
}

.consulting .frame-type-text a {
  color: var(--st-green-base)!important;
}

.operations p.lead {
    color: var(--st-blue-light);
    margin-bottom: 0;
}

.consulting .frame-type-text.frame-layout-2 a {
  color: var(--st-green-dark)!important;
}

.operations .frame-type-text.frame-layout-2 a {
  background: var(--st-blue-light);
}

.operations .frame-type-text.frame-layout-2 a {
  color: var(--st-blue-dark)!important;
}

.consulting #teaser.bg-blue {
  background: var(--st-green-dark)!important;
}

.consulting .frame-type-text.frame-layout-2 a:hover {
  background: var(--st-green-dark)!important;
  color: var(--st-green-base)!important;
}

.operations .frame-type-text.frame-layout-2 a:hover {
  background: var(--st-blue-dark)!important;
  color: var(--st-blue-light)!important;
}

.operations.pageUid-22 section.content h1, .operations.pageUid-22 section.content h2 {
  color: var(--st-blue-dark)!important;
}

.operations .frame-layout-2::before {
    background: var(--st-blue-light) url(../img/alarm-operations.svg) no-repeat center;
    background-size: 60%;
}

.consulting.pageUid-17 section.content h2, .consulting.pageUid-17 section.content h1, .consulting.pageUid-18 section.content h1, .consulting.pageUid-18 section.content h2, .consulting.pageUid-19 section.content h1, .consulting.pageUid-19 section.content h2,
.consulting.pageUid-21 section.content h1, .consulting.pageUid-21 section.content h2, .operations.pageUid-22 section.content h1, .operations.pageUid-22 section.content h2, .operations.pageUid-9 section.content h1, .operations.pageUid-9 section.content h2 {
    max-width: 850px;
}

.operations section.content h2, .operations section.content h1 {
  color: var(--st-blue-dark)!important;
}

.operations .frame-type-text ul li::before {
  background: url(../img/prufen-blue.svg) no-repeat center;
}

.operations .frame-type-text ul li {
    border-bottom: 1px solid rgba(0, 0, 0, .125)!important;
}

.frame-layout-1 h2::before {
  display: none;
}

i {
  color: var(--st-green-base);
}

.operations i {
  color: var(--st-blue-light);
}

.frame-layout-1 h2 {
  padding-left: 0!important;
  color: var(--st-green-base)!important;
  font-weight: 700;
  text-transform: none;
  font-size: 1.4rem!important;
}

.frame-type-text ul {
  width: 75%!important;
  padding: 0;
  margin-bottom: 3.5rem;
}

.frame-type-text ul li {
  position: relative;
  list-style: none;
  padding: 1rem 1.25rem 1rem 3.125rem;
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.operations .frame-type-text ul li {
  border-bottom: 1px solid rgba(255, 255, 255, .125);
}

.frame-type-text ul li::before {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  left: 1rem;
  background: url(../img/prufen.svg) no-repeat center;
  content: '';
  display: block;
  top: 50%;
  margin-top: -0.65rem;
}

#contact .frame-type-text ul li::before {
  background: url(../img/prufen-white.svg) no-repeat center;
}

#contact .frame-type-text ul {
  margin: 2rem auto 0rem auto;
  max-width: 400px;
}

.consulting .accordion-button {
 color: var(--st-green-dark);
}

.consulting .accordion-button:not(.collapsed) {
    color: #fff!important;
    background-color: var(--st-green-dark);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.consulting .accordion-button:not(.collapsed)::after {
    background-color: var(--st-green-base)!important;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: none!important;
    background-color: var(--st-green-dark)!important;
    mask-image: url('../img/plus-circle.svg')!important;
    -webkit-mask-image: url('../img/plus-circle.svg')!important;
    mask-size: 1.25em!important;
    -webkit-mask-size: 1.25em!important;
    transition: transform .2s ease-in-out;
}

.swiper-container {
  max-height: 100vh;
  overflow: hidden!important;
}

.swiper-slide IMG {
  width: 100%!important;
  height: auto;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--st-green-base);
}

.swiper-slide .teaser-text {
  max-width: 400px;
  margin: 0 auto;
}

.swiper-slide .overlay {
  background: rgba(0,0,0,0.5);
  z-index: 2;
  text-align: center;
  left: 0;
  top: 0;
}

.bg-green {
  background: var(--st-green-base);
}

.text-tertiary {
  color: var(--st-green-dark);
}


#contact h2 {
  font-size: clamp(40px, 4vw, 70px);
  max-width: 800px;
  margin: 0 auto;
}

#contact p {
  margin: 0 auto;
  max-width: 500px;
}

#contact.bg-blue.text-tertiary {
  color: var(--st-blue-light)!important;
}

#contact .cta-btn a {
  background: white;
}

#contact .cta-btn a:hover {
    background: var(--st-green-dark);
    color: var(--st-green-base);
}

#contact.bg-blue .cta-btn a:hover {
  background: var(--st-blue-light);
  color: var(--st-blue-dark);
}

.swiper-slide {
  overflow: hidden!important;
}

.swiper-slide .overlay h2 {
  max-width: 600px;
  margin: 0px auto;
  color: var(--st-green-base);
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.swiper-slide .overlay p {
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.split .arrow {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.split-left .arrow {
  transform: translateX(-5%);
}

.split-right .arrow {
  transform: translateX(-5%);
}

.split-left.over .arrow {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.split-right.over .arrow {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.main-navigation li.active ul.lvl-1 li a, .main-navigation li.active ul.lvl-1 li.active a, .main-navigation li.active ul.lvl-1 li.active a.active {
  display: block!important;
}

.main-navigation li.active.current ul.lvl-1 li {
  font-weight: 400!important;
}

.main-navigation li.active ul.lvl-1 li a {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 50px;
  padding-right: 50px;
  display: inline;
  position: relative;
  z-index: 2;
  font-weight: 400!important;
  color: var(--st-blue-dark)!important;
}

.main-navigation li , .main-navigation li.active.current, .main-navigation li.active.current ul.lvl-1 li, .main-navigation li ul.lvl-1 li.active.current {
  font-size: clamp(24px,3vw,40px)!important;
}

.main-navigation li.active ul.lvl-1 li a:after {
  width: 0;
  opacity: 0.05;
}

.main-navigation li.active ul.lvl-1 li.active.current a {
  color: var(--st-blue-light)!important;
}

.main-navigation ul li.active ul li a:hover::after {
  width: 100%!important;
}

.main-navigation li.active ul.lvl-1 li.active a:after {
  width: 100%!important;
  opacity: 1;
}

body.consulting {
  background: var(--st-green-dark);
}

.consulting #image {
    background: var(--st-green-dark)!important;
}

.consulting .cta, .consulting .btn {
    background: var(--st-green-dark);
    color: var(--st-green-base);
    border-bottom-right-radius: var(--st-border-radius);
}

.consulting .main-navigation li a::after {
  background: var(--st-green-dark)!important;
}

.consulting .main-navigation li.active a {
  color: var(--st-green-base)!important;
}

.consulting .main-navigation li a {
  color: var(--st-green-dark);
}

.consulting section.content h2::before, .consulting section.content h1::before {
  background: var(--st-green-base);
}

.consulting #about h2, .consulting #workflow h2, .consulting #maincontent h2, .consulting #about h1, .consulting #workflow h1, .consulting #maincontent h1 {
  color: var(--st-green-dark);
}

.consulting .cta-btn a {
  display: inline-block;
  min-width: 200px;
  background: var(--st-green-base);
  color: var(--st-green-dark);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.consulting .cta-btn a:hover {
  background: var(--st-green-dark);
  color: var(--st-green-base);
}

.consulting #usps {
  background: var(--st-green-dark);
}

.consulting .tab-container h4 {
    border-bottom: 1px solid var(--st-green);
}

.consulting footer {
    background: var(--st-green-footer);
}

.consulting footer ul li a, .consulting footer a {
  color: var(--st-green-base);
}

.consulting footer ul li a::after, .consulting footer a::after, .consulting .nav-container .bottom-line ul li a::after {
  background: var(--st-green-base);
}

.consulting .bg-dark-blue {
  background: var(--st-green-dark);
}

.split-right .teaserlink, .split-left .teaserlink {
  z-index: 2;
  opacity: 0.9;
  left: 0;
  top: 0;
}

.split-right .bg-image, .split-left .bg-image {
  z-index: 1;
}

.split-right .bg-image IMG, .split-left .bg-image IMG {
  max-height: calc(100vh - 200px);
  width: auto;
  transition: all 0.3s ease;
}

.split .bg-image IMG {
  display: flex;
  object-fit: cover!important;
  width: 100%!important;
  height: auto;
  transform: scale(1);
}

.split-right.over .bg-image IMG {
  transform: scale(1.2)!important;
}

.split-left.over .bg-image IMG {
  transform: scale(1.2)!important;
}

.footer-logo-link h6 {
    font-weight: 300;
}

.footer-logo-link h6 strong {
  font-weight: 800;
}

/* Form */

.tx-powermail label {
  min-width: 100%;
  margin-bottom: .25rem;
  margin-top: 1rem;
  font-weight: 600;
}

.operations .tx-powermail label {
  color: var(--st-blue-light);
}

.consulting .tx-powermail label {
  color: var(--st-green-base);
}

.tx-powermail .checkbox label {
  position: relative;
  font-weight: 400!important;
  font-size: .8rem;
  color: #555;
}

input:focus, textarea:focus, select:focus, .nice-select:focus {
  outline:0!important;
  box-shadow: none!important;
}

.nice-select, input, textarea, input[type="checkbox"], input {
  transition: all 0.3s ease!important;
  border: 1px solid #e8e8e8!important;
}

.consulting .nice-select:focus, .consulting input:focus, .consulting textarea:focus, .consulting input[type="checkbox"]:focus {
  border-color: var(--st-green-base)!important;
}

.operations .nice-select:focus, .operations input:focus, .operations textarea:focus, .operations input[type="checkbox"]:focus {
  border-color: var(--st-blue-light)!important;
}

.tx-powermail .powermail_fieldwrap_type_check {
  margin-bottom: 1rem;
}

.tx-powermail input:not(.btn.btn-primary), .tx-powermail textarea {
  font-size: 14px;
  padding: 0.75rem;
}

.tx-powermail textarea {
  margin-bottom: 2rem;
}

.tx-powermail .checkbox input {
  position: relative;
  top: -0.25rem;
  margin-right: .5rem;
  padding: .25rem;
  border: 1px solid #ccc;
}

.tx-powermail .powermail_fieldwrap_type_check.powermail_fieldwrap_datenschutz .checkbox input {
  top: 0.25rem!important;
}

.powermail_fieldwrap_type_check.powermail_fieldwrap_datenschutz.col-md-6 {
  width: 100%!important;
  margin-bottom: 2rem;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  width: 1rem;
  height: 1rem;
  float: left;
  align-content: center;
  justify-content: center;
  font-size: 2rem;
  padding: 0.1rem;
  border: 1px solid #ccc;
  border-radius: 0.15rem;
}

.tx-powermail input.btn.btn-primary {
  display: inline-block;
  min-width: 200px;
  background: var(--st-green-dark)!important;
  color: var(--st-green-base);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-bottom-right-radius: var(--st-border-radius);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  transition: all 0.3s ease;
}

.tx-powermail input.btn.btn-primary:hover {
  background: var(--st-green-base)!important;
  color: var(--st-green-dark)!important;
}

.operations .tx-powermail input.btn.btn-primary {
  background: var(--st-blue-dark)!important;
  color: var(--st-blue-light);
}

.operations .tx-powermail input.btn.btn-primary:hover {
  background: var(--st-blue-light)!important;
  color: var(--st-blue-dark)!important;
}

input[type="checkbox"]::before {
  position: absolute;
  content: "";
  top: 50%;

  margin-top: -0.3rem!important;
  width: 0.6rem;
  height: 0.6rem;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  transform: scale(0);
  background-color: var(--st-blue-light)!important;
  transition: all 0.3s ease;
}

.consulting input[type="checkbox"]::before {
  background-color: var(--st-green-base)!important;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

fieldset legend {
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.nice-select {
  padding-top: 5px!important;
  padding-bottom: 5px!important;
  height: 52px!important;
  line-height: 40px;
  margin-bottom: 1rem;
  width: 100%!important;
}

.nice-select span.current {
  overflow: hidden;
  max-width: 100%;
  display: inline-block;
}

/* Form */



@media (min-width: 1750px) {

}

@media (min-width: 1400px) {
  .split .bg-image IMG {
    min-height: calc(100vh - 200px);
  }
}

@media (max-width: 1399px) {
  .slider-nav {
    display: block!important;
  }
}

@media (min-width: 1200px) {
  .row.teaser-items {
    max-height: calc(100vh - 200px);
  }
}

@media (max-width: 991px) {

  .nice-select span.current {
    font-size: 0.75rem;
  }

  .frame-layout-2 {
    max-width: 100%;
    border-radius: 7px;
  }

  .split-left {
    left: 0.75rem!important;
  }

  .split-right {
    left: 0.75rem!important;
  }

  .container-fluid, .row {
    max-width: 100%!important;
  }

  .row.teaser-items .teaserlink {
      width: 100vw!important;
      max-height: 750px;
  }

  .row.teaser-items .bg-image IMG {
      min-height: 750px;
  }

  .row.teaser-items .teaserlink .inner {
    width: 100%!important;
    left: 0!important;

    padding-left: 1.5rem!important;
    padding-right: 1.5rem!important;
  }
}

@media (max-width: 520px) {

  section.content h2, section.content h2, section.content h1 {
    font-size: 1.25em;
    padding-left: 20px!important;
    max-width: 200px!important;
    word-break: break-word!important;
  }

  section.content #c45 h2, section.content #c50 h2, section.content #c48 h2, section.content #c1 h2, section.content #c2 h2, section.content #c3 h2 {
    max-width: 200px!important;
  }

  section.content h2::before, section.content h1::before {
    top: 3px;
    height: 42px;
    width: 7px;
  }

  section.content .frame-type-text h2 {
    max-width: unset!important;
  }

  section.content h1 {
    max-width: 350px!important;
  }

  .main-navigation li, .main-navigation li.active.current, .main-navigation li.active.current ul.lvl-1 li, .main-navigation li ul.lvl-1 li.active.current {
    font-size: clamp(18px,3vw,40px)!important;
  }

  .main-navigation li a {
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    display: inline;
    position: relative;
    z-index: 2;
  }

  .nice-select span.current {
    font-size: 0.68rem;
  }
  .frame-type-text ul {
    width: 100%!important;
    padding: 0;
  }


}

/* ==========================================================================
   Slider-Navigation (Pfeile + Tap-Icon) des Splitscreen-Partials: saß mit
   viel Luft über dem unteren Rand des Slides (main.css: button-handle
   bottom:160px, tap-icon bottom:185px) statt bündig zu sitzen. Betrifft
   die Operations-Unterseite und die Homepage gleichermaßen (gemeinsames
   Partial). Geschätzte Korrektur, bitte live gegenprüfen.
   ========================================================================== */
.button-handle {
  bottom: 0px !important;
}

.tap-icon {
  bottom: 70px !important;
}

/* .slider-nav selbst wird der Bezugsrahmen für "right:0"/"left:0" der
   Buttons (position:absolute + explizite 100vw-Breite) statt des
   unzuverlässigen .container_fluid - das war der eigentliche Grund,
   warum der "Weiter"-Button (right:0) verschwand, während "Zurück"
   (left:0) unabhängig von der tatsächlichen Breite immer korrekt lag. */
.main-page .home-ops-teaser .slider-nav {
  display: flex !important;
  width: calc(100vw - 15px) !important;
  /* War 100px - Tap-Icon (bottom:90px, s.o., mittig in dieser Box) saß
     dadurch zu tief und überlappte das "mehr lesen" der gehoverten/
     aktiven Kachel darunter. Box selbst hat keinen sichtbaren Hintergrund,
     die zusätzliche Höhe ist rein Koordinatenraum für die Kind-Elemente,
     kein sichtbarer Balken. */
  height: 180px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1000000000000000 !important;
}

/* Die "- 15px" oben kompensiert eine Desktop-Scrollbar - auf Touch-Geräten
   (XS-Displays) gibt es die nicht, wodurch der rechtsbündige "Weiter"-
   Button (right:0 relativ zu dieser Box, siehe Kommentar unten) dort
   15px zu weit links landete. */
@media (max-width: 575.98px) {
  .main-page .home-ops-teaser .slider-nav {
    width: 100vw !important;
  }
}

/* "right: 0" auf .button-handle.next positioniert sich relativ zur
   rechten Kante von #image .container_fluid - falls die breiter als der
   sichtbare Bereich wird, landet der Next-Button außerhalb (der Prev-
   Button bei "left: 0" ist davon unberührt, siehe web2026.css
   .main-page .home-ops-teaser .container_fluid für dasselbe Muster auf
   der Homepage). */
#image .container_fluid {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Homepage: Sprachwechsler + Anreisser + Operations-4er-Teaser
   oberhalb der Operations/Consulting-Trennung (Restrukturierung 2026-09)
   ========================================================================== */
/* --- Sprachwechsler: kompakt, Dropdown als Overlay --------------------
   ".lang-widget" ist die einzige Klasse, die selbst Größe/Position steuert
   - keine gemeinsame "wachsende Kapsel" mit dem Button mehr: das Options-
   Panel ist "position: absolute" und schwebt UNTER dem Button, statt im
   normalen Fluss mitzuwachsen. Dadurch bleiben Pfeil und Kreis beim
   Auf-/Zuklappen exakt an derselben Stelle stehen, und auf Unterseiten
   wird der umgebende <header> dadurch nicht höher. */
.lang-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.lang-widget .caret {
  display: inline-flex;
  align-items: center;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  cursor: pointer;
  transition: transform 0.25s ease;
}

.lang-widget.open .caret {
  transform: rotate(180deg);
}

/* Auf den Unterseiten sitzt der Sprachwechsler im weißen Header
   (#navHeader, bg-white) statt auf dunklem Grund wie auf der Startseite -
   dort braucht der Pfeil dunkles statt weißes Blau, sonst unsichtbar. */
#navHeader .lang-widget .caret {
  color: var(--st-blue-dark);
  filter: none;
}

.lang-widget .lang-current {
  background: #fff;
  border: 0;
  border-radius: 50%;
  padding: 2px;
  margin: 0;
  display: flex;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.lang-widget .flag-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.lang-widget .flag-en {
  background-image: url('../img/united-kingdom.png');
  background-size: cover;
  background-position: center;
}

.lang-widget .flag-de {
  background: linear-gradient(to bottom, #000 0 33.33%, #DD0000 33.33% 66.66%, #FFCE00 66.66% 100%);
}

/* Welche Sprache als "aktuell" angezeigt wird, richtet sich nach der
   tatsächlichen URL (siehe main.js) statt nach dem Inhalt der Seite -
   dadurch bleibt EN korrekt "aktiv", auch solange eine Unterseite noch
   per Fallback deutschen Inhalt unter /en/ zeigt. Default: EN.
   Der Zustand sitzt am <html>-Tag (html.lang-is-de), nicht am Widget. */
.lc-de,
.lo-en {
  display: none !important;
}

.lc-en,
.lo-de {
  display: block !important;
}

html.lang-is-de .lc-de,
html.lang-is-de .lo-en {
  display: block !important;
}

html.lang-is-de .lc-en,
html.lang-is-de .lo-de {
  display: none !important;
}

.lang-widget .lang-options {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.35rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  z-index: 200;
}

.lang-widget.open .lang-options {
  max-height: 26px;
  opacity: 1;
  padding: 2px;
}

.lang-widget .lang-options .lang-link {
  display: block;
}

/* --- Homepage: Anreisser + Operations-4er-Teaser -----------------------
   clamp() statt fixer rem-Werte, damit Innenabstand/Schriftgröße zwischen
   Mobile und Desktop mitwachsen statt an einem Breakpoint zu springen. */
.main-page .home-intro {
  padding: clamp(1.25rem, 5vw, 3rem) 1rem;
  color: #fff;
  text-align: center;
  /* Bootstraps .row bringt negative Gutter-Margins mit, die normalerweise
     von .container/.container-fluid kompensiert werden - "container_fluid"
     ist hier aber eine eigene, schmalere Klasse ohne diese Kompensation
     (siehe Splitscreen.html, das deshalb explizit m-0/p-0 auf dem .row
     setzt). Ohne das hier ragte der Text minimal aus dem Rahmen. */
  margin-left: 0;
  margin-right: 0;
}

/* Der eigentliche Bug: .col-12 (Bootstrap) hatte hier keine wirksame
   Breitenbegrenzung und wurde durch flex-shrink:0 nicht auf die
   verfügbare Breite gestaucht - der zentrierte Text landete dadurch weit
   rechts außerhalb des sichtbaren Bereichs. */
.main-page .home-intro .col-12 {
  max-width: 100% !important;
  width: 100% !important;
  flex-basis: 100% !important;
}

.main-page .home-intro h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 2.2vw + 0.6rem, 1.35rem);
  color: #fff;
}

.main-page .home-intro p {
  font-size: clamp(0.78rem, 0.6vw + 0.65rem, 0.85rem);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

/* Sprachwechsler ist "position:fixed" oben rechts (Split.html
   .lang-switch-home, siehe web2026.css weiter unten) und überlappte auf
   sehr schmalen Displays den Anreisser-Text darunter, weil dessen
   clamp()-Padding dort auf sein Minimum schrumpft. Zusätzlicher
   Abstand hier entspricht ungefähr der Höhe der Sprachwechsler-Box
   (p-3 = 2x1rem Padding + 26px Flaggen-Icon). */
@media (max-width: 575.98px) {
  .main-page .home-intro {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Splitscreen-Partial (sonst vh-100 auf der Operations-Seite) wird hier
   kompakt eingebettet. Der Hover-Text der Kacheln (.overlay .inner-overlay)
   ist unten ausgerichtet (Bootstrap align-items-end) und für die volle
   Viewport-Höhe auf der Operations-Seite ausgelegt - im flacheren
   Homepage-Kontext wird er dadurch am unteren Rand abgeschnitten. Hier
   deshalb vertikal zentriert statt unten verankert. */
.main-page .home-ops-teaser .overlay {
  align-items: center !important;
}

/* Die 5 Kachel-Texte sind unterschiedlich lang (kürzester: Cooling, längster:
   Bulletproof/Waterproof) - bei "align-items:center" (s.o.) landete der
   CTA-Button dadurch auf jeder Kachel unterschiedlich weit vom unteren
   Rand entfernt (kürzerer Text = mehr Zentrierungs-Abstand = Button weiter
   oben), was das Tap-Icon (fixer bottom-Wert) mal überlappte, mal nicht.
   Feste Mindesthöhe (an den längsten Text angelehnt) + eigene interne
   Zentrierung sorgt dafür, dass alle Kacheln dieselbe effektive
   Content-Höhe haben - kürzere Texte werden innerhalb dieser Box vertikal
   zentriert statt oben anzuschlagen. Padding oben/unten sorgt zusätzlich
   für Abstand zwischen Bildrand und Text (klebte vorher direkt am Rand). */
.main-page .home-ops-teaser .inner-overlay {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.main-page .home-ops-teaser .claimline {
  display: none !important;
}

/* Bug-Fix: die 4 Kachelbilder haben nur auf der Operations-Unterseite
   object-fit:cover (dort per ID-Regel "#image .split-item IMG"). Im
   Homepage-Kontext (kein #image-Wrapper) fehlte das - die Bilder wurden in
   ihrer natürlichen Breite gerendert und sprengten die Spalte/den Slide. */
.main-page .home-ops-teaser .split-item IMG {
  object-fit: cover;
  width: 100%;
}

/* Höhe des 4er-Teasers = 100vh minus die tatsächliche (fluide, per clamp()
   skalierende) Höhe von .home-intro. Reines Flexbox statt JS-Messung
   (weniger Fehlerquellen/Timing-Risiken als eine per JS gesetzte
   CSS-Variable) - .home-hero ist die Flex-Spalte, .home-intro nimmt ihre
   natürliche Höhe, .home-ops-teaser bekommt den Rest. Gilt für alle
   Breiten (auch im Slider-Modus unter 1400px). */
.main-page .home-hero {
  overflow-x: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-page .home-intro {
  flex: 0 0 auto;
  /* Sicherheitsnetz: unabhängig von der Overflow-Ursache im Teaser darunter
     bleibt der Intro-Text so garantiert an seiner Position und immer
     oben auf, statt von etwas überlagert/verschoben zu werden. */
  position: relative;
  z-index: 50;
}

.main-page .home-ops-teaser {
  flex: 1 1 auto;
  min-height: 0;
  /* Positionierter Bezugsrahmen für .slider-nav (position:absolute). */
  position: relative;
  /* WICHTIG: siehe eigene "orientation:portrait"-Regel weiter unten, die
     flex/min-height hier auf Mobile-Hochkant-Displays wieder aufhebt. */
  /* Die eigentliche Ursache des horizontalen "Text kommt von rechts rein"-
     Effekts beim Resizen: .splitscreen ist im Slider-Modus 500vw breit.
     Ohne "min-width: 0" verhindert Flexbox nicht, dass dieser breite
     Nachfahre den Flex-Container selbst in die Breite drückt (klassische
     Flexbox-Falle, das Pendant zu "min-height: 0" - hatte ich für die
     Höhe schon, für die Breite aber übersehen). overflow-x greift dadurch
     erst NACH dem eigentlichen Aufblähen, nicht davor. */
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}

/* Auf Mobile-Hochkant (Portrait) bekommt der Slider seine eigene volle
   Viewport-Höhe, statt sich mit dem Anreisser-Text ein gemeinsames 100vh
   zu teilen (Basis-Regel oben: .home-hero fix 100vh, .home-intro nimmt
   seine natürliche Höhe, .home-ops-teaser nur den Rest). Der Anreisser-
   Text ist inzwischen (Sprachwechsler-Abstand oben/unten, siehe weiter
   unten im File) für sich genommen schon so hoch, dass ohnehin gescrollt
   werden muss - dann kann der Slider selbst auch die volle Höhe
   ausnützen, statt zusätzlich gequetscht zu werden. Das war die
   eigentliche Ursache dafür, dass Kachel-Text/Tap-Icon/CTA-Button auf
   manchen Geräten trotz normalisierter Content-Höhe (s.o.) noch
   kollidierten: schlicht zu wenig Platz in der Box. */
@media (max-width: 1399px) and (orientation: portrait) {
  .main-page .home-hero {
    height: auto;
  }

  .main-page .home-ops-teaser {
    flex: 0 0 auto;
    height: 100vh;
    height: 100dvh;
  }
}

.main-page .home-ops-teaser .container_fluid {
  /* !important nötig: der Container trägt die echte Bootstrap-Klasse
     "vh-100" (height:100vh!important), die sonst gewinnt - der Container
     stand dadurch die ganze Zeit fest auf 100vh, unabhängig von der
     tatsächlich verfügbaren Höhe, und hat wohl den Intro-Text darüber
     überlagert/verdeckt. */
  height: 100% !important;
  max-height: 100% !important;
  /* "right: 0" auf .button-handle.next positioniert relativ zur rechten
     Kante DIESER Box - wenn die (z.B. wegen des Slider-Inhalts) breiter
     als der sichtbare Bereich wird, landet der Button außerhalb, während
     "left: 0" beim prev-Button davon unberührt bleibt. Breite deshalb
     hier ebenfalls explizit fixieren. */
  width: 100% !important;
  max-width: 100% !important;
}

/* Ab 1400px: 5 Kacheln nebeneinander, volle Höhe, kein Slider nötig.
   Bootstrap col-xl-3 selbst greift schon ab 1200px - der Bereich
   1200-1399px würde also ohne die untenstehende Regel schon nebeneinander
   stehen; die max-width:1399px-Regel überschreibt das bewusst mit
   width:100vw, damit dort noch der Slider läuft. */
@media (min-width: 1400px) {
  .main-page .home-ops-teaser .splitscreen {
    width: 100%;
    height: 100%;
  }

  .main-page .home-ops-teaser .split-item,
  .main-page .home-ops-teaser .split-item IMG {
    height: 100% !important;
    max-height: 100% !important;
  }

  .main-page .home-ops-teaser .slider-nav {
    display: none !important;
  }
}

/* Kachel-Breite ab 1400px (Homepage-Teaser UND #image auf der
   Operations-Unterseite, selbes Splitscreen-Partial): 12 Bootstrap-Spalten
   teilen sich nicht glatt durch 5 Kacheln, darum ab jetzt kein col-xl-3/
   col-xxl-3 mehr im Markup - stattdessen gleichmäßige Verteilung per
   flex-grow, funktioniert dadurch auch automatisch bei einer künftigen
   6./7. Kachel ohne weitere CSS-Anpassung.

   Mouseover-Wunsch des Kunden: die gehoverte Kachel wird doppelt so breit
   wie ihre Geschwister (flex-grow:2 gegen flex-grow:1), die dafür
   gleichmäßig schmäler werden - in Summe bleibt die Reihe dank Flexbox
   immer exakt 100% breit. Das Hintergrundbild (object-fit:cover,
   width:100%, siehe oben) skaliert dabei automatisch mit der neuen
   Kachel-Breite mit, kein zusätzliches JS nötig. */
@media (min-width: 1400px) {
  .main-page .home-ops-teaser .split-item,
  #image .split-item {
    flex: 1 1 0 !important;
    max-width: 100% !important;
    min-width: 0;
    transition: flex-grow 0.5s ease;
  }

  .main-page .home-ops-teaser .split-item:hover,
  #image .split-item:hover {
    /* !important nötig: die Basis-Regel oben setzt per "flex:1 1 0 !important"
       auch flex-grow implizit auf !important - ein nicht-!important-Wert hier
       würde dagegen nie gewinnen, unabhängig von Reihenfolge/Spezifität. */
    flex-grow: 2 !important;
  }
}

/* Unter 1400px: derselbe Wisch-Slider wie auf der Operations-Unterseite
   (dort #image-gescoped, hier auf .home-ops-teaser übertragen) - eine
   Kachel pro "Slide", volle Höhe des Teasers. Die Klick-Logik in main.js
   für ".slider-nav .next/.prev" ist bereits global (nicht #image-
   gebunden) und funktioniert hier unverändert mit. */
@media (max-width: 1399px) {
  .main-page .home-intro .col-12 {
    max-width: 80vw !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .main-page .home-ops-teaser {
    overflow: hidden;
  }

  .main-page .home-ops-teaser .splitscreen {
    /* Hart auf die aktuelle Kachel-Anzahl verdrahtet (5 x 100vw) - bei einer
       6./7. Kachel hier mit anpassen. */
    width: 500vw;
    height: 100%;
  }

  .main-page .home-ops-teaser .split-item {
    width: 100vw;
    height: 100% !important;
    max-height: 100% !important;
    float: left;
  }

  .main-page .home-ops-teaser .split-item IMG {
    height: 100% !important;
    max-height: 100% !important;
  }

  .main-page .home-ops-teaser .slider-nav {
    display: flex !important;
  }
}

/* Lücke im bestehenden Operations/Consulting-Teaser (.row.teaser-items):
   main.css deckt den Text-Umbruch-Fix für ".teaserlink .inner" nur unter
   992px ab (".inner" bleibt sonst auf Bootstraps "w-75" stehen). Zwischen
   992px und 1199px sind die Spalten (col-xl-6, Breakpoint 1200px) zwar
   schon gestapelt, aber ohne diesen Fix bleibt .inner nur 75% breit -
   dieselbe Behandlung wird hier für genau diese Lücke nachgezogen. */
@media (min-width: 992px) and (max-width: 1199px) {
  .row.teaser-items .teaserlink .inner {
    width: 100% !important;
    left: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Gleiches Muster wie beim Intro-Text-Bug: .teaserlink/.inner war selbst
   nicht auf die tatsächlich verfügbare Breite begrenzt (Bootstraps
   "w-75"/"w-100" bezog sich auf eine nicht wirksam begrenzte Bezugsbox),
   wodurch der Text bequem in einer Zeile Platz hatte und dabei über den
   sichtbaren Rahmen hinauslief, statt umzubrechen. Jetzt an allen
   Breiten hart begrenzt. */
.row.teaser-items .teaserlink,
.row.teaser-items .teaserlink .inner {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.row.teaser-items .teaserlink p {
  max-width: 700px;
}

/* Mindesthöhe: der jetzt mehrzeilig umbrechende Text braucht mehr
   vertikalen Platz als vorher, das Panel darf dafür nicht zu knapp
   bemessen sein (Icon + Überschrift + Fließtext + Abschlusszeile). */
@media (max-width: 1399px) {
  .row.teaser-items .split-left,
  .row.teaser-items .split-right {
    min-height: 550px;
  }
}

/* Operations-Text enthält einzelne lange Wörter/Komposita (z.B.
   "camouflagetauglich"), die ohne diese Regel nicht umbrechen und dadurch
   den Rahmen sprengen können - Consulting-Text hat keine so langen Wörter,
   deshalb bisher nicht aufgefallen. Bricht nötigenfalls auch innerhalb
   eines Worts um, statt zu überlaufen. */
.row.teaser-items .teaserlink .inner,
.row.teaser-items .teaserlink .inner p {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* ========================================================================== */