@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/Inter-Light.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/Inter-LightItalic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/Inter-Medium.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/Inter-MediumItalic.woff2") format("woff2")}

:root{
  --ink:#000000;
  --red:#ff0000;

  --fs:15px;
  --lh:1.222;

  --m-outer:1.474em;
  --m-inner:4.401em;

  --y-name:1.556em;
  --y-nav:0.950em;
  --y-bottom:2.600em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:#fff;color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs);
  font-weight:300;
  line-height:var(--lh);
  font-feature-settings:"cv05" 1;
}

a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* ---------- Kopf: Name und Menue ---------- */

.name{margin:var(--y-name) 0 0 var(--m-outer)}
.nav{display:flex;flex-wrap:wrap;margin:var(--y-nav) var(--m-inner) 0;gap:0.55em 1.6em}
.nav__spacer{margin-left:auto}

/* ---------- Touch und schmale Breiten ---------- */

@media (hover:none),(pointer:coarse),(max-width:820px){
  :root{
    --fs:15px;--m-outer:1.25rem;--m-inner:1.25rem;
    --y-name:1.490em;
    --y-nav:0.780em;
  }
  .nav{gap:0.5em 1.2em;flex-wrap:nowrap}
}