@charset "UTF-8";
/* CSS Document */

/* ------------------------------

agenturwitt
In den Schäfergärten 9
D-79227 Schallstadt-Mengen 

Tel. ‭+49 157 55 423 531‬ 
www.agenturwitt.de

--------------------------------- */

/* ****** FARBEN ****** */

/* #11182b – Tiefblau */
/* #eaf6fe - Platzhalter */

:root {
	--primary: rgb(27, 73, 138);
	--darker: rgb(12, 131, 140);
	--light: rgb(242, 244, 248);
	--ruby: rgb(195, 15, 110);
	--darkblue: rgb(17, 24, 43);
	--placeholder: rgb(234, 246, 254);
	
}

/* PDF-Links */
a[href$=".pdf"] {
    padding-left: 35px;
    background-image: url(../ico/ico_pdf.svg);
    background-position: center left;
    background-repeat: no-repeat;
}

html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; color: #2a2a2a; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 .h4, .h5, .h6 {
	text-wrap: balance;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--primary);
}

h1, h2, .h1, .h2 { margin-bottom: 30px; }

main { font-size: 1.3rem; line-height: 2rem; text-align: center; }

a { color: var(--primary); text-decoration: underline; }

a:hover { color: var(--darker); }

span { display: block; }

.pads { padding-block: 80px 100px; }

strong { color: var(--primary); }

.text-small { font-size: 1rem; line-height: 1.5rem; }

button { border: 2px solid var(--primary); padding: 10px 25px; border-radius: 10px; background-color: var(--primary); color: #fff; font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1rem; }
button:hover { background-color: transparent; color: var(--primary); }

.btn_white { border: 2px solid #fff; padding: 10px 25px; border-radius: 10px; background-color: #fff; color: var(--primary); font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1rem; }
button:hover { background-color: transparent; color: #fff; }

.overlay { position: relative; width: 100%; height: 100%; background-color: rgb(17, 24, 43, 0.8); }

.container-image { background-color: var(--placeholder); height: 500px; margin-bottom: 50px; max-width: 100%; }
.container-image img { max-width: 100%; }

.list { display: flex; justify-content: center; margin-bottom: 30px; }
.list_inner { text-align: left; display: inline; }
.list ul { padding-left: 0; list-style-position: inside; }

.navbar {
    background: rgba(255, 255, 255, 0.8);
	height: 80px;
	transition: all 0.5s;
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 500;
}

.dropdown-menu { font-size: 0.9rem; }

.navbar-scrolled { height: 50px; background: rgba(238, 238, 238, 0.95); }

.navbar-brand img { height: 30px; }

#language-selector { position: absolute; right: 10px; top: 120px; z-index: 100; }
#language-flag { display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1; background-color: #fff; padding: 15px 20px 20px 20px; line-height: normal; border-radius: 500px; }

.carousel-item { height: 850px; }
.carousel-item img { width: 100%; height: 100%; object-fit: cover!important; }

section:nth-child(even) { background-color: var(--light); }
article { margin-bottom: 50px; }

.section_image { height: 500px; background-position: center center; background-size: cover; background-repeat: no-repeat; margin-bottom: 50px; }
.inline_image { width: 100%; aspect-ratio: 1 / 1; background-position: center center; background-size: cover; background-repeat: no-repeat; margin-bottom: 50px; }

.overline { max-width: 850px; margin-inline: auto; text-transform: uppercase; font-weight: 700; font-size: 1.1rem; color: var(--ruby); margin-bottom: 10px; }

#header { height: 850px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: var(--placeholder); }
.header-layer { background-color: rgba(0, 30, 72, 0.3); border: 1px solid rgba(0, 30, 72, 0.1); padding: 30px 40px; border-radius: 10px; color: #fff; }
.header-layer h2 { color: #fff; margin-bottom: 10px; }

#intro { text-align: center; }

.col-image { height: 300px; background-color: rgba(222,222,222,1.00); background-position: center center; background-size: cover; background-repeat: no-repeat; margin-bottom: 50px; }
.col-image img { width: 100%; height: 100%; object-fit: cover!important; }
.col-content { font-size: 1rem; line-height: 1.5rem; }

.stellen { background-image: url(../img/bg_polygon.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; }

.ueberuns_text { text-align: left; }
.ueberuns_image { position: relative; width: 100%; height: 100%; }
.ueberuns_image img { width: 100%; height: 100%; object-fit: cover; }

.tri-col_image { background-color: var(--placeholder); height: 250px; margin-top: 30px; overflow: hidden; }
.tri-col_image img { position: relative; max-width: 100%; max-height: 100%; object-fit: cover!important; }

.timeline { margin-top: 50px; }
.timeline > article:nth-child(even) { flex-direction: row-reverse; }
.historie-image { margin-bottom: 30px; height: 400px; }
.historie-image img { width: 100%; height: 100%; object-fit: contain; }
.historie-text { text-align: left; font-size: 1rem; line-height: 1.5rem; padding-block: 30px 50px; }

.formen { margin-top: 50px; }
.formen > article:nth-child(even) { flex-direction: row-reverse; }
.formen-image { margin-bottom: 30px; height: 400px; }
.formen-image img { width: 100%; height: 100%; object-fit: contain; }
.formen-text { text-align: left; font-size: 1rem; line-height: 1.5rem; padding-block: 30px 50px; }

.duesensortiment { margin-top: 50px; }
.duesensortiment > article:nth-child(even) { flex-direction: row-reverse; }
.duesen-image { background-color: var(--placeholder); aspect-ratio: 1/1; }
.duesen-image img { width: 100%; height: 100%; object-fit: contain; }
.duesen-text { display: flex; text-align: left; font-size: 1rem; line-height: 1.5rem; padding-block: 30px 50px; }

.lagersortiment { margin-top: 50px; }
.lagersortiment > article:nth-child(even) { flex-direction: row-reverse; }
.lager-image { background-color: var(--placeholder); aspect-ratio: 1/1; }
.lager-image img { width: 100%; height: 100%; object-fit: contain; }
.lager-text { display: flex; text-align: left; font-size: 1rem; line-height: 1.5rem; padding-block: 30px 50px; }

.produkt { margin-bottom: 50px; } 

#footer { color: #fff; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: underline; }

.footer_top { display: flex; justify-content: center; align-items: center; background-color: var(--darkblue); min-height: 120px; }
.claim { font-size: 1.8rem; text-align: center; padding: 30px 15px; }

.footer_center { background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 400px; padding-top: 80px; }
.footer_center h3 { color: #fff; }

.footer_logo { max-width: 250px; }

.social span { display: inline; }
.social_icon { margin-right: 10px; margin-bottom: 10px; }
.social img { max-width: 40px; }
.social a:hover { text-decoration: none!important; }

.footer_bottom { background-color: var(--darkblue); }
.footer_bottom span { display: inline-block; }
.footer_bottom .container { display: flex; justify-content: space-between; }

.footer_sub { display: flex; justify-content: space-between; width: 100%; }
.left { padding-block: 20px; }
.right { padding-block: 20px; }

.divider { margin-inline: 15px; }





/* ****** MEDIA QUERIES ****** */

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

@media (max-width: 768px) {	
	.navbar-dark .navbar-nav .nav-link {
    background-color: var(--darker);
    padding-left: 15px;
	}
	
	#language-selector { top: 100px; }
	#language-flag { padding: 10px 15px 15px 15px; }
	
	.carousel-item { height: 500px; }
	
	#header { height: 500px; }
	.header-layer { padding: 20px 10px; border-radius: 10px; color: #fff; margin-top: 130px; }
	
	.leistungen_overview { margin-bottom: 100px; }
	
	.container-image { background-color: var(--placeholder); height: auto; margin-bottom: 50px; max-width: 100%; }
	
	.brand { text-align: center; margin-bottom: 30px; }
	.kontakt { text-align: center; margin-bottom: 30px; }
	.social { text-align: center; margin-bottom: 30px; }
	
	.footer_sub { display: block; }
	.left { display: block; text-align: center; }
	.right { display: block; text-align: center; }
	.right span { display: block; margin-bottom: 10px; }
	.right .divider { display: none; }
	
	.historie-image { margin-bottom: 0; height: auto; }
}


/* ****** BREAKPONTS ******

X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

****** */





/* ***** GOOGLE FONTS ***** */

/* lato-300 - 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: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-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: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-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: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900 - 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: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}