/* Ergonomie-Stylesheet V3 (erstellt von Gemini) */
/* ==========================================================================
   GRUNDEINSTELLUNGEN UND VARIABLEN
   Hier definieren wir globale Variablen für Farben, Schriftarten und
   Abstände. Das macht spätere Anpassungen sehr einfach.
   ========================================================================== */

:root {
	/* Farbpalette */
	--farbe-hintergrund: #fcfcfc;    /* Sehr helles Grau für den Seitenhintergrund */
	--farbe-text: #333333;           /* Dunkelgrau für Text, angenehmer als reines Schwarz */
	--farbe-akzent: #0056b3;         /* Ein freundliches Blau für Links und Akzente */
	--farbe-dezent: #dddddd;         /* Helles Grau für Ränder und Trennlinien */
	--farbe-code-bg: #f4f4f4;        /* Hintergrund für Code-Blöcke */

	/* Farben für die Hinweisboxen (Pastelltöne) */
	--farbe-merktext: #e7f5e7;       /* Pastell-Grün */
	--farbe-definition: #fdeeee;     /* Pastell-Rot */
	--farbe-aufgabe: #e6f3fa;        /* Pastell-Blau */
	--farbe-versuch: #e6f3fa;        /* Pastell-Blau */

	--farbe-experten: #fff9e6;       /* Pastell-Gelb */
	--farbe-method-box: #e6e6e6;     /* Pastell-Blau */
	

	/* Schriftarten */
	--schrift-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--schrift-code: "Courier New", Courier, monospace;

	/* Layout */
	--container-breite: 1200px;      /* Maximale Breite des Hauptinhalts */
}


/* ==========================================================================
   ALLGEMEINE STYLES (BODY & HTML)
   Grundlegende Formatierungen für die gesamte Seite.
   ========================================================================== */

body {
	font-family: var(--schrift-text);
	font-size: 18px;                 /* Eine angenehme Lesegröße */
	line-height: 1.7;                /* Erhöhter Zeilenabstand für bessere Lesbarkeit */
	color: var(--farbe-text);
	background-color: var(--farbe-hintergrund);
	margin: 0;
	padding: 20px;
}


/* ==========================================================================
   HAUPT-LAYOUT (MAIN, ARTICLE, ASIDE, FOOTER)
   Das Grundgerüst der Seite. Wir verwenden Flexbox, um 'article' und
   'aside' nebeneinander zu positionieren.
   ========================================================================== */

/* ==========================================================================
   HAUPT-LAYOUT (MAIN, ARTICLE, ASIDE, FOOTER)
   NEU: Umstellung auf CSS Grid für eine korrekte 2D-Anordnung.
   ========================================================================== */

main {
	display: grid;                   /* NEU: Wir verwenden jetzt CSS Grid */
	grid-template-columns: 3fr 1fr;  /* Definiert zwei Spalten: Artikel (3 Teile) und Aside (1 Teil) */
	grid-template-areas:             /* Benennt die Bereiche für eine einfache Zuweisung */
		"header header"
		"article aside";
	gap: 30px;                       /* Abstand zwischen den Grid-Zellen */
	max-width: var(--container-breite);
	margin: 20px auto;
}

/* Zuweisung der Elemente zu den Grid-Bereichen */
header {
	grid-area: header;   /* Der Header wird in den Bereich "header" platziert */
}

article {
	grid-area: article;  /* Der Artikel wird in den Bereich "article" platziert */
}

aside {
	grid-area: aside;    /* Die Aside-Box wird in den Bereich "aside" platziert */
	padding: 20px;
	background-color: #f7f7f7;
	border-radius: 8px;
	align-self: flex-start; /* Stellt sicher, dass die Box oben in ihrer Zelle beginnt */
}

footer {
	max-width: var(--container-breite);
	margin: 40px auto 20px auto;
	padding: 20px;
	text-align: center;
	background-color: #333;
	color: #fff;
	border-radius: 8px;
}


/* ==========================================================================
   TYPOGRAPHIE (ÜBERSCHRIFTEN, TEXTE, LINKS)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

h1, h2 {
	font-size: 2.5rem;
	border-bottom: 2px solid var(--farbe-akzent);
	padding-bottom: 10px;
}

h3 {
	font-size: 1.8rem;
}

h5 {
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
}

.titel {
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
	color: brown;
	font-weight: bold;
}

h6 {
	font-size: 1.1rem;
	margin: 0;
	padding: 0;
}

p {
	margin-bottom: 1em; /* Standard-Absatzabstand */
}

a {
	color: var(--farbe-akzent);
	text-decoration: none;
	font-weight: 600;
}

a:hover {
	text-decoration: underline;
}

footer a {
	color: #fff;
}


/* ==========================================================================
   SPEZIFISCHE KLASSEN UND KOMPONENTEN
   Formatierung für die wiederkehrenden Elemente wie Boxen, Bilder etc.
   ========================================================================== */

/* Klassen für die Hervorhebung im Text */
.klasse, .fachbegriff, .objekt {
	padding: 2px 5px;

}

/* Formatierung für Code-Blöcke */
pre {
	background-color: var(--farbe-code-bg);
	border: 1px solid var(--farbe-dezent);
	padding: 15px;
	border-radius: 8px;
	overflow-x: auto; /* Fügt eine Scrollbar hinzu, wenn der Code zu lang ist */
	font-family: var(--schrift-code);
	font-size: 0.95em;
	white-space: pre-wrap; /* Sorgt für Zeilenumbrüche im Code-Block */
}

/* Bild, das die volle Breite des Containers einnimmt */
.breitbild {
	margin: 30px 0;
}

.breitbild img {
	width: 100%;
	height: auto;        /* Behält das Seitenverhältnis bei */
	border-radius: 8px;
}

.breitbild .abbildung {
	text-align: center;
	font-size: 0.9em;
	color: #666;
	margin-top: 5px;
}

/* Allgemeine Stile für die Hinweis-Boxen */
.merktext, .definition, .aufgabe, .experten, .versuch, .method-box {
	margin: 30px 0;
	padding: 20px;
	border-radius: 8px;
	border-left: 5px solid; /* Dicker linker Rand zur Hervorhebung */
}

.merktext .titel,
.definition .titel,
.aufgabe .titel,
.experten .titel,
.versuch .titel,
.method-box .titel{
	font-size: 1.2em;
	font-weight: 600;
	margin-top: 0;
}

/* Spezifische Farben für die Hinweis-Boxen */
.merktext { background-color: var(--farbe-merktext); border-color: #4caf50; }
.definition { background-color: var(--farbe-definition); border-color: #f44336; }
.aufgabe { background-color: var(--farbe-aufgabe); border-color: #2196f3; }
.experten { background-color: var(--farbe-experten); border-color: #ffc107; }
.versuch { background-color: var(--farbe-versuch); border-color: #2196f3; }
.method-box { background-color: var(--farbe-method-box); border-color: gray; }



/* Box für Methoden-Beschreibungen 
.method-box {
	border: 1px solid var(--farbe-dezent);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}
*/

/* Trennlinie in der Methoden-Box */
.method-box hr.linie1 {
	border: 0;
	border-top: 1px solid var(--farbe-dezent);
	margin: 10px 0;
}

/* Hilfsklassen */
.klein {
	font-size: 0.9em;
}

.abstandNachOben {
	margin-top: 20px;
}

aside img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}


/* ==========================================================================
   RESPONSIVE DESIGN
   NEU: Anpassung des Grids für mobile Ansichten.
   ========================================================================== */

@media (max-width: 900px) {
	main {
		grid-template-columns: 1fr; /* Auf kleinen Bildschirmen gibt es nur EINE Spalte */
		grid-template-areas:
			"header"
			"article"
			"aside"; /* Alle Elemente werden ordentlich untereinander gestapelt */
	}

	body {
		padding: 10px;
		font-size: 16px;
	}

	h1,h2 { font-size: 2rem; }
	h3 { font-size: 1.5rem; }
	h5, .titel { font-size: 1.3rem; }	
	h6 { font-size: 1.2rem; }	
	
	/* Mobil: Seitenleisten-Bilder verbergen (Platz sparen) */
	aside img {
  visibility: hidden;
  float: right;
  width: 0; height: 0; margin: 0; max-width: 0; }
}