@font-face {
    font-family:	'Bebas_Neue';
    src:			url('./../fonts/Bebas_Neue/BebasNeue-Regular.ttf') format(truetype);
}

:root{
	--background-color: #000000;
	--text-color: #ffffff;
	--background-color-card: #808080;
}

/*
	Grundgerüst des CSS - Ende
*/

*, *:before, *:after{
	margin: 0;
	padding: 0;
	box-sizing: inherit;
	font-size: clamp(1rem, 2vw, 3rem);
}

html{
	font-size: 100%;
	box-sizing: border-box;
	border: 1rem solid black;
	min-width: calc(20rem + 6rem);
	overflow-x: hidden;

}

body{
	font-family:	'Bebas_Neue', sans-serif;
	border: 1rem solid darkgrey;
	background-color: var(--background-color);
	color: var(--text-color);
	/*
		Körper muss immer mindestens die Höhe des Viewports haben
	*/
	min-height: 100vh;
	min-width: calc(20rem + 4rem);
	box-sizing: border-box;
	place-items: center;
	overflow-x: hidden;

}

.no-drag{
	touch-action: none;
}

.main_slider_container {
    touch-action: pan-x; /* Erlaubt horizontales Wischen */
}

a{
	text-decoration: none;
	color: black;
}

#grid-container{
	display: grid;
	grid-template-areas:
		"header"
		"main"
		"footer";
	/*
		minmax(Mindestbreite, maximal mögliche Breite)
	*/
	grid-template-columns: minmax(20rem, 107.5rem);
	/*
		minmax(Mindestenshöhe, maximal mögliche Höhe)
	*/
	grid-template-rows: minmax(20rem ,auto) minmax(25rem, auto) minmax(5rem, auto);
	/*
		Braucht man min-height überhaupt, wenn man die Zeilen und Spalten
		bereits in ihrer Größe per minmax festgelegt hat?
	*/
	min-height: 100vh;
	gap: 1rem;
	border: 0.3rem solid red;
}

header{
	grid-area: header;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-width: 107.5rem;
	border-top: 0.3rem solid blue;
	border-bottom: 0.3rem solid blue;
}

main{
	grid-area: main;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-width: 107.5rem;
	border-top: 0.3rem solid green;
	border-bottom: 0.3rem solid green;
}

footer{
	grid-area: footer;
	display: flex;
	flex-direction: column;
	border-top: 0.3rem solid orange;
	border-bottom: 0.3rem solid orange;
	max-width: 107.5rem;
}

/*
	Grundgerüst des CSS - Ende
*/

/*

###############################################################################

HEADER - Anfang

###############################################################################

*/

/*
	Header: Erste section - Navigation Nr. 1 - Anfang
*/

#nav_header_eins{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	max-height: 100%;
	max-width: 100%;
	list-style-type: none;
	margin: 1rem 1rem 1rem 1rem;
}

#nav_header_eins li{
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 50%;
	max-width: 100%;
	height: 5rem;
	align-items: center;
	justify-content: start;
	max-width: 100%;
    max-height: 100%;
	min-width: 1rem;
    min-height: 1rem;
	padding: 0 1rem 0 1rem;
}

#nav_header_eins li a{
	max-width: 5rem;
    max-height: 5rem;
}

.nav_header_img_eins{
	clip-path: circle(50%);
	max-width: 5rem;
    max-height: 5rem;
}


#nav_header_eins li:last-child {
  justify-content: flex-end; /* Zweiter Eintrag rechts ausrichten */
}


/*
	Header: Erste section - Navigation Nr. 1 - Ende
*/

/*
	Header: Zweite Section - Sprachwahl - Anfang
*/

#language_selection{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	max-width: 100%;
	
	margin: 0 1rem 1rem 1rem;
	
}

.language_button,
#language_selection a{
	word-wrap: break-word;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	min-width: 2.5rem;
	max-width: 50%;
	min-height: 2.5rem;
	max-height: 100%;
}

.language_button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	text-align: center;
	color: var(--text-color);
	font-weight: bold;
}

#language_button_eins{
	border-right: 2px solid var(--text-color);;
	padding-right: 1rem;  /* Abstand zwischen Text und Trennbalken */
}

#language_button_zwei{
	padding-left: 1rem;
}

/*
	Header: Zweite Section - Sprachwahl - Ende
*/

/*
	Header: Dritte Section - Name und Adresse - Anfang
*/

#header_name_adresse{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 100%;
	max-height: 100%;
	margin: 0 1rem 1rem 1rem;
	gap: 1rem;
	justify-content: center; /* Vertikale Zentrierung */
    align-items: center;
}

#header_name_adresse h1{
	word-wrap: break-word;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}

#header_name_adresse h1{
	font-size: 5rem;
	font-weight: bold;
	
}

#header_name_adresse address{
	all: unset;
	text-align: center;
	word-wrap: break-word;
	max-width: 100%;
	max-height: 100%;
}

/*
	Header: Dritte Section - Name und Adresse - Ende
*/

/*
	Header: Vierte Section - Foto vom Laden - Anfang
*/

#header_hauptfoto{
	justify-content: flex-start;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	margin: 0 1rem 1rem 1rem;
	gap: 1rem;
	align-items: center;
}

#header_hauptfoto img{
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	width: 100%;
	max-height: 100%;
	border-radius: 0.3rem;
}

/*
	Header: Vierte Section - Foto vom Laden - Anfang
*/

/*
	Header: Fünfte Section - Navigation Nr. 2 - Anfang
*/

#nav_header_zwei{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	height: 2rem;
	max-width: 100%;
	gap: 1rem;
	list-style-type: none;
	margin: 0 1rem 1rem 1rem;

}

#nav_header_zwei li button,
#nav_header_zwei li{
	background-color: rgba(133, 108, 108, 0.5);
	border-radius: 0.3rem;
	box-shadow: 0 0 0 0 rgb(133 108 108 / 56%);
	flex-grow: 1;
	flex-wrap: nowrap;
	flex-shrink: 1;
	flex-basis: auto;

	color: var(--text-color);

}

#nav_header_zwei li{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	
}

#nav_header_zwei li button{
	display: flex;
	background-color: transparent;
	height: 100%;
	align-items: center;
	justify-content: center;
	border: none;
	max-height: 100%;
	max-width: 100%;
	cursor: pointer;
	text-align: center;
}

/*
	Header: Fünfte Section - Navigation Nr. 2 - Ende
*/

/*

###############################################################################

HEADER - Ende

###############################################################################

*/

/*

###############################################################################

MAIN - Anfang

###############################################################################

*/

/*
	Main: Erste section - Preismenüauswahl - Anfang
*/

#main_selection_of_menus{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	max-height: 100%;
	max-width: 100%;
	gap: 1rem;
	margin: 1rem 0 0 0;
}

#main_selection_of_menus h2{
	font-size: 3rem;
	margin: 1rem 1rem 1rem 1rem;
	text-align: center;
}

#main_preisuebersicht_auswahl{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	max-height: 100%;
	max-width: 100%;
	list-style-type: none;
	margin: 0 1rem 1rem 1rem;
	gap: 2rem;
}

#main_preisuebersicht_auswahl li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	word-wrap: break-word;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 50%;
	height: 2rem;
	background-color: rgba(133, 108, 108, 0.5);
	border-radius: 0.3rem;
	box-shadow: 0 0 0 0 rgb(133 108 108 / 56%);
	cursor: pointer;
}

#main_preisuebersicht_auswahl li label{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	cursor: pointer;
}

#main_preisuebersicht_auswahl li input{
	appearance: none;
	opacity: 0;
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

/*
	Main: Erste section - Preismenüauswahl - Ende
*/



/*
	Main: Zweite section - Preismenüanzeige - Anfang
*/

#main_menueanzeige{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 30rem;
	margin: 0 1rem 1rem 1rem;
	user-select: none;
}

/* Tabellenanpassungen der vorliegenden Menüs */

.main_tabelle_menue{
	border-spacing: 0.5rem;
	border-collapse: separate;
	max-width: 100%;
	max-height: 100%;
}

.main_tabelle_menue th{
	text-align: right;
}

.main_tabelle_menue td{
	text-align: right;
}

.main_tabelle_menue td.main_menue_spaltenueberschrift{
	text-align: left;
}

/*
	Main: Zweite section - Preismenüanzeige - Ende
*/

/*
	Main: Dritte section - Preismenüs, Tabellen - Anfang
*/

#main_menue_inhalt{
	display: none;
}

/*
	Main: Dritte section - Preismenüs, Tabllen - Ende
*/

/*

	Main: Vierte section - Barberauswahl - Anfang

*/

#main_auswahl_barber{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 100%;
	align-items: center;
	margin: 0 1rem 0.5rem 1rem;
	overflow: hidden;
}

#main_auswahl_barber h2{
	font-size: 3rem;
	margin: 0 0 1rem 0;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}

/*
	max-width: verantwortlich für die Breite der Box, in welcher die
	Button-Elemente enthalten sind. Umso kleiner, desto enger wird der
	Anzeigebereich der Buttons. 
	
*/
#main_barber_liste{
	display: flex;
	flex-direction: row;
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	gap: 2rem;
	
	scroll-snap-type: x mandatory; /* Aktiviert das Snap-Scrolling */
	scroll-behavior: smooth; /* Sanftes Scrollen */
	scrollbar-width: none; /* Versteckt die Scrollbar */
}

#main_barber_liste::-webkit-scrollbar {
    display: none; /* Versteckt Scrollbar für ein cleanes Design */
}

.main_barber_karte{
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: calc(75% - 2rem);
	flex-direction: row;
	overflow: hidden;
	max-width: 100%;
	gap: 0.5rem;
	padding: 0.3rem 0.3rem 0.3rem 0.3rem;
	user-select: none;
	background-color: rgba(133, 108, 108, 0.5);
	border-radius: 0.3rem;
	box-shadow: 0 0 0 0 rgb(133 108 108 / 56%)
}

.main_barber_image{
	width: 100%;
	max-width: 36rem;
	height: auto;
	aspect-ratio: 2/3;
	background-size: cover;
	background-position: center;
	border-radius: 0.3rem;
}

.main_barber_info{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	word-wrap: break-word;
	max-width: 100rem;
	width: 100%;
}

.main_barber_info h5{
	margin-top: auto;
}

/*

	Main: Vierte section - Barberauswahl - Ende

*/

/*

	Main: 5 section - Slidernavigation - Anfang

*/

#main_slider_navigation{
	display: flex;
	flex-direction: row;
	margin: 0 1rem 3rem 1rem;
	max-width: 100%;
	max-height: 100%;
	justify-content: end;
}

#main_slider_navigation nav{
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	max-width: 100%;
	max-height: 100%;
}

#main_slider_navigation nav button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	text-align: center;
	color: var(--text-color);
	font-size: 1.5rem;
}

@keyframes bounce {
    0% { transform: translateX(0); }
    50% { transform: translateX(-0.5rem); } /* Bewegt das Element etwas nach links */
    100% { transform: translateX(0); }
}

.bounce {
    animation: bounce 0.3s ease-out;
}

@keyframes bounce_zwei {
    0% { transform: translateX(0); }
    50% { transform: translateX(0.5rem); } /* Bewegt das Element etwas nach links */
    100% { transform: translateX(0); }
}

.bounce_zwei {
    animation: bounce_zwei 0.3s ease-out;
}

/*

	Main: 5 section - Slidernavigation - Ende

*/

/*

###############################################################################

MAIN - Ende

###############################################################################

*/

/*

###############################################################################

Footer - Anfang

###############################################################################

*/


/*
	footer: Section Nr. 1 - Anfang
*/

.footer_actions_refs{
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: center;
	margin: 1rem 1rem 1rem 1rem;
	flex-wrap: nowrap;
	max-height: 100%;
}

.footer_actions{
	display: flex;
	flex-direction: column;
	list-style: none;
	justify-content: space-between;
	max-width: 100%;
	gap: 1rem;
	margin: 3rem 1rem 3rem 1rem;
}

.footer_actions li,
.footer_referenzen li{
	display: flex;
	flex-grow: 0;
	width: 100%;
	align-items: center;
	height: 2rem;
	gap: 0.5rem;
}

.footer_referenzen{
	display: flex;
	flex-direction: column;
	list-style: none;
	justify-content: center;
	max-width: 100%;
	gap: 1rem;
	margin: 3rem 1rem 3rem 1rem;
}

.footer_referenzen li img{
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer_referenzen li a{
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	text-decoration: none;
	color: var(--text-color);
}

/*
	footer: Section Nr. 1 - Ende
*/

/*
	footer: Section Nr. 2 - Anfang
*/

#footer_tihiy{
	display: flex;
	justify-content: center;
	margin: 3rem 1rem 3rem 1rem;
}

/*
	footer: Section Nr. 2 - Ende
*/

/*

###############################################################################

Footer - Ende

###############################################################################

*/

/*

###############################################################################

Modal / Overlay - Anfang

###############################################################################

*/

.modal{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0);
	z-index: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

.modal-content{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.modal-content h2{
	font-size: 3rem;
	margin: 0 0 1rem 0;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
	padding: 1rem 0 0 0;
}

.modal_barber_liste{
	max-width: 100%;
	max-height: 100%;
}

.modal_barber_karte{
	display: flex;
	flex-direction: row;
	max-height: 10rem;
	max-width: 100%;
	margin: 1rem 1rem 1rem 1rem;
	cursor: pointer;
	gap: 2rem;
	align-items: center;
}

.modal_barber_image{
	flex-basis: 30%;
	min-width: 8rem;
	max-width: 100%;
	height: 8rem;
	aspect-ratio: 2/3;
	background-size: cover;
	background-position: center;
	clip-path: circle(50%);
}

.modal_barber_info{
	flex-basis: 70%;
	align-items: center;
}

.modal_barber_info h3,
.modal_barber_info h4,
.modal_barber_info h5
{
	font-size: 2rem;
	text-align: center;
}

/* Verhindert das Scrollen des Body, wenn das Modal geöffnet ist */
body.modal-open {
    overflow: hidden;
	scrollbar-width: none;
	height: 100vh;
}

body.modal-open::-webkit-scrollbar {
    display: none; /* Für Webkit-Browser (Chrome, Safari), versteckt die Scrollbar */
}

#closeModalButton_nr_eins{
	max-height: 100%;
	min-height: 5rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
	text-align: center;
	color: var(--text-color);
	font-weight: bold;
	font-size: 2rem;
	padding: 0 0 1rem 0;
}

/*

###############################################################################

Modal / Overlay - Ende

###############################################################################

*/

/*
	Womit weitermachen:
	Bilder entsprechend der Auflösung auswählen. Bzw. das Bild ordentlich
	anzeigen lassen.
	trennlinie_header_language - Die Trennlinie anpassen, damit das
	span-Element dünn und gefüllt mit Schwarz ist, um eine Linie zu imitieren
	
	Den Slider anpassen:
	Der Text soll eine Mindestbreite haben bzw soll man auch längere Namen
	eingeben können - Ein Name darf bis zu 13 Buchtaben haben
*/