/* Definieren von Grundfarben im System */

:root {  
  --hauptfarbe: #C54916; /* Blutorange */
  --hauptfarbe_alternativ: #ce4c29; /* helleres Orange */
  --hauptfarbe_hellhinterg: #e5ddd7; /* leicht gefärbtes hellgrau in Richtung Hauptfarbe */
  --hauptfarbe_dunkelhinterg: #c5a598; /* leicht gefärbtes dunkleres grau in Richtung Hauptfarbe */
  --zweitfarbe: #CEC3BC; /* Greige */
  --hell: #ffffff; /* weiß */
  --hell_transparent: #ffffff45; /* weiß, stark durchsichtig */
  --hell_wenig_transparent: #ffffffd9; /* weiß, wenig durchsichtig */
  --hellgrau: #eaeaea; /* helles grau */
  --mittelgrau: #afafaf; /* mittelgrau - zwischen hellgrau und grau */
  --grau: gray; /* grau */
  --dunkelgrau: #696969; /* dunkelgrau */
  --schwarzgrau: #222222; /* besonders dunkeles grau */
  --dunkel: #000000; /* schwarz */
  --hinweis: darkgreen; /* dunkelgrün */
  --meldung: #900; /* dunkelrot */
}

/* Definieren von Grundwerten im System */

:root {
  --borderradius: 5px; /* Standard Border Radius */
}


/*---------------------------- Allgemeines -------------------------------*/
.cms_div_um_alles {background-color: var(--hauptfarbe_hellhinterg);}

#inhalt {margin: 18vh 0; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

.variabler_weisser_kasten {background-color: transparent;}
/*
#inhalt input[type="submit"] {background-color: #ffffffa8; border: 2px solid white; color: black; padding: 12px 30px; border-radius: 5px; transition: 0.25s; letter-spacing: 1px; font-size: 1rem; line-height: 1.6rem; margin-top: 20px;}
#inhalt input[type="submit"]:hover {background-color: white;}
*/

#inhalt .meldung {background-color: var(--hauptfarbe); color: white; border-radius: 10px; border: none !important; box-shadow: 0 0 5px grey; padding: 10px 15px;}

#inhalt .inhalt_seitenvorlage {justify-content: center;}
#inhalt .indiv_seitenvorlage {justify-content: center;}

hr {height: 3px; width: 100%; border: none; background-color: var(--hauptfarbe); max-width: 550px; margin: 8vh 0;}



#datenschutz_div h1 {}





/*---------------------------- Schriftarten und Größen -------------------------------*/

h1, h3 {font-family: 'Magazine', serif; color: var(--hauptfarbe); font-size: 2.5rem; line-height: 3.5rem;}
#inhalt h1 {font-family: 'Magazine', serif; color: var(--hauptfarbe); font-size: 3rem; line-height: 3.8rem; text-align: center; margin-bottom: 3vh;}
#inhalt h2 {font-family: sans-serif; color: var(--hauptfarbe); font-size: 2.5rem; line-height: 3.5rem;}
#inhalt h3 {font-family: 'Magazine', serif; color: var(--dunkel); font-size: 2rem; line-height: 2.8rem; text-align: left; width: 100%; margin: 1vh 0 2vh 0;}
#inhalt h4 {font-family: 'Bitlamero Script', sans-serif; color: var(--hauptfarbe); font-size: 8rem; line-height: 6rem; margin: 0 0 20px 0; font-weight: 400; text-align: center; overflow: hidden;}
#inhalt #bausteinbereiche_bausteine_1 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_2 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_3 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_4 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_5 .kurztext_global h3 {font-family: sans-serif; color: var(--hauptfarbe); font-size: 2.5rem; line-height: 3.5rem;}
.kurztext_global h3 {font-family: sans-serif; color: var(--hauptfarbe); font-size: 2.5rem; line-height: 3.5rem;}
.kurztext_global h4 {font-family: sans-serif; color: var(--hauptfarbe); font-size: 1.6rem; line-height: 2.4rem; margin: 20px 0 10px 0;}
#inhalt #news_ausgabekasten .kurztext_global h3 {font-family: sans-serif; color: white; font-size: 2.5rem; line-height: 3.5rem;}

#inhalt p {max-width: 550px; width: 100%;}
#inhalt p, #inhalt li, #inhalt div {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem; color: var(--schwarzgrau); text-align: left;}
#inhalt a {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem; color: var(--hauptfarbe); transition: 0.25s;}
#inhalt a:hover {color: var(--hauptfarbe_alternativ); letter-spacing: 1px;}
.kurztext_global .kurztext_text_div p {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem;}
#inhalt #news_ausgabekasten .kurztext_global .kurztext_nur_der_text .kurztext_text_div {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem;}
#kontaktformular p {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem;}
#kontaktformular label {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem;}
#kontaktformular fieldset legend {font-family: sans-serif; font-size: 1rem; line-height: 1.6rem;}

#inhalt .news_bausteine h3 {font-family: sans-serif; color: white; font-size: 2.2rem; line-height: 2.8rem; font-weight: 400; margin: 8px 0 10px 0;}






/*---------------------------- Bilderleiste -------------------------------*/
#bilderleiste {height: 100vh; background-color: black; position: relative;}
#bilderleiste #logo {display: none;}
#bilderleiste a {height: auto;}
#bilderleiste hr {width: 20%; height: 2px; margin: 15px 0 30px; background-color: var(--hauptfarbe); border-width: 0;}


#bilderleiste h1 {margin: 10px 0 0 0; font-size: 1.2rem; line-height: 2rem; font-weight: 300; color: #ffffff82;}


#bilderleiste #hintergrund_navi {height: calc(7vh + 30px); width: 100%; background-color: var(--hauptfarbe_hellhinterg);}
#bilderleiste #hintergrund_verlauf {height: 6vh; width: 100%; position: absolute; top: calc(7vh + 30px); background: rgb(229,221,215);
background: linear-gradient(180deg, rgba(229,221,215,1) 0%, rgba(229,221,215,0) 100%);}
#bilderleiste #landingpage_foto, #bilderleiste #landingpage_foto_mobil {display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 7vh - 30px); overflow: hidden; align-self: flex-end;}
#bilderleiste #landingpage_foto img, #bilderleiste #landingpage_foto_mobil img {width: 100%; height: 100%; object-fit: cover;}
#bilderleiste #landingpage_foto_mobil {display: none;}



#pfeil_zum_nach_unten_scrollen {height: 10vh; position: absolute; bottom: 0; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center;}
#pfeil_zum_nach_unten_scrollen img {height: 20%; animation-name: grow_shrink; animation-duration: 0.8s; animation-delay: 2s; animation-iteration-count: 10; animation-direction: alternate; opacity: 0.8;}



@keyframes grow_shrink {
 from {height: 20%;}
 to {height: 30%;}
}







/*---------------------------- Navigation -------------------------------*/
#logo_in_navi {height: 100%; display: flex; justify-content: center; align-items: center;}
#logo_in_navi img {height: 65%; transition: 0.3s;}
#navigation.scrolled_down #logo_in_navi img {height: 65%;}

#navigation.scrolled_down #logo_in_navi #logo_greige {display: none;}
#navigation #logo_in_navi #logo_greige {display: none;}
#navigation #logo_in_navi #logo_schwarz {display: block;}
#navigation.scrolled_down #logo_in_navi #logo_schwarz {display: block;}


#navi_mobile_2020 {background-color: var(--zweitfarbe); position: fixed; box-shadow: 0 0 10px #3c342d99;}
#navi_mobile_2020 #navi_mobile_2020_burgermenu {height: 5vh;}
#navi_mobile_2020 #navi_mobile_2020_burgermenu #burgermenu_button {background-image: url(/bilder/button_mobil/burgermenu_symbol_rgb255.svg); opacity: 0.6;}
#navi_mobile_2020 #navi_mobile_2020_burgermenu #burgermenu_menu_text {color: white; opacity: 0.6}
#navi_mobile_2020 #navi_mobile_2020_inhalt #logo_in_navi {position: absolute; top: 0; right: 0; height: 10vh; min-height: 30px; padding: 0 12px;}

#navi_mobile_2020 #navi_mobile_2020_inhalt ul li ul {background-color: #ffffffed;}
#navi_mobile_2020 #navi_mobile_2020_inhalt ul li {border-bottom: 2px solid var(--hauptfarbe_hellhinterg);}
#navi_mobile_2020 #navi_mobile_2020_inhalt ul li a {color: var(--hauptfarbe);}
#navi_mobile_2020 #navi_mobile_2020_inhalt ul li a.aktiv {color: var(--hauptfarbe_alternativ); border-color: var(--hauptfarbe_alternativ);}


#navigation {background-color: transparent; height: 10vh; order: 1; transition: 0.3s; padding: 15px 60px; width: calc(100% - 120px); justify-content: space-between; position: fixed; top: 0;}
#navigation.scrolled_down {padding: 5px 60px; height: 8vh; background-color: var(--zweitfarbe);}
#navigation ul {width: auto; height: auto;}
#navigation ul li {position: relative; display: flex; flex-direction: column;}
#navigation ul li ul {background: #792f61e8; position: absolute; top: 41px; min-width: 70%; box-shadow: 0 5px 5px gray; right: unset; margin-right: 0; display: flex; flex-direction: column; padding: 0 15px;}
#navigation ul li a {color: var(--zweitfarbe); font-size: 1.05rem; padding: 13px 18px; text-transform: uppercase; font-weight: normal; text-align: center;}
#navigation.scrolled_down ul li a {color: var(--hell);}
#navigation ul li a:hover {color: var(--dunkel);}
#navigation.scrolled_down ul li a:hover {color: var(--dunkel);}
#navigation ul li a.aktiv {color: var(--dunkel);}
#navigation.scrolled_down ul li a.aktiv {color: var(--dunkel);}
#navigation ul li a.aktiv:hover {color: var(--zweitfarbe);}
#navigation.scrolled_down ul li a.aktiv:hover {color: var(--dunkel);}
#navigation ul li a:before {content: ""; position: absolute; left: 51%; right: 51%; bottom: 0; background: var(--dunkel); height: 5px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
#navigation.scrolled_down ul li a:before {background: var(--dunkel);}
#navigation ul li a.aktiv:before {left: 15px; right: 15px;}
#navigation ul li a:hover:before {left: 0; right: 0;}




/*---------------------------- Kontaktformular -------------------------------*/
#kontaktformular p {color: black;}
#kontaktformular a {color: var(--hauptfarbe_alternativ);}
#kontaktformular a:hover {color: var(--hauptfarbe_alternativ); text-decoration: underline;}








/*---------------------------- Inhalt -------------------------------*/
#inhalt #bausteinbereiche_bausteine_1 .kurztext_global, #inhalt #bausteinbereiche_bausteine_2 .kurztext_global, #inhalt #bausteinbereiche_bausteine_3 .kurztext_global, #inhalt #bausteinbereiche_bausteine_4 .kurztext_global, #inhalt #bausteinbereiche_bausteine_5 .kurztext_global {background-color: transparent;}


#inhalt .aktivleiste_vorschau #aktivleiste_innen_id .news_ausgabe .kurztext_global {background-color: white; border-radius: 10px; padding: 25px;}
#inhalt .aktivleiste_vorschau #aktivleiste_innen_id .news_ausgabe .kurztext_global h3 {font-family: 'Courgette', sans-serif; color: #0c78a9; font-size: 1.4rem; line-height: 2.2rem;}
#inhalt .aktivleiste_vorschau #aktivleiste_innen_id .news_ausgabe .kurztext_global .kurztext_nur_der_text .kurztext_text_div a {color: #0c78a9;}
#inhalt .aktivleiste_vorschau #aktivleiste_innen_id .news_ausgabe .kurztext_global .kurztext_nur_der_text .kurztext_text_div a:hover {text-decoration: underline;}


#inhalt #news_ausgabekasten .kurztext_global {background-color: transparent; border-radius: 0; padding: 25px;}
#inhalt #news_ausgabekasten .kurztext_global:last-of-type {border-bottom: 4px solid white;}
#inhalt #news_ausgabekasten .kurztext_global h3 {font-size: 2rem; line-height: 3rem;}
#inhalt #news_ausgabekasten .kurztext_global .kurztext_nur_der_text .kurztext_text_div a {color: white; font-weight: bold; letter-spacing: 0.5px; transition: 0.5s;}
#inhalt .news_bausteine a {color: white; font-weight: bold; letter-spacing: 0.5px; transition: 0.5s;}
#inhalt #news_ausgabekasten .kurztext_global .kurztext_nur_der_text .kurztext_text_div a:hover {letter-spacing: 3px;}
#inhalt .news_bausteine a:hover {letter-spacing: 3px;}


.nurtext_global {padding: 0; margin: 8px 0; width: 100%; max-width: 550px;}
.nurtext_global h1 {padding: 0; margin: 8px 0;}
.nurtext_global h3 {}

#vorl200_sprungmarken_bausteinbereiche {padding: 20px 0;}
#vorl200_sprungmarken_bausteinbereiche li a {background-color: #ffffffb8; padding: 8px 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--hauptfarbe); margin: 5px;}
#vorl200_sprungmarken_bausteinbereiche li a:hover {background-color: white; color: black;}


.bausteinbereich {display: flex; flex-direction: column; justify-content: center; align-items: center;}


.bstb_intuitiv {padding: 10; margin: 0; position: relative; display: flex; flex-direction: column;}
.kurztext_global {background-color: transparent; margin: 20px 0; padding: 0;}
#inhalt .kurztext_global .kurztext_nur_der_text {display: flex !important; flex-wrap: wrap;}
#inhalt .kurztext_global .kurztext_nur_der_text .kurztext_text_div {padding-left: 0 !important; flex: 1; min-width: 200px;}
#inhalt .kurztext_global .kurztext_bilderleiste {margin-right: 35px !important; max-width: calc(100% - 35px);}
.kurztext_global input[type="image"] {border-radius: 5px; border: 4px solid white; max-width: calc(100% - 8px);}
#inhalt #bausteinbereiche_bausteine_1 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_2 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_3 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_4 .kurztext_global h3, #inhalt #bausteinbereiche_bausteine_5 .kurztext_global h3 {font-size: 2.2rem; line-height: 3rem; margin-bottom: 20px;}
.bstb_intuitiv .kurztext_global h3 {font-size: 2.2rem; line-height: 3rem; margin-bottom: 20px;}


#kurztext_1_bausteine_1_23 {margin-top: 12vh;}

.inhalt_1 .nurtext_global {max-width: unset;}


.news_bausteine {border-bottom: 4px solid white; padding-bottom: 20px;}
.news_bausteine:last-of-type {border-bottom: none;}

.textblock {display: flex; flex-wrap: wrap;}
#inhalt #btn_alle_news {font-family: sans-serif; background-color: #ffffffa8; border: 2px solid white; color: black; padding: 12px 30px; border-radius: 5px; transition: 0.25s; letter-spacing: 1px; font-size: 2vh; line-height: 2.5vh; margin-top: 20px;}
#inhalt #btn_alle_news:hover {background-color: white;}



.nurbild_global {width: auto; margin: 0 0 5vh 0; padding: 0; display: flex; flex-wrap: wrap;     box-shadow: 2px 4px 15px #c4b9b1; justify-self: center; align-self: center; border-radius: 0; border: 10px solid white;}
.nurbild_global .nurbild_bilderleiste {width: 100%; height: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten {height: 100% ; width: 100%; margin: 0;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .animation_wrap {height: 100%; width: 100%;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .animation_wrap .slideshow {height: 100% !important; width: 100% !important; margin: 0; padding: 0;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .animation_wrap .slideshow li {height: 100% !important; width: 100% !important; margin: 0; padding: 0;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .animation_wrap .slideshow li img{height: 100% !important; width: 100% !important; }
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten form {height: 100%; display: flex; justify-content: center; align-items: center;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten form input[type="image"] {height: 100%; object-fit: contain;}
.nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .bildausgabe input[type="image"] {padding: 0; }






#inhalt .nurtext_global .nurtext_text_div {display: flex; flex-direction: column; align-items: center;}





#inhalt.inhalt_1 {margin-top: 0;}



#inhalt #kurztext_1_bausteine_1_21 {z-index: 1; width: 400px; height: 400px; margin-right: 13%;}


#inhalt #kurztext_1_bausteine_1_20 {background: rgb(115,30,25);
background: linear-gradient(150deg, rgba(115,30,25,1) 0%, rgba(159,59,32,1) 50%, rgba(195,95,50,1) 100%); border-radius: 10px; padding: 20px 30px; max-width: 65%; margin-top: -10%;}
#inhalt #kurztext_1_bausteine_1_20 h3 {color: white; font-family: 'Red Hat Display', sans-serif; padding: 0; margin: 5px 0 25px 0; font-size: 1.8rem; line-height: 2.4rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 200;}
#inhalt #kurztext_1_bausteine_1_20 p {color: white; margin: 10px 0;}
#inhalt #kurztext_1_bausteine_1_20 a {color: white; letter-spacing: 1px; transition: 0.2s; text-transform: uppercase;}
#inhalt #kurztext_1_bausteine_1_20 a:hover {letter-spacing: 0;}







/*---------------------------- Fuß -------------------------------*/
#fuss {background-color: var(--zweitfarbe); padding: 2%; flex-direction: column; min-height: 6vh;}
#fuss a {padding: 0 20px; color: white; letter-spacing: 1px; text-transform: uppercase; transition: 0.5s;}
#fuss a:hover {letter-spacing: 3px; color: black;}
#fuss a img {height: 30px;}


#fuss_social_media {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 30px;}
#fuss_social_media #facebook_link {height: 30px; width: 30px; background-size: contain; background-repeat: no-repeat; background-image: url("/individuell/bilder/f_logo_RGB-White_1024.png"); padding: 0; margin: 5px 20px; transition: 0.15s;}
#fuss_social_media #facebook_link:hover {height: 40px; width: 40px; margin: 0 15px;}
#fuss_social_media #instagram_link {height: 30px; width: 30px; background-size: contain; background-repeat: no-repeat; background-image: url("/individuell/bilder/glyph-logo_May2016_weiß-01.png"); padding: 0; margin: 5px 20px; transition: 0.15s;}
#fuss_social_media #instagram_link:hover {height: 40px; width: 40px; margin: 0 15px;}

#fuss_erste_zeile {text-align: center; font-family: sans-serif; color: white; margin: 5vh 0; letter-spacing: 0.5px; display: flex; flex-wrap: wrap; width: 100%; justify-content: center; align-items: center;}
#fuss_erste_zeile>div {margin: 20px;}
#fuss_erste_zeile h4 {font-family: sans-serif; color: white; font-size: 1.2rem; line-height: 1.8rem; margin: 25px 0 8px 0;}
#fuss_erste_zeile p {margin: 2px 0;}
#fuss_erste_zeile a {text-transform: none;}





#back_to_top_btn {background-color: #c54916bd;}






@media screen and (max-width: 1320px)
{
 #navigation {padding: 15px 30px 15px 60px; width: calc(100% - 90px)}
 #logo_in_navi img {height: 40%; max-width: 400px; object-fit: contain;}
 
 #inhalt #kurztext_1_bausteine_1_21 {margin-right: 5%;}
 #inhalt #kurztext_1_bausteine_1_20 {max-width: 75%;}
}

@media screen and (max-width: 992px) 
{
 #logo_in_navi img {height: 35%; max-width: 250px; object-fit: contain;}
 #navigation {padding: 15px 30px 15px 30px; width: calc(100% - 60px)}
 #navigation ul li a {font-size: 0.85rem; padding: 8px 10px;}

 #inhalt #kurztext_1_bausteine_1_21 {margin-right: 0; height: 300px; width: 300px;}
 #inhalt #kurztext_1_bausteine_1_20 {max-width: 85%; margin-top: -5%;}
}

@media screen and (max-width: 768px) 
{
 #logo_in_navi {display: none;}


 #bilderleiste {height: 75vh;}
 #bilderleiste #logo {display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: absolute; height: calc(100% - 80px); width: 100%; background: rgb(206,195,188);
background: linear-gradient(0deg, #e5ddd7 0%, rgba(206,195,188,0.8) 40%, rgba(206,195,188,0.3) 60%, rgba(206,195,188,0.1) 100%); padding-bottom: 80px;}
 #bilderleiste #logo img {object-fit: contain; max-width: 70%; max-height: 35%;}
 
 
 #bilderleiste #hintergrund_navi {display: none;}
 #bilderleiste #hintergrund_verlauf {display: none;}
 
 
 #bilderleiste #landingpage_foto_mobil {display: flex; height: 100%;}
 #bilderleiste #landingpage_foto {display: none;}
 

 #inhalt {margin-top: 3vh;}
 
 #inhalt h3 {font-size: 1.6rem; line-height: 2.2rem;}
 #inhalt h4 {font-size: 6rem; line-height: 4rem;}


 #inhalt .bausteinbereich {padding-top: 5vh;}
 #inhalt #kurztext_1_bausteine_1_21 {margin-right: 0; height: 300px; width: 300px; align-self: center;}
 #inhalt #kurztext_1_bausteine_1_20 {max-width: 100%; margin-top: 30px;}
 #inhalt #kurztext_1_bausteine_1_20 h3 {font-size: 0.9rem; line-height: 1.6rem; font-weight: 600;}
 
 #kurztext_1_bausteine_1_23 {margin-top: 0;}


 #fuss_social_media {margin-top: 20px;}
 #fuss_zweite_zeile {margin-bottom: 20px;}
 #fuss a {padding: 5px 10px;}
 
 
 .nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .bildausgabe input[type="image"] {width: 100%;}
 
 
 #datenschutz_div h1 {font-size: 6vw;}
}








/* Magazine */
@font-face {
  font-family: 'Magazine';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Magazine.ttf'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'Magazine';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/Magazine-Bold.ttf'); /* IE9 Compat Modes */
}