/* ################################################## */
/* NEUE_SEITE CSS (c) Schike, 2025 */
/* ################################################## */

/* ################################################## */
/* FONTS */

/* Fließtext (Julee) */
@font-face {
  font-family: 'julee';
  src: url('/0media/fonts/julee.ttf');
  font-display: swap;
  font-weight: 100 1000;
}

/* Titel (MadeInChina) */
@font-face {
  font-family: 'madeinchina';
  src: url('/0media/fonts/madeinchina.ttf');
  font-display: swap;
  font-weight: 100 1000;
}

/* ################################################## */
/* ROOT VARIABLEN */
:root {
	/* Farben */
	--c1: rgb(30,20,10);
	--c2: rgb(205,195,180);
	--c3: rgb(225,215,200);
	--c4: rgb(245,235,220);
	
	--ca: rgb(255,100,0);
	--ctxt: rgb(15,15,0);
	
	--c-success: rgb(0, 255, 0);
	--c-error: 	 rgb(255, 0, 0);
	
	/* Größen */
	--d1: 4px;
	--d2: 8px;
	--d3: 16px;
	--d4: 32px;
	
	--dh: 100vh; /* Document Height */
	
	/* Timing */
	--t1: 0.2s;
	--t2: 0.4s;
	--t3: 0.6s;

	/* Sonstiges */
	--br: 8px; /* Border-Radius */
	--bs: 0 0 10px rgba(0,0,0,0.6); /* Box-Shadow */
}


/* ################################################## */
/* GRUNDLEGENDES MARKUP */
body {
	margin: 0; padding: 0;
	background-color: var(--c1);
}
*, *:before, *:after {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
	
	font-style: normal; font-weight: normal;
	font-size: 12pt;
	
	font-family: 'julee';
	margin: 0; padding: 0;
	color: var(--ctxt);
	line-height: 1.15em;
	font-variant-ligatures: none;
	hyphens: none;
}

/* Scrollbars */
html, html * {
	scrollbar-width: thin;
	scrollbar-color: var(--ca) var(--c1);
}
::-webkit-scrollbar {
	background-color: var(--c1);
	width: 20px; height: 20px;
}
::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 10px 10px var(--ca);
    border: solid 7px transparent;
	border-radius: 10px;
}
::-webkit-scrollbar-track { background-color: var(--c1); }
::-webkit-scrollbar-corner { background: var(--c1); }

/* Titel & Fließtext */
h1, h1 * { font-size: 32pt; font-family: 'madeinchina'; }
h2, h2 * { font-size: 26pt; font-family: 'madeinchina'; font-weight: 300; }
h3, h3 * { font-size: 20pt; font-family: 'julee'; 	font-weight: 400; }
h4, h4 * { font-size: 14pt; font-family: 'julee'; 	font-weight: 600; }
h5, h5 * { font-size: 12pt; font-family: 'julee'; 	font-weight: 400; }
h6, h6 * { font-size: 11pt; font-family: 'julee'; 	font-weight: 400; }

b, b * { font-weight: bold; }
i, i * { font-style: italic; }

h1 b, h1 b * { font-weight: 800; }
h2 b, h2 b * { font-weight: 800; }
h3 b, h3 b * { font-weight: 800; }
h4 b, h4 b * { font-weight: 800; }
h5 b, h5 b * { font-weight: 800; }
h6 b, h6 b * { font-weight: 800; }

c, c * { color: var(--ca); }

input, textarea {
	border: 0;
	padding: var(--d1);
	border: 1px solid var(--c3);
	background-color: var(--c2);
}
input:focus, textarea:focus {
	background-color: var(--c1);
	outline: none;
}
input[type='submit'], button {
	padding: var(--d1);
	background-color: var(--c1);
	border: 1px solid var(--c4);
	box-sizing: content-box;
	cursor: pointer;
}

a {
	text-decoration: underline;
}

hr {
	width: 100%;
	border: 0;
	height: 1px;
	background: var(--c4);
}

img {
	display: block;
}

/* ################################################## */
/* Z-INDEXES */
#header { z-index: 99; }

/* ################################################## */
/* HAUPTSTRUKTUREN */

/* Main (Haupt-Container) */
#main {
	/* Hauptcontainer (Seitenfüllend) */
	position: relative;
	width: 100%; 
	height: var(--dh);
	
	display: flex;
	flex-direction: column;
	background: var(--c4);
	overflow: hidden;
	
	z-index: 0;
}
#background {
	position: absolute;
	top: 0; left: 0;
	width: 100%; 
	height: 100%;
	
	z-index: -1;
}
#background img {
	width: 100%; 
	height: 100%;
	
	object-fit: cover;
}

/* Header */
#header {
	width: 100%;
	height: 30px;
	
	display: flex;
	flex-direction: column;
	
	background: var(--c3);
	border-bottom: 1px solid var(--c1);
	box-shadow: var(--bs);
}
#header-line {
	display: flex;
	gap: var(--d1);
	padding: var(--d1);
}
#header-line * { font-size: 10pt; }

#page {
	/* Inhalte der Seite */
	flex: 1 0 0;
	position: relative;
	
	display: flex;
	justify-content: space-between;
	gap: var(--d2);
	
	padding: var(--d4);
	
	overflow: hidden;
}
#left, #right {
	flex: 1 0 0;
	height: 100%;
	max-width: 800px;
	display: flex;
	flex-direction: column;
}

#title {
	padding: var(--d2);
	border: 1px solid var(--c1);
	box-shadow: var(--bs);
	background: var(--c3);
}
#title p { margin-bottom: var(--d1); }
#title p:first-letter { margin-left: var(--d1); }

#konfusius {
	margin-top: auto;
	
	display: flex;
	flex-direction: column;
	gap: var(--d2);
	
	padding: var(--d2);
	
	border: 1px solid var(--c1);
	box-shadow: var(--bs);
	background: var(--c3);
}
#konfusius-head {
	text-align: center;
}

#wisdom-cont {
	position: relative;
	
	padding: var(--d3) var(--d4);
	border: 1px solid var(--c1);
	background: var(--c4);
}
#wisdom-cont > * {
	opacity: 1;
	visibility: visible;
	transition: 1s;
}
#wisdom-cont.fadeout > * {
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
}
#wisdom {
	text-align: center;
}

#pin-wisdom-btn {
	position: absolute;
	top: var(--d1);
	right: var(--d1);
	
	width: 20px;
	height: 20px;
	
	cursor: pointer;
}
#pin-wisdom-btn.invisible {
	visibility: hidden;
}
#pin-wisdom-btn img {
	width: 100%; 
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

#konfusius-foot {
	display: flex;
	justify-content: center;
}
#wisdom-btn {
	
	padding: var(--d1);
	
	background: var(--c2);
	border: 1px solid var(--c1);
	box-shadow: var(--d1) var(--d1) 0 rgba(0,0,0,0.5);
	
	text-align: center;
	user-select: none;
	cursor: pointer;
}
#wisdom-btn:active {
	transform: translate(var(--d1), var(--d1));
	box-shadow: none;
}

#pinboard {
	display: flex;
	flex-direction: column;
	gap: var(--d2);
	
	border: 1px solid var(--c1);
	box-shadow: var(--bs);
	background: var(--c3);
	
	overflow: hidden;
	
	margin-top: 0;
	padding: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}
#pinboard.active {
	height: auto;
	margin-top: var(--d2);
	padding: var(--d2);
	opacity: 1;
	visibility: visible;
}
#pinboard-head {
	text-align: center;
}
#pinned-cont {
	display: flex;
	flex-direction: column;
	gap: var(--d1);
	
	overflow-y: scroll;

	padding: var(--d1);
	border: 1px solid var(--c1);
	background: var(--c4);
}

.pinned-wisdom {
	position: relative;
	border: 1px solid var(--c1);
	background: var(--c3);
	
	padding: var(--d1);
	padding-right: 30px;
	text-align: left;
}
.pinned-wisdom-delete {
	position: absolute;
	top: 0; right: 0;
	
	width: 30px;
	height: 30px;

	line-height: 30px;
	text-align: center;
	color: rgb(200,0,0);
	
	cursor: pointer;
}

/* ################################################## */
/* MEDIA QUERIES */
@media (hover: hover) and (pointer: fine) {
	/* Grundlegendes */
	a:hover { text-decoration: none; }
	
	/* Header */
	.nav-link:hover {
		background: var(--ca);
		color: var(--c1);
	}
	
	/* Pins */
	.pinned-wisdom-delete:hover { color: rgb(255,0,0); }
}
@media only screen and (max-width: 800px) {
	
	#background {
		opacity: 0.5;
	}
	#page {
		flex-direction: column;
		justify-content: start;
		padding: var(--d2);
		overflow-y: scroll;
	}
	#left, #right {
		flex: 0 0 auto;
		height: auto;
	}
	#title {
		box-shadow: none;
	}
	#konfusius {
		margin-top: 0;
		box-shadow: none;
	}
	#pinboard {
		max-height: 400px;
		box-shadow: none;
	}
}