/* ==========================================
   Autor: Sandra Telmoudi, Mohamed Ait Hmid
   Agentur: easymoments – Werbeagentur für Design und Programmierung
   Projekt: FET Transport + More Website
   Datum: Oktober 2025
   ========================================== */
   

:root{
  --brand-red:#E30613;
  --brand-yellow:#F1DD00;
  --brand-orange:#F39200;
  --brand-grey:#3C3C3B;
  --ink:#1f2937;
  --muted:#6b7280;
  --white:#ffffff;
  --gray:#f3f4f6;
  --gray2:#4c4c46;
  --lightgrey:#eee;
  --max:1200px;
  --second-bgcolor: #A0A095;
  
  --global--font-size-m:1.1rem;
  --global--font-size-xl:2.5rem;
  --global--font-size-xxl:6rem;
  --global--font-size-xxxl:9rem;
  --heading--font-size-h3:2rem;
  --heading--font-size-h2:4.5rem;
}

/* === Grundlayout === */
html, body {
	height: 100%; /* gesamte Fensterhöhe nutzen */
	margin: 0;
	display: flex;
	flex-direction: column; /* vertikale Anordnung */
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: "davis-sans", sans-serif;
}
body{
	color:var(--ink);
	background:var(--white);
	line-height:1.6;
}
.container{
	max-width:var(--max);
	margin:0 auto;
	padding:0 20px;
}

/* === Logo / SVGs === */
#fet-transport {height: 60px;}
#fet-transport .st0{fill:var(--brand-orange);}
#fet-transport .st1{fill:var(--brand-yellow);}
#fet-transport .st2{fill:var(--brand-red);}
#fet-transport .st3{fill:var(--brand-grey);}
#fet-transport .st4{fill:var(--white);}

#firmenprofil .st0{display:none;}
#firmenprofil .st1{display:inline;}
#firmenprofil .st2{fill:var(--brand-red);}
#firmenprofil .st3{fill:var(--brand-orange);}
#firmenprofil .st4{fill:var(--brand-yellow);}
#firmenprofil .st5{fill:none;}

#fuhrpark .st0{display:none;}
#fuhrpark .st1{display:inline;}
#fuhrpark .st2{fill:var(--brand-red);}
#fuhrpark .st3{fill:var(--brand-orange);}
#fuhrpark .st4{fill:var(--brand-yellow);}
#fuhrpark .st5{display:inline;fill:var(--white);}
#fuhrpark .st6{fill:none;}
#fuhrpark .st7{display:none;fill:var(--blue);} 

#phone {fill:var(--brand-grey);}

#karriere .st0{display:none;}
#karriere .st1{display:inline;}
#karriere .st2{fill:var(--brand-red);}
#karriere .st3{fill:var(--brand-orange);}
#karriere .st4{fill:var(--brand-yellow);}
#karriere .st5{fill:none;}

#job .st0{display:none;}
#job .st1{display:inline;}
#job .st2{fill:var(--brand-red);}
#job .st3{fill:var(--brand-orange);}
#job .st4{fill:var(--brand-yellow);}
#job .st5{fill:none;}
#job .st6{display:none;fill:var(--blue);} 


#fuhrpark .st0{display:none;}
#fuhrpark .st1{display:inline;}
#fuhrpark .st2{fill:var(--brand-red);}
#fuhrpark .st3{fill:var(--brand-orange);}
#fuhrpark .st4{fill:var(--brand-yellow);}
#fuhrpark .st5{fill:none;}
#fuhrpark .st6{display:none;fill:var(--blue);}


.arrow-right {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.arrow-right .arrowcolor {fill:var(--white);}
.arrow-right .circlecolor {fill:var(--brand-orange);}
.button:hover .arrow-right .arrowcolor, a.button:hover .info-icon-color, a.button:hover .consulting {fill:var(--brand-orange);}
.button:hover .arrow-right .circlecolor {fill:var(--white);}


.leistungen .bleistungen, .home .bhome, .fuhrpark .bfuhrpark, .jobs .bjobs {color: var(--brand-orange);}
a {color: var(--brand-orange); text-decoration: none;}
a:hover {color: var(--ink);}
a.button {
	background: var(--white);
	border: 1px solid var(--brand-orange);
	padding: 10px 30px;
	display: inline-block;
	margin: 20px 0;
}
a.button:hover {color: var(--white); background: var(--brand-orange);}

/* === Header === */
.site-header {
	position: fixed;
	width: 100%;
	margin-bottom: 1%;
	background:var(--white);
	border-bottom:1px solid var(--light-grey);
	/*position:sticky;*/
	top:0;
	z-index:50;
	box-shadow:0px 0px 28px -6px rgba(0,0,0,0.5)
}
.site-header {margin-bottom: 0;}

.header-inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 0;
}


.hotline {
  display: flex;
  justify-content: center;	/* horizontal mittig */
  align-items: center;		/* vertikal mittig */
  text-align: center;
  padding: 10px 0;
}

.hotline a {
  display: inline-flex;
  align-items: center;       /* SVG und Text mittig auf einer Linie */
  gap: 8px;                  /* Abstand zwischen Icon und Text */
  color: var(--brand-grey);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  fill:var(--brand-grey);
  margin: 0 20px;
}
.hotline a:first-child {margin-top: 3px;}

.hotline svg {
	text-decoration:none;
	color:var(--brand-grey);
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	fill: currentColor;        /* SVG übernimmt Textfarbe */
}

/* === Navigation === */
.site-nav ul{
	list-style:none;
	display:flex;
	gap:22px;
	margin:0;
	padding:0;
}
.site-nav a{
	color:var(--brand-gey);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 1.05rem;
	transition: color 0.25s ease, transform 0.25s ease;
}
.site-nav a:hover, .site-nav a.active{
	color:var(--brand-orange);
	transform: translateY(-1px);
}
.nav-toggle {
  display: none;
  background: #f2f2f2;
  border: none;
  font-size: 1.5rem;
  border-radius: .2rem;
  padding: 0 .5rem .2rem .4rem;
  font-weight: bold;
  cursor: pointer;
}


/* Mobile drawer */
.nav-drawer{position:fixed; inset:auto 0 0 0; background:#fff; border-top:1px solid #eee; padding:14px 20px; box-shadow:0 -10px 30px rgba(0,0,0,.08)}
.nav-drawer nav{display:flex; gap:12px; flex-wrap:wrap}
.nav-drawer a{padding:8px 10px; border-radius:8px; background:#f9fafb; text-decoration:none; color:#111827}



/* === Hauptinhalt === */
.site-main {
  flex: 1; /* füllt den verfügbaren Raum */
  /*margin-top: 120px;*/
  margin-top: 162px;
}

/* ================== MEDIA SECTION ================== */

/* === ICON + HEADLINE START === */
.media-headline, .first-media-headline {
  position: absolute;
  display: flex;                     /* Flex für horizontale Anordnung */
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 3vw, 36px);
  background: var(--white);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  
  /* bündig mit Content */
  margin-left: clamp(15px, 20%, 15%);
  margin-right: auto;
  top: 99px;
  margin-bottom: 2.3%;
  
  /* etwas Luft */
  padding: clamp(0.6rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
  
  /* verhindert, dass die Box kleiner als Text wird */
  width: fit-content;                
  max-width: 100%;                  
  z-index: 2;
}
/*.first-media-headline {position: absolute;}
.first-media-headline {position: relative;}*/
.fuhrpark .media-headline, .jobs .media-headline {position: relative;}
.fuhrpark .site-main, .jobs .site-main {margin-top: 100px;}
.fuhrpark .media-headline, .jobs .media-headline {top: 0;}

/* --- SVG links --- */
.media-headline svg, .first-media-headline svg, .leistung svg {
  flex: 0 0 auto;
  display: block;
  width: clamp(60px, 8.4vw, 108px);
  height: auto;
  overflow: visible;
}

/* --- Text rechts, kein Umbruch --- */
.media-headline h1, .h1 {
  flex: 1 1 auto;
  white-space: nowrap;              /* kein Umbruch */
  color: var(--brand-grey);
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.6rem);
  letter-spacing: 0.02em;
  transform: translateY(2px);
}

/* === ICON + HEADLINE END === */


/* === BG PICTURE + TEXT START === */
.media, .first-media {
	min-height: 76vh;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
	z-index: 25;
	transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: "davis-sans", Sans-serif;
	font-size: 5vw;
	font-weight: 900;
	text-transform: uppercase;
	color:var(--white);
}
#profil .media, .karriere .first-media {background-image: url("../images/unternehmen-slider.webp");}
.first-media {
	background-image: url("../images/fuhrpark.webp");
	margin-bottom: 100px;
	min-height: 52vh;
}
.karriere .media {
	background-image: url("../images/karriere.webp") !important;
	text-align: right;
	padding-right: 15%;
}

.leistungen .media-content .media {
	background-image: url("../images/luftfrachtsicherheit.webp") !important;
	min-height: 55vh;
	background-color: #ad998b;
}

.karriere .media-headline {margin-top: 100px;}


.media h2 {
  margin-top: -5%;
  margin-bottom: 0;
  padding: 8% 0 40px 0; /* kleinerer Abstand unten */
  font-family: "davis-sans", sans-serif;
  font-size: 4.5vw;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);

  margin-left: clamp(15px, 20%, 15%);
  margin-right: 0;
  width: auto;
  max-width: none;
  white-space: nowrap;
}


/* === BG PICTURE + TEXT END === */

.media-content {
  transition: all 0.3s ease;
  background: var(--white);
  padding: clamp(1rem, 3vw, 3rem);
  max-width: min(75ch, 85%);
  
  /* exakt bündig mit .media-headline */
  margin-left: clamp(15px, 20%, 15%);
  margin-right: auto;
  margin-top: -4.3%;
}

.karriere .media-content, .impressum .karriere .media-content {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 150px;}
.impressum .karriere .media-content {margin-bottom: 100px;}
.impressum .site-header {margin-bottom: 140px;}

.leistungen .media-content {
	margin-right: clamp(15px, 20%, 15%);
	margin-top: 50px;
	max-width: 100%;	
	padding: 0;
}
.leistungen .media-content.first {
	margin: 50px auto;
}

.media-content.onscroll {
	position: fixed;
	z-index: 44;
	top: 45px;
	margin-left: 0;
	width: 100%;  
	background-color: white;
	padding: 40px 0;
}

.sub-menu a.button {
	margin: 20px 90px 20px 0; 
	display: unset;
	padding: 10px 35px;
}
.sub-menu a.button:last-child {margin-right: 0;}
.sub-menu svg, svg.info-icon {
	position: relative;
	top: 4px;
	right: 10px;
	width: 1.5%;
}
svg.info-icon.bigger{width: 3.5%; top: 2px;}

.leistung svg.info-icon {
	width: 5%;
	top: 0 !important;
	display: inline-block;
}
.leistung a.button {
	top: 30px;
	position: relative;
	display: unset;
}
.leistung a.button:hover svg {color: var(--white); background: var(--brand-orange);}
.sub-menu svg.transport-services {width: 2%;}



/* --- leistungen Boxes --- */
.teaser {
  display: flex;
  gap: 40px;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.leistung {position: relative; flex: 1 1 500px;}
.leistung .image img {width: 100%;}
.leistung svg {width: 15%;}

.leistung .h1 {
	position: relative;
	left: -15px;
	font-size: 1.2rem;
}
.leistung .text, .leistungen .text {
	position: relative;
	z-index: 33;
	padding: 5px 20px;
	top: -150px;
	background: white;
	margin: 0 30px;
}
.leistungen .text {
	top: -65px;
	padding: 35px 50px;
	width: 52%;
}

.leistung .media-headline {
	position: absolute;
	margin-top: -149px;
	width: 75%;
	margin-left: 30px;
	padding: 10px 15px;
}
.leistung ul {margin: 0 0 0 35px; padding: 0; }

.leistungen .media-headline:nth-child(7) {
	position: relative;
	top: 0;
	margin-left: 30px; 
	width: 60%;
}
.leistungen .media-headline:nth-child(7) .h1 {
	position: relative;
	font-size: 1.2rem; 
	left: -20px;
}

/* ================== Footer ================== */
.site-footer{
	position: relative;
	z-index: 2;
	color:var(--white);
	background:var(--brand-orange);
	padding:20px 0 0 0;
	/*margin-top: -10%;*/
}
.footer-grid{
	display:grid;
	grid-template-columns:2fr 1fr 1fr 1fr;
	gap:20px;
	align-items: end;
}
.footer-grid a{
	color:var(--white);
	text-decoration:none;
}
.site-footer p {margin:0;}
.footer-nav ul,
.footer-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav li,
.footer-legal li {
  margin-bottom: 0.1em;  /* Abstand zwischen Links */
}
.copyright {
	text-align: center;
	padding: 20px 0 10px 0;
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
h3, .h3 {
	color: var(--gray2);
	margin-bottom: 0;
	font-size: var(--heading--font-size-h3):
}
h2 {margin-bottom: 10px;}
h2.orange {
	font-size: var(--heading--font-size-h3);
	color: var(--brand-orange);
	text-transform: uppercase;
	font-size: var(--global--font-size-m);
	margin-bottom: 80px;
}

.leistungen h2.orange:first-of-type {margin-top: 100px;}
.column p, .impressum p {margin-top: 0;}



/* Sanfte Einblendung 
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fadeInLeft {
  animation-name: fadeInLeft;
} 


@keyframes fadeInLeft {
  from {
    opacity:0;
    transform:translate3d(-100%,0,0)
  }
  to {
    opacity:1;
    transform:none
  }
}
.fadeInLeft {
  animation-name:fadeInLeft
}
*/



/* === RESPONSIVE === */
@media (max-width: 900px) {
  .media-content {margin: 1rem auto; width: 90%;}
  .media-headline, .first-media-headline {
	grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: 90%;
    margin: 0 auto 1.5rem auto;
    padding-left: 5%;
  }

  .media-headline h1, .h1 {
	  transform: none;
	  white-space: normal; /* darf auf kleinen Screens umbrechen */
	  text-align: left;
  }
}

/* Optional: feiner Fade-In beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .media-headline svg, .media-headline h1, .first-media-headline svg, .h1 {
    opacity: 0;
    animation: mh-fade .5s ease-out .05s forwards;
  }
  .media-headline h1, .h1 { animation-delay: .15s; }
  @keyframes mh-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


@media screen and (min-width: 767.98px) and (max-width: 991.98px) {
	.site-nav ul {position: relative; left: -20px;}
	#fet-transport {width: 85%;}
	.hotline {width: 20%;}
	
	.media {height: auto;}	
	.media-headline {width: 50%;}
	.media-headline h1 {
		position: absolute;
		left: 25%;
		top: 15px;
	}
	.leistungen .first-media, .leistungen .first-media-headline, .leistungen .first-media-headline .h1 {display: none;}
}


@media (max-width: 768px) {
	.site-main {margin-top: 100px;}
	#fet-transport {width: 50%; margin-left: 30px;}
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .site-nav ul {
    display: none;
    position: absolute;
    top: 80px;
	text-align: center;
    right: 0;
    background: #fff;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
    border-top: 1px solid #ddd;
    animation: fadeIn .3s ease-in-out;
  }

  .site-nav ul.active {display: flex;}
  .nav-toggle {
	  position: absolute;
	  right: 10px;
	  display: block;
	}

  .hotline {
	  order: 2;
	  position: relative;
	  right: 22%;
	}  
  .media {
	  position: relative;
	  top: 45px;
	  min-height: 47.5vh;
	}
  .first-media {min-height: 20vh;}
  .media-headline, .first-media-headline {
	  top: 20px;
	  margin-right: 0; 
	  display: unset; 
	  text-align: left;
	}  
  .media-headline svg, .first-media-headline svg {
	  width: 30% !important;
	  float: left; 
	  margin-left: 20px;
	}
  .media-headline h1, .h1 {font-size: 1.1rem; margin-top: 20px;}
  .media h2 {
	  position: absolute;
	  margin-left: 30px;
	  font-size: 6.5vw;
	  margin-top: 0;
	  padding: 0;
	}
  .media-content {
	  padding: 0 30px;
	  margin: 70px 0;
	}
	
	.footer-grid {display: block;}
	.site-footer div {margin-bottom: 20px;}	
	.copyright {text-align: left;  padding-left: 20px;}
	
	.leistungen .first-media, .leistungen .first-media-headline, .leistungen .first-media-headline .h1 {display: none;}
	
	.karriere .media {background-image: url("../images/karriere-mobile.webp") !important;}
	.karriere .first-media, .karriere .first-media-headline, .karriere .first-media-headline .h1 {display: block;}
	.karriere .first-media-headline {position: relative; top: 0;}
	.karriere .first-media-headline .h1 {margin-top: 40px;}
	.karriere .first-media-headline svg {margin-top: 0;}
	.karriere .first-media {min-height: 33vh; margin-bottom: 50px;}
	.karriere .media {min-height: 48vh;}
	.karriere .media h2 {
		right: 50px; 
		text-align: center;
		font-size: 6.5vw;
		margin-top: 35px;
	}
	
	.impressum .site-header {margin-bottom: 40px;}
	.karriere .media-content {box-shadow: none; margin-bottom: 50px;}
	.impressum .karriere .media-content {
		width: auto;
		margin: 0 30px 50px 30px;
		padding: 15px;
	}	
	.impressum .karriere .h1 {margin-top: 0; }
	
	.teaser {padding: 0 20px;}

	.leistung .image img { height: 220px;}
  
	.media-content.onscroll { position: relative; top: 0;}
	.leistungen .media:nth-child(2) { display: none;}
	.leistungen .media-content .media {
		min-height: 30vh;
		background-position: center;
		margin-left: 25px;
	}
	
	.leistungen .h1, .leistungen .media-headline:nth-child(7) .h1 {font-size: 0.9rem; left: 0;}
	.leistungen .media-content .media h2 {margin-top: 40px;}
	h2.orange {margin-left: 20px;}
	.leistungen .media-headline:nth-child(7) {
	  display: flow-root;
	  width: 75%;
	  margin-top: 30px;
	  top: 95px;
	  z-index: 30;
	  margin-left: 50px;
	}
	.leistung .media-headline/*, .leistungen .media-headline:nth-child(7) .h1*/ {margin-top: -100px;}
	.leistung .media-headline svg {margin-left: 0;}
	.leistungen .text {
		top: 10px;
		padding: 1px 20px;
		width: 70%;
		margin-left: 50px
	}
	.leistungen .leistung .text {top: -50px; margin-left: 30px}
	
	.fuhrpark .first-media-headline, .home .media-headline {top: 115px;}
	.fuhrpark .site-main {margin-top: 220px;}
	.jobs .site-main {margin-top: 115px;}
	.home .site-main {margin-top: 180px;}
	
	.hotline {right: 70px; width: 60%;}
	.hotline a {font-size: 1rem; margin: 0 10px;}
	.sub-menu a.button {display: block;}
	.sub-menu a.button:last-child {margin-right: 90px;}
	
	.sub-menu svg.transport-services {width: 10%;}
	.sub-menu svg {width: 7%;}
	.leistung a.button {
		top: 0;
		display: inline-block;
		width: 50%;
		padding: 5px 20px;
	}
	.leistung svg.info-icon {width: 10%; top: 2px;}
	svg.info-icon.bigger{width: 6%;}
  
}