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


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

*{
  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.woff2') 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(80px, 18vw, 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));
}

/* 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{
  color:var(--hellgrau) !important;
}
.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;
}
.bg_hellgrau{
  background-color: var(--hellgrau);
}
.bg_braun{
  background-color: var(--braun);
}
.bg_braun .row{
  display: flex;
  align-items: center;
}
.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 h4 span.font-caveat{  
  transform: rotate(-6deg);
  bottom: 0;
  position: absolute;
  font-size: 1.3em;
  right: 11rem;
  top: 4rem;
}
.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{
  border-radius: 10px;
  width: 250px;
}
#karriere figure{padding: 20px 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; 
}

.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: url(/fileadmin/Media/img/Hintergruende/Hintergrund_Qualitaetsmakler.jpg);
  padding: 45px 0 10px;
  background-repeat: no-repeat;
  background-size: cover;
}

.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-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-------------------------------*/
.team-style2 {
  margin-bottom: 10px;
}
.team-style2 .ce-gallery figure.image{
  box-shadow: none;
  width: 100%;
}
.team-style2 .team-member-img img {
  transition: all 0.3s ease 0s; 
  border-radius: 10px;
  width: 250px;
}

.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;
  
}
.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; }
  .team-style2 .social-links a:hover {
    opacity: 0.65; }
.team-style2 .team-description-wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: 100%; }
.team-style2 .team-description-content {
  display: table-cell;
  vertical-align: middle;
  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;
}
.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 .team-member-img > img {
  transition: all 0.2s ease 0s; }
.team-style2:hover .bg-cover {
  background-color: rgba(255,255,255,0.8);
  display: block; }
.team-style2:hover .social-links {
  transition-delay: 100ms, 100ms;
  opacity: 1;
  transform: translateY(0); }
.team-style2:hover .team-member-img > img {
  filter: blur(4px) grayscale(4%); }
.team-style2:hover .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;
}
/*---------------------Verwaltung - Startseite----------*/
#verwaltung .team-style2 figcaption.image-caption{
  background-color: #fff;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  padding-bottom: 0.5rem;
}
/*-----------------------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 0px;
  background-size: cover;
}
.btn-secondary {
  --bs-btn-bg: var(--dunkelblau)important!;
}

@media (max-width: 992px) {
  nav.bg-dark {
    top:0;
    height: 60px;
  }
  .navbar-toggler{
    position: absolute;
  right: 10px;
  top: 10px;
  }
#navbarResponsive{
  text-align: center;
  margin-top: 2rem;
}
  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;
  }
  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 (max-width: 400px) {
.verkauf h4 span.font-caveat {
right: auto;
  top: 7rem;
  left: 0;
}

}