/* ============================================================
   Abendgymnasium Rheine – zentrales Stylesheet
   Wird von allen Seiten der Homepage eingebunden.
   Farben, Schriften und Abstände lassen sich zentral über die
   Variablen im :root-Block anpassen.
   ============================================================ */

:root {
	/* Farben */
	--farbe-dunkel: #4d4d4d;      /* Kopf- und Fußzeile */
	--farbe-dunkel-hell: #5c5c5c; /* Hover-Zustand im Menü */
	--farbe-akzent: #4dba38;      /* WBK-Grün (aus dem Logo) */
	--farbe-text: #262626;
	--farbe-text-hell: #f2f2f2;
	--farbe-hintergrund: #ffffff;
	--farbe-link: #1a56c4;
	--farbe-link-besucht: #6b3fa0;

	/* Schrift: bewusst nur Systemschriften, kein Nachladen von Schriftdateien */
	--schrift-basis: "Segoe UI", Calibri, Candara, Verdana, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--breite-inhalt: 1100px;
	--abstand: 1.25rem;
}

/* ---------- Grundeinstellungen ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
}

body {
	margin: 0;
	font-family: var(--schrift-basis);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--farbe-text);
	background: var(--farbe-hintergrund);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--farbe-link);
}

a:visited {
	color: var(--farbe-link-besucht);
}

.inhalt-breite {
	width: 100%;
	max-width: var(--breite-inhalt);
	margin: 0 auto;
	padding: 0 var(--abstand);
}

/* ---------- Kopfbereich ---------- */

.kopfbereich {
	background: linear-gradient(225deg, #8a8a8a 0%, var(--farbe-dunkel) 100%);
	color: var(--farbe-text-hell);
}

/* Grüner Farbverlauf als Übergang vom Kopfbereich in den weißen Inhalt -
   testweise, um etwas Farbe reinzubringen. */
.kopfbereich__welle {
	height: 14px;
	background: linear-gradient(90deg, #3a9a28 0%, var(--farbe-akzent) 50%, #7ed168 100%);
}

.kopfbereich__zeile {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--abstand);
	padding: var(--abstand);
}

.kopfbereich__logo {
	width: 210px;
	flex-shrink: 0;
}

.kopfbereich__titel {
	flex: 1 1 300px;
	min-width: 0;
}

.kopfbereich__titel h1 {
	margin: 0;
	font-size: 1.9rem;
	line-height: 1.2;
	/* Auf schmalen Bildschirmen darf zwischen den beiden Wörtern
	   umgebrochen werden, damit Logo und Titel nebeneinander bleiben -
	   aber niemals innerhalb eines Worts. */
	overflow-wrap: normal;
	word-break: keep-all;
}

.kopfbereich__titel p {
	margin: 0.3rem 0 0;
	font-size: 1.05rem;
	color: #d8d8d8;
}

/* ---------- Navigation ---------- */

.hauptnavigation__zeile {
	position: relative;
}

.hauptnavigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hauptnavigation a {
	display: block;
	padding: 0.85rem 1.1rem;
	color: var(--farbe-text-hell);
	text-decoration: none;
	white-space: nowrap;
}

.hauptnavigation a:visited {
	color: var(--farbe-text-hell);
}

.icon-extern {
	display: inline-block;
	vertical-align: -1px;
	margin-left: 0.3em;
	flex-shrink: 0;
}

.hauptnavigation a:hover,
.hauptnavigation a:focus-visible,
.hauptnavigation a[aria-current="page"] {
	background: var(--farbe-akzent);
	color: #1a1a1a;
}

/* Social-Media-Icons als letzter Menüpunkt */

.nav-social {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	padding: 0.5rem 1.1rem;
}

.nav-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease;
}

.nav-social a:hover,
.nav-social a:focus-visible {
	background-color: var(--farbe-akzent);
	/* Überschreibt gezielt das color:#1a1a1a von .hauptnavigation a:hover -
	   die Icons nutzen currentColor und sollen auf dem grünen Kreis nicht
	   dunkel werden, sondern weiß bleiben. */
	color: var(--farbe-text-hell);
}

/* Menü-Schalter (nur auf kleinen Bildschirmen sichtbar, siehe Media Query
   weiter unten). Reiner CSS-Checkbox-Trick, damit die öffentlichen Seiten
   ohne JavaScript auskommen. */

.menu-schalter {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.menu-knopf {
	display: none;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.1rem;
	color: var(--farbe-text-hell);
	cursor: pointer;
	user-select: none;
}

.menu-schalter:focus-visible ~ .menu-knopf {
	outline: 3px solid var(--farbe-akzent);
	outline-offset: -3px;
}

.menu-knopf__symbol,
.menu-knopf__symbol::before,
.menu-knopf__symbol::after {
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform 0.18s ease, top 0.18s ease, opacity 0.18s ease;
}

.menu-knopf__symbol {
	position: relative;
	display: inline-block;
}

.menu-knopf__symbol::before,
.menu-knopf__symbol::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-knopf__symbol::before {
	top: -6px;
}

.menu-knopf__symbol::after {
	top: 6px;
}

.menu-schalter:checked ~ .menu-knopf .menu-knopf__symbol {
	background: transparent;
}

.menu-schalter:checked ~ .menu-knopf .menu-knopf__symbol::before {
	top: 0;
	transform: rotate(45deg);
}

.menu-schalter:checked ~ .menu-knopf .menu-knopf__symbol::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ---------- Hauptinhalt ---------- */

.hauptinhalt {
	flex: 1;
	padding: 2rem 0 3rem;
	background: linear-gradient(180deg, #f3faf1 0%, #ffffff 320px);
}

/* Redaktionell bearbeitbarer Inhaltsbereich (aktuell: Startseite).
   Wird sowohl auf der öffentlichen Seite als auch innerhalb des
   Editors (redaktion/editor.php) verwendet, damit beides gleich aussieht. */

.inhalt-editierbar {
	max-width: 70ch;
}

.inhalt-editierbar p {
	margin: 0 0 1.1rem;
}

.inhalt-editierbar h2 {
	position: relative;
	clear: both;
	color: #6b6b6b;
	margin: 0 0 0.6rem;
	/* Als padding statt margin, weil ein hohes, neben dem vorherigen
	   Absatz überstehendes Bild sonst per "clear" den Abstand
	   auffrisst (margin kollabiert dann effektiv auf 0, padding nicht). */
	padding: 2.1rem 0 0 0.9rem;
}

.inhalt-editierbar h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(2.1rem + 0.15em);
	bottom: 0.15em;
	width: 5px;
	border-radius: 3px;
	background: var(--farbe-akzent);
}

.inhalt-editierbar img {
	max-width: 45%;
	width: 260px;
	border-radius: 10px;
	float: left;
	margin: 0.2rem 1.5rem 1rem 0;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.45);
}

.inhalt-editierbar ul,
.inhalt-editierbar ol {
	padding-left: 1.3rem;
	margin: 0 0 1.1rem;
}

.inhalt-editierbar li {
	margin-bottom: 0.3rem;
}

.inhalt-editierbar hr {
	border: none;
	border-top: 1px dashed #bbb;
	margin: 1.5rem 0;
	clear: both;
}

.inhalt-editierbar .content-gross {
	font-size: 1.25em;
	font-weight: 700;
}

.inhalt-editierbar .content-xgross {
	font-size: 1.6em;
	font-weight: 700;
}

.inhalt-editierbar::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 640px) {
	.inhalt-editierbar img {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1rem;
	}
}

/* Allgemeiner Textinhalt auf Unterseiten (Impressum, Datenschutz, ...) */

.seite {
	max-width: 70ch;
}

.seite h1 {
	margin-top: 0;
}

.seite h2 {
	position: relative;
	clear: both;
	color: #6b6b6b;
	margin: 0 0 0.5rem;
	/* Als padding statt margin, weil ein hohes, neben dem vorherigen
	   Absatz überstehendes Bild sonst per "clear" den Abstand
	   auffrisst (margin kollabiert dann effektiv auf 0, padding nicht). */
	padding: 2.1rem 0 0 0.9rem;
}

.seite h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(2.1rem + 0.15em);
	bottom: 0.15em;
	width: 5px;
	border-radius: 3px;
	background: var(--farbe-akzent);
}

.seite address {
	font-style: normal;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.seite ul,
.seite ol {
	padding-left: 1.3rem;
}

.seite li {
	margin-bottom: 0.3rem;
}

.seite hr {
	border: none;
	border-top: 1px dashed #bbb;
	margin: 1.5rem 0;
}

/* Bild rechts neben dem Text (z. B. auf Kontakt, Über Uns) */

.seite img {
	max-width: 400px;
	width: 45%;
	border-radius: 10px;
	float: right;
	margin: 0.2rem 0 1rem 1.5rem;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.45);
}

.seite::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 640px) {
	.seite img {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1rem;
	}

	/* Auf der Kontakt-Seite steht unter der Überschrift ein Klammerzusatz
	   ("Außenstelle des..."), der sich eindeutig auf die Überschrift
	   bezieht. Damit das Foto diesen Zusammenhang auf schmalen Bildschirmen
	   nicht auseinanderreißt, wandert es hier per Reihenfolge (nicht per
	   HTML-Struktur) hinter den Klammerzusatz. */
	.seite--kontakt {
		display: flex;
		flex-direction: column;
	}

	.seite--kontakt > h1,
	.seite--kontakt > h2:first-of-type,
	.seite--kontakt > img + p {
		order: -1;
	}
}

/* ---------- Kontaktformular ---------- */

.kontaktformular {
	max-width: 32rem;
	margin-top: 1rem;
}

.formular-feld {
	margin-bottom: 1.1rem;
}

.formular-feld label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 700;
}

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular textarea {
	width: 100%;
	padding: 0.65rem 0.9rem;
	font: inherit;
	color: var(--farbe-text);
	background: var(--farbe-hintergrund);
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.45);
}

.kontaktformular textarea {
	resize: vertical;
}

.kontaktformular input:focus-visible,
.kontaktformular textarea:focus-visible {
	outline: 3px solid var(--farbe-akzent);
	outline-offset: 2px;
}

/* Honeypot: für Menschen unsichtbar, aber für Bots im DOM auffindbar. */
.formular-feld--versteckt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.formular-hinweis {
	font-size: 0.9rem;
	color: #6b6b6b;
}

.formular-absenden {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	font: inherit;
	font-weight: 700;
	color: #1a1a1a;
	background: var(--farbe-akzent);
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

.formular-absenden:hover,
.formular-absenden:focus-visible {
	background: #3ea82f;
}

.formular-absenden:focus-visible {
	outline: 3px solid var(--farbe-text);
	outline-offset: 2px;
}

.formular-erfolg,
.formular-fehler {
	max-width: 32rem;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	margin-bottom: 1.1rem;
}

.formular-erfolg {
	color: #1a1a1a;
	background: #e6f6e2;
	border: 1px solid var(--farbe-akzent);
}

.formular-fehler {
	color: #7a1712;
	background: #fdecea;
	border: 1px solid #d64541;
}

/* Auf großen Bildschirmen darf das Textfeld breiter sein und die Fotos
   etwas größer - auf schmaleren Bildschirmen bleibt alles wie gehabt. */
@media (min-width: 900px) {
	.inhalt-editierbar,
	.seite {
		max-width: 900px;
		margin: 0 auto;
	}

	.inhalt-editierbar img {
		width: 340px;
	}

	.seite img {
		width: 480px;
		max-width: 45%;
	}
}

/* ---------- Fußzeile ---------- */

.fusszeile {
	background: var(--farbe-dunkel);
	color: var(--farbe-text-hell);
	padding: 1.75rem 0;
	margin-top: auto;
}

.fusszeile__zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
}

.fusszeile address {
	font-style: normal;
	line-height: 1.7;
}

.fusszeile a {
	color: var(--farbe-text-hell);
}

.fusszeile a:visited {
	color: var(--farbe-text-hell);
}

.fusszeile__links {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: right;
	margin-left: auto;
}

.bearbeiten-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	justify-content: flex-end;
	opacity: 0.75;
	font-size: 0.88rem;
}

.bearbeiten-link:hover,
.bearbeiten-link:focus-visible {
	opacity: 1;
}

.bearbeiten-link img {
	width: 14px;
	height: 14px;
	filter: invert(1);
}

@media (max-width: 480px) {
	.kopfbereich__zeile {
		justify-content: center;
	}
}

/* Kleinere Bildschirme: Menü einklappen, Untertitel weglassen */

@media (max-width: 640px) {
	.kopfbereich__untertitel {
		display: none;
	}

	/* Logo verkleinern, damit "Abendgymnasium Rheine" auch auf schmalen
	   Bildschirmen neben dem Logo bleibt (statt komplett darunter zu
	   rutschen). Die Schriftgröße bleibt bewusst stabil - bricht der
	   Titel dabei um, dann linksbündig statt zentriert (siehe
	   word-break oben: Umbruch nur zwischen den Wörtern, nie mittendrin). */
	.kopfbereich__logo {
		width: 110px;
	}

	.kopfbereich__titel h1 {
		font-size: 1.6rem;
		text-align: left;
	}

	/* Vertikale Polster von Kopfzeile und Menü-Knopf verkleinert, damit
	   zwischen Logo und dem Hamburger-Menü darunter nicht so viel
	   Leerraum entsteht. */
	.kopfbereich__zeile {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.menu-knopf {
		display: inline-flex;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.hauptnavigation ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.menu-schalter:checked ~ ul {
		display: flex;
	}

	.hauptnavigation a {
		padding: 0.75rem 1.1rem;
	}

	/* Ohne dies überschreibt die Regel oben (gleiche Spezifität, aber
	   später in der Datei) das padding:0 der Kreise und quetscht die
	   Icons darin auf 0×0 zusammen. */
	.nav-social a {
		padding: 0;
	}

	.nav-social {
		margin-left: 0;
		justify-content: center;
		padding: 0.75rem 1.1rem;
	}
}

/* Erst wenn selbst "Abendgymnasium" allein neben dem Logo nicht mehr
   passt, wird die Schrift als letzter Ausweg weiter verkleinert - in
   zwei Stufen, damit möglichst viel von der ursprünglichen Größe
   erhalten bleibt. */
@media (max-width: 428px) {
	.kopfbereich__titel h1 {
		font-size: 1.2rem;
	}
}

@media (max-width: 363px) {
	.kopfbereich__titel h1 {
		font-size: 0.9rem;
	}
}


/* Deutlich sichtbarer Fokus für Tastaturbedienung */
a:focus-visible {
	outline: 3px solid var(--farbe-akzent);
	outline-offset: 2px;
}