/* ==========================================================================
   Grundlage fuer Seiten ohne eigenen <style>-Block (Imprint, Privacy).
   Auf den uebrigen Seiten stehen diese Angaben im Seitenkopf; die
   Rechtsseiten haben keinen, deshalb liegen sie hier gemeinsam.
   Ohne die @font-face-Angaben faellt der Fliesstext auf Times zurueck.
   ========================================================================== */
@font-face{font-family:"Suisse";src:url("suisseintl-book.ttf") format("truetype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Mono";src:url("suisseintl-mono.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-feature-settings:"ss01" 1,"salt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
sup{font-size:.5em;vertical-align:super;line-height:0}
.mono{font-family:"Suisse Mono",monospace;font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase}

/* --- Kopfleiste ---------------------------------------------------------
   Auch dieses Grundlayout stand nur im <style>-Block der jeweiligen Seite.
   chrome.css justiert darauf nur noch Hoehe und Schriftgroesse; ohne diese
   Regeln steht das Menue unformatiert untereinander. --edge kommt aus dem
   Farbsystem, hier ein Rueckfallwert. */
.shell{width:100%;padding-left:var(--edge,32px);padding-right:var(--edge,32px)}
header.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  mix-blend-mode:difference;pointer-events:none;
}
header.top .shell{height:64px;display:flex;align-items:center;justify-content:space-between}
header.top .brand,header.top .nav{pointer-events:auto}
header.top .logo{display:block;height:20px;color:#fff;pointer-events:auto}
header.top .logo svg{height:100%;width:auto;display:block}
header.top .logo svg path{fill:currentColor}
header.top .nav{display:flex;gap:30px}
header.top .nav a{
  font-family:"Suisse Mono",monospace;font-size:12px;line-height:18px;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
header.top .nav a[aria-current="page"]{opacity:.48}
@media(max-width:860px){header.top .nav{gap:18px}}

/* --- rotierendes Abzeichen unten mittig --------------------------------- */
.badge{
  position:fixed;left:50%;bottom:5vh;transform:translateX(-50%);
  width:clamp(100px,8.5vw,132px);height:clamp(100px,8.5vw,132px);z-index:900;
}
.badge .disc{position:absolute;inset:0;border-radius:50%;background:var(--accent,#ff3b1d)}
.badge .ring{position:absolute;inset:0;animation:spin 18s linear infinite}
.badge .ring svg{width:100%;height:100%;display:block}
.badge .ctr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){.badge{bottom:4vh;width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){.badge .ring{animation:none}}