:root{
  /* Farbpalette nach Design Guidelines */
  /* Primär: Technisches Blau/Grün */
  --color-primary:#1a5f7a;
  --color-primary-hover:#0f4a62;
  --color-primary-light:#e6f2f7;
  
  /* Akzent: Warme Energie (Orange) */
  --color-accent:#ff8c42;
  --color-accent-hover:#ff7620;
  --color-accent-light:#fff5f0;
  
  /* Neutrale Palette */
  --color-neutral-900:#0c1224;
  --color-neutral-800:#1a1f2e;
  --color-neutral-700:#2d3142;
  --color-neutral-600:#5a6172;
  --color-neutral-500:#7a8594;
  --color-neutral-400:#a0abb5;
  --color-neutral-300:#d0d5dd;
  --color-neutral-200:#e8ecf1;
  --color-neutral-100:#f2f4f8;
  --color-neutral-50:#fafbfc;
  
  /* Semantische Tokens */
  --color-success:#2d8659;
  --color-warning:#d97c3a;
  --color-error:#c13434;
  --color-info:#0066cc;
  
  /* Light Mode Tokens */
  --bg:#fafbfc;
  --panel:#ffffff;
  --text:#0c1224;
  --text-secondary:#5a6172;
  --muted:#7a8594;
  --line:rgba(12,18,36,0.08);
  --shadow:0 12px 28px rgba(12,18,36,0.12);
  --shadow-sm:0 4px 12px rgba(12,18,36,0.08);
  --shadow-lg:0 24px 48px rgba(12,18,36,0.16);
  --accent:#1a5f7a;
  --accent-warm:#ff8c42;
  
  /* Typografische Skala (1.25x Ratio) */
  --text-xs:11px;
  --text-sm:13px;
  --text-base:16px;
  --text-lg:20px;
  --text-xl:25px;
  --text-2xl:31px;
  --text-3xl:39px;
  --text-4xl:49px;
  --text-5xl:61px;
  
  /* Spacing Skala */
  --space-2xs:4px;
  --space-xs:6px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:48px;
  --space-4xl:64px;
  
  /* Border Radius */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-full:999px;
  
  /* Zeilenhöhe */
  --line-height-tight:1.2;
  --line-height-normal:1.5;
  --line-height-relaxed:1.75;
  
  /* Letter Spacing */
  --letter-spacing-tight:-0.01em;
  --letter-spacing-normal:0em;
  --letter-spacing-wide:0.02em;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:"Inter", "Roboto", "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:var(--line-height-normal);
  font-size:var(--text-base);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;}
.frame{max-width:1200px;margin:0 auto;padding:var(--space-2xl) clamp(20px,5vw,38px) 70px;}
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:20px;
  top:12px;
  width:auto;
  height:auto;
  padding:var(--space-md) var(--space-lg);
  background:var(--text);
  color:#fff;
  border-radius:var(--radius-lg);
  z-index:20;
}
/* Buttons mit modernem Design */
.btn{
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  font-weight:600;
  font-size:var(--text-sm);
  border:2px solid var(--accent);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  transition:all 0.2s ease;
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
}
.btn:hover{
  background:var(--color-primary-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn:active{transform:translateY(0);}
.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn.primary:hover{
  background:var(--color-primary-hover);
  border-color:var(--color-primary-hover);
}
.btn.secondary{
  background:var(--color-neutral-100);
  border-color:var(--color-neutral-300);
  color:var(--text);
}
.btn.secondary:hover{
  background:var(--color-neutral-200);
}
.btn.danger{
  border-color:var(--color-error);
  color:var(--color-error);
}
.btn.danger:hover{
  background:var(--color-error);
  color:#fff;
}
.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
nav a:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
}
.section{margin-top:var(--space-4xl);}
.section-kicker{
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  font-size:var(--text-xs);
  margin-bottom:var(--space-md);
  font-weight:700;
}
.section-title{
  margin:0 0 var(--space-lg);
  font-size:var(--text-3xl);
  letter-spacing:var(--letter-spacing-tight);
  font-weight:700;
}
.grid{display:grid;gap:var(--space-lg);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
/* Cards mit modernem Design */
.card, .panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:var(--space-xl);
  box-shadow:var(--shadow-sm);
  transition:all 0.3s ease;
}
.card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.card h3, .panel h3 {
  margin:0 0 var(--space-md);
  font-size:var(--text-lg);
  font-weight:700;
}
.card p, .panel p {
  margin:0;
  color:var(--text-secondary);
  line-height:var(--line-height-relaxed);
  font-size:var(--text-sm);
}
/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-lg);
  background:var(--accent);
  color:#fff;
  font-weight:700;
  margin-bottom:var(--space-md);
  box-shadow:var(--shadow-sm);
  font-size:var(--text-sm);
}
.badge.success{background:var(--color-success);}
.badge.warning{background:var(--color-warning);}
.badge.error{background:var(--color-error);}
/* Forms */
.form-grid{display:grid;gap:var(--space-lg);}
.input-field{display:flex;flex-direction:column;gap:var(--space-sm);}
.input-field label{font-weight:600;color:var(--text);font-size:var(--text-sm);}
.input-field input,.input-field textarea,.input-field select{
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  font-size:var(--text-sm);
  font-family:inherit;
  background:var(--panel);
  color:var(--text);
  transition:all 0.2s ease;
}
.input-field input:focus,.input-field textarea:focus,.input-field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--color-primary-light);
}
.input-field input::placeholder{
  color:var(--text-secondary);
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* Headings mit moderner Skalierung */
h1{font-size:var(--text-5xl);font-weight:700;line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);margin:var(--space-lg) 0;}
h2{font-size:var(--text-4xl);font-weight:700;line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);margin:var(--space-xl) 0;}
h3{font-size:var(--text-2xl);font-weight:700;line-height:var(--line-height-normal);margin:var(--space-lg) 0;}
h4{font-size:var(--text-xl);font-weight:700;margin:var(--space-lg) 0;}
h5{font-size:var(--text-lg);font-weight:600;margin:var(--space-md) 0;}
h6{font-size:var(--text-base);font-weight:600;margin:var(--space-md) 0;}
/* Utility Klassen */
.text-sm{font-size:var(--text-sm);}
.text-base{font-size:var(--text-base);}
.text-lg{font-size:var(--text-lg);}
.text-muted{color:var(--text-secondary);}
.text-accent{color:var(--accent);}
.gap-sm{gap:var(--space-sm);}
.gap-md{gap:var(--space-md);}
.gap-lg{gap:var(--space-lg);}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
@media(max-width:640px){
  header{flex-direction:column;align-items:flex-start;gap:var(--space-md);}
  nav a{margin-left:0;margin-right:var(--space-lg);}
  .frame{padding:var(--space-lg) var(--space-md) 60px;}
  h1{font-size:var(--text-3xl);}
  h2{font-size:var(--text-2xl);}
  .section-title{font-size:var(--text-2xl);}
}