/*
 * File: /screen.css
 * Created Date: Sunday, 27.07.2025 12:01:40
 * Author:Stephan Romhart
 * -----
 * Last Modified: Sunday, 27.07.2025 12:01:46
 * Modified By: Stephan Romhart
 * -----
 * Copyright (c) 2025 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:normal;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active{
	outline:none;
}
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
*,*::after,*::before{
	box-sizing:border-box;
	background-repeat:no-repeat;
}


/*** Fonts */

@font-face{
	font-display:swap;
	font-family:'Quicksand';
	font-style:normal;
	font-weight:400;
	src: url('../fonts/quicksand-v36-latin-regular.woff2') format('woff2');
}

/*** Variablen */

:root{
	--weiss:hsl(60,20%,95%);
	--weiss-t10:hsla(60,20%,95%,0.1);
	--weiss-t50:hsla(60,20%,95%,0.5);
	
	--schwarz:hsl(0,0%,0%);
	--schwarz-t10:rgba(0,0,0,0.1);
	--schwarz-t20:rgba(0,0,0,0.2);
	--schwarz-t30:rgba(0,0,0,0.3);
	--schwarz-t40:rgba(0,0,0,0.4);
	--schwarz-t50:rgba(0,0,0,0.5);
	
	--blau:#4789c8;
	--blau-dunkel:#2b547b;
	--gelb:#ffd603;
	--hintergrund:#b3abc6;

	--header-height:12rem;
	--mobile-menu-width:2.4rem;
	--mobile-menu-line-height:0.16rem;
	--content-width:40rem;
	--content-element-margin-bottom:2rem;
	--section-padding-block:8.75rem;
	--section-padding-inline:calc((100% - var(--content-width)) * 0.5);
}


/*** Globale Einstellungen */

::selection{
	color:var(--weiss);
	-webkit-text-fill-color:var(--weiss);
	background-color:var(--schwarz);
}
::-moz-selection{
	color:var(--weiss);
	-webkit-text-fill-color:var(--weiss);
	background-color:var(--schwarz);
}
body::-webkit-scrollbar{
	width:20px;
}
body::-webkit-scrollbar-track{
	background:var(--hintergrund);
}
body::-webkit-scrollbar-thumb{
	background-color:var(--weiss);
	border:8px solid var(--hintergrund);
	border-radius:500px;
}
body{
	background-color:var(--hintergrund);
	font-size:100%;
	font-family:'Quicksand',system-ui,sans-serif;
	font-variant-ligatures:none;
	line-height:1.4;
	color:var(--schwarz);
	text-align:center;
	-webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4,h5{
	line-height:1.1;
}
figure img{
	display:block;
	width:100%;
	height:auto;
}
a{
	color:var(--blau-dunkel);
}
section{
	padding:var(--section-padding-block) var(--section-padding-inline);
	font-size:1.3rem;
}

body{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
}
body::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-image:var(--body-background-image, none);
	background-size:cover;
	background-position:center center;
	z-index:-1;
}


/** Komponenten */

/** - Back-Button*/

section a.back{
	position:fixed;
	right:1rem;
	top:1rem;
	display:block;
	width:3rem;
	aspect-ratio:1;
	z-index:2;
}
section a.back::before,
section a.back::after{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	height:50%;
	width:70%;
	height:3px;
	transform:translate(-50%,-50%) rotate(45deg);
	background-color:var(--blau);
}
section a.back::after{
	transform:translate(-50%,-50%) rotate(-45deg);
}
section a.back span{
	display:none;
}

section h1{
	margin-bottom:var(--content-element-margin-bottom);
	font-size:2.2rem;
}
section h2{
	margin-bottom:calc(0.5 * var(--content-element-margin-bottom));
	font-size:1.7rem;
}
section h3{
	margin-bottom:calc(0.5 * var(--content-element-margin-bottom));
	font-weight:700;
}
section h4{
	margin-bottom:0;
	text-decoration:underline;
}
section p{
	margin-bottom:var(--content-element-margin-bottom);
}


/*** Box */

section.box{
	padding:0;
	color:var(--weiss);
}
section.box a{
	color:var(--weiss);
}
section.box h1{
	background-image:url('../images/logo.png');
	background-size:cover;
	aspect-ratio:1200/686;
	width:20rem;
	margin-inline:auto;
	margin-bottom:calc(3 * var(--content-element-margin-bottom));
	
}
section.box h1 span{
	display:none;
}
section.box p{
	margin-bottom:var(--content-element-margin-bottom);
	text-shadow:0 0 0.3rem var(--schwarz-t50);
	font-size:1.5rem;
}
section.box p:first-of-type{
	margin-bottom:calc(0.5 * var(--content-element-margin-bottom));
}

footer{
	position:absolute;
	right:1rem;
	bottom:1rem;
}
footer nav ul{
	display:flex;
	gap:1rem;
}
footer nav ul li a{
	text-shadow:0 0 0.3rem var(--schwarz-t50);
	color:var(--weiss);
}


/** Media Queries */


/** - Smartphone */

@media(max-width:44rem){
	:root{
		--section-padding-inline:2rem;
		--section-padding-block:5rem;
	}
	body::before{
		top:50%;
		left:50%;
		transform:translate(-50%,-50%)rotate(90deg);
		width:100vh;
		height:100vw;
		
	}
	
	body:not(.start){
		display:block;
	}
	body:not(.start) footer{
		position:static;
		right:auto;
		bottom:auto;
	}
	body:not(.start) footer nav ul{
		justify-content:center;
		padding:var(--content-element-margin-bottom);
	}
}