/* AURA·IO — Grundlagen: Schriften, Farben, Entwurfs-Band.
   Wird von allen Seiten geladen. Seiten-eigenes CSS steht in der jeweiligen Datei. */

/* ---------- Schriften, lokal (kein Google-CDN, DSGVO) ---------- */
/* Sora und IBM Plex Sans sind Variable Fonts: eine Datei deckt alle Schnitte ab. */
@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-var.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight:100 700;font-style:normal;font-stretch:100%;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- Farben ---------- */
:root{
  --tiefraum:#14121A;
  --papier:#FBFAF9;
  --himbeer:#A8324A;
  --himbeer-hell:#E8637C;
  --gold:#F2B073;
  --pflaume:#3A2440;
  --violett:#9B6FA6;
  --grau:#6E6871;
  --grau-hell:#9A939C;         /* Grau auf Tiefraum — 6.2:1, AA. #6E6871 kam nur auf 3.4:1 */
  --grau-dunkel:#524D54;      /* Text auf hellem Grund, AA-sicher */
  --linie-hell:#E7E2E4;
  --linie-dunkel:#2A2530;
  --band-h:0px;               /* Hoehe des Entwurfs-Bands, wird per JS gesetzt */
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{
  margin:0;background:var(--tiefraum);color:var(--papier);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;overflow-x:hidden;
}
a{color:var(--himbeer-hell);text-decoration:none;}
a:hover{color:var(--gold);}
/* Fokus-Rahmen. Gold sitzt auf Tiefraum mit 9.9:1, auf Papier aber nur mit
   1.8:1 — dort waere er praktisch unsichtbar. Auf hellem Grund darum Himbeer
   mit 6.3:1. WCAG 2.2 verlangt fuer den Fokus mindestens 3:1. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}
.light :focus-visible,
.kopf :focus-visible,
main :focus-visible{outline-color:var(--himbeer);}
.mono{font-family:"IBM Plex Mono",monospace;font-weight:400;letter-spacing:0;}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,64px);}

/* ---------- Entwurfs-Band ----------
   Steht sichtbar im HTML — auch ohne JavaScript. assets/js/site.js entfernt es,
   sobald der Kontakt-Platzhalter nirgends mehr im Dokument steht. Umgekehrt
   waere die Seite ohne JS ohne Warnung. Nichts manuell abzuschalten. */
.entwurf-band{
  position:sticky;top:0;z-index:200;
  background:var(--himbeer);color:var(--papier);
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.06em;
  text-align:center;padding:10px 16px;
  border-bottom:1px solid rgba(251,250,249,.28);
}

/* ---------- Weniger Bewegung ----------
   Gilt fuer alle Seiten, nicht nur die Startseite. Der Stern trifft keine
   Pseudo-Elemente, deshalb stehen ::before und ::after ausdruecklich dabei. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto;}
}