/*
 * File: /screen.css
 * Created Date: Tuesday, 20.06.2023 08:16:34
 * Author:Stephan Romhart
 * -----
 * Last Modified: Monday, 03.06.2024 15:38:16
 * Modified By: Stephan Romhart
 * -----
 * Copyright (c) 2024 kreisform GmbH
 */


/*** Reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:400;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:400;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
}
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
*,*::before,*::after{
	box-sizing:border-box;
	font-variant-ligatures:none;
	background-repeat:no-repeat;
	background-position:center center;
}


/*** Fonts */

@font-face{
	font-family:'Gilroy';
	font-style:normal;
	font-weight:400;
	src:url('../fonts/gilroy-regular/font.woff2') format('woff2');
}
@font-face{
	font-family:'Gilroy';
	font-style:normal;
	font-weight:700;
	src:url('../fonts/gilroy-bold/font.woff2') format('woff2');
}
@font-face{
	font-family:'Gilroy';
	font-style:normal;
	font-weight:1000;
	src:url('../fonts/gilroy-black/font.woff2') format('woff2');
}


/*** Variablen */

:root,::before,::after{
	--schwarz:#1D1D1B;
	--schwarz-hell-1:#272723;
	--schwarz-hell-2:hsl(60, 5%, 20%);
	--schwarz-hell-3:hsl(60, 5%, 30%);
	--weiss:#ffffff;
	
	--grün:hsl(166, 48%, 48%);
	--grün-dunkel-1:hsl(166,48%,38%);
	--coral:#da7d61;
	--gelb:#dcd322;
	
	
	--content-width:60rem;
	--content-element-margin:3rem;
	--section-padding-block:8rem;
	--section-padding-inline:calc((100% - var(--content-width)) / 2);
}


/*** Globale Einstellungen */

::selection{
	color:var(--weiss);
	-webkit-text-fill-color:var(--weiss);
	background-color:var(--grün-dunkel-1);
}
::-moz-selection{
	color:var(--weiss);
	-webkit-text-fill-color:var(--weiss);
	background-color:var(--grün-dunkel-1);
}
body::-webkit-scrollbar{
	width:20px;
}
body::-webkit-scrollbar-track{
	background:var(--schwarz-hell-2);
}
body::-webkit-scrollbar-thumb{
	background-color:var(--schwarz-hell-3);
	border:8px solid var(--schwarz-hell-2);
	border-radius:500px;
}
html,
body{
	min-height:100%;
}
body{
	background-color:var(--schwarz-hell-1);
	position:relative;
	color:var(--weiss);
	font-family:'Gilroy',sans-serif;
	font-size:1.2rem;
	font-weight:400;
	line-height:1.4;
	text-align:center;
}
img{
	width:100%;
	height:auto;
	display:block;
}
h1,h2,h3,h4{
	line-height:1;
}
a{
	color:var(--grün);
}
b{
	font-weight:700;
}
section{
	padding:var(--section-padding-block) var(--section-padding-inline);
}
section h2{
	font-size:3.75rem;
	font-weight:1000;
	color:var(--grün);
}
section p{
	max-width:45ch;
	margin-inline:auto;
}
section > *{
	margin-bottom:var(--content-element-margin);
}
section > *:last-child{
	margin-bottom:0;
}


/*** Header */

header{
	border-top:5px solid var(--grün);
	padding-block:calc(0.75 * var(--section-padding-block));
}
header h1{
	
	width:21.5rem;
	aspect-ratio:502/89;
	margin-inline:auto;
}
header h1 a{
	display:flex;
	height:100%;
	background-image:url('../images/logo.svg');
}
header h1 span{
	display:none;
}


/** - Willkommen */

section.willkommen{
	padding-top:0;
	padding-bottom:calc(0.75 * var(--section-padding-block));
}
section.willkommen h2{
	margin-bottom:calc(0.5 * var(--content-element-margin));
}
section.willkommen p{
	margin-bottom:calc(0.25 * var(--content-element-margin));
}


/** Meldungen */

section.meldungen{
	background-color:var(--grün-dunkel-1);
	padding-block:calc(0.25 * var(--section-padding-block));
}
section.meldungen h2{
	font-size:1.5rem;
	color:var(--weiss);
	margin-bottom:1rem;
}
section.meldungen ul li b{
	font-weight:700;
}
section.meldungen ul li span{
	opacity:0.7;
}


/** - Kataloge */

section.kataloge{
	padding-top:0;
}
section.kataloge ul{
	display:grid;
	grid-gap:3rem;
	grid-template-columns:1fr 1fr 1fr;
}
section.kataloge ul li img{
	margin-bottom:calc(0.75 * var(--content-element-margin));
	box-shadow:0 0 3rem rgba(0,0,0,0.8);
}
section.kataloge ul li.draussen img{
	transition:outline 0.1s ease-in-out;
}
section.kataloge ul li.bauholz img{
	transition:outline 0.1s ease-in-out;
}

section.kataloge ul li a span,
section.kataloge ul li span span{
	display:block;
	margin-bottom:0.5rem;
}
section.kataloge ul li i{
	display:inline-block;
	font-style:normal;
	font-size:1rem;
	border-radius:500px;
	padding:0.5rem 1.5rem;
	color:#ddd;
	background-color:rgba(255,255,255,0.3);
	transition:background-color 0.3s ease-in-out;
}
section.kataloge ul li a{
	display:block;
}
section.kataloge ul li a i{
	background-color:var(--grün);
	color:var(--weiss);
}


/** - Kontakt */

section.kontakt{
	background-color:var(--schwarz);
	padding-inline:calc( 12rem + var(--section-padding-inline));
}
section.kontakt h2{
	color:var(--weiss);
	font-size:2.5rem;
}
section.kontakt ul.kanäle{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1rem 1.5rem;
}
section.kontakt ul.kanäle li:last-of-type{
	grid-column:span 2;
}
section.kontakt ul.kanäle li a{
	display:block;
	border-radius:500px;
	background-color:var(--grün);
	color:var(--weiss);
	padding:0 2rem;
	line-height:3rem;
	transition:background-color 0.3s ease-in-out;
}
section.kontakt ul.kanäle li a[href^="tel:"]{
	background-image:url('../images/icon-telefon.svg');
	background-position:center right 1.5rem;
	background-size:1.5rem;
	font-size:1.3rem;
}
section.kontakt ul.kanäle li a[href^="mailto:"]{
	background-image:url('../images/icon-mail.svg');
	background-position:center left 1.5rem;
	background-size:1.5rem;
	font-size:1.1rem;
	padding-left:3.5rem;
	white-space:nowrap;
}
section.kontakt address b{
	display:block;
}
section.kontakt address a{
	display:inline-block;
	border-radius:500px;
	background-color:var(--schwarz-hell-3);
	color:var(--weiss);
	padding:0 2rem;
	line-height:3rem;
	margin-top:1rem;
	transition:background-color 0.3s ease-in-out;
}

section.kontakt ul.marken{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:2.5rem;
}


section.kontakt table.öffnungszeiten{
	border-collapse:collapse;
	border-bottom:2px solid var(--schwarz-hell-2);
	margin-inline:auto;
	text-align:left;
	width:100%;
	margin-bottom:calc(2 * var(--content-element-margin));
	margin-top:calc(1.5 * var(--content-element-margin));
}
section.kontakt table.öffnungszeiten caption{
	text-align:center;
	margin-bottom:1rem;
	font-weight:700;
	font-size:1.5rem;
}
section.kontakt table.öffnungszeiten tr th,
section.kontakt table.öffnungszeiten tr td{
	border-top:2px solid var(--schwarz-hell-2);
	padding-block:1rem;
	font-weight:700;
}
section.kontakt table.öffnungszeiten tr td span{
	display:block;
	font-weight:400;
}


/** - Zitat */

section.zitat{
	background-color:var(--grün);
	font-size:2rem;
}
section.zitat blockquote{
	max-width:40ch;
	margin-inline:auto;
}
section.zitat img{
	width:5rem;
	margin-inline:auto;
}


/** - Rechtliches */

section.rechtliches{
	padding-top:0;
}
section.rechtliches a{
	overflow-wrap:break-word;
	word-wrap:break-word;
	word-break:break-all;
	word-break:break-word;
}
section.rechtliches p{
	margin-bottom:calc(0.5 * var(--content-element-margin));
}
section.rechtliches span{
	color:red;
}
section.rechtliches .wichtig{
	font-weight:700;
	border:1px solid var(--grün);
	padding:var(--content-element-margin);
}
section.rechtliches .wichtig > *:last-of-type{
	margin-bottom:0 !important;
}
section.rechtliches h2{
	font-size:3rem;
}
section.rechtliches h3{
	font-size:1.6rem;
	font-weight:700;
	line-height:1.2;
	text-decoration:underline;
	text-decoration-color:var(--grün);
	text-underline-offset:3px;
	max-width:40ch;
	margin-top:3rem;
	margin-inline:auto;
}
section.rechtliches h4{
	margin-bottom:0.7rem;
	font-weight:700;
	font-size:1.2rem;
	line-height:1.2;

	max-width:50ch;
	margin-inline:auto;
}
section.rechtliches h5{
	margin-bottom:0;
	text-decoration:underline;
	text-underline-offset:2px;
	text-decoration-color:rgba(255,255,255,0.5);
	max-width:50ch;
	margin-inline:auto;
}
section.rechtliches ul{
	max-width:50ch;
	margin-inline:auto;
}
section.rechtliches ul li{
	margin-bottom:0.5rem;
}
section.rechtliches a.button{
	display:inline-block;
	font-weight:700;
	border-radius:500px;
	padding:0.5rem 1.5rem;
	color:#ddd;
	background-color:var(--grün);
	transition:background-color 0.3s ease-in-out;
}


/*** Footer */

footer{
	background-color:var(--weiss);
	font-size:1rem;
	color:var(--schwarz);
}
footer nav{
	padding:1rem var(--section-padding-inline);
}
footer nav ul{
	display:flex;
	gap:1rem;
}
footer nav ul li:first-of-type{
	margin-right:auto;
}
footer nav ul li a{
	color:var(--schwarz);
}


/*** Media-Queries */


/** - Hovers */
@media(hover:hover){
	section.kataloge ul li.draussen a:hover img{
		outline:2px solid var(--grün);
	}
	section.kataloge ul li.draussen a:hover i{
		background-color:var(--grün-dunkel-1);
	}
	section.kataloge ul li.bauholz a:hover img{
		outline:2px solid var(--gelb);
	}
	section.kataloge ul li.bauholz a:hover i{
		background-color:var(--grün-dunkel-1);
	}
	
	section.kontakt ul.kanäle li a:hover,
	section.kontakt address a:hover,
	section.rechtliches a.button:hover{
		background-color:var(--grün-dunkel-1);
	}
	footer nav ul li a:hover{
		color:var(--grün);
	}
}

/** - kleine Bildschirme */
@media(max-width:80rem){
}

/** - Tablet Querformat */
@media(max-width:64rem){
	:root,::before,::after{
		--section-padding-inline:3.5rem;
	}
	section.kontakt{
		padding-inline:var(--section-padding-inline);
	}
	section.kataloge ul{
		grid-gap:1.7rem;
	}
}

/** - Tablet Hochformat */
@media(max-width:50rem){
	:root,::before,::after{
		--section-padding-inline:2.5rem;
	}
}

/** - Smartphone */
@media(max-width:35rem){
	:root,::before,::after{
		--section-padding-inline:1.5rem;
		--section-padding-block:4rem;
	}
	header h1{
		width:60%;
	}
	section.kataloge{
		padding-inline:calc(2 * var(--section-padding-inline));
	}
	section.kataloge ul{
		grid-template-columns:1fr;
		grid-gap:4rem;
	}
	section.kataloge ul li.draussen{
		order:1;
	}
	section.kataloge ul li.drinnen{
		order:2;
	}
	section.kataloge ul li.bauholz{
		order:3;
	}
	section.kontakt ul.kanäle{
		grid-template-columns:1fr;
	}
	section.kontakt ul.kanäle li:last-of-type{
		grid-column:1;
	}
	section.kontakt ul.kanäle li a[href^="tel:"],
	section.kontakt ul.kanäle li a[href^="mailto:"]{
		background-image:none;
		font-size:1.2rem;
		padding-inline:2rem;
	}
	section.kontakt ul.marken{
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-gap:1.5rem;
		margin-inline:5%;
	}
	section.kontakt table.öffnungszeiten tr th,
	section.kontakt table.öffnungszeiten tr td{
		display:block;
		padding-block:0.5rem;
	}
	section.kontakt table.öffnungszeiten tr td{
		display:flex;
		justify-content:space-between;
	}
	section.kontakt table.öffnungszeiten tr th:last-of-type{
		padding-top:2rem;
	}
	
	section.rechtliches h2,
	section.rechtliches h3{
		hyphens:auto;
	}
	footer nav ul{
		display:grid;
		grid-template-columns:1fr;
		grid-gap:1rem;
	}
	footer nav ul li:first-of-type{
		margin:0;
	}
}