* { margin: 0; padding: 0; font-family: sans-serif; color: #ffffff; }
		h1 { text-align: center; margin: 20px; }
        p, h1 { text-shadow: 1px 1px 3px rgba(0,0,0,0.5); color: white; }

        p {
            font-size: 1.2rem;       /* Etwas größer als Standard */
            line-height: 1.2;        /* Mehr Zeilenabstand füllt die vertikale Fläche */
            letter-spacing: 0.5px;   /* Mehr Platz zwischen Buchstaben wirkt edel */
            max-width: 800px;        /* Verhindert, dass Zeilen zu lang und dünn werden */
            margin: 0 auto 20px auto;/* Zentriert den Textblock */
        }

		body {
            backdrop-filter: blur(2px) brightness(1.0); /* Macht es weicher und minimal dunkler */
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
            background-color: #000000;
			background-attachment: fixed;
			padding-left: 40px;
			padding-right: 40px;
		}
        
        article#a_text {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(0px);
            padding: 20px;
			border-left:   0px solid #dadada;
			border-right:  0px solid #dadada;
			border-bottom: 1px solid #dadada;
			border-top:    1px solid #dadada;
			border-radius: 0px;
            margin: 20px;
            display: flex;
            flex-direction: column;   /* Sorgt dafür, dass der Textfluss logisch bleibt */
            justify-content: center;  /* Das ist die vertikale Zentrierung */
        }

        header, main, footer {
            flex: 1; /* Jeder nimmt sich den gleichen Anteil am verfügbaren Platz */
            display: flex; /* Optional: Um die Inhalte innerhalb der Blöcke wieder zu zentrieren */
            flex-direction: column;
            justify-content: center; /* Zentriert Inhalt vertikal */
            align-items: center;     /* Zentriert Inhalt horizontal */
        }

		footer {
			/* margin-top: auto; */
			gap: 20px;
            border: 0px solid #000;
            flex-direction: row;
            justify-content: center; /* Zentriert Inhalt vertikal */
            align-items: center;     /* Zentriert Inhalt horizontal */
		}

		.footer-link {
		        color: #808080;
        		text-decoration: none;
        		font-family: sans-serif;
				font-size: 0.7em;
        		transition: 0.3s;
                margin-bottom: 3px;
		 }

		.grid-links:hover, .footer-link:hover {
			color: #808080;
			text-shadow: 0px 0px 8px rgba(0, 0, 0, 1.0);
			text-decoration: none;
			transform: scale(0.9);
		}

		.pair {
    		display: flex;
			flex-direction: column; /* Zaubert das zweite Wort unter das erste */
			font-size: 1.1rem;
			line-height: 1.2;
			text-transform: uppercase; /* "marketing-krasser"  */
			letter-spacing: 1px;
			border-left: 1px solid #dadada;
			border-bottom: 0px solid #dadada;
			align-items: flex-start;
			text-align: center;
			gap: 0px;
			margin: 14px;
			padding-left: 10px;
		}

		.pair-info {
    		display: flex;
			flex-direction: column; /* Zaubert das zweite Wort unter das erste */
			font-size: 1.2rem;
			line-height: 1.2;
			letter-spacing: 1px;
			border-left: 0px solid #dadada;
			border-bottom: 0px solid #dadada;
			align-items: flex-start;
			text-align: justify;
			hyphens: auto;      /* Trennt Wörter automatisch am Zeilenende */
    		lang: de;
			gap: 0px;
			margin: 14px;
			padding-left: 10px;
		}


		.pair-liner {
			display: flex;
			flex-direction: row;
			border: 0px solid #ff0000;
		}

		.word-grid {
			min-width: 320px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			border: 0px solid #ffffff;
		}

		.grid-links {
			text-decoration: none;
			color: #ffffff;
       		transition: 0.3s;
		}

		@font-face {
		    font-family: 'JB Mono'; /* Ein Name deiner Wahl */
			src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'LBC'; /* Ein Name deiner Wahl */
			src: url('fonts/LibreBarcode128Text-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Warnes'; /* Ein Name deiner Wahl */
			src: url('fonts/Warnes-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'CairoPlay';
    		src: url('fonts/CairoPlay-VariableFont_slnt,wght.ttf') format('truetype');
    		font-weight: 500; /* Der Bereich der variablen Stärke */
    		font-style: oblique -11deg 11deg; /* Der Bereich der Neigung */
		}

		@font-face {
		    font-family: 'Zilla'; /* Ein Name deiner Wahl */
			src: url('fonts/ZillaSlabHighlight-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Play'; /* Ein Name deiner Wahl */
			src: url('fonts/PlaywriteDEGrundGuides-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Fast'; /* Ein Name deiner Wahl */
			src: url('fonts/FasterOne-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Bitcount'; /* Ein Name deiner Wahl */
			src: url('fonts/BitcountGridDouble-VariableFont_CRSV\,ELSH\,ELXP\,slnt\,wght.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Bungee'; /* Ein Name deiner Wahl */
			src: url('fonts/BungeeHairline-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'King'; /* Ein Name deiner Wahl */
			src: url('fonts/LovedbytheKing-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Wave'; /* Ein Name deiner Wahl */
			src: url('fonts/Wavefont-VariableFont_ROND\,YELA\,wght.ttf') format('truetype');
			font-weight: normal;
			/* font-weight: 500; */
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Flower'; /* Ein Name deiner Wahl */
			src: url('fonts/IndieFlower-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Michroma'; /* Ein Name deiner Wahl */
			src: url('fonts/Michroma-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Racing'; /* Ein Name deiner Wahl */
			src: url('fonts/RacingSansOne-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'Drag'; /* Ein Name deiner Wahl */
			src: url('fonts/62Dragz-vmAp9.otf') format('opentype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'csport'; /* Ein Name deiner Wahl */
			src: url('fonts/Colorsportdemo-R9Gmo.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		@font-face {
		    font-family: 'raceline'; /* Ein Name deiner Wahl */
			src: url('fonts/Racerlinedemo-YqWg8.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap; /* Verhindert, dass Text unsichtbar ist, während die Schrift lädt */
		}

		.console-font {
			font-family: 'JB-Mono', monospace;
			font-size: 0.9em; /* Monospace wirkt oft größer, daher etwas kleiner stellen */
			color: #ffffff;
			text-decoration: none;
			letter-spacing: 0.00em; 
		}

		.console-font::after {
			content: '';
			display: inline-block;
			width: 0.5em;   /* Ein schöner, quadratischer Block */
			height: 1.0em;
			background-color: #ffffff; /* Dein Wiesengrün */
			margin-left: 0px;
			vertical-align: middle;
			
			/* sanfte Animation */
			animation: cursorPulse 2s infinite;
		}

		.console-font-back {
			font-family: 'JB-Mono', monospace;
			font-size: 0.9em; /* Monospace wirkt oft größer, daher etwas kleiner stellen */
			color: #ffffff;
			text-decoration: none;
			letter-spacing: 0.00em; 
		}

		@keyframes cursorPulse {
			0%, 40% { opacity: 0; }		/* Pause */
			40%, 70% { opacity: 1; }		/* Cursor sichtbar */
			70%, 100% { opacity: 0; }	/* Pause */
		}

		@media (max-width: 950px) {
			html { font-size: 100%; }
			section { flex-direction: column; }
			footer { flex-direction: row; text-align: center; align-items: flex-end; justify-content: space-around; }
			.footer-link { margin-bottom: 3px;  }
			.responsive-image { max-width: 70%; max-height:70%; }
			.word-grid {flex-direction: column; text-align: left; align-items: center; justify-content: space-around; }
			.pair-liner {flex-direction: column; }
			.pair_deep {flex-direction: row; }
			.pair-info { font-size: 0.8rem; }
			p { font-size: 0.9rem; line-height: 1.0; letter-spacing: 0px; }
			article#a_text {
							border-left:   1px solid #dadada;
							border-right:  1px solid #dadada;
							border-bottom: 0px solid #dadada;
							border-top:    0px solid #dadada;
			}
		}

		.responsive-image {
			object-fit:contain;
			width: 100%;
			height: auto;
			max-width:300px;
			max-height:300px;
			clip-path: circle(50%);
			filter: hue-rotate(0deg);
		}

/* Container für Effekte: */
		.logo-animation-container {
			position: relative;
			display: grid; /* Stapelt Kinder automatisch übereinander, wenn man ihnen die gleiche Area gibt */
			place-items: center;
				/* clip-path: circle(40%); */
				/* min-height: 250px; */
		}

/* Effekt Slideshow: */
		.fade {
			grid-area: 1 / 1; /* Beide Bilder belegen die erste Zeile/Spalte -> Übereinander */
			width: 100%;
			max-width: 400px;
			opacity: 0;
			animation: crossfade 15s infinite;
		}

		@keyframes crossfade {
			15%, 30% { opacity: 1; } /* Sichtbar-Phase */
			0%, 45%, 100% { opacity: 0; } /* Unsichtbar-Phase */
		}

/* Effekt Glühen: */
		.noglow {
			grid-area: 1 / 1; /* Beide Bilder belegen die erste Zeile/Spalte -> Übereinander */
			width: 100%;
			max-width: 400px;
			opacity: 1;
		}
		
		.glow {
			grid-area: 1 / 1; /* Beide Bilder belegen die erste Zeile/Spalte -> Übereinander */
			width: 100%;
			max-width: 400px;
			opacity: 1;
			animation: pulseglow 6s infinite;
		}

		@keyframes pulseglow {
			0%, 90% { opacity: 1; } /* Sichtbar-Phase */
			90%, 100% { opacity: 0; } /* Unsichtbar-Phase */
		}

/* Effekt Autofokus + Shutter: */
		.cam-autofocus {
			grid-area: 1 / 1; /* Beide Bilder belegen die erste Zeile/Spalte -> Übereinander */
			width: 100%;
			max-width: 400px;
			filter: blur(0px);
			animation: autofocus-search 10s ease-in-out infinite;
			}

		@keyframes autofocus-search {
		0% {
			filter: blur(2px); /* Start: Leicht unscharf */
		}
		5% {
			filter: blur(10px); /* Sucht: Sehr unscharf */
		}
		11% {
			filter: blur(0px); /* Findet Schärfe: Scharf */
		}
		13% {
			filter: blur(3px); /* Hunting: Schießt kurz drüber (wieder unscharf) */
		}
		16% {
			filter: blur(0px); /* Finaler Fokus: Perfekt scharf */
		}
		100% {
			filter: blur(0px); /* Hält die Schärfe für eine Weile */
		}
		}

		.cam-shutter {
			grid-area: 1 / 1; /* Beide Bilder belegen die erste Zeile/Spalte -> Übereinander */
			width: 100%;
			max-width: 400px;
			opacity: 0;
			animation: shutter 10s infinite;
			}
		
		@keyframes shutter {
			0%, 3% { opacity: 1; } /* Sichtbar-Phase */
			3%, 100% { opacity: 0; } /* Unsichtbar-Phase */
		}

/* Effekt Farbwechsel: */

		.color-change {
			will-change: filter, transform;
			width: 100%;
			max-width: 400px;
			opacity: 1;
			animation: color-shift 6s ease-in-out infinite;
			}

		@keyframes color-shift {
			0%    { filter: hue-rotate(0deg); }
			2.8%  { filter: hue-rotate(10deg); }
			5.6%  { filter: hue-rotate(20deg); }
			8.3%  { filter: hue-rotate(30deg); }
			11.1% { filter: hue-rotate(40deg); }
			13.9% { filter: hue-rotate(50deg); }
			16.7% { filter: hue-rotate(60deg); }
			19.4% { filter: hue-rotate(70deg); }
			22.2% { filter: hue-rotate(80deg); }
			25.0% { filter: hue-rotate(90deg); }
			27.8% { filter: hue-rotate(100deg); }
			30.6% { filter: hue-rotate(110deg); }
			33.3% { filter: hue-rotate(120deg); }
			36.1% { filter: hue-rotate(130deg); }
			38.9% { filter: hue-rotate(140deg); }
			41.7% { filter: hue-rotate(150deg); }
			44.4% { filter: hue-rotate(160deg); }
			47.2% { filter: hue-rotate(170deg); }
			50.0% { filter: hue-rotate(180deg); }
			52.8% { filter: hue-rotate(190deg); }
			55.6% { filter: hue-rotate(200deg); }
			58.3% { filter: hue-rotate(210deg); }
			61.1% { filter: hue-rotate(220deg); }
			63.9% { filter: hue-rotate(230deg); }
			66.7% { filter: hue-rotate(240deg); }
			69.4% { filter: hue-rotate(250deg); }
			72.2% { filter: hue-rotate(260deg); }
			75.0% { filter: hue-rotate(270deg); }
			77.8% { filter: hue-rotate(280deg); }
			80.6% { filter: hue-rotate(290deg); }
			83.3% { filter: hue-rotate(300deg); }
			86.1% { filter: hue-rotate(310deg); }
			88.9% { filter: hue-rotate(320deg); }
			91.7% { filter: hue-rotate(330deg); }
			94.4% { filter: hue-rotate(340deg); }
			97.2% { filter: hue-rotate(350deg); }
			100%  { filter: hue-rotate(360deg); }
			}