@charset "UTF-8";
/* Overpass - Thin (100) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal; }
/* Overpass - ExtraLight (200) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal; }
/* Overpass - Light (300) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }
/* Overpass - Regular (400) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }
/* Overpass - Medium (500) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }
/* Overpass - SemiBold (600) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }
/* Overpass - Bold (700) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }
/* Overpass - ExtraBold (800) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal; }
/* Overpass - Black (900) */
@font-face {
  font-family: 'Overpass';
  src: url("../Fonts/Overpass/Overpass-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal; }
.page-147 h3, .page-147 .card-body h4 {
  border-bottom: 0px !important; }

span.cm-list-title {
  display: none !important; }

p.cm-list-description {
  margin-top: -8px !important; }

.card-panel {
  background: #6aa68c;
  border: 0px;
  padding: 30px;
  color: #fff; }

.card-panel h2, .card-panel h3 {
  color: #fff !important;
  border-bottom: solid #fff 0.6px; }

h5.card-subtitle {
  font-style: italic;
  font-weight: 100;
  font-size: 0.9em; }

@media (min-width: 1200px) {
  .pagelevel-1 .container-fluid, .container-mainnavigation.container-fluid {
    padding-left: 10vw;
    /* 10% auf beiden Seiten, ergibt 80% max Inhalt */
    padding-right: 10vw; } }
.btn-group.powermail_multistep_navigation {
  margin-bottom: 60px;
  display: none; }

body {
  font-family: Overpass !important; }

.tx-powermail button.btn.btn-secondary.active {
  background: #0057B7; }

div#c543 {
  color: #fff !important;
  background: #0057a4;
  margin: 0 0 0px;
  text-align: center; }

div#c561, div#c561 .frame-container {
  margin: 0px !important;
  padding: 0px !important;
  max-width: 100% !important;
  width: 100% !important; }

#c560 .frame-container {
  padding: 30px;
  margin-top: -150px;
  background: #fff; }

div#c543 h3 {
  font-size: 1.5em;
  margin: 0px !important;
  color: #fff !important; }

div#c8 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  margin: 0px auto;
  margin-top: 0px !important; }

div#c9 h1, div#c9 h2, .carousel-fullscreen h1.carousel-header, .carousel-fullscreen h2, .carousel-fullscreen h3 {
  background: #0057B7;
  padding: 20px;
  color: #fff !important;
                       /*
width: max-content;*/
  max-width: 80vw; }

.carousel-inner, .carousel-item {
  max-height: 70vh; }

.frame-type-carousel_fullscreen, .frame-type-carousel_fullscreen .frame-container, carousel-fullscreen {
  width: 100%;
  max-width: unset;
  padding: 0px;
  max-height: 70vh;
  overflow: hidden; }

div.bg-primary {
  background-color: #0057B7 !important; }

.landing_ueber_uns, .landing_vorteile {
  font-size: 1.4em;
  font-weight: 200; }

.tx-powermail {
  font-size: 0.6em !important; }

legend.powermail_legend {
  display: none; }

.tx-powermail .container-fluid {
  padding: 0px; }

.kontakt .card-group-element-item {
  max-width: 300px; }

.tx-powermail h3 {
  font-size: 2em;
  padding: 30px 0px; }

.texticon-left .texticon-content *:first-child, .texticon-right .texticon-content *:first-child {
  margin-top: 50px; }

#c583 .texticon-left .texticon-content *:first-child, .texticon-right .texticon-content *:first-child
.texticon-left .texticon-icon {
  margin-top: 25px; }

button.cm-btn.cm-btn-success {
  background: #0057B7 !important;
  color: #fff !important; }

.radio-image-selection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center; }

.radio-image-option {
  position: relative;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 8px;
                   /*
overflow: hidden;*/
  transition: 0.3s ease-in-out;
  cursor: pointer; }

.radio-image-input {
  display: none; }

.radio-image-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  text-align: center; }

.radio-image {
  width: 100px;
  height: auto;
  border-radius: 5px;
  transition: all 0.3s ease-in-out; }

.radio-image-text {
  font-size: 14px;
  color: #333;
  margin-top: 5px; }

/* Hover-Effekt */
.radio-image-option:hover .radio-image-label {
  transform: scale(1.05); }

/* Markierte Radio-Option */
.radio-image-input:checked + .radio-image-label {
  border: 2px solid #0057B7;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  background-color: rgba(0, 123, 255, 0.1); }

.anfragelink {
  white-space: nowrap;
  font-weight: bold;
  padding: 10px 20px; }

fieldset.powermail_fieldset {
  display: block !important;
  /* Powermail könnte display: none setzen, das wird überschrieben */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  visibility: hidden;
  position: absolute;
  width: 100%; }

fieldset.powermail_fieldset[style*="display: block;"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  position: static; }

form.powermail_form {
  background: #d7e3f1;
  padding: 20px;
  border: solid grey 1px;
  min-height: 300px; }

.powermail_fieldwrap_type_submit input {
  background: #0057B7;
  color: #fff !important; }

.powermail_fieldwrap_type_submit input:hover {
  background: #004592 !important; }

.powermail_tab_navigation {
  display: flex;
  justify-content: space-between;
  /* Verteilt die Buttons */ }

.powermail_tab_navigation .btn-primary {
  margin-left: auto;
  /* Schiebt den Weiter-Button nach rechts */ }

.powermail_radiowrap + .powermail_radiowrap {
  margin-block-start: unset; }

/* Größerer und dickerer Slider */
.styled-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  /* Dickere Höhe */
  background: linear-gradient(to right, #0057B7, #0057B7);
  /* Schicker Verlauf */
  border-radius: 6px;
  outline: none;
  opacity: 0.9;
  transition: opacity 0.2s; }

/* Schöner Hover-Effekt */
.styled-slider:hover {
  opacity: 1; }

/* Der "Knopf" des Sliders */
.styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  /* Größerer Punkt */
  height: 24px;
  background: white;
  border: 3px solid #0057B7;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
  margin-top: -8px !important; }

.styled-slider::-webkit-slider-thumb:hover {
  background: #0057B7; }

/* Für Firefox */
.styled-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid #0057B7;
  border-radius: 50%;
  cursor: pointer; }

/* Container für die Wert-Anzeige */
#slider_value_container {
  text-align: center;
  font-size: 24px;
  /* Größere Schrift */
  font-weight: bold;
  margin-top: 10px;
  color: #0057B7; }

/* Basis-Styling für den Fortschrittsbalken */
#progress-container {
  width: 100%;
  background-color: #afafaf;
  border-radius: 5px;
  position: relative;
  height: 25px;
  margin-bottom: 20px;
  overflow: hidden; }

/* Fortschrittsbalken */
#progress-bar {
  height: 100%;
  width: 0%;
  background-color: #0057B7;
  transition: width 0.5s ease-in-out; }

/* Fortschrittstext */
#progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: white; }

.fade {
  opacity: 0;
  transition: opacity 2s ease-in-out;
  /* Sanfter Übergang */ }

.fade.show {
  opacity: 1; }

h3 {
  border-bottom: solid #fff 1px;
  font-size: 1.7em;
  margin-bottom: 20px !important; }

h1, h2, h3 {
  font-size: 1.7em;
  color: #0057B7 !important;
  font-weight: 700; }

.bg-primary h1, .bg-primary h2, .bg-primary h3 {
  color: #fff !important; }

.form-label {
  display: none; }

input {
  height: 55px; }

textarea {
  height: 200px; }

.row.gx-5.bg-primary.text-white.landing_kontakt {
  padding-inline: 15%;
  overflow: visible;
  font-size: 1.5em; }

#c110 .list-normal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  /* Entfernt die Standard-Punkte */
  padding: 0; }

#c110 .list-normal li {
  flex: 1 1 45%;
  /* Zwei Spalten */
  max-width: 45%;
  display: flex;
  align-items: center;
  /* Zentriert den Text vertikal mit dem Icon */
  gap: 8px;
  /* Abstand zwischen Icon und Text */ }

#c110 .list-normal li::before {
  content: "\F26B";
  /* Unicode für Bootstrap Icon (Checkmark) */
  font-family: "bootstrap-icons";
  /* Bootstrap Icons einbinden */
  font-size: 1.2rem;
  color: #ffffff;
  /* Grün */ }

.bg-primary button.btn.btn-primary {
  background: #fff; }

.bg-primary button.btn.btn-primary {
  color: #0057B7; }

a:hover {
  cursor: pointer; }

a {
  text-decoration: none; }

.bi, .btn {
  font-size: inherit; }

.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {
  display: inline-block;
  margin-right: 8px; }

p.header-footer {
  font-weight: bold;
  font-size: 1.5em;
  border-bottom: solid #fff 0.5px;
  margin-bottom: 20px; }

.accordion-button, .accordion-button.collapsed {
  background-color: #0057B7 !important;
  color: #fff !important;
  font-weight: 800; }

.bp-page-header.navbar.nav-scrolled {
  position: fixed;
  /* Navigation wird fixiert */
  padding: 1em;
  /* Anpassung des Innenabstands */
  transition: padding 0.3s ease, background-color 0.3s ease;
  /* Weicher Übergang für Änderungen */ }

.bp-page-header.navbar {
  transition: all 0.3s ease-in-out;
  /* Übergang für alle Eigenschaften */ }

.anfrage {
  white-space: nowrap; }

.btn-primary {
  color: #fff; }

.card {
  background: #0057B7;
  color: #fff; }

.stellenanzeigen .card {
  background: none !important;
  color: inherit; }

.stellenanzeigen a.card-link {
  background: #0057B7;
  color: #fff;
  display: block;
  padding: 10px 20px; }

.stellenanzeigen a.card-link:hover {
  color: #fff !important; }

.karriere-info a {
  color: #fff !important;
  font-weight: 600; }

.stellenanzeige h4 {
  background: #0057B7;
  padding: 15px;
  display: block;
  color: #fff; }

#powermail_field_upload {
  height: auto; }

.card-body h4, .card-body h3 {
  font-weight: 600;
  border-bottom: solid #fff 0.5px; }

a.btn.btn-info {
  background: #fff;
  color: #595959; }

a.btn.btn-info:hover {
  background: #d6ece3;
  color: #595959; }

.card-body a {
  white-space: nowrap; }

.ansprechpartner .card-group-element-item {
  --cardgroup-columns: 1; }

/*
.frame-container.frame-container-default {
    max-width: inherit;
}*/
/* Standard-Stil für die Desktop-Ansicht */
.quick-contact {
  position: fixed;
  top: 50%;
  /* Zentriert am rechten Bildrand */
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 1000; }

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #0057B7;
  /* Primärfarbe */
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: none;
  font-size: 24px; }

.contact-icon:hover {
  background-color: #003f84;
  /* Dunklere Farbe bei Hover */
  transform: scale(1.05); }

footer .col-md-4 {
  margin-bottom: 25px; }

.page-26 .row.kontakt, .page-12 .row.kontakt, .page-13 .row.kontakt {
  display: none; }

/* Preise Cards */
.frame-type-card_group.frame-space-before-medium h2, .frame-type-card_group.frame-space-before-medium h3 {
  color: #fff !important; }

.frame-type-card_group.frame-space-before-medium {
  padding: 2rem 1rem;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem; }

.frame-type-card_group.frame-space-before-medium .card-group-element {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  width: 100%; }

.frame-type-card_group.frame-space-before-medium .card-group-element-item {
  flex: 1 1 300px;
  max-width: 340px;
  background-color: #004592;
  /* oder #009ec3 / eure Signalfarbe */
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease; }

.frame-type-card_group.frame-space-before-medium .card-group-element-item:hover {
  transform: translateY(-5px); }

.frame-type-card_group.frame-space-before-medium .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 55px 29px 10px; }

.frame-type-card_group.frame-space-before-medium .card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
  text-align: center; }

.frame-type-card_group.frame-space-before-medium .card-body h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0px !important; }

.frame-type-card_group.frame-space-before-medium .list-normal {
  list-style: none;
  padding: 0;
  margin: 20px 0 2rem 0; }

.frame-type-card_group.frame-space-before-medium .list-normal li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem; }

.frame-type-card_group.frame-space-before-medium .list-normal li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1; }

.frame-type-card_group.frame-space-before-medium .btn-anfrage {
  display: inline-block;
  background-color: #ffffff;
  color: #0077b6;
  font-weight: bold;
  text-align: center;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease; }

.frame-type-card_group.frame-space-before-medium .btn-anfrage:hover {
  background-color: #e3f2fd;
  color: #005a87; }

/* Preise Cards Ende */
/* Mobile Ansicht */
@media (max-width: 991px) {
  /* 1) container-fluid bündig, aber nur wenn darin ein .bild-zero vorkommt */
  .container-fluid:has(.bild-zero) {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  /* 2) Nur die Rows „glattziehen“, die wirklich .bild-zero enthalten
        -> entfernt Bootstrap negative margins + Gutters, die sonst „Luft“ erzeugen */
  .container-fluid:has(.bild-zero) .row:has(.bild-zero) {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important; }

  /* 3) Columns in dieser Row ohne Innenabstand */
  .container-fluid:has(.bild-zero) .row:has(.bild-zero) > [class*="col-"],
  .container-fluid:has(.bild-zero) .row:has(.bild-zero) > .col {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  /* 4) TYPO3/Fluid Wrapper: keine Paddings/Margins und KEINE Max-Width Limits */
  .bild-zero,
  .bild-zero .frame,
  .bild-zero .frame-container,
  .bild-zero .frame-container-default,
  .bild-zero .frame-inner,
  .bild-zero .frame-type-image,
  .bild-zero .gallery-row,
  .bild-zero .gallery-item,
  .bild-zero [class*="gallery-item-size-"],
  .bild-zero figure,
  .bild-zero figure.image,
  .bild-zero picture {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important; }

  /* 5) Falls ein Flex/Grid-Sizing die Breite begrenzt: hart auf 100% setzen */
  .bild-zero .gallery-item,
  .bild-zero [class*="gallery-item-size-"] {
    flex: 0 0 100% !important; }

  /* 6) Bild vollflächig */
  .bild-zero img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; }

  /* 7) Optional: gleiche Höhe nur dort, wo es gebraucht wird (nicht global!) */
  .row:has(.bild-zero) {
    align-items: stretch; } }
.scroll-top {
  display: none; }

iframe {
  width: 100%;
  max-width: 100% !important; }

@media (min-width: 768px) {
  .navbar li {
    margin-left: 1em;
    margin-right: 1em; } }
/*
@media (min-width: 768px) and (max-width: 1699px) {

span.nav-link-text {
    font-size: 0.8em;
}
}
*/
/* Mobile Ansicht */
@media (min-width: 768px) and (max-width: 1399px) {
  span.nav-link-text {
    font-size: 0.9em;
    white-space: nowrap; } }
/* Mobile Ansicht */
@media (max-width: 991px) {
  .texticon-icon {
    display: none; }

  h1, h2, h3 {
    font-size: 1.3em; }

  .textmedia, .textpic {
    gap: 0px; } }
/* Mobile Ansicht */
@media (max-width: 768px) {
  .quick-contact {
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    background: rgba(0, 87, 183, 0.95);
    /* Leichte Transparenz für mobile UX */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transform: translateY(0);
    /* Entfernt vertikales Zentrieren */
    display: none; }

  #c560 .frame-container {
    margin-top: -50px; }

  div#c542 .card-group-element.card-group-element-columns-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Abstand zwischen den Cards */ }

  div#c542 .card-group-element.card-group-element-columns-4 .card-group-element-item {
    flex: 0 0 calc(50% - 10px);
    /* 2 Spalten mit etwas Abstand */
    max-width: calc(50% - 10px); }

  div#c542 .card-title {
    font-size: 0.8rem;
    white-space: normal; }

  div#c542 .card-body {
    padding: 10px; }

    /*
    .card-panel
    {
        padding: 0px;
    }
    
*/
  ul.list-normal {
    padding-inline-start: 10px; }

  .radio-image-selection-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Spalten */
    gap: 15px;
    /* Abstand zwischen den Elementen */
    width: 100%; }

  .radio-image-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    width: 100%; }

  .radio-image-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center; }

  .radio-image {
    max-width: 100%;
    height: auto; }

  #powermail_field_wobefindetsichdiezuverwaltendeimmobilie::placeholder {
    font-size: 11px; }

  .contact-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
    background-color: transparent;
    /* Hintergrund auf Mobile entfernen */
    box-shadow: none; }

  a.scroll-top {
    display: none;
    order: 4;
    /* Sorgt dafür, dass es als letztes Icon erscheint */ }

  .card.card-panel .card-body {
    padding: 0px; }

  .texticon-left .texticon-content *:first-child, .texticon-right .texticon-content *:first-child {
    margin-top: 10px; }

  .landing_ueber_uns, .landing_vorteile, div#c9 h1, div#c9 h2, .carousel-fullscreen h1.carousel-header, .carousel-fullscreen h2, .carousel-fullscreen h3 {
    font-size: 1em !important; }

  body {
    overflow-x: hidden; }

  .quick-contact a.scroll-top {
    display: block;
    position: relative;
    bottom: unset;
    right: unset;
    background: none;
    width: unset;
    height: auto !important;
    margin-top: 6px; }

  #c110 .list-normal li {
    flex: 1 1 100%;
    /* Zwei Spalten */
    max-width: 100%;
    display: flex;
    align-items: center;
    /* Zentriert den Text vertikal mit dem Icon */
    gap: 8px;
    /* Abstand zwischen Icon und Text */ }

  footer.footer.bg-dark.text-white.py-4 {
    padding-bottom: 120px !important; }

  div#c9 h1, div#c9 h2 {
    font-size: 1.2em; }

  .contact-icon {
    width: 45px;
    /* Kleinere Breite */
    height: 45px;
    /* Kleinere Höhe */
    font-size: 20px;
    /* Kleinere Icons */
    border-radius: 4px;
    /* Leicht abgerundete Ecken */ } }