/* Design: hu-math-tokens (HU Corporate Design, Institut für Mathematik),
   Kopf nach www2.mathematik.hu-berlin.de/it: HU-Leiste, Absender links, Siegel rechts. */

/* Hausschrift HU-Scala vom HU-Webspace, D-DIN Exp lokal (OFL-1.1) */
@font-face { font-display: swap; font-family: ff-scala; font-style: normal; font-weight: 400;
	src: url(https://www.hu-berlin.de/_assets/3434b65bcd82b8523edd2faff33a8c0c/Build/Fonts/ScalaPro.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: ff-scala; font-style: italic; font-weight: 400;
	src: url(https://www.hu-berlin.de/_assets/3434b65bcd82b8523edd2faff33a8c0c/Build/Fonts/ScalaPro-Ita.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: ff-scala; font-style: normal; font-weight: 700;
	src: url(https://www.hu-berlin.de/_assets/3434b65bcd82b8523edd2faff33a8c0c/Build/Fonts/ScalaPro-Bold.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: hub-ddin-exp; font-style: normal; font-weight: 400;
	src: url("/umzug-assets/D-DINExp.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: hub-ddin-exp; font-style: normal; font-weight: 700;
	src: url("/umzug-assets/D-DINExp-Bold.woff2") format("woff2"); }

:root {
	color-scheme: light;
	--hu-blue: #00376C;       /* HU-Blau I */
	--hu-blue-ii: #004C90;    /* HU-Blau II */
	--hu-blue-iii: #ABCDF1;   /* HU-Blau III */
	--hu-blue-iv: #E3F1FF;    /* HU-Blau IV – helle Info-Fläche */
	--bg: #ffffff;
	--bg-subtle: #FAFAF5;     /* Hintergrund I */
	--bg-muted: #F0F0EB;      /* Hintergrund II */
	--fg: #0A0A19;            /* HU-Schwarz I */
	--fg-muted: #59595F;      /* HU-Schwarz II */
	--border: #CFCFD1;        /* HU-Schwarz IV */
	--font-body: ff-scala, "Georgia", "Times New Roman", serif;
	--font-heading: hub-ddin-exp, "Arial", system-ui, sans-serif;
	--radius: 8px;
	--container: 1320px;
	--container-px: clamp(1rem, 4vw, 2rem);
}
* { box-sizing: border-box; }
body {
	margin: 0; background: var(--bg-subtle); color: var(--fg);
	font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--hu-blue-ii); }
a:focus-visible { outline: 3px solid var(--hu-blue-ii); outline-offset: 2px; }

/* HU-Identifikationsleiste (oben, dünn) */
.hu-bar { background: var(--hu-blue); color: #fff; font-family: var(--font-heading); font-size: .75rem; letter-spacing: .02em; }
.hu-bar__inner { max-width: var(--container); margin: 0 auto; padding: .35rem var(--container-px); min-height: 36px; display: flex; align-items: center; }
.hu-bar__crumbs { display: flex; align-items: center; gap: .5rem; min-width: 0; overflow: hidden; white-space: nowrap; }
.hu-bar__crumbs a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.hu-bar__crumbs a:hover { color: #fff; text-decoration: underline; }
.hu-bar__crumbs span { color: rgba(255, 255, 255, .55); }

/* Kopf: HU-Logo-Kopplung Variante II – Absender linksbündig, Siegel rechts */
.site-header { background: var(--bg); border-bottom: 4px solid var(--hu-blue); }
.header-main__inner { max-width: var(--container); margin: 0 auto; padding: 1rem var(--container-px); display: flex; align-items: center; gap: 1.5rem; }
.header-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; text-decoration: none; color: var(--fg); line-height: 1.2; }
.header-brand__org { font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); color: var(--hu-blue); }
.header-brand__faculty { font-size: clamp(.78rem, .74rem + .18vw, .9rem); color: var(--fg-muted); }
.header-brand__unit { font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); font-weight: 700; color: var(--hu-blue); margin-top: .15rem; }
.logo-link { flex-shrink: 0; display: block; width: 128px; height: 126px; line-height: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px #fff; }
.logo-link img { display: block; width: 100%; height: 100%; }

/* Inhalt */
main { max-width: 60rem; margin: 0 auto; padding: 2.25rem var(--container-px) 3.5rem; }
.karte { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 2.25rem 2.25rem; }
.hinweis { font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hu-blue); margin: 0 0 .5rem; }
h1, h2 { font-family: var(--font-heading); color: var(--hu-blue); line-height: 1.2; }
h1 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.1875rem; font-weight: 700; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; max-width: 42rem; }

.ziel { margin: 1.5rem 0 2rem; }
.knopf {
	display: inline-block; background: var(--hu-blue); color: #fff; text-decoration: none;
	font-family: var(--font-heading); font-weight: 700; letter-spacing: .02em;
	padding: .75rem 1.25rem; border-radius: var(--radius);
}
.knopf:hover { background: var(--hu-blue-ii); }
.adresse { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--fg-muted); word-break: break-word; }
.adresse b { color: var(--fg); }

.bereiche { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bereiche li { display: flex; }
.bereiche a {
	flex: 1; display: block; padding: .75rem 1rem; background: var(--bg); border: 1px solid var(--border);
	border-radius: var(--radius); text-decoration: none; color: var(--hu-blue);
	font-family: var(--font-heading); font-weight: 700; line-height: 1.3;
}
.bereiche a:hover { border-color: var(--hu-blue); background: var(--hu-blue-iv); }

.echt { background: var(--hu-blue-iv); border-left: 4px solid var(--hu-blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.echt p { margin: 0 0 .5rem; }
.echt p:last-child { margin-bottom: 0; }
.domain { white-space: nowrap; }
.klein { font-size: .9375rem; color: var(--fg-muted); }

.englisch { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.englisch p { font-size: 1rem; }

/* Fuß: vollflächig HU-Blau, D-DIN, wie www.hu-berlin.de */
.site-footer { background: var(--hu-blue); color: rgba(250, 250, 245, .92); text-align: center; font-family: var(--font-heading); font-size: .875rem; line-height: 1.6; padding: 2.5rem var(--container-px); }
.site-footer p { margin: .3rem auto; max-width: none; }
.site-footer a { color: #fafaf5; text-decoration: none; border-bottom: 1px solid rgba(250, 250, 245, .4); }
.site-footer a:hover { border-bottom-color: #fafaf5; }
.site-footer a:focus-visible { outline-color: #fafaf5; }

@media (max-width: 640px) {
	.hu-bar__crumbs a:not(:last-child), .hu-bar__crumbs span { display: none; }
	.hu-bar__crumbs a:last-child { font-weight: 600; }
	.header-main__inner { padding: .75rem var(--container-px); gap: .75rem; }
	.logo-link { width: 80px; height: 79px; }
	.karte { padding: 1.5rem 1.25rem 1.75rem; }
	.bereiche { grid-template-columns: 1fr; }
}