/* ==========================================================================
   base.css — Fundament aller Seiten von schemainda.com
   Wird von index.html, impressum.html, kontakt.html und datenschutz.html
   geladen. Die Textseiten laden danach zusätzlich doc.css.

   Regel: was auf mehr als einer Seite gleich aussehen soll, steht hier —
   nicht im <style>-Block der einzelnen Seite. Vorher trug jede Seite ihre
   eigene Vollkopie, wodurch Korrekturen jeweils nur eine von vier Dateien
   erreichten (Footer-Regeln fehlten, der display-Fix und der Webfont kamen
   nie bei den Unterseiten an).
   ========================================================================== */

@font-face{
  font-family:"InterVar";
  src:url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0B0F1A; --bg-soft:#121828; --bg-card:#141b2e;
  --line:#1f2940; --line-soft:#1a2236;
  --text:#E6EAF2; --muted:#94a0bd; --faint:#5e6b8a;
  --cyan:#22D3EE; --indigo:#6366F1; --violet:#A855F7; --cyan-soft:#67E8F9;
  --grad:linear-gradient(120deg,#22D3EE 0%,#6366F1 50%,#A855F7 100%);
  --radius:18px;
  --maxw:980px;
  --ease:cubic-bezier(.4,0,.2,1);
  font-synthesis:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"InterVar","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-optical-sizing:auto;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ambient glow background */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(620px 480px at 18% -8%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(680px 520px at 88% 4%, rgba(168,85,247,.12), transparent 62%),
    radial-gradient(700px 600px at 50% 110%, rgba(99,102,241,.09), transparent 62%);
}

a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(10px);
  background:rgba(11,15,26,.6);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:.2px}
.brand img{width:30px;height:30px}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .tld{color:var(--faint);font-weight:500}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:.78rem}
.lang button{
  background:none;border:none;color:var(--muted);cursor:pointer;
  padding:4px 11px;border-radius:999px;font:inherit;font-weight:600;letter-spacing:.4px;transition:.18s;
}
.lang button.active{background:var(--grad);color:#0B0F1A}

h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- footer ---------- */
footer{padding:46px 0 60px;text-align:center;border-top:1px solid var(--line-soft);margin-top:34px}
.foot-meta{margin-top:20px;color:var(--faint);font-size:.82rem;line-height:1.9}
.foot-meta .sep{opacity:.4;margin:0 8px}
.foot-meta a{color:var(--muted);text-decoration:none}
.foot-meta a:hover{color:var(--cyan-soft)}

/* ---------- Sprachumschalter ----------
   `revert`, nicht `inline` oder `block`: die Regel trifft JEDES englische
   Element. Ein fester Wert zwingt h2/p in die falsche Kategorie — `inline`
   ließ Überschriften am Fließtext kleben, `block` warf die Footer-Links
   untereinander. `revert` gibt jedem Element seinen eigenen Default zurück. */
/* Die :root-Vorsilbe ist kein Zierrat, sondern trägt die Regel.
   Ausblenden muss JEDE Layoutregel schlagen, die display setzt — sonst
   entscheidet die Ladereihenfolge, und die Komponentenregeln stehen
   zwangsläufig in späteren Dateien. Ohne :root hat diese Regel dieselbe
   Spezifität wie .eyebrow (0,1,0) und verlor gegen sie: die englischen
   Eyebrows standen in der deutschen Ansicht sichtbar da.
   Wer hier kürzt, holt sich genau diesen Fehler zurück. */
:root [data-i18n-en]{display:none}
html[lang="en"] [data-i18n-de]{display:none}
html[lang="en"] [data-i18n-en]{display:revert}
html[lang="en"] [data-i18n-en].block{display:block}
/* .eyebrow ist inline-flex (führender Strich + gap) und die Regel darüber
   schlägt die Klasse — deshalb mit höherer Spezifität wiederholen. */
html[lang="en"] .eyebrow[data-i18n-en]{display:inline-flex}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}