/************************************************************************/
/*             								*/
/*			C  U  S  T  O  M				*/
/*									*/
/*									*/
/************************************************************************/

/* Hintergruende */
.hg_top,
.hg_intro,
.hg_breadcrumb,
.hg_immobilie_bewerten,
.hg_portfolio,
.hg_team,
.hg_philosophie,
.hg_projektbegleitung,
.hg_objektbestand,
.hg_kopfbild,
.hg_content,
.hg_footer,
.hg_footer2,
.hg_copy {
    float:left;
    width:100%;
}

.hg_top {
    width: 100%;
    position: fixed;
    height: 100px;
    background: var(--hintergrund1);
    z-index: 999;
}

.hg_intro {
    margin: 100px 0 50px;
    /*overflow: hidden;*/
}




/* SVG LOGO */
svg#logo {
    width: 230px;
    height: auto;
    transform: rotate(-15deg);
    left: -30px;
    position: absolute;
    top: -126px;
    z-index: 999;

}
svg#logo .st0 {
    fill: var(--primaerfarbe);
}
svg#logo .st1 {
    fill: var(--weiss);
}

/* SVG LOGO FULL */

svg#logo_x5F_komplett {
    width: 230px;
    height: auto;
}

svg#logo_x5F_komplett .st0 {
    fill: var(--weiss);
}



/* Ueberschriften */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a,
.counter{
    font-weight: 400;
    line-height: initial;
}


h1, .h1 {

    font-size:48px;

}

h2, .h2, .counter {

    font-size: 72px;
    font-weight: 300;
    /*margin: 0;*/

}



h3, .h3 {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

h4, .h4 {
    font-size: 20px;

}



h5, .h5 {
    font-size: 18px;

}

h6, .h6 {
    font-size: 18px;

}


b, strong {
    color: var(--sekundaerfarbe);
}


/* ANKER + anker  */
#bauundgeneraluebernahme,
#vertriebundvermarktung,
#immobilienverwaltung {
    margin-top: -200px;
    position: absolute;
}



/********************** BUTTONS / buttons *************************/
/*
 DATE  
a.btn_top{
  transition: all .35s;
  display: block;
  position: relative;
  border: 1px solid var(--primaerfarbe);
  transition: 0.35s all ease-in-out;
}

a.btn_top span{
  position: relative;
  z-index: 2;
}

a.btn_top:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--primaerfarbe);
  transition: all .35s;
}

a.btn_top:hover{
  color: #fff;
  border: 1px solid var(--weiss);
  transition: 0.35s all ease-in-out;
}

a.btn_top:hover:after{
  width: 100%;
}
*/






.top_info_date,
.top_info_phone{
    position: relative;
}

a.btn_top {
    border:1px solid var(--primaerfarbe);
    transition: 0.35s ease-in-out;
    color: var(--primaerfarbe);
    display: flex;
    flex-flow: row;
    align-items: center;

    height: 90px;
    padding: 0 30px;
    letter-spacing: 1.1px;
    position: relative;

}
a.btn_phone  {
    background: var(--primaerfarbe);
    color: var(--weiss);
}

a.btn_top::before {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: var(--sekundaerfarbe);

    z-index: -1;
    display: flex;
    align-items: center;
    transition: 0.35s ease-in-out;
}
a.btn_top.btn_date::before {
    /*background-color: var(--primaerfarbe);*/
    left: 0;
}
a.btn_top.btn_phone::before {
    /*background-color: var(--weiss);*/
    right: 0;
}

a.btn_top.btn_top:hover::before {
    content: "";
    width: 100%;
    border: 1px solid var(--weiss);
}


/*a.btn_top.btn_date:hover::before{
    content: "";
    width: 100%;
    border: 1px solid var(--weiss);
}
a.btn_top.btn_phone:hover::before{
    content: "";
    width: 100%;
    
}*/

span.icon_date {
    width: 24px;
    height: 24px;
    background: url(/images/icons/date.png);
    transition: 0.35s ease-in-out;
}
span.icon_phone {
    width: 24px;
    height: 24px;
    background: url(/images/icons/phone_white.png);
    transition: 0.35s ease-in-out;
}


a.btn_top:hover {

    border:1px solid var(--weiss);
    color: var(--weiss);
    z-index: 1;
    position: relative;
    transition: 0.35s ease-in-out;
}
/*a.btn_date:hover {
    border:1px solid var(--weiss);
    color: var(--weiss);
}*/
a.btn_phone:hover {

    /*color: var(--primaerfarbe);*/
}


a.btn_top:hover span.icon_date{
    width: 24px;
    height: 24px;
    background: url(/images/icons/date_white.png);
    transition: 0.35s ease-in-out;
}
a.btn_top:hover span.icon_phone{
    width: 24px;
    height: 24px;
    /*background: url(/images/icons/phone.png);*/
    transition: 0.35s ease-in-out;
    /*color: var(--primaerfarbe);*/
}
span.text_date {

}







/* MEHR... BUTTON */

.intro_bottom a,
p.readmore {
    position: relative;
    width: 160px;
    height: 60px;
    display: inline-block;
    background: #fff;
    margin: 20px 0;
    letter-spacing: 1.1px;
}

.intro_bottom a::before,
.intro_bottom a::after,
p.readmore::before,
p.readmore::after {
    content:'';
    position: absolute;
    inset: 0;
    transition: 0.5s;
    background: #f00;
    background: linear-gradient(45deg, var(--sekundaerfarbe), var(--primaerfarbe), var(--sekundaerfarbe))
}


.intro_bottom a:hover::before,
p.readmore:hover::before
{
    inset: -3px;
}
.intro_bottom a:hover::after,
p.readmore:hover::after
{
    inset: -3px;
    filter: blur(10px);
}
.intro_bottom a span,
p.readmore a.btn-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: var(--primaerfarbe);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--weiss);
    border: 1px solid var(--hintergrund1);
    overflow: hidden;
    border-radius: 0;
}
.intro_bottom a:hover span,
p.readmore a.btn-secondary:hover {
    background: var(--sekundaerfarbe);
}


/* RECTANGLE */



.intro1 span.rec1 {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid var(--weiss);
    top: 4%;
    left: 40%;
}
.intro1:hover .floating_box1 {
    animation: slideRec1 9s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.intro1 span.rec2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid var(--weiss);
    top: 13%;
    left: 37%;
}
.intro1:hover .floating_box2 {
    animation: slideRec2 8s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.intro3 span.rec1 {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--sekundaerfarbe);
    top: 4%;
    right: 47%;
}
.intro3:hover .floating_box1 {
    animation: slideRec3 8s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}


.intro3 span.rec2 {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 1px solid var(--weiss);
    top: 13%;
    right: 43%;
}

.intro3:hover .floating_box2 {
    animation: slideRec4 7s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}


.pulse-opacity {
    animation: pulseOpacity 2s ease-in-out infinite;

}

@keyframes pulseOpacity {
    0%   {
        opacity: 0.8;
    }
    50%  {
        opacity: 0.4;
    }
    100% {
        opacity: 0.8;
    }
}
.intro3 span.rec1:hover {
    animation: none;

}


.intro_bottom a span::before{
    content:"";
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: var(--hintergrund2);
    transform: skew(25deg)
}

.intro_bottom a:hover {

}





/*READMORE readmore*/
a.btn-readmore {
}
a.btn-readmore:hover {
}
/* ENDE READMORE readmore ENDE */











/* ####################  ANIMATIONS ################### */


/* animation */
.boing-target {
    transform: scale(1);
    transition: transform 0.3s ease;
    opacity: 0;
}

.boing-target.visible {
    animation: boing 0.6s ease-out;
    opacity: 1;
}

@keyframes boing {
    0%   {
        transform: scale(0.95);
    }
    30%  {
        transform: scale(1.05);
    }
    60%  {
        transform: scale(0.97);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



/*animation*/
.animate-on-scroll {
    transition: transform 0.6s ease;
}
.animate-scroll {
    transform: translateY(40px);
}

/*animation*/
.animate-on-scroll2 {
    transition: transform 0.6s ease;
}
.animate-scroll2 {
    transform: translateY(60px);
}




.animate-scroll3 {
    animation: slideFadeIn 1s ease-out forwards;
    transition: transform 0.6s ease;
}

/* ENDE ANIMATIONS ENDE */


















/**********************  ENDE  BUTTONS / buttons  ENDE  *************************/

/*************** CONTENT ******************/

.main_box {

}






/* -->> individuell */

.top_menu_box {
    display: flex;
    width: 100%;
    flex-flow: row;
    align-items: center;
    height: 100px;
    justify-content: flex-end;
    box-shadow: 0 0 15px var(--box-shadow);
}
.top_info_box {
    display: flex;
    flex-flow: row;
    padding: 0 15px;
}

.top_info_box p {
    margin: 0;
}

.top_info_box a {

}





.top_info_box img {
    width: 24px;
    height: auto;
}

.top_info_box .top_info_phone a {
    /*    color: var(--weiss);
        background-color: var(--primaerfarbe);*/
}


/* MENU = MOBILE MENU */
.top_mainmenu {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    transition: 0.1s all ease-in-out;
}
[data-id="mobilemenuck-1"].mobilemenuck {
    color: var(--sekundaerfarbe);

    background: var(--weiss);
    transition: 0.1s all ease-in-out;
    z-index: 999;
}

[data-id="mobilemenuck-1"] .mobilemenuck-bar-button {
    height: 100px;
    width: 100px;
    font-size: 86px;
    color: var(--primaerfarbe);
    background-color: var(--weiss);
    transition: 0.35s color ease-in-out;
}
[data-id="mobilemenuck-1"] .mobilemenuck-bar-button:hover {
    color: var(--sekundaerfarbe);
    transition: 0.35s color ease-in-out;
}



/* mobile menu open */



[data-id="mobilemenuck-1"] .mobilemenuck-title {
    background: var(--weiss);
    height: 100px;


    display: flex;
    align-items: center;
}



.mobilemenuck-title.mobilemenuck-backbutton {

    font-size: 0;

}
.mobilemenuck-title.mobilemenuck-backbutton::before {
    content:"<";
    width: 100px;
    height: 100px;
    font-size: 86px;
    display: flex;
    top: 10px;
    justify-content: center;
    line-height: 68px;
    color: var(--primaerfarbe);
    transition: 0.35s color ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}



[data-id="mobilemenuck-1"] .mobilemenuck-backbutton svg {
    display: none;
}
[data-id="mobilemenuck-1"] .mobilemenuck-button {
    width: 100px;
    height: 100px;
    font-size: 86px;
    display: flex;
    top: 10px;
    justify-content: center;
    line-height: 68px;
    color: var(--primaerfarbe);
    transition: 0.35s color ease-in-out;
}
[data-id="mobilemenuck-1"] .mobilemenuck-button:hover {
    color: var(--sekundaerfarbe);
    transition: 0.35s color ease-in-out;
}
[data-id="mobilemenuck-1"].mobilemenuck a {
    font-weight: 300;
}
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level1 {
    background: var(--weiss);
    border-radius: 0;
    margin: 0;
    padding: 5px 20px;
}
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level1 a {
    color: var(--primaerfarbe);
}

/* HOVER */
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level1:not(.headingck):hover,
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level1.open{
    background: var(--sekundaerfarbe);
    transition: 0.35s all ease-in-out;
}

[data-id="mobilemenuck-1"] .mobilemenuck-item .level1:hover a {
    color: var(--weiss) !important;
    transition: 0.35s all ease-in-out;
}

[data-id="mobilemenuck-1"] .mobilemenuck-item > .level2:not(.headingck):hover,
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level2.open {
    background: var(--sekundaerfarbe) !important;
    transition: 0.35s all ease-in-out;
}



[data-id="mobilemenuck-1"] .mobilemenuck-togglericon:after {

    display: flex;
    align-items: center;
    justify-content: center;
}




/*   ##############    2. Ebene Menü    ##################   */



.menu_zweite_ebene {
    display: flex;
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.menu_zweite_ebene ul li a img {
    display: none;
}

.menu_zweite_ebene ul,
.menu_zweite_ebene .custom {
    display: flex;
    position: relative;
    padding: 4px 50px;
    width: 100%;
    flex-flow: wrap;
    z-index: 15;
    transition: 0.5s all ease-in-out;
}
.menu_zweite_ebene ul:hover,
.menu_zweite_ebene .custom:hover {
    background: var(--hintergrund1);
    transition: 0.5s all ease-in-out;
}



.menu_zweite_ebene ul li,
.menu_zweite_ebene .custom p {
    display: flex;
    margin: 1px 5px;
}




.menu_zweite_ebene ul li a,
.menu_zweite_ebene .custom a {
    padding:5px;
    background: var(--hintergrund1);
}
.menu_zweite_ebene ul li a span,
.menu_zweite_ebene .custom a span {
    display: flex;
    flex-flow: column;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    padding: 15px;
    letter-spacing: 1.1px;
    border:1px solid var(--primaerfarbe);
}

.menu_zweite_ebene ul li.current a {


    background: var(--sekundaerfarbe);
    color: var(--weiss);
    transition: all 0.35s ease-in-out;

}


.menu_zweite_ebene ul li a:hover,
.menu_zweite_ebene .custom a:hover {
    transform: scale(1.05);
    /* box-shadow: 0 0 20px rgba(133, 188, 255, 0.5); */
    background: var(--sekundaerfarbe);
    color: var(--weiss);

    transition: all 0.35s ease-in-out;
}

.menu_zweite_ebene ul li.current a span,
.menu_zweite_ebene ul li a:hover span {
    border-color: var(--weiss);
    transition: all 0.35s ease-in-out;

}















/*
.menu_zweite_ebene {
    padding: 50px 50px 0;
    border-bottom: 1px solid var(--primaerfarbe);
}

.menu_zweite_ebene ul {
    display: flex;
    width: 100%;
}
.menu_zweite_ebene ul li {
}
.menu_zweite_ebene ul li a {
    display: flex;
    margin: 2px;
    letter-spacing: 1.2px;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.35s;
    transition: 0.35s all ease-in-out;
    background: var(--primaerfarbe);
    color: var(--weiss);
    padding: 0 15px 0 0px;
    height: 50px;
    justify-content: left;
    align-items: center;
    z-index: 2
}

.menu_zweite_ebene ul li a:hover {
    background: var(--sekundaerfarbe);
    color: var(--weiss);
    box-shadow: 0 10px 20px var(--hintergrund_gelb);
}*/







/* nicht im mobile */
.menu_zweite_ebene ul li a:hover::before {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(133, 188, 255, 0.5);
    background: var(--hintergrund_blau);
    transition: all 0.35s ease-in-out;
    opacity: 1;
}

/* Pseudo elements for icons */

/*.menu_zweite_ebene ul li.current a,
.menu_zweite_ebene ul li a:active {
    background: var(--sekundaerfarbe);
}

.menu_zweite_ebene ul li a:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}


.menu_zweite_ebene ul li a img {
    height: 50px;
    width: 50px;
    margin-right: 5px;
    background: var(--box-shadow);
    padding: 10px;
}*/







/*
.menu_zweite_ebene ul li a::before {
    content: "";
    display: flex;
    background: var(--hintergrund_blau);
    height: 100%;
    width: 100%;
    position: absolute;
    transform: scale(1.05);
    opacity: 0;
    z-index: 1;
}*/
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level2 {
    background: var(--primaerfarbe);
}
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level2 a {
    color: var(--weiss);
}
[data-id="mobilemenuck-1"] .mobilemenuck-item > .level2:not(.headingck):hover, [data-id="mobilemenuck-1"] .mobilemenuck-item > .level2.open {
    background: var(--hintergrund_blau);
}
.mobilemenuck-item-text img {
    margin-right: 5px;
    width: 24px;
    height: 24px;
}










/* ENDE MENU = MOBILE MENU ENDE */

/* INTRO */

.intro_bg {
    background: url(/images/allgemein/intro_background.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    /*height: calc(100vh - 100px);*/

}



.intro_bg_animation {

    display: flex;
    flex-flow: row;
    background: linear-gradient(132deg, rgba(255,255,255,0.1),rgba(255,255,255,0.3), rgba(58,123,213,0.1),rgba(58,123,213,0.3),rgba(227,176,71,0.1),rgba(227,176,71,0.3));
    background-size: 400% 400%;
    animation: BackgroundGradient 15s ease infinite;
}

@keyframes BackgroundGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ############# */
.cube_box {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.box-card {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease;
    /*cursor: pointer;*/
    color: var(--weiss);
}

.box-card:hover {
    animation: rotate3d 8s infinite linear;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    backface-visibility: visible;

    background: linear-gradient(145deg, var(--grau), var(--dunkelgrau));
    border: 1px solid #646cff;
    transition: all 0.3s ease;
    overflow: hidden;
    text-align: center
}

.face::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    top: -100%;
    left: -100%;
    transition: all 0.5s ease;
    transform: translateZ(20px);
}

.face::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
        );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.face:hover::before {
    top: 100%;
    left: 100%;
}

.face:hover::after {
    opacity: 1;
}

.face.front {
    transform: translateZ(100px);
    border-color: var(--hellgrau);
}

.face.back {
    transform: translateZ(-100px) rotateY(180deg);
    border-color: var(--sekundaerfarbe);
}

.face.right {
    transform: translateX(100px) rotateY(90deg);
    border-color: var(--sekundaerfarbe);
}

.face.left {
    transform: translateX(-100px) rotateY(-90deg);
    border-color: var(--sekundaerfarbe);
}

.face.top {
    transform: translateY(-100px) rotateX(90deg);
    border-color: var(--sekundaerfarbe);
}

.face.bottom {
    transform: translateY(100px) rotateX(-90deg);
    border-color: var(--sekundaerfarbe);
}

@keyframes rotate3d {
    0% {
        transform: rotateX(0) rotateY(0);
    }
    25% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: rotateX(270deg) rotateY(270deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@media (max-width: 768px) {
    .box-card {
        width: 150px;
        height: 150px;
    }

    .face.front {
        transform: translateZ(75px);
    }
    .face.back {
        transform: translateZ(-75px) rotateY(180deg);
    }
    .face.right {
        transform: translateX(75px) rotateY(90deg);
    }
    .face.left {
        transform: translateX(-75px) rotateY(-90deg);
    }
    .face.top {
        transform: translateY(-75px) rotateX(90deg);
    }
    .face.bottom {
        transform: translateY(75px) rotateX(-90deg);
    }
}

/* #################### */








.intro1,
.intro2,
.intro3 {
    display: flex;
    width:100%;
}

.intro2 {
    background-color: rgba(0, 0, 0, 0.3);

}
.introslide {
    display: flex;
    flex-flow: column;
    /*height: calc(100vh - 100px);*/
    width: 100%;
    text-align: center;
    align-items: center;
    background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 50%);
    justify-content: flex-end;
    color: var(--weiss);

    overflow: hidden;
    transition: all 0.35s ease-in-out;

}


/*.intro1 .introslide::before,
.intro2 .introslide::before,
.intro3 .introslide::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        0deg,
        transparent,
        transparent 30%,
        rgba(133,188,255,0.3)
        );
    transform: rotate(-45deg);
    transition: all 0.35s ease-in-out;
    opacity: 0;
}*/
.intro1:hover .introslide,
.intro2:hover .introslide,
.intro3:hover .introslide {
    transform: scale(1.05);
    /*box-shadow: 0 0 20px rgba(133,188,255,0.5);*/
    background: var(--hintergrund_blau);
    transition: all 0.35s ease-in-out;
}

/*.intro1:hover .introslide::before,
.intro2:hover .introslide::before,
.intro3:hover .introslide::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
    transition: all 0.35s ease-in-out;
}*/





/*
@keyframes growWidth {
  to {
    width: 100%;
    transition: 0.35s width ease-in-out;
  }
}*/



.intro2_slogan {

}

.intro_top {
    height: calc((100vh - 100px) / 2);

    color: var(--weiss);
    padding: 100px 50px 0;

}
.intro_bottom .custom {
    position: relative;
    padding: 100px 50px 0;
}




/* ENDE INTRO ENDE */













/* Immobilie bewerten */

.scrollDiv {
    /*background-color: lightblue;*/
    padding: 20px;
    margin-top: 50px;
    transition: margin 0.3s ease-in-out;
}






.immobilie_bewerten_box,
.portfolio_box,
.team_box,
.philosophie_box,
.projektbegleitung_box,
.objektbestand_box {
    display: flex;
    flex-flow: column;
    /*margin-bottom: 100px;*/
}
.immobilie_bewerten_title,
.portfolio_title,
.team_title,
.philosophie_title,
.counter_title {
    text-align: center;
    padding: 50px;
    margin: 50px 50px 100px;
}

.counter_title {
    margin:0;

}

.immobilie_bewerten_title {

}



.immobilie_bewerten_title p {
    margin: 0;
}
.immobilie_bewerten_title h2 {

}
.immobilie_bewerten_title em,
.portfolio_title em {
    /*font-size: 48px;*/
}


.immobilie_bewerten_buttons {
    background: var(--primaerfarbe);
    display: flex;
    flex-flow: row;
    position: relative;
}
.immobilie_bewerten_buttons p {
    margin:0;
}



.immobilie_bewerten_button {
    width: 100%;
    text-align: center;
    position: relative;
}
.immobilie_bewerten_button h3 {
    margin: 0;
}
.immobilie_bewerten_button a {
    display: flex;
    height: 500px;
    color: var(--weiss);
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}
.immobilie_bewerten_button.immobilie_bewerten_button_vermieten a {
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3), rgba(58, 123, 213, 0.1), rgba(58, 123, 213, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    background-size: 200% 200%;
    animation: BackgroundGradient 15s ease infinite;
}

.immobilie_bewerten_button.immobilie_bewerten_button_verkaufen a {
    background: linear-gradient(58deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(58, 123, 213, 0.2), rgba(58, 123, 213, 0.3), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    background-size: 200% 200%;
    animation: BackgroundGradient 17s ease infinite;

}





.immobilie_bewerten_button.immobilie_bewerten_button_vermieten a:hover,
.immobilie_bewerten_button.immobilie_bewerten_button_verkaufen a:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(133, 188, 255, 0.5);
    background: var(--hintergrund_blau);
    transition: all 0.35s ease-in-out;
}







/*

.immobilie_bewerten_button a::before {
    content: "";
    background: var(--hintergrund2);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.35s all ease-in-out;
}
.immobilie_bewerten_button a::after {
    content:"";
}
.immobilie_bewerten_button a:hover {

}
.immobilie_bewerten_button a:hover::before {
    content:"";
    opacity: 1;
    transition: 0.35s all ease-in-out;
}
.immobilie_bewerten_button a:hover::after {
    content:"";
}*/



/* rectangle */

.immobilie_bewerten_buttons .rec1 {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--weiss);
    top: 15%;
    left: 46%;
}
.immobilie_bewerten_button:hover .floating_box1 {
    animation: slideRec1 8s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes slideRec1 {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 20px;
    }
    10% {
        margin-left: -15px;
    }
    15% {
        margin-left: 10px;
    }
    20% {
        margin-left: -5px;
    }
    25% {
        margin-left: 5px;
    }
    30% {
        margin-left: 0px;
    }
    100% {
        margin-left: 0px;
    }
}

.immobilie_bewerten_buttons .rec2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid var(--weiss);
    top: 24%;
    left: 42%;
}
.immobilie_bewerten_button:hover .floating_box2 {
    animation: slideRec2 7s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes slideRec2 {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 20px;
    }
    10% {
        margin-left: -15px;
    }
    15% {
        margin-left: 10px;
    }
    20% {
        margin-left: -5px;
    }
    25% {
        margin-left: 5px;
    }
    30% {
        margin-left: 0px;
    }
    100% {
        margin-left: 0px;
    }
}


.immobilie_bewerten_buttons .rec3 {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid var(--weiss);
    bottom: 24%;
    right: 44%;
}
.immobilie_bewerten_button:hover .floating_box3 {
    animation: slideRec3 5s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes slideRec3 {
    0% {
        margin-right: 0;
    }
    5% {
        margin-right: 20px;
    }
    10% {
        margin-right: -15px;
    }
    15% {
        margin-right: 10px;
    }
    20% {
        margin-right: -5px;
    }
    25% {
        margin-right: 5px;
    }
    30% {
        margin-right: 0px;
    }
    100% {
        margin-right: 0px;
    }
}


.immobilie_bewerten_buttons .rec4 {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid var(--weiss);
    bottom: 15%;
    right: 42%;
}
.immobilie_bewerten_button:hover .floating_box4 {
    animation: slideRec4 6s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
@keyframes slideRec4 {
    0% {
        margin-right: 0;
    }
    5% {
        margin-right: 20px;
    }
    10% {
        margin-right: -15px;
    }
    15% {
        margin-right: 10px;
    }
    20% {
        margin-right: -5px;
    }
    25% {
        margin-right: 5px;
    }
    30% {
        margin-right: 0px;
    }
    100% {
        margin-right: 0px;
    }
}








/* ENDE IMMOBILIE BEWERTEN ENDE */

/* PORTFOLIO */
.portfolio_content {
    background: url(/images/icons/balken.png);
    background-repeat: repeat-x;
    background-position: bottom;
    display: flex;
    flex-flow: row;
    padding-bottom: 100px;
}



.portfolio_content_item {
    display: flex;
    flex-flow: column;
    width:100%;
}


.portfolio_content_text1,
.portfolio_content_text2{
    position: relative;
    padding: 100px;
    background: var(--weiss);
    border: 1px solid var(--primaerfarbe);
    margin: 0 50px;
    background: linear-gradient(132deg, rgba(58, 123, 213, 0.1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6), rgba(58, 123, 213, 0.1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8));
    background-size: 400% 400%;
    animation: BackgroundGradient 15s ease infinite;
}

.portfolio_content_text2 {
    bottom: -40px;


}

.portfolio_content_image1 {
    margin-right: 70px;
}

.portfolio_content_image1 p {
    margin: 0;
}

/* ENDE PORTFOLIO ENDE */


/* TEAM ÜBERSICHT */
.team_overview {
    display: flex;
    flex-flow: row;
    padding:0 50px;
}

.team {
    padding: 0 50px;
    width:100%;
}

.team em {
    font-size: 24px;
}




.card {
    width: 300px;
    height: 300px;
    margin: 1rem auto;
    perspective: 1000px;
    /*cursor: pointer;*/
    /*    overflow: hidden;*/
    border: none;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--primaerfarbe);
}

.card-front {
    background: white;

    overflow: hidden;
}
.card-front img {
    width: 300px;
    height: 300px;
    position: relative;
    left:0;
    transition: 0.35s all ease-in-out;
}

.card-back {
    background: var(--dunkelgrau);
    color: white;
    transform: rotateY(180deg);
}



/*


.team1_image {
    border-radius: 500px;
    width: 300px;
    height: 300px;
    border: 5px solid var(--primaerfarbe);
    transition: 0.35s all ease-in-out;
    overflow: hidden;
    position: relative;
}

 Hover-Effekt nur auf dem äußeren Container 
.team1_image:hover {
    width: 280px;
    margin: 0 10px;
}

 Inneres Bild bleibt fixiert 
.team1_image .custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    pointer-events: none;  optional: verhindert Interaktion 
}


.team1_image img {
    width: 300px;
    height: 300px;
    position: relative;
    left:0;
    transition: 0.35s all ease-in-out;
}
.team1_image:hover img {
    position: relative;
    left: -10px;
    transition: 0.35s all ease-in-out;
}

.team2_image {
    border-radius: 500px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border: 5px solid var(--primaerfarbe);
}
.team3_image {
    border-radius: 500px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border: 5px solid var(--primaerfarbe);
}

*/



/* ENDE TEAM ÜBERSICHT ENDE */

/* PHILOSOPHIE */
.philosophie_icons {
    display: flex;
    flex-flow: row;
    padding: 0 50px;
    align-items: center;
    justify-content: center;
}

.philosophie_icons .custom {
    width: calc((100% / 5));
    text-align: center;
    border: 1px solid var(--primaerfarbe);
    margin: 50px;
    padding: 70px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.35s ease-in-out;
    position: relative;
    max-width: 300px;
    height: -webkit-fill-available;
}
.philosophie_icons .custom p {
    margin:0;
}

.philosophie_icons .custom img {
    padding: 12px;
    position: absolute;
    z-index: 1;
    background-color: var(--primaerfarbe);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -35px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: all 0.35s ease-in-out;
}
.philosophie_icons .custom:hover img {
    transform: scale(1.05) rotate(2deg);
    transition: all 0.35s ease-in-out;
}

/* Unique styles for each cursor type */

.philosophie_icons .custom:hover {
    transform: scale(1.05) rotate(-2deg);


    box-shadow: 0 0 20px rgba(133, 188, 255, 0.5);
    /*background: var(--hintergrund_blau);*/
    transition: all 0.35s ease-in-out;
}







/* ENDE PHILOSOPHIE ENDE */

/* PROJEKTBEGLEITUNG */




.hg_projektbegleitung {
    background: var(--primaerfarbe);
    color: var(--weiss);
    margin-top:100px;
}
.counter_box {
    margin-bottom: 50px;
}

.counter_items .counter-section {
    display: flex;
    flex-flow: row;
    padding:0 50px;
}
.counter_items p {
    margin: 0;
}
.counter_items .counter-section .custom {
    width:100%;
    text-align: center;
}

/* ENDE PROJEKTBEGLEITUNG ENDE */

/* OBJEKTBESTAND */

.objektbestand_items {
    display: flex;
    flex-flow: row;
    padding: 0 50px;
}
.objektbestand_items .custom {
    width: 100%;
    text-align: center;
}

/* ENDE OBJEKTBESTAND ENDE */



/* ############  SLIDER KOPFBILD  ############## */
.hg_kopfbild {
    display: flex;
    width: 100%;
    height: 700px;
    position: relative;

}

.hg_kopfbild_box {
    display: flex;
    flex-flow: row;
    width: 100%;
    position: relative;
}

.kopfbild_box {
    display: flex;
    flex-flow: row;
    width: 100%;
    position: relative;
}

.kopfbild_box_item{
    display: flex;
    flex-flow: row;
    width: 100%;
    position: relative;
}


.kopfbild {
    position: absolute;
    right: 0;
    top: 60%;
    width: 40%;
    height: auto;
    background: var(--hintergrund1);
    transform: translate(-0%, -50%);
    transition: top 0.1s ease;
    z-index: 9;
    padding: 15px;

    transition: 0.5s all ease-in;
    transition-delay: 0.51s;
    pointer-events: none;
}

.hg_kopfbild:hover .kopfbild {
    background: var(--weiss) !important;
    transition: 0.5s all ease-in;
    transition-delay: 0.5s
}


.kopfbild .custom {
    border: 1px solid;
    padding: 25px;
}

.kopfbild_image {
    width: 110%;
    height: 110%;
    left: 0;
    top: 0;
    position: absolute;
    background: url('/images/kopfbilder/kopf_leistungen.jpg') no-repeat left center / cover;
    transition: transform 0.2s ease-out;
}
.immobilien .kopfbild_image {
    background: url('/images/kopfbilder/kopf_immobilien.jpg') no-repeat left center / cover;
}
.immobilien.wohnung .kopfbild_image {
    background: url('/images/kopfbilder/kopf_wohnung.jpg') no-repeat left center / cover;
}
.immobilien.haeuser .kopfbild_image {
    background: url('/images/kopfbilder/kopf_haus.jpg') no-repeat left center / cover;
}
.immobilien.grund .kopfbild_image {
    background: url('/images/kopfbilder/kopf_gewerbe.jpg') no-repeat left center / cover;
}
.immobilien.gewerbe .kopfbild_image {
    background: url('/images/kopfbilder/kopf_gewerbe.jpg') no-repeat left center / cover;
}
.dienstleister .kopfbild_image {
    background: url('/images/kopfbilder/kopf_dienstleister.jpg') no-repeat left center / cover;
}
.tipps .kopfbild_image {
    background: url('/images/kopfbilder/kopf_tipps.jpg') no-repeat left center / cover;
}
.kontakt_seite .kopfbild_image {
    background: url('/images/kopfbilder/kopf_kontakt.jpg') no-repeat left center / cover;
}













/* Not needed styles */
.kopfbild_tilte::before {
    content: "";
    margin: 0;
    padding: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 11;
    font-size: 100px;
    color: var(--weiss);
    text-shadow: 1px 1px 10px var(--box-shadow);
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate3d(-50%, -50%, 0);
}
.leistungen .kopfbild_tilte::before {
    content: "Leistungen";
}
.immobilien .kopfbild_tilte::before {
    content: "Immobilien";
}
.dienstleister .kopfbild_tilte::before {
    content: "Dienstleister";
}
.tipps .kopfbild_tilte::before {
    content: "TIPPS (Blog)";
}
.kontakt_seite .kopfbild_tilte::before {
    content: "Kontakt";
}









/* ############### CONTENT ############## */


dd.parent-category-name {
    font-size: 0;
    display: flex
        ;
}
dd.parent-category-name a {
    font-size: 20px;
    font-weight: 300;
    line-height: normal;
    border: 1px solid var(--hintergrund_blau);
    padding: 2px 15px 2px 20px;
    display: flex;
    transition: 0.35s all ease-in-out;
}
dd.parent-category-name a:hover {
    border: 1px solid var(--sekundaerfarbe);
    transition: 0.35s all ease-in-out;

}
dd.parent-category-name a::before {
    content: "«";
    width: 24px;
    height: 24px;
    display: block;
    align-items: center;
    justify-content: center;
    position: absolute;
    flex-flow: row;
    margin-left: -13px;
}


/* BLOG */

.blog {
    padding: 50px;

}

.blog-items {
    display: flex;
    flex-flow: wrap;
}

.blog-items .blog-item {
    width:100%;
}

/* SPALTEN 2 */


.blog-items.columns-2 .blog-item {
    /* width: 50%; */
    width: 40%;
    margin: 1% 5% 5%;
    border: 1px solid;
    padding: 25px;
}
.leistungen .blog-items.columns-2 .blog-item {
    border: none;

}

/* SPALTEN 3 */

.blog-items.columns-3 .blog-item {
    width:31%;
    margin:1%;
}

/* EINZELNER BEITRAG */

.item-page {
    padding: 50px;
    margin: 50px 15% 200px;
    border: 1px solid var(--primaerfarbe);
}






/* #############   FELDER   ##################### */


.standard .fields-container {
    display: flex;
    position: relative;
    justify-content: center;
    /*padding: 50px;*/
}
.standard .fields-container .editor {
    width: 50%;
    position: relative;
    display: block;
}
.links .standard .fields-container .editor {
    order: 2;
}
.rechts .standard .fields-container .editor {
    order: 1;
}

.standard .fields-container .bild {
    width: 50%;
    position: relative;
    display: flex;
    padding:50px;
    align-items: center;
    justify-content: center;

}
.links .standard .fields-container .bild  {
    order: 1;
}
.rechts .standard .fields-container .bild {
    order: 2;
}


.standard .fields-container .bild .field-value img {
    --_g: 10%/45% 45% no-repeat conic-gradient(#000 0 0);
    mask:
        left   var(--_i,) top    var(--_g),
        bottom var(--_i,) left   var(--_g),
        top    var(--_i,) right  var(--_g),
        right  var(--_i,) bottom var(--_g);
    filter: grayscale();
    transition: .3s linear;
    cursor: pointer;
}
.standard .fields-container .bild .field-value img:hover {
    --_i: 10%;
    filter: grayscale(0);
}

.standard .fields-container .field-entry.bild::before {
    content: "";
    border: 1px solid;
    width: 60%;
    height: 70%;
    max-height: 500px;
    position: absolute;
    z-index: 9;
    transform: rotate(-15deg);
    pointer-events: none;
    transition: 0.35s all ease-in-out;
}

.standard .fields-container .field-entry.bild:hover::before {
    content: "";
    border: 1px solid;
    width: 60%;
    height: 70%;
    position: absolute;
    z-index: 9;
    transform: rotate(15deg);
    pointer-events: none;
    transition: 0.35s all ease-in-out;
}







/* AKKORDEON ACCORDION */

.field-entry.editor p {
    /*margin: 0;*/
}

.field-entry.editor h4,
.item-page h4 {
    cursor: pointer;
    padding: 10px 25px;
    margin: 0;
    border-radius: 5px;
    position: relative;
}
.field-entry.editor h4.active {

}

.field-entry.editor h4::before,
.item-page h4::before {
    content: "+";
    display: inline-block;
    transition: transform 0.3s ease;
    width: 24px;
    text-align: center;
    color: var(--sekundaerfarbe);
    position: absolute;
    left: 0;

}
.field-entry.editor h4:hover::before,
.item-page h4:hover::before {
    transform: rotate(90deg);

}
.field-entry.editor h4.active::before,
.item-page h4.active::before {
    content: "-";
    transition: transform 0s ease;
    width: 24px;
    text-align: center;

}
.field-entry.editor h4.active:hover::before,
.item-page h4.active:hover::before {
    transform: rotate(0deg);
}



.field-entry.editor h4 + div,
.item-page h4 + div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px;


    background-color: var(--hellgrau);
}


.field-entry.editor  h4.active + div,
.item-page h4.active + div {
    max-height: 500px;
    padding: 10px;
}




/* ################## Dienstleister #################### */

.firmenlogo {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 15px;
}
.firmenlogo .item-content {
    display: flex;



}
.firmenlogo .fields-container {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    align-items: center;
}
.firmenlogo .fields-container .editor {
    max-width: 300px;
    text-align: center;
    line-height: normal;
}
.firmenlogo .fields-container .editor a {
    padding: 5px;
    position: relative;
    display: flex;
}
.firmenlogo .fields-container .bild {
    max-width: 250px;
    width: 100%;
    height: auto;
    border: 1px solid var(--hellgrau);
    padding: 5px;
}




.firmenlogo {

    text-align: center;
    border: 1px solid var(--primaerfarbe);
    margin: 50px;
    padding: 50px;
    /*border-radius: 5px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.35s ease-in-out;
    position: relative;
    overflow: hidden;
}



.firmenlogo:hover {
    transform: scale(1.05) rotate(-2deg);


    box-shadow: 0 0 20px rgba(133, 188, 255, 0.5);
    /*background: var(--hintergrund_blau);*/
    transition: all 0.35s ease-in-out;
}






/* ###################  BLOG / TIPPS ######################### */



.tipps .blog-items.columns-2 .blog-item {
    position: relative;
    padding: 50px;
}

.tipps .standard {
    display: flex;
    flex-flow: column;
}

.tipps .standard .beitrag {
    top: -20px;
    position: relative;
}


.tipps .item-content h2 {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}






/*

.tipps .hg_content {

}

.tipps .main_box {

}




.standard .fields-container {
    display: flex;
    position: relative;
    justify-content: center;
    /*padding: 50px;
}*/




/*.standard .fields-container .bild {
    width: 50%;
    position: relative;
    display: flex;
    padding:50px;
    align-items: center;
    justify-content: center;

}
.links .standard .fields-container .bild  {
    order: 1;
}
.rechts .standard .fields-container .bild {
    order: 2;
}*/

/*
.standard .fields-container .bild .field-value img {
    --_g: 10%/45% 45% no-repeat conic-gradient(#000 0 0);
    mask:
        left   var(--_i,) top    var(--_g),
        bottom var(--_i,) left   var(--_g),
        top    var(--_i,) right  var(--_g),
        right  var(--_i,) bottom var(--_g);
    filter: grayscale();
    transition: .3s linear;
    cursor: pointer;
}
.standard .fields-container .bild .field-value img:hover {
    --_i: 10%;
    filter: grayscale(0);
}

.standard .fields-container .field-entry.bild::before {
    content: "";
    border: 1px solid;
    width: 60%;
    height: 70%;
    position: absolute;
    z-index: 9;
    transform: rotate(-15deg);
    pointer-events: none;
    transition: 0.35s all ease-in-out;
}

.standard .fields-container .field-entry.bild:hover::before {
    content: "";
    border: 1px solid;
    width: 60%;
    height: 70%;
    position: absolute;
    z-index: 9;
    transform: rotate(15deg);
    pointer-events: none;
    transition: 0.35s all ease-in-out;
}*/


















/*

@keyframes BackgroundGradient2 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


@keyframes rotate-bg-color {
    0% {
        background-color: #333;
    }
    10% {
        background-color: #444;
    }
    20% {
        background-color: #555;
    }
    30% {
        background-color: #666;
    }
    40% {
        background-color: #777;
    }
    50% {
        background-color: #888;
    }
    60% {
        background-color: #777;
    }
    70% {
        background-color: #666;
    }
    80% {
        background-color: #555;
    }
    90% {
        background-color: #444;
    }
    100% {
        background-color: #333;
    }
}


.bg_tipp, .tipp2, .tipp3 {
    display: none;
}



.tipps .bg_tipp {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, rgba(58,123,213,0.5) 50%, rgba(240,200,0,0.5) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
    display: block;
}

.tipps .tipp2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
    display: block;
}

.tipps .tipp3 {
    animation-duration:5s;
    display: block;
}




@keyframes slide {
    0% {
        transform:translateX(-25%);
    }
    100% {
        transform:translateX(25%);
    }
}





.tipps .blog-items.columns-2 .blog-item {
    position: relative;
    padding: 100px;
    background: var(--weiss);
    border: 5px solid var(--primaerfarbe);
    margin: 25px 50px;
    background: linear-gradient(132deg, rgba(58, 123, 213, 0.1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6), rgba(58, 123, 213, 0.1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8));
    background-size: 400% 400%;
    animation: BackgroundGradient 15s ease infinite;
    width: calc(50% - 100px);
    transition: 0.35s all ease-in-out;
    
}

.tipps .blog-items.columns-2 .blog-item:hover {
transform: scale(1.05);
transition: 0.35s all ease-in-out;
}

.tipps .item-content h2 {
    font-size: 36px;
}
*/




/* ENDE BLOG / TIPPS */




/* ###########  KONTAKT SEITE KONTAKTFORMULAR ################ */


.kontakt_seite {

}

.kontakt_seite .main_box {
    position: relative;

}


.kontakt_seite .blog {
    padding: 0;
    position: relative;
}


.kontakt_seite .blog-items.items-leading .blog-item {
    width: 100%;
    max-width: none;
    background: none;
    display: block;
    padding: 0;
    border: none;
    margin: 0 0 150px 0;
    animation: none;
    position: relative;
    top: -15px;
    bottom: 0;
    z-index: -1;
    position: relative;

}


.hg_kontakt_info_box {
    position: absolute;
    z-index: 1;
    bottom: 0px;

    width: 100%;

}
.kontakt_info_box {
    display:flex;
    padding: 5px;
    transform: scale(0.95);
}

.kontakt_info {

    width: calc((100% / 3) - 110px);
    text-align: center;
    border: 1px solid var(--primaerfarbe);
    margin: 50px;
    padding: 50px;
    /*border-radius: 5px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.35s ease-in-out;
    position: relative;
    overflow: hidden;
    background: var(--hintergrund1);
    transform: scale(0.95)

}

.kontakt_info:hover {
    transform: scale(1) rotate(-2deg);
    box-shadow: 0 0 20px rgba(133, 188, 255, 0.5);
    background: var(--weiss);
    transition: all 0.35s ease-in-out;
}






/*

.kontakt_seite .blog {
    padding: 0;
    position: relative;
}

.kontakt_seite .blog-items {
    position: relative;
}

.kontakt_seite .blog-items .blog-item {
    width:50%;
    max-width: 500px;
    
    
    padding: 100px;
    background: var(--weiss);
    border: 5px solid var(--primaerfarbe);
    margin: 25px 50px;
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
    background-size: 400% 400%;
    animation: BackgroundGradient 15s ease infinite;
    
    transition: 0.35s all ease-in-out;
    
    position: absolute;
    z-index:1;
    left: 0;
    right:0;
    margin: 0 auto;
    top: -550px;
    
}

.kontakt_seite .blog-items.items-leading .blog-item {
    width:100%;
    max-width: none;
    background: none;
    display: block;
    padding: 0;
    border: none;
    margin: 0 0 300px 0;
    animation: none;
    position: relative;
    top:0;
    bottom:0;
    
    z-index: -1;
    
}


*/







/* ############### SLIDE GALLERY  SLIDEGALLERY  #######  */

.slidergallery {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    line-height: 1.4;
    color: var(--clr-primary);
    padding: 1rem;
    margin: 0;
    z-index: 9;
    position: relative;
}








/* Hide radio buttons */
input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.cards {
    --base-rotation: 0deg;
    --full-circle: 360deg;
    --items: 16;
    --radius: 20vw;
    //30vw;
    --duration: 300ms;

    --cards-container-size: calc(var(--radius) * 2);
    --thumb-size: 30px;
    --image-size: calc(var(--radius));
    --image-y: 0%;
    --labels-offset: calc(var(--radius) * -1);
    --title-top: calc(var(--thumb-size) * -3);
    --info-top: calc(100% + 2rem);
    --info-width: 100%;

    position: fixed;
    inset: 0;
    margin: auto;
    width: var(--cards-container-size);
    height: var(--cards-container-size);
    aspect-ratio: 1;
    border-radius: 50%;
    perspective: 1000px;
    transition: transform 0.3s ease-in-out var(--duration);
    list-style: none;
}

@media (min-width: 800px) {
    .cards {
        --radius: 20vw;
        //30vw;
        --thumb-size: 40px;
        --title-top: 2rem;
    }
}
@media (min-width: 1200px) {
    .cards {
        --radius: 15vw;
        //20vw;
        --thumb-size: 50px;
        --image-y: 0;
        // -20%;
        --info-width: min(100% - 2rem, 65%);

        --info-top: calc(var(--image-size) * 1.3);
    }
}

.cards li {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    transform-origin: center;
    display: grid;
    place-content: center;
    transform: rotate(calc(var(--i) * 360deg / var(--items)));
    pointer-events: none;
}

.cards li > label {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(var(--labels-offset));
    width: var(--thumb-size);
    height: var(--thumb-size);
    cursor: pointer;
    pointer-events: initial;
    /*outline: 1px dashed red;*/
    transition: var(--duration) ease-in-out;
}
/* thumbs */
.cards li > label > img {
    transform-origin: center;
    width: 100%;
    scale: var(--label-scale, 1);
    opacity: var(--label-opacity, 1);
    transition: scale var(--duration) ease-in-out,
        opacity var(--duration) ease-in-out;
}
/* redudce scale of all thumbs */
.cards:has(label:hover) label {
    --label-scale: 0.75;
}
/* enlarge thumbs either side of hovered */
.cards li:has(+ li > label:hover) > label,
.cards li:has(label:hover) + li > label {
    --label-scale: 1.25;
}
/* hovered thumb */
.cards li > label:hover img {
    --label-scale: 1.5;
}
/* main image */
.cards > li > img {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: contain;
    z-index: 52;

    transform: translateY(var(--image-y));
    transition-property: opacity, scale, width, height, transform, filter;
    transition-duration: var(--duration);
    transition-timing-function: ease-in-out;
    transition-delay: var(--item-delay, 0ms), var(--item-delay, 0ms), 0ms, 0ms, 0ms,
        0ms;

    pointer-events: initial;
    opacity: var(--item-opacity, 0);
    scale: var(--item-scale, 0);
    filter: drop-shadow(0px 0px 5px rgba(255 255 255 / 0.25));
}

.cards > li:has(:checked) > img:hover {
    transform: translateY(var(--image-y)) rotateY(-30deg) rotateX(-5deg);
    transition-delay: 0ms;
    filter: drop-shadow(15px 10px 5px rgba(255 255 255 / 0.25));
}

.cards > li > h2,
.cards > li > p {
    position: absolute;
    left: 50%;
    text-align: center;
    transform: translate(-50%, 0);
    transform-origin: center;
    color: var(--primaerfarbe);
}
.cards > li > h2 {
    top: var(--title-top);
    opacity: var(--title-opacity, 0);
    translate: 0 var(--title-y, -30px);
    transition: var(--duration) ease-in-out var(--title-delay, 0ms);
}
.cards > li > p {
    top: var(--info-top);
    margin: 0 auto;
    width: var(--info-width);
    z-index: 2;
    font-size: clamp(0.8rem, 3.5vw + 0.05rem, 1.1rem);
    text-wrap: balance;
    opacity: var(--info-opacity, 0);
    translate: 0 var(--info-y, 30px);
    transition: var(--duration) ease-in-out var(--info-delay, 0ms);
}

/* update custom properties for checked item */
li:has(input:checked) {
    --label-opacity: 0.25;
    --label-scale: 1;
    --item-scale: 1;
    --item-opacity: 1;
    --item-delay: calc(var(--duration) * 2);
    --title-opacity: 1;
    --title-y: 0;
    --title-delay: calc(var(--duration) * 3);
    --info-opacity: 1;
    --info-y: 0;
    --info-delay: calc(var(--duration) * 3);
    /*outline: 1px dashed red;*/
    z-index: 99;
}

/* rotate container based on checked radio */
.cards:has(input:checked) {
    transform: rotate(
        calc(
        var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))
        )
        );
}
/*
this would be so much simpler if we could use counter values as custom property values
*/
.cards:has(input#item-1:checked) {
    --index: 0;
}
.cards:has(input#item-2:checked) {
    --index: 1;
}
.cards:has(input#item-3:checked) {
    --index: 2;
}
.cards:has(input#item-4:checked) {
    --index: 3;
}
.cards:has(input#item-5:checked) {
    --index: 4;
}
.cards:has(input#item-6:checked) {
    --index: 5;
}
.cards:has(input#item-7:checked) {
    --index: 6;
}
.cards:has(input#item-8:checked) {
    --index: 7;
}
.cards:has(input#item-9:checked) {
    --index: 8;
}
.cards:has(input#item-10:checked) {
    --index: 9;
}
.cards:has(input#item-11:checked) {
    --index: 10;
}
.cards:has(input#item-12:checked) {
    --index: 11;
}
.cards:has(input#item-13:checked) {
    --index: 12;
}
.cards:has(input#item-14:checked) {
    --index: 13;
}
.cards:has(input#item-15:checked) {
    --index: 14;
}
.cards:has(input#item-16:checked) {
    --index: 15;
}
.cards:has(input#item-17:checked) {
    --index: 16;
}
.cards:has(input#item-18:checked) {
    --index: 17;
}
.cards:has(input#item-19:checked) {
    --index: 18;
}
.cards:has(input#item-20:checked) {
    --index: 19;
}

/* general styling */
*,
::before,
::after {
    box-sizing: border-box;
}
:root {
    --clr-bg: #000;
    --clr-primary: rgb(248, 243, 243);
}


















/* ENDE SLIDE GALLERY*/


/* ENDE CONTENT ENDE */


/* Pagination */

.pagination {
    float:left;
    width:100%;
}
.pagination ul {
    display: flex;
    flex-flow: row;
}
.pagination ul li {
    list-style:none;
}
.pagination ul li a {
    padding:5px;
}
.pagination ul li span {
    padding:5px;
}




/************************************************************************/
/*				 Footer					*/
/************************************************************************/

footer {



}




.hg_footer {
    background: var(--grau);
}

.hg_footer em {
    font-size: 28px;
}

.footer_box {
    display: flex;
    /*margin: 50px;*/
    border-top: 1px solid var(--primaerfarbe);
    /*padding: 25px 50px 0;*/
    position: relative;
    overflow: hidden;
}

.footer_item {
    width: 100%;
    padding: 100px 100px 50px;
}
.footer_item1 img {
    width: 200px;
    height: auto;
    transform: rotate(-15deg);
    position: absolute;
    top: -214px;
    z-index: 999;
    left: 0;
}

.footer_item1 .custom {
    border: 1px solid var(--hintergrund3);
    padding: 50px;
    margin-top: 15px;
    top: 0px;
    position: relative;
    z-index: 1;
    color: var(--hellgrau);
}


.footer_item2::before {
    content:"Menü";
    color:var(--hellgrau);
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    position: relative;
    margin: 20px 0 20px;
}



.footer_item2 {
    width:100%;
}
.footer_item3 {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_item3 svg#logo_x5F_komplett {
    width: 330px;
    height: auto;
}


.footer_item3 svg#logo_x5F_komplett .st0 {
    fill: var(--primaerfarbe);
}


.footer_box ul {
    display: flex;
    flex-flow: column;
    margin: 0 50px
}


.footer_box ul li {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    background: var(--hintergrund2);
}
.footer_box ul li a {
    position: relative;
    display: flex;
    font-weight: 400;
    border: 1px solid var(--hintergrund3);
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--hellgrau);
    transition: 0.35s all ease-in-out;
}

.footer_box ul li a:hover {
    color: var(--sekundaerfarbe);
    border: 1px solid var(--sekundaerfarbe);
    transition: 0.35s all ease-in-out;
}

.footer_box ul li a::before {

    /*    content: "";
        width: 15px;
        height: 15px;
        background: var(--primaerfarbe);
        position: absolute;
        margin-left: -20px;
        margin-top: 3px;*/
}

.footer_box ul li a img {
    width: 24px;
    height: 24px;
}


/* MENU MIT EXTRA KLASSE GENERAL */
.footer_box ul.general {
    border-top: 1px solid var(--hellgrau);
    margin-top: 10px;
    padding-top: 10px;
}







.hg_copy {
    background: var(--dunkelgrau);
}

.webadrett {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

/******************************** MOBILE MENU CK  *****************************/

/****************************** ende mobilemenuck  *******************/