/* VHOR:TANE, die eine Gestaltung fuer alle Seiten.
   Vorher hatte jede Seite ihre eigene Farbkopie (fuenf Stueck, leicht verschieden). Hier steht jede
   Farbe, Schrift und Linie genau einmal; Seiten setzen nur noch Aufbau, keine eigenen Werte.
   Schriften liegen auf dem eigenen Server (OFL), nichts wird von Google geladen. */

@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(michroma-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(michroma-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(saira-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(saira-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* Flaechen: fast schwarz, in drei Tiefen */
  --schwarz: #050507;
  --tief: #0a0a0e;
  --flaeche: #0f0f14;
  --flaeche-hoch: #15151c;
  /* Linien: duenn, kaltes Silber */
  --linie: rgba(214, 219, 228, .12);
  --linie-mittel: rgba(214, 219, 228, .24);
  --linie-stark: rgba(214, 219, 228, .5);
  /* Text */
  --text: #e8eaef;
  --text-leise: #9da1ad;
  --text-still: #6b6f7a;
  /* Gebuerstetes Metall wie der Ring */
  --silber: linear-gradient(180deg, #fbfbfc 0%, #c9ccd3 38%, #8a8e97 52%, #b8bbc3 64%, #eceef1 100%);
  --silber-flach: #c9ccd3;
  /* Der eine Akzent. Sparsam: ein Punkt, eine Kante, nie eine Flaeche. Hier tauschen, sonst nirgends. */
  --akzent: #c3142d;
  --akzent-glut: rgba(195, 20, 45, .45);
  --akzent-hauch: rgba(195, 20, 45, .12);

  --kopf: 'Michroma', 'Eurostile', 'Square 721', system-ui, sans-serif;
  --schrift: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --breite: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --schnitt: 22px;            /* abgeschnittene Ecke an Rahmen und Knoepfen */
  --ruhig: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--schwarz); color: var(--text);
  font-family: var(--schrift); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: var(--akzent); color: #fff; }
:focus-visible { outline: 1px solid var(--silber-flach); outline-offset: 4px; }

/* Korn und Nebel liegen fest hinter allem. Das Korn ist ein SVG-Rauschen, keine Bilddatei. */
.nebel { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 15% 10%, rgba(120, 128, 150, .10), transparent 60%),
    radial-gradient(50vmax 50vmax at 90% 60%, rgba(90, 96, 115, .08), transparent 60%),
    radial-gradient(40vmax 30vmax at 50% 110%, var(--akzent-hauch), transparent 70%),
    var(--schwarz); }
.korn { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: korn 1.2s steps(6) infinite; }
@keyframes korn { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .korn { animation: none; } }

/* Partikel-Hintergrund (hintergrund.js) liegt ueber Nebel und Korn, unter allem Inhalt */
.raster { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Die Versammlung der Vhor schimmert ganz blass hinter allem durch (Nico, 17.10.) und atmet sehr langsam */
.moenche { position: fixed; inset: -4%; z-index: -2; pointer-events: none; background: url(moenche.webp) center 62% / cover no-repeat; opacity: .14; filter: contrast(1.25) brightness(1.15);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 30%, transparent 100%);
  animation: atmen 70s ease-in-out infinite alternate; }
@keyframes atmen { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .moenche { animation: none; } }

/* Nebelschwaden: zwei nahtlose Texturen treiben verschieden schnell ueber den Partikeln. Bewegt wird nur
   transform (laeuft auf der Grafikkarte). Kein mix-blend-mode und keine Uebergroesse: beides halbierte die Bildrate. */
.schwaden-huelle { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.schwaden { position: absolute; left: 0; top: 0; width: calc(100vw + var(--k)); height: 100%;
  background-size: var(--k) var(--k); animation: treiben var(--dauer) linear infinite; will-change: transform; }
.s1 { opacity: .11; } .s1 .schwaden { --k: 1400px; --dauer: 150s; background-image: url(nebel-1.webp); }
.s2 { opacity: .08; } .s2 .schwaden { --k: 1900px; --dauer: 230s; background-image: url(nebel-2.webp); animation-direction: reverse; }
@keyframes treiben { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--k) * -1), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .schwaden { animation: none; } }
.kino-laeuft .schwaden, .kino-laeuft .moenche, .kino-laeuft .korn { animation-play-state: paused; }
/* Handy: eine Schicht reicht fuer den Eindruck und spart die Haelfte der Arbeit */
@media (max-width: 760px), (pointer: coarse) { .s2 { display: none; } .s1 { opacity: .13; } }

/* Breite Bildschirme (21:9 und groesser): mehr Breite und etwas groessere Schrift statt einer schmalen Spalte */
@media (min-width: 1800px) { :root { --breite: 1560px; } body { font-size: 18px; } }
@media (min-width: 2600px) { :root { --breite: 1900px; } body { font-size: 20px; } }

/* Schrift */
.kopf, h1, h2, h3 { font-family: var(--kopf); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; line-height: 1.25; margin: 0; }
h2 { font-size: clamp(20px, 3.2vw, 34px); }
h3 { font-size: clamp(14px, 1.5vw, 16px); letter-spacing: .18em; }
.metall { background: var(--silber); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marke { font-family: var(--kopf); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--text-still); }
.marke b { color: var(--akzent); font-weight: 400; }
.leise { color: var(--text-leise); }

/* Knoepfe: eckig geschnitten, Metall-Kante */
.knopf { --s: 12px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px; font-family: var(--kopf); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; color: var(--text); background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  clip-path: polygon(var(--s) 0, 100% 0, 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, 0 100%, 0 var(--s));
  transition: color .3s var(--ruhig), transform .3s var(--ruhig); }
.knopf::before { content: ""; position: absolute; inset: 0; background: var(--linie-stark); z-index: -2;
  clip-path: inherit; }
.knopf::after { content: ""; position: absolute; inset: 1px; background: var(--tief); z-index: -1;
  clip-path: polygon(calc(var(--s) - .5px) 0, 100% 0, 100% calc(100% - var(--s) + .5px), calc(100% - var(--s) + .5px) 100%, 0 100%, 0 calc(var(--s) - .5px));
  transition: background .3s var(--ruhig); }
.knopf:hover { transform: translateY(-1px); }
.knopf:hover::after { background: var(--flaeche-hoch); }
.knopf.voll { color: #0a0a0d; }
.knopf.voll::before { background: var(--silber); }
.knopf.voll::after { background: var(--silber); }
.knopf.voll:hover::after { background: linear-gradient(180deg, #fff, #d5d8de 45%, #a2a6ae 55%, #f2f3f5); }
.knopf .punkt { width: 6px; height: 6px; background: var(--akzent); box-shadow: 0 0 10px var(--akzent-glut); }

/* Rahmen mit abgeschnittenen Ecken und Metall-Haarlinie */
.rahmen { --s: var(--schnitt); position: relative; background: var(--linie-mittel); padding: 1px;
  clip-path: polygon(var(--s) 0, 100% 0, 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, 0 100%, 0 var(--s)); }
.rahmen > .innen { background: var(--tief); height: 100%;
  clip-path: polygon(calc(var(--s) - .5px) 0, 100% 0, 100% calc(100% - var(--s) + .5px), calc(100% - var(--s) + .5px) 100%, 0 100%, 0 calc(var(--s) - .5px)); }

/* Erscheinen beim Scrollen; ohne Skript oder mit "weniger Bewegung" ist alles sofort da */
.js .auftauchen { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ruhig), transform 1s var(--ruhig); }
.js .auftauchen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .auftauchen { opacity: 1; transform: none; transition: none; } }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }