@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');
}
:root {
  --uni-blau:         rgb(0, 69, 125);     
  --uni-blau-80:      rgb(51, 106, 151);   
  --uni-blau-60:      rgb(102, 144, 177);  
  --uni-blau-40:      rgb(153, 181, 203);  
  --uni-blau-20:      rgb(204, 218, 229);  
  --uni-blau-light:   var(--uni-blau);     
  --uni-blau-soft:    var(--uni-blau-20);  
  --uni-blau-lighter: var(--uni-blau-20);  
  --uni-gelb:    rgb(255, 211, 0);     
  --uni-gelb-20: rgb(255, 246, 204);   
  --uni-gelb-tint: color-mix(in srgb, var(--uni-gelb-20) 45%, #ffffff);
  --uni-gruen:    rgb(151, 191, 13);   
  --uni-gruen-20: rgb(234, 242, 207);  
  --uni-rot:    rgb(230, 68, 79);      
  --uni-rot-20: rgb(250, 218, 220);    
  --uni-grau:     rgb(135, 135, 131);  
  --uni-grau-80:  rgb(159, 159, 156);  
  --uni-grau-60:  rgb(183, 183, 181);  
  --uni-grau-40:  rgb(207, 207, 206);  
  --uni-grau-20:  rgb(231, 231, 230);  
  --accent:       var(--uni-blau);
  --accent-light: var(--uni-blau-80);
  --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);
  --text:       #000000;
  --text-light: rgba(0, 0, 0, 0.72);
  --muted:      rgba(0, 0, 0, 0.55);
  --text-emphasis: rgba(0, 0, 0, 0.6);
  --bg:       #ffffff;             
  --card-bg:  #ffffff;             
  --surface-tint: color-mix(in srgb, var(--uni-blau-20) 45%, #ffffff);
  --border:   var(--uni-grau-40);  
  --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);
  --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;
  --fs-display:  clamp(2.2rem, 5vw, 3.4rem);  
  --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;   
  --fs-sm:       1rem;        
  --fs-xs:       0.9rem;      
  --fs-micro:    0.8rem;      
  --fs-subsection:  1.25rem;   
  --fw-subsection:  600;
  --eyebrow-size:   0.8rem;    
  --eyebrow-weight: 700;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-pill: 20px;
  --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);
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
}
html { scroll-behavior: smooth; -webkit-hyphens: auto; hyphens: auto; }
*, *::before, *::after { box-sizing: border-box; }
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;
}
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;
  -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 {
  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-wert, .hero-fact-val, .key-fact-value {
  font-family: var(--font-serif);
  font-weight: 400;
}
.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);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.font-body { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.hidden { display: none !important; }