/* -------------------------------------------------- */
/*    LILA SEITEN Webkatalog CSS (c) Schike, 2025     */
/* -------------------------------------------------- */

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

/* Überschriften: Space Mono Bold */
@font-face {
  font-family: 'spacemono-bold';
  src: url('../media/fonts/SpaceMono-Bold.ttf');
  font-display: swap;
  font-weight: 100 1000;
}

/* Fließtext: Roboto Condensed */
@font-face {
  font-family: 'roboto';
  src: url('../media/fonts/RobotoCondensed.ttf');
  font-display: swap;
  font-weight: 100 1000;
}
@font-face {
  font-family: 'roboto-italic';
  src: url('../media/fonts/RobotoCondensed-Italic.ttf');
  font-display: swap;
  font-weight: 100 1000;
}


/* ################################################## */
/* ROOT VARIABLEN */
:root {
	/* Farben */
	--ca1: rgb(15,15,15);
	--ca2: rgb(40,40,40);
	--ca3: rgb(65,65,65);
	--ca4: rgb(80,80,80);
	
	--cb1: rgb(40,0,60);
	--cb2: rgb(60,0,80);
	--cb3: rgb(80,0,100);
	--cb4: rgb(100,0,140);
	
	--ca: rgb(250,80,255);
	--ctxt: rgb(250,250,250);
	
	/* Borders */
	--border-width: 3px;
	--border-color:
		rgba(240,240,240,0.4)
		rgba(0,0,0,1)
		rgba(0,0,0,1)
		rgba(240,240,240,0.3);
	
	--border-color-inset:
		rgba(0,0,0,1)
		rgba(240,240,240,0.3)
		rgba(240,240,240,0.4)
		rgba(0,0,0,1);
		
	
	/* 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 5px rgba(0,0,0,0.5); /* Box-Shadow */
}


/* ################################################## */
/* GRUNDLEGENDES MARKUP */
body {
	margin: 0; padding: 0;
	background-color: var(--ca1);
}
*, *: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: 'roboto';
	font-weight: 350;
	margin: 0; padding: 0;
	color: var(--ctxt);
	line-height: 1.2em;
	font-variant-ligatures: none;
	hyphens: auto;
}

/* Titel & Fließtext */
h1, h1 * { font-size: 48pt; font-family: 'spacemono-bold'; }
h2, h2 * { font-size: 28pt; font-family: 'roboto'; 	font-weight: 300; }
h3, h3 * { font-size: 20pt; font-family: 'spacemono-bold'; 	font-weight: 400; }
h4, h4 * { font-size: 14pt; font-family: 'roboto'; 	font-weight: 600; }
h5, h5 * { font-size: 12pt; font-family: 'roboto'; 	font-weight: 400; }
h6, h6 * { font-size: 11pt; font-family: 'roboto'; 	font-weight: 400; }

b, b * { font-weight: bold; }
i, i * { font-family: 'roboto-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(--ca3);
	background-color: var(--ca2);
}
input:focus, textarea:focus {
	background-color: var(--ca1);
	outline: none;
}
input[type='submit'], button {
	padding: var(--d1);
	background-color: var(--ca1);
	border: 1px solid var(--ca4);
	box-sizing: content-box;
	cursor: pointer;
}

img { display: block; }

a { text-decoration: none; }
p > a { text-decoration: underline; }

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

ul, ol {}
li { 
	list-style: none; 
	margin: 0 0 var(--d1) 10pt;
}
li:before { 
	content: '♦'; 
	margin-right: 5pt; 
}

input, textarea {
	background: var(--ca2);
	border: var(--border-width) solid;
	border-color: var(--border-color-inset);
}
button, input[type='submit'] {
	background: var(--ca2);
	border: var(--border-width) solid;
	border-color: var(--border-color);
}

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

.weblink-link [name='desc'] { z-index: 80; }


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

/* Hauptcontainer */
#main {
	position: relative;
	width: 100%; height: var(--dh);
	
	display: flex;
	flex-direction: column;
	
	overflow: hidden;
}

/* Header */
#header {
	/* = .win Element */
	width: 100%;
}
#line {
	/* = .win-head */
	display: flex;
	gap: var(--d1);
	padding: var(--d1);
	padding-top: 0;
}
#line * { font-size: 10pt; }
#line *:nth-child(1) { margin-right: auto; }
#nav {
	/* = .win-body */
	display: flex;
}
.nav-link {
	height: 34px;
	padding: var(--d1) var(--d2);
	
	background: var(--ca3);
	text-decoration: none;
	
	border: var(--border-width) solid;
	border-color: var(--border-color);
}
.nav-link:active {
	border-color: var(--border-color-inset);
}
.nav-link.active {
	background: var(--cb3);
}
#navbtn {
	position: relative;
	display: none;
	width: 34px;
	
	background: var(--ca3);
	border: var(--border-width) solid;
	border-color: var(--border-color);
	
	margin-left: auto;
	cursor: pointer;
}
#navbtn:active {
	border-color: var(--border-color-inset);
}
#navbtn p {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	
	width: 80%;
	height: 4px;
	background: var(--ca4);
	
	border: 2px solid;
	border-color: var(--border-color-inset);
}
#navbtn p:nth-child(1) { top: 25%; }
#navbtn p:nth-child(2) { top: 50%; }
#navbtn p:nth-child(3) { top: 75%; }

/* Page */
#page {
	flex: 1 0 0;
	position: relative;
	width: 100%;
	
	display: flex;
	
	transition: var(--t1);
	background: var(--ca1);
	
	overflow: hidden;
}
#left {
	/* Kategorie-Übersicht */
	flex: 0 0 300px;
	position: relative;
	
	display: flex;
	flex-direction: column;
	
	background: var(--ca3);
	overflow-y: hidden;
}
#logo {
	width: 100%;
	height: auto;
}
#logo img {
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
}
#center {
	flex: 1 0 0;
	position: relative;
	
	display: flex;
	flex-direction: column;

	overflow: hidden;
}
#content {
	flex-grow: 1;
	background: var(--ca3);
	overflow: hidden;
}
#content > .win-body {
	flex-grow: 1;
	
	display: flex;
	flex-direction: column;
	gap: var(--d3);
	
	padding: var(--d3);
	background: var(--cb1);
	overflow-y: scroll;
}

#title {
	background: var(--ca3);
	padding: var(--d3);
}
#title * { hyphens: none; }
#title p { margin-bottom: var(--d2); }
#title h4 { margin: var(--d3) 0 var(--d2) 0; }

#contact {
	padding: var(--d3);
}
#contact > * {
	margin-bottom: var(--d2);
}
#contact * {
	hyphens: none;
}
#footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	padding: var(--d1);
}

/* Win-Styling */
.win {
	display: flex;
	flex-direction: column;
	
	padding: var(--border-width);
	background: var(--ca3);
	border: var(--border-width) solid;
	border-color: var(--border-color);
}
.win-head {}
.win-body {
	background: var(--ca2);
	border: var(--border-width) solid;
	border-color: var(--border-color-inset);
}
.win-foot {}

/* Block Styling */
.block {
	display: flex;
	flex-direction: column;
	
	background: var(--cb2);
	
	border: var(--border-width) solid;
	border-color: var(--border-color);
}
.block-head {
	padding: var(--d2);
}
.block-body {
	padding: var(--d2);
}


/* ################################################## */
/* SPEZIELLE ELEMENTE */

/* Kategorie Links (Left) */
#category-links {
	/* = win Element */
	flex-grow: 1;
	overflow-y: hidden;
}
#category-links .win-head {
	padding: var(--d1);
}
#category-links .win-body {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

/* ################################################## */
/* BAUSTEIN ELEMENTE */

/* Preview Container */
.prev-cont {
	display: flex;
	gap: var(--d2);
	flex-wrap: wrap;
	padding: var(--d2);
}

/* Kategorie Link (In Left) */
.category-link {
	flex-shrink: 0;
	position: relative;
	padding: var(--d1) var(--d2);
	
	background: var(--ca3);
	border: var(--border-width) solid;
	border-color: var(--border-color);
}
.category-link:active {
	border-color: var(--border-color-inset);
}
.category-link.active {
	color: var(--ctxt);
	background: var(--cb3); 
}
.category-link [name='sub'] {
	font-size: 10pt;
	opacity: 0.6;
	hyphens: none;
}

/* Weblinks (In Kategorie Previews) */
.weblink-link {
	position: relative;
	display: flex;
	gap: var(--d1);
	
	padding: var(--d1);
	background: var(--ca1);
	border-bottom: 1px solid var(--ca4);
}
.weblink-link [name='icon'] {
	width: 16px;
	height: 16px;
	
	object-fit: contain;
}
.weblink-link [name='name'] {}
.weblink-link [name='type'] {
	display: flex; gap: 2px;
	margin-left: auto;
}
.weblink-link [name='type'] img {
	width: 16px; 
	height: 16px;
}
.weblink-link [name='desc'] {
	position: absolute;
	left: 0; top: 100%;
	width: 100%;
	
	display: none;
	
	padding: var(--d1);
	background: var(--ca2);
	border: 1px solid var(--ca);
	border-top: 0;
	
	box-shadow: var(--bs);
	
	pointer-events: none;
}

/* Kategorie-Preview */
.category-prev {
	/* = win Element */
	gap: var(--d1);
	
	width: calc(25% - 3*var(--d2)/4);
	padding: var(--d1);

	background: var(--ca3);
}
.category-prev * { hyphens: none; }
.category-prev > .win-head {
	display: flex;
	flex-direction: column;
	gap: var(--d1);
}
.category-prev > .win-body {
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	background: var(--ca1);
	
	overflow: visible;
}
.category-prev [name='etc'] { 
	text-align: center; 
}
.category-prev > .win-foot {
	display: flex;
	justify-content: end;
	margin-top: auto;
}

/* Weblink Preview */
.weblink-prev {
	display: flex;
	flex-direction: column;
	
	flex: 1 1 320px;
	max-width: 500px;
	
	box-shadow: 0 0 2px var(--ca);
	background: var(--ca1);
	border-radius: var(--br);
}
.weblink-prev * { hyphens: none; }
.weblink-prev-head {
	display: flex;
	gap: var(--d2);
	align-items: end;
	
	padding: var(--d2);
	border-bottom: 1px solid var(--ca4);
}
.weblink-prev [name='icon'] {
	width: 64px; 
	height: 64px;
	object-fit: contain;
}
.weblink-prev a { 
	text-decoration: underline; 
}
.weblink-prev-neck {
	display: flex;
	gap: var(--d2);
	align-items: center;
	
	padding: var(--d1) var(--d2);
	
	border-bottom: 1px solid var(--ca4);
}
.weblink-prev [name='type'] {
	display: flex;
	align-items: center;
	gap: 4px;
	
	margin-left: auto;
}
.weblink-prev-neck img {
	width: 16px; 
	height: 16px;
	object-fit: contain;
}
.weblink-prev-body {
	padding: var(--d2);
}

/* Icons */
div.icon { display: block; }
span.icon { 
	display: inline-block; 
	vertical-align: sub;
}
.icon {
	width: 16px; height: 16px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.icon.webtool 		{ background-image: url(/media/icons/webtool.svg); }
.icon.literature 	{ background-image: url(/media/icons/literature.png); }
.icon.entertainment { background-image: url(/media/icons/entertainment.svg); }
.icon.ressource 	{ background-image: url(/media/icons/ressource.svg); }

.icon.windows	{ background-image: url(/media/icons/windows.svg); }
.icon.macos		{ background-image: url(/media/icons/mac.png); }
.icon.linux 	{ background-image: url(/media/icons/linux.svg); }
.icon.ios 		{ background-image: url(/media/icons/ios.svg); }
.icon.android 	{ background-image: url(/media/icons/android.svg); }


/* ################################################## */
/* ADMIN SEITE */
#login {
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#login-form {
	display: flex;
	flex-direction: column;
	gap: var(--d1);
	
	padding: var(--d1);
	
	background: var(--ca3);
	border: var(--border-width) solid;
	border-color: var(--border-color);
}


/* ################################################## */
/* MEDIA QUERIES */
@media (hover: hover) and (pointer: fine) {
	/* Grundlegendes */
	a:hover { 
		color: var(--ca); 
		text-decoration: none;
	}
	
	/* Header */
	.nav-link:hover {
		color: var(--ctxt);
		background: var(--cb3); 
	}
	
	/* Category-Links */
	.category-link:hover {
		color: var(--ctxt);
		background: var(--cb3); 
	}
	
	/* Page-Links */
	.weblink-link:hover { background: var(--ca); }
	.weblink-link:hover p { color: var(--ca1); }
	.weblink-link:hover [name='desc'] { display: block; }
}
@media only screen and (max-width: 1200px) {
	
	/* Font Größen */
	h1, h1 * { font-size: 32pt; }
	h2, h2 * { font-size: 24pt; }
	h3, h3 * { font-size: 18pt; }
	h4, h4 * { font-size: 16pt; }
	h5, h5 * { font-size: 12pt; }
	h6, h6 * { font-size: 11pt; }
	
	/* Kategorie-Preview */
	.category-prev {
		width: calc(33% - var(--d2));
	}
	
	/* Weblink Preview */
	/* .weblink-prev { */
		/* width: calc(33% - var(--d2)); */
	/* } */
}
@media only screen and (max-width: 1000px) {
	
	/* Left (Kategorie-Übersicht) */
	#left { 
		flex: 0 0 220px;
	}
	
	/* Center & Content */
	#content > .win-body {
		padding: var(--d2);
		gap: var(--d2);
	}
	
	/* Kategorie-Preview */
	.category-prev {
		width: calc(50% - var(--d2)/2);
	}
	/* Weblink Preview */
	/* .weblink-prev { */
		/* width: calc(50% - var(--d2)/2); */
	/* } */
}
@media only screen and (max-width: 800px) {
		
	/* Font Größen */
	*, *:before, *:after { font-size: 11pt; }
	
	h1, h1 * { font-size: 28pt; }
	h2, h2 * { font-size: 24pt; }
	h3, h3 * { font-size: 16pt; }
	h4, h4 * { font-size: 14pt; }
	h5, h5 * { font-size: 12pt; }
	h6, h6 * { font-size: 11pt; }
	
	/* Navigation */
	#navbtn { display: block; }
	
	/* Left (Kategorie-Übersicht) */
	#left {
		position: absolute;
		top: 0; left: -100%;
		width: 100%; height: 100%;
		transition: var(--t1);
	}
	#left.active { left: 0; }
	#logo { display: none; }
	
	/* Center & Content */
	#content > .win-body {
		padding: 0;
		gap: 0;
		background: var(--ca2);
	}
	
	/* Block Styling */
	.block {
		border: var(--border-width) solid;
		border-color: var(--border-color);
	}
	
	/* Kategorie-Preview */
	.category-prev {
		width: 100%;
	}
	/* Weblink Preview */
	/* .weblink-prev { */
		/* width: 100%; */
	/* } */
}