body {
    background-color: #f4f1de; /* Ein sanfter Beige-Ton, um eine warme und einladende Atmosphäre zu schaffen */
    font-family: Georgia, 'Times New Roman', Times, serif; /* Eine klassische Schriftart, die gut zu der historischen und eleganten Stimmung des Textes passt */
    color: #3d405b; /* Ein dunkler Blauton für den Text, der gut lesbar ist und einen schönen Kontrast zum Hintergrund bietet */
    line-height: 1.6; /* Ein größerer Zeilenabstand für eine bessere Lesbarkeit */
    padding: 20px; /* Ein wenig Abstand zum Rand des Fensters, damit der Text nicht zu gedrängt wirkt */
    max-width: 800px; /* Begrenzt die Breite des Inhalts auf 800px */
    margin: 0 auto; /* Zentriert den Inhalt horizontal */
}

p img {
    max-width: 100%; /* Begrenzte die Breite des Bildes auf 100% des übergeordneten Elements */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
}

td {
    line-height: 1.6; /* Ein größerer Zeilenabstand für eine bessere Lesbarkeit */
    text-align: justify; /* Der Text wird links und rechts bündig ausgerichtet, um ein ordentliches und professionelles Erscheinungsbild zu schaffen */
    margin-bottom: 20px; /* Ein wenig Abstand zwischen den Absätzen, um den Text übersichtlicher zu gestalten */
}

p {
    text-align: justify; /* Der Text wird links und rechts bündig ausgerichtet, um ein ordentliches und professionelles Erscheinungsbild zu schaffen */
    margin-bottom: 20px; /* Ein wenig Abstand zwischen den Absätzen, um den Text übersichtlicher zu gestalten */
}

h1, h2, h3 {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; /* Eine elegante und klassische Schriftart für die Überschriften */
    color: #81b29a; /* Ein sanfter Grünton für die Überschriften, der gut zum restlichen Design passt und die Überschriften hervorhebt */
}

h1 {
    font-size: 2em; /* Die Hauptüberschrift ist größer als der restliche Text */
    margin-bottom: 20px; /* Ein wenig Abstand unter der Hauptüberschrift, um den Text übersichtlicher zu gestalten */
}

h2, h3 {
    font-size: 1.5em; /* Die Unterüberschriften sind etwas kleiner als die Hauptüberschrift, aber immer noch größer als der restliche Text */
    margin-bottom: 10px; /* Ein wenig Abstand unter den Unterüberschriften, um den Text übersichtlicher zu gestalten */
}

.user {
  color: blue;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 0.9em; 
  margin-left: 30px; 
}

.assistance {
  color: green;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 0.9em; 
  margin-left: 30px; 
}

.system {
  color: red;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 0.9em; 
  margin-left: 30px; 
}

.response {
  color: black;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 0.9em; 
  margin-left: 30px; 
}

.container {
    display: flex;
    flex-direction: column;
}

.text-column {
    order: 1;
    padding-right: 10px; /* Adjust the padding as needed */
}

.text-column2 {
    order: 1;
    padding-right: 10px; /* Adjust the padding as needed */
    width: 75%;
}

.image-column {
    order: 2;
    padding-top: 20px; /* Adjust the padding as needed */
    padding-left: 10px; /* Adjust the padding as needed */
}

.image-column2 {
    order: 2;
    padding-top: 20px; /* Adjust the padding as needed */
    padding-left: 10px; /* Adjust the padding as needed */
    width: 25%;
}

.image-column img {
    max-width: 100%; /* Limit image width to its container */
    max-height: 100%; /* Limit image height to its container */
}

.image-column2 img {
    max-width: 100%; /* Limit image width to its container */
    max-height: 100%; /* Limit image height to its container */
}

@media screen and (min-width: 1100px) {

    .container {
        flex-direction: row;
        font-size: 1em; /* Set font size to match body font size */
    }

	.text-column {
		width: 50%;
		padding-right: 20px; /* Adjust the padding as needed */
		padding-left: 0;
	}

	.text-column2 {
		width: 75%;
		padding-right: 20px; /* Adjust the padding as needed */
		padding-left: 0;
	}
	.image-column {
		width: 50%;
		padding-left: 20px; /* Adjust the padding as needed */
		padding-right: 0;
	}
	.image-column2 {
		width: 25%;
		padding-left: 20px; /* Adjust the padding as needed */
		padding-right: 0;
	}
}