* { margin: 0; padding: 0; font-family: sans-serif; color: #ffffff; }
		h1 { text-align: center; }
        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;
		}
        
        article#a_text {
            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);
		}

		.responsive-image {
			object-fit:contain;
			width: 100%;
			height: auto;
			max-width:500px;
			max-height:500px;
		}

		.gallery-image {
			background: rgba(255, 255, 255, 0.1);
			height: auto;
			max-width: 300px;
			max-height:300px;
			padding: 3px;
			width: 100%;        /* Nutzt die volle Breite des Containers */
    		aspect-ratio: 16 / 9; /* Zwingt das Bild in ein Quadrat (oder 16/9, etc.) */
    		object-fit: contain;   /* Füllt das Quadrat aus, schneidet Ränder ab */
    		object-position: center; /* Zentriert das Motiv (wichtig bei Köpfen/Bäumen) */
    		border-radius: 0px;  /* Optional: ein wenig Abrundung passend zum Look */
			border: 0px solid #dadada;
		}

		.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;

			align-items: flex-start;
			text-align: center;
			gap: 0px;
			margin: 14px;
			padding-left: 10px;
			justify-content: right;
			border: 0px solid #0000ff;
		}

		.pair_deep {
			width: 100%;
			padding-top: 5px;
			display: inline;
			text-align: center;
			border: 0px solid #ff00d4;
		}


		.pair-liner {
			display: flex;
			flex-direction: row;
			border: 0px solid #ff0000;
			justify-content: right;
			width: 100%;
		}

		.word-grid {
			background: rgba(255, 255, 255, 0.1);
			min-width: 320px;
			display: flex;
			flex-direction: row;
			justify-content: right;
			align-items: center;
			width: 100%;
			height: 100%;
			border: 0px solid #179800;
		}

		.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 */
		}

		.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;
		}

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

		@media (max-width: 600px) {
			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; }
			.gallery-image { max-width: 300px; max-height:300px; }
			article#a_text {
							border-left:   1px solid #dadada;
							border-right:  1px solid #dadada;
							border-bottom: 0px solid #dadada;
							border-top:    0px solid #dadada;
			}
		}