/* ═══════════════════════════════════════════════════════════════════════════
   SANCTARUM · Design-Tokens
   Welt: ein Gewölbesaal aus schwarzem Glas und mattem Gold. Museumslicht von
   oben. Die Karten sind die einzige echte Farbquelle im Raum — alles andere
   tritt zurück. Seltenheit ist Licht, nicht Text.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* — Raum — */
  --void:#04050A; --stone:#0A0C13; --stone-2:#11141F; --stone-3:#1A1E2D;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075);
  --edge:rgba(255,255,255,.09); --edge-2:rgba(255,255,255,.17);

  /* — Gold: das Material der Rahmen, nie der Flächen — */
  --gold:#E7C57A; --gold-deep:#B98A38; --gold-pale:#F6E6BC;
  --gilt:linear-gradient(145deg,#F6E6BC 0%,#E7C57A 26%,#A97C2E 52%,#E7C57A 74%,#FFF6DE 100%);

  /* — Museumslicht — */
  --lamp:#FFE7BE; --lamp-soft:rgba(255,231,190,.13);

  --ink:#F2EFE8; --ink-2:#A9AABB; --ink-3:#7F819A;   /* ≥ 4.5:1 auch auf --stone */

  /* — Seltenheitsauren: die Sprache des Hauses — */
  --r0:#8E97AC;  /* Gemein      */
  --r1:#3FD9A0;  /* Ungewöhnlich*/
  --r2:#4FC3FF;  /* Selten      */
  --r3:#B478FF;  /* Episch      */
  --r4:#FFB53D;  /* Legendär    */
  --r5:#FF6FD0;  /* Mythisch    */
  --prisma:conic-gradient(from 210deg,#4FC3FF,#B478FF,#FF6FD0,#FFB53D,#3FD9A0,#4FC3FF);

  --serif:'Fraunces',Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,'Segoe UI',sans-serif;

  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.5s;
  --shadow-deep:0 40px 90px -40px rgba(0,0,0,.95),0 4px 20px rgba(0,0,0,.6);
}

/* Tageslicht-Variante: derselbe Saal, Vorhänge offen. */
[data-theme="light"]{
  --void:#EDE7DA; --stone:#F5F1E8; --stone-2:#FFFDF7; --stone-3:#FFFFFF;
  --glass:rgba(28,22,10,.035); --glass-2:rgba(28,22,10,.06);
  --edge:rgba(40,32,16,.14); --edge-2:rgba(40,32,16,.26);
  /* Werte gegen den hellsten Grund (#EDE7DA) auf ≥ 4.5:1 geprüft — WCAG AA. */
  --gold:#856013; --gold-deep:#5E4310; --gold-pale:#B98A38;
  --gilt:linear-gradient(145deg,#C89C42,#9A6E1E 30%,#6E4C12 55%,#B98A38 78%,#E7C57A);
  --lamp:#8A6A2E; --lamp-soft:rgba(160,120,40,.10);
  --ink:#1A1610; --ink-2:#4E483C; --ink-3:#6A6354;
  --r0:#5A6274; --r1:#0E6E4E; --r2:#0A6396; --r3:#5B27AC; --r4:#8F5600; --r5:#9E1A6E;
  --shadow-deep:0 30px 70px -34px rgba(60,45,20,.5),0 2px 10px rgba(60,45,20,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--void);color:var(--ink);font-family:var(--sans);
  /* clip statt hidden: `overflow-x:hidden` macht den Körper zu einem eigenen
     Scrollbehälter, und daran scheitert sticky lautlos — die Leiste bliebe
     einfach stehen, ohne Fehlermeldung. `clip` verhindert dasselbe seitliche
     Scrollen, ohne einen Behälter zu erzeugen. Deshalb steht es oben bei
     html schon so. */
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;font-variation-settings:'SOFT' 30,'WONK' 1;
  letter-spacing:-.022em;line-height:1.02;margin:0}
p{margin:0}a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ── Staub im Lichtkegel + Korn: Sanctarum ist nicht steril ────────────── */
#grain{position:fixed;inset:-50%;pointer-events:none;z-index:900;opacity:.05;mix-blend-mode:overlay;
  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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:880}

/* Gewölbe-Licht von oben — folgt sanft dem Zeiger */
.sanctum-light{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 80vh at var(--lx,50%) -12vh, var(--lamp-soft), transparent 62%),
    radial-gradient(90vw 60vh at 12% 8%, rgba(79,195,255,.055), transparent 60%),
    radial-gradient(80vw 60vh at 88% 82%, rgba(180,120,255,.06), transparent 62%);
  transition:background .6s var(--ease)}
.sanctum-arch{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(231,197,122,.045) 118px 119px),
    linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 72%,rgba(0,0,0,.6))}
[data-theme="light"] .sanctum-arch{background:
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(154,110,30,.09) 118px 119px),
    linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%,transparent 74%,rgba(120,95,50,.10))}

/* ── Navigationsleiste ─────────────────────────────────────────────────── */
/* sticky, nicht fixed. Ein fixierter Kopf ist aus dem Textfluss genommen —
   der Inhalt beginnt darunter bei null und verschwindet hinter ihm. Auf der
   Startseite fiel das nie auf, weil section{padding:110px 0} den Platz
   zufällig ersetzte; auf allen anderen Seiten stand die Überschrift halb
   unter der Leiste.

   Ein fester Abstand wäre die falsche Antwort gewesen: Die Leiste ist nicht
   immer gleich hoch. Sobald die Navigation umbricht — schmales Fenster, mehr
   Menüpunkte, größere Schrift — wächst sie von 74 auf 193 Pixel, und jede
   geratene Zahl wäre wieder falsch. sticky nimmt den Platz selbst ein, in
   genau der Höhe, die es gerade braucht. */
.rail{position:sticky;top:0;z-index:400;
  background:color-mix(in srgb,var(--void) 72%,transparent);backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid var(--edge)}
.rail__in{max-width:1440px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.sigil{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sigil svg{width:30px;height:30px}
.sigil b{font-family:var(--serif);font-size:19px;letter-spacing:.30em;font-weight:600;
  background:var(--gilt);-webkit-background-clip:text;background-clip:text;color:transparent}
/* nowrap, nicht wrap. Neun Punkte, das Wappen und sechs Werkzeuge passen erst
   ab rund 1240px in eine Zeile; darunter brach die Navigation in eine Spalte
   um und die Kopfleiste wurde 235px hoch — bei 835px Fensterhöhe fast die
   Hälfte des Bildes, und die Werkzeuge rutschten so weit nach unten, dass sie
   niemand mehr als Werkzeugleiste las. Sie ist sticky: Jede Höhe, die sie
   gewinnt, fehlt dem Inhalt dauerhaft, nicht nur einmal.

   Statt eines Umbruchs schiebt sich die Navigation jetzt waagerecht — dasselbe
   Verhalten, das unter 720px ohnehin schon galt. Der Umbruch war nie die
   Absicht; er war das, was flex-wrap tut, wenn der Platz ausgeht. */
.rail nav{display:flex;gap:2px;margin-left:auto;flex-wrap:nowrap;
  overflow-x:auto;min-width:0;scrollbar-width:none}
.rail nav::-webkit-scrollbar{display:none}

/* Wenn etwas hinten heraushängt, muss man das sehen. Bei 1280px brauchte die
   Navigation 753px und hatte 639 — „Warenkorb" und „Konto" standen außerhalb,
   ohne dass irgendetwas darauf hinwies. Eine glatt abgeschnittene Leiste liest
   sich als „mehr gibt es nicht"; genau diese Meldung kam zurück.
   Die Klassen setzt navRand() je nach Scrollstand. */
.rail nav.nav--rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.rail nav.nav--links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);
  mask-image:linear-gradient(90deg,transparent,#000 40px)}
.rail nav.nav--links.nav--rechts{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

.rail nav a{position:relative;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;
  border-radius:99px;transition:color .3s var(--ease),background .3s var(--ease)}
.rail nav a.on{color:var(--ink)}
.rail nav a.on::after{content:'';position:absolute;left:15px;right:15px;bottom:2px;height:1.5px;
  background:var(--gilt);border-radius:2px}

/* Enger stellen, bevor geschoben werden muss: Bei 1280px passen alle neun
   Punkte, wenn Abstand und Schriftgrad nachgeben. Schieben ist die ehrliche
   Antwort, wenn der Platz wirklich fehlt — nicht schon bei 114px zu wenig.

   Diese Abfrage muss NACH .rail nav a stehen. Davor verliert sie: gleiche
   Spezifität, und dann gewinnt die spätere Regel — die Medienabfrage sähe
   richtig aus und täte nichts. */
@media (max-width:1400px){
  .rail__in{gap:16px}
  .rail nav a{padding:9px 9px;font-size:12.8px}
}

/* Unter ~1100px passt die Navigation nicht mehr neben Wappen und Werkzeuge.
   Sie schrumpfte dann auf nahezu null Breite und war schlicht weg — auf dem
   Handy blieben Wappen, Korb, DE/EN und die Klangnote übrig, sonst nichts.
   Kein Weg zu Vitrine, Markt oder Konto.

   Der Grund ist flexbox: .rail__in ist eine Zeile, Wappen und Werkzeuge haben
   flex-shrink:0, die Navigation nicht. Wer schrumpfen darf, schrumpft — bis
   auf null, und nichts meldet es. `order:3; width:100%` allein half nicht,
   weil .rail__in nie umbrach; ohne flex-wrap ist eine Reihenfolge nur eine
   Reihenfolge innerhalb derselben Zeile.

   Deshalb beides: umbrechen dürfen UND die ganze Breite belegen. */
@media (max-width:1100px){
  .rail__in{flex-wrap:wrap;row-gap:4px}
  .rail nav{order:3;flex:1 0 100%;margin-left:0;padding-bottom:2px}
}

/* Die Handy-Feinstellung steht am Dateiende, NACH dem 720px-Block. Hier
   verlöre sie: gleiche Spezifität, und dann gewinnt die spätere Regel. */
.rail__tools{display:flex;gap:6px;flex-shrink:0}
.tool{width:38px;height:38px;border-radius:12px;border:1px solid var(--edge);display:grid;place-items:center;
  font-size:15px;color:var(--ink-2);transition:all .3s var(--ease)}
.tool[aria-pressed="true"]{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent);
  background:color-mix(in srgb,var(--gold) 10%,transparent)}
.langswitch{display:flex;border:1px solid var(--edge);border-radius:12px;padding:3px;margin-right:2px}
.langswitch button{padding:5px 9px;border-radius:9px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-3);transition:all .3s var(--ease)}
.langswitch button.on{background:var(--gilt);color:var(--void)}
[data-theme="light"] .langswitch button.on{color:#FFF9EC}

/* ── Grundraster ───────────────────────────────────────────────────────── */
main{max-width:1440px;margin:0 auto;padding:0 28px}
section{padding:110px 0;scroll-margin-top:80px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:40px;flex-wrap:wrap;border-bottom:1px solid var(--edge);padding-bottom:22px}
.head h2{font-size:clamp(30px,4vw,52px)}
.kicker{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.lede{color:var(--ink-2);max-width:56ch;font-size:16px}
.muted{color:var(--ink-2)}.small{font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* Enthüllung beim Scrollen */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rise.in{opacity:1;transform:none}
[data-motion="reduced"] .rise{opacity:1;transform:none;transition:none}

/* ── Schaltflächen: Gold als Rahmen, nie als Fläche ────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;
  border-radius:99px;font-weight:700;font-size:14.5px;letter-spacing:.01em;
  border:1px solid var(--edge-2);background:var(--glass);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--gold{position:relative;border:0;color:var(--void);background:var(--gilt);
  box-shadow:0 10px 34px -12px rgba(231,197,122,.6),inset 0 1px 0 rgba(255,255,255,.5)}
[data-theme="light"] .btn--gold{color:#FFF9EC}

/* ── Zeigen nur, wo es einen Zeiger gibt ──────────────────────────────────
   Zwei Fehler in einer Regel, und zusammen ergaben sie einen goldenen Knopf,
   der nach dem Antippen tot aussah.

   Erstens die Spezifität: `.btn:hover` ist (0,2,0), `.btn--gold` nur (0,1,0).
   Die Hover-Regel gewann also und ersetzte den Goldverlauf durch das dunkle
   Glas — mit `color:var(--void)` darauf, also dunkler Text auf dunklem Grund.
   Der goldene Schein blieb, weil die Hover-Regel den Schatten nicht anfasst;
   genau dieses Bild kam zurück.

   Zweitens der Zeiger, den es auf einem Telefon nicht gibt. Safari und Chrome
   lassen :hover dort nach einer Berührung HÄNGEN, bis anderswo getippt wird.
   Aus einem Zustand für den Bruchteil einer Sekunde wurde ein Dauerzustand.

   @media (hover:hover) ist die Antwort auf beides: Wo kein Zeiger schwebt,
   gibt es keine Schwebe-Regel, die kleben könnte. Und der goldene Knopf setzt
   seinen Grund ausdrücklich erneut, statt sich darauf zu verlassen, dass
   niemand eine spezifischere Regel darüberlegt. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover{transform:translateY(-2px);border-color:var(--gold);background:var(--glass-2)}
  .btn--gold:hover{background:var(--gilt);border-color:transparent;
    box-shadow:0 16px 44px -12px rgba(231,197,122,.85)}
}
.btn--lg{padding:17px 34px;font-size:16px}
.btn--sm{padding:9px 16px;font-size:13px}

/* ── Vitrinenglas ──────────────────────────────────────────────────────── */
.case{position:relative;border-radius:var(--r-l);background:
    linear-gradient(160deg,var(--glass-2),transparent 46%),var(--stone);
  border:1px solid var(--edge);padding:28px;backdrop-filter:blur(8px);overflow:hidden}
.case::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 58%)}
.case--gilt{border:0;background:linear-gradient(var(--stone),var(--stone)) padding-box,var(--gilt) border-box;
  border:1px solid transparent}

/* ═══════════════════════════════════════════════ DIE KARTE ═══════════════
   Kern des Interfaces. Drei gestapelte Schichten: Rahmen (Gold), Kunst
   (prozedural aus Gradienten + Glyph) und Foil (bewegt sich mit dem Zeiger).
   Alles über CSS-Variablen --mx/--my, die JS im Pointermove setzt.
   ═════════════════════════════════════════════════════════════════════════ */
.card{--mx:.5;--my:.5;--aura:var(--r0);
  position:relative;aspect-ratio:63/88;border-radius:16px;cursor:pointer;
  transform-style:preserve-3d;perspective:900px;
  transition:transform .45s var(--ease),filter .45s var(--ease)}
.card__in{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;
  transform:rotateX(calc((.5 - var(--my)) * 16deg)) rotateY(calc((var(--mx) - .5) * 18deg)) translateZ(0);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  box-shadow:var(--shadow-deep)}
.card.live .card__in{transition-duration:.09s}
.card.live{filter:drop-shadow(0 0 34px color-mix(in srgb,var(--aura) 40%,transparent))}

.card__frame{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(170deg,var(--stone-3),var(--stone) 55%,#04050A);
  border:1.5px solid color-mix(in srgb,var(--aura) 45%,var(--edge));
  display:flex;flex-direction:column}
[data-theme="light"] .card__frame{background:linear-gradient(170deg,#FFFDF7,#F0EADC 60%,#E3DACA)}

/* Goldene Zierecken — Materialität ohne Bilddateien */
.card__frame::before,.card__frame::after{content:'';position:absolute;width:26px;height:26px;
  border:1.5px solid var(--gold);opacity:.55;pointer-events:none}
.card__frame::before{top:7px;left:7px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.card__frame::after{bottom:7px;right:7px;border-left:0;border-top:0;border-radius:0 0 6px 0}

/* Das eigene Foto füllt die Fläche. `cover` statt `contain`, weil ein
   Handyfoto selten das Seitenverhältnis einer Karte hat — mit contain stünden
   graue Balken in jeder Kachel, und die Vitrine sähe aus wie ein
   Formularausdruck. Beschnitten wird oben und unten gleich, deshalb `center`:
   Der Kartentitel sitzt fast immer in der Mitte oder unten, und darunter
   liegt ohnehin die Beschriftungsleiste. */
.card__foto{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.card__art{flex:1;position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(70% 55% at 50% 34%,color-mix(in srgb,var(--aura) 42%,transparent),transparent 72%),
    radial-gradient(120% 80% at 50% 118%,color-mix(in srgb,var(--aura) 24%,transparent),transparent 60%),
    conic-gradient(from calc(var(--seed,0) * 1deg) at 50% 42%,
      color-mix(in srgb,var(--aura) 16%,transparent),transparent 30%,
      color-mix(in srgb,var(--aura) 10%,transparent) 62%,transparent)}
.card__art::after{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(112deg,rgba(255,255,255,.035) 0 2px,transparent 2px 8px)}
.card__glyph{position:relative;z-index:2;width:56%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.card__glyph path,.card__glyph circle{stroke:color-mix(in srgb,var(--aura) 88%,white);
  fill:color-mix(in srgb,var(--aura) 22%,transparent);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.card__rank{position:absolute;top:10px;right:11px;z-index:3;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;padding:3px 8px;border-radius:99px;color:var(--aura);
  border:1px solid color-mix(in srgb,var(--aura) 55%,transparent);
  background:color-mix(in srgb,var(--aura) 14%,rgba(0,0,0,.45));backdrop-filter:blur(6px)}
.card__plate{padding:10px 12px 12px;border-top:1px solid var(--edge);
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
[data-theme="light"] .card__plate{background:linear-gradient(0deg,rgba(255,255,255,.75),transparent)}
.card__plate b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.15}
.card__plate span{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}

/* Holografischer Schimmer — nur ab „Selten“, damit er Bedeutung behält */
.card__foil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:var(--prisma);background-size:220% 220%;
  background-position:calc(var(--mx)*100%) calc(var(--my)*100%);
  mix-blend-mode:color-dodge;transition:opacity .45s var(--ease);
  -webkit-mask-image:repeating-linear-gradient(104deg,#000 0 4px,transparent 4px 11px);
          mask-image:repeating-linear-gradient(104deg,#000 0 4px,transparent 4px 11px)}
.card__glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  mix-blend-mode:soft-light;transition:opacity .45s var(--ease);
  background:radial-gradient(34% 30% at calc(var(--mx)*100%) calc(var(--my)*100%),rgba(255,255,255,.55),transparent 70%)}
.card[data-foil="1"].live .card__foil{opacity:.55}
.card.live .card__glare{opacity:1}
[data-theme="light"] .card__foil{mix-blend-mode:hard-light}

/* Aura-Ring: legendär und mythisch atmen */
.card[data-tier="4"]::after,.card[data-tier="5"]::after{content:'';position:absolute;inset:-14px;
  border-radius:24px;pointer-events:none;z-index:-1;opacity:.34;
  background:radial-gradient(closest-side,var(--aura),transparent 72%);
  animation:breathe 4.5s var(--ease) infinite}
.card[data-tier="5"]::after{background:var(--prisma);filter:blur(14px);opacity:.42}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.24}50%{transform:scale(1.06);opacity:.46}}

/* Fehlender Platz im Album */
.card--gap{cursor:default}
.card--gap .card__frame{background:var(--stone);border-style:dashed;
  border-color:var(--edge-2);opacity:.55}
.card--gap .card__glyph{opacity:.13}
.card--gap .card__plate b{color:var(--ink-3);font-style:italic}

/* Neu erhalten */
.card__new{position:absolute;top:10px;left:11px;z-index:3;font-size:9px;font-weight:800;letter-spacing:.16em;
  padding:3px 8px;border-radius:99px;background:var(--gilt);color:#0A0A0A}

/* ── Regal / Vitrinenraster ────────────────────────────────────────────── */
.shelf{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.shelf .card{transition:transform .4s var(--ease)}
.shelf .card:hover{transform:translateY(-8px)}

/* Regalbrett-Linie unter jeder Reihe */
.shelfwrap{position:relative;padding:12px 0 34px}
.shelfwrap::after{content:'';position:absolute;left:-4%;right:-4%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 45%,transparent),transparent)}

/* ── Filterreihe ───────────────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.pill{padding:8px 16px;border-radius:99px;border:1px solid var(--edge);font-size:12.5px;font-weight:700;
  color:var(--ink-3);letter-spacing:.04em;transition:all .3s var(--ease);background:var(--glass)}
.pill[aria-pressed="true"]{color:var(--void);background:var(--gilt);border-color:transparent}
[data-theme="light"] .pill[aria-pressed="true"]{color:#FFF9EC}
.pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px}

/* ═══════════════════════════════════════════════ EINGANG ════════════════ */
.entrance{position:relative;min-height:min(94vh,900px);display:grid;
  grid-template-columns:1.02fr .98fr;align-items:center;gap:50px;padding:130px 0 90px}
.entrance h1{font-size:clamp(46px,7.4vw,104px);font-weight:400;line-height:.94;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 144}
.entrance h1 em{font-style:italic;font-weight:600;background:var(--gilt);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.entrance .lede{margin-top:26px;font-size:clamp(16px,1.5vw,19px)}
.entrance__cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.entrance__meta{display:flex;gap:34px;margin-top:46px;flex-wrap:wrap;
  border-top:1px solid var(--edge);padding-top:24px}
.entrance__meta b{display:block;font-family:var(--serif);font-size:30px;font-weight:600}
.entrance__meta span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Das Podest: drei Karten unter einem Rampenlicht.

   Ein Rampenlicht ist nicht ein Kegel. Es sind vier Dinge übereinander: die
   Quelle, die klein und heiß ist; der Kern, schmal und noch warm; der Hof,
   breit und kalt; und der Teppich am Boden, wo der Strahl aufkommt. Vorher
   war es nur der Kegel — ein einziger weichgezeichneter Verlauf. Der sieht
   aus wie aufgeklebtes Papier, weil echtes Licht zum Rand hin nicht bloß
   schwächer wird, sondern auch breiter und kühler.

   Deshalb hat jede Schicht ihre eigene Unschärfe: Der Kern steht mit 14px
   fast scharf, der Hof mit 38px zerläuft. Gäbe man beiden dieselbe, fielen
   sie optisch zu einer Fläche zusammen und die ganze Staffelung wäre
   umsonst. */
.plinth{position:relative;display:grid;place-items:center;min-height:520px;perspective:1500px}

/* Der Hof — trägt die Tiefe, darf einzeln kaum sichtbar sein. */
.plinth__beam{position:absolute;top:-10%;width:min(520px,92%);height:120%;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lamp) 17%,transparent),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 86%);mask-image:linear-gradient(180deg,#000,transparent 86%);
  filter:blur(38px);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  animation:lampe 11s ease-in-out infinite}

/* Der Kern. */
.plinth__beam::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lamp) 44%,transparent),
    color-mix(in srgb,var(--lamp) 13%,transparent) 48%,transparent 76%);
  filter:blur(13px);clip-path:polygon(46.5% 0,53.5% 0,75% 100%,25% 100%)}

/* Die Quelle. Ohne sie beginnt der Kegel im Nichts, und das Auge liest ihn
   als Fläche statt als Strahl — das war der eigentliche Grund, warum das
   alte Podest billig wirkte. */
.plinth__beam::after{content:'';position:absolute;top:-2%;left:50%;translate:-50% 0;
  width:132px;height:58px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--lamp) 70%,#fff 20%),transparent 72%);
  filter:blur(11px)}

/* Der Teppich: zwei Ellipsen. Eine allein liest sich als Aufkleber, weil ihr
   der heiße Kern fehlt, den ein aufkommender Strahl immer hat. */
.plinth__disc{position:absolute;bottom:6%;width:min(460px,86%);height:78px;border-radius:50%;
  background:
    radial-gradient(closest-side,color-mix(in srgb,var(--lamp) 24%,transparent),transparent 72%),
    radial-gradient(closest-side,color-mix(in srgb,var(--gold) 32%,transparent),transparent 56%);
  filter:blur(9px)}

/* Ein Rampenlicht steht nie ganz still. Sehr wenig — sichtbar wird es erst,
   wenn man länger hinsieht, und das ist die Absicht. */
@keyframes lampe{0%,100%{opacity:1}50%{opacity:.88}}

/* Unter dem Podest, wenn dort Schaukarten liegen. Bewusst klein und grau: Er
   soll auffindbar sein, nicht werben. */
.plinth__hinweis{position:absolute;bottom:-4px;left:0;right:0;text-align:center;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);opacity:.7}
.card--schau{cursor:default}
[data-motion="reduced"] .plinth__beam{animation:none}
/* Die Karten liegen in .plinth__reihe. Vorher waren sie unmittelbare Kinder
   des Podests, und die Regeln zählten Strahl und Scheibe mit — daher 3, 4, 5.
   Mit der eigenen Reihe sind es 1, 2, 3. Wer den Wrapper einführt und diese
   Zahlen stehen lässt, verliert die Fächerung, ohne dass etwas meldet. */
.plinth__reihe{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;position:relative}
.plinth .card{position:absolute;width:min(268px,58%)}
.plinth__reihe .card:nth-child(1){transform:translateX(-58%) rotate(-13deg) scale(.83);opacity:.42;filter:blur(1px)}
.plinth__reihe .card:nth-child(3){transform:translateX(58%) rotate(13deg) scale(.83);opacity:.42;filter:blur(1px)}
.plinth__reihe .card:nth-child(2){z-index:3;animation:float 7s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(10px)}}

/* ═══════════════════════════════════════════════ ALBEN ══════════════════ */
.albums{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.album{position:relative;padding:26px;border-radius:var(--r-l);border:1px solid var(--edge);
  background:linear-gradient(155deg,var(--glass-2),transparent 52%),var(--stone);
  transition:transform .45s var(--ease),border-color .45s var(--ease);overflow:hidden}
.album:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.album__ring{position:relative;width:96px;height:96px;flex-shrink:0}
.album__ring svg{transform:rotate(-90deg)}
.album__ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.album__ring .bg{stroke:var(--stone-3)}
.album__ring .fg{stroke:url(#goldgrad);transition:stroke-dashoffset 1.6s var(--ease-out)}
.album__pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:22px;font-weight:600}
.album h3{font-size:22px;margin-bottom:4px}
.album__bar{height:5px;border-radius:99px;background:var(--stone-3);overflow:hidden;margin-top:16px}
.album__bar i{display:block;height:100%;background:var(--gilt);border-radius:99px;
  transition:width 1.6s var(--ease-out)}
.album__near{margin-top:14px;padding:11px 14px;border-radius:12px;font-size:12.5px;font-weight:700;
  color:var(--r4);border:1px solid color-mix(in srgb,var(--r4) 40%,transparent);
  background:color-mix(in srgb,var(--r4) 10%,transparent)}

/* ═══════════════════════════════════════════════ SIEGELBRUCH ════════════ */
.seal{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pack{position:relative;width:min(320px,84%);aspect-ratio:63/92;margin:0 auto;cursor:pointer;
  border-radius:20px;perspective:1000px;transition:transform .5s var(--ease)}
.pack:hover{transform:translateY(-8px) scale(1.02)}
.pack__body{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(155deg,#1C2032,#0A0C13 58%,#05060B);
  border:1.5px solid color-mix(in srgb,var(--gold) 40%,transparent);
  box-shadow:var(--shadow-deep);display:grid;place-items:center;gap:18px;padding:34px}
.pack__body::before{content:'';position:absolute;inset:0;opacity:.5;
  background:conic-gradient(from 0deg at 50% 42%,transparent,rgba(231,197,122,.14),transparent 42%,rgba(79,195,255,.1),transparent 70%)}
.pack__crest{width:104px;height:104px;position:relative;z-index:2}
.pack__crest svg{width:100%;height:100%}
.pack__crest path{fill:none;stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke}
.pack__label{position:relative;z-index:2;text-align:center}
.pack__label b{display:block;font-family:var(--serif);font-size:23px;letter-spacing:.04em}
.pack__label span{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
/* Wachssiegel */
.pack__wax{position:absolute;bottom:16%;left:50%;translate:-50% 0;z-index:3;
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#E86A4A,#9E2B18 62%,#5E1408);
  box-shadow:0 6px 18px rgba(0,0,0,.6),inset 0 2px 5px rgba(255,255,255,.3);
  font-family:var(--serif);font-size:25px;color:rgba(0,0,0,.42);
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.pack:hover .pack__wax{transform:translateX(-50%) scale(1.08);filter:brightness(1.15)}
.pack__glow{position:absolute;inset:-24px;border-radius:34px;z-index:-1;opacity:.4;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 55%,transparent),transparent 72%);
  animation:breathe 5s var(--ease) infinite}

/* Vollbild-Öffnung */
.opening{position:fixed;inset:0;z-index:800;display:none;place-items:center;
  background:radial-gradient(60% 60% at 50% 46%,rgba(10,12,20,.9),var(--void) 78%);
  backdrop-filter:blur(20px)}
.opening.on{display:grid}
.opening__stage{position:relative;width:min(1180px,94vw);display:grid;place-items:center;gap:34px}
.opening__flash{position:fixed;inset:0;background:var(--lamp);opacity:0;pointer-events:none;z-index:801}
.opening__flash.fire{animation:flash .85s var(--ease-out)}
@keyframes flash{0%{opacity:0}9%{opacity:.92}100%{opacity:0}}
.opening__crack{position:absolute;z-index:5;width:3px;height:0;background:var(--lamp);
  box-shadow:0 0 30px 10px color-mix(in srgb,var(--lamp) 70%,transparent);opacity:0}
.opening__crack.fire{animation:crack .55s var(--ease-out) forwards}
@keyframes crack{0%{height:0;opacity:1}100%{height:78vh;opacity:0}}

.pull{display:grid;grid-auto-flow:column;gap:20px;justify-content:center;perspective:1600px}
.pull .card{width:clamp(120px,13vw,182px);opacity:0;transform:translateY(80px) rotateX(-45deg) scale(.8)}
.pull .card.up{animation:emerge .95s var(--ease-out) forwards}
@keyframes emerge{0%{opacity:0;transform:translateY(90px) rotateX(-50deg) scale(.78)}
  60%{opacity:1}100%{opacity:1;transform:none}}
.pull .card.hero{animation:emergeHero 1.5s var(--ease-out) forwards}
@keyframes emergeHero{0%{opacity:0;transform:translateY(120px) rotateY(180deg) scale(.6)}
  45%{opacity:1;transform:translateY(-24px) rotateY(0deg) scale(1.22)}
  100%{opacity:1;transform:none}}
.opening__tally{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;opacity:0;
  transition:opacity .8s var(--ease) .3s}
.opening__tally.in{opacity:1}
.opening__tally b{display:block;font-family:var(--serif);font-size:28px}
.opening__tally span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.opening__cta{display:flex;gap:12px;opacity:0;transition:opacity .8s var(--ease) .6s}
.opening__cta.in{opacity:1}
.opening__hint{font-family:var(--serif);font-size:clamp(24px,3.6vw,44px);text-align:center}

/* ═══════════════════════════════════════════════ DETAIL-LICHTKASTEN ═════ */
/* overflow-y:auto ist hier kein Feinschliff: Der Lichtkasten ist fixiert, und
   ohne eigenen Bildlauf war alles unterhalb der Fensterhöhe unerreichbar —
   auf einem 600 px hohen Laptopfenster also Verkäufer, Vertrauenshinweise und
   Gebührenzeile. Kein Rad, keine Tastatur, kein Weg dorthin.
   place-items:center muss dabei zu start werden: zentrierte Inhalte, die höher
   sind als der Behälter, ragen oben heraus und lassen sich nicht zurückrollen. */
.lightbox{position:fixed;inset:0;z-index:820;display:none;padding:28px;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(4,5,10,.86);backdrop-filter:blur(22px)}
[data-theme="light"] .lightbox{background:rgba(237,231,218,.9)}
.lightbox.on{display:grid;place-items:start center;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lightbox__in{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:44px;
  max-width:960px;width:100%;align-items:start;margin:auto 0}
/* Der Schließen-Knopf schwimmt mit, statt am Anfang des Bildlaufs zu bleiben. */
.lightbox .close{position:fixed}
.lightbox h3{font-size:clamp(30px,4vw,46px);margin-bottom:6px}
.lore{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--ink-2);
  line-height:1.55;border-left:2px solid var(--gold);padding-left:18px;margin:22px 0}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--edge);border-radius:14px;overflow:hidden;margin-top:22px}
.spec div{background:var(--stone);padding:13px 15px}
.spec dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.spec dd{margin:3px 0 0;font-weight:700;font-size:15px}
.close{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--edge-2);display:grid;place-items:center;font-size:19px}

/* ═══════════════════════════════════════════════ RANG & ERFOLGE ═════════ */
.rankgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin-top:22px}
.badge{aspect-ratio:1;border-radius:18px;border:1px solid var(--edge);display:grid;place-items:center;
  gap:6px;text-align:center;padding:12px;background:var(--glass);transition:all .35s var(--ease)}
.badge:hover{transform:translateY(-4px);border-color:var(--gold)}
.badge b{font-size:11px;font-weight:700;line-height:1.2}
.badge span{font-size:26px}
.badge.locked{opacity:.32;filter:grayscale(1)}
.ladder{display:grid;gap:2px}
.ladder div{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  padding:13px 16px;border-radius:12px;transition:background .3s var(--ease)}
.ladder div:hover{background:var(--glass)}
.ladder div.you{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 13%,transparent),transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
.ladder .pos{font-family:var(--serif);font-size:19px;color:var(--gold)}
.streak{display:flex;gap:6px;margin-top:16px}
.streak i{flex:1;height:34px;border-radius:8px;background:var(--stone-3);display:grid;place-items:center;
  font-size:10px;font-style:normal;color:var(--ink-3);font-weight:700}
.streak i.hot{background:var(--gilt);color:var(--void)}

/* ── Fußbereich ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--edge);padding:56px 28px 44px;margin-top:60px;background:var(--stone)}
.foot__in{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}

/* Die Rechtslinks standen ohne eigene Formatierung da und liefen als
   Fließtext ineinander: „Allgemeine Geschäftsbedingungen Datenschutz
   Impressum …" — als ein Satz lesbar, als Liste nicht. Bei Pflichtangaben
   nach § 5 DDG ist Auffindbarkeit keine Geschmacksfrage. */
.foot__cols{display:flex;gap:56px;flex-wrap:wrap}
.foot__cols>div{display:grid;gap:9px;align-content:start}
.foot__cols h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0 0 4px}
.foot__cols a{display:block;font-size:13.5px;color:var(--ink-2);text-decoration:none;
  transition:color .18s var(--ease)}
.foot__cols a:hover,.foot__cols a:focus-visible{color:var(--gold)}
@media (max-width:700px){.foot__cols{gap:32px}}

/* ── Klang-Hinweis ─────────────────────────────────────────────────────── */
.sound-nudge{position:fixed;bottom:24px;left:50%;translate:-50% 0;z-index:500;
  padding:11px 20px;border-radius:99px;border:1px solid var(--edge-2);
  background:color-mix(in srgb,var(--stone) 92%,transparent);backdrop-filter:blur(14px);
  font-size:13px;font-weight:600;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-deep)}
.sound-nudge.gone{display:none}

/* ── Responsiv ─────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .entrance,.seal,.lightbox__in,.rankgrid{grid-template-columns:1fr}
  /* ── Das Podest auf kleinen Geräten ────────────────────────────────
     Am Schreibtisch liegen die drei Karten übereinander gefächert: eine
     vorn, zwei angeschnitten daneben. Das ist eine Anordnung für die Maus —
     man sieht sie, man greift sie nicht.

     Auf dem Handy verdeckt die vordere Karte die beiden anderen fast
     vollständig, und es gibt keine Möglichkeit, sie zu erreichen. Deshalb
     hier eine Reihe zum Wischen: alle Karten gleichberechtigt, nebeneinander,
     mit Fangpunkten, damit jede von selbst mittig einrastet.

     Absolute Positionierung und die Fächer-Transformationen müssen dafür
     zurückgenommen werden — sie stammen aus der anderen Anordnung und
     würden die Reihe wieder zusammenschieben. */
  /* Erster Versuch war eine flache Reihe nebeneinander. Sie war bedienbar
     und sah billig aus — die Tiefe ist nicht Zierrat, sie ist der Grund,
     warum das Podest wie eine Vitrine wirkt und nicht wie eine Liste.

     Jetzt beides: echtes Wischen mit Fangpunkten, und die Fächerung bleibt.
     Die Karten überlappen sich (negativer Abstand); welche vorn steht,
     rechnet podestFaechern() aus dem Abstand zur Mitte — sie folgt damit dem
     Finger statt zwischen zwei Zuständen zu springen. */
  /* Das Podest bleibt stehen und behält Strahl und Scheibe. Gewischt wird
     nur die Reihe darin — dadurch leuchtet der Strahl immer auf die Stelle,
     an der gerade eine Karte einrastet, statt mitzufahren. Genau das ist der
     Eindruck, den die Anordnung am Schreibtisch erzeugt. */
  .plinth{min-height:360px;order:-1;display:grid;place-items:center}

  .plinth__reihe{
    grid-area:1/1;width:100%;
    display:flex;gap:0;align-items:center;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* Rand, damit die erste und letzte Karte mittig einrasten können.
       Die Rechnung muss den negativen Abstand der Karten enthalten: Die
       äußere Karte wird um 34px nach innen gezogen, also braucht der Rand
       34px weniger. Ohne das lag der Fangpunkt der ersten Karte bei einem
       negativen Scrollwert — unerreichbar, und sie kam nie nach vorn. */
    padding:30px max(18px,calc(50% - 82px));
    scrollbar-width:none;
  }
  .plinth__reihe::-webkit-scrollbar{display:none}

  .plinth__beam,.plinth__disc{grid-area:1/1;position:relative;z-index:0}
  .plinth__beam{top:0;height:104%;width:min(430px,90vw)}
  .plinth__beam::after{width:96px;height:44px}
  .plinth__disc{bottom:auto;align-self:end;margin-bottom:26px;width:min(360px,80vw);height:64px}

  /* Die Fächer-Regeln oben verwenden :nth-child und sind damit spezifischer
     als `.plinth .card`. Ohne diese Aufzählung gewönnen sie und überschrieben,
     was podestFaechern() setzt — eine Zurücknahme, die stillschweigend nicht
     greift. */
  .plinth__reihe .card,
  .plinth__reihe .card:nth-child(1),
  .plinth__reihe .card:nth-child(2),
  .plinth__reihe .card:nth-child(3){
    position:static;flex:0 0 auto;
    width:min(232px,62vw);margin:0 -34px;
    animation:none;
    transform-origin:50% 82%;
    scroll-snap-align:center;
    /* Ohne Übergang ruckelt jede Nachjustierung; mit zu langem klebt die
       Karte hinter dem Finger. 90 ms sind der Punkt, an dem beides
       verschwindet. */
    transition:opacity .09s linear,filter .09s linear;
  }
  .entrance{padding-top:104px;gap:30px}
  .lightbox__in{max-width:520px}
  .lightbox__in .card{width:min(240px,62%);margin:0 auto}
}
@media (max-width:720px){
  main{padding:0 18px}
  section{padding:74px 0}
  .rail__in{padding:11px 16px;gap:12px}
  .rail nav{margin-left:0;padding-bottom:2px}
  .sigil b{font-size:16px;letter-spacing:.22em}
  .shelf{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:14px}
  .case{padding:18px}
  .pull{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:12px}
  .pull .card{width:100%}
  .entrance__meta{gap:22px}
  footer{padding:40px 18px}
}

/* Zwei Reihen sind auf dem Handy in Ordnung, drei nicht. Bei 390px brach auch
   die Werkzeugreihe um: Wappen 169 plus Werkzeuge 255 plus Abstand sind 436
   auf 375 verfügbaren Pixeln. Die Kopfleiste stand damit bei 155px — auf
   844px Bildschirmhöhe fast ein Fünftel, dauerhaft, weil sie sticky ist.

   So weit eindampfen, dass Wappen und Werkzeuge wieder in EINE Reihe passen.
   Der Schriftzug bleibt: Auf dem kleinsten Bildschirm ist er das Einzige, was
   sagt, wo man ist.

   Muss nach dem 720px-Block stehen — gleiche Spezifität, spätere gewinnt. */
@media (max-width:560px){
  .rail__in{padding:9px 12px;gap:8px}
  .sigil{gap:7px}
  .sigil svg{width:24px;height:24px}
  .sigil b{font-size:12px;letter-spacing:.06em}
  .rail__tools{gap:3px}
  .tool{width:32px;height:32px;border-radius:10px;font-size:13px}
  .langswitch button{padding:0 6px;font-size:11px}
  .rail nav a{padding:7px 8px;font-size:12px}
}

/* Kleine Geräte — iPhone SE und alles darunter. Dort reichten die Werte oben
   noch nicht, und die Werkzeuge rutschten wieder in eine dritte Reihe. */
@media (max-width:375px){
  .rail__in{padding:9px 10px;gap:6px}
  .sigil b{font-size:12px;letter-spacing:.06em}
  .rail__tools{gap:3px}
  .tool{width:30px;height:30px}
  .langswitch button{padding:0 5px}
}

/* Unter 340px geht der Schriftzug nicht mehr unter, ohne dass die Werkzeuge
   in eine dritte Reihe fallen — dort fehlten 31 Pixel. Dann lieber das Wappen
   allein: Es führt zur Startseite und trägt dieselbe Marke. Ein 120 Pixel
   hoher Kopf auf einem 568 Pixel hohen Bildschirm wäre der schlechtere
   Tausch. Betrifft das iPhone SE der ersten Generation und ähnlich schmale
   Geräte. */
@media (max-width:340px){
  .sigil b{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
[data-motion="reduced"] .card__in{transform:none!important}
[data-motion="reduced"] .plinth .card:nth-child(4),
[data-motion="reduced"] .pack__glow,
[data-motion="reduced"] .card[data-tier="4"]::after,
[data-motion="reduced"] .card[data-tier="5"]::after{animation:none}

/* ── Weitere Schwebe-Regeln, aus demselben Grund wie bei .btn ─────────────
   Auf einem Telefon bleibt :hover nach einer Beruehrung haengen. Bei einem
   Knopf sah das nur tot aus; bei den Kategorie-Knoepfen im Markt sieht es
   aus wie AUSGEWAEHLT — der Besucher glaubt, er habe gefiltert, und sucht
   den Fehler in den Ergebnissen. Wo kein Zeiger schwebt, gibt es diese
   Regeln deshalb gar nicht.

   Reine Bewegungen (.card, .album, .pack) bleiben aussen vor: Eine Karte,
   die angehoben stehenbleibt, ist ein Schoenheitsfehler, kein falscher
   Zustand. */
@media (hover: hover) and (pointer: fine) {
  .rail nav a:hover{color:var(--ink-2);background:var(--glass)}
  .tool:hover{border-color:var(--edge-2);color:var(--ink);transform:translateY(-1px)}
  .langswitch button:hover{color:var(--ink-2)}
  .pill:hover{color:var(--ink);border-color:var(--edge-2)}
}