/* ################################################## */
/* NACHTSCHICHT WEBSITE */

/* FONTS */

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

/* LCD */
@font-face {
  font-family: 'lcd';
  src: url('../media/fonts/lcd.otf');
  font-display: swap;
  font-weight: 100 1000;
}

/* Ubuntu Mono */
@font-face {
  font-family: 'ubuntu-mono';
  src: url('../media/fonts/ubuntu-mono.ttf');
  font-display: swap;
  font-weight: 100 1000;
}

/* ################################################## */
/* ROOT & GRUNDLEGENDES MARKUP */
:root {
	/* Farben */
	--c1: rgb(250,250,250);
	--c2: rgb(250,250,240);
	--c3: rgb(230,230,220);
	--c4: rgb(210,210,200);
	
	--ctxt: rgb(0,0,0);
	
	--ca1: rgb(0,0,150);
	--ca2: rgb(0,0,120);
	--ca3: rgb(180,0,0);
	--ca4: rgb(200,0,0);
	
	--fade1: linear-gradient(var(--ca1), var(--ca2));
	
	/* Windows 95 Fenster Farben */
	--win95-c1: rgb(50,50,50);
	--win95-c2: rgb(170,170,170);
	--win95-c3: rgb(200,200,200);
	--win95-c4: rgb(240,240,240);
	--win95-c5: rgb(0,0,100); /* Blau */
	
	--win95-border-1: /* Herausragend */
		var(--win95-c4)
		var(--win95-c1)
		var(--win95-c1)
		var(--win95-c4);
	
	--win95-border-2: /* Inset */
		var(--win95-c1)
		var(--win95-c4)
		var(--win95-c4)
		var(--win95-c1);
	
	/* Größen */
	--d1: 5px;
	--d2: 10px;
	--d3: 20px;
	--d4: 40px;
	--dh: 100vh;
	
	--header-height: 60px;
	
	/* Transitions */
	--t1: 0.2s;
	--t2: 0.4s;
	--t3: 0.6s;
	
	/* Sonstiges */
	--br: 8px;
	--bs: 0 0 10px rgba(0,0,0,0.5); /* Box-Shadow */
	--ts: 0 0 10px var(--c4); /* Text-Shadow */
}
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-family: 'arial';
	font-style: normal; font-weight: normal;
	font-size: 11pt;
	
	margin: 0; padding: 0;
	color: var(--ctxt);
	line-height: 1.4em;
	font-variant-ligatures: none;
	hyphens: auto;
}

/* Header */
h1, h1 * { font-size: 32pt; font-family: 'arial'; 	}
h2, h2 * { font-size: 24pt; font-family: 'arial'; 	color: var(--ca4); font-weight: 300; }
h3, h3 * { font-size: 20pt; font-family: 'arial'; 	color: var(--ca4); font-weight: 400; }
h4, h4 * { font-size: 18pt; font-family: 'arial'; 	font-weight: 400; }
h5, h5 * { font-size: 16pt; font-family: 'arial'; 	font-weight: 400; }
h6, h6 * { font-size: 14pt; font-family: 'arial'; 	font-weight: 400; }
h1, h2, h3, h4, h5, h6 { 
	hyphens: none; 
	text-align: center;
}

b, b * { font-family: 'arial-bold'; }
i, i * { font-family: 'arial-italic'; }
b i, i b, b i *, i b * { font-family: 'arial-bold-italic'; }

em { font-variant: small-caps; }

a { color: rgb(0,0,150); }

hr {
	width: 100%;
	height: 1px;
	background: var(--ctxt);
	border: none;
}
img {
	max-width: 100%;
	display: block;
	user-select: none;
	pointer-events: none;
}

ul {
	margin-left: 20px;
}

/* ################################################## */
/* Z-INDEXES */
#sec-conn-err { z-index: 200; }
#popup-cont { z-index: 100; }
#header { z-index: 99; }

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

#main {
	display: flex;
	flex-direction: column;
}
#header {
	display: flex;
	flex-direction: column;
	width: 100%;
}
#header-logo {
	width: 200px;
	height: 120px;
	margin-bottom: -120px;

	padding: var(--d2) var(--d3);
	cursor: pointer;
}
#header-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
}

#nav {
	display: flex;
	flex-direction: column;
	justify-content: end;
	
	width: 100%;
	height: 120px;
	
	pointer-events: none;
}
.nav-row {
	display: flex;
	align-items: end;
	justify-content: center;
	
	height: 40px;
	margin-bottom: -10px;
}
.nav-link {
	display: block;
	
	padding: var(--d1);
	padding-bottom: 20px;
	
	background-color: var(--c2);
	
	border: 1px solid var(--ctxt);
	border-bottom: 0;
	border-radius: var(--br) var(--br) 0 0;
	
	pointer-events: auto;
}
.nav-link.active {
	background-color: var(--c3);
}

#taskbar {
	display: flex; gap: var(--d2);
	justify-content: end;
	align-items: center;
		
	border: solid var(--ctxt);
	border-width: 1px 0;
	
	padding: 3px var(--d3);
	background: linear-gradient(
		to bottom,
		var(--c1),
		var(--c4)
	);
}
#taskbar * { font-size: 9pt; }

#ticker {
	position: relative;
	
	background-color: var(--ca2);
	padding: var(--d1);
	z-index: 0;
}
#ticker::before, #ticker::after {
	content: '';
	position: absolute;
	top: 0;
	
	width: 5%;
	height: 100%;
	z-index: 1;
}
#ticker::before {
	left: 0;  
	background: linear-gradient(
		to right, 
		var(--ca2) 0 20%,
		transparent
	); 
}
#ticker::after { 
	right: 0;  
	background: linear-gradient(
		to left, 
		var(--ca2) 0 20%,
		transparent
	); 
}
#ticker p {
	margin: 0 var(--d1);
	color: var(--c1);
	white-space: nowrap;
}

#page {
	display: flex;
	justify-content: center;
	gap: var(--d3);
	
	padding: var(--d4) var(--d2);
	background-color: var(--c2);
	
	width: 100%;
}
#left, #right {
	width: 220px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--d3);
}
#center {
	flex: 1 1 0;
	min-width: 0;
	max-width: 800px;
	
	display: flex; gap: var(--d3);
	flex-direction: column;
}
#center section {
	padding: var(--d2);
	box-shadow: var(--bs);
	background-color: var(--c1);
}

#footer {
	display: flex;
	flex-direction: column;
		
	padding: var(--d4) 0;
	background: var(--c2);
}
#footer div {
	text-align: center;
}


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

/* Keine sichere Verbindung */
#sec-conn-err {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: var(--dh);
	
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--c1);
	/* border: 5px solid rgb(0,0,0); */
}
#sec-conn-err.inv {
	display: none;
	opacity: 0;
	visibility: hidden;
}
#sec-conn-err-cont {
	display: flex;
	flex-direction: column;
	gap: var(--d1);
	
	max-width: 500px;
	
}
#sec-conn-err-cont * {
	font-family: 'ubuntu-mono';
	hyphens: none;
}
#sec-conn-err-cont [name='head'] {
	display: flex; gap: var(--d3);
	align-items: center;
	
	padding: var(--d2);
	
	border-bottom: 1px solid var(--ctxt);
}
#sec-conn-err-cont [name='head'] img {
	width: 80px; height: 80px;
	object-fit: contain;
}
#sec-conn-err-cont [name='head'] h2 {
	color: var(--ctxt);
	text-align: left;
	font-weight: bold;
	line-height: 1.2em;
}
#sec-conn-err-cont [name='body'] {
	display: flex;
	flex-direction: column;
	gap: var(--d2);
	
	padding: var(--d2);
}
#sec-conn-err-cont [name='body'] label {
	display: flex;
	align-items: center;
	gap: var(--d1);
}

/* Popups */
#popup-cont {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: var(--dh);
	
	pointer-events: none;
}

.popup {
	position: absolute;
	
	display: flex;
	flex-direction: column;
	
	width: 400px;
	
	padding: 2px;
	border: 2px solid;
	border-color: var(--win95-border-1);
	background-color: var(--win95-c3);
	
	box-shadow: var(--bs);
	
	transition: opacity var(--t1), transform var(--t1);
	opacity: 1;
	z-index: 0;
	pointer-events: auto;
}
.popup.closed {
	opacity: 0;
	transform: scale(0.8);
}
.popup-head {
	display: flex; gap: var(--d2);
	align-items: center;
	
	height: 26px;
	padding: 2px;
	
	background-color: var(--win95-c3);
	
	user-select: none;
}
.popup-head [name='icon'] {
	width: 22px; height: 22px;
	object-fit: contain;
}
.popup-head-btn-cont {
	display: flex; gap: 2px;
	margin-left: auto;
}
.popup-head-btn {
	position: relative;
	height: 22px; width: 22px;
	
	background-color: var(--win95-3);
	border: 2px solid;
	border-color: var(--win95-border-1);
}
.popup-head-btn:active {
	border-color: var(--win95-border-2);
}
.popup-head-btn.minimize-btn::after {
	content: ''; position: absolute;
	left: 50%; bottom: 2px;
	transform: translateX(-50%);
	width: 85%; height: 2px;
	background-color: var(--ctxt);
}
.popup-head-btn.close-btn::after {
	content: '✖'; position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	color: var(--ctxt);
}
.popup-body {
	position: relative;
	min-height: 40px;
	
	/* background-color: var(--c1); */
	border: 2px solid;
	border-color: var(--win95-border-2);
	
	user-select: auto;
	overflow: hidden;
}

#popup-newsletter {
	display: flex;
	flex-direction: column;
	
	border: 10px solid rgb(0,255,50);
}
#popup-newsletter [name='head'] {
	margin: var(--d2);
	padding: var(--d2);
	background-color: rgb(200,255,50);
	border: 5px dashed red;
}
#popup-newsletter [name='body'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--d2);
	
	padding: var(--d2);
	background-color: rgb(255,100,100);
	box-shadow: var(--bs) inset;
}
#popup-newsletter [name='body'] * {
	text-align: center;
}
#popup-newsletter [name='body'] a {
	padding: var(--d2);
	background-color: rgb(0,255,255);
	border: 5px solid rgb(0,100,100);
	border-radius: 15px;
	box-shadow: var(--bs);
	color: rgb(0,0,0);
}

#popup-stellen {
	padding: var(--d4);
	z-index: 1;
}
#popup-stellen [name='bg'] {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -1;
}
#popup-stellen [name='bg'] img {
	width: 100%; height: 100%;
	object-fit: cover;
}
#popup-stellen [name='cont'] {
	padding: var(--d3);
	border-radius: 20px;
	background: rgba(0,0,0,0.5);
}
#popup-stellen [name='cont'] * {
	color: rgb(255,255,255);
}

#popup-nachtschicht {
	display: flex;
	flex-direction: column;
}
#popup-nachtschicht [name='head'] {
	padding: var(--d2);
}
#popup-nachtschicht [name='head'] * {
	text-align: center;
}
#popup-nachtschicht [name='body'] {
	padding: var(--d2);	
}
#popup-nachtschicht [name='body'] img {
	border-radius: 5px;
	border: 1px solid var(--ctxt);
}

/* Darkmode Button */
#darkmode-btn {
	padding: 0 4px;
	
	border: 4px solid rgb(200,200,200);
	border-radius: 10px;
	cursor: pointer;
}
#darkmode-btn.btn-light {
	color: rgb(0,0,0);
	background-color: rgb(255,255,255);
	border-color: rgb(200,200,200);
}
#darkmode-btn.btn-dark {
	color: rgb(255,255,255);
	background-color: rgb(80,80,80);
	border-color: rgb(0,0,0);
}
#darkmode-btn.all-dark {
	color: var(--ctxt);
	background-color: rgb(80,80,80);
	border-color: rgb(0,0,0);
}
#darkmode-btn.all-light {
	color: var(--ctxt);
	background-color: rgb(255,255,255);
	border-color: rgb(200,200,200);
}

/* Uhr Widget */
#clock {
	flex-shrink: 0;
	width: 180px;
	height: 180px;
	
	border-radius: 50%;
	border: 5px solid var(--ctxt);
	
	background: 
		radial-gradient(
			circle, 
			rgb(255,255,255) 50%, 
			rgb(180,180,180)
		);
}
#clock-face {
	position: relative;
	width: 100%; 
	height: 100%;
}
.clock-num {
	position: absolute;
	transform: translate(-50%, -50%);
}
.clock-hand {
	position: absolute;
	width: 3px;
	background: var(--ctxt);
	transform-origin: bottom;
}
.clock-hand.hour {
	height: 25%;
	left: 50%;
	top: 25%;
}
.clock-hand.minute {
	height: 35%;
	left: 50%;
	top: 15%;
}
.clock-hand.second {
	width: 2px;
	height: 35%;
	
	left: 50%;
	top: 15%;
	
	background: red;
}

/* Produktsuche */
#product-search {}
#product-search-result { 
	color: red; 
	hyphens: none;
}

/* Besucherzähler */
#view-counter {
	
}
#view-counter-num-cont {
	display: flex; gap: 2px;
	
	width: 200px;
	height: 60px;
	
	background-color: rgb(50,50,50);
	box-shadow: 10px var(--ctxt) inset;
	
	padding: var(--d1);
}
.view-counter-num {
	flex: 1 0 0;
	height: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background: linear-gradient(
		to bottom,
		rgb(120,120,120),
		rgb(80,80,80)
	);
	
	font-family: 'lcd';
	box-shadow: 10px var(--ctxt);
	color: var(--c1);
}

/* Datumsanzeige */
#date-display {}

/* Wetteranzeige */
#weather-display {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	
	width: 100%;
	
	padding: var(--d2);
	border: solid var(--ctxt);
	border-width: 1px 0;
}
#weather-display * { hyphens: none; text-align: center; }

/* Newsletter abonnieren */
#newsletter-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	padding: var(--d3);
	border: 6px solid;
	border-radius: 10px;
	
	animation: newsletter-blink 2s steps(2, jump-none) infinite;
	text-decoration: none;
}
#newsletter-btn p {
	font-family: 'lcd';
	font-size: 16pt;
	color: white;
	animation: newsletter-blink-text 2s steps(2, jump-none) infinite;
}
@keyframes newsletter-blink {
	from  	{ border-color: rgb(255,0,255); background: rgb(255,255,0); }
	to 		{ border-color: rgb(255,0,0); 	background: rgb(0,255,0); 	}
}
@keyframes newsletter-blink-text {
	from { color: rgb(255,0,255); }
	to { color: rgb(255,0,0); }
}

/* CEO-Zitat des Tages */
#qotd {
	display: flex; gap: var(--d2);
	flex-direction: column;
	
	padding: var(--d3);
	
	border: 2px solid var(--ca2);
	border-radius: 20px;
	background-color: var(--c1);
}
#qotd * {
	text-align: center;
	hyphens: none;
}

/* Motivationsposter */
#motivation-poster {
	position: relative;
	box-shadow: var(--bs);
	
	border: 3px solid var(--ctxt);
}
#motivation-poster [name='text'] {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	padding: var(--d2);
}
#motivation-poster [name='text'] p {
	text-align: center;
	color: white;
	text-transform: uppercase;
	text-shadow: 
		1px 1px 4px black,
		1px 1px 4px black;
		
	font-family: 'arial-black';
	hyphens: none;
}

/* YouTube & LinkedIn Link */
#youtube-link,
#linkedin-link {
	position: relative;
	
	display: flex; gap: var(--d2);
	flex-direction: column;
	align-items: center;
	
	padding: 20px;
	
	box-shadow: var(--bs);
	text-decoration: none;
	
	z-index: 0;
	overflow: hidden;
}
#youtube-link [name='conic'],
#linkedin-link [name='conic'] {
	position: absolute;
	top: -100%; left: -100%;
	width: 300%; height: 300%;
	
	background: rgb(150,150,150);
	z-index: -1;
}
#youtube-link [name='bg'],
#linkedin-link [name='bg'] {
	content: '';
	position: absolute;
	top: 8px; left: 8px;
	width: calc(100% - 16px); 
	height: calc(100% - 16px);
	
	background: linear-gradient(to bottom, var(--c1), var(--c3));
	border: 1px solid var(--ctxt);
	
	background-color: red;
	z-index: -1;
}
#youtube-link p,
#linkedin-link p {
	text-align: center;
}

/* Website im Aufbau */
#construction-banner {
	display: flex;
	flex-direction: column;
	
	border: 1px solid var(--ctxt);
}
#construction-banner-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	padding: var(--d3);
	
	background: linear-gradient(
		to bottom,
		rgb(80,80,80),
		rgb(40,40,40)
	)
}
#construction-banner-body * { color: white; }
.barrier-tape {
	display: flex;
	align-items: center;
	justify-content: center;
	
	padding: 5px;
	background:
		repeating-linear-gradient(
			45deg,
			rgb(0,0,0) 10% 15%,
			rgb(255,255,0) 15% 20%
		);
}
.barrier-tape p { 
	color: red;
	padding: 2px 6px;
	background-color: yellow;
}

/* Kontaktformular */
#contact-form form {
	display: flex; gap: var(--d1);
	flex-direction: column;
}
#contact-form label {
	width: 100%;
}
#contact-form [name='msg'] { width: 100%; }
#contact-form [name='error'] { color: red; }

/* Stellenanzeige */
.job {
	display: flex; gap: var(--d3);
	flex-direction: column;
}
.job-title {
	background-color: var(--c3);
	padding: var(--d1) var(--d3);
}
.job-title h3 {
	text-align: left;
}

/* Nutzerrezensionen */
.review {
	display: flex;
	flex-direction: column;
	
	padding: 0 40px; /* Platz für Dia-Buttons */
	height: 200px;
	
	border: 2px solid var(--ca2);
	background-color: var(--c3);
}
.review p { width: 100%; hyphens: none; }
.review [name='name'] {
}
.review [name='date'] {
	text-align: right;
}
.review [name='text'] {}

/* Gästebuch */
#guestbook {
	display: flex; gap: var(--d2);
}
#guestbook > * {
	flex: 1 0 0;
	
	padding: var(--d2);
	background-color: var(--c1);
	box-shadow: var(--bs);
}
#guestbook-entries {
	display: flex;
	flex-direction: column;
	gap: 2px;
	
	max-height: 800px;
	overflow-y: scroll;
}
#guestbook-new-entry {
	display: flex;
	flex-direction: column;
	gap: var(--d2);
}
.guestbook-entry {
	display: flex;
	flex-direction: column;
	
	padding: var(--d1);
	
	background-color: var(--c2);
	border: 5px solid var(--c4);
}
.guestbook-entry [name='text'] {
	
}
.guestbook-entry [name='date'] {
	text-align: right;
	border-top: 1px solid var(--ctxt);
}

/* ################################################## */
/* GENERELLE ELEMENTE */

.box {
	display: flex;
	flex-direction: column;
	border-radius: var(--br);
	border: 1px solid var(--ctxt);
}
.box-head {
	padding: var(--d1);
	background: var(--fade1);
	border-radius: var(--br) var(--br) 0 0;
	
	border-bottom: 0;
}
.box-head.inv {
	background: var(--c1);
}
.box-head:not(.inv) * { color: var(--c1); }
.box-body {
	display: flex; gap: var(--d1);
	flex-direction: column;
	
	padding: var(--d1);
	background: var(--c1);
	border-radius: 0 0 var(--br) var(--br);
	
	border-top: 0;
}

/* Karussell */
.carousel {
	overflow: hidden;
}
.carousel-cont {
	display: flex;
	width: max-content;
	animation: scroll linear infinite;
}
@keyframes scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Diashows */
.with-autoskip {} .with-buttons {} .with-icons {} .fullscreen {}
.diashow {
	position: relative; 
	width: 100%;
	margin: var(--d2) 0;
	
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	
	overflow: hidden;
}
.diashow img { display: block; }
.diashow:not(.fullscreen) .dia img {
	width: auto; height: auto;
	max-width: 100%; max-height: 100%;
	border: 2px solid var(--ca);
	padding: var(--d1);
}
.diashow.fullscreen { 
	height: 100%; width: 100%; 
	margin: 0;
}
.diashow.fullscreen img {
	height: 100%; width: 100%;
	object-fit: cover;
}
.dia {
	position: absolute; 
	height: 100%; width: 100%;
	
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	gap: var(--d1);
	
	transition: visibility 3s, opacity 3s;
	visibility: hidden; opacity: 0; 
}
.dia.active {
	position: relative;
	visibility: visible; opacity: 1;
	transition-delay: 0;
}
.dia > * { 
	width: 100%; overflow: hidden;
	display: flex; 
	justify-content: center; align-items: center;
}
.dia-cont { }
.dia-desc { padding: 10px; }

.dia-btn-left, .dia-btn-right {
	position: absolute; 
	height: 30px; width: 30px;
	top: 50%; transform: translateY(-50%);

	background-color: rgba(0,0,0,0.7);
	color: white;
	
	cursor: pointer;
	z-index: 1;
}
.dia-btn-left 	{ left: 0; }
.dia-btn-right 	{ right: 0; }
.dia-btn-left::after, .dia-btn-right::after {
	content: ''; position: absolute;
	width: 40%; height: 40%;
	top: 50%; left: 50%;
	
	transform-origin: center, center;
	transform: translate(-35%, -50%) rotate(135deg);
	
	border: solid white; border-width: 0 3px 3px 0;
}
.dia-btn-right::after {
	transform: translate(-65%, -50%) rotate(-45deg);
}

.dia-icon-cont {
	/* Diashow Elemente werden in JS.diashow_setup geklont */
	width: 100%;
	display: flex; gap: 2px;
	justify-content: center;
	
	overflow: hidden;
}
.dia-icon-cont > div {
	width: 40px; height: 40px;
	filter: grayscale(1);
	overflow: hidden;
	cursor: pointer;
}
.dia-icon-cont > div > img {
	width: 100%; height: 100%;
	object-fit: cover;
}


/* T9-Eingabe */
.t9-input {
	display: flex; gap: 10px;
	flex-direction: column;
	align-items: center;
}
.t9-display {
	height: 200px;
	width: 100%;
	border: 1px solid black;
	
	box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;
}
.t9-keyboard {
	display: flex; gap: 2px;
	flex-direction: column;
}
.t9-keyboard.uppercase [name='keys'] {
	text-transform: uppercase;
}
.t9-keyboard-row {
	display: flex; gap: 2px;
}
.t9-button {
	width: 60px;
	height: 50px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	padding: 5px;
	border: 1px solid black;
	cursor: pointer;
	user-select: none;
}
.t9-button * { line-height: 20px; }
.t9-button [name='num'] 	{ font-size: 16pt; }
.t9-button [name='keys'] 	{ font-size: 10pt; }

/* ################################################## */
/* UNIVERSELLES STYLING */
.blink {
	/* Lässt das Element aufblinken */
	animation: blink 1s steps(5, start) infinite;
}
@keyframes blink {
	to { visibility: hidden; }
}

/* ################################################## */
/* MEDIA QUERIES */
@media (hover: hover) and (pointer: fine) {
	a:hover { text-decoration: none; }
	
	.nav-link:hover {
		padding: var(--d2);
		padding-bottom: 25px;
	}
	
	#youtube-link:hover,
	#linkedin-link:hover {
		transform: scale(1.1);
	}
	#youtube-link:hover [name='conic'],
	#linkedin-link:hover [name='conic'] {
		background: repeating-conic-gradient(
			  rgb(20,255,20) 0deg 10deg,
			  rgb(0,0,150) 10deg 20deg,
			  rgb(50,150,255) 20deg 30deg
		);
		animation: rotate-conic 10s linear infinite;
	}
	@keyframes rotate-conic {
		0% { transform: rotate(0); }
		100% { transform: rotate(360deg); }
	}
	
	/* #darkmode-btn:hover { */
		/* background-color: rgb(0,0,0); */
		/* border: 4px solid rgb(80,80,80); */
	/* } */
}
@media only screen and (max-width: 800px) {}