/* style.css */

    body {
      background-color: #8888; /* Seiten Hintergrund */
	  font-family: Arial, sans-serif;
	  font-weight: normal; /* Setzt das Schriftgewicht auf normal (nicht fett) */
    }
	
	
		:root { 
		--umschlagfarbe: #264ec2; /* Dunkelblauer Rahmen */
		--druckfarbe: #569ce3; 
	}
	
	
/* Medienabfrage für kleinere Bildschirme */
@media (max-width: 768px) {
		.table-cell {
        flex: 1 100%; /* Spalten nehmen auf kleineren Bildschirmen die volle Breite ein */
		}	

		.responsive-table-container {
			border: none; /* Entfernt den blauen Rahmen auf sehr kleinen Geräten */
			border-radius: 0;
		}
	}

	
	.responsive-table-container {
		width: 90%;
		border: 16px solid var(--umschlagfarbe); /* Dunkelblau */

		border-radius: 18px; /* Abgerundete Ecken */
		box-sizing: border-box; /* Rahmen wird in Breite und Höhe einbezogen */
		background-color: white; /* Hintergrund für den äußeren Container */
		display: flex; /* Flexbox für responsive Layout */
		flex-wrap: wrap; /* Ermöglicht das Umbrechen von Spalten auf kleineren Geräten */
	}

	.table-row {
		width: 100%;
		display: flex;
		flex-wrap: wrap; /* Ermöglicht das Umbrechen von Spalten auf kleineren Geräten */
	}

	.table-cell {
		flex: 1; /* Jede Zelle nimmt gleich viel Platz ein */
		padding: 30px;

		box-sizing: border-box;
		min-height: 400px; /* Mindesthöhe für bessere Darstellung */
		display: flex;
		flex-direction: column;
		justify-content: top;

	}

	.left-column {
		background-color: white;
		color: #333; /* Dunklerer Text für bessere Lesbarkeit */

	}

	.right-column {
		background: linear-gradient(90deg,rgba(221, 221, 221, 1) 0%, rgba(255, 255, 255, 1) 9%);
		color: #333;
		padding-left: 44px;
	}



/* Kopfzeilen */

	.kopfzeile-links {
		display: grid; /* Aktiviert CSS Grid */
		grid-template-columns: 100px auto auto; /* Eine feste, eine flexible und eine inhaltsabhängige Spalte */

		width: 100%; /* Nimmt die gesamte verfügbare Breite ein */
		text-align: start; /* Richtet den Text linksbündig aus */
	
		text-align: top;
		vertical-align: top;
	}

	.kopfzeile-rechts {
		display: grid; /* Aktiviert CSS Grid */
		grid-template-columns: 1fr auto; /* Eine feste, eine flexible und eine inhaltsabhängige Spalte */

		width: 100%; /* Nimmt die gesamte verfügbare Breite ein */
		text-align: start; /* Richtet den Text linksbündig aus */
	
		text-align: top;
		vertical-align: top;
	}


	.column {
		padding: 0px; /* Optionaler Abstand innerhalb der Spalten */
		border: 1px solid black; /* Optional: Zur besseren Visualisierung der Spalten */
	}

	.column p {
		text-align: start; /* Richtet den Text innerhalb des Absatzes nach oben aus */

	}


	.kopf-datum {
		color: var(--druckfarbe);
		font-weight: bold;
		font-size: 60px;
		margin-top: -60px;
	}

	.kopf-monat {
		color: var(--druckfarbe);
		font-weight: normal;
		font-size: 20px;
		margin-top: -12px;
	}

	.kopf-wochentag {
		color: var(--druckfarbe);
		font-weight: normal;
		font-size: 20px;
		margin-top: -12px;
	}

	.kopf-jahr {
		color: var(--druckfarbe);
		font-weight: bold;
		font-size: 60px;

		margin-top: -60px;
	}

	.hashtags {
		color: var(--druckfarbe);
		font-weight: normal;
		font-size: 18px;
	}

	.fussemty {
		color: var(--druckfarbe);
		font-weight: normal;
		font-size: 18px;
		margin-top: auto; 
	}

	.birthday2 {
		color: var(--druckfarbe);
		font-weight: normal;
		font-size: 18px;
	}
	
	
.right-column .fussemty {
		position: relative;
        bottom: 0;          /* Platziert das Element am unteren Rand */
}



/* Linien */

	.linie-links-oben {
      background-color: var(--druckfarbe); /* Setzt die Farbe der Linie */
      height: 2px;          /* Setzt die Höhe der Linie */
      border: none;         /* Entfernt den Standardrand des Browsers */
      margin: 1em 0;        /* Beispiel: Fügt etwas Abstand hinzu */
	  margin-top: -35px;	/* Außenabstand (Margin) oberhalb eines Elements festlegt */
    }
	
	
    hr {
      background-color: var(--druckfarbe); /* Setzt die Farbe der Linie */
      height: 2px;           /* Setzt die Höhe der Linie */
      border: none;          /* Entfernt den Standardrand des Browsers */
	  
      margin: 1em 0;         /* Beispiel: Fügt etwas Abstand hinzu */
    }