:root, :host {
	--fa-style-family-classic: 'Font Awesome 6 Free';
	--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
  
  @font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype"); }
  
  .fas,
  .fa-solid {
	font-weight: 900; }

/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
  src: url('../fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
     url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}

/* roboto-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v47-latin-700.eot'); /* IE9 Compat Modes */
    src: url('../fonts/roboto-v47-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v47-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v47-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
  }
  
  /* roboto-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v47-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/roboto-v47-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v47-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v47-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
  }
  
/* FARBEN *************************************** */
:root {
  --red: #a8313f;
  --orange: #df790d;
  --dklgrau: #4f4e4d;
  --dklgrau2: #75706e;
  --hellgrau: #eee6e3; /* e9dfdc */
  --bg-gray: #f9f8fa;
}

/* #start { background-color: var(--dklgrau); } */


/* ANIMATIONEN ************************************************************* */
 
  @keyframes scale-fade {
    0% {
      transform: translateX(-50px);
      opacity: 0;
    }  
/*    70% {
      transform: scale(1.25);
      opacity: 1;
    } */
    100% {
      transform: translateX(0px);
      opacity: 1;	
    }
  }

  @keyframes textfade {
    0% {
      opacity: 0;
      transform: translateX(10px);
    }  
    100% {
      opacity: 1;	
      transform: translateX(0px);
    }
  }

  /* Scroll Animation */

  .animateZitat {
    animation: textfade 2s ease-in;
  }
  
  @keyframes Logo {
      from  { transform: translateX(0)     rotate(0deg) }
      to    { transform: translateX(285px) rotate(360deg) }
  }

/* BASIC ******************************************************************* */
html, body { font-family: 'Roboto',sans-serif; background-color: var(--bg-gray); }
h1, h2, h3, h4, h5, h6, p { font-family: 'Roboto',sans-serif; }
h1 { font-size: 2.4em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.2em; margin-bottom: 0; }

/* Ergänzungen Header: Logo, Navigation ************************************ */
#header { height: 6rem; padding-top: 1rem; background: rgba(255,255,255,0.7) }
#header .logo img, #header .logo svg { height: 80px; }
body.header-fixed.header-animated #header.scrolled { height: 4rem; padding-top: 1rem; }
body.header-fixed.header-animated #header.scrolled .logo img { height: 55px; }

.dropmenu ul li a { font-size: 0.8rem; font-weight: 400; }
.dropmenu ul li a, .dropmenu ul li a:visited { color: var(--dklgrau) !important; font-weight: 700; }
.dropmenu ul li a.active, .dropmenu ul li a:focus, .dropmenu ul li a:hover { color: var(--red) !important; font-weight: 700; }

.dropmenu ul li a::before { font-family: FontAwesome; display: inline-block; float: right; margin-right: -20px; content: '\2b' !important; vertical-align: middle; }
.dropmenu ul li a:only-child::before { content: '' !important; }


.overlay { background: var(--hellgrau) !important; }
.treemenu li { background-color: var(--dklgrau) !important; }
.treemenu li a, .treemenu li a:visited { text-decoration: none; color: white !important; }
.treemenu li a.active, .treemenu li a:focus, .treemenu li a:hover { text-decoration: none; color: var(--orange) !important; }
.overlay.open { height: 55% !important; }

/* Ergänzungen Start-Image, Hero-Image ************************************************* */
/* .hero { height: 100vH; } */
.hero h1 { font-size: 8em; color: #fff; font-weight: 400; margin-bottom: 2em; text-align: center !important; text-shadow: 2px 2px var(--dklgrau); }
.textanimation { animation: scale-fade 6s ease-out; }
.hero #to-start { color: #fff; }
.header-fixed .hero { background-position: 50% 50% !important; }



/* *************************************************** */
/* STARTSEITE **************************************** */
/* *************************************************** */

/* Modular Title *********************************************************** */
.modular-title {  padding-top: 3em; padding-bottom: 6em; } /* HO V2 25-06-05 */
.Zitat p { font-size: 1.8em; font-weight: light; text-align: left; color: #aaa; padding-left: 1%; margin-top: 1em; margin-bottom: 0; border-left: 3px solid var(--orange); }
.columnLeistungenS { padding-right: 1.4em; }
.columnLeistungenS img { margin-top: 2em; }
.columnLeistungenXL { margin-top: 0; /* margin-bottom: 1em !important; */ text-align: left; border-left: 3px solid var(--orange); padding-left: 2% !important; padding-top: 3.1em;  }
.columnLeistungenXL h1 { font-size: 1.8em; line-height: 1.49em; margin-bottom: 0.4em; /* text-transform: uppercase; color: gray;*/ }
.columnLeistungenXL p { font-size: 1.3em; }

/* AKTUELLES STARTSEITE ******************** */
.modular-aktuelles { padding-top: 0em !important;  text-align: left;  } /* HO V2 25-06-05 */
.modular-aktuelles h2 { padding-top: 0; margin-top: 0; }
.columnNewsXL { margin-top: 0; /* margin-bottom: 1em !important; */ text-align: left; /* border-left: 3px solid var(--orange); */ padding-left: 2% !important;  }  /* HO V2 25-06-05 */
span.newsHeader { font-size: 1.4em; }

/* Mitarbeiter Startseite ***************** */
div.mitarbeiter-foto { width: 100%; height: 300px; background-size: cover !important; background-size: center center !important;  }
.modular-features .column { padding: 0.4em; }
.modular-features .feature-content { color: var(--dklgrau) !important; }
.modular-features .column:hover .feature-content { color: var(--dklgrau) !important; }
.modular-kontakt h2 { text-align: left; } /* HO V2 25-06-05 */
.kontaktTel { background-color: var(--red); color: #fff; padding: 0.4em; border-radius: 8px 0 0 8px; }
.kontaktMail { color: #fff; padding: 0.4em 1em; border-radius: 8px 8px 8px 8px;  } /* HO V2 25-06-05 */
/* div.kontakt { margin-top: 4em; text-align: left; border-left: 3px solid var(--orange); padding-left: 1%; } */
.pButton { margin-top: 2em; }


.imgborder { border-left: 1px solid var(--orange); padding-left: 1em; }
.modular-mitarbeiter { padding-top: 2em; padding-bottom: 2em; }
.modular-mitarbeiter img { width: 95%; }
.modular-mitarbeiter h2 { font-size: 1.4em; margin-top: 0; font-weight: 700; }
.modular-mitarbeiter h3 { font-size: 1.1em; margin-top: 0; font-weight: 700; }
.modular-mitarbeiter ul { margin-left: 1em; }


/* Modular Aktuelles ******************************************************** */

/* Projekte */
/* Uebersicht Startseite *********** */
.columns { margin-top: 2em !important; }
.modular-projekte { padding-top: 6em; padding-bottom: 6em; text-align: left; } /* HO V2 25-06-05 */
.projektuebersicht { background-color: var(--hellgrau);}
.columnProjekte { padding: 0.6em; }
.projekteUebersicht { height: 200px; padding-left: 0px; }
p.projektNummer { font-size: 2em; color: white; font-weight: 700; padding: 0 0 0 0.4em; text-shadow: 2px 2px 2px var(--dklgrau); }
p.projektTitel { text-align: left; padding: 0.2em 1em 0.2em 0.5em; background-color: var(--dklgrau); opacity: 0.9; color: #fff; border-radius: 0 0 10px 0;}  /* HO V2 25-06-05 */
p.projektTitel>a { color: #fff; }
p.iconZoom { font-size: 4em; text-align: center; width: 100%; font: normal normal normal 14px/1 FontAwesome; padding-top: 3em; } /* HO V2 25-06-05 */

/* Projektuebersicht ********* */
span.listKategorie { padding: 1% 1%; border-right: 1px solid white; border-left: 1px solid white; color: var(--hellgrau); background: var(--dklgrau)  }
span.listKategorie a { color: white !important; }
span.listKategorie a:hover { color: var(--orange) !important; text-decoration: none; }

/* Projektseiten ************ */
h1.projekt { margin-top: 0rem !important; font-size: 3em; font-weight: 400; }
section.projektvorstellung { padding-left: 0.4em; }
span.projektnummer { color: var(--orange); }
.projektvorstellung h2 { font-size: 1.2em; font-weight: bold; border-left: 4px solid var(--orange); padding-left: 0.8em; }
.gallery-container { padding-top: 2em; padding-right: 1.4em; }

/* News-Uebersicht ************** */
.newsDate { margin-bottom: 0.2em; font-size: 0.8em; font-weight: bold; }
.newsFoto { height: 300px; }
.newsHome { margin-bottom: 2.4em; }
p.newsZoom { font-size: 4em; text-align: center; width: 100%; font: normal normal normal 14px/1 FontAwesome; padding-top: 7em; } /* HO V2 25-06-05 */
p.newsTitel { text-align: left; padding: 0.2em 1em 0.2em 0.5em; background-color: var(--dklgrau); opacity: 0.9; color: #fff; border-radius: 0 0 10px 0;}  /* HO V2 25-06-05 */

/* Ueber uns ************************ */
.columnLeistungenXL2 { margin-top: 0; /* margin-bottom: 1em !important; */ text-align: left; border-left: 3px solid var(--orange); padding-left: 2% !important; padding-top: 0;  }
.columnLeistungenXL2 h1 { font-size: 1.8em; line-height: 1.49em; margin-bottom: 0.4em; /* text-transform: uppercase; color: gray;*/ }
.columnLeistungenXL2 p { font-size: 1.3em; }


/* Footer *********************** */
#footer { background-color: var(--dklgrau) !important; padding: 1em 1em 8em 1em;  color: #fff; font-size: 0.8em; }
#bottom { vertical-align: bottom; padding-top: 8em; }
#bottom p { margin-bottom: 0.2em; }

/* Spezielle Anker ****************************************** */
a { text-decoration: none; color: var(--red) !important;  }
a.active, a:active, a:focus, a:hover { text-decoration: underline; color: var(--red) !important;  }

#footer a { color: var(--orange) !important; }
#footer a:hover, #footer a:active, #footer a:focus { color: var(--orange) !important; }
#bottom a { color: var(--dklgrau) !important; }

a.lgtColor, a.lgtColor:visited { color: white !important; }
a.lgtColor:hover, a.lgtColor:active { color: white !important; }

a.divLink, a.divLink:visited { display: inline-block; width: 100%; height: 100%; }
a.divLink:hover, a.divLink:active { background-color: rgba(0,0,0,0.3); text-decoration: none; }

a.divLink .fa-user::before { content: "\f138" !important; font-size: 6em; color: rgba(255,255,255,0.0); }
a.divLink:hover .fa-user::before { color: rgba(255,255,255,0.5); }

a.buttonLink, a.buttonLink:visited, a.buttonLink:hover, a.buttonLink:active, a.buttonLink:focus { padding: 15px 30px; border-radius: 30px; background: var(--red); color: #fff !important; }
/* a.newsLink, a.newsLink:visited, a.newsLink:hover, a.newsLink:active, a.newsLink:focus { padding: 5px 10px; border-radius: 15px; background: var(--red); color: #fff !important; } */
/* a.newsLink, a.newsLink:visited, a.newsLink:hover, a.newsLink:active, a.newsLink:focus { font-weight: 700 !important; } */
a.newsLink, a.newsLink:visited, a.newsLink:hover, a.newsLink:active, a.newsLink:focus { padding: 5px 10px; border-radius: 14px; background: var(--red); color: #fff !important; } 

.mobile-menu .button_container span { background-color: var(--red) !important;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box; }




@media (max-width: 680px) { 
  .columnLeistungenXL, .columnLeistungenXL2 { margin-top: 1.2em; padding-top: 0; }
  
  .columnLeistungenXL p, .columnLeistungenXL2 p { font-size: 1.1em; } /* Zeile 151 */
  .modular-kontakt h3 { margin-top: 1em; }
}