/* -----Beispiele fuer Farben und Schrifteinbindungen------------*/
/*Farben: Braun: rgb(212,205,197)*/


:root{
  --hellgrau: #d7e1ee; 
  --dunkelblau: #003063;
  --braun: #d4cdc5;
  --hellblau: #7cadea;
}

*{
  transition: all 0.3s ease-out;
}
html {
  scroll-behavior: smooth;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/UbuntuSans-Regular.eot');
    src: url('../fonts/UbuntuSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/UbuntuSans-Regular.w<a href="mailto:info@immobilien-vonderhei.de"><div class="charlotte-down charlotte-karr">&nbsp;</div></aoff2') format('woff2'),
        url('../fonts/UbuntuSans-Regular.woff') format('woff'),
        url('../fonts/UbuntuSans-Regular.ttf') format('truetype'),
        url('../fonts/UbuntuSans-Regular.svg#UbuntuSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu Bold';
    src: url('../fonts/UbuntuSans-Bold.eot');
    src: url('../fonts/UbuntuSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/UbuntuSans-Bold.woff2') format('woff2'),
        url('../fonts/UbuntuSans-Bold.woff') format('woff'),
        url('../fonts/UbuntuSans-Bold.ttf') format('truetype'),
        url('../fonts/UbuntuSans-Bold.svg#UbuntuSans-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Regular.eot');
    src: url('../fonts/Caveat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Caveat-Regular.woff2') format('woff2'),
        url('../fonts/Caveat-Regular.woff') format('woff'),
        url('../fonts/Caveat-Regular.ttf') format('truetype'),
        url('../fonts/Caveat-Regular.svg#Caveat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Caveat Bold';
    src: url('../fonts/Caveat-Bold.eot');
    src: url('../fonts/Caveat-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Caveat-Bold.woff2') format('woff2'),
        url('../fonts/Caveat-Bold.woff') format('woff'),
        url('../fonts/Caveat-Bold.ttf') format('truetype'),
        url('../fonts/Caveat-Bold.svg#Caveat-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body {
  font-family: 'Ubuntu', sans-serif; font-size: medium;
  color: var(--dunkelblau);
}

/*------------------------Hero-Bild----------------------*/
.hero{
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
}

/* BG bestimmt die Höhe */
.hero__bg{ position: relative; z-index: 0; }
.hero__bg img{ width:100%; height:auto; display:block; }

/* Overlay liegt drüber */
.hero__content{
  position: absolute;
  inset: 0;
  z-index: 10;           /* bewusst hoch */
  pointer-events: none;
}

/* Overlay-Container */
.hero__overlay{
  position: absolute;    /* <- wichtig */
  left: clamp(40px, 16vw, 260px);
  bottom: clamp(16px, 4vw, 80px);
  z-index: 11;
}

/* TYPO3-Frames/Abstände neutralisieren */
.hero__overlay .frame,
.hero__overlay figure,
.hero__overlay .ce-image,
.hero__overlay .ce-gallery{
  margin: 0;
  padding: 0;
}

/* Overlay-Bild skalieren (egal ob img in picture/figure) */
.hero__overlay img{
  width: min(900px, 70vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
#service .hero__overlay img{
  width: min(600px, 70vw);
}

/* Animation auf den ganzen Overlay-Block */
.hero__overlay.fly-in{
  opacity: 0;
  transform: translateX(-148px);
  animation: flyInLeft 3s ease-out .2s forwards;*/
 
}
.hero__overlay.fly-in h3 {
  color:#fff;
  font-family:'Caveat Bold';
  font-size: 3.5rem;
  text-shadow: 2px 2px 2px #000;
}

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

@media (prefers-reduced-motion: reduce){
  .hero__overlay.fly-in{ animation:none; opacity:1; transform:none; }
}


/*------------------------------Ende Hero-Bild---------*/
.font-caveat{
  font-family: 'Caveat', sans-serif;
  font-size: 2em;
  color: var(--dunkelblau);
}
.font-caveat-bold{
   font-family: 'Caveat Bold', sans-serif;
  font-size: 2em;
  color: var(--dunkelblau);
}
nav.bg-dark{
  position: fixed;
  top: 42px;
  width: 100%;
  z-index: 10000;
  background-color: var(--dunkelblau) !important;
  height: auto;
  padding-top: .25rem;
  padding-bottom: .25rem;
}
nav.sticky{
  top:0;
}

a.nav-link{
  color:#fff !important;
  padding: .35rem 15px 0 !important;
  display: flex;
  align-items: center;
  line-height: 1.8;
}
a.nav-link.active, .nav-link:focus, .nav-link:hover {
  color:var(--hellblau) !important;
  font-weight: bold;
}
.nav-item.first .nav-link.active{
  padding-top:11px !important;  
}
.nav-home-icon{
  display:block;
  width:28px;
  height:28px;
  background:url("/fileadmin/Media/img/Icons/Home_Gerd-von-der-Heide.png") no-repeat center;
  background-size:contain;
  transform: translateY(-6px);
}

.navbar-static-top {
  margin-bottom: 19px;
}
.navbar-brand img{
  position: fixed;
  top: -10px;
  left: 10%;
  z-index: 10000;
  width: 350px;
  height: auto;
}

nav.sticky .navbar-brand img {
  width: 300px;
  top:-35px;
}
.ivd{
   padding: 10px;
}

img{
  width: 100%;
  height: auto;
}
a{
  color:var(--dunkelblau);
}

h1{
  font-size: 4.5em;
  margin-bottom: 0.6em;
  padding-top: 0;
}
h1, h2, h3, h4 {
  font-family: 'Ubuntu Bold', sans-serif;
}
h2{
  font-size: 2.7em;
}
#verkauf h3{
  font-size: 1.55rem;
}
.bg_hellgrau{
  background-color: var(--hellgrau);
}
.bg_braun{
  background-color: var(--braun);
}
.bg_braun .row{
  display: flex;
  align-items: center;
}
.bg_braun.provision .row{
  align-items:baseline;
}
.kacheln figure {
  margin: 30px 30px;
  background-color: var(--dunkelblau);
  border-radius: 10px;
  box-shadow: 7px 7px 19px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 7px 7px 19px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 7px 7px 19px 0px rgba(0,0,0,0.75);
  padding: 20px 20px 10px 20px;
}
.kacheln figure:hover {
 box-shadow: none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;}

#verwaltung{
  background-image: url(/fileadmin/Media/img/Hintergruende/GerdVonDerHeide_BergedorferSchloss-Home.jpg);
  padding: 45px 0 10px;
  background-repeat: no-repeat;
  background-size: cover;
}
#verwaltung .bg_braun.text-feld{
  box-shadow: 7px 7px 19px 0px rgba(0,0,0,0.75);
  border-radius: 10px;  
  padding: 30px 20px;
  color:var(--dunkelblau);
}
#verwaltung .card{
  width: 200px;
}
#verwaltung .card:first-of-type{
  margin-bottom: 70px;
}
#verwaltung .card, #verwaltung .card img, #verwaltung .team-style2 .ce-image {
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  border: none;
}
#verwaltung .card-body{
  padding: 0 !important;
}
 .verkauf h2 {
font-size: 3.7em;
}

.verkauf h4 {
  font-size: 3em;
}
.verkauf p span.font-caveat{  
  transform: rotate(-6deg);
  bottom: 0;
  position: absolute;
  font-size: 3.5rem;
  right: 11rem;
  top: 8rem;
}
.container.youtube{
  max-width: 1000px;
}
.media2click-controls .media2click-button {
  background-color: rgba(0,0,0,8) !important;
}
.media2click-placeholder-inner { 
background-color: rgba(255, 255, 255, 0.75) !important;
}
.media2click-placeholder.media2click-haspreview:hover .media2click-placeholder-inner, .media2click-placeholder.media2click-haspreview:focus-within .media2click-placeholder-inner {
    background-color: rgba(255, 255, 255, 0.95)!important;
}
.media2click-placeholder{
  font-size: 2.0rem !important; 
}
.media2click-placeholder.media2click-haspreview {
  text-shadow:0 !important;
  font-weight: bold;
}

a.globalCss1 {
  background-image: url(/fileadmin/Media/img/Logos/logo_immo1.svg);
  background-repeat: no-repeat;
  background-size: 37%;  
  margin-right: 0;
  margin-left: 0;
  padding-left: 97px;
}
.bg_braun .card {
  width: 200px;
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  border: none;
}
.card:hover{
  box-shadow: 7px 7px 10px 0px rgba(0,0,0,.3);
  -webkit-box-shadow: 7px 7px 10px 0px rgba(0,0,0,.3);
  -moz-box-shadow:  7px 7px 10px 0px rgba(0,0,0,.3);
}



#karriere .col-md-4 img{
 width: 250px;
}
/*#karriere figure{padding: 0 20px 10px 20px;}*/

 #karriere img:hover{
    box-shadow: 7px 7px 10px 0px rgba(0,0,0,.3);
  -webkit-box-shadow: 7px 7px 10px 0px rgba(0,0,0,.3);
  -moz-box-shadow:  7px 7px 10px 0px rgba(0,0,0,.3);
}
#karriere .ce-gallery figcaption {
  font-family: 'Caveat Bold';
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 0;
}

/*#karriere blockquote:before{ 
  display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
   font-family: "bootstrap-icons";
   font-weight: 900; 
    font-size: 2rem;
   padding-right: 0.5rem;
    content: '\F6B0';
}*/
 
#karriere blockquote p{
  margin-left: 2rem;
}

/*----------------------------------------------------------------------CHARLOTTE--------------------------------------------------*/
.charlotte .cec-image-wrap{
  background-color: var(--hellgrau);
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
}
.charlotte .card img{
  width: 160px;
  height: 190px;
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
}
/*.charlotte {display: none; visibility: hidden;}*/

.charlotte-down { 
	-webkit-animation: download-cha 2s infinite;
	animation: download-cha 2s infinite; 
    visibility: hidden; display: none;
    position: fixed; right: -26px; top:60%; width: 100px; height: 100px; 
}
.charlotte-karr { 
	-webkit-animation: karriere-cha 2s infinite;
	animation: karriere-cha 2s infinite; 
     position: fixed; right: -26px; top:70%; width: 100px; height: 100px; 
}

/*----------------------CHARLOTTE BRRIEREFREI 01.04.26-------------------------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.charlotte {
  position: relative;
  overflow: hidden;
}

.charlotte__link {
  display: inline-block;
}

.charlotte__image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Ausgangszustand nur dann, wenn JS aktiv ist */
.js .charlotte--right .charlotte__image {
  opacity: 0;
  transform: translateX(160%);
}

.js .charlotte--left .charlotte__image {
  opacity: 0;
  transform: translateX(-160%);
}

/* Animation starten */
.js .charlotte.is-visible .charlotte__image {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.js .charlotte--right.is-visible .charlotte__image {
  animation-name: charlotte-enter-right;
}

.js .charlotte--left.is-visible .charlotte__image {
  animation-name: charlotte-enter-left;
}

@keyframes charlotte-enter-right {
  from {
    opacity: 0;
    transform: translateX(160%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes charlotte-enter-left {
  from {
    opacity: 0;
    transform: translateX(-160%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.charlotte__link:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 4px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .js .charlotte__image {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/*@supports not (animation-timeline: view()) {
  .charlotte__image {
    opacity: 1;
    transform: none;
    animation: none;
  }
}*/


/*---------------------------------Ende CHARLOTTE barrierefrei--------------*/
.bg_braun .card img{
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  border: none;
}
.bg_braun .card-body {
  padding: 0 !important;
}
hr{
  border-top: 1px var(--dunkelblau) solid;
  opacity:1;
  width: 80%;
}

.mitgliedschaften figure{
  padding: 10px 20px 10px 0;
}

.mitgliedschaften img{
  box-shadow: 7px 7px 10px 0px rgba(0,0,0,.3);
  -webkit-box-shadow: 7px 7px 10px 0px rgba(0,0,0,.3);
  -moz-box-shadow:  7px 7px 10px 0px rgba(0,0,0,.3);
  border-radius: 10px;
  margin: 16px 16px 16px 4px;
}
.mitgliedschaften img:hover{
   box-shadow: none;
   -webkit-box-shadow:none;
  -moz-box-shadow:none;
  border: 1px solid rgba(0,0,0,.1);
}
#qualitaet {
  background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url(/fileadmin/Media/img/Hintergruende/Hintergrund_Qualitaetsmakler.jpg);
  padding: 45px 0 10px;
  background-repeat: no-repeat;
  background-size: cover;
}
/*---------------------------------------Liste statt Tabelle - für mehr Barrierefreiheit------------------------------------*/
.steps-list {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top:0.5rem;
}

.steps-list__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 4rem 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2rem;
}

.steps-list__item::before {
  content: counter(step);
 font-family: 'Caveat Bold', cursive;
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1;
  color: #003b71;
}

.step-item {
  display: contents;
}

.step-item__icon {
  width: 3rem;
  min-height: 3rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.step-item__icon img,
.step-item__icon svg {
  max-width: 3rem;
  max-height: 3rem;
}

#verkauf h3.step-item__headline {
  margin: 0 0 .25rem;
  font-size: 1rem;
  
}

.step-item__text > *:first-child {
  margin-top: 0;
}

.step-item__text > *:last-child {
  margin-bottom: 0;
}
.step-item__text p{
  margin-bottom:0;
}



/*-----------------------------------Ende Liste--------------------------------------------*/
.table > :not(caption) > * > * {
  background-color:transparent;
  border: none;
}
.table td {
  vertical-align: middle;
}
.table .icon img{
  width: 50px;
  max-height: 50px;
}
.table td.num p{
  font-family:'Caveat Bold';
  font-size: 2.6em;
}
table p{
  margin-bottom:0;
  color: var(--dunkelblau);
}

/*--------------Maklerprovision-----------------*/
.bg_hellgrau .maklerprovision img{
  width: 102px;
  height: 102px;
}
/*------------------Seite Verkauf----------*/
.team-style2 .name .font-caveat-bold{
font-size: 1.8em;
}
.team-style2 p{
  margin-bottom:0;
  font-size: 0.8em;
}
.team-style2 .font-caveat{
  font-size: 1.5em;
}
.team-style2 .mail: before{
  
}
/* footer styles
-------------------------------------------------- */

footer {
  position: relative;
  bottom: 0;
  width: 100%; 
  background-color: var(--hellgrau);
  color:var(--dunkelblau);
}
footer a{
  color: var(--dunkelblau);
  text-decoration: none;
}
footer a:hover{
   text-decoration: underline;
}
.footer-ende{
  background-color: var(--dunkelblau);
  color:#fff;
}
.cookie{
  position: relative;
  padding-top: 1.5rem;
}
.cookie p{
  padding-left:5rem;
}
.cookie p:before{
  content:url(../../Media/img/KeksGvdH_f8199c02dd.png);
  padding-right: 1rem;  
  position: absolute;
  left: 1rem;
  bottom: -1rem;
}

/*------------------------------CSS fuer my-Extension Bild mit Hover Effekt--------------------*/
/*----Bilder mit Hover-Effekt------------------------------*/
/*----------------------TEAM-------------------------------*/


.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.team-style2 {
  margin-bottom: 10px;
  max-width: 250px;
  box-shadow: 3px 3px 3px #ccc;
  border-radius: 10px;
  background-color:#fff;
}
#verwaltung .team-style2 {
  box-shadow: none;
}
.team-style2  .ce-above .ce-gallery {
  margin-bottom: 0;
}
.team-style2 .ce-gallery figure.image{
  box-shadow: none;
  width: 100%;
}
.team-style2 .team-member-img img {
  transition: all 0.3s ease 0s; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;  
  width: 250px;
}
#ueber_uns .team-style2 .team-member-img img {
  
}
#ueber_uns .bg_braun .team-style2 .team-member-img img {
  border-radius: 0;
   border-top-right-radius: 10px;
  border-top-left-radius: 10px;  
}
.team-style2 .team-member-img:hover img {
  }
/*.team-style2 .team-description {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  opacity: 0;
  transition: all 200ms ease-in-out;
  padding: 5px;
  z-index: 9;
  
}*/

/*neu 120326---------------*/
.team-style2 .team-description {
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  padding: 5px;
  z-index: 9;
}
.team-style2:hover .team-description,
.team-style2:focus-within .team-description {
  opacity: 1;
  pointer-events: auto;
}

/*----------------------*/

.team-style2 .ce-image .ce-gallery{
  box-shadow:5px 5px 5px #ccc;
}
.team-style2 .ce-gallery figure{
  position: relative;
}
.team-style2 .funktion{
 line-height: 120%;
  margin-bottom: 1rem;
}

.team-style2 .phone, .team-style2 .mail{
  margin-bottom: 1rem;
}
.team-style2 .name p{
  font-family:'Caveat Bold';
  font-size: 1.8em;
  text-align: center;
  margin-bottom:0;
}
.team-style2 .funktion p{
  font-family:'Caveat';
  font-size: 1.5em;
  text-align: center;
}

 .info:before, .team-style2 .social-links .mail:before, .team-style2 .social-links .phone:before {
  display: block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
   font-family: "bootstrap-icons";
   font-weight: 900; 
    font-size: 1.2rem;
   padding-right: 0.5rem;
}

/*.team-style2 .social-links .info:before, .info:before{
  content: "\f4db";
}*/
.team-style2 .social-links .phone:before{
  content: "\F5C1";
}
.team-style2 .social-links .mail:before{
  content: "\f32f";
}

.team-style2 .social-links a, .social-links a{
  color: #333;
  font-weight: bold;
}

/*.team-style2 .social-links,  .social-links {
  transform: translateY(15px);
  transition: transform 300ms ease-in-out, opacity 150ms ease-in;
  opacity: 0;
  color: var(--textfarbe);
  -webkit-font-smoothing: antialiased; }*/

/*-------neu 130326-----mit visibility hidden----*/
.team-style2 .social-links,
.social-links {
  transform: translateY(15px);
  transition: transform 300ms ease-in-out, opacity 150ms ease-in, visibility 150ms ease-in;
  opacity: 0;
  
  color: var(--textfarbe);
  -webkit-font-smoothing: antialiased;
}
.team-style2:hover .social-links,
.team-style2:focus-within .social-links {
  transition-delay: 100ms, 100ms, 0s;
  opacity: 1;
 
  transform: translateY(0);
}
/*---------------Fokus implementieren-------*/
.team-style2 .social-links a:focus-visible {
  outline: 3px solid #0b4a8b;
  outline-offset: 3px;
  border-radius: 2px;
}

/*-------Ende 130326----------*/

  .team-style2 .social-links a:hover {
    opacity: 1; 
    font-weight: bold;
  }



.team-style2 .team-description-wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: 100%; }
.team-style2 .team-description-content {
  display: table-cell;
  vertical-align:top;
  padding-top: 1rem;
  text-align:center;
}
.team-style2 .team-member-img {
  position: relative;
  display: block;
  overflow: hidden;   
  margin: 0 auto; 
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
}

.charlotte-kontakt .team-style2 .team-member-img {
  background-color: var(--hellgrau);
}
.charlotte-kontakt .team-style2 .team-member-img img{
  padding-right: 70px;
  padding-top: 20px;
}
/*-----------Neu 130326 - mit visibility hidden--------------*/
/*.team-style2 .bg-cover {
  background-color: rgba(255,255,255,0.7);
  opacity: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transform: scale(2);
  transition: all 200ms ease-in-out;
  display: none;
  z-index: 1;
  border: 7px solid rgba(0,0,0,0.1);
  font-size: 19px;
  border-radius: 3px;
}*/
.team-style2 .bg-cover {
  background-color: rgba(255,255,255,0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(2);
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  z-index: 1;
  border: 7px solid rgba(0,0,0,0.1);
  font-size: 19px;
  border-radius: 3px;
}
/*-------------------*/

.team-style2 .team-member-img > img {
  transition: all 0.2s ease 0s; }

/* -----------neu am 130326--------------*/
/*.team-style2:hover .bg-cover, .team-style2:focus-within .bg-cover {
  background-color: rgba(255,255,255,0.8);
  display: block; }*/
.team-style2:hover .bg-cover,
.team-style2:focus-within .bg-cover {
  opacity: 1;
  visibility: visible;
}
/*-------------------------------*/

.team-style2:hover .social-links, .team-style2:focus-within .social-links {
  transition-delay: 100ms, 100ms;
  opacity: 1;
  transform: translateY(0); }
/*----------------Neu 130326----Verhalten auch bei Fokus---*/
/*.team-style2:hover .team-member-img > img {
  filter: blur(4px) grayscale(4%); }*/

.team-style2:hover .team-member-img > img,
.team-style2:focus-within .team-member-img > img {
  filter: blur(4px) grayscale(4%);
}
/*------------------*/


.team-style2:hover .team-description, .team-style2:focus-within .team-description {
  opacity: 1; }

.team-style2 .mt-3.text-center{
    padding-bottom:31px;
}
.team-style2 .text-left{
  text-align: center !important;
  max-width: 300px;
  margin: 0 auto 50px;
}


/*---------------NEU am 27.04.26-----------*/
.team-card {
  position: relative;
}

/* Overlay bei Maus UND Tastatur anzeigen */
.team-card:hover .team-description,
.team-card:focus-within .team-description,
.team-card:hover .bg-cover,
.team-card:focus-within .bg-cover {
  opacity: 1;
  visibility: visible;
}

/* Fokussierte Card sichtbar machen */
.team-card:focus-within {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* Telefon- und Mail-Links gut sichtbar fokussieren */
.team-card a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/*---------------------Verwaltung - Startseite----------*/
.team-style2 figcaption.image-caption{
  background-color: #fff;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  padding-bottom: 0.5rem;
}
.team-style2:hover figcaption.image-caption{
  box-shadow: 3px 3px 3px #ccc;
}

/*-----------------------ueber uns team style 2 auf braunem Hintergrund----------------------*/
#ueber_uns .bg_braun .team-style2:hover .bg-cover {
  background-color: var(--braun);
  display: block;
  background-color: rgba(212, 205, 197, 0.85);
}
/*---------geschichte-------------------*/
#geschichte {
  background-image: url(/fileadmin/Media/img/Hintergruende/GvH_UeberUns_Hintergrund_Historie.jpg);
  padding: 45px 0;
  background-size: cover;
}
#geschichte .col-md-5 img{
  width: 300px;
}
.btn-secondary {
  --bs-btn-bg: var(--dunkelblau)important!;
}
@media (min-width: 992px) and (max-width:1199px){
.team-style2 {
max-width: 220px;
}
  #verkauf h3 {
  font-size: 1.25rem;
}
  h1{
    font-size: 3.5em;
  }
  h2 {
  font-size: 2.3rem;
}
  .navbar-brand img {
   left: 7%;
    width: 260px;
  }
  .verkauf p span.font-caveat {
    right: 3rem;
  top: 6rem;
  }
}
@media (max-width: 991px) {
  nav.bg-dark {
    top:0;
    height: 60px;
  }
  .navbar-toggler{
    position: absolute;
  right: 10px;
  top: 10px;
  }
#navbarResponsive ul.navbar-nav{
  text-align: center;
  margin-top: 2.9rem;
  background-color: var(--dunkelblau);
  padding: 10px;
  border-top: 1px solid #fff;
  display: flex;
  align-items: center;
}
  a.nav-link {  
  padding: 10px 0 5px !important;
}
.navbar-brand img {
  width: 250px;
  top: -35px;
}
nav.sticky .navbar-brand img {
  width: 200px;
  top: -35px;
}
 
  .ivd{
    position: absolute;
    top:0;
    left: 10px;
  }
  main{
    margin-top: 60px;
  }
  h1{
    font-size: 2.2em;
  }
  h2, .verkauf h2{
    font-size: 1.7em;
  }
  h4, .verkauf h4{
    font-size: 2em;
  }
  .verkauf h4 span.font-caveat {
    right: 2em;
    top: 5rem;
  }
  #verwaltung .card, .bg_braun .card{
    margin: 20px auto;
    width:200px;
  }
   #verwaltung .card.verwaltung{
    margin: 20px auto;
    width: 200px;
  }
  charlotte .card img {
  width: 140px;
  height: 170px;
  }
  .kacheln figure {
    margin: 25px;
    padding: 6px;
}
  footer .col-lg-5{
    display: flex;
    align-items: start;
  }
}
@media (min-width: 768px) and (max-width: 991px){
#verwaltung .team-style2{
  margin: 20px 10px;
      }
.verkauf p span.font-caveat {
 top: 2rem;
  right:0;
}
  
}

@media (max-width: 767px) {
 
nav.sticky .navbar-brand img {
    width: 200px;
    top: -23px;
  }
  .verkauf p span.font-caveat {
  display: none;
}
 
  
#verwaltung .col-lg-3.d-flex {
  flex-direction: column;
  align-items: center; 
}
  
  #verwaltung .team-style2 {
  margin: 20px 0;
     }
  #karriere .hero__overlay { 
  left: clamp(40px, 12vw, 260px);
  }
  
  #karriere blockquote p {
  margin-left: 0;
}
}

@media (max-width: 450px) {
  .hero{
    margin-top:60px;
    margin-bottom:60px;
  }
.hero__bg img {
  width: 100%;
  height:auto;
    display: block;
    object-fit: cover;
    object-position: right;
}
  .ivd{
    display: none;
  }
  .container{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .container .container{
    padding-left: 15px;
  padding-right: 15px;
  }
  #content_breit{
    margin-top: 3.7rem;
}
   .navbar-brand img {
    width: 220px;
    top: -30px;
    left: 0;
  }
 .kacheln figure {
   margin-right: 20px;
   
   padding: 20px 20px 10px 20px;
  -webkit-box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.75);
 }
#karriere .hero__overlay { 
  left: clamp(40px, 9vw, 260px);
  }
.hero__overlay img {
  width: min(900px, 100vw);
  }
 #service .hero__overlay img {
  width: min(600px, 100vw);
  }
h1{
  font-size: 1.8em;
  }
  h3 {
  font-size: calc(1.1rem + .5vw);
}
  .steps-list__item {
    grid-template-columns: 2rem 3rem 1fr;
}

  
}