/* ++++++++++++++++++++++++++++++++++++++ */
/*     custom.css schlamp-immobilien.de     */
/* ++++++++++++++++++++++++++++++++++++++++ */

body {line-height: 1.35em;}
h1 {font-size: 2.4em; font-weight: 600;}
h2 {font-size: 2.0em; font-weight: 600; line-height: 1em !important; margin-bottom: 0.8em;}
h3 {font-size: 1.3em; line-height: 1.4em !important;}
p {margin-bottom: 1em;}

#header_main.header_main.wrapper960 {width: 1600px}
.hornav ul.menu > li > a, .hornav ul.menu > li > span {font-size: 1.15em !important; letter-spacing: 1.05px !important;}
.hornav ul.menu > li {margin: 0 10px;}
div#footer-2.block_holder_margin {height: 0; margin: 0; padding: 0;}
div#wrapper_base-2.block_holder_margin div.base-2.base-2a div.module div.module_surround {margin-bottom: 0;}
div#footer-2.block_holder_margin div.module div.module_surround {padding-top: 0;}
.copyright {color: #fff; margin: auto;}

/* modules spacing */
div.top-2.top-2a div.module div.module_surround {padding-top: 10px;}
.maincontent {padding: 10px 20px !important;}
.module .module_surround, .module_menu .module_surround {
  height: 100%;
  padding: 0 20px 10px;
    padding-top: 0px;
  /* padding: 0 var(--j51-grid-column-gap) var(--j51-grid-row-gap); */
  box-sizing: border-box;
}

/* eigene CSS */
p.clsRedUppMargin {margin-bottom: 0em !important;}
h1.clsRedUpH1 {font-size: 2.0em; font-weight: 600; line-height: 1em !important; margin-bottom: 0.8em;}
.clsRedUppTeaser {text-transform: uppercase; color: #f50000; font-size: 0.9em; font-weight: 700;}
div.clsBottom1 {max-width: 900px;}
.logo {padding: 20px 20px 40px 20px !important;}
    /* Layerslideshow */
div.layerslideshow-title-container h2.layerslideshow-title {font-size: 6rem; text-transform: uppercase; text-shadow: 1px 1px 4px #626262;}
div.layerslideshow-title-container h3.layerslideshow-title {font-size: 3.8rem; text-transform: uppercase; text-shadow: 1px 1px 4px #626262; letter-spacing: 4px;}
    /* Bewerbungs-Button */
.clsBewerbungsButton {display: inline-block; box-sizing: border-box; max-width: 100%; height: auto; white-space: normal; line-height: 1.35; background-color: rgb(245, 0, 0); color: #ffffff; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 6px;
    padding: 14px 30px; cursor: pointer; align-self: flex-start; margin-top: 8px; transition: background-color 0.3s ease; min-width: 160px;  text-align: center; text-decoration: none;}
.clsBewerbungsButton:hover {background-color: rgb(245, 56, 56);}
body.itemid-677.view-article .page-header h1 {font-size: 1.5rem; line-height: 0.3;}

/* Roter Balken unter den Geschäftstiteln */
.clsTeamTitle::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background-color: #ff0000;
    margin-top: 12px;
}

/* Teamseite Teammitglieder Struktur */
.clsTeamProfil {
  --cls-team-blau: #273f59;
  --cls-team-rot: #f50000;
  --cls-team-text: #22262a;
  --cls-team-linie: #d3d8dd;
  color: var(--cls-team-text);
  font: inherit;
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--cls-team-linie);
}

.clsTeamRaster {
  display: grid;
  grid-template-columns: minmax(230px, 31%) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.clsTeamProfilOhneBild .clsTeamRaster { grid-template-columns: minmax(0, 1fr); }
.clsTeamBildbereich { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #f5f6f7; }
.clsTeamBild { display: block; width: 100%; height: 100%; object-fit: cover; }
.clsTeamInhalt { min-width: 0; }
.clsTeamName { margin: 0 0 6px; color: #000; font-family: Oswald, Arial, Verdana, sans-serif; font-size: clamp(1.65rem, 2.4vw, 2.15rem); font-weight: 600; line-height: 1.12; }
.clsTeamRolle { margin: 0 0 16px; color: var(--cls-team-blau); font-family: Oswald, Arial, Verdana, sans-serif; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.25; }
.clsTeamKontakt { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 22px; font-style: normal; }
.clsTeamKontakt a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--cls-team-blau); text-decoration: none; overflow-wrap: anywhere; }
.clsTeamKontakt a:hover { color: var(--cls-team-rot); text-decoration: underline; }
.clsTeamKontakt a:focus-visible { outline: 2px solid var(--cls-team-rot); outline-offset: 3px; }
.clsTeamKontaktBezeichnung { color: var(--cls-team-rot); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.clsTeamText p { margin: 0 0 1em; }
.clsTeamText p:last-child { margin-bottom: 0; }
.clsTeamZwischenTitel { margin: 1.35em 0 0.45em; color: var(--cls-team-blau); font-family: Oswald, Arial, Verdana, sans-serif; font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.clsTeamPersoenlich { margin-top: 1.35em !important; padding-top: 0.85em; border-top: 1px solid var(--cls-team-linie); }
.clsTeamPersoenlich strong { color: var(--cls-team-rot); }

@media (max-width: 760px) {
  .clsTeamRaster { grid-template-columns: minmax(0, 1fr); }
  .clsTeamBildbereich { width: min(100%, 380px); }
  .clsTeamKontakt { display: grid; gap: 7px; }
  .clsTeamKontakt a { display: grid; grid-template-columns: 58px minmax(0, 1fr); }
}

/* Wohntraumfinder */
/* Fließtext und Button erben die Template-Schrift. Keine Font-Imports. */
.clsWohntraumBanner {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  min-height: 430px;
  overflow: hidden;
  background: #fff;
  color: inherit;
}
.clsWohntraumBanner *,
.clsWohntraumBanner *::before,
.clsWohntraumBanner *::after { box-sizing: border-box; }
.clsWohntraumBanner .clsWohntraumBild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.clsWohntraumBanner .clsWohntraumInhalt {
  position: relative;
  width: 64%;
  padding: 66px 48px;
}
.clsWohntraumBanner .clsWohntraumLabel {
  margin: 0 0 14px;
  color: #ff0000;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.clsWohntraumBanner .clsWohntraumTitel {
  margin: 0 0 20px;
  padding: 0;
  color: #000;
  font-family: "Oswald", sans-serif;
  font-size: clamp(36px, 4.1cqi, 52px);
  font-weight: 600;
  line-height: 1.18 !important;
  text-transform: none;
  text-shadow: none;
  text-wrap: balance;
}
.clsWohntraumBanner .clsWohntraumText {
  margin: 0 0 30px;
  color: inherit;
  font-size: 20px;
  line-height: 1.6;
}
.clsWohntraumBanner a.clsWohntraumButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  min-height: 58px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  background: #ff0000;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
}
.clsWohntraumBanner .clsWohntraumButton svg { flex: 0 0 24px; }
.clsWohntraumBanner a.clsWohntraumButton:hover {
  background: #ff0000;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.clsWohntraumBanner a.clsWohntraumButton:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
}
@container (max-width: 760px) {
  .clsWohntraumBanner .clsWohntraumInhalt {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    min-height: 640px;
    padding: 260px 24px 32px;
    background: linear-gradient(180deg, transparent 20%, rgba(255, 255, 255, .72) 52%, rgba(255, 255, 255, .94) 100%);
  }
  .clsWohntraumBanner .clsWohntraumBild {
    object-position: right bottom;
  }
  .clsWohntraumBanner .clsWohntraumTitel { font-size: clamp(32px, 7cqi, 44px); }
  .clsWohntraumBanner .clsWohntraumText { font-size: 18px; }
}

/* Wohntraumfinder Ende--- */

/* immobilie1 Integration */
#immobilie1-objectlist .splide__list {overflow: visible;}

/* 4-er Spalten für Immo Unterseiten */
/* Vorteils-Grid – 4 Spalten (ersetzt die ✔-Absätze) */
.clsVorteile {
  --vRot: #e00000;
  --vNavy: #253447;
  --vText: #4a525b;
  --vLinie: #dde1e6;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 36px 0 40px;}

.clsVorteil {position: relative; padding-top: 18px; border-top: 1px solid var(--vLinie);}
.clsVorteil::before {content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 3px; background: var(--vRot);}
.clsVorteilTitel {margin: 0 0 8px; font-weight: 500; line-height: 1.25; color: var(--vNavy);}
.clsVorteil p {margin: 0; line-height: 1.6; color: var(--vText);}

@media (max-width: 991px) {
  .clsVorteile { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

@media (max-width: 575px) {.clsVorteile { grid-template-columns: 1fr; row-gap: 32px; }}

/* dynamische Estate Links unten im Immobilien bereich*/
.clsEstateLinksGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.clsEstateLink {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr) 40px;
  align-items: stretch;
  --estate-ink: #263e52;
  --estate-accent: #b71925;
  box-sizing: border-box;
  border: 1px solid #d5d9dc;
  background: #fff;
  color: var(--estate-ink);
  text-decoration: none;
}
.clsEstateLink img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  max-height: 240px;
  object-fit: cover;
}
.clsEstateLinkText { align-self: center; padding: 20px; min-width: 0; }
.clsEstateLink h3 { margin: 0 0 12px; color: var(--estate-ink); overflow-wrap: anywhere; }
.clsEstateLinkText p { margin: 0; text-align: left; }
.clsEstateLink:hover { border-color: var(--estate-accent); }
.clsEstateLink:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.clsEstateLink a:focus-visible { outline: 3px solid var(--estate-accent); outline-offset: 4px; }
@media (max-width: 900px) {
  .clsEstateLinksGrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .clsEstateLink { grid-template-columns: minmax(0, 1fr) 48px; }
  .clsEstateLink .clsEstateLinkImage { grid-column: 1 / -1; }
  .clsEstateLink img { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; }
  .clsEstateLinkText { padding: 22px 0 24px 20px; }
}
.clsEstateLink *, .clsEstateLink *::before, .clsEstateLink *::after { box-sizing: border-box; }
.clsEstateLink[hidden] { display: none !important; }
.clsEstateLink a { color: inherit; text-decoration: none; }
.clsEstateLink .clsEstateLinkImage { margin: 0; }
.clsEstateLinkImage a { display: block; height: 100%; }
.clsEstateLink .clsEstateLinkAction { align-self: center; justify-self: center; margin: 0; }
.clsEstateLinkAction a { display: inline-block; padding: 12px; }
.clsEstateLink:focus-within { border-color: var(--estate-accent); }


/* Kontaktbereich CSS */
.clsKontaktInfoTop {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}

.clsKontaktInfoText,
.clsKontaktInfoBild {
  min-width: 0;}
.clsKontaktInfoTelefon {margin: 38px 0;}
.clsKontaktInfoTelefon a {display: inline-flex; align-items: center; gap: 16px; max-width: 100%; color: inherit; font-size: clamp(1.5rem, 2.5vw, 2.4rem); font-weight: 700; line-height: 1.25; text-decoration: none;}
.clsKontaktInfoTelefon a:hover {color: inherit; text-decoration: underline; text-underline-offset: 0.15em;}
.clsKontaktInfoTelefon a:focus-visible {outline: 3px solid currentColor; outline-offset: 6px;}
.clsKontaktInfoTelefonIcon {display: block; flex: 0 0 44px; width: 44px; height: 44px; color: #ff0000;}
.clsKontaktInfoZeiten {margin-bottom: 30px;}
.clsKontaktInfoBild {padding-top: 60px;}
.clsKontaktInfoBild img {display: block; width: 100%; height: auto;}
.clsKontaktInfoAbschluss {margin-top: 28px;}

@media (max-width: 900px) {
  .clsKontaktInfoTop {grid-template-columns: minmax(0, 1fr); gap: 24px;}
  .clsKontaktInfoBild {padding-top: 0;}
  .clsKontaktInfoTelefon {margin: 28px 0;}
}

/* Bauprojekte Banner blau */
.clsAktuelleBauprojekte {position: relative; display: block; width: 100%; max-width: 1290px; margin-inline: auto; overflow: hidden; line-height: 0; text-decoration: none;}
.clsAktuelleBauprojekteBild {display: block; width: 100%; height: auto;}
.clsAktuelleBauprojekteTitel {position: absolute; inset: 0 auto 0 5%; display: flex; flex-direction: column; justify-content: center; margin: 0; color: #fff; font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(1.45rem, 5vw, 4rem); font-weight: 600; line-height: 1.05; text-shadow: 0 2px 8px rgb(0 0 0 / 30%); text-transform: uppercase; animation: clsBauprojekteEinflug 800ms ease-out both;}
.clsAktuelleBauprojekteZeile {display: block;}
.clsAktuelleBauprojekte:hover .clsAktuelleBauprojekteBild {filter: brightness(0.94);}
.clsAktuelleBauprojekte:focus-visible {outline: 3px solid #f70d00; outline-offset: 3px;}

@keyframes clsBauprojekteEinflug {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clsAktuelleBauprojekteTitel {
    animation: none;
  }
}

/* LEISTUNGEN - Experten Team */
/* Expertenteam: Bild und Text nebeneinander */
.clsExpertenteam {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.clsExpertenteamBildbereich {
    min-width: 0;
}

.clsExpertenteamBild {
    display: block;
    width: 100%;
    height: auto;
}

.clsExpertenteamText {
    min-width: 0;
    color: #243e57;
    font-family: "Open Sans", sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}

.clsExpertenteamText .clsExpertenteamDachzeile {
    margin: 0 0 4px;
    color: #f50000;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.clsExpertenteamText .clsExpertenteamTitel {
    margin: 0 0 16px;
    color: #111111;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.clsExpertenteamText > p {
    margin: 0 0 16px;
}

.clsExpertenteamText > p:last-child {
    margin-bottom: 0;
}

/* Mobil: Bild oberhalb des Textes */
@media (max-width: 767px) {
    .clsExpertenteam {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* 10 gute gründe Box */
/* Box Container */
.schlamp-gruende-box {
    width: 100%;
    margin: 15px auto;
    background-image: url('/images/startseite/SCHLAMP_Modul_10Gruende.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 301px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Textbereich */
.schlamp-gruende-content {
    text-align: center;
    color: #fff;
    max-width: 80%;
}

/* Zeile 1 */
.schlamp-gruende-headline {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

/* Zeile 2 */
.schlamp-gruende-subtext {
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

/* Zeile 3 */
.schlamp-gruende-link a {
    font-weight: 600;
    font-style: italic;
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    transition: opacity 0.3s ease;
}

.schlamp-gruende-link a:hover {
    opacity: 0.75;
    color: #fff;
}

/* Responsive */
@media (max-width: 959px) {
  .clsImgHide {display: none;}

}

@media (max-width: 768px) {
    .schlamp-gruende-box {
        min-height: 200px;
        padding: 30px 15px;
    }

    .schlamp-gruende-content {
        max-width: 95%;
    }

    .schlamp-gruende-headline {
        font-size: 1.4rem;
    }

    .schlamp-gruende-subtext,
    .schlamp-gruende-link a {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .schlamp-gruende-headline {
        font-size: 1.1rem;
    }

    .schlamp-gruende-subtext,
    .schlamp-gruende-link a {
        font-size: 0.95rem;
    }
}

/* Immobilien - Wohntraumfinder-Banner */
.clsWohntraumBanner {
    width: 100%;
    max-width: 1290px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    background-image: url("/images/immobilien/SCHLAMP_Modul_Wohntraumfinder.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.clsWohntraumBannerText {
  width: 46%;
  margin-left: auto;
  margin-right: auto;
  padding: 44px 0; 
  box-sizing: border-box;
  text-align: center;
}
.clsWohntraumBannerText a {
    color: #fff;
  font-weight: 700;
  font-family: Oswald;
  font-size: 1.7em;
  line-height: 1.6em;
  text-decoration: none;
}

/* Immobilien - Referenzen-Banner */
.clsReferenzenBanner {
    width: 100%;
    max-width: 1290px;
    aspect-ratio: 1140 / 339;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    background-image: url("/images/immobilien/SCHLAMP_Modul_Referenzen.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.clsReferenzenBannerText {
    width: 46%;
    margin-left: 52%;
    padding: 24px 0;
    box-sizing: border-box;
}

.clsReferenzenBannerIntro {
    margin: 0 0 16px;
    color: #6b8199;
    
    font-size: clamp(0.9rem, 1.7vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.clsReferenzenBannerTitel {
    margin: 0 0 8px;
    color: #000000;
    font-family: Oswald, Arial, sans-serif;
    font-size: clamp(2rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
}

.clsReferenzenBannerLink {
    display: inline-block;
    color: #6b8199;
    
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1.3;
    text-decoration: none;
}

.clsReferenzenBannerLink:hover {
    color: #243e57;
    text-decoration: underline;
}

.clsReferenzenBannerLink:focus-visible {
    outline: 2px solid #243e57;
    outline-offset: 4px;
}

/* Mobil: Betonfläche als Hintergrund für den Text */
@media (max-width: 600px) {
    .clsReferenzenBanner {
        aspect-ratio: auto;
        min-height: 280px;
        background-position: right center;
    }

    .clsReferenzenBannerText {
        width: 100%;
        margin: 0;
        padding: 28px 0;
        text-align: center;
    }


    .clsReferenzenBannerTitel {
        font-size: 2.8rem;
    }

    .clsReferenzenBannerLink {
        font-size: 1.2rem;
    }
}

/* --- Kontaktform Startseite --- */
/* Grid Container */
.clsKontaktGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1290px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* Linke Spalte – Bild */
.clsKontaktBild {
    line-height: 0;
    overflow: hidden;
}

.clsKontaktBild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rechte Spalte – Formular */
.clsKontaktFormBereich {
    background-color: #273f59;
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Überschrift */
.clsKontaktHeadline {
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

/* Formular */
.clsKontaktForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Input Felder */
.clsKontaktInput {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    color: #333;
    background-color: #ffffff;
    border: none;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.clsKontaktInput::placeholder {
    color: #666;
}

.clsKontaktInput:focus {
    outline: 2px solid #6b8199;
}

/* Fehlermeldung */
.clsKontaktFehler {
    color: #ffcccc;
    font-size: 0.875rem;
    margin: 0;
    display: none;
    padding: 6px 0;
}

.clsKontaktFehler.clsAktiv {
    display: block;
}

/* Button */
.clsKontaktButton {
    background-color: #6b8199;
    color: #ffffff;
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    padding: 14px 30px;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 8px;
    transition: background-color 0.3s ease;
    min-width: 160px;
    text-align: center;
}

.clsKontaktButton:hover {
    background-color: #536f87;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .clsKontaktHeadline {
        font-size: 1.8em;
    }
}

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

    .clsKontaktBild {
        max-height: 240px;
    }

    .clsKontaktFormBereich {
        padding: 25px 20px;
    }

    .clsKontaktHeadline {
        font-size: 1.5em;
    }

    .clsKontaktButton {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .clsKontaktHeadline {
        font-size: 1.3em;
    }
}

@media only screen and ( max-width: 959px) {
h1 {font-size: 2.2em;}
h2 {font-size: 1.6em; line-height: 2rem;}
body {font-size: 0.9em !important;}
}
@media only screen and ( max-width: 767px ) {
h1 {font-size: 1.8em;}
h2 {font-size: 1.4em; line-height: 2rem;}
body {font-size: 0.85em !important;}
.clsImgSmall {width: 50%;}
}
@media only screen and ( max-width: 440px ) {
h1 {font-size: 1.8em;}
h2 {font-size: 1.4em; line-height: 2rem;}
h3 {font-size: 1.1rem;}
body {font-size: 0.85em !important;}
.clsImgSmall {width: 50%;}
.clsUmbruch::after {content: '\A'; white-space: pre;}
}
@media (max-width: 767px) {
  .clsHeroIntro,
  .clsHeroSealLink {
    display: none !important;
  }

  .clsHeroSection {
    min-height: 560px;
    height: 560px;
  }

  .clsHeroSlide {
    padding: 32px 0 24px;
  }

  .clsHeroOverlayBox {
    padding: 24px 22px 26px;
  }

  .clsHeroButton {
    margin-top: 24px;
    padding: 14px 16px;
  }

  .clsHeroButtonLabel {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 440px) {
  #header_main.header_main {
    align-items: center;
  }

  #header_main .logo {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 12px 0 8px 20px !important;
  }

  #header_main .mobile-logo-image {
    width: min(280px, calc(100vw - 100px));
    max-width: 280px;
    height: auto;
  }

  #header_main .menu-toggle {
    order: 2;
    flex: 0 0 38px;
    margin: 10px 20px 8px 10px;
  }

  #header_main #socialmedia {
    order: 3;
    flex: 0 0 100%;
    margin: 0 0 10px;
  }
}

/* Team-Kontakte mobil: Joomla-E-Mail-Links nicht erneut als Raster darstellen. */
@media (max-width: 760px) {
  .clsTeamProfil .clsTeamKontakt { width: 100%; min-width: 0; gap: 14px; }
  .clsTeamProfil .clsTeamKontakt > a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; max-width: 100%; }
  .clsTeamProfil .clsTeamKontaktBezeichnung { white-space: nowrap; }
  .clsTeamProfil .clsTeamKontakt > a > span:last-child { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
  .clsTeamProfil .clsTeamKontakt joomla-hidden-mail a { display: inline; overflow-wrap: anywhere; word-break: normal; }
}


/* Top-1 mobil: Video vor Firmenzeile und Hauptüberschrift. */
@media (max-width: 767px) {
  #mod-custom119 { display: flex; flex-direction: column; }
  #mod-custom119 > .clsTopVideoBox { order: -1; float: none !important; width: 100% !important; margin: 0 0 20px !important; flex-shrink: 0; }
  #mod-custom119 > .clsRedUppMargin { margin-top: 0; }
  #mod-custom119 > h2 { margin-top: 6px; }
}


/* Modul 120: vorhandenen Link auf die gesamte Box erweitern. */
#mod-custom120 .schlamp-gruende-box { position: relative; }
#mod-custom120 .schlamp-gruende-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#mod-custom120 .schlamp-gruende-box:focus-within { outline: 3px solid #273f59; outline-offset: 3px; }

/* Hauptmenü-Heros: maximal 600 px; Startseite ausgenommen (07.11.2026). */
:is(#layerslideshow131, #layerslideshow135, #layerslideshow136, #layerslideshow138, #layerslideshow139) .img-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Eigene Modulklasse: Titel ungefähr 1 cm über dem unteren Rand. */
.clsHeroUeberUns .info {
  align-items: flex-end;
  box-sizing: border-box;
  padding-bottom: 38px;
}
.clsHeroUeberUns .info-wrapper { padding: 0; }
.clsHeroUeberUns .layerslideshow-title { margin: 0; }
@media (max-width: 767px) {
  .clsHeroUeberUns .info { padding-bottom: 24px; }
  .clsHeroUeberUns .layerslideshow-title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* Präzisierung gegen die spezifischeren J51-Modulregeln. */
:is(#layerslideshow131, #layerslideshow135, #layerslideshow136, #layerslideshow138, #layerslideshow139) .img-fill { height: clamp(220px, 31.25vw, 600px) !important; max-height: 600px; }
:is(#layerslideshow131, #layerslideshow135, #layerslideshow136, #layerslideshow138, #layerslideshow139) .img-fill > img { height: 100% !important; min-height: 0 !important; object-fit: cover; object-position: center; }
:is(#layerslideshow131, #layerslideshow135, #layerslideshow136, #layerslideshow138, #layerslideshow139) .info { height: 100% !important; }
.clsHeroUeberUns #layerslideshow138 .info { justify-content: flex-end; align-items: center; padding-bottom: 38px; }
.clsHeroUeberUns #layerslideshow138 .info-wrapper { padding: 0; }
@media (max-width: 767px) {
 .clsHeroUeberUns #layerslideshow138 .info { padding-bottom: 24px; }
 .clsHeroUeberUns #layerslideshow138 .layerslideshow-title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* Modul 206: Tastaturfokus auf dem vollständig verlinkten Banner. */
#mod-custom206 .clsReferenzenBanner > a:focus-visible { outline: 3px solid #243e57; outline-offset: -3px; }


/* Normaler Fließtext: mobil nicht unter die Grundschrift verkleinern.
   Nur einfache Textabsätze und Listen; Spezialmodule bleiben unberührt. */
@media only screen and (max-width: 959px) {
  .mod-custom.custom > :is(p, ul, ol):not([class]),
  .mod-custom.custom > .clsBottom1 > :is(p, ul, ol):not([class]),
  .com-content-article__body > :is(p, ul, ol):not([class]) {
    font-size: 1rem;
    line-height: 1.35;
  }
}