/*
-----------------------------------------------
	zukunft.hlrs.de
by  www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-variant-ligatures: none;
}

html {
	height: 100%;
	/* Stand 04.08.2026: hier stand `-webkit-text-size-adjust: none`. Das
	   hebt die Textvergroesserung mobiler Browser auf -- wer die Schrift
	   groesser stellt, bekommt sie nicht groesser (BITV 9.1.4.4 und 11.7). */
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
	display: block;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select {
	vertical-align: middle;
}


/*		W E B F O N T S
-----------------------------------------------
   05.08.2026 auf das beschnitten, was die Seite braucht: Basic Latin +
   Latin-1 (deckt alles Deutsche), dazu Gedankenstrich, Anfuehrungszeichen,
   Auslassungspunkte, Euro, Aufzaehlungspunkt und die Pfeile -- die stehen
   im CSS unten am FAQ-Akkordeon, nicht im Seitentext, und waeren beim
   Beschneiden fast durchgerutscht.
   161 KB -> 49 KB. Neue Dateinamen, weil die alten ein Jahr Cache haben.
   Die vollstaendigen Schnitte liegen im restic-Archiv, falls je Zeichen
   ausserhalb dieses Bereichs gebraucht werden.
----------------------------------------------- */

@font-face {
	font-family: "Overpass HLRS";
	src: url("fonts/Overpass-Light-latin.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Overpass HLRS";
	src: url("fonts/Overpass-Bold-latin.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}


/*		B A S I C S
----------------------------------------------- */

:root {
	--color-text: #222;
	/* 05.08.2026 auf Kontrast eingestellt (BITV 9.1.4.3 / 9.1.4.11).
	   #009fe3 kam auf 2,97:1 -- knapp unter der Grenze. #009ee2 ist die
	   kleinstmoegliche Korrektur: Farbton und Saettigung unveraendert
	   (198 Grad, 100 %), Helligkeit von 44,5 auf 44,1 % -- mit blossem
	   Auge nicht zu unterscheiden, erreicht aber genau 3,00:1 fuer
	   weisse Schrift auf der Flaeche (3,04:1, bewusst etwas
	   Luft statt exakt auf der Grenze). */
	--color-link: #009de1;
	/* Als TEXT auf Weiss gilt 4,5:1, nicht 3:1 -- dafuer reicht die
	   Flaechenfarbe nicht. Zweite, dunklere Variante nur fuer Text
	   (FAQ-Frage offen und beim Ueberfahren): 4,50:1. Flaechen und
	   Verlauf behalten die Hausfarbe. */
	--color-link-text: #007eb4;
	--color-dark: #225a9C;
	/* War #aaa -- auf Weiss nur 2,32:1 und damit unter jeder Lesbarkeits-
	   schwelle. #6b6b6b bringt 5,3:1 und bleibt optisch ein Grau.
	   Kein Hausfarben-Eingriff: dieses Grau ist unsere Wahl, nicht HLRS-CI. */
	--color-grey: #6b6b6b;
	--color-light: #f2f2f2;
	--spacing: 1.5rem;
}

body {
	color: var(--color-text);
	background: #fff;
	font-family: "Overpass HLRS", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* rem statt px: 1.0625rem sind bei Standardeinstellung dieselben 17px
	   wie vorher, wachsen aber mit, wenn jemand im Browser eine groessere
	   Grundschrift einstellt. Mit px passierte gar nichts. */
	font-size: 1.0625rem;
	line-height: var(--spacing);
}

em, i {
	font-style: normal;
}

sup {
	font-size: 60%;
	position: relative;
	top: -10px;
}

sub {
	font-size: 60%;
	position: relative;
	bottom: -4px;
}

.onlythree a:nth-child(4) {
	display: none;
}

a:link, a:visited {
	color: var(--color-text);
	text-decoration: none;
}

a:hover, a:active {
	border-bottom-width: 2px;
}

main a:link, main a:visited {
	border-bottom: 1px solid var(--color-text);
}

main a:hover, main a:active {
	border-bottom-width: 2px;
}

/* Die Links im Fussbereich hatten dieselbe Farbe wie der Text daneben und
   keinerlei Unterstreichung -- sie waren schlicht nicht als Links zu
   erkennen (BITV 9.1.4.1). Dieselbe Technik wie im Inhaltsbereich. */
footer a:link, footer a:visited {
	border-bottom: 1px solid var(--color-text);
}

figure a {
	border-bottom: none !important;
}

figcaption {
	font-size: 80%;
	letter-spacing: 0.015em;
	line-height: 1.45;
}

/* Fokus: sichtbar fuer die Tastatur, unsichtbar fuer die Maus.
   Vorher stand hier `*:focus { outline: none }` -- das nahm jedem,
   der ohne Maus bedient, die Orientierung (WCAG 2.4.7). */

:focus-visible {
	outline: 3px solid var(--color-dark);
	outline-offset: 2px;
}

/* Im Kopf liegt bis 900px der blaue Verlauf -- dort braucht der Ring
   Weiss, sonst verschwindet er im Hintergrund. */
header :focus-visible {
	outline-color: #fff;
}

img, video {
	max-inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	object-position: center center;
	height: auto;
}


/*		H E A D E R
----------------------------------------------- */

header {
	padding: calc(var(--spacing) * 0.45) 0 0 0;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	background-image: linear-gradient(110deg, var(--color-dark), var(--color-link));
}

header h1 {
	margin-left: calc(var(--spacing) * 0.65);
	padding-bottom: calc(var(--spacing) * 0.35);
	letter-spacing: 0.005em;
}

header em, header .active strong {
	display: none;
}

header .active em, header strong {
	display: block;
}

header a:link, header a:visited, nav a:link, nav a:visited {
	color: #fff;
}

header svg {
	fill: #fff;
}

/* Der Schalter ist jetzt ein <button> statt eines <div> -- damit er per
   Tabulator erreichbar und mit Leertaste/Enter bedienbar ist. Die
   Browser-Gestaltung eines Buttons muss dafuer weg. */
#mobilenav {
	position: fixed;
	right: calc(var(--spacing) * 0.65);
	top: calc(var(--spacing) * 0.475);
	width: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	cursor: pointer;
}

#mobilenav em {
	width: 14px;
	padding-top: 1px;
}

header li {
	list-style: none;
	position: relative;
	padding-bottom: calc(var(--spacing) * 0.75);
}

#menu {
	padding: calc(var(--spacing) * 1.5) 0 calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.65);
	height: calc(100vh - 80px);
	overflow-y: scroll;
	display: none;
	margin-bottom: 0;
}

/* Frueher oeffnete jQuerys slideToggle das Menue, indem es display
   direkt setzte. Jetzt uebernimmt das eine Klasse. */
#menu.open {
	display: block;
}

#menu a {
	display: block;
}

#menu .current {
	font-weight: bold;
}

#headerextra {
	margin-bottom: calc(var(--spacing) * 2);
}

#headerextra img {
	width: 125px;
}

#headerextra figure {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-content: space-between; 
}

#headerextra figcaption {
	text-align: right;
}


/*		B A S I C S
----------------------------------------------- */

#wrapper {
	margin: calc(var(--spacing) * 2.5) calc(var(--spacing) * 0.65) 0 calc(var(--spacing) * 0.65);
	padding-bottom: var(--spacing);
}

/* Grau ist die Dachzeile ueber der Seitenueberschrift -- und nur die.
   Vorher galt die Regel fuer jedes h2; auf der Startseite, wo h2 jetzt
   die Abschnittsueberschriften traegt, waere das falsch. */
#headline h2 {
	color: var(--color-grey);
}

h3 {
	margin-bottom: var(--spacing);
}

h2, h3 {
	font-size: 150%;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

main figure {
	margin-bottom: var(--spacing);
	padding-bottom: calc(var(--spacing) * 0.25);
	border-bottom: 1px solid var(--color-text);
}

hr {
	margin-top: calc(var(--spacing) * 2);
	margin-bottom: calc(var(--spacing) * 2);
	border: none;
	border-top: 3px solid var(--color-light);
}

/* Absatzabstand galt bisher nur innerhalb von <article>. Die Startseite hat
   keinen -- deshalb standen dort 23 <br> in einem einzigen <p>, um Absaetze
   nachzubauen (BITV 9.1.3.1d). Jetzt gilt der Abstand in ganz <main>, und
   die Startseite kann echte Absaetze verwenden. */
main p, article p, article h4 {
	margin-bottom: var(--spacing);
}

/* Abstand zwischen den vier Veranstaltungs-Dokumenten auf der Startseite */
.dok {
	margin-bottom: calc(var(--spacing) * 2);
}

/* Ersetzt drei <br> unter dem Video */
.nach-video {
	margin-top: calc(var(--spacing) * 2);
}

/* --- Video erst auf Klick (05.08.2026) --------------------------------
   Der Vimeo-iframe lag vorher fest im Quelltext; jeder Aufruf kontaktierte
   Vimeo, deren CDN setzte __cf_bm. Jetzt steht hier ein Schalter mit lokal
   gehostetem Vorschaubild. Die Huelle haelt das Seitenverhaeltnis, damit
   beim Austausch gegen den iframe nichts springt. */
.videohuelle {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-text);
}

.videohuelle .videorahmen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.videostart {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #fff;
	cursor: pointer;
	display: block;
	overflow: hidden;
}

.videostart img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.videostart-schild {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: calc(var(--spacing) * 0.6);
	text-align: left;
	/* Nicht auf 0 auslaufen lassen: weisse Schrift auf hellem Bild waere
	   sonst unlesbar. Rechnerisch schlechtester Fall (Bildpixel rein weiss)
	   bei 55 % Schwarz = 4,74:1, bei 85 % = 15:1 -- beides ueber der
	   Grenze, unabhaengig davon, welches Bild darunter liegt. */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
}

.videostart-schild strong {
	display: block;
	font-size: 125%;
	line-height: 1.2;
}

.videostart-schild small {
	display: block;
	font-size: 80%;
	line-height: 1.35;
	margin-top: calc(var(--spacing) * 0.2);
}

.videostart:hover .videostart-schild strong,
.videostart:focus-visible .videostart-schild strong {
	text-decoration: underline;
}

.dok p:last-child {
	margin-bottom: 0;
}

article h4 {
	padding-top: var(--spacing);
}

#projgrid {
	display: grid;
	row-gap: calc(var(--spacing) * 1.75);
}

.proj {
	background: var(--color-light);
	padding-top: calc(var(--spacing) * 0.4);
	border: none !important;
	display: grid;
}

/* Kachelkoepfe sind von h4/h5 auf h3/h4 gerueckt, damit die Startseite
   nicht von h2 auf h4 springt. */
.proj h3, .proj h4, .proj p {
	padding-left: calc(var(--spacing) * 0.5);
	padding-right: calc(var(--spacing) * 0.5);
}

.proj h4 {
	font-size: 125%;
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin-bottom: var(--spacing);
	padding-top: 0;
}

.proj p {
	margin-bottom: calc(var(--spacing) * 0.4);
}

.proj img {
	margin-bottom: -15px;
	align-self: end;
}

footer {
	margin-top: calc(var(--spacing) * 2);
	padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.65) calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.65);
	background: var(--color-light);
}

footer ul {
	margin-top: var(--spacing);
}

footer li {
	list-style: none;
	display: inline-block;
	margin-right: calc(var(--spacing) * 0.25);
}

#twoimg {
	position: relative;
	margin-bottom: calc(var(--spacing) * 0.5);
}

#twoimg img {
	object-fit: cover;
}

#twoimg img:first-child {
	margin-top: calc(100vw / 6);
	width: calc(100% / 8 * 4 - var(--spacing) / 2);
	height: calc(100vw / 3);
}

#twoimg img:last-child {
	position: absolute;
	right: -5px;
	top: -30px;
	z-index: 10;
	border: 5px solid #fff;
	box-sizing: content-box;
	width: calc(100% / 12 * 8 - var(--spacing) + 10px);
	height: calc(100vw / 2.5);
}

#petaflops {
	font-size: 80%;
	letter-spacing: 0.015em;
	line-height: 1.45;
	margin-top: calc(var(--spacing) * 2);
	margin-bottom: calc(var(--spacing) * 2);
	padding: calc(var(--spacing) * 0.5) 0;
	border-top: 3px solid var(--color-light);
	border-bottom: 3px solid var(--color-light);
}

#petaflops div:first-child {
	font-size: 150%;
	letter-spacing: -0.03em;
}

/* Das Akkordeon laeuft jetzt ueber <details>/<summary> statt jQuery UI.
   Der Browser bringt Tastaturbedienung und Screenreader-Ansage selbst
   mit; die frueheren ui-state-*-Klassen entfallen ersatzlos. Auch der
   leere erste <h4>-Platzhalter ist weg -- er war nur noetig, weil
   jQuery UI immer ein Panel geoeffnet haben wollte. */

#faq summary {
	list-style: none;
	cursor: pointer;
}

#faq summary::-webkit-details-marker {
	display: none;
}

#faq h4 {
	padding-left: calc(var(--spacing) * 1);
	text-indent: calc(var(--spacing) * -0.5);
}

#faq h4:before {
	content: "↓";
	display: inline-block;
	width: calc(var(--spacing) * 0.5);
}

#faq details[open] > summary h4 {
	color: var(--color-link-text);
}

#faq details[open] > summary h4:before {
	content: "↑";
}

#faq summary:hover h4 {
	color: var(--color-link-text);
}

#faq div {
	margin-left: calc(var(--spacing) * 1);
}

.button {
	color: #fff !important;
	background: var(--color-link);
	border-radius: 3px;
	padding: 8px 15px 6px 15px;
	border: none !important;
	font-weight: bold;
	/* 20px fett gilt als grosse Schrift -- damit greift die Grenze 3:1
	   statt 4,5:1, und die Hausfarbe reicht. Ohne diese Zeile erbt der
	   Button unter 1150px die Grundschrift von 17px, faellt damit unter
	   "normale Schrift" und braeuchte 4,5:1. Genau daran scheiterte die
	   mobile Messung, waehrend sie am Desktop (dort ohnehin 20px) bestand. */
	font-size: 1.25rem;
	line-height: 1.3;
	display: inline-block;
}

.button:hover {
	background: var(--color-dark);
}


/*		R E S P O N S I V E
----------------------------------------------- */

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

#projgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(var(--spacing) * 0.65);
	row-gap: var(--spacing);
}

}


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

#wrapper {
	margin: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2) 0 calc(var(--spacing) * 2);
}

header h1 {
	margin-left: calc(var(--spacing) * 2);
}

#mobilenav {
	right: calc(var(--spacing) * 2);
}

#menu {
	padding: calc(var(--spacing) * 1.5) 0 calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
}

footer {
	padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2) calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
}

#projgrid {
	column-gap: calc(var(--spacing) * 1);
	row-gap: calc(var(--spacing) * 1.45);
}

#twoimg img:first-child {
	height: calc(100vw / 4);
}

#twoimg img:last-child {
	height: calc(100vw / 3.5);
}

}


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

#headline {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: calc(var(--spacing) * 1);
}

#headline h3 {
	grid-column-start: 2;
	grid-column-end: 4;
}

article figure {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: calc(var(--spacing) * 1);
	border: none;
}

article figure img {
	grid-column-start: 2;
	grid-column-end: 4;
}

article figure figcaption {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 1;
	border-top: 1px solid var(--color-text);
	padding-top: calc(var(--spacing) * 0.25);
}

article p, article h4 {
	margin-left: calc(100% / 3 + var(--spacing) / 3);
}

#faq div {
	margin-left: calc(var(--spacing) * 1.5);
}

}


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

#projgrid {
	grid-template-columns: 1fr 1fr 1fr;
}

}


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

header {
	padding-top: 0;
	position: relative;
	background-image: none;
}

header h1 {
	padding: calc(var(--spacing) * 0.35);
	padding-bottom: calc(var(--spacing) * 0.7);
	box-sizing: border-box;
	width: calc(100% / 12 * 3 - var(--spacing) * 1.5);
	font-size: 200%;
	letter-spacing: -0.025em;
	line-height: 0.95;
	background-image: linear-gradient(110deg, var(--color-dark), var(--color-link));
}

header h1 span {
	display: block;
}

header em, header strong {
	display: none;
}

/* Ab hier ist der Kopf hell -- der weisse Fokusring von oben waere
   unsichtbar. Nur die h1 behaelt ihren blauen Verlauf. */
header :focus-visible {
	outline-color: var(--color-dark);
}

header h1 a:focus-visible {
	outline-color: #fff;
}

header li {
	list-style: none;
	position: relative;
	padding-bottom: calc(var(--spacing) * 0.75);
}

#menu {
	padding: 0;
	height: inherit;
	overflow-y: inherit;
	display: block !important;
	margin-bottom: 0;
}

#headerextra {
	margin-bottom: 0;
	position: absolute;
	z-index: 100;
	top: 10px;
	right: calc(var(--spacing) * 2);
	width: calc(100% / 12 * 3 - var(--spacing) * 1.5);
}

#headerextra img {
	width: 100%;
	margin-bottom: calc(var(--spacing) * 0.5);
}

#headerextra figure {
	width: 100%;
	display: block;
}

#menu {
	background: var(--color-light);
	padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2) var(--spacing) calc(var(--spacing) * 2);
	margin-top: calc(var(--spacing) * 2);
	line-height: 1.25;
}

nav a:link, nav a:visited {
	color: var(--color-text);
	border-top: 1px solid var(--color-text);
	padding-top: calc(var(--spacing) * 0.25);
}

#menu .current, nav a:hover, nav a:active {
	border-top-width: 2px;
	padding-top: calc(var(--spacing) * 0.25 - 1px);
}

header ul {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: var(--spacing);
}

header li {
	position: inherit;
	padding-bottom: 0;
}

header li span {
	display: block;
}

#wrapper {
	margin-top: var(--spacing);
}

#twoimg {
	width: calc(100vw - var(--spacing) * 4);
	position: absolute;
	top: calc(var(--spacing) * 2);
}

#start #menu {
	margin-top: calc(100vw / 5 * 2);
}

#start #headerextra {
	top: calc(100vw / 6 * 2);
}

}


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

:root {
	--spacing: 1.9rem;
}

body {
	font-size: 1.25rem;
}

}


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

#wrapper, footer div, #menu ul {
	width: 1158px;
	margin-left: auto;
	margin-right: auto;
}

header {
	padding-top: 200px;
}

header h1 {
	width: 274px;
	position: absolute;
	left: calc(50vw - 579px);
	top: 0;
	margin-left: 0;
}

#headerextra {
	width: 170px;
	position: absolute;
	right: calc(50vw - 579px);
	margin-right: 0;
}

#headerextra img {
	margin-bottom: 13px;
}

#menu {
	margin-top: 0;
}

#twoimg {
	width: 1157px;
	position: absolute;
	top: 61px;
	left: calc(50vw - 579px);
}

#twoimg img:first-child {
	width: 563px;
	height: 320px;
	margin-top: 213px;
}

#twoimg img:last-child {
	width: 756px;
	height: 366px;
}

#start #menu {
	margin-top: 463px;
}

#start #headerextra {
	top: 426px;
}

}