/*
 * metallic.css — Farbwelt aus dem Silber-W (assets/img/logo/wietzke-ai-logo-silber-w.png), 09.09.2026.
 * Aus 32 000 opaken Pixeln gemessen: kühles Grau mit leichtem Blaustich, sechs Helligkeitsstufen
 * (Anteile im Logo: Tiefschwarz 12 %, Schatten 29 %, Dunkelgrau 19 %, Mittel 12 %, Hell 19 %, Licht 8 %).
 * Verlauf im Logo von oben nach unten: dunkle Oberkante, hellste Zone knapp unter der Mitte, dunkler Bereich, heller Saum unten.
 */
:root {
  --metal-100: #e6e8ea;   /* Glanzlicht (98. Perzentil) */
  --metal-200: #d9dcde;   /* Licht */
  --metal-300: #c2c6c8;   /* Hell */
  --metal-500: #96999c;   /* Mittel */
  --metal-700: #606568;   /* Dunkelgrau */
  --metal-800: #373c3e;   /* Schatten */
  --metal-900: #1b2022;   /* Tiefschwarz */
  --metal-950: #121517;   /* dunkelste Kante */

  /* Gebürstetes Silber: Lichtband knapp unter der Mitte, dunkle Ober- und Unterkante wie im W */
  --metal-silver: linear-gradient(178deg,
    var(--metal-500) 0%, var(--metal-300) 12%, var(--metal-200) 30%, var(--metal-100) 46%,
    var(--metal-300) 62%, var(--metal-500) 80%, var(--metal-700) 92%, var(--metal-300) 100%);
  /* Schwarzes Metall: Anthrazit mit schmalem Licht oben */
  --metal-black: linear-gradient(178deg,
    var(--metal-700) 0%, var(--metal-800) 10%, var(--metal-900) 45%, var(--metal-950) 80%, var(--metal-800) 100%);
  /* feine Bürstung (sehr schwach, waagerecht) */
  --metal-brush: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.04) 1px 2px);
}

/* Buttons im Stil des W. Nutzung: zusätzlich zur vorhandenen Button-Klasse „btn--silver“ oder „btn--black“ setzen. */
.btn--silver, .btn--black {
  position: relative;
  background-blend-mode: overlay, normal;
  border: 1px solid var(--metal-700);
  text-shadow: none;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--silver {
  background: var(--metal-brush), var(--metal-silver);
  color: var(--metal-900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18);
}
.btn--black {
  background: var(--metal-brush), var(--metal-black);
  color: var(--metal-200);
  border-color: var(--metal-500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.28);
}
.btn--silver:hover { background: var(--metal-brush), var(--metal-silver); color: var(--metal-900); filter: brightness(1.08); transform: translateY(-1px); }
.btn--black:hover { background: var(--metal-brush), var(--metal-black); color: var(--metal-200); filter: brightness(1.08); transform: translateY(-1px); }
.btn--silver:active, .btn--black:active { filter: brightness(.94); transform: translateY(0); }
.btn--silver:focus-visible, .btn--black:focus-visible { outline: 2px solid var(--metal-500); outline-offset: 3px; }

/* Chrom wie das W: dunkler Grund mit Silberreflexen, weiße Schrift (Rob, 09.09.2026).
   Variante A: echte Oberfläche des W als Textur (assets/img/ui/chrome-w-dark.jpg, aus dem linken Schenkel geschnitten).
   Variante B: reines CSS, diagonaler Silberreflex auf Schwarz plus heller Saum unten wie im W. */
.btn--chrome-tex, .btn--chrome {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.8), 0 0 1px rgba(0,0,0,1);   /* dunkler Schein: Umlautpunkte auch auf dem Silberreflex lesbar */
  border: 1px solid var(--metal-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.35);
  transition: filter .18s ease, transform .18s ease;
}
.btn--chrome-tex { background: url("../img/ui/chrome-w-dark.jpg") center / cover no-repeat; }
.btn--chrome {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.66) 66%, rgba(0,0,0,0) 84%),   /* dunkles Band in Schrifthöhe: Text steht immer auf Schwarz */
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,.25) 60%, rgba(255,255,255,.22) 100%),
    linear-gradient(108deg, #0f1214 0%, #1c2123 20%, #3a3f42 30%, #b4b8bb 40%, #c9cdd0 44%, #8a8f92 50%, #23282a 60%, #0f1214 72%, #34393c 86%, #a9adb0 95%, #5a5f62 100%);
}
.btn--chrome-tex:hover, .btn--chrome:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn--chrome-tex:active, .btn--chrome:active { filter: brightness(.95); transform: translateY(0); }
.btn--chrome-tex:focus-visible, .btn--chrome:focus-visible { outline: 2px solid var(--metal-500); outline-offset: 3px; }