/* ################################################## */
/* Trödelladen CSS (c) Schike, 2025 */
/* ################################################## */


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

/* Georgia */
@font-face {
	font-family: 'georgia';
	src: url('/0media/fonts/georgia-regular.ttf');
	font-display: swap;
	font-weight: 100 1000;
}
@font-face {
	font-family: 'georgia-italic';
	src: url('/0media/fonts/georgia-italic.ttf');
	font-display: swap;
	font-weight: 100 1000;
}
@font-face {
	font-family: 'georgia-bold';
	src: url('/0media/fonts/georgia-bold.ttf');
	font-display: swap;
	font-weight: 100 1000;
}
@font-face {
	font-family: 'georgia-bold-italic';
	src: url('/0media/fonts/georgia-bold-italic.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* ################################################## */
/* ROOT VARIABLEN */
:root {
	/* Farben */
	--c1: rgb(20,10,0);
	--c2: rgb(65,40,5);
	--c3: rgb(115,85,45);
	--c4: rgb(160,125,80);
	
	--ca: rgb(0,200,0);
	--ctxt1: rgb(15,15,15);
	--ctxt2: rgb(250,240,220);
	
	--c-success: rgb(0, 255, 0);
	--c-error: 	 rgb(255, 0, 0);
	
	/* Größen */
	--d1: 4px;
	--d2: 8px;
	--d3: 16px;
	--d4: 32px;
	--d5: 64px;
	
	--dh: 100vh; /* Document Height */
	
	/* Timing */
	--t1: 0.2s;
	--t2: 0.4s;
	--t3: 0.6s;

	/* Sonstiges */
	--br: 4px; /* Border-Radius */
	--bs: var(--d1) var(--d1) 0 rgba(0,0,0,0.5); /* Box-Shadow */
	--bs-hover: var(--d1) var(--d2) 0 rgba(0,0,0,0.5);
}

/* ################################################## */
/* GRUNDLEGENDES MARKUP */
body {
	margin: 0; padding: 0;
	background: var(--c1);
	background-repeat: repeat;
	background-image: url(/0media/textures/background.png);
}
body.noscroll {
	height: var(--dh);
	overflow: hidden;
}
body.fotografie {
	background-image: url(/0media/textures/background-fotografie.png);
}
body.digital {
	background-image: url(/0media/textures/background-digital.png);
}
body.analog {
	background-image: url(/0media/textures/background-analog.png);
}
body.vektor {
	background-image: url(/0media/textures/background-vektor.png);
}

*, *: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: 'georgia';
	margin: 0; padding: 0;
	color: var(--ctxt1);
	line-height: 1.15em;
	font-variant-ligatures: none;
	hyphens: none;
}

/* Titel & Fließtext */
h1, h1 * { font-size: 48pt; font-family: 'georgia-bold'; }
h2, h2 * { font-size: 36pt; font-family: 'georgia'; 	font-weight: 300; }
h3, h3 * { font-size: 24pt; font-family: 'georgia'; 	font-weight: 400; }
h4, h4 * { font-size: 14pt; font-family: 'georgia'; 	font-weight: 600; }
h5, h5 * { font-size: 12pt; font-family: 'georgia'; 	font-weight: 400; }

b, b * { font-family: 'georgia-bold'; }
i, i * { font-family: 'georgia-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);
}


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

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

/* Bilder-Preview */
#preview {
	/* Enthaält ein .image-preview Element */
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	
	padding: var(--d2);
	
	background: rgba(0,0,0,0.6);
	
	opacity: 0;
	visibility: hidden;
}
#preview.active {
	opacity: 1;
	visibility: visible;
}
#preview-close {
	position: absolute;
	top: calc(var(--d2) + var(--d4));
	right: calc(var(--d2) + var(--d4));
	
	width: 40px;
	height: 40px;
	
	text-align: center;
	line-height: 40px;
	font-size: 18pt;
	color: var(--c1);
	
	box-shadow: var(--bs);
	cursor: pointer;
	z-index: 1;
}
#preview .image-preview {
	width: 100%;
	height: 100%;
	
	padding: var(--d4);
	padding-top: calc(var(--d4) + 40px + var(--d2));
}
#preview .image-preview.l2r {
	padding: var(--d4);
	padding-right: calc(var(--d4) + 40px + var(--d2));
}
#preview .image-preview-text {
	padding: var(--d3);
}

/* Hauptcontainer */
#main {
	width: calc(100% - 2*var(--d2));
	max-width: 1200px;
	margin: var(--d2) auto;
	padding: var(--d2);
	
	background: var(--c2);
	border: 2px solid var(--c1);
	box-shadow: var(--bs);
}

/* Header (Titel) & Sub (Untertitel) */
#header {
	width: 100%;
	padding: var(--d3);
}
#header-line {
	padding: var(--d1);
	border-bottom: 1px solid var(--c1);
}
#header-title {
	text-align: center;
}

#sub {
	width: 100%;
	padding: var(--d3);
	margin-top: var(--d2);
}
#sub * { color: var(--ctxt2); }
#sub *:first-letter { margin-left: var(--d2); }
#sub p, #sub h3 { margin-bottom: var(--d2); }

#banner {
	position: relative;
	width: calc(100% - 2*var(--d1));
	height: 220px;
	
	margin: var(--d1);
	margin-top: var(--d2);
	margin-bottom: 0;

	border: 2px solid var(--c1);
	border-radius: var(--br);
	overflow: hidden;
	z-index: 0;
}
#banner img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -1;
}

/* Seite (Left + Content) */
#page {
	width: 100%;
	margin-top: var(--d2);
}
#page::after {
	/* Element für Float-Stopp */
	content: '';
	display: table;
	clear: both; 
}

/* Left (Opener + Nav-Container + Back-To-Top) */
#left {
	float: left;
	width: 240px;
	height: 100%;
}

/* Opener */
#opener {
	width: 100%;
	padding: var(--d3);
	margin-bottom: var(--d2);
}

/* Navigation */
#nav {
	width: 100%;
	padding: var(--d1);
}
.nav-link {
	display: block;
	width: 100%;
	padding: var(--d3);
	padding-bottom: var(--d1);
	text-decoration: none;
}
.nav-link:first-child { margin-top: 0; }
.nav-link img {
	vertical-align: sub;
	width: 32px; height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}
.nav-link p {
	display: inline;
	color: var(--c4);
	margin-left: var(--d1);
	font-size: 16pt;
}
.nav-link.active p {
	color: var(--ctxt2);
	text-transform: uppercase;
}

/* Back To Top Button */
#back-to-top {
	width: 100%;
	padding: var(--d3);
}
#back-to-top button {
	
}

/* Content */
#content {
	float: right;
	width: calc(100% - 240px - var(--d2));
	height: 100%;
	
	margin-left: var(--d2);
}

.block {
	width: 100%;
	
	/* Padding 	= 16px (Platz für Textur)
				+ 4px (Abstand von Textur) */
	
	padding: calc(var(--d3) + var(--d1));
	margin-top: var(--d2);
}
.block:first-child {
	margin-top: 0;
}
.block-head {
	width: 100%;
	padding-bottom: var(--d2);
	border-bottom: 1px solid var(--c1);
}
.block-body {
	width: 100%;
	padding-top: var(--d2);
}
.block-body::after {
	/* Hinter jedem Block-Body ein Float-Stopp */	
	content: '';
	display: table;
	clear: both;
}
.block-foot {
	width: 100%;
	margin-top: var(--d2);
	padding-top: var(--d2);
	border-top: 1px solid var(--c1);
	text-align: right;
}

/* Footer */
#footer {
	margin-top: var(--d2);
	padding: var(--d3);
}
#footer * {
	color: var(--ctxt2);
}
#footer h3, 
#footer p {
	margin-bottom: var(--d2);
}


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

/* Bild-Gruppen Preview */
.image-group-preview {
	position: relative;
	
	height: 160px;
	
	margin-top: var(--d2);
	padding-bottom: 30px; /* Platz für Link */
	
	background: rgb(0,0,0);
	border: 2px solid var(--c1);
	border-radius: var(--br);
	
	overflow: hidden;
	z-index: 0;
}
.image-group-preview:first-child {
	margin-top: 0;
}
.image-group-preview * {
	color: var(--ctxt2);
}
.image-group-preview img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	
	z-index: -1;
}
.image-group-preview [name="title"] {
	float: left;
	
	/* Damit Box-Shadow bis zum Rand
		der Preview geht */
	margin-left: calc(var(--d1) * -1);
	margin-top: calc(var(--d1) * -1);
	
	padding: var(--d2);
	padding-top: var(--d3);
	padding-left: var(--d3);
	
	background: var(--c3);
	border: solid var(--c1);
	border-width: 0 2px 2px 0;
	box-shadow: var(--bs);
}
.image-group-preview [name="desc"] {
	clear: both;
	
	display: none;
	padding: var(--d2);
	
	text-shadow: 
		0 0 5px rgba(0,0,0,1),
		0 0 5px rgba(0,0,0,1);
}
.image-group-preview > a {
	position: absolute;
	right: var(--d2);
	bottom: var(--d2);
	
	text-shadow: 
		0 0 5px rgba(0,0,0,1),
		0 0 5px rgba(0,0,0,1);
}

/* Bild-Preview */
.image-preview {
	/* Große Bildervorschau
		Standard = Oben Bild / Unten Text
		Per JavaScript wird die Klasse l2r (Left to Right) hinzugefügt,
		wenn der image-preview Container Breiter als Hoch ist. */
	
	position: relative;
}
.image-preview-wrapper {
	width: 100%;
	height: 100%;
	
	/* Platz für Box-Shadows */
	padding-right: var(--d1);
	padding-bottom: var(--d1);
}
.image-preview-wrapper::after {
	content: '';
	display: table;
	clear: both;
}
.image-preview-img {
	width: 100%;
	height: calc(100% - 140px);
	
	margin: 0 auto;
	
	box-shadow: var(--bs);
	border: 1px solid var(--c1);
	overflow: hidden;
}
.image-preview-img img {
	width: 100%;
	height: 100%;
}
.image-preview-text {
	width: 100%;
	
	margin: 0;
	margin-top: var(--d2);
	
	padding: var(--d2);
	box-shadow: var(--bs);
	background: var(--c3);
	border: 1px solid var(--c1);
}
.image-preview-text * {
	color: var(--ctxt2);
}
.image-preview-text [name="title"] {
	padding-bottom: var(--d1);
	border-bottom: 1px solid var(--c4);
}
.image-preview-text [name="created"] {
	font-family: 'georgia-italic';
	text-align: right;
	opacity: 0.6;
}
.image-preview-text [name="desc"] {
	margin-top: var(--d1);
}

.image-preview.l2r .image-preview-img {
	float: left;
	width: calc(100% - 240px);
	height: 100%;
}
.image-preview.l2r .image-preview-text {
	float: left;
	width: calc(240px - var(--d2));
	height: auto;
	
	margin: 0;
	margin-left: var(--d2);
}

/* Bilder-Miniatur-Container */
.image-miniature-cont {
	margin: calc(var(--d1) * -1);
}

/* Polaroid Bild */
.polaroid {
	float: left;
	
	width: 140px;
	height: 180px;
	
	margin: var(--d1);
	padding: var(--d2);
	
	background: rgb(240,230,220);
	border: 1px solid var(--c1);
	box-shadow: var(--bs);
	
	cursor: pointer;
}
.polaroid-head {
	position: relative;
	width: 100%;
	height: calc(100% - 50px);
	
	margin: 0 auto;
	border: 1px solid var(--c1);
}
.polaroid-head::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	box-shadow: 0 0 2px rgba(0,0,0,0.5) inset;
	z-index: 1;
}
.polaroid-head img {
	width: 100%;
	height: 100%;
	
	object-fit: cover;
}
.polaroid-foot {
	height: 50px;
	margin-top: var(--d2);
}
.polaroid-foot p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Photoshop */
.photoshop {
	position: relative;
	float: left;
	
	margin: var(--d1);
	padding-left: 30px;
	
	width: 220px;
	height: 200px;
	
	border: 1px solid rgb(120,120,145);
	background: rgb(45,45,55);
	box-shadow: var(--bs);
	cursor: pointer;
}
.photoshop * { color: rgb(255,255,255); }
.photoshop::before {
	/* Toolbar */
	content: '✎ ↔ 🖌 ◌᠋ ✂';
	position: absolute;
	top: 0; left: 0;
	width: 30px;
	height: 100%;
	
	text-align: center;
	padding: var(--d2);
	
	color: rgb(255,255,255);
}
.photoshop-head {
	width: 100%;
	height: 25px;
	
	padding: var(--d1);
	background: rgb(75,75,85);
	
	border: solid rgb(120,120,145);
	border-width: 0 0 1px 1px;
}
.photoshop-head p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.photoshop-body {
	padding: var(--d2);
	
	width: 100%;
	height: calc(100% - 25px);
	
	background: rgb(65,65,75);
	box-shadow: 0 0 5px rgb(0,0,0) inset;
	border-left: 1px solid rgb(120,120,145);
}
.photoshop-body img {
	
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Passepartout */
.passepartout {
	position: relative;
	float: left;
	
	width: 160px;
	height: 160px;
	margin: var(--d1);
	
	box-shadow: var(--bs);
	border: 5px solid var(--c2);
	cursor: pointer;
}
.passepartout-cont {
	position: relative;
	width: 100%;
	height: 100%;
	border: 10px solid rgb(240,230,220);
}
.passepartout::after,
.passepartout-cont::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	
	box-shadow: 0 0 10px rgba(0,0,0,0.6) inset;
}
.passepartout-cont img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Vektor-Frame */
.vector-frame {
	position: relative;
	float: left;
	
	width: 180px;
	height: 220px;
	
	margin: var(--d1);
	padding: var(--d2);
	
	background: rgb(240,230,220);
	border: 1px solid var(--c1);
	box-shadow: var(--bs);
	
	cursor: pointer;
	z-index: 0;
}
.vector-frame::before,
.vector-frame::after {
	/* Karierte Linien */
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	
	background: repeating-linear-gradient(
		to right,
		transparent,
		transparent 15px,
		rgb(0,0,0) 16px
	);
	
	z-index: -1;
}
.vector-frame::after {
	background: repeating-linear-gradient(
		to bottom,
		transparent,
		transparent 15px,
		rgb(0,0,0) 16px
	);
}
.vector-frame-head {
	height: 50px;
	text-align: right;
	
	padding: var(--d1);
	
	background: rgb(240,230,220);
	border: 1px solid var(--c1);
}
.vector-frame-head p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.vector-frame-body {
	width: 100%;
	height: calc(100% - 50px - var(--d2));
	
	margin-top: var(--d2);
	
	object-fit: contain;
	border: 1px solid var(--c1);
	box-shadow: 0 0 5px rgba(0,0,0.5);
}
.vector-frame-body img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* Background-Texture */
.bg-texture {
	/* Element mit einer tile-basierten Hintergrund-Textur */
	position: relative;
	z-index: 0;
}
.bg-texture-tile {
	position: absolute;
	width: 16px; height: 16px;
	
	image-rendering: pixelated;
	background-repeat: repeat;	
	pointer-events: none;
	z-index: -1;
}
.bg-texture-tile.background {
	/* Alles mit einem Pixel Überlappung! */
	top: 15px; 
	left: 15px; 
	width: calc(100% - 30px); 
	height: calc(100% - 30px); 
}

.bg-texture-tile.top 	{ top: 0; left: 15px; width: calc(100% - 30px); }
.bg-texture-tile.left 	{ top: 15px; left: 0; height: calc(100% - 30px); }
.bg-texture-tile.right 	{ top: 15px; right: 0; height: calc(100% - 30px); }
.bg-texture-tile.bottom { bottom: 0; left: 15px; width: calc(100% - 30px); }

.bg-texture-tile.corner-tl { top: 0; left: 0; }
.bg-texture-tile.corner-tr { top: 0; right: 0; }
.bg-texture-tile.corner-bl { bottom: 0; left: 0; }
.bg-texture-tile.corner-br { bottom: 0; right: 0; }


/* ################################################## */
/* MEDIA QUERIES */
@media (hover: hover) and (pointer: fine) {
	/* Grundlegendes */
	a:hover { text-decoration: none; }
	
	/* Preview */
	#preview-close:hover {
		transform: translateY( calc(var(--d1) * -1) );
		box-shadow: var(--bs-hover);
	}
	
	/* Header */
	.nav-link:hover {
		color: var(--c1);
		text-decoration: none;
	}
	.nav-link:hover p {
		text-transform: uppercase;
	}
	
	/* Gruppenvorschau */
	.image-group-preview:hover img {
		opacity: 0.4;
	}
	.image-group-preview:hover [name="desc"] {
		display: block;
	}
	
	/* Image Vorschau Elemente */
	.polaroid:hover {
		transform: translateY( calc(var(--d1) * -1) );
		box-shadow: var(--bs-hover);
	}
	.photoshop:hover {
		transform: translateY( calc(var(--d1) * -1) );
		box-shadow: var(--bs-hover);
	}
	.passepartout:hover {
		transform: translateY( calc(var(--d1) * -1) );
		box-shadow: var(--bs-hover);
	}
	.vector-frame:hover {
		transform: translateY( calc(var(--d1) * -1) );
		box-shadow: var(--bs-hover);
	}
}
@media only screen and (max-width: 800px) {
	
	/* Font Sizes */
	*, *:before, *:after {
		font-size: 11pt;
	}
	h1, h1 * { font-size: 32pt; }
	h2, h2 * { font-size: 24pt; }
	h3, h3 * { font-size: 18pt; }
	h4, h4 * { font-size: 12pt; }
	h5, h5 * { font-size: 11pt; }
	
	#left {
		float: none;
		width: 100%;
		
		background: var(--c2);
	}
	#opener { display: none; }
	#nav::after {
		content: '';
		display: table;
		clear: both;
	}
	.nav-link {
		float: left;
		width: 50%;
	}
	#content {
		float: none;
		width: 100%;
		margin: 0;
		margin-top: var(--d2);
	}
}
@media only screen and (max-width: 500px) {
	/* Font Sizes */
	*, *:before, *:after {
		font-size: 10pt;
	}
	h1, h1 * { font-size: 24pt; }
	h2, h2 * { font-size: 18pt; }
	h3, h3 * { font-size: 14pt; }
	h4, h4 * { font-size: 12pt; }
	h5, h5 * { font-size: 10pt; }
	
	#main {
		width: 100%;
		background: transparent;
		box-shadow: none;
		border: none;
		margin: 0;
	}
	
	.nav-link {
		float: none;
		width: 100%;
	}
	
	.block {
		padding: var(--d3);
	}
	
	/* Bilder-Previews */
	.polaroid {
		width: 100px;
		height: 140px;
		padding: var(--d1);
	}
	
	/* Photoshop */
	.photoshop {
		width: 100px;
		height: 100px;
		padding-left: 0;
	}
	.photoshop::before {
		display: none;
	}
	.photoshop-head {
		border-left: 0;
	}
	.photoshop-body {
		padding: 0;
		border-left: 0;
	}
	.photoshop-body img {
		object-fit: cover;
	}
	
	/* Passepartout */
	.passepartout {
		width: 100px;
		height: 100px;
	}
	
	/* Vector Frame */
	.vector-frame {
		width: 100px;
		height: 110px;
		padding: var(--d1);
	}
	.vector-frame-head {
		height: 25px;
	}
	.vector-frame-head [name="created"] {
		display: none;
	}
	.vector-frame-body {
		margin-top: var(--d1);
		height: calc(100% - 25px - var(--d1));
		box-shadow: none;
	}
}