@font-face{
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}
@font-face{
  font-family: 'Source_Sans_3';
  src: url('../fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}
@font-face{
  font-family: 'DM_Sans';
  src: url('../fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}
@font-face{
  font-family: 'Karla';
  src: url('../fonts/Karla/Karla-VariableFont_wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}
@font-face{
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
 /* font-optical-sizing: auto;
  font-weight: <weight>;*/
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: 'Domine';
  src: url('../fonts/Domine/Domine-VariableFont_wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}
@font-face{
  font-family: 'PT Serif';
  src: url('../fonts/PT_Serif/PTSerif-Regular.ttf') format('truetype');
  /*font-optical-sizing: auto;
  font-weight: <weight>;*/
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: 'Scoutie Sans';
  src: url('../fonts/Scoutie_Sans/ScoutieSans-VariableFont_wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}
@font-face{
  font-family: 'Libre Baskerville';
  src: url('../fonts/Libre_Baskerville/LibreBaskerville-VariableFont_wght.ttf') format('truetype');
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
}

:root{
  --font_size : 1rem;
  --font_size_menu: 1.2rem;
  --font-family : 'Inter','Roboto', sans;
  --font-family1 : 'DM_Sans','Roboto', sans;
  --font-family2 : 'Source_Sans_3', 'Roboto', sans;
  --font-family3 : 'Karla', 'Roboto', sans;
  --font-family4 : 'Lato', 'Roboto', sans;
  --font-family5 : 'Domine', 'Roboto', sans;
  --font-family6 : 'PT Serif', 'Roboto', sans;
  --font-family7 : 'Scoutie Sans', 'Roboto', sans;
  --font-family8 : 'Libre Baskerville', 'Roboto', sans;

  /* Farben werden von Casiopeia im Body überschrieben */
  --textcolor_1: #2B2B2B;
  --textcolor_2 : #ccc;
  --textcolor_akzent: #6B1F2B;
  --textcolor_HKS16: #AE1732;
  --textcolor_HKS84: #70261E;

  --linkcolor: #2B2B2B;
  --linkcolor-hover: #6B1F2B;
  
  --border-color: #333;

  --background_color: #E3DFD6;
/*  --background_color: #F2F2F2;*/
  --background_color_2: #eee;
}

body{
  font-size: 1.1rem;
  font-family: var(--font-family7);
  color: #70261E;
}

h1, h2, h3, h4, h5, h6{
  color: #70261E;
  font-family: var(--font-family7);
}

h2{
  font-size: 1.2rem; 
}

/* Setzt die Ihaltsbreite fest */
.grid-child {
  max-width: 83rem;
}

/* Header Einstellungen */
.header .container-nav{
  padding:0;
}

.header{
  z-index:110;
  background-color: var(--background_color);
  background-image: none;
}

.header img{
  max-height: 7rem;
  padding: 1rem 0;
}

.header-small {
  padding-top: 0.5rem;
}

.header-small .container-nav img{
  height: 3.5rem;
}

.header-small img{
  padding: 0;
}

.header .mod-menu{
  margin-top: 2rem;
  font-size: var(--font_size_menu);
  color: var(--textcolor_1);
  justify-content: space-evenly;
}

.header-small .container-nav .nav{
  margin-top: 0.6rem;
}

.container-header .mod-menu>li>a{
  font-weight: 700;
}
.container-header .mod-menu>li>a, .container-header .mod-menu>li>span{
  color: #70261E;
}

.login_button{
  padding-top: 1.5rem;
}

.login_button_small{
  padding-top:0;
}

.mitglieder-login-btn.modern {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.2rem;
  background: var(--textcolor_HKS16);
  color: #fff;
  text-decoration: none;
  border-radius: 2rem;
  font-weight: 700;
  box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,0.15);
}

@media (max-width: 990px){
  .no-mobile{
  display: none;
  }
  .header{
    position: fixed;
  }
  .header img{
  padding: 1rem 0 0 0;
}
  .container-nav nav{
    margin-top:0!important;
    margin-left: 1rem;
  }
  .navbar-collapse .mod-menu{
    z-index: 10;
    position: absolute;
    border: 1px white solid;
    border-radius: 0 1rem 1rem 1rem;
    top: 0;
    background-color: var(--background_color);  
  }
  .mitglieder-login-btn{
    font-size: 0.8rem;
  }
  .login_button {
    padding: 0.5rem;
  }
  .container-header .navbar-toggler-right{
    color: var(--textcolor_HKS84);
    border: var(--textcolor_HKS84) 1px solid;
    background-color: var(--background_color);
  }
  #mod-menu1{
    display: none;
  }
   .header img{
     height: 3.5rem;
   }
  .aboutme{
    display:none!important;
  }
  .leistungen_cards_container{
    grid-template-columns: repeat(1,1fr)!important;
    margin: 0!important;
    gap: 1rem!important;
  }

  .leistungen_cards_container .back{
    z-index: 100;
  }

  .aktuelles_button_container button{
    padding: 0.5rem;
    font-size: 1rem;
  }
  .aktuelles_button .icon{
    font-size: 2rem;
  }
} /* Ende Mediaquerry*/

/*@media (min-width: 991px){*/
@media (min-width: 62rem){
  .navbar{
    display : none;
  }
}

/* Inhaltseinstellungen */

/* Erweitert den Beitragsbereich auf ganze Seite*/
.container-component{
  grid-column-start: full-start!important;
  grid-column-end: full-end!important;
}

.hintergrundakzent{
  background-color: #E3DFD6;
}

.beitrag{
  max-width : 83rem;
  margin: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.home{
  display: flex;
}
.home-ul{
  list-style-type: disc;
  padding-left: 1.2rem;
}


/* @media (max-width: 1360px){*/
@media (max-width: 85rem){
 .beitrag{
   padding-left: 1rem;
   padding-right: 1rem;
 }
 .home{
   display: inline-flex;
 }
 .home img{
   height: fit-content;
 }

  .home-ul-wrap ul{
    margin: unset;
  }
} /* Ende Mediaquery max. 1360 */

/*@media  (max-width: 650px){*/
@media  (max-width: 40.5rem){
  .home{
    display: block;
  }
}

.beitrag-header{
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.beitrag-body{
  padding-top: 0;
}

.blog-items{
  grid-gap: 0!important;
}

.items-leading{
  margin: 0;
}

.leistungen_cards_container{
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

.leistungen_cards_container .mod-custom{
    height: 100%;
}

.leistungen_card{
  height:100%;
   display: block;
  font-size: 1.5rem;
   --grad: red, blue;
  border: none;
  padding: 2.5rem;
  background-color: #E9E6DF;
  border-radius: 2rem;
  gap: 1.5rem;
  box-shadow: 
  inset -2px 2px hsl(0 0 100% / 1),
    -20px 20px 40px hsl(0 0 0 / .25) ;
}

.leistungen_card .icon{
  font-size: 3rem;
  color: var(--textcolor_HKS84);
}

.leistungen_card .titel{
  color: var(--textcolor_HKS84);
}

.leistungen-cards ul{
  padding-left: 3rem;
}
/*@media (max-width: 400px){*/
@media (max-width: 25rem){
  .leistungen_card_3items, .leistungen_card_4items{
    line-height: 1.2rem;      
  }
  .leistungen-cards ul{
    padding-left: 1.2rem;
  }
}
/*@media (max-width: 991px){*/
@media (max-width: 62rem){
  .leistungen-cards ul{
    padding-left: 2rem;
  }
}
.leistungen-cards li{
  font-size: 1.2rem;
}

.leistungen_card_4items{
  color: var(--textcolor_HKS84);
  line-height: 2rem;
  padding-top: 1.5rem;
  padding-left: 1rem;
}
.leistungen_card_3items{
  color: var(--textcolor_HKS84);
  line-height: 2rem;
  padding-top: 2.5rem;
  padding-left: 1rem;
}

/* Leistungen Buttons Mediaqueries*/
/* @media (max-width: 560px){*/
@media (max-width: 35rem){
  .leistungen_card_3items, .leistungen_card_4items{
    padding: 0;
    line-height: 1.8rem;
  }
}
/*@media (max-width: 396px){*/
@media (max-width: 24.75rem){
  .leistungen-cards ul{
    padding-left: 1.2rem;
  }
   .leistungen-cards li{
    font-size: 1.0rem;
  }
  /* Anpassung der oberen Abstände in der Mobilansicht*/
  /*
  .back .leistungen_card_4items, .back .leistungen_card_3items{
    padding-top: 1.5rem;
  }
  .first-card ul{
    padding-top: 0!important;
  }
  */
}

/* FLip settings*/
.flip {
  position: relative;
  > .front,
  > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.9s;
    transition-property: transform, opacity;
  }
  > .front {
    transform: rotateY(0deg);
  }
  > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
  }
  &:hover {
    > .front {
      opacity: 0;
      transform: rotateY(180deg);
    }
    > .back {
      opacity: 1;
      transform: rotateY(0deg);
    }
  }
 &.flip-vertical {
    > .back {
      transform: rotateX(-180deg);
    }
    &:hover {
      > .front {
        transform: rotateX(180deg);
      }
      > .back {
        transform: rotateX(0deg);
      }
    }
  }
}

.flip-card{
  height: 100%;
}

.flip-card .front{
  text-align: center;
}

.flip-card .back{
  padding: 0.3rem 1rem 0.3rem 1rem;
  font-size: 0.8rem;
}

.ueber-uns-text{
  width: 100%;
  padding-right: 3.2rem;
}
.ueber-uns-img{
  height: fit-content;
  margin-right: 3.2rem;
  margin-bottom: 1.875rem;
}
.ueber-uns-container{
  display:flex;
}
@media (max-width: 48.25rem) {
  .ueber-uns-container{
  display:block;
 }
  .ueber-uns-text{
    padding-right: 0;
  }
}
.aktuelles_button_container, .mandanten_login_button_container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 4rem;
}
.mandanten_login_button_container{
  padding-bottom: 5rem;
}

.mandanten_login_button_text {
    width: 100%;
}

/*@media (max-width: 659px) {*/
@media (max-width: 41.25rem) {
   .mandanten_login_button_container{
    grid-template-columns: repeat(1,1fr)!important;
    margin: 0!important;
    gap: 1rem!important;
  }
}
@media (min-width: 41.25rem) and (max-width: 56.25rem){
  .aktuelles_button_container{
    grid-template-columns: repeat(2, 1fr);
  }
}

/*@media (min-width: 660px) and (max-width: 85rem){*/
@media (min-width: 41.25rem) and (max-width: 85rem){
    .mandanten_login_button_container{
    grid-template-columns: repeat(1,1fr 1fr)!important;
    margin: 0!important;
    gap: 1rem!important;
  }
  .mandanten_login_button_container a{
     justify-content: center;
  }
}
/*@media (min-width: 1360px) {*/
@media (min-width: 85rem) {
 .unternehmen_online_button{
  padding-left: 1.3rem!important;
  gap: 0.3rem!important;
 }
}

.aktuelles_button, .mandanten_service_button{
  display: block;
  font-size: 1.5rem;
   --grad: red, blue;
  border: none;
  padding: 2.5rem;
  background-color: #E9E6DF;
  border-radius: 2rem;
  gap: 1.5rem;
  box-shadow: 
    inset -2px 2px hsl(0 0 100% / 1),
    -20px 20px 40px hsl(0 0 0 / .25) ;
}

.aktuelles_button .titel{
  color: var(--textcolor_HKS84);
}

.aktuelles_button .icon{
  display: block;
  color: var(--textcolor_HKS84);
  font-size: 3rem;
}

.aktuelles_button:hover, .mandanten_service_button:hover{
  box-shadow: 
    inset -2px 2px hsl(0 0 100% / 1),
    -10px 10px 20px hsl(0 0 0 / .25) ;
}

.aktuelles-content{
  text-align: center;
}

.aktuelles_modal, .loader_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 6.25rem; /* Location of the box 100px*/
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.aktuelle_modal_content {
  max-width: 56.25rem;/*900px*/
  max-height: 31.25rem;/*500px*/
  margin: auto;
  z-index: 100;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Loader */

.loader {
  --color-1: #511B1B;
  --color-2: #ff3d00;
  --size: 1px;
  left: 50%;
    top: 50%;
  width: calc(100 * var(--size));
  height: calc(46 * var(--size));
  position: relative;
  border-bottom: calc(5 * var(--size)) solid var(--textcolor_HKS84);
  border-top: calc(5 * var(--size)) solid var(--textcolor_HKS84);
  box-sizing: border-box;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(-20 * var(--size));
  width: calc(32 * var(--size));
  height: calc(32 * var(--size));
  border-radius: 50%;
  background: var(--textcolor_HKS16);
  border: calc(5 * var(--size)) solid var(--textcolor_HKS16);
  box-sizing: border-box;
  animation: slide 1s infinite ease-in-out alternate;
}

.loader:after {
  top: calc(20 * var(--size));
  animation-direction: alternate-reverse;
}

@keyframes slide {
  0%,
  20% {
    transform: translateX(calc(70 * var(--size)));
  }
  80%,
  100% {
    transform: translateX(calc(-1 * var(--size)));
  }
}

/* Loader end*/

#feed{
  border-radius: 2rem;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-18.75rem; opacity:0} /*-300px*/
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-18.75rem; opacity:0}
  to {top:0; opacity:1}
}
.mym-wrapper{
  background-color: white;
}
.mym-rss-header h2{
  text-align: center;
}
/* The Close Button */
.aktuelles_modal_close {
  position:relative;
  float: right;
  font-size: 4rem!important;
  font-weight: bold;
}

.aktuelles_modal_close:hover,
.aktuelles_modal_close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.verbandsbanner{
  display: flex;
  justify-content: space-between;
}

.verbandsbanner img{
  height: auto;
  max-height: 11.25rem; /* Höhe des Dig. Kanzleibanners */
}
.verbandsbanner-mobil{
    display: none;
  }

@media  (max-width: 36.25rem){ /*580px*/ 
  .verbandsbanner{
    display: none;
  }
  .verbandsbanner-mobil{
    display: block;
  }
  .topbanner-mobile, .bottombanner-mobil{
    display: flex;
    justify-content: space-around;
  }
  .verbandsbanner-mobil img{
    max-height: 5rem;
    width: auto;
  }
  .bottombanner-mobil img{
    max-height: 4rem;
  }
}


@media  (min-width: 36.25rem) and (max-width: 48.75rem){ /*780px*/
  .verbandsbanner img{
    max-height: 4rem;
    width: auto;
  }
   .bottombanner-mobil img{
    max-height: 4rem;
  }
}

@media  (min-width: 48.75rem) and (max-width: 55.63rem){
  .verbandsbanner img{
    max-height: 5rem;
    width: auto;
  }
  
}

.mandanten_login_button_container a{
  color: var(--textcolor_HKS84);
  text-decoration: none;
  text-align: center;
}

.mandanten_login_button{
  display: inline-flex;
}
.mandanten_login_button_container div {
    color: var(--textcolor_HKS84);
    text-decoration: none;
    text-align: center;
}

.fernbetreuung_button div{
  width: 100%;
}
.personal_button{
  gap: 0.3rem;
}


/* Moduleinstellungen im Moment ungenutzt 14.08.24
.container-bottom-a , .container-bottom-b{
    grid-column-start: full-start;
    grid-column-end: full-end;
  display: block;
}
.container-bottom-a{
  background-color: #eee;
}
.bottom-a{
  border:none;
}
.bottom-a:first-child{
  background-color: #eee;
}
.bottom-a{
  padding: 5rem 0;
}
.container-bottom-a .bottom-a {
  width: 83rem; 
  margin:auto;
}*/


/* Footer */
.footer{
  margin-top: 0;
  font-size: 1.2rem;
  color: #70261E;
  background-color: var(--background_color);
  background-image: none;
}

.footer a{
  text-decoration: none!important;
}

.footer a:hover{
  color: var(--linkcolor-hover)!important;
  text-decoration: none!important;
}

.footer .grid-child {
  align-items: unset;
}

@media  (max-width: 62rem){
  .footer{
    font-size: 1rem
  }
}

/* Back to top link*/
.back-to-top-link{
  color: var(--textcolor_akzent);
  background-color: var(--background_color);
  border-color: var(--textcolor_akzent);
}

.back-to-top-link:hover{
  color: var(--background_color);
  background-color: var(--textcolor_akzent);
}