/* ============================================================
   rahmen.css — der Rahmen jeder Produktseite (Welle U5)
   Masterplan plan/2026-09-18-oberflaeche-aus-dem-entwurf.md, Kohorte 4, K4.7.

   Vorlage ist der abgenommene Entwurf design/2026-09-18-prototyp-werkstatt.html:
   Handy (< 700 px) — Kopfleiste mit Schriftzug und Glocke, Reiterleiste unten mit
   vier Reitern; Web (>= 700 px) — Seitenleiste 224 px mit fünf Einträgen, Glocke und
   Konto oben rechts. Maße und Abstände stammen aus dem Entwurf, Farben ausschließlich
   aus den --wb-*-Token in werkbank.css (Token-SSOT). Es gibt nur die Nacht-Werkstatt
   (Jan, Entwurf Runde 4: „komplett entfernen, sodass wir nur ein Theme haben, und
   zwar das dunkle“); base.html setzt data-design und data-theme fest.

   Die Seitenleiste des alten Rahmens (.sidebar in style.css) ist nicht mehr im
   Markup; ihre Regeln bleiben liegen, weil andere Designs sie tragen.
   ============================================================ */

/* Die Sprungmarke liegt ausserhalb des Bildes, bis sie den Fokus bekommt. Oberhalb,
   nicht links daneben: die Zählweise „im ersten Bild" (scripts/mess_oberflaeche.py)
   prüft nur die Höhe, und eine links versteckte Marke zählte als sichtbar mit.
   Diese beiden Regeln gelten in jedem Design — sonst stünde sie dort offen da. */
.sprungmarke { position: absolute; left: 16px; top: -200px; z-index: 100; }
.sprungmarke:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
#inhalt:focus { outline: none; }

html[data-design="werkbank"][data-theme="dark"] { color-scheme: dark; }
html[data-design="werkbank"] body,
html[data-design="werkbank"] body.fokus { background: var(--wb-bg); }

html[data-design="werkbank"] .sprungmarke {
  padding: var(--wb-s-2) var(--wb-s-4); border-radius: var(--wb-r-pill);
  background: var(--wb-surface); color: var(--wb-text); font-weight: 600;
  text-decoration: none; box-shadow: var(--wb-shadow-panel);
}

/* --- Werkbank: Grundfläche mit Arbeitsleuchte von oben (Entwurf .app) ---------- */
html[data-design="werkbank"] .app-shell {
  position: relative; display: block; min-height: 100vh;
  background: var(--wb-bg); isolation: isolate;
}
/* `fixed`: im Entwurf rollt nur der Inhalt, die Leuchte steht. Die Seite hier rollt als
   Ganzes — mit `absolute` wanderte das Licht beim Rollen mit weg. */
html[data-design="werkbank"] .app-shell::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 52% at 50% -14%, var(--wb-glow-top) 0%, transparent 62%),
    radial-gradient(70% 38% at -12% 74%, var(--wb-glow-side) 0%, transparent 62%),
    radial-gradient(70% 38% at 112% 80%, var(--wb-glow-side2) 0%, transparent 62%);
}
/* werkbank.css gab der Inhaltsspalte eine eigene Fläche und ein eigenes Licht, als die
   Seitenleiste noch nicht zur Werkstatt gehörte. Jetzt liegt beides auf dem ganzen Rahmen. */
html[data-design="werkbank"] .main-wrap { position: relative; background: transparent; isolation: auto; }
html[data-design="werkbank"] .main-wrap::before { content: none; }

/* --- Schriftzug: klip in der Textfarbe, werk im Messing (Entwurf Runde 6) --------- */
html[data-design="werkbank"] .wortmarke {
  font-family: var(--wb-font-display); font-weight: 700; font-size: 26px; line-height: 1;
  letter-spacing: -.005em; color: var(--wb-text); white-space: nowrap;
}
html[data-design="werkbank"] .wortmarke b { color: var(--wb-brass); font-weight: 700; }

/* --- Kopfleiste (Entwurf .topbar) ------------------------------------------------ */
html[data-design="werkbank"] .kopfleiste {
  position: relative; z-index: 2; max-width: none; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--wb-s-3);
  padding: calc(var(--wb-s-3) + env(safe-area-inset-top, 0px)) var(--wb-s-4) var(--wb-s-2);
}
html[data-design="werkbank"] .kopf-rechts {
  display: flex; align-items: center; gap: var(--wb-s-2); margin-left: auto;
}
html[data-design="werkbank"] .glocke {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--wb-well); box-shadow: var(--wb-well-inset); color: var(--wb-muted);
}
html[data-design="werkbank"] .glocke:hover { color: var(--wb-text); border: 0; }
html[data-design="werkbank"] .glocke svg { width: 20px; height: 20px; }
/* Die Zahl ist eine Meldung, keine Menge — deshalb hier eine gefüllte Pille (Entwurf).
   Die Fläche steht als Hintergrundfarbe UND als Verlauf darüber: gemessen wird die
   Farbe (probe_b5a_glocke liest backgroundColor), gemalt der Verlauf, und beide tragen
   dieselbe dunkle Schrift. Messing + --wb-on-fill ist in werkbank.css für beide
   Ansichten nachgerechnet; den Verlauf gibt es nur in der dunklen. */
html[data-design="werkbank"] .glocke-zahl {
  top: 0; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border: 0;
  border-radius: var(--wb-r-pill); background: var(--wb-brass); color: var(--wb-on-fill);
  font-family: var(--wb-font-text); font-weight: 600; font-size: 11px; line-height: 19px;
  text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 var(--wb-on-brass-edge);
}
html[data-design="werkbank"][data-theme="dark"] .glocke-zahl {
  background-image: linear-gradient(180deg, var(--wb-brass-hi), var(--wb-brass-fill));
}
/* Der Ausfall-Zustand behält die Paarung aus B5a (style.css) — er darf nie aussehen
   wie eine gewöhnliche Zahl. */
html[data-design="werkbank"][data-theme="dark"] .glocke-zahl.glocke-stoerung,
html[data-design="werkbank"] .glocke-zahl.glocke-stoerung {
  background: var(--hf-danger-light); background-image: none; color: var(--hf-text);
  border: 1px solid var(--hf-danger); line-height: 17px; box-shadow: none;
}
/* Konto: am Handy liegt es unter Profil (Entwurf), am Rechner oben rechts. */
html[data-design="werkbank"] .konto-knopf {
  display: none; align-items: center; gap: var(--wb-s-2); min-height: 44px; max-width: none;
  padding: 6px var(--wb-s-3) 6px 6px; border: 0; border-radius: var(--wb-r-pill);
  background: var(--wb-well); box-shadow: var(--wb-well-inset); color: var(--wb-text);
  font-size: 15px; text-decoration: none;
}
html[data-design="werkbank"] .konto-knopf:hover { color: var(--wb-brass); }
html[data-design="werkbank"] .konto-knopf .konto-avatar {
  width: 32px; height: 32px; border: 0; background: var(--wb-well);
  box-shadow: var(--wb-well-inset); color: var(--wb-muted);
}
/* Das Skalenband unter der Kopfleiste (Entwurf .tickline) — reine Zier. */
html[data-design="werkbank"] .tickline {
  position: relative; z-index: 2; height: 7px; margin: 0 var(--wb-s-4);
  border-top: 1px solid var(--wb-line);
  background:
    repeating-linear-gradient(to right, var(--wb-line) 0 1px, transparent 1px 8px) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(to right, var(--wb-faint) 0 1px, transparent 1px 40px) 0 0 / 100% 6px no-repeat;
}

/* --- Inhalt: unten Platz für die Reiterleiste (Entwurf main) --------------------- */
html[data-design="werkbank"] .app-shell main { padding: var(--wb-s-2) var(--wb-s-4) 118px; }
html[data-design="werkbank"] body[data-leiste="ohne"] .app-shell main { padding-bottom: var(--wb-s-8); }

/* --- Seitenleiste (Web) und Reiterleiste (Handy) --------------------------------- */
html[data-design="werkbank"] .rail { display: none; }
html[data-design="werkbank"] .dock {
  position: fixed; z-index: 3;
  left: var(--wb-s-4); right: var(--wb-s-4);
  bottom: calc(var(--wb-s-4) + env(safe-area-inset-bottom, 0px));
  height: 68px; border-radius: var(--wb-r-pill);
  background: color-mix(in srgb, var(--wb-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-dock);
  display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); padding: 6px;
}
/* Detailseiten tragen „Zurück" statt der Leiste (Regel R8, Entwurf OHNE_DOCK). */
html[data-design="werkbank"] body[data-leiste="ohne"] .dock { display: none; }
/* B6s Ablage „In Arbeit“ klebt unter 1080 px am unteren Rand (style.css, 12 px). Am Handy
   steht dort seit U5 die Reiterleiste, und die Ablage läge dahinter. Sie gehört über die
   Leiste, wie im Entwurf (dort 92 px = Abstand 16 + Leiste 68 + Luft 8). Ohne Leiste
   und ab 700 px gilt B6s Maß. */
@media (max-width: 699px) {
  html[data-design="werkbank"] body:not([data-leiste="ohne"]) .stapel-raster.mit-ablage .ablage {
    bottom: calc(var(--wb-s-4) + 68px + var(--wb-s-2) + env(safe-area-inset-bottom, 0px));
  }
}
html[data-design="werkbank"] .dock a {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 0 4px; border-radius: var(--wb-r-pill);
  font-family: var(--wb-font-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wb-muted); text-decoration: none;
}
html[data-design="werkbank"] .dock a[aria-current] {
  background: var(--wb-well); box-shadow: var(--wb-well-inset); color: var(--wb-brass);
}
html[data-design="werkbank"] .dock svg { width: 22px; height: 22px; }
html[data-design="werkbank"] .dock .dock-t { display: inline-flex; align-items: baseline; gap: 4px; }
/* Dieselbe Menge wie in der Seitenleiste, hinter der Beschriftung — keine Pille. */
html[data-design="werkbank"] .dock .count {
  font-weight: 600; color: var(--wb-brass); font-variant-numeric: tabular-nums;
}

@media (min-width: 700px) {
  html[data-design="werkbank"] .app-shell {
    display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start;
  }
  html[data-design="werkbank"] .rail {
    display: flex; flex-direction: column; gap: var(--wb-s-1);
    position: sticky; top: 0; height: 100vh; z-index: 2; overflow-y: auto;
    padding: calc(var(--wb-s-5) + env(safe-area-inset-top, 0px)) var(--wb-s-3) var(--wb-s-5);
    border-right: 1px solid var(--wb-line);
  }
  html[data-design="werkbank"] .rail .wortmarke { font-size: 30px; padding: 0 var(--wb-s-3) var(--wb-s-5); }
  html[data-design="werkbank"] .rail a {
    display: flex; align-items: center; gap: var(--wb-s-3); min-height: 48px;
    padding: 0 var(--wb-s-3); border-radius: var(--wb-r-pill);
    color: var(--wb-muted); font-size: 15px; text-align: left; text-decoration: none;
  }
  html[data-design="werkbank"] .rail a svg { width: 20px; height: 20px; flex: none; }
  html[data-design="werkbank"] .rail a:hover { color: var(--wb-text); }
  html[data-design="werkbank"] .rail a[aria-current] {
    background: var(--wb-well); box-shadow: var(--wb-well-inset); color: var(--wb-brass);
    font-weight: 600;
  }
  /* Die Zahl ist eine MENGE (Tester 18.09.: „Sind das notifications?") — Schrift und
     Farbe der Zeile, die sie zählt, keine Pille. Deckkraft .8 statt .75 des Entwurfs
     (A2 zu U5): mit .75 lag die Zahl im nicht aktuellen Eintrag bei 4,42:1. */
  html[data-design="werkbank"] .rail .zahl {
    margin-left: auto; font-family: var(--wb-font-text); font-size: 15px; font-weight: 500;
    font-variant-numeric: tabular-nums; color: inherit; opacity: .8;
  }
  html[data-design="werkbank"] .dock { display: none; }
  html[data-design="werkbank"] .kopfleiste {
    justify-content: flex-end;
    padding: calc(var(--wb-s-4) + env(safe-area-inset-top, 0px)) var(--wb-s-8) var(--wb-s-2);
  }
  html[data-design="werkbank"] .kopfleiste .wortmarke { display: none; }
  html[data-design="werkbank"] .konto-knopf { display: inline-flex; }
  html[data-design="werkbank"] .app-shell main,
  html[data-design="werkbank"] body[data-leiste="ohne"] .app-shell main {
    padding: var(--wb-s-2) var(--wb-s-8) var(--wb-s-10);
  }
}