@charset "utf-8";

/********************************************************************/
/* Projekt-Website: hyotic.bplaced.net								*/
/* Author: Dr. Hyun-Joo Olbrich-Lee									*/
/* Erstellungsdatum: am 25.01.2023			 						*/
/*																	*/
/* Tipps: 															*/
/* 		- Hauptfarben im Projekt: #0B322B & #A77869					*/
/*		- Ansicht:													*/
/* 			Mobile: max. 710px 										*/
/*			481px — 768px: iPads, Tablets: em;						*/
/*			769px — 1024px: Small screens, laptops.					*/
/*			1025px — 1200px: Desktops, large screens.				*/
/*			1201px and more — Extra large screens, TV.				*/
/********************************************************************/

/********************************************************************/
/* Projekt-CSS für index.html										*/
/* Definitionsreihenfolge für index.html: 							*/
/*	1) Tag 															*/
/*	2) Class 														*/
/*	3) Id 															*/
/*	4) Mobile Ansicht												*/
/*	5) Desktop Ansicht												*/
/********************************************************************/

/********************************************************************/
/* Variablen    													*/
/********************************************************************/
:root {
	--transition: all .5s ease-in-out;
	--figcapture-font-size: clamp(0.5rem, 2vw, 1.5rem);
	--h3-font-size: clamp(1.2rem, 3vw, 2rem);
	--text-font-size: clamp(1rem, 3vw, 1.5rem);
	--text-color: #5B5B5B;
	--text-color-hellbraun: rgba(207, 178, 169, 0.8);
	--text-color-dunkelbraun: #A77869;
	--text-color-dunkelgreen: #0B322B;
}


/********************************************************************/
/* Fonts verwenden													*/
/********************************************************************/
/***** roboto-regular - latin *****/
@font-face {
	font-family: Roboto400;
	src: url("../fonts/roboto-v30-latin-regular.woff2") format('woff2'),
		url('fonts/roboto-v30-latin-regular.woff') format('woff');
}

/***** roboto-700 - latin *****/
@font-face {
	font-family: Roboto700;
	src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'),
		url('fonts/roboto-v30-latin-700.woff') format('woff');
}

/***** NotoSerifKR *****/
@font-face {
	font-family: NotoKr, sans-serif;
	src: url('../fonts/NotoSerifKR.otf') format('otf');
}

/********************************************************************/
/* Allgemine Einstellungen für die gesamte HTML-Seite 				*/
/********************************************************************/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/********************************************************************/
/* Allgemine Einstellungen für Tags und deren Kinder				*/
/********************************************************************/
html {
	font: 1rem Roboto400, sans-serif;
}

h1,
h2 {
	font-family: Roboto700, sans-serif;
}

header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	height: 100px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background: rgba(255, 255, 255, 0.95);
	transition: 0.5s;
}

main {
	margin-top: 100px;
}

a {
	text-decoration: none;
	color: #A77869;
}

article>div {
	font-size: clamp(1rem, 1.3vw, 1.5rem);
}

footer>div {
	background: #0B322B;
	color: white;
	font-variant: small-caps;
	font-size: clamp(0.8rem, 1.3vw, 1.5rem);
	text-align: center;
	padding-top: 3vw;
	padding-bottom: 3vw;
}

footer p:nth-of-type(3) {
	font-variant: normal;
}

img {
	max-width: 100%;
	height: auto;
}


/***** Burgermenu ist nicht anzuzeigen	*****/
div[id*="burgermenu"] {
	display: none;
}

/********************************************************************/
/* Klassen im Projekt 												*/
/********************************************************************/
/***** Platz für Topmenu optimieren *****/
header.small-menu {
	height: 60px;
	align-items: center;
	border-bottom: 1px solid rgba(11, 50, 43, 0.5);
}

.header-spalter {
	display: flex;
}

.header-spalter>* {
	flex-grow: 1;
	margin-left: 1rem;
}

.header-spalter div:first-of-type {
	flex-basis: 30%;
}

.cont {
	background: #fff;
}

.spalten img {
	padding: 2%
}

.introSpalter {
	display: flex;
}

.colorA77869 {
	color: #A77869;
}

.color0B322B {
	color: #0B322B;
}

.name {
	text-align: start;
	font-variant: small-caps;
}

/***** slider-Anpassung *****/
.sy-box {
	margin-top: 2%;
	box-shadow: 0.5vw 0.5vw 0.5vw silver;
}

.news-slider .text-content {
	display: flex;
	text-justify: center;
	width: 100%;
	color: rgba(231, 235, 234, 1.00);
	font-size: 1.5rem;
	bottom: 0;
	padding: 0;
}

.news-slider .text-content>div:first-of-type {
	flex-basis: 30%;
	padding: 5% 2% 2% 2%;
	text-align: center;
}

.news-slider .text-content>div:first-of-type h4 {
	font-size: clamp(0.9rem, 3vw, 2rem);
	color: #0B322B;
}

.news-slider .text-content>div:last-of-type {
	flex-basis: 70%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	font-size: clamp(0.8rem, 3vw, 1.8rem);
	background: #0B322B;
}

.news-slider .text-content p {
	margin: 1%;
}

/***** Bildergalerie *****/
.galerieSet {
	column-count: 2;
	column-gap: 0;
	margin: 0 2%;
}

.galerieSet div {
	overflow: hidden;
}

.galerieOne {
	column-count: 1;
	padding: 1% 1%;
}

.galerieSet img:hover,
.galerieOne img:hover {
	transform: scale(0.95);
	filter: grayscale(0);
}

.lb-data .lb-caption {
	font-size: var(--text-font-size);
	line-height: 2.5rem;
	color: white;
}

/***** Youtube einbinden *****/
.video-container {
	position: relative;
	padding: 0 3% 56.25% 3%;
	height: 0;
	overflow: hidden;
	margin: 0 2%;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/***** Fotogalerie ****/
.lb-data .lb-details {
	text-align: center;
}

/********************************************************************/
/* Ids im Projekt, die sowohl für Mobile als auch für Desktop gelten	*/
/********************************************************************/
/*****  <header> besteht aus #nameAndJob und #topnav *****/
header.small-menu #nameAndJob {
	opacity: 1;
}

#job {
	margin: 0;
	font-size: 0.8rem;
	column-gap: 0;
}

/*****  1. Article in <main>: Intro *****/
#introSpalter {
	display: flex;
}

#introSpalter:first-of-type {
	flex-basis: 40%
}

#introSpalter:last-of-type {
	flex-basis: 60%;
}

#introText {
	display: flex;
	background: #0B322B;
	flex-direction: column;
	padding: 2%;
	justify-content: center;
}

#introText h1 {
	font-size: clamp(1.2rem, 5vw, 5rem);
	padding: 5%;
}

#introText h1::before {
	content: "Dr. ";
	color: #A77869;
	font-weight: 700;
}

#introName {
	flex-basis: 30%;
	color: white;
	transform: translate(-8vw, 0.5vh);
	font-size: clamp(1rem, 6vw, 6rem);
	text-align: left;
	white-space: nowrap;
}

#introHistory {
	font-size: clamp(0.8rem, 2vw, 1.5rem);
	padding: 2%;
}

#introHistory p {
	padding: 0.3%;
}

/*****  3. Article in <main>: Komponent *****/
#kompetenzen {
	background: url("../img/kompetenzen.webp") center top fixed;
	background-size: cover;
}

.komContainer {
	display: flex;
	flex-direction: column;
}

.komGalerie {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
}

.komGalerie figure {
	position: relative;
	flex-basis: 0;
	flex-grow: 1;
	padding: 1%;
	margin-top: 2%;
	cursor: pointer;
}

.komGalerie p {
	position: absolute;
	bottom: 2vw;
	right: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.7);
	padding: 0.5rem 1rem;
	color: #0B322B;
	opacity: 1;
	font-size: var(--figcapture-font-size);
}

.zeiger {
	position: absolute;
	border-style: solid;
	border-width: clamp(0.8rem, 3vw, 1.5rem);
	border-color: #0B322B transparent transparent transparent;
	transform: rotate(360deg);
	left: 40%;
	transition: var(--transition);
}

#kompetenzen h2,
#skills h2,
#hobbies h2 {
	line-height: min(55vh, 45vw);
	/*Die Höhe von h2 ist abhängig von der Breite*/
	font-size: 9vw;
	text-align: center;
	color: white;
	text-shadow: 1px 0 black, 0 1px black, -1px 0 black, 0 -1px black;
	opacity: 0.7;
}

#kompetenzen h3,
#hobbies h3,
#skills h3 {
	color: #A77869;
	font-size: var(--h3-font-size);
	text-align: center;
}

#kompetenzen h3::before,
#hobbies h3::before {
	content: "Was ";
	color: #0B322B;
}

.komDetail ul {
	margin-top: 2%;
	margin-left: 5%;
	margin-right: 5%;
}

.komDetail li {
	padding-top: 2%;
}

.show {
	color: var(--text-color);
}

.hide {
	display: none;
}

.showRahmen {
	border-style: solid;
	border-color: #0B322B;
	padding: 2%;
}


/*****  4. Article in <main>: Skills *****/
#skills {
	background: url("../img/skills.webp") center top fixed;
	background-size: cover;
}

#skills h3::before {
	content: "Welche ";
	color: #0B322B;
}

#progSprachen {
	position: relative;
	overflow: hidden;
}

/*****  5. Article in <main>: Hobbies *****/
/***** ANIMATION für Hobbies *****/
.fadescroll {
	transition: all 1s 0.5s;
	opacity: 0;
}

.moveleft {
	transform: translateX(-10vw);
	opacity: 0;
	transition: all 0.6s 0.3s;
}

.movebottom {
	transform: translateY(10vw);
	opacity: 0;
	transition: all 0.3s 0.2s;
}

.go {
	transform: translateX(0);
	opacity: 1;
}

#gridContainer>div {
	display: flex;
	flex-direction: column;
}

#hobbies {
	background: url("../img/hobbies.webp") center top fixed;
	background-size: cover;
}

#hobbies ul {
	padding-left: 2rem;
}

#hobbyLesen img {
	padding: 3%;
	box-shadow: 0.5vw 0.5vw 0.5vw silver;
}

#hobbyFotografieren img {
	padding: 2%;
	transition: 0.5s;
}

#hobbyFotografieren img[src*="s6.webp"] {
	filter: grayscale(1);
}

#hobbyFotografieren img[src*="s6.webp"]:hover {
	filter: grayscale(0);
}

/*****  Botton 'top' *****/
#back-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	opacity: 0;
	z-index: 100;
}

#back-top a {
	background: rgba(11, 50, 43, 0.6);
	color: white;
	text-decoration: none;
	border-radius: 50%;
	padding: 1rem 0.9rem;
	display: block;
}

@media (max-width:710px) {

	/***** <header> links: Name & Berufename *****/
	#nameAndJob {
		opacity: 1;
		transition: 0.3s 0.3s;
	}

	/***** <header> rechts: Navigation *****/
	#topnav {
		position: fixed;
		top: 0;
		bottom: 0;
		right: -200px;
		z-index: 100;
		background: rgba(230, 227, 220, 0.9);
		padding: 2%;
		transition: 0.4s;
	}

	#topnav ul {
		list-style: none;
		padding-top: 4rem
	}

	#topnav a {
		text-decoration: none;
		font-variant: small-caps;
		line-height: 40px;
		display: block;
		transition: 0.5s;
		text-align: center;
		font-size: 1rem;
		color: #0B322B;
	}

	#topnav a:hover {
		color: #A77869;
		font-weight: 500;
	}

	/***** Burger-menu Animatiom ******/
	#topnav #burgermenu {
		height: 50px;
		width: 50px;
		display: block;
		position: fixed;
		top: 1.2rem;
		right: 0;
		cursor: pointer;
	}

	header.small-menu #topnav #burgermenu {
		top: 0.2rem;
	}

	.line {
		height: 2px;
		width: 60%;
		background: rgba(11, 50, 43, 1.00);
		display: block;
		position: absolute;
		left: 20%;
		transition: 0.4s 0.4s;
	}

	.line:nth-of-type(1) {
		top: calc(35% - 1px);
	}

	.line:nth-of-type(2) {
		top: calc(50% - 1px);
	}

	.line:nth-of-type(3) {
		top: calc(65% - 1px);
	}

	/***** 2. Article in <main>: Werdegang *****/
	.tab_cell {
		color: var(--text-color);
		text-align: left;
		padding-left: 2vw;
		padding-bottom: 0.3%;
	}

	.tab_cell:last-of-type {
		text-align: left;
		border-bottom: rgba(190, 155, 144, 1.00) 1px solid;
	}

	.tab_row .tab_cell:first-of-type {
		color: #0B322B;
		font-weight: bold;
		padding-left: 0;
		padding-top: 2%;
		padding-bottom: 1%;
		white-space: nowrap;
	}

	.tab_row:last-child .tab_cell {
		border-bottom: none;
	}

	/***** 4. Article in <main>: Hobbies *****/
	#gridContainer {
		display: flex;
		margin: 3% 0;
		flex-direction: column;
		gap: 5%;
	}

	#gridContainer p {
		padding: 3%;
		color: #5B5B5B;
	}

	#gridContainer>div {
		margin: 2%;
	}

	#buchImgRahmen {
		margin: 0 15%;
	}

	#hobbyWandern {
		/* rowStart / colStart / rowEnde / colEnde */
		grid-area: 2 / 1 / 2 / 3;
	}

	footer div {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	footer>div>p {
		display: block;
	}
}


/********************************************************************/
/* Ansicht für Mobile: 415px > Ansicht 					*/
/* Definitionsreihenfolge: von oben 								*/
/********************************************************************/
@media screen and (max-width:415px) {
	.komGalerie p {
		opacity: 0;
	}

	.komGalerie figure:hover p {
		position: absolute;
		bottom: 10px;
		right: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.7);
		padding: 0.5rem 1rem;
		color: #0B322B;
		opacity: 1;
		font-size: var(--figcapture-font-size);
	}

	footer div {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	footer>div>p {
		display: block;
	}
}

/********************************************************************/
/* Ansicht für Desktop: 710px < Ansicht 							*/
/* Definitionsreihenfolge: von oben 								*/
/********************************************************************/
@media (min-width:710px) {

	/***** <header> links: Name & Berufename *****/
	#nameAndJob {
		opacity: 0;
	}

	/***** <header> rechts: Navigation *****/
	#topnav {
		transition: 0.5s;
	}

	#topnav ul {
		display: flex;
		list-style: none;
		justify-content: flex-end;
	}

	#topnav a {
		font-size: clamp(1rem, 1.5vw, 2rem);
		margin-right: 1rem;
		text-decoration: none;
		display: block;
		font-variant: small-caps;
		color: #0B322B;
	}

	#topnav lable {
		display: none;
	}

	#topnav a:hover {
		color: #A77869;
	}

	/***** 2. Article in <main>: Werdegang *****/
	.table {
		display: table;
	}

	.tab_row {
		display: table-row;
		width: 1vw;
	}

	.tab_row .tab_cell:first-of-type {
		color: #0B322B;
		font-weight: 500;
		padding-left: 0;
		padding-top: 2%;
		padding-bottom: 1%;
	}

	.tab_cell {
		display: table-cell;
		color: #5B5B5B;
		text-align: left;
		padding: 1vw;
		border-bottom: rgba(190, 155, 144, 1.00) 1px solid;
	}

	.tab_row:last-child .tab_cell {
		border-bottom: none;
	}

	/***** 4. Article in <main>: Hobbies *****/
	#gridContainer {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: 1fr 1fr;
		margin: 3% 0;
		column-gap: 2%;
		;
	}

	#gridContainer p {
		padding: 3%;
		color: #5B5B5B;
	}

	#hobbyLesen {
		/* rowStart / colStart / rowEnde / colEnde */
		grid-area: 1 / 1 / 1 / 2;
		margin: 2%;
		justify-content: center;
	}

	#hobbyFotografieren {
		/* rowStart / colStart / rowEnde / colEnde */
		grid-area: 1 / 2 / 1 / 2;
		margin: 0 2% 2% 0;
		justify-content: center;
	}

	#hobbyWandern {
		/* rowStart / colStart / rowEnde / colEnde */
		grid-area: 2 / 1 / 2 / 3;
	}
}