/* ==================================================================
thimm – Institut für Bildungs- und Karriereberatung
Stil: Editorial Grid — asymmetrisches Raster, Initial, Auszugszitat,
großes Bildmotiv, Haarlinien als Gliederung
Schriften: Noto Serif Display Light 300, Breite Normal 100 (Überschriften)
+ Noto Sans (Text), selbst gehostet. Noto Sans ist auch die
Schrift der Wortmarke im Logo. Kleine Serifentitel stehen in
Medium 500. Ohne die Dateien greifen Systemschriften.
Source Serif 4 und Source Sans 3 liegen weiter bei; ein
Wechsel ist je eine Zeile (--schrift-display, --schrift-text).
Grundsatz: keine Ladevorgänge zu fremden Servern, keine Cookies.
================================================================== */
/* ---------- Schriften (selbst gehostet, siehe README) ----------
U+2122 (™) steht am Ende jedes Bereichs, weil das Markenzeichen sonst aus
einer Ersatzschrift käme. ® liegt bei U+00AE und ist ohnehin abgedeckt. */
@font-face {
font-family: "Source Serif 4";
src: url("../fonts/source-serif-4-latin-300.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Source Serif 4";
src: url("../fonts/source-serif-4-latin-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Source Serif 4";
src: url("../fonts/source-serif-4-latin-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Source Serif 4";
src: url("../fonts/source-serif-4-latin-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Noto Serif Display";
src: url("../fonts/noto-serif-display-latin-300.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Noto Serif Display";
src: url("../fonts/noto-serif-display-latin-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Noto Serif Display";
src: url("../fonts/noto-serif-display-latin-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Noto Serif Display";
src: url("../fonts/noto-serif-display-latin-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Noto Sans";
src: url("../fonts/noto-sans-latin-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Noto Sans";
src: url("../fonts/noto-sans-latin-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Source Sans 3";
src: url("../fonts/source-sans-3-latin-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Source Sans 3";
src: url("../fonts/source-sans-3-latin-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
:root {
/* Blau aus dem Originallogo. Websafe und dunkler als der vorherige Ton —
Weiß darauf erreicht 12,6:1 statt 9,4:1. Der dunklere Ton daneben ist
nur für Mauszeigerzustände und deshalb nicht websafe gerundet. */
--farbe-primaer: #003366;
--farbe-primaer-dunkel: #002750;
--farbe-auf-primaer: #FFFFFF;
--farbe-grund: #FFFFFF;
--farbe-flaeche: #EFF3F6;
--farbe-text: #16202B;
--farbe-text-weich: #45535F;
--farbe-text-leise: #5F6E7A;
--farbe-linie: #DCE3EA;
--farbe-linie-stark: #C3CED8;
--farbe-linie-kontrast: #16202B;
--abstand-1: 8px;
--abstand-2: 16px;
--abstand-3: 24px;
--abstand-4: 40px;
--abstand-5: 64px;
--abstand-6: 96px;
--abstand-7: 128px;
/* 14.09.2026, abends: von 1240 auf 1080 verengt. Bei 1240 nutzte der
Fließtext mit 620 px nur die Hälfte des Korridors; die andere Hälfte
stand rechts leer und hatte keine Aufgabe. Jetzt liegt der Rest
außen, wo das Auge ihn erwartet. Siehe LAYOUT-PRUEFUNG.md, Punkt 3. */
--breite-gesamt: 1000px;
--breite-lesbar: 62ch;
/* Breite der Marginalspalte (Seitenindex). */
--breite-marginalie: 14rem;
/* Zum Zurückschalten hier "Source Serif 4" eintragen — sonst nichts. */
--schrift-display: "Noto Serif Display", Georgia, "Times New Roman", serif;
--schrift-text: "Noto Sans", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Pfeil für „Mehr erfahren" — als Maske, damit er nicht von der Schrift abhängt */
--pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.6 1L15 5l-4.4 4M15 5H0' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Schriftgrößen als Stufen. Vorher standen achtzehn Einzelwerte im
Stylesheet, darunter .95 und .97 rem — ein halbes Pixel Unterschied,
unsichtbar, aber bei jeder Änderung eine Suchaktion. */
--schrift-xs: .78rem; /* Augenbrauen, Quellenangaben */
--schrift-s: .9rem; /* Bildunterschriften, Fußbereich */
--schrift-m: 1rem; /* Fließtext */
--schrift-l: 1.12rem; /* hervorgehobene Absätze */
--schrift-xl: clamp(1.2rem, 2.2vw, 1.45rem); /* Vorspann */
--schrift-2xl: clamp(1.5rem, 3.2vw, 2rem); /* Abschnittstitel */
--schrift-3xl: clamp(2rem, 5.2vw, 3.4rem); /* Seitentitel */
--dauer: 200ms;
--verlauf: cubic-bezier(.2, .6, .3, 1);
--radius: 3px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--farbe-grund);
color: var(--farbe-text);
font-family: var(--schrift-text);
font-size: 17px; /* Basis ist das Telefon; ab 600px 18px */
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overflow-wrap: break-word;
}
/* padding-inline statt der Kurzschreibweise: padding würde auch oben und
unten zurücksetzen und damit das Polster von .fuss-innen zerstören. */
.innen { max-width: var(--breite-gesamt); margin: 0 auto; padding-inline: var(--abstand-2); }
.innen.schmal { max-width: calc(var(--breite-lesbar) + 2 * var(--abstand-3)); }
h1, h2, h3 {
font-family: var(--schrift-display);
font-weight: 300;
line-height: 1.14;
letter-spacing: -0.014em;
text-wrap: balance;
}
/* Noto Serif Display ist eine Schrift für große Grade: dünne Haarstriche,
starker Strichkontrast. In den Überschriften trägt das Light (300) genau
deshalb. Unter etwa 22 Pixeln verschwindet es aber. Diese kleinen
Serifentitel stehen darum in Medium (500) — kräftig genug zum Lesen,
ohne neben den leichten Überschriften wie ein Fremdkörper zu wirken.
Damit ein Wechsel zurück sauber bleibt, liegt auch von Source Serif 4
der Medium-Schnitt bereit — sonst würde der Browser ihn selbst
verzerren. */
.schritt h3,
.nachweis h3,
.presse a,
.kachel a,
.vortraege .titel-ohne-ziel,
.antwort-rat,
.ankuendigung-text em { font-weight: 500; }
a {
color: var(--farbe-primaer);
text-underline-offset: 3px;
transition: color var(--dauer) var(--verlauf);
}
a:hover { color: var(--farbe-primaer-dunkel); }
a:focus-visible {
outline: 2px solid var(--farbe-primaer);
outline-offset: 3px;
border-radius: 2px;
}
img { max-width: 100%; height: auto; display: block; }
/* Kennzeichnung über Abschnitten — trägt Information, kein Zierrat */
.augenbraue {
font-family: var(--schrift-text);
font-size: .75rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
}
.skip {
position: absolute; left: -9999px;
background: var(--farbe-primaer); color: var(--farbe-auf-primaer);
padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 0; top: 0; }
/* ---------- Seitenwechsel ----------
Blendet beim Klick auf einen Verweis weich zur nächsten Seite über,
statt hart umzuschalten. Eine Zeile, moderne Browser können es von
selbst; ältere ignorieren sie folgenlos. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ---------- Erscheinen beim Scrollen ----------
Zwei Wege zum selben Ziel: Browser mit scroll-getriebenen Animationen
erledigen es allein im CSS (flüssiger, kein JavaScript nötig), alle
anderen bekommen weiterhin die Klasse .sichtbar aus dem Beobachter. */
@supports (animation-timeline: view()) {
.zeigt {
opacity: 0;
animation: auftauchen linear both;
animation-timeline: view();
animation-range: entry 10% cover 26%;
}
.zeigt.sichtbar { opacity: 1; }
/* Animationen stehen im Kaskadenrang über normalen Regeln. Bei reduzierter
Bewegung muss die Animation daher abgeschaltet werden, sonst bliebe der
Abschnitt in seinem Anfangszustand hängen — also unsichtbar. */
@media (prefers-reduced-motion: reduce) {
.zeigt { animation: none; opacity: 1; }
}
}
@keyframes auftauchen {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.zeigt { opacity: 0; transform: translateY(14px); }
.zeigt.sichtbar {
opacity: 1; transform: none;
transition: opacity 400ms var(--verlauf), transform 400ms var(--verlauf);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.zeigt, .zeigt.sichtbar { opacity: 1; transform: none; transition: none; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--farbe-linie-kontrast); }
.kopf-innen {
display: flex;
flex-direction: row; /* Signet links, Burger rechts */
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: var(--abstand-2);
padding-top: var(--abstand-2);
padding-bottom: var(--abstand-2);
}
/* ---------- Logo ----------
Ab 1024px steht das gelieferte Logo unverändert da: dieselbe Datei,
dieselben Größenverhältnisse, nichts nachgebaut. Am Telefon wäre es
unbrauchbar — die Unterzeile käme bei Kopfzeilenhöhe auf vier Pixel —,
deshalb steht dort nur das Signet, als Vektor nachgezeichnet.
Die Höhe steuert alles: font-size auf .marke ist bei der vollen Fassung
die Logohöhe, bei der Telefonfassung die Höhe des Signets. Beide Male
hängt die Breite am Seitenverhältnis, damit nichts verzerrt. */
.marke {
display: flex;
align-items: flex-end;
flex: none;
color: var(--farbe-primaer);
font-size: 40px;
line-height: 0;
}
.marke svg { display: block; height: 100%; width: auto; }
.marke-signet { display: block; height: 1em; aspect-ratio: 213 / 257; }
.marke-voll { display: none; height: 1em; aspect-ratio: 692 / 258; }
/* ---------- Schriftzug neben dem Signet (unter 1024px) ----------
Am Telefon stand bisher nur das Signet. Das vollstaendige Logo scheidet
dort aus, weil seine Unterzeile bei Kopfzeilenhoehe auf acht Pixel kaeme
und damit unlesbar waere. Der Schriftzug ohne Unterzeile passt aber.
Er ist kein Nachbau: derselbe Pfad aus derselben Datei, nur ohne die
Unterzeile. Die Groesse haengt nicht am Signet, sondern steht fuer sich —
im Originallogo ist der Schriftzug klein, weil die Unterzeile darunter
Platz braucht. Ohne sie darf er groesser stehen.
Ausschnitt gemessen, nicht geschaetzt: Die Buchstaben liegen im Logo
zwischen x 231 und 447, y 159 und 214. Daraus das Seitenverhaeltnis. */
.marke-wort {
display: block;
height: .54em; /* .52 plus die Luft im Ausschnitt */
aspect-ratio: 218 / 57;
margin-left: .24em;
/* Kein Versatz nach unten: .marke richtet seine Kinder unten aus, damit
steht die Schrift auf derselben Linie wie die Unterkante des Signets.
Auch keine eigene Farbangabe — .marke setzt sie, und nur wer sie erbt,
wird im Dunkelmodus zusammen mit dem Signet umgekehrt. */
}
.marke-wort svg { display: block; height: 100%; width: auto; }
/* Ohne Popover-Unterstützung bleibt der Burger verborgen und die
Navigation steht als umbrechende Liste da. */
.burger, .navi-zu { display: none; }
.navi ul {
list-style: none; display: flex; flex-wrap: wrap;
gap: 0 var(--abstand-3); margin: 0; padding: 0;
}
.navi a {
display: flex; align-items: center;
min-height: 44px; padding: 10px 0;
font-size: .84rem; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase;
color: var(--farbe-text-weich); text-decoration: none;
border-bottom: 2px solid transparent;
transition: color var(--dauer) var(--verlauf),
border-color var(--dauer) var(--verlauf);
}
.navi a:hover { color: var(--farbe-primaer); border-bottom-color: var(--farbe-linie-stark); }
.navi a[aria-current] { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); }
/* ---------- Hero: asymmetrisch, Zitat gegen Bild ---------- */
.hero { padding: clamp(var(--abstand-5), 7vw, var(--abstand-7)) 0; }
.hero-innen {
display: grid;
grid-template-columns: 1fr;
gap: clamp(var(--abstand-4), 5vw, var(--abstand-6));
align-items: center;
}
.hero-bild { order: -1; } /* am Telefon steht das Bild oben */
.hero blockquote {
margin: 0;
font-family: var(--schrift-display);
font-size: clamp(2rem, 5.2vw, 3.6rem);
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.028em;
text-wrap: balance;
hyphens: none;
}
.hero blockquote em {
font-style: italic;
color: var(--farbe-primaer);
}
.hero-zusatz {
margin: var(--abstand-4) 0 0;
max-width: 44ch;
color: var(--farbe-text-weich);
font-size: 1.05rem;
}
.hero-bild { position: relative; }
.hero-bild img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
figure { margin: 0; }
figcaption {
margin-top: var(--abstand-1);
font-size: .75rem;
letter-spacing: .05em;
color: var(--farbe-text-leise);
}
/* ---------- Fließtext, editorial gesetzt ---------- */
.einleitung {
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
border-top: 1px solid var(--farbe-linie-kontrast);
}
.einleitung-innen {
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-4);
}
.einleitung-innen > * { max-width: var(--breite-lesbar); }
.einleitung h1 {
font-size: clamp(1.9rem, 4vw, 2.9rem);
margin: 0 0 var(--abstand-4);
max-width: 22ch;
}
.fliesstext p { margin: 0 0 var(--abstand-3); color: var(--farbe-text-weich); }
.fliesstext p:last-child { margin-bottom: 0; }
.fliesstext ul, .fliesstext ol { color: var(--farbe-text-weich); padding-left: var(--abstand-3); }
.fliesstext li { margin-bottom: var(--abstand-1); }
/* Aufzählungen tragen einen Halbgeviertstrich statt eines Punktes
(Ben, 15.09.). Die Punkte sind hier fast immer ganze Sätze — ein Strich
liest sich als Fortsetzung des Textes, ein Punkt als Häkchenliste.
Über ::marker, nicht über list-style:none plus ::before: Wer eine Liste
ihrer Punkte beraubt, nimmt Vorleseprogrammen in Safari die Ansage
„Liste mit vier Einträgen". Browser, die ::marker-Inhalte nicht können,
zeigen weiterhin Punkte — das ist kein Schaden, nur kein Gewinn. */
.fliesstext ul > li::marker { content: "–\00a0\00a0"; }
/* Zwischenüberschriften in Textseiten. Kleiner als eine Abschnittsüberschrift
der Startseite — sie gliedern einen Lesetext, sie eröffnen keinen Bereich. */
.fliesstext h2 {
font-size: clamp(1.35rem, 2.6vw, 1.7rem);
margin: var(--abstand-5) 0 var(--abstand-2);
}
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext strong { color: var(--farbe-text); font-weight: 600; }
/* Weg zurück am Ende einer Textseite: Diese Seiten hängen nicht in der
Navigation, man kommt über einen Verweis im Text her. */
.zurueck {
margin: var(--abstand-5) 0 0;
padding-top: var(--abstand-3);
border-top: 1px solid var(--farbe-linie);
}
/* Initial — nur im ersten Absatz der Einleitung */
.mit-initial > p:first-of-type::first-letter {
float: left;
font-family: var(--schrift-display);
font-size: 3.4em;
line-height: .82;
font-weight: 600;
color: var(--farbe-primaer);
padding: 4px 12px 0 0;
}
/* Auszugszitat, bricht aus der Spalte aus */
.auszug {
grid-column: 1 / -1;
/* Linksbündig wie der Fließtext. Erst im dreispaltigen Raster ab 1024px
wird es mittig gesetzt und bricht aus der Lesespalte aus. */
justify-self: start;
max-width: 30ch;
margin: var(--abstand-5) 0;
padding: var(--abstand-3) 0;
border-top: 2px solid var(--farbe-linie-kontrast);
border-bottom: 1px solid var(--farbe-linie);
font-family: var(--schrift-display);
font-size: clamp(1.35rem, 2.8vw, 1.85rem);
font-weight: 300; /* wie die Überschriften */
line-height: 1.24;
letter-spacing: -0.014em;
color: var(--farbe-text);
text-wrap: balance;
}
.abschnitt { margin-top: var(--abstand-4); }
.abschnitt h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 0 0 var(--abstand-2); }
/* ---------- Arbeitsbereiche ---------- */
.bereiche {
background: var(--farbe-flaeche);
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
}
.abschnittstitel {
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
margin: 0 0 var(--abstand-5);
max-width: 22ch;
}
.einleitung h2 { max-width: 22ch; }
/* Zwei Gewichte: „groß" gehört dem Geschäft (Schulen, Einzelberatung),
„klein" den Belegen für Vernetzung. Beide belegen eine halbe Zeile;
der Unterschied liegt in Bildhöhe und Schriftgröße, nicht in der Breite.
So bleibt das Raster geschlossen, egal wie viele Einträge es gibt. */
.kacheln {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-4) var(--abstand-3);
}
/* Die ganze Kachel ist anklickbar, nicht nur die Überschrift — auf dem Handy
ist eine einzeilige Überschrift als Ziel zu klein. Gleiche Technik wie bei
den Pressezeilen: unsichtbare Fläche über die Kachel, Markup bleibt gültig. */
.kachel { display: flex; flex-direction: column; position: relative; }
.kachel-text h3 a::after { content: ""; position: absolute; inset: 0; }
/* „Mehr erfahren" liegt darüber, damit es eigenständig anklickbar bleibt. */
.kachel .weiter { position: relative; z-index: 1; }
.kachel:has(h3 a:focus-visible) {
outline: 2px solid var(--farbe-primaer);
outline-offset: 6px;
}
.kachel:has(h3 a:focus-visible) h3 a:focus-visible { outline: none; }
.kachel-bild {
aspect-ratio: 4 / 3;
overflow: hidden;
margin-bottom: var(--abstand-2);
background: var(--farbe-linie);
}
.kachel-klein .kachel-bild { aspect-ratio: 21 / 9; }
.kachel-klein .kachel-text h3 { font-size: 1.15rem; }
.kachel-klein .kachel-text p { font-size: .9rem; }
.kachel-bild img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 500ms var(--verlauf);
}
.kachel:hover .kachel-bild img { transform: scale(1.04); }
.kachel-text { display: flex; flex-direction: column; flex: 1; }
.kachel-text h3 {
font-size: 1.35rem;
margin: 0 0 var(--abstand-1);
padding-top: var(--abstand-1);
border-top: 2px solid var(--farbe-linie-kontrast);
}
.kachel-text h3 a { text-decoration: none; color: var(--farbe-text); }
.kachel-text h3 a:hover { color: var(--farbe-primaer); }
.kachel-text p {
margin: 0 0 var(--abstand-2);
color: var(--farbe-text-weich);
font-size: .95rem; line-height: 1.6;
}
.weiter {
margin-top: auto; align-self: flex-start;
display: inline-flex; align-items: center; gap: 7px;
min-height: 44px;
font-size: .78rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
text-decoration: none;
}
/* Der Pfeil wird gezeichnet, nicht gesetzt. Das Zeichen → (U+2192) liegt
außerhalb des Lateinbereichs der eingebundenen Schriften; es käme aus einer
Ersatzschrift und sähe je nach Gerät anders aus. Als Maske übernimmt es
Farbe und Größe der Schrift, ohne von ihr abzuhängen. */
.weiter span {
width: 15px; height: 10px;
flex: none;
background: currentColor;
-webkit-mask: var(--pfeil) no-repeat center / contain;
mask: var(--pfeil) no-repeat center / contain;
transition: transform var(--dauer) var(--verlauf);
}
.weiter:hover span { transform: translateX(4px); }
.weiter:hover { text-decoration: underline; }
/* ---------- Zahlenband ----------
Direkt unter dem Kopfbereich. Belegbare Zahlen, keine Behauptungen.
Bewusst schmucklos: die Zahl trägt, nicht der Rahmen. */
.zahlenband {
/* Beide Kanten dunkel: Das Band laeuft ueber die volle Breite, und nach
der Regel bei „Was dazugehoert" sind randlose Linien Abschnittsgrenzen
und damit dunkel. Unten stand hier eine helle — die Kante las sich
dadurch wie ein Element auf Textbreite, war aber randlos. Ausserdem
schloss das Band damit leiser, als es oeffnete, obwohl beide Kanten
dasselbe trennen. (24.09.2026) */
border-top: 1px solid var(--farbe-linie-kontrast);
border-bottom: 1px solid var(--farbe-linie-kontrast);
padding: var(--abstand-4) 0;
}
.zahlen {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--abstand-4);
}
.zahlen li {
display: flex;
flex-direction: column;
gap: 2px;
}
.zahlen b {
font-family: var(--schrift-display);
font-size: clamp(2.6rem, 5.5vw, 3.6rem);
font-weight: 300;
line-height: 1;
color: var(--farbe-primaer);
font-variant-numeric: tabular-nums;
}
/* „seit" vor der Jahreszahl: klein und in Textschrift, damit die Zahl die
Zeile trägt und alle Einträge des Bandes gleich hoch beginnen. */
.zahlen .vorsatz {
font-family: var(--schrift-text);
font-size: .95rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: lowercase;
color: var(--farbe-text-leise);
margin-right: .35em;
vertical-align: .55em;
}
.zahlen span {
color: var(--farbe-text-weich);
font-size: .95rem;
line-height: 1.5;
max-width: 32ch;
}
/* ---------- Ankündigung ----------
Eine Zeile unter dem Zahlenband. Sie steht nur da, wenn wirklich ein
Termin ansteht, und verschwindet nach dem Datum von selbst — deshalb
darf sie auffallen, ohne die Seite dauerhaft zu belasten. */
.ankuendigung {
background: var(--farbe-flaeche);
border-bottom: 1px solid var(--farbe-linie);
padding: var(--abstand-3) 0;
}
.ankuendigung-innen {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--abstand-1) var(--abstand-3);
}
.ankuendigung .augenbraue {
margin: 0;
color: var(--farbe-primaer);
flex: none;
}
.ankuendigung-text {
margin: 0;
flex: 1 1 32ch;
font-size: 1.02rem;
color: var(--farbe-text-weich);
}
.ankuendigung-text strong { color: var(--farbe-text); font-variant-numeric: tabular-nums; }
.ankuendigung-text em { font-family: var(--schrift-display); font-style: normal; color: var(--farbe-text); }
.ankuendigung .weiter { margin-top: 0; flex: none; }
/* Der Themenstreifen ist derselbe Baustein wie die Ankündigung, steht aber
dauerhaft. Deshalb oben eine Linie: Er beginnt einen neuen Gedanken,
während die Ankündigung oben nur das Zahlenband abschließt. */
/* Der Themenstreifen ist derselbe Baustein wie die Ankündigung, steht aber
direkt über dem Kachelblock — und der hat dieselbe Fläche. Zwei gleich
getönte Blöcke übereinander verschmelzen zu einem. Deshalb hier ohne
Fläche und stattdessen mit Kontrastlinie darüber, wie beim Zahlenband:
Die Kante entsteht oben durch die Linie, unten durch den Farbwechsel. */
.themenstreifen {
background: transparent;
border-top: 1px solid var(--farbe-linie-kontrast);
border-bottom: 0;
padding-bottom: var(--abstand-4);
}
/* Der Verweis unter dem Einleitungstext. „.weiter“ ist für Kacheln gebaut
und schiebt sich dort mit margin-top:auto nach unten — hier steht es in
einem Absatz und braucht einen eigenen Abstand. */
.einleitung-weiter { margin: var(--abstand-3) 0 0; }
.einleitung-weiter .weiter { margin-top: 0; }
/* Vorträge sehen aus wie die Presseliste — sie sind derselbe Belegtyp. */
.vortraege .titel-ohne-ziel {
display: inline-flex; align-items: center;
min-height: 44px;
font-family: var(--schrift-display);
font-size: 1.2rem; /* Gewicht: siehe kleine Serifentitel oben */
}
.vortraege li { cursor: auto; }
.vortraege li:has(a) { cursor: pointer; }
.vortraege li:not(:has(a)):hover { background: transparent; }
/* ---------- Ablauf ----------
Der Abschnitt, nach dem Eltern zuerst suchen. Nummeriert, weil die
Schritte tatsächlich aufeinander folgen — nicht als Dekoration. */
.ablauf {
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
}
.schritte {
list-style: none; margin: 0; padding: 0;
counter-reset: schritt;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
gap: var(--abstand-4) var(--abstand-3);
}
.schritt {
counter-increment: schritt;
position: relative;
padding-top: var(--abstand-2);
border-top: 2px solid var(--farbe-linie-kontrast);
transition: border-color var(--dauer) var(--verlauf);
}
/* Die Oberlinie füllt sich beim Überfahren in Hausfarbe — sie zeigt damit,
dass die Schritte zusammengehören, statt nur vier Kästen zu sein. */
.schritt::after {
content: "";
position: absolute; inset: -2px 0 auto 0;
height: 2px;
background: var(--farbe-primaer);
transform: scaleX(0);
transform-origin: left;
transition: transform 420ms var(--verlauf);
}
.schritte:hover .schritt::after { transform: scaleX(1); }
.schritte:hover .schritt:nth-child(2)::after { transition-delay: 90ms; }
.schritte:hover .schritt:nth-child(3)::after { transition-delay: 180ms; }
.schritte:hover .schritt:nth-child(4)::after { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
.schritt::after { display: none; }
}
.schritt::before {
content: counter(schritt, decimal-leading-zero);
display: block;
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em;
color: var(--farbe-primaer);
margin-bottom: var(--abstand-1);
}
.schritt h3 { font-size: 1.2rem; margin: 0 0 var(--abstand-1); }
/* „Anleitung und Nachbetreuung" passt nicht in eine Zeile. Ohne Zutun
begänne der Text darunter tiefer als in den drei Nachbarspalten. Mit
Teilraster richten sich Nummer, Titel und Text über alle Spalten
aneinander aus — unabhängig davon, wie lang ein Titel ist. Browser ohne
Teilraster zeigen die Spalten wie bisher, nur eben ungleich hoch. */
@supports (grid-template-rows: subgrid) {
.schritt {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
row-gap: 0; /* sonst erbt jede Zeile die 40px des Rasters */
}
.schritt h3 { align-self: start; }
}
.schritt p {
margin: 0;
color: var(--farbe-text-weich);
font-size: .95rem; line-height: 1.6;
}
/* ---------- Zeitpunktwähler ----------
Der einzige wirklich interaktive Abschnitt. Er beantwortet die häufigste
Elternfrage und ist damit Inhalt, nicht Zierrat.
Gebaut aus Radioknöpfen und :has() — kein JavaScript. Das hat drei Vorteile:
Tastaturbedienung und Vorlesesoftware funktionieren von selbst, es gibt
nichts zu laden, und ohne :has()-Unterstützung stehen alle Antworten
untereinander statt zu verschwinden. */
.zeitpunkt {
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
border-top: 1px solid var(--farbe-linie);
}
.stufenwahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.nur-vorlesen {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.stufen {
display: flex; flex-wrap: wrap;
gap: var(--abstand-2);
margin-bottom: var(--abstand-4);
}
.stufen label {
display: flex; flex-direction: column; gap: 2px;
min-height: 62px; padding: 10px 20px;
border: 1px solid var(--farbe-linie-stark);
border-radius: var(--radius);
background: var(--farbe-grund);
cursor: pointer;
transition: border-color var(--dauer) var(--verlauf),
background-color var(--dauer) var(--verlauf),
color var(--dauer) var(--verlauf),
transform var(--dauer) var(--verlauf);
}
.stufen label:hover { border-color: var(--farbe-primaer); transform: translateY(-1px); }
.stufe-name { font-weight: 600; font-size: .97rem; }
.stufe-lage {
font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--farbe-text-leise);
transition: color var(--dauer) var(--verlauf);
}
/* Ausgewählte Stufe */
.stufen input:checked + label {
background: var(--farbe-primaer);
border-color: var(--farbe-primaer);
color: var(--farbe-auf-primaer);
}
/* Nicht durchscheinend abschwächen: Weiß mit 75 % Deckkraft auf der Hausfarbe
ergibt nur 2,47:1 und verfehlt die geforderten 4,5:1 deutlich. Ein fester,
heller Ton hält den Kontrast und wirkt trotzdem zurückgenommen. */
.stufen input:checked + label .stufe-lage {
color: #D6E2EC;
}
/* Tastaturfokus muss sichtbar sein, obwohl der Knopf selbst versteckt ist */
.stufen input:focus-visible + label {
outline: 2px solid var(--farbe-primaer);
outline-offset: 3px;
}
.antworten { position: relative; }
.antwort {
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-3) var(--abstand-4);
align-items: start;
}
.antwort-text { margin: 0; color: var(--farbe-text-weich); font-size: 1.05rem; }
.antwort-rat {
margin: 0;
align-self: start;
padding: var(--abstand-2) var(--abstand-3);
border-left: 2px solid var(--farbe-primaer);
background: var(--farbe-flaeche);
font-family: var(--schrift-display);
font-size: 1.1rem;
line-height: 1.3;
max-width: 26ch;
}
/* Nur mit :has()-Unterstützung wird umgeschaltet. Sonst bleibt alles sichtbar. */
@supports selector(:has(*)) {
.antworten { display: grid; }
.antwort {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 260ms var(--verlauf), transform 260ms var(--verlauf),
visibility 260ms;
}
.stufenwahl:has(#stufe-0:checked) .antwort[data-fuer="0"],
.stufenwahl:has(#stufe-1:checked) .antwort[data-fuer="1"],
.stufenwahl:has(#stufe-2:checked) .antwort[data-fuer="2"],
.stufenwahl:has(#stufe-3:checked) .antwort[data-fuer="3"] {
opacity: 1; visibility: visible; transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.antwort { transition: none; }
}
/* ---------- FIBIDO ----------
Eigenentwicklung, deshalb eigener Block statt einer Zeile im Fließtext. */
.fibido {
background: var(--farbe-flaeche);
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
/* Linie am farbigen Block selbst — nicht als border-top des Nachbarn.
Sonst zeigt sich bei .zeigt/transform oft ein weißer Haarspalt
zwischen Fläche und Linie (GPU-Compositing). */
border-bottom: 1px solid var(--farbe-linie-kontrast);
}
.fibido + .einleitung { border-top: 0; }
.fibido-innen {
display: grid;
grid-template-columns: 1fr;
gap: clamp(var(--abstand-4), 5vw, var(--abstand-6));
align-items: start;
}
.fibido-kurz {
/* Name und Markenzeichen dürfen nicht getrennt werden. body erlaubt
overflow-wrap: break-word — das brach „FIBIDO™" in zwei Zeilen, sobald
die Spalte zu schmal wurde. */
white-space: nowrap;
overflow-wrap: normal;
font-family: var(--schrift-display);
font-size: clamp(2.4rem, 5vw, 3.4rem);
line-height: 1;
margin: 0 0 var(--abstand-1);
color: var(--farbe-primaer);
letter-spacing: .02em;
}
/* Klein, hochgestellt, ohne Sperrung — es soll den Namen kennzeichnen,
nicht mit ihm konkurrieren. Für Vorlesesoftware ausgeblendet. */
.marken-zeichen {
font-family: var(--schrift-text);
font-size: .65em;
font-weight: 600;
letter-spacing: 0;
vertical-align: super;
margin-left: .05em;
color: inherit;
/* Unterstreichung vom Link nicht mit hochziehen — sonst bricht die
Linie im Fußbereich unter dem ™ auseinander. */
text-decoration: none;
}
/* Im großen FIBIDO-Namen: bündig mit der Versaloberkante (Display-Schnitt). */
.fibido-kurz .marken-zeichen {
font-size: .42em;
/* Gerechnet: Versalhöhe der Serifenschrift ≈ 0,67em, Oberkante des ™ in
der Textschrift ≈ 0,66em der eigenen Größe. Anzuheben ist die Differenz,
bezogen auf die eigene Schriftgröße: (0,67 − 0,66 × 0,42) / 0,42 ≈ 0,94. */
vertical-align: 0.94em;
margin-left: .1em;
}
.fibido-lang {
margin: 0;
padding-top: var(--abstand-2);
border-top: 2px solid var(--farbe-primaer);
font-size: .95rem;
line-height: 1.45;
color: var(--farbe-text-weich);
}
.fibido-text .fliesstext p { font-size: 1.05rem; }
.fibido-text .weiter { margin-top: var(--abstand-3); }
/* ---------- Vertrauensbelege ---------- */
.belege {
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
border-top: 1px solid var(--farbe-linie-kontrast);
}
.vorspann {
max-width: 58ch;
margin: calc(-1 * var(--abstand-3)) 0 var(--abstand-5);
color: var(--farbe-text-weich);
}
.nachweise {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--abstand-3);
}
.nachweis {
display: flex; flex-direction: column;
padding-top: var(--abstand-2);
border-top: 1px solid var(--farbe-linie-stark);
}
/* Alle Nachweise bekommen dieselbe Box: gleiche Breite, gleiches Verhältnis.
Vorher richtete sich die Breite nach dem Seitenverhältnis des Bildes — ein
Hochformat wurde schmal, ein Querformat breit, und die Zeile wirkte unruhig.
object-fit: contain hält jedes Motiv unverzerrt in seiner Box. */
.nachweis-bild {
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: var(--abstand-2);
/* Ohne Füllung: Die Siegel bringen ihren eigenen Grund mit — AZAV und das
Zertifikat weiß, der Schulpreis türkis. Eine Fläche darunter erzeugte
nur einen sichtbaren Rahmen um die weißen Motive. */
display: grid;
place-items: center;
overflow: hidden;
}
.nachweis-bild img {
width: 100%; height: 100%;
object-fit: contain;
}
.nachweis h3 { font-size: 1.1rem; margin: 0 0 var(--abstand-1); }
.nachweis p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--farbe-text-weich); }
.presse { margin-top: clamp(var(--abstand-5), 6vw, var(--abstand-6)); }
.presse h3 {
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
}
.presse ul { list-style: none; margin: 0; padding: 0; }
/* Die ganze Zeile ist anklickbar. Umgesetzt über eine unsichtbare Fläche,
die der Verweis über die Zeile legt — so bleibt das Markup gültig und
die Vorlesesoftware liest weiterhin nur den Titel als Verweistext, nicht
Titel plus Dateigröße plus Quelle. */
.presse li {
position: relative;
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--abstand-1) var(--abstand-3);
padding: var(--abstand-3) var(--abstand-2);
margin-inline: calc(-1 * var(--abstand-2));
border-top: 1px solid var(--farbe-linie);
cursor: pointer;
transition: background-color var(--dauer) var(--verlauf);
}
.presse li:last-child { border-bottom: 1px solid var(--farbe-linie); }
.presse a::after { content: ""; position: absolute; inset: 0; }
.presse li:hover { background: var(--farbe-flaeche); }
.presse li:hover a { color: var(--farbe-primaer); }
.presse li:hover .dateihinweis { border-color: var(--farbe-primaer); }
/* Der Fokusrahmen gehört um die ganze Zeile, nicht um den kurzen Titel. */
.presse li:has(a:focus-visible) {
outline: 2px solid var(--farbe-primaer);
outline-offset: 2px;
border-radius: var(--radius);
}
.presse li:has(a:focus-visible) a:focus-visible { outline: none; }
.presse a {
display: inline-flex; align-items: center; gap: var(--abstand-2);
min-height: 44px;
font-family: var(--schrift-display);
font-size: 1.2rem; /* Gewicht: siehe kleine Serifentitel oben */
text-decoration: none; color: var(--farbe-text);
}
.presse a:hover { color: var(--farbe-primaer); text-decoration: underline; }
.dateihinweis {
font-family: var(--schrift-text); font-weight: 600;
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--farbe-text-leise);
border: 1px solid var(--farbe-linie-stark);
padding: 2px 7px; white-space: nowrap;
}
.quelle { font-size: .9rem; color: var(--farbe-text-leise); }
/* ---------- Team ----------
Als Liste angelegt, obwohl heute nur ein Eintrag darin steht. Kommt ein
zweiter Name dazu, ändert sich am Aufbau der Seite nichts. */
.team {
background: var(--farbe-flaeche);
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
}
.personen {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: clamp(var(--abstand-4), 5vw, var(--abstand-5));
}
.person {
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-3);
align-items: center;
}
.person-bild { max-width: 260px; }
.personen li + li {
padding-top: clamp(var(--abstand-4), 5vw, var(--abstand-5));
border-top: 1px solid var(--farbe-linie-stark);
}
.person-bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.person-text h3 {
font-family: var(--schrift-display);
font-size: clamp(1.7rem, 3.6vw, 2.4rem);
font-weight: 300;
margin: 0 0 4px;
}
.rolle {
margin: 0 0 var(--abstand-3);
padding-bottom: var(--abstand-3);
border-bottom: 1px solid var(--farbe-linie-stark);
color: var(--farbe-text-leise);
font-size: 1rem;
}
/* Auf breiten Bildschirmen liefe der Absatz sonst über 80 Zeichen. Ab
etwa dieser Länge verliert das Auge beim Zeilenwechsel den Anschluss. */
.person-text .fliesstext p { font-size: 1.05rem; max-width: 68ch; }
/* ---------- Handlungsaufruf: blauer Abschluss ---------- */
.handlung {
background: var(--farbe-primaer);
color: var(--farbe-auf-primaer);
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
}
.handlung .augenbraue { color: rgba(255, 255, 255, .72); }
.handlung h2 {
font-size: clamp(1.9rem, 4.4vw, 3rem);
margin: 0 0 var(--abstand-2);
max-width: 16ch;
}
.handlung p {
max-width: 46ch;
margin: 0 0 var(--abstand-4);
color: rgba(255, 255, 255, .88);
}
.knopfreihe { display: flex; flex-direction: column; gap: var(--abstand-2); }
.knopf { width: 100%; }
.knopf {
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center;
min-height: 58px; padding: 12px 34px;
font-family: var(--schrift-text);
font-size: 1rem; font-weight: 600;
text-decoration: none; cursor: pointer;
transition: background-color var(--dauer) var(--verlauf),
border-color var(--dauer) var(--verlauf),
color var(--dauer) var(--verlauf);
}
.knopf-voll {
background: var(--farbe-auf-primaer);
color: var(--farbe-primaer);
border: 2px solid var(--farbe-auf-primaer);
}
.knopf-voll:hover { background: transparent; color: var(--farbe-auf-primaer); }
.knopf-zusatz { font-size: .84rem; font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; }
.knopf-rand {
background: transparent;
color: var(--farbe-auf-primaer);
border: 2px solid rgba(255, 255, 255, .45);
}
.knopf-rand:hover { border-color: var(--farbe-auf-primaer); color: var(--farbe-auf-primaer); }
.handlung a:focus-visible { outline-color: var(--farbe-auf-primaer); }
/* ==================================================================
Seite „KI und Studienwahl"
Eigener Aufbau statt Fließtext: Die Seite trägt das Argument, mit dem
sich eine Beratung von einer kostenlosen Auskunft unterscheidet. Sie
verwendet, wo es geht, die Bausteine der Startseite weiter — Zahlenband,
Abschnittstitel, Auszugszitat — und ergänzt nur drei eigene.
================================================================== */
.ki-kopf { padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0 var(--abstand-5); }
.ki-kopf-innen { display: grid; grid-template-columns: 1fr; gap: var(--abstand-4); }
.ki-kopf h1 {
font-size: clamp(2rem, 5.2vw, 3.4rem);
margin: 0;
max-width: 18ch;
}
.ki-einstieg p { font-size: 1.05rem; }
/* Quellenangabe unter einer Zahl. Kleiner als der erklärende Text und in
Versalien — sie soll belegen, nicht mitlesen. */
.zahlen-belegt .quellenangabe {
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--farbe-text-leise);
margin-top: var(--abstand-1);
/* „HOCHSCHULREKTORENKONFERENZ" brach mitten im Wort um: nach dem N
stand einsam ein Z in der nächsten Zeile. Ursache ist das globale
overflow-wrap: break-word auf body, das lange Wörter irgendwo
zerteilt. Hier stattdessen echte Silbentrennung — html trägt
lang="de", also weiß der Browser, wo die Fugen liegen. */
overflow-wrap: normal;
hyphens: auto;
-webkit-hyphens: auto;
}
/* ---------- Gegenüberstellung ----------
Zwei Spalten gleichen Gewichts. Die rechte ist die eigene Leistung und
steht deshalb auf Fläche — der einzige Unterschied, den sie braucht. */
.gegen-abschnitt { padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0; }
/* Steht ein erklärender Satz unter der Abschnittsüberschrift, rücken beide
zusammen und der Abstand wandert unter das Paar. Die Überschrift braucht
dafür dieselbe Genauigkeit wie „.abschnitt h2", sonst gewinnt jene Regel. */
.abschnitt .abschnittstitel:has(+ .abschnittstext) { margin-bottom: var(--abstand-2); }
.abschnittstext {
margin: 0 0 var(--abstand-5);
max-width: 52ch;
color: var(--farbe-text-weich);
}
.gegen {
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-3);
}
.gegen-spalte {
padding: var(--abstand-4) var(--abstand-3);
border-top: 2px solid var(--farbe-linie-kontrast);
}
.gegen-stark {
background: var(--farbe-flaeche);
border-top-color: var(--farbe-primaer);
}
.gegen-spalte h3 {
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 var(--abstand-3);
}
.gegen-spalte ul {
list-style: none;
margin: 0 0 var(--abstand-3);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--abstand-2);
}
.gegen-spalte li {
position: relative;
padding-left: var(--abstand-3);
color: var(--farbe-text-weich);
font-size: .97rem;
line-height: 1.55;
}
/* Waagerechter Strich statt Punkt: ruhiger und passt zu den Haarlinien,
die die Seite ohnehin gliedern. */
.gegen-spalte li::before {
content: "";
position: absolute;
left: 0; top: .72em;
width: 10px; height: 1px;
background: var(--farbe-linie-stark);
}
.gegen-stark li::before { background: var(--farbe-primaer); }
.gegen-fuss {
margin: 0;
padding-top: var(--abstand-3);
border-top: 1px solid var(--farbe-linie);
font-size: .9rem;
color: var(--farbe-text-leise);
}
/* ---------- Vier Einwände ----------
Ohne Nummern: das ist keine Reihenfolge, sondern vier gleichrangige
Gründe. Eine Nummerierung würde eine Ordnung behaupten, die es nicht gibt. */
.punkte {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-4) var(--abstand-4);
}
.punkt { border-top: 1px solid var(--farbe-linie-stark); padding-top: var(--abstand-3); }
.punkt h3 {
font-size: 1.1rem;
font-weight: 500;
margin: 0 0 var(--abstand-2);
}
.punkt p {
margin: 0;
color: var(--farbe-text-weich);
font-size: .95rem;
line-height: 1.6;
}
/* ---------- Balkenvergleich ----------
Zwei Werte, maßstäblich. Die Breite kommt aus dem Verhältnis der Zahlen,
nicht aus einer Schätzung — sonst wäre das Bild eine Behauptung. */
.wachstum-abschnitt {
background: var(--farbe-flaeche);
padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0;
margin-top: clamp(var(--abstand-5), 7vw, var(--abstand-6));
}
.wachstum-innen { display: grid; grid-template-columns: 1fr; gap: var(--abstand-5); }
/* Das Bild füllt den Platz, den Überschrift und Text in der linken Spalte
übrig lassen — und setzt der Zahl ein Gegenbild entgegen. */
.wachstum-bild { margin: var(--abstand-4) 0 0; }
.wachstum-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.balken { display: flex; flex-direction: column; gap: var(--abstand-4); }
.balken-marke {
margin: 0 0 var(--abstand-1);
font-size: .75rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--farbe-text-leise);
}
.balken-spur {
height: 10px;
background: var(--farbe-grund);
border: 1px solid var(--farbe-linie-stark);
}
.balken-fuellung {
height: 100%;
background: var(--farbe-primaer);
transform-origin: left;
}
.balken-wert {
margin: var(--abstand-2) 0 0;
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-2);
}
.balken-wert b {
font-family: var(--schrift-display);
font-weight: 300;
font-size: clamp(1.8rem, 4vw, 2.4rem);
line-height: 1;
color: var(--farbe-primaer);
font-variant-numeric: tabular-nums;
}
.balken-wert span {
font-size: .92rem;
color: var(--farbe-text-weich);
max-width: 44ch;
}
/* Die Balken wachsen beim Erscheinen. Nur Zierde — ohne die Bewegung
stimmen die Längen genauso. */
@media (prefers-reduced-motion: no-preference) {
.balken.zeigt .balken-fuellung { transform: scaleX(0); }
.balken.zeigt.sichtbar .balken-fuellung {
transform: scaleX(1);
transition: transform 900ms var(--verlauf);
}
.balken.zeigt.sichtbar .balken-zeile:nth-child(2) .balken-fuellung {
transition-delay: 160ms;
}
}
/* ---------- Zitat neben Bild ----------
Das Bild steht nicht als Schmuck da: Ein Hinweiszeichen im leeren Raum
ist genau das, wovon der Satz daneben handelt. Deshalb stehen beide auf
einer Höhe und gleich gewichtet, nicht Bild über Text. */
.zitat-abschnitt { padding: clamp(var(--abstand-5), 7vw, var(--abstand-6)) 0 0; }
.zitat-innen {
display: grid;
grid-template-columns: 1fr;
gap: var(--abstand-4);
align-items: center;
}
.zitatbild { margin: 0; }
.zitatbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Das Auszugszitat bringt von der Startseite ein „grid-column: 1 / -1“ mit —
dort bricht es über alle drei Spalten aus. Hier soll es eine Spalte
belegen, also zurücksetzen. */
.zitat-innen .auszug {
grid-column: auto;
margin: 0;
justify-self: start;
max-width: 24ch;
}
.ki-schluss { margin-top: clamp(var(--abstand-5), 7vw, var(--abstand-6)); }
.ki-schluss h2 { margin-top: 0; }
/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--farbe-linie); }
.fuss-innen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--abstand-4);
padding-top: clamp(var(--abstand-5), 7vw, var(--abstand-6));
padding-bottom: var(--abstand-5);
}
.fuss-block h2 {
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
}
.fuss-block ul {
list-style: none; margin: 0; padding: 0;
}
.fuss-block li + li { margin-top: 2px; }
.fuss-block a {
display: inline-block;
/* 14.09.2026: Die Verweise standen auf 18 px — genauso groß wie der
Fließtext, während die Rubrik darüber 12 px hat. Der Sprung von 12
auf 18 ließ die Sitemap wie Inhalt aussehen statt wie Navigation.
Jetzt eine Stufe der Skala darunter, statt eines neuen Einzelwerts.
inline-block statt inline-flex: zweizeilige Einträge (FIBIDO) umbrechen
sauber mit
, ohne die Unterstreichung zu zerreißen. */
font-size: var(--schrift-s);
min-height: 44px;
line-height: 1.35;
padding: .35em 0;
box-sizing: border-box;
}
/* Die 44 px sind eine Fingerkuppe, kein Mauszeiger. Wo gezeigt statt
getippt wird, darf die Zeile enger stehen — das kürzt den Fußbereich
spürbar, ohne das Ziel unter die geforderten 24 px zu drücken. */
@media (pointer: fine) {
.fuss-block a { min-height: 30px; }
.fuss-block li + li { margin-top: 0; }
}
/* Eigenes Stockwerk zwischen Sitemap und Rechtlichem — nicht als
Anhängsel unter „Institut". */
.fuss-kontakt-zeile {
border-top: 1px solid var(--farbe-linie);
padding-top: var(--abstand-4);
padding-bottom: var(--abstand-4);
}
.fuss-kontakt-zeile h2 {
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
}
.fuss-kontakt-angaben {
display: flex; flex-wrap: wrap;
align-items: center;
gap: var(--abstand-1) var(--abstand-4);
color: var(--farbe-text-weich);
font-size: .97rem;
}
.fuss-kontakt-angaben p { margin: 0; }
.fuss-kontakt-angaben a {
display: inline-flex; align-items: center;
min-height: 44px;
}
.fuss-schluss {
border-top: 1px solid var(--farbe-linie);
padding-top: var(--abstand-2); padding-bottom: var(--abstand-4);
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 0 var(--abstand-4);
font-size: .875rem; color: var(--farbe-text-leise);
}
.fuss-schluss p { margin: 0; }
.fuss-schluss ul {
list-style: none; display: flex; flex-wrap: wrap;
gap: 0 var(--abstand-3); margin: 0; padding: 0;
}
.fuss-schluss a { display: inline-flex; align-items: center; min-height: 44px; }
/* ==================================================================
Responsive Leiter — mobile first
Die Basisregeln oben beschreiben das Telefon. Von hier an wird nur
noch ergänzt, nie zurückgenommen: drei aufsteigende Stufen bei
600, 769 und 1024 Pixeln. Wer etwas ändert, muss nur wissen, ab
welcher Breite es gelten soll — nicht, welche Regel es vorher
überstimmt hat.
================================================================== */
/* ---------- Burgermenü (Basis: Telefon) ----------
Nur wenn der Browser Popover kennt. Sonst greift keine dieser Regeln,
der Burgerknopf bleibt verborgen und die Navigation steht als
umbrechende Liste da. */
@supports selector(:popover-open) {
/* Muss die Rechner-Regel weiter oben zurücknehmen, sonst bliebe das
geschlossene Menü sichtbar. allow-discrete lässt display trotzdem
mitanimieren, damit es aus- statt wegspringt. */
.navi[popover]:not(:popover-open) { display: none; }
.kopf-innen {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: var(--abstand-2);
}
.burger {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
margin-right: calc(-1 * var(--abstand-1));
padding: 0;
border: 0; background: none;
color: var(--farbe-text);
cursor: pointer;
}
/* Drei Striche aus einem Element: die beiden äußeren als Schatten. */
.burger span {
display: block; width: 24px; height: 2px;
background: currentColor;
box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
transition: background-color 160ms var(--verlauf);
}
.kopf:has(#hauptnavi:popover-open) .burger span { background: transparent; }
/* Panel fährt von rechts ein — der Burgerknopf steht rechts, das Signet
links. Ein von links einfahrendes Menü würde quer über den Bildschirm
vom Knopf wegspringen. */
.navi[popover] {
position: fixed;
inset: 0 0 0 auto;
width: min(82vw, 340px);
height: 100dvh;
margin: 0;
padding: var(--abstand-5) var(--abstand-3) var(--abstand-3);
background: var(--farbe-grund);
border: 0;
border-left: 1px solid var(--farbe-linie);
box-shadow: -18px 0 46px rgb(22 32 43 / .12);
overflow-y: auto;
/* Einfahren von rechts. @starting-style beschreibt den Zustand vor dem
Öffnen — ohne das springt das Menü ohne Übergang herein. */
translate: 0;
transition: translate 280ms var(--verlauf), display 280ms allow-discrete,
overlay 280ms allow-discrete;
}
.navi[popover]:not(:popover-open) { translate: 100% 0; }
@starting-style {
.navi[popover]:popover-open { translate: 100% 0; }
}
.navi::backdrop {
background: rgb(22 32 43 / .38);
opacity: 1;
transition: opacity 280ms var(--verlauf), display 280ms allow-discrete,
overlay 280ms allow-discrete;
}
.navi:not(:popover-open)::backdrop { opacity: 0; }
@starting-style { .navi:popover-open::backdrop { opacity: 0; } }
.navi-zu {
display: flex; align-items: center; justify-content: center;
position: absolute; top: var(--abstand-2); right: var(--abstand-2);
width: 44px; height: 44px;
border: 0; background: none; color: var(--farbe-text-leise);
cursor: pointer;
}
.navi-zu span {
display: block; width: 18px; height: 2px;
background: currentColor; rotate: 45deg;
}
.navi-zu span::after {
content: ""; display: block;
width: 18px; height: 2px; background: currentColor; rotate: 90deg;
}
.navi ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.navi li + li { border-top: 1px solid var(--farbe-linie); }
.navi a {
min-height: 56px;
font-size: .92rem;
border-bottom: 0;
letter-spacing: .06em;
}
.navi a[aria-current] { color: var(--farbe-primaer); }
@media (prefers-reduced-motion: reduce) {
.navi[popover], .navi::backdrop { transition: none; }
}
}
/* ---------- ab 600px: größere Schrift, mehr Luft ---------- */
@media (min-width: 600px) {
body { font-size: 18px; }
.innen { padding-inline: var(--abstand-3); }
.mit-initial > p:first-of-type::first-letter { font-size: 4.1em; }
.knopfreihe { flex-direction: row; flex-wrap: wrap; }
.knopf { width: auto; }
.nachweise { gap: var(--abstand-4); }
}
/* ---------- ab 700px: zwei Spalten, wo zwei hineinpassen ---------- */
@media (min-width: 700px) {
.kacheln { grid-template-columns: repeat(2, 1fr); }
.antwort { grid-template-columns: minmax(0, var(--breite-lesbar)) auto; }
.antwort-rat { max-width: 26ch; }
/* KI-Seite: Gegenüberstellung und Einwände nebeneinander */
.gegen { grid-template-columns: 1fr 1fr; gap: var(--abstand-4); }
.punkte { grid-template-columns: repeat(2, 1fr); }
.gegen-spalte { padding-inline: var(--abstand-4); }
.zitat-innen {
grid-template-columns: 1.05fr .95fr;
gap: clamp(var(--abstand-4), 5vw, var(--abstand-6));
}
}
/* ---------- ab 769px: Navigationsleiste statt Burger ---------- */
@media (min-width: 769px) {
.fibido-innen {
grid-template-columns: minmax(max-content, 22ch) minmax(0, var(--breite-lesbar));
}
.person { grid-template-columns: minmax(200px, 320px) 1fr;
gap: clamp(var(--abstand-4), 5vw, var(--abstand-6)); }
.person-bild { max-width: none; }
/* Quelle rechtsbündig: ergibt eine ruhige Registerspalte statt einer
Aufzählung, die je nach Titellänge unterschiedlich weit einrückt. */
.presse .quelle { margin-left: auto; text-align: right; }
}
/* ---------- ab 1024px: das editoriale Raster ---------- */
@media (min-width: 1024px) {
/* ---------- Kopfzeile: hier wird aus dem Burger eine Leiste ----------
Der Umschaltpunkt liegt bei 1024 und nicht früher, weil fünf gesperrte
Menüpunkte plus vollständiges Logo darunter nicht in eine Zeile passen.
Sie würden umbrechen und die Kopfzeile auf 137 Pixel aufblähen. Tablets
im Hochformat behalten deshalb den Burger und das Signet allein — was
zugleich der Vorgabe entspricht: am Telefon nur das Signet, auf dem
Schreibtisch das ganze Logo. */
.kopf-innen {
/* Logo links, Navigation rechts. Die Reihenfolge im HTML (Marke, dann
Navigation) stimmt damit wieder mit der sichtbaren überein. */
flex-direction: row;
flex-wrap: wrap;
gap: var(--abstand-2) var(--abstand-4);
}
/* Ab hier das vollständige Logo statt des Signets. font-size ist jetzt
die Höhe des ganzen Logos. 100px sind das Maß, bei dem die Unterzeile
mit 8,6 Pixeln gerade noch lesbar bleibt und die Zeile mit fünf
Menüpunkten trotzdem aufgeht. */
.marke-signet { display: none; }
.marke-wort { display: none; } /* ab hier steckt er im vollen Logo */
.marke-voll { display: block; }
.marke { font-size: 100px; }
/* Popover zurücknehmen: hier ist die Navigation eine normale Zeile.
Die :not(:popover-open)-Regel der Basis hat eine höhere Spezifität und
würde sonst gewinnen — sie muss mit gleicher Genauigkeit aufgehoben
werden, nicht nur durch spätere Position im Stylesheet. */
.navi[popover]:not(:popover-open) { display: block; translate: none; }
.navi[popover] {
display: block;
position: static;
inset: auto;
width: auto; max-width: none; height: auto; max-height: none;
margin: 0; padding: 0;
border: 0; background: transparent; color: inherit;
box-shadow: none;
overflow: visible;
translate: none;
transition: none;
}
.navi::backdrop { background: transparent; }
.burger, .navi-zu { display: none; }
.navi ul { flex-direction: row; flex-wrap: wrap; gap: 0 var(--abstand-2); }
.navi li + li { border-top: 0; }
/* Noto Sans läuft breiter als die vorherige Textschrift, und das volle
Logo braucht mehr Platz als Signet mit Wortmarke. Bis 1200px deshalb
engere Sperrung und kleinere Abstände; darüber wird beides wieder
großzügiger. */
.navi a { min-height: 44px; font-size: .78rem; letter-spacing: .04em; }
/* Erst hier stehen Text und Bild nebeneinander. Das Hochformat gehört
genau dazu: in einer Spalte über die volle Breite wäre das Bild
tausend Pixel hoch und schöbe alles Weitere aus dem Blick. */
.hero-innen { grid-template-columns: 1.15fr .85fr; }
.hero-bild { order: 0; }
.hero-bild img { aspect-ratio: 4 / 5; }
/* Drei Spalten: der Text steht in der mittleren, das Auszugszitat
bricht über alle drei aus. */
.einleitung-innen { grid-template-columns: 1fr minmax(0, 62ch) 1fr; }
.einleitung-innen > * { grid-column: 2; max-width: none; }
.auszug { grid-column: 1 / -1; justify-self: center; margin: var(--abstand-5) 0; }
/* KI-Seite: Überschrift und Einstieg nebeneinander, Balken neben dem Text */
.ki-kopf-innen { grid-template-columns: 1.1fr .9fr; gap: var(--abstand-6); align-items: end; }
/* Oben ausgerichtet, nicht mittig: Überschrift und Balkenmarke sollen auf
einer Linie beginnen, sonst schwebt die eine Spalte neben der anderen. */
.wachstum-innen { grid-template-columns: .9fr 1.1fr; gap: var(--abstand-6); align-items: start; }
/* Überschriften dürfen breiter laufen — eng gesetzt zerlegen sie lange
Komposita wie „Stärken-Schwächen-Analyse" in drei Zeilen. */
.abschnittstitel { max-width: 32ch; }
.einleitung h2 { max-width: 30ch; }
.handlung h2 { max-width: 22ch; }
}
/* ---------- ab 1200px ----------
Hier stand bis zum 22.09. eine Regel, die das Logo mitwachsen ließ:
`font-size: clamp(104px, 8vw, 118px)`. Die Begründung dazu war falsch.
Sie lautete, ab 1200px sei die Kopfzeile breit genug — aber die
Kopfzeile wird nicht breiter: `.innen` ist auf `--breite-gesamt`
gedeckelt, also 1000px, und bleibt das auf jedem Schirm.
Gewachsen ist deshalb nur das Logo, nicht der Platz dafür. Gemessen:
Bei 104px bleiben 4 Pixel übrig, ab 106px bricht die Navigation unter
das Logo und die Kopfzeile wächst von 136 auf 210 Pixel. Weil 8vw über
104px hinausgeht, sobald das Fenster breiter als etwa 1300px ist, trat
das auf jedem großen Monitor auf — und nur dort, weshalb es lange
niemandem auffiel.
Das Logo bleibt jetzt bei den 100px, die weiter oben begründet sind.
Das lässt 15 Pixel Luft: genug, dass ein umbenannter Menüpunkt die
Zeile nicht sofort sprengt. Ein größeres Logo ginge nur mit einer
breiteren Kopfzeile — dann stünde es aber links neben der Textkante
statt auf ihr, und die gemeinsame linke Kante ist tragender als ein
paar Pixel Logohöhe. */
@media (min-width: 1200px) {
/* Ab hier ist Platz: Navigation wieder in Ruhegröße und mit Luft. */
.navi ul { gap: 0 var(--abstand-3); }
.navi a { font-size: .84rem; letter-spacing: .07em; }
}
/* ---------------------------------------------------------------- Weitersagen
Reine Verweise, kein fremder Code, keine Zähler. Die beiden Knöpfe für
die Geräte-Teilenfunktion und „Link kopieren" stehen auf hidden und
werden nur eingeblendet, wenn der Browser sie wirklich kann. Ohne
JavaScript bleiben die drei Verweise — und die funktionieren immer. */
.teilen {
margin: var(--abstand-5) 0 0;
padding-top: var(--abstand-3);
border-top: 1px solid var(--farbe-linie);
}
.teilen-titel {
font-family: var(--schrift-text);
font-size: .74rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
}
.teilen-liste {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--abstand-1);
}
/* display: inline-flex wuerde das hidden-Attribut aushebeln — beide haben
dieselbe Spezifitaet, und diese Regel steht spaeter. Deshalb die
ausdrueckliche Ausnahme direkt darunter.
inline-flex statt inline-block, damit Zeichen und Beschriftung mittig
aufeinander stehen. Das mitlaufende .nur-vorlesen ist absolut gesetzt und
damit kein Flex-Element — es erzeugt also keine zweite Luecke. */
.teilen-knopf {
display: inline-flex; align-items: center; gap: .48em;
font-family: var(--schrift-text);
font-size: .86rem; line-height: 1;
padding: 11px 14px; /* ergibt 38px Höhe — Antippfläche */
border: 1px solid var(--farbe-linie-stark);
border-radius: var(--radius);
background: var(--farbe-grund);
color: var(--farbe-primaer);
text-decoration: none;
white-space: nowrap; /* „Link kopieren" nie mitten im Knopf brechen */
cursor: pointer;
transition: background var(--dauer) var(--verlauf),
border-color var(--dauer) var(--verlauf),
color var(--dauer) var(--verlauf);
}
.teilen-knopf[hidden] { display: none; }
/* Das Zeichen folgt der Schriftfarbe, also auch dem Wechsel beim
Ueberfahren — ohne eine eigene Regel dafuer. flex: none verhindert, dass
es beim Umbrechen schmaler gequetscht wird. */
.teilen-zeichen {
width: 1.05em; height: 1.05em; flex: none;
opacity: .82;
}
.teilen-knopf:hover .teilen-zeichen,
.teilen-knopf:focus-visible .teilen-zeichen { opacity: 1; }
.teilen-knopf:hover,
.teilen-knopf:focus-visible {
background: var(--farbe-primaer);
border-color: var(--farbe-primaer);
color: var(--farbe-auf-primaer);
}
/* Rückmeldung nach dem Kopieren. Zwei Sekunden, dann zurück. */
.teilen-knopf.teilen-fertig,
.teilen-knopf.teilen-fertig:hover {
background: var(--farbe-flaeche);
border-color: var(--farbe-linie-stark);
color: var(--farbe-text-weich);
}
@media (max-width: 600px) {
/* Auf schmalen Geräten übernimmt die Teilenfunktion des Geräts; die
Einzelverweise dürfen dann umbrechen statt zu quetschen. */
.teilen-knopf { padding: 12px 14px; }
}
/* Abschluss einer Unterseite: Weitersagen in einer Zeile, Rueckweg darunter.
Nebeneinander hat die Knöpfe umbrechen lassen und den Rueckweg dazwischen
gesetzt — das liest sich wie zwei konkurrierende Aktionen. */
.seitenschluss {
margin: var(--abstand-5) 0 0;
/* Unten als padding, nicht als margin: Ein margin des letzten Kindes
faellt mit dem Abstand des Abschnitts zusammen und verpufft. */
padding-top: var(--abstand-3);
padding-bottom: var(--abstand-5);
border-top: 1px solid var(--farbe-linie);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--abstand-3);
}
/* Innerhalb des Abschlusses tragen die beiden Teile keine eigenen
Abstaende und keine eigene Linie mehr. */
.seitenschluss .teilen,
.seitenschluss .zurueck {
margin: 0;
padding-top: 0;
border-top: 0;
}
.seitenschluss .teilen { width: 100%; }
/* Alle Teilen-Knoepfe in einer Reihe — aber nur, solange sie wirklich
nebeneinander passen.
Die Grenze stand auf 420px und war zu optimistisch: Fuenf Knoepfe
brauchen gemessen 580px, und `nowrap` laesst sie dann nicht umbrechen,
sondern aus der Seite herauslaufen. Das erzeugte seitliches Scrollen
zwischen 421 und 500px — schon vor den Zeichen, mit ihnen bis 560px.
Gemessen passt die Reihe ab rund 630px Fensterbreite; 660 als Grenze
laesst etwas Luft. Darunter bricht sie um, und das sieht ordentlich aus. */
.seitenschluss .teilen-liste { flex-wrap: nowrap; }
@media (max-width: 660px) {
.seitenschluss .teilen-liste { flex-wrap: wrap; }
}
@media (max-width: 420px) {
.seitenschluss { padding-bottom: var(--abstand-4); }
}
/* ---------------------------------------------------------------- Monatsbrief
Anmeldung fuer Lehrkraefte. Eigenes Formular, kein fremder Einbettcode —
die Adresse geht an den eigenen Server, erst der spricht mit Brevo. */
.monatsbrief {
background: var(--farbe-flaeche);
padding: var(--abstand-5) 0;
margin: var(--abstand-6) 0 0;
}
/* Auf /monatsbrief steht der Kasten nicht am Seitenende, sondern direkt
unter dem Vorspann. Der Abstand nach oben entfällt — die Einleitung
bringt ihren eigenen mit, und zwei addierte Abstände reißen den Kasten
vom Text los, zu dem er gehört. */
.monatsbrief-oben { margin-top: 0; }
/* Der Kasten trägt jetzt zusätzlich .innen und liegt damit auf derselben
linken Kante wie der übrige Seiteninhalt (Abschnitt 1 der
Layoutentscheidungen weiter unten). Vorher zentrierte er sich auf eigene
Faust in der Lesebreite und begann dadurch 166 px weiter rechts als der
Text darüber — auf 1440 px deutlich zu sehen, sobald er nicht mehr ganz
am Seitenende steht. Breite und Innenabstand kommen von .innen; hier
bleibt nur die Lesebreite der Kinder. So kann beides nicht mehr
auseinanderlaufen. */
.monatsbrief-innen > * { max-width: var(--breite-lesbar); }
.monatsbrief h2 {
font-size: 1.5rem;
margin: 0 0 var(--abstand-2);
}
.monatsbrief-text {
color: var(--farbe-text-weich);
margin: 0 0 var(--abstand-3);
}
.monatsbrief-zeile {
display: flex;
flex-wrap: wrap;
gap: var(--abstand-1);
}
.monatsbrief-zeile input[type="email"] {
flex: 1 1 16rem;
min-width: 0; /* sonst sprengt das Feld den Kasten */
font: inherit;
padding: 12px 14px;
border: 1px solid var(--farbe-linie-stark);
border-radius: var(--radius);
background: var(--farbe-grund);
color: var(--farbe-text);
}
.monatsbrief-zeile input[type="email"]:focus-visible {
outline: 2px solid var(--farbe-primaer);
outline-offset: 1px;
border-color: var(--farbe-primaer);
}
.monatsbrief-zeile button {
font: inherit;
padding: 12px 22px;
border: 1px solid var(--farbe-primaer);
border-radius: var(--radius);
background: var(--farbe-primaer);
color: var(--farbe-auf-primaer);
cursor: pointer;
transition: background var(--dauer) var(--verlauf);
}
.monatsbrief-zeile button:hover,
.monatsbrief-zeile button:focus-visible {
background: var(--farbe-primaer-dunkel);
}
.monatsbrief-zustimmung {
margin: var(--abstand-2) 0 0;
font-size: .88rem;
color: var(--farbe-text-weich);
}
.monatsbrief-zustimmung label {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
}
.monatsbrief-zustimmung input { margin-top: .25em; flex: none; }
.monatsbrief-hinweis {
margin: var(--abstand-2) 0 0;
font-size: .82rem;
color: var(--farbe-text-leise);
}
.monatsbrief-fehler {
margin: 0 0 var(--abstand-2);
padding: 10px 14px;
border-left: 3px solid var(--farbe-primaer);
background: var(--farbe-grund);
color: var(--farbe-text);
}
/* Die Falle gegen automatische Eintragungen. Nicht display:none — manche
Programme erkennen das und lassen das Feld dann in Ruhe. */
.monatsbrief-falle {
position: absolute; left: -9999px;
width: 1px; height: 1px; overflow: hidden;
}
/* ---------- Archiv der Ausgaben ----------
Gleiche Haarlinien-Gliederung wie die Beitragsliste, aber flacher: Eine
Ausgabe ist kein Beitrag, sondern ein Verzeichnis. Darum kein großer
Titel, keine Karte, kein „Weiterlesen" — der Monat ordnet, die drei
Zeilen erinnern, die Verweise führen zum vollständigen Text. */
.ausgaben { padding: 0 0 clamp(var(--abstand-5), 7vw, var(--abstand-6)); }
.ausgaben-liste {
list-style: none; margin: 0; padding: 0;
}
.ausgabe {
padding: var(--abstand-4) 0;
border-top: 1px solid var(--farbe-linie);
}
.ausgabe:last-child { border-bottom: 1px solid var(--farbe-linie); }
.ausgabe-monat {
margin: 0 0 var(--abstand-1);
font-size: var(--schrift-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--farbe-text-leise);
}
.ausgabe-kurz {
margin: 0;
color: var(--farbe-text-weich);
max-width: 46ch;
}
.ausgabe-beitraege {
list-style: none;
margin: var(--abstand-2) 0 0;
padding: 0;
display: flex; flex-direction: column;
gap: var(--abstand-1);
}
/* Der Pfeil steht vor dem Titel, nicht dahinter: Untereinander gesetzt
ergeben die Pfeile eine Kante, an der das Auge die Liste abliest.
Dieselbe Maske wie bei .weiter — das Zeichen → käme sonst aus einer
Ersatzschrift. */
.ausgabe-beitraege a {
display: inline-flex; align-items: baseline; gap: 9px;
min-height: 30px;
text-decoration: none;
color: var(--farbe-text);
text-decoration-color: transparent;
}
.ausgabe-beitraege a::before {
content: ""; flex: none;
width: 13px; height: 9px;
transform: translateY(-.1em);
background: currentColor;
mask: var(--pfeil) no-repeat center / contain;
opacity: .45;
transition: transform var(--dauer) var(--verlauf), opacity var(--dauer) var(--verlauf);
}
.ausgabe-beitraege a:hover,
.ausgabe-beitraege a:focus-visible { color: var(--farbe-primaer); }
.ausgabe-beitraege a:hover::before,
.ausgabe-beitraege a:focus-visible::before {
opacity: 1; transform: translate(3px, -.1em);
}
/* Auf dem Telefon braucht jeder Verweis eine Fläche, die man trifft. */
@media (pointer: coarse) {
.ausgabe-beitraege a { min-height: 44px; align-items: center; }
.ausgabe-beitraege a::before { transform: none; }
.ausgabe-beitraege a:hover::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ausgabe-beitraege a::before { transition: none; }
.ausgabe-beitraege a:hover::before,
.ausgabe-beitraege a:focus-visible::before { transform: translateY(-.1em); }
}
@media print {
.ausgabe { break-inside: avoid; }
.ausgabe-beitraege a::before { display: none; }
}
/* Weg weiter unter jeder Antwort des Zeitpunktwaehlers. Steht unter dem
Empfehlungskasten, nicht darin: Der Kasten fasst zusammen, die Zeile
fuehrt weiter — zwei verschiedene Aufgaben. */
.antwort-weiter {
margin: var(--abstand-2) 0 0;
grid-column: 1 / -1;
}
/* ---------- Aktuelles: Übersicht und Beitrag ---------- */
.beitragsliste { padding: 0 0 clamp(var(--abstand-5), 7vw, var(--abstand-6)); }
.beitraege {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0;
}
.beitrag-karte {
padding: var(--abstand-4) 0;
border-top: 1px solid var(--farbe-linie);
}
.beitrag-karte:last-child { border-bottom: 1px solid var(--farbe-linie); }
.beitrag-meta {
margin: 0 0 var(--abstand-1);
font-size: .84rem;
color: var(--farbe-text-leise);
letter-spacing: .02em;
}
.beitrag-themen { color: var(--farbe-text-leise); }
.beitrag-karte h2 {
font-size: clamp(1.35rem, 2.8vw, 1.75rem);
margin: 0 0 var(--abstand-2);
max-width: 28ch;
}
.beitrag-karte h2 a {
text-decoration: none; color: var(--farbe-text);
}
.beitrag-karte h2 a:hover { color: var(--farbe-primaer); }
.beitrag-karte > p { margin: 0 0 var(--abstand-2); color: var(--farbe-text-weich); max-width: 46ch; }
.beitrag-weiter { margin: 0; }
.beitrag .quellenangabe {
margin: var(--abstand-4) 0 0;
padding-top: var(--abstand-2);
border-top: 1px solid var(--farbe-linie);
font-size: .9rem;
color: var(--farbe-text-leise);
max-width: 52ch;
}
.beitrag .quellenangabe p { margin: 0; }
.beitrag .quellenangabe a { display: inline-block; padding-block: .2em; }
/* Herkunftsangabe: „Recherche mit KI-Unterstuetzung". Leiser als die
Quellenangabe und ohne eigene Trennlinie — es ist eine Fussnote zur
Entstehung des Textes, keine zweite Quellenliste. Folgt direkt darunter;
steht keine Quellenangabe da, traegt sie die Linie selbst. */
.beitrag .herkunftsangabe {
margin: var(--abstand-2) 0 0;
font-size: var(--schrift-s);
line-height: 1.5;
color: var(--farbe-text-leise);
max-width: 52ch;
}
.beitrag .herkunftsangabe b { font-weight: 600; color: var(--farbe-text-weich); }
.beitrag .quellenangabe + .herkunftsangabe { margin-top: var(--abstand-2); }
.beitrag .fliesstext + .herkunftsangabe {
margin-top: var(--abstand-4);
padding-top: var(--abstand-2);
border-top: 1px solid var(--farbe-linie);
}
.auch-dazu {
padding: clamp(var(--abstand-4), 5vw, var(--abstand-5)) 0;
background: var(--farbe-flaeche);
border-top: 1px solid var(--farbe-linie-kontrast);
}
.auch-dazu h2 {
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-3);
}
.auch-dazu-liste {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--abstand-3);
}
.auch-dazu-liste a {
font-family: var(--schrift-display);
font-size: 1.15rem; font-weight: 400;
text-decoration: none; color: var(--farbe-text);
text-wrap: balance;
}
.auch-dazu-liste a:hover { color: var(--farbe-primaer); }
.auch-dazu-liste p {
margin: 4px 0 0;
font-size: .95rem;
color: var(--farbe-text-weich);
max-width: 46ch;
}
@media (min-width: 769px) {
.auch-dazu-liste { grid-template-columns: repeat(3, 1fr); gap: var(--abstand-4); }
}
/* ---------------------------------------------------------- Stimmen
Ein Zitat ist das Einzige auf der Seite, das nicht von uns stammt.
Das uebergrosse Anfuehrungszeichen sagt das, bevor jemand liest. */
.stimmen {
padding: clamp(var(--abstand-4), 5vw, var(--abstand-5)) 0;
border-top: 1px solid var(--farbe-linie-kontrast);
}
/* Titel und Zitat gehören zusammen — nicht der große Abschnittsabstand. */
.stimmen .abschnittstitel { margin-bottom: var(--abstand-2); }
.stimmen-liste {
list-style: none; margin: var(--abstand-2) 0 0; padding: 0;
display: grid; gap: var(--abstand-5);
}
.stimme { position: relative; }
/* Das Zeichen steht als eigene Zeile ueber dem Zitat und wird durch den
negativen Abstand wieder herangezogen. Absolut positioniert waere es
bei langen Quellenangaben und in zwei Spalten zu fragil. */
.stimme-marke {
display: block;
font-family: var(--schrift-display);
font-weight: 300;
font-size: clamp(3.4rem, 7vw, 4.8rem);
line-height: 1;
color: var(--farbe-primaer);
opacity: .3;
/* „ hat Unterlängen: Padding nimmt sie auf, overflow schneidet Reste ab,
positiver Margin hält den Text darunter frei. */
padding-bottom: .15em;
margin: 0 0 var(--abstand-1);
overflow: hidden;
user-select: none;
}
.stimme blockquote {
margin: 0; padding: 0; border: 0;
font-family: var(--schrift-display);
font-size: clamp(1.25rem, 2.6vw, 1.6rem);
font-weight: 300;
line-height: 1.32;
letter-spacing: -.012em;
color: var(--farbe-text);
text-wrap: pretty;
}
.stimme blockquote p { margin: 0; max-width: 34ch; }
.stimme footer { margin: var(--abstand-3) 0 0; }
.stimme cite {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: .5rem;
font-family: var(--schrift-text); font-style: normal;
font-size: .78rem; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
color: var(--farbe-text-leise);
}
/* Ein kurzer Strich statt eines Gedankenstrichs im Text – er traegt die
Zeile optisch und funktioniert auch, wenn das Datum fehlt. */
.stimme cite::before {
content: ""; width: 1.6rem; height: 1px;
background: var(--farbe-linie-stark); flex: none;
}
.stimme-datum {
text-transform: none; letter-spacing: 0;
font-weight: 400; opacity: .85;
}
.stimme-datum::before { content: "· "; }
/* Eine einzelne Stimme braucht keine Spalte, sondern Luft. */
.stimmen-liste.einzeln .stimme blockquote { font-size: clamp(1.4rem, 3.2vw, 1.95rem); }
.stimmen-liste.einzeln .stimme blockquote p { max-width: 26ch; }
.stimmen-liste.einzeln .stimme-marke { font-size: clamp(4rem, 9vw, 6rem); }
/* Eine einzelne, aber lange Stimme. Die grosse Schrift auf 26 Zeichen
Zeilenlaenge wirkt bei einem Satz; bei fuenfzig Woertern entsteht daraus
eine schmale Saeule aus zwanzig Zeilen. Dann lieber ruhiger setzen und
die Zeile auf Lesebreite bringen. Die Klasse setzt die Vorlage. */
.stimmen-liste.einzeln.lang .stimme blockquote {
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
line-height: 1.5;
}
.stimmen-liste.einzeln.lang .stimme blockquote p { max-width: 46ch; }
.stimmen-liste.einzeln.lang .stimme-marke { font-size: clamp(3rem, 6vw, 4rem); }
@media (min-width: 769px) {
.stimmen-liste.mehrere {
grid-template-columns: repeat(2, 1fr);
gap: var(--abstand-5) var(--abstand-5);
}
/* In zwei Spalten faengt jede Stimme oben an; ohne das rutschen die
Zitate auseinander, wenn eines eine Zeile laenger ist. */
.stimmen-liste.mehrere .stimme { align-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
.stimme-marke { transition: opacity .4s ease; }
}
/* ---------- Jahresmottos (Leitbild) ---------- */
.mottos {
padding: clamp(var(--abstand-4), 5vw, var(--abstand-5)) 0;
border-top: 1px solid var(--farbe-linie-kontrast);
}
.motto-aktuell {
margin: var(--abstand-4) 0 var(--abstand-5);
padding: 0;
border: 0;
}
.motto-aktuell .motto-jahr {
margin: 0 0 var(--abstand-2);
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--farbe-primaer);
}
.motto-aktuell .motto-zitat {
margin: 0;
font-family: var(--schrift-display);
font-size: clamp(1.6rem, 3.4vw, 2.35rem);
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--farbe-text);
text-wrap: balance;
max-width: 22ch;
}
.motto-liste {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0;
border-top: 1px solid var(--farbe-linie);
}
.motto {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: var(--abstand-2) var(--abstand-3);
padding: var(--abstand-3) 0;
border-bottom: 1px solid var(--farbe-linie);
}
.motto .motto-jahr {
margin: 0;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--farbe-primaer);
}
.motto blockquote {
margin: 0; padding: 0; border: 0;
}
.motto blockquote p {
margin: 0 0 var(--abstand-1);
font-family: var(--schrift-display);
font-size: 1.15rem;
font-weight: 300;
line-height: 1.35;
color: var(--farbe-text);
text-wrap: pretty;
}
.motto cite {
font-family: var(--schrift-text);
font-style: normal;
font-size: .9rem;
color: var(--farbe-text-leise);
}
@media (max-width: 600px) {
.motto { grid-template-columns: 1fr; gap: var(--abstand-1); }
}
.einleitung-fortsetzung {
/* Keine zweite Linie unter dem Kopfblock — und kein Extra-Abstand,
solange der Fließtext direkt an Vorspann/H1 anschließt. */
border-top: 0;
padding-top: 0;
}
/* Auszug schließt den Kopfblock ab; sein Margin ersetzt das große
Section-Padding darunter, sonst klafft vor dem Zahlenband eine Lücke.
14.09.2026: Die Regel griff zu weit. Ben hat auf der Startseite
gesehen, dass die letzte Textzeile an der Linie des nächsten
Abschnitts klebt. Grund: Dort steht der Auszug **nicht** am Ende —
danach folgt noch ein ganzer Fließtext, und der stand damit ohne
Polster vor der Kante. Jetzt gilt die Ausnahme nur, wenn der Auszug
wirklich das letzte Element des Kopfblocks ist. */
.einleitung:has(.innen > .auszug:last-child) {
padding-bottom: 0;
}
/* Nach dem Zahlenband: Abstand unter der Trennlinie, analog zum Padding
im Band selbst. Ohne diesen Nachbarn bleibt padding-top 0. */
.zahlenband + .einleitung-fortsetzung {
padding-top: var(--abstand-4);
}
/* Dasselbe nach dem Anmeldekasten. Auf /monatsbrief steht er nicht am
Seitenende, sondern zwischen Kopfblock und Fließtext — und dort klebte
die erste Zwischenüberschrift ohne jedes Polster an der Unterkante der
grauen Fläche (Ben, 15.09.). Der Wert entspricht dem Innenabstand des
Kastens: Die Fläche endet, und der Text beginnt im selben Rhythmus.
Der Abschlussblock bleibt ausgenommen — zwei farbige Flächen dürfen
aneinanderstoßen, dazwischen braucht es kein Weiß. */
.monatsbrief + .einleitung-fortsetzung,
.monatsbrief + .ausgaben {
padding-top: var(--abstand-5);
}
/* ---------------------------------------------------------- Was dazugehört
Kindseiten der Bereichsseite. Wegweisung, kein Angebot — deshalb leiser
als die Arbeitsfelder auf der Startseite: Trennlinien statt Kacheln.
24.09.2026: Der Abschnitt hatte eine eigene randlose Linie oben. Ben hat
auf /hochschulen gezeigt, dass sich dort fuenf Linien auf 350 Pixel
draengten, in drei verschiedenen Breiten — dasselbe Gewicht, dieselbe
Farbe, aber unterschiedlich lang, also kein erkennbares System.
Die Regel, die jetzt gilt:
· Linie ueber die volle Breite = Abschnittsgrenze, immer dunkel
(--farbe-linie-kontrast). Das sind der Kopfblock und das Zahlenband.
· Linie auf Textbreite = hell, gehoert zu einem Element und rahmt es.
Das sind der Auszug und die Liste hier.
Diese Linie war randlos UND hell — sie las sich als grosse Grenze und
sah aus wie eine kleine. Dazu sperrte sie die Beschriftung „Was
dazugehoert" zusammen mit der Linie der Liste 84px darunter ein.
Weggelassen. Der Auszug darueber schliesst den Kopfblock mit seiner
eigenen Linie ab — das ist auf allen fuenf Bereichsseiten so, gemessen,
jeweils 64px davor. Der Abschnitt braucht keine zweite. */
.unterseiten {
/* Unten mehr Luft als oben: Sonst steht die Abschlusslinie der letzten
Kachel nur 40px ueber der dunklen Linie des Zahlenbands, und zwei
Linien so dicht beieinander liest niemand als zwei Ebenen. */
padding: var(--abstand-4) 0 var(--abstand-5);
}
.unterseiten .augenbraue { margin-bottom: var(--abstand-3); }
.unterseiten-liste {
list-style: none; margin: 0; padding: 0;
border-top: 1px solid var(--farbe-linie);
}
.unterseite { border-bottom: 1px solid var(--farbe-linie); }
.unterseite a {
display: block;
padding: var(--abstand-3) 0;
text-decoration: none;
color: inherit;
transition: color var(--dauer) var(--verlauf);
}
.unterseite a:hover .unterseite-titel,
.unterseite a:focus-visible .unterseite-titel {
color: var(--farbe-primaer);
}
.unterseite a:focus-visible {
outline: 2px solid var(--farbe-primaer);
outline-offset: 4px;
}
.unterseite-titel {
display: block;
font-family: var(--schrift-display);
font-weight: 300;
font-size: clamp(1.25rem, 2.4vw, 1.55rem);
line-height: 1.2;
letter-spacing: -.012em;
color: var(--farbe-text);
margin: 0 0 var(--abstand-1);
transition: color var(--dauer) var(--verlauf);
}
.unterseite-text {
display: block;
font-size: .95rem;
line-height: 1.5;
color: var(--farbe-text-weich);
max-width: 52ch;
}
.quellenhinweis {
flex: 1 1 100%;
/* Volle Breite im Seitenschluss — sonst wäre eine Trennlinie nur 52ch
und sähe neben der Abschnittlinie kaputt aus. Der Text selbst bleibt schmal. */
max-width: none;
margin: 0;
padding: 0 0 var(--abstand-4);
border: 0;
border-bottom: 1px solid var(--farbe-linie);
font-size: .9rem;
color: var(--farbe-text-leise);
}
.quellenhinweis h2 {
font-family: var(--schrift-text);
font-size: .75rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-1);
max-width: 52ch;
}
.quellenhinweis p {
margin: 0 0 var(--abstand-1);
max-width: 52ch;
}
.quellenhinweis p:last-child { margin-bottom: 0; }
/* Teilen behält im Seitenschluss keine eigene Linie — die kommt von den
Quellen darunter. Ohne Quellen gilt weiter die Nullung weiter oben. */
.seitenschluss .quellenhinweis + .teilen {
margin-top: var(--abstand-3);
}
/* ---------------------------------------------------------- Querschnitt
Ersetzt eine Matrixgrafik von 2018. Die Matrix war ueberfluessig: In ihr
variierte nichts, jede Frage galt fuer jeden Weg. */
.querschnitt {
margin: var(--abstand-5) 0;
padding: var(--abstand-4) 0;
border-top: 1px solid var(--farbe-linie-stark);
border-bottom: 1px solid var(--farbe-linie);
}
.querschnitt-augenbraue {
font-size: .74rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
}
.querschnitt h3 {
font-family: var(--schrift-display); font-weight: 300;
font-size: 1.6rem; line-height: 1.14; letter-spacing: -.014em;
margin: 0 0 var(--abstand-2); max-width: 24ch;
}
.querschnitt-text {
color: var(--farbe-text-weich);
margin: 0 0 var(--abstand-4);
max-width: 52ch;
}
.wege {
display: flex; flex-wrap: wrap; gap: var(--abstand-1);
margin: 0 0 var(--abstand-1); padding: 0; list-style: none;
}
.wege li {
flex: 1 1 10rem;
background: var(--farbe-primaer); color: var(--farbe-auf-primaer);
padding: 12px 16px;
border-radius: var(--radius) var(--radius) 0 0;
font-size: .9rem; font-weight: 500; text-align: center;
}
.klammer {
height: 10px;
border: 1px solid var(--farbe-linie-stark); border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
margin-bottom: var(--abstand-3);
}
.fragen {
list-style: none; margin: 0; padding: 0; counter-reset: f;
display: grid; grid-template-columns: 1fr;
}
.fragen li {
counter-increment: f;
display: flex; gap: var(--abstand-2); align-items: baseline;
padding: 12px 0;
border-top: 1px solid var(--farbe-linie);
}
.fragen li:first-child { border-top: 0; }
.fragen li::before {
content: counter(f);
font-family: var(--schrift-display); font-weight: 300; font-size: 1.1rem;
color: var(--farbe-primaer);
min-width: 1.4em; flex: none;
}
@media (min-width: 640px) {
.fragen { grid-template-columns: 1fr 1fr; column-gap: var(--abstand-4); }
.fragen li:nth-child(2) { border-top: 0; }
}
/* ════════════════════════════════════════════════════════════════════
NACHTRAG 14.09.2026 — Layoutprüfung
Steht bewusst am Ende: Alles hier überschreibt Früheres, und man
sieht auf einen Blick, was zuletzt entschieden wurde.
Begründungen in kirby-neu/LAYOUT-PRUEFUNG.md
════════════════════════════════════════════════════════════════ */
/* ── 1 · Eine gemeinsame linke Kante ──────────────────────────────
Vorher sprang der Text beim Scrollen zwischen zwei Kanten hin und
her: .innen begann bei 100 px, .innen.schmal bei 386 px. Auf einer
Seite bis zu sieben Wechsel um je 286 px.
Jetzt beginnt alles bei derselben Kante; die Lesebreite entsteht
über die Kinder, nicht über das Zentrieren des Containers. */
.innen.schmal {
max-width: var(--breite-gesamt);
}
.innen.schmal > * {
max-width: var(--breite-lesbar);
}
/* Was mehr Platz braucht als eine Lesespalte, bekommt ihn ausdrücklich.
Seit der Korridor 1080 px breit ist, ist das die volle Spalte — die
frühere Deckelung bei 880 px hätte eine vierte Kante erzeugt. */
.innen.schmal > .unterseiten-liste,
.innen.schmal > .stimmen-liste.mehrere,
.innen.schmal > .motto-liste,
.innen.schmal > .querschnitt,
.innen.schmal > .seitenschluss {
max-width: 100%;
}
/* Der Auszug bleibt an derselben Kante statt in die Mitte zu rutschen —
das war auf großen Schirmen die dritte Kante innerhalb einer
Bildschirmhöhe. */
@media (min-width: 1024px) {
.auszug { justify-self: start; }
}
/* ── 2 · Der Seitenkopf nutzt die Breite ──────────────────────────
Bei 1440 px stand der Text in einer 668-px-Spalte, links und rechts
je 400 px Weiß. Die KI-Seite machte es schon richtig: Überschrift
links, Einleitung rechts daneben. Das gilt jetzt für alle Seiten.
Erst ab 1100 px — darunter reicht die Breite nicht für zwei Spalten,
die beide lesbar bleiben. */
@media (min-width: 1100px) {
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
column-gap: clamp(var(--abstand-4), 5vw, var(--abstand-6));
align-items: start;
/* Ohne das verteilt der Browser die Höhe eines hohen Bildes auf alle
Zeilen — zwischen Augenbraue und Überschrift klafft dann eine
Lücke, die niemand gesetzt hat. */
align-content: start;
}
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal > .augenbraue {
grid-column: 1; grid-row: 1;
}
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal > h1 {
grid-column: 1; grid-row: 2;
/* Keine feste Zeichenbreite: „Personalmarketing" ist 17 Zeichen lang
und wurde bei 15ch mitten im Wort umbrochen. Die Spalte begrenzt
ohnehin, und lange Einzelwörter dürfen darüber hinausragen. */
max-width: none;
overflow-wrap: normal;
hyphens: none;
margin-block: 0 var(--abstand-3);
}
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal > .vorspann {
grid-column: 2; grid-row: 2;
max-width: 42ch;
/* Die Einleitung sitzt auf der Grundlinie der Überschrift, nicht
an deren Oberkante — sonst schwebt sie über dem Satzspiegel. */
margin-block: .45em 0;
}
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal > .auszug {
grid-column: 1 / -1; grid-row: 3;
}
}
/* ── 3 · Die Kopfzeile läuft mit ──────────────────────────────────
Gemessene Seitenlängen: bis 9.387 px am Schreibtisch, 9.308 px auf
dem Telefon. Wer unten ankommt, hatte keinen Weg zurück zur
Navigation außer dem ganzen Weg nach oben.
Richtung: abwärts ausblenden, aufwärts wieder einblenden
(LAYOUT-PRUEFUNG.md) — gesteuert über .kopf-weg im Fuß-Skript. */
.kopf {
position: sticky;
top: 0;
z-index: 50;
background: var(--farbe-grund);
transition: transform 220ms var(--verlauf);
}
.kopf.kopf-weg {
transform: translateY(-100%);
pointer-events: none;
}
/* Beim Drucken und bei sehr niedrigen Fenstern stört das mitlaufende
Band mehr, als es nützt. */
@media (max-height: 460px) {
.kopf { position: static; transform: none; }
.kopf.kopf-weg { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
.kopf { transition: none; }
.kopf.kopf-weg { transform: none; pointer-events: auto; }
}
/* Kopfzeile misst rund 9 rem; 6 rem reichte nicht für Sprungmarken. */
html { scroll-padding-top: 10rem; }
/* ── 4 · Druckansicht ─────────────────────────────────────────────
Bisher gab es keine. Diese Zielgruppe druckt aber: Koordinatorinnen
legen Angebote ins Lehrerzimmer, Eltern nehmen „Ablauf und Kosten"
mit an den Küchentisch. */
@media print {
:root {
--farbe-text: #000;
--farbe-text-weich: #222;
--farbe-text-leise: #444;
--farbe-primaer: #000;
}
*, *::before, *::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
transition: none !important;
animation: none !important;
}
body { font-size: 11pt; line-height: 1.4; }
/* Weg damit: Navigation, Schaltflächen, Teilen-Leiste, Anmeldung. */
.kopf, .fuss-innen, .navi, .navi-schalter, .knopfreihe, .teilen,
.teilen-knopf, .zurueck, .monatsbrief, .skip, .unterseiten {
display: none !important;
}
/* Alles auf eine Spalte, volle Seitenbreite. */
.innen, .innen.schmal { max-width: none !important; padding-inline: 0 !important; }
.innen.schmal > * { max-width: none !important; }
.einleitung > .innen.schmal { display: block !important; }
.schritte, .zahlen, .stimmen-liste, .kacheln { display: block !important; }
.schritt, .zahlen li, .stimme { margin-bottom: 1.2em; break-inside: avoid; }
/* Verweisziele sichtbar machen — sonst sind alle Quellen im Druck weg. */
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8.5pt; word-break: break-all;
}
a[href^="/"]::after, a[href^="#"]::after, a[href^="mailto"]::after { content: ""; }
h1, h2, h3 { break-after: avoid; }
p, li, blockquote { orphans: 3; widows: 3; }
.zahlenband, .handlung { border-top: 1pt solid #000; padding-top: .6em; }
/* Eine Kopfzeile aus Papier: Wer das Blatt in der Hand hält, soll
sehen, von wem es stammt. */
.kopf-druck { display: block !important; }
}
.kopf-druck { display: none; }
/* ── 5 · Dunkelmodus ──────────────────────────────────────────────
Nur die Tokens werden getauscht, keine einzige Regel sonst. Das
Blau wird aufgehellt, weil #003366 auf dunklem Grund nicht mehr
lesbar wäre; Weiß darauf bleibt kontrastreich genug. */
@media (prefers-color-scheme: dark) {
:root {
--farbe-grund: #12171D;
--farbe-flaeche: #1B222A;
--farbe-primaer: #7FB2E5;
--farbe-primaer-dunkel: #A8CCF0;
--farbe-auf-primaer: #0C1117;
--farbe-text: #E8EDF2;
--farbe-text-weich: #BAC5D0;
--farbe-text-leise: #98A5B2;
--farbe-linie: #2A333D;
--farbe-linie-stark: #3C4956;
--farbe-linie-kontrast: #E8EDF2;
}
/* Fotos leicht zurücknehmen, damit sie nicht als helle Flächen
herausstechen. */
img { filter: brightness(.92); }
/* Das Logo ist dunkelblau und wäre auf dunklem Grund unsichtbar.
brightness(0) macht es schwarz, invert() daraus ein gedämpftes
Weiß — die Form bleibt, nur der Wert dreht sich um. */
.marke-voll svg, .marke-signet svg,
.marke-wort svg { filter: brightness(0) invert(.93); }
}
/* ── 6 · Aufgeräumte Kleinigkeiten ────────────────────────────────*/
/* Der Leitspruch der Startseite ist jetzt die H1. Er behält das
Aussehen, das er als Zitat hatte. */
.hero h1.leitspruch {
margin: 0;
font-family: var(--schrift-display);
font-size: clamp(2rem, 5.2vw, 3.6rem);
font-weight: 300;
line-height: 1.06;
letter-spacing: -.028em;
text-wrap: balance;
hyphens: none;
}
.hero h1.leitspruch em {
font-style: italic;
color: var(--farbe-primaer);
}
/* Der Auszug ist ein geworden statt eines
— er ist
ein hervorgehobener eigener Satz, kein fremdes Zitat. Für
Vorleseprogramme macht das den Unterschied. */
.auszug { quotes: none; }
/* Verweise in der Quellenangabe waren 19 px hoch und stehen
freistehend, werden also angetippt. */
.quellenhinweis a { display: inline-block; padding-block: .25em; }
/* Der Druckkopf: nur auf Papier, dort als leise Zeile über dem Inhalt. */
@media print {
.kopf-druck {
display: block !important;
font-size: 9pt;
border-bottom: .5pt solid #000;
padding-bottom: .4em;
margin-bottom: 1.2em;
}
}
/* ── 7 · Porträt im Seitenkopf ────────────────────────────────────
Nur auf Seiten mit Bild. Der Kopf wird dann dreiteilig: Überschrift
und Vorspann links untereinander, das Bild rechts. Ohne Bild bleibt
die gewohnte Zweiteilung. */
.portraet {
margin: var(--abstand-4) 0 0;
max-width: 22rem;
}
.portraet img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
/* Ein Porträt im Hochformat, das nicht die halbe Seite füllt. */
aspect-ratio: 4 / 5;
object-fit: cover;
/* Das Original ist sehr hochformatig (1208 × 2048). Der Ausschnitt
sitzt bewusst hoch: lieber Kopf und Schultern als ein Schnitt
mitten durch die Hände. */
object-position: 50% 12%;
}
@media (min-width: 1100px) {
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal:has(.portraet) {
grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
/* Feste Zeilen statt auto: Ein hohes Bild, das über drei Zeilen
reicht, verteilt seine Höhe sonst auf genau diese Zeilen — und
zwischen Augenbraue und Überschrift entsteht eine Lücke. Mit
min-content bleiben die Textzeilen bei ihrer Höhe, der Rest fällt
in die letzte, flexible Zeile. */
grid-template-rows: min-content min-content min-content 1fr;
}
/* Mit Bild rutscht der Vorspann unter die Überschrift — sonst
stünden drei Dinge nebeneinander und keines hätte Luft. */
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal:has(.portraet) > .vorspann {
grid-column: 1; grid-row: 3;
max-width: 46ch;
margin-block: 0;
}
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal > .portraet {
grid-column: 2; grid-row: 1 / -1;
align-self: start;
margin: 0;
max-width: none;
}
.einleitung:not(.einleitung-fortsetzung) > .innen.schmal:has(.portraet) > .auszug {
/* Nur die linke Spalte: Über die volle Breite liefen die Linien des
Auszugs quer durch das Foto. */
grid-column: 1; grid-row: 4;
align-self: end;
}
}
/* ════════════════════════════════════════════════════════════════
NACHTRAG 14.09.2026, abends — die rechte Spalte bekommt eine Aufgabe
Befund: Bei 1440 px war der Fließtext 620 px breit, links 124, rechts
696 px leer. Die Lesebreite von 62 Zeichen ist richtig und bleibt —
sie ist der Grund, warum man den Text überhaupt lesen mag. Falsch war
das Verhältnis: ein 1240-px-Korridor, von dem die Hälfte nichts tut.
Zwei Eingriffe:
1 · Korridor auf 1080 px (siehe :root). Der Rest liegt jetzt außen.
2 · Auf langen Seiten steht rechts ein mitlaufender Seitenindex.
Zu 2: Die gemessenen Seitenlängen reichen bis 9.387 px — rund zwölf
Bildschirmhöhen. Wer in der Mitte steckt, weiß weder, was noch kommt,
noch wie er zurückkommt. Genau dafür ist die Fläche da.
════════════════════════════════════════════════════════════════ */
/* Der Index wird vom Fuß-Skript erzeugt, nicht vom Template. Ohne
JavaScript ist er nicht da, und es fehlt nichts: Die Überschriften
stehen ohnehin im Text. */
.seitenindex {
display: none; /* bis die Breite reicht */
font-size: var(--schrift-xs);
line-height: 1.5;
}
.seitenindex h2 {
font-family: var(--schrift-text);
font-size: var(--schrift-xs);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--farbe-text-leise);
margin: 0 0 var(--abstand-2);
padding-bottom: .6rem;
border-bottom: 1px solid var(--farbe-linie);
}
.seitenindex ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .55rem;
}
.seitenindex a {
color: var(--farbe-text-leise);
text-decoration: none;
display: block;
padding-left: .9rem;
border-left: 2px solid transparent;
transition: color 160ms var(--verlauf), border-color 160ms var(--verlauf);
}
.seitenindex a:hover,
.seitenindex a:focus-visible {
color: var(--farbe-text);
border-left-color: var(--farbe-linie-stark);
}
/* Der Abschnitt, in dem man gerade steht. aria-current macht daraus auch
für Vorleseprogramme eine Aussage, nicht nur eine Farbe. */
.seitenindex a[aria-current="true"] {
color: var(--farbe-marke);
border-left-color: var(--farbe-marke);
font-weight: 600;
}
/* Ab 1024 px reicht die Breite für Lesespalte plus Marginalie, ohne dass
eine von beiden zu schmal wird: 62ch Text + 64 px Spalte + 14 rem Index
passen in den 1000-px-Korridor. Darunter bleibt alles wie bisher.
Schwelle bewusst dieselbe wie im Fuß-Skript (matchMedia 1024px) —
wenn eine Seite weicht: Index ohne Spalte oder leere Spalte. */
@media (min-width: 1024px) {
.einleitung-fortsetzung > .innen.schmal:has(> .seitenindex) {
display: grid;
/* Erste Spalte flexibel, nicht auf 62ch festgenagelt: Sonst bliebe
rechts vom Index ein Rest des Korridors ungenutzt, und der Index
stünde nicht auf derselben Kante wie Zahlenband und Fußbereich.
Die Lesebreite begrenzt weiterhin der Text selbst. */
grid-template-columns: minmax(0, 1fr)
minmax(0, var(--breite-marginalie));
column-gap: var(--abstand-5);
align-items: start;
}
/* Genau zwei Kinder, beide ausdrücklich gesetzt — keine automatische
Platzierung, die bei einem zusätzlichen Element umkippt. */
.einleitung-fortsetzung > .innen.schmal > .fliesstext {
grid-column: 1; grid-row: 1;
}
.seitenindex {
display: block;
grid-column: 2; grid-row: 1;
position: sticky;
/* Muss unter der mitlaufenden Kopfzeile bleiben. */
top: 7rem;
max-height: calc(100vh - 9rem);
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* Gedruckt und bei abgeschalteter Bewegung: weg damit. Ein Verzeichnis
mit Sprungmarken ist auf Papier sinnlos. */
@media print {
.seitenindex { display: none !important; }
.einleitung-fortsetzung > .innen.schmal:has(> .seitenindex) { display: block !important; }
}
/* ── Nachtrag 14.09.2026: „Was dazugehört" zweispaltig ────────────
Ben: Bei vier Einträgen untereinander wird die Seite unnötig lang.
Stimmt — die Schulen-Seite hat vier, und jeder Eintrag ist zwei
Zeilen hoch. Untereinander sind das rund 400 px, die nichts sagen.
Zwei Spalten ab zwei Einträgen. Erst hatte ich drei als Schwelle
gesetzt, aus Sorge vor einer halben Zeile — falsch gedacht: Bei genau
zwei Einträgen ergeben zwei Spalten eine volle Zeile, da bleibt nichts
offen. Unschön ist nur der Fall mit **einem** Eintrag, der dann als
halbe Kachel neben einer leeren Fläche stünde.
`:has(li:nth-child(2))` prüft genau das.
Schwelle 1024 px wie beim Seitenindex: Darunter ist der Korridor
schmaler als 1000 px, und zwei Spalten würden die Beschreibungen
auf unter 40 Zeichen quetschen. Darüber ändert sich nichts mehr,
weil der Korridor gedeckelt ist. */
@media (min-width: 1024px) {
.unterseiten-liste:has(li:nth-child(2)) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--abstand-5);
}
/* Die durchgehende Linie oben gilt weiter für beide Spalten; die
Trennlinien unter den Einträgen ergeben dadurch ein Raster statt
einer Leiter. */
.unterseiten-liste:has(li:nth-child(2)) .unterseite-text {
max-width: none;
}
}
/* ── Nachtrag 14.09.2026: Der Fußbereich bekommt Grund ────────────
Ben: „Vielleicht sehen die Links vor einem dunkelblauen Hintergrund
besser aus. Das setzt den Teil noch mal besser ab."
Stimmt — und es löst zugleich ein Problem, das die verkleinerte
Schrift nur verschoben hat: Der Fußbereich stand bis eben auf
demselben Weiß wie der Inhalt und war allein durch eine Haarlinie
abgetrennt. Eine Farbfläche sagt „hier ist die Seite zu Ende",
bevor jemand ein Wort gelesen hat.
Der Ton ist das Blau aus dem Originallogo, nicht irgendein Blau.
Damit trägt die Seite oben ein blaues Signet und unten eine blaue
Fläche — die Klammer, die vorher fehlte.
Umgesetzt über Tokens, nicht über Einzelregeln: Die Farbvariablen
werden auf `.fuss` neu belegt, alles darin erbt sie. Deshalb musste
an den Regeln für Sitemap, Kontaktzeile und Rechtliches nichts
geändert werden. */
.fuss {
--farbe-text: #FFFFFF;
--farbe-text-weich: rgba(255, 255, 255, .82);
--farbe-text-leise: rgba(255, 255, 255, .68);
--farbe-linie: rgba(255, 255, 255, .20);
--farbe-linie-stark: rgba(255, 255, 255, .34);
/* Verweise, Mauszeigerzustand und Fokusring laufen über diese beiden
Variablen. Auf dunklem Grund ist Weiß die richtige Antwort. */
--farbe-primaer: #FFFFFF;
--farbe-primaer-dunkel: rgba(255, 255, 255, .75);
background: #003366;
color: #FFFFFF;
/* Die Haarlinie hat die Trennung getragen, solange alles weiß war.
Jetzt trennt die Fläche. */
border-top: 0;
}
/* Gemessen gegen #003366: Weiß 12,6:1 · .82 → 8,6:1 · .68 → 6,3:1.
Alle drei über der Anforderung von 4,5:1, auch die leiseste Stufe. */
/* Auf dunklem Grund trägt die Unterstreichung die Erkennbarkeit, nicht
die Farbe — Weiß auf Blau ist kein Farbunterschied zum Fließtext. */
.fuss a { text-decoration-color: rgba(255, 255, 255, .45); }
.fuss a:hover { text-decoration-color: #FFFFFF; }
/* Gedruckt bleibt der Fußbereich weiß. Eine vollflächige Farbe kostet
eine halbe Patrone und bringt auf Papier nichts. */
@media print {
.fuss {
background: #FFFFFF !important;
color: #000000 !important;
border-top: 1px solid #999 !important;
}
.fuss a { color: #000000 !important; }
}
/* ── Nachtrag 14.09.2026: „Was dazugehört" sieht klickbar aus ──────
Ben: „Diese Elemente sind ja klickbar. Wie kann man das bei
Mouseover besser darstellen?"
Der eigentliche Mangel lag nicht beim Überfahren, sondern davor: Im
Ruhezustand sah der Eintrag aus wie eine Überschrift mit Text. Wer
nicht zufällig mit der Maus darüberfährt, erfährt nie, dass da etwas
zu holen ist — und auf dem Telefon gibt es kein Überfahren.
Deshalb zwei Eingriffe, und der erste ist der wichtigere:
1 · **Ein Pfeil im Ruhezustand.** Dieselbe gezeichnete Maske wie bei
„Zum Thema", also dieselbe Vokabel: Pfeil heißt weiterführender
Verweis. Die Seite bringt das dem Leser ohnehin schon bei.
2 · Beim Überfahren dann alles zusammen: Titel in Markenfarbe, Pfeil
wandert, Trennlinie wird kräftiger, eine sehr leichte Tönung legt
sich unter die ganze Zeile — damit klar ist, dass die *Zeile* das
Ziel ist und nicht nur der Titel. */
.unterseite-titel {
/* Titel und Pfeil in einer Zeile, damit der Pfeil am Ende der letzten
Zeile sitzt und nicht darunter. */
display: block;
}
.unterseite-titel::after {
content: "";
display: inline-block;
width: 15px; height: 10px;
margin-left: .5em;
vertical-align: baseline;
background: currentColor;
-webkit-mask: var(--pfeil) no-repeat center / contain;
mask: var(--pfeil) no-repeat center / contain;
opacity: .45;
transition: transform var(--dauer) var(--verlauf),
opacity var(--dauer) var(--verlauf);
}
.unterseite a {
/* Die Tönung reicht über die volle Zeile, nicht nur über den Text. */
padding-inline: var(--abstand-2);
margin-inline: calc(var(--abstand-2) * -1);
border-radius: 3px;
transition: color var(--dauer) var(--verlauf),
background-color var(--dauer) var(--verlauf);
}
.unterseite a:hover,
.unterseite a:focus-visible {
background: var(--farbe-flaeche);
}
.unterseite a:hover .unterseite-titel::after,
.unterseite a:focus-visible .unterseite-titel::after {
opacity: 1;
transform: translateX(4px);
}
/* Die Trennlinie unter dem überfahrenen Eintrag wird kräftiger. Ohne das
wirkt die getönte Fläche unten offen. */
.unterseite:hover { border-bottom-color: var(--farbe-linie-stark); }
/* Wer Bewegung abgestellt hat, bekommt den Pfeil trotzdem — nur ohne
Wanderung. Die Information steckt in der Deckkraft, nicht im Weg. */
@media (prefers-reduced-motion: reduce) {
.unterseite a:hover .unterseite-titel::after,
.unterseite a:focus-visible .unterseite-titel::after { transform: none; }
}
/* Gedruckt ist nichts klickbar. */
@media print {
.unterseite-titel::after { display: none; }
}
/* ------------------------------------------------- Unterlage zum Laden
Ein Kasten, kein Textlink: Wer ein PDF herunterlädt, soll vorher
wissen, was er bekommt — Name, Zweck, Größe, Stand. Das ganze Feld
ist klickbar, nicht nur die Schrift. */
.unterlage {
padding: 0 0 var(--abstand-5);
}
.einleitung-fortsetzung + .unterlage {
padding-top: var(--abstand-4);
margin-top: calc(var(--abstand-5) * -1);
}
.unterlage-kasten {
display: flex;
align-items: center;
gap: var(--abstand-3);
max-width: var(--breite-lesbar);
padding: var(--abstand-3);
border: 1px solid var(--farbe-linie);
border-radius: 3px;
background: var(--farbe-grund);
color: inherit;
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease;
}
.unterlage-kasten:hover,
.unterlage-kasten:focus-visible {
border-color: var(--farbe-primaer);
background: var(--farbe-flaeche);
}
.unterlage-zeichen {
flex: 0 0 auto;
color: var(--farbe-primaer);
}
.unterlage-zeichen svg { display: block; width: 32px; height: 40px; }
.unterlage-text {
flex: 1 1 auto;
min-width: 0; /* sonst sprengt ein langer Dateiname den Kasten */
display: flex;
flex-direction: column;
gap: 2px;
}
.unterlage-titel {
font-weight: 600;
color: var(--farbe-primaer);
/* Unterstrichen erst im Zeigerzustand: Der ganze Kasten ist der Link,
ein dauerhafter Strich unter der Zeile sähe nach zweitem Ziel aus. */
}
.unterlage-kasten:hover .unterlage-titel,
.unterlage-kasten:focus-visible .unterlage-titel {
text-decoration: underline;
text-underline-offset: 2px;
}
.unterlage-satz {
font-size: var(--schrift-s);
color: var(--farbe-text-weich);
line-height: 1.45;
}
.unterlage-massangabe {
font-size: var(--schrift-s);
color: var(--farbe-text-leise);
font-variant-numeric: tabular-nums;
}
.unterlage-pfeil {
flex: 0 0 auto;
color: var(--farbe-text-leise);
}
.unterlage-pfeil svg { display: block; width: 22px; height: 22px; }
.unterlage-kasten:hover .unterlage-pfeil,
.unterlage-kasten:focus-visible .unterlage-pfeil {
color: var(--farbe-primaer);
}
/* Auf schmalen Geräten fällt der Pfeil weg — der Platz gehört dem Text,
und antippbar ist der Kasten ohnehin auf ganzer Fläche. */
@media (max-width: 30rem) {
.unterlage-pfeil { display: none; }
.unterlage-kasten { gap: var(--abstand-2); }
}
/* Gedruckt ist der Kasten eine Fußnote, kein Knopf. */
@media print {
.unterlage-kasten { border-color: #999; background: none; }
.unterlage-pfeil { display: none; }
}