html { 	background: linear-gradient(128deg, rgba(217, 191, 186, 1) 0%, rgba(139, 115, 103, 1) 50%, rgba(84, 67, 57, 1) 100%);
	background-attachment: fixed;
	
}


html, body { width: 100%;
	height: 100%;
	color: black;
	font-family: Arial, Verdana, 'DejaVu Sans', sans-serif;
	margin: 0px;
	padding: 0px;
}

* { box-sizing: border-box; }

/* Freie Google Font Comic Relief für das Menü */
@font-face {
  font-family: 'Comic Relief';
  src: url('../fonts/ComicRelief-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Freie Google Font Caveat für Texte */
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* Freie Google Font CactusClassicalSerif-Regular.ttf für Japanische Schriftzeichen */
@font-face {
  font-family: 'CactusClassicalSerif';
  src: url('../fonts/CactusClassicalSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

a:link {color: black; font-weight: bold; }
a:visited {color: black; font-weight: bold; }
a:active {color: black; font-weight: bold; }


a.footer_link:link {color: white; font-weight: bold; text-shadow: 2px 2px 2px black; }
a.footer_link:visited {color: white; font-weight: bold; text-shadow: 2px 2px 2px black; }
a.footer_link:active {color: white; font-weight: bold; text-shadow: 2px 2px 2px black; }

a.menulink:link {font-size: 16px; color: #dddddd; font-weight: bold; text-decoration: none;}
a.menulink:visited {font-size: 16px; color: #dddddd; font-weight: bold; text-decoration: none;}
a.menulink:active {font-size: 16px; color: red; font-weight: bold; text-decoration: none;}

a.menulink_selected:link {font-size: 16px; color: red; font-weight: bold; text-decoration: none;}
a.menulink_selected:visited {font-size: 16px; color: red; font-weight: bold; text-decoration: none;}
a.menulink_selected:active {font-size: 16px; color: red; font-weight: bold; text-decoration: none;}


.pad20 { padding:20px; }
.pad30 { padding:30px; }

/* Der grid container für die grobe Seitenaufteilung */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header'
    'main_area' 
    'footer';
  /* grid-column-gap: 10px; - Wenn man eine Lücke zwischen den einzelnen grid-bereichen haben möchte */
  grid-template-columns: 1fr; /* IMPORTANT: Define column widths, otherwise a lot of text stretches them in x */
  grid-template-rows: auto 1fr auto; /* Header takes auto height, middle takes remaining space (1fr), footer takes auto height */

  /* Möchte man das der Footer stehen bleibt, muß man height: 100vh angeben. */
  /* Soll der Footer sich nach unten verschieben bei längerem Text, gibt man min-height: 100vh an. */
  min-height: 100vh;
} 

/* Macht das der Footer bei der mobilen Ansicht immer am Ende der Page ist */
@media (max-width: 700px) {
  .grid-container {
	height: auto;        /* Höhe richtet sich nach Inhalt */
	min-height: 100vh;   /* Mindestens so hoch wie der Viewport */
	width: 100%;
	grid-template-rows: auto auto auto;
  }
}


/***********************/
/* HEAD-Bereich START */
/*********************/

.header { grid-area: header; 
	background: #d9bfba;
	background: linear-gradient(230deg, rgba(217, 191, 186, 1) 0%, rgba(139, 115, 103, 1) 50%, rgba(84, 67, 57, 1) 100%);
	margin: 0px;
	padding: 0px;
	width: 100%;
	}

/* Abstandshalter vom oberen Rand im Headbereich */
.spacer { height:10px; }

/* Aufteilung der Elemente im Head-Bereich, links das Logo, rechts andere Dinge */
.head_columns { display:flex;
	justify-content: space-around;
}

/* Responsive layout - setzt die 3 header-bereiche untereinander */
@media (max-width: 700px) {
  .head_columns  {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
  }
}


/* Keyframes für die Animation des Logos */
@keyframes scale_movement {
	/* transform wird auf die div-Box angewendet und bezieht sich auf die Breite der Box */
	/* d.h. die Box wird nicht vom Bildschirm her gesehen 90% verschoben, sondern lediglich */
	/* von ihrer Breite her gesehen */
	from { transform: scale(0.5); }
	to { transform: scale(1.0); }
}

/* Keyframes für das Einblenden */
/* Das Einblenden wird nicht auf die umgebene div-Box angewendet, sondern auf das Logo-Bild selbst */
@keyframes opacity_0_1 {
  from {opacity: 0.0;}
  to {opacity: 1.0;}
}




/* header - linker Bereich */
.head_leftarea { display: flex;
	flex: 1;
	justify-content: flex-end;
	padding-right: 50px;
}

/* Responsive layout - das Logo in die Mitte */
@media (max-width: 700px) {
  .head_leftarea  {
	justify-content: center;
	padding: 0px;
  }
}

/* Die Abmaße des Logos Bildes */
.logo {	width: 212px;
	height: 200px;
	opacity: 0;
}

/* Die Logo Animation auf die div-Box angewendet */
.logo_ani_mov { animation-name: scale_movement;
	animation-duration: 0.6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/* Die Logo Animation opacity_0_1 auf das Bild angewendet */
.logo_ani_opa { animation-name: opacity_0_1;
	animation-duration: 0.6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}



/* header - mittlerer Bereich */
.head_middlearea { display: flex;
	flex: 1;
	flex-direction: column; /* Ausrichtung von oben nach unten */
	justify-content: center; /* durch flex-direction: column jetzt Vertikale */
	align-items: flex-start; /* durch flex-direction: column jetzt Horizontale */
	transform: scale(0.5);
	opacity: 0.0;
	transform-origin: center center;
}

/* Responsive layout - die Schrift in die Mitte */
@media (max-width: 700px) {
  .head_middlearea  {
	align-items: center;
	width: 306px;
  }
}

.head_middle_titel { font-family: 'Comic Relief', sans-serif;
	font-size: clamp(30px, 2vw, 50px);
	color: white;
}

.head_middle_slogan { font-family: 'Caveat', sans-serif;
	color: white;
	font-size: clamp(24px, 1.5vw, 40px);
}

/* Responsive layout - Slogan mehr zusammenpressen bei mobiler Ansicht */
@media (max-width: 700px) {
  .head_middle_slogan  {
	width: 306px;
	text-align:center;
  }
}

.head_middle_titel, .head_middle_slogan {
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
}

.text_animation2 {
	animation-name: scale_movement, opacity_0_1;
	animation-duration: 0.6s, 0.6s;        /* Dauer für jede Animation */
	animation-delay: 0.3s, 0.3s;             /* Delay für movement, opacity sofort */
	animation-timing-function: ease-out, ease-out;
	animation-fill-mode: forwards, forwards;
}




/* header - rechter Bereich */
.head_rightarea { display: flex;
	flex: 1;
	flex-direction: column; /* Ausrichtung von oben nach unten */
	justify-content: flex-start;
	align-items: flex-start;
}

/* Responsive layout - die Buttons in die Mitte */
@media (max-width: 700px) {
  .head_rightarea  {
	justify-content: center;
	align-items: center;
  }
}

.flags_container { display:flex;
	justify-content: space-between;
	padding-top: 10px;
	padding-left: 100px;
}

.flag_middle { padding-left: 20px;
	padding-right: 20px;
}



.social_media_icons_container { display:flex;
	justify-content: space-between;
	padding-left: 100px;
}

@media (max-width: 700px) {
  .flags_container, .social_media_icons_container  { padding-left: 0px; }
}


.text_animation3 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
	transform: scale(0.5);
	opacity: 0.0;
	animation-name: scale_movement, opacity_0_1;
	animation-duration: 0.6s, 0.6s;        /* Dauer für jede Animation */
	animation-delay: 0.6s, 0.6s;             /* Delay für movement, opacity sofort */
	animation-timing-function: ease-out, ease-out;
	animation-fill-mode: forwards, forwards;
}

/*********************/
/* HEAD-Bereich ENDE */
/*********************/


/***********************/
/* Menü-Bereich START */
/*********************/
.menu { display: flex;
	justify-content: center; /* Läßt links und rechts Platz um die Inhalts-Items der Flexbox */
	padding-bottom: 10px;
	width: 100%;
	}
	
.menu_button_container { display:flex; 
	justify-content: space-around;
	width: 80vw;
}

/* Responsive layout - setzt die Menübuttons untereinander */
@media (max-width: 700px) {
  .menu_button_container  {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
  }
}

.menubutton { display: flex;
	width: 161px;
	height: 60px;
	justify-content: center;
	align-items: flex-end;
	/* Für den Hover-Effekt */
	transition: transform 0.2s ease;
	background-image: url('../buttons/Button_Background_Krone_60.png');
/*	transition: transform 1.0s ease, box-shadow 1.0s ease;
	backface-visibility: hidden; /* Verhindert Rendering-Probleme */
/*	will-change: transform; /* Teilt dem Browser vorab die Änderung mit */
	}

.menutext { padding-bottom: 4px;
	text-shadow: -1px -3px 2px #321212;
	font-family: 'Comic Relief', sans-serif;
}

.menubutton:hover {
	transform: scale(1.2);
	/*transform: translateY(-2px);
	box-shadow: 4px 4px;*/
}
/**********************/
/* Menü-Bereich ENDE */
/********************/



/***********************/
/* Main-Bereich START */
/*********************/

.main { grid-area: main_area;
	padding: 20px;
	overflow: visible;
}

@media (max-width: 700px) {
  .main  {
	padding: 10px;
  }
}


/* Standard Zentrierung für Inhalte des Main-Bereichs */
.center_container { display: flex;
	justify-content: center;
	width: 100%;
}

/**********************/
/* Main-Bereich ENDE */
/********************/


/***********************/
/* foot-Bereich START */
/*********************/
.footer { grid-area: footer; 
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.hr_width { width: 90%; }

.foot_link_container { display:flex;
	width: 50%;
	justify-content: space-around;
	font-size: 14px;
}

/* Responsive layout - Die Menüpunkte des footers von oben nach unten */
@media (max-width: 700px) {
  .foot_link_container  {
	flex-direction: column;
	align-items: center;
  }
}

.tags {font-size: 10px; color: #CCCCCC;}

/**********************/
/* foot-Bereich ENDE */
/********************/


/****************************************************************/
/* Menüpunkt Designer - das Bild mit dem darüberliegenden Text */
/**************************************************************/
.image-wrapper {
	position: relative;   /* Bezugspunkt für die absolut positionierte Box */
	display: inline-block;
}

.designer_pic { width: 60vw; /* 60% der Viewport-Breite */
	height: auto;
	max-width: 800px;
}

.overlay-text { color: #67423b;
	position: absolute;
	top: 24%;
	right: 0%;
	width: 22vw;
	max-width: 300px;
	text-shadow:
		0 0 8px rgba(255,255,255,1),
		0 0 10px rgba(255,255,255,1),
		0 0 12px rgba(255,255,255,1); /* bessere Lesbarkeit */
}

.pic_title1 { text-align:center; font-size: clamp(12px, 1.8vw, 26px); }

.pic_title2 { text-align:center; font-size: clamp(12px, 2.8vw, 36px); }

.pic_text { font-size: clamp(12px, 1.5vw, 30px); }


.textfield { color: white;
	text-align:left;
	font-size: clamp(18px, 2.0vw, 30px);
	font-family: 'Caveat', sans-serif;
	width: 56vw;
	max-width: 750px;
	padding-bottom: 100px;
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
}

@media (max-width: 700px) {
  .textfield  {
	width: 80vw;
  }
.designer_pic { width: 80vw; }
}


/******************************/
/* Menüpunkt Designer - ENDE */
/****************************/



/*******************************************/
/* Startbild alte Tür unter Markenkonzept */
/*****************************************/
.door-container {
	width: 50vw;
	aspect-ratio: 1400 / 1080; /* Seitenverhältnis (Breite/Höhe = 1.30) */
	position: relative;   /* damit Kinder mit position:absolute darüber liegen können */
	margin: 0 auto;       /* zentrieren, optional */
	overflow: hidden;
}

.inner_container { display:flex;
	flex-direction: column;
	align-items: center;
	text-align:center;
}

@media (max-width: 700px) {
  .door-container  {
	width: 92vw;
  }
}


.old_door_sequenz {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2
}

.old-door-inside { display:flex;
	justify-content: center;
	align-items: center;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.old-door-inside-img { width:30vw; height: auto; }
@media (max-width: 700px) {
  .old-door-inside-img  {
	width: 55vw;
  }
}


.old-door-text-container { position:absolute;
	top: 50px;
	left: 0px;
	display:flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.old-door-text { font-size: clamp(9px, 1.5vw, 200px);
	font-family: 'Caveat', sans-serif;
	width: 20vw;
	color: white;
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
}

.japanese_old_door_text { font-size: clamp(6px, 1.3vw, 200px);
	font-family:CactusClassicalSerif;
	text-align:left;
	width: 20vw;
	color: white;
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
}

/* Responsive layout - Weniger Abstand von oben bei mobiler Ansicht */
@media (max-width: 700px) {
  .old-door-text-container  {
	top: 25px;
  }
  .old-door-text { width: 38vw; font-size: clamp(10px, 3.1vw, 20px); }
  .japanese_old_door_text {  width: 38vw; font-size: clamp(10px, 2.6vw, 20px); }
}

/******************************/
/* Startbild alte Tür - ENDE */
/****************************/


/*********************/
/* Artwork - Images */
/*******************/

.image_container { display:flex; }

/* Bei Mobiler Ansicht die Bilder in einer Reihe untereinander. */
@media (max-width: 700px) {
  .image_container {
    flex-direction: column;
    align-items: center;
  }
}


.artwork_title { font-family: 'Caveat', sans-serif;
	color: white;
	font-size: clamp(24px, 3.0vw, 60px);
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
	margin-bottom: 80px;
}

.artwork_images { height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	transition: transform 0.2s ease;
}

.artwork_images, .space_col { width: clamp(240px, 16.0vw, 400px); }

@media (min-width: 600px) {
	.artwork_images:hover { transform: scale(2.0); }
}

.space_row { height: 10px; }

@media (min-width: 600px) {
	.artwork_endspace { height: 300px; }
}

.christmas { display:flex;
	justify-content: center;
	align-items: center;
	font-family: 'Caveat', sans-serif;
	color: white;
	font-size: clamp(24px, 3.0vw, 60px);
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
	height: 200px;
	margin-top:60px;
}

/*********************/
/*  Sales Location  */
/*******************/

.sales_location_title { font-family: 'Caveat', sans-serif;
	color: white;
	font-size: clamp(24px, 3.0vw, 60px);
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
	margin-bottom: 80px;
}

.sales_location_text { color: white;
	font-size: clamp(18px, 2.0vw, 30px);
	font-family: 'Caveat', sans-serif;
	width: 56vw;
	max-width: 750px;
	padding-bottom: 100px;
	text-shadow:
		1px 1px 2px rgba(0,0,0,0.9),
		2px 2px 2px rgba(0,0,0,0.9),
		3px 3px 6px rgba(0,0,0,0.6);
}


/**************/
/* SONSTIGES */
/************/

.text_left { text-align:left; }
.text_center { text-align:center; }

.flex_center_column { display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.flex_center_row { display:flex;
	justify-content: center;
	align-items: center;
}

.datenschutz { font-family: Arial, Verdana, 'DejaVu Sans', sans-serif;
	font-size: 15px;
	max-width: 800px;
	text-align: left;
	border: 2px solid #AAAAAA;
	padding: 20px;
	margin-bottom: 80px;
}