/* ============================================================
   Uni Bamberg WIAI – Colors & Typography
   Source of truth for CSS variables + semantic type tokens.
   Extracted from finder/css/style.css + js/data.js COLORS.
   ============================================================ */

/* ---------- Local Fonts ----------
   Uni-Bamberg-CD-Fonts (so wie sie auch www.uni-bamberg.de selbst ausliefert):
   Open Sans (Body) + Copse (Headings). Aus dem Source-Bundle der Uni gespiegelt
   nach static/fonts/. Fraunces / Source Sans 3 sind absichtlich rausgeflogen,
   damit das Portal optisch klar als „derselbe Absender" wie uni-bamberg.de
   wirkt. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-300italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-400italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-700italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Copse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/copse-400.woff2') format('woff2');
}

/* ---------- Design Tokens ----------
   ALLE Farbwerte sind aus der offiziellen Uni-Bamberg-CD-Tabelle
   (`Uni-Farben-Farbwerte.pdf`). Nur Werte aus dieser Tabelle plus Weiss/
   Schwarz sind erlaubt. Default-Akzent ist Blau (vor allem 100% und 20%,
   ggf. 40% fuer Abstufungen). Gelb/Gruen/Rot sind primaer als 20%-Tints
   fuer subtile Akzente gedacht; Vollton nur dort, wo es ein bewusst
   hartes Signal sein soll (Pflicht-Icons, Logo). */
:root {
  /* --- Blau (Primary) – Uni-CD --- */
  --uni-blau:         rgb(0, 69, 125);     /* 100% – Headings, Nav, CTA primary, Body-Akzent */
  --uni-blau-80:      rgb(51, 106, 151);   /* 80%  – Hover/Active fuer 100%-Flaechen (selten) */
  --uni-blau-60:      rgb(102, 144, 177);  /* 60%  – Mittlere Abstufung (selten) */
  --uni-blau-40:      rgb(153, 181, 203);  /* 40%  – Borders, Sub-Cards, mittlere Tints */
  --uni-blau-20:      rgb(204, 218, 229);  /* 20%  – Hintergruende, sanfte Flaechen, Tooltips */

  /* Legacy-Aliasse (auf die Uni-CD-Tints gemappt, damit Bestandscode laeuft) */
  --uni-blau-light:   var(--uni-blau);     /* historischer Alias */
  --uni-blau-soft:    var(--uni-blau-20);  /* Borders/Hover */
  --uni-blau-lighter: var(--uni-blau-20);  /* Surface-Tint */

  /* --- Akzentfarben (Uni-CD) – primaer als 20%-Tints im UI verwenden --- */
  --uni-gelb:    rgb(255, 211, 0);     /* 100% Gelb – nur fuer Icon/Stroke/Hartes Signal */
  --uni-gelb-20: rgb(255, 246, 204);   /* 20%  Gelb – Hintergrund Hinweis/Pill */
  /* Sanftes Gelb fuer grossflaechige Hinweis-Banner (Konfidenz/Annaeherung).
     Gelb-20 ist als breiter Block zu kraeftig – wir mischen 45% in Weiss,
     analog zum --surface-tint-Pattern. Palette-konform: nur Palettenwerte
     (Gelb-20 + Weiss) beteiligt. */
  --uni-gelb-tint: color-mix(in srgb, var(--uni-gelb-20) 45%, #ffffff);
  --uni-gruen:    rgb(151, 191, 13);   /* 100% Gruen – nur fuer Icon/Stroke/Hartes Signal */
  --uni-gruen-20: rgb(234, 242, 207);  /* 20%  Gruen – Hintergrund Erfolg/Pill */
  --uni-rot:    rgb(230, 68, 79);      /* 100% Rot – nur fuer Icon/Stroke/Hartes Signal */
  --uni-rot-20: rgb(250, 218, 220);    /* 20%  Rot – Hintergrund Warnung/Pill */

  /* --- Grau (Uni-CD) --- */
  --uni-grau:     rgb(135, 135, 131);  /* 100% – Muted Text, Meta */
  --uni-grau-80:  rgb(159, 159, 156);  /* 80% */
  --uni-grau-60:  rgb(183, 183, 181);  /* 60% */
  --uni-grau-40:  rgb(207, 207, 206);  /* 40% – Borders */
  --uni-grau-20:  rgb(231, 231, 230);  /* 20% – sehr leichte Trenner/Surfaces */

  /* --- Akzent (Default-Akzentfarbe = Blau) --- */
  --accent:       var(--uni-blau);
  --accent-light: var(--uni-blau-80);

  /* --- Semantic – auf Uni-CD-Volltoene gemappt; im UI fast immer in der
     20%-Fassung verwenden (siehe --*-bg unten). --- */
  --success: var(--uni-gruen);
  --warning: var(--uni-gelb);
  --danger:  var(--uni-rot);
  --info:    var(--uni-blau);

  --success-bg: var(--uni-gruen-20);
  --warning-bg: var(--uni-gelb-20);
  --danger-bg:  var(--uni-rot-20);
  --info-bg:    var(--uni-blau-20);

  /* --- Foregrounds / text ---
     Body Schwarz; Hierarchie via Schwarz mit Alpha (mischt sich mit jedem
     Hintergrund, behaelt Kontrast auch auf Blau-20-Tints). Uni-Grau-100
     ist mit ~3:1 nur auf reinem Weiss noch brauchbar – auf Tints faellt
     es auseinander, deshalb hier kein direkter Token. */
  --text:       #000000;
  --text-light: rgba(0, 0, 0, 0.72);
  --muted:      rgba(0, 0, 0, 0.55);
  /* Selektiver Body-Fettdruck (<strong> in Card-Bodys etc.): Schwarz 60%.
     Wirkt durch das Bold-Gewicht weiterhin hervorgehoben, aber knallt nicht
     wie 100%-Schwarz neben dem Body-Text. Palette-konform analog zur
     bestehenden Schwarz-mit-Alpha-Konvention (--text-light/--muted). */
  --text-emphasis: rgba(0, 0, 0, 0.6);

  /* --- Surfaces --- */
  --bg:       #ffffff;             /* Page background = Weiss */
  --card-bg:  #ffffff;             /* Card / panel surface */
  /* Section-Flaeche: Blau-20 ist als grossflaechige Tint zu kraeftig.
     Wir mischen Blau-20 mit Weiss zu ~ "Blau-10" – palette-konform, weil
     nur Palettenwerte (Blau-20 + Weiss) beteiligt sind. */
  --surface-tint: color-mix(in srgb, var(--uni-blau-20) 45%, #ffffff);
  --border:   var(--uni-grau-40);  /* Default-Linien */

  /* --- Passung (match-quality) fills ---
     bg = 20%-Tint der zugehoerigen Uni-Farbe, fg = passender Vollton oder
     Schwarz. Akzentfarben hier bewusst in der hellsten Fassung. */
  --passung-sehr-gut-bg: var(--uni-gruen-20);  --passung-sehr-gut-fg: #000000;
  --passung-gut-bg:      var(--uni-blau-20);   --passung-gut-fg:      var(--uni-blau);
  --passung-teilweise-bg:var(--uni-gelb-20);   --passung-teilweise-fg:#000000;
  --passung-weniger-bg:  var(--uni-grau-20);   --passung-weniger-fg:  var(--uni-grau);
  --passung-fehlt-bg:    var(--uni-rot-20);    --passung-fehlt-fg:    var(--uni-rot);

  /* --- Typography families ---
     Uni-Bamberg-CD: Open Sans flaechendeckend. Copse bleibt geladen, kommt aber
     nur noch im Hero-Heading zum Einsatz (siehe `.hero h1` in components.css).
     Alle Bestands-Deklarationen mit `var(--font-serif)` rendern dadurch
     automatisch in Open Sans. */
  --font-serif:  'Open Sans', Arial, Helvetica, sans-serif;
  --font-sans:   'Open Sans', Arial, Helvetica, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Type scale ---
     Body angehoben von 16 → 17px, weil die Uni-Zielgruppe (jüngere
     Interessent:innen und ältere Begleiter:innen) eine entspannte
     Reading-Size braucht. Secondary/Meta-Stufen wurden ebenfalls
     angehoben – Minimum 12.5px für funktionale Labels. */
  --fs-display:  clamp(2.2rem, 5vw, 3.4rem);  /* Hero H1 */
  --fs-h1:       clamp(1.9rem, 4vw, 2.75rem);
  --fs-h2:       1.9rem;
  --fs-h3:       1.2rem;
  --fs-h4:       1rem;
  --fs-lead:     1.2rem;
  --fs-body:     1.0625rem;   /* 17px – vorher 16 */
  --fs-sm:       1rem;        /* 16px – vorher 14.7 */
  --fs-xs:       0.9rem;      /* ~14.4px – Meta, Breadcrumb */
  --fs-micro:    0.8rem;      /* ~12.8px – badges, kickers min */

  /* --- Section-Typo-Skala (Layout-Sweep A1, dh 2026-07) ---
     Einheitliche Stufen fuer Sektionsueberschriften ueber alle Seitentypen.
     Echte Top-Level-Sektionen (Ueberblick, Besonderheiten, Nach dem Studium,
     ECTS-Verteilung, So bewerben Sie sich ...) rendern sitewide ueber --fs-h2
     (30.4px/400, Basis-h2) – Programmseiten wurden von 24.8px hochgezogen.
     Bewusst kleinere Sub-Bloecke (Haeufige Fragen, Dokumente und offizielle
     Quellen, Frage zum Studiengang?) teilen sich eine gemeinsame zweite Stufe. */
  --fs-subsection:  1.25rem;   /* 20px – zweite Stufe (Service-Zone + CTA-Kopf) */
  --fw-subsection:  600;

  /* --- Eyebrow-/Kicker-Token (Layout-Sweep Einzelbefund, dh 2026-07) ---
     Gemeinsames Mass fuer Uppercase-Eyebrow-/Kicker-Labels (Sektions- und
     Box-Kicker). Bewusst NICHT umgestellt: Hero-Fakten-Labels (.hero-fact-lab),
     Karten-Meta-Zeilen, .anchor-nav-label und das Feedback-Widget. Der
     Hero-Eyebrow bleibt als groessere Hero-Variante eigenstaendig. */
  --eyebrow-size:   0.8rem;    /* 12.8px */
  --eyebrow-weight: 700;

  /* --- Spacing & radii --- */
  --radius:     12px;
  --radius-sm:  8px;
  --radius-pill: 20px;

  /* --- Shadow system --- */
  --shadow:     0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-lg:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.25);

  /* --- Motion --- */
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-hyphens: auto; hyphens: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* Hyphens für Links global aus – URLs/Eigennamen werden sonst gebrochen,
   was unaufgeräumt wirkt (z. B. "vor-dem-studi-um/bewerbung"). */
a, a *, code, kbd, samp, .nowrap-link {
  -webkit-hyphens: manual;
  hyphens: manual;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* ---------- Semantic type tokens ----------
   Copse gibt es nur in Regular (Weight 400). Die Hierarchie kommt entsprechend
   ueber Groesse + Letter-Spacing, nicht ueber Bold. Wer einen Heading-Stil
   braucht, der traegt: Copse bei 400 + leichtem negativen tracking. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--uni-blau);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  /* Ueberschriften nicht automatisch silbentrennen (erben sonst hyphens:auto
     vom html-Default und trennen z.B. „moech-ten"/„Stu-dies" mitten im Wort,
     was auf Mobile unsauber wirkt). overflow-wrap faengt echte Ueberlaeufe
     (sehr lange Woerter wie „Wirtschaftspaedagogik") ab, ohne den Rest zu
     zerhacken. Fliesstext behaelt seine auto-Trennung. */
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 0.75em; color: var(--text); }
.lead { font-size: var(--fs-lead); line-height: 1.7; max-width: 680px; }
.muted  { color: var(--muted); }
.text-light { color: var(--text-light); }

/* Kicker / eyebrow */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--eyebrow-weight);
}

/* Stat display (Copse numerals) – Copse hat nur 400, daher Hierarchie ueber
   Groesse, nicht Weight. */
.stat-wert, .hero-fact-val, .key-fact-value {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* Badge pill */
.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  color: white;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--uni-blau);
}

/* Link default */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Utility */
.font-body { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.hidden { display: none !important; }