/*
Theme Name: Akademie
Theme URI: https://deutsche-gehirnforschung.de/
Author: Deutsche Akademie für funktionale Gehirnforschung e.V.
Description: Schlankes eigenes Theme der Akademie. Kopf, Fußzeile, Grundseite, Vollbreite-Vorlage für HTML-Blöcke im ak-Wrapper, 404. Schriften lokal, keine externen Abfragen. Abgeleitet aus dem abgenommenen Muster (Phase 2, 02.11.2026).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: akademie
*/

/*
 * Design-Tokens und Stile aus _assets/akademie/muster/ (tokens.css und
 * muster-startseite.html). Kontraste gegen Papierweiß: Nachtblau 15,1 : 1,
 * Grau 5,9 : 1, Messing 3,2 : 1 (daher Messing nur für Linien, Punkte,
 * Pfeile, nie für Text). Auf Nachtblau: Hell 14,0 : 1, Messing hell 8,3 : 1.
 */

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/schriften/source-serif-4-roman.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("assets/schriften/source-serif-4-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("assets/schriften/source-sans-3-roman.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("assets/schriften/source-sans-3-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Farben */
	--ak-nachtblau: #14213D;
	--ak-messing: #A8862B;
	--ak-messing-hell: #D9B85C;
	--ak-papier: #FAF8F3;
	--ak-papier-tief: #F1EEE6;
	--ak-grau: #5A6072;
	--ak-linie: #DCD7CB;
	--ak-hell: #EDF0F5;

	/* Schriften */
	--ak-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--ak-sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;

	/* Schriftgrößen, fließend zwischen 360 und 1200 px Breite */
	--ak-text: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--ak-text-klein: 0.9375rem;
	--ak-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--ak-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
	--ak-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--ak-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--ak-zeile: 1.65;
	--ak-zeile-eng: 1.2;

	/* Abstände */
	--ak-a1: 0.5rem;
	--ak-a2: 1rem;
	--ak-a3: 1.5rem;
	--ak-a4: 2.5rem;
	--ak-a5: 4rem;
	--ak-a6: clamp(4rem, 3rem + 4vw, 7rem);

	/* Maße */
	--ak-breite: 72rem;
	--ak-satz: 38rem;
	--ak-rand: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--ak-haar: 1px;
	--ak-strich: 2px;
}

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ak-papier);
	color: var(--ak-nachtblau);
	font-family: var(--ak-sans);
	font-size: var(--ak-text);
	line-height: var(--ak-zeile);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--ak-messing); text-decoration-thickness: var(--ak-haar); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: var(--ak-strich); }
a:focus-visible { outline: var(--ak-strich) solid var(--ak-messing); outline-offset: 3px; }

.ak-sprung {
	position: absolute; left: var(--ak-a2); top: -4rem; z-index: 10;
	background: var(--ak-nachtblau); color: var(--ak-hell);
	padding: var(--ak-a1) var(--ak-a2); text-decoration: none;
}
.ak-sprung:focus { top: var(--ak-a2); }

.ak-rahmen { max-width: var(--ak-breite); margin: 0 auto; padding: 0 var(--ak-rand); }

/* Kopf */
.ak-kopf { border-bottom: var(--ak-haar) solid var(--ak-linie); }
.ak-kopf .ak-rahmen {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--ak-a2) var(--ak-a4); padding-top: var(--ak-a3); padding-bottom: var(--ak-a3);
}
.ak-marke img { width: 16rem; }
.ak-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ak-a1) var(--ak-a3); }
.ak-nav a {
	font-size: var(--ak-text-klein); font-weight: 500; letter-spacing: 0.04em;
	text-decoration: none; padding: 0.25rem 0; border-bottom: var(--ak-strich) solid transparent;
}
.ak-nav a:hover,
.ak-nav .current-menu-item > a,
.ak-nav .current_page_item > a { border-bottom-color: var(--ak-messing); }

/* Eingang (Seitenkopf mit H1) */
.ak-eingang { padding: var(--ak-a6) 0 var(--ak-a5); }
.ak-eingang h1 {
	font-family: var(--ak-serif); font-weight: 500; font-size: var(--ak-h1);
	line-height: var(--ak-zeile-eng); letter-spacing: -0.01em;
	max-width: 18ch; margin: 0 0 var(--ak-a4);
}
.ak-eingang h1:last-child { margin-bottom: 0; }
.ak-kernsatz {
	font-family: var(--ak-serif); font-style: italic; font-weight: 400;
	font-size: var(--ak-lead); line-height: 1.5;
	max-width: 34rem; margin: 0; padding-left: var(--ak-a3);
	border-left: var(--ak-strich) solid var(--ak-messing);
}

/* Textteil */
.ak-teil { padding-bottom: var(--ak-a5); }
.ak-satz { max-width: var(--ak-satz); }
.ak-satz p, .ak-satz ul, .ak-satz ol { margin: 0 0 var(--ak-a3); }
.ak-satz ul, .ak-satz ol { padding-left: 1.25em; }
.ak-satz li { margin-bottom: var(--ak-a1); }
.ak-satz li::marker { color: var(--ak-messing); }
.ak-satz h2 {
	font-family: var(--ak-serif); font-weight: 500; font-size: var(--ak-h2);
	line-height: 1.25; margin: var(--ak-a4) 0 var(--ak-a2);
}
.ak-satz h3 {
	font-family: var(--ak-serif); font-weight: 600; font-size: var(--ak-h3);
	line-height: 1.3; margin: var(--ak-a3) 0 var(--ak-a1);
}
.ak-satz > :first-child { margin-top: 0; }
.ak-satz .ak-neben { color: var(--ak-grau); font-size: var(--ak-text-klein); }
.ak-trenner { display: flex; align-items: center; gap: var(--ak-a2); margin: 0 0 var(--ak-a4); }
.ak-trenner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ak-messing); }
.ak-trenner::after { content: ""; flex: 1; height: var(--ak-haar); background: var(--ak-linie); }

/* Wege */
.ak-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ak-a3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ak-weg a {
	display: block; height: 100%; text-decoration: none;
	padding: var(--ak-a3);
	background: var(--ak-papier-tief); border-top: var(--ak-strich) solid var(--ak-messing);
	transition: background-color 0.15s;
}
.ak-weg a:hover { background: #EAE6DB; }
.ak-weg h2 { font-family: var(--ak-serif); font-weight: 500; font-size: var(--ak-h3); line-height: 1.3; margin: 0 0 var(--ak-a1); }
.ak-weg h2::after { content: " \2192"; content: " \2192" / ""; color: var(--ak-messing); font-family: var(--ak-sans); }
.ak-weg p { margin: 0; color: var(--ak-grau); font-size: var(--ak-text-klein); line-height: 1.5; }

/* Fuß */
.ak-fuss { background: var(--ak-nachtblau); color: var(--ak-hell); margin-top: var(--ak-a6); }
.ak-fuss .ak-rahmen { padding-top: var(--ak-a5); padding-bottom: var(--ak-a5); display: grid; gap: var(--ak-a3); }
.ak-fuss p { margin: 0; font-size: var(--ak-text-klein); line-height: 1.6; }
.ak-fuss .ak-name { display: flex; align-items: center; gap: var(--ak-a2); font-family: var(--ak-serif); font-size: 1.0625rem; font-weight: 500; }
.ak-fuss .ak-name svg { flex: none; }
.ak-fuss .ak-recht a { margin-right: var(--ak-a3); }
.ak-fuss a { text-decoration-color: var(--ak-messing-hell); }
.ak-fuss .ak-werk { color: #C9CFDB; }

/* Gutenberg: HTML-Blöcke ohne Zusatzabstände */
.ak-haupt > :where(:not(section)) { max-width: var(--ak-breite); margin-left: auto; margin-right: auto; padding-left: var(--ak-rand); padding-right: var(--ak-rand); }

@media (max-width: 40rem) {
	.ak-marke img { width: 12rem; }
	.ak-nav ul { gap: var(--ak-a1) var(--ak-a2); }
	.ak-eingang { padding-top: var(--ak-a5); }
}

/* Kontaktformular (kontakt.php) */
.ak-formular { margin-top: var(--ak-a4); }
.ak-formular form { display: grid; gap: var(--ak-a2); }
.ak-formular .ak-feld { display: grid; gap: var(--ak-a1); margin: 0; }
.ak-formular label { font-weight: 600; font-size: var(--ak-text-klein); }
.ak-pflicht { font-weight: 400; color: var(--ak-grau); }
.ak-formular input[type="text"],
.ak-formular input[type="email"],
.ak-formular textarea {
	width: 100%; font: inherit; color: var(--ak-nachtblau); background: #fff;
	border: var(--ak-haar) solid #737B8F; border-radius: 2px; padding: 0.6em 0.75em;
}
.ak-formular textarea { resize: vertical; min-height: 10rem; }
.ak-formular input:focus-visible,
.ak-formular textarea:focus-visible,
.ak-knopf:focus-visible { outline: var(--ak-strich) solid var(--ak-messing); outline-offset: 2px; }
.ak-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ak-knopf {
	font: inherit; font-weight: 600; cursor: pointer;
	background: var(--ak-nachtblau); color: var(--ak-hell);
	border: 0; border-radius: 2px; padding: 0.7em 1.4em;
}
.ak-knopf:hover { background: #22325A; }
.ak-meldung { border-left: var(--ak-strich) solid var(--ak-messing); padding: var(--ak-a1) var(--ak-a2); background: #EFEBE1; margin: 0 0 var(--ak-a3); }
.ak-meldung-fehler { border-left-color: var(--ak-nachtblau); }