/* ============================================================
components.css – Karten, Chips, Hero, Filter, Configurator
Baut auf tokens.css + base.css auf.
Design-Prinzipien aus dem Claude-Design-Bundle:
- hart-eckige Karten (keine 12px-Radien auf Inhalten)
- Border statt Shadow für Struktur
- keine farbigen Akzent-Top-Borders
- Kicker/Badge als Sans-Uppercase mit Unterstrich
- Italic Source Serif 4 NUR für Testimonials
============================================================ */
/* ---------- Entwurfs-Banner (sitzt über Nav + Hero) ----------
Hinweis: Der Feedback-Toggle ist fixed top:12px right:12px (siehe
feedback.css). Damit er auf wenig Platz nicht über den Bannertext
rutscht, lassen wir auf der rechten Seite ~140px frei. */
.draft-banner {
background: var(--uni-gelb-20);
border-bottom: 1px solid var(--uni-gelb-20);
color: #000000;
font-size: 13px;
line-height: 1.5;
}
/* (Der Fachvertretungs-Hinweis-Banner auf Light-Seiten – die einzige echte
Orange-Ausnahme abseits der Uni-CD-Palette – ist mit dem oeffentlichen
Go-Live entfernt. Keine .fv-hinweis-banner-Styles mehr noetig.) */
/* Redaktionelle MHB-Aktualitaets-Marker – .stand-todo ("TODO: Aktualität zu
prüfen") UND .stand-verified ("Aktualität bestätigt") – sind interne Hinweise.
In der Light-/Launch-Welt (World B, body.prod-light) ausgeblendet; staging/dev
und enriched-Welt (World A) behalten sie. */
body.prod-light .stand-todo,
body.prod-light .stand-verified { display: none; }
.draft-banner-inner {
margin: 0 auto;
padding: 9px 160px 9px 24px;
text-align: center;
white-space: nowrap;
}
.draft-banner strong { color: #000000; font-weight: 600; }
.draft-banner-nowrap { white-space: nowrap; }
.draft-banner-version {
display: block;
margin-top: 2px;
font-size: 12px;
color: #404040;
white-space: normal;
}
.draft-banner-version a { color: #00457D; }
.draft-banner-showcase {
display: inline-block;
margin-left: 1.1rem;
padding: 1px 8px;
border: 1px solid color-mix(in srgb, var(--uni-blau) 55%, transparent);
border-radius: 999px;
background: #ffffff;
color: var(--uni-blau);
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.draft-banner-showcase:hover,
.draft-banner-showcase:focus-visible {
background: var(--uni-blau);
color: #ffffff;
border-color: var(--uni-blau);
}
@media (max-width: 640px) {
.draft-banner-showcase {
display: inline-block;
margin: 4px 0 0;
}
}
@media (max-width: 900px) {
.draft-banner-inner {
white-space: normal;
max-width: 920px;
}
}
@media (max-width: 640px) {
.draft-banner { font-size: 12px; }
.draft-banner-inner {
padding: 8px 64px 8px 14px;
text-align: left;
}
.draft-banner-nowrap { white-space: normal; }
.draft-banner-version { font-size: 11px; }
}
/* ---------- Staging-Sandbox-Banner ----------
Nur sichtbar wenn STUDIUM_PROFILE=staging. Signal an dh, dass diese
Site den Staging-Mailer anspricht und nichts in der Tester-Welt landet.
Roter Tint, damit nicht mit dem gelben draft-banner verwechselt wird. */
.staging-banner {
background: var(--uni-rot-20);
border-bottom: 1px solid var(--uni-rot-20);
color: #000000;
font-size: 13px;
line-height: 1.5;
}
.staging-banner-inner {
max-width: 920px;
margin: 0 auto;
padding: 9px 160px 9px 24px;
text-align: center;
}
.staging-banner strong { color: #000000; font-weight: 600; }
@media (max-width: 640px) {
.staging-banner { font-size: 12px; }
.staging-banner-inner { padding: 8px 64px 8px 14px; text-align: left; }
}
/* ---------- Umzugs-Banner (alte Mac-Welt studienportal-test) ----------
Hellroter Hinweis, dass diese Tester-Welt durch die neue Prod-Welt
/studienstart/ abgeloest ist. Nur gesetzt, wenn STUDIUM_SUPERSEDED_URL
beim Build gesetzt war (Mac-deploy.sh, prod-Profil). Rot-20-Tint wie der
Staging-Banner, aber eigener Slot, weil dauerhaft (kein Editor-Hinweis). */
.moved-banner {
background: var(--uni-rot-20);
border-bottom: 2px solid var(--uni-rot);
color: #000000;
font-size: 15px;
line-height: 1.5;
}
.moved-banner-inner {
max-width: 920px;
margin: 0 auto;
min-height: 76px;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.moved-banner strong { color: #000000; font-weight: 700; }
.moved-banner a { color: #00457D; font-weight: 600; }
@media (max-width: 640px) {
.moved-banner { font-size: 13px; }
.moved-banner-inner { min-height: 88px; padding: 14px 16px; text-align: left; }
}
/* ---------- Hero ----------
Pattern: outer-band (full-bleed bg, vertical padding only)
+ inner (max-width + horizontal padding) – spiegelt exakt die
.nav + .nav-inner-Struktur, damit alle linken Kanten zusammen liegen. */
.hero {
position: relative;
color: white;
background: linear-gradient(135deg, var(--uni-blau) 0%, var(--uni-blau-light) 100%);
padding: 5rem 0 3.5rem;
overflow: hidden;
}
.hero--photo {
/* Default-Hero: Landing-Postkarten-Motiv. Hub-spezifische Varianten ueber
Modifier-Klassen .hero--landing/-bachelor/-master/-lehramt/-en
ueberschreiben das `background` weiter unten.
min-height: enforced fuer konsistenten Bildausschnitt zwischen Hubs
(Feedback #552 Drescher: Crop-Drift war irritierend, weil verschiedene
Hub-Heights zu unterschiedlichen `center/cover`-Ausschnitten fuehrten). */
min-height: 420px;
background:
linear-gradient(135deg, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0.72) 100%),
url('../img/bamberg-panorama.webp') center/cover;
}
.hero--landing,
.hero--photo.hero--landing,
.hero--cluster,
.hero--photo.hero--cluster {
/* Landing-Hero: Michelsberg-Motiv (hero-bamberg.webp). Die May21-Welle
(55a81d0) hatte auf bamberg-panorama.webp umgestellt; Feedback #1417
(Rosenbaum) wollte das vorige Foto zurueck.
Cluster-Seiten erben dasselbe Motiv (hero--cluster), bis sie eigene
Themenbereich-Bilder bekommen. */
background:
linear-gradient(135deg, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0.72) 100%),
url('../img/hero-bamberg.webp') center/cover;
}
.hero--bachelor,
.hero--photo.hero--bachelor {
background:
linear-gradient(135deg, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0.72) 100%),
url('../img/campus-kirschblueten.webp') center/cover;
}
.hero--master,
.hero--photo.hero--master {
background:
linear-gradient(135deg, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0.72) 100%),
url('../img/hero-master-studierende-feki.webp') center/cover;
}
.hero--lehramt,
.hero--photo.hero--lehramt {
background:
linear-gradient(135deg, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0.72) 100%),
url('../img/gebaeude-marcushaus.jpg') center/cover;
}
.hero--en,
.hero--photo.hero--en {
background:
linear-gradient(135deg, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0.72) 100%),
url('../img/hero-bamberg.webp') center/cover;
}
.hero--compact { min-height: 320px; }
.hero--compact { padding: 3rem 0 2.25rem; }
.hero--compact h1 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); max-width: 28ch; margin-bottom: 0.75rem; }
.hero--compact .hero-lead { font-size: 1.05rem; margin-bottom: 1.25rem; max-width: 60ch; }
.hero--compact .stats-bar { margin-top: 1.75rem; padding: 1.25rem 0; gap: 1rem; }
.hero--compact .stat-val { font-size: 1.75rem; }
.hero--compact .stat-label { font-size: 0.85rem; }
.hero-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
.hero h1 {
/* Einziges verbliebenes Serif-Element im Portal – bewusst gesetzt, damit
der Hero typografisch gegen die ansonsten flaechendeckende Open Sans
absticht. Kein Token, weil sonst aus Versehen wieder breit verwendet. */
font-family: 'Copse', Georgia, 'Times New Roman', serif;
color: white;
font-size: var(--fs-display);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.1;
margin: 0 0 1rem;
text-wrap: balance;
hyphens: manual;
/* Uebermaessig lange Komposita (z.B. "(Weiterbildungsmasterstudiengang)")
umbrechen, statt sie ueber die 14ch-Box hinaus abzuschneiden – #3950.
Greift nur, wenn ein Wort breiter als die Box ist; normale Titel
bleiben unberuehrt. */
overflow-wrap: break-word;
max-width: 14ch;
}
.hero .hero-lead {
font-size: var(--fs-lead);
color: rgba(255,255,255,0.92);
max-width: 52ch;
line-height: 1.55;
margin: 0 0 2rem;
/* gleicht die Zeilenlaengen aus, keine 2-Wort-Waise in Zeile 2 */
text-wrap: balance;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: white;
color: var(--uni-blau);
padding: 0.7rem 1.3rem;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
}
.hero-cta:hover { background: var(--uni-blau-lighter); text-decoration: none; }
.hero-cta--ghost {
background: transparent;
color: white;
border: 1px solid rgba(255,255,255,0.6);
}
.hero-cta--ghost:hover { background: rgba(255,255,255,0.12); }
/* Mobile: gestapelte Hero-CTAs auf einheitliche Breite bringen (vorher
content-breit und dadurch ungleich lang, z.B. /master/). */
@media (max-width: 560px) {
.hero-actions {
flex-direction: column;
align-items: stretch;
}
.hero-actions .hero-cta { justify-content: center; }
}
/* ---------- Stats bar ---------- */
.stats-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
padding: 2rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stat-item { text-align: center; }
.stat-val {
font-family: var(--font-serif);
font-size: 2.4rem;
font-weight: 700;
color: var(--uni-blau);
line-height: 1;
display: block;
}
.stat-label {
font-size: 0.95rem;
color: var(--text-light);
margin-top: 0.4rem;
display: block;
}
/* Stats variant inside hero */
.hero .stats-bar {
border-top: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
margin-top: 2.5rem;
}
.hero .stat-val { color: white; }
.hero .stat-label { color: rgba(255,255,255,0.8); }
/* ---------- Hub-Heroes (/bachelor/, /master/, /lehramt/) ---------- */
/* Einheitliche, kompakte Hero-Grammatik der drei Einstiegsseiten:
H1 maximal zweizeilig (21ch-Box statt der globalen 14ch, dafuer eine
Stufe kleiner als --fs-display), Fact-Zeile im hero-fact-row-Stil
statt der hohen zentrierten stats-bar, fester Abstand CTA -> Facts.
Doppelte Klasse (.hero.hero--hub) noetig, damit die Regeln gegen die
spaeteren generischen .hero-Descendant-Regeln (.hero h1 etc.,
gleiche Spezifitaet, spaetere Position) gewinnen. */
.hero.hero--hub { padding: 4.25rem 0 2.5rem; min-height: 360px; }
.hero.hero--hub h1 {
font-size: clamp(2rem, 4.2vw, 2.75rem);
max-width: 21ch;
margin-bottom: 0.9rem;
}
.hero.hero--hub .hero-lead { margin-bottom: 1.75rem; }
.hero.hero--hub .hero-fact-row {
margin-top: 2.25rem;
/* Trennlinie nur so breit wie die Facts selbst – die linksbuendige
Fact-Zeile mit fast-viewportbreiter Linie wirkte unausgewogen.
fit-content faellt auf Mobile (max-content > verfuegbare Breite)
automatisch auf volle Breite zurueck, die Facts wrappen normal. */
width: fit-content;
}
/* (Hero-Audience-CSS entfernt: die Zeile sass frueher im Hero, wandert per
Feedback #1280 als audience-band unter den Hero auf die Einstiegsseiten.
partials/hero_audience.html ist jetzt inert.) */
/* Schmale Full-Width-Tagline direkt unter dem Hero. */
/* Audience-Band: schlankes Zielgruppen-Band unter dem Hero (Landing,
/bachelor/, /master/, /en/). Ersetzt den frueheren Trust-Strip (CHE/
Studycheck wanderten in eine "Warum Bamberg"-Karte) und die Hero-Audience-
Zeile. Feedback #1271-1274, #1280. */
.audience-band {
background: var(--surface-tint);
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
color: var(--text-light);
/* Kurzer Hinweis, kein Fliesstext: nicht auto-trennen – „Studieninteressierte"
brach sonst mitten im Wort um (Befund 10). */
-webkit-hyphens: manual;
hyphens: manual;
}
.audience-band-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0.65rem 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
/* Schmaler Spaltenabstand: Hinweis und Exit fliessen wie ein durchgehender
Satz, kein auffaelliger Extra-Abstand nach dem ersten Satz. */
gap: 0.3rem 0.55rem;
line-height: 1.5;
}
/* Schmale Viewports: Hinweis und Exit-Link je als ruhiger, zentrierter Block
untereinander statt als umbrechende Inline-Reihe (Befund 10). */
@media (max-width: 560px) {
.audience-band-inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.45rem;
}
}
/* Kein lauter blauer Spike: das Schluesselwort nur leise per Gewicht heben,
in derselben gedaempften Bandfarbe (nicht Vollton-Blau). */
.audience-band-text strong { color: inherit; font-weight: 600; }
/* Einheitliche Bandfarbe (--text-light, 8.5:1 auf surface-tint, WCAG AAA):
der Vorlauf ("Bereits eingeschrieben?") und der Link tragen dieselbe Farbe
wie der Rest, nur die eigentliche Handlung ist per kurzem, ruhigem
Unterstrich als Link markiert. Weniger Farb-Varianz = weniger aufdringlich. */
.audience-band-exit { color: inherit; }
.audience-band-exit a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--uni-blau-20);
text-underline-offset: 3px;
}
.audience-band-exit a:hover {
color: var(--uni-blau);
text-decoration-color: var(--uni-blau-40);
}
/* ---------- Program card (canonical look from design bundle) ---------- */
.pcard {
position: relative;
background: white;
border: 1px solid var(--border);
padding: 1.25rem 1.5rem 1rem;
transition: var(--transition);
text-decoration: none;
color: var(--text);
display: flex;
flex-direction: column;
min-height: 100%;
}
.pcard:hover {
border-color: var(--uni-blau);
text-decoration: none;
}
.pcard-badge {
display: inline-block;
background: transparent;
color: var(--uni-blau);
padding: 0 0 0.35rem;
margin-bottom: 0.35rem;
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--uni-blau);
align-self: flex-start;
}
.pcard h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--uni-blau);
margin: 0.55rem 0 0.4rem;
font-weight: 700;
letter-spacing: -0.01em;
/* Kartentitel nicht auto-trennen („Stu-dies"/„Mas-ter's" bei EN-Titeln,
#Mobile-QA). overflow-wrap bricht nur echte Ueberlaenge um. */
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: break-word;
}
.pcard-lead {
font-size: 1rem;
color: var(--text-light);
line-height: 1.55;
margin: 0 0 1rem;
flex-grow: 1;
}
.pcard-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--muted);
border-top: 1px solid var(--border);
padding-top: 0.7rem;
align-items: center;
/* Meta-Zeile immer am Kartenfuss verankern: .pcard ist Flex-Spalte, dieser
auto-Margin schiebt Meta (samt Trennlinie) nach unten – auch bei Karten
ohne Beschreibung, damit die Trennlinie nie wie eine Titel-Unterstreichung
direkt unter der H3 klebt (Layout-Sweep 07/2026, A2). */
margin-top: auto;
}
.pcard-meta .k { font-weight: 600; color: var(--text); }
.pcard-meta .sep { color: var(--border); }
.pcard-meta .ok { color: #000000; font-weight: 600; }
/* Zulassungsstatus einheitlich als eigene Zeile UNTER der Meta-Zeile (statt mal
inline-grau, mal fett umgebrochen). So sieht jede Karte gleich aus, egal ob
das Label kurz („NC") oder lang („Zulassungsfrei mit Zugangsbedingungen")
ist (A2). */
.pcard-status {
margin-top: 0.5rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #000000;
font-weight: 600;
line-height: 1.35;
}
.pcard-status--nc { color: var(--muted); font-weight: 400; }
.pcard-lang {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.15rem 0.45rem;
background: var(--surface-tint);
color: var(--uni-blau);
}
/* EN-Variante: gelbe Tonung, hebt englischsprachige Studiengaenge
visuell ab. Bei Multi-Language-Programmen stehen DE und EN als
separate Pills nebeneinander. */
.pcard-lang--en {
background: var(--uni-gelb-20);
color: #000000;
}
/* ---------- Cluster card ---------- */
.cluster-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (max-width: 720px) { .cluster-grid { grid-template-columns: 1fr; } }
.cluster-card {
display: block;
background: white;
border: 1px solid var(--border);
padding: 1.3rem 1.5rem;
text-decoration: none;
color: var(--text);
transition: var(--transition);
}
.cluster-card:hover {
border-color: var(--uni-blau);
background: var(--surface-tint);
text-decoration: none;
}
.cluster-card-icon {
color: var(--accent);
margin-bottom: 0.6rem;
display: inline-block;
line-height: 1;
}
.cluster-card-icon svg { width: 28px; height: 28px; }
.cluster-card h3 {
font-size: 1.2rem;
margin: 0 0 0.3rem;
color: var(--uni-blau);
}
.cluster-card-tag {
color: var(--text-light);
font-size: 1rem;
margin: 0 0 0.6rem;
line-height: 1.5;
}
.cluster-card-count {
font-family: var(--font-sans);
font-size: 0.85rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
/* ---------- Entry path strip (Landing) ---------- */
.entry-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.entry-card {
background: var(--surface-tint);
border: 1px solid transparent;
padding: 1.3rem 1.4rem;
text-decoration: none;
color: var(--uni-blau);
transition: var(--transition);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.entry-card:hover { border-color: var(--uni-blau); text-decoration: none; }
.entry-card-kicker {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}
.entry-card-label {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.3;
}
.entry-card-arrow {
margin-top: auto;
font-size: 1.1rem;
color: var(--uni-blau);
}
/* Quiz-Auswahlhilfe-Prompt unter den Studienbereichen (Landing).
Loest die fruehere "Andere Einstiege"-Kachelreihe ab (Rosenbaum #1269). */
.quiz-prompt {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
background: var(--surface-tint);
padding: 1.2rem 1.5rem;
}
.quiz-prompt-text {
flex: 1 1 24rem;
margin: 0;
line-height: 1.55;
}
.quiz-prompt .btn { flex: 0 0 auto; }
/* ---------- Reality check block (PRD §5.5 "Das erwartet dich wirklich") ---------- */
.reality-check {
background: var(--surface-tint);
border-left: 3px solid var(--uni-blau);
padding: 1.5rem 1.75rem;
margin: 2rem 0;
}
.reality-check-kicker {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--uni-blau);
font-weight: 700;
margin-bottom: 0.4rem;
display: block;
}
.reality-check h3 {
font-size: 1.25rem;
margin: 0 0 0.8rem;
color: var(--uni-blau);
}
.reality-check dl { margin: 0; }
.reality-check dt {
font-weight: 600;
color: var(--uni-blau);
margin-top: 0.7rem;
font-size: 1rem;
}
.reality-check dd {
margin: 0.2rem 0 0;
color: var(--text);
line-height: 1.55;
}
/* ---------- Fit-for / Not-fit-for twin blocks ---------- */
.fitfor-grid {
display: grid;
/* Zwei Kaesten nebeneinander (dh 06.07.): der gestapelte
A4-Zwischenstand verschenkte die rechte Haelfte der Sektion.
Die ~520px-Spaltenbreite ist bei Karten-Kaesten ok - die Kaesten
rahmen den Text, anders als nackte Fliesstext-Absaetze. */
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
margin: 1.5rem 0;
}
@media (max-width: 760px) {
.fitfor-grid { grid-template-columns: 1fr; }
}
.fitfor-block {
background: white;
border: 1px solid var(--border);
padding: 1.25rem 1.4rem;
}
.fitfor-block h4 {
font-family: var(--font-sans);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--text);
margin: 0 0 0.8rem;
}
.fitfor-block--yes h4 { color: #000000; }
.fitfor-block--no h4 { color: #000000; }
.fitfor-block ul { list-style: none; padding: 0; margin: 0; }
.fitfor-block li {
padding-left: 1.3rem;
position: relative;
margin-bottom: 0.6rem;
line-height: 1.55;
color: var(--text);
}
.fitfor-block--yes li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #000000;
font-weight: 700;
}
.fitfor-block--no li::before {
content: "–";
position: absolute;
left: 0;
top: 0;
color: #000000;
font-weight: 700;
}
/* ---------- Key facts row (hero of detail page) ---------- */
.keyfacts {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
.keyfact {
background: rgba(255,255,255,0.12);
color: white;
padding: 0.25rem 0.75rem;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.22);
}
.keyfact-light {
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
}
/* ---------- Next steps ---------- */
.nextsteps {
background: white;
border: 1px solid var(--border);
padding: 1.4rem 1.6rem;
}
.nextsteps h4 {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.5rem;
font-weight: 700;
font-family: var(--font-sans);
}
.nextsteps + .nextsteps { margin-top: 1rem; }
/* ---------- Testimonial band (parallax) ---------- */
.testimonial-band {
position: relative;
padding: 4rem 0;
background:
linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
url('../img/bamberg-panorama.webp') center/cover fixed;
}
.testimonial-band::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.82);
}
.testimonial-band-inner {
position: relative;
z-index: 1;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 1.5rem;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.25rem;
}
.testimonial {
background: rgba(255,255,255,0.88);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 1.5rem 1.6rem;
border: 1px solid rgba(0, 69, 125, 0.1);
}
.testimonial-quote {
font-family: var(--font-serif-editorial);
font-style: italic;
font-weight: 400;
color: var(--uni-blau);
font-size: 1.15rem;
line-height: 1.55;
margin: 0 0 1rem;
letter-spacing: -0.005em;
}
.testimonial-attrib {
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text-light);
line-height: 1.45;
}
.testimonial-attrib strong {
color: var(--uni-blau);
font-weight: 700;
display: block;
margin-bottom: 0.1rem;
}
/* ---------- Interest chips (finder) ---------- */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 1.5rem 0;
}
.chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.9rem;
border: 1px solid var(--border);
background: white;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 500;
color: var(--text);
cursor: pointer;
border-radius: var(--radius-pill);
transition: var(--transition);
user-select: none;
}
.chip:hover { border-color: var(--uni-blau); }
.chip.active {
background: var(--surface-tint);
border-color: var(--uni-blau);
color: var(--uni-blau);
box-shadow: 0 0 0 1px var(--uni-blau);
}
.chip.chip--disabled,
.chip[disabled] {
opacity: 0.4;
cursor: not-allowed;
background: white;
color: var(--text);
border-color: var(--border);
box-shadow: none;
text-decoration: line-through;
}
.chip.chip--disabled:hover,
.chip[disabled]:hover {
border-color: var(--border);
}
.chip-count {
background: var(--uni-blau);
color: white;
font-size: 0.8rem;
padding: 0.05rem 0.35rem;
border-radius: 20px;
font-weight: 700;
margin-left: 0.15rem;
}
/* Finder-specific: match score */
.match-badge {
display: inline-block;
background: var(--uni-gruen-20);
color: #000000;
font-size: 0.85rem;
font-weight: 700;
padding: 0.15rem 0.55rem;
letter-spacing: 0.04em;
}
.match-badge--corner {
position: absolute;
top: 0.9rem;
right: 0.9rem;
font-size: 0.75rem;
padding: 0.1rem 0.45rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* On finder grid, leave room for the corner badge so the eyebrow's underline
doesn't visually collide with it on narrow cards. */
#finder-grid .pcard { padding-right: 5.5rem; }
/* ---------- Filter bar (horizontal) ---------- */
.filterbar {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
padding: 1rem 1.2rem;
background: white;
border: 1px solid var(--border);
margin-bottom: 1.5rem;
}
.filterbar label {
font-family: var(--font-sans);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
.filterbar select,
.filterbar input[type="search"] {
font-family: var(--font-sans);
font-size: 1rem;
padding: 0.45rem 0.6rem;
border: 1px solid var(--border);
background: white;
color: var(--text);
border-radius: 4px;
}
.filterbar select:focus,
.filterbar input:focus {
outline: none;
border-color: var(--uni-blau);
box-shadow: 0 0 0 1px var(--uni-blau);
}
/* Checkbox-Filter (z. B. „auch im Sommer beginnbar“): normaler Text statt
der uppercase-Feldlabel-Optik, Checkbox + Text in einer Zeile. */
.filterbar .filter-check {
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-transform: none;
letter-spacing: normal;
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
cursor: pointer;
}
.filterbar .filter-check input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--uni-blau);
}
/* Gruppe mehrerer Checkbox-Filter unter einem Label (z. B. „Internationale
Ausrichtung“). role=group-Span statt fieldset/legend (rendert in der
Flex-Leiste zuverlaessiger), inline in die Leiste. */
.filterbar .filter-group {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem 0.9rem;
}
.filterbar .filter-group-label {
font-family: var(--font-sans);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
/* Internationalitaets-Badge auf den Studiengangs-Karten (Doppelabschluss /
Joint-Programm / verpflichtender Auslandsaufenthalt). Gruen-20-Tint mit
schwarzem Text — palette-konform (Akzent-20-Schema). */
.pcard-meta .pcard-intl {
background: var(--uni-gruen-20);
color: #000000;
font-weight: 600;
font-size: 0.8rem;
padding: 0.15rem 0.45rem;
}
/* ---------- Comparison table ---------- */
.comparison-wrap {
overflow-x: auto;
border: 1px solid var(--border);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 1rem;
}
.comparison-table th,
.comparison-table td {
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 0.85rem 1rem;
vertical-align: top;
text-align: left;
}
.comparison-table th {
background: var(--surface-tint);
color: var(--uni-blau);
font-weight: 700;
}
.comparison-table th:first-child {
background: white;
color: var(--text);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.comparison-table td:first-child {
font-weight: 600;
color: var(--text);
background: var(--bg);
font-size: 0.9rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ---------- Contact block (people on tint) ---------- */
.contact-block {
background: var(--surface-tint);
padding: 1.5rem 1.6rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.4rem;
}
.contact-person {
display: flex;
gap: 0.9rem;
align-items: flex-start;
}
.contact-person img {
width: 64px;
height: 64px;
object-fit: cover;
filter: saturate(0.8);
}
.contact-person-name {
font-weight: 700;
color: var(--uni-blau);
margin-bottom: 0.15rem;
}
.contact-person-role {
font-size: 0.95rem;
color: var(--text-light);
margin-bottom: 0.3rem;
}
.contact-person a { color: var(--accent); font-size: 0.95rem; }
/* ---------- FAQ accordion ---------- */
.faq {
background: white;
border: 1px solid var(--border);
}
.faq + .faq { border-top: 0; }
.faq[open] {
background: white;
}
.faq-q {
width: 100%;
background: transparent;
border: 0;
text-align: left;
padding: 1.05rem 1.4rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
color: var(--uni-blau);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
list-style: none;
transition: background-color 0.15s ease;
/* Fragetitel nicht auto-trennen (erbt sonst hyphens:auto vom html-Default),
lange Woerter aber sauber umbrechen statt ueberlaufen. */
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: break-word;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--surface-tint); }
.faq[open] .faq-q {
border-bottom: 1px solid var(--border);
background: var(--surface-tint);
}
.faq-q::after {
content: "+";
font-size: 1.3rem;
font-weight: 400;
color: var(--accent);
transition: var(--transition);
flex-shrink: 0;
}
.faq[open] .faq-q::after { content: "−"; }
.faq-a {
padding: 1.25rem 1.4rem 1.4rem;
color: var(--text);
line-height: 1.65;
}
.faq-a p { margin: 0 0 0.75rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--accent); }
.faq-evidence {
margin-top: 0.9rem;
padding-top: 0.7rem;
font-size: 0.78rem;
color: var(--muted);
line-height: 1.55;
}
.faq-evidence-label {
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.7rem;
color: var(--muted);
margin-right: 0.4rem;
}
.faq-evidence a {
color: var(--muted);
text-decoration: underline;
text-decoration-color: var(--border);
text-underline-offset: 2px;
}
.faq-evidence a:hover { color: var(--text); text-decoration-color: var(--accent); }
.faq-evidence-sep { color: var(--border); margin: 0 0.35rem; }
/* "Weitere Fragen?"-Link unterhalb der Programm-FAQ — Bruecke zum
globalen Pool auf /faq/. Bewusst leise: kleine, gedaempfte Linkzeile. */
.faq-more {
margin-top: 1.4rem;
font-size: 0.88rem;
color: var(--muted);
}
.faq-more a {
color: var(--muted);
text-decoration: underline;
text-decoration-color: var(--border);
text-underline-offset: 3px;
}
.faq-more a:hover { color: var(--text); text-decoration-color: var(--accent); }
/* FAQ-Generic-Pill: markiert programmuebergreifend gepflegte FAQ-Items
(Quelle: data/faq_generic.json) gegenueber programmspezifischen.
Stil bewusst zurueckhaltend: Blau-20-Tint + Schwarz, kein Vollton. */
.faq-generic-pill {
display: inline-block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.15rem 0.45rem;
margin-right: 0.5rem;
border-radius: 0.2rem;
background: var(--uni-blau-20, #cce0ee);
color: #000;
vertical-align: 0.12em;
/* Pill immer einzeilig – frueher brach „ALLGEMEIN" auf Mobile uneinheitlich
auf zwei/drei Zeilen um. Kein Silbentrennen, kein Zeilenumbruch. */
white-space: nowrap;
-webkit-hyphens: none;
hyphens: none;
}
/* Fragetext-Buendel im Programm-FAQ (Pill + Frage). Waechst ueber die volle
Zeilenbreite; die Pill sitzt inline davor, der Titel umbricht darunter voll. */
.faq-details summary > .faq-summary-q {
flex: 1 1 auto;
min-width: 0;
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: break-word;
}
/* FAQ category heading */
.faq-category {
font-family: var(--font-sans);
/* Section-Typo-Skala (A1): FAQ-Hub-Kategorien als Eyebrow deklariert – die
Semantik bleibt h2, die Optik ist der gemeinsame Eyebrow-Stil. */
font-size: var(--eyebrow-size);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: var(--eyebrow-weight);
color: var(--muted);
margin: 2rem 0 0.6rem;
}
/* ---------- News ---------- */
.news-item {
padding: 1rem 0;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 110px 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.news-item { grid-template-columns: 1fr; gap: 0.2rem; }
}
.news-date {
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--muted);
letter-spacing: 0.03em;
text-transform: uppercase;
padding-top: 0.15rem;
}
.news-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--uni-blau);
margin: 0 0 0.3rem;
}
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.news-excerpt { color: var(--text-light); font-size: 1rem; line-height: 1.55; }
/* ---------- Lehramt configurator ---------- */
.configurator {
background: white;
border: 1px solid var(--border);
padding: 2rem 1.8rem;
}
.config-step-nav {
display: flex;
gap: 0.4rem;
margin-bottom: 1.5rem;
}
.config-step-dot {
flex: 1;
height: 4px;
background: var(--border);
}
.config-step-dot.active { background: var(--uni-blau); }
.config-step-dot.done { background: var(--uni-gruen); }
.config-step-title {
font-size: 1.3rem;
margin: 0.4rem 0 0.8rem;
color: var(--uni-blau);
}
.config-step-intro {
font-size: 0.95rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.config-nav-row {
margin-top: 1.5rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.schulart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.8rem;
margin: 1rem 0;
}
.schulart-tile {
background: white;
border: 1px solid var(--border);
padding: 1.2rem 1.3rem;
text-align: left;
cursor: pointer;
font-family: var(--font-sans);
transition: var(--transition);
color: var(--text);
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 5.5rem;
}
.schulart-tile:hover {
border-color: var(--uni-blau);
box-shadow: 0 1px 4px rgba(0,69,125,0.08);
}
.schulart-tile.selected {
border-color: var(--uni-blau);
background: var(--surface-tint);
box-shadow: 0 0 0 1px var(--uni-blau);
}
.schulart-tile-label {
font-weight: 700;
color: var(--uni-blau);
font-size: 1rem;
margin-bottom: 0.3rem;
line-height: 1.25;
}
.schulart-tile-meta {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.4;
/* Meta-Zeile am Kachelfuss verankern, damit die Zeile bei ein- vs.
zweizeiligem Titel auf gleicher Hoehe sitzt (Layout-Sweep 07/2026, A2). */
margin-top: auto;
}
.schulart-tile-extra {
display: inline-block;
margin-top: 0.3rem;
font-size: 0.78rem;
font-style: italic;
color: var(--muted);
}
.schulart-tile.placeholder-wip {
opacity: 0.55;
cursor: not-allowed;
}
.fach-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 0.5rem;
margin-top: 1rem;
}
.fach-btn {
padding: 0.55rem 0.75rem;
border: 1px solid var(--border);
background: white;
font-family: var(--font-sans);
font-size: 0.95rem;
cursor: pointer;
text-align: left;
transition: var(--transition);
color: var(--text);
display: flex;
align-items: center;
gap: 0.4rem;
}
.fach-btn:hover { border-color: var(--uni-blau); }
.fach-btn.selected {
background: var(--surface-tint);
border-color: var(--uni-blau);
color: var(--uni-blau);
font-weight: 600;
}
.fach-btn .fach-btn-label { flex: 1; }
.fach-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--bg);
}
.fach-picker-sub-header {
grid-column: 1 / -1;
margin-top: 1rem;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
}
/* Ketten-Karten für Berufliche Schulen */
.kette-card {
grid-column: 1 / -1;
display: block;
background: white;
border: 1px solid var(--border);
padding: 1rem 1.2rem;
font-family: var(--font-sans);
text-align: left;
cursor: pointer;
transition: var(--transition);
color: var(--text);
}
.kette-card:hover { border-color: var(--uni-blau); }
.kette-card.selected {
border-color: var(--uni-blau);
background: var(--surface-tint);
box-shadow: 0 0 0 1px var(--uni-blau);
}
.kette-card-label {
font-weight: 700;
color: var(--uni-blau);
font-size: 1rem;
margin-bottom: 0.25rem;
}
.kette-card-route {
font-size: 0.88rem;
color: var(--muted);
}
.config-summary {
background: var(--surface-tint);
padding: 1.4rem 1.6rem;
margin-top: 1.5rem;
}
/* ---------- Lehramt-Finder (Tabs + Matrix + Kombi-Inline) ---------- */
.lehramt-finder {
margin-top: 1.5rem;
}
.finder-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 2px solid var(--border);
margin-bottom: 1.6rem;
}
.finder-tab {
background: transparent;
border: none;
border-bottom: 3px solid transparent;
padding: 0.7rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: var(--transition);
margin-bottom: -2px;
}
.finder-tab:hover { color: var(--uni-blau); }
.finder-tab.active {
color: var(--uni-blau);
border-bottom-color: var(--uni-blau);
}
.finder-tab--matrix {
font-style: italic;
font-weight: 500;
font-size: 0.88rem;
}
/* Mobile: kompaktere Schulart-/Matrix-Tabs, damit die sechs Tabs
gleichmaessiger umbrechen statt ungleich zu verspringen. */
@media (max-width: 560px) {
.finder-tab { padding: 0.55rem 0.7rem; font-size: 0.9rem; }
.finder-tab--matrix { font-size: 0.84rem; }
}
.finder-panel-head {
margin-bottom: 1.2rem;
}
.finder-panel-title {
font-size: 1.25rem;
margin: 0 0 0.3rem;
color: var(--uni-blau);
}
.finder-panel-meta {
color: var(--muted);
font-size: 0.92rem;
margin: 0 0 0.4rem;
}
.finder-panel-note {
font-size: 0.9rem;
color: var(--text);
margin: 0.4rem 0 0;
line-height: 1.5;
}
.finder-panel-note--inset {
margin-top: 0.6rem;
padding: 0.7rem 0.9rem;
background: color-mix(in srgb, var(--surface-tint) 55%, #ffffff);
border-radius: 6px;
color: var(--text);
}
.didaktik-regel {
margin: 0.9rem 0 0;
border: 1px solid var(--uni-blau-soft);
border-radius: 8px;
background: color-mix(in srgb, var(--surface-tint) 35%, #ffffff);
}
.didaktik-regel-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.7rem 0.95rem;
font-size: 0.93rem;
font-weight: 600;
color: var(--uni-blau);
}
.didaktik-regel-summary::-webkit-details-marker { display: none; }
.didaktik-regel-chevron {
flex-shrink: 0;
transition: transform 0.18s ease;
opacity: 0.7;
}
.didaktik-regel[open] .didaktik-regel-chevron { transform: rotate(180deg); }
.didaktik-regel-body {
padding: 0 0.95rem 0.85rem;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text);
}
.didaktik-regel-body > p { margin: 0.55rem 0 0; }
.didaktik-regel-list {
margin: 0.35rem 0 0;
padding-left: 1.2rem;
}
.didaktik-regel-list li { margin: 0.15rem 0; }
.didaktik-regel-fall {
margin-top: 0.7rem;
}
.didaktik-regel-fall-head { margin: 0; }
.finder-section-label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin: 1.6rem 0 0.7rem;
}
/* Kein opacity-Fade: .finder-section-label ist bereits --muted (5.3:1);
ein zusaetzliches opacity:0.75 drueckte den effektiven Kontrast auf ~3:1
(WCAG 1.4.3). Die sekundaere Wirkung traegt der Kontext (Buendelung unter
"Nicht in Bamberg studierbar"), nicht ein nochmaliges Aufhellen. */
.finder-section-label--muted { opacity: 1; }
.fach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 0.5rem;
}
.fach-card {
display: block;
padding: 0.6rem 0.85rem;
border: 1px solid var(--border);
background: white;
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text);
text-decoration: none;
transition: var(--transition);
}
.fach-card:hover {
border-color: var(--uni-blau);
color: var(--uni-blau);
background: var(--surface-tint);
}
.fach-card--plain {
cursor: default;
color: var(--text);
}
.fach-card--plain:hover {
border-color: var(--border);
color: var(--text);
background: white;
}
.fach-grid--disabled .fach-card--disabled {
opacity: 0.55;
cursor: help;
background: var(--bg);
}
/* Kombi-Inline-Form */
.kombi-inline {
margin-top: 2rem;
padding: 1.3rem 1.5rem;
background: var(--surface-tint);
}
.kombi-form {
display: flex;
align-items: flex-end;
gap: 0.8rem;
flex-wrap: wrap;
margin-top: 0.8rem;
}
.kombi-form label {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
color: var(--uni-blau);
flex: 1 1 220px;
min-width: 200px;
}
.kombi-form select {
padding: 0.55rem 0.7rem;
border: 1px solid var(--border);
background: white;
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text);
cursor: pointer;
}
.kombi-form select:focus {
outline: 2px solid var(--uni-blau);
outline-offset: -1px;
}
.kombi-form-plus {
font-size: 1.4rem;
color: var(--muted);
padding-bottom: 0.5rem;
font-weight: 700;
}
.kombi-result {
margin-top: 1rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--border);
background: white;
font-size: 0.95rem;
}
.kombi-result p { margin: 0 0 0.6rem; line-height: 1.5; }
.kombi-result p:last-child { margin-bottom: 0; }
.kombi-result .btn { margin-top: 0.4rem; }
.kombi-result--ok { border-left: none; border-color: var(--uni-blau); background: var(--surface-tint); }
.kombi-result--info { background: var(--surface-tint); }
.kombi-result--warn { background: var(--uni-gelb-tint, #fff8e6); }
.kombi-result--error { background: white; }
/* Kombi-Partner-Pillen auf 2-Fach-Lehramt-Fachseiten ------------------------- */
.kombi-partner-grid {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1rem;
}
.kombi-partner-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border: 1px solid var(--border);
background: white;
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text);
text-decoration: none;
transition: var(--transition);
}
a.kombi-partner-pill:hover {
border-color: var(--uni-blau);
color: var(--uni-blau);
background: var(--surface-tint);
}
.kombi-partner-plus {
font-weight: 700;
color: var(--muted);
font-size: 1.05rem;
}
a.kombi-partner-pill:hover .kombi-partner-plus { color: var(--uni-blau); }
.kombi-partner-cta {
margin-left: 0.2rem;
color: var(--muted);
}
a.kombi-partner-pill:hover .kombi-partner-cta { color: var(--uni-blau); }
.kombi-partner-pill--external {
background: var(--surface-tint);
cursor: help;
}
.kombi-partner-pill--plain {
opacity: 0.7;
}
.kombi-partner-badge {
font-size: 0.78rem;
padding: 0.1rem 0.45rem;
background: white;
border: 1px solid var(--border);
color: var(--muted);
font-weight: 600;
margin-left: 0.3rem;
}
/* Klick-zu-Auswählen: Markierungs-Badge auf .fach-card im Kombi-Modus ------- */
.fach-card {
position: relative;
}
.fach-card.is-selected {
border-color: var(--uni-blau);
background: var(--surface-tint);
color: var(--uni-blau);
font-weight: 600;
}
.fach-card /* Kurz-Hinweis-Tag am Fach-Chip (Eignungsprüfung, über FAU – Kanitz #3347ff).
Dezent grau, Vollton-Text; kein Farb-Akzent nötig. */
.fach-card-tag {
display: inline-block;
margin-left: 0.45rem;
padding: 0.05rem 0.5rem;
border: 1px solid var(--uni-grau-20);
border-radius: 999px;
font-size: 0.72rem;
color: var(--uni-grau-80);
background: #fff;
vertical-align: 1px;
white-space: nowrap;
}
.fach-card-badge {
position: absolute;
top: -0.45rem;
right: -0.45rem;
min-width: 1.3rem;
height: 1.3rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--uni-blau);
color: white;
font-size: 0.78rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Kombi-Action-Bar: sticky-ish unterhalb des Karten-Grids im 2-Fach-Modus -- */
.kombi-actionbar {
margin-top: 1rem;
padding: 0.85rem 1rem;
background: white;
border: 1px solid var(--uni-blau);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1rem;
font-family: var(--font-sans);
font-size: 0.95rem;
}
.kombi-actionbar[hidden] { display: none; }
.kombi-actionbar-state {
flex: 1 1 220px;
min-width: 200px;
}
.kombi-actionbar-state strong { color: var(--uni-blau); }
.kombi-actionbar-hint {
color: var(--muted);
font-size: 0.88rem;
margin-left: 0.25rem;
}
/* Zulassungsbeschränkung-Hinweis (Schulpsychologie): etwas kräftiger als der
muted Studierbarkeits-Hinweis, neutraler Trenner oben (kein Akzent-Rand). */
.kombi-actionbar-hint--zulassung {
display: block;
margin: 0.45rem 0 0;
padding-top: 0.4rem;
border-top: 1px solid var(--border);
color: var(--text-light);
}
.kombi-actionbar-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.kombi-actionbar--warn { border-color: var(--uni-gelb, #b8860b); background: var(--uni-gelb-tint, #fff8e6); }
.kombi-actionbar--ok { background: var(--surface-tint); }
/* "Nach Fach"-Tab: Fach-Wolke und Detail-Card --------------------------- */
.fach-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.fach-cloud-pill {
padding: 0.45rem 0.8rem;
border: 1px solid var(--border);
background: white;
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--text);
cursor: pointer;
transition: var(--transition);
}
.fach-cloud-pill:hover {
border-color: var(--uni-blau);
color: var(--uni-blau);
background: var(--surface-tint);
}
.fach-cloud-pill.is-active {
border-color: var(--uni-blau);
background: var(--uni-blau);
color: white;
}
.fach-detail-card {
margin-top: 1.4rem;
padding: 1.1rem 1.4rem;
background: var(--surface-tint);
border: 1px solid var(--border);
}
.fach-detail-card[hidden] { display: none; }
.fach-detail-card-title {
margin: 0 0 0.4rem;
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--uni-blau);
}
.fach-detail-card-lead {
margin: 0 0 0.9rem;
color: var(--text);
font-size: 0.95rem;
line-height: 1.5;
}
.fach-detail-card-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fach-detail-card-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.5rem 0.7rem;
background: white;
border: 1px solid var(--border);
}
.fach-detail-card-list li.is-unavailable {
background: transparent;
border-style: dashed;
opacity: 0.7;
}
.fach-detail-card-sa { font-weight: 600; }
.fach-detail-card-note { color: var(--muted); font-size: 0.88rem; }
/* Fach-Matrix */
.fach-matrix-wrap {
overflow-x: auto;
margin-top: 0.5rem;
}
.fach-matrix {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 0.92rem;
}
.fach-matrix th, .fach-matrix td {
padding: 0.55rem 0.8rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.fach-matrix thead th {
background: var(--surface-tint);
color: var(--uni-blau);
font-weight: 700;
border-bottom: 2px solid var(--uni-blau);
}
.fach-matrix .matrix-th-fach { text-align: left; min-width: 14rem; }
.fach-matrix .matrix-th-sa { text-align: center; min-width: 6.5rem; }
.fach-matrix tbody th {
font-weight: 500;
color: var(--text);
background: white;
}
.fach-matrix .matrix-cell { text-align: center; }
.fach-matrix tbody tr:hover { background: var(--bg); }
.matrix-tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
color: var(--uni-blau);
font-weight: 700;
text-decoration: none;
border-radius: 2px;
transition: var(--transition);
}
.matrix-tick:hover {
background: var(--uni-blau);
color: white;
text-decoration: none;
}
.matrix-tick--plain { color: var(--uni-blau); cursor: default; }
.matrix-tick--plain:hover { background: transparent; color: var(--uni-blau); }
.matrix-dash { color: var(--border); font-size: 1.1rem; }
/* Berufliche-Schulen-Karten (statisch, nicht im Konfigurator) */
.kette-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.kette-card-static {
background: white;
border: 1px solid var(--border);
padding: 1.3rem 1.4rem;
/* Flex-Spalte, damit die Button-Reihe unten buendig sitzt – auch bei
zweizeiligem Kartentitel (dritte Karte). */
display: flex;
flex-direction: column;
}
.kette-card-static .kette-card-label {
font-weight: 700;
color: var(--uni-blau);
font-size: 1.05rem;
margin: 0 0 0.4rem;
}
.kette-card-static .kette-card-route {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.5;
margin: 0 0 1rem;
}
.kette-card-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
/* Am Kartenfuss verankern, damit die Button-Reihen ueber alle Karten
hinweg auf einer Hoehe liegen. */
margin-top: auto;
}
.config-summary h4 { margin: 0 0 0.5rem; color: var(--uni-blau); font-size: 1.05rem; }
.config-summary-meta { color: var(--muted); margin-bottom: 0.6rem; }
.config-summary-cta { margin-top: 1rem; display: inline-block; }
.config-summary-note { font-size: 0.85rem; margin-top: 0.6rem; }
.config-summary-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Buttons (generic) */
.btn {
display: inline-block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 1rem;
padding: 0.6rem 1.1rem;
border: 1px solid var(--uni-blau);
background: var(--uni-blau);
color: white;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
transition: var(--transition);
}
.btn:hover { background: var(--uni-blau-light); border-color: var(--uni-blau-light); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--uni-blau); }
.btn-ghost:hover { background: var(--surface-tint); color: var(--uni-blau); }
.btn-small { padding: 0.4rem 0.8rem; font-size: 0.95rem; }
/* ---------- Program detail layout ---------- */
.detail-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 2.5rem;
max-width: var(--container-wide);
margin: 0 auto;
padding: 2.5rem 1.5rem;
}
@media (max-width: 980px) {
.detail-wrap { grid-template-columns: 1fr; }
}
.detail-main > section { margin-bottom: 2.5rem; }
.detail-main h2 {
font-size: 1.4rem;
margin-bottom: 0.7rem;
max-width: 32ch;
}
.detail-aside {
position: sticky;
top: calc(var(--nav-height) + 1rem);
align-self: start;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.detail-aside .contact-block,
.detail-aside .nextsteps {
padding: 1.2rem 1.3rem;
}
.detail-aside h4 {
font-family: var(--font-sans);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
color: var(--accent);
margin: 0 0 0.5rem;
}
/* ---------- Satellite page (shorter) ---------- */
.satellite-note {
background: var(--bg);
border: 1px dashed var(--border);
padding: 0.9rem 1.2rem;
font-size: 0.95rem;
color: var(--muted);
margin: 1.5rem 0;
}
.satellite-note a { color: var(--accent); font-weight: 600; }
/* ---------- Comparison sets landing ---------- */
.comp-set-card {
background: white;
border: 1px solid var(--border);
padding: 1.3rem 1.5rem;
text-decoration: none;
color: var(--text);
transition: var(--transition);
display: block;
}
.comp-set-card:hover { border-color: var(--uni-blau); text-decoration: none; }
.comp-set-card h2 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.comp-set-card p { color: var(--text-light); font-size: 1rem; margin: 0 0 0.5rem; line-height: 1.5; }
.comp-set-meta { font-size: 0.9rem; color: var(--muted); font-family: var(--font-sans); }
/* ---------- Breadcrumb ----------
Eigene, dunkler eingelassene Bande unter der Top-Nav — hebt sich durch
abgedunkeltes Blau + helle Naht-Hairline klar von der Nav ab, statt mit
ihr zu verschmelzen. Palette-konform: nur uni-blau (abgedunkelt) + Weiß.
Kein heller „Mittelstreifen" zwischen Nav und Foto-Hero. */
.breadcrumb {
font-family: var(--font-sans);
font-size: 0.8rem;
background: color-mix(in srgb, var(--uni-blau) 80%, #000);
color: rgba(255, 255, 255, 0.7);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
letter-spacing: 0.02em;
line-height: 1;
}
.breadcrumb-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0.55rem 1.5rem 0.6rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.1rem;
min-height: 0;
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
padding: 0.1rem 0;
transition: color var(--transition);
}
.breadcrumb a:hover {
color: white;
text-decoration: underline;
text-underline-offset: 2px;
}
.breadcrumb-sep {
color: rgba(255, 255, 255, 0.3);
margin: 0 0.5rem;
}
.breadcrumb-current {
color: white;
font-weight: 600;
}
/* ============================================================
Programm-Suche (Combobox) – auf /, /master/, /en/
============================================================ */
.program-search {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.program-search-label {
display: block;
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 0.4rem;
}
.program-search-field {
position: relative;
}
.program-search-field input[type="search"] {
width: 100%;
font: inherit;
font-size: 1.1rem;
padding: 0.85rem 1rem 0.85rem 2.6rem;
border: 1.5px solid var(--border);
border-radius: var(--radius);
background: var(--card-bg);
color: var(--text);
transition: border-color var(--transition), box-shadow var(--transition);
/* Langer Placeholder auf schmalen Viewports sauber mit … kappen statt
hart abschneiden. */
text-overflow: ellipsis;
}
.program-search-field input[type="search"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0, 69, 125, 0.18);
}
.program-search-field::before {
content: "";
position: absolute;
left: 0.95rem;
top: 50%;
width: 1.1rem;
height: 1.1rem;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.program-search-hint {
margin-top: 0.5rem;
font-size: var(--fs-xs);
color: var(--muted);
}
.program-search-listbox {
position: absolute;
top: calc(100% + 0.3rem);
left: 0;
right: 0;
max-height: 26rem;
overflow-y: auto;
margin: 0;
padding: 0.4rem 0;
list-style: none;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 50;
}
.program-search-listbox[hidden] { display: none; }
.combobox-group {
font-size: var(--fs-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
padding: 0.6rem 1rem 0.3rem;
}
.combobox-group:not(:first-child) {
border-top: 1px solid var(--border);
margin-top: 0.3rem;
padding-top: 0.6rem;
}
.combobox-option {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.8rem;
padding: 0.55rem 1rem;
cursor: pointer;
transition: background var(--transition);
}
.combobox-option:hover,
.combobox-option.is-active {
background: var(--surface-tint);
}
.combobox-option.is-active {
outline: 2px solid var(--accent-light);
outline-offset: -2px;
}
.combobox-option-main {
flex: 1 1 auto;
color: var(--text);
font-weight: 500;
}
.combobox-option-main mark {
background: rgba(255, 211, 0, 0.25);
color: inherit;
padding: 0;
font-weight: 700;
}
.combobox-option-meta {
flex: 0 0 auto;
font-size: var(--fs-xs);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.combobox-option--cluster .combobox-option-main::before {
content: "▦ ";
color: var(--accent);
margin-right: 0.2em;
}
/* Match-Reason-Pille: macht sichtbar, dass ein Programm via Themen-Tag
gefunden wurde, obwohl das Stichwort nicht im Namen steht. */
.combobox-option-reason {
display: inline-block;
margin-left: 0.6em;
font-size: var(--fs-micro);
font-weight: 500;
color: var(--muted);
font-style: italic;
}
.combobox-empty {
padding: 0.9rem 1rem;
color: var(--text-light);
font-size: var(--fs-sm);
line-height: 1.5;
}
.combobox-empty strong { color: var(--text); }
/* sr-only für die Live-Region */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Trailing-Container: Pills + optional Sprach-Suffix, rechts ausgerichtet */
.combobox-option-trailing {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
}
.combobox-option-lang {
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Farb-Pillen fuer die Sprach-Anzeige auf /en/ (search.js setzt die
Modifier-Klassen nur, wenn opts.showAllLanguages aktiv ist). Tokens aus
der Uni-Farbpalette (siehe KNOWLEDGE §2): Blau-20 fuer English-taught
(„positive Affirmation"), Gelb-20 fuer German-taught („sanfter Hinweis
— Sie brauchen Deutsch"), mixed = Gelb-20 in milderer Variante. */
.combobox-option-lang--en,
.combobox-option-lang--de,
.combobox-option-lang--mixed {
padding: 0.15rem 0.55rem;
border-radius: 999px;
letter-spacing: 0.02em;
color: #000;
}
.combobox-option-lang--en {
/* Blau-20 in Vollsaettigung gibt zu wenig Kontrast zum Blau-Vollton-Text;
mit Weiss auf ~45% aufhellen (Pattern aus KNOWLEDGE §2 / TODO_farbpalette). */
background: color-mix(in srgb, var(--uni-blau-20) 45%, #ffffff);
color: var(--uni-blau);
}
.combobox-option-lang--de {
background: var(--uni-gelb-20);
}
.combobox-option-lang--mixed {
background: color-mix(in srgb, var(--uni-gelb-20) 60%, #ffffff);
}
/* Variante-Label (Bachelor/Master/Lehramt/Staatsexamen) als rechtsbuendige
Zweitspalte. Jede Variante eines Studiengangs ist ein eigener ``-
Treffer, daher kein Pill-Cluster sondern ein einzelnes Label pro Zeile —
das gesamte `` ist Klick-Target (siehe #308). */
.combobox-option-degree {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--uni-blau);
white-space: nowrap;
}
/* Visuelle Gruppierung verwandter Varianten (gleicher Studiengang-Name,
z.B. Bachelor + Master). Die Continuation-Zeile rueckt den Namen ein und
nimmt ihn farblich zurueck — die Information „gleicher Studiengang" wird
so erkennbar, ohne dass beide Eintraege in eine Card gezwungen werden. */
.combobox-option--grouped-cont {
border-top: 1px dashed var(--border);
}
.combobox-option--grouped-cont .combobox-option-main {
padding-left: 1.2rem;
color: var(--muted);
font-weight: 400;
position: relative;
}
.combobox-option--grouped-cont .combobox-option-main::before {
content: "↳";
position: absolute;
left: 0;
color: var(--muted);
font-weight: 400;
}
.combobox-option--grouped-cont .combobox-option-main mark {
color: var(--text);
}
/* Negativ-Hinweis (z.B. „Medizin nicht im Programm") */
.combobox-notice {
padding: 0.7rem 1rem 0.85rem;
background: var(--uni-gelb-20);
border: 1px solid var(--uni-gelb-20);
margin: 0 0.4rem 0.4rem;
border-radius: var(--radius-sm);
}
.combobox-notice-head {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.combobox-notice-head strong {
color: var(--text);
font-size: var(--fs-sm);
}
.combobox-notice-body {
margin: 0;
font-size: var(--fs-xs);
color: var(--text-light);
line-height: 1.45;
}
.combobox-notice-suggest {
margin: 0.4rem 0 0;
font-size: var(--fs-xs);
color: var(--muted);
}
.combobox-notice-suggest a {
color: var(--accent);
font-weight: 600;
}
/* ============================================================
Bamberg-Parallax – scrollgetriebener Bilder-Strip
Architektur: 200vh hohe Section. Ein JS-Listener (parallax.js)
simuliert Sticky per `transform: translateY(...)` auf dem Stage
und schiebt den Track gleichzeitig horizontal – beides kalibriert
auf den Scroll-Fortschritt der Section durch den Viewport.
Wir nutzen bewusst KEIN `position: sticky`, weil
`body { overflow-x: hidden }` (base.css:18) Sticky bei
Body-Nachfahren neutralisiert.
Default-Layout (ohne JS / Mobile / reduced-motion) ist ein
normaler horizontaler Scroll-Snap-Slider – das JS aktiviert den
Parallax-Modus durch Setzen der `.is-parallax`-Klasse.
============================================================ */
.bamberg-parallax {
position: relative;
background: var(--surface-tint);
overflow: hidden;
padding: 3rem 0 3.5rem;
}
.bamberg-parallax-stage {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.bamberg-parallax-track {
display: flex;
gap: 1.25rem;
padding: 0 1.5rem;
width: max-content;
}
.bamberg-parallax-slide {
flex: 0 0 auto;
width: min(72vw, 520px);
aspect-ratio: 4 / 5;
margin: 0;
position: relative;
overflow: hidden;
border-radius: var(--radius-card, 4px);
background: var(--uni-blau);
box-shadow: 0 18px 40px -22px rgba(0,0,0,0.45);
scroll-snap-align: center;
}
.bamberg-parallax-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.bamberg-parallax-slide:hover img { transform: scale(1.04); }
.bamberg-parallax-slide figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 1.4rem 1.1rem 1rem;
background: linear-gradient(to top, rgba(0, 69, 125, 0.78) 0%, rgba(0, 69, 125, 0) 100%);
color: white;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.bamberg-parallax-hint {
position: absolute;
top: 1.1rem;
right: 1.5rem;
font-family: var(--font-sans);
font-size: var(--fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
opacity: 0.75;
pointer-events: none;
z-index: 2;
}
/* Aktiver Parallax-Modus – wird vom JS aktiviert. Stage wird via
transform pseudo-sticky gehalten, Track via transform horizontal
gescrollt. Beides bleibt im Composite-Layer (will-change: transform). */
.bamberg-parallax.is-parallax {
height: 200vh;
padding: 0;
}
.bamberg-parallax.is-parallax .bamberg-parallax-stage {
height: 100vh;
overflow: hidden;
scroll-snap-type: none;
will-change: transform;
}
.bamberg-parallax.is-parallax .bamberg-parallax-track {
height: 100%;
align-items: center;
padding: 0 6vw;
will-change: transform;
}
.bamberg-parallax.is-parallax .bamberg-parallax-slide {
scroll-snap-align: none;
}
/* Mobile + reduced-motion: niemals Parallax – normaler Snap-Slider.
Klasse `.is-parallax` wird vom JS gar nicht erst gesetzt; diese
Regeln sind Sicherheitsnetz, falls JS doch Parallax-State erbt. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
.bamberg-parallax.is-parallax { height: auto; padding: 3rem 0 3.5rem; }
.bamberg-parallax.is-parallax .bamberg-parallax-stage {
height: auto; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; transform: none !important;
}
.bamberg-parallax.is-parallax .bamberg-parallax-track {
height: auto; padding: 0 1rem; transform: none !important;
}
.bamberg-parallax.is-parallax .bamberg-parallax-slide { scroll-snap-align: center; }
}
/* ============================================================
Lehramt-Fach-Detail: Stundenplan, ECTS-Waterfall, Roadmap
============================================================ */
/* Kategorie-Farben – als Hintergrund/Border-Zubrand für drei Bausteine. */
.lehramt-cat-fachwiss { --cat-c: var(--uni-blau); --cat-bg: var(--uni-blau-20); }
.lehramt-cat-didaktikfach { --cat-c: var(--uni-blau-40); --cat-bg: var(--uni-blau-20); }
.lehramt-cat-fachdid { --cat-c: var(--uni-rot); --cat-bg: var(--uni-gelb-20); }
.lehramt-cat-ews { --cat-c: var(--uni-gruen); --cat-bg: var(--uni-gruen-20); }
.lehramt-cat-praxis { --cat-c: var(--uni-blau-60); --cat-bg: var(--uni-blau-20); }
.lehramt-cat-thesis { --cat-c: var(--uni-rot); --cat-bg: var(--uni-rot-20); }
.lehramt-cat-wahl { --cat-c: var(--uni-grau); --cat-bg: var(--uni-grau-20); }
/* Basisqualifikationen (GS/MS): eigene Legende statt "Wahlbereich" (Kanitz #4182/#4189),
Optik identisch zu wahl (grauer Outline-Balken). */
.lehramt-cat-basisqual { --cat-c: var(--uni-grau); --cat-bg: var(--uni-grau-20); }
/* Meta-Pill-Reihe (Hero) */
.meta-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.meta-pill {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.85rem;
padding: 0.35rem 0.7rem;
background: var(--surface-tint);
border: 1px solid var(--border);
color: var(--text);
}
/* Legende über dem Stundenplan */
.lehramt-timetable-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.6rem;
margin: 1.2rem 0 0.8rem;
font-family: var(--font-sans);
font-size: 0.82rem;
}
.lehramt-cat-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.6rem;
background: var(--cat-bg);
border-left: 3px solid var(--cat-c);
color: var(--text);
}
/* Stundenplan-Grid: 1 Zeitspalte + 5 Tage; Stundenraster in 30-Min-Slots. */
.lehramt-timetable {
display: grid;
grid-template-columns: 70px repeat(5, minmax(0, 1fr));
grid-template-rows: 32px repeat(22, 22px); /* 22 Slots à 30min = 11h von 8-19 Uhr */
background: white;
border: 1px solid var(--border);
font-family: var(--font-sans);
position: relative;
overflow: hidden;
}
.ltt-corner {
background: var(--surface-tint);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.ltt-day-header {
background: var(--surface-tint);
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--uni-blau);
display: flex;
align-items: center;
justify-content: center;
}
.ltt-day-header:last-child { border-right: none; }
.ltt-hour-label {
grid-column: 1;
font-size: 0.72rem;
color: var(--muted);
border-right: 1px solid var(--border);
border-top: 1px dashed rgba(0,0,0,0.05);
padding: 2px 6px;
align-self: start;
}
.ltt-session {
background: var(--cat-bg);
border-left: 3px solid var(--cat-c);
margin: 1px;
padding: 4px 6px;
font-size: 0.74rem;
line-height: 1.2;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 1;
}
.ltt-session-type {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.65rem;
color: var(--cat-c);
font-weight: 700;
margin-bottom: 1px;
}
.ltt-session-title {
font-weight: 600;
color: var(--text);
font-size: 0.78rem;
}
.ltt-session-time {
margin-top: auto;
font-size: 0.66rem;
color: var(--muted);
}
/* Mobile: Stundenplan wird zu vertikaler Liste (Grid wäre zu eng) */
@media (max-width: 720px) {
.lehramt-timetable {
display: block;
border: none;
}
.ltt-corner, .ltt-hour-label { display: none; }
.ltt-day-header {
background: var(--uni-blau);
color: white;
padding: 0.4rem 0.7rem;
margin-top: 0.8rem;
border-right: none;
border-bottom: none;
justify-content: flex-start;
}
.ltt-session {
margin: 0;
border: 1px solid var(--border);
border-left: 3px solid var(--cat-c);
border-top: none;
padding: 0.6rem 0.8rem;
background: var(--cat-bg);
}
}
/* ECTS-Waterfall – gestapelter Balken */
.ects-waterfall {
display: flex;
width: 100%;
height: 60px;
border: 1px solid var(--border);
margin: 1.2rem 0;
background: var(--bg);
font-family: var(--font-sans);
}
.ects-segment {
background: var(--cat-c);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
border-right: 1px solid white;
position: relative;
min-width: 0;
}
.ects-segment:last-child { border-right: none; }
.ects-segment-ects::after { content: ' ECTS'; font-weight: 400; font-size: 0.72rem; opacity: 0.85; }
.ects-legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.6rem 1rem;
margin-top: 1.2rem;
font-family: var(--font-sans);
}
.ects-legend-item {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.88rem;
}
.ects-legend-swatch {
width: 14px;
height: 14px;
background: var(--cat-c);
flex-shrink: 0;
margin-top: 3px;
}
.ects-legend-label { font-weight: 600; color: var(--text); }
.ects-legend-value { color: var(--muted); font-size: 0.8rem; }
/* Roadmap: Studienverlauf bis Ref */
.lehramt-roadmap {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
position: relative;
}
.lehramt-roadmap::before {
content: '';
position: absolute;
left: 19px;
top: 14px;
bottom: 14px;
width: 2px;
background: var(--border);
z-index: 0;
}
.lehramt-roadmap-item {
display: grid;
grid-template-columns: 40px 1fr;
gap: 1rem;
padding: 0.7rem 0;
position: relative;
z-index: 1;
}
.lrm-marker {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: 2px solid var(--uni-blau);
color: var(--uni-blau);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.95rem;
flex-shrink: 0;
}
.lrm-marker--post {
background: var(--uni-blau);
color: white;
border-color: var(--uni-blau);
}
.lehramt-roadmap-item.has-milestone .lrm-marker {
background: var(--uni-rot);
color: white;
border-color: #000000;
}
.lehramt-roadmap-item.lehramt-roadmap-post .lrm-marker--post {
background: var(--uni-gruen);
border-color: #000000;
color: white;
}
.lehramt-roadmap-legend {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--uni-grau);
}
.lehramt-roadmap-legend li {
display: flex;
align-items: center;
gap: 7px;
}
.lrm-legend-dot {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
}
.lrm-legend-uni { background: white; border: 2px solid var(--uni-blau); }
.lrm-legend-milestone { background: var(--uni-rot); border: 2px solid #000000; }
.lrm-legend-post { background: var(--uni-gruen); border: 2px solid #000000; }
.lrm-body { padding-top: 4px; }
.lrm-phase {
font-family: var(--font-sans);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
font-weight: 700;
margin-bottom: 0.15rem;
}
.lrm-fokus {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--text);
line-height: 1.45;
}
.lrm-milestone {
margin-top: 0.3rem;
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--uni-rot);
color: white;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
}
/* === Roadmap-Collapse mit Fade + Aufklappen-Button =====================
Default per JS gesetzt: nur die ersten ~2 Etappen sichtbar, dann Fade
zum Container-Hintergrund. Ohne JS bleibt die Liste vollstaendig
sichtbar (Progressive Enhancement). */
.lehramt-roadmap-wrap { position: relative; }
.lehramt-roadmap.is-collapsed {
max-height: 180px;
overflow: hidden;
position: relative;
}
.lehramt-roadmap.is-collapsed::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 130px;
/* z-index muss ueber den .lehramt-roadmap-items (z-index:1) liegen, sonst
rendert der Fade-Overlay unter den Karten und ist unsichtbar. */
z-index: 2;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 92%);
pointer-events: none;
}
/* Wenn der Wrap in einer is-tinted-Section steht, soll der Fade in den
Tint-Hintergrund laufen statt nach Weiss. */
.is-tinted .lehramt-roadmap.is-collapsed::after {
background: linear-gradient(to bottom,
rgba(238, 245, 251, 0) 0%,
var(--surface-tint) 90%);
}
.lehramt-roadmap-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.8rem;
padding: 0.55rem 1.1rem;
border: 1px solid var(--uni-blau);
background: white;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 600;
color: var(--uni-blau);
cursor: pointer;
}
.lehramt-roadmap-toggle:hover { background: var(--uni-blau-20); }
.lehramt-roadmap-toggle-icon { font-size: 0.95rem; line-height: 1; }
/* === Lehramt-Stimmen: ruhige Card-Grid ohne Slider-Background ==========
Ersetzt den story_slider auf Lehramt-Fach-Seiten — der hatte einen
grauen Container-Hintergrund und zentrierten Text, was inkonsistent zur
linksbuendigen Hochglanz-Section-Optik wirkte. */
.lehramt-stimmen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1rem;
margin-top: 1.4rem;
}
.lehramt-stimme {
background: #ffffff;
border: 1px solid var(--border);
padding: 1.3rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.lehramt-stimme-kicker {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--uni-blau);
font-weight: 700;
}
.lehramt-stimme-headline {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.35;
color: var(--text);
margin: 0;
}
.lehramt-stimme-quote {
margin: 0;
font-family: var(--font-serif);
font-size: 0.97rem;
line-height: 1.55;
color: var(--text);
border-left: 3px solid var(--uni-blau-20);
padding-left: 0.8rem;
font-style: normal;
}
.lehramt-stimme-source {
font-family: var(--font-sans);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--uni-blau);
margin-top: auto;
align-self: flex-start;
}
/* CTA-Karten am Seitenende */
.cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
margin-top: 1rem;
}
.cta-card {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.1rem 1.2rem;
background: white;
border: 1px solid var(--border);
text-decoration: none;
color: var(--text);
transition: var(--transition);
}
.cta-card:hover {
border-color: var(--uni-blau);
background: var(--surface-tint);
text-decoration: none;
}
.cta-card strong {
color: var(--uni-blau);
font-family: var(--font-sans);
font-size: 1rem;
}
.cta-card span {
font-size: 0.88rem;
color: var(--muted);
font-family: var(--font-sans);
}
/* Konfigurator-Erweiterung: Fach-Buttons können auch Detail-Link sein */
.fach-detail-link {
display: inline-block;
margin-left: 0.3rem;
padding: 0.1rem 0.4rem;
font-size: 0.72rem;
color: var(--uni-blau);
border: 1px solid var(--uni-blau);
text-decoration: none;
flex-shrink: 0;
border-radius: 2px;
}
.fach-detail-link:hover { background: var(--uni-blau); color: white; }
/* ---------- Lehramt-Kombi-Seite ---------- */
.kombi-plus {
display: inline-block;
color: rgba(255, 255, 255, 0.55);
font-weight: 400;
margin: 0 0.4rem;
font-family: var(--font-sans);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.kombi-origin-key {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78rem;
color: var(--muted);
font-family: var(--font-sans);
margin-left: 0.6rem;
}
.kombi-origin-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
vertical-align: middle;
margin-right: 0.2rem;
}
.kombi-origin-dot.kombi-origin-a { background: var(--uni-blau); }
.kombi-origin-dot.kombi-origin-b { background: var(--uni-rot); }
.kombi-origin-dot.kombi-origin-both { background: var(--uni-gruen); }
/* Origin-Markierung im Stundenplan: kleiner farbiger Punkt links unten */
.ltt-session.kombi-origin-a { box-shadow: inset 0 -3px 0 0 var(--uni-blau); }
.ltt-session.kombi-origin-b { box-shadow: inset 0 -3px 0 0 var(--uni-rot); }
.ltt-session.kombi-origin-both { box-shadow: inset 0 -3px 0 0 var(--uni-gruen); }
/* Konflikt-Markierung */
.ltt-session.ltt-conflict {
outline: 2px solid var(--uni-rot);
outline-offset: -2px;
background: repeating-linear-gradient(
45deg,
var(--cat-bg) 0,
var(--cat-bg) 6px,
rgba(230, 68, 79, 0.18) 6px,
rgba(230, 68, 79, 0.18) 10px
);
z-index: 2;
}
/* Konflikte markieren wir nur durch das diagonal-rote Streifenmuster
im Hintergrund — kein Glyph-Indikator nötig. */
/* Konflikt-Hinweisbox */
.kombi-conflict-box {
border: 1px solid var(--uni-rot);
border-left-width: 4px;
background: var(--uni-gelb-20);
padding: 1rem 1.2rem;
font-family: var(--font-sans);
color: var(--text);
}
.kombi-conflict-headline { color: #000000; font-size: 1rem; }
.kombi-conflict-list {
margin: 0;
padding-left: 1.2rem;
font-size: 0.9rem;
line-height: 1.6;
}
.kombi-conflict-list li + li { margin-top: 0.3rem; }
.kombi-conflict-list em {
font-style: normal;
color: var(--muted);
font-size: 0.82rem;
padding: 0 0.25rem;
}
/* Rückwärts-Callout auf Bachelor-Seiten ("Auch auf Lehramt studierbar") */
.nextsteps.lehramt-callout {
border-left: 3px solid var(--accent);
background: var(--uni-gelb-20);
}
.nextsteps.lehramt-callout h4 { color: #000000; }
.lehramt-callout-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.95rem;
line-height: 1.7;
}
.lehramt-callout-list a {
color: var(--uni-blau);
font-weight: 600;
}
.lehramt-callout-list .muted {
font-weight: 400;
font-size: 0.85rem;
}
/* Cluster-Seite: Lehramt-Querverweis-Grid */
.cluster-lehramt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.7rem;
margin-top: 1.2rem;
}
.cluster-lehramt-card {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 1.1rem;
background: white;
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
text-decoration: none;
color: var(--text);
transition: var(--transition);
}
.cluster-lehramt-card:hover {
border-color: var(--uni-blau);
border-left-color: var(--uni-blau);
background: var(--surface-tint);
text-decoration: none;
}
.cluster-lehramt-kicker {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}
.cluster-lehramt-card strong {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--uni-blau);
font-weight: 700;
line-height: 1.25;
}
.cluster-lehramt-via {
font-size: 0.82rem;
color: var(--muted);
font-family: var(--font-sans);
}
.cluster-lehramt-arrow {
margin-top: 0.4rem;
font-size: 0.82rem;
color: var(--uni-blau);
font-family: var(--font-sans);
font-weight: 600;
}
/* ============================================================
Hochglanz-Polish – Mockup-Bausteine für program_hochglanz.html
Quelle: build_mockups/{1,2}/page.css + ProgramRemix.jsx
============================================================ */
/* --- Hero-Pills (über existierendem .hero--photo) --- */
/* Hero-Eyebrow: bewusst groessere Hero-Variante (14.08px/700, gefuellte Pill),
NICHT auf das Eyebrow-Token (12.8px) gezogen – der Hero traegt eigenes Gewicht. */
.hero-eyebrow {
display: inline-block;
padding: 0.35rem 0.85rem;
background: var(--uni-blau);
border-radius: 4px;
font-size: 0.88rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1.2rem;
color: #ffffff;
}
/* --- Eyebrow-Row: kombiniert hero-eyebrow + Profilfach-Pill nebeneinander.
Profilfach kommt aus data/programs_usp.json (PuK-Bericht 2026).
Pill ist neutral weiß-auf-blau, damit Palette eingehalten wird und der
Pill auf jedem Hero-Foto lesbar bleibt. --- */
.hero-eyebrow-row {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.2rem;
}
.hero-eyebrow-row .hero-eyebrow,
.hero-eyebrow-row .section-kicker {
margin-bottom: 0;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.7rem;
border-radius: 4px;
font-size: 0.74rem;
letter-spacing: 0.04em;
font-weight: 600;
cursor: help;
text-decoration: none;
white-space: nowrap;
}
.hero-pill--usp {
background: #ffffff;
color: var(--uni-blau);
border: 1px solid var(--uni-blau);
}
.hero-pill--usp::before {
content: "";
display: inline-block;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--uni-blau);
}
/* Pill als /-Wrapper: tap-faehig, oeffnet ein Popover mit
Hintergrund-Info zur Bamberger Besonderheit. Kein JS, native HTML. */
.hero-pill-wrap {
position: relative;
display: inline-block;
}
.hero-pill-wrap > summary {
list-style: none;
cursor: pointer;
}
.hero-pill-wrap > summary::-webkit-details-marker { display: none; }
.hero-pill-wrap > summary::marker { content: ''; }
.hero-pill-wrap[open] > summary {
background: var(--uni-blau);
color: #ffffff;
}
.hero-pill-wrap[open] > summary::before {
background: #ffffff;
}
/* .hero hat overflow:hidden fuers Background-Clipping. Wenn der Popover
offen ist, brauchen wir overflow:visible, sonst wird er beschnitten.
Im Edit-Mode gleicher Workaround, weil EDIT-Button + Provenance-Pill
mit top:-10px ueber den Hero-Rand ragen wuerden.
:has() greift in allen aktuellen Browsern. */
.hero:has(.hero-pill-wrap[open]) {
overflow: visible;
}
body.edit-mode-on .hero:has(.hero-pill-wrap--usp) {
overflow: visible;
}
/* Edit-Mode-Decoration auf die kleine Pill anpassen: kompakterer
outline-offset, damit der dashed Rahmen nicht weit ueber den Pill
hinausragt. */
body.edit-mode-on .hero-pill-wrap--usp.edit-mode-block {
outline-offset: 2px;
border-radius: 4px;
}
.hero-pill-popover {
position: absolute;
top: calc(100% + 0.6rem);
left: 0;
z-index: 25;
width: min(28rem, calc(100vw - 3rem));
background: #ffffff;
color: #1a1a1a;
border: 1px solid var(--uni-blau);
border-radius: 6px;
padding: 0.85rem 1rem;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
font-size: 0.88rem;
line-height: 1.5;
}
.hero-pill-popover::before {
content: "";
position: absolute;
top: -7px;
left: 1.2rem;
width: 12px;
height: 12px;
background: #ffffff;
border-top: 1px solid var(--uni-blau);
border-left: 1px solid var(--uni-blau);
transform: rotate(45deg);
}
.hero-pill-popover-lead {
margin: 0 0 0.4rem;
font-weight: 600;
color: var(--uni-blau);
}
.hero-pill-popover-body {
margin: 0;
color: #333;
}
/* Mobile: Popover laeuft sonst rechts ueber den Viewport hinaus, weil der
Pill-Wrapper schon ein Stueck vom linken Rand entfernt sitzt (hero-inner
hat 1.5rem padding-left). 4rem Reserve = 1.5rem Wrapper-Inset + 1.5rem
rechter Sicherheitsabstand + 1rem fuer Schatten/Border. */
@media (max-width: 640px) {
.hero-pill-popover {
width: calc(100vw - 4rem);
font-size: 0.85rem;
}
}
.hero-lead {
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.55;
max-width: 56ch;
opacity: 0.95;
margin: 0 0 2rem;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hero-fact-row {
display: flex;
gap: 2.5rem;
flex-wrap: wrap;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-fact {
display: flex;
flex-direction: column;
}
.hero-fact-val {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.8rem;
line-height: 1;
color: #ffffff;
}
.hero-fact-lab {
font-size: 0.78rem;
opacity: 0.78;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 0.25rem;
color: #ffffff;
}
/* --- Hero-Split-Layout (program_hochglanz): Eyebrow+Titel+Tagline links,
Steckbrief-Facts rechts vertikal. Aktiv ab >=768px; darunter stacked
normal (Facts unter Tagline). padding-bottom traegt die Reserve fuer
den USP-Karten-Overlap. */
.hero--split { padding-bottom: 4.5rem; }
.hero-inner--split { display: block; }
.hero-fact-stack {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2rem;
padding-top: 1.5rem;
margin-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-inner--split .hero-text-col { min-width: 0; }
/* margin-bottom: 0 hier bewusst – Abstand zur naechsten Sektion traegt
.hero--split padding-bottom (4.5rem) plus der negative margin-top des
USP-Card-Strips. Mit margin-bottom > 0 schiebt die Tagline das
Grid-Row-Ende nach unten und der bottom-aligned Fact-Stack rutscht
unter die Tagline-Baseline. */
.hero-inner--split .hero-lead { margin-bottom: 0; }
/* Fact-Items inline (Wert links, Label rechts auf einer Zeile statt
gestapelt), damit der vertikale Stack nicht den ganzen Hero in die
Hoehe zieht. Wert ist groesser und fett, Label klein in Caps. */
.hero-inner--split .hero-fact {
flex-direction: row;
align-items: baseline;
gap: 0.55rem;
}
.hero-inner--split .hero-fact-val {
font-size: 1.05rem;
line-height: 1.2;
font-weight: 700;
}
.hero-inner--split .hero-fact-lab {
margin-top: 0;
font-size: 0.7rem;
}
@media (min-width: 768px) {
.hero-inner--split {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2.5rem;
align-items: start;
}
.hero-fact-stack {
flex-direction: column;
gap: 0.55rem;
padding-top: 0;
margin-top: 0;
border-top: none;
/* Keine vertikale Trennlinie — Spaltenabstand traegt visuell genug
Abgrenzung; abrupt endende Linie wirkt unfertig. */
border-left: none;
padding-left: 0;
min-width: 11rem;
/* Fact-Stack auf Hoehe der Tagline-Baseline absetzen, statt oben
neben Eyebrow/Titel zu schweben. padding-bottom bewusst 0,
sonst rutscht das letzte Fact-Item unter die Tagline. */
align-self: end;
padding-bottom: 0;
}
}
@media (max-width: 767px) {
.hero--split { padding-bottom: 2.5rem; }
}
/* --- Anchor-Nav (In-Page-Sprungleiste) ---
Eine einheitliche Variante für alle Seitentypen (Studiengang, Lehramt-
Fach, Master-/EN-Landing): Label + Pills mit Border und weißem BG.
Einzeilig mit horizontalem Scroll auf schmalen Screens – mehrzeiliges
Wrap würde als klebende Leiste zu viel Viewport-Höhe belegen.
Smart-Sticky im Verbund mit der Top-Nav: klebt unterhalb der Nav
(top: var(--nav-height)) und wird zusammen mit ihr beim Runterscrollen
weggeschoben, beim Zurückscrollen wieder eingeblendet (nav.js setzt
`nav-hidden` auf ). Voraussetzung war der Wechsel auf
`overflow-x: clip` in base.css – `hidden` hatte Sticky bei allen
Body-Nachfahren neutralisiert. */
.anchor-nav {
position: sticky;
top: var(--nav-height);
z-index: 40;
transition: transform 0.22s ease;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
padding: 0.5rem 1.5rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
/* Beim Ausblenden muss die Anchor-Nav ihre eigene Höhe PLUS die
darüberliegende Nav-Höhe nach oben wandern, sonst bleibt eine
Restkante am Viewport-Rand sichtbar. */
/* Nur im gepinnten Zustand ausblenden (`is-stuck` setzt nav.js über ein
Sentinel): In der Flussposition unter dem Hero würde die Transform die
Leiste über den Hero schieben statt sie zu verstecken. */
html.nav-hidden .anchor-nav.is-stuck { transform: translateY(calc(-100% - var(--nav-height))); }
.anchor-nav-label {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
margin-right: 0.4rem;
}
.anchor-nav-inner {
max-width: var(--container-wide);
margin: 0 auto;
display: flex;
align-items: center; /* sonst sitzt das kleinere "Sprungziel"-Label hoeher als die Links */
gap: 0.5rem;
/* zentriert, wenn alles reinpasst; `safe` fällt bei Überlauf auf
flex-start zurück, damit der Zeilenanfang scrollbar erreichbar
bleibt (plain `center` würde ihn abschneiden). Browser ohne
safe-Support behalten das vorangestellte flex-start. */
justify-content: flex-start;
justify-content: safe center;
}
.anchor-pill {
padding: 0.4rem 0.85rem;
border-radius: 20px;
font-size: 0.82rem;
color: var(--text-light);
text-decoration: none;
font-weight: 500;
border: 1px solid var(--border);
background: #ffffff;
flex-shrink: 0;
transition: var(--transition);
}
.anchor-pill:hover {
background: var(--surface-tint);
color: var(--uni-blau);
border-color: var(--uni-blau);
text-decoration: none;
}
.anchor-pill.is-active {
background: var(--surface-tint);
color: var(--uni-blau);
border-color: var(--uni-blau);
}
section[id] { scroll-margin-top: 80px; }
/* --- Stundenplan-Grid --- */
/* Horizontaler Scroll-Wrapper fuer den Wochen-Stundenplan (#2813,
Rosenbaum-Prio 2026-06-29). Ein 6-Spalten-Raster passt auf schmalen
Phones nicht ohne Text-Clipping ("Seminar/Übung", "Raum", Uhrzeit) –
statt zu quetschen geben wir der Tabelle eine lesbare Mindestbreite und
lassen sie horizontal scrollen (Standard-Responsive-Table-Pattern). */
.stundenplan-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1rem 0;
}
.stundenplan-scroll:focus-visible {
outline: 2px solid var(--uni-blau);
outline-offset: 2px;
}
.stundenplan {
background: #ffffff;
border: 1px solid var(--uni-blau-40);
border-radius: var(--radius);
overflow: hidden;
margin: 1rem 0;
}
.stundenplan-scroll .stundenplan { margin: 0; }
@media (max-width: 720px) {
/* Mindestbreite, damit Tag-Spalten + Block-Texte Platz behalten;
der Wrapper scrollt dann horizontal statt zu clippen. */
.stundenplan-scroll .stundenplan { min-width: 600px; }
}
.stundenplan-head {
display: grid;
grid-template-columns: 60px repeat(5, 1fr);
background: var(--uni-blau-20);
border-bottom: 1px solid var(--uni-blau-40);
}
.stundenplan-head > div {
padding: 0.7rem 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--uni-blau);
text-align: center;
letter-spacing: 0.05em;
}
.stundenplan-grid {
display: grid;
grid-template-columns: 60px repeat(5, 1fr);
position: relative;
}
.stundenplan-hour {
font-size: 0.72rem;
color: var(--muted);
padding: 0.3rem 0.5rem;
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
height: 64px;
}
.stundenplan-cell {
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
height: 64px;
position: relative;
}
.stundenplan-cell:last-child { border-right: none; }
.stundenplan-block {
position: absolute;
inset: 3px;
border-radius: 6px;
padding: 0.45rem 0.55rem;
/* Schwarz auf Uni-Palette-20%-Tints (Kategoriefarben in den Daten) –
WCAG 1.4.3 (>=13:1) und palette-konform. Frueher #ffffff auf
off-palette-Volltoenen (2.5-4.3:1). */
color: var(--text);
font-size: 0.78rem;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.stundenplan-block-title { font-weight: 600; line-height: 1.2; }
.stundenplan-block-meta {
font-size: 0.68rem;
opacity: 0.85;
display: flex;
justify-content: space-between;
gap: 0.35rem;
flex-wrap: wrap;
}
.stundenplan-block-meta span { min-width: 0; }
.stundenplan-legend {
display: flex;
gap: 1rem;
margin-top: 1rem;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--text-light);
}
.stundenplan-legend span {
display: flex;
align-items: center;
gap: 0.4rem;
}
.stundenplan-legend i {
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
/* Neutraler Rand, damit die hellen 20%-Tint-Swatches auf Weiss
als Flaeche erkennbar bleiben. */
border: 1px solid var(--border);
}
/* --- ECTS-Bars (V2-kompakt; existierendes .ects-waterfall mit Segments
bleibt unangetastet) --- */
.ects-bars {
display: grid;
gap: 8px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
margin: 1rem 0;
}
.ects-bar {
display: grid;
grid-template-columns: 200px 1fr 70px;
gap: 12px;
align-items: center;
}
.ects-bar-label {
font-size: 0.88rem;
color: var(--text);
font-weight: 500;
}
.ects-bar-track {
height: 22px;
background: var(--bg);
border-radius: 3px;
}
.ects-bar-fill {
height: 100%;
background: var(--uni-blau-light);
border-radius: 3px;
}
.ects-bar-val {
font-family: var(--font-serif);
font-weight: 700;
color: var(--uni-blau);
font-size: 0.95rem;
}
.ects-bar-val small {
font-size: 0.7rem;
color: var(--muted);
font-weight: 400;
}
@media (max-width: 600px) {
.ects-bar { grid-template-columns: 110px 1fr 60px; gap: 8px; }
.ects-bar-label { font-size: 0.8rem; }
}
/* --- Profil-Achsen (kompakt, ohne Uni-Vergleich) --- */
.profil-achsen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0;
}
.profil-achse {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
box-shadow: var(--shadow);
}
.profil-achse-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--uni-blau);
color: #ffffff;
font-family: var(--font-serif);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.profil-achse h3 {
font-size: 1.1rem;
margin: 0;
line-height: 1.3;
}
.profil-achse p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text);
}
.profil-achsen-foot {
font-size: 0.9rem;
color: var(--text-light);
margin-top: 0.8rem;
font-style: italic;
max-width: 60ch;
}
/* --- Gute Lehre – Belege-Karten --- */
.lehre-belege {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0;
}
.lehre-beleg {
background: #ffffff;
border-radius: var(--radius);
padding: 1.4rem 1.5rem;
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.lehre-beleg-kicker {
font-family: var(--font-sans);
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
}
.lehre-beleg h3 {
font-size: 1.08rem;
margin: 0;
line-height: 1.3;
}
.lehre-beleg p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
}
.lehre-beleg-meta {
margin-top: auto;
padding-top: 0.5rem;
font-size: 0.82rem;
color: var(--text-light);
font-family: var(--font-mono);
}
/* --- Bildergalerie (Mosaik) --- */
.gallery-mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 200px;
gap: 0.75rem;
margin: 1.5rem 0;
}
.gallery-tile {
margin: 0;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
border-radius: 4px;
background-color: var(--surface-tint);
}
.gallery-tile--big { grid-column: span 4; grid-row: span 2; }
.gallery-tile--med { grid-column: span 3; grid-row: span 1; }
.gallery-tile--sm { grid-column: span 2; grid-row: span 1; }
.gallery-tile figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 0.85rem 1rem;
background: linear-gradient(180deg, transparent 0%, rgba(0, 69, 125, 0.78) 85%);
color: #ffffff;
}
.gallery-tile-loc {
font-family: var(--font-serif);
font-weight: 600;
font-size: 0.98rem;
line-height: 1.2;
}
.gallery-tile--big .gallery-tile-loc { font-size: 1.25rem; }
.gallery-tile-cap {
font-size: 0.78rem;
opacity: 0.88;
margin-top: 0.25rem;
line-height: 1.4;
}
.gallery-tile--big .gallery-tile-cap { font-size: 0.92rem; }
@media (max-width: 760px) {
.gallery-mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
.gallery-tile--big, .gallery-tile--med, .gallery-tile--sm {
grid-column: span 1;
grid-row: span 1;
}
}
/* --- Selbsttest --- */
.selbsttest {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
margin: 1rem 0;
}
.selbsttest-q {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--uni-blau);
margin: 0.6rem 0 1.5rem;
line-height: 1.3;
}
.selbsttest-q-num {
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
}
.selbsttest-opt {
display: block;
width: 100%;
text-align: left;
padding: 0.9rem 1.2rem;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 8px;
margin-bottom: 0.6rem;
font-family: var(--font-sans);
font-size: 0.98rem;
color: var(--text);
cursor: pointer;
transition: var(--transition);
}
.selbsttest-opt:hover {
border-color: var(--uni-blau-light);
background: var(--surface-tint);
}
/* --- Bewerbung-Timeline --- */
.timeline {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 18px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border);
}
.timeline-item {
position: relative;
padding: 0 0 1.6rem 3rem;
min-height: 3rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
position: absolute;
left: 0;
top: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--uni-blau);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 0 0 4px #ffffff;
}
.timeline-time {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.timeline-title {
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--uni-blau);
margin: 0.2rem 0 0.4rem;
}
.timeline-text {
color: var(--text);
font-size: 0.98rem;
line-height: 1.55;
margin: 0;
}
.timeline-hint {
margin-top: 0.4rem;
font-size: 0.88rem;
color: var(--muted);
font-style: italic;
}
/* --- Dokumente --- */
.docs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.doc-card {
display: block;
padding: 1.4rem 1.4rem 1.2rem;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text);
transition: var(--transition);
}
.doc-card:hover {
border-color: var(--uni-blau);
text-decoration: none;
}
.doc-card-name {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.05rem;
color: var(--uni-blau);
margin-bottom: 0.4rem;
}
.doc-card-desc {
color: var(--text-light);
font-size: 0.92rem;
line-height: 1.5;
margin-bottom: 0.8rem;
}
.doc-card-meta {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 500;
}
/* Redaktioneller Hinweis: PDF-Stand laeuft mehr als 2 Jahre zurueck.
Gelb-20-Tint als BG (Uni-Palette: Akzent-20 fuer subtile Hinweise),
schwarz fuer Text – siehe TODO_farbpalette.md. Erscheint inline neben
".section-meta" und ".doc-card-meta" auf Programmseiten. */
.stand-todo {
display: inline-block;
margin-left: 0.5em;
padding: 0.1em 0.55em;
background: var(--uni-gelb-20);
color: var(--text);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: none;
vertical-align: baseline;
white-space: nowrap;
}
/* Positives Gegenstueck zu .stand-todo: Aktualitaet eines Dokuments wurde
durch Studiengangsverantwortliche bestaetigt (data/dokumente_verified.json).
Gruen-20-Tint statt Gelb — palette-konform, semantisch "alles ok". */
.stand-verified {
display: inline-block;
margin-left: 0.5em;
padding: 0.1em 0.55em;
background: var(--uni-gruen-20);
color: var(--text);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: none;
vertical-align: baseline;
white-space: nowrap;
}
/* --- FAQ-Volltextsuche (/faq/) ---
Suchfeld + Live-Filter ueber alle Eintraege. Steht als Listen-Toolbar direkt
ueber den Kategorien (gleicher container), nicht als eigene Section.
Optik lehnt an program-search an: weisses Inputfeld mit Blau-Border bei
Focus, Lupensymbol via ::before. */
.faq-search {
margin: 0 0 1.5rem;
}
.faq-search-row {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.faq-search-field {
position: relative;
flex: 1 1 22rem;
max-width: 32rem;
}
.faq-search-field input[type="search"] {
width: 100%;
font: inherit;
font-size: 1rem;
padding: 0.7rem 1rem 0.7rem 2.5rem;
border: 1.5px solid var(--border);
border-radius: var(--radius);
background: var(--card-bg);
color: var(--text);
transition: border-color var(--transition), box-shadow var(--transition);
/* Langer Placeholder auf schmalen Viewports sauber mit … kappen. */
text-overflow: ellipsis;
}
.faq-search-field input[type="search"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0, 69, 125, 0.18);
}
.faq-search-field::before {
content: "";
position: absolute;
left: 0.9rem;
top: 50%;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.faq-search-status {
margin: 0;
font-size: var(--fs-xs);
color: var(--muted);
white-space: nowrap;
}
.faq-search-clear {
margin-top: 0.5rem;
padding: 0;
background: none;
border: none;
color: var(--accent);
font: inherit;
font-size: var(--fs-xs);
cursor: pointer;
text-decoration: underline;
}
.faq-search-clear:hover { text-decoration: none; }
.faq-search-empty {
margin: 1rem 0 0;
color: var(--muted);
font-size: 0.95rem;
}
.faq-category-block[hidden] { display: none; }
/* Erste Kategorie direkt nach der Such-Toolbar braucht weniger top-margin,
damit Suchfeld + Liste als ein Block wirken. */
.faq-page-section .faq-category-block:first-of-type .faq-category {
margin-top: 0.25rem;
}
/* --- FAQ-Details (Hochglanz, mit /) --- */
.faq-details {
margin: 1.5rem 0;
}
.faq-details details {
border-bottom: 1px solid var(--border);
padding: 1rem 0;
}
.faq-details details:first-of-type {
border-top: 1px solid var(--border);
}
.faq-details summary {
cursor: pointer;
list-style: none;
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--uni-blau);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary::after {
content: '+';
font-size: 1.4rem;
color: var(--uni-blau-light);
transition: transform 0.2s;
margin-left: auto;
}
.faq-details details[open] summary::after { content: '−'; }
.faq-details-a {
padding: 0.8rem 0 0.2rem;
color: var(--text);
line-height: 1.6;
font-size: 0.98rem;
max-width: 65ch;
}
/* --- Placeholder-Hinweis pro Mock-Sektion ---
Bewusst AUCH auf den Hochglanz-Programmseiten sichtbar (dh-Entscheidung
2026-06-11, TODO_prod_mock_handling.md): in der aktuellen Phase brauchen
wir absolute Klarheit, welcher Content echt/redaktionell ueberarbeitet ist
und welcher noch unmarkierter Mock waere. Marker allein ausblenden, ohne
den Mock-Content zu ersetzen, verstoesst gegen die Placeholder-Ehrlichkeit
(CLAUDE.md). Frueher hier: display:none auf .hochglanz-page /
body[data-template="hochglanz"] (Demo-Modus) — entfernt.
Provenance bleibt im JSON-Layer (placeholder: true). */
.placeholder-section-note {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--uni-gelb-20);
border: 1px solid var(--uni-gelb-20);
color: #000000;
padding: 0.3rem 0.7rem;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.03em;
margin-bottom: 1rem;
}
/* Dezentes Quelle/Stand-Label unter Section-Headings (z.B. "Auswahl aus
dem Modulhandbuch · Stand WS 2025/26") */
.section-meta {
font-size: 0.85rem;
color: var(--uni-grau-80);
margin: -0.5rem 0 1rem 0;
}
.section-meta a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.section-meta a:hover {
color: var(--uni-blau-100);
}
/* Platzhalter-Markierung trägt sich durch ihren gelben Hintergrund + den
"Beispiel"-Text selbst — kein Warnglyph davor. */
/* --- Full-Bleed-Band-Ausbruch aus .detail-wrap --- */
.detail-band {
margin-left: calc(-1 * (50vw - 50%));
margin-right: calc(-1 * (50vw - 50%));
padding: 3rem 1.5rem;
margin-top: 2rem;
}
.detail-band--alt { background: var(--surface-tint); }
.detail-band-inner {
max-width: var(--container-wide);
margin: 0 auto;
}
/* ============================================================
Hochglanz-Page – Single-Column-Layout, voll 1200px breit
============================================================ */
.hero--compact { min-height: 420px; }
.hero--compact .hero-inner { padding: 3.5rem 1.5rem 2.5rem; }
/* Split-Variante: Hero darf so kurz werden wie sein Inhalt + Overlap-
Reserve; das urspruengliche min-height: 420px erzeugte tote Flaeche
oben rechts, wenn der Steckbrief schlanker ist als der Tagline-Block. */
.hero--split.hero--compact { min-height: 0; }
.hero--split.hero--compact .hero-inner { padding: 2.25rem 1.5rem 0; }
/* Studiengang-Titel im Programm-Hero (#3950, Rosenbaum-Prio 2026-06-29).
Vorher kollidierten `.hero h1` (font --fs-display bis 3.4rem, max-width
14ch) und `.hero--compact h1` (28ch) bei gleicher Spezifitaet; die
generische 14ch-Regel gewann und schnuerte lange Titel
("Anglistik/Amerikanistik", "Steuerberatung (Weiterbildungsmaster)")
in eine zu enge, zu grosse Box -> Umbruch/Abschnitt mobil UND desktop.
Diese Regel (Spezifitaet 0,2,1) gewinnt eindeutig: moderatere Schrift,
breitere Box, sauberer Bruch langer Komposita statt Clipping. */
.hero--split.hero--compact h1 {
font-size: clamp(1.55rem, 3.4vw, 2.4rem);
max-width: 24ch;
line-height: 1.12;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
@media (max-width: 640px) {
.hero--split.hero--compact h1 {
font-size: clamp(1.4rem, 6.2vw, 1.95rem);
max-width: 100%;
}
}
.hochglanz-page {
max-width: var(--container-wide);
margin: 0 auto;
padding: 1.5rem 1.5rem 1rem;
}
/* Section-Rhythmus auf 8px-Raster normiert (A7): kompakte Innenabstaende
1.5rem/1.5rem (24/24) statt der em-abgeleiteten Off-Grid-Werte 1.6rem/1.2rem
(25.6/19.2). Der Sektionswechsel traegt den 48px-Grundrhythmus (padding-top). */
.hochglanz-page > section {
padding: 1.5rem 0 1.5rem;
margin-bottom: 0;
}
.hochglanz-page > section + section { padding-top: 3rem; }
.hochglanz-page--continue { padding-top: 0; }
/* Section-level striping: full-bleed Tint hinter der constrained-Sektion via
Pseudo-Element. So bekommt jede markierte Sektion einen alternierenden
Hintergrund, ohne aus dem Main ausbrechen zu müssen. */
.hochglanz-page > section.is-tinted,
.hochglanz-page--continue > section.is-tinted {
position: relative;
isolation: isolate;
/* Getoente Sektionen auf symmetrischen 48px-Rhythmus (A7), vorher 64/48. */
padding-top: 3rem;
padding-bottom: 3rem;
}
.hochglanz-page > section.is-tinted::before,
.hochglanz-page--continue > section.is-tinted::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: calc((100vw - 100%) / -2);
right: calc((100vw - 100%) / -2);
background: var(--surface-tint);
}
/* Wenn zwei is-tinted-Sektionen direkt aneinandergrenzen, laeuft die Tint-Bg
optisch durch — kein voller 4rem-Top noetig, sonst riesiger Leerraum
innerhalb einer einzigen Farbflaeche. */
.hochglanz-page > section.is-tinted + section.is-tinted,
.hochglanz-page--continue > section.is-tinted + section.is-tinted {
padding-top: 2rem;
}
.hochglanz-page h2 {
/* Section-Typo-Skala (A1): Top-Level-Sektionen der Programmseiten teilen
jetzt die globale H2-Stufe (30.4px/400) statt der frueheren 24.8px. */
font-size: var(--fs-h2);
margin: 0 0 0.9rem;
max-width: 36ch;
}
.hochglanz-prose { max-width: 70ch; }
.hochglanz-page .prose { max-width: 70ch; }
.hochglanz-page .prose p { margin: 0 0 0.7em; }
/* Universitäts-Note: schmaler Inline-Block, hebt FH/HAW-Abgrenzung hervor */
.uni-note {
margin: 1.2rem 0 0.4rem;
padding: 1rem 1.2rem;
border-left: 3px solid var(--accent);
background: var(--surface-tint);
max-width: 70ch;
}
.uni-note-kicker {
display: block;
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 0.35rem;
}
.uni-note p { margin: 0; font-size: 0.96rem; line-height: 1.55; }
/* Überblick: 2-Spalten-Grid – Prose links, uni-note als Marginalspalte rechts.
Nutzt den Whitespace neben der schmalen Textspalte (max-width: 70ch). */
.ueberblick-grid {
display: grid;
grid-template-columns: minmax(0, 70ch) minmax(260px, 1fr);
gap: 1.6rem 2.5rem;
align-items: start;
}
.ueberblick-grid--single { display: block; }
@media (max-width: 900px) {
.ueberblick-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
/* Marginal-Variante: typografisch statt boxiger Inline-Block. */
.uni-note--margin {
margin: 0.3rem 0 0;
padding: 0.9rem 0 0;
border-left: none;
border-top: 1px solid var(--border);
background: transparent;
max-width: 36ch;
}
.uni-note--margin p { font-size: 0.92rem; color: var(--text-light); }
/* ---------- Feature-Cards ----------
2-spaltig Text + Bild, alternierend (gerade Items: Bild links; ungerade:
Bild rechts). Bild und Text füllen je 50% bei breiter Viewport, fallen auf
1fr ab schmalem Viewport. Keine accent-borders. */
.feature-cards {
display: flex;
flex-direction: column;
gap: 2.5rem;
margin: 4rem 0;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.feature-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: white;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 69, 125, 0.06);
}
.feature-card--reverse .feature-card-text { order: 2; }
.feature-card--reverse .feature-card-media { order: 1; }
@media (max-width: 800px) {
.feature-card { grid-template-columns: 1fr; }
.feature-card--reverse .feature-card-text { order: unset; }
.feature-card--reverse .feature-card-media { order: unset; }
}
.feature-card-text {
padding: 2.2rem 2.4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.feature-card-kicker {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--uni-blau-80);
margin-bottom: 0.9rem;
}
.feature-card-title {
font-family: var(--font-serif, Georgia, serif);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
line-height: 1.2;
color: var(--uni-blau);
margin: 0 0 0.9rem;
font-weight: 700;
}
.feature-card-body {
font-size: 1rem;
line-height: 1.6;
color: var(--text);
margin-bottom: 1rem;
}
.feature-card-body p { margin: 0 0 0.8rem; }
.feature-card-body p:last-child { margin-bottom: 0; }
.feature-card-body strong { color: var(--uni-blau); font-weight: 600; }
.feature-card-cta {
font-size: 1rem;
color: var(--uni-blau-80);
text-decoration: none;
font-weight: 600;
align-self: flex-start;
}
.feature-card-cta:hover { text-decoration: underline; }
.feature-card-media {
position: relative;
min-height: 280px;
background: var(--uni-blau-20);
}
.feature-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- News-Cards ----------
Drei Cards nebeneinander, schlanke weiße Boxen mit dezentem Schatten.
Datum klein und gedimmt oben, Titel als Link, Excerpt, "Mehr erfahren".
Keine accent-borders. */
/* News-Cards-Section ist visuell autark (eigene 1180px-Spalte, weisser Bg
zwischen zwei Tint-Sektionen). Eigene Margin statt geerbter Section-Padding,
keine geerbte border-top-Linie. Margin muss im spezifischeren Selektor
stehen, weil .hochglanz-page > section margin-bottom:0 erzwingt. */
.news-cards-section { padding: 0 1rem; }
.hochglanz-page > section.news-cards-section,
.hochglanz-page--continue > section.news-cards-section,
.hochglanz-page > section + section.news-cards-section,
.hochglanz-page--continue > section + section.news-cards-section {
border-top-color: transparent !important;
padding-top: 0;
padding-bottom: 0;
margin-top: 5rem;
margin-bottom: 5.5rem;
}
.news-cards-head { max-width: 1180px; margin: 0 auto 1.6rem; }
.news-cards-head h2 {
font-family: var(--font-serif, Georgia, serif);
font-size: 2rem;
margin: 0 0 0.4rem;
color: var(--uni-blau);
}
.news-cards-lead {
margin: 0;
/* --muted (5.3:1) statt --uni-grau (3.6:1) – WCAG 1.4.3 */
color: var(--muted);
font-size: 1rem;
}
.news-cards-grid {
/* auto-fill (nicht auto-fit) damit 3 Karten genauso breit sind wie
in 4er- oder 6er-Reihen — visueller Konsistenz mit .master-cards
und .career-list, die alle das gleiche minmax(280px) nutzen. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.4rem 1rem;
list-style: none;
padding: 0;
margin: 0;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.news-card {
background: white;
padding: 1.4rem 1.5rem;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 69, 125, 0.06);
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.news-card-date {
font-size: 0.78rem;
/* --muted (5.3:1) statt --uni-grau-80 (#9f9f9c, nur 2.65:1) – WCAG 1.4.3 */
color: var(--muted);
font-weight: 500;
letter-spacing: 0.02em;
}
.news-card-meta {
margin: 0;
font-size: 0.78rem;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.02em;
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.news-card-source {
color: var(--uni-blau-80);
font-weight: 600;
}
.news-card-title {
margin: 0;
font-family: var(--font-serif, Georgia, serif);
font-size: 1.15rem;
line-height: 1.3;
font-weight: 700;
}
.news-card-title a {
color: var(--uni-blau);
text-decoration: none;
}
.news-card-title a:hover { text-decoration: underline; text-decoration-color: var(--uni-blau-80); }
.news-card-excerpt {
margin: 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-cta {
margin-top: auto;
font-size: 0.92rem;
color: var(--uni-blau-80);
text-decoration: none;
font-weight: 600;
}
.news-card-cta:hover { text-decoration: underline; }
.news-cards-foot {
max-width: 1180px;
margin: 1.6rem auto 0;
}
.news-cards-foot a { color: var(--uni-blau-80); text-decoration: none; font-weight: 500; }
.news-cards-foot a:hover { text-decoration: underline; }
/* ---------- Quote-Stripe ----------
Drei Cards mit Zitat + Name/Rolle, schwebend auf Parallax-Background.
Background-Image kommt vom Template (background-image inline), wir setzen
nur Größe und attachment-fixed. Mobile fällt auf scroll für Performance. */
.quote-stripe {
position: relative;
margin: 4rem 0;
padding: 5rem 1.5rem;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.quote-stripe::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.55);
pointer-events: none;
}
@media (max-width: 900px) {
.quote-stripe { background-attachment: scroll; padding: 3rem 1rem; }
}
.quote-stripe-inner {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.4rem;
max-width: 1180px;
margin: 0 auto;
}
.quote-card {
background: white;
padding: 1.5rem 1.6rem;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 69, 125, 0.08);
}
.quote-card-text {
font-style: italic;
font-size: 1rem;
line-height: 1.55;
margin: 0 0 1rem;
color: var(--uni-blau);
}
.quote-card-meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
font-size: 0.85rem;
color: var(--uni-grau);
}
.quote-card-name { font-weight: 600; color: var(--uni-blau); }
.quote-card-role { color: var(--uni-grau); }
/* ---------- Story-Slider ----------
Eyebrow + Headline + Lead + CTA, klickbare Dots, Auto-Change.
Kompakter eingebetteter Block (kein Hero-Section-Format). */
.story-slider {
position: relative;
padding: 2rem 1.5rem;
text-align: center;
background: var(--uni-grau-20);
margin: 2.5rem 0;
}
.story-slider-track {
position: relative;
max-width: 780px;
margin: 0 auto;
min-height: 140px;
/* Kompletter Slider explizit sansserif — passt zum Block-Inset und
hebt sich vom Serif-Fluss der Hauptseite ab. */
font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.story-slide {
display: none;
animation: story-fade 500ms ease-out;
}
.story-slide.is-active { display: block; }
@keyframes story-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.story-slide-kicker {
display: inline-block;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--uni-blau-80);
margin-bottom: 0.4rem;
}
.story-slide-title {
/* sansserif — Slider-Stil. text-wrap: balance bringt ausgewogene
Zeilenumbrueche, sodass die Headline keine waisen-Worte am Zeilenende
hat. Kein Hard-Wrap noetig (Browser-Auto-Balancing). */
font-family: inherit;
font-size: clamp(1.2rem, 2vw, 1.7rem);
line-height: 1.3;
color: var(--uni-blau);
margin: 0 0 0.55rem;
font-weight: 700;
text-wrap: balance;
/* Keine Auto-Silbentrennung in der Headline (erbt sonst hyphens:auto vom
html-Default und trennt z.B. "Möglich-keiten") – #3951. Umbruch macht
text-wrap: balance. */
-webkit-hyphens: manual;
hyphens: manual;
max-width: 28ch;
margin-left: auto;
margin-right: auto;
}
.story-slide-lead {
font-size: 0.98rem;
line-height: 1.55;
color: var(--text);
max-width: 56ch;
margin: 0 auto 0.8rem;
/* pretty: Browser balanciert nur die letzten paar Zeilen, kein Waise. */
text-wrap: pretty;
}
.story-slide-cta {
display: inline-block;
font-size: 0.92rem;
color: var(--uni-blau-80);
text-decoration: none;
font-weight: 600;
}
.story-slide-cta:hover { text-decoration: underline; }
.story-slider-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.9rem;
}
.story-slider-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--uni-blau-40);
border: 0;
cursor: pointer;
padding: 0;
transition: background 200ms;
}
.story-slider-dot:hover { background: var(--uni-blau-40); }
.story-slider-dot.is-active { background: var(--uni-blau); }
/* Inline-Variante: kompakte Note unter dem Hauptabsatz, full-width.
Ersetzt die rechtsstehende margin-Variante in #worum, weil dort der
Inhalt zu wichtig für die Marginalspalte ist und visuell verloren ging. */
.uni-note--inline {
margin: 1.4rem 0 0;
padding: 0.9rem 1.1rem;
border: 1px solid var(--border);
background: var(--surface-tint);
max-width: none;
}
.uni-note--inline .uni-note-kicker { color: var(--text-light); }
.uni-note--inline p { font-size: 0.92rem; color: var(--text); }
/* Reality-Definitions-Liste: kompakter als zuvor */
.reality-dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem 2rem;
margin: 0.6rem 0 0;
max-width: 1100px;
}
.reality-dl > div { padding: 0.4rem 0; }
.reality-dl dt {
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 0.2rem;
}
.reality-dl dd {
margin: 0;
font-size: 0.98rem;
line-height: 1.5;
color: var(--text);
}
/* Module: Run-in-Typografie in server-seitig aufgeteilten Spalten.
.modules ist ein Grid aus .modules-col-Containern; jede Spalte ist
ein Flex-Container und startet zwangslaeufig oben. Kein Card-Frame,
generoeser Vertikal-Abstand fuer ruhigen Lesefluss. */
.modules {
display: grid;
column-gap: 2rem;
row-gap: 1.4rem;
margin-top: 0.6rem;
align-items: start;
}
.modules--cols-1 { grid-template-columns: 1fr; }
.modules--cols-2 { grid-template-columns: repeat(2, 1fr); }
.modules--cols-3 { grid-template-columns: repeat(3, 1fr); }
.modules-col {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.module {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--text-light);
}
.module-name {
font-family: var(--font-serif);
font-weight: 700;
color: var(--uni-blau);
}
.module-what {
/* erbt Groesse/Farbe/Line-height vom .module-Paragraphen */
}
@media (max-width: 760px) {
/* Mobile: alle Spalten untereinander, weiterhin top-alignt durch Block-Flow */
.modules--cols-2,
.modules--cols-3 { grid-template-columns: 1fr; }
}
/* "Das erste Semester": kuratierte Variante (Intro + vorgestellte Module).
Die Module selbst rendern im .modules-Run-in-Stil der Beispiel-Module-
Section (einheitliche Optik); hier lebt nur noch der Intro-Absatz. */
.erstes-semester-intro {
margin: 0.6rem 0 1.7rem;
max-width: 62ch;
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-light);
}
/* Studienverlaufsplan: Semester-Karten (aus dem offiziellen Verlaufsplan-PDF
ueberfuehrt). Responsive Grid – stapelt mobil sauber, kein Tabellen-Cramming.
Blau-Tint-Kartenkopf, ECTS rechtsbuendig, palette-konform. */
.svp-sub {
margin: 0.2rem 0 1.2rem;
font-size: 0.9rem;
color: var(--uni-grau);
}
.svp-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.svp-card {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: #ffffff;
}
.svp-card-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
padding: 0.6rem 0.9rem;
background: var(--surface-tint);
border-bottom: 1px solid var(--uni-blau-40);
}
.svp-card-sem {
font-family: var(--font-serif);
font-weight: 700;
color: var(--uni-blau);
}
.svp-card-sum {
font-size: 0.8rem;
font-weight: 600;
color: var(--uni-blau);
white-space: nowrap;
}
.svp-mods { list-style: none; margin: 0; padding: 0.3rem 0.9rem; }
.svp-mod {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: baseline;
padding: 0.45rem 0;
border-bottom: 1px solid var(--uni-grau-20);
font-size: 0.9rem;
line-height: 1.4;
}
.svp-mod:last-child { border-bottom: 0; }
.svp-mod-name { color: var(--text-light); }
.svp-mod-ects {
flex: none;
min-width: 1.8rem;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--uni-blau);
}
.svp-card-note {
margin: 0;
padding: 0.5rem 0.9rem 0.7rem;
font-size: 0.82rem;
font-style: italic;
color: var(--uni-grau);
border-top: 1px solid var(--uni-grau-20);
}
.svp-fussnote {
margin-top: 1rem;
font-size: 0.85rem;
color: var(--uni-grau);
}
/* Career-Liste: Chip-Grid statt Spalten-Bullets – wirkt aufgeräumt bei
ungerader Item-Zahl (3/5/7) und passt zu Label-Charakter der Wege. */
/* („Nach dem Studium"-Chips/-Karten: siehe .danach-chips/.danach-cards weiter
unten – Variante-C-Block.) */
/* Anschluss-Wege als eigener, ruhiger Block unter den Career-Chips */
.next-steps {
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid var(--border);
display: grid;
gap: 0.7rem;
max-width: 880px;
}
.next-steps-row { margin: 0; line-height: 1.55; }
.next-steps-label {
display: inline-block;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-right: 0.5rem;
}
/* Fitfor-Grid: zwei Spalten nebeneinander, fällt auf 1fr ab schmalem Viewport. */
/* Weniger-geeignet: eigene Sektion vor "Verwandte" */
.weniger-geeignet ul {
margin: 0.5rem 0 0;
padding-left: 1.2rem;
max-width: 70ch;
}
.weniger-geeignet li {
margin-bottom: 0.5rem;
line-height: 1.55;
}
.weniger-geeignet-foot {
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px dashed var(--border);
color: var(--text-light);
font-size: 0.94rem;
max-width: 70ch;
}
/* Verwandte mit Notes: 2-spaltig statt Card-Grid */
.related-notes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem 1.5rem;
margin-top: 0.6rem;
}
.related-note {
padding: 1rem 1.2rem;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.related-note-head {
display: block;
text-decoration: none;
color: inherit;
margin-bottom: 0.4rem;
}
.related-note-head:hover h3 { text-decoration: underline; text-underline-offset: 2px; }
.related-note-kicker {
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
}
.related-note h3 {
font-size: 1.05rem;
margin: 0.15rem 0 0;
color: var(--uni-blau);
line-height: 1.25;
}
.related-note-body {
margin: 0;
font-size: 0.92rem;
color: var(--text-light);
line-height: 1.55;
}
/* Bewerbungs-Timeline ausklappbar */
.bewerbung-details {
margin-top: 1rem;
background: var(--surface-tint);
border-radius: var(--radius-sm);
padding: 0.8rem 1.2rem;
}
.bewerbung-details summary {
cursor: pointer;
list-style: none;
font-weight: 600;
color: var(--uni-blau);
display: flex;
justify-content: space-between;
align-items: center;
}
.bewerbung-details summary::-webkit-details-marker { display: none; }
.bewerbung-details summary::after { content: '+ Anzeigen'; color: var(--accent); font-size: 0.88rem; font-weight: 600; }
.bewerbung-details[open] summary::after { content: '− Ausblenden'; }
.bewerbung-details[open] { padding-bottom: 1.5rem; }
.bewerbung-details .timeline { margin-top: 1.2rem; }
/* ========= Selbsttest als progressives Quiz ========= */
.quiz {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.6rem 1.8rem;
max-width: 760px;
margin-top: 0.6rem;
}
.quiz-progress {
height: 3px;
background: var(--border);
border-radius: 3px;
margin-bottom: 1.2rem;
overflow: hidden;
}
.quiz-progress-bar {
height: 100%;
background: var(--uni-blau);
transition: width 0.4s ease;
}
.quiz-step { display: none; }
.quiz-step.is-active { display: block; }
.quiz-q-num {
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
}
.quiz-q {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--uni-blau);
margin: 0.5rem 0 1.2rem;
line-height: 1.3;
}
.quiz-options { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-opt {
display: block;
width: 100%;
text-align: left;
padding: 0.85rem 1.1rem;
background: #ffffff;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.96rem;
color: var(--text);
cursor: pointer;
transition: var(--transition);
}
.quiz-opt:hover {
border-color: var(--uni-blau-light);
background: var(--surface-tint);
}
.quiz-result h3 { margin: 0 0 1rem; font-size: 1.2rem; }
.quiz-score-bar {
position: relative;
height: 12px;
background: var(--border);
border-radius: 6px;
overflow: hidden;
margin: 0.6rem 0 1rem;
}
.quiz-score-fill {
height: 100%;
background: linear-gradient(90deg, var(--passung-fehlt-fg), var(--passung-teilweise-fg), var(--passung-sehr-gut-fg));
border-radius: 6px;
transition: width 0.6s ease;
}
.quiz-result-text { color: var(--text); line-height: 1.55; margin-bottom: 1rem; }
/* ========= CTA-Band: Form + Beratung ========= */
.cta-band {
background: linear-gradient(135deg, var(--uni-blau) 0%, var(--uni-blau) 100%);
color: #ffffff;
padding: 4rem 1.5rem;
margin-top: 2rem;
}
.cta-band-inner {
max-width: var(--container-wide);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 4rem;
align-items: start;
}
.cta-form-col h2 { color: #ffffff; font-size: 1.5rem; margin: 0.4rem 0 0.6rem; }
.cta-form-lead { color: rgba(255, 255, 255, 0.78); margin: 0 0 1.6rem; max-width: 50ch; }
.kicker--light { color: rgba(255, 255, 255, 0.85); }
.cta-form { display: flex; flex-direction: column; gap: 1rem; }
.cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .cta-form-row { grid-template-columns: 1fr; } }
.cta-form label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form textarea {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #ffffff;
font-family: var(--font-sans);
font-size: 0.98rem;
padding: 0.7rem 0.9rem;
border-radius: var(--radius-sm);
transition: border-color 0.15s, background 0.15s;
}
.cta-form input::placeholder, .cta-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.cta-form input:focus, .cta-form textarea:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.16);
}
.cta-form textarea { resize: vertical; }
.cta-form-foot {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
margin-top: 0.4rem;
}
.btn-primary-inv {
background: #ffffff;
color: var(--uni-blau);
padding: 0.7rem 1.4rem;
border: 0;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 0.96rem;
font-weight: 600;
cursor: pointer;
}
.btn-primary-inv:hover { background: rgba(255, 255, 255, 0.9); }
.cta-form-note {
margin: 0;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.65);
max-width: 32ch;
line-height: 1.4;
}
.cta-band-aside {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.cta-aside-block h3 {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1rem;
color: #ffffff;
margin: 0 0 0.4rem;
}
.cta-aside-block p {
margin: 0 0 0.6rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.92rem;
line-height: 1.5;
}
.cta-band-link {
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
display: inline-block;
padding-bottom: 1px;
font-size: 0.94rem;
}
.cta-band-link:hover { border-bottom-color: #ffffff; color: #ffffff; text-decoration: none; }
.cta-aside-list { list-style: none; padding: 0; margin: 0; }
.cta-aside-list li { margin-bottom: 0.4rem; }
.cta-contact { display: flex; gap: 0.85rem; align-items: center; }
.cta-contact img {
width: 56px; height: 56px; border-radius: 50%;
object-fit: cover;
filter: saturate(0.8);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.cta-contact-name { font-weight: 600; color: #ffffff; }
.cta-contact-role { color: rgba(255, 255, 255, 0.68); font-size: 0.85rem; margin-bottom: 0.3rem; }
@media (max-width: 980px) {
.cta-band-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ---------- Arguments grid (homepage „Warum Bamberg")
2×2 auf Desktop, 1col Mobile. Visuelle Sprache: hart-eckig, Border statt
Schatten, große Source-Serif-Headlines, dezente Nummerierung als Anker. */
.arguments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.arguments-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .arguments-grid, .arguments-grid--three { grid-template-columns: 1fr; } }
.argument-card {
position: relative;
background: white;
border: 1px solid var(--border);
padding: 2.2rem 1.75rem 1.6rem;
transition: var(--transition);
}
.argument-card:hover { border-color: var(--uni-blau); }
.argument-card-num {
position: absolute;
top: 1.1rem;
right: 1.4rem;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent);
}
.argument-card h3 {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--uni-blau);
margin: 0 0 0.65rem;
text-wrap: balance;
/* Auto-Hyphenation produzierte unschoene Mid-Word-Bruchstellen wie
„in-/ternational" — gerade auf der EN-Seite mit laengeren Titeln.
`manual` erlaubt nur explizite Soft-Hyphens und respektiert daher den
Wortverlauf; `text-wrap: balance` uebernimmt die Verteilung. Frueher
stand hier `max-width: 22ch`, das hat alle Headlines >22 Zeichen
erzwungen-zweizeilig gemacht — entfernt zugunsten natuerlicher
Card-Breite. */
hyphens: manual;
}
.argument-card p {
margin: 0;
color: var(--text-light);
line-height: 1.6;
font-size: 1rem;
}
/* Selektiver Fettdruck im Card-Body: bewusst nicht reines Schwarz, damit
der Bold-Block nicht neben dem 72%-Schwarz-Body knallt. Das Bold-Gewicht
(700) traegt den Akzent, die Farbe (60% Schwarz) haelt ihn ruhig. */
.argument-card p strong {
font-weight: 700;
color: var(--text-emphasis);
}
/* ---------- Parallax-Hintergrund (Section-Variant)
"Warum Bamberg"-Section liegt auf einem Welterbe-Luftbild. Background-
attachment:fixed erzeugt einen leichten Parallax-Effekt beim Scrollen,
auf Mobile fällt der Effekt automatisch auf scroll zurück (siehe
Media-Query unten + prefers-reduced-motion).
Dunkles Uni-Blau-Tint-Overlay sorgt fuer Kontrast — die weißen Cards
bleiben lesbar, Section-Headlines werden weiss.
*/
.section--parallax {
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow: hidden;
}
.section--parallax-overlay {
position: absolute;
inset: 0;
/* Uni-Blau-100 als getoenter Overlay, 0.62 Alpha — Palette-konform,
nur Palettenwert mit Transparenz. */
background: rgba(0, 69, 125, 0.62);
pointer-events: none;
z-index: 0;
}
.section--parallax-inner {
position: relative;
z-index: 1;
}
.section--parallax .section-kicker--onmedia,
.section--parallax .section-title--onmedia,
.section--parallax .section-lead--onmedia {
color: #ffffff;
}
.section--parallax .section-kicker--onmedia {
/* Etwas heller Stop fuer die Augen, weil Kicker normal grau ist */
opacity: 0.88;
}
.section--parallax .section-lead--onmedia {
/* Lead nicht voll-weiss, damit Hierarchie zur Title klar bleibt */
opacity: 0.92;
}
/* Mobile + reduced-motion: kein fixed-Attachment (auf Mobile ist
background-attachment:fixed teils performancekritisch / wirkungslos). */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
.section--parallax { background-attachment: scroll; }
}
/* ========= Program-Foot CTA – analog WIAI-Filter
Helle Sektion mit zwei Karten ("Noch Fragen?") + 4-Step-Grid +
Frist-Hinweis + grosser CTA. Wird als Partial in beiden Templates
geladen (Hochglanz + Satellit). */
.program-foot {
background: var(--uni-blau-lighter);
padding: 3rem 1.5rem 4rem;
margin-top: 3rem;
}
.program-foot-inner {
max-width: var(--container-wide);
margin: 0 auto;
}
.program-foot-head {
text-align: center;
margin-bottom: 1rem;
}
.program-foot-head h2 {
font-family: var(--font-serif);
color: var(--uni-blau);
/* Section-Typo-Skala (A1): „So bewerben/schreiben Sie sich" auf die globale
H2-Stufe (30.4px/400) gehoben, bleibt zentriert. Vorher 25.6px/700. */
font-size: var(--fs-h2);
margin: 0 0 0.3rem;
font-weight: 400;
}
.program-foot-head p {
color: var(--text-light);
margin: 0;
font-size: 0.96rem;
}
.program-foot-enroll-summary {
max-width: 60ch;
margin: 0.6rem auto 0 !important;
font-size: 1.02rem;
line-height: 1.55;
}
.program-foot-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
@media (max-width: 820px) { .program-foot-cards { grid-template-columns: 1fr; } }
.program-foot-card {
background: #ffffff;
border-radius: 0;
padding: 2rem 2rem 1.8rem;
border: 1px solid var(--uni-blau-soft);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.program-foot-card-kicker {
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.14em;
color: var(--uni-blau);
text-transform: uppercase;
}
.program-foot-card p { color: var(--text-light); margin: 0; line-height: 1.55; }
.program-foot-card-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.4rem;
}
.program-foot-card-or { color: var(--text-light); font-size: 0.92rem; }
.program-foot-card-or a { color: var(--uni-blau); }
.program-foot-contact {
display: flex;
align-items: center;
gap: 1rem;
}
.program-foot-contact-photo {
width: 60px; height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--uni-blau-lighter);
}
.program-foot-contact-name {
font-weight: 600;
color: var(--uni-blau);
margin-bottom: 0.2rem;
font-size: 0.98rem;
}
.program-foot-contact-name .muted { color: var(--text-muted); font-weight: 500; font-size: 0.9rem; }
.program-foot-phone {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.08rem;
color: var(--uni-blau);
text-decoration: none;
border-bottom: 0;
}
.program-foot-phone:hover { text-decoration: underline; }
/* ────────────────── „Hinter dem Studiengang"-Block ──────────────────
Eigene Section direkt vor dem Kontakt-Footer. Person hinter dem Studiengang
(akademische Programmleitung), separat vom Frage-Formular (das geht an die
Fachstudienberatung). Reine Info + Link auf Lehrstuhl-Profil.
Layout flex: Avatar + Meta-Spalte. Bei vorhandener Homepage wird Name als
Link gerendert + zusätzlich „Profil am Lehrstuhl →" als Affordanz. */
.program-leitung {
/* Off-Grid 2.4rem (38.4px) auf 2.5rem (40px) gerastert (A7). */
padding: 2.5rem 1.5rem 0;
margin-top: 2rem;
}
.program-leitung-inner {
/* Card hat max-width 60ch, kein Anker links — Inner auf gleiche Breite
constrainen und zentrieren, statt im 1180er-Container links zu kleben. */
max-width: 60ch;
margin: 0 auto;
}
.program-leitung-kicker {
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.14em;
color: var(--uni-blau);
text-transform: uppercase;
margin: 0 0 1rem;
}
.program-leitung-card {
display: flex;
align-items: center;
gap: 1.4rem;
/* Vertikales Padding schlank halten: Inhalt ist bewusst nur Avatar + Name
(KB §6), zu viel Padding liess die Karte halb leer wirken (Layout-Sweep
07/2026, A6d). */
padding: 0.85rem 1.6rem;
background: #ffffff;
border: 1px solid var(--uni-blau-soft);
max-width: 60ch;
}
.program-leitung-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--uni-blau-lighter);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.program-leitung-avatar img { width: 100%; height: 100%; object-fit: cover; }
.program-leitung-initials {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.2rem;
color: var(--uni-blau);
}
.program-leitung-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.program-leitung-name {
font-weight: 700;
font-size: 1.05rem;
color: var(--uni-blau);
line-height: 1.25;
text-decoration: none;
}
a.program-leitung-name { border-bottom: 0; }
a.program-leitung-name:hover { text-decoration: underline; }
.program-leitung-role {
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.3;
}
.program-leitung-subtitle {
margin-top: 0.5rem;
font-family: var(--font-serif);
font-style: italic;
color: var(--text);
font-size: 0.95rem;
line-height: 1.4;
}
.program-leitung-focus {
margin: 0.6rem 0 0;
padding: 0;
list-style: none;
font-size: 0.85rem;
color: var(--text-light);
line-height: 1.45;
}
.program-leitung-focus li {
position: relative;
padding-left: 0.9rem;
}
.program-leitung-focus li::before {
content: "·";
position: absolute;
left: 0;
color: var(--uni-blau);
font-weight: 700;
}
.program-leitung-link {
margin-top: 0.6rem;
font-size: 0.88rem;
color: var(--uni-blau);
font-weight: 600;
border-bottom: 0;
text-decoration: none;
align-self: flex-start;
}
.program-leitung-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
.program-leitung-card { flex-direction: column; align-items: flex-start; }
}
/* ──────────── Studiengangsleitung-Mini-Card ────────────
Schlank: Avatar + Name + Rolle in einer Inline-Zeile, sitzt zwischen
Heading und Formular. Ist Kontext, nicht Hauptaktion – das Formular
ist der Akteur, der Kontakt-Lead bleibt mittel-prominent.
Bei vorhandenem Testimonial wird das Zitat statt der Mini-Card als
Lead über dem Heading gerendert (anderes visuelles Gewicht). */
.program-foot-sba {
display: flex;
align-items: center;
gap: 0.9rem;
max-width: 60ch;
margin: 0 auto 1.4rem;
padding: 0.6rem 0.9rem;
background: rgba(255,255,255,0.65);
border: 1px solid var(--uni-blau-soft);
}
.program-foot-sba-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--uni-blau-lighter);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.program-foot-sba-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.program-foot-sba-initials {
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.92rem;
color: var(--uni-blau);
letter-spacing: 0.02em;
}
.program-foot-sba-meta {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.program-foot-sba-name {
font-weight: 600;
color: var(--uni-blau);
font-size: 0.98rem;
line-height: 1.25;
}
.program-foot-sba-role {
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.3;
}
/* Testimonial-Variante (alternatives Layout, wenn _sba.testimonial gesetzt).
Aktuell ungenutzter Slot – Daten sind bisher nirgends kuratiert –, aber
das Layout ist vorbereitet, sobald je eine SBA-Aussage erfasst wird. */
.program-foot-sba-testimonial {
max-width: 60ch;
margin: 0 auto 1.6rem;
padding: 0;
border: 0;
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.55;
color: var(--text);
font-style: italic;
text-align: center;
}
.program-foot-sba-testimonial p { margin: 0; }
.program-foot-sba-testimonial footer {
margin-top: 0.4rem;
font-style: normal;
font-size: 0.88rem;
color: var(--text-muted);
}
/* ──────────── Sekundäre Kontaktwege ──────────── */
/* Sitzen INNERHALB der Form-Card (program-foot-form-wrap), unter der
Datenschutz-Details. Visuell als Teil des „Frage zum Studiengang?"-Blocks
gemarkert, damit sie nicht zur folgenden Bewerbungs-Section abrutschen. */
.program-foot-alts {
list-style: none;
margin: 1.2rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.92rem;
color: var(--text-light);
line-height: 1.5;
}
.program-foot-alt-label { font-weight: 600; color: var(--text); }
.program-foot-alt a { color: var(--uni-blau); font-weight: 600; }
.program-foot-alt-meta { color: var(--text-muted); font-size: 0.88rem; }
/* Inline-Form-Card. Bündelt Formular + Datenschutz + sekundäre Kontaktwege
in einer visuellen Einheit — alles, was zum „Frage zum Studiengang?"-Block
gehört. Großer margin-bottom, damit die nachfolgende Bewerbungs-Section
klar getrennt ist (sonst rutscht der Datenschutz-Hinweis optisch in die
nächste Section rein). max-width als Formular-Lesebreite (Formulare in
voller --container-wide wirken zerdehnt); der Quiz-/FAQ-Einsatz
(.quiz-zsb-contact-form-wrap, weiter unten) überschreibt das margin
und bleibt linksbündig. */
.program-foot-form-wrap {
background: #ffffff;
border: 1px solid var(--uni-blau-soft);
padding: 1.8rem 2rem 1.8rem;
max-width: 720px;
margin: 0 auto 4rem;
}
.program-foot-form { display: flex; flex-direction: column; gap: 1rem; }
/* Die Felder stecken in einem eigenen -fields-Wrapper (Honeypot + Reihen +
Einzel-Labels); ohne eigenes gap kleben die Labels von "Bezug" und
"Ihre Frage" an der Unterkante des vorherigen Feldes, während die
Name/E-Mail-Reihe ihr Grid-gap hat (Sweep-Befund A8). */
.program-foot-form-fields { display: flex; flex-direction: column; gap: 1rem; }
.program-foot-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 700px) { .program-foot-form-row { grid-template-columns: 1fr; } }
.program-foot-form label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--text-light);
font-weight: 500;
}
.program-foot-form input[type="text"],
.program-foot-form input[type="email"],
.program-foot-form textarea {
background: #ffffff;
border: 1px solid var(--uni-blau-soft);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.98rem;
padding: 0.7rem 0.9rem;
border-radius: 0;
transition: border-color 0.15s;
}
.program-foot-form input:focus, .program-foot-form textarea:focus {
outline: none;
border-color: var(--uni-blau);
}
.program-foot-form textarea {
resize: none;
overflow-y: hidden;
max-height: 50vh;
line-height: 1.5;
box-sizing: border-box;
}
.program-foot-form-foot {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
margin-top: 0.4rem;
}
.program-foot-form-note { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
/* Kleine Hinweis-Pille neben dem Absenden-Button. Heute nur noch im
Vorschau-Modus (dev/preview): Anfragen gehen an die interne Test-Adresse
statt an die ZSB. Steuerung via zsb_preview (build.py ZSB_PREVIEW). */
.program-foot-form-preview {
display: inline-block;
background: var(--uni-gelb-20);
color: var(--text);
font-size: 0.78rem;
font-weight: 500;
padding: 0.2rem 0.55rem;
border-radius: 4px;
}
.program-foot-form-mock-success {
background: var(--uni-gelb-tint);
border-radius: 6px;
padding: 1rem 1.2rem;
font-size: 0.92rem;
line-height: 1.5;
}
.program-foot-form-mock-success-kicker {
margin: 0 0 0.4rem;
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text);
}
.program-foot-form-mock-success p:last-child { margin-bottom: 0; }
.program-foot-form-privacy-details {
margin-top: 0.6rem;
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-muted);
}
.program-foot-form-privacy-details summary {
cursor: pointer;
font-weight: 600;
color: var(--text);
list-style: none;
display: inline-flex;
/* Chevron an der ERSTEN Zeile ausrichten (nicht vertikal mittig), falls der
Text doch zweizeilig umbricht – sonst schwebt das Dreieck zwischen den
Zeilen (Befund 3a). */
align-items: flex-start;
gap: 0.4rem;
padding: 2px 0;
}
.program-foot-form-privacy-details summary::-webkit-details-marker { display: none; }
.program-foot-form-privacy-details summary::before {
content: "▸";
display: inline-block;
transition: transform 0.15s;
color: var(--muted);
font-size: 0.85em;
}
.program-foot-form-privacy-details[open] summary::before { transform: rotate(90deg); }
.program-foot-form-privacy-details summary:hover { color: var(--uni-blau); }
.program-foot-form-privacy-details p { margin: 0.5rem 0; }
.program-foot-form-privacy-details ul {
margin: 0.4rem 0;
padding-left: 1.2rem;
}
.program-foot-form-privacy-details a { color: var(--uni-blau); }
/* ZSB-Kontaktsektion (Seitenende /quiz/ UND /faq/). Frueher in quiz_v2.css,
verschoben nach components.css, weil /faq/ das Quiz-Stylesheet nicht laedt
(Befund 4: Alts erschienen dort als nackte Default-Bullets). */
.quiz-zsb-contact-head {
max-width: 720px;
margin: 0 0 1.5rem;
}
.quiz-zsb-contact-head h2 { margin: 0 0 0.6rem; color: var(--uni-blau); }
.quiz-zsb-contact-head p { margin: 0; color: var(--text); }
.quiz-zsb-contact-form-wrap {
max-width: 720px;
margin: 0 0 1.5rem;
}
/* Kontakt-Alternativen als kompakter, gestalteter Block statt schwebender
Bullets: markerlose Zeilen mit Trennlinien und Label/Wert-Struktur, damit
sie im getoenten Bereich vor dem Footer nicht verloren wirken (Befund 4). */
.quiz-zsb-contact-alts {
list-style: none;
margin: 1.25rem 0 0;
padding: 0.85rem 1.1rem;
max-width: 720px;
background: #ffffff;
border: 1px solid var(--uni-blau-40);
border-radius: var(--radius-sm);
font-size: 0.92rem;
color: var(--text);
}
.quiz-zsb-contact-alts li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem;
padding: 0.4rem 0;
}
.quiz-zsb-contact-alts li + li { border-top: 1px solid var(--border); }
.quiz-zsb-contact-alt-label { font-weight: 600; color: var(--text); }
.quiz-zsb-contact-alt-meta { color: var(--muted); }
.program-foot-divider {
border: 0;
border-top: 1px solid var(--uni-blau-soft);
/* Kontakt-Block (inkl. Telefon-Zeile) und der Bewerbungs-Block "So schreiben
Sie sich ein" haben nichts miteinander zu tun -> voller Sektionsabstand
(~64px gesamt: 1.6rem über der Linie, 2.4rem darunter, A7-Rhythmus). */
margin: 1.6rem 0 2.4rem;
}
.program-foot-steps {
list-style: none;
margin: 0 0 2rem;
padding: 0;
display: grid;
/* Spaltenzahl = Step-Anzahl (per --step-cols aus dem Template, max 5), damit
3/4 Steps die Zeile fuellen und zentriert wirken statt links zu kleben. */
grid-template-columns: repeat(var(--step-cols, 4), 1fr);
gap: 1.25rem;
}
/* 5 Steps: 5 nebeneinander wird zu schmal -> 3 oben, 2 unten. Alle Karten
gleich breit (je Drittel = span 2 im 6-Spalten-Raster); Reihe 2 (Karte 4+5)
steht dann linksbuendig in Drittel-Breite, statt als zwei breite Halb-Karten
(Layout-Sweep 07/2026). */
.program-foot-steps--five {
grid-template-columns: repeat(6, 1fr);
}
.program-foot-steps--five > li { grid-column: span 2; }
@media (max-width: 980px) {
.program-foot-steps,
.program-foot-steps--five { grid-template-columns: repeat(2, 1fr); }
.program-foot-steps--five > li,
.program-foot-steps--five > li:nth-child(4),
.program-foot-steps--five > li:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px) {
.program-foot-steps,
.program-foot-steps--five { grid-template-columns: 1fr; }
}
.program-foot-steps li {
background: #ffffff;
border: 1px solid var(--uni-blau-soft);
padding: 1.6rem 1.4rem 1.5rem;
position: relative;
}
.program-foot-step-num {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
color: var(--uni-blau);
display: block;
line-height: 1;
margin-bottom: 0.7rem;
}
.program-foot-steps h3 {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.5rem;
text-decoration: underline;
text-decoration-color: var(--uni-blau-soft);
text-underline-offset: 0.25em;
}
.program-foot-steps p {
margin: 0;
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.55;
}
.program-foot-frist-hint {
text-align: center;
color: var(--text-light);
margin: 0 auto 1.8rem;
max-width: 70ch;
font-size: 0.95rem;
line-height: 1.6;
}
.program-foot-cta-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
}
.btn-large {
font-size: 1.05rem;
padding: 1rem 2.2rem;
}
.program-foot-cta-secondary {
display: inline-block;
color: var(--uni-blau);
font-size: 0.95rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.program-foot-cta-secondary:hover {
text-decoration-thickness: 2px;
}
.program-foot-reflinks {
list-style: none;
margin: 0.9rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
text-align: center;
}
.program-foot-reflinks a {
color: var(--uni-blau);
font-size: 0.85rem;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Globaler Wegweiser fuer internationale Studieninteressierte (#3647).
Dezenter Gelb-20-Tint-Kasten (Palette), kein Linksrand-Akzent. */
.program-foot-intl-note {
max-width: 640px;
margin: 1.4rem auto 0;
padding: 0.85rem 1.1rem;
background: var(--uni-gelb-tint);
border-radius: 8px;
text-align: center;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text);
/* Zentrierter Satz flattert bei ungleichen Zeilenlaengen stark –
balance gleicht die Zeilen an (pretty davor als Fallback fuer
Browser ohne balance-Support). */
text-wrap: pretty;
text-wrap: balance;
}
.program-foot-intl-note a {
color: var(--uni-blau);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
/* Der Wegweiser-Link steht auf eigener Zeile statt halb umgebrochen am
Absatzende zu haengen; ohne Silbentrennung („internatio-nale"). */
display: block;
margin-top: 0.45rem;
hyphens: none;
-webkit-hyphens: none;
}
/* ===== Waehlbare Unterrichtsfaecher (#1440/#1443) ===== */
.uf-intro { color: var(--text); margin: 0 0 0.6rem; line-height: 1.55; }
.uf-group { margin-top: 1.1rem; }
.uf-group-label {
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-light);
margin: 0 0 0.5rem;
}
/* Gleich breite Spalten + einheitliche Chip-Mindesthoehe, damit Chips mit
Hinweiszeile („Eignungspruefung …") nicht willkuerlich breiter/hoeher wirken
als die nackten Ein-Wort-Chips daneben (Layout-Sweep 07/2026). */
.uf-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.5rem;
}
.uf-item {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--surface-tint);
border-radius: 10px;
padding: 0.6rem 0.8rem;
line-height: 1.3;
/* Platz fuer Titel + eine Hinweiszeile reservieren, damit alle Chips gleich
hoch sind. */
min-height: 3.4rem;
}
.uf-name { font-weight: 600; color: var(--text); }
.uf-note { display: block; font-size: 0.78rem; color: var(--text-light); margin-top: 0.1rem; }
.uf-footnote { font-size: 0.85rem; color: var(--text-light); margin-top: 0.9rem; }
/* ========= Programmspezifische News (Hochglanz) ========= */
.prog-news { margin-top: 2.5rem; }
.prog-news-list {
list-style: none;
margin: 1rem 0 1.2rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.prog-news-item {
background: #ffffff;
border: 1px solid var(--border);
padding: 1.1rem 1.2rem 1.1rem;
border-left: 3px solid var(--uni-blau);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.prog-news-date {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.prog-news-title {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
margin: 0;
line-height: 1.35;
}
.prog-news-title a {
color: var(--uni-blau);
text-decoration: none;
}
.prog-news-title a:hover { text-decoration: underline; }
.prog-news-excerpt {
margin: 0;
font-size: 0.93rem;
line-height: 1.55;
color: var(--text-light);
}
.prog-news-footer {
margin: 0;
font-size: 0.92rem;
}
.prog-news-footer a { color: var(--uni-blau); }
/* ========= Section "Nach dem Studium" – Variante C: verbundene Stufen =========
Ein zusammenhaengender Weg statt loser Bloecke. Berufsfelder-Chips und
Master-Karten teilen EINE Karten-/Chip-Sprache (radius-sm, gleiche Border).
Nachsaetze sind schmale graue Fusszeilen mit Haarlinie am jeweiligen Block
(einheitliche Statuszeilen, volle Blockbreite statt 680px-Deckel). Ab zwei
Stufen sitzt der Verlauf an einer Blau-Schiene mit Marker-Punkten; bei genau
einer Stufe faellt die Schiene weg (ruhiger Einzel-Container, ein Ein-Stop-
Punkt waere sinnlos). Palette: nur Uni-Blau/Grau + Weiss. Die Schiene ist ein
eigenstaendiges verbindendes Element LINKS der Bloecke – KEIN farbiger
Karten-Linksrand-Akzent. */
.danach { }
/* Gemeinsames Stufen-/Block-Label (ersetzt die frueheren .danach-sub-Eyebrows). */
.danach-block-label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--uni-blau);
font-weight: 700;
margin: 0 0 0.75rem;
}
/* Zweites Label im selben Einzel-Container (z.B. Master-Kartenstufe unter den
Berufsfeldern, wenn kein zweiter Schienen-Stop entsteht). */
.danach-block-label--stacked { margin-top: 1.6rem; }
/* Vereinheitlichte Chip-Sprache (Berufsfelder) – selbe Ecken/Border wie die
Master-Karten, damit beide als eine Familie lesen. */
.danach-chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.danach-chips li {
padding: 0.45rem 0.85rem;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.92rem;
line-height: 1.35;
color: var(--text);
text-align: center;
}
/* Fit-Wrapper: haelt Chips/Karten und ihre Fusszeilen auf identischer Breite,
damit der Text unter dem Raster exakt mit dessen Kanten fluchtet.
danach-balance.js verengt .danach-fit--chips fuer ausgeglichene Zeilen und
setzt .is-grow, damit jede Chip-Zeile die Wrapper-Breite voll fuellt. */
.danach-fit .danach-foot { max-width: none; }
.danach-fit--chips.is-grow .danach-chips li { flex: 1 1 auto; min-width: 0; }
/* Komplett einspaltige Liste: gleich breite Pills (Breite des breitesten
Elements, via JS am Wrapper), Text linksbuendig statt zentriert. */
.danach-fit--chips.is-stack .danach-chips li { flex: 1 1 auto; min-width: 0; text-align: left; }
/* Master-Kartenraster – gleiche Ecken/Border-Sprache wie die Chips.
Spaltenzahl kommt balanciert aus dem Template (--dcols: ceil(n/rows),
nie 4+1-Umbrueche); minmax(0,1fr) statt 1fr, damit lange Woerter die
Spur nicht sprengen (Overflow-Fix, dh 2026-07-06). Der Fit-Wrapper
begrenzt die Gesamtbreite proportional zur Spaltenzahl, damit 1-2
Karten nicht ueberbreit werden. */
.danach-fit--cards { max-width: min(1180px, calc(var(--dcols, 3) * 21.5rem)); }
.danach-cards {
display: grid;
grid-template-columns: repeat(var(--dcols, 3), minmax(0, 1fr));
gap: 0.7rem;
margin: 0;
}
@media (max-width: 1020px) {
.danach-cards { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
}
@media (max-width: 560px) {
.danach-cards { grid-template-columns: 1fr; }
}
.master-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1rem 1.1rem;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
text-decoration: none;
color: inherit;
transition: var(--transition);
}
.master-card:hover {
border-color: var(--uni-blau);
text-decoration: none;
}
.master-card-kicker {
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.master-card-title {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
color: var(--uni-blau);
line-height: 1.3;
/* lange Namen (Wirtschaftspaedagogik, Denkmaltechnologien) trennen statt
ueberlaufen; ueberschreibt den a-*-hyphens-Reset aus base.css */
hyphens: auto;
overflow-wrap: anywhere;
}
/* Fusszeile: schmal, ruhig, mit Haarlinie am jeweiligen Block. Vereinheitlicht
die frueheren .career-context/.danach-master-note/.danach-andere-faecher-
Varianten (gleiche Statuszeilen-Optik, volle Blockbreite). */
.danach-foot {
margin: 0.9rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
max-width: 74ch;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-light);
}
.danach-foot a { color: var(--uni-blau); }
/* Provenienz-Hinweis (Mock-Ehrlichkeit): leicht getoenter Kasten statt
Haarlinie, damit die „automatisch ergaenzt"-Disclosure sichtbar bleibt. */
.danach-foot--prov {
border-top: none;
padding: 0.7rem 1rem;
background: var(--surface-tint);
font-size: 0.85rem;
}
/* Folge-Absatz im selben Fussblock (z.B. „Master aus anderen Fachrichtungen"
direkt nach dem Berufsfelder-Kontext): keine zweite Haarlinie. */
.danach-foot--followup {
border-top: none;
padding-top: 0;
margin-top: 0.6rem;
}
/* Fusszeile als ERSTER Inhalt direkt nach dem Label bzw. dem Stufen-Kopf
(reiner Prosa-Block ohne Chips/Karten davor): keine obere Haarlinie – die
waere nur ein redundanter Strich unter der Ueberschrift. Sitzt eine Fusszeile
NACH Chips/Karten, bleibt die Haarlinie als Abschluss-Trenner. */
.danach-block-label + .danach-foot,
.danach--vC .danach-flow-head + .danach-foot {
border-top: none;
padding-top: 0;
margin-top: 0;
}
/* Section-weite Fusszeile „Master aus anderen Fachrichtungen": ruhig unter dem
gesamten Verlauf, ohne Stufen-Marker, volle Breite (#1942 Rosenbaum). */
.danach-andere-foot {
margin: 1.5rem 0 0;
/* laeuft ueber die volle Blockbreite (hebt die 74ch von .danach-foot auf),
damit sie unter dem breiten Master-Kartenraster nicht stummelig wirkt */
max-width: none;
font-size: 0.88rem;
line-height: 1.55;
color: var(--text-light);
}
/* ---- Verbundene Stufen an einer Blau-Schiene (ab 2 Stufen) ---- */
.danach--vC .danach-flow {
position: relative;
margin-top: 0.8rem;
padding-left: 1.75rem;
}
.danach--vC .danach-flow::before {
content: "";
position: absolute;
left: 6px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--uni-blau-20);
}
.danach--vC .danach-flow-stage { position: relative; }
.danach--vC .danach-flow-stage + .danach-flow-stage { margin-top: 2rem; }
.danach--vC .danach-flow-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.85rem -1.75rem;
}
.danach--vC .danach-flow-dot {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
border: 3px solid var(--uni-blau);
box-shadow: 0 0 0 4px #ffffff;
}
.danach--vC .danach-flow-head .danach-block-label { margin: 0; }
/* ---- Ein-Block-Fall: kein Schienen-Stop, ohne Container-Box – die Chips/
Karten sind selbst gerahmt, eine Box drumherum wirkte doppelt gerahmt
(dh 2026-07-06, Arabistik-Befund). Label bleibt als Zwischenueberschrift. */
.danach--vC .danach-single { margin-top: 0.6rem; }
.danach--vC .danach-single > .danach-block-label:first-child { margin-top: 0; }
/* Nur-Prosa-Fall (keine Chips/Karten): zusaetzlich ohne Label – der Text
laeuft als normaler Absatz in Fliesstextgroesse (dh 2026-07-06). */
.danach--vC .danach-single--plain { margin-top: 0.2rem; }
.danach--vC .danach-single--plain .danach-foot {
border-top: none;
padding-top: 0;
margin-top: 0;
font-size: 1rem;
line-height: 1.65;
color: var(--text);
}
.danach--vC .danach-single--plain .danach-foot + .danach-foot { margin-top: 0.75rem; }
.danach--vC .danach-single > .danach-foot:last-child,
.danach--vC .danach-single > .danach-chips:last-child,
.danach--vC .danach-single > .danach-cards:last-child { margin-bottom: 0; }
/* ========= Alternativen-Band: Weniger-geeignet + Verwandte gruppiert =========
Steht zwischen Lehre&Ort (tinted) und Nach-dem-Studium (page-bg). Default
page-bg, weil #lehre tinted und #faq+#dokumente tinted sind – ergibt eine
alternierende Stripe in der unteren Seitenhälfte. */
.alternativen-band { padding: 2.4rem 1.5rem 2rem; margin-top: 0; }
.alternativen-band-head {
max-width: 70ch;
margin: 0 0 1.6rem;
}
.alternativen-band-head h2 {
font-size: 1.55rem;
margin: 0 0 0.4rem;
}
.alternativen-band-head p {
margin: 0;
color: var(--text-light);
font-size: 0.96rem;
line-height: 1.55;
}
.alternativen-band-inner > section {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid var(--border);
}
.alternativen-band-inner > section:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.alternativen-band-inner h3 {
font-size: 1.15rem;
font-family: var(--font-serif);
color: var(--uni-blau);
margin: 0 0 0.7rem;
}
.alternativen-band-inner .related-note h4 {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--uni-blau);
margin: 0.15rem 0 0;
line-height: 1.3;
}
/* =================================================================
Mehr-Fach-Bachelor: Kombinationsbox
Verwendet auf Programmseiten (Hochglanz + Satellit).
Daten kommen aus data/combinations.json via build.py attach_kombi.
================================================================= */
.kombi-box {
margin: 2rem 0;
padding: 1.4rem 1.6rem 1.2rem;
background: var(--card-bg);
border: 1px solid var(--uni-blau-soft);
border-radius: 8px;
}
.kombi-box--planned {
border-color: var(--uni-gelb-20);
background: var(--uni-gelb-20);
}
.kombi-box--pure-nebenfach {
border-color: var(--uni-gelb-20);
background: var(--uni-gelb-20);
}
.kombi-header {
display: grid;
grid-template-columns: 1fr;
gap: 1rem 1.5rem;
margin-bottom: 1rem;
align-items: start;
}
.kombi-header--split {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.kombi-header-main {
min-width: 0;
}
.kombi-headline {
font-family: var(--font-heading, Copse, Georgia, serif);
font-size: 1.3rem;
margin: 0 0 0.45rem;
color: var(--uni-blau);
line-height: 1.25;
}
.kombi-planned-tag {
display: inline-block;
margin-left: 0.5rem;
padding: 0.1rem 0.55rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
background: var(--warning);
color: white;
border-radius: 3px;
vertical-align: 0.15em;
}
.kombi-vorbehalt {
margin: 0.75rem 0 1.25rem;
padding: 0.85rem 1rem;
background: var(--uni-gelb-20);
border: 1px solid var(--uni-gelb-20);
border-radius: 4px;
font-size: 0.93rem;
line-height: 1.55;
color: #000000;
}
.kombi-intro {
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
color: var(--text);
}
.kombi-intro--warn {
padding: 0.55rem 0.8rem;
background: var(--uni-gelb-20);
border: 1px solid var(--uni-gelb-20);
border-radius: 4px;
color: #000000;
}
/* ----- Bezugsvariante side-panel ----- */
.kombi-bezug {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.7rem 0.85rem;
background: var(--surface-tint);
border: 1px solid var(--uni-blau-lighter);
border-radius: 4px;
font-size: 0.85rem;
line-height: 1.45;
min-width: 0;
}
.kombi-bezug-kicker {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-light);
}
.kombi-bezug-label {
font-size: 0.95rem;
color: var(--uni-blau);
font-weight: 600;
}
.kombi-bezug-note {
font-size: 0.82rem;
color: var(--text-light);
line-height: 1.45;
}
/* ----- Variant rows: ECTS + label inline + thin proportional bar ----- */
.kombi-variants {
list-style: none;
padding: 0;
margin: 0 0 0.4rem;
display: flex;
flex-direction: column;
border-top: 1px solid var(--uni-blau-soft);
}
.kombi-variant {
display: grid;
grid-template-columns: 3.6rem 1fr;
gap: 1rem;
padding: 0.6rem 0 0.55rem;
border-bottom: 1px solid var(--uni-blau-soft);
align-items: baseline;
}
.kombi-variant-num {
text-align: right;
font-variant-numeric: tabular-nums;
line-height: 1;
align-self: baseline;
padding-top: 0.18rem;
}
.kombi-variant-ects {
font-family: var(--font-heading, Copse, Georgia, serif);
font-size: 1.45rem;
font-weight: 400;
color: var(--uni-blau);
letter-spacing: -0.01em;
display: inline;
}
.kombi-variant-of {
font-size: 0.65rem;
color: var(--text-light);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-left: 0.18rem;
}
.kombi-variant-body {
min-width: 0;
}
.kombi-variant-line {
font-size: 0.93rem;
line-height: 1.5;
color: var(--text);
margin: 0 0 0.3rem;
}
.kombi-variant-label {
font-weight: 600;
color: var(--uni-blau);
}
.kombi-variant-label::after {
content: " – ";
color: var(--text-light);
font-weight: 400;
}
.kombi-variant--primary .kombi-variant-label::after {
content: " (Bezug dieser Seite) – ";
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--accent);
font-weight: 600;
}
.kombi-variant-desc {
color: var(--text);
}
.kombi-variant-bar {
position: relative;
height: 4px;
background: var(--uni-blau-lighter);
border-radius: 2px;
overflow: hidden;
}
.kombi-variant-bar-fill {
position: absolute;
inset: 0 auto 0 0;
background: var(--uni-blau-60);
border-radius: 2px;
}
.kombi-variant--primary .kombi-variant-bar-fill {
background: var(--uni-blau);
}
.kombi-special-note {
font-size: 0.85rem;
color: var(--text-light);
line-height: 1.5;
margin: 0.5rem 0 0;
padding: 0;
}
/* ----- Partner lists: collapsible, no heavy gray box ----- */
.kombi-partners {
margin: 0.4rem 0 0;
padding: 0.4rem 0 0;
border-top: 1px solid var(--uni-blau-soft);
}
.kombi-partner {
margin: 0;
padding: 0.4rem 0;
border-bottom: 1px solid var(--uni-blau-soft);
}
.kombi-partner:last-child { border-bottom: none; }
.kombi-partner > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.45rem 0;
font-size: 0.93rem;
font-weight: 600;
color: var(--uni-blau);
position: relative;
}
.kombi-partner > summary::-webkit-details-marker { display: none; }
.kombi-partner > summary::before {
content: "";
display: inline-block;
width: 0.45em;
height: 0.45em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
margin-right: 0.6rem;
transition: transform 0.18s ease;
flex-shrink: 0;
opacity: 0.65;
}
.kombi-partner[open] > summary::before {
transform: rotate(45deg);
}
.kombi-partner-title {
flex: 1;
}
.kombi-partner-count {
font-size: 0.78rem;
font-weight: 500;
color: var(--text-light);
font-variant-numeric: tabular-nums;
background: var(--uni-blau-lighter);
padding: 0.1rem 0.5rem;
border-radius: 999px;
min-width: 1.75rem;
text-align: center;
}
.kombi-partner[open] > summary { margin-bottom: 0.5rem; }
.kombi-partner-note {
font-size: 0.85rem;
color: var(--text-light);
margin: 0.1rem 0 0.6rem;
font-style: italic;
padding-left: 1.3rem;
}
.kombi-partner-list {
list-style: none;
padding: 0 0 0.5rem 1.3rem;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.7rem;
}
.kombi-partner-list li { font-size: 0.92rem; }
.kombi-partner-list li::after {
content: "·";
color: var(--uni-blau-soft);
margin-left: 0.7rem;
}
.kombi-partner-list li:last-child::after { content: ""; }
.kombi-partner-list a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.kombi-partner-list a:hover { border-bottom-color: var(--accent); }
.kombi-planned-tag-small {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--warning);
color: white;
padding: 0.05rem 0.35rem;
border-radius: 2px;
margin-left: 0.3rem;
vertical-align: 0.1em;
}
.kombi-self-combo-tag {
font-size: 0.72rem;
color: var(--text-light);
font-style: italic;
margin-left: 0.3rem;
}
.kombi-faq-link {
margin: 0.75rem 0 0;
font-size: 0.85rem;
}
.kombi-faq-link a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid var(--uni-blau-soft);
}
.kombi-faq-link a:hover { border-bottom-color: var(--accent); }
/* Hochglanz-Variante: nur dezente Tonung, kein Padding-Aufschlag */
.hochglanz-page .kombi-box,
.program-hochglanz .kombi-box {
background: linear-gradient(180deg, var(--card-bg) 0%, var(--uni-grau-20) 100%);
}
@media (max-width: 720px) {
.kombi-header,
.kombi-header--split {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.kombi-box {
padding: 1.1rem 1.1rem 0.95rem;
}
.kombi-variant {
grid-template-columns: 3rem 1fr;
gap: 0.7rem;
padding: 0.55rem 0 0.5rem;
}
.kombi-variant-ects { font-size: 1.25rem; }
.kombi-headline { font-size: 1.15rem; }
}
/* =================================================================
Hochglanz-Variant-Aside: hochformatige Sidebar-Variante neben dem
Ueberblick-Block. Konsolidiert Studierbar-als-Varianten,
Lehramts-Querverweise und Partner-Listen in einer rechten Spalte.
================================================================= */
.overview-section.overview-section--with-aside {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 22rem);
gap: 2rem;
align-items: start;
}
.overview-main { min-width: 0; }
/* Bachelor mit Studierbar-als-/Lehramt-Aside: Worum + Stereotyp +
Besonderheiten + Zulassung laufen gemeinsam in einem 2-Spalten-Stack.
Linke Spalte vertikaler Inhalts-Stack, rechte Spalte sticky Aside
ueber die gesamte Hoehe. Loest das Aside-laenger-als-Worum-Problem,
das zuvor einen Whitespace-Loch unter dem Aside hinterliess. */
.hochglanz-overview-stack--with-aside {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 22rem);
gap: 2rem;
align-items: start;
margin-bottom: 2rem;
}
.hochglanz-overview-stack--with-aside .overview-stack-content {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
}
.hochglanz-overview-stack--with-aside .overview-stack-content > section,
.hochglanz-overview-stack--with-aside .overview-stack-content > .program-stereotyp {
margin: 0;
}
/* Innerhalb des Stacks ist die Worum-Section nicht selbst Aside-Grid
(Aside ist im aeusseren Stack). Wir resetten das mit-aside-Styling
im Stack-Kontext, damit Worum als normaler Inhalt rendert. */
.hochglanz-overview-stack--with-aside .overview-section {
display: block;
}
.hochglanz-overview-stack--with-aside .variants-aside {
/* sticky, damit der Kasten beim Scrollen der langen linken Spalte
mitwandert statt am Sektion-Anfang stehenzubleiben. */
position: sticky;
top: 1.25rem;
}
@media (max-width: 820px) {
.hochglanz-overview-stack--with-aside {
grid-template-columns: 1fr;
}
.hochglanz-overview-stack--with-aside .variants-aside {
position: static;
}
}
.variants-aside {
position: sticky;
top: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.1rem 1.2rem 1rem;
background: var(--card-bg);
border: 1px solid var(--uni-blau-soft);
border-radius: 8px;
font-size: 0.92rem;
line-height: 1.5;
}
.hochglanz-page .variants-aside {
background: var(--surface-tint);
border-color: var(--uni-blau-40);
}
.variants-aside--planned {
border-color: var(--uni-gelb-20);
background: var(--uni-gelb-20);
}
.variants-aside--pure-nebenfach {
border-color: var(--uni-gelb-20);
background: var(--uni-gelb-20);
}
.variants-aside-block + .variants-aside-block {
padding-top: 0.9rem;
border-top: 1px solid var(--uni-blau-soft);
}
.variants-aside-headline {
margin: 0 0 0.6rem;
/* Open Sans wie alle uebrigen Uppercase-Eyebrows (z.B. .danach-sub) – nicht
die Copse-Serif erben, sonst bleibt dieses Mini-Label eine Serif-Insel
(Layout-Sweep 07/2026, A5a). */
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-light);
}
.variants-aside-warn {
margin: 0 0 0.7rem;
padding: 0.5rem 0.65rem;
background: var(--uni-gelb-20);
border: 1px solid var(--uni-gelb-20);
border-radius: 4px;
font-size: 0.85rem;
line-height: 1.45;
color: #000000;
}
.variants-aside-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.variants-aside-item { padding: 0; }
.variants-aside-item-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.25rem;
}
.variants-aside-label {
font-weight: 600;
color: var(--uni-blau);
font-size: 0.95rem;
}
.variants-aside-item.is-primary .variants-aside-label::before {
content: "►";
display: inline-block;
margin-right: 0.4rem;
color: var(--accent);
font-size: 0.7em;
vertical-align: 0.15em;
}
.variants-aside-ects {
font-family: var(--font-heading, Copse, Georgia, serif);
font-size: 1.15rem;
color: var(--uni-blau);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.variants-aside-ects small {
margin-left: 0.2rem;
font-size: 0.6rem;
/* Open Sans statt system-ui-Fallback (--font-body ist nicht definiert),
sonst rendert das ECTS-Einheitenlabel als System-Font-Insel
(Layout-Sweep 07/2026, A5b). */
font-family: var(--font-sans);
letter-spacing: 0.06em;
color: var(--text-light);
text-transform: uppercase;
font-weight: 500;
}
.variants-aside-bar {
position: relative;
height: 4px;
background: var(--uni-blau-lighter);
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.3rem;
}
.variants-aside-bar-fill {
position: absolute;
inset: 0 auto 0 0;
background: var(--uni-blau-60);
border-radius: 2px;
}
.variants-aside-item.is-primary .variants-aside-bar-fill {
background: var(--uni-blau);
}
.variants-aside-desc {
margin: 0;
font-size: 0.85rem;
line-height: 1.45;
color: var(--text-light);
}
.variants-aside-foot {
margin: 0.6rem 0 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--text-light);
}
.variants-aside-note {
margin: 0.7rem 0 0;
padding: 0.55rem 0.7rem;
font-size: 0.82rem;
line-height: 1.5;
color: var(--text);
background: color-mix(in srgb, var(--surface-tint) 45%, #ffffff);
border-radius: 6px;
}
/* Lehramt block */
.variants-aside-block--lehramt .variants-aside-headline { color: #000000; }
/* Schulart-Aside (Hinweis auf die Lehramts-Landing) – kompakter CTA. */
.variants-aside-block--lehramt-schulart .variants-aside-headline { color: #000000; }
.variants-aside-block--lehramt-schulart .variants-aside-sub {
margin: 0 0 0.7rem;
}
.variants-aside-block--lehramt-schulart .btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.42rem 0.75rem;
font-size: 0.85rem;
line-height: 1.2;
white-space: nowrap;
}
.variants-aside-block--lehramt-schulart .variants-aside-foot {
margin-top: 0.85rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--uni-blau-soft);
}
.variants-aside-sub {
margin: 0 0 0.55rem;
font-size: 0.85rem;
line-height: 1.45;
color: var(--text-light);
}
.variants-aside-lehramt-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.variants-aside-lehramt-list a {
color: var(--uni-blau);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--transition);
}
.variants-aside-lehramt-list a:hover { border-bottom-color: var(--accent); }
.variants-aside-lehramt-list .muted {
font-weight: 400;
font-size: 0.8rem;
color: var(--text-light);
}
/* Partner toggle blocks */
.variants-aside-block--partners {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.variants-aside-partner {
border-top: 1px solid var(--uni-blau-soft);
padding: 0.35rem 0;
}
.variants-aside-partner:first-child {
border-top: none;
padding-top: 0;
}
.variants-aside-partner > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.3rem 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--uni-blau);
}
.variants-aside-partner > summary::-webkit-details-marker { display: none; }
.variants-aside-partner > summary::before {
content: "";
display: inline-block;
width: 0.42em;
height: 0.42em;
border-right: 1.4px solid currentColor;
border-bottom: 1.4px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.18s ease;
flex-shrink: 0;
opacity: 0.6;
}
.variants-aside-partner[open] > summary::before { transform: rotate(45deg); }
.variants-aside-partner-title { flex: 1; }
.variants-aside-partner-count {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-light);
font-variant-numeric: tabular-nums;
background: var(--uni-blau-lighter);
padding: 0.05rem 0.4rem;
border-radius: 999px;
min-width: 1.5rem;
text-align: center;
}
.variants-aside-partner-list {
list-style: none;
padding: 0.2rem 0 0.4rem 0.95rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.variants-aside-partner-list li { font-size: 0.85rem; line-height: 1.4; }
.variants-aside-partner-list a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.variants-aside-partner-list a:hover { border-bottom-color: var(--accent); }
.variants-aside-glossary {
margin: 0.4rem 0 0;
font-size: 0.72rem;
color: var(--text-light);
}
.variants-aside-glossary a {
color: var(--text-light);
text-decoration: underline;
text-decoration-color: var(--uni-blau-40);
text-underline-offset: 2px;
}
.variants-aside-glossary a:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
@media (max-width: 960px) {
.overview-section.overview-section--with-aside {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.variants-aside {
position: static;
top: auto;
}
}
/* ---------- Glossar (jargon-tooltip) ---------- */
/* Begriffe wie ECTS, StuFPO, WIAI bekommen einen subtil gepunkteten Underline.
Klick/Tap oeffnet ein Popover (positioniert via JS in glossar.js). */
.glossar-term {
appearance: none;
background: transparent;
border: 0;
position: relative;
/* KEIN vertikales Padding: Der Chip ist ein