/* ═══════════════════════════════════════════════════════════════════
   Entwurf B — „Bühne"

   NUR die Abweichungen von basis.css. Die Seite laedt beide, in dieser
   Reihenfolge — so gibt es jede gemeinsame Regel genau einmal, und eine
   Korrektur an der Grundlage wirkt in allen drei Entwuerfen.

   Dieselben Inhalte wie A, anderes Register: dunkel als Grundton,
   Amethyst als einzige Lichtquelle, der Auftakt mittig und gross. Das
   Kategoriespektrum unter dem Auftakt ist kein Schmuck — es ist die
   Inhaltsuebersicht des Katalogs und fuehrt dorthin.
   ═══════════════════════════════════════════════════════════════════ */
/* Der Auftakt steht mittig und traegt als einziger Abschnitt Licht. */
.hero{position:relative;overflow:hidden;background:var(--bg);border-bottom:0}
/* Eine Lichtquelle, keine zwei. Der zweite, kuehlere Schein sitzt weit
   aussen und ist nur da, damit die Flaeche nicht wie ein Farbverlauf aus
   der Dose aussieht. */
.glanz{
  position:absolute;inset:-14% -6% auto;height:820px;pointer-events:none;
  background:
    radial-gradient(52% 58% at 50% 12%, color-mix(in oklab, var(--c-amethyst) 34%, transparent), transparent 68%),
    radial-gradient(34% 40% at 84% 4%,  color-mix(in oklab, var(--c-azur) 20%, transparent), transparent 70%);
}
/* Im Hellmodus wuerde derselbe Schein die Schrift ausbleichen. */
:root[data-theme="light"] .glanz{opacity:.5}
.hero-in{
  position:relative;display:block;text-align:center;
  padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(2.5rem,5vw,4rem);
}
.hero .eyebrow{justify-content:center}
.hero h1{
  font:700 var(--t-hero)/1.06 var(--sans);letter-spacing:-.035em;
  max-width:19ch;margin-inline:auto;
}
.hero .lede{
  margin-inline:auto;margin-top:var(--s-5);max-width:56ch;
  font-family:var(--sans);font-size:clamp(1rem,.95rem + .35vw,1.125rem);
  line-height:1.65;
}
.hero .lede strong{color:var(--ink)}
.hero-tasten{justify-content:center}
.hero-fuss{display:none}

/* Die server.cfg rueckt unter den Text und wird schmaler - sie belegt
   hier keine eigene Spalte mehr. */
.hero-code{
  max-width:620px;margin:var(--s-7) auto 0;text-align:left;
  background:color-mix(in oklab, var(--surface) 82%, transparent);
  border-color:var(--line-2);box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}
.hero-code figcaption{background:transparent;gap:.6rem}
.hero-code-note{display:none}
.kompat{display:none}

/* ── Das Kategoriespektrum ────────────────────────────────────────
   Sieben Balken, sieben Farben, die Zahl daneben. Fuehrt in den
   Katalog und ersetzt dort die Ueberschrift nicht, sondern kuendigt
   sie an. */
.register{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.4rem;margin:var(--s-7) auto 0;max-width:920px;text-align:left;
}
.register a{
  display:block;padding:.7rem .1rem 0;color:var(--ink-2);
  border-top:3px solid var(--gc);
  transition:color .15s, transform .15s;
}
.register a:hover{color:var(--ink);text-decoration:none;transform:translateY(-2px)}
.register .reg-n{display:none}
.register .reg-t{
  display:block;font:500 var(--t-micro)/1.35 var(--sans);letter-spacing:.01em;
}
/* --gc ist die Flaechenfarbe; als Text faellt sie im Hellmodus durch
   (3,0-4,3:1). --gc-ink ist dieselbe Farbe, dunkel genug zum Lesen. */
.register .reg-z{
  display:block;margin-top:.15rem;
  font:600 .8125rem/1 var(--mono);color:var(--gc-ink);
}

/* ── Flaechen statt Haarlinien ───────────────────────────────────── */
.site-head{
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
}
.versprechen,.katalog,.einbau,.support{background:transparent}
.katalog,.einbau,.support,.versprechen{border-top:1px solid var(--line)}
.zahlen-band{background:transparent}

.drei{background:transparent;gap:var(--s-3);grid-template-columns:repeat(3,minmax(0,1fr))}
.drei li{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}

.zahlen{
  background:transparent;border:0;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.zahl{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.zahl-n{color:var(--accent)}

/* Die Zeilen der Sammlung: farbige Kante links, sobald der Zeiger
   darauf liegt oder der Eintrag offen steht. */
.eintrag{position:relative}
.eintrag::before{
  content:"";position:absolute;inset:0 auto 0 0;width:2px;border-radius:2px;
  background:var(--gc);transform:scaleY(0);transform-origin:top;
  transition:transform .22s ease;
}
.eintrag:hover::before{transform:scaleY(1)}
.eintrag:has(.eintrag-schalter[aria-expanded="true"])::before{transform:scaleY(1)}
.eintrag-schalter:hover{background:color-mix(in oklab, var(--gc) 7%, var(--surface))}
.eintrag-schalter[aria-expanded="true"]{background:var(--surface)}
.cell{border-bottom-color:var(--line)}

.grp{border-top-width:1px;border-top-color:var(--line);padding-top:var(--s-5)}
.grp-name::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--gc);flex:none;
}
.grp-name{font-size:1.1875rem}

.chip{border-radius:var(--r-sm)}
.chip.is-on{
  background:color-mix(in oklab, var(--gc) 14%, var(--surface));
  border-color:var(--gc-ink);color:var(--ink);box-shadow:none;
}

.einbau-kasten{
  border-radius:var(--r-lg);border-left-width:1px;
  border-top:3px solid var(--c-bernstein);
}
.support-fakten{background:transparent;border:0;gap:var(--s-2)}
.support-fakten>div{border:1px solid var(--line);border-radius:var(--r)}

.knopf-still{background:transparent;border-color:var(--line-2)}
.knopf-still:hover{background:var(--surface);border-color:var(--ink-3)}

@media (max-width:860px){
  .register{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .drei{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){
  .register{grid-template-columns:minmax(0,1fr)}
}

/* Die mitlaufende Filterleiste erbt aus der Grundlage --surface; auf
   dem dunklen Grund von B waere das ein hellerer Streifen. */
.filter{
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--line);
}