/* ============================================================
   BIZARRWERK v2 — DIE FASSUNG
   Porzellan, Fase, Lack.

   Gemeinsame Tokens und Bausteine für alle Seiten;
   Seitenspezifisches steht im <style>-Block der Seite selbst.

   Drei Gesetze:
   1. Keine Textfarbe unter 4,5:1 auf der Fläche, auf der sie
      erlaubt ist (tools/check-kontrast.py rechnet nach).
   2. --zucker trägt IMMER --plate, niemals Weiß.
   3. Fase statt Radius, Flächenstufe statt Schlagschatten.
   ============================================================ */

:root{
  /* ---------- Porzellan-Ebene (Grundflächen, hell) ---------- */
  --ground:#EFE6E1;    /* Seitengrund. Warmes Porzellan, bewusst kein Weiß. */
  --ground-1:#FFFCFA;  /* Karte, Panel, Modal — die nächste Fläche liegt oben. */
  --ground-2:#E4DAD4;  /* Eingelassen: Felder, Tabellenzeilen, Serienchip. */
  --ground-3:#D9CCC5;  /* Hover / gedrückt. Trägt nur --plate und --plate-2. */

  /* ---------- Schrift auf Porzellan ---------- */
  --plate:#1B1017;     /* Tinte: Fließtext, Überschriften. */
  --plate-2:#544651;   /* Sekundärtext. */
  --steel:#5F5259;     /* Meta, Etiketten. Auf --ground-3 nicht erlaubt. */
  --steel-2:#5F5259;   /* Alias von --steel — die dritte Graustufe entfällt. */

  /* ---------- Akzent: Lack. Genau eine Akzentfamilie. ---------- */
  --oxide:#A8003F;     /* Textsicherer Lack: Links, Serien, Fokus, Primärknopf. */
  --oxide-lt:#FF9EC2;  /* Lack im dunklen Objekt. */
  --oxide-soft:rgba(168,0,63,.10); /* Chipfüllung. */
  --zucker:#FF5C9B;    /* Die Süßigkeit. Nur Füllung, nie Text auf hell. */

  /* ---------- Zustände — UI-Farben, keine Markenfarben ---------- */
  --alarm:#98380F;     /* Fehler, Pflichtfeld. Nie allein, immer mit Text. */
  --erfolg:#0F6647;    /* Bestätigung im Formular. */

  /* ---------- Das dunkle Objekt. Genau eines pro Seite. ---------- */
  --onyx:#1B1017;      /* identisch mit --plate: eine Tinte, zwei Rollen */
  --onyx-2:#2A1C25;    /* erhabene Zeile im dunklen Objekt */
  --milch:#F7F0F3;     /* Primärtext auf dunkel */
  --milch-2:#CDBEC7;   /* Sekundärtext auf dunkel */
  --milch-3:#A3929D;   /* Meta auf dunkel, Untergrenze */

  /* ---------- Linien ---------- */
  --rule:rgba(27,16,23,.10);         /* dekorative Haarlinie */
  --rule-2:rgba(27,16,23,.20);       /* Trennlinie, Tabellenregel */
  --rule-3:#7D6B76;                  /* Bedienelementgrenze (3:1 überall) */
  --rule-dark:rgba(247,240,243,.16); /* Linie innerhalb des dunklen Objekts */
  --grid:rgba(27,16,23,.05);         /* Millimeterraster */

  /* ---------- Fase. Kein border-radius im System. ---------- */
  --fase-1:6px;
  --fase-2:12px;
  --fase-3:22px;
  --schnitt-1:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  --schnitt-2:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --schnitt-3:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);

  /* ---------- Textur ---------- */
  --korn:.022;

  /* ---------- Schrift ---------- */
  --display:"Gabarito",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:860px;
}

/* ============================================================
   DUNKLER MODUS — automatisch über prefers-color-scheme.
   Bewusst ohne Schalter: ein Schalter bräuchte localStorage,
   und die Datenschutzerklärung nennt als einzigen Eintrag die
   Sprachwahl. Die Zuordnung bleibt dieselbe — nur die Ebenen
   kippen: Porzellan wird Aubergine-Schwarz, Lack wird hell,
   das dunkle Objekt hebt sich eine Stufe statt zu verschwinden.
   Auch diese Werte rechnet tools/check-kontrast.py nach.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --ground:#161014;
    --ground-1:#211821;
    --ground-2:#2B1F29;
    --ground-3:#362833;

    --plate:#F2EAEF;
    --plate-2:#C9BAC4;
    --steel:#A796A1;
    --steel-2:#A796A1;

    --oxide:#FF9EC2;                 /* textsicherer Lack auf dunkel */
    --oxide-lt:#FF9EC2;
    --oxide-soft:rgba(255,158,194,.13);
    /* --zucker bleibt #FF5C9B — Füllfarbe in beiden Modi */

    --alarm:#FF9E7A;
    --erfolg:#6FD0A8;

    --onyx:#241B22;                  /* das dunkle Objekt hebt sich eine Stufe */
    --onyx-2:#312530;
    /* --milch-Familie bleibt — sie lebt im dunklen Objekt */

    --rule:rgba(242,234,239,.10);
    --rule-2:rgba(242,234,239,.20);
    --rule-3:#8A7A85;
    --grid:rgba(242,234,239,.045);
    --korn:.05;
  }
  body::before{mix-blend-mode:screen}
  /* Zucker- und Lackfüllungen tragen im Dunkeln Tinte statt Milch */
  .btn-lack,.submit{background:var(--oxide);border-color:var(--oxide);color:#1B1017}
  .btn-lack:hover,.submit:hover:not(:disabled){background:#FFB3CF;border-color:#FFB3CF;color:#1B1017}
  ::selection{background:var(--oxide);color:#1B1017}
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}

body{
  background:var(--ground);
  color:var(--plate);
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* feines Korn — auf hellem Grund multipliziert statt aufgehellt */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity:var(--korn);mix-blend-mode:multiply;
}

/* Millimeterraster — die eine Flächenstruktur. Keine Glut mehr. */
body::after{
  content:"";position:fixed;left:0;right:0;top:0;height:92vh;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/78px 78px,
    linear-gradient(180deg,var(--grid) 1px,transparent 1px) 0 0/78px 78px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 90%);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--oxide);color:#fff}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
.dunkel :focus-visible{outline-color:var(--zucker)}

.wrap{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(24px,5vw,44px) clamp(20px,5vw,40px) 88px;
  min-height:100vh;display:flex;flex-direction:column;
}

/* ---------- Typografie ---------- */
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.1em;text-transform:uppercase}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;line-height:1.08;letter-spacing:-.012em;
  hyphens:manual;-webkit-hyphens:manual;
}
h2,h3{font-weight:600}
p{hyphens:auto;-webkit-hyphens:auto}

/* ---------- Kopf ---------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:clamp(48px,11vh,110px);
}
.brand{display:flex;align-items:center;gap:11px}
.plate-mark{width:26px;height:26px;flex:none;color:var(--plate)}
.brand-word{
  font-family:var(--display);font-weight:700;
  font-size:19px;letter-spacing:.02em;line-height:1;
}
.brand-word small{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:9.5px;letter-spacing:.18em;color:var(--steel);
  margin-top:6px;text-transform:uppercase;
}
.site-nav{display:flex;align-items:center;gap:22px}
.site-nav .navlink{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plate-2);background:none;border:none;padding:5px 0;position:relative;
  transition:color .35s var(--ease);
}
.site-nav .navlink:hover{color:var(--oxide)}
.site-nav .navlink::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--zucker);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.site-nav .navlink:hover::after{transform:scaleX(1)}

.lang{display:flex;align-items:center;gap:0}
.lang button{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--steel);background:none;border:none;padding:5px 3px;
  transition:color .3s var(--ease);
}
.lang button[aria-pressed="true"]{color:var(--plate)}
.lang button:hover{color:var(--oxide)}
.lang .sep{color:var(--steel);font-family:var(--mono);font-size:11px}

/* ---------- Abschnittsmarke: gefaster Serienchip + Titel ---------- */
.seclabel{display:flex;align-items:center;gap:13px;margin-bottom:26px;flex-wrap:wrap}
.seclabel .sn{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  color:var(--oxide);flex:none;
  background:var(--oxide-soft);
  padding:5px 10px;
  clip-path:var(--schnitt-1);
}
.seclabel .st{
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:-.005em;color:var(--plate);flex:none;
}
.seclabel .su{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);flex:none;
}
.seclabel .ln{flex:1;height:1px;background:var(--rule-2);min-width:20px}

section{padding-top:clamp(50px,10vh,88px)}

/* ---------- Knöpfe — gefast, ohne Schatten ---------- */
.btn{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plate);background:var(--ground-1);border:1px solid var(--rule-3);
  padding:13px 22px;clip-path:var(--schnitt-1);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:var(--ground-3)}
.btn-lack{background:var(--oxide);border-color:var(--oxide);color:var(--milch)}
.btn-lack:hover{background:#8C0034;border-color:#8C0034;color:var(--milch)}

/* ---------- Fuß ---------- */
.site-foot{
  margin-top:auto;padding-top:clamp(56px,11vh,104px);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);line-height:1.9;
}
.site-foot a{color:var(--plate-2);transition:color .3s var(--ease)}
.site-foot a:hover{color:var(--oxide)}
.site-foot .entity{color:var(--plate-2)}

/* ---------- Das dunkle Objekt (Band) ---------- */
.band{
  position:relative;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;
  margin-top:clamp(56px,11vh,96px);
  padding:0 clamp(22px,6vw,44px);
}
.band-inner{
  max-width:var(--wrap);margin:0 auto;
  background:var(--onyx);color:var(--milch);
  clip-path:var(--schnitt-3);
  padding:clamp(40px,8vw,72px) clamp(26px,6vw,56px);
}
.band .kicker{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oxide-lt);margin-bottom:18px;
}
.band .line{
  font-family:var(--display);
  font-size:clamp(23px,4.2vw,38px);font-weight:600;
  line-height:1.16;letter-spacing:-.014em;color:var(--milch);max-width:19ch;
  hyphens:manual;-webkit-hyphens:manual;
}
.band .sub{
  margin-top:18px;font-size:15.5px;color:var(--milch-2);line-height:1.65;max-width:46ch;
}

/* ---------- Sprachumschaltung ---------- */
.de-only{display:none}
.en-only{display:none}
html[lang='de'] .de-only{display:block}
html[lang='en'] .en-only{display:block}

/* ---------- Einblenden beim Heranscrollen ----------
   Nur wenn JavaScript läuft, wird überhaupt etwas versteckt. */
html.js [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
html.js [data-reveal].shown{opacity:1;transform:none}

@media (max-width:560px){
  .site-head{padding-bottom:52px}
  .site-nav{gap:16px}
}
@media (forced-colors:active){
  .btn,.seclabel .sn,.band-inner,.modal{clip-path:none;border:1px solid CanvasText}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;transform:none!important}
  html.js [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}