/* =====================================================================
   zock.es — A.1.3.1, die Stahlfassade.

   Alles hier ist gerechnet, nicht gemalt: kein Bild, keine Fremddatei.
   Stahl entsteht aus uebereinandergelegten Verlaeufen, Tiefe aus Kanten
   (eine helle Linie oben, eine dunkle unten), und das Glaenzen kommt aus
   zwei Variablen, die das Skript auf die Mausposition setzt.

   DIE EINE REGEL, an der der ganze Look haengt: das Licht kommt von OBEN.
   Erhabenes ist oben hell und wirft nach unten Schatten, Vertieftes genau
   andersherum. Wer hier etwas ergaenzt und die Reihenfolge dreht, macht
   aus Stahl sofort Plastik.
   ===================================================================== */

:root {
  /* Lichtquelle. Das Skript schiebt sie der Maus hinterher, traege.
     Ohne Skript bleibt sie hier stehen, und alles sieht trotzdem
     richtig aus. */
  --lx: 50%;
  --ly: 26%;

  --grund:        #0b0d12;
  --stahl-tief:   #1b1f26;
  --stahl:        #2b313b;
  --stahl-hell:   #464e5c;
  --kante-hell:   rgba(226, 234, 246, 0.55);
  --kante-dunkel: rgba(0, 0, 0, 0.78);
  --messing:      #d8a33c;
  --text-leise:   #7d8496;

  /* ===================================================================
     DIE RIFFELUNG — die Oberflaechenstruktur des Blechs.

     Ein Rippenprofil: heller Grat, Flanke, Tal, dunkelste Kerbe, wieder
     Flanke. Fuenf Stufen auf 6 px, und weil sie in dieser Reihenfolge
     stehen, liest das Auge gewoelbte Rippen statt gestreifter Farbe.

     ⚠️ Sie steht ABSICHTLICH nur hier. Jede Blechflaeche holt sie sich als
     var(--riffel); wer die Struktur aendern will, aendert diese eine Stelle
     und nicht fuenf, die dann auseinanderlaufen.
     =================================================================== */
  --riffel:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.085) 0 1px,     /* Grat, faengt Licht */
      rgba(255, 255, 255, 0.028) 1px 2px,   /* Flanke */
      rgba(0, 0, 0, 0.05)        2px 4px,   /* Tal */
      rgba(0, 0, 0, 0.125)       4px 5px,   /* Kerbe */
      rgba(0, 0, 0, 0.045)       5px 6px);

  /* Die Wand dahinter traegt ein groeberes Profil — sonst verschwimmt sie
     mit den Schildern davor zu einer einzigen Flaeche. */
  --riffel-grob:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.055) 0 1px,
      rgba(255, 255, 255, 0.018) 1px 3px,
      rgba(0, 0, 0, 0.08)        3px 8px,
      rgba(0, 0, 0, 0.16)        8px 9px,
      rgba(0, 0, 0, 0.06)        9px 11px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

.halle {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--grund);
  background-image:
    /* der Lichtkegel, der mit der Maus wandert */
    radial-gradient(34% 30% at var(--lx) var(--ly),
      rgba(158, 178, 210, 0.07), rgba(158, 178, 210, 0.02) 42%, transparent 72%),
    /* waagerechte Plattenstoesse der Wand: dunkle Fuge, darunter Lichtkante */
    repeating-linear-gradient(180deg,
      transparent 0 236px,
      rgba(0, 0, 0, 0.55) 236px 239px,
      rgba(255, 255, 255, 0.035) 239px 240px,
      transparent 240px 480px),
    /* senkrechte Stossfugen, weit auseinander */
    repeating-linear-gradient(90deg,
      transparent 0 318px,
      rgba(0, 0, 0, 0.45) 318px 320px,
      rgba(255, 255, 255, 0.028) 320px 321px,
      transparent 321px 640px),
    /* die Wand ist geriffelt wie alles hier, nur groeber */
    var(--riffel-grob),
    linear-gradient(178deg, #1a1f27 0%, #141820 44%, #0d1016 78%, #090b11 100%);
  color: #c9d1de;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Waagerecht wird nichts abgeschnitten, senkrecht darf bei niedrigen
     Fenstern gescrollt werden — sonst faellt bei 1440x700 die untere
     Reihe unsichtbar aus dem Bild. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Der Formenvorrat liegt im Dokument, soll aber nichts einnehmen. */
.formen { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Die Front nimmt das GANZE Bild: der Besucher steht direkt vor der
   Maschine, nicht vor einem Kaertchen auf dunklem Grund. Die obere Fuge
   klebt oben, die untere unten, dazwischen dehnt sich das Namensschild
   ueber alles, was uebrig ist. */
.front {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(10px, 1.6vh, 20px);
  position: relative;
  z-index: 1;
}

.mitte {
  flex: 1;
  width: min(100% - clamp(20px, 2.6vw, 52px), 1720px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 20px);
  padding-block: clamp(8px, 1.4vh, 18px);
  min-height: 0;
}

/* ---------------------------------------------------------------------
   Plattenfugen mit Nietenreihe. Eine Fuge ist: dunkler Spalt, darunter
   eine Lichtkante — so liest das Auge zwei Bleche nebeneinander.
   --------------------------------------------------------------------- */

.fuge {
  height: 30px;
  position: relative;
  /* ein Stossblech, das oben Licht faengt und unten einen Spalt zeigt */
  background-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.7) 0 3px,
      rgba(255, 255, 255, 0.10) 3px 4px,
      rgba(255, 255, 255, 0.03) 4px 40%,
      rgba(0, 0, 0, 0.28) 100%);
}

.nieten {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 16px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 46px 16px;
  background-image:
    radial-gradient(circle at 50% 66%, rgba(0, 0, 0, 0.7) 0 24%, transparent 25%),
    radial-gradient(circle at 45% 38%, #cbd4e2 0 10%, #949dac 11% 21%, #5a616e 22% 30%, transparent 31%);
  opacity: 0.92;
}

/* ---------------------------------------------------------------------
   Das Namensschild
   --------------------------------------------------------------------- */

.schild {
  position: relative;
  /* dehnt sich ueber die ganze freie Hoehe — der Name soll das Bild
     ausfuellen, nicht darin schwimmen */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
  /* nichts verlaesst die Platte — Glanz und Naht enden an der Kante */
  overflow: hidden;
  padding: clamp(24px, 4vh, 54px) clamp(30px, 4vw, 78px);
  background-image:
    var(--riffel),
    /* Gebrauchsspuren: grossflaechige, unregelmaessige Aufhellungen und
       Anlaufstellen. Eine vollkommen gleichmaessige Platte sieht immer nach
       Vektorgrafik aus, egal wie gut der Verlauf ist. */
    radial-gradient(38% 60% at 17% 28%, rgba(255, 255, 255, 0.035), transparent 70%),
    radial-gradient(26% 44% at 73% 74%, rgba(0, 0, 0, 0.14), transparent 72%),
    radial-gradient(44% 30% at 88% 22%, rgba(255, 255, 255, 0.025), transparent 68%),
    radial-gradient(20% 34% at 41% 88%, rgba(0, 0, 0, 0.12), transparent 70%),
    /* ... und der Koerper der Platte */
    linear-gradient(176deg,
      #4a5260 0%, #39404c 22%, #2b3039 52%, #313742 76%, #434b58 100%);
  box-shadow:
    inset 0 1px 0 var(--kante-hell),          /* Oberkante faengt Licht */
    inset 0 -2px 0 var(--kante-dunkel),       /* Unterkante liegt im Dunkeln */
    inset 2px 0 3px rgba(0, 0, 0, 0.35),
    inset -2px 0 3px rgba(0, 0, 0, 0.35),
    0 26px 44px rgba(0, 0, 0, 0.66),          /* das Schild steht vor der Wand */
    0 2px 0 rgba(0, 0, 0, 0.9);
}

/* Bewusst OHNE position:relative — damit sich Glanz und Schweissnaht
   darunter auf die ganze PLATTE beziehen und nicht auf den Textblock. */
.schild-flaeche {
  position: static;
  /* Der Name wird nicht auf die ganze Platte zentriert, sondern auf den
     Teil OBERHALB der Schweissnaht — sonst sitzt er optisch zu tief. */
  margin-bottom: clamp(44px, 11vh, 130px);
}

/* Der wandernde Glanz auf dem Blech. Liegt ueber der Flaeche, faengt
   aber keine Klicks.

   ⚠️ KLEIN UND LEISE. Alle vier Stellen, die --lx/--ly benutzen (Wand,
   Platte, die Lage ueber allem, die Buchstaben), sind am 15.09. auf seine
   Ansage deutlich zurueckgenommen worden: der Schein war zu stark und zu
   weitlaeufig und hat aus dem Blech eine beleuchtete Buehne gemacht. Ein
   Glanzpunkt soll ANDEUTEN, dass da Metall ist — nicht die Seite ausleuchten.
   Wer hier eine Stelle aufdreht, dreht die anderen drei mit auf, sonst
   laufen sie auseinander. */
.glanz {
  position: absolute;
  /* NICHT ueber den Plattenrand hinaus: seit der Glanz sich auf die ganze
     Platte bezieht, waeren -6 % rund 80 px Ueberbreite — die Seite bekam
     davon eine waagerechte Scrollleiste. */
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(22% 62% at var(--lx) var(--ly),
    rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022) 34%, transparent 66%);
  mix-blend-mode: screen;
}

.marke {
  position: relative;
  text-align: center;
  font-family: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-weight: 900;
  /* Der Name waechst mit BEIDEN Richtungen des Fensters. Nur nach der
     Breite zu rechnen laesst ihn auf einem flachen Fenster aus der Platte
     wachsen, nur nach der Hoehe auf einem schmalen aus dem Bild. */
  font-size: clamp(2.6rem, min(17.5vw, 34vh), 19rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

/* =====================================================================
   DIE BUCHSTABEN

   Drei Lagen uebereinander, jede mit einer eigenen Aufgabe:

     1. der KOERPER — der Verlauf auf der Schriftflaeche plus ein Stapel
        harter Schatten, der die Flanke in die Tiefe zieht. Das ist die
        eigentliche Erhebung: zehn Schatten in immer dunklerem Stahl,
        gestaffelt in em, damit die Tiefe mit der Schriftgroesse waechst
        und nicht bei 250 px zu einem Strich zusammenfaellt.
     2. die KANTE — eine hauchduenne Lichtlinie an der Oberkante.
     3. der GLANZ — ein heller Fleck, der mit der Maus ueber die
        Buchstaben wandert.

   Lage 2 und 3 sind Zwillinge aus data-text: derselbe Text noch einmal,
   deckungsgleich darueber, nur anders eingefaerbt.

   Der Verlauf ist ein CHROM-HORIZONT und kein Hell-nach-Dunkel: oben der
   helle Himmel, in der Mitte ein harter Umschlag, darunter der warme,
   dunkle Boden, ganz unten wieder Aufhellung vom Bodenlicht. Genau dieser
   Umschlag macht den Unterschied zwischen Metall und Kunststoff — ein
   weicher Verlauf sieht IMMER nach Plastik aus, egal wie fein er ist.
   ===================================================================== */

/* ⚠️ WICHTIG, sonst ist alle Muehe umsonst: `text-shadow` wird UEBER dem
   Hintergrund gezeichnet, nicht darunter. Wer den Schattenstapel und den
   Flaechenverlauf auf DASSELBE Element legt, sieht die Flaeche nie — der
   erste Schatten deckt sie zu, und die Buchstaben werden stumpf und flach.
   Darum traegt der Grundkoerper NUR die Tiefe, und die Flaeche liegt als
   eigene Ebene darueber. */
.wort, .endung {
  position: relative;
  display: inline-block;
}
.wort   { color: #5a6270; }
.endung { color: #8c6d28; }

.wort::after {
  background-image:
    /* KANTE — zuerst genannt heisst obenauf: eine harte Lichtlinie an der
       Oberkante der Flaeche, danach sofort nichts mehr. */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0 1.6%,
      rgba(255, 255, 255, 0.42) 1.6% 3.4%,
      rgba(255, 255, 255, 0) 6%),
    /* FLAECHE — der Chrom-Horizont */
    linear-gradient(180deg,
    #ffffff 0%,
    #e9f2fd 9%,
    #c2d1e2 23%,
    #93a5bb 36%,
    #5e7089 46%,
    #35475c 48.8%,
    #16202b 49.8%,        /* Horizont */
    /* Der Boden spiegelt warm herein, aber nur ANGEDEUTET: zu viel Gold,
       und das Silber bekommt einen Stich — dann verschwimmt der Unterschied
       zwischen dem Stahl von "zock" und dem Messing von ".es", und genau
       der ist die halbe Aussage. */
    #5c584e 50.8%,
    #8e8b81 55%,
    #ddd9cb 62%,
    #cfd9e6 72%,
    #9aa8ba 84%,
    #dde6f2 94%,
    #8f9aa9 100%);
}

.wort {
  text-shadow:
    0 0.007em 0 #78818f,
    0 0.014em 0 #69717f,
    0 0.021em 0 #5a6270,
    0 0.028em 0 #4c5461,
    0 0.035em 0 #3f4653,
    0 0.042em 0 #333946,
    0 0.049em 0 #282d38,
    0 0.056em 0 #1e222b,
    0 0.063em 0 #161a21,
    0 0.070em 0 #0f1218,
    0 0.086em 0.02em rgba(0, 0, 0, 0.95),
    0 0.14em 0.16em rgba(0, 0, 0, 0.7),
    0 0.26em 0.34em rgba(0, 0, 0, 0.55);
}

.endung::after {
  background-image:
    linear-gradient(180deg,
      rgba(255, 252, 240, 0.95) 0 1.6%,
      rgba(255, 246, 214, 0.42) 1.6% 3.4%,
      rgba(255, 255, 255, 0) 6%),
    linear-gradient(180deg,
    #fffdf6 0%,
    #fdeec2 9%,
    #f0d08a 23%,
    #d3aa55 36%,
    #a37d2b 46%,
    #6a4d14 48.8%,
    #2c1f08 49.8%,
    #8c6a1e 50.8%,
    #b98f31 55%,
    #f6e6b4 62%,
    #e7c878 72%,
    #bd9439 84%,
    #ffeec4 94%,
    #a8812c 100%);
}

.endung {
  text-shadow:
    0 0.007em 0 #9c7a2e,
    0 0.014em 0 #8c6d28,
    0 0.021em 0 #7b5f23,
    0 0.028em 0 #6a521e,
    0 0.035em 0 #594419,
    0 0.042em 0 #493715,
    0 0.049em 0 #392b10,
    0 0.056em 0 #2b200c,
    0 0.063em 0 #1e1608,
    0 0.070em 0 #130e05,
    0 0.086em 0.02em rgba(0, 0, 0, 0.95),
    0 0.14em 0.16em rgba(0, 0, 0, 0.7),
    0 0.26em 0.34em rgba(0, 0, 0, 0.55);
}

/* --- die beiden Zwillingsebenen --- */

.wort::before, .endung::before,
.wort::after,  .endung::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  /* ⚠️ Und genau derselbe Stolperstein noch einmal: `text-shadow` VERERBT
     sich auf die Zwillinge. Ohne dieses `none` traegt jede Ebene den
     Tiefenstapel mit und deckt ihre eigene Flaeche wieder zu. */
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reihenfolge von unten nach oben: Tiefe (Grundkoerper) — Flaeche mit
   Kante — Glanz. Ohne die z-index-Angaben laege der Glanz UNTER der
   Flaeche und waere nicht zu sehen. */
.wort::after,  .endung::after  { z-index: 1; }
.wort::before, .endung::before { z-index: 2; }

/* GLANZ: wandert mit der Maus ueber die Buchstaben. Dieselben zwei
   Variablen wie das Licht auf der Platte — der Glanz auf der Schrift und
   der auf dem Blech laufen dadurch zwangslaeufig synchron. */
.wort::before, .endung::before {
  background-image: radial-gradient(17% 85% at var(--lx) var(--ly),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.11) 32%,
    rgba(255, 255, 255, 0) 60%);
}

/* Schweissnaht. Zwei Wulstreihen mit UNTERSCHIEDLICHER Teilung uebereinander
   (17 und 23 Pixel) — dadurch wiederholt sich das Muster erst nach einer
   langen Strecke und sieht von Hand gezogen aus statt gestanzt. Eine einzige
   saubere Reihe liest sich sofort als Reissverschluss. */
.naht {
  /* Eine Naht ist ein Bauteil der Platte, kein Unterstrich unter dem Text:
     sie sitzt darum an einer festen Stelle der PLATTE und wandert nicht mit
     der Schriftgroesse mit. Von Kante zu Kante, wie es sich gehoert. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 19%;
  height: 15px;
  border-radius: 8px / 7px;
  background-image:
    repeating-radial-gradient(ellipse 9px 8px at 8.5px 42%,
      rgba(255, 255, 255, 0.17) 0 55%,
      rgba(0, 0, 0, 0.22) 60% 100%),
    repeating-radial-gradient(ellipse 12px 9px at 11.5px 62%,
      rgba(255, 255, 255, 0.09) 0 50%,
      rgba(0, 0, 0, 0.26) 58% 100%),
    linear-gradient(180deg, #6d7480 0%, #4a515c 38%, #2c313a 72%, #1b1f26 100%);
  background-size: 17px 100%, 23px 100%, 100% 100%;
  box-shadow:
    0 -1px 2px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

/* Die vier tragenden Bolzen. Jeder sitzt in einem anderen Winkel — ein
   Satz gleich ausgerichteter Schrauben sieht sofort nach Aufkleber aus. */
.bolzen {
  position: absolute;
  width: clamp(26px, 3.4vw, 40px);
  aspect-ratio: 1;
  rotate: var(--dreh, 0deg);
}
.b-lo { top: 12px; left: 14px;  --dreh: 14deg; }
.b-ro { top: 12px; right: 14px; --dreh: -9deg; }
.b-lu { bottom: 12px; left: 14px;  --dreh: -21deg; }
.b-ru { bottom: 12px; right: 14px; --dreh: 6deg; }

/* ---------------------------------------------------------------------
   Untere Reihe: Abdeckung und Typenschild
   --------------------------------------------------------------------- */

.reihe {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 2.2vw, 26px);
}

/* --- die Abdeckung --- */

.klappe {
  position: relative;
  flex: 0 1 clamp(240px, 30%, 460px);
  min-height: clamp(86px, 13vh, 132px);
  border-radius: 7px;
  /* Die Abdeckung liegt nicht plan auf: die linke obere Ecke kippt dem
     Betrachter entgegen, weil dort die Schraube fehlt. Der Drehpunkt liegt
     unten rechts, wo sie noch festsitzt. */
  transform: perspective(900px) rotateX(1.5deg) rotateY(-1.9deg);
  transform-origin: 88% 86%;
  animation: atmen 9s ease-in-out infinite;
  background-image:
    var(--riffel),
    linear-gradient(174deg, #414957 0%, #323945 40%, #272c35 100%);
  box-shadow:
    inset 0 1px 0 rgba(226, 234, 246, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.7),
    /* die Fuge rundherum: die Abdeckung sitzt in einer Aussparung */
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 0 3px rgba(255, 255, 255, 0.05),
    /* DER SPALT oben links: dort steht das Blech ab, dahinter ist es
       finster. Hart, nicht weich — ein Spalt hat eine Kante. */
    -6px -6px 0 -1px #05070a,
    -10px -11px 14px rgba(0, 0, 0, 0.85),
    /* und der Schlagschatten der angehobenen Ecke nach unten rechts */
    9px 13px 20px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(0, 0, 0, 0.85);
}

/* Die linke obere Ecke sitzt nicht sauber auf: das Blech steht dort ein
   Stueck ab.

   Drei Lagen machen das aus, und die Reihenfolge ist nicht beliebig:
     1. der SCHATTEN, den die abstehende Ecke auf das Blech darunter wirft
        (nach rechts unten versetzt, weich),
     2. die abgehobene ECKE selbst, nach links oben versetzt und HELLER
        als der Rest, weil sie sich dem Licht zuneigt,
     3. eine harte helle Linie entlang der Bruchkante.
   Nimmt man den Schatten weg, wird sofort ein ausgeschnittenes Loch
   daraus statt eines hochstehenden Blechs. */
/* Die herausgedrehte Schraube. Sie ist groesser als die festen, weil ihr
   Kopf ueber dem Blech steht und damit naeher am Betrachter — und sie hat
   einen eigenen, deutlich anderen Winkel, damit der Schlitz auffaellt.
   Das Symbol bringt Senkung, Gewinde und Schatten selbst mit. */
.lose {
  /* sitzt etwas weiter innen als die festen Schrauben, damit Kopf, Gewinde
     und Senkung vollstaendig auf dem Blech liegen und nicht an der
     Plattenkante abgeschnitten werden */
  top: 5px;
  left: 9px;
  width: calc(clamp(17px, 2.1vw, 25px) * 1.9);
  --dreh: -14deg;
  /* Der Schatten des Kopfes steckt schon im Symbol; dieser hier ist der
     weiche Abfall darum herum. */
  filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.7));
}

@keyframes atmen {
  0%, 100% { transform: perspective(900px) rotateX(1.5deg) rotateY(-1.9deg); }
  50%      { transform: perspective(900px) rotateX(2.2deg) rotateY(-2.7deg); }
}

.schraube {
  position: absolute;
  width: clamp(17px, 2.1vw, 25px);
  aspect-ratio: 1;
  rotate: var(--dreh, 0deg);
}
.s1 { top: 9px;    left: 10px;   --dreh: 38deg; }
.s2 { top: 9px;    right: 10px;  --dreh: -62deg; }
.s3 { bottom: 9px; left: 10px;   --dreh: 12deg; }
.s4 { bottom: 9px; right: 10px;  --dreh: 77deg; }

/* --- das Typenschild --- */

.typenschild {
  position: relative;
  flex: 1 1 auto;
  border-radius: 4px;
  padding: clamp(12px, 1.8vh, 20px) clamp(38px, 3.8vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  /* vertieft eingelassen: Lichtkante UNTEN, Schatten oben */
  background-image:
    /* Hier liegt die Riffelung gedaempft darueber: auf voller Staerke saege
       sie durch die geaetzte Schrift, und die ist klein. */
    linear-gradient(rgba(34, 38, 46, 0.55) 0 100%),
    var(--riffel),
    linear-gradient(176deg, #22262e 0%, #2a2f38 62%, #333945 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 -1px 0 rgba(226, 234, 246, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

.daten {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(16px, 2.6vw, 34px);
}
.daten > div { display: flex; align-items: baseline; gap: 8px; }

/* Geaetzte Schrift: dunkel eingegraben, mit einer Lichtkante an der
   Unterkante der Vertiefung. */
.daten dt, .warnung, .rechtlich {
  font-size: clamp(0.58rem, 0.82vw, 0.72rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6f7788;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
}
.daten dd {
  font-size: clamp(0.68rem, 0.95vw, 0.84rem);
  letter-spacing: 0.1em;
  color: #aeb7c6;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.12);
}

.warnung { color: #8c7a4e; }

.rechtlich { display: flex; gap: 10px; align-items: center; }
.rechtlich a {
  color: #737b8c;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.25s, border-color 0.25s;
}
.rechtlich a:hover, .rechtlich a:focus-visible { color: var(--messing); border-color: rgba(216, 163, 60, 0.5); }
.rechtlich span { color: #454b57; }

/* Die Innensechskant-Schrauben am Typenschild. Kleiner als die an der
   Abdeckung: sie halten nur ein Schild, nicht eine Klappe. */
.isk { width: clamp(13px, 1.6vw, 19px); }
.t1 { top: 9px;    left: 11px;  --dreh: 22deg; }
.t2 { top: 9px;    right: 11px; --dreh: -41deg; }
.t3 { bottom: 9px; left: 11px;  --dreh: 8deg; }
.t4 { bottom: 9px; right: 11px; --dreh: 63deg; }

/* ---------------------------------------------------------------------
   Licht und Koernung, ueber allem
   --------------------------------------------------------------------- */

.licht, .koernung {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.licht {
  background-image:
    radial-gradient(17% 16% at var(--lx) var(--ly),
      rgba(255, 255, 255, 0.028), transparent 72%),
    /* Vignette: die Raender saufen ab, die Mitte steht im Licht */
    radial-gradient(120% 100% at 50% 44%,
      transparent 42%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.78) 100%);
  mix-blend-mode: soft-light;
}

.koernung {
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Schmale Geraete
   --------------------------------------------------------------------- */

.haende { display: none; }

@media (max-width: 860px) {
  .reihe { flex-direction: column; }
  .klappe { display: none; }

  /* Hier zieht sich die Platte NICHT ueber die ganze Hoehe: hochkant wuerde
     der Name sonst in einer leeren Flaeche schwimmen. */
  .schild { flex: 0 1 auto; }
  .schild-flaeche { margin-bottom: clamp(20px, 4vh, 40px); }
  .marke { font-size: min(21vw, 22vh); }
  .naht { bottom: 13%; }

  .haende {
    display: block;
    align-self: center;
    text-align: center;
    max-width: 22rem;
    padding: 12px 18px;
    border-radius: 3px;
    font-size: 0.72rem;
    line-height: 1.8;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6f7788;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
    background-image: linear-gradient(176deg, #1d2128, #262b34);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .klappe { animation: none; }
}